輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計(jì)師一致的，只是省略了更多復(fù)雜的細(xì)節(jié)。而對(duì)于整個(gè)擬物的體系來講，最重要的東西實(shí)際上只有2個(gè)，形體、光影。
1. 形體表現(xiàn)
形體的表現(xiàn)，就是對(duì)圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標(biāo)分享中，有寫過面性圖標(biāo)進(jìn)階的設(shè)計(jì)中，可以包含更多的細(xì)節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設(shè)計(jì)就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上，即你要把這個(gè)圖形的內(nèi)容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點(diǎn)評(píng)的快速入口圖標(biāo)，雖然看起來很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過多的細(xì)節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非?？简?yàn)設(shè)計(jì)師的判斷和經(jīng)驗(yàn)了。
并且，在描繪輪廓的時(shí)候，新手盡可能的采取正視圖來進(jìn)行繪制，而不要通過俯視圖、側(cè)視圖、斜視圖等方法來呈現(xiàn)圖形的多個(gè)面，這樣難度會(huì)大幅度上升，比如下面這種情況。
2. 光影表現(xiàn)
除了形體外，光影就是整個(gè)擬物的靈魂了。
當(dāng)一個(gè)完整的圖形完成填充色時(shí)，它是扁平圖案，如果完成光影呈現(xiàn)的時(shí)候，它就是三維空間的立體圖形，比如下面這個(gè)圓的案例：
在擬物的設(shè)計(jì)中，我們對(duì)光影的定義是至關(guān)重要的，所以首先就是針對(duì)該圖形確定光源的方向，是上方、前方、左上還右上，這對(duì)后續(xù)的設(shè)計(jì)有一連串的影響。
如果對(duì)光影沒有正確的解釋，那么在制作細(xì)節(jié)的漸變角度、投影的使用上，就會(huì)產(chǎn)生錯(cuò)誤的設(shè)計(jì)，造成光影視覺沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線的影響就會(huì)產(chǎn)生明暗面和投影，可以簡(jiǎn)單劃分成4個(gè)部分，高光、亮部、暗部、投影。
這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對(duì)光影的表現(xiàn)還會(huì)包含明暗交界、反光面，這對(duì)于輕擬物的來說負(fù)擔(dān)太重，所以我們要去掉它們，接下來重點(diǎn)講講高光和暗部。
高光是物體作為受光物對(duì)光源的直接反映，比如人像攝影中人眼眸中的高光就是對(duì)閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長(zhǎng)期存在的高光配飾（多數(shù)動(dòng)畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對(duì)比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因?yàn)椴辉谑芄饷?，所以顏色?huì)變暗。在實(shí)際操作過程中，我們可以通過漸變的方式開控制明暗的表達(dá)，但盡量不要直接手動(dòng)設(shè)置一個(gè)漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個(gè)特性以后，下面，我們就通過一個(gè)實(shí)例來講解一下輕擬物設(shè)計(jì)的過程吧。
作為輕擬物的演示，直接畫個(gè)圖標(biāo)講一遍怎么操作是沒什么用的，我們要從實(shí)際場(chǎng)景出發(fā)，用它來解決一些真實(shí)的問題。比如看看下面的 KFC 官方 APP 首頁：
總結(jié)它的問題，不難發(fā)現(xiàn)首頁頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個(gè)（加滑動(dòng)的），雖然每個(gè)模塊圖標(biāo)單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級(jí)和對(duì)比性。
我們要做的，就是通過輕擬物的方式，調(diào)整快速入口最大的三個(gè)圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺差異性。先從第一個(gè)圖標(biāo)開始，講解一下如何完成輕擬物化設(shè)計(jì)的升級(jí)。
第一步：確認(rèn)輪廓造型
第一個(gè)操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動(dòng)，包括加粗車頭，減少高度，增加車燈等。并對(duì)每一個(gè)模塊進(jìn)行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對(duì)圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達(dá)意。
第二步：完善圖形細(xì)節(jié)
這一步，就要在原有基礎(chǔ)上，進(jìn)行下一步的深入。包括對(duì)一些細(xì)節(jié)交代得更清楚一點(diǎn)，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎(chǔ)的暗部表現(xiàn)
在這里，我們就要開始為圖標(biāo)增加高光了，高光從右上角打下來，那么有疊加關(guān)系的元素就會(huì)產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強(qiáng)。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創(chuàng)建一個(gè)圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對(duì)暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，將整個(gè)圖標(biāo)的質(zhì)感進(jìn)行拉升。
通過上面的演示，我們可以將整個(gè)擬物設(shè)計(jì)流程精簡(jiǎn)成：
然后，通過這樣的步驟，再來完成后續(xù)的兩個(gè)圖形，拆解完的效果如下。
然后，再用這三個(gè)修改后圖標(biāo)套用進(jìn)原來的頁面，并做出對(duì)應(yīng)的修改，再來看看前后對(duì)比：
通過這個(gè)對(duì)比，我們就可以看出在這個(gè)復(fù)雜的首頁頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來，且不會(huì)顯得太突兀和復(fù)雜。
而這就是輕擬物在項(xiàng)目設(shè)計(jì)中的實(shí)際作用，當(dāng)畫面元素已經(jīng)開始超負(fù)荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時(shí)，就是輕擬物登場(chǎng)的時(shí)候了。
最后的總結(jié)，學(xué)習(xí)輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創(chuàng)意增加一些儲(chǔ)備彈藥，以應(yīng)對(duì)越來越復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。
我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因?yàn)闀r(shí)間上來不及，另一方面是希望大家不會(huì)被軟件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
文章來源：站酷 作者：超人的電話亭
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果要設(shè)計(jì)產(chǎn)品或開發(fā)界面，我們通常會(huì)需要風(fēng)格相同的圖標(biāo)，若無法自行繪制或不希望付費(fèi)購買也有很多替代方案，本文要推薦的「Basicons」是一款基礎(chǔ)、簡(jiǎn)單的圖標(biāo)設(shè)計(jì)，可用于產(chǎn)品開發(fā)設(shè)計(jì)，這套圖標(biāo)一共收錄186種圖案，同時(shí)提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預(yù)覽圖標(biāo)，也能切換不同尺寸下的呈現(xiàn)樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細(xì)，可以快速下載圖標(biāo)圖案或取得源碼。
Basicons也有一個(gè)內(nèi)嵌（Embed）語法產(chǎn)生器，能產(chǎn)生帶入圖標(biāo)圖案的JavaScript語法和HTML程式碼，如果要獲得更好的效能，建議直接從網(wǎng)站一次下載所有圖標(biāo)，再依照需求使用即可。這套圖標(biāo)集以MIT授權(quán)方式釋出。（即可以免費(fèi)使用、修改、出售，附上協(xié)議即可）
網(wǎng)站鏈接：https://basicons.xyz/
使用教學(xué)
STEP 1
開啟Basicons 從首頁就能預(yù)覽完整圖標(biāo)圖案，這套圖標(biāo)特色是以非常精簡(jiǎn)、干凈的線條繪制而成的圖形，每個(gè)圖案下方會(huì)有名稱，應(yīng)該能夠很快速聯(lián)想到圖標(biāo)代表的意思（否則就失去圖標(biāo)的意義…），可以稍微預(yù)覽一下看看自己需要的圖案有沒有列在上面，依照說明，Basicons 每周都會(huì)更新加入新的圖案。
STEP 2
從右側(cè)的「Customize」自訂選項(xiàng)可以調(diào)整圖標(biāo)尺寸、線條粗細(xì)，調(diào)整后會(huì)直接呈現(xiàn)于左側(cè)。
STEP 3
點(diǎn)選要下載的圖標(biāo)后再按下右側(cè)的「Download」就能下載.svg圖標(biāo)格式（或是從上方點(diǎn)選Download All將所有186個(gè)圖標(biāo)完整下載），如果想直接取用SVG原始碼的話可點(diǎn)選「Copy SVG」復(fù)制程式碼。
除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結(jié)和原始碼。
文章來源：優(yōu)設(shè) 作者：Pseric
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
一直有很多朋友會(huì)問一些關(guān)于移動(dòng)端實(shí)現(xiàn)動(dòng)效的方法，平時(shí)也會(huì)給大家做一些解答，但是可能沒有那么系統(tǒng)性，這次抽點(diǎn)時(shí)間總結(jié)歸納下這方面的內(nèi)容，跟大家分享下我日常設(shè)計(jì)中是如何完成動(dòng)畫實(shí)現(xiàn)的。
設(shè)計(jì)輸出的方式大概可以分為位圖和矢量?jī)煞N，與常規(guī)的圖片輸出并無太大的差異。位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動(dòng)畫。
當(dāng)然除了以設(shè)計(jì)提供的方式之外，還可以設(shè)計(jì)完成好demo，開發(fā)通過代碼進(jìn)行實(shí)現(xiàn)例如：javascript直接實(shí)現(xiàn)、SVG（可伸縮矢量圖形）、CSS3 transition、CSS3 animation、Canvas動(dòng)畫、requestAnimationFrame由于超出個(gè)人能力范疇就不展開講了。
實(shí)現(xiàn)動(dòng)畫，首先還是得了解有哪些工具可以制作及合成相關(guān)的動(dòng)效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準(zhǔn)備學(xué)習(xí)一個(gè)新的專門制作svg動(dòng)畫的軟件-KeyShape。
接下來講解下各個(gè)軟件輸出對(duì)應(yīng)格式的方法，實(shí)際上操作并不會(huì)太難，動(dòng)效本身更重要的還是在于創(chuàng)意本身，因此當(dāng)你把握了這些方式之后可以考慮進(jìn)行創(chuàng)意設(shè)計(jì)。
由于GIF文件多種工具都可以輸出，這里就不再作詳細(xì)說明
1. PNG序列
具體如下視頻
2. APNG
如上導(dǎo)出到PNG序列幀，拖拽到iSparta軟件中，合成即可。合成時(shí)可以選擇幀率、循環(huán)次數(shù)（0為無限循環(huán)）、導(dǎo)出質(zhì)量等。如下視頻
3. Lottie
更多Lottie相關(guān)可以前往https://lottiefiles.com/學(xué)習(xí)，里面有豐富等Lottie動(dòng)畫效果和一些插件下載，去研究下吧
4. SVG動(dòng)畫
建議大家自己下載軟件后嘗試
5. 格式大小比
通過試驗(yàn)幾種格式的大小大概是排序依次為：PNG序列>APNG>GIF(質(zhì)量較差)>Lottie / SVG，json文件和SVG動(dòng)畫文件比較接近，因此可以根據(jù)實(shí)際考慮決定即可，GIF雖然可以壓縮到比較小，但是本身圖片質(zhì)量也較差，因此建議慎重考慮。
動(dòng)效在UI設(shè)計(jì)中的應(yīng)用場(chǎng)景很多，這里梳理了一下，之前我在項(xiàng)目中嘗試過的動(dòng)效，給大家分享下一些案例，希望可以對(duì)大家有所啟發(fā)。
學(xué)習(xí)用什么工具導(dǎo)出什么格式的文件只是第一步，更重要的還是如何制造出一個(gè)有創(chuàng)意的動(dòng)效，因此不要過于強(qiáng)調(diào)工具，更多應(yīng)該培養(yǎng)自己思考設(shè)計(jì)的習(xí)慣。
文章來源：優(yōu)設(shè) 作者：ID設(shè)計(jì)站
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
按鈕在界面設(shè)計(jì)中，屬于最基礎(chǔ)的元素部分組成，按鈕設(shè)計(jì)的精致，整個(gè)頁面的品質(zhì)也會(huì)上升不少的檔次。今天給大家分享這篇文章，主要講解在設(shè)計(jì)按鈕時(shí)我們應(yīng)該考慮哪些因素，包括視覺上，有哪些萬能的方法及公式，能夠正確的制定按鈕的設(shè)計(jì)標(biāo)準(zhǔn)，來提升整個(gè)設(shè)計(jì)的系統(tǒng)性。
在設(shè)計(jì)按鈕之前，需要先理解按鈕起到的代表含義。什么地方該加按鈕，什么地方不加按鈕，在系統(tǒng)化設(shè)計(jì)思路中需要非常有講究。通常按鈕在頁面，主要起到以下三點(diǎn)作用：
1. 某一類型的功能操作
這種比較常見，如一些控件形態(tài)的按鈕，比如加減、折疊、展開，下拉等。這類按鈕會(huì)起到一些功能形態(tài)的作用，常用于交互場(chǎng)景。所以在這類按鈕設(shè)計(jì)中，應(yīng)當(dāng)弱化按鈕形式，重點(diǎn)強(qiáng)調(diào)功能，突出主體信息。
2. 下一步的明確指引
當(dāng)頁面內(nèi)容信息過多后，用戶容易失去信息焦點(diǎn)，從而忘記下一步操作。信息種類越多，用戶權(quán)衡的時(shí)間就會(huì)越久，用戶選擇罷手及跳出的幾率也會(huì)越大。所以這個(gè)時(shí)候，在合適的地方增添按鈕，能夠很好的引導(dǎo)用戶進(jìn)行下一步操作，提升整體操作的成功率。其次從體驗(yàn)層面，也一定程度能起到頁面動(dòng)線的引導(dǎo)作用，比如下方的一組卡片，在增添了按鈕后行動(dòng)點(diǎn)很明確，非常有點(diǎn)擊欲望~
3. 固定習(xí)慣，明確心理預(yù)期
當(dāng)用戶知悉某個(gè)按鈕能指向某個(gè)操作，或者獲取某類信息后，長(zhǎng)期以往用戶就會(huì)形成使用這個(gè)按鈕的習(xí)慣，這樣對(duì)提升復(fù)訪及固定心智是非常有效果。
所以如果你認(rèn)為你負(fù)責(zé)的產(chǎn)品或者是內(nèi)容，能持續(xù)為用戶帶來價(jià)值，那么在頁面的關(guān)鍵節(jié)點(diǎn)，不如將按鈕設(shè)計(jì)的更醒目。這樣用戶下次再看到這個(gè)按鈕時(shí)，固定習(xí)慣會(huì)引導(dǎo)他持續(xù)的點(diǎn)擊。
這里我不以按鈕的長(zhǎng)相來區(qū)分按鈕的類型，如漢堡按鈕或者別的什么的，意義不大。我主要還是想通過以按鈕的功能區(qū)分，來劃分類型，這樣大家理解起來更為清晰。
1. 功能性質(zhì)按鈕
這類按鈕見到的最多，我們常用的APP里，大量都充斥了這類按鈕，這類按鈕會(huì)起到重點(diǎn)的功能交互，幫助用戶得到TA想要的信息。其次樣式上面，其實(shí)圓形的點(diǎn)擊欲，會(huì)更強(qiáng)一些，看起來也更利于點(diǎn)擊。而方型的按鈕，則顯得更為正式、嚴(yán)謹(jǐn)。
公式：如果是圓形按鈕，圓角的半徑=高度的50%比較合適，而如果是方按鈕，邊角的小圓角半徑控制在15%以下比較合適，我個(gè)人喜好用10%。
2. 聚焦大按鈕
這類按鈕通常見于一些核心頁面的強(qiáng)指引，比如登錄、注冊(cè)、提交表單、或者是保存，等對(duì)頁面全局進(jìn)行操作的一些按鈕。需要注意的是，這類按鈕只適合對(duì)頁面全局進(jìn)行操作，而且頁面中大按鈕的數(shù)量不宜超過2個(gè)，信息盡量需要保持聚焦。
公式：基于@2x，這類大按鈕的高度≥72px是比較合適的，通常的尺寸有 80px、88px、96px，大家可以根據(jù)產(chǎn)品面向的人群來定高度，如果頁面面向的人群較為廣泛，我建議采用 88px 或者是 96px 的這種大號(hào)版本，畢竟操作起來更為方便。
3. 吸底按鈕
這類按鈕的優(yōu)先級(jí)，在整個(gè)頁面屬于最高，頁面的所有信息，都將聚焦在這個(gè)按鈕中。由于按鈕是吸底的，所以會(huì)一直浮在頁面上，不受頁面篇幅影響控制。
需要注意的是，吸底按鈕一定是頁面最重要的功能，或者是整個(gè)頁面的下一步指引，比如淘寶的立即購買，或者是餓了么、美團(tuán)的立即下單，又或者是常見的充值界面。
公式：基于@2x，吸底的高度≥80px是比較合適，常見的尺寸有88px、100px、112px ，按鈕的大小可以根據(jù)內(nèi)容來定，建議高度保持在72px以上比較合適。這里需要注意的是，吸底的按鈕，需要產(chǎn)出兩套設(shè)計(jì)稿，一套為常規(guī)稿，一套為iPhoneX的適配稿。iPhoneX底部控件的區(qū)域高度為68px，所以iPhoneX設(shè)計(jì)稿的吸底高度=常規(guī)設(shè)計(jì)稿吸底高度+68px
另外在設(shè)計(jì)按鈕的時(shí)候，也別忘了補(bǔ)充按鈕的多個(gè)狀態(tài)的設(shè)計(jì)稿。常見的狀態(tài)，有以下四種：
1. Normal-正常態(tài)
這個(gè)為按鈕的正常顯示態(tài)，就是正常頁面中的顯示效果。
2. Hover-懸浮態(tài)
這個(gè)為按鈕的懸浮態(tài)，一般只會(huì)出現(xiàn)在使用鼠標(biāo)的時(shí)候。當(dāng)鼠標(biāo)指針停留在按鈕時(shí)，按鈕發(fā)出的特殊反饋，則為懸浮態(tài)。這類形式在移動(dòng)端交互中無作用，所以移動(dòng)界面設(shè)計(jì)中不需要考慮這個(gè)狀態(tài)。
公式：正常情況 Hover 態(tài)增加 10% 黑色就可以，原理如下
3. Pressed-點(diǎn)擊態(tài)
這個(gè)為按鈕的按壓態(tài)，就是按鈕在被點(diǎn)擊或者是按壓后的效果。
公式：在APP設(shè)計(jì)中，點(diǎn)擊后的效果我們?cè)O(shè)一個(gè)標(biāo)準(zhǔn)值讓開發(fā)實(shí)現(xiàn)就好了。常用的值有按鈕減少20%的透明度，或者增添20%的暗度，這兩個(gè)都可以。通常我建議在亮色上的按鈕，使用暗度疊加（增添20%的黑色），在暗色上的按鈕，則使用透明度減少（透明度改為80%），實(shí)現(xiàn)效果原理參考 Hover 態(tài)那張配圖
4. Disable-禁用態(tài)
當(dāng)信息未填充完整，或者是某類條件未到，按鈕會(huì)出現(xiàn)不可點(diǎn)擊的狀態(tài)，處于禁用形式，這個(gè)時(shí)候，按鈕就會(huì)呈現(xiàn)禁用態(tài)。這個(gè)禁用態(tài)無論是web還是app，很多場(chǎng)景都會(huì)用到，所以建議設(shè)定一套標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范，避免重復(fù)定義這個(gè)效果。
公式：禁用態(tài)尺寸及大小不變，僅使用色值做區(qū)分。建議使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要盡可能把樣式做弱，避免用戶做無效的點(diǎn)擊。
在目前移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)中，雖然按鈕的種類很多，但風(fēng)格變的逐漸統(tǒng)一，更多都是色值及細(xì)節(jié)上的差異。從大的風(fēng)格來看，按鈕還是分為這這幾種類型：扁平化、輕擬物、重?cái)M物及游戲按鈕。
1. 扁平化按鈕
這類按鈕我們?cè)O(shè)計(jì)用的最多，信息簡(jiǎn)潔，操作方便，形式追隨功能。這里也給大家分享一下我在設(shè)計(jì)扁平化按鈕的一些經(jīng)驗(yàn)，比如高度寬度，以及陰影的色值。
公式：按鈕高度，這個(gè)通常是文字字號(hào)的2.4倍然后取4的倍數(shù)整數(shù)，比如字號(hào)是24，那么按鈕的高度=57.6，離4倍數(shù)最近的是56，所以高度=56，圓角=10%的高度，取整后是6px。
另外如果覺得不合適，也可以單位往8遞增或者是遞減即可，例如 56、64、72、80、88 px
按鈕寬度：如果不是那種全局按鈕，通常按鈕的寬度=最多容納字?jǐn)?shù)的寬度+按鈕高度，就好啦。還是以上面那個(gè)例子為例，按鈕高度=56，文字寬度=96，那么按鈕的寬度=56+96=152
2. 輕擬物按鈕
這類按鈕近幾年變的非常流行，甚至QQ、淘寶，都開始大面積使用，因?yàn)檫@類按鈕在保持信息簡(jiǎn)潔的同時(shí)，仍然有較強(qiáng)的點(diǎn)擊欲，視覺上面也能夠增添頁面的品質(zhì)感。
公式：漸變方向，建議采用水平漸變，重色在右側(cè)，輕色在左側(cè)更為合適。陰影色值我之前就寫過，不知道大家還記得么，陰影顏色=按鈕顏色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴(kuò)展=按鈕高度的 -15%，高級(jí)又簡(jiǎn)單，完美！
如果覺得這個(gè)彌散陰影太大的同學(xué)，也可以自己手動(dòng)簡(jiǎn)單調(diào)整下，不礙事。（這個(gè)公式僅適用于Sketch，用PS的同學(xué)，也可以按照這個(gè)邏輯自行研究一下）
另外說一句，實(shí)際上這個(gè)陰影公式并沒有什么很多的依據(jù)，大多數(shù)都是我個(gè)人原創(chuàng)總結(jié)出來的，簡(jiǎn)單好用。比如下面的這些按鈕的樣式，用了公式后的效果大家可以自行感受~
3. 重?cái)M物及游戲按鈕
在一些營銷頁面中，按鈕的樣式通常需要做的比較游戲化。游戲化的按鈕，大部分會(huì)采取游戲場(chǎng)景中的元素，再采用擬物的手法，來進(jìn)行打造。
通常游戲化的按鈕，需要重點(diǎn)幾個(gè)部分組成，學(xué)過素描的同學(xué)應(yīng)該會(huì)知道，立體的物體，通常會(huì)有幾大特征，分別為高光，亮部，暗部，投影及反光。那么如果我們需要繪制一個(gè)在營銷或者游戲場(chǎng)景中使用的按鈕，只需要保證這個(gè)按鈕有高光，亮部，暗部，投影及反光的這些特征，然后飽滿一點(diǎn)就，立馬就可以出效果啦。
當(dāng)然，我舉的這幾個(gè)例子都是最基礎(chǔ)版本，如果你想做的更豐富一些，那也是沒問題的，這個(gè)可以case by case 來定。
這個(gè)沒有太多的公式可以總結(jié)，更多的是看設(shè)計(jì)師的基礎(chǔ)美術(shù)水平啦~~
在寫這篇文章的時(shí)候，突然刷到了一套新擬態(tài)的控件設(shè)計(jì)風(fēng)格，有種眼前一亮的感覺。雖然這套設(shè)計(jì)視覺上很有層次很好看，不過感覺短時(shí)間之內(nèi)，比較難大面積推廣，因?yàn)殚_發(fā)實(shí)現(xiàn)起來還是會(huì)比較耗費(fèi)成本。
我把源文件保存下來了，對(duì)這個(gè)感興趣或者好奇這種效果如何實(shí)現(xiàn)的同學(xué)，可以下載源文件研究~~ sketch、psd、Figma 格式都有。
文章來源：優(yōu)設(shè) 作者：UX小學(xué)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
還記得2019年4月上映的復(fù)仇者聯(lián)盟4么，漫威電影宇宙的第三階段結(jié)束了，電影很精彩，但最令人震撼的是先導(dǎo)版的電影海報(bào)！就是那個(gè)「五彩斑斕」的黑～
從設(shè)計(jì)上看，海報(bào)的設(shè)計(jì)師是把光運(yùn)用到極限了，通過逆光和環(huán)境塑造出了酷+神秘的視覺感受。光是一切視覺表現(xiàn)的基礎(chǔ)，是構(gòu)圖和傳遞調(diào)性的關(guān)鍵，也是視覺表現(xiàn)重要的組成部分。所以今天就和大家聊聊啥樣的光是一個(gè)牛X的光以及如何塑造一個(gè)合格的光影？
常見形式1-聚光
△ 圖片來源：小米米家臺(tái)燈1S
聚光是最常見光，也是在設(shè)計(jì)中用到最多的光，通常在塑造一個(gè)物體的時(shí)候就會(huì)用的到。
因?yàn)榫酃獾脑?，?chǎng)景更像個(gè)舞臺(tái)，凸顯「主角」的存在。具體的原理可以根據(jù)下圖去理解。
常見形式2-自然光
自然光其實(shí)就是陽光，理論上講其實(shí)光源是太陽也是聚光，但由于光源太過于龐大，無法真正的聚焦，所以就把這種光當(dāng)成一種泛光源就好。在產(chǎn)品設(shè)計(jì)中也會(huì)經(jīng)常看到類似的光源出現(xiàn)，比如行為召喚按鈕：
因?yàn)椴恍枰獜?qiáng)有力的表現(xiàn)和氛圍的營造，所以通常產(chǎn)品設(shè)計(jì)中更需要自然光來作為核心光源，通過泛光源去統(tǒng)一控制產(chǎn)品的光影體系就好（發(fā)布的 Mac OS – big Sur 的整體光源同樣是自然光，下文會(huì)講到）。
常見形式3-逆光
坦誠的講逆光也是聚光的一種，只不過由于角度特殊，呈現(xiàn)的視覺效果也非常不一樣，所以就單獨(dú)把逆光拿出來說一說。當(dāng)畫面需要逆光來營造氛圍的時(shí)候，只需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個(gè)處于逆光的物體了。
小米是典型的逆光氛圍營造高手，但萬變不離其宗，依舊可以從海報(bào)里看到相同的方法。
△ 圖片來源：小米傳播物料
通常現(xiàn)實(shí)中的光源并非那么理想，光線的復(fù)雜超出肉眼所見。所以我們?cè)诶L制的過程需要注意到，可以適當(dāng)?shù)某橄?。舉個(gè)例子，自然光是普照的，所以我們抽象為四個(gè)小光源平均分布，依次打到物體上：
在他們疊加的部分可以清晰的看到，1是最重的，2其次，3再次。按照這個(gè)辦法就可以獲得光影的層級(jí)關(guān)系，在繪制輕擬態(tài)的圖標(biāo)或者運(yùn)營活動(dòng)中更加細(xì)膩。
△ 圖片來源：09UI設(shè)計(jì)工作室-陌陌直播禮物設(shè)計(jì)
所有的光影其實(shí)都是幫助主體塑造體積感，一個(gè)合格的立體圖形必須具備：高光/過度色/明暗交界線和反光這四個(gè)基本屬性。
然后需要一點(diǎn)超現(xiàn)實(shí)主義的手法，把太陽光過濾下，從「赤橙黃綠青藍(lán)紫」的色調(diào)里提取跟主體和諧的顏色（通常是補(bǔ)色），營造出介于真實(shí)與玄幻之間的美妙效果hiahia～
然后再在投影上加一點(diǎn)點(diǎn)色彩傾向，一個(gè)完美的黑八就出現(xiàn)啦～按照這種方法，你可以試著去嘗試更多的物體/場(chǎng)景。（下圖是筆者作品「插著紅旗的地球」hiahia）
影響主體的除了光影之外就是材質(zhì)了，近年來的三大巨頭apple/Microsoft/Google的設(shè)計(jì)都在材質(zhì)上下足了功夫，蘋果的毛玻璃，微軟的亞克力和谷歌的「紙」。
從趨勢(shì)上看，材質(zhì)的引入對(duì)產(chǎn)品中拉開層級(jí)關(guān)系上有巨大意義，以往的設(shè)計(jì)僅僅是通過光影和焦距來拉開關(guān)系，這兩個(gè)維度在少量的疊加界面中還能有效果，但到了復(fù)雜的多窗口互壓互疊里就不是那么奏效了，所以鐵子們要善于運(yùn)用材質(zhì)區(qū)分產(chǎn)品顯示的優(yōu)先級(jí)。
△ 圖片來源：Eric Hoffman – Big Sur Mac Icons
△ 圖片來源：JIAJIE – WeSing Live gift
圖標(biāo)好壞除了造型之外最重要的就是質(zhì)感了，通常圖標(biāo)也就是4種形式（如下圖），類似蘋果的系統(tǒng)圖標(biāo)和抖音直播間禮物的圖標(biāo)都是最后一種形式。
但如果僅僅是這樣就太水了，既然都說了是干貨預(yù)警，那就要拿出哥們看家的本領(lǐng)～此圖是大家關(guān)注公號(hào)后就會(huì)收到的推圖，主體就是一個(gè)POI的圖標(biāo)加上微信的對(duì)話框和代表干貨的小星星營造出的氛圍。
刨析下這個(gè)圖，三個(gè)發(fā)光體和底下的投影，通過上文的講解依次繪制完成～
之后就到了amazing的時(shí)刻了，打開photoshop找到「濾鏡-模糊畫廊-場(chǎng)景模糊」設(shè)置幾個(gè)key-point，調(diào)試模糊值和透明度/亮度，最終完成對(duì)光影的塑造。
空氣中的灰塵相信大家都不陌生，這種情況多數(shù)是一束光影從窗戶里射入后，在光的折射下把平時(shí)看不到的灰塵統(tǒng)統(tǒng)照了個(gè)遍。
如果你是mac用戶一定熟知keynote里的動(dòng)畫效果「轟然墜落」，這個(gè)效果是在模擬物體振動(dòng)后彈開周圍灰塵，非常震撼。在PPT的設(shè)計(jì)中你也可以同樣借助光和霧來營造你想要的效果，下圖是我在做工作總結(jié)的時(shí)候?yàn)榱送癸@Q4工作采用的辦法。
光影輕擬物在產(chǎn)品設(shè)計(jì)中的應(yīng)用面還是很廣的，比如：圖標(biāo)、數(shù)據(jù)可視化、插圖等等。而在大量扁平設(shè)計(jì)時(shí)代適量使用會(huì)顯得很出彩，當(dāng)然再好的教程也比不上大家多動(dòng)手試試練練，所以鐵汁們行動(dòng)起來咯~
文章來源：優(yōu)設(shè) 作者：Nana的設(shè)計(jì)錦囊
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
一套 UI 界面當(dāng)中，核心的 APP 圖標(biāo)是用戶每天都要接觸、經(jīng)常使用的視覺組件和交互對(duì)象。設(shè)計(jì)圖標(biāo)的時(shí)候，要用到大家最熟悉的元素才能貼合用戶認(rèn)知，要醒目、統(tǒng)一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來自著名的 Tubik Studio 團(tuán)隊(duì)，他們?yōu)槿A為旗下的 EMUI 10 系統(tǒng)設(shè)計(jì)了核心的圖標(biāo)系統(tǒng)，來看看他們的設(shè)計(jì)過程吧。
我們總不會(huì)低估一個(gè)操作系統(tǒng)基礎(chǔ)圖標(biāo)，對(duì)于產(chǎn)品的可用性和合意性的影響?；A(chǔ)圖標(biāo)雖然小巧，但是對(duì)于整個(gè)操作系統(tǒng)而言，總是極具影響力的，因?yàn)樗麄兪怯脩艚缑娴暮诵脑?，幫助用戶快速直觀地在系統(tǒng)中定位、瀏覽、導(dǎo)航。但是，對(duì)于設(shè)計(jì)師而言，圖標(biāo)的設(shè)計(jì)始終是挑戰(zhàn)，它看起來最為簡(jiǎn)單，但實(shí)則為最為艱難的工作。
圖標(biāo)需要，讓人一目了然，但是也要具備良好的可識(shí)別性，在傳統(tǒng)和創(chuàng)新之間達(dá)到平衡。這一次，Tubik Studio 設(shè)計(jì)團(tuán)隊(duì)將要給華為的 EMUI 10 來設(shè)計(jì)圖標(biāo)，而這篇文章將會(huì)為你揭示背后的設(shè)計(jì)過程。
這次的項(xiàng)目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來負(fù)責(zé)。這次的設(shè)計(jì)項(xiàng)目從最初的探索構(gòu)思入手，逐漸開始繪制草圖，探索樣式，一直到最后打磨，完成設(shè)計(jì)。
為華為 EMUI 10 系統(tǒng)的用戶界面設(shè)計(jì)基礎(chǔ)的圖標(biāo)
我們?cè)?2019 年夏季，收到了來自華為的邀約，這次的項(xiàng)目要重新設(shè)計(jì) EMUI 這套基于 Android 系統(tǒng)的用戶界面基礎(chǔ)圖標(biāo)，這套圖標(biāo)會(huì)用來適配華為旗下的旗艦手機(jī)，這些圖標(biāo)將會(huì)隨著新版的系統(tǒng)部署到這些手機(jī)產(chǎn)品當(dāng)中。我們的任務(wù)，是創(chuàng)建總計(jì) 54 款符合當(dāng)下潮流趨勢(shì)的圖標(biāo)，這些圖標(biāo)要能夠貼合品牌和已有用戶的偏好，并且能夠吸引新的用戶。
這個(gè)圖標(biāo)設(shè)計(jì)項(xiàng)目如今已經(jīng)在當(dāng)下的華為旗下手機(jī)產(chǎn)品中應(yīng)用且部署好了，最早使用這套圖標(biāo)的智能手機(jī)型號(hào)為 Mate 30 ，緊接其后的是 P40。
在整個(gè)操作系統(tǒng)中，這些圖標(biāo)是始終位于用戶視野以內(nèi)、最基礎(chǔ)的最核心的交互元素，通常用戶每天都會(huì)同這些核心的基礎(chǔ) APP 進(jìn)行交互，有時(shí)候一天多達(dá)幾十次，因此它們應(yīng)當(dāng)具備良好的功能性，還應(yīng)該足夠美觀，給用戶帶來滿足感。同時(shí)，這套圖標(biāo)的設(shè)計(jì)，也應(yīng)當(dāng)足夠統(tǒng)一，以協(xié)調(diào)的體驗(yàn)切入到整個(gè) EMUI 的設(shè)計(jì)系統(tǒng)當(dāng)中，貼合整體的樣式特征。
所以，我們使用了一整套圖標(biāo)網(wǎng)格系統(tǒng)，應(yīng)對(duì)不同需求，在設(shè)計(jì)的過程中，這套網(wǎng)格有助于確保所有圖標(biāo)外部尺寸的一致性，也保證了內(nèi)部元素的統(tǒng)一性。
為了發(fā)掘全新的視角，我們決定從傳統(tǒng)的手繪圖標(biāo)開始，尋找重新塑造圖標(biāo)設(shè)計(jì)的方法。這些圖標(biāo)所涉及到的元素，早已為全球數(shù)百萬用戶所熟知，要重新設(shè)計(jì)圖標(biāo)外觀，并且還要成套且統(tǒng)一，這本身就是一個(gè)巨大的挑戰(zhàn)。
比如「電話」圖標(biāo)所對(duì)應(yīng)的聽筒元素、「信息」圖標(biāo)所對(duì)應(yīng)的氣泡對(duì)話框這樣的元素，是不可能完全拋棄重新創(chuàng)造的，所以我們的真正的切入點(diǎn)是在形態(tài)和色彩上尋求解決方案。
越是簡(jiǎn)單的東西，重塑起來就越難。
在實(shí)際的設(shè)計(jì)過程中，我們嘗試了數(shù)以百計(jì)的造型變體，從完全放飛、非常規(guī)的的外部造型，到極其常規(guī)，大家熟知的造型解決方案，我們都逐一試過。而在色彩上的嘗試相對(duì)會(huì)顯得更加具有實(shí)驗(yàn)性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來進(jìn)行混搭。
當(dāng)然，我們很清楚，這樣的實(shí)驗(yàn)性的工作是探索過程中的一小步，但是它是必須的，是創(chuàng)造新設(shè)計(jì)的種子，是尋求正確答案的必經(jīng)之路。
在設(shè)計(jì)過程在，有一件有趣的事情發(fā)生在設(shè)計(jì)「相機(jī)」圖標(biāo)的過程中。我們嘗試過很多不同的圖標(biāo)造型，不同的元素，不同的樣式，但是其中始終有一個(gè)細(xì)節(jié)是不變的，那就是右上角的小紅點(diǎn)。這是為了暗示用戶，華為的攝像頭模組來自徠卡，這個(gè)紅色的小點(diǎn)就是向其致敬的標(biāo)識(shí)。
而下面的概念設(shè)計(jì)，則是強(qiáng)化了圖標(biāo)之間的幾何輪廓的差異，從而提升圖標(biāo)在智能手機(jī)屏幕上的對(duì)比度和識(shí)別度。
下一步，我們基于幾何圖形外觀差異性，設(shè)計(jì)了多種造型不同但同樣優(yōu)雅的圖標(biāo)。在基于這種風(fēng)格概念進(jìn)行延伸的過程中，我們會(huì)優(yōu)先考慮圓形的元素。而「天氣」圖標(biāo)明顯既不適合圓形也不適合方形來呈現(xiàn)，所以我們使用的是云和太陽兩種元素的組合?！稿X包」圖標(biāo)使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對(duì)自由的，但是所有的圖標(biāo)都是遵循圖標(biāo)網(wǎng)格，并且在視覺權(quán)重上盡可能統(tǒng)一。
在色彩和樣式上，我們則更加傾向于漸變。沒有色彩漸變，純扁平的圖標(biāo)顯得過于幼稚和「古早」，沒有足夠的品質(zhì)感，所以，我們?cè)谛碌膱D標(biāo)設(shè)計(jì)上，開始加入漸變色彩，提升質(zhì)感。
不過，在最終版本當(dāng)中，我們還是保留了圖標(biāo)外部的圓角矩形的外輪廓，然后將圖標(biāo)元素的內(nèi)徑進(jìn)行了適當(dāng)?shù)乜s減，漸變和核心的簡(jiǎn)約幾何特征依然是整套設(shè)計(jì)的最高優(yōu)先級(jí)。
這套設(shè)計(jì)方案展現(xiàn)了在整套 UI 界面中，圖標(biāo)這個(gè)小元素的設(shè)計(jì)上所需要投入的精力和潛在的難度。想要圖標(biāo)足夠協(xié)調(diào)、美觀、易用還要貼合品牌特征、還要區(qū)別于以往，是一件相當(dāng)不容易的事情。
細(xì)節(jié)里藏著魔鬼，任何細(xì)小的元素、線條輪廓、色彩的變化都可能會(huì)在屏幕上放大、被感知到。
文章來源：優(yōu)設(shè) 作者：Tubik Studio藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
大家平常都習(xí)慣去哪些免費(fèi)圖庫網(wǎng)站找圖呢？雖然有一些老牌、圖片數(shù)量充足的圖庫，像是 Unsplash、Pixabay、Pexels，但后來經(jīng)過人工智能和大數(shù)據(jù)學(xué)習(xí)的搜尋工具更深得我心，也能通過算法將質(zhì)量較低、不適合使用的圖庫圖片先排除掉，大幅節(jié)省搜尋時(shí)間。如果在尋找圖片素材時(shí)想盡量避免使用和其他人重復(fù)的內(nèi)容，試試看由攝影師親自拍攝的小型圖庫或許是個(gè)不錯(cuò)的方法。
往期回顧：
本文要介紹的「DesignersPics」是一個(gè)持續(xù)更新、每個(gè)月都會(huì)加入新相片的圖庫，由攝影師 Jeshu John 親自拍攝修圖，收錄各種類型的相片，包括建筑、商業(yè)活動(dòng)、概念、美食和飲料、大自然、人物、科技等等，照片數(shù)量不多，但有一定的獨(dú)特性。
DesignersPics 的相片都具有非常高的分辨率和畫質(zhì)，可自由下載用于個(gè)人或商業(yè)用途，例如網(wǎng)站、投影片、包裝、標(biāo)簽、HTML/PSD 模版、T-Shirts、廣告橫幅、商店或辦公室裝飾等等，無需標(biāo)示出處來源。
網(wǎng)站鏈接：http://www.designerspics.com/
使用教學(xué)
開啟 DesignersPics 從右上角的「Categories」選擇要瀏覽的相片分類，或是直接從首頁以日期方式瀏覽，網(wǎng)站亦提供搜尋功能，不過圖庫本身相片量不多，瀏覽上不會(huì)耗費(fèi)太多時(shí)間。
每張相片會(huì)有預(yù)覽圖、標(biāo)題和免費(fèi)下載的按鈕。
進(jìn)入圖片頁面，還能看到圖片尺寸、大小等等信息，點(diǎn)選「Download」就能下載取得 .jpg 格式的圖片文件。雖然 DesignersPics 沒有硬性規(guī)定必須標(biāo)示作者來源，但如果你喜歡可以協(xié)助推廣。
值得一試的三個(gè)理由：
文章來源：優(yōu)設(shè) 作者：Pseric
2020潘通流行色
一覺醒來，2020 年潘通年度色就這么發(fā)布了。
這款被命名為為「經(jīng)典藍(lán)」（Classic Blue）的色彩沉穩(wěn)耐看，雋永優(yōu)雅，按照潘通官方的說法，「經(jīng)典藍(lán)」仿佛暮色四合時(shí)的天空，寧神靜心，讓人駐足?！附?jīng)典藍(lán)」是一種穩(wěn)固可靠的色彩，給人確信感，撫慰著每一個(gè)期待穩(wěn)定者的心靈。
為什么會(huì)選擇這樣一種藍(lán)色，潘通色彩研究所的執(zhí)行董事 Leatrice Eiseman 在潘通官網(wǎng)上，予以詳細(xì)的解釋。
「我們生活在一個(gè)亟需信念和信任的時(shí)代。潘通 19-4052 經(jīng)典藍(lán) ，這種色彩正是自信和恒久的外化體現(xiàn)，這種堅(jiān)實(shí)可靠的藍(lán)色調(diào)，更能與人產(chǎn)生深層的共鳴，令人心安。一望無際的藍(lán)色能夠喚起人類對(duì)于廣袤無垠夜空的無限遐想，經(jīng)典藍(lán)鼓勵(lì)著我們透過顯而易見的事實(shí)，拓展思維，放飛想象。
經(jīng)典藍(lán)敦促著我們更加深入地思考，開闊視野，進(jìn)行更加深入的交流?！?
——Leatrice Eiseman 潘通色彩研究所執(zhí)行董事
從色彩心理學(xué)的角度上來看，藍(lán)色色相本身有著信任、信念的含義，也是的色相。在此之前，潘通曾經(jīng)多次選擇藍(lán)色作為年度色， 2000 年的時(shí)候選擇天藍(lán)色（Cerulean），在 2005 年的時(shí)候則選擇了藍(lán)綠色（Blue Turquoise），2008 年的年度色叫鳶尾藍(lán)（Blue Iris），2016 年的年度色則是靜謐藍(lán)（Serenity）。
相比于這4種藍(lán)色，「經(jīng)典藍(lán)」更為沉靜穩(wěn)重，沒有一點(diǎn)攻擊性，也不顯得沉重，輕松而易于互動(dòng)。
「經(jīng)典藍(lán)」無疑是一個(gè)略顯保守，但是非常貼合當(dāng)下語境的色彩。它充滿了確信感，讓人覺得安全，屏蔽了焦慮。同 2019 年充滿前進(jìn)感的「活力珊瑚橙」相比，「經(jīng)典藍(lán)」更加內(nèi)斂和篤定，悄無聲息地增加每一個(gè)的信心。
除了發(fā)布這一年度色彩之外，潘通色彩研究所還專門制定了5套配色方案，這些配色方案應(yīng)該會(huì)在接下來的 2020 年，得到更加廣泛的應(yīng)用。
沉思
這是一套舒緩的配色方案，涼爽的藍(lán)色調(diào)和同樣柔和的暖色組合到一起，給人以沉靜的感覺。
呼吸
這套名為呼吸的配色方案當(dāng)中，加入了更為經(jīng)典的黑白色，選擇了對(duì)比更加強(qiáng)烈、更加富有活力的搭配方式。這樣的色彩搭配更容易喚起觀者的幸福感，讓你的設(shè)計(jì)更加具有田園牧歌的氣息。
沙漠暮色
「經(jīng)典藍(lán)」的靈感來源之一就是夜幕降臨時(shí)的天空。而這套名為沙漠暮色的配色方案，就與此相關(guān)。充滿金屬質(zhì)感的潘通色更能夠凸顯「沙漠」的閃亮質(zhì)感，而恰為對(duì)比色的「經(jīng)典藍(lán)」讓這套配色方案優(yōu)雅無比。
異域風(fēng)情
這套配色方案比起之前的配色更加豐富，更顯混搭，仿佛加入了天然的調(diào)味料。這種健康而自我的色彩搭配方式，讓人仿佛身在異域，不同于此地的文化，迥異與此時(shí)的感覺，獨(dú)特卻令人著迷。
非傳統(tǒng)
打破常規(guī)的桎梏，選擇異乎尋常的色彩搭配，而足夠傳統(tǒng)的「經(jīng)典藍(lán)」恰恰構(gòu)成了這種搭配方式當(dāng)中，作為基礎(chǔ)的底色。這套配色方案指向時(shí)尚，突破規(guī)則，如同小品，有趣而俏皮。
為了更加方便線上的設(shè)計(jì)師來使用這些配色方案，優(yōu)設(shè)的小編從官方提供的這些配色方案當(dāng)中，精心挑選了 9 套適合進(jìn)行數(shù)字設(shè)計(jì)的配色方案，并且標(biāo)注上了相應(yīng)的 HEX 值便于精準(zhǔn)取色，請(qǐng)盡情取用：
轉(zhuǎn)自：站酷——hicatherine86
Xiao素材 ｜MapBox應(yīng)用
本期精選 / MapBox應(yīng)用教程，讓你的底圖超乎預(yù)料的炫酷
今天給大家?guī)盱趴?span style="font-weight:700;border:0px;margin:0px;padding:0px;">MapBox的具體應(yīng)用
相信大家在繪制平面類分析圖時(shí)
都遇到過地圖獲取的問題
在此之前
我們也提供給了其他的類型的方式來繪制分析底圖
1. 其他方式
百度個(gè)性地圖
通常地圖形式如下
喜歡用這種類型地圖的小伙伴
網(wǎng)址接好咯
http://developer.baidu.com/map/custom/
文末素材有百度個(gè)性地圖代碼
谷歌個(gè)性地圖
老規(guī)矩放一波樣式給大家看一看
但是這些
都不是我們今天能的重點(diǎn)
2. MapBox效果
因?yàn)檎嬉f到可操控性可調(diào)整性
非MapBox莫屬
先來看看官方效果
是不是已經(jīng)超級(jí)酷炫好看了
那看到這里你就以為完了嗎
NO NO NO NO NO
再來看我們根據(jù)模板花幾分鐘改的底圖
看到這的第一眼
是不是覺得這才是
自己想要的分析底圖
誤區(qū)
想想平常我們自己繪制的底圖一般像這樣
純苦力類
怎么樣
是不是想立即Get一波呢
別急，來看視頻學(xué)習(xí)一下
大致分為四個(gè)板塊
3. 四大板塊
第一個(gè)板塊
基本步驟
首頁—Get Started—選擇合適的風(fēng)格
（建議開啟網(wǎng)頁翻譯哦）
第二個(gè)板塊
怎樣來操作
右鍵旋轉(zhuǎn)視圖
中間縮放視圖
左鍵平移視圖
右側(cè)箭頭菜單—還原視圖—
Reset Pith&重設(shè)正北方向 Reset North
第三個(gè)板塊
這一個(gè)板塊相對(duì)復(fù)雜一些
同學(xué)可以看著視頻配著幕布食用
左側(cè)為參數(shù)調(diào)整欄
直接點(diǎn)擊地圖元素的相應(yīng)位置
即可修改相應(yīng)參數(shù)
第四個(gè)板塊
添加圖層和修改數(shù)據(jù)
Add Layer/Select Data里面內(nèi)容含
數(shù)據(jù)資源—類型—綻放級(jí)別Zoom—過濾器
具體怎么操作一定要看視頻哦
如果覺得觀看視頻還是不太清楚的小伙伴
不要慌張
作者還貼心的為大家準(zhǔn)備了
MapBox的知識(shí)結(jié)構(gòu)圖
今天就和大家分享到這里了
轉(zhuǎn)載自：搜狐
作者：
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
作者通過以進(jìn)度條的設(shè)計(jì)深入淺出的講解關(guān)于FUI的設(shè)計(jì)思路。雖然FUI設(shè)計(jì)看起來很復(fù)雜，只要找準(zhǔn)規(guī)律，從一些作品中總結(jié)分析細(xì)節(jié)，再運(yùn)用到我們的設(shè)計(jì)中。想要了解的小伙伴可以嘗試一下。
前言
看到上期小伙伴想了解一下 FUI 的設(shè)計(jì)教程，所以這次再次和大家聊一下關(guān)于 FUI 的設(shè)計(jì)風(fēng)格，我們以“進(jìn)度條”的設(shè)計(jì)教程為例，深入淺出的聊一下關(guān)于 FUI 的設(shè)計(jì)思路，因?yàn)橹饕O(shè)計(jì)思路的延展，所以不會(huì)出現(xiàn)具體的數(shù)據(jù)參數(shù)，小伙伴們要諒解啊。
目錄
1.風(fēng)格介紹
2.設(shè)計(jì)思路
3.總結(jié)
1.風(fēng)格介紹
關(guān)于 FUI 的定義，閱讀過我上一篇文章的小伙伴可能對(duì) FUI 的定義有了一個(gè)較為清晰的定義，即 FUI 是：虛構(gòu)的、未來的、幻想的用戶界面。
接下來我會(huì)向大家簡(jiǎn)單介紹一下 FUI 主要的兩大設(shè)計(jì)風(fēng)格：軍事風(fēng)格和機(jī)甲風(fēng)格（也可以叫做機(jī)械風(fēng)格）。
1.軍事風(fēng)格
軍事風(fēng)格的特點(diǎn)在于：“直接明了”。因?yàn)樵跉埧岬膽?zhàn)爭(zhēng)中時(shí)間就是生命，士兵必須保證“快速、準(zhǔn)確、直接”才能保證戰(zhàn)斗的勝利，所以會(huì)盡量避免與操作業(yè)務(wù)無關(guān)的。你也可以理解為當(dāng)下最前沿的的設(shè)計(jì)理念“l(fā)ess is more?！崩缦聢D，在界面設(shè)計(jì)中幾乎都是利用簡(jiǎn)單的幾何設(shè)計(jì)語言完成。
2.機(jī)甲風(fēng)格
機(jī)甲風(fēng)格相對(duì)于軍事風(fēng)格的最大特點(diǎn)就是：“具有一定的裝飾圖形元素，或多或少?！睓C(jī)甲風(fēng)格最大的特點(diǎn)便是具有機(jī)械或者機(jī)甲風(fēng)格的裝飾元素，其中多為異形元素。其靈感來源于工業(yè)設(shè)計(jì)，從機(jī)械和機(jī)甲的工業(yè)設(shè)計(jì)語言中提取圖形元素，在運(yùn)用到界面設(shè)計(jì)上。如下圖，異形的機(jī)甲風(fēng)格讓機(jī)器人的頭部設(shè)計(jì)顯得更加統(tǒng)一，如果換成當(dāng)前流行的扁平化設(shè)計(jì)，可能就顯得有點(diǎn)奇怪了。
機(jī)甲風(fēng)格的發(fā)展歸功于科幻題材故事的發(fā)展，為人們打開腦洞，暢想更多的可能性。在設(shè)計(jì)上激發(fā)了 FUI 的誕生，無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機(jī)甲風(fēng)格的界面設(shè)計(jì)。
2.設(shè)計(jì)思路
設(shè)計(jì)樣式 – 軍事風(fēng)格
我們從以上的設(shè)計(jì)風(fēng)格中抓去我們需要的關(guān)鍵詞進(jìn)行示例設(shè)計(jì)，首先我們看軍事風(fēng)格的關(guān)鍵詞是“直接明了、快速、準(zhǔn)確、直接，”我們轉(zhuǎn)換成我們平時(shí)的設(shè)計(jì)語言就是：“極簡(jiǎn)風(fēng)格，”這樣是不是更好理解了。例如圖例中，頁面整體十分統(tǒng)計(jì)，利用簡(jiǎn)潔幾何語言進(jìn)行設(shè)計(jì)。
接下來我們做一個(gè)簡(jiǎn)單的軍事風(fēng)格的進(jìn)度條：第一步，找參考！??！這一步很重要，很多同學(xué)都很容易就忽視這一點(diǎn)，一心一意的閉門造車，絕不借鑒學(xué)習(xí)其它優(yōu)秀作品。這里向大家推薦 HUDS + GUIS 設(shè)計(jì)公司，這里有我們?cè)S多我們耳熟能詳?shù)挠耙曌髌分械?nbsp;FUI 設(shè)計(jì)。
第二步，臨摹，臨摹可以說是學(xué)習(xí)他人技巧的最快方式，從中我們可以學(xué)習(xí)到許多設(shè)計(jì)中的細(xì)節(jié)，日后我們可以運(yùn)用到自己的設(shè)計(jì)當(dāng)中。我借鑒臨摹了下面的進(jìn)度條樣式。
我們可以放入界面當(dāng)中感受一下視覺效果：
設(shè)計(jì)樣式 – 機(jī)甲風(fēng)格
我們?cè)賮磉M(jìn)階一下，設(shè)計(jì)一個(gè)機(jī)甲元素的的進(jìn)度條。
機(jī)甲風(fēng)格看似裝飾圖形復(fù)雜，設(shè)計(jì)難度復(fù)雜，但其實(shí)我們只需要掌握好 – “提煉元素”這項(xiàng)技能就能完美應(yīng)對(duì)機(jī)甲風(fēng)格的設(shè)計(jì)。
我們?cè)倩仡檶?duì)創(chuàng)意設(shè)計(jì)的定義：是把再簡(jiǎn)單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式。這里我們可以理解為將機(jī)甲元素進(jìn)行提煉總結(jié)，延伸到彈框設(shè)計(jì)當(dāng)中。例如下圖，漂亮的小姐姐一秒鐘變機(jī)械美女，就是通過對(duì)機(jī)械元素延展到模特身上。
第一步，照一張你喜歡的不錯(cuò)的參考，這里你可以找成熟的界面設(shè)計(jì)作品，也可以找一張不錯(cuò)的關(guān)于機(jī)甲風(fēng)格的參考，以便于自己進(jìn)行元素提取。這里我們以大家熟悉的高達(dá)為例：
我們從中提取我們需要的圖形，如下圖：
最后我們我們需要仔細(xì)思考將圖形進(jìn)行組合，多嘗試幾次他們的組合方式。這里我對(duì)提取的元素進(jìn)行了二次加工，將圖形一和圖形四進(jìn)行了結(jié)合，打破固有的組合規(guī)律，讓圖形看起來更加生動(dòng)。
最后我們可以放入界面當(dāng)中感受一下視覺效果：
3.總結(jié)
FUI 的設(shè)計(jì)看起來復(fù)雜，難以下手，但其實(shí)也是有規(guī)律可循，我們可以從作品中理性的去分析其中的設(shè)計(jì)細(xì)節(jié)，提煉總結(jié)，最終再落實(shí)到實(shí)際的設(shè)計(jì)作品當(dāng)中。當(dāng)然最好你能先了解一下它的設(shè)計(jì)理念以及發(fā)展，就像 FUI 是“虛構(gòu)的、未來的、幻想的界面設(shè)計(jì)”一樣。
---來自姜正
轉(zhuǎn)載自簡(jiǎn)書
作者：極創(chuàng)設(shè)計(jì)
鏈接：https://www.jianshu.com/p/77665c771153
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn