10-apple-watch-design-skills-1

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

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

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

  • 輕量
  • 整體
  • 個人

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

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

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

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

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當中,同時還必須確保界面和元素的可讀、易讀性。我們復用了iPhone版本中那些已經被用戶們熟識的圖標,增加了描邊的線寬,確保它們在黑色小屏背景上具有足夠高的對比度和清晰度。

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

9. 通過少量而精細的動效提升體驗

無論在什么平臺,如果設計的得當,動效都可以使互動方式變得更加容易理解,體驗也更加豐富愉悅。所謂“得當”,不僅包括形式,恰當的數量也很重要,太多動效充斥在界面當中只會使互動流程變慢,讓人覺得乏味 – 對于Apple Watch來說,這是尤其需要注意的。

我們決定在Watch版本的Todoist當中謹慎行事,最終只有兩處用到了定制化的動效。第一處是當你在任務列表中勾掉某個事項時,復選框會被背景色逐漸填充,對勾出現,然后任務內容置灰,最后整條事項消失。這一套短暫而精細的動效流程可以清晰準確的將完成狀態傳達給用戶,讓他們知道自己的點擊行為達到了預期當中的結果。第二處動效就是今日任務的空狀態視圖,一個很具成就感的大勾,用戶在完成了當天所有的事項之后就會看到。

08-todoist-apple-watch-redesign-ux-ui.gif

10. 局限

初代Apple Watch帶來的設計與技術局限也是我們不得不面對的,例如在Glance視圖中顯示靜態圖片的問題,或是缺乏定制化的手勢運用等等。此外,目前所有的第三方app只能作為iPhone app的擴展存在,這直接影響了Watch app自身的性能,跑起來很慢。

不過,Apple很快就會為第三方開發者們帶來更多令人興奮的可能性,譬如WWDC帶來的watchOS 2將支持本地化app等等一系列好消息。這就意味著不久之后我們便能打造出獨立于iPhone的、速度更快的Watch app,并且能夠運用到Watch當中更多的軟、硬件接口為用戶打造更加豐富的體驗,包括Taptic的調用,以及將第三方app信息直接輸出到表盤的Complication當中,等等。

我們一直保持著興奮,無論是現在這樣面向新平臺進行探索和實踐,還是不久的將來更多令人興奮的可能性變為現實的時候,我們都將在可穿戴設備與生產力結合的道路上走下去。說到最實際的,我們將繼續研究、迭代、驗證,使我們的Todoist能更好的利用Watch的特性,幫用戶更加輕松快捷的完成日常生活中的重要任務。

【Apple Watch最佳精品好文推薦】

譯文地址:beforweb

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量96萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏