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

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

一、關(guān)于小屏

Apple watch有兩種尺寸，分別是38mm（272px*340px）、42mm（312px*390px）。如何在如此小的屏幕上承載那么豐富的功能，其精妙的界面表現(xiàn)和框架設(shè)計很值得我們?nèi)W(xué)習(xí)。

1.1 Watch os空間結(jié)構(gòu)

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

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

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

頂層：在任意界面短按右側(cè)的按鍵調(diào)出DOCK欄，DOCK欄可以自定義最近使用或收藏的應(yīng)用；

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

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

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

1.2 應(yīng)用中心的布局

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

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

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

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

1.3 APP導(dǎo)航框架

Apple watch的app導(dǎo)航框架也很統(tǒng)一，主要有兩種方式：

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

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

不僅僅針對小屏設(shè)計，對于所有的界面設(shè)計都是如此。在同一個產(chǎn)品里，界面樣式不宜過多，統(tǒng)一操作語言，可以降低開發(fā)和用戶學(xué)習(xí)成本。

1.4 互動方式（User Interaction ）

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

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

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

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

二、關(guān)于場景

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

2.1 佩戴場景

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

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

根據(jù)場景和用戶行為特征，通過細分場景和轉(zhuǎn)移功能的設(shè)計方法，將功能進一步劃分。

• 細分場景：區(qū)分“行走”與“靜態(tài)”場景，根據(jù)功能特性來進行場景歸屬；
• 轉(zhuǎn)移功能：對于更復(fù)雜的功能，已經(jīng)不適合在apple watch上承載的，就交給手機端去實現(xiàn)。

功能劃分結(jié)果如下圖：

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

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

靜態(tài)場景下的功能（非抬手可見）：

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

2.2 閑置場景

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

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

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

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

三、關(guān)于用戶故事

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

3.1 梳理故事

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

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

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

3.2 故事轉(zhuǎn)化

根據(jù)用戶故事和需求痛點，將其轉(zhuǎn)化成為產(chǎn)品功能，以此確立產(chǎn)品功能范圍。

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

3.3 功能信息架構(gòu)

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

四、結(jié)語

本文的構(gòu)思框架來源于《用戶體驗要素》，用倒敘的方式講述了產(chǎn)品的表現(xiàn)層-框架層-結(jié)構(gòu)層-范圍層的相關(guān)內(nèi)容。

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

參考資料

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

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

本文由 @Rinoa?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議