一、項(xiàng)目背景
QQ會(huì)員頭像是一個(gè)會(huì)員比較喜歡的功能，為用戶提供了大量?jī)?yōu)質(zhì)精美的頭像。但內(nèi)容一直由官方提供，雖然保證了質(zhì)量，但在數(shù)量上更新速度上難以滿足用戶的需求。
在加上用戶分享頭像的新特性后，客戶端小頁面的局限性問題也凸顯出來，不再適合大量item內(nèi)容的展現(xiàn)。由此，頭像專區(qū)遷入到VIP官網(wǎng)正式立項(xiàng)。

二、設(shè)計(jì)過程
在頭像web版項(xiàng)目中，交互設(shè)計(jì)首次嘗試交互組重點(diǎn)項(xiàng)目設(shè)計(jì)流程，完整、嚴(yán)格并且有總結(jié)性輸出的對(duì)流程做了驗(yàn)證。

設(shè)計(jì)流程和涉及的方法如下圖所示：

1、用戶研究
這部分內(nèi)容主要回答以下問題：“誰將使用這個(gè)產(chǎn)品？”“用戶？用戶到底是誰？他們是什么樣的？”“他們?yōu)槭裁从眠@個(gè)產(chǎn)品？”

1.1用戶角色
在頭像項(xiàng)目中，首次嘗試引進(jìn)人物角色這一強(qiáng)大的設(shè)計(jì)工具。通過建立用戶模型和人物角色，來解決產(chǎn)品用戶群基數(shù)大，目標(biāo)用戶不明確的問題。這是一次非常值得、并富有意義的嘗試。并且用戶角色定義后，為QQ會(huì)員以后其他的項(xiàng)目提供了便利。

1.2情景描述的任務(wù)分析方法
相比其它的任務(wù)分析方法，情景描述法好處在于它容易懂，問題會(huì)暴露的更明顯，對(duì)后續(xù)的功能設(shè)計(jì)更有用。此外也可以來幫助做系統(tǒng)評(píng)估。

2、信息架構(gòu)
這部分起承接作用，目的是為了將前期用研的成果，向界面設(shè)計(jì)轉(zhuǎn)化。
“信息架構(gòu)”比較術(shù)語，可以將它理解成站點(diǎn)結(jié)構(gòu)的搭建或內(nèi)容組織。

這一步我們要做的，首先是設(shè)計(jì)一些功能，用于支持角色完成任務(wù)或幫助解決之前任務(wù)分析中所碰到的問題。因?yàn)樯坛鞘且淮胃陌妗⒍侨碌捻?xiàng)目，所以不需要對(duì)所有功能面面俱到的進(jìn)行分析，只是闡述其中一些關(guān)鍵、有代表性的功能。接下來，是對(duì)站點(diǎn)整體結(jié)構(gòu)進(jìn)行設(shè)計(jì)和組織，力圖使其條理清晰，邏輯關(guān)系明確。

最終出產(chǎn)的站點(diǎn)結(jié)構(gòu)，需要可以支持用戶完成任務(wù)流程，并盡可能的使這個(gè)過程自然流暢，符合角色的思維方式。大多數(shù)人只有在找不到自己想要的信息或遭遇困惑時(shí)，才會(huì)留意到站點(diǎn)的結(jié)構(gòu)和分類等。這也就意味著，一個(gè)好的信息架構(gòu)，應(yīng)該是不會(huì)被角色注意到的，但它又確確實(shí)實(shí)地幫助著角色去完成任務(wù)。

2.1功能設(shè)計(jì)
相比客戶端小頁面，功能點(diǎn)上面沒有增加很多新的特性。
2.2站點(diǎn)結(jié)構(gòu)設(shè)計(jì)

#p#3、交互設(shè)計(jì)
當(dāng)站點(diǎn)的結(jié)構(gòu)被骨架搭建起來之后，就需要更為詳盡的細(xì)筆鉤勒，讓整個(gè)站點(diǎn)豐滿起來。

通過框架設(shè)計(jì)，解決這個(gè)站點(diǎn)的結(jié)構(gòu)，主要區(qū)域?yàn)閕tem內(nèi)容展示。側(cè)邊欄為公用模塊。

接下來，是兩人個(gè)關(guān)鍵界面的設(shè)計(jì)：首頁和item列表頁。這兩個(gè)界面將為后續(xù)的詳細(xì)設(shè)計(jì)定義具體的框架和模板。

整個(gè)流程中的還有一個(gè)亮點(diǎn)，將通用模塊的元件化處理，不僅使得復(fù)用性增強(qiáng)、效率提高，也為大型設(shè)計(jì)項(xiàng)目積累經(jīng)驗(yàn)，使得多個(gè)設(shè)計(jì)師的合作更為有趣和高效。

詳細(xì)界面設(shè)計(jì)，從兩個(gè)方面入手：布局和行為。功能模塊如何組織？點(diǎn)擊某個(gè)功能將會(huì)觸發(fā)怎樣的操作？而這些，也就是交互設(shè)計(jì)師最終將輸出給項(xiàng)目組的稿件。

3.1界面框架設(shè)計(jì)
首頁采用三欄式布局，突出豐富多彩的內(nèi)容。

內(nèi)頁詳情頁面。右側(cè)邊欄為固定組件，左邊為主要內(nèi)容展示區(qū)。

3.2模塊組件處理
對(duì)于一些在原型制作過程中，會(huì)重復(fù)用到的功能模塊，使用Axure將其制作成了元件（master），可重復(fù)使用。

這樣做有幾個(gè)方面的好處：

A：原型制作效率大幅度提升（觀看制作過程）；
B：在需要多名設(shè)計(jì)師合作的大型設(shè)計(jì)項(xiàng)目中，可以通過這種方法保證原型風(fēng)格統(tǒng)一；
C：有利于培養(yǎng)新同學(xué)快速上手。

這里典型的模塊為頁面右側(cè)邊欄，“自定義頭像”“分享頭像”和“7天自動(dòng)分享頭像”為特性功能點(diǎn)，做成模塊化處理，在各個(gè)頁面都可以很順利的進(jìn)行。

3.2詳細(xì)界面設(shè)計(jì)
首頁界面

#p#頭像分類

七天頭像設(shè)置