一個產品從起步到日趨成熟通常要經歷多次迭代。在這個過程中，對于視覺設計師而言，如何在不斷變化的產品中保持設計的延續，同時又能夠有所突破，應該是大多數人都曾經面臨或正在面臨的問題。

本文將闡述自己在產品多次改版中視覺延續方面的思考總結，以微供市場多次改版為例，與大家探討產品迭代中如何做到視覺繼承與升級。

一、視覺表現為何要在迭代中有所繼承？

從用戶的角度，如果一個業務/產品的每個版本的設計表現都完全不一樣，那么用戶要不停的去理解學習新的版本。同時，也不利于此業務/產品在用戶中的品牌心智建立。一個成熟的設計表現，一定是經過深刻的思考，在表現層的背后能夠抽取可被繼承的設計延續之「道」。

例如，iOS6到iOS7，從擬物到扁平的顛覆性表現層變化。但是依然有被繼承下來的精髓，比如標志性的圓角 icon 和流暢的交互體驗。

二、如何在迭代中做到視覺的繼承與升級？

1.「向前看」- 分析自己接手的業務/產品當前的設計狀態

一般設計師負責一項業務/產品分為兩種情況：

你是這個業務的第一個設計師，業務目前還沒有任何設計產出。

此業務之前已有設計師，并進行了一些設計成果。

如果你是第一種，那么恭喜你將跳過第一個環節。在接下來的案例中，本文作者面臨的正是第二種情況：接手業務時，之前已有設計師進行了一版設計。此時需要向前一位設計師了解清楚之前設計的理念，分析思考前序設計是否能夠或者有哪些理念能夠在后面的設計中繼續被應用。

了解前序設計理念至關重要，能夠幫助規避掉之后設計中的一些問題：

慎重思考新設計是否要有巨大區別，避免重大的顛覆性設計產出對用戶端造成的認知差異；

當你要對前序設計進行升級時，從容面對來自其他方面的質疑。

案例：微供市場導購首頁

微供市場簡介：微供市場是1688旗下，針對社交電商（微商）群體提供專屬貨源、代發服務、訂單管理的一站式社交分銷貨源服務市場。

接手微供市場之時，從前一位設計師處了解到的當下頁面的設計理念：如下圖。分析設計理念在目前視覺表現上的點，找出問題。通過第二步的「向內看」，判斷理念正確與否，是否繼承。

 

2.「向內看」- 洞悉業務的本質，從內在差異思考表現層設計

如果一個業務/產品的視覺表現在不斷迭代的多版本中，每一次都有著顛覆性的變化，沒有絲毫的傳承。那么幾乎可以肯定，在設計之初一定是直接從表現層出發，而非向形式以內領悟為何要這么設計的深層原因的「道」。

如何從業務本質洞悉設計延續之「道」？

基于將要開始設計的業務/產品，問自己三個問題：

業務/產品區別于其他的內容特色是什么？

業務/產品的核心用戶的特點是什么？

串聯起業務/產品和用戶的場景是什么？

案例1：

可以通過下圖幫助自己不遺漏，從左到右，跑通每一條線，就必須要回答業務表達的三個問題。以微供改版視覺設計前的思考為例，整個阿里的各業務線今年提到的高頻詞「人、貨、場」，因此我將上邊三大問題點的內容換成「人、貨、場」做解答。

業務/產品區別于其他的內容特色是什么？——「區別與大市場的獨特私密貨源」

業務/產品的核心用戶的特點是什么？ ——「社交分銷買家（微商）」

串聯起業務/產品和用戶的場景是什么？ ——「基于社交關系的交易場景」

 

根據答案，分別腦爆關鍵詞語，更豐滿的描述「人貨場」特征。抽取最核心的詞語作為設計關鍵詞，并保留描述這些關鍵詞的擴展詞語。

 

對于用戶的部分要再深入思考，從多維度細化用戶畫像，從中推導出設計原則調性。

案例2：

從微供核心用戶的「人群特征、生意特征、工作環境」建立立體的用戶畫像。得出柔和、克制、統一的三大視覺原則：

柔和：女性寶媽為主要群體，多為個人兼職，做熟人生意，貨源追求差異品質化。所以要避免集市感的喧鬧。

克制：社交熟人關系的生意，若長久必克制。

統一：用戶碎片式的移動端進貨體驗，避免復雜的視覺和交互表現，盡量統一，降低成本。

 

最終，在向內深挖業務問題和用戶的基礎上，得出如下的設計之「道」。

 

當對將要著手的業務／產品設計之「道」有了自己的理解詮釋之后，再回過頭去看之前的設計。首先，設計理念部分的「品質」和「親近暖心」符合好貨源及調性柔和的理念。其次，先前表現層的比如留白的排版，線性的 icon 都是能夠被沿用，在新的設計中繼續體現設計理念的部分。

經過繼承和升級的第一次迭代版本：

 

繼承與升級：

色彩：根據設計核心的「社交關系」，推導擴展社交中的人情味，親近感以及溝通的活力。再結合微供源自1688的業務屬性，在原有紅色基礎上增加了能夠給人以溫暖親切感的橙黃色，中和得出了新的微供主色。根據「柔和、克制」原則，在界面表現上，控制主色使用面積，僅在關鍵操作提示及特殊內容強調處應用。

如果一開始沒有上面的向內思考，直接從表象出發的話，結果很可能是摒棄掉之前的暖色系色彩，運用微信的綠色系作為主色。但是，經過深入思考后就會發現，雖然我們的用戶是「微商」，但是真正的定義是社交電商，而微信只是其中一條目前體量較大的渠道而已。如果某天微信的顏色變化，或者不再是微商的主要渠道，那么我們的產品顏色是否也要調整？

 

Icon：保留了圖形化的行業 icon，并進行了全新的繪制，每個轉角都采用圓角繪制，讓每個 icon 看起來更圓潤，更生活化，具有親和力。

 

設計布局：界面當中，各板塊之間增加留白間隔，運用灰色的中性色塊及高品質大圖突出市場好貨的品質感。每個活動專題，通過規范嚴格控制運營質量，運用大色塊與圖片同色系的配色，活躍界面氛圍。同時在配色的選取上遵守「柔和」原則。

 

核心圖形元素提取：提取下游售賣過程中的關鍵場景，進行圖形化提取和拆解。通過圖形化升級微供感官識別信息，用形色質構立體的傳遞業務/產品第一眼感受。

 

部分圖形應用：

 

 

3.「向外看」- 保持對設計趨勢的熱情，結合業務狀態反思升級

每個視覺設計師都對設計流行趨勢都有著天然的敏銳度，摩拳擦掌地總希望在新版本中運用流行趨勢。但并不是所有流行的設計趨勢都可以「拿來主義」。對待趨勢，應該結合業務當下的變化和需求辯證的去看，這是一個向內看與向外看不斷循環往復的過程，在行業流行與業務需求中不斷尋找平衡點。這也是考驗設計師審美辨析能力的時候，在心懷設計熱情的同時，清楚的知道什么可以做，什么不可以做。

案例：微供市場第二次迭代版本

 

根據對設計流行趨勢的收集分析：無框式、更大的標題字體、區塊間隔弱化、真實照片素材的應用等都是當下界面設計中流行的應用趨勢。結合當前業務的發展變化：

用戶群體的變化：逐步成長，從單人經營開始有更多的下級代理；

業務模式的變化：從代發到分銷的升級；

買家運營模式的變化：劃分買家等級，重點運營腰部以上買家給予相應權益。

業務和用戶在日趨成熟，因此在產品界面視覺層表現上：減去之前的過多修飾成分，去掉之前卡通化的 icon，將之前有些浮于表面的圖形元素，更克制的融于界面骨血之中。讓整體視覺表達升級到更加成熟的調性。

UI界面趨勢收集：無框式、更大的標題字體、區塊間隔弱化、真實照片素材。

 

結合業務變化升級的視覺部分：

色彩定義的升級：

 

 

業務對買家劃分等級并給予相應權益，通過視覺向用戶傳遞價值感知：

 

總結

最后，將上述產品迭代中的繼承與升級心得總結如下圖。

 

一個成熟的視覺進化過程，其實就是設計師本身突破自身專業職能維度的深入思考，從表層視覺思維到邏輯分析思維的轉變。串聯起整個視覺進化過程的是設計師源自內心對設計的熱情，對已有設計成果的自我反思和不斷審視，在設計的每個階段成果都經得起推敲的前提下，依然能夠做出令產品煥然一新的視覺表現

(責任編輯：HX)