亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

首頁

如何利用「行為模型」讓用戶行動起來?

資深UI設(shè)計者

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


想一個問題吧,如果有人給你發(fā)了一條微信,你沒有回復(fù) ta,原因是什么?

  • 可能是給你發(fā)消息的人對你來說不重要?或者消息內(nèi)容不重要,不需要立刻回復(fù)?
  • 可能是你暫時特別忙,沒有時間回復(fù)?
  • 也可能是你的微信關(guān)閉了消息提醒,沒有聽到手機(jī)震動,不知道有人給你發(fā)了消息……

原因會有很多種,但是幾乎每一種原因都可以對應(yīng)到更深的層次。比如給你發(fā)消息的人對你而言不重要,是因?yàn)槿狈α嘶貜?fù)的動機(jī);沒時間回復(fù)是因?yàn)槿狈α嘶貜?fù)的能力;關(guān)閉了提醒是缺乏了回復(fù)的觸發(fā)因素……

動機(jī),能力,觸發(fā)三大要素,是讓用戶產(chǎn)生行為必不可少的三大條件,在行為模型里也十分重要。

一、什么是行為模型?

最早在 Norman 的《設(shè)計心理學(xué)》了解到關(guān)于行動的幾個步驟,他將行動拆分為目標(biāo),執(zhí)行,評估三大階段,每一階段又分為幾個步驟,簡單畫了邏輯圖 :

但是很多時候會發(fā)現(xiàn),用戶不一定會按我們所設(shè)想的方式去使用我們的產(chǎn)品,特別是注冊,購買等能提升轉(zhuǎn)化率的行為……我在查詢了一些關(guān)于心理學(xué)方面的內(nèi)容后,發(fā)現(xiàn)了用戶不進(jìn)行這些行為,其實(shí)都是有可以解釋的依據(jù)的,并且我們還可以利用這些依據(jù)來改善我們的產(chǎn)品。

從前面微信的例子,我們可以得知,要想讓用戶產(chǎn)生行為(Behavior),必須具備三個要素:充分的動機(jī)(Motive),完成這一行為的能力(Ability),促使人們付諸行動的觸發(fā)(Trigger),這三者缺一不可。

于是我們可以得出一個行為模型:B=MAT,我們可以從數(shù)學(xué)的角度類比出人們產(chǎn)生行為的「臨界點(diǎn)」,可以稱為「行動邊界線」(當(dāng)然這是我自己瞎取的名字,方便理解),只有用戶跨越了「行動邊界線」,才能實(shí)施或者產(chǎn)生某種行為。

二、關(guān)于Trigger——觸發(fā)

所謂觸發(fā),就是促使用戶做出某種舉動的誘因,引發(fā)用戶去使用你的產(chǎn)品。

比如通過在其他平臺廣告推廣等付費(fèi)方式吸引新用戶,這個可以稱為「付費(fèi)型觸發(fā)」;

還有一些公關(guān)、媒體新聞的正面報道 ,app store 里面排行榜,AppSo 推薦好用應(yīng)用等不需要付費(fèi),但是能夠吸引用戶使用你的產(chǎn)品,這個可以稱為「回饋型觸發(fā)」;

還有熟人之間的相互推薦,親朋好友的口碑相傳,這種方式十分常見,也是能夠讓產(chǎn)品大規(guī)模獲取用戶的一種方式,我們可以稱為「人際型觸發(fā)」。

但是這種方式經(jīng)常會被惡意利用,比如我們經(jīng)??吹降模悍窒鞽X到幾個群即可領(lǐng)取XXX優(yōu)惠,最后卻發(fā)現(xiàn)是騙人的方式,利用這種方式也許可以獲取大批用戶,但是一旦用戶發(fā)現(xiàn)被欺騙后就會立即停止使用你的產(chǎn)品,你也會失去用戶的信任。

還有一種是以驅(qū)動用戶重復(fù)某種行為的方式,用戶主動與產(chǎn)品保持聯(lián)系,比如用戶注冊了某個平臺的賬戶,訂閱了它們的內(nèi)容更新,開啟了消息推送,那么每一次更新推送就很有可能觸發(fā)用戶使用你的產(chǎn)品,這種方式可以稱為「自主型觸發(fā)」。

以上四種觸發(fā)方式,都是來源于外部環(huán)境,那么我們可以將其稱為「外部觸發(fā)」。

昨晚在 PM CIRCLE 里面看到大家在談?wù)撽P(guān)于痛點(diǎn)、癢點(diǎn)、爽點(diǎn)的問題,也出了系列文章,后來在知乎上也搜了相關(guān)大佬的回復(fù)。

小小的總結(jié)一下:

  • 「痛點(diǎn)」可以解釋為痛苦的點(diǎn),用戶在不滿,抱怨,生氣,恐懼等負(fù)面情緒會產(chǎn)生痛點(diǎn);
  • 「癢點(diǎn)」可以理解為虛擬自我的實(shí)現(xiàn),比如 B612 的瘦臉大眼,現(xiàn)實(shí)生活中的很難實(shí)現(xiàn)的,在 B612 里面能夠讓用戶得以釋放和解脫,映射出虛擬自我;
  • 「爽點(diǎn)」就是老生常談的即時滿足了,壓抑久了的需求突然被滿足,那就是爽,有需求,還能即時滿足,那么就是爽。

為什么我會提到「痛點(diǎn)」、「癢點(diǎn)」、「爽點(diǎn)」?是因?yàn)槲矣X得這三者是從內(nèi)部來觸發(fā)用戶采取下一步行動。

Nir Eyal 將情緒觸發(fā)分為兩種,一種為負(fù)面情緒,一種為正面情緒,兩種情緒皆可觸發(fā)用戶采取行動,但是我覺得如果利用「痛點(diǎn)」、「癢點(diǎn)」、「爽點(diǎn)」來分析內(nèi)部觸發(fā)的話會更好,這三點(diǎn)通過深入挖掘用戶內(nèi)在的情感體驗(yàn),設(shè)計出滿足用戶需求的產(chǎn)品,利用這三點(diǎn)也可以觸發(fā)用戶使用你的產(chǎn)品。

可以思考一下,人們?yōu)槭裁匆l(fā)朋友圈,發(fā)微博?為什么要拍照?為什么要刷抖音?為什么朋友圈更新出現(xiàn)小紅點(diǎn)后我就要去點(diǎn)擊看?用戶借助這些產(chǎn)品實(shí)現(xiàn)了怎樣的目的?消除了什么樣的煩惱?使用完這些產(chǎn)品后用戶感受如何?等等問題。

三、關(guān)于Ability——能力

可以把能力解釋為完成該行為的難易程度

Hauptly,Denis J 有一個觀點(diǎn)就是:當(dāng)你使用某個產(chǎn)品時所需花費(fèi)的步驟能被縮減或者是優(yōu)化時,用戶使用它的頻率就會增加。他在《Something Really New》一書中,歸納了產(chǎn)品創(chuàng)新的三個步驟,簡單畫了下步驟圖:

結(jié)合今天的科技變化,我們可以知道,將行為簡單化可以推動產(chǎn)品創(chuàng)新,也只有將行為簡單化,用戶才會具備完成這一行為的能力。

福格總結(jié)了簡潔性包含的6個元素,也就是影響任務(wù)難易程度的6個要素,簡單總結(jié)下:

福格建議,為了增加用戶實(shí)施某個行為的可能性,設(shè)計人員在設(shè)計產(chǎn)品時,應(yīng)該關(guān)注用戶最缺乏什么。

也就是說,要弄清楚是什么原因 阻礙了用戶完成這一活動:是時間不夠嗎?還是缺乏資金?還是完成這一活動太耗體力了?或者是用戶不想動腦筋?或者是這個產(chǎn)品與他們所處的社會環(huán)境格格不入?甚至是它太逾越常規(guī),以至讓人難以接受?

我記得我第一份實(shí)習(xí),做的一款新聞app,那個時候還不懂交互也不懂產(chǎn)品,我記得在首頁查看新的新聞內(nèi)容的時候 ,因?yàn)閿?shù)據(jù)加載量的原因,每次只能加載一定數(shù)量的新聞,所以當(dāng)時設(shè)計的是一個「查看更多」的列表?xiàng)l,用戶每次需要加載更多新聞內(nèi)容的時候,都需要點(diǎn)擊一次「查看更多」加載大約6條新的新聞,其實(shí)現(xiàn)在想想,為什么我們不設(shè)計一個自動加載呢?每次用戶上拉的時候,自動加載一部分,這樣能夠讓操作更加便捷,節(jié)約時間。

四、關(guān)于Motive——動機(jī)

觸發(fā)是提醒用戶采取行動,而動機(jī)決定用戶是否愿意采取行動,也就是用戶行動時擁有的熱情。在心理學(xué)里面,福格博士歸納了驅(qū)使用戶采取行動的三大類核心動機(jī):

能夠成為某些人行為動機(jī)的東西,未必適用于另外一些人,所以,我們需要知道自己的目標(biāo)用戶到底需要什么。

舉個例子:比如抖音的一些視頻封面,是一些漂亮的女生封面,而對于大都數(shù)男生來說,為了追求快樂,就有了點(diǎn)擊進(jìn)去看的動機(jī),而這種動機(jī)對于另外一些女性用戶就不一定適用。

前幾天在聽 UCDCHINA 上海 大眾點(diǎn)評 DPUX 專場《戰(zhàn)略導(dǎo)向下的設(shè)計價值拓展》線下分享會的時候,其中也講到了關(guān)于用戶的7大基本心理特征——七宗罪:憤怒,淫欲,貪婪,懶惰,嫉妒,暴食,驕傲。

我覺得這也是能夠讓用戶產(chǎn)生動機(jī)的七大因素 ,比如經(jīng)常被廣告商拿來利用的俗稱「性賣點(diǎn)」的廣告設(shè)計元素 ,利用人性的窺探欲,吸引用戶付諸行動……

當(dāng)我們知道了用戶采取行動的幾類核心動機(jī)后,我們可以通過一些心理學(xué)的方法來刺激用戶的這些動機(jī)。

我在 Nir Eyal 的書中了解到一些關(guān)于啟發(fā)法等認(rèn)知偏差對人類行為的影響,比如稀缺效應(yīng),首因效應(yīng),環(huán)境效應(yīng),投射效應(yīng),近因效應(yīng),錨定效應(yīng),贈券效應(yīng),目標(biāo)漸進(jìn)效應(yīng)等 。

比如很多電商平臺商家會故意將商品庫存降低,當(dāng)產(chǎn)品數(shù)量由多變少的時候,它在用戶心中的價值就會提高,那么用戶購買的動機(jī)就會增強(qiáng),這就是利用了稀缺效應(yīng) ;

再比如目標(biāo)漸進(jìn)效應(yīng),大意是講當(dāng)用戶認(rèn)為自己距離目標(biāo)越來越近時,完成任務(wù)的動機(jī)會更加強(qiáng)烈。

目標(biāo)漸進(jìn)效應(yīng)讓我突然想到長沙的網(wǎng)紅奶茶——茶顏悅色的集點(diǎn)卡,大概就是積滿6點(diǎn)可以送一杯奶茶,我在第一次買第一杯的時候,他們給了我一張集點(diǎn)卡,上面已集了1個點(diǎn),意思就是說我再集5個點(diǎn)就可以兌換一杯奶茶了,但是如果換一種方式,它把規(guī)則改成集5點(diǎn)可以兌換一杯奶茶,但是我買第一杯的時候,他們給我的卡上是空白的,沒有點(diǎn),那么你們覺得這兩種方式,哪種方式更能讓用戶產(chǎn)生集點(diǎn)的動機(jī)呢?

總結(jié)

  • 要促成某種行為,觸發(fā),動機(jī),能力這三者缺一不可,B=MAT;
  • 觸發(fā)要顯而易見,行為要易于實(shí)施,動機(jī)要合乎常理;
  • 觸發(fā)分外部觸發(fā)和內(nèi)部觸發(fā),外部觸發(fā)包括付費(fèi)型觸發(fā),回饋型觸發(fā),人際型觸發(fā),自主型觸發(fā);內(nèi)部觸發(fā)可以從痛點(diǎn)、癢點(diǎn)、爽點(diǎn)來分析;
  • 影響任務(wù)難易程度,也就是能力的6個要素包括:時間、金錢、體力、腦力、社會偏差、非常規(guī)性;
  • 動機(jī)是行動時擁有的熱情,采取行動的核心動機(jī)有三大類;
  • 可以利用啟發(fā)法來獲取靈感,提高產(chǎn)品吸引力,刺激用戶的動機(jī);
  • 因?yàn)樵鰪?qiáng)動機(jī)往往耗時費(fèi)力,所以一般先解決能力問題,再解決動機(jī)問題

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




如何利用「行為模型」讓用戶行動起來?

資深UI設(shè)計者

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


想一個問題吧,如果有人給你發(fā)了一條微信,你沒有回復(fù) ta,原因是什么?

  • 可能是給你發(fā)消息的人對你來說不重要?或者消息內(nèi)容不重要,不需要立刻回復(fù)?
  • 可能是你暫時特別忙,沒有時間回復(fù)?
  • 也可能是你的微信關(guān)閉了消息提醒,沒有聽到手機(jī)震動,不知道有人給你發(fā)了消息……

原因會有很多種,但是幾乎每一種原因都可以對應(yīng)到更深的層次。比如給你發(fā)消息的人對你而言不重要,是因?yàn)槿狈α嘶貜?fù)的動機(jī);沒時間回復(fù)是因?yàn)槿狈α嘶貜?fù)的能力;關(guān)閉了提醒是缺乏了回復(fù)的觸發(fā)因素……

動機(jī),能力,觸發(fā)三大要素,是讓用戶產(chǎn)生行為必不可少的三大條件,在行為模型里也十分重要。

一、什么是行為模型?

最早在 Norman 的《設(shè)計心理學(xué)》了解到關(guān)于行動的幾個步驟,他將行動拆分為目標(biāo),執(zhí)行,評估三大階段,每一階段又分為幾個步驟,簡單畫了邏輯圖 :

但是很多時候會發(fā)現(xiàn),用戶不一定會按我們所設(shè)想的方式去使用我們的產(chǎn)品,特別是注冊,購買等能提升轉(zhuǎn)化率的行為……我在查詢了一些關(guān)于心理學(xué)方面的內(nèi)容后,發(fā)現(xiàn)了用戶不進(jìn)行這些行為,其實(shí)都是有可以解釋的依據(jù)的,并且我們還可以利用這些依據(jù)來改善我們的產(chǎn)品。

從前面微信的例子,我們可以得知,要想讓用戶產(chǎn)生行為(Behavior),必須具備三個要素:充分的動機(jī)(Motive),完成這一行為的能力(Ability),促使人們付諸行動的觸發(fā)(Trigger),這三者缺一不可。

于是我們可以得出一個行為模型:B=MAT,我們可以從數(shù)學(xué)的角度類比出人們產(chǎn)生行為的「臨界點(diǎn)」,可以稱為「行動邊界線」(當(dāng)然這是我自己瞎取的名字,方便理解),只有用戶跨越了「行動邊界線」,才能實(shí)施或者產(chǎn)生某種行為。

二、關(guān)于Trigger——觸發(fā)

所謂觸發(fā),就是促使用戶做出某種舉動的誘因,引發(fā)用戶去使用你的產(chǎn)品。

比如通過在其他平臺廣告推廣等付費(fèi)方式吸引新用戶,這個可以稱為「付費(fèi)型觸發(fā)」;

還有一些公關(guān)、媒體新聞的正面報道 ,app store 里面排行榜,AppSo 推薦好用應(yīng)用等不需要付費(fèi),但是能夠吸引用戶使用你的產(chǎn)品,這個可以稱為「回饋型觸發(fā)」;

還有熟人之間的相互推薦,親朋好友的口碑相傳,這種方式十分常見,也是能夠讓產(chǎn)品大規(guī)模獲取用戶的一種方式,我們可以稱為「人際型觸發(fā)」。

但是這種方式經(jīng)常會被惡意利用,比如我們經(jīng)??吹降模悍窒鞽X到幾個群即可領(lǐng)取XXX優(yōu)惠,最后卻發(fā)現(xiàn)是騙人的方式,利用這種方式也許可以獲取大批用戶,但是一旦用戶發(fā)現(xiàn)被欺騙后就會立即停止使用你的產(chǎn)品,你也會失去用戶的信任。

還有一種是以驅(qū)動用戶重復(fù)某種行為的方式,用戶主動與產(chǎn)品保持聯(lián)系,比如用戶注冊了某個平臺的賬戶,訂閱了它們的內(nèi)容更新,開啟了消息推送,那么每一次更新推送就很有可能觸發(fā)用戶使用你的產(chǎn)品,這種方式可以稱為「自主型觸發(fā)」。

以上四種觸發(fā)方式,都是來源于外部環(huán)境,那么我們可以將其稱為「外部觸發(fā)」。

昨晚在 PM CIRCLE 里面看到大家在談?wù)撽P(guān)于痛點(diǎn)、癢點(diǎn)、爽點(diǎn)的問題,也出了系列文章,后來在知乎上也搜了相關(guān)大佬的回復(fù)。

小小的總結(jié)一下:

  • 「痛點(diǎn)」可以解釋為痛苦的點(diǎn),用戶在不滿,抱怨,生氣,恐懼等負(fù)面情緒會產(chǎn)生痛點(diǎn);
  • 「癢點(diǎn)」可以理解為虛擬自我的實(shí)現(xiàn),比如 B612 的瘦臉大眼,現(xiàn)實(shí)生活中的很難實(shí)現(xiàn)的,在 B612 里面能夠讓用戶得以釋放和解脫,映射出虛擬自我;
  • 「爽點(diǎn)」就是老生常談的即時滿足了,壓抑久了的需求突然被滿足,那就是爽,有需求,還能即時滿足,那么就是爽。

為什么我會提到「痛點(diǎn)」、「癢點(diǎn)」、「爽點(diǎn)」?是因?yàn)槲矣X得這三者是從內(nèi)部來觸發(fā)用戶采取下一步行動。

Nir Eyal 將情緒觸發(fā)分為兩種,一種為負(fù)面情緒,一種為正面情緒,兩種情緒皆可觸發(fā)用戶采取行動,但是我覺得如果利用「痛點(diǎn)」、「癢點(diǎn)」、「爽點(diǎn)」來分析內(nèi)部觸發(fā)的話會更好,這三點(diǎn)通過深入挖掘用戶內(nèi)在的情感體驗(yàn),設(shè)計出滿足用戶需求的產(chǎn)品,利用這三點(diǎn)也可以觸發(fā)用戶使用你的產(chǎn)品。

可以思考一下,人們?yōu)槭裁匆l(fā)朋友圈,發(fā)微博?為什么要拍照?為什么要刷抖音?為什么朋友圈更新出現(xiàn)小紅點(diǎn)后我就要去點(diǎn)擊看?用戶借助這些產(chǎn)品實(shí)現(xiàn)了怎樣的目的?消除了什么樣的煩惱?使用完這些產(chǎn)品后用戶感受如何?等等問題。

三、關(guān)于Ability——能力

可以把能力解釋為完成該行為的難易程度

Hauptly,Denis J 有一個觀點(diǎn)就是:當(dāng)你使用某個產(chǎn)品時所需花費(fèi)的步驟能被縮減或者是優(yōu)化時,用戶使用它的頻率就會增加。他在《Something Really New》一書中,歸納了產(chǎn)品創(chuàng)新的三個步驟,簡單畫了下步驟圖:

結(jié)合今天的科技變化,我們可以知道,將行為簡單化可以推動產(chǎn)品創(chuàng)新,也只有將行為簡單化,用戶才會具備完成這一行為的能力。

福格總結(jié)了簡潔性包含的6個元素,也就是影響任務(wù)難易程度的6個要素,簡單總結(jié)下:

福格建議,為了增加用戶實(shí)施某個行為的可能性,設(shè)計人員在設(shè)計產(chǎn)品時,應(yīng)該關(guān)注用戶最缺乏什么。

也就是說,要弄清楚是什么原因 阻礙了用戶完成這一活動:是時間不夠嗎?還是缺乏資金?還是完成這一活動太耗體力了?或者是用戶不想動腦筋?或者是這個產(chǎn)品與他們所處的社會環(huán)境格格不入?甚至是它太逾越常規(guī),以至讓人難以接受?

我記得我第一份實(shí)習(xí),做的一款新聞app,那個時候還不懂交互也不懂產(chǎn)品,我記得在首頁查看新的新聞內(nèi)容的時候 ,因?yàn)閿?shù)據(jù)加載量的原因,每次只能加載一定數(shù)量的新聞,所以當(dāng)時設(shè)計的是一個「查看更多」的列表?xiàng)l,用戶每次需要加載更多新聞內(nèi)容的時候,都需要點(diǎn)擊一次「查看更多」加載大約6條新的新聞,其實(shí)現(xiàn)在想想,為什么我們不設(shè)計一個自動加載呢?每次用戶上拉的時候,自動加載一部分,這樣能夠讓操作更加便捷,節(jié)約時間。

四、關(guān)于Motive——動機(jī)

觸發(fā)是提醒用戶采取行動,而動機(jī)決定用戶是否愿意采取行動,也就是用戶行動時擁有的熱情。在心理學(xué)里面,福格博士歸納了驅(qū)使用戶采取行動的三大類核心動機(jī):

能夠成為某些人行為動機(jī)的東西,未必適用于另外一些人,所以,我們需要知道自己的目標(biāo)用戶到底需要什么。

舉個例子:比如抖音的一些視頻封面,是一些漂亮的女生封面,而對于大都數(shù)男生來說,為了追求快樂,就有了點(diǎn)擊進(jìn)去看的動機(jī),而這種動機(jī)對于另外一些女性用戶就不一定適用。

前幾天在聽 UCDCHINA 上海 大眾點(diǎn)評 DPUX 專場《戰(zhàn)略導(dǎo)向下的設(shè)計價值拓展》線下分享會的時候,其中也講到了關(guān)于用戶的7大基本心理特征——七宗罪:憤怒,淫欲,貪婪,懶惰,嫉妒,暴食,驕傲。

我覺得這也是能夠讓用戶產(chǎn)生動機(jī)的七大因素 ,比如經(jīng)常被廣告商拿來利用的俗稱「性賣點(diǎn)」的廣告設(shè)計元素 ,利用人性的窺探欲,吸引用戶付諸行動……

當(dāng)我們知道了用戶采取行動的幾類核心動機(jī)后,我們可以通過一些心理學(xué)的方法來刺激用戶的這些動機(jī)。

我在 Nir Eyal 的書中了解到一些關(guān)于啟發(fā)法等認(rèn)知偏差對人類行為的影響,比如稀缺效應(yīng),首因效應(yīng),環(huán)境效應(yīng),投射效應(yīng),近因效應(yīng),錨定效應(yīng),贈券效應(yīng),目標(biāo)漸進(jìn)效應(yīng)等 。

比如很多電商平臺商家會故意將商品庫存降低,當(dāng)產(chǎn)品數(shù)量由多變少的時候,它在用戶心中的價值就會提高,那么用戶購買的動機(jī)就會增強(qiáng),這就是利用了稀缺效應(yīng) ;

再比如目標(biāo)漸進(jìn)效應(yīng),大意是講當(dāng)用戶認(rèn)為自己距離目標(biāo)越來越近時,完成任務(wù)的動機(jī)會更加強(qiáng)烈。

目標(biāo)漸進(jìn)效應(yīng)讓我突然想到長沙的網(wǎng)紅奶茶——茶顏悅色的集點(diǎn)卡,大概就是積滿6點(diǎn)可以送一杯奶茶,我在第一次買第一杯的時候,他們給了我一張集點(diǎn)卡,上面已集了1個點(diǎn),意思就是說我再集5個點(diǎn)就可以兌換一杯奶茶了,但是如果換一種方式,它把規(guī)則改成集5點(diǎn)可以兌換一杯奶茶,但是我買第一杯的時候,他們給我的卡上是空白的,沒有點(diǎn),那么你們覺得這兩種方式,哪種方式更能讓用戶產(chǎn)生集點(diǎn)的動機(jī)呢?

總結(jié)

  • 要促成某種行為,觸發(fā),動機(jī),能力這三者缺一不可,B=MAT;
  • 觸發(fā)要顯而易見,行為要易于實(shí)施,動機(jī)要合乎常理;
  • 觸發(fā)分外部觸發(fā)和內(nèi)部觸發(fā),外部觸發(fā)包括付費(fèi)型觸發(fā),回饋型觸發(fā),人際型觸發(fā),自主型觸發(fā);內(nèi)部觸發(fā)可以從痛點(diǎn)、癢點(diǎn)、爽點(diǎn)來分析;
  • 影響任務(wù)難易程度,也就是能力的6個要素包括:時間、金錢、體力、腦力、社會偏差、非常規(guī)性;
  • 動機(jī)是行動時擁有的熱情,采取行動的核心動機(jī)有三大類;
  • 可以利用啟發(fā)法來獲取靈感,提高產(chǎn)品吸引力,刺激用戶的動機(jī);
  • 因?yàn)樵鰪?qiáng)動機(jī)往往耗時費(fèi)力,所以一般先解決能力問題,再解決動機(jī)問題

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


如何從0到1建立設(shè)計規(guī)范

資深UI設(shè)計者


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


最近一段時間一直在建立APP的設(shè)計規(guī)范,從一開始的立項(xiàng)到現(xiàn)在落地上線,可以說是從零開始進(jìn)行APP全部細(xì)節(jié)的梳理并且規(guī)定規(guī)范,這一路走過來還是能總結(jié)出很多心得,本文將分為3個部分,闡述如何從0到1建立設(shè)計規(guī)范。


目錄:

一、如何確定內(nèi)容,規(guī)范里要寫什么

二、如何寫

三、如何推動規(guī)范落地


一、如何確定內(nèi)容?


這里我總結(jié)了三步:


Image title



1)確定目標(biāo)用戶、用戶目標(biāo)、設(shè)計目標(biāo)

根據(jù)不同的用途和目標(biāo),不同的團(tuán)隊對設(shè)計規(guī)范的制定是不一樣。比如為了指導(dǎo)與規(guī)范全球第三方開發(fā)者進(jìn)行設(shè)計和開發(fā),Google建立的Material Design覆蓋面廣,每個組件細(xì)節(jié)寫得非常細(xì)致。Ant Design則是直接做出了組件,方便直接進(jìn)行調(diào)用。有些國內(nèi)設(shè)計團(tuán)隊的規(guī)范則是主要描述常用控件和色值。因此我們需要確立用戶目標(biāo)和設(shè)計目標(biāo),這樣才能確定我們的規(guī)范側(cè)重點(diǎn)是什么,需要做成怎么樣的形式。


在這里我列舉了自己撰寫規(guī)范時的用戶與目標(biāo):


Image title



2)模范大平臺,先列全

一個規(guī)范里面的東西是很多的,那么我們究竟需要做什么呢?假如一開始我們沒有方向,找一個,列一個,這樣我們很容易疏漏很多情況。在這里我采用的的一個辦法是:首先熟讀iOS,Material Design規(guī)范,并且模范他們,在腦圖中,把規(guī)范中應(yīng)含有的所有內(nèi)容羅列出來,羅列一個大綱。


這里我列舉當(dāng)時自己做的一個腦圖大綱,覆蓋了主流規(guī)范中的所有細(xì)節(jié),大家可以進(jìn)行參考并模仿:

Image title



3)針對自己情況進(jìn)行刪減

列完齊全的大綱后,我們需回顧設(shè)計目標(biāo),對大綱里的內(nèi)容進(jìn)行刪減。(比如在組件、模式這些地方,可以對著自己的APP,進(jìn)行挨個尋找,看自己的APP當(dāng)前是不是運(yùn)用了這個組件,沒有的話就進(jìn)行刪減。)


在這里我列舉了針對自身APP的情況刪減后的大綱圖:

Image title

二、如何寫

進(jìn)過了以上的三步,我們基本得出了要寫什么的框架了,接下來就是如何寫規(guī)范的階段。


這里我總結(jié)了3步:

Image title


1)確定優(yōu)先級

我們可以通過版本迭代計劃+性價比+重要性(該組件在頁面出現(xiàn)的場景次數(shù)以及當(dāng)前的不統(tǒng)一對APP體驗(yàn)影響程度)這幾個維度分別確定每塊內(nèi)容的優(yōu)先級和分工?;A(chǔ)的、必要的、高性價比的放在第一期,復(fù)雜的向后放,隨著產(chǎn)品的迭代,我們的規(guī)范也會越來越完整。


同時需要留意版本規(guī)劃,了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內(nèi)容的優(yōu)先級。龐大復(fù)雜,牽涉到很多頁面的,我們可以先降低其優(yōu)先級:比如全局提示框的規(guī)范,toast的規(guī)范。


同時,我們也需常與開發(fā)溝通,爭取把可復(fù)用性高、組件日后變化幅度少的組件做成開發(fā)組件庫。


2)確定規(guī)范書寫格式

我們制定的規(guī)范本身也是設(shè)計的交付物,假如每個設(shè)計師都按照自己的喜好來編寫規(guī)范,那么這個規(guī)范本身也會變得不規(guī)范,規(guī)范自身保持一致性是提高規(guī)范閱讀效率的一部分。


我們可以回歸我們之前制定的用戶目標(biāo)和設(shè)計目標(biāo)來制定我們規(guī)范的書寫格式。規(guī)范的用戶群是誰,主要想達(dá)到什么作用,是通過文檔展示還是網(wǎng)上展示,確定了這些問題后,就可確定規(guī)范的詳細(xì)程度、主要的展示形式(比如前文說到的Ant Design和Material Design)。


這里我的思考點(diǎn)是:假如規(guī)范寫太多字就會變得很臃腫,沒有人喜歡慢慢仔細(xì)的閱讀你寫的規(guī)范,所以我們應(yīng)該做到寫得簡明扼要,再輔以例子說明(根據(jù)開發(fā)的習(xí)慣,都是喜歡直接看例子,看標(biāo)注)。


我的書寫格式是:先寫描述這個組件是什么,再列舉出現(xiàn)的場景,然后編寫交互規(guī)則,最后給出視覺標(biāo)注+例子。


3)逐步對單個規(guī)范進(jìn)行整理與書寫

當(dāng)確定了要寫什么東西和格式之后,我們開始進(jìn)入到細(xì)節(jié),對每個內(nèi)容進(jìn)行整理,制定規(guī)范了。


通過對每個內(nèi)容制定規(guī)范規(guī)范也是有方法的:


Image title


下面我通過整理“列表”這個規(guī)范來講解:


1.收集出現(xiàn)的所有的場景。

當(dāng)一個產(chǎn)品已經(jīng)趨于成熟,這個組件出現(xiàn)的場景就會非常多,比如對話框,toast,列表這些組件出現(xiàn)的地方很多,需要我們自己仔細(xì)地體驗(yàn)產(chǎn)品,把所有頁面都找出來。


2.提取共性,歸納分類

我們需要分析每個頁面的特點(diǎn)并且把相同特點(diǎn)的頁面歸納一起,眾多的頁面場景就能整理成幾個典型的種類,然后只需對這幾個典型的種類進(jìn)行定義和描述即可。

在列表中,我分為了大封面列表、小封面列表、用戶列表、單行列表


3.編寫規(guī)則

在分類好后,我們可以對每個種類編寫規(guī)則,在這里我們需要描述好每個種類有什么特點(diǎn)或?qū)傩裕裁磿r候場景下適用,并且給出標(biāo)注和例子,方便閱讀者理解。


4.多與組內(nèi)成員討論修改

在制定好初稿后,我們可以與組內(nèi)成員宣講下自己制定的規(guī)范。多從別人的角度出來,確保你編寫的規(guī)范是否易懂,是否包含了全部的情況,是否容易執(zhí)行落實(shí)。


三、如何推動規(guī)范落地

寫完內(nèi)容后,最重要的一步就是推動落地,規(guī)范要真正有人用才能體現(xiàn)價值,在這里我給出幾點(diǎn)幫助推動規(guī)范落地的小建議:

1.制定規(guī)范推進(jìn)進(jìn)度表

表格里面應(yīng)該包含規(guī)范制定的優(yōu)先級,分工進(jìn)度,分工人員,并且確定每一期進(jìn)度的交付時間,開會討論的時間,作為負(fù)責(zé)人,也可以適時提醒成員每次的開會時間(畢竟deadline是第一生產(chǎn)力)。


2.編寫過程中多與其他成員討論,達(dá)成一致性共識

制定規(guī)范后,與部門其他人員進(jìn)行宣講,灌輸概念,針對如何更好的落實(shí)進(jìn)行討論調(diào)整。在設(shè)計中都不可能一次就完美,我們需要不斷的在修改中逐漸完善。


3.規(guī)范建成后放在網(wǎng)上

同步在網(wǎng)上,方便部門內(nèi)的其他成員能隨時查看和團(tuán)隊成員對規(guī)范的更新修改、同步。


4.強(qiáng)制性制定規(guī)則要求團(tuán)隊成員執(zhí)行

有明確的懲罰機(jī)制和要求才能更好的執(zhí)行,不然在規(guī)范制定后很容易健忘此事。(我們組的懲罰機(jī)制就是罰錢)。


5.規(guī)范保持持續(xù)的更新迭代。

規(guī)范推動落地后并不是完全了事,要根據(jù)產(chǎn)品的迭代,保持規(guī)范的更新。

這整個制定規(guī)范的項(xiàng)目中,還是有不少反思的地方,值得我們深思和注意:


1.切記不要為設(shè)計規(guī)范而做規(guī)范

規(guī)范最重要的點(diǎn)是能推動落地,能確確實(shí)實(shí)改善產(chǎn)品,達(dá)到統(tǒng)一性。因此我們在設(shè)計規(guī)范時,并不需要“高大上”術(shù)語,給出一大堆的設(shè)計理念用來提升設(shè)計逼格。而是真正的回歸到我們的設(shè)計目標(biāo),針對目標(biāo)用戶制定規(guī)范,做到簡樸、易懂、能落地。

2.沒人愿意閱讀長篇文字

我們應(yīng)該盡量控制文案長度,做到通俗易懂即可。

3.要時刻圍繞我們的目標(biāo)做規(guī)范

比如,我這次做的規(guī)范中有一項(xiàng)是去工具化,在制定控件中,空白頁面中就會加入很多趣味化的設(shè)計。


4.靈活變通

規(guī)范只是適合大多時候的場景,對于一些規(guī)范中沒有包含或者不符合規(guī)范的場景,我們可以靈活變通,積極創(chuàng)新或者是補(bǔ)充新的規(guī)范(前提是與組內(nèi)積極溝通,達(dá)成共識)。


總結(jié):

再來回顧如何從0到1建立規(guī)范


一、確定內(nèi)容

1.確定用戶目標(biāo)和設(shè)計目標(biāo)

2.模仿大平臺,列全

3.針對自己情況進(jìn)行縮減


二、寫

1.確定優(yōu)先級

2.確定規(guī)范書寫格式

3.逐步對單個內(nèi)容進(jìn)行整理與書寫:a.收集全部情況 b.分類歸納 c.提取共性,編寫規(guī)則

三、推動

1.制定規(guī)范推進(jìn)進(jìn)度表

2.編寫過程中多與其他成員討論

3.把規(guī)范建成后放在網(wǎng)上

4.強(qiáng)制性制定規(guī)則要求團(tuán)隊成員執(zhí)行

5.規(guī)范保持持續(xù)的更新迭代


今天分享的內(nèi)容就是這些了,希望能幫助到大家,感謝閱讀~



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


用Airbnb 的產(chǎn)品,幫你快速理解尼爾森10大可用性原則!

資深UI設(shè)計者

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

本文聚焦 Airbnb 產(chǎn)品,描述10大可用性原則的應(yīng)用場景,希望能夠幫助你更系統(tǒng)地理解10大可用性原則。

一、系統(tǒng)狀態(tài)的可見性

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson

系統(tǒng)應(yīng)該在合理的時間內(nèi)通過適當(dāng)?shù)姆答仯冀K讓用戶了解正在發(fā)生的事情。

這項(xiàng)原則通常被遵循并使用在如下幾個場景:

  • 系統(tǒng)導(dǎo)航、Toast。讓用戶明確知道「我在哪」;
  • 按鈕、圖片等元素可被交互的表達(dá)與反饋。通過視覺、與空間上的反饋,向用戶傳達(dá)頁面元素是可以被交互的,引導(dǎo)用戶前往下一站;
  • 用戶完成交互動作和系統(tǒng)操作后,系統(tǒng)需要給予用戶對應(yīng)的反饋。比如操作成功、完成注冊等;

Airbnb 的房源詳情頁頂部導(dǎo)航,可以通過點(diǎn)擊快速定位到房源的某類信息,讓用戶清晰地知道「我在哪?我還能去哪?」

在發(fā)布房源時,系統(tǒng)頂部模擬了進(jìn)度條,顯示出了當(dāng)前步驟,以及當(dāng)前的發(fā)布進(jìn)度。

二、貼近用戶的真實(shí)環(huán)境

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson

系統(tǒng)應(yīng)該說用戶的語言,用戶熟悉的單詞,短語和概念,而不是系統(tǒng)導(dǎo)向的術(shù)語。遵循現(xiàn)實(shí)世界的約定,使信息以自然和合乎邏輯的順序出現(xiàn)。

這項(xiàng)原則說的直白一些,就是:「說人話」。

產(chǎn)品簡單到傻瓜也能操作,是喬布斯和張小龍做產(chǎn)品的核心理念。坐擁10億用戶的微信之父張小龍說過,做產(chǎn)品要有傻瓜心態(tài)。不要炫耀自己的智商,不要讓用戶覺得自己是白癡,請用最簡單直白的語言描述狀況;就好比自然世界里,你和他人說話的時候必然使用簡單的白話文進(jìn)行直白的溝通以保證交流順暢。

在房源的詳情頁、Airbnb PLUS 介紹頁,系統(tǒng)用了大量高質(zhì)量的攝影圖片傳達(dá)一種空間氛圍感。同時,在介紹文案的措辭方面,簡潔易懂,語言邏輯清晰。

三、用戶有控制和來去自由的權(quán)利

User control and freedom

Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson

用戶通常會錯誤地選擇了系統(tǒng)的某個功能,并且需要一個明確標(biāo)記的」緊急出口「來離開不想要的狀態(tài),而不必進(jìn)行擴(kuò)展對話。支持撤消和重做。

用戶擁有自由使用和控制系統(tǒng)的權(quán)利,最為常見的就是系統(tǒng)會為用戶提供「撤銷、重做、返回」的入口。

在故事專欄,當(dāng)用戶在瀏覽器當(dāng)前標(biāo)簽頁進(jìn)入下一級頁面時,系統(tǒng)都為用戶提供了返回按鈕,一方面方便用戶來去自由,另一方營造出了一定的沉浸式瀏覽體驗(yàn)。

四、系統(tǒng)的一致性

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson

用戶不應(yīng)該懷疑不同的話語、情況或行為是否在表達(dá)同樣的一件事情。系統(tǒng)設(shè)計需遵循平臺慣例。

  • 移動端 APP 內(nèi)的返回按鈕位置通常會被放在左上角,當(dāng)然有些 APP 會將返回按鈕統(tǒng)一放在左下角,雖然返回按鈕的位置不同于大多數(shù) APP,但對于此 APP 的返回交互來說,其實(shí)還是一致的;
  • 除常用按鈕位置需要符合一致性原則外,icon 的視覺設(shè)計也要遵循一致性原則,一個對象對應(yīng)一個 icon.

在房源、故事集列表頁,系統(tǒng)統(tǒng)一用了卡片式的視覺風(fēng)格,并且每個卡片里的文字與背景圖片的層次也都保持一致。

在房源詳情頁,系統(tǒng)使用了統(tǒng)一的 iocn 風(fēng)格和文字風(fēng)格,傳達(dá)房源的設(shè)施屬性。

五、防止錯誤

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson

比良好的錯誤提示信息更好的方法是:一個走心的設(shè)計可以提前防止錯誤的發(fā)生。系統(tǒng)要么消除容易出錯的情況,要么檢查它們,并在用戶采取行動之前向用戶提供確認(rèn)選項(xiàng)。

  • 比如某些操作不能進(jìn)行,那就置灰或隱藏,不要在用戶點(diǎn)擊后才提醒不能操作。如果有某些內(nèi)容不能選擇,就置灰或者隱藏,不要等用戶點(diǎn)擊完成時才告知不能使用;
  • 同樣,在用戶容易出現(xiàn)錯誤操作的場景下,需要給出二次確認(rèn),如:刪除和取消重要信息的操作。

如果房源在某天或多天已被預(yù)定或暫時不開放,則日歷里將這些不可預(yù)定的日期置灰。

用戶在修改個人重要信息后,系統(tǒng)會讓用戶輸入密碼二次確認(rèn)。

六、系統(tǒng)識別勝過用戶記憶

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson

通過使用對象,動作和選項(xiàng)的可視化表達(dá),最大限度地減輕用戶的記憶負(fù)擔(dān)。用戶不應(yīng)該記住從對話的一部分到另一部分的信息。

  • 為用戶保留查看和搜索歷史是一個很常見的系統(tǒng)識別的例子;
  • 用戶在填寫一個長頁面表單時,系統(tǒng)可以根據(jù)實(shí)際情況提供一個實(shí)時預(yù)覽的功能,避免出現(xiàn)用戶填了下面忘了上面的情況;
  • 用戶在填寫完表單(比如訂單頁面)后,系統(tǒng)可以再次向用戶展示所填信息,以最終確認(rèn);
  • 用戶為了完成一項(xiàng)目標(biāo)任務(wù),從一個頁面跳轉(zhuǎn)到另一個頁面后,系統(tǒng)可以再次展示上一個頁面內(nèi)與目標(biāo)任務(wù)相關(guān)的核心信息,以減輕用戶的記憶負(fù)擔(dān)。

系統(tǒng)會在首頁第一屏為用戶展示瀏覽歷史(登錄后)。

搜索框也會保留最近5次的搜索歷史。

七、靈活易用的使用體驗(yàn)

Flexibility and efficiency of use

Accelerators?—?unseen by the novice user?—?may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson

一些被精心設(shè)計的體驗(yàn)也許會被專家用戶察覺到,使系統(tǒng)需要能夠滿足無經(jīng)驗(yàn)和有經(jīng)驗(yàn)的用戶。允許用戶進(jìn)行頻繁的操作。

當(dāng)用戶在滾動屏幕瀏覽房源詳細(xì)信息時,系統(tǒng)將預(yù)定的基本信息(如:價格、日期、人數(shù)等)固定在瀏覽器的右側(cè),方便用戶在瀏覽過程中隨時開始預(yù)定步驟。

八、美觀和簡約的設(shè)計

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson

對話中不應(yīng)該包含無關(guān)緊要或很少需要的信息。在對話中每增加一個相對重要的信息,就意味著需要弱化其他信息。

高顏值不需要理由。

九、幫助用戶識別,診斷,并從錯誤中恢復(fù)

Help users recognize, diagnose,and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson

錯誤信息應(yīng)該用通俗易懂的語言表達(dá)(不要用代碼),較準(zhǔn)確的反應(yīng)問題,并且提出解決方案。

實(shí)在無法避免的報錯時,不要單純只是報錯,要提供解決方案。就好比小時候犯錯,你絕不能光說:「啊,我錯了?!估蠋熁蚣议L必然會追問:「錯哪兒啦?」你要是說不出緣由,則必定被認(rèn)為認(rèn)錯不誠懇不真心。

當(dāng)用戶填寫錯誤時,系統(tǒng)會及時給出提示以及解決方法。

十、幫助文檔

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson

如果系統(tǒng)能讓用戶不需要閱讀文檔就會使用那是最好的,但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索,且專注于用戶的目標(biāo)任務(wù),并列出具體的步驟來告知用戶。

  • 對于一些可以用一句話說清楚的幫助,可以直接在對象旁邊提供鼠標(biāo)懸停出發(fā)的 tips,或者簡明的輔助說明;
  • 對于較復(fù)雜的,一兩句話說不清楚的幫助,則需要跳轉(zhuǎn)至對應(yīng)的幫助頁面;
  • 系統(tǒng)需要有一個幫助中心,為用戶提供模糊搜索、分類搜索,來為用戶提供更全面的幫助。

在個人資料頁面,對于用戶關(guān)心的隱私信息,系統(tǒng)會給出非常有親和力的解釋文案。此外,在系統(tǒng)很多頁面都有對應(yīng)功能的幫助鏈接以跳轉(zhuǎn)至幫助中心。

系統(tǒng)的幫助中心,提供了搜索和問題分類引導(dǎo),方便用戶快速定位問題。

△ 本文圖片版權(quán)歸 Airbnb 所有

總結(jié)

號稱以設(shè)計驅(qū)動的 Airbnb 公司,的確在產(chǎn)品設(shè)計、用戶研究、UX設(shè)計方面展現(xiàn)出了較高的功力。網(wǎng)站甚至移動端APP 的框架層、范圍層、視覺層的設(shè)計都體現(xiàn)出了高度的用戶體驗(yàn)一致性和品牌感??梢钥闯?,Airbnb 對 design system 的重視一級高度的執(zhí)行力。什么是好的產(chǎn)品品牌認(rèn)知和識別,我可以簡單的理解為:「脫掉」Logo,用戶照樣認(rèn)識你。

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

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

資深UI設(shè)計者


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


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

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

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

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

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

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

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

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

2. 制作原型過程受阻

產(chǎn)品團(tuán)隊通常會力圖制作出有效有用的原型。當(dāng)制作出來的原型不可用甚至根本無法完成的時候,整個團(tuán)隊會為之氣餒,而這種消極的心態(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)隊常常在擁有第一個想法的時候,就想堅持住,將它打磨成為最終的解決方案。隨后,團(tuán)隊花費(fèi)大量的時間來出揣摩嘗試,調(diào)整細(xì)節(jié),制作原型,甚至直接開始設(shè)計視覺稿。

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

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

4. 愛上你的原型

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

不要拿原型當(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)隊一起從技術(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)隊設(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)隊之間,最健康的關(guān)系之一。

現(xiàn)如今,身為設(shè)計師的我們在使用 Photoshop、InVision 等工具制造原型的時候,實(shí)際上開發(fā)可能是與之脫節(jié)的。產(chǎn)品團(tuán)隊中,設(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.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計  ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


想用設(shè)計化腐朽為神奇,你得先想明白這10個問題

資深UI設(shè)計者


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


今天的譯文同樣來自設(shè)計師 Eugen E?anu,他將經(jīng)典設(shè)計書《Don‘t Make Me Think》中的內(nèi)容梳理出來供你參考。這些老問題依然能夠給我們今天的新局面以啟發(fā)。

「好設(shè)計應(yīng)該是顯而易見的」,這句老話在過去的幾個世紀(jì)當(dāng)中影響到了各個不同的領(lǐng)域,從美食到音樂,從建筑到哲學(xué),我們?nèi)缃竦纳顜缀跏窃谶@句話的影響下被逐漸被塑造出來的。

但是同樣的,人類的進(jìn)化并沒有我們想象中那么快速,我們的思維和本能仍然被深刻地影響著我們的決策。換句話來說,人類的行為模式有著很長的保質(zhì)期,在許多事情上,20年前很難做,在今天依然不那么容易去執(zhí)行。

重溫《Don’t Make Me Think》

Steve Krug 的這本《Don’t Make Me Think》中文譯本名字是《點(diǎn)石成金:訪客至上的網(wǎng)頁設(shè)計秘籍》,譯名可能沒有它的原名那么直接,但是也傳遞出這本書所要表達(dá)的核心概念。

這本書成于2000年第一次互聯(lián)網(wǎng)泡沫時代之后,Krug 在這次浪潮之后提出了不少實(shí)用的設(shè)計原則,直到今天仍然有著極高的價值。這本書隨后多次再版和修訂,其中的設(shè)計案例幾經(jīng)迭代升級,我們可以看到現(xiàn)代網(wǎng)頁設(shè)計的提升和進(jìn)步,同時也能從中感受到,用戶——人類行為本身的模式化?!冈L客至上」的表述太過客氣,「不要讓我思考」這一表述更能表現(xiàn)用戶行為的特征,而今天我們所面對的絕大多數(shù)的優(yōu)秀產(chǎn)品,無論是手機(jī)電腦還是汽車,同樣遵循著這一原則。

這本書的成功是建立在無數(shù)痛徹心扉的教訓(xùn)之上,這也使得它本身的價值無與倫比。今天的文章本質(zhì)上也是一篇讀書筆記,設(shè)計師應(yīng)該對于用戶、人性有足夠的認(rèn)知,方可作出足夠優(yōu)秀的設(shè)計。下面的10個總結(jié),既是常見的認(rèn)知錯誤,也是成就好設(shè)計的契機(jī),就看你怎么把握了。

1. 對于內(nèi)容,用戶從來都是掃視,而非用心閱讀

當(dāng)我們在查看內(nèi)容和信息的時候,絕大多數(shù)情況下我們都會下意識尋找讓自己感興趣的東西。比如,我們很少會完整地瀏覽網(wǎng)站上所有的文本和內(nèi)容,為什么?絕大多數(shù)的用戶打開網(wǎng)站都是在試圖完成某項(xiàng)任務(wù),達(dá)成某個目標(biāo),而網(wǎng)頁中的不同部分的內(nèi)容往往是服務(wù)于不同的功能和目標(biāo)的,我們努力達(dá)成目標(biāo)即可,并沒有閱讀全部的必要。不過,作為網(wǎng)站的設(shè)計者,我們往往還是提供了足夠豐富的內(nèi)容和完善的功能,一方面是因?yàn)槲覀冇X得人們需要知道,另一方面也是應(yīng)對不同用戶的需求。正如有的設(shè)計師所說的,它們「增加了體驗(yàn)」。

所以,通常而言,我們可以作出下列優(yōu)化:

  • 大量使用標(biāo)題:通過標(biāo)題告訴用戶這些內(nèi)容都是和什么相關(guān)的,確保用戶能夠在掃視的時候快速明白并做選取。
  • 保持段落精簡:在長段落中,用戶可能稍分神就迷失了,而短段落更容易閱讀,也更容易汲取其中的信息。
  • 使用列表展示:幾乎所有的信息都可以分割為列表來展示,甚至一個使用多個逗號分割的句子,都可以制作成為列表。當(dāng)然,值得注意的是,注意列表之間的行間距,確??勺x性。
  • 突出關(guān)鍵信息:用戶在掃視的時候,主要是在定位關(guān)鍵詞。將關(guān)鍵詞使用粗體等方式標(biāo)注出來,便于用戶掃視和定位。不要強(qiáng)調(diào)太多的內(nèi)容,這樣會失去強(qiáng)調(diào)的作用。

2. 創(chuàng)建卓有成效的視覺層次

視覺層次是確保用戶快速掃視能夠獲取到信息的重要助力。視覺層次能夠呈現(xiàn)出頁面中不同元素之間的優(yōu)先級和關(guān)系,在設(shè)計的時候,同樣需要遵循下面的幾個原則:

  • 重要性越高,越突出。最重要的元素,要么越大,要么越醒目,使用特定的色彩標(biāo)注出來。
  • 在邏輯上有關(guān)聯(lián)的元素,在視覺上應(yīng)該相關(guān)的,例如使用相同的色彩或者相同的視覺樣式。

3. 不要重新發(fā)明輪子

我們明白,用戶總會期望看到新東西,但是,市面上有太多的工具和應(yīng)用,如果各行其是,忽略約定俗成的規(guī)則,特立獨(dú)行地采用自己的規(guī)則,會讓每個應(yīng)用的學(xué)習(xí)成本都提高,這對于用戶幾乎是毫無益處的。

當(dāng)設(shè)計師被要求設(shè)計某個東西的時候,內(nèi)心是充滿重新發(fā)明的沖動的,這個我們都明白。而設(shè)計出和別人相似的東西看起來又有點(diǎn)「政治不正確」,甲方總會希望設(shè)計作出點(diǎn)不一樣的東西。更何況,這還是一個少有鼓勵和贊揚(yáng)的行業(yè),也很少為「最貼合用戶需求」的產(chǎn)品頒設(shè)計獎。

但是設(shè)計仍然需要在各方之間作出最佳的平衡。

在重新發(fā)明輪子之前,你必須了解破壞和創(chuàng)新所意味著的真實(shí)的價值(時間,體驗(yàn),耗費(fèi)的精力和所需的知識)。

4. 產(chǎn)品說明沒必要存在了

我們的工作是要讓產(chǎn)品清晰明了,讓事情便捷易行。即使做不到明顯,也應(yīng)該盡力向著不言自明的設(shè)計靠攏。說明書這種東西是沒有人會主動去看的,它們的存在意義本身就不大,你需要通過合理的設(shè)計,讓產(chǎn)品本身發(fā)揮指引性的效果。即使說明書必須存在,也盡量讓它簡短明了。

如果功能并不明顯,我們應(yīng)該盡量讓它明顯一點(diǎn),讓目標(biāo)更明顯。

以宜家為例,一個需要買回家組裝的柜子,絕大多數(shù)的用戶可以在簡短的指引之下就可以輕松正確地組裝,為什么?因?yàn)榻^大多數(shù)情況下,一個柜子長什么樣,用戶眼前有清晰的畫面,哪怕說明只有幾張簡單的圖片,用戶也不會犯錯。

5. 用戶并不在意產(chǎn)品是怎么運(yùn)作的

絕大多數(shù)的用戶并沒有興趣了解你的產(chǎn)品的工作方式,并不是因?yàn)樗麄儾粔蚵斆鳎瑑H僅是因?yàn)樗麄儾辉诤?。所以,一旦他們確定你的產(chǎn)品是能用的,就很少會去注意其他的部分。

以蘋果的無線耳機(jī) AirPods 為例,從價格上來說,它并不親民,但是它的交互方式和使用體驗(yàn)確實(shí)非常的獨(dú)特和優(yōu)秀,這也不難理解許多用戶會選擇它。用戶在購買它之后,并不會去思考它是如何運(yùn)作的,其中所包含的諸多新技術(shù),對于用戶而言,只是潤物細(xì)無聲地發(fā)揮著作用而已。

我的母親就使用的 AirPods ,她從來不會問我它的原理,但是她很清楚,耳機(jī)需要放在充電盒中充電,和手機(jī)配對之后就能用了,并不復(fù)雜。

6. 來去匆忙的人們,從不主動尋找「微妙的線索」

這一條可能是我最喜歡的。我們設(shè)計師總喜歡為用戶帶來微妙的視覺效果,來給用戶帶來樂趣。對吧?可是如果我告訴你,用戶并不關(guān)心它們,你會怎么想呢?他們也根本不會告訴你他們有多在意或者多不在意,也不會在一次又一次看到的時候?qū)τ谶@些設(shè)計有多少感覺。

為什么會這樣?生活環(huán)境賦予每個用戶以復(fù)雜多變的情境,他們很少有機(jī)會去感受微妙的設(shè)計所帶來的奇妙情緒。風(fēng)在吼,狗在叫,小孩還在滿屋跑,水壺里面水開了,老婆在耳邊抱怨著工作中的細(xì)微末節(jié),而你正在填寫著表單準(zhǔn)備預(yù)訂明天的高鐵票,在那個時刻,APP 當(dāng)中微妙的動效和視覺線索,手一抖,你可能還會多買一個沒有必要的捆綁銷售的酒店折扣券。

但是另外一方面,對于優(yōu)秀體驗(yàn)的追求不應(yīng)該因此而放棄,還有很多用戶會從中受益,這也是促成優(yōu)秀產(chǎn)品的必須因素。只不過確實(shí)有很多用戶沒法去在意它們罷了。

7. 焦點(diǎn)小組的任務(wù)不是做可用性測試

焦點(diǎn)小組是做什么的?一小群人圍坐在桌子旁邊,討論他們對于產(chǎn)品的看法,他們過去的經(jīng)歷,它們的感受和對于新概念的理解。焦點(diǎn)小組的作用是幫你更好地界定目標(biāo)用戶,目標(biāo)用戶的感受等等。

可用性測試則是另外一回事。做可用性測試的時候,通常是為了測試產(chǎn)品而觀察一個特定的用戶使用產(chǎn)品的過程。在測試中,你需要測試人員執(zhí)行特定的操作,以此來查看整個設(shè)計中的概念是否直觀,功能是否需要完善。面對焦點(diǎn)小組的時候,你需要傾聽觀點(diǎn),梳理思路,在進(jìn)行可用性測試的時候,更多需要的是觀察,并且解決具體的問題。

8. 不要讓個人情感替代整個用戶歷程

我們在設(shè)計產(chǎn)品的時候,常常會從自己的需求出發(fā):「我也是一個用戶,所以我知道什么好什么不好?!刮覀儗τ谧约旱南埠糜兄鴱?qiáng)烈的感受。

我們會說,當(dāng)我們的產(chǎn)品具備_____的時候,我們會很喜歡,又或者,我們認(rèn)為_____是一個巨大的痛點(diǎn)。當(dāng)我們真正和團(tuán)隊成員坐在一起討論產(chǎn)品的時候,大家都有各自的看法和各自的情緒,所有人的都有著極強(qiáng)的個性和獨(dú)特的看法,這個情況就很尷尬了。因?yàn)槲覀兂3A向于認(rèn)為絕大多數(shù)的用戶和我們自己一樣。事實(shí)上并不一定如此。

9. 問對問題,才能讓產(chǎn)品走向?qū)Φ姆较?

無論是設(shè)計產(chǎn)品功能還是測試產(chǎn)品的時候,問對問題都很重要。測試的時候,問用戶「你們喜歡下拉菜單嗎」這樣的問題,不僅銷量不高,而且不會帶來價值。這個問題,應(yīng)該這么問:「在這個情況下,在這個頁面上,下拉菜單這種設(shè)計是否能夠給你帶來良好的用戶體驗(yàn)?哪里讓人覺得不舒服?」

諸如「用戶喜歡這個產(chǎn)品嗎」這樣寬泛的問題意義不大,用戶也很難提供針對性的、具體的回復(fù)。

而且,作為設(shè)計師我們不應(yīng)當(dāng)專注于用戶是否喜歡這樣的問題,這樣會失去動力和專注力??捎眯詼y試可以幫你消除各種「喜歡」相關(guān)的問題,并且?guī)湍阏业秸嬲龅氖虑?。這才是重點(diǎn)。

10. 不要讓用戶思考問題

我在哪?我要干嘛?

我應(yīng)該點(diǎn)哪里開始?

他們在這放的這個控件是干啥的?

這個頁面是用來做什么的?

他們?yōu)槭裁催@么稱呼這個功能?

這個是廣告還是內(nèi)置的功能?

在使用產(chǎn)品的時候,如果觸發(fā)用戶大腦中的各種問題,只會增加用戶的心理負(fù)荷和工作量,分散用戶注意力并不是好事,而且用戶本身并不喜歡解決各種難題。

每當(dāng)用戶點(diǎn)擊某個控件而不起作用,或者它看起來是個鏈接實(shí)際上并不是,會消耗用戶對你的信任感,降低產(chǎn)品的可靠度。

One more thing

炫酷的概念和新穎的趨勢不僅吸引用戶,同樣是設(shè)計師的心頭好。但是我們在新的時代,新的局面之下,始終面對的是以往的用戶,看似千變?nèi)f化的需求背后是不變的人性。

至少《Don’t Make Me Think》這本書一直在探討的問題,經(jīng)過20年的世事變遷,幾次互聯(lián)網(wǎng)浪潮,在這個號稱互聯(lián)網(wǎng)4.0時代,仍然發(fā)揮著作用,依然是那么具有啟發(fā)性。

新狀況之下潛藏著老問題,想要洞悉本質(zhì),設(shè)計師要懂心理學(xué)和行為學(xué)。在之前的幾篇文章當(dāng)中,我一直在試圖梳理出不會隨著時間改變,而一直存在的、亟待解決的問題以及可供使用的原理。

《為何如今的產(chǎn)品總給人千人一面的感覺?》揭示的是「特征蔓延」和「競爭驅(qū)動式設(shè)計」是如何讓產(chǎn)品走向平庸和毀滅,解決方案藏在結(jié)尾。

《熟知用戶行為的這7個層面,你的設(shè)計才會走進(jìn)人心》則介紹了唐納德諾曼的用戶行為的7個層面,這是一套分析用戶行為,設(shè)計產(chǎn)品流程的有效方法,擁有持久生命力的產(chǎn)品的設(shè)計策略,和這套方法不謀而合。

《這7種廣泛存在的認(rèn)知偏差,影響了我們太多的決策》 則幫你梳理了7種常見的認(rèn)知偏差,認(rèn)識自己了解用戶,這些知識能消除誤解,同樣能夠幫你洞悉真相,是不可多得的利器。

設(shè)計的方法和工具成千上萬,想明白道理,問對問題,接下來的路更容易走通。


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



ofo《我們看過的世界杯》H5

資深UI設(shè)計者

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

項(xiàng)目背景:為了配合世界杯做的H5活動,主題是DIY你的世界杯時刻                                      

玩法:選擇自己看世界杯的場景,可以在畫面當(dāng)中添加食物和自定義的小元素,另外根據(jù)場景的變換人物的腿也可以選擇哦                                                 

項(xiàng)目周期大概半個月,和團(tuán)隊的小伙伴一起完成的,感謝@珊,@暖暖,@明明   

使用工具包括sketch、ps、手繪板                                                                    

 

ps:做H5真的是很累,工作量大,畫的手疼,不過也積累了很多的經(jīng)驗(yàn),上線了好開心!

請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖請登錄并驗(yàn)證郵箱后查看原圖

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



經(jīng)驗(yàn)總結(jié)!Material Design和iOS 產(chǎn)品設(shè)計的差異化思考

資深UI設(shè)計者


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

Material Design(以下簡稱MD)是谷歌設(shè)計的一套視覺語言設(shè)計規(guī)范,主要應(yīng)用于安卓類應(yīng)用。


iOS Human Interface Guidelines(以下簡稱iOS)是蘋果公司針對 iOS設(shè)計的一套人機(jī)交互指南,目的是為了使運(yùn)行在 iOS 上的應(yīng)用都能遵從一套特定的視覺以及交互特性,從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。

相對來說,我們對于 iOS 的設(shè)計規(guī)范更加熟悉——因?yàn)榭紤]到成本,設(shè)計師進(jìn)行產(chǎn)品設(shè)計的時候只會出一套 iOS 的設(shè)計稿,然后去適配安卓機(jī)型。

很少會針對安卓機(jī)型再出一套 MD風(fēng)格的方案,這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺采用了不同的設(shè)計語言,不同的設(shè)計語言會培養(yǎng)出不同的操作習(xí)慣。

例如使用安卓手機(jī)的用戶平時見到的都是 MD風(fēng)格的界面,突然下了一個 iOS風(fēng)格的應(yīng)用,那么操作起來就會很不習(xí)慣,增加了學(xué)習(xí)成本。

為了讓產(chǎn)品可以適用不同平臺用戶的操作習(xí)慣,提供 MD 和 iOS 兩套設(shè)計稿是非常有必要的。當(dāng)然 MD 和 iOS 的差異不是一篇文章就能說清楚的,這里我就從陰影、導(dǎo)航和配色這三個方面來簡單分析一下 MD 和 iOS 的差異。

一、陰影

對于不太熟悉 MD 的設(shè)計師來說,MD 意味著大色塊+陰影。

為什么 MD 如此癡迷于陰影?

從它的名字就可以看出來——Material Design,這里的 material 指的是紙張;因?yàn)閬碓从诂F(xiàn)實(shí)生活,所以 MD 非常喜歡使用真實(shí)世界元素的物理規(guī)律與空間關(guān)系來表現(xiàn)組件之間的層級關(guān)系,而陰影就是最常見的表現(xiàn)形式:

同樣的賬戶注冊,安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒有陰影。

FAB(Floating Action Button),帶有陰影的浮動操作按鈕甚至成為了 MD 的一大招牌。相比較而言iOS更加扁平化。

二、導(dǎo)航體系

產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成,而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS 的導(dǎo)航體系主要由底部欄菜單構(gòu)成,而 MD 大量使用了頂部欄菜單和側(cè)邊欄菜單。

下面我們來看幾個例子:

網(wǎng)易云音樂在 iOS 中采用的是底部欄菜單導(dǎo)航,而在安卓機(jī)型上導(dǎo)航欄被移到界面頂部,「賬號」被收到側(cè)邊欄中。

b站在 iOS 中有底部欄菜單有5個標(biāo)簽,而在安卓機(jī)型中只有4個標(biāo)簽,「我的」同樣被側(cè)邊欄收起來。

推特在 iOS 中使用的底部欄菜單導(dǎo)航,在安卓機(jī)型中導(dǎo)航欄被移到了頂部。

而 Apple Music 做的更徹底,在安卓機(jī)型上直接舍棄了底部菜單欄,采用了側(cè)邊欄作為主導(dǎo)航模式。

我們發(fā)現(xiàn)前兩款國產(chǎn)應(yīng)用在安卓機(jī)型上都保留了底部欄菜單,而后兩款國外應(yīng)用直接砍掉底部欄菜單。不只是 Apple music 和推特,很多國外的安卓類應(yīng)用都沒有使用底部欄菜單。而國內(nèi)的應(yīng)用因?yàn)榭紤]到 iOS,即使 MD 化也是閹割版的,屬于 iOS 和 MD 的混血兒。甚至很多安卓應(yīng)用在設(shè)計風(fēng)格上往 iOS 靠攏,以b站為例,其5.11之前的安卓版本中都是沒有底部欄菜單的。

當(dāng)然這里并不是去評價 MD 和 iOS 哪個導(dǎo)航體系更好用,我說下自己的觀點(diǎn):

底部欄菜單的使用非常方便用戶在單手握持情況下的操作,但是對于大屏手機(jī)來說,單手操作會顯得很吃力。如果用戶改由雙手握持手機(jī),那么從易用性上來說底部欄菜單沒有任何優(yōu)勢。

MD 的方案更加注重對界面空間的利用,側(cè)邊欄菜單就不說了。以底部欄菜單為例,在安卓機(jī)型中用戶滑動的時候底部欄菜單會隱藏,方便的用戶可以看下知乎,安卓版的底部欄用戶滑動的時候會隱藏,而 iOS 則是固定不動的。

側(cè)邊欄的優(yōu)勢還體現(xiàn)在可以提供更多的標(biāo)簽,底部欄菜單最多可以放5個。但是側(cè)邊欄菜單需要用戶點(diǎn)擊才能調(diào)出來,比較隱蔽,而底部欄和頂部欄相對來說就會顯得一目了然,總之各有千秋。

至于為什么 MD 會拋棄底部欄菜單,我個人的理解是設(shè)備原因。因?yàn)榘沧繖C(jī)型底部有三個物理按鍵,如果采用底部欄菜單作為主導(dǎo)航模式,容易造成用戶誤點(diǎn)擊。

類似的還有 web 類應(yīng)用,因?yàn)闉g覽器的控件欄也在底部,所以如果采用了底部欄菜單同樣會造成用戶的誤操作。

三、配色

MD 提倡使用高飽和度的對比色來提升產(chǎn)品的視覺表現(xiàn)力,也就是我在上面提到的大色塊。同樣的一個功能,從底部欄背景色、插畫到按鈕,我們可以發(fā)現(xiàn) iOS 在色彩的使用上比較克制。

知乎之前的安卓版本使用了大面積的藍(lán)色,后來改成跟 iOS 一樣的白色。這樣的調(diào)整褒貶不一,有的用戶反饋這完全照搬了 iOS,要改回 MD。

產(chǎn)品界面設(shè)計中對比效果主要由配色、尺寸、間距和陰影來完成。MD 在配色和陰影上做的比較出彩,所以 MD風(fēng)格的產(chǎn)品在視覺表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新,追求扁平和簡潔。所以我們無法去評判這兩款設(shè)計規(guī)范的孰好孰壞,因?yàn)槠涓髯缘某霭l(fā)點(diǎn)就是不一樣的。

當(dāng)然前面也提到了 MD 和 iOS 的差異不僅僅體現(xiàn)在以上說的這三點(diǎn),還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在 iOS系統(tǒng)中,用戶向右滑動的時候會返回上一級頁面。因?yàn)樘O果手機(jī)沒有物理返回按鍵,所以這種機(jī)制非常受歡迎,但是在一些特定場景的時候就會有問題。例如如果我想復(fù)制微博里的「一曲肝腸斷,天涯何處覓知音」,選中光標(biāo)從左向右滑動,這時就會返回上一級頁面,特別不方便。所以我只能從右向左進(jìn)行復(fù)制,我后來試了一下微信和 QQ,發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動態(tài),這也算是一個折衷的方案。

總結(jié)

這篇文章并不是去評判 iOS 和 MD 兩種設(shè)計風(fēng)格孰好孰壞,也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計稿,這個目前來說也不太現(xiàn)實(shí)。很多國民類應(yīng)用都只采用了一套設(shè)計稿,大家都這么做,整個大環(huán)境就是這樣。

但是還是那句話:存在不一定合理。出兩套設(shè)計稿雖然現(xiàn)在看起來不現(xiàn)實(shí),但是我們也要做好準(zhǔn)備,要有危機(jī)感。


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

我用這個極限推敲法,有效推進(jìn)視覺設(shè)計

資深UI設(shè)計者

每當(dāng)提到設(shè)計方法論時,總難免會給人一種比較虛空偏理論,或者說比較難應(yīng)用到設(shè)計實(shí)戰(zhàn)中的感覺;但是這一次,經(jīng)過了自己的實(shí)踐之后,我覺得確實(shí)有一個比較靠譜的視覺推進(jìn)方法可以分享給大家,所以才有了這篇總結(jié)。

先直接概括一下這個方法,極限推敲法:遇到難題時,先把問題拆解成一個或者幾個維度,選取某個維度,往兩個極端進(jìn)行嘗試,隨后逐漸中和極端方案,逐步找到自己想要的預(yù)期點(diǎn),明確該維度的方向。

一、使用方法

  • 第一步,提煉一個或者幾個關(guān)鍵維度,作為嘗試的方向;
  • 第二步,優(yōu)先嘗試兩端極限的方案;
  • 第三步,進(jìn)一步在其間琢磨并嘗試方案,直到找到符合預(yù)期的方案;
  • 第四步,若一直沒有滿意的方案,則可以繼續(xù)以某個方案為基準(zhǔn),精細(xì)微調(diào)方案進(jìn)行探索;
  • 第五步,得出最終方向,并最終調(diào)整形成終稿。

二、案例

例一:雄獅的logo設(shè)計

期望比較簡潔的同時,又不能丟了獅子的辨識度,比較糾結(jié)的是,這個度該如何把握?

按照極限推敲法來,我們先確立「極簡」和「寫實(shí)」作為關(guān)鍵維度,然后優(yōu)先嘗試兩端比較極限的方案;了解清楚兩種極限的可能性之后,繼續(xù)嘗試,加減細(xì)節(jié),尋找一個符合預(yù)期的圖形狀態(tài);最后的定稿,既保持了鮮明的特征和辨識度,同時也不失簡潔。

(推進(jìn)過程中出方案的順序在圖中用數(shù)字標(biāo)出,「1」即為第一次嘗試,以此類推;具體推敲過程不在此贅述。)

例二:網(wǎng)易郵箱大師Tab icon改版設(shè)計

在網(wǎng)易郵箱大師5.0改版中,常駐底部的 Tab icon 是單獨(dú)進(jìn)行推敲優(yōu)化的。在之前的版本中,圖標(biāo)的樣式相對比較的刻板,偏向純表意,表現(xiàn)力不強(qiáng);在5.0視覺改版的策略中,我們是以「優(yōu)雅」作為一個關(guān)鍵方向進(jìn)行優(yōu)化的,所以軸的兩端就定為「刻板」和「優(yōu)雅」,雖然并不是完全對立的兩個方向,同時也包含了一些「表意」等其他層面的因素,但是其中有部分感受是存在對立面的,我們就以此作為關(guān)鍵點(diǎn)進(jìn)行推敲。

可以從圖中看出,在不影響表意的前提下,各方案間的圖標(biāo)改動非常微小,在有限的空間內(nèi)去做一些變化;幾經(jīng)嘗試之后,還是選擇了更常規(guī)更偏表意優(yōu)先,但是也適當(dāng)加入曲線因素體現(xiàn)「優(yōu)雅」的方案作為最終方向。

例三:內(nèi)容信息流列表設(shè)計

期望內(nèi)容列表的展示能給人以精品的感覺,但又不失去過多的閱讀效率。

首先確立以信息量的多少作為關(guān)鍵維度,在形成了初步的樣式之后,繼續(xù)調(diào)整在一屏內(nèi)條目的疏密以及排版來感知信息量的多少;在嘗試之后,最終討論決定,在初期內(nèi)容源還不夠「精」的情況下,還是最右側(cè)方案的信息呈現(xiàn)更為合適,并以此做了最終調(diào)整。

三、方法原理

很多時候,極端情況是很難想象或者預(yù)判出來的,只有嘗試之后,才能更清楚的了解到實(shí)際會出來什么效果,達(dá)到怎樣的預(yù)期;在多次推敲之后,就能更好的了解期望的狀態(tài)到底應(yīng)該在哪個「位置」,讓模糊的概念逐漸變得清晰;該方法最大的好處在于,讓嘗試變的更有目標(biāo),而不是胡亂嘗試,讓每一次嘗試都更有意義。

這個方法也算是視覺標(biāo)準(zhǔn)可量化的一次探索,我稱之為「偽量化」,因?yàn)樽詈蟮臎Q策仍然是依靠感官去衡量判斷的;把錯綜復(fù)雜的感官拆解成一些更具體單一的關(guān)鍵維度也是非常關(guān)鍵的一個步驟,是開始「偽量化」的前提。

四、適用場景

在以上所舉的例子中,有 logo設(shè)計,icon設(shè)計和界面設(shè)計(所用到的例子都是實(shí)戰(zhàn),均為過往項(xiàng)目);其實(shí)對象可以是各種各樣的設(shè)計,只要存在某種程度把握上的糾結(jié),無法預(yù)判或者不明確方向的情況,都可以通過這個方法有效的推進(jìn)并找到當(dāng)下的最優(yōu)解。在實(shí)戰(zhàn)中,假如沒有那么多的時間和精力去細(xì)化,可以僅選取關(guān)鍵維度,然后在關(guān)鍵維度內(nèi)嘗試方向探索性的方案(粗略的嘗試),只要能感受到差異,即是有效的方案;當(dāng)然如果有充足的時間,那完全可以精細(xì)化出方案,這樣方案所傳達(dá)的感受也會更加精準(zhǔn)細(xì)致。

五、誤區(qū)

要注意的是,這個方法并不是一種妥協(xié)的方式,也不是一種擇中方案;我們所要尋找的是在一個維度中感受符合預(yù)期的位置,如果適合,也可以是非常激進(jìn)的方案。

六、注意事項(xiàng)

這個方法只是提供了一種思路,如何更有效的嘗試方案來推進(jìn)視覺產(chǎn)出的思路;其中最主要的環(huán)節(jié)還是靠自己去摸索出方案的實(shí)踐部分,去實(shí)打?qū)嵉膰L試;在這其中投入精力的多少,也受其他客觀因素的影響,例如項(xiàng)目截止時間等等;不過我認(rèn)為個人的主觀能動性才是主導(dǎo),一定不能懶,要作圖,要動起來,僅靠憑空想象方案在腦中「出圖」,一來說服不了別人,二來自己也底氣不足。只要圖形圖像語言一直存在,那么我覺得對視覺設(shè)計師來說有一句話就是永遠(yuǎn)的真理:沒圖說個XX。

日歷

鏈接

個人資料

存檔