【交互設(shè)計(jì)】淘寶購(gòu)便利交互設(shè)計(jì)心得

此文章已于12:53:19201*/2/7發(fā)布到良知塾【交互設(shè)計(jì)】淘寶購(gòu)便利交互設(shè)計(jì)心得

類(lèi)別

交互信息;全部

前段時(shí)間一直在做淘寶購(gòu)便利網(wǎng)站的交互，算是本人第一次真正意義上的做前臺(tái)項(xiàng)目吧（之前一直是做的后臺(tái)系統(tǒng)的交互），其中有一些設(shè)計(jì)上的心得和大家分享一下。淘寶購(gòu)便利是快消品銷(xiāo)售的“生活平臺(tái)”，讓市民足不出戶(hù)就可以買(mǎi)到超市生活用品，并可以享受24小時(shí)之內(nèi)送貨上門(mén)。一準(zhǔn)備

1.現(xiàn)有的網(wǎng)上超市是什么樣的？交互上有什么優(yōu)缺點(diǎn)？

沒(méi)有經(jīng)驗(yàn)的情況下，最好的完成目標(biāo)的方式就是借鑒�？磭�(guó)內(nèi)外很多線(xiàn)上超市：mysupermarket：最下面的懸浮區(qū)是亮點(diǎn)，可以寫(xiě)便簽，可以購(gòu)物車(chē)，有物流說(shuō)明。同時(shí)結(jié)構(gòu)清晰，只是導(dǎo)航操作不是很直接，要?jiǎng)澾^(guò)才能看到內(nèi)容。

山姆會(huì)員商店：每個(gè)地區(qū)有特定的商品，和我們的產(chǎn)品相同。首頁(yè)、list、活動(dòng)頁(yè)都可以直接在櫥窗選好想要商品的個(gè)數(shù)模擬真實(shí)場(chǎng)景。

leshop：清晰的導(dǎo)航，清晰的list的展示（標(biāo)類(lèi)商品用列表展示也是不錯(cuò)的選擇）一號(hào)店：在大家有用漂亮的ui設(shè)計(jì)展示網(wǎng)站有多大牌時(shí)，一號(hào)店用了是讓各個(gè)年齡層都能接受的純文字，通俗易懂，怪不得大媽大嬸都會(huì)上一號(hào)店買(mǎi)呢。

天貓超市：整個(gè)網(wǎng)站看起來(lái)很高端，但是detail頁(yè)右邊只有購(gòu)物車(chē)，沒(méi)有其他的關(guān)聯(lián)營(yíng)銷(xiāo)，是否會(huì)導(dǎo)致購(gòu)物的連續(xù)性降低呢？2.購(gòu)便利要抓哪些特點(diǎn)來(lái)突破？我們的用戶(hù)是20-40歲工薪階層，喜歡潮流，對(duì)進(jìn)口商品消費(fèi)需求大。便利購(gòu)在服務(wù)上要做到最后一公里的突破，商品品種開(kāi)始的時(shí)候可能不多，但是特點(diǎn)是進(jìn)口商品多且便宜，滿(mǎn)80包郵，這些都是這個(gè)網(wǎng)站自身的優(yōu)勢(shì)，怎么樣才能在頁(yè)面上提現(xiàn)出來(lái)呢？除了的特色介紹頁(yè)面，幾乎不能提現(xiàn)交互上。再想想，既然以上看到的網(wǎng)站各有優(yōu)劣為何不取他們的優(yōu)勢(shì)融合在一起，再加上一些變化呢?

迷你購(gòu)物車(chē)：超市有別于網(wǎng)店，特別的地方在于迷你購(gòu)物車(chē)。模擬實(shí)際場(chǎng)景：超市有別于商場(chǎng)，前者可以把東西放在購(gòu)物車(chē)?yán)镒詈笠黄鸾Y(jié)賬。購(gòu)便利的購(gòu)物車(chē)做的和其他網(wǎng)上超市不一樣，抓住購(gòu)物車(chē)的核心功能和體驗(yàn)即可。

list：這是一個(gè)最實(shí)用的頁(yè)面，能直接影響購(gòu)買(mǎi)，盡量在這個(gè)頁(yè)面讓用戶(hù)直接產(chǎn)生購(gòu)買(mǎi)。用戶(hù)怎么方便使用就怎么設(shè)計(jì)。

detail：一般用戶(hù)能到這個(gè)頁(yè)面幾率不會(huì)太高，除非對(duì)這個(gè)商品猶豫不決。這時(shí)我們要挽留他，盡量多家關(guān)聯(lián)銷(xiāo)售的地方。3.交互設(shè)計(jì)師的價(jià)值在哪里？

交互的價(jià)值對(duì)于每個(gè)團(tuán)隊(duì)每個(gè)項(xiàng)目都是而異的。比如這次的項(xiàng)目，有項(xiàng)目時(shí)間，實(shí)現(xiàn)能力，淘寶框架的約束，同時(shí)交互又要賦予這個(gè)網(wǎng)站一些特色。這次項(xiàng)目我做的最難的事不是怎么把它設(shè)計(jì)出來(lái)，而是不停的舍棄自己的創(chuàng)意內(nèi)容，留住最核心的。從而使整個(gè)項(xiàng)目能夠順利完成。二設(shè)計(jì)1.迷你購(gòu)物車(chē)

購(gòu)物車(chē)是我們要打造的最有亮點(diǎn)的區(qū)域。每個(gè)網(wǎng)上超市都有購(gòu)物車(chē)，購(gòu)物車(chē)可以讓用戶(hù)調(diào)節(jié)商品，快速結(jié)賬。所以功能點(diǎn)一格都不能少。同時(shí)我們要把我們滿(mǎn)80包10公斤郵費(fèi)的利益點(diǎn)拿上去，文案要讓用戶(hù)易懂。

創(chuàng)意點(diǎn)看到左右的購(gòu)物車(chē)都是縱向的列表模式的，然而列表模式和大圖模式其實(shí)是不分伯仲的，只要操作手勢(shì)輕松，大圖模式用戶(hù)是否也可以接受呢？雖然沒(méi)有先例，但是不妨一試。于是橫向的大圖模式購(gòu)物車(chē)誕生了。如圖：列表模式，用戶(hù)都是使用是最方便的，一目了然的。大圖模式類(lèi)似現(xiàn)在的淘寶櫥窗、iphone主界面等，我們的用戶(hù)是20-40之間的工薪階層，喜歡潮流，對(duì)進(jìn)口商品消費(fèi)需求大，他們對(duì)區(qū)塊模式也不會(huì)陌生。

我們的優(yōu)勢(shì)是滿(mǎn)80包10公斤郵費(fèi)，由于我們用的是淘寶的后臺(tái)，購(gòu)物車(chē)主界面沒(méi)發(fā)展示重量。所以重量也要通過(guò)小小的購(gòu)物車(chē)來(lái)承載，怎么做？我們想到了在價(jià)格后面加上了重量，同時(shí)跟著用戶(hù)的每次購(gòu)物車(chē)操作聯(lián)動(dòng)。下方加上郵費(fèi)說(shuō)明的鏈接，讓喜歡精打細(xì)算的用戶(hù)找到購(gòu)物計(jì)算的樂(lè)趣。國(guó)內(nèi)商超的迷你購(gòu)物車(chē)大多是劃過(guò)展開(kāi)購(gòu)物車(chē)，而點(diǎn)擊之后又回到大購(gòu)物車(chē)頁(yè)面由于迷你購(gòu)物車(chē)收起狀態(tài)區(qū)域很小，用戶(hù)容易造成誤操作。我們采用的是點(diǎn)擊購(gòu)物車(chē)才能展開(kāi)，防止用戶(hù)誤操作的同時(shí)充分展示我們的購(gòu)物車(chē)特色。最后在將這些大圖模塊橫向舒展開(kāi)來(lái)，在網(wǎng)站右下角懸浮，對(duì)整個(gè)頁(yè)面不會(huì)造成過(guò)多視覺(jué)干擾。2.list頁(yè)和detail頁(yè)

list和detail是個(gè)功能性的頁(yè)面要做到如何讓用戶(hù)操作方便。我們對(duì)淘寶最大眾化的兩個(gè)頁(yè)面做了針對(duì)商超的細(xì)小優(yōu)化

為了保證786分辨率的情況下能看到完成一行商品櫥窗+購(gòu)物車(chē)展開(kāi)+操作條我們將操作條從三行減少到了一行

為了保證進(jìn)口商品能更加吸引用戶(hù)，我們將detail擴(kuò)大到460*460

在做好之后經(jīng)常會(huì)漏掉很多報(bào)錯(cuò)頁(yè)面等等，這些都是基礎(chǔ)沒(méi)打牢導(dǎo)致的，所以了解后臺(tái)知識(shí)，前端知識(shí)，測(cè)試知識(shí)對(duì)交互設(shè)計(jì)師來(lái)說(shuō)也是很重要的。三問(wèn)題1.樣or件or種

這個(gè)問(wèn)題是討論最激烈的，一度還郵件給天貓超市的設(shè)計(jì)師來(lái)進(jìn)行討論了。一號(hào)店等很多非淘寶系網(wǎng)站“件”表示一個(gè)商品（同一種商品買(mǎi)了兩個(gè)，就是兩件），而淘寶系網(wǎng)站“件”標(biāo)識(shí)一種商品，（同一種商品買(mǎi)了兩個(gè)，就是一件）雖然常識(shí)情況下，大家都認(rèn)為前者是正確的，但是后者是為了優(yōu)惠活動(dòng)的邏輯統(tǒng)一（我尋找天貓?jiān)O(shè)計(jì)師得到的答案：從當(dāng)時(shí)的功能考慮因?yàn)槲覀兊膬?yōu)惠有部分是按商品的件數(shù)來(lái)計(jì)算折扣的，比如5件內(nèi)優(yōu)惠，但實(shí)際是說(shuō)五種商品就能優(yōu)惠，你五種商品每個(gè)買(mǎi)幾樣我們不計(jì)算在數(shù)量里）。

我們的后臺(tái)邏輯是淘寶統(tǒng)一的，所以只能用標(biāo)識(shí)種類(lèi)。我們要怎么處理呢？用“件”：容易產(chǎn)生誤解；用“種”：太過(guò)于官方化，不親切；用“樣”：很親切，但是各地方理解不同.....最后我們討論了很長(zhǎng)時(shí)間決定采用比較隱約的方式：省去單位。這種方法在一號(hào)店的list面包屑上面有體現(xiàn)。

2.大圖or列表

list到底是用大圖模式好呢還是用列表模式好呢？看了淘寶集市的list展示，你一定以為大圖模式是大家最認(rèn)可的。但是這點(diǎn)我和PD也產(chǎn)生了激烈的討論，還和淘寶用研的同事了解了數(shù)據(jù)情況，收益匪淺。

淘寶中的商品有標(biāo)類(lèi)商品和非標(biāo)類(lèi)商品之分。淘寶集市由于主要是非標(biāo)準(zhǔn)類(lèi)商品，這類(lèi)商品大多都要進(jìn)詳情才能確定，大圖的話(huà)可以是list一屏展示更多的商品所以非標(biāo)類(lèi)商品用大圖模式比較好。而非標(biāo)類(lèi)商品用戶(hù)對(duì)產(chǎn)品本身都是了解的，對(duì)詳情不是特別關(guān)注，只要看看商品基本信息就能確定自己要不要買(mǎi)了，列表模式可以在list直接展示商品的基本信息，標(biāo)類(lèi)商品的話(huà)列表模式是比較好的。當(dāng)然這些不是絕對(duì)的。后來(lái)我們覺(jué)得用ABtest，看數(shù)據(jù)來(lái)說(shuō)話(huà)。A列表模式：

1.超市商品絕大多數(shù)為標(biāo)類(lèi)商品，用戶(hù)對(duì)商品規(guī)格需求比較明顯2.模擬用戶(hù)在現(xiàn)實(shí)場(chǎng)景下逛超市的習(xí)慣：沖動(dòng)型：看到商品→看到價(jià)格→購(gòu)買(mǎi)

冷靜型：看到商品→看到價(jià)格→看到規(guī)格→購(gòu)買(mǎi)3.我們前期的商品不會(huì)很多B大圖模式：

1.能在一頁(yè)看到更多的商品

2.淘寶用戶(hù)養(yǎng)成了進(jìn)DETAIL進(jìn)行購(gòu)買(mǎi)商品的習(xí)慣

3.我們的商品前期可能少，后期會(huì)多主推商品少，其他商品也多的

最后由于項(xiàng)目時(shí)間緊沒(méi)有采用ABtest，用了保險(xiǎn)的大圖模式。（列表模式不方便透露了。）

四思考

雖然個(gè)人認(rèn)為交互設(shè)計(jì)師不是為了做出的作品與別人不同有新意而存在的（個(gè)人認(rèn)為交互設(shè)計(jì)師是以怎樣方便用戶(hù)使用網(wǎng)站對(duì)網(wǎng)站產(chǎn)生好感而存在的），但是通過(guò)了這次項(xiàng)目，我對(duì)交互設(shè)計(jì)師這個(gè)職位有了更深的理解。本來(lái)我們?cè)O(shè)計(jì)師有很多的想法，但是由于很多因素：上線(xiàn)時(shí)間由老板來(lái)定（選良辰即日）時(shí)間壓縮嚴(yán)重，受淘寶限制（我們本質(zhì)上是個(gè)店鋪）技術(shù)實(shí)現(xiàn)困難，沒(méi)有很好的用研數(shù)據(jù)下很難做判斷而最終沒(méi)有得到實(shí)現(xiàn)。畢竟這個(gè)作品是大家的作品，單單一個(gè)交互設(shè)計(jì)師是無(wú)法做成這個(gè)網(wǎng)站的。大家溝通一起努力，讓項(xiàng)目團(tuán)隊(duì)認(rèn)可才是最基本的。用戶(hù)可行性測(cè)試不是很方便的情況下，試著讓項(xiàng)目團(tuán)隊(duì)的人都成為用戶(hù)，很多交互方式大家可以一起來(lái)商量。當(dāng)然交互設(shè)計(jì)師也很有必要了解前端，后臺(tái)的一些基本知識(shí)，當(dāng)了解了他們的處理方法之后或許會(huì)對(duì)你的交互方式判斷有所幫助。

BY：良無(wú)限-UED

良知塾交互設(shè)計(jì)分享：【交互設(shè)計(jì)】蘋(píng)果產(chǎn)品怎么做到身未動(dòng)心已知的

擴(kuò)展閱讀：【交互設(shè)計(jì)】十個(gè)方法,讓你的線(xiàn)框原型更具溝通能力

此文章已于22:21:47201*/2/17發(fā)布到良知塾【交互設(shè)計(jì)】十個(gè)方法，讓你的線(xiàn)框原型更具溝通能力

類(lèi)別

全部;交互信息

我(英文原文作者)參與過(guò)很多產(chǎn)品的線(xiàn)框原型設(shè)計(jì)，包括我自己獨(dú)立完成的，還有與其他設(shè)計(jì)師、產(chǎn)品經(jīng)理甚至是業(yè)務(wù)分析人員一起合作的。這很棒，因?yàn)樵谶@個(gè)過(guò)程中我見(jiàn)識(shí)到了很多優(yōu)秀的項(xiàng)目。不過(guò)慢慢的我也發(fā)現(xiàn)了一些問(wèn)題，一些大家時(shí)常會(huì)在原型制作過(guò)程當(dāng)中忽略掉的要素；如果能注意并解決掉這些問(wèn)題，我們的交互設(shè)計(jì)產(chǎn)出物就可以發(fā)揮更大的實(shí)戰(zhàn)價(jià)值。下圖所展示的是一個(gè)很典型的例子，我們通常會(huì)將這種風(fēng)格的線(xiàn)框稿交付給相關(guān)同事來(lái)跟進(jìn)視覺(jué)設(shè)計(jì)或原型測(cè)試的工作。":[{"c":{"ix":0,"iy":0,"iw":655,"ih":1080},"p":{"h":1080,"w":655,"x":132,"y":108,"z":0},"ps":{"_drop":1,"_vector":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":1085,"iw":664,"ih":1081},"p":{"h":1081,"w":664,"x":127,"y":107,"z":1},"ps":{"_drop":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":2171,"iw":918,"ih":1080},"p":{"h":1080,"opacity":1,"w":917.999,"x":0,"y":108,"z":2},"ps":null,"s":{"pic_file":"/home/iknow/conv//data//bdef//144187517//144187517_2_2.png"},"t":"pic"}],"page":{"ph":1188,"pw":918,"iw":918,"ih":3251,"v":6,"t":"4","pptlike":false,"cx":0,"cy":103,"cw":917.999,"ch":1085}})這種線(xiàn)框稿確實(shí)能比較清晰的描述出頁(yè)面元素的布局方式，但也僅此而已。它所缺少的是與其他設(shè)計(jì)師、開(kāi)發(fā)人員以及被測(cè)用戶(hù)之間的溝通能力。接下來(lái)，我們將一起看一看有哪些方法可以幫助我們提升線(xiàn)框原型在這方面的表現(xiàn)。

1.通過(guò)明暗對(duì)比來(lái)描述模塊之間的視覺(jué)優(yōu)先級(jí)

哪些內(nèi)容是需要用戶(hù)在頁(yè)面上最先注意到的？他們的視線(xiàn)應(yīng)該聚焦到什么位置？我們希望用戶(hù)執(zhí)行什么操作？這些問(wèn)題不能簡(jiǎn)單的丟給視覺(jué)設(shè)計(jì)師來(lái)考慮，而上圖所示的線(xiàn)框原型顯然無(wú)法幫助交互設(shè)計(jì)師傳達(dá)這方面的信息。

首先，根據(jù)產(chǎn)品需求及用研方面的實(shí)際情況，作為產(chǎn)品人員或交互設(shè)計(jì)師，我們自身應(yīng)該對(duì)以上這些方面的信息了如指掌；在此基礎(chǔ)上，為最原始的線(xiàn)框稿添加視覺(jué)優(yōu)先級(jí)。具體實(shí)施起來(lái)其實(shí)很簡(jiǎn)單，將所有的深色“線(xiàn)框”移除掉，使用不同明度的灰色作為背景色來(lái)界定頁(yè)面和模塊的邊緣，并籍此表達(dá)不同元素之間的視覺(jué)優(yōu)先級(jí)。相比于之前純粹線(xiàn)框風(fēng)格的設(shè)計(jì)稿，我們可以在下圖中明顯的感受到元素與模塊之間的優(yōu)先級(jí)關(guān)系，例如酒店信息推薦及右側(cè)預(yù)定表單當(dāng)中的操作按鈕都可以在很短的時(shí)間內(nèi)抓住我們的目光。":[{"c":{"ix":0,"iy":0,"iw":628,"ih":1080},"p":{"h":1080,"w":628,"x":159,"y":108,"z":0},"ps":{"_drop":1,"_vector":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":1085,"iw":637,"ih":1081},"p":{"h":1081,"w":637,"x":154,"y":107,"z":1},"ps":{"_drop":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":2171,"iw":918,"ih":1080},"p":{"h":1080,"opacity":1,"w":917.999,"x":0,"y":108,"z":2},"ps":null,"s":{"pic_file":"/home/iknow/conv//data//bdef//144187517//144187517_4_2.png"},"t":"pic"}],"page":{"ph":1188,"pw":918,"iw":918,"ih":3251,"v":6,"t":"4","pptlike":false,"cx":0,"cy":103,"cw":917.999,"ch":1085}})這種方式并不意味著交互設(shè)計(jì)師正在扮演著視覺(jué)設(shè)計(jì)師的角色，我們并不是在表達(dá)“這個(gè)元素的背景色要比另外一個(gè)元素的更深一些”，這些明暗關(guān)系所要體現(xiàn)的只是哪些元素需要突出，哪些元素要相對(duì)弱化；而最終的視覺(jué)表現(xiàn)形式仍然應(yīng)該由視覺(jué)設(shè)計(jì)師來(lái)掌控。

2.使用真實(shí)的數(shù)據(jù)內(nèi)容

對(duì)于線(xiàn)框原型當(dāng)中的范例內(nèi)容，包括導(dǎo)航元素的標(biāo)題、表單標(biāo)簽、介紹文案、圖標(biāo)等等，我們都應(yīng)該盡量使用最貼近生產(chǎn)環(huán)境的真實(shí)數(shù)據(jù)。這種方式可以更有效的幫助我們規(guī)劃界面元素的布局，并針對(duì)實(shí)際環(huán)境中有可能產(chǎn)生的極端數(shù)據(jù)情況制定預(yù)防性的方案，確保頁(yè)面結(jié)構(gòu)的堅(jiān)固性。

更重要的是，使用真實(shí)數(shù)據(jù)作為范例內(nèi)容的線(xiàn)框原型可以在接下來(lái)的可用性測(cè)試當(dāng)中更具表現(xiàn)力和說(shuō)服力，被測(cè)用戶(hù)不需要依靠主持人的描述或自己的猜測(cè)就可以在原型當(dāng)中獲取到比較準(zhǔn)確的信息。另外，真實(shí)數(shù)據(jù)也可以創(chuàng)造出一種更貼近實(shí)際產(chǎn)品的使用氛圍，這可以使被測(cè)用戶(hù)更加投入。對(duì)于測(cè)試人員來(lái)說(shuō)(主持人、觀(guān)察員)，我們可以設(shè)計(jì)出更具有針對(duì)性的任務(wù)或問(wèn)題，可以在測(cè)試過(guò)程中對(duì)被測(cè)用戶(hù)進(jìn)行更加深入的觀(guān)察；相應(yīng)的，最終收集到的反饋信息也會(huì)更加真實(shí)有效。

仍以酒店的范例原型為例，諸如“你能找到這個(gè)酒店的特色服務(wù)信息嗎？”這樣的問(wèn)題是欠妥的，因?yàn)檫@就相當(dāng)于告訴被測(cè)用戶(hù)，在頁(yè)面當(dāng)中的某個(gè)地方存在著這樣的信息，他們接下來(lái)就只會(huì)根據(jù)這條線(xiàn)索去尋找。多數(shù)情況下必然能夠找到，但這樣的反饋對(duì)于我們是沒(méi)有意義的。

如果在測(cè)試當(dāng)中使用由真實(shí)數(shù)據(jù)構(gòu)建起來(lái)的原型，那么情況就會(huì)好很多，我們可以問(wèn)被測(cè)用戶(hù)“你對(duì)這家酒店的感覺(jué)如何？”，這會(huì)使我們獲取有效反饋的機(jī)會(huì)大大的增加。用戶(hù)會(huì)根據(jù)這樣的問(wèn)題進(jìn)行更加自主的信息瀏覽行為，他們有可能會(huì)回答“這個(gè)酒店看上去不錯(cuò)，不過(guò)他們提供家庭泳池，我真的不大喜歡小孩在酒店當(dāng)中跑來(lái)跑去。”通過(guò)這類(lèi)反饋，我們可以了解到用戶(hù)不僅注意到了頁(yè)面當(dāng)中的重要元素，而且他們對(duì)其中的具體內(nèi)容也做出了真實(shí)的思考。可以說(shuō)，通過(guò)一套無(wú)真實(shí)數(shù)據(jù)內(nèi)容的線(xiàn)框原型，我們能夠測(cè)試產(chǎn)品的可用性，而使用了真實(shí)數(shù)據(jù)作為范例內(nèi)容線(xiàn)框原型則可以更加全面的幫助我們測(cè)驗(yàn)產(chǎn)品的用戶(hù)體驗(yàn)。要了解更多原型測(cè)試方面的實(shí)戰(zhàn)方法，可以參考我們之前的文章“產(chǎn)品早期的原型設(shè)計(jì)與用戶(hù)測(cè)試”。

3.確保細(xì)節(jié)的準(zhǔn)確無(wú)誤

將真實(shí)數(shù)據(jù)作為范例內(nèi)容填充到原型當(dāng)中后，我們要確保交互流程所涉及的信息的準(zhǔn)確性。舉個(gè)簡(jiǎn)單的例子，如果購(gòu)物車(chē)的頁(yè)面原型當(dāng)中展示了兩個(gè)單價(jià)為50元的商品，那么在結(jié)算環(huán)節(jié)中，總價(jià)應(yīng)該是100元，而不是隨便其他什么數(shù)字。錯(cuò)誤的信息會(huì)阻礙溝通的有效進(jìn)行，開(kāi)發(fā)人員有可能在這里產(chǎn)生質(zhì)疑，被測(cè)用戶(hù)也會(huì)感到莫名其妙。

作為設(shè)計(jì)人員，長(zhǎng)時(shí)間的將注意力放在原型的制作上面，很容易忽視掉這類(lèi)問(wèn)題的存在。如果有條件的話(huà)，可以在適當(dāng)?shù)臅r(shí)候請(qǐng)其他人來(lái)幫忙檢查一下你的原型當(dāng)中是否存在這類(lèi)細(xì)節(jié)當(dāng)中的錯(cuò)誤。4.增加范例圖片的自我描述能力

圖片對(duì)于用戶(hù)體驗(yàn)的提升起著重要的作用，當(dāng)人們?cè)诰W(wǎng)站中尋找商品或服務(wù)時(shí)，圖片是引導(dǎo)他們制定決策的關(guān)鍵要素（怎樣通過(guò)設(shè)計(jì)幫助用戶(hù)制定決策）。另外，圖片也能幫助用戶(hù)對(duì)網(wǎng)站自身的形象和定位產(chǎn)生認(rèn)知。不過(guò)在線(xiàn)框原型中，我們通常只會(huì)使用一些灰色的容器和線(xiàn)條來(lái)表現(xiàn)圖片。

當(dāng)然，我并不是要建議在線(xiàn)框原型中使用真正的圖片或照片；我們需要做的是讓代表圖片的線(xiàn)框元素能夠體現(xiàn)出在實(shí)際頁(yè)面當(dāng)中，這個(gè)位置應(yīng)該放置怎樣類(lèi)型的圖片。在制作線(xiàn)框原型之前，最好與相關(guān)的產(chǎn)品或業(yè)務(wù)人員就這方面的問(wèn)題進(jìn)行溝通，根據(jù)產(chǎn)品自身的特質(zhì)及最終面向的用戶(hù)群體，來(lái)判斷圖片一類(lèi)的視覺(jué)元素應(yīng)該具有怎樣的整體風(fēng)格。

舉個(gè)例子，我曾經(jīng)幫一家襯衣零售商做網(wǎng)站改版。在著手設(shè)計(jì)工作之前，我們首先使用舊版網(wǎng)站進(jìn)行了一次用戶(hù)測(cè)試，結(jié)果發(fā)現(xiàn)商品詳情頁(yè)當(dāng)中的演示照片總會(huì)使用戶(hù)產(chǎn)生迷惑。為了使襯衣更好看，他們?cè)谂恼盏臅r(shí)候刻意搭配上了領(lǐng)帶與袖扣，這使得用戶(hù)認(rèn)為每件襯衫都是包含領(lǐng)帶與袖扣的套裝。所以當(dāng)我進(jìn)行線(xiàn)框原型設(shè)計(jì)的時(shí)候，特意在商品照片的位置畫(huà)了一張不包含領(lǐng)帶與袖扣的襯衣草圖，以確保視覺(jué)設(shè)計(jì)師及后續(xù)環(huán)節(jié)的人員能夠理解，并避免在新版網(wǎng)站中重復(fù)錯(cuò)誤。

我們不必通過(guò)非常精細(xì)的繪畫(huà)來(lái)為線(xiàn)框原型中的圖片元素增加描述性，通過(guò)簡(jiǎn)單的草圖來(lái)陳述出用戶(hù)希望在這里看到的圖片類(lèi)型即可。例如，在提供酒店預(yù)定服務(wù)的網(wǎng)站中，用戶(hù)通常希望在詳情頁(yè)里看到怎樣的圖片？房間？衛(wèi)生間？景觀(guān)？這些問(wèn)題都是值得花時(shí)間了解清楚并在線(xiàn)框原型中加以體現(xiàn)的。

5.使用色彩時(shí)保持謹(jǐn)慎

在線(xiàn)框原型中，彩色通常被用于注釋。在必要的時(shí)候，我們也可以用特殊的顏色對(duì)那些特別需要用戶(hù)注意的界面元素進(jìn)行標(biāo)注，或是用來(lái)表達(dá)出錯(cuò)信息一類(lèi)的狀態(tài)類(lèi)內(nèi)容。不過(guò)要記得，在進(jìn)行原型測(cè)試的時(shí)候不要使用帶有色彩注釋的版本，原因是顯而易見(jiàn)的，我們不希望被測(cè)用戶(hù)被這些“突出”的元素引導(dǎo)或干擾。

5.確保交互元素明確易懂

交互元素的呈現(xiàn)方式應(yīng)該符合它的用途，例如按鈕看上去應(yīng)該可以被點(diǎn)擊。這些細(xì)節(jié)當(dāng)中的視覺(jué)表現(xiàn)形式的正確與否，會(huì)直接影響視覺(jué)設(shè)計(jì)師及開(kāi)發(fā)人員對(duì)原型的理解；不具備自解釋性的交互元素所帶來(lái)的潛在體驗(yàn)問(wèn)題也會(huì)暴露在可用性測(cè)試當(dāng)中。6.以實(shí)際像素為單位

如果你使用HTML配合樣式代碼來(lái)制作原型（[color=rgb(0,153,204)]使用前端開(kāi)發(fā)框架快速創(chuàng)建頁(yè)面原型），那么這個(gè)問(wèn)題基本不存在，因?yàn)槟阃ǔＰ枰�以像素為單位為容器設(shè)置寬度或高度屬性。不過(guò)在多數(shù)時(shí)候，我們創(chuàng)建的是純粹的線(xiàn)框圖。以實(shí)際像素為單位對(duì)頁(yè)面布局及元素尺寸進(jìn)行一定程度的規(guī)劃和說(shuō)明，這將幫助我們自己以及視覺(jué)設(shè)計(jì)師在接下來(lái)的工作當(dāng)中省掉很多“猜測(cè)”與“估算”的過(guò)程。我曾經(jīng)習(xí)慣于使用Powerpoint來(lái)制作線(xiàn)框原型，這種方式只能展示元素之間大致的尺寸和位置關(guān)系；當(dāng)項(xiàng)目進(jìn)入視覺(jué)設(shè)計(jì)流程，它無(wú)法有效的幫助我與設(shè)計(jì)師進(jìn)行溝通，造成了不少的麻煩。

7.創(chuàng)建變更日志

隨著迭代的不斷進(jìn)行，每一版線(xiàn)框原型當(dāng)中的變更通常會(huì)越來(lái)越細(xì)化，從頁(yè)面結(jié)構(gòu)到模塊、控件，這會(huì)使跟進(jìn)后續(xù)工作的設(shè)計(jì)師或開(kāi)發(fā)人員越來(lái)越難以發(fā)現(xiàn)所有的變化。作為交互設(shè)計(jì)師，我們有責(zé)任創(chuàng)建一份變更日志，并隨著項(xiàng)目的發(fā)展對(duì)其進(jìn)行持續(xù)的更新。日志中的每一條記錄都要包含日期、版本號(hào)、執(zhí)行者以及變更說(shuō)明。這種信息交流的方式不需要花費(fèi)太多的時(shí)間，但結(jié)果卻是事半功倍的，無(wú)論產(chǎn)品人員還是設(shè)計(jì)師、開(kāi)發(fā)者，大家都可以籍此來(lái)一目了然的跟蹤原型的版本變化。":[{"c":{"ix":0,"iy":0,"iw":628,"ih":1080},"p":{"h":1080,"w":628,"x":159,"y":108,"z":0},"ps":{"_drop":1,"_vector":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":1085,"iw":637,"ih":1081},"p":{"h":1081,"w":637,"x":154,"y":107,"z":1},"ps":{"_drop":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":2171,"iw":918,"ih":1081},"p":{"h":1081,"opacity":1,"w":917.999,"x":0,"y":107.999,"z":2},"ps":null,"s":{"pic_file":"/home/iknow/conv//data//bdef//144187517//144187517_10_2.png"},"t":"pic"}],"page":{"ph":1188,"pw":918,"iw":918,"ih":3252,"v":6,"t":"4","pptlike":false,"cx":0,"cy":103,"cw":917.999,"ch":1085}})9.避免深色線(xiàn)框滿(mǎn)頁(yè)面的深色線(xiàn)框會(huì)使你的原型看上去缺乏層次、粗糙凌亂。正像我們?cè)诘谝稽c(diǎn)當(dāng)中所說(shuō)的，試著使用不同明度的灰色作為背景色來(lái)界定頁(yè)面和模塊的邊緣。這樣不僅能表現(xiàn)出界面元素的視覺(jué)優(yōu)先級(jí)，而且可以使整個(gè)原型看上去更加整潔。如果必須在某些地方使用線(xiàn)條，那么盡量使用纖細(xì)的灰色實(shí)線(xiàn)或點(diǎn)狀線(xiàn)。我們固然不需要讓線(xiàn)框原型看上去像視覺(jué)稿一樣完美，但對(duì)這些細(xì)節(jié)的把握確實(shí)可以讓它更加簡(jiǎn)潔精美；在實(shí)際工作中，這往往可以提升原型被接納的程度。

10.保持跟進(jìn)這一點(diǎn)更加偏向于交付流程，而非設(shè)計(jì)技巧。完成線(xiàn)框原型后，我們不能只是簡(jiǎn)單的把它扔給跟進(jìn)后續(xù)工作的同事�；ㄐ�時(shí)間去支援視覺(jué)設(shè)計(jì)師或開(kāi)發(fā)人員的工作，只有他們才能將你的設(shè)計(jì)概念最終落實(shí)到實(shí)際當(dāng)中。通常，交互原型當(dāng)中所包含的想法、操作邏輯等方面的信息難以即全面又準(zhǔn)確的被大家理解，而且其中隱含的問(wèn)題有可能在后續(xù)階段才能體現(xiàn)出來(lái)。我們有必要在交付原型之后保持跟進(jìn)，與大家協(xié)同作戰(zhàn)。以上就是關(guān)于提升線(xiàn)框原型溝通能力的十點(diǎn)建議。可以參考我們之前的文章“線(xiàn)框原型的本質(zhì)及實(shí)踐應(yīng)用概述”，了解更多關(guān)于線(xiàn)框原型的基本理念及運(yùn)用方法。BY：BeForWeb

良知塾交互設(shè)計(jì)分享：【交互設(shè)計(jì)】淘寶購(gòu)便利交互設(shè)計(jì)心得

友情提示：本文中關(guān)于《【交互設(shè)計(jì)】淘寶購(gòu)便利交互設(shè)計(jì)心得》給出的范例僅供您參考拓展思維使用，【交互設(shè)計(jì)】淘寶購(gòu)便利交互設(shè)計(jì)心得：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《【交互設(shè)計(jì)】淘寶購(gòu)便利交互設(shè)計(jì)心得》由互聯(lián)網(wǎng)用戶(hù)整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://www.weilaioem.com/gongwen/650752.html

• 上一篇：建筑鋼結(jié)構(gòu)的設(shè)計(jì)理念和心得
• 下一篇：職業(yè)學(xué)校教師繼續(xù)教育培訓(xùn)學(xué)習(xí)心得