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

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）希克定律指的是：一个人面临的选择越多，所需要作出决定的时间就越长。

希克定律（Hick'sLaw）在设计中的应用设计中给用户尽量少的选择，减轻用户的决策成本。页面布局设计的基本理论页面布局设计的基本理论7±2法则1956年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了5-9项信息后人类的头脑就开始出错。7±2法则在设计中的应用1、PC端导航或选项卡尽量不要超过9个，应用的选项卡不会超过5个。页面布局设计的基本理论7±2法则在设计中的应用2、如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段，并注意其深广度的平衡。页面布局设计的基本理论7±2法则在设计中的应用3、把大块整段的信息分割成各个小段，并显著标记每个信息段和子段，以便清晰的确认各自的内容。页面布局设计的基本理论页面布局设计的基本理论Tesler’sLaw泰思勒定律（复杂性守恒定律）由LarryTesler于1984年提出，也称泰斯勒定律（Tesler’sLaw）。该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，只能将固有的复杂性从一个地方移动到另外一个地方。页面布局设计的基本理论复杂度守恒定律对于设计的价值每个应用程序都具有其内在的、无法简化的复杂度，只能设法调整、平衡。这一观点主要被应用在交互设计领域。页面布局设计的基本理论奥卡姆剃刀原理（Occam’sRazor）奥卡姆剃刀定律又称「奥康的剃刀」，它是由14世纪逻辑学家奥卡姆威廉提出。这个原理称为「如无必要，勿增实体」，即「简单有效原理」。奥卡姆剃刀原理在设计中的应用方法1、只放置必要的东西页面布局设计的基本理论奥卡姆剃刀原理在设计中的应用方法2、减少点击次数页面布局设计的基本理论奥卡姆剃刀原理在设计中的应用方法3、减少段落个数页面布局设计的基本理论奥卡姆剃刀原理在设计中的应用方法4、“外婆”规则页面布局设计的基本理论奥卡姆剃刀原理在设计中的应用方法5、给予更少的选项页面布局设计的基本理论版式设计常见类型与分析重点掌握版式设计

版式设计是指设计人员根据设计主题和视觉需求，在预先设定好的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片（图形）及色彩等视觉传达信息要素进行有组织、有目的的组合排列的设计行为与过程。实际上，它不仅是一种技能，更实现了技术与艺术的统一。版式设计的范围，涉及到刊物、画册、和网页页面等平面设计各个领域。Web界面常见的版式设计类型常见的web界面版式设计类型国字型布局匡字型布局三字型布局川字型布局海报型布局标题文本型布局综合型布局Web界面常见的版式设计类型国字型布局常见的web界面版式设计类型匡字型布局三字型布局川字型布局海报型布局标题文本型布局综合型布局Web界面常见的版式设计类型国字型布局常见的web界面版式设计类型匡字型布局三字型布局川字型布局海报型布局标题文本型布局综合型布局Web界面常见的版式设计类型国字型布局常见的web界面版式设计类型匡字型布局三字型布局川字型布局海报型布局标题文本型布局综合型布局Web界面常见的版式设计类型国字型布局常见的web界面版式设计类型匡字型布局三字型布局川字型布局海报型布局标题文本型布局综合型布局Web界面常见的版式设计类型国字型布局常见的web界面版式设计类型匡字型布局三字型布局川字型布局海报型布局标题文本型布局综合型布局Web界面常见的版式设计类型国字型布局常见的web界面版式设计类型匡字型布局三字型布局川字型布局海报型布局标题文本型布局综合型布局交互UI基础元素设定难度：一般了解第三部分设计规范1、网页尺寸1920px安全尺寸1200px*800px

界面尺寸设计规范2、安全尺寸在设计和实现PC端网页时，我们通常选用1200px宽度作为安全区域的设计标准。

界面尺寸设计规范2、文字选择正文宋体居多、思源；英文：Arial；Tacoma；Veranda；消除锯齿的方式为：WindowsLCD行间距尽量保持在1.5-2倍的距离字体颜色不要纯黑（#000000）文字设计文字颜色#333333#666666#999999#cccccc标题文字正文文字次要文字提示性文字（用于组件或提示框文字）字号16-1812-14,14居多12，英文10行间距16号文字，行间距24-3214号文字，行间距21-2812号文字，行间距18-24设计规范3、统一性配色尽量保持色相一致要有主色调除图片外，尽量不要超过3种颜色色彩搭配交互UI设计类型分析难度：一般了解第四部分1.综合资讯类网页设计的分类2.企业品牌类3.交易类设计分类4.社区类Ps-网页设计分类和设计规范5.办公及政府机构类6.互动游戏类设计分类7.有偿资讯类Ps-网页设计分类和设计规范8.功能类9.综合类设计分类网页交互UI组件的分类难度：一般了解第五部分

组件使用详解Web端设计组件根据用途，可以分为六大类反馈feedback

：Toast提示、Alert警告提示、dialog对话框、Notification通知提醒框、tooltip气泡提示表单form：输入框input、选择器（框）Select、日期选择器DatePicker、时间选择器TimePicker、级联选择器（组件）Cascader、计数器/数字输入框InputNumber、单选框（组件）Radio、复选框Checkbox、开关Switch、树选择TreeSelect基础basic：按钮Button、布局Layout数据data:标记/徽标数Badge、上传Upload、进度条Progress、加载Loading导航navigation

:导航菜单NavMenu、面包屑Breadcrumb、标签页Tabs、分页Pagination、步骤条Steps、下拉菜单Dropdown其他other：表格Table、列表list、卡片Card组件使用详解-反馈Toast提示反馈类feedback：反馈就是用户做了某项操作之后，系统给用户的一个响应。用户产生操作，出现toast提示；toast的消息提示分类一共有三种类型：成功、失类、常规。组件样式有两种：可点击操作使其消失、不可点击操作使其消失。组件使用详解-反馈tooltip气泡提示使用场景：鼠标移入则立即显示提示，移出则立即消失；展示鼠标hover（悬停）时的提示信息。组件使用详解-表单input输入框表单form表单在网页中主要负责数据采集功能用于用户文本输入使用场景：用户需要通过鼠标键盘输入内容；输入的文本通常置于输入框输入框组件存在的状态有：初始、激活、报错、完成和禁用。组件使用详解-表单Cascader级联选择使用场景：1、需要从一组相关联的数据集合进行选择2、从一组数据集合中进行选择时，用多级分类进行分隔，方便选择。3、比起Select组件，可以在同一个浮层中完成选择，有较好的体验。组件使用详解-表单单选框

Radio使用场景：用于在多个备选项中选中单个状态。和Select选择器

的区别是，单选框

所有选项默认可见，方便用户在比较中选择，但选项不宜过多。组件使用详解-表单复选框

Checkbox使用场景：在一组可选项中进行多项选择时；组件使用详解-基础Button按钮基础basic使用场景：标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。在设计中，基本有五种按钮类型：主要按钮、默认按钮、线性按钮、文本按钮、链接按钮四种状态属性危险、幽灵、禁用、加载中…………组件使用详解-基础

布局

Layout

使用场景：顶部-侧边布局-通栏布局，多用于应用型的网站侧边栏布局，采用侧边栏的页面，多用于展示类网站组件使用详解-数据标记/徽标数

Badge数据data使用场景：一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。组件使用详解-数据上传

Upload通过点击或者拖拽上传文件使用场景：当需要上传一个或一些文件时；当需要展现上传的进度时；当需要使用拖拽交互时；组件使用详解-数据进度条

Progress

使用场景：在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；当需要显示一个操作完成的百分比时。组件使用详解-数据加载

Loading使用场景：加载数据时显示动效组件使用详解-导航导航菜单NavMenu

导航navigation使用场景：一般分为顶部导航和侧边导航；顶部导航提供全局性的菜单分类和功能，方便浏览信息；顶部宽度限制了导航的数量和文本长度。侧边导航提供多级结构来收纳和排列网站架构，可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；

…………组件使用详解-导航面包屑

Breadcrumb

使用场景：1、当系统拥有超过两级以上的层级结构时；2、当需要告知用户“你在哪里”时；3、当需要向上导航的功能时。组件使用详解-导航下拉菜单

Dropdown使用场景：当页面上的操作命令过多时，点击或移入触点，会出现一个下拉菜单；可在列表中进行选择，并执行相应的命令。组件使用详解-其他表格

Table

其他other使用场景：展示多条结构类似的数据；当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页等复杂行为时。

…………组件使用详解-其他列表

list

使用场景：最基础的列表展示，可承载文字、列表、图片、段落；常用于后台数据展示页面

组件使用详解-其他卡片

Card

使用场景：最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。项目实施-Web端“家居”网页交互UI设计难度：一般了解第六部分

…………设计“家居”网页首页确定页面风格

网站的首页，可以统览网站的主要内容，并提供通往各个页面的链接，下面我们以“家居”网页首页为例对页面进行设计分析。1.确定页面风格网页设计越来越趋向简约自然的设计风格，去除繁杂装饰，如今已经成为一股潮流，简约的网页设计风格，主要围绕两个点：一个是视觉上看起来简单自然，另一个是体现功能的优化。本着统一性配色的设计规范，在配色上采用了橙、灰、白为主色调，为了更简单明了的突出主体，提供更舒适的感官感受，我们对“家居”网页首页采用全屏网页设计，利用精心挑选设计的背景加上合理的页面布局，增强视觉冲击力，来吸引浏览者的注意。通常页面内的文字内容不会特别多，少量文字加上以图片展示为主的合理排版将会变得更加吸引人，如图所示。

…………设计“家居”网页首页确定网页设计类型

作为一款Web端“家居”网页，我们将其定位为企业品牌类网页，以展示为主，体现企业品牌理念，对创意、美工、内容的组织策划等的要求较高；利用多媒体交互技术、视频、动态网页等技术，达到品牌营销传播的目的。

版式上，我们采用综合型布局，涵盖几种版式设计类型的综合运用，布局比较灵活。首先将网页整体横向分割为三部分，类似三字型版式，可以让浏览者快速找到目标，如图所示。在Banner处，我们设计为满屏展示，类似海报型版式设计，很多企业官网都会采用这种布局类型，简单大气的感觉，同时首屏也可以播放视频。设计版式类型

…………设计“家居”网页首页设计规范

网页尺寸上，根据百度流量研究院的统计，我们采用主流的显示分辨率1920px×1080px的尺寸进行界面设计，便于适配及通用。文字参考网页文字规范，采用16px-20px，突出标题内容，14px作为正文，12px作为非突出性的文字或用户注释等内容；字体颜色采用易读性的深灰色，色号在#333333到#666666之间的颜色；字体行间距采用字体大小的1.5-2倍为参考

…………设计“家居”网页首页布局设计（1）进行首页布局设计时，我们要知道首页设计包括的内容区域有：页头部分：客户的logo和标语；主要告诉用户这是什么网站，它是做什么的。品牌理念(Tagline)：最有价值的位置之一是靠近logo的地方，当我们看到一个和客户企业logo相关联的短语时，就知道这是口号，然后我们会把它当作整个网站的描述。口号是一条精炼的语句，刻画了整个企业。主页：是要给网站提供服务的概貌：既要包括内容，也就是能在这里找到什么；也要包括功能，即“我能做什么”。搜索：大多数网站需要在主页上设置一个显示突出的搜索框。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的作用。主体：内容区域，是展示部分的主体，以展示为主.页脚部分：这部分包含一些版权信息、友情链接，联系方式、备案信息等；通常页头和页脚是整个站点通用的部分.

…………设计“家居”网页首页布局设计（2）搭建格栅系统首先，确定屏幕尺寸，确定安全范围。当我开始着手设计页面时，首先应考虑在多大的尺寸范围内做设计，也就是确定格栅区域的宽度范围，我们采用主流分辨率确定界面的宽度为1920px，以布局“全屏”为例进行设计，格栅区域的宽度=响应式区域-页边距×2，由于我们采用全屏设计，所以，格栅的区域宽度=响应式区域其次，确定关键数据，也就是列的数量和水槽的宽度。常见的栅格系统通常被划分为12栅格或24栅格。划分的格子越多，承载的内容越精细，但也容易显得琐碎。在一些商业网站、门户网站通常划分成12栅格，我们以12格栅为例进行页面设计，根据内容区宽度为W（Weight），列宽为C（Column），列数为n，槽为定宽G，可以得出：W=C*n的计算公式，由于槽不可以放置内容，可见内容区为：W=C*n-G，以屏宽1920px的项目划分栅格，满屏设计内容区域宽度为1920px，格栅12列，槽为定值24px，那么可以得出列宽为160px、栏为136px，

根据场景将格栅区域划分成3等分，内容区域从水槽开始到水槽结束1920宽/12列=160；160列宽-24槽=136，根据场景将格栅区域划分成3等分，内容区域从水槽开始到水槽结束这样，一个基本的网页格栅系统就搭建完成了。

…………设计“家居”网页首页布局设计（3）布局设计-相似性原则布局设计依据格式塔原理的相似性原则，即内容相似的物体看起来归为一组，使不具有相似特征的元素更像一个整体，如图。（4）布局设计-对称性原则无论距离远近，对称元素都会被认为属于一体，给我们一种坚固和有序的感觉。我们的眼睛寻求这些属性以及秩序和稳定，因此对称对快速有效地传递信息非常有用。对称感觉很舒服，帮助我们专注于重要的事情，对称原则通常用于“产品展示，列表，导航，Banner和任何内容丰富的页面”，如图。以上，应用我们所讲的设计规范、布局设计理论，以及格栅系统的搭建，就完成了Web端“家居”首页页面的设计工作。…………设计“家居”网页交互UI导航菜单组件导航菜单组件，通常导航位于页面顶部或者侧边区域的，在轮播图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用；以及包含用户登录、注册、个人中心等信息。我们先新建一个图层组，命名为导航或简写nav，我们先确定首个文字在页面中的位置，，字号按照网页文字设计规范，正文或一级标题字号为14-16，颜色不要用纯黑，颜色亮度40%，然后等间距复制后面的导航菜单文字，如图接下来我们制作搜索栏，同样在参考图中用选区