首頁

譯文:想要為元宇宙做設(shè)計(jì),這些可以幫到你

seo達(dá)人


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

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

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

 

一、什么是元宇宙?

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

圖片

《頭號(hào)玩家》

雖然最初元宇宙可能起源于科幻小說,但它無法被單一的定義,它更像是創(chuàng)建一個(gè)沉浸式虛擬空間的想法,人們可以在其中自然地互動(dòng)。你可以想象一個(gè)充滿數(shù)字形象的 3D 世界,它能提供全方位的數(shù)字體驗(yàn)。事實(shí)上,元宇宙并不是一個(gè)新興的概念,早在2000年,一款名為“第二人生”的平臺(tái)就已經(jīng)擁有了許多在我們今天看來與元宇宙有關(guān)的功能。作為一個(gè)用戶,你可以在“第二世界”中完成與現(xiàn)實(shí)世界中相同的事情,但它與現(xiàn)在我們所說的元宇宙有一個(gè)關(guān)鍵區(qū)別——“第二人生”并不是一個(gè)必須要借助VR/AR設(shè)備體驗(yàn)的互動(dòng)世界,最主要的原因是當(dāng)時(shí)的 AR/VR 設(shè)備還無法創(chuàng)造沉浸式的交互體驗(yàn)。從2022年開始,我們逐漸意識(shí)到,AR和VR才是組成元宇宙的關(guān)鍵元素,因?yàn)樗鼈兛梢詣?chuàng)造更加真實(shí)的虛擬體驗(yàn)(并且我們已經(jīng)擁有可以使其實(shí)現(xiàn)的技術(shù))。只要用戶戴上頭戴裝置,他們就能立刻進(jìn)入一個(gè)完全不同的世界。盡管用戶周圍的所有物體都是虛擬的,但它們對(duì)用戶來說是真實(shí)自然的。

下面是一些日常交互行為如何在元宇宙中應(yīng)用的示例:

  • 工作

辦公室這個(gè)場(chǎng)景其實(shí)可以自然的進(jìn)化成元宇宙,因?yàn)楝F(xiàn)在流行的混合辦公模式(一部分員工在實(shí)體辦公室辦公,一部分員工遠(yuǎn)程辦公)非常適合在元宇宙中實(shí)現(xiàn)。無論人們住在哪里,他們都可以作為一個(gè)團(tuán)隊(duì)一起工作,因?yàn)樵钪娼o了他們一種共享物理空間的感覺。Oculus 的 Horizon WorkRoom就是一個(gè)很好的例子。

  • 培訓(xùn)課程 

元宇宙可以成為學(xué)習(xí)的絕佳場(chǎng)所,它可以讓學(xué)生與老師或教練在元宇宙中進(jìn)行實(shí)時(shí)互動(dòng),就像在現(xiàn)實(shí)中上課一樣真實(shí)自然,你甚至可以認(rèn)為他們是同處于一個(gè)空間中的。

  • 游戲 

元宇宙很可能會(huì)首先在游戲行業(yè)中脫穎而出,自然而然地繼承許多游戲設(shè)計(jì)的許多屬性。比如元宇宙里的內(nèi)容可能會(huì)由用戶生成,并且元宇宙鼓勵(lì)用戶長期參與。

 

二、設(shè)計(jì)師如何為元宇宙進(jìn)行設(shè)計(jì)?

從設(shè)計(jì)師的視角來看,元宇宙是擁有許多可交互的服務(wù)的巨大平臺(tái),用戶可以在其中完全自主的選擇他們想要的服務(wù)。進(jìn)入元宇宙需要用戶創(chuàng)建數(shù)字形象,它不僅僅是用戶名和圖片,更像是用戶真實(shí)形象的數(shù)字孿生,用來與虛擬世界中的任何對(duì)象進(jìn)行交互。就像真人一樣,數(shù)字形象有一個(gè)身份來幫助用戶進(jìn)行訪問。

圖片

Oculus Quest來創(chuàng)建屬于你自己的形象

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

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

為元宇宙設(shè)計(jì)意味著設(shè)計(jì)一個(gè)完全沉浸的世界,設(shè)計(jì)師需要更全面更綜合的能力。下面列舉了設(shè)計(jì)師在設(shè)計(jì)元宇宙時(shí)需要特別關(guān)注的幾個(gè)領(lǐng)域:1、可用性 

可用性是優(yōu)秀設(shè)計(jì)的基本屬性,創(chuàng)造一個(gè)易用的元宇宙體驗(yàn)是非常巨大的挑戰(zhàn),因?yàn)樵S多關(guān)鍵的設(shè)計(jì)因素都會(huì)對(duì)用戶產(chǎn)生消極影響,比如暈動(dòng)?。╩otion sickness):用戶長期佩戴 VR設(shè)備所帶來的頭暈、惡心等癥狀,設(shè)計(jì)師在設(shè)計(jì)元宇宙的體驗(yàn)時(shí)就應(yīng)該想到這一點(diǎn),并想辦法進(jìn)行優(yōu)化。

元宇宙設(shè)計(jì)目前仍舊處于早期階段,這提供了從一開始就構(gòu)建易用性體驗(yàn)的絕佳機(jī)會(huì)。設(shè)計(jì)師不應(yīng)該只是在已有的經(jīng)驗(yàn)基礎(chǔ)上進(jìn)行適配,而應(yīng)該找到新的、更舒適的方法來幫助用戶長時(shí)間停留在虛擬空間中。

圖片

技術(shù)造成的暈動(dòng)病。圖片來自Harmony.

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

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

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

3、數(shù)字商品 

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

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

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

5.為增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)設(shè)計(jì) 

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

以下幾個(gè)方面值得在設(shè)計(jì)時(shí)重點(diǎn)關(guān)注:

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

6、隱私保護(hù) 

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

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

7、更少的干擾性廣告 

談到元宇宙,或許我們腦中會(huì)想到一些基于廣告曝光的商業(yè)模式,因?yàn)樵谠钪嬷兄踩霃V告將會(huì)是一件收入頗豐的生意,然而事實(shí)上,將廣告植入虛擬世界需要謹(jǐn)慎、謹(jǐn)慎再謹(jǐn)慎。

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

 

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

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

1.、故事板

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

圖片

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

2、3D建模工具

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

圖片

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

3. 社會(huì)學(xué) 設(shè)計(jì)師如果只通過搭建一些高質(zhì)量的3D物體(例如房子、汽車和其他人類環(huán)境屬性)就想創(chuàng)造出一個(gè)元宇宙,那幾乎是不可能的。讓元宇宙看起來和現(xiàn)實(shí)世界一樣真實(shí)的關(guān)鍵因素是如何能讓設(shè)計(jì)的物體之間的相互協(xié)作達(dá)到和諧統(tǒng)一。為了設(shè)計(jì)出一個(gè)擁有健康社會(huì)的的虛擬世界,設(shè)計(jì)師應(yīng)該了解現(xiàn)實(shí)世界是如何運(yùn)作的,這就是產(chǎn)品創(chuàng)造者必須學(xué)習(xí)人類學(xué)、建筑學(xué)和城市設(shè)計(jì)的原因。諸如用戶訪談、問卷、非參與性觀察研究(在不知道被觀察者的情況下進(jìn)行觀察)等方法對(duì)于創(chuàng)建好的用戶體驗(yàn)來說非常重要。

4. 交互原型 

創(chuàng)造真實(shí)的交互對(duì)設(shè)計(jì)師來說是首要目標(biāo)。在設(shè)計(jì)互動(dòng)體驗(yàn)時(shí),很重要的一點(diǎn)是不要白費(fèi)力去做重復(fù)的事情,使用一些在過往設(shè)計(jì)中驗(yàn)證過的經(jīng)驗(yàn)和方法會(huì)更有效。

現(xiàn)在,有一些工具可以幫助我們做到這一點(diǎn),其中很重要的一個(gè)工具是“交互SDK模塊”(Interaction SDK),這是一個(gè)模塊化組件庫,元宇宙設(shè)計(jì)師可以在其產(chǎn)品中使用。在這個(gè)組件庫中有很多元宇宙會(huì)用到的的基本框架和對(duì)象,比如基礎(chǔ)手部控制模型、距離計(jì)算器、手勢(shì)檢測(cè)等等。

圖片

使用交互 SDK 創(chuàng)建的虛擬手部和控件。圖片來自Macprotricks.

5. 情景研究 對(duì)于設(shè)計(jì)師來說,僅僅將一個(gè)產(chǎn)品設(shè)計(jì)出來是遠(yuǎn)遠(yuǎn)不夠的,我們還需要對(duì)設(shè)計(jì)的產(chǎn)品不斷的進(jìn)行測(cè)試,看看它是否能為用戶提供出色的使用體驗(yàn)。情景研究是一個(gè)非常好的方法和技術(shù),這項(xiàng)技術(shù)可以幫助設(shè)計(jì)師直接了解虛擬世界中發(fā)生了什么,以及哪些設(shè)計(jì)領(lǐng)域需要改進(jìn)。通過沉浸在你所創(chuàng)造的體驗(yàn)中,你會(huì)看到它的優(yōu)點(diǎn)和缺點(diǎn)。元宇宙代表了數(shù)字技術(shù)進(jìn)化歷程的下一個(gè)階段,最終元宇宙設(shè)計(jì)將融合人們的真實(shí)生活和虛擬生活。人們不僅會(huì)在元宇宙中互動(dòng),還會(huì)在元宇宙中生活。目前,我們正處于這一旅程的早期階段,它為產(chǎn)品設(shè)計(jì)師提供了一個(gè)塑造互聯(lián)網(wǎng)未來的絕佳機(jī)會(huì)。

 

作者:百度APP用戶平臺(tái)

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

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


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

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


工作經(jīng)驗(yàn)|使用組件做B端產(chǎn)品,設(shè)計(jì)師的工作價(jià)值還有哪些?

seo達(dá)人


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

我們先來看看組件的核心功能是什么。組件的作用有很多,其中有兩點(diǎn)最為突出:

 

1、降本提效

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

 

2、質(zhì)量保障

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

  • 一致性:相對(duì)一致的表現(xiàn)樣式,設(shè)計(jì)風(fēng)格和交互體驗(yàn)上都可保持統(tǒng)一;
  • 可用性:對(duì)于用戶來說具備最基本可操作性和可識(shí)別性;
  • 標(biāo)準(zhǔn)化:符合基本審美標(biāo)準(zhǔn),雖不會(huì)很亮眼,但也不會(huì)很難看。

 

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

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

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

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

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

 

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

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

 

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

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

* 我們?cè)?nbsp; 完成設(shè)計(jì)需求的三個(gè)層次! 一文中為大家介紹過承接產(chǎn)品需求的幾種方式,讀完本文之后歡迎繼續(xù)閱讀。

 

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

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

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

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

 

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

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

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

* 我們?cè)?nbsp; 組件的規(guī)范怎樣才能更好用? 一文中為大家介紹過一些提升組件易用性的經(jīng)驗(yàn),讀完本文之后歡迎繼續(xù)閱讀。

 

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

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

一是對(duì)于研發(fā)質(zhì)量的檢驗(yàn);

二是對(duì)于產(chǎn)品體驗(yàn)的監(jiān)測(cè)。

 

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

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

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

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

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

 

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

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

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

 

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

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

 


作者:元堯

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》工作經(jīng)驗(yàn)|使用組件做B端產(chǎn)品,設(shè)計(jì)師的工作價(jià)值還有哪些?

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


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

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

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



如何高級(jí)的說話?設(shè)計(jì)師項(xiàng)目匯報(bào)之黑話指南

seo達(dá)人


前言

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

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

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

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

因?yàn)樵谌粘9ぷ髦?,大部分同事做的事情大同小異,很多都是很小的事情,如何能拉開差距,體現(xiàn)自己做的事情有價(jià)值,那么這時(shí)候,通過黑話可以很好的拉開和大家的差距,雖然本質(zhì)上大家做的事情都大同小異。

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

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

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

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

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

我進(jìn)行一波修改,大家感受下這樣是不是感覺更高級(jí)呢?

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

一個(gè)小小的換燈泡,都能說地如此高深莫測(cè)。那么在實(shí)際工作中,即使是對(duì)文案進(jìn)行小修改,那文字會(huì)變得更加高深莫測(cè)。干的活立馬就顯得高級(jí)了。

接下來讓我們來看看如何將黑話整進(jìn)項(xiàng)目里面。

 

一、項(xiàng)目背景

以下這段是常見的項(xiàng)目背景的白話文:

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

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

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

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

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

 

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

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

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

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

3、簡(jiǎn)化視覺元素,強(qiáng)化重要信息。

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

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

2、通過設(shè)計(jì)策略透?jìng)髌脚_(tái)的信任價(jià)值。

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

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

 

三、設(shè)計(jì)策略

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

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

2、簡(jiǎn)化層級(jí):通過簡(jiǎn)化用戶操作次數(shù),提升轉(zhuǎn)化率。

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

1、深挖品牌價(jià)值、提煉ip、強(qiáng)化信任,形成多矩陣購買心智,通過平臺(tái)ip反哺購買鏈路。

2、透?jìng)餍湃危ㄟ^官方、第三方保險(xiǎn)、用戶評(píng)價(jià)等多維度組合拳深化用戶信任感知。

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

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

 

四、設(shè)計(jì)方案

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

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

1、深挖品牌價(jià)值、提煉ip、強(qiáng)化信任,形成多矩陣購買心智,通過平臺(tái)ip反哺購買鏈路。

2、透?jìng)餍湃?,通過官方、第三方保險(xiǎn)、用戶評(píng)價(jià)等多維度組合拳深化用戶信任感知。

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

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

首先單獨(dú)建一個(gè)畫板,將上述的四個(gè)方面全方位展示。

然后做一個(gè)整體的方案匯報(bào),展示全局性、局部性以及異常等。

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

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

 

五、設(shè)計(jì)驗(yàn)證

以下這段是常見的設(shè)計(jì)驗(yàn)證的白話文:

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

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

定量方面:

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

2、大幅度降低用戶操作時(shí)長,降低用戶跳出率。用戶操作時(shí)長從45s降低到了30s

3、整個(gè)購買鏈路,用戶完成率提升550bp。

定性方面:

1、進(jìn)一步完善購買場(chǎng)景操作鏈路,強(qiáng)化用戶對(duì)平臺(tái)消費(fèi)心智。

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

 


作者:Echo


轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》如何高級(jí)的說話?設(shè)計(jì)師項(xiàng)目匯報(bào)之黑話指南

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


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

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

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


設(shè)計(jì)基礎(chǔ)(8): 表單設(shè)計(jì)中的認(rèn)知與交互

seo達(dá)人


圖片

 

一、認(rèn)知策略

1、表單排列

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

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

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

圖片

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

2、輸入框長度

1)輸入框排版

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

圖片

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

2)輸入框長度的暗示

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

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

圖片

3、必填與選填

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

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

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

4、識(shí)別好過記憶

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

1)主動(dòng)性提示

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

圖片

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

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

2)交互性提示

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

圖片

3)被動(dòng)性提示

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

圖片

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

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

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

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

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

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

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

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

某些場(chǎng)景下,還要增加輔助搜索功能,讓信息篩選更加簡(jiǎn)單。

 

二、交互策略

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

1、操作效率

1)減少用戶輸入

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

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

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

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

圖片

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

圖片

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

當(dāng)我們?cè)谔顚慉任務(wù)時(shí),需要關(guān)聯(lián)選擇B任務(wù)。而B任務(wù)并沒有創(chuàng)建,該怎么辦呢?

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

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

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

圖片

3、保存機(jī)制

表單填寫時(shí),可能會(huì)遇到各種異常場(chǎng)景,需要有防錯(cuò)機(jī)制和保存功能,避免用戶誤操作時(shí)造成信息丟失。

圖片

4、即時(shí)反饋

表單填寫是為了向用戶收集正確有效的信息,所以需要在用戶填寫完成或者提交表單時(shí)增加校驗(yàn)機(jī)制。

校驗(yàn)機(jī)制分為前端校驗(yàn)和后端校驗(yàn)。

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

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

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

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

 

寫在最后

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

 

作者:子牧先生


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

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


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

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

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


有了這個(gè)插畫庫,作品亮點(diǎn)暴漲呀!

seo達(dá)人


一、數(shù)量非常多

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

圖片

 

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

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

圖片

 

三、人性化的格式選擇

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

圖片

 

四、免費(fèi)使用

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

圖片

 

五、其他優(yōu)勢(shì)

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

圖片

 

六、欣賞一些插畫作品

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

圖片

 

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

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

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

 

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

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

圖片

圖片

圖片

 

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

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

 


作者:黑馬青年


轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》有了這個(gè)插畫庫,作品亮點(diǎn)暴漲呀!

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


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

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

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


那些要打馬賽克的設(shè)計(jì)…

seo達(dá)人



提到馬賽克,大家會(huì)想到什么呢?是不是爺爺家那臺(tái)黑白電視沒信號(hào)的時(shí)候出現(xiàn)的畫面,還是小時(shí)候玩的街機(jī)格斗游戲里的人物(那……似乎是看小豬佩奇長大的我們不懂的世界)

圖片

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

圖片

這次就給大家演示簡(jiǎn)單容易上手的這 4 種馬賽克形式的海報(bào)案例展示:

圖片

 

 

圖片

夏天到了,大家一起來吃瓜吧!先畫一個(gè)簡(jiǎn)單的西瓜圖標(biāo),在 Ai 里執(zhí)行【對(duì)象】→【柵格化】。

圖片

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

圖片

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

圖片

用同樣的方法再畫一個(gè)笑臉跟對(duì)話框增強(qiáng)趣味:

圖片

然后我們?cè)賮碜鲆幌卤尘?,一組夏天的清涼配色送給大家,這里我用的是 Ai 里的網(wǎng)格工具用錨點(diǎn)來添加漸變色。

圖片

最后環(huán)繞圖形排文字,這張圖形馬賽克海報(bào)就完成啦!

圖片

 

 

圖片

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

圖片

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

圖片

新建一個(gè)【閾值】圖層,數(shù)值如下:

圖片

就可以得到這個(gè)馬賽克字體的效果啦!

圖片

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

圖片

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

圖片

然后再加入一些漸變色塊,增強(qiáng)顏色層級(jí),豐富畫面。

圖片

圖片

 

 

圖片

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

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

圖片

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

接著我們?cè)賮碜霰尘鞍胝{(diào)的處理,我直接用的 PS 透明背景截圖然后用處理人物的方法同樣處理了一個(gè)半調(diào)背景,再疊加顏色即可(偷了個(gè)小懶)。

圖片

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

圖片

用選擇工具,分別選中上中下三行的錨點(diǎn),進(jìn)行移動(dòng),中間的往右移動(dòng),上下兩邊往左邊移動(dòng),即可得到:

圖片

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

圖片

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

圖片

跟上面一樣的方法,我先在有底色的那張上把人物扣好,然后再用這個(gè)輪廓把閾值圖層的人物摳出來,好像差點(diǎn)什么?哦,樂隊(duì)的吉他!然后我趕緊找了把吉他放上去!

圖片

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

圖片

 

 

 

圖片

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

圖片

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

圖片

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

圖片

最后配上我辛酸的文案,最后這張海報(bào)就做好啦!大家可以試試這種簡(jiǎn)單方法拯救一下你相冊(cè)里的照片哦。

圖片

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


作者:大熊

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

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


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

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

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


B端設(shè)計(jì)經(jīng)驗(yàn)總結(jié)-幫助新人快速上手

seo達(dá)人


本篇文章總結(jié)了交互新人在初工作過程中可能面臨的疑惑與問題,并結(jié)合自身經(jīng)歷總結(jié)了相關(guān)設(shè)計(jì)經(jīng)驗(yàn),希望能夠幫助新人設(shè)計(jì)師快速上手B端設(shè)計(jì),游刃有余的應(yīng)對(duì)工作中面臨的各種機(jī)遇與挑戰(zhàn)。首先,作為一名新人,在剛?cè)肼氉鲈O(shè)計(jì)時(shí)可能遇到哪些問題呢?看看以下問題,或許你會(huì)感覺很熟悉:
  • 需求文檔不規(guī)范怎么辦?
  • 承擔(dān)了很多與產(chǎn)品相關(guān)的工作,是好還是不好?
  • 需求量大,如何推動(dòng)需求排期合理化?
  • 經(jīng)常插入或變更需求怎么辦?
  • 如何更有效的解決問題?
  • 需求是否有價(jià)值?
  • 如何做好體驗(yàn)優(yōu)化?
  • 怎樣做好設(shè)計(jì),并提升設(shè)計(jì)的說服力?
  • 應(yīng)該具備怎么樣的知識(shí)才能更好的應(yīng)對(duì)日常需求?
  • 我應(yīng)該掌握哪些專業(yè)知識(shí)與能力?

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

圖片

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

專業(yè)能力:

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

職業(yè)能力:

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

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

 

一、專業(yè)能力

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

圖片

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

 

1、需求分析與用戶分析

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

圖片

圖3 需求分析與用戶分析

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

圖片

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

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

圖片

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

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

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

 

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

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

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

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

圖片

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

  • 設(shè)計(jì)原則:

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

  • 設(shè)計(jì)組件:

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

  • 設(shè)計(jì)模式:

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

  • 控件庫:

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

  • 視覺樣式:

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

  • 設(shè)計(jì)規(guī)范:

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

設(shè)計(jì)原則

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

圖片

圖7 設(shè)計(jì)原則

設(shè)計(jì)指導(dǎo)原則:

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

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

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

  • 事實(shí)性原則:

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

  • 可用性原則:

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

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

 

3、需求挖掘與反饋收集

通??墒褂枚ㄐ浴⒍康挠脩粞芯渴侄稳ネ诰蛴脩粼V求以及收集用戶反饋。定性調(diào)研通常包含:用戶觀察、用戶訪談、焦點(diǎn)小組、啟發(fā)式評(píng)估、可用性測(cè)試等。定量調(diào)研通常包含:?jiǎn)柧碚{(diào)研、數(shù)據(jù)埋點(diǎn)、后端數(shù)據(jù)拉取、AB測(cè)試等,新人設(shè)計(jì)師可以選擇適合當(dāng)前業(yè)務(wù)發(fā)展階段的調(diào)研方法。與用戶研究相關(guān)的資料較多,大家可以自行搜索學(xué)習(xí),此處不再贅述。

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

圖片

圖8 體系化整理體驗(yàn)問題

二、職業(yè)能力

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

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

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

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

圖片

圖9 需求排期機(jī)制

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

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

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

  • 學(xué)會(huì)借力,必要時(shí)學(xué)會(huì)依靠團(tuán)隊(duì)

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

 

總結(jié)

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

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

 

階段一:以片面、固化的眼光看問題,只看到零散的表象和靜止的格局。解決方案呈點(diǎn)狀隨機(jī)分布。

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

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

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

 

參考書籍

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

參考文章

尼爾森的十大可用性原則與場(chǎng)景案例

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

《Pin Design》年刊文章

作者:瑤一


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

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


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

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

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


UI動(dòng)效設(shè)計(jì)指南!三個(gè)要素打造流暢的動(dòng)效體驗(yàn)

seo達(dá)人


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

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

那么,動(dòng)畫的最佳時(shí)長是多少呢?

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

小于100毫秒的動(dòng)畫是瞬時(shí)的,不會(huì)被用戶注意到;如果時(shí)長大于1000毫秒(1s),會(huì)讓用戶感到動(dòng)畫很緩慢,帶來一種拖沓的感覺。

 

同時(shí),我們也要考慮其他可能影響動(dòng)畫速度的因素:

屏幕尺寸:由于手機(jī)和電腦有著不同物理尺寸的屏幕,尺寸的不同會(huì)影響動(dòng)效的速度,屏幕越小,運(yùn)動(dòng)路徑越短。對(duì)于移動(dòng)屏幕,動(dòng)效速度應(yīng)保持在200-300ms之間,平板電腦應(yīng)該保持在400-450ms之間;

圖片

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

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

 

二、緩動(dòng)

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

為了使動(dòng)畫更真實(shí),我們需通過緩動(dòng)來模擬出這些因素,讓界面中的元素運(yùn)動(dòng)的更自然,避免過于死板。

圖片

緩動(dòng)決定了元素在運(yùn)動(dòng)過程中速度的變化,常用的類型包括:線性勻速、緩入、緩出、緩入緩出。

 

1、線性勻速

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

線性勻速在改變?cè)匚恢玫脑O(shè)計(jì)中使用相對(duì)較少,更多是用在改變?cè)氐臓顟B(tài)、屬性(透明度變化)等不涉及元素位置改變的設(shè)計(jì)中。

 

2、緩入

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

 

3、緩出

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

 

4、緩入緩出

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

圖片

需要注意的是,不對(duì)稱標(biāo)準(zhǔn)曲線會(huì)使物體的運(yùn)動(dòng)變得更加自然。

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

圖片

 

三、動(dòng)效編排

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

 

1、平等互動(dòng)

平等互動(dòng)指對(duì)象根據(jù)相同的規(guī)則移動(dòng)

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

圖片

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

在表格類頁面中,元素的運(yùn)動(dòng)情況會(huì)更復(fù)雜。

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

圖片

 

2、從屬互動(dòng)

從屬互動(dòng)指界面中有一個(gè)主體對(duì)象,用來吸引用戶的注意力,界面中的其他元素都從屬于這個(gè)主體對(duì)象。這樣的編排方式讓用戶的注意力更聚焦到界面中重要的元素上,保持元素的運(yùn)動(dòng)主次更清晰。

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

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

此外,我們可以將曲線運(yùn)動(dòng)分為兩類:垂直向外(水平開始,垂直結(jié)束)、水平向外(垂直開始,水平結(jié)束)。

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

另一個(gè)問題是元素的運(yùn)動(dòng)路徑相交時(shí),元素間應(yīng)該遵循物理定律,不能互相穿越?;蛘咴谠匾苿?dòng)前將元素提升到最上層,讓動(dòng)效看起來更自然。

圖片

 

四、UI動(dòng)效設(shè)計(jì)常用到的軟件

當(dāng)看到一個(gè)好看的動(dòng)效時(shí),常常會(huì)有小伙伴問到使用什么軟件做的。

目前有很多軟件可以進(jìn)行UI動(dòng)效設(shè)計(jì),借著這次講解動(dòng)效的機(jī)會(huì),我簡(jiǎn)單列舉三個(gè)自己用過并感覺還不錯(cuò)的軟件,僅供參考,建議大家可以去親自體驗(yàn)一下每款軟件。

 

1、ProtoPie

圖片

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

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

 

2、Principle

圖片

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

 

3、After Effects

圖片

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

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

 

五、最后

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

 
作者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》UI動(dòng)效設(shè)計(jì)指南!三個(gè)要素打造流暢的動(dòng)效體驗(yàn)

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


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

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

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


萬字透析 [行為設(shè)計(jì)與觸發(fā)式引導(dǎo)] 賦能體驗(yàn)

ui設(shè)計(jì)分享達(dá)人

循序漸進(jìn)的內(nèi)容結(jié)構(gòu),不放目錄了,內(nèi)容框架如下:

1. 為何說應(yīng)用程序是一種行為設(shè)計(jì)

————用戶行為視角進(jìn)行設(shè)計(jì)和解決問題

2. 行為設(shè)計(jì)下的設(shè)計(jì)模型理念

————運(yùn)用模型理解行為、設(shè)計(jì)行為

3. 行為設(shè)計(jì)不能沒有用戶引導(dǎo)

————挖掘行為設(shè)計(jì)重要的部分“引導(dǎo)”

4. 正在被濫用的用戶引導(dǎo)

————煩人的引導(dǎo)信息源源不斷

5. 善用觸發(fā)式引導(dǎo)賦能體驗(yàn)

————讓觸發(fā)式引導(dǎo)更棒的5個(gè)建議
————新一輪的趨勢(shì),克制與降噪

分割線-------------------------------------

應(yīng)用設(shè)計(jì)為啥要行為設(shè)計(jì)視角?是因?yàn)榭徇€是更有挑戰(zhàn)性?可拉倒吧,我都癱工位上了還卷啥?只是在實(shí)際的設(shè)計(jì)過程中,通過觀察或共情用戶行為可以反映出很多問題,可以幫助洞察出更多價(jià)值或新的機(jī)遇。

此前我在試圖尋找一款具還不錯(cuò)的機(jī)械美感鼠標(biāo),但是沒有一下子找到合適的,準(zhǔn)備第二天摸魚的時(shí)候再看看,結(jié)果第二天上午十點(diǎn)左右,手機(jī)回復(fù)消息時(shí),就收到了一條淘寶的通知。是關(guān)于鼠標(biāo)的,你猜對(duì)了,之后我就順勢(shì)打開了淘寶,看看是否會(huì)有新的收獲,淘寶根據(jù)我的搜索行為記錄,果然在首頁零零散散穿插了不少鼠標(biāo),我在首頁看到了一張鼠標(biāo)商品圖,我迫不及待的點(diǎn)開,結(jié)果發(fā)現(xiàn)是穿了身衣裳的羅技G502HREO,不禁感嘆道這些商人們的洞察力。 


那么回過神來,你是否已經(jīng)感受到了行為視角加一點(diǎn)點(diǎn)同理心一點(diǎn)點(diǎn)洞察力,就可以產(chǎn)生如此奇妙的價(jià)值?

1|應(yīng)用程序就是行為設(shè)計(jì)

1.1|數(shù)字化應(yīng)用下的用戶行為

應(yīng)用程序本質(zhì)就是數(shù)字化服務(wù),只是將行為方式進(jìn)行了轉(zhuǎn)變,以及采用了網(wǎng)絡(luò)進(jìn)行信息交互。當(dāng)我們有了需求后就會(huì)使用這些應(yīng)用程序提供的功能完成需求。比如原本要在菜市場(chǎng)才能完成選菜、選量、付錢、帶回家,而通過數(shù)字化服務(wù)則可以足不出戶,在手機(jī)設(shè)備上完成購菜。當(dāng)然了,這也意味著行為方式或成本的變化,但是本質(zhì)不變。



數(shù)字化視角下,我們看見用戶實(shí)現(xiàn)需求僅僅是手機(jī)上敲敲打打就做到了,而其本質(zhì)只是調(diào)整了實(shí)現(xiàn)的行為方式,基本就是內(nèi)容輸入輸出、查看選擇、傳遞交換,再深入點(diǎn)就是界定用戶輸入什么輸出什么,看見什么選擇什么等一系列設(shè)定,自下而上來看,就是圍繞產(chǎn)品服務(wù)或產(chǎn)品目標(biāo)展開,然后界定功能服務(wù)的范圍與內(nèi)容范圍,通過交互與信息框架定義用戶行為的方式與范圍。 



1.2|功能背后是行為的精心編排

應(yīng)用本身就像是一個(gè)行為框架,盡管不能嚴(yán)格控制,但它規(guī)定了用戶行為的方式、范圍、路徑以促導(dǎo)用戶實(shí)現(xiàn)需求,表象是各種功能的設(shè)計(jì),而背后也可以看做是用戶行為的精心編排,而超出預(yù)期的用戶行為則可以看作違規(guī)或設(shè)計(jì)漏洞,而我們通過數(shù)據(jù)埋點(diǎn)或數(shù)據(jù)分析來密切關(guān)注用戶行為,也正是為了檢驗(yàn)設(shè)計(jì)編排是否合理或滿足商業(yè)預(yù)期,如此看來我們?yōu)楹沃匾曈脩粜袨榕c數(shù)據(jù)收集也就很好解釋了。

1.3|行為視角的三級(jí)維度兩層映射

或許你在疑惑知道了行為設(shè)計(jì)視角又如何?實(shí)際在產(chǎn)品設(shè)計(jì)過程中,行為視角確實(shí)能帶來太多驚喜,以至于一些場(chǎng)景化交互問題,我會(huì)代入行為視角思考每一步行為過程,而不是單純的考慮流程與線框圖。我認(rèn)為行為表現(xiàn)能夠清晰反映出一個(gè)用戶的特征,當(dāng)我們說通過一個(gè)人的行為表現(xiàn)了解對(duì)方時(shí),也就這個(gè)意思啦,愈發(fā)真實(shí)自然的行為表現(xiàn)越能反映出一個(gè)人的特征畫像,這應(yīng)該也是為什么HR會(huì)用“行為面試法”來篩選應(yīng)聘者的原因吧。



那么回到應(yīng)用設(shè)計(jì)上,當(dāng)我們通過技術(shù)手段收集到了用戶數(shù)據(jù),也只是一些數(shù)值罷了,唯有清楚數(shù)據(jù)涵義并結(jié)合用戶行為視角,才能夠分析還原出更有價(jià)值的信息,當(dāng)獲取到足夠的用戶行為信息后,我們就可以還原出相對(duì)真實(shí)的用戶特征畫像,以用于行為設(shè)計(jì)分析改善,來驅(qū)動(dòng)產(chǎn)品體驗(yàn)或是商業(yè)目標(biāo)。



2|行為設(shè)計(jì)下的設(shè)計(jì)模型應(yīng)用

說到行為設(shè)計(jì),不得不提到HOOK模型與福格行為模型吧,一個(gè)產(chǎn)品往往不僅需要行為設(shè)計(jì)也需要習(xí)慣培養(yǎng),唯有這樣才能使得用戶能夠熟練掌握應(yīng)用并產(chǎn)生粘性,HOOK上癮模型,一個(gè)關(guān)于如何讓用戶對(duì)產(chǎn)品上癮或培養(yǎng)習(xí)慣的模型;福格行為模型,解釋用戶發(fā)生行為的條件與關(guān)系式的模型。

2.1|行為的開始:福格行為模型



簡(jiǎn)單概括就是要產(chǎn)生行為,就需要一瞬間產(chǎn)生內(nèi)在的行為動(dòng)力“動(dòng)機(jī)”,并且有足夠的“能力”執(zhí)行,還需要適當(dāng)信息提示來助推行為產(chǎn)生。我用人話解釋一下哈,在此前了我們玩一個(gè)動(dòng)動(dòng)手指就行的小游戲。

一、首先伸出左手,掌心面朝自己;
二、然后仔細(xì)盯著中指的末端;
三、為了更佳集中注意力,把其他四個(gè)指頭慢慢握攏;

好了,是的就好了,這個(gè)過程中,我說開始一個(gè)小游戲其實(shí)就是為了形成一個(gè)動(dòng)機(jī),而后續(xù)一系列步驟引導(dǎo)就是對(duì)應(yīng)的觸發(fā)信息,當(dāng)然了動(dòng)動(dòng)手這么簡(jiǎn)單的事兒,我相信大家能力十足。其實(shí)這個(gè)模型就是告訴我們要想行動(dòng)起來就要讓你“想做、能做、開始做”。

首先是一個(gè)開始:提示觸發(fā)
第一個(gè)是來自我自身或腦海里的提示觸發(fā),通常管這個(gè)叫做需求,洋氣點(diǎn)叫做“內(nèi)部觸發(fā)”,比如剛剛肚子叫了,感覺有點(diǎn)兒餓了,當(dāng)然了這些“內(nèi)部觸發(fā)”隨機(jī)且不穩(wěn)定,來自我們的心理活動(dòng)以及身體本能。
而生活場(chǎng)景下的各種應(yīng)用程序則需要媒介對(duì)我們產(chǎn)生觸發(fā),與之前“內(nèi)部觸發(fā)”相反,這些誘因我們稱為“外部觸發(fā)”,你在生活中看見的廣告、好友安利的商品、手機(jī)通知消息、小紅點(diǎn)提示、鈴聲震動(dòng)等一系列均是外部觸發(fā)。

具備一個(gè)行為動(dòng)力:動(dòng)機(jī)
凡事我們要做出行動(dòng)前都會(huì)有一個(gè)動(dòng)機(jī),還記得剛剛我說肚子餓了嗎?是的,于是大晚上的我想搞點(diǎn)兒燒烤吃吃,想到肉香四溢,酒足飯飽的感覺真是快樂啊,也不用吃藥抑制胃酸過多的痛苦了。
而讓你打車的動(dòng)機(jī)、點(diǎn)外賣的動(dòng)機(jī)、網(wǎng)購鼠標(biāo)的動(dòng)機(jī)、打開網(wǎng)頁閱讀的動(dòng)機(jī),你是否已經(jīng)清晰看見,總歸是有一個(gè)的,甚至?xí)卸鄠€(gè)。



能夠進(jìn)行執(zhí)行的條件:能力
當(dāng)一切剛剛好,觸發(fā)有效,動(dòng)機(jī)也有,可以做了嗎?不不不,能力才是執(zhí)行的硬核條件,如果我的能力相差懸殊我可能會(huì)直接放棄或降低預(yù)期調(diào)整目標(biāo),所以我想到燒烤店就在小區(qū),票子也足夠,腿腳也麻溜,這不,燒烤已經(jīng)擰在手里了。所以你看,現(xiàn)在的應(yīng)用程序不斷在降低操作難度或消費(fèi)門檻不就是這個(gè)理兒?jiǎn)幔?


*你白天忙沒時(shí)間娛樂?沒關(guān)系,直播午夜檔、24小時(shí)轟趴派對(duì)等候你。
*你工作完腦力體力有限?沒關(guān)系,這些短視頻幽默好玩不費(fèi)腦,不喜歡輕輕一劃下一個(gè),不想滑?沒事兒,短視頻已經(jīng)在流行自動(dòng)播放下一個(gè)呢!
*最近手頭緊了?沒關(guān)系,咱們的商品統(tǒng)統(tǒng)優(yōu)惠哈,還能分期付款,再不行還能組團(tuán)砍一刀來點(diǎn)兒優(yōu)惠。



產(chǎn)品設(shè)計(jì)中的可用性、易用性、統(tǒng)一性各種交互定律,以及各種營銷手段不就是在不斷的降低難度促成用戶行為的發(fā)生嗎?總之產(chǎn)品會(huì)想辦法讓你更輕松用起來,讓你慷慨消費(fèi)起來。

大概是該動(dòng)一動(dòng)了:行為
就像前面動(dòng)動(dòng)手指的游戲一樣,當(dāng)行為發(fā)生前的三個(gè)條件同時(shí)滿足時(shí),我就該動(dòng)起來了,我的行為向著動(dòng)機(jī)目標(biāo)有序的進(jìn)行著。

2.2|行為的習(xí)慣:HOOK上癮模型



HOOK上癮模型的核心在于使用產(chǎn)品后,會(huì)獲取酬賞激勵(lì),我們?yōu)榱俗非蟾嗟幕映曩p,以加大投入,并且持續(xù)的投入會(huì)提升對(duì)產(chǎn)品的價(jià)值積累,同時(shí)我們行為上就會(huì)不斷的反復(fù),之后就會(huì)留下慣性的操作模式,即習(xí)慣。整個(gè)過程中觸發(fā)與行為部分即福格行為模型部分,而新的部分主要包括多變的酬賞與投入部分;


多變的酬賞:激勵(lì)上癮的根因
社交酬賞:產(chǎn)品社交互動(dòng)中的反饋激勵(lì),例如常見的分享點(diǎn)贊、評(píng)論互動(dòng)、人際關(guān)系建立等,在社交類產(chǎn)品中是極具分量的部分,良好的社交酬賞能夠很好的激勵(lì)用戶參與互動(dòng)與自發(fā)的創(chuàng)作內(nèi)容,屬于UGC重要的一環(huán)。

獵物酬賞:這就包括了金錢獎(jiǎng)勵(lì)、知識(shí)、資訊、娛樂等一系列你主動(dòng)在產(chǎn)品中搜尋的信息或資源滿足。當(dāng)你還處于清醒活躍的狀態(tài)時(shí),腦子不會(huì)突然的呆掉而是胡思亂想或想找點(diǎn)內(nèi)容填充無聊的時(shí)光,于是你打開手機(jī)一個(gè)又一個(gè)的短視頻、資訊文章或是圖文段子。

自我酬賞:以自我為中心的快感滿足,如產(chǎn)品體驗(yàn)中的操作感、成就感、終結(jié)感。我們?yōu)槭裁匆嬗螒??因?yàn)橛螒蛴懈鞣N操作感可以滿足自己,并且還有豐富的美術(shù)視覺,一旦我們獲取對(duì)戰(zhàn)中最優(yōu)數(shù)據(jù)或MVP時(shí)是不是很興奮!因?yàn)橛谐删透?,這時(shí)你完成了最后一個(gè)敵人的擊殺!恭喜你完成最后一擊!是不是終結(jié)感也很不賴。



持續(xù)的投入:習(xí)慣的培養(yǎng)
上癮就是一次不夠還想要,習(xí)慣就是不知覺的在對(duì)應(yīng)場(chǎng)景中重復(fù)某個(gè)行為,一旦當(dāng)你在某個(gè)產(chǎn)品中不斷的注入你的投入,你也會(huì)獲取更多的激勵(lì)與成就,它可以是你存儲(chǔ)的照片、發(fā)布的動(dòng)態(tài)、收集的歌單、你的粉絲團(tuán)、你的名氣信譽(yù)或是技能收獲,慢慢的你會(huì)對(duì)該產(chǎn)品的價(jià)值評(píng)估提高,你會(huì)越來越難以割舍,甚至想要推薦伙伴在這里和你一起,而接下來就是另一個(gè)觸發(fā)再次把你拉回來。

因?yàn)槭裁炊习a:期待沒有止境的舒服
實(shí)現(xiàn)上癮就這么簡(jiǎn)單嗎?想想好像不是,所以根因是什么?你有沒有同樣的感受,貌似大部分人對(duì)工作并不上癮,是因?yàn)闆]有酬賞嗎?貌似對(duì)有酬賞的家務(wù)也不會(huì)上癮,甚至學(xué)習(xí)打卡也不叫人上癮,反而是刷短視頻、刷帖子、玩游戲、線上交友、語音派對(duì)這些娛樂更叫人上癮,這是為什么呢?
回到前面的行為部分再結(jié)合HOOK的酬賞部分來看,如圖,你是否會(huì)有什么啟示呢?



酬賞快樂
讓你痛苦不堪的產(chǎn)品必然是與上癮無緣的,對(duì)于自身有益且美好快樂的事物我們會(huì)追求,反之則避免或逃避,尋求短暫的刺激來麻痹痛苦,不過這只是讓用戶接受和樂意使用的初步條件,上癮?還不至于。

充滿期待
為什么模型中指出是多變的酬賞?因?yàn)椴皇且淮涡詽M足,而且還是多元化的滿足刺激,想象一下你,打開短視頻,看完一個(gè)后接著下一個(gè),但是相似度極高,于是你繼續(xù)滑動(dòng),一個(gè)又一個(gè),但是內(nèi)容依舊極其相似,你開始反思,情緒低落,對(duì)后續(xù)的內(nèi)容不再充滿期待,你停止繼續(xù)并退出了應(yīng)用。這是另一個(gè)重要因素,帶有期待,我們會(huì)本能的追求希望逃避恐懼,如果對(duì)后續(xù)不再抱有期待或希望時(shí),那么這將是中斷心流與上癮絕緣的一個(gè)信號(hào)!

沒有止境
你是否有發(fā)現(xiàn)不論是追劇、短視頻、搞笑段子、游戲等一系列讓你短暫成癮時(shí),都有一個(gè)相似點(diǎn),似乎沒有受到干擾時(shí),根本沒有終點(diǎn),你可以忘卻時(shí)間持續(xù)性的沉浸其中,享受著一個(gè)接著一個(gè)的高潮或激勵(lì)。
如果要打造一款成癮的熱銷產(chǎn)品,我想這三個(gè)點(diǎn)也是值得深思熟慮的因素,HOOK模型是精簡(jiǎn)的,但是內(nèi)涵不止于此。


而對(duì)于習(xí)慣養(yǎng)成型,則有一部分是因?yàn)樘颖芡纯嗷蚵闊?,我之前離單位比較近,到公司不會(huì)太早,但是研發(fā)工作卻很積極,以至于我為了避免耽誤研發(fā)或形成負(fù)面的同事形象,我都會(huì)早上習(xí)慣性的打開工作群看一下有沒有紅色的“@”,如果有的話,則趕緊看一下什么情況回復(fù)一下。

2.3|更完整的行為設(shè)計(jì)模型思考

在以上的模型中,找到了用戶行為調(diào)動(dòng)的方法,以及習(xí)慣養(yǎng)成甚至成癮的關(guān)鍵點(diǎn),但是結(jié)合應(yīng)用程序設(shè)計(jì)的特征,我注意到還有一些行為層設(shè)計(jì)的關(guān)鍵點(diǎn)散落在各個(gè)環(huán)節(jié),為更好滿足設(shè)計(jì)應(yīng)用的目的,我在HOOK上癮模型的基礎(chǔ)上細(xì)化了一些值得注意的節(jié)點(diǎn),并試圖在應(yīng)用設(shè)計(jì)的過程中找到了節(jié)點(diǎn)的映射關(guān)系,驗(yàn)證可行性,在此我會(huì)穿插一些案例進(jìn)行各個(gè)節(jié)點(diǎn)介紹。



2.3.1|觸發(fā)

為什么在我們生活的場(chǎng)景中,處處充斥著廣告或品牌的概念,因?yàn)樯虡I(yè)產(chǎn)品需要觸發(fā)!唯有當(dāng)你了解一個(gè)產(chǎn)品的用途時(shí),你有了內(nèi)在需求才能及時(shí)的想起對(duì)應(yīng)的服務(wù)品牌,并使得這些產(chǎn)品有機(jī)會(huì)被你翻牌子,然后你打開這個(gè)應(yīng)用,應(yīng)用:多謝恩寵~


外部觸發(fā)的誘因,就是在適當(dāng)時(shí)候提醒你是否需要,讓你產(chǎn)生動(dòng)機(jī),或是引導(dǎo)你完成某個(gè)事件的動(dòng)作,例如電話鈴聲響起,你掏出你的手機(jī)查看并思考是否接聽。然后發(fā)現(xiàn)是騷擾電話你掛斷了,這時(shí)手機(jī)彈出通知,是否開啟騷擾電話攔截?然后你又開始點(diǎn)擊查看騷擾電話攔截服務(wù)。

精髓在于打造良好的品牌賣點(diǎn)與口碑,在適當(dāng)?shù)那榫澳軌蚣て鹩脩舻氖褂糜蛳M(fèi)動(dòng)機(jī),能夠激起或助推動(dòng)機(jī)、引導(dǎo)輔助用戶行動(dòng)、提示反饋牽引用戶。



2.3.2|動(dòng)機(jī)

不論是出于自身需求還是外部誘因產(chǎn)生的動(dòng)機(jī),一個(gè)讓你做出行動(dòng)前的心里動(dòng)力,之所以被分為感知、情感、社會(huì)三個(gè)成層面,則是為了在適合的場(chǎng)景下給出更被需要的動(dòng)機(jī)的觸發(fā)指引,例如在炎熱的大馬路上,出于感知?jiǎng)訖C(jī)口渴,我推出冰爽的飲品更容易被需要或產(chǎn)生購買動(dòng)機(jī)。并且當(dāng)一個(gè)動(dòng)機(jī)無法直接滿足時(shí),我們還會(huì)有更多間接的動(dòng)機(jī)。



2.3.3|規(guī)劃

大多時(shí)候我們處于慣性思考的狀態(tài),習(xí)慣性做事兒,但面對(duì)復(fù)雜的目標(biāo),我們都會(huì)預(yù)先進(jìn)行一個(gè)規(guī)劃,這不像屁股癢癢了就反射性伸手撓一撓這么簡(jiǎn)單,這個(gè)過程中圍繞心理活動(dòng)展開,給予已有目標(biāo)與動(dòng)機(jī),我們會(huì)初步的思考以下多個(gè)問題,我該怎么去做?我能夠做什么?先做什么再做什么?并且這個(gè)過程中會(huì)結(jié)合能力與自我感知進(jìn)行決策,觸發(fā)這一行動(dòng)前可能還會(huì)補(bǔ)充很多間接的動(dòng)機(jī)來完成初始目標(biāo),所以可能對(duì)一些間接動(dòng)機(jī)先規(guī)劃行動(dòng)起來。



特別是當(dāng)用戶身處于產(chǎn)品應(yīng)用中,所有活動(dòng)事件我們應(yīng)該給予一定的信息可視反饋,以便于用戶決策規(guī)劃和判斷實(shí)行難度,這需要設(shè)計(jì)者做好一下幾點(diǎn);


可視化:有效的反饋軟件或設(shè)備當(dāng)前狀態(tài),給出相關(guān)信息讓用戶決定哪些行動(dòng)是合理可行的。


用途示意:簡(jiǎn)單直接的體現(xiàn)出可以交互的形式或范圍,例如顯示一個(gè)帶有放大鏡的按鈕,就可以感知與搜索放大有關(guān)系,并且是一個(gè)按鈕可以點(diǎn)擊交互。


引導(dǎo)信息:進(jìn)行輔助示意的提示,特別告知用戶應(yīng)該操作哪里或如何操作的指引信息,減少溝通或理解的成本。

2.3.4|能力

能力會(huì)直接影響動(dòng)機(jī)的強(qiáng)弱,能力不足就會(huì)消弱動(dòng)機(jī)甚至放棄行動(dòng),如果動(dòng)機(jī)高漲那么就可以做出更有難度的事情,這一關(guān)系在福格行為模型中有明確體現(xiàn)。在應(yīng)用設(shè)計(jì)中,則更多以有效性、效率指標(biāo)、交互原則及相關(guān)定律展開,目的則是減少門檻與使用阻力,幫助用戶建立操作信心和有效易用的開展任務(wù)。



2.3.5|行動(dòng)

當(dāng)以上多個(gè)條件就緒后,那么你就要開始行動(dòng)了,即使是準(zhǔn)備五分鐘開始,那么的你的等待都是具有目的性的行動(dòng),一旦時(shí)間到了便會(huì)觸發(fā)生效。而行動(dòng)正是與一切產(chǎn)品開始交互的開始,行動(dòng)過程可能會(huì)具備多個(gè)子目標(biāo)或動(dòng)機(jī)來達(dá)成你的最終目標(biāo),也就是你面對(duì)復(fù)雜目標(biāo)的動(dòng)機(jī)規(guī)劃,在進(jìn)行中,你可能還需要一系列反饋來告訴你,是否符合預(yù)期,需不需要調(diào)整規(guī)劃來達(dá)成最終目標(biāo)。

2.3.6|反饋

如果說你的行為沒有任何反饋或是延誤錯(cuò)誤的反饋會(huì)這么樣?混亂。想象一下燒壺開水去,聽不見咕嚕咕嚕,看不見熱氣或翻滾的氣泡,直到你不小心碰到手上,該死的,燙出泡泡來了。難以想象沒有反饋是多么的混亂,以至于我們沒辦法獲取有效的結(jié)果來糾正下一步的行動(dòng)或規(guī)劃。



這個(gè)階段里,反饋不僅僅是指用戶行為發(fā)生后的變化響應(yīng),也包括了用戶反思和比較的過程,在產(chǎn)品應(yīng)用的過程或?qū)崿F(xiàn)較為復(fù)雜的目標(biāo)時(shí),目標(biāo)與動(dòng)機(jī)都會(huì)面臨拆解和階段化實(shí)現(xiàn)的情況,那么每次我們對(duì)階段目標(biāo)付出行動(dòng)后,就需要比對(duì)結(jié)果反饋是否符合預(yù)期,是否需要對(duì)后續(xù)的規(guī)劃做出調(diào)整來達(dá)成最初的動(dòng)機(jī)。



反饋階段是整個(gè)行為設(shè)計(jì)中重要的一環(huán),如果不能給予用戶即時(shí)有效的反饋,后面的一切設(shè)計(jì)階段都將是徒勞,并會(huì)給用戶造成糟糕的體驗(yàn)。那么如何做好這一環(huán),這不僅要做好產(chǎn)品可視化內(nèi)容、用途示意、引導(dǎo)信息,還需要在用戶行動(dòng)的過程中,做好產(chǎn)品交互的約束、映射與反饋。

約束:通過提供物理硬件、流程邏輯、文字描述、符號(hào)標(biāo)注等一系列方式來約束引導(dǎo)用戶的行為,幫助用戶理解避免操作出錯(cuò)。

映射:在用戶交互的過程中給予即時(shí)有效的映射反饋,使得用戶在持續(xù)的操作過程中能夠追逐到對(duì)應(yīng)變化的結(jié)果,例如通過滑動(dòng)屏幕的進(jìn)度條來感知和控制屏幕亮度的調(diào)整就是一種映射的表現(xiàn)。



反饋:用戶進(jìn)行任何操作后,應(yīng)給出即時(shí)有效的狀態(tài)反饋或是撤銷操作,并且盡可能的與操作前的信息保持關(guān)聯(lián),以符合用戶的預(yù)期,若未能操作成功,則給出失敗的原因或解決方案,甚至主動(dòng)進(jìn)入修復(fù)中,避免用戶在界面前不知所措。

2.3.7|酬賞

多變的酬賞,也許是為了快樂,也許是為了逃避麻煩與痛苦,在完成目標(biāo)的同時(shí)我們必然會(huì)獲取滿足,如果在滿足的同時(shí)給予了你額外的、意外的激勵(lì),誰不愛呢?鼓勵(lì)用戶發(fā)布或互動(dòng),獲取社交酬賞;給予用戶首充獎(jiǎng)勵(lì),獲取獵物酬賞;豐富的資料編輯,讓用戶完成更個(gè)性的展示,獲取自我酬賞;面對(duì)復(fù)雜任務(wù),完成后給予情感化的激勵(lì)或獎(jiǎng)品反饋。

2.3.8|期待

杜絕一成不變,不然只會(huì)呆板無聊,人總是會(huì)對(duì)新事物保持興趣,想象一下每天刷著一成不變而乏味的短視頻你會(huì)滿足嗎?不論是推出新的活動(dòng)、新的玩法、新的功能、新的挑戰(zhàn)、新的好友、新的八卦總是會(huì)讓用戶有所正向期待,愿意更多嘗試與投入,就像抖音的短視頻一樣,嘎然而止意猶未盡,期待下一個(gè)更精彩。

2.3.9|投入

所在產(chǎn)品上產(chǎn)生的數(shù)據(jù)、時(shí)間投入、金錢投入、關(guān)系來往都將是產(chǎn)生情感或上頭的重要原因,我不能想象時(shí)常來往老友,好好地說斷交就斷交,也沒辦法突然的將我在音樂應(yīng)用中辛苦集成的歌單說刪就刪,因?yàn)檫@一切對(duì)我們都有特別的價(jià)值,未來的某一天我依舊需要。那些產(chǎn)品年度報(bào)告不就是在喚起應(yīng)用時(shí)的回憶進(jìn)行情感升溫嗎?

2.3.10|回到觸發(fā)

再一次的,可能是我突然想起來需要了,可能是一個(gè)手機(jī)Push通知、一個(gè)短信、一個(gè)廣告、一個(gè)回訪電話,總之又一次的吸引到我了,并且此情此景所見所聞,我有了興趣也有了動(dòng)機(jī),新的一輪又將開始。

3|行為設(shè)計(jì)與用戶引導(dǎo)

[行為設(shè)計(jì)用戶引導(dǎo)就像是西方不能失去耶路撒冷]


它是在任務(wù)能夠進(jìn)行的基礎(chǔ)之上建立的指示信息。這是一對(duì)玻璃門,它約束了只能推開拉開,而用戶引導(dǎo)就是貼在玻璃門上的“推開”或“拉開”,它們告訴我們最好怎么做,以快速作出正確或符合預(yù)期的行為。用戶引導(dǎo)是幫助用戶快速成功的捷徑,在程序應(yīng)用中不論是出于用戶體驗(yàn)還是商業(yè)目的都具有極為重要的作用與影響力。



其實(shí)在行為設(shè)計(jì)模型中的諸多環(huán)節(jié)都是要運(yùn)用引導(dǎo)設(shè)計(jì)的,不知道你是否也感知到了,這些引導(dǎo)可以從用戶動(dòng)機(jī)喚起開始-到動(dòng)機(jī)助推-行動(dòng)指引,出于不同目的,這些引導(dǎo)信息甚至可以覆蓋在整個(gè)行為設(shè)計(jì)環(huán)節(jié)中,在適當(dāng)?shù)臅r(shí)候產(chǎn)生各種意想不到的效果;



3.1|從體驗(yàn)視角看用戶引導(dǎo)

國內(nèi)的應(yīng)用五花八門包羅萬象,即使被廣告吸引完成下載,但打開后,甚至可能不知道從那里開始這個(gè)應(yīng)用的探索,這個(gè)應(yīng)用究竟能做什么,有什么服務(wù)亮點(diǎn),于是乎就需要一系列的用戶引導(dǎo)幫助我們開始探索和了解這個(gè)復(fù)雜的玩意兒,如果不能讓用戶快速抓住亮點(diǎn)(也就是Aha時(shí)刻),那么就很難保證之后的時(shí)段里不被卸載。

而這個(gè)數(shù)字化的時(shí)代,為了給用戶提供更優(yōu)質(zhì)的服務(wù),企業(yè)則需要引導(dǎo)用戶在產(chǎn)品中產(chǎn)生數(shù)據(jù),以幫助企業(yè)獲取更多信息了解用戶,并提供更契合的服務(wù)或是推薦匹配來改善體驗(yàn)。



3.2|從商業(yè)視角看用戶引導(dǎo)

產(chǎn)品出于商業(yè)目的,不論是業(yè)績(jī)指標(biāo)、用戶留存、消費(fèi)轉(zhuǎn)化,往往都需要用戶引導(dǎo)來促成目的。就商業(yè)轉(zhuǎn)化來看,這時(shí)候用戶引導(dǎo)就像是導(dǎo)購一樣,通過培養(yǎng)用戶消費(fèi)心智從而達(dá)成消費(fèi)行為的動(dòng)機(jī),而關(guān)心用戶在應(yīng)用程序上的消費(fèi)行為、復(fù)購行為、支付中斷行為等,也是為了做好導(dǎo)購獲取更多收益。 



3.3|常見的引導(dǎo)類別與形式

為了滿足不同的業(yè)務(wù)目標(biāo),用戶引導(dǎo)出現(xiàn)了各式各樣的類別與形式,從廣泛的視角來看其實(shí)就是各種信息提示,并且為了方便用戶進(jìn)入下一階段,可能會(huì)直接附屬相關(guān)操作或路徑。通過促達(dá)的程度我們可以歸類到這三個(gè)類別中:



主動(dòng)式:在你還沒有透出任何行為目的前,收到的引導(dǎo)性通知,用于吸引用戶啟動(dòng)程序進(jìn)行消費(fèi)或互動(dòng)。干擾較弱的形式有應(yīng)用內(nèi)外的通知、應(yīng)用內(nèi)彈窗等,中等干擾的有短信通知、郵件通知,再強(qiáng)一點(diǎn)的還有電話推銷。

陳列式:在應(yīng)用場(chǎng)景中,將相關(guān)的引導(dǎo)信息直接陳列在界面中對(duì)用戶進(jìn)行引導(dǎo),可以在不操作的情況下直接看到,例如常見Banner形式、缺省圖形式、注釋信息、懸浮Tips等。

觸發(fā)式:用戶有意圖的進(jìn)行操作后給出的引導(dǎo)信息,相對(duì)來說是一種用戶接受程度高、體驗(yàn)親和、動(dòng)機(jī)相對(duì)吻合的類型,展現(xiàn)形式豐富,有彈窗、Tips、Toast、注釋信息等,具體根據(jù)場(chǎng)景做搭配。

4|正在被濫用的用戶引導(dǎo)



4.1|被淹沒在引導(dǎo)信息中

手機(jī)似乎響了一下,嗯?屏幕沒亮,錯(cuò)覺嗎?
手機(jī)剛剛是不是震動(dòng)了一下?有短信嗎?
我剛剛看手機(jī)干嘛來著?嗯?供奉戰(zhàn)犯吳啊萍被刑拘?看看


你是否有過這般恍惚?明明什么聲音都沒有,卻好像清晰的聽見手機(jī)在呼喚你,每每打開手機(jī)時(shí),除了個(gè)別還在艱苦奮斗的強(qiáng)迫癥們,總是會(huì)看見一個(gè)又一個(gè)的小紅點(diǎn),點(diǎn)開手機(jī)通知欄,一長排的通知等候著你的光臨。點(diǎn)開一個(gè)應(yīng)用A,閃屏說應(yīng)用B有活動(dòng),逐點(diǎn)擊進(jìn)入應(yīng)用B,閃屏說去應(yīng)用C點(diǎn)份午餐吧,然點(diǎn)開進(jìn)入應(yīng)用C,閃屏說來應(yīng)用A專治無聊,對(duì)哦,我是無聊來應(yīng)用A的啊,好一個(gè)圈圈圓圓圈圈開屏大法;

圈圈圓圓圈圈
天天年年天天的我
深紅色的引導(dǎo)
商業(yè)的陷阱
指標(biāo)的陷阱等你
不懂工作規(guī)劃重要的我們
都以為摸魚也能讓工作完成
相信就一天 搞定工作
.......不好意思,給唱起來了

然而回到了應(yīng)用A,別急,還有青少年模式引導(dǎo)、最新活動(dòng)引導(dǎo)、會(huì)員續(xù)費(fèi)引導(dǎo)、求你開個(gè)通知引導(dǎo)、底部消息99+引導(dǎo)等等。
這是一個(gè)眼花繚亂的世界,稍不注意就忘了我本來是做什么的,當(dāng)時(shí)我只是準(zhǔn)備買一個(gè)鼠標(biāo),但我在淘寶的短視頻中神游了許久,直到點(diǎn)開一則評(píng)論被問答?你來淘寶是干嘛來的?我終于回過神來,我只是來買個(gè)鼠標(biāo)的,我這點(diǎn)兒注意力還真是廢物呢,以至于手頭的事兒擱置了這么久。
而你,又在如何應(yīng)對(duì)的呢?


4.2|目的不純的引導(dǎo)信息

沒幾個(gè)應(yīng)用是做慈善事業(yè)的,總歸會(huì)有一套自己的盈利模式,商業(yè)指標(biāo)造就了這些目的不純的引導(dǎo)設(shè)計(jì),例如用戶取消訂購時(shí)的種種阻擾、為推動(dòng)新內(nèi)容不斷發(fā)出的騷擾引導(dǎo)、特定場(chǎng)景對(duì)用戶的消費(fèi)心智干擾、帶有隱瞞信息的協(xié)議引導(dǎo)等,甚至還有一些令人不爽的強(qiáng)制性引導(dǎo)。
商業(yè)視角下,用戶掏錢,則俯首稱臣,不掏錢則軟磨硬泡引導(dǎo)消費(fèi),很多時(shí)候不是在引導(dǎo)用戶體驗(yàn),而是在引導(dǎo)用戶參與消費(fèi)罷了,而設(shè)計(jì)師能做的,也許只能是想辦法讓用戶錢花的舒服點(diǎn)吧。



4.3|開始想要回歸平靜



很熟悉吧,如果不夠我還能列舉,碎片化的時(shí)間似乎都被刷手機(jī)的習(xí)慣占滿了,每次打開手機(jī)都會(huì)被各種引導(dǎo)所吸引,久而久之一得閑大腦就渴望來點(diǎn)兒數(shù)字化補(bǔ)品[刺激多巴胺],我們習(xí)慣打開這個(gè),再看看那個(gè),盡管眼睛是不樂意的。


不知道什么時(shí)候,高效便捷的服務(wù)能力不再是一個(gè)產(chǎn)品的核心指標(biāo),取而代之是讓用戶刷個(gè)不停,沉浸其中不得自拔,但我們也知道刷手機(jī)的若干不好,干擾視線、干擾學(xué)習(xí)工作、虛度光陰、還能砸到臉、睡不好、快速近視...


于是有那么一批人開始意識(shí)到,并減少手機(jī)上的引導(dǎo)帶來的干擾,忽略一早起來手機(jī)上的若干通知、逐步加強(qiáng)對(duì)小紅點(diǎn)的忍受、對(duì)各個(gè)群組逐一免打擾、關(guān)閉若干應(yīng)用的通知授權(quán)、體驗(yàn)先進(jìn)的適老化設(shè)計(jì)、設(shè)置免打擾時(shí)段等,想想沒有了這些引導(dǎo)干擾,少看一看屏幕,也不會(huì)損失什么。

5|用戶引導(dǎo)的救贖之路

5.1|善用觸發(fā)式引導(dǎo)

為什么我們不反感快遞到貨的取件短信、不反感1008611查詢后的話費(fèi)流量情況短信、不反感求職后的Offer郵件通知,因?yàn)檫@一切的通知或引導(dǎo),都是在你動(dòng)機(jī)觸發(fā)后給出的結(jié)果,它們可能正是你所需要的,甚至你正在期待的搓搓小手。



所以這也解釋了為什么那些“預(yù)判設(shè)計(jì)”可以快速出圈,被用戶所青睞,因?yàn)檫@些預(yù)判設(shè)計(jì)并不是憑空捏造的,而是基于用戶行為觸發(fā)預(yù)測(cè)了動(dòng)機(jī),為后續(xù)帶來了的行為方向的指引,就此我們?yōu)橛脩籼崆皽?zhǔn)備好了相關(guān)操作或服務(wù)供給,例如常見的截圖后,打開微信輸入欄更多按鈕,會(huì)直接提供截圖選取服務(wù)。

那么如何做好觸發(fā)式引導(dǎo)呢?
除了擅用行為設(shè)計(jì)的方法與視角,這里再分享五個(gè)我自己的見解

5.1.1|借“機(jī)”行事

我們的精力是很有限的,不該濫用引導(dǎo),應(yīng)該結(jié)合用戶特征或行為觸發(fā)來洞察需求,再用友好且符合用戶意圖的內(nèi)容來引導(dǎo)用戶,提高轉(zhuǎn)化和品牌溫度,而不是一味的引導(dǎo)轟炸,不然有一天被打上垃圾信息的標(biāo)簽了,發(fā)送再多的引導(dǎo)通知也不會(huì)有結(jié)果,所以找到一個(gè)合適的或是用戶自己觸發(fā)的“契機(jī)”很重要,商業(yè)與體驗(yàn)平衡很重要。

5.1.2|借助社交

除了一些工具類或沒有社交屬性的產(chǎn)品,大多數(shù)產(chǎn)品可以通過社交來建立用戶之間的聯(lián)絡(luò),并以社交消息來做功能引導(dǎo)或用戶召回引導(dǎo)等,例如:



當(dāng)然了,控制好時(shí)機(jī)并保證內(nèi)容真實(shí)性也很重要。而借助社交是因?yàn)槲覀兿矚g跟有共同點(diǎn)的人靠攏,彼此會(huì)有更多話題與樂趣,通過好友背書、社交擴(kuò)列與社交酬賞做杠桿,讓引導(dǎo)事半功倍。

5.1.3|循序漸進(jìn)

引導(dǎo)設(shè)計(jì)需要耐心,分成必要的步驟循序漸進(jìn),不要一股腦兒塞給用戶,也不要過于拖沓冗余,適當(dāng)?shù)碾A段給予獎(jiǎng)勵(lì),調(diào)動(dòng)積極性,就像游戲關(guān)卡設(shè)計(jì)一樣,采用階梯式用戶行為引導(dǎo)。并且從開始到結(jié)束不要信息斷層,減少跳失率,我就看見過很多用戶因?yàn)閺V告是穿搭而下載了某個(gè)應(yīng)用,結(jié)果安裝后玲瑯滿目,找不到興趣點(diǎn),最終選擇了吐槽卸載。

大多數(shù)消費(fèi)場(chǎng)景,講究的是循序漸進(jìn)的心智引導(dǎo),欲速則不達(dá),目的是建立用戶信任、接受度、消費(fèi)意向、好感度等促成消費(fèi)結(jié)果,我們常見的電商好評(píng)、權(quán)威認(rèn)證、專家推薦等就是在引導(dǎo)消費(fèi)心智,這也體現(xiàn)了為什么一個(gè)好的銷售會(huì)先跟你拉近距離而不是“哥!人傻錢多不”。



5.1.4|行為視角

行為視角的作用不用多說了吧,結(jié)合用戶當(dāng)前的行為我們可以洞察出下一步行為方向,提前做好準(zhǔn)備,當(dāng)然了,不要過分揣測(cè),對(duì)應(yīng)的引導(dǎo)要考慮服務(wù)范圍、服務(wù)時(shí)間、服務(wù)要求、服務(wù)場(chǎng)景等,可以是面向全局用戶、也可以是私人定制服務(wù),重點(diǎn)是要契合用戶意圖,借“機(jī)”行事。

5.1.5|光明磊落

好的引導(dǎo)設(shè)計(jì)應(yīng)該讓用戶覺得有價(jià)值、靠譜、不過分干擾,而不是為了指標(biāo)做出一堆陰暗設(shè)計(jì),老生常談的惡心案例應(yīng)該就是網(wǎng)頁上的彈出廣告吧,明明顯示了關(guān)閉按鈕,點(diǎn)擊后卻發(fā)現(xiàn)還是假的,直接就給跳轉(zhuǎn)了,盡管我們說把用戶當(dāng)作小白,但不是當(dāng)傻子,用戶總歸會(huì)發(fā)現(xiàn)上當(dāng)?shù)臅r(shí)候,到時(shí)候就該差評(píng)或控訴了,所以長久看來,為保證口碑與競(jìng)爭(zhēng)力,還是建議光明磊落少些陰暗的引導(dǎo)設(shè)計(jì)。

5.2|開始克制與降噪

作為一個(gè)設(shè)計(jì)者,說來慚愧,安裝一個(gè)新的應(yīng)用程序后,一下子根本搞不清楚怎么用?有什么用?不得不說引導(dǎo)設(shè)計(jì)還是很重要的,但引導(dǎo)并非是讓我迷茫的主要原因,龐大而臃腫的功能反而是主要原因,并且一旦功能倍增后,就很容易丟失服務(wù)焦點(diǎn),以至于即使做用戶引導(dǎo)也不好下手,做完了迭代又還要反復(fù)改。
現(xiàn)在的應(yīng)用底部菜單從4個(gè)趨于5個(gè),頂部Tab也越劃越多,首頁也是玲瑯滿目的,這對(duì)于用戶體驗(yàn)是一個(gè)挑戰(zhàn),即使是專家級(jí)用戶,也難以用到大部分的功能,這是一個(gè)信號(hào)!新一輪的趨勢(shì)可能是克制與降噪了。

5.2.1|克制什么

克制業(yè)務(wù)范圍,下鉆業(yè)務(wù)優(yōu)勢(shì),好的產(chǎn)品不是什么都做什么都有,而是應(yīng)該定位清晰,業(yè)務(wù)更清晰,盡管很多產(chǎn)品有著類似的服務(wù),但是每個(gè)用戶都有自己產(chǎn)品上的小圈或價(jià)值積累,產(chǎn)品優(yōu)勢(shì)也有差異,不會(huì)因?yàn)橛蓄愃乒δ芫洼p易轉(zhuǎn)移陣地,例如直播。一個(gè)產(chǎn)品想通過擴(kuò)展業(yè)務(wù)豐富跨界優(yōu)勢(shì)是很難實(shí)現(xiàn)的,還記得支付寶做社交的嗎?


幸運(yùn)的是嗅覺敏銳的企業(yè)已經(jīng)注意到了,如你所見,應(yīng)用市場(chǎng)有了更多的極速版APP,微信支付寶等APP也允許用戶配置核心服務(wù)之外的功能模塊搭配,似乎軟件們又開始輕盈好用了。



5.2.2|降噪什么

減少干擾,注重效率。一個(gè)好的產(chǎn)品應(yīng)該注重效率,快速幫助用戶找到要的、快速幫助用戶完成任務(wù)、快速完成信息匹配等,看見隨申辦APP獲得了GXA好體驗(yàn)獎(jiǎng)了,不過想想新一代的數(shù)字化服務(wù)不就該如此嗎?讓流程簡(jiǎn)單易懂,辦事少走兩趟,結(jié)果反饋更及時(shí),惠民政策早知道。



不知道什么時(shí)候開始適應(yīng)和喜歡清晰簡(jiǎn)潔的產(chǎn)品設(shè)計(jì),就像我喜歡逛逛無印良品,找一點(diǎn)精致自然的物件,有時(shí)候設(shè)計(jì)也是,多一點(diǎn)克制少一些喧囂,當(dāng)滿屏都是重點(diǎn)都是標(biāo)簽引導(dǎo)、文字說明時(shí),哪里還有什么重點(diǎn),就像小紅點(diǎn)誕生時(shí),醒目的提示能幫我們找到重點(diǎn),但現(xiàn)實(shí)處處是紅點(diǎn),哪里還弄得清什么是重要的。


就像一個(gè)簡(jiǎn)單模塊入口設(shè)計(jì),又是封面/標(biāo)題/描述,又是用戶信息/互動(dòng)數(shù)據(jù)/品類標(biāo)簽啥的,這么多信息,我擱這兒讀書呢?為什么不循序漸進(jìn)呢?找到用戶正真會(huì)看的焦點(diǎn)信息很難嗎?


終于,在工信部的要求下,廣告與算法推送也得以控制,這意味著干擾又少了,但是這也側(cè)面反映了產(chǎn)品對(duì)用戶數(shù)據(jù)的過分收集甚至有所交易,如何讓用戶放心用,隱私或權(quán)限的最小可行獲取又何嘗不是“降噪”的重點(diǎn)。


6|回顧

洋洋灑灑的寫了一大片,也非本意,怕詞不達(dá)意,只好多分一分內(nèi)容節(jié)點(diǎn),至于這么多字究竟在說些什么,我們簡(jiǎn)單回顧一下;

6.1|行為設(shè)計(jì)部分

數(shù)字化應(yīng)用即經(jīng)過精心編排的行為設(shè)計(jì),本質(zhì)是通過不一樣的行為方式完成我們的需求,通過行為設(shè)計(jì)視角我們可以共情以洞察出更多的用戶需求,并且在進(jìn)行數(shù)據(jù)分析時(shí),也需要善于使用行為視角洞察分析用戶特征或痛點(diǎn),這種方式我們可以記作三級(jí)維度兩層映射。而上癮模型與福格行為模型則可以為設(shè)計(jì)提供更多的指引,同時(shí)可以在模型的基礎(chǔ)上完善更多環(huán)節(jié)來作用于實(shí)際的設(shè)計(jì)過程,幫助我們打造受歡迎的產(chǎn)品。

6.2|引導(dǎo)設(shè)計(jì)部分

用戶引導(dǎo)是非常具有價(jià)值的設(shè)計(jì),好的行為設(shè)計(jì)不能缺失引導(dǎo)設(shè)計(jì),而現(xiàn)在引導(dǎo)設(shè)計(jì)正在被濫用,它的優(yōu)勢(shì)正被埋沒,被用作一些不友好的地方,產(chǎn)品體驗(yàn)也因此大打折扣,而掌握觸發(fā)式引導(dǎo)設(shè)計(jì),通過借機(jī)行事、借助社交、循序漸進(jìn)、行為視角、光明磊落五個(gè)方法也許能幫你改善。對(duì)于現(xiàn)在的數(shù)字化產(chǎn)品現(xiàn)狀,或許克制業(yè)務(wù)范圍,下鉆業(yè)務(wù)優(yōu)勢(shì),減少干擾,注重效率會(huì)帶來更多驚喜。

原文地址:站酷

作者:泡泡_PAO


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


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

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

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


設(shè)計(jì)師如何避免反復(fù)修改?

ui設(shè)計(jì)分享達(dá)人

最近新的一批應(yīng)屆生開始步入職場(chǎng),讓我想到自己剛?cè)朐O(shè)計(jì)這一行時(shí),遇到的大大小小問題感到很是無助。今天這篇是結(jié)合自身經(jīng)驗(yàn)寫給入行不久的設(shè)計(jì),希望你們眼中有光心中有夢(mèng)對(duì)設(shè)計(jì)仍不忘初心。

前言

相信你在設(shè)計(jì)工作中一定遇到過這樣的場(chǎng)景,當(dāng)好不容易拿著設(shè)計(jì)稿推進(jìn)時(shí),被各種角色提出意見:
“我覺得這個(gè)設(shè)計(jì)不高級(jí)”,“我覺得這里可以再大一點(diǎn),顏色更亮一點(diǎn)”,“我覺得可以試試競(jìng)品那樣”,“算了,還是用第一稿吧”等等,然后陷入無限改改改的循環(huán)中,往往做著做著就開始懷疑自己是不是不適合設(shè)計(jì)






為什么會(huì)發(fā)生這種情況?

我認(rèn)為有3個(gè)方面的問題

1、視覺的主觀性

每個(gè)人的審美不一樣,天然會(huì)摻雜著主觀因素,導(dǎo)致每個(gè)人都能很容易的提出自己的意見。而我們對(duì)設(shè)計(jì)關(guān)注往往是各種好看概念稿、當(dāng)前流行趨勢(shì)等等,導(dǎo)致我們過于追求視覺表現(xiàn),而忘記從需求層面出發(fā)

2、用戶洞察缺失,設(shè)計(jì)方案不符合用戶認(rèn)知

每個(gè)需求都是有具體的目標(biāo)用戶,用戶身份不同,同一個(gè)問題背后的需求也是不一樣的,當(dāng)與真實(shí)用戶脫節(jié),業(yè)務(wù)理解不到位,很可能就把整個(gè)需求理解錯(cuò)誤,這樣修改的幾率就很大


3、目標(biāo)不清晰

沒有理解每個(gè)功能是什么,背后要解決的問題是什么,滿足了什么需求,能夠得到的價(jià)值是什么

產(chǎn)品或運(yùn)營提出一個(gè)需求的背后,往往都有一個(gè)非常明確的結(jié)果預(yù)期,他們也需要層層審核。我們不應(yīng)該想“他是不是對(duì)我有意見”“他不懂設(shè)計(jì)的吧,就喜歡瞎BB”“每次都這樣針對(duì)我,設(shè)計(jì)做的真沒意思”等等,而是需要主動(dòng)溝通,了解為什么?只有充分的理解需求,才能尋找更正確更好的解決方案。



我們做稿子時(shí)常存在問題是我們僅僅關(guān)注了設(shè)計(jì)視覺表達(dá)環(huán)節(jié),整個(gè)項(xiàng)目流程我們理解的過于狹隘,騰訊百度這些大廠設(shè)計(jì)流程往往從項(xiàng)目立項(xiàng)設(shè)計(jì)已經(jīng)開始介入了



如何解決?

想要提升設(shè)計(jì)方案的說服力,首先要從思想上改變對(duì)設(shè)計(jì)認(rèn)知,然后再從執(zhí)行層上落實(shí)每個(gè)小點(diǎn)

1、體系化的思考

1. 1、拓寬邊界

這里需要設(shè)計(jì)師站在更高的視角,把設(shè)計(jì)從表現(xiàn)和執(zhí)行抽離往前后延展,在整個(gè)過程中往前去挖掘需求和規(guī)劃產(chǎn)品結(jié)構(gòu),往后做到把控和沉淀,跳出視覺認(rèn)知層,才能宏觀看待整個(gè)業(yè)務(wù)改版



1.2、轉(zhuǎn)換視角

從不同的視角看待問題,學(xué)會(huì)拆解問題和解決問題,從產(chǎn)品、設(shè)計(jì)、開發(fā)不同的角度來全盤看整個(gè)產(chǎn)品,分析這個(gè)需求的投入產(chǎn)出比是否足夠,是否能達(dá)到目標(biāo)(包括設(shè)計(jì)目標(biāo)和產(chǎn)品目標(biāo))。設(shè)計(jì)、產(chǎn)品、開發(fā)從來都不是對(duì)立的,都是不同角色為了整個(gè)產(chǎn)品發(fā)力。



1.3、追本溯源

我們?cè)陂_始著手項(xiàng)目的時(shí)候,不要單點(diǎn)去看要在某個(gè)頁面要做什么改動(dòng),而是從問題入手,和產(chǎn)品同學(xué)對(duì)齊好目標(biāo),結(jié)合設(shè)計(jì)理念。


最后找到發(fā)力點(diǎn)在哪里,循序漸進(jìn),這樣很大程度上能避免項(xiàng)目的反復(fù),對(duì)設(shè)計(jì)流程的準(zhǔn)確把控也是輸出優(yōu)秀設(shè)計(jì)方案的基礎(chǔ)。



1.4、認(rèn)知?jiǎng)?chuàng)新

有些新設(shè)計(jì)師認(rèn)為創(chuàng)新就是把原項(xiàng)目進(jìn)行翻天覆地的改變,初入職場(chǎng)會(huì)覺得負(fù)責(zé)的業(yè)務(wù)和項(xiàng)目都很小,沒有什么意思,其實(shí)創(chuàng)新的維度有很多,包括設(shè)計(jì)工作流程的優(yōu)化,還有從小的問題點(diǎn)著手去深挖和思考,找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜。



陌陌情感化設(shè)計(jì)和貝殼旗下被窩家裝產(chǎn)品圖標(biāo)設(shè)計(jì)異曲同工之處,大方向上都是利用大色塊、細(xì)節(jié)處用線條勾勒,整體設(shè)計(jì)輕量化符合年輕人喜歡,但兩者又有不同之處。陌陌對(duì)表情和動(dòng)作的處理線條更簡(jiǎn)潔更抽象,而被窩家裝圖標(biāo)融入品牌IP趣味化表達(dá),傳達(dá)出詼諧、幽默的正面情感

2、理解需求

設(shè)計(jì)師往往對(duì)信息的獲取比較片面,很多往往坐等原型,然后刷網(wǎng)站找圖接著打開軟件擼圖,這種不充分理解需求就開始做設(shè)計(jì)的行為,屬于思維懶惰,就被稱為常說的美工

我們?cè)谛枨箅A段設(shè)計(jì)師應(yīng)該主動(dòng)跟需求方深入溝通,搞清楚以下方向的問題:




3、明確目標(biāo)

明確目標(biāo)是為了最終設(shè)計(jì)方案可衡量,設(shè)計(jì)師工作不是提供一個(gè)天花亂墜的方案,而是盡可能走在一個(gè)正確道路上提供給需求最合適的方案,只有大方向不錯(cuò)的情況下才有好壞之分



4、實(shí)際案例帶練

4.1、前期分析

在業(yè)務(wù)探索初期,舊版滿足了業(yè)務(wù)方和用戶的基本訴求。但是隨著業(yè)務(wù)擴(kuò)張與更新迭代,我們逐漸發(fā)現(xiàn)現(xiàn)有的租售模塊實(shí)價(jià)登錄信息不能提供用戶有效的參考價(jià)值,該頁面點(diǎn)擊到實(shí)價(jià)登錄頁面的用戶量極少



(1) 價(jià)值點(diǎn)展示不足,人均點(diǎn)閱量較低

這個(gè)改版的背景是在租售業(yè)務(wù)上優(yōu)化實(shí)價(jià)登錄社區(qū)的需求,租售詳情頁的上內(nèi)容的呈現(xiàn)還是舊版,現(xiàn)有框架和內(nèi)容對(duì)社區(qū)價(jià)值點(diǎn)展示不足。


解決辦法:優(yōu)化信息框架,豐富該房屋社區(qū)信息,滿足用戶找房時(shí)了解社區(qū)資訊需求
比如整個(gè)社區(qū)在該市的排名、整個(gè)社區(qū)的配置圖、口碑評(píng)分等以及在實(shí)際找房場(chǎng)景過程中,用戶會(huì)找這個(gè)社區(qū)內(nèi)同格局同戶型的房屋等等

(2) 與用戶預(yù)期不符,跳出率較高

整個(gè)591APP是臺(tái)灣地區(qū)關(guān)注度最高房屋的產(chǎn)品,但是從二手房引流過來的用戶很少,埋點(diǎn)數(shù)據(jù)不理想


解決辦法:除了在視覺上也要與本身租售的業(yè)務(wù)分開,讓用戶理解注意到該模塊的價(jià)值外,另外在體驗(yàn)層也需要優(yōu)化

4.2、用戶分析:深挖用戶真實(shí)的場(chǎng)景訴求

為了更好的明確實(shí)價(jià)登錄的價(jià)值定位,以及確認(rèn)用戶期望什么的信息呈現(xiàn),我們?cè)趯?shí)際改版時(shí)對(duì)用戶做了多輪的摸底調(diào)研,挖掘用戶在使用關(guān)注功能時(shí)的真實(shí)場(chǎng)景訴求。


在調(diào)研過程中,我們發(fā)現(xiàn)使用實(shí)價(jià)登錄的用戶分兩類,分別是觀望期的用戶和決策期的用戶,這兩類用戶雖然都使用,但是對(duì)實(shí)價(jià)登錄功能的場(chǎng)景訴求是不一樣的。



(1) 觀望期用戶

觀望期用戶一般是有買房計(jì)劃,但是對(duì)于自己要買什么樣房或能賣什么樣的房子需求沒有那么明確。這類用戶大多數(shù)是了解為主,從慢慢對(duì)比中做到心中有數(shù)

(2) 決策期用戶

決策期的用戶大多已經(jīng)線下看過房,有些甚至已經(jīng)到了和議價(jià)階段,他們對(duì)于自己的購房訴求已經(jīng)十分清晰。在這個(gè)階段的用戶,期望提供更多有關(guān)體現(xiàn)房源價(jià)值的信息,比如掛盤時(shí)間、成交表、周邊完善程度等等,這些信息一方面可以展示出目前房源再市場(chǎng)內(nèi)的定位,重新調(diào)整價(jià)格預(yù)期;另一方面也能了解到業(yè)主心里預(yù)期,提升線下斡旋的成功率

我們可以從這兩類用戶的使用訴求看到,大家都期待能提供更豐富有效的信息,幫助自己明確需求和輔助決策。

4.3、設(shè)計(jì)目標(biāo)

由上述信息得出我們的設(shè)計(jì)目標(biāo),提高租售模塊的實(shí)價(jià)登錄的點(diǎn)閱、降低跳出率,當(dāng)我們的設(shè)計(jì)方案每個(gè)細(xì)節(jié),都是以目標(biāo)為導(dǎo)向時(shí),你輸出的方案將更有說服力



4.4、設(shè)計(jì)實(shí)踐

結(jié)合實(shí)價(jià)登錄歷史現(xiàn)狀和不同階段用戶場(chǎng)景使用預(yù)期。我們?cè)诒敬侮P(guān)注改版上制定了對(duì)應(yīng)的設(shè)計(jì)策略。

(1) 首屏

舊版分析:僅滿足用戶基本使用,其中承諾的誤差率未達(dá)標(biāo),與內(nèi)政部信息同步也存在問題;同時(shí),視覺上更像是內(nèi)容說明展示,點(diǎn)擊感不明顯


優(yōu)化策略:圍繞用戶買房租房場(chǎng)景,為用戶提供最新的實(shí)價(jià)登錄信息,同時(shí)添加點(diǎn)擊指向性箭頭,告知用戶可點(diǎn)



通過對(duì)首屏不斷的優(yōu)化和迭代,打磨體驗(yàn)細(xì)節(jié)和設(shè)計(jì)細(xì)節(jié),首頁的點(diǎn)閱提升了43%

(2) 實(shí)價(jià)詳情

從框架層對(duì)功能和層級(jí)進(jìn)行梳理,原層級(jí)主要功能不突出,根據(jù)功能的重要層級(jí)以及用戶使用頻次進(jìn)行梳理,將入口進(jìn)行提煉,同時(shí)針對(duì)多樣化需要增加新的入口

舊版分析:用戶在不了解社區(qū)情況下缺少關(guān)注動(dòng)機(jī);折線圖不明所意;同社區(qū)是否有成交與當(dāng)前用戶缺乏聯(lián)系;查看更多實(shí)價(jià)登錄卻到社區(qū)詳情頁與預(yù)期不符


優(yōu)化策略:圍繞用戶買房租房場(chǎng)景,展示與用戶切身利益相關(guān)信息






(3) 保持規(guī)范,風(fēng)格統(tǒng)一

關(guān)于顏色

整個(gè)產(chǎn)品主色是橙色,但是目前租售詳情頁上藍(lán)色橙色混用,當(dāng)然設(shè)計(jì)的改版也需要鍥機(jī),所以我們這次改版沿用橙色,當(dāng)好區(qū)別之前的藍(lán)色,達(dá)到凸顯實(shí)價(jià)登錄模塊的目的



配色從樸素到亮眼跟從LOGO配色,“暗藍(lán)色”到“亮橙色”增強(qiáng)年輕感,加強(qiáng)了顏色的對(duì)比度,讓品牌感知更加直接,增加品牌視覺分量

關(guān)于圓角

圓角,代表友好、親和,具有更強(qiáng)的內(nèi)指向性。我們對(duì)于圓角的取值上也做了足夠的思考:結(jié)合房屋特性,卡片內(nèi)需承載的內(nèi)容信息眾多,圓角太大會(huì)影響邊角信息的呈現(xiàn),所以我們?cè)趫A角選取上將圓角數(shù)值整體縮小,采用了可根據(jù)場(chǎng)景精細(xì)程度選擇合適數(shù)值的圓角(4-6-8px),使卡片容器信息展示更聚焦。



5、高效溝通

設(shè)計(jì)師不僅要會(huì)設(shè)計(jì),還要能夠有理有據(jù)的,跟需求方陳述自己的設(shè)計(jì)方案。尤其是在項(xiàng)目合作和設(shè)計(jì)推進(jìn)時(shí),非常重要。方法可以分為以下幾點(diǎn):a.有邏輯;b.能堅(jiān)持;c.會(huì)妥協(xié)。



5.1、有邏輯

向別人推進(jìn)自己方案之前,先把自己要表達(dá)的內(nèi)容梳理清晰,進(jìn)行調(diào)整和簡(jiǎn)化。試想你小時(shí)候全校上臺(tái)發(fā)表考試獲獎(jiǎng)感言,是不是有個(gè)長長的稿子
多問自己一些為什么,比如下面稿子類似于廣告位的地方,當(dāng)前目標(biāo)是提高點(diǎn)擊率。但是整個(gè)模塊展示是在另外的業(yè)務(wù)上,也是存在突出的同時(shí)不能太突出的問題



初稿給出的時(shí)候也是出于2個(gè)方向考慮,方案一是出于頁面整體風(fēng)格一致性同時(shí)優(yōu)化視覺,稍作強(qiáng)調(diào);方案二考慮到方案一視覺引導(dǎo)弱了,用重色強(qiáng)引導(dǎo)達(dá)到產(chǎn)品目標(biāo)。2個(gè)設(shè)計(jì)方案都可達(dá)到產(chǎn)品目標(biāo),剩下的就是調(diào)優(yōu)了

5.2、能堅(jiān)持

在符合最終產(chǎn)品目標(biāo)的設(shè)計(jì)方案,必須堅(jiān)持。但是,你要有證據(jù)證明為什么它值得或者能夠堅(jiān)持。


這里再分享一個(gè)案例來,臺(tái)灣用戶往往特別注重個(gè)人隱私,基本不開通系統(tǒng)定位,但是買房租房位置選擇及交通地域選擇是第一步,否則后續(xù)搜索無法定位到用戶預(yù)期。所以此次產(chǎn)品目標(biāo)是加強(qiáng)導(dǎo)航的視覺層級(jí),當(dāng)然這只是優(yōu)化需求里面一個(gè)小需求

經(jīng)過競(jìng)品分析、加強(qiáng)品牌感知和用戶使用習(xí)慣等方面確定使用品牌橙。但是這個(gè)橙飽和度比較高,在測(cè)試階段非專業(yè)人士提出疑問導(dǎo)航這個(gè)太刺眼,讓整個(gè)頁面感覺不高級(jí),讓產(chǎn)品和交互再次懷疑這個(gè)橙色是否需要調(diào)整



這個(gè)時(shí)候設(shè)計(jì)堅(jiān)持是非常有必要的,因?yàn)榇罅拷Y(jié)果驗(yàn)證是可達(dá)到產(chǎn)品預(yù)期也符合用戶使用習(xí)慣,僅因?yàn)榇箨懲沦|(zhì)疑就在測(cè)試環(huán)節(jié)隨意修改,這個(gè)是非常沒必要的。測(cè)試環(huán)節(jié)離上線時(shí)間是非常緊迫的,這個(gè)急促的時(shí)間推翻重來結(jié)果也可想而知

5.3、會(huì)妥協(xié)

體驗(yàn)設(shè)計(jì)會(huì)有很多不可控的因素,是在各種局限下做出最合適的選擇。要處理好問題的優(yōu)先級(jí),分清楚哪些是核心目標(biāo),哪些是兼顧目標(biāo),這樣才能更有效的管理自己的時(shí)間以及項(xiàng)目的進(jìn)度。

6、方案闡述

6.1、什么是清晰有效的設(shè)計(jì)方案?

清晰設(shè)計(jì)層面來說就是方案能做到方向明確,方案明了;有效字從設(shè)計(jì)層面來說就是輸出的方案可以解決存在的問題,能達(dá)到設(shè)定的目標(biāo)以及可以切實(shí)落地。



清晰和有效的維度是不一樣的:清晰更多是針對(duì)設(shè)計(jì),在于不同方向/方案的差異度和側(cè)重點(diǎn);
有效更多需要聯(lián)合設(shè)計(jì)上下游(用戶/產(chǎn)品/開發(fā)),對(duì)于優(yōu)秀的設(shè)計(jì)方案來說兩者相輔相成,缺一不可

6.2、清晰:方向明確,方案明了

數(shù)量并不代表一個(gè)設(shè)計(jì)師的專業(yè),最多只能說明設(shè)計(jì)師技法嫻熟。在評(píng)審的過程中,不建議將所有的設(shè)計(jì)方案直接平鋪。而是你要先經(jīng)過自己思考、衡量與推敲,挑選出最優(yōu)的 1~2 個(gè)方案進(jìn)行方案評(píng)審,并給出設(shè)計(jì)說明,陳述方案的思考邏輯。

在設(shè)計(jì)最初期先思考有哪些途徑達(dá)到目標(biāo),確保所有實(shí)現(xiàn)手段的方式都有考慮到,整合途徑一致、方向近似的方案。對(duì)差異性不大的方案進(jìn)行合并劃歸,才能在合理范圍內(nèi)整理出具有不同思考維度與目標(biāo)側(cè)重的提案方向。



之前的例子比如目標(biāo)答案是提高點(diǎn)擊率和閱讀量,我從3個(gè)方面闡述方案的可行性
方案一:沿用當(dāng)前頁面的比較扁平設(shè)計(jì)樣式,選用大間隔大標(biāo)題區(qū)分模塊,在頁面里加入品牌色裝飾強(qiáng)調(diào)我們的模塊,吸引用戶點(diǎn)擊;
方案二:可以采用卡片式設(shè)計(jì)突出點(diǎn)擊感,吸引用戶點(diǎn)擊;
方案三:因?yàn)轭^部有用橙色裝飾強(qiáng)調(diào),所以整個(gè)頭部模塊不用卡片式呈現(xiàn),突出后面2個(gè)模塊

這樣3個(gè)方案給需求方,即滿足對(duì)方產(chǎn)品需求,又滿足設(shè)計(jì)需求,對(duì)方就不會(huì)全盤否認(rèn)設(shè)計(jì)方案,走入改改改模式了,就算對(duì)方有修改意見也能說出具體點(diǎn)去修改,而不是說我覺得不好,不夠突出這樣非常主觀的想法



強(qiáng)調(diào)一點(diǎn):我們?cè)诜桨付紱]說服自己的情況下不要推出去,專業(yè)度是每次和對(duì)方碰撞中中慢慢建立起來的,如果說服不了自己的情況下,推出去對(duì)方很大可能性要你試無數(shù)稿對(duì)比;另外在闡述發(fā)需求方時(shí)候,也要注意語言的引導(dǎo),慢慢理解對(duì)方的意圖

6.3、有效:解決存在的問題、能達(dá)到設(shè)定的目標(biāo)、可以落地的方案

初入行時(shí)認(rèn)為滿足了需求方便是好的設(shè)計(jì),當(dāng)其他角色提出不同意見就會(huì)覺得他們不懂的設(shè)計(jì)。這些現(xiàn)象是因?yàn)樵O(shè)計(jì)師在項(xiàng)目前期沒有正確思考需求本身需要解決什么問題、方案能否達(dá)到團(tuán)隊(duì)共同設(shè)定的目標(biāo),以及方案是否能平穩(wěn)落地這三個(gè)維度



(1)解決存在的問題——從問題出發(fā)

我們?cè)趯?shí)際輸出方案的時(shí)候,不能從產(chǎn)品經(jīng)理的需求文檔開始,而是要把考量維度更前置,從項(xiàng)目現(xiàn)有的問題出發(fā)。這個(gè)問題的搜集包括外部用戶的反饋,內(nèi)部團(tuán)隊(duì)的聲音,同時(shí)對(duì)問題進(jìn)行篩選和甄別。

比如下面同一個(gè)產(chǎn)品按鈕2種懸浮狀態(tài),左側(cè)案例按鈕hover狀態(tài)是由正常狀態(tài)面型變成線型;右側(cè)案例按鈕hover狀態(tài)是正常狀態(tài)下加投影。



如果我們僅從產(chǎn)品需求文檔開始,不去深究其背后的原因,很可能把右側(cè)hover狀態(tài)直接變色處理,沒有去思考hover的幾種樣式哪種是更適合當(dāng)前場(chǎng)景的的,這樣簡(jiǎn)單粗暴的處理方式多了之后使得產(chǎn)品體驗(yàn)大大折扣



(2)能達(dá)到設(shè)定的目標(biāo)——從目標(biāo)啟動(dòng)

問題還需要結(jié)合目標(biāo)一起考慮,解決問題的思路并不完全等同于目標(biāo),目標(biāo)是大家一起制定的未來產(chǎn)品的發(fā)展方向。比如之前導(dǎo)航的案例,未發(fā)版前部分工作人員認(rèn)為顏色偏重,但是從產(chǎn)品目標(biāo)和品牌調(diào)性及目標(biāo)用戶審美上是沒有問題的



(3)能落地的方案——技術(shù)可以實(shí)現(xiàn)

在輸出設(shè)計(jì)方案的時(shí)候,需要考慮到開發(fā)實(shí)現(xiàn)的可行性,需要消耗多少資源去實(shí)現(xiàn)這個(gè)需求,最低成本達(dá)到目標(biāo)的路徑是什么。最常見的就是情感化設(shè)計(jì),下圖案例2個(gè)空狀態(tài)下的場(chǎng)景,原本考慮到趣味性及品牌屬性加入動(dòng)效,但是開發(fā)的業(yè)務(wù)需求已經(jīng)排到下月,最后只能以靜態(tài)圖展示,先滿足基本需求后續(xù)有時(shí)間再進(jìn)行優(yōu)化



再例如下面三組數(shù)據(jù)的排版方案一:文字最左邊間距30px,文字最右邊間距30px,中間一組數(shù)據(jù)中間對(duì)齊;

方案二:三組數(shù)據(jù)分別在360px寬的格子里距離左邊30px。方案一在視覺上可能更加合理,當(dāng)寬度是1200時(shí)右側(cè)不會(huì)空太多,但是按方案二的邏輯寫更加便捷,一組數(shù)據(jù)樣式可以解決3組數(shù)據(jù)的排版,大大提高開發(fā)效率,如果用方案二評(píng)審加入開發(fā)實(shí)現(xiàn)方式的思考,那么按過稿率大大提升了



以上是跟進(jìn)項(xiàng)目一整個(gè)具體過程,了解背景、分析問題、設(shè)定目標(biāo)、到方案推導(dǎo)及執(zhí)行輸出、再到方案的落地,整個(gè)過程與產(chǎn)品研發(fā)溝通非常順利,最后也獲得良好的用戶反饋,整個(gè)團(tuán)隊(duì)滿滿的成就感是非常開心的



總結(jié)

進(jìn)入互聯(lián)網(wǎng)公司工作初期,大多數(shù)人對(duì)設(shè)計(jì)的理解更多停留在表現(xiàn)層,對(duì)設(shè)計(jì)的判斷標(biāo)準(zhǔn)更多是好不好看、喜不喜歡。但作為設(shè)計(jì)師我們不要盲目的去畫設(shè)計(jì)圖,只有在設(shè)計(jì)方案前,更好的理解和分析了需求,才能很好地服務(wù)用戶幫助用戶使用產(chǎn)品;同時(shí),只有站在用戶的角度去分析理解產(chǎn)品,才可以幫助產(chǎn)品站在全局的視角提升用戶體驗(yàn)和設(shè)計(jì)需求,從而打造優(yōu)秀的用戶體驗(yàn)。這2點(diǎn)綜合起來才是設(shè)計(jì)師價(jià)值的體現(xiàn)。

原文地址:站酷

作者:貝賢設(shè)計(jì)筆記

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》科幻機(jī)甲風(fēng)格海報(bào)怎么做?

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


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

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

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


日歷

鏈接

個(gè)人資料

存檔