從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-最小化信息-保護一定程度的隱私,快速獲?。挥脩羰滞筇Ц呋螯c擊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協議
請問有沒有原型下載鏈接啊
您好,請問您的微信是多少呀?我想與您溝通轉載事宜。
L-photography
閑置場景應該還有一些互動方式,例如:
語音助手功能。通過語音進行無操作交互,通過Siri查詢天氣、路線、股票信息,語音播報通知、短信、郵件等。
(由于Apple Watch沒有擴聲器,一是可以聯動iPhone,使用iPhone擴聲器播放;二是可以聯動Airpods和其他藍牙耳機,借助藍牙耳機輸出互動)
嗯呢,很好的補充~這塊確實有點忽略了
寫的非常好,圖文詳略得當。內容與實踐一一結合,從實踐出發。思路清晰,分析有理。期待更多的知識分享。
這個不錯
很棒
?? 繼續努力~
分析的很優秀
保持優秀 ??