四虎影视永久在线观看精品,少妇性荡欲午夜性开放视频剧场,成人性生交大片免费看一,久久99久久99精品免视看看,中文字幕无线观看在

首頁 > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

一、組件介紹

Tab bars,是從屬于 iOS 所規(guī)定的幾種 App 全局組件之一,絕大多數(shù) App 都遵從于 iOS 的交互規(guī)范,使用 Tab bars 來劃分最頂層的功能頁面,這種廣泛性也反過來塑造了用戶對(duì)不同 App 統(tǒng)一的使用習(xí)慣。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

針對(duì)這個(gè)組件,iOS 官方給出了分別針對(duì) 3 tabs、4 tabs 和 5 tabs 的通用模版。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

由此可知,在 Tab bars 中使用 3-5 個(gè)選項(xiàng)是合理的,更少或更多的選項(xiàng)則應(yīng)該考慮其他的組件形式,或是重構(gòu) App 的功能結(jié)構(gòu)。

二、使用場景

與其說 Tab bars 有什么使用場景,倒不如說它有什么可以不使用的場景。Tab bars 是一個(gè)非常泛用的組件,以至于,除非你有對(duì) App 有自己的理解,或者 App 的功能極為專精沒有頂層頁面劃分的需求,否則絕大多數(shù)時(shí)候都可以使用它。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

有 Tab bars 的應(yīng)用

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

無 Tab bars 的應(yīng)用

在 App 內(nèi)部的頁面中,Tab bars 通常只會(huì)出現(xiàn)在一級(jí)頁面上,二級(jí)頁面則視本身的情況在決定要不要使用,大部份情況是不加的。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

三、設(shè)計(jì)要點(diǎn)

1.分布邏輯

基礎(chǔ)的 Tab bars 通常采用等分的布局邏輯,不管有幾個(gè) Tab,視圖都是對(duì)于全寬度等分的,而圖標(biāo)和文本則在視圖中居中對(duì)齊。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

但有一些比較特殊的 Tab bars,中間會(huì)出現(xiàn)不同的按鈕樣式,比如最常見的「發(fā)布按鈕」,出現(xiàn)這種按鈕時(shí)如果依然使用均分,視覺上會(huì)有些不大協(xié)調(diào),這時(shí)候就需要調(diào)整視圖的寬度,以達(dá)到一個(gè)視覺平衡的值。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

2. Tab 內(nèi)容

①圖標(biāo)+文本

這種是比較常見的,Tab bars 的圖標(biāo)可以做得比較偏視覺,對(duì)信息傳達(dá)形成一定的阻礙,這時(shí)候使用文本的補(bǔ)充說明能夠明確圖標(biāo)的含義。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

②純圖標(biāo)

使用純圖標(biāo)有一定的潛在條件,即:確保圖標(biāo)表意清晰。為了滿足這個(gè)潛在條件,大部份使用純圖標(biāo)的 Tab bars 不會(huì)使用視覺元素特別復(fù)雜的圖標(biāo)類型,而是力求簡潔、明確。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

③純文本

在少數(shù)內(nèi)容權(quán)重很高的 App 中,我們可能還會(huì)看到只用文本的 Tab bars 樣式,例如小紅書、抖音。這類 App 這么做的目的,是防止 Tab bars 圖標(biāo)干擾用戶瀏覽內(nèi)容,如果你也有此類需求,則可以考慮純文本的 Tab bars。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

3. 高亮的形式

不管是何種內(nèi)容類型,選中 Tab 和未選中 Tab 都要做到非常明確清晰的對(duì)比。

表達(dá)用戶目前正處于哪個(gè)頁面是 Tab bars 的意義之一,如果對(duì)比做得不夠清晰,則完全喪失了組件本應(yīng)達(dá)到的目的。

很多同學(xué)做 Tab bars 時(shí)找圖標(biāo),做樣式,費(fèi)盡心思做得特立獨(dú)行,卻在最基礎(chǔ)的對(duì)比上付之闕如,這顯然有些本末倒置了。

在高亮的形式上,普遍有以下幾種做法。

①色彩填充

顧名思義,給高亮選項(xiàng)的圖標(biāo)進(jìn)行色彩填充,其余則保持中性色 (面性或線性都可)。所填充的色彩既可以使用主色,也可是加深的中性色,具體如何選擇取決于 1、主色是否足夠醒目,是的話可以選擇填充主色;2、是否想要削弱 Tab bars 的存在感,是的話可使用加深的中性色;3、Tab bars 是否已經(jīng)存在其他使用主色的控件,是的話選擇填充中性色。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

②強(qiáng)調(diào)指示線

有些 App 還會(huì)在選項(xiàng)區(qū)域內(nèi)添加一條強(qiáng)調(diào)用的指示線,可以其他方式結(jié)合。這種做法多見于純圖標(biāo)和純文本的 Tab bars,圖標(biāo)+文本的再添加一條提示線就有些沒必要 (比如 bing 這個(gè))。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

③視覺反差

對(duì)高亮選項(xiàng)的圖標(biāo)細(xì)化視覺特征,例如:漸變、陰影、插圖化、3D 化、毛玻璃化等等,適合對(duì)圖標(biāo)繪制比較有經(jīng)驗(yàn)的同學(xué)。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

④切換圖形

將圖標(biāo)整個(gè)替換為與原來不相干的圖形,通常來說只會(huì)應(yīng)用在有限的兩個(gè) Tab 上,如:將首頁替換為 App logo,或是將首頁替換為其他功能按鈕比如「回到頂部」和「刷新」,又或者將「我的」替換為用戶頭像等等。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

⑤背景高亮

給高亮的選項(xiàng)一個(gè)可視的背景,在實(shí)際應(yīng)用中應(yīng)比較謹(jǐn)慎地使用。這種強(qiáng)調(diào)有些過于強(qiáng)烈了,尤其是配合前兩種,背景的加入可能會(huì)奪取用戶的注意力。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

4. 不一樣的 Tab bars

盡管蘋果給出了通用的 Tab bars 樣式,但你依然可以專門設(shè)計(jì)自己的 Tab bars,讓你的 App 更具風(fēng)格。

①馬蜂窩

沒錯(cuò)又是馬蜂窩,每次聊組件都有它,是因?yàn)轳R蜂窩不管在哪個(gè)組件上,設(shè)計(jì)多別出心裁

僅論 Tab bars,馬蜂窩使用了毛玻璃、懸浮式的模塊,在滑動(dòng)的過程中還可以收起不必要的展示,把更多的空間留給內(nèi)容。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

②閑魚/知乎

閑魚比較不一樣的地方在于中間的發(fā)布按鈕,是很多同學(xué)會(huì)考慮使用的「部分超出范圍」的做法。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

但很多同學(xué)不知道該如何把控「超出的度」以及中間按鈕和周圍按鈕的位置,導(dǎo)致按鈕的比例非常奇怪。這里給一個(gè)可行的方案:中間的按鈕超出不宜過多,4pt 左右即可,周圍圖標(biāo)與中間的按鈕垂直居中對(duì)齊,文字置于圖標(biāo)下方。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

③Endel

Endel 就比較有意思了,把 Tab bars 做成了分頁器 (一種控件) 的樣式,這樣做的好處是可以把選項(xiàng)增加到 5 項(xiàng)以上,多出的選項(xiàng)甚至能左右滑動(dòng),但因?yàn)檩^弱的視覺特征,只適合用在功能比較簡單、專一的工具類 App 里。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

④多鄰國/ibetter

而像多鄰國這樣的,將 App 類游戲化設(shè)計(jì)的產(chǎn)品,則會(huì)在 Tab bars 引入更有趣、更卡通的設(shè)計(jì)。

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

四、樣式拓展

這里收集了一些 Tab bars 的線上案例,也可以作為設(shè)計(jì)時(shí)的參考:

UI設(shè)計(jì)組件科普!Tab bars設(shè)計(jì)方式詳解

結(jié)尾

Tab bars 的組件,今天就介紹到這里了。

作者:超人的電話亭

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)

本文來源:http://www.sherrygarden.cn/seodongtai/19374.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。