這么做可以打造一流的用戶體驗(yàn)




譯者:設(shè)計(jì)師Minz(微信號(hào):Designer_Minz),一枚成長(zhǎng)中的設(shè)計(jì)師,點(diǎn)滴積累,人人都能成為設(shè)計(jì)師。
在網(wǎng)頁(yè)設(shè)計(jì)和APP軟件中,一個(gè)好的排版不僅僅要擁有漂亮的字體。更要有高度的可讀性——易于瀏覽——同時(shí)能讓用戶專注它的內(nèi)容。
這是一個(gè)相當(dāng)艱巨的任務(wù),但是大多數(shù)設(shè)計(jì)師可以通過(guò)練習(xí)達(dá)到這種效果。
今天我們將去看看優(yōu)秀的用戶體驗(yàn)需要遵守的10個(gè) “準(zhǔn)則”,同時(shí)你也可以學(xué)習(xí)以便幫助你設(shè)計(jì)出非常棒的設(shè)計(jì)。(每個(gè)規(guī)則都配有一個(gè)網(wǎng)站的例子)
可讀性
必須使用無(wú)襯線體的想法是過(guò)時(shí)的,但是你要去了解為什么必須使用無(wú)襯線體的想法是過(guò)時(shí)的深層次原因:文字必須是易于閱讀的。
你需要避免難以閱讀的字體,然而就是這些難以閱讀的字體存在于腳本當(dāng)中,比如新奇的字體或者哥特風(fēng)的字體。(除了那些特別需要裝飾的藝術(shù)字體以外。)
絕大多數(shù)可讀性字體都能夠被輕松閱讀的,它不會(huì)花費(fèi)用戶太多時(shí)間去注意字體本身。這就是可讀性準(zhǔn)則的原理。
給行間距留足夠的空間
關(guān)鍵就是設(shè)計(jì)一個(gè)用戶都喜愛(ài)的行間距。適宜的行間距有利于閱讀,這在移動(dòng)端尤其的重要。
造成行之間變化的因素有以下這些:
文本大小 文本數(shù)量 字體樣式 屏幕寬度
這里沒(méi)有什么明文的規(guī)則去告訴你應(yīng)該怎么做–但是這里有一些規(guī)則你可以去遵循:
對(duì)于大多數(shù)網(wǎng)站,設(shè)置行間距的文本大小約125% 對(duì)于移動(dòng)設(shè)備,設(shè)置行距的文本大小約150% 使用一個(gè)松散的段落間距——等于“回歸”——使段落容易閱讀 使用你的雙眼去測(cè)試,看文本在屏幕上是松的還是緊的。(第一感受即可) 使用大而圓的字母
大又圓的字更易閱讀。所以字母有大的圓弧-這個(gè)弧度在字體里面就像一個(gè)循環(huán)的“o”
緊湊和壓縮的字體是很難閱讀的。寬松的風(fēng)格,比如上圖這個(gè)例子就容易閱讀,因?yàn)槊恳粋€(gè)字母都容易區(qū)分。
給字體設(shè)置大小
毫無(wú)疑問(wèn),使用大點(diǎn)的文字會(huì)讓用戶感覺(jué)舒服。大或者小的文字取決于你需要放置多少文字在你的頁(yè)面里;尤其注意大段文字。
不同的設(shè)計(jì)師對(duì)使用多少文本有不同的想法,大多數(shù)認(rèn)為每行使用45-60個(gè)字是最佳的。這樣縮小了手機(jī)的排版,同時(shí)大多數(shù)用戶能接受的。
尋找字母高度
字母高度——尤其是小寫(xiě)字母——讓用戶輕松的瀏覽你的內(nèi)容有很大的影響。
小寫(xiě)字母“x”不管多高它仍然是小寫(xiě)”x”. 用更高的“x”小寫(xiě)字體更容易閱讀,這就是說(shuō)小寫(xiě)字母的高度更接近大寫(xiě)字母。查找字符集,其中x的高度是三分之二是大寫(xiě)字母高度的四分之三。