高價(jià)值好文！實(shí)戰(zhàn)后才能發(fā)現(xiàn)的10個(gè)Apple Watch設(shè)計(jì)技巧

編者按：今天這篇的價(jià)值抵得上十篇理論性文章。作者的團(tuán)隊(duì)為自家的Todolist軟件作Apple Watch做適配時(shí)總結(jié)了10個(gè)超實(shí)用的技巧，全都是從實(shí)戰(zhàn)過程中得到的，每一點(diǎn)都值得學(xué)習(xí) >>>

Apple Watch發(fā)布之后，我們的團(tuán)隊(duì)立刻意識(shí)到這款新平臺(tái)將和我們的Todoist形成絕妙組合。作為一款始終依附于用戶腕上的設(shè)備，Apple Watch可以使我們即刻訪問信息內(nèi)容。

伴隨著各種令人興奮的可能性，巨大的設(shè)計(jì)挑戰(zhàn)也隨之而來。我們從頭開始，時(shí)刻圍繞著Watch的三個(gè)設(shè)計(jì)主體思想進(jìn)行探索：

• 輕量
• 整體
• 個(gè)人

和大家一樣，因?yàn)樽畛踹€沒有實(shí)際設(shè)備可用，我們當(dāng)時(shí)只能在Xcode提供的模擬器中測(cè)試自己的app。模擬器自然可以精確的展示UI及流程方案，但我們心里很清楚，不在實(shí)際環(huán)境中通過真實(shí)設(shè)備進(jìn)行測(cè)試，“體驗(yàn)設(shè)計(jì)”便無從談起。

我們需要知道不恰當(dāng)?shù)墓δ茉O(shè)計(jì)致使用戶必須保持抬腕15秒所產(chǎn)生的挫敗感有多糟，我們需要知道在每天的真實(shí)情境當(dāng)中哪些功能和信息是用戶在Watch上真正需要的，我們還需要知道以怎樣的形式組織信息才能真正做到“抬腕一瞥即可獲取”。

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

1. 模擬器無法代替實(shí)際設(shè)備測(cè)試

Xcode的模擬器自然是不錯(cuò)的起點(diǎn)，也是開發(fā)流程當(dāng)中必須用到的工具，但你必須知道有一些關(guān)鍵的東西是模擬器所無法提供的。

首先，無論iPhone還是Watch，在真實(shí)世界當(dāng)中我們都是使用單手或雙手來操作它們的。而通過鼠標(biāo)或觸控板與Mac屏幕上的設(shè)備模擬器進(jìn)行互動(dòng)則完全是另外一種感覺了，你無法真的體驗(yàn)產(chǎn)品，更談不到去設(shè)計(jì)體驗(yàn)了。

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

再者，Watch自身有其獨(dú)特的互動(dòng)機(jī)制，包括數(shù)碼表冠、Force Touch和完全針對(duì)Watch屏幕設(shè)計(jì)的首屏app布局等等。在真實(shí)設(shè)備上使用了這些功能之后，我們才有了更清晰的認(rèn)知，并開始思考怎樣將這些互動(dòng)方式盡量無縫的融入自己的產(chǎn)品當(dāng)中。

2. Watch絕不是迷你iPhone，設(shè)計(jì)思維必須獨(dú)立

為了將Todoist以正確的形式適配到Watch當(dāng)中，我們一直在問自己：“腕上設(shè)備的核心價(jià)值是什么？Watch版本的Todoist怎樣才能體現(xiàn)出這些核心價(jià)值？除了獨(dú)特的界面形式以外，哪些功能是用戶在Watch上真正需要的？” 通過思考這些問題，我們至少想明白了重要的一點(diǎn)，就是你不僅不能簡單粗暴的將iPhone版本的UI框架拷貝到Watch上，有時(shí)甚至連最基礎(chǔ)的功能架構(gòu)都不能。對(duì)于稍顯復(fù)雜的app，Watch版本的核心功能很可能與iPhone上的完全不同。

最終，我們移除了所有涉及到復(fù)雜交互流程的功能，只向用戶提供那些與今天或當(dāng)前時(shí)刻緊密相關(guān)的信息。

對(duì)于app當(dāng)中任何一個(gè)需要操作的地方，我們都會(huì)反復(fù)考量其交互模式是否足夠簡單快捷。如果不是，我們會(huì)持續(xù)迭代并驗(yàn)證，直到我們自己感覺它到位了。

相比于其他平臺(tái)，Apple Watch有著太多的獨(dú)特性，試著在實(shí)踐中找到并理解它們，然后針對(duì)這些特性來思考并迭代自己的產(chǎn)品方案。

3. Glance的設(shè)計(jì)要真正做到“一瞥即可獲取”

Glance視圖是Watch獨(dú)有的界面模式之一，用戶在表盤界面上滑即可喚出，用于快速呈現(xiàn)相關(guān)app當(dāng)中簡短而重要的信息。Todoist的Glance視圖可以讓用戶了解當(dāng)前還有多少事項(xiàng)有待處理，以及最近一個(gè)事項(xiàng)的具體內(nèi)容。

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

對(duì)于Glance視圖來說，毫秒級(jí)的差異都可以在實(shí)際使用當(dāng)中給人造成感知。

4. App主界面是交互核心

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

在最初的版本中，我們舍不得丟棄任何東西，每個(gè)功能的權(quán)重都相同，結(jié)果就是一個(gè)層級(jí)導(dǎo)航列表擺在主界面。之后，我們還嘗試著把當(dāng)時(shí)自認(rèn)為是更重要的“添加事項(xiàng)”功能單獨(dú)放到了頂部。

感覺怪怪的。雖然“添加事項(xiàng)”是iPhone版本當(dāng)中的主要功能之一，但在Watch上它并不是。用戶在Watch上的首要目標(biāo)是獲取信息而非創(chuàng)建內(nèi)容。為了讓用戶在app主界面就能完成首要目標(biāo)，我們重構(gòu)了布局，將“今日”按鈕以及其中的信息更加突出的呈現(xiàn)出來，所剩任務(wù)數(shù)量的字色非常搶眼，有效的與其他次要信息和功能區(qū)分開來。用戶當(dāng)前賬戶和點(diǎn)數(shù)信息被置于頂部，而在Watch上更加次要的功能譬如收件箱、項(xiàng)目等等都被下移。

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

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

最終我們決定通過Force Touch喚出前面提到的“添加事項(xiàng)”功能，使其仍然可用，但不會(huì)像之前那樣占據(jù)最重要的位置了。用戶在app中的任何地方都可以通過按壓來喚出這個(gè)功能，因?yàn)樾陆ㄊ马?xiàng)的動(dòng)機(jī)可能在任何環(huán)節(jié)產(chǎn)生，我們不希望用戶必須導(dǎo)航回主界面才能操作。

6. 妥協(xié)是不可避免的，要控制優(yōu)先級(jí)

極小的屏幕尺寸以及短暫的人機(jī)交互時(shí)間限制會(huì)迫使你抉擇信息和功能的優(yōu)先級(jí)。

最初的版本中，我們中規(guī)中矩的設(shè)計(jì)了一個(gè)簡單的事項(xiàng)列表，用戶點(diǎn)擊其中的某一個(gè)事項(xiàng)便可喚出相關(guān)的操作。對(duì)這樣一個(gè)微小的交互流程，我們進(jìn)行了很多次探討，目的是搞清楚這個(gè)環(huán)節(jié)里最重要的事情到底是什么 - 盡量完整的展示事項(xiàng)內(nèi)容更加重要，還是犧牲一部分內(nèi)容來換取更快捷的互動(dòng)方式重要些？我們相信，相比于不完整的內(nèi)容，多出一步額外的操作才是真正讓人焦躁的。想想看那些用Todoist做購物清單的用戶，通常需要連續(xù)勾掉若干個(gè)條目，如果每次都要點(diǎn)擊進(jìn)入下層界面進(jìn)行操作然后再返回列表，真是件痛苦的事。

我們最終決定采用能幫用戶快速完成任務(wù)的方式，也就是在列表里每個(gè)事項(xiàng)的右側(cè)直接放置一個(gè)復(fù)選框；當(dāng)然，用戶依然可以點(diǎn)擊內(nèi)容本身來進(jìn)入詳情界面查看更多相對(duì)次要的選項(xiàng)。

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

使用表冠進(jìn)行滾屏是Watch當(dāng)中獨(dú)特的交互方式之一，很具創(chuàng)意，能夠幫用戶在小屏空間中查看更多的內(nèi)容。但不可否認(rèn)的是，滾動(dòng)操作再精巧再爽滑，也是會(huì)延長人機(jī)互動(dòng)時(shí)長的。

在測(cè)試第一版設(shè)計(jì)方案的時(shí)候，我們發(fā)現(xiàn)，把操作按鈕放在內(nèi)容末尾非常不便于快速操作。特別對(duì)于那些內(nèi)容稍長的事項(xiàng)，操作按鈕必然會(huì)被頂?shù)剿^的“折線以下”，用戶不得不將手指移到表冠上進(jìn)行滾動(dòng)才能看到。雖然是很短暫的動(dòng)作，但仍然會(huì)帶來不順暢的體驗(yàn)。我們嘗試了幾種方案，最終決定把兩個(gè)按鈕置頂，最大程度的維護(hù)其易達(dá)性。

8. 配色和圖標(biāo)的使用要有明確的目的性

我們希望Watch版本的Todoist仍然能體現(xiàn)出iPhone版本的一些外觀和感覺，包括品牌配色和圖標(biāo)形象。對(duì)于38mm的小屏幕，這不太容易。

我們需要針對(duì)Watch的小屏幕特性對(duì)圖標(biāo)進(jìn)行必要的重設(shè)計(jì)，包括品牌配色等元素也要潛移默化的貫穿在Watch app當(dāng)中，同時(shí)還必須確保界面和元素的可讀、易讀性。我們復(fù)用了iPhone版本中那些已經(jīng)被用戶們熟識(shí)的圖標(biāo)，增加了描邊的線寬，確保它們?cè)诤谏∑帘尘吧暇哂凶銐蚋叩膶?duì)比度和清晰度。

9. 通過少量而精細(xì)的動(dòng)效提升體驗(yàn)

無論在什么平臺(tái)，如果設(shè)計(jì)的得當(dāng)，動(dòng)效都可以使互動(dòng)方式變得更加容易理解，體驗(yàn)也更加豐富愉悅。所謂“得當(dāng)”，不僅包括形式，恰當(dāng)?shù)臄?shù)量也很重要，太多動(dòng)效充斥在界面當(dāng)中只會(huì)使互動(dòng)流程變慢，讓人覺得乏味 - 對(duì)于Apple Watch來說，這是尤其需要注意的。

我們決定在Watch版本的Todoist當(dāng)中謹(jǐn)慎行事，最終只有兩處用到了定制化的動(dòng)效。第一處是當(dāng)你在任務(wù)列表中勾掉某個(gè)事項(xiàng)時(shí)，復(fù)選框會(huì)被背景色逐漸填充，對(duì)勾出現(xiàn)，然后任務(wù)內(nèi)容置灰，最后整條事項(xiàng)消失。這一套短暫而精細(xì)的動(dòng)效流程可以清晰準(zhǔn)確的將完成狀態(tài)傳達(dá)給用戶，讓他們知道自己的點(diǎn)擊行為達(dá)到了預(yù)期當(dāng)中的結(jié)果。第二處動(dòng)效就是今日任務(wù)的空狀態(tài)視圖，一個(gè)很具成就感的大勾，用戶在完成了當(dāng)天所有的事項(xiàng)之后就會(huì)看到。

10. 局限

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

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

我們一直保持著興奮，無論是現(xiàn)在這樣面向新平臺(tái)進(jìn)行探索和實(shí)踐，還是不久的將來更多令人興奮的可能性變?yōu)楝F(xiàn)實(shí)的時(shí)候，我們都將在可穿戴設(shè)備與生產(chǎn)力結(jié)合的道路上走下去。說到最實(shí)際的，我們將繼續(xù)研究、迭代、驗(yàn)證，使我們的Todoist能更好的利用Watch的特性，幫用戶更加輕松快捷的完成日常生活中的重要任務(wù)。

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

• 《PS+AI教程！教你繪制一枚APPLE WATCH獎(jiǎng)?wù)聢D標(biāo)》
• 《不要落伍！深聊APPLE WATCH平臺(tái)認(rèn)知與產(chǎn)品設(shè)計(jì)》
• 《官方版來了！超實(shí)用的APPLE WATCH官方規(guī)范設(shè)計(jì)模板下載》

譯文地址：beforweb

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量96萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：