人机交互（二）艺术设计

 

人机界面艺术设计思路

人机界面设计要素：文字、颜色、布局

（1). 字体（Font）  

l使用统一字体，字体标准的选择依据操作系统类型决定。

l中文采用标准字体：“宋体”，英文采用标准Microsoft Sans Serif，不考虑特殊字体（隶书、草书等，特殊情况可以使用图片取代）

l字体大小根据系统标准字体来定，例如MSS字体8磅，宋体的小五号字（9磅）、五号字（10.5磅）。

l所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况。ITop采用BCB，所有控件默认使用parent font，不允许修改，这样有利于统一调整。

l系统大小字体属性改变的处理。

• 设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换字体大小的时候，相对不会有什么特殊问题。

  但是由于使用点阵作为窗口设计单位，导致改变大字体后出现版面混乱的问题。这个情况下，应做相应处理：

  写程序自动调节大小，点阵值乘以一个相应比例；

  全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

（2）文字表达（Text）

l使用统一的语言描述，例如：一个关闭功能按钮，可以描述为退出、返回、关闭，应该统一规定。

l根据用户不同采用相应的词语语气语调。如专用软件可以出现很多专业术语，用户为儿童时，语气应亲切和蔼；对老年用户，则应该成熟稳重。

（3）颜色（Color）使用

l  底统一色调，针对软件类型以及用户工作环境选择恰当色调。

l  如安全软件，根据工业标准，可以选取黄色。绿色体现环保、蓝色表现时尚、紫色表现浪漫、淡色可以使人舒适、暗色做背景使人不觉得累等。

l  如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一。

l  对于色盲、色弱用户，除应使用特殊颜色表示重点或者特别的东西外，也应该使用特殊指示符，以及图标等。

（4）色表（itop）

l具体标准参考美术学统计学术标准。色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

（5）资源（Resource）、布局

l一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

l遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能地形成标准，可参考itop的outlookbar图标设计标准。

l有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及统一的图片风格。

l底图应该融于底图，使用浅色，低对比，尽量少使用颜色。

l图标、图像应该很清晰地表达出意思，遵循常用标准，或者用户容易联想的物件。

l鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况。

（6）控件（STYLE）风格

l最好能设计出同一风格的控件。如果没有能力设计出一套控件，则使用标准控件。

l不要错误使用控件。例如使用Button样式做TTable的功能，拿主菜单条显示版权信息。

l同一类型的控件操作方式应相同。

l一个控件只做单一功能，不复用。这种情况下的解决方法：

  分组，使用双份控件。

  使用TABLE页，给用户很明显的视觉变化

（7）控件布局（ALIGN）

l屏幕不能拥挤。拥挤的屏幕让人难以理解，因而难以使用。试验结果（Mayhew，1992年）表明，屏幕总体覆盖度不应该超过40％，而分组总覆盖度不应该超过62％。整个项目应采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。

l区域排列。一行控件，纵向中对齐，控件间距基本保持一致，行与行之间间距相同，靠窗体Border的距离应大于行间间距（间距加边缘留空）。当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。

l数据对齐要适当。对于说明文字，中文版应使用中文全角冒号；纵向对齐时，并按冒号右对齐。纵向控件宽度尽量保持相通并左对齐。例如：金额等字符串应根据小数点对齐，或者右对齐。

l有效组合。逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不相关的项目应当分隔开各自区域。

l窗口缩放时，控件位置、布局。使界面不出现跑版或者难看的解决方法：

  固定窗口大小，不允许改变尺寸；

  改变尺寸的窗口，在Onsize的时候对控件位置、大小进行相应改变。

 

人机界面设计的设计原则与规范

做法：

l项目组由有经验人士确立UI规范。

l美工提供色调配色方案，提供整体配色表。

l界面控制程序人员、用户体验人员提出合理统一的控件库，可参考标准界面使用规范。

l控件功能遵循行业标准，Windows平台参见《Microsoft用户体验》。

l控件样式在允许的范围内可以统一修改其样式、色调。

l参考其他软件先进操作，提取对本项目有用的功能，但绝对不能盲从或漫无目的。

l根据需要设计特殊操作控件，准则为：简化操作、达到一定功能目的。

l界面实施人员与美工商榷控件可实现性。

l建立合理化文档《UI标准》描述上述规范。

lSQA人员监控开发人员是否遵循，及时告诫开发人员。

（1）网站界面设计基本原则

通常地讲，网站用户界面的设计应遵循以下几个基本原则：

l用户导向原则：以用户为中心，了解他们的需求、目标、期望和偏好等。

l拥有良好的直觉特征原则：要简洁和易于操作。该原则一般要求网页的下载不要超过10秒钟；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。

l布局控制：关于网页排版布局方面，要灵活设计、便于浏览。

l视觉平衡：设计网页界面时，应合理分配各种元素（如图形、文字、空白），尽量达到视觉上的平衡。

l色彩的搭配和文字的可阅读性：颜色是影响网页的重要因素，不同的颜色对人的感觉有不同的影响。

l和谐与一致性：通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格。

l个性化：网站的整体风格和整体气氛表达要与产品定位相符合并应该很好地为产品服务。

（2）网站界面的功能美与形式美

由于网络媒体的结构特征和传播技巧决定了形式语言与其他媒体的差异性，网络媒体视觉形式主要可以分为框架结构形式、封面结构形式和开放结构形式等三种结构形式。框架结构形式在网站的版式设计运用中非常广泛，因为这种设计更符合网站制作技术的解决方案，框架结构形式是一种规范的、理性的分割方法，类似于报刊的版式。

• 界面设计九准则
• 原则一：专注于用户和他们的任务，而不是技术

  了解用户；了解所执行的任务；考虑软件运行环境。

• 原则二：先考虑功能，再考虑展示
• 原则三：与用户看任务的角度一致要争取尽可能自然；使用用户所用的词汇，而不是自己创造的；封装，不暴露程序的内部运作。
• 原则四：为常见的情况而设计

  保证常见的结果容易实现；两类“常见”：“很多人”与“很经常”；为核心情况  而设计，不要纠结于“边缘”情况。

• 原则五：不要把用户的任务复杂化

• 原则六：方便学习

  “从外向内”而不是“从内向外”思考；一致，一致，还是一致；提供一个低风险的学习环境。

• 原则七：传递信息，而不是数据

  仔细设计显示，争取专业的帮助；屏幕是用户的；保持显示的惯性。

• 原则八：为响应度而设计

l即刻确认用户的操作；让用户知道软件是否在忙；

l在等待时允许用户作别的事情；动画要做到平滑和清晰；

l让用户能够终止长时间的操作；让用户能够预计操作所需的时间；尽可能让用户来掌控自己的工作节奏。

• 原则九：让用户试用后再修改

  测试结果会让设计（甚至是经验丰富的设计者）感到惊讶；

  安排时间纠正测试发现的问题；测试有两个目的：信息目的和社会目的；每一个阶段和每一个目标都要测试。