上次整理了一些大廠的可視化服務(wù)平臺，平臺的優(yōu)勢顯而易見，組件化的操作，快速搭建的方式節(jié)省了很多的開發(fā)和時間成本。有興趣的戳這里：數(shù)據(jù)可視化大屏設(shè)計(jì)工具整理（上）。

對于上期的一些更正：8月28日百度Suger更新了收費(fèi)標(biāo)準(zhǔn)，也就是說現(xiàn)在百度Suger也收費(fèi)了！目前是分版本收費(fèi)，但是對新老用戶還是提供了30天的全功能試用的。

本次整理的是下半部分的內(nèi)容：

一、數(shù)據(jù)大屏與數(shù)據(jù)可視化

二、大廠的可視化服務(wù)

三、技術(shù)開源庫

四、設(shè)計(jì)輔助工具

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

三、技術(shù)開源庫

了解一些技術(shù)開源庫，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設(shè)計(jì)的可實(shí)現(xiàn)度，不然再炫酷的設(shè)計(jì)效果最終如果因?yàn)榧夹g(shù)開發(fā)能力無法實(shí)現(xiàn)也是徒勞的。

△來源Amchats官網(wǎng)

D3.js - 數(shù)據(jù)驅(qū)動的文檔

https://d3js.org/

D3js 是一個基于數(shù)據(jù)來操作文檔的JavaScript 庫，適宜用來建造各類可視化圖表。支持大型數(shù)據(jù)集和交互與動畫的動態(tài)行為。

△來源D3js官網(wǎng)

billboard.js - 簡易界面的可交互圖表庫

https://naver.github.io/billboard.js/

這是一個基于D3 V4+的JavaScript的圖表庫。可以對數(shù)據(jù)進(jìn)行視圖縮放、展示細(xì)節(jié)等交互操作。

△來源billboard官網(wǎng)

FusionCharts

https://www.fusioncharts.com/

FusionCharts提供了100多個交互式圖表和2,000多個數(shù)據(jù)驅(qū)動的地圖，對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件來方便開發(fā)快速入門。不過這款是收費(fèi)的，根據(jù)不同的使用環(huán)境定價不同。

△來源FusionCharts官網(wǎng)

四、設(shè)計(jì)輔助工具

Kitchen - 螞蟻金服官方插件

http://kitchen.alipay.com/

這是一個sketch的插件工具。主要功能如下圖。

△來源Kitchen官網(wǎng)

Iconfont 圖標(biāo)庫我比較常用，可以直接在sketch中搜索拖拽，不用再去打開網(wǎng)頁查找了。其次數(shù)據(jù)填充也比較常用，自動填充時間地址城市等挺方便的。sketch也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以sketch自帶功能為主。

另外，與可視化設(shè)計(jì)相關(guān)的就是里面的圖表生成器了。不過Kitchen當(dāng)前只有一些常規(guī)的圖表，不過勝在簡潔明了，很適合在此基礎(chǔ)上進(jìn)行二次設(shè)計(jì)。該插件還是螞蟻Ant系列的官方插件，可以自動配置符合Ant Design 規(guī)范的組件，配合公司采用的Ant系列的框架，會方便不少。

△來源Kitchen插件界面

FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具

https://fusion.design/tool

這也是一個sketch的插件工具。分為圖標(biāo)、圖表、組件、模塊和模板五大功能區(qū)。

Fusion Design作為一個開源中后臺解決方案，和Ant Design有一定類似，但也有所差別。Ant Design 是一套組件庫, Fusion Design 更像是一個組件庫生成工廠。

直接下載安裝FusionCool的話，打開sketch看到的將是一個默認(rèn)組件庫，圖表部分的種類樣式比Kitchen多了不少。而更厲害的是，你可以在Fusion Design上基于官方庫編輯改造成屬于你自己的設(shè)計(jì)系統(tǒng)，發(fā)布主題后獲得新的主題包，此時你在FusionCool中就可以看到專屬于你的主題包了，在sketch中完成設(shè)計(jì)后，開發(fā)使用Iceworks安裝你的主題庫就可以直接編碼實(shí)現(xiàn)你的設(shè)計(jì)。

△來源FusionCool插件界面

Map Generator - 快速地圖生成填充

https://github.com/eddiesigner/sketch-map-generator

這是一款基于谷歌地圖的自動填充的Sketch插件，輸入地址后就可以自動生成不同風(fēng)格樣式的地圖，個人比較喜歡第三款灰色的。

△圖為Map Gnerator生成效果

Amcharts - 矢量地圖定制下載

http://pixelmap.amcharts.com/#

這個網(wǎng)站上面提過，但其實(shí)設(shè)計(jì)師用來獲取矢量地圖也很好用，選擇地圖樣式和地區(qū)之后，右下方即可以下載SVG、HTML、Image格式的圖，十分方便。點(diǎn)擊“Generate Ppxel Map”還可以轉(zhuǎn)化為像素圓點(diǎn)形式的地圖。

如果需要省份的地圖，網(wǎng)站上無法直接下載，但可以要先下載中國svg地圖，然后再打開svg選擇自己需要的省份模塊就可以了。

另外，在使用地圖的時候，要注意正確用圖，規(guī)范用圖。要有國家版圖意識，符合測繪法。

標(biāo)準(zhǔn)地圖可以參考國家自然資源局提供的標(biāo)準(zhǔn)地圖服務(wù)，服務(wù)網(wǎng)址：http://bzdt.ch.mnr.gov.cn/index.html

Chart - 圖表插件

https://github.com/pavelkuligin/chart

這個插件是收費(fèi)的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。優(yōu)勢在于可以在Sketch中創(chuàng)建包含隨機(jī)、表格或者JSON數(shù)據(jù)的圖表。圖表樣式也是非常的豐富了。

△來源Chart官網(wǎng)

-END--

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

數(shù)據(jù)可視化是目前對數(shù)據(jù)展示最常用的方式。數(shù)據(jù)的可視化設(shè)計(jì)有助于將復(fù)雜的數(shù)據(jù)用最易理解的方式展示在用戶的面前。

數(shù)據(jù)可視化在中后臺的設(shè)計(jì)中很常見，通常主要用于分析和決策，對實(shí)時性要求不高，從一部分功能上講，其實(shí)也有著報告數(shù)據(jù)的作用。設(shè)計(jì)以2D平面展示為主，幾乎不會有3D設(shè)計(jì)出現(xiàn)，視覺設(shè)計(jì)重點(diǎn)更注重簡單直接，一目了然。

△來源 dribbble  作者wuze，侵刪

數(shù)據(jù)大屏在上面的基礎(chǔ)上，對實(shí)時性要求較高，會更強(qiáng)調(diào)數(shù)據(jù)展示的效果，這也是會流行FUI未來主義科幻風(fēng)格設(shè)計(jì)的原因，追求視覺上的酷炫效果。設(shè)計(jì)上2D、3D皆有，還可以伴隨著動效搭配一些可交互的設(shè)計(jì)，來展示數(shù)據(jù)之間聯(lián)動。 

△來源 dribbble  作者William Chen，侵刪 

關(guān)于制作數(shù)據(jù)大屏的一點(diǎn)小建議：

△來源Suger編輯平臺

△2018天貓雙11大屏 

△DataV平臺創(chuàng)建編輯界面

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

一、什么是新擬態(tài)

簡單講，新擬態(tài)是一種圖形樣式，其原理是為界面的UI元素賦予真實(shí)感。

其實(shí)他也是算擬物風(fēng)格的一種，只不過表現(xiàn)形式不一樣，最早出現(xiàn)在追波上，從2020年慢慢被大家熟知，討論，重視起來。暫且不論是不是未來的必然趨勢之一，一個事物的興起多少是有些道理，我們持辯證的眼光去看到，去學(xué)習(xí)、去了解便好。

名稱由來

原生名詞有幾個叫法，Neumorphism / soft ui，翻譯過來叫新擬態(tài)或者是軟ui。其實(shí)按照我們國內(nèi)的翻譯應(yīng)該叫，新擬物風(fēng)格。Neumorphism，是New +Skeuomorphism的組合詞。

二、設(shè)計(jì)風(fēng)格的發(fā)展歷程

地球是圓的，很多事情總是輪回的，原理是不變的，只不過是換了一種表達(dá)方式出現(xiàn)在我們的面前，在了解新擬物之前，先簡單說下UI整個風(fēng)格的發(fā)展歷史，

01.擬物風(fēng)

說起ui設(shè)計(jì)風(fēng)格不得不說起我們喬老爺子了，在2007時候年最早的iphone手機(jī)的手機(jī)界面就是擬物風(fēng)格的，那時候覺得怎么會有那么好看的界面，設(shè)置圖標(biāo)的齒輪，閱讀器的書架，以前的youtube圖標(biāo)還是一個小小的電視，從而掀起一波擬物圖標(biāo)風(fēng)格流行趨勢。

說起擬物風(fēng)格，不得不提一下當(dāng)年的擬物大神——MIke，當(dāng)時在追波掀起一波轟動，在國內(nèi)也迎來一陣臨摹潮，我還記得那時候我還臨摹過下面那只鋼筆，還有那個馬卡龍蛋糕，都是滿滿的回憶。對于當(dāng)時MIke大神作品，用現(xiàn)在話說，奈何沒文化，一句臥槽走天下... ...

02.扁平風(fēng)格

到了2014年，蘋果對界面進(jìn)行了“扁平化”處理，以使外觀更簡單，同時又使其用戶易于理解。一直到今天扁平化設(shè)計(jì)風(fēng)格仍然是UI設(shè)計(jì)的標(biāo)準(zhǔn)。

其實(shí)最早最早將扁平化風(fēng)格設(shè)計(jì)運(yùn)用在產(chǎn)品中的公司是微軟。他在Windows 8系統(tǒng)使用扁平化設(shè)計(jì)語言，但是Windows 8一直飽受爭議，但是反響并沒有很好。

                        Window 8平面設(shè)計(jì)示例

三、那么新擬態(tài)這種風(fēng)格是怎么流行起來的呢？

還是從追波說起，這一切的開始是源于在2019年11月05日的在Dribbble-Alexander Plyuto發(fā)布的作品，獲得了26W+的瀏覽，4400個贊，以及1800個收藏。以后在Dribbble上便成為流行，在探索更多的可能性。

四、新擬態(tài)它有什么特點(diǎn)

再說新擬態(tài)有什么特點(diǎn)之前，我們先看幾個比較典型代表的視覺作品，以便于更好的了解這一風(fēng)格

我們看下上面的一些視覺作品，第一眼看到比較明顯的是，在一些可點(diǎn)擊區(qū)域做了一些“浮雕”效果，點(diǎn)擊狀態(tài)和非點(diǎn)擊狀態(tài)，在視覺處理上是未選中狀態(tài)是凸出來的，已經(jīng)選中狀態(tài)是凹進(jìn)去的，但顯然凹凸之間是有很多質(zhì)感細(xì)節(jié)處理的，等下再實(shí)操組件部分會講解到。

1.通過觀察，總結(jié)新擬態(tài)設(shè)計(jì)風(fēng)格的處理方式大概有一下幾點(diǎn)

1. 左上角亮色投影，右下角深色投影（有且只有一個光源照射）

2. 元素與背景對比度比較弱

3. 常常用于按鈕組件和卡片

4. 按鈕狀態(tài)，視覺上凸出代表未選中，凹進(jìn)去表示已選中狀態(tài)

   
   

2.特點(diǎn)詳解

1.有且只有一個光源照射

那作者在追波上按鈕也好還是卡片處理也好，仔細(xì)觀察不難發(fā)現(xiàn)，它定了一個光源，是從左上向右下照射的，所以，越靠近光源的部分，越亮，遠(yuǎn)離光源的越暗（素描的繪畫時常常用到）。因?yàn)樾聰M態(tài)的光源是唯一的，是從左上角照射的，所以就不難解釋，或者分析得到，左上角亮色投影，右下角深色投影。這一基礎(chǔ)規(guī)律，不單單適用于新擬態(tài)風(fēng)格的按鈕，它還適用于所有新擬態(tài)風(fēng)格表現(xiàn)手法的視覺組件。

可以看到下圖，卡片、轉(zhuǎn)盤、按鈕，他們的受光面都是在左上角。

2.組件與背景對比度比較弱

這里就要講一下，另一個叫法了soft ui，即軟ui。軟，有柔和的意思。為什么這么命名呢？其實(shí)就是由于新擬態(tài)的組件與背景的對比度很弱，我把收集到的幾千張素材中，挑選一部分進(jìn)行進(jìn)行色值對比，可以發(fā)現(xiàn)無論是亮色模式下和暗色模式下對比度都是很低的。

按鈕、投影、背景之間的關(guān)系都處理的非常柔和，這是新擬態(tài)的特征之一

                       素材庫

3.常常用于卡片和按鈕

基于這一點(diǎn)，其實(shí)我們只要建立好卡片的和按鈕的樣式組件，新擬態(tài)在設(shè)計(jì)層的表現(xiàn)就可以高效率的實(shí)現(xiàn)，可能稍微麻煩的就是，在一些質(zhì)感細(xì)節(jié)上做一些優(yōu)化，前面也說到，新擬態(tài)是一種無紋理的擬物風(fēng)。所以想要表現(xiàn)卡片/按鈕的質(zhì)感，在光影、厚度細(xì)節(jié)上，需要做更多的細(xì)節(jié)處理。

比如卡片的厚度感細(xì)節(jié)的處理，為了體現(xiàn)銀行卡的厚度感，在卡片增加了一個對角漸變描邊，從漸變色塊可以看到，漸變的規(guī)律，也是遵循“有且有個光源”定義的，靠近光源的是純白，近暗色投影端是比投影更重的一點(diǎn)的描邊色。

這樣做的好處不單單是為了體現(xiàn)卡片的厚度，因?yàn)槲覀兦懊嬷v到，新擬態(tài)是軟ui，是對比很弱的。風(fēng)格柔和帶來的另個一個不太好的就是，界面清晰度不夠，很容易把視覺處理“糊掉”。所以，增加對角漸變描邊在一定程度上也起到了，讓界面的視覺層級更加清新的作用。在實(shí)操部分，將會一一拆解各種情況的一些處理方式。

4.按鈕狀態(tài)，視覺上凸出代表未選中，凹進(jìn)去表示已選中狀態(tài)

在新擬態(tài)中，視覺上凸出代表未選中，凹進(jìn)去表示已選中狀態(tài)。是大部分人的處理方式，在這一小節(jié)里，先討論大部分的，在實(shí)操部分在列舉其他的處理手法。

這里可以明顯感受到，按鈕狀態(tài)的區(qū)別，凸出/懸浮的是沒有選中狀態(tài)，凹陷下去的是選中狀態(tài)。

細(xì)節(jié)觀察，新擬態(tài)風(fēng)格，在按鈕上面的元素是做了內(nèi)陰影處理的，看起來有一點(diǎn)點(diǎn)雕刻的感覺，

在選中狀態(tài)按鈕的處理，首先是在光源的處理上是統(tǒng)一的，加上光影的處理，就很容易做出來凹進(jìn)去的感覺，想要是凹槽的厚度感、質(zhì)感看起來更加舒服，這里的處理方式和卡片的處理方式原理一樣，添加漸變描邊就可以解決。

五、新擬態(tài)存在的局限

1.可見性

這里影響新擬態(tài)界面的可見性，主要有兩個因素，一個是可見性，另一個就是視覺層級關(guān)系。

識別度

前面我們說到，新擬態(tài)的的一個設(shè)計(jì)風(fēng)格特點(diǎn)，就是低對比，弱對比。帶來界面柔和一面的同時，在視覺層上，也會很容易出現(xiàn)界面”糊掉“的一些情況，這樣就非常不利于信息的傳遞。試想，一個頁面從色調(diào)、按鈕、布局、交互上都很好，但是，就是看不清哪跟哪兒（識別度），那設(shè)計(jì)出來的東西是沒辦法落地的，頂多是個好看的花瓶。

所以，在設(shè)計(jì)新擬態(tài)風(fēng)格的時候，需要格外的注意界面的識別度。但同時也要注意，界面的投影不能太重，如果太重，界面就很容易顯得“臟”。

那么，前面講到的，卡片厚度的塑造方法（增加漸變外描邊）可以在一定程度上提高界面的識別度，提高信息的傳遞。

02.視覺層級關(guān)系

因?yàn)樾聰M態(tài)風(fēng)格的基礎(chǔ)原理是依托光影關(guān)系來塑造的，那在很多樣式組件界面中，就會產(chǎn)生很多懸浮或者下凹的投影，那么在很多時候是很難區(qū)分視覺層級關(guān)系的，用戶在看到這樣的界面的時候，第一時間會覺得頁面很“滿”，用戶就無從下手。

所以在做新擬態(tài)設(shè)計(jì)風(fēng)格時候，一定要學(xué)會“視覺降噪”，需要避免整個頁面都很滿，最重要的是克制。

02 易用性

那前面說到可見性和視覺層級，這兩點(diǎn)是易用性原則里面的基礎(chǔ)組成部分，如果基礎(chǔ)組成部分都沒有得到很好的解決的話，那產(chǎn)品的易用性就無從談起。能用、好用的產(chǎn)品是前提，美感是對產(chǎn)品易用性的補(bǔ)充，能用、好用才是核心。

所以在設(shè)計(jì)新擬態(tài)風(fēng)格的時候，對頁面的信息層級細(xì)分要求更高，對這個頁面的節(jié)奏處理需要更細(xì)膩，對用戶體驗(yàn)的理解需要更加徹底，在商業(yè)與交互層面的持衡中，需要考慮的層面有多一個比較關(guān)鍵維度的考量——可見性

那么當(dāng)我們可以處理好頁面元素之間的關(guān)系，也滿足易用性基本原則的時候，新擬態(tài)帶來的局限性將會變得不那么重要。

六、目前適用的一些產(chǎn)品

針對前面我們說到新擬態(tài)的一些特點(diǎn)，一些局限，目前比較適合以下兩個大類產(chǎn)品。

01.工具類。

工具類的APP內(nèi)容相對固定，不需要時時更新，這樣設(shè)計(jì)師在視覺風(fēng)格方面的表達(dá)空間更大一些。在追波上，發(fā)現(xiàn)大部分的作品都是偏工具類的

02.簡單的功能性頁面。

和工具類APP一樣，這些類頁面上運(yùn)營性質(zhì)的東西相對較少，內(nèi)容的形式相對可控。

結(jié)語

那么，大家最關(guān)心的問題來了，新擬態(tài)到底是不是2020年即將要流行的設(shè)計(jì)風(fēng)格？相信 大家最近這段時間多多少少也看過很多關(guān)于新擬態(tài)一些介紹，在趨勢文章里面或者在其他文章里面看到。

首先必須得中肯的說，像大多數(shù)設(shè)計(jì)趨勢一樣，新擬態(tài)是設(shè)計(jì)用戶界面的一種看起來視覺比較新穎的表現(xiàn)手法，讓產(chǎn)品界面看起來既柔軟又方便，但是它也存在一些局限，前面我們也提到一些，比如它實(shí)現(xiàn)起來還是有一點(diǎn)難度，也不夠靈活等等

但是我說一點(diǎn)不同的是，這也是我一直認(rèn)為的一點(diǎn)，就是UI設(shè)計(jì)運(yùn)營化，運(yùn)營設(shè)計(jì)游戲化，這是未來的趨勢。

反觀我們APP的主要生力軍，90、00這一批人，其實(shí)他們就是互聯(lián)網(wǎng)的原住民，他們就是在這注重交互，注重游戲化體驗(yàn)的大環(huán)境出生的，成長起來的，所以他們對這些東西是非常了解的，他們也能接受這種游戲ui，這種寫實(shí)的東西，包括現(xiàn)在的這種體驗(yàn)。

所以，未來的方向，是會往這個方向走的

當(dāng)然，趨勢不是我們預(yù)測的，因?yàn)橹灰O果出一個新的設(shè)計(jì)風(fēng)格，那個風(fēng)格就會是成為新的設(shè)計(jì)趨勢，目前來看，這是必然的。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 原創(chuàng)：木七設(shè)設(shè)計(jì)坊
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

團(tuán)隊(duì)按領(lǐng)域分組收集素材

我們認(rèn)為影響設(shè)計(jì)趨勢的因素主要有以下三個：

后疫情時代的影響

新冠疫情的持續(xù)除了改變了大眾的生活習(xí)慣外，也意外地推動了各行業(yè)加速線上化轉(zhuǎn)型、提供「無接觸」服務(wù)，出行上的限制催生了游戲等線上娛樂市場的蓬勃勢態(tài)，甚至一定程度上疫情也影響了社會和經(jīng)濟(jì)格局，導(dǎo)致了一些新政策的出臺。

00 后成長為新主力軍

新生代的崛起導(dǎo)致了流行風(fēng)格的一系列變化：二次元等亞文化成功破圈進(jìn)入主流消費(fèi)市場、復(fù)古設(shè)計(jì)的重心從 90 年代向千禧年偏移。他們以更開放多元的思維方式和新視角，影響著下一個 10 年設(shè)計(jì)題材的選擇。

軟硬件技術(shù)的發(fā)展

近年來智能設(shè)備的性能上限不斷被刷新，誕生了許多創(chuàng)新的設(shè)備形態(tài)，使更生動的交互體驗(yàn)成為可能，另一方面，AR/VR 技術(shù)經(jīng)過上一個十年的雕琢，性能和效果逐步得到驗(yàn)證，具備了量產(chǎn)的技術(shù)沉淀，將迎來一波商用普及的浪潮。

概念闡述

「 酸性平面」風(fēng)格融合「Y2K」美學(xué)的未來感，形成了獨(dú)特的「未來酸性金屬風(fēng)」，典型特征有：

• 酸性漸變：一種會引起不適但足夠刺激的迷幻漸變色。這類配色打破了傳統(tǒng)美感的標(biāo)準(zhǔn)，追求感官刺激，給人異次元下致幻而不安的感受。

• 金屬感：以熔融形態(tài)在環(huán)境光下呈現(xiàn)出詭秘的反射，這種反常規(guī)的液態(tài)質(zhì)感所帶來的違和，在傳統(tǒng)科技感上增添了幾分神秘。

• 透明膠質(zhì)：液體或是 PVC 半透明膠質(zhì)，配合流體動感的形態(tài)，折射出光的幻彩，給人強(qiáng)烈的亦真亦幻感受。 

應(yīng)用場景

未來酸性金屬風(fēng)反差感兼具未來感的特征，決定了它在時尚、音樂、潮流以及藝術(shù)圈有很好的延展性。服裝鞋包、藝術(shù)家創(chuàng)作，以及傳達(dá)個性自我的品牌平面廣告，都可以看到其身影。

相關(guān)案例

The Future Vision of Microsoft 365 宣傳視頻

概念闡述

隨著產(chǎn)品硬件性能的不斷升級，設(shè)計(jì)語言也開始追求真實(shí)感。相比過去，「類玻璃柔光材質(zhì)」除了更注重「輕」的概念，在質(zhì)感上也呈現(xiàn)出更加輕盈、細(xì)膩以及自然的趨勢。

類玻璃材質(zhì)的表面呈現(xiàn)微磨砂感的半透明質(zhì)感，透光而不透視，通過清晰的邊緣來強(qiáng)化物理質(zhì)感，兩者對比呈現(xiàn)出一種「虛實(shí)結(jié)合」的美感。該材質(zhì)多以輕薄的片狀形態(tài)懸浮于場景中，減輕重量感以帶來輕盈的視覺感受。

應(yīng)用場景

「類玻璃柔光材質(zhì)」輕盈與通透的視覺感受，能營造出未來感十足的場景，很適合闡述科技智能的概念。因此該風(fēng)格成為了一大波科技背景公司的設(shè)計(jì)首選，其中主要以硬件系統(tǒng)以及B端、工具類的產(chǎn)品為主，應(yīng)用場景包括界面設(shè)計(jì)、推廣視頻等。

相關(guān)案例

Louis Vuitton × League of Legends Collection

概念闡述

近年來，品牌跨界合作的對象不再局限于品牌之間或明星名流，眾多服裝、奢侈品、數(shù)碼產(chǎn)品等消費(fèi)市場的強(qiáng)勢品牌紛紛向游戲和二次元等虛擬 IP 拋出跨次元合作的橄欖枝。這種合作方式成就了「三次元」品牌與「二次元」IP 的雙贏局勢，將在 2021 年繼續(xù)發(fā)展并造成更廣泛的影響。

應(yīng)用場景

游戲和二次元元素大熱，手機(jī)、化妝品、服裝等產(chǎn)品通過結(jié)合該類元素，以新的形式吸引年輕用戶：為像素風(fēng)格的游戲設(shè)計(jì)服裝、為全息的虛擬偶像捏臉?biāo)苄巍閯勇宋锱臄z雜志封面、在一款電子游戲里搭建新品發(fā)布會等，相應(yīng)地，跨界應(yīng)用對設(shè)計(jì)師的涉獵領(lǐng)域和技術(shù)跨度也有了更高的要求。

相關(guān)案例

一線頂尖奢侈品品牌相比以往與動漫游戲類二次元 IP 合作更頻繁，除了經(jīng)典動漫，也不乏新鮮的熱度 IP。

在《Evangelion 新世紀(jì)福音戰(zhàn)士》25 周年，OPPO聯(lián)名這部影響一代人的動畫神作，推出了一款從快遞包裝、外盒甚至是卡針，里里外外都深度融合 EVA 元素的聯(lián)名機(jī)型。

OPPO × EVA 定制版手機(jī) OPPO Ace2

美國說唱歌手 Travis Scott 2020 年在《堡壘之夜》（一款線上競技游戲）中辦了一場虛擬演唱會。這場演唱會共吸引了 1230 萬玩家同時在線觀看。

Travis Scott 在網(wǎng)絡(luò)游戲《堡壘之夜》內(nèi)舉辦虛擬演唱會

Photographed by Sean Thomas, Vogue, January 2020

概念闡述

「親生命性設(shè)計(jì)」原為建筑和空間設(shè)計(jì)中的概念，意為「運(yùn)用天然材料、自然光和植物創(chuàng)造令人愉悅舒適的建筑環(huán)境」。受城市化進(jìn)程加劇及全球疫情的影響，人們渴望親近自然的欲望和需求變得越來越強(qiáng)。產(chǎn)品和自然元素彼此交融，從主客體關(guān)系轉(zhuǎn)為互相依賴的存在，以更為和諧與自然的交互方式與用戶進(jìn)行溝通與連接。

應(yīng)用場景

自然元素將在不同感知維度以更貼近真實(shí)自然的方式融入各個領(lǐng)域的設(shè)計(jì)，比如在工業(yè)產(chǎn)品設(shè)計(jì)中使用更加貼近自然物體的表面肌理，在建筑設(shè)計(jì)中將人造空間作為自然空間的延伸，在數(shù)字產(chǎn)品設(shè)計(jì)中使用更擬真的自然音效和光照等等。

相關(guān)案例：

2021 時尚界不約而同地強(qiáng)調(diào)了自然元素的使用和對環(huán)境保護(hù)的呼吁，各大品牌都用自己的方式演繹了「自然共生」的服裝設(shè)計(jì)系列。

還原自然界中的真實(shí)材質(zhì)成為了新的設(shè)計(jì)靈感，被應(yīng)用到各種設(shè)計(jì)中。

Vivo OriginOs

山水 Mountains & Rivers by Particle (Gao Yang)

概念闡述

近年，國人的文化自信逐漸增強(qiáng)，國家擴(kuò)大內(nèi)需、擴(kuò)大消費(fèi)的政策導(dǎo)向?yàn)閲鴥?nèi)消費(fèi)品品牌帶來了巨大的機(jī)會?！钢袊O(shè)計(jì)」的標(biāo)簽已經(jīng)成為新一代的時尚潮流，帶有中國本土個性、體現(xiàn)中式美學(xué)的設(shè)計(jì)受到更多品牌的青睞。

應(yīng)用場景

越來越多中國品牌開始注重漢字 Logo 的使用和設(shè)計(jì)，更多現(xiàn)代設(shè)計(jì)力求為中式美學(xué)擺脫民俗、皇家的刻板印象，木、石、竹這些蘊(yùn)含中式精神內(nèi)核的元素成為了工業(yè)設(shè)計(jì)、建筑設(shè)計(jì)中新的繆斯。

隨著中國的國際影響力進(jìn)一步擴(kuò)大，國際品牌也會提高對中國市場與文化的關(guān)注，在設(shè)計(jì)上融入更多本土元素。

相關(guān)案例

各品類的國產(chǎn)品牌在包裝或產(chǎn)品設(shè)計(jì)上通過對中國元素的運(yùn)用來塑造具有特色的國風(fēng)產(chǎn)品。

可口可樂中國與漢字文化推廣機(jī)構(gòu)「好字在」和方正字庫聯(lián)合推出的這款字體，反映了可口可樂對中國文化的深入理解和對本地化運(yùn)營的關(guān)注度。

可口可樂聯(lián)合推出的中文字體「在乎體」

同仁堂旗下「知嘛健康」在北京開設(shè)線下體驗(yàn)店，店鋪設(shè)計(jì)提煉漢字、中藥、藥房等中式元素作為靈感，用現(xiàn)代化的方式呈現(xiàn)，是極具現(xiàn)代感的「中式」空間設(shè)計(jì)。

同仁堂旗下「知嘛健康」線下體驗(yàn)店 by 無象空間建筑

Microsoft Haptic PIVOT 微軟腕帶觸覺設(shè)備

概念闡述

在增強(qiáng)現(xiàn)實(shí)中，人機(jī)交互將更多發(fā)生在物理空間里，虛擬的數(shù)字信息將借助形變和震動被模擬為觸感。得益于新型傳感器的拓展應(yīng)用，硬件設(shè)備實(shí)現(xiàn)了對溫度、形態(tài)、力量的數(shù)據(jù)監(jiān)測，同時各大硬件廠商也逐步對震動馬達(dá)等硬件進(jìn)行了完善升級，從而為進(jìn)一步的觸覺模態(tài)設(shè)計(jì)提供了支持。

應(yīng)用場景

涉及領(lǐng)域除了現(xiàn)有的游戲、駕駛、健身等場景外，更有趨勢被應(yīng)用于創(chuàng)新教育、操作培訓(xùn)及有風(fēng)險的試驗(yàn)演練中。

相關(guān)案例

任天堂在健身環(huán) Ring-Con 內(nèi)加入的力學(xué)傳感器實(shí)現(xiàn)了對力量（張力、拉力、壓力等）的監(jiān)測，并利用 Joy-con 震動來對用戶動作的標(biāo)準(zhǔn)性進(jìn)行反饋提示。

《健身環(huán)大冒險》on Switch

微軟研發(fā)部開發(fā)出了一套 Haptic PIVOT 腕戴觸感反饋方案，通過活動的機(jī)械結(jié)構(gòu)，更逼真地模擬出物體的握持感。

Haptic PIVOT 使用演示

索尼推出配備了音圈馬達(dá)的 PS5 DualSense 無線手柄，扳機(jī)鍵內(nèi)增加了一個由電機(jī)驅(qū)動的齒輪，通過震動模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。

PS5 DualSense 無線手柄使用演示

Flight Booking AR application by Bala GN

概念闡述

現(xiàn)實(shí)生活中，人與人、人與物接觸產(chǎn)生的實(shí)體服務(wù)稱為線下服務(wù)，由網(wǎng)絡(luò)等技術(shù)支撐的人與硬件設(shè)備交互的服務(wù)稱為線上服務(wù)。在硬件設(shè)備、網(wǎng)絡(luò)技術(shù)成熟的當(dāng)今社會，線下服務(wù)向線上服務(wù)遷移的過程中融入了更多 AR/VR 等虛擬服務(wù)，也帶來更多新的設(shè)計(jì)行為和交互方式。

應(yīng)用場景

原本需要親臨現(xiàn)場才能完成的體驗(yàn)，現(xiàn)在可以通過線上的方式實(shí)現(xiàn)，這不僅體現(xiàn)在因疫情催化產(chǎn)生的線上辦公、線上畢業(yè)展等強(qiáng)需求場景，也在購物、試衣、健身等更貼近生活的領(lǐng)域應(yīng)用。

相關(guān)案例

用戶在 Gucci APP 上挑選自己喜歡的手表后，將手機(jī)攝像頭對準(zhǔn)手腕，就會顯示「試戴」效果。

Gucci APP 虛擬試表

各大院校畢業(yè)展因疫情無法在線下舉行，一些學(xué)校通過線上展廳的方式，讓學(xué)生的畢業(yè)作品可以通過網(wǎng)絡(luò)瀏覽。

中央美術(shù)學(xué)院 云端美院

香港理工大學(xué) polyudesignshow

Balenciaga 2020 年用一款電子游戲代替了線下時裝發(fā)布會。在視頻游戲中，玩家能夠在五個主題場景中欣賞到 2021 秋季系列的新款服飾。

Balenciaga：《后世：明日世界》

硬件設(shè)備的創(chuàng)新使線上健身指導(dǎo)有了更合理的使用場景和更人性化的體驗(yàn)，用戶通過線上內(nèi)容和服務(wù)在家也可以獲得接近健身房的體驗(yàn)。

Tempo Studio：家庭智能健身設(shè)備

POPMART 泡泡瑪特

概念闡述

「情感療愈」是一種有溫度，無攻擊性，注重細(xì)節(jié)的設(shè)計(jì)方向。這類設(shè)計(jì)旨在治愈修補(bǔ)心靈中的創(chuàng)傷，不只注重功能的完善，也更在意情感內(nèi)涵的打磨。它也可以幫助人們敞開心胸，接納自己內(nèi)在的所有面。

應(yīng)用場景

在產(chǎn)品設(shè)計(jì)中，一些撫慰人心的小功能、小彩蛋往往帶有著治愈人心的力量。在角色形象上，柔軟、可愛的造型在帶給人無攻擊感的同時強(qiáng)調(diào)著陪伴的意義。在娛樂領(lǐng)域，也出現(xiàn)不一味強(qiáng)迫用戶達(dá)成某個目的慢節(jié)奏「佛系」游戲。

相關(guān)案例

網(wǎng)易云音樂來自「張開雙臂擁抱別人」動作靈感的抱一抱彩蛋，讓原本只有文字點(diǎn)贊的評論區(qū)更有溫度。

網(wǎng)易云音樂的「抱一抱」動效

Switch 游戲《動物森友會》在 2020 年異?；鸨瑲w功于其萌系治愈的風(fēng)格和追求自然隨性的生活方式，也讓疫情期間的玩家們暫時逃離嚴(yán)峻緊張的現(xiàn)實(shí)生活。

Switch：《集合啦！動物森友會》

盲盒的精神內(nèi)核是「收集、陪伴、治愈」，泡泡瑪特簽約的 IP 形象，大多以可愛、萌系為主。

泡泡瑪特的盲盒萌系 IP 形象

Disney 與 Pixar 出品的動畫電影《心靈奇旅》用輕松的方式探討生活的意義和人生的價值，電影用它獨(dú)特的美術(shù)風(fēng)格和感人的故事斬獲超高的口碑和評分。

Disney · Pixar《心靈奇旅》

OceanPlastic 廢棄塑料重造

概念闡述

2020 年世界各地重大自然災(zāi)害頻發(fā)，環(huán)境污染嚴(yán)重，刺激著人類對生活環(huán)境的審視。更多品牌開始探索材料再利用的可能性，從自然衍生產(chǎn)物出發(fā)，從而降低對大自然的破壞。年輕一代對于再創(chuàng)造產(chǎn)品有更高的接受度，循環(huán)材料轉(zhuǎn)化為塑料顆粒，組合成獨(dú)一無二的花紋和肌理，給人專屬限量感，再生材料成為新的流行元素。

應(yīng)用場景

消費(fèi)者將繼續(xù)青睞和衛(wèi)生健康、環(huán)境保護(hù)相關(guān)的價值品牌，越來越多的快消、包裝廠商開始研究材料回溯，組建相關(guān)部門，加入循環(huán)經(jīng)濟(jì)浪潮中。

相關(guān)案例

運(yùn)動品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設(shè)計(jì)感的產(chǎn)品，在宣傳品牌環(huán)保意識的同時也引領(lǐng)了再生產(chǎn)品的潮流。

adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯(lián)名產(chǎn)品

同樣使用了廢棄材料的 adidas 球衣

Nike 將生產(chǎn)車間加工過程中產(chǎn)生的邊角料轉(zhuǎn)化為產(chǎn)品設(shè)計(jì)的主要材料

由 99% 廢棄奶茶杯+ 1% 廢棄原茶渣再生而成的「真垃圾·手機(jī)殼」

TRASHAUS 真垃圾再生手機(jī)殼

Freitag 的 2020 新款 F601 MALCOLM 是一款個性化背包，用一塊再生的防水油布保護(hù)，并由用空PET瓶制成的防水織物制成。

F601 MALCOLM

除消費(fèi)產(chǎn)品外，肯德基的可回重復(fù)利用餐盤、星巴克倡導(dǎo)的紙質(zhì)吸管、外賣行業(yè)各公司的環(huán)保舉措等也體現(xiàn)了餐飲外賣行業(yè)對循環(huán)經(jīng)濟(jì)的重視。

結(jié)語

無論是后疫情時代世界的變化、新技術(shù)的發(fā)明應(yīng)用或是國際社會環(huán)境的走向，都會影響大眾的生活習(xí)慣、行為方式和審美取向，同時也決定了未來設(shè)計(jì)的發(fā)展方向。但這其中不變的，是軟硬件發(fā)展不斷突破視覺表現(xiàn)的上限、設(shè)計(jì)師追求「以人為本」的核心理念以及通過設(shè)計(jì)去提出和解決問題的目標(biāo)。

我們期待著上述預(yù)測性的分析能在今年的設(shè)計(jì)中被驗(yàn)證。但設(shè)計(jì)本身是一個迸發(fā)新奇創(chuàng)意的過程，也希望上述的設(shè)計(jì)趨勢能激發(fā)設(shè)計(jì)師們更豐富的靈感、為設(shè)計(jì)領(lǐng)域提供更多的可能性。

新的一年，在「變化」與「希望」的新主題下，我們一同加油！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

在色彩方面，雖然UI是一個相對獨(dú)立的設(shè)計(jì)環(huán)境，但其實(shí)一直是在跟隨平面的趨勢。

 

年初潘通發(fā)布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標(biāo)。

但是潘通流行色更多是表現(xiàn)了一種當(dāng)下的社會情緒與遠(yuǎn)景追求，并不是用來指導(dǎo)設(shè)計(jì)的。

(圖片來源：Dribbble)

在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設(shè)計(jì)師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩(wěn)定了下來，這個世界的確需要設(shè)計(jì)來對情緒進(jìn)行即時表達(dá)，在5月份Google的全新Material You設(shè)計(jì)語言中，這種低飽和色彩也被發(fā)揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續(xù)發(fā)展！

有關(guān)Material You信息可以看一下我的另一篇文章《Material You 為你而來！》

(圖片來源：Google Material You)

(圖片來源：Dribbble)

圖形方面，亮點(diǎn)在3D！毫無疑問3D插畫在2021上半年繼續(xù)著他的強(qiáng)勁勢頭，2021上半年涌現(xiàn)出了大量優(yōu)秀的3D風(fēng)格插畫，并且不止是3D卡通人物，在產(chǎn)品渲染和背景展現(xiàn)上也在醞釀新的力量。特別說明的是，設(shè)計(jì)工具的高速發(fā)展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關(guān)注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。

(值得關(guān)注的3款新興3D軟件)

在2D圖形方面，也有突破，除了傳統(tǒng)的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規(guī)則形都會大量的出現(xiàn)在UI設(shè)計(jì)中，UI設(shè)計(jì)越來越開放和放得開了！

(圖片來源：Google Material You)

隨著去年底蘋果BigSur操作系統(tǒng)的發(fā)布，3D圖標(biāo)著實(shí)火了一段時間，出現(xiàn)了不少3D風(fēng)格圖標(biāo)。但是后來大家發(fā)現(xiàn)在圖標(biāo)在2D層面其實(shí)還是很有創(chuàng)新點(diǎn)的，并且也更加實(shí)用，所以我們又看到了磨砂玻璃風(fēng)格圖標(biāo)走入了我們的視線。這種采用背板透光設(shè)計(jì)的風(fēng)格圖標(biāo)，看起來清新自然，一經(jīng)亮相就讓設(shè)計(jì)師們喜歡起來了！

(圖片來源：Dribbble)

但無論是3D風(fēng)格還是磨砂玻璃風(fēng)格圖標(biāo)設(shè)計(jì)，從某種意義上說，這些都是擬物化設(shè)計(jì)的一種新的回歸方式，設(shè)計(jì)就是一個圈哪！

排版設(shè)計(jì)，塊狀與字體成為了關(guān)鍵詞。先看幾個作品，你發(fā)現(xiàn)了什么了嗎？

(圖片來源：Dribbble)

UI設(shè)計(jì)的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準(zhǔn)確且優(yōu)雅！從某種方面也就是我們說的用戶體驗(yàn)。當(dāng)下仍然是扁平化為主體UI設(shè)計(jì)語言的時代，陰影設(shè)計(jì)幾乎已經(jīng)退出了當(dāng)下的主流設(shè)計(jì)，所以在信息的區(qū)分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設(shè)計(jì)中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！

(UI排版的三個趨勢)

最后我們說說行業(yè)趨勢方面，在2021上半年的UI設(shè)計(jì)作品中，除了常規(guī)的移動端APP UI設(shè)計(jì)之外，我們更多看到了一些針對于其他設(shè)備的UI設(shè)計(jì)，比如說電腦B端應(yīng)用、車載HMI、數(shù)據(jù)可視化、交互動畫等這樣的新端趨勢，并且這些作品的數(shù)量越來越多了，所以從行業(yè)趨勢來講，UI設(shè)計(jì)師們還是要打開更多的眼界和格局，設(shè)計(jì)的競爭不止是在水平能力上，更重要的是行業(yè)賽道的選擇！關(guān)注趨勢尤為重要！

(圖片來源：Dribbble)

原文地址：站酷

作者：騰訊ISUX

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

一、認(rèn)知負(fù)荷

定義：

認(rèn)知負(fù)荷是完成一項(xiàng)任務(wù)所需的精神努力總量。您可以將其視為用戶與產(chǎn)品交互所需的處理能力。如果需要處理的信息超出了用戶的處理能力，那么認(rèn)知負(fù)荷就太高了。

案例：

造成用戶認(rèn)知負(fù)荷的的原因大多都是，產(chǎn)品在交互和視覺上過于復(fù)雜，設(shè)計(jì)的統(tǒng)一性不夠，導(dǎo)致用戶在使用時不斷進(jìn)行思考無法形成習(xí)慣

例如移動端中的空狀態(tài)，目的是為了引導(dǎo)用戶完成任務(wù)，在設(shè)計(jì)時無論是文案展示與視覺表現(xiàn)都應(yīng)簡單明了、層次分明、視覺統(tǒng)一

二、錨點(diǎn)效應(yīng)

定義：

用戶獲得的初始信息會影響后續(xù)的判斷，用戶對某件事做出判斷時，會不自覺的將開始看到的信息作為衡量標(biāo)準(zhǔn)。

案例：

在日常生活中錨點(diǎn)效應(yīng)非常常見，例如平常不帶帽子，偶爾帶帽子出門的你，走在大街上會發(fā)現(xiàn)挺多人都有帶帽子，因?yàn)樾睦砘顒邮前褞弊舆@件事作為起始衡量，而你刻意的在尋找與帽子產(chǎn)生共鳴的事

在產(chǎn)品設(shè)計(jì)中最典型的就是會員體系，例如某視頻平臺的會員價格默認(rèn)選中的那一欄會比其他的價格低，那么用戶在使用時心理會默認(rèn)這是會員的價格，相對應(yīng)其他更高的價格只是作為衡量這個最低價格而存在

三、誘餌效應(yīng)

定義：

又稱對比效應(yīng)，指人們對兩個不相上下的選項(xiàng)進(jìn)行選擇時,因?yàn)榈谌齻€新選項(xiàng)(誘餌)的加入,會使某個舊選項(xiàng)顯得更有吸引力，通過對比誘導(dǎo)人購買商家想讓他購買的商品。

案例：

有一位著名的行為經(jīng)濟(jì)學(xué)家他叫丹·艾瑞里教授，他曾經(jīng)做過一本《經(jīng)濟(jì)學(xué)人》雜志的定價策略，這里不細(xì)講感興趣的可以搜一下。誘餌效應(yīng)運(yùn)用最多的是在超市場景，我們經(jīng)?？吹匠械呢浖苌蠒锌雌饋砗軐?shí)惠的物品在，如一袋泡面可能是5元，而旁邊還有3包泡面一起出售可能也就12元，然后開心的拿走了，這就是誘餌效應(yīng)，那一袋5元的就是誘餌，商家的目的就是為了讓你買走12元的

而在線上產(chǎn)品策略中運(yùn)用最多的則是電商場景，如下圖中的圖書商品，單價610元，定價980元，三件單價488元，這里的單價和定價都是誘餌，目的是為了讓用戶同時購買三件商品，而用戶內(nèi)心是欣然接受因?yàn)楦鼊澦?

四、注意偏差

定義：

在檢查所有可能的結(jié)果時，我們傾向于關(guān)注一些看起來合理且熟悉的事物，從而忽略了其他結(jié)果。

案例：

13年9月twitter公司宣布IPO，當(dāng)時11月份才開始交易，但是在這兩個月時間里有一家名為twweeter的公司三天內(nèi)漲了13倍，只是在名字上與推特公司極為相似，但實(shí)際業(yè)務(wù)毫無關(guān)系，機(jī)構(gòu)就是利用用戶的注意偏差讓不了解實(shí)際情況的投資者只看到相關(guān)性，而另一面的不相關(guān)的結(jié)果用戶自然的忽視掉

在產(chǎn)品設(shè)計(jì)的客服助手中，就屬于注意偏差，我們習(xí)慣的認(rèn)為向客服回復(fù)人工等關(guān)鍵字時，會自動切換人工客服，而產(chǎn)品則會設(shè)置一些虛擬的智能客服來節(jié)省成本，而用戶在這個過程中則忽略了細(xì)節(jié)，誤以為智能客服是人工客服

五、菜斯托夫效應(yīng)

定義：

前蘇聯(lián)前蘇聯(lián)心理學(xué)家菜斯托夫提出特殊事物才易被人牢記。也就是說，有個性的人、與眾不同設(shè)計(jì)得商品、不尋常的事情，都會讓人留下更深的印象。

案例：

生活中我們很難記住某個點(diǎn)或某件事，但是當(dāng)這件事足夠突出擁有獨(dú)特的個性我們便會深深印在腦海里，比如一串字符ezol4tpmb，我們最容易記住的是4，因?yàn)樗俏ㄒ坏臄?shù)字，在比如說讓你去記憶國內(nèi)某些城市的特點(diǎn)，如西安、開封、浙江我們想到的就是秦皇陵、包青天、西湖等著名具有特征的地點(diǎn)，因?yàn)檫@些事物比較特殊更容易被記住

在品牌設(shè)計(jì)中菜斯托夫效應(yīng)運(yùn)用的比較廣泛，如何通過視覺的表現(xiàn)讓用戶對產(chǎn)品更加的印象深刻，對此就衍生出產(chǎn)品IP、品牌符號這種具有特殊意義的標(biāo)識便于加強(qiáng)產(chǎn)品印象

六、菲茨定律

定義：

任意一點(diǎn)移動到目標(biāo)點(diǎn)的時間與該目標(biāo)點(diǎn)的距離和大小有關(guān)，距離越遠(yuǎn)時間越長，目標(biāo)越大時間越短，公式： 

T = a + b log2(D/W+1)

案例：

在交互設(shè)計(jì)中經(jīng)常用到此定律，無論是正向還是逆向此定律都能夠很好的運(yùn)用到交互中，如mac系統(tǒng)上的關(guān)閉按鈕，始終在左上角并且很小，我們的鼠標(biāo)在右側(cè)，移動到左側(cè)上角時間會隨之變長，因此這一交互結(jié)構(gòu)就避免了用戶誤操作關(guān)閉軟件

再例如移動端中會把重要的按鈕操作放置在屏幕右下或者居下，因?yàn)榇蠖鄶?shù)人是右手使用手機(jī)，因此在使用時右手拇指距離點(diǎn)擊區(qū)域會更近

七、幸存者偏差

定義：

幸存者偏差是指把一些事的不同角度的人員篩選出來，篩選出一部分人進(jìn)行采訪從而制造輿論，觀察者只能看到事物的一面，而另一面則被忽略，也被稱為以偏概全

案例：

某次春節(jié)記者采訪到一些在火車上的群眾，聊一些購票的過程以及買到票的心理感受，最后向公眾公布出今年回家的票大家都買到了，但這個過程中卻忽略了那些不在車上或者沒買到票的人們，因此就以偏概全的傳輸單方面信息，這些被采訪到的人們就是幸存者

在做產(chǎn)品時經(jīng)常會聽到用戶畫像這個詞，用戶畫像就是利用幸存者偏差而把廣大的用戶數(shù)據(jù)通過典例呈現(xiàn)，當(dāng)然這個幸存者的樣本必須是壓倒性的龐大，否則就掉入幸存者偏差的陷阱

八、鄰近法則

定義：

彼此靠近或接近的對象往往會組合在一起，相近的元素可以建立關(guān)系，人們會不自然的把相近的元素看作一個整體。

案例：

在UI設(shè)計(jì)中，經(jīng)常會用到鄰近法則進(jìn)行設(shè)計(jì)，如一些組件、卡片的建立，由不同的元素組成變成一個整體，其次鄰近法則能夠有效的用戶層級的劃分，如下圖中的一些卡片、icon進(jìn)行規(guī)律的排布最后組成一個整體，與上下模塊的層級有效的區(qū)分

九、特斯勒定律

定義：

特斯勒定律又稱復(fù)雜性守恒定律，他指出對于任何系統(tǒng)都存在一定的復(fù)雜度并且是無法避免的，問題是誰來處理它。

案例：

在任何產(chǎn)品設(shè)計(jì)中無論是功能還是流程都存在一定的復(fù)雜度，依據(jù)特斯勒定律有些復(fù)雜度是無法避免的，那么需要我們在設(shè)計(jì)中去解決這些問題，保證在用戶的角度來看它是合理的簡單的

像我們常見的話題功能，輸入#自動引導(dǎo)出關(guān)鍵詞供用戶填寫省去用戶輸入時間，再例如b站的一鍵三連，長按點(diǎn)贊的同時會把收藏、打賞功能一并完成；結(jié)構(gòu)層面也會用到此定律如產(chǎn)品中的設(shè)置頁面，按照不同的維度進(jìn)行區(qū)分如系統(tǒng)維度、反饋維度、功能維度幫助用戶更快的完成操作

十、帕累托原則

定義：

它是由意大利經(jīng)濟(jì)學(xué)家帕累托提出，它指出對于許多事件，大約80%的影響來自20%的原因

案例：

在設(shè)計(jì)中我們會發(fā)現(xiàn)一個產(chǎn)品頁面有幾十上百個，對于用戶而言能夠提供價值的可能也就那么幾個功能頁面，這幾個頁面可能占總產(chǎn)品的20%左右，那么我們在做優(yōu)化的時候則需要去考慮如果把20%做好把它的價值放大

再往細(xì)了說，例如打車軟件在這個頁面中能夠?yàn)橛脩籼峁┖诵膬r值的區(qū)域則是地圖區(qū)域和選擇目的地區(qū)域，那么在做優(yōu)化體驗(yàn)時應(yīng)當(dāng)著重關(guān)注此區(qū)域，而頁面中剩下的區(qū)域則受上面20%的影響

十一、社會證明

定義：

社會證明是用戶用來確定行為方式的便捷捷徑，當(dāng)他們不確定目標(biāo)時，他們最有可能認(rèn)為并接受他人的行為是正確的，人數(shù)越多，行動似乎越合理。

案例：

最近抖音在評論區(qū)新增了一個踩一下與點(diǎn)贊進(jìn)行互補(bǔ)，但是奇怪的是我們進(jìn)行踩一下時并不會展示具體數(shù)量，試想一下當(dāng)點(diǎn)贊的數(shù)量大于踩一下的時候，我們有時就會被影響認(rèn)為這條評論值得點(diǎn)贊

再例如購物中的評論排序，像京東把好評優(yōu)先展示在前面，當(dāng)好評的數(shù)量大于其他維度時就會影響用戶判斷，用戶會把數(shù)量多的好評當(dāng)作參考依據(jù)認(rèn)定這個商品符合自己的需求

十二、好奇心差距

定義：

指用戶知道的內(nèi)容與他們想要或需要知道的內(nèi)容之間的空間，這個空間叫做差距，差距會導(dǎo)致痛苦，要消除痛苦，用戶需要填補(bǔ)知識差距。

案例：

例如在做產(chǎn)品設(shè)計(jì)中都會涉及到登錄注冊流程，那么對于有些產(chǎn)品則需要在登錄注冊階段大量收集用戶信息完成更好的推薦策略，但對于用戶而言用戶的認(rèn)知是固有的流程，如填完手機(jī)號就收到驗(yàn)證碼，最后完成注冊進(jìn)入首頁，如果說中間的過程需要收集用戶信息，則需要對應(yīng)的解決方案來彌補(bǔ)用戶的心理差距

即可App在收集用戶信息的階段使用了偏趣味性的一些設(shè)計(jì)表現(xiàn)，在用戶的這個空間差里面來緩解用戶的情緒，激起用戶填寫欲望

十三、心智模型

定義：

心智模型是對某人關(guān)于事物在現(xiàn)實(shí)世界中如何運(yùn)作的思考過程的解釋，它是對周圍世界的表示，可能準(zhǔn)確或不準(zhǔn)確，用戶認(rèn)為他們對您的產(chǎn)品的了解會改變他們使用產(chǎn)品的方式。

案例：

心智模型其實(shí)就是我們對未來發(fā)展的預(yù)測，內(nèi)心對要發(fā)生的事情進(jìn)行預(yù)判，然后采取行動，例如我們要購物想到的就是淘寶、京東，想到吃飯可能就是美團(tuán)、餓了么，這些產(chǎn)品就打入了用戶的心智。往細(xì)了說心智模型是一個廣泛的概念，它還包括行為模型、實(shí)現(xiàn)模型、表現(xiàn)模型

像我們常用的聊天軟件，在聊天過程中撤回消息，就會有個重新編輯功能，這就是滿足用戶的心智模型，預(yù)判用戶的操作例如微信、釘釘、飛書

十四、擬態(tài)認(rèn)知

定義：

擬態(tài)是在頁面中模仿現(xiàn)實(shí)世界物品，通過它的外觀和交互模仿現(xiàn)實(shí)，擬物化適合用來讓用戶適應(yīng)新的頁面和技術(shù)形態(tài)。

案例：

我們在做頁面時都會涉及到圖標(biāo)的繪制，那么那些具有業(yè)務(wù)屬性的圖標(biāo)則需要通過擬物的方式進(jìn)行呈現(xiàn)，對于用戶能夠降低理解成本，如經(jīng)典的紅包、自如的金剛區(qū)等

十五、奇點(diǎn)效應(yīng)

定義：

與群體相比，用戶對個人的關(guān)注不成比例，與大型抽象群體相比，人們更愿意同情一個單一的、可識別的人。

案例：

這個如果用逆向思維來想的話，類似于我們說的“對抗性人格”在大多數(shù)人都對一件事或事物看法一致時，出現(xiàn)一個不一樣的聲音，試想一下我們在刷短視頻時評論區(qū)總有那么些人與大多數(shù)人的看法不太一致，這就是奇點(diǎn)效應(yīng)

在設(shè)計(jì)中體現(xiàn)最多的是等級體系和勛章體系，一方面為用戶的攀比心理，另一方面則是奇點(diǎn)效應(yīng)，這類用戶的想法就是為什么要一樣，為什么不可以獨(dú)樹一幟。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

談到設(shè)計(jì)思維可能有很多小伙伴會問，“設(shè)計(jì)思維是設(shè)計(jì)師的事，和自己沒有關(guān)系”。其實(shí)不然，我認(rèn)為設(shè)計(jì)思維不僅僅是設(shè)計(jì)師才具有的能力，關(guān)乎到各行各業(yè)不同身份的人，特別是管理層和老板更應(yīng)該有的一種思維方式。設(shè)計(jì)思維無處不在，有人可能會問：“到底什么是設(shè)計(jì)思維，設(shè)計(jì)思維能帶給我們什么好處，希望通過一篇文章讓你徹底搞懂設(shè)計(jì)思維的概念和方法。

設(shè)計(jì)思維的發(fā)展歷史

美國經(jīng)濟(jì)學(xué)、認(rèn)知心理學(xué)家，諾貝爾經(jīng)濟(jì)學(xué)獎獲得者赫布·西蒙 (Herbert Simon)，在他的著作《人工科學(xué)》提出了設(shè)計(jì)作為一種思維方式的概念。

1987年，哈佛大學(xué)設(shè)計(jì)學(xué)院教授羅偉(Peter Rowe)出版了《設(shè)計(jì)思維》一書，書中首次使用設(shè)計(jì)思維的概念。

1991年，戴維·凱利（DavidKelley)成立了設(shè)計(jì)和創(chuàng)新咨詢公司IDEO，將設(shè)計(jì)思維推向商業(yè)化，成為設(shè)計(jì)思維的教育和推廣先驅(qū)。全球最大的設(shè)計(jì)咨詢機(jī)構(gòu)之一。1992年，卡內(nèi)基梅隆大學(xué)設(shè)計(jì)學(xué)院院長布坎南(Richard Buchanan)發(fā)表了一篇名為《設(shè)計(jì)思維中的難題》的文章，他指出：“設(shè)計(jì)思維可以擴(kuò)展到社會生活的各個領(lǐng)域”。

2004年戴維·凱利（David Kelley)創(chuàng)辦了斯坦福大學(xué)設(shè)計(jì)學(xué)院（D.School）致力于提供設(shè)計(jì)思維的教育和推廣，以Design Thinking為核心教學(xué)思想，教授設(shè)計(jì)思維方法與實(shí)踐。在美國，設(shè)計(jì)學(xué)院正取代商學(xué)院成為熱門，該學(xué)院已成為斯坦福大學(xué)最受歡迎的學(xué)院。

設(shè)計(jì)思維的定義

“設(shè)計(jì)思維是以人為本的利用設(shè)計(jì)師的敏感性以及設(shè)計(jì)方法，在滿足技術(shù)可實(shí)現(xiàn)性和商業(yè)可行性的前提下，來滿足人的需求的設(shè)計(jì)方法。設(shè)計(jì)思維是一個可以被重復(fù)使用的解決問題的方法框架或一系列的步驟，提供解決問題的原型和一系列的工具?！?——蒂姆·布朗(Tim Brown)教授，設(shè)計(jì)思維的提出者和倡導(dǎo)者

首先設(shè)計(jì)思維是以用戶為中心的，從用戶的需求開始出發(fā)，針對產(chǎn)品看看用戶有哪些需求，能不能通過科技手段去實(shí)現(xiàn)，有了科技的可行性，再看看能不能不斷的實(shí)現(xiàn)商業(yè)變現(xiàn)，才能使我們的產(chǎn)品不斷的給用戶提供價值，所以設(shè)計(jì)思維指的是用戶的需求，科技的可行性和商業(yè)的持續(xù)性，這三者之間的交界就是設(shè)計(jì)思維帶來的創(chuàng)新。

設(shè)計(jì)思維的應(yīng)用領(lǐng)域

設(shè)計(jì)思維其實(shí)也是一種思維方式，能幫助你打破當(dāng)下的一些卡點(diǎn)，包括企業(yè)遇到的一些問題，設(shè)計(jì)思維能夠幫助企業(yè)創(chuàng)新，從而在企業(yè)發(fā)展的不同階段實(shí)現(xiàn)升級和轉(zhuǎn)型，甚至有些企業(yè)用了設(shè)計(jì)思維的方法實(shí)現(xiàn)第二增長曲線。設(shè)計(jì)思維的應(yīng)用領(lǐng)域也非常的廣，比如：實(shí)物產(chǎn)品、服務(wù)設(shè)計(jì)、商業(yè)模式、軟件應(yīng)用、工作流程、企業(yè)文化等。有些兒童教育機(jī)構(gòu)也用設(shè)計(jì)思維開設(shè)了創(chuàng)造課程引導(dǎo)和教育孩子，斯坦福大學(xué)還運(yùn)用設(shè)計(jì)思維開設(shè)了人生設(shè)計(jì)課，就是一個人的人生也可以被設(shè)計(jì)的，我也曾讀過這本人生設(shè)計(jì)課，有空給大家分享讀書筆記。一些全球領(lǐng)導(dǎo)品牌公司早已意識到設(shè)計(jì)思維對于其產(chǎn)品開發(fā)及公司發(fā)展的重要性，采取一系列措施加大對員工在設(shè)計(jì)思維方面的培訓(xùn)，從蘋果、美國銀行、 宜家、可口可樂，星巴克、Airbnb、FOTILE方太、到GE通用電氣、寶潔、IBM、三星、3M 等，都已經(jīng)把設(shè)計(jì)思維納入其經(jīng)營策略，成立設(shè)計(jì)思想工作坊，并大量運(yùn)用于為各種企業(yè)和社會難題提供實(shí)用和具有創(chuàng)造性的解決方案，下面就來談?wù)勗O(shè)計(jì)思維具體步驟和方法。

一、共情 （Empathy）

設(shè)計(jì)思維的第一個方法是共情（Empathy）也叫同理心。大家可以想一下，我們在設(shè)計(jì)或者解決問題的時候，是不是站在需求人的角度去看待問題的，有的設(shè)計(jì)師可能只看到冰山模型最上面的一層，而冰山下用戶真正需求卻看不到，這就需要我們?nèi)チ私庥脩?，了解用戶最好的方法就是共情?

1. 觀察

觀察是共情最基礎(chǔ)的方法，其實(shí)就是深入洞察用戶，如何從用戶身上發(fā)現(xiàn)問題。你可以回想一下上大學(xué)時，是如何談戀愛的，是不是一開始先默默的觀察對方，看看有什么習(xí)慣和行為，喜歡什么東西，想辦法去靠近和了解，找到一個突破點(diǎn)。比如你幫她修好了電腦，解決了她的問題，就這樣自然而然交往，進(jìn)入了戀愛狀態(tài)。這就是觀察，觀察是人的本能，也是建立情感最基礎(chǔ)的第一步。這里的觀察是帶有目標(biāo)性的，并能解決實(shí)際問題的觀察。

最近看了一個節(jié)目叫秘密大改造，就是幫助用戶改造裝修老舊房的節(jié)目。欄目組安排室內(nèi)設(shè)計(jì)師裝作成記者和用戶一起住一起吃，設(shè)計(jì)師發(fā)現(xiàn)房子特別小，空間利用很低，觀察房主人生活習(xí)慣、愛好等，通過交流了解房主的內(nèi)心世界及對生活的向往等。完全和房主建立共情基礎(chǔ)，等了解觀察的差不多了，節(jié)目組就贊助房主和節(jié)目組一起去做公益的名義外出一個月。節(jié)目組故意不告訴房主在這一個月之內(nèi)幫助房主改造房子，設(shè)計(jì)師就根據(jù)之前觀察發(fā)現(xiàn)的居住問題，設(shè)計(jì)改造了房子的方案，并監(jiān)督工人進(jìn)行裝修。等一個月房主人回來后，驚訝地發(fā)現(xiàn)自己的房子都認(rèn)不出來了，完全超出了自己的想象，房主人太滿意了，每一個細(xì)節(jié)都考慮到用戶的需求，最終設(shè)計(jì)的方案用戶當(dāng)然比較滿意了。這個欄目就是用了設(shè)計(jì)思維幫助用戶解決實(shí)際問題的。我舉這個例子希望幫助大家能更容易理解，大家有空可以看一下這個節(jié)目，看看設(shè)計(jì)思維是如何運(yùn)用的，如果是自己該怎么用設(shè)計(jì)思維的方法去做。

2. 沉浸式體驗(yàn)

共情的第二個方法就是沉浸式體驗(yàn)，就是把自己當(dāng)成用戶去體驗(yàn)真實(shí)用戶的感受才能更好的發(fā)現(xiàn)問題。比如IDEO公司被委托設(shè)計(jì)一款兒童車，就讓工程師坐在現(xiàn)有的兒童車上去沉浸式體驗(yàn)，推著這些成年兒童去戶外或去購物。體驗(yàn)結(jié)束后這些工程師就總結(jié)了：兒童車太矮了，前面看到的都是腳，還有灰塵，最重要的看不到媽媽沒有安全感，小孩總愛哭，于是工程師就把兒童車做成可折疊并能升高，下面可以放東西，然后再轉(zhuǎn)過來面向媽媽，兒童就喜歡了。這就是通過沉浸式體驗(yàn)來挖掘用戶需求。

3.訪談

共情最后一個方法是用戶訪談，可以通過定性或定量訪談目標(biāo)用戶，可以面對面的交互式訪談，焦點(diǎn)小組訪談、專家訪談、也可以是問卷形式的等，網(wǎng)上有很多訪談模版和發(fā)放問卷的網(wǎng)站。上文提到的例子秘密大改造的設(shè)計(jì)師和用戶一起吃一起住，在不輕易的的交流中就知道了用戶的真實(shí)需求，這種訪談方式用戶是最不會感覺到有壓力的，也最能發(fā)現(xiàn)用戶真實(shí)需求的，所以最好的訪談是先和用戶做朋友，就是完全把用戶當(dāng)成自己的好朋友，試問有幾個公司能做到這一點(diǎn)呢？

二、需求定義（Define）

通過共情的方法我們充分理解需求，并挖掘了用戶的諸多問題和需求，那么是不是所有的需求都要滿足用戶呢，怎么找到用戶的真正痛點(diǎn)呢？這就需要重新定義需求，找到核心問題并進(jìn)行設(shè)計(jì)。作為設(shè)計(jì)師你是否會遇到：接到需求就去設(shè)計(jì)，而反復(fù)設(shè)計(jì)的結(jié)果卻不被用戶滿意，只是做到了被領(lǐng)導(dǎo)滿意，而被陷入盲目的嘗試誤區(qū)中，這個時候應(yīng)該回頭想一想需求有沒有被正確定義，有沒有明確用戶真正的問題。只有對設(shè)計(jì)需求進(jìn)行有針對性的，有目標(biāo)性的定義和理解，設(shè)計(jì)師才能找到最佳的落腳點(diǎn)，從而高效省時省力的完成任務(wù)。比如我們使用的Iphone，有沒有發(fā)現(xiàn)不能自定義鈴聲，喬布斯肯定發(fā)現(xiàn)了這個問題，但為什么到現(xiàn)實(shí)還沒有改進(jìn)這個功能，但I(xiàn)phone依然賣的很好。這就說明了自定義鈴聲不是用戶的核心需求，沒有誰會經(jīng)常換鈴聲來炫耀自己的身份，這個功能有沒有都不影響最終的銷售成績，原因可能是蘋果希望用戶不要被打擾，更尊重用戶隱私。需求定義不是產(chǎn)品經(jīng)理或老板拍腦袋定下來的，要把自己放到空杯狀態(tài)，不要相當(dāng)然的拍腦袋，也不要拍胸脯說自己的想法一定是正確的、要深挖用戶需求，找到用戶真正痛點(diǎn)，重新界定問題，從而確保解決產(chǎn)品核心問題的正確方向。

三、頭腦風(fēng)暴（Ideate）

設(shè)計(jì)思維的第三步生成想法，要生成想法可以利用頭腦風(fēng)暴來共創(chuàng)更多的好主意。提到頭腦風(fēng)暴可能大家都聽說過，其實(shí)就是聚集各式各樣的人一起思維發(fā)散，俗話說 “三個臭皮匠頂個諸葛亮，三人行必有我?guī)熝伞?就是這個道理。頭腦風(fēng)暴的前提是正確理解用戶的真實(shí)需求和明確設(shè)計(jì)需要解決的核心問題，頭腦風(fēng)暴盡量不要找領(lǐng)導(dǎo)參與，因?yàn)轭I(lǐng)導(dǎo)一句權(quán)勢的話會扼殺很多好意的產(chǎn)生。其次要注意自身思維的局限性，我們在思考問題時經(jīng)常會帶有自己的經(jīng)驗(yàn)、習(xí)慣和思維方式，從而走進(jìn)了盲區(qū)，如果有人提出一個好主意，有些人就不愿意思考了，這也說明了人的惰性。所以開展頭腦風(fēng)暴還可以幫助我們打破傳統(tǒng)思維方式，打破盲區(qū)和惰性，從而打開多視角全方位的開放性思維，幫助產(chǎn)品找到創(chuàng)新的方法。還有要注意的是：面對別人提出的天馬行空的主意，不要評判和否定，而是說Yes,and, 在別人想法上再去想，并且鼓勵越多這樣的想法越好，這樣就會激發(fā)出更多人愿意出來分享自己的想法。最后，設(shè)計(jì)師從發(fā)散思維中收集靈感，再由靈感轉(zhuǎn)變成可實(shí)現(xiàn)的想法，最后把最佳想法轉(zhuǎn)變成全面、具體的實(shí)施方案。

四、原型設(shè)計(jì)（Phototype）

在找到最佳的解決方案之后，需要在原型上呈現(xiàn)出來，這就把抽象的概念與想法變成具象的模型來驗(yàn)證用戶問題，這樣能避免不合理不準(zhǔn)確的假設(shè)。為了快速搭建原型可以采取精益創(chuàng)業(yè)的精神做出最小可行性產(chǎn)品MVP，花最少的時間和金錢來快速試錯。最簡單的原型可以利用隨手可得的材料快速制作或現(xiàn)場繪制草圖，達(dá)到易理解快速溝通的效果，從原型中看看有沒有準(zhǔn)確解決用戶的問題，發(fā)現(xiàn)問題后，再去迭代和優(yōu)化。

五、測試（Test）

原型設(shè)計(jì)好之后可以進(jìn)行小范圍測試，A/B測試，灰度測試等。我們要考慮在測試中要得到什么結(jié)果或驗(yàn)證什么問題，然后從觀察真實(shí)用戶的使用習(xí)慣和喜好出發(fā)。抓住用戶的本能行為，重點(diǎn)看用戶做出了哪些操作行為，用戶真實(shí)的反應(yīng)和你所預(yù)期的可能是不一樣的。當(dāng)用戶提出不一樣的反饋時，不要為自己的設(shè)計(jì)而辯護(hù)，用戶說的不一定對，但用戶說的一定是個事實(shí)，用戶覺得不對，就說明哪里可能出了問題，要虛心接受批評。如果用戶說的對，就去改，收集用戶的反饋后，再進(jìn)行快速迭代和優(yōu)化，最后發(fā)布上線，產(chǎn)生商業(yè)價值可持續(xù)性。

總結(jié)

能讀完這篇文章的你應(yīng)該對設(shè)計(jì)思維有一定的概念了，你已經(jīng)有了改變世界的能力，也許你在以后的面試中能更好的運(yùn)用設(shè)計(jì)思維的方法來進(jìn)行面試問答。最后簡短總結(jié)一下設(shè)計(jì)思維的方法過程：“首先要學(xué)會與用戶共情，幫助我們定義問題，再用頭腦風(fēng)暴的方式幫助我們解決問題并產(chǎn)生創(chuàng)新的方法，把創(chuàng)新可行的方法轉(zhuǎn)變成原型，用原型進(jìn)行測試和驗(yàn)證假設(shè)，再通過原型測試去了解用戶，并重新定義問題，所以這五個步驟是不斷反復(fù)和疊加的，最終打造出用戶喜愛并能產(chǎn)生商業(yè)價值的產(chǎn)品”。

讀了這篇文章你可能會發(fā)現(xiàn)，其實(shí)市面上所謂的產(chǎn)品思維，商業(yè)思維，突破性思維，服務(wù)設(shè)計(jì)，體驗(yàn)設(shè)計(jì)，其實(shí)都是來源于設(shè)計(jì)思維的核心理念和方法。設(shè)計(jì)思維幫助了很多企業(yè)，但也不要認(rèn)為是萬能的，它只是幫助我們解決問題的方法和工具框架，只有在項(xiàng)目實(shí)戰(zhàn)中不斷運(yùn)用和實(shí)踐，才能更好的理解和轉(zhuǎn)化成自己的理論體系。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司