UI笔记之——列表页如何设计

来自:UI中国 2020-01-03

UI设计并不是看起来那么简单,其实背后融入了设计师的很多想法,交付设计稿前可能已经进行过多个版本的细节调整才最终敲定。不过尽管如此,过段时间后回来看,确实又能发现新的问题,总觉得可以继续完善,这或许就是在成长吧。

在小公司往往项目都很赶,没有很多时间可以去开发很有设计感的界面,一方面可能牵涉开发工作量变大,另一方面保守设计才是最稳妥的快速上线的办法。那么如果是这样,设计师该如何抉择,虽然能理解产品的用意,公司的需要,但是不是说我们平时看的书,文章,学到的知识就用不起来了呢?

其实总有用武之地,我们总是要做到厚积,才能在好机会来临时薄发,机会只会给有准备的人,希望有同样遭遇的设计师不要气馁,一定要坚持自己,相信自己,我们所学的东西,一定会有未来的机会里大放异彩。

可能有设计师不会仔细考虑到列表页这样“无关紧要”的页面,哪里有那么多可以思考的地方,更不用说外行人了,但是既然身为专业人士,那必然要考虑得更仔细些,当然也不是为了打磨而打磨,而是有理有据的,能为自己的设计说点什么,为用户体验,带来不刻意的好体验。

今天先来讲一下我在设计列表页的过程中有想了哪些问题。

我在这里假定没有确定设计风

格,所以会涉及到字体大小的确定和间距等问题。

那么先来确定下这个页面包括导航栏标题在内应该有多少个字号。拿我实际的案例来说:

我这个之前的设计,现在看来确实有不少问题,当然也不是说不可以,而是我认为现在有更好的解决办法。大家可以先思考一下,我这个页面的设计哪里可以优化(带着思考看文章更有利于快速提升哦)

第一,页面有两个字体,我现在觉得页面只有一种字体大小会更舒适。

第二,信息重要层级跨越了两维度,字体大小做了差别,还要加上字体颜色的差别,加剧了对比,其实在这样的非重要页面,可以设计得更简单清晰一些。

第三,两个模块之间过渡的标题,根据亲密性原理,居中可能没有接近下方更有说服力。

第四,之前一直按照8像素原则进行设计,所以在调间距的时候,会按照8的倍数进行调整,包括文字也是二的倍数。虽然用一倍图做设计乘2都是偶数,但我还是习惯用2的倍数。不过现在开发要求,用二倍做图,这么看来,实际上二倍图更有利于开发。但在这个页面有个问题,我做的小学生的项目,根据小学生点击按钮需要更多空间的想法(目前还没找到证据,也没确定是否科学),把这个列表页设置的间距比较高,但看看别的成熟app,用户是成人为主,间距都比较小:

第五,列表页每个模块之间都进行了明显的区分,其中QQ设置页顶部出现了更大的间距,与底部模块之间的间距进行了区分。

第六,模块内的分割线,左边与文字对齐,右边则进行通栏设计,视觉上能指引用户有延伸内容,点击可查看详情,是目前流行的设计。

第七,左边文字的左边距和右边角标的右边距是否一致也要仔细考虑,因为角标的特殊性,根据实际决定。

所以还要考虑画图标时,是否贴边,切图时是否贴边切图。

以上仅是我的一些思考想法,有不对之处欢迎交流探讨哦~

Powered by Froala Editor