實戰經驗!搞定網頁重設計的7個必要環節

2022-09-21 13:51:10 字數 2246 閱讀 5064

編者按:**更新迭代重新設計恐怕是許多**必經的環節,如何做好網頁重設計也是許多設計師和產品人需要考量的事情。今天的這篇文章就是著名電商平台shopify針對旗下企業服務平台shopify plus重設計改版的一些經驗總結,希望能給大家帶來一些啟示~~~

shopify plus 是shopify 的企業版電子商務託管平台,自從2023年2月發布之後,至今只做過一次更新迭代,也正是在這種情況下,我提出了對**進行重設計的建議。

在這長達一年的時間裡,我們對於自己的客戶有更加深入的了解,也清楚地認識到老品牌和舊設計已經不再適應現在的情況了。

不同的公司和不同的團隊,對於重設計有著不同的需求和考量,自然也就有著不同的流程。我們並未遵循某種特定流程,但是在迭代過程中,我們做好了下面7件環節,最終得到了我們想要的結果。

1、訪談

我對我們的決策團隊的每乙個成員進行了一對一的面談,藉此明確他們心中的shopify plus 到底是什麼。為了接近真實,每次訪談我都會作筆記並且錄音,隨後繁複回放,仔細研究。

訪談之後,通常能從中獲取靈感——從那裡能了解關於產品的各種細節。這樣一來,無論是產品未來的願景、目標、品牌指南、專案原則還是**文案,都比較容易確認。作為乙個**而言,更好的傳達資訊,才能真正讓使用者感到驚喜。

2、專案簡介

在真正開始深入開發之前,我們需要寫乙份專案簡介,確保每個參與者的資訊和進度保持一致。我們會根據專案的實際情況,隨時對簡介內容進行調整和修改,實時更新。

通常,專案簡介會回答以下問題:

•我們正在試圖達到什麼目的?

•我們如何確認這個專案是成功的?

•我們需要做什麼事情?

•我們為什麼需要這樣做?

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

•我們為誰在做這些事情?

•他們如何了解這些事情?

•專案團隊中包含哪些人?

•我們的最後期限是什麼時候?

3、競品分析

我們還需要仔細審視我們的對手。為此我們列出了競爭對手的列表,並開始了解在電子商務領域以外我們的產品如何服務於目標客戶的。

我們會對比我們和對手之間的優勢、劣勢,我們碰到的機遇,獨有的特色,程式設計客棧以及需要規避的問題。

4、資訊架構

合理可靠的資訊架構能夠有效地將內容組織起來,讓資訊更容易被使用者獲取並理解。在進行網頁設計的時候,用結構化的示意圖來呈現整個**各屏之間的關係,能夠使你從更高的層面上來把握整個**。

於是,我先用結構示意圖畫出老版本**的各屏關係。在更新公升級之前,我充分螢幕www.cppcns.com了其中的內容、目標和流量分布,並提出了建議。結構示意圖幫助我程式設計客棧們界定專案實施的範疇,就像乙份詳盡的核對清單,讓我們在組織內容、設計介面、編寫**的時候更為清晰明了。

5、nndzcs線框圖

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

線框圖的好處在於,你可以快速、便捷地填充不同的內容。僅落實於文件的思路不夠具象,粗略的草稿不夠規整,線框圖能較好規避這些問題,不同型別的內容整齊地排列在一起,你可以清晰掌控布局,模組與模組之間的關係。

高精度的shopify plus 重設計線框圖

6、啟發板

我們會在啟發版(inspiration board)上展現新品牌的視覺設計,展現它可能的樣子,這也是我從團隊獲取支援的一種方式。

同時我們還會使用pinterest,為了防止我們在單個畫板中泥足深陷,我們創造了多個畫板,為導航、動效、排版程式設計客棧等不同領域,有針對性地蒐集案例,獲取靈感。

當我有想法的時候,會在ai中進行勾勒,它們通常都是文字、影象和色彩的結合體,看起來形同廣告。隨後,相同相近的設計元素會出現在我們的草稿中,不過其中各元素的位置和外觀,會有所不同,並且有許多不同的版本。

shopify plus 的啟發板

在啟發板上對shopify plus品牌進行探索

7、視覺稿和原型

很多人並不在意印在紙上的線框圖和視覺稿。的確,直接在螢幕上看看還挺不錯,但是直接檢視落實於紙面上的線框圖、視覺稿和原型效果更好。

另外,我**框圖繪製階段就開始製作可互動的視覺稿(原型?),並且拿這些東西同客戶進行溝通交流,一直到它們最終被落實為**和實際的從程式。

shopify plus 的invision 專案頁面

為shopify plus 蒐集反饋

結語雖然許多設計機構傾向於嚴格遵循流程來進行設計,但是我們通常是將上述7個環節混合到一起進行的。使用真正符合你實際工作的流程,才是成功搞定重設計的核心。

本文標題: 實戰經驗!搞定網頁重設計的7個必要環節

本文位址:

敏捷開發的6個實戰經驗

6個實施敏捷開發的技巧 快速迭代 讓測試人員和開發者參與需求討論 編寫可測試的需求文件 多溝通 儘量減少文件 做好產品原型 及早考慮測試等。1 快速迭代 快速迭代,可以逼迫團隊不斷優化流程 提公升工作效率,不要在無足輕重的事情上浪費時間。如果離deadline還有6個月,那麼整個工作節奏必然悠哉。如...

敏捷開發的6個實戰經驗

1.快速迭代 相對那種半年一次的大版本發布來說,小版本的需求 開發和測試更加簡單快速。一些公司,一年僅發布僅2 3個版本,發布流程緩慢,它們仍採用瀑布開發模式,更嚴重的是對敏捷開發模式存在誤解。由一年發布2個版本轉到乙個月發布2個版本,這也不太可能。但是現在來看,快速迭代已經成為事實標準,關鍵是要比...

敏捷開發的6個實戰經驗

1.快速迭代 相對那種半年一次的大版本發布來說,小版本的需求 開發和測試更加簡單快速。一些公司,一年僅發布僅2 3個版本,發布流程緩慢,它們仍採用瀑布開發模式,更嚴重的是對敏捷開發模式存在誤解。由一年發布2個版本轉到乙個月發布2個版本,這也不太可能。但是現在來看,快速迭代已經成為事實標準,關鍵是要比...