頭像web版交互設(shè)計(jì)總結(jié)

NO

頭像web版交互設(shè)計(jì)總結(jié)

頭像web版交互設(shè)計(jì)總結(jié)

jadl201*-4-22

互聯(lián)網(wǎng)資源

1.項(xiàng)目背景

QQ會(huì)員頭像是一個(gè)會(huì)員比較喜歡的功能，為用戶提供了大量?jī)?yōu)質(zhì)精美的頭像。但內(nèi)容一直由官方提供，雖然保證了質(zhì)量，但在數(shù)量上更新速度上難以滿足用戶的需求。

在加上用戶分享頭像的新特性后，客戶端小頁(yè)面的局限性問(wèn)題也凸顯出來(lái)，不再適合大量item內(nèi)容的展現(xiàn)。由此，頭像專區(qū)遷入到VIP官網(wǎng)正式立項(xiàng)。

2.設(shè)計(jì)過(guò)程

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

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

1.用戶研究

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

1.1用戶角色

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

1.2情景描述的任務(wù)分析方法

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

2.信息構(gòu)架

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

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

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

2.1功能設(shè)計(jì)

相比客戶端小頁(yè)面，功能點(diǎn)上面沒(méi)有增加很多新的特性。

2.2站點(diǎn)架構(gòu)設(shè)計(jì)

3.交互設(shè)計(jì)

當(dāng)站點(diǎn)的結(jié)構(gòu)被骨架搭建起來(lái)之后，就需要更為詳盡的細(xì)筆鉤勒，讓整個(gè)站點(diǎn)豐滿起來(lái)。

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

接下來(lái)，是兩人個(gè)關(guān)鍵界面的設(shè)計(jì)：首頁(yè)和item列表頁(yè)。這兩個(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界面架構(gòu)設(shè)計(jì)

首頁(yè)采用三欄式布局，突出豐富多彩的內(nèi)容。

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

3.2模塊組件處理

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

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

A.原型制作效率大幅度提升（觀看制作過(guò)程）；

B.在需要多名設(shè)計(jì)師合作的大型設(shè)計(jì)項(xiàng)目中，可以通過(guò)這種方法保證原型風(fēng)格統(tǒng)

一；

C.有利于培養(yǎng)新同學(xué)快速上手。

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

擴(kuò)展閱讀：交互設(shè)計(jì)筆試題總結(jié)

1平面設(shè)計(jì)工作的流程1)進(jìn)行設(shè)計(jì)需求分析；2)提供設(shè)計(jì)構(gòu)思；3)收集整理資料；4)選擇相關(guān)軟件進(jìn)行制作；

5)根據(jù)領(lǐng)導(dǎo)或客戶的意見進(jìn)行修改；6)成稿。

2用戶體驗(yàn)（UE）是一種純主觀的，在用戶使用產(chǎn)品過(guò)程中建立起來(lái)的感受。但是對(duì)于一個(gè)界定明確的用戶群來(lái)講，其用戶體驗(yàn)的共性是能夠竟有良好的設(shè)計(jì)實(shí)驗(yàn)來(lái)認(rèn)識(shí)到。好的用戶體驗(yàn)，是一種“自然”的體驗(yàn)。

一、問(wèn)答題。

3對(duì)用戶體驗(yàn)及相關(guān)行業(yè)閱讀過(guò)的書籍。

4列出至少5個(gè)國(guó)內(nèi)外對(duì)應(yīng)網(wǎng)站？

GoogleVS百度FacebookVS人人Twitter(140字符)VS微博eBayVS淘寶AmazonVS京東YouTubeVS優(yōu)酷土豆grouponVS拉手網(wǎng)

5jpg和gif格式的不同點(diǎn)，各自應(yīng)用在哪些場(chǎng)合。

1).jpg格式是由一個(gè)軟件開發(fā)聯(lián)合組織制定的有損壓縮格式，用最少的空間得

到較好的圖像品質(zhì)。對(duì)色彩的信息保留較好，適合應(yīng)用于互聯(lián)網(wǎng)和需要連續(xù)色調(diào)的圖像如照片。

2).gif格式是一種基于LZW算法的連續(xù)色調(diào)無(wú)損壓縮格式，它的另一個(gè)特點(diǎn)是

可以存多幅彩色圖像，可以構(gòu)成最簡(jiǎn)單的動(dòng)畫。GIF文件支持透明特性，有大量的軟件使用GIF圖像文件，它還適用于icon圖。

3).png格式是基于公共專利壓縮算法的無(wú)損壓縮格式，支持8位和24位圖像。

PNG文件也支持透明特性，8位的PNG圖片與GIF圖片基本相同，24位的PNG可以支持Alpha透明效果，適合用于需要與背景完美融合場(chǎng)合。

6怎樣理解“設(shè)計(jì)”二字？

7好的設(shè)計(jì)有什么標(biāo)準(zhǔn)？

8中國(guó)web設(shè)計(jì)與外國(guó)的同行比較有哪些優(yōu)勢(shì)和不足。

9說(shuō)說(shuō)優(yōu)秀的設(shè)計(jì)師需要哪些素質(zhì)和能力。

10一句話解釋交互設(shè)計(jì)

11比較一般的網(wǎng)頁(yè)翻頁(yè)設(shè)計(jì)和移動(dòng)平臺(tái)產(chǎn)品的翻頁(yè)設(shè)計(jì)。

12網(wǎng)站首頁(yè)常常會(huì)放大量的分類信息和導(dǎo)航欄，怎樣改進(jìn)并提升用戶體驗(yàn)？

13為什么現(xiàn)在的網(wǎng)站注冊(cè)名都要用郵箱地址？

二、分析題。

14列出至少5個(gè)生活中用戶體驗(yàn)不方便的案例，如電梯的上與下。選擇上述5個(gè)案例之一進(jìn)行分析并解決之。

15說(shuō)一下你覺得用戶體驗(yàn)最好的互聯(lián)網(wǎng)產(chǎn)品有哪些，為什么？

16近三個(gè)月著重觀察的互聯(lián)網(wǎng)產(chǎn)品列表。

17小A是一個(gè)交互設(shè)計(jì)師，某日接到一個(gè)任務(wù)，設(shè)計(jì)一個(gè)表單，一共只有三個(gè)輸入框，而且都是必填項(xiàng)。小A就開始犯愁了：如果有一項(xiàng)是必填的，我可以給它加上”*”，那剩下的兩項(xiàng)就不是必填的。但現(xiàn)在三項(xiàng)都是必填的，我怎么把這個(gè)信息表達(dá)給用戶呢？另外，如果我把這個(gè)信息表達(dá)得過(guò)于明顯了，用戶當(dāng)然都會(huì)偷懶不填的。那我怎么才能收集到盡可能多的用戶輸入呢？這分寸的把握比談戀愛還難了，怎么辦呢？

請(qǐng)用盡可能簡(jiǎn)短的文字表述您的解決方案。如果您對(duì)這道題目本身有異議，也可以敘述您的見解。

三、畫圖題。

18畫出從淘寶買東西的一個(gè)高保真流程圖。從將貨物添加到購(gòu)物車到確認(rèn)訂單中間的所有流程和反饋。

20畫郵件發(fā)送流程圖。在發(fā)送郵件過(guò)程中，若小于50M，正常郵件界面發(fā)送，若大于50M，進(jìn)入超大附件界面，此時(shí)進(jìn)行判斷，條件一：開通手機(jī)郵件功能，條件二：安裝手機(jī)郵件插件。只有在這兩條件都滿足的情況下，才可以成功發(fā)送，否則不成功。

四、設(shè)計(jì)題。

21某公司為合作客戶建立信息列表，大約有1000個(gè)客戶，近五年的記錄都在里面。現(xiàn)在讓你設(shè)計(jì)一個(gè)列表頁(yè)面，來(lái)顯示客戶信息。畫出原型和寫設(shè)計(jì)說(shuō)明。

22假設(shè)有一個(gè)”CEO服裝網(wǎng)”，它的主營(yíng)業(yè)務(wù)是針對(duì)中國(guó)的大公司CEO們銷售各式服裝。請(qǐng)您為該網(wǎng)站設(shè)計(jì)一個(gè)簡(jiǎn)單的Persona（注意，僅一個(gè)）

23未來(lái)的社交信息超級(jí)聚合器。未來(lái)的移動(dòng)互聯(lián)用戶的信息分散在新浪微博、騰訊微博、QQ、QQ空間、人人、開心、facebook等多處，你需要在iPad（或AndroidPad）平板平臺(tái)上設(shè)計(jì)一款聚合軟件，吧用戶身邊好友的信息，其他（通過(guò)你對(duì)用戶情況的分析）信息（如淘寶信息、天氣……）整合到一個(gè)適合平臺(tái)閱讀的界面中去，需要兼顧其可用性和游戲性。

24北京三里屯有一家AppleStore，每當(dāng)有新產(chǎn)品剛發(fā)售的時(shí)候總是有很多客戶來(lái)排隊(duì)購(gòu)買，中間摻雜著一些黃牛黨。設(shè)計(jì)一款供該商店使用的觸摸屏手機(jī)app，提供新品發(fā)售排隊(duì)的客戶排號(hào)用，保證：

25公司向針對(duì)“節(jié)假日回家”這一行為開發(fā)一款互聯(lián)網(wǎng)產(chǎn)品，需要寫一個(gè)項(xiàng)目策劃，用戶潛在需求，時(shí)間和工作人員分工，功能流程框架，網(wǎng)站首頁(yè)草圖和另外某一屏草圖。

不再只是一味的追求視覺或?qū)崿F(xiàn)產(chǎn)品功能、結(jié)構(gòu)等，而是視覺、可用性一個(gè)都不能少。

如何壓縮可用的圖片？如何設(shè)計(jì)網(wǎng)頁(yè)的色彩？如何給頁(yè)面信息歸類排列優(yōu)先級(jí)？如何架構(gòu)一個(gè)頁(yè)面、一個(gè)網(wǎng)站？最后如何熟練使用軟件完成設(shè)計(jì)？

1簡(jiǎn)單的智力計(jì)算題，只要審題仔細(xì)的話肯定沒(méi)問(wèn)題的2網(wǎng)絡(luò)常識(shí)，外國(guó)的社交網(wǎng)站，視頻網(wǎng)站考你一下3JavaSrcipt基本知識(shí)，設(shè)計(jì)原則什么的填空題：

1Chrome瀏覽器內(nèi)核

Trident內(nèi)核：IE,MaxThon,TT,TheWorld,360,搜狗瀏覽器等

Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等Presto內(nèi)核：Opera7及以上Webkit內(nèi)核：Safari,Chrome等典型的雙核瀏覽器包括：

搜狗2.0：Trident內(nèi)核和WebKit內(nèi)核傲游3.0Beta：Trident和WebKit內(nèi)核QQ瀏覽器5：Trident內(nèi)核和WebKit內(nèi)核

2Twitter一次能最多能發(fā)多少字符13電容式屏幕和電阻式屏幕的比較

1)電阻屏在觸模時(shí)需要輕觸壓按，而電容屏即使很輕微的手指觸碰感應(yīng)就能激

活。

2)電阻屏可以用任何物體來(lái)觸摸，而電容屏是人體熱感應(yīng)工作原理，只能用手

指的熱感區(qū)來(lái)觸摸，指甲和手寫筆均無(wú)效。

3)電容屏可以很容易進(jìn)行多點(diǎn)觸摸，電阻屏一般不能實(shí)現(xiàn)多點(diǎn)觸摸的。4)電阻屏內(nèi)部是軟的，一般是在4到5層超薄的鋼化玻璃中間夾雜細(xì)微的炭粒

（顯微鏡下才能看見），通過(guò)按壓導(dǎo)致上下兩層的炭粒相互接觸而接通觸屏電路，產(chǎn)生觸摸反應(yīng)，容易產(chǎn)生出油、劃痕，易壞，容易觸屏不靈，而電容屏都是采用單層加厚鋼化玻璃，硬度大，耐舊，使用壽命長(zhǎng)。

5)電阻屏在陽(yáng)光下可視性稍差，電容屏則非常好，在陽(yáng)光寫可視性依然很強(qiáng)。6)熱感電容屏的成本比普通按壓式電阻屏貴50美金,使用壽命是普通電阻屏的

2倍,因此熱感電容屏一般使用于高檔高端手機(jī)上,電阻屏一般使用于普通手機(jī)上。

4舉兩個(gè)社交媒體網(wǎng)站

開心網(wǎng)人人網(wǎng)QQ空間朋友網(wǎng)Facebook豆瓣珍愛百合世紀(jì)佳緣QQ空間基于6.37億活躍QQ用戶的中國(guó)最大的社交網(wǎng)絡(luò)。Qzone的問(wèn)題不在于數(shù)量，而是這種基于昵稱的社交圖譜的質(zhì)量。

Renren是中國(guó)實(shí)名社交網(wǎng)站的領(lǐng)頭羊。它為中國(guó)的SNS設(shè)立了標(biāo)準(zhǔn)，但是仍然面對(duì)著其他社交網(wǎng)站的挑戰(zhàn)，比如騰訊朋友，Kaixin001。

附加題：

用戶喜歡在用QQ簽名存一些網(wǎng)址，電話等信息備忘，但QQ簽名檔不是針對(duì)此進(jìn)行設(shè)計(jì)的，請(qǐng)?zhí)岢鼋鉀Q方案

友情提示：本文中關(guān)于《頭像web版交互設(shè)計(jì)總結(jié)》給出的范例僅供您參考拓展思維使用，頭像web版交互設(shè)計(jì)總結(jié)：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《頭像web版交互設(shè)計(jì)總結(jié)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://m.7334dd.com/gongwen/650785.html

• 上一篇：出版社個(gè)人專業(yè)技術(shù)工作總結(jié)
• 下一篇：雜志營(yíng)銷的成功經(jīng)驗(yàn)總結(jié)