查看原文
其他

明白了,原来客户说界面不舒服是因为....

UI设计达人 2023-07-30

The following article is from 菜心设计铺 Author 花菜

今天我们来分享一个 PC 端的侧边栏浮窗设计,这个侧边栏浮窗能够帮助用户在游戏中快速地执行一些功能。

这是修改前

这是修改后:

视觉风格截然不同。修改后的风格更符合游戏中的使用场景。下面就来分享一下我的修改经历:

01 一定要了解页面的使用场景

一开始就忽略掉了这点,导致找的参考、尝试的几个方向做出来都不太对。

我们这个窗口是在用户游戏过程中召唤起来的页面,能够帮助用户快速的进行一些操作。根据使用场景,我们反观现在的设计,就能发现几点设计不太合理的地方:

1. 窗口设计遮挡了一部分的游戏界面,可能就会影响到用户的游戏体验
2. icon 有些复杂,可以更简化更直接一些,从而快速的识别

基于这几点,我做的调整如下:

1. 针对遮挡问题,我缩减了窗口在画面中的占比。尝试了几版:

最终决定还是用个方式:

2. 依然是针对遮挡问题,我们不妨就用黑底+足够的透明度。让他能够透出来一些游戏画面。

并且考虑到游戏画面也许会非常繁杂,我们不妨再加一点毛玻璃,确保上面的信息在任何场景下都更易于识别。

3. icon 的风格也进行了几种尝试。

根据浮窗的使用场景,最终我们打算用线性的 icon,认为这样做更能够减轻浮窗对游戏画面的干扰。

但目前浮窗的风格还是不够!看起来太普通了!没有任何特征!

02 icon 融入品牌基因,能带来差异化

除了线性的、更简化的造型之外,我们一定也要融入一些品牌的基因,才能让 icon 看起来不同,不会流于泛泛。

融入品牌基因有几个方向:
1. 融入品牌色
产品主色是什么,我就加点什么色
比如说这个产品的品牌色是橙色,我就可以在一些地方加入橙色。

2. 融入品牌图形特征
我们往往会从产品 logo 里提炼出关键词融入
这个产品的logo特征是直角、断线

那我们的 icon 也可以是直角、断线

3. 融入品牌情绪版关键词

这个产品的关键词是「科技感」「电子产品」
科技电子产品的一些地方往往是发光的

所以我们的 icon 也也可以加一些光晕:

电子产品也是具有结构的,不会全在一个平面,所以我们不妨让一些图形破形而出,也会更不一样:

模拟金属的光泽感,也可以加一些白灰渐变:


03 最后一点细节

现在看着整体还是少了一些什么,大概是一些细小的精致感,很多游戏界面的 UI 会在适当的地方做一些小修饰,会看着更精致,比如:

所以我们不妨也在分割线上做出一点图形差异:

这样就完成了。仔细观察!游戏 UI 值得借鉴的地方是有很多的!

总结
在做一个页面时,一定要思考产品的定位、了解页面的使用场景,这样做出的设计更加有理有据,更能帮助用户使用产品。再加上多多的动手尝试,不可能改不出来又合适又好看的稿子的!

希望对大家有所启发,请记得把文章转发到你的朋友圈,点个在看,咱们一起加油吧!


推荐阅读

(点击标题可跳转阅读)

这16个苹果2022最佳APP和游戏,告诉你UI设计师该卷什么方向!B端设计规范和组件库应该怎么做?
淘宝界面那么多字,原来这样排版的
回复 灵感 下载UI设计灵感合辑
点个 “ 在看” 好文不断

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存