Ios與Android有趣的對比


飯本


AAN首頁A

信息結構上紧帕,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


首頁

作為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

而隨著頁面滑動至推薦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中對于真實陰影的模擬,從而暗示承載內容的紙張的物理屬性吧腾降。


元數(shù)據(jù)

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市睦霎,隨后出現(xiàn)的幾起案子梢卸,更是在濱河造成了極大的恐慌,老刑警劉巖副女,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛤高,死亡現(xiàn)場離奇詭異,居然都是意外死亡碑幅,警方通過查閱死者的電腦和手機戴陡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沟涨,“玉大人恤批,你說我怎么就攤上這事」埃” “怎么了喜庞?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長棋返。 經(jīng)常有香客問我延都,道長,這世上最難降的妖魔是什么懊昨? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任窄潭,我火速辦了婚禮春宣,結果婚禮上酵颁,老公的妹妹穿的比我還像新娘。我一直安慰自己月帝,他們只是感情好躏惋,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著嚷辅,像睡著了一般簿姨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天扁位,我揣著相機與錄音准潭,去河邊找鬼。 笑死域仇,一個胖子當著我的面吹牛刑然,可吹牛的內容都是我干的。 我是一名探鬼主播暇务,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼泼掠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了垦细?” 一聲冷哼從身側響起择镇,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤逝她,失蹤者是張志新(化名)和其女友劉穎橄维,沒想到半個月后牲览,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诵原,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡案淋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年矢腻,在試婚紗的時候發(fā)現(xiàn)自己被綠了煌张。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片早歇。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡焰檩,死狀恐怖憔涉,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情析苫,我是刑警寧澤兜叨,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站衩侥,受9級特大地震影響国旷,放射性物質發(fā)生泄漏。R本人自食惡果不足惜茫死,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一跪但、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧峦萎,春花似錦屡久、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至详幽,卻和暖如春筛欢,著一層夾襖步出監(jiān)牢的瞬間浸锨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工版姑, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留柱搜,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓剥险,卻偏偏與公主長得像冯凹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子炒嘲,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,737評論 25 707
  • Pocket Pocket改名后宇姚,除了將內容擴展到article、video夫凸、picture之外浑劳,坐擁1200W用...
    阿飛還是個孩子閱讀 218評論 0 0
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,721評論 22 665
  • 以前版本 ~ python 2.1,我們只能使用經(jīng)典類夭拌。python 2.2 ~ 最新版本魔熏, 我們可以使用新式類了...
    周文洪閱讀 1,929評論 0 3
  • 1.已收聽晨間導讀,完成刷題鸽扁。 案例分析:1.對該求助者還應了解的資料:求助者的社會交往人際關系方面蒜绽,求助者的性格...
    蘭紫鷊草閱讀 211評論 1 0