國內APP實戰！揭秘京東Watch V1.0設計全過程

編者按：今天這個是@京東設計中心?同學打造的第一版Watch客戶端，作為一個購物平臺，如何在那么小的屏幕上做文章？放什么功能？如何使體驗完整？來學習下他們的方法 >>>

作者：京東設計中心王雪妍，黃小雨同學。

Apple Watch最佳精品好文推薦：

• 《PS+AI教程！教你繪制一枚APPLE WATCH獎章圖標》
• 《不要落伍！深聊APPLE WATCH平臺認知與產品設計》
• 《官方版來了！超實用的APPLE WATCH官方規范設計模板下載》

近年來可穿戴設備漸漸進入人們的視線，京東JDC也為給用戶一個完整的體驗加入到了探索的隊伍中來。

全新的平臺

谷歌與蘋果的Watch設計理念基本相同，兩個平臺下我們面臨相同的問題。如何體現Watch平臺自身重情景、極簡、輕量的特點是我們設計過程中始終思考的問題。

依舊從場景出發

用戶主動使用場景：Watch可移植一些手機應用的功能，幫助用戶在合適的場景下使用這些功能。如：公車上想看看中午買的東西到哪兒了，人太多且手機在公文包中不便于拿出，于是抬起手腕查了一下。走在路上，忽然想起家里大米沒有了，對著手腕上的watch說：“買一袋大米。”watch推薦了三款大米：之前購買過的、熱銷的、有促銷活動的，從中選擇其一，再選擇家的地址，完成了購買。

用戶被動使用場景：Watch作為穿戴設備上最好的體驗是當用戶需要的時候對應的內容剛好就顯示在上面，讓用戶能夠在做飯、吃東西、跑步、閑聊的過程中使用，也就是用戶在一個場景下收到一個恰當的信息。如：快到家時，Watch震動了一下，抬起手腕一看：快遞員出發了。

基于以上場景我們初步確定了希望用戶在watch上體驗的功能：1、語音購物；2、消息觸達。

不要變成一個持續的振動器

Watch會長時間貼著用戶的皮膚。基于這種親密關系，用戶對于Watch上的震動感知比手機更敏感，所以我們需要控制Watch上震動頻率，避免給用戶帶來干擾。

我們對京東現有的消息按照用重要程度和用戶相關性兩個維度重新梳理，并將用戶劃分成普通用戶和定制用戶。將重要信息推送到所有用戶的Watch上。對于已訂閱了“提醒簽到”“優惠促銷”等信息的定制用戶推送更多消息。

很快地完成Watch上的操作

在《Design Principles for Android Wear》中有個“5秒原則”，講的是用戶使用Watch上的應用程序時間越長，就會使用戶從現實世界中脫離的越嚴重，使得用戶不得不暫停現實中的活動來處理watch，這樣就失去了穿戴設備本應便捷的意義。因此所有watch上的“交互行為”都應該更高效，建議每個任務的操作都能在5秒內完成。

我們通過縮短操作流程、提高用戶瀏覽的效率兩方面來減少用戶在應用中花的時間。

縮短操作流程：

在做語音購功能時，把需求明確到：幫助用戶便捷地購買輕購買決策的商品。如：日用品，食品等。

減少用戶選擇難度，把線上流程放到線下。一般購買流程：搜索——選擇商品——提交訂單——支付定訂單。而在watch上我們讓用戶使用語音搜索后，只展示與用戶相關度前三的商品，用戶很快就能做出選擇。然后直接選擇地址就能提交訂單。我們砍掉了龐大的線上的支付流程，改為線下的貨到付款。這樣精簡了線上流程后，用戶就能想到時隨后立刻完成線上購買。

信息結構扁平化。

在手機端，大多數的應用采用了常規的“遞進式”層層深入的界面信息架構，常常會因層級太深，而使用戶需要一層一層跳轉界面來達到用戶的需求。這樣的交互顯然不適宜于Watch。我們針對信息架構進行很多探索性的嘗試，最終采用了“雙層結構”模式，將訂單信息平鋪，當用戶有明確的查看意圖時才展開下層的物流內容。（手機上是把訂單按狀態分類，如：待付款、已完成等。）

提高用戶瀏覽與使用的效率：

一次顯示一條信息內容。當有更多的二級信息時，把它放到二級頁面上。當有其他平行信息時，切換頁面展示。

盡可能簡化文字表述。信息通過關鍵詞和短語來表述而不是完整的句子，這里與大家分享一個簡化文本表述的技巧，即圖標+文案的形式。如：“您在京東購買的物品的物流進展到了快遞員配送中”。精簡后是一個京東特有的物流運輸車的圖標+“快遞員出發”的文案。

放大字體的尺寸。Watch硬件本身為了便于攜帶，屏幕尺寸都較小。適當放大文字尺寸來保證用戶瞥一眼手腕就能明白。

使用合理的圖片。圖片相較文字更形象直觀，通過添加圖片用戶能更容易的理解。如：用戶在購買商品后查詢物流，想知道什么東西到哪兒了。表達“什么東西”這一信息時，可以用一張商品圖片來代替一個商品列表。

簡單的交互，在Watch上的操作使用大手勢。在查詢功能中，訂單與訂單的切換，訂單的操作，我們采用大手勢的交互方式，保證用戶在任何場景都能輕易的看到他想了解的內容。（大手勢：不是像點擊一個小按鈕一樣的精準的操作）

在涉及訂單詳情時，不可避免地需要引入一些更復雜的交互，強迫用戶必須在可穿戴平臺上完成這些操作當然是不合適的。我們將用戶引導到與之相匹配的手持設備之上，在這里他們能夠通過大尺寸屏幕完成這項任務，而后再返回可穿戴設備獲取操作結果。點觸操作按鈕會啟動用戶匹配智能手機上的相關應用頁面，用戶將在手機上完成的具體交互。

視覺風格

如何在這寸土寸金的區域設計？且沿襲兩家平臺的設計原則還要突出京東自身品牌？這給我們視覺設計師帶來了不小的問題。

我們保留京東紅，Apple Watch在設計上配搭了黑色使頁面較為沉穩與平臺設計相呼應；Android Wear則使用的白底使頁面年輕與平臺銜接更流暢。

打磨細節

從最初的產品信息構架，交互草稿，初稿，可操作Demo，我們都在琢磨用戶模型與操作邏輯的關系，斟酌界面元素的擺放。

在項目中，我們通過用手繪草稿和紙面原型來和產品、開發快速溝通設計思路，為了最真實地反應我們在設計中存在的問題，在項目中我們還聯合開發同學制作了高保真可操作的Demo（在手表上的原型工具還是空白），將整個應用信息框架，交互行為都完整地呈現出來。

在Apple watch尚未開售的情況下，由于沒有真機，我們想出了一個很原始的辦法來模擬手表上的視覺感受：用1:1彩色打印制作紙質模型戴在手腕上。在設計Android Wear時雖然有了測試機，但是視覺還原還是存在一些差異，例如icon雖然按照規范大小設計，但在手表上呈現效果不理想，我們用尺子量，尋找視覺偏差，經過不斷的打磨，最終高保真地還原了視覺效果，將最優的視覺體驗呈現給用戶。

產品迭代

京東JD Watch V1.0只實現了初步的觸達功能，在將來的迭代中會逐漸完善和優化。希望我們的誠意，能夠得到京東用戶的肯定，我們也將時刻保持為用戶帶來完美體驗的這顆初心，產出更多的優秀產品。

【優設字體設計好文】

第一波：字體氣質從何來？
《量身打造的學問！如何準確地傳達出字體的氣質？》

第二波：字體創意設計之移花接木！
《超實用教程！字體設計第一戰之移花接木！》

第三波：人氣超火的英文字體免費下載！
《流暢精致！40款優雅如詩的纖細字體免費下載（可商用）》

作者：@京東設計中心

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

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