UI設(shè)計(jì)師如何助力PM的原型圖?

2 評(píng)論 6458 瀏覽 64 收藏 11 分鐘

本文筆者將從產(chǎn)品分析五要素——用戶、行為、目標(biāo)、場(chǎng)景、媒介,來(lái)講述:UI設(shè)計(jì)師如何在產(chǎn)品設(shè)計(jì)之前對(duì)產(chǎn)品進(jìn)行分析?

前段時(shí)間準(zhǔn)備跟朋友開(kāi)發(fā)一個(gè)垂直領(lǐng)域新聞?lì)惖漠a(chǎn)品,在產(chǎn)品的設(shè)計(jì)過(guò)程當(dāng)中有很多值得思考的地方,尤其是站在UI設(shè)計(jì)師的角度,如何去助力產(chǎn)品的設(shè)計(jì),所以總結(jié)了一下跟幫友們分享。

案例分析

首先,簡(jiǎn)單介紹一下這款產(chǎn)品:

一個(gè)垂直新聞?lì)惖姆职l(fā)平臺(tái),主要分享國(guó)企、政界的新聞,面向的主要目標(biāo)用戶是國(guó)企政界管理層人員。

  • 產(chǎn)品功能:分享國(guó)企政界新聞資訊
  • 目標(biāo)人群:國(guó)企政界管理層人員
  • 產(chǎn)品目標(biāo):為目標(biāo)用戶提供精準(zhǔn)的相關(guān)資訊(用我們產(chǎn)品發(fā)起人的話講:這樣產(chǎn)品首先是政治正確,牛X?。?/li>

下面看兩張產(chǎn)品經(jīng)理給我的產(chǎn)品原型圖:

UI設(shè)計(jì)師如何助力PM的原型圖

產(chǎn)品的驅(qū)動(dòng)力

首先,要講一下新聞?lì)惍a(chǎn)品的驅(qū)動(dòng)力,上圖產(chǎn)品框架層的設(shè)計(jì)中有個(gè)“播報(bào)”功能,我認(rèn)為加的是不夠好的。

因?yàn)樾侣勵(lì)惖漠a(chǎn)品是新聞內(nèi)容驅(qū)動(dòng)的模式,“播報(bào)”只是產(chǎn)品一個(gè)魅力功能的體現(xiàn),新聞內(nèi)容驅(qū)動(dòng)著用戶去找新聞,在找新聞的過(guò)程當(dāng)中有個(gè)“播報(bào)”功能,而不是播報(bào)驅(qū)動(dòng)著用戶去看新聞。所以,在產(chǎn)品的框架層“播報(bào)”放到底部tab切換是不夠合理的。

產(chǎn)品設(shè)計(jì)方法論

開(kāi)篇講了產(chǎn)品的驅(qū)動(dòng)力,下面用具體的產(chǎn)品設(shè)計(jì)方法論深入分析:

UI設(shè)計(jì)師如何助力PM的原型圖

辛向陽(yáng)教授提出的產(chǎn)品設(shè)計(jì)五要素:用戶、行為、目標(biāo)、場(chǎng)景、媒介。這個(gè)方法被稱為設(shè)計(jì)一個(gè)產(chǎn)品的萬(wàn)能方法論,下面我們就依次套用這五項(xiàng)來(lái)分析這個(gè)產(chǎn)品。

1. 用戶

在產(chǎn)品設(shè)計(jì)中,有一個(gè)清晰的用戶畫(huà)像,會(huì)對(duì)產(chǎn)品設(shè)計(jì)起到至關(guān)重要的作用,尤其是那些我們不夠了解的用戶群體,有了用戶畫(huà)像就能夠結(jié)合用戶的生活特征、年齡段特征、行為習(xí)慣、社會(huì)特征、對(duì)相關(guān)事物的態(tài)度等信息,精準(zhǔn)的設(shè)計(jì)產(chǎn)品。

我們準(zhǔn)備做的這款新聞?lì)惍a(chǎn)品也做了用戶畫(huà)像,因?yàn)槭钦缛耸康漠?huà)像不太方便分享出來(lái)了,大概的一個(gè)特征就是他們不愿意在公共互聯(lián)網(wǎng)平臺(tái)展示自己,所以看下圖:

UI設(shè)計(jì)師如何助力PM的原型圖

產(chǎn)品設(shè)計(jì)中有社交屬性,這個(gè)就直接可以否掉了,因?yàn)橐豢淳褪且庖鰜?lái)的功能,通過(guò)用戶畫(huà)像分析,一個(gè)對(duì)外開(kāi)放的產(chǎn)品沒(méi)有政界的領(lǐng)導(dǎo)人愿意在公開(kāi)的互聯(lián)網(wǎng)平臺(tái)發(fā)表見(jiàn)解和互相關(guān)注好友,這類人群在這個(gè)平臺(tái)是沒(méi)有社交需求的。

所以對(duì)我們不了解的用戶人群,一定要有個(gè)清晰的了解認(rèn)識(shí),這樣就可以通過(guò)對(duì)用戶的行為喜好等一系列特征,整理我們的需求優(yōu)先級(jí),功能優(yōu)先級(jí)。

2. 行為

用戶在產(chǎn)品使用上的行為,大概分為三類:隨機(jī)式行為、往復(fù)式行為、漸進(jìn)式行為。

為了讓大家充分了解這三種行為,舉個(gè)買(mǎi)手機(jī)的行為例子:

1)漸進(jìn)式:

購(gòu)買(mǎi)iPhoneX就是漸進(jìn)式行為,打開(kāi)APP,搜索iPhoneX——選擇參數(shù)——購(gòu)買(mǎi),有明確的目的,從A到B到C稱為漸進(jìn)式。

2)往復(fù)式:

我想買(mǎi)個(gè)手機(jī),具體買(mǎi)什么品牌我不清楚,打開(kāi)APP,搜索手機(jī)——查看A品牌——退出詳情——查看B品牌——退出詳情——此處省略N個(gè)品牌——購(gòu)買(mǎi),這種從A到B,B回到A,A再到C,往復(fù)循環(huán)行為稱為往復(fù)式。

3)隨機(jī)式:

打開(kāi)APP不知道買(mǎi)什么,隨機(jī)瀏覽,沒(méi)有規(guī)律,看到感興趣的就點(diǎn)進(jìn)去看,這種稱為隨機(jī)式。

相信通過(guò)上面的分析,大家對(duì)三個(gè)行為特征有了一個(gè)清晰的認(rèn)識(shí)?,F(xiàn)在思考一下,用戶在使用新聞?lì)惖漠a(chǎn)品是哪種行為?

必定是往復(fù)式的行為,用戶看新聞一般都是沒(méi)有明確目的刷新聞,刷到哪個(gè)感興趣的新聞就會(huì)打開(kāi)看,看后關(guān)閉,繼續(xù)刷感興趣的新聞。

看下圖紅框標(biāo)注的按鈕“播放全部”其實(shí)是不符合用戶行為設(shè)定的,因?yàn)椴シ湃靠赡軙?huì)播放出用戶并不感興趣的新聞。

這個(gè)功能其實(shí)更符合右圖“專題”板塊,因?yàn)槊恳粋€(gè)專題包含的內(nèi)容是類似的新聞,用戶的切入點(diǎn)是專題標(biāo)題,所以專題下的新聞都是類似的,也就是用戶感興趣的。

UI設(shè)計(jì)師如何助力PM的原型圖

雖然每一個(gè)專題都有個(gè)“播放全部”按鈕是較合理的設(shè)計(jì),但是也避免會(huì)聽(tīng)到不感興趣新聞,所以我們?cè)谏蠄D紅框里播放的懸浮框,要有下一個(gè)切換新聞的功能。

3. 目標(biāo)

目的其實(shí)對(duì)應(yīng)行為,隨機(jī)式就是無(wú)目的,往復(fù)式就是目的模糊,漸進(jìn)式就是目的清晰。拿這個(gè)產(chǎn)品來(lái)說(shuō)用戶在打開(kāi)產(chǎn)品時(shí),目的是找到感興趣的新聞,點(diǎn)擊新聞里面有播報(bào)功能可以聽(tīng)報(bào),而不是去播報(bào)板塊里面找新聞。

UI設(shè)計(jì)師如何助力PM的原型圖

所以,通過(guò)用戶使用產(chǎn)品的行為目的分析,在產(chǎn)品架構(gòu)上,核心的新聞應(yīng)該是第一層級(jí),作為播報(bào)的輔助功能,應(yīng)該在第二層級(jí),依附在每條新聞上(如上右圖),而不是現(xiàn)在這樣作為第一層級(jí)放到底部導(dǎo)航tab切換。

4. 場(chǎng)景

通過(guò)這款產(chǎn)品的用戶使用場(chǎng)景調(diào)查分析,有部分用戶會(huì)經(jīng)常開(kāi)車或坐車(有司機(jī))上下班,參加出席各種活動(dòng),自己不開(kāi)車的用戶群體通常會(huì)看一些新聞,車中閱讀新聞其實(shí)并不舒服,很容易視覺(jué)疲勞。再加上目標(biāo)用戶年齡層,部分用戶視力可能會(huì)不太好,所以“播報(bào)”這個(gè)功能尤為重要。

UI設(shè)計(jì)師如何助力PM的原型圖

另外一個(gè),看新聞的場(chǎng)景是睡前床上看新聞,一般產(chǎn)品有這種使用場(chǎng)景都會(huì)加個(gè)夜間模式。

但是,據(jù)我了解,現(xiàn)在很多app已經(jīng)不在看中夜間模式這個(gè)功能,因?yàn)檫@個(gè)功能真的是個(gè)雞肋,當(dāng)用戶轉(zhuǎn)換的夜間模式會(huì)對(duì)產(chǎn)品有認(rèn)知差異、陌生感。其次,它真的不能更好的保護(hù)用戶的眼睛,當(dāng)屏幕暗了后,用戶會(huì)更專注去看屏幕,反而會(huì)更加傷害視力。今日頭條把這個(gè)功能放在了二級(jí)頁(yè)面,就說(shuō)明并不看重這個(gè)功能。

5. 媒介

媒介就是我們開(kāi)發(fā)產(chǎn)品時(shí),需要做成app還是小程序或是H5網(wǎng)頁(yè)。我們這款產(chǎn)品,為了節(jié)約成本初期定位是個(gè)小程序,但根據(jù)功能的體量就越來(lái)越不可能開(kāi)發(fā)成小程序,小程序還是適合輕量級(jí),功能較為單一的產(chǎn)品。

還有,因?yàn)樾侣劦臅r(shí)效性,新聞?lì)惖漠a(chǎn)品非常需要推送功能。App可以實(shí)現(xiàn)完整功能,靈活性強(qiáng),所以我們這款產(chǎn)品還在進(jìn)一步考慮中。

總結(jié)

當(dāng)UI設(shè)計(jì)師拿到原型圖后,通過(guò)這樣類似的產(chǎn)品分析得出結(jié)論,再去跟PM去溝通討論,這樣就能夠助力產(chǎn)品的設(shè)計(jì)。同時(shí)這也是UI設(shè)計(jì)前,對(duì)產(chǎn)品了解的一個(gè)過(guò)程,這個(gè)環(huán)節(jié)真的很重要,很重要,很重要!

當(dāng)我們對(duì)產(chǎn)品充分了解后,UI設(shè)計(jì)師就可以更好的結(jié)合視覺(jué)主導(dǎo)產(chǎn)品的設(shè)計(jì),更得心應(yīng)手,順心意。

但是,我們作為UI設(shè)計(jì)師前提一定要有良好的視覺(jué)產(chǎn)出能力,然后再去跟產(chǎn)品(si)探(bi)討產(chǎn)品,不然很容易會(huì)被人貼上只會(huì)得瑟設(shè)計(jì)差的標(biāo)簽。

文章看到這里的你一定要收獲這個(gè)產(chǎn)品分析方法論:用戶、行為、目標(biāo)、場(chǎng)景、媒介,產(chǎn)品分析五要素的線性產(chǎn)品分析法。

 

作者:吳星辰,微信公眾號(hào):互聯(lián)網(wǎng)設(shè)計(jì)幫

本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 播報(bào)應(yīng)該算作文字新聞為某些場(chǎng)景設(shè)計(jì)的不同展示形式(功能),我覺(jué)得換成視頻才有吸引力作為一個(gè)tab的地位,雖然它是一個(gè)已經(jīng)被用爛了的做法 ?

    來(lái)自福建 回復(fù)
  2. ??

    回復(fù)