用戶界面設(shè)計(jì)的排版指南
在移動(dòng)應(yīng)用和網(wǎng)站設(shè)計(jì)中,字體排版不僅僅是美觀的裝飾,更是用戶體驗(yàn)的核心。從字號(hào)、色彩到字重和大小寫(xiě),每一個(gè)細(xì)節(jié)都影響著用戶如何感知和交互。這篇文章將帶你深入探討如何通過(guò)科學(xué)的排版規(guī)則,提升界面的可讀性和視覺(jué)吸引力,為新銳設(shè)計(jì)師提供實(shí)用的設(shè)計(jì)參考。
在設(shè)計(jì)一款產(chǎn)品的用戶界面時(shí),無(wú)論是網(wǎng)站還是移動(dòng)應(yīng)用,設(shè)計(jì)師都會(huì)精心考量每個(gè)元素的細(xì)節(jié)。我們一如既往在界面視覺(jué)上努力創(chuàng)造吸引人的元素組合,例如:按鈕、輸入框、標(biāo)簽、導(dǎo)航欄等。
為了呈現(xiàn)更好的視覺(jué)體驗(yàn),構(gòu)建完美的元素組合就需要對(duì)顏色、字體、間距和圖形進(jìn)行深思熟慮的選擇。設(shè)計(jì)過(guò)程需要權(quán)衡的因素很多,我發(fā)現(xiàn)一些新銳設(shè)計(jì)師們常常會(huì)糾結(jié)元素的選擇,舉棋不定。然而,好不容易決定并構(gòu)建的元素組合,總覺(jué)得視覺(jué)呈現(xiàn)無(wú)法達(dá)到最佳呈現(xiàn)。其實(shí),問(wèn)題或許就出在排版(由于,并非專業(yè)的設(shè)計(jì)培訓(xùn)機(jī)構(gòu),工業(yè)化復(fù)制設(shè)計(jì)師的原因,很多設(shè)計(jì)師缺乏基礎(chǔ)設(shè)計(jì)原則和理論知識(shí))。為此,我總結(jié)了一些如何選擇適合界面設(shè)計(jì)的字體排版的普世規(guī)則。如今,萬(wàn)物互聯(lián),智能硬件進(jìn)入我們?nèi)粘I畹姆椒矫婷?,這里我將范圍縮小,從很小的細(xì)節(jié)開(kāi)始,只針對(duì)于智能手機(jī)(未來(lái),可以在探討智能眼鏡、智能家具等),這樣可以作為給新銳設(shè)計(jì)師們?cè)谠O(shè)計(jì)特定的應(yīng)用界面時(shí)提供一些參考。
字體排版能夠?yàn)橛脩艚缑嬖鎏碚{(diào)性,讓界面更有味道、更有趣。
回到正題,我們一起看一下每條規(guī)則和示例:
字號(hào)
使用四種不同的字體大小
在選擇字體大小時(shí),并沒(méi)有硬性規(guī)定(唯一就是要以人為本),最終取決于平臺(tái)、設(shè)計(jì)語(yǔ)言、用途和目標(biāo)受眾。還要關(guān)注屏幕像素呈現(xiàn)能力(軟硬件技術(shù)有關(guān),比如不同屏幕的特性)。然而,以下是一些針對(duì)不同使用場(chǎng)景選擇合適字體大小的參考:
- 標(biāo)題或主標(biāo)題:為標(biāo)題和主標(biāo)題使用較大的字體大小,范圍在 24px 到 36px 之間。這樣有助于吸引用戶注意力并快速傳遞信息。
- 副標(biāo)題或說(shuō)明:為副標(biāo)題或說(shuō)明選擇較小的字體大小,范圍在 14px 到 18px 之間。這種區(qū)分有助于與主要內(nèi)容區(qū)分開(kāi)來(lái)。
- 正文:既能確保用戶能夠清晰易讀,又能為眼睛沿著文本移動(dòng)提供足夠的舒適空間。正文的合適范圍是 16px 到 20px 。
- 輸入字段:對(duì)于輸入字段,選擇一種易于閱讀和輸入文本的字體大?。ū热缢阉骺?、鍵盤(pán)等)。輸入字段的合適范圍是 16px 到 18px 。
- 元數(shù)據(jù):對(duì)于元數(shù)據(jù),如日期、時(shí)間、作者姓名以及小按鈕內(nèi)的文本,可以考慮使用較小的字體大小,以免喧賓奪主。元數(shù)據(jù)的合適范圍是 12px 到 14px。
- 請(qǐng)記住,確保所選擇的字體大小對(duì)目標(biāo)受眾而言易讀且易于發(fā)現(xiàn)。我們可以將這些規(guī)則作為基準(zhǔn),但也需要根據(jù)設(shè)計(jì)目標(biāo)和用戶偏好來(lái)調(diào)整字體大?。ú灰浻布奈锢硖匦詥眩?。
色彩
當(dāng)我們想要區(qū)分標(biāo)題或內(nèi)容時(shí),首先會(huì)考慮更改字體大小。除此之外,我們還可以通過(guò)更改顏色來(lái)進(jìn)行區(qū)分。
可以在標(biāo)題和正文之間使用相同或不同的顏色
這兩個(gè)例子并不是為了證明對(duì)或錯(cuò),而是展示為不同的目的不同設(shè)計(jì)策略:
- 在左側(cè),我們?yōu)闃?biāo)題和正文使用相同的顏色,目的是增強(qiáng)視覺(jué)和諧性并使內(nèi)容更易于閱讀。
- 在右側(cè),我們?yōu)闃?biāo)題和正文使用不同的顏色,目的是創(chuàng)建視覺(jué)層次感,并區(qū)分標(biāo)題與正文內(nèi)容。
重量
字體的重要,我們就可以簡(jiǎn)單理解,就是字體粗細(xì),這一點(diǎn)也非常重要,在很多設(shè)計(jì)中隨處可見(jiàn),我們?cè)谧裱鲜鎏岬降纳室?guī)則。同時(shí),也有助于區(qū)分內(nèi)容或標(biāo)題。我們經(jīng)常會(huì)把字重將色彩搭配使用。
可以在標(biāo)題和正文之間使用相同或不同的顏色和字體粗細(xì)
這和我之前提到的色彩原則相似。然而,不同的硬件也會(huì)呈現(xiàn)不同的色彩,也會(huì)影響字重的現(xiàn)實(shí)效果。然而,作為一名 UX/UI 設(shè)計(jì)師,我們必須考慮并做出決策,確保用戶界面和體驗(yàn)既易用又友好。為此,進(jìn)行可用性測(cè)試也是必不可少的,也是設(shè)計(jì)過(guò)程中重要的一環(huán)。
大小寫(xiě)
數(shù)字產(chǎn)品早已面向全球用戶,我們暫時(shí)還不能無(wú)視英文字體。煩人的大小寫(xiě)。雖然,小寫(xiě)很少被使用,但永遠(yuǎn)不使用小寫(xiě)并非設(shè)計(jì)師的最優(yōu)解。話雖如此,使用小寫(xiě)必須要有理由(其實(shí)任何一個(gè)設(shè)計(jì)元素都應(yīng)如此),除此之外,應(yīng)該讓用戶感到自然和諧。
英文的大寫(xiě)排版呈現(xiàn)不一樣的感覺(jué),也比小寫(xiě)更常見(jiàn)。
使用小寫(xiě)和大寫(xiě)字母通過(guò)使用大寫(xiě)和小寫(xiě)字母來(lái)嘗試展示網(wǎng)站的域名。實(shí)際上,所有域名通常都是小寫(xiě)的。多觀察周遭事物的設(shè)計(jì)表現(xiàn),并深度思考其中的設(shè)計(jì)考量和策略。
最大字符數(shù)
每行擁有合適的字符數(shù)量是提高可讀性的關(guān)鍵,尤其是在移動(dòng)端上進(jìn)行廣泛的可用性測(cè)試時(shí)。理想情況下,每行不應(yīng)超過(guò) 9 個(gè)單詞或 50-60 個(gè)字符。
最大字符數(shù)或單詞數(shù)以及行高嘗試每行的最大字符數(shù),并調(diào)整行高,以便加強(qiáng)段落的可讀性。
結(jié)論
改進(jìn)用戶界面是我們作為 UX/UI 設(shè)計(jì)師的重點(diǎn),這涉及到對(duì)排版的正確使用。我們需要關(guān)注字體大小、類(lèi)型、顏色、字重、小寫(xiě)和大寫(xiě)字母,以及通過(guò)適當(dāng)?shù)男懈咦畲蠡啃械膯卧~數(shù)量。通過(guò)這樣做,我們可以提升界面的外觀、可掃描性和可讀性。
本文由人人都是產(chǎn)品經(jīng)理作者【TCC翻譯情報(bào)局】,微信公眾號(hào):【TCC翻譯情報(bào)局】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于 CC0 協(xié)議。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!