Ios与Android有趣的对比


饭本


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,815评论 25 709
  • Pocket Pocket改名后,除了将内容扩展到article、video、picture之外,坐拥1200W用...
    阿飞还是个孩子阅读 1,612评论 0 0
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 47,032评论 22 665
  • 以前版本 ~ python 2.1,我们只能使用经典类。python 2.2 ~ 最新版本, 我们可以使用新式类了...
    周文洪阅读 5,974评论 0 3
  • 1.已收听晨间导读,完成刷题。 案例分析:1.对该求助者还应了解的资料:求助者的社会交往人际关系方面,求助者的性格...
    兰紫鷊草阅读 1,527评论 1 0