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

來(lái)源:站酷 作者:harry卷妹 學(xué)習(xí):7698人次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!