首頁

掉進(jìn)這6個陷阱,可能會毀了你的原型設(shè)計!

資深UI設(shè)計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里


很難想象,如果沒有原型設(shè)計,如今的數(shù)字產(chǎn)品設(shè)計流程會變成什么樣。原型的存在,讓產(chǎn)品團(tuán)隊(duì)在制作和開發(fā)過程中更加直觀,就像那句話說的:展示,而非表述。

現(xiàn)如今,許多產(chǎn)品團(tuán)隊(duì)借助原型來測試想法,甚至銷售產(chǎn)品。不過,原型設(shè)計本身并非是萬無一失的,設(shè)計師依然會面臨許多陷阱,并且拖累整個產(chǎn)品的進(jìn)程。

今天的文章,總結(jié)了6個常見的原型設(shè)計的陷阱。

1. 目標(biāo)不明確的原型設(shè)計

我們先設(shè)計出來,然后弄明白如何使用它。

在這種說法的指引下,設(shè)計和開發(fā)團(tuán)隊(duì)需要花費(fèi)大量的時間來處理那些沒有任何價值的事務(wù),在沒有特定目標(biāo)的情況下制作原型,會浪費(fèi)大量的時間。

每個原型的設(shè)計目標(biāo)應(yīng)該是非常明確的,原因應(yīng)該是清晰的。這個目標(biāo)可以是源自于一個特定的想法,或者某種假設(shè),產(chǎn)品團(tuán)隊(duì)在這個方向的指引之下,利用系統(tǒng)化的知識來構(gòu)建符合目標(biāo)的原型。

在創(chuàng)建原型之前,設(shè)計師應(yīng)該問自己一個問題,「通過創(chuàng)建這個原型我們要試圖解決什么問題?」如果能夠找到一個明確的答案,那么這個原型是清晰且具有凝聚力的,有助于減少潛在的開銷。

2. 制作原型過程受阻

產(chǎn)品團(tuán)隊(duì)通常會力圖制作出有效有用的原型。當(dāng)制作出來的原型不可用甚至根本無法完成的時候,整個團(tuán)隊(duì)會為之氣餒,而這種消極的心態(tài)可能會拖垮整個項(xiàng)目。

為了提率,設(shè)計人員應(yīng)當(dāng)將失敗的情況視作為整個原型制作過程中自然的組成部分。原型在很多時候是用來測試假設(shè)和想法的,并非每個假設(shè)都是有效的。這就是為什么創(chuàng)建工作原型不應(yīng)該是原型制作工作最重要的結(jié)果。原型制作工作最重要的成果應(yīng)該是獲取有用的信息和新的知識。因此,將焦點(diǎn)從失敗的情緒上,轉(zhuǎn)移到學(xué)習(xí)新的知識上來,成功和失敗的原型,都能夠讓你的產(chǎn)品進(jìn)步。就像大家常說的,失敗是成功之母。

3. 對第一個想法精雕細(xì)琢

產(chǎn)品團(tuán)隊(duì)常常在擁有第一個想法的時候,就想堅(jiān)持住,將它打磨成為最終的解決方案。隨后,團(tuán)隊(duì)花費(fèi)大量的時間來出揣摩嘗試,調(diào)整細(xì)節(jié),制作原型,甚至直接開始設(shè)計視覺稿。

結(jié)果,花費(fèi)無數(shù)小時創(chuàng)建和打磨的原型,在可用性測試早期,就呈現(xiàn)出不理想的狀況,接下來,設(shè)計師和團(tuán)隊(duì)會意識到最初的想法其實(shí)不夠好。

經(jīng)驗(yàn)豐富的團(tuán)隊(duì)知道,想要探索和測試一系列的想法是必不可少的,并且只有通過測試之后,效果最好的方案,才是值得堅(jiān)持做下去的?;ㄙM(fèi)更多的時間來思考,團(tuán)隊(duì)才能針對問題空間繼續(xù)挖掘下去,并且找到潛在的解決方案。

4. 愛上你的原型

原型的設(shè)計者常常會對于自己的設(shè)計有大量的投入。這種投入是會造成一種「投資偏見」——你在某個事情上花費(fèi)的時間越多,它對你來說就越有價值。值得注意的是,它對于你的價值會越來越高,但是對于別人而言并非如此。而原型設(shè)計同樣如此,當(dāng)設(shè)計師對于自己的原型過度沉迷的時候,產(chǎn)品可能就會暴露在危險之下了:你會很容易忽略它們存在的缺點(diǎn),即使這些缺陷很明顯,設(shè)計師也會忽略團(tuán)隊(duì)成員和其他人的反饋。

不要拿原型當(dāng)傳家寶。

在打磨原型上花費(fèi)太多寶貴的時間和精力,會剝奪設(shè)計師對于反饋應(yīng)有的注意力和敏銳度。讓你的原型在細(xì)節(jié)和復(fù)雜度上保持在一個合理的度上。

原型并不是藝術(shù)品,它應(yīng)該是幫你找到答案的工具。

如果你傾向于采用盡可能完善的設(shè)計,那么請采用最小可行原型——添加足夠的細(xì)節(jié),但是盡可能確??尚?。將原型視作為一次性的工具。每個原型都有特定的用途,一旦達(dá)到目標(biāo),就盡可能用更好的東西替換它。

5. 忽略草圖的重要性

「當(dāng)我們擁有強(qiáng)大的原型工具的時候,為什么還要使用紙和筆呢?」設(shè)計師跳過手繪階段,并且直接使用計算機(jī)來繪制數(shù)字原型的時候,他們相信數(shù)字化的設(shè)計是可以節(jié)省時間的。但是實(shí)際上,手繪的草圖能夠幫助設(shè)計更快地起步。

當(dāng)你下次不知道如何解決問題的時候,可以試著從筆和紙開始繪制草圖。只需要開始繪制草圖,勾勒出所能想到的變化,然后把它們貼在墻上,并且和你的團(tuán)隊(duì)一起從技術(shù)和業(yè)務(wù)的角度上討論可行性。

6. 為原型選擇錯誤的保真度

保真度是描述細(xì)節(jié)程度的一種度量,我們常說的線框圖細(xì)節(jié)簡略,是低保真的,而視覺稿則常常會用到豐富的細(xì)節(jié)刻畫,它是高保真的。原型的呈現(xiàn)形態(tài)是非常多樣的,可以是低保真的也可以是高保真的。制作一個高保真的原型是非常誘人的,但是一定要抵制住這樣的誘惑。值得注意的是,原型的保真度應(yīng)該和你想法的保真度相匹配。

這意味著,設(shè)計師應(yīng)該根據(jù)他們的設(shè)計過程所處的階段來選擇保真度。當(dāng)設(shè)計師違反這一規(guī)則的時候,往往會帶來糟糕的結(jié)果。比如過高的保真度會讓處于早期階段的設(shè)計師陷入「投資偏見」。

當(dāng)團(tuán)隊(duì)設(shè)計產(chǎn)品尚且處于初期的時候,盡量采用低保真的策略來進(jìn)行繪制,比如使用草圖。

△ 低保真的草圖原型

當(dāng)你想要與真實(shí)的用戶一起測試你的想法的時候,盡量使用保真度更高的設(shè)計,比如數(shù)字化的可交互的原型。使用高保真的原型來進(jìn)行可用性測試,能夠產(chǎn)生更真實(shí)、具體的反饋。高保真的原型展示給利益相關(guān)者來看也非常有用,他們會更好地判斷產(chǎn)品的功能和內(nèi)容。

△ 在 Adobe XD 中創(chuàng)建高保真的原型

因此,考慮最終的目標(biāo)和你所擁有的時間,來確保原型的最佳保真度,盡早與期望達(dá)成一致。

結(jié)語

原型設(shè)計在每個產(chǎn)品設(shè)計項(xiàng)目當(dāng)中都是至關(guān)重要的,正確地設(shè)計原型,才能盡早地構(gòu)建真實(shí)的產(chǎn)品。

One more thing

關(guān)于原型設(shè)計,喬布斯在1992年 MIT 的演講上說到的一個事情非常有意思。彼時,他還未回歸蘋果,而是在制造名為 NeXT 的高端電腦,并且對于面向?qū)ο缶幊逃兄鴺O高的熱忱。

我們已經(jīng)有2年時間沒有構(gòu)建任何工程上的原型了。這意味著,從產(chǎn)品開始設(shè)計的第一天,工程師和整個制造業(yè)就已經(jīng)參與進(jìn)來了。很多時候,在構(gòu)造原型的時候,生產(chǎn)工具和技術(shù)根本是無法與之匹配的,而當(dāng)你在原型設(shè)計的時候所積累的東西,在投產(chǎn)的時候就得完全拋棄,然后重新開始。因?yàn)槲覀兪冀K緊密地和技術(shù)結(jié)合起來做,因此我們不會拋棄任何東西,并且不浪費(fèi)時間,這也是我所見過的設(shè)計、工程和制造團(tuán)隊(duì)之間,最健康的關(guān)系之一。

現(xiàn)如今,身為設(shè)計師的我們在使用 Photoshop、InVision 等工具制造原型的時候,實(shí)際上開發(fā)可能是與之脫節(jié)的。產(chǎn)品團(tuán)隊(duì)中,設(shè)計和開發(fā)之間的矛盾,從來沒有僅此減少過。而「全棧設(shè)計師」這一概念的提出,又何嘗沒有來自這種矛盾的壓力呢?

諸如 Sketch 和 Figma 這樣的新工具在做原型設(shè)計的時候,已經(jīng)或多或少地開始在設(shè)計和開發(fā)之間找到協(xié)同的點(diǎn),試圖在設(shè)計驗(yàn)證和技術(shù)驗(yàn)證之間,找到結(jié)合的辦法。

更好的原型設(shè)計,更合理的技術(shù)和設(shè)計的結(jié)合點(diǎn),這也許是我們未來的探索方向吧。


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


設(shè)計師必須掌握的交互知識

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


交互設(shè)計 Interaction Design 也被成為IXD。交互設(shè)計建立起了人與計算機(jī)便捷溝通的通道,它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。作為UI設(shè)計師,我們在工作之中經(jīng)常會對接交互設(shè)計師和產(chǎn)品經(jīng)理,他們具有豐富的交互知識和經(jīng)驗(yàn)。那是不是我們作為UI設(shè)計師,就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計了呢?當(dāng)然不是,在視覺設(shè)計層面更多地考慮布局和交互原則才可以讓我們的界面更友好,視覺設(shè)計師是交互設(shè)計中非常重要的角色。

 


為何如今的產(chǎn)品總給人千人一面的感覺?

博博

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

編者按:這篇來自產(chǎn)品設(shè)計師 Eugen E?anu 的文章解開了我長久以來的一個疑惑,其中的思考和經(jīng)驗(yàn)值得我們共勉。結(jié)尾的 One more thing 是我額外補(bǔ)充的內(nèi)容和一點(diǎn)想法,和當(dāng)下產(chǎn)品設(shè)計的困境相關(guān),也是試圖補(bǔ)完這篇文章,希望能給你一點(diǎn)幫助。

為何如今的產(chǎn)品總給人千人一面的感覺?

當(dāng)你在尋找一個能夠滿足你需求的應(yīng)用的時候,會不會因?yàn)樘嘞嗨频漠a(chǎn)品而無從選擇?當(dāng)你想要在兩個甚至更多相似的產(chǎn)品中進(jìn)行選擇,一切都顯得那么困難。而唯一能夠進(jìn)行快速區(qū)分的因素似乎是設(shè)計,但是緊接著會發(fā)現(xiàn)連設(shè)計都是那么相似。

為什么市場上所有的應(yīng)用看起來都長的同一副面孔呢?

在回答這個問題之前,我想簡單澄清一些事情。為了創(chuàng)造出能夠解決需求的產(chǎn)品,通常需要采用以人為本的方法來進(jìn)行設(shè)計,但是事實(shí)上,那種狀態(tài)太過于理想,幾乎沒人能夠真正做到。

以人為本的設(shè)計方法,確實(shí)能夠極富創(chuàng)造性地解決問題。當(dāng)采用這種方法來為目標(biāo)用戶進(jìn)行設(shè)計,最終能夠得到了一個為這些用戶量身定制的解決方案。但是,這種設(shè)計方法需要設(shè)計者具備無與倫比的同理心來真正站在目標(biāo)用戶的角度來思考問題,由此獲得大量的想法和靈感,建立一大堆可能有效的原型,同目標(biāo)用戶分享你正在做的事情,驗(yàn)證你的感受和想法,最終將你的創(chuàng)新的解決方案推向世界。但是這是理想的狀況。

那么為什么世界上那么多偉大的公司,依然無法真正采用這樣的方法成就真正優(yōu)秀的產(chǎn)品呢?因?yàn)閹缀跛械漠a(chǎn)品身上都有一種病毒,它的名字叫做特征蔓延。

為何如今的產(chǎn)品總給人千人一面的感覺?

產(chǎn)品開發(fā)流行?。禾卣髀?

特征蔓延的英文名叫做 Feature creep,它的主要癥狀就是不斷向產(chǎn)品中添加功能。

現(xiàn)如今,絕大多數(shù)的產(chǎn)品,無論是物理實(shí)體還是存在于手機(jī)中的各色 APP,幾乎全都面對著激烈的競爭。

激烈的競爭使得每個人都面臨著壓力,產(chǎn)品所屬的企業(yè)中,從領(lǐng)導(dǎo)到產(chǎn)品經(jīng)理再到最底層的開發(fā)者和設(shè)計師,所有人都面對著來自對手和潛在對手的壓力。

這種競爭壓力基本上是源自于三個方面:價格,功能和質(zhì)量。非常不幸的是,絕大多數(shù)時候,這三者的壓力從前到后是依次遞減的。價格競爭的壓力通常是最大也是最直接的,然后才是功能和產(chǎn)品質(zhì)量,至于這個順序意味著什么,就不贅述了。

同時,產(chǎn)品上線的速度和順序也很重要。誰是進(jìn)入市場第一人,這個是必須爭一下的。

這樣一來,想要盡快殺入市場的產(chǎn)品,在很大程度上是伴隨著「偷工減料」的。沒有足夠的時間來對產(chǎn)品進(jìn)行足夠多的迭代,沒有辦法把系統(tǒng)調(diào)整到最優(yōu),沒有辦法把硬件缺陷都找出來,沒有辦法把軟件中每一個 Bug 都盡量找出來,甚至絕大多數(shù)企業(yè)的領(lǐng)導(dǎo)都抱有「沒事,我們隨后再把問題找出來解決掉?!箯碾娔X到汽車,從 Windows 到 iOS,從來都是如此。

沒有什么 Bug 是一個補(bǔ)丁解決不了的,如果不行,多打幾個?!猈indows開發(fā)團(tuán)隊(duì)

為何如今的產(chǎn)品總給人千人一面的感覺?

當(dāng)然,能夠通過后期補(bǔ)丁解決的問題終究是少數(shù)。實(shí)際市場上絕大多數(shù)的產(chǎn)品確實(shí)隨著補(bǔ)丁和修改逐步提升了,但是絕大多數(shù)仍然沒有解決用戶的問題。

對于特征蔓延這種病癥,早在1976年就已經(jīng)被發(fā)現(xiàn),并且在產(chǎn)品設(shè)計圈當(dāng)中有著非常廣泛的認(rèn)知。對于這種產(chǎn)品病有一個非常學(xué)術(shù)的描述:

特征蔓延是指一產(chǎn)品(如APP)的軟件機(jī)能持續(xù)膨脹或增加的情形。產(chǎn)品基本機(jī)能以外的擴(kuò)充機(jī)能,會使產(chǎn)品比原始設(shè)計要更復(fù)雜。長時間來看,額外或不需要的機(jī)能慢慢的進(jìn)入系統(tǒng)中,使系統(tǒng)超出原來設(shè)定的目標(biāo)。

假設(shè)我們擁有一個非常強(qiáng)大的產(chǎn)品團(tuán)隊(duì),設(shè)計師擁有足夠的同理心,開發(fā)和測試也非常靠譜,他們使用以人為中心的設(shè)計方法,探索了所有用戶使用場景,并且遵循產(chǎn)品流程認(rèn)真設(shè)計仔細(xì)測試,最終輸出了一個用戶想要購買的優(yōu)質(zhì)產(chǎn)品。假設(shè)這個問世的產(chǎn)品在各個層面上都是完美的:擁有直觀的界面,良好的感覺和優(yōu)秀的視覺,貼合用戶的體驗(yàn)等等。它只有一個使命,那就是以有意義的方式滿足人們的需求,讓人們能夠更好地生活,產(chǎn)品因此而走向成功。誰都想來一個。(就像解決了信號問題的 iPhone 4)

非常不幸的是,產(chǎn)品上市之后,各種各樣的影響因素開始出現(xiàn),情況開始向著并不理想的方向發(fā)展。

  • 現(xiàn)有的用戶非常喜歡這款產(chǎn)品,但是他們想要更多的功能,各種各樣的功能,包括帶孩子。
  • 競爭對手開始推出新款,并且具備一些全新的、我們的產(chǎn)品所不具備的功能。從公司領(lǐng)導(dǎo)到用戶都開始催我們的團(tuán)隊(duì)增加新功能。
  • 客戶對于產(chǎn)品總體上是滿意,但是買的人多了之后,市場趨于飽和,銷售額不可避免的下降了。是時候添加新的或者創(chuàng)新的功能來促使用戶更新或購買新版本了。

特征蔓延就是這樣出現(xiàn)的,產(chǎn)品在現(xiàn)有的功能上不斷增加更多的功能。各種各樣的理由會促使產(chǎn)品不得不增加功能,各種各樣。然后產(chǎn)品開始膨脹,臃腫,直到用戶實(shí)在不太想用或者徹底沒法用。

而在如今的市場和商業(yè)競爭中,特征蔓延并不是唯一的絕癥。

為何如今的產(chǎn)品總給人千人一面的感覺?

競爭驅(qū)動式設(shè)計的泥潭

哈佛大學(xué)教授 Youngme Moon 認(rèn)為,產(chǎn)品和競品之間的攀比對抗是讓產(chǎn)品陷入千篇一律的境地的主要原因。通常,企業(yè)為了提升產(chǎn)品的市場份額,會讓自家產(chǎn)品擁有對手一樣的功能,來確保競爭力。對手的團(tuán)隊(duì)協(xié)同軟件的售價是20美元?沒事,我們開發(fā)個功能一樣強(qiáng)大的,定價15美元好了。他們的移動端的 APP 只需要加1美元就能獲得?那我們的移動端版本直接免費(fèi)和桌面端綁定好了。

當(dāng)產(chǎn)品陷入和對手刺刀見紅的局面之時,兩敗俱傷的結(jié)果就不遠(yuǎn)了。試圖逐個功能和對手競爭,必然會陷入同質(zhì)化的競爭,很難讓用戶真正愛上其中的某個產(chǎn)品。

這種就是競爭驅(qū)動型設(shè)計。令人遺憾的是,即使產(chǎn)品的第一版是以用戶為中心設(shè)計出來的優(yōu)質(zhì)產(chǎn)品,在競爭驅(qū)動下誕生的后續(xù)產(chǎn)品,就很難贏得用戶的真心了。

很多時候如果你想創(chuàng)造真正卓越的產(chǎn)品,你不得不花費(fèi)更多的時間。而即使你創(chuàng)造出來這樣的產(chǎn)品,在市場上也不一定能在銷售排行榜上殺入前三,屈居第四是很正常的事情。那么你還愿意這么做么?

我們都聽說過先發(fā)優(yōu)勢,但是你真的知道獲得先發(fā)優(yōu)勢,將會付出什么樣的代價么?

為何如今的產(chǎn)品總給人千人一面的感覺?

用1年寫一冊暢銷書,還是花5年成就一本經(jīng)典?

以寫書來舉例也許更加直觀。當(dāng)你決定寫一本關(guān)于設(shè)計的書,然后登上暢銷榜,名利雙收,好像挺不錯的。如果它的內(nèi)容是之前沒人寫過的,并且確實(shí)比較有市場,在內(nèi)容上稍加打磨,幾個月后引爆設(shè)計圈似乎不是太大的問題。事實(shí)上,它上架之后,和自己的預(yù)期相差不遠(yuǎn),挺好。不過,不知道為什么,1年之后,熱點(diǎn)消退,這本書也沒什么人買了。

換一個做法,寫書的過程中可能需要勒緊褲腰帶過日子,花上5年時間仔細(xì)揣摩,寫一本擁有持續(xù)價值的書,然后在之后的100年時間當(dāng)中,成為設(shè)計圈中每個設(shè)計師的必讀書。寫書的過程中,你需要專門地進(jìn)行研究,仔細(xì)地調(diào)整內(nèi)容,對于每個細(xì)節(jié)都精雕細(xì)琢,花費(fèi)更多的時間,讓這本書有對抗時間的價值。

從長遠(yuǎn)來看,只看眼前、偷工減料的公司會自然而然過時,然后被人們所忘記。浪潮過后,誰在裸泳一目了然。

為什么總?cè)滩蛔√砑有碌墓δ埽?

和對手的對比,總能看到自家產(chǎn)品的缺陷,然后補(bǔ)完缺陷,這有什么不對么?似乎沒問題,但是這種思維方式并不會打造更好的產(chǎn)品。更好的策略是:

專注于自家真正擅長的領(lǐng)域,并繼續(xù)深挖自己的長處。在自己的優(yōu)勢領(lǐng)域,集中自己的研發(fā)能力,并作為營銷重點(diǎn)。這樣才能讓自己的產(chǎn)品從平庸走向卓越,真正能在慘烈的紅海中脫穎而出。用更少更精銳的功能來成就自己,而不是在成堆的功能中與對手同歸于盡。

還記得一代的 Google Pixel Phone 么?他們的營銷口號是「有耳機(jī)插孔的手機(jī)」,對標(biāo)的正是取消耳機(jī)插孔的 iPhone ,而這個文案正是嘲諷 iPhone 的設(shè)計太過愚蠢。令人驚訝的是,隨后的 Google Pixel 2 也跟著取消了耳機(jī)插孔?,F(xiàn)在還有誰記得 Google Pixel 系列呢?

為何如今的產(chǎn)品總給人千人一面的感覺?

是聚焦長處,還是忙于跟隨?

偉大的設(shè)計需要脫離茍且的競爭和來自客戶的壓力。開始專注于你認(rèn)為重要的事情,以及你目光所及的遠(yuǎn)方。在你最優(yōu)秀的地方,集中精力。你必須確保你的產(chǎn)品是一致且連貫的。這意味著領(lǐng)導(dǎo)層需要足夠睿智,也足夠堅(jiān)定,這樣才能抵擋來自用戶和市場部門不斷增加產(chǎn)品功能的各種需求。

成就最好的產(chǎn)品,設(shè)計者要屏蔽來自競爭對手的聲音,專注于用戶真實(shí)的深層需求。

不要覺得我的話是憑空而來的。Amazon 的 CEO 兼創(chuàng)始人 Jeff Bezos 也提到過類似的方法,被稱為「客戶迷戀」。在他看來,將所有精力集中在客戶的需求上,而不是競爭。重點(diǎn)在于三個簡單的問題上:「客戶需要的是什么?」「他們的需求如何才能滿足」「我們可以做什么來提高客戶服務(wù)和價值?」Bezos 還認(rèn)為,專注于客戶才是首要目標(biāo),其他的問題會迎刃而解的。如果你一開始就被市場競爭吸引了注意力,很難作出真正對的決策。產(chǎn)品質(zhì)量通常只關(guān)乎客戶和解決真實(shí)的需求。

One more thing

想要從激烈的競爭中抽身出來, 創(chuàng)造真正獨(dú)特的產(chǎn)品,是許多產(chǎn)品設(shè)計師的愿望。但是這真的不是一句話說得清楚的事情,真實(shí)的情況比我們想象中還要復(fù)雜。

競爭驅(qū)動型的設(shè)計確實(shí)是一個很難繞過的問題,驅(qū)動產(chǎn)品的不僅僅是領(lǐng)導(dǎo)和客戶的聲音,深陷市場競爭,許多時候確實(shí)身不由己。

采用以用戶為中心的設(shè)計的設(shè)計流程,還繞不開一個常見的因素:最佳實(shí)踐。經(jīng)過前人驗(yàn)證、時間打磨、用戶習(xí)慣之后所獲得的最佳實(shí)踐,是設(shè)計師和產(chǎn)品在很多時候必須依托的東西。比如我們?nèi)缃袼吹降脑S多表單的設(shè)計策略和漢堡菜單的使用。用戶和市場已經(jīng)「塑造」出了許多最優(yōu)的設(shè)計策略,設(shè)計師通常會直接拿來使用,而我們感到「千人一面」的 UI設(shè)計當(dāng)中,確實(shí)有各種最佳實(shí)踐所「作出的貢獻(xiàn)」。

為何如今的產(chǎn)品總給人千人一面的感覺?

包括我們現(xiàn)在正在不斷探索的動效設(shè)計,雖然力圖在視覺和體驗(yàn)上有所創(chuàng)新,但是早在近百年前,迪士尼的動畫設(shè)計師們已經(jīng)總結(jié)出一套人性化動畫設(shè)計的策略,實(shí)際上我們今天許多優(yōu)秀的動效設(shè)計,依然是圍繞著這一套「最佳實(shí)踐」來進(jìn)行設(shè)計和重設(shè)計的。

為何如今的產(chǎn)品總給人千人一面的感覺?

違反「最佳實(shí)踐」的特立獨(dú)行的設(shè)計并非不可,只不過它通常需要遵循「每次僅只能打破一個規(guī)則」的原則。在用戶已經(jīng)被市場培養(yǎng)出大量習(xí)慣的前提之下,大量采用反直覺、反習(xí)慣的設(shè)計,只會讓產(chǎn)品死的更快。

那么是不是就沒有辦法了呢?當(dāng)然不是。新鮮有趣的、獨(dú)樹一幟的設(shè)計并非沒有辦法設(shè)計,設(shè)計師需要在最佳實(shí)踐以外的部分尋求改變,探索可能性,甚至等待契機(jī)。不同的設(shè)計趨勢、元素、技法、排版布局、配色、動效進(jìn)行多樣化的組合,依然可以創(chuàng)造出讓人眼前一亮的設(shè)計。但是這還不夠。

為何如今的產(chǎn)品總給人千人一面的感覺?

早在上世紀(jì)30年代的時候,包豪斯設(shè)計學(xué)院的先哲們就已經(jīng)提出過「形式追隨功能」的設(shè)計箴言。這句話強(qiáng)調(diào)的是設(shè)計的科學(xué)性,便捷性和經(jīng)濟(jì)效益,而不再是圍繞著裝飾性和簡單的形式感來進(jìn)行設(shè)計。在今天這個用戶體驗(yàn)至上、以用戶為中心的設(shè)計趨勢之下,UI 和視覺所代表的「形式」所追隨的「功能」應(yīng)該是用戶的真實(shí)需求。而在這個語境下試圖創(chuàng)新,或者恰如其分地融入一些貼合場景和目標(biāo)的藝術(shù)元素,也許是個不錯的突破口。

正如同在上一篇文章《熟知用戶行為的這7個層面,你的設(shè)計才會走進(jìn)人心》中所說的,客戶買鉆頭的時候,需要的并非鉆頭而是洞,同樣的,用戶下載一款閱讀APP 的時候,他的真實(shí)需要并非是閱讀器,他需要的是內(nèi)容,是信息,是滿足他求知欲的文章,或者填補(bǔ)碎片時間的有趣的故事。

為何如今的產(chǎn)品總給人千人一面的感覺?

內(nèi)容為王這句話早就已經(jīng)不是口號了。圍繞著內(nèi)容做設(shè)計已經(jīng)成為了諸如 Medium 和 Twtter 這樣的企業(yè)的新策略,而國內(nèi)的許多一線企業(yè)也開始擁有自己的「首席內(nèi)容官」。讓設(shè)計追隨內(nèi)容,讓真正吸引用戶的東西來撬動產(chǎn)品,拉升體量,才是正途。

設(shè)計和內(nèi)容的結(jié)合方式多種多樣,根據(jù)內(nèi)容所需要的語境來搭配相應(yīng)的設(shè)計是目前已知的最常見的做法。根據(jù)內(nèi)容本身所具備的故事性和環(huán)境特征,視覺化地表達(dá),讓 UI 和視覺服務(wù)于內(nèi)容,是許多成功的設(shè)計所驗(yàn)證過的技巧。

比如下面的 voyage-electrique這個網(wǎng)站,借助 C4D 構(gòu)建的 3D 可交互式的場景來呈現(xiàn)電力系統(tǒng)的運(yùn)作,清新可愛的畫風(fēng)和令人愉悅的音樂讓原本沉悶的主題顯得頗為有趣,讓人心生好感的設(shè)計,使得相關(guān)的信息更容易被用戶接受。流程化的信息呈現(xiàn)方式隱約具備了故事性的表達(dá),即使你并不懂法語也會流連忘返,在點(diǎn)擊和探索中多停留一會兒。語言蒼白,不如點(diǎn)進(jìn)去看看。

為何如今的產(chǎn)品總給人千人一面的感覺?

最后需要注意一個問題:人類先天就是喜新厭舊的生物,再新鮮有趣的東西,在獲得之后都會快速地適應(yīng)(適應(yīng)性認(rèn)知偏差),并不再感到新鮮。在內(nèi)容和設(shè)計策略上,適時地注入新鮮的內(nèi)容(不違反基本設(shè)計規(guī)則和產(chǎn)品方向的前提下),是維持活躍度而必須做的事情。

原文作者 : Eugen E?anu

譯者/編輯 : 陳子木

譯文地址:https://www.uisdc.com/design-product-like-everyone-else

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

這7種廣泛存在的認(rèn)知偏差,影響了我們太多的決策

資深UI設(shè)計者

如今心理學(xué)和行為學(xué)已經(jīng)是UX和產(chǎn)品設(shè)計領(lǐng)域當(dāng)中諸多理論的來源和實(shí)踐的依據(jù),它們是UI/UX設(shè)計師和產(chǎn)品設(shè)計師的必修課。

系統(tǒng)的心理學(xué)和行為學(xué)的知識,對于設(shè)計工作其實(shí)有著極為深刻的影響。用戶體驗(yàn)設(shè)計很大程度上是在心理學(xué)和行為學(xué)的研究基礎(chǔ)上逐漸進(jìn)化和發(fā)展起來的,對于想要深耕這一領(lǐng)域的設(shè)計而言,心理學(xué)和行為學(xué)是繞不開的必修課。

心理學(xué)和行為學(xué)早已并非是單獨(dú)存在的學(xué)科,它們和許多不同領(lǐng)域的知識交匯融合,圍繞著人性進(jìn)行多維度全方位的探討。如今我們所熟知的許多優(yōu)秀的產(chǎn)品,也大多從這些領(lǐng)域技汲取營養(yǎng),不少四兩撥千斤借力逆襲的成功案例,也往往借助的是這些深深植根于人性的杠桿。

這兩個宏大的命題并非簡單幾段話說得清楚,但是這當(dāng)中有許多有意思的現(xiàn)象,非常具有啟發(fā)性。許多植根于人性本能中的非理性心理和行為,在日常生活中主導(dǎo)著我們作出決策,有的是一些不易覺察的心理效應(yīng),有的僅僅是不算太顯著的認(rèn)知偏差,但是在設(shè)計和實(shí)際產(chǎn)品當(dāng)中運(yùn)用,則常常呈現(xiàn)出極為驚艷的效果。

對于這些心理學(xué)效應(yīng)和認(rèn)知偏差,設(shè)計人員需要在自身進(jìn)行決策時候盡量回避,避之不及確實(shí)會面臨車毀人亡的局面;在設(shè)計過程中,可以巧妙地將這些因素納入到考慮當(dāng)中來,因?yàn)樗鼈兺瑯涌梢杂绊懹脩?,成為撬動產(chǎn)品打開局面的重要的契機(jī)。

幸存者偏差

幸存者偏差(Survivorship bias)雖然被稱為認(rèn)知偏差,但是實(shí)際上,它更接近于是一種邏輯謬誤下產(chǎn)生的一種錯誤認(rèn)知。幸存者偏差指的是人往往會注意到某種經(jīng)過篩選之后所產(chǎn)生的結(jié)果,同時忽略了這個篩選的過程,而被忽略的過程往往包含著關(guān)鍵性的信息。

讀書無用論是一種最常見的幸存者偏差。讀書無用論中最多的說法是XX并沒有好好上學(xué)但是照樣掙大錢了,而XX努力讀書反而混得并不好。

這些個案并不涉及到具體數(shù)據(jù),從數(shù)據(jù)角度上來說,也不難解釋這種“主觀感受”的成因。根據(jù)第六次全國人口普查,大專及以上學(xué)歷的人口僅占總?cè)丝诘?.7%,高學(xué)歷者落魄更容易受到媒體的關(guān)注,而低學(xué)歷中的成功者也常常能夠吸引普通人的目光,即使低學(xué)歷人口中涌現(xiàn)的成功者的比例遠(yuǎn)低于高學(xué)歷者,由于基數(shù)差異,這個數(shù)值對比也是相當(dāng)可觀的。正是因?yàn)楹雎粤藬?shù)據(jù)中沉默的大多數(shù),讀書無用論這種錯誤的觀點(diǎn)才“得以成立”。

槍擊案中的幸存者大多傷的是手和腳,那么是否要加強(qiáng)手腳的保護(hù)呢?實(shí)際的情況上,在軀干和頭部中槍的人,大都沒有挺過來,相反更加需要保護(hù)是軀干和頭部。就像能活著回來的戰(zhàn)斗機(jī)中彈的通常都是翅膀和機(jī)身,因?yàn)橐嬷袕椀拇蠖家呀?jīng)犧牲了。這個案例也許能夠幫你更好地理解幸存者偏差。

對于事件發(fā)展過程中篩選機(jī)制的忽視,容易讓人產(chǎn)生錯誤的結(jié)論,從而導(dǎo)向錯誤的方向,在設(shè)計決策過程中,出現(xiàn)這樣的過程中,極有可能是致命的。

在需求分析和調(diào)研過程中,如果忽視了幸存者偏差,很有可能搜集到的數(shù)據(jù),體現(xiàn)的僅僅知識少部分用戶的需求和想法,最終將偽需求和小眾需求當(dāng)作主要需求來作為設(shè)計易于,則可能讓產(chǎn)品從一開始就走向萬劫不復(fù)。

在搜集產(chǎn)品的用戶反饋信息的時候,也很容易遭遇幸存者偏差。絕大多數(shù)的用戶在正常使用產(chǎn)品的時候,如果沒有合理的觸發(fā)機(jī)制,或者產(chǎn)品沒有特別突出的特點(diǎn)的情況下,很少會主動“好評”,相反,遭遇問題的用戶則更傾向于主動吐槽并分享糟糕的體驗(yàn)和問題,這也很容易造成“這個產(chǎn)品哪哪兒都是問題”的錯覺。

基本歸因偏差

基本歸因偏差這個名詞同樣源自于心理學(xué),比較學(xué)術(shù)表述是“對他人行為進(jìn)行歸因的時候,往往會傾向于把別人的行為歸因?yàn)槠鋬?nèi)在因素,而低估了情境因素的影響,而對于自身的行為歸因的時候,則傾向于把自己的行為歸因?yàn)橥庠谝蛩?,而忽略自身因素的影響”,基本歸因偏差的含義表述可能有點(diǎn)拗口,但是并不難理解。

基本歸因偏差是一種重要的人類心理防御機(jī)制,是人類進(jìn)化過程中所產(chǎn)生的一種局限性的思維定勢。和復(fù)雜多樣的環(huán)境因素相比,行為者本身的問題是更容易被發(fā)現(xiàn)的,所以觀察者在觀察行為者的時候,諸如社會環(huán)境、社會角色、情景壓力等外部因素更難以引起注意,將問題更多歸因于行為者本身的行為舉動和個人內(nèi)因。比如,當(dāng)看到某個人生活拮據(jù)的時候,會簡單歸因于他不夠勤奮等等。類似的,在面對生活中的諸多不順的時候,直接歸因于“水逆”而很少會仔細(xì)思考是否有自身的原因。當(dāng)事人和觀察者對于事件的歸因不同,爭議和問題往往因此而起。

對于UX設(shè)計師而言,基本歸因偏差是矛盾和問題的常見的來源,而且這種認(rèn)知偏差存在于用戶也同樣存在于設(shè)計師本身。無論是面對設(shè)計問題,還是做調(diào)研,進(jìn)行測試,涉及到多方面影響因素的時候,基本歸因偏差都會對設(shè)計方案、設(shè)計決策產(chǎn)生影響。

這需要設(shè)計師能夠清楚地分辨“我的觀點(diǎn)”和“我的行為”,能夠真正將自己從自己所處的立場、角色、職能上抽離出來,復(fù)盤整個局面,首先接納全部的狀況和現(xiàn)實(shí),包括他人的想法、觀點(diǎn),先不去判斷對錯,而是先接納所有的狀況和全部的元素,明白事物的動態(tài)變化過程,不再單一地去判斷,任何一個視角必然會存在一個立場,它們是當(dāng)前事物諸多層面中的一方面而已。

面對復(fù)雜多變,但是因果清晰、逐步成長變化的事物,用動態(tài)而全面的思維方式來看待,才能真正看清楚事物變化的軌跡,更有針對性地設(shè)計,作出合理的決策。

后視偏見

后視偏見(Hindsight Bias)則是另外一種常見的認(rèn)知偏差,它指的是人在事情發(fā)生以后覺得自己在事情發(fā)生之前就已經(jīng)預(yù)測到結(jié)果了,實(shí)際上,他們并不如自己想象的那樣能夠準(zhǔn)確的進(jìn)行預(yù)測。這種行為在觀察者眼中常常會被稱為“馬后炮”。

后視偏見在很多人身上都存在,人的主觀性和記憶本身會造成這種偏差。對于設(shè)計工作者而言,厚實(shí)偏差的存在無疑是會帶來負(fù)面影響的。后視偏見會讓人沉迷于“我早就預(yù)料到了”這種感受當(dāng)中,相應(yīng)的無法真正從事件中真正汲取到有用的經(jīng)驗(yàn),也難于使用公平的眼光來評判客觀事物和他人,主觀上也很容易選擇性忽略許多客觀條件和事實(shí)。

后視偏見確實(shí)會給人帶來快感,相應(yīng)的,會在工作中影響決策的正確性和公平性,從而帶來潛在風(fēng)險。糾正后視偏見的方法并不復(fù)雜,在確知事情結(jié)果之前,記錄下自己的想法,事后做驗(yàn)證,并統(tǒng)計成功與失敗的數(shù)據(jù)。

事件的結(jié)果并非是最好的判斷因素。在調(diào)整好認(rèn)知之后,對于事件和情況的過程和相關(guān)因素進(jìn)行相對全面的衡量,盡可能少的摻雜主觀情緒來進(jìn)行分析,這樣的決策的有效性會更強(qiáng)。

曝光效應(yīng)

曝光效應(yīng)(the exposure effect)也被稱為多看效應(yīng)(和多看這款應(yīng)用并沒有關(guān)系),接觸效應(yīng)。曝光效應(yīng)本身的描述也不復(fù)雜:人會更加偏好自己熟悉的事物。在社會心理學(xué)領(lǐng)域,曝光效應(yīng)的另外一個稱謂是“熟悉定律”,這可能更好理解。

自己總傾向于購買自己熟悉的品牌的產(chǎn)品,談戀愛的時候總會有繞不開的老同學(xué)和老朋友,這些都是曝光效應(yīng)之下的人類認(rèn)知偏差。我們常常說的“一旦接受了這個設(shè)定還挺帶感的”就是對于這一效應(yīng)的真實(shí)側(cè)寫。

曝光效應(yīng)在廣告行業(yè)、產(chǎn)品營銷和社交媒體有著天然的親和力,對于營銷人員、運(yùn)營人員、品牌設(shè)計師和UX設(shè)計師而言,這一效應(yīng)的活學(xué)活用是非常有必要的。

不過曝光效應(yīng)本身并非是無條件的,相反它和產(chǎn)品屬性、品牌設(shè)計、企業(yè)形象以及運(yùn)營策略有著極為緊密的關(guān)聯(lián)。

曝光效應(yīng)在許多不同的社會實(shí)驗(yàn)當(dāng)中呈現(xiàn)出一種不穩(wěn)定性,可能是因?yàn)橄嚓P(guān)的影響因素多而復(fù)雜。有的研究表明,即使產(chǎn)品和服務(wù)曝光過程中絕大多數(shù)的內(nèi)容是正面的,公司和企業(yè)本身的名氣高低和品牌形象,同樣會影響曝光效應(yīng)的高低。

曝光效應(yīng)在發(fā)揮的過程中,即使曝光的內(nèi)容全部是正面的,對于用戶的影響也會逐步呈現(xiàn)出一種矛盾性,也就是用戶會對產(chǎn)品或者服務(wù)產(chǎn)生正面聯(lián)想的同時,還會產(chǎn)生不利的、負(fù)面的感受。

曝光效應(yīng)發(fā)揮效果最好的時段,始終是絕大多數(shù)用戶對于產(chǎn)品認(rèn)知不足的階段,這個時候曝光效應(yīng)會最大化的對用戶產(chǎn)生影響。

值得特別注意的是,一開始就讓人覺得厭惡和不適的產(chǎn)品是無法產(chǎn)生正面的曝光效應(yīng)的,如果一開始存在沖突,曝光效應(yīng)只會加深誤會和沖突。過量的曝光一定會帶來厭惡,由于復(fù)雜而大量不可控的影響因素,甚至?xí)?dǎo)致失控式的崩盤。

對于UX設(shè)計師和產(chǎn)品的策劃和運(yùn)營者而言,在合適時機(jī)加大產(chǎn)品的正面曝光是有效度最高的策略。深入了解曝光效應(yīng),才會明白何時放,而何時收。

可得性偏差

可得性偏差(Availability Heuristic)也是一種常見的認(rèn)知偏差,它是啟發(fā)式偏差的一種,人們往往會根據(jù)自己認(rèn)知上的易得性來判斷事情的可能性,甚至于會根據(jù)自己看到和聽到的只言片語來做決策,而不是根據(jù)統(tǒng)計學(xué)數(shù)據(jù)和系統(tǒng)化的知識來做判斷。

可得性偏差同樣是一種廣泛存在的認(rèn)知偏差,用戶認(rèn)為自己熟悉的、更容易獲得的信息在復(fù)雜的系統(tǒng)中發(fā)揮著更大的作用,主觀上忽略其他的部分??傻眯云詈褪煜ざ桑ㄒ簿褪瞧毓庑?yīng))有些許共通的地方。

可得性偏差在金融領(lǐng)域有著巨大的影響,許多準(zhǔn)備上市的企業(yè)會在上市前夕吸引大量的新聞報道,讓投資者在信息的狂轟濫炸之下不知不覺地去關(guān)心,無意識地去了解,并最終購買這支股票拉高股價。這種策略就是借助投資者的可得性偏差來實(shí)現(xiàn)的。下面是谷歌搜索關(guān)鍵詞阿里巴巴的頻率和阿里巴巴的股價變化情況,兩者呈現(xiàn)出一種明顯的關(guān)聯(lián)性。

可得性偏差的廣泛存在,使得設(shè)計師甚至可以在自己的產(chǎn)品中借助有有意識的設(shè)計,來引導(dǎo)用戶的行為。作為設(shè)計師本身而言,可得性偏差同樣是會影響到設(shè)計決策,因?yàn)榭傻眯云钔瑯訒绊懏a(chǎn)品設(shè)計中的設(shè)計決策的走向。消除可得性偏差的方法也不難,需要設(shè)計者不要被已知的信息和容易想起來的信息所左右,而是盡量深入地從多個角度來考慮問題,跳出固有的思維定勢,多角度看待問題,作出合理的決策。

錨定效應(yīng)

錨定效應(yīng)也被稱為沉錨效應(yīng),它一樣是一個聽起來高大上但是含義并不復(fù)雜的概念,它指的是人們對某人某事作出判斷的時候,容易受到第一印象或者第一信息的影響和支配。這種現(xiàn)象就像船只被錨固定在特定位置而無法移動,因此而得名。

人們在做判斷的時候,往往會受到第一印象和首個接收到的信息的影響。就像鳥類會將第一個看到的生物視之為自己的母親一樣,人們往往會借助第一印象來作為后續(xù)判斷一個事物的參考標(biāo)準(zhǔn),甚至在人際交往中都是金科玉律。即使是沒有刻意地去參考第一信息,人們也會在潛意識當(dāng)中,重視第一次獲得的數(shù)據(jù)。

錨定效應(yīng)的另外一個層面是對比,當(dāng)擁有了錨定的參考之后,用戶在后續(xù)會以此為基準(zhǔn)進(jìn)行對比。對比并不存在絕對意義上的好壞,但是在不同的基準(zhǔn)之下,或者說參考的基點(diǎn)不同的情況下,發(fā)揮的作用其實(shí)是截然不同的。

舉個簡單的例子,粥鋪的服務(wù)員問客人“加一個雞蛋還是加兩個雞蛋”比“要不要加雞蛋”所產(chǎn)生的銷售額高出不少,因?yàn)榍罢邥说男睦砘c(diǎn)是“要加蛋”,而后一種問法,則讓客人先思考“要不加蛋”,前者的轉(zhuǎn)化率自然更高。

正是因?yàn)橄热霝橹鬟@種心理現(xiàn)象大量影響著用戶的決策,使得市場競爭中,許多企業(yè)和產(chǎn)品都不得不去力圖爭個第一,贏得主導(dǎo)權(quán)。

iPhone X的劉海屏對于手機(jī)市場有多大影響想必大家有目共睹。而后續(xù)的藍(lán)綠兩廠的升降式攝像頭設(shè)計和“真·全面屏”也因?yàn)槠渫怀鲂院蛷?qiáng)大的“第一印象”的構(gòu)建,而贏得了無數(shù)贊譽(yù)。

但是靜下心來想想,開機(jī)解鎖還要等待攝像頭升起,好像還是一個蠻奇怪的事情??墒亲钤绲摹罢妗と嫫痢贝_實(shí)夠驚艷。

免費(fèi)認(rèn)知偏差

優(yōu)惠促銷是各種產(chǎn)品銷售中最常用到的一種策略,而在花樣迭出的促銷手段當(dāng)中,有為數(shù)不多的集中手段,呈現(xiàn)出令人驚艷的效果。

免費(fèi)的贈品和滿額減免就是這其中的典型。購買產(chǎn)品A,贈送一款B,這種贈品策略的玩法可以說是效果極佳,早年間阿芙精油聲名鵲起的階段,其中最令用戶欲罷不能的,就是他們的“贈品”。用戶每一次購買精油產(chǎn)品的時候,阿芙的團(tuán)隊(duì)會隨之一起發(fā)出精油的入門口袋書以及多達(dá)五六種精心挑選的精油試用裝,這種體貼且讓人覺得“狠賺一筆”的心理感受,使得許多新用戶迅速轉(zhuǎn)為穩(wěn)定客戶。

置于滿多少減多少,則同樣是一種成功的促銷策略。各種電商平臺和購物節(jié)都會采用花樣繁多的滿減服務(wù),相應(yīng)的,用戶在這種服務(wù)之下,總?cè)滩蛔 皽悊巍薄F叫亩?,真?shí)的情況是,用戶購買了自己真正需要的商品,以及一系列為了湊單而同時購買的非必須商品,對于商家和平臺而言,這種策略很好的拉高了銷量,也減少了許多商品的庫存,而用戶也感覺自己賺到了,皆大歡喜。

至于“包郵”,我就不贅述了。這個效果同樣非常突出。

相比之下,打折促銷所產(chǎn)生的效果,好像就沒有那么顯著和“暴力”了。歸根結(jié)底,問題是出在“免費(fèi)”的認(rèn)知偏差之上。對于用戶而言,無論是贈品、滿減還是包郵,本質(zhì)上都會讓用戶迅速地在大腦中形成一種“免費(fèi)獲得某種東西”的感覺,贈品對應(yīng)的是免費(fèi)的物品,滿減對應(yīng)的是免費(fèi)的現(xiàn)金回饋,包郵則是免費(fèi)的郵寄服務(wù)。

心理學(xué)家和行為學(xué)家通過大量的實(shí)驗(yàn)驗(yàn)證了免費(fèi)確實(shí)和折扣等其他的促銷策略有著本質(zhì)的差別,它所帶來的非理性行為要明顯太多,免費(fèi)的吸引力無與倫比,說是認(rèn)知偏差毫不為過。

你一定特別想點(diǎn)擊上面的圖片免費(fèi)下載素材。不好意思它只是個圖片。

人類本能地懼怕?lián)p失,選擇免費(fèi)的贈品不會有損失,而相比之下選額其他則會讓人在潛意識中產(chǎn)生風(fēng)險感,可能會蒙受損失。這樣一來,免費(fèi)的贈品在人心中的價值就開始高于實(shí)際價值,隨之而來的就是非理性消費(fèi)。

在設(shè)計的過程中,想要讓免費(fèi)的認(rèn)知偏差發(fā)揮效果,讓人快速地感知到這種“免費(fèi)獲得”的感受,應(yīng)當(dāng)是明顯的,否則很難快速地觸發(fā)非理性的反饋。

結(jié)語

人類先天的生物性無處不在,我們自詡的理智在現(xiàn)實(shí)生活中發(fā)揮的作用并沒有我們想象中那么多,無處不在的各種認(rèn)知偏差主導(dǎo)了太多的

如何知己知彼,做好視覺競品分析?

博博

如何知己知彼,做好視覺競品分析?

美麗的UI 2018-02-05 18:08:13

競品分析是設(shè)計師了解產(chǎn)品的一個重要途徑,通過對競品分析,設(shè)計師在了解競品的特點(diǎn)后,能夠更好地做出符合當(dāng)前產(chǎn)品的設(shè)計方案。

為什么要做競品分析?

經(jīng)常有設(shè)計師朋友問如何做競品分析,做分析最主要目標(biāo)是通過競品可以讓設(shè)計師了解產(chǎn)品的一個重要途徑,也就是常說的設(shè)計思維,通過對競爭對手產(chǎn)品檢測,多觀察了解對方的產(chǎn)品特點(diǎn),然后在自己業(yè)務(wù)場景下提供符合當(dāng)前產(chǎn)品解決方案。

當(dāng)對競品了解足夠深的前提下,產(chǎn)出的設(shè)計方案自然而然會比自己想的正確可能性更大,因?yàn)槟憧吹淖銐蚨嗔?,心中對各個業(yè)務(wù)模塊,視覺樣式能如數(shù)家珍,自然而然設(shè)計的正確性能提高,但是很多設(shè)計師做不到這一點(diǎn),比如誰能默寫出微信4個主導(dǎo)航里面的每個功能結(jié)構(gòu)?包括我自己都未必都背出來。

所以需要做競品分析幫助我們了解產(chǎn)品功能,了解設(shè)計可能性,另外能隨時知己知彼,在設(shè)計時做出正確設(shè)計決策。

如何知己知彼,做好視覺競品分析?

競品分析的維度? 

競品分析有兩個緯度,一個是功能交互緯度,另一個視覺緯度。今天只講視覺維度,在APP中就是:色彩、UIkit、按鈕、圖文關(guān)系、表單、icon、導(dǎo)航、彈窗等,也可以理解為形、色、字、構(gòu)、質(zhì)去分析。

  • 形:品牌符號、圖形 

  • 色:顏色、對比色、品牌色、飽和度等

  • 字:頁面中字體、不同字體感受是不一樣的

  • 構(gòu):結(jié)構(gòu),界面在結(jié)構(gòu)是居中,還是偏左或偏右

  • 質(zhì):質(zhì)感,扁平、3D、擬物化等

以上是構(gòu)建設(shè)計的所有元素,任何設(shè)計都離不開這些,那么在看競品的時候同理也是圍繞這些點(diǎn)去分析??梢苑治鰡蝹€APP,也可以橫向?qū)Ρ确治觥?

競品的選擇 

以電商為例,需要研究全球TOP如ebay、亞馬遜、韓國的SSG和R9CM、以及國內(nèi)垂直領(lǐng)域獨(dú)角獸,和一些設(shè)計優(yōu)秀的應(yīng)用,如Airbnb、Pinterest、Instagram等。

跨領(lǐng)域分析,比如想做圖文排版分析,那么除了競品外,還需要關(guān)注新聞領(lǐng)域的,比如Yahoo News、網(wǎng)易新聞等,這些APP的圖文板式是做的最好的,值得去學(xué)習(xí)。

下面我圍繞一個簡單技法,頁面中分隔來做個分析,梳理出業(yè)內(nèi)通用技法特點(diǎn),定出設(shè)計決策依據(jù)。

1.灰色描邊強(qiáng)調(diào)分隔

白色或淺色商品圖四周添加1像素灰色描邊強(qiáng)調(diào)分隔

2.頁面留白分隔

足夠大的留白來強(qiáng)調(diào)圖片和圖片之間關(guān)系

3.灰色透明蒙版分隔

白色商品圖上疊加3-5%透明度黑色,形成圖片輪廓

4.結(jié)合設(shè)計趨勢

設(shè)計更輕量化,簡潔,利用留白來強(qiáng)調(diào)圖片和圖片之間關(guān)系

如何知己知彼,做好視覺競品分析?

設(shè)計策略產(chǎn)出 

  • 設(shè)計技法1:根據(jù)不同場景,在需要明確頁面風(fēng)格,達(dá)到頁面統(tǒng)一效果,在白色商品上增加灰色透明蒙版,形成頁面柵格對齊。

  • 設(shè)計技法2:內(nèi)容左右留白的展示圖片相關(guān)處理:商品圖片疊加在底層背景。

▲ 上周邊留出2px邊框,解決白色背景的商品顯示問題

  • 設(shè)計技法3:根據(jù)具有可表現(xiàn)的業(yè)務(wù),圖片個性化效果,可以增加漸變效果來凸顯業(yè)務(wù)特殊性。

▲ 在原圖上增加一層彩色蒙版,樣式疊加為--線性光,增強(qiáng)圖片特殊場景個性化

通過分析我們可以得出新的設(shè)計規(guī)范,以及不同場景處理分隔的技法,可以根據(jù)場景去得出設(shè)計的確定性,讓你的設(shè)計更加科學(xué)。

除了分析技法,其實(shí)分析產(chǎn)品,分析交互,分析功能大同小異,重點(diǎn)是要掌握這種分析路徑,讓我們更加了解產(chǎn)品!

看似簡單的喜馬拉雅FM主播等級體系,是如何做改版設(shè)計的?

資深UI設(shè)計者

喜馬拉雅主播等級體系算是喜馬各業(yè)務(wù)線中資歷比較老的一員了,主要服務(wù)于主播用戶查看自身等級,以及特權(quán)享受,這次整理了近期關(guān)于主播等級線現(xiàn)存問題的改版。

一、產(chǎn)品背景

1. 產(chǎn)品層面

這次迭代的目的是:

  • 把流量分發(fā)的核心參考點(diǎn)「專輯質(zhì)量分」作為主播等級主要評判標(biāo)準(zhǔn)之一。
  • 讓主播能夠清楚的認(rèn)知自己在平臺的地位/影響力。
  • 給主播升級目標(biāo),促進(jìn)升級。

通過溝通我們知道產(chǎn)品希望通過這次迭代來引起用戶注意,增加主播用戶和產(chǎn)品之間的互動,而提升頁面日活以及次日留存。

2. 設(shè)計層面

設(shè)計師的基本出發(fā)點(diǎn)是需要設(shè)計出不低于競品且更加精致的稿件,能夠更加有效傳達(dá)品牌理念和視覺延展性,進(jìn)而理解產(chǎn)品與競品之間的差異化,增強(qiáng)用戶認(rèn)知。

3. 用戶層面

此次迭代需要考慮到主播用戶的教育成本和接受程度,能否讓用戶感受到產(chǎn)品的差異性,能否讓用戶在第一時間看到我們希望用戶關(guān)注的東西。

二、設(shè)計前期分析

通過溝通我們明確了產(chǎn)品需求點(diǎn),接下來需要針對需求進(jìn)行分析,我們從競品視覺分析、設(shè)計關(guān)鍵詞提煉兩點(diǎn)來進(jìn)行設(shè)計決策。

1. 視覺競品分析

針對性的通過對 VIP、等級等屬性的頁面進(jìn)行視覺收集。

2. 設(shè)計關(guān)鍵詞提煉

主播等級頁面的服務(wù)理念是為主播用戶提供更加清晰的等級提升指引。區(qū)別于喜馬其他等級線,整個流程中除了滿足等級查看的基本需求和特權(quán)展示的標(biāo)準(zhǔn)化流程,更多的差異是對目標(biāo)用戶需求的洞察和挖掘,我們從目標(biāo)用戶需求定義了主播等級線設(shè)計差異化的關(guān)鍵詞。

三、設(shè)計執(zhí)行

通過與產(chǎn)品溝通需求點(diǎn),我們了解到視覺層面需要滿足或改進(jìn)的內(nèi)容;通過視覺競品分析我們獲取產(chǎn)品未來的設(shè)計趨勢以及具有前瞻性的設(shè)計概念;接下來在稿件輸出的過程中我們就可以打散原有頁面的信息層級并進(jìn)行重新分組,分析所有層級信息字段的屬性,然后整理出不可變動信息、可變動信息、可增加的信息、可變的布局樣式,不斷嘗試重組信息結(jié)構(gòu),找出合適的視覺決策點(diǎn)。

針對設(shè)計稿件,開展設(shè)計內(nèi)部視覺評審,針對視覺稿件還邀請了產(chǎn)品以及交互進(jìn)行意見收集,最終選擇方案一作為主播等級迭代方案。

四、業(yè)務(wù)線視覺延展

在主頁面色彩偏好、功能布局定稿之后,為了在關(guān)鍵轉(zhuǎn)化點(diǎn)給用戶帶來統(tǒng)一有趣的視覺體驗(yàn),以主頁面視覺為參考以動效、ICON、插畫三個維度進(jìn)行設(shè)計延展,保證與競品的品牌差異性以及設(shè)計的統(tǒng)一性。

1. 特權(quán)ICON

為了達(dá)到設(shè)計稿件色彩傾向、品牌差異設(shè)計貫穿用戶每一個關(guān)鍵轉(zhuǎn)化點(diǎn)保持特權(quán) ICON 視覺語言統(tǒng)一,并增加趣味性拉開與競品的差異,提升用戶點(diǎn)擊轉(zhuǎn)化率。

2. 插畫延伸

針對產(chǎn)品等級攻略個性化需求的訴求點(diǎn),圍繞等級提升的不同要求繪制場景化插畫,并保持視覺層面的輸出配套,通過十字交叉分析有針對性的進(jìn)行精準(zhǔn)推送。

3. 動效延伸

圍繞溫暖、成就感兩個關(guān)鍵進(jìn)行延展,在用戶點(diǎn)擊等級主頁入口的第一時間感受到等級提升的成就感以及統(tǒng)一色彩傾向帶來的重視感,通過特權(quán)展示達(dá)到所見即所得的直觀感受。

結(jié)語

設(shè)計并非一念間的靈感迸發(fā),設(shè)計師對整個業(yè)務(wù)需要有清晰的理解,明白產(chǎn)品定位并通過前期設(shè)計分析奠定設(shè)計理念而進(jìn)行設(shè)計產(chǎn)出。

設(shè)計是一個逐漸嶄露頭角的過程,而我理解的設(shè)計師則應(yīng)該是快樂的戰(zhàn)士而不是輕言放棄的賭徒,還是那句話:每個人都有屬于自己的一片森林。一點(diǎn)工作總結(jié)希望對大家有多裨益,同時歡迎各位大佬加入喜馬拉雅FM。

如何成為有交互和視覺思維的UI 設(shè)計師?

資深UI設(shè)計者

UI 在拿到產(chǎn)品原型時該如何思考?如何著手設(shè)計界面?最近跟一些設(shè)計師朋友交流 UI 設(shè)計方案,總結(jié)了一下在方案優(yōu)化的思考過程,在這里分享給大家。

一、兩道思維

很多 UI 拿到一個頁面原型的時候,就立馬打開各大設(shè)計網(wǎng)站找參考,然后照著參考頁面上的效果,生搬硬套到原型上,這只是達(dá)到了單純美化頁面的效果。
那么拿到原型后應(yīng)該帶著怎樣的思維來進(jìn)行思考呢?

第一道思維:交互思維

先了解頁面實(shí)現(xiàn)什么功能,功能的交互操作流程是怎樣的,也就是說用戶操作這個頁面上的功能時,用戶的行為路徑是怎樣的。

第二道思維:視覺思維

了解完功能、交互后,提取原型中視覺組成元素,細(xì)分歸類,每一類應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計。

然后交互與視覺一同結(jié)合來設(shè)計界面。

二、思維應(yīng)用

結(jié)合案例我們來看下兩道思維是如何進(jìn)行的。

第一道思維:交互思維

了解功能交互流程。

根據(jù)實(shí)例原型分析出用戶行為路徑:

用戶行為路徑:

注意點(diǎn):

  • 用戶行為路徑的獲取,一定要跟產(chǎn)品經(jīng)理、交互設(shè)計師進(jìn)行溝通確認(rèn)清楚。
  • 用戶行為路徑某些步驟中,也有先后之分,比如第1步中,用戶輸入了賬戶地址后,才會有賬戶的相關(guān)數(shù)據(jù)顯示。
  • 用戶行為路徑可以支撐信息內(nèi)容進(jìn)行歸類分組。
第二道思維:視覺思維

提取視覺組成元素。

視覺元素:

注意點(diǎn):

  • 提取視覺組件元素盡量詳細(xì)歸類。
  • 如有視覺規(guī)范,視覺組件元素風(fēng)格應(yīng)用請遵循視覺規(guī)范。
  • 如無視覺規(guī)范,同類視覺組件元素應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計。

三、檢驗(yàn)方案

我們帶著兩道思維來檢驗(yàn)一下這位設(shè)計師輸出的方案:

問題1:交互層級

問題所在:

數(shù)據(jù)顯示在前,輸入在后,交互操作層級有點(diǎn)混亂。

問題截圖:

問題解決:

用戶行為路徑中,第1步有個先后順序,先輸入地址,后顯示數(shù)據(jù),在進(jìn)行信息內(nèi)容布局設(shè)計的時候同樣需要有先后順序,所以交互操作層級一定程度上影響著布局排版。

問題2:步驟關(guān)聯(lián)

問題所在:

「批量轉(zhuǎn)賬」按鈕歸類到了第1步的信息模塊中,交互操作邏輯有點(diǎn)不通暢。

問題截圖:

解決方案:

用戶行為路徑中,用戶核心費(fèi)用信息后,最有可能的行為就是點(diǎn)擊「批量轉(zhuǎn)賬」按鈕,所以「批量轉(zhuǎn)賬」按鈕與轉(zhuǎn)賬費(fèi)用信息的操作關(guān)聯(lián)性比較大,應(yīng)該在同一模塊里會更符合交互操作邏輯。

問題3:顏色應(yīng)用

問題所在:

主色、點(diǎn)綴色、輔助色各自的應(yīng)用范圍沒有規(guī)則,顏色應(yīng)用混亂。

問題截圖:

問題解決:

一個頁面或者項(xiàng)目中,各種顏色的應(yīng)用范圍需要有一定規(guī)范,文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對應(yīng)的使用規(guī)則。

問題4:輸入控件

問題所在:

輸入類組件樣式存在多樣性,同樣是輸入框,有多種樣式,會造成用戶交互操作上的認(rèn)知有誤。

問題截圖:

問題解決:

一個頁面或者項(xiàng)目中,輸入類組件樣式應(yīng)用統(tǒng)一性原則,保持視覺風(fēng)格一致,從而減少用戶操作認(rèn)知偏差。

問題5:按鈕樣式

問題所在:

按鈕樣式應(yīng)用到不具備按鈕點(diǎn)擊屬性的對象上,用戶會認(rèn)為也是可點(diǎn)擊,會造成用戶交互操作上的認(rèn)知有誤。

問題截圖:

問題解決:

一個頁面或者項(xiàng)目中,不具備按鈕點(diǎn)擊屬性的元素盡量不要套用按鈕樣式,減少用戶操作認(rèn)知偏差。

舉個例子:人形的稻草套上人的衣服,成功了欺騙了人們,造成了認(rèn)知偏差。

問題6:信息展示

問題所在:

同類信息內(nèi)容的展示存在多樣式,傳達(dá)過程中加重了用戶的認(rèn)知負(fù)擔(dān)。

問題截圖:

問題解決:

一個頁面或者項(xiàng)目中,同類信息內(nèi)容的展示應(yīng)用相似性原則保持視覺風(fēng)格一致,因?yàn)橄嗨菩缘牟季挚梢愿拥貍鬟_(dá)信息。

舉個例子:電商頁面,金額信息展示;理財頁面,收益信息的展示;都是應(yīng)用相似性的布局,即統(tǒng)一又地傳達(dá)信息。

問題7:圖標(biāo)風(fēng)格

問題所在:

圖標(biāo)風(fēng)格不一致,圖形反白風(fēng)格,立體風(fēng)格,線性風(fēng)格。

問題截圖:

問題解決:

根據(jù)產(chǎn)品的特性,建議統(tǒng)一的圖標(biāo)風(fēng)格,選擇線性、面性、漸變、立體等風(fēng)格。

問題八:對齊間隔

問題所在:

頁面元素的對齊、間隔沒有規(guī)律,整體視覺顯得松散,不嚴(yán)謹(jǐn)。

問題截圖:

問題解決:

可以利用柵格系統(tǒng),把頁面信息內(nèi)容規(guī)整起來。

四、優(yōu)化方案

根據(jù)發(fā)現(xiàn)的問題,我們來看一下優(yōu)化后的設(shè)計方案:

優(yōu)化1:交互路徑

根據(jù)用戶行為路徑,將相關(guān)聯(lián)的信息歸類到一個模塊,每個步驟劃分到一個模塊,相關(guān)聯(lián)的步驟合并到一個模塊,模塊內(nèi)完成各自的操作展示任務(wù),模塊之間信息內(nèi)容互不干擾,但從結(jié)構(gòu)布局又能夠形成符合交互操作邏輯。

優(yōu)化2:顏色規(guī)范

規(guī)范顏色,配色的方法在這里不做深入討論,這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。

優(yōu)化3:輸入控件

對輸入類控件的樣式進(jìn)行了統(tǒng)一,讓用戶從視覺上就能夠清楚地分辨出哪些是可以進(jìn)行輸入操作的,從而減少用戶對交互操作上的認(rèn)知成本,提高信息輸入效率。

輸入控件進(jìn)行交互時,要有交互狀態(tài)反饋,默認(rèn)狀態(tài)、選中狀態(tài)、錯誤狀態(tài)。視情況而定,可以增加鼠標(biāo)移上狀態(tài)和不可輸入狀態(tài)。

狀態(tài)變化時的顏色應(yīng)用,可以通過變換色相的透明度來保持色彩的一致性。

優(yōu)化4:按鈕規(guī)范

對按鈕進(jìn)行了分類,分為常規(guī)按鈕、圖標(biāo)按鈕、文字按鈕;對按鈕樣式用顏色進(jìn)行了統(tǒng)一;按鈕要有交互狀態(tài)反饋,不可點(diǎn)擊狀態(tài)、可點(diǎn)擊狀態(tài)、鼠標(biāo)移上狀態(tài)、鼠標(biāo)按下。

狀態(tài)變化時的顏色應(yīng)用,可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。

優(yōu)化5:信息展示

對信息內(nèi)容應(yīng)用相似性原則進(jìn)行了排版的統(tǒng)一處理,每個小類信息的標(biāo)題與內(nèi)容采用統(tǒng)一排版格式,然后重復(fù)應(yīng)用,有助于提高信息獲取效率。

優(yōu)化6:圖標(biāo)風(fēng)格

這里的圖標(biāo)應(yīng)用于功能性圖標(biāo),統(tǒng)一采用線性圓角風(fēng)格。功能性圖標(biāo)需要注意圖標(biāo)的形狀要能夠正確有效地傳達(dá)出功能的含義。

優(yōu)化7:對齊間隔

應(yīng)用柵格系統(tǒng)對視覺元素之間的對齊、間隔進(jìn)行調(diào)整,使頁面視覺更加嚴(yán)謹(jǐn),頁面信息更容易閱讀。

五、總結(jié)

交互思維

了解頁面中的功能交互流程,梳理用戶操作行為路徑,可以對行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù),最終有助于頁面信息內(nèi)容的排版布局。

視覺思維

提取視覺組成元素,對顏色、文字、控件、圖標(biāo)等每一類應(yīng)用統(tǒng)一性原則進(jìn)行規(guī)范設(shè)計,再通過視覺元素本身相互組合,最終應(yīng)用回信息內(nèi)容上,建立規(guī)范的視覺感。

設(shè)計一個頁面,交互思維和視覺思維是互相配合的,缺一不可,最終都是為了共同去構(gòu)造符合交互操作邏輯、滿足視覺美感的界面。

我是如何從零搭建起一款健身O2O產(chǎn)品的?

博博

我是如何從零搭建起一款健身O2O產(chǎn)品的?

人人都是產(chǎn)品經(jīng)理 2018-06-17 18:24:59

本文作者講述的是他如何從零搭建起一款健身O2O產(chǎn)品的?一起來文中看看~

我是如何從零搭建起一款健身O2O產(chǎn)品的?

我在年初參與到“SHAPE”這款健身產(chǎn)品的研發(fā)中,也算是第一次以產(chǎn)品經(jīng)理的身份,從0開始負(fù)責(zé)一個產(chǎn)品的建立。

產(chǎn)品是一款O2O的智能健身連鎖店,目前產(chǎn)品已經(jīng)上線3個月,線下店鋪也已經(jīng)擴(kuò)展到第5家,正是回顧梳理的好時機(jī)~

一、項(xiàng)目/競品調(diào)研

目前在線健身產(chǎn)品做的比較大的是超級猩猩和樂刻,以下的數(shù)據(jù)分析也都是針對這兩家產(chǎn)品的。

1. 競品體驗(yàn)

我是如何從零搭建起一款健身O2O產(chǎn)品的?

(由本人親自到店體驗(yàn)課程得出的一些觀點(diǎn)和結(jié)論)

2. 競品用戶反饋

我是如何從零搭建起一款健身O2O產(chǎn)品的?

我在微博和appstore還有應(yīng)用寶都瀏覽了一些信息,反饋量不大,有價值的就更少了。后來開闊了一下思路,在大眾點(diǎn)評上找到了更多的高質(zhì)量的評論。

關(guān)于反饋的整理和分析之前寫過一篇更完整的分析文章,有興趣的童鞋可以去看看

3. 競品分析結(jié)論

基于線上產(chǎn)品線下店鋪體驗(yàn)兩個方面,去借鑒競品的優(yōu)點(diǎn)和補(bǔ)足其短板。

(1)產(chǎn)品優(yōu)化

  1. 將“約課”和“我的”作為主要的兩個tab做,產(chǎn)品結(jié)構(gòu)清晰,操作流程簡短明了。
  2. 對用戶位置和約課習(xí)慣進(jìn)行記錄,優(yōu)化課程的推薦算法。
  3. 將課程特色明確標(biāo)出,減少用戶選課困惑。
  4. 沉淀用戶運(yùn)動數(shù)據(jù),一方面可以通過用戶習(xí)慣和完成度推薦用戶更合適的課程,另一方面可以打造榮譽(yù)體系,將數(shù)據(jù)轉(zhuǎn)換為成就,甚至價值。
  5. 用戶數(shù)據(jù)變化報告,完成度/運(yùn)動量/排名,增加用戶專屬感覺。
  6. 優(yōu)秀用戶圖片的應(yīng)用(墻面裝飾/推送),讓用戶有自豪感,歸屬感。
  7. 增加評價體系,讓用戶有話語權(quán),也從另一方面對教練,場館和課程加強(qiáng)管理。

(2)實(shí)際體驗(yàn)優(yōu)化

  1. 場館的管理,包括裝修/質(zhì)感/空氣質(zhì)量,也包括衛(wèi)生情況和器材的清潔度。
  2. 課程和教練的管理,教練需要更專注,更關(guān)注學(xué)員,能盡量給出適當(dāng)?shù)闹笇?dǎo),能在高階課程中隨機(jī)應(yīng)變給出降階動作。

二、明確產(chǎn)品方向

課程上的創(chuàng)新和智能設(shè)備的應(yīng)用會成為我們與競品之間最大的區(qū)別,以此為基礎(chǔ),我們會為會員提供更好的運(yùn)動監(jiān)測,不僅為用戶提供可視化的實(shí)時運(yùn)動狀態(tài),還會將用戶數(shù)據(jù)沉淀下來,讓用戶更好地計劃運(yùn)動頻率和強(qiáng)度。

我是如何從零搭建起一款健身O2O產(chǎn)品的?我是如何從零搭建起一款健身O2O產(chǎn)品的?我是如何從零搭建起一款健身O2O產(chǎn)品的?

公眾號主要是用戶約課的載體,這是它的第一功能,因此需要突出課程預(yù)約,減短訂單查看路徑。另外,也需要展示和沉淀用戶的數(shù)據(jù),以及作為后期產(chǎn)品運(yùn)營的工具。

另一方面,為使得線上線下產(chǎn)品配合流暢,我對O2O業(yè)務(wù)邏輯進(jìn)行了梳理。

1. 用戶行為基本階段

我是如何從零搭建起一款健身O2O產(chǎn)品的?

2. 線下流程梳理

我是如何從零搭建起一款健身O2O產(chǎn)品的?

“公眾號了解/預(yù)約課程-到店體驗(yàn)課程-線下心率監(jiān)測系統(tǒng)-公眾號報告和數(shù)據(jù)沉淀”,由此完成一個用戶體驗(yàn)閉環(huán),為用戶提供流暢的健身體驗(yàn)。

另一方面,也是為用戶積累數(shù)據(jù),將后來能將身體數(shù)據(jù)變化通過可視化的形式更加直觀的展現(xiàn)給用戶,也為將后來的用戶榮譽(yù)體系打好基礎(chǔ)。

三、產(chǎn)品原型繪制/修正

我是如何從零搭建起一款健身O2O產(chǎn)品的?

(用戶端/線下APP/教練端產(chǎn)品架構(gòu)圖)

繪制完成產(chǎn)品架構(gòu)圖后,進(jìn)入具體的原型繪制和制作。

原型繪制階段把主要的兩個產(chǎn)品端制作成可操作的原型,提供給了技術(shù)和業(yè)務(wù)團(tuán)隊(duì)去試用,不斷溝通,反復(fù)驗(yàn)證業(yè)務(wù)流程和模塊。

我是如何從零搭建起一款健身O2O產(chǎn)品的?

(不方便放原型鏈接,將就看下~)

作為 Sketch 重度使用粉,必須要說 Sketch 越來越牛了,現(xiàn)在可以直接鏈接模塊和頁面,在 preview 的時候完成跳轉(zhuǎn),完美助攻前期簡單檢查頁面邏輯。

1. 原型的修正

我是如何從零搭建起一款健身O2O產(chǎn)品的?

2. 訂單調(diào)整

  • 【原稿】:訂單簡單按照課程時間從近到遠(yuǎn)依次排列。
  • 【問題】:有取消和完成的訂單混排在所有訂單中,影響用戶尋找可操作的訂單。
  • 當(dāng)用戶預(yù)約多次課程,需要即時操作的其實(shí)是離現(xiàn)在最近的課程。
  • 【修正】:取消和完成的訂單,折疊到“歷史訂單”中。排序根據(jù)上課時間距離現(xiàn)在時間,從近到遠(yuǎn)排列。未完成的訂單,顯示層級最高,根據(jù)上課時間距離現(xiàn)在,從近到遠(yuǎn)排列。

3. 分享名額流程

我是如何從零搭建起一款健身O2O產(chǎn)品的?
  • 【原稿】:公眾號支持一個用戶購買多個名額,但由于心率監(jiān)測設(shè)備綁定和報告定向推送,需要將名額對應(yīng)到具體用戶。因此需要購買多名額的用戶將名額分享給他其他來上課的朋友。
  • 【問題】:分享名額的入口不明顯,提示不強(qiáng),用戶容易忽略。文案不清晰,用戶沒有理解必須將名額分享給朋友才可以。
  • 【修正】:修改文案,強(qiáng)調(diào)必須分享名額給用戶才可以讓朋友體驗(yàn)完整的上課內(nèi)容。

購買多名額的用戶,購買完成后,增加分享提示彈框,強(qiáng)提示需要分享名額。名額未發(fā)放完的訂單,用戶進(jìn)入訂單詳情中時,分享提示彈框還會重復(fù)彈出繼續(xù)提示用戶。

4. 其他不一一列舉

  1. 原課程列表圖片為課程封面,線下同事反饋圖片并不能說明課程內(nèi)容,且很多學(xué)員非常在乎上課教練,因此將圖片替換為上課教練的頭像。
  2. 課程類型原分類為自研課程和合作課程,然而這并不是站在用戶角度的分類。為了便于用戶理解課程類型,將所有課程重新根據(jù)功能性修正為“綜合訓(xùn)練/私教小班/舞蹈/身心”。
  3. 原訂用戶到店后通過掃碼進(jìn)入簽到和綁定心率設(shè)備頁面,但實(shí)際線下前臺二維碼比較多,進(jìn)門和購買飲品都是二維碼,二維碼過多影響用戶體驗(yàn)。另外多名用戶同時到店的時候,不好掃碼。因此在訂單列表中,增加了一個“可簽到”狀態(tài),(介于未開始和已簽到之間)。該狀態(tài)可點(diǎn)擊,進(jìn)入綁定頁面。

用戶體驗(yàn)是一種過程,而不是結(jié)果

資深UI設(shè)計者

任何人都抵擋不了時間的力量,你可以斥責(zé)它的無情,也可以贊美它的給予,在這個成長的歷程中,我們尋找的不是時間給我們帶來了什么,而是這個過程中我經(jīng)歷了什么。后者,才是我們需要深思并感恩的。

與「用戶體驗(yàn)」一樣,許多人會評判一個產(chǎn)品用戶體驗(yàn)的好與差。但是「好」與「差」只是整體上的一種結(jié)論,普通人可以說這兩個字。但作為設(shè)計師,必須懂得在體驗(yàn)過程中,知曉哪里好與哪里差,更要知道為什么好為什么差。

就好像評書似的,真正讀過某本書的人,不會單純的說:「這本書太好/爛了」。他一定會有一種感悟,哪怕只是一句話。

既然是為了提升「用戶體驗(yàn)」,就得與用戶一起進(jìn)行體驗(yàn)的走查,才能有根據(jù)的進(jìn)行優(yōu)化。

一般我們會建立一種用戶體驗(yàn)路徑,其目的是為了了解用戶的動機(jī)、關(guān)注點(diǎn)和需求點(diǎn)。所以為了提升用戶體驗(yàn),就必須邀請用戶參與體驗(yàn)路徑的設(shè)計過程。

用戶在使用一款產(chǎn)品時,他們中的大多數(shù)只是為了完成某個任務(wù),所以在這個過程中,也許用戶只使用了部分功能,也可能使用了所有功能。

因此,不要將體驗(yàn)路徑的設(shè)計限制在特定的產(chǎn)品或功能服務(wù)上,要理解完整的用戶體驗(yàn)路徑,針對性的進(jìn)行走查,與用戶一起提升產(chǎn)品易用性。

一、讓用戶參與產(chǎn)品設(shè)計流程

真實(shí)的用戶體驗(yàn)路徑需要通過不同用戶的參與互動,不管是一對一的討論或焦點(diǎn)小組,都需要大量的數(shù)據(jù)才能得出真實(shí)的結(jié)論。

任何沒有基于研究報告的嘗試、假設(shè)、數(shù)據(jù),都將使它在很大程度上只是理論性的。所以我們一定要通過不同用戶的不同體驗(yàn)結(jié)論,客觀的進(jìn)行分析路徑中的哪一環(huán)可以繼續(xù)優(yōu)化。

與用戶的交流溝通是其中的關(guān)鍵,在用戶的幫助下,你很容易找到可提升的體驗(yàn)點(diǎn)。

因?yàn)?,用戶情緒的波動和心情的愉悅、滿足、懷疑、失望以及懊悔的表現(xiàn)是無法在報告中準(zhǔn)確反映出來的,所以設(shè)計師要重視這些用戶反饋,包括這些互動的場景可以使設(shè)計師產(chǎn)生共鳴,通過同理心來設(shè)計并優(yōu)化功能。

然而,沒有任何產(chǎn)品或功能服務(wù)能夠滿足過程中的所有用戶需求,所以,要深入了解每一個階段出現(xiàn)的需求點(diǎn),因?yàn)樗鼈兌紩苌霾煌囊蛩?,這使我們能夠理解產(chǎn)品如何更好的服務(wù)于用戶的生活。

同樣,沒有任何靈丹妙藥能積極地改變用戶體驗(yàn),而是通過與用戶的持續(xù)接觸。也許你會說很難進(jìn)行與用戶直接的對話,所以你通過客服回訪、用戶反饋等方式收集信息也未嘗不可。

可能到這里你還沒有完全明白其中的道理,下面我舉個例子詳細(xì)說明。

二、拆解 – 用戶體驗(yàn)之旅

讓我們來舉一個旅游平臺的例子,這個平臺是供于各種各樣的人和商務(wù)旅行者使用的,其中包括了航班、酒店、出租車租賃等在內(nèi)的度假套餐。

為了讓各位深入了解體驗(yàn)路徑,以及更好地了解我們的用戶,讓我們對旅行者的體驗(yàn)路徑也做一個拆解。如下圖:

這個路徑將全面地了解用戶的想法、感受和行為,因?yàn)樗麄儠?jīng)歷不同的階段,幫助填補(bǔ)我們路徑中的空白點(diǎn),幫助我們更好的進(jìn)行產(chǎn)品的設(shè)計。

1. 計劃旅行

在計劃旅行時,設(shè)計師認(rèn)為用戶的想法是什么?

  • 目的:休息、假期、出差;
  • 目的地的候選名單,檢查距離和到達(dá)目的地的時間;
  • 出行方式選擇:飛機(jī)、火車、巴士、游輪、自駕;
  • 查看酒店位置與評論好壞;
  • 評估旅行成本(如航班、酒店等費(fèi)用);
  • 可取消功能(如已訂的航班、酒店等)。

2. 用戶角度

通過與用戶的走查、回訪、反饋,可以幫助我們了解用戶內(nèi)心真實(shí)的想法,幫助我們增強(qiáng)以及簡化用戶的體驗(yàn)方式。

  • 在條件允許的情況下,提供盡可能多的價格;
  • 經(jīng)常出差的人會為了飛機(jī)上的最佳座位而自愿增加費(fèi)用;
  • 出來旅行的家庭想要知道目的地有哪些有趣的兒童活動;
  • 顯示符合用戶自定義預(yù)算的旅行套餐;
  • 幫助用戶估算旅行成本;
  • 給出評價信息,可供用戶評判(朋友、預(yù)訂平臺、Facebook等)。

3. 特殊情況

產(chǎn)品是否有處理特殊情況的功能?

  • 由于個人原因,推遲了旅行計劃;
  • 目的地天氣或其他情況不利。

我們是否可以幫助用戶更好地應(yīng)對這些情況?通過及時提供有關(guān)目的地天氣狀況、備選旅行計劃或建議類似目的地的信息等。

那么通過第一個內(nèi)容的拆解,我們就可以發(fā)現(xiàn),這個點(diǎn)能做的功能就有很多。而且這些功能還能排列優(yōu)先級,設(shè)計師能主動進(jìn)行推進(jìn),提升設(shè)計師自身的價值。功能走查的重要性相信各位也看出來了。下面繼續(xù)。

1. 完成預(yù)訂

是時候確定目的地、日期、旅行方式和停留地點(diǎn)了。(依然是設(shè)計師角度)

  • 設(shè)計有序、直觀的預(yù)訂體驗(yàn);
  • 安全流暢的付款流程,包括多種支付渠道的選擇;
  • 旅行模式的確認(rèn)細(xì)節(jié),包括駕駛方向和幫助熱線電話號碼;
  • 酒店確認(rèn):房間詳情和熱線電話。

2. 用戶角度

  • 直接能從航空公司/酒店確認(rèn)信息,這樣會比旅行社確認(rèn)更具價值;
  • 目的地指南(視頻、天氣、穿著、提示、要做的事情、文化等);
  • 建議的旅行路線;
  • 緊急求助熱線(如果客戶在預(yù)訂過程中撥打電話,呼叫應(yīng)該能及時取得聯(lián)系)。

3. 特殊情況

  • 預(yù)訂未確認(rèn),付款已處理。

1. 出行與酒店

設(shè)計師考慮的用戶需求。

  • 舒暢的旅行體驗(yàn)(飛行準(zhǔn)時等);
  • 入住酒店,快速辦理手續(xù);
  • 干凈,方便,光線充足的房間(特別是床,洗手間);
  • 體驗(yàn)當(dāng)?shù)氐拿朗澈臀幕?
  • WiFi 覆蓋;
  • 干凈整潔的出租車等交通工具;
  • 與家人和朋友實(shí)時分享照片;
  • 合理的分配時間。

2. 用戶角度

  • 主動跟蹤用戶的行程,確保一切順利(發(fā)送提醒,與酒店確認(rèn));
  • 目的地指南(事件、當(dāng)?shù)亟煌ā⑻鞖?、衣服、提示、要做的事情等)?
  • 當(dāng)?shù)夭蛷d/購物券/優(yōu)惠等。

3. 特殊情況

  • 航班延誤或取消;
  • 緊急的醫(yī)療情況;
  • 信用卡透支。

1. 旅程與歸來

旅途中的回憶和收獲。

  • 在臉書/ Instagram / Twitter / WhatsApp 上共享更新和照片;
  • 與家人和朋友分享經(jīng)驗(yàn);
  • 回憶當(dāng)?shù)氐拿朗常?
  • 經(jīng)驗(yàn)與旅游前的期望不相符,過度炒作;
  • 航班和酒店服務(wù);
  • 評論旅程的整體情況。

2. 用戶角度

  • 提醒攜帶基本藥物;
  • 幫助預(yù)支旅行預(yù)算;
  • 關(guān)于外匯轉(zhuǎn)換;
  • 當(dāng)?shù)蒯t(yī)療建議、

3. 特殊情況

  • 剩下的錢如何兌換;(如國外游)
  • 退款;
  • 行李丟失。

通過以上的拆解說明,可見體驗(yàn)路徑對于功能設(shè)計的重要性,各位設(shè)計師一定不要主觀認(rèn)為「你就是用戶」,而是結(jié)合用戶需求進(jìn)行分析,設(shè)計出更合理的功能。

小結(jié)

設(shè)計師要不斷完善用戶的體驗(yàn)路徑模式,因?yàn)樗鼤恢卑l(fā)展,將產(chǎn)品優(yōu)化的越來越好,而不僅僅是停留在:「這個產(chǎn)品我做完了」的想法上。

所以為什么說用戶體驗(yàn)是一種過程?因?yàn)樗冀K在不斷變化,所以作為設(shè)計師也要持續(xù)的自我增值,才能跟上產(chǎn)品迭代、時代發(fā)展的步伐。

用戶體驗(yàn)是一種過程,而不是結(jié)果

UI設(shè)計掌握的交互知識

博博


云和數(shù)據(jù)西安中心 2018-06-05 17:38:27

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

交互設(shè)計 Interaction Design 也被成為IXD。交互設(shè)計建立起了人與計算機(jī)便捷溝通的通道,它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。我們在工作之中經(jīng)常會對接交互設(shè)計師和產(chǎn)品經(jīng)理,他們具有豐富的交互知識和經(jīng)驗(yàn)。那是不是我們作為UI設(shè)計師,就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計了呢?當(dāng)然不是,在視覺設(shè)計層面更多地考慮布局和交互原則才可以讓我們的界面更友好,視覺設(shè)計師是交互設(shè)計中非常重要的角色。

用戶體驗(yàn)

在工作中經(jīng)常聽到UED(用戶體驗(yàn)設(shè)計)和UCD(以用戶為中心的設(shè)計),可見互聯(lián)網(wǎng)行業(yè)非常重視用戶體驗(yàn),而用戶體驗(yàn)絕不僅僅是要樣子好看。有些設(shè)計師只關(guān)注視覺層面,認(rèn)為產(chǎn)品戰(zhàn)略等用戶體驗(yàn)維度和自己的設(shè)計無關(guān),那么就會和產(chǎn)品經(jīng)理等角色處于不同的世界了。“他們?yōu)槭裁匆疫@么改?”、“為什么這里文字要淺一點(diǎn)?”有時不理解對方的思考角度就會造成爭執(zhí)。用戶體驗(yàn)(User Experience)是用戶使用產(chǎn)品的心理和感受,用戶體驗(yàn)體現(xiàn)了產(chǎn)品設(shè)計以人為本的設(shè)計精神。其實(shí)早在互聯(lián)網(wǎng)出現(xiàn)之前就有“顧客先點(diǎn)雞就先有雞”、“顧客就是上帝”這種說法,并且西方很多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經(jīng)開始進(jìn)行研究用戶體驗(yàn)了,可見用戶體驗(yàn)對所有產(chǎn)品是多么的重要。但是讓人摸不著頭腦的是,用戶體驗(yàn)有時非常地主觀:因?yàn)橛脩趔w驗(yàn)背后影響用戶的因素有人的喜好、情感、印象、心理反應(yīng)等,有些人明明有摩拜卻要走很遠(yuǎn)找OFO,也有人只吃肯德基而不吃麥當(dāng)勞。這些選擇并不是優(yōu)勝劣汰,而是有背后的原因的。要想讓我們的產(chǎn)品被人喜歡,我們需要研究用戶。

UI設(shè)計師必須要掌握的交互知識

用戶研究七種方法

但用戶可能是幾百萬人呢!我們面對這樣抽象的群體然后告訴自己要以他們?yōu)橹行脑O(shè)計這多么抽象啊。這么多用戶甚至有時用戶自己的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢? 

用戶畫像

根據(jù)產(chǎn)品的調(diào)性和用戶群體,用戶研究團(tuán)隊(duì)可以設(shè)計出一個用戶的模型,這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標(biāo)簽組成的,通過這個標(biāo)簽我們可以更好地理解誰在使用我們的產(chǎn)品。用戶畫像建立后,每個功能可以完成自己的用戶故事:用戶在什么場景下需要這個功能。這樣,我們所設(shè)計的功能就會更接近用戶實(shí)際的需要。比如我們現(xiàn)在要設(shè)計一個女裝購物應(yīng)用,那么我們可以做這個用戶畫像:小美,在北京國貿(mào)CBD上班,21歲,收入8000,喜歡淘寶購物和電視購物。使用我們產(chǎn)品的目的是為了尋找正品時尚大牌服裝進(jìn)行網(wǎng)購。小美因?yàn)閯偖厴I(yè)所以一方面喜歡大牌一方面又資金短缺(啟發(fā):我們的產(chǎn)品是不是要解決這兩個痛點(diǎn)?)小美是時尚OL,審美很高,不喜歡俗氣的設(shè)計。(啟發(fā):界面設(shè)計是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色?)。看,即使小美并不真實(shí)存在,但是她指引了我們的產(chǎn)品設(shè)計。接下來,我們還可以給小美增加一個頭像,在做設(shè)計時我們想象這個人就是真實(shí)存在的用戶,她會對我們的設(shè)計有什么看法。當(dāng)我們完成用戶畫像之后,還可以接著設(shè)計用戶故事:小美經(jīng)常需要在工作場合穿符合工作氣質(zhì)的衣服,也需要在約會時有晚禮服之類的服裝,可是小美的收入有限,她眼光較高但是對價格過高的服裝無法承擔(dān),她使用我們的APP就是為了尋找正品且價格適中的服裝。那么,小美在哪里用我們的APP呢?這就要為小美繼續(xù)設(shè)計一個用戶使用場景了:小美在開會時可能會打開看看、在地鐵里也會瀏覽、在清晨打開衣柜時也會瀏覽?;緛碚f是碎片時間,而且是有著裝需求時。(啟發(fā):我們是不是需要把字號調(diào)大以適應(yīng)地鐵里顛簸的閱讀環(huán)境?我們是不是需要設(shè)計省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費(fèi)?)

UI設(shè)計師必須要掌握的交互知識

用戶畫像

用戶訪談

邀約用戶來回答產(chǎn)品的相關(guān)問題,并記錄作出后續(xù)分析。用戶訪談有三種形式:結(jié)構(gòu)式訪談(根據(jù)之前寫好的問題結(jié)構(gòu))、半結(jié)構(gòu)式訪談(一半根據(jù)問題一半討論)、開放式訪談(較為深入地和用戶交流,雙方都有主動權(quán)來探討)。用戶訪談設(shè)置時要注意:用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導(dǎo)性問題、不要使用專業(yè)術(shù)語。用戶訪談適合產(chǎn)品開發(fā)的全部過程。

問卷調(diào)查

可分為紙質(zhì)調(diào)查問卷、網(wǎng)絡(luò)問卷調(diào)查。依據(jù)產(chǎn)品列出需要了解的問題,制成文檔讓用戶回答。問卷調(diào)查是一種成本比較低的用戶調(diào)查方法。問卷調(diào)查適合產(chǎn)品策劃初期對目標(biāo)人群的投放,另外注意一個問題最好收集10個問卷,也就是如果你有10個問題那么至少要收集100個問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷,很可能敷衍了事的回答會擾亂我們的判斷。

焦點(diǎn)小組

焦點(diǎn)小組一般有6-12人組成,由一名專業(yè)人士主持,依照訪談提綱引導(dǎo)小組成員各抒己見,并記錄分析。并且在焦點(diǎn)小組的房間里會有一扇單向玻璃窗,用戶是看不到里面有誰的。而在里面坐著的通常是開發(fā)團(tuán)隊(duì),他們可以清晰地看到用戶是如何吐槽他們的產(chǎn)品的,但是他們沒有權(quán)利直接和用戶進(jìn)行解釋。焦點(diǎn)小組需要特殊的房間和設(shè)備,主持人也需要訓(xùn)練有素,焦點(diǎn)小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產(chǎn)品和對產(chǎn)品的不滿。

可用性測試

通過篩選讓不同用戶群來對產(chǎn)品進(jìn)行操作,同時觀察人員在旁邊觀察并記錄,可用性測試的要求是用戶不可以是互聯(lián)網(wǎng)從業(yè)者而應(yīng)該是真實(shí)產(chǎn)品的用戶群體。但是可用性測試一般要有一個可用的軟件版本或者原型供人測試才可以,在軟件開發(fā)的前期不適合用這個方法。

眼動測試

使用特殊的設(shè)備眼動儀來追蹤用戶使用產(chǎn)品時眼睛聚焦在哪里,盲區(qū)是哪里。比如一個網(wǎng)站通過眼動測試可以知道用戶的視覺會自動屏蔽網(wǎng)站的常見廣告位置,這時如果希望提高廣告的點(diǎn)擊,就需要把廣告位放置于用戶聚焦時間較長的位置。眼動測試的設(shè)備比較專業(yè),通常在小公司較難開展。

用戶反饋和大數(shù)據(jù)分析

根據(jù)市場提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推測。用戶反饋也是用戶研究的一個重點(diǎn),用戶反饋主要是用戶通過產(chǎn)品的反饋入口主動向開發(fā)者提出的意見。

有了這些方法,我們就能更好地了解用戶和接近用戶了。但是要注意,用戶研究也是有陷阱的。比如:填寫問卷和參與調(diào)研的用戶可能并不是核心用戶;提交用戶反饋的用戶之外可能有更多沉默的用戶等??傊脩粞芯渴且粋€必要的手段,但是仍然需要產(chǎn)品團(tuán)隊(duì)來對產(chǎn)品的方向做出決斷。

用戶如何使用產(chǎn)品

使用場景

剛才我們介紹了用戶使用的場景是根據(jù)產(chǎn)品的功能和平臺決定的。電腦的使用場景是正襟危坐,手持鼠標(biāo)。而移動端則是隨時隨地使用,我們的用戶可能在地鐵里、在廁所里、在吃飯時、在上課中怕老師看到把手機(jī)藏在桌洞里、在工作中領(lǐng)導(dǎo)巡視后偷偷瞄、在輾轉(zhuǎn)反側(cè)睡不著的時候沒有開燈地瀏覽等。這時我們要為用戶考慮,如果他們在使用我們產(chǎn)品的各種場景中有什么需要,是不是需要省流量、是不是需要調(diào)整字號、是不是需要過濾藍(lán)光、是不是需要護(hù)眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時需要個手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。一個不考慮用戶使用場景的產(chǎn)品一定是會遭到吐槽的。很久之前我聽同事在吃飯時抱怨過“大爺?shù)模膊桓銈€提示,早晨在地鐵里用4G看流量以為是在家用WIFI,結(jié)果看了一集《甄嬛傳》花了80塊錢”、“哎?你是不是早晨開會時玩游戲了?你的比分都給我們推送了哈哈哈”。

UI設(shè)計師必須要掌握的交互知識

我的產(chǎn)品中的用戶使用場景表格

操作手勢

網(wǎng)頁設(shè)計所處的電腦端目前主要還是依靠鼠標(biāo)點(diǎn)擊來操作。鼠標(biāo)點(diǎn)擊的最小單位甚至可以是一像素。而移動端不太一樣,移動端設(shè)備中我們使用手指來操作界面。一般來說,手指點(diǎn)觸區(qū)域最小尺寸為7×7 mm,拇指最小尺寸為9×9 mm。也就是在我們@2x設(shè)計中為88px(或44pt)。這個神奇地88PX在移動端應(yīng)用很廣泛:很多表單單項(xiàng)的高度是88ox、導(dǎo)航欄高度也是88px等等。那您可能會說,也不對吧,有些界面上的圖標(biāo)看上去沒有88px啊。是的,但是那只是視覺,我們可以通過增加圖標(biāo)點(diǎn)擊區(qū)域的方式(比如給60像素大小的圖標(biāo)左右增加22像素的透明區(qū)域)來讓圖標(biāo)更好點(diǎn)擊。千萬在設(shè)計時不要把操作區(qū)域放得特別近,可以把所有點(diǎn)擊區(qū)域用88px標(biāo)記看是否有重疊的情況,避免點(diǎn)擊一個圖標(biāo)時誤點(diǎn)另一個圖標(biāo)。除了點(diǎn)擊區(qū)域,移動端還可以利用各種手勢來進(jìn)行各種操作的設(shè)計。主要的手勢有:

UI設(shè)計師必須要掌握的交互知識

單點(diǎn)觸碰(Tap):點(diǎn)擊用來選擇一個元素,類似鼠標(biāo)的左鍵,是最常用的手勢。

拖曳(Drag):點(diǎn)擊某個元素然后拖拽進(jìn)行移動,類似現(xiàn)實(shí)生活中移動物體的感覺。

快速拖曳(Flick)速度很快的拖曳操作。

滑動(Swipe):水平或垂直方向的滑動,比如翻閱相冊和電子書翻閱的手勢。

雙擊(Double-Click):快速點(diǎn)擊一個物體,通常會在放大、縮小操作中使用。

捏(Pinch):兩根手指頭向內(nèi)捏,捏的動作會使物體變得更小,通常在縮小操作中使用。網(wǎng)易新聞客戶端中正文頁面即可通過捏的動作來縮小字號。

伸展(Stretch):兩根手指向外推,現(xiàn)實(shí)中這種操作會使物體向外拉伸,元素可能會變得更大,通常會在放大操作中使用。網(wǎng)易新聞客戶端中正文頁面可以通過伸展放大字號。

長按(Touch and hold):手指點(diǎn)擊并按住會激發(fā)另一個操作。比如朋友圈的相機(jī)圖標(biāo)長按可只發(fā)文字。但是注意,長按不是一個常態(tài)操作,所以一般不太建議用戶進(jìn)行該操作。但長按操作又是有需要的,所以會把刪除、只發(fā)文字狀態(tài)等操作隱藏其中。

除了用戶使用場景、點(diǎn)擊區(qū)域、手勢,那么還有一個影響我們設(shè)計的使用情況,就是用戶怎么拿手機(jī)很重要。用戶可以:單手拿手機(jī)、雙手拿手機(jī)、直向拿手機(jī)、橫向拿手機(jī)。我們需要考慮這些可能發(fā)生的特征進(jìn)行手勢互動的規(guī)劃與設(shè)計。比如OFO為了讓單手(說不定是左手還是右手)操作方便,主要按鈕在下方并且做的很大,左右手都可以輕松點(diǎn)擊。而微信的很多按鈕也都是大長條,方便左右手的觸發(fā)。橫屏使用場景一般是游戲、視頻等,所以一般的APP并不支持橫屏操作(微信、支付寶、微博均不支持橫屏操作),

格式塔:我們?nèi)绾握J(rèn)知?

我們發(fā)現(xiàn)有些用戶在使用設(shè)計好的界面時找不到一些重要的功能按鈕。“奇怪,分享功能不就在更多按鈕里面嗎?”、“用戶怎么連這個也找不到啊”你也許會說。我們要來了解一下用戶是如何認(rèn)知我們設(shè)計好的界面的。在初高中考試的時候您一定見過完形填空這種格式吧,“格式塔”源自德語“Gestalt”,意即“整體”、“完形”的意思。格式塔心理學(xué)認(rèn)為,我們在觀察的時候會自動腦補(bǔ)出一些邏輯和含義來,會讓觀察對象變成一個完整的、整體的、常見的形狀。

"研表究明,漢字的序順并不定一能影閱響讀,比如當(dāng)你完看這句話后之,才發(fā)這現(xiàn)里的字全是都亂的。"研究格式塔心理學(xué)對我們做互聯(lián)網(wǎng)產(chǎn)品和設(shè)計有什么用呢?掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經(jīng)過太多思考在殺毒軟件中點(diǎn)擊殺毒按鈕等。格式塔心理學(xué)對于我們做好表現(xiàn)層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個知識點(diǎn)。

接近律 law of proximity

格式塔心理學(xué)認(rèn)為,人們認(rèn)知事物的時候,會依靠它們的距離來判斷它們之間的關(guān)系。兩個元素越近就說明它們之間關(guān)系更強(qiáng)。但是接近也是有對比的,在復(fù)雜的設(shè)計中,我們要一邊考慮它們之間內(nèi)部的邏輯關(guān)系一邊來排版。

UI設(shè)計師必須要掌握的交互知識

A組和B組因?yàn)榻咏啥a(chǎn)生不同地閱讀順序

UI設(shè)計師必須要掌握的交互知識

距離更近的信息暗示了他們有內(nèi)在的邏輯關(guān)系

相似律law of similarity

認(rèn)知事物時,刺激要素(比如大小、色彩、形狀等要素)相似的元素我們傾向于把它們聯(lián)合在一起或者認(rèn)為它們是一個種類。比如,我們能輕易的分辨出撥號頁面中撥號鍵和按鍵群的區(qū)別。

UI設(shè)計師必須要掌握的交互知識

相似的元素暗示了他們屬于一個種類

UI設(shè)計師必須要掌握的交互知識

類似外形的單元會被我們?nèi)四X默認(rèn)為同一屬類

閉合律law of closure

就算沒有外形的約束,我們也會自動把圖形腦補(bǔ)完全。比如半個形狀或者有缺口的形狀我們不會認(rèn)為是一條線,而是一個完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。

UI設(shè)計師必須要掌握的交互知識

左邊的圖中我們會認(rèn)為是圓形有缺口而不是一條曲線

右邊的圖形中我們會認(rèn)為是圓形被三條線截斷了而不是四個圖形

UI設(shè)計師必須要掌握的交互知識

界面設(shè)計中露出一半內(nèi)容,閉合律讓我們感知右邊還隱藏著更多內(nèi)容

連續(xù)律law of continuity

在知覺過程中人們往往傾向于使知覺對象的直線繼續(xù)成為直線,使曲線繼續(xù)成為曲線,也就是視覺的慣性。利用連續(xù)律我們可以讓用戶操作界面時不經(jīng)過思考就點(diǎn)擊一個固定的位置。

UI設(shè)計師必須要掌握的交互知識

深諳連續(xù)律的流氓軟件

成員特性律law of membership character

如果我們有很多同樣的按鈕,如何讓某個更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢?那就要用到成員特性律了。成員特性律賦予了集體中某一個元素特殊的一些刺激元素從而突出它。

UI設(shè)計師必須要掌握的交互知識

獨(dú)特的外形暗示了它與別的元素有不同的功能

UI設(shè)計師必須要掌握的交互知識

撥號頁面中撥號鍵與微博發(fā)布微博圖標(biāo)都與其他按鈕不同

記憶律:我們?nèi)绾斡洃洠?/span>

接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學(xué)家沃爾夫?qū)z忘問題所作的經(jīng)典性研究得出了格式塔的三大記憶律。沃爾夫?qū)嶒?yàn)時要求實(shí)驗(yàn)體觀看樣本圖形并記住它們,然后在不同的時間里根據(jù)記憶把它們畫出來。結(jié)果發(fā)現(xiàn)實(shí)驗(yàn)體在不同的間隔時間畫出來的圖像都有不同。有時再現(xiàn)的圖畫比原來的圖畫更簡單更有規(guī)則,有時原來圖畫中顯著的細(xì)節(jié)在再現(xiàn)時被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律:“水平化”、“尖銳化”、“常態(tài)化”。

UI設(shè)計師必須要掌握的交互知識

哪個圖形才是正確的?(圖片來源:網(wǎng)絡(luò))

水平化leveling

水平化是指在記憶中我們趨向于減少知覺圖形小的不規(guī)則部分使其對稱;或趨向于減少知覺圖形中的具體細(xì)節(jié)。

尖銳化sharpening

尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中,人們往往強(qiáng)調(diào)知覺圖形的某些特征而忽視其它具體細(xì)節(jié)的過程。在有些心理學(xué)家看來,人類記憶的特征之一,就是客體中最明顯的特征在再現(xiàn)過程中往往被夸大了。

常態(tài)化normalizing

常態(tài)化是指人們在記憶中,往往根據(jù)自己已有的記憶痕跡對知覺圖形加以修改,即一般會趨向于按照自己認(rèn)為它似乎應(yīng)該是什么樣子來加以修改的。

UI設(shè)計師必須要掌握的交互知識

情感化設(shè)計是什么?

了解格式塔會讓我們把界面做得符合用戶的心理預(yù)期,讓用戶能夠明顯地找到他應(yīng)該找到的操作??墒怯脩艉孟襁€是不開心,因?yàn)橛脩粲X得界面不好看。您是不是也會陷入這樣的矛盾:可用性重要還是美感更重要?怎么樣能夠讓我們設(shè)計的界面又好用還漂亮呢?情感化設(shè)計由唐納德·A·諾曼博士提出,指的是設(shè)計中情感在所處于的重要地位以及如何讓用戶把情感投射在產(chǎn)品上來解決可用性與美感的矛盾。情感化設(shè)計是在抓住用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行行為的可能性的設(shè)計。比如紅色且巨大的購買按鈕能夠無意識地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網(wǎng)絡(luò)不好時的焦慮等等。情感化設(shè)計有三個水平,它們是遞進(jìn)關(guān)系,分別是:本能水平(重視設(shè)計外形)、行為水平設(shè)計(重視使用的樂趣和效率)、反思水平設(shè)計(重視自我形象、個人滿意、記憶)。

UI設(shè)計師必須要掌握的交互知識

本能水平

我們都是視覺動物,對外形的觀察和理解是出于我們本能的。本能水平的設(shè)計就是刺激用戶的感官體驗(yàn),讓別人注意到我們的設(shè)計。這個階段的設(shè)計會更加關(guān)注外形的視覺效果。比如各大電商網(wǎng)站的專題頁面設(shè)計,更加注重抓眼球和外觀的刺激。

行為水平

行為水平是功能性產(chǎn)品需要注重的。一個產(chǎn)品是否達(dá)到了行為水平,要看它是否能有效地完成任務(wù),是否是一種有樂趣的操作體驗(yàn)。優(yōu)秀行為水平設(shè)計的四個方面:功能,易懂性,可用性和物理感覺。比如好用的記事本APP等。

反思水平

反思水平的設(shè)計與用戶長期感受有關(guān),這種水平的設(shè)計建立了品牌感和用戶的情感投射。反思水平設(shè)計是產(chǎn)品和用戶之間情感的紐帶,通過互動給用戶自我形象、滿意度、記憶等體驗(yàn),讓用戶形成對品牌的認(rèn)知,培養(yǎng)對品牌的忠誠度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求五個層次。我認(rèn)為反思水平的設(shè)計就是提供給用戶歸屬感、尊重、自我實(shí)現(xiàn)。比如Google每逢節(jié)日就會有一些符合節(jié)日化的設(shè)計、網(wǎng)易嚴(yán)選的空狀態(tài)也會有品牌感的體現(xiàn)等。

UI設(shè)計師必須要掌握的交互知識

淘寶空狀態(tài)中的情感化設(shè)計

情感化設(shè)計的表達(dá)

UI設(shè)計師必須要掌握的交互知識

畫面 畫面是情感化設(shè)計的重點(diǎn),讓錯誤頁面或者空狀態(tài)都成為一幅可愛的插畫。

應(yīng)景 讓用戶在我們的產(chǎn)品中體驗(yàn)到一些和真實(shí)世界一樣的氛圍變化。

游戲感 沒有人喜歡做任務(wù)。試著讓用戶完成的任務(wù)變成游戲吧。比如每次登陸加金幣,有足夠的金幣就可以獲得什么稱號。

沖突 沖突非常能夠勾起人的情緒,營造一個競爭或者對抗的氛圍,讓用戶感覺自己置身在一個比賽或者格斗中一樣。

講故事 給產(chǎn)品和無聊的圖像一些故事內(nèi)容,畢竟沒有人討厭講故事。

隱喻 用一些大家理解,隨處可見的事物表達(dá)一些無趣、生澀的概念。

互動 給用戶和其他用戶多制造互動機(jī)會,比如排行榜、推薦等,不要讓用戶感覺孤獨(dú)。

交互八原則

當(dāng)我們了解了產(chǎn)品五要素(產(chǎn)品設(shè)計的維度問題)、格式塔心理學(xué)(用戶如何認(rèn)知的問題)、情感化設(shè)計(如何讓用戶滿意的問題)后,我還要給您介紹一大堆地交互原則。這些交互原則會幫助我們設(shè)計出更好用的界面,當(dāng)然也可以幫助我們講出這樣設(shè)計的原因。不拿出一些理論怎么能夠讓別人信服你的設(shè)計,對不對?

費(fèi)茨定律(Fitts’Law)

費(fèi)茨定律指的是:光標(biāo)到達(dá)一個目標(biāo)的時間,與當(dāng)前光標(biāo)所在的位置和目標(biāo)位置的距離(D)和目標(biāo)大?。⊿)有關(guān)。它的數(shù)學(xué)公式是:時間 T = a + b log2(D/S+1)。這個定律是由保羅.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多領(lǐng)域都得到了應(yīng)用,特別是在互聯(lián)網(wǎng)設(shè)計中尤為深遠(yuǎn)。我們利用費(fèi)茨定律估算用戶移動光標(biāo)到鏈接或者按鈕所需的時間,時間越短越。比如有一個按鈕在左下角,我們的操作可以細(xì)分為兩個階段:第一個階段大范圍移動到左下方向,然后再做微調(diào)到達(dá)這個按鈕之上。所以這個時間受按鈕和鏈接所在位置與按鈕和鏈接大小影響,也就是說我們在做設(shè)計時要考慮光標(biāo)默認(rèn)會放在哪里、我們的鏈接按鈕是不是太小了。

UI設(shè)計師必須要掌握的交互知識

費(fèi)茨定律說明距離越短、目標(biāo)大小越大,那么光標(biāo)到達(dá)目標(biāo)越快

UI設(shè)計師必須要掌握的交互知識

費(fèi)茨定律在網(wǎng)頁設(shè)計中的使用

UI設(shè)計師必須要掌握的交互知識

OFO和蘋果音樂APP都將按鈕放置手指最容易點(diǎn)擊的區(qū)域并且按鈕足夠大

??硕桑℉ick’s Law)

希克定律是指一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。它的數(shù)學(xué)公式是:反應(yīng)時間 T=a+b log2(n)。在我們的設(shè)計中如果給用戶的選擇更多,那么用戶所需要做出決定的時間就越長。比如我們給出用戶菜單-子菜單-選項(xiàng),那么用戶可能會很糾結(jié);如果我們簡化成菜單-選項(xiàng),就會減少用戶做選擇的時間。

UI設(shè)計師必須要掌握的交互知識

用戶反應(yīng)時間和選擇數(shù)量的關(guān)系

UI設(shè)計師必須要掌握的交互知識

我們應(yīng)該減少用戶的選擇

7±2法則

讓我們先玩?zhèn)€游戲,請記憶下面的文字,一分鐘后移開視線:

掙 多 久 可 貓 風(fēng) 師 裊 崩 六 酒 望

現(xiàn)在閉上眼睛想一下剛才的文字您能回憶幾個?大概是五個到九個之間。1956年美國科學(xué)家米勒對人類短時記憶能力進(jìn)行了研究,他注意到年輕人的記憶廣度大約為5到9個單位之間,就是7±2法則。這個法則對我們做界面設(shè)計的啟迪就是如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個路徑的順序,那么數(shù)量應(yīng)該控制在七個左右,比如蘋果和站酷網(wǎng)站的導(dǎo)航個數(shù)。另外,移動端底部Tab區(qū)域最多也是五個,而頁面中的八大金剛圖標(biāo)也是八個。

UI設(shè)計師必須要掌握的交互知識

蘋果、站酷、Dribbble等網(wǎng)站導(dǎo)航數(shù)量全部是7±2

泰思勒定律(Tesler’s Law)

這個定律是說產(chǎn)品固有的復(fù)雜性存在一個臨界點(diǎn),超過了這個點(diǎn)過程就不能再簡化了。我們只能將這種復(fù)雜性轉(zhuǎn)移。比如我們?nèi)绻l(fā)現(xiàn)頁面的功能是必須的,但當(dāng)前的頁面信息過載,那么就需要將次要的功能收起或者轉(zhuǎn)移。

UI設(shè)計師必須要掌握的交互知識

Dribbble網(wǎng)站導(dǎo)航將更多功能收起在一個表示更多的圖標(biāo)內(nèi)

防錯原則

一個表單是需要填寫完畢后方可提交的。但是用戶有時會漏填或者忘記填寫,這是用戶點(diǎn)擊提交會怎么樣?很可能有些選項(xiàng)會被清空(比如密碼選項(xiàng)基于安全考慮會清空cookies)那么用戶還得重新填寫。這時解決辦法是在用戶沒填寫完之前把按鈕設(shè)置一個看起來不能點(diǎn)擊的樣式,用戶想提交時彈窗:您還有內(nèi)容沒有填寫完哦,然后把用戶定位在沒填寫完的項(xiàng)目,讓那個表單高亮。(是不是真的做到以用戶為中心啦?)再比如推特只允許用戶填寫140個字,但用戶一寫爽了往往會超出140個字那怎么辦?解決辦法是給他在旁邊倒數(shù)還能寫幾個字???,這些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯誤所做的努力,防錯設(shè)計就是要減少錯誤操作所帶來的災(zāi)難。錯誤的提示當(dāng)然需要設(shè)計師的設(shè)計了??墒且苍S您不知道有些錯誤提示含糊,用戶并不知道到底錯的是哪里,下一步該怎么辦。比如僅僅登錄功能就可能會有用戶名錯誤、密碼錯誤、網(wǎng)絡(luò)超時、連續(xù)三次輸入密碼錯誤、用戶名為空等不同的錯誤,而有些產(chǎn)品僅僅給出“出錯了”,那么用戶當(dāng)然會不知所措了。正向的例子比如一次我在登錄Google Mail時輸錯了密碼,它提示“密碼輸入錯誤,提示:您在1個月前改過密碼”。

UI設(shè)計師必須要掌握的交互知識

BOO!APP輸入密碼時卡通會蒙住眼睛,輸錯時也會有提示

奧卡姆的剃刀法則(Occam’s Razor)

奧卡姆的剃須刀法則主要就是說我們做產(chǎn)品時功能上不可以太繁瑣,應(yīng)該保證簡潔和工具化。比如產(chǎn)品中為用戶提供了收藏功能是否就不需要喜歡了?提供了喜歡是否不需要點(diǎn)贊了?一定保證功能上的克制。

UI設(shè)計師必須要掌握的交互知識

QQ將更多功能收起到了頭像和加號圖標(biāo)中

防呆原則

有一個著名的交互書籍叫作《Dont make me think》,翻譯過來就是不要讓我思考。這句話一直在我做設(shè)計時響起:不要認(rèn)為用戶是專家!不要認(rèn)為用戶是專家!有時我們會覺得,點(diǎn)擊漢堡包圖標(biāo)當(dāng)然就是菜單??!這個按鈕長按不就會調(diào)出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是抽屜式導(dǎo)航、什么是長按、雙指滑動。更何況普通用戶并不會研究我們的APP,在他們眼中我們的產(chǎn)品只是眾多工具中的一個,我們何德何能認(rèn)為自己的產(chǎn)品是值得用戶花時間學(xué)習(xí)的?一定要把交互和設(shè)計做得簡單,并且讓用戶在別的地方“學(xué)習(xí)”過。每個頁面強(qiáng)調(diào)一個重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設(shè)計要自然而然。

UI設(shè)計師必須要掌握的交互知識

運(yùn)動APP KEEP 的頁面中總有一個按鈕是突出的

防止不耐煩原則

用戶是很容易不耐煩的,你還記得你多少次看著視頻加載條罵人嗎?如果我們需要用戶等待載入信息,一定要給一個有情感化的設(shè)計提示,避免用戶產(chǎn)生焦慮。 比如很多游戲(比如決戰(zhàn)平安京、王者榮耀等)加載時都會出現(xiàn)主角跑步的小動畫,美團(tuán)等APP下拉刷新時也會有幾幀的動畫來安慰用戶。動畫要好于蘋果默認(rèn)提供給開發(fā)的“轉(zhuǎn)菊花”,因?yàn)榭ㄍㄐ蜗蟾杏H和力。但是好像還不夠,用戶需要掌控感,“哎?它一直加載,是不是死機(jī)了?”為了防止用戶沒有掌控感,我們可以為用戶設(shè)計加載條或者加載提示。加載狀態(tài)條很遺憾很多都是假的甚至是重復(fù)的,原因是其實(shí)要判斷加載了多少M(fèi)的素材的代碼更占資源!我們本來想安慰用戶等待加載的時間竟然會變得更長,那當(dāng)然不行啦。于是很多時候我們會做一個假的加載狀態(tài)條來安撫用戶,我想您一定看過反復(fù)加載的加載條吧!加載條下的文案其實(shí)也是可以變得非常有情感化設(shè)計感受的,比如通常是:加載場景資源、加載素材這樣的文案,但是有些APP需要很長加載時間時會給出這樣的文案:導(dǎo)演正在準(zhǔn)備、女主角準(zhǔn)備化妝了、攝像師打開了燈光。是不是更加好玩啦?

UI設(shè)計師必須要掌握的交互知識

美團(tuán)和網(wǎng)易嚴(yán)選的加載動畫

總結(jié)

交互知識其實(shí)關(guān)鍵還要在應(yīng)用和分析。一方面,我們可以在工作中積累經(jīng)驗(yàn),不斷地思考如何和同事配合一起研究提高產(chǎn)品在使用時的體驗(yàn);另一方面,我們也要經(jīng)常積累一些產(chǎn)品使用時發(fā)現(xiàn)的交互。建議大家平時可以收集你覺得不錯的情感化設(shè)計或者微交互,比如發(fā)現(xiàn)餓了么在下雨天送貨時會有電閃雷鳴和雨滴的設(shè)計;OFO和滴滴打車在不同節(jié)日也會把地圖找車?yán)锏膱D標(biāo)換成節(jié)日相關(guān)的圖標(biāo);BOO!APP在輸入密碼時小怪獸會捂住眼睛;WPS在晚上寫作時(沒錯就是現(xiàn)在)會提示你開啟過濾藍(lán)光的護(hù)眼模式等等。一個好的設(shè)計師一定是懂得交互的設(shè)計師,也應(yīng)該是非常細(xì)心的設(shè)計師,也應(yīng)該是懂得為用戶著想的設(shè)計師。

日歷

鏈接

個人資料

存檔