交互设计人体工程学.ppt

1、视觉传达设计与人机工程学1第一节 文字设计2一、文字的尺寸视觉传达文字的合理尺寸，涉及的主要因素有：观看距离（视距）;光照度；字符的清晰度、可辨性；要求识别的速度快慢等。其中清晰度、可辨性又与字体、笔画粗细、文字与背景的色彩搭配对比等有关。3在以下三方面的“一般条件”下，中等光照度；字符基本清晰（不要求清晰度很高，也非模糊不清）；稍作定睛凝视即可看清，人机学给出的基本数据是：字符的（高度）尺寸（1/200）视距（1/300）视距通常情况下可取其中间值，则有字符的（高度）尺寸=视距/2504据此，视距艺与字符高度尺寸 D 的关系如表 7 一 1。如果能“看得清”还不够，还要求醒目、能引起注意，则

2、字符尺寸需要适当加大。5课堂作业 门上需要贴一张更换教室通知，则需要用多大的字体。6l观测人到门的距离l计算字符高度l换算到相应字体7例 1 确定地铁车厢内运行线路图上站名文字的大小。分析解决：1）地铁车厢内光照条件属于“一般“,，观看时多较为专注，无特殊醒目性要求，总体符合上述“一般条件”，可参照表 7 一 1 的数据，如能略略加大更好。2）座位上乘客能看清对面车厢壁上的线路图文字，视距约为 L 2m，由表 7 一 1 查得文字尺寸为：D 8mm。3）如无其他条件的限制，若将文字尺寸略微加大一些，如取 D 9mm，视觉效果当更佳。8l 例 2 邮局、储蓄所等室内，墙上告示的文字该多大？分析解

3、决告示文字都是清晰的，人们多在此驻足观看而非匆匆一瞥，这两个条件均较优越。视距可设定为L1.5m。因此可根据告示处的三种光照条件分别确定文字尺寸：1）有专设的局部照明，可取 D L300=(1500/300)mm=5mm。2）无专设的局部照明，但光照情况不错，可取 D L250=(1500/250)mm=6mm。3）贴告示处光线灰暗，可取 D L 200=(1500/200)mm=7.5mm。9分析解决（1）条件分析：室外路牌，白天光照强，夜晚有荧光，光照条件好。路牌的字体、色彩对比等有国家标准，确保其高清晰度和高可辨性。字数少，内容简单，匆匆一瞥就能获取全部信息。但出口指示牌的醒目性要求很高

4、，综合考虑文字尺寸 D 对于视距L应取较大的比例，例如 D L200。例 3 确定高速公路出口指示牌上文字（如“花果山出口”）的尺寸。2）视距分析驾车者对于路牌的视距，可考虑由两部分组成：静态视距口车在路中而路牌在路旁，驾车中脸面不可能侧转太大的角度去看路牌，现把驾车者能方便观看路牌时在行进方向上的距离称为静态视距 L1，并初步设取 L1 10m，见图 7 一 1。1011l 在驾车中能注意到路牌，需要一段时间；设这段时间内汽车行进的距离为L2。多数驾车者会在多长时间内注意看这个路牌？这是本问题中的关键数据。若没有可靠的资料可查，应通过实际测试取得这个数据。这里假设这个时间是 t=2s。并按高

5、速公路上的行驶速度为v=12Okm/h=33.3m/s 为准进行计算。在设定的 25 时间内汽车行经的距离为 Lvt=(33.3m/s)X 25=67m。视距L L1+L2=(10m+67m)=77m l 3）路牌上文字的尺寸 D L200=77/200 m=0.385m=385mm,实际可取 D=400mm。12l课堂投影的文字最小应该多大？13二、字体14字体的选择字体要求涉及到美感、动感、视觉冲击力、文化内涵、独特性、象征性、隐喻暗示等方面。但在人机学中，主要研究字体的可辨性、识别性。字体可辨性、识别性优劣的一般结论是：直线笔画和直角尖角的字形优干圆弧曲线笔画的字形，正体字优于斜体字。1

6、5校园的横幅、海报等都用的什么字体？16汉字字体汉字的识别性以仿宋体、黑体（等线体）为最佳，普通宋体也很好。长仿宋体多用于图纸上的标注与说明；普通宋体用于书籍报刊印刷，应用最广；而尺寸较大、要求识别性高的汉字，如路标路牌、车船航班表、大型包装物上的文字说明等，多用黑体字，是视觉传达设计中的主用字体之一，见图。1718拉丁字母和阿拉伯数字拉丁文字中大写字母的识别性优于小写；直体（正体）字母、直体数字的识别性优于斜体图 72b 是一些国家推荐的字母和数字的高识别性字体。19避免字形的混淆容易互相混淆的汉字有：“千、干、于”,“土、士”、“人、入”,“未、末”,汉字“土”和加减号“士”等。20视觉传

7、达设计中避免字形混淆的基本方法，是把互相间不太明显的差异，加以适当扩大、强调，使差异明显起来。示例见图 7-3、图 7-4。21字形的比例与排布221 汉字书报印刷虽然普遍采用正方形的宋体字，但视觉传达设计中，常根据版面版式、文字的横排竖排等因素来确定文字的高宽比。一般横排文字的竖高可大于横宽，而竖排文字的横宽宜大于竖高。按文字的识别性要求，汉字高宽比的适宜范围见表 7-2。（一）字符的高宽比例23l 横排字形高宽比 为1.0:0.8，竖排字形高宽比 0.8:1.0 时的字形见图 75。2425（二）字符的笔画粗细261 影响字符笔画粗细的因素 笔画少字形简单的字笔画应该粗；反之应该细。光照弱

8、时笔画需要粗，反之可以细。视距大字符小时笔画需要粗，反之可以细。浅色背景下深色的字笔画需要粗，反之可以细。较极端的情况：白底黑字需要更粗，黑底白字应该更细。更极端的情况：暗背景下发光发亮的字尤其应该细。27l如今火车站的告示、体育场上的记分牌、商业服务业的信息提示等，采用液晶显示（LCD）和发光二极管显示（LED)屏幕正越来越多，它们的笔画都应该充分地细。黑底白字笔画应该细，发光字的笔画应该更细，是源于“光渗效应”这种视觉生理现象，图 7 一 6。282 字符笔画宽度对字高比例的参考值由于影响笔画粗细的因素多，所以“笔画宽度比”的变动范围也相当大。汉字变动范围为：(1:5）一（1:18);字母

9、和阿拉伯数字变动范围为：(1:5）一（1:12）。在白底黑字与黑底白字两种情况下，笔画粗细的视觉效果对比见图 7 一 7。2930（三）字符的排布视觉传达中字符排布的一般人机学原则如下：从左到右的横向排列优先；必要时才采用从上到下的竖向排列；尽量避免斜向排列。行距：一般取字高的 50 一 100。字距（含字母和数字间的间距）：多笔画的宽度。拼音文字的词距：不小于字符高度的 50。若排布区域为竖长条形，且水平方向较窄容纳不下一个独立的表意单元（词汇、词汇连缀等），则汉字可以从上到下竖排，拼音文字应将水平横排作逆时针旋转90。的排布。同一个面板上，同类的说明文字遵循统一的排布格式。31四、字符与背

10、景的色彩及其搭配32字符与背景色彩及其搭配的一般人机学原则有：字符背景间的色彩明度差，应在蒙塞尔色系的2级以上。照度低于 10 lx 时，黑底白字与白底黑字的辨认性相近；照度 10 一 10Olx 时，黑底白字的辨认性较优，照度超过 100lx 时，白底黑字的辨认性较优。这里说的白色、黑色，可以分别扩展理解为高明度色彩、低明度色彩。字符主体色彩（而非背景色彩）的特性决定了视觉传达的效果。例如红、橙、黄是前进色、扩张色，蓝、绿、灰是后退色、收缩色，因此红色霓虹灯（交通灯、信号灯相同）的视觉感受比实际距离近，蓝、绿霓虹灯视觉感受相反。字符与背景的色彩搭配对视觉辨认性的影响较大，清晰的和模糊的色彩搭

11、配关系见表 7 一 3。公路交通上路牌、地名和各种标志所采用的色彩搭配，如黑黄、黄黑、蓝白、绿白等都属于清晰的搭配。33天气 照度LUX 室内场所 晴天 30000300000 生产车间 10500阴天 3000 办公室 3050日出日落 300 餐厅 1030月圆 0.30.03 走廊 510星光 0.00020.00002 停车场 15阴暗夜晚 0.0030.0007 3435图形符号及标志设计36图形符号及其应用领域图形符号是以图形或图象为主要特征的视觉符号，它用绘画、书写、印刷或其他方法制作，用来传递事物或概念对象的信息，而不依赖语言（摘自 GB 7093.1 一 1986)一、图形符

12、号设计37图形符号以直观、精练、简明、易懂的形象表达一定的涵义，传达信息，可使不同年龄、不同知识背景和不同国家、使用不同语言的人群都能够较快地理解，因此在经济、科技、社会生活中有重要的作用。图形符号的应用领域很广，例如：38图形符号设计的一般原则图形符号设计的一般原则l 内涵不过大，使人们能准确理解，不生歧义。内涵不过大，使人们能准确理解，不生歧义。l 构形简明，突出所表示对象主要和独特的属性。构形简明，突出所表示对象主要和独特的属性。l 构形醒目、清晰、易懂、易记、易辨、易制。构形醒目、清晰、易懂、易记、易辨、易制。l 边界明确、稳定。边界明确、稳定。l 尽量采用封闭轮廓的图形，以利于对目光

13、的吸引积聚。尽量采用封闭轮廓的图形，以利于对目光的吸引积聚。39403 图形符号的视认特征与繁简l 人机学对图形符号设计的要求主要是视认性，即能让人很快意识到它的人机学对图形符号设计的要求主要是视认性，即能让人很快意识到它的含义，不生歧义。为此，含义，不生歧义。为此，l 第一，要能突出表达出客体主要的、独特的属性；第一，要能突出表达出客体主要的、独特的属性；l 第二，要简明，以利于快速辨认、也是醒目、清晰、易懂、易记、易辨、第二，要简明，以利于快速辨认、也是醒目、清晰、易懂、易记、易辨、易制的关键。这两条容易理解，但要做好却不容易。易制的关键。这两条容易理解，但要做好却不容易。4142l 要用

14、很简单的图形符号传达较为复杂的内容，是不容易。要求有敏锐的观察力、高度的抽象概括力、丰富的想象力，并调动形、色、意等多种手法来加以表现。所以图形符号设计富有魅力，也富有挑战性。434 箭头的表示方法44我国于 1989 年发布了 GB 1252 一 1989 图形符号 箭头及其应用 。该标准给出了箭头基本形式、名称、画法、用法等方面的规定，部分摘录在表 7 一 4 中。4546标志设计47（一）标志及其设计原则l 标志是给人以行为指示的符号和（或）说明性文字。标志有时有边框，有时没有边框，主要用于公共场所、建筑物、产品的外包装以及印刷品。l 图形标志则是图形符号、文字、边框等视觉符号的组合，以

15、图象为主要特征，用以表达特定的信息。l 标志的应用很广泛，我国已经发布了一系列相关的国家标准（略），需要时查阅参考。48图形标志的设计原则l 前述图形符号的 5 条设计原则再加下面的要求，构成图形标志的设计原则。首先要满足醒目清晰和通俗易懂两个基本要求。图形应只包含所传达信息的主要特征，减少图形要素，避免不必要的细节。标志图形的长和宽尽量接近，长宽比一般不得超过 1:4。标志图形不宜采用复杂多变和凌乱的轮廓界限，即应注意控制和减小图形周长对面积之比。优先采用对称图形和实心图形。495051（二）图形标志的尺寸与视距l 图形标志的公称尺寸无论是设计还是使用，说到“标志大小”需要有一个统一的标准：

16、取图形标志的哪个尺寸代表它的大小？l 定义：图形标志边框内缘的尺寸为图形标志的公称尺寸，以 S 表示：圆形边框以边框内缘为公称尺寸，其它正方形、斜置正方形、三角形边框均相同，如图所示。5253图形标志的公称尺寸与视距l 要标志让人看得清，应根据人们的观看距离（视距）来确定标志的大小。图形标志的最小公称尺寸smin(m)。与视距 L(m)的关系见表。54其他的构图尺寸与视距l 标志图形在边框内应该匀称、充实，“重心”位置适当。为保证标志上各构图元素的边界和细节的视觉分辨性，构图元素与边框间的最小间距d1、各构图元素间的最小间距d2，构图元素的最小宽度w（参看图7一16）等参数，与视距L的比例关系

17、应符合 见表7一6。55565758标志用图形符号的评价测试方法简介l 标志用图形符号所代表的主题（如事物、概念等），称为表达对象。图形符号设计出来的图形符号是否“易懂”、“易辨”,需要进行客观性的测试评价。方法是选定一定数量（不宜太少）的被试者，请他们进行评价，统计分析后，作出选用、修改或废弃的结论。几种常用的评价测试方法如下。59(1）适当性排序测试让被试了解表达对象以后，把设计方案按随机的排列展现给所有被试（每个被试分别单独进行），请每一个被试把方案从好到差地排成顺序。(2）理解性测试不向被试说明预设的表达对象，把设计方案展现给被试，请他们说出对每个方案表达对象的理解。(3）匹配测试向被

18、试说明表达对象，展现各个方案，请被试选出与表达对象匹配的方案，不限定选中的个数。606162第三节 展示设计63展板上的文字l 展板上文字尺寸 D 与视距L之比一般应=1/150。例如视距为 1.5m，则版面上最小的文字尺寸（高、宽）=15mm。标题、主题关键词、主体物名称等酌情还要加大。l 展板上文字应尽量少。为此，可削减连接词、虚词、助动词等词类，以突出展示的主体物和主题。把完整的叙述句改变成字数少、顺口易念易记的警句、口号、对联、顺口溜。忌文字布满展板，要适当留出空白。l 忌文字密麻、均匀地一大片，要凸显重点亮点。忌一行字数太多，以免要晃动起脑袋才能换行阅读。64展板布置的高度65663

19、、展板的方位布置l 展板的方位布置随实际情况不同而千变万化，图 7 一 19 所示只是一个示例（说明略）。67展室设置与展示照明l（一）展室设置 展室设置与参观人流引导观展人流的行进流向，让观展者在轻松的、不经意的行进中看到展览的全貌，是布展基本和优先的要求之一。展览内容通常形成“序言一第一部分一第二部分 一结语”这样的序列。应按上述内容顺序来设计展室分布和观展行进路线，设置行进方向路牌，图 7 一 20 是几个例子。6869单侧布展与双侧布展l 双侧布展的优点是节省空间；而单侧布展使参观者依路线行进不会有所遗漏，也不发生人流的往返干扰，各有适用条件。图 7 一 21a 和 c 为单侧布展，b

20、 和 d 为双侧布展。70（二）展示照明l 专门的、永久性的展馆、展室中，自然光的采光是建筑设计的重点。但对于非永久性的展室展厅，要根据展览内容变化更换展位，主要靠人工照明。展示照明设计的要点如下。71722 灯具的选择布置l 一般照明宜采用柔和的漫射灯具，如顶部的乳白色半透明罩灯、荧光灯等。把直照式照明改为反射式照明，也能使光线较为柔和，有利于营造展区安宁的氛围，但成本较高。l 局部照明多采用射灯。也有在顶部设置槽形光带灯的，它兼有一般照明和局部照明的作用，见图 7 一 22。对于平面的展板，选择射灯照射角度应避免对观看者造成眩光，即不让板面的反射光直指人眼。对于立体的展品，则应避免射灯灯光

21、造成有害阴影。73光环境氛围的营造l 展室光环境氛围的营造手段，一是选择光色与照度，二是利用光照构造虚拟空间。l 光色与照度选择照度较高的暖色光使人情绪高涨，适宜在商品展销、技术推介的展览中采用。照度较低的冷色光使人宁静沉稳，适应在文化、艺术、历史的展览中采用。介于中间的情况，则采用中等照度的中性色。l 利用光照构造虚拟空间在展室的局部区域，以明显较强的照度、有时还配以不同的光色，可以构造出引人注目的局部虚拟空间，是突出展览重点的有效方法之一，见图 7 一 23。7475本次课程作业本次课程作业l 设计一“浙江大学120校庆的LOGO”假定其立于紫金港校门进来的大草坪前 注意背景和LOGO的对比 注意选择字体 标出打印的字体尺寸，标志尺寸（最小尺寸）76周五课程请大家参观2楼毕业设计是否发现与我们这次课相关的知识点？77放映放映结束！结束！无悔无愧于昨天，丰硕殷实无悔无愧于昨天，丰硕殷实的今天，充满希望的明天。的今天，充满希望的明天。78