3.1在頁面上切勿使用超過三個字體。
為什麼?單個頁面上使用的一系列字體確實表明了一個定義較差的品牌,並且看起來懶惰和混亂。最多可以一次使用三個不同字體(徽標,標題,身體內容)。
3.3保持一致的類型層次結構。您應該只使用少量字體尺寸和一個或兩個字體權重來開發類型的層次結構。想想HTML標題標籤H1,H2,H3等。使用亮度,大小和重量的變化來表示文本的重要性。有關類型層次結構的絕妙示例,請查看Apple的人類界面指南。
[3.4]使您的身體文本具有正常的重量且間隔良好。文本應始終是清晰的,因此為大型標頭或字體重量的案例保留光線或粗體字體,對文本的可讀性幾乎沒有影響。此外,始終將身體文本的線間距保持在1.15至1.5(取決於尺寸),以最大程度地提高可讀性。例如,本文大約具有1.5 REM線間距。證明您的身體段落也不會受到傷害。
3.1身體背景應始終是灰色的陰影
為什麼?彩色背景,甚至是非常深色的灰色,都可以輕鬆地在眼睛上產生壓力。對於重要的內容,例如網頁或應用程序的文本主體,至關重要的用戶可以輕鬆閱讀和intepret。
3.3在大多數情況下,在任何圖像,彩色或梯度背景上使用白色文本。如果需要,將非常輕的滴影(<= 10%的不透明度)應用於文本。
為什麼?白色朝下通常更具吸引力,更容易為變體創建變體。決定深色在彩色背景上使用通常具有挑戰性。但是,請確保您選擇的任何顏色組合也可以訪問。
3.4切勿使用絕對黑人。
為什麼?對於大多數網頁而言,純淨,不透明的黑色(#000)通常太苛刻了。甚至GitHub的身體字體顏色也是#24292E,而不是#000。如有疑問,您可以使用數值網絡安全灰度十六進制代碼(#111,#222 ... #AAA,#BBB等)。
3.5確保彩色組件不會彼此接壤。
為什麼?除非顏色彼此之間非常強烈的補充,否則通常,兩種相鄰顏色的對比度會產生極化感和分裂感,從而破壞您頁面的流程。如果導航欄可能會觸摸有色英雄的地方,則選擇透明的Navbar背景。
確保所有組件的一致性。定義了頁面的光源後,請確保所有陰影都遵循其方向。如果光線以135度“擊中”您的頁面,則每個陰影和梯度應在135度下落下。使用陰影作為介紹層次結構或狀態的工具。陰影應用於突出顯示頁面組件,提供頁面結構或描述狀態。例如,您可以通過降低其高程而不是更改其顏色來描繪按鈕。太多的陰影會呈現過多的維度,因此請小心(例如,不要創建具有18個獨特海拔的站點)。您的影子的偏移應等於其模糊半徑的一半。例如,X / Y偏移為10px的陰影應具有大約20px的模糊半徑。這種方法是最真實的陰影。始終將陰影的不透明度保持在25%以下。在微妙的一側err,因此不要損害您的設計。如果您使用的是黑暗的背景,則在某些情況下,您可能需要增加陰影的不透明度,以確保其可見度。陰影並不總是需要黑色。當在彩色表面上使用陰影時,使用非常深色或暗淡的背景顏色變體來改善陰影的混合物通常是有利的。