本文討論了在UI設(shè)計(jì)中出現(xiàn)的關(guān)于文字排版的問(wèn)題以及與此相關(guān)的字?jǐn)?shù)限制。文章探究了多少字一行、閱讀頁(yè)面寬度、一行字?jǐn)?shù)等問(wèn)題，并強(qiáng)調(diào)做好字?jǐn)?shù)限制的重要性。這些研究有利于為設(shè)計(jì)師提供更多的借鑒，并為設(shè)計(jì)的理論提供更多的依據(jù)。

在互聯(lián)網(wǎng)的發(fā)展的今天，UI設(shè)計(jì)中出現(xiàn)了很多關(guān)于文字排版的內(nèi)容。不管是移動(dòng)端，還是網(wǎng)頁(yè)端，在設(shè)計(jì)不同的頁(yè)面時(shí)候會(huì)出現(xiàn)大量的文字排版。

從而會(huì)產(chǎn)生以下問(wèn)題：

• 到底多少字一行才能夠滿足人們的需求呢？
• 閱讀的頁(yè)面是不是寬度越寬越好？
• 一行字越多越好？
• 一行看多少字才最好？
• 我們應(yīng)該如何設(shè)計(jì)控制字?jǐn)?shù)？
• 根據(jù)頁(yè)面寬度去顯示多少字？
• 你們是不是也有這樣的疑問(wèn)？

一、研究意義

研究關(guān)于字?jǐn)?shù)的限制可以幫助我們更好的設(shè)計(jì)利用文字創(chuàng)作的內(nèi)容，為以后研究設(shè)計(jì)的設(shè)計(jì)師們提供更多的借鑒，為設(shè)計(jì)的理論提供更多的依據(jù)。

為什么要做字?jǐn)?shù)限制？其實(shí)我之前并不注重說(shuō)，字?jǐn)?shù)限制、或者圖片視頻這類型的大小限制。在做項(xiàng)目的時(shí)候，進(jìn)度都是很趕的，會(huì)覺得忽略了這些細(xì)節(jié)。很多時(shí)候都是靠開發(fā)或者測(cè)試同事隨意發(fā)揮，然后往往自己會(huì)在后面驗(yàn)收項(xiàng)目的時(shí)候，觸目驚心……

是什么讓我覺得字?jǐn)?shù)限制如此重要呢？今年在做系統(tǒng)重構(gòu)的時(shí)候，其實(shí)有比較充分的時(shí)間去思考輸入框的意義。

密碼輸入框的限制是什么、金額輸入框的限制是什么、商品標(biāo)題的輸入框限制是什么、太長(zhǎng)太短又會(huì)有什么影響、是否允許輸入特殊字符、特殊字符有哪些……簡(jiǎn)直就可以寫一本十萬(wàn)個(gè)為什么來(lái)解答了。

二、相關(guān)研究和案例分析

1. Baymard研究所關(guān)于字?jǐn)?shù)限制研究

最佳的閱讀一行是多少取決于很多因素：屏幕大小、字體大小和行距、閱讀者的眼睛疲勞程度等。

考慮這個(gè)建議可讀性和線路長(zhǎng)度從Baymard研究所：“你應(yīng)該有大約每行60個(gè)字符，如果你想有一個(gè)良好的閱讀體驗(yàn)。”

2. John McWade關(guān)于字?jǐn)?shù)的分析

John McWade美國(guó)設(shè)計(jì)師、教師、作家；創(chuàng)辦Before & After雜志在他講的關(guān)于一行是多少為最佳效果：

• 一行能夠很輕松的都下來(lái)是25個(gè)字。
• 易讀的文本一般30~80字符/行，包括標(biāo)點(diǎn)。
• 多行文本35~45；最多為65。

如果一行超過(guò)65個(gè)字就會(huì)產(chǎn)生困難。確實(shí)是這樣的，我們?cè)倏次恼碌臅r(shí)候能夠輕松的閱讀，而不是一行有無(wú)線長(zhǎng)，一行越短再讀起來(lái)時(shí)候就會(huì)越連貫，當(dāng)然也不是越短就越好。我認(rèn)為在一行25個(gè)字的時(shí)候越讀起來(lái)會(huì)相對(duì)容易，人最多可以承受的限度，應(yīng)該就是65個(gè)字左右。

3. 行寬限制

我們可以想象一下：如果一行文字過(guò)長(zhǎng)，視線移動(dòng)距離長(zhǎng)，很難讓人注意到段落起點(diǎn)和終點(diǎn)，閱讀比較困難；如果一行文字過(guò)短，眼睛要不停來(lái)回掃視，破壞閱讀節(jié)奏。

因此我們可以讓內(nèi)容區(qū)的每一行承載合適的字?jǐn)?shù)，來(lái)提高易讀性。

傳統(tǒng)圖書排版每行最佳字符數(shù)是55—75，實(shí)際在網(wǎng)頁(yè)上每行字符75—85更流行。中文在14號(hào)字體時(shí)，建議35—45個(gè)文字。

4. 間距限制

行距是影響易讀性非常重要的因素，過(guò)寬的行距會(huì)會(huì)讓文字失去延續(xù)性，影響閱讀；而行距過(guò)窄，則容易出現(xiàn)跳行。

網(wǎng)頁(yè)設(shè)計(jì)中，文字間距一般根據(jù)字體大小選1—1.5倍作為行間距，1.5—2倍作為段間距。

比如12號(hào)字體，行間距是12px—18px，段落間距則是18px—24px。

另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非常常見的。

比如簡(jiǎn)書16號(hào)字體，行間距27px/段間距36px=75% 。文字字號(hào)本身比較大，所以行間距也不需要嚴(yán)格按照1—1.5倍的比例設(shè)置。不過(guò)行間距和段間距的比例符合75%，看起來(lái)很不錯(cuò)，這樣的視覺效果讓人在閱讀時(shí)保持一種節(jié)奏感，這就是在實(shí)際情況中將規(guī)范的靈活應(yīng)用。

5. 小說(shuō)的字?jǐn)?shù)限制

一般一行是二十字左右，一段最多不超過(guò)100字。

6. 軟件中的字?jǐn)?shù)限制

收貨人：不能超過(guò)25個(gè)漢字，不能包含特殊字符。來(lái)源淘寶-添加收貨地址。

詳細(xì)地址：長(zhǎng)度需在2-120個(gè)字符之間，不能包含特殊字符。來(lái)源淘寶-添加收貨地址。

場(chǎng)景應(yīng)用：比如彈幕一般控制一次評(píng)論最多的字?jǐn)?shù)是25個(gè)字，騰訊視頻就是如此。

7. 用戶體驗(yàn)

前后端交互：每個(gè)輸入框，都有他的意義，而字?jǐn)?shù)限制是體現(xiàn)他意義的其中一點(diǎn)。合理的限制，可以提升整個(gè)產(chǎn)品的體驗(yàn)，讓產(chǎn)品看起來(lái)舒服易讀。

提交內(nèi)容：在提交內(nèi)容的時(shí)候，對(duì)于填寫的內(nèi)容有一個(gè)提前預(yù)判，從而再進(jìn)行填寫。

業(yè)務(wù)需求：同樣的一個(gè)內(nèi)容發(fā)布，微博是2000個(gè)字、小紅薯是1000個(gè)字、微信是2000個(gè)字符，為什么要有差異呢？比如微博重媒體屬性、微信重好友社交屬性、小紅薯重分享屬性。字?jǐn)?shù)限制也是平臺(tái)定位的體現(xiàn)。

8. 報(bào)紙上的字?jǐn)?shù)限制

以經(jīng)濟(jì)類報(bào)紙為例：因?yàn)檎鎻V告少文字內(nèi)容居多，每個(gè)版面有6個(gè)豎排，每個(gè)豎排中每行16字左右，文章的長(zhǎng)短一般在豎排的行數(shù)，文章長(zhǎng)則行數(shù)多。

經(jīng)濟(jì)類報(bào)紙文章長(zhǎng)每版面大概行數(shù)80行以上，都是5號(hào)字。以此大概統(tǒng)計(jì)，每個(gè)版面字?jǐn)?shù)：16×80×6=7680字

則每張報(bào)紙有4版面共7680×4=30720字 約為3萬(wàn)字。

9. 中文書籍正文排版一行字?jǐn)?shù)限制

32 個(gè)字為最佳。

根據(jù) ETS 所述：用常見的 roman 體在 10 pt 的字號(hào)下排小寫字母表（26 個(gè)字符）長(zhǎng)度是 120_140 pt。

故而，66 個(gè)字符對(duì)應(yīng)的欄寬大概是 305_355 pt。中文排版常用的五號(hào)字通常約為 10.5 pt，折合得 29_34 字；取中值、四舍五入（也恰好湊成偶數(shù)），得 32 字。

擴(kuò)展資料：

排版，是指將文字、圖片、圖形等可視化信息元素在版面布局上調(diào)整位置、大小，是使版面布局條理化的過(guò)程。按照稿本把鉛字、圖版等排在一起拼成書報(bào)的版子，以供印刷。

10. 論文中標(biāo)題字?jǐn)?shù)限制

論文中標(biāo)題字?jǐn)?shù)不易超過(guò)20個(gè)字的規(guī)定。

11. 高考作文格

高考作文答題卡，兩欄式的是1行25格，一列25行，一面1250個(gè)字。
三欄的，一行15格，一列27行一面1215個(gè)字。

三、結(jié)論

1. 易讀的文本一般30~80字符/行，包括標(biāo)點(diǎn)。
2. 多行文本35~45；理想情況為65。
3. 最多不超過(guò)75個(gè)字最好。
4. 一般來(lái)說(shuō)，大多數(shù)人認(rèn)為每行包含60到80個(gè)字符是最佳的。

大家學(xué)會(huì)了？希望對(duì)你們有幫助。

參考文獻(xiàn)

https://www.51zxw.net/TechArticleDetails.aspx?zid=8&id=910

https://www.16xx8.com/photoshop/jiaocheng/2015/140887_3.html