網(wǎng)頁改版7大要素

Shopify Plus是我們創(chuàng)立的電商平臺的企業(yè)版。2014年2月發(fā)布,如今仍然是第一版。我想是時候改版了。
經(jīng)歷了一年多,我們對客戶與自身都有更深入的了解。陳舊的品牌已經(jīng)不合時宜了。
我們并沒有什么特別的流程,就是將以下7件事情串聯(lián)起來,便達成了目的。
面談
我對執(zhí)行團隊的成員進行了一對一面談,明確了Shopify Plus是什么。為了真實還原,我錄下了每段面談,供以后回放。
面談之后便有靈感涌現(xiàn)——我覺得自己對于這個產(chǎn)品已經(jīng)了如指掌。撰寫愿景、任務(wù)描述、品牌指南、項目概述和網(wǎng)站文案都變得容易了。我們的網(wǎng)站需要更好傳達信息,讓人頓悟其中含義。
項目概述
深入項目之前,我們寫了一份項目概述,使大家達成共識。我們會適時更新,讓它反映出項目的當(dāng)前狀態(tài)。
項目概述中可能會提出一些問題:
- 我們試圖完成什么目標(biāo)?
- 如何知道項目成功與否?
- 需要做什么?
- 為什么需要這么做?
- 有什么必要條件?
- 做這件事情是為了誰?
- 如何讓他們知道?
- 項目團隊有哪些人?
- 截止日期是什么時候?
競品分析
我們研究了還有哪些同類產(chǎn)品。我先從一系列競品開始,然后轉(zhuǎn)向電商領(lǐng)域之外那些與我們目標(biāo)客戶相同的公司。
我們對比了競品的長處、弱點和機會,還有我們想要涉足的重點領(lǐng)域——和我們想要避開的領(lǐng)域。
我們的競品分析文檔
信息架構(gòu)
信息結(jié)構(gòu)是內(nèi)容組織的表現(xiàn),使內(nèi)容易于理解。在網(wǎng)頁設(shè)計中,結(jié)構(gòu)圖表反映了網(wǎng)站里各頁面間的關(guān)系,讓你從更高的角度看待網(wǎng)站的構(gòu)成。
我給舊網(wǎng)站畫了一張信息結(jié)構(gòu)圖,展現(xiàn)出各頁面間的關(guān)系。在更新和改變之前,我評估了內(nèi)容、目標(biāo)與工作量。這張圖表幫助我們確定項目的范疇,可以作為所有頁面撰寫、設(shè)計和編碼的任務(wù)清單。
Shopify Plus的信息結(jié)構(gòu)圖表
線框圖
在整個改版過程中,我都使用線框圖幫助自己思考問題、激發(fā)創(chuàng)意。有一些畫在餐巾紙上,面對面分享,另一些草圖則通過網(wǎng)絡(luò)分享。
線框圖能帶來一項意外收獲:它幫你撰寫內(nèi)容。寫文檔讓你難以把一切視覺化,在線框圖中粘貼內(nèi)容能讓人清楚感受到頁面的跳轉(zhuǎn)流程,每塊內(nèi)容與其他如何保持關(guān)聯(lián)。
Shopify Plus改版所用的高保真線框圖
靈感畫板
我的靈感畫板展示新品牌可能的樣貌。它們有助于讓我在項目早期從團隊得到反饋。
我使用Pinterest創(chuàng)建了眾多畫板,用于局部分解,例如導(dǎo)航、動畫和字體等,不會讓創(chuàng)意迷失在單個畫板中。
研究過程中在我Illustrator中繪制靈感創(chuàng)意,將文字、圖片和色盤結(jié)合成類似廣告的圖樣。同樣的設(shè)計元素出現(xiàn)在各處設(shè)計稿中,不過位置和表現(xiàn)有所變化。
Shopify Plus的靈感畫板
從靈感畫板中探索Shopify Plus可能的品牌形象
效果圖與交互原型
線框圖和網(wǎng)頁設(shè)計印在紙上時,多數(shù)人都不會在意。在屏幕上展現(xiàn)設(shè)計很好,但。
我在線框圖流程早期就開始制作交互式效果圖。直到網(wǎng)站編碼完成前,都持續(xù)將它們與客戶和團隊分享。
我讓他們在瀏覽時大膽講出自己的看法,才能知道他們操作界面時所想。這些反饋都突顯了局部的問題,也驗證了設(shè)計方案,便于項目的最終定稿。
Shopify Plus的InVision項目頁面
為Shopify Plus收集反饋
盡管一些機構(gòu)會在改版過程中堅持特殊的順序,但這7個步驟對我們很有效。選用適合你工作流程的策略,是改版成功的重要因素。
作者信息:
Filippo Di Trapani, Designer at Shopify
Filippo is a designer working at Shopify’s headquarters in Ottawa, Canada. He’s a loving husband, father of 2, and an avid music lover.
#專欄作家#
可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計師,至少是個快樂的設(shè)計師。
本文系作者授權(quán)發(fā)布,未經(jīng)許可,不得轉(zhuǎn)載。
- 目前還沒評論,等你發(fā)揮!