网页设计【交互篇】-3.ppt

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