本书讲了什么

本书探索出了设计研发的设计基础以及个体视觉设计要素。诸如颇色、图像、排版以及布局。伴随着交互设计本身，本书结构融合了逻辑过程及创造性努力。

作者什么来头

Jamie Steane，国际知名交互设计专家。

01交互研究

理解简报好的简报要明确表达项目的目标、要求、目标用户、时间量程、预算，以及成功的衡量标准。好的简报也应提供相关背景信息并解释其在哪里适合更为宽广的设计策略。当阅读一份简报，要在三个关键调研区域寻找引导：项目内容、焦点及流程。

项目内容是关于客户业务的背景调研，也许会包括他们的历史、竞争对手及当前和未来在该行业的发展趋势。项目焦点是项目的特定目标及其一些特殊需求。项目流程是适用于会达到项目目标的调研方法及策略。

市场调研

背景调查，是对你的客户、行业及经竞争对手的文化、文章、报告等的综合研究。这是为了使你熟悉你的客户、历史以及市场定位。它同时防止了提出已经尝试过的方案。

问卷及调查报告。问卷和调查报告的区别在于谁填写的表格。参与者填写问卷调查，而询问参与者的调研人员填写调查报告。

品牌模型（矩阵），是一种反应市场调查的重要形象化方法。品牌模型本质上允许设计师和他们的客户设想出品牌在竞争中的品牌价值。模型的坐标轴为两点重要的标准，并标注到合适的范围。可视化其相关价值，品牌与其竞争者被标注于模型上。特殊性是一个品牌的最为理想的市场品质，哪些在模型中同一区域过于靠近的品牌将遭遇最强的竞争。/*让用户确定各品牌在矩阵中的位置*/

竞争对手分析。选择4~6种竞品，选择一些标准来评判它们。记录它们的优势和弱点，这项评判会为你提供参考。

网络分析，是关于用户对网站访问的统计信息。/*数据分析，不详述*/

用户研究

用户研究方法需要对存在以及假想用户的用户需求及行为进行细致的调查分析。

焦点人群，即焦点小组，收集他们对产品的想法、喜好等。

角色模型，是为了表现一种产品目标受众中不同类型用户的虚拟人物。能够帮助设计师设想其决定设计特点、用户体验和内容的受众。

情境，通常是交给一个角色模型的特定任务，它详细描述了他们体验的各个阶段，为你的设计需求提出了有价值的建议。

文化调查，是一种信息采集工具，参与者自行记录索要调查的设计问题，其目标是搜集足够数量的信息为设计提供灵感。

视觉研究

文化狩猎，是指设计者于特定时间，在特定文化狩猎区选取地点来收集第一手调查信息。其目的是使设计者融入研究地点，洞察出设计中存在的问题并获取解决问题的灵感。信息采集可使用与文化探索相同的方法，如写日记，记笔记，照相，记录声音和即兴采访。

素描本和博客，在记录笔记、收集参考资料、保留原始想法方面，传统的素描仍是最简单可行的研究和开发方法。它不仅可以作为参考，也有助于扩展我们的想法。然后把素描稿上传到博客上与人交流分享。

分享灵感。得益于一些列作品站点，现在比以往更易于追踪和分享灵感的来源。

心情看板桌面，手机并将有启发性的照片数字化，参考你从书本、杂志、网络及其它来源的材料进行。将你的图片在电脑上组织成不同主题的文件夹，例如色彩、图形、排版和布局。或者分成更多专业的分类，例如受众、品牌语言、艺术方向等。用PS或AI创建一个与桌面大小相同的文件，并将你的数字化图片安置在图层上以创建你的心情看板。

02设计开发

概念思考

概念患考是在面对一个既定状况和问题时获得想法与选择合适策略的能力。概念思考力图通过严格评估而产生问题解决想法。并由此理解当前状况，认定重要的潜在问题。下面是常见的方法：

头脑风暴，想法写在便签上，往墙上狂贴就好。

思维导图，将词汇和想法连接的可视化制图方法。

要是…又怎样？通过挑战既有现状来产生新想法。

做关联。把包含在项目中的不同因素关联能够为一项产品产生新的想法。具体来讲就是通过在每项不同的因素中选择一个种类，然后整合它们。如：教育+25~34岁+平台型游戏+智能手机=“一种面向想要通过手机词汇和组织句子来升级的年轻专业用户，致力于语言学习的休闲游戏”。或者，你也许想以更少的因素开始，例如人类需求+媒介。

信息组织

当开发一个现有的交互产品或者服务时(例如一个网站)，深入洞悉该网站当前的性能和局限至关重要。这会帮助设计师或资深信息架构师更好地理解用户对一个网站的内容与功能的预期。方法如下：

分类，内容必须整理成所有种类的形式、如文本、图片、视频和音频，同时也可以细分为合理的信息层级结构，例如标题、子标题、摘要等。内容不能与网站的功能混淆。

卡片分类，一种能够让用户以有益于他们的方式分类、分组并组织网站内容的活动。活动通常鼓励参与者将更多的内容和功能的想法写在明显的、贴有便利贴的笔记上，因为它能够帮助信息架构师对参与者关于网站的推理与期待有更深远的理解。这项活动要由一定数量的、代表产品或服务的目标受众的参与者反复进行。

站点地图与任务流程

在网站和交互应用的设计中站点地图的制作是一项重要任务，因为它可以让客户和设计开发团队从高层次的视角来看待标签、导肮系统等的内容结构。任务流程代表着个别任务如登录和搜索功能等的关键步骤和决策内容，在执行时可以不必离开当前页面。

导航系统

一旦确定了内容、网页的组织和主要功能的任务流程，设计师就要决定合适的导航系统了。导航系统可以通过浏览和搜索帮助用户找到有用的内容，也可以通过一系列的页面和任务为用户定向，并在特定的页面内提供逻辑性的层级和内容顺序。网站、应用会有全局导航和区域导航。全局导航指的是在一致的位置一致存在的按钮连接等，区域导航特指针对所选内容的导航。

设计可学性界面

由于数字世界不受物理现实的限制，所以设计师们有机会创造出满足特定目的的新型的用户界面，而不用简单地镜像已有的设计规约。但数字空间的用户耐心缺乏，环境鼓励交互和速度，用户特别习惯于使用熟悉和直觉的、而非需要推理的实验性界面。但是设计易于学习的界面是一项很难掌握的技术。常见方法：

吸引的力量，有吸引力的界面被认为更加友好。

承担物和隐喻的使用，能够基于先前的使用体验给出使用线索的界面就是承担物的概念。

惯用语，无需隐喻或先验的知识、使用自然的语言就能帮助用户了解如何使用界面。

创建原型和线框图

原型的创建涉及三个领域的交叉一一信息结构、用户为中心的设计和平面设计。它们的目的是为了对应用或网站的内容、功能和布局进行模拟与测试。原型过程是一种迭代过程，随着每一个通过的项目阶段会变得更加复杂。原型方法;

纸质原型。进行纸质线框图测试需要两个人，一个人按下按钮或选择一个条目时，另一个人将展示出对方要被带入的地方。这种方法的优点是方便、快速。

低保真原型。一旦最初的问题通过纸质原型得到消除，就可以建立低保真原型。这个阶段的测试主要集中在确保功能和内容正确显示在屏幕上。

高保真原型。要包含真实的内容和精细的图形。

视频原型。使用动画和后期制作效果的高度完善的、能够让概念更加真实的视频原型通常被广泛的用于提升概念和获得来自客户的认同。

故事版和样片

故事板是一种高度有效的传达概念和讲述故事的手段，广泛用于从电视场片头到交互项目的设计应用中。主要起预生产的作用，让设计师阐述设计观念以取得客户的认同，在动画、视频或用户体验制作前职得创意团队的相互理解。

故事板。可以用笔和纸或者数字软件，抑或它们额结合来制作。与原型类似，细节的层次很大程度依赖于内容索要传达给的对象。共享概念的时候基础草图就够了，在传达真实场景和情绪的细节时就需要绘制更深入的图了。故事版是一种传达创意的手段，一个好的故事版会澄清意图，节省时间和成本。

样片。样片就是故事版图像，或者在视频编辑软件中与样本音乐一起带来更好的时序感和创意意图的、更精致的静态视觉要素。

反馈和用户测试

设计反馈应该在开发第一次原型的时候就尽早进行，并以开发和反馈周期的形式持续进行，直到项目完成。反馈可以采取多种形式，从简单的设计师与客户讨论到更复杂的包括人群聚焦和事件调查等多种方法。用户测试也是一种反馈的形式，用于需要用户执行某种任务来找出产品或服务中遇到问题的部分，如微波炉的程序或者网站的导航等。

进行简单的用户测试。选取五六名参与者，给没人一份任务单并用原型操作，记录他们在操作中遇到的问题。鼓励参与者说出他们的动作和思考过程，这样你可以理解他们决策背后的思考方法。

进行更复杂的启发式的评价。启发式评价会需要被称为“评价者”的一个小组的参与者来找出可用性问题。评价者通常是类似产品的有经验的用户，他们决定自己的任务，并依据尼尔森交互原则来进行评价。

尼尔森十项可用性原则

01设计要简练。设计应该是有吸引力和减少主义的，用户在功能选择和内容获取时不会受到过度复杂和过剩的设计干扰。

02使用熟悉的语言和规则。设计要使用口语和视觉语言，规约应该为用户群熟知和感到放心。用户体验应该是直觉的，并受信息和过程逻辑顺序的激励。

03设计要一致。设计中所用的语言和规约要一致。与其他设计的语言和规约相似度及一致性越高，用户就会越快速、容易的熟悉设计。

04设计要可视。设计的动作、目标和选项要始终可视，这样可以减少用户的记忆需要。“帮助”特征要随时能够找到。

05反馈要可视。设计要能够就随时的时间和适当的反馈为用户提供经常性的告知。

06设计要能提供控制。设计要能够使用户对功能完全控制。能够取消动作，在用户决定不再继续操作的时候提供简单的退出功能。

07设计要提供快捷方式。设计既要为专家级用户提供快捷方式，又不能使触及用户感到困扰。在可能的时候可以让用户自定义常用动作。

08避免出错。设计要尽量减少用户出错的机会，至少可以让用户对所被要求做的动作进行确认，对所做的选择进行二次思考。

09出错报告。设计应该用清晰和可理解的语言对出错进行报告，以帮助用户接错误是怎样以及为什么发生的，并对索要做的进行确认。

10提供帮助。设计对用户应该是直觉得，如果可能应该减少用户为了理解导航等而对阅读手册的需要。需要帮助的时候，应该可以通过相关搜索的奥，并容易遵循。

03色彩和图像

色彩意义和心理

色彩能给我们带来强烈的情感，从扩张的红色、阴郁的灰色和秋天的色调到冷静的蓝色无不如此。我们可以用无数方法从色彩中找到意义，从与自然的联系到人为的与历史和文化的联想不一而足。数字化设计通常面对全球受众，所以理解对色彩的诠释非常重要，不同国家和文化背景的人对色彩的感受是不同的。

技术细节中的色彩

设计师使用两种色彩模型：RGB（红黄蓝）、CMYK（青色、洋红、黄和黑）。RGB是一个加色系统，加入的颜色越多，所得色彩就会越亮。CMYK是一个减色系统，加入的色彩越多，所得色彩就会越暗。黑色用于青色、洋红、黄的补充，因为仅靠它们混合在一起无法创建出真正的黑色。自然而然的，RGB用于基于屏幕的设计，CMYK用于印刷。

使用色彩系统

色彩能够组织和调和信息及图形元素。在色环知识的基础上应用色彩可以使设计平衡、和谐和有序。基本色彩方案：

单色方案，是一种颜色加上中性色创建出来的。单色方案很协调，也容易看清楚，但不足之处是区域感比较弱。

近似色方案，是色环上相邻的颜色。近似色方案会取得和谐，也能得到强调或区域的效果。

补色方案，是在色环上相对的颜色。有强调的特性，最适用于突出强调色彩的情况下。

图像编码和解码符号或图像的意义取决于图像本身、组织方式和存在的语境。基本概念：

文字、类比和隐喻。符号有文字性、类比和隐喻性，可以帮助我们衍生意义。

能指和所指。符号由此两要素组成，如果我们看见汽车图标，能指就是“汽车”这个词，所指就是指汽车的图像。

图标、指示性符号和象征符号。图标是图像或理念的文字表示物（汽车图像）。指示符号表示意义（轮胎印代表汽车）。象征符号是图像或理念的抽象标示物（书写的“汽车”）。

开放和闭合文本。没有说明的图像可以看做是开放的文本，可以对其进行开放性的诠释；而给定了说明的图像则是闭合文本，因为它们的意义已经给读者指定了。

图像准备

静态网页有图像有三种常用文件格式：GIF、JPEG和PNG，GIF和PNG用于标志等图形元素，因为有清晰边界的平涂色彩对它们很重要。JPEG一般用于照片文件。作为一般的原则，网页页面的图像要以精确的尺寸制作而不通过页面代码进行缩放。这是为了帮助把页面尺寸降到最低。

使用图片库

没什么好说的。

Agencyrush.com

Eyemade.com

04数字排印

基础知识

字形（typeface），指一种或多种字体套系有着共同的式样一致性，是字体的一部分。

字体（font），有着特性字形和尺寸的字符集。

字体的测量，字体的尺寸是通过字母最低的下出头到最高的上出头部分来衡量的。

倾角，指圆形字母细刻线的角度。

连字，是将两个或更多的字符连接起来而形成的一种字形。

分类与选择

选择字体不是任意的，它要根据使用价值和历史的内在联系来进行：衬线字体，适用书籍和报纸；无衬线字体，主要用于导视和信息图及屏幕；粗衬线字体，不适合阅读很少使用；手写体，表现与字母相关的人或时代特征；显示字体，传达提示性信息；符号字体，常用来修饰文本；非细纹字体，描述不是基于罗马字母的字体的术语。

/*各种字体相关概念，看不进去，略*/

05网格和布局

构成原则

平衡，指的是要素在页面上的位置和分布。获得平衡时会有和谐稳定的构成效果。当元素围绕某一点形成一个连贯形状的时候我们的思维会将这些毫不相干的元素看成对称的。

形状和空间，当形状不是一个整体的时候我们的思维会将空隙填充，将其知觉为完整的整体，这就是闭合法则。近似法则是指我们的思维会将近似的形状知觉为一组或一个模式。

尺寸和比例，较大的元素比较小的元素更能吸引我们的注意力，所以要对其重点处理。

定位和布局，我们倾向于把临近的元素知觉为一组（近似法则），人们习惯于从左上到右下的浏览。

颜色和对比，较高纯度、色相和明度的颜色一般会比灰暗的色调更重要。颜色也可以用来区分要素间的相似性和差别。

黄金分割，a+b的值等于a比b的值。

三分法则，在构图中用两条水平线和两条垂直线将画面分成9等分，将最重要的元素放在交点上，这样能够创造出动感和最具吸引力的效果。

什么是网格

网格是支撑内容传达设计的骨骼结构。设计良好的网站或应用的网格结构是为最终用户不可见的。在使用、确认访问站点或者下载应用的过程中会带来固有的效率，还可能带来愉悦。网格系统会为网站带来视觉的一致性，并有助于组织页面要素。还可以通过建立信息的视觉层级来帮助重要信息凸显出来。

网页内容布局

基本原则：布局左上角应带有网站标识的清晰的导航，左侧应该有全局导航和本地导航。引导用户至需要找的内容并确保重要内容放置在顶部附近，用户不必滚动来寻找必要的内容。Z布局：鼓励用户在网站形象、导航结构和高层及的内容中在最终依赖动作调用前以Z形路径阅读网页。F布局：尼尔森的试验支出用户扫视信息时是以F型的方式进行的，重要的信息应该被放置在或者临近已创建的路径处。

06交互格式

网页发布

响应式和适应性的网站设计意味着要创建多种能够适应各种浏览器窗口尺寸或视窗版本的标志、按钮、标语和图像。

在线广告和标语格式

标语广告必须快速发挥作用，普通用户在网页上一般只会花几秒钟的时间，所以理想状态下，广告要能够在5秒之内将信息传递出去，视频广告要在15秒内传达。所以广告的尺寸、位置和语境变得至关重要，紧邻有着强烈“动作调用”效果内容的位置放置广告可以吸引绝大多数注意力，交互广告最令人难忘，为用户自定义的广告最为持久。

游戏

儿童游戏设计要考虑：读写能力、视觉承担物和体验。如果交互或者导航不够清晰，儿童会通过点击或触摸来激发响应；沉浸式游戏，为图形用户界面要素的存在创造一种貌似合理的假设是处于现实前提下的游戏叙事的整合；休闲游戏，必须有清晰的目标和规则，用户界面必须有即时的本能吸引、易学易用。

好的游戏用户界面

01做玩家希望做的；

02对玩家的动作提供积极确认；

03给玩家提供即时的相关信息；

04避免混乱，没有非必要或障碍性的元素；

05图标与所代表的事物有明确的联系；

06只有在必要的时候可见；

07状态图标使用通常的用法，如心脏表示健康状况；

08能随着游戏的进行产生改变或进化；

09避免将用户界面要素放在屏幕中用玩家手指能够隐藏的区域；

10要注意触屏输入不是很精确，要有大一些的活动区域。

交互电视

互联网电视(IPTV)是一种通过网络来传输电视直播和视频点播服务的系统。IPTV要认真考虑用户体验模式—清晰、一致是成功设计的关键。IPTV没有光标，所以用户要用通过颜色和图形来强调的电视遥控器进行导航。每一个交互元素需要有三种按扭状态来向用户展示所导航和选择的内容:非亮显、亮显、亮显并按压状态。要对信息渐进式展现，这样观众在理解附加信息或者进一步选择时才能持续观看。尽量减少输入。

07创意发表

交互项目的创意能力很容易被无效的创愈发表和拙劣的传达破坏掉。对于那些通过设计作品自信地传达产品成服务价值的设计师来说在发表过程中的不确定或沉默赛言也很常见。在完成项目时很容易变得自满，忽略通过作品集网站提升本身的价值。作为设计师我们对这些潜在的缺点不应有任何借口，因为我们有对有效的传达及创意发表的知识的理解和实践技能。

发表准备

进行发表准备时，问自己：发表的目的是什么？要对谁汇报？他们的期望是什么？在哪里汇报？用什么进行汇报？发表应该令人敬畏，不要对将要发表的内容进行事先致歉，设计师都倾向于盯着自己作品的短处，不要在压力下产生自我怀疑。自信并捍卫你的作品，礼貌的接受建设性的批评，不要自主的关注自己的缺点，否则无助于推销你的概念，也不会让客户对首先雇佣你的想法感到放心。

数字式发表

保持视觉语言的一致性，不要逐字阅读屏幕内容，Keynote和PowerPoint是常用的发表工具。当分享数字发表时，为确保正常运行、字体不会替换，使用PDF会比较安全。

实体发表

将要发表的内容打印、进行分类、贴标签、早期的概念产生以及开发过程等都要放在有一个大的墙面的房间等物理环境中实现。工作内容以水平方式、时间顺序展示出来，这样设计师的思想、技术、开发过程中的决策，都能被用户一览无余的看到，能感受到整个创意过程，进而更好的理解你发表的内容。

创建宣传册

宣传册是设计师重要的宣传工具。它司以展示我们的专业性和经验，也向容户展示我们的工作过程。个人设计师和设计工作室的宣传册之间有些微小但很重要的区别。为了给雇佣他的设计师或设计机构留下深刻印象，个人设计师的宣传册主要展示个人的技术和工作方法，而设计工作室或设计机构的宣传册则集中给未来客户表现其能力和声誉。/*电子版和实体版*/

如何组织项目内容？每个项目开始都有一个覆盖设定问题、解决方案和设计结果的文本阐述。撰写一份用户初始问题、挑战和机会的精炼的概览，可以采用客户简报总结的方式，应该有一个对解决方案、所做细节、图和做以及为何而坐的简短描述。结果表现的是在满足客户需求—可以增加销量、增强客户的服务意识、改进的产品表现—的过程中涉及的有效性。

08结论

给出了几十个设计相关网站，略。