UE人 – 马平凡 UE人 – 马平凡

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

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

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

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

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

首页结构、元素分析：

输出原型图

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

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

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

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

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

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

滴答新版首页在24日就上线发布了，一直想把这次有关导航设计和首页改版的想法，做一些记录。这篇日志是关于新版导航设计。首页改版有用到脑图和原型图，就下篇再叙。

老版：

上面就是改版之前的导航，老版不足之处就不一一例举了。
新版导航+图示说明：