你100%会遇到的ui问题,没遇到来打我!

经验专区 职场疑惑 职场疑惑 2021-09-07 02:02  浏览 :746

今天和大家分享几个每个UI设计师都会遇到的知识点,内容如下:底部导航和内容的区分方式、已填写与未填写内容的区分方式、信息流的区分方式。

01  底部导航和内容的区分方式

大部分app产品页面都是带有底部导航的,正常来说,底部导航是需要和内容部分做一点区分的,如果底部导航是纯白色,内容区域也有大面积纯白色,二者相遇后,就会傻傻分不清楚。

那如何做区分呢?我看了很多产品后,大致可以分为三种:

第一种:加一条灰色的线

有些加的1px,比如站酷的:

有的是加的0.5px,比如知乎的:

我个人比较倾向于稍微细一点的,会稍微精致一些。

 

第二种:导航本身是灰色

如果导航本身是灰色,那就不用加线了,直接就可以和内容进行区分,比如qq的:

可以注意下,现在很多app的底部导航有一点的透明加模糊的效果,还是比较舒服的。

 

第三种:加投影

也有一些产品底部导航是白色,但不加横线,而是加投影来进行区分,比如:

我觉得效果也还行。

以上就是我目前看到的三种处理方式,大家可以根据自身产品风格来选择使用哪种方案。

 

02 已填写与未填写内容的区分方式

最近做了一些关于个人信息填写、账号绑定的页面,所以在思考一个问题,如果已填写和未填写的部分,没有做状态区分,用户识别起来就会有一定的成本,比如有些平台的效果是这样的:

已填内容和未填内容都是很浅很灰的字体,分区效果不明显,识别成本就会有点高。

看了很多产品的方案,大致可以用以下三种方式来进行区分:

第一种,已填内容为黑色,未填内容为灰色:

第二种,已填内容为蓝色,未填内容为灰色:

 

第三种:已填内容为灰色,未填内容为空:

我个人还是比较偏向第一种方式,填写了内容就亮起来,但也不用太亮(比如使用蓝色),黑色表示有内容,灰色表示暂无内容,够用!

 

03 信息流的区分方式

我们经常会做一些关于图文信息流的排版,信息与信息之间如何区隔呢?正好最近在做,稍微归下类,找到四种区分方式:

第一种:线条区分,比如像网易云、朋友圈等等:

 

第二张:色块区分,比如快看、吧嗒等等:

 

第三种:卡片区分,像唱吧、美团外卖等等,直接用卡片把每个信息进行包裹来区分:

 

第四种:间距区分,像站酷这种,中间不加任何区分元素,只有间距,但是这种一般使用在信息相对比较简单、大图片场景:

以上几种方式,可根据自己内容复杂程度、信息层级、设计风格等多个维度来进行选取使用,只要有理有据即可。

 

总结

好啦,以上就是今天要和大家分享的几个小点,因为平时工作上会遇到,所以就多去看了看别的产品,然后总结一下和大家分享分享,希望能对大家有所启发。

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

文章:1680672 丨女 | 经验专区

全部评论 (4)
andoo50
1楼 · 2021-09-07 02:43

转发了

路过的吃瓜群众
2楼 · 2021-09-07 02:35

谢谢分享

mochen
3楼 · 2021-09-07 02:54

转发了

UI设计培训
4楼 · 2021-09-07 02:57

转发了

回答370 文章6 提问394
更多Ta的文章
热门文章
最新问题

©2016-2019 所有权归属:小灶课堂 鲁ICP备15030858号-2