3.8 界面设计-页面布局设计的基本理论及Web界面常见的版式设计类型-备课笔记

编号14-01【web产品交互设计开发制作】编号14-01学习任务八、页面布局设计的基本理论及Web界面常见的版式设计类型一、课程说明与要求1.课程说明网页是网站构成的基本元素。那么，网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素-----网页的布局。本节课我们就有关网页布局讲解一下。二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，很多同学是没有接触过网页交互设计的页面布局，并不了解它的一些基础知识和理论，普遍认知不强，另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入我们学习页面布局，首先要了解网页布局设计的基本理论、页面布局的版式设计都有哪些常用的类型，我们几乎可以在任何地方应用网页布局的基本理论，比如页面中的“导航、卡片、正文和分页”等等，就是格式塔原理中的接近原则的一个体现。三、理论知识讲解（一）页面布局设计的基本理论………【难点】页面布局设计的基本理论包括：格式塔原理、网格系统、7+2法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂守恒定律等，这些理论我们会一一阐述，对于“为什么要这样进行设计的问题？”我们应该会有些许答案。1.格式塔原理格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。其中最基础的发现是人类视觉是整体的；“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。在高校领域，尤其对于艺术类院校学生而言，知识性与技术性、艺术性并存，注重学生个性化的培养，注重创新意识和创造能力的训练的课程更是不容忽视的一个环节。将格式塔心理学基本理论引入本次课程设计，目的是希望界面交互设计向理性化发展，要求在设计时遵照人类的认知规律，并且将这些规律正确的应用到设计实践中。…………【思政融入（与时俱进、尊重科学的精神）】编号14-02编号14-02（1）接近性主要指的位置的接近，物体之间的相对距离会影响我们感知它是否以及如何组织在一起。在UI设计中使用接近原则来组合类似的信息、组织内容、调整布局。正确使用将对视觉传达和用户体验产生积极影响。我们几乎可以在任何地方应用接近原则，从“导航、卡片、正文和分页”等等。（2）相似性主要指内容的相似，如果其它因素相同，那么相似的物体看起来归属于一组。我们倾向于将相似的元素视为一个分组，相似原则可以帮助我们组织和分类组中的对象，并将它们与特定的含义或功能相关联。我们可以在“导航、链接、按钮、标题、号召性用语”等方面运用相似原则。编号14-03编号14-03（3）连续性视觉倾向于感知连续的形式而不是离散的碎片。连续线后面的元素被视为分组。线段越平滑，我们就越看到它们的统一形状，我们的思想更喜欢阻力最小的道路。行和列的线性排列是连续性的良好示例。我们可以在“菜单和子菜单，列表，轮播，服务或流程/进度显示”中使用它们。（4）封闭性视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。通过这种方式，我们可以减少传递信息所需的元素数量，降低复杂性并使设计更具吸引力。闭合可以帮助我们最小化视觉噪音并传达信息，在相当小的空间内强化概念。我们可以在“图标以及图形设计中”使用闭合原则，可以简单快速且清晰的传达想表达的意义。编号14-04编号14-04（5）对称性我们倾向于分解复杂的场景来降低复杂度。无论距离远近，对称元素都会被认为属于一体，给我们一种坚固和有序的感觉。我们的眼睛寻求这些属性以及秩序和稳定，因此对称对快速有效地传递信息非常有用。对称感觉很舒服，帮助我们专注于重要的事情。对称原则通常用于“产品展示，列表，导航，banner和任何内容丰富的页面”。（6）主体/背景我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余则是背景。当物体重叠时我们习惯把小的那个看成是背景之上的主体。编号14-05（7）共同命运编号14-05与接近性、相似性原理相关，一起运动的物体被感知为属于一组或者是彼此相关的。不管这些元素相距多远，或者它们看起来有多么不同，如果它们一起移动或变化，它们就被认为是相关的。这种效果可以发生，即使运动是隐含的。我们可以在可扩展菜单，产品滑块，视差滚动和滑动指示器中使用共同命运原则。【互动讨论，引导学生感受格式塔原理的接近性、相似性、对称性等在网页的应用，教师做分类总结】2.网格系统网格系统（gridsystems），也叫“栅格系统”。网页系统是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。（1）网格栅格系统的最小原子单位；栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位。编号14-06（2）列、水槽编号14-06列（Column）：列是栅格的数量单位，通常设定栅格数量说的就是列的数量槽（Gutter）：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散；槽通常设为定值。（3）栅格宽度、边距栅格宽度：页面栅格系统的总宽度。边距：栅格外边距，与屏宽保持一定的安全距离。（4）盒子/区域建立好基础栅格之后，一块内容通常会占用几个栏和列的宽度，我们把这个区域理解为内容盒子，用于承载一个区域的内容。编号14-07（5）如何搭建栅格系统编号14-07●确定屏幕尺寸，确定安全范围●确定关键数据：列的数量、水槽的宽度3.费茨定律费茨定律是由保罗·费茨（PaulM.Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后1954年提出的；该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。●费茨定律在交互设计中的应用1）按钮等可点击区域在合理的范围之内越大越容易点击。2）不管我们操作移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。3）出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。4.希克定律希克定律指的是：一个人面临的选择越多，所需要作出决定的时间就越长。设计中给用户尽量少的选择，减轻用户的决策成本。编号14-085.7±2法则编号14-081956年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了5-9项信息后人类的头脑就开始出错。6.Tesler’sLaw泰思勒定律（复杂性守恒定律）由LarryTesler于1984年提出，也称泰斯勒定律（Tesler’sLaw）。该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，只能将固有的复杂性从一个地方移动到另外一个地方。每个应用程序都具有其内在的、无法简化的复杂度，只能设法调整、平衡。这一观点主要被应用在交互设计领域。7.奥卡姆剃刀原理（Occam’sRazor）奥卡姆剃刀定律又称“奥康的剃刀”，它是由14世纪逻辑学家奥卡姆威廉提出。这个原理称为「如无必要，勿增实体」，即「简单有效原理」。在交互设计中的应用方法：只放置必要的东西减少点击次数减少段落个数外婆规则给予更少的选项【课后思考：第一，格式塔原理包含的几点主要原则，二，网格系统由哪些定义组成】（二）web界面常见的版式设计类型………【重点】版式设计是指设计人员根据设计主题和视觉需求，在预先设定好的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片（图形）及色彩等视觉传达信息要素进行有组织、有目的的组合排列的设计行为与过程。编号14-091.国字型编号14-09一般大型的门户网站（腾讯、新浪、搜狐）都会采用这种方式，因为它承载的内容很多，相对来说还是很有条理的。2.匡字型去掉了国字型布局的右边部分，给主内容区释放了空间，一般在政府机关类网站或学校学术类网站会有这样的需求。3.三字型将网页整体分割为三部分，色块中大多放置广告条与更新的版权提示。编号14-10编号14-104.川字型整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度的突出主页的索引功能。5.海报型很多企业官网都会采用这种，显得简单大气上档次的感觉，还有首屏也可以放些视频来播放。6.标题文本型包含标题以及正文的内容，这种类型页面最上面往往是标题或类似的一些内容，下面是正文，比如一编号14-11些文章页面。编号14-117.综合型布局是上述几种类型的综合运用，以横排为主，布局比较灵活。【互动讨论，引导学生感受不同网页版式设计，教师做分类总结】（三）其他版式设计构图类型版式设计的原则：主题鲜明突出；形式与内容统一；强化整体布局按照主从关系的顺序，使放大的主体形象在视觉中心，以此表达主题思想。版式设计的构图类型大致可以分为：骨骼型、满版型、上下分割、左右分割、中轴型、曲线型、倾斜型、对称型、重心型、自由型。四、实践技能训练编号14-12（一）布置训练任务编号14-12任务1：分析网页产品对应的版式设计类型，使用了哪些布局设计原理任务2：利用手机、电脑等工具，搜集网页设计，并进行分类，属于版式设计的哪种类型。任务3：分析格式塔原理的几点重要原则在网页中的应用（二）实战项目案例运用讲解的布局基本理论，以及根据交互设计的需求对web端电商平台的产品设计的首页根据自己的理解进行布局设计。教师重点指导：网页布局的基本理论的应用。【实训指导：学生初次接触布局设计的理论知识进行设计实践，教师应多引导，帮助学生根据交互需求完成案例首页的布局设计。】五、课堂总结今天，我们主要学习了页面布局设计、常见的版式设计类型等相关理论，也结合交互设计案例相关理论做了一些练习，想必同学们通过练习对网页版式设计的种类、常用的布局理论有了一定的了解和掌握。希望同学们课后继续对你所接触到的相关作品或产品，用专业的眼光，分析网页的布局理论在交互设计中的应用，这样有助于你们对知识点的更深入的