最近幾年以來，大家能看到B端設(shè)計(jì)趨勢已經(jīng)越來越火熱，在B端設(shè)計(jì)中關(guān)于圖表的設(shè)計(jì)算是為數(shù)不多的視覺發(fā)揮點(diǎn)了。那么怎樣才能做好圖表設(shè)計(jì)，讓設(shè)計(jì)出來的圖表高大上，符合業(yè)務(wù)需求，讓業(yè)務(wù)方和總監(jiān)對你贊不絕口，本文就必須看完和收藏了，因?yàn)閷?shí)在是太實(shí)用！

應(yīng)用設(shè)計(jì)越來越依賴數(shù)據(jù)驅(qū)動(dòng)，對高質(zhì)量的數(shù)據(jù)可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導(dǎo)的數(shù)據(jù)圖表，但我們其實(shí)可以通過遵循一些簡單的規(guī)則來改變這個(gè)情況。

1. 選擇一個(gè)正確的圖表可視化類型

選擇錯(cuò)誤的圖表類型，或默認(rèn)為最常見的數(shù)據(jù)可視化類型，可能會(huì)讓用戶感到困惑或?qū)е聦?shù)據(jù)的誤解。根據(jù)用戶希望看到的內(nèi)容，可以用多種方式表示相同的數(shù)據(jù)集。盡量做到每一次做數(shù)據(jù)可視化時(shí)都能從數(shù)據(jù)集類型分析和用戶訪談開始。 

2. 根據(jù)正負(fù)值使用正確的繪圖方向

當(dāng)使用水平條時(shí)，在基線的左側(cè)繪制負(fù)值，在右側(cè)繪制正值。不要在基線的同一側(cè)繪制負(fù)值和正值。 

3. 條形圖總是以0基線開始

刪數(shù)據(jù)起點(diǎn)會(huì)導(dǎo)致曲解。在下面的例子中，看左邊的圖表可以很快的得出結(jié)論，值B比D大3倍多，而實(shí)際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準(zhǔn)確的數(shù)據(jù)表示。

4. 折線圖應(yīng)該要清晰體現(xiàn)y軸上的趨勢變化

對于折線圖，總是限制y軸比例從0開始可能會(huì)使圖表幾乎平坦。由于折線圖的主要目標(biāo)是表示趨勢，因此根據(jù)給定時(shí)期的數(shù)據(jù)集調(diào)整比例并保持直線占據(jù)y軸范圍的三分之二是很重要的。 

5. 使用折線圖時(shí)要考慮時(shí)間連貫性

折線圖是由線連接的“標(biāo)記”組成，通常用于可視化時(shí)間間隔內(nèi)的數(shù)據(jù)趨勢。這有助于說明數(shù)值是如何隨時(shí)間變化的，并且對于較短的時(shí)間間隔非常有效，但當(dāng)數(shù)據(jù)更新不頻繁時(shí)，這可能會(huì)導(dǎo)致混淆。 

例如: 使用折線圖來代表年度收入，如果數(shù)據(jù)是每月更新的，則每個(gè)月在圖表中會(huì)生成一個(gè)個(gè)孤立的標(biāo)記點(diǎn)。用戶可能會(huì)假設(shè)連接“標(biāo)記”的線代表實(shí)際值，而在特定時(shí)間實(shí)際的收入數(shù)字是未知的，所以可能會(huì)產(chǎn)生誤會(huì)。在這種情況下，使用垂直條形圖可能是一個(gè)更好的選擇。 

6. 不把折線圖強(qiáng)行”平滑“

平滑的折線圖可能在視覺上很好看，但它們錯(cuò)誤地反映了背后的實(shí)際數(shù)據(jù)，而且過粗的線會(huì)模糊真正的“標(biāo)記”位置。 

7. 避免使用比例不同的雙軸折線圖

通常，為了節(jié)省可視化空間，當(dāng)有兩個(gè)具有相同度量但大小不同的數(shù)據(jù)系列時(shí)，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導(dǎo)的方式代表了兩個(gè)數(shù)據(jù)系列之間的比較。大多數(shù)用戶不會(huì)密切關(guān)注比例，只是瀏覽圖表，然后就得出了錯(cuò)誤的結(jié)論。 

8. 限制餅圖中顯示的切片數(shù)量

餅狀圖是最流行的也是經(jīng)常被誤用的圖表之一。在大多數(shù)情況下，條形圖是更好的選擇。但如果你決定做一個(gè)餅狀圖，有2個(gè)比較好的建議:

1）不要超過5-7片，保持簡單

2）可以將額外的最小段分組到“其他”切片 

9. 在圖表上直接標(biāo)注

如果沒有適當(dāng)?shù)臉?biāo)簽，無論你的圖表有多好，它都不會(huì)有意義。直接在圖表上標(biāo)注對所有用戶都非常有幫助。查閱圖例需要時(shí)間和精力來理清數(shù)據(jù)和對應(yīng)的部分。 

10. 不要在切片上貼數(shù)據(jù)

將數(shù)據(jù)放在切片上可能會(huì)導(dǎo)致多個(gè)問題，在可讀性問題上和窄切片上都會(huì)有挑戰(zhàn)。相反，添加黑色標(biāo)簽?zāi)芮逦逆溄拥矫總€(gè)部分。 

11. 保持餅圖切片秩序以提升閱讀效率

在確定餅片秩序時(shí)，有幾種常用的方法:

1）將最大的切片放在12點(diǎn)的位置，然后將下一片切片順時(shí)針降序排列

2）把最大的切片放在12點(diǎn)的位置，第二大的放在順時(shí)針相鄰位置，第三大的放在11點(diǎn)的位置，其余的切片按順時(shí)針降序排列 

12. 避免隨機(jī)排列

同樣的建議也適用于其他許多圖表。不要默認(rèn)采用字母排序，將最大的數(shù)值放在頂部(對于水平條形圖)或左側(cè)(對于垂直條形圖)，以確保最重要的數(shù)值占據(jù)最突出的空間，減少眼球運(yùn)動(dòng)和閱讀圖表所需的時(shí)間。 

13. 窄的餅圖是難閱讀的

餅圖通常不是最容易閱讀的圖，因?yàn)楸容^相似的值非常困難。當(dāng)我們把中間部分去掉，創(chuàng)建一個(gè)圓圈圖表時(shí)，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會(huì)變得毫無用處。 

14. 視覺效果不要搶了數(shù)據(jù)風(fēng)頭

不必要的造型不僅會(huì)分散注意力，還可能導(dǎo)致對數(shù)據(jù)的誤解和用戶的錯(cuò)誤印象。你應(yīng)該避免:

1）3D元素，明暗面

2）陰影、漸變和其他扭曲的多彩色

3）斑馬圖案，過多的網(wǎng)格線

4）過度裝飾，斜體，粗體或襯線字體 

15. 選擇與數(shù)據(jù)性質(zhì)相匹配的調(diào)色板

顏色是有效的數(shù)據(jù)可視化的組成部分，在設(shè)計(jì)時(shí)考慮以下3種顏色類型:一個(gè)定性調(diào)色板最適合顯示分類變量。為確保易用性，所分配的顏色應(yīng)該是不同的。連續(xù)調(diào)色板最適合需要按特定順序放置的數(shù)字變量。使用色相或亮度或兩者的組合，可以創(chuàng)建一個(gè)連續(xù)的顏色集。

發(fā)散調(diào)色板是兩個(gè)連續(xù)調(diào)色板的組合，中間有一個(gè)中心值(通常為0)。通常不同的調(diào)色板將傳達(dá)積極和消極的價(jià)值。確保顏色也與“消極”和“積極”表現(xiàn)的概念相匹配。 

看看一個(gè)方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調(diào)色板。 

16. 設(shè)計(jì)的可訪問性

根據(jù)美國國家眼科研究所(National Eye Institute)的數(shù)據(jù)，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時(shí)才會(huì)成功。

1）在調(diào)色板中使用不同的飽和度和亮度

2）把現(xiàn)有配色去色然后檢查對比度和可讀性。 

17. 關(guān)注易讀性

確保排版能夠準(zhǔn)確傳達(dá)信息，幫助用戶專注于數(shù)據(jù)，而不是分散用戶的注意力。

1）選擇易讀的字體，避免襯線和裝飾過度的字體

2）避免使用斜體、粗體和全部大寫

3）確保與背景有高對比度

4）不要旋轉(zhuǎn)文字

18. 使用水平條形圖代替旋轉(zhuǎn)標(biāo)簽

這個(gè)簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會(huì)扭傷他們的脖子。 

19. 事先選擇合適的圖表庫

如果你的任務(wù)是在web和移動(dòng)項(xiàng)目中添加交互式圖表，你應(yīng)該問的第一個(gè)問題是我們將使用什么圖表庫?現(xiàn)代圖表庫包含了許多前面提到的交互和規(guī)則?；谝讯x庫的設(shè)計(jì)將確保易于實(shí)現(xiàn)，并能提供大量交互想法。 

20. 做成動(dòng)態(tài)圖表

幫助用戶通過改變參數(shù)，可視化數(shù)據(jù)進(jìn)行探索。然后得出結(jié)論，最大化價(jià)值和洞察力。在下面的示例中，你可以看到IOS Health應(yīng)用使用了各種數(shù)據(jù)表示的組合。 

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

當(dāng)設(shè)計(jì)師被迫待在家里時(shí)，終于能有時(shí)間去反思現(xiàn)有的設(shè)計(jì)并重新創(chuàng)造。無聊是藝術(shù)家最大的敵人，他們會(huì)盡可能地打破困局。

對我們來說，2021年相當(dāng)困難。世界上最長壽的貓慶祝了它的34歲生日，這可能是發(fā)生的唯一一件好事，順便說一下，你會(huì)在文末看到這只可愛的小貓照片。

那么，2022年的UI/UX設(shè)計(jì)趨勢是什么呢？看看現(xiàn)在的情況，我們已經(jīng)可以預(yù)測未來的設(shè)計(jì)趨勢，就像我們對2021年所做的預(yù)測一樣（回頭看非常準(zhǔn)確）。

在本文中，我們將發(fā)現(xiàn)：

• 3D視覺設(shè)計(jì)師的內(nèi)卷將會(huì)越來越嚴(yán)重

• 數(shù)據(jù)可視化的工作將變得越來越重要

• 服務(wù)的移動(dòng)化還需要做出更多努力

• scrollytelling 技術(shù)會(huì)越來越流行

1、滾動(dòng)已死，滾動(dòng)敘事興起 

舊的滾動(dòng)是無聊的。如果你想吸引注意力，你就需要實(shí)現(xiàn)滾動(dòng)敘事（scrollytelling）。（彩云注：這個(gè)技術(shù)的核心在于邊滾動(dòng)頁面邊講故事） 

《紐約時(shí)報(bào)》是第一批在他們的文章《雪花飄落》中使用滾動(dòng)敘事手法的機(jī)構(gòu)之一。

它是一種敘事形式，可以在網(wǎng)頁和APP上呈現(xiàn)。想象一下，在一個(gè)網(wǎng)站中每個(gè)插圖、文本和其他元素都開始變得生動(dòng)起來。自然地，你會(huì)想看到這個(gè)故事的結(jié)局。它就像一個(gè)游戲，帶你穿越迷宮。雖然你不能影響它的進(jìn)程，但卻讓你感覺自己能參與其中。

2022年，Scrollytelling將會(huì)出現(xiàn)在你看到的每一個(gè)流行網(wǎng)站上。

另一方面，scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動(dòng)態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團(tuán)隊(duì)知道如何讓信息看起來更好:

Scrollytelling在用戶向下滾動(dòng)時(shí)被激活，因此得名。沒有點(diǎn)擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個(gè)地方，但通過滾動(dòng)，把屏幕上的故事慢慢展開。這不僅要求設(shè)計(jì)師創(chuàng)造出酷炫的視覺效果，還需要認(rèn)真思考一個(gè)你想要講述的故事情節(jié)。

所以，最好的網(wǎng)站不可能在2天內(nèi)建成，需要更多的時(shí)間去打磨。

IAmBinadam令人驚艷的敘述設(shè)計(jì)

滾動(dòng)敘事的項(xiàng)目通常需要大量的時(shí)間和精力。不過，這樣做的結(jié)果是值得的。頁面變成“活的”，每一秒都有新的事情發(fā)生，所以在閱讀時(shí)很難感到無聊。

那么移動(dòng)端APP呢? Pure是一款約會(huì)應(yīng)用（彩云注，這個(gè)應(yīng)用在app store可以搜到，推薦大家安裝一個(gè)體驗(yàn)一下，非廣告），它創(chuàng)造了一種我稱之為“tappytelling”的故事(當(dāng)你第一次點(diǎn)擊并打開應(yīng)用時(shí)，它就會(huì)被激活):

Scrollytelling是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁面去閱讀整個(gè)故事。相反，網(wǎng)頁設(shè)計(jì)的整個(gè)故事都是事先考慮好的，并盡可能以最有趣的方式設(shè)計(jì)出來。 

2、用戶喜歡看數(shù)據(jù)，數(shù)據(jù)可視化越來越被重視 

如何在2022年做出一個(gè)還不錯(cuò)的企業(yè)網(wǎng)站？你不會(huì)想告訴用戶你是“XX領(lǐng)域公認(rèn)的領(lǐng)導(dǎo)者，該領(lǐng)域最好的之一”。這種標(biāo)準(zhǔn)的廣告表達(dá)并不傳達(dá)任何有價(jià)值的信息。

最好不要用形容詞，而是用事實(shí)來說明:你有多少分支機(jī)構(gòu)，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡單，而且有趣。 

數(shù)據(jù)可視化有助于以一種吸引人的方式傳達(dá)正確的信息。它也可以與滾動(dòng)敘事（Scrollytelling）緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:

 通過去除數(shù)據(jù)集的復(fù)雜性，使信息更容易讓讀者感知。

不同級別的數(shù)據(jù)具有不同的大小，這樣用戶知道應(yīng)該先從哪里查看

讀者可以很快注意到作者試圖通過圖片引出的結(jié)論?？紤]到如今人們消費(fèi)的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來的正面影響更大。 

有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到

還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計(jì)局的數(shù)據(jù)，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來，得分已升至4.0/10，很少低于這一水平。同樣因?yàn)榇罅餍?，在過去兩年里工作量增加了4個(gè)小時(shí)。

人們壓力太大，卷的太辛苦，以至于不愿去看復(fù)雜的數(shù)據(jù)。

設(shè)計(jì)師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復(fù)雜的信息通常被忽略，因?yàn)樽x者試圖節(jié)省他們的時(shí)間，更有可能使用滾動(dòng)按鈕。

Illustration by Mona Chalabi

以下是我們推薦的一些表示數(shù)據(jù)的方式

• 1）圖表和曲線圖

• 2）插圖

• 3）靜態(tài)信息圖

• 4）互動(dòng)信息圖

  
  

Illustration by Ink Factory

如何讓信息圖表看起來更好?

一個(gè)好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應(yīng)該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte通過圖表解釋了好圖表的3個(gè)原則：

1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于1。簡單地說，應(yīng)該刪除一切不必要的元素，保持整潔。 

2）充分利用好畫面空間。也就是說，需要將數(shù)據(jù)編排的更緊密

Graph by Hootsuite

3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來很酷，但真實(shí)永遠(yuǎn)是更重要的。

3、2022年還有必要做APP嗎？

根據(jù)We Are Social的數(shù)據(jù)，2021年有52.2億人使用手機(jī)，約占世界人口的66%。自2020年1月以來，手機(jī)用戶數(shù)量增長了1.8%(9300萬)，而手機(jī)聯(lián)網(wǎng)總數(shù)量增長了7200萬(0.9%)，到2021年初達(dá)到80.2億。

過去一年，社交媒體用戶的數(shù)量增長了13%以上。到2021年初，社交網(wǎng)絡(luò)上已有近5億新用戶注冊。根據(jù)App Annie的數(shù)據(jù)，Android用戶每天花在手機(jī)上的時(shí)間超過4小時(shí)。2020年，安卓用戶上網(wǎng)時(shí)長超過3.5萬億小時(shí)。

令人印象深刻的數(shù)字，是嗎？似乎到2022年，為產(chǎn)品做一個(gè)APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用？有以下幾點(diǎn)可供評估：

1）用戶主要通過移動(dòng)設(shè)備訪問你的網(wǎng)站這是你應(yīng)該了解的重要數(shù)據(jù)。

客戶和你在一起的時(shí)間越長，你就有越多的機(jī)會(huì)去吸引他們，了解他們的習(xí)慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時(shí)長。）

2）幫助內(nèi)部業(yè)務(wù)流程更加有效。

如果你想要提高員工的工作效率、改進(jìn)工作流程或增加利潤，那么就制作一個(gè)可以幫助管理業(yè)務(wù)流程的移動(dòng)應(yīng)用。

如今，像這樣的手機(jī)應(yīng)用使企業(yè)能夠執(zhí)行越來越復(fù)雜和多樣化的任務(wù)，加快日常重復(fù)操作和文檔管理。

3）實(shí)現(xiàn)一些網(wǎng)站上沒有的新功能。

如果你認(rèn)為APP能為用戶打開新的觸點(diǎn)，并讓用戶體驗(yàn)更加友好，那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機(jī)會(huì)？例如，隨著疫情的蔓延，許多人開始用上健身APP在家里鍛煉。

4）競爭對手做的情況。

要了解競爭對手在做什么，他們是否有APP，能做什么，以及他們是否真的對用戶有用。

查看App Store和谷歌Play的統(tǒng)計(jì)數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要，那么你就容易被甩在后面。

5）復(fù)購率。

一個(gè)應(yīng)用可以幫助你留住那些習(xí)慣從你那里購買的人。如果想為老客戶開展促銷活動(dòng)了，給他們發(fā)送一個(gè)通知就能完成，成本更低。

在正確的時(shí)間提供的報(bào)價(jià)越有吸引力，人們購買的可能性就越大。

6）促銷工具。

有了應(yīng)用，你就不需要花錢設(shè)計(jì)和制作實(shí)體卡，客戶也不需要隨身帶卡。將促銷計(jì)劃整合到APP，并分享有用的促銷信息。

做原生APP還是移動(dòng)端網(wǎng)站?

開發(fā)手機(jī)網(wǎng)站比開發(fā)手機(jī)應(yīng)用需要更少的工作量，這反過來可以降低整體推廣成本。

這部分是由于響應(yīng)式設(shè)計(jì)的出現(xiàn)，它允許你根據(jù)打開網(wǎng)站的設(shè)備屏幕來調(diào)整網(wǎng)站。至于APP，它們必須為許多移動(dòng)平臺單獨(dú)編寫:Android、IOS、Windows等。

一些設(shè)計(jì)師認(rèn)為“前端驅(qū)動(dòng)的網(wǎng)絡(luò)體驗(yàn)”會(huì)是2022年的一個(gè)好機(jī)會(huì)，我非常同意!（彩云注：在國內(nèi)，現(xiàn)在開發(fā)小程序的肯定越來越多了。） 

4、3D設(shè)計(jì)具備更強(qiáng)競爭力 

我們一開始并沒有將其放在首位，因?yàn)檫@并不是一個(gè)新的趨勢，在很久以前設(shè)計(jì)師們就已經(jīng)設(shè)計(jì)了很多3D圖像和動(dòng)畫了。 

Cardi B rhymes with 3D

3D技術(shù)已經(jīng)在過去流行了很多年，但它不會(huì)很快消失。此外，我們預(yù)測3D圖形將變得更加多樣化和包容。

在過去的幾年里，3D藝術(shù)和動(dòng)畫已經(jīng)出現(xiàn)在各種UI設(shè)計(jì)趨勢評論中。這意味著越來越多的設(shè)計(jì)師將它們整合到頁面中。

3D當(dāng)然應(yīng)該成為2022年最熱門的趨勢和預(yù)測之一，因?yàn)榕c經(jīng)典動(dòng)畫相比，逼真的3D形狀結(jié)合動(dòng)畫總是引人注目的。

“從技術(shù)上講，通過3D更容易傳達(dá)更多內(nèi)容，因?yàn)樗绕矫鎴D片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動(dòng)性。"

許多設(shè)計(jì)師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合，也作為一個(gè)優(yōu)秀的工作方法蘊(yùn)藏著巨大的潛力。

烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國

注意一點(diǎn)：在整合3D圖形等重量級內(nèi)容之前，確保你的應(yīng)用性能是OK的，能夠快速加載所有元素。 

5、元宇宙風(fēng)潮  

Meta的logo既不是2D也不是3D。或者兩者兼而有之?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。 

Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)

（彩云注：這個(gè)概念在去年簡直不要太火，未來幾年肯定還會(huì)是一個(gè)大的趨勢，設(shè)計(jì)師也需要保持關(guān)注。跟著趨勢走，易于放大自身價(jià)值。）

6、混合動(dòng)畫  

越來越多的公司在網(wǎng)站和移動(dòng)應(yīng)用中使用動(dòng)畫，以提高用戶的沉浸感和體驗(yàn)，使內(nèi)容更有趣。 

動(dòng)畫是2022年重要的網(wǎng)頁設(shè)計(jì)趨勢。2022年，如果沒有它，你的產(chǎn)品很可能會(huì)看起來就像個(gè)半成品?；旌巷L(fēng)格的動(dòng)畫越來越受歡迎:定格動(dòng)畫和3D動(dòng)畫的結(jié)合，2D動(dòng)畫和3D動(dòng)畫的結(jié)合。設(shè)計(jì)師這樣做是為了獲得不同尋常的風(fēng)格解決方案，以及提高最終產(chǎn)品的質(zhì)量。

2022年，動(dòng)畫設(shè)計(jì)將是品牌市場定位的重要組成部分，想想一個(gè)公司新的視覺形象——?jiǎng)赢嬓蜗?。隨著這個(gè)領(lǐng)域的專業(yè)設(shè)計(jì)師數(shù)量的增長，實(shí)現(xiàn)新想法的機(jī)會(huì)也在增加。

2022年如何使用網(wǎng)頁動(dòng)畫?

1）講故事動(dòng)畫。

可以通過在界面和用戶之間建立情感聯(lián)系來傳達(dá)信息。 

加載動(dòng)畫Yoichi Kobayashi

2）更有趣的加載。

用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動(dòng)畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時(shí)間。使用進(jìn)度條或者任何你能想到的可以顯示時(shí)間流逝的東西。

3）光標(biāo)效果。

用戶可以精確地觀察光標(biāo)所在的位置。通過添加智能互動(dòng)動(dòng)畫，對這個(gè)光標(biāo)作出反應(yīng)來探索網(wǎng)站。這種效果在21世紀(jì)初非常流行。如你所知，流行趨勢往往每20年就會(huì)重演一次。

4）動(dòng)態(tài)排版

你有沒有想過讓字母跳舞? 

添加角色的動(dòng)畫插圖

據(jù)Statista統(tǒng)計(jì)，2020年全球動(dòng)畫市場達(dá)到了2700億美元。趨勢是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動(dòng)畫制作廣告。毫無疑問，動(dòng)畫插圖的優(yōu)勢是它們非常靈活和多樣化。 

寶馬歷史動(dòng)畫

這樣的作品通常用于兩種情況:

1）用于解釋視頻

2）電商廣告

動(dòng)畫解說的趨勢出現(xiàn)在幾年前，解說視頻清楚地顯示點(diǎn)擊的位置或公司的項(xiàng)目是關(guān)于什么的。

在招聘或商業(yè)視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。

7、微交互，大影響  

微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么，將導(dǎo)致什么操作，下一步需要做什么。 

圖片來源awwards

動(dòng)畫交互將為你的設(shè)計(jì)注入活力，并有助于保持用戶粘性。關(guān)注每一個(gè)細(xì)節(jié)是設(shè)計(jì)師工作的關(guān)鍵，因?yàn)樵O(shè)計(jì)中的所有元素都可以帶來積極的用戶體驗(yàn)。

重要的是要達(dá)到元素的和諧，而不是把注意力分散到界面的各個(gè)方面。微交互作用的一個(gè)重要部分是顏色，它們?yōu)榻缑嬖卦鰪?qiáng)價(jià)值。

微交互有助于頁面導(dǎo)航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實(shí)現(xiàn)特定的行為。 

8、動(dòng)態(tài)logo，加深品牌印記  

2022年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動(dòng)畫logo設(shè)計(jì)。 

圖片來源Toridori

動(dòng)畫logo主要有以下幾點(diǎn)營銷優(yōu)勢:

1）吸引注意力。這意味著它們有助于提高品牌知名度。

2）有助于提高SEO。谷歌更傾向于動(dòng)態(tài)內(nèi)容，帶有動(dòng)態(tài)圖形的頁面更容易吸引用戶。

3）在移動(dòng)端看起來更好。絲滑的動(dòng)畫看起來比靜態(tài)的logo更有趣。

4）最重要的是展示了歷史。靜態(tài)logo背后的想法正在動(dòng)畫中發(fā)展。由于這一點(diǎn)，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價(jià)值!

一家洗衣機(jī)[公司]的標(biāo)志(https://www.schulthess.ch/)

現(xiàn)在有很多設(shè)計(jì)模板，可以很容易地用字體制作一個(gè)動(dòng)畫logo:

圖片來源Shabello, Bobby Voeten

最后的話  

記住，設(shè)計(jì)趨勢總是在變化的，但是設(shè)計(jì)的意義不會(huì)變。如果你不能深刻理解這一點(diǎn)，那么任何設(shè)計(jì)趨勢的文章不能幫你做好設(shè)計(jì)。

這是前面提到過的世界上最老的貓。她今年34歲(相當(dāng)于人的160歲) 

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

業(yè)務(wù)究竟是什么？

很多時(shí)候既讓初入B端行業(yè)的設(shè)計(jì)師感到一絲絲迷茫，因?yàn)椴煌腂端系統(tǒng)也就意味著，它的業(yè)務(wù)一定就會(huì)有所不同。比如CRM系統(tǒng)當(dāng)中的客戶生命周期管理，OA的辦公自動(dòng)化，特定的行業(yè)往往都會(huì)蘊(yùn)含著不同的業(yè)務(wù)類型

而作為設(shè)計(jì)師，如果只了解設(shè)計(jì)模式、設(shè)計(jì)組件，不去分析設(shè)計(jì)最后的業(yè)務(wù)訴求，其實(shí)是沒有任何意義。因此想要通過B端設(shè)計(jì)指南，和大家一起聊聊B端業(yè)務(wù)，以及背后所牽涉的具體邏輯。今天就簡單聊聊最為常見的 審批

開始之前，還得再多說兩句，因?yàn)橐粋€(gè)系統(tǒng)當(dāng)中，業(yè)務(wù)本身就不是獨(dú)立存在的。因此在去講述審批的過程，一定會(huì)涉及到 流程、權(quán)限、表單配置 等一些基礎(chǔ)內(nèi)容，建議可以先做初步了解，再結(jié)合文章進(jìn)行閱讀

審批的起源

雖然在說起源，其實(shí)我更想給大家講清楚 審批在B端系統(tǒng) 當(dāng)中的重要性

審批字面意思是審查并加以批示，通常指對 下級呈報(bào)上級的公文進(jìn)行審查批示，報(bào)請上級審批

現(xiàn)如今，任何事情一定都會(huì)有分工協(xié)作，而使用審批的好處是可以

• 規(guī)范員工行為

• 提高企業(yè)運(yùn)轉(zhuǎn)效率

• 系統(tǒng)存檔便于溯源

• 保護(hù)環(huán)境（畢竟減少了紙張浪費(fèi)）

當(dāng)然在不同的階段的公司，對于審批的訴求是不太一樣

小公司：因?yàn)閷徟臎Q策路徑短、流程上都非常簡單，但因此就會(huì)缺乏規(guī)范保障。比如在外出辦公時(shí)，看似只需要與老板當(dāng)面進(jìn)行口頭上的溝通即可，但是在外出出現(xiàn)意外時(shí)，由于缺乏外出辦公的相關(guān)證據(jù)，員工的權(quán)益則很難得到保障

大公司：因?yàn)閷徟臎Q策路徑長，流程上都極其復(fù)雜，因此會(huì)在多人協(xié)作下完成整個(gè)流程審批。比如想要申請購買辦公用品時(shí)，會(huì)由 行政、Leader、財(cái)務(wù) 層層審批，從提交審批到最終落實(shí)可能需要十天半個(gè)月，但是這樣的流程，能夠確保企業(yè)在清查財(cái)務(wù)狀況時(shí)，更加有理有據(jù)

審批的演變，就是從最開始的規(guī)章制度而來。比如在早期去政務(wù)機(jī)構(gòu)辦理各種業(yè)務(wù)時(shí)，會(huì)讓你去填寫各種紙質(zhì)表單。在審核過程中，則需要有各個(gè)機(jī)關(guān)的蓋章及批準(zhǔn)，而這種形式正是政府對于普通市民的自上而下的管理方式

審批其實(shí)是整個(gè)B端系統(tǒng)的靈魂，因?yàn)樵贐端系統(tǒng)當(dāng)中，企業(yè)想要使用系統(tǒng)的一大痛點(diǎn)便是 核心的管控 

因此你會(huì)發(fā)現(xiàn)，只要一個(gè)獨(dú)立的系統(tǒng)，一定會(huì)存在獨(dú)立的審批模塊。因?yàn)锽端管理系統(tǒng)當(dāng)中企業(yè)的最終目的，是管理手中的人，而審批便是最為常見的一種手段

審批在如今的B端系統(tǒng)當(dāng)中，可以理解為它是一組消息，在這一組消息當(dāng)中會(huì)有：“具體的文本、對應(yīng)的附件、以及照片視頻”這些內(nèi)容都是輔佐 申請人 去講訴你需要申請的內(nèi)容

比如我們在申請病假時(shí)，往往需要出示 三甲醫(yī)院所開設(shè)的證明，對于這個(gè)證明，如何在表單當(dāng)中出現(xiàn)，你會(huì)發(fā)現(xiàn)最為常見的便是拍攝證明圖片，然后上傳到表單當(dāng)中（這個(gè)與字段屬性緊密相連，我就不做不過介紹）

審批的這組消息還會(huì)有些特殊，因?yàn)樗浅Ｖ匾?，你可以理解為它是一則“加急消息”會(huì)提醒審批人快速的進(jìn)行處理，同時(shí)會(huì)告知相關(guān)的參與人（處理人、抄送人）審批的進(jìn)度、并且無論成功與否，都會(huì)在系統(tǒng)當(dāng)中留下 足跡，因此它起到了 “追蹤、通知、留存” 三個(gè)非常重要的作用，我們首先對于審批進(jìn)行一個(gè)基礎(chǔ)的拆解

審批的拆解

如果把審批單獨(dú)拿出來，你會(huì)發(fā)現(xiàn)審批會(huì)牽涉到 發(fā)起人、處理人、抄送人

發(fā)起人：

審批的發(fā)起人，也是整個(gè)審批流程的歸屬人，他最關(guān)心整個(gè)審批進(jìn)展

因?yàn)樵诎l(fā)起人的角度，創(chuàng)建完審批事項(xiàng)后，可能還需要進(jìn)入審批頁面，完善 后續(xù)附加信息、及時(shí)了解審批狀態(tài)、催促審批人的審核、處理駁回意見 等等，因此站在發(fā)起人的角度，審批需要盡可能詳細(xì)的展示 當(dāng)前審批的狀態(tài)、完整的審批流程、駁回信息的快速操作、成功信息的必要通知

處理人

審批的處理人主要在審批過程做出決策，因此他更在乎的是審批申請內(nèi)容的信息。比如 審批的信息內(nèi)容、直接的審批操作、多條審批的管理

當(dāng)然，在一些大型的集團(tuán)企業(yè)當(dāng)中，會(huì)將審批分為審批「直接處理人」與「間接處理人」（后文以 直處人、間處人 簡稱）

「直處人」作為審批的第一處理人，也就意味著他的意見至關(guān)重要，如果「直處人」通過過后，相對而言整條審批的通過幾率會(huì)大大增加。通?！钢碧幦恕故亲鳛樯暾埲说闹毕殿I(lǐng)導(dǎo)居多，因此多數(shù)情況下可以理解為直屬領(lǐng)導(dǎo)進(jìn)行 “把關(guān)”

「間處人」作為審批的后續(xù)處理人，同樣在流程當(dāng)中也十分重要。但在有些情況下，比如一些偏平化管理的企業(yè)，「間處人」更多像是“權(quán)利”的象征，因?yàn)闄?quán)利已經(jīng)下放給「直處人」，而「間處人」起到知曉審批以及企業(yè)的規(guī)章制度要求

抄送人

審批抄送人主要起到通知對應(yīng)角色的作用，因?yàn)橐粭l審批的出現(xiàn)，會(huì)造成諸多影響，假設(shè)今天你需要申請事假，如何通知同部門的其他成員呢？

發(fā)送即時(shí)消息，顯得過于簡單；每個(gè)打電話，又有些麻煩；發(fā)送企業(yè)郵件，又怕他們沒有看到

這時(shí)候抄送人會(huì)顯得尤為關(guān)鍵

通常抄送會(huì)有企業(yè)流程上管理員配置的固定抄送人，以及發(fā)起人選擇的自行抄送人 兩種類型

固定抄送人 角色通常與管理員配置整個(gè)流程有關(guān)，他是角色當(dāng)中 管理員 所配置的重要通知人，比如今天你的請假信息，肯定會(huì)告知行政，像這類默認(rèn)的通知流程，則可以將其設(shè)為固定抄送人

自行選擇抄送人 則是提供給發(fā)起人自行選擇，該條審批可能會(huì)影響到的相關(guān)人群。比如就是發(fā)送給同事，讓他們知曉今天你不在崗位上，因此自行選擇可以增加審批抄送的靈活性

這里肯定會(huì)有很多讀者會(huì)問，我選擇抄送人與我發(fā)消息給同事，有什么區(qū)別么？

看似完全相同，實(shí)則有明確的區(qū)分

通過消息，將審批內(nèi)容傳達(dá)，本質(zhì)上是你自行將內(nèi)容發(fā)送給對方，對方會(huì)對于你這個(gè)消息的真實(shí)性會(huì)產(chǎn)生疑問？你是否通知了

而選擇抄送，更為權(quán)威，更能體現(xiàn)你這條消息的真實(shí)性，并且整個(gè)流程都已經(jīng)由領(lǐng)導(dǎo)進(jìn)行批準(zhǔn)，因此不會(huì)存在太大問題

其實(shí)審批的本質(zhì)就是一組消息，而這一組消息當(dāng)中，申請人 通過 表單配置 去獲取需要補(bǔ)充的消息內(nèi)容，而流程會(huì)根據(jù)企業(yè)所配置的流程方式將這一組消息進(jìn)行合并轉(zhuǎn)發(fā)給對應(yīng)人，而審批人則需要對這一組消息進(jìn)行回復(fù)“通過、駁回” 來讓整個(gè)流程繼續(xù)延續(xù)

審批流程

審批當(dāng)中，最主要的便是流程。因?yàn)槟憧梢酝ㄟ^查看流程圖，去了解整個(gè)企業(yè)的組織架構(gòu)、規(guī)章制度、員工管理方式

1.串行審批/依次審批

串行審批主要是指當(dāng)一個(gè)審核節(jié)點(diǎn)通過后，才能進(jìn)入下一個(gè)審核節(jié)點(diǎn)。如果節(jié)點(diǎn)駁回，則可以根據(jù)業(yè)務(wù)實(shí)際需要，配置駁回的返回路徑，會(huì)有：撥回到發(fā)起人、駁回到上一個(gè)節(jié)點(diǎn)、或駁回之前任意一個(gè)節(jié)點(diǎn) 重新審批

2.并行審批

并行審批是指一個(gè)審批節(jié)點(diǎn)存在多個(gè)角色同時(shí)審批，這里會(huì)存在兩種情況

1. 任何一個(gè)人審批通過，則可以進(jìn)入下個(gè)節(jié)點(diǎn)，這也就是系統(tǒng)當(dāng)中常說的 「或簽」

2. 所有審批人員通過，才能進(jìn)入下個(gè)節(jié)點(diǎn)，這也是系統(tǒng)當(dāng)中常說的 「會(huì)簽」

3. 條件審批

條件審批就是將企業(yè)當(dāng)中的規(guī)章制度映射到實(shí)際的項(xiàng)目當(dāng)中，通常就是某個(gè)審批內(nèi)容會(huì)根據(jù) 金額多少、實(shí)際數(shù)量 等 進(jìn)而選擇哪個(gè)角色進(jìn)行審批

比如銷售人員在申請一個(gè)合同審批時(shí)，會(huì)根據(jù)合同金額的不同，審批人也會(huì)有所差異

• 當(dāng)金額小于8000時(shí)，合同直接由財(cái)務(wù)專員進(jìn)行審批，進(jìn)而讓流程進(jìn)行快速審批

• 當(dāng)金額大于8000時(shí)，合同會(huì)由銷售主管進(jìn)行審批，讓銷售主管能夠掌握企業(yè)的重要合同

4.自主審批

通過發(fā)起人選定一個(gè)審批事項(xiàng)后，將自主選擇后續(xù)的審批內(nèi)容，進(jìn)而實(shí)現(xiàn)審批的后續(xù)選擇。這是一種較為靈活的審批流程，當(dāng)企業(yè)尚未形成標(biāo)準(zhǔn)化流程時(shí)，自主的核心就是當(dāng)發(fā)起人發(fā)起一個(gè)審批，提交時(shí)需要自行選擇下一個(gè)環(huán)節(jié)的審批人。而下一個(gè)環(huán)節(jié)的審批人審批通過后，可以選擇繼續(xù)流轉(zhuǎn)到再下一個(gè)人去審批，或者結(jié)束這個(gè)流程

審批頁面梳理

審批的背后，它映射的其實(shí)是企業(yè)的一條條管理制度，而它的設(shè)計(jì)一定是要滿足企業(yè)的實(shí)際需求。因?yàn)槟阖?fù)責(zé)的產(chǎn)品不是為某一家企業(yè)提供的服務(wù)（定制化產(chǎn)品），并且企業(yè)管理制度的變動(dòng)其實(shí)是家常便飯，你需要去考慮一個(gè)通用的解決方案，這個(gè)解決方案拆解下來會(huì)分為三個(gè)內(nèi)容，分別是：申請表單、流程配置、更多配置 進(jìn)行講解

1.審批表單

審批表單是最為一個(gè)“簡單”的用戶可配置化表單，因?yàn)楝F(xiàn)如今大多數(shù)B端產(chǎn)品都是以 SaaS 作為基礎(chǔ)（如果是定制化產(chǎn)品 它的審批內(nèi)容、流程也不會(huì)是固定不變的）也就意味著審批表單需要為企業(yè)提供“DIY”的方式，通過表單提供不同的字段類型，去構(gòu)建審批的實(shí)際要求

比如在一個(gè)選擇請假時(shí)，年假、事假、病假、婚假 等的要求都會(huì)有所不同

如何知道他們的差別，其實(shí)可以根據(jù)《勞動(dòng)法》的相關(guān)規(guī)定 以及 各個(gè)其實(shí)的實(shí)際公司制度，進(jìn)行個(gè)性化的處理

在申請婚假時(shí)，需要上傳你的結(jié)婚證，以證明其真實(shí)性；在病假時(shí)，需要有3甲醫(yī)院的病情證明；在年假時(shí)，則需要有你的剩余年假天數(shù)。而這些特殊訴求，其實(shí)都需要在表單當(dāng)中進(jìn)行各種定制化表單

當(dāng)然這只是極為常見的 請假 場景，而在實(shí)際業(yè)務(wù)當(dāng)中的復(fù)雜場景（更多需要將 審批與其他系統(tǒng)關(guān)聯(lián)）一個(gè)簡單的表單是沒有辦法進(jìn)行滿足

這也是很多企業(yè)會(huì)發(fā)現(xiàn)，無論是飛書、釘釘、企業(yè)微信，都沒有辦法滿足其實(shí)際流程需求。又沒有辦法改變自身流程，只能夠自研、定制化 產(chǎn)品，這也是為什么即便各行各業(yè)都有了初具規(guī)模的 SaaS 產(chǎn)品，但是還是會(huì)有很多企業(yè)愿意自行研發(fā)軟件

2.流程配置

企業(yè)可以根據(jù)自身的系統(tǒng)流程，在流程配置當(dāng)中去定制特定的流程。在這個(gè)頁面的設(shè)計(jì)上，需要注意不同參與人的狀態(tài)，以及復(fù)雜流程時(shí)如何才能夠進(jìn)行清晰的閱讀，因此增加了 顏色區(qū)分（發(fā)起人、審批人、抄送人）+ 視圖縮放 功能

顏色自然不必多說，整個(gè)系統(tǒng)需要統(tǒng)一，因此不能夠只考慮在管理后臺的顏色，是一定要在詳情頁當(dāng)中也能過保證顏色的一致。這樣才能夠滿足實(shí)際業(yè)務(wù)所需

視圖縮放只是小小提一下，常見的視圖縮放會(huì)放在左側(cè)，至于為什么，自己稍稍揣摩揣摩

由于流程配置的屬性頁面會(huì)涉及很多表單的復(fù)雜邏輯，這個(gè)只能夠留在我的 訓(xùn)練營的課程 當(dāng)中進(jìn)行拆解，這里就不過多贅述

3.更多配置

更多配置項(xiàng)則是審批在實(shí)際情況下的特殊處理，比如：申請人修改審批的具體時(shí)間、能夠?qū)徟D(zhuǎn)發(fā)給其他人、出現(xiàn)多次相同的審批人是否去重 等等...  其實(shí)就是將審批的設(shè)計(jì)方案進(jìn)行“賦能”，去滿足更多企業(yè)在實(shí)際場景當(dāng)中的需求，感興趣的同學(xué)可以去 釘釘、飛書 了解詳情

結(jié)語

審批，核心還是提高企業(yè)運(yùn)轉(zhuǎn)效率，如果在審批之間，還需要不同角色私下反復(fù)溝通，本質(zhì)上就失去了審批的意義。而審批本身，就是一個(gè)典型的B端產(chǎn)品 從場景到需求，進(jìn)而研發(fā)功能，最后又回歸場景，你設(shè)計(jì)的好與壞，落地到真實(shí)的場景當(dāng)中，試試便知

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

一、什么是用戶體驗(yàn)？

用戶體驗(yàn)（User Experience，簡稱UE/UX）這個(gè)詞是在上世紀(jì)90年代中期，由用戶體驗(yàn)設(shè)計(jì)師 唐納德·諾曼（Donald Norman）所提出和推廣。

定義：用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。即用戶在使用一個(gè)產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認(rèn)知印象、生理和心理反應(yīng)、行為和成就等各個(gè)方面。

二、可用性原則

可用性指的是產(chǎn)品對用戶來說有效、易學(xué)、高效、好記、少錯(cuò)和令人滿意的程度，即用戶能否用產(chǎn)品完成他的任務(wù)，效率如何，主觀感受怎樣，實(shí)際上是從用戶角度所看到的產(chǎn)品質(zhì)量，是產(chǎn)品用戶體驗(yàn)的核心，不好的可用性會(huì)導(dǎo)致用戶放棄使用產(chǎn)品。

可用性由易學(xué)性、效率、可記憶性、容錯(cuò)性、滿意度、實(shí)用性、個(gè)性化、可預(yù)測性組成。

01 易學(xué)性

指的是用戶學(xué)習(xí)如何與產(chǎn)品進(jìn)行交互，以實(shí)現(xiàn)目標(biāo)所花費(fèi)的時(shí)間和精力，即用戶能否在初次使用產(chǎn)品時(shí)完成簡單的任務(wù)或?qū)崿F(xiàn)用戶目標(biāo)。

02 效率

用戶在使用產(chǎn)品一段時(shí)間后，能否在合理的時(shí)間完成想要達(dá)成的目標(biāo)任務(wù)。這里以騰訊視頻為例，用戶能否快速的下載想要的東西，在同一系列中，可以快速下載更多的相關(guān)內(nèi)容。

03 可記憶性

我們常說互聯(lián)網(wǎng)是有記憶的，好的產(chǎn)品體驗(yàn)是幫助用戶去記憶。用戶在體驗(yàn)中，要對一些有意識、無意識的行為進(jìn)行記憶是一個(gè)比較大的負(fù)擔(dān)，如果在一些環(huán)節(jié)通過系統(tǒng)能幫用戶記錄，會(huì)降低用戶的負(fù)擔(dān)。比如在搜索、歷史記錄、瀏覽記錄等。

04 容錯(cuò)性

用戶在使用產(chǎn)品時(shí)，發(fā)生錯(cuò)誤后，能否快速幫助用戶識別和糾正錯(cuò)誤，幫助用戶從錯(cuò)誤中恢復(fù)的能力。如常見的注冊登錄，當(dāng)用戶屬于郵箱格式不對的時(shí)候，給出提示，并且告知錯(cuò)在哪里。如果提示語只是："請輸入正確的郵箱" 用戶可能會(huì)疑惑，錯(cuò)在哪里。

05 滿意度

滿意度指的是用戶與設(shè)計(jì)互動(dòng)產(chǎn)生的愉悅程度，可以是用戶使用產(chǎn)品時(shí)流暢的交互和優(yōu)秀的視覺設(shè)計(jì)，也可以是用戶在產(chǎn)品中得到的滿足感。比如sir語音交互，王者榮耀等級（滿足感）

06 實(shí)用性

產(chǎn)品能否提供用戶在完成任務(wù)時(shí)所需要用到的基本功能，例如P圖類軟件，用戶需要對圖片進(jìn)行裁剪、添加濾鏡、摳圖、美顏、補(bǔ)妝、添加文字、去除水印、添加文字等操作。

07 個(gè)性化

在滿足實(shí)用性的基礎(chǔ)上 針對用戶提供不同場景下的功能定制，如美圖秀秀，在提供圖片美化的同時(shí)，針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。

08 可預(yù)測性

用戶能夠預(yù)測到下一步操作或者整個(gè)流程的交互，將會(huì)發(fā)生什么。舉例淘寶的購買流程。點(diǎn)擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點(diǎn)擊購買按鈕開始就能夠預(yù)測到下一步或者整個(gè)流程的步驟會(huì)發(fā)生什么。

三、可見性原則

可見性是用戶根據(jù)界面中可見元素確定產(chǎn)品可以做什么的設(shè)計(jì)原則。

01 物理功能可見性

物理功能可見性是基于對象的物理外觀。在視覺上，這種類型的功能可見性使用戶能夠立即清楚地看到在設(shè)計(jì)界面中能干什么。例如當(dāng)我們使用音樂類軟件，最常使用的就是播放/暫停，上一曲/下一曲。我們就會(huì)尋找去這些圖標(biāo)。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中，這就是功能可見性。

02 狀態(tài)可見性

當(dāng)信息或者列表過多時(shí)區(qū)分狀態(tài)的展示，將重要的狀態(tài)信息呈現(xiàn)在盡可能高的信息層級當(dāng)中。如iOS信息和QQ郵箱中區(qū)分未讀信息的微標(biāo)。如果將這些徽標(biāo)隱藏起來，會(huì)極大地破壞易用性，因?yàn)槿藗儗⒉坏貌贿M(jìn)入一個(gè)個(gè)郵件詳情頁當(dāng)中進(jìn)行確認(rèn)，才能獲取到原本由徽標(biāo)提供的狀態(tài)信息，這樣的互動(dòng)非常低效且乏味。

03 步驟可見性

當(dāng)用戶在執(zhí)行某項(xiàng)任務(wù)的時(shí)候應(yīng)該清晰明了的告知用戶目前在什么步驟，后面還有多少步驟，完整清晰的流程展示。如果將這些信息隱藏起來，用戶會(huì)困惑當(dāng)前進(jìn)行到哪一步，接下來還有多少步驟。

四、可供性原則

強(qiáng)調(diào)需要明確的視覺線索向用戶展示產(chǎn)品可以做什么。例如用戶界面中的交互元素（如滾動(dòng)條、命令按鈕和圖標(biāo)等）的設(shè)計(jì)必須能夠?yàn)橛脩籼峁┳銐蚯宄慕ㄗh，讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么，以及如何與它們進(jìn)行交互行為（點(diǎn)擊、長按、滑動(dòng) 等）

五、反饋

給用戶及時(shí)、恰當(dāng)?shù)姆答仯求w驗(yàn)設(shè)計(jì)中非常重要的一項(xiàng)原則；對每個(gè)用戶的操作都應(yīng)該有恰當(dāng)?shù)南到y(tǒng)反饋（包含視覺、聽覺、觸覺）。

01 告知性

明確告知用戶當(dāng)前操作發(fā)生了什么。如點(diǎn)擊下載和下載過程給出相對應(yīng)的反饋及進(jìn)度條。

02 動(dòng)作連接性

當(dāng)用戶產(chǎn)生某個(gè)動(dòng)作時(shí)，給予相對應(yīng)的連接反饋。如大概用戶點(diǎn)擊某個(gè)按鈕時(shí)，按鈕默認(rèn)的外觀與點(diǎn)擊后的外觀發(fā)生變化，結(jié)合現(xiàn)實(shí)世界的開關(guān)去思考（按下 開燈）動(dòng)作與反饋是連接的，即時(shí)的。

六、希克定律

?？硕桑?951年由威廉·埃德蒙·?？耸紫忍岢龅?，認(rèn)為人們從數(shù)組中選擇目標(biāo)的時(shí)間取決于可用選項(xiàng)的數(shù)量。也就是當(dāng)一個(gè)人所面臨的選擇越多，做出選擇所花的時(shí)間就越多，當(dāng)面臨選擇的數(shù)量增加，做出決定的時(shí)間也會(huì)跟著增加。

如京東篩選，在搜索結(jié)果頁會(huì)將篩選條件收起，因?yàn)槔锩娴暮Y選條件內(nèi)容過多。用戶會(huì)在當(dāng)前頁面選擇的時(shí)間增加.將一些項(xiàng)目分組放入二級下單，并且做好歸類，用戶能夠更迅速的作出決定。

七、費(fèi)茨定律

費(fèi)茨定律，是1954 年 由保羅.菲茨首次提出，在人機(jī)交互中指的是通過圖形用戶界面使用鼠標(biāo)或其他類型的指針從一個(gè)起始位置移動(dòng)到一個(gè)最終目的所需的時(shí)間。

T：代表完成移動(dòng)所需的平均時(shí)間

A：代表光標(biāo)開始/停止時(shí)間

B：代表光標(biāo)移動(dòng)速度

D：代表從起點(diǎn)到目標(biāo)中心的距離

W：代表目標(biāo)的尺寸

簡單來說就是指：隨著目標(biāo)的距離增加，移動(dòng)到目標(biāo)的時(shí)間更長，并且隨著目標(biāo)的尺寸減小，選擇目標(biāo)的時(shí)間也會(huì)增加。

所以在界面設(shè)計(jì)當(dāng)中會(huì)遵循越重要的功能，占據(jù)面基會(huì)越大。重要圖標(biāo)的點(diǎn)擊熱區(qū)也會(huì)增大。便于用戶快速點(diǎn)擊。

屏幕外邊緣和四個(gè)角部比屏幕中的其他位置都更容易被定為和選中，所以我們在進(jìn)行產(chǎn)品設(shè)計(jì)的過程中，會(huì)將常用/重要的操作放置在屏幕邊緣處，便于用戶操作。

八、神奇數(shù)字 7 ± 2

神奇數(shù)字7±2法則是1956年由 喬治·米勒 所提出的，根據(jù)喬治·米勒的研究，人類短期的記憶一般一次只能記住5-9個(gè)。也就是為什么大多數(shù)APP底部導(dǎo)航為5個(gè)的原因。

由于人類的大腦處理信息的能力有限，大腦會(huì)將復(fù)雜信息劃分成 塊 和小的單元。如：京東和每日優(yōu)鮮的分類處理。

人類短期的記憶一般一次只能記住5-9個(gè)，所以人們總是傾向于把一串?dāng)?shù)字拆分為多個(gè)較短的部分進(jìn)行記憶。如銀行卡號和手機(jī)號碼等。

九、復(fù)雜守恒定律

復(fù)雜守恒定律是1984年由 拉里·泰斯勒 所提出的，也稱作泰斯勒定律。認(rèn)為每一個(gè)產(chǎn)品設(shè)計(jì)的過程中，都有其固有的復(fù)雜性，存在著一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)產(chǎn)品設(shè)計(jì)的過程就不能再簡化了，你只能將固有的復(fù)雜性從一個(gè)地方轉(zhuǎn)移到另外一個(gè)地方。

在產(chǎn)品設(shè)計(jì)中，會(huì)盡量的簡化界面。當(dāng)功能過多時(shí)進(jìn)行一個(gè)整合的處理，跳轉(zhuǎn)或者滑動(dòng)操作。如查看更多或者常見的漢堡導(dǎo)航。

十、新鄉(xiāng)重夫：防錯(cuò)原則

新鄉(xiāng)重夫認(rèn)為遺忘有兩種：一種是疏漏，另一種是忘卻。他建議采用一些措施來預(yù)防產(chǎn)品的缺陷。

防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽，而不是人為操作疏忽。因此，在設(shè)計(jì)中要有必要的防錯(cuò)機(jī)制；比如常見的信息輸入狀態(tài)，未輸入置灰不可點(diǎn)，輸入變?yōu)榭牲c(diǎn)擊狀態(tài)。

微信拍一拍：微信在出了拍一拍功能之后，很多時(shí)候點(diǎn)擊頭像的時(shí)候會(huì)不小心拍到別人，現(xiàn)在的拍一拍是可以撤銷的，在客戶端鼠標(biāo)懸浮上就可以進(jìn)行撤回，移動(dòng)端長按出現(xiàn)撤回彈窗，兩分鐘內(nèi)有效。

微信朋友圈動(dòng)態(tài)：點(diǎn)擊返回圖標(biāo)會(huì)出現(xiàn)的彈窗，避免誤操作。利用防錯(cuò)原則，可以避免用戶重新編輯。微信當(dāng)中有很多友好的體驗(yàn)細(xì)節(jié)。可以多多去感受。

十一、奧卡姆剃刀原理

奧卡姆剃刀 定律 ：它是由14世紀(jì)英格蘭的邏輯學(xué)家、圣方濟(jì)各會(huì)修士奧卡姆的威廉 （William of Occam，約1285年至1349年）提出。 這個(gè) 原理 稱為“如無必要，勿增實(shí)體 ”，即“ 簡單有效原理 ”

01、只放置必要的元素

不必要的元素會(huì)降低設(shè)計(jì)的效率，不管是實(shí)體、視覺或者認(rèn)知上，多余的設(shè)計(jì)元素，有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息，可以用「更多信息」來實(shí)現(xiàn)。如夸克瀏覽器，首頁只放置重要功能 搜索 和幾個(gè)整合內(nèi)容的圖標(biāo)入口。

02、減少點(diǎn)擊次數(shù)

讓用戶通過較少的點(diǎn)擊就能找到他們想要的東西或使用功能。如音樂類軟件，在播放音樂之后進(jìn)入其他的tab，在上面都會(huì)懸浮播放/暫停的區(qū)域。都能夠隨時(shí)操作。

03、“老人”規(guī)則

就是產(chǎn)品的易用性，如果年紀(jì)大點(diǎn)的人，也能夠輕松使用所設(shè)計(jì)的產(chǎn)品那么是成功的。如抖音沉浸式的體驗(yàn)，簡單的滑動(dòng)就能夠觀看想看的內(nèi)容。目前抖音的用戶老年人也逐漸包含在內(nèi)，并且抖音會(huì)根據(jù)用戶的停留時(shí)長等推送用戶感興趣的內(nèi)容。

04、減少“段落”個(gè)數(shù)

頁面的使用率，當(dāng)你想要在一屏新增很多內(nèi)容時(shí)，頁面的布局就會(huì)變得擁擠和區(qū)域變小，容易過于干擾用戶做出選擇，重要功能不夠突出等?？淇藶g覽器首頁強(qiáng)化了搜索功能 和幾個(gè)整合內(nèi)容的圖標(biāo)入口；uc瀏覽器首頁內(nèi)容過多，當(dāng)用戶想要使用搜索功能時(shí)很容易被其他內(nèi)容干擾。

05、給予更少的選項(xiàng)

前面說到的?？硕烧f到，當(dāng)選擇的數(shù)量越多，用戶做決定的時(shí)間就更長。做過多的決定也是一種壓力，在展示內(nèi)容的時(shí)候要努力減少用戶的思維負(fù)擔(dān)。如攜程和馬蜂窩金剛區(qū)的內(nèi)容展示，馬蜂窩根據(jù)產(chǎn)品屬性放置了6個(gè)重要的功能入口，便于用戶更快的去選擇所想要的功能。

十二、設(shè)計(jì)和藝術(shù)的區(qū)別是什么？

最后我們來探討一下設(shè)計(jì)和藝術(shù)的區(qū)別是什么。我看到一句話覺得挺好的。設(shè)計(jì)和藝術(shù)的重要區(qū)別是：藝術(shù)拋出問題，而設(shè)計(jì)解決問題。

我們設(shè)想一個(gè)場景，當(dāng)你在藝術(shù)展廳站在一副名畫面前，你所思考的是什么？是驚嘆畫家的畫技還是整個(gè)畫面給你的感覺是一種故事，你會(huì)不會(huì)思考藝術(shù)家在作畫時(shí)的心情，處境，為什么要這么去畫？想表達(dá)怎么樣的情感？

然后我們再設(shè)想一個(gè)場景，同樣在藝術(shù)展廳，你身上帶有手機(jī)和相機(jī)。你會(huì)選擇用相機(jī)拍照還是用手機(jī)。答案是 相機(jī) 對吧？因?yàn)橄鄼C(jī)的拍照效果在任何環(huán)境下都會(huì)比手機(jī)好。這就是設(shè)計(jì)。是能夠真真切切的解決用戶問題的。能夠去感知到的。

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(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ì)識別文章地點(diǎn)

二、微博 — 社區(qū)游戲化設(shè)計(jì)提升互動(dòng)率

三、QQ — 通過手勢消除未讀消息

四、最右 — 情感化設(shè)計(jì)保護(hù)用戶隱私

五、抖音 — 深夜提醒貼心的功能

六、網(wǎng)易音樂 — 把分享游戲化

七、QQ音樂 — 歌詞沉浸式體驗(yàn)

八、盯潮 — 趣味性banner輪播，增加用戶點(diǎn)擊

一、馬蜂窩—人性化設(shè)計(jì)識別文章地點(diǎn)

產(chǎn)品體驗(yàn)

在馬蜂窩任意文章中，如果出現(xiàn)地區(qū)則可以通過當(dāng)前頁面對地區(qū)進(jìn)行提取

目標(biāo)

減少用戶操作路徑，降低產(chǎn)品使用成本

設(shè)計(jì)思考

日常在各個(gè)平臺瀏覽文章時(shí)大家都會(huì)遇到在文章內(nèi)會(huì)出現(xiàn)一些如地名、人名、物品等相關(guān)名詞，此時(shí)如果對名詞感興趣則需要切換場景去進(jìn)行搜索，而馬蜂窩在這方面深入洞察到用戶痛點(diǎn)，基于旅游社交產(chǎn)品背景下在添加地點(diǎn)直達(dá)（包含多個(gè)地點(diǎn)）功能，解決了對景點(diǎn)感興趣的用戶使用體驗(yàn)。

延伸設(shè)計(jì)

根據(jù)馬蜂窩這個(gè)人性化功能，是否可以在不同的產(chǎn)品內(nèi)進(jìn)行應(yīng)用，如在一些游戲社區(qū)中所提到的虛擬裝備、道具等物品添加彈窗簡要說明，幫助新手玩家快速理解玩法、功用等

二、微博—社區(qū)游戲化設(shè)計(jì)提升互動(dòng)率

產(chǎn)品體驗(yàn)

在微博動(dòng)態(tài)詳情中進(jìn)行長按點(diǎn)贊觸發(fā)動(dòng)畫

目標(biāo)

通過游戲化點(diǎn)贊玩法激勵(lì)用戶進(jìn)行互動(dòng)，提升互動(dòng)率

設(shè)計(jì)思考

打破傳統(tǒng)點(diǎn)贊動(dòng)畫，微博設(shè)計(jì)動(dòng)效采用大膽創(chuàng)新的全屏動(dòng)畫并搭配上散發(fā)的微表情，在長按與連點(diǎn)兩種手勢下動(dòng)效規(guī)律不同，消除用戶枯燥感，微博作為國內(nèi)最大社交平臺，頁面展示上已經(jīng)形成用戶深刻認(rèn)知，在不影響基本風(fēng)格上進(jìn)行彩蛋設(shè)計(jì)有效的提成用戶互動(dòng)率

三、QQ—通過手勢消除未讀消息

產(chǎn)品體驗(yàn)

在qq聊天頁面中對底部消息氣泡進(jìn)行拖動(dòng)，消除所有未讀消息

目標(biāo)

提升用戶操作效率和使用體驗(yàn)

設(shè)計(jì)思考

qq作為社交工具，每位用戶都會(huì)添加大量人、群以及關(guān)注各種推送，在這種場景下用戶每條消息都去操作需要花費(fèi)大量時(shí)間，QQ把傳統(tǒng)的消息已讀以一種簡單的交互手勢作為代替，相對全部已讀在操作上更佳便捷

延伸設(shè)計(jì)

通過qq的這個(gè)交互細(xì)節(jié)，在其他產(chǎn)品場景中同樣適用，如一些音樂、電臺相關(guān)的產(chǎn)品在離開播放頁面后播放狀態(tài)會(huì)懸浮在頁面之上，如果關(guān)閉的話則需要點(diǎn)擊暫停或者進(jìn)入詳情后關(guān)閉，也可以考慮使用拖動(dòng)手勢進(jìn)行關(guān)閉

四、最右—情感化設(shè)計(jì)保護(hù)用戶隱私

產(chǎn)品體驗(yàn)

在最右登錄頁面輸入密碼時(shí)ip形象會(huì)出現(xiàn)捂眼睛動(dòng)作

目標(biāo)

強(qiáng)化用戶隱私和心理信任感

設(shè)計(jì)思考

日常在使用一些敏感性操作時(shí)我們都會(huì)注重隱私，如一些表單的填寫、密碼輸入等相關(guān)操作，最右在登錄頁面使用到了ip形象的動(dòng)作去向用戶傳遞心理上的暗示，這種手法很好的把品牌曝光與體驗(yàn)相結(jié)合

五、抖音—深夜提醒貼心的功能

產(chǎn)品體驗(yàn)

長時(shí)間刷抖音時(shí)會(huì)系統(tǒng)會(huì)提示，在深夜使用時(shí)會(huì)支持設(shè)置提醒時(shí)間

目標(biāo)

防止用戶疲勞使用產(chǎn)品，定時(shí)緩解注意力

設(shè)計(jì)思考

在使用抖音時(shí)大家可能會(huì)經(jīng)常深陷其中無法自拔，往往忽略了時(shí)間影響身體健康，提醒機(jī)制則在深夜不同時(shí)間段進(jìn)行間接提示，雖然在用戶體驗(yàn)中不提倡打擾用戶，但在短視頻這個(gè)場景下如果過渡沉浸便會(huì)造成反向影響

六、網(wǎng)易音樂—把分享游戲化

產(chǎn)品體驗(yàn)

在網(wǎng)易音樂對某首音樂進(jìn)行分享時(shí)可以對音樂進(jìn)行個(gè)性化定制，對歌曲進(jìn)行編輯添加文字、圖片、語音等以視頻方式呈現(xiàn)

目標(biāo)

把分享以一種偏游戲化的形式呈現(xiàn)，提升用戶分享率

設(shè)計(jì)思考

傳統(tǒng)分享基本是直接讓用戶分享到第三方平臺，而網(wǎng)易音樂這個(gè)設(shè)計(jì)把分享場景進(jìn)行多元化處理，以定制音樂罐子為切入點(diǎn)，用戶自由編輯個(gè)性化處理裝進(jìn)罐子進(jìn)行分享，是一種視頻剪輯融合音樂的一種新玩法，破圈傳統(tǒng)枯燥的分享場景，提升用戶分享率

七、QQ音樂—歌詞沉浸式體驗(yàn)

產(chǎn)品體驗(yàn)

在音樂歌詞頁面中可以支持設(shè)置歌詞主題

目標(biāo)

新穎的呈現(xiàn)手段，強(qiáng)化用戶沉浸式聽歌

設(shè)計(jì)思考

傳統(tǒng)的音樂產(chǎn)品在詳情頁面展示了一屏歌曲歌詞，面對大量的文字用戶在尋找某段歌詞時(shí)效率不是很高，對大量的字段也極為枯燥，而qq音樂使用了創(chuàng)新的展現(xiàn)形式，把手機(jī)主題概念融入歌詞中達(dá)到新的視覺體驗(yàn)，根據(jù)不同的主題對應(yīng)的動(dòng)畫也不同，大大的提高了用戶的視聽體驗(yàn)

八、盯潮—趣味性banner輪播，增加用戶點(diǎn)擊

產(chǎn)品體驗(yàn)

在盯潮首頁banner處對其進(jìn)行拖動(dòng)甩出

目標(biāo)

通過交互玩法提升用戶對banner的點(diǎn)擊

設(shè)計(jì)思考

banner在頁面通常點(diǎn)擊率較低，用戶會(huì)默認(rèn)為廣告，在盯潮內(nèi)滑動(dòng)banner時(shí)會(huì)發(fā)現(xiàn)banner可以進(jìn)行拖動(dòng)，并且松開時(shí)會(huì)自由掉多，把傳統(tǒng)的banner切換做出了可玩性更高的效果，同時(shí)這個(gè)設(shè)計(jì)手段也能吸引用戶注意力引導(dǎo)用戶對banner進(jìn)行點(diǎn)擊

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司