UI界面设计总结课件.ppt

2.按钮2，白色质感播放器按钮 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字形构图 在进行界面设计的时候，对用户的视觉移动方向的预设 是非常重要的。 在界面中加入更为顺畅的构图设计引导用户视线移动的元素，就能使用户更多的观察到产品的核心和产品的卖点。 2.UI界面设计中的构成方法-手机移动界面构图方法 2.3 UI界面设计中的构成方法-手机移动界面中的版式设计原理 2.3 UI界面设计中的构成方法-手机移动界面中的版式设计原理 ⑤信息的排布 对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。 对齐 重复和对比 亲密性 2.UI界面设计中的构成方法-手机移动界面中的版式设计原理 ⑥图片的使用 页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果。 图版率高、有感染力 图版率低、宁静典雅 使用色块提高图版率 拟物绘图提高图版率 在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。 邻近色、同色系、渐变、对比色、明暗色、多色搭配等颜色搭配 ⑦颜色的使用 ⑧留白的艺术 一、能使页面的空间感更强，视线更开阔，通过留白来减轻页面的压迫感，使用户进入一种轻松的氛围。 二、通过留白区分元素的存在，弱化元素与元素之间的阻隔 三、通过留白有目的的突出表达的重点 四、赋予页面构成产生不同的变化 ① ② ③ ④ 在观看事物时，往往会产生一些不同的视觉心理，著作权归作者所有。 在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导，也能让设计师快速找到一些排版布局的方法。 ⑨视觉心理的灵活运用 通栏、间距通常采用黄金比例 圆角、圆形比直角更容易让人接受 照片、相片通常使用方形展示 避免单调，增加页面节奏感 通过蒙版的方式控制页面色调 ⑩没有设计的设计 每一条线/每一行文字/每一个按钮的存在都是都有它存在的理由。它不加无意义的修饰、不须陪村和烘托，让用户更关注内容的主体，弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。 让用户感知不到刻意的设计，一切的发生都是那么自然。 3.UI界面设计风格 1.扁平化：风格简单，无特效；排版简洁；色彩绚丽；二维效果； 2.拟物化：3D特效