产品界面设计

1、回顾：点的特性及点的视觉效果点的特性及点的视觉效果 一、点的特性一、点的特性 在几何学中，点只有位置感，没有形状和大小的。 在形态设计中，点的形状，如：圆点、正方形、三角形等，呈无规则的任意形状，点的大小也是相对的。二、点的视觉效果二、点的视觉效果1. 一点的视觉效果 一个点有单纯和集中的特点，给人一富有集聚性的视觉心理作用。 单独的点，本身没有上、下、左、右的指向。 当画面上只有一个点只有一个点的时候，人的视线就会自觉不自觉的集中在这个点上，形成求心性的特点。 当点在画面上的位置不同时位置不同时，视觉感就有一些变化。 集中点集中点 动感动感 重心下移重心下移 倾斜感倾斜感 凸感增强凸感增强

2、压迫感压迫感 单调感单调感 头重脚轻头重脚轻 有稳定感有稳定感 张力感张力感 凹形感更强凹形感更强 不稳定感不稳定感 （2）多点的视觉效果）多点的视觉效果 平行的双点在造型上可以产生对称、均衡的艺术效果；平行的双点在造型上可以产生对称、均衡的艺术效果； 密集性的多点排列能产生面的效果；密集性的多点排列能产生面的效果； 多点大小不同，错落相间，可产生运动感和空间感多点大小不同，错落相间，可产生运动感和空间感。 连线连线效果 虚形三角形的面的联想虚形三角形的面的联想 层次感层次感 活泼 严肃 由大到小的秩序感由大到小的秩序感 由大到小方向的动感 静态感 由近到远的层次感由近到远的层次感 视觉停滞点

3、 活泼 严肃 韵律动感 点大又疏，图形显得干净、豪爽， 错视 静态感 点小又密，图形显得细腻 点的不同排列、组合，在人的视觉上会产生不同的感受与心理反应，会传达不点的不同排列、组合，在人的视觉上会产生不同的感受与心理反应，会传达不同视觉信息，产生不同的审美效果，如：和谐、比例、对称、均很、运动等，在同视觉信息，产生不同的审美效果，如：和谐、比例、对称、均很、运动等，在产品形态设计中被广泛得到应用。产品形态设计中被广泛得到应用。 新颖墙面开关设计新颖墙面开关设计2.1 产品面板设计产品面板设计点的设计与应用点的设计与应用 产品面板设计是产品形态设计的一项重要内容，如指示灯、开关、产品面板设计是产

4、品形态设计的一项重要内容，如指示灯、开关、螺钉、旋钮、按键、商标、文字等，当它们体积小于仪器整体和面板时，螺钉、旋钮、按键、商标、文字等，当它们体积小于仪器整体和面板时，都可以认为是点都可以认为是点。 录音控制面板录音控制面板 仪器控制面板仪器控制面板 面板与元器件面板与元器件面面 板板人机相互交流的窗口，人机相互交流的窗口，元器件元器件人和产品进行交流沟通的媒介人和产品进行交流沟通的媒介 点，可以布置在产品的平面和三维空间中。点，可以布置在产品的平面和三维空间中。 显示元器件显示元器件 从产品面板中获得输出信息从产品面板中获得输出信息 操作元器件操作元器件 输入操作指令输入操作指令 显示元器

5、件与操作元器件之间的相容程度，直接影响人与产品的交显示元器件与操作元器件之间的相容程度，直接影响人与产品的交流效果，也就是说直接影响着产品的质量。流效果，也就是说直接影响着产品的质量。 如：当你在玩游戏时，游戏机的操作件不能完成你的指令，你就如：当你在玩游戏时，游戏机的操作件不能完成你的指令，你就会认为，这个游戏机质量不好，或者说这个游戏机坏了；会认为，这个游戏机质量不好，或者说这个游戏机坏了； 又如：当你使用你的手机发短信的时候，手机显示屏，不能正确又如：当你使用你的手机发短信的时候，手机显示屏，不能正确反应你的意愿，你就会认为这部手机质量有问题。反应你的意愿，你就会认为这部手机质量有问题。

6、 电器柜电器柜 元器件的分类元器件的分类 根据信号发生的方式，信号可分类输入信号和输出信号两种。根据信号发生的方式，信号可分类输入信号和输出信号两种。 输入信号通过控制元器件转达人们的指令输入信号通过控制元器件转达人们的指令 输出信号通过显示元器件回答人们执行情况的信息。输出信号通过显示元器件回答人们执行情况的信息。 下面从这两个方面对产品设计中常出现的元器件进一步分类，可以在众下面从这两个方面对产品设计中常出现的元器件进一步分类，可以在众多类似点的元器件布置设计中，帮助我们实现多类似点的元器件布置设计中，帮助我们实现同类分组设计、同形状分同类分组设计、同形状分组设计、同属性分组设计、操作顺序

7、分组设计组设计、同属性分组设计、操作顺序分组设计等，以达到最佳的设计效等，以达到最佳的设计效果。果。 显示器显示器产品输出信号元器件产品输出信号元器件， 主要主要包括：视觉显示、听觉显示、嗅觉显示和触觉显示包括：视觉显示、听觉显示、嗅觉显示和触觉显示 控制器控制器产品接受指令的部分产品接受指令的部分，按运动的形式、人体操作的部位和操作功能三个角度进行了分类按运动的形式、人体操作的部位和操作功能三个角度进行了分类。1.1.显示器分类显示器分类 指针式：横竖式刻度或数字仪表、指针式：横竖式刻度或数字仪表、 视觉显示器视觉显示器 数字式：二极管数字显示数字式：二极管数字显示 图像式：图像式：图像显示

8、屏、数字显示屏、文字显示屏图像显示屏、数字显示屏、文字显示屏 指示灯指示灯: 打印机：打印机： 蜂鸣器蜂鸣器 听觉显示器听觉显示器 铃声铃声 报警器报警器 汽笛汽笛 嗅觉显示器嗅觉显示器 触觉显示器触觉显示器 显示器显示器 2. 2.控制器分类控制器分类旋转旋转控制器：控制器：曲柄、手轮、旋塞、旋钮、钥匙、舵仓、方向盘、曲柄、手轮、旋塞、旋钮、钥匙、舵仓、方向盘、 十字把、扳手十字把、扳手摆动摆动控制器：控制器：开关杆、调节杆、杠杆件、摆动件、踏板开关杆、调节杆、杠杆件、摆动件、踏板按压按压控制器：按钮、按键、键盘控制器：按钮、按键、键盘滑动滑动控制器：手闸、形状指拨滑块、摩擦指拨滑块控制器：

9、手闸、形状指拨滑块、摩擦指拨滑块牵拉牵拉控制器：拉环、拉圈、拉手、拉钮控制器：拉环、拉圈、拉手、拉钮按运动形式按运动形式分分 按按人体操作部位分类人体操作部位分类： 手动控制器：旋钮、按键、摇把、手柄、舵轮 脚动控制器：脚踏板、脚踏钮 按操作功能分类按操作功能分类： 开关控制器：手闸、按钮、踏板、手柄 转换控制器：按钮、选择开关 调整控制器：旋钮、手柄 紧急停车控制器：（不能与其它显示与操作件同时安装）各种控制元器件各种控制元器件 3. 3. 产品显示元器件与控制元器件布置原则产品显示元器件与控制元器件布置原则 显示元器件与控制元器件与面板整体相比，体积小巧，可以认为是显示元器件与控制元器件与

10、面板整体相比，体积小巧，可以认为是视觉点视觉点，与纯视觉点设计相比，产品的显示元器件与相应的操作控制元器，与纯视觉点设计相比，产品的显示元器件与相应的操作控制元器件有一一对应的件有一一对应的功能逻辑关系功能逻辑关系，因此，它们的位置和操作的方式之间也有，因此，它们的位置和操作的方式之间也有一定的逻辑关系，这里不能把它们看作纯视觉的点，一定的逻辑关系，这里不能把它们看作纯视觉的点， 应从应从概念设计概念设计的角度，运用的角度，运用美学法则美学法则，在，在平面设计平面设计的基础上，讨论它们的的基础上，讨论它们的美学美学布置形式布置形式； 还应从还应从功能特点功能特点出发，考虑显示元器件与控制元器件

11、之间的出发，考虑显示元器件与控制元器件之间的逻辑关系逻辑关系，从，从而确定显示元器件和控制元器件在面板中的而确定显示元器件和控制元器件在面板中的位置位置以及它们的以及它们的布置形式布置形式。 因为产品造型设计首先要考虑适应产品因为产品造型设计首先要考虑适应产品功能功能的要求，强调的要求，强调产品产品内在、外在形式的统一内在、外在形式的统一，这样有利于提高效率，使操作者，这样有利于提高效率，使操作者精力集中，降低错误率。在此前提下，应尽量使产品造型精力集中，降低错误率。在此前提下，应尽量使产品造型内、内、外形式两相兼顾外形式两相兼顾，协调好产品形体各部件尺寸大小和比例关系。，协调好产品形体各部件

12、尺寸大小和比例关系。 人机工程学为产品显示元器件和控制元器件的不是形式，人机工程学为产品显示元器件和控制元器件的不是形式，提供了许多设计原则。提供了许多设计原则。（1 1） 常用的面板布置形式常用的面板布置形式 面板布局设计涉及的元器件主要有显示器和控制器两大类。要面板布局设计涉及的元器件主要有显示器和控制器两大类。要使产品达到即高效又美观的效果，可以通过以下方面的努力实现：使产品达到即高效又美观的效果，可以通过以下方面的努力实现： 一是通过面板布局的方式获得；一是通过面板布局的方式获得； 二是运用控制器与显示器操作的逻辑关系布置面板可以获得；二是运用控制器与显示器操作的逻辑关系布置面板可以获

13、得； 三是通过合适分割面板获得显示器和控制器的位置。三是通过合适分割面板获得显示器和控制器的位置。常用的面板布置方式（常用的面板布置方式（8种）种）： 操作指示内容以操作指示内容以线条形式线条形式圈定圈定 操作指示的内容以操作指示的内容以空格形式空格形式分布分布 操作指示内容通过操作指示内容通过凸凹形式凸凹形式区分区分 操作指示内容以操作指示内容以相同形状相同形状的形式归类的形式归类 操作指示内容以操作指示内容以色块形式色块形式区分区分 操作指示内容以操作指示内容以括号形式括号形式连接连接 操作指示内容以操作指示内容以功能内容功能内容形式归类形式归类 操作指示内容以操作指示内容以隔线形式隔线形

14、式区分区分 （2 2）逻辑关系布置原则）逻辑关系布置原则 显示器和控制器体积远小于控制面板，虽然可以把它视为点，但在产品的显示器和控制器的布置形式中，却显示器和控制器体积远小于控制面板，虽然可以把它视为点，但在产品的显示器和控制器的布置形式中，却不能把它看作纯视觉的点来设计，显示器与相应的控制器之间有一一对应的操作逻辑关系，这是人们在长期不能把它看作纯视觉的点来设计，显示器与相应的控制器之间有一一对应的操作逻辑关系，这是人们在长期的生活实践中形成的习惯，也是显示器和控制器位置设计必须遵守的原则。的生活实践中形成的习惯，也是显示器和控制器位置设计必须遵守的原则。 当显示器与控制器布置在三维空间时

15、，其当显示器与控制器布置在三维空间时，其显示器读数的方向和控制器运动的方向，应满足下图中显示器读数的方向和控制器运动的方向，应满足下图中箭头所指的箭头所指的方向方向。（3 3）通过分割获得合适的位置）通过分割获得合适的位置 若面板仅有若面板仅有一组多输出、单输入一组多输出、单输入的显示控制元器件，或者仅有的显示控制元器件，或者仅有一组一组单输出、多个输入单输出、多个输入显示控制元器件，可以采用显示控制元器件，可以采用非对称性分割方式非对称性分割方式确定点确定点的位置，这种布局既调和有对比，即变化又统一。的位置，这种布局既调和有对比，即变化又统一。 当布置面板里作为点的显示和控制元器件时，最好不

16、要用下图左边的当布置面板里作为点的显示和控制元器件时，最好不要用下图左边的两种方法，对称划分面板，这样会造成面板布置形式呆板，单调。两种方法，对称划分面板，这样会造成面板布置形式呆板，单调。 采用非对称分割，但又注意布局的视觉力矩的均衡效果，就像右边两采用非对称分割，但又注意布局的视觉力矩的均衡效果，就像右边两种布局形式，以达到自然生动的效果。种布局形式，以达到自然生动的效果。 在面板在面板垂直方向垂直方向1/5的位置，或的位置，或横向方向横向方向3/10的位置，绘制矩形分割的位置，绘制矩形分割线，将面板涉及的元素，放在分割线的线，将面板涉及的元素，放在分割线的交汇处交汇处，或被分割的面块中，

17、或被分割的面块中，这样构图，其面积大小与色彩既有这样构图，其面积大小与色彩既有对比对比，又有，又有均衡统一均衡统一，能给人以整，能给人以整体协调感和美感。体协调感和美感。 以以4条非均衡的水平线和垂直线分割面板条非均衡的水平线和垂直线分割面板，将面板所涉及的元素，如：，将面板所涉及的元素，如：手柄，布置在手柄，布置在左半部下条横线中间左半部下条横线中间，将旋钮和显示灯布置在，将旋钮和显示灯布置在右垂直线右垂直线的右中部的右中部，将文字布置在，将文字布置在上横线的上部上横线的上部，这样布置造成，这样布置造成疏密相间、纵疏密相间、纵横对比横对比，给人以舒展的感觉。，给人以舒展的感觉。 在在纵横纵横

18、1/3处作矩形的分割线，按此布局也能获得较好的视觉效果。处作矩形的分割线，按此布局也能获得较好的视觉效果。 利用利用斜线分割斜线分割，可获得生动活跃的视觉效果，因为斜线能产生动感，可获得生动活跃的视觉效果，因为斜线能产生动感，能产生把某物向上推移或向下滑行的感觉。这种分割布局能获得构图能产生把某物向上推移或向下滑行的感觉。这种分割布局能获得构图的的疏密对比，均衡稳定和韵律感疏密对比，均衡稳定和韵律感。 应用应用曲线分割曲线分割能使面板构图既有活跃的能使面板构图既有活跃的动感动感，又具有，又具有安静舒展安静舒展的视觉效的视觉效果。果。 显示和控制元器件在面板上的布置方法有显示和控制元器件在面板上

19、的布置方法有 很多，以上分割方法只是面板设计中常用的方法，根据各个很多，以上分割方法只是面板设计中常用的方法，根据各个不同面板的显示和控制元器件的不同，灵活运用不同面板的显示和控制元器件的不同，灵活运用平面构成中平面构成中点的构成点的构成方法，达到最佳视觉效果。方法，达到最佳视觉效果。案例案例2-12-1：仪表面板设计：仪表面板设计 下图仪表面板设计的两个方案。下图仪表面板设计的两个方案。 显示器输出元器件有：液晶显示屏一个、打印机一个显示器输出元器件有：液晶显示屏一个、打印机一个 仪表名字和生产厂家；仪表名字和生产厂家； 输入控制元器件有：启动按键显示开关一个输入控制元器件有：启动按键显示开

20、关一个 控制显示按键控制显示按键6个个方案一分析：方案一分析： 用一组象征黄鹤的非对称的水平线和垂直线分割矩形，将显示元用一组象征黄鹤的非对称的水平线和垂直线分割矩形，将显示元器件布置在左侧用色彩构成翅膀的色块中，将启动按钮放置在右上端器件布置在左侧用色彩构成翅膀的色块中，将启动按钮放置在右上端（工作中较少使用），与仪表名称放在一条线上，将（工作中较少使用），与仪表名称放在一条线上，将6个工作操作按个工作操作按钮，布置在象征着鹅颈部，一字排开，下面用文字注明功用，右下角钮，布置在象征着鹅颈部，一字排开，下面用文字注明功用，右下角注明生产单位。整个布局显得疏密有序，显得舒展又有内涵。注明生产单位

21、。整个布局显得疏密有序，显得舒展又有内涵。方案二分析：方案二分析： 采运用一组斜线和水平线分割矩形，并用协调色块区别，将启动开关按钮与工作操采运用一组斜线和水平线分割矩形，并用协调色块区别，将启动开关按钮与工作操作按钮一字排开，但用不同形状的按钮区分。作按钮一字排开，但用不同形状的按钮区分。 由于启动按钮在工作中，使用较少，放置在最左边，下面用文字说明功用，由于启动按钮在工作中，使用较少，放置在最左边，下面用文字说明功用， 将打印机布置在右下角，显示屏布置在面板的左上角，仪表名字置于打印机的上方，将打印机布置在右下角，显示屏布置在面板的左上角，仪表名字置于打印机的上方，制作单位布置在面板的左下

22、角，方案整个显得均衡有序，显示元器件工作线路与控制作单位布置在面板的左下角，方案整个显得均衡有序，显示元器件工作线路与控制元器件工作线路互不干扰，井然有序，思路清晰。制元器件工作线路互不干扰，井然有序，思路清晰。案例案例2-22-2：掌上电脑和：掌上电脑和3G3G手机形态设计案例分析手机形态设计案例分析 下图是掌上电脑的与下图是掌上电脑的与3G手机两个产品形态设计中的交互面板的设计案例，相同的是两手机两个产品形态设计中的交互面板的设计案例，相同的是两个产品的输出元器件：显示屏、蜂鸣器、喇叭；输入元器件：掌上电脑左边一组有个产品的输出元器件：显示屏、蜂鸣器、喇叭；输入元器件：掌上电脑左边一组有3

23、0个按键，右组有个按键，右组有43个按键，中间有个按键，中间有4个按键，按键按凸凹分区，启动开关紧挨在显示屏个按键，按键按凸凹分区，启动开关紧挨在显示屏右边。右边。3G手机相同形状按键手机相同形状按键30个，布置在手机控制区下部，上部有个，布置在手机控制区下部，上部有9个特殊按键，用个特殊按键，用特殊形状区别，布置在手机按键区的上部，并用色彩分区区别。按键由于使用功能设定特殊形状区别，布置在手机按键区的上部，并用色彩分区区别。按键由于使用功能设定的区域不同，其造型各有自己的特点去强调自身的功能特定，使消费者在购买时，通过的区域不同，其造型各有自己的特点去强调自身的功能特定，使消费者在购买时，通

24、过产品外形就能迅速找到自己需要使用功能的产品。产品外形就能迅速找到自己需要使用功能的产品。 在产品面板设计中，还需注意：仪器仪表、机床控制面在产品面板设计中，还需注意：仪器仪表、机床控制面板操作控制区域和显示输出信号区域等部件的面积比例设计，板操作控制区域和显示输出信号区域等部件的面积比例设计，必须与产品形态所强调产品必须与产品形态所强调产品功能效应相适应功能效应相适应，才能增加产品，才能增加产品的附加值。的附加值。作业作业1.等离子切割机控制柜等离子切割机控制柜 操作面板的改良设计操作面板的改良设计 设计要求设计要求：1) 液晶屏边框实际没有白色线条；液晶屏边框实际没有白色线条；2) 按键颜

25、色基本上已定；按键颜色基本上已定；3) 面板主体颜色可通过塑料选色、做油漆等方法来改变；面板主体颜色可通过塑料选色、做油漆等方法来改变；4) 小面板下方长条、各右侧方格可用写真、喷绘、彩印、滴塑等多种先进工艺；小面板下方长条、各右侧方格可用写真、喷绘、彩印、滴塑等多种先进工艺；5) 按键区域框架可采用单独油漆、贴膜、贴铝、贴彩色不锈钢等工艺方案；按键区域框架可采用单独油漆、贴膜、贴铝、贴彩色不锈钢等工艺方案；6) 还可考虑其他先进工艺方案来设计。还可考虑其他先进工艺方案来设计。控制柜装配图国内等离子切割机控制柜面板国内等离子切割机控制柜面板国外等离子切割机控制柜面板国外等离子切割机控制柜面板美

26、国海宝（美国海宝（EDGEEDGE）、美国）、美国BURNYBURNY、德国的西门子、德国的西门子(SIEMENS)(SIEMENS)、西班牙的法格、西班牙的法格(FAGOR)(FAGOR)、日本的法纳克、日本的法纳克(FANUC)(FANUC) 美国海宝（美国海宝（EDGE）2. 2. 产品外观设计产品外观设计设计要求：设计要求： （武汉蓝讯科技）（武汉蓝讯科技） 公司产品，在外观设计上，存在很多不足，有待改进完善，公司决定，借助外界相关技术人公司产品，在外观设计上，存在很多不足，有待改进完善，公司决定，借助外界相关技术人员来提高产品外观设计。员来提高产品外观设计。 外观设计，包含造型、配色等产品外观设计，必须充分考虑所设计方案的生产可能性，以及外观设计，包含造型、配色等产品外观设计，必须充分考虑所设计方案的生产可能性，以及生产制造成本。生产制造成本。 对外观设计，从外观效果角度，很难给出一个好与不好的评价，因此，每一个设计对象，都对外观设计