UI界面设计课件.ppt

4、图标设计的流程 1）、图标创意阶段 看懂界面需求，对每个图标的定义要准确清楚。 4、图标设计的流程 2）、草图绘制阶段——统一图标风格、统一透视 4、图标设计的流程 3）、草图渲染阶段 一般使用Photoshop、Illustrator、Firework、 Xara Xtreme pro等软件 课堂练习： 绘制常用移动应用图标 绘制常用电脑应用图标 四、计算器界面设计实训 五、播放器界面设计实训 六、手机主题界面设计实训 七、网站专题界面设计实训 2.按钮2，白色质感播放器按钮 表层圆形图层样式设置： 2.下层圆形 样式设置： 3.底层圆形图层样式 图标制作 三、图标制作 图标设计的意义 视觉设计的重要组成部分，用于提示与强调 使产品的功能具象化，更容易理解 使产品的人机界面更具有吸引力，富含娱乐性 形成产品的统一特征，给用户以信赖感，便于功能的记忆 创造差异化、个性化的美，强化装饰性作用 图标设计是一种艺术创作、能提高产品的品味 图标设计的表现方式灵活自由、可以传达不同的产品理念 图标设计是在屏幕上展示产品的最佳方式 1、图标设计的意义 1）、视觉设计的重要组成部分，用于提示与强调 2）、使产品的功能具象化，更容易理解 1、图标设计的意义 3）、使产品的人机界面更具有吸引力，富含娱乐性 1、图标设计的意义 4）、图标设计是一种艺术创作、能提高产品的品味 1、图标设计的意义 4）、图标设计是一种艺术创作、能提高产品的品味 1、图标设计的意义 5）、图标设计的表现方式灵活自由、可以传达不同的产品理念 1、图标设计的意义 6）、图标设计是在屏幕上展示产品的最佳方式 2、图标设计的原则 1）、精美、直观、生动的图标 2、图标设计的原则 1）、精美、直观、生动的图标 2、图标设计的原则 2）、图标的唯一性——准确、易识别、易理解 2、图标设计的原则 3）、系列图标风格统一、整体性强 2、图标设计的原则 4）、主题文化性 3、图标设计的规格 图标文件的类型：.ico文件，图标文件大都是.ico格式 图标的一般尺寸：16x16像素、32x32像素、48x48像素、64x64像素、96x96像素、256x256像素 7）、快捷方式的组合 在菜单及按钮中使用快捷键可以让用户操作的更加快捷因此在一些软件设计中会把的常用的功能用图标按钮的形式摆在工具条上或用快捷件。 如在犀牛软件中按住中间滚轮就能弹出常用的功能键或者在CAD软件中每个常用工具都会有个相应的英文快捷键。直线工具：L(line) 8）、连续性 一个有序的连续的界面能让用户轻松使用。在排列和版面布局上要有序，是水平排列还是垂直排列还是两者都有之。如QQ界面。 9）.方便退出 在界面的使用上要设计方便退出，提供不同可能性，如手机的退出，是按一个键就可退出还是一层一层的退出。 10）.帮助系统 它可以帮助用户更快捷、更好的学习界面的使用，告诉用户在遇到某些使用问题时该如何处理、减少用户在使用中的挫折感。 2.UI界面设计中的构成方法-网页界面构图原则及方法 对称平衡 如果你想在你的网页看上去美观和优雅，那么你应该做一个网站对称。 2.1网页设计构图原则 不对称平衡 不对称平衡带来一种自由随意的感觉。尽管有时候看上去不是那么自然，但是它还是经常在网页设计中得到实用。 水平平衡 如果你想在你的网页看上去美观和优雅，那么你应该做一个网站对称。 垂直平衡 垂直结构用于头部和底部的元素非常相似的情形。这样的布局往往运用于小元素的展示。 F模式 ·用户极少逐字阅读文字。 ·每个段落的开始两个字最为重要，这将决定内容是否能留住用户。 ·初始段落，副标题和要点都要保持醒目。 Z模式 Z模式几乎可以适用到任何的网页交互，Z模式的优点就是简单。 如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。 当然，这些都不是绝对的。当Z模式简化布局，就可以增加转化率 2.2两种主要的网页浏览模式 ①九宫格网格构图 这种版式主要运用在分类为主的一级页面，起到功能分类的作用。 ②圆心点放射形构图 我们将主要的功能设置在版式的中位置，就能引导用户的视线聚集在想要突出的功能点上，就算视线本来不在中间的位置，也能引导用户再次回到中心的聚集处。 2.UI界面设计中的构成方法-手机移动界面构图方法 2.3 UI界面设计中的构成方法-手机移动界面中的版式设计原理 ③三角形构图 主要运用在文字与图标的版式中，让界面保持平衡稳定。从上至下式的三角形构图，能把信息层级罗列得更为规整和明确。 在界面中三角形构图大部分都是图在上，字在下，阅读更为舒服，有重点有描述。 ④SF字形构图 在进行界面设计的时候，对用户的视觉移动方向的预设 是非常重要的。 在界面中加入更为顺畅的构图设计引导用户视