饭本
信息结构上,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这类内容优先的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,顶部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