14界面设计-页面布局设计的基本理论及Web界面常见的版式设计类型(1).ppt

中轴型 将图形作水平方向或垂直方向排列,文字配置在上下或左右。水平排列的版面,给人稳定、安静、平和与含蓄之感。 垂直排列的版面,给人强烈的动感。 曲线型 图片和文字,排列成曲线,产生韵律与节奏的感觉。 * 倾斜型 版面主体形象或多幅图像作倾斜编排, 造成版面强烈的动感和不稳定因素,引人注目。 对称型 对称的版式,给人稳定、理性的感受。 对称分为-绝对对称和相对对称。一般多采用相对对称手法, 以避免过于严谨。对称一般以左右对称居多。 * 重心型 版面产生视觉焦点,使其更加突出。 1.直接以独立而轮廓分明的形象占据版面中心; 2.向心:视觉元素向版面中心聚拢的运动; 3.离心:犹如石子投入水中,产生一圈一圈向外扩散的弧线的运动。 自由型 无规律的、随意的编排构成。有活泼、轻快的感觉。 * 网格系统的应用 横向划分 以12栅格系统为例，根据业务场景可以很容易的将栅格区域划分成2等分、3等分、4等分、6等分，以及根据等分模块组合的多种不等分场景。 以查询页为例，“筛选区域” 按3等分划分，“数据统计” 按3等分划分，“数据列表” 按1等分划分。 * 网格系统的应用 纵向划分 以8为基础间距，通过 8px（小号间距）、16px（中号间距）、24px（大号间距）这三种规格来划分信息层次。 在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素 ( 分割线 ) 来拉开信息层次。计算公式：y = 8 + 8 * n ( n = 0，y 是纵向间距,n是自定义设置的列数)。 * 费茨定律是由保罗·费茨博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后1954年提出的； 被用来预测从任意一点到目标中心位置所需时间的数学模型；在人机交互（HCI）和设计领域的影响却最为广泛和深远。 如图示意：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 S）; * 费茨定律（Fitts’ Law）在设计中的应用 1、按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作 从图中来看，左边登录界面的信息输入区域很明显比右边登录界面信息输入区域相互之间的距离和输入面积更大一点，在视觉及输入体验上面，左图也要比右图的好很多。再看两个页面的登录按钮，右边界面的按钮视觉上很小，而且距离上方验证码输入框的距离很近，这样的按钮不仅不好点击还容易产生误操作。相对而言，左图页面的按钮间距和大小就很合适了，输入和点击体验比右图好很多。 * 费茨定律（Fitts’ Law）在设计中的应用 2、屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。也就是说不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。 例如Windows桌面底部导航和Mac桌面顶/底部导航栏 两个操作系统我想大家都很熟悉，经常使用的都知道Windows桌面的默认导航栏是在固定底部的，而Mac导航的位置则是在顶部和底部都有。虽然，两者导航看似处在屏幕的不同位置，实际上都是固定在屏幕的边缘，还有当你去设置导航栏的位置时，都是停留在屏幕边缘四周，不会出现在屏幕中央的位置，这就是最经典的「费茨定律」用处了 * 费茨定律（Fitts’ Law）在设计中的应用 3、出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。 我们在Mac系统或者Windows系统桌面上对于文件夹的操作，通常是通过鼠标右键点击方式，在出现的操作菜单中对其进行相应的操作，方便快捷。 这样的方式还有很多，比如在浏览器中对于一张图片进行保存，对准目标右键点击，出现操作栏选择保存就可以了。 一句话回顾：任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。 * 希克定律指的是：一个人面临的选择越多，所需要作出决定的时间就越长。 席克定律多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。 比如删除弹窗：我们在使用网站或者移动端时，经常会遇到很多操作弹窗，就像下图中的两个例子，基本上弹窗的操作选项只会有两个，二选一的成本，对于用户来讲很简单方便，选择成本最小。 * 希克定律（Hicks Law ）在设计中的应用 设计中给用户尽量少的选择，减轻用户的决策成本。 比如钉钉和微信初次登录界面：当用户初次下载使用钉钉或者微信APP的时候，在进入正常的使用之前，用户会看到这个页面，我们看下面两个截图，页面上的操作按钮只有两个，一个“登录”按钮和一个“注册”按钮，这样的话，用户就很清晰接下来自己要干什么了。 一句话回