ios和material design導(dǎo)航方式的一些思考

直接進(jìn)入正題。

ios導(dǎo)航相對(duì)來(lái)說(shuō)是比較有限的唉韭,可以使用導(dǎo)航欄夜涕,然后通過(guò)左邊的返回按鈕回到上一層。也可以使用標(biāo)簽欄属愤,在不同標(biāo)簽之間切換女器,然后還有分段控件,對(duì)內(nèi)容進(jìn)行分類住诸,最后就是home鍵驾胆,直接回到桌面。當(dāng)然贱呐,這里講的是系統(tǒng)層面上的丧诺,一些軟件可以加上自己的一些導(dǎo)航方式,比如手勢(shì)奄薇,比如側(cè)邊欄驳阎。

material design中則豐富得多,同樣有導(dǎo)航欄馁蒂,有標(biāo)簽欄呵晚,只不過(guò)名稱和使用細(xì)節(jié)上不同。然后沒(méi)有分段控件沫屡,但是多了物理的返回鍵和菜單鍵饵隙。另外,ios中的標(biāo)簽在material design中稱為底部導(dǎo)航欄谁鳍,而標(biāo)簽則表示用于內(nèi)容組織上的一個(gè)控件癞季。還有一個(gè)比較常用的側(cè)邊欄劫瞳。

先來(lái)看看側(cè)邊欄倘潜,ios設(shè)計(jì)規(guī)范中并沒(méi)有提及,為什么志于?
側(cè)邊欄的優(yōu)勢(shì)是顯而易見(jiàn)的涮因,騰出更多的頁(yè)面空間,讓用戶更專注于內(nèi)容本身伺绽,同時(shí)一定程度上保證了在不同內(nèi)容之間切換的速度养泡。缺點(diǎn)則是側(cè)邊欄內(nèi)的項(xiàng)目曝光率低嗜湃,對(duì)于一些新功能,或者需要推廣的內(nèi)容來(lái)說(shuō)是不利的澜掩。
而ios設(shè)計(jì)規(guī)范的一開(kāi)始就提到了三大原則购披,清晰、遵從肩榕、深度刚陡,表明其是以內(nèi)容為核心,不需要多余的裝飾株汉,那么側(cè)邊欄或許是一個(gè)不錯(cuò)的選擇筐乳,因?yàn)閮?nèi)容可以得到足夠的關(guān)注。

但深入考慮之后發(fā)現(xiàn)乔妈,側(cè)邊欄除了曝光率上的缺點(diǎn)之外蝙云,還有一個(gè)就是信息架構(gòu)上的問(wèn)題。首先因?yàn)閭?cè)邊欄的入口占據(jù)了返回鍵的位置路召,那么兩者就只能選其一勃刨。在架構(gòu)相對(duì)扁平的應(yīng)用上,可以比較方便地在側(cè)邊欄中進(jìn)行切換股淡,此時(shí)側(cè)邊欄與底部的標(biāo)簽欄功能上的差別則不大朵你。但是在層級(jí)比較深的應(yīng)用中,導(dǎo)航欄左邊的位置需要放置返回按鈕揣非,此時(shí)則不能快速地使用側(cè)邊欄進(jìn)行切換抡医。
于是我們可以看到,這和三大原則中的深度有點(diǎn)關(guān)系早敬。ios不像material design那樣從現(xiàn)實(shí)世界中借用了大量的比喻忌傻,而是采用深度的概念加上適當(dāng)?shù)淖儞Q動(dòng)效來(lái)表示信息的層級(jí)。這樣側(cè)邊欄的優(yōu)勢(shì)就不是很突出搞监,同時(shí)側(cè)邊欄的物理隱喻并不太適合ios的整體感覺(jué)水孩。

舉個(gè)例子,apple music琐驴,在安卓上是使用側(cè)邊欄俘种,在ios上是使用標(biāo)簽欄。其實(shí)某種程度上來(lái)說(shuō)绝淡,ios上的標(biāo)簽欄就相當(dāng)于material design上的側(cè)邊欄宙刘。因?yàn)閕os的標(biāo)簽欄其實(shí)并沒(méi)有嚴(yán)格限制個(gè)數(shù),標(biāo)簽可以多個(gè)牢酵,超過(guò)屏幕范圍是會(huì)包含進(jìn)一個(gè)“更多”的標(biāo)簽下悬包,點(diǎn)擊“更多”會(huì)彈出一個(gè)頁(yè)面進(jìn)行選擇,是不是感覺(jué)和側(cè)邊欄有點(diǎn)類似馍乙。

接著講講分段控件布近。
在ios中垫释,分段控件是用來(lái)信息分類。material design中并沒(méi)有提到這個(gè)撑瞧,但是有標(biāo)簽棵譬。

ps:ios中,底部的導(dǎo)航欄稱為“tab bars”预伺,material design中茫船,底部的導(dǎo)航欄稱為“bottom navigation”,上部的標(biāo)簽稱為“tabs”

這兩個(gè)某種程度上來(lái)說(shuō)是對(duì)應(yīng)的扭屁,同樣是用于對(duì)信息的分類算谈。但是分段控件由于空間的限制,也和其本身的特性有關(guān)料滥,數(shù)量上并不能太多然眼。而標(biāo)簽則不同,數(shù)量不限葵腹,甚至可以滾動(dòng)高每。

最后是關(guān)于material design中的底部導(dǎo)航欄,剛加入的時(shí)候不少人說(shuō)是直接抄襲ios的践宴。但不管怎么說(shuō)鲸匿,底部導(dǎo)航欄是必要的。前面也講到了阻肩,某些情況下带欢,底部導(dǎo)航欄的優(yōu)勢(shì)是側(cè)邊欄所不具有的。而且烤惊,一個(gè)最直接的原因是將某些模塊放置在底部導(dǎo)航欄中乔煞,可以獲得比側(cè)邊欄多得多的點(diǎn)擊數(shù)。不過(guò)使用的時(shí)候就要注意柒室,控制在3到5個(gè)之間渡贾,material design中并沒(méi)有“更多”可以用來(lái)包含多余的標(biāo)簽。而且導(dǎo)航欄中的內(nèi)容應(yīng)該是最頂部的最重要的雄右,不像側(cè)邊欄空骚,什么都可以往里面放。

當(dāng)然擂仍,實(shí)際使用中并不是所有軟件都會(huì)遵循平臺(tái)設(shè)計(jì)規(guī)范囤屹,有一些為了保證軟件在不同平臺(tái)上有相同體驗(yàn),會(huì)盡可能保持兩者的一致防楷。所以以上的思考也只是限于設(shè)計(jì)規(guī)范中的內(nèi)容牺丙。另外,平時(shí)比較少使用ios复局,所以一些地方理解不是很深冲簿,如有錯(cuò)漏,歡迎指正亿昏。

以上峦剔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市角钩,隨后出現(xiàn)的幾起案子吝沫,更是在濱河造成了極大的恐慌,老刑警劉巖递礼,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惨险,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡脊髓,警方通過(guò)查閱死者的電腦和手機(jī)辫愉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)将硝,“玉大人恭朗,你說(shuō)我怎么就攤上這事∫捞郏” “怎么了痰腮?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)律罢。 經(jīng)常有香客問(wèn)我膀值,道長(zhǎng),這世上最難降的妖魔是什么误辑? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任虫腋,我火速辦了婚禮,結(jié)果婚禮上稀余,老公的妹妹穿的比我還像新娘悦冀。我一直安慰自己,他們只是感情好睛琳,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開(kāi)白布盒蟆。 她就那樣靜靜地躺著,像睡著了一般师骗。 火紅的嫁衣襯著肌膚如雪历等。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,775評(píng)論 1 307
  • 那天辟癌,我揣著相機(jī)與錄音寒屯,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛寡夹,可吹牛的內(nèi)容都是我干的处面。 我是一名探鬼主播,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼菩掏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼魂角!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起智绸,我...
    開(kāi)封第一講書(shū)人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤野揪,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后瞧栗,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體斯稳,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年迹恐,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了挣惰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡系草,死狀恐怖通熄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情找都,我是刑警寧澤唇辨,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站能耻,受9級(jí)特大地震影響赏枚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜晓猛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一饿幅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧戒职,春花似錦栗恩、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至捧韵,卻和暖如春市咆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背再来。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工蒙兰, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓搜变,卻偏偏與公主長(zhǎng)得像采缚,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子痹雅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

推薦閱讀更多精彩內(nèi)容