UI圈兒刮起了一股勢頭猛勁的新擬物風（Neumorphism），起因是烏克蘭設計師亞歷山大·普盧托 （Alexander Plyuto） 在 Dribble 平臺發布了一張應用了新擬物風格的UI作品，便引發了圈內的激烈討論，更一直占據著當時的熱點榜首。此風格出現后，也給流行的扁平化設計添加了新的展現形式。
普盧托的《Skeuomorph Mobile Banking》，在Dribble獲得了3000多次喜歡
也有一些非常著名的品牌公司在設計上結合了新擬物風格，像三星召開的Galaxy Unpacked活動、MKBHD的介紹視頻等，效果都很出彩。當趨勢熱潮退去，新擬物風格并沒有像一部分評論者堅持的那樣，“洗牌”式地接管整個設計圈。
三星 Galaxy Unpacked 活動
MKBHD在2020年的簡介中使用了這種風格
復習結束回歸正題，我們看到現今又出現了一種新樣式—Glassmorphism，字面上由玻璃（glass）和擬物化（skeumorphism）組成，叫法頗多：玻璃擬態、玻璃擬物化設計、玻璃擬物風格，其實意思都對，它比新擬物風格更直觀清晰。那么，玻璃擬物風格最具有定義性的特征是什么呢？一起來看：
-透明度，使用背景模糊的磨砂玻璃效果；
-物體漂浮，畫面中有多個漂浮層級；
-鮮艷的色彩，在磨砂玻璃后更突出整體效果；
-淺色邊框，應用在半透明物體上襯托質感。
玻璃擬物風格特征顯著，用戶也能快速確定界面的層次結構和深度。畫面中清晰顯著的則是最迫切想要表達的重點，非常好辨認。
在Drrible的#Glassmorphism#下，大家已經紛紛提交自己的作品了，也讓辭典醬發現了一些它獨有的「魅力」：
-顏色明艷、歡快，視覺上帶來一定的刺激性；
Music Player Apps by Adhiari Subekti
glassmorphism redesign by Frédéric Musso
-icon虛實結合，營造出了一種「小而精」的質感；
MEDIACRAFT ICONS by Ayo Kid
Glassmorphism Iconography by Hemanth Ravi
-邊緣細框，模擬玻璃，帶來微妙的「高級感」。
Procreate app icon redesign by Zhenia ievgen
Coffee Shop App by Saud Ali
說到由來，那么蘋果帶來的影響力毋庸置疑。蘋果早期的設計系統為擬物風格，從2013年推出的iOS 7開始，系統風格進行了全新嘗試，背景模糊也是從那時起進入大眾視線，雖然人們褒貶不一，但使用過的用戶還是很買賬的。
與蘋果互為對手的微軟也推出了這種類似于毛玻璃質感的Vista系統，但距離真正的玻璃擬物還有一段路程要走。
最新的macOS Big Sur 和 iOS 14系統都已經使用了偏向玻璃擬物化的半透明效果。
通知欄的彈出變成了一件有趣的事，你可以清楚地看到新面板下的圖標是如何彈出和消失的。
微軟的Fluent設計系統也很重視這種效果，他們稱此特殊元素稱為「亞克力」，并將其作為設計系統中不可分割的一部分。
Microsoft Fluent設計系統
實現玻璃擬物效果需要注意的是，與任何基于卡片的布局一樣——物體離我們越近，它吸引的光就越多，也就意味著它會變更加透明，反之亦然。
它依靠3個基礎元素來實現，分別是陰影、透明度和背景模糊。還可以使用一個或多個透明層，假設在一個顏色相對復雜的彩色背景中應用，那么至少加兩個半的透明層級，要展示的文字或圖標的可見性才會最大最突出。
不要設置對象的透明度，而是調整填充透明度。下圖示例中，兩種不透明度的數值調整，得到了完全不同的視覺感受。
背景在玻璃擬物效果中至關重要，太單調會導致完全不出效果。這可能就是Apple選擇彩色背景作為MacOS Big Sur默認壁紙的原因，背景圖片的色調差異大，玻璃擬物的效果越強烈。
別小看了這1px的細微邊框，它模擬了玻璃的邊緣，將其單獨設置透明度，就能讓形狀從背景中脫穎而出。
半透明邊框圖形（左）vs 無邊框圖像（右）
建立一個良性的層次結構同樣重要，和新擬物類似，它們都不是Material Design被廣大用戶熟知與接受的呈現形式，裝飾味道會相對濃郁。所以設計師在應用前，最好能確?！睾透鲗蛹壴跊]有花哨背景加持下，一樣能被用戶以及視力障礙人群輕松識別理解。
下圖就是一個很好的例子，卡片具有清晰的結構，即使完全去除玻璃背景。它也能正常使用。
作為人類，我們很容易對各種趨勢感到厭倦，所以每隔一段時間就會迸發出新的靈感與創意。但作為設計師，我們需要探索所有可能創新產品的方式。在當下，玻璃擬物的應用的確會使產品看起來更好，對用戶更具吸引力。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
01. 在工作中遇到的狀況
設計師常常會遇到這樣的問題，在新產品發布之前，都會做一遍線上的UI視覺校驗，在這個過程中，前端開發工程師所寫的界面總會發生圖片變形，文字字號不對，元素與元素之間不對齊的事情發生。
設計師給前端開發工程師標記了頁面中錯誤的地方，但是多數前端開發工程師一聽那么多頭都大了，在緊張的上線日期限制下更有甚者不予理睬直接上線，用戶吐槽設計不嚴謹，導致設計背鍋。
就好比下面這個例子，為什么老板會覺得不好呢？其實是產品在用戶體驗的本能層次出現的不好的體驗。
02. 好產品具備的特征
互聯網產品可以利用產品五要素把產品劃分為5個層次。全球的認知心理學家（美）諾曼在《情感化設計》這本書中講產品本能水平的設計——本能層；行為水平的設計——行為層；反思水平的設計——反思層。
互聯網產品可以用諾曼教授提出的感情感化設計的3個層次聯系起來，并把這些情感分為5個緯度進行考察，就可以得到下面這張知識網絡圖。
從上面這張圖我們可以看出用戶評判一個產品好壞的標準還是來自產品的表現層、框架層、結構層中的直觀體驗也就本能層次和行為層次的感受，如果產品的吸引度、完成度、滿意度、忠誠度、推薦度的數據很高也就證明產品很好，如果數據表現不好那可以判斷產品還是有需要提升的地方。
回到第一張圖片，老板覺得有問題的原因就在于產品在本能層次的不合格，那重點來了有什么設計方法可以避免本能層出現問題的情況嗎？答案是毋庸置疑的，那就是“設計走查?！?
03. 設計走查的意義
一名專業的B端設計師，并不是說你把設計稿做得很完美，把標注和切圖完整地交給開發小哥哥之后就完事了，其實在這個階段設計只是完成設計工作中產出效果圖的工作，并沒有進行最后驗收的環節，如果開發還原出來的產品跟設計稿差距較大的話，設計其實也是要負很大責任的。
就好比工廠的流水線中一臺電腦的生產，把電腦從工廠搬到運輸車上也算是電腦生產完畢，但是必須要送到客戶手里，客戶簽字確認，工廠才能算是電腦賣出去了，由此可見設計走查是保證用戶有高質量體驗的不可缺少的一個環節。
設計走查的意義在于3點：
1、確保產品的設計細節的還原度合格，從而保證產品的視覺效果和交互體驗能滿足用戶需求。
2、是衡量設計師是否是一個合格設計師的重要指標。
3、通過細致入微的專業設計素質贏得公司團隊內部設計話語權的提升。
既然設計走查這么重要為什么大家還會忽視呢？其實大家對設計走查的看法有一個誤區，如果你想成為一名專業的B端設計師，一定要改變以上的錯誤觀念，擺正一個正確的設計觀念。
設計師在公司代表著視覺上的最高水準，設計稿則是設計師專業能力的體現，如果一個設計師的能力是100分，設計稿的分值90分，開發實現后的產品分值為50分，在沒有進行設計校驗的情況下，這時候將產品發布出去，用戶或者老板只知道該公司的產品設計只有50分，而不會知道背后設計師最高的水準是100分。
慢慢地設計師就會在開發團隊中做設計變得很被動，越被動就會越沒有話語權，所以對一名專業的B端設計師來說，除了擁有很強大的效果圖設計能力之外，還需要有保證效果圖落地能力。
01. 設計走查的種類
設計走查是一種設計層面找尋問題的方法，多數應用在找尋產品問題或者是對項目開發過程中的測試環節。具體的方式歸類為3種：
1）體驗設計走查：是指人機交互之間的細節體驗、比如非力度測試、滿意度測試?？捎眯詼y試的調查這些方法都是體驗走查的一部分。
2）交互設計走查：是指針對產品場景與場景之間的動態交互效果進行走查。
3）視覺設計走查：是指前端開發出來的靜態頁跟設計師出的效果進行視覺細節的校對和檢查，確保開發出來的視覺和設計圖保持一致。
02. 制作走查表的三種方法
很多人會納悶了，公司要是沒有這種走查表，那怎么進行這三種設計走查呢？這里告訴大家我的一個工作辦法，總共分為3個階段“尋找·借鑒”——“思考·定制”——“優化·完善”。
a.尋找·借鑒
當大家有一個知識的概念，如果想更深入了解這個概念就需要在網上找一些關于這個概念的信息，這個過程就是尋找。如果大家沒有做過類似這種設計走查的經驗，那第一時間也是去尋找，尋找設計走差的概念，甚至是做好了的走查表。
可能還會有人問，別的公司和我們公司做的行業不同，那別人公司的走差表我們公司能用嗎？大家可以復用70%左右的，那剩下的30%就需要進入下一個步驟“思考·定制”階段了。
b.思考·定制
當我們完成第一步之后，就需要對自己所處的行業或者產品有一個認知，思考我們的用戶類型是什么，他們的使用場景是什么，他們最需要解決的需求是什么等等問題，然后再根據這些問題定制一系列體驗、交互、設計的問題，那就成為了自己產品定制的一份設計走查表了。
c.優化·完善
任何工作為了更好地適應當前的工作，都需要持續迭代。假設，在第二階段定制的問題有些微交互動效果的問題，但是這是前年用戶比較在意的，現在很多產品都有了微交互動效了，所以現在、意義就沒有那么大了，我們的設計走查表也要根據互聯網的大環境不斷地進行優化和完善。
03. 產品表現層——視覺校驗
設計走查和設計校驗并沒有大的區分，但是我理解設計走查是一個比較新型的詞，設計走查的范圍要比設計校驗的范圍大一些。
有些公司會把設計走查應用于改版之前，當作找尋產品問題的一種方法，也有一些公司會把設計走查應用于項目做完開發在測試環節做測試的一種方法。比如在啟動產品改版前可以通過“視覺設計基礎自查表”來收集產品目前的視覺體驗問題。
04. 視覺校驗需要審查哪些緯度
設計校驗驗收表可以簡單地理解為是用于審查產品表現層的形狀、色彩、字體、構成、質感、動效這六點問題的記錄的表格。其實這六點也是諾曼教授提出的感情感化設計中本能層次和行為層次審查的六點。
再講如何做之前，大家還是要先了解一下驗收流程中的步驟。
01. 視覺校驗做什么
這里描述兩點，一個是開發階段，另一個是測試階段的流程。
在公司的項目開發階段：是設計師設計完效果圖，進行標注（現在大家都是使用第三方標注軟件比如藍湖、摹客、Sketch Measure 等），在交付開發。
在項目測試階段：一般都是產品經理發起一個項目進入測試階段的通知把設計師、開發、測試、和產品經理都設置為參與者，之后由測試人員進行產品功能邏輯的測試、設計師進行視覺驗收；驗收完成后產品經理驗收測試結果，如有問題找開發進行修改；修改完畢再找測試、設計、產品進行確認，沒問題就封版了，產品經理確認發版日期，如果還有問題就再修改。
02. 視覺校驗的驗收標準
很多剛入行的設計新手，在校驗階段不知道檢驗哪些維度信息，以至于很多視覺元素都需要查看，對于c端來說界面的場景、交互比較簡單還能應付。
但是對于模塊功能復雜、交互場景眾多的B端產品來說每個場景都要查看很耗費精力工作效率也不高。
所以我總結以下幾個高頻出現問題的點供大家參考，大家可以按照以下幾個緯度進行視覺走查，提高自己在工作中的效率。
a.檢查設計稿的可行性
人無完人，再專業的設計師，也不可能100%保證自己的設計方案就是最好的設計方案，在交付設計稿前期設計師應該自我檢查自己的設計稿是否能清晰地傳遞信息，對于一些重要的模塊是否能凸顯出來，對于一些比較復雜的交互場景開發是否能夠實現，市場上眾多的屏幕尺寸，這樣的布局方式是否是最為合理的等這些緯度進行思考做設計，保證設計方案的可行性。
這里我舉一個我真實的案例，起初我接到的需求就是設計一個模塊里面信息排版，如果我采用第一個方案那肯定是不行，因為信息層級區分不夠明顯，第二個方案把數字標簽用顏色進行了區分，但是我又想如果出現文案比較多的場景，對齊方式都是左對齊，那“指標值”的信息就不可能保持左對齊，所以我又出了第四個方案，目前來看第四個方案算是最佳方案。
假設當時我就交付前端開發第一種方案，上線后出現問題，還需要調整到第四種方案，慢慢的前端開發就會質疑設計的專業能力，后續合作也會難以推進了。
b.組件調用是否正確
B端產品的業務復雜，模塊交叉設計數量多，所以在設計b端產品起初都是用原子化的思維搭建一個組件庫。前端是開發階段在樣式庫中寫一個標準的控件樣式，然后在不同的頁面場景中調用公共樣式，原理類似于我們在 Sketch 中搭建 Symbol。我們要從兩個方面看組件是否調用正確。
1）公共組件是否正確
公共組件調用正確，好處就是公共產品的整體視覺風格是一致的，比如頁面的側邊導航，搜索場景、詳情頁場景布局是否一致，在斷網或者報錯的場景中出現提醒條樣式是否一致?？蛇M行交互的按鈕樣式、交互狀態的按鈕是否一致等等。
2）業務組件是否正確
在真實開發場景中，有一些前端開發雖然調用一個樣式，但是在設計規范中一個樣式可能會有多個尺寸，比如這個按鈕，在開發階段避免不了出現樣式雖然是對的，但是尺寸調用錯誤的情況出現，所以要查看一下組件的樣式和尺寸前端開發是否調用正確。
按照這個思路去設計最為重要的就是要檢查開發人員調用的組件庫的規格是否是我們設計稿的規格，以此類推檢查整體的布局、按鈕樣式，報錯樣式。
這里需要描述的內容相對較多，以后有機會我可以再補充一份關于《如何搭B端建組件庫》的文章，咱們詳細聊一聊。
c.空間關系是否一致
空間關系可以簡單地理解為模塊與模塊之間的“間距”關系和組件與組件之間“間距”的關系。
1）模塊與模塊之間——間距
所有模塊（卡片）之間的間距，這里具體指的頁面布局包括橫向間距和縱向間距，大家可以采用4px（或者8px）的倍數進行刪格布局，把刪格布局的基礎規范梳理出來，以這個規范當作標注來審查橫向間距和縱向間距。
2）組件與組件之間——間距
另外一點就是我們在搭建組件階段，組件與組件之間的間距關系是否一致，不要出現不對齊的情況出現。
3）為什么要用統一間距
大家了解空間關系都要看哪些緯度后，我們再來解答一下大家心中的疑惑，為什么要保持間距一致呢？主要原因有以下三點：
對于如何使用間距，我建議大家可以看一看《寫給大家看的設計書》里面關于版式設計四大原則的講解和有關格式塔原理的文章。
d.文案的顯示是否清晰
在UI設計中，我們總避免不了與字體打交道，字體也經常是我們在設計中容易忽視的部分，影響字體的清晰度無非是字體、字號，字重，段間距這幾個參數的設計。
1）字體
字體的實現其實是電腦渲染的一個過程，Mac電腦默認字體是蘋方，Wids電腦默認字體是微軟雅黑。在字體的選擇里面行業里是有標準的規范的，比如ont-family：serif、sans-serif、monospace、cursive和fantasy這五種字體，前端在編寫代碼時候會把這種多個字體名稱保存為“字體的回退機制”來定義，意思就是如果展示的設備（瀏覽器）檢索時沒有第一款字體就依次順延使用下一款字體，這個大家只需要了解就好，在字體選擇中使用頻次最多的還是對數字字體的選擇。
對于數字的字體設計要提前查看是否字體有版權。這里分享一個可以免費查詢字體的網站：
不同的網站對字體排序的方式可能不一樣，有興趣的小伙伴可以用下面的這個方法進行查看。
2）字號/行高
對字體的字號也要進行走查，因為在開發階段在不同的瀏覽器中顯示的字號會有變形的情況出現。
另外考慮各個瀏覽器的兼容問題，PC端建議使用最好的字號是12PT，因為12PT可以保證在現在市面上的瀏覽器中是可以清晰顯示的，如果有特殊場景需要用到12PT以下的字號，需要和開發說明并且標注出來。
3）字重
設計區分文案層級的場景使用頻率最高、視覺效果最好的設計方法就是給字體加粗的字體樣式了。
這里要注意的是初級設計師的眼力可能還沒有達到很高的水平，尤其是最小的字體顯示加粗或者不加粗的效果視覺在電腦那么大的屏幕上感官并不是很明顯，所以最好可以通過從代碼的層面進行核對，具體方式可以看圖：
e.顏色的選擇是否科學
顏色是給用戶呈現面積最大的一個元素，對用戶來說感官層里表現最為明顯的一個元素，所以在校驗中“顏色”是最容易造成落地頁面與設計稿視覺差異的一個因素。
1）色差
因為大家手機屏幕的技術一般是LG屏幕（屏幕的使用時間越長色彩的還原度越低）。
雖然有的時候在查看代碼時候色值設置是正確的，但是也要根據具體的場景進行分析。這里建議大家不要使用具有不透明度的色值（雖然在c端中經常會使用，有不透明度會使顏色比較透亮但是在B端產品中定位是工具，工具就要以效率在第一位，美觀在第二位，所以這個場景的顏色使用盡量以清晰展示為第一準則。）
2）顏色種類
b端產品中，柱狀圖、折線圖的樣式比較多，在設計這類圖標時候盡量避免多種顏色的出現，還是因為B端產品定位的原因，太多的顏色設計勢必會干擾用戶進行判斷。
f.圖標的尺寸是否合理
不管是在C端產品還是B端產品中圖標都是高頻出現的一個元素，圖標本身的意思就是簡化文字信息，通過圖形去高效地傳達文案信息。
對于圖標的設計走查分為兩點：
1）大小
我們在設計圖標時候，會根據不同的場景進行圖標尺寸的規范輸出，但是在真實的開發環境當中，開發在使用我們提供的插件（藍湖）進行icon下載時候，會提供3種icon的尺寸下載，前端開發在使用切圖時候往往會忽視掉圖標的尺寸問題，對于圖標的設計走查，是否圖標使用的尺寸是我們設計使用的規范，所以第一個就要看大小是否能清晰的展示。
2）SVG格式開發
因為PC電腦的屏幕尺寸、分辨率往往是高于移動端的屏幕尺寸、分辨率，圖標的切片做得太小上傳到屏幕上會出現模糊的展示效果，如果圖標不能清晰地展示圖標所呈現的圖形，那就會造成用戶一定的識別障礙，所以一定要保證圖標不要有模糊的情況出現，盡量使用SVG格式圖標切片給到開發。
設計校驗工作不能說難，有耐心有細心的設計師都可以完成的，一次視覺校驗需要1——2天的時間，相對來說比較耗費精力。
換個角度思考，如果我們從項目開發的前期就控制設計走查的工作量，那我們可能會減少了走查的工作量。接下來我們就聊一聊怎么減少設計校驗的工作量。
01. 了解需要視覺校驗的原因
前面我們一直講的是做視覺校驗需要校驗的維度，我相信更多的設計師還是希望把精力放在做設計效果圖階段，畢竟知道從哪些維度做只能單純地提高我們的校驗的效率，想要在開發過程中減少對項目的設計校驗的工作量 ，就需要我們清楚兩個答案，一個是“在開發過程中為啥需要設計走查”和“開發不愿意修改的原因”。
a.誰負責實現樣式
開篇我已經講了設計走查的意義（原因），現在我想從開發流程再聊一聊。
在一個產品開發中，設計師下游需要對接人的人員角色統稱為開發工程師。但是在這類角色中其實也是會細分為三種角色：前端工程師、后端工程師、測試工程師。因為做項目多數情況是多人協作共同完成的工作，前端工程師是實現我們效果圖樣式的主要人員，也是我們主要對接工作內容的對象。
b.前端工程師心里所想
前端工程師的工作內容需要一一查看設計師提供的標注，然后再一一去實現，所以難免不了心里會這樣想：好麻煩，不如我自己按照感覺寫。
在真實的工作中，前端開發按照規范進行項目開發這種思路是對的，但是設計師強硬地要求前端開發工程師，按照規范進行開發是過于“理想化”的一種表現。
所以我們還是要先從自身出發，循循漸進地要求前端工程師按照我們的設計規范進行開發，這就來到我們下一個話題。
02. 如何避免呢
那么接下來我們來聊一聊身為設計師我們要怎么做，才能避免進入過多的設計校驗呢。
a.了解開發實現原理
如果想成為一個高端進階的設計師，我們要給自己增加籌碼，那最為直接增加籌碼的方式就是——站在開發者的角度看待問題，了解開發思維。
國內前端寫樣式的代碼基本上是HTML+CSS，Jacascript，注意這不算是編程，只是一個寫樣式的語言，簡單地理解就是盒子模型（CSS語言）
1）盒子模型
CSS盒子模型又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：
舉一個圖文模塊的例子：圖（1）是設計師輸出的設計稿，圖（2）是開發需要的標注信息（我們實際給到開發的標注）開發需要查看的就是色塊的尺寸和色塊之間的間距。
2）用框架化思維做設計稿
了解完前端制作咱們效果圖的原理后，我們就要用這個盒子模型的概念，像是搭建房子的原理去制作效果圖，所有的組件之間都是有理有據的，那這個專業術語就叫做框架化UI。
前端開發工程師通過一個個盒子填充來將我們的組件元素放入其中，最終形成前端展示的頁面。注意：標準的框架化就像前面的盒子模型是一塊一塊制作的，考慮到開發同學開發階段組件的嵌套邏輯。
3）開發者模式
如果還是不太了解盒子模型具體是什么的同學可以在線上使用下圖的方法自己去查看。
設計師在視覺校驗時使用瀏覽器就可以看到開發寫的盒子，了解盒子也可以方便我們走查時知道問題在哪。具體操作步驟：
b.檢查自己的設計稿
在給前端開發工程師提供設計標注階段需要提前保證自己出的效果圖是有效的設計方案，符合基礎的視覺需求，都能保證模塊設計的可擴展性及規范化，避免定稿后再反復修改設計方案。
比如，當我們設計B端產品中的搜索條件模塊時候，應提前需要考慮，在一行展示3個搜索條件、一行展示4個搜索條件、一行展示6個搜索條件等場景。
我們設計完一個場景的設計稿之后，還要考慮不同屏幕尺寸下這套效果圖的布局是否能滿足產品需求，如果不滿足那設計稿需要調整成什么樣式的設計稿。
03. 做好標注文檔
除了確保設計稿的可行性之外，還要做好設計稿的標準文檔。如果項目是小版本的迭代就只需要進行簡單的描述即可，如果是組件庫升級，那就需要給前端工程師的標注文檔，盡量是詳細的、準確的。
其中包括設計稿、切圖（規范的切圖命名、壓縮好的圖片文件）標注、設計規范以及交互文檔（包含字體標注）。
a.描述到什么程度
那細致描述到什么程度呢？這里我簡單地說幾個點：
·側邊導航欄在正常模式下、縮緊模式下，導航欄的寬度是如何變化的。
·如有圖片信息的上傳的場景，考慮圖片比例是什么，是21:9、16:9、4:3還是1:1。
·如果出現文案超長的場景，不可展示的文案信息用什么樣子展示，是文案后面用省略號展示？還是鼠標滑上去有氣泡彈窗的樣式。
b.圖標命名的規范
隨著業務增多，團隊內對圖標的隨意命名的習慣也開始凸顯出弊端，這種不好的習慣會造成同一類功能的圖標會出現不同樣式尺寸，所以我們在搭建圖標規范時候，就可以把切片的命名規范好。
在圖標規范中，圖標需要有著單獨的后綴，這樣可以讓公用圖標與業務圖標更方便地進行溯源。SVG格式的圖標可以不用寫切片的尺寸，而PNG的圖標我建議寫上切片的尺寸。
有些公司習慣用icon進行英文的格式命名，左側是我整理的比較高頻使用的命名，文章末尾我會分享出來文字格式，供大家使用。
c.圖標的上傳
可以在開發前在與前端開發溝通達成共識、圖標制作完成確認后，將圖標上傳到阿里巴巴圖標庫中，更方便前端調用圖標大小和調整顏色。
如果開發需要自己去找到相關圖標，也可以給予權限讓開發從藍湖上傳圖標（前提是得整理好圖標到藍湖上）。
04. 和前端開發工程師的溝通
雖然很多時候項目在發版本時間、驗收標準，在團隊內部都是有明確的規劃和標準，但是有些問題還需要特別分析、特別對待，這里我就列舉幾點我在項目中幾個比較重要的點。
a.進行設計宣講
設計宣講最大的意義就是加深大家的印象，提前給大家一個心理預估，把一些容易忽略的問題暴露出來，把關鍵核心點和規則講清楚，后面可以減輕設計走查的工作量，開發也輕松一些。
1）用認知對齊，目標一致
如果團隊內部四個角色成員大家的認知都是一致的——提升用戶體驗是我們公共目標。
如果不一致，那就要說服其中一個角色，最好是項目負責人，說明校驗影響發版時間，如果大家都按照規范去完成自己工作內容，可提高效率。確保大家理解一致：設計師要和開發、測試確認視覺表現層的驗收內容、確保內容大家理解一致。
2）做有效的溝通
認真是前提、尊重是法寶。在部分開發團隊中，設計師也不能太過于教條地要求開發還原自己的設計稿，畢竟開發生氣、請假了，那就真的沒有人可以進行代碼的修改了。
所以在開發之前，就要和開發溝通，目前這些界面的效果在技術層面上是否能實現，針對比較復雜的界面場景，實現出來的代價有多少，權衡利弊后再確定是否按照效果圖進行開發。
針對復雜的頁面需要把標注標記得更加詳細，并且明確告知他們，我的刪格在哪里說明，布局規范在哪里說明，在這個交涉過程中設計師就需要尊重他人工作成果，明確自己的需要做的事情，把問題描述清楚就好，不可要求開發同學100%還原設計稿、過多地干預別的開發團隊的開發步驟和內容。
3）不必焦慮
前端開發工程師找我們溝通他們的疑問點時候我們要積極回應他們，并且和他們一起處理問題，比如某些復雜的頁面，避免不了實現效果圖不好的情況出現，這時候不要一口咬定就是開發的原因，先溝通具體原因，然后找出解決辦法。
開發人員在修改代碼的階段，開發人員的效率是有限的，而且大家都是身兼多條業務線，在這種開發的場景中可以在不影響正常發版日期的階段，把不太重要的視覺問題，放到下一個版本中再進行修改。
4）規劃時間節點
在工作項目中也要注意分配自己的精力，可以把重要的界面優先處理，也可以定期跟程序員溝通，跟他一起制定解決方案和時間。如果時間允許的話，也可以慢一點修改，只要改對了就可以，畢竟完成比完美更加重要。
對于設計校驗的工具有一個原則，就是提高設計師在設計走查中的工作效率。對于用什么工具并沒有限制，只要順手就好，工具的最大作用就是提升工作效率，只要你覺得能提升你工作效率，你喜歡用啥就用啥。
我把我使用的工具主要分為兩類工具，第一類是發現開發問題和效果圖的不符合的工具；第二類是針對問題高效記錄、追蹤問題的工具。
01. 四款發現問題的工具
我在工作中發現很多時候開發不愿意檢查自己代碼樣式的一個原因就是不知道以下四種工具，在很多公司里面前端開發工程師都是多條業務線并行開發的局面，沒有更多的工作時間自己做設計審查。這時候我們可以提供工具給予開發，幫助他們提高工作效率。
設計師同學也可以借助以下4款工具進行校驗：
前三款都是Google Chrome瀏覽器的具體操作步驟可以看下面的圖片，如果還有不懂的地方可以在評論區給我留言，我看到后會為大家一一解答。
至于“他山石”這款軟件大家有興趣的話可以在網上直接打名稱就會出來軟件信息，大家下載后自行體驗吧。
02. 記錄追蹤問題的工具
介紹完發現問題的工具后，咱們再聊一聊記錄追蹤問題的工具，有的人會問了，你前面講了視覺校驗都要看哪里，又推薦了視覺校驗的工具，我直接把需要修改的地方告訴前端開發工程師不就可以了嗎？為什么還要知道這個記錄追蹤問題的工具呢？
a.進為什么要使用記錄追蹤問題的工具
在一些設計團隊稍微成熟的公司里面由于項目的規模比較大，涉獵的模塊多，參與的人員相對也多。
面對這種體量的項目如果不進行問題的記錄的話，這周做項目里面的1號模塊，下周做項目里面的2號模塊，過了幾周再對項目里面的1號模塊進行修改，然后自己就會發現1號模塊當初的修改問題是什么忘記了，更有甚者都忘記一起協同工作前端開發工程師的名字了。
這時“記錄追蹤問題的工具”就顯得尤其重要了，因為這種工具的出現可以幫助我們回憶起當初具體的修改問題和修改的進度，從而降低上線安全性的風險度。
b.TO DO LIST 思維模式
to do list是一種實際走查階段使用的一種走查模式。
在設計走查階段，主要由設計師發現問題、記錄匯總遞交到前端工程師這里進行修改和跟進，主要的優勢是在于協助走查可以順利地開展，不遺漏掉任何信息。
在制作表格時候，可以關注這三點3點“1、問題需要逐條記錄。2、需要截取問題圖片及描述修改正確內容。3、相關對接人員的名稱和處理進度?！?
一個優質的項目落地是各部門協同合作的成果，視覺校驗是設計師必須掌握一項技能，我們本著“認真是前提、尊重是法寶”十字真言去校驗開發輸出的真實頁面，希望這篇1萬多字的文章可以幫助到你在校驗的工作上少走彎路。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
談到設計思維可能有很多小伙伴會問，“設計思維是設計師的事，和自己沒有關系”。其實不然，我認為設計思維不僅僅是設計師才具有的能力，關乎到各行各業不同身份的人，特別是管理層和老板更應該有的一種思維方式。設計思維無處不在，有人可能會問：“到底什么是設計思維，設計思維能帶給我們什么好處，希望通過一篇文章讓你徹底搞懂設計思維的概念和方法。
美國經濟學、認知心理學家，諾貝爾經濟學獎獲得者赫布·西蒙 (Herbert Simon)，在他的著作《人工科學》提出了設計作為一種思維方式的概念。
1987年，哈佛大學設計學院教授羅偉(Peter Rowe)出版了《設計思維》一書，書中首次使用設計思維的概念。
1991年，戴維·凱利（DavidKelley)成立了設計和創新咨詢公司IDEO，將設計思維推向商業化，成為設計思維的教育和推廣先驅。全球最大的設計咨詢機構之一。1992年，卡內基梅隆大學設計學院院長布坎南(Richard Buchanan)發表了一篇名為《設計思維中的難題》的文章，他指出：“設計思維可以擴展到社會生活的各個領域”。
2004年戴維·凱利（David Kelley)創辦了斯坦福大學設計學院（D.School）致力于提供設計思維的教育和推廣，以Design Thinking為核心教學思想，教授設計思維方法與實踐。在美國，設計學院正取代商學院成為熱門，該學院已成為斯坦福大學最受歡迎的學院。
“設計思維是以人為本的利用設計師的敏感性以及設計方法，在滿足技術可實現性和商業可行性的前提下，來滿足人的需求的設計方法。設計思維是一個可以被重復使用的解決問題的方法框架或一系列的步驟，提供解決問題的原型和一系列的工具?！?——蒂姆·布朗(Tim Brown)教授，設計思維的提出者和倡導者
首先設計思維是以用戶為中心的，從用戶的需求開始出發，針對產品看看用戶有哪些需求，能不能通過科技手段去實現，有了科技的可行性，再看看能不能不斷的實現商業變現，才能使我們的產品不斷的給用戶提供價值，所以設計思維指的是用戶的需求，科技的可行性和商業的持續性，這三者之間的交界就是設計思維帶來的創新。
設計思維其實也是一種思維方式，能幫助你打破當下的一些卡點，包括企業遇到的一些問題，設計思維能夠幫助企業創新，從而在企業發展的不同階段實現升級和轉型，甚至有些企業用了設計思維的方法實現第二增長曲線。設計思維的應用領域也非常的廣，比如：實物產品、服務設計、商業模式、軟件應用、工作流程、企業文化等。有些兒童教育機構也用設計思維開設了創造課程引導和教育孩子，斯坦福大學還運用設計思維開設了人生設計課，就是一個人的人生也可以被設計的，我也曾讀過這本人生設計課，有空給大家分享讀書筆記。一些全球領導品牌公司早已意識到設計思維對于其產品開發及公司發展的重要性，采取一系列措施加大對員工在設計思維方面的培訓，從蘋果、美國銀行、 宜家、可口可樂，星巴克、Airbnb、FOTILE方太、到GE通用電氣、寶潔、IBM、三星、3M 等，都已經把設計思維納入其經營策略，成立設計思想工作坊，并大量運用于為各種企業和社會難題提供實用和具有創造性的解決方案，下面就來談談設計思維具體步驟和方法。
設計思維的第一個方法是共情（Empathy）也叫同理心。大家可以想一下，我們在設計或者解決問題的時候，是不是站在需求人的角度去看待問題的，有的設計師可能只看到冰山模型最上面的一層，而冰山下用戶真正需求卻看不到，這就需要我們去了解用戶，了解用戶最好的方法就是共情。
觀察是共情最基礎的方法，其實就是深入洞察用戶，如何從用戶身上發現問題。你可以回想一下上大學時，是如何談戀愛的，是不是一開始先默默的觀察對方，看看有什么習慣和行為，喜歡什么東西，想辦法去靠近和了解，找到一個突破點。比如你幫她修好了電腦，解決了她的問題，就這樣自然而然交往，進入了戀愛狀態。這就是觀察，觀察是人的本能，也是建立情感最基礎的第一步。這里的觀察是帶有目標性的，并能解決實際問題的觀察。
最近看了一個節目叫秘密大改造，就是幫助用戶改造裝修老舊房的節目。欄目組安排室內設計師裝作成記者和用戶一起住一起吃，設計師發現房子特別小，空間利用很低，觀察房主人生活習慣、愛好等，通過交流了解房主的內心世界及對生活的向往等。完全和房主建立共情基礎，等了解觀察的差不多了，節目組就贊助房主和節目組一起去做公益的名義外出一個月。節目組故意不告訴房主在這一個月之內幫助房主改造房子，設計師就根據之前觀察發現的居住問題，設計改造了房子的方案，并監督工人進行裝修。等一個月房主人回來后，驚訝地發現自己的房子都認不出來了，完全超出了自己的想象，房主人太滿意了，每一個細節都考慮到用戶的需求，最終設計的方案用戶當然比較滿意了。這個欄目就是用了設計思維幫助用戶解決實際問題的。我舉這個例子希望幫助大家能更容易理解，大家有空可以看一下這個節目，看看設計思維是如何運用的，如果是自己該怎么用設計思維的方法去做。
共情的第二個方法就是沉浸式體驗，就是把自己當成用戶去體驗真實用戶的感受才能更好的發現問題。比如IDEO公司被委托設計一款兒童車，就讓工程師坐在現有的兒童車上去沉浸式體驗，推著這些成年兒童去戶外或去購物。體驗結束后這些工程師就總結了：兒童車太矮了，前面看到的都是腳，還有灰塵，最重要的看不到媽媽沒有安全感，小孩總愛哭，于是工程師就把兒童車做成可折疊并能升高，下面可以放東西，然后再轉過來面向媽媽，兒童就喜歡了。這就是通過沉浸式體驗來挖掘用戶需求。
共情最后一個方法是用戶訪談，可以通過定性或定量訪談目標用戶，可以面對面的交互式訪談，焦點小組訪談、專家訪談、也可以是問卷形式的等，網上有很多訪談模版和發放問卷的網站。上文提到的例子秘密大改造的設計師和用戶一起吃一起住，在不輕易的的交流中就知道了用戶的真實需求，這種訪談方式用戶是最不會感覺到有壓力的，也最能發現用戶真實需求的，所以最好的訪談是先和用戶做朋友，就是完全把用戶當成自己的好朋友，試問有幾個公司能做到這一點呢？
通過共情的方法我們充分理解需求，并挖掘了用戶的諸多問題和需求，那么是不是所有的需求都要滿足用戶呢，怎么找到用戶的真正痛點呢？這就需要重新定義需求，找到核心問題并進行設計。作為設計師你是否會遇到：接到需求就去設計，而反復設計的結果卻不被用戶滿意，只是做到了被領導滿意，而被陷入盲目的嘗試誤區中，這個時候應該回頭想一想需求有沒有被正確定義，有沒有明確用戶真正的問題。只有對設計需求進行有針對性的，有目標性的定義和理解，設計師才能找到最佳的落腳點，從而高效省時省力的完成任務。比如我們使用的Iphone，有沒有發現不能自定義鈴聲，喬布斯肯定發現了這個問題，但為什么到現實還沒有改進這個功能，但Iphone依然賣的很好。這就說明了自定義鈴聲不是用戶的核心需求，沒有誰會經常換鈴聲來炫耀自己的身份，這個功能有沒有都不影響最終的銷售成績，原因可能是蘋果希望用戶不要被打擾，更尊重用戶隱私。需求定義不是產品經理或老板拍腦袋定下來的，要把自己放到空杯狀態，不要相當然的拍腦袋，也不要拍胸脯說自己的想法一定是正確的、要深挖用戶需求，找到用戶真正痛點，重新界定問題，從而確保解決產品核心問題的正確方向。
設計思維的第三步生成想法，要生成想法可以利用頭腦風暴來共創更多的好主意。提到頭腦風暴可能大家都聽說過，其實就是聚集各式各樣的人一起思維發散，俗話說 “三個臭皮匠頂個諸葛亮，三人行必有我師焉” 就是這個道理。頭腦風暴的前提是正確理解用戶的真實需求和明確設計需要解決的核心問題，頭腦風暴盡量不要找領導參與，因為領導一句權勢的話會扼殺很多好意的產生。其次要注意自身思維的局限性，我們在思考問題時經常會帶有自己的經驗、習慣和思維方式，從而走進了盲區，如果有人提出一個好主意，有些人就不愿意思考了，這也說明了人的惰性。所以開展頭腦風暴還可以幫助我們打破傳統思維方式，打破盲區和惰性，從而打開多視角全方位的開放性思維，幫助產品找到創新的方法。還有要注意的是：面對別人提出的天馬行空的主意，不要評判和否定，而是說Yes,and, 在別人想法上再去想，并且鼓勵越多這樣的想法越好，這樣就會激發出更多人愿意出來分享自己的想法。最后，設計師從發散思維中收集靈感，再由靈感轉變成可實現的想法，最后把最佳想法轉變成全面、具體的實施方案。
在找到最佳的解決方案之后，需要在原型上呈現出來，這就把抽象的概念與想法變成具象的模型來驗證用戶問題，這樣能避免不合理不準確的假設。為了快速搭建原型可以采取精益創業的精神做出最小可行性產品MVP，花最少的時間和金錢來快速試錯。最簡單的原型可以利用隨手可得的材料快速制作或現場繪制草圖，達到易理解快速溝通的效果，從原型中看看有沒有準確解決用戶的問題，發現問題后，再去迭代和優化。
原型設計好之后可以進行小范圍測試，A/B測試，灰度測試等。我們要考慮在測試中要得到什么結果或驗證什么問題，然后從觀察真實用戶的使用習慣和喜好出發。抓住用戶的本能行為，重點看用戶做出了哪些操作行為，用戶真實的反應和你所預期的可能是不一樣的。當用戶提出不一樣的反饋時，不要為自己的設計而辯護，用戶說的不一定對，但用戶說的一定是個事實，用戶覺得不對，就說明哪里可能出了問題，要虛心接受批評。如果用戶說的對，就去改，收集用戶的反饋后，再進行快速迭代和優化，最后發布上線，產生商業價值可持續性。
能讀完這篇文章的你應該對設計思維有一定的概念了，你已經有了改變世界的能力，也許你在以后的面試中能更好的運用設計思維的方法來進行面試問答。最后簡短總結一下設計思維的方法過程：“首先要學會與用戶共情，幫助我們定義問題，再用頭腦風暴的方式幫助我們解決問題并產生創新的方法，把創新可行的方法轉變成原型，用原型進行測試和驗證假設，再通過原型測試去了解用戶，并重新定義問題，所以這五個步驟是不斷反復和疊加的，最終打造出用戶喜愛并能產生商業價值的產品”。
讀了這篇文章你可能會發現，其實市面上所謂的產品思維，商業思維，突破性思維，服務設計，體驗設計，其實都是來源于設計思維的核心理念和方法。設計思維幫助了很多企業，但也不要認為是萬能的，它只是幫助我們解決問題的方法和工具框架，只有在項目實戰中不斷運用和實踐，才能更好的理解和轉化成自己的理論體系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
原文地址：Martin_K（站酷）
作者：Martin_K
轉載請注明：學UI網》為什么你始終做不好版式設計？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
qiu~
變成了沈騰。
看到那根點燃的火柴嗎？
qiu~
變成了火腿腸。
從賈玲變成沈騰，將火柴變成火腿腸，有趣的同時卻沒有影響到整個畫面的調性，這便是移花接木的方法，設計理論叫做置換同構。
這是一個8,這是一個蘋果，
你想到了什么？
利用蘋果置換成8的形狀，但顯然看起來有些粗糙，融合調整下，讓蘋果有了8的樣貌，當然還可以此類推成其他的樣式。
一個冰淇淋與一座富士山，找到近似相同可置換的區域。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/05/ezgif-5-3755c0b106.gif)
在原有結構不變的基礎上，將冰淇淋替換成了富士山，創意就是這么簡單。
置換的理念是將兩個毫無關聯的圖像，比如這樣，將其中一部分與另一個部分替代，
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/05/ezgif-5-6213e0ac01.gif)
形成一種新的組合形式，替代后的物體和原來造型保持相對的一致，置換的設計就產生了，當然這都是相對簡單的。
由此我們可以嘗試更多腦洞的置換設計，比如人在蛋黃里游泳，農場種在蛋黃里。
水壺倒出來的不是水而是云朵，順著這樣的思路還可以增加場景元素形成全新的創意設計。
▽
看到這樣一個場景，如果要做一個手機的海報，
你想到怎么置換嗎。
將場景調整成手機外邊的形狀，手機平躺在場景中。
放置主題文字，再利用相關的場景元素增加融合的真實感，這樣簡單、有趣、創意的設計就做好了。
原文地址：修先森撩設計（公眾號）
作者：修先森
轉載請注明：學UI網》還在為沒靈感發愁？那是沒學過移花接木這招！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
以下作品主要是練習通過 Sketch & Adobe Illustrator 軟件配合實現立體圖標設計，掌握通過色彩的變化營造質感和光感。
以下作品主要是練習圓柱體的繪制和光影的處理，以此來表現排行榜。配色比較趨向于年輕化，青春活潑的風格探索年輕化的設計趨勢。
這一組作品主要是研究極光風的配色和磨砂玻璃效果的結合，用磨砂玻璃層作為圖標的保護罩，帶來朦朧美的感官體驗。
隨著網民年輕化的趨勢，UI設計也逐漸趨近于更加青春活潑的風格。探索了一組低飽和度高明度的圖標配色，利用不透明度漸變實現晶白風格圖標。
這是在五一假期前繪制的一個相機 APP LOGO，探索多色環形組合來進行色感營造，利用簡單的內陰影和蒙版工具刻畫效果。
一組帶給大家好心情的 IP 表情設計作品，超橢圓的造型和青春可愛的風格結合，練習表情設計的能力和光影把控的技巧。情感化設計的技能被逐步放大，也是提高作品亮點和視覺感的一個不錯的方向。
想要休息的時候來了一個靈感，大家都喜歡喝咖啡，我還是比較喜歡喝茶~O(∩_∩)O哈哈~有感而發繪制了一個關于茶的 APP LOGO。
帶有紋理的球體繪制，你可以想象這是一個瑜伽球。利用 AI 軟件的 3D 功能進行造型繪制，然后利用 Sketch 軟件進行質感細節的刻畫完成。
這組作品主要是研究 B 端設計的柵格化系統，以及配色風格的嘗試。隨著 B 端 C 化的趨勢，在 UI設計層面的風格探索中，將會變得更為大膽，突破風格定義的束縛。
以上是近期輸出的一些 UI設計探索作品，后期將會繼續探索更多設計風格和細節的刻畫。
原文地址：黑馬家族（公眾號）
作者：黑馬青年
轉載請注明：學UI網》近期輸出的一些UI設計探索作品
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
常見的圖標風格有線性、面性、彩色、寫實、3D等，圖標的選用因頁面的設計風格、圖標的位置等原因會有所差異，主要的作用是反饋動作和吸引用戶更多注意力。
線形/面性：最基本也是做常用的風格，廣泛用在頁面設計中。
彩色：通常用于反饋用戶的操作或者增加用戶的注意力。
3D/寫實：當頁面中的某哥內容需要引起用戶高度注意時使用，一下抓住用戶的視線。
Tips: 現在字節、百度新推出的一些年輕化產品中，有很多精致的3D寫實圖標，極具個性，很好地迎合了年輕用戶的喜好。在扁平風格流行的當下，這樣的嘗試也是一種突破。
簡單的線性圖標重量輕，看起來更簡約，不會給頁面帶來太大的視覺負擔。比如當頁面中已經有很豐富的圖片和內容，那么更適合選用簡約的、重量輕的線性/面形圖標，防止頁面過于雜亂。
相反，如果當前的頁面中只有文字，信息量很少，那么更適合利用重量大的彩色甚至3D圖標來增加頁面的豐富性，讓頁面看起來更有設計感，給用戶帶來視覺上的愉悅，簡約而不簡單。
構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等，表達式規則是統一的，以便只給觀看者識別圖標所需的最小更改。
描邊粗細：手機上常用到的描邊粗細有2px、3px、4px。2px的看起來會顯得更加精致，4px的描邊視覺較重，可以用在優先級較高的區域作為功能性圖標,。
端點/節點：圖標的端點有平頭、圓頭和方頭，圖標的節點有斜接連接、圓角連接、斜角連接，具體使用哪種樣式要根據頁面的情況統一設置。
圓角半徑：方形的圖標邊角過于鋒利，用戶有時候看起來會不舒服，圓角圖標更圓滑，相對來說更容易讓用戶接受。雖然圓角用的更普遍，但具體使用哪種，還是要考慮頁面的整體風格再決定。
圖標的外形有圓形、方形、三角形甚至不規則形狀的，所以我們很難將不同形狀的圖標尺寸完全統一。
這個時候網格就起到很關鍵的作用，有了網格相當于提前將圖標限定范圍，在網格范圍內根據圖標的重量和重心靈活調整大小，這樣會讓不同形狀的圖標看起來更統一。
由于設計軟件的局限性，雖然有些圖形已經居中對齊，但有時候還需要進行視覺校正。
最典型的圖標案例是“播放”圖標，利用設計軟件對齊中間的三角形后，會發現三角形的位置看起來偏左。
利用軟件對齊后，我們還需要再用眼睛確認一遍，我們可以將三角形向右移動，保證三角形的重心與圓形的重心一致，這樣整個播放圖標看起來會更舒服。
設計圖標時，我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視，所以大多數的圖標都沒有透視，看起來會更簡潔。
帶透視的圖標會給用戶營造一種空間感，可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注，但不建議這么設計。
圖標比例通常使用8的倍數作為基準，例如8px、16px、24px和32px，以便在各種環境中進行流暢地切換。除此之外，在移動端等屏幕尺寸較小的頁面中，還會使用4px的倍數，來實現多功能性。
圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小，要盡可能做到對用戶友好，可以使用一些簡單的隱喻設計，但含義不能過于復雜。
一個圖形能說明的問題，沒必要再添加多余的圖形。復雜的圖標可能需要花費用戶很長時間才能理解它們的含義，這樣反而會影響用戶的操作。
這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息，特別是對于尺寸很小的系統圖標，最好只保留最基本的內容，移除多余的裝飾元素。
這里說得一致性，并不是指一個產品中所有頁面都只能使用一種圖標風格。一個產品有很多頁面，線性、面性等多種圖標風格可以一起使用。
但在同一個頁面場景中，執行相同功能的圖標應該保持相同的樣式。
面對不同的操作系統，例如iOS和Android，同一功能對應的圖標也會有差異。針對不同的系統，我們可以選用大多數用戶熟悉的圖標，這樣用戶能更快地理解圖標的含義
以上就是常用卻容易忽略的圖標設計細節，希望通過這些內容能幫助你對圖標設計有更深的認識。
原文地址：Clip設計夾（公眾號）
作者：Clippp
轉載請注明：學YUI網》如何更好的設計圖標？優先注意這些容易被忽略的細節
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我們先來分析一下這個 LOGO：
1. 基本形狀為字母 D；
2. 一大一小、一長一短均勻的進行向外發散漸變。
如果我們把一大一小、一長一短分別單拿出來，都是比較方便做出來的，先做出兩個不一樣的線然后繞著 D 的外輪廓混合就好，但是同時滿足這兩個條件的話，就需要采取其他的辦法，ok，下面我們來看一下演示步驟。
第一步，我們先把字母 D 的外輪廓畫出來，直接用一個方形右邊拉圓角即可！
然后我們選擇【對象】??【路徑】??【偏移路徑】，數值改為負數，向內縮小復制一個。
將里面的 D 左邊斷開，并連接到外面的 D 里面。
用上面同樣的方法再次向內整一個小 D。畫好后我們就可以直接刪掉它了…不是，刪一半就行，因為圖形是上下對稱的，我們先畫一半直接鏡像！可以事半功倍，能偷懶就偷懶。
畫完這三條線有啥用呢？不急，我們先從最外面的入手，先在左右兩個端點出分別畫一大一小的圓。
然后對這兩個圓進行混合，用【混合工具】分別點擊兩個圓，指定步數改為 9，然后再【替換混合軸】，就可以讓圓沿著我們畫好的路徑進行大小重復排列。
然后我們在最小的線的兩頭端點處分別畫一個很小很小的圓，再次執行前面同樣的操作，混合 9 步，替換混合軸。
然后我們分別讓上面的大圓對下面的小圓進行混合，步數給的大一些，這樣就會出現發散效果的圖形啦。（別忘了先擴展和取消編組）
那一大一小的發散該怎么實現呢？這就用到了我們第二根線了，我們分別把單數混合上面的圓向下移動到第二根線上，然后調整一下間距，就搞定了！
畫好一半了，直接鏡像復制一下，整體就出來了，然后我們給每一根線添加上漸變色。
最后加上排版就搞定了，這個 logo 的難點在于他是一大一小的進行發散，所以直接用單個線來混合達不到這個效果，所以我們就采取單一作戰模式，用同樣的方法，選擇不同的混合對象，會實現不同的效果。
紅點獎作為世界三大設計獎之一，一直以來都是設計師們夢寐以求想要獲得的獎項，它的 logo 大家應該都很熟悉，但這種球形環繞式 LOGO 很多同學都不知道應該怎么實現，ok，下面我們就來設計一個紅點獎頒給日夜操勞卻依舊菜 b 的自己…
首先第一步我們先畫兩條相等長方形，其中第一個填充為紅色，第二個去掉填充色和描邊。
然后我們就向下復制多個，但也不用太多，給太多不好…
之后調出符號窗口，將這個圖形編組后整體移動到符號窗口里面，也可以取一個好聽的名字，雖然沒什么用。
放完后先不管它，我們額外畫一個圓形，注意用描邊模式，之后砍掉它的一半。
選擇【效果】??【3D】??【繞轉】
先選擇【貼圖】，將符號部分改成我們剛才設置的圖形，然后點擊【縮放適用】及【三維模型不可見】，可以適當拉高拉寬，之后確定回到繞轉頁面，拖動左邊的方塊更改它的繞轉方向，然后選擇下方【表面】改為無底紋。
得到新的圖形之后，是漫長的取消編組和擴展，多操作幾次，你就可以得到下面兩個部分。
將他們居中對齊，然后給下面的圖形增加一個漸變，這樣效果就出來了！
最后就是更改一下細節了，將上面和下面的部分可以單獨切一下，做出一個角度。ok，基本的方法就是這樣啦，雖然最終效果和紅點的原 logo 不太一樣，有點像破產版，但沒辦法，想得到真正的紅點獎，還得靠你自己的努力?。?！
我們在遇到相對比較復雜的圖形的時候，一般就會用到形狀生成器工具，它可以通過合并或刪減簡單形狀創建出復雜的形狀，掌握了這個工具，可以說你的 logo 就多了無數種可能性。下面我們通過一個看起來比較復雜案例來演示一下如何使用它！
越是看似復雜的東西，往往越具備一定的規律性，我們看一下這個圖形，可以發現它是由一個部件通過旋轉復制得到的，如下圖：
所以我們只需要把這紅色部分先繪制出來，就很容易畫出來了！我們看一下操作步驟。
第一步先畫出他的網格，先畫出橫線部分，再傾斜 60 得到右斜線，然后將有斜線鏡像復制出左，最后三組居中對齊。
接著我們畫出它的圓形框架，注意與線段的對齊關系。
ok，這樣就把所有的網格線全部繪制好啦！這個時候就可以回到開始的時候講的，我們只繪制那六分之一的圖形即可。選擇【形狀生成器工具】按住 alt，將多余的線刪除（記得提前復制一份圓備用）。
得到這個圖形后，我們將它描邊加粗一些，然后擴展，之后繞大圓圓心旋轉 60 度復制一圈（為了方便切割，我們把線往外延伸一些）。
這時候我們再次請出形狀生成器工具，一是將大圓外圈的部分刪掉，二是將內部閉合的地方填充上。
最后我們再在中間連接一個矩形色塊，就做好啦！為了充分體現形狀生成工具的強大功能，特意選了這么個復雜的 logo，真是累瞎了我的狗眼… 總之總之，形狀生成器工具的作用有很多，可以提取閉合圖形，可以刪除多余圖形，線或者面都可以進行操作！
我們無論是在做 logo 還是做輔助圖形的時候，這種異形扭曲空間圖形真的很常見，它們看似復雜，其實用一個工具就可以搞定，就是封套扭曲工具。
他一共有三種表現形式，第一個是用變形建立，也就是我們在效果中看到的旗形、波形、魚形等，常用于文字；
第二種是用頂層對象建立，比如先畫一個蘋果，然后打上文字介紹，用這個建立就可以讓文字扭曲成蘋果的形狀；
而第三種，用網格建立，是可控性非常強的扭曲變形，我們通過建立網格體系產生大量的錨點，拖動任意一個都可以產生不同的變化，下面我們就用這個方法來做一下這個 logo。
第一步，我們先畫一個長方形，向下均勻復制多個，形成多個等距的長條。（也可以用混合工具）。
第二步，給圖形添加漸變色。
第三步，我們選擇圖形，執行【對象】?【封套扭曲】?【用網格建立】，行數和列數均設為 1。
然后就是關鍵的一步了，我們用直接選擇工具（A）拖動調整網格的錨點和手柄，得到一個扭曲的圖形（如下圖 1234 各點的位置變換）。
調整完之后將圖形擴展，用形狀生成器工具將中間重合多余的地方刪掉（按住 alt 刪除）。
ok，最后加上排版，一個通過扭曲得到的抽象鳥 logo 就做好了，這個方法基本的套路就是這樣了，主要在于錨點搖桿的調節和把控，另外，在設置網格半徑時，數值越大，可操作的空間及難度也就越大，大家可以多去試試看。
參加過波波品牌課的同學們應該都知道，這類 logo 就是貴為九大構成之一的重復構成！因為特有的重復性和規則性，使它呈現出來的效果會很高級很實用。但是我看很多同學在做的時候都是單個的縮小放大擺放…這樣往往是很不標準的，下面給大家安利一個簡便高效的方法！
首先第一步我們還是先把基礎圖形畫出來，用鋼筆工具勾一個造型即可，注意線條要絲滑一些！
然后就是重點部分了，我們選擇【效果】??【扭曲和變換】??【變換】依次調整一下的參數（參數不是固定的，要打開預覽根據自己的實際情況來設置）
縮放：控制變換的大小對比
移動：控制變換的路徑方向
旋轉：控制變換的路徑角度
副本：變化添加的圖形數量
ok，調整完后就可以得到下面這個造型了！
然后我們給它添加顏色啦，這里再來一個快速設置漸變色塊的方式，先做好最深色和最淺色，然后用混合工具很容易就做出來了。
做好顏色后我們就一個一個的給它上色就可以了。
最后加上底色和排版就搞定啦！
變換這個方法真的非常好用，非常適合重復構成的 logo，這里給大家留個小作業，可以用這個方法試著自己做一下華為的 logo。
立體 logo 往往擁有比純扁平 logo 更加良好的視覺展示，在色彩上也更多運用漸變色進行搭配，使其更具吸引力。
但是實現起來往往比扁平 logo 要困難的多。下面我們通過這個案例來演示一下繪制立體 logo 常用方法。
先簡單分析一下：
由三個立方體堆積搭配漸變色形成視覺錯位感，ok，我們第一個思路就是先從單個立方體入手，下面我們就來繪制一下立方體。
首先我們畫一個正方形，大小給到 80px（也可以是其他數值，但要記住這個數值）。
點擊【效果】??【3D】??【凸出與斜角】，執行三步操作：
1. 將位置改為等角上方；
2. 凸出厚度改為 80 的兩倍也就是 160；
3. 表面材質選擇無底紋。之后點擊確定。
這樣一個基礎立方體就出現啦，為了方便后面的操作，我們可以換成描邊模式。然后通過這個立方體進行旋轉，分別旋轉 -30、-150，90 度得到三個不同傾斜角度的立方體。
將他們組合在一起，然后用形狀生成工具繪制出錯位感。
再依次給每個面添加上漸變色，就完成啦！
那除了這個方法還可以怎么做呢？假設我們已經畫好了草圖，在草圖的基礎上繪制 3Dlogo 的時候，可以使用網格大法！
可以看到這個圖形的斜邊是直線傾斜 30 度來完成的，那我們就可以用這個角度先把網格繪制出來。
然后通過網格可以直接用【形狀生成工具】或【實時上色工具】將視覺錯位之后的圖形繪制出來，省去了 3D 的步驟。
之后就和第一種方法一樣添加漸變就完成了，這個方法比較適用于在已經有草圖或想法的基礎上來繪制，會更精確更快捷，如果是想單純的繪制立體圖形，那還是更多的用第一種 3D 凸出與斜角的方式。
這是全球市場調研咨詢公司 PRS IN VIVO 推出全新品牌 LOGO，相信大家看到它應該不會陌生，沒錯，它就是運用了彩色半調效果來進行視覺設計。它會幫你生成一個波點圓形點陣，呈現出一種像素化感覺，同時也是波普藝術中重要的變現形式，下面我們就看一下如何做出彩色半調效果的 logo。
我們在進行設計前，先新建一個 cmyk 模式的畫板，分辨率也給的大一點。
我們畫一個正圓，給它添加一個黑白漸變。
將漸變模式改為徑向漸變，再點擊反向漸變，再將黑色部分改的稍微灰一點，得到一個新的漸變圓形。
然后我們就用這個圖形進行彩色半調?！拘Ч?【像素化】?【彩色半調】
那么如何控制點陣中原點的排列疏密和數量呢？
我們在進行彩色半調的時候，會添加一個半徑參數，這里數值就決定了點陣的數量（也可以隨便輸入一個數值，然后放大縮小圓形進行控制）而疏密程度，則是由一開始我們給予黑色的黑度所控制的，越黑越密，越淺越疏。
OK，調整完參數后，我們將它變成矢量圖形。具體操作為：
1.【對象】?【柵格化】
2.【圖像描摹】?【黑白徽標】?【擴展】
這樣一個矢量的彩色半調圓形點陣就做好了，之后添加一個粗一點描邊的圓框，將圓框與之前的圓重復部分用形狀生成工具提取出來，刪除多余的波點，再添加漸變和文字排版，就得到了這個 logo 圖形。
彩色半調不僅僅局限于圓形哦，其他任何形狀都可以用這個方法進行點狀像素化，還不快去試試？
上面這些圖，雖然可能沒有見過，但大家一定都不會太陌生，是的，上面的圖形都是用黃金比例圓來完成的，只要是做過 logo 有一定時長的同學就一定會接觸。我也曾經遇到過好多次客戶直接在設計需求中點出了要用黃金分割比例做設計圖形…至于它為什么好看，那不是我們今天所研究的，今天只負責教會你該怎么用！
工欲善其事，必先利其器。想要用黃金比例來繪制圖形，那首先你得把黃金分割比例的圓先做出來，這里介紹兩種比較方便快速的繪制方法：
第一種是黃金比例分割，也就是通過繪制 0.618 倍數的多個圖形，如下圖。
但是我們在實操中沒有必要用這么規整的來方形堆積來繪制，只需用一個工具就可輕松搞定！
雙擊【比例縮放工具】，等比數值改為 61.8%，點擊復制。
這樣就得到了 1：0.618 的兩個圓啦，我們只需按住 CTRL+D，重復復制多個，一個黃金比例圓就畫好了！
第二種方法是利用斐波那契數列繪制。斐波那契數列指的是：1，1，2，3，5，8，13，21，34，55，89…這樣從第三項開始，每一項都等于前兩項只和。換算成設計語言的話就是這么個圖形：
我們用這個結構，把每一個正方形都換成圓形，組合起來就是一個黃金分割比例的圓形環。
以上兩種方法哪一種都可以！靈活運用！下面我們就用畫好的黃金比例圓來繪制 logo。
首先，你得先畫一個草圖…紙上或者 PS 都可以，將它墊底。
然后我們把黃金比例圓放進來，注意不要隨意放大縮小，先整體編組，將最大的圓環對準圖形最大的弧線部分，之后就可以將剩下的圓進行一一對應擺放了。（可無限重復使用，一些小細節可以適當拉大拉小一點點）
擺完之后我們用【形狀生成工具】或【實時上色工具】，將切割得到的大象繪制出來！
黃金比例固然好，但是我們在設計的過程中不能過度的去依賴它，畢竟無論你用不用它，只要 logo 是好看的，那就有價值！PS：不過它確確實實能夠為你的提案加分…很多客戶都吃這一套，噓…
好勒，八個案例全部完事了，不知道大家吸收的怎么樣，其實雖然分了八個方向，但有很多技法都是互相通用的，而且AI中隱藏的小技法遠遠不止這些，相信跟著一起實操過來的你，一定可以豐富自己的武器庫，給自己的LOGO作品集，增添一大波可能性！
好了，時候不早了，做 AI（Adobe illustrator）也做的有些累了，大家晚安！記得實操！
作者： 告白天
轉載請注明：學UI網》拿捏8種LOGO設計技法！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
工具：Photoshop、手繪板
筆刷：art-markers：Round kyle 70（文末附筆刷下載鏈接）
適合：板繪零基礎入門
打開PS，新建一個2000px*2000px的文檔，顏色模式為RGB。
我們不要急著開始畫，先試試用馬克筆筆刷Round kyle 70畫出藍色的水平線和波浪線，熟悉一下筆刷畫出的效果，和筆刷培養一下感情。
這個過程中，你會發現，這個筆刷如果只是從頭到尾畫一條線，看起來很平淡，但如果在藍色線條之上多畫上另一條紅色線，兩條線的交叉位置就出現一個顏色更深的“點”，我們把它叫做疊色區，它能讓整個造型變得不俗氣，高級起來了~
這時，我們正式開始畫小盆栽啦，用筆刷畫出一條藍綠色水平線。然后再畫出整個容器的“身體”。
這里要營造一個小心機，不要讓水平線和容器身體連接起來，這樣就能制造一個斷線，斷線表示我們下筆也是要休息的，這是一種線條的呼吸，極簡的感覺就是這樣來的。
用亮藍色畫出盆上的花紋，這里我用了波浪線，還可以把它畫出框。
高級的感覺靠的就是“有技巧的畫不像”來制造的，比如植物大都是綠色，但我們這里用了紅色。這種故意用錯顏色的方法，就會讓畫面看起來很時尚。
試一下，用紅色線條畫出植物。植物葉片很簡單，由一條線加一個圓圈組成。
這里注意一下，相同的顏色也可以制造疊色效果哦。
有點感覺了嗎？再來試試另一個盆栽吧~
這個花盆的造型是個六邊形，用亮藍色先畫花盆的上下兩條等長的水平線，然后用紅色畫出花盆的左邊和右邊的折線，框出一個花盆輪廓。
再用黑色畫出花盆內部的線條，花盆中間就不會顯得空空蕩蕩。
在花盆上面的左右兩邊分別畫上兩片葉子，像兩個貓耳朵。然后再畫出中間的葉片，葉片和葉片之間可以疊色表現，看起來就像一頂皇冠。最后再在上方繼續畫葉子，類似菠蘿頭的造型。
最后，我們再用紅色在每片葉子尖上畫一個小線條，就像給葉子涂指甲油。這是一個點睛之筆，多肉的顏值就又提升了。
最后把畫好的兩幅小盆栽放在一起，看看效果~每幅小畫我們都可以配點文字，有點儀式感，這樣畫起來也很有趣。
最后，這里的有我畫好的一頁簡筆畫練習，不焦，不躁，一天進步一點點吧~
長圖版更適合臨摹：
百度網盤下載
鏈接：https://pan.baidu.com/s/1OdfNVJID_Cq3UbgawGQxbw
提取碼：aqdb
原文地址：飛屋設計
作者：飛屋睿UIdesign
轉載請注明：學UI網》超級可愛！插畫萌新必學的PS極簡馬克筆簡筆畫：盆栽篇
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在團隊活動時，從搭檔的一個眼神我們就能預判他接下來的動作，相互的默契配合能讓我們順利地完成任務，在產品設計中的預判設計也可以得到事半功倍的效果。
1.歷史記錄
a.用戶操作行為記錄
廣告優化師通常會管理幾十至上百個賬號，需要在多個賬號之間頻繁切換去盯盤和新建廣告，頻繁的操作難免會造成信息遺忘和決策卡頓，從而會影響操作效率。在管理后臺的設計中可以通過記錄用戶最近操作行為，恰合時宜地為用戶提供幫助。
案例：在新建計劃環節，標識出本賬號上次的選擇記錄（最近一次的投放目標），輔助優化師快速做決策。
b.基于操作習慣的系統預測
平臺系統可基于個體操作習慣和大數據分析來預測用戶需求，提供高概率的操作建議，給予用戶貼心指導。
案例：針對廣告平臺表格信息密集，不易快速獲取關鍵指標的問題，Google提供了用戶自定義欄，而Facebook的表格欄會根據用戶列操作習慣和自定義欄行為進行大數據分析，預置一些高頻意圖的組合欄，一鍵切換即可查看關鍵指標，操作更便捷。
2.效果預知
a.效果預覽
表單頁對填寫的物料內容進行映射，展示真實效果預覽，降低用戶心理的不確定性。
案例：在進行廣告創意創建的過程中，優化師填寫完標題和上傳完物料后很難知道廣告投放到手機端用戶看的真實效果。而所見即所得的可視化編輯方法支持創意樣式實時預覽，可以輔助優化師更好地進行創意優化。
b.效益預估
針對一些需要效力評估的頁面，平臺通過預置好的算法對用戶內容的表達及時給出估算值，給出建議，從而提高內容填寫質量，降低填寫的盲目性。
案例：Google廣告平臺在新建創意環節，對廣告素材資源的組合方式和數量進行估算，呈現當前廣告與高質量廣告設置的差距，輔助用戶進行高質量的廣告制作。
3.智能輔助
用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區域提供輔助提示，通過自動補全或聯想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
4.行為慣性
在一些場景里，用戶的行為具有很強的關聯慣性，例如上班時間進到辦公區域打開辦公APP首要目的一般是打卡簽到。通過梳理主線任務或整理用戶體驗地圖可以挖掘出很多基于行為預判的設計機會點。
案例：預判用戶在工作臺內截屏后大概率是去反饋遇到的問題，適時將反饋入口透出，可以提高反饋的效率和用戶體驗。
現實生活中，在與他人交往時，清晰的表達尤為重要。同樣是演講，有的演講者“詞不達意”沒有重點，或者內容晦澀難懂讓聽眾感覺索然無味；而好的演講者則會用場景化的方式將邏輯復雜的事情講給聽眾，讓聽眾有身臨其境的畫面感。
好的設計也應該是清晰好用的，能讓用戶沉浸其中輕松高效地完成自己的任務。
如何讓用戶通俗易懂地了解產品功能，并能快速上手？我們可以從功能易理解、內容強吸引和選擇無負擔三個方面來降低用戶的操作門檻。
a.術語轉換
將一些晦澀難懂的詞匯轉化表達方式，轉化為更貼近用戶視角的文案描述，傳遞細節感受；
b.信息有效展示
透過需求背后的真實意圖分析和高效率的信息展示可以讓用戶更方便地獲取更多信息，提升產品的服務效益。
案例：服務器預警平臺從傳統的表格形式優化成拓撲圖。將所有的云服務器都抽象成一個個矩形，矩形的顏色代表服務器監控指標的狀況。當方塊顏色顯示為黃色，則表示該云服務器內有監控指標出現了異常，這個時候目標用戶就需要重點關注。
對于老用戶來說，從之前習慣的平臺遷移到新的平臺一般會有很大的抵觸心理。遷移前用戶考慮的關鍵點包括：不遷移是否有影響？新平臺有什么優勢嗎？遷移起來麻煩嗎？
以百度營銷客戶中心遷移引導頁方案為例，初期方案首屏只告訴用戶平臺升級了，但是不能快速了解到升級后的核心優勢有哪些，同時遷移按鈕設計得很弱，傳達的信息是遷移可能會很麻煩，很容易讓用戶止步于此。
所以在進入遷移導流頁面時，首屏首先要講清楚新版平臺的能力和遷移方式。對于當下想遷移的用戶，明確遷移方式和入口；對于徘徊不定的用戶，告知遷移后的好處并做好最后下線時間的提示。這些信息不僅能夠消除用戶遷移前關于成本的顧慮，也能吸引用戶立即開始遷移行動。
B端產品操作鏈路通常比較長，用戶很容易迷失其中。對于邏輯復雜的功能在做頁面設計時需要突出主次和流程引導，盡可能提供一個主要觸發的主按鈕，讓客戶不用過多思考就知道模塊和操作的隸屬關系，降低認知的負擔。
我們在執行任務時總是希望有過往經驗可借鑒，如果事情按照自己的預期發展了會覺得很踏實有可控感。同理，用戶在操作一個系統界面時也會有類似的心理變化，對于自己熟悉的功能希望主動權在自己手里，能復用之前的經驗無需額外的學習成本；對自己不熟悉的功能希望有及時的引導，能很快地上手并能掌握主動權。
不可控的操作體驗會讓用戶在使用過程中產生很強的挫敗感，一旦有了這樣的心理感受就很難被扭轉。那如何保障體驗的基線確保用戶正向的感受呢？下面就結合操作一致性和明確指引性兩方面進行說明。
針對同類型的功能，在交互設計上要盡可能地保持邏輯對齊，保證平臺的一致性同時降低用戶的學習成本。一致性設計對產研提效也有很大的益處。
案例：下例中的批量操作項的邏輯，都是通過選中復選框之后在模塊上方展示批量操作欄且支持一鍵關閉。這樣該平臺的用戶無論在任何場景下只要注意到復選框就對批量操作功能有了預期，沒有額外的學習成本。
對于復雜的使?流程，最好能夠在客戶使?的過程中建立統一的指引，引導客戶?步步完成操作，從而提高任務的完成率，促成業務目標達成。
案例：當一個平臺需要用戶完成的任務繁多且流程性強時，需要把所有的核心任務按照層級進行呈現，并作為一個固定模塊展示在醒目位置。這樣用戶既可全局視角理解業務又能作為功能入口快速觸達。
B端業務中，交互設計的核心在于為特定場景設計擇優的行為路徑；通過分析用戶當前所處的階段和場景來判斷此刻遇到的關鍵問題。針對不同的問題去選擇對應的解決策略，例如對于新手來說降門檻會是首要任務，對于熟手來說操作的效率會顯得更為重要。結合預判設計、表達清晰、操作可控三個維度的案例可以讓我們在對業務理解有限的情況下，產品設計能有更多思考角度，也能有更明確的設計主張。
原文地址：百度MEUX（公眾號）
作者：商業用戶體驗部
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn