主要看氣質:移動界面字體二三事

界面中的小確幸

優秀的產品通常在滿足功能需求之外,能給用戶帶來額外驚喜,比如品牌價值、產品氣質甚至喚起情感上的共鳴。縱覽各大APP界面,無論是社交工具、游戲、報刊雜志、攝影、音樂、健康...文字都是其界面必不可少的組成元素。視覺修養從文字開始,美好的字體也會成為產品使用中可以感受到的微小確切的幸福。

大才子蘇軾云:“腹有詩書氣自華。” 而恰到好處的字體也能有效提升產品氣質。因為文字在不同的場景下擔任著不同的角色,是否重在功能抑或彰顯個性,這就需要選擇不同的字體配合產品帶來不同維度的視覺表現。我們無法絕對地去評價一款字體的好壞與否,因為只有選對字體,才能合理有效地發揮其最大價值,從而準確地傳達產品的氣質。面對技術的發展和設計潮流的演變,界面字體的使用趨勢多元而又多變,有些時尚簡約富有現代特色,有些則從傳統中尋找養分,抒發情懷。

中文

文化藝術

界面離不開文字,為了使界面好看,拋棄系統默認字體,選擇更有美感和風格的字體是一次美麗的設計探險。

詞Ci

「詞Ci」是一款能夠自動檢查平仄、輔助填詞的App,詞牌名選擇了方正清刻本悅宋(英文字體是Hoefler Text),堪稱宋詞與宋體的巧妙結合,營造出獨特的意境和古典美。雖然是很早之前的一個應用,但在當時是非常大膽的案例,為后面文化藝術類APP的中文字體選擇提供了更多可能性的遐想。

產品引導頁

引導頁因為可以生成圖片而限制較少,設計風格眾多,字體當然可以大膽地嘗試。不乏有太過無聊而被用戶完全無視迅速滑掉的引導頁,因此選擇符合主題的字體,讓引導頁印象更深刻,提升存在感。

QQ音樂

「QQ音樂」這套宣傳歌詞海報功能的引導頁在三段愛情旅程的標題上同樣使用了方正清刻本悅宋,與「詞Ci」的古色古香不同的是,此處卻為界面多添了一份細膩與懷舊,頗有學生時代情書的味道。

片刻

「片刻」的引導頁選擇了康熙字典體,由字體設計師厲向晨基于道光七年奉旨重刊版《康熙字典》制作,富有古舊氣息,由于源自古籍復刻,因此筆畫略微破損,反而也會有手工制品的味道和時光流逝之感。這款字體搭配灰白色物品成功提升引導頁的質感,帶來溫暖、純粹的幸福感。采用襯線型中文字體配合單個物品的情懷路線(不知道算是MUJI風還是性冷淡)的引導頁有占領了一定的比例,招商銀行也出過一套類似的引導頁,不過在文字的排列和字體的選擇上略顯粗暴。

天氣

My Weather

四葉出品,必屬精品,天氣APP那么多,這款天氣作品絕對做到了過目不忘。圖中是「我的天氣」主打的一款主題《唐風》,紙原色的背景加上簡約復古的插畫,而最引入注目是風格強勁的中文字體:蒙納秀明體,作為一款襯線字體,細節卻被盡可能地刪減顯得棱角分明,橫細豎粗有刀刻之感,非常大氣利落,與簡約的天氣動效也十分契合。除此之外還有幾款主題供個性化選擇,比如像素風的《位元》主題,從中文到溫度數字都搭配了像素風格的字體來顯示,非常精致用心,堪稱年度最佳天氣產品。

攝影

當一張毫無裝飾的圖片無法表達我們內心翻滾的情感時,會想用攝影軟件提供的文字貼紙或拼圖功能。比如「黃油相機」,就是一款專門為中文字體量身定制的圖文結合攝影軟件,還有「天天P圖」的拼圖模版:

天天P圖

年末主題選擇了一款日本字體,完全日本影視片頭的即視感,傳遞出2015年的時光就像一場電影即將落幕之意;二十四節氣拼圖模版則選擇了造字工房刻宋,繼承了宋體的手刻風格而又不失現代感,幫助節氣文字的傳統情懷與現代攝影無縫結合。不同的字體代表了不同的心情,不管是日系還是文藝小清新,選對了字體,圖文就能融為一體,將豐富的情感傳達出來。

歌詞海報

QQ音樂歌詞海報

同樣的原理從攝影軟件的文字貼紙延伸到了音樂產品的歌詞海報分享。「QQ音樂」的2015力作之一:歌詞海報,長按歌詞選擇想要分享的歌詞,搭配精美的圖片,提供多種字體、排版、字號及投影等自定義樣式,成功感動了一大波音樂愛好者和歌詞控們。經過精心挑選的字體與排版,讓歌詞更有詩意,觸動人心,瞬間秒殺了競品的歌詞分享設計。嗯,原來分享歌詞可以這么高逼格。

閱讀

閱讀軟件的文字很重要,由于閱讀是一個沉浸式的長時間的體驗過程,因此字體一般不會太過花哨。即使是電子書軟件(微信閱讀、QQ閱讀、多看等)一般也只提供幾種可讀性較高的宋體和黑體供個性化的體驗,現在普遍認可黑體是比較適合電子顯示屏長期閱讀的字體。但隨著技術的不斷提升,屏幕顯示能力更強,有超越印刷品的趨勢,在高清環境下,即使是細節頗多的宋體字型未來可能也能達到理想的顯示效果。

澎湃新聞

新聞資訊軟件「澎湃新聞」成功利用了字體的選擇在知乎上引起了大量tao爭lun議,大膽地在界面全部使用了方正準雅宋,凸顯獨特辨識度的同時,更多地可能是想展現作為新聞平臺背后嚴肅真實的新聞態度與情懷吧。由此可見用戶對產品的理解和氣質的感知,字體真是功不可沒。

西文數字

不同類型的產品,或是一個APP的不同界面,文字的重心可能并不相同。比如在記賬、天氣、運動健康等功能的界面,我們的設計重心會更偏向數字,在中文內容為主的界面則更關注漢字的部分,本文也分別從中文和數字去闡述。而中英文字體通常也是分開使用的,比如iOS9的蘋方和San Francisco,可能因為中文字體的設計師通常是中國人,對字體的理解和設計重心都在漢字部分,英文及數字的設計容易被忽視,反之亦然,因此很難誕生兩者兼顧的字體。

運動健康

walkup & 手機QQ

創意記步應用「WalkUp」將運動這件小事變得更具故事性和娛樂性,除了概念特別,界面設計也選擇了特殊字體去呈現步數。同樣對這塊進行優化的還有「手機QQ」中的QQ健康助手,在每日推送的消息中大膽使用了特殊字體去呈現,與QQ時尚年輕的定位十分契合。

天氣

各種天氣界面

除了漢字,可以發現天氣軟件中溫度所使用的不同字體也是拉開產品氣質差別的關鍵。纖細的數字搭配舒服的純色會給界面帶來簡潔干凈的感覺;而搭配城市攝影等位圖則更沉浸和優雅。設計精美的天氣界面對每天查看天氣的用戶來說也是一種享受。

其他

擬物&垂直行業

在一些擬物設計和具有明顯行業特征(票券、卡片等)界面設計中也能發現美好的字體,它們幫助提升票券的精致度和時尚感,有跳出電子熒幕之感,也更能滿足不同行業的一些個性化展示。

實例對比

字體之于產品界面的氣質是否真的如此重要呢?讓我們用簡單的實例感受下。

機票卡片對比

這是一個航班出行的狀態提醒,以卡片的形式呈現并結合實體機票的概念進行設計。界面中數據信息占了很大比例,若仍然使用原生字體會略顯粗暴,機票的質感只依靠排版也無法完全體現。換了一種精心挑選的字體后不論是卡片的氣質還是界面的精致度都得到了顯著提升,同時讓行業特征得以凸顯,也更符合用戶對機票信息的心理預期。

Tips

雖然字體可以讓界面更完美,但顯然不是任意搭配隨便使用的。在實際的設計過程中,選擇一款字體還需耐心斟酌。

「字體設計師就像流行歌手一樣,你沒有辦法阻止有人在浴室亂唱你的歌」——Eric Spiekermann

理解字體

字體世界眼花繚亂,當我們選擇使用一款字體時,最好先了解它的誕生歷史來龍去脈,幫助精準地把握它所傳達的感覺,從而確定它適合使用的場景,以免誤用濫用。一款字體即使再個性獨特,如果與主題不符,也可能會變成界面的槽點。

保證可讀性

在日常生活中,交通指示的字體如果很難快速識別可能會引發無數血案。在手機界面雖然沒有那么嚴重,但功能性始終是文字存在的首要前提。紙張通過外界光源反射,而屏幕則是內發光顯示,字體顯示更纖細,因此一款在印刷品上精致無比的字體可能到了電子顯示屏上就變得破碎。不過字體本質上也是一種科技產品,字體的選擇也在隨著科技的發展不斷變化,如今屏幕精度不斷提升,印刷字體在電子屏的顯示差別可能會變得越來越小。另外,一款適用于標題(較大字號)的字體被用在內文閱讀(較小字號)的易讀性可能會變得非常糟糕。字體的選擇之于界面的長遠體驗,可謂失之毫厘,謬以千里。

考慮成本

如果在視覺設計稿中精心挑選了字體,一定很不希望這點美好的小追求被開發和產品PK掉,同時無論如何也想要(不同終端不同版本的)所有用戶都能看到設計者的良苦用心吧。如何推動字體的使用和保證字體的完美實現還需和開發及產品共同權衡利弊。文字顯示的背后是像素點,像素點的背后則是編碼,一套字體給APP帶來的壓力不可忽視,如果是中文字體所帶來的增量更是明顯增加產品的內存(如果只是英文數字則相對要小得多)。面對內存、性能或版本等問題的硬傷,能否找到巧妙地解決方法,是將字體存儲在云端、轉成圖片還是使用SVG...實際落地中還需要多方面考量,兼顧界面美感與實現成本。

以上

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,763評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,238評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,823評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,604評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,339評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,713評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,712評論 3 445
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,893評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,448評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,201評論 3 357
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,397評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,944評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,631評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,033評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,321評論 1 293
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,128評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,347評論 2 377

推薦閱讀更多精彩內容