界面中的小確幸
優(yōu)秀的產品通常在滿足功能需求之外,能給用戶帶來額外驚喜躺苦,比如品牌價值粉渠、產品氣質甚至喚起情感上的共鳴分冈∨显#縱覽各大APP界面捶闸,無論是社交工具百新、游戲互墓、報刊雜志退唠、攝影丰涉、音樂褂乍、健康...文字都是其界面必不可少的組成元素帖渠。視覺修養(yǎng)從文字開始尤溜,美好的字體也會成為產品使用中可以感受到的微小確切的幸福倔叼。
大才子蘇軾云:“腹有詩書氣自華」常” 而恰到好處的字體也能有效提升產品氣質丈攒。因為文字在不同的場景下?lián)沃煌慕巧欠裰卦诠δ芤只蛘蔑@個性授霸,這就需要選擇不同的字體配合產品帶來不同維度的視覺表現(xiàn)巡验。我們無法絕對地去評價一款字體的好壞與否,因為只有選對字體碘耳,才能合理有效地發(fā)揮其最大價值显设,從而準確地傳達產品的氣質。面對技術的發(fā)展和設計潮流的演變辛辨,界面字體的使用趨勢多元而又多變捕捂,有些時尚簡約富有現(xiàn)代特色,有些則從傳統(tǒng)中尋找養(yǎng)分斗搞,抒發(fā)情懷指攒。
中文
文化藝術
界面離不開文字,為了使界面好看僻焚,拋棄系統(tǒng)默認字體幽七,選擇更有美感和風格的字體是一次美麗的設計探險。
「詞Ci」是一款能夠自動檢查平仄溅呢、輔助填詞的App澡屡,詞牌名選擇了方正清刻本悅宋(英文字體是Hoefler Text),堪稱宋詞與宋體的巧妙結合咐旧,營造出獨特的意境和古典美驶鹉。雖然是很早之前的一個應用,但在當時是非常大膽的案例铣墨,為后面文化藝術類APP的中文字體選擇提供了更多可能性的遐想室埋。
產品引導頁
引導頁因為可以生成圖片而限制較少,設計風格眾多,字體當然可以大膽地嘗試姚淆。不乏有太過無聊而被用戶完全無視迅速滑掉的引導頁孕蝉,因此選擇符合主題的字體,讓引導頁印象更深刻腌逢,提升存在感降淮。
「QQ音樂」這套宣傳歌詞海報功能的引導頁在三段愛情旅程的標題上同樣使用了方正清刻本悅宋,與「詞Ci」的古色古香不同的是搏讶,此處卻為界面多添了一份細膩與懷舊佳鳖,頗有學生時代情書的味道。
「片刻」的引導頁選擇了康熙字典體媒惕,由字體設計師厲向晨基于道光七年奉旨重刊版《康熙字典》制作系吩,富有古舊氣息,由于源自古籍復刻妒蔚,因此筆畫略微破損穿挨,反而也會有手工制品的味道和時光流逝之感。這款字體搭配灰白色物品成功提升引導頁的質感肴盏,帶來溫暖科盛、純粹的幸福感。采用襯線型中文字體配合單個物品的情懷路線(不知道算是MUJI風還是性冷淡)的引導頁有占領了一定的比例叁鉴,招商銀行也出過一套類似的引導頁,不過在文字的排列和字體的選擇上略顯粗暴佛寿。
天氣
四葉出品幌墓,必屬精品,天氣APP那么多冀泻,這款天氣作品絕對做到了過目不忘常侣。圖中是「我的天氣」主打的一款主題《唐風》,紙原色的背景加上簡約復古的插畫弹渔,而最引入注目是風格強勁的中文字體:蒙納秀明體胳施,作為一款襯線字體,細節(jié)卻被盡可能地刪減顯得棱角分明肢专,橫細豎粗有刀刻之感舞肆,非常大氣利落,與簡約的天氣動效也十分契合博杖。除此之外還有幾款主題供個性化選擇椿胯,比如像素風的《位元》主題,從中文到溫度數(shù)字都搭配了像素風格的字體來顯示剃根,非常精致用心哩盲,堪稱年度最佳天氣產品。
攝影
當一張毫無裝飾的圖片無法表達我們內心翻滾的情感時,會想用攝影軟件提供的文字貼紙或拼圖功能廉油。比如「黃油相機」惠险,就是一款專門為中文字體量身定制的圖文結合攝影軟件,還有「天天P圖」的拼圖模版:
年末主題選擇了一款日本字體抒线,完全日本影視片頭的即視感班巩,傳遞出2015年的時光就像一場電影即將落幕之意;二十四節(jié)氣拼圖模版則選擇了造字工房刻宋十兢,繼承了宋體的手刻風格而又不失現(xiàn)代感趣竣,幫助節(jié)氣文字的傳統(tǒng)情懷與現(xiàn)代攝影無縫結合。不同的字體代表了不同的心情旱物,不管是日系還是文藝小清新遥缕,選對了字體,圖文就能融為一體宵呛,將豐富的情感傳達出來单匣。
歌詞海報
同樣的原理從攝影軟件的文字貼紙延伸到了音樂產品的歌詞海報分享”λ耄「QQ音樂」的2015力作之一:歌詞海報户秤,長按歌詞選擇想要分享的歌詞,搭配精美的圖片逮矛,提供多種字體鸡号、排版、字號及投影等自定義樣式须鼎,成功感動了一大波音樂愛好者和歌詞控們鲸伴。經過精心挑選的字體與排版,讓歌詞更有詩意晋控,觸動人心汞窗,瞬間秒殺了競品的歌詞分享設計。嗯赡译,原來分享歌詞可以這么高逼格仲吏。
閱讀
閱讀軟件的文字很重要,由于閱讀是一個沉浸式的長時間的體驗過程蝌焚,因此字體一般不會太過花哨裹唆。即使是電子書軟件(微信閱讀、QQ閱讀只洒、多看等)一般也只提供幾種可讀性較高的宋體和黑體供個性化的體驗品腹,現(xiàn)在普遍認可黑體是比較適合電子顯示屏長期閱讀的字體。但隨著技術的不斷提升红碑,屏幕顯示能力更強舞吭,有超越印刷品的趨勢泡垃,在高清環(huán)境下,即使是細節(jié)頗多的宋體字型未來可能也能達到理想的顯示效果羡鸥。
新聞資訊軟件「澎湃新聞」成功利用了字體的選擇在知乎上引起了大量tao爭lun議蔑穴,大膽地在界面全部使用了方正準雅宋,凸顯獨特辨識度的同時惧浴,更多地可能是想展現(xiàn)作為新聞平臺背后嚴肅真實的新聞態(tài)度與情懷吧存和。由此可見用戶對產品的理解和氣質的感知,字體真是功不可沒衷旅。
西文數(shù)字
不同類型的產品捐腿,或是一個APP的不同界面,文字的重心可能并不相同柿顶。比如在記賬茄袖、天氣、運動健康等功能的界面嘁锯,我們的設計重心會更偏向數(shù)字宪祥,在中文內容為主的界面則更關注漢字的部分,本文也分別從中文和數(shù)字去闡述家乘。而中英文字體通常也是分開使用的蝗羊,比如iOS9的蘋方和San Francisco,可能因為中文字體的設計師通常是中國人仁锯,對字體的理解和設計重心都在漢字部分耀找,英文及數(shù)字的設計容易被忽視,反之亦然业崖,因此很難誕生兩者兼顧的字體野芒。
運動健康
創(chuàng)意記步應用「WalkUp」將運動這件小事變得更具故事性和娛樂性,除了概念特別腻要,界面設計也選擇了特殊字體去呈現(xiàn)步數(shù)复罐。同樣對這塊進行優(yōu)化的還有「手機QQ」中的QQ健康助手涝登,在每日推送的消息中大膽使用了特殊字體去呈現(xiàn)雄家,與QQ時尚年輕的定位十分契合。
天氣
除了漢字胀滚,可以發(fā)現(xiàn)天氣軟件中溫度所使用的不同字體也是拉開產品氣質差別的關鍵趟济。纖細的數(shù)字搭配舒服的純色會給界面帶來簡潔干凈的感覺;而搭配城市攝影等位圖則更沉浸和優(yōu)雅咽笼。設計精美的天氣界面對每天查看天氣的用戶來說也是一種享受顷编。
其他
在一些擬物設計和具有明顯行業(yè)特征(票券、卡片等)界面設計中也能發(fā)現(xiàn)美好的字體剑刑,它們幫助提升票券的精致度和時尚感媳纬,有跳出電子熒幕之感双肤,也更能滿足不同行業(yè)的一些個性化展示。
實例對比
字體之于產品界面的氣質是否真的如此重要呢钮惠?讓我們用簡單的實例感受下茅糜。
這是一個航班出行的狀態(tài)提醒,以卡片的形式呈現(xiàn)并結合實體機票的概念進行設計素挽。界面中數(shù)據(jù)信息占了很大比例蔑赘,若仍然使用原生字體會略顯粗暴,機票的質感只依靠排版也無法完全體現(xiàn)预明。換了一種精心挑選的字體后不論是卡片的氣質還是界面的精致度都得到了顯著提升缩赛,同時讓行業(yè)特征得以凸顯,也更符合用戶對機票信息的心理預期撰糠。
Tips
雖然字體可以讓界面更完美酥馍,但顯然不是任意搭配隨便使用的。在實際的設計過程中窗慎,選擇一款字體還需耐心斟酌物喷。
「字體設計師就像流行歌手一樣,你沒有辦法阻止有人在浴室亂唱你的歌」——Eric Spiekermann
理解字體
字體世界眼花繚亂遮斥,當我們選擇使用一款字體時峦失,最好先了解它的誕生歷史來龍去脈,幫助精準地把握它所傳達的感覺术吗,從而確定它適合使用的場景尉辑,以免誤用濫用。一款字體即使再個性獨特较屿,如果與主題不符隧魄,也可能會變成界面的槽點。
保證可讀性
在日常生活中隘蝎,交通指示的字體如果很難快速識別可能會引發(fā)無數(shù)血案购啄。在手機界面雖然沒有那么嚴重,但功能性始終是文字存在的首要前提嘱么。紙張通過外界光源反射狮含,而屏幕則是內發(fā)光顯示,字體顯示更纖細曼振,因此一款在印刷品上精致無比的字體可能到了電子顯示屏上就變得破碎几迄。不過字體本質上也是一種科技產品,字體的選擇也在隨著科技的發(fā)展不斷變化冰评,如今屏幕精度不斷提升映胁,印刷字體在電子屏的顯示差別可能會變得越來越小。另外甲雅,一款適用于標題(較大字號)的字體被用在內文閱讀(較小字號)的易讀性可能會變得非常糟糕解孙。字體的選擇之于界面的長遠體驗坑填,可謂失之毫厘,謬以千里。
考慮成本
如果在視覺設計稿中精心挑選了字體弛姜,一定很不希望這點美好的小追求被開發(fā)和產品PK掉穷遂,同時無論如何也想要(不同終端不同版本的)所有用戶都能看到設計者的良苦用心吧。如何推動字體的使用和保證字體的完美實現(xiàn)還需和開發(fā)及產品共同權衡利弊娱据。文字顯示的背后是像素點蚪黑,像素點的背后則是編碼,一套字體給APP帶來的壓力不可忽視中剩,如果是中文字體所帶來的增量更是明顯增加產品的內存(如果只是英文數(shù)字則相對要小得多)忌穿。面對內存、性能或版本等問題的硬傷结啼,能否找到巧妙地解決方法掠剑,是將字體存儲在云端、轉成圖片還是使用SVG...實際落地中還需要多方面考量郊愧,兼顧界面美感與實現(xiàn)成本朴译。
以上