飯本
信息結構上紧帕,Android以drawer作為主導航
Android上采用了卡片作為信息承載盔然,以及float button寫新菜名桅打。
兩者icon也有顯著區(qū)別是嗜,IOS上圖標由纖細線條組成,符合平臺規(guī)范挺尾;而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這類內容優(yōu)先的app,android頂部nav bar在向下滑時消失果正,向上滑時復原炎码;而ios上則沒有挑戰(zhàn)一貫的底tab bar固定的原則盟迟。此外值得注意的是,相較于android潦闲,ios上的圖標因為半透明砂紙bar的緣故攒菠,提高了灰度以增加對比度。
詳情頁非常有趣歉闰,包含許多nav bar辖众、tool bar與頁面滑動的細節(jié)。
Ios中新娜,從主界面進入某一個「Pin」時赵辕,tool bar與nav bar變成了混合bar;而Android則將其作為頂部固定tool bar而存在概龄,當頁面滑離當前Pin時还惠,tool bar跟隨當前Pin滑動,直至消失私杜。
而隨著頁面滑動至推薦Pins蚕键,頂部nav bar原「發(fā)送」「分享」「Pin it」等操作被居中的「Related Pins」替代,頂部混合bar又變成了正規(guī)的nav bar衰粹,告訴用戶來到了「Related Pins」模塊锣光;此外,底部tab bar也出現(xiàn)铝耻,提供了頂級導航誊爹,避免在較深的頁面中按很多次「back」回主界面。
反觀Android瓢捉,因為原tool bar已隨頁面滑動消失频丘,頂部nav bar出現(xiàn)提供頂級導航。
Medium
兩者都采用了各平臺最具代表性的導航方式泡态,底tab和drawer搂漠。
android上為突出[Explore]模塊,將其與[home]并列為tab試圖某弦。
另一個關注點在于android上的頁面視覺層級桐汤,如[Top story for you]模塊的陰影,IOS只是添加了一像素的灰色靶壮,而android上則有豐富的陰影效果怔毛,我猜這是貼合Material design中對于真實陰影的模擬,從而暗示承載內容的紙張的物理屬性吧腾降。
IOS上次序為推薦 > 作者 > 標題 > 圖片 > 正文 > 操作
android則為 推薦 > 圖片 > 標題 > 正文 > 作者 > 操作
IOS上大多數(shù)操作居于底部工具欄拣度,而android則遵循原指教義,以頂部?tool bar出現(xiàn)。
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各種導航部件很混亂赘淮,現(xiàn)貼上兩平臺部件等級圖
iOS
Tab Bar → Navigation Bar → Segmented Control → Content
Android
Nav Drawer → App Bar → Tabs → Content