移動端UI界面設(shè)計
看標(biāo)題你腦袋里是不是該飄過N多個問號了，移動端UI界面設(shè)計？開玩笑嗎？我不是做網(wǎng)站的，我們是專業(yè)編輯100年，我要的是怎么排版，好嘛！
小編請各位莫雞動。一篇微信文章其實也相當(dāng)于一個靜態(tài)的移動端網(wǎng)頁，所以研究如何排版，當(dāng)然有必要研究一下移動端的UI設(shè)計啦。場景雖不同，但理論都是一樣一樣的。下面的理論看起來可能有些枯燥，但是很實用的，所以請耐心閱讀。
留足空間
與普遍觀點恰好相反，文字并非屏幕上彎彎曲曲的線條排列；它主要在于周圍和相互間的空間。一般包括標(biāo)題文字和正文文字，且標(biāo)題文字和段落文字之間需存在層次感，以突出標(biāo)題。另外還有一種層次在影響著行或段落的視覺流，這是特殊的層次：字母間距小于字間距，字間距小于行間距，以此類推。
要在移動端創(chuàng)造最佳易讀性，尤其要注意這些特殊層次，這些格式塔式的字、行、段落的文字組合，在自然光環(huán)境下同樣至關(guān)重要。
留白在有一期的文章中小編已經(jīng)講過了，而且小編也講過怎么修改代碼控制左右留白的寬度。在小編看來，一般文字較少的內(nèi)容適合大片留白，比如詩歌，比如圖片，可排出詩意、小清新風(fēng)格等。下面來展示幾個經(jīng)典的留白設(shè)計：
行寬與行高
行寬是一行文字的長度。或者確切的說，是一行文字的理想長度，因為很難讓每一行都精確吻合。
眾所周知，舒適閱讀的理想行寬是65個字符左右。行寬產(chǎn)生的物理長度，取決于字體的設(shè)計、字間距和你使用的具體文字。同樣的65個字符（一個中文字約為2個字符），用PT Serif字體是26.875em寬，用Open Sans是28.4375em寬，用Ubuntu字體是27.3125em寬。如果再加入斜體、大小寫和一大堆其他字體細(xì)節(jié)，還會有更大的差異。所以大家經(jīng)常會發(fā)現(xiàn)右側(cè)并沒有排滿就折行了，就是這個原因。
在桌面端瀏覽器中，65個字符很難觸及邊緣，但在移動設(shè)備上，65個字符（如果至少大到看得清）會超出瀏覽器的邊界。所以，在移動設(shè)備上，你必須得縮減行寬。
移動端并沒有普遍認(rèn)可的行寬標(biāo)準(zhǔn)。不過傳統(tǒng)上，報紙或雜志上每一個窄列都會趨向于39個字符。鑒于這個理想行寬已經(jīng)經(jīng)歷了數(shù)個世紀(jì)的考驗，它在移動端字體上也運轉(zhuǎn)良好。
一條〃的排版算比較經(jīng)典的文藝小清新風(fēng)，文字大小為14px；行間距為21px
不得不提的還有我們的最大號央視新聞，央視新聞的字號為：16px；行高為：1.5em；段間距為：15px
寬松行距、緊湊行距
行距是行之間的空間，行距太緊湊，會讓視線難以從行尾掃視到下一行首。行距太寬松，字間距會開始形成隊列，產(chǎn)生了我們通常意義上的河流，阻斷了行的視覺流。
行距的標(biāo)準(zhǔn)通常是1.4em，但以我的經(jīng)驗，這對于屏幕來說太緊湊了：在屏幕上表現(xiàn)良好的字體都有一個關(guān)鍵特征——大的凹槽，大凹槽需要更大一些的行距來保持空間層次。
反過來，更短的行寬需要更小的行距。所以你可能需要將桌面端的行距設(shè)得寬松點，同時記得將移動端的設(shè)置得緊湊些。
小編比較喜好的行間距是1.75em，字號為14號字，效果就如下圖：
下面這個是行間距為1.5em；字號為14px的顯示效果，也是相當(dāng)小清新的
不要忽視起伏邊
起伏邊是一段文字的邊緣。你讀的多數(shù)內(nèi)容是居左對齊的，導(dǎo)致右邊沿參差不齊。
當(dāng)視線從行尾跳至下一行首時，大腦最好要能判斷出下一次跳躍的角度和距離。把每次跳躍都想象成跑過跳板，如果間距保持一致，就會快很多。因此，文字左側(cè)邊緣應(yīng)該是平的，每行從同一個地方開始。
因此你絕不應(yīng)該將兩三行以上的文字居中對齊。
通常文字會設(shè)置成兩端對齊，所以兩側(cè)都不會有起伏邊。不過兩端對齊的文字產(chǎn)生的留白不統(tǒng)一。最糟的情況會導(dǎo)致一行中只有幾個字，相當(dāng)不協(xié)調(diào)。更窄的行寬會加重兩端對齊的問題，所以兩端對齊的文字在移動端是難以閱讀的。
如果整潔真的非常重要，那么使用連字符號來讓起伏邊更平滑，絕不能在移動端使用兩端對齊，不過微信文章本身也不支持兩端對齊。
文字右側(cè)是起伏邊在移動端還有一項額外好處：人們通常在易分心的場合閱讀文字，讀者視線頻繁地從文字上移開——查看站名，或是接電話。起伏邊創(chuàng)造了一個隨機形狀，讓右撇子的視線可以通過重讀最少的文字，回到剛才的位置。
減少反差
增強文字與背景對比的同時，我們也要減少不同層次文字間的反差。
其原因是我們的大腦基于環(huán)境來判斷重要性。在桌面端，標(biāo)題可能是正文字號的兩倍甚至三倍，因為屏幕上有更多文字，所以這是有效的。在移動端，實際可見的文字更少，所以反差被放大了。
多數(shù)設(shè)計師使用斐波那契數(shù)列式的字號組合。在移動端，應(yīng)該縮小比率來減少字號間的反差。比如，如果你使用黃金比例1.618與字號相乘。在移動端，應(yīng)該用更小的比例1.382來替代。
下圖這個排版，主標(biāo)題為18號字，副標(biāo)題以及正文都為14號字
按比例調(diào)整字間距
為移動端調(diào)整字號時，我們要意識到字間距發(fā)生了必要的變化。
字間距是字體中應(yīng)用在所有字符上的間距。通常你也不應(yīng)該調(diào)整字間距。
大字號是個例外，拿標(biāo)題和小號文字舉例。大號文字需要減少字間距，小號文字需要增加字間距。前者是考慮到分組，后者則是為了增強對比。如果你在調(diào)整標(biāo)題，或是用了通常字間距緊密的藝術(shù)字體，縮小時可能就需要把字間距放開一點。
這個恐怕很少人會進行字間距的調(diào)節(jié)，不過標(biāo)題中字間距太小，就看起來很擁擠，所以一般會增加一些空行。當(dāng)然，會代碼的可以自己給文字加屬性代碼：letter-spacing.
看下面這個，很大膽地調(diào)整了字間距，但看起來很清新很舒服。這個的字號為13px，字間距為3px
文字排版設(shè)計總結(jié)
字體是一門工藝，設(shè)計師終其一生都在精心打磨。的確如此，因為每個文字、每種字體和每項技術(shù)都帶來了新的挑戰(zhàn)。沒有一成不變的普適規(guī)律。
假如你追求易讀性，要牢記三條原則：行內(nèi)的視覺流要平順，空間層級要清晰，要有足夠的對比。這尤其適用于移動端頁面。
沒有不可撼動的規(guī)則，全憑你雙眼決斷。不過本文的指南可以作為理想的出發(fā)點，讓你在移動設(shè)備上優(yōu)美地排列文字。
聯(lián)系客服
