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

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

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

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

1、訪談

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

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

2、項目簡介

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

通常，項目簡介會回答以下問題：

?我們正在試圖達(dá)到什么目的？
?我們?nèi)绾未_認(rèn)這個項目是成功的？
?我們需要做什么事情？
?我們?yōu)槭裁葱枰@樣做？
?哪些事情是非做不可的？
?我們?yōu)檎l在做這些事情？
?他們?nèi)绾瘟私膺@些事情？
?項目團隊中包含哪些人？
?我們的最后期限是什么時候？

3、競品分析

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

我們會對比我們和對手之間的優(yōu)勢、劣勢，我們碰到的機遇，獨有的特色，以及需要規(guī)避的問題。

4、信息架構(gòu)

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

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

5、線框圖

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

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

高精度的Shopify Plus 重設(shè)計線框圖

6、啟發(fā)板

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

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

當(dāng)我有想法的時候，會在AI中進行勾勒，它們通常都是文字、圖像和色彩的結(jié)合體，看起來形同廣告。隨后，相同相近的設(shè)計元素會出現(xiàn)在我們的草稿中，不過其中各元素的位置和外觀，會有所不同，并且有許多不同的版本。

Shopify Plus 的啟發(fā)板

在啟發(fā)板上對Shopify Plus品牌進行探索

7、視覺稿和原型

很多人并不在意印在紙上的線框圖和視覺稿。的確，直接在屏幕上看看還挺不錯，但是直接查看落實于紙面上的線框圖、視覺稿和原型效果更好。

另外，我在線框圖繪制階段就開始制作可交互的視覺稿（原型？），并且拿這些東西同客戶進行溝通交流，一直到它們最終被落實為代碼和實際的從程序。

Shopify Plus 的InVision 項目頁面

為Shopify Plus 搜集反饋

結(jié)語

雖然許多設(shè)計機構(gòu)傾向于嚴(yán)格遵循流程來進行設(shè)計，但是我們通常是將上述7個環(huán)節(jié)混合到一起進行的。使用真正符合你實際工作的流程，才是成功搞定重設(shè)計的核心。

【必知的線框圖與原型知識】

線框圖、視覺稿與原型的區(qū)別：
《術(shù)語小科普！聊聊線框稿、視覺稿與原型的區(qū)別》

發(fā)展歷史：
《姿勢大漲！你了解線框圖和原型的過去、現(xiàn)在與將來嗎？》

線框圖繪制技巧：
《給交互的同學(xué)！有哪些手繪線框圖的小技巧？》

原文地址：invisionapp
優(yōu)設(shè)譯者：@陳子木

「子木說」

線框圖、原型、視覺稿有明顯的區(qū)別，但是在功能上確實有著諸多相近的地方，根據(jù)項目和成員角色的不同，很多設(shè)計團隊并不會三者都畫。許多時候是PM畫個線框圖，設(shè)計師出個視覺稿就開始開發(fā)了。好在越來越多的低保真原型工具逐步涌現(xiàn)，一次性搞定快速、低保真原型成為了可能。

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量96萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：