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

2024-01-02 17:17:33 來源/作者: / 己有:0人學(xué)習(xí)過

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

C、刪除型:完全放棄導(dǎo)航欄和標(biāo)題欄,因為功能選項設(shè)置在主界面,可以破壞死板的UI的固有形象。比如News digest

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