基于axure 的web 网站原型设计—以糗事百科网站为例

马凤娟+宋大伟

摘要：该文以糗事百科为研究对象，从web网站原型设计重要性、需求分析、功能模块设计、竞品分析、交互设计等研究点出发，研究糗事百科网站原型设计的整个过程，以便读者对糗事百科有整体的了解。在研究需求功能时，采取了用例分析的模式，给大家展现一个比较清晰的用户需求。在功能模块设计时，用xmind软件根据需求整理出有关糗事百科的功能图。在竞品分析时，以内涵段子和糗事百科做了类比，从功能和内容方面对其进行的对比和分析。在交互设计方面，糗事百科采取了“少即是多”等设计原则，对网站进行了良好用户体验的设计。

关键词：axure；糗事百科；原型设计

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2015）30-0160-03

1 web网站原型设计重要性

在web网站正式上线前，经历需求收集、获取评估，开发等阶段，在开发阶段前期，需要做原型设计，做原型设计的工具，一般选择axure。一个网站除了满足用户功能和内容的需求外，用户体验也相当重要，一般网站的用户体验的好坏直接关系到这个网站用户的转化率（购买、注册或者分享网站链接），一次糟糕的用户体验，可能导致用户再也不访问网站，这从原则上来说，该网站彻底丢失了一个用户。网站原型设计是开发前一个重要的交互设计，通过高保真的原型设计，可测试每一个功能的交互设计，从用户体验的有用、可用、能用等角度及“别让我等”、“别让我想”以及“别让我烦”等方面对上线前网站进行多种体验，进而为进一步的开发提供较好的设计流程和业务流程，提高用户的用户体验。

2 需求分析

糗事百科以糗友真实糗事为主题的笑话网站，话题轻松休闲，在年轻人中十分流行。在糗事百科中可以查看他人发布的糗事并与网友分享自己亲身经历或听说到的油菜、杯具、草蛋、有意思的、不顺心的等各类情形的生活糗事，并且可以左右排名。糗事百科有效地满足了用户发布生活糗事的本质需求，符合用户寻找娱乐、放松等方面的表面需求。当今社会年轻人的压力很大，除了去网吧、酒吧以及KTV等线下释放压力外，处于时间和金钱的考虑，很多年轻人愿意在网站寻找释放压力的平台，糗事百科定位年轻人，提供释放压力的平台，正好满足了用户的本质需求和表面需求。

为了让读者对其了解更加清晰，本文以年轻人用户实例和用户需求为实例进行研究。

用户实例：

用户需求：

1）功能需求。需求一个娱乐交流的平台，通过平台可以看到一些有趣的事情，释放工作的压力。在这个平台中，可以看文字，图片，视频，最重要的是，不仅可以通过这平台获得娱乐，更主要的是，通过它还可以分享糗事，把糗事一些有趣的事情分享给大家。网站根据用户发布糗事的多少，给用

2）交互需求。打开网站可以通过瀑布流的方式，查看各种有趣的糗事和有趣的事，在下拉的过程中，可通过糗事文字的热量自动排名和推荐。

3 功能模块

通过对上文的分析，本文对其功能模块的划分主要集中在以下部分。

通过上图分析可知，糗事百科的功能主要集中在图片，文字以及视频部分，热门主要是对图片、文字以及视频根据评论量，支持数以及反对数做加权所得进行排名，进而推送出来的。

热门：此部分主要是对图片、文字以及视频进行推送，给用户找到其他人最喜爱的或者比较关注的话题视频或者事情。在推送时间的间隔上，选择8小时和24小时进行推送。

图片部分：主要根据图片的点击率和图片受关注度等因素对用户进行推送，以便给用户更好的用户体验。

文字部分：最热部分文字部分也同样采取根据系统采集到用户对文字支持数、反对数以及其他因素综合而得，进行推送。最新部分主要是通过用户糗事通过的时间早晚而在前端进行展示的部分。

视频部分：视频部分和图片、文字具有相同的推送原理，都是根据用户对视频的点击和关注量进行排序。

4 竞品分析

通过对糗事百科和其他竞品类网站分析，总结出有关糗事百科竞品分析的，在竞品选择上，本文以内涵段子作为和糗事百科竞品分析的对象。下面是竞品分析部分。

糗百和内涵段子二者在产品逻辑和功能上非常相似。内涵段子是一个以搞笑，娱乐内容为主的 UGC 社区。用户产生，审核并消费内容。 作为一个典型的信息类产品，它的功能如下）：

信息来源——用户主动投稿，可以是文字、图片、视频的格式；评论功能。

信息加工——用户主动审核；后台专题编辑；评价会影响信息排序（热门评论）。

信息发现——新内容常刷常有；分类，内容专题。

信息消费——文字呈现，图片呈现支持长图、Gif 图，视频播放；评价、分享功能。

除此之外，内涵段子还加入了社交元素。因此它还有如下功能：

关系发现——附近人，推荐段友功能。

关系建立——关注功能。

关系互动——私信，段友圈功能。

关系解除——取关，黑名单，举报功能。

内涵段子与糗事百科对比

（内涵段子，以下略）优点1：信息来源——独有内容

内涵段子有后台编辑专门推出的“吧”（专题）供用户找到感兴趣内容。热门评论的推出让用户有更多看点。

优点2：信息发现——内容推荐机制更优

新内容常刷常有，用户体验更优；订阅专题、段友圈等可以使用户更方便地发现自己感兴趣的内容。

优点3：信息消费——细节体验优化

在信息消费环节，内涵段子没有楼层间推广、电商引导和游戏推荐等影响体验的功能。

缺点1：信息来源——没有匿名功能

在获取信息来源方面，糗百提供匿名发布功能。满足内容发布者“爆猛料”时的后顾之忧。可以获得更多信息来源。

缺点2：信息来源——没有大V概念，纯UGC产品

糗百加入了“里屋”功能即大 V 概念，以“人”来代替“专题”使用户的兴趣内容和社交有了联系，也使信息来源更加丰富也更容易把控。

缺点3：信息消费——细节体验优化

糗百的新糗事实时提醒，好笑/不好笑个性化按钮，全软件统一的“便便”元素，以及“再生”（重复播放数）这一日系源头的文案设计，都显得比内涵段子要更贴近网友。

缺点4：社交功能——社交概念更弱

在社交方面，糗百除了附近人，还有任意门、糗友秀等功能帮助用户更快发现关系。“摇一摇”诚意加的方式更有趣，糗百的“糗友”传统和文化也更深厚。相比之下内涵 段子的“关注”、“段友圈”功能没有体现强化的社交关系。

5 交互设计

在交互设计方面，糗事百科主要体现在以下方面：

注册界面：

在注册界面并没有注册提示，而采取邀请制和第三方账号登录的机制，这样的用户体验很好地避免注册流程的繁琐性，用户只需要运营第三方的账号就可以登陆并且发布糗事。

菜单栏下拉框

在每一个菜单栏下拉框下都有相应的子菜单，糗事百科在子菜单的选择上，采取“少即是多”、“快既是慢”等原则，菜单栏简约，极简，只有2-3选项，这减少了用户选择的时间成本，并且菜单栏选择上，文字都是较常见的，便于读者理解。

内容信息结构安排

内容在结构的安排上可看出，主要由三个模块组成，用户名、内容、内容操作区。

在内容操作区由两部分组成，既评论区和分享区。这样的设计减少用户视觉上的寻找成本。

6 原型图

上文通过对糗事百科需求分析 、竞品分析等进行了总结，并对糗事百科功能进行了分析和评估，总结出了目前糗事百科大概框架，为了让用户对糗事百科的整体框架有一个比较深入的了解，本文用axure制作出了糗事百科的原型图，以便读者更好地了解。

通过用axure制作糗事百科原型图，在糗事百科原型图首页，主要有三部分组成，导航栏、内容栏以及信息栏等部分组成。

登录注册界面

在登录注册界面可看出登录注册界面原型设计。

7 结语

本文以基于axure web网站原型设计为研究对象，在研究的过程中，以糗事百科Wie研究对象，在研究的过程中，首先，对糗事百科的用户群进行了分析和定位，在定位的基础上，获得用户的需求，为了让用户对需求更加清晰明了，采取用用户实例的方式，对用户的各种属性特征进行了分析和总结。通过对用户需求整体和总结，整理出了糗事百科的功能模块，主要由热门、图片、文字、视频等菜单组成，进而设置出糗事百科的功能点，以便更好地满足用户的需求。在交互设计方面，糗事百科采取了良好的交互设计，保障了用户较好的用户体验。在交互设计时，糗事百科采取了“少即是多”、“快即使慢”的设计原则，保障用户较好体验，在设计交互体验时，采取“别让我等”、“别让我想”以及“别让我烦”的设计准则，保证糗事百科web版在设计方面较好的用户体验。在设计原型时，采取了axure为原型设计工具，在原型设计的过程中，很好地考虑到了用户的交互设计，以便更好地满足用户的需求。

参考文献：

[1] 陈为.用户体验设计要素及其在产品设计中的应用[J]. 包装工程，2011（10）.

[2] 刘毅.中国市场中的用户体验设计现状[J]. 包装工程，2011（4）.

[3] 李小青.基于用户体验的Web信息构建模型研究[J]. 图书馆论坛，2010（2）

[4] 陶琳，李巧君.用Web标准技术重构网站[J]. 电脑学习，2009（4）

[5] 崔琦.基于Web标准的网页设计[J]. 农业网络信息，2009（2）.

[6] 季兴东.应用Web标准设计网页的实践及思考[J]. 泰州职业技术学院学报，2008（3）.

[7] 欧阳波，贺赟.用户研究和用户体验设计[J]. 江苏大学学报：自然科学版， 2006（S1）.

[8] 李仪凡.互联网用户体验结构模型[D].上海： 复旦大学，2009.

[9] 邬郑希.基于Web标准的《多媒体教育资源设计》网站设计与开发[D]. 济南：山东师范大学，2011.

[10] 高杨.基于Web标准的网页界面艺术个性化的研究与实现[D]. 北京：北京林业大学，2010.

[11] 陈子健. 教育网站的无障碍设计与开发研究[D]. 金华：浙江师范大学，2009.

[12] 马鹏.基于用户体验的产品设计方法研究[D]. 上海：东华大学，2009.

[13] 韩济民.基于WEB标准的网络课程设计与开发[D]. 武汉：华中科技大学，2007.

[14] 曾刚.Web应用测试模型研究及改进[D]. 重庆：重庆大学，2007 .

[15] 陈晓雨.基于用户体验的网站优化研究[D].昆明： 云南艺术学院，2011.