如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們每天都在設計圖標，并且保持這樣的狀態超過15年。身為設計師，想必你已經閱讀過很多關于圖標設計的文章，但是今天的文章不一樣，今天我們的文章不會花費很長時間來單獨介紹某一個圖標的設計，而是設計任何一套圖標應當遵循的基本流程，以及一定要注意的8個關鍵的注意事項，你可以將這些東西帶入到一些現成的案例當中去驗證。
這個注意事項清單，也可以被視作為給設計師所編寫的圖標設計指南，即使設計趨勢發生變化，這些規則和經驗依然適用。遵循這些規則和技巧，能夠確保圖標從設計到使用都可以更加無縫和順暢。
我們并沒有重新發明輪子，相反，我們會以這種方式來呈現我們的工作流程細節，希望它也能幫你有效地組織工作。
像我們需要系統而大量地設計圖標，設計流程是最重要的事情。正如你所看到的，繪制流程在圖標繪制之前，就已經開始了。
按照上面的流程，能夠繪制出不同樣式足夠優秀的圖標合集。下面是我們在這樣的流程下所設計出來的圖標示例。
▲ Material, Outline: Science and Studies Icons
如果你像我們一樣每天設計圖標的話，也會碰到各種各樣的問題。其中最重要的是下面的注意事項清單，它們能夠確保我們不同的人在不同的時期不同狀態下，設計出來的圖標能夠協調到一個主題、一個系統當中。如果你也要設計圖標的話，可以將下面的清單打印出來，貼在自己的桌子旁邊作為參考。
1. 像素完美
讓圖標踩在每個像素點上，確保清晰不模糊。
2. 視覺重量
用斜視的方法來感知圖標，看看成套的圖標是否都具有相同的大小。斜視、調整、再看、再調整，直至均勻理想。為了保持總體視覺重量的一致性，我們會使用「完美的圓形和正方形」來和所有的新圖標進行對比。
3. 幾何圖形
盡量使用簡單堅實的幾何形狀來繪制所有必要的線條，它們會讓你的圖標顯得更加牢固可靠，具有吸引力和說服力。
4. 清晰簡潔
刪除所有無法傳達圖標概念的細節，避免讓圖標顯得沉重而復雜。
5. 足夠的空間
確保圖標內每個細節和元素都有足夠的空間，不會顯得過于擁擠或者空曠。
6. 對比度
在黑色和白色的背景上檢查圖標的全部細節，看看是否其中的每種顏色都是可見的，以及元素之間的對比是否足夠。
7. 視覺統一
檢查線條的粗細重量，邊角的大小，配色方案，細節層次和設計元素在整個合集中是否是不變且一致的。
8. 圖層排序
確保圖標中圖層順序清晰而規整。這是一種良好的習慣和專業的精神。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
什么？都已經開始討論2019年的設計趨勢了？我依稀還記得最后一次看見秋葉在窗前墜落的場景，仿佛就發生在昨天。
但2018年也是真的到了底。在2018年的最后一月，說說2018年的設計熱點，談談2019年的設計趨勢，再合適不過。因此我們選取了8個一定會在2019年當中發光發熱的設計趨勢！
這篇文章的要點包括：
我們認為這些UI趨勢不單單會滿足用戶的審美需求，同時也會提供給用戶極高的可用性。這些趨勢的廣泛結合會取悅用戶并且推動你的產品走向成功。
有哪些影響2019年UI設計趨勢的元素？
目前的科技生態圈對UI趨勢有著持續的影響?；仡欉@個年頭看看，2018年已經發生了什么？
設計第一主義的改變
產品設計中，設計第一主義已經在今年變成了次要因素。為何？設計應該改善人們的生活并且幫助實現商業目的。
在2019年中，設計趨勢比以往任何時候都要符合以下要求，他們會優先考慮速度、精簡的頁面配合不對稱的排版，最重要的是，移動端第一。主要要考慮到目前用戶訪問網站或者APP時，時下最主流設備。
圓邊移動設備
目前大多數的移動設備都放棄了邊框轉為了圓邊。這樣的改變也深深地影響了界面。這個也會對使用使用銳邊元素的設計師在移動端UI設計上造成挑戰。
所以，不用多說，2018年的這些UI趨勢也可能早2019年依然存在：
2019年UI趨勢1：排版和講故事
2019年中，圍繞產品體驗講一個優秀故事的能力將會成為首要的趨勢。
排版本身可以構建強大的視覺層次結構。UI是一個非常關鍵的元素，它在帶來卓越的用戶體驗方面發揮著重要作用。
文本樣式本身也是不夠用的。文案正在成為優秀用戶體驗最重要元素之一。
雖然風格吸引了用戶的注意力，但是敘述會讓用戶感知品牌，使品牌作為故事的一部分。反過來也讓用戶不會表面的瀏覽內容。
2019年UI趨勢2：插圖和動畫圖形
隨著2019年的來臨，微動畫逐漸變得流行起來。它能夠通過交互幫助用戶區分屏幕上的元素。事件觸發后，反饋承擔起了重任，確保用戶清楚預期的操作事實上發生了。
數字或手繪的自定義插圖在2018年中發揮了巨大的作用。自由形式，不對齊設計和巨大的不對稱性不僅幫助平臺脫穎而出，而且還創造了一個友好和溫馨的環境。反過來又為用戶帶來了更好的體驗。
此外， 為了使這些頁面脫穎而出，這次插圖經常以復雜的動作呈現。
這樣的動感更容易吸引用戶注意力，并且可以一目了然地解釋公司或品牌提供的內容。一個引人愉悅的插圖可以為網站或移動App提供鮮明的個性，從而使其更加難忘。
2019年UI趨勢3：色彩，漸變和重疊效果
一種可能在不久的將來變得更加受歡迎的技術，重疊效果包括顏色、文本和圖像。重疊可以創建空間感和更結構化的界面。
由于現代顯示器具有比以往更好的色彩再現水平，漸變色在2018年大幅回顧。明年可能會給我們帶來大量色彩和漸變混合透明的材料。
我們可以在任何地方看到它們：插圖、UI元素、文本、我們喜歡漸變，因為它們為平臺增添了現實感和深度，是我們在現實生活中看到一切的方式。這可呢解釋了為什么具有漸變的元素感覺更自然。
越來越多的人使用大膽的顏色，無論是組合還是單色。通過使用超大文本，設計師發現最好限制極端的色彩展示。這會減少用戶使用次要元素的注意力，讓他們專注于他們應該做的事情。
2019年UI趨勢4：AI
在未來一年中，AI技術將繼續朝著更完美的方向發展，人機交互會變得更為平滑和一致。到2020年，語音在搜索引擎查詢的比重預期會達到50%。
聊天機器人和通信接口也趨于困難。伴隨著人工智能和機器學習技術進步，聊天機器人變得更加聰明。因此，許多網站和APP已經開始使用語音交互來增強體驗。
當我們在所有平臺上說話的時候，機器人變得越發普遍，包括Google的自動提示，智能家居語音交互（比如Google Home或亞馬遜的Alexa），虛擬助手（如Apple的Siri）以及幫助臺的機器人等。
2019年UI趨勢5：VR
虛擬現實在ui趨勢中有著重要作用，并且這個地位短期內不會動搖。憑借它對用帶來的影響，我們可以把它稱為互聯網體驗。
VR可以用于醫療保健以治愈恐懼癥或者用于教學以增強互動。因此，為了在2019年中真正增強UI效果，它看起來也是非常有前景的。
想知道UX研究中如何使用VR？看看這個有意思的文章。
2019年UI趨勢6：AR
設計師需要跳出僅限屏幕內的界面來，考慮到物理交互。增強現實開創了UI設計的新紀元，開辟了一種全新的思維方式。
2019年當中，網頁設計趨勢將跳出固有模式。我們需要忘記固定在屏幕上的UI，相反，我們應該強調在現實環境中發生的交互。
谷歌和蘋果已經推出了自己的AR開發平臺，ARCore和AEKit，它們融合了物理世界和數字世界。
AR UI有不同實現方法：
參考某個對象，與現實世界物體產生羈絆和交互; 固定到屏幕空間，用戶需要以特定的形式固定鏡頭; 參考真實世界，充分結合現實物理環境。
因此，我們必須仔細思考AR體驗的場景和功能。
2019年UI趨勢7：3D圖像
目前大眾市場對這項技術的需求很少，對網站來說也不常見。 盡管如此，專為平臺呈現的3D元素也是今年UI趨勢列表中的特色。
它接近尾聲，因為它不僅生產成本很高，而且加載時間也更長。 沒有人喜歡等待。
用戶希望平臺能夠立即加載。 任何為用戶旅程增加時間的元素都會讓人感到沮喪。
但我們不必完全放棄3D元素。Fauz-3D技術讓物體看起來是三維的，盡管在光線和陰影方面并不完全令人信服。
2019年UI趨勢8：動態“原型”
UI設計絕對不是產出一張張靜態的設計稿，而應該是包含著設計思維，用戶流程，交互鏈接的動態“原型”。
這其實不僅僅是意味著UI設計師的能力增長，也是產品得以快速實現落地的必要成長。
設計不是一個單獨的工作，它和產品、開發甚至用戶是存在著千絲萬縷的關系。就拿和開發的關系來說，handoff design已經是一個火熱的話題和趨勢，設計和開發的協作，設計和產品的交流，都離不開一份“動態”的“設計稿原型”。它傳達的信息至少包含（以摹客iDoc為例）：
（1）智能標注：
（2）智能切圖
（3）繪制交互
伴隨這一趨勢，協作平臺將會噴涌出現，比如Zepline和Mockplus idoc，前者是更早的一個產品，后者是我2018年接觸到的新平臺，都在有力的提醒我作為一個UI設計師改要增長的能力和視野。同時，我的工作效率乃至整個團隊的效率也會提升。
總結：2019年UI設計趨勢
1、排版和講故事
排版不僅是創建品牌形象的絕佳工具。將它與一個很棒的片段相結合，讓用戶能夠沉浸到故事當中。
2、插圖和動畫圖形
隨著19年的臨近，微動畫越來越受歡迎了。它們通過交互幫助用戶區分屏幕上的元素。
3、顏色，漸變和重疊效果
重疊效果包括顏色，文本或圖像。 重疊可以創造空間感，從而創建更加結構化的界面。
4、AI
在未來一年中，AI技術將繼續朝著更完美的方向發展，人機交互會變得更為平滑和一致。到2020年，語音在搜索引擎查詢的比重預期會達到50%。
5、VR
虛擬現實在ui趨勢中有著重要作用，并且這個地位短期內不會動搖。憑借它對用帶來的影響，我們可以把它稱為互聯網體驗。
6、AR
設計師需要跳出僅限屏幕內的界面來，考慮到物理交互。增強現實開創了UI設計的新紀元，開辟了一種全新的思維方式。
7、3D圖像
目前大眾市場對這項技術的需求很少，對網站來說也不常見。 盡管如此，專為平臺呈現的3D元素也是今年UI趨勢列表中的特色。
8、動態“原型”
從handoff design而來的交互設計稿原型圖，包含自動標注和切圖，交互原型演示，評論批注和全貌畫板于一體，極大的促進和產品、開發的寫作和交流。
總而言之，UX / UI設計師需要在工作中與創造力和創新為伴。 雖然我們無法避免一成不變的狀態的渴望，但是緊跟熱點并且充分利用起來至關重要。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
讓產品(服務)團隊了解用戶使用過程中的看、想、聽、做，讓他們能夠從用戶角度去考慮產品、設計產品。什么是用戶體驗旅程圖？
概念&作用
從用戶角度出發，以敘述故事的方式描述用戶使用產品或接受服務的體驗情況，以可視化圖形的方式展示，從中發現用戶在整個使用過程中的痛點和滿意點，最后提煉出產品或服務中的優化點、設計的機會點。同時讓產品(服務)團隊了解用戶使用過程中的看、想、聽、做，讓他們能夠從用戶角度去考慮產品、設計產品。這個過程的產出物即為用戶體驗旅程圖。
由什么構成？
這里分為功能定義前和功能定義后；
定義前即為：準備規劃做的功能、進入用研階段時；
定義后：已經上線的功能、需要優化的功能。
如何做？
1、創建用戶角色模型（用戶畫像）
既然旅程圖是梳理用戶使用產品上的體驗問題，那么我們需要以用戶的真實情況為基準，這樣會使旅程圖更真實。
這里可以通過前期的用戶研究，比如：訪談記錄、行為研究、調查問卷、意見反饋等方法，獲得大量真實有效的用戶數據。
然后對產品的主要目標用戶進行分類，并為每個用戶創建角色模型（包含基本信息、訴求、期望、痛點），每個角色將對應不同的用戶體驗地圖。
2、開始制作旅程圖
這里就以功能定義前為場景，因為用戶畫像和使用行為是單獨知識體系，后面會單獨產出一篇關于用戶畫像的，敬請期待哦！
（1）為了便大家理解，我在這里列舉一個生活中都經歷過的小栗子。
開始：起床
目標：到達公司
我們先回想一下今天早上起床的過程。把這段場景分成下面幾個階段：
一級行為：
起點和終點并不代表結束，要聯想到相關的場景，比如：到到達公司后，還有沒有有可能解決上班相關的問題？
（2）在真實做項目過程中，大家在這一步可能會寫出不同顆粒度的故事，需要設計師或產品經理把控場景大小。這段場景可以再往下梳理一層顆粒度更小一點的場景，比如起床就可以再細分為：
二級行為：
剩下的場景模塊都可以繼續這樣細化并歸類。
這樣我們的主線場景就有兩個層級：一級行為和二級行為，場景從左至右形成一個時間線。
但是，真實的用戶場景不會按照你所畫的順利進行，情況會變得復雜、多變（交互設計師要考慮到異常情況和特殊場景的發生），這個時候我們可以借助流程圖的方式連接我們的場景：
（3）拆分場景
此時，我們需要在剛剛梳理的每個二級行為下面停留，繼續細化二級行為，從中獲取更多的信息。
體驗設計就是需要不斷地問“為什么”、不斷發掘潛在需求。
參與人員會圍繞這個行為場景寫出很多細節來。我們可以按照以下幾個維度對細節進行歸類：
其中情緒曲線可以通過固定的問題獲得，也可以通過用戶想法、用戶的痛點結合主觀判斷。
在這個過程中，先限制時間，讓大家按照自己的想法寫出來，每條思考寫在一張卡片上，相互不干擾，然后每個人闡述自己的卡片內容，讓參與者了解大致的信息
注意：要以完整的流程為中心，一定要廣度優先，而非深度，比如起床這個故事里面，找衣服、穿衣服這類場景在這個階段我們無須關注，不要過早的沉浸到細節中。
完成上述步驟后，你將得到一份重要的節點清單，下面需要對重要的節點進行分類，以便在繪制旅程圖時更加的方便。比較常用的做法是將所有關鍵節點寫在便利中并黏在墻上，然后將同類別的關鍵節點集中在一起，并為每個類別貼上分類標簽。分類完成后，對核心的節點進行篩選，移除掉重復、沒有價值的內容。
（4）接下來，我們可以根據問題點的數量來衡量每個節點的情緒水平了。一般可以用積極、平靜、消極這三種情緒來表達用戶的使用感受。這一步做完，我們一眼就可以看出痛點在哪個環節上了。
（5）針對痛點，討論可行的解決方案
先根據自己的經驗，對標競品，設想一些解決方案，然后組織產品、設計、leader再進行一次腦暴（核心人員即可，人多會導致喪失方向），讓大家一起進入旅程圖，以用戶的角度再走一遍流程。在這個過程中，如果發現旅程圖中有偏差和遺漏的地方，大家就可以一起修改、補充、審核。
總結并通過可視化模板記錄：
最后，結合體驗地圖行為的情緒曲線、設計的機會點，梳理優先級：
a.對情緒的最高觸點，思考還有沒有優化的空間，能否將它繼續優化做到；
b.對情緒的觸點，思考是否能將其他觸點較高的地方，分擔一部分功能（次要功能）到觸點，來均衡體驗情感；
c.可以對標競品，看看別人是怎么解決問題的，尋找適合自己產品現階段的解決辦法。
補充：
大家發現沒有？參與人員在寫想法的時候，就是頭腦風暴的過程，抓住機會，通過一些開放式、引導式的提問來刺激大家腦暴出更多的內容（有利于產品經理和交互設計師獲取靈感）比如：
總結：
另外，功能或痛點的解決優先級可以通過四象限法則歸類，與旅程圖同時交付，
做到：用戶、場景、行為、問題、解決辦法、解決時間一目了然
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
文章包括品牌理念、品牌識別、APP大改版、品牌延伸。
△ 點擊查看完整視頻
百度網盤是百度提供的個人云存儲服務，自2012年上線至今，通過強大的技術能力以及承擔高額的帶寬成本，為7億用戶提供文件存儲、備份、分享、共享等服務，成為行業領先位置。
這6年里，我們從滿足基礎存儲需求的一款工具，到現在越來越意識到高品質和情感化的體驗對于用戶的重要性。
因此，團隊希望通過本次的品牌升級，能夠從視覺識別、產品體驗、線上線下推廣等多維度來傳遞品牌核心價值，同時遵從極簡克制的百度「高級感」設計理念，形成一套完整統一的設計語言，真正的做到像 slogan 所傳遞的：「讓美好永遠陪伴」。
本次品牌升級希望傳遞用戶3個核心點：更有溫度、更便捷、更年輕。
網盤一直以來存儲著用戶的美好回憶，比如：每一次難忘旅途的照片，寶寶成長記錄，家人團圓時的合影，激情工作時的陪伴。因此，它不僅僅是一款冰冷的工具，而是一個懂你的、有情感、有溫度的生活助手。
過去幾年，網盤一直主打的品牌核心點是「安全」、「免費」、「大空間」，不可否認之前的品牌傳遞是成功的，因為通過這些核心點，在同行業的用戶占有率達到80%以上。
但是，未來除了最基礎的「安全」以外，還需要傳遞什么感受呢？我們深知產品體驗還有很大的提升空間，比如：如何讓產品更易用、存儲更便捷、查找更方便、瀏覽更沉浸等等。因此，「便捷」是接下來品牌需要傳達給用戶的核心價值。
通過數據分析，網盤的用戶24歲左右占大多數，也就意味著我們的主流群體是年輕人。除此之外，保持品牌的年輕化，也是每一個公司都希望做到的。
因此，本次品牌升級，我們希望不管是從視覺層面，還是文案互動，以及運營手法，都更加年輕化及趣味性。
品牌升級不是虛喊口號，而是應該通過各個設計觸點的配合給用戶傳達融合、一致的感受和體驗。因此，我們從以下幾個場景進行滲透：品牌識別、APP設計、品牌延伸。
在品牌識別滲透環節，涉及到以下幾個方面進行優化設計：品牌色、品牌標識、品牌字體。
品牌色
品牌色是用戶感知品牌最直觀的方式，比如：想到可口可樂就想到紅色，想到百事可樂就是藍色，想零度可樂就是黑色。對，好的品牌色能夠占領用戶心智，從而產生聯想，這就是品牌色的重要性。
那么百度網盤呢？網盤的品牌不是從0到1的小而美的創新設計，需要兼顧7億用戶量對品牌的已有認知，這是一個令人頭疼的挑戰。
因此在品牌色的選擇上，考慮到較大改動帶來的用戶認知成本的增加，所以經過多輪嘗試和討論后，決定延續用戶已有認知的「紅藍」配色，在此基礎上，進行調整并滲透新品牌的理念。
同時，在品牌色上希望傳遞「更年輕」的品牌理念。我們大量收集體現「年輕」的場景進行多輪討論篩選，提取色調，結合情緒板，最終提煉并定義了我們的品牌色。
品牌標識
在做品牌標識（LOGO）階段，大家發散了很多想法，嘗試了很多方案。
通過多維度思考以及利弊權衡，最后選擇在延續原有 logo 特征上，體現新品牌理念——「更有溫度」的感受。
那么，現實生活中什么場景，會給人「有溫度的」感受呢？我們想到了擁抱、愛心、陽光、火焰等等。最終覺得「微笑」更符合我們所傳遞的感受，同時也能更好的跟原有 LOGO 特征進行結合。
以下是 LOGO 的設計思路，用顏色體現「年輕」，微笑體現「溫度」。
LOGO的最終造型：
品牌字體
LOGO 確定后，還需要設計與之搭配的品牌文字，這個階段最主要是找到跟品牌性格以及圖形風格相契合的字體骨架。同時兼顧原有字體的認知，在此基礎上進行微調。比如：統一字體的粗細，以及切角的角度，使整體視覺更加協調。
LOGO和字體組合的最終版本：
不可否認，傳遞品牌理念最直接的方式，就是在用戶使用它時。因此，我們對產品 NA端進行9.0全新升級（這是自上線以來第一次大改版）。
品牌基因
在互聯網產品越來越同質化的今天，做出有差異性和符合品牌調性的設計是我們面臨的挑戰。因此，在品牌基因方面，做了大量的嘗試。
經過多輪討論，我們選擇以「積木」作為網盤的品牌基因。因為「積木」陪伴著我們成長，代表著我們的童年，給人溫暖的感受，同時，不同幾何形的積木看似單一，組合起來又有很多可能性，體現了年輕和趣味。
在圖形設計（ICON）時，提取「積木」中的幾何元素進行疊加處理，用色上更加鮮亮，突顯年輕化，形成網盤自己的圖形體系。
相比「尖銳」的直角，圓角給人柔和的視覺感受，同時經過多輪的嘗試，最終確定圓角大小為8px。
同時在空白頁上延續圖形風格，能夠更好的統一視覺語言，傳遞更加一致的品牌感。
動效上，采用了符合「積木」運動特征的物理屬性。因此，運動節奏上利落的不拖泥帶水。比如，積木受到一個力，由于摩擦力會快速停止，而并非很Q 的彈性動效。
下圖中，「藍球」代表目前網盤中元素的運動方式，「紅球」代表了市面上常見的彈性運動方式。
下圖，是將這種運動規則使用在產品界面中時：
同時底部 tab 在運動節奏上，也采用相同的運動規律，賦予產品年輕活力的視覺感受，同時又不會喧賓奪主過度搶戲。
下拉刷新，是增強品牌記憶的最好體現。本次提取 logo 基本元素，同時強調「微笑」，加深用戶對品牌的印象。
功能設計
前面有提到，百度網盤保存著用戶非常多美好回憶的照片，或許那些回憶，用戶都已經忘記，但往往這些才是最大的驚喜和感動。
因此，9.0版本新增「故事」模塊，讓美好回憶與你不期而遇。通過技術對優質、精彩照片的篩選，生成故事卡片，推送給你，給你帶來溫暖。
為了節省用戶時間，傳遞品牌「更便捷」的理念，本次改版我們優化「分類」模塊，將「分類」外置于首頁頂部，減少用戶操作步長，輕松查找自己的文件。
同時在首頁新增「最近」功能，方便用戶便捷查找歷史操作，而不是像以前，反復點擊層層相套的文件夾去瀏覽與查找。
排版布局
文件列表是用戶使用網盤最高頻的路徑，針對這個場景，我們遵循視覺服從功能，極簡克制的百度「高級感」設計理念，通過視覺手段區分信息層級，讓用戶瀏覽時「更便捷」。
因此，本次對文件列表排版布局，從以下幾個維度進行優化：大小、重量、間距。
大小
改版前，用戶打開文件列表，首先看到的是滿屏黃色的文件夾，而這些并不能幫助用戶進行瀏覽或篩選，反而會造成視覺干擾。
因此，本次對文件圖標大小，縮略圖尺寸，以及標題信息大小，進行整體調整，從而提升瀏覽效率。
重量
對于文件列表，信息層級重要性依次為：名稱>圖標>時間，因此，本次優化了視覺重量對比。
通過視覺重量的處理（對標題字號加粗、顏色增強），讓用戶更加便捷的獲取有效信息。
間距
以下是舊版安卓端和改版后對比，去除頂部藍色雙導航的同時，通過縮小文件圖標，進而縮小列表間距。
同時，調研行業內有代表性產品的列表行間距，綜合分析對比，最終確定列表行間距為「180px」，平衡體驗的同時，讓用戶在首屏看到更多內容。
還對 NA端進行統一的柵格化布局，讓頁面富有統一的秩序感和韻律。讓元素、模塊、頁面間距有規律可循。
柵格化布局落地全部界面：
以上，是品牌理念滲透到 APP 設計中，進行9.0大改版的相關設計，從品牌基因、功能設計到排版布局，統一的傳遞全新品牌理念。
線上線下的活動和物料設計，也是品牌和用戶的觸點，在設計的時候需要延續整體的品牌調性，傳遞出統一的品牌感。
以上，是百度網盤本次品牌升級背后的原因，以及相關體驗設計優化。從前期定義品牌核心理念（更有溫度、更便捷、更年輕），到通過不同場景及接觸點進行滲透（品牌識別、APP設計、品牌延伸），線上線下多維度的傳達統一的品牌理念。所做的這一切，都是希望能為用戶提供更好的服務。
本次品牌升級，是百度網盤所有同學努力的結果，我們深知還有很多體驗需要提升，這次升級只是開始，會持續讓用戶感受到「讓美好永遠陪伴」。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
那如何縮短數據與用戶的距離？讓用戶一眼抓到重點？讓老板為你的匯報方案鼓掌？
本文通過連環15關，層層深入，傳你數據匹配圖形神功，讓數據可視化更。
無論數據總量和復雜程度如何，數據間的關系大多可分為三類：比較/構成/分布&聯系。
基于分類/時間的數據對比，通常需用到比較型圖表。用戶通過圖表輕松識別最大/最小值，查看當前和過去的數據變動情況。
常見場景：哪個地區的收件量最多？今年的收入和去年相比如何……
1. 條目少 – 柱狀圖
比較條目較少時，如5個地區收件量的對比，可選用柱狀圖表示。
△ 柱狀圖
2. 條目多 – 條形圖
當條目較多，如大于12條，移動端上的柱狀圖會顯得擁擠不堪，更適合用條形圖。一般數據條目不超過30條，否則易帶來視覺和記憶負擔。
△ 條形圖
3. 看趨勢 – 折線圖
當X軸為連續數值（如時間）且注重變化趨勢時，則適用折線圖。
△ 折線圖
4. 擴大差異 – 南丁格爾玫瑰圖
除柱狀圖外，有無更新穎的表現方式呢？那就屬南丁格爾玫瑰圖了。
△ 南丁格爾玫瑰圖
由于扇形的半徑和面積是平方的關系，南丁格爾玫瑰圖會將數值之間的差異放大，適合對比大小相近的數值。它不適合對比差異較大的數值，因為數值過小的類目會難以觀察。
此外，因為圓有周期性，玫瑰圖也適于表示周期/時間概念，比如星期、月份。依然建議數據量不超過30條，超出可考慮條形圖。
5. 雙向 – 雙向條形圖
前面的例子都是單維度比較，當比較正反兩類甚至更多維度的數據時，可嘗試雙向條形圖，下圖為各大區的重點地區的收派件量的對比。
△ 雙向條形圖
用顏色區分大區，空心/實心區分收件量和派件量，既能整體比較大區，又能詳細對比地區的情況。
打怪升級，再加點難度。在雙向圖上再增加一個維度，如下表，比較5個地區的利潤及相應的收入和成本。請先思考一下，再下滑看推薦圖表。
△ 業務數據
△ 雙向條形圖（多維度）
通過圖形一眼就能看出深圳區的利潤低于廣州區，即使它的收入高于廣州區，但成本相對來說高于廣州區。
6. 目標達成 – 子彈圖
實際業務中，常要考察指標的達成情況，如收入達標情況及所處區間（優、良、差），如下表，你會怎么可視化呢？動手畫一畫吧！
△ 業務數據
△ 子彈圖
子彈圖，因為像子彈射后帶出的軌道。相較于儀表盤，它能夠在狹小的空間中表達豐富的數據信息，在信息傳遞上有更大的效能優勢。
若還要比較4個季度的收入情況，只需用不同顏色區分。如下圖，一眼便知第二季度表現較好，而第一季度則不佳。
△ 子彈圖
7. 性能 – 雷達圖
對于一些多維的性能數據，如綜合評價，常用雷達圖表示。指標得分接近圓心，說明處于較差狀態，應分析改進；指標得分接近外邊線，說明處于理想狀態。
△ 雷達圖
以上就是「比較」類的常用圖表，可歸納如下。
此表并非一成不變的「鐵表」，相互之間還會串聯交叉，大家還需靈活應用。
部分相較于整體，一個整體被分成幾個部分。這類情況會用到構成型圖表，如五大區的收件量占比、公司利潤的來源構成等。
1. 單層 – 餅狀圖
第1關中，對比5個地區的收件量時用到了柱狀圖。若看占比情況，餅狀圖更合適。
△ 餅狀圖
如果變成17個地區，會怎樣？
像不像彩色七星瓢蟲？
所以餅圖分類一般不超過9個，超過建議用條形圖展示。
除餅圖外，環形圖（甜甜圈圖）亦可表示占比，其差異是將餅圖的中間區域挖空，在空心區域顯示文本信息，比如標題，優勢是其空間利用率更高。
△ 環形圖
2. 分層 – 環形圖、旭日圖
對于管理層而言，需先把握大局和重點。比如大區負責人需一眼看到重點地區及重點分部的情況（如下圖），如何展示？
△ 環形圖
△ 旭日圖
這個叫旭日圖，逐層下鉆看數據，大區的重點地區及相應分部的構成情況一目了然。
3. 累計趨勢 – 堆疊面積圖
接下來，看看數值構成隨時間變化的案例：第一大區（包含四個重點地區）近四年收入構成的趨勢要如何可視化？自己想一想，再下滑看推薦方案。
△ 業務數據
△ 堆疊面積圖
推薦方案是堆疊面積圖，可以展現分量（地區）對于總量（大區）的貢獻，并顯示總量（大區）的變化過程。需要說明的是，地區收入的起點并非從 y=0 開始，而是在下面的地區基礎上逐層疊加，最后組成一個整體。
4. 累計比較 – 堆疊柱狀圖
如果將上圖X軸的標簽文字（即年份）和圖例（即地區）互換（如下圖A），用來看每個地區近四年的收入構成，用哪個圖更合適？
△ 堆疊柱狀圖
是不是覺得都可以？那圖中 X1 有何含義？堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現累加值。差別在于，堆疊面積圖的 x 軸是連續數據（如時間），堆疊柱狀圖的 x 軸是分類數據。此案例中的 x 軸是非連續的分類數據，因此用 B 方案更適合。
5. 累計增減 – 瀑布圖
若想表達兩個數據點間數量的演變過程，可使用瀑布圖。開始的一個值，在經過不斷的加減后，得到一個值。瀑布圖將這個過程圖示化，常用來展現財務分析中的收支情況。
△ 瀑布圖
以上就是「構成」類常用圖表，可歸納如下。
通過分布&聯系型圖表能看到數據的分布情況，進而找到某些聯系，如相關性、異常值和數據集群。
常見使用場景：客戶的年齡段分布？單票成本與收件量的關系？
1. 兩個變量 – 散點圖
仍以業務為例，下圖為全國網點的單票成本/收入分布情況。
△ 散點圖
單單這樣看，可能看不出什么，如果加兩條平均線就不一樣了。
加了平均線，就知道哪些網點高于平均線，哪些低于平均線。但網點那么多，總不能逐個點擊查看是哪個大區的，給散點加上顏色后，就很有意義了。
通過此圖，可以看出哪些大區單票利潤較低，急需提升，比如廣泛聚集于右下角的第四大區，單票收入低于平均線，單票成本卻高于平均線。
2. 三個變量 – 氣泡圖
大家都知道，網點總利潤除了和單票利潤有關，還和體量（即收件量）有關，用散點的面積大小表示收件量，就變成了氣泡圖。
△ 氣泡圖
3. 結合地圖 – 熱力圖
氣泡圖與地圖結合可演變為熱力圖。通過熱力圖，能看到哪些網點收派件量較多，需進行資源調配。
△ 熱力圖
以上是 「分布&聯系」類的常用圖表，可歸納如下：
當我們拿到數據后，先提煉關鍵信息，明確數據關系及主題，再選擇合適的圖表進行可視化。希望下圖能給各位一些參考（結合可視化專家 Andrew Abela 的圖表選擇指南，進行了簡化調整）。
數據可視化設計只要多練習、多總結，總有一天會得心應手。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今年是宮崎駿電影《龍貓》上映的30周年，吉卜力工作室已經將電影原版膠片轉換成了高清數碼，進行了修復與重制，并將于12月14日在內地上映。
近日，龍貓中國版終極海報公布，由我們熟悉的著名設計師黃海設計：
小梅與小月在看似是稻田實則是龍貓毛茸茸的肚子上玩耍。
設計師黃海大家想必已經不再陌生，被稱為「天才設計師」的他設計了包括《一代宗師》、《黃金時代》、《大魚海棠》、《我不是藥神》、《小偷家族》、《影》、《邪不壓正》等電影海報，收獲了外界的一致好評。
黃海出身「廣告界的黃埔軍?！箠W美，在這里他遇見了他的恩師——臺灣著名的文案大師劉繼武先生。
在奧美的經歷為他打開了創意的大門，之后他加入了一家本土廣告公司擔任美術總監，2007年，一次偶然的機會接到姜文的電影《太陽照常升起》的海報設計任務。這是他第一次設計海報，卻在戛納電影節上一亮相就艷驚四座，從此聲名鵲起。
△ 2007年《太陽照常升起》
在此之后，黃海受到大量知名導演青睞，包括陳凱歌、姜文、馮小剛、馮德倫、徐克、王家衛、陳可辛等，在此期間也設計了相當一部分的早期優秀電影海報，例如《讓子彈飛》、《唐山大地震》、《太極》、《一代宗師》等等。
他的設計逐漸成熟，風格也十分多變，唯一不變的是讓人驚嘆的創意和構圖。
△ 2008年《梅蘭芳》
△ 2009年《花木蘭》
△ 2009年《白銀帝國》
△ 2010年《讓子彈飛》
△ 2012年《白鹿原》
△ 2012年《太極》
△ 2013年《一代宗師》
△ 2013年《中國合伙人》
時間來到2014年，一組《黃金時代》的電影海報，黃海從設計界走到了一般群眾的視野中。
這組極具東方色彩和現代美學的海報在微博、微信上被瘋狂轉發，似乎就是以這為契機，所有人記住了這位天才設計大師的名字——黃海。
海報根據在不同上映國家的特點，制作的張張樣式都不一樣：
△ 中國大陸
△ 美國
△ 日本
△ 臺灣
△ 韓國
△ 香港
相比于《黃金時代》，同為2014年的作品，《匆匆那年》和《黃飛鴻之英雄有夢》似乎就并不出名。
2015年，有了之前《黃金時代》的出色表現，黃海更加引人矚目，從這一年開始，他的優秀作品呈井噴式地出現在大眾視野中。
△ 2015年《尋龍訣》
△ 2015年《山河故人》
△ 2015年《道士下山》
△ 2015年《念念》
△ 2015年《捉妖記》
2016年，國產電影《大魚海棠》崛起，而黃海和插畫師@sheep卍 共同合作為其設計的海報再次驚艷四座。
跌落水中的椿，和大魚的一眼凝望，開啟了這場奇幻的故事。2016年7月8日，赴你十二年之約。
△ 定檔海報
當海洋與火焰相融，7月8日，我們終將重聚。
△ 終極海報
同年，中國中央電視臺出品的一部三集文物修復類紀錄片《我在故宮修文物》上映。
海報分別以6件國寶級珍貴文物為背景，分別是：元代「剔紅水仙花紋圖盤」、明代「邊景昭 竹鶴圖軸」、清代「黑色綢繡菊花雙蝶圖竹柄團扇」、清晚期「掐絲琺瑯萬壽無疆中碗」、明代「自在觀音像」、宋代「汝窯天青釉弦紋三足樽」。
當然這一年還有喜劇之王周星馳的大爆電影《美人魚》：
黃海更是在這一年操刀第53屆金馬獎海報，他以楊德昌《牯嶺街少年殺人事件》為靈感，設計出男主角拿手電筒探照暗處的身影，除了向經典致敬，也帶出「回看來時，照亮前行」的期許。
△ 2016年 第53屆金馬獎
時間推進到2018年，今年黃海更是收割了整年大半的優秀電影。而他的驚艷的設計風格也逐漸變得讓大眾看到海報的同時就能反應過來「這是黃海老師設計的吧」。
△ 2018年《我不是藥神》
△ 2018年《江湖兒女》
△ 2018年《少年的你》
△ 2018年《犬之島》
△ 2018年《小偷家族》
有人說，黃海把中國電影海報設計拉至了國際水平，他將藝術、靈魂和故事完美地結合在一起，他的魅力在于很多人僅僅因為他設計的海報而去看相關的電影。
如今黃海設計的電影海報作品越來越多，我們不妨開始期待，他的下一份作品會帶來什么樣的驚喜。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
要怎樣才能算上一個優秀的設計師呢？優秀的設計師意味著要在大公司里工作？還是要打造了一個意義非凡的世界？抑或是因為寫了本設計領域熱銷的著作？…一個優秀的設計師可能會滿足以上的所有條件，也可能一條都不符合，這其實都不重要。當你和優秀的設計師一起共事的時候，你就會從他們工作和為人處世的方式——獨處方式、思維方式、設計方式——來感受優秀的設計師到底是什么樣子的。其實他們都有自己獨特的處事風格，并且各自有著不同的特長和個性。我有幸和一些非常棒的用戶體驗設計師和產品設計師一起共事過，他們有一長串無法數盡的本領。但我觀察到一些他們共有的特質：
“有效的提問帶了來洞察力，洞察力滋養了好奇心，好奇心澆灌了智慧”
在設計師的眼里，世界是千變萬化的。優秀的設計師經常會對事物進行質問。如果有什么是難以理解的，他們就會去問個明白。
“‘走直線’是走不了太遠的”
探索者將“永遠不去走直線”視作自己的信條。探索的過程中總會伴隨著未知。探索者不知道他們不知道的事情有哪些，他們的目標也不是去尋找有哪些事他們不知道，而是去理解事情的本質是什么。在我看來，優秀的設計師會用一種開放的思維來探索他們的項目，因為他們自己也不確定他們最終會發現什么。
“雙重性格者（同時具有內向和外向性格的人），往往更有創意，因為他們更能適應新環境”
雙重性格者能很好地應付團體活動和社交場合，當然他們也喜歡有獨處的空間做點自己的事。優秀的設計師既需要與團隊通力合作，也要喜歡獨立地想點子。
“開發一個內置的廢話探測儀”——Ernest Hemingway
當你跟形形色色的人一起共事時，你必須學會把他人的廢話扼殺在搖籃里。優秀的設計師知道什么樣的人廢話多，并在工作中杜絕他們說廢話的機會。
“聚沙成塔 ”（“Small changes eventually add up to huge results”）
在會計學里，“累積變化”是指所有差異的總和。革命性的變化往往是累積而來的。優秀的設計師會抓住讓他們不爽的東西，并且試著去做改善。他們善于把眼光放遠來觀察事物的全貌，并且明白微小變化會引起巨大的轉變。
“不要一開始就對自己設計方案的抱有自信，開始的時候應該持有一種好奇和質疑的態度”——Simon Pan
這條黃金法則是Simon Pan在讀了Marty Neumeier 的《創造力提升的46條天才法則》后提煉出來的。在這本書中， Marty 強調說人的意識形態對學習新知識是有害的，我們要拋開先入為主的觀念，并思考為什么我們相信我們所做的事情。
“掌聲固然動聽，但禁得起批判更難能可貴””——Paul Arden
優秀的設計師并不會特別在意自己的觀點能否成為解決方案，他們更想要的是完美的結果，自尊心被他們扔在一邊。他們的終極目標是：在使用它的用戶和創造它的公司眼中，這款產品是最棒的。
“用不尋常的眼光來觀察尋常的事物”——Vico Magistretti
“我喜歡和那些有創造力（雄心壯志）并且’魔怔’ （專注）的人一起共事”——Nicole Kidman
設計師在解決問題時會變得非常專注。我見過一些優秀的設計師，他們對自己的項目抱有極大的熱枕，并且被它們牢牢地吸引著。當事情不順利的時候就會令他們相當的苦惱。
“成為一個獨行俠吧，這樣你就有時間去思考，去探索真理。保持神圣的好奇心，讓自己的人生變得有意義?！薄狝lbert Einstein
優秀的設計師既能自得其樂地獨自關在小黑屋里工作，也可以和團隊一起合作，達成他們想要的目標。
“把你最愛的東西都干掉，從你的想法中走出來，投入到過程中去”——Chirryl-Lee Ryan
過程是一切的關鍵。我們要對過程報以信任。這個過程是帶領設計師通向最終目標的引路牌。在這個錯綜復雜的世界中，過程就是設計的關鍵。
“要想成為與人交流的大師，首先要學會閉上嘴來傾聽”——Rick Warren
人都有兩個耳朵，兩只眼睛和一張嘴。優秀的設計師會遵照這個比例來使用它們（即兩分聽，兩分看，一分說）。大多數人傾聽是為了做出回應，優秀設計師的傾聽則是為了試圖去理解人們的所思所想背后的本質。
“即便是簡單的關心也是值得敬重的”——Edward Albert
好的設計師潛意識里是富有同理心的，他們關心人本身，喜歡問“為什么”，同時他們關注人的技能和本質。
“與普世觀點不同的是，設計師并不是藝術家。我們通過藝術的手段將我們的思維和工序可視化，但與藝術家不同的是，我們致力于解決客戶的問題，而不是展示我們自己對世界的看法?！薄狤rik Spiekermann
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、什么是用戶角色模型（用戶畫像）？
概念&作用
用戶角色模型是真實用戶的虛擬代表，通過一系列的真實數據分析，得出的目標用戶模型。模型通過抽象來代表復雜的現象，好的模型強調結構的顯著關系，弱化不太重要的細枝末節。我們要了解：用戶與用戶，用戶與期望，用戶與環境，以及用戶與產品之間的關系并且將其視覺化。
這里的視覺化可理解為：海量的數據標簽（標簽化、數據可視化）。比如我們要統計每個用戶的行為特征，細分到人口基本屬性、社會屬性、生活習慣、消費行為等信息，抽象出各個具體的標簽，賦予名字、照片、一些人口統計學要素、場景描述等，最終形成一個人物原型（personas）。
創建用戶角色模型的好處
· 與利益相關者、產品團隊在研發中拋開個人喜好，聚集在用戶動機和行為上，了解用戶深層次動機與心理；
（拋開個人喜好：產品團隊容易將自己的目標、動機、技巧代入產品設計中，這就是設計者心理模型）
· 避免設計陷阱，讓產品設計更聚焦，防止走偏，避免把過多的心思花在其他邊緣性功能上
（更聚焦、防止走偏：有人物模型為基準，團隊就能清晰的對功能進行優先級排序，以核心功能、解決用戶訴求的功能為主，可避免把注意力放在非核心且次要的功能點上。）
· 有助于為營銷活動、組織架構、客戶支持、戰略規劃及設計決策 提供有價值的信息。
由什么構成？
顯性畫像：用戶群體的基本信息描述，如目標用戶的年齡、性別、職業、地域分布、興趣愛好等信息，一般通過客服人員線上交流、用戶賬號數據、常關注的內容做判斷，間接獲取數據；
隱性畫像：用戶群體深層次的特征描述，如使用產品的目的、解決什么問題、偏好、訴求、場景、愿景、使用頻率等。主要以問卷、訪談、意見反饋等方式直接獲得數據。
說到底，用戶畫像就是先對逐個有代表性的用戶進行特征描述，然后對共性特征進行提煉、分類，最終將用戶標簽化、數據可視化。
二、用戶畫像構建的基本流程
用戶角色模型不是拿來既用、用完即丟的，而是建立在系統的調研分析、真實的數據統計之上得出的有力結論。
這里要考慮用戶畫像的優先級，畫像一般會存在多個（多個用戶），通常一個用戶只能有一個，不能為擁有三個以上畫像的用戶設計產品，容易產生需求沖突，要分清楚哪些是核心用戶（既目標用戶、產品的支撐者），哪些是非核心用戶，所以我們的設計目標就是維護、培養、促成核心用戶。
同時要以適合產品團隊和項目需求為出發點，用戶畫像不是一成不變的，而是根據現實情況同步更新，現在我們進行四步畫像構成法：
1、確定分析維度
用戶角色模型是針對特定產品或特定功能的，所以人物角色的分類一般是根據用戶的目標（用戶需求）、行為和觀點（行為傾向）進行。
舉例：
目標？什么原因促使你使用該產品？解決你什么問題？
觀點？產品中最喜歡的功能？為什么喜歡？是否達到了你的預期？
行為？你最近一次使用產品做了什么？用了多久？
下面以2個維度做參考：
2、基礎數據收集
數據是有力證據，是構建用戶畫像的核心依據，在基礎數據收集方面，可以先列舉出構建用戶畫像所需要的基礎數據。
具體的思路如下：
上面列舉的數據緯度相對比較多，在構建用戶畫像過程中可根據需求進行篩選。
這些數據有三個來源：相關文獻資料和研究報告、產品數據后臺、問卷調研和用戶訪談，可以按照以下維度區分：
（這里涉及到用戶研究中重要的環節：用戶訪談、數據收集，將歸納為單獨的知識點于下篇文章分享，期待有你~）
3、分析建模
通過以上收集方式并成功采集后，下面開始對不同的角色進行分類（通常采集多個用戶做參考，如單個用戶可直接將其標簽化，然后套入完整模型中）
（1）先確定好產品屬性，按照用戶角色進行分類，比如外賣APP有：商家、消費者、騎手 三種角色，圖例：
（2）然后將角色內的用戶身上觀察到的一些顯著的行為列出不同的幾組行為變量，例如：對產品的積極性、熱情度、學習能力、熟練程度、消費觀等。
（3）將訪談對象和行為變量對應起來
這里就以電商產品為例，將用戶個性（行為變量）做成一個區間軸，再把訪談對象放到區間軸上面對應起來，不需要那么，標出相對位置即可
注意：行為變量有兩種情況
· 一種是連續性，比如使用頻率的描述是：經常到從不
· 另一種則是非連續性，比如使用的平臺：移動端、PC端
對這兩種情況，大家要視情況而定，圖例：
（4）找出重要的行為模式
把對象映射完后，尋找在變量軸上的對象群。如果一組對象聚集在6~8個不同的變量上，這很可能代表一種顯著地行為模式，而這個模式是構角色模型的基礎，圖例：
三、畫像呈現
找出行為模式后，畫像呈現即從顯性畫像、隱性畫像、場景和需求等方面，給用戶打標簽，并且增加一點描述性語言（描述人物行為和痛點，而不是描述解決方案），圖例：
四、總結
（1）確定分析維度：當前產品處于什么階段？需要什么信息？
（2）基礎數據收集：對目標用戶進行訪談，收集相關數據
（3）分析行為模式：將訪談對象和行為變量對應、找出重要的行為模式
（4）整理并呈現畫像：描述特征和行為，創建人物故事
聊到這里可能有人會問：
Q：用戶模型做出來會不會有人看？它是不是設計者虛構出來的套路？
A：用戶角色模型是設計者通過用戶訪談和觀察得出來的真實用戶行為，是有真實數據為依據的，所以不進行大量的用戶調研，不為用戶建模，不去創建用戶模型，只知道意淫需求，說著“我認為該怎么怎么做”，都是一本正經地耍流氓。用戶研究、用戶模型是我們做好產品的基礎和風向標。
Q：用戶角色模型到底什么時候開始做？
A：先確定目標用戶 → 對目標用戶進行訪談 → 訪談后再建立用于模型
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一周前，為了聽《夢想的聲音》，我在APP Store 下載了QQ音樂，無意中發現「音樂」類APP里排行第9的 MOO音樂，它的預覽圖讓我聯想到這些關鍵詞：「小眾、獨特、歐美、Spotify、Apple Music」。筆者之所以從品牌設計的角度分析這個鵝廠家族新成員，是因為一款新產品的品牌設計在產品從0-1過程中扮演非常重要的角色，它關系到用戶對新產品的認知與心智。
體驗完 MOO音樂，我發現：移動產品品牌設計不僅要充分考慮視覺表現層，還要綜合考慮戰略、理念、內容、交互等多個方面。
同時，品牌設計是一種「求同存異」，「同」是保持對戰略、內容、用戶習慣的繼承性，而「異」是相比競品作出的差異化設計。本文就從繼承性和差異化，這兩個維度為你分享 MOO音樂的品牌設計。希望這種分析方法能夠為你的品牌設計提供幫助。
從啟動圖標和界面很容易看出，MOO音樂的品牌主色是黃色，背景色及輔助色基本是以黑白灰為主。
MOO音樂之所以采用這種配色方案，不僅是為了突出產品氛圍，讓人眼前一亮，還有可能是對騰訊新形象IP品牌的一種繼承和延續。
怪奇鵝IPENGOO，騰訊集團新一代形象IP品牌，代表著一種自我突破，不斷創新的精神狀態。
我們希望能像魔術師一樣，以經典企鵝形象上提煉出的極簡鵝臉元素，為大家創造出充滿趣味、創新、時尚和腦洞的產品風格和內容，能喚醒每個用戶自動發出好感電波是一件很棒的事情！——怪企鵝IPENGOO官微
每位音樂家都不是一顆孤獨的星球，他們保持獨立又彼此相連，在他們的探索下，音樂潮流才不斷推陳出新又一脈相承。
保持探索，對先鋒與經典抱以同樣的敬意，所以我們創造了MOO：音樂即自由
MOO Music，Life is MOOO beautiful。——APP Store MOO音樂介紹
IPENGOO（怪企鵝）的理念是：
可見，「連接、傳遞、突破、創新」這些新形象IP理念在 MOO音樂的啟動圖標、品牌理念、交互手法、推薦歌單上都有所體現。
因此，MOO音樂很可能是騰訊新形象IP品牌影響力里的一種嘗試。
此外，MOO音樂的品牌色也很有可能是對騰訊旗下年輕娛樂產品品牌色的一種繼承。
Sympathize（體察和同理心），可以幫助我們去理解事物表面背后的本質，得到和理解設計的微妙細節，這些本質自然的元素不只是邏輯上的，更是可以被感受的?！顫芍比?
說到音樂本質、自然的元素（不是曲風），我們會聯想到黑膠、唱片、專輯、音波、調音臺、樂器、Live、樂譜、Launchpad等。這些音樂元素能拉近 APP 與用戶之間的距離，營造沉浸式的聽歌體驗，從而提升產品的同理心。
比如專輯封面的輕擬物化設計，播放時音波的、背景圖片和短視頻等等。
當我們在為一款新產品設計交互時，需要充分考慮目標、場景、用戶這些基本因素。我們通常會考慮并兼顧多數目標用戶的使用行為和習慣，為新產品設計交互方式。
所以當用戶看到熟悉的元素時，會很自然地知道如何去使用，降低了新產品的學習成本，這就是我們所熟悉的「Don’t make me think」。
MOO音樂的首頁PLAY頁，采用的是音樂+短視頻（有時候是圖片）的方式，當很多用戶看到這種熟悉的界面形式時，已經本能的去上下翻頁、單擊播放/暫停，左右滑動調整進度更是再熟悉不過。
另外，MOO音樂的歌單在產品初期功能里占據了很大篇幅，因為最契合用戶聽歌行為場景的是歌單。
說完 MOO音樂在品牌設計方面保持的繼承性，下面來說說它不同于競品的差異化設計，主要表現在品牌理念、視覺氛圍、交互手法。
從 APP 的這4張歡迎頁就可以看出 MOO音樂的品牌理念和調性了：經典、創新、前衛、獨立。
從目前的版本來看，MOO音樂還是一款滿足小眾口味、專注聽歌的音樂APP，但 APP 通過4張有代表性的歡迎頁，將 APP的「小眾」設計得「出眾」，很好地表達了產品的品牌理念。
說到產品品牌的差異化，不得不說視覺層面的設計，畢竟視覺表現層是用戶體驗5要素里最具體的。
MOO音樂提供兩套視覺風格，默認是品牌黃色+BLACK，另一套則是品牌黃色+WHITE，筆者覺得默認的 BLACK 更有特色和沉浸感。
字體風格方面，標題類文字（PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST）都是大寫的非襯線英文字體，歐美范十足。
調整進度的交互
主流音樂APP，是通過一個進度條和一個圓點來調整播放進度，而 MOO音樂將播放頁面下方聲波區域作為調整進度的熱區，通過明暗的對比來表現播放進度。
雖然這種交互方式在騰訊自家短視頻微視APP 中也存在，但 MOO音樂還是作了細節上的處理。
切歌的交互
通常情況下，在音樂APP 播放頁面的其他頁面，都有一個控件讓你隨時可以切歌，甚至是收藏，查看播放列表。
MOO音樂將切歌控件設計成了黑膠+滑塊，切歌時只需向右滑動，而且 iOS系統還會伴隨震動反饋。這個微交互設計得蠻有意思，這讓我聯想到膠卷相機拍完一張，然后撥動卷片扳手的機械反饋感。
目前 MOO音樂在 APP Strore 里才第2個版本，細節上的體驗不可能一步到位。
筆者借此機會向開發者提一點個人的建議，僅供參考。
希望當前播放的歌曲與背景短視頻或圖片有一定的關系，比如系統可以根據歌曲的曲風、類別等標簽，自動推薦匹配相關短視頻和圖片，讓歌曲與背景環境更協調。當然，也可以讓用戶自己設置推薦或隨機。
在 PLAY頁面切下一首歌時，希望顯示歌曲正在加載的狀態，底部的音波區域好像可以作一些文章。
（iOS）歌曲評論頁里的評論輸入框常駐在頁面底部，但視頻評論頁的評論輸入框沒有常駐，而且滑到底部時，不太容易滑到頂部，可能是小BUG。
（Android）輕觸切歌控件里的暫停按鈕后，黑膠旋轉的角度被重置了。希望能與 iOS版一樣，暫停后黑膠旋轉的角度不被重置。
APP 默認的會員價格是18元/月，若勾選了到期自動續費，則價格是15元/月。
雖然這2個價格都不便宜，但相對來說，自動續費的價格更有吸引力，但這個相對有吸引力的價格卻需要用戶主動勾選「自動續費」才能看到。筆者建議將這2種價格都顯示出來，通過單選按鈕的形式去交互。這樣，用戶很容易就會發現自動續費的價格優勢，畢竟與18元相比，15元就不怎么貴了。
MOO音樂于11月初發布在 APP Store，網絡上比較多的評價是「抄抖音、抄樂趣、抄Spotify、鵝廠又抄了……」。
但作為設計師，筆者希望我們將關注點放在設計層面，去客觀的評價一款APP，不要因為別人的評價而忽略了一些有品質的設計。
當我們仔細體驗交互和視覺的細節后，會發現鵝廠的設計是有很多地方值得我們學習的。
最后，面對主流音樂APP、短視頻APP、Spotify、Apple Musici、樂趣……MOO音樂既做到了對騰訊新形象IP、音樂元素、用戶習慣的繼承性，又做出了一些不同于競品的差異化設計。這套「組合拳」已經打出了這款音樂APP 的品牌形象，希望這些內容對你有啟發。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
按鈕在UI設計中是一種常用的UI控件，在界面中作為主要的行動點，引導用戶進行相應的操作，它在用戶和產品的交互中承擔著重要的作用。
按鈕設計看似簡單，但是如果想要更好的交互體驗，引導用戶進行相應的操作，提升產品的轉化率這仍是我們需要研究的問題。下面小編將從按鈕功能類型和設計要點兩個方面進行分析。
一、按鈕功能類型
按鈕的功能類型往往決定了一個按鈕的設計方式，是需要強調還是需要弱化；文案是需要強引導，還是直接闡述功能；按鈕上是放圖標還是不放圖標等。按鈕根據功能的不同，可以分為不同的類型，主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。
1.行為召喚按鈕
行為召喚（CTA）按鈕其目的是誘使用戶采取某些操作， 從而提高產品的轉行率。簡單來說就是通過設計誘導或激勵用戶點擊按鈕，例如立即購買、訂閱關注、利益誘導、文字誘導等。
1）誘導購買
當行為召喚的目的是誘導購買時，按鈕的設計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊，讓用戶進來第一眼就能知道該按鈕的用途。如下圖所示：
以美團外賣為例，該按鈕的顏色采用黑黃對比、形狀采用具有親和力的圓角，在樣式上加入投影同時加入送餐員的元素，配上小紅點，能夠清晰的給用戶傳遞出可點擊部分有去結算、送餐員。另外加入價格誘導，讓你可直觀看到優惠了多少錢，促使你進一步操作。
以淘寶詳情為例，該按鈕是一個組合按鈕，由加入購物車和馬上搶以及店鋪、客服、收藏等組成，作為行為召喚按鈕我們可以明確的看到，不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2）訂閱關注
當行為召喚的目的是訂閱關注時，其重要程度相比誘導購買低很多，但是在設計時我們仍然需要考慮一個問題，這個問題可直接決定該按鈕大小、樣式等，這個問題就是需要根據產品目的判斷是誘導用戶訂閱關注重要還是讓用戶閱讀內容重要。如下圖所示：
當內容重要時，按鈕的設計需要弱化處理，以優酷視頻的發現頁和星球頁為例，這兩個頁面很明顯是以內容為主的界面，在設計時直接弱化了按鈕形式，讓按鈕和整個界面相融合，但是按鈕設計的原則是讓其看上去像按鈕，因此當按鈕只是文字時可以加圖標進行引導比如優酷視頻發現頁，也可以加入弱底紋進行引導還能讓界面看上去整潔，比如優酷視頻星球頁面。
當訂閱關注重要時，按鈕的設計需要強化處理，以橘子娛樂和土豆視頻為例，橘子娛樂采用粗描邊漸變按鈕，同時加入圖標進行引導，具有較強的視覺引導作用，很容易喚起用戶的關注。土豆視頻采用黃色填充加圖標引導，在視覺上和產品內容形成強烈對比，明顯的以關注為主的界面。
3）利益誘導
當行為召喚的目的是利益誘導時，該按鈕設計根據重要程度較高，因此在設計時可以考慮顏色、形狀、加入圖標、誘導文字等設計方法。如下圖所示：
以大眾點評為例，其領獎按鈕明顯比賺積分的層級高，因此為了突出領獎按鈕采用了色塊設計的樣式，同時賺積分按鈕采用描邊設計進行弱化處理。
以騰訊doki為例，其打榜頁面沖榜的重要層級較高，因此在設計時不僅采用了色塊、加入動效圖標、同時還加入了誘導文字，讓按鈕更明顯同時誘導用戶點擊，其他去瀏覽按鈕則采用描邊樣式弱化處理。
4）文字誘導
文字誘導簡單來說就是通過文字，誘導用戶進行下一步操作，多用于空頁面、活動頁面中，因此在設計時采用簡單的色塊填充即可，如果該頁面為活動頁面也可增加漸變或投影樣式，讓按鈕更有空間感，進而突出按鈕。如下圖所示：
以得到為例，當你還沒有學習計劃時，它會對你進行提示“開始制定學習計劃”，同時其按鈕采用重要程度較高的色塊+投影的方式，誘導用戶點擊。
以大眾點評為例，當你還沒有攻略時，它會對你進行提示“我也要創建攻略”，同時其按鈕采用漸變填充的方式，誘導用戶點擊。
2.懸浮按鈕
懸按鈕浮是 Android 應用中最常見的一個控件。不過隨著Android和iOS規范的不斷融合，在iOS中也經常會看到各種各樣的懸浮按鈕。在設計上懸浮按鈕應該采用顯眼的顏色，以抓住用戶的注意力。同時它應該是積極正向的交互，比如創建、分享、探索等，同時并不是所有頁面都需要加懸浮按鈕。如下圖所示：
以UC瀏覽器為例，懸浮按鈕在訂閱頁面的右下角出現，將按鈕和界面結合很容易看出創建內容的意思，同時點擊按鈕還可呼出圖文、視頻等操作圖標。
3.標簽按鈕
標簽按鈕往往呈多個出現，多使用在二級導航或條件篩選下面；以及表單頁面作為切換條件選中。因此在設計樣式上有選中狀態和默認狀態，同時其重要程度較低，在設計時不能喧賓奪主，需要弱化處理。如下圖所示：
以支付寶為例，它主要用在投保的表單頁面，其主要目的就是一個切換條件，重要程度遠不及我要投保按鈕，因此在設計時默認用的描邊處理；選中采用淡淡的色塊。
以轉轉為例，它主要用在導航下方，其主要目的也是切換條件，用戶主要操作是看下方篩選出的內容，因此在設計時也進行弱化處理。
4.表格按鈕
表格按鈕也就是由一個白色網格加文字組成的按鈕，從視覺上看和頁面融為一體，特別不突出。因此多用在個人中心中不太重要信息或者不想讓用戶操作的退出登錄界面中。如下圖所示：
以愛奇藝為例，在我的界面中，關于我們和退出登錄都是用的表格按鈕，由于關于我們是不太重要信息，退出登錄又是不想讓用戶操作的內容，因此采用表格按鈕最為合適。
5.命令按鈕
命令按鈕也就是該按鈕具有明確的指令，多出現在彈框中，通常會有一個文字或2個文字出現的情況。其要求是文字語義要明確，盡量不要用確定、好的、要等詞匯，同時根據用戶右手操作習慣居多，因此將重要的按鈕放在右側。如下圖所示：
以京東金融為例，左圖是京東金融退出的二次確認頁面，右圖是我調整文字之后的頁面。我們說到文字需要表意明確，因此將確定換成退出后表意更加直白，降低用戶理解度。
6.開關按鈕
開關按鈕也是我們很常見的一個組件。表示兩種相互對立的狀態間的切換，多用于表示功能的開啟和關閉。當按鈕開啟后可能還會帶來其他的相應操作。開關按鈕最常見的就是手機設置中，但是也有很多APP將其用到界面中使用。如下圖所示：
以美團外賣和小豬短租為例，它們在提交訂單頁面時都采用了開關按鈕，同時在小豬短租中，當按鈕打開底部會將“您可再入住完成10天內補全信息”進行展開顯示，提示用戶去填寫。這種點擊展開的操作還可增加更多的功能相關內容。
二、按鈕設計要點
1.根據產品為按鈕選擇適合的形狀
在按鈕設計時，需要根據整個界面風格設計合適的按鈕，按鈕樣式主要有直角、小圓角、全圓角三種樣式。
直角的含義：嚴謹、力量、高端。適用于金融類、奢品類產品中，讓產品給人嚴謹安全、高端的感覺。例如寺庫。
半圓角的含義：活潑、年輕、安全。適用于兒童類、年輕化、娛樂類、購物類的產品中，提升親和力，拉近用戶的距離。例如土豆。
小圓角的含義：穩定、中性。適用于用戶跨度較大的常規類產品中，例如微信。
以寺庫、微信、土豆為例，寺庫是品類電商，因此在設計時需要提現高端，因此在按鈕設計時采用直角設計。而微信的用戶群體上到七八十歲，下到幾歲其年齡范圍廣，因此采用穩重的小圓角較為穩妥。土豆短視頻其用戶群體較為年輕活潑，因此采用全圓角較為適合。
2.使用合適的狀態
在部分界面設計中需要考慮按鈕的不同狀態的設計，從而提高用戶操作流暢度。移動端完整的系統按鈕可以分為正常狀態、按壓狀態、禁用狀態。
其中，正常狀態和加載狀態展示的是APP的主色；按壓狀態在正常態的基礎上疊加不透明度15%的黑色#000；禁用狀態是設置灰色或者將正常態設置不透明度45%，該狀態適用于提交界面中使用，比如登陸注冊、轉賬等。如下圖所示：
以京東金融為例，當未輸入轉賬金額時，按鈕禁用為灰色，當輸入金額時按鈕為正常狀態。不過隨著互聯網的發展，寬帶速度不斷的提高，按壓狀態慢慢被拋棄，他存在的意義不像以前網絡不發達的時候，點擊還需要時間反應。
3.提供恰當的反饋
當用戶點擊按鈕時，他們希望界面可以給些恰當的反饋。如果沒有任何反饋，用戶會以為系統沒有收到他們的操作，然后就會重復點擊。這種行為常常導致多個不必要的操作。如下圖所示：
以土豆短視頻為例，當點擊關注時為了避免用戶點擊沒有反應的情況，可在按鈕上添加加載狀態，當關注成功后圖標狀態改為禁用狀態，同時文字變為已關注。
總結
按鈕設計看似簡單，但是如果想要更好的交互體驗，引導用戶進行相應的操作，提升產品的轉化率這仍是我們需要研究的問題。本篇主要將從按鈕功能類型和設計要點兩個方面進行歸納總結。
按鈕功能類型：主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。在使用我們需要根據對應的功能和重要程度選擇適合的設計。
按鈕設計要點：主要有根據產品為按鈕選擇適合的形狀；使用適合的狀態；提供恰當的反饋這三大注意要點。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn