美文网首页
IOS与Android的设计规范

IOS与Android的设计规范

作者: jiahaofeng | 来源:发表于2020-03-18 10:01 被阅读0次

<meta charset="utf-8">

关于设计规范的重要性就不多说,这篇文章主要通过举例对比,来帮助大家深刻认识两大移动平台(IOS&Android)的设计规范以及它们之间的差异。

首先,从平台的页面布局上看,两大平台布局方式上明显存在差异,如图:

image

我们对两大平台分别从页眉、页脚进行详细解说,先是IOS平台,

image

IOS的页眉,也就是我们说的导航栏,用于实现在应用不同信息层级结构间的导航,有时也可用于管理当前屏幕内容。具体效果,如图3,

image

在顶部放一个标题,表示当前页面的一些内容,在左侧有个返回按钮,这个按钮是依赖于当前页面是属于第一层级还是第二层级,如果属于第二层级,就需要有一个返回的按钮,以及返回上一级的标题是什么,然后右上角有个设置的入口,这样看还是抽象的话,那就直接看实际效果的,如图4,

image

熟悉了IOS页眉的设计,再来看页脚的,IOS的页脚,也就是我们说的工具栏,用于放置操作当前屏幕中各对象的控件,如图5,

image

工具栏上既可以放icon,也可以放文字,看个具体例子就知道怎么用了,如图6红色圈中形式,

image

至于选择icon还是文字,要根据实际情况抉择,如果功能入口很多,icon是更好的选择。如果功能没有那么多又想表达更加清晰的意思,建议使用文字。

IOS的页脚除了是工具栏外,还可以是标签栏。标签栏可以让用户在不同的任务、界面和模式中进行切换,图7是常见的设计方式,

image

具体的可以看下appstore的设计,

image

但是值得注意的是,底部标签不要太多,最多5个。

在了解了IOS平台页眉页脚的设计规范后,这时候来对比下Android平台在这上面的设计有何不同,首先还是从页眉上说明;

Android的页眉放置的是操作栏(action bar),用于实现app内视图的切换和层级间的导航(返回上层),还会放置一些重要控件。常见的设计方式如图9,

image

在这里不得不提一下,在图9中看到的“下拉菜单”是android4.0的设计风格,进入android5.0后,Material Design被广泛应用,这时候的操作栏我们叫应用栏了,是用来显示应用的标识、应用导航、内容搜索以及其他操作,比如这样的,

image

从上面图中不难看出,android4.0和5.0的区别在于下拉菜单变成左侧抽屉导航,看下对比图,

image

在这里也有个设计小技巧,上面我们列的都是一级导航,当导航条目很多时,我们就会考虑设计二级导航,而这时候如果选择把二级导航直接加在一级抽屉导航里,像这样,

image

如果是选择这样的设计,不难看出,左侧导航条目变得非常多,也不便于用户进行切换。那么这时候,我们可以把左侧的二级导航放到页面中,实现在某一个主导航下面进行子导航的一个切换,如图:

image

以上是IOS和android在页面布局上的不同,而在控件上,两者也存在着差异,我们可以列举几个常见的,比如滑块控件、开关控件等,具体的可到官网下载相关控件进行对比,这里不一一列举了,

image image

除了页面布局和控件上的不同,两大平台在手势操作上也有些差异,我们常见的手势有点击、双击、长按等,

image

那在操作上,各个手势所达到的效果也不同,而IOS平台跟Android平台在同一个效果上所使用的手势也会有所不同,比如删除行为,IOS使用轻扫手势,而Android则是长按删除。

image

以上就是对两大平台间在设计规范上的简单介绍,而在具体细节上的不同,可参考下面的导图,

image

在设计时遵从最基本的原则也是体现一个交互设计师的专业性,认识设计规范也是为了避免在工作上犯了最不应该犯的错

作者:纯白V
链接:https://www.jianshu.com/p/b9901fd36b57
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章

  • 最全总结!iOS与Android最新原生设计规范差异

    最全总结!iOS与Android最新原生设计规范差异 系统版本 Andriod 9.0 VS iOS 12....

  • A1-设计规范

    网易云课堂-IOS 与Android设计规范 引入:红灯停,绿灯行 设计规范是为了培养/适应用户的使用习惯. 1....

  • A2-设计规范

    网易云课堂-IOS 与Android设计规范 引入:红灯停,绿灯行 设计规范是为了培养/适应用户的使用习惯. 1....

  • APP设计规范

    本设计规范基于Android Design设计准则、Material Design设计准则、iOS 7以及iOS ...

  • app界面设计规范

    iOS和Android的app界面设计规范 http://www.yixieshi.com/ucd/20952.h...

  • iOS部分控件介绍及设计规范

    iOS及Android图标按钮设计规范 UI设计师需要了解的开发中常用的UI控件(ios篇) iOS交互设计基础之...

  • IOS与Android的设计规范

    关于设计规范的重要性就不多说,这篇文章主要通过举例对比,来帮助大家深刻认识两大移动平台(IOS&Android)的...

  • 遵守设计规范的四个层次

    熟练掌握iOS、Android设计规范是一个设计师必备的工作技能,几乎每家公司都要求做自己的设计规范。当我们在工作...

  • 浅谈iOS与Android的区别

    说在前面:从事UI设计的同行们关于iOS与Android的基本设计规范相信大家都已经非常了解了,以下是我针对这两种...

  • 正确使用控件-警告框

    在iOS的设计规范以及Android的MD规范中,都有警告框(Alerts)这个组件。笔者研究了这个组件,发现在两...

网友评论

      本文标题:IOS与Android的设计规范

      本文链接:https://www.haomeiwen.com/subject/fmfqyhtx.html