手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

UI設(shè)計中字體的歷程及注意事項

2016-11-5    資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


字體作為界面設(shè)計的一個元素,對用戶的閱讀體驗起著至關(guān)重要的作用。本文是 UI 設(shè)計師 Viljami Salminen 分享的用戶界面字體設(shè)計的基本規(guī)則和技巧。早在 2004 年,我才剛開始工作的時候,sIFR 非?;?。sIFR 是由 Shaun Inman 開發(fā)、可以電影短片中嵌入定制字體的一種技術(shù),它能被 JavaScript 和 CSS 調(diào)用。當時,sIFR 基本上是唯一一種能在 Firefox 或 Safari 瀏覽器中使用定制字體的技術(shù)。隨著 2007 年 iPhone(不需要 flash)的推出,基于 Flash 格式的這種技術(shù)很快就過時了。

2008 年,瀏覽器終于開始支持新的 CSS3 字體設(shè)計規(guī)則了。早在 1998 年,這種字體設(shè)計規(guī)則就被寫入 CSS 標準中了,但后來被移除了。我還記得,當我說服我的一個客戶使用這種新的字型規(guī)則時候的興奮心情,當時,瀏覽器已經(jīng)開始支持能夠提升用戶體驗的「漸進增強(Progressive Enhancement)」技術(shù)了。

自從涉足這個行業(yè),我開始越來越喜歡研究字體,以及與字體設(shè)置中相關(guān)的微小細節(jié)。在這篇文章中,我打算分享一些我了解到的基礎(chǔ)知識,希望能為用戶界面的字體設(shè)置提供幫助。

第一代GUI

雖然字體的歷史可以追溯到大約 5000 年前,但是圖形用戶界面的出現(xiàn)還不到 40 年。一個重要轉(zhuǎn)折點發(fā)生在 1973 年,Xerox 推出了計算機 Alto,大體上奠定了今天圖形用戶界面的雛形。當時 Alto 被視作是計算機的未來,在 10 年之后,同類 GUI 產(chǎn)品才進入大眾市場。

UI設(shè)計中字體的歷程及注意事項-IAMUE

80 年代,Xerox 推出了以 Alto 為基礎(chǔ)的升級版  Xerox Star ,是世界上第一個商用的 GUI 操作系統(tǒng)。

UI設(shè)計中字體的歷程及注意事項-IAMUE

 

無論是 Alto 還是  Xerox Star 最終都沒有大肆流行,不過,二者對蘋果和微軟在鼠標驅(qū)動 GUI 的革命性創(chuàng)新產(chǎn)生了極大地影響。幾十年之后,也就是 1984 年,喬布斯推出了第一代 Mac OS。

Macintosh 的推出意味著,大眾第一次可以使用定制字體了。第一代 Mac 預(yù)裝了多款經(jīng)典字體,在接下來的幾年中,越來越多的字體廠商除了發(fā)布傳統(tǒng)字體之外,還會推出相應(yīng)的數(shù)字版本。

UI設(shè)計中字體的歷程及注意事項-IAMUE

 

當我們檢視這些早期的圖像用戶界面的時候,我們發(fā)現(xiàn),其中大部分元素都是用手寫的。這些 GUI 都是純文本,即一個個字母的純文本集合體。

我們再以同樣的方式觀測現(xiàn)代的用戶界面。在現(xiàn)代的交互界面中,文本即界面,字體設(shè)計則成為主要的設(shè)計規(guī)范。

字體即界面設(shè)計的基石

在用戶界面中,每一個單詞和字母都至關(guān)重要。好的字體等于好的設(shè)計。字體成了界面設(shè)計的基石,而我們設(shè)計師,則是這些這類「信息基石」的修造者。

觀察下面這個例子,想象一下,把以下圖片中的元素拆解開來,看看會是什么樣子——一個個單詞、兩張圖片、幾個圖標。

UI設(shè)計中字體的歷程及注意事項-IAMUE

作為設(shè)計師,我們的工作并不是在屏幕上隨機擺弄幾個元素,讓他們看起來美觀漂亮就行了,而應(yīng)從最重要的部分著手,即字體和內(nèi)容,以及由此產(chǎn)生的相關(guān)細節(jié)。這才是我們作為設(shè)計師的核心技藝。

字體的可辨識性也十分重要。關(guān)于這一點,一開始看起來似乎不重要,特別當辨認單詞是如此容易的時候——人類大腦辨識出某一個單詞所需的時間還不到一秒鐘。但是,當需要辨認的單詞和字母組合變多,字體的重要性就顯而易見了。

雖然在界面設(shè)計上,有很有多微小的細節(jié)需要考慮:比如平衡、定位、層級和結(jié)構(gòu),但是有了好的文案和字體,就成功了 95% 。

一個優(yōu)秀的設(shè)計師懂得:網(wǎng)頁上的文字不僅僅作為內(nèi)容而存在,它還是用來交互的界面。

– Oliver Reichenstein

我們?nèi)祟愂侨绾伍喿x的?

既然字體設(shè)計如此重要,那么我們就應(yīng)該花點時間學(xué)習(xí)「我們?nèi)祟愂侨绾伍喿x的」,以及「字體設(shè)計是如何影響設(shè)計策略的」。

在閱讀 Billy Whited 的文章「Setting Type for User Interfaces」時, 我有一個重要發(fā)現(xiàn),即閱讀效率和文本的數(shù)量有很大關(guān)系。這意味著,在閱讀少于 20 個字母的單詞時,單獨提出來閱讀相比于放在長句中閱讀速度會更慢。這是因為,當我們閱讀長句時,眼睛并不是順著句子中單詞一個一個看的,而是有選擇性跳讀的,這個動作被稱作「掃視」。

跳讀提升了閱讀效率,使閱讀時可以忽略掉一些功能性單詞成為可能。這點要深記于心,因為用戶界面上大都是一個個獨立的單詞,也就意味著「掃視」在 UI 設(shè)計中不起作用了。

因此,當我們明白細微到每一個字母都會對閱讀體驗產(chǎn)生重要影響時,我們也就明白為什么字體的選擇那么重要了。

UI設(shè)計中字體的歷程及注意事項-IAMUE

過去,我們認為我們是以單詞的外形輪廓來辨識單詞的,這個理論被稱為「Bouma shape 伯馬形」,后來研究發(fā)現(xiàn),這個觀點并非完全正確,字體的可讀性和辨識度并不單單由字體的整體輪廓決定。我們更應(yīng)該重視字形本身。

決定字母可讀性的因素是什么?

首先,回答這個問題似乎有點難。閱讀是一種習(xí)慣,有良好閱讀習(xí)慣的人肯定讀得越順暢。我們怎么可能知道影響字母可讀性的因素是什么?為了便于理解,我們需要首先把句子分解成單詞,單詞分解成字母,字母分解成更小的元素,然后解剖出更多細微層面的細節(jié)。

2008 年, 維多利亞大學(xué)心理學(xué)院進行了一次實證研究,顯示了大小寫拉丁字母適合閱讀的最佳范圍。

UI設(shè)計中字體的歷程及注意事項-IAMUE

從這個研究中,得出了一些有趣的結(jié)論。首先,線條終止的方式對于字母辨識起著至關(guān)重要的作用。

UI設(shè)計中字體的歷程及注意事項-IAMUE

上圖顯示了辨識單詞時最受人眼關(guān)注的區(qū)域范圍。在設(shè)計字體的這個區(qū)域時,不僅應(yīng)該考慮閱讀的一般性和習(xí)慣性,而且需要把每個字母的差異性也考慮進來。

2010 年, Sofie Beier 和 Kevin Larson 發(fā)起了另一個研究:對一些容易被誤讀的單詞變體進行了測試。

UI設(shè)計中字體的歷程及注意事項-IAMUE

這個研究發(fā)現(xiàn),雖然有些字母在尺寸、字重和特性上相同,但是他們在辨識度上卻各不相同。結(jié)果顯示,細長的字母拉寬一些,就會變得更具辨識度,而 X 字高的字符,如果增加升部和降部的長度則更具辨識度。

UI設(shè)計中字體的歷程及注意事項-IAMUE

我為最近一個項目開發(fā)了一款名叫 Legibility 的 App ,這款工具可以對字體設(shè)計進行辨識度的模擬測試。通過對文字加上不同的濾鏡效果(比如模糊、微亮和像素化效果),模擬出不同的閱讀環(huán)境。目前還是 beta 版,支持Chrome, Opera 和 Safari。

UI字體設(shè)計應(yīng)該注意哪些方面?

在了解人類閱讀原理和字母可辨識度的概念之后,對于 UI 設(shè)計我們有了一個更好的全局觀。以下是我總結(jié)的幾點:

1. 辨識度

辨識度是需要考慮的首要因素。字母的格式要清晰、可辨認。在 UI 設(shè)計中,清晰可見的字母更具辨識度。很多無襯線字體(San Serif),包括 Helvetica ,大寫的字母 I 和小寫的 l 字母難以區(qū)分,對于 UI 設(shè)計來說是非常不好的體驗。

UI設(shè)計中字體的歷程及注意事項-IAMUE

比較左邊的 Source Sans Pro 字體和右邊的 Helvetica 字體。右邊的 Helvetica 字體中,前三個字母幾乎是一模一樣。而左邊的 Source Sans Pro 字體表現(xiàn)更佳。甚至有人認為,Helvetica 不適用于任何 UI 設(shè)計,不過它本來就不是為屏幕顯示而生的。

Helvetica 真的弱爆了。它不是為小屏顯示而設(shè)計的。像「milliliter」這樣的單詞顯示效果就很差。

– Erik Spiekermann

當年蘋果曾經(jīng)暫時使用過  Helvetica 作為其主要的 UI 設(shè)計字體,不過這一舉動曾給一些用戶帶來了閱讀上的問題。不過,正是因為這次事件才導(dǎo)致了蘋果后來設(shè)計了 San Francisco 字體。 San Francisco 字體是為屏幕而生, [2] x-height 比 Helvetica 字體更高,有著更寬的字距,單個字母更容易辨認。

UI設(shè)計中字體的歷程及注意事項-IAMUE

2. 低調(diào)

一個完美的 UI 字體讓人意識不到它的存在,絕不會喧賓奪主。字體應(yīng)該是方便用戶完成任務(wù)的,而不應(yīng)為用戶添加認知上的負擔(dān)。

3. 靈活度

UI 字體應(yīng)該具有一定的靈活度。記住,我們是在為各種不同的媒介設(shè)計用戶體驗,我們無法掌握的是——用戶的能力、應(yīng)用場景、所用的瀏覽器、屏幕大小、連接速度,甚至使用的輸入方式。

我們選擇使用的設(shè)計字體應(yīng)該支持盡可能多的使用場景,能在不同大小、各種不同的設(shè)備、以及特定的小屏設(shè)備上運行良好。比如 Sans serifs 字體能在低分辨率的小屏上運行良好。

UI設(shè)計中字體的歷程及注意事項-IAMUE

4. 高的x-height

X 字高是指小寫字母「x」的高度。x-height 越高,小屏閱讀體驗就越好。但字高也不能過大,要不然 n 和 h 難以區(qū)分。

UI設(shè)計中字體的歷程及注意事項-IAMUE

5. 寬比例

比例是指一個字符的高和寬的比值。寬度的比值越大,字體辨識度越好,小屏閱讀體驗也越好。

UI設(shè)計中字體的歷程及注意事項-IAMUE

6. 寬松的字母間距

一個重要的原則是,字母之間的間距要比 [3]「字柜」(counter)要小。

字母周圍的空間和字母的內(nèi)部空間同樣重要。字母如果相距太近讀起來很費勁。一個好的 UI 字體應(yīng)該要給字母之間留有充分的呼吸空間,留有一些空間,建立起穩(wěn)定的節(jié)奏。

另一方面,如果間距太大,則會打破單詞的整體性。一個重要的原則是,字母之間的間距要比「字柜」(counter)小。

UI設(shè)計中字體的歷程及注意事項-IAMUE

7. 平順的筆畫

好的 UI 字體應(yīng)該是筆畫平順。不夠平順的字體在大屏上看起來可能還好,一旦在小屏上顯示,細長的筆畫就難以辨認。另一方面,像 Arial 和 Helvetica 這樣的字體,由于字母筆畫粗細幾乎一樣,因此讓閱讀變得尤其困難。

所以,需要在這兩者之間達到平衡。下面兩個案例,你覺得哪個更好?

UI設(shè)計中字體的歷程及注意事項-IAMUE

8. 支持OpenType功能

確保你選擇的字體支持 OpenType 功能這一點很重要,因為它能為我們提供更多的自由度。支持 OpenType 功能也表明可以很好地支持不同的語言和特殊字符。

對于我來說, OpenType 功能最有用的一點是「表格數(shù)據(jù)」,它是指相同寬度的一連串數(shù)字。計時器、計算器或者 IP 數(shù)字的設(shè)計中,可以用到這個功能。

UI設(shè)計中字體的歷程及注意事項-IAMUE

9. 字體回退機制(Fallback)

下面這個案例你可能非常熟悉。在加載未完成時,網(wǎng)頁字體不能完全顯示出來。

要解決這個問題,只需要以非阻礙的方式來加載字體,這樣可以大大減少內(nèi)容加載的時間。這樣做的缺點是,需要在默認系統(tǒng)字體中設(shè)置回退字體,默認系統(tǒng)字體是在頁面加載時屏幕顯示的字體。

10. 微調(diào)

微調(diào)是一個過程,是指字體的調(diào)整以獲得最佳閱讀體驗。微調(diào)能讓字體矢量線條更好適應(yīng)像素網(wǎng)格的顯示。在低分辨率屏幕上對字體進行微調(diào)對獲得清晰、可辨識的文本十分重要。

微調(diào)最早是由蘋果發(fā)明的,但自從推出 TrueType 字體格式后,微調(diào)就逐漸消失了?,F(xiàn)在,只有在需要支持 IE8 或者基于 TTF or EOT 格式的瀏覽器時才會考慮使用微調(diào)。

未來的發(fā)展

以上是我?guī)ьI(lǐng)大家展開的一次短暫的字體漫游之旅,未來,我期待看到更多關(guān)于網(wǎng)頁字體、字體設(shè)計工具、字體格式的演化和進步,以及在(不遠)的將來,字體能更好地為我們所用。

我認為,未來我們將能看到越來越多的「漸進增長技術(shù)」體驗,文本內(nèi)容比字體排版更加重要。雖然一直以來網(wǎng)頁字體設(shè)計就很重要,但是直到現(xiàn)在我們才開始正視這個問題。

為了設(shè)計出理想的字體,我們必須盡可能多地了解用戶閱讀環(huán)境狀況。雖然這點顯而易見,但是事實并非如此。但是在未來,我認為,字體將對顯示環(huán)境變得更加「敏銳」,并能針對一系列元素(視點、分辨率、字體渲染引擎、環(huán)境光線、屏幕亮度和閱讀距離)做出調(diào)整。

UI設(shè)計中字體的歷程及注意事項-IAMUE

整體來說,我認為,UI 字體的未來將與傳感器有關(guān),以及字體將能根據(jù)傳感器搜集到的數(shù)據(jù)進行格式的調(diào)整。未來,新的字體設(shè)計工具會在工作流中整合智能算法,能對不同場景進行自動識別。

  1. 開放設(shè)備實驗室 (Open Device Lab),旨在幫助網(wǎng)頁設(shè)計師在各種不同的移動設(shè)備上測試作品的效能和表現(xiàn)。
  2. x-height: 小寫字母的高度(尤其是小寫x),不包括升部和降部。
  3. 「字柜」是指字符中的負空間。

作者:Viljami Salminen,是來自芬蘭的一名設(shè)計師,現(xiàn)居灣區(qū),目前在 Idean 擔(dān)任高級交互設(shè)計師,同時也是知名設(shè)計網(wǎng)站 Smashing Magazine 的撰稿人,還是赫爾辛基 [1]開放設(shè)備實驗室 (Open Device Lab)創(chuàng)始人。Viljami Salminen 浸淫互聯(lián)網(wǎng)設(shè)計行業(yè)多年,為各種大大小小的企業(yè)和創(chuàng)業(yè)公司設(shè)計多個網(wǎng)站和瀏覽器工具。音樂,特別是上個世紀 50、60 年代的爵士黑膠唱片對 Viljami Salminen 啟發(fā)特別大,給他的工作和生活帶來很多靈感。

原文鏈接: Typography for User Interfaces

藍藍設(shè)計m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.88yangsc.com

存檔