数字媒体交互设计（慕课版） 课件 14界面设计-页面布局设计的基本理论及Web界面常见的版式设计类型(1).ppt

页面布局设计的基本理论 如何搭建栅格系统 假设内容区宽度为W（Weight），列宽为C（Column），列数为n，槽为定宽G，可以得出：W=C*n。由于槽不可以放置内容，可见内容区为：W=C*n-G。 举例：我们为一个屏宽1440的项目划分栅格，首先确定内容区宽度为1440，24列，槽为定值16；那么可以得出列宽60，栏为48。 内容区从水槽开始到水槽结束 页面布局设计的基本理论 网格系统的应用 1、横向划分 页面布局设计的基本理论 网格系统的应用 2、纵向划分 页面布局设计的基本理论 费茨定律（Fitts’ Law） 费茨定律是由保罗·费茨（Paul M. Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后1954年提出的；该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。 … … … … 费茨定律（Fitts’ Law）在设计中的应用 1、按钮等可点击区域在合理的范围之内越大越容易点击。 页面布局设计的基本理论 … … … … 费茨定律（Fitts’ Law）在设计中的应用 2、不管我们操作移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。 页面布局设计的基本理论 … … … … 费茨定律（Fitts’ Law）在设计中的应用 3、出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快。 页面布局设计的基本理论 页面布局设计的基本理论 希克定律（Hick’s Law ） 希克定律指的是：一个人面临的选择越多，所需要作出决定的时间就越长。 希克定律（Hicks Law ）在设计中的应用 设计中给用户尽量少的选择，减轻用户的决策成本。 页面布局设计的基本理论 页面布局设计的基本理论 7±2 法则 1956 年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。 7±2 法则在设计中的应用 1、PC端导航或选项卡尽量不要超过9个，应用的选项卡不会超过5个。 页面布局设计的基本理论 7±2 法则在设计中的应用 2、如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段，并注意其深广度的平衡。 页面布局设计的基本理论 7±2 法则在设计中的应用 3、把大块整段的信息分割成各个小段，并显著标记每个信息段和子段，以便清晰的确认各自的内容。 页面布局设计的基本理论 页面布局设计的基本理论 Tesler’s Law 泰思勒定律（复杂性守恒定律） 由Larry Tesler于1984年提出，也称泰斯勒定律（Tesler’s Law）。 该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，只能将固有的复杂性从一个地方移动到另外一个地方。 页面布局设计的基本理论 复杂度守恒定律对于设计的价值 每个应用程序都具有其内在的、无法简化的复杂度，只能设法调整、平衡。 这一观点主要被应用在交互设计领域。 页面布局设计的基本理论 奥卡姆剃刀原理（Occam’s Razor ） 奥卡姆剃刀定律又称「奥康的剃刀」，它是由14世纪逻辑学家奥卡姆威廉提出。这个原理称为「如无必要，勿增实体」，即「简单有效原理」。 奥卡姆剃刀原理在设计中的应用方法 1、只放置必要的东西 页面布局设计的基本理论 奥卡姆剃刀原理在设计中的应用方法 2、减少点击次数 页面布局设计的基本理论 奥卡姆剃刀原理在设计中的应用方法 3、减少段落个数 页面布局设计的基本理论 奥卡姆剃刀原理在设计中的应用方法 4、“外婆”规则 页面布局设计的基本理论 奥卡姆剃刀原理在设计中的应用方法 5、给予更少的选项 页面布局设计的基本理论 Web界面常见的版式设计类型 重点掌握 奥卡姆剃刀原理在设计中的应用 2、减少段落个数 每当我们的网页增加一段，页面中主要的内容就会被挤到一个更小的空间。那些段落并没有起到什么好的作用，而是让顾客们知道更多他们不想了解的东西。 比如雅虎搜索首页界面 我们看看图中的雅虎首页，最大的内容区域给了各种新闻和广告，最重要的搜索框在顶部所占的位置却很小，用户本来是搜索内容的，进入首页却看到大段的无关信息，干扰了用户的正常操作。 * 奥卡姆剃刀原理在设计中的应用 4、“外婆”规则 如果年龄大的人或者说老年人也能轻松的使用你的页面，你就成功了。 比如微信的界面设计 微信活跃用户已超过10亿人，微信超过 55 岁以上用户仅占 1%，但考虑到多达 2 亿的老年人口，这部分用户的增长潜力巨大，微信也越来越关注如何服务好老年用户，比如开通语音和视频聊天功能，提升通话稳定性和质量等，在发红包上，老