濮阳杆衣贸易有限公司

主頁 > 快速排名 > 常見問題 > 網頁排版設計的10個小技巧

網頁排版設計的10個小技巧

POST TIME:2018-12-03 21:30

 

內容排版的存在是為了榮譽。

溝通在設計中起著至關重要的作用。這是建立用戶和網站之間的明確聯(lián)系,并幫手你的用戶實現(xiàn)目標的關鍵。當我們談論網頁設計環(huán)境中的溝通時,這通常是指文本。排版在這個過程中起著至關重要的作用:網絡中超過95%的信息是以文字的形式出現(xiàn)。

好的排版提高了用戶的閱讀積極性性,反之,差的排版會降低用戶的閱讀積極性。 正如Oliver Reichenstein在他的文章《Web Design is 95% Typography》中所說:

優(yōu)化排版就是優(yōu)化可讀性,可拜候性,可用性!讓整體的圖形平衡。

換句話說:優(yōu)化你的排版就是優(yōu)化你的用戶界面。在這篇文章中,我將提供一組規(guī)則,幫手你提高文本內容的可讀性。

1. 減少差別類型字體的使用

使用超過3種差別的字體讓網站看起來沒有結構且不專業(yè)。記住,太多的尺寸類型和風格也可能破壞任何布局。

為了防止這種情況,嘗試將字體數(shù)量限制在最小限度

一般來說,將字體數(shù)量限制在最小限度(兩個很充足,通常一個就足夠了),并粘貼相同的字體到整個網站。如果使用多個字體,請確保字體系基于字符寬度互相增補。以下面的字體組合為例。Georgia和Verdana(左)的組合具有相似的價值,配對的很和諧。比較與Baskerville和Impact(右)的配對,其中大大加重的Impact使與其對應的襯線字體沒有光彩。

確保字體系基于字符寬度互相增補

2. 使用尺度字體

字體的嵌入辦事(如Google Web Fonts或Typekit))可以為你的設計提供新鮮的和意想不到的許多有趣的字體。它們也非常容易使用。以Google為例:

選擇任何字體,如Open Sans在HTML文檔的中生成代碼并粘貼。完成!

實際上,這種方法有一個很嚴重的問題:因為用戶更熟悉尺度字體,因此可以更快地讀取它們。

除非你的網站對于自定義字體(如對品牌宣傳或創(chuàng)建沉浸式體驗)非常有吸引力,不然通常最好使用系統(tǒng)字體。最安適的方法是用一個系統(tǒng)的字體:Arial,Calibri,Trebuchet等。記住,好的排版可以吸引讀者到內容中去,而不是排版自己。

3.?限制行的長度

每行擁有適當?shù)淖址麛?shù)量是讓文本具有可讀性的關鍵。它不是你的設計,決定你的文本的寬度,它應該是一個可讀性的問題。考慮Baymard Institute關于可讀性和行的長度的建議:

“如果你想有一個好的閱讀體驗,應該每行約60個字符。每行擁有適當?shù)淖址麛?shù)量是讓你的文本具有可讀性的關鍵。”

圖片來源:Material?Design

如果行太短,視線必需經常返回,這就會打破讀者的節(jié)奏。如果一行文字太長,用戶的視線將很難專注于文本。

對于移動設備,應該每行30-40個字符。以下是在移動設備上查看的兩個網站的示例。第一個是使用每行50-75個字符(打印和桌面的每行最佳字符數(shù)),而第二個使是用最佳的30-40個字符。

圖片來源:Usertesting

在網頁設計中,可以通過使用em或像素限制文本的寬度來實現(xiàn)每行最佳數(shù)量的字符。

4. 選擇一個能在各種尺寸中工作的字體

用戶會從具有差別屏幕尺寸和分辨率的設備拜候你的網站。大多數(shù)用戶界面需要各種大小的文本元素(按鈕復制,字段標簽,章節(jié)標題等)。選擇一個能夠在多種尺寸和重量上運行良好的字體以連結每個尺寸的可讀性和可用性是非常重要。

Google的Roboto字體

確保你說選擇的字體在較小的屏幕上清晰可辨!嘗試制止使用草書的字體,例如Vivaldi(不才面的示例中):雖然它們很標致,但它們很難閱讀。

Vivaldi字體很難以在小屏幕上閱讀

5. 使用可區(qū)分字母的字體

許多字體讓相似的字形很容易混淆,特別是與“i”和“L”(如下圖所示)以及在字母間距較小的空間中,例如當“r”和“n”看起來像“M”。因此,在選擇你的排版時,請務必在差別的文本環(huán)境中檢查你的排版,,以確保不會為用戶造成問題。

6. 制止所有的大寫

所有大寫字母:意思是文本中的所有大寫字母,在不涉及閱讀的上下文中很好(如首字母縮略詞或標識),但是當你的信息涉及閱讀時,不要強制用戶閱讀所有大寫文字。正如Miles Tinker所說,在他的具有里程碑意義的作品中,可讀性的印刷,全部大寫印刷與小寫排版比擬,大大地延緩了用戶的閱讀速度。

7. 行間距的重要性

標簽:烏魯木齊 林芝 九江 鹽城 東營



收縮
  • 微信客服
  • 微信二維碼
  • 電話咨詢

  • 400-1100-266
肃南| 周口市| 崇义县| 吴川市| 潼南县| 宣汉县| 明光市| 无锡市| 本溪市| 金昌市| 蒲江县| 漠河县| 黄大仙区| 北碚区| 新乐市| 孝昌县| 乌兰察布市| 宝清县| 河南省| 江油市| 英吉沙县| 应用必备| 文山县| 丰都县| 宜宾县| 酒泉市| 绵阳市| 蓬莱市| 浑源县| 涞源县| 若尔盖县| 玉山县| 土默特右旗| 广宗县| 临湘市| 怀宁县| 托克逊县| 浮梁县| 新乡市| 六安市| 明水县|