对于如何设计一款学习成本低、辨识度高、有个性的APP,iOS和Android均给出了对应的建议,就是《iOS设计规范》《Material Design设计规范》

规范中对导航、手势、通知、控件等方面都做了描述,并给出了相应的建议和检查清单。实际工作中,当然并不是一定要按照规范中描述进行APP设计,然而依然可以使用上述规范作为我们设计的参照,尽量避免一些明显的问题。

基于两个平台的用户一致性的体验、以及节省UI设计和研发成本的考量,整理了两个平台设计规范差异和共融之处。

设计语言不一样

iOS/Flat Design视觉效果

iOS/Flat Design是手机界面设计的里程碑

化繁为简,其核心思想就是让“信息”本身凸显出来,在设计元素上则强调了抽象、极简和符号化。

Andorid/Material Design视觉效果

核心思想是“数字纸墨”的空间,层级层次分明。

离用户最近的材料,投影最大,色彩越鲜明,越推荐用户使用

Meterial Design(材料设计)赋予UI设计新的方向

“Z轴概念”阴影大小直接体现了材料之间的距离

动画原理

动画设计原理不同(1)

动效不仅仅是为了视觉效果上的酷炫,更是帮助用户,

更好的理解层级、转场关系和关注到终点信息的利器

动画设计原理不同(2)

近实远虚,对焦物体清晰,背景模糊—⾼斯模糊

近大远小,全景&特写,长焦&短焦

Android还原机械物理运动

Meterial Design的隐喻是纸张,用户的手指就像磁铁一样把电子纸墨吸引过来;点击后就会泛起“涟漪”作为一个交互相应,离用户手指越近的元素越亮,阴影越深。

动画接近真实

物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实

完整规范

Android Material Design

https://material.io/collections/get-started/

iOS Designhttps://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

单位尺寸

单位尺寸不一样

PPI是什么?

PPI(pixels per inch),即像素密度

这项指标是连接数字世界与物理世界的桥梁

pixels per inch,准确的说是每英寸的长度上 排列的像素点的数量。

iPhone 3gs的屏幕像素是320x480 iPhone 4s的屏幕像素是640x960 刚好两倍,然而两款手机都是3.5英寸的。

Pt、dp、sp是什么?

iOS的开发单位

Pt(“points”的缩写,点)1pt=1/72英寸

Android的开发单位

dp(density-independent pixel) 即“密度无关像素”

Android的字体单位

sp(scale-independent pixel) 即“独立比例像素”,主要用作字体的单位

设计稿尺寸

使用设计工具Sketch

完整的设备尺寸,以pt、dp为单位的矢量工具

矢量图形,输出方便,一键输出切图资源

强大的sketch插件—蓝湖

切图和标注统一在sketch上解决完后,在蓝湖直接获取资源

https://lanhuapp.com/

字体规范

关于字号/字高的知识点

段落

布局原理

触摸点击区域

Android

最小触摸区域 48x48 dp

最小点击区域 24x24 dp

iOS
最小触摸区域 44x44 pt

页面基础布局

iOS(pt)

size:375x667

status:20

Android(dp)

size:360x640

status:24

Android的8dp网格基线

组件等独立容器使用8dp网格基线,组件容器内小元素可使用4dp网格基线

Android尺寸的增量值

以 8dp/pt 为参数增量值,间距可使用4dp/pt为增量值

常用值:8/16/24/32/48/56/64/72/80/88/96…

感谢您耐心的读完,规范知识内容比较多,分为两部分讲,下次敬请期待~

android dp sp px_规范|iOS与Android设计规范解析(一)相关推荐

  1. android dp sp px_Android屏幕适配★★重点盘点★★

    引言 屏幕适配是 android 开发/面试 绕不开的一个问题.本文 将屏幕适配的知识要点完整展现给各位读者. 正文大纲 android需要做屏幕适配的原因 基础知识点(★★★很重要★★★) 屏幕适配 ...

  2. android和ios ui 规范,iOS和安卓设计规范的10个不同点

    iOS设计规范围绕一个核心,就是"模态" 安卓设计规范如果总结成一句话,就是"任何地方均可点击" 区别iOS和Android设计的10个不同点: 1. 如何全局 ...

  3. ios android 上架区别,浅谈iOS与Android的区别

    说在前面:从事UI设计的同行们关于iOS与Android的基本设计规范相信大家都已经非常了解了,以下是我针对这两种设计规范所作的一点点小总结,如果面试官问道此类问题,希望对你们有用!!! 首先设计语言 ...

  4. android中隐藏的功能,iOS与Android的奥秘:那些你未必了解的隐藏功能

    [51CTO译文]也许大家自认为已经堪称高科技领域的老鸟用户,透彻了解关于iOS与Android系统的一切小秘密--但实际情况恐怕并非如此:总会有一些在说明文档中未有提及(或者未有明确提及)的命令.控 ...

  5. rn ios Android适配,RN离线打包ios和android

    首先我是用 react-native-cli 手脚架进行生成项目的并mpx进行生成项目,用的版本为0.62.2 前面新建项目的时候就不说了 1.ios打包: react-native bundle - ...

  6. android+metro风格,Metro、iOS、Android之三大UI风格对比

    三种移动平台,三种风格迥异的UI界面.先有iOS,后有Android,但是Metro UI的风格,早在许久之前就深入现代设计殿堂. 图:Metro UI(左).iOS UI(中).Android UI ...

  7. [对比]Android的差异设计和iOS的统一设计规范

    以前一直觉得iphone的可控性比较好,不理解android的开放的设计,觉得可能会带来未知的灾难. 早期的Android OS,没有统一的设计,UI是自定义的,不同厂商的设备在不同的版本间徘徊,an ...

  8. H5跟ios、android交互跟数据对接

    需求: APP要用H5页面做展示,而且要获取到对应的商品ID,用户点击H5页面跳回APP原生页面. 方法: 先要判断用户是ios还是android设备(这里只考虑ios跟android,因为它俩写法还 ...

  9. 十年一顾, iOS 与 Android 这样改变了我们

    推荐序:今年是iPhone问世的第10年.10年来,移动互联网飞速发展,我们作为移动开发者,也迎来了自己的黄金十年.小引在本文中,采访了众多的资深移动开发者(也包括我^^),让我们来一起回味这难忘的十 ...

最新文章

  1. 代码生成器项目正式启动
  2. 医疗安全监控与检测平台WattsUpDoc
  3. python paramiko包 ssh报错No existing session 解决方法
  4. python 语言-Python的语言特点
  5. 大型高并发系统的系统设计要点
  6. 【初窥javascript奥秘之闭包】叶大侠病都好了,求不踩了:)
  7. 笔记本中美化代码的方法
  8. 用 Python 实现溺水识别
  9. mysql常见错误及解决办法_mysql常见错误代码、原因及处理办法
  10. Python使用三种方法批量修改记事本文件编码格式
  11. python如何运行一个python程序_python如何运行?第一个python小程序示范
  12. 机器学习算法基础5-线回归与岭回归
  13. 聊聊数据治理与成本管理
  14. 公司中生存奥秘诙谐解说[转]
  15. 点击按钮下载Excel表格
  16. java 小数乘法_java复习题69151-_人人文库网
  17. python数据分析 | seaborn绘图学习
  18. 医疗大数据 隐私保护_大数据环境中的医疗数据隐私保护
  19. 全自动叠片式过滤器结构、原理说明
  20. mfc在CTreeCtrl上添加文件夹图标和文件目录的选择

热门文章

  1. qtitanribbon注册_点云平台之QtitanRibbon
  2. python制作物联网控制软件下载_Python+树莓派制作IoT(物联网)门控设备
  3. scala模板写入es_Spark——scala 实用小方法
  4. PHP电子合同对接流程,E签宝电子合同对接实战经验
  5. 【项目调研+论文阅读】基于医学文献的实体抽取(NER)方法研究 day5
  6. 3_python基础—运算符 2
  7. python中debug有什么用途_Python debug 总结
  8. linux内核module_init,Linux内核模块中module_init和init_module有什么区别?
  9. 宏观经济学思维导图_2019中央财经大学803经济学经验分享|三跨考生
  10. 阶梯英语2006年年终大会主持人发言稿