一葉千鳥

原研哉的《設計中的設計》中文譯本沒有太多的文學價值，所以這個版本不是去欣賞文筆，而是去閱讀作者，閱讀設計，在閱讀的過程中不斷思考，我就是愛極這種不斷轉動腦筋的運動。

原 研哉是從事平面設計的，誰都知道現在的平面設計並不平面，而原研哉和書中提及的設計大師都很膽大心細地探索各種可能，在讀這本書的同時我也在讀 Freakonomics，假如說經濟學家是要研究受眾對某訊息的反應和行為，那麼設計師就是要把這個訊息傳遞給受眾並得到他們預期的反應和行為，而我的 延伸問題是：為什麼設計師能有這種把握？

本書另一吸引我的是出版社（這樣的稱呼有點牽強）在向原研哉爭取版權和翻譯製作過程。本書中文版的出版人不是什麼大型出版社，甚至連出版翻譯書藉也是一步一步地摸索，作為出版同業才會了解箇中的艱難，但是他們還是做到了，實在是個驚喜。

Jimo 于2006年05月27日
http://jimo.mocasting.com/p/54854

很多人得出的结论：SEO与以以用户为中心的设计(UCD)是冲突的。当然，做黑帽SEO的人会宣扬这种说法，因为这种说辞可以让他们规避他们不熟悉的领域——网站可用性。

搜索引擎优化应该成为UCD的一部分，UCD理念中的两处细节对于SEO来说非常重要：方位感和信息线索。

提供页面的方位感

当用户从搜索引擎的结果中点击某个链接，他们一般不会进入到这个站点的首页，而是进入含有他们搜索关键字的一个页面，或者是一个能引导他们找到所需信息的页面。为了使搜索者确信站点提供了他们需要的产品、服务或信息，页面需要清晰的提示用户“您在这里！”

最重要的提示就是关键字。当用户在搜索栏里键入一串关键字进行搜索后，他们希望自己的关键字出现在搜索结果里——这也就是为什么页面的Title-Tags和Meta-Tag Descriptions很重要的原因。当他们继续点进一条搜索结果的连接后，他们希望看到同样的关键字出现在他们进入的页面里。

关键字可以出现在页面的任何地方。HTML中的Title-Tags内容会显示在浏览器的标题栏里，但是用户并不太注意这个地方。他们的注意力一般集中在屏幕的中上部位，离显示器顶端3或4英寸的地方。页面内容的标题一般就在那里，定位的链接也经常在那里，虽然用户不一定会使用它来导航这个网站，但是它对于建立页面的方位感和关键字焦点起着重要的作用。

有趣的是，当我们使用Jared Spool的8秒钟可用性测试的时候，我们发现，测试者通常能回忆起标题内容。我们把这个归结为是“屏幕位置的稳定性”——白色区域环绕着标题，同样的颜色、字体、字号，以下是我们在8秒中测试中问到的问题：

• 您看到了什么页面？
• 页面展示了什么内容？
• 您访问的网站是什么？
• 您访问了该网站的什么部分？
• 您能肯定您能在页面中找到您想要的信息吗？

在这些的问答过程中，我们发现，被试经常会提及一些反映了“您在这里”的信息：主标题，副标题，定位链接，全局导航元素和主要内容区域里的文字。如果在上述的位置里都包含了关键字，那么被试更有信心地认为这个页面里包含了他们要找的信息。

提供良好方位感，并将其应用到整个网站，增强可信度，也更加友好于搜索引擎。

提供页面的方位感

主观上，用户会怀疑商业搜索引擎的准确性。比如说，如果用户想要确定某个粉红色的方形丝绸头巾在一大堆在线商店的价格，她一般是要到显示着价钱和照片的页面上。

信息检索系统总是离完美很遥远，然而，多数内容发布者们并不懂得搜索引擎友好的重要性。为什么呢？因为他们从不登陆到那些包含了他们需要的信息的页面（比如说分类页面和FAQ页面）上。因此，在页面上提供信息线索，不仅会更加贴近销售，而且对信息检索也有好处。

为了提供一个有效信息线索，用户必须对网站导航感到满意。在导航元素（第一层或第二层导航条，定位链接，交换连接）中使用重要的关键字，是一个有效做法。在上述的8秒钟测试中，我们还问了以下的一些问题：

• 您想知道的信息在这个页面上吗？
• 如果不在，您将到哪里去找那些信息呢？
• 您怎样到那里去呢？
• 您访问了什么页面？您没有访问什么页面？您根据什么决定是否访问或不访问这些页面呢？
• 您是怎样访问您之前访问过的页面的呢？
• 在您点击链接后，您对您能找到您想要的信息的信息有多大？
• 当您点击连接后，您是否找到了您想要的信息？

提供一个以关键字为焦点的信息线索可以使一个网站做到对搜索引擎友好，同时也对用户友好。

结论

SEO和网站的可用性（易用性）并不是矛盾的。通过分析和理解目标用户的搜索习惯和他们使用的关键字，并把分析的结果应用到你的网站上，你的网站必然是对于任何人的体验都有利的：交易、前景、用户和搜索引擎。

http://blog.csdn.net/wuyanhuiyishi/archive/2006/12/05/1431233.aspx
http://www.clickz.com/showPage.html?page=3623498

原文 http://acfic.com.cn/dihtpage/c-pr2.htm

1. 阅读行为
2. 阅读过程
3. 主体与陪衬区分开来
4. 色彩使用
5. 色彩心理学、色彩表现力、色彩使用
6. 行的宽度
7. 线与框
8. 照片是杂志的灵魂
9. 栏的数量和设计可能

阅读行为

Poynter(P)媒体研究所于1990年发表的调研结果和Kuepper(K)通过类似试验于1989年发表的调研结果：

注意力的层次/阅读吸收的层次

• 照片和信息图表（黑白或四种色彩）（K：80％的读者）
• 照片说明
• 通栏标题
• 引言、内容提要
• 中间标题

不太被注意的内容

• 报纸上方的版面主题（先注意付标题，然后注意主标题：K:9.3%的读者）
• 第一版上的第一篇文章（P:4%的读者）
• 页面打摺下方开始的文章（P:4%的读者）

特别被注意的内容

• 在介绍报道文章标题页上：“Promos”（简短的内容注释）（P:67-80%的读者注意）
• 短讯（P:50-90%的读者注意）

阅读顺序

• 从前往后读：K:53-57%的读者。这些读者通常先注意报纸的左面。
• 从后往前读：K:20%的读者。这些读者通常先看报纸的右面。

注意整个页面

读者更多地把双页当成印刷媒体的一个整体。

• 阅读是一项费力的工作。排版的任务就是要减轻接受信息时的工作量。
• 读者在接触印刷媒体(一篇文章)时就像一只母鸡追寻一条从一粒米（阅读吸引力(阅读辅助）到下一粒米的道路一样。编辑的稿件、文章要经常不断地用“开胃品”来点缀，以“抓住”读者。
• 要严格地用“开胃品”引路，以最终得到清晰明了的结果。（反无计划、反忙乱、反无条理）

阅读过程

读者读什么文章？怎么读？

读者类型：初学阅读者、熟练阅读者、阅读专家。

• 顺行阅读（比如小说），逐词逐词、逐句逐句、逐行逐行、逐页逐页。
• 收集信息的阅读（比如专题专业书刊、报纸文章），断断续续的阅读，浏览，在文字中来回跳跃。
• 简短的文字段落
• 清晰的、分章节的标题
• 多分直行安排文字，加照片、插图
• 查阅式阅读（比如参阅资料中的词目、脚注），寻找式阅读（寻找信息）。
• 清楚的划分
• 少量的行距
• 可以使用小字体
• 选择性阅读（比如表格、问讯目录册、说明书），选择式阅读（在一页上众多的、相互竞争的阅读内容中进行选择）。
• 文字各部分相互衬托
• 清楚归纳
• 彩色为底色
• 镶边
• 字体分类

主体与陪衬区分开来

最重要的设计原则

每一个注意力都最初产生在一个事物同另一个事物的区别之中。非重要的（陪衬）与重要的（主体）区别开来

陪衬	主体
没成形的	成形的
不受限制的	受限制的
松散的	固定的
不确定的	确定的
退缩的	显露的
没设计的	具体的、显眼的

阐述解释从来都是主观的

观察者同他接触的东西建立其个人的关系，有些关系本不是设计者预期的，甚至有些关系与设计者的目的恰恰相反。关于在具体情况下真正进行的信息加工和筛选过程只有通过实际测验才能得出正确的解释。

设计与调动注意力相关，与反差相关

正反相互对比更进一步提高其作用。

亮	黑
大	小
宽	窄
长	短
水平	垂直

色彩使用

要有意识地使用色彩，要能说明色彩使用的理由，色彩可以起到：

• 整理排列作用
• 分类作用
• 引导作用
• 修饰作用
• 转移注意力的作用
• 掩饰作用
• 使人迷惘的作用

人们希望在印刷媒体的一定范畴里使用相应的色彩。人们既可以依附、又可以突破色彩使用。

青年杂志	花哨－鲜艳
小市民刊物	花哨－趋于传统
大众杂志	鲜艳－色彩趋于弱化
专刊杂志	从花哨－鲜艳
经济杂志	鲜艳－色彩趋于弱化
专业杂志	彩色到黑白
信息刊物，通讯报道	趋于黑白（复印件）

色彩心理学、色彩表现力、色彩使用

人们对颜色的反应和对色彩的体验相关，在我们注意色彩的时候就会想起这些体验。

颜色和颜色的作用

• 心理作用（引起无意的反应和联系）
• 象征作用（比如上千年的流传）
• 文化作用（不同的生活方式制约不同的色彩效果）
• 政治作用（在这方面色彩具有特殊的象征力：比如徽章和旗子的颜色象征着政治权力和宗教权力）
• 传统作用（不真实的色彩效果通常让人想起提取颜色和印染的传统方式）
• 独创作用（色彩产生新作用）

相近与相距

色彩可以制造远近幻觉。

颜色越暖，感觉越近；颜色越冷，感觉越远。色调越重，感觉越近，色调越淡，感觉越远。

创造性用色的标准

创造力也表现为有勇气突破现有惯例。要想使独特的配色得到认可，配色一定要达到三个标准：

• 配色要符合实际情况（红色：警告；绿色：“正常”）
• 配色要符合实物（对色彩越熟，配色越容易与实物相符；比如蓝色的黄油(令人恶心)
• 配色要符合消费要求（用特殊颜色表现便宜的产品比表现昂贵的产品容易得到认可；用特殊颜色多表现寿命短的、而不是寿命长的产品；用不寻常的色彩表现与人密切相关的产品得不到认可。）

行的宽度

• 七至十个词（50至65个字母）一行为视觉最佳范围，超过这个范围会使读者疲劳。虽然行间空白大可以减轻这种疲劳，但还是最好避免字行过长。
• 如果行较短，文章像报载登载的分很多自然段，就会对眼睛有帮助。
• 如果字体太小句子行太宽，就很影响易读性。行间空白大一些可以使效果好一点。
• 字母少的行容易阅读。
• 过于窄的直行不容易阅读。最多可在段落短的情况下采用。
• 特别是左右两边都对齐的文章不容易读。

缩格

• 在开始一个新的段落时，常规的方法是第一行缩格。
• 如果一篇文章左边缩格太多，前后的竖行就都显得很乱。在这种情况下如果段落之间留出一行或一行半的距离，效果会好一些。
• 在文章中间标题之后和一章的开始，段落开始不需要缩格。

每个段落第一行缩格最适合前后竖行对齐的文章，段落之间留半个或一个空行比较适合后面竖行不对齐的文章。

线与框

线和框要能引导读者，因此要有意识地、慎重地和有节制地使用线和框！

线和框可以

• 分离。一条围住文章的线可以把这篇文章同别的文章分隔开来，以便分开阅读。框和文章之间的距离最少保持两毫米，最多四毫米。框里的文章字体比框外的主要文章小一号。
• 连接。在两条直行之间的线可以连接它下面的直行。
• 突出。标题下面或文章里面划一条线可以突出线上内容。划的线不能短于句子本身的长度。

使用线和框时注意

• 把多个小框安排在一个地方（不杂乱！）
• 把文字直行中的框合理地安排在文字里。
• 线条使用中包含光栅和阴影的使用，因容易产生混乱所以要特别控制使用（混乱！）。

照片是杂志的灵魂

使用照片的基本原则

• 照片切边处理。几乎没有哪张照片不经过剪切就可以上版。
• 照片的选择和剪切取决于究竟谁或什么重要。避免不突出重点的照片；“突出主题”是较好的办法（集中在最重要的内容上）。
• 人物照片慎重处理：不在膝盖下剪切；不削掉头部；保证面部吸引力，避免护照像，最好选择活跃场景；肖像、半身像或全身像
• 宁用少量大张照片，不用许多小张照片。相片越大越引人注意。体现特殊的崭新的表现手法。
• 基本设计原则同样适用于在一页上多张照片的组合：主体和陪衬区分开来（哪个是主要题材，哪个是辅助内容？）反差：大小对比，横竖对比，敞开式封闭式照片对比使用，不是要搞得杂乱无章，而是要达到结构上的变换。

关于刊登发表照片的法律规定

刊登某人相片要经过本人同意。在有争议的情况下，如果拍照对象因同意拍照获取了报酬，判拍照已经本人同意（一个马克也算数）。拍照对象的相片在本人去世后十年内均要经其家属同意才可刊登发表（配偶、孩子或父母）。在不损害拍照对象合法利益的情况下，

• 刊登涉及当代史的照片（比如公众心目中的人物），
• 刊登人物只作为风景或地方陪衬的照片，
• 刊登有表现对象参加的集会、游行或同类活动的照片，
• 刊登非订照的、为艺术服务的照片（参照艺术版权法第23条）

不要求得到本人同意。照片不许违背好的社会道德。但人们随心所欲地解释这个规则（Paparazzi（偷拍名人照片的记者）拍的照片或讽刺杂志里的照片就反映出这个特点）。

如果违反上述规定发表传播照片，可以得到至一年的监禁惩罚。

照片取材

全景	近景
客体	主体
实事求是，但没意思	强烈，因而影响强
效果小	效果大

最佳的照片取材界于全景和近景之间。

现代报纸注重处理好照片，尽量选择少量照片，以便采用大照片。精确取材、同时取材同文章内容及版面大小相符可以引起读者的高度注意。

示意图是图画

示意图可以：

• 报道（信息图解〕）（补充文章或替代文字），
• 分类（图示）（减轻眼睛负担、帮助读者阅读的直观内容），
• 消遣、刻划细微区别（卡通），
• 修饰（平静与不平静效果）（减轻眼睛负担、帮助读者阅读的直观内容），
• 使人迷惘（自我表现）（“我可以用我的绘图表现一切！我是艺术家！”）

在排版时处理示意图和照片一样，一个示意图比一千个字反映的内容还多。信息图解可以帮助理解本来需要通过许多文字才可以解释清楚的内容，一个简单的示意图比根本没有强。

广告同处理照片和图解一样

• 尽量把广告集中在一起。这个做法不使做广告的公司满意，但使读者、编辑和版面设计满意。
• 广告不放在版面上方，而放在下方。（不太防碍阅读内容，不成为“障碍”，把沉重的内容放在该放的地方，即版面下方。）
• 不把广告登在已登有企业宣传文章的双页上。（法律上不允许！）
• 一个广告排在一页上的左面还是右面效果都一样。（人们既从前往后，又从后往前阅读，其目光相应落在右边或左边。广告与相片和图解一样自然而然地吸引读者的注意。）
• 尽量避免把整页广告排在占了多版的文章里面。（破坏文章的整体性。）
• 广告排版好的话可以挽救当页本来不好的效果。
• 广告排版不好会破坏本来不错的版面。

栏的数量和设计可能

对所有印刷媒体适用：把每页都当双页对待。

• 书刊，如果纸面大（比如8开的纸），文章通篇下来不容易阅读（行太长）。
• 一栏，句子窄，边留的宽可以产生好的视觉效果，可以利用宽边分段（旁注、标题、小插图）。
• 两栏，如果不（通过中间标题）分段的话，显得很枯燥。缺少活力。版心上方下移可以增加动态感。
• 三栏，行窄容易读（如果直行特别窄，左边字要对齐）。为非常富有活力的版面设计提供了可能性。为了避免杂乱，一定要使用水平设计。特别为凉衣绳式的版面设计提供了可能性：上面对齐、下面对齐。

分栏实例：文章上方栏与栏之间没有分隔线，下方带一条分隔线。带分隔线的两个栏的距离大约比不带分隔线的两个栏的距离大50％。

来源 http://dev.csdn.net/article/72/72777.shtm

1. 输入控件的自动聚焦和可用键盘切换输入焦点

使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB键（IE缺省实现）或方向键切换聚焦到下一个输入控件。

2. 可用Enter（或Ctrl＋Enter）键提交，确保和点击提交按钮的效果是相同的

不要在提交按钮上加入onClick=”…”这样的JavaScript代码。

3．鼠标动作提示和回应

对用户的鼠标定位操作，当移动到可响应的位置上时，应给予视觉或听觉的提示。

4．尽可能早的在客户端完成输入数据合法性验证

输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成，否则验证工作应在最早能完成的情况下进行。

5．根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面

根据应用场景，决定是否显示接收表单页面（表单页面和提交后返回页面间的中间过渡页面），以及使用何种方式显示接收表单页面。

6．防止表单重复提交处理

对提交按钮点击后做变灰处理避免在网络响应较慢情况下用户重复提交同一个表单。使用页面过期失效避免用户后退浏览重复提交表单。

7．页面链接是打开新窗口、使用原窗口还是弹出窗口的原则

一般而言，首页上链接可以使用target=”_blank”属性打开新窗口，而其他页面上的链接都应使用原窗口或弹出窗口。如果链接页面内容相对原页面来说不重要，是附属性质的，可以使用弹出窗口方式。

8．尽可能少的排列可选项，尽可能少的安排操作步骤

根据用户操作习惯安排尽可能少的操作菜单选项，同时要保证尽可能少的操作步骤。

9．操作逻辑无漏洞，保证数据是操作安全的

多个页面间的操作和同个页面上的多个操作间的逻辑关系在设计上是安全和严谨的。保证不会出现不被允许的用户操作组合，至少不会因为用户的不适当的操作导致出错。