超全面的UI界面字體選取與使用指南發(fā)布者：本站     時(shí)間：2020-06-05 15:06:02

+ CSS聯(lián)合實(shí)現(xiàn)在不替換頁面中文本元素的情況下，對文本進(jìn)行更為細(xì)膩準(zhǔn)確的效果渲染。（ 使用sIFR你可以任意定義WEB中的文本字體，即便是客戶端瀏覽器未安裝的字體。sIFR使用Flash渲染字體效果，可以平滑消除文本鋸齒，你可以像使用用CSS控制文本一樣輕松得到各種文本效果）而在當(dāng)時(shí)，這項(xiàng)技術(shù)是在Firefox和Safari 這樣的瀏覽器當(dāng)中使用自定義字體的唯一途徑。不過由于這項(xiàng)技術(shù)極為吃內(nèi)存，讓它在幾年內(nèi)很快過時(shí)了。而2007年所問世的iPhone 甚至直接同F(xiàn)lash 技術(shù)劃清界限。說回文本和字體本身，作為界面中最重要也是最常見的元素，它本身也承載著樣式、傳遞不同的信息，可以說是界面設(shè)計(jì)中的一個(gè)核心分支也不為過。

2008年，主流的瀏覽器最終還是選擇了支持CSS3的@font-face 規(guī)則，這一規(guī)則在早期的CSS中也存在，但是在1998年的時(shí)候被剔除掉了。CSS3的這一改變令人振奮，我正好將這一技術(shù)運(yùn)用到一個(gè)客戶所托付的項(xiàng)目上來，使得網(wǎng)站的瀏覽體驗(yàn)得到了明顯的增強(qiáng)。

也正是因?yàn)槲胰胄谐跗趯τ谧煮w和排版的熱愛，使得我樂于鉆研這些東西，愿意為了一丁點(diǎn)的強(qiáng)化和改變而進(jìn)行深入的摸索。在今天的這篇文章當(dāng)中，我希望將我所學(xué)到的這些基本的知識(shí)同大家分享一下，希望大家對于界面有著更加深入的認(rèn)識(shí)。

最初的圖形界面
文字和排版可以追溯到五千年前，而圖形化界面僅僅只有40年的歷史。最關(guān)鍵的轉(zhuǎn)折點(diǎn)出現(xiàn)在1973年的施樂，最早的圖形化界面出現(xiàn)在了他們的Alto電腦上，而這個(gè)設(shè)計(jì)就是現(xiàn)如今圖形化界面設(shè)計(jì)的基礎(chǔ)。在Alto 的界面誕生后的10年里，幾乎是它一家獨(dú)大，并且它也被大家視作為數(shù)字技術(shù)的未來。



早期的Alto 在80年代進(jìn)化為著名的施樂之星，而施樂的這個(gè)設(shè)計(jì)方案也成為了第一個(gè)商用的操作系統(tǒng)圖形化界面。



不過不論是Alto 還是施樂之星，都沒能真正意義上崛起。不過施樂的圖形化界面最終深深的影響了蘋果和微軟的道路，比爾蓋茨和喬布斯先后在施樂的研發(fā)中心觀摩了施樂之星的運(yùn)作，而喬布斯更是在1984年先人一步發(fā)布了著名的Macintosh 系統(tǒng)，也就是后來我們所熟知的Mac OS。



Macintosh 的發(fā)布不僅僅意味著相對成熟的GUI的出現(xiàn)，而且它為大眾帶來了真正意義上的自定義字體的功能。這款系統(tǒng)內(nèi)置了許多以著名城市命名的字體，也正是在此之后才有越來越多的著名字體的數(shù)字版本在數(shù)字平臺(tái)上發(fā)布并應(yīng)用。



仔細(xì)觀察這些早期的字體，我們能夠發(fā)現(xiàn)，雖然已經(jīng)是圖形化的界面，但是其中絕大多數(shù)的界面元素都還是以純文本的形式而存在，它們以一種奇妙的方式被整合到一個(gè)界面當(dāng)中。循著界面的發(fā)展歷程沿路看過來，不難發(fā)現(xiàn)，文本和排版幾乎是貫穿始終的主線，它是一個(gè)不容忽視的核心類別。

文本即界面
界面中的每一個(gè)文字、每一個(gè)字符都很重要。好的文本是好的設(shè)計(jì)。文本是最根本的界面，是我們設(shè)計(jì)師來塑造和打磨這些信息。

看看下面的天氣界面的設(shè)計(jì)，想象一下將所有界面元素都擺在桌上會(huì)是什么樣的效果：無非就是兩張圖，幾個(gè)圖標(biāo)和一大堆文本。



作為設(shè)計(jì)師，工作并不是將一堆隨機(jī)的內(nèi)容和元素排布在屏幕上，讓它們看起來夠漂亮就行了。真實(shí)的情況是，我們要從最核心的內(nèi)容和文本開始著手，然后從這里著手細(xì)化，并完善出其他的部分。這就是我們工作的核心。

文本的清晰度同樣扮演著關(guān)鍵性的角色。如果我們的大腦花費(fèi)一兩秒鐘單純只是分辨一個(gè)字形，那么清晰度上的微小差異是無傷大雅的?？墒钱?dāng)它們組合成為大段的文本，不同的字母組合構(gòu)成不同的詞匯、段落的時(shí)候，清晰度的影響就更大了，排版的重要性也顯得更加明顯了。

當(dāng)然，影響界面設(shè)計(jì)的文本屬性還有很多，比如平衡性，定位和層次結(jié)構(gòu)，但是好的文案和排版的影響至少占據(jù)整體影響的95%。