思考MD和ios设计规范差异

北京/设计爱好者/7年前/530浏览
思考MD和ios设计规范差异
kousweet

从三个方面阴影、导航系统、配色来讲一下MD和ios设计规范上的差异

    记录下来好的文章,帮助自己在设计方面理解的更深刻。

    文章的里面会有一些我看这篇文章思考的一些小问题。

    小思考:什么是MD设计,什么是ios设计?

    MD(Material Design)是谷歌设计的一套视觉语言规范,主要用于安卓系统的应用上。

    Ios(Ios Human Interface Guidelines)是苹果公司针对ios设计的人机交互指南,目的是规范ios上的应用都能遵从一套特定的视觉及交互特性,达到的风格的统一。

    小思考:设计一个产品需要按ios和MD设计规范分别设计两套效果图吗?

        答:对于目前来说大多数公司考虑到成本问题,一版只出一套ios的来适配安卓的就可以,虽然这种现象是不合理的,毕竟不同系统/平台采用的设计语言是不同的,不同的设计语言会培养出不同的操作习惯。

    第一种差异:阴影

    MD的设计来源现实,就如同Materia的意思为纸张一样,MD的设计喜欢结合现实物理规律和空间关系来表现,阴影就是最常见的表现形式

    ios的设计更偏向与扁平,不采用阴影

例如:《印象笔记》注册页面 ios页面的额按钮没有阴影;MD的页面中按钮存在阴影


undefined

FAB浮动操作按钮(Floating Action Bution):IOs没有阴影,MD有阴影也是MD的常用效果

undefined

    第二种差异:导航体系

    导航体系是有菜单栏组成,根据的位置和交互方式菜单栏分为顶部菜单栏、底部菜单栏、侧边栏

     小思考:导航的作用是什么?

         答:导航就如同目录和地图,为用户提供更清晰的用户体验,能够让用户快速、准确的找到所需内容,起到引导作用。

    MD的设计中导航主要采用顶部菜单栏、侧边菜单栏

    ios的设计中主要采用底部菜单栏

    小思考:顶部菜单栏、底部菜单栏、侧边菜单栏分别的优势?

        答:(个人意见)ios主要采用的是底部导航栏,ios以前的机型都比较小的单手操作的话底部菜单栏便于操作;MD设计采用顶部导航是因为安卓机型底部有三个实体键,如果把菜单栏也放到下面容易给用户带来误点和视觉错乱的不便;侧边菜单栏可以节省空间,把更多的内容隐藏起来,使有限的空间发挥最大的利用率。

    小思考:为什么现在ios和MD的设计风格有的存在很大的相似,MD的也存在有底部菜单栏

        答:我个人觉得是为了降低用户的学习成本,增加客户的黏性,例如使用安卓手机的用户平时见到的都是MD风格的界面,突然下了一个iOS风格的应用,那么操作起来就会很不习惯,增加了学习成本。为了降低学习成本大多数MD也会趋向于IOS风格的设计,最明显的就是导航的设计。

例如:《网易云》的首页,ios的导航在下面;安卓机型上面被移到了页面顶部,“帐号”放到了侧边导航中

undefined

undefined

《b站》在iOS中有底部栏菜单有5个标签,而在安卓机型中只有4个标签,“我的”同样被侧边栏收起来

undefined

《推特》在iOS中使用的底部栏菜单导航,在安卓机型中导航栏被移到了顶部

undefined

《Apple Music》在安卓机型上直接舍弃了底部菜单栏,采用了侧边栏作为主导航模式。

    以上例子中两款国产应用在安卓机型上都保留了底部栏菜单,而后两款国外应用直接砍掉底部栏菜单。不只是Apple music和推特,很多国外的安卓类应用都没有使用底部栏菜单。而国内的应用很多属于iOS和MD的混合了。甚至很多安卓应用在设计风格上往iOS靠拢,以b站为例,其5.11之前的安卓版本中都是没有底部栏菜单的。

    第三种差异:配色

    MD提倡使用高饱和度的对比色来提升产品的视觉表现力,也就是我在上面提到的大色块。同样的一个功能,从底部栏背景色、插画到按钮,我们可以发现iOS在色彩的使用上比较克制。

《知乎》之前的安卓版本使用了大面积的蓝色,后来改成跟iOS一样的白色。这样的调整褒贬不一,有的用户反馈这完全照搬了iOS,要改回MD。

undefined

    产品界面设计中对比效果主要由配色、尺寸、间距阴影来完成。MD在配色和阴影上做的比较出彩,所以MD风格的产品在视觉表现上更有冲击力。而iOS则显得比较小清新,追求扁平和简洁。

    当然前面也提到了MD和iOS的差异不仅仅体现在以上说的这三点,还有一些小细节也非常值得我们思考。我们都知道在iOS系统中,用户向右滑动的时候会返回上一级页面。因为苹果手机没有物理返回按键,所以这种机制非常受欢迎,但是在一些特定场景的时候就会有问题。例如如果我想复制微博里的“一曲肝肠断,天涯何处觅知音”,选中光标从左向右滑动,这时就会返回上一级页面,特别不方便。所以我只能从右向左进行复制,我后来试了一下微信和QQ,发现默认复制的是整条动态,这也算是一个折衷的方案。


总结

光凭这是三点也不能诠释MD与ios的差异,还有很多知识等待我去探索学习。

2
阅读原文
|
Report
|
11
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
IP设计合集 DGS FRIENDS
Homepage recommendation
DESIGN NEW WAVE
Homepage recommendation
大家都在看
Log in