工具型网站的体验设计――从广告平台出发

工具型网站的体验设计――从广告平台出发（精选4篇）

工具型网站的体验设计――从广告平台出发 篇1

题记：从20进入公司至今2年半的时间，我一直负责广告平台部门的产品设计。从陌生到熟悉，不知不觉间我竟已对这些产品倾注进了感情……

工具型网站的特点剖析

工具型网站万变而不离其宗地围绕两个关键词在展开属于它们各自的情节，那便是：功能与数据。所以谈至“体验”，其实设计目标也就更加清晰和明确——

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

2.在面对大量数据时，让用户轻松找到自己所需要的而不被满屏幕的字符折腾地焦躁不安。

工具型产品普遍业务逻辑复杂且迥异，数据量大，往往还涉及不同角色的场景分类……套用一句老话：水很深。 设计目标则成为了一盏心中的明灯，时刻提点自己要留神脚下的四伏的暗礁。

功能设计之我见

一级准备

在处理功能设计之时，我奉行一句话：先弄明白了再下手。因为个体功能的修改牵涉到整个流程的走向，往往会在原有的基础上增加操作分流;而平台中的功能增加更会和其他的功能模块发生交互行为或产生影响。在设计师自己还不能对该功能的设计了如指掌的时候就匆忙动手，其结果就是设计进行到一半，问题暴露然后返工，更悲剧的是全套设计稿看似高效地做完，之后却面对全盘洗稿的惨剧。

“脑图”在这个阶段的作用就变得至关重要。用什么工具出脑图?专业软件Mindmanager、Xmind、FreeMind也好，最原始的笔和纸也罢，只要能全面清晰地表现“关系”和“影响”就已经完成了使命。

上个月正值“广告经理”在原有的支持PC端用户建立广告位并制作广告，查看效果的基础上，增加支持移动平台业务的功能。牵一发动全身，移动平台业务的功能加入使得整个“广告经理”众多模块都受到影响。下图便是在与产品经理召开需求会议的同时诞生的关联模块草图。这张草图既能在设计开展前期就相对准确的估计新版本的设计方向与工作量，又能在设计过程中保证设计侧重点与功能设计的完整性，作用不可小觑。

“脑图”不仅仅有宏观把控的全局意义，而且也同样可以具备指导设计工作细节的现实价值。

同样以此次“广告经理-移动平台版”为例，加入了移动业务，必然导致各原有主功能的走向出现分流，而基于广告的业务逻辑，不同平台上的广告大到展现形式，小到允许输入的字符数等等都会出现不同的变化。静下心来通过“脑图”梳理分流时的各种情况，然后淡定的打开设计工具开始工作，这肯定是比自以为很清楚，做到哪算哪来的科学和高效的，不是么?

功能的平台表现形式

功能模块具体落实到网站中，其表现形式大体包括：表单及其对应控件、按钮、信息反馈及提示，相互之间的关系便如下图所示。

如此一来体验设计也便有了出发点和依托。举几个在广平系统中用到的设计案例吧。

在智胜广告平台(AdWIN)的设计中，用户登录后便直接进入“个人首页”，在这里我们需要放置本平台最基础同时也是用户所有活动的出发点：创建广告。因此我们有理由在这个页面强调该入口，使它即能对新用户起到传达本平台的最大功能同时引导操作的作用，又能让老用户在登录之后直奔工作主题，

广告系统的设计特殊性还表现在页面的操作流程很大程度要参考广告业内既有的规范，这样便于用户理解流程的同时也能更高效的帮助用户完成目标工作。因此在设计过程中也会诞生很多“为广告而生”的表单与控件。根据实际业务的不同，对待某些重要的业务流程，设计师在理解业务的基础上，完全有必要跳出以往常规控件的束缚，为产品专门定制设计方案。比如为排期与资源专门设计的特别定制、视频广告的关联设置等。

业务性较强的功能，用户所需要填写的表单项势必远远超过单屏，应此将用户表单输入做到恰到好处地贴心，也是工具型网站的一个细节设计点。

在聚赢广告平台(MobWIN)的设计中，遇到过广告推广语的输入字数限制十分苛刻的业务要求：“推广语1”字数不得超过10个汉字，同时不得少于9 个汉字;“推广语2”字数不得超过12个汉字，同时不得少于11个汉字。这是由WAP1.0和WAP2.0或触摸屏广告位可显示的字数决定的。如果直接用文本告知用户：“您只能输入9或10个汉字”，首先文本信息很可能会被用户忽视，其次如果不做任何即时判断，在用户完成漫长的表单填写后，点击提交却因此受挫，那必然是十分苦恼的。因此针对这个文本输入框给出了如下设计方案：

功能的增值设计

功能模块在完成它自身价值的同时能不能产生额外的价值?这貌似应该是产品经理在策划这个功能之初就要想到的问题。而设计方能为功能增值做些什么呢?我们完全可以通过对页面结构的设计和流程的微调让它更好的达到增值的效果。

再用广告经理这次的移动平台新功能的设计做案例。新建广告位的流程是用户建立广告的必经之路，我调整了本该放在基本表单中的“平台选择”RadioButton，把该属性提取出来，作为信息传达重点，加入了设计元素。想必这种形式更能使“广告经理已经支持到移动平台”的信息深入人心，其价值也超过了功能本身。

数据的处理

在实用型工具类网站中，用户均被打上了“业内人士”的标签。他们大多出于工作或商业等目的希望获得对自己有用的专业数据。在广告平台的这些项目中，我们使用了如下几种信息处理方法：

分角色显示数据

从最外层就先为不同角色的人匹配了他们各自需要的数据，进行了第一步数据去噪。当然能够使用这种处理方法必须是建立在角色与诉求够清晰分明的前提下。

数据搜索与过滤

无法按角色或已经按角色去噪之后还留有海量数据之时，数据的搜索与过滤就提到了体验设计的第一位。搜索项是否符合用户实际操作逻辑?搜索中用到的控件是否合理与便利?搜索条件何时取交集，何时又呈现并集，又该如何清晰传达给用户?哪些项可以放入高级搜索?……随着设计的深入这些问题便会应运而生，而它们确实值得设计师深思熟虑。

业务上需要的搜索项过多，而选项全部罗列会导致搜索模块过于庞大时，可以类似Google Adwords采用点击激活浮层来进行单项设置，用户在操作时也相对专注。收起检索条件模块，不让复杂的搜索条件干扰用户对结果列表的阅读。甚至可以基于业务特点为用户提供保存查询条件的个性化服务。

数据本身的展现形式

这里我们不谈视觉效果令人为之惊叹的信息可视化处理。传统数据的展现形式不外乎：列表、饼图、柱状图、趋势图等以及它们之间的组合。设计师在运用时，不但要了解页面中不同数据所对应的展现形式，还要将它们有机的结合排布以达到良好的阅读体验，必要时可以对传统的展现形式做一些设计上的处理。

用户自定义

上面就说道过，工具型网站的用户普遍定义为专业用户，他们对数据获取要求也是严格的。在对重要数据的展现中会出现更高级的操控功能，以满足用户对数据的自由获取。

写在最后： “还可以更灵活，还可以更好用”，再回头看这2年来的设计稿，我常常会有这样的想法。工具型网站的体验设计的确还有很多值得深入挖掘研究的地方，业务逻辑和需求的不同更会延伸出多样化的设计解决方案。

工具型网站的体验设计――从广告平台出发 篇2

1. 19楼很少出现对联广告，建议对联广告，如果出现，3秒钟后，自动缩小成竖条放置在屏幕左右两侧，同时可关闭，类似sina。

2. 旗帜广告和logo广告

这两个位置属于类似报纸头条，推广效果最好，不会让用户反感，且美化网站。

3. 注册区的广告

右边侧栏的banner广告和推荐位，这个位置的banner广告推荐效果非常好，可以引起用户注意，同时不引起用户反感，

这个在左右边栏各个栏目下都可以考虑增加。

4. 通栏广告一分为五

通栏一分为五，比五个通栏叠在一起，感受要好很多，对商家的推广效果是否比通栏差很多呢，我觉得在文案得当的基础上，不会差。

5. 贴内广告

贴内广告，每一个帖子内页的顶部，19楼有独特的推荐专栏，五个图片推荐位，五条文字推荐位，广告A，广告B因为在“回复”和“发表新帖”按钮 上方，靠近帖子标题，会非常吸引用户注意，甚至可能让用户抛弃主帖，转而点击进入推荐帖子。这五个广告位相对贴内五条硬广，给用户的感觉会更好，避免反感 和影响看帖。

6. 帖子首个回复前的文字推荐

工具型网站的体验设计――从广告平台出发 篇3

页面速度(Page Speed)，一个开源的Firefox/Firebug插件，能评估网页性能并提供改进意见，

测试网站速度的几款免费工具网页设计

，

YSlow，雅虎的一款免费工具，能提供提高网站速度的方式。

网页测试(WebPagetest)，以瀑布式图表展示您的网页的加载性能，并提供一个优化清单。

在网站站长工具(Webmaster Tools)中，实验室->网站性能展示出您的网站速度。

工具型网站的体验设计――从广告平台出发 篇4

在 HTML5与 CSS3技术正在网络环境下空前发展之时，它无疑给网站设计带来了更新鲜的交互体验。对于一个成功的网站而言，能够吸引用户，用户可以更舒适的使用与消费是其最终目标。从某种层面上来说，技术带来的新鲜功能比视觉吸引力更为重要，但是技术性并不能超越用户体验，任何一种伟大的技术都是为用户的易用与体验顺畅而服务的。网页中的 UI设计作为用户体验的一部分，能够使用户在视觉上产生愉悦感起到了重要的作用。设计一款易用与赏心悦目的网页，可以吸引用户更喜欢浏览网站，参与网站活动并获得网站的信息，例如参与社交活动、进行消费行为等。当网站设计中的易用性与视觉美感得到用户满足时，将大大提升网站的用户体验。

1、关于网站的用户体验

网站中的用户体验强调网站的可用性与视觉感受，包括功能、内容、形式等因素，这些因素共同组成了用户体验，是相互联系的统一体。在众多的影响用户体验的因素中，产品的“可用性”是一个至关重要的因素。国际标准中认为可用性是涉及容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。在网站设计中是即要从用户的角度，架构和设计网站，还要看到用户的需要，满足用户需求。网站设计是将用户引入到设计当中，把获取网站的信息、消费产品作为美好体验的过程。

(1)网站体验。根据网站设计的最终目标可以把网站分为三个方面：网站外观、用户行为、服务力度。用户对一个产品的体验是递进的，首先是当用户进入网站时视觉感受如何，有一个大概的基础印象，如果网站中 UI的设计第一感觉看上去不能迎合用户的期望很可能会放弃继续浏览网站。其次是行为，也就是网站的可用性与易用性，使用的感觉如何，如果在使用过程中遇到阻力在某种程度上会对交互行为产生很大的影响。最后是服务力度，当用户使用一个网站尤其是电商网站，主要产生的`就是消费行为，网站的售后服务在用户体验中显得极为重要，售后服务的质量直接影响到用户的心理感受。

(2)用户行为。网站的类型不同，目标用户也会有所不同，如男性、女性、青少年、儿童等。根据自身网站的定位去确定用户群，比如汽车网站的用户主要以男性为主。从用户心理的角度看，首先网站的设计在于能够把用户的注意力集中在网站推广的产品、信息上，可以按照自身的主观意愿进行操作，不需要有过多的思考过程，不需要理解网站结构，图标含义，以及导航在哪。其次用户不必花费太多的学习成本，操作与理解出错较少，简单的操作动作与操作习惯是好的体验的基本。对于一个网站的体验而言最好的方法就是按照用户所想的那样去设计。

(3)设计师因素。对于按照网站工作内容的来划分可以有视觉设计师、交互设计师和程序工程设计师。视觉设计师需要考虑的是网页设计与创意是否符合用户的审美需求，网站从外观看起来直接对用户产生的感受。交互设计师负责的是网站与用户之间的交互行为，在此过程中用户能否顺利的完成整个体验过程。程序工程师决定网站的功能与技术支持，是否能够保证网站正常运行，不影响用户的使用。

2、UI设计与体验的关系

UI即用户界面，是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。对于工业设计领域中的人机交互设计就是指人和机器之间发生交互的时候能够高效率、舒适的对机器进行操控，在操作者需要对机器的操作做出决定的同时也能够帮助机器快速的给用户以反馈。

(1)网页中的 UI设计。网站中的 UI设计体现在用户与网站之间的交互与网页设计。从用户界面的角度来看，网页的 UI设计与网页的视觉效果、风格等密切相关，不仅具有审美价值，也体现着人文关怀，无论从人的阅读习惯还是操作行为都具有以人为本的理念。当然对于一个网站而言，用户所体验的并不仅仅是审美与功能的设计。通常是包含功能与形式得到最协调的平衡，为整个网站的目标而服务，这样会拉近用户与网站之间的距离，赏心悦目的外观与强大的功能是否配合得当，成为用户体验的一个检验标准，用户使用网站月轻松，其满意度就越高，交互过程就越顺畅。

1)页面布局。合理的网页布局有助于用户浏览、理解网页信息，尤其是对于像搜狐、新浪等站而言是至关重要的，怎样能够使用户在众多的信息中发现需要的那一个。在进行网页设计时，要以内容为主，将信息按照区块合理分布，做好重点强调和细部的处理。

2)风格和主题。网页视觉信息风格的确立是信息过渡到形式的关键，视觉设计师依据网站的内容而产生的，通过颜色、图像、文字等视觉元素来表达。例如电子商务网站更加追求信息化和数字感，好看的设计可能不如实际的数据更有吸引力。这种网站的功能比较繁多，例如当当网、淘宝，产品的分类清晰的体现了潜在的用户群，可以更有效的产生互动实现消费。

3)网页视觉元素。网站的外观主要体现在网页上的视觉元素，网页的色彩、图形、文字之间的构成关系会对用户产生一定的心理影响，这种影响既体现在各元素位置、大小的变化，又体现在空间虚实关系上。色彩作为人类表达情感的元素之一，往往能在用户浏览网站时留下第一印象。图形在用户获取信息过程中可以很好的实现传达与引导的作用。文字作为网站主要传达信息的手段，有着不可替的作用，无论从标题文字还是到页面内容，都能做到准确详细的传递。

(2)UI设计与用户的关系。网页设计的美感与体验与用户息息相关，UI设计既要在用户的角度设计视觉效果，又要研究用户的思维习惯，在网页设计中直接体现在颜色、版面布局、图形、文字当中，引导并影响用户获取信息。网页设计不仅仅是将页面做的华丽，还是为了让人们能够通过对界面的中的视觉元素引导和迎合用户完成整个操作，而不是纯粹追求创造视觉效果。从根本上来讲，一个好的网页设计应该拥有清晰的信息呈现，能够很好的引导用户去完成网站的任务。当我们设计一个用户界面的时候一定要考虑到用户界面的适用性，它需要考虑用户的年龄、生活习惯，并且最终实现为用户的使用而设计，这是一个理性的设计过程。所以 UI设计要和用户研究紧密结合，去主动考虑用户的感受与需求。

结论