QQ登录

登录|注册 上传

飞特网

  • 飞特网官方微博
  • 飞特网微信公众号
飞特网顶部通栏AD位

iOS与Android设计规范解析(一)

冰冷的心发布于:2020-3-25 09:10 |原作者: UX设计笔记
简介: 规范中对导航、手势、通知、控件等方面都做了描述,并给出了相应的建议和检查清单。实际工作中,当然并不是一定要按照规范中描述进行APP设计,然而依然可以使用上述规范作为我们设计的参照,尽量避免一些明显的问题。 ... ... ...

版权申明:本文出自“UX设计笔记”原创,感谢“UX设计笔记”的原创教程分享!

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

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

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

设计语言不一样

iOS与Android设计规范解析(一) 飞特网 UI设计教程

FEVTE编注:更多UI设计教程,和UI设计理论知识请访问飞特网UI设计教程栏目:https://www.fevte.com/plan/UIdesign/

iOS/Flat Design视觉效果

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

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

Andorid/Material Design视觉效果

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

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

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

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

动画原理

动画设计原理不同(1)

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

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

动画设计原理不同(2)

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

Android还原机械物理运动

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

动画接近真实

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

iOS与Android设计规范解析(一) 飞特网 UI设计教程

完整规范

Android Material Design

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

iOS Design

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

单位尺寸


单位尺寸不一样

PPI是什么?

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

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

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


123下一页
飞特网—站内广告
4

好评

差评

刚表态过的朋友 (4 人)

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业


关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 手机版| 飞特网