UI界面设计 (3)ppt课件.ppt

1、用户界面设计，主讲人：宋斌斌2010-07-22，1，今天的内容，用户界面概念用户界面设计元素软件界面设计手机界面设计网站界面设计，2，第1部分用户界面概念，3，用户界面概念，用户界面的原意是英文用户和界面的缩写。4。衡量用户界面设计的标准：用户体验用户体验是以用户为中心的设计最重要的部分UCD/以用户为中心的设计强调过程，是对软件对用户行为的反应和用户期望值的错误测试。误差越小，越符合以用户为中心的设计原则。5，第2部分界面设计元素，6，界面设计元素，7，界面设计元素：布局，平衡原则，期望原则，经济原则和顺序原则，8，界面设计元素：布局，平衡原则，注意屏幕上下左右平衡。不要堆积数据。显示器过

2、度拥挤会导致视觉疲劳和接收错误。界面设计元素：布局、预期原则屏幕上的所有对象，如窗口、按钮、菜单等。应该被一致地处理，以便可以预期对象的动作。10，用户界面设计元素：布局，顺序原则对象显示的顺序应该根据需要进行排列。通常，对话应该首先出现，然后通过对话将系统分段。11、界面设计要素：在应用系统的设计中，布局、常规画面应对称，显示命令、对话和提示行应尽可能统一和规范。12，用户界面设计要素：词语和术语，注意术语的简洁性，格式化信息内容，13，用户界面设计要素：词语和术语，注意术语的简洁性，避免使用计算机术语；尽量用肯定句代替否定句；用主动语态代替被动语态；使用礼貌和过分强调的句子进行文本对话；尽

3、量避免英文单词中的缩写；描述动作的动词应尽可能多地用于标记按钮和功能键；当文本很长时，可以使用压缩来减少字符数或采用一些编码方法。14，用户界面设计元素：文字和表达，在屏幕显示格式设计中，一幅图片不应该有太多的文字，如果必须有更多的文字，尽量分组和分页，并在关键词处做加粗和改变字体，但尽量使字体统一。除了标语，英语单词应该尽可能用小写和可识别的字体书写。15，format，16，format，17，UI界面设计元素：词语和表达，信息内容信息内容显示不仅要采用简单明了的表达方式，还要采用用户熟悉的简单句子，尽量不要左右滚动。当有很多内容时，应该把它们分成空白部分或小窗口，以便记忆和理解。重要字段

4、可以通过加粗和闪烁来吸引注意力和增强效果。有各种增强效果，所以根据实际情况选择。18，用户界面设计元素：颜色的使用，限制同时显示的颜色数量。一般来说，同一张图片不应该超过4或5种，不同的级别和形状可以用来匹配颜色和增加变化。图片中运动物体的颜色应该是明亮的，而非运动物体的颜色应该是暗淡的，以避免不兼容的颜色，如黄色和蓝色，红色和绿色等。除非用于比较。如果某个信息或对象属性是用颜色表示的，则用户有必要理解该表达并尽可能多地使用常规标准。19，第3部分软件界面设计，20，软件界面设计，是美化、优化和标准化软件用户界面的设计分支，以满足软件专业化和标准化的需求。，21，坏界面，22，无法想象的程序界

5、面，23，窗口95，24，窗口7，25，软件界面设计，具体包括：软件启动封面设计/软件框架设计/按钮设计/面板设计/菜单设计/标签设计/图标设计/滚动条和状态栏设计/安装过程设计/包装和商业化，26，软件界面设计：软件启动封面设计，高清图像安全颜色，中等尺寸，整体设计的统一性和连续性：公司标志，产品商标，软件名称，版本号，网站地址27、软件界面设计：软件框架设计，与软件开发人员和程序用户交流，设计友好、独特和兼容的软件框架，28、软件界面设计：软件框架设计，29、软件界面设计：软件按钮设计，软件按钮设计应具有交互性，即应有3至6种状态效果：点击状态；鼠标放在上面，但没有被点击；点击前鼠标没有放

6、在上面的状态；点击后鼠标没有放在上面的状态；无法单击时的状态；独立自动变化的状态。按钮应具有简洁的图形效果，使用户能够产生功能性的联想反应。一组中的按钮应该具有统一的样式，功能差异大的按钮应该不同。30、软件界面设计：软件面板设计，软件面板设计应具有缩放功能，面板应明确划分功能区间，并应与对话框和弹出框的样式相匹配，以便尽可能节省空间和方便切换。31、软件界面设计：菜单设计，菜单设计一般有选中状态和未选中状态，左边应该是名称，右边应该是快捷键，如果有较低的菜单，应该有较低的箭头符号，不同的功能间隔应该用线条来划分。32、软件界面设计：菜单设计，33、软件界面设计：标签设计，标签设计要注意边角部

7、分的变化，并且状态可以参照按钮。34，软件界面设计：图标设计，图标设计颜色不应超过64种颜色，尺寸为16x16，32x32，图标设计是平方英寸的艺术，视觉冲击应该强调，它需要在小范围内展示软件的内涵，所以很多图标设计者在设计图标时使用简单的颜色，并利用眼睛对颜色和网络点的空间混合效果制作出许多精彩的图标。35、软件界面设计：滚动条和状态栏设计，滚动条主要用于设计固定大小的区域空间中的转换内容，其中应该有上下箭头、滚动标记等。有些有翻页标记。状态栏用于显示和提示软件的当前状态。36，软件接口设计：包装和商业化。最后，软件产品的包装应该考虑保护软件产品。功能的宣传应该融入美学，一些产品介绍和产品界

8、面设计可以印刷。37，第4部分手机界面设计，38，手机界面设计，界面效果的完整性和一致性，个性化界面视觉元素的规范，39，手机界面设计，界面效果的整合性和一致性，界面颜色和风格的系统化以及系统界面统一的操作流程，40，手机界面设计，界面效果的个性化，独特的界面框架，特殊的界面图标，界面颜色的个性化设置，41。手机界面设计，界面视觉元素规范，图形图像元素质量，线条色块和图形图像组合，42。第5部分，网站界面设计，43。网站界面设计，3C原理，准确性，对比，44。网站界面设计，3C原则，简洁。这个标题通常用图形来表示，但是图形也需要简洁。保持简单的另一个方法是限制使用的字体和颜色的数量。通常，每页

9、使用的字体不超过三种，一页使用的颜色不超过256种。页面上的所有元素都应该有明确的含义和用途。不要试图用不相关的图片来装饰页面。初学者容易犯的一个错误是让页面鸣笛，但他们不能让别人知道他想强调什么内容、主题和想法。，45，网站界面设计：3C原则一致性，排版。每页使用相同的页边距，并且文本和图形之间保持相同的距离；在主要图形、标题或符号旁边保留相同的空白；如果公司徽标放在第一页的顶部，请将此徽标放在所有其他页面上；如果您使用图标导航，每个页面应该使用相同的图标。46，网站界面设计：3C原则一致性，图片图标风格。所有的图标都应该用相同的设计风格来绘制，比如图像的所有线条剪辑或者所有真实的照片。47，网站界面设计：3C原则一致性，字体和颜色。文字的