文字即界面

看到這個標題:文字即界面泳唠?狈网??你是不是會產(chǎn)生疑問警检?它怎么能稱為界面呢?沒錯害淤,文字就是界面扇雕,它組成的文本也是界面。文字在界面中單獨展示的時候窥摄,它就相當于一種圖形界面信息镶奉,怎能不稱為界面呢?

作為UI設(shè)計無論你是做網(wǎng)頁還是做移動端是免不了跟字體文字打交道的崭放,因為多數(shù)頁面中百分之80的內(nèi)容是文字哨苛,甚至更多。那么我們就來聊一聊文字的使用之道币砂。

文本在界面中的重要性

當我們拿到一個界面原型時建峭,首先要對信息進行層級劃分,哪個最重要决摧?那個比較重要亿蒸?那個不太重要凑兰?哪個比較次要?整體來說其實每一個文字边锁、每一個字符都很重要姑食。他們共同構(gòu)成了界面,缺一不可茅坛。好的文本字體和賞心悅目音半、有主次的排版就是好的設(shè)計。文本是最根本的界面贡蓖,需要我們設(shè)計師來塑造和打磨這些信息曹鸠。

我們來看看iOS系統(tǒng)中的天氣界面設(shè)計,仔細分析一下頁面的構(gòu)成元素摩梧,無非就是:

兩張圖 + 幾個圖標 + 一大堆文本物延。

我們在做設(shè)計的時候并不是將一堆隨機的文字和圖標排布在屏幕上,或者添加一些講不清道理的圖形仅父。讓它們看起來夠漂亮夠炫酷就行了叛薯。

我們需要從最核心的內(nèi)容和文本開始著手,然后分析這些內(nèi)容和文本笙纤,以及文本和文本的層級關(guān)系耗溜。這才是我們工作的核心。


上圖是IOS的日歷界面省容,我們在設(shè)計之前會不禁感嘆抖拴,天哪全是文字,有什么好設(shè)計的靶冉贰阿宅?我們運用上面的方法來分析,年笼蛛、月洒放、日、哪個重要呢滨砍?也許你會說年和月份最重要啊往湿,沒錯那日期呢?多大的字號顯示呢惋戏?太大了排版不下领追,太小呢又看不清。那么我們就需要對數(shù)字的最小值進行測試响逢,系統(tǒng)在不同設(shè)備上運行的顯示狀態(tài)是怎樣的绒窑。那我換一個字體呢?IOS為什么采用這個字體舔亭?

通過上面的分析回论,可以證明文本的清晰度同樣扮演著關(guān)鍵性的角色散罕。

如果我們的大腦花費一兩秒鐘單純只是分辨一個字形,那么清晰度上的微小差異是無傷大雅的傀蓉。以英文字母為例欧漱,當字母組合成為大段的文本,不同的字母組合構(gòu)成不同的詞匯葬燎、段落的時候竭翠,清晰度的影響就更大了劳较,排版的就顯得尤為重要了屎债。

影響界面設(shè)計的文本屬性還有很多噪舀,比如平衡性,定位和層次結(jié)構(gòu)壕探,但是好的文案和排版的影響至少占據(jù)整體影響的95%冈钦。

我們的閱讀習(xí)慣

屏幕上的文本尤為重要,那么我們閱讀的習(xí)慣又是怎樣的呢李请?

外國人Billy Whited的一篇文章研究表明:一個少于20個字母的獨立單詞放在句子中會更快被理解瞧筛,而單獨放置的時候我們需要耗費更長的時間來識別。不光是字母如此导盅,我發(fā)現(xiàn)有時候我單個看某個中文字的時候较幌,越看會覺得好陌生,甚至懷疑是不是這么寫的白翻。

其實這個研究結(jié)果也表明我們閱讀較長句子的時候乍炉,并非是逐個單詞地閱讀,而是跳躍著閱讀功能性的詞匯滤馍,我們將這種閱讀方式稱為離散跳躍式閱讀岛琼,俗稱掃視。閱讀中文段落的時候相信大家也是一樣巢株。


掃視讓我們的閱讀能力更強槐瑞,我們甚至?xí)^短的功能性詞匯。

但是我們的界面中所承載的詞匯大多是孤立的單詞纯续。除非文章資訊詳情頁面随珠,一般來說灭袁,界面是無法利用掃視這種方式來獲取信息的猬错。

所以詞組在閱讀中發(fā)揮著非常重要的作用,無論是作為內(nèi)容還是作為界面元素茸歧,均是如此倦炒。那么,選擇合適的字體就相當重要了软瞎。

那么為什么我們只采用蘋果或者安卓指定的一些常規(guī)字體呢逢唤?這就牽扯到襯線字體和非襯線字體了拉讯,相信大家都比較了解,這里就不多說了鳖藕。

字體這么重要魔慷,那么有什么運用方法么?下周我們一起聊一聊著恩,在界面設(shè)計中文本字體設(shè)計會遇到哪些惱人的問題院尔,以及如何總結(jié)規(guī)范。



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末喉誊,一起剝皮案震驚了整個濱河市邀摆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌伍茄,老刑警劉巖栋盹,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異敷矫,居然都是意外死亡例获,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門沪饺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來躏敢,“玉大人,你說我怎么就攤上這事整葡〖啵” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵遭居,是天一觀的道長啼器。 經(jīng)常有香客問我,道長俱萍,這世上最難降的妖魔是什么端壳? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮枪蘑,結(jié)果婚禮上损谦,老公的妹妹穿的比我還像新娘。我一直安慰自己岳颇,他們只是感情好照捡,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著话侧,像睡著了一般栗精。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天悲立,我揣著相機與錄音鹿寨,去河邊找鬼。 笑死薪夕,一個胖子當著我的面吹牛脚草,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播原献,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼玩讳,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了嚼贡?” 一聲冷哼從身側(cè)響起熏纯,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎粤策,沒想到半個月后樟澜,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡叮盘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年秩贰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柔吼。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡毒费,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出愈魏,到底是詐尸還是另有隱情觅玻,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布培漏,位于F島的核電站溪厘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏牌柄。R本人自食惡果不足惜畸悬,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望珊佣。 院中可真熱鬧蹋宦,春花似錦、人聲如沸咒锻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽虫碉。三九已至贾惦,卻和暖如春胸梆,著一層夾襖步出監(jiān)牢的瞬間敦捧,已是汗流浹背须板。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留兢卵,地道東北人习瑰。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像秽荤,于是被迫代替她去往敵國和親甜奄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容