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

11 評論 10477 瀏覽 107 收藏 14 分鐘

作為可穿戴設備的代表,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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問有沒有原型下載鏈接啊

    來自湖北 回復
  2. 您好,請問您的微信是多少呀?我想與您溝通轉載事宜。

    來自廣東 回復
    1. L-photography

      來自四川 回復
  3. 閑置場景應該還有一些互動方式,例如:
    語音助手功能。通過語音進行無操作交互,通過Siri查詢天氣、路線、股票信息,語音播報通知、短信、郵件等。

    (由于Apple Watch沒有擴聲器,一是可以聯動iPhone,使用iPhone擴聲器播放;二是可以聯動Airpods和其他藍牙耳機,借助藍牙耳機輸出互動)

    來自上海 回復
    1. 嗯呢,很好的補充~這塊確實有點忽略了 :mrgreen:

      來自四川 回復
  4. 寫的非常好,圖文詳略得當。內容與實踐一一結合,從實踐出發。思路清晰,分析有理。期待更多的知識分享。

    來自上海 回復
  5. 這個不錯

    來自陜西 回復
  6. 很棒

    來自浙江 回復
    1. ?? 繼續努力~

      來自四川 回復
  7. 分析的很優秀

    來自江蘇 回復
    1. 保持優秀 ??

      來自四川 回復