自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

國內(nèi)APP實(shí)戰(zhàn)!揭秘京東Apple Watch V1.0設(shè)計(jì)全過程

移動(dòng)開發(fā) Android
谷歌與蘋果的Watch設(shè)計(jì)理念基本相同,兩個(gè)平臺(tái)下我們面臨相同的問題。如何體現(xiàn)Watch平臺(tái)自身重情景、極簡、輕量的特點(diǎn)是我們?cè)O(shè)計(jì)過程中始終思考的問題。

pic_001.jpg

近年來可穿戴設(shè)備漸漸進(jìn)入人們的視線,京東JDC也為給用戶一個(gè)完整的體驗(yàn)加入到了探索的隊(duì)伍中來。

全新的平臺(tái)

谷歌與蘋果的Watch設(shè)計(jì)理念基本相同,兩個(gè)平臺(tái)下我們面臨相同的問題。如何體現(xiàn)Watch平臺(tái)自身重情景、極簡、輕量的特點(diǎn)是我們?cè)O(shè)計(jì)過程中始終思考的問題。

如何在那么小的屏幕上做文章?放什么功能?如何使體驗(yàn)完整?

[[137398]]

依舊從場(chǎng)景出發(fā)

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

  • 用戶被動(dòng)使用場(chǎng)景:Watch作為穿戴設(shè)備上***的體驗(yàn)是當(dāng)用戶需要的時(shí)候?qū)?yīng)的內(nèi)容剛好就顯示在上面,讓用戶能夠在做飯、吃東西、跑步、閑聊的過程中使用,也就是用戶在一個(gè)場(chǎng)景下收到一個(gè)恰當(dāng)?shù)男畔?。如:快到家時(shí),Watch震動(dòng)了一下,抬起手腕一看:快遞員出發(fā)了。

基于以上場(chǎng)景我們初步確定了希望用戶在watch上體驗(yàn)的功能:1語音購物;2消息觸達(dá)

不要變成一個(gè)持續(xù)的振動(dòng)器

Watch會(huì)長時(shí)間貼著用戶的皮膚?;谶@種親密關(guān)系,用戶對(duì)于Watch上的震動(dòng)感知比手機(jī)更敏感,所以我們需要控制Watch上震動(dòng)頻率,避免給用戶帶來干擾。

我們對(duì)京東現(xiàn)有的消息按照用重要程度和用戶相關(guān)性兩個(gè)維度重新梳理,并將用戶劃分成普通用戶和定制用戶。將重要信息推送到所有用戶的Watch上。對(duì)于已訂閱了“提醒簽到”“優(yōu)惠促銷”等信息的定制用戶推送更多消息。

pic_003.jpg

很快地完成Watch上的操作

在《Design Principles for Android Wear》中有個(gè)“5秒原則”,講的是用戶使用Watch上的應(yīng)用程序時(shí)間越長,就會(huì)使用戶從現(xiàn)實(shí)世界中脫離的越嚴(yán)重,使得用戶不得不暫?,F(xiàn)實(shí)中的活動(dòng)來處理watch,這樣就失去了穿戴設(shè)備本應(yīng)便捷的意義。因此所有watch上的“交互行為”都應(yīng)該更高效,建議每個(gè)任務(wù)的操作都能在5秒內(nèi)完成。

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

縮短操作流程:

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

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

pic_004.jpg

信息結(jié)構(gòu)扁平化。在手機(jī)端,大多數(shù)的應(yīng)用采用了常規(guī)的“遞進(jìn)式”層層深入的界面信息架構(gòu),常常會(huì)因?qū)蛹?jí)太深,而使用戶需要一層一層跳轉(zhuǎn)界面來達(dá)到用戶的需求。這樣的交互顯然不適宜于Watch。我們針對(duì)信息架構(gòu)進(jìn)行很多探索性的嘗試,最終采用了“雙層結(jié)構(gòu)”模式,將訂單信息平鋪,當(dāng)用戶有明確的查看意圖時(shí)才展開下層的物流內(nèi)容。(手機(jī)上是把訂單按狀態(tài)分類,如:待付款、已完成等。)

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

一次顯示一條信息內(nèi)容。當(dāng)有更多的二級(jí)信息時(shí),把它放到二級(jí)頁面上。當(dāng)有其他平行信息時(shí),切換頁面展示。

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

pic_005.jpg

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

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

簡單的交互,在Watch上的操作使用大手勢(shì)。在查詢功能中,訂單與訂單的切換,訂單的操作,我們采用大手勢(shì)的交互方式,保證用戶在任何場(chǎng)景都能輕易的看到他想了解的內(nèi)容。(大手勢(shì):不是像點(diǎn)擊一個(gè)小按鈕一樣的精準(zhǔn)的操作)

pic_006.jpg

在涉及訂單詳情時(shí),不可避免地需要引入一些更復(fù)雜的交互,強(qiáng)迫用戶必須在可穿戴平臺(tái)上完成這些操作當(dāng)然是不合適的。我們將用戶引導(dǎo)到與之相匹配的手持設(shè)備之上,在這里他們能夠通過大尺寸屏幕完成這項(xiàng)任務(wù),而后再返回可穿戴設(shè)備獲取操作結(jié)果。點(diǎn)觸操作按鈕會(huì)啟動(dòng)用戶匹配智能手機(jī)上的相關(guān)應(yīng)用頁面,用戶將在手機(jī)上完成的具體交互。

pic_007.jpg

#p#

視覺風(fēng)格

如何在這***的區(qū)域設(shè)計(jì)?且沿襲兩家平臺(tái)的設(shè)計(jì)原則還要突出京東自身品牌?這給我們視覺設(shè)計(jì)師帶來了不小的問題。

我們保留京東紅,Apple Watch在設(shè)計(jì)上配搭了黑色使頁面較為沉穩(wěn)與平臺(tái)設(shè)計(jì)相呼應(yīng);Android Wear則使用的白底使頁面年輕與平臺(tái)銜接更流暢。

pic_008.jpg

打磨細(xì)節(jié)

從最初的產(chǎn)品信息構(gòu)架,交互草稿,初稿,可操作Demo,我們都在琢磨用戶模型與操作邏輯的關(guān)系,斟酌界面元素的擺放。

pic_009.jpg

在項(xiàng)目中,我們通過用手繪草稿和紙面原型來和產(chǎn)品、開發(fā)快速溝通設(shè)計(jì)思路,為了最真實(shí)地反應(yīng)我們?cè)谠O(shè)計(jì)中存在的問題,在項(xiàng)目中我們還聯(lián)合開發(fā)同學(xué)制作了高保真可操作的Demo(在手表上的原型工具還是空白),將整個(gè)應(yīng)用信息框架,交互行為都完整地呈現(xiàn)出來。

pic_010.jpg

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

pic_011.jpg

產(chǎn)品迭代

京東JD Watch V1.0只實(shí)現(xiàn)了初步的觸達(dá)功能,在將來的迭代中會(huì)逐漸完善和優(yōu)化。希望我們的誠意,能夠得到京東用戶的肯定,我們也將時(shí)刻保持為用戶帶來***體驗(yàn)的這顆初心,產(chǎn)出更多的優(yōu)秀產(chǎn)品。

pic_012.jpg

參考:

  • Design Principles for Android Wear

    http://developer.android.com/design/wear/principles.html

  • Apple Watch Human Interface Guidelines

    https://developer.apple.com/watch/human-interface-guidelines/

pic_013.jpg

責(zé)任編輯:林師授 來源: JDC | 京東設(shè)計(jì)中心
相關(guān)推薦

2010-06-11 13:15:07

UML軟件

2009-06-09 16:17:45

SQL Server

2011-02-22 10:46:02

Samba配置

2009-02-20 10:25:54

UML軟件設(shè)計(jì)例程

2016-12-09 11:55:10

2011-09-06 15:38:20

QT安裝

2011-01-21 17:51:52

2009-04-13 12:37:18

2013-09-17 10:26:00

開源文檔管理文檔管理系統(tǒng)PPM

2009-12-08 17:56:16

WCF配置

2011-04-18 15:56:10

軟件測(cè)試

2009-08-26 16:37:04

ibmdwRational

2011-03-11 10:39:02

YUM安裝LAMP

2010-07-21 14:51:19

telnet-serv

2019-05-14 15:27:31

MongoDB自動(dòng)備份數(shù)據(jù)庫

2010-06-12 10:03:20

Ubuntu Grub

2013-01-14 12:14:44

Firefox OSFirefox OS

2009-06-10 16:55:42

cygwin netb安裝

2010-03-01 17:01:03

Python編程技巧

2010-03-10 13:24:45

Zend Debugg
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)