B端表格中的对齐

用户头像
深圳/设计爱好者/4年前/505浏览
B端表格中的对齐

最近入职了新公司,在给公司OA左优化,从优化规范开始。但是一开始就遇到了需要去跟开发和看惯了原来界面的人来一场battle...

在论证表格的对齐方式究竟是哪个更优之前,先要明确的一点就是,不管是B端或者是cms等后台的界面设计都是为了让用户可以高效,准确

的办公,这点是毋庸置疑的。

单从这一点出发,能让用户快速阅读,获取信息是首先要解决的事情,因此降噪也是必要的,比如表格中的斑马线,纵向分割线能省则省,必要时尽量将分割线的色相饱和度降低,等方式让用户的视线锁定在必要的信息阅读上。

回到对齐的正题上:

表格内信息的纵向列对齐(符合格式塔心理学中相近原则)能够很好的形成视觉引导线。通过对齐,会让表格更加规范易理解,给用户视觉上的统一感,视线流动更顺畅,让用户快速的捕捉到所需内容。

以下正文就“原来界面表格的居中对齐”和我要优化的“左对齐”展开来说:

(其实对于ui来说,表格内该用什么样的对齐方式应该是信手捏来的事情,但是工作就是在不断battle中让别人觉得你说的有道理)

原来的表格🔽

优化过后的表格🔽

为什么选择左对齐?

1.从阅读的习惯上来讲,几十年从左往右的习惯已经形成肌肉记忆了,符合用户的从左到右的阅读习惯。

2.从列的角度看,标题和内容左对齐,就算没有纵向分割线,也可以清楚的看出哪些内容是归属一列的 ,减少不必要的斑马线和纵向分割

线这就满足降噪的视觉要求,从而使得页面简洁。阅读大篇幅的表格更轻松。

3.阅读路径对比🔽,左对齐路径相对较短。

以上只是一丢丢关于对齐的小观点,当然表格中的对齐方式不是单一的,也不是强制的,还是需要根据业务场景做调整,也欢迎大家指正哦...

6
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】汽车icon
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
手表表盘UI系列
UI通用设计素材1
【新年UI图标】会员icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】旅行icon
Security Camera UI kit
智能家居中心 简约 UI设计组件库
UI界面 组件
科技医疗透明柜UI界面设计
我的钱包-UI界面设计-app
3D渐变流体抽象矢量UI背景图
【新年UI图标】礼物/活动icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】钱包icon
钱包ui模板
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
高级感金属拟物 UI设计组件库
【新年UI图标】体育icon
你可能喜欢
相关收藏夹
大家都在看
登录注册