网站内容与功能设计(工具型网站的特点剖析；用户自定义图15166-1)

　　网站内容与功能设计(工具型网站的特点剖析；用户自定义图15166-1)

　　工具类型网站特性分析；我对功能设计的看法；水平准备；功能平台表达；功能增值设计；数据处理;按角色显示数据；数据本身的显示形式；用户自定义

　　图片15166-1：

　　Caption：自2010年加入公司以来，负责广告平台部产品设计两年半。从陌生到熟悉，我已经在不知不觉中倾注了我对这些产品的感情......

　　工具类型网站特征分析

　　工具类型网站万变不离其宗地正在围绕两个关键词展开各自的情节，即：函数和数据。所以说到“体验”，设计目标其实也越来越清晰——

　　1.在保证功能流程顺利完成的基础上，让用户感觉更舒适；

　　2.面对海量数据时，用户可以轻松找到自己需要的东西，而不必担心屏幕上的字符。

　　工具类产品一般业务逻辑复杂多变，数据量大，往往涉及不同角色的场景分类……套用一句老话：水深火热。设计目标成了心中的灯塔，时刻提醒自己注意下方的周边礁石。

　　我对功能设计的看法

　　一级准备

　　在处理功能设计时，我遵循一句话：先弄清楚再开始。因为个别功能的修改涉及到整个流程的方向，往往会在原有的基础上增加操作的分流；平台功能的增加会与其他功能模块交互或产生影响。设计师在不知道功能设计的情况下，匆匆上手。结果是设计半途而废，问题暴露出来，又要返工了。更可悲的是，全套设计稿看似高效完成，但随后却面临全盘局面。洗稿悲剧。

　　“思维导图”在这个阶段的作用变得至关重要。你用什么工具来制作脑图？专业软件Mindmanager、Xmind、FreeMind，还是最原创的纸笔，只要能把“关系”和“影响”都完整清晰地表达出来，就完成了任务。

　　上个月恰逢“广告经理”在原有支持PC用户的基础上增加了支持移动平台服务的功能，以建立广告位和制作广告，并查看结果。一涉及全身，移动平台业务功能的加入，影响了整个“Ad Manager”的很多模块。下图是与产品经理召开需求会议同时诞生的关联模块的草图。这个草图不仅可以在设计初期相对准确地估计新版本的设计方向和工作量，而且可以保证设计过程中的设计重点和功能设计的完整性。它的作用不容小觑。

　　“思维导图”不仅具有宏观调控的整体意义，还具有指导设计工作细节的实用价值。

　　以相同的“Ad Manager-Mobile Platform Edition”为例。移动业务的加入必然导致原有主要功能的分流。基于广告的业务逻辑，不同平台的广告大到展示。形式，小到允许的字符数等，都会发生不同的变化。冷静下来，通过“思维导图”梳理出各种分流的情况，然后冷静地打开设计工具开始工作。这绝对比你想象的要清楚，科学有效，不是吗？

　　功能的平台表现

　　网站中具体实现了功能模块，其表现形式一般包括：表单及其对应的控件、按钮、信息反馈和提示，它们之间的关系如下图所示。

　　这样，体验设计也有了起点和支撑。让我给你几个广平系统中使用的设计案例。

　　在AdWIN的设计中，用户登录后会直接进入“个人主页”，这里需要放置最基本的平台和用户所有活动的起点：制作广告。所以我们有理由在这个页面强调这个入口，以便它能够将平台的最大功能传达给新用户并指导操作，让老用户登录后直接进入工作主题。

　　广告系统的设计特殊性还体现在页面的操作流程必须在很大程度上参考广告行业现有的规范，这样用户才能更高效的了解流程，帮助用户更高效地完成目标工作。因此，许多“为广告而生”的形式和控件将在设计过程中诞生。视实际业务而定，在处理一些重要的业务流程时，设计师绝对有必要挣脱过去常规控件的束缚，在了解业务的基础上为产品进行定制化设计。例如，针对调度和资源的特殊定制，以及视频广告关联设置。

　　对于更多面向业务的功能，用户需要填写的表单项必然远远超过单屏。所以，用户表单输入恰到好处，贴心，这也是网站工具类型的一个详细设计点。

　　在MobWIN广告平台（MobWIN）的设计中，遇到过非常严格的业务对广告推广语言的输入字数限制：“Promotional language 1”不能超过10个汉字，不少于9个汉字同时显示汉字； “推广语言2”字数不得超过12个汉字，同时不少于11个汉字。这是由 WAP1.0 和 WAP2.0 或触摸屏广告位中可以显示的字符数决定的。如果直接用文字告知用户：“您只能输入9个或10个汉字”，首先文字信息很可能被用户忽略，其次，如果没有立即做出判断，用户输入完成后长长的表格要填写，点击提交受挫，一定很苦恼。因此，针对该文本输入框给出如下设计方案：

　　功能性增值设计

　　一个功能模块能否在完成自身价值的同时产生附加价值？这似乎是产品经理在规划这个功能时应该考虑的问题。设计师可以做些什么来增加功能的价值？我们可以通过页面结构的设计和流程的微调，使其更好的达到增值效果。

　　重复使用广告经理设计的移动平台新功能作为案例研究。创建新广告空间的过程是用户创建广告的唯一途径。我调整了原本应该放在基础表单中的“平台选择”RadioButton，提取了这个属性，并添加了设计元素作为信息传递的重点。想必，这种形式可以让“广告经理支持移动平台”的信息更加深入人心，价值超越功能本身。

　　数据处理

　　在实用工具类别网站中，用户被标记为“业内人士”。他们中的大多数人都希望为工作或商业目的获得有用的专业数据。在广告平台的这些项目中，我们使用了以下信息处理方法：

　　按角色显示数据

　　从最外层开始，将不同角色的人与他们需要的数据进行匹配，第一步是对数据进行去噪。当然，能不能使用这种方式，前提是角色和诉求足够明确。

　　数据搜索和过滤

　　当无法进行逐角色去噪或逐字去噪后仍有大量数据时，数据的搜索和过滤是体验设计的首要任务。搜索项是否符合用户的实际操作逻辑？搜索中使用的控件是否合理、方便？搜索条件什么时候会相交，什么时候会出现联合，又应该如何清晰的传达给用户？哪些项目可以放在高级搜索中？ ……这些问题会随着设计的深入而出现，确实值得设计师仔细考虑。

　　当业务需要的搜索项太多，所有选项都会导致搜索模块过大时，可以类似google Adwords点击激活浮动层设置单个项，用户相对专注于操作。收起搜索条件模块，防止复杂的搜索条件干扰用户对结果列表的阅读。甚至可以为用户提供个性化服务，根据业务特点保存查询条件。

　　数据本身的呈现形式

　　这里不谈视觉效果惊人的信息可视化的视觉处理。传统数据的展示无非是：列表、饼图、直方图、趋势图等及其组合。在使用时，设计师不仅要了解页面上不同数据对应的显示形式，还要将它们有机地结合起来，才能达到良好的阅读体验。如有必要，他们可以对传统的展示形式进行一些设计处理。

　　用户自定义

　　如上所述，工具网站的用户一般被定义为专业用户，他们对数据采集有严格的要求。更高级的控制功能将出现在重要数据的展示中，满足用户对数据的自由访问。

　　写在最后：“可以更灵活，更好用。”回顾这两年的设计稿，经常有这样的想法。工具型网站的体验设计确实有很多值得挖掘和研究的地方，业务逻辑和需求的差异会延伸出多样化的设计方案。