從Watch OS 4.0 學習小屏設備的交互設計模式

作為可穿戴設備的代表，Apple watch在我們的生活已經非常普及了。通過這個設備，我們可以實現很多普通手表所不具備的功能，它究竟是如何實現的呢，讓我們看看筆者是怎么說的吧：

自2015年Apple Watch Series 1發售以來，目前已經經歷了4代，可穿戴設備已經逐步融入我們的生活。而這種小屏又始終戴在手腕上的設備，交互方式也有所不同。本文將總結出一些基礎理論和方法，為一些小屏設備的設計提供思路。筆者將從以下幾個方面來說明其設計方法：

一、關于小屏

Apple watch有兩種尺寸，分別是38mm（272px*340px）、42mm（312px*390px）。如何在如此小的屏幕上承載那么豐富的功能，其精妙的界面表現和框架設計很值得我們去學習。

1.1 Watch os空間結構

通過幾天的親身使用體驗發現，Apple watch的主要有5大功能模塊：表盤、應用中心、控制中心、通知中心、DOCK欄（最近或收藏）。

采用明確的模塊劃分，每屏只展示一類信息，并利用屏幕邊緣手勢或物理按鍵來觸發隱藏的功能。

設計師利用了Z軸的空間布局，將幾個功能模塊合理的分布：

頂層：在任意界面短按右側的按鍵調出DOCK欄，DOCK欄可以自定義最近使用或收藏的應用；

中間層：在“表盤”狀態下，上拉調出“控制中心”，下拉調出“通知中心”，和手機一致；

底層：可以理解為home頁，包含“表盤”和“應用中心”兩個狀態，短按表冠進行切換；

tips：當x、y平面空間不夠時，可以向z軸方向借空間。

1.2 應用中心的布局

很值得一提的是Apple watch應用中心的布局方式，設計師打破了常規的宮格或卡片式布局方式，而是采用正六邊形排列法：每個APP icon周圍都圍著6個icon，且icon的尺寸大小從屏幕中心向周圍逐漸遞減。這很好地解決了屏幕小，但內容無限多的情況。

這個設計的原理也很有意思，在此對設計師的腦洞可以說是很佩服了。

原理1：“開普勒猜想”，在每個球大小相同的情況下，沒有任何裝球方式的「密度」比面心立方堆積法要高。

原理2：挪威數學家Axel Thue將開普勒猜想運用到二維平面，正六邊形排列法（每個球旁邊都圍六顆球的排列法）是平面上密度最高的裝球法。

1.3 APP導航框架

Apple watch的app導航框架也很統一，主要有兩種方式：

Hierarchical（分層級）：分層式導航布局，也就是列表，豎直方向滑動（或滾動表冠）進行切換，能容納的內容較多，方便后期擴展。

Page-based（分頁面）：基于頁面的導航布局，也就是整頁卡片，水平方向滑動進行切換，能容納的內容較少，需要對頁面數量做限制。

不僅僅針對小屏設計，對于所有的界面設計都是如此。在同一個產品里，界面樣式不宜過多，統一操作語言，可以降低開發和用戶學習成本。

1.4 互動方式（User Interaction ）

在界面手勢方面，引入邊緣交互和Force Touch，既不占用當前屏幕的空間，又能快速調出隱藏功能，極大地簡化了界面信息。

Apple Watch旨在模糊設備和軟件之間的界限。例如，Force Touch和Digital Crown讓用戶可以與屏幕內容無縫交互。應用程序應該增強用戶對硬件和軟件的整體設計感。在物理按鍵方面，主要有以下的操作方式：

（1）滾動表冠，作為一個亮點功能，為更精確的控制和加速滾動而設計；

（2）其它的按鍵操作和手機類似，用戶容易接受和記憶。

二、關于場景

Apple Watch主要可以分為兩大使用場景：佩戴場景和閑置場景。兩類場景的互動方式有很大差別，界面的設計模式也有所差異。通過場景分析，我們可以進一步了解產品框架和功能布局。

2.1 佩戴場景

佩戴場景的主要行為特征為：短暫互動和快速掃視。

• 短暫互動：手腕翻轉、手臂抬起的動作只能保持幾秒鐘，人與watch互動的時間控制在幾秒鐘內才是比較舒適和自然的狀態；
• 快速掃視：手腕保持抬起的時間為幾秒，而人在行進過程中視線不易聚焦，所以人眼大多數情況都是快速掃視watch屏幕。

根據場景和用戶行為特征，通過細分場景和轉移功能的設計方法，將功能進一步劃分。

• 細分場景：區分“行走”與“靜態”場景，根據功能特性來進行場景歸屬；
• 轉移功能：對于更復雜的功能，已經不適合在apple watch上承載的，就交給手機端去實現。

功能劃分結果如下圖：

行走場景下的功能（抬手可見）：

• 表盤：最基礎也是最重要的功能，翻轉手腕即可看見；
• 通知：突發功能；Short Look-最小化信息-保護一定程度的隱私，快速獲取；用戶手腕抬高或點擊Short Look，展示Long Look——提供了更多詳細信息和功能；
• Glance：2.0及以前的功能，與手機運行的APP關聯，最小化關鍵信息；（可以思考一下）
• 輔助操作：手機當前打開的功能，便于輔助操控手機。

靜態場景下的功能（非抬手可見）：

• 應用中心：在表盤界面短按表冠調出，包含所有已安裝的watch APP，點擊icon即可打開相應APP；
• 控制中心：在表盤頁面下邊緣向上滑動調出，包含常用的功能開關；
• 通知中心：在表盤頁面上邊緣向下滑動調出，包含未查看、處理的通知列表；
• DOCK欄：按下側邊按鈕調出，包含收藏或者最近使用過的APP界面縮略圖，最多10個。

2.2 閑置場景

閑置場景的主要行為特征為：弱互動和短暫視線停留。

• 弱互動：弱互動甚至不互動，少數場景下需要有反饋，如充電、通知等；
• 短暫的視線停留：人與設備距離較近的情況下，有較短的視線停留。

這類場景下的界面模式相對簡單很多，主要為以下幾個模式；

• Nightstand模式：也叫“床頭鐘”模式，在充電且立放的時候觸發。界面內容包括：充電狀態、通知小紅點（有通知時出現）、時間、日期、鬧鐘（設置了鬧鐘時出現）；幾秒后息屏，感應到震動則立即亮屏；
• 充電-普通模式：充電且平放的時候，僅顯示充電狀態，數秒后消失（升級到4.3版本之后，顯示的信息類別和Nightstand一致，只是排列方式不同）；
• 非充電模式：真正的閑置狀態，用戶沒有操作則一直保持息屏。

三、關于用戶故事

通過用戶故事分析，我們可以確立產品的功能范圍，以用戶為中心來進行設計。

3.1 梳理故事

首先進行“骨干故事”梳理，可以先分兩級故事線，如果故事顆粒度還不夠，可以繼續細分三級故事等等。

一級故事：一級故事一般以時間線為順序，故事的的顆粒度比較大；

二級故事：二級故事是一級故事的細分，故事顆粒較小，不一定要按照嚴格的時間順序；然后對故事細節和需求痛點進行分析，找到一些機會點，轉化成功能。

3.2 故事轉化

根據用戶故事和需求痛點，將其轉化成為產品功能，以此確立產品功能范圍。

當然，功能范圍不僅局限于用戶故事，也需要結合市場需要、商業模式等等因素來綜合考慮，不過本文僅圍繞用戶故事地圖來展開思考。

3.3 功能信息架構

最后簡單的梳理來以下信息架構，更加直觀地了解Apple watch的功能范圍。

四、結語

本文的構思框架來源于《用戶體驗要素》，用倒敘的方式講述了產品的表現層-框架層-結構層-范圍層的相關內容。

這也是我第一次發表文章，還有很多思考或表達不足的地方，也希望有更多感興趣的小伙伴進行探討和交流。

參考資料

watch os人機交互指南：https://developer.apple.com/design/human-interface-guidelines/watchos/overview/themes/

書籍：《用戶故事地圖》、《用戶體驗要素》

 

本文由 @Rinoa 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議