UI设计UI界面规范-Android版教程.pdf

前言 无规矩不成方圆，我们的UI界面设计也是一样，具有设计规范，系统建议的规范可以 让我们设计具有统一性，界面视觉更美观。 因为最近挺多同学问到了关于UI界面的设计规范的问题，所以UI公开课将界面规范的 内容大致整理一下，拿出来跟大家分享。 课件内容根据设计师全通的工作笔记进行整理，原创干货！ 完整内容总结在微信公众号：qduckcn 回复“规范” 转载请注明来源：趣达学院 公开课视频下载：/s/1o8eoYk6 UI界面规范-Android篇 dpi （dots per inch），即屏幕像素密度，指每英寸长度屏幕显示的 点数，密度越高显示画面就越清晰。 Android系统把所有的手机的像素密度按区间分成几种： 逻辑密度 全称 中文简称 ldpi low dpi 低密度 mdpi medium dpi 中密度 hdpi high dpi 高密度 xhdpi extra high dpi 超高密度 xxhdpi extra extra high dpi 超超高密度 xxxhdpi extra extra extra high dpi 超超超高密度 不管设备实际像素密度是多少，显示的时候都按照上表的逻辑密度分 类来提取图片。 屏幕密度安卓 安卓 屏幕密度 逻辑密度 LDPI MDPI HDPI XHDPI XXHDPI XXXHDPI 分辨率(px) 240x320 320×480 480×800 480×854 540×960 720×1280 1080×1920 4096x2160 3840x2160 逻辑密度值(dpi) 120 160 240 320 480 640 ?px=1dp 0.75 1 1.5 2 3 4 1. 按照作图的分辨率，用px除以对应的数字就是dp单位 2. 作图时，为方便给整数的dp值，根据密度倍数，所有图标尺寸，间距，字体大小做成相对的倍数值 3. 切图时，若作图是用xhdpi，做了一个图标44px * 44px，要切mdpi的图时，通过比例关系转换：44/2=22px，即对应mdpi的图 标大小为22px * 22px 4. 标注时，以mdpi为基准，1px=1dp，找出其他分辨率的密度值与mdpi的比例关系即可，如xhdpi与mdpi关系是2:1,如果用xhdpi 作图，要标注间距是20px，换算成dp，就是20/2=10dp 5. 字体用sp为单位，px与sp的换算和px与dp的换算一样，同样适用上表。 安卓 如何开始设计 选择一个尺寸标准做设计 方法1：以一个基本的尺寸 (mdpi=320x480或者 xhdpi=720x1280) 开始，之后将其缩放到不同的屏幕尺寸。 方法2：从最大的屏幕尺寸开始，之后为小屏幕去掉一些 UI 元素。 安卓 布局尺寸 逻辑密度 MDPI XHDPI XXHDPI 分辨率(px) 320×480 720×1280 1080×1920 状态栏(px) 25px 50px 75px 导航栏(px) 48px 96 px 144px 内容区域(px) 359px 1038 px 1077px 菜单栏(px) 48px 96px 144 px 最细线条(px) 不小于2px 不小于4 px 不小于6 px 元素之间的间距(px) 8px 16px 24px 安卓 图标 密度 MDPI XHDPI XXHDPI 分辨率(px) 320×480 720×1280 1080×1920 启动图标 48×48 px 96x96px 144×144 px 导航栏图标 32×32 px 64×64 px 96×96 px 上下文图标 16×16 px 32×32 px 48×48 px 系统通知图标 24×24 px 48×48 px 72×72 px Google play商店图标 512x512px 512x512px 512x512px 最细笔画 不小于2 px 不小于4 px 不小于6 px 安卓 细节 保证图标的可点击区域大小 安卓 字体 密度 MDPI XHDPI XXHDPI 分辨率(px) 320×480 720×1280 1080×1920 注释最小字体 12px 24px 36px 文本字体（小） 14px 28px 42px 文章标题/图标名称（中） 18px 36px 54px 导航标题（大） 28px 56px 84px 字体 roboto、droid sans fallback 下一篇：iOS Thank you！