HIG 為 Human Interface Guidelines 的縮寫,是 Apple 官方提供的設計指導。「HIG for macOS 解讀」專題是我對 HIG 中 macOS 部分的研究。從相對冷門的 macOS 設計中,我們或許能更好地理解主流的移動端設計。
設計原則就像是設計的憲法。要充分理解設計原則,就要從其提出的背景、面向的平臺、用戶的構成等方面聊起。現在,就讓我們對 macOS 的設計原則一探究竟。
macOS 有四項設計原則:
- 靈活定制 Flexible
- 全面展現 Expansive
- 擴展賦能 Capable
- 凝神專注 Focused
1. 靈活定制 Flexible
People expect macOS apps to be intuitive, while simultaneously adaptable to their workflow through customization and flexibility. Many apps offer configurable preferences, customizable interfaces, and alternate ways of completing tasks. Windows can often be resized and interface elements hidden or repositioned. Tasks can be initiated from toolbars, menus, controls, keyboard shortcuts, the Touch Bar, accessibility features, and more. A flexible app facilitates learning through discoverability.
相對于移動端,桌面端的 UI 可定制度更高。常見的定制場景如下:
調節偏好設置:
更改窗口尺寸、位置:
自定義工具欄:
創建、執行自動操作:
定制觸控欄(Touch Bar):
需要注意的是,這里的定制是以生產力為訴求點的,目的是創建一個更適合用戶自己的工作流(workflow),強調效率。但在移動端,定制則更多以「彰顯個性/身份」為訴求點(如換膚、會員掛件等),強調感受。這一不同,源自桌面端與移動端的一項重要差異:桌面端的使用場景更多是「工作」狀態,而移動端則是「娛樂/生活」狀態。
另外,對于移動端中的 iPadOS,Apple 將其定位為「未來的電腦系統[1]」(同時也將 iPad 描述為「生產力工具」)。因此,我們會在 iPadOS 上看到越來越多由 macOS 進化而來的交互形態。讓我們拭目以待。
更高的可定制度,會帶來更高的復雜度。對此,Apple 推薦運用啟發性(discoverability)高的設計手段,引導用戶從新手用戶向熟練用戶(甚至高級用戶)晉升。關于用戶引導的設計,我們日后再談。
2. 全面展現 Expansive
Large, high-resolution displays are typical for most Mac users, and people often extend their workspace by connecting additional displays. Apps can leverage this expansiveness and provide value by utilizing a wide range of interface components—like tabs, sidebars, sheets, and panels—and supporting immersive features like full-screen mode.
面對復雜任務,我們常常在多應用、多文檔、多視圖間切換(在 macOS 中使用 Mission Control 在所有已打開的窗口、桌面空間、全屏應用和 Split View 空間中切換)。得益于桌面電腦更充裕的顯示空間(更大的屏幕、額外的顯示設備),macOS 是復雜任務、沉浸體驗的首選平臺。
展示空間越大,設計的可發揮空間也就越大。由此,桌面端的設計就比移動端更自由,同樣的情況也存在于 iPad 與 iPhone 間、iPhone 與 Apple Watch 間。
3. 擴展賦能 Capable
Macs are extremely capable in terms of hardware and software. Apps can harness this power to offer an extensive range of features and workflows that meet a wide variety of simple, advanced, and niche user needs.
除了充裕的屏幕空間,桌面電腦還可以外接豐富的軟硬件。最基礎的外接設備就是鍵盤與鼠標了。除此之外,普通用戶還常常外接移動硬盤、麥克風;對于插畫師,還可以外接數位板;對于音樂制作人,更可以外接 MIDI……
外接設備的意義主要在于:
- 增加信息的輸入輸出渠道(如外接投影儀,能獲得更佳的展示效果)
- 簡化屏幕上的復雜交互(如外接數位板后,插畫師就可以獲得像在傳統紙張上的繪畫體驗)
- 多平臺無縫銜接(如 Apple 的「接力」)
剛剛提到的「接力」(Handoff)也屬于外接的一種,只不過這種外接是無線的。隨著技術的發展,越來越多的外接將會以無線(甚至是云)的方式實現。
如此這般豐富的外接軟硬件,彰顯了 macOS 強大的可擴展性。充分利用這一點,便能構建一個良好的桌面生態。
4. 凝神專注 Focused
macOS is designed to keep the current task clear and in focus. Visual contrast, translucency, and a large drop shadow make it easy to differentiate the active window from inactive windows. Interfaces defer to content and related controls. Throughout the system, adornments are subtle and appropriate.
上文提到,充裕的屏幕空間更適合執行復雜任務,或運行沉浸式體驗的應用。但這并不是說小屏幕就不好,在某些情況下,小屏幕會讓用戶更加專注。只不過,大屏幕(多屏幕)環境下,設計師也可以通過設計手段來達到「專注」的效果,如:
深色模式有助于用戶專注地開展工作,因為內容會較為顯眼,而顏色加深的控制項和窗口則會隱入背景之中。
Ulysses 提供了為專注而生的「打字機模式[2]」:
我們先簡要回顧一下 Apple 各平臺的設計原則。
macOS
- 靈活定制 Flexible
- 全面展現 Expansive
- 擴展賦能 Capable
- 凝神專注 Focused
iOS
- 依從 Deference
- 清晰 Clarity
- 縱深 Depth
watchOS
- 交互輕量 Lightweight interactions
- 軟硬件一體 Holistic design
- 面向個人 Personal communication
tvOS
- 自在連接 Connected
- 清晰易懂 Clear
- 沉浸體驗 Immersive
先說共通點,四大平臺均對可用性有著一致追求,體現在:
- macOS 的 focused
- iOS 的所有原則
- watchOS 的 lightweight interactions
- tvOS 的 clear
現在來說各平臺的不同點及原因。
macOS 面向復雜任務、專業用戶,故對應用的功能數量及設計表現要求是最高的,這里不再重復闡述。
iOS 是應用范圍最廣的操作系統,故其用戶人群構成也更加地豐富多樣。無論是專家、還是小白,都會使用 iOS 設備。因此,iOS 設備在產品設計的易學性、元素表現的可供性(affordance)上要求會比較高。
watchOS 是為可穿戴設備準備的操作系統。對于基本隨時貼身的智能設備,Apple 推崇「Calm Tech[3]」。在物理性質上,強調「軟硬件一體」;在交互表達上,規避信息過載、注重信息安全。
tvOS 最大的特色,就是它是遠程操縱的,面向家庭(多人)的,場景更多在于影音娛樂。故其設計更多在解決「如何讓用戶更自在地享受」這一問題。從這個角度上來說,tvOS 平臺內的設計,可以更多地與傳統游戲設備進行對比分析。
我們再來看看 Material Design(后簡稱為「MD」)的設計原則。Google 官方將其分為「設計目標」及「設計準則」兩部分。
設計目標 Goals:
- 構建 Create
- 整合 Unify
- 定制 Customize
設計準則 Principles:
- 隱喻作為指導 Material is the metaphor
- 借力平面設計技法 Bold, graphic, intentional
- 動畫也是信息 Motion provides meaning
- 張弛有度,定制自由 Flexible foundation
- 多平臺 Cross-platform
可以看到,Google 對于創建「通用型設計語言」(universal design language)的野心已表現得相當明顯。同 Apple「就設備論事」的理念不同,Google 認為體驗、設計、代碼是可以被統一整合的。這是 Google 和 Apple 的重要區別之一。
不過 Apple 也在近來持續推進著「Project Catalyst」,以向開發者提供將 iPad app 帶入 Mac macOS 的方案。從這點看,Apple 也有對「大一統」的追求,只不過其驅動力是出于充實 macOS 較為匱乏的應用生態,而不是出于底層設計邏輯。
在 MD 的設計準則中,最有特色的便是對隱喻(metaphor)的詮釋了。大范圍使用的卡片、多層級的陰影系統、吸引眼球的轉場動畫,這些都是 MD 最具識別力的表現手法。另外,相對于 Apple 平臺,MD 更加強調對 UI 中 Z 軸(高度)的運用。
參考資料:
- [1] Apple 近來不斷為 iPadOS 帶來了更多高級交互形式:https://www.apple.com/cn/ipados/
- [2] 在該模式下,應用僅會高亮寫作者當前正在編輯的段落,并實現編輯行自動定位:https://ulysses.app
- [3] 由美國計算機科學家 Mark Weiser 于 1995年首次提出,其強調技術應該以安靜、不引人注目的方式,作用于用戶的外圍注意力,以賦能用戶:https://www.oreilly.com/library/view/calm-technology/9781491925874/
歡迎關注作者微信公眾號:「FXDesign」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 3 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓