編輯導(dǎo)語(yǔ)：如何為一個(gè)細(xì)分行業(yè)進(jìn)行設(shè)計(jì)app？這需要設(shè)計(jì)團(tuán)隊(duì)針對(duì)市場(chǎng)調(diào)研、競(jìng)品研究、計(jì)劃設(shè)計(jì)等方面的打算。本篇文章里，作者結(jié)合實(shí)際案例，總結(jié)分享了她設(shè)計(jì)一款app的歷程與收獲，一起來(lái)看一下。

今天我們要來(lái)看一份較完整的設(shè)計(jì)案例，對(duì)于陶藝這個(gè)細(xì)分行業(yè)，作者從桌面研究開始，進(jìn)行了市場(chǎng)調(diào)研、競(jìng)品研究，計(jì)劃設(shè)計(jì)一款電商App。之后進(jìn)行了一系列的設(shè)計(jì)過程，包括信息架構(gòu)設(shè)計(jì)、線框圖及視覺設(shè)計(jì)，并在最后做了評(píng)估和回顧。這是一個(gè)從0到1設(shè)計(jì)產(chǎn)品的完整流程，我們一起來(lái)學(xué)習(xí)一下吧~

一、問題陳述

作為 10kdesigners 課程作業(yè)的一部分，我們需要為某個(gè)特定領(lǐng)域的用戶設(shè)計(jì)一款 App（在我的案例中是陶藝制品）。

以下是我對(duì)于該問題給出的解決方案設(shè)計(jì)過程。

二、調(diào)研

每一個(gè)設(shè)計(jì)項(xiàng)目的開始都很酷。你要去研究一個(gè)你過去所不知道的全新話題。我就是這樣開始的，我對(duì)陶器行業(yè)和電商設(shè)計(jì)模式一無(wú)所知。所以我開始進(jìn)行桌面研究來(lái)填補(bǔ)空白。

1. 為什么亞馬遜和 Flipkart 不行？

（1）如果你搜索陶藝產(chǎn)品，你將會(huì)看到這些結(jié)果

在亞馬遜和Flipkart搜索“陶土”的結(jié)果

（2） 未來(lái)在于細(xì)分市場(chǎng)的電商

“長(zhǎng)尾效應(yīng)”表明，在線電商正在逐漸地遠(yuǎn)離主流產(chǎn)品，轉(zhuǎn)向細(xì)分市場(chǎng)的產(chǎn)品。

2. 為什么是一款A(yù)pp?

數(shù)據(jù)來(lái)源：statista.com

3. 了解陶藝市場(chǎng)及其供應(yīng)鏈

PS：由于時(shí)間限制，本案例研究?jī)H集中于設(shè)計(jì)一個(gè)電商平臺(tái)。

4. 廣義電商的調(diào)研

在這里，我開始了解設(shè)計(jì)是如何幫助建立電商業(yè)務(wù)的，并調(diào)研了大量的app，以了解電商設(shè)計(jì)的模式。

為什么用戶體驗(yàn)在電商行業(yè)中很重要？

簡(jiǎn)單、積極的用戶體驗(yàn) = 利益相關(guān)者的利潤(rùn)（即使轉(zhuǎn)化率相差0.5%，也會(huì)產(chǎn)生數(shù)千美元的差異 ）

調(diào)研的應(yīng)用程序

三、目標(biāo)

在研究的基礎(chǔ)上，我為該項(xiàng)目制定了以下目標(biāo)：

• 讓購(gòu)物變得輕松、快捷、愉快。
• 平衡用戶、流程中的步驟數(shù)和收集的數(shù)據(jù)量，以便快速地通過流程。

四、信息架構(gòu)

1. 產(chǎn)品目錄

我開始尋找各種各樣的陶器產(chǎn)品，它們將成為電子商務(wù)產(chǎn)品目錄的一部分。

像Bhoomi 陶藝、SARA、Mitticool和Creamic Shop這樣的網(wǎng)站也能幫助我參考，對(duì)信息進(jìn)行分類和標(biāo)注。

產(chǎn)品分類目錄

2. App 的信息導(dǎo)航

我的下一個(gè)任務(wù)是設(shè)計(jì) App 的信息導(dǎo)航，我使用了樹狀圖來(lái)繪制整個(gè) App 的流程。

App的信息導(dǎo)航

五、線框圖

現(xiàn)在整體架構(gòu)已經(jīng)完成了，我從畫線框圖開始來(lái)定義內(nèi)容的布局。我遵循的過程很簡(jiǎn)單：

• 首先用純文本寫下頁(yè)面上的內(nèi)容。
• 為每一個(gè)上述內(nèi)容去創(chuàng)建設(shè)計(jì)元素。
• 在不同的布局上迭代。

在我對(duì)布局感到滿意之后，我就到Figma中進(jìn)行視覺設(shè)計(jì)。

六、視覺設(shè)計(jì)

在這里，我開始設(shè)計(jì)所選線框圖的高保真版本，并開始進(jìn)一步迭代和優(yōu)化，以達(dá)到目標(biāo)。

1. 首頁(yè)

首頁(yè)是對(duì)網(wǎng)站和銷售產(chǎn)品范圍的介紹。用戶瀏覽首頁(yè)就應(yīng)該可以看出該店產(chǎn)品的多樣豐富性。

首頁(yè)的迭代設(shè)計(jì)

分類目錄的迭代設(shè)計(jì)

2. 篩選與排序

• 篩選器允許用戶將項(xiàng)目列表縮小到滿足其指定條件的可管理數(shù)量。
• 篩選器還可以幫助經(jīng)驗(yàn)較少的新手用戶使用產(chǎn)品。

在這里，我決定同時(shí)使用多個(gè)篩選器，因?yàn)椋?/p>

• 對(duì)于較慢的網(wǎng)絡(luò)情況效果更好。
• 幫助快速縮小搜索范圍。

3. 搜索

搜索框的迭代設(shè)計(jì)

4. 結(jié)算頁(yè)

在這里，我設(shè)計(jì)多頁(yè)面的結(jié)賬流程，這樣用戶就可以在每一步中專注于一項(xiàng)任務(wù)。這對(duì)用戶比較有幫助，因?yàn)樗麄兛梢钥吹阶约涸诹鞒讨械奈恢?，并且可以輕松地返回到上一個(gè)步驟。

5.其它頁(yè)面

七、衡量指標(biāo)

歸根結(jié)底，這是一個(gè)電商平臺(tái)。因此，衡量指標(biāo)與銷售的產(chǎn)品數(shù)量密切相關(guān)。此外，還可以跟蹤各種 KPI 來(lái)衡量產(chǎn)品的成功與否，并進(jìn)一步改進(jìn)體驗(yàn)。

舉例：

• 購(gòu)物車的跳出率
• 結(jié)帳的跳出率
• 交易量
• 轉(zhuǎn)化率
• 退回的客戶訂單

八、 學(xué)習(xí)與挑戰(zhàn)

• 因?yàn)檫@是我第一次設(shè)計(jì) App，有很多新的東西，所以我從如何按照人機(jī)界面規(guī)則 進(jìn)行設(shè)計(jì)開始學(xué)習(xí)，以及學(xué)習(xí)如何進(jìn)行桌面研究、品牌推廣、設(shè)計(jì)系統(tǒng)的構(gòu)建等。
• 由于做視覺設(shè)計(jì)的迭代花費(fèi)了很多時(shí)間，這幫助我認(rèn)識(shí)到線框圖的重要性。在線框階段作出重要決策是節(jié)省時(shí)間的關(guān)鍵。
• 作為設(shè)計(jì)師，我們?cè)诿恳粋€(gè)像素上都會(huì)做出設(shè)計(jì)決策，但隨著我們的進(jìn)步，我們往往會(huì)忘記什么樣的決策在引領(lǐng)著我們。因此文檔十分重要，它不僅幫助我們跟蹤設(shè)計(jì)，還幫助我們有效地溝通設(shè)計(jì)。
• 項(xiàng)目完成后，我意識(shí)到我所做的研究還不足以啟動(dòng)這樣的一款產(chǎn)品。要推出真正的產(chǎn)品，肯定需要更多的研究來(lái)支持設(shè)計(jì)決策。

作者：Pratik Aher；譯者：彭祎婕；編輯：李莉好

原文鏈接：Designing e-commerce experience for pottery – UI/UX case study | by Pratik Aher | Muzli – Design Inspiration

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。