UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

2023-11-23 17:13:26 來(lái)源/作者: / 己有:1人學(xué)習(xí)過(guò)

跟大家分享一下UI設(shè)計(jì)時(shí)的三種潛規(guī)則

A、標(biāo)簽欄下滑型中:

(1)普通下滑型,比如:豆瓣、QQ、微信、58同城、淘寶網(wǎng)、同程旅游……很多工具應(yīng)用性強(qiáng)的APP都是走這個(gè)實(shí)用路線(xiàn),他的功能模塊在下方標(biāo)題欄,就像一件不出錯(cuò)的衣服,看起來(lái)不夠好看,但是實(shí)用。

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

(2)隨心所欲型:比如格拉瓦,他采用的方式是左對(duì)齊,當(dāng)你隨便點(diǎn)擊一個(gè)icon的時(shí)候,會(huì)展出給你做解釋。

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

B、導(dǎo)航欄上滑型:

(1)滑動(dòng)型:比如mono,他的導(dǎo)航欄采用左右滑動(dòng)去選擇功能模塊,靈動(dòng),偶喜歡這種方式。

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

國(guó)內(nèi)的bilibili也是采用這種將工具欄放在上方滑動(dòng)的方式。這種比較適合藝術(shù)感十足,靈動(dòng)的APP UI。

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

(2)固定型:比如QQ音樂(lè),他將功能模塊放在上方導(dǎo)航欄,選項(xiàng)少。

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則

C、刪除型:完全放棄導(dǎo)航欄和標(biāo)題欄,因?yàn)楣δ苓x項(xiàng)設(shè)置在主界面,可以破壞死板的UI的固有形象。比如News digest

UI知識(shí),首頁(yè)、導(dǎo)航欄、標(biāo)題欄三種潛規(guī)則