12网页交互元素的合理归类与模块排序.pptx

网页交互元素的合理归类与模块排序 01 02 网页组成元素及归类 Web交互设计界面的构成基础与模块排序布局 01 网页组成元素及归类 ⑴基础图文 图片+文字 后续发展有了多媒体，不再依赖于Flash来传递音视频这些内容，网页也丰富了很多。 ⑵多媒体：音视频 01 按基础分类 02 按框架分类 包含页头，导航，主要内容区域，页脚和备案信息； 一般情况下，导航和logo这些是在一块的，整体组成了页头。 大多数整体可以分为三块，页头、主体内容区和页脚。 并不是所有备案信息和页脚是通用的，尤其是现在的自助建站，它会单独留一个区域，会生成在最下面，是不能编辑的。 02 按框架分类 web交互设计界面的构成基础 与模块排序布局 02 1 控件 控件是界面上最小的有效单元； 如图中的“搜索框”、“单选按钮”、“复选框”、“下拉框”。 控件有各自的一套交互流程，比如登录页面；了解控件的交互流程，可以帮助我们更立体地了解一个控件。 大多控件都会有自己的一些属性，即：可设置的参数。 比如“列表”属性有：排序规则、加载规则、刷新规则、适配规则、截断规则等。 1.3 控件了解控件的使用 当了解关于控件的内容后，还需要知道什么时候该用什么控件。 2.布局 布局就是把“控件”和“内容”放到界面上合适的位置并赋予合适的视觉重量。 2.1了解布局的基本理论 基本理论有以下几种：格式塔原理、网格系统、7±2法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂度守恒定律。 格式塔原理 网格系统 7±2法则 席克定律 费茨定律 奥卡姆 剃刀原理 复杂度 守恒定律 01 将界面中所需要的元素列举出来，比如：商品图片、商品标题、价格、优惠券、收藏、分享…… 02 将上述列举的元素归为几类，每一类就是一个模块。比如“收藏、购买、加入购物车”可以归为“操作模块” 03 排序 将上面归类好的模块进行排序，排序的依据一般是：用户场景中的浏览顺序、元素的重要性、业务期望 04 调整 布局排布的影响因素很多，最后需要综合其他因素对布局进行调整。并对各元素的视觉重量进行定义调整 2.2布局设计的基本步骤 列举 归类 流程设计的基本步骤是： 确定“任务”； 将“任务”拆成“动作”； 将“动作”对应成界面。 3 流程设计的步骤