虽说B端实用优先,但我发现国内很多B端产品看起来都比国外知名产品复杂很多。
(资料图)
这个从知名设计系统的对比就可以看出差异:国外B端大厂设计系统,比国内更强吗?
其实我认为,有些所谓“极简”风格,只是停留在静态UI上,并没有和具体场景动态结合。
这样导致即便方案画得再好,落地后效果也一般。问就是:“功能太多没办法”。
以这个表单弹窗为例,你觉得怎么样?
看着也就是一般的B端常见页面,跟极简是搭不上边的。
那这个方案呢:
是不是感觉更简洁更细致一些了?
不但功能没少,反而增加了——新方案可以在列表中间创建任务。
接下来就以此为案例,给大家捋一捋,功能太多的情况下如何做极简设计。
目录:
去除无效信息
轻重分明
️减少视觉干扰
善用悬停态
操作暗示
去除无效信息
尽量删减UI上展示的元素,不但能让视觉上更加简洁,而且还可以减轻用户的阅读负担。
像是下面这两个输入框,“请输入”占位符重复出现就感觉不太有必要:
去掉之后简洁一些,也不影响使用:
信息重复更是要尽量避免,例如下面这个日期输入框,你数数有多少个重复元素?
日期重复了2次、请选择重复了2次、图标重复了两次,最重要的是,操作也要重复2次。
将两个输入框合并后,重复元素就少多了,而且可以通过一个弹窗将时间段选好。
还有一个小细节,你有没有发现右上角的“叉”和“取消”按钮在功效上其实差不多?
想进一步减少元素的话,去掉取消按钮也是一种方法。
轻重分明
看看下面这两张卡片:
第二张看起来更简洁,是因为重点更分明,而这个原理也可以用到UI设计上。
你看下面这个焦点态的输入框,比默认态加了一个高亮描边,能起到强调作用:
那如果把边框再加粗一圈呢?看起来是不是更加轻重分明了?
复选框也可以用类似的原理改善:
虽然右侧用了高亮色,但去除颜色后,会发现左侧这个框也挺重的:
将未勾选状态的灰色减弱后,二者对比更清晰了:
️ 减少视觉干扰
看看这几张圆点图:
你是不是感觉第一张是最简洁的,最后一张最复杂?
同样的图形,实心是视觉干扰最少的,虚线是视觉干扰最多的。所以UI设计中,如果想要保持高度简洁,就要少用虚线。
下面这个图标的虚线框,就有点抢夺视线了。虽然不严重,但实在是没必要。
改成实心背景后,视觉上就简洁多了:
还有就是别给所有的操作图标刷上高亮色,这反而抢了重要信息的风头:
除非是整个页面来看都很重要的操作,否则最好是都被高亮,顶多加一个悬停高亮色就好了。
说到悬停,接下来就单独讲下这块。
善用悬停态
有些功能必须有,但大部分时间都用不到,那么就可以默认隐藏,悬停态展示。
例如下图,标题旁边的 info 图标可能用户看一次就够了;列表右侧的图标实际上使用率也很低;备注的字数限制大部分情况下都不需要关心。
利用悬停态隐藏这些没必要的信息后,看起来简洁多了:
操作暗示
列表操作即便悬停时才展示,看起来还是很复杂。
关键是,这些图标有些还不是那么好理解的,不但费眼睛还费脑子,甚至都未必好用。
仔细想想,这些操作其实完全可以通过其它形式展示,没必要清一色的图标。
编辑:可以直接将一整列当成输入框来用,鼠标点一下直接改。
排序:可以直接拖动排序。
删除:这个倒是得用图标,但只留一个图标时,“叉”比“垃圾桶”看起来更舒服。
于是,改成这样了:
到这里,我突然还想到还可以加一个功能——直接在列表之间做添加,减少不必要的排序操作:
现在看看原型效果,感觉如何:
最后再来对比一下
这是修改前:
这是修改后:
不得不说,虽然后面那个方案细节上好很多,但是开发成本也是大了很多呀!
尤其是那个列表,如果偶尔才用到一次的话,这么弄就不划算了,顶多做成悬停展示操作图标就够了。
对了,这个案例我是用 Figma 做的原型,想要源文件的同学,可以右下角点一个在看,后台回复「figma原型」免费领取。
查看原型的方式:选择界面后,点击Figma右上角的三角形播放图标即可(Share按钮旁)。
想要一年内快速提升体验设计能力的小伙伴,可以了解一下「体验设计学习社」:
编者按: 每一个努力生活的中国人,都是最美的奋斗者。也正是因为亿万奋斗者,才有了今日之中国。十年,致敬每一个奋斗的你。让我们一起,踔
中新网永州5月23日电 (谢助民 唐毅刚)每天上午,在湖南东安县中天职业培训学校教室,炒菜师傅唐远江都准时教学员做东安鸡。红椒丝、姜丝
中新网福州5月23日电 (郑江洛)福建省公安厅出入境管理局局长郑荫源23日在此间披露,今年以来,福建共侦破妨害国(边)境管理犯罪案件378起,
中新网福州5月23日电 (郑江洛)“2017年至2021年,全省社会治安呈现‘两降三升’良好态势。”福建省公安厅党委委员、副厅长黄华安23日在此
中新网湖州5月23日电(施紫楠 施妍 陈思谊)“等到疫情好了,我们就去找你……”23日,浙江省湖州市长兴县洪桥镇弁山村村民郑益谋一家,又
X 关闭
X 关闭