人仔个人网站

尝试减少用户思考的设计

tesion — Thu, 02 Sep 2010 09:12:15 +0000

·介绍
QQ空间相册的个性化利器，能对照片进行效果的优化、文字编辑等等。

从设计上使用了创新的手法，尽量减少用户的思考。其中，通过界面的特殊表现，让用户更容易学会使用。在使用的过程中，也避免了复杂的操作方式，降低使用门槛。

定位

了解用户需求
·用户期望照片编辑工具拥有“玩”照片的成分；
·大多数用户反映，最需要的功能是旋转、裁剪、添加照片的边框；
·能给照片添加文字、装饰品；
·对照片进行颜色或其他效果优化。
…

分析用户需求

除了可以对照片进行简单的角度旋转，尺寸裁剪、调整；同时可以给照片添加边框、文字、装饰品；还能够进一步对照片处理亮度、模糊等等…众多功能已经足以让照片编辑工具显得复杂，并且带来的是较高的使用学习成本。

作为相册的照片编辑工具需要易学、易用。甚至只需要一些简单的优化步骤已经足够满足需求。即使是熟练使用Photoshop优化照片的用户，选择照片编辑工具也只是想方便、快速实现一些简单的个性化效果。

设计

对照片编辑工具的要求，从基础的优化照片，到照片的特效处理，并尽可能多的个性化照片功能。但前提下需要让用户可以很容易找到基础的优化功能，界面需要直观且容易使用。当然，不是一个摆满所有功能的编辑器，并附带一份使用教程。

界面布局能让用户理解
界面设计传达给用户的亲身感受是最直接的。界面的功能太多、复杂，则会让用户在使用照片编辑工具时有很高的学习门槛。从界面布局入手，设计界面的布局结构。

简化并设计布局结构
设计照片编辑工具的界面，尝试将所有功能分布在三个不同的区域：
1.对照片的简单效果优化
2.可添加到照片上的个性化装饰
3.照片预览区

把所有的功能呈现在界面上，让用户逐步尝试每一个功能对照片的变动，然后再找到他所需要的功能；或者说在众多的功能下找到需要的某一个功能，也不是一件易事。若对于仅仅只是想把方向颠倒的照片旋转矫正、裁剪尺寸，会把一些多余的功能占据了照片预览区。

如何合理得地归类功能，调整一个合适的布局结构，让界面理解起来更加简单，却不会让更多个性化的功能淹没？

编辑照片，所见即所得、核心的内容则是照片预览区，其次是提供一个固定的编辑照片功能区：把所有功能集中在固定的区域，可以更容易找到。

功能区
依据大部分用户朴素的需求，把最常用的功能放置在最容易发现的位置。当需要更个性化照片的时候，同样可以很方便找到入口。

可扩展的功能区—添加装饰
考虑到“添加装饰”功能会有很多装饰品，需要一个固定并且明显的位置。照片编辑工具的核心是让用户可以在简单优化照片之余，还可以“玩”照片。所以这个区域的设计是让用户在需要的时候打开使用，通过技术上的特殊处理，同时也能让用户自行控制，切换为固定的可添加装饰的区域。

一个有序的学习过程
这样的界面设计让用户在第一次使用照片编辑工具时降低了门槛。界面布局的简化能让用户更容易理解，对照片的编辑、优化、等更多的操作，都能在固定的一个位置，更容易找得到。整个使用过程都是可预知的。

避免复杂操作
众多的功能，如何让用户每一个都能学会使用，也是一个棘手的问题。

例如：常见对照片的优化，都会使用复杂的“模式化对话框”（比如：调整亮度）。

模式化对话框“好处”
双重保险，调整到合适的效果后，再确定；不满意，取消。可避免大部分的误操作。

“坏处”
需要完成当前操作，当前的操作若不“确定”或“取消”，则无法进行其他操作，对话框被模式化，挡住了背后的其他操作。
操作越多步骤越多，每个操作都需要确定一次，显然不是每一个操作都需要，甚至会造成用户的困扰。

对于照片编辑工具，我们需要的是更简单，并且便捷的操作过程。尽量避免模式化对话框，成为设计上的禁忌；当然，并非一味想办法把模式化对话框都“cancel”。

在对功能进行归类的同时，把复杂并且容易出错的操作，是更需要“双重保险”的：比如照片裁剪功能。裁剪功能往往不是一步到位的操作，需要多次调整图片的裁剪区域并确认裁剪范围后，才会保存。若有不满意的情况，需要让用户从头再来或放弃。

“撤销”操作缓解了误操作
撤销上一步的操作，对发生误操作或操作后不满意的情况下，比起每次操作都需要“确定”，使用过程会更加方便。

比如锐化、对比度、亮度，这些操作都是显而易见，也是比较容易让人可以猜到的。而正当需要使用这些操作的大多数情况都是很直接的。如果对调整的效果不满意，将滑动块移回初始状态即可；由于设计上使用了下拉菜单这类型的轻量操作，在发生了误操作，撤销上一步的操作可以回到原先的效果。

比如：点击模糊功能>展开调整菜单>调整完成后>不小心点击了菜单外其他区域或转到其他功能时>菜单收起，照片效果变了。

那么此时可通过撤销操作来恢复调整前的效果：

…

最后

我们将会在体验这一块不断去思考、尝试，进一步提高易用性。至少，我们的思考能减少用户的思考，会是让产品更有利健康地成长。

体验一把：qzone相册中点击照片编辑器或查看照片时点击编辑打开照片编辑器。

本文于2009-6-5发表至webteam内部网站;2010-9-2发表至ISD网站（部分内容有改编，仅为作者观点）

激动啊！不得不说一下

tesion — Tue, 18 May 2010 16:24:53 +0000

前两天还在犹豫给小白买一个凯立德还是道道通的时候，在网上搜索了关于google导航，还真找到了，看来国内的导航完全不用再考虑了。

Google最新的地图流出，其实早已经在国外的网站就放出来了，只是大家都不知道而已。

这次更新除了之前提到的buzz（动态更新）、纵横、还有一个牛B的导航！

安装后，地图的图标多了一个标识“BRUT”

启动地图

旁边的白色小气泡就是传说中的buzz，这次与上次4.1版本不同的是，界面不再暗了~ 使用透明度来表示信息的新旧程度。

无意点了一个buzz

打开这个buzz，顺便评论一下

纵横

在我附近的几位好友，看看hermanzhang，15分钟前肯定在那边鬼混了，说了出去鬼混千万别打开纵横，这下好了吧！

点击进入详情

点获取路线，体验一下导航（如果不开地图，直接开导航再输入位置，好像还可以选择骑单车…）

我选了步行，提示要走4.5公里，还有详细路线

点击导航打开

默认显示一条推荐路线

当然还可以看看其他路线

开车的朋友有福了，路线上灰色表示没有车，黄色表示缓慢，绿色表示畅通，红色呢，塞车啊！

在室内没有GPS信号，如果在室外，找到了GPS信号后，导航的界面可是3D立体的，界面还会随着我的方位自动旋转地图，当然少不了前方交通是否塞车的颜色提醒，泪奔啊！这这东西还让国产导航怎么活啊~

网上搜了一个去年的导航图片，凑合看吧，赶紧整一个去体验下，迄今为止中国内地最好的一个导航了！

昨天才在说android的体验多不好，很多地方不一致，可能问题是出在了一些非原生系统，第三方封装的情况下。当时买错了，应该等iphone新版。看来我开始反悔了，体验再好，也要生活服务能做好，毕竟年纪不小了，都不玩游戏了。

从 hiapk 转来的内容：

作者：lilian
应Brut作者要求，翻译他说的话：

我知道你们中很多人的英文不太完美,
所以你们可能在各自的论坛上自立门户会方便一些.
但是这显然对你们所有人不利

比如,这个Buzz的问题.它已存在多时,在Hiapk上也有人修正过它.
有点不好的地方:
第一,
没有人试图在XDA搜索过解决方案,没有人试图告诉世界上的其他人,这个问题已经在Hiapk被修复了.

这个帖子很有意思

http://bbs.hiapk.com/viewthread.php?tid=226494
它是最新的Brut谷歌地图,但是大多数Hiapk的用户可能根本不知道XDA,和我的帖子,等等.

他们对帖子作者表示谢意(我不在意,真的;-)),跟帖的人问楼主为什么没有Buzz和地图漂移的修复,有的人甚至在他们的手机上同时装了个不同版本的谷歌地图来换取完整的谷歌地图的功能
-
那里非常混乱.我不明白,为什么你们不找一些懂英文的人来翻译一下.他可以把一些重要的信息,比如新版本的地图或者软件问题的报告转发到XDA去.直到星期前,我甚至还不知道在中国,谷歌地图是会有漂移问题的!不过我猜想,你们当时真的会为这个问题绞尽脑汁吧.谁可以把以上这段文字翻译成中文散发一下,比如说发到上面这个链接?
————–
翻译完了,我尽量翻译的客观一些.希望大家能够尊敬作者. Brut人不错.
这是原文的地址:
http://forum.xda-developers.com/showthread.php?t=630887&page=70
————–
2010-5-17 更新 Brut12 dev
http://ul.to/bhzbvh/maps4.2.0.4210-brutdev.apk

Changelog:
brut12 (18.05.10)
·added fix for map shift issue in China – many thanks to acamar
·added option to force enable Buzz feature
·TurnUtil: Added “* turns slightly *” support

2010-5-18 更新 Brut12 正式版
http://ul.to/f7czf6/maps4.2.0.4210-brut12.apk
Brut特意提醒大家: Buzz需要重新开启.

方法 :
菜单-> More -> Brut Mod -> Force enable Buzz
另外, 如果有地图偏移问题的, Brut专为中国用户添加了一个选项: Location faking. 如果你的地图没有偏移, 请不要开启这个选项

最后他写给汉化组的:
If someonewant to localize Brut Mod menu, then no problem – I will post XML contents here(XDA).

2年多的小白

tesion — Sat, 08 May 2010 09:32:40 +0000

快到8W公里了，小白还是很白，周末约了朋友一起出去拍了一些照片留念，相信再过几年，就没这么白了。

还有这么一个每天都让我充满激情的DC5呔盘

剧照

google真的在改变生活

tesion — Sun, 18 Apr 2010 18:14:19 +0000

用了好多年的索爱终于宣告完蛋了。偶尔自动关机，电话打一半自动重启。。。
修了好多次，都还是有问题
忍下心，买一部智能手机吧！

选了 legend …. 第一次玩 android….

最新的google maps 4.1 结合了纵横、buzz ….
在google maps 开启纵横，可以看到好友们现在都在哪里～

开启了BUZZ后发现～～
发现了一个雷人的“富B(Buzz)”

看来这种类似微博+google地图才是王道。。google的服务越来越贴近生活了～

2010的开始

tesion — Sun, 14 Feb 2010 18:44:09 +0000

春节回了一趟老家，18:00 – 21:30的高速上，我又从灾难中获得重生。大家都说我活着绝对是一个奇迹！经历了人生第一次能见度不到10米的大雾，第一次感觉路不再坑坑洼洼，我对着muimui说：“我的家乡是霉丽的骸殡层屎─汕头”。

2-12

一大早，下午4点，经过1个小时穿越了7公里的路途，来到了一条小巷子，5个人，花了30大洋吃了一大餐。
在较大的地图中查看小吃一条街

街景，阿肥说，以前这里只有一两家小吃，结果越来越多就变成小吃街了，什么都有，但就不知道哪家好吃。

右图中的猪大肠外面一层膜包诺米饭─简称“猪肠胀糯米”最好吃，当然现在是吃不到好吃的了，只是相对来说，少了好几种料理，还是算挺好吃的了。

那猪屎到哪里去了？我不知道。看着牌子右边那个菜名，见下图。一字评“呕”─ 这种X粿只有在另外一个7公里外的地方比较好吃，但不能再去忍受1个小时的煎熬了。

接下来就是炸豆腐和菜头丸，难吃！天理难容！看来真的这条街就剩猪肠胀糯米好吃了。

还好，奸饺，还不错。据说评价是：脆、刚刚好、不油、不过火…

随后移动街区，打算去吃豆腐花，可惜太晚了，赶不上。

2-14

移动了80多公里，去周爷爷老家。

2-15

喝了很多酒

2-17

忘记吃了什么，吃了很多很多。

2-18

与阿狼前往老市区喝了一碗五果汤、水粿、粽球…

2-18 凌晨4点

每天凌晨都想去吃的长平夜粥，这是本周第三次了

2-18 凌晨5点

回深圳…

iPhone应用程序设计范例

tesion — Fri, 05 Feb 2010 17:29:02 +0000

引言

iPhone对应用程序(app)制定了3个标准的模板：导航控制器、页签控制器、模态视图与表视图控制器。文章介绍了这3个标准模板，它们拥有各自的优缺点。对每个标准模板列举了3个不同的应用例子。在面对不同信息的结构，无法完全使用这3个标准模板去规范所有产品特性。而目前有一些产品已经超越了标准模板的体验，创造了更多好的体验的方法。

原文: iPhone Application UI Design Patterns

前言

在iphone平台开发有很大的限制-没有实体键盘，屏幕小，几乎没有物理按键-这样的设计是为了在iPhone上可以开发智能、简单的应用程序。在iPhone上，你不会找到很多臃肿、复杂的应用程序。大多数应用程序会选择一个功能或相关的功能组，围绕并集中一个主题去设计产品。

当apple开始制定UIKit，iPhone的每个应用程序会使用API集来构建用户界面，他们必须看到未来和预测到什么应用程序的设计模型是最常见的，并确保那些可以很容易完成。这似乎是显而易见的，现在我们习惯了iPhone应用程序的设计，高级导航的交互方式也完整地提供给iPhone应用程序的开发人员：

·进入更深层级的时候，也可以很轻松回到顶层

·在不同功能切换时不失去当前位置

·修改和调整内容时，不会离开上下文情境

·显示信息列表或选择器

这里几个主要的交互特征相当于3种不同类型的界面模板：

·导航控制器

·页签控制器

·模态视图与表视图控制器

突出主要功能的特征

突出显示你的应用程序中可用功能的列表，以便用户可以清晰浏览您的应用程序。不过，考虑到有各种各样的方式来组织显示应用中的信息，那么哪一种方法最好？从哪里切入来突出应用程序的特征？
没有最好的，但下面有一些已被实践成功的的模式供你参考：

导航控制器—Things ，iStat ，Birdfeed

Things

iStat

Birdfeed

这三个应用程序都具有多层级的功能，每个层级的功能很多，超过一屏功能导航会落在第二屏，通过控制上下滚屏查看所有功能。采用了层级列表，每个层级为一个列表，点击一个列表项进入第二个层级并会显示另外一个列表。

优势：主要应用于层级信息结构简单的列表。作为服务订购以及分组中蕴含其他功能等。
缺点：没有办法从进入的列表第一项中直接转到列表第二项，只能返回首页再选择列表第二项。

页签控制器—Squirrel,Tags, Tweetie

Squirrel

模态视图—ESPN ScoreCenter, Phases ,Weathe

ESPN ScoreCenter

Phases

Weathe

这三个应用程序采用模态视图的观点是，他们彼此的功能是一组的。使用这种设计模式的通常是信息量丰富，查看信息不用花太多时间。

优势：表现自然且容易理解，能快速显示丰富的信息。
缺点：只有一个层级结构。若从页卡1切换到达页卡4需要多次平移操作，它们之间不能直接平移超过1页卡。

遵循基础模式还是打破限制？

Apple提供了应用设计模板和范例，他们为良好的交互行为体验定制了标准的UIKit。 如果你想超越这个模板，打破限制，这会不会有问题？你已经有一个完全自定义的新模式？

以下是一些拥有良好交互行为的自定义新模式：

Weightbot,Convertbot
可以说为iPhone提供了独一无二的良好交互行为，完美的触觉体验。
Weightbot 使用水平滚动轮控制器

Convertbot 有机械选择拨号控制器

beats
Bjango 创造了Betas，是一个节拍和节奏配对的DJ和音乐应用程序。他有很多自定义的创新元素，主要内容展现在页签栏下面。

Postage
RogueSheep创造了Postage，是apple设计奖得主。

选择哪个效果最好 ？

选择APPLE的原生UI元素与模式是没错的。apple创建了一个坚实可靠的基础，对应用开发提供良好的交互行为模板，但有些应用并不适用这些模板，使他们会考虑重新设计这些互动的方法。这是一个很好的想法，但需要谨慎，会很容易走向极端并且搞得一塌糊涂。

一个衷心的建议：如果你不能比Apple设计的更好，就不要胡乱去改！

本文翻译、附加描述（原文 iPhone Application UI Design Patterns），文章内容有修改和整理。

组成我们的世界是“信息”

tesion — Tue, 26 Jan 2010 11:03:32 +0000

信息图形设计概述—信息的形式化表达系列一

引言

布林

分享/翻译

设计的核心是通过图形图像，文字符号等形式系统正确且高效的表达（传递）信息。

本文的初衷旨在对表达信息所采用的交互与视觉原理，方法进行详尽的讨论与研究。由于该主题涉及诸多领域，一篇blog短文恐怕只够写成概述。为了能够较为深入的讨论这一信息组织的形式化体系，故将讨论分系列进行，本文是第一篇。引译国外的一篇介绍信息图形化的文章做个概念的普及，为全系列做开篇铺垫，接下来我们将通过分享与文章，一起来探讨下列的话题！

1.了解信息的概念、结构（信息的三层次意义）及性质；

2.理解与认识用于表达信息的形式系统。图像、图形及高度抽象化的文字与符号（数学符号演化史）及形式演化的驱动因素；

3.通过构建与现实世界的认知模型（现实世界－心理世界－柏拉图理想世界）及系列法则（格式塔原理-先天因素），关注人对信息及其结构的认知过程与原理。理解对一定量抽象的信息的组织法则（表达信息单元间的关联，并列，因果，包含，递进顺序，趋势，重要度及相互关系）与图形化需求的动机；

4.了解跨区域人群的文化认同（后天因素），了解人群的兴趣点以提升信息表现形式的趣味性；

5.对表达工具的讨论，通过对信息内部含义的挖掘，通过外在形式的表达（如颜色，形状，位置，大小，频率／速度，方向，质感等）形成受众的预感知，提升理解的效率；

6.简单的介绍哥德尔定理及相关的哲学论点，了解现实世界信息的复杂性与表达的限制。以求在有限的条件下创作更加有效的表达与组织形式的思考方式。

…

原文作者：Anders Ross
原文：InfoGraphic Designs: Overview, Examples and Best Practices

信息图形设计概述

“信息图表“或“信息图形”是“信息、数据、知识”的可视化表现形式。当需要表达结构复杂的信息时，图形化的信息表达可以使理解更加快速和清晰，这一方法在标识系统，地图，杂志，技术写作或教育领域都具有广泛的应用。他们作为简化“事物发展过程及传播概念化信息”的手段工具，也被广泛的应用在计算机科学，数学及统计学领域以简化发展与交流概念化的信息处理上。

信息图形能够轻易地呈现海量信息而不会带给受众多大的负载压力，或者能够在你理解复杂信息是适当的减轻压力。接下来我们拿一些例子来讨论和练习信息图形的设计方法，管中窥豹希望与读者分享一二。

什么是“信息图形”—What is InfoGraphics?

传统的说法是，信息图形是为了帮助理解以文字为基础的内容而应用的视觉元素。如标识符号，图表，地图等。与文字结合使用往往比单独的使用词语或比喻更具优势。信息图形以其精细设计的视觉元素来传达视觉语言，结合上下文的环境，能够提供“预先感知”以加深理解。无论如何，信息的可视化表现绝不仅仅是记录我们发现信息的一种方式，在过程中具有发现新意义与知识的潜力。每一个观察它的人从中得到启发，在视觉盛宴中学习，从而激发探寻更多知识的动机。

自燧石取火以来，我们就已经在使用图形作为可视化的速记来传达信息给观众和读者了，用来代替用成段或大篇的话语解释。用一页或一段去表达整个故事是困难的，但这要远远比阅读整本书更有效率。甚至每条街都有若干信息图形。事实上我们每天都要与信息图形发生交互，从简明的符号图形中得知我们应当什么时候过街，或作为网页导航的图标。

“信息图形”的简要历史—Little History of InfoGraphics!

早在史前时期，人类创造了信息图表-洞穴壁画，以及之后出现的地图与图表。遍布整个文明的历史，图形和文字始终剪不断理还乱的纠缠。制图早于书写几千年，地图的雏形于公元前7500年左右出现，之后图标被用于记录家畜和物资储备。中美洲的印第安人用各种图示来记录过去几世纪的历程。因为连他们自己都不太可能记住几代前的事情，这些图形能够帮助他们记起哪些救援的故事，并通过同样的办法一代一代传递下去。

1626年，克里斯托弗·沙纳尔出版了《Rosa Ursina sive Sol》一书，应用各种图表图形来阐述他关于太阳的研究成果，他绘制了一些列图表用于解释太阳的运行轨道（研究轨道则是通过对太阳黑子的观察）。

1786年，威廉普莱费尔出版的《The Commercial and Political Atlas》一书中第一次出现了数据型图表，在这本书中作者使用了大量的条形图和直方图来描述18世纪英国的经济状况。1801年他在《Statistical Breviary》杂志中第一次发表了关于面积图的介绍。

1861 年，描述拿破仑东征（征俄）的信息图表代表了开放性信息制图的出现，该图的设计者Charles Joseph Minard提取出了东征过程中的4个导致完全失败的关键变量，并通过图形的形式在一张图表中传达这些信息：军队的人员变化、行军的路线、气温的变化、时间等。从图中我们可以轻易看出法国士兵在严寒、疾病、伤病的困扰下，导致的战斗力不断下降。

1878年，西尔维斯特（James Joseph Sylvester）第一次提出了“图形”的概念（英文Graphic），并绘制了一些列用于表达化学键及其数学特性的图表，这些图表也属于早期第一批的数学类图表。

二十世纪信息图表发展成一门新的视觉化语言！

1936年，奥托·诺伊拉特介绍了一套系统的视觉信息标识，并视图将其发展为世界统一的功能性视觉语言，这些视觉标识（Isotype中就有包含通用的人类形象标识，以后出现的“抽象小人（通常都是棍状的）”就是从这些形象概念中发展而来的。

1942年，伊希朵尔·伊苏(Isidore Isou)发表了“字母主义”运动宣言。

1972 年，奥运会在德国慕尼黑举行，在本次奥运会中，第一次引入了全面而系统的视觉标识，当时得到了来自全球不同国家人员的一致好评，影响至今。慕尼黑奥运会中使用的奥运项目二级图标设计概念——“抽象小人（通常都是棍状的）一直影响着之后的奥运会标识设计以及其他领域的标识设计。

同年，先驱者 10号探测器发射，他成了人类放入宇宙中的漂流瓶。探测器上携带了一张著名的信息图表，该图表由美国天文学家卡尔·萨根(Carl Sagan)和天文学家弗兰克德瑞克(Frank Drake)设计，图中包含了太阳相对于14颗脉冲星的位置，一个地球男性和女性的轮廓图，太阳系行星分布图等，由于考虑到是用于与未知文明传递信息，所有的信息内容都不能再通过我们的语言进行描述，都采用了视觉图形图像的方式进行表达。

为什么要使用信息图形—Why Using InfoGraphics?

俗语说“一张图抵过万语千言”，信息图形出于各种原因被应用，连同他们能强调下面的重点以揭开它神秘的面纱。

·传送与传递信息

·将海量信息以密集但简洁的方式呈现以助于被理解

·显示数据，揭示因果关系，洞察趋势

·周期性监控确定参量的演化

信息图形的元素—Elements of Information Graphics

很多理论有效阐释其中你能识别被认为是信息图形元素的实体数量，但信息图形的基础和关键的材料是数据，信息和资源限制下对知识的图形呈现。不管怎样，基于数据，创建者可以利用图形软件等自化动工具来代表线表格数据，框，箭头，多样的符号及象形图。信息图表可能还具有浅显的定义视觉元素的关键。比例和标签也很普遍。

信息图形的类型—Type of InfoGraphics

信息图形有多种类型。很多信息图表采用专业的描述格式来表现他们精细与抽象的内容。若想恰如其分的理解这些图形所代表的意义，观察者需要具备相匹配的理解能力。在多数情况下，理解能力通过后天习得比先天资质重要。最基本的，在取得感知信息图形整体前要具有解读个体图形符号意义的能力。不管怎样，用约定俗成的知识为分布与排列这些独立的组件是构建理解所必须的。我们归纳一些信息图形的主要类型，并去了解它们的适用性。

1.以统计为基础的信息图形

2.以时间线为基础的信息图形

时间线是另一种信息图形的使用的形式，用于可视化基于时间的信息。时间线是按照年代顺序发生的事件的介绍，以使观察者能够快速理解其时间相干性的关系、有时也被用作分年的段落或其他格式的扁平化呈现

3.以进程为基础的信息图形

4.以位置与地理位基础的信息图形

这是你能在任何地方常见的信息图形类型，从你学校的地图到复杂的天文图形。城镇地图同样可以作为一个基于地理基础的信息图形的例子。这种类型的图形包含符号，图标，图表，图形，表格，箭头和点。你必须记得他们众多类型的线（平行线，虚线，直线）来定义铁路，街道，高速公路，铁路。很多符号和图标被用在诸如学校，教堂，医院，银行等特殊地标中。比例是重要的参数，一切都根据比例尺来标注。

如何构建信息图形—How to Create InfoGraphics?

在开始构建信息图形之前需要先回答好三个问题。为什么构建？如何构建？是否有用？构建好的信息图形以促进理解错综复杂的事物，用简单来代替复杂来构成。在清晰的理解我们想达到什么目标，了解我们的受众以及经过大量的工作和思考后才能起到作用。

问题1：构建图形的动机是什么—Why？
为什么要构建一个信息图形是首要问题。为了什么构建？构建目标是什么？是一个研究，发现，还是作为信息监视与控制？

当你顺利回答这些问题后就可以搜集相关数据了。为什么决定了描述搜集信息的形式，他能是怎样的形式（定量的，顺序的，分类的，分析的等等）以及更重要的方面：这些形式真的对我们所要表达的起到重要作用么？

问题2：怎样做？
当你完成了“为什么”这个问题，你需要去思考怎样去提炼数据以及如何表现数据。因为它揭示了信息内在的不同所以常常表现的很有趣味性。出于这个原因提炼以及表现数据的动机来源于统计处理时常揭示的趋势，否则这将导致令人困惑的错误结论。

一旦数据被提炼好现在你需要选择最有效地视觉隐喻。通常，展现一个少量的数据，一个表格或一个句子比一个图表更能清晰简单的表达。在某些场合改变配色方案或表格形式也能够清晰地体现趋势。

问题3：设计的有效性？
现在进入决定性的部分，你需要判断呈现结果是否恰当的达到目标。如果没能达到目标我们需要重新定义第一步。没有准则则能够用于判断你的结果是否有效。但是在彻底的回答所有以上三个问题后你需要判断其结果是否是为受众所接受与喜欢。关键在于不断的修改和体验直到我们找到一个有效的改进。

颜色，版式与布局的选择—Selection of Colors, Typography

一个完美的布局，一个好的选择及精彩的来源能够产生一个创意的输出。布局，纹理以及版式。不同方法的结合往往比单一的一种有用。专业性基于知识与经验。在任何设计项目中排版都是重要的关键点。有效地排版能决定一些重要项目目标的达成，如企业形象，项目的吸引力，丰富的视觉表现，信任及引起受众兴趣。他也能够帮助你帮助约束图形所传递的情感。

改变颜色，非重要的数据饱和减少，重要数据饱和增加，修改排版，字体大小，在确保不丢失相关信息的同时去掉任何无助于显示与呈现的数据往往能产生了令人惊奇的结果。

一些比较好的例子

访问原文查看更多例子

本文由布林翻译、附加描述（原文 InfoGraphic Designs: Overview, Examples and Best Practices），文章内容有部分修改和整理。

Qzone设计大揭秘-它是怎样一个信息架构

tesion — Fri, 18 Dec 2009 18:50:10 +0000

什么是信息架构

信息架构的主要任务是为信息与用户认知之间搭建一座畅通的桥梁。是信息直观表达的载体。通俗点，信息架构就是研究信息的表达和传递。信息架构不仅仅是设计信息的组织结构。─摘自百度

为什么需要信息架构

打开Qzone，个性化的风格，很酷炫的效果已经是它陈年传播的口碑。web2.0，SNS这一系列的新潮名词融入了Qzone以后，现在看到的，似乎会让人迷惑…

“我感觉QQ空间好乱”─经常有网友这么说

“在自己的空间，可以看到有主页、日志… 个人中心，在个人中心下面，可以玩一些应用、游戏… 当我去看朋友的空间时，我想知道他在玩什么游戏，他用了什么应用，这个时候，我开始迷路…”─亲身体会

这或许就是信息架构不清晰，它会让用户越来越难以理解，而在使用Qzone的过程中，会觉得越来越难复杂。

是什么反应了信息架构混乱：

1.导航信息结构不清晰
Qzone导航上的“更多”，是展示主人的更多导航内容，但实际上是“主人使用的应用”。

2.个人中心信息界面复杂
个人中心、应用列表、信息中心之间的关系，已经让用户无法理解。个人中心到底该有什么？

这是目前最容易看到的问题。那么Qzone，它是怎样一个信息架构？尝试对Qzone进行一次分析，整理并建立一个清晰的信息架构，或许可以看出问题的所在。

建立信息架构

建立信息架构的难点，必须收集网站所有的内容，整理、分析，在之中遇到很多困难。Qzone平台的概念，每一个功能如何定义；架构引发导航的思考…

第一步.定义概念

想象Qzone是一个平台。任何建立在平台上的功能，尝试把它们进行划分。

QQ校友，它是一个关系链平台，校友是否应该接入Qzone，作为Qzone的一部分功能；而后续推出的QQ同事，也是另外一个关系链的平台。这里成为Qzone平台定义的难题。

假设在Qzone的个人中心，可以了解个人空间最近的新动态、QQ好友空间的动态；同时可以了解到我校友、同事们的动态，是一个很方便的事情。但是，如果把其他平台的动态都接入到Qzone，相当于Qzone平台下包含了校友、同事（平台），它们之间则不再是同级的关系。

Qzone应该只是一个个人平台、个人空间，其他平台可以有应用接入的方式，但不应作为Qzone本身的平台功能。

不久之前个人中心动态的“校友”，则是一个错误的接入了；它的形式，让用户觉得校友是Qzone的一部分，但实际上不是。

第二步.整理、分类内容

在整理清楚Qzone的定义，日志、相册等的定义，开始构架Qzone的信息结构。

Qzone的内容很多，我们尝试把结构简单化，将内容用一个层级结构去划分，这样也使得复杂的网站结构可以更简单清晰地变现出来。

日志、相册等作为Qzone平台的基本功能，它们是一直存在依赖于平台，同时也是平台不可缺少的功能。其次，把目前众多的应用作一次分类“基础应用、游戏应用”，是为了让平台后续接入更多应用的时候，区别对待。“基础应用”是更重要的功能；而“游戏应用”的自由度可以由用户去控制。

把应用划分为两类，但用户是否能够清楚理解？假设在导航上，用户会发现两个不同内容的应用列表。而我们把应用清楚划分是为了后续的扩展，那在构架上，“基础应用、游戏应用”应当是“应用”的下级。

应用是指用户之间交流、游戏互动的内容。好友管理、空间设置，不属于Qzone的应用，而是对空间设置操作类，因此单独把它们划分为“管理”类别下；其中也包括了装扮空间、自定义。

个人中心，是一个新消息的聚合。起初尝试在个人中心下划分一个层级，存放“消息”内容。

然而发现，Qzone本身是一个内容很复杂的平台，里面包括的所有内容都有可能会产生大量的“消息”提醒，单纯把“消息”都堆积到个人中心下，会使得个人中心变得庞大。重新尝试把个人中心下的“消息”再单独划分为一个内容。而个人中心，更应该是一个主人的首页，只聚合了最新的“消息”，而相应查看更多的“消息”内容，得去到“消息”的栏目。

…

把Qzone所有的内容总结、归纳、分类。一步一步梳理信息架构图…

最后.它应该是怎样一个信息架构

信息构架完成了第一步，大的框架已经有了结论。Qzone包括了“平台功能、应用、管理”，“消息”是平台各个地方产生的新消息汇总与通道；“社区”作为第三方的信息接入；“个人中心”是聚合各个地方的最新动态。

信息架构的意义

信息架构图不仅是给网站设计者、产品设计所理解的；同时也是一个用户可理解的结构图。图中反映了网站的结构，也是一个网站的导航。

如果它是这样一个信息架构，那么：

1.导航信息结构不清晰

“个人中心、平台功能、应用、管理”组成了Qzone平台主要的导航项。

目前导航里的“更多”，则是更多在第一屏摆不下的导航项，而不只是“应用”。

2. 个人中心信息界面复杂，个人中心到底该有什么？

“应用”不再是个人中心的一部分，个人中心只是有“应用”的快捷入口。个人中心聚合了更重要的“消息”，其次把各个地方需要展现的最新信息，或以精华、推荐的形式介入。个人中心更像是一个主人空间的首页。

每个网站都有它自己的信息架构，而一个清晰、简单的信息架构，可长期让网站健康地发展下去。

本文于2009-5-5发表至webteam内部网站（部分内容有改编，仅为作者观点）

小白6WKM的秘密

tesion — Sun, 13 Sep 2009 16:57:56 +0000

小白的6w公里… 需要进行一次大保养… 正所谓勤保养，才不会有意外。

作为一个平民，4S店那些几千几千的保养费是完全无法接受的，所以自行跑了几趟地方买了需要保养的配件（*）；

这次保养也充分了解车的消化系统结构，其实只是一件很简单的事情…

·更换机油*

·更换波箱油*

·更换刹车油*

·清洗油路

·更换火嘴*

·发动机内部清洗

·检查水箱水、检查皮带、底盘、悬挂、刹车系统、四轮定位、四轮动力平衡

准备好了一些耗材

跑了一趟罗湖，今天真的是超级热…

H-Tech 100Plus 10W-40

Mobil Dot4

Mann Filter

Denso IK20

四轮定位及底盘检查

·结果发现前面角束有几毫米不对称，导致前轮严重食胎。（前后轮胎调换，可以顶住一段时间）

清洗油路和发动机（清洗发动机好像打吊针一样）

·清洗后流出来的油水是黑色的、冒了很多浓烟

结果花费了4S报价的1/3价格… 老百姓的心理实在多了…

mp change 创建形象

tesion — Tue, 08 Sep 2009 10:21:11 +0000

来自mppark的一个有趣的形象创建工具。

mppark

最后保存的照片：

人仔 个人网站