当前位置:文档之家› UI界面设计ppt课件

UI界面设计ppt课件

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