www.Alisoft.com，最新版的加拿大预测网-在线预测与4月2日终于上线了。

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

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

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

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

(一) 商业需求：

一个项目的发布都需要有明确的项目需求，🌄思路清晰了就好进行系统设计。一套项目流程走下来，从kickoff到高保真DEMওO评审，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在争议一个功能点的问题，为了满足商业需求做了很大的让步，用户体验往往会和技术、商业需求产生矛盾。🔯平衡关系🦋、不拘泥于教条和创新才是我们的价值所在。

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

原文：//www.alisoftued.com/?p=165