UI界面设计讲解.ppt

《UI界面设计讲解.ppt》由会员分享，可在线阅读，更多相关《UI界面设计讲解.ppt（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、学习内容学习内容UIUI的概念的概念UIUI界面设计要素界面设计要素软件界面设计软件界面设计手机界面设计手机界面设计网站界面设计网站界面设计UIUI的本意是用户界面的本意是用户界面 是英文是英文用户用户UserUser和和 界面界面InterfaceInterface的缩写。的缩写。衡量衡量UIUI设计设计的的标准标准： 用户体验用户体验User ExperienceUser Experience 用户体验用户体验是以用户为中心的设计是以用户为中心的设计UCDUCD/User Centered Design/User Centered Design中最重要的一个中最重要的一个部分，强调的是过程

2、，是软件对用户行为产部分，强调的是过程，是软件对用户行为产生的反应与用户期待值的误差测试，这种误生的反应与用户期待值的误差测试，这种误差越小，也就越符合以用户为中心的设计原差越小，也就越符合以用户为中心的设计原则。则。平衡原则平衡原则预期原则预期原则经济原则经济原则顺序原则顺序原则规则化规则化平衡原则平衡原则 注意屏幕上下左右平衡。不要堆挤数据，注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示会产生视觉疲和接收错误。过分拥挤的显示会产生视觉疲和接收错误。预期原则预期原则 屏幕上所有对象，如窗口、按钮、菜单等屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。处理应一致化，使

3、对象的动作可预期。顺序原则顺序原则 对象显示的顺序应依需要排列。通常应最对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。先出现对话，然后通过对话将系统分段实现。规则化规则化 画面应对称，显示命令、对话及提示行在画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。一个应用系统的设计中尽量统一规范。要注意用语简洁性要注意用语简洁性格式格式信息内容信息内容要注意用语简洁性要注意用语简洁性p避免使用计算机专业术语避免使用计算机专业术语；p尽量用尽量用肯定句肯定句而不要用否定句；而不要用否定句；p用用主动语态主动语态而不用被动语态；而不用被动语态；p用用礼貌

4、礼貌而不过分的强调语句进行文字会话；而不过分的强调语句进行文字会话；p英文词语尽量英文词语尽量避免缩写避免缩写；p在按钮，功能键标示中应尽量使用描述在按钮，功能键标示中应尽量使用描述动动作的作的动词动词；p在文字较长时，可用压缩法在文字较长时，可用压缩法减少字符数减少字符数或采用或采用一些编码方法。一些编码方法。格式格式 在屏幕显示设计中，一幅画面不要文在屏幕显示设计中，一幅画面不要文字太多，若必须有较多文字时，尽量字太多，若必须有较多文字时，尽量分组分组分页分页，在关键词处进行，在关键词处进行加粗、变字体加粗、变字体等处等处理，但同行文字尽量理，但同行文字尽量字型统一字型统一。英文词除。英文

5、词除标语外，尽量采用标语外，尽量采用小写和易认的字体小写和易认的字体。信息内容信息内容 采用简洁、清楚的表达，还应采用用采用简洁、清楚的表达，还应采用用户熟悉的户熟悉的简单句子简单句子，尽量不用左右滚屏。，尽量不用左右滚屏。当内容较多时，应以当内容较多时，应以空白分段或以小窗口空白分段或以小窗口分块分块，以便记忆和理解。重要字段可用粗，以便记忆和理解。重要字段可用粗体和闪烁体和闪烁吸引注意力吸引注意力和强化效果，强化效和强化效果，强化效果有多样，针对实际进行选择。果有多样，针对实际进行选择。限制同时显示的颜色数限制同时显示的颜色数。一般同一画面不宜一般同一画面不宜超过超过4 4或或5 5种，可

6、用不同层次及形状来配合颜种，可用不同层次及形状来配合颜色，增加变化。色，增加变化。画面中画面中活动对象颜色应鲜明活动对象颜色应鲜明，而非活动对象，而非活动对象应暗淡应暗淡尽量尽量避免不兼容的颜色放在一起避免不兼容的颜色放在一起，如黄与蓝，如黄与蓝，红与绿等，除非作对比时用。红与绿等，除非作对比时用。若若用颜色表示某种信息或对象属性用颜色表示某种信息或对象属性，要使用，要使用户懂得这种表示，且尽量用常规准则表示。户懂得这种表示，且尽量用常规准则表示。软件界面设计是为了满足软件专业化标准化软件界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化的需求而产生的对软件的使用界面进行

7、美化、优化优化、规范化的设计分支。规范化的设计分支。 具体具体包括：包括： 软件启动封面设计软件启动封面设计/ /软件框架设计软件框架设计 / / 按钮设计按钮设计/ /面板设计面板设计/ /菜单设计菜单设计/ / 标签设计标签设计/ /图标设计图标设计/ /滚动条及状态栏设计滚动条及状态栏设计/ / 安装过程设计安装过程设计 / /包装及商品化包装及商品化 高清晰度的图像高清晰度的图像安全色安全色大小适中大小适中整体设计的统一和延续性整体设计的统一和延续性品牌标识：品牌标识：公司标志、产品商标，软件名称，公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等版本号，网址，版权声明，序

8、列号等 在和软件产品的程序开发员及程序使用对象进在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出行共同沟通，以设计出友好的友好的、独特的独特的、符合符合程序开发原则程序开发原则的软件框架的软件框架，符合符合视觉流程视觉流程和和用用户使用心理户使用心理。软件按钮设计应该具有交互性，即应该有软件按钮设计应该具有交互性，即应该有3 3到到6 6种状态效果：点击时状态；鼠标放在上面但未种状态效果：点击时状态；鼠标放在上面但未点击的状态；点击前鼠标未放在上面时的状态；点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不能点击时点击后鼠标未放在上面时的状态；不能点击时状态

9、；独立自动变化的状态。按钮应具备简洁状态；独立自动变化的状态。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别。按钮应该有所区别。 软件面板设计应该具有缩放功能，面板应该对软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框，弹出框等功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便。风格匹配，尽量节省空间，切换方便。 菜单设计一般有选中状态和未选中状态，左边菜单设计一般有选中状态和未选中状态，左边应为名称，右边应

10、为快捷键，如果有下级菜单应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线应该有下级箭头符号，不同功能区间应该用线条分割。条分割。标签设计应该注意转角部分的变化，状态可参标签设计应该注意转角部分的变化，状态可参考按钮。考按钮。图标设计色彩不宜超过图标设计色彩不宜超过6464色，大小为色，大小为16x1616x16、32x3232x32两种，图标设计是方寸艺术，应该加以两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计现出软件的内涵，所以很多图标设计师在设计图标时

11、使用简单的颜色，利用眼睛对色彩和网图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。点的空间混合效果，做出了许多精彩图标。滚动条主要是为了对区域性空间的固定大小中滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头，滚内容量的变换进行设计，应该有上下箭头，滚动标等，有些还有翻页标。状态栏是为了对软动标等，有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。件当前状态的显示和提示。最后软件产品的包装应该考虑保护好软件产最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中，可以印刷部品，功能的宣传融合于美观中，可以印刷部分产品介绍

12、，产品界面设计。分产品介绍，产品界面设计。界面效果的整体性、一致性界面效果的整体性、一致性 界面效果的个性化界面效果的个性化 界面视觉元素的规范界面视觉元素的规范界面的色彩及风格与系统界面统一界面的色彩及风格与系统界面统一 操作流程的系统化操作流程的系统化 特有的界面构架特有的界面构架专用的界面图标专用的界面图标界面色彩的个性化设置界面色彩的个性化设置图形图像元素的质量图形图像元素的质量线条色块与图形图像的结合线条色块与图形图像的结合3C原则 Concision(简洁简洁) Coherence(一致性一致性) Contrast(对比度对比度)醒目的标题醒目的标题。这个标题常常采用图形来表示，但

13、这个标题常常采用图形来表示，但图形同样要求简洁。图形同样要求简洁。另一种保持简洁的做法是另一种保持简洁的做法是限制所用的字体和颜色限制所用的字体和颜色的数目。的数目。一般每页使用的字体不超过三种，一个一般每页使用的字体不超过三种，一个页面中使用的颜色少于页面中使用的颜色少于256256种。种。页面上所有的元素都应当有明确的含义和用途页面上所有的元素都应当有明确的含义和用途。不要试图用无关的图片把页面装点起来，初学者不要试图用无关的图片把页面装点起来，初学者容易犯的一个错误是把页面搞的花里呼哨，却不容易犯的一个错误是把页面搞的花里呼哨，却不能让别人明白他到底要突出表达的是什么内容，能让别人明白他

14、到底要突出表达的是什么内容，主题和意念。主题和意念。排版。排版。各个页面使用相同的页边距，文本，各个页面使用相同的页边距，文本，图形之间保持相同的间距；主要图形，标题图形之间保持相同的间距；主要图形，标题或符号旁边留下相同的空白；如果在第一页或符号旁边留下相同的空白；如果在第一页的顶部放置了公司标志，那么在其他各页面的顶部放置了公司标志，那么在其他各页面都放上这一标志；如果使用图标导航，则各都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标。个页面应当使用相同的图标。图片图标图片图标风格风格。所有的图标都应当彩相同的所有的图标都应当彩相同的设计风格，比如全部采用图象的线条剪辑画设计

15、风格，比如全部采用图象的线条剪辑画或全部使用写实的照片等。或全部使用写实的照片等。字体和颜色字体和颜色。文字的颜色要同图像的颜色保文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。一个站点通持一致并注意色彩搭配的和谐。一个站点通常只使用一到两种标准色，为了保持颜色上常只使用一到两种标准色，为了保持颜色上的一致性，标准色一致或相近。比如，站点的一致性，标准色一致或相近。比如，站点的主题色彩如果为红色，可能就需要将链接的主题色彩如果为红色，可能就需要将链接的色彩也改为红色。的色彩也改为红色。使用对比是使用对比是强调突出某些内容强调突出某些内容的最有效的办的最有效的办法之一。法之一。颜色的对比颜色的对比字体变化字体变化