www.Alisoft.com，最新版的首页与4月2日终于上线了。

虽然是一个过渡时期的版本，可是跟以往的版本已经有了很大的提升，从一个简单粗糙的页面过渡成一个渐渐符合规范和可扩展性页面。

这个版本需要满足各方面的需求，交互设计师在这里做了很多的桥梁工作，和以往的项目一样：
前期的用户调研与DBA的数据分析很早就做了一些，与PO同学探讨商业需求与战略目标、与PD共同分析需求并对其项目分解，展开交互设计后，后期的视觉督导和前端工作的结合都是UED的重要组成部分、前端开发工程师与QA的bugfix工作和页面上线是细节的工作。

不同的是这次项目由UED部门去主导，也是用户体验地位的一项重要提升，在公司商业目标逐渐清晰的时候UED部门的同学开始逐渐发力。

那么我想从这次改版的页面中提出几个关键点进行分析。

(一) 商业需求：

一个项目的发布都需要有明确的项目需求，思路清晰了就好进行系统设计。一套项目流程走下来，从kickoff到高保真DEMO评审，UC明确后基本上就不允许有大的改动了。

header改版中的商业需求：

在第一版的时候我们在logo的旁边加上了“测试版”的字样，是因为当前版本是一个满足商业需求的版本，几乎没有规范可言。一切都是为了将网站做成一个符合我们目前业务的网站。

作为交互设计师，一定要明白目前的需求点在哪里，虽然我们一直在致力于各种关系的平衡，但是适合时宜的结合当前的情况去设计无疑是最好的选择。罗马不是一天可以建成的，一定是一项一项的展开工作，昨天的漏洞今天就需要去弥补，用一个开发工程师的话来说：“我每天的工作都是在踩各种各样的狗屎。”碰到了因为仓促上线而遗留的问题。

四种不同应用状态下的header

1. 第一个是首页，它包含了所有的业务和搜索功能；
2. 第二个是拥有3级分类的2级导航，刚性的功能页面；
3. 第三个简单的2级分类导航，它在乎的是子页面所包含的内容；
4. Detail页面，抛开了罗嗦的子分类，可是右上角的文字和链接过于干扰，在后续的版本中就会改进。
      

这个是目前的navigation bar，也许大家奇怪，为什么右边的自主软件变成这样了，答案只有一个，商业目的和战略需要所致。

阿里旺旺的地位被逐渐提高到至高的角度，甚至整个alisoft mall平台都会依附阿里旺旺的品牌进行扩展，这也是一般用户对旺旺的认知度比阿里软件还要高的原因之一。

来看看更早期的navigation bar吧。
2007年公司刚成立时，也许今天很难想象当时朦胧的雏形和800分辨率的网站尺寸，这在当时确是主流，没有几个大型网站将页面换成1024px，当时的网站连内容都还不具备，所以连最基础的login也不包含了。

(二) 交互设计：

其实交互设计本身就涵盖在整个网站的设计工作中，在此之前我们做过一些预研的工作，比如页面底部toolbar的交互实现和商业结合；场景化的分类和根据any user精准化营销体系都是创新点。目前导航的实现更是进行了特殊化的处理。

完善交互规则：

一个基础的交互设计有助于指导开发和设计。在网站前期制作的时候就应该有个基础的交互规则，做一些认知的统一，其实也是一项管理工作。随着网站日益的完善，交互就可以和网站互相弥补不足，在实际应用中互相指引。

logo在网页中的应用：

我们看到有创意的网站logo都做的非常棒，大大的提升了其访问性。在节日的时候变换相应的logo这已经成为很多网站的一项工程。给logo加上alt来增强SEO关键字，给其加上link，让它方便的返回到网站首页都是很好的应用方法。

logo的应用场景：

1. 独立的logo应用，适用于主要网站业务；
2. logo+文字，适合与附属于其网站业务下的子类；
3. logo+logo，和网站有并列关系或裙带关系的应用范围；

(三) 视觉识别：

阿里软件是阿里巴巴集团的第5家分公司，Branding 的指定要和集团的色彩体系有所融入，那么阿里橙就是首选了， 将前一版本的绿色改掉成橙色系的icon就是一项小小的改进。

(四) 技术实现：

在这个首页的制作当中，前端开发工程师做了大量的工作，从框架的规划到可根据页面内调整进行整体框架的机动变更都是之前的铺垫，良好的规划是多人协调的一个重要部分。

用CSS Sprite优化页面响应速度；
减少图片文件大小，将多张图片集合可以将图片的总大小缩小；
减少数据请求，原来每加载一张小图，就会有一次数据请求，拼合好的图片只需要一次请求就够了；
减少CSS代码量，样式更容易管理；这些都都是细小的改进点。

(五) SEO：

网站SEO至今仍是一个薄弱的环节，记得集团SEO部门的一个人说过，SEO做到极致就是没有SEO，当大家都在关注的时候，必定会做出符合各种有利于SEO的产品。那么在当前的情况下我们仍希望对此进行加强。

CMS发布系统的静态化；
因为大型的网站都会牵扯很复杂的逻辑端、跨域问题，之前引用了很多的iframe，动静相混的页面结构爬虫无法识别，在UED的一片要求之下终于将首页迁出，可谓是由此前进了一大步。
flash banner也因为富媒体的原因无法被搜索引擎所抓取，那么在这个上面，JS代替了flash的表现，功能大于形式。

(六) 总结：

前几天和PO在争议一个功能点的问题，为了满足商业需求做了很大的让步，用户体验往往会和技术、商业需求产生矛盾。平衡关系、不拘泥于教条和创新才是我们的价值所在。

其实本来想说说首页的，一个页面的包含的内容太多，拿出几个细节与大家分享，之前有句老话：“细节决定成败”，其实应该改下了：“关键细节决定成败”。

评论 (0) All

登陆 还没注册？