當前位置:才華齋>設計>網頁設計>

10個優化網頁使用者介面網頁設計的規則

網頁設計 閱讀(1.14W)

網頁排版設計對訪客有著至關重要的作用,優化排版也是優化使用者介面。所以下面一些規則來幫助你提高對文字內容的可讀性。歡迎大家閱讀!更多相關資訊請關注相關欄目!

10個優化網頁使用者介面網頁設計的規則

1. 最少使用字型數量

使用超過3種不同的字型使網站看起來非結構化和不專業,太多的型別尺寸和樣式一次也可能破壞任何佈局。

一般來說,整個網站字型的數量限制在最多兩種,一種一般就足夠了。如果您使用多個字型,請確保字體系基於字元寬度互補。如圖:左邊組的字型相對就比較和諧,而右邊字型的粗細對比太明顯,則顯得輕重比例很不和諧了。

2. 使用可區分字母的字型

許多字型使得很容易混淆類似的字母,特別是與“i”和“L”(如下圖所示),所以當選擇你的字型型別時,請確保在不同的上下文中檢查你的型別,以確保不會為你的使用者造成問題。

3. 選擇各種尺寸的字型

確保您選擇的字型在較小的螢幕上清晰可辨!

維瓦爾第字型將難以在小螢幕上閱讀:

4. 限制線長度

如果你想要一個良好的閱讀體驗,你應該每行約60個字元。在每行上擁有適當的字元數量是您的文字可讀性的關鍵。如果每行文字太短,視線必須反覆折回來,打破讀者的節奏。如果一行文字太長,使用者的眼睛將很難專注於文字。

對於移動裝置,您應該每行30-40個字元 。以下是在移動裝置上檢視的兩個網站的示例。第一個使用每行50-75個字元(列印和桌面的每行最佳字元數),而第二個使用最佳30-40個字元。

5. 嘗試使用標準字型

字型嵌入服務(如Google Web字型或Typekit)有許多有趣而標準的系統字型,而因為使用者更加熟悉標準字型,所以可以更快地讀取它們。

除非您的網站對於自定義字型(如品牌宣傳或建立身臨其境的體驗)非常有吸引力,否則通常最好使用系統字型。

6. 避免英文全部大寫

請勿強制使用者閱讀所有大寫字母,與小寫型別相比,那隻會大大延緩了使用者掃描和閱讀的速度,讓他們分分鐘爆炸。

7. 不要最小化線間距

行間距一般是字元高度的30%,以便良好的'可讀性。

而段落之間的間距可以比行間距提高20%,留白可以為使用者提供消化內容的時間。下圖左:幾乎重疊的文字。右:良好的間距有助於可讀性。

  8. 避免將文字著色為紅色或綠色

建議使用除顏色以外的其他線索來區分重要資訊。也避免單獨使用紅色和綠色來傳達資訊,避免有色盲使用者無法順利閱讀的情況。

  9. 確保您有足夠的顏色對比度

不要對文字和背景使用相同或相似的顏色。文字越明顯,使用者能夠掃描和閱讀的速度越快。

△ 這些文字行不符合顏色對比度建議,難以根據背景顏色進行閱讀

△ 這些文字行符合顏色對比度建議,並且易於閱讀背景顏色

  10. 避免使用閃爍的文字

閃爍或閃爍的內容可能會使一些敏感人群發瘋,並且對於一般使用者來說,這可能是令人討厭或分心的。