寫在前面的話：寫相關(guān)的經(jīng)驗分享更多是希望和大家有一個交流過程，也想看到更多反饋讓自己完善設(shè)計思路。
整個分析都是我的主觀看法沒有絕對的對錯！
這次的主要內(nèi)容是從圖標、版塊樣式、字體和色彩三個方面作為切入點來進行一些分析。整體內(nèi)容剛好契合了最近的一些工作項目，自己也越來越肯定設(shè)計師在發(fā)展的中后期設(shè)計思路比技術(shù)手法的重要性。工作中也經(jīng)常看到一些設(shè)計師在設(shè)計手法上過度投入，難免會造成對設(shè)計本意要傳達的內(nèi)容產(chǎn)生偏差。自己的這次總結(jié)希望能傳遞一個思路，或者是能夠讓一些設(shè)計師有一點點更好的思考方式。
這次對比主要選擇了QQ、淘寶、微博三款最常用APP為主線分析，輔助以快手、飛豬、花椒、斗魚、虎牙、熊貓、抖音、KEEP等…做附加說明。
圖標方面這次重點分析的是扁平（輕質(zhì)感）圖標、面性圖標、線性圖標三個在實際工作中最常用類型，對于較少出現(xiàn)的擬物圖標不加入其中。
1、扁平類圖形圖標更容易表達較為豐富和活躍的內(nèi)容，在頁面展現(xiàn)中能夠更突出其特性。相對來說更適合使用在接近運營類項目或頁面內(nèi)引流入口圖標使用。下面分別截取了淘寶、微博、飛豬的導(dǎo)航條，剛好這幾家都有對應(yīng)不同的活動入口引導(dǎo)圖標！
2、面性結(jié)構(gòu)圖標的信息傳達更加簡單直接，由于其簡單的信息傳達形式多數(shù)使用在列表和導(dǎo)航內(nèi)。也有少部分作為功能或內(nèi)容版塊的入口使用。
3、線性圖標會經(jīng)常和面性圖標搭配使用，作為已選和未選的兩種呈現(xiàn)形式。同時也會經(jīng)常使用在列表頁和功能性模塊入口。
對于這些圖標幾乎是我們?nèi)粘Ｊ褂肁PP時最常見的類型，作為設(shè)計師我們又該如何評判這些圖標的設(shè)計樣式是否合理？使用環(huán)境是否合理？
①、首先說圖標設(shè)計本身應(yīng)該是從生活中實物的造型到識別圖形的一種轉(zhuǎn)換，就像“擬物圖標”正是這一轉(zhuǎn)變過程中的交接替代階段。那么圖標的一切基礎(chǔ)結(jié)構(gòu)就應(yīng)該從實物中來，然后在進行設(shè)計簡化修繕。
②、另外一個必要考慮點就是應(yīng)用環(huán)境。即便單獨的圖標形態(tài)構(gòu)造合理視覺感舒適，如果應(yīng)用環(huán)境不合理的情況下顯示出的效果依然會有很大的視覺錯亂感。
通過上面的兩點分析后我們再來看這些APP在對應(yīng)圖標上的應(yīng)用是否合理。
1、扁平類圖形圖標
下面的截圖是淘寶、飛豬和微博的導(dǎo)航內(nèi)營銷活動類引流入口圖標
淘寶的活動入口圖標底色綠色明暗度過于和導(dǎo)航底色接近，所以他們加了一個漸變色彩的描邊，但這個描邊依然有一部分和底色過于接近，同時￥的符號過于弱化完全失去了搶紅包的沖動感和氛圍感?？傮w造成了整個圖標圖像視覺感不清傳遞信息不明確。
再看飛豬和微博的運營活動入口引導(dǎo)圖標，首先在底色搭配上明顯突出；其次還都是異形結(jié)構(gòu)，沒有過于規(guī)則的束縛在圓形、方形這種幾何圖形內(nèi)；最后他們的圖形和文字信息也比較搭配能夠有較強的呼應(yīng)感。
2、面性結(jié)構(gòu)圖標
再來看個人中心部分的面狀圖標，同樣的淘寶依然純在了很多不合理也不統(tǒng)一的圖形結(jié)構(gòu)。
1、這種圖標的特點就是圖形面積較小，所以才更需要把外輪廓圖形突出顯示增加識別度，所以阿里寶卡這種圖標更應(yīng)該把內(nèi)部卡的造型直接釋放出來作為圖標結(jié)構(gòu)。閑置換錢￥的圖標結(jié)構(gòu)也有同樣問題，其實可以圖形提取再設(shè)計，當然接近外邊緣的那個細細的描邊也可以去掉。
2、券直接使用了中文字體，也許是因為設(shè)計難度或和票務(wù)的券怕產(chǎn)生圖形沖突，而選擇了這樣的設(shè)計。但作為設(shè)計師可以通過圖標的形態(tài)結(jié)構(gòu)變形、色彩等方式來進行設(shè)計區(qū)分。大家感興趣的話還可以打開淘寶個人中心的必備工具全部頁面查看，會發(fā)現(xiàn)更多的不和諧設(shè)計形式搭配
這時再看虎牙的圖標設(shè)計色彩明暗度更加和諧統(tǒng)一，整體圖標圖形結(jié)構(gòu)也更加合理，直接清晰表現(xiàn)出了需要傳達的對應(yīng)信息。
3、線性圖標
首先很肯定虎牙的導(dǎo)航圖標他們在圖形結(jié)構(gòu)、色彩搭配、包括點擊動畫的效果上都做了非常多的設(shè)計細節(jié)調(diào)整，但問題也恰恰出現(xiàn)在這些地方，作為導(dǎo)航圖標幾乎是最高頻使用，這樣導(dǎo)航圖標的目的就是告知用戶你選擇了那個頁面或者是你的停留位置。高頻的使用過程后這種設(shè)計細節(jié)用戶自然會忽略，而識別作用自然變成了第一位，這時再看這些細節(jié)反而變成了多余的干擾信息。
當然在虎牙、斗魚和熊貓直播這三家的底導(dǎo)圖標設(shè)計中，虎牙又顯得更好一些
沒有對比就沒有傷害
1、斗魚的底導(dǎo)圖標和虎牙有同樣的問題，線性圖標設(shè)計過于復(fù)雜表現(xiàn)內(nèi)容過多，但更大的問題在于選中態(tài)過于弱化和未選狀態(tài)過于接近了，失去了最基本的信息表達目的。
2、熊貓的底導(dǎo)圖標整體線條風(fēng)格總體設(shè)計最好，未選的色彩淡化樣式因為需要突出頁面的主要內(nèi)容而削弱。但選中態(tài)依然淡化（沒有選擇反向面狀顯示或增加內(nèi)部圖形變換），信息顯示效果也過于弱化。
補充：再來看一下最常見的列表圖標風(fēng)格使用
列表類圖標各家公司也是根據(jù)自己公司的不同標準選擇了不同設(shè)計風(fēng)格，所以這里我們就選擇了兩組同類型圖標對比，前面的QQ和花椒是線性圖標對比，后面的斗魚和熊貓是面性圖標對比。
然后選擇了從三個維度來進行對比
1、可識別性，列表圖標幾乎是APP中能使用到最小的常用圖標形式，所以第一識別性作為最重要對比點。這方面熊貓的列表圖標明顯顯得識別性過低，失去了作為圖標的傳達基本信息目的（正在修改）。
2、圖標整體感，圖標即便可識別，但在列表的并列使用中是否有統(tǒng)一感整體感也會顯得非常重要。這里可以查看斗魚的列表圖標整體感和空間感控制都非常好。相反花椒列表圖標在這么小的圖形結(jié)構(gòu)上依然添加了斷點，這種設(shè)計只會讓圖標略顯瑣碎。熊貓的反白圖標使用了不同的透明度搭配，同樣在過小的范圍內(nèi)增加了不必要的細節(jié)。
3、環(huán)境匹配度，既文本和圖標搭配后的配合度，如花椒的線性圖標為了突出文本淡化變?yōu)榻咏b飾作用
----------------------------------------------------------------------------------
總結(jié)：設(shè)計首要目的應(yīng)該是幫助產(chǎn)品傳遞給用戶有效信息，當圖形被過度設(shè)計后傳遞效果就自然會被降低?？赡芤稽c點的調(diào)整變化影響并不大，但每一個優(yōu)秀的產(chǎn)品都是由無數(shù)個點的調(diào)整和逐步優(yōu)化而形成。
分析重點主要針對現(xiàn)在主流APP普遍在使用的信息流版塊展現(xiàn)形式，自己也根據(jù)每個產(chǎn)品的使用環(huán)境和行業(yè)特點進行一些分析。這一部分就不做過多的舉例說明。直接用熊貓、斗魚、虎牙三家直播平臺的直播間列表展現(xiàn)形式來進行對比分析。同時輔以“快手”進行特別說明舉例。另外在這部分我也是基礎(chǔ)分析，不做具體孰高孰低的評判。畢竟每家公司都有自己的產(chǎn)品導(dǎo)向和規(guī)劃，設(shè)計更多的是輔以完成這種導(dǎo)向的更好展現(xiàn)。
同樣的也選擇了從三個維度來對信息流版塊做一下具體分析
1、單個直播間窗口有效空間利用率和合理性
2、文本的信息的傳達效果
3、整體視覺通透感和合理性
----------------------------------------------------------------------------------
1、單個直播間窗口有效空間利用率和合理性
我們在做一個具體分析前需要先了解一下整個行業(yè)的獨有特點，三家主流游戲直播APP都是以游戲直播內(nèi)容為主，輔助以美女秀場、戶外達人等直播為輔。除了秀場直播間外，其它部分的窗口圖都是隨機截圖作為直播窗口封面（各個平臺隨機截圖時間不同）。所以隨機截圖的直播間封面圖不具有較強的直播內(nèi)容說明感，更多的時候需要用戶去看信息文本內(nèi)容識別。這時我們再來看一下“快手”這種短視頻封面格式，首先視頻封面尺寸較大，然后封面多數(shù)是發(fā)布者自己定制，封面內(nèi)也大都添加貼紙說明可以直接快速了解短視頻基本內(nèi)容。
當我們了解行業(yè)特點后再來看直播產(chǎn)品的的單個直播間窗口有效空間利用率和合理性
①、斗魚的單個直播間窗口占比面積最大、熊貓占比空間最小。但這時更重要的是利用合理性，單看斗魚封面空間最大化把封面窗口直接頂?shù)狡聊贿吘墸斘覀冊谑謾C上滑屏瀏覽的時候會有一個非常大的問題，你會發(fā)現(xiàn)整個界面有一種從屏幕中心分裂開的不舒適視覺感。再對比“快手”首頁的不規(guī)整信息流模式，由于版塊橫向不是標準對齊，也就把視覺瀏覽模式形成了S形交替瀏覽狀態(tài)，把中心的分割感極度弱化了。
②、再來看熊貓的直播間窗口信息流排列形式，是三家中留白空間最大的一個。這樣形成了較好的視覺通透感不會有強烈的視覺擠壓或斗魚那種強烈的中心分割感。并且由于前面說過的直播是隨機截圖封面模式，所以封面圖不具有絕對傳播信息效果，小一點也不會有太多影響。
③、最后來看虎牙的設(shè)計模式，基于斗魚和熊貓大小的兩者之間。從空間結(jié)構(gòu)感來說這個好于斗魚的信息流結(jié)構(gòu)，如果再綜合有效利用率虎牙這個模式也算是三家中比例最優(yōu)的形態(tài)(當然后面我們再從文本信息的角度來看虎牙是否更合理的利用這個優(yōu)勢)。
2、文本的信息的傳達效果
在做這部分分析之前也分析一下我們?nèi)粘g覽信息的一個習(xí)慣，當我們無論看到電視臺節(jié)目、戶外海報、食品包裝……最先傳遞到我們信息的基本都是最大的標題，然后是副標題（大部分是內(nèi)容類型簡介或輔助說明）。那我們再看一下直播類軟件每個獨立窗口都有什么信息表現(xiàn)，1、直播內(nèi)容的主標題 2、主播名或賽事名附加觀看人數(shù) 3、歸屬直播頻道分類 那么用戶的瀏覽信息習(xí)慣也應(yīng)該是我前面所列順序，標題→主播名+觀看人數(shù)→頻道分類。當我們了解這些后再來看三家的窗口圖信息布局。
①、熊貓的信息布局形式，正式我上面提到的最合理信息瀏覽模式“標題→主播名+觀看人數(shù)→頻道分類”，因為標題相對于的是主播或游戲，這個信息閱讀是一個連貫?zāi)Ｊ?。熊貓的這部分信息剛好都布局在白色卡片部分。
②、斗魚的信息布局形式，斗魚的這部分信息結(jié)構(gòu)我自己看來是三家中合理性分配相對較弱的一個（我的分析是絕對站在客觀的角度來說）直播標題→頻道分類→主播+觀看人數(shù)。把標題和主播信息分割在封面圖內(nèi)外雖然虎牙也是這樣做，但虎牙更好的利用了多余的空間，并沒有把分類和標題結(jié)合在一起，而是和熊貓一樣的做法做到了封面圖上。斗魚這樣的做法既消耗了多余空間（也可能是因為擔(dān)心版塊間距過緊才這樣做的調(diào)整）又沒有形成良好的閱讀次序感。
③、虎牙的信息布局形式，直播標題→主播+觀看人數(shù)→頻道分類從信息的角度來看和熊貓的組合順序幾乎一樣，但問題出現(xiàn)在“直播標題”看完后要再向上看“主播+觀看人數(shù)”這個閱讀視覺感順序是反的。當然從另外一個角度來分析很有可能虎牙這么做的目的就是為了更好的利用屏幕占比，增加更多的信息內(nèi)容。
3、整體視覺通透感和合理性
這部分就用簡單的幾句話統(tǒng)一說下好了
①、熊貓的視覺通透感相對較好，整個頁面清晰簡潔。但問題方面由于卡片的約束空間較強文字較為密集，窗口圖對比也略小, 可以適當?shù)臄U大一些卡片面積。
②、斗魚空間利用率最大化，但沒有更好的排布信息布局，導(dǎo)致利用效果不佳，視覺瀏覽也不夠流暢。
③、虎牙的間距合理性算是最好，空間利用比例也最高。當然快速瀏覽是會只注重標題而忽略主播和觀看等信息，這也許是有他們在產(chǎn)品上的單獨規(guī)劃。
----------------------------------------------------------------------------------
總結(jié)：每一家公司或產(chǎn)品都有自己的目標導(dǎo)向，但作為設(shè)計師應(yīng)該有細致的信息分析和整理能力。很多時候設(shè)計不能夠主導(dǎo)一個產(chǎn)品的成功與失敗，但能否更快的調(diào)整出更合理設(shè)計表現(xiàn)狀態(tài)是我們時刻需要做的。
這一部分主要從“KEEP”和“抖音”兩個明星級產(chǎn)品來進行簡單粗略的分析。因為從日常比較高頻使用的熱門APP來說，這兩款的整體設(shè)計非常優(yōu)秀且又有各自的獨立特點，里面有很多設(shè)計細節(jié)和交互特點值得我們研究學(xué)習(xí)。
下面是我截圖的兩個產(chǎn)品頁面，頁面屬于列表和信息內(nèi)容較多的。分析具體方向從兩點出發(fā)
1、品牌色使用和通用標準色的使用范圍
2、輔助品牌色延伸特點
對于品牌色本身不做過多分析，因為每一家產(chǎn)品都有自己的特定規(guī)劃所以不做純猜測式分析！
整體分析后發(fā)現(xiàn)兩家產(chǎn)品盡管在配色的使用模式上形式不同，但每一個都把整體色彩體系應(yīng)用的非常精妙（除了要學(xué)習(xí)還是要學(xué)習(xí)Σ(⊙▽⊙"a）
1、KEEP
①、由于品牌色深度剛好可以在主文本上延伸使用，這樣既能夠有一個品牌特點呈現(xiàn)，又減少了多一個主文字配色的麻煩。其它的常規(guī)文本和輔助文本都是用了標準的通用文字配色，這樣會保持整個頁面內(nèi)重點文本內(nèi)容突出且有品牌特點呈現(xiàn)，又避免了頁面整體視覺感過于朝一個色系偏離而產(chǎn)生的視覺疲勞感。
②、KEEP的底導(dǎo)未選中圖標使用色彩是偏向了品牌色系，剛好和主色形成呼應(yīng)，而整體色彩深度又比底導(dǎo)上的文本色略淺一些。這個小細節(jié)的選擇完全看得出設(shè)計師的用心，因為文本和圖標對比顯示的面積更小，如果圖標使用同樣明暗度的顏色會顯得比文本色重很多，整體視覺感也會有很大偏差。
2、抖音
①、由于產(chǎn)品特點是走暗色系的都市時尚感，所以他們的也是恰好的把品牌色直接延續(xù)使用在頁面底色和底導(dǎo)上。同時版塊的底色也是在色域不變（HSB）的基礎(chǔ)上把明度提高了一些，保持了整體色彩的平衡性。并且由于整體接近黑色所以大范圍的使用也不會造成視覺疲勞感。
②、對于抖音的字體配色方法個人真的非常喜歡，他們只使用了純白色來做字體配色，然后通過不同透明度來規(guī)范不同文本性質(zhì)的使用范圍。這樣在透明度的使用情況下既可以透出部分品牌色，又可以減少很多不必要的配色選擇工作量，無論對于設(shè)計師還是開發(fā)都是非常好的選擇。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
