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

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

設(shè)計(jì)師是腦力與體力結(jié)合的創(chuàng)造性崗位，靈感和思路是不會(huì)憑空出現(xiàn)的。 一定是在對(duì)現(xiàn)狀進(jìn)行大量的深入分析和研究之后，通過(guò)自身的理解才能形成完整的思路和方向。 那么如何從無(wú)到有的梳理完整的思路，則是設(shè)計(jì)師們需要在動(dòng)手之前認(rèn)真的動(dòng)腦思考，這也是整個(gè)改版項(xiàng)目的基礎(chǔ)思路和依據(jù)。 結(jié)合之前文章《設(shè)計(jì)師的點(diǎn)線面場(chǎng)景化設(shè)計(jì)》所述的點(diǎn)線面設(shè)計(jì)思路，整個(gè)產(chǎn)品體驗(yàn)主要以品牌為基調(diào)，由視覺（點(diǎn)）、交互（線）、框架（面）所構(gòu)成。因此無(wú)論是動(dòng)腦還是動(dòng)手，都將圍繞著視覺、交互、框架這三方面進(jìn)行，全程以數(shù)據(jù)為依據(jù)。 [ 產(chǎn)品體驗(yàn)的點(diǎn)線面 ] 在確定好改版項(xiàng)目的最終目標(biāo)的前提下，成功的產(chǎn)品體驗(yàn)改版，必須動(dòng)腦動(dòng)手結(jié)合，分析梳理并結(jié)合各業(yè)務(wù)需求，綜合輸出設(shè)計(jì)方案。

[ 產(chǎn)品體驗(yàn)改版的核心步驟 ] 先動(dòng)腦再動(dòng)手！ 這里的動(dòng)腦和動(dòng)手是指的順序，并非只動(dòng)腦或只動(dòng)手，在整個(gè)項(xiàng)目的任何階段，都是手腦并用的。 動(dòng)腦：動(dòng)腦就是分析、思考，現(xiàn)狀分析的過(guò)程其實(shí)就是找茬的過(guò)程，而找茬的過(guò)程也就是思考和尋找解決思路的過(guò)程，把問(wèn)題點(diǎn)找出來(lái)并構(gòu)思相應(yīng)解決方案，那么基礎(chǔ)思路和靈感也就有了（連現(xiàn)存的問(wèn)題都搞不清楚，談何優(yōu)化創(chuàng)新）。

[ 現(xiàn)狀分析主要內(nèi)容 ] 視覺是用戶對(duì)產(chǎn)品最直接的第一感覺，所以動(dòng)腦的第一步也是最表層的一步，就是對(duì)視覺表現(xiàn)層面的分析和找茬。

[ 視覺呈現(xiàn)層面的分析內(nèi)容 ] 讓我們先看看現(xiàn)版本的App效果，然后開始動(dòng)腦吧

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

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

色彩系統(tǒng)混亂，缺乏統(tǒng)一的標(biāo)準(zhǔn)規(guī)范，同一元素在不同場(chǎng)景的色值卻各不相同，導(dǎo)致不同場(chǎng)景間切換時(shí)需重新適應(yīng)，另外從整體頁(yè)言，對(duì)于品牌主色調(diào)的運(yùn)用非常不足，沒(méi)有很好的傳達(dá)品牌的調(diào)性。

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

二、形 —— 圖形元素（圖標(biāo)、圖片、組件）

1. Icon

[ App常用icon ] 1）缺少品牌基因 Icon是品牌調(diào)性的重要傳達(dá)方式，應(yīng)該著重與品牌加強(qiáng)關(guān)聯(lián)，突出品牌調(diào)性； [ 品牌logo與icon ] 2）釋義傳達(dá)不一致 Icon即是裝飾和點(diǎn)綴，更是氛圍與場(chǎng)景的強(qiáng)調(diào)，要清晰直接的傳達(dá)其本應(yīng)該所飲食的含義； [ icon的具體應(yīng)用場(chǎng)景及含義 ] 3）圖形樣式不統(tǒng)一 Icon是統(tǒng)一的圖形標(biāo)識(shí)，即使在不同的場(chǎng)景也應(yīng)該保持統(tǒng)一，減少誤讀，降低學(xué)習(xí)成本； [ icon使用場(chǎng)景及樣式 ]  

2.內(nèi)容圖片

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

[ 列表商品展示組件 ] 2）圖片尺寸不合適 1:1的圖片無(wú)法較完整的展示頭發(fā)的整體形狀，僅展示臉部范圍的造型，圖片區(qū)域內(nèi)容會(huì)顯示過(guò)于擁擠，若要完整展示長(zhǎng)發(fā)，則圖圖兩則會(huì)留白太多，圖片展示不飽滿；

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

3. 廣告圖片

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

[ 首頁(yè)Banner位與屏幕尺寸占比 ] 2）視覺焦點(diǎn)分散，圖片內(nèi)容規(guī)劃缺乏規(guī)范性 Banner圖之間缺乏統(tǒng)一的內(nèi)容區(qū)域劃分，不同圖片之間的核心內(nèi)容及按鈕等設(shè)置不一至，圖片切換瀏覽時(shí)視覺焦點(diǎn)起始位置不一至，瀏覽效率低。

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

4. 模塊組件

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

[ 商品展示組件視覺焦點(diǎn)及列表視覺燥點(diǎn) ] 2）信息展示不完整 信息傳遞不完整，內(nèi)容缺失，用戶無(wú)法通過(guò)組件的瀏覽獲取完整的商品信息，無(wú)法讓用戶快速獲取完整且有決策幫助的信息。

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

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

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

與色彩系統(tǒng)問(wèn)題一樣，字體的使用規(guī)范非常混亂，相同的文字在不同場(chǎng)景之間的字體大小各不相同，每一單獨(dú)場(chǎng)景的字體規(guī)范各自獨(dú)立，超過(guò)十種字體大小應(yīng)用，僅數(shù)字價(jià)格的字體就有6種大小，沒(méi)有形成整體的使用規(guī)范。

[ 數(shù)字字體字號(hào)及應(yīng)用場(chǎng)景 ]

[ App常見字體字號(hào)及應(yīng)用場(chǎng)景 ]  

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

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

1.廣告圖

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

[ 廣告圖樣式 ]  

2. Icon，圖片、模塊、缺省頁(yè)、加載等

將伴隨用戶在App的整個(gè)使用生命周期，是隨處可見的操作，同時(shí)也是品牌理念植入的核心場(chǎng)景之一，并且是重復(fù)性最高的場(chǎng)景之一。 現(xiàn)版本的App各場(chǎng)景中，無(wú)論是Icon還是Loading這些常見的視覺元素，還是缺省頁(yè)引導(dǎo)頁(yè)這些流程性的場(chǎng)景頁(yè)面，基本上都沒(méi)結(jié)合品牌logo以及整體調(diào)性。

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

3.商品圖

商品圖片是用戶對(duì)商品最直觀的認(rèn)識(shí)場(chǎng)方式，是最核心的用戶決策場(chǎng)景，除了商品的價(jià)格等信息，品牌的調(diào)性呈現(xiàn)，同樣在影響用戶消費(fèi)決策心理發(fā)揮極為重要的作用。 目前線上的商品圖片沒(méi)有任何調(diào)性可言，包括模特的選用，衣著的搭配等，純粹是網(wǎng)友YY的圖片，完全無(wú)法體現(xiàn)品牌相關(guān)的專業(yè)和調(diào)性，如最右邊的商品圖，模特搭配了白色上衣有大片的紅色，很容易吸引用戶的視覺焦點(diǎn)，而導(dǎo)致用戶無(wú)法第一視覺落點(diǎn)在假發(fā)產(chǎn)品上。

[ 商品展示圖片 ]  

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

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

動(dòng)手：通過(guò)動(dòng)腦找茬，確定了問(wèn)題點(diǎn)以及優(yōu)化方向，接下來(lái)就是動(dòng)手解決這些問(wèn)題了，動(dòng)手其實(shí)就是輸出解決方案，設(shè)計(jì)師的解決方案自然就是通過(guò)設(shè)計(jì)輸出，精準(zhǔn)的解決問(wèn)題并提升用戶體驗(yàn)。（定位到問(wèn)題點(diǎn)，就必須輸出解決方案，以此為基礎(chǔ)進(jìn)行創(chuàng)新）。 [ 解決方案的要點(diǎn) ]  

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

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

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

[ 新logo設(shè)計(jì)思路 ]

[ Icon設(shè)計(jì)思路 ]  

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

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

[ 主色調(diào)與強(qiáng)調(diào)色的取色來(lái)源 ]  

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

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

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

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

1. 廣告圖

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

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

2. 商品展示組件

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

[ 商品展示組件視覺落點(diǎn) ]  

3. 商品圖片

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

[ 商品圖片拍攝規(guī)范 ] 到此，針對(duì)具體問(wèn)題點(diǎn)的解決方案已經(jīng)基本上輸出了，接下來(lái)則需要將各個(gè)點(diǎn)的解決方案封裝成完整的頁(yè)面，并輸出完整的視覺設(shè)計(jì)規(guī)范，其實(shí)在做好問(wèn)題梳理和解決方案的思考，最基礎(chǔ)的視覺設(shè)計(jì)規(guī)范就已經(jīng)有了初型了。

[ 新設(shè)計(jì)方案效果圖 ] 從局部到整體，把各個(gè)細(xì)節(jié)點(diǎn)都考慮到極致，針對(duì)性的解決細(xì)節(jié)問(wèn)題，著重于單一頁(yè)面上的問(wèn)題（點(diǎn)），然后把關(guān)聯(lián)的頁(yè)面及細(xì)節(jié)串起來(lái)，形成用戶的完整路徑（線），最后以品牌為基礎(chǔ)，把所有的關(guān)鍵點(diǎn)與路徑流程合并起來(lái)，形成整個(gè)完整的產(chǎn)品體驗(yàn)，這也是之前的文章里提到的，點(diǎn)線面的設(shè)計(jì)方式的另一種體現(xiàn)。 篇幅有限，文章只能舉例說(shuō)明，在實(shí)際的項(xiàng)目過(guò)程中還需要包含很多內(nèi)容，包括各種競(jìng)品調(diào)研、數(shù)據(jù)分析驗(yàn)證、溝通協(xié)調(diào)、優(yōu)化調(diào)整等等。 設(shè)計(jì)師作為用戶體驗(yàn)?zāi)K的最直接參與者，需要具備善于發(fā)現(xiàn)問(wèn)題的眼睛，并能迅速反應(yīng)提出完善的解決思路，這是需要長(zhǎng)期的動(dòng)腦和動(dòng)手結(jié)合并加以落實(shí)到實(shí)際項(xiàng)目當(dāng)中，不斷試錯(cuò)才能練就一雙火眼金睛，設(shè)計(jì)師的價(jià)值也絕非是輸出優(yōu)秀的設(shè)計(jì)圖，而是要輸出一整套完整的設(shè)計(jì)理念。