滴答网首页之变

By 马平凡 in 交互之路, 视觉设计  |  2009/5/03  |  阅读 (494)  |   评论 (11)

我这次对滴答网首页改版的流程,可分为四步,如下:
第一步:脑图分析 – 对现有首页结构、元素分析并用脑图展现。然后在此基础上优化结构和页面元素,最终输出新的首页结构脑图。

第二步:输出原型图 – 根据前一步的脑图分析结果,产生出初期首页原型图(界面原型图),然后以此,进行团队沟通和意见收集。确定最终首页原型图。

第三步:输出界面 – 根据原型图,视觉设计和交互设计。

第四步:输出页面 – 根据界面和原型图,进行前端制作,输出最终页面。

现在简单对以上四步做一下说明和记录。

首页结构、元素分析:

输出原型图

新版滴答首页初期原型图

经过对原型图的视觉和交互设计。最终新版首页的页面是出来了。交付给kelvin完成最后的程序调用。新版首页终于与2009年4月24日下午上线。

这次首页改版,从脑图到原型图到界面,最终到页面。我想这一次提高的不单单是设计层面。

第一次将mindjet – mindmanager 应用到了页面设计项目中。事实证明MM很好很强大。在梳理页面结构和产品元素元素上给了我很大的帮助。顺便在这里给大家分享一个在线脑图提供商:Mindomo 。记得07年低联想实验室也曾研发过WEB画图,不过现在好像都不能打开了。估计是关闭了。

第一次使用Balsamiq Mockups 画初期原型图。事实证明Balsamiq很适合做初期原型,简单、高效。谢谢小老头分享的key。

第一次使用CSS Sprite技术完成首页页面制作。页面目前完美兼容IE6IE7FirefoxGhrome。

不足之处:页面在IE8下有部分地方不对齐,看来只有IE8 hack来解决了。

如果喜欢这篇文章或是我的博客, 欢迎你 订阅我的blog,及时获取最新的更新!

Comments RSS feed TrackBack URL

"滴答网首页之变" 11 条评论 »

  1. 花小落2009/5/05 @ 11:09

    wp用起来真累啊。最近出2.8的测试版了,改变很少。

    [回复]

    Ray ma 回复: |

    不喜欢那个发布按钮撇右边外,其它貌似还好。可能是习惯问题。2.8测试版? 俺还没体验过,就不做评价。呵呵。

    [回复]

  2. shaogw2009/5/08 @ 15:33

    博主可否把Balsamiq Mockups转发给我一份呢,
    我也非常需要,之前一种用测试版,感觉还不是很方便。

    [回复]

  3. 小T2009/5/18 @ 10:23

    Balsamiq Mockups必须要个key,功能才全面,我也得到个,key不知可以公用么,做的真不错

    [回复]

    Ray ma 回复: |

    确实如此。Balsamiq Mockups少了key功能就很不完整了。
    Balsamiq目前好像还是个收费软件,key确定是可以公用。

    [回复]

  4. 引子2009/7/06 @ 13:08

    Balsamiq Mockups 的中文支持了吗?
    还是小马你后期加上去的?

    [回复]

    引子 回复: |

    @引子, 看到了,在菜单里勾选上“Use System Font”后就可以正常

    [回复]

    马平凡 回复: |

    恩。菜单栏“view”勾选 “Use System Font”即可。 很清楚的记得19楼UED的chen.zerro同学也问过我这个问题。哈哈。

    [回复]

  5. 小林2009/8/07 @ 07:49

    博主,请问你头2个图(类似于mindmap)用什么软件画的 ?

    [回复]

  6. 马平凡2009/8/07 @ 19:01

    @小林,
    图是mindjet mindmanager画的。
    官方站点:http://www.mindjet.com/

    [回复]

  7. Ray ma2009/10/24 @ 19:08

    确实如此。Balsamiq Mockups少了key功能就很不完整了。
    Balsamiq目前好像还是个收费软件,key确定是可以公用。

    [回复]

英雄,出来说个话吧。