10個(gè)排版秘訣搞定你的UI設計
10個(gè)排版秘訣搞定你的UI設計
文字排版（Typography）不只是從下拉選單選擇字型和點(diǎn)數而已，文字排版是一項流傳數世紀的技藝，自木制和金屬的活版印刷便開(kāi)始，而且它不只歷史悠久，還很實(shí)用，大部分的人只要掌握一些實(shí)用的訣竅，就可以將之活用在諸如履歷表、電子報或名片等日常設計項目上。
資深視覺(jué)設計師 Janie Kliever 在 Design School 發(fā)表了一篇文章，列出 10 個(gè)能幫你增進(jìn)文字排版的訣竅和密技，雖然介紹的是英文字型，不過(guò)還是相當實(shí)用，讓我們一起來(lái)看看吧！
1. 將要表達的訊息配上適當的感覺(jué)
用了兩種差不多的字型？或是你總是用最喜歡的那一種字型？以上都是沒(méi)有妥善選擇字型的情形。
每種字型都散發(fā)獨特的情感或個(gè)性，也許是友善、新潮、嚴肅或傻里傻氣，但大部分的字型并不是萬(wàn)用的，所以你要判斷一個(gè)字型對你來(lái)說(shuō)是怎么樣的感覺(jué)，還有它適不適合放在這個(gè)設計里面。方法之一就是列出你希望設計呈現哪些特質(zhì)，如果能先確定內容更好，這樣就能直接挑選字型來(lái)配合建立好的內文調性。
字型設計師 Eben Sorkin 曾經(jīng)說(shuō)過(guò)：每種字體都有自己的聲音，這種聲音將影響我們閱讀文字的感受，也影響我們吸收和處理信息的過(guò)程。
它的力量強大，能讓任何形式的文字溝通更加有效且更有說(shuō)服力。當文字符合字型的個(gè)性，大家閱讀起來(lái)會(huì )更快更容易；若兩者不合，文字就會(huì )變得混亂，拖慢讀者的速度。訪(fǎng)客讀起來(lái)越容易，就越容易找到他們要的內容并點(diǎn)擊購買(mǎi)或返回（或達成其它設計的目的）。
讓我們快速看幾個(gè)范例：
一個(gè)遵循「傳統配方」的護發(fā)產(chǎn)品，融合了復古和現代的字型。
?。―esign by Device Creative Collaborative）
主打回到本質(zhì)的產(chǎn)品，包裝走極簡(jiǎn)瑞士風(fēng)設計美學(xué)和字型搭配。
?。―esign by Salih Kucukaga）
傳達歷史和工藝精神的字型選擇，字型和整體事業(yè)的品牌形象相當搭配。
?。∕ike Casebolt and Sergey Grigoryan）
古典的襯線(xiàn)字體，看起來(lái)相當適合 1925 年就開(kāi)幕的出版商的部落格，不過(guò)這個(gè)字型易讀、簡(jiǎn)明而且平易近人，帶來(lái)一種現代感，而且更適合用在網(wǎng)頁(yè)上。
?。≧andom House Books）
2.?配合讀者的心情
現在你已經(jīng)替你的設計配了完美的字型，但有個(gè)小問(wèn)題，并非所有人對同一種字型都有一樣的感覺(jué)，選擇了適合的字型后，你也要確定它適合你的觀(guān)眾。
可能有一群人覺(jué)得這字型很新潮，另一群就覺(jué)得它過(guò)時(shí)，因為我們看字型的方式受到文化連結的影響，而文化又和年齡及地區有相當大的關(guān)系，所以要對你的目標群眾有敏感度，如果你對選擇的字型有所遲疑，問(wèn)問(wèn)那個(gè)團體的人，征詢(xún)他們的意見(jiàn)，能讓你的文字排版效果更好。
?。―esigns by Peetie Design and Kelly Schmidt）
如果你的觀(guān)眾范圍很廣，并非特定族群呢？那你可能就得選擇較為中性的字體，不強調鮮明特色而能融入其他對象。這種字型經(jīng)常稱(chēng)為「Workhorse」字體，通常是基本的襯線(xiàn)或無(wú)襯線(xiàn)字型，而且因為不引人注意而用途廣泛。
▲Google 字型中一些多用途字型。
最有用的多用途字型通常還會(huì )提供各種粗細和類(lèi)型。
3.?讓字型的尺寸搭配設計內容
選擇和安排設計的字型時(shí)，閱讀難易度應該是首要考慮之一。字太小難以閱讀，字太大又很煩人，因此一般而言，印刷用段落文字應該落在 10 — 12 點(diǎn)之間，而網(wǎng)頁(yè)則是 15 — 20 之間，大部分的瀏覽器默認值是 16 點(diǎn)。
你可以用?Type Scale?這個(gè)免費工具來(lái)檢查 Google 字型庫的字型，各個(gè)尺寸在網(wǎng)頁(yè)上看起來(lái)如何。
▲Type Scale
若不是用在長(cháng)文的字呢？你可以參酌設計本身，包括整個(gè)版面的大小或呈現方式，加上一點(diǎn)基本常識幫助判斷。一些像名片之類(lèi)的小型項目或是長(cháng)段文章會(huì )需要小一點(diǎn)的字，但這些字也要清晰易讀，而非充滿(mǎn)裝飾。
大型項目如海報，因為空間更多而且大家通常會(huì )從遠一點(diǎn)的距離觀(guān)看，就可以容納大字，若選擇相對小的字體，則有更多空間發(fā)揮創(chuàng )意和選擇更有型的文字。
4.?安排層次
如果一個(gè)設計層次分得好，看起來(lái)就整齊，容易定位，可以更容易找到你要的信息。文字排版的層次對于像是電子報、雜志、書(shū)和其他傳統印刷物，及某些網(wǎng)站等文字很多的設計特別重要。
基本的層次設計，可以利用以下幾點(diǎn)：
o用字的大小來(lái)依重要性排序信息。
o用充足的空間來(lái)創(chuàng )造一個(gè)容易檢視的架構
o把相關(guān)的對象分成一組
o在適當的情況下，用標題、副標等清楚地分類(lèi)
5.?別忽略了留白和對齊方式
設計成也細節，敗也細節，其中留白和對齊影響很大，這兩者可以讓版面又擠又混亂，也可以帶來(lái)干凈和秩序。
讓我們一起來(lái)看看幾種常見(jiàn)的留白：
字距（Tracking）：文字間距，又稱(chēng)字間，這是在一段或一句文字中，每個(gè)文字的固定間距，調整這選項會(huì )讓整體文字看起來(lái)更擠或更松，縮小間距常用來(lái)節省空間，但太過(guò)緊密會(huì )讓文字難以閱讀，配合所選字型，找到適合的文字間距，是讓文章好讀的最佳方法之一。
行距（Leading）：每行間距，這是行與行間的垂直距離，就像字距一樣，過(guò)多過(guò)少都會(huì )讓文字難以閱讀或格格不入。
邊界：這是設計周邊的空白空間，除非有特殊需求，不然通常你不會(huì )想讓內容看起來(lái)像要掉出頁(yè)面一樣，在頁(yè)面周?chē)蠓降亓酎c(diǎn)空間，讀起來(lái)會(huì )更舒服。
留白：用來(lái)指設計中所有空白、白色、空無(wú)一物的空間，如果你要放很多內容，留白看似很浪費，但要讓畫(huà)面平衡、有條理，這是不可或缺的。他讓觀(guān)眾的視線(xiàn)在畫(huà)面中移動(dòng)，同時(shí)讓眼睛有地方可以休息。
至于對齊方式，「保持一致」是增進(jìn)文字排版最好的方法，在同一設計中無(wú)意義地切換各種對齊方式（靠左、靠右、置中、分散），只會(huì )看起來(lái)很隨便。
一些小訣竅：
o少用兩端對齊。這幾乎每次都會(huì )產(chǎn)生一堆不規則的空間和隨機分布的大量空白，看起來(lái)很亂而且很難閱讀。
o在段落文字選擇一種對齊方式（通常是靠左），并保持一致。
?。―esign by Bryan Kidd）
6.?學(xué)會(huì )字距微調
有一種留白是大家常常忽略的：字距微調（字間）。字句微調常和字距搞混，但兩者是不同的，字句微調是單指兩個(gè)文字間的距離。
字句微調通常是用來(lái)檢查文字排版是不是完美且專(zhuān)業(yè)的最后一個(gè)步驟，每種字型都有默認的字句微調，但有些文字組合起來(lái)間距就是不理想，尤其又大又顯眼的文字排版，比如說(shuō)標題，最好多檢查一下有沒(méi)有哪兩字間隔過(guò)大或過(guò)小，必要的話(huà)再手動(dòng)調整。
7.?限制你的字體、粗細和樣式數量
我們熱愛(ài)各種字型，但好東西太多也不好，一個(gè)設計用過(guò)多不同的字體看起來(lái)會(huì )混亂又不專(zhuān)業(yè)。
基本上，一份設計別用超過(guò)三種字體，如果是好的設計搭配對的內容，也是可以打破這項規則，制造電子、復古的效果，比如以下這份設計。
如果你剛開(kāi)始混合使用字型，基本的襯線(xiàn)搭配無(wú)襯線(xiàn)字體，幾乎都能搭配，或者找一種有各種粗細和樣式的字體或字體系列來(lái)搭配，這樣你的文字排版看起來(lái)就互相呼應，同時(shí)還保留一些變化空間。
▲免費字體系列 Alegreya Sans
粗細和樣式很容易被濫用，這些樣式可以強調文字的重要性，在視覺(jué)上更突出，或是模擬說(shuō)話(huà)語(yǔ)氣，但別在一段文章內用上一堆樣式，這樣會(huì )看起來(lái)強調得太用力，而且會(huì )讓讀者感到不禮貌。實(shí)際上，就算只用超過(guò)一種以上樣式的機會(huì )都不多。
8.?避免常見(jiàn)的「排版病」
設計程序當著(zhù)我們完成很多了不起的事，但若不夠小心，有時(shí)候也讓人容易犯下一些顯而易見(jiàn)的錯誤?！碩hinking with Type〉 的作者 Ellen Lupton 在書(shū)的官方網(wǎng)站上，舉了幾個(gè)壞習慣作為例子： 不要為了填滿(mǎn)版面任意拉長(cháng)文字，若你只拉長(cháng)一個(gè)方向，會(huì )讓文字及間距嚴重變形，如果要重設大小，請固定長(cháng)寬比例。
別用錯誤的引號。在英文字句中有的人會(huì )用直線(xiàn)引號代替逗號型引號，或者在中文使用英文引號，大部分的程序可以設定自動(dòng)取代功能，或是打字的時(shí)候善用快捷鍵。
不要使用假斜體。如果字型本身沒(méi)有提供斜體，在設計程序里還是可以簡(jiǎn)單地把它傾斜，做成斜體，但這種技術(shù)會(huì )讓字體變形，而且通?？雌饋?lái)很糟糕。真的斜體是另外設計來(lái)補充原本字型的不足，而且通常是比較好的選擇。
9.?避免沖突的顏色或背景
文字排版很少獨立存在，它通常會(huì )和其他元素搭配，尤其是背景。文字和其他部分間有足夠的對比，可以讓文字更易讀，但有些小技巧可以幫忙調降一下對比：
顏色的沖突：如果要幫文字挑顏色，你可能會(huì )想要挑個(gè)能和其他元素搭配的顏色，包括背景，如果顏色太格格不入，像是很丑的彈出式廣告窗口，背景是紅色，字是鮮綠色，或者顏色太相近，像是白色的字搭淺色背景，眼睛負擔都很大，視覺(jué)效果很差。
試試用現有的色系組合，來(lái)創(chuàng )造和諧的畫(huà)面：
圖案或復雜的背景：一樣地，太復雜的背景也會(huì )讓字難以閱讀，而你應該不想觀(guān)眾找不到信息。
試試看把復雜的圖案放在邊框，或是不會(huì )干擾閱讀的地方：
?。―esign by Szende Brassai / Adline）
關(guān)于對比原則，除了顏色，這些技巧你也應該知道特殊效果：透明、環(huán)繞，還有許多文字特效這些都很好玩，在某些情形下也很實(shí)用，不過(guò)也很容易用錯。我們有時(shí)候會(huì )陷入「這個(gè)設計很好看，但一點(diǎn)都不實(shí)用」的陷阱里。
試試在可以增進(jìn)設計效果的時(shí)候才用特效，而不是看到特效就亂用。
?。―esign by David M. Smith）
總而言之，當你嘗試發(fā)揮創(chuàng )意的同時(shí)，記得保持文字排版的清晰易讀。
10.觀(guān)察與練習
增進(jìn)文字排版技巧的最佳方式之一，就是觀(guān)察其他設計師的作品是如何運用文字排版，這需要不斷地練習并培養判斷的眼光。所以請時(shí)時(shí)注意優(yōu)秀的文字排版，它可能是捷運告示，也有可能是雜貨的標簽。
所以現在就靠你自己了，請妥善利用這些訣竅增進(jìn)你的文字排版技能吧！ 盡管是在CGWANG這樣的一些專(zhuān)業(yè)的培訓基地接受過(guò)專(zhuān)業(yè)的培訓，已經(jīng)掌握到了UI設計的基本專(zhuān)業(yè)知識，我們還是需要通過(guò)大量的閱讀不斷地豐富自己，書(shū)籍是人類(lèi)最好的朋友，多讀書(shū)可以幫助我們不斷地扎實(shí)自己的設計基本功，有利于我們的創(chuàng )作。
