网易婚恋交友网站的设计流程

【 tulaoshi.com - 平面设计 】

大公司的网站界面设计流程可能更正规化，当然并不是说正规化一定就高效率，但作为网页设计师学习下大公司的网站设计流程也是有一定帮助的，本文主要介绍网易婚恋交友网站的设计流程

佳人有约网易婚恋交友网站，经过精心策划和团队努力合作，终于打造出风格精美、功能强大及人性化体验的交友网站产品。

整个项目流程：

从时间流来看整个过程：

1. 改版计划

佳人有约改版目标

明确产品定位，优化设计风格以便提升产品品牌认知度。

优化任务流程、产品架构，使之更符合用户需求。

提高产品易用性，改善用户体验。

优化源代码，使网站执行效率更高。

2. 用研和评估

工作分为三部分：

第一是用户研究，主要针对抽样用户对象进行访问和交谈，并记录他们基本网上交友行为，初步了解需求，得出结论。

第二是对自身网站的数据进行统计和分析，挖取潜在用户行为和需求。

第三是收集第三方交友方面的用户分析数据，结合第一、二点写出符合自身的用户研究报告。

由于这一方面的信息量比较大，就只罗列个大纲。

任务1 . 用户研究

任务2. 自我评估

评估方式以打分形式进行，并对每一点做说明。

导航评估(与同行恋爱交友网站竞争对手做对比进行评估)

PET评估 (从说服，情感，信任三方面，观察同行网站对象和自身网站的评估)

交友网站设计评分(和同行恋爱交友网站对比评估)

idate交互设计评估(对注册模块，约会模块，搜索，留言，个人管理评估)

idate页面设计评估(未登录首页，我的首页，搜索约会，约会管理，留言礼物，我的朋友，话题页面，个人展示页面评估)

任务3. 专家评估

微型专家评估，请外部专业用户体验公司对网站进行一次小型的评估，对idate网站有待改善之处大概罗列出来。

3. 角色情景

我们直接省略了这块，主要是考虑时间关系，加上目前的工作是改版，基于原来的网站基础上进行工作，所以就省略了这块，也由于省了这块，导致后期会有挺多的概念模型不够清晰和需求不够准确而增加一些讨论的时间。

4. 任务流程

整理Idate用户对网站所有任务汇总并绘制流程图。这部分的工作的结果，是程序开发功能模块的依据。随着进度和小组工作的进行，随时对任务流程进行修订和与程序沟通。

5. 信息架构

任务1. 在Idate筛选代表性用户进行焦点小组卡片分类

任务2. 对Idate登录用户进行网上改版调查

任务3. 绘制产品信息架构图

主要是自上而下架设了页面架构和一些功能模块，从横向和纵向进行了分解。对重点导航重新进行定位和移动，挑选出重要的功能模块和淡出次要模块。只有定位好页面结构层次和导航关系，视觉设计师在这个时间才能进行有效的主次关系定位和导航表现形式的设计，甚至关系到整个网站视觉方向的设计等。

6. 产品原型

具备一套标准的基础交互元件库是很重要的，特别对于几个策划同事分工合作来说，保证了最起码的样式一致性。打包好的元件以组件形式，方便拖放在firework工作区间里移动和摆放，提高网站原型的开发效率。同时也为日后的交互稿管理维护等工作带来方便性。

这次的原型开发应用了Axure pro 5.5原型开发工具

由于时间关系，原型并没有发挥其重要的作用，只是用它实现一个简陋的带点交互的初始原型而已，可以看下面的注册步骤效果图。

个别原因至使应用原型叠代方法并没有在这次改版当中应用到，毕竟开发一个原型接近于真实网站来说，所花时间成本还是比较高的。相信熟悉掌握了这个工具和方法，必对开发高效实用的网站起到很好的作用。

这次的改版的交互稿基本上都是策划同事制作的，他们的表现都很不错。策划制作交互稿有其自身的原因和团队发展的考虑：

第一：策划最了解自己的产品，对需求比较明确。

第二：吸取第一次项目工作的经验，提高交互能力。

交互这块所花的时间比重也是相对比较多，但也是应该的，这部分的工作相当于建楼要打好地基一样，减少后期返工修改过多的问题。

7. UI视觉设计

7.1找参考

视觉设计从立项目就开始着手项目的工作。前期收集相关同行网站视觉

OKCUPID

eHarmony

Match速配日本站

慢慢形成自己的一套视觉色和风格：网易佳人有约区别于国内同行恋爱交友网站，以国内单身白领阶层为主要用户的约会网站。清新简洁，安全舒适，秀气大方。

7.2定宽度

网站宽屏950像素，最好效果应该是960，可以完美应用栅栏设计，了解更多栅栏设计，请查看：http://960.gs/ 详细介绍了栅栏设计的原理和效果，包括栅栏下载。

Idate应用了网格的设计来对齐和布局元素等。定义了每一个格子为10px，安CTRL+ K和CTRL+6快捷键就可以调出Photoshop首选项，设置网格。

预览的效果如下图示：

7.3自下而上的设计

应用自下而上的方式进行设计，从最重要的个人管理页面开始展开。我的佳人有约进过了大大小小十几次的修改，每一次的修改就产生十个以下的视觉稿，不断的不满意，不断的执着修改，以追求最合理的架构、最合理的视觉、最合理的用色为目标，但不以此为终点，因为视觉设计是没有终点的，回顾最后的设计还是会看出问题和不合理。

初期的效果：

初期的效果主次不够清晰，图片较多地压在下面，头轻脚重。没有一种解脱感。大概经过了十几轮的几十个效果的对比修改，发展出了以下效果：

大体上这个方向和细节已经成形了，但还存在一些问题，如推荐约会太一般，跟今日推荐差不多形式，不够突出。于是做出最后尝试：

透气，有主次，不要过多的色调和设计。最后定下了这个方案。

7.4 设计顺藤摸瓜

其它页面以这个权重较高的个人管理页面为主，展开出去设计。

7.5首页的设计过程

首页也是经过了好几轮的尝试，希望设计出别于国内的交友网，但最后还是有点离不开交友网在国内的国情：把尽量多的会员信息展示在首页，用最真城的信息和最靠谱的视觉来表达这就是全国最安全，最成功的交友恋爱网站，吸引用户点击和注册。

所以一开始的交互定位了这样的结构：

整体结构就是传统交友网站，其中一个小问题是没有体现出交友的约会特色和品位定位，并没有区别于国内的其它交友网站。于是做了些尝试，结果如下。

显然整体结构和上半部分的感觉上是可以的，大量留白，以简洁手法去表达大气。但从另一个角度去看的话，内容区对于高档次的恋爱会员来说，是失败的，方向也是不符合白白领高级阶层，快速一看，还以为会是非主流。不合国内交友的国情就是这个意思。

经过无数的尝试，才回归到了以内容为主，兼推网站形象的视觉，效果如下：

特色约会，视觉层次也分明开来。

整个网站汇总一下视觉元素：

配色：

文字用色：

导航视觉风格：

按钮风格：

Icon：

形象照尺寸：

通过本地共享管理整个项目，实现资源共享，协同工作和进度的跟进等。

8. 佳人有约LOGO升级为同城约会

原始LOGO

要求延续原有风格和特色，转变为同城约会。结合同城约会的市场定位和用户定位，走白领单身高级用户，以稳重大方为主导，保留原来简洁风格，应用恋爱交友特色的飘带来点饰整个LOGO。难点：约会两个字，约字背对着会字，整个飘基本上要在这两个字上做处理。

初步的尝试，不成功。

接近要的感觉，同城保持简洁大气，但约会还不够连贯。

于是大胆尝试把约会用半心包起来经过简化，形成如下：

基本成形。但是这个效果并不能满足要求，第一心形不明显，第二约会还是结合不够好。最后还是回归原来的想法。把约的绞丝旁与会的左一撇结合起来。

最后的效果：

整个LOGO的设计也得到了其它几位同事和策划的协助才得到最后效果。

9. 开发测试

前期花了比较多的时间进行讨论，包括对交互的讨论和视觉的讨论，后期开发和测试就变得比较紧迫，最后的个别功能还要继续进行，BUG也在后期真实用户应用中，被修正。改版后的首页效果图.

我的同城约会

搜索会员

搜索约会

情感中心即将上线，敬请期待。

10. 总结

没有正确的程序，也没有不用维护的项目，只有不断地发现，修正，包括程序和视觉设计，不断提升完善。项目虽然花了很多时间，但整个团队的能力也得到了很大的提升，相信对日后的项目开发有很大的帮助。另外，对于设计来说，长时间盯住一个页面看，容易产审美疲劳，只有跳出来才能看出问题所在，甚至要请教他人来审视自己的视觉稿。只有对产品的多方面充分了解，掌握产品的核心需求，才能抓住视觉的本质，设计出好的产品。

讨论