在印刷與桌面端Web的傳統領域我們有很成熟的文字排版經驗，在移動時代，這些經驗很多依然有效，但因顯示設備與使用環境發生了變化，也給帶來了不少變化……

在印刷與桌面端Web這些傳統領域，我們已經有了很成熟的文字排版經驗。隨著移動時代的到來，APP的界面設計，加上網站越來越多地轉身為響應式設計以適應多種顯示設備，這些經驗很多依然有效，但因為顯示設備與使用環境發生了變化，也給文字排版帶來了變化。

大小反差

在桌面端我們可能會采用字號差異較大的文字組合，移動端屏幕較小，容納的文字也較少，同等的字號差異在小屏幕上的感受會被放大。

原因是我們在使用這兩種設備時的觀看距離不同，桌面端我們的眼睛離屏幕較遠，而在移動端則相反，因此我們應該在移動端使用較小的字號反差。

字重

不要使用PS中的文本加粗，它不僅破壞字體本身的美感，還改變了文字原本的字寬而影響段落內文字的對齊。合理的方式是使用字體本身的字重來控制，比如蘋方、STHeiti、Helvetica Neue等字體本身提供Light、Regular、Medium等兩三種甚至更多的字重選擇。

字間距

不要輕易改變字體默認的字間距，字體設計師已經充分考慮了這款字體所適合的字間距，如果不滿意可以更換字體。

顏色反差

移動設備使用環境復雜多變而不局限在室內，可能在室外，甚至暴露在強烈的陽光下，應確保文字在背景中不會識別困難，即使是色弱者也可以正常閱讀。WCAG 2.0中建議的兩者顏色反差比應該高于4.5:1（AA級），才能確保更多人及環境都可以輕松閱讀。Sketch中有一個插件Color Contrast Analyser可以方便的檢測這個比值，你可以使用在線檢測工具Colour Contrast Check。

柵格系統

小屏幕上，一些桌面端無關大雅的間距不等問題會變得突出。

Lofter是網易一款精品優雅的App，但其文章正文界面卻略有瑕疵：

可以看到段落右側與卡片的間距明顯大于左側。造成這個問題的原因是設計時對文本框的寬度與文字大小之間在關系考慮不周全，導致文字并不能好地填充滿文本框。

上圖為iPhone5中此界面的放大效果并加上了輔助線，仔細觀察，去除黃色部分各20px的間距后，文本框寬度是558px，而正文使用的字號是30px，所以行末留下18px的空余空間。如果字號定為31px，則剛好可以放下18個字后填滿558px像素的文本框。

當然31px的字號在實際環境中可能并不是一個最合理的字號設定，因為它并不能被整除使用到@1x的iOS開發環境。在實際設計中，可以先設定一個柵格系統，以iPhone5為例，定義最小柵格為8x8px的話，得到如下一個柵格圖：

以8為基本單位，把所有字號、文本框寬度設定為8的倍數，這樣我們就可以確保漢字始終保持對齊。

對齊

“...所有的元素都是正方體。但是從二十世紀開始使用標點後，到了現代桌上出版時代，許多排版工具軟體都直接套用來自日本的「禁則處理」—即避頭尾點；加上與西方文字混排的狀況越來越多，以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。”

——董福興《簡單做好中文排版》

在英文的段落排版中，通常是左側對齊，而讓右側自然形成起伏邊（rag）。對中文排版與閱讀習慣而言則相反，段落的頭尾對齊尤其重要。

先來看一個反例：

這是Zaker的新聞正文的表現，在夾雜了數字或英文字母字符的情況下，原本中文的整齊排列被打亂了，右側嚴重參差不齊，非常難看。

看看同一篇文章其它App是怎么處理的：

左邊是網易云閱讀，右邊是網易新聞。兩者的處理方式類似，都是通過程序的設置，微調文字的間距以補足右邊存大的空白，區別是當標點出現在行末時，網易云閱讀將標點外置，而網易新聞將標點放在了內部。

文字的對齊方式，可以用簡單的代碼實現：

Web App中，使用CSS類中指定justify屬性值控制即可，以下為兼容性較佳的方案

.space-betw {
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

原生iOS中，需為字符串對象設置NSTextAlignmentJustified值

- (NSDictionary *)demoTextAttributes {
    NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
    ps.alignment = NSTextAlignmentJustified;
    // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
    return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
}

這個方法，結合之前我們通過柵格系統對字號和文本容器寬度的規范定義，終于可以避免App中常見的段落文字對不齊，對不準的老問題。

后記

以上是實際工作中的經驗總結，移動平臺、硬件設備、字體本身都在不斷變化，相應的設計方法也不會永遠一成不變，但總的原則是不變的，那就是讓內容更易讀。

分享文章：移動端文字與排版設計的六個原則
標題網址：http://www.2m8n56k.cn/news9/162359.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、域名注冊、建站公司、ChatGPT、關鍵詞優化、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯