一级女人毛片人一女人,被几个人绑起来玩到高潮,久久久WWW成人免费毛片

如何從零開(kāi)始設(shè)計(jì)一個(gè)購(gòu)物網(wǎng)站？送你這份高手流程！

2020-8-31 周周

在這個(gè)項(xiàng)目中，主要任務(wù)是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設(shè)計(jì)一個(gè)全新的品牌電商網(wǎng)站。

新電商網(wǎng)站最主要的目的是吸引顧客前往線下店鋪選購(gòu)商品，同時(shí)也希望通過(guò)快遞和門(mén)店自提的方式來(lái)完善線上銷(xiāo)售流程，拓展消費(fèi)群體。

該網(wǎng)站需要鞏固品牌核心業(yè)務(wù)價(jià)值觀：傳統(tǒng)，有趣和創(chuàng)意。該網(wǎng)站還需要通過(guò)強(qiáng)調(diào)其龐大的庫(kù)存體量和手工精選商品來(lái)將 Jeffrey’s Toys 和其他電子商務(wù)零售商區(qū)分開(kāi)。

該網(wǎng)站的主要業(yè)務(wù)目標(biāo)包括：

能快速定位商品
每一個(gè)商品都有單獨(dú)的詳情頁(yè)
用戶(hù)能成功購(gòu)買(mǎi)一個(gè)或多個(gè)商品
為爆款商品引流

用戶(hù)分析

1. 用戶(hù)畫(huà)像

誰(shuí)才是這個(gè)網(wǎng)站真正的用戶(hù)？當(dāng)我接到這個(gè)任務(wù)的時(shí)候，客戶(hù)已經(jīng)繪制出了3個(gè)用戶(hù)畫(huà)像，每個(gè)用戶(hù)畫(huà)像都有特定的需求和痛點(diǎn)。

△ 客戶(hù)繪制的三個(gè)用戶(hù)畫(huà)像

基于三個(gè)用戶(hù)畫(huà)像，我確定了該網(wǎng)站要滿(mǎn)足的用戶(hù)需求，同時(shí)也考慮了Jeffrey’s Toys的需求。

確定的主要需求是：

通過(guò)清晰的商品組織分類(lèi)來(lái)提供流暢的電商購(gòu)物體驗(yàn)
通過(guò)商品搜索使用戶(hù)能夠快速找到想要的商品
通過(guò)實(shí)用的商品推薦來(lái)體現(xiàn) Jeffrey’s Toys 的專(zhuān)業(yè)以及龐大的庫(kù)存
通過(guò)與用戶(hù)建立品牌關(guān)系來(lái)樹(shù)立信任
通過(guò)產(chǎn)品細(xì)節(jié)信息來(lái)確保用戶(hù)選購(gòu)合適的商品
通過(guò)商品評(píng)論來(lái)輔助用戶(hù)作出消費(fèi)決策并允許用戶(hù)進(jìn)行商品反饋
通過(guò)的下單結(jié)賬流程簡(jiǎn)化購(gòu)買(mǎi)行為并節(jié)省用戶(hù)時(shí)間

2. 競(jìng)品分析

為了獲得啟發(fā)，我確定了3個(gè)主要競(jìng)品，特別是舊金山的精品玩具店；還有3個(gè)玩具零售市場(chǎng)的間接競(jìng)品。直接競(jìng)品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競(jìng)品分析了 Lululemon 、Ikea 和 CVS 。競(jìng)品分析的目的是比較并找出這些電商網(wǎng)站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機(jī)會(huì)。

競(jìng)品分析最重要的收獲是了解了不同的電商網(wǎng)站的商品選擇模塊以及網(wǎng)站整體的布局。這些信息有助于鞏固我第二階段的研究。

△ 比較直接競(jìng)品和間接競(jìng)品的特征

2. 思維導(dǎo)圖

在完成競(jìng)品分析之后，我把這個(gè)項(xiàng)目中用戶(hù)的需求和客戶(hù)的需求列成了長(zhǎng)長(zhǎng)的信息清單。之后我又通過(guò)思維導(dǎo)圖來(lái)理清了在這個(gè)項(xiàng)目中用戶(hù)的需求和客戶(hù)的需求。思維導(dǎo)圖幫助我將信息組織成更清晰的想法，同時(shí)在各個(gè)想法之間建立層次結(jié)構(gòu)關(guān)系。

△ 用來(lái)理清信息和想法的思維導(dǎo)圖

信息架構(gòu)

接下來(lái)我通過(guò)卡片分類(lèi)法來(lái)構(gòu)造網(wǎng)站的導(dǎo)航系統(tǒng)，卡片分類(lèi)法是一種利用人們現(xiàn)有思維模型的研究技術(shù)。在構(gòu)造導(dǎo)航系統(tǒng)時(shí)，我了解到94種商店中最暢銷(xiāo)的商品庫(kù)存信息。擁有如此龐大的商品庫(kù)存，就很有必要通過(guò)清晰易懂的方式組織、分類(lèi)庫(kù)存信息，以便用戶(hù)能夠快速的找到他們想要的商品。

1. 卡片分類(lèi)

△ 卡片分類(lèi)的初期階段

開(kāi)放式卡片分類(lèi)：我要求9位參與調(diào)研的用戶(hù)通過(guò)他們自己覺(jué)得合理的分類(lèi)規(guī)則將94種商品分類(lèi)，然后給每個(gè)類(lèi)別加上他們認(rèn)為能夠準(zhǔn)確描述該類(lèi)別的標(biāo)簽。這樣做的目的是對(duì)于網(wǎng)站潛在的商品分類(lèi)方式及類(lèi)別名稱(chēng)有一個(gè)大致的了解。

封閉式卡片分類(lèi)：基于開(kāi)放式卡片分類(lèi)的結(jié)果，我從最常見(jiàn)的類(lèi)別標(biāo)簽中創(chuàng)建了13個(gè)預(yù)定類(lèi)別。然后，我進(jìn)行了封閉式的卡片分類(lèi)，我邀請(qǐng)了20位參與調(diào)研的用戶(hù)將商品逐一分類(lèi)到我之前預(yù)定的13種類(lèi)別中。封閉式卡片分類(lèi)有助于讓我在進(jìn)行設(shè)計(jì)之前能夠清楚判斷這些類(lèi)別是否符合大部分網(wǎng)站用戶(hù)的分類(lèi)邏輯。

△ 通過(guò)卡片分類(lèi)得到的13種商品類(lèi)別

2. 站點(diǎn)圖

根據(jù)卡片分類(lèi)以及競(jìng)品分析的結(jié)果，我繪制了網(wǎng)站的站點(diǎn)圖來(lái)明確整個(gè)網(wǎng)站的框架結(jié)構(gòu)。這是為了確保所有產(chǎn)品都放置在用戶(hù)期望的位置，同時(shí)使購(gòu)物體驗(yàn)更加直觀。

△ 站點(diǎn)地圖

3. 系統(tǒng)架構(gòu)圖

為了對(duì)用戶(hù)將會(huì)如何瀏覽網(wǎng)站有一個(gè)全面的概述，我繪制一張系統(tǒng)架構(gòu)圖。這樣做的主要目的是為了了解網(wǎng)站應(yīng)該給用戶(hù)提供什么功能以及功能拓展的廣度。我還通過(guò)系統(tǒng)架構(gòu)圖來(lái)探索電商網(wǎng)站和實(shí)體店鋪之間的聯(lián)系。

△ 系統(tǒng)架構(gòu)圖演示用戶(hù)將會(huì)如何瀏覽網(wǎng)站

4. 用戶(hù)流程

在確定了我需要給用戶(hù)提供的體驗(yàn)「全局」之后，我為每一個(gè)用戶(hù)畫(huà)像創(chuàng)建了不同的用戶(hù)流程，通過(guò)不同的用戶(hù)流程來(lái)使購(gòu)物體驗(yàn)更加符合他們的需求。構(gòu)建用戶(hù)流程的目的是確定每個(gè)用戶(hù)為了實(shí)現(xiàn)各自的預(yù)期目標(biāo)經(jīng)過(guò)的頁(yè)面和操作步驟。這不僅能使我專(zhuān)注于每個(gè)用戶(hù)的操作，也使我能夠在設(shè)計(jì)網(wǎng)站的時(shí)候?qū)⒐δ懿鸱郑员憬o用戶(hù)提供更佳的購(gòu)物體驗(yàn)。

我繪制的第一個(gè)用戶(hù)流程是關(guān)于用戶(hù)畫(huà)像是 Jenny 的。Jenny 最主要的目是為自己的孫子購(gòu)買(mǎi)初級(jí)魔術(shù)玩具。Jenny 的用戶(hù)流程（如下圖所示）表明了她是如何搜索初級(jí)魔術(shù)玩具，以及為了成功購(gòu)買(mǎi)她可能采取的幾種不同路徑。

△ Jenny 的用戶(hù)流程

Debbie 和 Jenny 都希望能有一個(gè)的下單結(jié)賬流程，所以很有必要在用戶(hù)流程中繪制出下單結(jié)賬流程。下圖的用戶(hù)流程顯示了Debbie在選定一個(gè)特技自行車(chē)之后該如何進(jìn)行結(jié)賬下單。通過(guò)允許她登錄自己的帳號(hào)，自動(dòng)輸入她的結(jié)賬信息來(lái)簡(jiǎn)化她的結(jié)賬下單流程。

△ Debbie 的用戶(hù)流程

開(kāi)發(fā)階段

1. 草稿

在我整理了前期獲取的所有信息之后，我就開(kāi)始著手設(shè)計(jì)網(wǎng)站?；谥罢沓鰜?lái)的用戶(hù)流程圖，我開(kāi)始繪制幾個(gè)主要頁(yè)面的草圖，同時(shí)快速思考出幾個(gè)不同的網(wǎng)站布局方案。之后我邀請(qǐng)3個(gè)用戶(hù)參與了用戶(hù)調(diào)研，以驗(yàn)證這些方案是否同時(shí)滿(mǎn)足客戶(hù)和網(wǎng)站用戶(hù)的需求。

△ 網(wǎng)站首頁(yè)和品類(lèi)頁(yè)面的初稿

2. 線框圖

基于用戶(hù)對(duì)草圖的反饋和我個(gè)人的想法，我開(kāi)始使用Figma來(lái)繪制線框圖。整個(gè)過(guò)程中，根據(jù)優(yōu)先級(jí)不同，優(yōu)先考慮最能滿(mǎn)足網(wǎng)站用戶(hù)的功能。

△ 網(wǎng)站首頁(yè)和產(chǎn)品詳情頁(yè)的線框圖

原型制作

1. 主頁(yè)

首頁(yè)我盡可能的保持簡(jiǎn)潔，避免用戶(hù)進(jìn)入網(wǎng)站時(shí)被過(guò)多的信息干擾而不知所措。

首頁(yè)放置了全局導(dǎo)航、輔助導(dǎo)航和搜索欄，方便用戶(hù)快捷的找到自己想要的商品。首頁(yè)還放置了新品推薦，因?yàn)樾缕吠扑]能夠展示品牌豐富的庫(kù)存，同時(shí)能為用戶(hù)提供有用的購(gòu)買(mǎi)建議。我想通過(guò)介紹 Jeffrey’s Toys 豐富的歷史來(lái)樹(shù)立用戶(hù)品牌聯(lián)系，所以在首頁(yè)我還放置了「關(guān)于我們」部分，用戶(hù)點(diǎn)擊還可跳轉(zhuǎn)到具體的介紹頁(yè)面查看更多關(guān)于品牌故事的信息。在頁(yè)腳，我放置了其他的用戶(hù)可能需要的信息。除此之外，我還將用戶(hù)交流系統(tǒng)放在頁(yè)腳，這樣是為了獲得用戶(hù)想法并在店鋪進(jìn)行活動(dòng)時(shí)通過(guò)用戶(hù)參與提高店鋪活動(dòng)氛圍。

2. 商品類(lèi)別頁(yè)面

當(dāng)用戶(hù)點(diǎn)擊商店按鈕或者是某個(gè)類(lèi)別之后，用戶(hù)將會(huì)前往一個(gè)列出了該類(lèi)別下所有商品的商品列表頁(yè)。有個(gè)用戶(hù)畫(huà)像想要給他的孫子買(mǎi)一個(gè)合適他孫子年齡的玩具，所以頁(yè)面需要一個(gè)品類(lèi)篩選器，同時(shí)支持商品按照不同的屬性例如年齡、價(jià)格和品牌分類(lèi)也很重要。除此之外，我還通過(guò)面包屑導(dǎo)航來(lái)方便用戶(hù)定位頁(yè)面位置。

△ 商品類(lèi)別頁(yè)線框圖

3. 商品詳情頁(yè)

在商品詳情頁(yè)，我希望能夠提供盡可能多的商品詳情來(lái)確保這個(gè)商品是用戶(hù)想要的。

在頁(yè)面下方，網(wǎng)站會(huì)基于當(dāng)前商品給用戶(hù)推薦其他相似商品。在商品詳情頁(yè)，產(chǎn)品評(píng)論區(qū)占了很大一部分，因?yàn)橛脩?hù)可以在產(chǎn)品評(píng)論區(qū)反饋商品信息，便于樹(shù)立用戶(hù)信任，同時(shí)用戶(hù)能夠通過(guò)其他用戶(hù)的評(píng)論來(lái)作出更明智的購(gòu)買(mǎi)決定。為了簡(jiǎn)化下單流程，我設(shè)計(jì)了一個(gè)購(gòu)物車(chē)預(yù)覽頁(yè)，用戶(hù)在購(gòu)物車(chē)預(yù)覽頁(yè)可以預(yù)覽商品信息，用戶(hù)每次將商品加入購(gòu)物車(chē)后都會(huì)出現(xiàn)購(gòu)物車(chē)預(yù)覽頁(yè)，在購(gòu)物車(chē)預(yù)覽頁(yè)面，用戶(hù)可以很方便的點(diǎn)擊「選好了」按鈕而進(jìn)入結(jié)賬下單流程。

△ 商品詳情頁(yè)線框圖

4. 購(gòu)物車(chē)預(yù)覽頁(yè)

當(dāng)用戶(hù)點(diǎn)擊「選好了」按鈕或者是購(gòu)物車(chē)按鈕，用戶(hù)將會(huì)進(jìn)入到一個(gè)如下圖所示的購(gòu)物車(chē)預(yù)覽頁(yè)。這是結(jié)賬下單流程的第一步，用戶(hù)在購(gòu)物車(chē)可以管理他們所選的商品，作出合適的調(diào)整。用戶(hù)在下單時(shí)，可以選擇到店自提或者是物流配送，設(shè)置到店自提是為了引導(dǎo)用戶(hù)去 Jeffrey’s Toy的線下店鋪，同時(shí)降低運(yùn)輸成本。

△ 購(gòu)物車(chē)預(yù)覽頁(yè)線框圖

5. 結(jié)帳頁(yè)面

客戶(hù)提供的三個(gè)用戶(hù)畫(huà)像的主要痛點(diǎn)之一就是想要有一個(gè)的結(jié)賬流程，所以我得確保結(jié)賬下單體驗(yàn)要盡可能的流暢。作為一個(gè)回頭客，用戶(hù)可以選擇登錄自己的帳號(hào)，并自動(dòng)保存物流信息和支付信息。我決定在一個(gè)頁(yè)面上承載全部的結(jié)賬流程，這樣方便用戶(hù)在結(jié)賬流程中任何時(shí)刻都能編輯信息。頂部的進(jìn)度欄顯示了下單結(jié)賬流程有多少步，用戶(hù)當(dāng)前在哪一步以及用戶(hù)還剩下多少步驟。

△ 登錄頁(yè)

△ 下單頁(yè)

△ 訂單查看頁(yè)

6. 其他畫(huà)面

我還創(chuàng)建了一些其他頁(yè)面，例如訂單確認(rèn)頁(yè)面。訂單確認(rèn)頁(yè)面明確告知用戶(hù)結(jié)賬流程已經(jīng)完成了，用戶(hù)還能在訂單確認(rèn)頁(yè)查看有關(guān)訂單的其他信息，以供參考。

我創(chuàng)建了一個(gè)店鋪聯(lián)系頁(yè)面，當(dāng)用戶(hù)在網(wǎng)站找不到想要的商品時(shí)，可以在店鋪聯(lián)系頁(yè)面查詢(xún)線下店鋪商品情況以及店鋪的營(yíng)業(yè)時(shí)間、位置和聯(lián)系電話。

除此之外我還創(chuàng)建了一個(gè)「關(guān)于頁(yè)面」用來(lái)著重強(qiáng)調(diào) Jeffrey’s Toys 與其他電商網(wǎng)站例如亞馬遜的區(qū)別。我還在這個(gè)頁(yè)面介紹了Jeffrey’s Toys 長(zhǎng)達(dá)60年的獨(dú)特歷史，以增強(qiáng)用戶(hù)對(duì)于品牌傳統(tǒng)、有趣和創(chuàng)意的商業(yè)價(jià)值的印象。

△ 訂單確認(rèn)頁(yè)

△ 聯(lián)系方式頁(yè)

△ 公司介紹頁(yè)

7. 可用性測(cè)試

在完成線框圖之后，我就開(kāi)始繪制網(wǎng)站原型以便進(jìn)行可用性測(cè)試。這使我能夠評(píng)估用戶(hù)將會(huì)如何與網(wǎng)站進(jìn)行交互，也能讓我評(píng)估網(wǎng)站是否滿(mǎn)足了用戶(hù)的基本需求。在進(jìn)行UI設(shè)計(jì)之前，通過(guò)中保真原型進(jìn)行可用性測(cè)試來(lái)獲取潛在用戶(hù)真實(shí)、關(guān)鍵的反饋是很有必要的，可用性測(cè)試還能鞏固網(wǎng)站的功能需求。

我邀請(qǐng)了4位用戶(hù)進(jìn)行可用性測(cè)試，為了讓他們吻合用戶(hù)畫(huà)像中的用戶(hù)特征，我指定了三種用戶(hù)場(chǎng)景來(lái)讓他們完成測(cè)試。這三種用戶(hù)場(chǎng)景包括：

您需要為您的女兒購(gòu)買(mǎi)一個(gè)玩具。您會(huì)怎么查找商品并完成購(gòu)買(mǎi)。
您可以通過(guò)什么方法知道 Jeffrey’s Toys 下個(gè)月將要舉辦的店鋪活動(dòng)。
當(dāng)您在網(wǎng)站上沒(méi)有找到您想要的玩具時(shí)，您將如何查詢(xún)并購(gòu)買(mǎi)。

這些是我通過(guò)可用性測(cè)試得到的用戶(hù)反饋：

總體而言，用戶(hù)能夠輕松地找到想要的產(chǎn)品和信息
在結(jié)賬流程中，促銷(xiāo)活動(dòng)部分會(huì)分散用戶(hù)的注意力
部分用戶(hù)不想通過(guò)電話來(lái)查詢(xún)商品信息，需要提供其他的查詢(xún)方式。
部分用戶(hù)覺(jué)得前往線下店鋪的引導(dǎo)部分還可以增強(qiáng)，目前的引導(dǎo)不夠。

△ 可用性測(cè)試得到的反饋

8. 后續(xù)步驟

這個(gè)案例研究展現(xiàn)的只是電商網(wǎng)站設(shè)計(jì)的開(kāi)端。后續(xù)我將會(huì)繼續(xù)進(jìn)行可用性測(cè)試，并進(jìn)一步迭代我的設(shè)計(jì)。如果有更多的時(shí)間，我將會(huì)著重探索更多從網(wǎng)站引導(dǎo)用戶(hù)前往線下店鋪的方式。我也將會(huì)繼續(xù)豐富網(wǎng)站頁(yè)面并將Jeffrey’s Toys的視覺(jué)風(fēng)格融入到網(wǎng)站中。下圖展示了我最初設(shè)想的UI設(shè)計(jì)風(fēng)格。UI設(shè)計(jì)我希望秉持簡(jiǎn)潔、創(chuàng)意、傳統(tǒng)的設(shè)計(jì)理念。