編注：本文為兩顆皮蛋《[護城河]人機互動的基石｜字型設計排版深度解析》影片的文字稿，你可以 觀看原影片。全文約 5600 字，文章觀點未必與你的觀點完全一致，請給予尊重、包容。
我們生活中充滿了各種文字，人們往往會關注內容，但很少有人會注意字型本身。不同的設計師設計出性格迥異的字型，有的嚴肅優雅，有的活潑有趣。
而字型和排版的設計也是人機互動介面的基石，那 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 也講到了智慧排版引擎，但經過實測，這個能力還只能在第一方的應用內生效，三方應用仍然不支援。這個部分國內的廠商確實還需要努力。
注：手動加空格其實是沒有智慧排版引擎的權宜之計，其實正確的中西文之間的間距，應該是像 Apple 那樣，用字間距自動處理，並且也不是一個半形空格，應該更窄一些。
不過這裡我要提一個非常神奇的事情，有一家國內的 Android 應用，在應用裡面自己做了一套類似 Apple 的排版引擎，它竟然是微信。不信大家你們現在可以翻一翻手機上的聊天記錄，把它那些帶中英文混排的對話複製到其他應用裡面，看看排版是不是一樣的。
另外就是微信輸入法現在還是 1.0 時代，一共就沒幾個功能，竟然先把中英文數字之間自動加空格的功能給做進去了，就張小龍同志確實還挺有意思的，他們確實有自己的堅持。
▍總結
不管是前面的字型發展和變遷，還是 Apple 在排版設計上的重視，從這背後，其實是可以拎出一根清晰的主軸來代表 Apple 在字型和排版設計上的目標，那就是我在文中反覆強調的閱讀的體驗，讀起來是否流暢，是否會看不清閱讀困難，這些才是優先順序最高，也是最基本的設計需求。
根據喬布斯傳的記載，從裡德學院退學後，他曾經還旁聽過字型設計的課程，這可能是當時全美國最好的字型設計課程，他也從此培養出了濃厚的興趣，他開始關注字型設計，痴迷於出色的排版，這些當初可能只是興趣和愛好，在十年之後，卻變成了人機互動介面的基石。他在斯坦福大學的演講中說，如果他沒有上過這些字型設計課程，個人電腦可能永遠也不會出現這麼精緻的排版。
要說現在設計軟體基本都面向全平臺，可能 Windows 上其實支援的軟體還更多，大家都能做出好設計，那為什麼還有這麼多設計師選 Apple？思維慣性我覺得當然有，但是除此之外，我覺得真正重視設計，尊重設計的力量，還是建立起信任的重要原因，光一個平滑圓角，一個實時高斯模煳，你看看其他家折騰到現在都不是標配，而且 Apple 每年還有大量的課程教你如何做設計，從最基礎的設計原則講起，再到 UI 框架，設計規範，新增內容，我做影片都能汲取到養分，他也一定幫助到了大量的設計師如何改進自己設計、如何做得更好。
而這也是我認為 Apple 仍然在設計領域具備優勢的原因，從設計師到開發，從產品經理到營銷，討論清楚什麼是好的設計，找到那個唯一解已經很難了，但這還只是個基礎，接下來還要把設計工程化，把設計元素原子化，拆到不能再拆為止來定義規範，開發元件。
當你方方面面都執行到這個水準，品牌所有的觸點都會變成了一個整體，官網的頁面，釋出會的展示，地鐵上的廣告，手機上的介面，所有這些地方的表現都高度一致，這就會讓使用者形成一個極強極強的記憶點——
Apple 尊重設計。
設計與工程，科技和人文，當你真的認真分析過 Apple 之後，就會發現這些東西他們不只是說說而已。
https://sspai.com/post/86214?utm_source=wechat&utm_medium=social
作者：兩顆皮蛋
責編：張奕源Nick
