網站更新叠代重新設計恐怕是許多網站必經(jīng)的環節，如何做好(hǎo)網頁重設計也是許多設計師和産品人需要考量的事(shì)情。今天的這(zhè)篇文章就是著名電商平台Shopify針對(duì)旗下企業服務平台Shopify Plus重設計

改版的一些經(jīng)驗總結，希望能(néng)給大家帶來一些啓示~~~

Shopify Plus 是Shopify 的企業版電子商務托管平台，自從2014年2月發(fā)布之後(hòu)，至今隻做過(guò)一次更新叠代，也正是在這(zhè)種(zhǒng)情況下，我提出了對(duì)網站進(jìn)行重設計的建議。

在這(zhè)長(cháng)達一年的時間裡(lǐ)，我們對(duì)于自己的客戶有更加深入的了解，也清楚地認識到老品牌和舊設計已經(jīng)不再适應現在的情況了。

不同的公司和不同的團隊，對(duì)于重設計有著(zhe)不同的需求和考量，自然也就有著(zhe)不同的流程。我們并未遵循某種(zhǒng)特定流程，但是在叠代過(guò)程中，我們做好(hǎo)了下面(miàn)7件環節，最終得到了我們想要的結果。

1、訪談

我對(duì)我們的決策團隊的每一個成(chéng)員進(jìn)行了一對(duì)一的面(miàn)談，借此明确他們心中的Shopify Plus 到底是什麼(me)。爲了接近真實，每次訪談我都(dōu)會作筆記并且錄音，随後(hòu)繁複回放，仔細研究。

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

訪談之後(hòu)，通常能(néng)從中獲取靈感——從那裡(lǐ)能(néng)了解關于産品的各種(zhǒng)細節。這(zhè)樣(yàng)一來，無論是産品未來的願景、目标、品牌指南、項目原則還(hái)是網站文案，都(dōu)比較容易确認。作爲一個網站而言，更好(hǎo)的傳

達信息，才能(néng)真正讓用戶感到驚喜。

2、項目簡介

在真正開(kāi)始深入開(kāi)發(fā)之前，我們需要寫一份項目簡介，确保每個參與者的信息和進(jìn)度保持一緻。我們會根據項目的實際情況，随時對(duì)簡介内容進(jìn)行調整和修改，實時更新。

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

?我們正在試圖達到什麼(me)目的？

?我們如何确認這(zhè)個項目是成(chéng)功的？

?我們需要做什麼(me)事(shì)情？

?我們爲什麼(me)需要這(zhè)樣(yàng)做？

?哪些事(shì)情是非做不可的？

?我們爲誰在做這(zhè)些事(shì)情？

?他們如何了解這(zhè)些事(shì)情？

?項目團隊中包含哪些人？

?我們的最後(hòu)期限是什麼(me)時候？

3、競品分析

我們還(hái)需要仔細審視我們的對(duì)手。爲此我們列出了競争對(duì)手的列表，并開(kāi)始了解在電子商務領域以外我們的産品如何服務于目标客戶的。

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

4、信息架構

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

站。

于是，我先用結構示意圖畫出老版本網站的各屏關系。在更新升級之前，我充分屏幕了其中的内容、目标和流量分布，并提出了建議。結構示意圖幫助我們界定項目實施的範疇，就像一份詳盡的核對(duì)清

單，讓我們在組織内容、設計界面(miàn)、編寫代碼的時候更爲清晰明了。

5、線框圖

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

線框圖的好(hǎo)處在于，你可以快速、便捷地填充不同的内容。僅落實于文檔的思路不夠具象，粗略的草稿不夠規整，線框圖能(néng)較好(hǎo)規避這(zhè)些問題，不同類型的内容整齊地排列在一起(qǐ)，你可以清晰掌控布局

，模塊與模塊之間的關系。

6、啓發(fā)闆

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

同時我們還(hái)會使用Pinterest，爲了防止我們在單個畫闆中泥足深陷，我們創造了多個畫闆，爲導航、動效、排版等不同領域，有針對(duì)性地搜集案例，獲取靈感。

當我有想法的時候，會在AI中進(jìn)行勾勒，它們通常都(dōu)是文字、圖像和色彩的結合體，看起(qǐ)來形同廣告。随後(hòu)，相同相近的設計元素會出現在我們的草稿中，不過(guò)其中各元素的位置和外觀，會有所不同，

并且有許多不同的版本。

mood-board

Shopify Plus 的啓發(fā)闆

other-mood-boards

在啓發(fā)闆上對(duì)Shopify Plus品牌進(jìn)行探索

7、視覺稿和原型

很多人并不在意印在紙上的線框圖和視覺稿。的确，直接在屏幕上看看還(hái)挺不錯，但是直接查看落實于紙面(miàn)上的線框圖、視覺稿和原型效果更好(hǎo)。

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

invision-mock

Shopify Plus 的InVision 項目頁面(miàn)

invision-mock-1

爲Shopify Plus 搜集反饋

結語

雖然許多設計機構傾向(xiàng)于嚴格遵循流程來進(jìn)行設計，但是我們通常是將(jiāng)上述7個環節混合到一起(qǐ)進(jìn)行的。使用真正符合你實際工作的流程，才是成(chéng)功搞定重設計的核心。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。