注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

黎喃自语-网络营销运营杂记

那些关于未来的想法 要自己找解答 前进的轨道有多复杂 止不住想冒险的想法

 
 
 

日志

 
 
关于我

个性嘛,善良、理性、有点率性,但不任性,生活嘛,不太独立,需要别人扶一把,长相嘛,一般般,不承认难看的,朋友说,蛮可爱的         ----------------------------------------  QQ: 1272102018        mail: liwenxia.yuki@gmail.com

网易考拉推荐

佳人有约案例说产品原型到UI设计的过程(转)  

2011-12-13 17:08:41|  分类: 网站运营研究 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

前两期讲了项目前期的线框图和功能审核等内容,这次主要说线框图与UI设计的对话。做过项目的人都知道,虽然策划画出线框图后很不希望线框图被修改,但往往到了UI设计阶段,线框图会被修改很多,尤其是首页和登录页、注册页,活动页,这些是地方需要很多视觉焦点的突出,而这些往往是线框图的软肋。这次转载一个例子“佳人有约全新升级为同城约会”,来说明从线框图到UI设计的变化历程。

一般来说,网站商业需求书(BRD)的提出整个项目的灵魂,最近被一个朋友问了一个问题,什么是目标,什么是目的,而这个问题的提出解释了为什么我们经常会兢兢业业地努努力力地浪费大量时间地完成了一个又一个废弃项目,这些项目的特征是(目标使用对象不会用,强迫性扩展顺带出来的使用对象没兴趣用,项目的结果没有解决工作或生活中实际问题,更或者上线就准备改版的项目)。一个好的项目需求或测试应该按实际的使用角色会做的事来模拟操作和分析。

整个项目流程

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

从时间流来看整个过程:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

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

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

根据需求绘制导航和分级页面

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

详细列出网站信息架构图

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

前期的功能需求准备工作完成后,接下来就是绘制线框图(也可以称为框架图或网站策划图或产品原型等)

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

在这里展示一下规范元件库

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

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

这样做非常好,对于很多重复使用的内容可以保证其一致性而不忘记。

UI视觉设计

● 找参考

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

OKCUPID

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

eHarmony

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

Match速配日本站

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

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

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

配色:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

文字用色:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

导航视觉风格:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记
佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记
佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

按钮风格:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

形象照尺寸:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

这样做的好处是非常明显的,加强了网站设计的整体把控性,如果进行项目的人非常多,这样的好处会越明显。

● 定宽度

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

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

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

预览的效果如下图示:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

我的佳人有约进过了大大小小十几次的修改,每一次的修改就产生十个以下的视觉稿,不断的不满意,不断的执着修改,以追求最合理的架构、最合理的视觉、最合理的用色为目标,但不以此为终点,因为视觉设计是没有终点的,回顾最后的设计还是会看出问题和不合理。

初期的效果:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

初期的设计虽然严格按照策划线框图完成,但线框图的局限性有时并不是百分百正确的,只要目的不改变,目标是可以变化的。初期的效果主次不够清晰,图片较多地压在下面,头轻脚重。没有一种解脱感。大概经过了十几轮的几十个效果的对比修改,发展出了以下效果:

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

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

佳人有约案例说产品原型到UI设计的过程 - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

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

文章转自:http://uedc.163.com/683.html

  评论这张
 
阅读(1200)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017