著：[英] 賈爾斯·科爾伯恩
譯：李松峰
人民郵電出版社
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. 梳理知識(shí)框架，記錄閱讀收獲、心得，本身就是一個(gè)加深理解、溫故內(nèi)化的過程。
2. 摘錄重要知識(shí)，存儲(chǔ)在數(shù)字媒體上，方便隨時(shí)按需查閱。
3. 鍛煉思維和表達(dá)。
百利無(wú)一害，來(lái)吧，走起。
本書講述了一個(gè)產(chǎn)品價(jià)值觀和四個(gè)策略。
一個(gè)產(chǎn)品價(jià)值觀：作者崇尚簡(jiǎn)單體驗(yàn)的產(chǎn)品設(shè)計(jì)。簡(jiǎn)單的產(chǎn)品更容易制造 (成本也更低)，也更容易使用 (市場(chǎng)也更廣)
① 這里的產(chǎn)品指數(shù)字產(chǎn)品或?qū)嶓w產(chǎn)品。
② 本書主要考慮大多數(shù)用戶 (主流用戶) 的體驗(yàn)。
四個(gè)策略：刪除、組織、隱藏、轉(zhuǎn)移。本書的核心內(nèi)容就是講述如何通過這四個(gè)策略（我理解就是方法論）設(shè)計(jì)大多數(shù)用戶喜愛的簡(jiǎn)單體驗(yàn)。這幾個(gè)策略適用于簡(jiǎn)化功能和內(nèi)容。
1. 知識(shí)原理很多都是相通的
① 本書的刪除策略與奧卡姆剃刀
奧卡姆剃刀：“如無(wú)必要，勿增實(shí)體”。講的也是簡(jiǎn)單性原則。
他說：“切勿浪費(fèi)較多東西去做，用較少的東西，同樣可以做好的事情?！?講得真好，不能贊同更多。
② 組織策略與親密性原則
親密性原則：彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組在一起，成為一個(gè)視覺單元?！秾懡o大家看的設(shè)計(jì)書》Robin Williams，非常棒 推薦
組織策略與親密性原則講的都是正確組織信息的方法論。
③ 簡(jiǎn)單與別讓我思考
別讓我思考 (可用性最重要的原則)：你的目標(biāo)應(yīng)該是讓每一個(gè)頁(yè)面或屏幕都不言而喻，這樣的話，普通用戶只要看它一眼就知道是什么內(nèi)容，知道怎么使用它。即他們不需要思考就能明白?？捎眯允顷P(guān)于人，關(guān)于人們?nèi)绾卫斫夂褪褂卯a(chǎn)品的，它和技術(shù)沒有關(guān)系。技術(shù)日新月異，人本身的變化卻非常緩慢?！饵c(diǎn)石成金》史蒂夫·克魯格，很棒 推薦+1
2. 凡事過猶不及。
書中有一個(gè)案例驚嘆不已，講的是東京蘋果專賣店，沒有按鈕的電梯 (電梯內(nèi)和外都沒有操控按鈕)，自動(dòng)在每一樓層停靠、自動(dòng)開和關(guān)門 (乘客干預(yù)不了)。置用戶于完全失控的環(huán)境中（要是深夜一個(gè)人乘坐，估計(jì)得嚇不活了）。難以置信，誰(shuí)能想到以優(yōu)質(zhì)體驗(yàn)設(shè)計(jì)征服世界的鼎鼎大名的蘋果，居然還有這種反人類的逆天設(shè)計(jì)！
3. 這本書的閱讀體驗(yàn)跟《寫給大家看的設(shè)計(jì)書》極相似
① 簡(jiǎn)單、輕松、通俗易懂兩者都為讀者創(chuàng)造了簡(jiǎn)單、輕松的閱讀體驗(yàn)。把知識(shí)融入情境、故事，以圖示意，短小的一篇一篇像在和你講故事，娓娓道來(lái)、言之有物、簡(jiǎn)明扼要、通俗易懂。
② 知識(shí)框架扁平、濃縮為極簡(jiǎn)，過目難忘《簡(jiǎn)約至上》把全書核心凝煉為：刪除、組織、隱藏、轉(zhuǎn)移?！秾懡o大家看的設(shè)計(jì)書》將復(fù)雜的設(shè)計(jì)原理凝煉為：親密性、對(duì)齊、對(duì)比、重復(fù)。合上書，就能回憶起來(lái)，太簡(jiǎn)單又太深刻，真的想忘記都難。
4. 好書亦師亦友
“雖然這世界上不能改變的東西很多，但眼前的設(shè)計(jì)還是有很多簡(jiǎn)化的途徑可循?！?、“你能做到”... 像不像一個(gè)智慧溫暖又真誠(chéng)善良的朋友在不斷的給你信心和鼓舞？
(小聲說，我也喜歡)
以我淺薄有限的認(rèn)知來(lái)看，人們喜歡簡(jiǎn)單不僅因?yàn)楹?jiǎn)單順應(yīng)人性，還因?yàn)楹?jiǎn)單帶來(lái)高效：
① 簡(jiǎn)單順應(yīng)人性簡(jiǎn)單意味著不用思考，以現(xiàn)有的認(rèn)知水平一看就明白，在人的舒適區(qū)，啟用的是人低耗能自動(dòng)模式，是本能來(lái)的。而復(fù)雜的事物，如思考、學(xué)習(xí)、鍛煉、做一件難的事，都是更多的消耗人的腦力、體力、意志力、自控力、耐心、時(shí)間，都是調(diào)用人的高耗能模式，所以復(fù)雜這個(gè)東西本質(zhì)上是反人性的。
② 簡(jiǎn)單帶來(lái)高效不管是工具任務(wù)型產(chǎn)品還是內(nèi)容型產(chǎn)品，用戶使用產(chǎn)品的邏輯路線是一樣的，都是經(jīng)由認(rèn)知 -> 決策 -> 行動(dòng) -> 達(dá)成目標(biāo)；如果簡(jiǎn)單就會(huì)：認(rèn)知快 -> 決策快 -> 行動(dòng)快 -> 高效達(dá)成目標(biāo)；所以，簡(jiǎn)單是大多數(shù)用戶的剛需了。
1. 越復(fù)雜或少用的知識(shí)，忘記就越快。
2. 簡(jiǎn)單源自專注。明確自己的目標(biāo)，更容易迷途知返。
3. 解決問題前，先搞清楚狀況。糾結(jié)于某個(gè)設(shè)計(jì)時(shí)，退一步想想：“用戶在這里真正想干的是什么？” 聚焦用戶。
4. 共識(shí)：把所有利益相關(guān)方的目標(biāo)都統(tǒng)一到最終用戶身上，通過共識(shí)構(gòu)建愿景。然后，阻力和爭(zhēng)斗就會(huì)減少。
怎么讓利益相關(guān)方聽自己的？答案是必須理解他們的想法。
先從傾聽他們和理解什么對(duì)他們最重要開始。把匯總的意見恰當(dāng)?shù)胤答伣o他們，他們會(huì)知道你已經(jīng)明白了。在感覺被人傾聽后，他們才會(huì)樂意敞開心扉。
“我也希望看到最適合用戶的設(shè)計(jì)，我們一塊看幾個(gè)，看看是否可行。”
不要嘗試說服別人，聽他們說，讓他們自己判斷，讓他們自己承認(rèn)而不是回避問題，然后再去尋找解決他們問題的方案。
5. 產(chǎn)品使用環(huán)境是觀察用戶的最佳地點(diǎn)，必須使軟件設(shè)計(jì)符合環(huán)境需求。你的用戶體驗(yàn)應(yīng)該簡(jiǎn)單到不受這些干擾的影響，能夠在人們被打斷的間隙生存。
6. 為主流用戶 (大多數(shù)用戶) 而設(shè)計(jì)，忽略專家型用戶。
7. 體現(xiàn)品牌特征① 實(shí)用性——這個(gè)品牌能做什么對(duì)我有幫助的事情？(如讓飛行更簡(jiǎn)單)② 這個(gè)品牌給了我什么感覺？(如充滿活力，好玩)③ 這個(gè)品牌崇尚什么？
8. 簡(jiǎn)單就是讓用戶感到自己在掌控一切。你的設(shè)計(jì)不能跟這種掌控的感覺有什么抵觸，而是應(yīng)該放大這種感覺。
9. 設(shè)計(jì)之所以會(huì)變復(fù)雜，通常是因?yàn)槟承┎恢匾牟襟E擠占了核心特性。關(guān)注用戶行為 (而不是你的設(shè)計(jì))，并且從用戶的視角把它描述出來(lái)。
10. 在研究某個(gè)問題的時(shí)候，你需要把它轉(zhuǎn)換成一種認(rèn)識(shí)。故事是描述認(rèn)識(shí)的一種好方式。與一大堆需求描述相比，故事更容易讓讀者明白什么重要和為什么重要。故事應(yīng)該用三言兩語(yǔ)把核心體驗(yàn)表達(dá)出來(lái)。
11. 極端的可用性
① 任何人都可以使用
② 毫不費(fèi)力的使用
③ 瞬間響應(yīng)
④ 一目了然
⑤ 始終工作
⑥ 不出錯(cuò)
⑦ 恰好夠用的信息
⑧ 在混亂無(wú)序的環(huán)境中工作
爭(zhēng)取你不可能達(dá)成的目標(biāo)有一個(gè)重要的好處：保持正確的方向。
12. 堅(jiān)持不懈是達(dá)成簡(jiǎn)單最重要的一步。
“乍一看到某個(gè)問題，你會(huì)覺得很簡(jiǎn)單，其實(shí)你并沒有理解其復(fù)雜性。當(dāng)你把問題搞清楚之后，又會(huì)發(fā)現(xiàn)真的很復(fù)雜，于是你就拿出一套復(fù)雜的方案來(lái)。實(shí)際上，你的工作只做了一半，大多數(shù)人也都會(huì)到此為止……但是，真正偉大的人還會(huì)繼續(xù)向前，直至找到問題的關(guān)鍵和深層次原因，然后再拿出一個(gè)優(yōu)雅的、堪稱完美的有效方案?！?——史蒂夫·喬布斯
13. 簡(jiǎn)化意味著改變，而改變始終意味著痛苦。多數(shù)人會(huì)不惜代價(jià)避免痛苦。收集需要改變的證據(jù)很重要。
14. 挑出正確的點(diǎn)子，確保能夠得到很好的執(zhí)行。
刪除：通過刪除來(lái)簡(jiǎn)化設(shè)計(jì)，刪除所有不必要的，直到減無(wú)可減。
15. 刪除雜亂的特性可以讓設(shè)計(jì)師專注于把有限的重要問題解決好，而且也有助于用戶心無(wú)旁騖地完成自己的目標(biāo)。
16. 不要等著別人不分青紅皂白地、無(wú)情地刪除最有意思的功能。要總攬全局，保證只交付那些對(duì)用戶體驗(yàn)而言真正有價(jià)值的功能和內(nèi)容。
17. 體驗(yàn)的核心是最能打動(dòng)用戶的東西。找到它，刪什么留什么就一目了然了。能夠消除用戶挫折感的功能同樣也會(huì)受到歡迎。
18. 刪除殘缺的功能、導(dǎo)致出錯(cuò)的功能、不必要的功能
19. 如果一個(gè)小變化導(dǎo)致了復(fù)雜的流程，就應(yīng)該退一步去尋找更好的解決方案。
20. 錯(cuò)誤：即使非常小的錯(cuò)誤也會(huì)讓用戶煩惱。消除錯(cuò)誤是簡(jiǎn)化用戶體驗(yàn)的重要途徑。無(wú)論顯示什么錯(cuò)誤信息，好像都沒有那么友好、親切和簡(jiǎn)單。
21. 不要以功能的多寡來(lái)認(rèn)定產(chǎn)品的價(jià)值，而應(yīng)該看產(chǎn)品能否滿足用戶最高優(yōu)先級(jí)的目標(biāo)。
22. 刪除視覺干擾因素，讓用戶注意力保持集中。界面中的各種小細(xì)節(jié)會(huì)增加用戶的負(fù)擔(dān)、打斷用戶的思維，會(huì)像公路上的減速帶或坑坑洼洼一樣降低用戶的效率。
23. 太多選擇容易讓人反感。
24. 清除減速帶：選擇聰明的默認(rèn)值可以減少用戶的選擇。
25. 刪除視覺混亂和噪音，意味著人們必須處理的信息變少了，能夠把注意力集中到真正重要的內(nèi)容上。
26. 刪減文字、精簡(jiǎn)句子：重要的內(nèi)容“水落石出”，消除了分析滿屏內(nèi)容的麻煩，用戶更有掌控感，把文字變得簡(jiǎn)潔、清晰、有說服力。
27. 簡(jiǎn)化對(duì)話，長(zhǎng)話短說。一次交互就是用戶與設(shè)備之間的一次對(duì)話。
28. 砍掉時(shí)間?？车艄δ芎蛢?nèi)容可以節(jié)省時(shí)間，因?yàn)闆Q定少了、按鈕少了、思考少了、閱讀少了。要在對(duì)用戶真正重要的事情上節(jié)省他們的腦力。
組織：通過組織來(lái)簡(jiǎn)化設(shè)計(jì)
29. 通過組織的方式簡(jiǎn)化設(shè)計(jì)，要點(diǎn)在于只強(qiáng)調(diào)一兩個(gè)最重要的主題。
信息布局、分類、排序、搜索、使用顏色分層 (地鐵線路圖)，找到組織信息的正確方式，可以極大的簡(jiǎn)化用戶體驗(yàn)。要想知道設(shè)計(jì)是否成功，可以瞇起眼睛來(lái)觀察屏幕，看是否能區(qū)分出不同的層。
隱藏：隱藏不重要的，避免分散用戶注意力
30. 無(wú)論隱藏什么功能，都意味著你在用戶和功能之間設(shè)置了一道障礙。這個(gè)障礙可能是遙控器上的塑料倉(cāng)門，也可能是網(wǎng)站上一連串的點(diǎn)擊。為了避免給用戶造成不必要的麻煩，必須仔細(xì)權(quán)衡要隱藏哪些功能。
31. 不常用但不能少，如個(gè)性化設(shè)置不會(huì)經(jīng)常改變，因此非常適合隱藏。
32. 隱藏所有需要隱藏的功能，在你需要時(shí)出現(xiàn)在合適的位置上。
33. 細(xì)微的線索足以提示隱藏的功能。
轉(zhuǎn)移
34. 轉(zhuǎn)移合適的功能到其他設(shè)備上、系統(tǒng)組件中，向用戶轉(zhuǎn)移。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
“先有思想，后有設(shè)計(jì)”設(shè)計(jì)師自身應(yīng)該逐步建立一套自己的設(shè)計(jì)體系，需要對(duì)設(shè)計(jì)方法論有專業(yè)的認(rèn)識(shí)和理解。一直想收集整理日常說到的各類設(shè)計(jì)理論知識(shí)，也希望通過整理和總結(jié)能有新的收獲，加深記憶。
格式塔心理學(xué)是視覺排版及設(shè)計(jì)中應(yīng)用比較廣泛，主要指人的眼腦作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過程，正是通過這一過程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體。格式塔的理論核心是整體決定部分的性質(zhì)，部分依從于整體，人腦知覺到的東西要大于眼睛見到的東西。
古登堡法則是又稱對(duì)角線平衡法則，由14世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個(gè)象限：
1.第一視覺區(qū)(Primary Optical Area)：左上方，讀者首先注意到的地方。
2.最終視覺區(qū)(Final Optical Area)：右下方，視覺流程的終點(diǎn)。
3.強(qiáng)閑置區(qū)(Strong Follow Area)：右上方，較少被注意到。
4.弱閑置區(qū)(Weak Follow Area)：左下方，最少被注意到。
通過古登堡法則我們知道用戶的視覺中心往往在頁(yè)面的左上方，而結(jié)束瀏覽時(shí)視線往往落在右下角，所以合理利用這個(gè)法則可以幫助用戶更好地獲取內(nèi)容并采取行動(dòng)。自上而下的界面設(shè)計(jì)，自左向右的界面設(shè)計(jì)，頁(yè)面中通常將操作按鈕放在右下角。
菲茲定律：從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離和目標(biāo)的大?。▓D中的 D與 W），用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)。意味著小而近的目標(biāo)用戶不需要花費(fèi)太大的精力就能輕易觸及或者關(guān)注，相反小而遠(yuǎn)的目標(biāo)則需要花費(fèi)用戶更多的時(shí)間和注意力，菲茲定律闡述的是效率相關(guān)的問題
思考結(jié)論：1.必要時(shí)讓按鈕更大，2.讓相關(guān)信息更近
?？硕?span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#080808;">：一個(gè)人面臨的選擇(n)越多，所需要作出決定(t)就越長(zhǎng)。用數(shù)學(xué)公式表達(dá)為反應(yīng)時(shí)間T=a+b log2（n）。在人機(jī)交互界面中選項(xiàng)越多，意味著用戶作出決定的時(shí)間越長(zhǎng)。如比起2個(gè)菜單，每個(gè)菜單有5項(xiàng)，用戶會(huì)更快從有10項(xiàng)的1個(gè)菜單中做出選擇。席克定律在產(chǎn)品應(yīng)用中主要用于通過合理的選項(xiàng)及功能規(guī)劃提高用戶的決策及完成任務(wù)效率
應(yīng)用場(chǎng)景：
1.分類編組，提高決策效率
2.過濾選項(xiàng)，隱藏/刪除低頻率功能選項(xiàng)
3.分布執(zhí)行，提高流程轉(zhuǎn)化率
米勒定律：頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯(cuò)。米勒定律在產(chǎn)品應(yīng)用中主要在于合理的信息布局和信息處理可以提高用戶對(duì)信息的獲取效率和記憶難度。
應(yīng)用場(chǎng)景：
1.控制數(shù)量，減少用戶選擇
2.信息分段，輔助用戶記憶
3.流程分步，優(yōu)化用戶操作
4.信息排序，引導(dǎo)用戶記憶
臨近性原則：當(dāng)對(duì)象離得太近的時(shí)候，意識(shí)會(huì)認(rèn)為它們是相關(guān)的。在交互設(shè)計(jì)中表現(xiàn)為一個(gè)提交按鈕會(huì)緊挨著一個(gè)文本框，用戶會(huì)理解為按鈕于文本框有關(guān)聯(lián)性。換句話說當(dāng)相互靠近的功能塊是不相關(guān)的話，就說明交互設(shè)計(jì)可能是有問題的。
泰斯勒定律（復(fù)雜守恒定律):該定律認(rèn)為每一個(gè)過程都有其固有的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。
應(yīng)用場(chǎng)景：
1.合理縮短用戶使用路徑，在設(shè)計(jì)中可有適度的簡(jiǎn)化縮短操作流程但是到一定的程度可能會(huì)影響整體的功能和價(jià)值。
2.將固有的復(fù)雜性從一個(gè)地方轉(zhuǎn)移到另一個(gè)地方，例如搜索中歷史記錄，信息商品的收藏等功能，實(shí)際都利用了此定律。
3.將功能進(jìn)行拆分，一次性無(wú)法降低復(fù)雜度的功能可以進(jìn)行拆分。
奧卡姆剃刀原理：奧卡姆剃刀原理只承認(rèn)確實(shí)存在的東西，認(rèn)為那些空洞的普遍性的東西都是沒有用的，應(yīng)該剔除掉，概括起來(lái)就是“如非必要，勿增實(shí)體”實(shí)際上無(wú)論實(shí)體、視覺或認(rèn)知上，多余的負(fù)擔(dān)都會(huì)削弱表現(xiàn)效能，去除解決方案的雜質(zhì)，讓最后的設(shè)計(jì)會(huì)更嚴(yán)謹(jǐn)、更純粹。在設(shè)計(jì)蘋果產(chǎn)品的時(shí)候，喬布斯一直堅(jiān)持認(rèn)為：為了實(shí)現(xiàn)一個(gè)功能而造出一堆復(fù)雜的東西，沒用，簡(jiǎn)單的才最好。Google專注于搜索，主頁(yè)上也只有搜索，其他搜索引擎就沒有做的這么徹底，這也是為什么Google用戶量最多的原因之一。
防錯(cuò)原則：最早應(yīng)用于汽車制造領(lǐng)域中，工程師新鄉(xiāng)重夫（豐田精益生產(chǎn)莊家）于上世紀(jì)60年代，創(chuàng)造了這個(gè)理念。防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽，而不是人為操作疏忽，例如硬件設(shè)計(jì)上的 USB 插槽，醬油瓶口。防錯(cuò)原則有四項(xiàng)基本原則包括，輕松原則，簡(jiǎn)單原則，安全原則和自動(dòng)原則。
狀態(tài)可見原則：保持界面的狀態(tài)可見，變化可見，內(nèi)容可見。讓用戶知道發(fā)生了什么，在適當(dāng)?shù)臅r(shí)間內(nèi)做出適當(dāng)?shù)姆答仭?比如用戶在網(wǎng)頁(yè)上的任何操作，不論是單擊、滾動(dòng)還是按下鍵盤，頁(yè)面應(yīng)即時(shí)給出反饋。
貼近場(chǎng)景原則：用用戶的語(yǔ)言，用詞，短語(yǔ)和用戶熟悉的概念，而不是系統(tǒng)術(shù)語(yǔ)。遵循現(xiàn)實(shí)世界的慣例來(lái)呈現(xiàn)信息，功能操作符合用戶的使用場(chǎng)景。進(jìn)一步來(lái)說貼近場(chǎng)景，也是要求在設(shè)計(jì)的時(shí)候要考慮，產(chǎn)品面對(duì)的人群和人群所在的環(huán)境，比如，同一款產(chǎn)品在不同地區(qū)呈現(xiàn)形式需要考慮文化差異。不同屬性的產(chǎn)品例如兒童教育和辦公產(chǎn)品，需考慮使用人群的特性。
可控原則：操作應(yīng)該是可逆的，可以支持“撤銷”和“重試”，以此來(lái)離開“非預(yù)期” 的狀態(tài)，簡(jiǎn)單來(lái)說就是不要讓用戶走進(jìn)死胡同，提供出口和退路。例如微信發(fā)送消息可以撤回可重新編輯等。很多web端的表單，文章發(fā)布等都支持自動(dòng)保存，很大程度上避免錯(cuò)誤或者意外操作。
一致性原則：遵循平臺(tái)的慣例。也就是，同一用語(yǔ)、功能、操作保持一致。
防錯(cuò)原則：核心觀點(diǎn)是如何有效的在用戶出錯(cuò)之前就盡量避免錯(cuò)誤發(fā)生，在互聯(lián)網(wǎng)產(chǎn)品中，比起回退修改錯(cuò)誤信息或者操作更好的是，用設(shè)計(jì)防止這類問題發(fā)生。很多轉(zhuǎn)賬功能中輸入數(shù)字后會(huì)顯示千萬(wàn)等說明文字，用戶輸入卡號(hào)后會(huì)自動(dòng)識(shí)別關(guān)聯(lián)銀行，避免用戶出錯(cuò)。
1.限制操作范圍和條件。例如很多手機(jī)登錄等交互中默認(rèn)設(shè)置手機(jī)號(hào)為11位避免了用戶出錯(cuò)，提高了易用性。
2.對(duì)有風(fēng)險(xiǎn)的操作進(jìn)行二次確認(rèn)。
易取原則：盡量減少用戶對(duì)操作目標(biāo)的記憶負(fù)荷，動(dòng)作和選項(xiàng)都應(yīng)該是可見的。用戶不必記住一個(gè)頁(yè)面到另一個(gè)頁(yè)面的信息。系統(tǒng)的使用說明應(yīng)該是可見的或者是容易獲取的。 很多產(chǎn)品搜索功能的關(guān)鍵詞聯(lián)想搜索，即使用戶不能完全記住關(guān)鍵詞也能輕松搜索。
1.讓用戶選擇而不是輸入，選擇和輸入的操作成本相差巨大，產(chǎn)品應(yīng)給給用戶提供選項(xiàng)，讓用戶可以直接選擇，而不是自己輸入，比如填寫收貨地址。
2.自動(dòng)讀取、記錄信息、減少操作路徑。在用戶使用產(chǎn)品的過程中，會(huì)產(chǎn)生一些需要記憶的內(nèi)容、或者操作路徑，這個(gè)時(shí)候我們要避免用戶記憶，把信息直接提取出來(lái)，送到用戶手里
高效靈活原則：為大多數(shù)用戶設(shè)計(jì)，兼容少部分特殊用戶。允許用戶進(jìn)行頻繁的操作，更加便捷靈活的代碼和反饋。各大產(chǎn)品中常使用的搜索功能，提供歷史搜索功能。微信朋友圈發(fā)布中選擇可見/不可見人群時(shí)，提供上次選人記錄。
1.提供快捷入口，例如支付寶的首頁(yè)可以自主配置常用的小程序，微信下拉對(duì)話頁(yè)面可以快捷進(jìn)入歷史小程序
2.方便用戶重復(fù)操作，例如外賣平臺(tái)中自動(dòng)定位常用地址，訂單中可以再來(lái)重復(fù)的一單等
3.預(yù)知用戶操作縮短操作路徑，例如截圖后打開微信對(duì)話框會(huì)關(guān)聯(lián)截圖發(fā)送
簡(jiǎn)約原則：審美和簡(jiǎn)約設(shè)計(jì)，頁(yè)面不應(yīng)該包含無(wú)關(guān)緊要的信息，頁(yè)面的每個(gè)額外信息都會(huì)降低主要內(nèi)容的相對(duì)可見性。
容錯(cuò)原則：錯(cuò)誤信息應(yīng)該用語(yǔ)言表達(dá)（不要用代碼），較準(zhǔn)確地反應(yīng)問題所在，并且提出一個(gè)建設(shè)性的解決方案。比如404。
人性化幫助原則：有必要提供幫助和文檔。任何信息應(yīng)容易去搜索，專注于用戶的任務(wù)，列出具體的步驟來(lái)進(jìn)行。幫助性提示最好的方式是：1、一次性提示；2、常駐提示；3；幫助文檔。
通過這些方法的總結(jié)歸納，我發(fā)現(xiàn)其實(shí)很多原則原理我們?cè)谄綍r(shí)的設(shè)計(jì)中有意無(wú)意的總會(huì)用到，在實(shí)際工作中設(shè)計(jì)很大程度上是做選擇，哪一種是對(duì)產(chǎn)品對(duì)用戶最優(yōu)的方案，有的設(shè)計(jì)師可以通過自己的經(jīng)驗(yàn)作出選擇，沒有經(jīng)驗(yàn)的可能需要多多理解這些原則原理，交互設(shè)計(jì)之父阿蘭·庫(kù)珀說過“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”只有反復(fù)的遵循使用標(biāo)準(zhǔn)才能建立自己的一套設(shè)計(jì)方法論，讓工作更加得心應(yīng)手。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
來(lái)源：站酷
作者：有魚MUMU
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
“少即是多”是經(jīng)常掛在嘴邊的話題，在設(shè)計(jì)過程中，設(shè)計(jì)師們都會(huì)想盡一切辦法去簡(jiǎn)化交互流程、組件元素及各種設(shè)計(jì)屬性，讓用戶使用起來(lái)更簡(jiǎn)單。當(dāng)產(chǎn)品簡(jiǎn)化到一定程度，就必須要面對(duì)其不可簡(jiǎn)化的復(fù)雜性。
諾曼曾說過 “復(fù)雜是世界的一部分，但它不應(yīng)該令人困惑 ”，如果復(fù)雜性是合理的，我們應(yīng)該學(xué)會(huì)如何去管理復(fù)雜，考慮好復(fù)雜的問題在流向用戶后以何種方式處理，篩選控件就是用戶自行處理復(fù)雜信息的方式之一，只要是符合用戶行為做出的設(shè)計(jì)，將應(yīng)有的復(fù)雜以篩選的形式呈現(xiàn)給用戶，讓其自行決定，用戶反而會(huì)樂意接受。
篩選控件的使用頻率非常高，本文根據(jù)筆者對(duì)各類篩選控件的拆解及自身經(jīng)驗(yàn)進(jìn)行分總結(jié)，整理了在移動(dòng)端中常用篩選控件的類型、使用場(chǎng)景以及設(shè)計(jì)思路，幫助大家在設(shè)計(jì)中更好的選擇適合自己產(chǎn)品的篩選控件。
一、現(xiàn)實(shí)生活中的篩選
二、篩選功能的重要性
三、常見的篩選類樣式
四、篩選的幾個(gè)維度
五、篩選功能設(shè)計(jì)準(zhǔn)則
六、總結(jié)
在日常生活中，我們天天都在跟篩選打交道。設(shè)想一下，當(dāng)你走進(jìn)超市，在沒有任何分類指示的情況下，看到琳瑯滿目的商品是否會(huì)不知所措，答案是肯定的，且不論超市規(guī)模大小、商品的多少，相信沒有任何一個(gè)人愿意在不清楚的情況下花時(shí)間去找一個(gè)很可能不存在的商品，即便這點(diǎn)時(shí)間會(huì)很短。
道理還沒說完，大家都感覺自己很懂，可依然逃脫不了如今在各種形形色色的應(yīng)用中找不到自己需要的功能而苦惱，那么這些應(yīng)用又是誰(shuí)設(shè)計(jì)的呢？答案就是「大多數(shù)人」。
換言之，如果我們能通過標(biāo)識(shí)牌、平面圖指引（模糊查找），詢問服務(wù)員、記憶指引（精準(zhǔn)查找），就容易很多，這些指引路徑就完全充當(dāng)了篩選功能，至于通過什么方式，只能根據(jù)人們自身或現(xiàn)場(chǎng)條件自行選擇，能滿足自己的需求即可。在功能繁多、交互流程復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品中也是如此。
在我們?cè)O(shè)計(jì)篩選控件之前，需要清楚了解什么是篩選，東施效顰不是什么明智之舉。篩選，即用戶根據(jù)自身需求、通過一個(gè)或多個(gè)特定條件，在已有的內(nèi)容中快速找到滿足自己當(dāng)前條件的信息，單獨(dú)呈現(xiàn)的同時(shí)、并將未滿足條件的信息暫時(shí)作隱藏處理，以便用戶完成自己的目標(biāo)需求。
篩選也可以稱之為過濾器，是搜索框架的一部分。這里需要說明一點(diǎn)，篩選不同于搜索，它是系統(tǒng)結(jié)合用戶提出的條件，對(duì)內(nèi)容進(jìn)行規(guī)則性的查找，準(zhǔn)確的說，用戶屬于被動(dòng)，篩選出的結(jié)果在產(chǎn)品側(cè)「精準(zhǔn)」、用戶側(cè)「模糊」；而搜索則是用戶通過明確的目標(biāo)主動(dòng)進(jìn)行精準(zhǔn)查找，要么直接找到自己想要的結(jié)果、要么對(duì)結(jié)果不滿意，搜索出的結(jié)果在產(chǎn)品側(cè)「模糊」、用戶側(cè)需要「精準(zhǔn)」。說直接點(diǎn)就是，搜索直接查找出結(jié)果、篩選只是縮小查找范圍（并非絕對(duì)，也可以對(duì)搜索結(jié)果縮小范圍）。
在電商應(yīng)用中，如果有目標(biāo)的用戶更多使用的是搜索，那么沒有目標(biāo)的用戶更多使用的則是系統(tǒng)推薦或商品分類，不管是哪種類型的用戶，前面雖然已經(jīng)進(jìn)行過一次范圍縮減，但下一步還是逃不掉要面對(duì)的海量商品，這時(shí)，不給用戶提供選擇上的便利，用戶很可能因?yàn)g覽商品耗時(shí)過長(zhǎng)、選擇性困難等原因扭頭就走，即便離轉(zhuǎn)化僅一步之遙，也無(wú)法避免用戶流失的問題。
增加篩選功能就能很好解決這個(gè)困局，用戶通過篩選、設(shè)置接近于目標(biāo)需求的條件，縮短查找路徑，就能從海量的商品信息中快速找到符合條件的內(nèi)容，大大降低了用戶的查找成本，節(jié)省了很多查找時(shí)間，用戶體驗(yàn)得到很大程度的提升，由此可見，為什么要使用篩選，不言而喻。
1）系統(tǒng)定義篩選需求
方向性的篩選：用戶通過系統(tǒng)提供的多種類型進(jìn)行頻道切換，還會(huì)存在多少子級(jí)，可定義為一級(jí)篩選。例如訂單列表（待支付/待發(fā)貨/待收貨/待評(píng)價(jià)），優(yōu)惠券（未使用/已使用/已過期）等，用戶從已有的類型列表中選擇自己所需。
2）用戶自定義篩選需求
精細(xì)化篩選：當(dāng)系統(tǒng)已提供方向性的篩選，用戶依然可從分類篩選出的結(jié)果中進(jìn)一步細(xì)化。例如針對(duì)單個(gè)類型的商品列表自定義價(jià)格區(qū)間、發(fā)貨地、品牌...等，也可稱之為二級(jí)次篩選，相比一級(jí)篩選，其篩選的結(jié)果會(huì)更精細(xì)化，也更接近于用戶的真實(shí)需求。
（PS：系統(tǒng)定義篩選條件后，配合用戶自定義二次篩選條件以及排序功能，則更容易滿足用戶需求）
Tab式篩選條件大部分在操作前、操作中、操作后基本都會(huì)一直顯示，有橫向Tab和縱向Tab兩種，如新聞、視頻類型的應(yīng)用大多使用橫向Tab，通過將不同的內(nèi)容以大的方向、區(qū)塊進(jìn)行分類，便于用戶隨時(shí)切換、篩選出不同的內(nèi)容；縱向Tab更多則是在電商類應(yīng)用中出現(xiàn)，且會(huì)存在多個(gè)子級(jí)，例如我們?cè)诰〇|購(gòu)買「鼠標(biāo)」，則需要在tab分類中依次找到「電腦辦公>外設(shè)產(chǎn)品>鼠標(biāo)」進(jìn)行篩選。
Tab類型主要以大的維度進(jìn)行篩選，所篩選出的結(jié)果可能模糊且信息量極大，如果想要結(jié)果更加精準(zhǔn)，則需配備其他類型的控件進(jìn)行二次篩選。
操作中以蒙層的方式彈出，其他時(shí)候均為隱藏狀態(tài)。彈窗類型的篩選最大的優(yōu)點(diǎn)是占用空間小，僅需一個(gè)入口，能在有限的彈出空間中從多個(gè)維度展示篩選條件，用戶選中或自定義對(duì)應(yīng)的篩選項(xiàng)，即可快速篩選出自己想要的信息。
介于Tab式與彈窗式之間，篩選條件初始為隱藏狀態(tài)并提供一個(gè)入口。點(diǎn)擊后展開，期間不影響當(dāng)前頁(yè)面的任何其他操作且一直處于展示狀態(tài)，需經(jīng)過再次點(diǎn)擊才會(huì)將篩選條件隱藏。
基于自定義篩選條件過多，為滿足用戶個(gè)性化需求，點(diǎn)擊后會(huì)跳轉(zhuǎn)到新頁(yè)面操作多個(gè)條件進(jìn)行篩選。相比前面提到的Tab、彈窗更為復(fù)雜，對(duì)篩選的要求較高。
高級(jí)篩選適合用在顆粒度很細(xì)的場(chǎng)景，為的是避開其他視覺元素的干擾，讓用戶更專注于當(dāng)前頁(yè)面較為復(fù)雜的篩選條件，降低因受其他因素影響而出錯(cuò)的情況。例如：在選擇汽車時(shí)，需要對(duì)服務(wù)、價(jià)格、級(jí)別、排量...等各種情況作出非常細(xì)致的選擇，這時(shí)用高級(jí)篩選就再合適不過。
篩選、排序組合方式算是商品列表中的標(biāo)配了，尤其在空間資源有限的移動(dòng)端設(shè)備中，能最大化的將多個(gè)控制條件一次性展示給用戶，在篩選出結(jié)果后再使用排序功能，便于更快找到想要的商品。例如美團(tuán)、餓了么將篩選與排序控件形成組合，極大的提高了用戶篩選的效率。
單維度的篩選不管是設(shè)計(jì)還是操作都相對(duì)簡(jiǎn)單，無(wú)需操作確定/下一步按鈕，觸發(fā)篩選條件后會(huì)就會(huì)更新信息列表，大家最熟悉的訂單系統(tǒng)（待支付、待發(fā)貨、待收貨...）即是單維度篩選。
另外，單維度具備短、明、快的特點(diǎn)，為方便用戶識(shí)別，單個(gè)標(biāo)簽一般不超過5個(gè)文字，且語(yǔ)義明確，用戶不用任何思考就能快速理解。
當(dāng)產(chǎn)品中的屬性過多，使用單維度篩選不僅會(huì)降低篩選結(jié)果的精準(zhǔn)度，還可能會(huì)導(dǎo)致用戶因反復(fù)/重復(fù)無(wú)用的操作而產(chǎn)生挫敗感，已無(wú)法滿足用戶的需求。這時(shí)，需采用多維度篩選幫助用戶縮小查找范圍，讓其快速找到符合自己需求的內(nèi)容。
多維度篩選條件一般以按鈕（單選/多選）、輸入框?yàn)橹?，有些還會(huì)以滑塊來(lái)控制數(shù)據(jù)范圍。設(shè)定好篩選條件需通過重置、確認(rèn)操作按鈕，用來(lái)清空篩選條件或進(jìn)入下一步。在移動(dòng)端，因屏幕空間有限，一級(jí)篩選數(shù)量最好不要超過9個(gè)，如果太多，建議進(jìn)行整合或并入二級(jí)篩選。
在多級(jí)篩選控件中，可以把當(dāng)前篩選條件的上一級(jí)看成是篩選分類菜單，每個(gè)等級(jí)中可包含一個(gè)或多個(gè)單維度/多維度的篩選條件，移動(dòng)端最多不超過3個(gè)等級(jí)。
從表面看，多級(jí)篩選與多維度篩選其本質(zhì)是一樣的，但多級(jí)篩選會(huì)存在下一級(jí)或再下一級(jí)，而多維度會(huì)將所有篩選條件平鋪在空間中。當(dāng)單維度、多維度篩選還是無(wú)法滿足用戶需求，多等級(jí)就能作為最好的延伸。
在設(shè)計(jì)篩選之前，需要思考用戶為什么要使用篩選、在什么樣的場(chǎng)景下使用篩選、以及如何滿足用戶的心理預(yù)期等，有了清晰的用戶需求，設(shè)計(jì)出來(lái)的篩選才能更好的幫助用戶滿足其需求。
以「餓了么」用戶點(diǎn)餐為例，使用點(diǎn)餐服務(wù)的用戶類型雖然很多，不過主力還是來(lái)自于辦公室白領(lǐng)、宅男/女這兩大用戶群體，有目標(biāo)的用戶會(huì)從搜索、收藏、訂單記錄等入口直接去購(gòu)買，但絕大多數(shù)用戶因長(zhǎng)期點(diǎn)外賣的原因，“吃什么”就成了最大的問題，這時(shí)如果用戶還要“吃”，就必須得使用篩選功能，從Tab分類（模糊）到彈窗式篩選（精準(zhǔn)）再配合排序功能滿足自己的點(diǎn)餐需求，得出結(jié)論：
1）一群不知道“吃什么”的白領(lǐng)、宅男/女用戶；
2）需要使用篩選功能解決自己“吃什么”的問題；
3）問題很快得到解決后，對(duì)結(jié)果及使用體驗(yàn)非常滿意。
上面的案例可以看出，用戶想要在海量的信息中找到自身所需，從表面上看，最直接、真實(shí)的需求就是找到滿意的商品去下單。站在產(chǎn)品的角度并非如此，最應(yīng)該解決的應(yīng)該是效率的問題，這才是篩選的終極目標(biāo)，不管用戶花多長(zhǎng)時(shí)間，筆者相信都能找到想要的，但所花費(fèi)的時(shí)間成本越少，滿意度就會(huì)越高，其產(chǎn)品的可信度、使用粘性、用戶體驗(yàn)也隨之提升。
篩選并非千篇一律，不要一上場(chǎng)就來(lái)一波大眾化的篩選條件，很多APP首頁(yè)設(shè)計(jì)就是最好的例子，什么都不考慮，直接導(dǎo)航欄+輪播圖+金剛區(qū)+內(nèi)容推薦...傳統(tǒng)的一套流程走下來(lái)，結(jié)果可想而知。
設(shè)計(jì)篩選功能時(shí)，不同類型的產(chǎn)品需要根據(jù)其產(chǎn)品定位、用戶目標(biāo)以及使用場(chǎng)景來(lái)定義篩選條件，用戶需求是用來(lái)設(shè)定篩選條件范圍的決定因素。例如：購(gòu)物類產(chǎn)品需要結(jié)合商品的銷量、評(píng)價(jià)、價(jià)格及知名度等，而新聞?lì)惍a(chǎn)品側(cè)重于用戶偏好、點(diǎn)贊量、熱度值來(lái)提供篩選，方便用戶快速找到感興趣的內(nèi)容。
在滿足上述兩個(gè)條件后也不能將篩選項(xiàng)一股腦的挨個(gè)排出來(lái)，即便是在同一個(gè)頁(yè)面內(nèi)，也需要結(jié)合當(dāng)前內(nèi)容的屬性對(duì)篩選條件進(jìn)行優(yōu)先級(jí)排序，將用戶高頻使用的條件按先后順序依次排列，不重要的也可將其隱藏于某個(gè)入口。
以淘寶為例，在「手機(jī)」商品列表，篩選條件中首先看到的是品牌，其次是內(nèi)存、容量...，我相信很少人不在乎手機(jī)品牌吧；而在「鋼釘」列表中，依次是價(jià)格排序、銷量...，品牌條件隱藏在了高級(jí)篩選中，試問，如果是你購(gòu)買釘子這種實(shí)用性的商品，是在乎價(jià)格、還是品牌呢？
篩選功能旨在滿足用戶查找需求，通過縮短用戶選擇商品的范圍，節(jié)約查找時(shí)間，快速將符合條件的信息呈現(xiàn)出來(lái)，并讓用戶在這一過程中產(chǎn)生愉悅的使用體驗(yàn)，以發(fā)揮產(chǎn)品的最大價(jià)值，從而增強(qiáng)用戶的使用粘性。
至于在設(shè)計(jì)中該使用何種篩選控件則取決于用戶需求和使用場(chǎng)景，設(shè)定符合需求的篩選維度及條件，且根據(jù)內(nèi)容屬性做靈活變動(dòng)即可，切記篩選的核心需求是通過簡(jiǎn)單易用的方式來(lái)幫助用戶提高操作效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
整個(gè)報(bào)告分兩個(gè)部分，
一部分是調(diào)研概述，主要描述調(diào)研是如何進(jìn)行的，包含：用戶方法闡述，調(diào)研對(duì)象說明，用戶畫像等，簡(jiǎn)單清晰的告訴別人你數(shù)據(jù)是如何獲取的，增加后期問題及數(shù)據(jù)闡述的科學(xué)性。（還有一部分，就是關(guān)于調(diào)研涉及人員，可以在合適的時(shí)機(jī)帶一下是UED全員協(xié)作完成的整個(gè)過程的。）
另一部分是調(diào)研結(jié)論，我的描述思路是：總-分-總，先描述總結(jié)論，讓觀看報(bào)告的人對(duì)整體結(jié)論有個(gè)初步了解，然后詳細(xì)描述各模塊分結(jié)論，最后提出各模塊共性問題。
結(jié)論部分是整個(gè)報(bào)告的重點(diǎn)，所以前面的概述就簡(jiǎn)單介紹清楚就好了，不需要占太多篇幅。
調(diào)研流程，確定標(biāo)準(zhǔn)，是匯報(bào)，也是邀功，調(diào)研本身就是個(gè)繁瑣的過程，我們把過程直觀的呈現(xiàn)出來(lái)，讓老板知道我們整個(gè)調(diào)研過程，前前后后做了哪些準(zhǔn)備。付出了哪些努力，體現(xiàn)工作量的同時(shí)，也能體現(xiàn)我們的專業(yè)性，但是不是記流水賬，得有總結(jié)。
我把整個(gè)路程大體分了3個(gè)部分，第一個(gè)部分是調(diào)研前的準(zhǔn)備，第二個(gè)部分是調(diào)研，第三個(gè)部分結(jié)果闡述。結(jié)果匯報(bào)，后期工作計(jì)劃，匯報(bào)很重要，調(diào)研做得再好，你的結(jié)果無(wú)法呈現(xiàn)，問題就沒辦法結(jié)論，那就只會(huì)停留在發(fā)現(xiàn)結(jié)論。
評(píng)估緯度是為了闡述我們從哪些緯度去收集答案的，想要驗(yàn)證什么問題。
由于大部分人對(duì)調(diào)研都只是停留在問卷調(diào)查的層面，所以對(duì)樣本量的選擇有不理解，可用性測(cè)試主要是為了觀察用戶操作路徑及反饋，所以樣本量不需要太大，這個(gè)可以簡(jiǎn)單的解釋下是如何挑選用戶的。
數(shù)據(jù)整理也是匯報(bào)的一部分，一方面，材料佐證我們做過的努力和準(zhǔn)備，另一方面，數(shù)據(jù)存檔。
我們整個(gè)調(diào)研采用了錄音與錄音相結(jié)合，錄音是為了便于后期多人協(xié)作幫忙整理問題，錄屏是記錄用戶操作路徑，收集用戶使用過程中的卡頓，去挖掘卡頓原因，這是是我們做可用性測(cè)試的主要目的，這也是跟問卷調(diào)研最主要的差異。
在寫報(bào)告的過程中，我一直在想關(guān)于整體滿意度的結(jié)論，是放在第一部分還是第二部分，但是鑒于第二部分主要描述問題，所以思慮再三，還是把他放到了第一部分。
我們拿到各模塊的數(shù)據(jù)后，要怎么用著很關(guān)鍵，單個(gè)零散的數(shù)據(jù)是體現(xiàn)不出問題的，只有對(duì)比著看才能看出問題。
通過數(shù)據(jù)對(duì)比我們明顯能發(fā)現(xiàn)，付費(fèi)用戶對(duì)產(chǎn)品的整體要求要比增值服務(wù)的要求高得多，畢竟不要錢的，好不好用無(wú)所謂，好用我就用，不要用我就不用。但是如果是用戶花錢了的，那他就需要考慮，我獲取到的服務(wù)和花的錢是否成正比，這也就間接確定了我們后面問題處理的優(yōu)先級(jí)。
這里建議做個(gè)中場(chǎng)頁(yè)。
前面說過，問題描述采用的總-分-總的節(jié)奏，所以最開始描述了一下我們收集到的所有問題的概述，包含，總共多少個(gè)問題，已經(jīng)分類類型的分類占比。
這里分享一個(gè)問題整理的表格，表格跟PPT的作用不一樣，PPT是為了匯報(bào)成果，獲取支持，表格是為了后續(xù)跟進(jìn)落地，解決問題。
當(dāng)然，先把問題整理出來(lái)也是為了更好的輸出PPT。
共享文檔可以讓更多人清晰的看到問題，因?yàn)閰R報(bào)的效果比較好，老板給了明確支持，所以匯報(bào)后我們將表格發(fā)給了各個(gè)產(chǎn)品，與設(shè)計(jì)師配合，認(rèn)領(lǐng)問題，給出優(yōu)先級(jí)和排期計(jì)劃，整個(gè)過程推進(jìn)的很順利。
分結(jié)論部分，主要通過用戶體驗(yàn)地圖去描述用戶路徑，直觀闡述用戶使用過程中的情緒和痛點(diǎn)，右邊整理出來(lái)了需要重點(diǎn)關(guān)注的一些點(diǎn)。
用戶體驗(yàn)地圖主要描述的是用戶發(fā)現(xiàn)，不一定是問題，屬于啟發(fā)類，可以為后期優(yōu)化方案的輸出提供方向引導(dǎo)。
問題整理則是明確的已知問題描述。
各模塊可以根據(jù)實(shí)際情況去描述各自的問題，這里就挑了幾個(gè)典型的模塊舉例了一下，就不一一闡述了。
再來(lái)說一下，分結(jié)論講完之后，整理的共性問題。先說問題，再說涉及的模塊，體現(xiàn)問題的嚴(yán)重性。
到此，整個(gè)PPT就結(jié)束了，匯報(bào)完成后，老板就開始給各業(yè)務(wù)線下達(dá)任務(wù)了，就又回到了表格上，我們把之前的問題以界面緯度進(jìn)行整理，跟產(chǎn)品確認(rèn)優(yōu)先級(jí)和排期計(jì)劃，并與老板就排期計(jì)劃進(jìn)行了確認(rèn)，然后責(zé)任到人，目前第一輪優(yōu)化方案已經(jīng)在陸續(xù)落地中，整個(gè)發(fā)現(xiàn)問題到推進(jìn)落地的過程，還是比較順利的，
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
UI 設(shè)計(jì)師必備的一項(xiàng)基礎(chǔ)能力：規(guī)范能力。
為了避免重復(fù)造輪子，反復(fù)掉入同樣的陷阱，閱讀并熟知主流平臺(tái)的設(shè)計(jì)規(guī)范，是非常有幫助的。
本文內(nèi)容主要介紹了iOS 、Android、Ant Design的相關(guān)規(guī)范，為的是不重復(fù)累贅描述同一個(gè)知識(shí)點(diǎn)，涉及到移動(dòng)端和PC端，主要為了幫助基礎(chǔ)同學(xué)學(xué)習(xí)，適當(dāng)?shù)貏h減了一些有難度的規(guī)范。
設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守，但對(duì)這些規(guī)范應(yīng)有所了解，并融會(huì)貫通。
通過設(shè)計(jì)規(guī)范的約束，保證產(chǎn)品的色彩使用、圖標(biāo)圖形、空間、文字、頁(yè)面布局等內(nèi)容保證嚴(yán)格的一致性。
規(guī)范能延續(xù)產(chǎn)品風(fēng)格及特性，保證產(chǎn)品視覺及交互層面的統(tǒng)一，包括技術(shù)帶來(lái)的變革，增強(qiáng)用戶的認(rèn)知性，不同程度得提升用戶體驗(yàn)。
多人合作完成一個(gè)項(xiàng)目時(shí)，需要視覺規(guī)范。遵循設(shè)計(jì)規(guī)范，保證視覺統(tǒng)一、提高工作效率。
輔助技術(shù)層搭建框架及布局的規(guī)則更清晰明確，如按鈕、顏色、字體大小等，提高開發(fā)效率，確保應(yīng)用軟件最終實(shí)現(xiàn)效果與視覺設(shè)計(jì)相符合。
視覺設(shè)計(jì)規(guī)范是指對(duì)設(shè)計(jì)的具體技術(shù)要求，是設(shè)計(jì)工作的規(guī)則。包含了目標(biāo)、功能、技術(shù)指標(biāo)，以及限制條件等。
① 視覺設(shè)計(jì)規(guī)范，是量化的設(shè)計(jì)指標(biāo)，具有指導(dǎo)性、約束性。
視覺設(shè)計(jì)規(guī)范要確定?般可用性原則和審美常識(shí)下的避免犯錯(cuò)的方法，以及一旦出現(xiàn)錯(cuò)誤后的補(bǔ)救方案。規(guī)范的第一個(gè)目的是減少設(shè)計(jì)過程中出錯(cuò)的次數(shù)，針對(duì)新手設(shè)計(jì)師、第三方團(tuán)隊(duì)，可以很好地做到經(jīng)驗(yàn)傳遞，迅速了解上手。減少標(biāo)注時(shí)間，提高前端開發(fā)質(zhì)量。
② 視覺設(shè)計(jì)規(guī)范，是確定關(guān)鍵因素，要有有效性、復(fù)用性。
獲得該設(shè)計(jì)規(guī)范針對(duì)范圍內(nèi)的關(guān)鍵點(diǎn)，包括設(shè)計(jì)方向和設(shè)計(jì)元素，以通過項(xiàng)目設(shè)計(jì)的過程，達(dá)到團(tuán)隊(duì)成員的更加密切的配合效果。促進(jìn)多人協(xié)作，解決視覺不統(tǒng)?現(xiàn)象。
① 品牌規(guī)范：塑造形象以及應(yīng)用的規(guī)范。主要包含了標(biāo)識(shí)的標(biāo)準(zhǔn)制圖，配色字體等。以及常用的搭配方式。
?個(gè)企業(yè)或者?個(gè)產(chǎn)品，都有相應(yīng)的品牌視覺識(shí)別系統(tǒng)（VIS）。品牌視覺識(shí)別系統(tǒng)是視覺設(shè)計(jì)最好的參考基礎(chǔ)，既然是?種指導(dǎo)體系或者說是參考，那么也相應(yīng)地會(huì)有品牌的規(guī)范。
② 平臺(tái)設(shè)計(jì)語(yǔ)言規(guī)范：平臺(tái)理念、遵循規(guī)范的好處、某種應(yīng)用的生態(tài)。比如 Google 和 Apple 制定的規(guī)范。針對(duì)第三方的規(guī)范，主要旨在讓這些第三方的設(shè)計(jì)更兼容平臺(tái)應(yīng)用。通常制定了大的方向和規(guī)則。并且會(huì)提供很多基礎(chǔ)的設(shè)計(jì)元素和插件。
③ 產(chǎn)品業(yè)務(wù)規(guī)范：側(cè)重在產(chǎn)品設(shè)計(jì)和實(shí)現(xiàn)層，內(nèi)容清晰并且實(shí)用，標(biāo)注詳盡，方便設(shè)計(jì)師們使用。更注重個(gè)性化的部分。
https://material.io/
Material Design 規(guī)范在于統(tǒng)一 Google 多種平臺(tái)下的一致性，代表 Google 全新的體驗(yàn)。 包含豐富的色彩、空間的層次、流暢的動(dòng)效、多樣的組件。
谷歌的想法是讓谷歌平臺(tái)上的開發(fā)者掌握這個(gè)新框架，從而讓所有應(yīng)用就有統(tǒng)一的外觀，就像是蘋果向開發(fā)者提出的設(shè)計(jì)原則一樣。
從設(shè)計(jì)角度：建立共同的設(shè)計(jì)語(yǔ)言，將產(chǎn)品風(fēng)格、品牌及交互形式統(tǒng)一起來(lái)。
從使用角度：提高產(chǎn)品認(rèn)知度，提升品牌延續(xù)性及產(chǎn)品體驗(yàn)的一致性。
Material Design 是基于三維空間的設(shè)計(jì)語(yǔ)言。 包含光線、材質(zhì)、陰影。在 Material 環(huán)境中，虛擬燈光照射整個(gè)場(chǎng)景。
Material 有自身固定不變的外在特征和內(nèi)在行為邏輯 ，理解這些固有的屬性有助于實(shí)際的設(shè)計(jì)項(xiàng)目。
? 立體性
? 空間位置的唯一性
? 不可穿透
? 形狀可變化
? 沿水平方向做變化
? 不可彎曲
? 能與其他材質(zhì)對(duì)象合并
? 分裂，再合并
? 可沿任何軸上移動(dòng)
Material 借鑒了現(xiàn)實(shí)物理世界中的物質(zhì)特性，并將其運(yùn)用在虛擬三維空間中的 Material 元素上， 有利于幫助用戶理解信息層級(jí)，同時(shí)可以統(tǒng)一各應(yīng)用之間的體驗(yàn)。
投影提供了元素深度和運(yùn)動(dòng)方向的重要視覺線索；在運(yùn)動(dòng)中，投影提供了元素移動(dòng)方向及高度變化。
https://developer.apple.com/desig
iOS 設(shè)計(jì)規(guī)范逝之蘋果開發(fā)者官網(wǎng)上面的 iOS 人機(jī)交互指南（iOS Human Interface Guideline）。制作這個(gè)規(guī)范的目的是為了讓所有安裝到 iOS 系統(tǒng)的 App 都遵從某些特定的視覺特性、交互特性，以達(dá)到風(fēng)格一致的使用體驗(yàn)。另一層面，也是便于讓設(shè)計(jì)人員和開發(fā)人員能夠更好地理解 iOS 系統(tǒng)，更合理的運(yùn)用系統(tǒng)提供的功能和接口，更高效地制作出 App。
在整個(gè) iOS 系統(tǒng)中，每一種尺寸下的文本信息都應(yīng)該是易讀的，圖標(biāo)應(yīng)該是精確易懂的，每一個(gè)裝飾應(yīng)該是精巧適當(dāng)?shù)?，而且更加需要注重功能?qū)動(dòng)設(shè)計(jì)的原則。利用留白、色彩、字體、圖像和界面元素巧妙的突出重要內(nèi)容并傳達(dá)其不同的交互性。
在簡(jiǎn)潔美觀的界面中清晰流暢的動(dòng)畫效果可以幫助用戶更容易理解內(nèi)容并與之進(jìn)行交互，而不會(huì)對(duì)用戶的操作產(chǎn)生干擾。內(nèi)容全屏顯示時(shí)，半透明或者模糊處理的方式可以提示用戶更多的內(nèi)容。減少使用邊框，漸變及陰影可以使界面輕 量化，突出顯示內(nèi)容（內(nèi)容優(yōu)先）。
不同的視覺層次和逼真生動(dòng)的動(dòng)畫效果 可以表達(dá)界面更深層次的內(nèi)容，賦予了界面活力，使用戶對(duì)界面內(nèi)容更容易理解。易于發(fā)現(xiàn)并易于觸摸的元素可以提升用戶體驗(yàn)的愉悅感，用戶在操作功能時(shí)不至于迷失。當(dāng)用戶在瀏覽內(nèi)容時(shí)，流暢的轉(zhuǎn)場(chǎng)效果提供了一種縱深感。
為了最大限度地提高影響力和覆蓋面，在應(yīng)用設(shè)計(jì)規(guī)范時(shí)應(yīng)牢記以下原則：
（1）審美完整（Aesthetic Integrity）
審美完整性體現(xiàn)了 App 的外觀和行為與其功能的整合程度。例如，一個(gè)幫助用戶執(zhí)行嚴(yán)肅任務(wù)的 App 可以通過微妙、不顯眼的圖形、標(biāo)準(zhǔn)控件和可預(yù)測(cè)的行為來(lái)保持他們的專注。
另一方面，沉浸式的 App，比如游戲 App等，就可以提供吸引人的外觀，傳遞樂趣和刺激感，同時(shí)鼓勵(lì)發(fā)現(xiàn)。
系統(tǒng)提供的界面元素、眾所周知的圖標(biāo)、標(biāo)準(zhǔn)的文本樣式和統(tǒng)一的術(shù)語(yǔ)來(lái)實(shí)現(xiàn)熟悉的標(biāo)準(zhǔn)和范例可以使得一個(gè) App 的設(shè)計(jì)符合一致性。
易用性指的是用戶可以理解屏幕的內(nèi)容，用手勢(shì)、觸動(dòng)屏幕等動(dòng)作直接操作，并且，用戶通過直接操縱，可以看到他們的行動(dòng)的直接的、可見的結(jié)果。
反饋指對(duì)用戶的行動(dòng)進(jìn)行了確認(rèn)，并且通過顯示行動(dòng)結(jié)果以使用戶了解情況。iOS 系統(tǒng)的 App 要為用戶的每一項(xiàng)操作提供可感知的反饋。如：輕觸時(shí)會(huì)突出顯示交互元素；進(jìn)度指示器會(huì)傳達(dá)長(zhǎng)時(shí)間運(yùn)行的項(xiàng)目的狀態(tài)；動(dòng)畫和音效有助于闡明操作的結(jié)果。
當(dāng)一個(gè) App 中的虛擬元素以及動(dòng)作都是用戶對(duì)熟悉事物的隱喻的時(shí)候（包括現(xiàn)實(shí)世界和數(shù)字世界），用戶會(huì)學(xué)習(xí)的更快。比如，用戶移動(dòng)視圖來(lái)查看更多內(nèi)容；拖拽內(nèi)容；切換開關(guān)、移動(dòng)滑塊并且直接滾動(dòng)來(lái)選取值；甚至可以像翻書或雜志一樣輕快的翻頁(yè)。
在整個(gè) iOS 中，用戶是掌控者，而不是 App，App可以建議一個(gè)行動(dòng)方案或者警示危險(xiǎn)后果，但 App 不能替用戶做決策。
好的 App 可以在用戶授權(quán)和避免不必要的結(jié)果之間找到正確的平衡。
App 可以通過交互元素，確認(rèn)、取消的提醒以使得用戶覺得自己在控制。
https://ant.design/index-cn
Ant Design服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系，常用于PC端設(shè)計(jì)規(guī)范，基于「自然」、「確定性」、「意義感」、「生長(zhǎng)性」四大設(shè)計(jì)價(jià)值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。
1.Ant Design平臺(tái)的設(shè)計(jì)原則
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然。
正如「格式塔學(xué)派」中的連續(xù)律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對(duì)象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線。在界面設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。
對(duì)比是增加視覺效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識(shí)別關(guān)鍵信息。
相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識(shí)別出這些元素之間的關(guān)聯(lián)性。重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計(jì)要素、設(shè)計(jì)風(fēng)格，某種格式、空間關(guān)系等。
正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。
eg：不要為了編輯內(nèi)容而打開另一個(gè)頁(yè)面，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。
能在這個(gè)頁(yè)面解決的問題，就不要去其它頁(yè)面解決，因?yàn)槿魏雾?yè)面刷新和跳轉(zhuǎn)都會(huì)引起變化盲視（Change Blindness），導(dǎo)致用戶心流（Flow）被打斷。頻繁的頁(yè)面刷新和跳轉(zhuǎn)，就像在看戲時(shí)，演員說完一行臺(tái)詞就安排一次謝幕一樣。
根據(jù)費(fèi)茨法則（Fitts's Law）所描述的，如果用戶鼠標(biāo)移動(dòng)距離越少、對(duì)象相對(duì)目標(biāo)越大，那么用戶越容易操作。通過運(yùn)用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡(jiǎn)化交互。
很多富交互模式（eg：「拖放」、「行內(nèi)編輯」、「上下文工具」）都有一個(gè)共同問題，就是缺少易發(fā)現(xiàn)性。所以「提供邀請(qǐng)」是成功完成人機(jī)交互的關(guān)鍵所在。
邀請(qǐng)就是引導(dǎo)用戶進(jìn)入下一個(gè)交互層次的提醒和暗示，通常包括意符（eg：實(shí)時(shí)的提示信息）和可供性，以表明在下一個(gè)界面可以做什么。當(dāng)可供性中可感知的部分（Perceived Affordance）表現(xiàn)為意符時(shí)，人機(jī)交互的過程往往更加自然、順暢。
人腦灰質(zhì)（Gray Matter）會(huì)對(duì)動(dòng)態(tài)的事物（eg：移動(dòng)、形變、色變等）保持敏感。在界面中，適當(dāng)?shù)募尤胍恍┻^渡效果，能讓界面保持生動(dòng)，同時(shí)也能增強(qiáng)用戶和界面的溝通。
「提供邀請(qǐng)」的強(qiáng)大體現(xiàn)在 交互之前 給出反饋，解決易發(fā)現(xiàn)性問題；「巧用過渡」的有用體現(xiàn)在它能夠在 交互期間 為用戶提供視覺反饋；「即時(shí)反應(yīng)」的重要性體現(xiàn)在 交互之后 立即給出反饋。
就像「牛頓第三定律」所描述作用力和反作用一樣，用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個(gè)對(duì)應(yīng)的反饋，同時(shí)輸入量級(jí)越大、重要性越高，那么反饋量級(jí)越大、重要性越高。
雖然反饋太多（準(zhǔn)確的說，錯(cuò)誤的反饋太多）是一個(gè)問題，但是反饋太少甚至沒有反饋的系統(tǒng)，則讓人感覺遲鈍和笨拙，用戶體驗(yàn)更差。
當(dāng)然，這并不代表了解這些就能做出優(yōu)秀的設(shè)計(jì)方案了，英文水平比較好的同學(xué)建議直接讀原文，直接從 Material Design 和 iOS 的官網(wǎng)進(jìn)行規(guī)范學(xué)習(xí)，效果更佳。當(dāng)然如果英文水平有限，網(wǎng)上也有很多譯版方便大家閱讀。
而關(guān)于Ant Design的設(shè)計(jì)規(guī)范，可以去官網(wǎng)查閱更多的詳細(xì)內(nèi)容，但PC端的設(shè)計(jì)規(guī)范平臺(tái)還有很多，字節(jié)、騰訊等設(shè)計(jì)官網(wǎng)都有。
記得對(duì)于規(guī)范不需要死記硬背，練多了自然能夠記住。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
好的配色不但能傳達(dá)出鮮明的產(chǎn)品主題調(diào)性，并且能為用戶的視覺行為產(chǎn)生引導(dǎo)作用，構(gòu)成良好的用戶體驗(yàn)。
對(duì)于UI設(shè)計(jì)師來(lái)說，不但要考慮顏色在給予用戶的感受上的作用，同樣應(yīng)當(dāng)考慮其實(shí)用性，避免重形式而輕內(nèi)容的問題發(fā)生。
所以本文的內(nèi)容是基于色彩的基礎(chǔ)知識(shí)，為大家介紹 UI 設(shè)計(jì)師常用的配色方案、配色流程，當(dāng)然也包括其他視覺設(shè)計(jì)工作者在工作中要用到的基礎(chǔ)色彩常識(shí)。
顏色或色彩是通過“眼、腦和我們的生活經(jīng)驗(yàn)”所產(chǎn)生的?種對(duì)“光”的視覺效應(yīng)。但是人對(duì)顏色的感覺不僅僅由“光”的物理性質(zhì)所決定，還包含著“心理”等許多因素，比如人類對(duì)顏色的感覺往往受到周圍顏色的影響。有時(shí)人們也將物質(zhì)產(chǎn)生不同顏色的物理特性直接稱為顏色。
顏色的應(yīng)用在 UI 設(shè)計(jì)師的工作中是非常關(guān)鍵的一環(huán)。
（1）色相
是指色彩的相貌，色相被用來(lái)區(qū)分顏色，根據(jù)光的不同波長(zhǎng)，色彩具有紅色、黃色或綠色等性質(zhì)，這被稱之為色相。
（2）明度
是色彩從亮到暗的明暗程度，黑色的絕對(duì)明度被定義為 0 （理想黑）,而白色的絕對(duì)明度被定義為 100 （理想白），其他系列灰色則介于兩者之間。
（3）純度
純度通常是指色彩的鮮艷度。從科學(xué)的角度看，一種顏色的鮮艷度取決于這一色相發(fā)射光的單一程度。色彩的純度強(qiáng)弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。
（1）HSB ：在 HSB 模式中，H（Hues）表示色相，S（Saturation）表示飽和度，B（Brightness）表示亮度。
（2）RGB ：三原色紅、綠、藍(lán)疊加最終為白色（加色模式）。常用于光源光情況下，例如顯示屏幕。
（3）CMYK ：三基色洋紅、黃、青疊加最終為黑色（減色模式）。常用于反射光情況下，例如印刷。
（4）LAB ：LAB 色彩模型是由亮度（L）和有關(guān)色彩的 A，B 三個(gè)要素組成。L 表示亮度（Luminosity），A 表示從洋紅色至綠色的范圍，B表示從黃色至藍(lán)色的范圍。
色彩心理作用是指色彩作用與人的情感所產(chǎn)生的心理感受與綜合性生理感覺作用。它影響著人們的記憶、感知、聯(lián)想和情感，刺激著視覺，在設(shè)計(jì)中有著不可忽視的作用。色彩的直接心理作用對(duì)設(shè)計(jì)有著重大的影響，關(guān)系到對(duì)用戶心理的把握。
色彩心理作用包括色彩的直接心理效應(yīng)和間接心理效應(yīng)。
（1）直接心理
色彩的直接心理效應(yīng)是色彩本身的屬性即色相、明度、純度等感官印象造成的心理感受。它包括很多不同的心理效應(yīng)，一般可分為 9 類，即色彩的興奮感和沉靜感、色彩的冷暖感、色彩的輕重感、色彩的華麗感和樸素感、色彩的明快和陰郁感、色彩的軟硬感、色彩的明暗感和色彩的空間感。
（2）間接心理
色彩的間接心理效應(yīng)是由色彩的直觀感受反映到大腦所產(chǎn)生的聯(lián)想效果。在設(shè)計(jì)中常常利用色彩間接心理效應(yīng)來(lái)傳達(dá)廣告信息。
1）灰?：正式、重?、成熟
2）棕?：保守、親切、穩(wěn)定
3）粉?：?性、天真、?春
4）??：注意、提醒、快樂
5）紫?：奢華、浪漫、創(chuàng)意
是一種充滿神秘的顏色，在自然界中較少見到，所以被引申為象征高貴的色彩。
在UI設(shè)計(jì)中的應(yīng)用場(chǎng)景為紫+粉常用于女性化的產(chǎn)品調(diào)性。
6）??：新鮮、清潔、健康
白色常常被認(rèn)為是無(wú)色”即不是色彩。
在UI設(shè)計(jì)中的應(yīng)用場(chǎng)景，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。
圖源-dribbble
7）??：正式、權(quán)?、?練
是一種充滿質(zhì)感的顏色，它是所有色彩中最有力量的，能很快吸引用戶的注意力。
在UI中的應(yīng)用場(chǎng)景，常和其他色彩百搭，比如黑色+金色，黑色+紅色等等，以及現(xiàn)在UI設(shè)計(jì)中的暗黑模式。
圖源-dribbble
8）藍(lán)?：信任、舒適、放松
純凈的藍(lán)色通常讓人聯(lián)想到海洋和天空，讓人的內(nèi)心感到平和，有助于人的頭腦變得冷靜，減少工作中的煩躁和沖動(dòng)。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，常用于工具、商務(wù)、科技類等產(chǎn)品，B端設(shè)計(jì)也經(jīng)常運(yùn)用。
圖源-dribbble
9）綠?：??、?然、成功
綠色是大自然中最常見的顏色，代表著健康、生命、青春、寧?kù)o、自然、和平、安全、舒適，是一種充滿希望的顏色。
在設(shè)計(jì)中的應(yīng)用場(chǎng)景，健康、醫(yī)療、運(yùn)動(dòng)及少兒類產(chǎn)品使用較多，一般在軟件中表示安全、成功。
圖源-dribbble
10）橙?：信?、能量、樂觀
它烘托出的活躍氣氛沒有危險(xiǎn)的感覺，反而是一種友好。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，電商、金融以及服務(wù)類的產(chǎn)品使用較多，比如淘寶。
圖源-dribbble
11）紅?：危險(xiǎn)、重要、激情
最醒目和強(qiáng)勢(shì)的顏色，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，紅色常用于電商、金融、服務(wù)等行業(yè)。紅色也最能烘托氣氛，在中國(guó)傳統(tǒng)節(jié)日里都使用熱鬧的紅色來(lái)裝飾，比如新年春節(jié)階段。同時(shí)紅色也代表了警示、告誡，所以在界面設(shè)計(jì)中常用紅色的文字和按鈕來(lái)警示用戶慎重操作。
圖源-dribbble
5.UI中的色彩
Ul配色一般包含主色和輔助色、強(qiáng)調(diào)色、中性色。
主色通常與品牌色一致，輔助色一般選擇與主色色調(diào)一致且能拉開層次的顏色，強(qiáng)調(diào)色選擇與主色相對(duì)立的互補(bǔ)色。
中性色主要用于界面中的線條和背景
圖源-dribbble
每?種色彩都有其自身的特質(zhì)，而這?特性的發(fā)揮，還需要依賴于色彩在整個(gè)配色時(shí)所處的位置、面積等，即色彩與其他色彩所形成的秩序。
顏色同樣有主體，和輔助。確定主體色系，有助于頁(yè)面整體基調(diào)的把控。在實(shí)際的操作過程中，顏色要適量，通常2-3種就可以了。多了往往較亂（并非絕對(duì)）。
單色系配色法：同?個(gè)色系內(nèi)根據(jù)顏色的明度和純度不同去做區(qū)分，形成層級(jí)關(guān)系、對(duì)比關(guān)
系的配色方法。例如：深藍(lán)、天藍(lán)、淺藍(lán)這樣的層級(jí)變化。
鄰近色配色法：相鄰的色系進(jìn)行搭配。例如：黃色、橙色、紅色。
對(duì)比色配色法：對(duì)比的色系進(jìn)行搭配。例如：黃色、紫色。
一套 App 配色基本由背景色、主題色、輔助色、點(diǎn)睛色 4 種色調(diào)組成。
flatuicolors （https://flatuicolors.com）
提供多款扁平?彩配??案，可以根據(jù) UI 設(shè)計(jì)的需要選擇使?。
Paletton （http://paletton.com）
是?個(gè)在線的?環(huán)配??具，我們可以根據(jù)需要選擇單?、相近?、對(duì)??等規(guī)則來(lái)查看配?，也可以實(shí)時(shí)查看其在??中的搭配效果。
uigradients（https://uigradients.com/）
UIgradients 以分享美麗漸變?彩為主的分享站，??接近上百種漸變配??案，設(shè)計(jì)師可根據(jù)???格來(lái)選擇搭配，此外我們還能直接獲得對(duì)應(yīng)漸變配?的CSS代碼。
webgradients（https://webgradients.com/）
富有超多好看漸變漸變配?的?站，只需要復(fù)制?彩編號(hào)填充漸變，或者直接下載PSD，Sketch，圖?，CSS代碼。
CoolHue（https://webkul.github.io/coolhue/）
富有超多好看漸變配?的?站，可安裝Sketch 插件，或者直接下載圖?和CSS代碼。
中國(guó)色網(wǎng)站（http://zhongguose.com/）
只有中國(guó)的顏色, 才能這般,美得不可方物
Adobe Color【工具】（https://color.adobe.com/zh/create/color-wheel）
Adobe色輪配色工具，可以選擇色彩模式與調(diào)和規(guī)則
ColorSpace（https://mycolor.space/）
功能強(qiáng)大的漸變色在線生成器，支持單色、雙色，甚至三色漸變。
色彩是設(shè)計(jì)中的重要組成部分，不同的色彩傳遞不同的情感和態(tài)度給用戶，這也是UI設(shè)計(jì)規(guī)范中需要注意的部分，即做到色彩統(tǒng)一、色彩平衡。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前言
圖標(biāo)是用戶界面中重要的組成部分之一。它是一種表示命令、內(nèi)容并揭示功能背后含義的視覺語(yǔ)言。
你設(shè)計(jì)的圖標(biāo)應(yīng)該可以被用戶立即理解和識(shí)別。
如何在你的產(chǎn)品中設(shè)計(jì)和使用圖標(biāo)？怎樣給品牌帶來(lái)獨(dú)特的感覺？我的以下幾點(diǎn)建議建議可以來(lái)幫助你設(shè)計(jì)更棒的圖標(biāo)。
技巧1 -設(shè)置網(wǎng)格
你永遠(yuǎn)不會(huì)創(chuàng)建單獨(dú)一個(gè)的圖標(biāo)，因?yàn)閳D標(biāo)總是一套的。為了讓你的圖標(biāo)具備統(tǒng)一性，你需要一個(gè)網(wǎng)格。
定義安全區(qū)域并設(shè)置邊框。使用生成的網(wǎng)格作為模板，以固化所有圖標(biāo)的比例和大小。
技巧2 -保持一致
在設(shè)計(jì)一組圖標(biāo)時(shí)，使用相同的線寬、角半徑和填充樣式。這將確保你的圖標(biāo)看起來(lái)品牌統(tǒng)一和更容易識(shí)別。
例如：線寬 - 2px，角半徑 - 3px;
Icon set from Super Basic Icons.
技巧3：表達(dá)清楚
在圖標(biāo)設(shè)計(jì)中，少即是多。使用清晰的隱喻和點(diǎn)到為止的細(xì)節(jié)，使每個(gè)圖標(biāo)易于識(shí)別和理解。
技巧4 -使用相等的間距
在你的圖標(biāo)元素之間使用相等的間距，使你的一整套圖標(biāo)看起來(lái)和諧。
你可以通過按住 Figma、Sketch 或 XD 中的 ALT 鍵來(lái)計(jì)算向量線之間的距離。
技巧5 -視覺矯正
基于視覺中心對(duì)齊圖標(biāo)元素，平衡視覺重量。
技巧6 -填充空間
旋轉(zhuǎn)局促的圖標(biāo)，充分利用空間來(lái)獲得更好的可讀性。
技巧7 -組合樣式
使用填充和輪廓樣式來(lái)描述界面狀態(tài)，幫助用戶找到正確的圖標(biāo)或按鈕。
技巧8-便捷的工具
工具
Icons8.com
iconfinder.com
flaticon.com
thenouproject.com
資源
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
每個(gè)人都是從初學(xué)者開始他的設(shè)計(jì)之旅的，你的審美眼光也要像其他事物一樣經(jīng)過訓(xùn)練?？?Dribbble 的設(shè)計(jì)可能是非常有幫助的，但有時(shí)候你只是欣賞設(shè)計(jì)，卻不明白為什么。
沒有靈感、沒有優(yōu)質(zhì)的設(shè)計(jì)素材、不知道要設(shè)計(jì)什么，所有這些原因都可能會(huì)拖慢你的速度，讓你感到沮喪。所以現(xiàn)在我將和你分享 10 個(gè)極其簡(jiǎn)單的設(shè)計(jì)技巧，幫你改善你的設(shè)計(jì)作品，而且不需要額外學(xué)習(xí)新的技能哦。
請(qǐng)記住，我提供的不是必修遵守的規(guī)則，而是大多數(shù)時(shí)候都有效的技巧。
如果你沒有好的想法或優(yōu)質(zhì)的設(shè)計(jì)素材，那么你可以把你的作品去色。你可以通過正確的構(gòu)圖獲得野獸派的設(shè)計(jì)。這么做有助于你理解平衡、留白，以及如何使用文字和幾何圖形。
讓我們來(lái)看一個(gè)案例：
我自己發(fā)明了一套測(cè)試畫面的方法：用簡(jiǎn)單的幾何圖形代表畫面中內(nèi)容，然后通過比較頁(yè)面中色塊的面積來(lái)確定頁(yè)面是否平衡。當(dāng)你在自己的作品中使用這個(gè)方法時(shí)，會(huì)得到下圖這樣的效果。
通常你需要通過視覺進(jìn)行判斷，但這里我們可以做一些簡(jiǎn)單的計(jì)算幫助理解：
左邊區(qū)域的黑色矩形加起來(lái)約為：
(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX
而右邊的大長(zhǎng)方形數(shù)約為：
446×446=198916PX
他們只是相差了一點(diǎn)點(diǎn) 3.9558%。
注意：圓形比長(zhǎng)方形小，但由于相當(dāng)銳利和細(xì)致，使它更吸引人的注意。
我在設(shè)計(jì)之前沒有計(jì)算過。經(jīng)過多年的練習(xí)，這只是成為自動(dòng)的，因?yàn)槟愕难劬?huì)感覺到錯(cuò)誤的平衡。
我之前帶來(lái)的例子是在灰色背景上呈現(xiàn)的，但你可以嘗試不同的東西。這有助于為你的設(shè)計(jì)創(chuàng)造一些景深。但要注意，在一個(gè)真正的網(wǎng)站中，你不會(huì)有那么多額外的空間，所以這只是一個(gè)展示技巧!
不要再整天浪費(fèi)時(shí)間去實(shí)驗(yàn)字體大小。一般情況下以下字體大小是合適的：段落使用 14-18 pt 左右，副標(biāo)題使用 24-36 pt，標(biāo)題使用 96-144 pt 左右。Figma 的默認(rèn)大小對(duì)于排版來(lái)說是相當(dāng)不錯(cuò)的。雖然它們看起來(lái)會(huì)很小，但這是正常的。
有些字體相對(duì)于其他字體會(huì)偏大或者偏小，所以你應(yīng)該以標(biāo)準(zhǔn)字體為基礎(chǔ)。比如 Roboto：如果字體大小接近 14-18 pt 的 Roboto，那就非常適合用于段落。
如果你有一些具有透明區(qū)域的圖片，你可以利用它們來(lái)創(chuàng)建一些分層。
在網(wǎng)頁(yè)開發(fā)中，CSS 代碼有一個(gè) Z-index 的參數(shù)，可以用來(lái)把圖像帶到其他項(xiàng)目的后面或前面，給人一種立體的錯(cuò)覺。
讓我們看看我的一個(gè)簡(jiǎn)單的設(shè)計(jì)，其中就利用了這種技巧。
鮮艷的色彩雖然美好，但往往會(huì)導(dǎo)致畫面過于刺激?，F(xiàn)在非常流行在設(shè)計(jì)中使用更加柔和的色彩，你可以在下圖拾色器中紅色標(biāo)記區(qū)域內(nèi)選取更柔和的顏色。
在我看來(lái)，多一些留白要比沒有留白更好。雜亂無(wú)章的設(shè)計(jì)就通常都很糟。你可以通過以下方式獲得呼吸感。
1、保持大量的背景可見。
2、用間距避免文字墻效果。
3、使用不會(huì)吸引太多注意力的圖片。
4、精煉你的文字。
通常當(dāng)我們想到設(shè)計(jì)的時(shí)候，我們會(huì)想到干凈、流暢、清晰等概念。但完美就存在于缺陷之中。
在你的設(shè)計(jì)中，當(dāng)你想給自己的網(wǎng)站一個(gè)優(yōu)雅或藝術(shù)的外觀，噪點(diǎn)是一個(gè)強(qiáng)有力的朋友。
此外，應(yīng)用微妙的噪點(diǎn)讓你的構(gòu)圖看起來(lái)像電影一樣，這對(duì)視頻和動(dòng)態(tài)網(wǎng)站來(lái)說效果非常好。
你可以通過使用 Photoshop，在白色背景上創(chuàng)建一個(gè) 2-4 K 的高斯模糊，然后將其應(yīng)用在你的畫板上，從而獲得一些噪點(diǎn)紋理。
我們電腦上預(yù)裝的字體通常都不是很好的選擇。要想找到更好的字體，可以開始上網(wǎng)沖浪或看 youtube 視頻，了解精彩的字體和字庫(kù)。
但要注意：很多字體都不是免費(fèi)的，在沒有授權(quán)的情況下使用它們可能會(huì)給你帶來(lái)麻煩。不過不用擔(dān)心，大多數(shù)的字體都有免費(fèi)版本!
雖然有大量不同的字體和風(fēng)格，但一般來(lái)說，我把它們分為三大類。
1、古典字體
2、現(xiàn)代字體
3、正文字體
通常情況下，前兩種也可以用在正文中，只是字體的設(shè)計(jì)者希望你把它們當(dāng)作標(biāo)題來(lái)使用。
古典字體包括Abril Fatface、Playfair Display、Volux、Chalga和許多其他字體。
現(xiàn)代字體包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....
這可能是最難利用的技巧，但如果應(yīng)用得當(dāng)，畫面會(huì)非常有沖擊力。
利用幾何圖形有助于強(qiáng)化布局中的概念和秩序，甚至不需要使用額外的圖像。找到合適的幾何圖形是很難的。目前我還是不能很好地掌握它。
但是有一個(gè)訣竅是，把你的文案中的字母、數(shù)字和標(biāo)題當(dāng)作幾何圖形：把它們做成巨大但微妙的形狀，或者用一些特定的字母作為形狀（字母 A 就很好用）。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
Logo 勝過千言萬(wàn)語(yǔ)。一個(gè)偉大的 Logo 不用一個(gè)字就能講述一個(gè)故事。
最近，許多公司的商標(biāo)都經(jīng)歷了一次轉(zhuǎn)變。從通用汽車（GM）這樣的汽車公司，到漢堡王（Burger King）這樣的餐廳，再到品客（Pringles）這樣的食品公司，很明顯，許多公司都在嘗試重新設(shè)計(jì)商標(biāo)。
然而，在重新設(shè)計(jì)的同時(shí)，也有反對(duì)聲音。反對(duì)改變的聲音是向來(lái)常見，然而不喜歡某一個(gè)特定的設(shè)計(jì)語(yǔ)言卻比較鮮見的，那么到底發(fā)生了什么?
通用汽車（General Motors）改變了自 1964 年以來(lái)一直使用的標(biāo)志是廣為周知的，它用以保證電動(dòng)汽車的發(fā)展。Dezeen /通用汽車
為什么要修復(fù)一些沒有損壞的東西，為什么要改變一個(gè)已經(jīng)受到喜愛的標(biāo)志?這是每個(gè)人都會(huì)問的問題，每當(dāng)一個(gè)新的標(biāo)志出現(xiàn)，我們就必須考慮到一個(gè)標(biāo)志的重新設(shè)計(jì)是不便宜的，往往會(huì)花費(fèi)數(shù)百萬(wàn)美元和多年的研究。乍一看，一家公司這么做毫無(wú)意義，然而每隔幾年就會(huì)有很多公司這么做。
雖然我不是平面設(shè)計(jì)師，但我個(gè)人認(rèn)為 Logo 和品牌的重新設(shè)計(jì)有兩個(gè)主要驅(qū)動(dòng)因素：技術(shù)和市場(chǎng)。
技術(shù)對(duì)設(shè)計(jì)影響很大，它既支持又限制了它。計(jì)算機(jī)硬件和軟件的采用和改進(jìn)等技術(shù)進(jìn)步為設(shè)計(jì)師們提供了嘗試新事物的機(jī)會(huì)。技術(shù)對(duì)設(shè)計(jì)也會(huì)有限制，比如有限的屏幕尺寸或能量消耗，但同時(shí)也會(huì)驅(qū)使設(shè)計(jì)師發(fā)揮創(chuàng)造性。雖然技術(shù)可以影響設(shè)計(jì)決策，但市場(chǎng)(在某種程度上可以等同于消費(fèi)者)才是主要的決策者。
市場(chǎng)，無(wú)論是企業(yè)客戶還是目標(biāo)消費(fèi)者，在設(shè)計(jì)決策方面自然是最高的權(quán)威。如果一個(gè)公司覺得自己不能從中獲益(畢竟 Logo 的設(shè)計(jì)并不便宜)，重新設(shè)計(jì) Logo 就很少發(fā)生，即使這可能會(huì)引起現(xiàn)有消費(fèi)者的強(qiáng)烈反對(duì)和抵制。重新設(shè)計(jì) Logo 可以是一個(gè)新的開始：向消費(fèi)者傳達(dá)他們對(duì)未來(lái)的期望。
動(dòng)物星球的標(biāo)志變化過程，它隨著每一次迭代變得越來(lái)越簡(jiǎn)單。
所以讓我們來(lái)談?wù)勥@個(gè)非常顯而易見，而又容易被忽略的問題。從 iOS 7 到純果樂——極簡(jiǎn)、極簡(jiǎn)或扁平化的平面設(shè)計(jì)風(fēng)格已經(jīng)興起近十年了。我們已經(jīng)討論了技術(shù)和市場(chǎng)是如何決定趨勢(shì)的，但是對(duì)于我們今天所面臨的當(dāng)前趨勢(shì)：以最小的、扁平的、最簡(jiǎn)單的標(biāo)志重新設(shè)計(jì)，它又說明了什么呢?
技術(shù)的訴求——對(duì)在線展示的日益增長(zhǎng)的需求是公司簡(jiǎn)化其標(biāo)識(shí)的主要原因?？焖僭鲩L(zhǎng)的移動(dòng)設(shè)備使用率導(dǎo)致高度詳細(xì)、高度程式化的徽標(biāo)設(shè)計(jì)的舊設(shè)計(jì)方案越來(lái)越難以實(shí)現(xiàn)。在可伸縮性和文件大小等方面，矢量的圖像變得更加流行，與柵格圖像相比，它們更容易創(chuàng)建、操作和編輯。像 Airbnb、Animal Planet 和谷歌就采用無(wú)襯線和塊狀字體的商標(biāo)，之所以這樣做，是因?yàn)檫@樣在手機(jī)等設(shè)備上更容易閱讀。
市場(chǎng)需求——企業(yè)和消費(fèi)者似乎都支持（當(dāng)然并不是沒有阻力），應(yīng)該走更簡(jiǎn)單的道路。更簡(jiǎn)單的平面設(shè)計(jì)意味著它更容易被廣大用戶理解和識(shí)別。許多扁平化設(shè)計(jì)的支持者認(rèn)為有效、友好、干凈和中性的特征是扁平化風(fēng)格的優(yōu)點(diǎn)。誰(shuí)還記得在 2000 年代，Windows Aero 的頂級(jí)設(shè)計(jì)是多么的混亂不堪?時(shí)代當(dāng)然變了。
當(dāng)平面設(shè)計(jì)成功時(shí)，就可以創(chuàng)造出華麗而有意義的標(biāo)志，它們經(jīng)得起時(shí)間的考驗(yàn)；IBM 和 Shell 的標(biāo)志就是我最喜歡的幾個(gè)。但是，盡量簡(jiǎn)單更容易創(chuàng)造出一些最好的標(biāo)志一樣，也很容易失去目標(biāo)。
是不是過于簡(jiǎn)單了？
最近十年間，平面和極簡(jiǎn)主義設(shè)計(jì)的標(biāo)志重新設(shè)計(jì)正在興起。
在最近的十年里，很多公司一直在用扁平化風(fēng)格來(lái)重新設(shè)計(jì) Logo，Logo 隨著時(shí)間的推移變得越來(lái)越簡(jiǎn)單，盡管在線社區(qū)的用戶們的感受各不相同。
任何重新設(shè)計(jì)都會(huì)遇到各種各樣的反對(duì)。沃爾什（Walsh）、凱倫?溫特奇（Karen Winterich）和維卡斯?米塔爾（Vikas Mittal）的一項(xiàng)研究顯示，消費(fèi)者對(duì)品牌(品牌態(tài)度)的認(rèn)知，在消費(fèi)者對(duì)重新設(shè)計(jì)的看法中扮演著重要角色。
2003年，像蘋果這樣擁有高品牌忠誠(chéng)度的公司決定更換 Logo，在宣布后數(shù)小時(shí)內(nèi)就收到了網(wǎng)上請(qǐng)?jiān)笗@一點(diǎn)就很明顯。沃爾什、溫特奇和米塔爾認(rèn)為，商標(biāo)的重新設(shè)計(jì)擾亂了已經(jīng)形成的相對(duì)穩(wěn)定的關(guān)系，消費(fèi)者顯然對(duì)此感到不安。
一位推特用戶對(duì) firefox 徽標(biāo)的改變非常憤怒，盡管它并沒有被實(shí)現(xiàn)。——UnfunnyLuigi
有一些被重新設(shè)計(jì)的 Logo，比如漢堡王卻受到了熱烈歡迎，而其他的，例如火狐和動(dòng)物星球則受到了嚴(yán)厲的批評(píng)。漢堡王不僅采用了更簡(jiǎn)單的設(shè)計(jì)，還抓住了人們的懷舊情緒，因此比動(dòng)物星球（Animal Planet）這樣的 Logo 更容易被接受。
需要指出的是，扁平化的 Logo 設(shè)計(jì)本身并沒有什么錯(cuò)，許多 Logo，如可口可樂、IBM 和殼牌，都由于其簡(jiǎn)單易記的特性成為永恒的杰作。導(dǎo)致人們強(qiáng)烈反對(duì)扁平化 Logo 設(shè)計(jì)的原因可能是人們對(duì)企業(yè)和企業(yè)文化越來(lái)越反感和憤世嫉俗。像企業(yè)藝術(shù)風(fēng)格、企業(yè)孟菲斯和全球同質(zhì)化等概念通常會(huì)被指責(zé)為“過度簡(jiǎn)化”標(biāo)識(shí)設(shè)計(jì)浪潮的罪魁禍?zhǔn)祝驗(yàn)楹芏嘣O(shè)計(jì)決策都是冷血的，缺乏人文特征的，讓人感覺不自然或虛假。
不喜歡過于簡(jiǎn)化的商標(biāo)已經(jīng)成為網(wǎng)絡(luò)熱點(diǎn)，尤其是在YouTube上?！猂evified
由于許多內(nèi)容創(chuàng)造者和互聯(lián)網(wǎng)熱點(diǎn)已經(jīng)導(dǎo)致了文化抵制現(xiàn)象出現(xiàn)，人們不再只是隨意在社交媒體上發(fā)泄不滿；人們把這些過度簡(jiǎn)化的商標(biāo)描繪成冷酷無(wú)情的科學(xué)實(shí)驗(yàn)的結(jié)果，有些人甚至證明了如果這種趨勢(shì)繼續(xù)下去，過度簡(jiǎn)化的商標(biāo)會(huì)導(dǎo)致什么，它們會(huì)創(chuàng)造出一個(gè)乏味的世界，每個(gè)商標(biāo)都是一樣的，沒有個(gè)性。
Youtube 用戶 Solar Sands 在他的視頻文章《為什么企業(yè)的藝術(shù)風(fēng)格讓人覺得非常虛假》( Why do corporate art styles feel fake )中指出，許多公司，尤其是大型科技公司，這些公司曾經(jīng)多次產(chǎn)生消費(fèi)者的信任問題，而它們恰好使用了許多扁平化設(shè)計(jì)風(fēng)格。我們就把負(fù)面問題與這種設(shè)計(jì)風(fēng)格的聯(lián)系了起來(lái)，對(duì)這種風(fēng)格留下了糟糕的印象，因此我們?cè)骱匏?；我們覺得這些冷血的公司正在奪走我們所愛的東西。在這波憤世嫉俗的浪潮之后，Solar Sands 以一段出人意料的評(píng)論結(jié)束了他的視頻：任何潮流都有保質(zhì)期。
接下來(lái)將是什么?
百事可樂不斷演變的標(biāo)志讓我們很好地洞察了各自時(shí)代的設(shè)計(jì)趨勢(shì)?！狶ogaster
設(shè)計(jì)趨勢(shì)總是周期性的，每個(gè)趨勢(shì)都有保質(zhì)期。百事可樂的商標(biāo)就是一個(gè)很好的例子，它說明了設(shè)計(jì)世界是多么地充滿活力：從簡(jiǎn)單的設(shè)計(jì)到復(fù)雜的設(shè)計(jì)，再到簡(jiǎn)單的設(shè)計(jì)。沒有一種設(shè)計(jì)風(fēng)格是絕對(duì)好的，但它必須與時(shí)代相適應(yīng)。
微軟的 Fluent Design 吸收了一個(gè)新的風(fēng)格,強(qiáng)調(diào)光,深度、材料和尺度?！④?
隨著大眾對(duì)當(dāng)前設(shè)計(jì)趨勢(shì)的不滿不斷發(fā)酵，扁平化設(shè)計(jì)風(fēng)格可能要終結(jié)，但人們永遠(yuǎn)不知道什么時(shí)候或者什么會(huì)取代這個(gè)簡(jiǎn)約至上的時(shí)代。許多蘋果和微軟等公司都將新擬物風(fēng)格和玻璃擬態(tài)的元素融入自己的設(shè)計(jì)語(yǔ)言，試圖為其添加性格和細(xì)節(jié)。雖然我們肯定不會(huì)在一夜之間回到過去那些充滿華麗而又過分精細(xì)的 Logo 的日子，但扁平化設(shè)計(jì)的流行趨勢(shì)可能會(huì)開始消退。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一個(gè)好的設(shè)計(jì)不僅是解決正確的問題，還要為用戶創(chuàng)造積極的情感。一個(gè)實(shí)體產(chǎn)品可以通過人類的 5 種感官來(lái)創(chuàng)造情感；但對(duì)于數(shù)字產(chǎn)品來(lái)說，因?yàn)樗皇窃谠O(shè)備屏幕上進(jìn)行干巴巴的交互，然后提供服務(wù)，所以很難創(chuàng)造良好的情感體驗(yàn)。
所以數(shù)字產(chǎn)品設(shè)計(jì)師需要深入了解每一種情感，以及能夠創(chuàng)造情感的心理學(xué)原理，才能更好地設(shè)計(jì)相關(guān)產(chǎn)品。
唐·諾曼認(rèn)為，可以從三個(gè)方面對(duì)用戶的情感體驗(yàn)進(jìn)行設(shè)計(jì)：本能層、行為層和反思層。
本能層："用戶想要的感覺"
行為層："用戶想做什么"
反思層："用戶想成為什么樣子"
在第一個(gè)層面，設(shè)計(jì)將通過用戶的視覺和與產(chǎn)品的互動(dòng)產(chǎn)生情感。因此，這也是 UI 設(shè)計(jì)師大顯身手的地方。除了審美和基本的平面設(shè)計(jì)原則外，以下是我目前在設(shè)計(jì)中運(yùn)用的心理學(xué)規(guī)則。
1. 格式塔原則
相似性原理
人的眼睛往往會(huì)把相似的元素連接成一組，大腦會(huì)認(rèn)為這些元素有相同的作用。
因此，在設(shè)計(jì)具有相同功能或內(nèi)容的界面元素時(shí)，要使其一致。
應(yīng)用場(chǎng)景：導(dǎo)航、畫廊、卡片、橫幅、內(nèi)容、分頁(yè)。
連續(xù)性法則
人的眼睛將排列在連續(xù)體中的元素視為一組。這個(gè)規(guī)律與對(duì)稱性和相似性頗有關(guān)系。通過在一個(gè)序列上創(chuàng)造相似和重復(fù)的元素，我們可以將用戶往我們想要的方向驅(qū)動(dòng)。這使得閱讀信息更加連貫和清晰。
輪播圖就是應(yīng)用了這一規(guī)則的設(shè)計(jì)，為用戶提供了還有信息可看的提示。
應(yīng)用：菜單/子菜單、列表、產(chǎn)品排列、輪播圖、進(jìn)度指示器。
封閉法則
當(dāng)看一個(gè)不完整的圖像時(shí)，大腦會(huì)依靠以前的經(jīng)驗(yàn)，把剩下的填滿。
這是圖形或 Logo 設(shè)計(jì)中常用的規(guī)則。但在產(chǎn)品設(shè)計(jì)中，我們可以將其用于圖標(biāo)和加載。
應(yīng)用：圖標(biāo)、加載、數(shù)據(jù)可視化。
鄰近法則
這是 UI 設(shè)計(jì)中必不可少的規(guī)則，因?yàn)槿说难劬?huì)把任何相鄰的元素當(dāng)作一組。
在設(shè)計(jì)的時(shí)候，我非常注意利用間距將元素組合在一起。我通常用大的空間來(lái)分隔大的內(nèi)容群，然后用小的空間來(lái)分隔大的內(nèi)容群中的小的內(nèi)容群。
應(yīng)用：導(dǎo)航、圖庫(kù)、卡片、橫幅、內(nèi)容、分頁(yè)。
對(duì)稱法則
我們的大腦喜歡看到對(duì)稱和平衡的事物。這是在所有設(shè)計(jì)領(lǐng)域中最常用也是最安全的法則。它幫助我們創(chuàng)造一種穩(wěn)定和秩序感。
在設(shè)計(jì)需要簡(jiǎn)單、視覺化、和諧的產(chǎn)品時(shí)，我經(jīng)常會(huì)將對(duì)稱性應(yīng)用到其中。當(dāng)觀眾需要專注于重要的東西時(shí)，這也有助于他們感到更舒適。缺點(diǎn)是，如果過度使用，產(chǎn)品會(huì)變得枯燥單調(diào)。通常，我應(yīng)用于頭部或行為召喚按鈕，以更好引導(dǎo)用戶產(chǎn)生行動(dòng)。
應(yīng)用：圖庫(kù)、焦點(diǎn)圖、重要內(nèi)容、產(chǎn)品展示、列表、導(dǎo)航。
主體/背景原則
這個(gè)規(guī)律是關(guān)于人的眼睛傾向于注意到脫離背景的事物，或是被框?yàn)橐唤M的內(nèi)容。
我用這個(gè)規(guī)則來(lái)引導(dǎo)用戶的視線去預(yù)覽重要信息。通常是在卡片設(shè)計(jì)中，用淡淡的下影在背景上方鋪設(shè)一層。此外，構(gòu)圖組也是應(yīng)用這個(gè)規(guī)則的一種方式。
應(yīng)用范圍：卡片、內(nèi)容、列表、服務(wù)、摘要。
共同命運(yùn)法則
在同一方向上移動(dòng)的元素被認(rèn)為比靜止的元素或在另一個(gè)方向上移動(dòng)的元素更有關(guān)系。這一規(guī)則的應(yīng)用有助于我們建立群體和狀態(tài)之間的關(guān)系。
我在做動(dòng)畫的時(shí)候，經(jīng)常比較明確地使用這個(gè)規(guī)則。但是，我們也可以應(yīng)用到更多方面。
應(yīng)用：導(dǎo)航/下拉菜單、折疊菜單、折疊面板、工具提示、滾動(dòng)條、視差滾動(dòng)和指標(biāo)。
2. 焦點(diǎn)
當(dāng)我們看某樣?xùn)|西的時(shí)候，我們的眼睛往往會(huì)先關(guān)注最突出的元素。理解這種行為將幫助我們?cè)谠O(shè)計(jì)中創(chuàng)建一個(gè) "錨點(diǎn)"，從而推動(dòng)用戶按照我們的方案去瀏覽內(nèi)容。
應(yīng)用：內(nèi)容頁(yè)、落地頁(yè)、價(jià)格頁(yè)、產(chǎn)品頁(yè)、焦點(diǎn)圖。
3. 馮·雷斯托夫效應(yīng)
又稱隔離效應(yīng)，它表明人們傾向于注意和記住與其他部分不同的部分。這個(gè)規(guī)則很容易與焦點(diǎn)法則相混淆。不同的一點(diǎn)是，應(yīng)用這個(gè)規(guī)則的元素往往是獨(dú)立存在的，并沒有額外的功能和信息。
應(yīng)用：定價(jià)表、促銷橫幅、權(quán)益升級(jí)。
4. 本能反應(yīng)
基于真實(shí)世界的用戶體驗(yàn)，創(chuàng)造出具有視覺吸引力的體驗(yàn)。就像我們看一個(gè)視頻時(shí)，每一個(gè)高潮笑話都有笑聲的配音，我們就更容易笑。如果我們的設(shè)計(jì)能讓用戶感覺很好很舒服，用戶就會(huì)喜歡我們的設(shè)計(jì)。
應(yīng)用：產(chǎn)品形象、插圖、攝影。
5. 色彩心理學(xué)
有許多研究表明，顏色對(duì)我們的潛意識(shí)有特別的影響。不同性別、不同宗教、不同文化的人對(duì)色彩的看法也不同。
另外，我們也不要忘了早期被廣泛使用的系統(tǒng)的顏色：
紅色：錯(cuò)誤
綠色：成功
藍(lán)色： 進(jìn)行中
黃色：警告。
6. 形狀心理學(xué)
和顏色一樣，人的潛意識(shí)對(duì)不同的形狀也有不同的反應(yīng)。比如:
圓形 、橢圓形：傳遞一個(gè)積極的信息，通常與社區(qū)或關(guān)系有關(guān)。
正方形和三角形：傳遞強(qiáng)烈的信息，通常與力量和穩(wěn)定有關(guān)。
豎線：代表強(qiáng)度、力量或侵略性。
水平線：代表平靜、平等或安靜。
7. 雙重編碼理論
這個(gè)理論解釋了人類需要視覺和語(yǔ)言信息來(lái)盡快處理信息。而且，人類是視覺動(dòng)物，我們的大腦處理圖像的速度是文字的 6 萬(wàn)倍。而為了達(dá)到設(shè)計(jì)的最大效果，我們不應(yīng)該刪除說明性文字。
一個(gè)明顯的例子就是應(yīng)用程序的導(dǎo)航欄。大多數(shù)新的應(yīng)用程序或具有復(fù)雜功能的應(yīng)用程序都是用圖標(biāo)和標(biāo)簽來(lái)設(shè)計(jì)的。
另一個(gè)例子。
8. 并行設(shè)計(jì)
相較于其他元素，人的眼睛往往會(huì)更容易注意到平行的元素。我經(jīng)常用這個(gè)原理將同一屏幕內(nèi)的兩組不同內(nèi)容進(jìn)行分類。最容易看到的相關(guān)案例可能是 Facebook 的消息界面，“故事”并排而消息水平平行排列。
9. 共同區(qū)域
這個(gè)原理就像《格式塔原理》中的相似性法則一樣，但它并不以相同為終點(diǎn)。共同區(qū)域是通過我們使用劃分的方式，通過線條、形狀或顏色來(lái)創(chuàng)建的。
如果一個(gè)屏幕需要用戶大量滾動(dòng)來(lái)查看內(nèi)容，我們應(yīng)該有一些方法來(lái)將其劃分得更清晰，而不是僅僅使用間距。
應(yīng)用：列表、信息流。
10、掃描模式
根據(jù) NNGroup、UXPin 等機(jī)構(gòu)或團(tuán)體的各種研究，最常用的兩種掃描模式是 "F 模式"和 "Z 模式"。
其中，"F 模式"的應(yīng)用最為廣泛，尤其是對(duì)于內(nèi)容較多的網(wǎng)站。
“Z 模式”用于那些不太注重文字的網(wǎng)站，往往在最后強(qiáng)調(diào)行為召喚按鈕。
當(dāng)我們了解了這些模式的使用方法后，我們就可以有效地選擇布局和安排元素來(lái)實(shí)現(xiàn)我們的設(shè)計(jì)目標(biāo)。
第一印象是最難忘的，積極的體驗(yàn)可以在用戶和產(chǎn)品之間建立長(zhǎng)久的關(guān)系。如果我們能讓用戶在第一時(shí)間愛上設(shè)計(jì)，我們就為我們的產(chǎn)品創(chuàng)造了相當(dāng)好的優(yōu)勢(shì)。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn