網(wǎng)站更新迭代重新設(shè)計(jì)恐怕是許多網(wǎng)站必經(jīng)的環(huán)節(jié)，如何做好網(wǎng)頁(yè)重設(shè)計(jì)也是許多做網(wǎng)站的公司設(shè)計(jì)師和產(chǎn)品人需要考量的事情。今天的這篇文章就是著名電商平臺(tái)Shopify針對(duì)旗下企業(yè)服務(wù)平臺(tái)Shopify Plus重設(shè)計(jì)改版的一些經(jīng)驗(yàn)總結(jié)，希望能給大家?guī)��?lái)一些啟示~~~

Shopify Plus 是Shopify 的企業(yè)版電子商務(wù)托管平臺(tái)，自從2014年2月發(fā)布之后，至今只做過(guò)一次更新迭代，也正是在這種情況下，我提出了對(duì)網(wǎng)站進(jìn)行重設(shè)計(jì)的建議。

在這長(zhǎng)達(dá)一年的時(shí)間里，做網(wǎng)站的公司對(duì)于自己的客戶有更加深入的了解，也清楚地認(rèn)識(shí)到老品牌和舊設(shè)計(jì)已經(jīng)不再適應(yīng)現(xiàn)在的情況了。

不同的公司和不同的團(tuán)隊(duì)，對(duì)于重設(shè)計(jì)有著不同的需求和考量，自然也就有著不同的流程。我們并未遵循某種特定流程，但是在迭代過(guò)程中，我們做好了下面7件環(huán)節(jié)，最終得到了我們想要的結(jié)果。

1、訪談

我對(duì)我們的決策團(tuán)隊(duì)的每一個(gè)成員進(jìn)行了一對(duì)一的面談，借此明確他們心中的Shopify Plus 到底是什么。為了接近真實(shí)，每次訪談我都會(huì)作筆記并且錄音，隨后繁復(fù)回放，仔細(xì)研究。

訪談之后，通常能從中獲取靈感——從那里能了解關(guān)于產(chǎn)品的各種細(xì)節(jié)。這樣一來(lái)，無(wú)論是產(chǎn)品未來(lái)的愿景、目標(biāo)、品牌指南、項(xiàng)目原則還是網(wǎng)站文案，都比較容易確認(rèn)。作為一個(gè)網(wǎng)站而言，更好的傳達(dá)信息，才能真正讓用戶感到驚喜。

2、項(xiàng)目簡(jiǎn)介

在真正開(kāi)始深入開(kāi)發(fā)之前，我們需要寫一份項(xiàng)目簡(jiǎn)介，確保每個(gè)參與者的信息和進(jìn)度保持一致。我們會(huì)根據(jù)項(xiàng)目的實(shí)際情況，隨時(shí)對(duì)簡(jiǎn)介內(nèi)容進(jìn)行調(diào)整和修改，實(shí)時(shí)更新。

通常，項(xiàng)目簡(jiǎn)介會(huì)回答以下問(wèn)題：

•我們正在試圖達(dá)到什么目的？

•我們?nèi)绾未_認(rèn)這個(gè)項(xiàng)目是成功的？

•我們需要做什么事情？

•我們?yōu)槭裁葱枰�這樣做？

•哪些事情是非做不可的？

•我們?yōu)檎l(shuí)在做這些事情？

•他們?nèi)绾瘟私膺@些事情？

•項(xiàng)目團(tuán)隊(duì)中包含哪些人？

•我們的最后期限是什么時(shí)候？

3、競(jìng)品分析

我們還需要仔細(xì)審視我們的對(duì)手。為此我們列出了競(jìng)爭(zhēng)對(duì)手的列表，并開(kāi)始了解在電子商務(wù)領(lǐng)域以外我們的產(chǎn)品如何服務(wù)于目標(biāo)客戶的。

我們會(huì)對(duì)比我們和對(duì)手之間的優(yōu)勢(shì)、劣勢(shì)，我們碰到的機(jī)遇，獨(dú)有的特色，以及需要規(guī)避的問(wèn)題。

4、信息架構(gòu)

合理可靠的信息架構(gòu)能夠有效地將內(nèi)容組織起來(lái)，讓信息更容易被用戶獲取并理解。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，用結(jié)構(gòu)化的示意圖來(lái)呈現(xiàn)整個(gè)網(wǎng)站各屏之間的關(guān)系，能夠使你從更高的層面上來(lái)把握整個(gè)網(wǎng)站。

于是，我先用結(jié)構(gòu)示意圖畫出老版本網(wǎng)站的各屏關(guān)系。在更新升級(jí)之前，我充分屏幕了其中的內(nèi)容、目標(biāo)和流量分布，并提出了建議。結(jié)構(gòu)示意圖幫助我們界定項(xiàng)目實(shí)施的范疇，就像一份詳盡的核對(duì)清單，讓我們?cè)诮M織內(nèi)容、設(shè)計(jì)界面、編寫代碼的時(shí)候更為清晰明了。

5、線框圖

在重設(shè)計(jì)過(guò)程中，我會(huì)使用線框圖來(lái)勾勒整體，幫我思考問(wèn)題，打通思路。有人喜歡在將想法涂鴉在餐巾紙之上，有人喜歡面對(duì)面分享想法，還有人喜歡將想法落實(shí)于草稿在線分享。

線框圖的好處在于，你可以快速、便捷地填充不同的內(nèi)容。僅落實(shí)于文檔的思路不夠具象，粗略的草稿不夠規(guī)整，線框圖能較好規(guī)避這些問(wèn)題，不同類型的內(nèi)容整齊地排列在一起，你可以清晰掌控布局，模塊與模塊之間的關(guān)系。

6、啟發(fā)板

我們會(huì)在啟發(fā)版（Inspiration board）上展現(xiàn)新品牌的視覺(jué)設(shè)計(jì)，展現(xiàn)它可能的樣子，這也是我從團(tuán)隊(duì)獲取支持的一種方式。

同時(shí)我們還會(huì)使用Pinterest，為了防止我們?cè)趩蝹�(gè)畫板中泥足深陷，我們創(chuàng)造了多個(gè)畫板，為導(dǎo)航、動(dòng)效、排版等不同領(lǐng)域，有針對(duì)性地搜集案例，獲取靈感。