简单几招增强B端产品界面的设计感

不管是刚进入设计行业的还是坚持了很多年想要跳槽设计师朋友。在找工作的时候,都会纠结于选择C端还是B端企业。大家对B端设计工作的印象,基本都停留在CRM、OA、ERP等后台的UI界面,都会觉得做B端产品对视觉张力、冲击力的要求会比较少,设计师进入门槛比较低。这些观点在我个人看来也不尽全对。

简单几招增强B端产品界面的设计感

由于B端产品中对视觉效果的弱化,侧重于功能实现,反倒是给设计师增加了设计难度。往往给领导或者甲方客户在提交设计方案的时候会有“看起来很普通,没有感觉”类似的反馈。在不考虑业务和交互的前提上,如何给业务相关的模块控件(列表、输入框、表格等等)增加设计感,成为当下B端设计师需要深挖的设计难点之一。

下面进入正题。

遵循对比

设计之初就没有把控好设计精度,对模块与模块,层级与层级之间的关系控制的很模糊,从而导致开发人员在前端开发的时候没有按设计稿开发的,开发还原效果不尽人意。

简单几招增强B端产品界面的设计感

a.容器文本对比

左侧的表格打眼看去是正常的。但对比右边的表格略微平庸了。表格容器分为标题和内容两种类型的模块,拉开这两者之间的对比,整体展示区层级就清晰精致了很多。

简单几招增强B端产品界面的设计感

简单几招增强B端产品界面的设计感

b.权重信息对比

每个控件都有相对应的权重信息。结合业务方的用户需求,保持信息模块的对比,清晰的通过看板传递信息。将每个文本属性进行优先级排列,做好信息区分,避免层级混乱。

减少视觉噪音

不管是走在大街小巷还是通过屏幕在虚拟网络中浏览各种平台网页,无时无刻都在被各种琐碎的具有冲击力的视觉噪音所干扰。

后台系统注重功能实用性,既要实用,又要美观。

保持页面元素一致,统一既是美,并且能够有效的减少用户对产品的学习成本。在视觉上应该尽量减少视觉干扰项,让用户能够专注的去处理某项工作内容,设计“过猛”容易引起用户的“错位关注”。

简单几招增强B端产品界面的设计感

简单几招增强B端产品界面的设计感

a.保持元素一致

页面视觉元素基本一致,可以减少用户的思考成本,侧面培养用户的行为习惯。通过局部的色彩点缀、文本字号、字重、字段行间距打造视觉差。在保持画面平衡的基础上,通过大量的留白,提供给用户沉浸式的阅读体验,从而降低用户长时间面对屏幕的视觉疲劳。

简单几招增强B端产品界面的设计感
简单几招增强B端产品界面的设计感

b.克制的颜色

B端业务系统注重功能和实用性。理性又克制的颜色搭配传递给用户专业、安全、冷静的色彩感受。克制的颜色通过界面传递出产品的品牌感,能活跃界面氛围,而且不会打乱整体的节奏感。

局部细节刻画

a.渐变+微阴影

渐变的设计手法已经很常见了,在后台页面中也可以适当的加入渐变色,能够活跃界面氛围,使界面不再单调。

简单几招增强B端产品界面的设计感

简单几招增强B端产品界面的设计感

加强局部细节刻画,提升细节设计质感,能够有效的吸引用户关注。

b.适当的微交互

B端产品的交互状态在静态设计稿中使用悬浮和滑过两种状态就可以了,后续在组件库中补齐各类状态即可(供参考)。在平庸的设计稿中加入一些控件的交互状态不仅能让前端开发人员清楚的明白“原来这里有效果的“,要不然他们对控件会默认为同一种状态。用户反馈会极大提升用户体验的愉悦感。

微交互在不影响用户使用的前提下,能够丰富界面。最关键点是可以提升过稿率~

简单几招增强B端产品界面的设计感
简单几招增强B端产品界面的设计感

c.使用圆角卡片

如果界面卡片模块过多,可以尝试使用圆角矩形。提前做好优先级排序,圆角卡片可以使信息内容呈现的更加聚焦,提供沉浸式体验,同时可以增强界面的亲和力。

简单几招增强B端产品界面的设计感

卡片边缘加入也可以尝试加入边缘线,利用不同颜色用来区分不同状态,增加设计细节。

最后

简单几招增强B端产品界面的设计感

B端产品设计中大家可以更多的去考虑设计细节,绝不仅仅只是我提到的以上几点。增强界面设计感,去突破创新,打破客观环境的设计局限性。这里通过个人在工作中用到的几点小技巧做个复盘,希望能对一些朋友有所灵感和思路,供大家参考~

业界动态

快手阻击抖音,抖音紧逼淘宝,电商江湖打响“中场战事”?

2020-9-25 9:39:43

业界动态

短视频容不下李雪琴

2020-9-25 9:55:35

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