4个技巧提升UI精致感,居然这么简单

58同城有一个同城交友平台,专做社交、相亲、红娘业务。

可能是因为聚焦下沉市场吧,设计有种粗糙廉价感,不太精致……

4个技巧提升UI精致感,居然这么简单

但是!最近他们做了一个改版,突然界面就提升了一个档次。

虽然依旧是偏下沉市场,但感觉像是给小哥哥小姐姐们的正经交友平台了~

4个技巧提升UI精致感,居然这么简单

他们写了一篇项目复盘:58同城社交版块 – 设计改版流程.docx

不过,我觉得里面说得东西有些过于细碎,读着读着就有点找不到方向了。

其实总结起来,我认为这次改版最明显的亮点,就是让界面更加精致了。

对 UI/UX 新人来说,很容易出现这种错误:

  • 把卖菜的产品设计出轻奢品牌感

  • 把教育类产品设计成拼多多


今天我就以 58 这个社交产品为案例,给大家提炼几个提升界面精致度的小技巧。

先列个大纲:

? 统一色调
? 减少色块
?️ 加大图片
? 明确主次

然后就开始正文吧:

? 统一色调

我们先看改版前的页面,简直就是色彩乱飞。

4个技巧提升UI精致感,居然这么简单

尤其是首页,紫色、橙色、桃红、蓝色都集齐了,主色调应该是那个俗气的桃红色。

但是到了第二个页面,突然主色调就变成了大红色?

第三个页面,主色调不知是红色还是橙色……

第四个页面,怎么突然蹦出一个亮青色??

第五个页面,告诉我背景上的这个梦幻紫哪里来的???

感觉每个页面,甚至每个模块都很有个性,但组合到一块儿,就有点不伦不类的了。

这种配色让人联想到,小杂货店里低价出售的塑料盆,价格便宜就行,什么颜色都无所谓。

4个技巧提升UI精致感,居然这么简单

这样设计,能精致起来才怪了。

再来看看改版后的,很明显把整个界面的色调往橙色靠拢。

橙色比桃红色多了些朝气,少了些媚俗,感觉好多了。

4个技巧提升UI精致感,居然这么简单4个技巧提升UI精致感,居然这么简单

虽然图标依旧是彩色,但每个都多少加了点橙色,放在一起还是在橙色的大氛围里。

4个技巧提升UI精致感,居然这么简单


? 减少色块

改版前色方案色块运用过多,导致一眼能看到很多不大不小的色块:

4个技巧提升UI精致感,居然这么简单

鲜艳的色块在视觉上分量很重,对整个界面的布局有很大的影响。

而这些色块数量多,尺寸又相差不大,凑在一起就很难布局得好看,一不小心就看起来像是打补丁的感觉。

4个技巧提升UI精致感,居然这么简单

虽说补丁也可以算是一种风格吧,但绝对离精致相差很远。

至少,年轻小哥哥小姐姐聚会交友时,一般都会避免这种风格吧?

再来看看改版之后,减少了色块的数量,并且把部分中色块变成了半透明的轻色块。

4个技巧提升UI精致感,居然这么简单

再用服装打个比喻,就像是把补丁换成了少量装饰图案,而且还增加了薄纱材质,质感蹭蹭就上去了。

4个技巧提升UI精致感,居然这么简单


?️ 加大图片

这次改版,还把帖子展示图片的数量减少了,对精致感的提升效果明显。

4个技巧提升UI精致感,居然这么简单

其实关键不是数量而是尺寸,大图永远是 B 格提升利器,很多时尚杂志封面都是这种感觉:

4个技巧提升UI精致感,居然这么简单

如果多放些图片,档次肯定立马就掉下去了:

4个技巧提升UI精致感,居然这么简单

不是说上面这种设计就不行,而是如果想要提升档次感,就要多用大图少用小图。

而且现在的小哥哥小姐姐,交友平台上发的图片质量不错的。

好好展示就行,就没有必要用数量来凑了。


? 明确主次

改版之后,重要文字的尺寸被拉大加强,而不重要的内容则变细变浅。

两相对比,重点更加突出了。

4个技巧提升UI精致感,居然这么简单

这样能够让人感觉更加细致清晰,知道最有价值的信息在哪,像报纸或杂志排版一样:

4个技巧提升UI精致感,居然这么简单

而不是给人看说明书的感觉。

4个技巧提升UI精致感,居然这么简单


总结

虽然今天结束了很多提升界面精致感的方法,但也不是什么产品都要看起来越精致越好。



因为凡事都有个度,今天介绍的这几点,如果不是做奢侈/文艺品牌,就不要拉得太满,否则亲民度就要大打折扣了。

想要学习或者练习交互,但又缺少机会和动力的朋友,可以了解一下「体验设计学习社」。


无限制作品集详细点评+答疑+免费训练营&学习打卡等活动,更有各类大厂内推:

4个技巧提升UI精致感,居然这么简单

如果你只是想要多认识一些同行,也可以加入我们无广告的纯粹体验研讨微信群:


4个技巧提升UI精致感,居然这么简单

4个技巧提升UI精致感,居然这么简单
4个技巧提升UI精致感,居然这么简单

本篇文章来源于微信公众号: 体验进阶

UI/UX

2022云上有位来 | 腾讯云设计中心招聘

2021-12-8 21:00:35

UI/UX

如何构建数字化体验管理系统?

2021-12-9 10:35:51

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索