界面中的小確幸
優秀的產品通常在滿足功能需求之外,能給用戶帶來額外驚喜,比如品牌價值、產品氣質甚至喚起情感上的共鳴。縱覽各大APP界面,無論是社交工具、游戲、報刊雜志、攝影、音樂、健康...文字都是其界面必不可少的組成元素。視覺修養從文字開始,美好的字體也會成為產品使用中可以感受到的微小確切的幸福。
大才子蘇軾云:“腹有詩書氣自華。” 而恰到好處的字體也能有效提升產品氣質。因為文字在不同的場景下擔任著不同的角色,是否重在功能抑或彰顯個性,這就需要選擇不同的字體配合產品帶來不同維度的視覺表現。我們無法絕對地去評價一款字體的好壞與否,因為只有選對字體,才能合理有效地發揮其最大價值,從而準確地傳達產品的氣質。面對技術的發展和設計潮流的演變,界面字體的使用趨勢多元而又多變,有些時尚簡約富有現代特色,有些則從傳統中尋找養分,抒發情懷。
中文
文化藝術
界面離不開文字,為了使界面好看,拋棄系統默認字體,選擇更有美感和風格的字體是一次美麗的設計探險。
「詞Ci」是一款能夠自動檢查平仄、輔助填詞的App,詞牌名選擇了方正清刻本悅宋(英文字體是Hoefler Text),堪稱宋詞與宋體的巧妙結合,營造出獨特的意境和古典美。雖然是很早之前的一個應用,但在當時是非常大膽的案例,為后面文化藝術類APP的中文字體選擇提供了更多可能性的遐想。
產品引導頁
引導頁因為可以生成圖片而限制較少,設計風格眾多,字體當然可以大膽地嘗試。不乏有太過無聊而被用戶完全無視迅速滑掉的引導頁,因此選擇符合主題的字體,讓引導頁印象更深刻,提升存在感。
「QQ音樂」這套宣傳歌詞海報功能的引導頁在三段愛情旅程的標題上同樣使用了方正清刻本悅宋,與「詞Ci」的古色古香不同的是,此處卻為界面多添了一份細膩與懷舊,頗有學生時代情書的味道。
「片刻」的引導頁選擇了康熙字典體,由字體設計師厲向晨基于道光七年奉旨重刊版《康熙字典》制作,富有古舊氣息,由于源自古籍復刻,因此筆畫略微破損,反而也會有手工制品的味道和時光流逝之感。這款字體搭配灰白色物品成功提升引導頁的質感,帶來溫暖、純粹的幸福感。采用襯線型中文字體配合單個物品的情懷路線(不知道算是MUJI風還是性冷淡)的引導頁有占領了一定的比例,招商銀行也出過一套類似的引導頁,不過在文字的排列和字體的選擇上略顯粗暴。
天氣
四葉出品,必屬精品,天氣APP那么多,這款天氣作品絕對做到了過目不忘。圖中是「我的天氣」主打的一款主題《唐風》,紙原色的背景加上簡約復古的插畫,而最引入注目是風格強勁的中文字體:蒙納秀明體,作為一款襯線字體,細節卻被盡可能地刪減顯得棱角分明,橫細豎粗有刀刻之感,非常大氣利落,與簡約的天氣動效也十分契合。除此之外還有幾款主題供個性化選擇,比如像素風的《位元》主題,從中文到溫度數字都搭配了像素風格的字體來顯示,非常精致用心,堪稱年度最佳天氣產品。
攝影
當一張毫無裝飾的圖片無法表達我們內心翻滾的情感時,會想用攝影軟件提供的文字貼紙或拼圖功能。比如「黃油相機」,就是一款專門為中文字體量身定制的圖文結合攝影軟件,還有「天天P圖」的拼圖模版:
年末主題選擇了一款日本字體,完全日本影視片頭的即視感,傳遞出2015年的時光就像一場電影即將落幕之意;二十四節氣拼圖模版則選擇了造字工房刻宋,繼承了宋體的手刻風格而又不失現代感,幫助節氣文字的傳統情懷與現代攝影無縫結合。不同的字體代表了不同的心情,不管是日系還是文藝小清新,選對了字體,圖文就能融為一體,將豐富的情感傳達出來。
歌詞海報
同樣的原理從攝影軟件的文字貼紙延伸到了音樂產品的歌詞海報分享。「QQ音樂」的2015力作之一:歌詞海報,長按歌詞選擇想要分享的歌詞,搭配精美的圖片,提供多種字體、排版、字號及投影等自定義樣式,成功感動了一大波音樂愛好者和歌詞控們。經過精心挑選的字體與排版,讓歌詞更有詩意,觸動人心,瞬間秒殺了競品的歌詞分享設計。嗯,原來分享歌詞可以這么高逼格。
閱讀
閱讀軟件的文字很重要,由于閱讀是一個沉浸式的長時間的體驗過程,因此字體一般不會太過花哨。即使是電子書軟件(微信閱讀、QQ閱讀、多看等)一般也只提供幾種可讀性較高的宋體和黑體供個性化的體驗,現在普遍認可黑體是比較適合電子顯示屏長期閱讀的字體。但隨著技術的不斷提升,屏幕顯示能力更強,有超越印刷品的趨勢,在高清環境下,即使是細節頗多的宋體字型未來可能也能達到理想的顯示效果。
新聞資訊軟件「澎湃新聞」成功利用了字體的選擇在知乎上引起了大量tao爭lun議,大膽地在界面全部使用了方正準雅宋,凸顯獨特辨識度的同時,更多地可能是想展現作為新聞平臺背后嚴肅真實的新聞態度與情懷吧。由此可見用戶對產品的理解和氣質的感知,字體真是功不可沒。
西文數字
不同類型的產品,或是一個APP的不同界面,文字的重心可能并不相同。比如在記賬、天氣、運動健康等功能的界面,我們的設計重心會更偏向數字,在中文內容為主的界面則更關注漢字的部分,本文也分別從中文和數字去闡述。而中英文字體通常也是分開使用的,比如iOS9的蘋方和San Francisco,可能因為中文字體的設計師通常是中國人,對字體的理解和設計重心都在漢字部分,英文及數字的設計容易被忽視,反之亦然,因此很難誕生兩者兼顧的字體。
運動健康
創意記步應用「WalkUp」將運動這件小事變得更具故事性和娛樂性,除了概念特別,界面設計也選擇了特殊字體去呈現步數。同樣對這塊進行優化的還有「手機QQ」中的QQ健康助手,在每日推送的消息中大膽使用了特殊字體去呈現,與QQ時尚年輕的定位十分契合。
天氣
除了漢字,可以發現天氣軟件中溫度所使用的不同字體也是拉開產品氣質差別的關鍵。纖細的數字搭配舒服的純色會給界面帶來簡潔干凈的感覺;而搭配城市攝影等位圖則更沉浸和優雅。設計精美的天氣界面對每天查看天氣的用戶來說也是一種享受。
其他
在一些擬物設計和具有明顯行業特征(票券、卡片等)界面設計中也能發現美好的字體,它們幫助提升票券的精致度和時尚感,有跳出電子熒幕之感,也更能滿足不同行業的一些個性化展示。
實例對比
字體之于產品界面的氣質是否真的如此重要呢?讓我們用簡單的實例感受下。
這是一個航班出行的狀態提醒,以卡片的形式呈現并結合實體機票的概念進行設計。界面中數據信息占了很大比例,若仍然使用原生字體會略顯粗暴,機票的質感只依靠排版也無法完全體現。換了一種精心挑選的字體后不論是卡片的氣質還是界面的精致度都得到了顯著提升,同時讓行業特征得以凸顯,也更符合用戶對機票信息的心理預期。
Tips
雖然字體可以讓界面更完美,但顯然不是任意搭配隨便使用的。在實際的設計過程中,選擇一款字體還需耐心斟酌。
「字體設計師就像流行歌手一樣,你沒有辦法阻止有人在浴室亂唱你的歌」——Eric Spiekermann
理解字體
字體世界眼花繚亂,當我們選擇使用一款字體時,最好先了解它的誕生歷史來龍去脈,幫助精準地把握它所傳達的感覺,從而確定它適合使用的場景,以免誤用濫用。一款字體即使再個性獨特,如果與主題不符,也可能會變成界面的槽點。
保證可讀性
在日常生活中,交通指示的字體如果很難快速識別可能會引發無數血案。在手機界面雖然沒有那么嚴重,但功能性始終是文字存在的首要前提。紙張通過外界光源反射,而屏幕則是內發光顯示,字體顯示更纖細,因此一款在印刷品上精致無比的字體可能到了電子顯示屏上就變得破碎。不過字體本質上也是一種科技產品,字體的選擇也在隨著科技的發展不斷變化,如今屏幕精度不斷提升,印刷字體在電子屏的顯示差別可能會變得越來越小。另外,一款適用于標題(較大字號)的字體被用在內文閱讀(較小字號)的易讀性可能會變得非常糟糕。字體的選擇之于界面的長遠體驗,可謂失之毫厘,謬以千里。
考慮成本
如果在視覺設計稿中精心挑選了字體,一定很不希望這點美好的小追求被開發和產品PK掉,同時無論如何也想要(不同終端不同版本的)所有用戶都能看到設計者的良苦用心吧。如何推動字體的使用和保證字體的完美實現還需和開發及產品共同權衡利弊。文字顯示的背后是像素點,像素點的背后則是編碼,一套字體給APP帶來的壓力不可忽視,如果是中文字體所帶來的增量更是明顯增加產品的內存(如果只是英文數字則相對要小得多)。面對內存、性能或版本等問題的硬傷,能否找到巧妙地解決方法,是將字體存儲在云端、轉成圖片還是使用SVG...實際落地中還需要多方面考量,兼顧界面美感與實現成本。
以上