「後扁平化時代」的 i18n 和 L10n
他坦言說這套設計實在是太素了,連性冷淡這個詞都已經無法描述這個界面的慘白,簡直「比交互稿還交互稿」。而且 Airbnb 新 App 的整套設計他都不太喜歡,跟 Apple Music 神似的大粗標題和「白兮兮」的視覺風格實在不是他的菜。事實上 Airbnb 這套新的設計應該在今年四月份就已經上線了,但是我之前都沒有完整體驗過,哪怕中間還訂過一次房似乎也沒注意到,所以一邊跟大家討論我一邊試用了一下。拋開之後群里討論這套設計到底是否好看不談,我在對比了其中的一些界面之後突然意識到一件事兒:如今視覺風格越來越趨向於「突出內容而弱化 UI」,在需要做國際化和本地化 的時候,UI 設計師遇到的挑戰非常嚴峻。
關於那些長長的文字
在 HP 為印表機操作屏設計界面的時候,第一次接觸到了 i18n 的相關工作,每次要在設計里對各種長短不一的信息呈現進行各種取捨的時候都糾結不已。依稀記得各種需求文檔里最頭痛就是一個「String Table」,這個動輒十多兆的 Excel 表格里羅列了界面中所有文字在全世界所有發售地區支持的十幾種語言的各種翻譯版本(你可以理解為某部電影的包含十幾種不同語言的字幕文件),就拿主界面上最常見的一個「列印照片」功能的文案來舉例:
照片 / Photo / Fotografije / Φωτογραφ?α同樣一個詞在不同地區長度差別實在太大,用當時我們常用的一個寬度單位「W」(就是一個 Arial 字體下的 W 字母寬度)來粗略計算,從 2W 到 6W 不等,對於一個按鈕來說這個長度的差別足以影響視覺設計上的平衡乃至布局了。但現實情況下,不可能為每個語言出一套適配方案(當然,希伯來語和阿拉伯語是例外,Style Guide 經常要照顧一下他倆,而且所有牽涉到箭頭等方向感的圖標也需要重繪)。這些大體上只是對視覺的影響,在其他方面 i18n 和 L10n 甚至會改變整個交互體驗,比如我記得因為德國特殊的法律,所有的印表機不能自帶複印功能,所以需要引導用戶先掃描,再列印……好像扯遠了,先說回來。關於字體
回到 Airbnb,我自己體驗了新版之後感覺其實整套設計不如錢同學說得這麼「冷淡」,至少他貼出來的搜索界面只是所有主要 UI 當中最簡單的一個,其他的大家可以簡單感受一下:
而整個搜索流程前前後後其他界面的風格基本也還不至於那麼「慘白」:應該慶幸的是現在 iOS 至少有了蘋方,好歹粗細變化是可以的,要是放以前只有華文細黑的話就是下面這個效果,連基礎的文字對比度都要缺失了:
Airbnb 現在 App 上的默認字體,用的是他們家在 2014 年那次非常成功的 re-branding 中選定的 Circular(logo 上的文字是 Brown,其他印刷以及線上的文字都是 Circular,兩者都是 Lineto 出品的)。以前做了一次外部的分享,Q&A 環節中有朋友問了我一個問題:你平時做項目的時候怎麼挑選字體的?我回答說最基礎的肯定要考慮字體基本的 readability、legibility、字元是不是完整等屬性,然後在我心目中對常用的那些字體有個非常感性的分類,不是按照字體有沒有襯線,偏幾何還是偏人文來分,而是更多像下圖所示這樣,從「現代-經典」和「嚴謹-有趣」兩個緯度來選擇,根據項目中的實際需求進行取捨,一些常見的英文字體在我的坐標里大概是這樣的(說了非常感性的,如果大家覺得跟你的判斷不符,請不要來辯~):總之,我覺得這款品牌字體 Circular 還算是比較「好玩」的,略略有些「味道」的(關於它的基本介紹可以參考@Linkzero Tsang 的這個知乎回答:在 Alphabet 網站 (abc.xyz) 出現的 LTCircular 是種什麼字體?),一定要比喻的話,我覺得它有點像麥當勞的紅豆派,基本上填得飽肚子,吃起來雖然比較清淡但其實還是有點回味的。而 Airbnb 的這個中文版界面其實就像麥當勞來到中國之後突然在套餐里把紅豆派換成了白饅頭,雖然依然吃得飽,也符合本地傳統,但口味差了很多(好吧,我只是隨便舉了個例子,美國的麥當勞到底有沒有紅豆派其實我也不知道,求別打臉!)。
隨著技術和時代的發展,現在各種企業的品牌字體選用都非常謹慎,但一旦確定之後使用的深度和頻度都比以前高了太多,但像 SONY 這種敢為了推新品牌字體而直接做了全新設計覆蓋 93 個語言版本的情況畢竟是少數(好吧,其實 SST 在 CJK 里也只覆蓋了日文,依然任重道遠)。所以跨國企業一個很常見的問題是一旦經過本地化之後,原先花大力氣定義的品牌調性都因為字體的問題有所缺失,而在 UI 上問題更嚴重,因為現在的 UI 風格都越來越趨向簡單、直接、突出內容,字體經常成了設計中非常重要的一部分。而就像前面那個搜索界面的例子,很多品牌個性在本地用戶手機上都不見了……最近要碼很多 PPT,請允許我繼續未完待續一下……推薦閱讀:
※台灣日本翻閱的右開(左翻)本文字排版是絕對不允許橫排的嗎?
※二:真假「斜體」
※讓活字真正「活」起來:每個人都能擁有的輕量級排印工具 Typeholder
※如何用ps做出如下效果?(圖片里的字體和倒影效果)
※彎引號的出路