如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一周前，為了聽《夢想的聲音》，我在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?！狝PP 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.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
設計師們，經常聽到需求方說：「我想要那種很有高級感的設計」，看到T臺上的超模，你可能會忍不住說：「嘖嘖，這張臉真高級」……
但是，每個人對「高級感」定義不同，它會受到個人審美、教育水平、成長環境、文化價值等因素影響。那么，這個被人們天天掛在嘴邊兒的「高級感」到底如何定義，標準又是什么呢？
今天就跟大家分享下，我最近的相關思考。
關于「高級感」，百度百科上并沒有這個詞條，在一定程度上可以說明，這個詞本身就是很難定義的。
我嘗試著換個思維方式，看看什么是低級？低級意味著：多欲求的、簡單的、盲目的。那么，反過來看「高級感」，大概可以解讀為：克制的、的、特立獨行的。
1. 克制的
說到克制，我想到了德國工業設計師 Dieter Rams，他的「設計十戒」中有提到「好的設計是盡可能的無設計」，體現出簡潔、克制的重要性。
比如：無印良品，在「性冷淡風」的背后充滿了對欲望的克制。
產品設計以更親近自然的棉、麻、羊毛的材質配上木本、黑、白、灰色。不管是從造型，還是從用色上都極度的克制，但是給人高品質，很舒服的感受。
反而下圖，高飽和度和純度的配色設計，給人有一種反自然的，人工造的顏色的感覺，顯得服裝比較廉價。
那么，品及時尚圈的設計，又是怎么考慮呢？
可以看出，他們服裝從簡單利索的剪裁，到高級灰（莫蘭迪色）的配色，正是我們所說的「克制」，給人一種奢華且高級的感受。
為什么克制的用色，給你高級的感受呢？因為，這樣會削弱色彩對人情緒的影響，反而有治愈的能量，有一種頹廢的性感。
下面這幅畫，是意大利20世紀著名的版畫家，油畫家喬治莫蘭迪的（莫蘭迪色也是根據他的名字而來）。在他的畫里，所有的色彩都滲入了灰色和白色調，失去了原本或艷麗或凝重的本色，柔和優雅，而又統一的混合在一起。用現在的話來說就是：克制、留白、極簡。
目前很多服裝設計、室內設計都在效仿這種配色方式，顯得更有品質。
比如，今年熱播的《延禧攻略》，一改以往流量電視劇那種高飽和度，艷麗的配色，猶如一股清流，讓人眼前一亮，感覺把整部劇都帶的高級了很多。
以上可以看出，克制的造型及用色、適當的留白、極簡的畫風，反而顯得更加自信，從而給人傳遞出高級的視覺感受。
2. 的
人們常說，細節決定成敗。其實，讓人們感到「高級」的事物，都有一個共性：對細節追求。
比如，前段時間看快樂大本營，里面對《延禧攻略》中演員服飾的刺繡細節進行講解，當時何炅用「很高級」夸贊。
我就在想，是什么觸發了他評價「高級」。
后來發現，是因為劇中人物服裝上的刺繡全是純手工的。針法多樣，包括復雜的手推繡、打籽繡、磐金繡、珠繡……而且，團隊都是曾經參加過故宮文物翻修的匠人們。
為了無條件的貼近歷史，這一件皇上的衣服花費了8個工人半年的時間進行制作。
因此，讓何炅潛意識里感到「很高級」的，正是因為僅僅為了一部電視劇，在演員服裝上耗費這么大的功夫，這種對細節的追求。
再拿科技產品舉例，比如：iPhone，由于「對稱設計」可能是人們能感知到的最原始的美，很多情況下手機受限于內部設計，很難在表面做到對稱。
但是 iPhone 為了遵循「對稱式」設計，投入非常多的人力去解決（上面），而對比三星Galaxy S6 的設計（下面），看起來就略顯尷尬。
它們對產品每一個方面都精雕細琢，盡管用戶不一定能注意到，這種工匠精神，讓人們覺得蘋果手機不僅僅是一款產品，更像是一件藝術品，同樣給人高級的感覺。
3. 特立獨行的
人類本能習慣于盲目追隨、容易妥協。因此，獨立思考、特立獨行且自信的人或事物，常給人很感級的感覺。
比如，在網紅臉盛行的今天，隨便逛個街，都充滿了濃濃的玻尿酸和歐式平行大雙眼皮的味道。雖然并不丑，但是總覺得不夠高級。比如，柳巖就評價過自己屬于「低級臉」。
為什么超模那樣高冷的臉蛋會給人一種高級感呢？
因為，她們有特色的五官長相，意味著不向大眾主流審美屈服和妥協，而且非常自信。同時，高級感也意味著，在 TA身上看不到欲望、諂媚和討好。
再比如，日本的服裝設計大師——山本耀司。在人們都追求時尚和潮流，偏愛女性婀娜的曲線和靚麗的色澤的時候，他卻以反時尚設計而著稱。
他大膽發展日本傳統服飾文化的精華，具有獨立思考，形成一種反時尚風格。這種與西方主流背道而馳的新著裝理念，不但在時裝界站穩了腳跟，還反過來影響了西方的設計師。
總的來說，高級感是克制的，它極簡、低調、且優雅；高級感是的，對細節的完美追求、具有匠心精神；高級感是特立獨行且自信的，不盲目追逐潮流、不討好、不妥協。
雖然我們認為「克制的」、「的」、「特立獨行的」給人以高級的感受。但是，真的是所有人都能接受嗎？
不可否認，有的人就是覺得花里胡哨的東西很高級，比如：在美甲上鑲一些比吊燈上還大的鉆；穿一雙松糕鞋，鞋底恨不得比自己小腿肚還高。
因此，我就在思考兩個問題：影響審美的因素；大眾對「高級感」的接受度。
1. 影響審美的因素
不管是個人審美、教育水平、成長環境，還是價值觀，我覺得決定審美的背后，是「經濟」這只無形的手。
不知道你有沒有發現一個規律，越落后貧窮的國家，卻喜歡艷麗的、繁雜的設計。
而相反，越發達的國家，反而更青睞簡約、淡色。
原因是經濟落后的國家，人們缺少的是「豐富」，想要的更多色彩，更多花樣。
而經濟發達的地方，人們已經擁有足夠多，因此，內心中追求更多的是：我需要什么？我是誰？什么對我不重要？
人們對過于爆炸多樣的商品會感到「焦慮」，「害怕」因為選擇的太多，反而想要抽離。
因此，像無印良品這類克制的、做減法的、回歸本質的物品，反而受到人們喜愛。
2. 大眾對「高級感」的接受度
這里的「大眾」就先指我們中國大眾吧，他們能接受「高級感」的克制，極簡嗎？
我們從消費時代進行分析，目前日本處于第四消費時代，它的特征就是上面所說的，不再盲目的追求品帶來的滿足感，而是追求除了物質以外什么才能讓人變得幸福。
而中國呢？
大多數人認為，中國正處于第二、第三、第四消費時代共存期。在偏遠的農村，處于第二消費時代，他們的觀念是「大的就是好的」，「繁瑣是好的」；三四線城市，處于第三消費時代，他們的觀念是「個性化、品牌化」追求與眾不同，喜歡名牌貨；一二線城市，處于第四消費時代，更加崇尚無品牌，休閑傾向，整個社會趨于共享。
但是，我認為，隨著中國經濟近幾年迅猛發展，互聯網的快速普及，大家接受信息的程度慢慢趨同，就算非一二線城市，大家的消費觀念及審美水平也在隨之改變。
比如：抖音里，很多四五線城市的小姐姐們，穿衣及化妝風格都很ins風；同時，越來越多不因為取悅男性，而是突顯獨立女性的打扮。
越來越多的北歐極簡裝修風的流行……
總的來說，大眾的審美水平和消費觀念會受經濟的影響，而中國大眾的消費觀念正在往第四消費時代慢慢轉變，對真正「高級感」的事物，接受度越來越高。
上面舉了很多傳統行業案例，其實互聯網產品設計中，也在往「高級感」方向走，踐行著「極簡」和「克制」的理念。
比如：年初的谷歌「ALL-White」風。眾所周知，谷歌的設計師是極簡主義界面的忠實粉絲。
下面是優化前后對比，移除大面積的色塊，采用大面積留白，體現現代、簡約的感覺。
移除多彩的圖標，采用極簡的線性表現方式。
再比如，百度的設計，一年前也在「高級感」的設計理念上進行深挖和落地。
從以下兩個維度可以看出：克制的配色；的細節。
1. 克制的配色
拿「簡單搜索」舉例，它是百度的一款搜索APP，以簡潔清爽的視覺體驗，簡單的操作交互，吸引了大量用戶，而且零廣告。
在界面的用色上，非?？酥?，采用以「黑、白、灰」為主，目的是為了讓用戶聚焦內容本身，而不是為了設計而設計。
包括 icon 的處理，以純色的線性為主，更加現代、簡約。
2. 的細節
大家都知道，黃金分割是最普遍也是最能引起人美感的。我們所熟知的蒙娜麗莎的臉、雅典的帕特農神廟等都應用了該比例設計。
其實，在看似普通的百度搜索首頁，同樣遵循著這個比例，讓有規則的美，嚴謹的融入其中。
包括柵格系統在設計中運用，這種來源于數學的美學，將有助于用戶，更有效和愉悅的閱讀及獲取內容。
以上可以看出，不管是傳統行業還是互聯網行業，亦或者是未來的人工智能的設計，都在往「克制」、「」的方向發展，讓人人都能享用到優質、高級的設計。
總的來說，「高級感」意味著對設計保持克制的、對細節追求、擁有獨立思考的產物，而且，隨著經濟的發展，人們的審美和接受程度也發生著改變，追求真正高品質的設計。同時，不僅傳統行業在踐行「高級感」的設計，互聯網的產品設計也在朝著這個方向發展。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
現在市面上的汽車大部分都是過時的，沒有吸引力的用戶界面，正因為如此，很多設計師都在思考未來的汽車用戶界面將會如何改善我們的駕駛體驗。今天這篇譯文，一起來學習特斯拉和Apple Carplay 是怎么設計的！
汽車行業似乎每天都有著新的發展。很多證據都表明在接下來的20年里我們將會看到比上個世紀都要劇烈的變革。因此，頂尖的數字設計師們應該把重點放在對這個行業的關注。那么，到底什么才是車輛用戶界面的未來？它能從根本上改變我們和汽車之間的關系么？
下面是我收集的一些由全世界不同的設計師設計的美麗和未來的汽車抬頭顯示器、用戶界面交互、第三方app控制器。這些設計想法，有一些是真實存在的，有一些還正在發展中。
它為什么會讓人震驚？
當你想確定你是否已經鎖好車，關上燈，或者把你的車鑰匙交給剛考完駕照的小屁孩的時候，你是否覺得自己是個偏執狂？
這個移動app可以讓你在不離開座位的時候檢查這一切，有一個柴油混合動力車？你甚至可以在你吃早餐的時候啟動引擎。直觀的動畫會反饋你這個動作是否已經完成。
它為什么會讓人震驚？
這個用戶界面看起來是一個用肌肉記憶和手勢驅動的通用控制模型，不同數目的手指可以觸發不同事件，你可以通過iPad面板，無線鼠標等控制它。你可以通過動作來控制數值的大小等等。
這個用戶界面去掉了所有需要用戶記憶的小控件和視覺元素，從而你可以使用相同的手勢或者它的變體，來完成多個不同種類的任務。
你可以在這里查看整個案例研究：A New Car UI
它為什么會讓人震驚？
汽車將會變得更加的智能，為我們的公共場所騰出更多的空間，并且汽車的功能也將變得越來越互相關聯起來。隨著這些發展，數據在我們面前將會變得勢不可擋，試想一下不久之前，我們的手機和其它東西一樣還是一個單一功能的設備。我們在我們看到什么和如何看上有我們的控制權，它應該變得更加自然和方便使用。人工智能和機器學習將會采取直覺控制。這個由Bureau Oberhaeuser制作的原型讓我們提前看到了這一切的到來。
你可以在這里查看整個案例研究：Behance
它為什么會讓人震驚？
當汽車所有的零部件都變成電子系統時，你想拿起扳手就能發現問題變得越來越不可能了。這個移動app原型試圖用一種你能理解的語言去描述汽車當前的健康狀況，讓你知道你是否有必要在開啟你的海岸線之旅前修一下它。
它為什么會讓人震驚？
當進行輪胎檢查時，這個界面將會告訴你每個輪胎的壓力范圍并且告訴你它們的極限在哪里。這個用戶界面提供了如此重要的反饋，我覺得它應該被納入常用標準中去。
它為什么會讓人震驚？
不用說大家都知道司機應該保持視線在路上，但是現在的手機導航都需要司機把注意力來回切換在手機屏幕和路面之間，這個叫Hudway的app把你的第二塊屏幕跟擋風玻璃很好的結合了起來。你面前的那塊擋風玻璃很有可能就是未來的顯示界面。
你可以在這里查看整個案例研究：Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]
它為什么會讓人震驚？
這個用戶界面對于勇敢的探險家來說非常完美，如果你想快速的知道你周圍有什么，這個用戶界面可以讓你在有限的路線里來一段自發的旅行。
它為什么會讓人震驚？
每個人都在關注它的到來，想都不要想，如果你已經有了一堆蘋果的產品，你也會在你的汽車上裝上它的。Apple Carplay將會是下一代的第二塊屏幕。
它為什么會讓人震驚？
沒有什么能和發動引擎點亮儀表，汽車轟鳴猶如巡游樂隊組成的和旋一樣。身邊的一切，聲音和延遲的視覺互動，都給與你感官的反饋。儀表會通過動畫直觀的告訴你，合適講切入下個轉彎，油量是否變低，以及胎壓是否過低。
然而，用數字型號在方方面面代替模擬型號也會開始令人擔憂，因為無法人工手動介入賬款車子，當保險絲熔斷，或者電子儀器故障時，汽車很快會失控。
它為什么會讓人震驚？
當可穿戴設備成為我們設備的一部分時，它很明顯會幫助我們的手持設備分擔掉一部分的操作功能。這個原型很好的說明了它是如何將這一切展示到手腕上來的。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在過去幾年當中，插畫開始以一種堅挺的姿勢，站在設計趨勢的最前列。不止是原本身處各個領域的畫手和插畫師開始越來越受追捧，而且連網頁、UI和動效設計師都紛紛學習插畫設計。當然，更顯著的變化，是插畫在網頁和UI中的使用越來越多，越來越頻繁，甚至越來越多樣。
多年來，插畫被廣泛地運用在雜志、圖書、報紙、海報、傳單等不同的傳統載體之上，新的工具和技術使得它更加輕松地植根于數字化媒體當中。
作為設計中，最具有表現力的元素，一張插畫所傳遞的信息比文字更多更豐富。在UI和網頁中，使用插畫來輔助傳達信息，無疑更加直接到位。而插畫的可定制性之強，猶在圖片之上。
插畫在UI界面中的運用，可以說相當廣泛了，它更清晰，更時尚，也可以更加精準，甚至更有表現力，為什么不用呢？就適用范疇而言，我們可以觀察到，它可以運用到這些地方：
頁面主題圖
網頁首圖和Banner
吉祥物和形象插畫
博客文章配圖
新用戶引導教程
工具提示
獎勵頁面和成就頁面
游戲化設計的頁面
通知和系統消息
聊天表情
講故事的輔助配圖
信息圖
營銷和廣告圖
圖標和裝飾性內容
社交媒體頁面
支持性內容的頁面
插畫的適用范圍之廣，這些總結出來的使用場景，并不是全部。插畫本身的屬性很有意思，它連接了設計，作為內容呈現，還帶著明顯的藝術化的屬性。今天的文章，我們總結一下在設計中使用插畫的10個理由和注意事項。
1. 插畫是設計的原創性和藝術性的基礎
無論是印刷品、品牌設計還是UI界面，更加風格化的插畫能夠將不同的風格和創意加入其中，在激烈的競爭中更容易因此脫穎而出。留下用戶才有轉化。
同樣的，在博客、新聞和Banner 中使用插畫，也是看準了插畫可以根據內容進行深度定制的優勢，這種微調能讓內容更加統一一致，更加符合產品目標，借助色彩、角色、環境甚至暗藏的隱喻，來吸引特定的用戶。
2. 插畫是視覺觸發器，瞬間傳達大量信息
我們常說「一圖勝千言」不是沒有道理的。人的視覺感知能力很強，看到圖片的一瞬間，也許還沒有來得及進行邏輯思考，但是大腦已經接收到大量的信息和內容。
心理學研究表明，人類只需要大概1/10秒就可以感知到場景中絕大多數的元素和基本視覺信息。
視覺信息可以更快傳遞到大腦，而重要的信息，人類也通常會被固化為視覺圖像，而非文本化的記憶。
文本需要依托可讀性設計，而圖片和插畫則會被直接識別。
圖片和插畫更容易打破文化和語言隔閡，傳遞內容含義。
對于視障用戶、閱讀障礙用戶和兒童，圖片插畫更容易被理解。
3. 插畫是標題和文本的重要支撐
雖然圖片一瞬間傳遞的信息很多，但是圖片在很多時候是無法提供精準而詳細的內容。用戶依然需要文本來呈現清晰而可以被閱讀和記錄的內容，所以文本依然是不可或缺的。在另外一方面，文本和標題已經具備的情況下，經過定制的插畫能夠輔助用戶理解，更清晰的記憶。
在很多特定的領域，舉個例子比如說金融，插畫能夠借助色彩、圖形和形象來講述故事，讓用戶更清晰的理解復雜的金融功能，甚至強化信任感，而這是文本所不具備的。插畫能帶來強烈的情感連接。
4. 插畫更適宜呈現故事
故事是最令人難忘的內容，劇情的走向和起承轉合會給人留下深刻的印象。而插畫則以清晰的形象將文字和意象勾連起來，無論是在網頁、UI設計還是內容和體驗上，都有著足夠突出的體現。
營造氛圍，渲染情緒，描摹環境，呈現角色，插畫讓故事更加鮮活、易于理解。在內容制造上，有著難以替代的作用。
5. 插畫獨有的情感吸引力
人是情感動物，看似理性的皮囊之下，幾乎每個決定都是在情感和情緒的驅動下完成的。如果某個設計除了能夠幫你達成某個目標，還能讓你感到愉悅，會心一笑，那么通常下一步就是將它收藏起來并且分享給朋友。而在諸多設計因素當中，插畫在撬動用戶情緒這一點上，有著無與倫比的效用——從線條、色彩到面部表情和曲線和動效，都在竭盡全力地為你闡述故事，營造氛圍，將你拉到故事和場景當中去。
6. 插畫賦予設計以美學價值，更容易被接受
即使所有人都在分析和爭論產品的可用性和易用性，大家在對美的追求上，始終保持著一致的態度。一個設計是否具備可取性，是否能夠通過甲方、客戶和實際用戶，是每個設計人都需要面對，都力求做到最好的事情。精心設計的插畫在美學和風格上更加扎實，風格化的設計不弱于現成設計素材所提供的價值。
7. 插畫能讓品牌識別度更高
和文本相比，插畫的視覺化屬性無疑是更強的。圖片插畫所提供的定制化內容能夠從各個方面來貼合品牌的需求，更加到位地表達品牌所需呈現的信息。這也使得插畫不僅僅在品牌宣傳的時候，運用在廣告、海報等顯而易見的地方，而且也成了品牌 APP 中新用戶引導和教程中必不可少的元素。
就像 Perfect Recipes 這個應用的新用戶引導屏中，就借助插畫來呈現。而 Toonie 這個可愛的鬧鐘應用當中，甚至借助游戲化的設計，集成了大量有趣的表情和貼紙，當然，它們都是使用定制化的插畫來呈現的。
8. 數字插畫還能強化交互，應用在短視頻中
數字化的好處就在這里，通過不同的數字軟件，合理的處理之后，不僅能夠變成動態的，運用于視頻當中，還能夠作為微交互，強化產品的整體體驗。
一旦涉及到的動效和短視頻，整個數字插畫就開始具備更多的可能性了，不同的動效能帶來截然不同的感覺和體驗，更不用說這種玩法正貼合時下的流行趨勢。
Whizzly 這個動態圖標就是基于插畫，給一個創意分享社區所準備的。
9. 插畫的獨特性來自于其中的隱喻和引人入勝的視覺
和藝術一樣，設計中同樣需要借助隱喻來傳達一些相對更有趣、更深刻、更有意思的信息。插畫的獨特性也是借此來構成，包含的隱喻使得其中的價值更加復合，值得反復咂摸，而不是一眼就可以完全看穿。
在這個約會應用的網頁當中，插畫無疑傳遞出了多重的信息，暗含的隱喻告知了用戶產品的功能和屬性。而下面這幅插畫則是為一篇如何找到原創風格的文章所準備的，圖中的金魚指代的則是難以被抓住的靈感和風格。
10. 插畫讓用戶可以更快理解和操作
無論是圖標還是大幅的插畫，都能幫助用戶理解，更加直觀地知道要看哪里，要做什么。面對如今的數字界面，用戶的注意力持續的時間越來越短，而插畫則讓用戶更快、更直接地獲取信息，并且決策下一步要做什么。如果插畫或者圖標內容不能被用戶一眼看出來，那么用戶就只能借助文本標簽來了解功能是什么。設計師可以通過測試來測試圖標和插畫的可用性和識別度。
當然，插畫的設計是沒有門檻的，在設計的時候，要求也是比較高的。在使用和設計插畫的時候，需要考慮以下的幾個方面：
目標受眾（身體能力，年齡，文化背景，教育水平等）
產品的使用環境
產品和內容的在全球范圍內和當地的傳播水平
所選圖形的隱喻以及是否容易被識別
插畫是否會讓人分心
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
現在，當你打開 Instagram、Airbnb、Apple Music、Twitter、Dropbox 這些應用的時候，乍一看很難區分清楚彼此的區別：帶有圓潤邊緣、現代感極強的非襯線字體大標題，極簡的黑白色調為主的界面，大量的留白，少量的提亮色甚至沒有提亮色。
這種現代的界面設計風格，乍一看很簡陋。而具有諷刺意味的地方在于，它們出自于最大的公司，是也是受眾最廣的產品，在視覺觀感上，讓人覺得幾乎沒有被設計過。
Instagram 的深藍的頁頭怎么變了？Lyft 中經典的亮粉色元素怎么不見了？這些有著深厚底蘊的品牌是否已經放棄了標識性的設計？又或者是它們開始共享相同的模板了？
問題在于，這不止是 Instagram 和 Lyft 這樣了，有跡象表明，Google 這樣的大廠也有類似的傾向。比如Gmail 中標志性的紅色大幅度減少，白色的背景，白色的交互按鈕，白色的輸入框，其他的Ui控件都很精準到位地保持了這種簡約而一致的風格。
身在硅谷的大型企業，互相之間的借鑒學習是常有的事兒，但是至少保持了足夠的差異化。但是現在的局面則不同，這種高度趨同的趨勢，讓整個事情看起來非常反直覺。
到底是怎么回事？
好吧，我們認為產品設計的一致性是好事情，這里有幾個值得注意的原因。
讓用戶更加關注內容和結果
對于大量APP 的視覺和信息疲勞是誰都無法忽略的真實存在，絕大多數人已經厭倦了在太多應用之間來回切換，每一次下載新的應用都要花費大量的時間來重新了解界面的設計
調研表明，超過四分之一的應用，在首次下載之后，用戶只用過一次就卸載了。絕大多數人日常使用的APP 其實是非常固定的，它們中絕大部分，核心在于幫助人們節省時間和金錢（或者兼而有之），讓生活更輕松。
對，讓生活更輕松。而這需要數字產品具備良好的一致性，而設計師也越來越多地將注意力投注在這一個點上。
正如同我們熟知的UX設計專家唐納德·諾曼所說的：「很多用戶界面所存在的真正的問題，在于它僅僅只是用戶界面。很多用戶界面的設計阻礙了功能。我想努力達成某個目標，而不是將精力耗費在界面上?！?/span>
更一致意味著更好的可用性
所有的電商網站基本上都遵循著類似的交互邏輯和視覺元素，你不會搞錯購物車的圖標，也不會錯過任何環節。這些約定俗成的慣例，意味著用戶不再需要重新學習在某個新的平臺上購物，降低學習成本。
絕大多數約定俗成的規則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習慣，而獨特的設計，截然不同的規則，則常常會成為習慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。
以 Snapchat 為例，今年早些時候曾經發布過一個版本，其中包含有一些比較有爭議的設計。這個版本當中，被重新修改過的導航和幾乎隨意堆砌的功能模塊，讓用戶活躍度幾乎立刻下降了73%，甚至直接導致了用戶流失和股票下跌。
正如同 Snapchat 所證明的那樣，新穎的設計是有風險的。一致的設計，確實有一定的機率降低用戶在面對新興事物時候的不安感。
設計不應止步于視覺
明白用戶的需求和意圖，在不斷探索解決方案的過程中，才能真正創造出偉大的用戶體驗。相比于獨特的外觀，差異化的體驗是更有價值的。
當然，樣式和風格很重要，它們也確實會影響到體驗，當人們感知到有視覺吸引力的設計的時候，即使有一些混亂和無效的設計，也是可以忍受的。
但是設計師的精力是有限的，用戶的也是如此，相比于在色彩和花哨的動畫上反復嘗試，幫助用戶找到更好完成任務的方式，無疑更有價值。設計好的產品，最終能夠給用戶帶來價值的東西，是需要看似無限的測試和迭代，來向著可用和易用的產品更進一步。
奧巴馬、喬布斯和扎克伯格每天穿著相同的衣服，他們的衣服和這種行為同樣出名。心理學家將這種現象稱之為「決策疲勞」，它們每天需要用有限的能量來做大量的決定，而為了給更重要的事情留下足夠的精力，他們穿相對固定的衣服，就可以省心很多。
設計師面對的是同樣的局面。隨著界面設計的趨同化，設計師可以花費更少的時間來決定用什么色彩，而可以將更多的精力投注在更為深入的設計當中，比如更有效的布局，反思為什么要這樣設計，等等。
趨同的設計是否會扼殺創造力
我想你一定在思考這種設計趨勢之下的缺點，比如這樣的設計是否會顯得缺乏創新，甚至會扼殺創造力。老實說，我覺得這樣的影響是存在的。
但是，即使每個產品設計師都參與到極簡主義設計的運動當中來，仍然有大量的設計工作有待完成，設計的范疇太廣泛了，需要設計的東西遠超用戶界面本身。
事實上，界面中的趨同化在近期看來是頗為有益的，對于長期的影響也是非常巨大的。
首先，最重要的一點，VR、AR 和人工智能的逐漸普及，用戶和數字設備之間的互動可能會變得更加隱形，小屏幕同樣在普及，手勢操作將會成為最基本的交互語言，我們將會越來越多地參與到無屏幕的交互當中去。
即使我們在iPhone 上，人工智能加持下的 Siri 越來越好用，越來越多的用戶開始習慣使用類似的語音助手來創建待辦事項，選擇音樂，發送消息，查看天氣，簡單的功能它們已經可以很好地完成了，復雜的功能和需求也會通過機器學習逐步習慣、越做越好。
在諸如人工智能、機器學習這樣相對高深的概念背后，是軟硬件正在更好地幫助人類完成任務，做對事情。設計師的角色需要更進一步，更深入地參與到產品當中。
如果設計師要改進 Siri 的設計，那么要做的工作遠不止設計界面，已經有很多相關領域的專家討論過這個問題了，設計師所需要了解、掌控的維度越來越多，設計正在變得更加深入和復雜。更通俗的講，設計師需要考慮新的方式，更加富有創造力的策略來吸引用戶的注意力，甚至要深入到情感和感知當中去，而不是單純的視覺。
如果我們僅僅將優秀的設計局限于我們在屏幕上看到的內容，未來更多的可能性，可能就止步于此了。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
顏色跟其他事物一樣，使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色，您將獲得更好的效果。將顏色應用于設計項目中，要保持色彩平衡，您使用的顏色越多，越難保持平衡。
顏色不會增加設計品質 - 它只是加強了設計的品質感
－－皮埃爾·波納德（Pierre Bonnard）
60–30–10 規則
室內設計規則是一種永恒的裝飾技術，可以幫助您輕松地將配色方案放在一起。 60％+ 30％+ 10％的比例是為了保持顏色平衡。這個公式非常有用，因為它創造出一種平衡的感覺，并允許眼睛從一個焦點到另一個焦點舒適地移動。 使用也非常簡單。
60％是主色調，30％是副色和10％用于強調色。
墻面漆（60%），家具（30%），配飾（10%）
顏色的含義
幾個世紀以來，科學家已經研究出某些顏色的生理效應。 除了美學，顏色也是情感交流的創造者。 顏色的含義可能因文化差異而不同。這就是為什么你看到時裝店鋪的設計是黑白配色。 他們希望看起來優雅而高貴。
Asos采用純黑白配色搭配綠色按鈕設計，這種配色是有原因的。
紅色：激情，愛，危險
藍色：平靜，負責，安全
黑色：神秘，優雅，邪惡
白色：純凈，沉默，清潔
綠色：新生，新鮮，自然
首先考慮單色設計
在項目設計初期，我們通常傾向于嘗試不同的顏色進行調整，但這種行為會很快違背你的初衷，當你發現的時候，已經花費了3個小時調整基礎色...這確實很誘人，但你應該學會避免這種態度。
相反，你應當專注于元素的間距和整體布局。它會節省你很多時間。 這種約束是非常有成效的。從另一方面講，它看起來并不乏味。如果你想讓整個作品看起來更好，嘗試不同的顏色選擇。
我在追波（dribbble）上的作品之一。簡約單色處理，專注于元素之間的使用。
避免使用灰色和黑色
我學到的最重要的顏色技巧之一是避免使用灰色等不飽和色彩。 在現實生活中，純灰色幾乎不存在。 黑色也是如此。
這張圖片最黑的顏色不是＃000，而是＃0A0A10
始終記著給你的顏色增加飽和度。潛意識里會顯得更自然，為用戶所熟悉。
相信自然
最好的顏色組合來自大自然。 他們看起來總是很自然。 尋找顏色設計的解決方案，最好的辦法是調色板總是發生變化。
為了得到設計靈感，我們只需環顧四周。
保持對比
一些顏色相互融合，而其他顏色一起使用會發生沖突。 有一個明確的規則，想要了解不同顏色之間如何融合，最好的辦法是觀察一個色輪。 你應該知道這個方法，但是沒有必要動手操作。
獲取靈感
當我們在談論UI參考時，dribbble是最佳選擇。它還具有通過顏色搜索的工具，所以當你想對其他設計師使用特定顏色進行視覺研究時，然后去這里：dribbble.com/colors
視頻，平面廣告設計，室內設計，時裝......有這么多鼓舞人心的地方可供收集。如果說根本就沒有配色參考，那一定是懶惰的原因，把那些調色板保存下來，一切看起來都非常有趣。
通常我喜歡從KPOP（韓國流行音樂）視頻剪輯中選取顏色，他們看起來很華麗。
配色工具推薦
為了方便起見，我搜集了一些最好的配色工具可供選擇，在2017年獲取調色板，他們會為您節省大量的時間。
Coolors.co
這個絕對是我最喜歡的取色工具。 您只需鎖定所選顏色并按空格即可生成調色板。 Coolors還可讓您上傳圖像并從中調出調色板。 很酷的事情是，你不僅僅是一個結果，而是有一個選擇器，允許你修改參考點。
Kuler
這款Adobe旗下的配色工具已經和我們在一起了很長時間。它在瀏覽器和桌面版本中都可用。 如果您使用的是桌面版本，則可以將配色方案導出到Photoshop中。
Paletton
它類似于Kuler，但不同的是，您不僅限于5個色調。 當您擁有原色并希望使用其他色調時，您可以使用這款很棒的工具。
Designspiration.net
試想一下，你有自己的配色的想法，但你要看到幾種顏色組合的例子。 Designspiration是一個偉大的工具。 您可以選擇最多5種顏色，并搜索符合您的查詢的圖像。 真的很好，不僅用于找到具有特定調色板的圖像，還可以在設計中實現它們。
ShutterstockLab Spectrum
你可能會問：如果我想用我所選擇的顏色搜索照片？ 那么，Shutterstock有一個叫做Spectrum的工具，你可以用特定的語氣搜索照片。 您甚至不需要訂閱，因為具有水印的小預覽圖像將足以生成調色板。
Tineye Multicolr
但是，如果你想搜索照片中的顏色混合，甚至指定每個顏色的數量，那么Tineye會幫助你。 本網站使用了來自Flickr千萬張共享圖像的數據庫。
最后的想法
掌握配色技巧是一件苦差事，特別是在數字時代。 上面提到的技巧將會減輕工作中尋找正確顏色方案的困難度。 學習創造令人驚嘆的配色方案，最佳方法是練習，讓自己有所幫助，用玩的心態去使用顏色。
以上是本篇文章全部內容，感謝您的閱讀，希望對您設計產生幫助。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們在看 App 時，有沒有思考過這樣的問題，同樣都是提示彈窗為什么出現那么多不同的樣式，亦或者同樣都是讓界面進行切換的導航為什么有的可以通過側滑切換，有的卻只能點擊切換呢？最近在玩 App 時發現了幾組這樣的控件，下面就來和大家分享下我對他們的理解和選用。目錄：
警告框：是一種操作上的確認，只有當用戶點擊按鈕后才算真的完成，才可以有其他操作，主要作用是警告或提示用戶的。
警告框由三部分組成：標題、正文、按鈕。有些簡單的警告或提示只有正文和按鈕即可。
操作表/ActionSheet：操作表通常會從屏幕底部邊緣向上滑出一個面板，可提供2個以上的選擇。呈現給用戶的是簡單、清晰、無須解釋的一組操作，沒有正文的描述內容（大部分）。另外重要的功能操作也會用紅色文字展示。
文字內容的重要性
文字內容的重要性：選擇警示框和操作表時，要考慮的是兩個彈窗文字內容對于用戶的重要程度，如果內容極為重要則選用警示框，如果文字內容不重要甚至不需要描述文字我們就應該選擇操作表。
案例：如下圖，淘寶登錄密碼錯誤時，由于警示框更重要的是文字內容的體現，幫助用戶找到問題所在，所以選用警示框。再看 QQ郵箱的垃圾箱中點擊全部清空時，由于信息本身就在垃圾箱內，不需要對用戶過多的文字提示，用戶直接操作即可，所以最后選用操作表。
用戶操作流暢性
用戶操作流暢性：當我們需要讓用戶停止操作并必須點擊當前界面的按鈕時，要選擇警示框，警示框對用戶操作上的流暢性有著很嚴重的影響。如果不需要太過強硬，我們就選用只需在屏幕中任意位置點擊就會消失的操作表。
數量
數量：這是最容易區分使用的方面，當彈窗中的按鈕數量超過2個時我們一定選用操作表，因為警示框的按鈕數量不可以超過兩個。如果數量一樣，可以根據上面兩點擇優使用。
案例：如下圖，我們在得到App 中點擊開通「推送通知」時，因為操作按鈕只有一個，所以選擇警示框。而點開微博中的更多按鈕，用的則是操作表，因為操作按鈕有三個。
標簽欄：標簽欄位于屏幕底部，它是懸浮在當前頁面之上的，并且會一直存在，只有當用戶點擊跳轉到二級菜單后才會消失。用戶可以在不同的子任務、視圖和模式中進行切換，并且切換按鈕間都屬于不同的內容。
當用戶選中某個標簽時，該標簽呈現適當的高亮狀態。數量也有限制，不能超過5個，如果存在5個以上的標簽可以將最后的標簽設計成「更多」標簽。
工具欄：工具欄同樣位于屏幕底部，懸浮在當前頁面之上的，并且當用戶不需要使用的時候，可以隱藏它。例如向上滑動界面時，工具欄會自動隱藏。工具欄的內容主要是對當前頁面的相關操作按鈕。
切換狀態
切換狀態：當我們需要同級別界面切換時，應該選擇標簽欄，同時標簽欄的切換通常為一級導航，工具欄的功能僅針對當前界面內容的相關操作。
案例：如下圖，微信讀書底部欄中是關于同級別的視圖切換，所以選擇標簽欄，同時標簽欄也常用于產品的一級導航。而 Safari瀏覽器底部的內容是針對當前界面的操作功能，所以使用了工具欄。
位置狀態
位置狀態：當底部導航始終在界面最上方時，上下滑動都不會消失，則選擇標簽欄；如果底部導航上滑隨之消失則選擇工具欄（說明：也有少數的工具欄是怎么滑動都不會消失的）。
案例：如下圖，我們來看看百度的 App，當我向上滑動界面時，底部導航的位置是不會消失的，所以使用了標簽欄。再看 Safari瀏覽器，因為上滑時底部欄會被隱藏，所以選用了工具欄。
選中狀態
選中狀態：當用戶選中底部某一項時，如果需要高亮顯示且顯示的內容是不同子任務的視圖，則使用標簽欄；而當選擇后，出現操作表等與當前界面相關的操作時，應該選擇工具欄。
案例：如下圖，我們還是來看百度App，當我點擊底部的選項時，切換的同時，當前選中的「好看視頻」需要變成選中的樣式，來告知用戶當前選中的是那個界面，所以使用了標簽欄。再看 Safari瀏覽器，點擊底部按鈕后出現操作表且當前選中的按鈕也不會變高亮，因為不會在當前切換界面，所以選擇了工具欄。
Tabs：Tabs 來自 MD規范，早在 Android 2.0時代，官方的通訊錄App 就使用頂部 Tab導航，可以滑動切換不同視圖。Tabs 里 Tab 呈現的內容可以有很大的差別，而且數量沒有限制，Tabs 不能作為表單的單選組件。
分段控件：iOS 原生控件之一，每個分段作用是互斥的，在分段控件里，所有的分段選項框在長度上要保持一致，同 iOS規范中對于分段控件的分段選項不得超過5個，每個分段選項可以是純文字或者圖片。
來源不同
來源不同：分段控件來自 iOS規范，而 Tabs 來源于 MD規范。
案例：如圖我們來看 iPhone 的日歷界面點擊收件箱，因為是 iOS系統配置的應用，所以界面中切換樣式用的是分段控件，而反觀安卓系統則用的是 Tabs切換。
內容不同
內容不同：分段控件主要起到分割和篩選同類數據，而 Tabs 則沒有這樣的限制，Tabs 里的每一項所呈現的內容可以有很大的差別。另外分段控件更多的是以單選功能出現在表單的使用中，而 Tab 則不能作為表單的單選組件。
案例：如下圖鯊魚記賬中的圖表頁，支持、收入為整個界面展示項目，為了讓用戶查看起來更加方便，把數據分割為周、月、年的不同的數據展示，因為是同類數據切換，所以選擇了分段控件。反觀36氪首頁的 Tabs欄，由于每個內容的差別都很大，所以使用了 Tab欄展示。
操作方式不同
操作方式不同：分段控件需要點擊操作，而 Tabs 除了點擊外還可以通過左右滑動切換不同視圖。
案例：如下圖，網易錢包App 界面中的切換控件，因為在表單中且是極為近似的數據圖，不易讓用戶側滑屏幕切換，需要讓用戶更精準的點擊選擇。所以使用了智能點擊的分段控件，而優酷視頻的切換頁變化都比較明顯，很容易區分，所以選擇了可以側滑屏幕切換的 Tabs。
數量
數量：分段控件數量不能超過5個，而 Tabs 沒有數量限制。
案例：如下圖網易云音樂中的消息界面，界面中因為分類的數量未超過五個（不是所有未超過5個的就要用分段控件，同時也要根據以上說的其他三種情況判斷，這里只針對數量闡述而已），所以可以使用分段控件，而網易云音樂視頻界面中因為分類數量過多且內容上有區別所以選擇了 Tabs。
Toast：Toast 通常出現在頂部和中部，浮于頁面上方，無法對其操作，出現一段時間后便會消失，并且在此期間不影響其他正常操作。
Snackbar：Snackbar 出自于安卓系統，是安卓系統的特色彈窗之一。它是由一段信息和一個按鈕組成，他們會在超時或者用戶在屏幕其他地方觸碰后自動消失。Snackbar 可以在屏幕上滑動關閉。Snackbar 不會妨礙用戶對產品的其他操作。
操作不同
操作不同：Toast 彈窗沒有任何操作鍵，而 Snackbar 是有操作鍵的。
案例：如圖馬蜂窩App 中給作者的文章點贊功能只需要告知用戶，點贊已成功即可，不需要其他操作，所以選用 Toast彈窗。而攜程中當進入酒店界面時，除了告知用戶下面還有更多信息外，還想引導用戶直接查看，所以選用了帶操作功能的 Snackbar。
退出狀態不同
退出狀態不同：Toast彈窗完全是通過超時后自動消失，不存在任何操作，而 Snackbar 可以超時消失也可以用戶主動上滑關閉。
案例：如下圖豆瓣App 廣播界面中，當我點擊換一批后，換好的內容會自動刷新到最前面，所以用戶不需要任何操作就可以看到內容，就可以選用無操作必須等待超時后才會消失的 Toast彈窗。
而攜程App 中的酒店界面，因為更多精彩的內容在下面，并沒有展示出來，為了不讓用戶在滑動瀏覽時造成視覺障礙。所以選擇了 Snackbar，除了超時后自動關閉外，也可以通過滑動界面讓彈窗主動關閉。
組成元素不同
組成元素不同：Toast彈窗主要是由文字和背景組成，也可以額外附加圖標。而 Snackbar 除文字、背景，圖標外還有操作鍵組成。
案例：如下圖得到App 中只需要提示用即可，所以選用 Toast，組成元素選用背景+文字+圖標，而小紅書App 需要加入操作鍵，所以選擇了 Snackbar。
通過上面的分析，大家是不是對這八個組件有了更深的理解呢？
每個組件都有不可替代的作用，如果大家還有哪些不清楚的組件對比可以在文章下留言，之后我會選擇一些整理出來再次和大家分享，感謝大家的耐心閱讀。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Chrome瀏覽器10周年特別版已經上線了，有很多重大的更新內容。Chrome 有了更加圓潤的外觀，新圖標和跨平臺的新色調。Google 還對用戶界面進行了更改，以提高您的工作效率。例如，他們已將工具欄移動到 iOS 的底部，簡化了地址欄中的提示，菜單和 URL。還有更多更新的內容，請自行去官網看看。
是不是很酷，反正我很喜歡這次更新的 UI界面，顏色和圓角都是喜歡的點。那這套設計是怎么來的？接下來的文章將帶你走進 Chrome 設計背后的故事。
Chrome Omnibox的版本迭代之路（Unboxing Chrome，Redesigning the omnibox）
譯者注：Omnibox 是位于瀏覽器頂部的一款通用工具條，用戶可以在 Omnibox 中輸入網站地址或搜索關鍵字，或者同時輸入這兩者，Chrome 會自動執行用戶希望的操作。這個詞在下文中將不再翻譯，屬于功能性的名詞，用英文更準確。
為了慶祝 Chrome 在2018年9月的10歲生日，我們對瀏覽器界面進行了徹底的重新設計，對設計流程也進行了徹底的優化。盡管 Chrome 一直都是開源的，但我還是想分享更多關于其中的設計故事，以希望其他人能從中學到東西。
我經常被問到一些問題，比如「為什么 Chrome 需要設計師？」我的同事 Sebastien 在他的 Medium 帖子中優雅的描述了這一點，他說：
我收到最難的反饋就是，「只是這樣不就行了嗎？」
隱藏在問題的背后往往是，瀏覽器應該像下面那個樣子就夠用了：
這張圖可以說已經很像在 PC電腦上的瀏覽器效果了，盡管是面對20億用戶，這樣似乎也能正常工作。那為什么需要重新設計呢？
因為隱藏在這個盒子里面的內容是世界上最復雜，最安全的搜索和渲染引擎。
我們希望給它一個機會，去改變全世界瀏覽器的設計。
要了解我們如何走到今天，可能需要我們回頭仔細看看：
△ 第一個盒子
這個0.5dp的漸變描邊，22％不透明度投影及1dp圓角半徑的盒子樣式只為說明一件事：用戶能知道自己可以在其中輸入內容。
為什么？因為過去電腦只是連接到顯示器和鍵盤，整個屏幕基本上都是文本。但當有了鼠標之后，就需要明確哪個區域是可點擊的。因為顯示器只能繪制方塊像素，所以「文本輸入框」誕生了。
△ 初代盒子
隨著瀏覽器的推出，這個盒子開始具有顯示位置或「統一資源定位器（URL）」的雙重功能——因此得名「地址欄」。
在2008年，當 Chrome 首次發布時，我們的主要設計原則是盡可能減少認知成本。因此，我們合并了谷歌的搜索框和地址欄，并添加了4dp投影和下拉菜單，使得搜索體驗更好——取了個名字叫「omnibox」。
△ 2008
當瀏覽器第一次出現在移動設備上時，界面空間非常有限，所以我們精心設計了每個像素，以便盡可能的占用更少的空間。我們使用了1dp的內陰影代替投影，并保證界面在灰色底下保持協調。
△ 2012
自那之后，網絡環境變得更加復雜，設備也更加智能化。我們開始關心一些更復雜的情形下會發生什么，比如：當一個網站被黑客入侵并清除用戶個人信息時，當突然斷開網絡時，當用戶想回到一周前訪問過的網站但又不記得網站時。
在過去的10年里，全世界成千上萬的工程師（包括 Google 在內）都在思考這類問題，并全心全意地尋找解決方案，幫助用戶瀏覽這個呈指數級變化的網絡。
移動網絡的快速發展也帶來了大量的新用戶，他們其中很多都是第一次在手機上上網，以前他們從未見過這個盒子，他們也不知道可以從這個盒子中找到任意想要找的東西。
我必須承認，在我開始在這里工作之前，我連 Chrome 一半的功能都不知道。例如，可以左右滑動工具欄用來切換選項，或者下滑查看所有選項卡。
△ 向下滑動工具欄查看選項卡的小技巧
類似這樣的功能特性都是很隱蔽的，因為我們從來不想刻意的給用戶去推銷我們的功能。事實上，我們在瀏覽器中做的設計大多是無形的，以確保我們產品的核心價值「不是 Chrome，而是內容本身」。這是一個我非常喜歡的原則，這也是我加入這個項目的原因之一。
作為一個內向的人，有一個優勢是會在設計上也試圖盡可能的不張揚。產品本身似乎也反映了我對設計的看法：
保護用戶與內容之間的神圣空間——不要分散用戶的注意力。
就像 Beatrice Warde 將排版視為「水晶酒杯」一樣，我將 Chrome 僅視為「水晶顯示器」。
我錯了。隨著網絡環境的改變，其他第三方軟件開始偽裝成 Chrome 來竊取信息，甚至是詐騙用戶。
以前，我們不介意是否有人會從一大堆瀏覽器中選擇 Chrome，但現在它已經開始影響我們用戶的安全了。
因此，我們第一次開始質疑需不需要那么隱形。
當我第一次和工程師們坐在一起，想要更好的了解我們的瀏覽器是如何構建時，這是一個大坑，沒有任何東西能讓我為接下來的事情做好準備。
這在我15年設計經驗中從未有過的。
我們在超過6個 Android 版本中，支持超過40種語言，甚至連 Roboto Medium 不支持的語言，我們都做了很好的適配。我們還允許開發人員將工具欄的顏色更改為幾乎任何顏色，同時還保持可訪問性以支持 web應用生態系統。
我們的 UI 也能適應不同像素密度設備并能保證具有相似的觸摸大小，并且無論設備的內存容量或制造商都能平穩運行。
在你與它交互之前，這個盒子有超過2000種不同排列方式。
一旦你輕敲、輸入、滾動、滑動或者與它語音，瀏覽器的布局排列就會發生各種變化。
當你打字時，我們確保你看到的鍵盤是你熟悉的那個；當你分享一個網站時，我們也會顯示你在手機上的常用選項。
△ 我們設計的一些操作模式（黑色水平線表示分屏模式）
我們的靜態盒子有2000個排列，然后在包含所有動態交互的情況下能成倍的增加到20000個以上。
看起來有點多？其實并不是。
因為我們想要確保每個人都能很順利的訪問互聯網，不管他們從哪里進來的。
即使在我們的團隊中，也沒有人知道這個框中有多少種不同的文本樣式。因為 Chrome 的迭代過程已經超過了10年，我們有一堆零散或過時的源文件。
因此，盡可能的回溯審查（主要是為了確保不會破壞數十億人的 UI界面），我們為每種文本樣式遍歷每一行代碼，并在字號、字重、顏色和透明度方面繪制出數百種變化。
盡管幾年前就已經把我們的 UI規范化了，但是我們沒有關于如何使用這些規范的指導，比如像14sp Roboto 的字體，我們就有超過14種不同的顏色。
我們總共使用了超過95種不同深淺的灰色。
如果不查看上下文，就不可能決定使用哪一個。即使是最小的更改也可能打破易訪問性的標準，但其實我想知道我們實際上需要的最小顏色數。
將近半年后，終于有了答案，結果是8個。
然后，我們對 UI中的每個圖標都做了相同的設計，所有115個圖標——仔細選擇哪些是 Material（如菜單圖標），哪些是 Chrome 特定的（如匿名圖標），哪些是特定于平臺的（如復制/粘貼），還不包括選定，按下和禁用狀態。
此外，一些圖標被翻轉為從右到左的形式，因此總數實際上接近400+。
在盯著灰色盒子看了幾個月后，如果我說前面堆積如山的工作其實并不可怕，那就真的是在吹牛了。
盲目自信，讓我覺得我可以獨自完成所有的事情。但我越努力，就越明顯地發現這個問題并沒有隨著簡單的重新設計而消失。
我們需要徹底的檢查整個設計過程，以確?，F有和未來的 UI 保持一致。
這很難，因為要 Chrome 在Google規范（如賬戶登錄流程），Material規范（如按鈕和圖標），本地UI（如鍵盤）和Chrome品牌元素（如斷網時的小恐龍）之間保持平衡。
所以，我向我們的工程師們尋求幫助，令人驚訝的是，他們對規范問題的放大表示歡迎。這個問題其實也讓他們很難審查代碼，因為平臺約束和特性變化意味著難以回退和各種不一致。事實上，我們的工程師 Ted Choc 甚至雇了人來支持我們的努力，他們其實也很想搞定這個問題。（我的愿望實現了?。?
為了讓你知道我們的 Eng團隊是多么的了不起，Ted 的使命宣言中寫的就是「Chrome移動端超級棒！」
有了新獲得的支持，我們開始構建基于代碼庫共享組件的可視化規范。其他應用「免費」獲得的 Material 組件必須經過定制，以滿足 Chrome 的所有（2000個）排列。幾乎是從零開始，所以我們需要找到一種可擴展的方法來劃分所有這些差異。
結果如下：
我們的第一個版本（M54）截圖——在我們的界面中會映射每種顏色、文字、圖標和組件。
幾個月來，我們只是在刪除整理東西，清理多年累積的設計和工程債務?，F在我們有了一個干凈的界面和一個組件庫系統，我們已經準備好開始設計了。
讓我們回到我們在前面第一次遇到的盒子。1號盒子放在一個更大的灰色盒子里，我們稱之為「工具欄」。
△ 第二個盒子
工具欄將瀏覽器UI 從內容和系統UI 中分離出來，當你點擊白色框時，它將填充灰色框，并顯示下面的另一個灰色框。
△ 第三個盒子
在這里，我們可以展示我們在幕后所做的一切，試圖使 Chrome 盡可能地發揮作用。但是為什么所有這些盒子都要調整大小并從一種狀態改變到另一種狀態呢？
△ 第一個盒子的不同形式
當某些東西在屏幕之間發生變化時，就很難識別或記住。
如果 UI 在用戶與它交互時發生了變化，他們會將變化理解為以后可能有用的信息。例如，如果圖像消失在圖標中，你可能需要記住該圖標，以防你想再次打開該圖像。
這增加了理解用戶界面和決定需要保留哪些信息的短暫認知負擔。
我們去掉了所有的視覺噪音像素，讓你更快地進行認知過程，而不僅僅是為了讓它看起來更賞心悅目。
即使每座城市都能節省1秒鐘的時間，那也會有200萬秒或者23.14天。想想看，人們可以在額外的23天內做些什么！（譯者注：不大明白作者這里怎么算的，可能意思是說要提升效率。）
為了演示，讓我們看看去掉文字和圖標之后的工具欄：
你是否注意到你的眼睛在屏幕上移動了多少來處理不同的元素？
現在讓我們來看一下同一個屏幕，只去掉了顏色和陰影：
從什么都沒有的時候開始練習，或者我們所說的「白色建筑」，意味著每一個元素都必須被考慮。包括這個在我們的 UI 上靜靜地做了這么多年的盒子：
△ 第四種盒子
幸運的是，我們認識了第四種盒子的創造者，并且得到了 Android 團隊的大力支持，可以根據內容來改變顏色（又一個6個月的旅程，值得一提）。
但是，讓我們繼續討論第二框的其他內容：圖標，這些圖標都帶有另外兩個隱形框。
描述了圖像資源的「邊界框」
△ 看不見的5號盒子
「觸摸目標」描述了點擊區域
△ 看不見的6號盒子
因為「3點菜單」圖標視覺上更窄，它有一個更小的點擊區域。但如果單純讓可點擊區域保持統一，就會造成視覺上的不平衡，造成圖標之間不均勻的間隙。
所以我們不得不妥協，稍微打破了 Material規范，讓它更容易點擊和視覺平衡。
是的，我花了整整一個星期的時間盯著看不見的盒子，會有人注意到嗎？很可能不會，值得嗎？值得，有2000000倍的效果啊。
在我通過遍歷 UI 中的所有文本、顏色和圖標建立了足夠的信心之后，我準備處理 omnibox。
我們想找到一種方法來巧妙地強化 Chrome 的品牌——考慮到我們的 logo 很少出現在我們的 UI 中，我猜想這會是一個挑戰。我做了幾十個看起來很有希望的設計，卻發現沒有一個是可行的，因為它們都缺乏有力的支持理由。
所以，我回到我們的核心品牌，認真地看了看我們的標識。我注意到的第一個視覺特征是小寫的「c」。
這說明了我們品牌的自然隨性，所以找到一個友好的形狀很重要。我們還使用了與谷歌相同的4種顏色來展示我們的傳承性。事實上，Android、Google 和 Chrome 的標志上都有一個反復出現的形狀。
圓形
圓形是自然形成的形狀，不像矩形，所以他們的視覺認知負擔更小。在倫敦住了兩年之后，我對這個形狀仍然記憶猶新。
當地鐵的名字第一次以矩形的形式出現時，火車上的乘客很難將其與海報廣告區分開來。因此，1912年，他們在地鐵的后面加上了紅色的圓圈，以便更容易找到。 Frank Pick 隨后將圓圈加入了現代著名的標志中。
△ 圖片來自倫敦交通博物館
我覺得這是對我們 omnibox 的一個很好的隱喻。
它不應該只是告訴你目前的需要，它應該還能幫助你更進一步。
深入觀察我們的 logo，我特別注意的形狀是這個：
這不正是我們品牌的形狀嘛。
它表達了我們的性格，同時表明這不僅僅是一個「搜索框」或「地址欄」，而是一個全新的，友好的東西。
由于鼠標的引入促成了文本框形狀，而在移動端，又由我們的手指交互進化了我們文本框的形狀，更符合人手的交互操作。
一次偶然的機會，我們還去 de Young 博物館參加 Frank Stella 的展覽，Stella 使用曲線形狀的畫布打破了標準的矩形框架。和我一樣，他也喜歡賽車，在他的作品《Deauville》中，他使用了類似的形狀來暗示速度——Chrome 的核心支柱之一。
我贊同現代主義的觀點，認為傳統的藝術形式對于我們的任務來說已經變得無關緊要和過時了，因此我們將新的視覺設計方向命名為「Modern」。
然后我們探索了數千種設計。
△ 所有Sketch畫板
起初，我采用了與最初在移動端相同的方法，使用1dp描邊似乎是有意義的。但在執行過程中，它很容易迷失在一片白色的、頂部有搜索欄的網站中，邊線在隱身模式下也不能很好地工作，很難與粗粗的輪廓圖標相平衡。
我們的一位設計師認為這只是一個線框圖。
使用 Material 規范投影也感覺不太合適，因為它并沒有解決我們最初看起來只是像一個「搜索框」的問題。底部添加了一個額外的4dp投影，它視覺上看起來很重而且偏離中心。
我們甚至試著把盒子全部移走，但現在元素似乎是隨機放置的，一個像以 URL 為中心的改變會帶來巨大的工作成本。
結果是，我們的同事也在努力使我們的 URL 看起來更干凈，而 Material 2剛剛開始推出。它帶來了更豐富的配色，給我們的形狀賦予更多的生命力。
△ 之前
△ 更新后的顏色和url
事實證明，具有一致的形狀也使得我們的代碼不那么復雜，過渡動畫更少——設計和效率的完美平衡。
現在，我們準備好了進行測試：成千上萬的用戶、數月的實驗和可用性研究，與我們之前的設計相比，它被評為更「友好」、「創新」、「聰明」，而看起來卻毫不「快」或「值得信賴」。
△ M68 to M69
△ 我們為期一年的迭代
雖然我只是花了時間來寫這個盒子，但是其實在 UI 的每一處都有十幾個故事。
△ 我們全新的「Modern」M69 截圖
它是完美的嗎？其實還沒有，但這不是讓我為我們所做的事感到自豪的原因。事實上，我們讓 Chrome 變得更小，下載更快——確保我們構建的每一個像素都為下一個更好的設計師鋪平了道路。
就我個人而言，當我們的用戶研究中的一位參與者說，我知道我們做了一些正確的事情，「這給了我一種更好的平靜感，可能會幫助我一整天?！?
不僅是因為他們喜歡這個設計，是因為這也是我看待 Chrome 的方式。
我們花了將近一年的時間仔細研究 UI 中的每個像素，因為我們希望設計包裝與內在質量能夠相匹配——只是希望這次你可能會注意到這不是一個普通的盒子。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.skdbbs.com