借这次的App的推出,终于下决心改版网站,于是乎在刚刚在各个市场上提交App后,马上就开始动工。其实早就该改版了,一直以来看着就挺闹心的,页面的布局使用Table,那是一个Table嵌Table啊,宽度也不太适应最近几年屏幕分辨率的发展了,在现在的分辨率下看着这屏幕中间的一个细条,就是基于这两点吧,也早该改版了。
基于上面说的,这次改版的目标:
1、基于CSS的布局,全面抛弃Table;
2、看起来大气一些,像那么回事;
3、 分辨率为近几年比较常用的960px宽;
4、功能上的需求来源于老版本,并增加新元素:方案跟服务,产品的分类在以前基础上增加掌上App;
有了目标,也就定下了方向,接下来就是着手设计制作,并最终实现,设计制作没什么可说的,就是用Photoshop按照自己想改版设计原型图,各个功能模块及效果一个一个的做。最终实现上可选择的就比较多了:
1、可以选择开源的CMS来实现;
2、可以自己从头写(PHP+MySQL ),模板采用Smraty或者也自己写;
3、纯静态页面;
最终选择了第三种,用手工打造纯静态页面,一页一页实现,选择这个的原因其一是这个网站主要以展示自己的软件项目为主,本身平常的动态数据及更新量很小,需要交互的地方也很少,其重点在于软件产品的后续更新升级;其二是这样实现的时间成本最低;其三是这样实现对于存在的需要交互的地方以后可使用Ajax+Js+PHP+MySQL来嵌入到现有的静态页面,也满足后续的交互需求;
基于这三点,这次的网站改版使用Vim + Photoshop 这两样工具,历经几天,于今天基本上完工,除了有些链接地址未指向(相关文档软件需要重新整理更新一下)。
总结
1、明确需求及目标
这个是基础,只有这些明确了,才能产生设计、才能选用合适的方法[架构]、才能完成实现。需求及目标应建立在总体之上,除非这个需求及目标本身就是独立的,依托核心要做的或为核心服务而产出的需求及目标要统筹考虑。
2、设计
设计主要是确定结构并建立结构,对需求的分类与整理,是当前设计人员对于需求的理解,并以视觉的展现及交互的描述,这是个复杂活,需要经验、多行业的知识、时间的沉淀,而且每个设计人员的设计都不一样。
2、选择适合方法
合适的方法是要看到侧重点,对于这个网站来说是对产品的辅助,不是重点,节约时间成本是比较重要的。合适的方法能满足后续的扩展,该扩展是建立在对需求的理解与明确基础之上的,而且要可实现。
4、改进的地方
在完工以后会产生各种改进的想法,这次完工后马上产生需要改进的想法主要体现在导航上面,应该能更加明晰的在每一页告诉访问者当前在哪里;第二个产生要改进的是分散的图片合成一张图片,减少图片加载次数;
— 结束—