UI界面设计ppt课件.ppt

UIUI界面界面设计设计1学习内容学习内容UIUI的概念的概念UIUI界面设计要素界面设计要素软件界面设计软件界面设计界面设计界面设计网站界面设计网站界面设计2Part 1 Part 1 UIUI的概念的概念3UIUI的概念的概念UIUI的本意是用户界面的本意是用户界面 是英文是英文用户用户UserUser和和 界面界面InterfaceInterface的缩写人机交互操作逻辑界面美观4衡量衡量UIUI设计设计的的标准标准：： 用户体验用户体验User ExperienceUser Experience 用户体验用户体验是以用户为中心的设计是以用户为中心的设计UCDUCD/User Centered Design/User Centered Design中最重要的一个中最重要的一个部分，强调的是过程，是软件对用户行为产部分，强调的是过程，是软件对用户行为产生的反应与用户期待值的误差测试，这种误生的反应与用户期待值的误差测试，这种误差越小，也就越符合以用户为中心的设计原差越小，也就越符合以用户为中心的设计原则5Part 2 Part 2 UIUI界面界面设计设计要要素素6UIUI界面界面设计设计要素要素文字与文字与用用语颜色色布局布局7UIUI界面界面设计设计要素：要素：布局布局平衡原则平衡原则预期原则预期原则经济原则经济原则顺序原则顺序原则规则化规则化8UIUI界面界面设计设计要素：要素：布局布局平衡原则平衡原则 注意屏幕上下左右平衡。

不要堆挤数据，注意屏幕上下左右平衡不要堆挤数据，过分拥挤的显示会产生视觉疲和接收错误过分拥挤的显示会产生视觉疲和接收错误9UIUI界面界面设计设计要素：要素：布局布局预期原则预期原则 屏幕上所有对象，如窗口、按钮、菜单等屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期处理应一致化，使对象的动作可预期10UIUI界面界面设计设计要素：要素：布局布局顺序原则顺序原则 对象显示的顺序应依需要排列通常应最对象显示的顺序应依需要排列通常应最先出现对话，然后通过对话将系统分段实现先出现对话，然后通过对话将系统分段实现11UIUI界面界面设计设计要素：要素：布局布局规则化规则化 画面应对称，显示命令、对话及提示行在画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范一个应用系统的设计中尽量统一规范12UIUI界面界面设计设计要素：要素：文字与用文字与用语语要注意用语简洁性要注意用语简洁性格式格式信息内容信息内容13UIUI界面界面设计设计要素：要素：文字与用文字与用语语要注意用语简洁性要注意用语简洁性p避免使用计算机专业术语避免使用计算机专业术语；；p尽量用尽量用肯定句肯定句而不要用否定句；而不要用否定句；p用用主动语态主动语态而不用被动语态；而不用被动语态；p用用礼貌礼貌而不过分的强调语句进行文字会话；而不过分的强调语句进行文字会话；p英文词语尽量英文词语尽量避免缩写避免缩写；；p在按钮，功能键标示中应尽量使用描述在按钮，功能键标示中应尽量使用描述动动作的作的动词动词；；p在文字较长时，可用压缩法在文字较长时，可用压缩法减少字符数减少字符数或采用或采用一些编码方法。

一些编码方法14UIUI界面界面设计设计要素：要素：文字与用文字与用语语格式格式 在屏幕显示设计中，一幅画面不要文在屏幕显示设计中，一幅画面不要文字太多，若必须有较多文字时，尽量字太多，若必须有较多文字时，尽量分组分组分页分页，在关键词处进行，在关键词处进行加粗、变字体加粗、变字体等处等处理，但同行文字尽量理，但同行文字尽量字型统一字型统一英文词除英文词除标语外，尽量采用标语外，尽量采用小写和易认的字体小写和易认的字体15格式格式16格式格式17UIUI界面界面设计设计要素：要素：文字与用文字与用语语信息内容信息内容 采用简洁、清楚的表达，还应采用用采用简洁、清楚的表达，还应采用用户熟悉的户熟悉的简单句子简单句子，尽量不用左右滚屏尽量不用左右滚屏当内容较多时，应以当内容较多时，应以空白分段或以小窗口空白分段或以小窗口分块分块，以便记忆和理解重要字段可用粗，以便记忆和理解重要字段可用粗体和闪烁体和闪烁吸引注意力吸引注意力和强化效果，强化效和强化效果，强化效果有多样，针对实际进行选择果有多样，针对实际进行选择18UIUI界面界面设计设计要素：要素：颜颜色的使用色的使用限制同时显示的颜色数限制同时显示的颜色数。

一般同一画面不宜一般同一画面不宜超过超过4 4或或5 5种，可用不同层次及形状来配合颜种，可用不同层次及形状来配合颜色，增加变化色，增加变化画面中画面中活动对象颜色应鲜明活动对象颜色应鲜明，而非活动对象，而非活动对象应暗淡应暗淡尽量尽量避免不兼容的颜色放在一起避免不兼容的颜色放在一起，如黄与蓝，，如黄与蓝，红与绿等，除非作对比时用红与绿等，除非作对比时用若若用颜色表示某种信息或对象属性用颜色表示某种信息或对象属性，要使用，要使用户懂得这种表示，且尽量用常规准则表示户懂得这种表示，且尽量用常规准则表示19Part 3 Part 3 软软件界面件界面设计设计20软软件界面件界面设计设计软件界面设计是为了满足软件专业化标准化软件界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化的需求而产生的对软件的使用界面进行美化、、优化优化、、规范化的设计分支规范化的设计分支 21糟糕的界面糟糕的界面22未未未未经经经经美化的程序界面美化的程序界面美化的程序界面美化的程序界面23windows95windows9524windows7windows725软软件界面件界面设计设计具体具体包括：包括： 软件启动封面设计软件启动封面设计/ /软件框架设计软件框架设计 / / 按钮设计按钮设计/ /面板设计面板设计/ /菜单设计菜单设计/ / 标签设计标签设计/ /图标设计图标设计/ /滚动条及状态栏设计滚动条及状态栏设计/ / 安装过程设计安装过程设计 / /包装及商品化包装及商品化 26软软件界面件界面设计设计: :软软件启件启动动封面封面设计设计高清晰度的图像高清晰度的图像安全色安全色大小适中大小适中整体设计的统一和延续性整体设计的统一和延续性品牌标识：品牌标识：公司标志、产品商标，软件名称，版公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等本号，网址，版权声明，序列号等 27软软件界面件界面设计设计: :软软件件框架框架设计设计在和软件产品的程序开发员及程序使用对象进在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出行共同沟通，以设计出友好的友好的、、独特的独特的、、符合符合程序开发原则程序开发原则的软件框架的软件框架，，符合符合视觉流程视觉流程和和用用户使用心理户使用心理。

28软软件界面件界面设计设计: :软软件件框架框架设计设计29软软件界面件界面设计设计: :软软件件按按钮钮设计设计软件按钮设计应该具有交互性，即应该有软件按钮设计应该具有交互性，即应该有3 3到到6 6种状态效果：点击时状态；鼠标放在上面但未种状态效果：点击时状态；鼠标放在上面但未点击的状态；点击前鼠标未放在上面时的状态；点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不能点击时点击后鼠标未放在上面时的状态；不能点击时状态；独立自动变化的状态按钮应具备简洁状态；独立自动变化的状态按钮应具备简洁的图示效果，应能够让使用者产生功能关联反的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别按钮应该有所区别 30软软件界面件界面设计设计: :软软件件面板面板设计设计软件面板设计应该具有缩放功能，面板应该对软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框，弹出框等功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便风格匹配，尽量节省空间，切换方便。

31软软件界面件界面设计设计: :菜菜单单设计设计菜单设计一般有选中状态和未选中状态，左边菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键，如果有下级菜单应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线应该有下级箭头符号，不同功能区间应该用线条分割32软软件界面件界面设计设计: :菜菜单单设计设计33软软件界面件界面设计设计: :标签标签设计设计标签设计应该注意转角部分的变化，状态可参标签设计应该注意转角部分的变化，状态可参考按钮34软软件界面件界面设计设计: :图标图标设计设计图标设计色彩不宜超过图标设计色彩不宜超过6464色，大小为色，大小为16x1616x16、、32x3232x32两种，图标设计是方寸艺术，应该加以两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。

点的空间混合效果，做出了许多精彩图标35软软件界面件界面设计设计: :滚动滚动条及状条及状态栏设计态栏设计滚动条主要是为了对区域性空间的固定大小中滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头，滚内容量的变换进行设计，应该有上下箭头，滚动标等，有些还有翻页标状态栏是为了对软动标等，有些还有翻页标状态栏是为了对软件当前状态的显示和提示件当前状态的显示和提示36软软件界面件界面设计设计: :包装及商品化包装及商品化最后软件产品的包装应该考虑保护好软件产最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中，可以印刷部品，功能的宣传融合于美观中，可以印刷部分产品介绍，产品界面设计分产品介绍，产品界面设计37Part 4 Part 4 界面界面设计设计38界面界面设计设计界面效果的整体性、一致性界面效果的整体性、一致性 界面效果的个性化界面效果的个性化 界面视觉元素的规范界面视觉元素的规范39界面界面界面界面设计设计设计设计: : : :界面效果的整体性、一致性界面效果的整体性、一致性￿ ￿界面的色彩及风格与系统界面统一界面的色彩及风格与系统界面统一 操作流程的系统化操作流程的系统化 40界面界面界面界面设计设计设计设计: : : :界面效果的界面效果的个性化个性化特有的界面构架特有的界面构架专用的界面图标专用的界面图标界面色彩的个性化设置界面色彩的个性化设置41界面界面界面界面设计设计设计设计: : : :界面界面视觉视觉元素的元素的规规范范图形图像元素的质量图形图像元素的质量线条色块与图形图像的结合线条色块与图形图像的结合42Part 5 Part 5 网站网站界面界面设计设计43网站网站界面界面设计设计3C原则 Concision(简洁) Coherence(一致性一致性) Contrast(对比度比度)44网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则————简洁简洁醒目的标题醒目的标题。

这个标题常常采用图形来表示，但这个标题常常采用图形来表示，但图形同样要求简洁图形同样要求简洁另一种保持简洁的做法是另一种保持简洁的做法是限制所用的字体和颜色限制所用的字体和颜色的数目一般每页使用的字体不超过三种，一个一般每页使用的字体不超过三种，一个页面中使用的颜色少于页面中使用的颜色少于256256种页面上所有的元素都应当有明确的含义和用途页面上所有的元素都应当有明确的含义和用途不要试图用无关的图片把页面装点起来，初学者不要试图用无关的图片把页面装点起来，初学者容易犯的一个错误是把页面搞的花里呼哨，却不容易犯的一个错误是把页面搞的花里呼哨，却不能让别人明白他到底要突出表达的是什么内容，能让别人明白他到底要突出表达的是什么内容，主题和意念主题和意念45网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则————一致性一致性排版各个页面使用相同的页边距，文本，各个页面使用相同的页边距，文本，图形之间保持相同的间距；主要图形，标题图形之间保持相同的间距；主要图形，标题或符号旁边留下相同的空白；如果在第一页或符号旁边留下相同的空白；如果在第一页的顶部放置了公司标志，那么在其他各页面的顶部放置了公司标志，那么在其他各页面都放上这一标志；如果使用图标导航，则各都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标。

个页面应当使用相同的图标46网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则————一致性一致性图片图标图片图标风格风格所有的图标都应当彩相同的所有的图标都应当彩相同的设计风格，比如全部采用图象的线条剪辑画设计风格，比如全部采用图象的线条剪辑画或全部使用写实的照片等或全部使用写实的照片等47网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则————一致性一致性字体和颜色字体和颜色文字的颜色要同图像的颜色保文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐一个站点通持一致并注意色彩搭配的和谐一个站点通常只使用一到两种标准色，为了保持颜色上常只使用一到两种标准色，为了保持颜色上的一致性，标准色一致或相近比如，站点的一致性，标准色一致或相近比如，站点的主题色彩如果为红色，可能就需要将链接的主题色彩如果为红色，可能就需要将链接的色彩也改为红色的色彩也改为红色48网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则————对对比度比度使用对比是使用对比是强调突出某些内容强调突出某些内容的最有效的办的最有效的办法之一。

法之一•颜色的对比颜色的对比•字体变化字体变化49。