交互设计交互设计产品交互设计

Ios与Android有趣的对比

2015-12-05  本文已影响424人  阿飞还是个孩子


饭本

AAN首页A

信息结构上,Android以drawer作为主导航

Android上采用了卡片作为信息承载,以及float button写新菜名。

两者icon也有显著区别,IOS上图标由纤细线条组成,符合平台规范;而Android看起来则有着浓浓的「Material」味道

Cards

A card is a piece of paper with unique related data that serves asan entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.

榜单页

Android上用transparent nav bar突出图片,并利用了卡片融合和分割的特性,页面向下滑动至正文时,原本标题部分融合成为了extended toolbar,非常有新Material的特色。

按钮部分因为想要在list中突出,所以相较于底部固定按钮,raised button是个好选择。

float button位于两张card接缝中间

我的收藏

此页不仅仅是为了展示sagement bar之于IOS、tab bar之与Android。

Pinterest

首页

作为Pinterest这类内容优先的app,android顶部nav bar在向下滑时消失,向上滑时复原;而ios上则没有挑战一贯的底tab bar固定的原则。此外值得注意的是,相较于android,ios上的图标因为半透明砂纸bar的缘故,提高了灰度以增加对比度。

详情页

详情页非常有趣,包含许多nav bar、tool bar与页面滑动的细节。

Ios中,从主界面进入某一个「Pin」时,tool bar与nav bar变成了混合bar;而Android则将其作为顶部固定tool bar而存在,当页面滑离当前Pin时,tool bar跟随当前Pin滑动,直至消失。

详情页推荐Pins

而随着页面滑动至推荐Pins,顶部nav bar原「发送」「分享」「Pin it」等操作被居中的「Related Pins」替代,顶部混合bar又变成了正规的nav bar,告诉用户来到了「Related Pins」模块;此外,底部tab bar也出现,提供了顶级导航,避免在较深的页面中按很多次「back」回主界面。

反观Android,因为原tool bar已随页面滑动消失,顶部nav bar出现提供顶级导航。

Medium

首页

两者都采用了各平台最具代表性的导航方式,底tab和drawer。

android上为突出[Explore]模块,将其与[home]并列为tab试图。

另一个关注点在于android上的页面视觉层级,如[Top story for you]模块的阴影,IOS只是添加了一像素的灰色,而android上则有丰富的阴影效果,我猜这是贴合Material design中对于真实阴影的模拟,从而暗示承载内容的纸张的物理属性吧。

元数据

IOS上次序为推荐 > 作者 > 标题 > 图片 > 正文 > 操作

android则为 推荐 > 图片 > 标题 > 正文 > 作者 > 操作

详情页

IOS上大多数操作居于底部工具栏,而android则遵循原指教义,以顶部�tool bar出现。

Toolbars

Toolbars are versatile and can be used in many different ways.

在android的教义中tool bar可以�分割、悬浮、扩展,连app bar也被当做tool bar的一种特殊情况,可用来打开抽屉、显示标题、承载操作。

App bar

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.




之前有童鞋问到Ios和Android各种导航部件很混乱,现贴上两平台部件等级图

iOS

Tab Bar → Navigation Bar → Segmented Control → Content

Android

Nav Drawer → App Bar → Tabs → Content

上一篇下一篇

猜你喜欢

热点阅读