如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
為了和大家分享關于設計趨勢的見解，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 過程中，也是通過原子組件的方式來構建整個框架，我覺得他們對于設計系統的理解非常對：「一個統一的設計語言不應該只是一組靜態的規則和原子組件構成，它應該是一個可持續發展的系統。」所以在構建好底層的設計語言之后，可持續性、可發展性，是維護并讓設計系統產生價值的重點。
隨著商業化的趨勢，越來越多的企業級產品對擁有更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻金服體驗技術部經過大量的項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 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：可編輯元素的各種樣式，比如用于制作顏色規范，涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容?？墒乖乇３忠恢碌膱D層樣式。
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年的資料）：
如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋?！綧yers 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被大眾所推崇，因為他們對于性能的影響最小（尤其是對于web）。使用默認的或開源的loading要容易的多，不需要設計師和開發花心思來設計和實現它。
如果你正在開發MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創意，也并不會對你的產品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節，日益成熟的設計公司，更好的科技環境，更方便的設計工具，這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現自己設計能力的一種方式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎？它們不再是唯一的交互方式,一起來了解一下~
還記得瀏覽網頁時，只能通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎？而現在，它們不再是唯一的交互方式，當蘋果推出第一款iPhone時，多點觸控技術成為了主流，用戶們了解到，他們不僅可以在界面上指向、輕點還可以捏合、展開和滑動。手勢成為新的操作方式。
一、UI中手勢的力量
手勢非常自然和直觀，他們與真實世界反應類似。
對于使用手勢，這里有三個主要的理由：
● 干擾少
App內，手勢控制使用地越多，在屏幕上出現的按鈕就越少，這樣可以留出更多空間給更有價值的內容。這使得app以內容為重點，并讓用戶在沒有障礙，或者在分心的情況下也能進行最重要的操作。
● 使用簡單
一個手勢一旦被用戶發現和學習使用就會讓用戶在體驗感到愉悅，而且手勢可以減少步驟，來達到提高交互體驗的目的。例如，當你需要刪除一些項目時，用“一次點擊刪除一個”的方式的很浪費時間的，但是如果使用“滑動一下，刪除一個”的滑動手勢，就更簡單快速，讓用戶更加愉悅。
● 無縫交互
雖然按鈕看起來對于觸發響應更加有用，但手勢具有更大的潛力，使內容的交互更加直觀。
二、手勢的缺點
但同時，手勢也存在難規范、易混淆等缺點。
● 增加用戶負擔
大多數手勢學起來或者記起來不自然也不簡單。舉個例子，在大多數APP，一個手指的手勢就對應一件事，用兩個手指做一個同樣的手勢意味著另外一件事，其他對應事件的手勢還有很多。
● 缺乏反饋
在大多數情況下，手勢不會留下任何路徑記錄。這意味著，如果做一個手勢但沒有得到反應或者得到錯的反應，這樣就只能獲得很少的信息或者不能獲得有幫助的信息去解釋為什么這么做。
● 缺乏一致性
大多數手勢在app中還不是標準統一的。他們對于用戶不總是顯而易見的。甚至一個簡單的滑動手勢，在眾多郵箱app內的郵件項目中也有著不同的工作方式。例如，在Apple Mail 中，刪除一個未讀項目，你應該向左滑動這個沒有打開的郵件，然后界面會出現選項來刪除這個項目。在Gmail里，向左滑動可以把郵件標記為未讀狀態。
三、手勢成為移動端UI成功的關鍵
1.如何選擇好的手勢
如果你的界面里要使用手勢，那你就必須要去了解你所在的市場以及你的目標用戶會去使用的app。要嘗試在你的app里使用和它們相同類型的手勢。這樣，你不僅基于你的目標市場的用戶的行為優化了你的界面，還讓用戶從一開始就能舒適的使用你的app。
2.手勢教學
雖然每個移動端app都必定會用到手勢，但是要讓用戶很自然的就能知道如何操作(使用什么手勢可以干什么)卻一個挑戰?？捎|摸的界面提供了很多條件來使用自然的手勢，例如輕點、滑動和捏合來完成任務，但是不同于圖形界面的操作，手勢的交互用戶往往是看不到的。
因此，要讓用戶能發現手勢是很重要的。你需要確保你提供了正確的線索----通過視覺引導來幫助用戶更容易的發現如何與界面進行交互。
3.如何在情境中教育用戶
教程和演示的做法相當流行。在許多app中加入教程意味著要想用戶顯示一些說明內容來介紹界面。然而，UI教程不是介紹app的核心功能的最優雅的式。
良好執行的UI手勢總是可以在易于實現視覺提示和漸進式披露的游戲中找到。這顯而易見，最好的游戲可以使人們隨著時間的推移來學習到技巧，而不是靠指導他們。例如，PuddingMonster 的游戲機器完全基于手勢，但是他們允許用戶得到基礎的信息，他們不需要做很多的猜測。他們可以展示動畫場景，讓用戶馬上知道要做什么。
四、使用動效來傳達手勢
手勢總是與移動app中的動效相關聯。動效在維護用戶體驗中起著非常重要的作用。作為設計師，你可以利用動效來傳達出用戶可以進行某個操作。當動效與手勢一致時，用戶就會意識到自己與該物體正在相互作用。
動效在向用戶提供視覺反饋上是非常重要的。沒有動效，用戶就不能獲得足夠的信息反饋，不能確定他們是不是成功地完成了手勢動作。
這里有三種流行的基于動效來幫助用戶學習手勢。
第一種：動效視覺提示
顯示一個在執行某個操作時如何和某一個界面元素進行交互的預覽。它的目的是在手勢和操作之間建立聯系。例如下圖中的這個游戲app是完全基于手勢操作的，這個app讓用戶不用去猜測就能知道該如何操作。用動畫來傳達功能信息能立即讓用戶清晰的知道該怎么做。
第二種：內容的梳理
內容梳理是通過微妙的視覺線索來暗示用戶進行手勢操作。例如下圖中卡片的展示，它表明這張卡的背后還存在著其他的卡片，這清晰的表明了可以滑動卡片。
第三種：功能可見性
你可以讓你界面里的某些元素具有很明顯的可供性來讓用戶知道這個是可以進行某種操作的。例如下圖中點擊相機icon后鎖屏就會從下往上彈起，展示出在下面的相機功能。
五、總結
手勢是一種強大的互動模式。移動設備已經從磚塊發展到由我們手指驅動的復雜計算器。觸摸和手勢交互在使移動體驗更加簡便有趣方面，有很大的潛力。
設計一款移動端的app一定要思考手勢設計。手勢應該起到協調和節約時間的作用。為了設計一個有意義的手勢，你應該規定一個動作以及與其配套的一個手勢。提供反饋意見也非常重要，對于可能要進行的行動要有明確提示，并進行手勢的引導。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在設計的時候，各種視覺要素以有序的方式排列，設計師需要通過對各部分空間的精妙設置來實現這一點。通常而言，我們的目光總會被最引人注目的部分吸引——無論它是視覺主體還是負空間。視覺主體和負空間，兩者都很重要，尤其當你需要平和地呈現一個和諧、連貫、天衣無縫的設計。那么在一個網頁設計作品中，設計師到底利用空間傳達出怎樣的一個故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。人類的大腦天生就能把規律性的散點連接起來，并對目之所及的事物賦予意義。設計是一個創造性的領域，是形式和空間的相互融合，并隨之創造各種各樣的體驗。無論我們接觸到什么樣的設計作品，我們的大腦都會本能地將作品解構為更簡單的各個組件，這些組件由基本的形狀和不同的形態組成，而這些形狀和形態則與空間息息相關。過往豐富的體驗與經歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識別出這些特定的設計形式。
正空間，或者說顯著的設計主體，構成了設計的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負空間多數情況下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個以正負空間之間有著強對比的經典設計案例。
就像正空間似乎支配著負空間一樣，兩者都被用來平衡地傳達一個和諧、連貫的設計理念。
在平衡的構圖中，設計的正負空間都是相互配合、相互補充的，形成一個無縫、美觀的整體。相反，不平衡的構圖會讓觀眾感到不適，傳達出一個不完整的、扭曲的故事。
網頁設計的好壞很大程度上取決于它的實用性和可用性。如果你的設計技巧很差，那么網頁設計的整體效果和表現都會受到影響。但從另一個角度來看，在「內容為王」的時代，如果空間布局使用不當，內容將對您的網站產生顯著的負面影響。
如果你認為你的開發技能很棒，但你的設計技能可能需要更多的改進，那這篇文章對你就太合適了。在本文中，我們將討論：
我們還將討論一些真實的網頁設計實例，探討每個案例如何體現格式塔原理，以及它對空間的創造性使用。
話不多說，一起開始學習吧。
空間由兩個主要維度組成：正空間和負空間。正空間是可被直接感知到的視覺元素，負空間則為元素以外的留白和間隙。如前所述，正的是物體，負的是物體后面可以通常被忽略的留白區域。一個是焦點，另一個是背景。在前者產生活動和刺激時，后者則保持靜止和模糊。一個是月亮，另一個是環繞著它的暗夜。
在網頁設計中，正負空間相互作用，共同形成構圖，傳達理念。只有當正負空間通過對比來區分，同時又向更大的區域延伸時，才會產生視覺層次（腦補一下陰陽太極圖吧）。
正負空間的交匯之處就是信息的交匯點。負空間拱衛著正空間元素，讓后者更加突出和顯著。
通常而言，正空間在絕大多數時候起主導作用，實際上負空間同樣重要。負空間的優點在于:
設計中的負空間相反并不是負面的。當正負空間比例平衡得當時，兩者在視覺上會顯得非常舒適。而當其中一個占據主導地位，并給人一種「過于擁擠」或「空洞無物」的印象時，混亂才會發生。在這兩種情況下，受眾都無法處理如此復雜的信息，因此，而這樣的空間設計是不符合網頁設計的基本原則和設計動機的。
這是一個網頁模板，它展現了何為「內容錯位」和「空間混亂」:
△ 布局混亂
△ 空間失衡
△ 適當的布局調整
△ 網頁設計中空間的合理運用
有意思的是，當談到空間的概念和布局出現時，質疑聲也隨之而起。
類似的問題只能在理解基本概念后再來作答。黃金經驗法則告訴我們——簡單是最好的策略。
在文章開頭，我曾提到在設計網頁的時候，盡量創建簡單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶。或從表面上看，網頁設計的重點在于增加網站的視覺吸引力，使用戶操作更為簡便。
我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯系。因此它會將當前的視覺信息與之前的經驗進行比對。為了成為一名的網頁設計師，你必須先了解大腦是如何感知周圍環境的。它可以幫助你選擇特定的視覺元素，利用它們來影響觀眾的感知。
偉大的設計師明白心理學在視覺感知中所扮演的強大角色。當某人的目光與你的設計作品相遇時會發生什么？他們對你的文章所傳達的信息有何反應？——勞拉·布什，Autodesk 品牌內容策略師
作為設計師，你必須清楚地了解視覺設計和心理學是如何相互聯系、相互影響的。換句話說，開發以用戶為中心的簡單界面，借助正負空間進行設計主要依靠格式塔原理，它可以幫助你理解和控制視覺和心理的聯系。
格式塔在德語中是「形式」的意思。它更多的是一個概念而不是一個單純的詞匯，它最基本的概念是：
整體大于各個部分的總和。——庫爾特·考夫卡（美籍德裔心理學家，格式塔心理學的代表人物之一）
當單個部分的集合以某種方式統一時，它們在我們的感知當中就是一組。我們把元素看作一個整體，這一概念或理論基本適用于所有的設計媒介：我們不把文本、顏色和形狀看作單獨的元素，而是把整個網頁看作一個整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們在看海洋時看不到水滴一樣。
格式塔原則描述了當特定的條件出現時，人類大腦是如何感知視覺成分的。它幫助大腦創造視覺圖像。因此，格式塔原理通常會應到下面六個主要類別：
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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
作為交互設計師，天天畫的就是交互稿了。而對于很多新手交互設計師以及想轉行做交互的同學們來說，一定都非常想知道大廠的交互設計師畫出來的交互稿具體是什么樣子的。但和視覺稿不同，交互稿里面體現了太多產品本身的邏輯，難免涉及到一些敏感內容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。
不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。
但我必須重點強調一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據自己的需要自由修改。
第一個是 PPT 型的分頁交互稿，這個樣式最早是從騰訊 CDC 團隊流傳下來的，我在第二家公司的時候就從他們的博客中看到過，當時還用 InDesign 做過一個模板。而我現在所在的團隊用的也是這個，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很簡單，就是文檔標題和作者，頂部有一個通用的文檔標題欄，上面的內容包括：
我在 Sketch 中為這個模板中需要改動的內容都定義了 Symbol，比如這個標題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內容。
2. 修訂記錄
修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內容，以及相關人員，方便后期交接的時候給對應的產品經理、游戲策劃和設計師查看。有時候交互稿更新一次只是修改一小處地方，如果不備注對方就會很難找到，可能以后你自己都會遺忘。
這一塊我也定義了 Symbol 元件，你可以直接復制一行，然后修改里面的內容，「更新內容」的文本支持多行輸入。
3. 目錄
這種分頁型的文檔一定要有目錄，備注好每個模塊對應的頁碼，否則十幾頁看下來都暈了，每次想找到對應的界面還得重新翻一遍。
4. 內容頁面
具體的內容頁面才是交互稿的核心，一般會用小氣泡和箭頭進行標注，然后在右側用對應的數字和它們對應，寫下詳細的交互說明。
結構可以有很多種，比如上面這種豎屏的界面可以是左右結構，如果是橫屏界面還可以是上下結構等等，根據情況自由調整。文字段落的樣式我已經定義好了，直接修改套用就行。
其中最重要的氣泡我也做了元件，選中之后直接在右邊修改數字即可。
5. 導出方式
使用這套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導出成 PDF 文檔。我很喜歡這個格式，與 PPT 相比，PDF 在任何平臺都可以通用，包括手機、Mac，不用特地裝什么軟件都能很好地打開。
另一種是更常見的交互稿形式，這也是我這幾年進騰訊后一直使用的格式。
如果你曾經用過上文介紹的 PPT 型模板，你一定會發現：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個大產品的交互功能介紹，而不適合小功能的頻繁修改。
今天介紹的這第二種，則是更加輕便快捷的類型。
這種長圖型的交互稿，優點很明顯：
來看一張基本樣例：
它的結構分為：
交互稿標題、日期
按照項目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標化改版），可以地規范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內容。
相關負責人
對應的產品經理，交互稿的作者，方便評審時或者交接后找人。
需求背景
簡單介紹為什么要做這次設計，出發點是什么，遇到了什么問題。
主要界面
這次設計中，涉及到的所有主要界面，先陳列出來方便大家快速評審和討論，視覺接手后可以根據這些來進行風格設計。
流程說明
有了主要界面后，我們還可能需要對一些操作流程進行說明，比如怎樣發送一條語音消息，怎樣刪除一條會話等等。
異常狀態
最后還要記得檢查一下，每個界面在沒有內容時的空狀態、斷網時的異常狀態，彈出各種通知的位置等等，千萬不要等到開發同學找你的時候才想起來。
上面所說的，就是一份交互稿的常見內容模塊了。
該模板是專門給 Mac 平臺的 Sketch 用的。
下載后（下載方式見文末），打開你會看到這個界面：
里面的每個模塊我都做了 Symbol 元件，你只要選中就可以在右側更改內容了。
比如下面的文檔基本信息：
我還把可能會用到的各種字體大小、顏色、對齊方式都做成了文字樣式：
選中文字后，在右側下拉框中選擇你要的樣式就好。
交互稿用的都是黑白灰，還有藍色作為標注。
我一直用的這幾種，足夠用。
是不是很心動？別著急，先把這個 Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件時，選擇從模板處新建，直接用這個模板開始畫稿。
下載鏈接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取碼：npq2
備用鏈接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33歲，騰訊高級交互設計師、騰訊學院認證講師，9 年工作經驗的資深互聯網人，曾任 MIG 桌面安全產品部軒轅設計組組長，目前在騰訊游戲 NEXT Studios 工作室負責《樂高無限》創造型沙盒游戲的用戶體驗設計。
負責過的產品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網游助手等。曾在 OPPO 手機、金蝶軟件等企業工作，有著 PC、Web、移動端等多平臺的豐富設計經驗。
感謝大家的閱讀，末尾做個小廣告，我的新書《交互思維：詳解交互設計師技能樹》馬上就要上市了，這是我自己九年多來做交互設計師的經驗總結，也是市面上第一本詳細介紹交互設計師所應該掌握的職業技能的書，適合所有希望了解交互、學習交互的設計師和產品經理。同時書中也有我進騰訊的成長故事，以及一些個人工作和學習方法的分享，絕對物超所值 → https://item.jd.com/12576242.html
這是我所總結的「交互設計師技能樹」。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
需求是攔截前端的網絡請求和相應。
廢話不多說，直接上干貨。
我用的是vue-cli3所以這個config文件是我自己創建的。
先介紹env.js
//根據不同的環境更改不同的baseUrl
let baseUrl = '';
//開發環境下
if (process.env.NODE_ENV == 'development') {
baseUrl = '';
} else if (process.env.NODE_ENV == 'production') {
baseUrl = '生產地址';
}
export {
baseUrl,//導出baseUrl
}
在這里我首先設置了開發環境和生產環境的地址，并向外拋出。
在看一下axios.js
import {
baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
// 創建 axios 實例
let service = axios.create({
baseUrl: baseUrl,//請求前綴
timeout: 20000, // 請求超時時間
crossDomain: true,//設置cross跨域
withCredentials: true//設置cross跨域 并設置訪問權限 允許跨域攜帶cookie信息
})
// 設置 post 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加請求攔截器
service.interceptors.request.use(
(config) => {
// console.log()
//下面的代碼是如何在攔截器中調用vuex管理狀態。
//我這里主要是做了一個蒙層的遮蓋
// vuex.$store.commit('OPEN_LOADING');
//判斷請求方式是否為POST，進行轉換格式
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
// 請求發送前進行處理
return config
},
(error) => {
// 請求錯誤處理
return Promise.reject(error)
}
)
// 添加響應攔截器
service.interceptors.response.use(
(response) => {
let { data } = response;
return data
},
(error) => {
let info = {},
{ status, statusText, data } = error.response
if (!error.response) {
info = {
code: 5000,
msg: 'Network Error'
}
} else {
// 此處整理錯誤信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
}
)
/**
* 向外拋出service
*/
export default service
最后將這個axios.js文件引入main.js中，并將引入的axios掛載到Vue實例上就ok了。
完美！如有不對的地方還請各位大佬指點，萬分感謝。
踩過的坑：
怎么在axios攔截器中使用vuex，首先我們要引入vuex的js文件，然后就可以用了，就這么簡單。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
