改版背景

    创建专业的电子商务垂直搜索，以及把原有的信息聚合平台转型为在线采购批发交易平台。根据行业特点及交易需要，对原有的零批(小额批发)搜索进行改版，改造为适合行业搜索交易频道，便是这次改版的设计目标。我们搜索产品线的产品经理与用户体验设计师们进行了长达半年的准备工作。 项目组成员将对现有的功能需求，信息架构，视觉色彩，用户体验等，做多视角、多纬度的分析。力求在1688.com上线后，推出另一个电子商务垂直搜索用户体验盛宴。

功能需求取舍

    

    在项目中，我们从市场运营那里采集了大量需求，那怎么把这些需求归类整理，挑选出我们目标用户迫切需要的功能点呢？总体来说：以娱乐的心态取舍功能需求，只给最需要的不给最强悍的。

    来自运营的需求，来自用户的需求，往往多种多样，可以用千奇百怪来形容，那么如何配合产品规划师、产品经理找到用户最迫切的需求呢？

    头脑风暴可以让产品设计团队成员产生很多创意。当收集到大量需求时，其中可能有主要需求与次要需求，客观判断哪些是首先要完成的，哪些是可以放到2期来做的，并制定标准需求优先级与对应时间节点，这样可以保证项目按期完成。

    最让人头疼的往往是取舍功能需求，我们应该以什么标准，什么心态来应对呢？最好通过创建一个纸上原型或观察用户的操作，来制定取舍标准，并确保标准里涵盖以下基础点：

用户档案-描述用户的具体特点。特别注意用户在使用网站时的任何问题，如物理限制。（抛弃与用户的特点不匹配的需求）文本环境分析-研究用户的日常任务、工作流程模式、工作环境和概念框架。这有助于你理解为什么用户对正在测试的网站做出如此反应。（抛弃与用户操作环境不匹配的需求）可用性目标设定-需要制订质量具体化的目标，它能体现从用户档案中搜集到的需求。测试在某个阶段用户能否完成任务，如果用户受到限制，那就应该重新设定用户的目标。（抛弃与用户目标不匹配的需求）平台功能和约束-必须确定界面或产品的功能和限制，以界定可用性需求的范畴。这一信息会受用户可用性需求的影响。（抛弃与平台技术能力不匹配的需求）通用设计指南-必须使用公认的设计准则来设计你的界面。参照网页设计指南制作出来的网页才能在网页浏览器上表现正常。（抛弃与用户体验设计指南不匹配的需求）

    产品（交互）体验设计师在做互动设计之前，除了要对需求把关外还要消除项目关系人之间的分歧，满足用户的期望、工程师的期望、销售与市场人员的期望、经理的期望。最后寻找一个各方都能够接受的平衡点，具体阐述请参看：交互设计师怎样和产品团队合作。

交互设计优化

    

    从设计图到原型的诞生，是一个复杂而又有趣的过程。首先我们怎么完成复杂的设计图呢？前期的市场调研与需求分析为我们提供了第一手好资料，接下来我们要把这些资料逐条分析并提炼需求要点。在头脑风暴讨论中，交互设计师要与产品设计师、需求分析师等一起参加设计图创建的讨论。在讨论中确定商业需求范围、产品需求逻辑、产品规范等，最后总结出一份过程文档。它可能是BRD或FRD，它将是纸上原型的设计指导书。

    当交互设计师拿到这个过程文档后，就可以创建设计图中的逻辑架构图和任务操作流程图了。在创建逻辑架构图时，可以选择Camp Tools或Illustrator制作，当然也有人选择Mind Manage制作。不管选用哪一种制作工具只要能把逻辑架构表达清晰即可，这里就不再赘述每种工具的使用方法和优缺点了。同时，交互设计师要始终以信息架构的原则来创建逻辑架构图，确保逻辑信息的完整性、表达信息的一致性、架构信息的简洁性等。在创建任务操作流程图时，通常选择Visio制作。在用Visio制作过程中，重在表达功能点之间的交互，我们可以用Visio中提供的流程图形与流程符号，来表达设计中的关键功能与关键节点。

    在经过纸上原型设计之后，交互设计师要与产品规划师、可用性工程师迅速沟通，优化纸上原型。交互设计师会根据纸上原型确定的功能点与信息框架，通过Axure制作出低保真的交互设计原型DEMO。在制作Axure交互设计原型DEMO时候，应该注意的以下几点原则：

用Axure页面导航结构去构建信息架构。页面的命名要有统一的规范标准。例如：一级页面，二级页面，过程页面（状态页、结果页）等都要有统一的标准。避免纠结复杂的交互控件实现。要记得Axure是快速原型实现工具，并且网上已经有很多成型的Axure交互设计模板可以直接调用。少一点色彩与布局，多一点标注与说明。把色彩与布局的问题留给视觉思考吧，多些减少沟通成本并可消除歧义的注释吧。Axure交付物也要注意可读性、可及性。把你的交互产出物移交给视觉和前端的时候，记得让他们能很容易看懂你想传达的东西。交互设计原型不是必须生成HTML文件并能动态交互。不一定要能动态展示，但必须要能完整清楚传达出你的交互过程。

    最后，请交互设计师们把自己当成真正的产品设计师，你们对产品与项目的责任不低于项目（产品）经理。

视觉色彩优化

    

    IBM一直被人们称蓝色巨人（Big Blue)：信任、可靠。可口可乐是红色：活力、热情。颜色不仅仅作为这些公司的标识，还把它们加以理想化了。

    不可否认，色彩改变了我们对于所见事物的反应“颜色”。不同的配色方案，给人以不同的感受，或顽皮、或深沉；或冷淡、或热情；或别致、或邋遢；或充满活力、或安静；或阴郁、或活泼；或端庄、或幼稚；或朴实、或浪漫；或专业、或业余；或炽热、或阴森。色彩选择，决定了人们在第一眼看到网站时的感觉。因此，色彩是Web设计者手中最普遍，也是最强大的工具。我们说“设计=解决问题”，而视觉设计，就是“用视觉语言去解决逻辑问题”。

    在2002年，一个研究小组得到了一些有趣的发现。斯坦福Web可信性项目开始了解是什么因素让人们对网站产生信任或者不信任，而很多因素在他们的发现中都很明显：公司声誉、客户服务、出资人，还有广告，这些都会让用户决定该网站是否值得信任。但是最重要的因素――在他们列表中排在第一位的――却是网站的视觉风格和美感。

    交互设计领域著名的大师，Donald Norman，总结说：“积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积极的情感让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。”当人们开始喜欢某些界面的时候，它们事实上会变得更可用。

    电子商务垂直搜索LIST页面的视觉优化，风格上我们通常会支持品牌。目标上传达出一种强烈的品牌信息，如“阿里巴巴的橙色系列，“1688的Logo”。但是品牌识别不止是图标和广告词。它遍布在阿里巴巴项目产品设计、阿里巴巴的网站，以及阿里巴巴的材料中――事实上，品牌对配色方案的选择、字体、图形、词汇表，体现在各个方向。

    视觉设计师制作了内容相同而风格不同的上百个界面，然后产品规划与设计团队成员集体投票，选择一个最合适的风格定位。在设计与选择的过程中，如果我们很了解目标用户，那么他们的内在反应和情感反应是可以预见的，并且可以预见的程度还相当惊人。答案就在于实际情况下很多因素的结合：

颜色-让色彩更具有可读性，少一点颜色，多一点价值。排版-根据字体的选择，文字颜色的选择，再看内在的、情感上的因素来布局。规模-避免空间过度拥挤。角度和形状-尖锐的角度、线交叉点或多个线条汇聚的地方，使用这些焦点把用户的眼光引导到你希望的地方去。重复出现的视觉主题-角落处理模式可以给用户带来视觉旋律。文本-选择形散，神不散的字体与文本颜色。图片-节制性的使用装饰性图片，在功能性GUI里谨慎使用，因为会分散用户注意力。文化因素-如果要表达明显的文化含义，考虑下将要面对的受重。

    针对电子商务搜索LIST页面用户体验设计，视觉优化不是万能的，但是没有视觉优化阶段是万万不能的。

前端代码优化

    

    文件越大，用来下载和显示页面的时间就越长。请记住：文件总体积，指的是构成Web页面的所有文件，包括：HTML、外部CSS、外部JavaScript、图像、声音以及视频在内的文件的大小。在这些文件中，HTML、CSS、以及JavaScript文件只是文本文件，因此，常常相当紧凑。而图像、声音，以及视频文件通常都很大，存在下载问题。

    公共网站的页面大小，从每页小于20K到每页大于100K（包括页面的所有图形文件）。究竟应该有多大，即使是所谓的专家在这个问题上，也普遍存在着分歧。如果你的网站需要专业品质的图形，那么就不可能遵守“20K定律”。但是，如果目标受众的Internet连接速度慢，或者目标受众的耐性有限，你就不得不放弃那令人难以抗拒的漂亮图像，转而遵守关于“20K定律”的限制。怎么样为有限的文件体积做事先的规划呢？

把大部分的CSS和JavaScript文件放入外部文件。只在网站第一次引用这些文件时，才进行下载。之后，网站上任何页面都可以重复使用这些文件，而无需再次下载。重复使用不同页面的图形、音频和视频。因为这些文件也是在第一次时，才进行下载。不要使用不必要的图形、动画或声音。无论是出于实用性的考虑，还是为了增强网站的吸引力，每个文件都应该有清楚的存在于网站上的理由。一个用于导航，大尺寸、具有吸引力的图像映射，同时具备了实用和美观两种用途，就像待售产品的照片一样。另一方面，应该去掉那些只起到填充空白作用的图形。在可能的情况下，使用小尺寸图像，而不是大尺寸图像。因为在其他因素相同的条件下，与大尺寸图像相比，小尺寸图像的下载速度更快。例如：你可能使用一个平铺（重复）显示在背景上的小尺寸图像，代替单个的大尺寸背景图像。尽量减少特殊导航按钮，每个按钮都具有独特的措辞和翻转效果，则需要下载100个不同的图像。相反地，50个文本链接（具有CSS提供的翻转效果），只需很小的下载代价。

    做为技术出身的交互设计师，可以不断探索新的技术带来的变革(例如：html5)。无论何时，页面打开速度是给用户的第一印象，也是提升用户对网站满意度的重要因素，并且前端代码的优化将会给用户带来舒适地操作体验！

    《电子商务搜索LIST页面用户体验设计》第2部分（用户体验原则制定，快速迭代与可用性测试，定性与定量结合的数据分析）

建议继续学习：

1. 15个最好的免费开源电子商务平台    (阅读：10998)
2. 手机交互设计资料    (阅读：3261)
3. 再议手机交互设计原则    (阅读：2913)
4. 读书笔记-交互设计精髓[1]    (阅读：2828)
5. 交互设计那些事儿    (阅读：2740)
6. 电子商务网站“用户评论”模块浅析    (阅读：2673)
7. 手机客户端交互设计原则及信息展现方式    (阅读：2530)
8. 交互设计实用指南系列（1）――“有效性”之“操作入口明确”    (阅读：2433)
9. 随记：关于职业规划，交互设计及写博客    (阅读：2402)
10. 推荐系统应用研究：网上书店    (阅读：2420)