產(chǎn)品設(shè)計之界面框架

設(shè)計模式

一钠龙、標(biāo)簽導(dǎo)航(微信)

標(biāo)簽導(dǎo)航位于頁面底部口渔,標(biāo)簽的分類最好可以控制在5個以內(nèi)

優(yōu)點:清楚當(dāng)前所在的入口位置、輕松在各入口間頻繁跳轉(zhuǎn)且不會迷失方向蒿涎、直接展現(xiàn)最重要入口的內(nèi)容信息

缺點:功能入口過多時哀托,該模式顯得笨重不適用

二、舵式導(dǎo)航(微博劳秋,底部有【+】標(biāo)簽)

中間用特別的標(biāo)簽仓手,兩邊是其他操作按鈕

優(yōu)點:需要突出重要且頻繁操作的入口

缺點:同標(biāo)簽導(dǎo)航

三、抽屜式導(dǎo)航(知乎)

將菜單隱藏在當(dāng)前頁面后玻淑,點擊入口即可像拉抽屜一樣拉出菜單

優(yōu)點:節(jié)省頁面展示空間嗽冒、讓用戶注意力聚焦到當(dāng)前頁面、擴展性好

缺點:入口太深补履,不適合頻繁切換的應(yīng)用

四添坊、宮格導(dǎo)航(美圖秀秀)

將入口全部聚合在頁面,讓用戶做出選擇箫锤,適合各頁面之間切換不頻繁的應(yīng)用

優(yōu)點:直觀展現(xiàn)各項內(nèi)容贬蛙、方便瀏覽經(jīng)常更新的內(nèi)容

缺點:無法完成入口間的跳轉(zhuǎn)、不能直接展現(xiàn)入口內(nèi)容谚攒、不能顯示太多入口次級內(nèi)容

五阳准、組合導(dǎo)航

用戶需要聚焦內(nèi)容,同時又需要一些快捷入口能夠連接到某頁面時就可以采用組合導(dǎo)航

優(yōu)點:布局靈活五鲫,能適應(yīng)架構(gòu)的快速調(diào)整

缺點:不規(guī)則容易有雜亂感

六溺职、列表導(dǎo)航(微信發(fā)現(xiàn))

優(yōu)點:層次展示清晰、可展示內(nèi)容較長的標(biāo)題、可展示標(biāo)題的次級內(nèi)容

缺點:同級過多時產(chǎn)生疲勞浪耘、排版靈活性不高乱灵、只能通過排序、顏色來區(qū)分各入口重要程度

七七冲、Tab導(dǎo)航(indicate menu)

本質(zhì)和標(biāo)簽導(dǎo)航相同痛倚,層級較多的情況下,可以采用tab導(dǎo)航澜躺,典型場景是用于改變當(dāng)前的視圖蝉稳,或?qū)Ξ?dāng)前頁面內(nèi)容進行分類查看

優(yōu)點:對多內(nèi)容多層級產(chǎn)品適用

缺點:結(jié)構(gòu)復(fù)雜,內(nèi)容繁多

八掘鄙、輪播導(dǎo)航(viewpage)

應(yīng)用信息足夠扁平耘戚,可以嘗試輪播導(dǎo)航

優(yōu)點:單頁面簡潔內(nèi)容,整天性強操漠、線性的瀏覽方式有順暢感收津、方向感

缺點:不適合展示過多頁面、非主頁面不利于展示和查看

九浊伙、點聚導(dǎo)航(自定義衛(wèi)星聚合控件)

主操作選項或?qū)Ш胶喜⒊梢粋€按鈕撞秋,浮動在頁面上

優(yōu)點:靈活、展示方式有趣嚣鄙、頁面更開闊

缺點:隱藏了更多入口和操作

十吻贿、瀑布導(dǎo)航

適用于圖片為主的內(nèi)容,下拉自動加載

優(yōu)點:瀏覽時產(chǎn)生流暢體驗哑子、排版布局多變舅列、沉浸式體驗

缺點:不適合層級架構(gòu)復(fù)雜的產(chǎn)品、容易產(chǎn)生疲勞感

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末卧蜓,一起剝皮案震驚了整個濱河市剧蹂,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌烦却,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件先巴,死亡現(xiàn)場離奇詭異其爵,居然都是意外死亡,警方通過查閱死者的電腦和手機伸蚯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門摩渺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人剂邮,你說我怎么就攤上這事摇幻。” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵绰姻,是天一觀的道長枉侧。 經(jīng)常有香客問我,道長狂芋,這世上最難降的妖魔是什么榨馁? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮帜矾,結(jié)果婚禮上翼虫,老公的妹妹穿的比我還像新娘。我一直安慰自己屡萤,他們只是感情好珍剑,可當(dāng)我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著死陆,像睡著了一般招拙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上翔曲,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天迫像,我揣著相機與錄音,去河邊找鬼瞳遍。 笑死闻妓,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的掠械。 我是一名探鬼主播由缆,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼猾蒂!你這毒婦竟也來了均唉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤肚菠,失蹤者是張志新(化名)和其女友劉穎舔箭,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蚊逢,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡层扶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了烙荷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镜会。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖终抽,靈堂內(nèi)的尸體忽然破棺而出戳表,到底是詐尸還是另有隱情桶至,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布匾旭,位于F島的核電站镣屹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏季率。R本人自食惡果不足惜野瘦,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望飒泻。 院中可真熱鬧鞭光,春花似錦、人聲如沸泞遗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽史辙。三九已至汹买,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間聊倔,已是汗流浹背晦毙。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留耙蔑,地道東北人见妒。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像甸陌,于是被迫代替她去往敵國和親须揣。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,500評論 2 359

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

  • 之前的幾篇文章談了談APP設(shè)計中的啟動頁钱豁、引導(dǎo)頁耻卡、注冊【登錄】和搜索,本篇文章談?wù)剬?dǎo)航部分牲尺。 同樣卵酪,我們先來看看導(dǎo)...
    岳山丘閱讀 4,017評論 4 87
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,759評論 1 92
  • 平常我們?nèi)ド虉龌蛘呔包c逛的時候,通常會看到整個景區(qū)或者整個商場的導(dǎo)游圖估蹄,能讓我們知道身處何地并且快速的找到目的地。...
    Ronie閱讀 7,668評論 5 148
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,280評論 25 707
  • 陽朔四葉草國際幼兒園 2017.5.4 龍老師 我佩服自己 1.佩服自己 對于沒睡著的兩個孩子從開始的那種審視“你...
    龍之蹊閱讀 250評論 0 0