UI界面设计课件[宣讲].ppt

按钮；加载loading；日历界面；旗帜元素；评价五角星的满意度；好评度评价体系元素； 网站常用运用到的提示；错误；警告；验证成功等标志元素； 还有视频界面；音频界面和tab切换界面的设计。 1.常用图形制作 * 精品PPT | 实用可编辑 按钮制作： * 精品PPT | 实用可编辑 * 精品PPT | 实用可编辑 1、打开Adobe Photoshop，执行菜单：“文件”／“新建”（快捷键Ctrl+N），弹出新建对话框，设置名称：按钮，宽度：570像素，高度：400像素，分辨率：72像素／英寸，颜色模式：RGB颜色、8位，背景内容：白色，设置完毕后单击确定按钮，如图1所示。 * 精品PPT | 实用可编辑 2、在图层面板上单击创建新图层按钮，新建一个图层4，再工具箱选择圆角矩形工具，并按住键盘中Shift不放在工作区拖出一个圆角矩形，按键盘快捷键Ctrl+Enter转换为选区，设置前景色为蓝色，按键盘快捷键Ctrl+D取消选区，如图2所示。效果图如图3所示。 * 精品PPT | 实用可编辑 3、调整图层样式，具体数据参照以下几个表 * 精品PPT | 实用可编辑 * 精品PPT | 实用可编辑 * 精品PPT | 实用可编辑 * 精品PPT | 实用可编辑 * 精品PPT | 实用可编辑 * 精品PPT | 实用可编辑 4、选择图层4，复制一个图层4副本并给图层4副本添加蒙版，如图11所示。 * 精品PPT | 实用可编辑 5、单击工具箱中的横排文字工具 ，输入school，然后在工具选项栏上设置字体参考图12，如图12所示。 * 精品PPT | 实用可编辑 6、在图层控制面板新建一个图层或者（按快捷键Shift+Ctrl+N），接着在工具箱中选择钢笔工具，在属性栏中设置钢笔为路径，接着再工作区绘制出一个不规则的形状，按键盘快捷键Ctrl+Enter转换为选区，设置前景色为白色，按键盘快捷键Ctrl+D取消选区，并设置不透明度为30%。如图所示。 * 精品PPT | 实用可编辑 2.按钮2，白色质感播放器按钮 * 精品PPT | 实用可编辑 表层圆形图层样式设置： * 精品PPT | 实用可编辑 点击添加文本 点击添加文本 点击添加文本 点击添加文本 1.Android 界面尺寸 * 精品PPT | 实用可编辑 点击添加文本 点击添加文本 点击添加文本 点击添加文本 2.界面尺寸（1280x720px） 状态栏高度：50 px导航栏高度：96 px标签栏高度：96 pxAndroid最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：96 px内容区域高度为：1038 px （1280-50-96-96=1038） * 精品PPT | 实用可编辑 3.常用尺寸 一般把48dp作为可触碰UI原件的标准，48dp=72px=9mm，这是一个用户手指能够准确舒适触碰的最小尺寸。 Android界面默认菜单栏的高度是：72px； Android界面每个元素之间最小的间距是：12px； Android界面默认btn的高度是：60px px=ppi/160*dp * 精品PPT | 实用可编辑 4.常用屏幕尺寸 240x320 ldpi （低等屏幕） 320x480 mdpi （中等屏幕） 480x800 hdpi （高清屏幕） 720x1280 xhdpi （超高清屏幕） 相应的图片资源尺寸的比例关系为1：1.5: 2 也就是第一套图为mdpi的资源图片，hdpi可调整到150%，xhdpi可调整到200%。 * 精品PPT | 实用可编辑 点击添加文本 点击添加文本 点击添加文本 点击添加文本 5.字体规范、大小 5.X版本：思源黑体/Noto Sans Han 5.0以下版本：Droid Sans Fallback，可用 文泉驿微米黑 代替 英文、数字：Roboto 标题（58px或60px） 二级标题（44px或48px） 正文字体（32px或36px）；英文最小字号22px，中文最小字号18px。 * 精品PPT | 实用可编辑 UC浏览器界面 6.安卓系统界面示例 * 精品PPT | 实用可编辑 二、UI界面设计的常用方法及原则 1.UI界面设计的原则 2.UI界面设计中的构成方法 3.UI界面设计风格 * 精品PPT | 实用可编辑 二、UI界面设计的常用方法及原则-1.UI界面设计的原则 1.UI界面设计的原则 一致性和必要的个性化 使用用户的语言 用户记忆负担最小化 用户界面的功能性 容易理解 清楚的报错信息 快捷方式的组合 连续性 方便退出 帮助系统 * 精品PPT | 实用可编辑 二、UI界面设计的常用方