《UI界面设计报告》由会员分享,可在线阅读,更多相关《UI界面设计报告(49页珍藏版)》请在金锄头文库上搜索。
1、UIUI界面界面设计设计主讲人:宋彬彬主讲人:宋彬彬2010-07-222010-07-22今天的内容今天的内容UI的概念UI界面设计要素软件界面设计手机界面设计网站界面设计Part 1 Part 1 UIUI的概念的概念UIUI的概念的概念UI的本意是用户界面 是英文用户User和和 界面界面Interface的缩写。人机交互操作逻辑界面美观衡量UI设计的标准: 用用户体体验User Experience 用户体验是以用户为中心的设计UCD/User Centered Design中最重要的一个部分,强调的是过程,是软件对用户行为产生的反应与用户期待值的误差测试,这种误差越小,也就越符合以用
2、户为中心的设计原则。Part 2 Part 2 UIUI界面界面设计设计要要素素UIUI界面界面设计设计要素要素文字与文字与用用语颜色色布局布局UIUI界面界面设计设计要素:要素:布局布局平衡原则预期原则经济原则顺序原则规则化UIUI界面界面设计设计要素:要素:布局布局平衡原平衡原则 注意屏幕上下左右平衡。不要堆挤数据,过分拥挤的显示会产生视觉疲和接收错误。UIUI界面界面设计设计要素:要素:布局布局预期原期原则 屏幕上所有对象,如窗口、按钮、菜单等处理应一致化,使对象的动作可预期。UIUI界面界面设计设计要素:要素:布局布局顺序原序原则 对象显示的顺序应依需要排列。通常应最先出现对话,然后通
3、过对话将系统分段实现。UIUI界面界面设计设计要素:要素:布局布局规则化化 画面应对称,显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。UIUI界面界面设计设计要素:要素:文字与用文字与用语语要注意用语简洁性格式信息内容UIUI界面界面设计设计要素:要素:文字与用文字与用语语要注意用要注意用语简洁性性p避免使用避免使用计算机算机专业术语;p尽量用肯定句肯定句而不要用否定句;p用主主动语态而不用被动语态;p用礼貌礼貌而不过分的强调语句进行文字会话;p英文词语尽量避免避免缩写写;p在按钮,功能键标示中应尽量使用描述动作的动词;p在文字较长时,可用压缩法减少字符数减少字符数或采用一些编码方
4、法。UIUI界面界面设计设计要素:要素:文字与用文字与用语语格式格式 在屏幕显示设计中,一幅画面不要文字太多,若必须有较多文字时,尽量分分组分分页,在关键词处进行加粗、加粗、变字体字体等处理,但同行文字尽量字型字型统一一。英文词除标语外,尽量采用小写和易小写和易认的字体的字体。格式格式格式格式UIUI界面界面设计设计要素:要素:文字与用文字与用语语信息内容 信息内容显示不仅采用简洁、清楚的表达,还应采用用户熟悉的简单句子句子,尽量不用左右滚屏。当内容较多时,应以空白分段空白分段或以小窗口分或以小窗口分块,以便记忆和理解。重要字段可用粗体和闪烁吸引注意力吸引注意力和强化效果,强化效果有多样,针对
5、实际进行选择。UIUI界面界面设计设计要素:要素:颜颜色的使用色的使用限制同限制同时显示的示的颜色数色数。一般同一画面不宜超过4或5种,可用不同层次及形状来配合颜色,增加变化。画面中活活动对象象颜色色应鲜明明,而非活动对象应暗淡尽量避免不兼容的避免不兼容的颜色放在一起色放在一起,如黄与蓝,红与绿等,除非作对比时用。若用用颜色表示某种信息或色表示某种信息或对象属性象属性,要使用户懂得这种表示,且尽量用常规准则表示。Part 3 Part 3 软软件界面件界面设计设计软软件界面件界面设计设计软件界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化、优化、规范化的设计分支。 糟糕
6、的界面糟糕的界面未未未未经经经经美化的程序界面美化的程序界面美化的程序界面美化的程序界面windows95windows95windows7windows7软软件界面件界面设计设计具体包括: 软件启动封面设计/软件框架设计 / 按钮设计/面板设计/菜单设计/ 标签设计/图标设计/滚动条及状态栏设计/ 安装过程设计 /包装及商品化 软软件界面件界面设计设计: :软软件启件启动动封面封面设计设计高清晰度的图像安全色大小适中整体设计的统一和延续性品牌标识:公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等 软软件界面件界面设计设计: :软软件件框架框架设计设计在和软件产品的程序开发员及程
7、序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架,符合视觉流程和用户使用心理。软软件界面件界面设计设计: :软软件件框架框架设计设计软软件界面件界面设计设计: :软软件件按按钮钮设计设计软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。 软软件界面件界面设计设计: :软软件件面板面板设计设计软件面板设计应该具有缩放功能,
8、面板应该对功能区间划分清晰,应该和对话框,弹出框等风格匹配,尽量节省空间,切换方便。 软软件界面件界面设计设计: :菜菜单单设计设计菜单设计一般有选中状态和未选中状态,左边应为名称,右边应为快捷键,如果有下级菜单应该有下级箭头符号,不同功能区间应该用线条分割。软软件界面件界面设计设计: :菜菜单单设计设计软软件界面件界面设计设计: :标签标签设计设计标签设计应该注意转角部分的变化,状态可参考按钮。软软件界面件界面设计设计: :图标图标设计设计图标设计色彩不宜超过64色,大小为16x16、32x32两种,图标设计是方寸艺术,应该加以着重考虑视觉冲击力,它需要在很小的范围表现出软件的内涵,所以很多
9、图标设计师在设计图标时使用简单的颜色,利用眼睛对色彩和网点的空间混合效果,做出了许多精彩图标。软软件界面件界面设计设计: :滚动滚动条及状条及状态栏设计态栏设计滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计,应该有上下箭头,滚动标等,有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。软软件界面件界面设计设计: :包装及商品化包装及商品化最后软件产品的包装应该考虑保护好软件产品,功能的宣传融合于美观中,可以印刷部分产品介绍,产品界面设计。Part 4 Part 4 手机手机界面界面设计设计手机界面手机界面设计设计界面效果的整体性、一致性界面效果的个性化界面视觉元素的规范手机手
10、机手机手机界面界面界面界面设计设计设计设计: : : :界面效果的整体性、一致性界面效果的整体性、一致性 界面的色彩及风格与系统界面统一操作流程的系统化手机手机手机手机界面界面界面界面设计设计设计设计: : : :界面效果的界面效果的个性化个性化特有的界面构架专用的界面图标界面色彩的个性化设置手机手机手机手机界面界面界面界面设计设计设计设计: : : :界面界面视觉视觉元素的元素的规规范范图形图像元素的质量线条色块与图形图像的结合Part 5 Part 5 网站网站界面界面设计设计网站网站界面界面设计设计3C原则 Concision(简洁) Coherence(一致性一致性) Contrast
11、(对比度比度)网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则简洁简洁醒目的醒目的标题。这个标题常常采用图形来表示,但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和限制所用的字体和颜色的数目。色的数目。一般每页使用的字体不超过三种,一个页面中使用的颜色少于256种。页面上所有的元素都面上所有的元素都应当有明确的含当有明确的含义和用和用途途。不要试图用无关的图片把页面装点起来,初学者容易犯的一个错误是把页面搞的花里呼哨,却不能让别人明白他到底要突出表达的是什么内容,主题和意念。网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则一
12、致性一致性排版。排版。各个页面使用相同的页边距,文本,图形之间保持相同的间距;主要图形,标题或符号旁边留下相同的空白;如果在第一页的顶部放置了公司标志,那么在其他各页面都放上这一标志;如果使用图标导航,则各个页面应当使用相同的图标。网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则一致性一致性图片片图标风格格。所有的图标都应当彩相同的设计风格,比如全部采用图象的线条剪辑画或全部使用写实的照片等。网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则一致性一致性字体和字体和颜色色。文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。一个站点通常只使用一到两种标准色,为了保持颜色上的一致性,标准色一致或相近。比如,站点的主题色彩如果为红色,可能就需要将链接的色彩也改为红色。网站网站网站网站界面界面界面界面设计设计设计设计: : : :3C3C原原则则对对比度比度使用对比是强调突出某些内容突出某些内容的最有效的办法之一。颜色的对比字体变化