网页交互设计怎么实现 第1篇
优雅降级指的是，当高级特性和增强内容无法在用户的设备上展现的时候，依然能够给用户提供一个具备基本功能的，可以工作的应用版本。值得注意的是，优雅降级并非一定发生在用户设备的能力不匹配时，还有可能发生在服务器端资源出现瓶颈的时候，比如某些访问量特别大或者系统出现问题的时刻，资源紧张，服务端可以关闭某一些次要功能，降低一些用户体验，用几种核心资源来保证基础功能的正常运行。
关于渐进增强和优雅降级，来举一个 Amazon 网站设计的例子，希望它能帮助你进一步理解。如果使用先进的 Web 浏览器访问 ，会看到完整的功能：
你看，虽然没有了 JavaScript，遵循这种设计理念，在损失一部分用户体验的情况下 ，你可以继续使用网站，并且可以继续购物，其中的核心功能并没有丢失。
此外，还有一种可以拿来类比的设计理念，叫做回归增强，Regressive Enhancement。它要求为系统的特性设定基线，并应用到较老的设备和浏览器中。于是在设计网页特性时，我们可以按照高级设备的能力来进行，但是在实际开发的实施过程中，对于较低级的设备，提供一些其它的替代方法，让它们也模拟支持这些新特性。
比方说，HTML 5 的一些特性在偏老的 IE 浏览器中不支持，那么就可以使用 JavaScript 等替代方案实现出相似的效果。我们提到过的类库 jQuery 就遵循着回归增强的设计理念，在一定程度上屏蔽了不同浏览器的差异性。
举个实际例子，input 标签如果在偏老的浏览器中不支持 placeholder 属性，我们可以利用灰度字体的样式在 input 标签中显示实际内容来模拟这个功能。当用户将输入焦点移到 input 标签中，再将其从 input 中清空，以便用户能输入实际内容。
无论是渐进式增强、优雅降级，还是回归增强，都是为了在一定程度上照顾更多的不同能力的设备和浏览器，给用户带来“尽量好”的体验。但是我们在应用这样的设计理念时，需要把握这个度，毕竟，它不是无代价的，而是会增加前端设计开发的复杂性。
响应式网页设计，即 RWD，Responsive Web Design，也有称之为自适应性网页设计，Adaptive Web Design，是一种网页设计方法，目的是使得同一份网页，在不同的设备上有合适的展现。几乎页面上所有的元素都可以遵循响应式布局，在不同的设备上产生不同的呈现，包括字体和图像等，但是我们讨论得最多的，却是布局。
记得刚参加工作的那几年，我们对于同一个页面在不同设备上的展示，考虑的最多的问题还是终端适配，并且这种适配还是基于协议的。例如，服务端是返回 Web 页面，WAP 页面（WML 语言描述），还是 WAP 页面（XHTML 语言描述）？那时候我们还很难去谈论用户体验有多么“合适”，对于这些低端的移动设备，我们充其量只能关心功能的实现是否能保证。
这部分，我们改变一下学习策略，来动动手，实现下简单的响应式布局页面。假如说我们需要实现一个具有 header、footer 的页面，并且他们需要填满宽度。而中间的主页面部分采用三列布局，左边列定宽，右边列也定宽，中间列宽度自由设置，但是要保证这三列排列起来也填满浏览器的宽度。
在往下阅读之前，你能否先想想，这该如何实现？
现在，我们在任意的工作文件夹下建立一个 responsive 文件，填写如下内容：
你看，这个文件结构是很简单的，但是具备了我们所需要的要素，包括 header、中间三列以及 footer。这个页面将引入 ，因此，我们在同一目录下，建立 ：
简单解读一下这个 CSS 文件。为了演示效果，所有的 DOM 对象都具备 100px 的高度，左边栏向左侧浮动排列，右边栏向右侧浮动排列，中间一列使用 margin 的方式给左右边栏留足位置。在排列这三列时，DOM 的顺序是左边栏 - 右边栏 - 中间栏，原因是，左右边栏是浮动样式，需要给他们排好以后，中间栏位无浮动，自动填满所有剩余空间。
看看效果吧，可以拖动浏览器的边界，调整窗口的宽度，来模拟不同宽度的浏览器窗口下的效果。在较宽的浏览器下，它是这样的：
而在较窄的浏览器下，它是这样的：
注意这里的图片有缩放，但是每个矩形的高度实际上都是 100px。也就是说，中间蓝色的区域可以根据实际的宽度需要进行自适应的横向缩放，但是布局始终保持填满浏览器的宽度，也就是说，绿色的部分，始终是固定不变的。
但是，这样的显示有一个问题，在屏幕宽度较小时，比如手机屏幕，中间的蓝色区域会被挤得看不见。因此，我们希望在浏览器宽度小到一定程度的时候，显示成多行格式，而不进行左中右栏位的划分了，即从上到下包含 5 行：header、left aside、main、right aside 和 footer。
那么，这又该怎么实现？
其实也不难，我们需要先在 HTML 的头部增加：
这个 meta 标签指定了视口（View Port）的宽度为设备宽度，避免了任何手机端自动缩放的可能，同时也关闭了用户手动缩放的功能，这样网页会更像一个原生 app。
接着，需要把现有的 css 中 .left, .right, .middle 三个样式放到屏幕宽度大于 640px 的条件下启用，而在宽度小于 640px 的条件下，我们将启用另外三组样式，这三组是将现有的三列以行的方式来展示：
完工，我们一起看看效果。调整浏览器的右侧边界，逐渐缩小宽度，直到其低于 640px，你将看到如下效果：
今天我们学习了一些网页交互设计的理念，知道了怎样通过渐进式增强来照顾到尽可能多的设备和浏览器，也通过例子实际动手了解了怎样实现网页的响应式布局，希望你有所收获。
现在，来提两个问题吧：
在你的实际工作中，是否有考虑过不同能力的设备和浏览器的兼容适配问题，你又是怎样解决这样的问题呢？
给你这样几个 HTML 标签，你能否说出哪些是有语义的，哪些是无语义的呢？div、section、span、nav、summary、b。
【基础】对于 CSS 不熟悉的程序员朋友，可以通过 MDN 上的 CSS 教程进行系统地学习。
网页交互设计怎么实现 第2篇
将内容场景3D化，通常导航或部分UI控件会屏幕上固定，然后可以采取定向镜头伸缩查看，也可以是环绕中心与自由移动查看内容信息
14种视觉层创意形式
个别产品本身也是创意的一部分，有一些可能界面交互平平，但是却有着魔性或引人关注的产品内容。而这里整理了些比较典型的视觉展现形式和交互创意形式的案例，这些方式通常可以根据产品的定位与特色进行组合设计和开发呈现，让你的网站更富有创意和较好的视觉体验；
1. 几何色块搭配文案
（色块搭配标题文案，简约大气有视觉冲击力，再也不用担心没有图片或插画素材了）
示例地址： #是个技术栈，有多种交互代码资料哦
2. 精美大图背景搭配内容
（采用精美大图背景搭配文案或交互控件，精美的图片本身就很抢眼，再搭配标题大字，瞬间就使得页面有冲击感有层次，常见于游戏官网或活动专题）
示例图源：
3. 关联插画或图标搭配文案
（采用小范围的插画或图标来表达服务或产品优势，搭配文案说明，风格统一精致耐看。常见于服务描述或产品说明模块应用）
示例地址： #国内
4. 留白大图搭配文案
（将某个产品或其他元素放大显示再结合极简的排版说明，有较好的视觉冲击力和产品凸显效果，同时留白保证呼吸感和减少视觉噪点，使得用户能够更加专注产品图）
5. 动态的背景或微动效装饰
（应用动态背景或微动效的元素装饰，有较好的内容吸引力或氛围渲染力，可以展现更多的产品细节或丰富画面层次感，不过也比较考验视频本身或动效装饰自身质量）
示例地址：
#国内
示例地址：
6. 点线面装饰与文案排版
（应用简单点线面元素去装饰界面，再结合有对比有板式的文案排版。页面简洁美观，适合简约干净少图的页面模块）
示例地址：
7. 栅格化应用与板式跳跃率
（应用栅格化与板式跳跃率，使界面整体充满平面艺术，富有节奏感且不显凌乱。在日本的网页设计上有大量应用）
示例地址：
9. 充满个性的视觉装扮
（采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格，来打造符合产品的特殊视觉效果，为网页印象加分，提升品牌感染力）
示例地址： #用怀旧复古的风格呈现历史故事
10. 引用3D视觉装饰
（运用3D视觉搭建页面场景，常见的有3D图标、3D动效或3D产品大图等，有较强画面立体感和表达能力，视觉新颖让人眼前一亮，也是当前的一种视觉趋势效果）
示例地址：_content=se_1008364713 #国内地址
11. 产品元素或其他元素来填充背景
（将品牌元素进行弱化处理后作为背景墙，凸显个性和丰富画面，结合微动效可以有进一步的效果增强）
示例地址： #国内
12. 矩形陈列或卡片陈列
（将内容模块用矩形陈列显示或卡片陈列，Win10菜单或WP系统的手机桌面有较好体现，特点是干净利落模块分明，适合同类模块较多的场景进行排列显示）
示例地址： #矩形分割的模块入口
13. 极致的简约
（采用极简的方式呈现内容核心，可以是一张图一段字、一段文案排版等，总之就这么简单的搞定了）
示例地址：
14. 魔幻或神秘感界面呈现
网页交互设计怎么实现 第3篇
打造个性的模块呈现方式；结合产品的应用场景打造有个性的呈现方式
打造游戏互动的呈现；将有剧情有故事的产品或内容游戏化，可以让用户趣味互动更加深刻
打造一镜到底的转场；结合鼠标滚轮联动做镜头创意，突出产品细节或内容呈现
打造三维或全景场景；根据产品属性考虑用三维的场景来增强互动与突出产品
打造仪式感交互；利用视觉和交互变化来制作符合产品的应用效果，实现仪式感线上体验
有声交互；比较少见，视产品情况应用，可以使声音产生互动或视觉影响
镜头交互；适合有镜头针对性应用的产品采用，需要授权，要做好隐私说明
补充按钮交互触发；在场景更为复杂交互需求更多后，进行的常规解决方法
补充按键与鼠标配合交互；适合按键触发且需要鼠标控制变量的复杂交互
九、结语
更多创意网站案例剪辑参考：
网页交互设计怎么实现 第4篇
表单类型众多，也是最能体现用户体验是否良好的地方。其中包含很多内容，推荐专门介绍表单的书：《Web Form Design: Filling in the Blanks》。
注册信息一般使用表单
网页交互设计怎么实现 第5篇
对于复杂的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。
京东上使用wizard快速引导不熟悉流程的顾客完成付款
.Q&A
Q&A模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&A不同于搜索模式，它通常需要了解用户基础上，通过提问来帮助用户弄清他们缺乏经验的在哪里（比如健康保险，抵押，计划，购买）有哪些可供的选择或建议。
上海移动资费导购系统可以让用户通过回答几个问题，可以建议用户选择哪种话费套餐
.平行面板
平行面板屏幕模式可以收起（一次只显示一个），也可以展开（同时显示全部）。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。
.交互模型
网页交互设计怎么实现 第6篇
还有两种广泛使用但在企业软件很少使用的模式。
- 门户：如果你是市场调研专家，商业需求分析师和用户反馈调研员设计门户，可以参考控制面板的设计规范和案例。
- Tabs：其实Tab是一种部件，不是一种模式。它为在多种同语境下的数据提供多选一选择。如果数据结构导致你的设计tab显得很多。有两个小建议：第一，重新考虑架构。通过使用卡片分类或请教一名专业的信息架构师；第二，可以参考平行面板的规范和案例。
参考文献：《Designing interfaces》and 《Designing web interfaces》
网页交互设计怎么实现 第7篇
控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大
3. 交互创意如何下手
结合信息框架对不同元素类型进行视觉设计调整后，再对页面内容的基本交互进行考虑，例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。
网页交互设计怎么实现 第8篇
一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图形和操作，清晰的入口和浏览。理论上讲，在一个屏幕下展示复杂的数据本身就很难。
之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘
网页交互设计怎么实现 第9篇
主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下，引导他们在类目下高效地切换，这无疑是一种理想的方式。如果主体信息对于用户来说更重要，最好选择横向布局。或是主体部分不仅条目多而且包含信息也多，那也该选择这种横向布局。
举例来说：
Windows窗口属于纵向排布
Mac mail的横向排布
网页交互设计怎么实现 第10篇
鼠标经过反馈；常见且重要的交互方式，通过鼠标经过时反馈选中状态或提示相关信息
按钮长按效果；长按状态的动效示意，通过对长按目标加一动画响应进度或持续的状态，而非单纯的变色或样式切换
内容入出场动效；页面切换加载或滑动页面后，内容采取动效有序的进入场景定格，而非生硬的静态切换
多内容轮播应用；对Banner或其他多个内容展现，进行轮播交互完善和时间细节控制
网页交互设计怎么实现 第11篇
空白状态指在任何数据输入或进入系统前，应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括：视频，快速教程，帮助提示，安装后的截图。
Wufoo是一个在线表单设计网站，初始后会引导用户建立表单
网页交互设计怎么实现 第12篇
三、下拉菜单
（1）概念：下拉菜单，是计算机网页中的一种展示效果。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选单。
（3）具体实现方法：
HTML部分：
创建列表标签，为ul>li>a，如图所示。
（图）
CSS部分：
大的ul列表需要进行平铺，在同一行展示。里面的ul列表不需要平铺，但都要把li自带的小黑点去掉（list-style:none）。设置菜单字体、颜色、高宽，注意文字要居中对齐。设置好样式如图所示。
（图）
JS部分：
这个部分需实现鼠标经过时下拉菜单 、鼠标离开时收回菜单的功能。直接用onmouseover、onmouseout比较生硬，使用jQuery的slideDown()函数可实现动态的缓慢下拉、收回菜单的效果，可用slideDown(1000)，让下拉动画1秒完成。如图所示。
（图）
四、留言板
（1）概念：是可以用来记录、展示文字信息的载体，有比较强的时效性。网络留言板一般更集中反应更大范围的用户群体的信息。
（2）思路：利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。
（3）具体实现方法：
HTML部分：
需要一个
CSS部分：
这部分主要是对留言板的样式进行一些设置。设置留言板居中对齐，设置输入框的属性，设置宽高、边框颜色、轮廓样式以及评论的宽度、内边距、背景色、字体大小、外边距，同时设置删除的样式。如图所示。
（图）
JS部分：
网页交互设计怎么实现 第13篇
1、明确改版目的，挖掘价值点。
2、构建原型框架，评审优化。
设计新版架构，确认范围层细节(功能型：功能规格支持。信息型：内容需求)，完善流程与信息框架，然后拉拢项目相关人员进行评审优化，直到新版框架大体定型后，再进行视觉层输出。
3、明确产品定位，建立设计语言。
要保障产品气质与视觉风格的契合，即一个资讯网站肯定不适合采用电商视觉进行输出。然后根据内容占比，考虑呈现的布局方式，即不同模块中的视频、图片、文字比例情况。然后你可以结合上文的视觉层创意形式进行套用，当主要的静态视觉设计完成后即可进入评审阶段。
4、高保真评审，挖掘交互创新点
对网页高保真进行评审，确认页面信息框架或界面设计可行。然后对交互创新方案探讨，结合网页的板式设计，提出交互创新的细节，与开发者同步，确保实现的可行性与项目工时可控，同时披露交互细节帮助开发者进行调研或准备。
5、交互创新对齐开发，进入研发阶段。
准备提供交互的细节Demo或参考内容，在基础内容开发完成后或开发者认为适合介入的时机，进行交互创新内容的对齐，使创新方案在最小可行的基础上进行开发实现。之后建议设计同学耐心的陪同开发小哥进行还原，确保效果。
6、测试验收，预发上线。
最后进行成果验收，确保基本的内容是否符合标准，再根据工时情况或上线计划等，考虑交互创新部分的细节还原调试，适公司实际情况可以考虑再迭代一版。之后根据产品情况自行考虑是否A/B测试、灰度上线等，上线后就是线上数据跟进或用户调研了，希望你的新版本收获一片叫好 哈哈。