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