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