您当前的位置: 首页 » HTML/XHTML/XML编程 » 阿里软件改版 谈header分析网页的可用性
阿里软件改版 谈header分析网页的可用性
论坛链接
虽然是一个过渡时期的版本，可是跟以往的版本已经有了很大的提升，从一个简单粗糙的页面过渡成一个渐渐符合规范和可扩展性页面。
这个版本需要满足各方面的需求，交互设计师在这里做了很多的桥梁工作，和以往的项目一样：
前期的用户调研与DBA的数据分析很早就做了一些，与PO同学探讨商业需求与战略目标、与PD共同分析需求并对其项目分解，展开交互设计后，后期的视觉督导和前端工作的结合都是UED的重要组成部分、前端开发工程师与QA的bugfix工作和页面上线是细节的工作。
不同的是这次项目由UED部门去主导，也是用户体验地位的一项重要提升，在公司商业目标逐渐清晰的时候UED部门的同学开始逐渐发力。
那么我想从这次改版的页面中提出几个关键点进行分析。
(一) 商业需求：
一个项目的发布都需要有明确的项目需求，思路清晰了就好进行系统设计。一套项目流程走下来，从kickoff到高保真DEMO评审，UC明确后基本上就不允许有大的改动了。
header改版中的商业需求：
在第一版的时候我们在logo的旁边加上了“测试版”的字样，是因为当前版本是一个满足商业需求的版本，几乎没有规范可言。一切都是为了将网站做成一个符合我们目前业务的网站。
作为交互设计师，一定要明白目前的需求点在哪里，虽然我们一直在致力于各种关系的平衡，但是适合时宜的结合当前的情况去设计无疑是最好的选择。罗马不是一天可以建成的，一定是一项一项的展开工作，昨天的漏洞今天就需要去弥补，用一个开发工程师的话来说：“我每天的工作都是在踩各种各样的狗屎。”碰到了因为仓促上线而遗留的问题。
四种不同应用状态下的header
第一个是首页，它包含了所有的业务和搜索功能;
第二个是拥有3级分类的2级导航，刚性的功能页面;
第三个简单的2级分类导航，它在乎的是子页面所包含的内容;
Detail页面，抛开了罗嗦的子分类，可是右上角的文字和链接过于干扰，在后续的版本中就会改进。
这个是目前的navigation bar，也许大家奇怪，为什么右边的自主软件变成这样了，答案只有一个，商业目的和战略需要所致。
这个版本需要满足各方面的需求，交互设计师在这里做了很多的桥梁工作，和以往的项目一样：
前期的用户调研与DBA的数据分析很早就做了一些，与PO同学探讨商业需求与战略目标、与PD共同分析需求并对其项目分解，展开交互设计后，后期的视觉督导和前端工作的结合都是UED的重要组成部分、前端开发工程师与QA的bugfix工作和页面上线是细节的工作。
不同的是这次项目由UED部门去主导，也是用户体验地位的一项重要提升，在公司商业目标逐渐清晰的时候UED部门的同学开始逐渐发力。
那么我想从这次改版的页面中提出几个关键点进行分析。
(一) 商业需求：
一个项目的发布都需要有明确的项目需求，思路清晰了就好进行系统设计。一套项目流程走下来，从kickoff到高保真DEMO评审，UC明确后基本上就不允许有大的改动了。
header改版中的商业需求：
在第一版的时候我们在logo的旁边加上了“测试版”的字样，是因为当前版本是一个满足商业需求的版本，几乎没有规范可言。一切都是为了将网站做成一个符合我们目前业务的网站。
作为交互设计师，一定要明白目前的需求点在哪里，虽然我们一直在致力于各种关系的平衡，但是适合时宜的结合当前的情况去设计无疑是最好的选择。罗马不是一天可以建成的，一定是一项一项的展开工作，昨天的漏洞今天就需要去弥补，用一个开发工程师的话来说：“我每天的工作都是在踩各种各样的狗屎。”碰到了因为仓促上线而遗留的问题。
四种不同应用状态下的header
第一个是首页，它包含了所有的业务和搜索功能;
第二个是拥有3级分类的2级导航，刚性的功能页面;
第三个简单的2级分类导航，它在乎的是子页面所包含的内容;
Detail页面，抛开了罗嗦的子分类，可是右上角的文字和链接过于干扰，在后续的版本中就会改进。
这个是目前的navigation bar，也许大家奇怪，为什么右边的自主软件变成这样了，答案只有一个，商业目的和战略需要所致。
#2楼发布者：tzlink时间：2009-04-15 13:58:35
阿里旺旺的地位被逐渐提高到至高的角度，甚至整个alisoft mall平台都会依附阿里旺旺的品牌进行扩展，这也是一般用户对旺旺的认知度比阿里软件还要高的原因之一。
来看看更早期的navigation bar吧。
2007年公司刚成立时，也许今天很难想象当时朦胧的雏形和800分辨率的网站尺寸，这在当时确是主流，没有几个大型网站将页面换成1024px，当时的网站连内容都还不具备，所以连最基础的login也不包含了。
(二) 视觉识别：
阿里软件是阿里巴巴集团的第5家分公司，Branding 的指定要和集团的色彩体系有所融入，那么阿里橙就是首选了， 将前一版本的绿色改掉成橙色系的icon就是一项小小的改进。
(三) 技术实现：
在这个首页的制作当中，前端开发工程师做了大量的工作，从框架的规划到可根据页面内调整进行整体框架的机动变更都是之前的铺垫，良好的规划是多人协调的一个重要部分。
用CSS Sprite优化页面响应速度;
减少图片文件大小，将多张图片集合可以将图片的总大小缩小;
减少数据请求，原来每加载一张小图，就会有一次数据请求，拼合好的图片只需要一次请求就够了;
减少CSS代码量，样式更容易管理;这些都都是细小的改进点。 [ 本帖最后由 tzlink 于 2009-4-15 14:00 编辑 ]
来看看更早期的navigation bar吧。
2007年公司刚成立时，也许今天很难想象当时朦胧的雏形和800分辨率的网站尺寸，这在当时确是主流，没有几个大型网站将页面换成1024px，当时的网站连内容都还不具备，所以连最基础的login也不包含了。
(二) 视觉识别：
阿里软件是阿里巴巴集团的第5家分公司，Branding 的指定要和集团的色彩体系有所融入，那么阿里橙就是首选了， 将前一版本的绿色改掉成橙色系的icon就是一项小小的改进。
(三) 技术实现：
在这个首页的制作当中，前端开发工程师做了大量的工作，从框架的规划到可根据页面内调整进行整体框架的机动变更都是之前的铺垫，良好的规划是多人协调的一个重要部分。
用CSS Sprite优化页面响应速度;
减少图片文件大小，将多张图片集合可以将图片的总大小缩小;
减少数据请求，原来每加载一张小图，就会有一次数据请求，拼合好的图片只需要一次请求就够了;
减少CSS代码量，样式更容易管理;这些都都是细小的改进点。 [ 本帖最后由 tzlink 于 2009-4-15 14:00 编辑 ]
#3楼发布者：tzlink时间：2009-04-15 14:02:30
(四) SEO：
网站SEO至今仍是一个薄弱的环节，记得集团SEO部门的一个人说过，SEO做到极致就是没有SEO，当大家都在关注的时候，必定会做出符合各种有利于SEO的产品。那么在当前的情况下我们仍希望对此进行加强。
CMS发布系统的静态化;
因为大型的网站都会牵扯很复杂的逻辑端、跨域问题，之前引用了很多的iframe，动静相混的页面结构爬虫无法识别，在UED的一片要求之下终于将首页迁出，可谓是由此前进了一大步。
flash banner也因为富媒体的原因无法被搜索引擎所抓取，那么在这个上面，JS代替了flash的表现，功能大于形式。
(五) 总结：
前几天和PO在争议一个功能点的问题，为了满足商业需求做了很大的让步，用户体验往往会和技术、商业需求产生矛盾。平衡关系、不拘泥于教条和创新才是我们的价值所在。
其实本来想说说首页的，一个页面的包含的内容太多，拿出几个细节与大家分享，之前有句老话：“细节决定成败”，其实应该改下了：“关键细节决定成败”。