|
一、項(xiàng)目背景
QQ會(huì)員頭像是一個(gè)會(huì)員比較喜歡的功能，為用戶提供了大量優(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é)性輸出的對流程做了驗(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ì)暴露的更明顯，對后續(xù)的功能設(shè)計(jì)更有用。此外也可以來幫助做系統(tǒ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)目，所以不需要對所有功能面面俱到的進(jìn)行分析，只是闡述其中一些關(guān)鍵、有代表性的功能。接下來，是對站點(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ì)
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)目組的稿件。
出處：isd
責(zé)任編輯：bluehearts
上一頁 下一頁 頭像web版交互設(shè)計(jì)總結(jié) [2]
|
第 1 頁 頭像web版交互設(shè)計(jì)總結(jié) [1]
第 2 頁 
