移动UI界面设计05Android系统UI设计规范1课件.pptx

1、Android系统UI设计规范-1课程回顾n 拟物化设计的概念n 拟物化启动图标设计的流程n 启动图标的设计原则2/46本章任务n 掌握移动端手机界面设计原则n 了解Android系统n 掌握Android系统手机的设计尺寸与常见术n Android系统手机的设计规范3/46目录n 移动端手机界面设计原则n Android系统基本介绍n Android系统手机的设计尺寸与常见术语n Android系统手机的设计规范4/46移动端手机界面设计原则l简洁 l高效 l反馈 l情感化l 一致性 5/46移动端手机界面设计原则l简洁 l高效 l反馈 l情感化l 一致性 6/46移动端手机界面设计原则l简

2、洁 l高效 l反馈 l情感化l 一致性 7/46移动端手机界面设计原则l简洁 l高效 l反馈 l情感化l 一致性 8/46移动端手机界面设计原则l简洁 l高效 l反馈 l情感化l 一致性 9/46目录n 移动端手机界面设计原则n Android系统基本介绍n Android系统手机的设计尺寸与常见术语n Android系统手机的设计规范10/46Android系统基本介绍n Android系统l“安卓”或“安致”lAndroid是一种基于Linux的自由及开放源代码的操作系统l主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发11/46Android系统基本介

3、绍n 安卓手机热门品牌12/46Android系统基本介绍n Android的历史版本l从2009年5月开始，Android操作系统改用甜点来作为版本代号：p纸杯蛋糕（Cupcake）p甜甜圈（Donut）p闪电泡芙（clair）p冻酸奶（Froyo）p姜饼（Gingerbread）p蜂巢（Honeycomb）p冰淇淋三明治（Ice Cream Sandwich）p果冻豆（Jelly Bean）p奇巧（KitKat）p棒棒糖（Lollipop）p棉花糖（Marshmallow）p牛轧糖（Nougat）p奥利奥（Oreo）13/46目录n 移动端手机界面设计原则n Android系统基本介绍n

4、Android系统手机的设计尺寸与常见术语n Android系统手机的设计规范14/46Android系统手机的设计尺寸与常见术语n Andorid系统界面尺寸和分辨率15/46Android系统手机的设计尺寸与常见术语n 界面尺寸和分辨率l就目前市场状况而言pldpi、mdpi 如今已绝迹，市场份额不足5%，新手机不会有这种倍率，不用考虑phdpi 480 x800市场份额不到20%pxhdpi 720 x1280市场比例最大pxxhdpi 1080 x1920数量逐渐扩大pxxxhdpi 1440 x2560p极少数2K屏手机p科技发达，屏幕会越来越大p尺寸到达极限后，会有所收敛16/46

5、Android系统手机的设计尺寸与常见术语n 界面尺寸和分辨率l在实际工作中p推荐使用XHdpi或XXHdpi的尺寸进行设计p即画布新建为720*1280px 或 1080*1920pxp或者根据测试机尺寸进行设计p分辨率为72ppi17/46Android系统手机的设计尺寸与常见术语n 常用术语ldp(dip)pdevice independent pixelp基于屏幕物理分辨率一个抽象的单位，用于说明与密度无关的尺寸和位置p在进行Android系统的App开发时，都是以dp（也可写为dip，屏幕密度）为单位的p设计师要熟知px与dp之间的换算，为之后的切图和标注工作做好准备p在720*12

6、80px，1dp=2pxp在1080*1920px，1dp=3px18/46Android系统手机的设计尺寸与常见术语n 常用术语lsppScale-independent Pixelp与缩放无关的抽象像素，用于设置文字的大小p当文字尺寸是“正常”时，1sp=1dp 在720*1280px，1sp=2px 在1080*1920px，1sp=3px19/46目录n 移动端手机界面设计原则n Android系统基本介绍n Android系统手机的设计尺寸与常见术语n Android系统手机的设计规范20/46Android系统手机的设计规范l不需要为每一种分辨率单独设计一套UI界面l在主流尺寸的基

7、础上进行设计，然后再与其他尺寸进行适配p在实际工作中，可以使用720*1280px，1080*1920px21/46Android系统手机的设计规范n Android系统中的栏l状态栏l导航栏/操作栏l标签栏l物理键或虚拟键22/46课堂练习课堂练习：你手机中的Appn 需求描述l将Android系统手机中的App界面进行截屏l导入电脑中，查看界面中的p界面尺寸p栏高p按钮的大小p文字的大小n 实现思路l选区至少两个App，每个App至少截取两个界面23/46Android系统手机的设计规范n Android系统中的栏l状态栏p一般出现在屏幕顶端p一般包含网络情况、时间、电量、信号强弱、通知等

8、用户需要的信息p在设计沉浸型应用（如视频、游戏）的时候，为了增强用户体验可以将状态栏隐藏，隐藏之后的状态栏要能实时显示出来24/46Android系统手机的设计规范n Android系统中的栏l操作栏（导航栏）p操作栏起到导航、切换视图和操作菜单等作用p整个操作栏上有应用图标、下拉列表控件，用来快速切换视图；溢出（更多）按钮25/46Android系统手机的设计规范n Android系统中的栏l操作栏（导航栏）p当下拉列表中的类目较多时，可以使用侧边栏展开26/46Android系统手机的设计规范n Android系统中的栏l标签栏p提供整个应用的分类内容的快速跳转27/46Android系统

9、手机的设计规范n Android系统中的栏lAndroid设备的物理键或者虚拟键28/46Android系统手机的设计规范n Android系统中的栏nAndroid控件高度都支持自定义，所以没有严格的尺寸数值设备屏幕大小 px状态栏高度 px导航栏高度 px标签栏高度 pxXHdpi720 x1280509696XXHpid1080 x19207514414429/46Android系统手机的设计规范n Android系统的按钮与可点击区域lAndroid系统的按钮与可点击区域在尺寸上并没有严格的规定，可以由设计师自行设计与制作l考虑用户手指接触屏幕的最小可点击区域l按钮与可点击区域的不得小

10、于48dpl每个UI元素之间的空白间隔建议是8dp30/46Android系统手机的设计规范n Android系统的按钮与可点击区域l为考虑适配，所有按钮和可点击区域的尺寸，必须是4的倍数l一般把48dp作为可触摸的ui元素的标准p换算到XHdpi中，48dp=96pxp换算到XXHdpi中，48dp=144px31/46Android系统手机的设计规范n Android系统的按钮与可点击区域32/46Android系统手机的设计规范l对于初学者可以借鉴Android系统已经上线的App：导入一张完整的Android手机界面作为设计底板l原生Android App界面l按照自己的手机/测试机尺

11、寸来制作，方便观看预览效果33/46Android系统手机的设计规范n 建立适合Android系统的网格系统lxhdpi：1dp=_px最小间隔_px最小可点击区域_pxl可以建立_px网格系统34/46Android系统手机的设计规范n Android系统字体与字号l默认英文字体：Robotol默认中文字体：Droid sans fallback 是谷歌自己的字体，与微软雅黑很像l在设计上可以使用微软雅黑、方正兰亭等p笔画无衬线p末端和转折为直角p笔画无粗细或粗细变化很小35/46Android系统手机的设计规范n Android系统字体与字号l支持内嵌字体p考虑字体文件的大小p一般而言：中

12、文字体比较大p英文字体相对比较小l字号最好为4的倍数l保证识别度为第一任务p用颜色来区分重点p用大小来区分重点36/46Android系统手机的设计规范n Android系统字体与字号l中文字体体积比较大，占据更大的空间，所以并不建议使用内嵌中文字体l可以将文字进行切图处理，将它们切成一张张的图片，这样也可以达到相同的效果37/46Android系统手机的设计规范n Android系统字体与字号l一般而言，以720 x1280px的界面中lsp：安卓的字体单位lpx：像素用途sppx极小的、注释性文字1224小文本、辅助性文字1428正常文本16、18、2032、36、40标题文字、大文本22

13、4438/46演示案例演示案例：制作Android系统手机UI模板n 需求描述l制作Android系统手机UI模板l绘制状态栏，标明导航栏、标签栏的位置高度n 实现思路l建立适合Android系统的网格系统p编辑-首选项-参考线、网格和切片pxxhdpi：1dp=3px，最小间隔8dp=24px，最小可点击区域48dp=144pxp可以建立24px网格系统39/46演示案例演示案例：制作Android系统手机UI模板l新建1080 x1920像素的画布l使用矩形工具绘制黑色的状态栏（高度75像素），并绘制显示的文字和图标l使用矩形工具分别绘制出导航栏和标签栏，高度为144像素p提示：可以参考自

14、己的Android手机进行绘制40/46Android系统手机的设计规范n 结论lAndroid系统对于栏高并没有特别严格的限制l大都可以通过自定义进行栏高的控制l设计师可以根据项目要求，进行个性化的定制41/46演示案例演示案例：制作Android系统邮箱界面n 需求描述l制作Android系统邮箱界面l界面尺寸要求：1080 x1920pxn 实现思路l拖拽辅助线，使用矩形工具绘制整体布局l注意栏高和各个元素之间的位置关系l使用钢笔工具绘制图标、使用文字工具制作文字l添加细节，调整界面的整体效果42/46课堂练习课堂练习：拟物风格Android界面设计n 需求描述l制作拟物风格Android系统用户详细信息列表页l界面尺寸要求：640 x960pxn 实现思路l使用辅助线或矩形工具划分整体区域l通过给图层添加图层样式增加界面的拟物化风格表现l输入文字、注意文字的识别度43/46本章总结n 移动端手机界面设计原则是什么？n 在Android系统手机中，dp代表什么？n 在Android系统手机中，sp与dp、px的换算关系是？n 在设计Android系统手机界面时，使用什么字体来设计？44/46