用戶界面設(shè)計(jì)的排版指南

0 評(píng)論 608 瀏覽 0 收藏 9 分鐘
🔗 B端产品需要更多地依赖销售团队和渠道合作来推广产品,而C端产品需要更多地利用网络营销和口碑传播来推广产品..

在移動(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é)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!
专题
31646人已学习21篇文章
产品经理每月必须做的事情,10个用户调查,关注100个用户博客,收集1000个用户的反馈。
专题
12019人已学习14篇文章
随着科技的发展,AI技术渗透进各个行业里边,AI图像生成和识别技术有了更大的突破性,本专题的文章分享了AI图像识别。
专题
31214人已学习16篇文章
在线教育的现状、趋势和未来。
专题
85399人已学习22篇文章
不能用C端产品思维套在B端产品上哦。
专题
16677人已学习12篇文章
每年一到年底,各家APP平台就会陆续推出年度报告。本专题的文章分享了年度报告的设计思路。