人類與其他物種最顯著的不同點之一是人類擁有與他人溝通和交流的能力。在整個人類社會的發展史中，溝通和交流行為需要雙方處在同一個物理空間中。但進入21世紀，虛擬空間的出現讓我們社交方式正在發生翻天覆地的變化，它已經成為我們每天生活的一部分，對設計師而言，虛擬空間設計仍是一個全新的、亟待探索的領域，我們有很多事可以做。

你或許聽說過元宇宙這一新興概念，它是一個增強的、或者說是一個完全虛擬的空間，我們需要使用VR頭戴設備和數字形象才能進入。在這個有社交距離的時代，元宇宙可以讓我們感受到更加緊密的社交關系：不論我們相隔多遠，我們都可以看到和感受到對方。包括META（前身為Facebook）在內的很多商業巨頭正在入局元宇宙，在他們洞察到的的商業機會上投資數十億美金，這些投資在未來將為大量的元宇宙設計創造機會。

考慮到這一點，這篇文章主要描述關于元宇宙設計的一切：包括元宇宙的概念、設計元宇宙的技術，以及設計元宇宙的工具。

 

一、什么是元宇宙？

元宇宙一詞首次出現在Neal Stephenson于1992創作的科幻小說《雪崩》中，講述了主人公在被稱為“元宇宙”的虛擬空間和現實空間中來回穿梭旅行。斯皮爾伯格的電影《頭號玩家》也描繪了一個在不久的將來會出現的類似元宇宙的概念，在電影中，主角生活在類似于虛擬現實中，與其他玩家一起在元宇宙世界中探索。

《頭號玩家》

元宇宙有很大概率成為Web3.0的關鍵元素，這是基于區塊鏈的新一代更加民主化的互聯網版本。產品設計師將專注于創建 3D 空間，這些空間可以是現有物理場所（即家庭、辦公室、俱樂部），也可以是一個全新的世界（空間站、卡通世界等），但無論是什么樣的虛擬空間，它都應該讓用戶感到舒適。

虛擬辦公空間. 圖片取自Meta.

2、元宇宙中的內容 

互聯網時代的用戶習慣瀏覽網站和應用程序來獲取內容，那么元宇宙中，用戶會期待什么樣的內容呢？答案很有趣：和現在他們每天正在獲取的內容一樣就可以了。在元宇宙世界中，用戶會選擇他們熟悉的內容進行互動，比如文章、視頻、音樂、電影等等。但他們消費這些內容的方式可能不同，比如元宇宙中用戶無需購買大屏幕電視即可觀看電影，他們可以依靠他們的頭戴設備。

從設計的視角來看，在元宇宙中內容以最適合的形式展示給用戶這一點尤為重要，但目前還沒有簡單且正確方法可以實現這一目標，因此設計師必須嘗試各種內容形式，才能找到適合在元宇宙展示內容的形式。

3、數字商品 

元宇宙是一個擁有數字商品的數字世界。數字商品有它的局限性，你不能把它們帶到物理世界中去，但它們也擁有巨大的優勢——你在元宇宙中購買的數字商品可以以不同的方式在不同的環境中使用。例如，你可以購買一頂棒球帽，在你最喜歡的游戲和辦公室中佩戴它，使其成為你個人風格的重要組成部分。當然，這個功能目前只是一個構想，需要那些在元宇宙運營的公司愿意支持數字商品在不同場景下的切換時才有可能實現。

4、去中心化的支付系統 

去中心化支付是元宇宙體驗的重要一環。在虛擬空間中用加密貨幣支付數字商品比用真錢支付要方便得多。加密貨幣可以在用戶加入的所有不同虛擬世界中發揮作用，在今天，一些虛擬世界也證明了這種商業模式的可持續性。Decentraland就是一個很好的例子，它是一個 3D 虛擬世界平臺，提供自己專有的貨幣，名為 Mana。

5.為增強現實和虛擬現實設計 

從技術角度來看，AR 和 VR 設備的質量在未來一定會大幅提升，它們是用戶進入元宇宙的硬件基礎。在過去，AR技術被認為是邁向虛擬世界的第一步，但隨著技術不斷進步，我們逐漸發現虛擬世界的真正力量將通過 VR 展現?？梢灶A見的是 VR 技術在未來會更加吸引用戶，因為它可以創造一種逼真的感覺，一種讓用戶沉浸在交互中的體驗。

以下幾個方面值得在設計時重點關注：

• 環境理解理解物理環境中的用戶。景深和透視是物理環境的兩大特征，因此，VR 設備中的傳感器將能夠映射用戶周圍的世界，以便設計師可以在創造沉浸虛擬世界的同時保證用戶的安全。
• 真實的面部表情設計眾所周知，人類之間的互動很多都是不依賴語言的，面部表情可以幫助人們傳達感受，因此，數字形象要像真實的人與人交互一樣傳達人類情感。
• VR手勢設計標準化（頭部、手部和身體移動）設計標準化將會制定一些通用交互模型，這樣當設計師為元宇宙制作產品時，用戶將更輕松地學習如何使用它。
• 聲音交互以聲音為基礎的交互很可能成為虛擬世界中的一個重要組成部分。對用戶來說，在私密環境中用語音進行交互要比在公開場合更加舒適。

6、隱私保護 

在元宇宙中，侵犯在線隱私的行為會讓用戶感到被冒犯，所以從元宇宙設計第一天開始，隱私、安全和數據保護就應該是重要的組成部分。

不僅如此，防止網絡霸凌也應是元宇宙設計中不能忽視的一部分，用戶應該有自由決定他們在何時想和誰在一起的權利（或一個人獨處，或去公司上班），并將那些對他們產生負面影響的人從他們的社交圈中移除。產品設計師需要與數據安全專家以及行為心理學家密切合作，以創建更安全和人性化的服務。

7、更少的干擾性廣告 

談到元宇宙，或許我們腦中會想到一些基于廣告曝光的商業模式，因為在元宇宙中植入廣告將會是一件收入頗豐的生意，然而事實上，將廣告植入虛擬世界需要謹慎、謹慎再謹慎。

想象一下，在你未來生活的元宇宙中，一些公司為了能更有針對性的為你提供服務，會跟蹤你并記錄下你的一舉一動。這是一件讓人非常恐懼的事，雖然元宇宙的創建者可能并不會這么做，但我們必須意識到這樣做的風險非常高，特別對于那些把廣告曝光作為商業模式重點一環的商業巨頭來說（比如Meta），需要非常嚴肅的去思考是否可以接受過度廣告植入帶來的風險。

三、元宇宙設計工具

這里列舉了5個設計工具，對于想要設計元宇宙的設計師來說，這些工具都應該派上用場。

1.、故事板

故事板是來自電影行業的創作工具。它是一個圖形組織板，其中包含按順序顯示的動作場景的圖片，這些能讓工作人員更容易理解場景的性質和演員必須傳達的情感。就像拍攝電影一樣，如果沒有好的故事講述，就不可能創造出身臨其境的虛擬世界體驗。

故事版案例。圖片來自NN Group.

2、3D建模工具

元宇宙是一個天然的3D世界，這個世界越真實，用戶越能夠進入沉浸式的體驗。對于想要創造元宇宙體驗的設計師來說，最好能成為3D建模大師，熟練使用如Blender、Cinema 4D、Houdini等建模工具。

使用 Blender 創建房屋模型。圖片來自Blender.

作者：百度APP用戶平臺

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、組件的核心功能是什么

我們先來看看組件的核心功能是什么。組件的作用有很多，其中有兩點最為突出：

1、降本提效

組件的初衷不是為了替代設計師。組件的本質是一種降本提效的工具。在工作內容上，可以將不必要的、重復性勞動的時間節省出來；在工作流程上，便于設計師與開發做交接和協作，減少溝通成本。

2、質量保障

不論是設計還是開發，使用組件后都可以在一定程度上保證工作質量。組件規范了前端和設計師的工作方法，建立了底層的合作機制，設定了設計和開發的質量底線?；诮M件完成的產品通常具備：

• 一致性：相對一致的表現樣式，設計風格和交互體驗上都可保持統一；

• 可用性：對于用戶來說具備最基本可操作性和可識別性；

• 標準化：符合基本審美標準，雖不會很亮眼，但也不會很難看。

但對于一款好產品來說，僅達到基礎合格線是遠遠不夠的。組件能替代的僅僅是大部分重復性的頁面。面對變化多樣的業務需求，設計師還是需要做很多非基礎性、非重復性的設計工作。

我們也要建立起一個重要的認知，那就是：

做組件不是設計目標，

而是一種為業務賦能的手段和方法。

能夠為業務帶來正向影響、助力業務發展的組件才是有效的。

二、設計師的工作重心有哪些

設計工作很注重專業與實踐相結合，大多數情況下，能為業務賦能的設計行為，才能體現設計價值。在此過程中設計師的工作內容和重心可以分為以下幾點（每一點我們也都在之前的文章中有過詳細介紹，推薦你閱讀完本文再做查看）：

1、深挖業務訴求，優化體驗

一款好的產品，質量不會僅停留在合格線。設計師可以把更多的時間和精力放到更有價值的工作上去，關注業務目標和用戶需求，對業務邏輯做深度理解和剖析。不僅僅是在界面細節的表現手法上下功夫，還要用系統性思維為整個產品做全方位的體驗優化。

* 我們曾在  完成設計需求的三個層次！ 一文中為大家介紹過承接產品需求的幾種方式，讀完本文之后歡迎繼續閱讀。

2、提升組件專業性，賦能業務

很多業務領域有其獨特性，比如金融類組件和政務類的產品頁面列表內容就有很大區別。這就使得單一的組件在應用的過程中可以被再次組合、拼裝和沉淀。

針對不同的業務領域，將高頻使用的組件結合業務特性，進行更為專業的沉淀也很重要。這類組件使用起來也會更加得心應手、加倍提效。

* 我們曾在  基礎組件與高級組件的區別  一文中，為大家介紹過兩者的定義和使用場景，在公眾號后臺回復 “列表”  ，也可以看到更加完整的內容分享，讀完本文之后歡迎繼續閱讀。

3、提升組件易用性，規范使用

組件并不是一勞永逸的設計工具，它需要緊跟業務的步伐迭代更新。只有當組件的質量達標，具備了一定的穩定性和易用性，才能被設計師和開發高效、高質地使用，更好地支持業務需求。

因此，除了建立組件的設計規范，組件如何被更新、怎樣被同步給相關方、怎樣才能被正確地使用，也是影響產品最終質量的關鍵因素。

* 我們曾在  組件的規范怎樣才能更好用？ 一文中為大家介紹過一些提升組件易用性的經驗，讀完本文之后歡迎繼續閱讀。

4、優化檢驗流程，排查問題

這里所說的「檢驗」包括兩方面工作內容：

一是對于研發質量的檢驗；

二是對于產品體驗的監測。

先來看看對于研發質量的檢驗，我們可以分為兩部分內容：

1）設計還原度走查：即對于開發完成設計稿后的質量檢查；

2）組件應用質量走查：即排查組件的使用問題，判斷設計和開發的使用方式是否正確。

對于這兩類走查，發現問題時不僅要及時糾正，還要思考問題產生的原因，從根本上解決和杜絕類似問題。

* 我們曾在  開發的設計還原度低該怎么辦？ 一文中為大家介紹過一些提升設計走查效率的經驗，讀完本文之后歡迎繼續閱讀。

再來看看對于產品體驗的監測。其實很多大廠都提出過關于檢測產品體驗和設計質量的方法及模型，我們熟知的有 Google 的 HEART 模型和 GSM 模型、螞蟻集團的 PTECH 模型和「兩章一分」模型等等。

因為產品的評估方式本就是多維度的，不同的產品又有不同的評價標準，所以大家各自沉淀、百花齊放。不過參考和使用這些方法的原則只有一條：適合自己需求的工具，才是好用的。

* 在公眾號后臺回復 “體驗”  ，可以看到更加完整、多維度的產品質量和用戶體驗檢測內容。

設計自身的價值是全鏈路的、端到端的、內循環的。設計師不光用手，更應該用心和腦去思考和解決問題?？梢哉f，組件就是幫助設計師解放雙手的不二法門。

設計師的思維和方法不一定會決定產品的生死，但足以幫助產品實現質量和體驗的升級。也正因如此，產品才能在市場競爭中走得更為長遠。

作者：元堯

轉載請注明：學UI網》工作經驗｜使用組件做B端產品，設計師的工作價值還有哪些？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

先來看這段話，大家猜猜這說的是一件什么事情？

我聯合硬件排查部門、采購部門、電力工程部門等等，結合這些資源。我快速找到了問題根結，推動各個部門協同合作，在各部門共同努力之下，最后成功和圓滿的解決了問題。最后，我也總結出了一套流程，打造出了一個新系統，該系統可用于自動檢測類似問題。一旦被系統發現問題，系統將自動下發指令給最精準的業務部分，自動完成整個工程，解決問題。該系統不但節省了資源，還節省了人力。以前需要多人才能解決的問題，現在只需要1個人即可完成失去光明的時間，由以前的一個月，縮短到了1小時，在線時間達到99.99%。

如果用通俗的語言來說，就是：買了個燈泡，問了一圈同事，最后自己換了。以后燈泡再壞，也自己換了就好。

明明一句話就能說明做的事情，為什么非通過黑話去進行轉譯？

因為在日常工作中，大部分同事做的事情大同小異，很多都是很小的事情，如何能拉開差距，體現自己做的事情有價值，那么這時候，通過黑話可以很好的拉開和大家的差距，雖然本質上大家做的事情都大同小異。

黑話的流行，個人認為有以下兩種原因：

1、同事間相互內卷的結果，通過黑話的包裝，去拉開和同事間的差距。

2、更加高效地溝通。一個黑化名詞，是一兩句話極度簡化的結果。如果每次大家溝通都大篇幅的白話去溝通，效率就會降低。

例如：消費者對品牌和產品形成固有看法和觀念，這句話用“消費認知”這個詞代替，就很高效了。

隨著時代的進步，上面換燈泡的黑話來自于2019年，現在看來，已經顯得很樸素。不夠更黑話，步入2022年，黑話的維度也迎來升維增幅。

我進行一波修改，大家感受下這樣是不是感覺更高級呢？

拉通多部門角色倒逼流程迭代，建立模型化、標準化、流程化范式。通過對建立范式的流程化復用，實現核心業務價值轉化。通過新范式的迭代，形成不同業務標準分層，人效提升高達2000bp。

一個小小的換燈泡，都能說地如此高深莫測。那么在實際工作中，即使是對文案進行小修改，那文字會變得更加高深莫測。干的活立馬就顯得高級了。

接下來讓我們來看看如何將黑話整進項目里面。

一、項目背景

以下這段是常見的項目背景的白話文：

目前購買流程用戶流失率高，通過優化該流程，提升整體轉化效率。

如何將這句話包裝的高大上呢，顯示的有格局呢？那么可以這么說:

通過數據分析發現整個購買轉化漏斗，用戶流失率高。通過設計手段重塑用戶動線和購買心智，加固消費購買場，以此提升整體轉化率和整體GMV。

通過上面可以看出，要將具體的細節手段寫出來，具體的手段通過一些對應的高端詞匯去替換，這樣一整段話，就有比較深度和格局的樣子。

最后通過具體的核心指標去驗證項目背景的設計優化的意義。

二、設計目標

以下這段是常見的設計目標的白話文：

1、統一設計風格，提升整個購買流程統一性。

2、減少操作層級，降低多層級導致的流失率。

3、簡化視覺元素，強化重要信息。

上述的這個設計目標通常來說沒毛病，說的也比較清晰，但是不夠黑話。接下來看看下面這個升級版，感覺如何：

1、通過平臺IP統一植入到購買鏈路，深度綁定購買心智場景，全面占領用戶心智。

2、通過設計策略透傳平臺的信任價值。

3、信息降噪，通過重構用戶動線和視覺布局，簡化用戶認知與操作負荷。

4、重建購買鏈路的優惠服務承載力。

三、設計策略

以下這段是常見的設計策略的白話文：

1、統一性：通過優化圖標，文字和視覺布局，提升整個流程的統一性。

2、簡化層級：通過簡化用戶操作次數，提升轉化率。

上述的這個設計策略，比較好懂，主要通過兩方面提升整體轉化率。如果給其他高緯度的大佬看的話，顯得小白好懂，接下來看看下面這個升級版。

1、深挖品牌價值、提煉ip、強化信任，形成多矩陣購買心智，通過平臺ip反哺購買鏈路。

2、透傳信任，通過官方、第三方保險、用戶評價等多維度組合拳深化用戶信任感知。

3、通過對用戶調研，重構用戶購買動線，簡化操作流程和信息降噪等方式提升轉化率。

4、通過視覺表現和交互布局全方位展示優惠服務賣點，提升操作能效。

四、設計方案

常見的設計方案，都是直接放主界面和交互流程。但是這會顯得不夠高級。項目方案顯得普普通通。

如果按照升維思路的話，那么就應該先展示以下四部分:

1、深挖品牌價值、提煉ip、強化信任，形成多矩陣購買心智，通過平臺ip反哺購買鏈路。

2、透傳信任，通過官方、第三方保險、用戶評價等多維度組合拳深化用戶信任感知。

3、通過對用戶調研，重構用戶購買動線，簡化操作流程和信息降噪等方式提升轉化率。

4、通過視覺表現和交互布局全方位展示優惠服務賣點，以此提升購買效率。

首先單獨建一個畫板，將上述的四個方面全方位展示。

然后做一個整體的方案匯報，展示全局性、局部性以及異常等。

最后才展示具體的設計方案。

最重要的是展示的角度要讓閱讀者眼前一亮，富有創意和高格局。

五、設計驗證

以下這段是常見的設計驗證的白話文：

本次優化，用戶反饋良好。設計感官有一個整體的質量提升。上線之后，收到了業務方的好評。

上述的描述，只能說明上線效果良好，缺乏更細節的東西，例如可以這樣說:

定量方面：

1、核心指標：GMV提升360bp，月人均訂單數從5.1提升至6.2

2、大幅度降低用戶操作時長，降低用戶跳出率。用戶操作時長從45s降低到了30s

3、整個購買鏈路，用戶完成率提升550bp。

定性方面：

1、進一步完善購買場景操作鏈路，強化用戶對平臺消費心智。

2、通過對用戶問卷數據回收，購買鏈路整體好感完成了一個新的升維定位。

作者：Echo

轉載請注明：學UI網》如何高級的說話？設計師項目匯報之黑話指南

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1、表單排列

表單承載的主要功能是向用戶清楚地傳達信息，單列表單形式更利于用戶瀏覽動線，幫助用戶識別和填寫內容。而多列表單形式用戶的視覺橫向移動范圍更大，瀏覽和填寫效率更低。

例如QQ郵箱設置頁面中，選項都是采用了縱向布局的方式。當然這種布局方式是比較理想化的，是與場景相匹配的。首先作為設置界面，并非高頻操作業務，用戶只會調整部分內容，而不是全業務的操作。所以更強調信息的查看，縱向布局更有利于瀏覽。

其次，表單項內容應并不復雜，即使采用縱向布局，對整體的表單長度影響也比較有限。另外配合底部常駐按鈕，對用戶的操作效率影響不大。

而在B端輸入型表單中，本身內容填寫的任務就比較重，所以需要適當控制表單的整體長度，因此一味地追求瀏覽動線也是不可取的。

2、輸入框長度

1）輸入框排版

如下圖所示，右圖采用的是錯落有致的排版，左圖更加整齊劃一。但是相比較而言，似乎右圖的詩句舒適度更高。因為在視覺上我們更容易將右圖的空間和內容視為一個和諧的整體，但左圖過度的對齊導致暗示隱性的截斷，我們會感覺表單列右側空間缺了一大塊。

所以表單中要注意整體的協調性，不要為了對齊而對齊。

2）輸入框長度的暗示

輸入框的長度具有一定的暗示作用，因為用戶會認為它是與輸入的內容是相對應的。尤其是郵政編碼、電話號碼和銀行卡號等長度固定的字段。在設計這類輸入框的時候，可以采用與內容相互匹配的長度，避免過長引起用戶對輸入內容正確性的疑慮。

下圖即一典型案例。在上圖中，不需要花多少錢的金額輸入框進行等寬處理，容易誤導用戶對所需輸入金額的判斷，造成用戶的不安全感。

3、必填與選填

必填和選填是表單的基本信息，用來引導用戶識別關鍵信息，做出行為決策。

通常必填字段較少時，優先采用星號（*）標注顯示，更好地提高信息識別效率。當必填字段較多時，則可以標注選填項的方式，避免出現滿屏星號，增加額外信息量。

但是同一個系統中建議還是采用統一的標記方式。我個人更傾向于星號（*）方式，用戶成本低，對內容干擾性更小。

4、識別好過記憶

這是尼爾森十大可用性原則之一，要求能夠通過各種方式給予用戶足夠的信息，減少用戶的記憶成本。在表單設計中，主要是各種提示信息輔助用戶完成表單填寫。

1）主動性提示

對于開放性、復雜的、超出用戶認知的輸入信息，需要做出主動性提示。例如在阿里云、騰訊云中，很多名稱字段都是需要以字母開頭的。而普通用戶為了便于信息的識別和記憶，更習慣于中文命名。這種情況下，表單中就需要默認給出填寫說明，減少用戶的記憶和出錯概率。

另外一些具有限制性的規則，對用戶的操作會產生直接影響的，也需要顯性地告知用戶，盡量避免出現理解偏差，帶來用戶投訴。

主動性提示可以通過輸入框中的「占位標簽」告知用戶；不過過長的提示信息通常放置在輸入框下方，便于用戶查看。

2）交互性提示

還有一種提示增加了信息交互。例如密碼設置時，光標停留會觸發密碼規則提示。既保證了默認界面信息的精簡，又可以保證提示的有效性。用戶輸入時，還會進行內容校驗反饋，交互性更強。

3）被動性提示

對用戶而言，解釋說明、幫助信息更偏向于業務屬性。隨著用戶深入使用產品，這些信息會變得不再重要，用戶查看的頻率也會越來越低。所以這類信息通常被默認收起，減少界面的信息量，用戶在需要時主動觸發查看。

5、主任務與分支任務的協同

有些展示型表單，主要是為用戶提供信息服務的。但是為了保證操作鏈路的流暢，會加入一些分支任務。例如任務預覽時，會增加「發布」或者「編輯」功能，便于用戶直接完成二次操作；或者智能報告表單中會增加人工「修正建議」，對內容進行糾偏。這些操作只是可選項，并不是用戶必需的操作行為。

如果按照順序將信息羅列展示，這些內容會被放在頁面底部。長表單場景下，這些信息會無法直觀展示，用戶難以感知。所以需要為這些支線任務增加額外曝光。

例如頂部的引導文字按鈕，借助定位錨點，實現路徑直達，提高操作效率；或者采用底部浮層彈窗的形式，方便信息的填寫及表單內容的查看。

具體的設計方案有很多種方式，需要根據場景和用戶確定。但是設計師需要能夠將主任務和分支任務進行有機的協同，保證用戶對頁面內容的全感知和操作效率。

6、數量級的影響

有些時候我們不得不面對很大的數據量，這對設計師和用戶都是一個挑戰。設計時，我們需要根據信息量做出合適的設計方案。

信息量比較大時，首先要進行內容拆解，按照用戶的認知習慣完成信息分層，讓用戶不要直接面對大量數據。例如通過樹表結合，或者雙層關聯下拉選擇，逐步縮小用戶的目標范圍。

某些場景下，還要增加輔助搜索功能，讓信息篩選更加簡單。

表單設計除了靜態展示效果外，還有大量的交互操作。主要的設計目標就是「效率」和「防錯」。

1、操作效率

1）減少用戶輸入

雖然PC端輸入比移動端更加便捷，但是輸入型操作對用戶而言成本仍然較高。一方面用戶需要思考應該填寫什么內容，另一方面需要準確地完成內容輸入。而選擇的成本相對更低，因此在表單設計時，盡可能讓用戶以選擇的方式完成任務。

例如郵箱在上傳附件時，如果郵件沒有填寫過標題，會將附件名稱直接填入郵件標題中，減少用戶輸入。

2）合理預設

表單信息可以通過信息的抓取、內容關聯度分析，預設合理內容值，減少用戶的操作。例如QQ郵箱設置時，系統提供了默認話術，用戶只要快速啟用即可。

對于如證件類型、手機區號、國籍等較為通用的選項，為用戶提供默認選擇，同樣可以有效簡化操作步驟，減輕用戶輸入，幫助用戶更快地完成表單填寫。

2、業務流程順暢

當我們在填寫A任務時，需要關聯選擇B任務。而B任務并沒有創建，該怎么辦呢？

通常情況下，需要在A任務中完成創建B任務。例如彈窗、抽屜、甚至是新開頁面的形式，保證主流程的暢通。否則對于高頻操作的任務，會嚴重影響用戶的操作效率。

如果由于各種因素，在流程中無法直接創建分支任務，或者由于各種限制條件阻斷用戶操作時，該怎么辦呢？

此時需要在任務開始前，給用戶足夠的信息提示。避免用戶已經填寫了部分內容后，發現缺少相關的內容，導致任務無法完成。這會帶給用戶非常糟糕的體驗，尤其是會消耗用戶較大精力的工作。

3、保存機制

表單填寫時，可能會遇到各種異常場景，需要有防錯機制和保存功能，避免用戶誤操作時造成信息丟失。

4、即時反饋

表單填寫是為了向用戶收集正確有效的信息，所以需要在用戶填寫完成或者提交表單時增加校驗機制。

校驗機制分為前端校驗和后端校驗。

前端校驗無需服務器傳輸數據，前端頁面會根據校驗規則，對輸入完成的內容進行驗證。例如郵箱格式、手機號長度、密碼是否符合規則等。

后端校驗需要將表單內容傳入后臺數據庫進行匹配，不匹配則會將信息反饋至前端頁面。通常用在點擊提交按鈕后，例如賬號不存在、密碼錯誤等。

前端檢驗可以幫助用戶及時發現問題并修改，糾錯的效率更高。后端校驗相對滯后，出錯后用戶需要自行定位錯誤項。

無論采用哪種方式都要告知用戶錯誤原因，幫助用戶快速解決問題。

寫在最后

表單設計是設計師繞不開的內容，無論用什么方法論也無法窮盡其中的可能性，也沒有一套覆蓋所有場景的設計模板。設計師需要根據實際的業務場景，去完成合適的設計方案，并在不斷的實踐中積累經驗，總結得失。

作者：子牧先生

轉載請注明：學UI網》設計基礎(8): 表單設計中的認知與交互

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、數量非常多

我翻了好一會兒一直沒有翻到底~O(∩_∩)O~，只能用數量眾多來形容啦！各種小場景的插畫無論是獨立使用，還是組合使用，肯定可以滿足很多場景需求了。

二、顏色可以任意調節

這絕對是一個非常優秀且人性化的功能，里面提供的插畫作品不像一些平臺屬于圖片格式，只能下載固定配色的版本。這里提供的作品可以在平臺自定義顏色，展開拾色器隨便發揮，簡直是要逆天啦！??！

三、人性化的格式選擇

該平臺提供了 SVG 格式，方便下載之后進行二次編輯。如果你覺得已經很完美了，也可以選擇下載 PNG 格式，也是非常人性化的。

四、免費使用

這里提供的資源是可以免費使用到個人或者商業場景中，關于這一點也是值得推薦的理由。大家可以在平臺的相關規則說明中了解到，注意時刻關注規則說明的變動。

五、其他優勢

平臺還提供了一些別的風格，如果感興趣的同學可以自行體驗一下，也可以指定內容搜索，整體使用下來還是蠻不錯的。

六、欣賞一些插畫作品

黑馬哥為大家復制了一些插畫作品，大家可以感受一下作品的風格和質量，如果感興趣的話可以訪問體驗一下。

七、獲取網站鏈接

關注黑馬家族微信公眾號，后臺回復關鍵詞“插畫庫”即可獲取鏈接。

unDraw 插畫素材庫網址：https://undraw.co/illustrations

八、創作一下吧！

黑馬哥也運用這個插畫素材庫的資源完成了一組作品，以此給大家做一個案例示范，感興趣的同學也可以嘗試一下。

九、布置一個作業

根據黑馬哥完成的案例，大家可以舉一反三。根據以下提供的高保真原型，完成一組小作業，

作者：黑馬青年

轉載請注明：學UI網》有了這個插畫庫，作品亮點暴漲呀！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

馬賽克像素風格的誕生源于早期 8 位/16 位計算機有限的存儲空間和圖像表達能力。都說時尚是一個輪回，現在我們能看到很多海報設計采用馬賽克的形式，以營造更強的趣味感的形式來吸引人的注意力。

這次就給大家演示簡單容易上手的這 4 種馬賽克形式的海報案例展示：

夏天到了，大家一起來吃瓜吧！先畫一個簡單的西瓜圖標，在 Ai 里執行【對象】→【柵格化】。

繼續在 Ai 里選擇【對象】→【創建對象馬賽克】，就可以得到下面這個馬賽克西瓜，是不是灰常簡單！拼貼數量這里跟本身圖的大小有關，大家可以多嘗試~

這個馬賽克西瓜現在都是一個個方塊組成，把邊緣的色塊規整一下，就可以啦！

用同樣的方法再畫一個笑臉跟對話框增強趣味：

然后我們再來做一下背景，一組夏天的清涼配色送給大家，這里我用的是 Ai 里的網格工具用錨點來添加漸變色。

最后環繞圖形排文字，這張圖形馬賽克海報就完成啦！

我這里選用粗細筆畫變化比較大的一款宋體，后面馬賽克的效果處理會更明顯些。

打開 PS 建一個新的畫板【1200×1600】，背景色改黑色，文字白色，然后把文字圖層轉換成→【智能對象】，選擇【濾鏡】→【像素化】→【馬賽克】，數值如下。

新建一個【閾值】圖層，數值如下：

就可以得到這個馬賽克字體的效果啦！

在 PS 里蓋印一個圖層然后把圖拉進 Ai 里進行【圖像描摹】，然后【擴展】，就可以得到矢量的馬賽克字啦！然后可以更改顏色，這次我想做一個更潮流電子的感覺，所以選用了綠色，然后再加入一些裝飾線條增強畫面感。

這里我還選了一個像素的英文字體來增強畫面形式感，再加入其他文字信息跟裝飾圖案。

然后再加入一些漸變色塊，增強顏色層級，豐富畫面。

本來這里也只打算做一張案例的，萌萌心血來潮說，要不再試試？這不就又多做了一張，真是歡（要）天（了）喜（老）地（命）了。

第一張把人物拉進 PS 里處理，選擇→【圖像】→【模式】→【灰度】處理成黑白的，然后再選擇→【圖像】→【模式】→【位圖】數值如下（半調網屏數值越大，方塊就越小，反之亦然）。

然后再選擇→【圖像】→【模式】→【灰度】，在灰度的模式下再選擇【RGB】模式即可，把人物摳出來，我是提前在有顏色的情況下先扣了圖，半調效果做了之后，按之前扣好圖的人物輪廓再取一個半調的人物輪廓即可。

接著我們再來做背景半調的處理，我直接用的 PS 透明背景截圖然后用處理人物的方法同樣處理了一個半調背景，再疊加顏色即可（偷了個小懶）。

繼續豐富畫面，選一個高挑的英文，在 Ai 里先擴展一下，然后再選擇【對象】→【封套扭曲】→【用網格建立】。

用選擇工具，分別選中上中下三行的錨點，進行移動，中間的往右移動，上下兩邊往左邊移動，即可得到：

最后環繞人物擺上文字信息就可以啦！

不要停，繼續做第二個案例，其實第二個案例用到的方法會更簡單，一秒出圖不夸張，第二個想做復古一些樂隊的的感覺，于是找了一張人比較多的圖，拉進 PS 里，新建一個閾值圖層，這不，效果就出來了！

跟上面一樣的方法，我先在有底色的那張上把人物扣好，然后再用這個輪廓把閾值圖層的人物摳出來，好像差點什么？哦，樂隊的吉他！然后我趕緊找了把吉他放上去！

我覺得還可以再豐富一下畫面，于是我用 Ai 填充圖案的方法，加了點馬賽克的紋理，再找了張斑駁的紋理疊在上面，這樣復古感就更強烈了！

最近疫情又反復了，這不今天下著雨也收到了社區讓我們去做核酸的通知，于是我隨手拍了張圖，不得不說，拍出了我的辛酸，于是我決定，這次的案例就用它了！誰手機里還沒有幾張街拍呢！

熟悉的套路，在 PS 里做效果,選擇→【圖像】→【模式】→【灰度】處理成黑白的，然后再選擇→【圖像】→【模式】→【位圖】→【圖案仿色】。

得到這個畫面后，再選擇→【圖像】→【模式】→【灰度】，在灰度模式上再選擇【RGB】模式，再選擇→【圖像】→【調整】→【漸變映射】，這個背景就處理好啦~

最后配上我辛酸的文案，最后這張海報就做好啦！大家可以試試這種簡單方法拯救一下你相冊里的照片哦。

本次教程就結束啦！快帶我去你的收藏夾吃灰吧！

作者：大熊

轉載請注明：學UI網》那些要打馬賽克的設計…

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

• 需求文檔不規范怎么辦？
• 承擔了很多與產品相關的工作，是好還是不好？
• 需求量大，如何推動需求排期合理化？
• 經常插入或變更需求怎么辦？
• 如何更有效的解決問題？
• 需求是否有價值？
• 如何做好體驗優化？
• 怎樣做好設計，并提升設計的說服力？
• 應該具備怎么樣的知識才能更好的應對日常需求？
• 我應該掌握哪些專業知識與能力？
• …

上述問題看起來比較雜亂，但是通過一定的分類整理，可以概括為兩個方面，即：「專業能力」與「職業能力」。

圖1 專業能力與職業能力

專業能力：

與設計直接相關的能力，是完成設計工作不可或缺的組成部分，比如 需求挖掘、需求分析、方案設計、用戶研究等內容。

職業能力：

崗位要求需具備的一些能力，可以幫助設計師更好地處理工作過程中遇到的問題，比如溝通能力、規劃能力、驅動能力、執行能力等，可概括為“發現問題-解決問題”的效率與能力。

隨著設計師項目經驗和工作經驗的增加，其所具備的專業能力和職業能力也會不同程度的成長與提升。下面會首先對新人設計師所應具備的專業能力進行總結和說明；其次對與職業能力常見的問題進行一定的解答與建議，希望能夠幫助到各位設計師同學。

一、專業能力

設計師首先要明確設計工作的主要內容，從需求分析、用戶分析到將抽象的需求轉化為具象的設計方案輸出，再到跟進設計方案上線；通過定性定量的方式跟進用戶反饋，持續推動用戶體驗優化及挖掘更多用戶場景和訴求均是設計師日常工作過程中的核心工作內容，接下來我們初步分析：

圖2 設計師主要工作內容

1、需求分析與用戶分析

當設計師拿到需求后，切記要多去追問為什么。因為產品經理給到設計師的需求更多情況下是具體的功能，而對于為什么要做該功能是需要設計師去深入洞察和挖掘的。此階段，設計師要明確「業務目標」「業務指標」「設計目標」和「設計指標」的概念，參照下圖所示。

圖3 需求分析與用戶分析

以“某客服平臺改版”的需求為例進行簡略介紹，其業務目標是：解決客服人員工作過程中遇到的痛點，提升客服使用體驗，同時期望縮減客服人力成本投入，并明確具體的業務指標。設計側接手項目后，通過 用戶觀察、用戶訪談等用戶研究手段，了解平臺痛點，并從「業務層面」和「設計層面」總結歸納。

圖4 客服系統分析

對于業務層面的突出問題，通過與產品多次溝通形成相應的產品策略，并落實到具體方案中。而對于設計層面的問題，為了更系統準確的了解客服人員的痛點，設計側又進行了二次調研。首先整理訪談提綱對客服人員進行訪談；其次整理了問卷提綱，通過發放問卷進一步驗證調研結論的準確性，并全面收集客服人員的建議。并且沉淀各角色人員的用戶畫像，了解各角色人員的主要工作事項、關注點及痛點。調研發現，客服人員的主要工作內容聚焦在以下事項，并且客服人員對系統的整體滿意度較低。

圖5 用戶分析-客服主要工作內容

結合業務目標及對業務和用戶的分析，設計側將“提升用戶核心工作流程的工作效率及平臺整體的用戶滿意度”作為設計目標。由此設計的重點也放在核心操作路徑優化和整體體驗提升上面。通過對調研結果進行系統梳理，整理出高優先級優化內容，并推動埋點功能上線。最終，設計側拿到核心操作路徑優化前后的數據對比，達成設計目標。

建議各位設計師拿到需求后不要急于產出設計方案，多去進行需求分析與用戶分析，它可以幫助設計師更深入的理解業務，挖掘業務本身的問題，了解用戶的使用場景、關注點、痛點、期望與建議，為后續開展方案設計提供設計依據。在設計評審時呈現自己的思考與分析內容，也會大大提升設計方案的說服力。

2、需求轉化為設計

關于設計目標的重要性在上述部分已有講解，因此本部分重點講解「設計系統」與「設計原則」。在日常工作中，除了上述提到的平臺改版等較為復雜的需求，絕大部分情況是產品經理梳理清楚具體的需求或功能點，經需求評審后將其給到設計師，由設計師在敏捷迭代有限的時間內快速產出最優的設計方案。而對設計系統的充分了解和應用是B端設計過程中不可缺少且非常重要的一部分。

設計系統的構成

《Design System》一書中對設計系統的構成進行了詳細的解讀，筆者將其中與工作關聯性最強的部分進行了整理，并且結合工作經驗簡要談談自己的理解。

圖6 設計系統的構成

• 設計原則：

設計過程中需要遵循的指導原則與依據，有利于保障系統的易用性，提升用戶滿意度。由于設計原則的重要性，筆者會在下文中進行詳細描述。

• 設計組件：

通常包含基礎組件、復雜組件和業務組件。基礎組件即原子組件，例如按鈕、輸入框、下拉框等，可用于構成復雜組件或業務組件。復雜組件通常由基礎的原子組件構成，但仍然在多條業務中具有通用性，例如 表單。業務組件通常用在特定業務場景下使用，具備復用性的同時可保證設計統一性。由于各公司通常具備成熟的組件庫或使用ant design和iview組件。因此設計師在業務支撐過程中更多是從業務組件入手，本著“標準、統一、復用”的理念，沉淀豐富的業務組件以提升設計統一性、以及設計與開發效率。

• 設計模式：

同類場景下用戶行為的統一模式，從而避免多種設計問題出現，有利于形成統一的用戶心智，符合系統設計的一致性原則，例如上傳、搜索、批量操作等。需要通過詳細的設計規范，對模式的使用場景、解決的問題、遵循的原則以及模式具體如何應用進行詳盡細致的說明。某些設計模式可以沉淀為組件來達成模式的統一應用，而對于不方便沉淀為組件的模式，需要整理詳細的規范文檔，方便設計師查閱與使用。

• 控件庫：

將設計資產（組件、模式、圖標、插圖等）整理為symbol控件，在axure、sketch等設計軟件中可快速使用控件搭建頁面，提升設計效率。

• 視覺樣式：

通常包含顏色、布局、字體、圖標、動效、插圖等，是保持全局樣式視覺統一性的重要基礎。

• 設計規范：

對視覺樣式、組件、模式等如何應用進行詳細的設計說明，包含設計原則、使用場景、使用流程與反饋等，產出通常為設計規范文檔，對于新人設計師，一定要熟記、掌握和學會如何應用。

設計原則

關于B端設計原則，設計師對“高效、清晰、可視化”等原則一定不會感到陌生，但是筆者一直在想設計原則的得來是否能夠更加有依據。由此上網看了很多文章，也結合自己支持的業務去思考，基于個人經驗將設計原則總結概括為三個部分：「設計指導原則」「事實性原則」「可用性原則」。 

圖7 設計原則

設計指導原則：

B端設計原則的頂層指導原則，是整個平臺設計的全局性原則，通常由 業務定位、行業屬性、客戶標準、用戶特征等因素綜合得出。

比如公司內部的客服系統和面向房地產行業的設計管理系統，客服系統從業務定位出發是希望客服人員工作更加高效，而客服人員從自身動機出發也期望更加高效的完成目標，以取得不錯的績效。一般在設計時，設計師考慮到信息密度的問題，會將部分信息折疊收起，但是對于客服人員來說，他們更希望將全部信息鋪開展示，通過瀑布流的形式他們可以快速檢索信息，提升工作效率。而對于房產的設計管理系統，業務定位是提供全鏈路的解決方案，讓客戶滿意是非常重要的業務目標。

由此，滿足客戶的標準和使用人員的訴求對于系統設計來說非常重要?？蛻魰谛袠I屬性的特點提出要求，比如更加注重科技感，用戶希望頁面更直觀，信息密度小等，設計師要綜合多種考慮去制定全局的設計指導原則。

• 事實性原則：

基于業界的定律去設計，為最優設計方案提供更多依據。比如希克定律、菲茨定律等。除此之外，設計師更要懂心理學，了解用戶在觀察、閱讀、記憶等方面的影響因素，并且將其應用在方案設計中。如此，設計方案便有理有據，經得起推敲。

• 可用性原則：

比如尼爾森十大可用性原則和設計界其他的一些可用性原則，設計師相對來說都比較熟悉，需要結合業務特征進行靈活的運用。

基于設計目標、設計系統、設計原則進行具體的方案設計，會幫助設計師從“完成方案”到“完成最優方案”進階，同時也有利于：保障設計統一性，提升設計與開發效率；形成統一的用戶心智模型，提升用戶體驗；平衡設計與技術，降低技術開發成本，保障功能按時上線。

3、需求挖掘與反饋收集

通?？墒褂枚ㄐ?、定量的用戶研究手段去挖掘用戶訴求以及收集用戶反饋。定性調研通常包含：用戶觀察、用戶訪談、焦點小組、啟發式評估、可用性測試等。定量調研通常包含：問卷調研、數據埋點、后端數據拉取、AB測試等，新人設計師可以選擇適合當前業務發展階段的調研方法。與用戶研究相關的資料較多，大家可以自行搜索學習，此處不再贅述。

這里筆者強調一點，即使用“體系化的設計思維”去整理用戶反饋的體驗問題。通常來說，調研后收集到的用戶反饋是相對零散的，即便按功能模塊分類整理，并且對優化帶來的價值進行描述，業務人員也很難理解優化某一個體驗問題帶來的價值，從而導致設計師在推動體驗優化需求排期時遇到阻力，且由于roi的投入產出比低體驗優化被無限延后。此時設計師需要進行體系化的梳理，重點在核心工作人員的核心工作路徑優化，預估優化后帶來的數據價值，以此去PK其他需求證明體驗優化帶來的價值。在上線后也需要及時跟進真實的使用數據，拿到量化的數據結果及時同步相關人員。

圖8 體系化整理體驗問題

二、職業能力

新人設計師需要逐步培養自己“發現問題和推動問題解決”的能力，多交流，多思考，多總結。這里有幾個小建議給到大家：

• 建立規范意識，通過標準化規范化的流程解決問題

在產品的敏捷迭代過程中，產品—設計—研發—測試等各環節必須保持規范化的運行節奏，一旦某環節出現異常，則會影響敏捷迭代的整個流程。比如需求變更的問題，可以在敏捷迭代復盤會上提出，并且跟大家一起分析背后的原因，找到行之有效的解決方案。若是因為客戶提出臨時加需求，可以考慮需求置換，但是如果是產品經理個人的原因，說明需求優先級排序出現問題，可能需要建立一套標準的優先級評估規范來避免或減少此類問題。

再舉個例子，關于“需求量大，如何推動需求排期合理化的問題”?？梢韵热ナ崂懋斍按嬖诘膯栴}，以及帶來的影響，同時提出解決方案，跟業務人員一起探索，達成一致后運行解決機制就能解決該問題。

圖9 需求排期機制

• 找準設計邊界，學會衡量利弊

作為設計新人，一定要學會明辨職責范圍內的事項，找準設計邊界。比如產品經理離職了，在短時間內設計師承擔了部分產品經理的職責，統籌需求收集，給出設計方案，把控敏捷流程，保證產品迭代正常進行，且符合設計師職業和專業能力范圍內時，設計師是可以承接的。但同時我們需要不斷跟進業務招聘新人，讓專業的人來做專業的事情，避免將個人精力全部花費在與產品相關的事項上面。

日常工作中設計師一定要學會明確邊界，切忌將工作重點轉移到非設計相關的事項而偏離了設計本身，可以多用系統性的思維去思考和分析利弊，相信此時設計師就會有自己的答案。

• 學會借力，必要時學會依靠團隊

設計師，尤其是新人設計師，在工作中遇到的問題很可能是憑一己之力無法解決的。這時候可以考慮借力，向領導借力，向團隊借力，可以說出自己的想法，尋求大家的建議。不僅可以收獲到經驗，還可以提高解決問題的效率。舉個例子，筆者剛剛畢業入職后，要去整理所負責的移動端產品的體驗優化，采取了“群策群力”的方式，邀請團隊的設計師一起進行體驗走查，在2個小時的會議時間完成了整個產品的走查，并且收集到非常多的有效建議，依靠團隊的力量達到事半功倍的效果。

總結

作為一名“過來人”，回想起自己還是設計新人的時候遇到的問題，踩過的坑…內心很感慨。因此，一直都想寫一篇文章，將自己的經驗和心得總結下來，希望本篇文章能夠幫助設計師少走彎路，快速成長。

最后，借用在《騰訊產品法》一書中看到的一段話送給大家，我想設計也大抵如此。

階段一：以片面、固化的眼光看問題，只看到零散的表象和靜止的格局。解決方案呈點狀隨機分布。

階段二：以宏觀、系統的眼光看問題，能看到產品與產業、產品與其他產品的關系和位置。解決方案開始具有系統性特征。

階段三：以動態、演進的眼光看問題；能看到時間長河中問題變化的趨勢。解決方案能夠助推產品順勢成長。

設計者修煉產品設計能力的過程本質上就是一個思考力進階的過程。

參考書籍

《在騰訊產品法》

參考文章

尼爾森的十大可用性原則與場景案例

《Design System》相關文章

《Pin Design》年刊文章

作者：瑤一

轉載請注明：學UI網》B端設計經驗總結-幫助新人快速上手

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、持續時長和速度

動效設計中的持續時長和速度是兩個密切相關的因素。在動效設計中，需要確保動效不要移動得太快或太慢，從而影響可用性，破壞使用體驗。

那么，動畫的最佳時長是多少呢？

一般來說，標準的UI動畫時長應該在200毫秒-500毫秒之間——這組數字是基于我們大腦的處理能力而得到的時長區間。

小于100毫秒的動畫是瞬時的，不會被用戶注意到；如果時長大于1000毫秒(1s)，會讓用戶感到動畫很緩慢，帶來一種拖沓的感覺。

同時，我們也要考慮其他可能影響動畫速度的因素：

屏幕尺寸：由于手機和電腦有著不同物理尺寸的屏幕，尺寸的不同會影響動效的速度，屏幕越小，運動路徑越短。對于移動屏幕，動效速度應保持在200-300ms之間，平板電腦應該保持在400-450ms之間；

web動畫：在瀏覽網頁時，我們更習慣于網站的即時響應效果，因此網站的動畫速度也更快。因此對于網站來說，轉場動畫的時長保持在150-200毫秒之間，更符合用戶的瀏覽習慣。

以上提到的區間是相對保準的動效時長，并不是一成不變，具體的動效時長和速度需要根據具體的需求、場景，靈活分析。

二、緩動

現實中的物體由于受到重力、阻力等因素的影響，速度并不是恒定不變的。換句話說，物體都會有加速、減速、平滑等不同的運動狀態。

為了使動畫更真實，我們需通過緩動來模擬出這些因素，讓界面中的元素運動的更自然，避免過于死板。

緩動決定了元素在運動過程中速度的變化，常用的類型包括：線性勻速、緩入、緩出、緩入緩出。

1、線性勻速

當元素沒有受到物理力的影響，速度保持恒定，就會發生線性勻速運動的效果。

線性勻速在改變元素位置的設計中使用相對較少，更多是用在改變元素的狀態、屬性（透明度變化）等不涉及元素位置改變的設計中。

2、緩入

緩入對應于元素的加速曲線，通常用于當對象從靜止到加速離開用戶視線的過程。例如一輛汽車駛出時，速度從0開始逐漸增加，然后在駛出時達到最大值。

3、緩出

緩出是緩入的對立面，用于屏幕上的對象從高峰值進入，逐漸減速直到到達特定位置的過程。例如一個人從屏幕外全速進入屏幕內時，進入畫面時的速度最高，然后逐漸減速到零。

4、緩入緩出

緩入緩出也稱為標準曲線，指對象從畫面的一個部分移動到另一個部分，整個移動過程中始終保持在幀中，通常用于為在同一界面中改變位置的元素創建動畫。例如一個鐘擺，它的速度從峰值開始，緩慢減速到0，然后再次加速，不斷在一個固定的位置區域循環。

需要注意的是，不對稱標準曲線會使物體的運動變得更加自然。

在使用緩入緩出時，要強調減速而不是加速，因此減速的時間要比加速時間要長。在這種情況下，用戶會更關注物體的后半段，從而更容易關注物體的新狀態。

三、動效編排

動效編排是指對界面中不同的元素進行統一、有序的編排，讓元素間更協調，通過更流暢的動效來引導用戶的注意力。動效編排包括平等互動和從屬互動。

1、平等互動

平等互動指對象根據相同的規則移動。

在這種情況下，界面中的元素會變得整齊有序。以界面中的卡片列表為例，平等的互動編排保證卡片一個接一個，從上到下以一種協調的方式出現，能夠從上到下引導用戶的注意力。

如果不按照這種編排規則，界面中元素的出現順序會產生混亂，從而影響用戶的瀏覽。

在表格類頁面中，元素的運動情況會更復雜。

在表格視圖中，應該按照對角線的方式來引導用戶的關注點。如果使用水平方向的運動讓元素一個一個展示，會造成元素的加載時間過長，用戶的瀏覽路線來回曲折，體驗不流暢。

2、從屬互動

從屬互動指界面中有一個主體對象，用來吸引用戶的注意力，界面中的其他元素都從屬于這個主體對象。這樣的編排方式讓用戶的注意力更聚焦到界面中重要的元素上，保持元素的運動主次更清晰。

還需要注意元素的運動曲線。如果一個元素不成比例地改變大小，例如從一個正方形變成一個矩形，那么元素應該沿著弧線移動。

如果元素的大小按比例變化，元素應該沿著直線運動。

此外，我們可以將曲線運動分為兩類：垂直向外（水平開始，垂直結束）、水平向外（垂直開始，水平結束）。

例如如果頁面上下垂直滾動，頁面中的元素應該以垂直向外的方式展開，先移動到右側，然后向下運動。如果頁面是水平滑動，元素則以水平向外的方式展開。

另一個問題是元素的運動路徑相交時，元素間應該遵循物理定律，不能互相穿越?；蛘咴谠匾苿忧皩⒃靥嵘阶钌蠈?，讓動效看起來更自然。

四、UI動效設計常用到的軟件

當看到一個好看的動效時，常常會有小伙伴問到使用什么軟件做的。

目前有很多軟件可以進行UI動效設計，借著這次講解動效的機會，我簡單列舉三個自己用過并感覺還不錯的軟件，僅供參考，建議大家可以去親自體驗一下每款軟件。

1、ProtoPie

ProtoPie是一款輕量級的動效軟件，將頁面原型、交互和動畫整合到了一起，既可以直接在里面設計高保真的UI頁面，還能讓這些頁面快速動起來。

ProtoPie操作頁面設計簡潔，上手相對簡單，沒用過的新手也能快速開始。ProtoPie通常和Sketch搭配起來使用，先在Sketch里設計UI頁面，之后導入到ProtoPie中進行動效設計，效率賊高。

2、Principle

Principle也算輕量的動效軟件，相對更成熟。Principle通常是和Axure搭配使用，產品經理或者交互設計師在設計界面原型和交互時用的比較多。需要注意的是，Principle只能在MAC系統中使用，可能對于不熟悉它的人來說，剛上手使用可能會有一點點困難。

3、After Effects

AE作為一個老牌的設計工具，大家應該都或多或少接觸過。AE功能非常強大，可以實現很多復雜的動效效果，但操作起來相對復雜，學習成本也相對較高。

目前大部分的動效都可以通過這三款軟件做出來，小伙伴們可以根據自己的需求，選擇適合自己的動效軟件，從而提升設計效率。

五、最后

以上就是UI動效設計需要考慮的三要素，希望通過這些內容能幫助你對動效設計有更多的認識和思考。

 
作者：Clippp

轉載請注明：學UI網》UI動效設計指南！三個要素打造流暢的動效體驗

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司