转载蓝蓝设计(  www.lanlanwork.com )是一家专注而深入的设计机构 ，为期望卓越的国内外企业提供有效的   BS界面设计 、  cs界面设计 、  ipad界面设计  、  包装设计 、  图标定制 、  用户体验 、交互设计、  网站建设 、平面设计服务

来源：http://cdc.tencent.com/?p=5631

如果您想订阅本博客内容，每天自动发到您的邮箱中，          请点这里

 

提到工具型网站，我们首先会有个疑问：大千网络网站众生，究竟什么样的网站才算是工具型网站？它的特征是什么，与其他网站有什么不同？  从网上搜索相关信息，了解到关于该名词的具体解释并没有明确的说法。

　　为了方便后续的研究，在此先结合之前同学们的研究成果，综合整理一下，提供工具型网站的定义版本，供参考：

　　——所谓工具型网站，顾名思义就是构筑在互联网上的工具，是指为帮助人们完成某一特定领域的目标需求而提供的、具有一定操作流程、以完成该目标任务为主要目的、基于网络应用的工具手段。
　　它的主要特征在于：
　　– 以完成一项或多项任务为目的
　　– 注重操作流程引导
　　– 强调快速完成任务
　　– 非完成目标的唯一手段，只是协助用户更完成该目标

　　同时，很多工具型网站还特别配备一个独立门户，该门户以信息展现为主，用来专门介绍工具的价值、动态等，并提供登录或下载入口。由于这种门户与工具页指向的高度一体性，我们也将它归纳到工具型网站的范畴中来，称之为工具型网站门户 （或工具性网站首页）。

　　为了帮助我们对工具型网站形成更直观的概念，可以根据网站功能将网站区分为内容型网站和工具型网站。关于工具型网站与内容型网站的对比区别，已有同学作了较详细的阐述（如想进一步了解可查看相关文章 ），在此不赘述。

　　典型的工具性网站有：Google 系列（搜索、翻译、文档、阅读器… ）、财付通、支付宝、数据魔方、salesforce 、xero 、TA 、DNSpod 等；

　　典型的内容型网站有：Sina 、腾讯网、天涯论坛等。

　　下面就从体验角度，介绍几个我比较喜欢的工具型网站典型案例。

 

Google ——一致系王道

　　工具型网站，应用最广泛的应该是我们非常熟悉的google 系列产品了，如google 搜索、翻译、文档等等，大部分都是随着google 搜索后逐渐推出的新工具。这些工具给网民的互联网生活提供了极大的便利。

　　料想如此多的产品线，会很容易因为功能属性的差异而产生不同的视觉风格。但是我们却看到google 在多产品体系下的视觉风格，无论导航条、色彩体系、基本布局结构等方面都非常统一，如所有背景层都是黑白灰色系、所有的新建功能都是醒目红按钮、所有功能菜单都居左等。

　　这种一致性极大减少了用户对新产品的认知、学习成本，达到自来熟的境界~ 体现了google 体验团队在品牌形象和体验规范方面强大的制定、执行能力~

 

 

Xero ——小清新却很实用

　　下面这个Xero，是一个典型的小清新，我对它的喜爱，来自它的简洁而不简单，美丽却不喧哗，非常符合该网站的功能定位。

　　Xero是一个功能比较全面的针对小型企业的记账工具，产出包括现金簿，总账，发票和报告。作为一个记账类工具网站，用户最关心的诉求当然是安全、准确，所以Xero非常敏锐的在门户和产品页中统一使用了中亮度蓝+绿色来表达，同时配图、结构上横平竖直，四平八稳，将安全、可信赖的氛围营造到。

　　在信息展示方面，Xero门户中具有web2.0的典型特征，比如大量留白、大小字体的对比应用等；而在产品页中，则将各控件元素视觉尽量作减法，例如，表格不要纵线框、chart图色彩统一、按钮质感简化统一、所有的可点击文字包括普链表头页签等全部统一为蓝色、等等，做这些的目的，就是为了让大量的文字数据信息不被多余的细节干扰，让主题一目了然，帮助用户在干净、舒畅的环境中快速完成任务。

　　该产品曾被Nielsen Norman Group列入10 Best Application Uis。

 

Fork ——配图创意为品牌形象加分

　　作为工具型网站，工具本身带给用户的价值固然能决定网站的成败，但门户亦像是产品的橱窗，吸引访客快速了解产品的用途、价值，并进而使用。因此门户的成功与否，也对网站有着重要的影响。如何在色彩、布局、或配图方面发挥创意，让门户尽量吸引眼球，获得访客的青睐，是视觉设计师们的一大课题。而下面的Ford，在配图创意方面算是一个典型，它显著的情景式设计的特点，让人眼前一亮。

　　提到招行人们会想到向日葵，提到腾讯人们会想到企鹅，提到Mailchimp人们会想到邮递员monkey，现在提到Fork，人们应该会想到这位可爱的坐在小船上拿叉的老渔夫了。也许它的logo不起眼，但是有了这个代言人的衬托，这个工具，实在让人难忘了。如果你再仔细翻看一下，会发现在几个内页中，都有与这个大海主题相关联的插图设计。看到这些，即使你是一路人，会不会好奇到忍不住点download来用用？

　　值得一提的是，该门户页面框架上使用了流行的响应式web设计模式，在浏览器缩放、手机访问时均有版式微调，体现了视觉传达的完整性。

　　关于工具型网站门户的体验设计，小伊万同学对此有较深入的研究，参考此处 。 

 

Wufoo ——体验创新源自对简单的追求

 　　工具型网站，通常都有一些比较正式的用途，纵观此类网站觉得冷色调居多，因此初见Wufoo觉得非常特别，它大面积使用暖色系，圆角造型的弧度也偏大，看上去轻松随意。了解原因之前我们先了解下这个产品的用途和价值诉求。

　　Wufoo主要用来创建网上表格、邀请和简单的订单付款，还可以发送邀请和管理日程。产品方对Wufoo的期望是：“Wufoo的主要功能是帮助任何人创建HTML表单，但最终我们力争成为在互联网上收集信息的最简单的方法。”

　　所以，用暖色系体现亲和力，降低用户使用门槛，让人感觉这是一个任何人都可以用的产品——你可以用来处理工作，也可以用来处理个人的事情。不仅是颜色方面，在整个网站任务流的交互框架设计方面也处处体现了这种简单易用的价值理念，如左右翻起的选项设置、新颖的表单字段添加方式、体贴的进入向导，的确是一个具有新颖体验的网站。

　　该网站也被Nielsen Norman Group列入10 Best Application Uis。

 

 财付通 —处处营造轻松氛围

　　第一次看到改版后的财付通，很为首页这张图所吸引。男女主轻轻偎依，把玩各自的手机，看上去开心、随意。如此贴近大众生活的幸福场景，是对广告语的绝佳诠释。与此同时，整个网站的风格，都给人简洁轻松感。事实上改版后的信息结构确实更舒适，重点更突出，流程更顺畅了。

　　说到这里有没有发现，财付通的信息布局结构，与之前看到的几个案例有较大的区别？

　　前面案例的工具页面，界面元素以树、表格、各类控件为主，其布局结构比较接近应用程序；而财付通及，他们的元素结构以开放式为主，少了很多控件框架的限制，表格展现的形态更加灵活，引导说明文字信息较多，是接近网页布局的工具型网站典型。同类型的还有支付宝、腾讯安全中心、充值中心等。

　　那么，都是工具型网站，为何元素布局应用会有如此大的差异呢？

　　简要来说，就是因为前者是从客户端的体验设计思维发展而来，而后者是基于早期网页的设计思维发展过来。一个简单的例子，在前者的信息提示方面，一般会较多趋向于弹出付出层的方式，而后者，则更趋向于在当前页面中给出信息提示指引。当然现在，二者之间正在互相影响，这种区别有了逐渐拉近的趋势。

 

新技术新发展

　　后续，随着屏幕分辨率越来越大（据CNZZ 统计数据2012 年1 月1024*768 的占有率已下滑到28.8% ，与第2 位1440*900 的21% 差距已经越来越小，且呈多样化趋势），网络速度越来越快，可以预见的是，这些网页新技术亦将会更多地为工具型网站所用，例如刚提到的响应式web 设计，例如瀑布流、例如富媒体应用、例如大图片背景填充等等，后续也必将为我们的视觉设计打开新的思路，提供更多的创意提升空间。

　　以上只是对工具型网站的初步分析，其实工具型网站在体验设计上亦可谓自成体系，还有更深入的研究学习空间，欢迎更多感兴趣的同学们来一起深入探讨。