頭像web版交互設(shè)計總結(jié)
NO
頭像web版交互設(shè)計總結(jié)
頭像web版交互設(shè)計總結(jié)
jadl201*-4-22
互聯(lián)網(wǎng)資源
1.項目背景
QQ會員頭像是一個會員比較喜歡的功能,為用戶提供了大量優(yōu)質(zhì)精美的頭像。但內(nèi)容一直由官方提供,雖然保證了質(zhì)量,但在數(shù)量上更新速度上難以滿足用戶的需求。
在加上用戶分享頭像的新特性后,客戶端小頁面的局限性問題也凸顯出來,不再適合大量item內(nèi)容的展現(xiàn)。由此,頭像專區(qū)遷入到VIP官網(wǎng)正式立項。
2.設(shè)計過程
在頭像web版項目中,交互設(shè)計首次嘗試交互組重點項目設(shè)計流程,完整、嚴(yán)格并且有總結(jié)性輸出的對流程做了驗證。
設(shè)計流程和涉及的方法如下圖所示:
1.用戶研究
這部分內(nèi)容主要回答以下問題:“誰將使用這個產(chǎn)品?”“用戶?用戶到底是誰?他們是什么樣的?”“他們?yōu)槭裁从眠@個產(chǎn)品?”
1.1用戶角色
在頭像項目中,首次嘗試引進(jìn)人物角色這一強大的設(shè)計工具。通過建立用戶模型和人物角色,來解決產(chǎn)品用戶群基數(shù)大,目標(biāo)用戶不明確的問題。這是一次非常值得、并富有意義的嘗試。并且用戶角色定義后,為QQ會員以后其他的項目提供了便利。
1.2情景描述的任務(wù)分析方法
相比其它的任務(wù)分析方法,情景描述法好處在于它容易懂,問題會暴露的更明顯,對后續(xù)的功能設(shè)計更有用。此外也可以來幫助做系統(tǒng)評估。
2.信息構(gòu)架
這部分起承接作用,目的是為了將前期用研的成果,向界面設(shè)計轉(zhuǎn)化!靶畔⒓軜(gòu)”比較術(shù)語,可以將它理解成站點結(jié)構(gòu)的搭建或內(nèi)容組織。
這一步我們要做的,首先是設(shè)計一些功能,用于支持角色完成任務(wù)或幫助解決之前任務(wù)分析中所碰到的問題。因為商城是一次改版、而非全新的項目,所以不需要對所有功能面面俱到的進(jìn)行分析,只是闡述其中一些關(guān)鍵、有代表性的功能。接下來,是對站點整體結(jié)構(gòu)進(jìn)行設(shè)計和組織,力圖使其條理清晰,邏輯關(guān)系明確。
最終出產(chǎn)的站點結(jié)構(gòu),需要可以支持用戶完成任務(wù)流程,并盡可能的使這個過程自然流暢,符合角色的思維方式。大多數(shù)人只有在找不到自己想要的信息或遭遇困惑時,才會留意到站點的結(jié)構(gòu)和分類等。這也就意味著,一個好的信息架構(gòu),應(yīng)該是不會被角色注意到的,但它又確確實實地幫助著角色去完成任務(wù)。
2.1功能設(shè)計
相比客戶端小頁面,功能點上面沒有增加很多新的特性。
2.2站點架構(gòu)設(shè)計
3.交互設(shè)計
當(dāng)站點的結(jié)構(gòu)被骨架搭建起來之后,就需要更為詳盡的細(xì)筆鉤勒,讓整個站點豐滿起來。
通過框架設(shè)計,解決這個站點的結(jié)構(gòu),主要區(qū)域為item內(nèi)容展示。側(cè)邊欄為公用模塊。
接下來,是兩人個關(guān)鍵界面的設(shè)計:首頁和item列表頁。這兩個界面將為后續(xù)的詳細(xì)設(shè)計定義具體的框架和模板。
整個流程中的還有一個亮點,將通用模塊的元件化處理,不僅使得復(fù)用性增強、效率提高,也為大型設(shè)計項目積累經(jīng)驗,使得多個設(shè)計師的合作更為有趣和高效。
詳細(xì)界面設(shè)計,從兩個方面入手:布局和行為。功能模塊如何組織?點擊某個功能將會觸發(fā)怎樣的操作?而這些,也就是交互設(shè)計師最終將輸出給項目組的稿件。
3.1界面架構(gòu)設(shè)計
首頁采用三欄式布局,突出豐富多彩的內(nèi)容。
內(nèi)頁詳情頁面。右側(cè)邊欄為固定組件,左邊為主要內(nèi)容展示區(qū)。
3.2模塊組件處理
對于一些在原型制作過程中,會重復(fù)用到的功能模塊,使用Axure將其制作成了元件(master),可重復(fù)使用。
這樣做有幾個方面的好處:
A.原型制作效率大幅度提升(觀看制作過程);
B.在需要多名設(shè)計師合作的大型設(shè)計項目中,可以通過這種方法保證原型風(fēng)格統(tǒng)
一;
C.有利于培養(yǎng)新同學(xué)快速上手。
這里典型的模塊為頁面右側(cè)邊欄,“自定義頭像”“分享頭像”和“7天自動分享頭像”為特性功能點,做成模塊化處理,在各個頁面都可以很順利的進(jìn)行。
擴展閱讀:交互設(shè)計筆試題總結(jié)
1平面設(shè)計工作的流程1)進(jìn)行設(shè)計需求分析;2)提供設(shè)計構(gòu)思;3)收集整理資料;4)選擇相關(guān)軟件進(jìn)行制作;
5)根據(jù)領(lǐng)導(dǎo)或客戶的意見進(jìn)行修改;6)成稿。
2用戶體驗(UE)是一種純主觀的,在用戶使用產(chǎn)品過程中建立起來的感受。但是對于一個界定明確的用戶群來講,其用戶體驗的共性是能夠竟有良好的設(shè)計實驗來認(rèn)識到。好的用戶體驗,是一種“自然”的體驗。
一、問答題。
3對用戶體驗及相關(guān)行業(yè)閱讀過的書籍。
4列出至少5個國內(nèi)外對應(yīng)網(wǎng)站?
GoogleVS百度FacebookVS人人Twitter(140字符)VS微博eBayVS淘寶AmazonVS京東YouTubeVS優(yōu)酷土豆grouponVS拉手網(wǎng)
5jpg和gif格式的不同點,各自應(yīng)用在哪些場合。
1).jpg格式是由一個軟件開發(fā)聯(lián)合組織制定的有損壓縮格式,用最少的空間得
到較好的圖像品質(zhì)。對色彩的信息保留較好,適合應(yīng)用于互聯(lián)網(wǎng)和需要連續(xù)色調(diào)的圖像如照片。
2).gif格式是一種基于LZW算法的連續(xù)色調(diào)無損壓縮格式,它的另一個特點是
可以存多幅彩色圖像,可以構(gòu)成最簡單的動畫。GIF文件支持透明特性,有大量的軟件使用GIF圖像文件,它還適用于icon圖。
3).png格式是基于公共專利壓縮算法的無損壓縮格式,支持8位和24位圖像。
PNG文件也支持透明特性,8位的PNG圖片與GIF圖片基本相同,24位的PNG可以支持Alpha透明效果,適合用于需要與背景完美融合場合。
6怎樣理解“設(shè)計”二字?
7好的設(shè)計有什么標(biāo)準(zhǔn)?
8中國web設(shè)計與外國的同行比較有哪些優(yōu)勢和不足。
9說說優(yōu)秀的設(shè)計師需要哪些素質(zhì)和能力。
10一句話解釋交互設(shè)計
11比較一般的網(wǎng)頁翻頁設(shè)計和移動平臺產(chǎn)品的翻頁設(shè)計。
12網(wǎng)站首頁常常會放大量的分類信息和導(dǎo)航欄,怎樣改進(jìn)并提升用戶體驗?
13為什么現(xiàn)在的網(wǎng)站注冊名都要用郵箱地址?
二、分析題。
14列出至少5個生活中用戶體驗不方便的案例,如電梯的上與下。選擇上述5個案例之一進(jìn)行分析并解決之。
15說一下你覺得用戶體驗最好的互聯(lián)網(wǎng)產(chǎn)品有哪些,為什么?
16近三個月著重觀察的互聯(lián)網(wǎng)產(chǎn)品列表。
17小A是一個交互設(shè)計師,某日接到一個任務(wù),設(shè)計一個表單,一共只有三個輸入框,而且都是必填項。小A就開始犯愁了:如果有一項是必填的,我可以給它加上”*”,那剩下的兩項就不是必填的。但現(xiàn)在三項都是必填的,我怎么把這個信息表達(dá)給用戶呢?另外,如果我把這個信息表達(dá)得過于明顯了,用戶當(dāng)然都會偷懶不填的。那我怎么才能收集到盡可能多的用戶輸入呢?這分寸的把握比談戀愛還難了,怎么辦呢?
請用盡可能簡短的文字表述您的解決方案。如果您對這道題目本身有異議,也可以敘述您的見解。
三、畫圖題。
18畫出從淘寶買東西的一個高保真流程圖。從將貨物添加到購物車到確認(rèn)訂單中間的所有流程和反饋。
20畫郵件發(fā)送流程圖。在發(fā)送郵件過程中,若小于50M,正常郵件界面發(fā)送,若大于50M,進(jìn)入超大附件界面,此時進(jìn)行判斷,條件一:開通手機郵件功能,條件二:安裝手機郵件插件。只有在這兩條件都滿足的情況下,才可以成功發(fā)送,否則不成功。
四、設(shè)計題。
21某公司為合作客戶建立信息列表,大約有1000個客戶,近五年的記錄都在里面,F(xiàn)在讓你設(shè)計一個列表頁面,來顯示客戶信息。畫出原型和寫設(shè)計說明。
22假設(shè)有一個”CEO服裝網(wǎng)”,它的主營業(yè)務(wù)是針對中國的大公司CEO們銷售各式服裝。請您為該網(wǎng)站設(shè)計一個簡單的Persona(注意,僅一個)
23未來的社交信息超級聚合器。未來的移動互聯(lián)用戶的信息分散在新浪微博、騰訊微博、QQ、QQ空間、人人、開心、facebook等多處,你需要在iPad(或AndroidPad)平板平臺上設(shè)計一款聚合軟件,吧用戶身邊好友的信息,其他(通過你對用戶情況的分析)信息(如淘寶信息、天氣……)整合到一個適合平臺閱讀的界面中去,需要兼顧其可用性和游戲性。
24北京三里屯有一家AppleStore,每當(dāng)有新產(chǎn)品剛發(fā)售的時候總是有很多客戶來排隊購買,中間摻雜著一些黃牛黨。設(shè)計一款供該商店使用的觸摸屏手機app,提供新品發(fā)售排隊的客戶排號用,保證:
25公司向針對“節(jié)假日回家”這一行為開發(fā)一款互聯(lián)網(wǎng)產(chǎn)品,需要寫一個項目策劃,用戶潛在需求,時間和工作人員分工,功能流程框架,網(wǎng)站首頁草圖和另外某一屏草圖。
不再只是一味的追求視覺或?qū)崿F(xiàn)產(chǎn)品功能、結(jié)構(gòu)等,而是視覺、可用性一個都不能少。
如何壓縮可用的圖片?如何設(shè)計網(wǎng)頁的色彩?如何給頁面信息歸類排列優(yōu)先級?如何架構(gòu)一個頁面、一個網(wǎng)站?最后如何熟練使用軟件完成設(shè)計?
1簡單的智力計算題,只要審題仔細(xì)的話肯定沒問題的2網(wǎng)絡(luò)常識,外國的社交網(wǎng)站,視頻網(wǎng)站考你一下3JavaSrcipt基本知識,設(shè)計原則什么的填空題:
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)電阻屏在觸模時需要輕觸壓按,而電容屏即使很輕微的手指觸碰感應(yīng)就能激
活。
2)電阻屏可以用任何物體來觸摸,而電容屏是人體熱感應(yīng)工作原理,只能用手
指的熱感區(qū)來觸摸,指甲和手寫筆均無效。
3)電容屏可以很容易進(jìn)行多點觸摸,電阻屏一般不能實現(xiàn)多點觸摸的。4)電阻屏內(nèi)部是軟的,一般是在4到5層超薄的鋼化玻璃中間夾雜細(xì)微的炭粒
(顯微鏡下才能看見),通過按壓導(dǎo)致上下兩層的炭粒相互接觸而接通觸屏電路,產(chǎn)生觸摸反應(yīng),容易產(chǎn)生出油、劃痕,易壞,容易觸屏不靈,而電容屏都是采用單層加厚鋼化玻璃,硬度大,耐舊,使用壽命長。
5)電阻屏在陽光下可視性稍差,電容屏則非常好,在陽光寫可視性依然很強。6)熱感電容屏的成本比普通按壓式電阻屏貴50美金,使用壽命是普通電阻屏的
2倍,因此熱感電容屏一般使用于高檔高端手機上,電阻屏一般使用于普通手機上。
4舉兩個社交媒體網(wǎng)站
開心網(wǎng)人人網(wǎng)QQ空間朋友網(wǎng)Facebook豆瓣珍愛百合世紀(jì)佳緣QQ空間基于6.37億活躍QQ用戶的中國最大的社交網(wǎng)絡(luò)。Qzone的問題不在于數(shù)量,而是這種基于昵稱的社交圖譜的質(zhì)量。
Renren是中國實名社交網(wǎng)站的領(lǐng)頭羊。它為中國的SNS設(shè)立了標(biāo)準(zhǔn),但是仍然面對著其他社交網(wǎng)站的挑戰(zhàn),比如騰訊朋友,Kaixin001。
附加題:
用戶喜歡在用QQ簽名存一些網(wǎng)址,電話等信息備忘,但QQ簽名檔不是針對此進(jìn)行設(shè)計的,請?zhí)岢鼋鉀Q方案
友情提示:本文中關(guān)于《頭像web版交互設(shè)計總結(jié)》給出的范例僅供您參考拓展思維使用,頭像web版交互設(shè)計總結(jié):該篇文章建議您自主創(chuàng)作。
來源:網(wǎng)絡(luò)整理 免責(zé)聲明:本文僅限學(xué)習(xí)分享,如產(chǎn)生版權(quán)問題,請聯(lián)系我們及時刪除。