GUI视觉设计PPT课件

3C原则
Concision(简洁) Coherence(一致性) Contrast(对比度)
醒目的标题。这个标题常常采用图形来表示 ，但图形同样要求简洁。
另一种保持简洁的做法是限制所用的字体和 颜色的数目。一般每页使用的字体不超过三 种，一个页面中使用的颜色少于256种。
按钮应具备简洁的图示效果，应能够让使用者产生功 能关联反应，群组内按钮应该风格统一，功能差异大 的按钮应该有所区别。
软件面板设计应该具有缩放功能，面板应该对 功能区间划分清晰，应该和对话框，弹出框等 风格匹配，尽量节省空间，切换方便。
软件界面
菜单设计一般有选中状态和未选中状态，左边 应为名称，右边应为快捷键，如果有下级菜单 应该有下级箭头符号，不同功能区间应该用线 条分割。
1、尺寸
16×16 32×32 48×48
64×64
96×96
128×128
2、颜色的数量
1bit→黑白两色
2bit→4色
4bit→16色
索引色
8bit→256色
24bit →真彩色
32bit →24位图像加上8位的alpha通道，8位alpha 通道产生的有明度色阶的蒙版，能够产生半透明的效 果，使图标边缘非常平滑，且与背景融合。
在按钮，功能键标示中应尽量使用描述动作的 动词；
在文字较长时，可用压缩法减少字符数或采用 一些编码方法。
格式
在屏幕显示设计中，一幅画面不要文字太 多，若必须有较多文字时，尽量分组分页 ，在关键词处进行加粗、变字体等处理， 但同行文字尽量字型统一。英文词除标语 外，尽量采用小写和易认的字体。
信息内容
信息内容显示不仅采用简洁、清楚的表达 ，还应采用用户熟悉的简单句子，尽量不 用左右滚屏。当内容较多时，应以空白分 段或以小窗口分块，以便记忆和理解。重 要字段可用粗体和闪烁吸引注意力和强化 效果，强化效果有多样，针对实际进行选 择。
限制同时显示的颜色数。一般同一画面不宜 超过4或5种，可用不同层次及形状来配合颜 色，增加变化。
使用对比是强调突出某些内容的最有效的办 法之一。
• 颜色的对比 来自百度文库 字体变化
播放器设计
播放器皮肤
播放器的界面设计
频、游戏、网络… ] 要求：1.收集整理的资料（包括文字和图形）
2.草图3张（A4） 3.图标设计作品1张（A4 注意版式） 4.一份简短的设计说明
软件界面设计是为了满足软件专业化标准化 的需求而产生的对软件的使用界面进行美化 、优化、规范化的设计分支。
具体包括：
软件启动封面设计/软件框架设计 / 按钮设计/面板设计/菜单设计/ 标签设计/图标设计/滚动条及状态栏设计/ 安装过程设计 /包装及商品化
3. 整体性
思考： 如何才能让一组图标保 持整体性？
使用Illustrator创建图标的详细过程
作业：设计一组图标或者qq表情头像（8个） [我的电脑、回收站、文本、文件夹、音乐、视
2.隐喻的优点： a 易识别 b 易记忆 c 跨文化
王羲之-兰亭序
张旭《论书贴》草书墨迹，纸本，纵38.5厘米，横40.5厘米，9行，共85字
2004年 希腊雅典
2000年悉尼
1996年亚特兰大
2008 祥云
图标的设计过程
第一阶段：图标创意阶段
画面中活动对象颜色应鲜明，而非活动对象 应暗淡
尽量避免不兼容的颜色放在一起，如黄与蓝 ，红与绿等，除非作对比时用。
若用颜色表示某种信息或对象属性，要使用 户懂得这种表示，且尽量用常规准则表示。
图标设计ICON
图标设计
图标设计
图标是一个极度限制中的设计
图标设计色彩不宜超过64色，大小为16x16、 32x32两种，图标设计是方寸艺术，应该加以 着重考虑视觉冲击力，它需要在很小的范围表 现出软件的内涵，所以很多图标设计师在设计 图标时使用简单的颜色，利用眼睛对色彩和网 点的空间混合效果，做出了许多精彩图标。
高清晰度的图像 安全色 大小适中 整体设计的统一和延续性 品牌标识：公司标志、产品商标，软件名称，
3、图标的倾斜 我们可以看到许多不同系统的图标使用了不同的倾斜.
4、风格 早期的图标很抽象，现在则是在“抽象和具体”之间不 断平衡。
图标的隐喻
1.图标的隐喻：图标的功用在于建立起计算机世界与 真实世界的一种隐喻，或者映射关系。用户通过这种 隐喻，自动地理解图标背后的意义，跨越了语言的界 限。
创意，细节，整体性
►1.创意：一个好的出发点或角度能让你的图标与众不 同，脱颖而出。
iconfactory的pixelpalooza2004图标大赛竞赛获奖作品
2. 细节：也许你的图标再加上这一点就能变成一流的 。
1 ．处的凹陷的质感： 2 ． 3 处的面的渐变： 4 ．处的渐变以及若隐若现的电路： 5 ．处的凹陷的线条： 6 ．处的反光：
GUI视觉设计
平衡原则 预期原则 经济原则 顺序原则 规则化
平衡原则
注意屏幕上下左右平衡。不要堆挤数据， 过 分拥挤的显示会产生视觉疲劳和接收错误。
预期原则
屏幕上所有对象，如窗口、按钮、菜单等处 理应一致化，使对象的动作可预期。
顺序原则
对象显示的顺序应依需要排列。通常应最先 出现对话，然后通过对话将系统分段实现。
软件包装
界面效果的整体性、一致性 界面效果的个性化 界面视觉元素的规范
界面的色彩及风格与系统界面统一 操作流程的系统化
特有的界面构架 专用的界面图标 界面色彩的个性化设置
图形图像元素的质量
线条色块与图形图像的 结合
手机界面
电视菜单界面
网站页面
规则化
画面应对称，显示命令、对话及提示行在一 个应用系统的设计中尽量统一规范。
要注意用语简洁性 格式 信息内容
要注意用语简洁性
避免使用计算机专业术语；
尽量用肯定句而不要用否定句；
用主动语态而不用被动语态；
用礼貌而不过分的强调语句进行文字会话；
英文词语尽量避免缩写；
标签设计应该注意转角部分的变化，状态可参 考按钮。
滚动条主要是为了对区域性空间的固定大小中 内容量的变换进行设计，应该有上下箭头，滚 动标等，有些还有翻页标。状态栏是为了对软 件当前状态的显示和提示。
最后软件产品的包装应该考虑保护好软件产 品，功能的宣传融合于美观中，可以印刷部 分产品介绍，产品界面设计。
图片图标风格。所有的图标都应当彩相同的 设计风格，比如全部采用图象的线条剪辑画 或全部使用写实的照片等。
字体和颜色。文字的颜色要同图像的颜色保 持一致并注意色彩搭配的和谐。一个站点通 常只使用一到两种标准色，为了保持颜色上 的一致性，标准色一致或相近。比如，站点 的主题色彩如果为红色，可能就需要将链接 的色彩也改为红色。
a确定图标的风格 b理解功能需求后，收集关于“词语——图形”之间能转
化的元素，用生活中的物或其他视觉产品来代替所要 表达的功能信息、或操作提示。例如音乐：我们会想 到，音符、光盘、音乐播放机、耳机等等。 c在视觉审美和可用性、功能性中取得平衡
草图
第二阶段设计制作：
抛开技术不谈，图标设计有 3 点是非常重要的：
版本号，网址，版权声明，序列号等
在和软件产品的程序开发员及程序使用对象进 行共同沟通，以设计出友好的，独特的，符合 程序开发原则的软件框架，符合视觉流程和用 户使用心理。
软件按钮设计应该具有交互性，即应该有3到6种状态 效果：
点击时状态； 鼠标放在上面但未点击的状态； 点击前鼠标未放在上面时的状态； 点击后鼠标未放在上面时的状态； 不能点击时状态； 独立自动变化的状态。
页面上所有的元素都应当有明确的含义和用 途。不要试图用无关的图片把页面装点起来 ，初学者容易犯的一个错误是把页面搞的花 里呼哨，却不能让别人明白他到底要突出表 达的是什么内容，主题和意念。
排版。各个页面使用相同的页边距，文本， 图形之间保持相同的间距；主要图形，标题 或符号旁边留下相同的空白；如果在第一页 的顶部放置了公司标志，那么在其他各页面 都放上这一标志；如果使用图标导航，则各 个页面应当使用相同的图标。