页面表达常用方式(2)

作者:丽君 来源:Tencent CDC Blog 时间:2010-05-27 12:42:00 

对齐

在内容排版的设计中,把内容右对齐,会形成一种良好的双重边界,该边界沿着这一组对象的中间向下延伸(利用了格式塔原则——连续性原则),这样带来的好处是加强了边界引导读者的眼光平滑向下延伸,有助于形成良好的视觉流。如下图:

 

在表单设计中,也是如此。能够使操作区域对齐,将大大提升用户的完成任务的效率。但是对齐是以左对齐还是右对齐也要引起注意。据研究表明,标签和输入框之间的空白区域加重了用户的认知负担(cognitive loading),用户必须花相当多的时间以便在标签和输入框之间移动视线:

 

操作过程中,用户更关注输入框本身,而不是标签。用户眼睛关注点的转移速度是非常快的,并且即使不从头阅读标签也能明白它的意思。但人们习惯于从左至右的书写,所以这种右对齐的布局给用户造成了细微的阅读障碍:

 

而以下这种摆放形式的好处就是,用户可以一眼就看到标签和它对应的输入框,而且不用担心用户阅读标签带来的额外负担:

 

标签:设计师,页面,视觉
0
投稿

猜你喜欢

  • 键盘扫描码[比较完整]

    2022-09-26 20:20:48
  • pycharm 实现本地写代码,服务器运行的操作

    2023-04-10 21:12:44
  • MySQL的表级锁,行级锁,排它锁和共享锁

    2024-01-28 15:44:22
  • vue3.2中的vuex使用详解

    2024-05-25 15:16:58
  • mysql 复制过滤重复如何解决

    2024-01-18 17:55:54
  • 未能找到存储过程’master.dbo.xp_fileexist’解决方法

    2011-03-13 09:29:00
  • 利用Python实现快速批量转换HEIC文件

    2022-08-01 08:41:35
  • MySQL无法创建外键的原因及解决方法

    2024-01-17 00:00:07
  • PHP抽象工厂模式Abstract Factory Pattern优点与实现方式

    2023-05-25 03:04:57
  • 对python中不同模块(函数、类、变量)的调用详解

    2022-01-17 14:36:38
  • openfiledialog读取txt写入数据库示例

    2024-01-16 02:03:35
  • Python命令行参数定义及需要注意的地方

    2022-09-16 02:34:39
  • PS中执行N遍选定动作的脚本

    2008-02-22 21:33:00
  • Vue.js开发环境搭建

    2024-05-28 15:55:38
  • js运算精度丢失的2个解决方法

    2024-04-10 10:38:02
  • MySQL数据库临时文件究竟储存在哪里

    2009-09-06 12:11:00
  • MySQL如何修改账号的IP限制条件详解

    2024-01-14 19:41:59
  • win10 + anaconda3 + python3.6 安装tensorflow + keras的步骤详解

    2021-05-18 10:22:32
  • PyCharm配置mongo插件的方法

    2023-08-16 19:37:05
  • html+vue.js 实现漂亮分页功能可兼容IE

    2024-05-11 09:13:25
  • asp之家 网络编程 m.aspxhome.com