aliue.com

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在争议一个功能点的问题，为了满足商业需求做了很大的让步，用户体验往往会和技术、商业需求产生矛盾。平衡关系、不拘泥于教条和创新才是我们的价值所在。
其实本来想说说首页的，一个页面的包含的内容太多，拿出几个细节与大家分享，之前有句老话：“细节决定成败”，其实应该改下了：“关键细节决定成败”。

 

在使用旺旺的时候，常常要用到旺旺表情。系统自带了99个表情使我们有丰富的选择，但是选择太多同时也面临着一个问题：有时想要找某一个表情的时候，需要花好多力气在一堆ICON里搜索想要的图片，虽然会记得图片大致放在什么地方，但是如果不集中精神去找，还是不容易在颜色相近的系列表情里直接点取所需要的。

在表情面板里选表情，大脑的活动过程大致是这样：设定目标，我要的是哪个表情，该表情长得什么样；缩小搜索范围，为提高匹配的速度，先锁定我要的表情在什么某个区域，再在这个区域里进行匹配；发出匹配指令，在表情面板中寻找与目标表情一样的图片。

对于优化这个问题，考虑到有两种方向：

1、 快速定位；

快速定位就是提高缩小搜索范围的速度。现在旺旺的表情排列基本是按应用场景排，比如开心的放一起，伤心的放一起等等，这种排列方式很容易被“设计人员”想到，也很容易被实现；但换做用户角度，他们就必须先理解设计者的表情分类规则，哪些表情是开心的，哪些表情是伤心的，然后再去记忆该类表情放置在面板的大概位置。虽然那些比较直观、比较常用的表情容易被记忆在某个区域，但是大部分用的比较少的表情，没法定位到较小的区域，只能逐个的检索匹配。

如果以图片自身的属性划分，减少了用户理解上的偏差，只要他们知道要找的表情包含什么样的元素，就能将其归类，并开始范围定位。比如按表情的配色分，将辅色是红色的、蓝色的等编成一组；或者按表情搭配的物件分，有手部，有嘴巴的等……

2、 缩短匹配时间；

这方面主要是辅助用户记忆所选过的表情位置，当他们下次再用到这些表情时比较快速的找到目标所对应的位置。心理学上记忆的过程是：识记、保持、再认，要让用户正确的再认的条件是要有良好的识记，只要增加识记事物相互联系的各种线索，就能提高再认的效果。

比如可以给每行每列特定的标识，当用户选择某个表情的时候，相应的记住了改表情的一些附加信息，在他需要再次选择该表情时，便会根据识记的线索正确的再认出表情应该出现的位置。又比如选择某个表情后，在视觉上做某种刺激，使其能将该刺激作为识记线索，提高再认时的准确率。

以上都是一些思考方向，如果要应用到实际产品设计中，还需进行细节上的考虑。虽然现在的主流IM都提供了自定义表情功能，但是默认表情还有有优化的余地，至少目前几个IM产品都没有比较独特的解决方案。同理，上面的一些讨论内容也可以扩展另外的一些图片识别场景，或者是优化某些产品中对图片的引导等。

    相信每个人都有为设置银行卡密码头疼的经历。不像电脑上其他密码，银行密码一般都是要求6位数字，除了有纪念意义的日期，还真没什么容易记住的数字。随着银行业务的多样化，不止是一个人要设置N张银行卡密码，就算是一张银行卡，也要为不同业务设置好几个密码。当然，所有的地方用同样的密码，自然会减少很多烦恼，但从产品设计考虑，银行应该不会想让用户把所有的密码都设置成一样，用户帐号风险高了，银行服务及事故处理成本自然要上升很多。（题外话：其实产品易用性直接影响到企业的成本）

    显然银行密码系统的设计不当是用户不得不这么做的一大因素。从银行的帐号系统来看，它需要一组6位数字作为钥匙，开启一个帐号的操作权限，这6位数字是系统需要的，但对用户来说，6位的数字显然不是一个友好的符号。这里就产生了造成产品易用性的关键点：系统模型跟用户需求有差异的时候，产品的实现模型到底向哪边倾斜？不做加工，将用户难以理解的系统模型还原出来，生涩难懂，用户觉得难用；理解用户需求，产品提供的功能符合用户的心智模型，用户上手容易，就觉得好用。从银行这个例子可以看出，产品的实现模型完全没有照顾到用户需求，如果在实现的过程中，考虑到用户对多组数字的记忆不是那么容易，实现上就不应该让用户去记忆数字，而是用一种用户自己比较容易记忆的方式输入后，再由产品转换成系统需要的数字。单人们没有那么多好记的6位数字时，多记几个单词、词语应该比数字容易，这时银行输入密码的实现模型就要改成像像手机键盘一样，使用字母语言的国家可以在各键位上标注上字母，像我们国家可以把笔划加上，还可以YY出好些键盘的形式……

    我们在产品设计的时候也一样，用户需要我们去了解，只有越深入的了解用户，我们在设计中越能解决好问题，而不是做出一堆有问题的产品。

最近碰到很多需要保存的场景，“什么时候保存”、“怎么保存”，总是要让我琢磨一番。

Web上的保存，其实就是提交表单，最早的形式基本都是一个“提交”按钮，表单里输入的内容就统统跑数据库去了。随着应用场景越来越复杂，原本很简单的一个交互模型衍生了许多变数，先看图：

第一张图是饭否的设置页面，第二张是wordpress后台设置页面。

先看问题：饭否这个“提交”动作不需要用户特意触发，只要“宽度”、“显示条数”改动，即算设置成功。这个出于节省用户操作的设计，由于没有任何反馈（包括宽度超出限定范围），刚开始用时，每次再改完后，我都要点一次预览查看是否成功。WP的提交则是最传统的形式，但是在多tab情况下，提交按钮的控制域是单tab还是多tab总是会让人迷惑，也可能在设计时被人忽略。

第一个问题关键在于完善反馈形式，成功、失败信息能及时在用户注视范围内显示，很容易就能避免用户对修改结果的疑惑。同时这个提示信息的时效性设计也需要我们关注，在多次修改的情况下，用户需要分辨出这个信息是不是这次修改成功的（比如加上成功时间，WP的动画提示……）。

第二个有关多tab的提交，一般的处理方法就是用视觉做区分，按钮在当前tab区域内的，提交的就是当前tab的内容；在tab外的，就是多tab内容一起提交。WordPress在视觉上这么处理，但用户在改完当前tab内容后，没点保存就切换到其他tab时，原来tab里的信息没有得到任何的处理。很显然，在这里容错性设计上的疏漏，给用户带来很大的伤害，如果能在切换时提示用户保存或者保留录入数据，避免用户出错。

归根到底，用户需要有效、友好的反馈信息，及时的知道自己操作会带来什么样的结果。适度提示，不干扰不迷惑！

    我的同事 eskydesign 在前面写到设计师最宝贵的东西，写的非常好，它反映了一个成熟设计师所有具有优秀的品质以及自我平衡的方法，不管是UI设计师还是平面设计师，总是会碰到诸如此类的问题，我们的设计人员总是在感性与理性之间跳转，并且外部的环境急剧变化使得这个跳转的频率越来越快，很多时候就像在大冬天在洗着热水澡，突然水压不够，热水器熄火，被浇了个透心凉。当我们年轻的时候，我们会毫不客气地坚持我们的立场，往往会碰了满鼻子灰。当我们工作若干年后，我们或许更懂得平衡的艺术，却发现创作的激情在减退。所以设计师最宝贵的东西是我们始终不能忘记，并时刻警醒自己的走向光明的保障。
        然而，在路上，总有坎坷，总有辛酸，我们有时很疲惫，但我们很积极，我们在自我净化的同时，我们也必须去感染他人，正如eskydesign 的文章最后说到 打开窗户。
      打开窗户，在产品中推行你的设计，我总结了一些自己的经验和方法，这些方法不是定律不是规则，是工作的点滴体会，因人而异，希望能给自己给他人有所启发。
如何在软件产品中推行你的设计
1 爱你所设计的产品
     每一个设计师都会回答，我当然爱我的产品，注意，我用了爱这个字，而不是喜欢，而且不要只爱产品的设计，是爱产品，你爱你的女友吗？爱她什么？漂亮？温柔？要爱她的全部，产品也是，所谓的倾注巨大心血也就是描述这个程度。如果你爱你的产品，首先从情感层面你就已经有了很强的驱动力，你的观察，你的发现，你文思如涌的创意就会源源不断。
2 牢记产品的商业价值
阅读全部