發(fā)現(xiàn)一個非常好用插畫神器
地址是https://blush.design/zh-CN/sketch
能自動生成各種你需要的插畫形式，重點是這些插畫都是可以免費商用的，肯定能幫到你。
它有Figma和sketch2個不同的版本，下面彩云就以sketch為例來說說這個插件怎么用。（沒有Mac電腦不能使用sketch的同學，也可以用figma來生成插畫哦，所以在win下也是可以用的，使用方法跟sketch類似）
1.如何使用
使用非常簡單，只需要簡單幾步就能搞定：
1）下載插件并安裝
裝好后，從插件菜單點開Blush插件，會出現(xiàn)一個插畫庫界面。
2）生成插畫
1.創(chuàng)建一個矩形，先給定一個大小，目的是為了給生成的插畫一個位置和范圍（也可以后面再調(diào)整，不是太重要）
2.選一個你喜歡的插畫風格，點下封面右上角的隨機圖標
3.生成之后，你還可以針對它的組件各個部位再次隨機，當然你也可以根據(jù)自己的喜好直接選擇對應的部件
免費版把插畫的尺寸改到中型尺寸再生成。效果調(diào)整好之后，按正常的sketch選擇導出png圖片就行。想導出svg矢量格式的需要付費，但我覺得2x的Png圖，已經(jīng)足夠用了。
2.插件包含了哪些類型的插畫資源呢？
1）城市元素
2）裝飾背景
3）人物場景
3.這種插畫在實際項目中運用如何？
彩云隨便做了幾個，大家可以感受下，效果應該還可以 。
1) 引導頁
使用了插件中的Tech Life主題插畫
2）網(wǎng)頁頭圖
使用了插件中的Tech Life主題插畫
3）作品集包裝
4）登錄頁
使用了插件中的Cityscapes主題
4.結(jié)語
這個插件的原理是把插畫進行組件化，利用sketch和figma的組件功能進行拆分再重組，構(gòu)成大量的隨機插畫?？梢钥吹?，組件化已經(jīng)成為一種思維方式，最初是用在UI中，現(xiàn)在已經(jīng)擴展到了插畫領域，未來還有哪些可以組件化？我們可以一起思考。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
迪士尼動畫的12條原則是設計師必須要掌握的經(jīng)典指導性原則，是由 Ollie Johnston 和 Frank Thomas 在他們的書《The Illusion of Life》中提出來的觀點（譯者注：這本書在豆瓣的評分有9.3分，值得一看）。這些原則最初是用來為動畫片這種傳統(tǒng)的形式設計的，然而，這些原則也同樣適用于 UI設計。所以，我想在這里做一個有趣的嘗試，看能否將這些動畫原則聯(lián)系起來。
在動畫中，擠壓和拉伸代表了物體的重力，質(zhì)量，重量和靈活性。舉例來說，當一個彈球在它撞擊地面時會發(fā)生形態(tài)變化，就是擠壓和拉伸。
在界面中，擠壓和拉伸很容易就聯(lián)想到按鈕。當一個按鈕被按下時，就可以理解為受到了擠壓，通過控制按鈕的擠壓和拉伸，我們可以很輕易地做好一個按鈕的交互動畫。除了按鈕之外，這種原則也可以應用于 UI 中的任何交互元素上。
△ 按鈕在交互時的擠壓和拉伸
△ 擠壓和拉伸被應用于側(cè)邊欄
讓觀眾能預先知道接下來將會發(fā)生什么，它是先于下一步會發(fā)生的動作。舉例來說，迪士尼動畫里經(jīng)常有從高空往下跳躍時會先彎曲膝蓋再跳，正在跑步的人要停止跑步前會逐漸變慢步伐等等。
在界面中，懸停狀態(tài)就是很好的例子。當我們把鼠標懸停在元素上時，元素會提供反饋，表明它是可以點擊的，并且在點擊時，又會有一些別的反饋。
△ 懸停的交互通常會暗示這個按鈕是可以點的
在有水平滾動界面里，通常在交互時會顯示下一個元素的部分內(nèi)容。這其實是一個很好的例子，因為它是在告知用戶下一步的一些信息。
在傳統(tǒng)動畫中，時間會決定關鍵幀的繪制方式。幀數(shù)越多，動畫就越流暢，同時也更慢，時間能夠給動畫賦予情緒和性格。
時間的節(jié)奏感是任何動畫的基礎，速度在元素編排中起著非常重要的作用。速度太慢，用戶會不耐煩；速度太快，用戶又會錯過一些內(nèi)容。一般來說，大多數(shù) UI動畫在200-600ms之間，其中懸停和反饋交互時長大約為300ms，精細的轉(zhuǎn)場動畫大約在500ms。也可以去參考谷歌的動畫規(guī)范（https://material.io/design/motion/speed.html#duration），里面非常詳細地解釋了每種動畫類型的持續(xù)時間。
一些設計系統(tǒng)，如 Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、 Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把運動的節(jié)奏感視為一個很重要的方面，并為每種類型的過渡都制定了嚴格的規(guī)范。
△ 右邊的過渡動畫顯得太過于漫長，繁瑣。
在現(xiàn)實世界中，大多數(shù)物體都遵循著緩動運動規(guī)律。也就是說，物體的運動并不會瞬間開始或瞬間結(jié)束，就像一個物體自由落體，也是一開始很慢后面才會變快。
△ 左側(cè)的卡片是沒有緩動的，右側(cè)的是帶有緩動的，看起來會自然很多。
給 UI 中的元素加上緩動會讓它看起來更加自然，緩動和節(jié)奏感都是可以有效的提升動畫的品質(zhì)。
舞臺中的表演需要合適的編排才會精彩。也就是說，對象在場景中如何擺放，每個動畫又如何出現(xiàn)，關乎演出的質(zhì)量。通過這種編排，能夠?qū)⒆⒁饬σ蜃钪匾慕巧?
在界面中，呈現(xiàn)方式能夠決定元素的位置，以及在交互時，它應該如何編排才能將用戶的注意力引向預期的元素。
比如現(xiàn)在有一個基于興趣的音樂APP，對這個應用來說，最重要的事就是讓動畫引導用戶選擇他們所喜歡的音樂。因此，有必要將類似的操作與其他元素分開編排，有目的的引導用戶。
一個從高處拋出的小球，運動軌跡會做拋物線軌跡運動，弧線能使物體的運動更加自然。
在界面中，沿著對角線的元素沿著弧線軌跡將會使運動變得更加自然。當需要凸顯出元素的運動路徑時，多嘗試使用弧線軌跡。
△ 通過對比，能夠發(fā)現(xiàn)右側(cè)的弧線運動軌跡會比左側(cè)的直線運動軌跡顯得更加自然。
在動畫中，次要動作能夠起到烘托主要動作，比如動畫中的角色在走路時，頭部的晃動就是次要動作，卻能夠讓角色行走顯得更加自然。
在界面中，次要操作能夠起到強化關鍵動作，當元素需要向用戶提供反饋時，這個方法非常管用。所有的微交互都是基于這個附屬動作原理。
△ 按鈕邊上的粒子效果強化了主按鈕的點擊效果
場景中的重要角色通常會采用一些比較夸張的動作來獲得更多的注意力。
在界面中，重要的交互也會通過一些夸張的動畫來引起用戶的注意。谷歌設計規(guī)范中的 FAB按鈕就是一個很好的例子，F(xiàn)AB按鈕在不動的時候也比較能引起注意，因為它通常會帶有比較鮮明的顏色，并且是獨立懸浮在界面元素之上的。當它被點擊時，F(xiàn)AB的動畫被放大，把整個界面都占滿，使得它完全占據(jù)用戶的注意力。
△ FAB夸張的交互形式
△ 對于支付這么重要功能的按鈕，通過夸張的動效引起用戶的注意
想象一只兔子從高處跳下來，當兔子開始起跳時，它的耳朵動作會與身體動作發(fā)生錯位。然后當它著陸時，它的身體停下來了，但是耳朵還在動。前者稱之為跟隨動作，后者被稱為重疊動作。其原理說的就是：沒有任何一種物體會突然停止，物體的運動是一個部分接著另一個部分的。
在界面中，可以使元素在停止之前超過它們原本的位置，使得元素運動更加自然。（譯者注：大白話就是我們常說的回彈效果。）
△ 界面有一定的回彈，會顯得更加自然。
△ 當界面滾動時，文字會跟隨圖片的運動，圖片與文字以不同的速度運動會更加自然。（譯者注：像是被拖著走的那種感覺）
界面中的每一次交互都必須在適當?shù)膱鼍爸芯脑O計，讓整個體驗更具沉浸感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗更加協(xié)調(diào)自然。
這些原則正在以不同的形式應用于當今的數(shù)字產(chǎn)品中，值得敬畏的是，30年前設計的一套規(guī)則到今天仍然適用。
（譯者注：這又應了迪特·拉姆斯的設計十誡，好的設計是不會過時的。）
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
臨摹是一個很好的學習方法，人類學習就是從模仿開始的，而對于設計師來說，臨摹作品對于提升學習效率尤其有用。
但在做具體臨摹練習時，就會發(fā)現(xiàn)一些問題，比如在星球里看到同學們做日常打卡練習時會遇到臨摹的原作本身質(zhì)量不高，不會分析作品優(yōu)缺點，不知道如何用到自己的項目中等等。所以我在星球里的月度分享會上跟大家聊了這方面的經(jīng)驗，今天也將部分內(nèi)容整理成文章分享給大家，希望能提高學習效率。
分享的內(nèi)容分以下幾點：
1、為什么需要做臨摹練習？
2、臨摹的幾個階段
3、如何找到優(yōu)質(zhì)臨摹作品？
4、如何做臨摹思考？
5、保持行動力的秘訣
6、總結(jié)
有些新人在剛?cè)胄械臅r候，出于對設計天馬行空的想象，不屑于做臨摹練習，覺得作為設計師就應該多發(fā)揮一些自己的原創(chuàng)能力。想法是很好的，但此時更多的是手上的輸出跟不上腦子中的想法，產(chǎn)出的原創(chuàng)作品質(zhì)量往往不高。而臨摹是站在巨人的肩上做事，提升動手能力的同時吸收優(yōu)秀的設計思路對自己的提升來說非常有幫助。
其實不光是小白需要臨摹，很多資深設計師甚至藝術(shù)家也會采用臨摹的方式提升自己的能力，從中學習別人的創(chuàng)作思路、表達方式，學無止境。
不同的階段，臨摹的目的也有所區(qū)別。一般來說，前期臨摹更多的是練習軟件、技法，后期才會是練習別人的風格表達，綜合運用。所以，我把臨摹分為3個階段：
因為是練習技法，訓練的是自己的軟件操作能力和觀察解構(gòu)能力，所以我通常會選擇稍難一些的作品進行臨摹，目標是跟原作盡可能的一模一樣。
比如我6年前臨摹的Mike大神作品，就比較考驗技法，適合初期剛?cè)腴T階段做練習。
這個階段主要是練習思考和分析能力，嘗試理解原作者這樣設計的原因和目的。這個階段，我通常會選擇臨摹一些有特點的圖標或者界面，并嘗試改動原作中的一些小的元素，目標是有保留原作的特征，又會加入更多自己的思考讓作品在細節(jié)上有所區(qū)別。
比如在2015年做的界面練習，同時還會記錄自己的思考
其實經(jīng)過一段時間的練習，你肯定已經(jīng)積累了不少創(chuàng)意，現(xiàn)在有實現(xiàn)能力就可以盡情發(fā)揮了。雖說是原創(chuàng)，其實也會大量找參考。剛?cè)胄性O計的時候，我一直覺得，大師應該是可以完全自己創(chuàng)造出新的作品，但后來知道，優(yōu)秀的作品大部分都是建立在融合非常多優(yōu)質(zhì)作品精華之上完成的。之前看過暴雪的設計師分享，他們做一個場景效果，光找參考都要花掉一半的時間，可見找參考的重要性。
這個作品當時是我在圣誕節(jié)前做的，是有參考笑臉、塑料口袋、光碟、進度條光帶等等結(jié)合起來的原創(chuàng)作品。
既然是希望通過臨摹從別人的作品中學到東西才去做，那么臨摹優(yōu)質(zhì)作品就很關鍵。我一般會從Dribbble,Behance,Pinterest,Instagram和大廠出品的應用中找臨摹對象。判斷是不是優(yōu)質(zhì)作品，可以從推薦上，細節(jié)上，吸引你的點上進行選擇。
比如，我想做一些細節(jié)豐富的UI控件，那平時大家打王者的時候，里面的UI細節(jié)都是非常精致的，包括按鈕樣式，排版，造型，動效，可以從中學到的知識點可太多了。
在比如在Dribbble中，用關鍵詞進行搜索，再篩選為熱門，時間選擇最近一年，就能知道流行趨勢和設計佳作了。從中選擇一些很有感覺的作品來臨摹練手，肯定很有動力了。
不要無腦臨摹，做的過程一定要多加思考，我一般會從以下幾個方面來做分析：
同一個作品，閃光點的判斷因人而異，但你既然喜歡它肯定就有你看中的地方。你喜歡的那個細節(jié)，就可以是它的亮點，記錄下來就是你的思考。這些記錄會成為你下次創(chuàng)作時的靈感，在實際做項目的時候就不會腦袋空空了。
比如下面這張作品，我就很喜歡它的光影細節(jié)表達，在開關的邊緣還會有小光源的顏色影響，會有紅色和綠色的邊緣光。我覺得這張圖值得學習，所以就臨摹了下來，這張圖就是我臨摹之后的效果。
記錄你覺得是問題的地方就行，不講對錯，只需有你自己的理由就行，然后嘗試給出自己的優(yōu)化方案。沒有完美的作品，但如果確實暫時看不出來也沒關系。
在做臨摹的過程中，會遇到哪些問題，比如某些效果跟原作有差異，某些字體大小間距不好把握等等，這些就是你可以學習的地方。
比如我在最初做UI的時候，就不清楚具體的設計規(guī)范，我就逐個把原作用到的間距，字體，尺寸全都量出來，然后用到臨摹的界面中，自己來摸索出設計規(guī)范，而不是去死記硬背。更多當年我的打卡日記系列請見https://www.zcool.com.cn/work/ZODAxNzI2MA==.html
做練習，最重要的是堅持，讓很多人苦惱的是做了幾天看不到效果就沒了動力了，但其實想要堅持做事也是有方法的。
就像挖井一樣，每次打井就要打通看到水才行，設計練習也是如此。一段時間專注一個能力的練習，學到會運用才算是真正掌握。這里我的方法是按主題系列來執(zhí)行，比如這周我主要打卡練習美食類的圖標設計，那么就會找各種差異化的風格來練習。系列感的練習也更容易出效果，獲得滿足感。今天練這個，明天練那個，心態(tài)很容易浮躁。
往往做練習的時候，很多時間會花在糾結(jié)到底練什么內(nèi)容上。減少選擇的辦法就是列好清單，提前規(guī)劃好每天做的內(nèi)容，具體可以直接執(zhí)行的程度。
學習最忌諱的是三天打魚兩天曬網(wǎng)，保持規(guī)律，每天進步一點點很重要。忙的時候，也要至少保證自己比昨天有點進度。這個進度哪怕只是改個顏色，調(diào)個比例，或者有點思考記錄都是行的。做兩天又中斷幾天，很容易產(chǎn)生挫敗感，而每天進步一點點的本質(zhì)就是讓你獲得心態(tài)上的穩(wěn)定感，這會成為你堅持下去的持久動力之一。
千萬別悶頭做東西，多尋求反饋，不論是發(fā)設計作品到平臺還是朋友圈，亦或是在星球里跟一群相同想法的人互相打卡點贊，這些反饋和認同感都會不斷激勵自己堅持下去。當你因為堅持一件事而有收獲的時候，就能體會到一種成就感與滿足感。不斷給予自己一些正向激勵會讓自己進入一個良性循環(huán)，更不容易放棄。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
今天這篇國外大佬寫的文章，算是從為什么這樣做的角度來分析卡片設計，一起來學習吧。
從Instagram和Facebook這樣的社交媒體應用到亞馬遜這樣的電商平臺，卡片設計似乎是無處不在的，這些大廠廣泛應用使得卡片設計很快流行了起來。
作為一個信息容器，卡片能承載包括文本、富媒體、按鈕等所有UI元素?；谶@些內(nèi)容，卡片設計可以根據(jù)不同的設備和屏幕調(diào)整其大小，平衡界面視覺和用戶體驗。
卡片是一個UI組件，包含了某一個內(nèi)容的信息和操作?？ㄆ梢园鞣N元素，但它們都應該屬于同一個主題。
這樣做的目的是為了避免冗長的文字，并呈現(xiàn)更多的內(nèi)容。即使從設計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學中隱喻的運用）
卡片之所以流行，是因為它們能更好的把控內(nèi)容。卡片是模塊化的，所以不同的內(nèi)容可以堆疊在一起，而不需要注意它們的差異。
卡片通過強制內(nèi)容適應卡片邊界和卡片布局上的限制來聚焦內(nèi)容。設計師喜歡通過卡片混排大量內(nèi)容，而無需擔心設計會變得雜亂無章。
卡片可以將內(nèi)容分解成易于理解的小塊，以便用戶與之互動。通過給內(nèi)容一個容器，卡片向用戶表明內(nèi)容是真實和感性的。
卡片 UI 設計流行的原因還有很多：
直觀：卡片在界面中看起來與現(xiàn)實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網(wǎng)絡應用中的流行元素之前，它們在現(xiàn)實生活中無處不在：名片、棒球卡、便簽?？ㄆ砹艘环N有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來，就像在現(xiàn)實生活中一樣。
易于閱讀：卡片不占用太多空間，并敦促設計師優(yōu)先考慮其內(nèi)容。不同的是，每張卡片都變成了易于閱讀的內(nèi)容?？ㄆ層脩舾菀渍业剿麄兏信d趣的內(nèi)容。
有吸引力且對用戶更友好：基于卡片的設計通常非常依賴視覺效果（尤其是圖片）；就信息架構(gòu)而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內(nèi)容對用戶更具吸引力。
有利于響應式設計：卡片是矩形的，可以平滑地調(diào)整大小，以適應不同屏幕的水平和垂直正面，這意味著用戶可以在所有設備上獲得統(tǒng)一的體驗。
便于分享：卡片可以鼓勵用戶在社交媒體上分享內(nèi)容，因為它允許用戶只分享特定的內(nèi)容，而不是整個頁面。
什么時候應用卡片設計？
這通常是當你有:
基于搜索的界面: 卡片能通過模塊的內(nèi)容快速顯示合適的內(nèi)容，這使得用戶可以深入了解自己的興趣?；诳ㄆ脑O計是一種非常適合呈現(xiàn)這類內(nèi)容的方式。
信息瀏覽：當用戶瀏覽信息時，卡片的兼容性更好。
任務管理：當可以將流程中的單個任務作為卡片進行說明時， 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好，其中每張卡片代表一個單獨的任務。
類似項目：卡片最適合于異構(gòu)項目的集合（當并非所有內(nèi)容都是相同的基本類型時）。
可視化分析: 儀表板通常在同一頁上同時顯示各種內(nèi)容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異，其中每張卡片可以適應不同的角色。
卡片的布局可以不同，以支持它們包含的內(nèi)容類別。下面的組件通常可以在多種卡片樣式中找到。
(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標或圖形。
(2) 標題: 標題文本可以包含相冊或文章的名稱或標題。
(3) 描述: 支持文本，如文章摘要或簡短的描述。
(4) 行動按鈕: 卡片可以包含用于操作的按鈕。
(5) 副標題: 副標題文本可以包含詳細介紹，如文章的署名或標記的位置。
(6) 圖標: 卡片可以包含操作圖標。
有一些小的技巧可以快速提高卡片設計細節(jié)。
1. 使用相關主題的圖片
圖片是卡片設計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體，但需要與內(nèi)容主題相關。
2. 增加視覺層次
卡片內(nèi)的層次結(jié)構(gòu)有助于引導用戶對重要信息的閱讀。將主要內(nèi)容放在卡片的頂部，并使用排版來強化主要內(nèi)容。使用空白和對比來分隔需要更多視覺分隔的內(nèi)容區(qū)域。（彩云注：視覺層級對于信息表達至關重要?。?nbsp;
3. 限制內(nèi)容長度
一張卡片應該只包含重要的信息，并提出一個相關的觀點，以獲取額外的細節(jié)，而不是完整的細節(jié)本身。當我們試圖在一張卡片中放入太多內(nèi)容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯(lián)系，因為它不再像一張卡片了。
4. 避免嵌入鏈接
不要包含內(nèi)聯(lián)鏈接，卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。
5. 區(qū)分操作主次
包含不同操作的卡片應該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調(diào)而不是主要的按鈕風格來降低后續(xù)操作的視覺強度。
6. 去掉分割線
對于新手設計師來說，用分割線來區(qū)分內(nèi)容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內(nèi)容。
APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺層次。在卡片的情況下，你可以做幾件事:
1. 使用圓角
在形態(tài)上與真實世界的卡片進行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。
2. 增加一個輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個層次，這有助于我們區(qū)分UI元素。
然而，在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果，讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。
3.注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。
選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。
讓我們看看一些真實項目中的卡片設計案例：
信息流中的卡片設計
保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結(jié)構(gòu)，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。
由Diseno Constructivo和Webpixels設計
他們突出特色圖片和標題作為最突出的元素，這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。
電商卡片設計
產(chǎn)品卡片是一個很重要的東西，它可以幫助你將訪問者轉(zhuǎn)化為客戶。一張優(yōu)秀的產(chǎn)品卡片應該能夠吸引人們的注意，激發(fā)人們獲得產(chǎn)品的欲望，激勵人們購買，并在搜索結(jié)果中得到高效推廣。
由Webpixels設計
產(chǎn)品的名稱應該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質(zhì)量的產(chǎn)品配圖來設計完美的產(chǎn)品卡片。
如果產(chǎn)品有特價，不僅要在價格欄中注明促銷價格，還要注明常規(guī)價格，以及客戶可以節(jié)省多少錢。
個人中心卡片設計
簡介卡已經(jīng)成為一個應用或網(wǎng)站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設計在這里也能發(fā)揮重要作用。
由Neelesh Chaudhary設計
就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內(nèi)容至關重要的信息。為了達到你的目標，你要向其他人推銷你自己。
確保只包括必要的信息(例如，照片，名字，職業(yè))，讓你的“關于”頁面有剩余的細節(jié)來完善你的個人資料。
儀表盤卡片設計
儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據(jù)儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或?qū)Ш皆O計元素、關鍵數(shù)據(jù)、圖表和數(shù)據(jù)表。確保你為每個元素使用了正確類型的卡片。
由Simmmple設計
儀表盤卡設計允許用戶決定他們想要關注哪些數(shù)據(jù)。易于理解的UI，允許用戶精確地控制哪些數(shù)據(jù)需要在儀表板的前端做好。
只包括最相關的信息，為用戶使用方便。當你的數(shù)據(jù)集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。
日常計劃卡片設計
看板任務卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數(shù)量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。
由Neelesh Chaudhary設計
卡片上包含的信息包括任務的名稱和重要的細節(jié)，如任務的類型和誰擁有它。看板卡放在狀態(tài)類別下。最基本的狀態(tài)類別是“計劃要做”、“正在進行中”和“完成”，但是狀態(tài)可能因項目而異。
卡片結(jié)構(gòu)最適用于添加或刪除任務這樣的小改變，而不是改變像你的總體目標這樣的大想法。
有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業(yè)的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動?？ㄆ谔峁┰S多不同種類內(nèi)容摘要的環(huán)境中尤其有效，而不是簡單地作為內(nèi)容列表的現(xiàn)代替代品。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
一個優(yōu)秀的設計不僅要解決正確的問題，同時也是給用戶創(chuàng)造積極的情感。在過去，實體產(chǎn)品可以通過人類的五感來創(chuàng)造情感體驗，但對于如今的數(shù)字化產(chǎn)品來說，這似乎很難達到，因為只是在屏幕上進行枯燥的交互來獲取服務。
所以，數(shù)字化產(chǎn)品設計師們需要更深入的理解每種類型的情感，以及創(chuàng)造它們的心理學原則。
根據(jù)唐.諾曼（Don Norman）的研究，人們對一個物體產(chǎn)生情感有三個層次：本能、行為和反思。
本能層: “用戶想要的感覺是什么”
行為層: “用戶想要做什么”
反思層: “用戶想成為什么樣的人”
在第一層，用戶將通過視覺和與產(chǎn)品的交互設計中產(chǎn)生情緒。因此，這是UI設計師擅長發(fā)揮的地方。除了美學和基本的平面設計原則外，下面是我在工作中經(jīng)常應用到設計中的心理學原則。
人類的眼睛傾向于將相似的元素連接成一個組，而大腦會認為這些元素都有相同的目的。
因此，在設計具有相同功能和內(nèi)容的界面元素時，就應該要保持一致性。（彩云注：這也是為什么要保持一致性的理論解釋）
應用場景: 導航、控件、卡片、banner、內(nèi)容、分頁
人眼會將連續(xù)的元素視為一組。這一定律與對稱性和相似性非常相關，通過在一個序列上設計相似和重復的元素，我們可以將用戶的視線引導到我們想要的方向，它能使得閱讀信息更加連貫和清晰。
一點點的切割是在暗示用戶，這里還有更多的內(nèi)容等待你去查看。
應用場景: 菜單、列表、排序、輪播、服務進度
當看到一幅不完整的圖像時，大腦會依賴之前的經(jīng)驗進行填充。
這是圖形和logo設計中常用的規(guī)則，但是在產(chǎn)品設計中，我們也經(jīng)常把它用在圖標和Loading設計中。
應用: 圖標、loading、數(shù)據(jù)可視化
這是UI設計中的一個基本規(guī)則，因為人眼會將任何相鄰元素視為一個組。
在設計的時候，我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內(nèi)容組，然后使用小空間來分隔大內(nèi)容組中的小內(nèi)容組。
應用場景: 導航、控件、卡片、banner、內(nèi)容、分頁
我們的大腦喜歡看到對稱和平衡的東西。它是所有設計領域中使用最頻繁、最安全的法則。它幫助我們創(chuàng)造一種穩(wěn)定和秩序的感覺。
當設計需要簡單和諧可視化的產(chǎn)品時，我經(jīng)常使用對稱律。當用戶需要關注重要的事情時，它也能讓他們感到更舒服。缺點是，如果過度使用，產(chǎn)品會變得乏味和單調(diào)。通常，我用標題或CTA按鈕來更好地強調(diào)和號召行動，打破畫面的單調(diào)格局。（彩云注：CTA是call to action的縮寫，中文通常翻譯為行為號召?？梢岳斫鉃橐龑в脩酎c擊的行為都算是行為號召）
應用場景:控件，banner，強調(diào)內(nèi)容，產(chǎn)品顯示，清單，導航。
這個定律是關于人眼傾向于注意脫離背景或組合的事物。
我使用這個規(guī)則引導用戶的眼睛看到重要信息。它通常是一個卡片設計與一個輕投影在背景之上的層。此外，構(gòu)建整體也是應用這一規(guī)則的一種方式。
應用場景：卡片、內(nèi)容、列表、服務、摘要
在同一方向上移動的元素被認為比固定的元素或在另一個方向上移動的元素更相關。這個規(guī)則應用幫助我們建立組和狀態(tài)之間的關系。
在制作動畫時，我經(jīng)常更明確地使用這個規(guī)則。然而，我們?nèi)匀豢梢赃m用于許多不同的因素。
應用場景：導航/下拉菜單，折疊，手風琴，工具提示，產(chǎn)品滑塊，視差滾動和指示器。
當我們看東西時，我們的眼睛傾向于首先關注最突出的元素。理解這種行為將幫助我們在設計中創(chuàng)建一個“錨點”，從而推動用戶查看我們的場景之后的內(nèi)容。
應用場景:內(nèi)容、落地頁、價格、產(chǎn)品頁、banner
（彩云注：維基百科解釋為指個人對學習材料或所見所聞的資訊，容易記住最特殊的部分的現(xiàn)象。例如：有一些參考書將重要的資料，以不同顏色或特殊的字體標示出來，就是利用雷斯多夫效應來加深讀者的印象。）
這也被稱為隔離效應，它表明人們傾向于注意并記住與其他部分不同的部分。這條規(guī)則很容易與焦點定律混淆。不同的是，應用此規(guī)則的元素通常是獨立的，沒有為用戶導航更多信息的額外功能。
應用場景：定價表、促銷banner、不同會員介紹
基于現(xiàn)實世界打造的視覺體驗。比如，當我們看一個視頻，每個高潮笑話時都有旁白跟著一起笑時，我們會更容易發(fā)笑（彩云注：想想《快樂大本營》）。用戶會喜歡我們的設計，如果它讓他們感覺良好和舒適。
（彩云注：這個理論的意思是說盡可能讓用戶產(chǎn)生沉浸感，把產(chǎn)品用到真實的環(huán)境上，比如大家平時使用的手機樣機，把設計的界面放到這些樣機中就能夠給人直觀的感受到應用后的效果，也是這個理論的運用）。
應用場景：產(chǎn)品配圖、插圖、攝影
有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學海報就足夠了（彩云注：感興趣的可以自行翻譯研究下）。
此外，我們不要忘記從早期到現(xiàn)在一直在廣泛使用的顏色，這些顏色的使用更符合用戶習慣：
紅色：錯誤
綠色：成功
藍色：進行中
黃色：警告
就像顏色一樣，人類的潛意識對不同的形狀也有不同的反應。例如:
圓形、橢圓形：傳遞積極的信息，通常與社區(qū)或關系有關。
方形和三角形：帶有強烈的信息，通常與力量和穩(wěn)定聯(lián)系在一起。
豎線：代表強度、力量或攻擊性。
橫線：表示平靜、相等、安靜。
這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外，人類是視覺動物，我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設計的有效性，我們不應該去掉解釋性的文字。
（彩云注：根據(jù)這個理論，在做作品集時，就應該盡可能的多用視覺化語言，文字作為輔助，對于視覺設計師來說，能用圖表達的就盡量減少文字的比重。）
一個很明顯的例子就是導航欄。大多數(shù)新的應用或具有復雜功能的應用都同時設計了圖標和文字標簽。
人類的眼睛傾向于看到平行因素比其他因素更相關。我經(jīng)常使用這一原則對同一屏幕內(nèi)的兩組不同內(nèi)容進行分類。最容易看到的例子可能是Facebook messenger界面，當帖子并排排列時，消息是平行的。
這一原則類似于格式塔原則中的相似定律，但它并不是完全相似。共同區(qū)域原則是通過我們使用分隔線、形狀或顏色的方式創(chuàng)建的。
如果一個界面需要用戶滾動更多來查看內(nèi)容，我們應該有一些方法來更清楚地劃分它，而不僅僅是使用間距。
應用場景：列表清單、信息流
根據(jù)NNGroup UXPin等組織或團體的各種研究，兩種最常用的掃描模式是“F”和“Z”。
F的使用最為廣泛，尤其是對于內(nèi)容量大的網(wǎng)站。
Z用于不太注重文本的網(wǎng)站，通常強調(diào)在最后的號召行動。
一旦我們理解了如何使用這些模式，我們就可以選擇布局并有效地安排元素來實現(xiàn)我們的設計目標。
第一印象是最令人難忘的，積極的體驗可以在用戶和產(chǎn)品之間創(chuàng)造持久的關系。如果能讓用戶在一開始就喜歡上我們的設計，就能為我們的產(chǎn)品創(chuàng)造了一個很好的優(yōu)勢。
（彩云注：這些都是非?；A的理論，但基礎的厚度才是決定后期發(fā)展高度，我現(xiàn)在越來越能體會到這一點了，也希望大家能重視并加強基礎的學習。）
原文：https://blog.prototypr.io/10-psychological-rules-i-used-to-make-users-love-at-first-sight-55c71f99bfa1
作者：Hoang Nguyen
譯者：彩云Sky
本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
很多人知道品牌設計中有輔助圖形的概念，輔助圖形對于品牌識別體系非常重要，但其實在圖標設計時，也會經(jīng)常用到輔助圖形。圖標中的輔助圖形，簡單理解就是圖標的裝飾元素，它能讓圖標設計有更多的細節(jié)和特點，強化圖標識別性，同時還能讓圖標更具視覺表現(xiàn)力。
舉個例子，像下面這套圖標中的淺色部分和噪點就是圖標中的輔助圖形，去掉這些輔助圖形不大會影響圖標的識別性，但增加這些輔助圖形后，圖標變得更有特點，更容易被記住。
https://dribbble.com/shots/14490441-Feature-Icons
善用輔助圖形為圖標增強表現(xiàn)力是圖標設計中的一個秘密武器，彩云在工作中總結(jié)了一些經(jīng)驗，大概有以下5點：
《簡約至上》這本書中提到過一個刪除原則：刪除是將不必要的元素都剔除掉，直到不能再刪除為止。那么在圖標設計中，這一點尤為重要，因為圖標本身就濃縮了大量的信息，所以要讓用到的輔助圖形有它存在的價值，不加多余的元素。
比如下面這個案例，容易看出其中的輔助圖形是綠色部分。在圖標中它們代表的是行動或者結(jié)果，作為事物主體的補充，可以理解為主語和賓語的關系。因為有了這樣的輔助圖形存在，強化了圖標的識別性，這就能讓圖標增色不少。
https://dribbble.com/shots/14374503-Covid-19-Back-to-Work
下面這個案例是星球中一位同學的練習，整體來說還是不錯的，但就輔助圖形的使用上看就有些小問題了。淡黃色的輔助圖形圓形跟主體圖形沒有太大的關聯(lián)，也沒有太多實際意義，可以理解為強行為了統(tǒng)一而統(tǒng)一。圖標主體已經(jīng)做了雙色設計，增加這些圓形后讓圖標變得比較復雜且刪除對圖標意義的表達也沒影響，所以這里的輔助圖形的使用稍顯多余。
在配色上，輔助圖形還可以結(jié)合品牌色彩。用品牌色的主色作為主體顏色，輔助色作為輔助圖形的顏色，或者直接用品牌主色調(diào)作為輔助圖形的配色都可以作為圖標設計的亮點。
品牌色的加入，能夠讓圖標配色的使用找到立足的理由，馬上就能加分。
比如大家經(jīng)常在畫圖標的時候，圖標主體通常以單色為主，但此時可以嘗試加入以品牌色裝飾元素作為點綴，立馬就能提升圖標細節(jié)。下面這個案例是愛奇藝的首頁圖標設計，能看出來它的輔助圖形設計配色上是按品牌綠色來設計的。
在使用輔助圖形的時候，尤其是對于多圖標體系來說，完全一致的輔助圖形就顯得比較呆板，缺乏細節(jié)。再拿上面那個星球同學的練習來看，不看輔助圖形的具體含義和復雜度，在整體上看起來也缺乏變化，圓形都在同一個位置，保持著同一個大小和顏色。
輔助圖形的使用想要有更好的效果，盡量在一定的范圍能多一些變化。
比如下面這個例子，雖然圖形的位置和大小都一樣，但在顏色上做了不同的變化，整體看來細節(jié)度還是不錯的。
https://dribbble.com/shots/14728145-Project-icon
再比如下面這個案例，輔助圖形的使用有豐富的變化，使得圖標的細節(jié)滿滿。
https://dribbble.com/shots/3861669-Australia-Post-Iconography
另外值得注意的是，變化應該在一定的范圍，不可以變化太大。
比如星球中另一位同學的練習，她在圖標的底部用了淺色的藍色填充作為輔助圖形，但這3個之間的輔助圖形差異太大，前面2個還能理解是一套，但對于第三個圖標來說，輔助圖形的比例明顯大于前2個圖標，顯得不夠統(tǒng)一。
而對于下面這組圖標來說，藍色的輔助圖形的面積變化相對一致，顯得更為統(tǒng)一。
https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons
雖然使用圖標輔助圖形會讓圖標顯得更加有特點，但也要分清主次，不應該超過圖標本身的核心意義，不能太搶用戶的注意力而影響識別性。
比如下面的案例，圖標主體特征一眼就能識別出來，輔助圖形的加入并不會影響主次關系。
https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography
星球中的一位同學做的練習，這里的輔助圖形有些太過于搶眼，且蓋在圖標上面影響了一定的圖標識別性。修改方向是如果能把輔助圖形的玻璃質(zhì)感做一個強化，增加一些透明度，把主體元素凸顯出來就會好很多。
這是另一位同學的練習，也是同樣的問題，輔助圖形搶了主體元素的風頭。修改方向是把輔助圖形改小一些就會好很多。
她畫這個圖標是臨摹了原作的效果，能看到原作中的星星輔助圖形小一些會好很多。
圖標輔助圖形也是圖標的一部分，從整體上也需要遵循圖標本身的風格體系。
這是星球中一位同學的練習，輔助圖形用星星是沒問題的，但這里星星的尖角相對于主圖形的圓角來說就顯得風格不夠統(tǒng)一，把星星的尖角改為圓角就會好很多。
這位同學的作品也是臨摹了原作的效果，能看到在原作中輔助圖形都是以同樣的圓潤圖形為主的，這里就體現(xiàn)了風格的一致性。
比如對照看看MBE的圖標風格，他的輔助圖形跟主圖形一樣，都是比較圓潤可愛的，這樣看起來整體的風格更加統(tǒng)一和諧。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
最近幾年以來，大家能看到B端設計趨勢已經(jīng)越來越火熱，在B端設計中關于圖表的設計算是為數(shù)不多的視覺發(fā)揮點了。那么怎樣才能做好圖表設計，讓設計出來的圖表高大上，符合業(yè)務需求，讓業(yè)務方和總監(jiān)對你贊不絕口，本文就必須看完和收藏了，因為實在是太實用！
應用設計越來越依賴數(shù)據(jù)驅(qū)動，對高質(zhì)量的數(shù)據(jù)可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數(shù)據(jù)圖表，但我們其實可以通過遵循一些簡單的規(guī)則來改變這個情況。
選擇錯誤的圖表類型，或默認為最常見的數(shù)據(jù)可視化類型，可能會讓用戶感到困惑或?qū)е聦?shù)據(jù)的誤解。根據(jù)用戶希望看到的內(nèi)容，可以用多種方式表示相同的數(shù)據(jù)集。盡量做到每一次做數(shù)據(jù)可視化時都能從數(shù)據(jù)集類型分析和用戶訪談開始。
當使用水平條時，在基線的左側(cè)繪制負值，在右側(cè)繪制正值。不要在基線的同一側(cè)繪制負值和正值。
刪數(shù)據(jù)起點會導致曲解。在下面的例子中，看左邊的圖表可以很快的得出結(jié)論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數(shù)據(jù)表示。
對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢，因此根據(jù)給定時期的數(shù)據(jù)集調(diào)整比例并保持直線占據(jù)y軸范圍的三分之二是很重要的。
折線圖是由線連接的“標記”組成，通常用于可視化時間間隔內(nèi)的數(shù)據(jù)趨勢。這有助于說明數(shù)值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當數(shù)據(jù)更新不頻繁時，這可能會導致混淆。
例如: 使用折線圖來代表年度收入，如果數(shù)據(jù)是每月更新的，則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值，而在特定時間實際的收入數(shù)字是未知的，所以可能會產(chǎn)生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。
平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數(shù)據(jù)，而且過粗的線會模糊真正的“標記”位置。
通常，為了節(jié)省可視化空間，當有兩個具有相同度量但大小不同的數(shù)據(jù)系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導的方式代表了兩個數(shù)據(jù)系列之間的比較。大多數(shù)用戶不會密切關注比例，只是瀏覽圖表，然后就得出了錯誤的結(jié)論。
餅狀圖是最流行的也是經(jīng)常被誤用的圖表之一。在大多數(shù)情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:
1）不要超過5-7片，保持簡單
2）可以將額外的最小段分組到“其他”切片
如果沒有適當?shù)臉撕灒瑹o論你的圖表有多好，它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數(shù)據(jù)和對應的部分。
將數(shù)據(jù)放在切片上可能會導致多個問題，在可讀性問題上和窄切片上都會有挑戰(zhàn)。相反，添加黑色標簽能清晰的鏈接到每個部分。
在確定餅片秩序時，有幾種常用的方法:
1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列
2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列
同樣的建議也適用于其他許多圖表。不要默認采用字母排序，將最大的數(shù)值放在頂部(對于水平條形圖)或左側(cè)(對于垂直條形圖)，以確保最重要的數(shù)值占據(jù)最突出的空間，減少眼球運動和閱讀圖表所需的時間。
餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當我們把中間部分去掉，創(chuàng)建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。
不必要的造型不僅會分散注意力，還可能導致對數(shù)據(jù)的誤解和用戶的錯誤印象。你應該避免:
1）3D元素，明暗面
2）陰影、漸變和其他扭曲的多彩色
3）斑馬圖案，過多的網(wǎng)格線
4）過度裝飾，斜體，粗體或襯線字體
顏色是有效的數(shù)據(jù)可視化的組成部分，在設計時考慮以下3種顏色類型:一個定性調(diào)色板最適合顯示分類變量。為確保易用性，所分配的顏色應該是不同的。連續(xù)調(diào)色板最適合需要按特定順序放置的數(shù)字變量。使用色相或亮度或兩者的組合，可以創(chuàng)建一個連續(xù)的顏色集。
發(fā)散調(diào)色板是兩個連續(xù)調(diào)色板的組合，中間有一個中心值(通常為0)。通常不同的調(diào)色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現(xiàn)的概念相匹配。
看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調(diào)色板。
根據(jù)美國國家眼科研究所(National Eye Institute)的數(shù)據(jù)，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。
1）在調(diào)色板中使用不同的飽和度和亮度
2）把現(xiàn)有配色去色然后檢查對比度和可讀性。
確保排版能夠準確傳達信息，幫助用戶專注于數(shù)據(jù)，而不是分散用戶的注意力。
1）選擇易讀的字體，避免襯線和裝飾過度的字體
2）避免使用斜體、粗體和全部大寫
3）確保與背景有高對比度
4）不要旋轉(zhuǎn)文字
這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。
如果你的任務是在web和移動項目中添加交互式圖表，你應該問的第一個問題是我們將使用什么圖表庫?現(xiàn)代圖表庫包含了許多前面提到的交互和規(guī)則?；谝讯x庫的設計將確保易于實現(xiàn)，并能提供大量交互想法。
幫助用戶通過改變參數(shù)，可視化數(shù)據(jù)進行探索。然后得出結(jié)論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應用使用了各種數(shù)據(jù)表示的組合。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
用戶本能地會對不平衡的設計感到厭煩，如何在畫面中創(chuàng)造一個有吸引力的平衡？是本篇文章要分享的內(nèi)容。
Illustration: Outcrowd
平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。
人體是垂直對稱的，我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。
Illustration: Outcrowd
在設計環(huán)境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。
如何讓一個頁面看起來平衡？
最常見的平衡例子就是使用對稱。
在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側(cè)均勻放置元素來創(chuàng)造的。也就是說，畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的，但它經(jīng)受住了時間的考驗，到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。
Illustration: Outcrowd
兩側(cè)重量不相同的元素構(gòu)成具有不對稱平衡。
動態(tài)平衡通常會比靜態(tài)平衡更有設計感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點，這是一個很好的機會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。
Landing page — Asian Cuisine
比如一般這樣去“配重”的元素會是一個按鈕或者標題。
重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。
不對稱的現(xiàn)象越嚴重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構(gòu)圖并不總是能被很好的感知。
Illustration: Outcrowd
平衡中的另一種類型，特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優(yōu)點是，注意力很容易找到并保持一個焦點——恰好就在它的中心，這通常是構(gòu)圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。
（彩云注：這是一種比較高階的設計平衡處理手法，用的好可以讓畫面非常具有設計感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設計的時候就會發(fā)現(xiàn)，越簡單的設計似乎越難設計好。）
Illustration: Outcrowd
當談到構(gòu)圖中的重量平衡時，他們經(jīng)常將其與物理世界中的重量進行比較：重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復它。元素是否是一組色調(diào)、顏色還是點并不重要，目標是找到圖像的視覺“重心”，即圖像的重心。
不幸的是，沒有精確的方法來確定一個物體的視覺質(zhì)量。一般來說，設計師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助:
大小
大的物體總是更重
形狀
不規(guī)則形狀比規(guī)則形狀的元素輕
顏色
暖色比冷色重
色調(diào)
深色物體比淺色物體重
圖案
帶有圖案的元素顯得更重
3D
帶有紋理貼圖的元素顯得更重
內(nèi)部復雜性
物體內(nèi)部越復雜，視覺重量更大
填充空間關系
正形空間比負形空間更重
對重量的感知
照片中的啞鈴看起來會比一只鋼筆更重
當使用對稱時，作品看起來可以更加的專業(yè)和有科學性。其中，靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴肅的；而動態(tài)對稱的設計方法則能吸引用戶的興趣，表達出個性和創(chuàng)造力，能讓用戶集中注意力。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
圖標是任何設計系統(tǒng)不可或缺的一部分。使用圖標的主要原因是幫助用戶快速理解想法，實現(xiàn)快速導航，解決語言障礙，最終提升用戶體驗。
圖標作為一種設計工具，在UI/UX和平面設計師中最受歡迎。這些微小的設計元素對每個人來說都是簡單易懂的，這些特征賦予了它們通用數(shù)字語言的地位。
在這篇文章中，我整理了10個簡單又重要的技巧幫你設計出更專業(yè)的圖標。
最小的圖標大小通常是12 x 12px。以這個尺寸為基礎，行業(yè)標準中大多數(shù)其他尺寸只是通過將之前的尺寸翻倍而產(chǎn)生的。
重要提示：當你設計圖標時，重要的是要按100%顯示的比例去設計，使圖標完美像素并放大像素塊查看準確性。
完美像素圖標在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網(wǎng)膜顯示器正變得越來越好，所以在不久的將來，對像素完美圖標的需求可能會減少。但就目前而言，讓你的圖標具有可伸縮性、響應性和適配更多設備是非常重要的。
1) 像素網(wǎng)格對齊.
使直線部分完全清晰，并增加曲線和邊角的清晰度。
2)完美角度
有角度的線更模糊。創(chuàng)建圖標的最佳角度是45°，因為形成一個角的像素彼此對稱。
3)邊緣清晰
直線必須占據(jù)其邊緣上最暗的4個像素。這樣線的邊緣看起來更清晰。
為了讓圖標看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規(guī)則我認為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應該相等。
然而，有時候你必須打破這個規(guī)則。當你需要解釋我們在日常生活中面對的一個具有非對稱模式的物體時，它就會發(fā)生。比如條形碼這個例子來說，我故意使圖標內(nèi)的線寬和間隙大小不均勻，以表示條碼的特征。
在UI設計中，對象(包括圖標)的角半徑定義了項目的外觀和感覺。當我們說到一個集合中的多個對象時，規(guī)則很簡單：在正方形和圓角之間進行選擇，并對所有的圖標應用相同的屬性。
為什么它如此重要?一致性是UI/UX設計的關鍵原則。一個可用和用戶友好的設計總是提供一致的體驗。在下面的例子中，你可以看到打破這個原則是如何影響視覺感知的。
在電腦上看起來完美對齊和平衡的東西，在你的眼睛看來可能并不一樣。
當我們把大小相等的正方形和圓放在一起時，我們會有一種不對勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應該使圓更大(或減少正方形的尺寸)。
這個原則也適用于圖標的設計和使用。有些圖標的一側(cè)可能較重。試著調(diào)整它們一兩個點，直到整體對齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標看起來很大，盡管它與其他部分的大小相同。為了平衡這個集合，我們需要通過縮小圖標的大小來調(diào)整突出顯示的圖標。
（彩云注：這個原則很多人應該都知道，但我發(fā)現(xiàn)也是在整套圖標的設計中最容易出現(xiàn)的問題，當把圖標匯總在一起的時候，這個問題尤其需要重視。）
我們經(jīng)常在設計軟件中使用中心對齊，這種方法沒有錯。但當涉及到細節(jié)時，比如圖標設計，我們需要相信自己的眼睛，打破數(shù)學法則，以增強元素的平衡。
讓我們以播放按鈕作為展示。這個例子很簡單，但非常能說明問題，因為形狀越不對稱，需要改進的缺陷就越明顯。
我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是，大多數(shù)系統(tǒng)在保持簡單的情況下工作得最好。用戶越容易理解某樣東西并與之互動，它就越具有通用性。
（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學習下。）
它如何適用于圖標設計?
1）別使用文字
文本和圖標的綁定減少了圖標的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標旁邊的標簽。
2）不要過度設計
不必要的復雜性阻礙了合理的表達，應該避免。過載的設計會將用戶體驗變成一場噩夢。
3）避免不必要的元素
只要確保每個圖標在整體環(huán)境中是可理解和清晰的就行。（彩云注：比如已經(jīng)是在郵件客戶端中，就不需要再額外增加表示郵件的圖標部分）
重要提示：在圖標設計中合理地使用KISS原則，也不要把事情做得太簡單，否則會影響功能。一個優(yōu)秀的圖標應清晰易懂。
圖標規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個框架來設計圖標。但是，這個規(guī)則非常靈活，只是作為參考，方便圖標的設計在視覺上平衡。所以，如果你覺得你的圖標不完全匹配這個框框，但看起來完全正確——相信你的眼睛！
框架是設計的“容器”。框架規(guī)范了一個統(tǒng)一的范圍來設計圖標，這背后有一些原因：
1) 大小
由于其幾何形狀，所有圖標都具有不同的高度和寬度。為了在我們的設計中統(tǒng)一圖標尺寸，我們應該將它們放置在大小始終相同的框架中。
2)輸出
框架內(nèi)的圖標與視覺中心對齊，這經(jīng)常被開發(fā)人員忽略，因為他們經(jīng)常根據(jù)實際的中心來調(diào)整圖標，而沒有注意到差異。這就是為什么用框架輸出圖標是至關重要的，當你按這個框架輸出圖標時，能保證視覺設計時想要的視覺中心。
3)效率
如果使用Figma，可以通過創(chuàng)建組件來節(jié)省時間?？梢允褂脤嵗焖俚貙⒁粋€圖標替換為另一個圖標。
如果你要打算做圖標資源庫的話。要想到當設計師在庫中搜索圖標時，會遇到哪些挑戰(zhàn)?他們的痛點是什么?他們的需求是什么?要回答這些問題，請設身處地為用戶著想。
1）不要讓用戶思考
例如，如果他們不知道自己想要找到哪種花卉圖標，那么就讓他們看到一系列選擇:鮮花項鏈，室內(nèi)花卉，植物商店等。
2）展示關聯(lián)圖標
例如，如果用戶想在相同的主題或類別中找到圖標，他們可以快速地檢查包含這個特定圖標的完整集合。
3）使用標簽
用戶可能很難找到合適的詞進行搜索，或者可能希望看到所有類似的補充選項，從中選擇最合適的。例如，當一個圖標的實際名稱是“蘭花花瓣”，你仍然可以找到它與以下關鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫
最終應該導出SVG或PNG格式？這是一個關鍵問題。讓我們來比較一下格式:
我個人的選擇是使用SVG圖標，因為它可以節(jié)省很多時間。但是，一定要小心縮小復雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
在本文中，我們將發(fā)現(xiàn)：
3D視覺設計師的內(nèi)卷將會越來越嚴重
數(shù)據(jù)可視化的工作將變得越來越重要
服務的移動化還需要做出更多努力
scrollytelling 技術(shù)會越來越流行
舊的滾動是無聊的。如果你想吸引注意力，你就需要實現(xiàn)滾動敘事（scrollytelling）。（彩云注：這個技術(shù)的核心在于邊滾動頁面邊講故事）
《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構(gòu)之一。
它是一種敘事形式，可以在網(wǎng)頁和APP上呈現(xiàn)。想象一下，在一個網(wǎng)站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結(jié)局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。
2022年，Scrollytelling將會出現(xiàn)在你看到的每一個流行網(wǎng)站上。
另一方面，scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:
Scrollytelling在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設計師創(chuàng)造出酷炫的視覺效果，還需要認真思考一個你想要講述的故事情節(jié)。
所以，最好的網(wǎng)站不可能在2天內(nèi)建成，需要更多的時間去打磨。
IAmBinadam令人驚艷的敘述設計
滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結(jié)果是值得的。頁面變成“活的”，每一秒都有新的事情發(fā)生，所以在閱讀時很難感到無聊。
那么移動端APP呢? Pure是一款約會應用（彩云注，這個應用在app store可以搜到，推薦大家安裝一個體驗一下，非廣告），它創(chuàng)造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時，它就會被激活):
Scrollytelling是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網(wǎng)頁設計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設計出來。
如何在2022年做出一個還不錯的企業(yè)網(wǎng)站？你不會想告訴用戶你是“XX領域公認的領導者，該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。
最好不要用形容詞，而是用事實來說明:你有多少分支機構(gòu)，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡單，而且有趣。
數(shù)據(jù)可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:
通過去除數(shù)據(jù)集的復雜性，使信息更容易讓讀者感知。
不同級別的數(shù)據(jù)具有不同的大小，這樣用戶知道應該先從哪里查看
讀者可以很快注意到作者試圖通過圖片引出的結(jié)論。考慮到如今人們消費的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來的正面影響更大。
有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到
還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計局的數(shù)據(jù)，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來，得分已升至4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了4個小時。
人們壓力太大，卷的太辛苦，以至于不愿去看復雜的數(shù)據(jù)。
設計師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復雜的信息通常被忽略，因為讀者試圖節(jié)省他們的時間，更有可能使用滾動按鈕。
Illustration by Mona Chalabi
以下是我們推薦的一些表示數(shù)據(jù)的方式
1）圖表和曲線圖
2）插圖
3）靜態(tài)信息圖
4）互動信息圖
Illustration by Ink Factory
一個好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte通過圖表解釋了好圖表的3個原則：
1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應趨向于1。簡單地說，應該刪除一切不必要的元素，保持整潔。
2）充分利用好畫面空間。也就是說，需要將數(shù)據(jù)編排的更緊密
Graph by Hootsuite
3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來很酷，但真實永遠是更重要的。
根據(jù)We Are Social的數(shù)據(jù)，2021年有52.2億人使用手機，約占世界人口的66%。自2020年1月以來，手機用戶數(shù)量增長了1.8%(9300萬)，而手機聯(lián)網(wǎng)總數(shù)量增長了7200萬(0.9%)，到2021年初達到80.2億。
過去一年，社交媒體用戶的數(shù)量增長了13%以上。到2021年初，社交網(wǎng)絡上已有近5億新用戶注冊。根據(jù)App Annie的數(shù)據(jù)，Android用戶每天花在手機上的時間超過4小時。2020年，安卓用戶上網(wǎng)時長超過3.5萬億小時。
令人印象深刻的數(shù)字，是嗎？似乎到2022年，為產(chǎn)品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用？有以下幾點可供評估：
1）用戶主要通過移動設備訪問你的網(wǎng)站這是你應該了解的重要數(shù)據(jù)。
客戶和你在一起的時間越長，你就有越多的機會去吸引他們，了解他們的習慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）
2）幫助內(nèi)部業(yè)務流程更加有效。
如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業(yè)務流程的移動應用。
如今，像這樣的手機應用使企業(yè)能夠執(zhí)行越來越復雜和多樣化的任務，加快日常重復操作和文檔管理。
3）實現(xiàn)一些網(wǎng)站上沒有的新功能。
如果你認為APP能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機會？例如，隨著疫情的蔓延，許多人開始用上健身APP在家里鍛煉。
4）競爭對手做的情況。
要了解競爭對手在做什么，他們是否有APP，能做什么，以及他們是否真的對用戶有用。
查看App Store和谷歌Play的統(tǒng)計數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要，那么你就容易被甩在后面。
5）復購率。
一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發(fā)送一個通知就能完成，成本更低。
在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。
6）促銷工具。
有了應用，你就不需要花錢設計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到APP，并分享有用的促銷信息。
開發(fā)手機網(wǎng)站比開發(fā)手機應用需要更少的工作量，這反過來可以降低整體推廣成本。
這部分是由于響應式設計的出現(xiàn)，它允許你根據(jù)打開網(wǎng)站的設備屏幕來調(diào)整網(wǎng)站。至于APP，它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。
一些設計師認為“前端驅(qū)動的網(wǎng)絡體驗”會是2022年的一個好機會，我非常同意!（彩云注：在國內(nèi)，現(xiàn)在開發(fā)小程序的肯定越來越多了。）
我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設計師們就已經(jīng)設計了很多3D圖像和動畫了。
Cardi B rhymes with 3D
3D技術(shù)已經(jīng)在過去流行了很多年，但它不會很快消失。此外，我們預測3D圖形將變得更加多樣化和包容。
在過去的幾年里，3D藝術(shù)和動畫已經(jīng)出現(xiàn)在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。
3D當然應該成為2022年最熱門的趨勢和預測之一，因為與經(jīng)典動畫相比，逼真的3D形狀結(jié)合動畫總是引人注目的。
“從技術(shù)上講，通過3D更容易傳達更多內(nèi)容，因為它比平面圖片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動性。"
許多設計師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合，也作為一個優(yōu)秀的工作方法蘊藏著巨大的潛力。
烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國
注意一點：在整合3D圖形等重量級內(nèi)容之前，確保你的應用性能是OK的，能夠快速加載所有元素。
Meta的logo既不是2D也不是3D?；蛘邇烧呒娑兄?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。
Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設計師也需要保持關注。跟著趨勢走，易于放大自身價值。）
越來越多的公司在網(wǎng)站和移動應用中使用動畫，以提高用戶的沉浸感和體驗，使內(nèi)容更有趣。
動畫是2022年重要的網(wǎng)頁設計趨勢。2022年，如果沒有它，你的產(chǎn)品很可能會看起來就像個半成品。混合風格的動畫越來越受歡迎:定格動畫和3D動畫的結(jié)合，2D動畫和3D動畫的結(jié)合。設計師這樣做是為了獲得不同尋常的風格解決方案，以及提高最終產(chǎn)品的質(zhì)量。
2022年，動畫設計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業(yè)設計師數(shù)量的增長，實現(xiàn)新想法的機會也在增加。
1）講故事動畫。
可以通過在界面和用戶之間建立情感聯(lián)系來傳達信息。
加載動畫Yoichi Kobayashi
2）更有趣的加載。
用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。
3）光標效果。
用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫，對這個光標作出反應來探索網(wǎng)站。這種效果在21世紀初非常流行。如你所知，流行趨勢往往每20年就會重演一次。
4）動態(tài)排版
你有沒有想過讓字母跳舞?
據(jù)Statista統(tǒng)計，2020年全球動畫市場達到了2700億美元。趨勢是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡上使用動畫制作廣告。毫無疑問，動畫插圖的優(yōu)勢是它們非常靈活和多樣化。
寶馬歷史動畫
這樣的作品通常用于兩種情況:
1）用于解釋視頻
2）電商廣告
動畫解說的趨勢出現(xiàn)在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。
在招聘或商業(yè)視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。
微交互是幫助用戶瀏覽網(wǎng)站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么，將導致什么操作，下一步需要做什么。
圖片來源awwards
動畫交互將為你的設計注入活力，并有助于保持用戶粘性。關注每一個細節(jié)是設計師工作的關鍵，因為設計中的所有元素都可以帶來積極的用戶體驗。
重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們?yōu)榻缑嬖卦鰪妰r值。
微交互有助于頁面導航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現(xiàn)特定的行為。
2022年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動畫logo設計。
圖片來源Toridori
動畫logo主要有以下幾點營銷優(yōu)勢:
1）吸引注意力。這意味著它們有助于提高品牌知名度。
2）有助于提高SEO。谷歌更傾向于動態(tài)內(nèi)容，帶有動態(tài)圖形的頁面更容易吸引用戶。
3）在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的logo更有趣。
4）最重要的是展示了歷史。靜態(tài)logo背后的想法正在動畫中發(fā)展。由于這一點，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價值!
一家洗衣機[公司]的標志(https://www.schulthess.ch/)
現(xiàn)在有很多設計模板，可以很容易地用字體制作一個動畫logo:
圖片來源Shabello, Bobby Voeten
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
藍藍設計的小編 http://m.yvirxh.cn