網(wǎng)易婚戀交友網(wǎng)站的設(shè)計(jì)流程.docx

網(wǎng)易婚戀交友網(wǎng)站的設(shè)計(jì)流程本文主要介紹網(wǎng)易婚戀交友網(wǎng)站的設(shè)計(jì)流程佳人有約網(wǎng)易婚戀交友網(wǎng)站，經(jīng)過精心策劃和團(tuán)隊(duì)努力合作，終于打造出風(fēng)格精美、功能強(qiáng)大及人性化體驗(yàn)的交友網(wǎng)站產(chǎn)品。整個(gè)項(xiàng)目流程：從時(shí)間流來看整個(gè)過程：1. 改版計(jì)劃佳人有約改版目標(biāo)明確產(chǎn)品定位，優(yōu)化設(shè)計(jì)風(fēng)格以便提升產(chǎn)品品牌認(rèn)知度。優(yōu)化任務(wù)流程、產(chǎn)品架構(gòu)，使之更符合用戶需求。提高產(chǎn)品易用性，改善用戶體驗(yàn)。優(yōu)化源代碼，使網(wǎng)站執(zhí)行效率更高。2. 用研和評估工作分為三部分：第一是用戶研究，主要針對抽樣用戶對象進(jìn)行訪問和交談，并記錄他們基本網(wǎng)上交友行為，初步了解需求，得出結(jié)論。第二是對自身網(wǎng)站的數(shù)據(jù)進(jìn)行統(tǒng)計(jì)和分析，挖取潛在用戶行為和需求。第三是收集第三方交友方面的用戶分析數(shù)據(jù)，結(jié)合第一、二點(diǎn)寫出符合自身的用戶研究報(bào)告。由于這一方面的信息量比較大，就只羅列個(gè)大綱。任務(wù)1 . 用戶研究在idate篩選代表性用戶進(jìn)行深度訪談焦點(diǎn)訪談大綱準(zhǔn)備訪談步聚和問話內(nèi)容訪談結(jié)論1. 用戶座談會流程2. 用戶基本網(wǎng)上交友行為3. 網(wǎng)上交友行為的生活角色化分析4. 交友網(wǎng)站最重要的功能5. 情感解析和設(shè)計(jì)建議訪談數(shù)據(jù)制餅圖對比分析訪談筆錄記錄訪談對話內(nèi)容對idate現(xiàn)有后臺數(shù)據(jù)進(jìn)行挖掘佳人有約用戶概述定義我們的目標(biāo)用戶數(shù)據(jù)資料Idate網(wǎng)站用戶數(shù)據(jù)通過二級研究，網(wǎng)絡(luò)資源搜索及研究，客服數(shù)據(jù)研究，撰寫交友用戶研究報(bào)告任務(wù)2. 自我評估評估方式以打分形式進(jìn)行，并對每一點(diǎn)做說明。導(dǎo)航評估（與同行戀愛交友網(wǎng)站競爭對手做對比進(jìn)行評估）PET評估 （從說服，情感，信任三方面，觀察同行網(wǎng)站對象和自身網(wǎng)站的評估）交友網(wǎng)站設(shè)計(jì)評分（和同行戀愛交友網(wǎng)站對比評估）idate交互設(shè)計(jì)評估（對注冊模塊，約會模塊，搜索，留言，個(gè)人管理評估）idate頁面設(shè)計(jì)評估（未登錄首頁，我的首頁，搜索約會，約會管理，留言禮物，我的朋友，話題頁面，個(gè)人展示頁面評估）任務(wù)3. 專家評估微型專家評估，請外部專業(yè)用戶體驗(yàn)公司對網(wǎng)站進(jìn)行一次小型的評估，對idate網(wǎng)站有待改善之處大概羅列出來。3. 角色情景我們直接省略了這塊，主要是考慮時(shí)間關(guān)系，加上目前的工作是改版，基于原來的網(wǎng)站基礎(chǔ)上進(jìn)行工作，所以就省略了這塊，也由于省了這塊，導(dǎo)致后期會有挺多的概念模型不夠清晰和需求不夠準(zhǔn)確而增加一些討論的時(shí)間。4. 任務(wù)流程整理Idate用戶對網(wǎng)站所有任務(wù)匯總并繪制流程圖。這部分的工作的結(jié)果，是程序開發(fā)功能模塊的依據(jù)。隨著進(jìn)度和小組工作的進(jìn)行，隨時(shí)對任務(wù)流程進(jìn)行修訂和與程序溝通。5. 信息架構(gòu)任務(wù)1. 在Idate篩選代表性用戶進(jìn)行焦點(diǎn)小組卡片分類任務(wù)2. 對Idate登錄用戶進(jìn)行網(wǎng)上改版調(diào)查任務(wù)3. 繪制產(chǎn)品信息架構(gòu)圖主要是自上而下架設(shè)了頁面架構(gòu)和一些功能模塊，從橫向和縱向進(jìn)行了分解。對重點(diǎn)導(dǎo)航重新進(jìn)行定位和移動，挑選出重要的功能模塊和淡出次要模塊。只有定位好頁面結(jié)構(gòu)層次和導(dǎo)航關(guān)系，視覺設(shè)計(jì)師在這個(gè)時(shí)間才能進(jìn)行有效的主次關(guān)系定位和導(dǎo)航表現(xiàn)形式的設(shè)計(jì)，甚至關(guān)系到整個(gè)網(wǎng)站視覺方向的設(shè)計(jì)等。6. 產(chǎn)品原型具備一套標(biāo)準(zhǔn)的基礎(chǔ)交互元件庫是很重要的，特別對于幾個(gè)策劃同事分工合作來說，保證了最起碼的樣式一致性。打包好的元件以組件形式，方便拖放在firework工作區(qū)間里移動和擺放，提高網(wǎng)站原型的開發(fā)效率。同時(shí)也為日后的交互稿管理維護(hù)等工作帶來方便性。這次的原型開發(fā)應(yīng)用了Axure pro 5.5原型開發(fā)工具由于時(shí)間關(guān)系，原型并沒有發(fā)揮其重要的作用，只是用它實(shí)現(xiàn)一個(gè)簡陋的帶點(diǎn)交互的初始原型而已，可以看下面的注冊步驟效果圖。個(gè)別原因至使應(yīng)用原型疊代方法并沒有在這次改版當(dāng)中應(yīng)用到，畢竟開發(fā)一個(gè)原型接近于真實(shí)網(wǎng)站來說，所花時(shí)間成本還是比較高的。相信熟悉掌握了這個(gè)工具和方法，必對開發(fā)高效實(shí)用的網(wǎng)站起到很好的作用。這次的改版的交互稿基本上都是策劃同事制作的，他們的表現(xiàn)都很不錯。策劃制作交互稿有其自身的原因和團(tuán)隊(duì)發(fā)展的考慮：第一：策劃最了解自己的產(chǎn)品，對需求比較明確。第二：吸取第一次項(xiàng)目工作的經(jīng)驗(yàn)，提高交互能力。交互這塊所花的時(shí)間比重也是相對比較多，但也是應(yīng)該的，這部分的工作相當(dāng)于建樓要打好地基一樣，減少后期返工修改過多的問題。7. UI視覺設(shè)計(jì)7.1找參考視覺設(shè)計(jì)從立項(xiàng)目就開始著手項(xiàng)目的工作。前期收集相關(guān)同行網(wǎng)站視覺OKCUPIDeHarmonyMatch速配日本站慢慢形成自己的一套視覺色和風(fēng)格：網(wǎng)易佳人有約區(qū)別于國內(nèi)同行戀愛交友網(wǎng)站，以國內(nèi)單身白領(lǐng)階層為主要用戶的約會網(wǎng)站。清新簡潔，安全舒適，秀氣大方。7.2定寬度網(wǎng)站寬屏950像素，最好效果應(yīng)該是960，可以完美應(yīng)用柵欄設(shè)計(jì)，了解更多柵欄設(shè)計(jì)，請查看：http:/960.gs/詳細(xì)介紹了柵欄設(shè)計(jì)的原理和效果，包括柵欄下載。Idate應(yīng)用了網(wǎng)格的設(shè)計(jì)來對齊和布局元素等。定義了每一個(gè)格子為10px，安CTRL+ K和CTRL+6快捷鍵就可以調(diào)出Photoshop首選項(xiàng)，設(shè)置網(wǎng)格。預(yù)覽的效果如下圖示：7.3自下而上的設(shè)計(jì)應(yīng)用自下而上的方式進(jìn)行設(shè)計(jì)，從最重要的個(gè)人管理頁面開始展開。我的佳人有約進(jìn)過了大大小小十幾次的修改，每一次的修改就產(chǎn)生十個(gè)以下的視覺稿，不斷的不滿意，不斷的執(zhí)著修改，以追求最合理的架構(gòu)、最合理的視覺、最合理的用色為目標(biāo)，但不以此為終點(diǎn)，因?yàn)橐曈X設(shè)計(jì)是沒有終點(diǎn)的，回顧最后的設(shè)計(jì)還是會看出問題和不合理。初期的效果：初期的效果主次不夠清晰，圖片較多地壓在下面，頭輕腳重。沒有一種解脫感。大概經(jīng)過了十幾輪的幾十個(gè)效果的對比修改，發(fā)展出了以下效果：大體上這個(gè)方向和細(xì)節(jié)已經(jīng)成形了，但還存在一些問題，如推薦約會太一般，跟今日推薦差不多形式，不夠突出。于是做出最后嘗試：透氣，有主次，不要過多的色調(diào)和設(shè)計(jì)。最后定下了這個(gè)方案。7.4 設(shè)計(jì)順藤摸瓜其它頁面以這個(gè)權(quán)重較高的個(gè)人管理頁面為主，展開出去設(shè)計(jì)。7.5首頁的設(shè)計(jì)過程首頁也是經(jīng)過了好幾輪的嘗試，希望設(shè)計(jì)出別于國內(nèi)的交友網(wǎng)，但最后還是有點(diǎn)離不開交友網(wǎng)在國內(nèi)的國情：把盡量多的會員信息展示在首頁，用最真城的信息和最靠譜的視覺來表達(dá)這就是全國最安全，最成功的交友戀愛網(wǎng)站，吸引用戶點(diǎn)擊和注冊。所以一開始的交互定位了這樣的結(jié)構(gòu)：整體結(jié)構(gòu)就是傳統(tǒng)交友網(wǎng)站，其中一個(gè)小問題是沒有體現(xiàn)出交友的約會特色和品位定位，并沒有區(qū)別于國內(nèi)的其它交友網(wǎng)站。于是做了些嘗試，結(jié)果如下。顯然整體結(jié)構(gòu)和上半部分的感覺上是可以的，大量留白，以簡潔手法去表達(dá)大氣。但從另一個(gè)角度去看的話，內(nèi)容區(qū)對于高檔次的戀愛會員來說，是失敗的，方向也是不符合白白領(lǐng)高級階層，快速一看，還以為會是非主流。不合國內(nèi)交友的國情就是這個(gè)意思。經(jīng)過無數(shù)的嘗試，才回歸到了以內(nèi)容為主，兼推網(wǎng)站形象的視覺，效果如下：特色約會，視覺層次也分明開來。整個(gè)網(wǎng)站匯總一下視覺元素：配色：文字用色：導(dǎo)航視覺風(fēng)格：按鈕風(fēng)格：Icon：形象照尺寸：通過本地共享管理整個(gè)項(xiàng)目，實(shí)現(xiàn)資源共享，協(xié)同工作和進(jìn)度的跟進(jìn)等。8. 佳人有約LOGO升級為同城約會原始LOGO要求延續(xù)原有風(fēng)格和特色，轉(zhuǎn)變?yōu)橥羌s會。結(jié)合同城約會的市場定位和用戶定位，走白領(lǐng)單身高級用戶，以穩(wěn)重大方為主導(dǎo)，保留原來簡潔風(fēng)格，應(yīng)用戀愛交友特色的飄帶來點(diǎn)飾整個(gè)LOGO。難點(diǎn)：“約會”兩個(gè)字，約字背對著會字，整個(gè)飄基本上要在這兩個(gè)字上做處理。初步的嘗試，不成功。接近要的感覺，同城保持簡潔大氣，但約會還不夠連貫。于是大膽嘗試把約會用半心包起來經(jīng)過簡化，形成如下：基本成形。但是這個(gè)效果并不能滿足要求，第一心形不明顯，第二約會還是結(jié)合不夠好。最后還是回歸原來的想法。把約的絞絲旁與會的左一撇結(jié)合起來。最后的效果：整個(gè)LOGO的設(shè)計(jì)也得到了其它幾位同事和策劃的協(xié)助才得到最后效果。9. 開發(fā)測試前期花了比較多的時(shí)間進(jìn)行討論，包括對交互的討論和視覺的討論，后期開發(fā)和測試就變得比較緊迫，最后的個(gè)別功能還要繼續(xù)進(jìn)行，BUG也在后期真實(shí)用戶應(yīng)用中，被修正。改版后的首頁效果圖：我的同城約會搜索會員搜索約會情感中心即將上線，敬請期待。10. 總結(jié)沒有正確的程序，也沒有不用維護(hù)的項(xiàng)目，只有不