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

用户头像
深圳/交互设计师/4年前/229浏览
4个技巧提升UI精致感,居然可以这么简单

58同城真实案例

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



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


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

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

undefined


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


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

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

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

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

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


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

先列个大纲:

🌈 统一色调
🧩 减少色块
🖼️ 加大图片
📌 明确主次

然后就开始正文吧:



🌈 统一色调


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




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

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

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

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

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

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

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


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

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

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

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


🧩 减少色块


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


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

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

undefined


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

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

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


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



🖼️ 加大图片


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



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



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


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

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

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


📌 明确主次


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

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



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



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


1
阅读原文
|
举报
|
4
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】汽车icon
户外旅行飞机情侣假日出行
我的钱包-UI界面设计-app
新能源APP应用UIKit
手表表盘UI系列
3D渐变流体抽象矢量UI背景图
拟物风质感写实UI卡片合集源文件
UI界面 组件
3D卡通UI界面图标可爱插画免扣素
钱包ui模板
【新年UI图标】会员icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】体育icon
UI 登录界面设计模板包
高级表盘系列UI源文件
【新年UI图标】钱包icon
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
盲盒APP UI设计
Security Camera UI kit
高级感金属拟物 UI设计组件库
UI通用设计素材1
【新年UI图标】礼物/活动icon
你可能喜欢
相关收藏夹
大家都在看
登录注册