馬鳳娟+宋大偉

摘要：該文以糗事百科為研究對(duì)象，從web網(wǎng)站原型設(shè)計(jì)重要性、需求分析、功能模塊設(shè)計(jì)、競(jìng)品分析、交互設(shè)計(jì)等研究點(diǎn)出發(fā)，研究糗事百科網(wǎng)站原型設(shè)計(jì)的整個(gè)過(guò)程，以便讀者對(duì)糗事百科有整體的了解。在研究需求功能時(shí)，采取了用例分析的模式，給大家展現(xiàn)一個(gè)比較清晰的用戶需求。在功能模塊設(shè)計(jì)時(shí)，用xmind軟件根據(jù)需求整理出有關(guān)糗事百科的功能圖。在競(jìng)品分析時(shí)，以內(nèi)涵段子和糗事百科做了類比，從功能和內(nèi)容方面對(duì)其進(jìn)行的對(duì)比和分析。在交互設(shè)計(jì)方面，糗事百科采取了“少即是多”等設(shè)計(jì)原則，對(duì)網(wǎng)站進(jìn)行了良好用戶體驗(yàn)的設(shè)計(jì)。

關(guān)鍵詞：axure；糗事百科；原型設(shè)計(jì)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）30-0160-03

1 web網(wǎng)站原型設(shè)計(jì)重要性

在web網(wǎng)站正式上線前，經(jīng)歷需求收集、獲取評(píng)估，開(kāi)發(fā)等階段，在開(kāi)發(fā)階段前期，需要做原型設(shè)計(jì)，做原型設(shè)計(jì)的工具，一般選擇axure。一個(gè)網(wǎng)站除了滿足用戶功能和內(nèi)容的需求外，用戶體驗(yàn)也相當(dāng)重要，一般網(wǎng)站的用戶體驗(yàn)的好壞直接關(guān)系到這個(gè)網(wǎng)站用戶的轉(zhuǎn)化率（購(gòu)買、注冊(cè)或者分享網(wǎng)站鏈接），一次糟糕的用戶體驗(yàn)，可能導(dǎo)致用戶再也不訪問(wèn)網(wǎng)站，這從原則上來(lái)說(shuō)，該網(wǎng)站徹底丟失了一個(gè)用戶。網(wǎng)站原型設(shè)計(jì)是開(kāi)發(fā)前一個(gè)重要的交互設(shè)計(jì)，通過(guò)高保真的原型設(shè)計(jì)，可測(cè)試每一個(gè)功能的交互設(shè)計(jì)，從用戶體驗(yàn)的有用、可用、能用等角度及“別讓我等”、“別讓我想”以及“別讓我煩”等方面對(duì)上線前網(wǎng)站進(jìn)行多種體驗(yàn)，進(jìn)而為進(jìn)一步的開(kāi)發(fā)提供較好的設(shè)計(jì)流程和業(yè)務(wù)流程，提高用戶的用戶體驗(yàn)。

2 需求分析

糗事百科以糗友真實(shí)糗事為主題的笑話網(wǎng)站，話題輕松休閑，在年輕人中十分流行。在糗事百科中可以查看他人發(fā)布的糗事并與網(wǎng)友分享自己親身經(jīng)歷或聽(tīng)說(shuō)到的油菜、杯具、草蛋、有意思的、不順心的等各類情形的生活糗事，并且可以左右排名。糗事百科有效地滿足了用戶發(fā)布生活糗事的本質(zhì)需求，符合用戶尋找?jiàn)蕵?lè)、放松等方面的表面需求。當(dāng)今社會(huì)年輕人的壓力很大，除了去網(wǎng)吧、酒吧以及KTV等線下釋放壓力外，處于時(shí)間和金錢的考慮，很多年輕人愿意在網(wǎng)站尋找釋放壓力的平臺(tái)，糗事百科定位年輕人，提供釋放壓力的平臺(tái)，正好滿足了用戶的本質(zhì)需求和表面需求。

為了讓讀者對(duì)其了解更加清晰，本文以年輕人用戶實(shí)例和用戶需求為實(shí)例進(jìn)行研究。

用戶實(shí)例：

用戶需求：

1）功能需求。需求一個(gè)娛樂(lè)交流的平臺(tái)，通過(guò)平臺(tái)可以看到一些有趣的事情，釋放工作的壓力。在這個(gè)平臺(tái)中，可以看文字，圖片，視頻，最重要的是，不僅可以通過(guò)這平臺(tái)獲得娛樂(lè)，更主要的是，通過(guò)它還可以分享糗事，把糗事一些有趣的事情分享給大家。網(wǎng)站根據(jù)用戶發(fā)布糗事的多少，給用

2）交互需求。打開(kāi)網(wǎng)站可以通過(guò)瀑布流的方式，查看各種有趣的糗事和有趣的事，在下拉的過(guò)程中，可通過(guò)糗事文字的熱量自動(dòng)排名和推薦。

3 功能模塊

通過(guò)對(duì)上文的分析，本文對(duì)其功能模塊的劃分主要集中在以下部分。

通過(guò)上圖分析可知，糗事百科的功能主要集中在圖片，文字以及視頻部分，熱門主要是對(duì)圖片、文字以及視頻根據(jù)評(píng)論量，支持?jǐn)?shù)以及反對(duì)數(shù)做加權(quán)所得進(jìn)行排名，進(jìn)而推送出來(lái)的。

熱門：此部分主要是對(duì)圖片、文字以及視頻進(jìn)行推送，給用戶找到其他人最喜愛(ài)的或者比較關(guān)注的話題視頻或者事情。在推送時(shí)間的間隔上，選擇8小時(shí)和24小時(shí)進(jìn)行推送。

圖片部分：主要根據(jù)圖片的點(diǎn)擊率和圖片受關(guān)注度等因素對(duì)用戶進(jìn)行推送，以便給用戶更好的用戶體驗(yàn)。

文字部分：最熱部分文字部分也同樣采取根據(jù)系統(tǒng)采集到用戶對(duì)文字支持?jǐn)?shù)、反對(duì)數(shù)以及其他因素綜合而得，進(jìn)行推送。最新部分主要是通過(guò)用戶糗事通過(guò)的時(shí)間早晚而在前端進(jìn)行展示的部分。

視頻部分：視頻部分和圖片、文字具有相同的推送原理，都是根據(jù)用戶對(duì)視頻的點(diǎn)擊和關(guān)注量進(jìn)行排序。

4 競(jìng)品分析

通過(guò)對(duì)糗事百科和其他競(jìng)品類網(wǎng)站分析，總結(jié)出有關(guān)糗事百科競(jìng)品分析的，在競(jìng)品選擇上，本文以內(nèi)涵段子作為和糗事百科競(jìng)品分析的對(duì)象。下面是競(jìng)品分析部分。

糗百和內(nèi)涵段子二者在產(chǎn)品邏輯和功能上非常相似。內(nèi)涵段子是一個(gè)以搞笑，娛樂(lè)內(nèi)容為主的 UGC 社區(qū)。用戶產(chǎn)生，審核并消費(fèi)內(nèi)容。 作為一個(gè)典型的信息類產(chǎn)品，它的功能如下）：

信息來(lái)源——用戶主動(dòng)投稿，可以是文字、圖片、視頻的格式；評(píng)論功能。

信息加工——用戶主動(dòng)審核；后臺(tái)專題編輯；評(píng)價(jià)會(huì)影響信息排序（熱門評(píng)論）。

信息發(fā)現(xiàn)——新內(nèi)容常刷常有；分類，內(nèi)容專題。

信息消費(fèi)——文字呈現(xiàn)，圖片呈現(xiàn)支持長(zhǎng)圖、Gif 圖，視頻播放；評(píng)價(jià)、分享功能。

除此之外，內(nèi)涵段子還加入了社交元素。因此它還有如下功能：

關(guān)系發(fā)現(xiàn)——附近人，推薦段友功能。

關(guān)系建立——關(guān)注功能。

關(guān)系互動(dòng)——私信，段友圈功能。

關(guān)系解除——取關(guān)，黑名單，舉報(bào)功能。

內(nèi)涵段子與糗事百科對(duì)比

（內(nèi)涵段子，以下略）優(yōu)點(diǎn)1：信息來(lái)源——獨(dú)有內(nèi)容

內(nèi)涵段子有后臺(tái)編輯專門推出的“吧”（專題）供用戶找到感興趣內(nèi)容。熱門評(píng)論的推出讓用戶有更多看點(diǎn)。

優(yōu)點(diǎn)2：信息發(fā)現(xiàn)——內(nèi)容推薦機(jī)制更優(yōu)

新內(nèi)容常刷常有，用戶體驗(yàn)更優(yōu)；訂閱專題、段友圈等可以使用戶更方便地發(fā)現(xiàn)自己感興趣的內(nèi)容。

優(yōu)點(diǎn)3：信息消費(fèi)——細(xì)節(jié)體驗(yàn)優(yōu)化

在信息消費(fèi)環(huán)節(jié)，內(nèi)涵段子沒(méi)有樓層間推廣、電商引導(dǎo)和游戲推薦等影響體驗(yàn)的功能。

缺點(diǎn)1：信息來(lái)源——沒(méi)有匿名功能

在獲取信息來(lái)源方面，糗百提供匿名發(fā)布功能。滿足內(nèi)容發(fā)布者“爆猛料”時(shí)的后顧之憂。可以獲得更多信息來(lái)源。

缺點(diǎn)2：信息來(lái)源——沒(méi)有大V概念，純UGC產(chǎn)品

糗百加入了“里屋”功能即大 V 概念，以“人”來(lái)代替“專題”使用戶的興趣內(nèi)容和社交有了聯(lián)系，也使信息來(lái)源更加豐富也更容易把控。

缺點(diǎn)3：信息消費(fèi)——細(xì)節(jié)體驗(yàn)優(yōu)化

糗百的新糗事實(shí)時(shí)提醒，好笑/不好笑個(gè)性化按鈕，全軟件統(tǒng)一的“便便”元素，以及“再生”（重復(fù)播放數(shù)）這一日系源頭的文案設(shè)計(jì)，都顯得比內(nèi)涵段子要更貼近網(wǎng)友。

缺點(diǎn)4：社交功能——社交概念更弱

在社交方面，糗百除了附近人，還有任意門、糗友秀等功能幫助用戶更快發(fā)現(xiàn)關(guān)系?！皳u一搖”誠(chéng)意加的方式更有趣，糗百的“糗友”傳統(tǒng)和文化也更深厚。相比之下內(nèi)涵 段子的“關(guān)注”、“段友圈”功能沒(méi)有體現(xiàn)強(qiáng)化的社交關(guān)系。

5 交互設(shè)計(jì)

在交互設(shè)計(jì)方面，糗事百科主要體現(xiàn)在以下方面：

注冊(cè)界面：

在注冊(cè)界面并沒(méi)有注冊(cè)提示，而采取邀請(qǐng)制和第三方賬號(hào)登錄的機(jī)制，這樣的用戶體驗(yàn)很好地避免注冊(cè)流程的繁瑣性，用戶只需要運(yùn)營(yíng)第三方的賬號(hào)就可以登陸并且發(fā)布糗事。

菜單欄下拉框

在每一個(gè)菜單欄下拉框下都有相應(yīng)的子菜單，糗事百科在子菜單的選擇上，采取“少即是多”、“快既是慢”等原則，菜單欄簡(jiǎn)約，極簡(jiǎn)，只有2-3選項(xiàng)，這減少了用戶選擇的時(shí)間成本，并且菜單欄選擇上，文字都是較常見(jiàn)的，便于讀者理解。

內(nèi)容信息結(jié)構(gòu)安排

內(nèi)容在結(jié)構(gòu)的安排上可看出，主要由三個(gè)模塊組成，用戶名、內(nèi)容、內(nèi)容操作區(qū)。

在內(nèi)容操作區(qū)由兩部分組成，既評(píng)論區(qū)和分享區(qū)。這樣的設(shè)計(jì)減少用戶視覺(jué)上的尋找成本。

6 原型圖

上文通過(guò)對(duì)糗事百科需求分析 、競(jìng)品分析等進(jìn)行了總結(jié)，并對(duì)糗事百科功能進(jìn)行了分析和評(píng)估，總結(jié)出了目前糗事百科大概框架，為了讓用戶對(duì)糗事百科的整體框架有一個(gè)比較深入的了解，本文用axure制作出了糗事百科的原型圖，以便讀者更好地了解。

通過(guò)用axure制作糗事百科原型圖，在糗事百科原型圖首頁(yè)，主要有三部分組成，導(dǎo)航欄、內(nèi)容欄以及信息欄等部分組成。

登錄注冊(cè)界面

在登錄注冊(cè)界面可看出登錄注冊(cè)界面原型設(shè)計(jì)。

7 結(jié)語(yǔ)

本文以基于axure web網(wǎng)站原型設(shè)計(jì)為研究對(duì)象，在研究的過(guò)程中，以糗事百科Wie研究對(duì)象，在研究的過(guò)程中，首先，對(duì)糗事百科的用戶群進(jìn)行了分析和定位，在定位的基礎(chǔ)上，獲得用戶的需求，為了讓用戶對(duì)需求更加清晰明了，采取用用戶實(shí)例的方式，對(duì)用戶的各種屬性特征進(jìn)行了分析和總結(jié)。通過(guò)對(duì)用戶需求整體和總結(jié)，整理出了糗事百科的功能模塊，主要由熱門、圖片、文字、視頻等菜單組成，進(jìn)而設(shè)置出糗事百科的功能點(diǎn)，以便更好地滿足用戶的需求。在交互設(shè)計(jì)方面，糗事百科采取了良好的交互設(shè)計(jì)，保障了用戶較好的用戶體驗(yàn)。在交互設(shè)計(jì)時(shí)，糗事百科采取了“少即是多”、“快即使慢”的設(shè)計(jì)原則，保障用戶較好體驗(yàn)，在設(shè)計(jì)交互體驗(yàn)時(shí)，采取“別讓我等”、“別讓我想”以及“別讓我煩”的設(shè)計(jì)準(zhǔn)則，保證糗事百科web版在設(shè)計(jì)方面較好的用戶體驗(yàn)。在設(shè)計(jì)原型時(shí)，采取了axure為原型設(shè)計(jì)工具，在原型設(shè)計(jì)的過(guò)程中，很好地考慮到了用戶的交互設(shè)計(jì)，以便更好地滿足用戶的需求。

參考文獻(xiàn)：

[1] 陳為.用戶體驗(yàn)設(shè)計(jì)要素及其在產(chǎn)品設(shè)計(jì)中的應(yīng)用[J]. 包裝工程，2011（10）.

[2] 劉毅.中國(guó)市場(chǎng)中的用戶體驗(yàn)設(shè)計(jì)現(xiàn)狀[J]. 包裝工程，2011（4）.

[3] 李小青.基于用戶體驗(yàn)的Web信息構(gòu)建模型研究[J]. 圖書館論壇，2010（2）

[4] 陶琳，李巧君.用Web標(biāo)準(zhǔn)技術(shù)重構(gòu)網(wǎng)站[J]. 電腦學(xué)習(xí)，2009（4）

[5] 崔琦.基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)[J]. 農(nóng)業(yè)網(wǎng)絡(luò)信息，2009（2）.

[6] 季興東.應(yīng)用Web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè)的實(shí)踐及思考[J]. 泰州職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2008（3）.

[7] 歐陽(yáng)波，賀赟.用戶研究和用戶體驗(yàn)設(shè)計(jì)[J]. 江蘇大學(xué)學(xué)報(bào)：自然科學(xué)版， 2006（S1）.

[8] 李儀凡.互聯(lián)網(wǎng)用戶體驗(yàn)結(jié)構(gòu)模型[D].上海： 復(fù)旦大學(xué)，2009.

[9] 鄔鄭希.基于Web標(biāo)準(zhǔn)的《多媒體教育資源設(shè)計(jì)》網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)[D]. 濟(jì)南：山東師范大學(xué)，2011.

[10] 高楊.基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)界面藝術(shù)個(gè)性化的研究與實(shí)現(xiàn)[D]. 北京：北京林業(yè)大學(xué)，2010.

[11] 陳子健. 教育網(wǎng)站的無(wú)障礙設(shè)計(jì)與開(kāi)發(fā)研究[D]. 金華：浙江師范大學(xué)，2009.

[12] 馬鵬.基于用戶體驗(yàn)的產(chǎn)品設(shè)計(jì)方法研究[D]. 上海：東華大學(xué)，2009.

[13] 韓濟(jì)民.基于WEB標(biāo)準(zhǔn)的網(wǎng)絡(luò)課程設(shè)計(jì)與開(kāi)發(fā)[D]. 武漢：華中科技大學(xué)，2007.

[14] 曾剛.Web應(yīng)用測(cè)試模型研究及改進(jìn)[D]. 重慶：重慶大學(xué)，2007 .

[15] 陳曉雨.基于用戶體驗(yàn)的網(wǎng)站優(yōu)化研究[D].昆明： 云南藝術(shù)學(xué)院，2011.