編輯導語：對于設計師來說，項目改版是經常會遇到的工作。本篇文章中作者圍繞視覺、交互、框架三方面詳細的介紹了從視覺上的互聯網產品的點線面改版，感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。

近期在統籌一個跨境電商的App改版項目的過程中，有位“優秀”的設計師與我進行了一系列溝通，讓我發現仍有不少設計師更愿意直接動手而非先動腦，從而導致后續的設計工作中缺乏完整的思路與目標。

設計師是腦力與體力結合的創造性崗位，靈感和思路是不會憑空出現的。

一定是在對現狀進行大量的深入分析和研究之后，通過自身的理解才能形成完整的思路和方向。

那么如何從無到有的梳理完整的思路，則是設計師們需要在動手之前認真的動腦思考，這也是整個改版項目的基礎思路和依據。

結合之前文章《設計師的點線面場景化設計》所述的點線面設計思路，整個產品體驗主要以品牌為基調，由視覺（點）、交互（線）、框架（面）所構成。因此無論是動腦還是動手，都將圍繞著視覺、交互、框架這三方面進行，全程以數據為依據。

[ 產品體驗的點線面 ]

在確定好改版項目的最終目標的前提下，成功的產品體驗改版，必須動腦動手結合，分析梳理并結合各業務需求，綜合輸出設計方案。

[ 產品體驗改版的核心步驟 ]

先動腦再動手！

這里的動腦和動手是指的順序，并非只動腦或只動手，在整個項目的任何階段，都是手腦并用的。

動腦：動腦就是分析、思考，現狀分析的過程其實就是找茬的過程，而找茬的過程也就是思考和尋找解決思路的過程，把問題點找出來并構思相應解決方案，那么基礎思路和靈感也就有了（連現存的問題都搞不清楚，談何優化創新）。

[ 現狀分析主要內容 ]

視覺是用戶對產品最直接的第一感覺，所以動腦的第一步也是最表層的一步，就是對視覺表現層面的分析和找茬。

[ 視覺呈現層面的分析內容 ]

讓我們先看看現版本的App效果，然后開始動腦吧

[ 現線上App效果 ]

一、色 —— 色彩系統

色彩系統混亂，缺乏統一的標準規范，同一元素在不同場景的色值卻各不相同，導致不同場景間切換時需重新適應，另外從整體頁言，對于品牌主色調的運用非常不足，沒有很好的傳達品牌的調性。

[ App各場景常用色值 ]

從App的各個流程場景里，包括文字、按鈕、模塊等，可以取得以上3種主色調、8種輔助色以及10多種基礎色調的色值，即使拋開色值雜亂和不統一的問題，主色調與輔助色調之間的飽和度、色相等的搭配也十分不合理，主色調飽和度比較高，而輔助色卻飽和度卻十分弱，從整體的視覺呈現來看則顯得主色調十分刺眼，而輔助色卻十分薄弱。

二、形 —— 圖形元素（圖標、圖片、組件）

1. Icon

[ App常用icon ]

1）缺少品牌基因

Icon是品牌調性的重要傳達方式，應該著重與品牌加強關聯，突出品牌調性；

[ 品牌logo與icon ]

2）釋義傳達不一致

Icon即是裝飾和點綴，更是氛圍與場景的強調，要清晰直接的傳達其本應該所飲食的含義；

[ icon的具體應用場景及含義 ]

3）圖形樣式不統一

Icon是統一的圖形標識，即使在不同的場景也應該保持統一，減少誤讀，降低學習成本；

[ icon使用場景及樣式 ]

2.內容圖片

1）缺乏統一的內容展示規范

商品圖片缺乏統一的信息傳遞及展示規范，每個區域的展示內容不統一，用戶視覺焦點散亂，有效信息獲取效率低；

[ 列表商品展示組件 ]

2）圖片尺寸不合適

1:1的圖片無法較完整的展示頭發的整體形狀，僅展示臉部范圍的造型，圖片區域內容會顯示過于擁擠，若要完整展示長發，則圖圖兩則會留白太多，圖片展示不飽滿；

[ 商品圖片尺寸及核心內容區域 ]

3. 廣告圖片

1）圖片尺寸偏大，屏效低

首頁作為整個App的第一流量入口，Banner尺寸占據整屏超過二分之一的比重，其他重要內容露出不充分，使整個首屏略顯單薄。

[ 首頁Banner位與屏幕尺寸占比 ]

2）視覺焦點分散，圖片內容規劃缺乏規范性

Banner圖之間缺乏統一的內容區域劃分，不同圖片之間的核心內容及按鈕等設置不一至，圖片切換瀏覽時視覺焦點起始位置不一至，瀏覽效率低。

[ 首頁Banner圖片內容 ]

4. 模塊組件

1）視覺焦點散亂無章

在有限的屏幕空間內，并沒有建立有效的視覺瀏覽順序，在單一個商品展示組件里，完整的瀏覽單一個商品的信息，需要8個視覺焦點，而在列表頁這種商品組合頁面里，多個組件結合在一起，視覺焦點更是多、亂、雜，用戶在列表頁面的信息瀏覽會十分低效。

[ 商品展示組件視覺焦點及列表視覺燥點 ]

2）信息展示不完整

信息傳遞不完整，內容缺失，用戶無法通過組件的瀏覽獲取完整的商品信息，無法讓用戶快速獲取完整且有決策幫助的信息。

[ 商品展示組件的信息內容展示 ]

3）信息排版不合理

同一類型的內容信息分布在組件里的不同區域，沒有合理的整合排版，沒有形成區域性信息瀏覽習慣，同樣大大降低了信息的獲取效率。

[ 商品展示組件的內容歸類 ]

三、字 —— 內容文字

與色彩系統問題一樣，字體的使用規范非?；靵y，相同的文字在不同場景之間的字體大小各不相同，每一單獨場景的字體規范各自獨立，超過十種字體大小應用，僅數字價格的字體就有6種大小，沒有形成整體的使用規范。

[ 數字字體字號及應用場景 ]

[ App常見字體字號及應用場景 ]

四、質 —— 品牌質感

品牌質感弱，沒有體現 品牌調性及品牌相關露出，任何產品的推出都不能脫離品牌而獨立存在，都必須以品牌為基調，視覺的呈現更品牌調性的重要展現方式。

1.廣告圖

廣告圖是核心的營銷展現方式，包含整個平臺的營銷手段和理念，也是吸引用戶產生消費的重要場景，在用戶產生消費的同時也需要加強用戶對品牌的印象以及認可感，需要在廣告宣傳圖里有足夠的品牌透出以及強調品牌的調性。

[ 廣告圖樣式 ]

2. Icon，圖片、模塊、缺省頁、加載等

將伴隨用戶在App的整個使用生命周期，是隨處可見的操作，同時也是品牌理念植入的核心場景之一，并且是重復性最高的場景之一。

現版本的App各場景中，無論是Icon還是Loading這些常見的視覺元素，還是缺省頁引導頁這些流程性的場景頁面，基本上都沒結合品牌logo以及整體調性。

[ Loading、缺省頁、為空狀態、Icon ]

3.商品圖

商品圖片是用戶對商品最直觀的認識場方式，是最核心的用戶決策場景，除了商品的價格等信息，品牌的調性呈現，同樣在影響用戶消費決策心理發揮極為重要的作用。

目前線上的商品圖片沒有任何調性可言，包括模特的選用，衣著的搭配等，純粹是網友YY的圖片，完全無法體現品牌相關的專業和調性，如最右邊的商品圖，模特搭配了白色上衣有大片的紅色，很容易吸引用戶的視覺焦點，而導致用戶無法第一視覺落點在假發產品上。

[ 商品展示圖片 ]

4. 現狀總結與優化方向

1. 品牌質感弱 —— 定義品牌調性，加強品牌露出；
2. 色彩系統混亂 —— 統一主色調及輔助色調，合并近似的色值，統一規范色彩系統；
3. 視覺焦點散亂 —— 規范內容分布，合理規劃瀏覽路徑；
4. 信息展示不完整 —— 提取核心信息內容，規范展示標準；
5. 內容排版不合理 —— 歸整內容信息，合理而已模塊區域；
6. 字體規范混亂 —— 規范正文與數字字號，合并近似的字體大??；

動手：通過動腦找茬，確定了問題點以及優化方向，接下來就是動手解決這些問題了，動手其實就是輸出解決方案，設計師的解決方案自然就是通過設計輸出，精準的解決問題并提升用戶體驗。（定位到問題點，就必須輸出解決方案，以此為基礎進行創新）。

[ 解決方案的要點 ]

五、品牌調性 ——定義品牌核心關鍵詞，重構品牌logo

以高貴自然時尚的女性假發產品為核心關鍵詞，結合頭發的曲線與字母UN，輸出全新logo，并以logo為基礎延展設計整套Icon、loading等。

[ 品牌全新logo及關鍵詞 ]

[ 新logo設計思路 ]

[ Icon設計思路 ]

六、色彩規范 —— 定義核心色調，建立色彩使用標準規范

以皇冠為形象，體現女性的高貴，并以此為基礎取出拍完的金色為主色調，以及皇冠中的寶石的橙色為強調色，加上黑白灰為基礎色，定義全新的色彩使用規范。

[ 主色調與強調色的取色來源 ]

七、字體規范 —— 定義常用字體，建立完善的字體使用規范

以品牌logo為基調，將logo字體延展至整個App作為正文字體使用，價格作為核心的信息之一，需要與正文有一點區分，故挑選一款與logo形狀相似又與正文字體同局粗黑的字體作為數字字體。

[ 核心正文字體與數字字體 ]

八、內容歸整 —— 定義圖片內容規范，設置瀏覽路徑

1. 廣告圖

廣告Banner圖必須包含品牌logo、核心文字信息、核心圖形展示、行動按鈕，且按鈕位置、文字位置及圖形展示位置需在相應的位置范圍內，整體圖片風格以簡潔風為基調，重點突出核心內容及按鈕指引。

[ 廣告圖內容規范 ]

2. 商品展示組件

放大商品組件展示區域，統一規范展示商品正面、側面、背面三種視圖，將商品名稱、商品價格、折扣信息等信息歸類排版，收藏、評分等商品評價信息另外歸類放置，合理設置整體視覺瀏覽順序，提高商品信息獲取效率。

[ 商品展示組件視覺落點 ]

3. 商品圖片

商品圖片尺寸調整為長條形，更好的完整的展示假發產品，也更適合手機瀏覽，嚴格挑選商品展示模特及拍攝，統一以淡灰色為背景，著重于強調產品本身的展示，提升瀏覽效率以及統一輸出品牌格調。

[ 商品圖片拍攝規范 ]

到此，針對具體問題點的解決方案已經基本上輸出了，接下來則需要將各個點的解決方案封裝成完整的頁面，并輸出完整的視覺設計規范，其實在做好問題梳理和解決方案的思考，最基礎的視覺設計規范就已經有了初型了。

[ 新設計方案效果圖 ]

從局部到整體，把各個細節點都考慮到極致，針對性的解決細節問題，著重于單一頁面上的問題（點），然后把關聯的頁面及細節串起來，形成用戶的完整路徑（線），最后以品牌為基礎，把所有的關鍵點與路徑流程合并起來，形成整個完整的產品體驗，這也是之前的文章里提到的，點線面的設計方式的另一種體現。

篇幅有限，文章只能舉例說明，在實際的項目過程中還需要包含很多內容，包括各種競品調研、數據分析驗證、溝通協調、優化調整等等。

設計師作為用戶體驗模塊的最直接參與者，需要具備善于發現問題的眼睛，并能迅速反應提出完善的解決思路，這是需要長期的動腦和動手結合并加以落實到實際項目當中，不斷試錯才能練就一雙火眼金睛，設計師的價值也絕非是輸出優秀的設計圖，而是要輸出一整套完整的設計理念。

本文由 @包大佬 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。