用戶體驗設(shè)計師經(jīng)常需要兼職各個角色職責，除了線框圖和原型制作之外，還有可能與團隊一起研究、寫作等問題。這樣的例子不勝枚舉，用戶體驗是一個不斷發(fā)展的多學(xué)科領(lǐng)域，因此優(yōu)秀的 UX 設(shè)計需要廣泛的技能開發(fā)，UX寫作位居榜首。

一、內(nèi)容策略簡介

關(guān)注用戶從內(nèi)容開始，內(nèi)容策略是所有產(chǎn)品信息的制作和開發(fā)。用戶體驗（UX）寫作是該學(xué)科的專長，它專注于幫助用戶用語言實現(xiàn)他們的目標。

語言幫助用戶到達他們想去的地方，通過關(guān)注用戶想要實現(xiàn)的目標，內(nèi)容策略可以建立忠誠度和信任度。

UX設(shè)計師思考頁面上的信息層次結(jié)構(gòu)，然后，這將指導(dǎo)用戶操作。UX與研究人員一起測試有關(guān)語言的假設(shè)并提供專業(yè)的見解。

當您擁有 UX 寫作的基礎(chǔ)，并參與品牌建設(shè)時，就會發(fā)生驚人的事情，用戶體驗寫作可以讓品牌茁壯成長。

二、用戶體驗寫作最佳三個原則

1.清晰

通常在產(chǎn)品中，使用的詞是軟件操作，請用動詞，它往往是句子中最有力的部分。它將與用戶的某些操作有關(guān)，

保障用戶使用中清楚，需要刪除技術(shù)術(shù)語并將操作置于用戶的上下文中。

2.簡潔

簡潔不僅意味著簡短，還意味著簡單高效。當我們寫作時，需要查看我們的信息每個詞語都有不同的工作。

以上是產(chǎn)品寫作中的常見問題，在這里不需要標題。在系統(tǒng)接口中很常見，研發(fā)提供一種狀態(tài)，我們通過這種狀編寫文案。我們應(yīng)該確保內(nèi)容優(yōu)于設(shè)計，視覺效果與要表達的內(nèi)容一致。盡量不要把信息塞進不適合的盒子（代碼）里。

在這里，我們刪除了標題。正如研究表明，大多數(shù)人不會閱讀屏幕上出現(xiàn)的每個詞語，用戶傾向于掃描。他們的眼睛會遵循 F 形圖案。閱讀第一行，第二行，然后開始向下跳過頁面，只捕捉每個句子的第一個或第二個詞。出于這個原因，保持我們的文本不僅簡潔而且前置。將重要概念放在首位，這樣做是為了讓人們在瀏覽頁面時能看到那些重要的詞。

這個原則永遠適用，將最重要的文本放在前面，然后無情地編輯后面的內(nèi)容。

3.有用

號召性用語 (CTA) 引導(dǎo)人們進行下一步，您希望引導(dǎo)用戶到達他們想去的地方，號召性用語需要與用戶想要做的事情產(chǎn)生共鳴，這里的“好的”不是一個好的行動號召。

“再試一次”是一個不錯的選擇，這不是全部場景，如果用戶忘記了密碼，而唯一的按鈕只有“再試一次”，用戶可能會感到沮喪，我們需要給用戶多一個選項「忘記密碼」。

注意寫作時需要結(jié)合使用場景，它可能需要提供的一些基本功能，但可以提升產(chǎn)品的用戶體驗。

4.最佳實踐總結(jié)

如果您注意這三個原則，您將更好地與用戶建立聯(lián)系。

這三個原則并不總是協(xié)調(diào)一致的，他們之間有一種張力在互相競爭。

當我們使文本清規(guī)則時，文案仍然很長，而且不太好閱讀。當我們使文本簡潔規(guī)則時，它使文案更短，但可能犧牲一些清晰度為代價。最后，當我們使文本有用規(guī)則時，它變得更長且更不易閱讀。

三、建立產(chǎn)品品牌文案

1.品牌原則

從一個品牌中，我們可以篩選出 3 或 4 個形容詞，以及希望用戶如何看待它。提取這些形容詞，可以采用頭腦風暴練習。

想象一下，如果要設(shè)計一個約會產(chǎn)品

您會在產(chǎn)品資料中加入什么詞或信息？讓它在眾多產(chǎn)品中脫穎而出，是什么讓用戶覺得它最有趣？

是什么讓用戶想要點擊并想要了解更多信息？

然后，您可以將這些品質(zhì)提煉成描述性詞語，這些將成為您的品牌原則。

Google Pay 的原則是：新鮮、善解人意、平易近人。 

2.語氣

想想您在不同的環(huán)境或情緒中聽到聲音是什么樣，這是語氣。

聲音和語氣之間差異，是聲音傳播手段，語氣是根據(jù)情況或內(nèi)容而不斷調(diào)整的。在一個產(chǎn)品中，就像在不同的情況下以不同的方式與用戶交談，語氣的利用容易帶用戶進入情感化的設(shè)計。

例如：

• 抱歉，網(wǎng)絡(luò)連接失敗，請重新連接
• 暫無內(nèi)容，請刷新試試

3.音譜（產(chǎn)品階段）

將不同的階段映射到用戶旅程中，可確保用戶在整個產(chǎn)品體驗中以一致的方式使用產(chǎn)品文案。

對于產(chǎn)品，您的文案寫作可能從信息豐富到鼓舞人心或者幽默風趣。創(chuàng)建產(chǎn)品開端與終端后，您需要確定要映射的用戶旅程中的哪些時刻，考慮用戶體驗中不同的里程碑或交互，如注冊、引導(dǎo)、或錯誤提示之類。

為了幫助您確定這些將落在頻譜中的哪個位置，您可以考慮：

• 用戶的目標是什么？
• 那一刻他們可能有什么感受？
• 你希望他們有什么感覺？ 

四、我們做一些寫作練習

現(xiàn)在，我們將前面講的內(nèi)容，融合在一起做一次UX 寫作練習

UX寫作原則

舉個例子，第一次使用 Android Pay 時需要對用戶說什么？

第1步

在流程開始時，從以下描述性內(nèi)容開始：

第2步

思考良好的用戶體驗寫作的三個原則，文本清晰有用，但并不簡潔。讓我們查看看哪些信息是必不可少的，哪些部分可以使用視覺效果？最后編輯為如下所示：

Google Pay 的原則是：新鮮、善解人意、平易近人。

第 3 步

文案已經(jīng)清楚，簡潔和有用，現(xiàn)在需要考慮語氣詞，還有就是“這段文字是否傳達了品牌？”不多，感覺很一般。

因此，回到品牌原則，需要考慮如何讓它更新鮮、更令人興奮，因為這可能是用戶的第一印象。

五、你的用戶體驗寫作清單

有了這份清單，您就可以讓產(chǎn)品在語言上脫穎而出：

• 用戶至上：關(guān)注您的用戶
• 清晰：用沒有行話的語言和上下文寫作
• 簡潔：以高效且可掃描的風格書寫
• 有用的：以指導(dǎo)下一步行動的方式寫作
• 關(guān)于品牌：定義品牌的聲音并應(yīng)用適當?shù)恼Z氣

行業(yè)對設(shè)計師的要求?直都在不斷革新，只有「?技之?」的設(shè)計師已經(jīng)很難滿??業(yè)需要，產(chǎn)品分析已經(jīng)不僅僅是產(chǎn)品經(jīng)理的工作內(nèi)容，對于 UI 設(shè)計師來說，也是必備技能之一了，尤其是對于 B 端領(lǐng)域的設(shè)計師來說，更需要拓寬視野，思維前置。

那么，該如何去做產(chǎn)品分析呢？本文將從產(chǎn)品分析是什么，如何做兩個方面來講述，為大家提供思路，做真正落地的對設(shè)計有幫助的產(chǎn)品分析，提高自己理解業(yè)務(wù)、處理業(yè)務(wù)、解決問題的能力，體現(xiàn)出設(shè)計師的價值。

1.1 產(chǎn)品分析定義

1.11 B端產(chǎn)品是什么

對于 B 端產(chǎn)品來說，它只有一個目標，就是解決問題，通過對問題的分析得出解決方案，而任何一個問題都不會只有一種解決方案，在權(quán)衡利弊后得出了最終的解決方案，產(chǎn)品就是解決方案的表現(xiàn)形式和實際載體。

1.12 產(chǎn)品分析是什么

從設(shè)計師的角度來說，產(chǎn)品分析通常是挖掘產(chǎn)品缺陷，優(yōu)化產(chǎn)品體驗，為產(chǎn)品迭代提供依據(jù)，比如：通過深度體驗產(chǎn)品，挖掘產(chǎn)品的在功能、交互體驗方面的不足，并通過分析制定產(chǎn)品優(yōu)化方案。一款產(chǎn)品從淺至深擁有無數(shù)的可被挖掘的信息，這些信息本身是龐雜冗余無意義的，只有通過分類和清洗才能得到對人有意義的信息，本質(zhì)上來說，產(chǎn)品分析就是在做信息分類和清洗的工作。

1.2 產(chǎn)品分析與市場分析、競品分析

1.21 市場分析

市場分析是對產(chǎn)品所在的市場進行宏觀的競爭態(tài)勢和市場規(guī)模的分析。市場分析主要包括行業(yè)背景、市場現(xiàn)狀和商業(yè)模式三部分?？梢钥吹?，市場分析其實是從很宏觀的一個角度來切入，更偏向于戰(zhàn)略層內(nèi)容，因此市場分析也是三者中距離設(shè)計師最遠的一個概念。用通俗的話來說，市場分析最主要的目的就是分析產(chǎn)品是否賺錢。

1.22 競品分析

廣泛意義上說，競品分析就是根據(jù)分析目的，找到切入角度，對競爭對手或市場進行客觀分析，找到競品或自己的優(yōu)勢與不足，為下一步?jīng)Q策提供科學(xué)依據(jù)，其實就是「知己知彼」的過程。對于設(shè)計師而言，競品分析的目的更傾向于尋找解決方案，比如：通過競品分析來尋找參考從而解決自己當前遇到的問題。

1.3 產(chǎn)品分析對設(shè)計師的意義

• 1. 設(shè)計：幫助設(shè)計師理解產(chǎn)品的歷史和現(xiàn)狀，避免設(shè)計時天馬行空無法落地
• 2. 業(yè)務(wù)：幫助設(shè)計師快速理解業(yè)務(wù)和融入新團隊
• 3. 溝通：可以幫助設(shè)計師同產(chǎn)品經(jīng)理更好地進行對話，降低溝通成本

1.4 難點——業(yè)務(wù)難以理解

不同于 C 端，B 端往往有很堅固的行業(yè)壁壘，所涉及業(yè)務(wù)也非常難以理解，究其原因，來自以下兩個方面：

• 1. 業(yè)務(wù)邏輯復(fù)雜
• 2. 遠離日常生活

1.41 業(yè)務(wù)邏輯復(fù)雜

B 端產(chǎn)品很多時候，都是在原有線下業(yè)務(wù)的基礎(chǔ)上進行數(shù)字化。邏輯的復(fù)雜度本質(zhì)上是來源于這個行業(yè)多年來積累的足夠成熟的業(yè)務(wù)流程與規(guī)范，而這些東西沒有辦法速成，只能靠不斷地積累來增進理解。

1.42 遠離日常生活

C 端產(chǎn)品的設(shè)計中，設(shè)計師大部分情況下都或多或少地就是用戶本身，或者帶有用戶屬性，比較容易產(chǎn)生同理心，去發(fā)現(xiàn)問題解決痛點。

而 B 端產(chǎn)品不是給普通用戶使用的，是給特定群體使用的，這種特質(zhì)就決定了設(shè)計師很難去真正地理解用戶的處境，設(shè)計師最厲害的特質(zhì)——同理心也很難派上用場。

1.5 誤區(qū)

有的設(shè)計師同學(xué)，一接到產(chǎn)品分析的任務(wù)，到手就是先去網(wǎng)上看看別人是怎么做的，然后按著人家的結(jié)構(gòu)對自己的產(chǎn)品進行一通分析，其中不乏用到了「用戶體驗五要素」、「SWOT分析」等看起來高大上的方法論。

按這樣做，產(chǎn)出的分析報告不能說錯，但是最起碼是不恰當?shù)?，對設(shè)計上的幫助微乎其微。其中有這樣兩個問題：

• 1. 與產(chǎn)品經(jīng)理邊界混淆
• 2. 注重方法論，流于表面

1.51 與產(chǎn)品經(jīng)理邊界混淆

產(chǎn)品經(jīng)理是產(chǎn)品的第一負責人，需要對產(chǎn)品的整個生命周期負責，說人話就是產(chǎn)品經(jīng)理負責產(chǎn)品做什么不做什么，該什么時候做，而設(shè)計師關(guān)注的是產(chǎn)品的用戶體驗。產(chǎn)品是商業(yè)的代言人，而設(shè)計師是用戶的代言人，二者本質(zhì)上的不同，就決定了在做產(chǎn)品分析時關(guān)注點必然不同。如果按著產(chǎn)品經(jīng)理的思路來做產(chǎn)品分析，得出大環(huán)境之類的太過于泛化的結(jié)論對設(shè)計沒有什么實質(zhì)性的幫助。

1.52 注重方法論，流于表面

用戶體驗五要素，swot，等等這些高大上的方法論看起來非常有用，從多個維度把一款產(chǎn)品分析得非常清楚。可真實的情況時，往往新手設(shè)計師同學(xué)既不懂方法論的本質(zhì)，也不懂使用場景，只是盲目地套用，導(dǎo)致產(chǎn)出的是一篇「八股文」一般的產(chǎn)品分析報告，過于全面但沒有重點，什么都是點到為止，對自己理解業(yè)務(wù)和輔助設(shè)計沒有實質(zhì)性的幫助。

我認為，「方法論」本質(zhì)上是經(jīng)驗主義，使用過去解決問題的方式來解決新的問題。在一定程度上，方法論是有用的，一些簡單的問題，確實是有固定解法的，而且，解決問題也更快。但是在更難更特殊的場景下，方法論不再管用了。很多時候，問題表面上看起來一樣，可是由于問題的背景不同，所以解法也是不一樣的，這時候再采用方法論，就會產(chǎn)生思維固化，強行去套方法流程，得到的一定不是最正確的答案。

在確定了目標和分析重點之后，我們就可以開始進行分析產(chǎn)出產(chǎn)品分析報告了，在這里我整理了幾個撰寫時的原則供大家參考：

• 1. 避免主觀
• 2. 思考要全
• 3. 自上而下

2.1 避免主觀——不要把自己當成使用者

第一點是我們要避免去主觀臆斷功能的合理性。正如我上面提到的一樣，我們并非 B 端產(chǎn)品的核心用戶，有些我們感覺反常的地方，但是其實有它的合理性，因為 B 端用戶的痛點往往是在特定的工作場景下產(chǎn)生的。因此，在不了解真正用戶和場景的情況下，僅憑經(jīng)驗下的結(jié)論往往是錯誤的。

我之前的一個項目的設(shè)計中，在給圖表配色時，我最初的一個版本是用的近似色去完成的，在發(fā)給產(chǎn)品經(jīng)理初審時被打回來了，理由是這種配色不夠明顯。我追問原因后才知道，我們的一部分用戶是年齡比較大的用戶，對比度足夠高才能方便他們看清楚。最后出的一個版本是對比度非常高的配色，盡管從設(shè)計的角度來看這種配色美觀度不足，但是能夠讓用戶看得清楚。

在這個例子中，用戶對于美觀度并沒有很高的要求，反而對于數(shù)據(jù)的識別度要求更高。我們常聽的一句話是「己所不欲，勿施于人」，然而在B端的設(shè)計中，我們更要做到「己所欲，亦勿施于人」。

2.2 思考要全——使用者和決策者都要考慮

B 端產(chǎn)品有一個很重要的特點，購買決策者與使用者的割裂。我們在思考一個功能時，不能僅僅考慮使用者的體驗，也要考慮決策者的想法。

比如釘釘?shù)摹敢炎x未讀」這個功能，相信大家對這個功能是槽點滿滿。但是在 B 端產(chǎn)品中，決策鏈上游是購買決策者即老板，因此就有了這個功能。如果只考慮到用戶體驗，這個設(shè)計從一開始就不該出現(xiàn)。但是，與 C 端產(chǎn)品的流量思維不同，B 端產(chǎn)品不是靠體驗來吸引用戶存活的，而是靠滿足決策者的需要來活下去的。很多大家感覺不好用或者體驗很差勁的 B 端產(chǎn)品，仍然活得很好，就是這個道理。

說句題外話，釘釘已經(jīng)注意到了這個細節(jié)，在去年的一個演講上，釘釘總裁也提到了對這個功能點的考慮，他舉了一個場景，在不改變現(xiàn)有設(shè)計的情況下解決了這個問題，通過智能手表等外設(shè)來預(yù)覽消息，而手機和電腦依然顯示未讀，自己考慮好了的時候再去回復(fù)。

2.3 自上而下——從宏觀到微觀

從戰(zhàn)略層到功能架構(gòu)，再到每個功能細節(jié)，采用金字塔原理去遍歷，避免遺漏的同時層層深入。

在此處，我介紹一下我認為一份合格的產(chǎn)品分析報告應(yīng)該包含的部分，各位設(shè)計師同學(xué)可以根據(jù)自己的需要進行適當調(diào)整。

3.1 文檔說明

3.11 版本說明

因為產(chǎn)品分析是有一定的時效性的，且是針對某一個具體版本去進行分析的，所以在文檔開頭要列出自己所分析產(chǎn)品的版本，例如（飛書 V5.6.9，釘釘 6.3.35）。

3.12 分析時間

即設(shè)計師進行產(chǎn)品分析的時間，留檔以供以后查看。

3.2 產(chǎn)品概述

此處要回答的問題是，產(chǎn)品是用來干嘛的，給誰設(shè)計的以及怎么賺錢的。

3.21 產(chǎn)品定位

即產(chǎn)品是用來干嘛的，不需要特別具體，只需要在大方面上對產(chǎn)品進行概括即可。舉個栗子，抖音定位是一款短視頻消費型產(chǎn)品，以“內(nèi)容”的新鮮有趣為主，強調(diào)分享和信息獲取，滿足幸?？鞓返拿篮脮r刻需要。

3.22 目標用戶

即產(chǎn)品是給誰設(shè)計的，在此處需要對客戶和用戶做區(qū)分?？蛻粢话闶侵钙髽I(yè)的 CEO/管理者，他們來決定是否要斥「巨資」購買一款軟件。比如說某公司的 CEO 最終決定買釘釘還是飛書作為辦公協(xié)同軟件。而用戶一般是企業(yè)內(nèi)的員工，他們使用軟件來完成一些日常工作。分析目標用戶的意義是，在之后的分析中，我們都要以用戶為落腳點，去分析功能的合理性。

需要注意的是，此處并不需要去做一套完整的用戶畫像，只需要大概描述一下是產(chǎn)品的客戶和用戶的職位和核心需求即可。

舉個栗子，對于某客服工作臺產(chǎn)品，

• 用戶：客服，主要職責是接受用戶咨詢，幫助顧客解答疑惑。
• 客戶：公司 CEO，目標是對業(yè)務(wù)情況進行把控，提高客服效率。

3.23 商業(yè)模式

即產(chǎn)品如何賺錢，在這里，我們并不需要用各種很高端的工具——比如商業(yè)模式畫布，去分析商業(yè)模式，我們僅需要知道產(chǎn)品的賺錢方式即可。作為設(shè)計師，我們不需要有產(chǎn)品經(jīng)理那么專業(yè)的商業(yè)思維，但是我們也一定要能夠從商業(yè)角度理解產(chǎn)品的價值，一款產(chǎn)品最健康的狀態(tài)一定是用戶價值與商業(yè)價值并存。因為本質(zhì)上而言，用戶體驗也是商業(yè)價值的一部分。

對于B端產(chǎn)品而言，有兩種最常見的售賣方式：

• 1. 本地部署模式
• 2. SaaS 模式

1. 本地部署 —— 按軟件數(shù)量售賣

本地部署是指產(chǎn)品的應(yīng)用、數(shù)據(jù)都存儲在一臺計算機中，這臺計算機不與其他任何服務(wù)器、計算機相連。21世紀之前的傳統(tǒng) IT 公司大部分都屬于這類，比如 Adobe 旗下的產(chǎn)品（盡管他們也在做云，但是更多情況下我們還是把 PS 當做本地產(chǎn)品來使用），那時候 B 端企業(yè)的商業(yè)模式是：主要服務(wù)于大企業(yè)客戶，通過與頂級的合作伙伴合作，推出頂級的產(chǎn)品，提供一整套軟硬件解決方案，并進行深度服務(wù)，一次性收取高昂的軟硬件費用，并且每年加收不少服務(wù)費。

2. SaaS —— 訂閱制

21 世紀后，隨著云計算技術(shù)的發(fā)展，越來越多的產(chǎn)品開始部署在云上，也就逐漸發(fā)展成了現(xiàn)在的 SaaS 產(chǎn)品，從這個角度來講，我們通常所說的 SaaS 產(chǎn)品其實就是將本地部署變?yōu)樵贫瞬渴鸬漠a(chǎn)品服務(wù)。

這時候 B 端企業(yè)的主要商業(yè)模式是：不僅服務(wù)于大型企業(yè)，也服務(wù)于中小企業(yè)。以訂閱制的方式，定期收取費用，并且提供不同的版本，進行差異化定價，實現(xiàn)收益最大化。

舉個例子，藍湖就是提供了四個版本并且以季付或年付的方式進行收費。

3.3 功能架構(gòu)

3.31 什么是功能

將需求轉(zhuǎn)化為對應(yīng)的軟件層面可實現(xiàn)的能力，即功能，功能可以實現(xiàn)需求所期望達成的目標。

3.32 什么是功能架構(gòu)

一個完整的 B 端產(chǎn)品包含若干功能，將一套功能依據(jù)業(yè)務(wù)進行分類整合，形成的抽象化業(yè)務(wù)模型即功能架構(gòu)。

3.33 功能架構(gòu)與信息架構(gòu)

功能架構(gòu)指的是產(chǎn)品是如何由這些功能組成的。我們在分析功能架構(gòu)時實際上更偏向于產(chǎn)品的實現(xiàn)模型。

信息架構(gòu)是包括組織系統(tǒng)、標簽系統(tǒng)、導(dǎo)航系統(tǒng)、搜索系統(tǒng)在內(nèi)的綜合系統(tǒng)。我們在分析信息架構(gòu)時，分析的是這個產(chǎn)品是如何將不同的功能組合在一起展現(xiàn)在用戶面前的，分析的是產(chǎn)品的呈現(xiàn)模型。

3.34 為什么要分析功能架構(gòu)

一個成熟的 B 端產(chǎn)品甚至會有甚至會有三四百個功能，我們在分析功能細節(jié)前，必須要先厘清架構(gòu)，以一種抽象的框架視角來全局思考，而不是也僅僅以用戶的視角來看產(chǎn)品的表象。

3.35 如何分析功能架構(gòu)

收集

真正地去使用產(chǎn)品，并將產(chǎn)品的所有功能與模塊收集到一起。

整理

以模塊作為分類依據(jù)，將所有功能分到不同的模塊里，必要的話，可以繼續(xù)細分子模塊。

在這里要注意，一個功能是否屬于某一個模塊，不能以這個功能是否在某個頁面為依據(jù)。一個頁面出現(xiàn)了某個功能，只是因為這個場景下用戶需要這個功能，而不是這個功能屬于這個頁面。

以飛書后臺為例，很多人在分析時會把首頁也作為功能架構(gòu)圖中的一個節(jié)點去分析，這是錯誤的。

首頁只是功能的聚合，而非功能模塊，例如「添加成員」這一功能應(yīng)該屬于「組織架構(gòu)」模塊中，如果將首頁也加入分析，勢必會出現(xiàn)功能的重復(fù)。

3.4 功能分析

在分析完整個功能架構(gòu)之后，我們可以深入到每個功能的細節(jié)了。其中包括以下兩點：

• 1. 功能使用流程
• 2. 功能背后的需求

3.41 功能使用流程

通過繪制功能的使用流程，我們可以模擬用戶在使用產(chǎn)品時的流程，發(fā)現(xiàn)一些從宏觀角度上忽略的點。在繪制時，要注意的是，要控制在頁面 & 操作維度，避免拔高到功能維度甚至業(yè)務(wù)維度。

3.42 背后的需求

我們除了要知道這個功能該怎么用之外，還要知道功能與業(yè)務(wù)的關(guān)系 —— 功能背后的需求。

3.43 需求分析

在分析背后的需求時，除了知道這一需求是什么，如果可以多走一步，對需求進行分類，那對于我們了解產(chǎn)品時大有裨益的。

3.44 馬斯洛模型的局限性

關(guān)于需求的分級，在 C 端中常用的模型是馬斯洛需求模型，但是這一理論并不適用于 B 端，主要是由于以下原因：

• 1. 馬斯洛需求研究的是人，而 B 端產(chǎn)品面向的是企業(yè)和組織
• 2. B 端系統(tǒng)一般復(fù)雜度較高，除了業(yè)務(wù)目標之外，還要考慮軟件架構(gòu)、體系構(gòu)建等問題。

3.45 B 端產(chǎn)品的需求劃分

一般而言，我們可以將需求劃分為功能性需求與非功能性需求。非功能性需求，指的是隱藏在功能需求背后以及開發(fā)需要考慮的的需求，也叫作“跨功能需求”。最常見的非功能性需求就是產(chǎn)品的響應(yīng)時間，一般非功能性需求是由開發(fā)和測試同學(xué)考慮的。

而對于功能性需求，有三大類：業(yè)務(wù)需求、功能需求、產(chǎn)品需求。而這三類需求也有比較立體的層次關(guān)系：

業(yè)務(wù)需求，提出者是業(yè)務(wù)范圍、業(yè)務(wù)模式和業(yè)務(wù)規(guī)則的制定者，一般是指業(yè)務(wù)方的高層人物，比如 CEO、高級經(jīng)理等。產(chǎn)品設(shè)計是服務(wù)于業(yè)務(wù)定位的，進而使得產(chǎn)品戰(zhàn)略遵循于企業(yè)的發(fā)展戰(zhàn)略，只有這樣產(chǎn)品方向才不至于發(fā)生偏差，因此，他們提出的需求一般不能違反，換句話說，他們提出的需求是整個系統(tǒng)設(shè)計的最高綱領(lǐng)。

用戶需求，提出者是基層管理者和執(zhí)行者。他們關(guān)心的是如何使用產(chǎn)品完成自己的工作，提出的需求相對細節(jié)，例如對操作、流程上的訴求。

產(chǎn)品需求，由于 B 端產(chǎn)品的復(fù)雜性，在建設(shè)時需要考慮到功能復(fù)用問題，以及與其他系統(tǒng)的架構(gòu)交互問題。舉個例子，語雀 App 是阿里旗下的產(chǎn)品，在開發(fā)登錄界面時，沒有重新開發(fā)，而是集成了阿里云的 SDK。產(chǎn)品需求本身對業(yè)務(wù)實現(xiàn)沒有價值，它的價值體現(xiàn)在節(jié)省人力和優(yōu)化軟件架構(gòu)上。

三者雖然并沒有絕對意義上的優(yōu)先級順序，但是一般而言，B 端產(chǎn)品時優(yōu)先考慮業(yè)務(wù)需求，其次關(guān)注用戶體驗，滿足用戶需求，最后才是考慮產(chǎn)品需求。了解了這一點，我們對功能背后的需求進行分類后，就可以從更高的視角來分析功能的設(shè)計邏輯，而不僅僅是停留在好不好看的層次上對功能進行分析。

3.5 交互設(shè)計

3.51 交互設(shè)計是什么

在《交互設(shè)計原理》中是指：對于交互式數(shù)字產(chǎn)品、環(huán)境、系統(tǒng)和服務(wù)的設(shè)計，定義人造物的行為方式，即人工制品在特定場景下的反應(yīng)。

在《交互設(shè)計精髓4》定義為：設(shè)計交互式數(shù)字產(chǎn)品、環(huán)境、系統(tǒng)和服務(wù)的設(shè)計，聚焦于如何設(shè)計行為。

而在《超越人機交互》中則是指：設(shè)計交互式產(chǎn)品來支持人們在日常工作生活中交流和交互的方式，創(chuàng)造用戶體驗以增強人們工作、生活以及通信的方式，聚焦在實踐上，即怎樣設(shè)計用戶體驗。

交互設(shè)計即行為設(shè)計，關(guān)注于如何設(shè)計系統(tǒng)如何幫助用戶更高效愉快地達成目標。

3.52 怎么分析交互設(shè)計

僅僅知道是什么遠遠不夠，我們更要知道如何去分析一個產(chǎn)品的交互設(shè)計好壞。在這里，我提供兩個思路供大家參考：

• 1. 從行為維度拆分
• 2. 十大可用性原則

從行為維度拆分

上文提到，交互設(shè)計的對象是行為，而這里的「行為」可以拆分為 3 個部分：導(dǎo)航，輸入和展示。

導(dǎo)航系統(tǒng)：即用戶在哪里和去哪里

設(shè)計要點：

• 1. 導(dǎo)航不能是一個頁面上可以鏈接到其他所有頁面，而是要有的放矢，選擇用戶關(guān)心的，更想要去的頁面添加導(dǎo)航。
• 2. 導(dǎo)航要顯示出來導(dǎo)航本身與所包含內(nèi)容的關(guān)系
• 3. 導(dǎo)航要顯示所包含內(nèi)容與當前頁面的關(guān)系

例如：掘金的頂部導(dǎo)航，既體現(xiàn)出來了導(dǎo)航本身與包含內(nèi)容的關(guān)系（導(dǎo)航的標簽是當前內(nèi)容的概括），又體現(xiàn)出來了內(nèi)容與當前頁面的關(guān)系（當前頁面是首頁下的一個子頁面）。

輸入系統(tǒng)：即用戶向系統(tǒng)提供信息

這里的輸入不僅僅指我們?nèi)粘Ｖ械妮斎?，而是一個廣義的概念，將所有用戶向系統(tǒng)提供信息的方式統(tǒng)稱為輸入。輸入可以通過多種方式完成，包括輸入命令、按下按鈕、快捷鍵、甚至打手勢、語音等方式。

設(shè)計要點：

• 1. 高效，例如絕大多數(shù)的產(chǎn)品都提供了快捷鍵提高用戶的操作效率。

• 2. 準確，例如 sketch 里方向鍵的作用是移動 1 像素，使用戶在使用鼠標快速移動的基礎(chǔ)上，也可以準確操作。
• 3. 防錯，例如大部分的產(chǎn)品都會在危險操作前二次確認。

• 4. 符合預(yù)期，例如在「幕布」中，在畫布區(qū)和在滾動條區(qū)都向下拖動鼠標，操作結(jié)果是相反的，但卻符合用戶的預(yù)期。
• 5. 適當隱喻，隱喻是指提供熟悉的實體，是人們能夠容易地理解底層概念模型并知道在界面上做什么。例如我們所熟悉的購物車就是現(xiàn)實世界中購物車的隱喻，幫助用戶快速理解軟件的使用邏輯。

展示系統(tǒng)：即系統(tǒng)向用戶提供信息

設(shè)計要點：

• 1. 突出重點。用戶的瀏覽動作不是讀，不是看，而是掃。設(shè)計中應(yīng)該突出重點，弱化和剔除無關(guān)信息。
• 2. 保持一致性。樣式規(guī)范一致性給用戶帶來品牌信賴感的同時，還能夠通過一致的重復(fù)降低用戶反復(fù)學(xué)習成本。
• 3. 及時反饋。系統(tǒng)應(yīng)該讓用戶知道目前的狀態(tài), 并及時給予相對應(yīng)的反饋。

十大可用性原則

尼爾森十大原則由畢業(yè)于哥本哈根的人機交互學(xué)博士 Jakob Nielsen 發(fā)表，他提出十大可用性原則，用來評價用戶體驗的好壞，我們也可以以此為依據(jù)來分析一個產(chǎn)品的交互設(shè)計好壞。具體的內(nèi)容網(wǎng)上有很多資料，筆者就不再贅述。

3.6 視覺設(shè)計

3.61 概念

視覺設(shè)計即 UI 設(shè)計，負責產(chǎn)品的圖形、圖標、色彩、視覺風格等，從視覺層面把控產(chǎn)品界面設(shè)計，決定營造出什么樣的視覺體驗。

3.62 分析內(nèi)容

視覺設(shè)計的分析內(nèi)容可以拆分為形、色、字、構(gòu)、質(zhì)、動。在分析時，如果是網(wǎng)頁端，可以借助瀏覽器的開發(fā)者模式或者谷歌瀏覽器的插件「VisBug」來詳細查看各個維度屬性細節(jié)。

形

圖標的圓角，卡片的圓角，icon 的風格與統(tǒng)一度（包括：視覺大小，線段粗細，端點類型、拐點類型等）

例如，同樣是頭像卡片，QQ采用了圓形來體現(xiàn)靈動輕盈的風格，而主打熟人社交的微信則采用了小圓角。

色

色彩分析包括用色規(guī)范、色彩搭配、層級等。在 B 端產(chǎn)品中，色彩在使用時更多的是基于信息傳遞、操作引導(dǎo)和交互反饋等目的。

字

字體的屬性有字號、行高、字體、字重等。通過合適字號和字重可以對界面元素劃分視覺層級，幫助用戶識別。而在一些特殊的場景下，可以運用特殊字體來提高識別度和增加頁面美觀度。

例如：支付寶使用了常用的 Din pro 作為其數(shù)字字體，其他 APP 廠商也分別使用了特殊的數(shù)字字體。

構(gòu)

此處的構(gòu)是指頁面結(jié)構(gòu)，分為層級和間距兩大部分。合適的層級和間距可以幫助用戶理解頁面，并給予界面呼吸感和通透感。

質(zhì)

質(zhì)感與風格、界面風格，投影數(shù)值，扁平還是擬物。

比如說相比普通的單層陰影， Ant Design 采用了三層陰影的表達方式，讓陰影更柔和，更符合真實狀態(tài)。具體可查看 https://ant.design/docs/spec/shadow-cn

動

最近幾年，越來越多的公司和團隊已經(jīng)意識到動效在產(chǎn)品用戶體驗中的重要性，動效設(shè)計已經(jīng)成為產(chǎn)品設(shè)計語言的重要構(gòu)成之一。

動效設(shè)計并不只是為了修飾，使用動效不僅可以更清晰地體現(xiàn)內(nèi)容元素之間的邏輯和層級關(guān)系，還可以提供當前的狀態(tài)反饋，加強用戶對操作行為的感知，給用戶以可控的感覺。

除了上述內(nèi)容之外，我們在分析一個產(chǎn)品時還可以做以下兩件事：

4.1 用戶體驗自查

4.11 為什么要做體驗自查？

在被問到「你覺得這款產(chǎn)品的用戶體驗好嗎？」時，我想大部分設(shè)計師同學(xué)即使做完了產(chǎn)品分析，也很難回答這個問題。那么，我們該如何做才可以較為準確地回答這一問題呢？

基于這個問題，我們從用戶體驗的定義出發(fā)，ISO 對用戶體驗的定義有著如下解釋：

用戶體驗，即用戶在使用一個產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應(yīng)、行為和成就等各個方面。

從定義可以看出，用戶體驗不僅是主觀的，而且范疇非常廣，所以在描述時，我們不能僅僅用好/不好來概括。要解決這個問題，要點在于建立一個清晰合適的標準來量化用戶體驗，體驗自查就是在做這樣一件事 —— 度量體驗。

通過做體驗自查，可以達成以下效果：

• 1. 將用戶體驗量化，探索設(shè)計破局點
• 2. 幫助設(shè)計師更全面地審視產(chǎn)品設(shè)計
• 3. 將產(chǎn)品體驗上的問題可視化，更直觀地展示體驗問題

4.12 工具 —— 設(shè)計走查表

本質(zhì)上，設(shè)計走查表通常是設(shè)計師在完成設(shè)計稿后，用于快速遍歷方案、修正遺漏或不周的工具。在產(chǎn)品分析中，我們使用這個工具也可以達成體驗自查的目標。通常，我們是需要根據(jù)產(chǎn)品建立一套適合自己的交互設(shè)計自查表的。如果暫時沒有，也可以暫時使用網(wǎng)上成熟的自查表來進行。

4.13 步驟

收集

字段說明

問題位置：

即體驗問題發(fā)生的位置。

類別：

不同自查表對問題的分類不同，例如用戶體驗五要素、可用性原則等。

重要程度：

如果采用正向思考，很容易陷入“都很重要”的困境，所以這里一般采用反向分析法，也就是如果不解決這個體驗問題，會造成多大的影響。我這里將重要程度分成了三個等級，分別是：

• 1. 基本沒有影響，有替代功能
• 2. 不解決也可以用，但不太好用
• 3. 不解決基本/完全不能用

發(fā)生頻率：

同樣是三個等級，需要注意的是，這里不是以時間頻率來定義的，而是以「每經(jīng)歷 n 次業(yè)務(wù)節(jié)點就會出現(xiàn)這一問題」的方式來定義的，如果不好量化，也可以使用每次，經(jīng)常，偶爾這樣的詞來代替。

嚴重程度：

嚴重程度 = 重要程度 * 發(fā)生頻率

這里要注意的是，我們作為設(shè)計師，提出嚴重程度的判斷僅僅是作為優(yōu)先級參考，但是真正的優(yōu)先級和排期還是需要產(chǎn)品經(jīng)理來做。

問題描述：

即對體驗問題的詳細描述。

整理

首先，對問題進行重新審查和校驗，去掉非體驗問題、重復(fù)問題、補充不完整的問題描述等，然后整理到一起，這就是整個產(chǎn)品存在的大大小小、各種各樣的問題了。

然后，我們通過圖表對數(shù)據(jù)進行二次加工，一般采用雷達圖或柱狀圖。

示例 - 雷達圖的使用方式

嚴格意義上說，這并不是標準的雷達圖，只是使用了雷達圖的圖表背景。

外圈：上述表格中的「分類」

數(shù)值：上述表格中的「重要程度」

為每個模塊/流程各制作一張表，然后將每個問題都以點的形式置于圖中，哪個分類問題最多，哪個模塊/流程問題最多？哪些問題較為嚴重亟待解決？一目了然。

4.2 專業(yè)名詞庫

設(shè)計的本質(zhì)是為了更好的解決問題，了解業(yè)務(wù)是解決問題的基礎(chǔ)，也是溝通順暢的利器。但是想要成為一個業(yè)務(wù)專家，沒有長時間的沉淀上是不太可能的，但是公司一般不會給很長的時間去學(xué)習業(yè)務(wù)，那我們該如何在短期內(nèi)快速掌握業(yè)務(wù)知識呢？

在理解業(yè)務(wù)時遇到的最大挑戰(zhàn)就是那些晦澀難懂的特殊名詞，如 json 文件，API 等開發(fā)中特定的術(shù)語。

針對這個問題，在產(chǎn)品分析的過程中，我們可以同步建立一個專業(yè)名詞庫，來記錄這些特殊名詞，并將這些概念用自己的語言進行描述。這樣，在了解產(chǎn)品的同時也對業(yè)務(wù)有了一定程度的了解。

對設(shè)計師而言，相比 C 端的各種炫酷效果，B 端設(shè)計很難做的出彩，設(shè)計的價值更多是隱形的價值，基本不存在會有人因為你把一個按鈕做得好看夸你。從這個角度來說，確實成就感比較低。

但是，通過自己的設(shè)計讓幫助用戶更有效率地完成工作，這何嘗不會帶來滿滿的成就感？B 端產(chǎn)品一般是用戶不得不使用的產(chǎn)品，作為設(shè)計師的我們更應(yīng)該對自己所設(shè)計的產(chǎn)品有著敬畏之心。

最后，給大家分享我很喜歡的一段話，與大家共勉。

本次的分享到這里就結(jié)束了，希望可以對大家有幫助。由于文章字數(shù)較多，筆者幾經(jīng)修改，仍不免有疏漏錯誤之處，如發(fā)現(xiàn)錯誤，請讀者于評論區(qū)或私信指出，不勝感激。

在快節(jié)奏的洪流中，保持設(shè)計的初心，做有靈魂的設(shè)計，我們下篇再見~

作者：靳凱杰ah

轉(zhuǎn)載請注明：站酷

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

刷刷手機看看今天又發(fā)生了什么熱點大事，已經(jīng)成為現(xiàn)代人茶余飯后消遣時間的主要方式，而搜索熱點區(qū)別于其他社區(qū)類產(chǎn)品，最大的優(yōu)勢是能夠把大家關(guān)注的事件始末及相關(guān)知識服務(wù)快速聚合起來，幫助用戶更全面的掌握信息。設(shè)計師作為連接用戶與信息之間的紐帶，在項目實踐中也進行了系列的設(shè)計探索，除助力平臺高效聚合呈現(xiàn)信息外，并以更豐富的設(shè)計層次詮釋熱點，幫助用戶更便捷的獲取所需。

///

設(shè)計思考及詮釋方法

我們先要去了解用戶是如何消費熱點內(nèi)容的，基于用戶情景認知鏈路分析用戶在事件消費的鏈路，可以分為三個重要節(jié)點：1.熱點環(huán)境的感知；2.熱點事件的理解；3.事件觀點的產(chǎn)生。

結(jié)合用戶的消費路徑，我們將設(shè)計邏輯框架拆分為三個層級：

1.氛圍背景層：分層呈現(xiàn)熱度氛圍，輔助用戶感知熱點環(huán)境；

2.信息內(nèi)容層：精細化拼裝管理，幫助用戶理解熱點事件；

3.功能互動層：輕互動玩法設(shè)計，激發(fā)用戶參與抒發(fā)事件觀點。

1. 熱點環(huán)境感知：分層呈現(xiàn)熱度氛圍

從氛圍表現(xiàn)層面，助力用戶更快速的辨別事件的熱度及重要程度。設(shè)計師結(jié)合搜索熱點使用場景以及業(yè)務(wù)時效性配置訴求，歸類了兩種設(shè)計表現(xiàn)層次：1.日常熱度氛圍 2. 大事件熱度氛圍

1）第一個層次：日常熱度氛圍

主要應(yīng)用于熱點新聞場景，時效性要求高，同時事件熱度也會在：“發(fā)酵--爆發(fā)--消退” 間實時變化，設(shè)計根據(jù)熱度“強弱”程度需求，劃分兩檔視覺展現(xiàn)階梯，以自動化的方式展現(xiàn)，滿足熱度的實時變化需求，輔助用戶感知當前事件熱度。“低熱氛圍”弱標簽設(shè)計用以展現(xiàn)上升/今日熱點，“高熱氛圍”色彩背景通頂效果+上榜標簽用以展現(xiàn)上榜熱點。

如，“馬斯克收購?fù)铺亍?，搜索熱度持續(xù)上升，以第一階梯-標簽方式展示低熱氛圍；在 “馬斯克收購?fù)铺亍?的事件熱度不斷增長，成為熱榜事件后，以第二階梯 - 高熱氛圍自動匹配 ，通過背景及榜單標簽的呈現(xiàn)，明確告知用戶當前事件的火熱程度。

2）第二個層次：大事件熱度氛圍

主要應(yīng)用于熱點大事件或運營活動場景，個性化展現(xiàn)要求高，同時事件關(guān)注度及重要程度也不同，設(shè)計根據(jù)事件的關(guān)注度及重要程度劃分為兩檔階梯，以人工配置的方式展現(xiàn)，超強的運營氛圍，可以讓用戶充分感知當前事件的重要程度，“A級氛圍”頭部疊加場景元素設(shè)計用以展現(xiàn)大事件，“S級氛圍”整頁沉浸式視覺設(shè)計用以展現(xiàn)重大事件。

如，冬奧會，重大事件，選用第二階梯 S級氛圍，打造超強的運營大事件會場認知。

///

前置突發(fā)大事件氛圍設(shè)計

近幾年我們不斷的經(jīng)歷各類突發(fā)大事件，如：疫情/暴雨/名人逝世等等，每次突然發(fā)生的事件都讓設(shè)計師措手不及，匆忙產(chǎn)出運營氛圍設(shè)計方案緊急上線，保時效就很難保障質(zhì)量，因此我們在想能不能總結(jié)事件類型提前儲備設(shè)計，以備不時之需。

不同突發(fā)事件會牽動網(wǎng)友不同的情感情緒，比如河南暴雨，我們?yōu)槭茈y同胞擔心，為救助工作加油，為逝者哀悼；火箭發(fā)射成功，我們驕傲喝彩；名人結(jié)婚，我們送上溫馨的祝福。不同事件帶來不同的情感情緒，也要求設(shè)計師要用準確的視覺語言表達。

因此我們在前置設(shè)計時也充分考慮了事件情感因素，通過對近一年突發(fā)大事件的歸類梳理，并推導(dǎo)不同細分場景下的用戶情緒，通過情緒分類的方式，總結(jié)兩種視覺設(shè)計表達形式：1.實景圖合成效果滿足嚴肅/莊重/權(quán)威場景情感需求；2.手繪效果滿足積極/歡快/慶祝場景的情感需求。結(jié)合以上思路我們共儲備6大類20個子分類場景的前置氛圍+金剛位等運營物料設(shè)計，保障突發(fā)熱點運營設(shè)計質(zhì)效。

截至22年Q1，前置設(shè)計已在38個熱點場景應(yīng)用：

2. 熱點事件理解：內(nèi)容精細化拼裝管理

為滿足用戶不同事件場景下的信息需求，設(shè)計結(jié)合百度搜索：主要內(nèi)容區(qū)（主要需求滿足）+ 延展內(nèi)容區(qū)（延展需求滿足）的綜合聚合能力，通過組件分區(qū)布局+精細化規(guī)則管理，為熱點場景內(nèi)容的高效拼裝打好體驗基礎(chǔ)。

1）主要內(nèi)容區(qū)

主要內(nèi)容區(qū)，能夠幫助用戶快速了解事件的主題、時間及主要內(nèi)容，結(jié)合熱點事件長期的需求沉淀，設(shè)計將主要內(nèi)容區(qū)又細分為主題區(qū)域及內(nèi)容區(qū)域。主題區(qū)域可承載拼裝事件主題、事件倒計時、會場分發(fā)導(dǎo)航等主題類組件；內(nèi)容區(qū)域可承載拼裝圖文/視頻/直播等事件主體內(nèi)容分發(fā)組件。通過不同區(qū)域內(nèi)組件拼裝規(guī)則的制定，業(yè)務(wù)可以快速選擇所需組件進行頁面組織拼裝，達成分場景個性化滿足用戶主需求的目標。

如：元宵晚會，熱點主要內(nèi)容區(qū) 以“ 晚會直播時間倒計時+ 各衛(wèi)視晚會分會場導(dǎo)航+圖文內(nèi)容 ” 組件支撐起重大晚會預(yù)熱期的事件主需求滿足。

因為有設(shè)計拼裝規(guī)則，不同大事件活動，各場景內(nèi)容可個性化滿足需求，交互布局設(shè)計上又可兼顧橫向一致性。

2）延展內(nèi)容區(qū)

延展內(nèi)容區(qū)，能夠幫助用戶了解事件相關(guān)知識信息或提供事件相關(guān)服務(wù)。業(yè)務(wù)可根據(jù)事件場景需求，選擇多個延展內(nèi)容模板與主要內(nèi)容區(qū)進行拼裝，搭建完整頁面以呈現(xiàn)不同熱點事件內(nèi)容。

如：俄烏戰(zhàn)爭-戰(zhàn)事場景，脈絡(luò)卡幫助用戶快速了解事件進展 ；冬奧會-賽事場景，數(shù)據(jù)卡幫助可視化呈現(xiàn)賽事進展；博鰲亞洲論壇-會議場景，百科卡幫助用戶科普相關(guān)名詞知識。

3. 事件觀點產(chǎn)生-輕互動玩法強化參與感

通過氛圍打造和內(nèi)容組織，已經(jīng)達成用戶需求滿足的目標，但到此截止，搜索結(jié)果的體驗還是理智疏遠單向的，搜索場景與用戶、用戶與用戶間也無法產(chǎn)生對當前熱點的討論與態(tài)度表達。因此設(shè)計師對用戶的互動行為認知習慣進行分析，并采取具體的設(shè)計策略逐步引導(dǎo)用戶參與互動。

1）互動喚醒 - 吸引圍觀增強互動意愿

優(yōu)化前的熱搜結(jié)果頁，用戶的討論內(nèi)容都是隱藏在資訊落地頁評論區(qū)內(nèi)，需要點擊進內(nèi)容落地頁內(nèi)才能參與“圍觀”或“討論”，除互動氛圍已脫離當前場景外，也削弱了用戶對此事件表態(tài)的參與積極性。

通過彈幕滾動+輸入框組件組合外顯的交互設(shè)計方式，將用戶討論外露，不僅豐富熱點事件搜索場景的內(nèi)容維度，同時基于從眾心理，進一步刺激用戶的參與欲望。彈幕結(jié)合事件類型配色來更好貼合熱點事件整體環(huán)境氛圍。

2）情緒抒發(fā)-輕互動玩法降低互動門檻

而投票表態(tài)+彈幕輕互動組合效果設(shè)計，能進一步降低用戶交互心理門檻，讓用戶動一動手指就可以參與其中。在表態(tài)/投票抒發(fā)情感的同時也可以發(fā)彈幕聊聊對當前熱點事件的看法，使用戶互動情緒表達更充分。

3）驚喜反饋-強化視效打造記憶點

原有設(shè)計風格，無法在去世祭奠、頒發(fā)勛章等莊重嚴肅場景精準的表達視覺情感，無互動反饋狀態(tài)僅有互動前后狀態(tài)變化。

結(jié)合熱點場景積極外放情緒及莊重內(nèi)斂情緒，視覺主要從形/質(zhì)兩個維度進行優(yōu)化升級，并增加互動反饋動效，同時運營可結(jié)合具體事件主題配置，綜合提升互動驚喜效果，打造產(chǎn)品記憶點。

視覺層：通過更立體的形態(tài)和更豐富的層次質(zhì)感，更精準的表達情感

動效反饋層：以主圖形+輔助元素，通過符合場景氛圍的動態(tài)效果設(shè)計，更充分的表達情感

運營主題配置：在日常反饋基礎(chǔ)上，增加運營主題配置層級，為特定主題場景提供定制反饋效果

///

寫在最后

通過熱點環(huán)境感知分層呈現(xiàn)、內(nèi)容組件合理布局拼裝滿足等設(shè)計手段，助力搜索平臺以更高效豐富的內(nèi)容展現(xiàn)形態(tài)應(yīng)對全年3萬+熱點大事件運營。會場拼裝呈現(xiàn)系統(tǒng)的應(yīng)用場景也在不斷擴展，如營銷活動、品牌造節(jié)等。設(shè)計不會止步于此，我們將基于用戶需求不斷探索深耕，為用戶呈現(xiàn)更快速、準確、全面、有溫度的搜索熱點體驗。

作者：百度MEUX

轉(zhuǎn)載請注明：站酷

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

2022 年即將過半，疫情在家的我們重新花一些時間，回顧今年最引為人注目的一些設(shè)計趨勢，有些已經(jīng)變成現(xiàn)實，有些可能即將會發(fā)生。在過去的這十幾年里，全國的互聯(lián)網(wǎng)和移動互聯(lián)網(wǎng)行業(yè)蓬勃發(fā)展，引發(fā)了 UX / UI 行業(yè)的火爆，無論是在設(shè)計技術(shù)方面還是在設(shè)計實踐方面維持著快速發(fā)展狀態(tài)。設(shè)計探索受到了前所未有的關(guān)注。創(chuàng)新也永不停止，正在向各個方向延伸——有的是曇花一現(xiàn)，有的是重塑想象，有的卻循環(huán)往復(fù)。

下面我們將更詳細地向你探討一些 2022 年的設(shè)計趨勢。

超級大的字體排版

The Badass Project 搗蛋派計劃

過去幾年里，大字排版的趨勢越來越明顯，字體尺寸也在增加！接下來，字體更大且?guī)缀鯖]有圖像的時尚 英雄形象 網(wǎng)頁設(shè)計，將成為主流風格。

（英雄形象在網(wǎng)頁設(shè)計中是一個特定的網(wǎng)頁橫幅，通常是一個包含與內(nèi)容相關(guān)的大圖像頁眉）

設(shè)計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現(xiàn)代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體，網(wǎng)站可以做出比以往更大膽的宣傳，以吸引受眾的注意力并有效地信息傳達。

這些字體選擇通過 引人注目的動畫進一步生動起來。設(shè)計師正在實現(xiàn)通過鼠標移動或向下滾動頁面使排版移動并與用戶產(chǎn)生互動的創(chuàng)造性效果。以粗體、動畫和交互式排版為核心，許多網(wǎng)站也就不使用任何背景圖像，讓外觀變得干凈且精致。

MAFF

所以一定要試試這種趨勢：把文本尺寸放大，可以將其放置在一些圖像上，制作大尺寸的動態(tài)標題，讓用戶從中獲得樂趣。最重要的是，要勇于呈現(xiàn)大膽強烈視覺效果，從而可以立即吸引用戶的注意力。

案例：Medium 官網(wǎng)——https://medium.com/

復(fù)古風格回歸

Shakib - Sneakerbumb

在經(jīng)歷了充滿不確定性和陰郁的兩年，我們學(xué)會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數(shù)字空間上，這一現(xiàn)象也不例外。

La puce à l’oreille

為了回應(yīng)這一需求，設(shè)計師從 80 年代和 90 年代獲得了巨大的靈感；將色彩豐富、質(zhì)感豐富、復(fù)古風格的主題與現(xiàn)代氣息結(jié)合起來，打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網(wǎng)格的布局、非傳統(tǒng)的圖像和古怪的插圖，都可能會在接下來的一年吸引你的注意力。

Kristen Ryan for MakeReign

隨著這一切的發(fā)生，我們甚至可以說，在過去幾年里，每個人都學(xué)會了賦予自己一些自由的生活態(tài)度。這為我們提供了更多的實驗空間，當然也為設(shè)計和其他領(lǐng)域帶來了讓人愉快的成果。這就是說，設(shè)計師們覺得有必要從簡單和實用的用戶體驗轉(zhuǎn)向有趣、搞笑甚至愚蠢的交互。出人意料的是，讓別人微笑可能會是你的網(wǎng)站或 app 令人印象深刻的一種方式。

新野獸派設(shè)計

Blumenkopf

野獸派設(shè)計從 1950 年代的野獸派建筑運動中汲取靈感，延用其不修邊幅、毛糙粗狂的外觀形式，和故意做出的丑陋效果。就像在建筑中一樣，野蠻主義在網(wǎng)站中揭露和解構(gòu)(甚至慶祝)這種媒介的底層結(jié)構(gòu)和重要原則。原始、大膽和反動的本性使野獸派設(shè)計一直處于數(shù)字空間的邊緣，因為原始是互聯(lián)網(wǎng)的全部。然而，近年來，野獸派一直在緩慢而穩(wěn)定地復(fù)蘇，現(xiàn)在被一些人稱為新野獸派。

Caroselling

隨著互聯(lián)網(wǎng)上干凈、傳統(tǒng)的網(wǎng)站越來越多，個人網(wǎng)站變得難以脫穎而出。轉(zhuǎn)向野獸派，提供真誠、原始但獨特的視覺體驗，可能正是提升你下一個網(wǎng)站的方式。

無網(wǎng)格布局，強烈的調(diào)色板，重疊的元素，擁擠和幾乎混亂的設(shè)計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結(jié)合起來，缺乏或極少的導(dǎo)航，這相當于沒有額外的“空間”或子頁面的“開放式版面”，你會得到一個引人注目的粗野派外觀。

Work with us

案例：阿里云設(shè)計官網(wǎng)——Alibaba Cloud Design - Not Design Just Future

當然，還有更多，但野獸派網(wǎng)頁設(shè)計的定義規(guī)則是沒有規(guī)則；它反對既定的規(guī)則和慣例。更重要的是，你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設(shè)計糟糕的網(wǎng)站區(qū)分開來。

本機桌面客戶端

Messenger

Figma、Todoist、Slack和 Messenger 等網(wǎng)站和移動應(yīng)用程序都把時間和精力集中在桌面客戶端版本。

Todoist

越來越多的應(yīng)用程序似乎也在效仿，因為研究表明，這樣用戶會感到 更舒適、更安全。用戶希望自己的應(yīng)用程序遠離互聯(lián)網(wǎng)瀏覽器，遠離所有打開的標簽，回到指定的應(yīng)用程序窗口，讓人感覺更寬敞、更專注。在使用這些應(yīng)用程序時，不需要處理數(shù)分散注意力的標簽，這無疑是一種進步！此外，將通知直接發(fā)送到桌面，我們的通知管理也必然得到改善。

Figma

本地化用戶體驗

為阿拉伯語國家的谷歌搜索頁面布局

用戶研究團隊利用 人類心理學(xué) 領(lǐng)域的洞察，以及 可用性測試，已經(jīng)能夠塑造界面，為用戶提供最大的滿意度和愉快的體驗感受。幾十年來，這一直是用戶體驗設(shè)計的核心。

隨著技術(shù)的快速進步，我們看到數(shù)字產(chǎn)品體驗的保真度有了空前的提高。這一發(fā)展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結(jié)構(gòu)（以及其他因素）的差異可能會導(dǎo)致人們對什么構(gòu)成令人滿意用戶體驗的期望存在顯著的差異。因此，這些體驗可能需要類似的設(shè)計，但肯定不是相同的設(shè)計方法。

隨著技術(shù)和研究方法的到位，我們開始看到一款產(chǎn)品的多種變體同時推出，以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體，創(chuàng)造本地化的產(chǎn)品體驗可能會成為一種大趨勢——如果不是標準的話。

榮譽提名：包容性

NhuSW- Everyfit — Fitness for Everyone

包容性不僅是一種趨勢，也是一種運作模式；人類生存和共存是一個不可否認的重要方面。在日益全球化的復(fù)雜世界中，我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任，并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當?shù)丶{入全球社會。

Spotify

隨著數(shù)字空間引領(lǐng)著世界的全球化，它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言，并向包容性的平臺、產(chǎn)品和服務(wù) 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現(xiàn)，這樣做不僅僅是為了營銷收益，而是為了更大的意義和價值。

這些是我們在 2022 年會看到的趨勢和現(xiàn)象。記住，它們是為了提醒我們當前的總體設(shè)計趨勢。可以使用它們來支持和授權(quán)您的設(shè)計決策，但不要害怕挑戰(zhàn)它們，或用它們?yōu)槿藗儎?chuàng)造更多積極有效的體驗。

原文標題：UI/UX Design Trends of 2022

文章來源：Codeart

原創(chuàng)作者：Taras Bakusevych & Maja Mitrovikj

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

無論作為設(shè)計師還是普通瀏覽者，大家觀看一個網(wǎng)站時最先接觸到的就是網(wǎng)頁的頭部區(qū)域，這部分內(nèi)容為網(wǎng)站的其他各個方面設(shè)定了基調(diào)，在網(wǎng)頁設(shè)計中起著非常關(guān)鍵的作用。

尤其是如今簡潔設(shè)計比較盛行，多數(shù)時候把頭部內(nèi)容設(shè)計好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁設(shè)計師在設(shè)計網(wǎng)站頭部時投入了大量精力，同時要兼顧創(chuàng)造力和實用性。根據(jù)一項Google的研究，用戶只需要短短數(shù)秒就可以形成對一個網(wǎng)站的看法，甚至有些觀點是在令人難以置信的1秒內(nèi)形成的。用戶對品牌的了解就是從這么短的時間內(nèi)開始的。

頭部區(qū)域在哪兒？

在通常網(wǎng)頁設(shè)計中，首頁上方的整個空間都被視為頭部區(qū)域。作為人們在加載網(wǎng)站后的最初幾秒內(nèi)看到部分，頭部信息起到了一種邀請作用，它應(yīng)該提供有關(guān)網(wǎng)站的基本信息，以便用戶能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。

如果以招聘活動站點為例，整個頭部區(qū)域設(shè)計要明確傳達企業(yè)形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業(yè)已向你發(fā)出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。

包含哪些內(nèi)容與功能？

網(wǎng)頁頭部的任務(wù)是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務(wù)等等。如果我們在內(nèi)容上引起了用戶情感上的共鳴，那么就是正確的設(shè)計。

那么主要元素通常包括：

• Logo 或品牌標識
• 交互指引
• 標題Slogan
• 導(dǎo)航要素
• 搜索功能

在設(shè)計網(wǎng)站頭部內(nèi)容時，從思維層面來講沒有任何東西會限制你的創(chuàng)造力，它應(yīng)該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創(chuàng)造性的開放領(lǐng)域。

下面讓我們一起來看看頭部內(nèi)容設(shè)計的一些技巧。

1. 關(guān)于尺寸

對于網(wǎng)頁頭部圖片的大小是沒有統(tǒng)一的答案。有時候設(shè)計師希望提供相對固定的數(shù)字，但網(wǎng)頁設(shè)計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。

因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗積累的常識規(guī)則。

頭部的高度本著不干擾內(nèi)容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區(qū)域是一個不錯的選擇，而對于落地頁或者企業(yè)客戶首頁，頭部區(qū)域可能會更大，而且多數(shù)大客戶會有主視覺單屏展示頁。

如果某些網(wǎng)頁，例如落地頁頭部內(nèi)容較長的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識到下一頁還有內(nèi)容，引導(dǎo)用戶滾動。

2. Logo展現(xiàn)

當一個人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習慣于從屏幕的左上角開始瀏覽網(wǎng)站。盡管設(shè)計師有時候認為打破常規(guī)的布局也可以帶來不錯的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息，將會不假思索地認為這個頁面是難用的和不規(guī)范的，需要花費很多的努力才能理解。這就要看你的設(shè)計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數(shù)受眾。

Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。

3. 吸頂導(dǎo)航欄

吸頂導(dǎo)航，換句話說就是「粘性標題」，當你滾動頁面時，導(dǎo)航區(qū)在頁面中跟隨，現(xiàn)在成為一個網(wǎng)頁設(shè)計標準。如果不違反網(wǎng)站整體設(shè)計理念，請將導(dǎo)航欄吸頂固定。無論是PC端還是移動端設(shè)計，這都是一個好的選擇：

• 例如長頁面展示、瀏覽內(nèi)容同時客戶需要導(dǎo)航區(qū)總是在視線范圍內(nèi)。
• 如有滾動信息，不斷提示客戶點擊，則可置頂或置底處理。

可根據(jù)頁面內(nèi)容展示要求，向下滾動時調(diào)整導(dǎo)航背景透明度，盡量少的影響內(nèi)容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導(dǎo)航欄樣式或高度，使用戶能找到但又不過于搶眼。

總之，固定導(dǎo)航欄有助于提升用戶體驗，保持用戶導(dǎo)向并給予了他們更多控制權(quán)。

3. 關(guān)于圖片的應(yīng)用

頭部內(nèi)容所用圖片可以選擇直接和要表達的業(yè)務(wù)相關(guān)性很強的，例如招聘類網(wǎng)站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內(nèi)容；

高質(zhì)量圖片——攝影對于網(wǎng)頁設(shè)計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網(wǎng)站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。

輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片，這種方式就沒錯！企業(yè)希望用戶可以滾動瀏覽一組精美的高分辨率圖像。

插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨特的且易于辨認，即使是從網(wǎng)站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現(xiàn)這一點。

4. 視頻或動畫

當然我們也不能只關(guān)注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部內(nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。

△ 華夏幸福校招官網(wǎng)首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業(yè)務(wù)線融合到幾個轉(zhuǎn)輪中，產(chǎn)生了故事性的動畫場景。

如果想要使設(shè)計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網(wǎng)站頭部內(nèi)容變得非?？帷Ｒ悦考拘@招聘企業(yè)站點為例，各大公司對應(yīng)屆生群體的追逐，很大程度上體現(xiàn)在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。

當然不一定只有滿屏大型動畫，一般動畫越復(fù)雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據(jù)功能不同，設(shè)計一些交互性的動畫，去提升客戶使用感受，盡量不影響網(wǎng)頁打開速度。

5. 移動端頭部設(shè)計

網(wǎng)頁頭部不可能只顯示PC端的網(wǎng)頁上，還應(yīng)該正確顯示在移動端的網(wǎng)頁上。因此，在近年的設(shè)計中，網(wǎng)頁必須具有響應(yīng)性，并且能夠很好地適應(yīng)各種移動設(shè)備，這樣才能帶給用戶完整的設(shè)計體驗。

移動設(shè)備的日常使用廣泛性早已影響網(wǎng)站設(shè)計，即使在PC中，也有一些細節(jié)看起來像是面向移動設(shè)備的網(wǎng)站設(shè)計。例如，Banner和漢堡包菜單都起源于移動設(shè)計。

移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設(shè)計師在一開始就考慮到兩種界面的適應(yīng)情況，比如在PC上頂部一條的導(dǎo)航，到移動端就演變?yōu)橐粋€漢堡包菜單。而原本PC頁面中展開顯示的內(nèi)容，在移動端會向下層延伸，首層界面成為一個內(nèi)容聚合頁。

寫在最后

網(wǎng)站是以頭部內(nèi)容為先導(dǎo)的，它就像是一張獨特的名片。因此，我們在設(shè)計網(wǎng)站時，盡可能最大限度地關(guān)注該區(qū)域。

最后還要提醒大家，一定記得定期更新網(wǎng)站頭部內(nèi)容哦！以校園招聘大客戶為例，大多數(shù)企業(yè)都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網(wǎng)站的新鮮感和時效性。

以上只是在工作中的一些點滴體會，微不足道。感恩能在UXD集體中不斷成長。

作者：58UXD

轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

更多精彩文章：

網(wǎng)站設(shè)計之一：怒馬！超實用的單頁網(wǎng)站設(shè)計指南（附大量資源）

網(wǎng)站設(shè)計之二：旅游網(wǎng)站設(shè)計分析！教你10個小技巧

網(wǎng)站設(shè)計之三：實例教學(xué)！如何將極簡風格的原則運用到網(wǎng)站設(shè)計中？

網(wǎng)站設(shè)計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計形式的幾種方法

網(wǎng)站設(shè)計之五：經(jīng)驗分享：移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史！

網(wǎng)站設(shè)計之七：騰訊出品！2021-2022設(shè)計趨勢報告：動態(tài)篇

網(wǎng)站設(shè)計之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計？

網(wǎng)站設(shè)計之九：高手出品！2020~2021年UI界面設(shè)計趨勢

網(wǎng)站設(shè)計之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計？來看 58 設(shè)計師的總結(jié)！

2020年已經(jīng)過去一大半，這些時間以來，我一直在關(guān)注數(shù)字設(shè)計領(lǐng)域未來的設(shè)計趨勢。從年初就開始收集，到今8月份了，我想是時候?qū)l(fā)現(xiàn)的一些趨勢風格分享出來，這些風格很有可能繼續(xù)延續(xù)到2021的產(chǎn)品設(shè)計上。

對于UI界面視覺趨勢，同樣需要我們高度重視。畢竟每年改版方向，視覺風格研究是必不可少的一個環(huán)節(jié)，下面正式開始。

少量的漸變

今年在各網(wǎng)站上看到大面積的漸變色設(shè)計，相對前兩年來說越來越少，設(shè)計上有所克制。大面積的漸變色雖然視覺沖擊力強，但大部分停留在概念中。

從今年設(shè)計中我們可以看到設(shè)計更加理性與克制，將漸變色彩運用到關(guān)鍵功能上，突出強調(diào)重要信息。

機票選購界面，將漸變色運用到頭部位置去強調(diào)功能。

運用在功能卡片上，突出重點信息。

如上圖，設(shè)計上同樣只將漸變色運用在背景上，其他卡片上基本沒有漸變色。

包豪斯風格圖形

幾何圖形設(shè)計是目前運用最多一個設(shè)計手法，今年發(fā)現(xiàn)一些比較抽象藝術(shù)化包豪斯風格幾何圖形，在UI設(shè)計中大量運用，且效果還不錯。

這種圖形帶來好處就是記憶性強，應(yīng)用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運用在UI設(shè)計中。

卡片設(shè)計采用一些具有意向符號的圖形，來表達功能的設(shè)計，形成記憶點。

品牌設(shè)計上，也是重復(fù)這種極簡包豪斯風格幾何圖形。將logo元素提取，進行包豪斯風格化，重復(fù)運用在設(shè)計中。

有深度的界面

今年這樣的設(shè)計屢見不鮮，大量3D運用在界面設(shè)計中，二維的界面已經(jīng)不再滿足當前設(shè)計需要。設(shè)計師去探索更多維度學(xué)科與UI界面融合，形成一種全新的視覺感官。

uber的概念官網(wǎng)就通過3D來呈現(xiàn)，表達功能亮點。

將二維世界三維化，將是2021年重要的趨勢。目前國內(nèi)外線上有一些產(chǎn)品，開始在部分功能模塊使用這樣設(shè)計手法，如Naver，支付寶等。

毛玻璃效果

可以說是趨勢輪回，毛玻璃的效果又回來了。這也是今年在各網(wǎng)站設(shè)計上出現(xiàn)頻次多一些的設(shè)計。

新的毛玻璃效果更加去注重功能說明，用在視覺強調(diào)的地方。

如上圖設(shè)計，毛玻璃運用在頂部關(guān)鍵信息上。這樣設(shè)計即可減少其他色彩運用，還可以對功能信息進行強調(diào)。

毛玻璃效果運用在個人中心，人物頭像位置，進行設(shè)計強調(diào)。

運用毛玻璃去包裝UI界面，可以提升品質(zhì)感與神秘感。

沉浸式界面

將功能與場景融合設(shè)計，用戶在使用產(chǎn)品過程中，能產(chǎn)生更多情景體驗感觸。這也是最近今年喊的比較火的一種設(shè)計思路。在各網(wǎng)站上，這樣設(shè)計出現(xiàn)次數(shù)越來越多，設(shè)計效果沖擊力強，得到很多設(shè)計師的認可。

場景中關(guān)鍵人物元素與設(shè)計進行巧妙集合。

運用超現(xiàn)實設(shè)計手法，將人物與酒店場景進行排版布局。

將制作材料與產(chǎn)品集合。

擬真植物元素與土地進行巧妙集合，在視覺上傳達逼真效果。

界面排版雜志化

雜志化設(shè)計風格鮮明，可以有助產(chǎn)品去打造強化記憶點。雜志化設(shè)計的優(yōu)勢可以不受到網(wǎng)格約束，排版使用大字體，同時設(shè)計排版上更加個性。我們在做產(chǎn)品概念探索前期，可以多去嘗試這樣的風格。

擬物化圖標

擬物圖標又回來了，Apple新版本的Big Sur系統(tǒng)，就采用擬態(tài)圖標，這也是一個新的嘗試，當然也是一個開始。我們很有必要時刻關(guān)注這個趨勢，未來將會在更多設(shè)計中看到擬物化圖標的出現(xiàn)。

不過這種風格也不能大面積運用在界面中，我們可以運用在一些關(guān)鍵功能入口設(shè)計上。

在天氣上的運用，相對之前扁平化設(shè)計，目前具有空間的擬物化設(shè)計，增加了真實感。

圓形的運用

圓形趨勢，我想大家也許會忽略的點，最近幾年設(shè)計中，圓形的設(shè)計無處不在。它的好處不言而喻，親和力強、場景覆蓋廣，幾乎任何設(shè)計都能去用圓形。因此我們有必要去注意圓形運用技巧。

星巴克的web UI概念設(shè)計，采用圓形與產(chǎn)品進行集合設(shè)計排版。

2021新擬態(tài)界面

新擬態(tài)趨勢是2020年受到廣泛關(guān)注的趨勢之一，這種趨勢大量使用了柔和的陰影和微弱漸變，使設(shè)計既具有未來感又具有現(xiàn)實感，并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言，目前新的簡化擬態(tài)界面，會克制使用這些元素。

2021年擬態(tài)界面，更注重功能與體驗。擬態(tài)效果會使用在關(guān)鍵功能上，如儀表、按鈕，又或者需要重點強調(diào)的地方，避免了大面積使用這種設(shè)計手法。

寫在最后

2021年的趨勢相對來說，有繼續(xù)延續(xù)2020年一些設(shè)計風格，這些風格將會在繼續(xù)加強，同時我們也有發(fā)現(xiàn)，目前越來越多3D元素與二維界面進行集合設(shè)計，能更生動傳達功能與將故事，2021年大家務(wù)必要注意這種趨勢的延續(xù)。

作為設(shè)計師，我們對設(shè)計的思考不能只停留在表象層面，而更多的需要圍繞信息傳達這一設(shè)計的本質(zhì)功能，以充滿自省的精神深化和反思自己的設(shè)計意識，同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產(chǎn)品設(shè)計中，以產(chǎn)生最大化收益。

作者：功夫UX

轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

更多精彩文章：

網(wǎng)站設(shè)計之一：怒馬！超實用的單頁網(wǎng)站設(shè)計指南（附大量資源）

網(wǎng)站設(shè)計之二：旅游網(wǎng)站設(shè)計分析！教你10個小技巧

網(wǎng)站設(shè)計之三：實例教學(xué)！如何將極簡風格的原則運用到網(wǎng)站設(shè)計中？

網(wǎng)站設(shè)計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計形式的幾種方法

網(wǎng)站設(shè)計之五：經(jīng)驗分享：移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史！

網(wǎng)站設(shè)計之七：騰訊出品！2021-2022設(shè)計趨勢報告：動態(tài)篇

網(wǎng)站設(shè)計之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計？

網(wǎng)站設(shè)計之九：高手出品！2020~2021年UI界面設(shè)計趨勢

網(wǎng)站設(shè)計之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計？來看 58 設(shè)計師的總結(jié)！

很多人很喜歡國外的極簡設(shè)計，先不看 Dribbble 上五花繚亂飛機稿，哪怕是博客編輯器 Wix.com 上的模板看著都很令人羨慕。為啥國外的網(wǎng)站都那么極簡，國內(nèi)就學(xué)不來呢？

十年前，我以為這是因為國民審美和設(shè)計師水平?jīng)]上來?，F(xiàn)在，我發(fā)現(xiàn)這件事情沒那么簡單??！假想一下，你去下一個國外的極簡 UI 模板來，把文字改成中文，評審時能過稿嗎？

我估計十有八九過不了，產(chǎn)品經(jīng)理肯定有一大堆信息、功能和運營入口要塞進去?？蛇@應(yīng)該怪萬惡的資本主義，為了賺錢而不把審美自由當回事嗎？

用戶期待差異

尼爾森（Jakob Nielsen）和 Yunnuo Cheng 在 2016 年做過一次研究試驗，發(fā)現(xiàn)不光是中國的公司決策層，就連中國的用戶也未必就喜歡非常極簡界面。

這次研究中，12 個中國人和在中國生活的外國人（應(yīng)該是歐美為主）被邀請來，在 8 個網(wǎng)站上完成簡單的任務(wù)，并且一邊使用一邊說出他們的想法和意圖（Think Aloud）。

P.S. 這 8 個網(wǎng)站中有簡潔的也有復(fù)雜的，對中國人展示中文，對外國人展示英文，以此形成對比。

很多外國人在使用較為復(fù)雜的網(wǎng)站時（被翻譯成英文的中文網(wǎng)站），抱怨比較多。他們在中國生活，對這種網(wǎng)站設(shè)計已經(jīng)見怪不怪了。

雖然也有人說好話，稱贊信息展示明確直白，但也有人抱怨很難用的。至少大部分外國人對于復(fù)雜頁面的問題比簡潔頁面的問題要多得多。

而相比他們，中國人普遍不覺得那些復(fù)雜頁面有什么特別的，因為那些很“普通”、“正?！?，甚至“傳統(tǒng)”。

相反，抱怨簡潔頁面難用的反倒更多，例如：

“單從設(shè)計角度來看，圖標、圖片、布局都很好，符合很多人，至少年輕人都喜好。簡單、干凈，既沒廣告，又沒有無用信息。但問題是，它也沒什么有用信息——我在這些網(wǎng)站里看不到什么有用的東西。所有的功能介紹都只是在玩文字游戲，沒有實際含義，沒點真實內(nèi)容?！?

P.S. 以上是從英文資料的翻譯。

中英文語言差異

中文的信息傳遞效率就是比英文高，我們也早就習慣了這一點。《聯(lián)合國憲章》被翻譯成六種語言，其中就數(shù)中文最薄。

2017 年，Twitter 把原有 140 個單詞的限制放寬到了 280，卻唯獨沒有把這改版提供給中文、日文和韓文，理由就是語言密度足夠大了。

所以說，中文用戶對單頁信息量要求更高，這就是很正常的事了。

視覺密度差異

同樣的一句話，雖然中文更簡短，但是視覺密度更高啊。

會點排版的人都知道，視覺密度的節(jié)奏很重要，要全局考慮的。如果有一個地方的視覺密度比較高，那么整個頁面的視覺密度都要匹配上才能和諧。否則一下子太疏一下子太密，就會喪失統(tǒng)一感。中文的間隙和比劃之間的間隔都比較小，也注定了頁面的其它部分為了匹配上這個節(jié)奏，不能太疏。

這就是為什么，把一些英文板式直接拿來填充中文會很奇怪。難怪我去一些繁體中文網(wǎng)站時，會感覺比簡體中文網(wǎng)站更復(fù)雜擁擠。其實咱們大陸地區(qū)由于使用簡體字，視覺密度已經(jīng)比繁體字要松很多了。

簡潔 ≠ 好用

說到這里，不是要為一些又復(fù)雜又不好用的設(shè)計進行辯解。只是說，簡潔并不代表好用。當我們隨口說出“少即是多”這種設(shè)計概念時，也不可忽視，凡事都有個度?？吹絿饽欠N極簡設(shè)計時，也稍微自信點，簡潔并不是我們唯一追求的方向。

作者：體驗進階

轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

更多精彩文章：

網(wǎng)站設(shè)計之一：怒馬！超實用的單頁網(wǎng)站設(shè)計指南（附大量資源）

網(wǎng)站設(shè)計之二：旅游網(wǎng)站設(shè)計分析！教你10個小技巧

網(wǎng)站設(shè)計之三：實例教學(xué)！如何將極簡風格的原則運用到網(wǎng)站設(shè)計中？

網(wǎng)站設(shè)計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計形式的幾種方法

網(wǎng)站設(shè)計之五：經(jīng)驗分享：移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史！

網(wǎng)站設(shè)計之七：騰訊出品！2021-2022設(shè)計趨勢報告：動態(tài)篇

網(wǎng)站設(shè)計之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計？

網(wǎng)站設(shè)計之九：高手出品！2020~2021年UI界面設(shè)計趨勢

網(wǎng)站設(shè)計之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計？來看 58 設(shè)計師的總結(jié)！

前言

動態(tài)設(shè)計（Motion Design）有助于創(chuàng)建令人愉悅且直觀的用戶界面。好的動態(tài)設(shè)計，不僅能引導(dǎo)用戶對數(shù)字產(chǎn)品的體驗，還可傳達有關(guān)產(chǎn)品的品牌信息。本文將介紹近來最流行的動態(tài)設(shè)計趨勢，這些令人驚艷的動效表現(xiàn)手法，在不久的將來勢必席卷所有人的目光。

1. 動態(tài)在 UI/UX 扮演的角色

動態(tài)能激發(fā)用戶的情緒，為靜態(tài)的視覺設(shè)計注入活力與生命力。有趣、奇妙、吸引人的動態(tài)，能讓你的產(chǎn)品展現(xiàn)與眾不同的魅力。另一方面，動態(tài)有助于支持可用性，通過自然流暢的物理運動，突顯元素在過渡時的關(guān)聯(lián)性與狀態(tài)變化，增強用戶對產(chǎn)品功能的感知。

因此，動態(tài)設(shè)計必須是有意義的，同時兼具可用性與美感，UX 行業(yè)也將動態(tài)設(shè)計視為多學(xué)科的交集，細分成一個專業(yè)的設(shè)計門類。作為 UI 和 UX 設(shè)計中重要的組成部分，動態(tài)設(shè)計從三個層面發(fā)揮影響力：

提高連貫性（Increase Continuity）

讓界面元素在用戶流程中順暢地轉(zhuǎn)變與過渡，將用戶操作導(dǎo)向期望的任務(wù)結(jié)果。

連接場景（Connect Scenes）

在轉(zhuǎn)換場景的過程中扮演潤滑劑的角色，闡明場景之間的位置、層級與空間的關(guān)系。

視覺吸引（Visually Appealing）

聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達、提升識別度的作用。

2. 動態(tài)設(shè)計趨勢

植基于 UI 和 UX 設(shè)計而發(fā)展的第三維度，動態(tài)設(shè)計的趨勢自然與兩者密不可分。綜觀近年，多數(shù)作品巧妙地運用絢麗的動態(tài)圖像（Motion Graphics）與動效設(shè)計，讓新的視覺手法得以表現(xiàn)更為出彩。再者，隨著移動端芯片性能提升，跳脫二維平面的表現(xiàn)形式不再難以實現(xiàn)，讓設(shè)計師能夠解開束縛，發(fā)揮無限的想像空間。2021 年的動態(tài)設(shè)計可歸納為三個趨勢：

增強表達（Enhance Expression）

運用引人注目的表現(xiàn)手法將信息傳遞給用戶，包括變形、動態(tài)文字和背景動畫。

創(chuàng)造層次（Create Hierarchy）

在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)，遮罩與視差是常用的表現(xiàn)手法。

擴展維度（Expand Dimensions）

突破二維限制，將界面元素多維化營造空間感，例如 3D 動態(tài)圖形和攝像機運動。

增強表達

1. 變形 Morphing

變形創(chuàng)造了一種連續(xù)的敘事狀態(tài)，告知用戶元素的狀態(tài)或作用發(fā)生變化，是一種最引人注目的表現(xiàn)手法，能將形狀、圖像、色彩無縫地融合與過渡。

動畫插圖 Animated Illustrations

2021 年看到許多有趣、吸引人的插圖，而更多的設(shè)計師開始為靜態(tài)圖像添加動態(tài)，也讓 GIF 和動畫插圖越來越受歡迎。

動畫插圖看起來更生動，并帶有敘事性質(zhì)。在示例中，運用動畫插圖來呈現(xiàn)這杯果汁是由哪些水果打成，比起文字描述更能吸引觀眾的注意力。

by Lobster

通過動畫插圖來呈現(xiàn)同一系列的轉(zhuǎn)變，有利于延續(xù)外形上的特征，讓不同的物體具有連結(jié)性。比如從桌子、衣柜到燈具的連續(xù)變化，同樣風格的系列家具利用動畫來體現(xiàn)一致性。

by Graceful illustrations ?

流體動態(tài) Liquid Motion

動態(tài)的有機形狀，包括流體、煙霧和火焰等粒子效果，能夠極大地增強視覺效果。流體動態(tài)并非明確的過渡與場景轉(zhuǎn)換，而是顏色在流動的液體中擴散，進而創(chuàng)造出抽象或真實的視覺形狀。這種風格能實現(xiàn)無縫過渡，并為設(shè)計增添有機感，也是 2021 年最引人注目的動畫趨勢之一。

運用流體動態(tài)來展現(xiàn)抽象的有機體，除了輕易地攫取受眾目光，還讓人不自覺地佇足在畫面上，感受流體變化的韻律與美感。這類動態(tài)設(shè)計可作為烘托主題的背景動畫，或是吸引目光焦點的主角。

by ?anton mishin?

流體動態(tài)運用到網(wǎng)站設(shè)計所營造的視覺沖擊力更為驚艷，能為用戶帶來獨特、新鮮的視覺感受， 使得流體動態(tài)深受風格前衛(wèi)的設(shè)計師喜愛。網(wǎng)站還能利用鼠標懸停與流體進行互動，因此會在許多特效網(wǎng)站見到流體動態(tài)的蹤跡。

by Gilles Tossoukpé

動態(tài)漸變 Dynamic Gradients

扁平化設(shè)計缺少現(xiàn)實質(zhì)感的元素，搭配漸變色能有效緩解不足，為設(shè)計創(chuàng)造深度與層次。變化中的漸變色同時帶有動感與舒緩，充滿活力卻又平靜。使用動態(tài)漸變能讓設(shè)計師展示一系列不斷變化的情緒，許多內(nèi)容創(chuàng)作者和品牌已經(jīng)注意到這一點，開始在廣告活動、識別設(shè)計和數(shù)字內(nèi)容使用動態(tài)漸變。

by Pixelz Studio

微交互 Micro Interactions

在用戶體驗設(shè)計中微交互變得日益重要，而動態(tài)設(shè)計正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是人機交互易于使用的關(guān)鍵。從經(jīng)典案例來看，微交互的動畫細節(jié)必須帶有明確的目的性，讓用戶獲得實時反饋，指導(dǎo)用戶進行下一步。從近幾年的設(shè)計趨勢來看，微交互已成為不可或缺的存在。

by Илья Бабушкин

by Google

動畫商標 Animated Logos

過去幾年動畫商標是最流行的動畫趨勢之一，通過各種視覺效果，設(shè)計師能創(chuàng)造出不同類型的動畫商標，許多企業(yè)開始采用動畫商標作為吸引注意力的手段。多數(shù)情況下，商標是進入網(wǎng)站時最先看到的東西，因此商標應(yīng)該令人難忘、引人入勝，并使用符號或排版來揭示品牌個性。結(jié)合動畫的優(yōu)勢，設(shè)計師可以運用一些動態(tài)或效果來講述簡短的故事以強調(diào)品牌特征，并為靜態(tài)排版和商標注入一股活力。

by Yulia K.

by Meta

2. 動態(tài)文字 Kinetic Typography

動態(tài)文字是使用移動文本來吸引注意力的動畫技術(shù)，許多卓越的品牌在網(wǎng)頁設(shè)計中使用動態(tài)文字，為網(wǎng)站外觀增添動感和視覺沖擊力，是近年 UI 動畫的趨勢之一。

設(shè)計師使用動態(tài)文字為單詞或句子添加生動的元素，借此定下情緒氛圍與設(shè)計基調(diào)，吸引用戶的注意力。幾種常見的表現(xiàn)手法，擠壓和拉伸一個詞能會喚起一種俏皮感，而連續(xù)重復(fù)這個詞則具有催眠感和前衛(wèi)感。另外，使用大號和粗體字體來增強份量以強調(diào)某些信息，也是動態(tài)文字的特征之一。

無論在電商網(wǎng)站、電視廣告或音樂視頻，動態(tài)文字都占有舉足輕重的地位，有利于加深用戶對品牌的關(guān)注與印象。

by HOLOGRAPHIK®

by Hrvoje Grubisic

3. 背景動畫 Background Animation

通過背景動畫來強化敘事，成為許多行業(yè)常用的品牌傳播手段。你可以創(chuàng)建動態(tài)的品牌故事，展示有趣的制造過程、產(chǎn)品的使用場景。背景動畫深獲大眾喜愛，它能讓用戶在進入登錄頁或網(wǎng)站首頁時，輕易地了解更多有關(guān)公司或產(chǎn)品的信息。調(diào)研顯示，從銀行、醫(yī)療保健公司、電商零售商、餐館到 B2B 供應(yīng)商，這些跨越不同細分市場和行業(yè)的網(wǎng)站都開始使用背景動畫。

by Carlo Soleri

by Kirill Zhukovsky

創(chuàng)造層次

1. 遮罩 Masking

遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物，等同于舞臺幕布設(shè)計，能在界面元素進場或退場時創(chuàng)造連續(xù)性效果。這種表現(xiàn)手法簡潔高效，是最常見的過渡動畫之一。

切換場景 Scene-Switching

其中一種遮罩過渡，是將當前場景完全置換，如同揭開蒙在上層的布，逐漸展露疊在下方的景，并利用景物相似性和動作延續(xù)性，讓兩個場景能夠順暢地銜接，不致于差異過大，造成用戶心理負擔。

by intent

by Minh Pham ?

狀態(tài)變換 State Transformation

另一種遮罩的表現(xiàn)形式，較無明顯的場景過渡，而是利用遮罩來表現(xiàn)景物的狀態(tài)變化，界面元素和布局基本保持一致，以此塑造無縫過渡的視覺效果，這種手法被廣泛地使用，例如氣候變化、人物換裝、產(chǎn)品組合等。

by Daniel Tan

by Outcrowd

2. 視差 Parallax

視差是利用不同的界面元素以不同的速率移動，創(chuàng)造前后景深的分離效果，借此在平面中塑造空間層次，已成為網(wǎng)站首頁最為普遍的表現(xiàn)形式。

視差之所以能形成一股風潮，廣為各個行業(yè)所接受，一方面是信息層級更加清晰，明確定義各種元素的關(guān)系，讓用戶專注于主要操作和內(nèi)容，將背景或非交互元素往后退，同時保持設(shè)計的完整性。另一方面是豐富的層次變化，當用戶滾動或滑動時，能在扁平化界面拉開空間關(guān)系，利用不同的速率和縱深，塑造多層次的感官體驗。

by Studio V?R

by Studio V?R

擴展維度

1. 3D 動態(tài)圖形 3D Motion Graphics

近年來，結(jié)合 3D 動態(tài)圖形的界面設(shè)計呈現(xiàn)爆炸式增長，雖然創(chuàng)建 3D 動畫需要更多的時間、技巧與協(xié)作，但不可否認的，3D 動畫比 2D 圖形更加逼真，從而提供更具吸引力和互動性的用戶體驗，并有效地展示品牌的活力。

更生動的表情 Lively Emoji

動畫的吸引力在于能夠創(chuàng)建各種角色，并為無生命物體注入生命力，表情符號就是一個很好的例子。作為獨特的網(wǎng)絡(luò)語言，表情符號生動地描摹日常面對面交流的非言語信息，隨著圖形界面的設(shè)計趨勢逐漸結(jié)合 2D 與 3D，運用 3D 動態(tài)圖形來創(chuàng)造更加動感、擬人化的表情，能讓這些非言語信息更加豐富，有機會引領(lǐng)下一波風潮。

by Outcrowd

營造空間感 Spatial Awareness

3D 動態(tài)圖形為平面設(shè)計建構(gòu)了空間敘事框架，在扁平化界面中展現(xiàn)立體感，從而表達空間中元素的位置與層級關(guān)系。多維化的發(fā)展趨勢，推動了視覺表達形式的演變，空間感讓界面設(shè)計更符合人類的認知邏輯，運用各種 3D 運動特效，包括旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、透視、Z 軸位移等，打造令人難忘的感官沖擊。

by UI8

by Bruno Ortolland

擬人動畫 Anthropomorphic Animations

擬人化能讓物體、植物、動物等非人類事物，表現(xiàn)出人類屬性的行為與狀態(tài)。動畫片運用擬人的手法是最普遍的，1927 年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們?nèi)菀妆灰匀祟愋惺碌氖挛锼?，越來越多設(shè)計師在界面中添加擬人元素，利用這種效果讓畫面更加生動有趣，增強用戶體驗的愉悅感。

by Gregory Riaguzov

2. 攝像機運動 Camera Movements

在動態(tài)設(shè)計中，攝像機運動是最自由、靈活的一種表現(xiàn)形式，能讓畫面過渡更有張力，突破 2D 平面在視角上的限制，創(chuàng)造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動，包括推近、拉出、平移、跟拍等方式，備受動態(tài)設(shè)計師青睞，讓用戶以多變的視野探索數(shù)字產(chǎn)品。

推近/拉出 Dolly In/Dolly Out

推鏡頭是指被拍攝的對象不動，攝像機由遠而近，朝著對象不斷推進， 用來突出人或物的主體。鏡頭推近的運動方式，用來呈現(xiàn)從整體到局部、由分散到集中的變化，引領(lǐng)用戶進入故事情景，給人一種身臨其境的感受。

相反地，拉鏡頭則是將攝像機后退，使畫面逐漸遠離被攝主體，側(cè)重的是從局部到整體、由點到面的轉(zhuǎn)變，強調(diào)主體所處的空間環(huán)境。隨鏡拉出的景象，能激起人們無限的想像。

水平/垂直移動 Truck/Pedestal

水平向左或向右，垂直向上或向下移動攝像機，使畫面不斷變化，讓用戶跟隨鏡頭視角一起移動，產(chǎn)生一種置身其中的感覺。這種運鏡方式，通常用于具體的場景，利用角色或景物的延續(xù)性來消除場景過渡時的邊界，表現(xiàn)出一種流動感，無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。

結(jié)合多種運鏡 Multiple Camera Movements

運用多種攝像機運動相當普遍，既能擴大視野，又有很強的空間感，可以更加自由與多樣地展示不同視角和情景。比方說結(jié)合橫搖（Pan）、直搖（Tilt）和跟隨（Tracking）鏡頭，連續(xù)而詳盡地展示一個產(chǎn)品，由于畫面始終跟隨一個主體，有利于突出產(chǎn)品特征，并讓用戶從不同的角度和距離觀看產(chǎn)品，是一種增強臨場感和參與感的有效方法。

一鏡到底 One Shot

在電影中為了不將觀眾的情感和注意力割裂，使用一個鏡頭來完成全片的場景刻畫和敘事，這種拍攝手法被稱作一鏡到底或長鏡頭。連續(xù)鏡頭逐漸被運用到界面過渡，以此增強操作過程的流暢性，例如一氣呵成的購物體驗，或是貫穿全場的人物角色，其特點是給用戶最沉浸的感官體驗，無間斷地體驗整個流程。

結(jié)語

動態(tài)設(shè)計作為近年熱門的創(chuàng)作形式，廣泛應(yīng)用到各個領(lǐng)域，逐漸成為設(shè)計的主流趨勢。受益于技術(shù)演進與發(fā)展，從創(chuàng)意生產(chǎn)到落地實現(xiàn)，動態(tài)設(shè)計的門檻不再遙不可及。設(shè)計師得以將想法轉(zhuǎn)化為生動、有趣的作品，并有機會創(chuàng)造新的表現(xiàn)手法，玩出許多新花樣，成為 2021 年動態(tài)設(shè)計的特色。

本文歸納的設(shè)計趨勢，有助于啟發(fā)設(shè)計師對動態(tài)設(shè)計的想像，激發(fā)更多創(chuàng)作靈感，為靜態(tài)界面賦予靈魂，打造令人難忘的視覺體驗和品牌形象。

作者：騰訊ISUX

轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

更多精彩文章：

網(wǎng)站設(shè)計之一：怒馬！超實用的單頁網(wǎng)站設(shè)計指南（附大量資源）

網(wǎng)站設(shè)計之二：旅游網(wǎng)站設(shè)計分析！教你10個小技巧

網(wǎng)站設(shè)計之三：實例教學(xué)！如何將極簡風格的原則運用到網(wǎng)站設(shè)計中？

網(wǎng)站設(shè)計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計形式的幾種方法

網(wǎng)站設(shè)計之五：經(jīng)驗分享：移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史！

網(wǎng)站設(shè)計之七：騰訊出品！2021-2022設(shè)計趨勢報告：動態(tài)篇

網(wǎng)站設(shè)計之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計？

網(wǎng)站設(shè)計之九：高手出品！2020~2021年UI界面設(shè)計趨勢

網(wǎng)站設(shè)計之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計？來看 58 設(shè)計師的總結(jié)！