如何设计婚恋网站的界面

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，可以完美应用栅栏设计。

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

预览的效果如下图示：

7.3自下而上的设计

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

初期的效果：

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

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

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

7.4 设计顺藤摸瓜

其它页面以这个权重较高的个人管理页面为主，展开出去设计。
垒越科技，专注于网站建设及网络推广，业务咨询热线：021-61534996

• 上一篇：怎么检查网站有木有被黑
• 下一篇：JAVA编程的最高境界