网页设计“交互篇”3.ppt

标题: 字体: 微软雅黑粗体 字号: 32-36pt 颜色: 主题蓝色 副标题: 字体: 微软雅黑 字号: 24pt 颜色: 主题灰色 网页设计：从界面布局到视觉表现 基础篇 界面交互篇 视觉表现篇 综合案例篇 界面交互篇 用户体验研究 信息架构设计 界面与布局 5.界面与布局 5.1 界面的的布局原理 5.2 界面布局类型 5.3 原型的构建 5.4 案例——食品公司网站的 界面改版设计 5.1.1 对称与均衡 5.1 界面的的布局原理 对称与均衡是自然界中一切生物求得生存的稳定形式。 对称: 稳定、庄严、整齐、 秩序、安宁、沉静， 单调、呆板 均衡: 没有对称的结构， 有对称式的重心 变化中的稳定 如to do list官网，界面通过对比、留白和布局来打造令人难忘的均衡感。其设计每个功能特点都有一张配图与一段文字，其中图片所占比例大而文字较小且四处留白，这种差异会让文字立刻吸引用户的注意力。 5.1.2重点与主次 根据视觉流程原理，采用容易扫视的方法安排整体版面，把重点内容和功能放在醒目位置，会让网页更易阅读。 可用性的关键要素放在页面顶部或中上部 首页尽量不要超过三屏 如huys-nyc网站信息量较大，其网站的固定导航是信息的分类导航，一直隐藏在左侧的图标中，不占用主屏的信息展示区域，但是无论去网站的任意页面，都能随时找到该导航菜单。 5.1.3统一与变化 变化与统一也称对比与统一，是形式美的总法则。 变化 强调某种因素的差异性而造成的视觉上的跳跃 统一 强调物质和形式中种种因素间的一致性 著名Mac平台设计软件Sketch的官网的设计就是个很好的例子，设计元素单纯，色调统一，深色和浅色被容纳到一个统一的页面设计中来。在首页中，你会注意到两个按钮：深色的“免费试用”和浅色的“立刻购买”，两个按钮大小相当，并且处于同一个水平面上，但是，“免费购买”的按钮被设计成为深灰色按钮，整体和深色背景几乎融为一体。 5.2.1 固定布局 5.2 界面布局类型 固定网页布局指网站内容被一个固定宽度的容器包裹，容器内的区块以像素作为页面的基本单位，只需设计一套尺寸，也只展现一种布局。 旺旺集团二级页面，左图为台式电脑显示，右图为手机显示 1093px 5.2.2 流动布局 流动网页布局其实现方法则是大多数组件（包括主容器）都以百分比作为页面的基本单位，可以根据用户的屏幕分辨率自适应，并能完美利用有效空间展现最佳效果。 不足：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样 5.2.3 响应式布局 响应式网页布局是分别为不同的屏幕分辨率的终端定义布局。 其布局原理是屏幕或浏览器的宽度，选择最合适的那套宽度布局。同时，在每个布局中，应用流式布局的理念，让页面元素宽度随着窗口调整而自动适配。 网站中选择成为响应式断点的设计模式主要有基于设备和内容优先两种 第一种基于设备是通过主流设备的类型及尺寸来确定布局断点，设计多套样式，再分别投射到响应的设备。 A B C 第二种基于内容优先是根据内容的可读性、易读性作为确定断点的标准，设计从小到大A、B、C、D四种版式 5.3.1 确定页面的尺寸 5.3 原型的构建 浏览网页的平台主要分有桌面端和移动端，其中桌面端设备包括台式电脑、笔记本，而移动端设备包括智能手机、平板电脑等。 两种设备主要特征对比如下 桌面平台 移动平台 设备物理尺寸 大 小 设备输入/输出 键盘、鼠标、触控区、摄像头（只能拍用户），定位（只能粗略标识位置） 语音系统、触屏、按键、重力感应、光环境感应、摄像头（可拍到任何景物）、定位（能精确识别位置和方向） 信息输入/显示/存储 输入/显示/保存大量信息 输入/显示/保存少量信息 传输速度 能适当加快数据传输速度 很难加快数据传输速度 辅助硬件 无线连接、有线连接、蓝牙 无线连接、蓝牙 使用方式 适合坐下来使用 随时随地使用 两种设备主要特征对比有何不同呢？ 操作方式 使用场景 网络环境 5.3.2 页面设计的优先级 项目从小屏幕入手过渡到大屏幕（移动端优先），还是从大屏幕入手过渡到小屏幕（桌面端优先）区别不大。 移动端优先的设计应该成为常态。 5.3.3 线框图设计 线框图是低保真的设计图，它是设计图的骨干与核心，承载着最终产品所有重要的部分，同时它也是原型设计的前身。 有的设计师喜欢提高线框图的保真度以及页面间的快速展示，让各静态的线框图呈现出可以点击交互的状态，这种叫做交互式线框图。 5.3.4 原型设计 网站