搞定網(wǎng)頁重設計的7個必要環(huán)節(jié)
網(wǎng)站更新迭代重新設計恐怕是許多網(wǎng)站必經(jīng)的環(huán)節(jié),如何做好網(wǎng)頁重設計也是許多設計師和產(chǎn)品人需要考量的事情。今天的這篇文章就是著名電商平臺Shopify針對旗下企業(yè)服務平臺Shopify Plus重設計改版的一些經(jīng)驗總結,希望能給大家?guī)硪恍﹩⑹緙~~
Shopify Plus 是Shopify 的企業(yè)版電子商務托管平臺,自從2014年2月發(fā)布之后,至今只做過一次更新迭代,也正是在這種情況下,我提出了對網(wǎng)站進行重設計的建議。
在這長達一年的時間里,我們對于自己的客戶有更加深入的了解,也清楚地認識到老品牌和舊設計已經(jīng)不再適應現(xiàn)在的情況了。
不同的公司和不同的團隊,對于重設計有著不同的需求和考量,自然也就有著不同的流程。我們并未遵循某種特定流程,但是在迭代過程中,我們做好了下面7件環(huán)節(jié),最終得到了我們想要的結果。
1、訪談
我對我們的決策團隊的每一個成員進行了一對一的面談,借此明確他們心中的Shopify Plus 到底是什么。為了接近真實,每次訪談我都會作筆記并且錄音,隨后繁復回放,仔細研究。
訪談之后,通常能從中獲取靈感——從那里能了解關于產(chǎn)品的各種細節(jié)。這樣一來,無論是產(chǎn)品未來的愿景、目標、品牌指南、項目原則還是網(wǎng)站文案,都比較容易確認。作為一個網(wǎng)站而言,更好的傳達信息,才能真正讓用戶感到驚喜。
2、項目簡介
在真正開始深入開發(fā)之前,我們需要寫一份項目簡介,確保每個參與者的信息和進度保持一致。我們會根據(jù)項目的實際情況,隨時對簡介內(nèi)容進行調(diào)整和修改,實時更新。
通常,項目簡介會回答以下問題:
?我們正在試圖達到什么目的?
?我們?nèi)绾未_認這個項目是成功的?
?我們需要做什么事情?
?我們?yōu)槭裁葱枰@樣做?
?哪些事情是非做不可的?
?我們?yōu)檎l在做這些事情?
?他們?nèi)绾瘟私膺@些事情?
?項目團隊中包含哪些人?
?我們的最后期限是什么時候?
3、競品分析
我們還需要仔細審視我們的對手。為此我們列出了競爭對手的列表,并開始了解在電子商務領域以外我們的產(chǎn)品如何服務于目標客戶的。
我們會對比我們和對手之間的優(yōu)勢、劣勢,我們碰到的機遇,獨有的特色,以及需要規(guī)避的問題。
4、信息架構
合理可靠的信息架構能夠有效地將內(nèi)容組織起來,讓信息更容易被用戶獲取并理解。在進行網(wǎng)頁設計的時候,用結構化的示意圖來呈現(xiàn)整個網(wǎng)站各屏之間的關系,能夠使你從更高的層面上來把握整個網(wǎng)站。
于是,我先用結構示意圖畫出老版本網(wǎng)站的各屏關系。在更新升級之前,我充分屏幕了其中的內(nèi)容、目標和流量分布,并提出了建議。結構示意圖幫助我們界定項目實施的范疇,就像一份詳盡的核對清單,讓我們在組織內(nèi)容、設計界面、編寫代碼的時候更為清晰明了。
5、線框圖
在重設計過程中,我會使用線框圖來勾勒整體,幫我思考問題,打通思路。有人喜歡在將想法涂鴉在餐巾紙之上,有人喜歡面對面分享想法,還有人喜歡將想法落實于草稿在線分享。
線框圖的好處在于,你可以快速、便捷地填充不同的內(nèi)容。僅落實于文檔的思路不夠具象,粗略的草稿不夠規(guī)整,線框圖能較好規(guī)避這些問題,不同類型的內(nèi)容整齊地排列在一起,你可以清晰掌控布局,模塊與模塊之間的關系。
高精度的Shopify Plus 重設計線框圖
6、啟發(fā)板
我們會在啟發(fā)版(Inspiration board)上展現(xiàn)新品牌的視覺設計,展現(xiàn)它可能的樣子,這也是我從團隊獲取支持的一種方式。
同時我們還會使用Pinterest,為了防止我們在單個畫板中泥足深陷,我們創(chuàng)造了多個畫板,為導航、動效、排版等不同領域,有針對性地搜集案例,獲取靈感。
當我有想法的時候,會在AI中進行勾勒,它們通常都是文字、圖像和色彩的結合體,看起來形同廣告。隨后,相同相近的設計元素會出現(xiàn)在我們的草稿中,不過其中各元素的位置和外觀,會有所不同,并且有許多不同的版本。
Shopify Plus 的啟發(fā)板
在啟發(fā)板上對Shopify Plus品牌進行探索
7、視覺稿和原型
很多人并不在意印在紙上的線框圖和視覺稿。的確,直接在屏幕上看看還挺不錯,但是直接查看落實于紙面上的線框圖、視覺稿和原型效果更好。
另外,我在線框圖繪制階段就開始制作可交互的視覺稿(原型?),并且拿這些東西同客戶進行溝通交流,一直到它們最終被落實為代碼和實際的從程序。
Shopify Plus 的InVision 項目頁面
為Shopify Plus 搜集反饋
結語
雖然許多設計機構傾向于嚴格遵循流程來進行設計,但是我們通常是將上述7個環(huán)節(jié)混合到一起進行的。使用真正符合你實際工作的流程,才是成功搞定重設計的核心。
本文地址:http://m.likemindfilms.com/tutorial/di2793.html