视觉设计考研(视觉设计考研都考什么)



视觉设计考研,视觉设计考研都考什么

本文授权转载自:体验进阶(ID:Advanced_UX)

B端产品经常一不小心就做得很复杂,既要功能丰富,又保持界面效果的整洁,哪有那么好的事?

设计规范把人框得死死的,太复杂了能怎么办?

例如下面这个方案是,是基于 Ant Design Pro 改出来的,反映了很多 B 端产品的情况。明明也没有特别多的功能,看上去却感觉有点混乱。

Before

我尝试进行降噪处理后,改成了下图这个样子,在功能不减的前提下,是不是看起来清爽了许多?

After

下面通过 5 个步骤,给大家拆解一下这个降噪思路:

减少高亮色

悬停展示信息

不要拘泥于规范

收起不常用的操作

去除不必要的装饰

对了,不是所有 B 端产品需要视觉降噪的,如果是给客户定制的,而客户对视觉 要求又不高,那就没必要了。

01

减少高亮色

原方案给人的第一感觉,是颜色太多了,除了好几块主题蓝,还有各种大红大绿,让人一下子不知道看哪里。

用颜色表示状态确实是个通用的好办法,但也要注意色彩占比,不要让不是那么重要的信息过于抢眼。

将状态的色块变成小圆点后,看起来既不抢眼,又还是能用颜色判断状态。

已选择的项目数量,原来是放在一个淡蓝色的大横框里,再加上那个 i 图标,看起来有点像是错误提示了。其实完全没必要那么抢眼,去掉背景看起来也挺好。

02

悬停展示信息

如果确保产品基本只用桌面端操作,那么千万别忘记悬停态这个好方法。

不需要经常查看或者不常用的信息和功能,都可以默认隐藏,悬停时再展示。

这方面可以修改的点就多了:

  • 每列重复的文字操作按钮,可以悬停再出现。

  • 文字后的编辑图标,可以像文件夹重命名那样双击操作。

  • 更新时间如果通常不需要过于精确的数字,可以默认只展示日期。

  • 空白信息的添加按钮,使用率大概较低可以悬停展示。

当然,以上这些修改肯定不适用于所有情况,例如有些产品还真的必须外露所有信息和操作。这里只是给个思路而已,如果不适合就别采纳了,以你的实际需求为标准。

03

不要拘泥于规范

B 端产品的业务很复杂而且经常变动,所以基本都需要设计规范。

但是如果太过拘泥于设计规范,什么都按惯例行事,就别想做出特别好的设计了。

重要的页面或模块,肯定得多花些力气,这样才能给大多数用户留下个好印象,所以该特殊时还得特殊一下。

例如原来的查询模块,看起来就很臃肿:

用搜索框来做检索,将下拉框的标题塞进去后,发现右边那两个按钮也可以去掉了,顺便将“展开”简化成灰色图标:

现在页面看起来更加清新了:

04

收起不常用的操作

B 端界面很容易摆出一大堆操作,结果分析一下数据和用户行为,发现其实常用的也就那么几个。

例如表单右上角的这一堆操作就看着很复杂,那几个图标除了刷新之外,使用率应该都蛮低的。

于是除了刷新之外的三个图标都收到「…」菜单里,并且为了视觉上能对齐,将新建按钮放到右边。

这样,整个界面又少了些干扰:

05

去除不必要的装饰

往 B 端页面放任何装饰元素都要小心谨慎,哪怕只是边框和阴影。

B 端页面上很容易堆一大堆东西,这样装饰元素就会开始和有用信息抢占视线,这个时候你会开始觉得那些装饰元素有点烦人了。

例如卡片阴影和分页器的边框,单独看着还不错,但如果想要进一步减少界面的视觉干扰,也可以去掉:

最后对比一下

每个产品的情况不同,以上的方法肯定无法适用所有场景。

希望这五个思路,能给大家提供一些设计灵感。

文章转载:体验进阶,版权归原作者所有

https://mp.weixin.qq.com/s/iPf5jK__Gc670HlokYcaOQ

版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。

联系微信:Meia_99

联系电话:15011717572

终审 | 苏菁

编辑 | 廖金婷

点这里,学习更多设计知识!

视觉设计考研(视觉设计考研都考什么)



赞 (0)