圖文版 WWDC 設計分會：跨平臺設計（2）平臺適配與風格協調

@C7210?：圖文版 WWDC，由 Apple 的設計師 Cas Lemmens 為我們講解如何面向 Apple 生態體系中的多種設備進行設計。上周話題聚焦于目標平臺的選擇，錯過的朋友不妨回看；本期來看如何面向目標平臺進行功能適配與風格協調。

《圖文版 WWDC 設計分會！跨平臺設計 (1) ：平臺選擇》

跨平臺設計 - 平臺適配

我們已經了解了如何選擇目標平臺，接下來進入跨平臺設計流程的第二步，「平臺適配」，即基于目標平臺的特性，對我們希望 app 能夠實現的功能及互動方式進行有針對性的調整。

仍以「健康記錄」 app 為例。在 iPhone 版本的「健康記錄」當中，你可以做很多事，譬如查看今日進展、歷史成就、體能訓練統計、好友的健身記錄等等；你可以對所有的數據進行管理，可以添加訓練項目，邀請好友或是分享你的進展和成就。

所有這些在 iPhone 上都是可行的，并且是符合 iPhone 這個平臺的情境特質的。iPhone 是非常私人化的設備，所有這些健康數據都是關乎個人的；而所有的相關操作都無需花費很長時間，同樣符合 iPhone 的交互特質。

然而在 Watch 上，「健康記錄」app 的功能被大幅削減和簡化了，但其結果正符合 Watch 的情境特質 - Watch 同樣是高度私人化的設備，且交互過程非常短暫，多數時候以「簡單一瞥」為主。在設計 Watch 版本時，我們的目標之一就是確保人們在一瞥之間即可獲取「今日進展」及「好友健身記錄」等關鍵信息。

如上所述，「平臺適配」的主要任務之一，就是面向目標平臺，對產品功能及操作的復雜度進行權衡與取舍，以適應平臺的情境特質。

而另一項主要任務，則是了解目標平臺所提供的獨特功能，并充分加以利用。

譬如對于 Watch，我們需要思考，「哪些功能是 Watch 所特有的呢？它可以追蹤你的運動，監測你的心率，定位你的地點；所有這些能力似乎都與‘健康記錄’高度相關」。于是當你思考應該為 Watch 版本添加哪些獨特的功能時，諸如「添加訓練項目」或「設定運動目標」等便是自然而然的事了。

再次強調，正如我們在第一步「平臺選擇」當中所了解的，只有充分考慮目標平臺的「情境」與「能力」，才能確保產品功能性與平臺之間的正確適配關系。

這也正是「平臺適配」的關鍵所在：對 app 的功能進行優先級調配，使其更符合目標平臺的情境特質；考慮必要的新功能，使其充分利用目標平臺的獨特能力。

以 Photoshop 為例。使用過 Mac 版本的人們都知道這是個體量龐大的 app，功能不計其數，你可以用它來做非常多的事情。

在嘗試將所有這些功能轉移到 iPhone 當中時，Adobe 做的非常漂亮。他們將繁雜的功能拆解到了三個不同的 app 當中，所有的操作方式都面向 iPhone 的短時交互特性進行了優化，同時他們還充分利用了 iPhone 平臺的獨特能力，例如直接在圖片編輯工具中融入了拍攝照片的功能。

再來看《紐約時報》。如今，在 iPhone、iPad 或是他們的網站上，你都可以讀到這份報紙。但在 Watch 版本的 app 中，你只能瀏覽到近期的一些新聞頭條；如果你被標題吸引，還可以瀏覽到這篇消息的一些概要。如果你希望看到全文，他們會引導你到 iPhone、iPad 或是網站當中進行閱讀；因為閱讀全文的行為已經不再是「短時交互」了，它并不符合 Watch 的使用情境。

跨平臺設計 - 風格協調

了解了如何基于設備的情境與能力來選擇目標平臺并進行適配，接下來我們需要對 app 的外觀風格及交互體驗進行定義。

談到風格與體驗，我們總會想到「一致性」這個概念。對于跨平臺設計來說，如何讓你的 app 在各個平臺之間保持和諧一致，這是非常重要的問題。

然而「一致」顯然不意味著「完全相同」。在 Apple，我們絕不會將 app 在某個平臺上的視覺與交互風格簡單地復制到另一個平臺當中。保持一致性的關鍵在于充分的協調與權衡。

你需要在兩個方面的一致性之間尋求平衡。

一方面，你需要保持品牌感知的一致性。這意味著當人們打開你的 app，他們應該能夠立即識別出你的品牌。品牌一致性令人們感到熟識，同時也是產品在不同平臺之間持續構建品牌信任感的基礎。

另一方面，你需要保持 app 與特定平臺風格的一致性。這意味著你需要遵從平臺提供的設計標準，使 app 具有平臺本地化的特征。特定平臺上的所有 app 都應該具備本地化的可識別性，否則用戶每使用一個新 app 都將要付出額外的學習成本與認知負荷。

在這兩類一致性之間實現平衡非常重要，且并非易事。這很可能是整個跨平臺設計流程當中最具挑戰性的任務。

Apple 提供的人機界面設計指南（Human Interface Guidelines，簡稱 HIG）在這里會起到重要的作用，你可以從中學到每個平臺的設計原則與標準，同時也會發現如何在標準框架內實現自己品牌的獨特風格。

以字體為例。Apple 為每個平臺都提供了經過特別優化的字體集。但這并不意味著你只能使用 San Francisco 或是類似風格的字體；你在更多時候是要從中了解每個平臺所適用的字號原則。

觀察以下三個平臺當中的正文字體，你會發現它們的尺寸與平臺視距有著密切的關系。我們通常會近距離查看 Watch 上的信息，譬如一英尺左右的樣子，因此其字號相對較小；而 iPhone 的常規視距則稍遠，其字號也相應地有所增加；至于 TV，正如我們在第一部分當中所述，其平均視距大約在十英尺左右，因此我們使用了非常大的字號，以確保字體在距離較遠時依然清晰可讀。

除了風格樣式，你還可以從 HIG 當中了解到關于系統控件與設計模式方面的使用標準。

以警告框（alert）為例，Apple 的每一個平臺都會提供這個控件，它們之間擁有一些共通的元素，例如一段描述文本及一到兩個行動按鈕；它們都會遮擋住下方的內容。但無論是描述文本的長度，還是按鈕的樣式，或是可點擊區域的尺寸，都會根據平臺的不同而有所調整。這樣既可以確保界面元素對于用戶來說是熟識的，同時也能在每個平臺當中實現最優的操作體驗。

再來看導航。如果需要在 Watch 當中返回上一級頁面，我可以點擊左上角的返回按鈕；在 iPhone 上也是同理。然而 TV 的界面卻不存在返回按鈕，因為遙控器本身就提供了返回鍵，無需在界面中畫蛇添足。

綜上所述，「風格協調」的核心任務在于，在你的品牌風格與平臺設計規范之間尋求平衡。一方面，你要確保品牌風格在不同平臺當中的感知一致性，使其被用戶所熟識和信任；另一方面，你要遵從平臺的規則與標準，以降低用戶的學習成本及認知負荷。

Ulysses 是個很棒的例子。無論你使用著 iPad、iPhone 還是 Mac 版本，都會發現他們大量采用了系統提供的標準化控件來構建頁面，包括導航欄、工具欄、搜索框、分隔視圖等等。而他們自己的品牌感知則深深地根植于其高度專注和便捷的寫作體驗當中。我個人會時常用到這款產品，實際上這篇講演就是在 Ulysses 當中起草的。

Streaks 也是同樣。打開 app，你可以立刻通過配色、字體和圖標等視覺元素，以及某些標志性的交互方式來識別其品牌。與此同時，Streaks 也非常得當地遵從著平臺的設計規范，例如對通知機制的合理運用，字號的搭配，不同語言環境中的本地化適配等等。

最后來看 Tinder。同樣，圖標、配色等視覺元素，以及標志性的橫掃交互，都使其很容易被人們所識別。而他們同時也良好地遵守著平臺的設計規范，其 UI 可以根據設備的不同而進行相應的調整，獨特的橫掃手勢從不會與平臺本地的交互方式相沖突。

歡迎關注作者的微信公眾號：「Beforweb」