你100%會(huì)遇到的ui問題，沒遇到來打我！

菜心的第305篇原創(chuàng)

2021年的第83篇

距離2021年小目標(biāo)100篇原創(chuàng)還剩17篇

今天和大家分享幾個(gè)每個(gè)ui設(shè)計(jì)師都會(huì)遇到的知識(shí)點(diǎn)，內(nèi)容如下：

01  底部導(dǎo)航和內(nèi)容的區(qū)分方式

大部分app產(chǎn)品頁(yè)面都是帶有底部導(dǎo)航的，正常來說，底部導(dǎo)航是需要和內(nèi)容部分做一點(diǎn)區(qū)分的，如果底部導(dǎo)航是純白色，內(nèi)容區(qū)域也有大面積純白色，二者相遇后，就會(huì)傻傻分不清楚。

那如何做區(qū)分呢？我看了很多產(chǎn)品后，大致可以分為三種：

第一種：加一條灰色的線

有些加的1px，比如站酷的：

有的是加的0.5px，比如知乎的：

我個(gè)人比較傾向于稍微細(xì)一點(diǎn)的，會(huì)稍微精致一些。

第二種：導(dǎo)航本身是灰色

如果導(dǎo)航本身是灰色，那就不用加線了，直接就可以和內(nèi)容進(jìn)行區(qū)分，比如qq的：

可以注意下，現(xiàn)在很多app的底部導(dǎo)航有一點(diǎn)的透明加模糊的效果，還是比較舒服的。

第三種：加投影

也有一些產(chǎn)品底部導(dǎo)航是白色，但不加橫線，而是加投影來進(jìn)行區(qū)分，比如：

我覺得效果也還行。

以上就是我目前看到的三種處理方式，大家可以根據(jù)自身產(chǎn)品風(fēng)格來選擇使用哪種方案。

02 已填寫與未填寫內(nèi)容的區(qū)分方式

最近做了一些關(guān)于個(gè)人信息填寫、賬號(hào)綁定的頁(yè)面，所以在思考一個(gè)問題，如果已填寫和未填寫的部分，沒有做狀態(tài)區(qū)分，用戶識(shí)別起來就會(huì)有一定的成本，比如有些平臺(tái)的效果是這樣的：

已填內(nèi)容和未填內(nèi)容都是很淺很灰的字體，分區(qū)效果不明顯，識(shí)別成本就會(huì)有點(diǎn)高。

看了很多產(chǎn)品的方案，大致可以用以下三種方式來進(jìn)行區(qū)分：

第一種，已填內(nèi)容為黑色，未填內(nèi)容為灰色：

第二種，已填內(nèi)容為藍(lán)色，未填內(nèi)容為灰色：

第三種：已填內(nèi)容為灰色，未填內(nèi)容為空：

我個(gè)人還是比較偏向第一種方式，填寫了內(nèi)容就亮起來，但也不用太亮（比如使用藍(lán)色），黑色表示有內(nèi)容，灰色表示暫無內(nèi)容，夠用！

03 信息流的區(qū)分方式

我們經(jīng)常會(huì)做一些關(guān)于圖文信息流的排版，信息與信息之間如何區(qū)隔呢？正好最近在做，稍微歸下類，找到四種區(qū)分方式：

第一種：線條區(qū)分，比如像網(wǎng)易云、朋友圈等等：

第二張：色塊區(qū)分，比如快看、吧嗒等等：

第三種：卡片區(qū)分，像唱吧、美團(tuán)外賣等等，直接用卡片把每個(gè)信息進(jìn)行包裹來區(qū)分：

第四種：間距區(qū)分，像站酷這種，中間不加任何區(qū)分元素，只有間距，但是這種一般使用在信息相對(duì)比較簡(jiǎn)單、大圖片場(chǎng)景：

以上幾種方式，可根據(jù)自己內(nèi)容復(fù)雜程度、信息層級(jí)、設(shè)計(jì)風(fēng)格等多個(gè)維度來進(jìn)行選取使用，只要有理有據(jù)即可。

總結(jié)

好啦，以上就是今天要和大家分享的幾個(gè)小點(diǎn)，因?yàn)槠綍r(shí)工作上會(huì)遇到，所以就多去看了看別的產(chǎn)品，然后總結(jié)一下和大家分享分享，希望能對(duì)大家有所啟發(fā)。

來一起扣細(xì)節(jié)呀

細(xì)節(jié)就是這么慢慢摳出來的，兄弟們，想來一起摳細(xì)節(jié)，做更精致的設(shè)計(jì)，啥也別說，你就戳下方鏈接，一起進(jìn)步就完了：