萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 實戰後才能發現的10個APPLE WATCH設計技巧

實戰後才能發現的10個APPLE WATCH設計技巧

   今天這篇的價值抵得上十篇理論性文章。作者的團隊為自家的Todolist軟件作Apple Watch做適配時總結了10個超實用的技巧,全都是從實戰過程中得到的,每一點都值得學習 >>>

  Apple Watch發布之後,我們的團隊立刻意識到這款新平台將和我們的Todoist形成絕妙組合。作為一款始終依附於用戶腕上的設備,Apple Watch可以使我們即刻訪問信息內容。

  伴隨著各種令人興奮的可能性,巨大的設計挑戰也隨之而來。我們從頭開始,時刻圍繞著Watch的三個設計主體思想進行探索:

  輕量

  整體

  個人

  和大家一樣,因為最初還沒有實際設備可用,我們當時只能在Xcode提供的模擬器中測試自己的app。模擬器自然可以精確的展示UI及流程方案,但我們心裡很清楚,不在實際環境中通過真實設備進行測試,“體驗設計”便無從談起。

  我們需要知道不恰當的功能設計致使用戶必須保持抬腕15秒所產生的挫敗感有多糟,我們需要知道在每天的真實情境當中哪些功能和信息是用戶在Watch上真正需要的,我們還需要知道以怎樣的形式組織信息才能真正做到“抬腕一瞥即可獲取”。

  本文中,我們將為各位分享的就是通過實際設備使用測試之後,我們得到了哪些感悟,同時又是怎樣重新思考最初的設計方案的。

實戰後才能發現的10個APPLE WATCH設計技巧 三聯

  1. 模擬器無法代替實際設備測試

  Xcode的模擬器自然是不錯的起點,也是開發流程當中必須用到的工具,但你必須知道有一些關鍵的東西是模擬器所無法提供的。

  首先,無論iPhone還是Watch,在真實世界當中我們都是使用單手或雙手來操作它們的。而通過鼠標或觸控板與Mac屏幕上的設備模擬器進行互動則完全是另外一種感覺了,你無法真的體驗產品,更談不到去設計體驗了。

  其次,Watch是腕上設備,無論是獲取信息還是進行互動,你都必須抬起手腕。保持抬腕的姿勢無需很久就會使人產生疲勞感,你在頭腦中設想的、在模擬器中還原和驗證的那些你自認為“很簡短”的交互流程,一旦放到Watch上面就未必真的有那麼輕量了。

  再者,Watch自身有其獨特的互動機制,包括數碼表冠、Force Touch和完全針對Watch屏幕設計的首屏app布局等等。在真實設備上使用了這些功能之後,我們才有了更清晰的認知,並開始思考怎樣將這些互動方式盡量無縫的融入自己的產品當中。

  2. Watch絕不是迷你iPhone,設計思維必須獨立

  為了將Todoist以正確的形式適配到Watch當中,我們一直在問自己:“腕上設備的核心價值是什麼?Watch版本的Todoist怎樣才能體現出這些核心價值?除了獨特的界面形式以外,哪些功能是用戶在Watch上真正需要的?” 通過思考這些問題,我們至少想明白了重要的一點,就是你不僅不能簡單粗暴的將iPhone版本的UI框架拷貝到Watch上,有時甚至連最基礎的功能架構都不能。對於稍顯復雜的app,Watch版本的核心功能很可能與iPhone上的完全不同。

  最終,我們移除了所有涉及到復雜交互流程的功能,只向用戶提供那些與今天或當前時刻緊密相關的信息。

  對於app當中任何一個需要操作的地方,我們都會反復考量其交互模式是否足夠簡單快捷。如果不是,我們會持續迭代並驗證,直到我們自己感覺它到位了。

  相比於其他平台,Apple Watch有著太多的獨特性,試著在實踐中找到並理解它們,然後針對這些特性來思考並迭代自己的產品方案。

  3. Glance的設計要真正做到“一瞥即可獲取”

  Glance視圖是Watch獨有的界面模式之一,用戶在表盤界面上滑即可喚出,用於快速呈現相關app當中簡短而重要的信息。Todoist的Glance視圖可以讓用戶了解當前還有多少事項有待處理,以及最近一個事項的具體內容。

  我們最初的設計方案確實能呈現這些信息,但是通過在實際設備上使用,我們發現內容的易讀性還是太差了,完全可以換套模板,更加充分的利用屏幕空間,使信息更易快速獲取,無需用戶去仔細的辨識文字。字號更大的待處理事項數量可以使注意力更加聚焦,新增的logo可以幫助用戶快速辨識當前Glance的所屬。

02-todoist-apple-watch-redesign-ux-ui.png

  對於Glance視圖來說,毫秒級的差異都可以在實際使用當中給人造成感知。

  4. App主界面是交互核心

  Glance是用戶主動從app獲取信息的最快捷途徑,其次便是app本身。實際使用過Watch之後,我們意識到app內部對於交互流程快捷度的要求比想象的更加苛刻,如果所需操作超過幾次點擊,我們就會傾向於拿出iPhone取而代之 – 保持抬腕姿勢幾秒鐘之後你就會產生這樣的欲望。所以app主界面的重要程度比我們此前所理解的更加重要,你必須盡可能的將最重要的信息和操作集中在這裡,而不是像iPhone上習慣的那樣提供一個導航列表讓用戶一層層去挖掘。

  在最初的版本中,我們捨不得丟棄任何東西,每個功能的權重都相同,結果就是一個層級導航列表擺在主界面。之後,我們還嘗試著把當時自認為是更重要的“添加事項”功能單獨放到了頂部。

03-todoist-apple-watch-redesign-ux-ui.png

  感覺怪怪的。雖然“添加事項”是iPhone版本當中的主要功能之一,但在Watch上它並不是。用戶在Watch上的首要目標是獲取信息而非創建內容。為了讓用戶在app主界面就能完成首要目標,我們重構了布局,將“今日”按鈕以及其中的信息更加突出的呈現出來,所剩任務數量的字色非常搶眼,有效的與其他次要信息和功能區分開來。用戶當前賬戶和點數信息被置於頂部,而在Watch上更加次要的功能譬如收件箱、項目等等都被下移。

  5. Force Touch很有用,要加以善用

  Force Touch,按壓屏幕的手勢,用來喚出和當前界面相關的情境菜單。實際體驗之後,我們意識到可以在Todoist當中通過這種方式為用戶提供一些“相關”的次要功能,同時還不會占用默認用來展示最重要信息和功能的寶貴空間。

  最終我們決定通過Force Touch喚出前面提到的“添加事項”功能,使其仍然可用,但不會像之前那樣占據最重要的位置了。用戶在app中的任何地方都可以通過按壓來喚出這個功能,因為新建事項的動機可能在任何環節產生,我們不希望用戶必須導航回主界面才能操作。

04-todoist-apple-watch-redesign-ux-ui.png

  6. 妥協是不可避免的,要控制優先級

  極小的屏幕尺寸以及短暫的人機交互時間限制會迫使你抉擇信息和功能的優先級。

  最初的版本中,我們中規中矩的設計了一個簡單的事項列表,用戶點擊其中的某一個事項便可喚出相關的操作。對這樣一個微小的交互流程,我們進行了很多次探討,目的是搞清楚這個環節裡最重要的事情到底是什麼 – 盡量完整的展示事項內容更加重要,還是犧牲一部分內容來換取更快捷的互動方式重要些?我們相信,相比於不完整的內容,多出一步額外的操作才是真正讓人焦躁的。想想看那些用Todoist做購物清單的用戶,通常需要連續勾掉若干個條目,如果每次都要點擊進入下層界面進行操作然後再返回列表,真是件痛苦的事。

  我們最終決定采用能幫用戶快速完成任務的方式,也就是在列表裡每個事項的右側直接放置一個復選框;當然,用戶依然可以點擊內容本身來進入詳情界面查看更多相對次要的選項。

05-todoist-apple-watch-redesign-ux-ui.png

  7. 最重要的操作必須在首屏

  使用表冠進行滾屏是Watch當中獨特的交互方式之一,很具創意,能夠幫用戶在小屏空間中查看更多的內容。但不可否認的是,滾動操作再精巧再爽滑,也是會延長人機互動時長的。

  在測試第一版設計方案的時候,我們發現,把操作按鈕放在內容末尾非常不便於快速操作。特別對於那些內容稍長的事項,操作按鈕必然會被頂到所謂的“折線以下”,用戶不得不將手指移到表冠上進行滾動才能看到。雖然是很短暫的動作,但仍然會帶來不順暢的體驗。我們嘗試了幾種方案,最終決定把兩個按鈕置頂,最大程度的維護其易達性。

06-todoist-apple-watch-redesign-ux-ui.png

  8. 配色和圖標的使用要有明確的目的性

  我們希望Watch版本的Todoist仍然能體現出iPhone版本的一些外觀和感覺,包括品牌配色和圖標形象。對於38mm的小屏幕,這不太容易。

  我們需要針對Watch的小屏幕特性對圖標進行必要的重設計,包括品牌配色等元素也要潛移默化的貫穿在Watch app當中,同時還必須確保界面和元素的可讀

copyright © 萬盛學電腦網 all rights reserved