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

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

一、關(guān)于小屏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.3 APP導(dǎo)航框架

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

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

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

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

1.4 互動(dòng)方式（User Interaction ）

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

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

（1）滾動(dòng)表冠，作為一個(gè)亮點(diǎn)功能，為更精確的控制和加速滾動(dòng)而設(shè)計(jì)；

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

二、關(guān)于場(chǎng)景

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

2.1 佩戴場(chǎng)景

佩戴場(chǎng)景的主要行為特征為：短暫互動(dòng)和快速掃視。

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

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

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

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

行走場(chǎng)景下的功能（抬手可見）：

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

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

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

2.2 閑置場(chǎng)景

閑置場(chǎng)景的主要行為特征為：弱互動(dòng)和短暫視線停留。

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

這類場(chǎng)景下的界面模式相對(duì)簡(jiǎn)單很多，主要為以下幾個(gè)模式；

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

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

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

3.1 梳理故事

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

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

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

3.2 故事轉(zhuǎn)化

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

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

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

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

四、結(jié)語

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

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

參考資料

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

書籍：《用戶故事地圖》、《用戶體驗(yàn)要素》

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

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