大家好,目前崔波在太火鳥負責網(wǎng)站用戶體驗,之前是在視覺中國網(wǎng)站負責網(wǎng)站產(chǎn)品設計和集團圖片業(yè)務的用戶體驗。
今天跟崔波大家分享的主題是「無字體不體驗」:字體,如何影響互聯(lián)網(wǎng)用戶體驗。
背景:字體的變化與互聯(lián)網(wǎng)的發(fā)展
我引用瑞士字體設計師埃米爾·路德在 1969 年的一段話:
我們正被印刷品的洪流淹沒,個體作品的價值正被稀釋,因為被誘惑包圍的現(xiàn)代人根本不可能讀完所有印出來的內容。
字體排印師的工作就是把印出來的海量文字分揀、組織、詮釋,從而讓讀者更容易找到自己感興趣的內容。
相對于互聯(lián)網(wǎng)的發(fā)展,傳統(tǒng)設計上來講我們介質發(fā)生一些變化。我們設計師以前面臨的是紙張,考慮的是印刷工藝,包括油墨和紙張這些方面。網(wǎng)絡的設計師更多的考慮是屏幕的大小,顏色和亮度等等一系列的問題,介質發(fā)生了一些根本上的變化。
字體進入互聯(lián)網(wǎng)的二十年
但是這個變化帶來了很大的影響,第一個節(jié)點是 1995 年微軟推出瀏覽器,我們逐漸進入互聯(lián)網(wǎng)時代。
但作為設計師來講,能夠用到的字體其實很少,我們電腦里面默認自帶的四五種中文子體核四五種英文字體,那個時代設計師使用字體的時候是把文字做成圖片,在使用的字體上很有限,修改起來也比較費勁。
第二個節(jié)點 2004 年 Firefox 推出第五個版本后,瀏覽器一直在支持 CSS 這樣一個標準,那個時候我們在字體上的使用有了翻天覆地的變化,我們可以使用很多個性化的字體。
第三個節(jié)點是 iPhone 4 的支持 Retina技術,我們字體會更加清晰、細膩。
以前我們做網(wǎng)頁字體設計的時候,只能考慮用大12號宋體,你用到黑體或者其他字體之后,字的邊緣放大以后還是特別的模糊。而在 iPhone 4 之后,字體顯示就非常的清晰,無論放到多大的屏幕上都沒有關系。
如何用字體帶來好的體驗?
屏幕和字體渲染技術的進步讓字體使用有更多選擇:一般認為無襯線字體更容易在屏幕上閱讀,襯線字體顯示正文文本可讀性十分良好。
響應式設計使多屏幕瀏覽閱讀體驗上視覺統(tǒng)一:文字在所有主要瀏覽器和平臺上讀來都同樣輕松和舒心。正確的行距、字距、留白以及適當?shù)纳蔬\用都能改善易讀性。
扁平化設計、簡約風格的流行凸顯字體設計的重要性:去掉一些沒有必要的設計元素,呈現(xiàn)出文字的最大影響力。做到不干擾用戶的閱讀。注重網(wǎng)站內容。
閱讀時的專注與沉浸體驗提高閱讀質量:智能手機、平板電腦的普及,信息的隨后閱讀。設計上沒有太多的框框條條,沒有分欄的設計,就是簡單的文字表達,加上圖文,摒棄了復雜的內容,主體內容流暢的呈現(xiàn),更提高閱讀質量。
大的字體、標題設計使網(wǎng)站更具有吸引力:印刷設計師一直使用的大標題,以吸引不同年齡層的注意。開始于 2009 年,目前在普及。大標題已證明更有吸引力和明晰溝通。
字體的氣質:左邊使用的是一些比較粗,比較厚重的字體,強調的是它的一種成本和強勢。中間這個可能有一些變體的出現(xiàn),可能顯得這個字會特別的跳躍,邊角的處理方式,會體現(xiàn)一種速度感。
時尚網(wǎng)站會用到這樣一些比較時尚優(yōu)雅的字體。一些正式的字體加上一些小的字體結合,顯得很紳士、沉穩(wěn)。
手寫字體和草稿字體:手寫風格可以傳達手繪和策劃的意識。在結合上下文環(huán)境使用,會是一個功能強大的表達方式。
字體為主的App:Clear 是一款簡約風格的 iOS 應用。圍繞它的觸控是使用手勢來控制界面,你會發(fā)現(xiàn)單是文字設計就足以解決一切并讓你享受著這款應用。
設計優(yōu)秀的網(wǎng)站,你會發(fā)現(xiàn)它們通常只會用到一到兩種字體,并在此基礎上通過不同的字號、字色、粗細、間距等屬性來體現(xiàn)出內容的層次結構。