人機交互的基石：Apple 字體設計排版深度解析
我們生活中充滿了各種文字，人們往往會關注内容，但很少有人會注意字體本身。不同的設計師設計出性格迥異的字體，有的嚴肅優雅，有的活潑有趣。
而字體和排版的設計也是人機交互界面的基石，那 Apple 的系統在這方面做的怎麽樣？現在各家都做了自己的品牌定制字體之後，Apple 還有什麽過人之處？
雖然我不是字體設計師，但是在查了很多很多資料之後，我還是想試試，把背後的一整個前因後果分享給你。Hello 大家好，歡迎收看這期 Apple 護城河視頻，我是初号。
Helvetica
我們的故事要從傳奇字體 Helvetica 講起。
Apple 從 Macintosh 時代就把它集成在了系統當中。
iPhone 誕生之後，它更是直接成爲了 iOS 的系統字體。
我在查資料的時候都有點不敢相信。這個玩意兒，竟然誕生于 1957 年。
在當年 Helvetica 一經發布就廣受好評，作爲國際主義風格的典型代表，即便從今天來看，他也極爲現代和中性，完全不像是半個世紀之前的設計。即使在咱們國家，我們很多耳熟能詳的品牌，像是寶馬、微軟、Jeep、英特爾、雀巢、摩托羅拉等等等等，全都用過，或者曾經用過 Helvetica。可以說當時的它，就像是初代 iPhone 之于手機行業一樣，席卷了整個設計行業。
美國的報稅表格也使用 Helvetica
iPhone 使用這個字體也可以算是天作之合因爲作爲系統字體，一個非常重要的考量因素就是：就是它不能太多自己的個性和風格。即便被有些人诟病說 Helvetica 非常冰冷，但是冰冷的另一面，有時也代表着可靠和溝通效率。
聊到這我就想到，我見到過很多 Android 用戶會在主題商店把默認字體換成楷體、圓體、甚至更有風格的花體字，不知道看我視頻的觀衆有沒有這麽搞的，可以發一下彈幕看看，反正我自己是接受不了這種花樣，倒也不是說字體本身有優劣或者鄙視鏈，沒有錯誤的字體，隻有不合适的使用場景。
我舉個例子，我随便從 Apple 官網上複制一段産品簡介，其實這段文字都已經不算長了，但是你肯定可以感受出兩種字體在閱讀時，花體顯然要更加吃力。
可想而知，如果是在公衆号閱讀一篇文章，會是個什麽狀态了。使用花體确實可以表達出更飽滿的感情。但相比較而言，Helvetica 這類沒有太多性格的無襯線字體，用在系統中的肯定是更适合的。
這裏插一個很有意思的故事，有個設計師因爲對現行的 Helvetica 的數字版不滿意，他找到了原始的活字印刷字模，重新對 Helvetica 進行數字化設計，命名成 Neue Haas Grotesk。
然後呢，它曾經是一加的官方西文字體，用在所有國内外的營銷物料當中，這套設計規範現在還在我電腦裏，沒想到在這串在一起了。
注：Neue Haas Grotesk 是 Helvetica 的曾用名，全球化推廣的時候，公司建議将其改名稱 Helvetica，拉丁語意爲——瑞士的。時逢國際主義設計風潮，瑞士正是思想啓蒙之地，可以說這個名字也是幫助 Helvetica 取得成功的重要組成部分。而 2020 年這個「再版」的 Neue Haas Grotesk，也是對曆史的一種緻敬。
然後時間推進到 2013 年，爲了全新的扁平化視覺風格，Apple 把系統字體換成了更加纖細的 Helvetica Neue Light，來強化系統整體更加輕盈、明快的感覺。
站在現在回頭看，好像是我們這一代人，在這時候第一次感受到了Apple的影響力，雖然以現在的眼光看，Apple是從一個極端走向了另一個極端，處處扁平化其實很多時候是增加了用戶的理解成本。但是在之後的幾年，不僅僅是 Android 系統全部都把扁平化作爲重要的升級點，甚至連「八杆子打不着」的行業品牌都開始把原來帶有豐富細節和光影效果的 logo 拍扁，變成一些簡單的幾何圖形和大色塊，同時把原本的經典襯線字體改成更加現代的無襯線體。
而這個轉變的過程，Helvetica 作爲設計界的先鋒，也扮演了舉足輕重的作用。正當人們認爲，可能 Helvetica 會伴随Apple走很遠很遠的時候。僅僅在兩年之後，Apple 在 WWDC 2015 上推出了全新的字體 San Fransisco。
San Fransisco
從那以後 SF 就作爲 Apple 的系統還有品牌标識字體，直到今天。當時這個改變口碑是兩極分化的，有人拍手稱快，認爲這個世界不應該被 Helvetica 占領，但也有一些設計師認爲新字體不如 Helvetica，尤其是數字的設計，像是 1、4、7、8 這幾個數字。
那 Apple 爲啥要冒着風險更換這麽經典的字體呢？難道是因爲追求體驗自閉環，已經變成了 Apple 的一種信仰？還是字體授權費太貴了？直到我爲了這期視頻在看「Helvetica」紀錄片的時候，這哥們說的一段話給我揭曉了答案——
這個圖是一個非常直觀的對比，當采用 60 磅大小時，每個字體的可讀性并不會有太大的區别，可随着磅數越來越小，Helvetica 的可讀性會直線下降，字母感覺都黏在一起，分辨起來非常吃力——
而之所以 Apple 要換成 SF 字體，是因爲在前一年——也就是 2014 年——Apple 發布了一個小屏設備，這個産品就是 Apple Watch，小字号閱讀困難的問題亟待被解決。
爲了解決手表上文字可讀性的問題，Apple 在 Apple Watch 第一代上就率先搭載了專門爲小屏設備準備的 SF Campact 字體，相比于手機和電腦上的字體，它的字母設計上更窄更緊湊，但同時字母的間距被放大了，這就保證了在手表的屏幕的有限空間之内，它既能顯示更多的文字，又保證文字不至于讓人無法分辨。
在随後的第二年，Apple 正式發布了整個 San Francisco 字體家族，手機電腦這些默認用 SF，手表上用 SF Campact，這倆并列爲字體家族的兩個子集。每個 SF 子集其實都包含兩個部分，當字号是 20 磅以下時，他們會使用字間距更大，x 高度更高的 SF Text 字體，增加文字的辨識度。而字号超過 20 磅時，他們會切換成排版稍微緊湊一些的 SF Display 追求顯示更多内容。
這些切換會由 Xcode 會自動完成，開發者沒有額外的工作量。
注：其實 Text 和 Display 之間的切換，本質上是一個字體之間在切換視覺字号。在活字印刷時代是字體排印師自然而然要考慮的因素——即使是同一個字體，小字号的字模也不能跟大字号的一模一樣，你必須略微改變小字号字母的形狀、字母間的間距，才能保證内容清楚易讀。但是在數字排版時代，開始大規模普及也就是這幾年的事情。
下面這兩個圖是非常直觀的對比，看時間這個部分我覺得确實 Helvetica 的數字整體更緊湊的感覺，看起來會更舒服一點。但是在 app launcher 中，SF Text 相比之下更幹淨更清楚，内容的可讀性顯然更好。
不過到這 SF 才算走完第一步，它的進化之路才剛剛開始。
在字體排印行業，過去一直有一個難題，就是每個字體的樣式隻有固定幾套，粗體、标準、細體、斜體，有的字體甚至這幾個都不全，這就讓設計師想要組合使用不同字體時，除了基本的字形匹配能否合适之外，還必須考慮它們是否具有需要的樣式。
你當然可以自己手動調，可一旦數量多了之後就非常浪費時間，所以行業也在呼籲字體能否簡單快速的實現無極變換，讓設計師能夠有更高的選擇自由度。
在 2016 年，Apple、微軟、谷歌、Adobe 四家共同發布了 OpenType 1.8 的規範，支持多種樣式的無級調節，比如字重、字寬、還有視覺字号等。
經過幾年時間的發展，SF 字體家族已經支持了全部這些無極變換的特性，并且将所有字體樣式封裝在一個文件當中，這就是今天的 SF Pro。SF Pro 的文件體積大幅度減小，設計師也不再需要切換字體，就可以獲得全部的樣式。
而且和 SF 字體一同出現的，還有一個叫做 SF Symbols 的圖标包，我現在下載的這個最新版，裏面包含了 5000 多個圖标，可以覆蓋幾乎全部的應用使用場景。
這裏面甚至還有 500 多個爲新 CarPlay 準備的汽車儀表盤圖标，這些圖标設計非常精美，樣式統一，并且可以跟 SF 字體無縫匹配到一起。這樣就爲 Apple 生态的應用開發者省去了很多設計和時間的成本，這也是 Apple 生态很多原生開發的第三方應用，往往設計得更加精美的原因。
蘋方
到這我們也終于可以說說中文這邊的情況了，其實 Apple 在更換 SF 字體的同時，中文字體也同時更換成了現在的「蘋方」。跟 SF 相同，蘋方也是完全基于數碼時代，專門爲在顯示屏上呈現而優化的字體。并且它跟 SF 混排時，接近一緻的字重還有筆畫粗細讓它們可以很好的融合在一起。可以說，蘋方就是爲 SF 量身定制的。
我查資料的時候發現，相比較于國外對 SF 口碑的兩極分化，蘋方的換代在國内基本都是正面的評價，之前的華文黑體被人诟病的問題都做了很好的改進，比如說華文黑體本身字面偏小，在非視網膜屏幕下可讀性下降的問題，蘋方靠着更寬大的中宮，更大的字面大幅度的提升了小字号的可讀性。
再比如它支持更多的字重，不僅可以适配 iOS 上越來越多的多字重混排的布局，而且在 CJK 與西文混排時，一緻性更好，版面更加整齊。
這些改變背後反映的一個趨勢，就是正文的黑體字體設計越來越以功能性爲主，向屏幕閱讀的需求傾斜。大家爲了滿足可讀性的需要，不約而同的都在選擇中宮更大，整體更寬松的字面。
同時，國際化的需求也很重要，讓不同語言混排時，保持風格的高度一緻。而中文設計本身一些獨特的風格和辨識度就顯得沒那麽重要了，雖然這會導緻現在好像每個品牌都有自己的字體，好像大家有很難分的清楚，但是對于用戶來說，這其實是一件好事，因爲大家逐漸在容易看懂，設計簡約，閱讀舒适這些基本設計原則之間，找到了最優解。
而且國内這兩年大家也越來越開始重視字體的設計，小米的 Mi Sans L3 擴展支持了更多的生僻字，還有思源 CJK 對東亞中日韓三國文字，甚至是同字多形的支持，這些都爲中文世界的數字化産生了巨大的幫助。
至此，經過了多年發展，SF 已經完全融入進了 Apple 的方方面面，它不僅僅是一套系統字體，現在更是 Apple 這個品牌的一個視覺符号。隻要看到 iPhone 的廣告，這個字母 i 上面的小圓點就會清楚地告訴你，它就是 San Fransisco，它代表着 Apple 的當下。
那字體的部分聊完了，接着我們再往前進一步，聊聊排版，要說在字體上 SF 隻能說是後起之秀，但是排版真可以說這是 Apple 的血脈了。
排版
雖然 Apple 在排版設計領域的優勢最早一直可以追溯到 Macintosh 時期，當時他們還有自己的打印機生産線，跟 Adobe 合作，構建了字體設計、設計排版一直到打印輸出的全生态。
但是我們好漢不提當年勇，對于今天的 Apple 來說，我覺得非常重要的就是他們既有宏觀的 HIG 設計指導，同時還有 WWDC 課程中詳細的實踐案例，你能從中找到一系列适用于不同場景的頁面結構，排版規則，就手把手地告訴你，怎麽做可以讓應用既能呈現出豐富的内容，又看上去美觀大方。
并且，所有這套東西，随着他們針對系統的變化一直都在刷新。它們曾經長這樣——
現在變成了這樣——
這裏又要提一下 Vision Pro 了，在去年 WWDC 發布之後，所有配套的相關設計文檔已經全部準備好了，按鈕間距，文字大小，一整套框架可以讓開發者在 3D 空間之内，依然可以按照自己依然熟悉的規則來去設計頁面的布局和排版，讓你用最快的速度把設計稿落地。對于現在的人機交互來說，設計能力其實也是一種工程能力。
另一方面，我覺得是可能很多人都會忽略，但我卻特别敏感的一個方面，就是中英文混排。細心的人應該能發現，我們的視頻字幕在中英文混排的時候，都會在中英文之間加上空格，避免他們擠在一起影響閱讀的體驗。
這其實是個非常折磨人的活，但我覺得這件事是必須達成的基礎體驗。在查資料的時候，我還發現了一個非常有意思的個人博客，管這個混排中的空格叫 盤古之白 ，意思是劈開了全角字和半角字之間的混沌，他還專門做了個浏覽器的插件，能讓你網頁端顯示的内容把所有空格自動補齊。其實W3C 的中文排版需求文檔 ，裏面有明确的說明，應該要加這個空格。
這份文檔的編輯之一劉慶，是「西文字體」系列，還有「平面設計中的網格系統」這幾本書的翻譯和監修，我爲了這期視頻也沒少翻這幾本書。在印刷出版行業，中英文之間的間距，其實早就已經是約定俗成的規範了。
與此同時，Apple 在這方面一直都是嚴謹的代名詞，他在你能看到的幾乎任何地方，都嚴格遵循這樣的排版規範，不管是系統 UI，線下的廣告牌，還是官網産品頁面，閱讀體驗始終如一。
他甚至在官網的産品頁面上定制了一種特殊的 SF 字體 ，這個字體的中文會縮小到正常的 89%，這樣中文跟英文之間的大小會更加接近，混排的時候就減少了文字之間高高低低的錯落感，閱讀起來會更流暢。我覺得大家如果好奇的話，可以去這幾家手機品牌的官網去看看，是不是都嚴格落實了這樣的排版規則。
并且 Apple 還在系統中直接集成了全自動的排版引擎，隻要是你用原生 UI 框架，即使是三方應用，系統都會自動把中英文之間的間距拉開，不需要手動加空格。這個東西到今天，Apple 仍然是獨一份的存在。
今年新的 OriginOS 也講到了智能排版引擎，但經過實測，這個能力還隻能在第一方的應用内生效，三方應用仍然不支持。這個部分國内的廠商确實還需要努力。
注
不過這裏我要提一個非常神奇的事情，有一家國内的 Android 應用，在應用裏面自己做了一套類似 Apple 的排版引擎，它竟然是微信。不信大家你們現在可以翻一翻手機上的聊天記錄，把它那些帶中英文混排的對話複制到其他應用裏面，看看排版是不是一樣的。
另外就是微信輸入法現在還是 1.0 時代，一共就沒幾個功能，竟然先把中英文數字之間自動加空格的功能給做進去了，就張小龍同志确實還挺有意思的，他們确實有自己的堅持。
總結
不管是前面的字體發展和變遷，還是 Apple 在排版設計上的重視，從這背後，其實是可以拎出一根清晰的主軸來代表 Apple 在字體和排版設計上的目标，那就是我在文中反複強調的閱讀的體驗，讀起來是否流暢，是否會看不清閱讀困難，這些才是優先級最高，也是最基本的設計需求。
根據喬布斯傳的記載，從裏德學院退學後，他曾經還旁聽過字體設計的課程，這可能是當時全美國最好的字體設計課程，他也從此培養出了濃厚的興趣，他開始關注字體設計，癡迷于出色的排版，這些當初可能隻是興趣和愛好，在十年之後，卻變成了人機交互界面的基石。他在斯坦福大學的演講中說，如果他沒有上過這些字體設計課程，個人電腦可能永遠也不會出現這麽精緻的排版。
要說現在設計軟件基本都面向全平台，可能 Windows 上其實支持的軟件還更多，大家都能做出好設計，那爲什麽還有這麽多設計師選 Apple？思維慣性我覺得當然有，但是除此之外，我覺得真正重視設計，尊重設計的力量，還是建立起信任的重要原因，光一個平滑圓角，一個實時高斯模煳，你看看其他家折騰到現在都不是标配，而且 Apple 每年還有大量的課程教你如何做設計，從最基礎的設計原則講起，再到 UI 框架，設計規範，新增内容，我做視頻都能汲取到養分，他也一定幫助到了大量的設計師如何改進自己設計、如何做得更好。
而這也是我認爲 Apple 仍然在設計領域具備優勢的原因，從設計師到開發，從産品經理到營銷，讨論清楚什麽是好的設計，找到那個唯一解已經很難了，但這還隻是個基礎，接下來還要把設計工程化，把設計元素原子化，拆到不能再拆爲止來定義規範，開發組件。
當你方方面面都執行到這個水準，品牌所有的觸點都會變成了一個整體，官網的頁面，發布會的展示，地鐵上的廣告，手機上的界面，所有這些地方的表現都高度一緻，這就會讓用戶形成一個極強極強的記憶點——
Apple 尊重設計。
設計與工程，科技和人文，當你真的認真分析過 Apple 之後，就會發現這些東西他們不隻是說說而已。
