11-07Android

• 分辨率：手机屏幕水平和垂直方向的像素个数
• 屏幕尺寸：屏幕对角线长度既是屏幕实际大小 4.7英寸：750×1334px 一英寸：2.54cm
• ppi（pixel per inch）：图像所使用的单位，每英寸上的所表达的像素数目
• ppi=√（横向分辨率²+竖向分辨率²）/屏幕尺寸
• dpi（dot per inch）：打印分辨率使用单位。每英寸所表达的打印点数
• 像素密度：（ppi/dpi）根据屏幕分辨率，在屏幕每英寸能显示的像素数量。屏幕尺寸在相同的情况下，像素-密度越高，分辨率越高，图像和文字看起来越小。
• 为了支持 所有不同像素密度的设备运行，Andriod将他们归为几类
  ldpi（120）=240×320px
  mdpi（160）=320×480px
  hdpi (240) =480×800px
  xhdpi（320）=720×1280px
  xxhdpi（480）px=1080×1920px
  xxxhdpi（640）=1440×2560px
• 设备独立像素（dip）
  简称dp，通常用于安卓间距、图片尺寸、按钮控件高度和宽度等的单位。
  px和dp换算公式：px=dp*dpi/160
• 可扩展像素（sp）
  在安卓标注中，使用sp作为安卓的字体单位。
  px和sp的换算公式：px=sp*dpi/160
  除了标注字体使用时使用sp，其余都用dp。
• 48dp定律
  48dp是用户手指能够准确舒适触摸的区域（最小点击区域48dp*48dp）；当可触摸控件的高度和宽度大于等于48dp时，会使控件的点中率大大增加，在视觉上也会比较舒服。

安卓苹果差异

一、系统平台不一样

ios是苹果公司的移动操作系统
Android是Google公司开发的操作系统

二、不同平台的差异化

• 1 不同其他平台特有的图标
• 2 强调视觉元素的样式要符合Android 系统
• 3 区分应用内置返回和按键Back
  内置返回按钮可以确保用户停留在一个App中 按键Back按钮可以让用户回到首屏，具有一个跳跃性

三、导航方式不同

ios大多采用底部标签栏；
Android导航通常在顶部，可以通过活动页面来切换Tab

Material Design 安卓设计规范

Material Design 通过“投影”构建出了Z轴的概念

一、按钮 根据不同功能和使用环境，按钮通常分为：

悬浮按钮 填充按钮 纯文字按钮
——悬浮按钮 FAB （悬浮球）
悬浮球有两种尺寸：默认尺寸56560px和4040px

二、颜色

Material Design 官方提供了色表供我们参考，颜色非常漂亮；设计师可以自定义颜色，但注意不要使用脏（明度低的）颜色。
配色 icon 网站 https://www.materialpalette.com/colors

三、顶部导航栏

Material Design 顶部导航栏中、标题并非居中而是靠左放置的；左侧最多可放置一个图标，右侧可放置多个图标。

• 导航栏背景使用主色
• 状态栏背景在主色基础上叠加20%不透明度的纯黑蒙层0-9-a-f
• 顶部导航栏可以嵌入图片
• 嵌入置顶打通的图片能够增强界面的整体感，增加图片的视觉冲击力，营造沉浸体验

四、卡片

卡片式设计是Material Design的显著式标志，卡片统一带有2dp的圆角。
——卡片式设计三原则
———— 1 颜色对比；（凸显卡片的轮廓）
———— 2 四周留白；（卡片具有呼吸感）
———— 3 卡片的四周有合适的圆角；（卡片展示更加友好）卡片内部为直角；

五、分割线

通栏分割线：列表中没有头像、图标元素时，用通栏分割线，通栏分割线给人的感受是信息完全独立。
内嵌分割线：列表中有头像、图标元素时、使用内嵌分割线，左端和文字对齐，内嵌分割线能够方便我们阅读并准确找到当前阅读的位置，并且是视觉更简洁。

六、抽屉式导航

这是Google应用中一种常见的导航模式

• 组成
  ① 通常展示用户个人信息，背景可以用纯色、渐变、图片；
  ② 选中状态，在视觉上突出，告知用户当前所选择的功能；
  ③ 未激活状态（含文本）；
  ④ 底层界面（不可操作），侧边抽屉到屏幕边缘距离56dp；

七、图标

小图标尽量不要超过24×24dp，保证图标视觉大小一致。设计小图标时，使用简练的图形（原生粗的）来表达，让用户快速理解所表达的内容。

八、MD风格应用栏高度

①状态栏高度：24dp；
②导航栏高度：56dp；
③菜单栏高度：48dp；

九、字体

①Material Design字体选择：
默认中文字体使用思源黑体；英文、数字用Roboto
②常用字号参考
导航栏标题：20sp；
标题文字：16sp；
正文/按钮文字：14sp；
辅助性提示文字：12sp；

ios风格安卓应用

720*1280px情况下

①状态栏高度：50px；
②导航栏高度：96px；
③底部标签高度：96px；

ios风格安卓应用

注意事项：
①字体使用思源黑体；
②状态栏控件使用安卓的；
③状态栏、导航栏、标签栏使用ios风格的安卓尺寸（50、96、96）
④虚拟按键尽量不要加了；（增高垫）
⑤界面尺寸：720*1280；
⑥其他的数据可以与第一套一致；