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