以前有在《移動應(yīng)用ui設(shè)計——導(dǎo)航設(shè)計》中提到底部和頂部tab設(shè)計的模式和設(shè)計來源,如今市場上很多app都沿用了底部選項卡的形式。隨著app內(nèi)容的豐富,tabs方式也越來越多的呈現(xiàn)出來,tabs這一展現(xiàn)方式使得在不同的視圖和功能間探索和切換以及瀏覽不同類別的數(shù)據(jù)集合信息變得更加簡單。
用法:tab用來顯示頁面的分組內(nèi)容,tab標簽用來簡要的描述內(nèi)容。
同理,只有當(dāng)用戶不需要同時從多個選項卡中查看內(nèi)容時才使用Tab導(dǎo)航。因為使用Tab導(dǎo)航會增加用戶短期記憶的負擔(dān),增加了認知負荷和互動成本,并降低可用性。
tab 作用
1.令導(dǎo)航不言自明。
Tab 這種用戶控件是易于理解和使用的,精心設(shè)計的 tab 能通過與其它 tab 的不同來清晰地表達用戶當(dāng)前所處位置。
所以此處用戶思維是:1,tab標簽題目是什么?2,查看內(nèi)容是什么。3,不感興趣查看下個標簽
2.提高內(nèi)容組織的質(zhì)量。
Tab 對內(nèi)容進行有意義的劃分,使其在屏幕上占用更少的空間。大多情況下,tab 在視覺上連接了頁面中的內(nèi)容。這也加強了頁面空間和活動 tab 之間的聯(lián)系,也能使用戶可以輕松地訪問他們感興趣的內(nèi)容。
所以tab帶給用戶更多的體驗是左右滑動的轉(zhuǎn)場動效,強化不同tab處于同一個屏幕的感覺,使得信息結(jié)構(gòu)更加扁平。
3.增強視覺上的一致性。
ios10的人機界面設(shè)計指南中提到了一致性的設(shè)計原則。一款內(nèi)部一致的應(yīng)用能夠貫徹相同的標準和規(guī)范:使用系統(tǒng)提供的界面元素、風(fēng)格統(tǒng)一(眾所周知)的圖標、標準的字體樣式和一致的措辭。應(yīng)用所包含的特征和交互行為是符合用戶心理預(yù)期的。
但其實比一致性更重要的是設(shè)計能夠讓用戶輕松快速上手app,低成本的理解頁面核心內(nèi)容,這種將內(nèi)容展示給用戶是對以內(nèi)容為中心的用戶界面設(shè)計非常好的展現(xiàn)形式。
4.tab內(nèi)容的同一性和差異性。
ios的tab樣式存在多樣性,除了同類信息tab外,異類信息也可以用tab的形式展現(xiàn)。而用戶在使用 tab 時則認為他們會在當(dāng)前視圖中看到與已打開的 tab 或父級 tab 相關(guān)的內(nèi)容即可,并不會過多的從整體tab去認知和比較,如果我們的設(shè)計是讓用戶在tab里面進行反復(fù)的比較各個tab的內(nèi)容信息,則違背了tab的設(shè)計原則,讓原本易用的設(shè)計變得復(fù)雜了。
tabs同類信息比較常見,新聞類app有很多標簽?zāi)K
而騰訊也有單獨把視頻作為tabs的一項,相比于其它地域和類別的標簽,也不會顯得難以理解和突兀。
Tab 也可以以某種方式分割相互關(guān)聯(lián)的數(shù)據(jù)。在 Apple AppStore 中每個 app 視圖都有詳細信息,評論和相關(guān)子視圖的 tab。
5.自然的平級
通常,用戶不需要同時看到多個 tab 的內(nèi)容。如果你的內(nèi)容需要人們比較不同 tab 上的信息,那最好不要使用 tab ,因為反復(fù)切換增加了用戶的短期記憶負擔(dān),降低了可用性。
6.范圍選擇欄或過濾器
當(dāng)我們對用戶可能想要搜索的內(nèi)容有明確的定義或分類時,將 tab 引入范圍選擇欄可能起到很大作用。
總結(jié):tabs的設(shè)計初衷在于讓用戶易用易理解產(chǎn)品,tab的標簽則讓用戶更易理解當(dāng)前tab頁面內(nèi)容,用合適的頁面布局形式突出頁面的功能,減少用戶比較與思考成本。
tabs頁面的內(nèi)容要注意其一致性,而界面的一致性可以分為形式與功能,這里可以遵循一條理論:形式滿足于功能(而非功能滿足形式),以內(nèi)容為主,展現(xiàn)出用戶需要的信息才是優(yōu)秀的設(shè)計。
而視覺則需用其高超的技藝讓界面的形、色、質(zhì)相輔相成,讓每一個不同的組成元素,文字、組件、圖標交融交錯,使其整個app每一個組成部分都有特定條件下的前提以促成他們在視覺表現(xiàn)上的一致性。
tab可能看起來像一個微小、乏味的圖形用戶界面設(shè)計,但我們合理的運用Tab的特點,扁平的信息架構(gòu),讓用戶快速獲取信息,閱讀理解頁面內(nèi)容,這樣也能為我們的用戶體驗加分哦!