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

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

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

 

一、什么是元宇宙？

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

《頭號玩家》

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

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

2、元宇宙中的內(nèi)容 

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

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

3、數(shù)字商品 

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

4、去中心化的支付系統(tǒng) 

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

5.為增強現(xiàn)實和虛擬現(xiàn)實設(shè)計 

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

以下幾個方面值得在設(shè)計時重點關(guān)注：

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

6、隱私保護 

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

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

7、更少的干擾性廣告 

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

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

三、元宇宙設(shè)計工具

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

1.、故事板

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

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

2、3D建模工具

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

使用 Blender 創(chuàng)建房屋模型。圖片來自Blender.

作者：百度APP用戶平臺

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

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

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

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

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

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

1、降本提效

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

2、質(zhì)量保障

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

• 一致性：相對一致的表現(xiàn)樣式，設(shè)計風(fēng)格和交互體驗上都可保持統(tǒng)一；

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

• 標(biāo)準(zhǔn)化：符合基本審美標(biāo)準(zhǔn)，雖不會很亮眼，但也不會很難看。

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

我們也要建立起一個重要的認(rèn)知，那就是：

做組件不是設(shè)計目標(biāo)，

而是一種為業(yè)務(wù)賦能的手段和方法。

能夠為業(yè)務(wù)帶來正向影響、助力業(yè)務(wù)發(fā)展的組件才是有效的。

二、設(shè)計師的工作重心有哪些

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

1、深挖業(yè)務(wù)訴求，優(yōu)化體驗

一款好的產(chǎn)品，質(zhì)量不會僅停留在合格線。設(shè)計師可以把更多的時間和精力放到更有價值的工作上去，關(guān)注業(yè)務(wù)目標(biāo)和用戶需求，對業(yè)務(wù)邏輯做深度理解和剖析。不僅僅是在界面細(xì)節(jié)的表現(xiàn)手法上下功夫，還要用系統(tǒng)性思維為整個產(chǎn)品做全方位的體驗優(yōu)化。

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

2、提升組件專業(yè)性，賦能業(yè)務(wù)

很多業(yè)務(wù)領(lǐng)域有其獨特性，比如金融類組件和政務(wù)類的產(chǎn)品頁面列表內(nèi)容就有很大區(qū)別。這就使得單一的組件在應(yīng)用的過程中可以被再次組合、拼裝和沉淀。

針對不同的業(yè)務(wù)領(lǐng)域，將高頻使用的組件結(jié)合業(yè)務(wù)特性，進行更為專業(yè)的沉淀也很重要。這類組件使用起來也會更加得心應(yīng)手、加倍提效。

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

3、提升組件易用性，規(guī)范使用

組件并不是一勞永逸的設(shè)計工具，它需要緊跟業(yè)務(wù)的步伐迭代更新。只有當(dāng)組件的質(zhì)量達標(biāo)，具備了一定的穩(wěn)定性和易用性，才能被設(shè)計師和開發(fā)高效、高質(zhì)地使用，更好地支持業(yè)務(wù)需求。

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

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

4、優(yōu)化檢驗流程，排查問題

這里所說的「檢驗」包括兩方面工作內(nèi)容：

一是對于研發(fā)質(zhì)量的檢驗；

二是對于產(chǎn)品體驗的監(jiān)測。

先來看看對于研發(fā)質(zhì)量的檢驗，我們可以分為兩部分內(nèi)容：

1）設(shè)計還原度走查：即對于開發(fā)完成設(shè)計稿后的質(zhì)量檢查；

2）組件應(yīng)用質(zhì)量走查：即排查組件的使用問題，判斷設(shè)計和開發(fā)的使用方式是否正確。

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

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

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

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

* 在公眾號后臺回復(fù) “體驗”  ，可以看到更加完整、多維度的產(chǎn)品質(zhì)量和用戶體驗檢測內(nèi)容。

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

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

作者：元堯

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》工作經(jīng)驗｜使用組件做B端產(chǎn)品，設(shè)計師的工作價值還有哪些？

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

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

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

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

前言

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

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

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

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

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

黑話的流行，個人認(rèn)為有以下兩種原因：

1、同事間相互內(nèi)卷的結(jié)果，通過黑話的包裝，去拉開和同事間的差距。

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

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

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

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

拉通多部門角色倒逼流程迭代，建立模型化、標(biāo)準(zhǔn)化、流程化范式。通過對建立范式的流程化復(fù)用，實現(xiàn)核心業(yè)務(wù)價值轉(zhuǎn)化。通過新范式的迭代，形成不同業(yè)務(wù)標(biāo)準(zhǔn)分層，人效提升高達2000bp。

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

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

一、項目背景

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

目前購買流程用戶流失率高，通過優(yōu)化該流程，提升整體轉(zhuǎn)化效率。

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

通過數(shù)據(jù)分析發(fā)現(xiàn)整個購買轉(zhuǎn)化漏斗，用戶流失率高。通過設(shè)計手段重塑用戶動線和購買心智，加固消費購買場，以此提升整體轉(zhuǎn)化率和整體GMV。

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

最后通過具體的核心指標(biāo)去驗證項目背景的設(shè)計優(yōu)化的意義。

二、設(shè)計目標(biāo)

以下這段是常見的設(shè)計目標(biāo)的白話文：

1、統(tǒng)一設(shè)計風(fēng)格，提升整個購買流程統(tǒng)一性。

2、減少操作層級，降低多層級導(dǎo)致的流失率。

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

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

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

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

3、信息降噪，通過重構(gòu)用戶動線和視覺布局，簡化用戶認(rèn)知與操作負(fù)荷。

4、重建購買鏈路的優(yōu)惠服務(wù)承載力。

三、設(shè)計策略

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

1、統(tǒng)一性：通過優(yōu)化圖標(biāo)，文字和視覺布局，提升整個流程的統(tǒng)一性。

2、簡化層級：通過簡化用戶操作次數(shù)，提升轉(zhuǎn)化率。

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

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

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

3、通過對用戶調(diào)研，重構(gòu)用戶購買動線，簡化操作流程和信息降噪等方式提升轉(zhuǎn)化率。

4、通過視覺表現(xiàn)和交互布局全方位展示優(yōu)惠服務(wù)賣點，提升操作能效。

四、設(shè)計方案

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

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

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

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

3、通過對用戶調(diào)研，重構(gòu)用戶購買動線，簡化操作流程和信息降噪等方式提升轉(zhuǎn)化率。

4、通過視覺表現(xiàn)和交互布局全方位展示優(yōu)惠服務(wù)賣點，以此提升購買效率。

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

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

最后才展示具體的設(shè)計方案。

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

五、設(shè)計驗證

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

本次優(yōu)化，用戶反饋良好。設(shè)計感官有一個整體的質(zhì)量提升。上線之后，收到了業(yè)務(wù)方的好評。

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

定量方面：

1、核心指標(biāo)：GMV提升360bp，月人均訂單數(shù)從5.1提升至6.2

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

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

定性方面：

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

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

作者：Echo

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何高級的說話？設(shè)計師項目匯報之黑話指南

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

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

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

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

1、表單排列

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

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

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

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

2、輸入框長度

1）輸入框排版

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

所以表單中要注意整體的協(xié)調(diào)性，不要為了對齊而對齊。

2）輸入框長度的暗示

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

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

3、必填與選填

必填和選填是表單的基本信息，用來引導(dǎo)用戶識別關(guān)鍵信息，做出行為決策。

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

但是同一個系統(tǒng)中建議還是采用統(tǒng)一的標(biāo)記方式。我個人更傾向于星號（*）方式，用戶成本低，對內(nèi)容干擾性更小。

4、識別好過記憶

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

1）主動性提示

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

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

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

2）交互性提示

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

3）被動性提示

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

5、主任務(wù)與分支任務(wù)的協(xié)同

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

如果按照順序?qū)⑿畔⒘_列展示，這些內(nèi)容會被放在頁面底部。長表單場景下，這些信息會無法直觀展示，用戶難以感知。所以需要為這些支線任務(wù)增加額外曝光。

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

具體的設(shè)計方案有很多種方式，需要根據(jù)場景和用戶確定。但是設(shè)計師需要能夠?qū)⒅魅蝿?wù)和分支任務(wù)進行有機的協(xié)同，保證用戶對頁面內(nèi)容的全感知和操作效率。

6、數(shù)量級的影響

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

信息量比較大時，首先要進行內(nèi)容拆解，按照用戶的認(rèn)知習(xí)慣完成信息分層，讓用戶不要直接面對大量數(shù)據(jù)。例如通過樹表結(jié)合，或者雙層關(guān)聯(lián)下拉選擇，逐步縮小用戶的目標(biāo)范圍。

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

表單設(shè)計除了靜態(tài)展示效果外，還有大量的交互操作。主要的設(shè)計目標(biāo)就是「效率」和「防錯」。

1、操作效率

1）減少用戶輸入

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

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

2）合理預(yù)設(shè)

表單信息可以通過信息的抓取、內(nèi)容關(guān)聯(lián)度分析，預(yù)設(shè)合理內(nèi)容值，減少用戶的操作。例如QQ郵箱設(shè)置時，系統(tǒng)提供了默認(rèn)話術(shù)，用戶只要快速啟用即可。

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

2、業(yè)務(wù)流程順暢

當(dāng)我們在填寫A任務(wù)時，需要關(guān)聯(lián)選擇B任務(wù)。而B任務(wù)并沒有創(chuàng)建，該怎么辦呢？

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

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

此時需要在任務(wù)開始前，給用戶足夠的信息提示。避免用戶已經(jīng)填寫了部分內(nèi)容后，發(fā)現(xiàn)缺少相關(guān)的內(nèi)容，導(dǎo)致任務(wù)無法完成。這會帶給用戶非常糟糕的體驗，尤其是會消耗用戶較大精力的工作。

3、保存機制

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

4、即時反饋

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

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

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

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

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

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

寫在最后

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

作者：子牧先生

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》設(shè)計基礎(chǔ)(8): 表單設(shè)計中的認(rèn)知與交互

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

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

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

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

一、數(shù)量非常多

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

二、顏色可以任意調(diào)節(jié)

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

三、人性化的格式選擇

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

四、免費使用

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

五、其他優(yōu)勢

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

六、欣賞一些插畫作品

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

七、獲取網(wǎng)站鏈接

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

unDraw 插畫素材庫網(wǎng)址：https://undraw.co/illustrations

八、創(chuàng)作一下吧！

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

九、布置一個作業(yè)

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

作者：黑馬青年

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》有了這個插畫庫，作品亮點暴漲呀！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新建一個【閾值】圖層，數(shù)值如下：

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

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

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

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

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

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

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

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

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

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

最后環(huán)繞人物擺上文字信息就可以啦！

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

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

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

最近疫情又反復(fù)了，這不今天下著雨也收到了社區(qū)讓我們?nèi)プ龊怂岬耐ㄖ?，于是我隨手拍了張圖，不得不說，拍出了我的辛酸，于是我決定，這次的案例就用它了！誰手機里還沒有幾張街拍呢！

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

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

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

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

作者：大熊

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》那些要打馬賽克的設(shè)計…

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

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

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

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

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

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

圖1 專業(yè)能力與職業(yè)能力

專業(yè)能力：

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

職業(yè)能力：

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

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

一、專業(yè)能力

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

圖2 設(shè)計師主要工作內(nèi)容

1、需求分析與用戶分析

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

圖3 需求分析與用戶分析

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

圖4 客服系統(tǒng)分析

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

圖5 用戶分析-客服主要工作內(nèi)容

結(jié)合業(yè)務(wù)目標(biāo)及對業(yè)務(wù)和用戶的分析，設(shè)計側(cè)將“提升用戶核心工作流程的工作效率及平臺整體的用戶滿意度”作為設(shè)計目標(biāo)。由此設(shè)計的重點也放在核心操作路徑優(yōu)化和整體體驗提升上面。通過對調(diào)研結(jié)果進行系統(tǒng)梳理，整理出高優(yōu)先級優(yōu)化內(nèi)容，并推動埋點功能上線。最終，設(shè)計側(cè)拿到核心操作路徑優(yōu)化前后的數(shù)據(jù)對比，達成設(shè)計目標(biāo)。

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

2、需求轉(zhuǎn)化為設(shè)計

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

設(shè)計系統(tǒng)的構(gòu)成

《Design System》一書中對設(shè)計系統(tǒng)的構(gòu)成進行了詳細(xì)的解讀，筆者將其中與工作關(guān)聯(lián)性最強的部分進行了整理，并且結(jié)合工作經(jīng)驗簡要談?wù)勛约旱睦斫狻?

圖6 設(shè)計系統(tǒng)的構(gòu)成

• 設(shè)計原則：

設(shè)計過程中需要遵循的指導(dǎo)原則與依據(jù)，有利于保障系統(tǒng)的易用性，提升用戶滿意度。由于設(shè)計原則的重要性，筆者會在下文中進行詳細(xì)描述。

• 設(shè)計組件：

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

• 設(shè)計模式：

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

• 控件庫：

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

• 視覺樣式：

通常包含顏色、布局、字體、圖標(biāo)、動效、插圖等，是保持全局樣式視覺統(tǒng)一性的重要基礎(chǔ)。

• 設(shè)計規(guī)范：

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

設(shè)計原則

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

圖7 設(shè)計原則

設(shè)計指導(dǎo)原則：

B端設(shè)計原則的頂層指導(dǎo)原則，是整個平臺設(shè)計的全局性原則，通常由 業(yè)務(wù)定位、行業(yè)屬性、客戶標(biāo)準(zhǔn)、用戶特征等因素綜合得出。

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

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

• 事實性原則：

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

• 可用性原則：

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

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

3、需求挖掘與反饋收集

通常可使用定性、定量的用戶研究手段去挖掘用戶訴求以及收集用戶反饋。定性調(diào)研通常包含：用戶觀察、用戶訪談、焦點小組、啟發(fā)式評估、可用性測試等。定量調(diào)研通常包含：問卷調(diào)研、數(shù)據(jù)埋點、后端數(shù)據(jù)拉取、AB測試等，新人設(shè)計師可以選擇適合當(dāng)前業(yè)務(wù)發(fā)展階段的調(diào)研方法。與用戶研究相關(guān)的資料較多，大家可以自行搜索學(xué)習(xí)，此處不再贅述。

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

圖8 體系化整理體驗問題

二、職業(yè)能力

新人設(shè)計師需要逐步培養(yǎng)自己“發(fā)現(xiàn)問題和推動問題解決”的能力，多交流，多思考，多總結(jié)。這里有幾個小建議給到大家：

• 建立規(guī)范意識，通過標(biāo)準(zhǔn)化規(guī)范化的流程解決問題

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

再舉個例子，關(guān)于“需求量大，如何推動需求排期合理化的問題”。可以先去梳理當(dāng)前存在的問題，以及帶來的影響，同時提出解決方案，跟業(yè)務(wù)人員一起探索，達成一致后運行解決機制就能解決該問題。

圖9 需求排期機制

• 找準(zhǔn)設(shè)計邊界，學(xué)會衡量利弊

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

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

• 學(xué)會借力，必要時學(xué)會依靠團隊

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

總結(jié)

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

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

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

階段二：以宏觀、系統(tǒng)的眼光看問題，能看到產(chǎn)品與產(chǎn)業(yè)、產(chǎn)品與其他產(chǎn)品的關(guān)系和位置。解決方案開始具有系統(tǒng)性特征。

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

設(shè)計者修煉產(chǎn)品設(shè)計能力的過程本質(zhì)上就是一個思考力進階的過程。

參考書籍

《在騰訊產(chǎn)品法》

參考文章

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

《Design System》相關(guān)文章

《Pin Design》年刊文章

作者：瑤一

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》B端設(shè)計經(jīng)驗總結(jié)-幫助新人快速上手

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

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

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

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

一、持續(xù)時長和速度

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

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

一般來說，標(biāo)準(zhǔn)的UI動畫時長應(yīng)該在200毫秒-500毫秒之間——這組數(shù)字是基于我們大腦的處理能力而得到的時長區(qū)間。

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

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

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

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

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

二、緩動

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

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

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

1、線性勻速

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

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

2、緩入

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

3、緩出

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

4、緩入緩出

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

需要注意的是，不對稱標(biāo)準(zhǔn)曲線會使物體的運動變得更加自然。

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

三、動效編排

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

1、平等互動

平等互動指對象根據(jù)相同的規(guī)則移動。

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

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

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

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

2、從屬互動

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

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

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

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

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

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

四、UI動效設(shè)計常用到的軟件

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

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

1、ProtoPie

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

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

2、Principle

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

3、After Effects

AE作為一個老牌的設(shè)計工具，大家應(yīng)該都或多或少接觸過。AE功能非常強大，可以實現(xiàn)很多復(fù)雜的動效效果，但操作起來相對復(fù)雜，學(xué)習(xí)成本也相對較高。

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

五、最后

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

 
作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》UI動效設(shè)計指南！三個要素打造流暢的動效體驗

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

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

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

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

我們在去做這種類型的風(fēng)格時，要學(xué)會總結(jié)，機能風(fēng)的海報版面雖然整體呈現(xiàn)較為復(fù)雜的效果，但如果仔細(xì)觀察，基礎(chǔ)的元素都比較簡單。

大家在做之前可以去先總結(jié)，通過觀察這類作品可以得到以下元素，比如：

01. 電子元件/芯片

02. 機械感元素

03. 不規(guī)則標(biāo)簽

04. 警告符號，裝飾性符號等

05. 黑白灰及熒光色的搭配使用 

然后我在準(zhǔn)備教程案例就開始畫呀畫，畫了蠻多適合應(yīng)用在機能風(fēng)格海報中的元素，最后干脆想了一下，那就索性把所有的畫完，源文件都送給大家吧…

教程突然就變成了素材分享…

下面我們來先看一下本期分享的素材，總共分為四個部分，每個部分的形狀細(xì)節(jié)都有不同的差別。

但是下載素材只是第一步，很多同學(xué)平時電腦里也攢了不少素材了，誤以為收藏等于學(xué)會，下載等于精通…

設(shè)計畢竟是個手藝活，還是要動手試試才知道怎么使用。

01、首先我們從我給的素材里面挑選幾個元素，我這里選擇了三個，大中小。

02、人物摳圖后，先觀察一下，人物本身自帶了黃色的輪廓光，那么主色我們就盡量要選擇黃色了，畫面才會有合理性。

03、這一步就是將圖形按照較為平衡的構(gòu)圖方式進行放置，可以和人物有適當(dāng)?shù)寞B壓穿插關(guān)系。

為了避免圖形太過零碎，強烈建議大家可以先以一個大色塊為主，可以避免主體散亂。

04、接下來將文字信息進行空白處放置，注意這里比較主要的信息就三塊，人名，活動名稱，時間地點，編排上主要突出這三個部分即可。

多余的裝飾性英文信息適當(dāng)縮小，起到一個點綴的作用就可以了。

05、最后添加一個紙張褶皺的效果，因為我元素及色彩處理的比較簡單，所以加深質(zhì)感的處理，可以讓海報更有層次感。

接下我們看第二個案例，這個案例我打算使用元素拼接的方式讓畫面更整體，細(xì)節(jié)可以適當(dāng)處理多一些。

01、老規(guī)矩，開始挑選圖形元素…

挑元素的過程確實是…太爽了，怪不得大家這么喜歡素材，盡管素材是我一個一個畫的，但是我挑的時候也感覺…太方便了…

這里我順便將元素組合了一下并且加了個顏色。

02、如果只是在畫面中間這樣放置的話，四周缺乏呼應(yīng)的元素，所以大家可以根據(jù)已經(jīng)選好的圖形特征自己簡單畫一些。

效果如下，是不是感覺完整性好多了。

03、然后圖片放置進圖形中，圖片整體也是呈現(xiàn)紅色調(diào)的，所以整體的色彩和元素我已經(jīng)用了紅色，那么建議重點的信息在這里都用白色，可以簡單做一個色彩突出的作用。

無論裝飾元素和文字有多少，最終還是要想辦法突出重點信息，這兩者本身并不沖突。

看第三個案例，先選元素。

01、順便選一些簡單的圖形裝飾元素，比如箭頭條形碼等。

02、這個圖片本身已經(jīng)蠻好了，底色也很簡單，所以我不打算摳圖了。

03、接下來注意觀察圖片，底部有大量的黑色，所以我們的標(biāo)簽部分可以直接放圖片下方就可以了。

其余文字環(huán)繞人物進行編排即可。

04、正在這個案例中，我想添加一下類似毛玻璃和磨砂的效果，增強圖形的質(zhì)感。

05、按照這個方法，我為其他地方也添加了這樣的磨砂效果，下圖為最終效果。

01、看第四個案例，先選元素。

其實我個人還是更喜歡這種帶圓角的感覺，感覺有點高端的樣子…

02、將元素和人物圖片進行合理構(gòu)圖，其實就是控制每個元素的大小和位置，放置他們的錯落感，保證人臉不要被色塊遮擋，文字信息順便也放置進元素中即可。

03、還是按照上個案例做磨砂效果的步驟，我們再加幾處磨砂效果。

下圖為最終效果。

04、注意這里的磨砂效果除了加描邊，我還加了投影，讓整個畫面的色塊錯落有點縱深感。

01、第五個案例我們換一下人物…一個題目做了四個案例,估計大家已經(jīng)看膩了…挑幾個圖形元素。

02、我們將圖片和元素做一下結(jié)合處理，人物的部分我做了錯位的處理，有點視覺迷幻的效果。

人物名字放置圖片頂部即可。裝飾性文字可以適當(dāng)?shù)母刈鲆粋€整體排版處理。

03、最后，老方法，再加幾個磨砂效果，你別說…這個效果確實有點上頭，普通人受不了這種誘惑…

不要怪我非要做的花里胡哨，花天酒地也不是我想要的方式…

01、第六個案例，還是…

挑幾個圖形元素…

02、人物圖片本來是這個樣子，背景是白色，不好處理整體的色彩變化，而我…也不想摳圖…

所以在ps里加了一個漸變映射效果。

03、圖片用一個元素，標(biāo)題用一個元素，這樣就做好了構(gòu)圖排版處理。

04、但是到這一步，畫面還是會有點空空蕩蕩，填充一些呼應(yīng)的元素即可。

最后，再加入紋理的效果疊上去就可以了。

01、第七個案例，挑幾個細(xì)節(jié)較為復(fù)雜的元素，這次我們是單獨拿來做背景使用。

02、為了做出層次感，可以給色塊適當(dāng)添加漸變色和投影，有點立體的效果會更好，因為本來就都是偏白色的，沒有投影和漸變的話效果不明顯。

03、重點信息我們就用以復(fù)本來的顏色就好，可以多一點裝飾性元素作為點綴，不然白色的背景還是有點空，有一些點線面的變化版面會舒服一些。

04、最后…

再加幾個磨砂玻璃效果…

這次我是真的膩了膩了…

01、第八個案例，元素選好之后，我這里直接處理了漸變的效果，作為背景，有了一點質(zhì)感。

02、黑白的人物放上去就很適合，這一步我們就搞定了背景和人物的畫面整體處理。

03、然后將文字編排進畫面中，但是整體除了黑就是白…

顏色有點太單調(diào)了，所以我們要換換顏色。

04、這個顏色…

就…

挺好…夜店風(fēng)的感覺…

最后來放一下合集

原文地址：胡曉波工作室（公眾號）

作者：王猛奇

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》科幻機甲風(fēng)格海報怎么做？

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

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

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

品牌價值“藏品化”的可能性

通過對阿里云用戶調(diào)研發(fā)現(xiàn)，數(shù)字藏品這項技術(shù)有著廣泛的用戶認(rèn)知基礎(chǔ)，有91%的阿里云用戶對阿里云推出數(shù)字藏品感興趣，其中81%的用戶比較感興趣及非常感興趣，40%的用戶曾經(jīng)購買過數(shù)字藏品。這項結(jié)論讓設(shè)計師們非常興奮，這就意味著利用數(shù)字藏品傳遞阿里云品牌價值存在確實的可行性。

致敬里程碑 

設(shè)計師和業(yè)務(wù)團隊就數(shù)字藏品的設(shè)計方向進行了多輪溝通和論證，以阿里云飛天5K紀(jì)念碑為表現(xiàn)形態(tài)的思路脫穎而出。

出發(fā)點是設(shè)計師們想借此項目重塑營銷品牌心智，回到“為了無法計算的價值”阿里云品牌主張，用“飛天5K紀(jì)念碑”這個開發(fā)者心中的圖騰，在網(wǎng)站上進行數(shù)字藏品與任務(wù)平臺的聯(lián)動，通過創(chuàng)意與品牌為業(yè)務(wù)帶來用戶增長價值。

回溯歷史，阿里云飛天5K是阿里云計算技術(shù)發(fā)展的一個里程碑，飛天5K集群上線是中國云計算最值得紀(jì)念的時刻，代表了中國云計算技術(shù)人勇敢追夢、追求極致的理想主義精神，其在用戶心中的意義不亞于一次成功的“登月”，這種寄托已經(jīng)成為阿里云品牌的核心資產(chǎn)之一。

因此選擇云計算開發(fā)者的精神圖騰——“飛天5K紀(jì)念碑”作為創(chuàng)意原型，進行數(shù)字藏品的設(shè)計，進一步拉進與用戶的距離，同時能在開發(fā)者圈層中打造心智，營造傳播聲量，鏈接阿里云品牌與用戶間的情感共鳴。阿里云首款數(shù)字藏品讓用戶充滿期待，用戶關(guān)注的將不僅是藏品的使用價值或增值價值，更多的是一種不可替代的情緒價值。

業(yè)務(wù)目標(biāo)的自然融入

〇 破圈裂變組合拳

在整體方案設(shè)計上，團隊將拉新的核心目標(biāo)和飛天5K數(shù)字藏品做了深度結(jié)合，利用「阿里云IP品牌價值+首發(fā)造勢+大促氛圍+精準(zhǔn)的種子用戶裂變+所見即所得的虛擬權(quán)益」的超強組合拳，構(gòu)建了完整的爆點傳播鏈，帶來規(guī)?；略鲇脩簦瓿闪艘淮纬晒Φ钠迫L試。

〇 多端聯(lián)動引發(fā)爆點

通過所見即所得的虛擬權(quán)益，突破用戶預(yù)期，引發(fā)了活動參與用戶通過微信群、朋友圈、微博、論壇等各種平臺的自傳播，形成穩(wěn)定裂變鏈條，吸引更多玩家參與。同時官方通過阿里云App、官方微博、鯨探App、鯨探小程序形成流量矩陣為活動背書，引爆活動傳播。

用戶因情感的喚醒，通過數(shù)字藏品活動自然的完成了對阿里云產(chǎn)品的了解，并在主會場產(chǎn)品力彰顯、爆款價格吸引下，成為了阿里云新用戶，幫助業(yè)務(wù)完美的完成了既定目標(biāo)?；顒觾H僅上線6天即完成一萬份數(shù)字藏品的發(fā)放，首購ROI達到58，同比上一次奧運小寶的拉新活動提升230%。

未來之路 

數(shù)字藏品未來將成為阿里云傳遞品牌價值的重要載體，更多承載了中國云市場情感的作品將定期與用戶見面，逐步形成阿里云獨有的云數(shù)字藏品矩陣，賦能云業(yè)務(wù)的發(fā)展。

原文地址： 阿里云設(shè)計中心（公眾號）

作者： 阿里云設(shè)計中心

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》B端營銷創(chuàng)意｜數(shù)字藏品能否成為B端業(yè)務(wù)力爆發(fā)的新介質(zhì)？

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

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

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

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