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

界面中的小確幸

優(yōu)秀的產品通常在滿足功能需求之外,能給用戶帶來額外驚喜躺苦,比如品牌價值粉渠、產品氣質甚至喚起情感上的共鳴分冈∨显#縱覽各大APP界面捶闸,無論是社交工具百新、游戲互墓、報刊雜志退唠、攝影丰涉、音樂褂乍、健康...文字都是其界面必不可少的組成元素帖渠。視覺修養(yǎng)從文字開始尤溜,美好的字體也會成為產品使用中可以感受到的微小確切的幸福倔叼。

大才子蘇軾云:“腹有詩書氣自華」常” 而恰到好處的字體也能有效提升產品氣質丈攒。因為文字在不同的場景下?lián)沃煌慕巧欠裰卦诠δ芤只蛘蔑@個性授霸,這就需要選擇不同的字體配合產品帶來不同維度的視覺表現(xiàn)巡验。我們無法絕對地去評價一款字體的好壞與否,因為只有選對字體碘耳,才能合理有效地發(fā)揮其最大價值显设,從而準確地傳達產品的氣質。面對技術的發(fā)展和設計潮流的演變辛辨,界面字體的使用趨勢多元而又多變捕捂,有些時尚簡約富有現(xiàn)代特色,有些則從傳統(tǒng)中尋找養(yǎng)分斗搞,抒發(fā)情懷指攒。

中文

文化藝術

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

詞Ci

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

產品引導頁

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

QQ音樂

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

片刻

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

天氣

My Weather

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

攝影

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

天天P圖

年末主題選擇了一款日本字體抒线,完全日本影視片頭的即視感班巩,傳遞出2015年的時光就像一場電影即將落幕之意;二十四節(jié)氣拼圖模版則選擇了造字工房刻宋十兢,繼承了宋體的手刻風格而又不失現(xiàn)代感趣竣,幫助節(jié)氣文字的傳統(tǒng)情懷與現(xiàn)代攝影無縫結合。不同的字體代表了不同的心情旱物,不管是日系還是文藝小清新遥缕,選對了字體,圖文就能融為一體宵呛,將豐富的情感傳達出來单匣。

歌詞海報

QQ音樂歌詞海報

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

閱讀

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

澎湃新聞

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

西文數(shù)字

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

運動健康

walkup & 手機QQ

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

天氣

各種天氣界面

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

其他

擬物&垂直行業(yè)

在一些擬物設計和具有明顯行業(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)成本朴译。

以上

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市属铁,隨后出現(xiàn)的幾起案子眠寿,更是在濱河造成了極大的恐慌,老刑警劉巖焦蘑,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盯拱,死亡現(xiàn)場離奇詭異,居然都是意外死亡例嘱,警方通過查閱死者的電腦和手機狡逢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拼卵,“玉大人奢浑,你說我怎么就攤上這事∫溉” “怎么了雀彼?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長低葫。 經常有香客問我详羡,道長仍律,這世上最難降的妖魔是什么嘿悬? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮水泉,結果婚禮上善涨,老公的妹妹穿的比我還像新娘窒盐。我一直安慰自己,他們只是感情好钢拧,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布蟹漓。 她就那樣靜靜地躺著,像睡著了一般源内。 火紅的嫁衣襯著肌膚如雪葡粒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天膜钓,我揣著相機與錄音嗽交,去河邊找鬼。 笑死颂斜,一個胖子當著我的面吹牛夫壁,可吹牛的內容都是我干的。 我是一名探鬼主播沃疮,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼盒让,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了司蔬?” 一聲冷哼從身側響起邑茄,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎俊啼,沒想到半個月后撩扒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡吨些,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年搓谆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豪墅。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡泉手,死狀恐怖,靈堂內的尸體忽然破棺而出偶器,到底是詐尸還是另有隱情斩萌,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布屏轰,位于F島的核電站颊郎,受9級特大地震影響,放射性物質發(fā)生泄漏霎苗。R本人自食惡果不足惜姆吭,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望唁盏。 院中可真熱鬧内狸,春花似錦检眯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至昂灵,卻和暖如春避凝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背眨补。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工恕曲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人渤涌。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓佩谣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親实蓬。 傳聞我的和親對象是個殘疾皇子茸俭,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內容