超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

設(shè)計(jì)的靈感 + 用研的力量

2013-5-4    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.miumiuwan.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源:http://cdc.tencent.com/?p=7288

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

前言:年初沉浸于工作中的重點(diǎn)項(xiàng)目,都快忘記寫文章了,慚愧。分享既是學(xué)習(xí),沒有分享就沒有學(xué)習(xí)的機(jī)會,2013年應(yīng)該繼續(xù)多寫。同時(shí)也總結(jié)了2012年的寫作,發(fā)現(xiàn)我很多時(shí)候是對自己感興趣的各種文章、現(xiàn)象,在寫設(shè)計(jì)筆記與思考。有時(shí)思維種種,并沒有總結(jié)到很踏實(shí)。以后會改進(jìn),多采取靈感文+實(shí)戰(zhàn)文的寫作節(jié)奏。

今天,是一篇實(shí)戰(zhàn)文。

講的是設(shè)計(jì)師通過靈感,發(fā)現(xiàn)問題,思考問題,面臨挑戰(zhàn),和用研緊密配合,解決問題,達(dá)到目的的一個故事。

是一個完整而嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)改版的故事。

Here we go.

2012年負(fù)責(zé)騰訊開放平臺應(yīng)用中心產(chǎn)品,第一次認(rèn)真看這個產(chǎn)品,總覺得哪兒不對:

 

01

 

以上頁面,我看到了一個主要內(nèi)容頁,有banner區(qū)域,導(dǎo)航在左邊,中間是App內(nèi)容,右邊有排行榜。繼續(xù)往下看:

 

02

 

拉下頁面,看到上圖,開始有點(diǎn)迷糊。因?yàn)檫@個頁面往下的走勢,沒有能給我一個理解。信息和內(nèi)容的布局有點(diǎn)凌亂。導(dǎo)航與內(nèi)容區(qū)的對應(yīng)不齊,讓我閱讀效率偏低。

 

03

 

再往下拉頁面,就到了上圖。這個時(shí)候閱讀的無序開始增強(qiáng),我看到了各種信息滿滿地堆積在頁面上。左邊導(dǎo)航結(jié)束后,開始堆積內(nèi)容,且出現(xiàn)在我完全沒有預(yù)期的位置。中間的App內(nèi)容模式一致,沒有重點(diǎn)。廣告又讓格局再亂了一點(diǎn)。到了這里,我已經(jīng)很難有效閱讀內(nèi)容了。

很多設(shè)計(jì)師都知道,用戶閱讀網(wǎng)頁,是不會逐字逐句地讀。他們會掃描,快速找到重點(diǎn),然后再根據(jù)自己的興趣和選擇進(jìn)行閱讀。重點(diǎn)可以是一段加粗的文字,一個圖片,一個巧妙排版的文字段落等等。

這個頁面沒有給我一個掃描的邏輯和樂趣。所以我的閱讀沒有舒適感。

我對這個網(wǎng)頁的閱讀順序是這樣的:

 

04

 

如上圖,我開始是閱讀1處,個人信息;然后往下讀到2處,導(dǎo)航;到了3處,內(nèi)容區(qū),因?yàn)锳pp的展現(xiàn)形式非常一致,沒有重點(diǎn),我就快速略過了3處;很快掃了下4處,不感興趣;直接跳到5處,看了排行榜一下,很快就閱讀完了。

這個網(wǎng)頁的目的,很簡單,是希望用戶去探索,點(diǎn)擊App,并安裝,然后玩。但是現(xiàn)在的布局并沒有讓我有這樣操作的沖動??隙ㄓ袉栴}。當(dāng)然,我只是一個用戶,一個閱讀案例而已。后面的用研,我們邀請了用戶來做眼動儀測試,會看到更多的閱讀模式。

所以這里,設(shè)計(jì)師的靈感帶來一些重要問題:

 

05

 

以上只是部分問題,但是簡單明了,需要修改設(shè)計(jì)。解釋下我右上角的標(biāo)記,我認(rèn)為這個網(wǎng)頁在內(nèi)容的消耗上有問題(這里是一個方法論,主要闡述我的一個想法,所有產(chǎn)品設(shè)計(jì)都是在內(nèi)容的創(chuàng)造、消耗、傳播上的設(shè)計(jì))。右下角是我認(rèn)為這個網(wǎng)頁在設(shè)計(jì)上應(yīng)該得到修改的點(diǎn):用戶場景,信息架構(gòu),交互設(shè)計(jì),視覺設(shè)計(jì),設(shè)計(jì)細(xì)節(jié),用戶情感。

設(shè)計(jì)師的觀察,靈感,和結(jié)論都出來了,然后呢?

作為服務(wù)千萬級用戶的平臺產(chǎn)品,光是靈感是沒有說服力的。在以上應(yīng)用中心頁面中,所有布局,內(nèi)容排列,都有很嚴(yán)謹(jǐn)?shù)纳虡I(yè)策略和數(shù)據(jù)壓力。任何盲目的修改,都會有極大的風(fēng)險(xiǎn)。

怎么證明自己的靈感?怎么證明自己的判斷?

用研。

這次產(chǎn)品改版,有兩次用研點(diǎn)很關(guān)鍵。

第一次是眼動儀測試與分析。我們請應(yīng)用中心的用戶來進(jìn)行眼動儀測試,希望了解用戶的閱讀模式,并印證我們之前的判斷。

 

06

 

如上圖,我們把整個應(yīng)用中心頁面分解為各個模塊,然后通過眼動儀來幫助我們觀察用戶的閱讀模式。

 

07

 

如上圖,可以看出每個用戶閱讀的順序不一樣。但是通過分析,我們發(fā)現(xiàn)雖然閱讀順序不一樣,但是結(jié)果是一致的。用戶都像我之前閱讀那樣,快速閱讀,找不到重點(diǎn),忽略了App內(nèi)容這個重點(diǎn)區(qū)塊,對整個頁面布局沒有清晰認(rèn)知。

 

來看看結(jié)論:

 

08

 

部分結(jié)論如上圖:除了第一屏其他頁面曝光量少,說明用戶對首屏后面的內(nèi)容不感興趣;用戶的粗略瀏覽,隨機(jī)無序點(diǎn)擊,使應(yīng)用中心點(diǎn)擊量低,安裝轉(zhuǎn)化率低。

 

這里再補(bǔ)充一下應(yīng)用中心產(chǎn)品背景:

1,應(yīng)用中心這樣的產(chǎn)品需要的是高點(diǎn)擊量和高安裝轉(zhuǎn)化率配合。

2,高點(diǎn)擊量需要引起用戶的興趣,讓他們樂意去探索。

3,高安裝轉(zhuǎn)化率需要讓用戶準(zhǔn)確關(guān)注到他們感興趣的內(nèi)容,這樣才能保證用戶點(diǎn)擊App后會安裝。

有了用研結(jié)論,就有底氣了。各個合作方基于我們的判斷和用研結(jié)論,同意開始改版。

我們的交互很就出了一個交互改動稿:

 

09

 

交互改動稿很簡單,直接針對用研結(jié)論中的問題,并嘗試解決。頂部導(dǎo)航讓信息架構(gòu)更清晰。每個內(nèi)容模塊也開始更規(guī)整。在和產(chǎn)品同事交流的過程中,我們也把之前頁面中完全被淹沒的影視和讀書兩個區(qū)塊列入重點(diǎn)優(yōu)化計(jì)劃(后面視覺稿可以看到細(xì)節(jié))。

這個時(shí)候,在細(xì)化設(shè)計(jì)前,我們又做了第二次用研來再次確認(rèn)設(shè)計(jì)師的靈感。方式是請用戶來測試我們的Demo,結(jié)論很快出來了:

 

10

11

 

如以上兩個圖所示,用戶的反饋很一致,對改版后頁面模塊的區(qū)分,信息架構(gòu)的認(rèn)知等我們關(guān)注的點(diǎn),都有非常正面的反饋。

 

接下來,我們的視覺開始對這個新架構(gòu)進(jìn)行視覺設(shè)計(jì),力求內(nèi)容第一,展示清晰,增強(qiáng)用戶對應(yīng)用中心的認(rèn)知。設(shè)計(jì)稿如下:

 12

 

第一屏簡單明了地給出整個頁面的結(jié)構(gòu)。用戶看第一屏就能清晰知道,頂部導(dǎo)航是全局導(dǎo)航;往下是banner以及主推信息展示區(qū);再往下,頁面開始分左右兩塊,左邊是主內(nèi)容區(qū),主要展示App內(nèi)容,右邊是排行榜。

用戶看到這個架構(gòu),就能有預(yù)期,這個頁面往下,其實(shí)是在重復(fù)App內(nèi)容區(qū)和排行榜的左右結(jié)構(gòu)。認(rèn)知非常簡單。

另外,對App內(nèi)容區(qū),我們把主推的App放大,并加入社交元素和更多詳細(xì)的解釋。這樣的設(shè)計(jì)安排極大地提高了用戶對App的認(rèn)知和興趣。(目的是提高點(diǎn)擊率和安裝轉(zhuǎn)化率)

 13

 

到了第二屏,先看右邊,用戶還是如預(yù)期地看到了各種排行榜;左邊內(nèi)容區(qū),還是一個模塊一個模塊地展示內(nèi)容。特別是在中間模塊,我們還為了用戶閱讀不疲憊,用了豎版的排列方式,讓閱讀體驗(yàn)更有趣。

 

14

 

第三屏的重點(diǎn)是給影視和讀書一個特別的展示。首頁這里,我們不能把影視和讀書做太重,因?yàn)檫@兩個特殊內(nèi)容區(qū)塊還是整個頁面的一部分,不能擁有喧賓奪主的華麗。但是我們給予了這兩個區(qū)塊略微不同的設(shè)計(jì)感,這樣讓用戶更簡單認(rèn)知到這兩個區(qū)塊的不同。

這樣改版的結(jié)果呢?

首先,感官緯度,你是不是認(rèn)為更清楚,更漂亮?

其次,看數(shù)據(jù):

 

15

 

如上圖數(shù)據(jù)結(jié)果:

1,整體轉(zhuǎn)化率的增加,與更合理的整體架構(gòu)、更合理的局部排列相關(guān)。

2,影視和讀書的增長,一方面是因?yàn)槿旨軜?gòu)更清楚,用戶會往下瀏覽;一方面是因?yàn)槁晕⒄{(diào)整的設(shè)計(jì)讓這兩個內(nèi)容區(qū)塊有了差異化,吸引了用戶的注意力。

3,橫導(dǎo)航的類目頁點(diǎn)擊增長,符合我之前的判斷:豎導(dǎo)航點(diǎn)擊率一般是從上往下逐步遞減的,而橫導(dǎo)航效果會好一些,如果配合適當(dāng)?shù)脑O(shè)計(jì)細(xì)節(jié)調(diào)整,用戶的注意力可以被我們引到橫導(dǎo)航任何地方。

數(shù)據(jù)自己說話,改版成功。

回首整個改版過程,其實(shí)下圖中紅色部分用研的參與和貢獻(xiàn)非常突出:

 16

 

我對這個設(shè)計(jì)案例的總結(jié)是:

 

17

 

如上圖,重點(diǎn)是:

1,全局頁面的改動,改局部的時(shí)候,牽一發(fā)而動全身,需要設(shè)計(jì)的全局觀。

2,堅(jiān)持設(shè)計(jì)師的原則和方法論,有信心,不懼壓力。

3,設(shè)計(jì)與用戶研究的緊密敏捷配合。

4,設(shè)計(jì)產(chǎn)出的正結(jié)果,可以提升所有人對設(shè)計(jì)師的信任。

分享本文至:

日歷

鏈接

個人資料

存檔