VC专项－Visual Communication（视觉沟通）是一项由人机组提出的部门内部专项工作计划。旨在改善沟通为目标。针对工作中的各种沟通问题，提出“视觉思维”的工作方法。
简言之，视觉沟通，就是把复杂的表达以最原始最直观的方式表达出来；以一种简单的、图形为表达方式的沟通手段，以便快速理解冗长的信息。

原理

处理信息的通道有两个，一个是文字的，一个是视觉的，它们之间相互关联。一个重要原则是：同时以图像形式和文字形式呈现信息能够增强记忆和识别。

①.传统语言的“交流”，是单向的信息传递，对方可能在频频点头，其实可能是听得头晕。
②.参与互动式的“对话”，运用双向的沟通，双方都能相互理解。而互动对话的最佳触媒是一张白纸上写写画画。
③.到了“协作”阶段，需要共同思考、规划和作出决定，那么有视觉化的参照，可以让大家在同一时间同一件事。
④.有了视觉化的行动地图，在“共建”阶段，大家更容易知道自己在做什么，因为他能看到自己的位置。VC专项主要针对②对话和③协作。

作用

VC专项的出发点，是基于：
1. 部门工作计划中有一项为：改善设计文档质量；
2. 沟通是一切工作的基础，尤其在远光这样的大型多部门IT组织中，VC计划将提高记忆的保持，沟通更敏捷；
3. 设计文档实际上就是一种文字＋图表的沟通形式，本质上属于沟通；
4. 除了文档以外，工作中还涉及大量语言沟通和文字沟通工作，比如评审会议、邮件、口头交流等；
5. 人机组从事用户体验工作，沟通是专业内研究方向，具备一定责任

基本理论

形态

手语、唇语；——适用于小众特殊人群白板、海报、幻灯片；——适用于大小会议
网页形式；——适用于远程沟通和最大化传播

单词&语句

词汇语言最基本要素，此定理同样适用于视觉语言 。
不管学什么语言，词汇是最基本的、其次是词组、然后是句型，到最后，就可以说话了。
视觉化思考是一种人人可以学习的视觉语言，它有自己的单词，有自己的句型。这些单词和句型都是有限的数量，所以只要你会说母语，也就可以学会这门视觉语言。学习任何新工具有两种方式，一种是一味发挥创造性，一种是学习规则和基本动作。一味创造性也是可以，不过后一种学习方式，也就是学习规则和基本动作，一般会少走弯路，也会得到更好的结果。
视觉语言的基本元件是7种基础形状，可以看作是视觉语言的基本单词，也就是点、线、三角、矩形、箭头（空箭头）、螺旋（曲线）和圆形，掌握这7种基本单词，你基本就可以画出任何示意图。

尽可能采用了兼容性强的的字符画代替图片，能找到的都找到了，郁闷的是在浏览器显示中（Chrome稍好一点）不能得到编辑器同样的效果，~~~~(>_<)~~~~
有个别语句是在找不到合适意义的字符画了···

曼陀罗：藏传佛教术语
意译为坛场，以轮围具足或“聚集”为本意。指一切圣贤、一切功德的聚集之处，（引申为“统一”）。

记录一下这个网站，她的简单风格我很喜欢。

先随便放几本，小组的专业书舍不得放在里面，有坏人会拿···

很错落有致的相框组和，以后可以放一些人物和活动的照片，再上张横版全貌：

物品购买ing，陆续更新中。

这是一篇受密码保护的文章。您需要提供访问密码：

密码：

试过之后才发现,这个真不容易,需要耐心和空间想象能力。

如果没有更新，那是因为在酝酿雄作,或者已经暴毙。

ps:暴毙之前一定雄起～

*Firewheel Design

译：GYF

Here at Firewheel, we create a boatload of icons, and one of the most common questions we get asked about icon design is,“Why do you deliver your icons individually sized in PNG or GIF files, when a single vector file like SVG or EPS can be made any size we desire?”

在火轮工作室，我们做过很多很多的图标。一个最常被问及的关于图标设计的 问题是：”为什么你们用独个的PNG或者GIF文件导出图标呢？一个SVG或者EPS矢量文件不就能够设计成任意大小吗？”

While the answer is a technical one, it’s not too difficult to understand. But before we get started, we should brush up on the general differences between bitmap and vector file formats.

答案是一个技术性的，不太难懂。然而在我们开始之前。我们应该 复习一下位图和矢量文件格式的大致区别。

A bitmap image file (such as GIF, PNG, TIFF, etc.) is comprised of pixel-based image information. Pixels, for the uninitiated, are the tiny little squares of light that make up your computer screen. The word pixel itself is an abbreviated form of the words “picture element.” The little square pixels of light are extremely easy to see with the naked eye on an LCD flat panel monitor if you have one. A 24×24 pixel icon representing a red square would be comprised of 576 individual red pixels, each represented by little bits of numeric data in an image file. A larger image requires more pixels, leading to more numeric information, and thus a larger file size.

一个位图文件（如GIF,PNG,TIFF等）由基于像素的图形信息组成。像素，用外行的话讲，是组成你的电脑屏幕的 一块块光点。单词pixel是“picture element”的缩写形式。这一小块光的像素用肉眼在液晶显示器上很容易看到。一个24×24 的像素图标呈现出一块红色，它由576个单独的红色像素组成， 每一个像素代表着图象中的一个小小的数据单元。大的图像要求有更多的像素，也就意味着更多的数字信息、 更大的文件。

A vector image file (such as EPS, SVG, etc.) is comprised of geometric, mathematical-based information. A vector image file containing a red square scaled to 24×24 pixels would simply contain numeric information regarding the mathematical location of the square’s four corners, information about the color the square is filled with, and information defining the size of the square as 24×24 pixels on screen. Basically our red square vector file only needs about six little bits of information as opposed to our 576 bits of information required for our bitmap red square.

一个矢量文件（如EPS,SVG,等）是由 几何级的数字信息构成的。一个包含24×24大小红色像素的矢量文件，只包含一些数字信息，代表四边形的 四个角的几何位置，代表四边形所填充的颜色以及定义屏幕上24×24 像素的 尺寸大小。基本上我们的红色平面矢量文件只需要大概6个字节的信息就够了，而位图需要576个。

In reality, the explanation is a bit more complicated than this, but you get the gist: Changing the size of a vector image file from 24×24 to 48×48 simply requires the editing of one bit of data (the size). The math does the rest. However, changing the size of a bitmap image file from 24×24 requires the addition of 1728 more pixels, resulting in a larger file size.

实际上，情况要比这个 复杂一点，但是记住要点：把一个尺寸大小为24×24的矢量图文件更换成48×48的，只需要简单的编辑一个字节数据就行了（尺寸），剩下的交给 计算机去办。然而，要把一个24×24的位图文件变得那么大需要增加1728个像素，从而导致文件更大。

Thus a single vector file may used to represent it’s image at multiple sizes, whereas a bitmap image may only accurately represent its single pre-determined pixel size.

这样的话，一个矢量文件可以表示不同尺寸的图像，而位图只能单独地表现预定像素的尺寸。

So if a vector file format can scale and shrink to represent any size it so desires, why does Firewheel Design insist on drawing new artwork for each icon size we deliver to a client? It’s simple, really: Relativity.

如果一个矢量格式文件按比例 缩放到任何它能显示的尺寸，在我们交付给客户时，为什么Firewheel Design坚持把每个尺寸的图标都重新绘制？这很简单： 相对性。

图1.1

Let’s look at the printer icons above. The top row consists of four individually drawn bitmap icons, each of the same subject, each delivered at a different size. The bottom row consists of a single vector icon, originally sized at 24×24 pixels, then scaled mathematically to the other sizes shown.

让我们一起看看上面的打印机图标。上面那组是由 四个单独画的位图图标，每个是同样的主题，输出时大小不同。下面那排仅由 个单独的矢量文件生成，原始尺寸是24×24，然后按精确比例表示其它尺寸。

Notice a difference? I thought you would. In the top row, each icon is crisp and the 1-pixel lines are sharply defined. In the bottom row, only the master vector file (originally created at 24×24) is crisp. The other three sizes are blurry.

注意到区别了吗？我想你们都看到了。 上面那排每一个图像都是清晰的，每一像素的线都是锐利精准的。 下面那排，只有原始的矢量图(由原始的24×24产生)是清晰的。但其它三个尺寸是模糊的。

“Why is this?” you ask. “I thought vector files could scale big and small and far and wide, and still retain their image quality.” Well, technically they do. But there’s a weakness in using vector files, and this weakness becomes more apparent at small sizes. Especially sizes under 48×48 pixels. The weakness is that computer monitors are still inherently pixel-based (that is to say, bitmap-based) displays.

“为什么会这样？”你也许会问。“我认为矢量的图能够按比例放大和缩小，变长，变宽，也能保证 质量。”从理论上讲是这样，但是使用矢量图有一个缺陷，而且当尺寸变小时，特别是当尺寸低于48×48时，这个缺陷变得更明显。电脑显示器固有的 像素显示（也就是说，以位图为基础）是产生缺陷的原因。

When you take a vector image, originally sized at 24×24 and scale it down to 16×16, the relative proportions do not match. There’s no way you can evenly distribute 24 pixels of information into 16 pixels of space (remember, there’s no such thing as half a pixel). So the image blurs.

当你使用一个原始尺寸为24×24的矢量图，然后按比例缩小到16×16，相对的比例部分并不配对。你甚至不能将24像素的数据分散在16像素的空间上（记住， 没有半个像素的存在）所以图像变模糊了。

There’s also no way you can evenly scale 24 pixels of information upwards into 32 pixels of space. Again, the image blurs.

同样道理， 你不能将像素为24×24的信息按比例增大为32像素的大小。图像还是模糊。

Furthermore, if you take that same vector image, originally sized at 24×24 and scale it up to 48×48, you’re now doubling the proportions. You no longer have crisp 1-pixel lines. You have chunky 2-pixel lines. Scale it up larger (say to 96×96) and those lines become even thicker.

此外，如果你用同样原始尺寸为24×24的矢量图，再把比例放至48×48，现在你会怀疑协调的问题。这样你不会有单一的一条像素线了，你会看到 条粗大的像素线。再按比例放大（到96×96）,这些像素线变得更粗。

Now this is fine if you want Fisher Price icons, but not desirable if you’re looking for crisp and clean. And this is why we design each icon size to scale, instead of relying on a single vector file. It takes more time, and may cost a little more money, but we believe the results are worth it.

这对于你想要*费雪图标来说很好，但是你若要追求清晰和干净的图像，这样就不可取了。这就是为什么我们按比例设计每一个尺寸的图标，而不是仅仅依赖一个矢量图。当然这可能要多点 时间，多花费一点点的费用，但我们相信结果是值得的。

There are a few caveats: First, if you’re working with larger icon sizes (say, above 48×48) you’re not going to notice the difference as much, and you may find the results acceptable. Second, your mileage will vary as you create different styles of artwork. The less-detailed your linework is, the less you will need to worry about this.

多几句嘴：第一，如果你用的是大图标（如大于48×48），你可能察觉不到明显的不同，而且你可能发现结果还可以接受。第二，差别体现在你使用不同风格的图稿时。你的线条细节越不详细，就越不用担心这个。

Now you know our process, our obsession with pixel-perfection, and why it takes a bit more work when you need more than one icon size. Vector artwork is wonderful, but it should not be relied upon as a silver bullet. For small icons, bitmap is the way to go.

现在你知道我们的工序、我们关于完善像素和当我们需要一个图标尺寸时为什么它需要更多的工作的困扰了。矢量图好是好，但是不能把它当作 银子弹（杀手锏）。对于小图标，位图是很可取的。

*Firewheel Design是位于美国德克萨斯的专业设计公司，成立于2001年，作品包括图标，网页，用户界面及标识设计等。

*费雪(Fisher Price):美国玩具品牌，业内唯一拥有 实验室，经过严格检测才发售。

以下资料由用户体验部收集

矢量图放大时，轮廓线也会随倍数放大。图1.1

以像素为基础的电脑显示器决定了矢量文件的缺陷，当矢量图尺寸变小时，特别是制作尺寸低于48×48的图标时，会导致模糊。矢量图缩小时，轮廓线却只能基于像素显示而变得模糊。（矢量图更擅长大尺寸文件而不是制作图标）图1.3

图1.3 Vecor（矢量图）

位图能单独地表现预定像素的尺寸，且在制作以线为主（轮廓线突出）的图标时更实用。图1.2

图1.2 Bitmap(位图)

End

调查到的产品：

Chrome：占据统治地位的蓝色调，可能是我老用chrome觉得被他统治了

Reader：文字阅读为主，蓝色很淡

Knol：同上

Notebook/Docs/Gmail：彩度稍高一些

Wave：此款是目前为止彩度最浓重的

Gtalk：基本为黑白，忽略

Orkut：采用了紫色做Logo，有点像异类，不放右下角的Google没人知道是他们家族的

只有红黄蓝绿色个主要的颜色，不用色环了，找不到更好的排列方式之前就这样放着吧

]]> http://gyf.me/?feed=rss2&p=364 1 http://gyf.me/?p=344 http://gyf.me/?p=344#comments Sun, 01 Nov 2009 03:19:17 +0000 oni http://gyf.me/?p=344 公司内网用的，要求和百度知道相似，他们把结构搞成这样子，我做了视觉。

为了给人感觉轻松，手绘的小图标用得多。

“YG知道”截图：