第二章Web端“家居”交互UI设计.pptxVIP

Web端“家居”交互UI设计交互UI设计

知识要点“家居”网页交互UI项目背景分析交互UI布局设计交互UI基础元素设定交互UI设计类型分析项目实施-Web端“家居”网页交互UI设计

“家居”网页交互UI项目背景分析重点掌握第一部分

页面布局设计的基本理论随着中国互联网的发展，人们的生活方式发生了巨大的改变，一些行业正在面临着被颠覆的危机。比如传统的家装行业，“游击队”式的小装修队曾经是装修市场的主力军，而今一站式家装网站的概念已经出现。一个功能完善的，操作简单的一站式家装网站是非常有市场的，它可以让客户更快的完成从商务咨询到装饰风格的选定，省去装修过程中的烦琐的步骤。本项目以网页端为开发环境，项目主要的的前台功能包括：装修知识查询、产品中心、预约装修、售后通道等。可以让有装修需求的用户通过浏览网页获取装修信息，通过网页了解装修流程以及从设计、选材到验收、配饰等方面通过互联网进行高效的沟通。

交互UI布局设计重点掌握第二部分

页面布局设计的基本理论格式塔原理格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。其中最基础的发现是人类视觉是整体的；“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。

页面布局设计的基本理论网格系统网格系统（gridsystems），也叫“栅格系统”。网页系统是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。基础概念网格（Gird）：栅格系统的最小原子单位列、水槽（Column、Gutter）栅格总宽（Container）边距（Margin）盒子/区域

页面布局设计的基本理论网格：栅格系统的最小原子单位栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位。

页面布局设计的基本理论列、水槽（Column、Gutter）列（Column）：列是栅格的数量单位，通常设定栅格数量说的就是列的数量槽（Gutter）：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散；槽通常设为定值。

页面布局设计的基本理论栅格宽度（Container）页面栅格系统的总宽度。边距（Margin）栅格外边距，与屏宽保持一定的安全距离。

页面布局设计的基本理论盒子/区域建立好基础栅格之后，一块内容通常会占用几个栏和列的宽度，我们把这个区域理解为内容盒子，用于承载一个区域的内容。

页面布局设计的基本理论如何搭建栅格系统1、确定屏幕尺寸，确定安全范围2、确定关键数据：列的数量、水槽的宽度

页面布局设计的基本理论如何搭建栅格系统假设内容区宽度为W（Weight），列宽为C（Column），列数为n，槽为定宽G，可以得出：W=C*n。由于槽不可以放置内容，可见内容区为：W=C*n-G。举例：我们为一个屏宽1440的项目划分栅格，首先确定内容区宽度为1440，24列，槽为定值16；那么可以得出列宽60，栏为48。内容区从水槽开始到水槽结束

页面布局设计的基本理论网格系统的应用1、横向划分

页面布局设计的基本理论网格系统的应用2、纵向划分

页面布局设计的基本理论费茨定律（Fitts’Law）费茨定律是由保罗·费茨（PaulM.Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后1954年提出的；该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。

…………费茨定律（Fitts’Law）在设计中的应用1、按钮等可点击区域在合理的范围之内越大越容易点击。页面布局设计的基本理论

…………费茨定律（Fitts’Law）在设计中的应用2、不管我们操作移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。页面布局设计的基本理论

…………费茨定律（Fitts’Law）在设计中的应用3、出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快。页面布局设计的基本理论

页面布局设计的基本理论希克定律（Hick’sLaw）希克定律指的是：一个人面临的选择越多，所需要作出决定的时间就越长。

希克定律（HicksLaw）在设计中的应用设计中给用户尽量少的选择，减轻用户的决策成本。页面布局设计的基本理论

页面布局设计的基本理论7±2法则1956年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了5-9项信息后人类的头脑就开始出错。

7±2法则在设计中的应用1、PC端导航或选项卡尽量不要超过9个，应用的选项卡不会超过5个。页