上次整理了一些大廠的可視化服務平臺，平臺的優勢顯而易見，組件化的操作，快速搭建的方式節省了很多的開發和時間成本。有興趣的戳這里：數據可視化大屏設計工具整理（上）。
對于上期的一些更正：8月28日百度Suger更新了收費標準，也就是說現在百度Suger也收費了！目前是分版本收費，但是對新老用戶還是提供了30天的全功能試用的。
本次整理的是下半部分的內容：
一、數據大屏與數據可視化
二、大廠的可視化服務
三、技術開源庫
四、設計輔助工具
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
三、技術開源庫
了解一些技術開源庫，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設計的可實現度，不然再炫酷的設計效果最終如果因為技術開發能力無法實現也是徒勞的。
Echarts -百度開源可視化庫
這是一個使用JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器。4.0版本還提供了對微信小程序的適配。DataV中的一些組件也是依賴Echarts生成的。
Echarts提供的圖表很多樣化，幾乎包含常用的、不常用的各類圖表樣式。且提供有可交互組件，可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。
△來源Echarts實例
Mapv - 百度地理信息可視化開源庫
用以展示大量地理信息點、線、面的數據。創建需先上傳地理信息數據，再設置地圖樣式后，即可下載保存。目前僅開放Beta版本。
△來源Mapv官網
螞蟻AntV
https://antv.alipay.com/zh-cn/index.html
螞蟻金服的Ant Design作為設計師應該都是較為熟悉的。AntV是螞蟻Ant系列下的一個數據可視化解決方案。分為G2、G6、F2、L7不同產品，分別對應不同的特性需求。
△來源AntV官網
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網站可以用來繪制地圖。有些特殊情況下，開發可能需要自己繪制地圖。如果開發自己使用canvas繪制，難度較大。這個網址提供了地圖svg、HTML以及image的下載。
△來源Amchats官網
D3.js - 數據驅動的文檔
D3js 是一個基于數據來操作文檔的JavaScript 庫，適宜用來建造各類可視化圖表。支持大型數據集和交互與動畫的動態行為。
△來源D3js官網
billboard.js - 簡易界面的可交互圖表庫
https://naver.github.io/billboard.js/
這是一個基于D3 V4+的JavaScript的圖表庫?？梢詫祿M行視圖縮放、展示細節等交互操作。
△來源billboard官網
FusionCharts
FusionCharts提供了100多個交互式圖表和2,000多個數據驅動的地圖，對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件來方便開發快速入門。不過這款是收費的，根據不同的使用環境定價不同。
△來源FusionCharts官網
四、設計輔助工具
Kitchen - 螞蟻金服官方插件
這是一個sketch的插件工具。主要功能如下圖。
△來源Kitchen官網
Iconfont 圖標庫我比較常用，可以直接在sketch中搜索拖拽，不用再去打開網頁查找了。其次數據填充也比較常用，自動填充時間地址城市等挺方便的。sketch也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以sketch自帶功能為主。
另外，與可視化設計相關的就是里面的圖表生成器了。不過Kitchen當前只有一些常規的圖表，不過勝在簡潔明了，很適合在此基礎上進行二次設計。該插件還是螞蟻Ant系列的官方插件，可以自動配置符合Ant Design 規范的組件，配合公司采用的Ant系列的框架，會方便不少。
△來源Kitchen插件界面
FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具
這也是一個sketch的插件工具。分為圖標、圖表、組件、模塊和模板五大功能區。
Fusion Design作為一個開源中后臺解決方案，和Ant Design有一定類似，但也有所差別。Ant Design 是一套組件庫, Fusion Design 更像是一個組件庫生成工廠。
直接下載安裝FusionCool的話，打開sketch看到的將是一個默認組件庫，圖表部分的種類樣式比Kitchen多了不少。而更厲害的是，你可以在Fusion Design上基于官方庫編輯改造成屬于你自己的設計系統，發布主題后獲得新的主題包，此時你在FusionCool中就可以看到專屬于你的主題包了，在sketch中完成設計后，開發使用Iceworks安裝你的主題庫就可以直接編碼實現你的設計。
△來源FusionCool插件界面
Map Generator - 快速地圖生成填充
https://github.com/eddiesigner/sketch-map-generator
這是一款基于谷歌地圖的自動填充的Sketch插件，輸入地址后就可以自動生成不同風格樣式的地圖，個人比較喜歡第三款灰色的。
△圖為Map Gnerator生成效果
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網站上面提過，但其實設計師用來獲取矢量地圖也很好用，選擇地圖樣式和地區之后，右下方即可以下載SVG、HTML、Image格式的圖，十分方便。點擊“Generate Ppxel Map”還可以轉化為像素圓點形式的地圖。
如果需要省份的地圖，網站上無法直接下載，但可以要先下載中國svg地圖，然后再打開svg選擇自己需要的省份模塊就可以了。
另外，在使用地圖的時候，要注意正確用圖，規范用圖。要有國家版圖意識，符合測繪法。
標準地圖可以參考國家自然資源局提供的標準地圖服務，服務網址：http://bzdt.ch.mnr.gov.cn/index.html
Chart - 圖表插件
https://github.com/pavelkuligin/chart
這個插件是收費的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。優勢在于可以在Sketch中創建包含隨機、表格或者JSON數據的圖表。圖表樣式也是非常的豐富了。
△來源Chart官網
-END--
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這是目錄：
一、數據大屏與數據可視化
二、大廠的可視化服務
三、技術開源庫
四、設計輔助工具
一、數據大屏與數據可視化
數據可視化是目前對數據展示最常用的方式。數據的可視化設計有助于將復雜的數據用最易理解的方式展示在用戶的面前。
數據可視化在中后臺的設計中很常見，通常主要用于分析和決策，對實時性要求不高，從一部分功能上講，其實也有著報告數據的作用。設計以2D平面展示為主，幾乎不會有3D設計出現，視覺設計重點更注重簡單直接，一目了然。
△來源 dribbble 作者wuze，侵刪
△來源 dribbble 作者William Chen，侵刪
關于制作數據大屏的一點小建議：
△來源Suger官網
△來源Suger編輯平臺
△2018天貓雙11大屏
△DataV平臺創建編輯界面
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Sketch是設計人員的首選選擇
用Marvel構建頁面非常簡單
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
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咨詢、用戶體驗公司、軟件界面設計公司
簡單講，新擬態是一種圖形樣式，其原理是為界面的UI元素賦予真實感。
其實他也是算擬物風格的一種，只不過表現形式不一樣，最早出現在追波上，從2020年慢慢被大家熟知，討論，重視起來。暫且不論是不是未來的必然趨勢之一，一個事物的興起多少是有些道理，我們持辯證的眼光去看到，去學習、去了解便好。
原生名詞有幾個叫法，Neumorphism / soft ui，翻譯過來叫新擬態或者是軟ui。其實按照我們國內的翻譯應該叫，新擬物風格。Neumorphism，是New +Skeuomorphism的組合詞。
地球是圓的，很多事情總是輪回的，原理是不變的，只不過是換了一種表達方式出現在我們的面前，在了解新擬物之前，先簡單說下UI整個風格的發展歷史，
說起ui設計風格不得不說起我們喬老爺子了，在2007時候年最早的iphone手機的手機界面就是擬物風格的，那時候覺得怎么會有那么好看的界面，設置圖標的齒輪，閱讀器的書架，以前的youtube圖標還是一個小小的電視，從而掀起一波擬物圖標風格流行趨勢。
說起擬物風格，不得不提一下當年的擬物大神——MIke，當時在追波掀起一波轟動，在國內也迎來一陣臨摹潮，我還記得那時候我還臨摹過下面那只鋼筆，還有那個馬卡龍蛋糕，都是滿滿的回憶。對于當時MIke大神作品，用現在話說，奈何沒文化，一句臥槽走天下... ...
到了2014年，蘋果對界面進行了“扁平化”處理，以使外觀更簡單，同時又使其用戶易于理解。一直到今天扁平化設計風格仍然是UI設計的標準。
其實最早最早將扁平化風格設計運用在產品中的公司是微軟。他在Windows 8系統使用扁平化設計語言，但是Windows 8一直飽受爭議，但是反響并沒有很好。
Window 8平面設計示例
還是從追波說起，這一切的開始是源于在2019年11月05日的在Dribbble-Alexander Plyuto發布的作品，獲得了26W+的瀏覽，4400個贊，以及1800個收藏。以后在Dribbble上便成為流行，在探索更多的可能性。
再說新擬態有什么特點之前，我們先看幾個比較典型代表的視覺作品，以便于更好的了解這一風格
我們看下上面的一些視覺作品，第一眼看到比較明顯的是，在一些可點擊區域做了一些“浮雕”效果，點擊狀態和非點擊狀態，在視覺處理上是未選中狀態是凸出來的，已經選中狀態是凹進去的，但顯然凹凸之間是有很多質感細節處理的，等下再實操組件部分會講解到。
左上角亮色投影，右下角深色投影（有且只有一個光源照射）
元素與背景對比度比較弱
常常用于按鈕組件和卡片
按鈕狀態，視覺上凸出代表未選中，凹進去表示已選中狀態
1.有且只有一個光源照射
那作者在追波上按鈕也好還是卡片處理也好，仔細觀察不難發現，它定了一個光源，是從左上向右下照射的，所以，越靠近光源的部分，越亮，遠離光源的越暗（素描的繪畫時常常用到）。因為新擬態的光源是唯一的，是從左上角照射的，所以就不難解釋，或者分析得到，左上角亮色投影，右下角深色投影。這一基礎規律，不單單適用于新擬態風格的按鈕，它還適用于所有新擬態風格表現手法的視覺組件。
可以看到下圖，卡片、轉盤、按鈕，他們的受光面都是在左上角。
這里就要講一下，另一個叫法了soft ui，即軟ui。軟，有柔和的意思。為什么這么命名呢？其實就是由于新擬態的組件與背景的對比度很弱，我把收集到的幾千張素材中，挑選一部分進行進行色值對比，可以發現無論是亮色模式下和暗色模式下對比度都是很低的。
按鈕、投影、背景之間的關系都處理的非常柔和，這是新擬態的特征之一
素材庫
基于這一點，其實我們只要建立好卡片的和按鈕的樣式組件，新擬態在設計層的表現就可以高效率的實現，可能稍微麻煩的就是，在一些質感細節上做一些優化，前面也說到，新擬態是一種無紋理的擬物風。所以想要表現卡片/按鈕的質感，在光影、厚度細節上，需要做更多的細節處理。
比如卡片的厚度感細節的處理，為了體現銀行卡的厚度感，在卡片增加了一個對角漸變描邊，從漸變色塊可以看到，漸變的規律，也是遵循“有且有個光源”定義的，靠近光源的是純白，近暗色投影端是比投影更重的一點的描邊色。
這樣做的好處不單單是為了體現卡片的厚度，因為我們前面講到，新擬態是軟ui，是對比很弱的。風格柔和帶來的另個一個不太好的就是，界面清晰度不夠，很容易把視覺處理“糊掉”。所以，增加對角漸變描邊在一定程度上也起到了，讓界面的視覺層級更加清新的作用。在實操部分，將會一一拆解各種情況的一些處理方式。
在新擬態中，視覺上凸出代表未選中，凹進去表示已選中狀態。是大部分人的處理方式，在這一小節里，先討論大部分的，在實操部分在列舉其他的處理手法。
這里可以明顯感受到，按鈕狀態的區別，凸出/懸浮的是沒有選中狀態，凹陷下去的是選中狀態。
細節觀察，新擬態風格，在按鈕上面的元素是做了內陰影處理的，看起來有一點點雕刻的感覺，
在選中狀態按鈕的處理，首先是在光源的處理上是統一的，加上光影的處理，就很容易做出來凹進去的感覺，想要是凹槽的厚度感、質感看起來更加舒服，這里的處理方式和卡片的處理方式原理一樣，添加漸變描邊就可以解決。
這里影響新擬態界面的可見性，主要有兩個因素，一個是可見性，另一個就是視覺層級關系。
識別度
前面我們說到，新擬態的的一個設計風格特點，就是低對比，弱對比。帶來界面柔和一面的同時，在視覺層上，也會很容易出現界面”糊掉“的一些情況，這樣就非常不利于信息的傳遞。試想，一個頁面從色調、按鈕、布局、交互上都很好，但是，就是看不清哪跟哪兒（識別度），那設計出來的東西是沒辦法落地的，頂多是個好看的花瓶。
所以，在設計新擬態風格的時候，需要格外的注意界面的識別度。但同時也要注意，界面的投影不能太重，如果太重，界面就很容易顯得“臟”。
那么，前面講到的，卡片厚度的塑造方法（增加漸變外描邊）可以在一定程度上提高界面的識別度，提高信息的傳遞。
因為新擬態風格的基礎原理是依托光影關系來塑造的，那在很多樣式組件界面中，就會產生很多懸浮或者下凹的投影，那么在很多時候是很難區分視覺層級關系的，用戶在看到這樣的界面的時候，第一時間會覺得頁面很“滿”，用戶就無從下手。
所以在做新擬態設計風格時候，一定要學會“視覺降噪”，需要避免整個頁面都很滿，最重要的是克制。
那前面說到可見性和視覺層級，這兩點是易用性原則里面的基礎組成部分，如果基礎組成部分都沒有得到很好的解決的話，那產品的易用性就無從談起。能用、好用的產品是前提，美感是對產品易用性的補充，能用、好用才是核心。
所以在設計新擬態風格的時候，對頁面的信息層級細分要求更高，對這個頁面的節奏處理需要更細膩，對用戶體驗的理解需要更加徹底，在商業與交互層面的持衡中，需要考慮的層面有多一個比較關鍵維度的考量——可見性
那么當我們可以處理好頁面元素之間的關系，也滿足易用性基本原則的時候，新擬態帶來的局限性將會變得不那么重要。
針對前面我們說到新擬態的一些特點，一些局限，目前比較適合以下兩個大類產品。
工具類的APP內容相對固定，不需要時時更新，這樣設計師在視覺風格方面的表達空間更大一些。在追波上，發現大部分的作品都是偏工具類的
和工具類APP一樣，這些類頁面上運營性質的東西相對較少，內容的形式相對可控。
那么，大家最關心的問題來了，新擬態到底是不是2020年即將要流行的設計風格？相信 大家最近這段時間多多少少也看過很多關于新擬態一些介紹，在趨勢文章里面或者在其他文章里面看到。
首先必須得中肯的說，像大多數設計趨勢一樣，新擬態是設計用戶界面的一種看起來視覺比較新穎的表現手法，讓產品界面看起來既柔軟又方便，但是它也存在一些局限，前面我們也提到一些，比如它實現起來還是有一點難度，也不夠靈活等等
但是我說一點不同的是，這也是我一直認為的一點，就是UI設計運營化，運營設計游戲化，這是未來的趨勢。
反觀我們APP的主要生力軍，90、00這一批人，其實他們就是互聯網的原住民，他們就是在這注重交互，注重游戲化體驗的大環境出生的，成長起來的，所以他們對這些東西是非常了解的，他們也能接受這種游戲ui，這種寫實的東西，包括現在的這種體驗。
當然，趨勢不是我們預測的，因為只要蘋果出一個新的設計風格，那個風格就會是成為新的設計趨勢，目前來看，這是必然的。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 原創：木七設設計坊
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
團隊按領域分組收集素材
我們認為影響設計趨勢的因素主要有以下三個：
新冠疫情的持續除了改變了大眾的生活習慣外，也意外地推動了各行業加速線上化轉型、提供「無接觸」服務，出行上的限制催生了游戲等線上娛樂市場的蓬勃勢態，甚至一定程度上疫情也影響了社會和經濟格局，導致了一些新政策的出臺。
新生代的崛起導致了流行風格的一系列變化：二次元等亞文化成功破圈進入主流消費市場、復古設計的重心從 90 年代向千禧年偏移。他們以更開放多元的思維方式和新視角，影響著下一個 10 年設計題材的選擇。
近年來智能設備的性能上限不斷被刷新，誕生了許多創新的設備形態，使更生動的交互體驗成為可能，另一方面，AR/VR 技術經過上一個十年的雕琢，性能和效果逐步得到驗證，具備了量產的技術沉淀，將迎來一波商用普及的浪潮。
「 酸性平面」風格融合「Y2K」美學的未來感，形成了獨特的「未來酸性金屬風」，典型特征有：
酸性漸變：一種會引起不適但足夠刺激的迷幻漸變色。這類配色打破了傳統美感的標準，追求感官刺激，給人異次元下致幻而不安的感受。
金屬感：以熔融形態在環境光下呈現出詭秘的反射，這種反常規的液態質感所帶來的違和，在傳統科技感上增添了幾分神秘。
未來酸性金屬風反差感兼具未來感的特征，決定了它在時尚、音樂、潮流以及藝術圈有很好的延展性。服裝鞋包、藝術家創作，以及傳達個性自我的品牌平面廣告，都可以看到其身影。
The Future Vision of Microsoft 365 宣傳視頻
隨著產品硬件性能的不斷升級，設計語言也開始追求真實感。相比過去，「類玻璃柔光材質」除了更注重「輕」的概念，在質感上也呈現出更加輕盈、細膩以及自然的趨勢。
類玻璃材質的表面呈現微磨砂感的半透明質感，透光而不透視，通過清晰的邊緣來強化物理質感，兩者對比呈現出一種「虛實結合」的美感。該材質多以輕薄的片狀形態懸浮于場景中，減輕重量感以帶來輕盈的視覺感受。
「類玻璃柔光材質」輕盈與通透的視覺感受，能營造出未來感十足的場景，很適合闡述科技智能的概念。因此該風格成為了一大波科技背景公司的設計首選，其中主要以硬件系統以及B端、工具類的產品為主，應用場景包括界面設計、推廣視頻等。
Louis Vuitton × League of Legends Collection
近年來，品牌跨界合作的對象不再局限于品牌之間或明星名流，眾多服裝、奢侈品、數碼產品等消費市場的強勢品牌紛紛向游戲和二次元等虛擬 IP 拋出跨次元合作的橄欖枝。這種合作方式成就了「三次元」品牌與「二次元」IP 的雙贏局勢，將在 2021 年繼續發展并造成更廣泛的影響。
游戲和二次元元素大熱，手機、化妝品、服裝等產品通過結合該類元素，以新的形式吸引年輕用戶：為像素風格的游戲設計服裝、為全息的虛擬偶像捏臉塑形、為動漫人物拍攝雜志封面、在一款電子游戲里搭建新品發布會等，相應地，跨界應用對設計師的涉獵領域和技術跨度也有了更高的要求。
一線頂尖奢侈品品牌相比以往與動漫游戲類二次元 IP 合作更頻繁，除了經典動漫，也不乏新鮮的熱度 IP。
在《Evangelion 新世紀福音戰士》25 周年，OPPO聯名這部影響一代人的動畫神作，推出了一款從快遞包裝、外盒甚至是卡針，里里外外都深度融合 EVA 元素的聯名機型。
OPPO × EVA 定制版手機 OPPO Ace2
美國說唱歌手 Travis Scott 2020 年在《堡壘之夜》（一款線上競技游戲）中辦了一場虛擬演唱會。這場演唱會共吸引了 1230 萬玩家同時在線觀看。
Travis Scott 在網絡游戲《堡壘之夜》內舉辦虛擬演唱會
Photographed by Sean Thomas, Vogue, January 2020
「親生命性設計」原為建筑和空間設計中的概念，意為「運用天然材料、自然光和植物創造令人愉悅舒適的建筑環境」。受城市化進程加劇及全球疫情的影響，人們渴望親近自然的欲望和需求變得越來越強。產品和自然元素彼此交融，從主客體關系轉為互相依賴的存在，以更為和諧與自然的交互方式與用戶進行溝通與連接。
自然元素將在不同感知維度以更貼近真實自然的方式融入各個領域的設計，比如在工業產品設計中使用更加貼近自然物體的表面肌理，在建筑設計中將人造空間作為自然空間的延伸，在數字產品設計中使用更擬真的自然音效和光照等等。
2021 時尚界不約而同地強調了自然元素的使用和對環境保護的呼吁，各大品牌都用自己的方式演繹了「自然共生」的服裝設計系列。
還原自然界中的真實材質成為了新的設計靈感，被應用到各種設計中。
Vivo OriginOs
山水 Mountains & Rivers by Particle (Gao Yang)
近年，國人的文化自信逐漸增強，國家擴大內需、擴大消費的政策導向為國內消費品品牌帶來了巨大的機會。「中國設計」的標簽已經成為新一代的時尚潮流，帶有中國本土個性、體現中式美學的設計受到更多品牌的青睞。
越來越多中國品牌開始注重漢字 Logo 的使用和設計，更多現代設計力求為中式美學擺脫民俗、皇家的刻板印象，木、石、竹這些蘊含中式精神內核的元素成為了工業設計、建筑設計中新的繆斯。
隨著中國的國際影響力進一步擴大，國際品牌也會提高對中國市場與文化的關注，在設計上融入更多本土元素。
各品類的國產品牌在包裝或產品設計上通過對中國元素的運用來塑造具有特色的國風產品。
可口可樂中國與漢字文化推廣機構「好字在」和方正字庫聯合推出的這款字體，反映了可口可樂對中國文化的深入理解和對本地化運營的關注度。
可口可樂聯合推出的中文字體「在乎體」
同仁堂旗下「知嘛健康」在北京開設線下體驗店，店鋪設計提煉漢字、中藥、藥房等中式元素作為靈感，用現代化的方式呈現，是極具現代感的「中式」空間設計。
同仁堂旗下「知嘛健康」線下體驗店 by 無象空間建筑
Microsoft Haptic PIVOT 微軟腕帶觸覺設備
在增強現實中，人機交互將更多發生在物理空間里，虛擬的數字信息將借助形變和震動被模擬為觸感。得益于新型傳感器的拓展應用，硬件設備實現了對溫度、形態、力量的數據監測，同時各大硬件廠商也逐步對震動馬達等硬件進行了完善升級，從而為進一步的觸覺模態設計提供了支持。
涉及領域除了現有的游戲、駕駛、健身等場景外，更有趨勢被應用于創新教育、操作培訓及有風險的試驗演練中。
任天堂在健身環 Ring-Con 內加入的力學傳感器實現了對力量（張力、拉力、壓力等）的監測，并利用 Joy-con 震動來對用戶動作的標準性進行反饋提示。
《健身環大冒險》on Switch
微軟研發部開發出了一套 Haptic PIVOT 腕戴觸感反饋方案，通過活動的機械結構，更逼真地模擬出物體的握持感。
Haptic PIVOT 使用演示
索尼推出配備了音圈馬達的 PS5 DualSense 無線手柄，扳機鍵內增加了一個由電機驅動的齒輪，通過震動模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。
PS5 DualSense 無線手柄使用演示
Flight Booking AR application by Bala GN
現實生活中，人與人、人與物接觸產生的實體服務稱為線下服務，由網絡等技術支撐的人與硬件設備交互的服務稱為線上服務。在硬件設備、網絡技術成熟的當今社會，線下服務向線上服務遷移的過程中融入了更多 AR/VR 等虛擬服務，也帶來更多新的設計行為和交互方式。
原本需要親臨現場才能完成的體驗，現在可以通過線上的方式實現，這不僅體現在因疫情催化產生的線上辦公、線上畢業展等強需求場景，也在購物、試衣、健身等更貼近生活的領域應用。
用戶在 Gucci APP 上挑選自己喜歡的手表后，將手機攝像頭對準手腕，就會顯示「試戴」效果。
Gucci APP 虛擬試表
各大院校畢業展因疫情無法在線下舉行，一些學校通過線上展廳的方式，讓學生的畢業作品可以通過網絡瀏覽。
中央美術學院 云端美院
香港理工大學 polyudesignshow
Balenciaga 2020 年用一款電子游戲代替了線下時裝發布會。在視頻游戲中，玩家能夠在五個主題場景中欣賞到 2021 秋季系列的新款服飾。
Balenciaga：《后世：明日世界》
硬件設備的創新使線上健身指導有了更合理的使用場景和更人性化的體驗，用戶通過線上內容和服務在家也可以獲得接近健身房的體驗。
Tempo Studio：家庭智能健身設備
POPMART 泡泡瑪特
「情感療愈」是一種有溫度，無攻擊性，注重細節的設計方向。這類設計旨在治愈修補心靈中的創傷，不只注重功能的完善，也更在意情感內涵的打磨。它也可以幫助人們敞開心胸，接納自己內在的所有面。
在產品設計中，一些撫慰人心的小功能、小彩蛋往往帶有著治愈人心的力量。在角色形象上，柔軟、可愛的造型在帶給人無攻擊感的同時強調著陪伴的意義。在娛樂領域，也出現不一味強迫用戶達成某個目的慢節奏「佛系」游戲。
網易云音樂來自「張開雙臂擁抱別人」動作靈感的抱一抱彩蛋，讓原本只有文字點贊的評論區更有溫度。
網易云音樂的「抱一抱」動效
Switch 游戲《動物森友會》在 2020 年異常火爆，歸功于其萌系治愈的風格和追求自然隨性的生活方式，也讓疫情期間的玩家們暫時逃離嚴峻緊張的現實生活。
Switch：《集合啦！動物森友會》
盲盒的精神內核是「收集、陪伴、治愈」，泡泡瑪特簽約的 IP 形象，大多以可愛、萌系為主。
泡泡瑪特的盲盒萌系 IP 形象
Disney 與 Pixar 出品的動畫電影《心靈奇旅》用輕松的方式探討生活的意義和人生的價值，電影用它獨特的美術風格和感人的故事斬獲超高的口碑和評分。
Disney · Pixar《心靈奇旅》
OceanPlastic 廢棄塑料重造
2020 年世界各地重大自然災害頻發，環境污染嚴重，刺激著人類對生活環境的審視。更多品牌開始探索材料再利用的可能性，從自然衍生產物出發，從而降低對大自然的破壞。年輕一代對于再創造產品有更高的接受度，循環材料轉化為塑料顆粒，組合成獨一無二的花紋和肌理，給人專屬限量感，再生材料成為新的流行元素。
消費者將繼續青睞和衛生健康、環境保護相關的價值品牌，越來越多的快消、包裝廠商開始研究材料回溯，組建相關部門，加入循環經濟浪潮中。
運動品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設計感的產品，在宣傳品牌環保意識的同時也引領了再生產品的潮流。
adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯名產品
同樣使用了廢棄材料的 adidas 球衣
Nike 將生產車間加工過程中產生的邊角料轉化為產品設計的主要材料
由 99% 廢棄奶茶杯+ 1% 廢棄原茶渣再生而成的「真垃圾·手機殼」
TRASHAUS 真垃圾再生手機殼
Freitag 的 2020 新款 F601 MALCOLM 是一款個性化背包，用一塊再生的防水油布保護，并由用空PET瓶制成的防水織物制成。
F601 MALCOLM
除消費產品外，肯德基的可回重復利用餐盤、星巴克倡導的紙質吸管、外賣行業各公司的環保舉措等也體現了餐飲外賣行業對循環經濟的重視。
結語
無論是后疫情時代世界的變化、新技術的發明應用或是國際社會環境的走向，都會影響大眾的生活習慣、行為方式和審美取向，同時也決定了未來設計的發展方向。但這其中不變的，是軟硬件發展不斷突破視覺表現的上限、設計師追求「以人為本」的核心理念以及通過設計去提出和解決問題的目標。
我們期待著上述預測性的分析能在今年的設計中被驗證。但設計本身是一個迸發新奇創意的過程，也希望上述的設計趨勢能激發設計師們更豐富的靈感、為設計領域提供更多的可能性。
新的一年，在「變化」與「希望」的新主題下，我們一同加油！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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）公共組件是否正確
公共組件調用正確，好處就是公共產品的整體視覺風格是一致的，比如頁面的側邊導航，搜索場景、詳情頁場景布局是否一致，在斷網或者報錯的場景中出現提醒條樣式是否一致。可進行交互的按鈕樣式、交互狀態的按鈕是否一致等等。
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咨詢、用戶體驗公司、軟件界面設計公司
在色彩方面，雖然UI是一個相對獨立的設計環境，但其實一直是在跟隨平面的趨勢。
年初潘通發布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標。
但是潘通流行色更多是表現了一種當下的社會情緒與遠景追求，并不是用來指導設計的。
(圖片來源：Dribbble)
在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設計師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩定了下來，這個世界的確需要設計來對情緒進行即時表達，在5月份Google的全新Material You設計語言中，這種低飽和色彩也被發揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續發展！
有關Material You信息可以看一下我的另一篇文章《Material You 為你而來！》
(圖片來源：Google Material You)
(圖片來源：Dribbble)
圖形方面，亮點在3D！毫無疑問3D插畫在2021上半年繼續著他的強勁勢頭，2021上半年涌現出了大量優秀的3D風格插畫，并且不止是3D卡通人物，在產品渲染和背景展現上也在醞釀新的力量。特別說明的是，設計工具的高速發展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。
(值得關注的3款新興3D軟件)
在2D圖形方面，也有突破，除了傳統的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規則形都會大量的出現在UI設計中，UI設計越來越開放和放得開了！
(圖片來源：Google Material You)
隨著去年底蘋果BigSur操作系統的發布，3D圖標著實火了一段時間，出現了不少3D風格圖標。但是后來大家發現在圖標在2D層面其實還是很有創新點的，并且也更加實用，所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標，看起來清新自然，一經亮相就讓設計師們喜歡起來了！
(圖片來源：Dribbble)
但無論是3D風格還是磨砂玻璃風格圖標設計，從某種意義上說，這些都是擬物化設計的一種新的回歸方式，設計就是一個圈哪！
排版設計，塊狀與字體成為了關鍵詞。先看幾個作品，你發現了什么了嗎？
(圖片來源：Dribbble)
UI設計的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準確且優雅！從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代，陰影設計幾乎已經退出了當下的主流設計，所以在信息的區分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！
(UI排版的三個趨勢)
最后我們說說行業趨勢方面，在2021上半年的UI設計作品中，除了常規的移動端APP UI設計之外，我們更多看到了一些針對于其他設備的UI設計，比如說電腦B端應用、車載HMI、數據可視化、交互動畫等這樣的新端趨勢，并且這些作品的數量越來越多了，所以從行業趨勢來講，UI設計師們還是要打開更多的眼界和格局，設計的競爭不止是在水平能力上，更重要的是行業賽道的選擇！關注趨勢尤為重要！
(圖片來源：Dribbble)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
認知負荷是完成一項任務所需的精神努力總量。您可以將其視為用戶與產品交互所需的處理能力。如果需要處理的信息超出了用戶的處理能力，那么認知負荷就太高了。
造成用戶認知負荷的的原因大多都是，產品在交互和視覺上過于復雜，設計的統一性不夠，導致用戶在使用時不斷進行思考無法形成習慣
例如移動端中的空狀態，目的是為了引導用戶完成任務，在設計時無論是文案展示與視覺表現都應簡單明了、層次分明、視覺統一
用戶獲得的初始信息會影響后續的判斷，用戶對某件事做出判斷時，會不自覺的將開始看到的信息作為衡量標準。
在日常生活中錨點效應非常常見，例如平常不帶帽子，偶爾帶帽子出門的你，走在大街上會發現挺多人都有帶帽子，因為心理活動是把帶帽子這件事作為起始衡量，而你刻意的在尋找與帽子產生共鳴的事
在產品設計中最典型的就是會員體系，例如某視頻平臺的會員價格默認選中的那一欄會比其他的價格低，那么用戶在使用時心理會默認這是會員的價格，相對應其他更高的價格只是作為衡量這個最低價格而存在
又稱對比效應，指人們對兩個不相上下的選項進行選擇時,因為第三個新選項(誘餌)的加入,會使某個舊選項顯得更有吸引力，通過對比誘導人購買商家想讓他購買的商品。
有一位著名的行為經濟學家他叫丹·艾瑞里教授，他曾經做過一本《經濟學人》雜志的定價策略，這里不細講感興趣的可以搜一下。誘餌效應運用最多的是在超市場景，我們經常看到超市的貨架上會有看起來很實惠的物品在，如一袋泡面可能是5元，而旁邊還有3包泡面一起出售可能也就12元，然后開心的拿走了，這就是誘餌效應，那一袋5元的就是誘餌，商家的目的就是為了讓你買走12元的
而在線上產品策略中運用最多的則是電商場景，如下圖中的圖書商品，單價610元，定價980元，三件單價488元，這里的單價和定價都是誘餌，目的是為了讓用戶同時購買三件商品，而用戶內心是欣然接受因為更劃算
在檢查所有可能的結果時，我們傾向于關注一些看起來合理且熟悉的事物，從而忽略了其他結果。
13年9月twitter公司宣布IPO，當時11月份才開始交易，但是在這兩個月時間里有一家名為twweeter的公司三天內漲了13倍，只是在名字上與推特公司極為相似，但實際業務毫無關系，機構就是利用用戶的注意偏差讓不了解實際情況的投資者只看到相關性，而另一面的不相關的結果用戶自然的忽視掉
在產品設計的客服助手中，就屬于注意偏差，我們習慣的認為向客服回復人工等關鍵字時，會自動切換人工客服，而產品則會設置一些虛擬的智能客服來節省成本，而用戶在這個過程中則忽略了細節，誤以為智能客服是人工客服
前蘇聯前蘇聯心理學家菜斯托夫提出特殊事物才易被人牢記。也就是說，有個性的人、與眾不同設計得商品、不尋常的事情，都會讓人留下更深的印象。
生活中我們很難記住某個點或某件事，但是當這件事足夠突出擁有獨特的個性我們便會深深印在腦海里，比如一串字符ezol4tpmb，我們最容易記住的是4，因為他是唯一的數字，在比如說讓你去記憶國內某些城市的特點，如西安、開封、浙江我們想到的就是秦皇陵、包青天、西湖等著名具有特征的地點，因為這些事物比較特殊更容易被記住
在品牌設計中菜斯托夫效應運用的比較廣泛，如何通過視覺的表現讓用戶對產品更加的印象深刻，對此就衍生出產品IP、品牌符號這種具有特殊意義的標識便于加強產品印象
任意一點移動到目標點的時間與該目標點的距離和大小有關，距離越遠時間越長，目標越大時間越短，公式：
T = a + b log2(D/W+1)
在交互設計中經常用到此定律，無論是正向還是逆向此定律都能夠很好的運用到交互中，如mac系統上的關閉按鈕，始終在左上角并且很小，我們的鼠標在右側，移動到左側上角時間會隨之變長，因此這一交互結構就避免了用戶誤操作關閉軟件
再例如移動端中會把重要的按鈕操作放置在屏幕右下或者居下，因為大多數人是右手使用手機，因此在使用時右手拇指距離點擊區域會更近
幸存者偏差是指把一些事的不同角度的人員篩選出來，篩選出一部分人進行采訪從而制造輿論，觀察者只能看到事物的一面，而另一面則被忽略，也被稱為以偏概全
某次春節記者采訪到一些在火車上的群眾，聊一些購票的過程以及買到票的心理感受，最后向公眾公布出今年回家的票大家都買到了，但這個過程中卻忽略了那些不在車上或者沒買到票的人們，因此就以偏概全的傳輸單方面信息，這些被采訪到的人們就是幸存者
在做產品時經常會聽到用戶畫像這個詞，用戶畫像就是利用幸存者偏差而把廣大的用戶數據通過典例呈現，當然這個幸存者的樣本必須是壓倒性的龐大，否則就掉入幸存者偏差的陷阱
彼此靠近或接近的對象往往會組合在一起，相近的元素可以建立關系，人們會不自然的把相近的元素看作一個整體。
在UI設計中，經常會用到鄰近法則進行設計，如一些組件、卡片的建立，由不同的元素組成變成一個整體，其次鄰近法則能夠有效的用戶層級的劃分，如下圖中的一些卡片、icon進行規律的排布最后組成一個整體，與上下模塊的層級有效的區分
特斯勒定律又稱復雜性守恒定律，他指出對于任何系統都存在一定的復雜度并且是無法避免的，問題是誰來處理它。
在任何產品設計中無論是功能還是流程都存在一定的復雜度，依據特斯勒定律有些復雜度是無法避免的，那么需要我們在設計中去解決這些問題，保證在用戶的角度來看它是合理的簡單的
像我們常見的話題功能，輸入#自動引導出關鍵詞供用戶填寫省去用戶輸入時間，再例如b站的一鍵三連，長按點贊的同時會把收藏、打賞功能一并完成；結構層面也會用到此定律如產品中的設置頁面，按照不同的維度進行區分如系統維度、反饋維度、功能維度幫助用戶更快的完成操作
它是由意大利經濟學家帕累托提出，它指出對于許多事件，大約80%的影響來自20%的原因
在設計中我們會發現一個產品頁面有幾十上百個，對于用戶而言能夠提供價值的可能也就那么幾個功能頁面，這幾個頁面可能占總產品的20%左右，那么我們在做優化的時候則需要去考慮如果把20%做好把它的價值放大
再往細了說，例如打車軟件在這個頁面中能夠為用戶提供核心價值的區域則是地圖區域和選擇目的地區域，那么在做優化體驗時應當著重關注此區域，而頁面中剩下的區域則受上面20%的影響
社會證明是用戶用來確定行為方式的便捷捷徑，當他們不確定目標時，他們最有可能認為并接受他人的行為是正確的，人數越多，行動似乎越合理。
最近抖音在評論區新增了一個踩一下與點贊進行互補，但是奇怪的是我們進行踩一下時并不會展示具體數量，試想一下當點贊的數量大于踩一下的時候，我們有時就會被影響認為這條評論值得點贊
再例如購物中的評論排序，像京東把好評優先展示在前面，當好評的數量大于其他維度時就會影響用戶判斷，用戶會把數量多的好評當作參考依據認定這個商品符合自己的需求
指用戶知道的內容與他們想要或需要知道的內容之間的空間，這個空間叫做差距，差距會導致痛苦，要消除痛苦，用戶需要填補知識差距。
例如在做產品設計中都會涉及到登錄注冊流程，那么對于有些產品則需要在登錄注冊階段大量收集用戶信息完成更好的推薦策略，但對于用戶而言用戶的認知是固有的流程，如填完手機號就收到驗證碼，最后完成注冊進入首頁，如果說中間的過程需要收集用戶信息，則需要對應的解決方案來彌補用戶的心理差距
即可App在收集用戶信息的階段使用了偏趣味性的一些設計表現，在用戶的這個空間差里面來緩解用戶的情緒，激起用戶填寫欲望
心智模型是對某人關于事物在現實世界中如何運作的思考過程的解釋，它是對周圍世界的表示，可能準確或不準確，用戶認為他們對您的產品的了解會改變他們使用產品的方式。
心智模型其實就是我們對未來發展的預測，內心對要發生的事情進行預判，然后采取行動，例如我們要購物想到的就是淘寶、京東，想到吃飯可能就是美團、餓了么，這些產品就打入了用戶的心智。往細了說心智模型是一個廣泛的概念，它還包括行為模型、實現模型、表現模型
像我們常用的聊天軟件，在聊天過程中撤回消息，就會有個重新編輯功能，這就是滿足用戶的心智模型，預判用戶的操作例如微信、釘釘、飛書
擬態是在頁面中模仿現實世界物品，通過它的外觀和交互模仿現實，擬物化適合用來讓用戶適應新的頁面和技術形態。
我們在做頁面時都會涉及到圖標的繪制，那么那些具有業務屬性的圖標則需要通過擬物的方式進行呈現，對于用戶能夠降低理解成本，如經典的紅包、自如的金剛區等
與群體相比，用戶對個人的關注不成比例，與大型抽象群體相比，人們更愿意同情一個單一的、可識別的人。
這個如果用逆向思維來想的話，類似于我們說的“對抗性人格”在大多數人都對一件事或事物看法一致時，出現一個不一樣的聲音，試想一下我們在刷短視頻時評論區總有那么些人與大多數人的看法不太一致，這就是奇點效應
在設計中體現最多的是等級體系和勛章體系，一方面為用戶的攀比心理，另一方面則是奇點效應，這類用戶的想法就是為什么要一樣，為什么不可以獨樹一幟。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn