起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識互聯網產品的點線面改版（視覺篇）
編輯導語：對于設計師來說，項目改版是經常會遇到的工作。本篇文章中作者圍繞視覺、交互、框架三方面詳細的介紹了從視覺上的互聯網產品的點線面改版，感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。
近期在統籌一個跨境電商的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. 現狀總結與優化方向
- 品牌質感弱 —— 定義品牌調性，加強品牌露出；
- 色彩系統混亂 —— 統一主色調及輔助色調，合并近似的色值，統一規范色彩系統；
- 視覺焦點散亂 —— 規范內容分布，合理規劃瀏覽路徑；
- 信息展示不完整 —— 提取核心信息內容，規范展示標準；
- 內容排版不合理 —— 歸整內容信息，合理而已模塊區域；
- 字體規范混亂 —— 規范正文與數字字號，合并近似的字體大小；
動手：通過動腦找茬，確定了問題點以及優化方向，接下來就是動手解決這些問題了，動手其實就是輸出解決方案，設計師的解決方案自然就是通過設計輸出，精準的解決問題并提升用戶體驗。（定位到問題點，就必須輸出解決方案，以此為基礎進行創新）。
[ 解決方案的要點 ]
五、品牌調性 ——定義品牌核心關鍵詞，重構品牌logo
以高貴自然時尚的女性假發產品為核心關鍵詞，結合頭發的曲線與字母UN，輸出全新logo，并以logo為基礎延展設計整套Icon、loading等。
[ 品牌全新logo及關鍵詞 ]
[ 新logo設計思路 ]
[ Icon設計思路 ]
六、色彩規范 —— 定義核心色調，建立色彩使用標準規范
以皇冠為形象，體現女性的高貴，并以此為基礎取出拍完的金色為主色調，以及皇冠中的寶石的橙色為強調色，加上黑白灰為基礎色，定義全新的色彩使用規范。
[ 主色調與強調色的取色來源 ]
七、字體規范 —— 定義常用字體，建立完善的字體使用規范
以品牌logo為基調，將logo字體延展至整個App作為正文字體使用，價格作為核心的信息之一，需要與正文有一點區分，故挑選一款與logo形狀相似又與正文字體同局粗黑的字體作為數字字體。
[ 核心正文字體與數字字體 ]
八、內容歸整 —— 定義圖片內容規范，設置瀏覽路徑
1. 廣告圖
廣告Banner圖必須包含品牌logo、核心文字信息、核心圖形展示、行動按鈕，且按鈕位置、文字位置及圖形展示位置需在相應的位置范圍內，整體圖片風格以簡潔風為基調，重點突出核心內容及按鈕指引。
[ 廣告圖內容規范 ]
2. 商品展示組件
放大商品組件展示區域，統一規范展示商品正面、側面、背面三種視圖，將商品名稱、商品價格、折扣信息等信息歸類排版，收藏、評分等商品評價信息另外歸類放置，合理設置整體視覺瀏覽順序，提高商品信息獲取效率。
[ 商品展示組件視覺落點 ]
3. 商品圖片
商品圖片尺寸調整為長條形，更好的完整的展示假發產品，也更適合手機瀏覽，嚴格挑選商品展示模特及拍攝，統一以淡灰色為背景，著重于強調產品本身的展示，提升瀏覽效率以及統一輸出品牌格調。
[ 商品圖片拍攝規范 ]
到此，針對具體問題點的解決方案已經基本上輸出了，接下來則需要將各個點的解決方案封裝成完整的頁面，并輸出完整的視覺設計規范，其實在做好問題梳理和解決方案的思考，最基礎的視覺設計規范就已經有了初型了。
[ 新設計方案效果圖 ]
從局部到整體，把各個細節點都考慮到極致，針對性的解決細節問題，著重于單一頁面上的問題（點），然后把關聯的頁面及細節串起來，形成用戶的完整路徑（線），最后以品牌為基礎，把所有的關鍵點與路徑流程合并起來，形成整個完整的產品體驗，這也是之前的文章里提到的，點線面的設計方式的另一種體現。
篇幅有限，文章只能舉例說明，在實際的項目過程中還需要包含很多內容，包括各種競品調研、數據分析驗證、溝通協調、優化調整等等。
設計師作為用戶體驗模塊的最直接參與者，需要具備善于發現問題的眼睛，并能迅速反應提出完善的解決思路，這是需要長期的動腦和動手結合并加以落實到實際項目當中，不斷試錯才能練就一雙火眼金睛，設計師的價值也絕非是輸出優秀的設計圖，而是要輸出一整套完整的設計理念。
本文由 @包大佬 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
龍祁的大佬嗎？
來膜拜大佬??