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

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

設計師是腦力與體力結(jié)合的創(chuàng)造性崗位，靈感和思路是不會憑空出現(xiàn)的。

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

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

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

[ 產(chǎn)品體驗的點線面 ]

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

[ 產(chǎn)品體驗改版的核心步驟 ]

先動腦再動手！

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

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

[ 現(xiàn)狀分析主要內(nèi)容 ]

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

[ 視覺呈現(xiàn)層面的分析內(nèi)容 ]

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

[ 現(xiàn)線上App效果 ]

一、色 —— 色彩系統(tǒng)

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

[ App各場景常用色值 ]

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

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

1. Icon

[ App常用icon ]

1）缺少品牌基因

Icon是品牌調(diào)性的重要傳達方式，應該著重與品牌加強關(guān)聯(lián)，突出品牌調(diào)性；

[ 品牌logo與icon ]

2）釋義傳達不一致

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

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

3）圖形樣式不統(tǒng)一

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

[ icon使用場景及樣式 ]

2.內(nèi)容圖片

1）缺乏統(tǒng)一的內(nèi)容展示規(guī)范

商品圖片缺乏統(tǒng)一的信息傳遞及展示規(guī)范，每個區(qū)域的展示內(nèi)容不統(tǒng)一，用戶視覺焦點散亂，有效信息獲取效率低；

[ 列表商品展示組件 ]

2）圖片尺寸不合適

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

[ 商品圖片尺寸及核心內(nèi)容區(qū)域 ]

3. 廣告圖片

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

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

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

2）視覺焦點分散，圖片內(nèi)容規(guī)劃缺乏規(guī)范性

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

[ 首頁Banner圖片內(nèi)容 ]

4. 模塊組件

1）視覺焦點散亂無章

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

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

2）信息展示不完整

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

[ 商品展示組件的信息內(nèi)容展示 ]

3）信息排版不合理

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

[ 商品展示組件的內(nèi)容歸類 ]

三、字 —— 內(nèi)容文字

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

[ 數(shù)字字體字號及應用場景 ]

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

四、質(zhì) —— 品牌質(zhì)感

品牌質(zhì)感弱，沒有體現(xiàn) 品牌調(diào)性及品牌相關(guān)露出，任何產(chǎn)品的推出都不能脫離品牌而獨立存在，都必須以品牌為基調(diào)，視覺的呈現(xiàn)更品牌調(diào)性的重要展現(xiàn)方式。

1.廣告圖

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

[ 廣告圖樣式 ]

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

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

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

[ Loading、缺省頁、為空狀態(tài)、Icon ]

3.商品圖

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

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

[ 商品展示圖片 ]

4. 現(xiàn)狀總結(jié)與優(yōu)化方向

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

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

[ 解決方案的要點 ]

五、品牌調(diào)性 ——定義品牌核心關(guān)鍵詞，重構(gòu)品牌logo

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

[ 品牌全新logo及關(guān)鍵詞 ]

[ 新logo設計思路 ]

[ Icon設計思路 ]

六、色彩規(guī)范 —— 定義核心色調(diào)，建立色彩使用標準規(guī)范

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

[ 主色調(diào)與強調(diào)色的取色來源 ]

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

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

[ 核心正文字體與數(shù)字字體 ]

八、內(nèi)容歸整 —— 定義圖片內(nèi)容規(guī)范，設置瀏覽路徑

1. 廣告圖

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

[ 廣告圖內(nèi)容規(guī)范 ]

2. 商品展示組件

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

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

3. 商品圖片

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

[ 商品圖片拍攝規(guī)范 ]

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

[ 新設計方案效果圖 ]

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

篇幅有限，文章只能舉例說明，在實際的項目過程中還需要包含很多內(nèi)容，包括各種競品調(diào)研、數(shù)據(jù)分析驗證、溝通協(xié)調(diào)、優(yōu)化調(diào)整等等。

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

本文由 @包大佬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。