如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
信息時代，每個人都需要具備基本的「搜索」技能，尤其是設計師，你有沒有靈感枯竭不知所措的時候呢？今天我們召集了7位優秀設計師，對他們的設計靈感來源進行揭秘，希望這一期的輕訪談能夠讓你輕松Get設計大佬的搜索技巧！
優設輕訪談第八期，我們的話題是——不信息時代，能與我們分享一下你的搜索技巧么？平時的素材積累是如何進行的？
Dribbble：https://dribbble.com/creativemints
實際上，現在尋找靈感或資源變得非常容易。去Pinterest，你會獲取到任何你能想到的靈感！查看stock網站，獲取所有你需要的資源！
△ AGE / Online courses
盡管如此，我仍然建議從外部世界獲得靈感——請幾天假，去一個新的城鎮或國家旅行，逛逛博物館，你會發現真實生活會成為你最重要的靈感來源。
Dribbble: https://dribbble.com/glebich
是的，你是對的，搜索技巧對產品設計師來說是必不可少的。我在一家公司做了很長時間的分析師和研究部門工作，在那里我負責用戶體驗，這些經歷幫助我理解如何搜索有意義的數據和信息，并使用它來定義一個產品的關鍵指標。
但是搜索不僅僅是關于用戶分析和信息，也是關于設計語言——理解什么是可能的。最好的設計只有當你跨越了可能和不可能之間的界限時才會出現。這種平衡基本上是一種新的設計語言或產品的品牌。
我使用Pinterest進行圖像搜索。這個網站幫助我創建情緒板，并找到一些更具體更具象的東西，Dribbble的作品幫助我研究UI布局。然而，我不會使用Dribbble來作為我的色彩搭配靈感庫。
對于顏色，我使用自己的靈感素材庫，在我的職業生涯中，我花了大量的時間從互聯網上搜集素材，并進行創作和整理。我也有自己的平面設計素材庫，我創建并管理這些素材庫大約有10年了。我幾乎每天都在捕捉的設計靈感素材。問題不僅在于你如何搜索，還在于你如何將這個搜索結果應用到你的工作中。
△ Water waves simulation for 3d icon
那如何應用呢？例如，當我看到好的設計時，我將視覺圖像結構分離開來——有時我在情緒板中添加新圖像僅僅是因為我喜歡形狀，有時是因為我喜歡顏色，有時是因為圖形效果等。在將該引用添加到庫之前，設計人員需要了解在何處可以使用以及如何使用。對于設計師來說，搜索絕對是一項必不可少的技能，我通過創建情緒板促進了我的搜索。
我們相信靈感無處不在，當然也會取決于我們進行的項目類型。
我們在互聯網上會搜索很多，比如Behance和Dribbble。然而，我們周圍也有很多靈感。
△ Cellebrite Pictograms
例如，如果進行的是一個品牌項目，那么我們周圍的自然環境就是我們獲得靈感之所在。顏色、動效、形狀和所有這些的組合使一切都在一個愉快的和諧場景中工作，這就是我們努力傳遞的。
對于UI/UX項目、網站和App設計，我們也是這樣做的，但我們主要目的是理解用戶的最終目標和每個行動背后的動機。我們不僅在數字世界中研究類似的解決方案，在現實世界中也會尋找類似的解決方案。
Dribbble：https://dribbble.com/phamduyminh
我不在本地存儲靈感資源，因為想要方便瀏覽必須對其進行分類，而這對于本地存儲來說比較困難，所以我非常依賴于在線資源，它們有很好的搜索引擎，所以，為什么不呢？
基于不同的目的，我更喜歡從多種來源獲得靈感:
說到尋找靈感，我認為有兩種人：使用Dribbble的人和使用Behance的人。Dribbble更像快餐，在這里你可以迅速的飽腹，Behance更像一家高檔餐廳，你可以在那里度過整個晚上。
我個人喜歡吃快餐。我喜歡每天早上上班前查看Dribbble，當我發現好東西的時候，我就把它存起來以后用。
△ Promo Website Animation for Pocket Multilingual Assistant
如果你正在尋找真正的案例，而不僅僅是概念稿，你可以在Awwwards上找到一些主流的東西，也可以在這里找到一些更奇怪的東西。
哦，還有Pinterest，它的優勢是推薦你可能喜歡的東西。我經常用它來做情緒板和尋找參考素材。
如果是插畫資料，沒有比Dribbble和Behance更好的地方了。只要滾動鼠標，所有的好東西和你喜歡的藝術家都會一步添加到你喜歡的作品中，簡單!
△ Tempers Flare
Pinterest有利于發現新的想法、主題、不尋常的元素和靈感。每天瀏覽這些平臺也會讓你培養出一雙訓練有素的眼睛，這對提高你自己作品的質量和風格至關重要。」
Dribbble: https://dribbble.com/febinraj
我每天都想更新！我認為這是件大事。因為這個世界瞬息萬變。
△ Evening From Kerala
通常，我的主要搜索源是Behance和Dribbble，同時我從其他來源獲取了更多的數據，比如文章，博客。
Behance: www.behance.net/yihsuanli
信息時代，每個人都必備一個「搜索」技能，尤其是設計師，很多人在接單后,可能會第一時間在網絡中或者日常的資料擴中搜索素材、參考、靈感等。
我還記得剛開始接觸設計時因為沒有太多經驗，常常因為資料整理太久，壓縮了執行時間，最后反而虎頭蛇尾的完成作品。雖然創作作品時資料搜集、調查很重要，但其實整體過程有更有效率的方法。其實收集資料也是需要練習的，通過經驗累積，可以漸漸增加效率與快速找到最精準的訊息，避免漫無目的搜尋。
△ ZENWATER
Work hard 不如 Work smart, 有了較有系統的資料搜尋方式后，可以將時間留給創作和嘗試。隨著經驗累積，我開始養成了一些小技巧幫助自己更有效率的搜集資料，大家可以酌量參考：
1. 先用樹狀圖整理出關鍵字
在開始找資料前我會先把設計關鍵字整理出來，先從Google或百度等網站去搜尋相關的話題或圖片，以此方式讓思考可以更突破。例如，我要做一張音樂會的海報，開始前，我會先寫下關鍵字，例如：樂器、鋼琴、音樂、琴鍵、流動、彈奏….，接著利用這些關鍵字進行中英文查詢，隨著找到越來越多資料，可以從其中找到更多可能性的延伸。這個階段搜尋目的是從抽象方向出發，避免找到與別人相似的元素。一個一個關鍵字搜尋后，就可以把其中好的圖片整理再一起，收斂成更明確的設計方向。
2. 擅用IG的＃hashtag功能
除了使用搜尋網站尋找資料，我覺得IG（instagram ）也是一個不錯的選擇。我會用IG 的hushtag去找大家對于某一個單字不同的想像，例如找#music，在其中除了可以找到音樂相關的畫面，有時候也可以找到不同場域里的音樂元素。除了找靈感外，我也會利用hushtag搜集的設計作品，例如找#logo#graphicdesign時，可以看到大家正在進行中的作品，或是還未整理好放上Behance的作品。
△ One Team One Goal / IBM Taiwan Sport Day
3. 以pinterest分類整理資料庫
我平常就有整理pinterest的習慣，建立資料庫的習慣除了為了特定專案外，我也會以設計種類分類作品，例如以CI、packaging、poster…分類。除此之外，以風格分類的資料庫也是必要的，例如：東方風格、美式、日本風格、歐式….。這些平常就累積好的資料庫能夠讓我搜尋作品資料時，有一個快速的開始。 Pinterest會依據風格推薦更多的作品給使用者，因此當平常有了足夠的累積，尋找資料就會有效率很多，能夠快速找到很多需要的作品風格。
4. Behance搜集不同風格的設計師
Follow特定設計師的IG或是Behance也是我搜集資料的一個方法。我會搜集一群在每個領域最具代表性的設計師。在找不到靈感時，我會不斷瀏覽他們的作品集，試著從他們角度出發，思考如果是他們遇見這個題目，他們可能怎么發展。除此之外，他們也是一個完整的風格庫，每個作品都是該領域的標竿，當客戶有特定風格的需求時，能夠快速給自己一個明確的目標，期許自己能夠達到他們作品的高度。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
前天看完大陸畢業展海報合集，不少小伙伴大呼看得不夠過癮。為了滿足大家炙熱的求知欲與上進心，美丫姐又花足工夫找來了今年港澳臺、日本、歐美等地畢業展海報。依舊干貨十足，依舊吐槽猛烈，希望優秀如你，能夠看得開心。
首先我們來看看讓人印象最為深刻的優秀作品。
渴望自由的金魚
魚缸中的生活再怎么無憂無慮，也攔不住金魚一躍而出的渴望，就像噴薄欲出的創意，就像按捺不住跑出校園的畢業生。
架著一個歪斜的棚子，支撐著我們的二十二
猛然撞上了即將踏入社會的迷茫與不安，臺科大的莘莘學子鼓起勇氣，向老師詢問著最后一個問題「老師您看這展廳，供電是不是不太夠？」
伏流
有時候你以為自己發現了一股清泉，其實全是大佬手里玩剩下的，人外有人，天外有天。
喜歡做，肝愿受
其實大家剛畢業頭幾年也是這么想的，幾年之后肝還好，頭很冷。
后浪
長江后浪推前浪，后浪還有后后浪。大家都是被時代的洪流裹挾著前進，顯然這屆畢業生還沒畢業，已經被學弟學妹們震得神志不清了。
超人請回答
整個童年，大人都忙著策劃一個玩笑，讓孩子天真的相信世界上真的有超人，等到成年之后他們再哈哈大笑「哈哈哈她真的信有超人」，偶有不愿從童真中醒來的人繼續尋找，你們等著，遲早給你們找來真的超人。
青浪
用各式紋理堆疊表現出了「浪潮」的韻味，既能聯想到青出于藍勝于藍，又有長江后浪推前浪的語境，畫面動感，銳意十足，就是不知道早就畢業的學長們會怎么看。
那個967呢？
找了很久只找到「967=很想你」的說法，但想來不至于借畢業海報，發出「憑什么就我四年沒有戀愛」的吶喊，越不知道就讓人越想知道，竟有一絲等待戈多的意味。
非想非非想
到底是佛光普照大學畢業的學生，還沒出校門，就已經參透了甲方的真諦，非想，問他想要什么，說不出來；非非想，卻總能提出一大堆意見。
泛流意識
總說要把意識匯聚成一道洪流，變成一道鐵流，細想也沒什么不對，畢竟鋼鐵、石頭、血紅細胞里都含有鐵元素。
靈光乍現
靈光就像這一坨奇妙的東西，摸不著更說不清，出現的時候總讓人欣喜若狂，定睛一看，可真不是個東西。
層
明志科技大學旗下有兩大門派，一派工業設計，一個視覺傳達，兩大派的關系想必是劍拔弩張，一派冷靜沉穩，舍我其誰。
眼波
一派浮夸前衛，閃瞎人眼。
畫語者
老獵人除了酷愛炫耀獵物，更愛炫耀不離身的老獵槍，情人眼里出西施，用心愛的工具們鋪滿整張海報，還能有誰比他們更愛這個行業。
形象組無能
「海報做成這樣，都怪老師舉棋不定」，多少年后才突然醒悟，原來老師的猶豫不決，是為讓我享受最后一次任性的機會。
輪迴
「誰TM把燈打開了？」。不，是天又亮了。多少優秀的作品背后，都是無數個日日夜夜的輪回
今宵霓爛
在陳列室打碟，在畢業展上蹦迪，如果連想都不敢想，那你憑什么認為你能改變這世界？
其次是第二梯隊，雖然不算突出，但也算優秀作品。
淘色風波
齷齪的語意，來自成人齷齪的內心，讓家長面紅耳赤的「淘色風波」，不過只是畢業生們翹課逛展打游戲。
新一代設計展
廢掉的第一稿千萬別撕，不然最后出街時就是這個鬼樣子。
被……的那五年
科大的畢業展為什么延期了五年？估計是地圖畫得太爛，大家花了五年才找到舉辦的地址。
發聲關系
「喔」「啊」「曰」，奇了，大家都是紙打印出來的作品，憑什么就你們家海報有聲音？
生長輪
樹木的年輪記錄著時光，每當有大事發聲，從年輪中就能看出一二，你看今年新的圈圈它又白又圓。就像學生們畢業一樣，腳踏實地、悄無聲息。
升溫計畫
溫室效應？冰川融化？這些都遠遠不夠，沉默四年平淡如水，如果一生一次的畢業大展再不燥起來，那可就真的畢業了。
外出取材中
悶在家里一時爽，一直悶著一直爽？活像躺在盒子里的量產玩具，該出去走走，看下絢麗多彩的世界了。
三角關系
創意、媒介、受眾，所謂傳媒，正是一場相愛相殺的三角游戲。
零睡時間
你以為躺在床上就是不思進??？不，我是在夢里收集創意，一時的休憩，是為了更好的前進。
問HOW
寒窗十數載，大人都說不懂就問，步入社會才知道大家都只能強撐，明明面對奇葩需求，想要大聲反問一句「HOW？」看看癟掉的錢包，只能脫口而出，說一個「好」。
蹦起來
設計水平還沒那么高的時候，一定記得猥瑣發育不要太跳。不然，甲方連頭都給你錘爆。
最后是第三梯隊，先不論好壞，總之看得人迷惑得很。
復燃
想讓葬愛家族設計風潮死灰復燃，甚至風靡世界也不是問題，只需簡單一步，把地球表面刷成 QQ 空間那么黑。
扔出去的，頭也不回
扔出去的飛機稿就別再撿回來了，即使馬糞風干后看著像塊巧克力，但只要你一舔就會發現，呸，果然還是那堆馬糞。
是生活
懷疑是在暗示黃色比生活更吸引人，但手上又沒啥證據。
一體兩面
思維定勢是一件很可怕的事情，比如甲方經常讓把大象換個面，覺得不是正面就是反面，可換來換去還是不滿意，就沒想過，甲方要的是橫切面。
藝眼瞬間
好設計讓人瞠目結舌，覺得語言乏力，丑的設計也能讓人瞬間語塞，根本說不出丑在哪里。
DNA
看完臺灣大葉大學官網上的師生風采，就能明白這確實是一所連空氣都飄著直男審美的理工科大學。
也就不難理解為什么連設計系學生們的畢業海報都會有這么大一股子消毒水味。
記得呼吸
比起上一張工業設計系海報的冷靜，視覺傳達系海報走向了另一個極端，線條凌亂，張牙舞爪，若不用文字提醒「記得呼吸」，不少觀眾會因為過于震撼憋死在原地。
跨越
連著領導的修改意見以及刪除線，一齊打印出來的終級作品。
「香港的呢？」抱歉，一張都沒找到。
日本，設計強國近鄰日本。今年畢業展海報也是頗有看頭，他山之石可以攻玉。
1. 多摩美術大學
能順利畢業的，都是怪物。
2. 武蔵野美術大學
感受撲面而來的鄉土氣息。
3. 東京藝術大學
這就是設計師通宵后倒下的身影。
4. 東京造型大學
綜合各位老師意見之后的海報作品。
5. 東京五藝術大學聯合展
「我用圖畫工具都比你畫得好！」「好好好你行你來。」
6. 倉敷藝術科學大學
「快從樓頂下來，這次真的不改了！」「你們簽字畫押」。
7. 京都精華大學
學習四年，設計使我面目扭曲。
8. 京都造型藝術大學
套用學長給的模板，但忘了改日期。
9. 金澤藝術工業大學
金澤大學深造多年，最拿手的就是往產品上噴金漆。
10. 岡山縣立大學
讓我看看，誰還沒交畢設作品。
11.日本桑澤設計研究所
我們的展區在山頂上，請大家參展時做好御寒準備。
12. 名古屋藝術大學
為了讓畫面更豐富，我放了 267 頂帳篷。
13. 奈良藝術短期大學
畢業考試第一題，畫出任課老師的臉。
14. 文化學院大學
反正到時候大家都是要哭的。
歐美地區畢業展海報內容更加現代，但因為文化差異較大，消化起來相對比較困難，這里就不一一吐槽了，大家自由學習。
1. 路易斯安納州藝術與設計學院
2. 倫敦都會大學
3. 美國Art Center
4. 英屬哥倫比亞大學
5. 美國馬里蘭藝術學院
6. 英國皇家藝術學院
想不到你這幫濃眉大眼的英國人，也玩「愛滴魔力轉圈圈」。
好了，以上就是今天的全部內容，誰要是還覺得不過癮，只能老老實實等明年新生畢業了。
總體說來，亞洲地區文化的多樣化性，還是完勝歐美，這點非常值得欣慰，但是回頭看看大陸畢業展海報，又千篇一律到讓人完全開心不起來。總之還是那句老話，革命尚未成功，同志，仍須努力啊。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近設計群里經常有人問起小程序設計規范的問題，雖然官方有提供樣式庫的下載，但是停留在 16 年版，不是的。而設計經驗這部分網絡上也沒有比較全面的分享，這促使我停下手上的計劃，加快輸出本篇文章。正好近期剛結束幾個小程序項目，總結下經驗，并結合微信小程序的官方設計指南，一起分享給大家，希望幫助大家更快速地上手。
隨著 2018 年小程序的迅猛發展，小程序現已被各大企業廣泛采用，「觸手可及、用完即走」的用戶體驗備受青睞，隨之小程序設計也成為設計師的必備技能，那在進行小程序界面設計時，應該如何快速做設計？過程中又要注意哪些問題呢？
對于已經開發了 App 的產品，在進行小程序設計時需遵守小程序的規范，同時要保持小程序界面設計與 App 的風格統一性。
小程序的「所有頁面」右上角位置，都固定放置了小程序的菜單，在設計界面時需預留出該區域空間。
1. 小程序菜單固定樣式
微信提供了深淺兩種配色樣式，以便更好地融合到各種風格的頁面中，需注意保持小程序菜單清晰的辨識度。
線上案例：
2. 交互注意事項
如果要在小程序菜單附近放置交互元素，要考慮是否有交互沖突，應盡量避免誤觸的可能。
建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。
如上圖，小紅書的自有導航樣式個人不推崇，理由如下：
微信讀書既有微信線條外框的 DNA，又區別于官方樣式，是不錯的綜合。以上僅限個人觀點，還需用戶數據來客觀驗證。
3. 搜索框常見的幾種表現形式
1. 小程序設計規范
頂部標簽分頁欄顏色可自定義，一般會沿用 App 的設計風格，以保證兩個平臺的視覺統一性。
2. 常見的幾種表現形式
1. 小程序設計規范
微信有提供小程序的底部標簽樣式，建議標簽數量在 2-4 個適宜。
也可根據產品需要選擇或者去掉底部標簽欄功能。
2. 常見的幾種表現形式
啟動頁除品牌 Logo 外，其他元素都由微信統一提供，且不能更改，設計師僅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序設計規范
全局加載是小程序名稱左側的加載圖標。模態的加載樣式將覆蓋整個頁面，由于無法明確告知具體加載的位置或內容，可能會引起用戶的焦慮感，建議謹慎使用。
2. 常用的加載樣式
需告知用戶具體加載的位置形狀，減輕用戶焦慮情緒。
對于沒有開發App來說，可依據官方推出的《微信小程序設計指南》來設計，以確?？焖僭O計出符合規范的小程序。
小程序設計應遵循友好、、一致的設計原則，每個頁面都應有明確的重點，清晰明確地告知用戶身在何處，又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路。
最后，推薦幾個常用的平臺設計網站。
1. BAT各平臺小程序設計規范網站
微信小程序設計指南：https://developers.weixin.qq.com/miniprogram/design/
支付寶小程序設計規范：https://docs.alipay.com/mini/design
百度-智能小程序設計規范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的設計規范網站
蘋果-人機界面指南：https://developer.apple.com/design/human-interface-guidelines/
詳細介紹了 iOS 設計規范，同時還提供了 UI 設計資源下載。
安卓-MD設計指南：https://material.io/design/
螞蟻設計：https://design.alipay.com/#ds
提供移動和 Web 端的設計組件，還有設計案例和心得的文章供學習。
微信樣式庫：https://weui.io/
提供微信內的網頁和小程序設計規范。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
簡介說明1. 理論表述
對于許多事件，大約 80％ 的影響來自 20％ 的原因。
2. 理論背景
1896 年，意大利經濟學家帕累托出版了《經濟政治學課程》（Cours d’economie Politique），其中描述了他所觀察到的一些現象，比如意大利 80% 的土地掌握在 20% 的人手中；比如花園里 20% 的豌豆莢產出了 80% 的豌豆。
上世紀 40 年代，美國一位管理顧問 Joseph M Juran 觀察到一個在商業以及生活中普遍存在的現象：在某一過程中，80% 的影響來自于 20% 的投入。他將這一現象以帕累托為名，稱為「帕累托原則」。
80/20 雖然只是一個相當不的數字，在很多具體情況之下，這個數字會有細微的波動，但這個數字背后所蘊含的思想或是規律卻是不變的：更集中的投入將產出大于預期的結果。
一般來說，一個 APP 大多擁有幾十上百個頁面，但是這些頁面并不是用戶都能用到的，有時候大多數用戶只會常用那么幾個頁面，所以將有限的時間和精力投入到這些頁面將給你帶來更大的收益。
案例1：網易云音樂的 UI 迭代
最近網易云音樂和蝦米音樂都迎來了大版本更新，UI 也幾乎重新設計了一遍，但我們所看到的重設計，只局限在那些關鍵的頁面上，一些次要的頁面基本沒改。比如網易云音樂，首頁這種重中之重的頁面不僅風格、排版大改，連產品邏輯都改了（比如快速入口由四個變為五個，改變了私人 FM 的位置等），但是等級頁這種無關緊要的頁面，除了頭部的全局性改動外，其他地方一點沒變。
那我換個角度想，如果我們的應用已經存在了這么多需要花費時間和精力的頁面，現在產品經理希望增加另一項需求量小但確實存在的功能，我們應該怎么辦？奧卡姆剃刀指出「如無必要，勿增實體」，這是我們對此欲增加的功能的終極評判標準。
要知道，頁面中每增加一個元素，對于用戶體驗的影響是巨大的，這意味用戶著需要花費額外的時間去理解新增加的元素是什么；在所有元素中尋找特定的一項又多了一些備選；瀏覽頁面時的視覺噪聲又多了一些。
所以到底要不要增加這個功能，關鍵在于能否很好地控制上述的用戶體驗成本，以及后續的迭代成本。從帕累托原則的語境來看，小眾但是確實存在的需求大概率不足以產生能夠克服用戶體驗損失的收益，哪怕我們投入了一定的精力去做，日常依然無法給它百分之二十以上的關注去修改，去完善，去迭代，所以這個功能也大概率不需要增加。
說起帕累托原則就不得不提到長尾模型，長尾模型的分布曲線與帕累托長得很像，但是結論卻完全相反，長尾模型提醒我們無法忽略那條長長的尾巴的影響，雖然它收益低，但架不住數量多，比例高。所以我們可以看到「尾巴」所占據的面積幾乎和「大頭」相當。
04 年長尾模型被提出來的時候，很多人認為長尾模型是對帕累托原則的顛覆，諸多例子都側面佐證了長尾模型的正確性，比如 Google 目前約有一半的生意來自小網站，比如亞馬遜圖書的總盈利中少數暢銷書占一半，絕大多數的冷門書占另一半。
聽起來好像很有道理，長尾模型好似在控訴著開發者不去關注那些小眾而眾多的瑣碎需求。事實真的如此嗎？
長尾模型本身隱藏了兩點不可或缺的前置條件，一是尾巴真的要足夠長（小眾需求真的有這么多），二是這么長的尾巴能被用戶發現。無論哪一點，都建立在海量的用戶資源之上，所以中小型 APP 大多望塵莫及。能夠有余力去關注長尾模型的大多是用戶量達到一定規模的產品，比如之前例子中所舉的 Google、亞馬遜，國內的微信、QQ、淘寶、支付寶、京東，這些產品的用戶量足夠多，用戶類型足夠廣，尾巴足夠長，哪怕再隱蔽的功能入口也能擁有不錯的曝光度（總會有用戶發現它），所以才能發揮長尾模型的作用。
所以在用戶量達到 QQ、淘寶的級別之前，長尾模型看看就好，帕累托依然是主要的指導原則。
注意點1：不得不做的需求
雖然我們要將精力放在重要的事情上，但有些功能和標識即使對于用戶意義不大，和產品的增長也沒有實際聯系，但我們也依舊需要花費大量精力投入。最常見的就屬于法律規定和平臺規則相關的需求了。
比如 18 年的大事件，歐盟推行《一般數據保護條例》俗稱「GDPR」，所有國際版的應用都需要針對這個條例對注冊流程做出大改，比如這篇文章介紹的：《GDPR合規下的 App 產品設計——啟動頁面和賬號注冊》。
注意點2：最重要的「少數人」
滿足大多數用戶的需求是一個必要條件，但不代表在任何情況下少數人就是可以被忽略的群體。對于工具化的應用而言，真正為應用帶來收入和傳播的，恰恰是占比較低的付費用戶，可能連 20% 都不到。
在這類應用開發的周期中，前期完成了滿足大多數用戶的基礎功能，之后更多的精力會被分配在滿足少數付費用戶的需求上。產品的方向和目標都可能隨著不同的時期發生變化，帕累托原則是一個決策工具，但決策方向是需要經過我們充分思考以后得到的，切勿盲目地服從一個指標。
理論表述
當存在多個相似的物體時，與眾不同的那個更容易被記住。
理論背景
馮·雷斯托夫效應（Von Restorff Effect），也稱為隔離效應（Isolation Effect）。1933 年，德國精神病學家、兒科醫生 Hedwig Von Restorff 在研究中發現，對被測試者提供一系列相似的項，而只有一項顯得特別、孤立、與眾不同的時候，這一項往往更容易被記住。
在此之后，對馮·雷斯托夫效應的研究也有進一步的進展，比如從生理學上，大腦對特異點有著更加明顯的 ERP（事件相關電位），這或許可以解釋特異點更容易回憶的原因；再比如馮·雷斯托夫效應與年齡有著密不可分的聯系，老年人對特異點的記憶就沒那么深刻。
不管如何，我們還是在頻繁地應用著馮·雷斯托夫效應，并能夠看到它在視覺設計中卓著的效果。
馮·雷斯托夫效應可以應用的場景分成兩種：環境差異和經驗差異。環境差異是指在空間尺度上做出的差異（同一平面內），而經驗差異是指在時間尺度上做出的差異（不同時間點的同一平面），我們來詳細聊一聊這兩個尺度。
環境差異──獲取視覺焦點
也有的文章中會表達為「背景差異」或「情景差異」，這不重要，我們只需要知道這個差異產生的原因：即在相似的周圍環境中出現差異。參考百度百科我們來進行一個簡單易懂的小實驗。
案例1：環境差異小實驗
請試圖去記住上面那幾串字符串。好吧，我放棄了，但如果努力一下，我們就會發現最容易記住的是與周圍環境最不一樣的那個。第一行是數字「5」，第二行是星號，第三行是紅色的字母「F」。
這就是環境差異所帶來的識別度與記憶度的提升，也是我們經常能在 UI 設計中所看到的一種有效吸引用戶點擊的手段。
案例2：起點、大眾點評
比如起點希望用戶在個人頁時去點擊「版本測試」按鈕，比如大眾點評希望強化「訂單」按鈕的視覺特征以便用戶能夠更快速地找到，所以在列表中這兩者都會長得不太一樣。這種區別于環境中的其余功能按鈕，為了吸引或暗示用戶點擊的按鈕有一個專門的名字，叫做「Call-to-Action 按鈕」（CTA 按鈕/行為召喚按鈕）。一般來說，CTA 按鈕大多會利用馮·雷斯托夫效應的環境差異來達到 Call to action 的目的。
經驗差異──強化時間特征
與用戶過往的經驗或記憶做出差異，叫做經驗差異。這種差異可以放大時間點的特征，使用戶對差異所在的時間點記憶更深。
案例3：google doodles
我們都知道 google 會在一些比較特殊的日子改變 logo 的設計，給 logo 加上一些非常有趣的涂鴉，與平時的 logo 做出差異，就是為了利用經驗差異使用戶在記憶中強化時間特征，更好地記住這個時間點。
記住時間點有什么好處呢？比如 Google 可能是為了傳播世界上那么多有意義的節日，也帶給公司一種具備著人文關懷的氣質。再比如淘寶、京東和 Steam，在「雙11」、「618」、「圣誕特賣」一定會改變主頁的設計，就是為了讓用戶記住這幾個被創造出來的節日，好讓大家每年這個時候都心甘情愿地剁手。
注意點1：所有都不一樣 = 所有都一樣
頁面中的特異點終歸只能屬于少數，如果整個頁面所有元素都想做得不一樣，都想突出，那不僅沒辦法突出任何一項，頁面的整體視覺都將崩潰。
反面案例1：新手常常會陷入什么都想突出，但什么都不能突出的境地
注意點2：把差異放在該放的地方
當用戶被特異的那一個點吸引的時候，對其他的注意力就將下降，這是馮·雷斯托夫效應天然的副作用。我們能做的就是把特異點放在最關鍵的地方，而不是次要的地方，這樣副作用就不會太過影響體驗。
反面案例2：閑魚、虎課的退出登錄按鈕
前幾年我們經常能看到這樣的退出登錄按鈕，使用高飽和紅色的背景，成為了這一頁最亮的那個按鈕。之前我們基于「警示用戶謹慎按下」的理由，將退出登錄按鈕做成最具警示意義的紅色，但是你看，一旦我們這么做了，這個按鈕就成了頁面中最不一樣的那個，強勢地拿下「Call to action」的大旗，時時刻刻都在散發著快來按我的氣息，這顯然與我們「不希望用戶隨意退出登錄」的意愿相違背。所以，我們現在去看微信、QQ 這些巨頭應用，都已經把退出登錄按鈕的差異做到最小，甚至沒有差異，就是基于上述的考量。
理論表述
人們對未完成任務的記憶比已完成的更深刻。
理論背景
Bluma Wulfovna Zeigarnik，前蘇聯心理學家和精神病理學家。她的導師首先注意到了餐廳服務員能夠很好地記住未付賬單，但是卻無法記住已付賬單的更多細節，針對這種現象，她進行了更加深入的研究。在研究中，她發現了人存在一種天生的，做事有始有終的驅動力，這種驅動力使得人們對還沒有完成的任務念念不忘，而對已經做完的任務印象不深。
蔡格尼克效應被用于證明格式塔現象不僅在感知中普遍存在，在認知中也是如此。勒溫的場論給出了一種解釋：一項任務被啟動之后人會形成一種處于緊張狀態的場，這會增強對所有與該任務相關信息的認知；任務完成后緊張的狀態就會得到緩解。
注：勒溫的場論（Lewin’s Field Theory）是格式塔心理學的一條分支，該理論受現代物理學場論的影響頗深，認為人在認知過程中大腦會形成一種場，這個場影響著人的感官信息的處理。
對未顯示完全的信息設置「懸念」
在文字較多的組件中我們時常能看到這樣的一個符號出現：「…」，這個符號用于表示文字信息未顯示完全，點開可以看到完整的信息。
案例1：新草、bilibili
就是這個小小的符號，時刻提醒著我們當前所顯示的信息并不完整，吸引著我們點開它繼續看下去，旁邊還伴隨著「全部」、「展開」等詞都是為了強化這一特征。
當然，不止如此，Web 端也會出現文章顯示不完全的情況。
案例2：知乎、簡書 web 版
通過這種方式，激發用戶繼續往后看，產生把文章完整看結束的驅動力。
提醒用戶任務還未完成
如果一個任務存在多個步驟，那么在任務結束之前應該用某種形式（比如進度條）提醒用戶任務還沒完成，這能夠激發用戶完成任務的欲望。
案例3：多鄰國
在選擇和測試過程中，頂部都會出現一條進度條清晰地表達著目前任務還沒完成，進行到了哪一步。在這樣的提示之下，用戶會有更大的動力去完成整個任務流程。
有效的任務激勵
越來越多的應用（尤其是技能學習類應用）開始對學習進程進行更細致的任務分解，然后利用蔡格尼克效應的影響對用戶的學習進程進行激勵。
案例4：Drops
在任務進行中始終展示任務的完成進度，任務完成之后會有對應的完成提示，并且可以獲得勛章/成就之類的小物件兒。也包括很多番茄類應用、習慣養成類應用，都會有類似的設計，比如 Eggzy、Forest、美妙激勵等等，都是通過這種方式激勵用戶完成自己的目標的。我們可以從中看到蔡格尼克記憶效應發揮著不可或缺的作用，正是我們追求有始有終的驅動力，在進度條的提醒下才能一步步完成目標任務。
注意點1：任務已完成同樣需要提醒
另一方面，已完成的任務同樣需要給予用戶相應的提示，不然用戶會感到壓力，會困惑自己到底有沒有做完這件事，這樣緊張的情緒將會一直存在，而緊張過后就是不安和不信任。
反面案例1：起點任務結束沒有反饋
起點的新手任務是我最近遇到的一件特糟心的事兒。我明明已經完成了「添加一部作品到書架」的操作卻沒有任何完成的提示，甚至我不知道自己究竟有沒有完成。明明做完了，卻依然顯示著「去完成」，是還有隱藏條件沒做到？還是我加的那本書不算？還是必須要兩個任務一起做完才算完成？還是我沒氪金不讓我完成？還是純粹的 bug？我不知道，用戶不知道，或許只有產品團隊的人才知道。
所以，如果已完成的任務沒有給予用戶合理的提示或者反饋，這樣的體驗是很差的。
注意點2：避免過分強迫
過長的進度條會給人形成壓迫，進度極其緩慢的任務，或者長時間完不成一項任務會讓用戶產生挫敗感，對完成整個任務來說尤為不利。
反面案例2：百詞斬讓人絕望的進度條
192/6270，相信這個進度不僅僅是讓我，讓所有看到的人都感到窒息和絕望。我并不是在為我的拖延癥找借口。我想表達的是，這種超長的進度條和超緩慢的任務進度，每天 50 個單詞也就是進度條每天推進 0.8%，不足 1%，對用戶形成的壓力是巨大的，過長的任務周期也會讓用戶快速失去信心。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
為了和大家分享關于設計趨勢的見解，ISUX 研究了 2019 年至 2020 年的設計趨勢。沒有必要去遵循年度設計趨勢報告，但是否意識到這一趨勢，對設計師來講卻非常重要。首先，我們總結了平面設計的總體趨勢，同時也研究了從 Zepeto app 和 Memoji 開始的，最近擴展出來的 IP 形象設計和角色設計趨勢。在本文中，我們想分享 ISUX 設計趨勢報告的第一部分「圖形設計趨勢」。在這一部分里，我們展示了當下各種品牌和動態圖形的案例，總結了 12 個值得注意的平面設計趨勢。
排版一直是設計的重要元素，也是傳達品牌強烈信息的手段。從去年開始，粗大的無襯線字體和強有力的排版被應用到許多品牌設計當中，這使得它成為平面設計趨勢的一部分。此外，也有越來越多的品牌采用動態和反映了 3D 趨勢的三維字體版式設計。
1. 動力學排版海報
這張動態排版海報不是簡單地放置圖形和文字，而是將移動的 3D 文字放在固定的圖形上，傳達新的視覺印象。這些圖形主要通過 SNS 以短循環視頻的形式共享。
2. Uber 品牌識別
Uber 開發了一種無襯線字體用于品牌 logo 的再設計，并將其貫穿于整個品牌系統。采用了這些品牌字體的動態海報，更為有力地傳達出 Uber 的品牌信息。
3. Squarespace 品牌識別
Dia studio 常將動態文字應?于品牌項?，「Squarespace」是其代表作品之一。
4. FAD 視覺圖形
以 3D 形態傳遞活動信息的版面設計，就像禮品包裝一樣。這種循環的 GIF 圖也作為品牌主圖形被運用。
5. 韓國女性耐克運動廣告
韓國藝人支持女性主觀活動的耐克運動廣告，也采用了大膽的哥特式字體。這些由 Guteform 設計工作室設計的字體有基本的延展形式，同時有一個系統能延展成更為寬大的形式以適配媒體的比例。這種動態化的強烈的排版傳遞了活動信息，和其他設計元素的互動，最大限度地發揮了圖形效果。
隨著 Instagram 用彩色漸變作為品牌色，漸變趨勢已經持續好幾年。最近品牌，UI 和包裝的圖形設計都采用明亮而強烈的對比色，這種趨勢不僅應用于設計，也應用于攝影。強烈的色彩組合，夢幻的色調和彩色漸變有望應用于 2019 年的整體設計。
1. APP 圖標設計
△ 越來越多的手機 APP 圖標使用漸變色
最近，許多移動應用程序在其圖標設計上應用了彩色漸變。
2. 歐洲體育 – 2018 平昌冬奧會品牌識別
歐洲體育臺 2018 年平昌冬奧會的轉播也將強對比和漸變色運用于多數場景中，包括標志、圖形和攝影。熒光圖形和深?背景的對比，尤為深刻地凸顯了冬季運動的感覺。
3. 籃球永遠品牌識別
△ @Notreal
NBA 新聞廣播公司品牌重塑項目所使用的，諸如彩色漸變和大膽排版的設計方法，也反映了的趨勢。他們創作了一個系統，通過各種顏色，字體和布局的應用，可以產生各種圖形輸出。
4. 明日之子品牌識別
△ @Plus X
騰訊視頻和哇唧唧哇聯合出品的選秀節目明日之子，用多種漸變色圓形表達不同選手的才華。隨著節目的進行，圖形主題也會隨選手的變化而變化。
與過去基于固定網格系統的布局相比，最近越來越趨于使用僅顯示圖像一部分的非對稱布局。雖然好像只顯示整個圖像的一部分，設計師卻可以在大系統中無限延展每個圖形。你可以認為平衡被打破了，設計師卻可以更加自由地應用圖形元素，呈現更強烈的視覺印象，還可以有很酷的圖形組成。
1. 平面海報設計
設計了各種各樣圖形的 Vasjen Katro，不斷嘗試的形狀，顏色和布局也反映了的趨勢，特別是不對稱和開放式布局。
2. Easy Peasy 品牌識別
△ @CFC
Easy Peasy 是韓國著名化妝品公司 Amore 推出的獨立化妝品品牌，以品牌關鍵詞輕松、活躍、有趣和大膽為基礎，嘗試給用戶更加簡單和親切的感覺。品牌用看似自由的手繪波浪線貫穿于整個圖形設計，打造不對稱之美，展現了自由和親近的形象。
移動圖標已成為趨勢很多年了，現在應用交互元素的品牌案例也很多。比起強而有力，靈活而簡單，能隨內容做出響應和更改的交互圖標儼然已成為一種新的趨勢。
1. 國際光影藝術節品牌識別
這是交互圖標的其中一個案例，用簡單的方形作為基礎，延展出各種各樣的形狀和圖案。這些基本元素保持了簡單和最大化的交互式圖像效果。
2. SM 娛樂品牌識別
△ @CFC
韓國最大娛樂公司之?，SM 娛樂開發了一種新的品牌標識來反映其不斷擴展的業務。它將基本圓形改變成了不同形狀與小號和中號產生關聯。靈活的符號和各種顏色的圓形圖案是 SM 娛樂視覺識別的核心。
3. 第 59 屆塞薩洛尼基國際電影節品牌識別
這是電影節一個有趣的識別案例，用卷軸纏繞的圖像代替尋常的電影節標志。它不是固定的，而是復雜紊亂的，以復雜的方式排列各種不同的顏?和圖形，表達了電影節的目的──通過電影傳達多種多樣的故事和情感。
4. 第 6 屆廣州三年展品牌識別
傳遞展覽核心信息，反復復制到三維空間的基本矩形，顯示了展覽的特征。在整個展廳中，你可以看到它以多種變動的形態被應用，同時也以不同的形狀被運用到各式各樣的場景中。
3D 趨勢如此流行，以至于在平面設計趨勢中也不得不討論它。當下有很多的 3D 圖像嘗試用復雜的紋理給大眾展示生動逼真和新鮮感十足的印象。通過在三維幾何形態中，添加逼真的紋理，創造在現實中不可能存在的圖形，人們正在定義一種新的現實主義。
1. 3D 插畫
George Stoyanov 通過組合各種幾何形態來表達形狀之美。這種視覺嘗試很有意思，因為它很難在現實中制作。
2. Adobe Think Tank 視覺圖形
這張圖像由不同形狀，紋理和顏色的幾何物體設計而成，表達了 Adobe Think Tank 包含各種主題論壇的品牌特征。
3. 現代「超級消費者」品牌視頻
將各種各樣的材料和顏色運用到人類行走的形狀當中，傳遞出一種非現實和新鮮感十足的視覺印象。
4. 耐克PG3「舒適體驗」廣告
△ @GRIF
用柔軟的毛皮材料營造耐克的主要感覺──舒適感，非現實的圖形里有著生動的質感，讓人耳目一新。
使用有機圖形并不是一種新的潮流，但我們發現今年也有大量的圖形使用水和油等液體來表達效果。它有時被用作品牌的主圖形，你可以在 3D 短動態圖形中明顯地感受到這種傾向。這種具有強烈色彩和漸變的有機形狀，傳達出一種精致而夢幻的感覺。
1. 有機形態的 3D 視頻
△ @cmttat
有機形態通常以 3D 形式被應用，并且廣泛應用于 SNS 共享的短視頻作品中。今年尤其有很多透明質感的案例，這些透明材質運用各種顏色，使色彩搭配產生變化，營造出神秘的氣氛。
2. 孔雀學會 2018 品牌識別
△ @Irradie
將明亮多彩的漸變色應用于有機形態，這些圖像表達了巴黎電子音樂節的特征。
各式各樣的平面插畫曾經退出過潮流，但現在已經成為一種強烈的設計趨勢。很多品牌都通過聘請知名插畫家的方式，用平面插畫給大眾新的印象。去年以來，除了 2D，3D 角色插畫也成為一種趨勢被應用到越來越多的品牌設計當中。
1. Uber 品牌插畫
運用于尤伯杯品牌新形象的插畫，是其簡潔有序品牌系統中有趣的一部分。
2. Spotify「音樂與你同在」插畫
△ @Circus
這是 Spotify 運用了 2D 插畫的品牌視頻。手繪質感，色彩簡單，人形的四肢都很大是最近的插畫趨勢。
3. Belif 品牌插圖
這是基于三維角色的 2D 圖案設計示例，運用于包裝設計和品牌視頻。
等距設計是一種將二維圖形繪制成三維的方法，最近已成為一種趨勢，在圖形和動畫視頻中被廣泛應用。許多設計師通過運用這種技術，在一個框架中顯示整個圖形，創造有趣和獨特的氛圍，呈現出一種全新的視覺印象。和去年一樣，等距設計在今年似乎也會越來越流行。
1. 等距插畫
經常使用等距技術和彩色漸變的插畫家 Mohamed Samir 設計了一系列富有趣味性的海報。
2. 等距視頻
△ @Matthieu BRACCINI、@Panic Studio
將大物體變成微小模型的等距設計方法能給人留下印象，最近可以看到很多運用了這種方法后，屏幕變得更加特別和有趣的案例。
結合不同媒介的各種圖形，創建有趣的效果是過去常見的一種方式。最近，結合大膽色彩，逼真照片和 3D 圖像給大眾新鮮感受的案例也很多。含有扁平化元素的真實圖片和視頻是 2019 的主要趨勢之一。
1. 3D視頻+2D圖形
△ @Sergio Fuego、@giantantstagram
當 2D 和 3D 圖像組合在一起，立體效果可以更加獨特和突出。這是使用了此方法的優秀視頻案例。
2. 真人實拍視頻+2D插畫
△ @+CRUZ
匡威活動視頻是一個很好地混合了拍攝視頻和 2D 圖形的案例。
3. 真人實拍視頻+發光涂鴉動畫
在真人視頻中添加發光的涂鴉動畫，可以使視頻更具動態性和趣味性。當下，SNS 平臺上越來越多舞者和歌手的視頻都使用這種效果。
4. 運動 3D 的 2D 插畫視頻
有很多作品很難知道它是 2D 還是 3D。用 3D 表達物體運動，而不是簡單地使用 2D 圖形，這種視頻能傳達一種新的視覺感受。
當通過 SNS 共享圖形圖像變得非常普遍時，短小和重復的動態圖形也變得很易見。logo、2D 插畫、3D 圖像和各種各樣的圖形都以短循環動畫的形式共享。
1. 2D 短動畫
這些短視頻通過在簡單的扁平插畫里重復使用短動作，傳達了一種獨特而有趣的形象。
2. 3D 短視頻
由于 3D 是主要趨勢，小而重復的 3D 圖像也值得注意。添加 3D 真實紋理和效果，可以帶來獨特的視覺感受。
AR 和 VR 技術的發展，對平面和多媒體的設計趨勢產生了很大的影響。這些新技術使人們對品牌有更加立體的體驗。
1. Le Graphisme Augmente 圖形海報
盡管是印刷海報，它也允許人們通過印刷材料使得 3D、AR 技術獲得交互式體驗。印刷海報只包含簡單的幾何圖形和極小的信息，但當你通過手機查看時，將獲得更多的信息和看到立體的形狀。
2. Apple Music x Memoji 廣告
△ @Apple
Apple 使用基于 AR 技術的 memoji 來推廣 Apple 音樂。著名藝術家如 Ariana Grande 推出了他們的歌曲，通過這支廣告，Apple 一起宣傳了 Apple Music 和 memoji。
3. Nike：上海 Never Done 運動店鋪網站
△ @AKQA
上海耐克通過 AR 技術實現 360° 網上零售的項目，可以讓消費者根據運動的出汗量來進行購買和體驗服務。
4. 奧迪 Quattro Coaster 廣告
△ @POL
這是奧迪利用 AR 技術的項目，它能讓消費者將汽車從銀幕上帶到自己的位置，從而積極體驗開車的感覺。
5. 2018 年英雄聯盟全球總決賽開幕式
2018 年英雄聯盟的開幕舞臺利用 AR 技術，使演唱 POP/Stars 的真人歌手和游戲里 K/DA 角色一起同臺演出。這些被實時跟蹤的角色，在實際舞臺上帶來了真實的表演效果。
新復古，用現代感覺詮釋復古，已成為一種新趨勢。新復古是一個結合了「新」和「復古」的詞，是對過去懷舊的現代詮釋，不僅是設計，在時尚、建筑、流行文化等各領域都是一種新趨勢。
1. 復古風格視頻
流行于 80 年代和 90 年代的電子游戲，和好萊塢電影的復古圖像與視頻，被重新詮釋后，再一次流行起來。
2. Fritz Coffee Company 公司品牌識別
韓國著名咖啡品牌，Firtz Coffee 創造了的，具有復古 logo 和圖形的品牌標識。
趨勢不會朝一個方向發展，它可以擴展成各種各樣的方式，就像我們看到的反映了趨勢的 3D，AR/VR 技術也包含了復古風格一樣。我們希望這些不同的趨勢能以新的方式被應用，從而創造出新穎而有趣的設計。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
簡介說明1. 原理表述
系統需要在 400ms 內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率。
2. 實驗背景
上世紀 70 年代后期，計算機研究人員依然認為計算機可以花費兩秒的時間對使用者的操作做出反饋，因為他們認為人們大概正好需要兩秒時間來決定下一步的操作，所以 2s（2000ms）一度成為了當年計算機響應時間的標準值。直到 1979 年計算機的算力開始大幅提升，也有了足夠的能力在 2000ms 內做出響應，這時 IBM 的研究員 Walter Doherty 進行了一系列研究來評估算力的增長對生產力的影響。
研究結果表明，計算機的響應速度直接影響了使用者做出下一個決定所要花費的時間（這個時間被稱為用戶響應時間），換句話說，計算機相應的時間越長，用戶就要花費越多的時間來思考和決定下一步的操作。
上面這張表格充分說明了這一觀點，橫縱坐標分別為用戶響應時間和系統響應時間，我們可以看到系統響應時間如果從之前的 2000ms 降低到 300ms ，使用者作出下一步指令所需要的時間就能夠縮短 5s 以上。Doherty 認為人們會將工作需要的一系列操作步驟存儲在短時記憶之內，如果系統響應時間太長，就會打斷人們的短時記憶，換句話說，思路都不連貫了。
不僅如此，Doherty 還認為響應速度低于 400ms 的系統或者程序，會讓人上癮。放在當下的環境來看，這當然只是一句比較夸張的話，但是結論是需要我們重視的，程序的響應時間，務必在 400ms 之內。
要說「多爾蒂門檻」帶給我們的啟示，上一節最后一句已經表達得足夠清楚：系統或程序的響應時間小于 400ms 。為了讓讀者有更加直觀得感受，我們先來一組小動畫感受一下高響應延遲有多讓人抓狂，快速響應又多么讓人舒服：
應用案例 1：模擬延遲效果
注：請務必挨個觀察，不要看整體，看單個的效果。
從動畫中可以感受到，50ms、200ms 還算可以讓人接受，當響應時間達到 600ms 時已經讓人有些不耐煩，而達到 1000ms 時會讓人不自覺多點幾下，2000ms 時我手機已經被我砸了。
在如今的計算機算力之下，響應時間輕輕松松便能夠達到多爾蒂門檻的閾值，甚至能夠遠比 400ms 更小，但是這就夠了嗎？「多爾蒂門檻」說到底只是給出了響應時間的上限，400ms 的響應時間或許在多爾蒂那個時代確實能夠大幅提升操作員的操作效率從而產出更大的經濟效益（比如銀行系統），但是現在互聯網已經越發成熟，不少公司的用戶體驗研究者都已經意識到，系統響應時間已然不是影響用戶響應時間的唯一因素了，另一個因素是過渡動畫的持續時間。
就像谷歌在 Material Design 中明確規定了過渡動畫的 Speed 這一項，這是為什么呢？用戶體驗是一門關于情感和邏輯的學問，而不僅僅是一個統計數字就能解釋的，讓程序對某一操作的反饋時間（包括響應+動畫）符合用戶對該操作的預期才是讓用戶「上癮」的關鍵。
應用案例 2：iOS 中的動畫
所以，哪怕我們的手機、電腦已經可以做到在 100ms 之內做出響應，快到完全有能力在用戶反應不過來的情況下給出反饋和結果，但是這樣是不夠的，我們依然需要「合適時長的」動畫作為計算機反饋和大腦反應之間的潤滑劑，而不至于讓程序使用起來太「干澀」，也不至于讓大腦一直處于應激反應的階段而感到疲勞。
在真實世界中我們使用應用時會發現，有時候響應速度沒辦法做到如此迅捷快速，比如 APP 啟動時；還有時候即便系統可以響應，網絡卻不行。網絡并不能在用戶操作的一瞬間就把所有需要的資源都下載好，用戶必須等待幾秒的時間，那么這時候就需要考慮如何減少用戶等待的焦灼感，優化等待的體驗。
比如有趣的加載動畫、閃屏頁等，都算是解決辦法。
應用案例 3：Netflix 的啟動動畫以及新草的加載動畫
動畫的持續時間應當在適當的區間中取到最短，而不能太突然或太緩慢。
反面案例 1：過快或過慢的動畫
在現實的上線 APP 中，也會有故意把動畫做得很慢的例子，這比較影響操作的流暢性。
反面案例 2：Eggzy
左右滑動的時候動畫效果在實際體驗中非常慢，對于想要進行連續滑動操作的用戶（即便這樣的使用場景不多），已經慢得無法忍受，有一種「不跟手」的感覺，這么慢的動畫已經很輕易就能讓用戶感受到自己在等它了。
仔細瀏覽 Material Design 中給出的案例便可以發現，動畫的持續時間大致可以參照以下幾條規律去嘗試：
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
為什么要構建 MIZ Design？隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們在設計上積累了越來越多的債務。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設計師來設計，前端也是由不同的開發來實現，這直接導致了整個 APP 越來越臃腫無序，視覺和交互體驗不一致，且團隊溝通成本高，重復勞動力大，輸出效率低，迭代速度慢。
開發層面
場景：
設計師：涉及到這個組件的頁面都改一下吧。
開發：改不了，每個頁面都是單獨寫的，改起來非常麻煩，耗時間耗資源耗人力。
設計師：為什么同樣的組件要單獨寫？
開發：我怎么知道，這是以前的開發寫的，而且寫的亂七八糟。
設計師：……
那怎么辦？不改也得改呀?？偛荒芤恢绷糁@些大大小小的毛病，不解決問題會越來越嚴重。
代碼混亂，遺留了非常多的開發層面代碼不一致的問題，后期迭代的過程中如果不統一，也會使整個系統失去可控性。
設計師層面
場景 1：
設計師 A：這個頁面是誰做的？源文件有嗎？
設計師 B：不知道哎。以前的設計師做的。去庫里找一下吧。
30 分鐘以后，依然沒有找到源文件。
場景 2：
開會：為什么這個項目的頁面和以前的風格差很多？
設計師 A：現在流行的就是這個風格呀，多好看。
設計師 B：雖然設計每年都有流行趨勢，但還是要和產品品牌風格相結合。
一個項目兩個設計師負責，設計出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風格完全不一致。在 2 個設計師完成設計以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發需要根據不同業務中的不同設計師的「創意」來進行人肉修改。
當我們開始設計新的頁面，功能需求點優化的時候，這個問題變得更加嚴重。同時，因為沒有一個統一的基礎設計規范原則，設計師在設計項目的時候，在設計決策和討論中花費了大量時間，會存在大量的重復勞動。同時由于產品的界面和交互缺乏一致性和可預測性，用戶體驗也受到了影響。整個產品也會在風格定位上不統一，沒有確定產品風格特質的情況下越來越模糊，失去自身品牌該有的特性。
產品迭代，基本上是基于新功能的開發設計迭代，新的功能、新的頁面不斷的增加，對于設計師而言，有設計規范的原則做基礎設計框架，更容易延續 APP 統一的設計風格，不至于被不同的需求，不同的設計趨勢以及蠢蠢欲動的新的設計靈感牽著鼻子走，導致越做越亂，無章可循。
一個 APP 就像自己的孩子一樣，從一個嗷嗷待哺的嬰兒逐漸長大成人。設計系統就好比一個人的生物系統，是整個生物體的基礎。如果對此系統不維護，那么此系統將會隨著時間的增長越來越脆弱以及呈現不可逆的現象。那么如果維護好一個設計系統，骨骼會在成長中呈現規律清晰的生長模式，會隨著業務的生長而生長，可控制、可更新，使生物體健康的發展然后去完成它的使命。
Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續、可擴展、可統一的、可區分的視覺指引手冊，指導相關設計結構完成統一性與對外區分性。具象層，它是一種設計方法；抽象層，它是一種思考模型。
最近幾年，「Design System」這個詞非?；稹Ｏ旅娼榻B紅遍全球設計界的兩大設計規范網紅。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創造一個將經典的設計原則和科技、創新相結合的設計語言，并且在不同設備上提供一致的體驗底層系統，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。
一經發布就紅遍了全球設計界。新穎的設計理念，清晰明確的設計原則，詳細的設計規范，使之成為完美的安卓端標準設計規范。也給設計界的設計師們提供了非常好的參考，很多設計師也根據 Material Design 設計原則延展出更多的創新設計可能性，制作了各家的設計規范。
出了官方的 Sketch 組件庫以后，谷歌團隊還開發了基于此設計規范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會上，Google 設計團隊開發了一款叫做 Material Theme Editor 工具，可以幫助設計師輕松且快速創建符合自身品牌又符合 Material Design 風格的應用。
設計價值觀
設計原則
材質是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質，包含了材質如何接受光的影響以及所形成的光影效果，并且對紙張的質感和墨水的介質重新進行了構想。
大膽，圖形，鮮明：Material Design 基于印刷設計的指導原則，字體、柵格、留白、顏色等元素都以創造層次、意義和焦點為基礎來讓用戶沉浸在設計體驗中。
動效賦予意義：微妙順暢地反饋和過渡性的動作效果，引起用戶的注意力并使之保持持續關注。當元素出現在一個界面中的時候，元素之間的互動重塑了環境。
基礎靈活：Material Design 同樣旨在實現品牌價值的傳遞。結合了基礎的代碼、組件和元素，可表達不同的品牌需求。
跨平臺：Material Design 的 UI 組件庫可在不同的平臺共用，不論在安卓平臺、iOS、Flutter，還是 Web 都可保持一致的組件元素。
iOS 的人機規范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規范那么細致全面，但是核心的設計原則在每個組件的設計說明中都有滲透。作為 iOS 系統的設計基礎，建議每個設計師都需要仔細研究。
iOS 設計價值觀
iOS 設計原則
Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗，產品功能和用戶行為的有效結合。比如當一款工具類 APP 主要是幫助用戶完成一項任務時，設計師應關注于用戶操作本身的行為路徑，和產品功能相結合來幫助用戶完成目標，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵引導用戶探索的同時也有非常棒的操作體驗。
Consistency 一致性：一個保持了一致性原則的 APP，通過使用標準的控件、熟悉的 icon、標準的文字規范、統一的組件俗語來實現一個擁有標準化范例的系統。這個系統提供的特性和交互行為也符合用戶的心智模型和預期。
Direct Manipulation 直接操作：讓用戶在屏幕上直接對內容進行操作的交互行為，可以鼓勵用戶和系統進行交互并且更易于理解。當用戶翻轉屏幕或者使用手勢直接與屏幕交互時，他們會感知到直接操作的行為，并且能立即得到操作結果。
Feedback 反饋：反饋能夠響應操作，呈現結果，使用戶獲得信息。手機中內置的 iOS 應用程序為用戶的每一個動作提供可感知的反饋。交互元素在點擊時會凸顯被高亮顯示，進度指示器顯示了需要長時間運行的操作進度、動效和聲音，使用戶能夠更清晰地感知交互行為的結果并作出響應。
Metaphors 隱喻：當一個 APP 的虛擬對象和操作路徑與用戶本身所熟悉的心智模型一致時，不管它是來自于真實世界還是數字世界，用戶都能很快上手。隱喻之所以有效果，是因為用戶和屏幕存在物理上的交互。用戶可以通過移動分層視圖來顯示手機上被遮擋的內容；拽拖并且滑動對象，切換開關，移動滑塊，滾動數值選擇器，用戶甚至可以通過翻轉手勢來翻閱手機上的雜志和文章。
User Control 用戶控制：在 iOS 系統中，用戶是主導者，而不是 APP。APP 可以提供行動建議，給予警告提示，但是不應該替用戶做選擇。優秀的 APP 始終會在用戶主導和用戶不想要出現的結果中保持平衡。一個 APP 應該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預期；對有破壞性的操作可確認；對錯誤操作可取消，即使是在進行中的行為也可中斷。
在 Sketch 工具中可直接下載 iOS 的組件庫使用。
在 2016 年，由工程師和設計師組成的團隊創建了 Airbnb 的設計語言系統 （DLS）的第一個版本，其目標是創建一致的體驗和跨平臺的統一。DLS 包含了一套內部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設計、工程和其他學科的共享詞匯表進行快速迭代。DLS 的結構簡單而連貫，簡化了團隊之間的溝通。并制定了以下幾條原則來指導 DLS 的設計：
ADS 開源庫
Airbnb 設計副總裁 Alex Schleifer 在 IXDC 2017 國際體驗設計大會上分享了這一創新的 React Sketch APP 管理設計系統，這是為 Airbnb 的設計系統而設計的，其實就是個實時更新的代碼數據庫，可以實時查詢 Sketch 數據和代碼，也可以下載圖標、設計模塊，所有工程師和設計師都可以免費下載?？吹竭@個，我想完美共享庫也許并不是那么的遙遠。
Airbnb 團隊在設計 DLS 過程中，也是通過原子組件的方式來構建整個框架，我覺得他們對于設計系統的理解非常對：「一個統一的設計語言不應該只是一組靜態的規則和原子組件構成，它應該是一個可持續發展的系統?！顾栽跇嫿ê玫讓拥脑O計語言之后，可持續性、可發展性，是維護并讓設計系統產生價值的重點。
隨著商業化的趨勢，越來越多的企業級產品對擁有更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻金服體驗技術部經過大量的項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 Ant Design?；凇复_定」和「自然」的設計價值觀，通過模塊化的解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
設計價值觀
自然，讓人機交互行為更自然。
自然規律運用到設計中，自然界的方方面面都會對用戶行為產生深遠影響，設計者應該從其中汲取靈感，并運用到當下的設計工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。
自然的人機交互核心：節能。既要節省身體運動的體力，更要節省大腦思考的腦力。
那么如何在設計中體現呢？
確定，保持克制、對象設計方法、模塊化。
設計者需要做出更好的設計決策，給予研發團隊一種高確定性、低熵值的研發狀態。同時，不同設計者在充分理解業務訴求后，基于 Ant Design 體系都會有相同且符合當前業務特性的設計產出。
給予用戶確定感，結合 Ant Design 的三個關鍵點，可以總結為邊界和規則 2 個方面：
構建米莊設計系統的目標是什么？
意義
有了規范和控件庫，設計師在接受需求的時候，可以減少設計成本，提高設計效率，尤其是在用于快速迭代產品的階段，通過大量的標準化組件即可實現縮短設計周期的效果，并且設計師可以更專注于深耕體驗和細節，同時能保證高質量的輸出。
構建一個設計系統來支撐產品的所有業務線，解決團隊協作一致性問題，產品的周期性更新問題，解決不同的設計師和工程師規范性輸出 UI 的問題，最終從設計驅動商業的層面上，解決用戶體驗一致性，迭代開發的問題。
時間
APP 進入穩定發展階段，也完成了基礎功能的開發，在業務穩定發展的前提下，構建已有 APP 的整體框架，規范前端開發和設計流程是個好時機。在產品發展到穩定階段、參與的人越來越多時，對整個 APP 的頁面整理是非常有必要的。也為了后續快速發展的業務起到完整系統地支撐能力。
人力
相信幾乎在所有的公司和團隊，規范建立都是非常有價值，也非常耗費資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統。沒有上線落地的視覺規范只是耍流氓。所以項目啟動的時候，團隊分工必須明確，你們是一條船上的人了。勢必要有劈浪前行，破釜沉舟的決心。
場景
所以在項目開始之前，便需要和整個團隊統一目標意義：視覺規范的建立，除了保障統一的用戶體驗和認知，還能夠通過工程師代碼層面的組件化提高開發、設計效率。整個設計系統的開發，從設計到落地，需要產品、設計和前端的全力支持。
雞生蛋問題
即使我們看了很多設計系統范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當我們還沒有組建一個 UI kits 組件庫的時候是如何來搭建一個頁面的呢？是先有了組件，然后創造了模塊頁面；還是先設計了頁面，然后再來歸納總結出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。
原子理論
在學習其他公司如何搭建設計系統的時候，我們了解到了 Brad Frost 的原子設計理論。他提出了原子設計原則，并且在他的文章中有一句非常出名的引用：
we’re not designing pages, we’re designing systems of components.──Stephen Hay
概念
2013 年網頁設計師 Brad Frost 從化學中受到啟發：原子（Atoms）結合在一起，形成分子（Molecures），進一步結合形成了生物體（Organisms）。于是提出了原子設計方法論，由原子、分子、組織、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。
原子設計的五個階段
原子（Atoms）：符號，為頁面構成的基本元素。例如顏色、字體，或是一個圖標等。
分子（Molecules）：組件，由原子構成的簡單 UI 組件。例如，一個表單標簽，搜索框和按鈕共同打造了一個搜索表單分子。
組織（Organisms）：模塊，由原子及分子組成的相對復雜的組織，在 UI 頁面中可視為模塊/樣式層級。
模板（Templates）：原型，將以上元素進行排版，顯示設計的底層內容結構，在 UI 設計中對應的是原型圖層級。
頁面（Pages），將實際內容（圖片、文章等）套件在特定模板，頁面是模板的具體實例。
特點：
從 Brad Frost 的原子設計理論得到啟發，將我們 APP 產品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個詳盡的庫幫助我們以一種更合理的方式構建了一個設計系統的底層框架。
這個理論提出來以后就產生了非常大的轟動。并且至此以后 Atomic Design（原子設計）成為了構建 Design System 的核心指導理論。
Sketch工具
Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產品設計的未來。」我們可以使用 Sketch Library 功能實現組件庫的創建。而組件庫的底層邏輯就是原子設計理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構建組件和樣式。
Text style：Text Style 用于設置文字規范，在一個系統中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個系統中的字體樣式，可使之便于管理和修改，保持系統的可持續性和可用性。并且可單獨輸出字體樣式系統進行團隊之間，不同項目之間的共享。
Layer Style：可編輯元素的各種樣式，比如用于制作顏色規范，涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容。可使元素保持一致的圖層樣式。
symbols：設計系統中的任何元素都使用 symbols 來形成符號，可復用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號進行嵌套組合，可形成符號嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會形成符號嵌套層，作為不同符號組件的分層。同樣的對于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。
Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個組件庫，可通過共享形式，來使它成為團隊的設計工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態。
在確定了原則和工具之后，我們為設計系統項目制定了完整的項目計劃，因為涉及到上線和設計兩大塊，所以項目也是分設計線和落地線，兩條線既有關聯性，又是相對獨立和分離的。組件設計完成以后才可上線落地，因推動落地的過程是需要整個設計開發團隊的，不管是從時間還是人力上的資源協調和配合，所以落地線需要更加靈活。
設計階段 – 設計線
目標結果 – 設計資產
設計階段，我們所產出的設計資產包括設計價值觀，設計指導原則，以及設計模式（解決方案）。
展開實施 – 任務細分
確定了設計資產以后，我們將設計資產進行細分。整理規范的內容并對每個組件進行優先級的確定。整理規范內容的過程也是一個逐漸完善的過程，第一次整理可能并不完善，但是沒有關系，先把基礎框架和內容整理好，后續在設計過程中有遺漏的再進行添加。
內容整理好以后，我們會發現一套規范里內容非常多，所以需要根據項目時間來安排所有內容的優先級和分工。根據我們的設計系統的底層邏輯，所以我們將核心組件建設放在第一階段，比如字體、顏色、icon 等。構建了基礎元件以后再來搭建模塊，最后再根據不同場景來確定樣式。至于分工，最好整個設計團隊的人員都可參與，互相分擔工作量以達到工作效率最大化。
整體內容確定以后，因每個組件的整理有規范可循，所以我們針對每個組件的設計過程也確定了單個組件的設計流程。
過程跟進 – 關鍵節點
在設計過程中，我們也需要對關鍵時間節點的項目整體進程和結果輸出總結。此階段是和上線的項目節點重合的關鍵點，設計輸出的內容會和上線過程有非常多的磨合，一個組件的落地還需要不停的和開發溝通，收集反饋意見，并且進行調整修改，記錄解決問題。
執行復盤 – 結果驗證
在每個組件的設計過程中，我們都會反復完善每個組件的內容，包括設計原則、交互細節以及應用場景等。反復去驗證組件的可行性。并且對階段性完成的設計結果進行復盤和分享，進一步來驗證設計方案的可行性。規范需要不停地優化創新，才能讓它的可持續性特性發揮至最大。
上線階段 – 落地線
沒有上線落地的視覺規范只是耍流氓。
設計師自嗨并無意義。推進的過程，最重要的還是溝通。溝通的內容包括組件輸出的合理性、開發工作量、產品版本迭代需求計劃等。
愿望如此之美好，現實如此之貧瘠。
設計從落地到上線的過程想必每個設計師都有大把心得。在公司中實際的推進是非常難的，因為產品需求永遠都做不完，開發永遠在寫代碼，設計永遠需要將先完成業務需求設計為前提。所以如何將設計規范的內容插進項目中是個最關鍵的點。
存在問題，根據項目的時間安排和產品迭代安排，我們試圖將不同優先級組件的內容分配到不同的產品迭代中。實際卻證明這非常的理想化。在這個過程中我們遇到非常多的問題：
解決方案：
APP 在建立的時候沒有規范性，所以現在想要規范所有的內容就是一個非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。
我們的核心組件在產品迭代中完成上線以后，將剩余的組件規劃至開發的重構版本中進行開發。減少資源的重復使用，以及最大化降低對 APP 的影響。我們衡量了利弊之后，決定此次規范的設計對于樣式的修改減少到最少，保持和線上內容的一致性。很多時候我們設計師對于設計趨勢是很敏感以及非常想要去創新的，但是基于現狀下保持對樣式的克制完成基礎體系的搭建這個核心目的，是最重要的事。
MIZ Design 的設計資產中設計價值觀是貫徹整個產品的迭代發展，是產品持續迭代的指明燈。設計原則是團隊成員建立設計的標準指導規范；設計資源庫貫徹設計師、開發和產品，實現產品迭代。我們也非常愿意分享這個過程，希望對大家建立設計規范整個流程有所幫助。
When your values are clear to you,making decisions becomes easier.──Roy Disney
當你認清自己的價值觀和行為準則后，決策就輕而易舉了。價值觀是指明燈，貫徹整個產品系統。我們根據米莊品牌的特性，以及業務場景的需求來定義 APP 的設計價值觀，指導 MIZ Design 的設計語言的建立。
品牌特性
米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價值觀來驅動業務增長。
業務場景
米莊作為金融工具類產品，功能操作場景不算復雜，強調一致性的用戶體驗和安全規律的操作路徑。這也體現了產品對于不同頁面元素之間的相互關聯性和一致專業性的要求。
用戶調研
結合我們進行的用戶調研報告，米莊產品的核心用戶對我們產品的需求是賺取零花錢居多，也就是利益的獲取。所以針對明確的用戶目標，我們對于整個產品的設計需要以產品可操作性、性為第一原則，呈現的視覺層以安全可靠，清晰明確為風格導向。
從以上三個方向，我們概括了設計價值觀核心的三點：
格式塔心理學
心理學的完形法則：相似、相近、封閉、簡單。
MIZ Design 的設計原則參考了格式塔心理學，取人和萬物交流的過程中，大腦最基礎的一些精神反射和行為操作，格式塔心理學的理論主張研究意識和行為，強調經驗和行為的整體性，這也符合了米莊的設計價值觀里關于效率和自然的定義。所以我們參考此心理學來幫助團隊順暢地溝通，減少信息不對稱以及學習成本，作為協作的基礎。
第一性原理
埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結果出發，把事物分解成最基本的組成，看透事物的本質，從源頭解決問題。這和原子設計理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實踐者，他將此原理視為科學界和商界非常古老的一條守則。
奧卡姆剃刀原理
Entities should not be multiplied unnecessarily.
如無必要，勿增實體。
奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速決策和判斷認知行之有效的工具之一?？梢院唵卫斫鉃楸３质挛锏暮唵涡浴Ｔ诟鱾€學科，各個研究領域都有發展。這個原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個穩定的，持續自我生長的系統，發展原則是盡量保持簡約之道。
設計資產層面，我們輸出的內容包含了以下兩大部分：
MIZ UI KIT_3.0 LIBRARY：
MIZ UI KIT 說明文檔：
開發層面 – 溝通，減少重復
基于 UI kit 創建的組件庫，幫助他們在最終產品中保持代碼的一致性和復用性。并且設計語言作為一種工具，是整個團隊順暢溝通的最重要的語言。所以我們確保我們的設計語言，是能夠讓開發，產品都懂，并在第一時間執行的。既然是語言，那么每個元素都會有自己的名字。每個組件，甚至每個組件中不同屬性的元素我們也賦予它名字。
無名萬物之始，有名萬物之母。──《道德經》
我們的祖先發明語言文字的過程，其實就是一個給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會有文化偏見和個人信息資產的反應。所以我們需要給設計系統中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產品的特殊語言。
場景：
開發：#000和#00000000分別替換成什么顏色？
設計師：#000，替換成 black-1
開發：那#00000000呢？
設計師：一臉茫然，這 2 個不是一個顏色嗎？
慣性思維，色值在設計師眼中，對應的是一種色彩，而在開發眼中只是一堆數字。將心比心，當你扔給開發一個色值的時候他們只是一個難過的問號；而當你給他們具體的一個顏色的名字，他們能馬上對應到這個名字，那么就是順暢的。
所以當我們給顏色命名以后，溝通就變成了以下這樣：
設計師：#ff5600 換成 orange-2。
開發：好的。修改完成。
設計師：#ff3450 全部替換成 blue-2。
開發：好的，替換完成。
設計師：這次我們品牌升級，orange-2 的色值更改為 #ff5666。
開發：好的。全局修改完成。
雖然修改的過程比較辛苦，但是結果是好的。從此設計師掌握了話語權。當然，開發也很高興。
不單單是色彩，我們對字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產生價值。
設計層面 – 輸出，快樂傳承
設計師們可以更加便捷地創建、分享、定義設計界面的內容。此外，在設計傳承方面，也能讓我們更好地將設計原則傳遞給新人。
場景：
設計師 a：此次版本迭代涉及到優惠券頁面的優惠，這個頁面的字體和顏色有規范嗎？
設計師 b：有的。請參照設計規范。
不同設計師在接到需求開始設計以后會擔心：怕風格有差別，怕頁面不統一。辛苦做好頁面以后發現和別的設計師同時做的差別很大，也不符合產品整體品牌調性，陷入循環改稿中。此時設計規范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點。
同步更新：設計資產的目標用戶，除了團隊中的前端開發，那么最大受益者其實就是設計師們。設計系統的一大優點便是修改設計系統中任何一個原子，整個系統所有這個原子都能感知到。這便是設計系統的可持續性、統一性，也是設計系統的基礎。
△ 組件庫中的任何修改，會同步到所有使用該庫的文檔中
自定義內容：組件中的內容都可自定義進行修改。
解放重復生產力
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer
這句話的道理和我們的設計原則中第一性原理相通，從原理出發，一步步往前推演，直到找出適合該問題的解決方法。這和在構建設計系統的時候是一個道理。學習從元認知能力開始，而組件一個系統，從元件開始。埃隆·馬斯克從組成汽車的發電機開始思考，創辦了特斯拉；從底層元素的創新開始，才會有產品整體性的創新。
最后補充一下結構圖：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Loading動畫，在現在的設計中已經是一個必須要設計的系統元素，它能減緩用戶等待焦慮的心態，也能用來作為品牌透傳，增加曝光。
那關于loading動畫相關知識，我覺得對于設計師來說是有必要去了解的，所以我找到了這篇優秀文章，讓大家能夠深入了解loading動畫，透過現象看本質，學以致用。
圖片來源：Domaso
沒有人喜歡等待
在用戶心目中，優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。
舉一個真實的例子：最近我們新發布了一個用戶評價的應用，第一個版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認為這3秒是一個故障。在實際開發中，你可能要面對龜速的網絡，沒有優化的代碼，操作時間長或數據處理太多等問題。因此，App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會，但絕大多數人會立即退出它。
除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么？是操作錯誤還是在等待服務器的請求？用戶需要等待多長時間才能正常使用這個工具或網站？用戶為什么要等待呢?
讓我們一起深入了解Loading動畫：
1、loading動畫的歷史由來
2、優秀loading動畫所具備的特征
3、細節可以做出精彩
4、簡單處理還是精心制作
loading動畫的歷史由來
對于這種類型的反饋，設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程，以減少用戶的心理焦慮。
你覺得設計師是從什么時候開始考慮加上這種反饋的？
我很驚訝的看到關于Nielsen Norman的一篇文章，提到響應時間和loading動畫是在1993年（參考1985年的資料）：
如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋。【Myers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】
顯示進度的三個主要優點：向用戶保證系統沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993
自從Web 1.0以來，幾乎每個網站都有loading狀態，用戶可以注意到當頁面內容正在loading時，這些Loading動畫活躍的身影。
在2007年的時候，網站的Loading形式大概是下面這張圖上的樣子：
2007年時的Loading
在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。
到了2010年，隨著CSS3的迅猛發展，出現了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。
在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網頁都做了一些很有創意的loading動畫：
30個創意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
漸漸地，設計師們開始不滿足于簡單的進度條和旋轉Loading，到2014年-2016年的時候，變得更加關注這塊的設計。所以，你能發現更多關于loading教程，免費的Loading設計資源，插件和開源項目。
2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
設計趨勢和方法已經發生了變化，但向用戶提供有效反饋的原則依然需要遵循。
優秀loading動畫所具備的特征
在一個完美的世界里，loading動畫應該：
盡可能少的顯示給用戶
如果你的工具或網站工作的足夠快，那就是非常完美的。或者至少要使得它們的速度符合用戶的預期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應該是解決內容的loading問題。
給出具體時間
它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募扛滦枰嗌俜昼?？已經進行到了什么階段？這些體驗上的設計細節都可以給用戶預期并減少焦慮。
宇航員數據loadingby Cream M.
告訴用戶為什么需要等待
一些應用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應該要告知用戶等待的原因以及等待的背后軟件正在做什么：
文件獲取動畫 by Vinoth
讓我們說回我的案例，那個反饋工具軟件。當我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：
好的loading動畫
讓等待的過程不那么讓人無聊
可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。
動畫來源：Alex Kunchevsky
減少用戶等待時間的心理感知
這與上面提到的一點非常相關，如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。
蛋糕loading by Pierre Kleinhouse
透傳公司品牌形象
如果用戶在用你的應用或者網站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設計細節：
BCG的車票應用動畫 by Antonin
細節可以做出精彩
雖然有些人可能會認為Loading只是一個很小的UI細節，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環的loading圖和骨架圖。
進度條
當可以明確loading時間時使用，進度條可以通過數字或視覺化的形式來表現。
有數字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創意，需要對你的用戶業務表達更有效：
一個app loading頁 by Nguyen Tran
你也可以找到有趣的進度條和循環動畫結合的loading圖。
Loading動畫by Dragonlady
進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同，進度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子：
Gamil loading和一個創意loading動畫 by Allen Zhang
無限loading動畫
當loading的時間是未知的時候來使用，它可以是默認的旋轉圖，也可以是一些創意動畫，顯示應用正在做一些事情。
計算loading圖標 by Hoang Nguyen
創意性loading動畫一樣可以與業務緊密相關，并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫？
LittlePin Spinner by Daniel Sofinet
無限循環動畫要求用戶在上傳或執行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。
如你所見，如今的loading動畫不僅僅只是一個系統狀態的UI元素。
骨架動畫
骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內容。
這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。
舉個栗子，如果你使用的是網頁設計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數據：
Figma UI
簡單處理還是精心制作
除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念，在目前大多數應用中，你可能能看到還是一個默認的Loading。
有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb）。使用默認的或開源的loading要容易的多，不需要設計師和開發花心思來設計和實現它。
如果你正在開發MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創意，也并不會對你的產品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節，日益成熟的設計公司，更好的科技環境，更方便的設計工具，這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現自己設計能力的一種方式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在設計的時候，各種視覺要素以有序的方式排列，設計師需要通過對各部分空間的精妙設置來實現這一點。通常而言，我們的目光總會被最引人注目的部分吸引——無論它是視覺主體還是負空間。視覺主體和負空間，兩者都很重要，尤其當你需要平和地呈現一個和諧、連貫、天衣無縫的設計。那么在一個網頁設計作品中，設計師到底利用空間傳達出怎樣的一個故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。人類的大腦天生就能把規律性的散點連接起來，并對目之所及的事物賦予意義。設計是一個創造性的領域，是形式和空間的相互融合，并隨之創造各種各樣的體驗。無論我們接觸到什么樣的設計作品，我們的大腦都會本能地將作品解構為更簡單的各個組件，這些組件由基本的形狀和不同的形態組成，而這些形狀和形態則與空間息息相關。過往豐富的體驗與經歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識別出這些特定的設計形式。
正空間，或者說顯著的設計主體，構成了設計的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負空間多數情況下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個以正負空間之間有著強對比的經典設計案例。
就像正空間似乎支配著負空間一樣，兩者都被用來平衡地傳達一個和諧、連貫的設計理念。
在平衡的構圖中，設計的正負空間都是相互配合、相互補充的，形成一個無縫、美觀的整體。相反，不平衡的構圖會讓觀眾感到不適，傳達出一個不完整的、扭曲的故事。
網頁設計的好壞很大程度上取決于它的實用性和可用性。如果你的設計技巧很差，那么網頁設計的整體效果和表現都會受到影響。但從另一個角度來看，在「內容為王」的時代，如果空間布局使用不當，內容將對您的網站產生顯著的負面影響。
如果你認為你的開發技能很棒，但你的設計技能可能需要更多的改進，那這篇文章對你就太合適了。在本文中，我們將討論：
我們還將討論一些真實的網頁設計實例，探討每個案例如何體現格式塔原理，以及它對空間的創造性使用。
話不多說，一起開始學習吧。
空間由兩個主要維度組成：正空間和負空間。正空間是可被直接感知到的視覺元素，負空間則為元素以外的留白和間隙。如前所述，正的是物體，負的是物體后面可以通常被忽略的留白區域。一個是焦點，另一個是背景。在前者產生活動和刺激時，后者則保持靜止和模糊。一個是月亮，另一個是環繞著它的暗夜。
在網頁設計中，正負空間相互作用，共同形成構圖，傳達理念。只有當正負空間通過對比來區分，同時又向更大的區域延伸時，才會產生視覺層次（腦補一下陰陽太極圖吧）。
正負空間的交匯之處就是信息的交匯點。負空間拱衛著正空間元素，讓后者更加突出和顯著。
通常而言，正空間在絕大多數時候起主導作用，實際上負空間同樣重要。負空間的優點在于:
設計中的負空間相反并不是負面的。當正負空間比例平衡得當時，兩者在視覺上會顯得非常舒適。而當其中一個占據主導地位，并給人一種「過于擁擠」或「空洞無物」的印象時，混亂才會發生。在這兩種情況下，受眾都無法處理如此復雜的信息，因此，而這樣的空間設計是不符合網頁設計的基本原則和設計動機的。
這是一個網頁模板，它展現了何為「內容錯位」和「空間混亂」:
△ 布局混亂
△ 空間失衡
△ 適當的布局調整
△ 網頁設計中空間的合理運用
有意思的是，當談到空間的概念和布局出現時，質疑聲也隨之而起。
類似的問題只能在理解基本概念后再來作答。黃金經驗法則告訴我們——簡單是最好的策略。
在文章開頭，我曾提到在設計網頁的時候，盡量創建簡單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶。或從表面上看，網頁設計的重點在于增加網站的視覺吸引力，使用戶操作更為簡便。
我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯系。因此它會將當前的視覺信息與之前的經驗進行比對。為了成為一名的網頁設計師，你必須先了解大腦是如何感知周圍環境的。它可以幫助你選擇特定的視覺元素，利用它們來影響觀眾的感知。
偉大的設計師明白心理學在視覺感知中所扮演的強大角色。當某人的目光與你的設計作品相遇時會發生什么？他們對你的文章所傳達的信息有何反應？——勞拉·布什，Autodesk 品牌內容策略師
作為設計師，你必須清楚地了解視覺設計和心理學是如何相互聯系、相互影響的。換句話說，開發以用戶為中心的簡單界面，借助正負空間進行設計主要依靠格式塔原理，它可以幫助你理解和控制視覺和心理的聯系。
格式塔在德語中是「形式」的意思。它更多的是一個概念而不是一個單純的詞匯，它最基本的概念是：
整體大于各個部分的總和?！獛鞝柼亍た挤蚩ǎ兰乱嵝睦韺W家，格式塔心理學的代表人物之一）
當單個部分的集合以某種方式統一時，它們在我們的感知當中就是一組。我們把元素看作一個整體，這一概念或理論基本適用于所有的設計媒介：我們不把文本、顏色和形狀看作單獨的元素，而是把整個網頁看作一個整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們在看海洋時看不到水滴一樣。
格式塔原則描述了當特定的條件出現時，人類大腦是如何感知視覺成分的。它幫助大腦創造視覺圖像。因此，格式塔原理通常會應到下面六個主要類別：
1. 圖像和背景
「圖形」是直觀地、明顯地與背景分離的物體。
目前最經典的例子是圣杯——兩個鏡面對稱輪廓構成了花瓶。當你第一次看到這張照片的時候，你的眼睛會立即被吸引到畫面上看起來最聚焦的視覺主體上，可能是相互對立的面孔，也可能是花瓶。當你的大腦在調整你的焦點時，背景或花瓶被模糊了，在那一刻，你的大腦直覺地在圖像中感知到背景。
過了一會兒，你會注意到背景中的花瓶，并意識到它本來就在那里。盡管圖形和基本原則看起來模棱兩可，設計師常常創造視覺上吸引人的超現實和虛幻藝術，并將之運用于網頁設計。
有時，圖形與背景之間的關系是穩定的，而這種穩固的視覺關系使得兩者之間，產生區別。這種關系有的時候又是不穩定的，這意味著圖形和背景是無法清晰區分的。由于這種關系的模糊性，用戶會很自然地開始困惑。
為了讓大家直觀地感受到圖形和背景之間的關系，讓我們詳細的拿幾個案例來進行討論。這些例子都集中在圖形-背景關系中的三個主要方面：對比度、Box 區塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關系到內容的區分和視覺的縱深。
在下面的第一個例子中，Trellis 使用了一個全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關系明確，該關系清楚地展示出了細節、色彩和尺寸上的差異。
頁面中的文字是位于中央的手寫風格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構成對比的白色文本是吸引用戶注意力的焦點，這使得文本在畫面中是高度可見的。從另一個角度來看，背景圖片是模糊的，所以清晰的文本會非常醒目。這些都表明，這里的文本被優先考慮為圖形或正空間，而模糊的圖像被用作背景或負空間，從而強烈地暗示了圖形和背景之間的關系。
下一個案例是下圖方框里的內容。 Ocean Health Index 巧妙地利用了框內區域的內容將圖片與背景分離開來。這是你在瀏覽他們的網站時看到的：
當你第一次瀏覽這個頁面時，哪個部分會吸引你的注意力？你會發現，它的主要文本為白色和藍色背景構成對比，而更加醒目的是是兩個與文字對比鮮明的 Box 區塊。前者借助了深色背景和文本色彩上的差異，構造對比度。而 Box 區塊本身的色彩和背景色構成對比的同時，還和更靠前的文本構成色彩對比。
背景使用了微妙的色調，使數字得以鮮明地展現，并突出細節。方框的運用使它們在頁面上清晰可見。
一些網站還通過添加陰影來表現物與背景的關系，產生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com：
Seriously Unsweetened 的著陸頁使用了不止一種方法來保持圖形與背景的平衡關系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來。背景之上的元素都是「正空間」，圖中的物體呈現在背景的映襯下，有一種被置于「頂部」的錯覺。而陰影并沒有直接用在圖片和文本上，而是應用在圖片的內部，這讓我們注意到在主要圖像內部還有另一層視覺元素，這意味著里面還有一層圖片-背景關系——這是一個非常智慧的設計。
2. 接近性原理
接近性是指頁面中元素之間的接近程度。網頁中的不同元素可以組合在一起，不同的接近程度會帶來不同的關聯屬性。除了視覺特征上的接近性之外，這些元素與其他頁面元素之間的距離接近度也會自動地在觀眾的腦海中產生關聯感。
從圖像到文本、導航欄到網頁表單，這種接近性原則在網頁設計中適用范圍非常廣。將類似的內容組合在一起時，它將在元素之間創建關聯，為觀者提供更好的視覺體驗。
以下是 Mashable 網站導航顯示的運用接近度的案例：
在上方的截圖中，我們可以清楚地看到如何將相同類別的元素放在一起，以顯示它們與主菜單的關系。由于顏色和文本大小的選擇，使觀者的目光自動被吸引到主標題下的子欄目上。
除了導航欄外，基于網格的內容也符合黃金比例的接近性。亞馬遜的產品列表就是最好的例子：
這個案例體現的是接近性還是相似性還有待討論。如你所見，具備視覺接近性的同類產品使用狹窄的留白進行分組和分隔。這種接近性會指示用戶在類似的產品列表中，對其目標產品基于購買偏好進行排序。此外，封閉性原則也在類似項目的清單中發揮了作用。
現在，我們來仔細看看 Basecamp 的網頁表單設計，它在網頁設計中顯示了另一種接近性的理想情況：
可以看到上圖中的表單是被劃分為兩個主要部分的：個人信息和 ID 生成兩個部分。第一部分被暗示為最重要的字段，第二部分則是一個次要的需求。這兩個部分的標題都因顏色和字體大小的不同而產生區別。在這個網頁表單中，接近度是一個重要指標，它將網頁中呈現的信息按優先級排列。
3. 對稱和秩序
對稱是指兩個元素呈現出鏡像關系。它可以被看作是把一個物體一分為二的平衡。真實的對稱圖形包括等邊三角形、圓形和正方形等幾何圖像。
人類的大腦會本能地渴望在面孔中找尋「平衡」和「對稱」，這在美學上是令人愉悅的。大腦也傾向于在其他物體中找到對稱，因為對稱創造和諧，讓觀者在觀看圖像時感到舒適。
下面是 HvD Fonts 在網頁設計中體現對稱性的一個很好的案例：
這個頁面不僅顯示了典型的圖形-背景關系，而且強調了對稱性原則的運用。頁面被分成四等份，字體大小和顏色相似。四個部分中的每個部分的背景都具有相同的主題色和灰度效果。你也可以注意到負空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。
對稱性原則還可以衍生出了另一個概念：在網頁設計中，不對稱會使觀感不佳，必須謹慎使用。許多網站使用不對稱作為平衡間距的元素——非常規的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營銷理念是不對稱，Xplode 以獨特的美觀悅目的方式引發不對稱。
這個網頁利用視覺錯覺和不對稱，抓住了觀者的眼球。作為正空間的物體被放置在一個不對稱的布局之下，在負空間中創造了強烈的視覺吸引力。色彩是兩個空間和諧的主要因素，并為觀者創造了一種自然的聯系。左邊的圖形也有很強的平衡性，而右邊的則是帶來更強的視覺吸引力。你覺得這個設計如何呢？
4. 相似性原理
相似性與接近性原理密切相關的原因，是相似分組對象之間共享屬性的質量。無論是顏色、形狀、形態、大小、方向或任何其他屬性，當這些屬性中的一個或多個在鄰近對象中共享時，相似性將占上風。
即使正空間的元素看起來沒有明顯的聯系，由于相似性原理，它們也會與負空間元素區分開。
看看這些 UrbanDecay 的商品列表：
雖然上面的商品各不相同，但在位置、色彩、產品布局、表現方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類產品中獨樹一幟。這顯然是一種營銷策略，目的是在不損害頁面整體對稱和美觀的情況下吸引注意力。這里要考慮的另一點是，尺寸上的相似性使其他圖像與相似的產品類別區分開來。
除了產品展示之外，正空間可以與相似度結合使用，也可以與負空間結合使用。
讓我們來看看 influenster 的著陸頁：
上面例子中對齊的邊框也運用了相似性原理。雖然每個正空間元素是不同的，但是相似的感覺是通過整個頁面中一致的文本字段來傳達的。風格、布局和主題都是相似的，因此帶來了統一的視覺效果。
5. 封閉性原理
你是否曾經遇到過這樣一幅畫面，看上去是閉合的，但實際上是開放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補」不完整物體的空白，并利用我們的視覺感知來使圖形完整化。
正空間和負空間一起構成一個整體。最好的案例就是負空間中隱藏的形狀和形式，這要求對正空間中要傳達的信息進行評估。在封閉空間創造性地使用著正負空間，可以產生有趣但簡單的設計。
下面是 Magu Kambucha 的設計圖：
在這個案例中，可以看到封閉性和圖形-背景關系的平衡。瓶子和后面的粗體文字構成對比，背景則是和兩者都構成對比的柔粉色。封閉性體現在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個「K」和最后一個「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺自動完成的，整個形式開始成形，意義也隨之成形。
下面是 Cult 的截圖：
即使文本沒有寫得很清楚，我們的頭腦可以很容易地讀到 CULT 這個詞。即使單詞不完整，文本的排列和對齊也可以使其易于辨認。
6. 連續性原理
最后，根據一般格式塔原則，連續性遵循模式，即引導實現遵循一致的路徑，建立從一個對象到另一個對象的線性模式。
在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續性的原理比色彩的力量更能引導用戶的視覺感知。當我們借助負空間在視覺元素中畫出路徑，我們的眼睛傾向于優先感知正負空間之間的界限。
腦補出來的這條連續的線條是我們在設計中更應該引入的視覺線索。
讓我們來看看 Crypton Trading 網站中的視覺線索設計：
看到頁面右半部分設計的完美延續了嗎？不管背景的明暗色調如何變化，圖案在頁面上的變化都非常顯著。當你向下滾動時，你會看到圖案和顏色是如何以連續和無縫的運動變化的。在這里，色調的變化是可以忽略的，我們所看到的是一個連續的線和點的模式。
另一個很好的例子是 OscilloScope 網站：
該網站借用連續性法則，將網站用戶引入到工作室的 360 度視角中，他們可以在導航中選擇所需的子欄目。
影片《Cargo》的著陸頁也使用了連續性法則：滾動式的導航，以線性運動的方式讓文本漂浮在網站上。由于 LOGO 是垂直展現的，所以用戶必須向下滾動才能看到它的全貌。當頁面向下滾動時，靜態 LOGO 開始與并行的文本塊一起浮動。導航引導用戶經歷不同層次的體驗，而不會干擾隱藏在下面的內容。
由于我們的眼睛通常遵循最平滑的路徑，設計師可以使用這樣的方式來創建引導路徑。
在這篇文章中，我們討論了格式塔原則與網站 UI 的正負空間之間的關系。通過一些真實的案例，讓大家清楚地知道如何運用簡單有效的方法來改變設計的觀感。關鍵是使用這些原理來設計的時候，可以達到 1 + 1 > 2 的效果。
人類是根據感知來思考的——主要是基于視覺。根據格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個元素。
正負空間幫助我們區分、回憶、感知并識別理解。在格式塔原理的引導下，我們能夠更好地在網頁設計中利用不同元素來創造吸引人的作品。因為空間對于任何設計師來說都是一件復雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認識到空間在設計中的重要性、有效性，繼而使自己成為網頁設計領域的佼佼者。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn