经过一些项目经验，结合几个方法论，我整理出了一个评估交互方案完整性的方法，也可以作为前期考虑方案的分析方式。下面就来介绍一下，希望能给大家帮助和启发。

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 7 条实用的建议，一起来看看吧！

B端设计基础指南：网格系统

背景

“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。

C. 内容的附属信息

用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。

在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子：“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点，而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：

1）时间段加上定语会变成时间点（但同样是时间点，“下午 6:00”是绝对时间，而“1.5 小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；

2）两个时间点之间则表示时间段。

所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。

时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是 12 日 15:15:20），对用户的激励作用越明显（如距抢购结束仅剩 00 时 01 分 23.6 秒）。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。

在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。

时间颗粒度的选择依情况而定，一般场景总结如下：

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于 push 通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。

在使用相对时间时，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。

总结

在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。

文章来源：优设 (VMIC UED)

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

复杂应用大多情况下是偏专业和B端的一些UI界面，它们大多出现在桌面端使用环境，并且终端用户类型多样，涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章，来自UX设计领域的顶级存在NNGroup，作者为凯特·卡普兰。

到底什么是复杂应用？

我们之前将「复杂应用」界定为特定专业领域当中，需要经过广泛培训之后使用的，有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象，不过这么说你可能会 更容易理解：从科学研究到专业人员，诸如金融分析师，它们常用的那些专业软件应用。这类应用通常有着这些特点：

• 为有专业知识和训练有素的用户提供支持
• 帮助用户浏览、管理大型数据库，并提供高级的数据分析和处理的功能
• 通过可变和多样的基础任务功能来解决问题或者达成目标
• 需要在多个角色、工具、平台之间进行协作或者切换
• 可以用来减轻高影响力/高价值任务的风险，降低损失

尽管不同的复杂应用之间差异很大，但是他们的共同点是，专业的从业人员对于这类工具有着极强的依赖性。

考虑到设计师和开发者在面对这类工具的时候的挑战，我梳理总结了 8 个复杂应用的设计原则和指南。

1、采用边做边学的用户流程

很多研究表明，对于复杂的应用和工具，用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。

与大量的教程、文档、帮助和设置说明相比，能够立刻开始的任务和项目，对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。

虽然在专业领域当中，倚靠摸索和试错学习是不恰当也不安全的，但是一定程度的边做边学是必须的，因为不可能在培训和手册当中涵盖所有的使用场景。

所以，在设计的时候应该提供「跳过教程」的直接上手的偏好设置，同时进行相应的安全性设置，避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作，让控制面板实时显示操作结果或者预览结果，这样用户无需执行全部操作就可以知道大概的结果。

在 Salesforce 控制面板当中，就可以实时预览面板编辑的效果。

2、为用户提供有效的方法和建议

绝大多数用户都不是进阶的专家级用户，他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后，通常不会主动做出改变，而这在日积月累之后导致大量的时间浪费，效率低下。

值得一提的是，这个时候依赖冗长的文档和教程其实很难达成效果，更合理的方式是结合用户所处的上下文环境，通过界面工具提示的方式，适时地告知用户「有更高效方便的方法」。

通常，可以使用悬停提示，或者是弹出式工具提示来实现这一功能。

ArcMap 是一款地理信息系统类工具，它通常会通过上下文环境下的信息引导，来帮助用户了解技巧。

3、提供灵活而流畅的功能路径

复杂的应用程序，通常会有很多功能是分散的而非线性的，不同的功能组合起来可以实现特定的功能。在这类工具当中，用户日常可能也不是很确切知道最终的目标是什么，而需要通过数据分析来逐步推进，同时，在知道确切目标的情况下，也应该可以遵循不同的路径灵活地达成目标。

设计师这些应用的时候，设计师应该避免使用固定、唯一、 僵化的实现路径，迫使用户必循严格按照某一固定路径来做事情。一方面，允许用户跳过某个步骤，或者回滚到更早的路径，另一方面，允许用户遵循不同的方式和路径来达成目标。

比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。

4、 帮助用户跟踪行为和思考过程

复杂的任务，通常意味着它需要很多步骤，不同的环节，而在实际的应用场景中，某个分析步骤耗费几个小时甚至几天，都是有可能的。在高度复杂的现实生活中，某个步骤可能会换人接手，可能会因为硬件、 网络等问题而暂停甚至丢失，这也意味着「可追溯性」是很重要的。

所以，在这样的复杂应用当中，应该允许用户在使用过程中，可以便捷清晰地记录、保存、 导出内容和记录，允许用户中断，中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。

在决策建模软件TreeAge 当中，用户可以在分析和建模过程中进行开放式的注释，可以后续在底部快速访问这些笔记。

5、可以协调多工具并且在工作空间之间转换

复杂的应用通常还会面临一个状况，就是工具本身的不足，用户需要在多个工作空间上使用工具和内容的时候，它需要具备切换的功能。对于不具备的功能，应用程序应该允许使用第三方的应用来作为补充。

比如当软件不支持某个操作的时候，应该允许用户从线上的其他数据库中获取并导出数据来使用，可以依托外部文档作为支持，允许用户在应用中做注释和评论。

减轻工作负担的一个要点，是尽量使用通用的API、接口和标准，尽量兼容行业标准软件，比如 Excel、Powerpoint ，尽量使用标准格式，等等。

微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能，非常方便

6、减少混乱而不影响功能

复杂应用通常旨在保持泛用性。使用场景多样，多种不同的功能，一家汽车生产厂家，可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是，这种泛用性的另外一面，就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户，而后者用到的功能很小概率会被基础用户用到。

所以，设计者需要在不降低功能性的情况下，基于应用场景、 用户需求来进行简化和优化，在保持功能完整易用的前提之下，降低复杂度和混乱度。

分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后，再呈现特定功能，是有效的设计方法。

7、主次信息之间要能平稳过渡

即使降低了混乱度，在复杂应用当中，信息量可能依然是过载的。通常，对于这种情况可以通过区分信息层级的主次来进行快速的区分，不过，从交互上来说，这可能依然不够。

对于诸如控制面板一样的界面，用户可能需要时刻查看面板上的信息，需要了解次级信息但是又不能离开界面，这就体现出主次信息之间的过渡呈现的重要性了。

一般而言，使用类似与悬停显示的方式，能够比较柔和地将次级信息呈现出来，允许用户查看详细的定量数据。下面这个案例当中就是，悬停显示更多次级信息。

8、在视觉上突出关键信息

复杂应用通常在界面上包含由大量的信息，而这个时候关键性的数据如果不在视觉上做突出显示，会被用户错过。通过视觉区分、提示警报的方式，让用户及时注意到，才有可能规避可能存在的问题。

值得注意的是，让关键信息和元素凸显的方式，并不一定非得是使用鲜艳的色彩和较粗的字体，简单的放大呈现，使用图形化的元素辅助提示，或者是提供足够的留白都可以达到目的，就像下面的案例一样：

结论

复杂的应用多种多样，支持的服务和功能也千差万别，但是无论如何呈现，此类复杂应用的设计都是非常挑战设计师的设计功底的，需要设计师了解业务，了解用户，并且能够通过设计更好地提供服务。

文章来源：优设(陈子木)   作者：Kate Kaplan

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

放眼过去大量同质化或跟风的网站风格，空有一副美观的皮囊，却少了些什么，为何不交互创新一下呢？具有创意的交互必然能使一副黑白的画面瞬间点亮色彩。

你可能想有创意的交互能为网页带来什么？

挺多的，我举例：一个连微动效都没有的静态网页你进去后也就看见的这样，那么如果这个网页进去时，内容会有入场动效，你是不是马上能感觉到这个网站有点儿东西，要抄起鼠标探索一番？换言之，好的交互创意甚至能让你产生心流模式，你通过鼠标到处点击，页面上不断的给出动画效果，然后你收获惊喜，最终促使你进行更多的尝试。

好了，说多了，就是希望为更多设计师提供设计思路或执行概念，帮助大家找到更多的创意灵感。

首先了解 Web 端交互支持

Web 端交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互，个别网站的产品可能会涉及麦克风声音采集或摄像头应用。

1. 鼠标允许的交互

现在的鼠标可以支持更多功能，但是通常来讲需要严格的考虑兼容问题，所以仅以鼠标左右键滚轮滚动以及光标映射选取为主；

• 光标选中/hover
• 左键单击
• 左键双击
• 左键连击
• 左键长按
• 左键按住拖拽
• 右键单击
• 右键双击
• 右键连击
• 右键长按
• 右键按住拖拽
• 滚轮滑动

以上所有交互都可以根据实际场景进行设定，不过鉴于用户习惯，一般不会用到快速的连击交互以及右键的双击、长按或拖拽，这不符合交互手势的舒适度或简化易用的初衷。

2. 键盘交互支持

键盘支持大量的按键交互，除去一些全局的功能按键和组合快捷键，在网页交互应用中常见的还可以分为以下几种情况；

• 数值、字母、符号输入
• 某个指定按键单击/双击/连击/长按
• 用某个指定的或组合按键代表网页上的功能
• tab 键切换网页选项
• 用空格切换下一屏
• 方位键切换选项或移动窗口视角
• ESC 退出视频或全屏查看

在应用键盘按键功能的时候，除去那些作用明确大众悉知的按键功能，其他的按键操作应该保证界面上有指引有提示。

常见的交互动作组合

组合的交互动作常配合不能简单直接完成的任务，这里的组合指有两个及以上交互动作完成的类型，复杂的交互动作尽量少用，且尽可能的为用户提供操作指引，若非必要，费力不讨好；

• 鼠标左键长按横向拖拽
• 鼠标左键长按上下拖拽
• 鼠标左键长按任意拖拽
• 鼠标左键长按绕中心拖拽
• 键盘方位键与鼠标点击
• 键盘指定按键加鼠标点击
• 多个按键组合使用
• 指定按键配合鼠标长按
• 指定按键配合鼠标长按拖拽

组合动作主要分为以上 9 类，鼠标拖拽的组合动作通常会细分来应对界面场景的应用，例如通过横向拖拽将一个竖放的圆柱物体旋转起来，那么垂直的拖拽必然是没办法转动起来的，而且左右还会决定拖拽的方向。

交互影响的元素

简单来讲，无非就是看得见的元素、听得见的元素。听得见的元素无非就一个声音，讲深一点，也就涉及一些音效的交互控制。而看得见的元素则会相对丰富很多，如果再次细分的话还可以归为以下几种情况；

• 颜色（例如内容被选取时的颜色变化）
• 文字（所有文字相关的样式及状态）
• 图形（所有静态可见图形的样式变化）
• 动画（所有的动态内容或交互动效）
• 按钮（所有可操作的按钮及多状态呈现）
• 控件（页面中用于交互的控件元素）
• 模型（所有可交互的三维内容）

1. 常见变化形式

位置变化、透明度变化、角度变化、大小变化、形状变化、颜色变化、翻转效果、特效变化

网页交互的概念

web 端的交互概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量，页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。

页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态（鼠标短暂的点击时属于“选择时”，若长按有内容影响则属于“运行时”），因此在网页交互的过程中，我们需要考虑好这三种完整的状态时呈现形式，另外在考虑补充合适的动效进行过滤或信息反馈。归根到底网页的交互概念就是控制内容呈现罢了，这是网页价值的本质。

Web 端内容呈现结构

web 端内容呈现的结构应该算是页面交互的范畴吧，其实上网页的页面并不只是长页面的形式，实际上会有更多种结构可用。因为电脑显示器更大的缘故，web 端结构上比移动端更加灵活，同时根据产品的性质也有需要考虑移动端响应式的需求，一般来讲这些页面结构可以分为以下六类：

1. 上下长屏滚动结构：通过长页面布局内容，页面滚动查看信息
2. 全屏上下切换结构：每次定焦一屏的范围显示内容，通过滚轮或按钮上下切屏
3. 全屏左右切换结构：同样是定焦一屏显示内容，但采取左右切换结构
4. 全屏页面覆盖结构：基于全屏定焦显示，页面通过覆盖式切换或跳转，甚至鼠标滚轮深入或浅出页面。
5. 自适应平铺结构：适用于页面模块小而简单的时候，直接将模块在屏幕内一个个展开即可，一屏放不下时可以换行或继续平铺并定焦
6. 三维场景结构：将内容场景 3D 化，通常导航或部分 UI 控件会在屏幕上固定，然后可以采取定向镜头伸缩查看，也可以是环绕中心与自由移动查看内容信息

网页的组成区块通常分为五大类型，即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类，也有个别是通过点击弹出的导航。内容布局则更是五花八门了，是板式与技巧的呈现了。

14 种视觉层创意形式

个别产品本身也是创意的一部分，有一些可能界面交互平平，但是却有着魔性或引人关注的产品内容。而这里整理了些比较典型的视觉展现形式和交互创意形式的案例，这些方式通常可以根据产品的定位与特色进行组合设计和开发呈现，让你的网站更富有创意和较好的视觉体验；

1. 几何色块搭配文案

色块搭配标题文案，简约大气有视觉冲击力，再也不用担心没有图片或插画素材了

2. 精美大图背景搭配内容

采用精美大图背景搭配文案或交互控件，精美的图片本身就很抢眼，再搭配标题大字，瞬间就使得页面有冲击感有层次，常见于游戏官网或活动专题

3. 关联插画或图标搭配文案

采用小范围的插画或图标来表达服务或产品优势，搭配文案说明，风格统一精致耐看。常见于服务描述或产品说明模块应用

4. 留白大图搭配文案

将某个产品或其他元素放大显示再结合极简的排版说明，有较好的视觉冲击力和产品凸显效果，同时留白保证呼吸感和减少视觉噪点，使得用户能够更加专注产品图

5. 动态的背景或微动效装饰

应用动态背景或微动效的元素装饰，有较好的内容吸引力或氛围渲染力，可以展现更多的产品细节或丰富画面层次感，不过也比较考验视频本身或动效装饰自身质量

6. 点线面装饰与文案排版

应用简单点线面元素去装饰界面，再结合有对比有版式的文案排版。页面简洁美观，适合简约干净少图的页面模块

7. 栅格化应用与板式跳跃率

应用栅格化与版式跳跃率，使界面整体充满平面艺术，富有节奏感且不显凌乱。在日本的网页设计上有大量应用

9. 充满个性的视觉装扮

采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格，来打造符合产品的特殊视觉效果，为网页印象加分，提升品牌感染力

10. 引用 3D 视觉装饰

运用 3D 视觉搭建页面场景，常见的有 3D 图标、3D 动效或 3D 产品大图等，有较强画面立体感和表达能力，视觉新颖让人眼前一亮，也是当前的一种视觉趋势效果

11. 产品元素或其他元素来填充背景

将品牌元素进行弱化处理后作为背景墙，凸显个性和丰富画面，结合微动效可以有进一步的效果增强

12. 矩形陈列或卡片陈列

将内容模块用矩形陈列显示或卡片陈列，Win10 菜单或 WP 系统的手机桌面有较好体现，特点是干净利落模块分明，适合同类模块较多的场景进行排列显示

13. 极致的简约

采用极简的方式呈现内容核心，可以是一张图一段字、一段文案排版等，总之就这么简单的搞定了

14. 魔幻或神秘感界面呈现

如示例网址一样，魔幻且神秘，有着迷之吸引力和趣味性，不过需要慎用，比较恶搞。而适当给出一些神秘感，可以使得页面内容更有吸引力，用户更愿意去点击尝试。

24 种交互层创意形式

主要是关于页面内容元素交互时的创意形式讲解，这里不对交互动效或特效细节进行过多说明，因为怎么去动又或者用什么样的特效去呈现实在数不清说不完，如果有兴趣可以参考一下文中的精选案例视频整理和提供的一些体验合集地址。

1. 光标跟随动画

会使页面上的元素根据光标的位置或移动产生相应变换，增加页面的互动性与趣味，适用于装饰或加强背景层次感，在特定的场景也可以使整套控制 UI 往鼠标移动的方向微微靠近，结合菲兹定律公式，距离的不断缩减也能够加快选中的效率）

2. 鼠标悬浮动画

简单易用的鼠标悬浮动画，用于聚焦显示或 Tooltip 说明，常用与内容选中状态区分或元素细节展示，加上一组好的动效创意非常能够凸显个性，使用户感到惊喜为体验加分

如果是一个完整动画缓慢播放完会更有叙述性

3. 鼠标点击特效

由鼠标点击进行触发，基本样式即点击状态显示，触发后的特效可以是图标动画、光效、音效、界面动画等，游戏场景中较为常见，点击后不仅有光效反馈还有音效附和，这是一种触发反馈效果。

4. 鼠标长按特效

当鼠标长按某个按钮时持续出现的特殊效果，一般是持续鼠标点击的特效或维持某个元素的变化效果，通常对数值持续增减动作较为常见，可以代替连续的点击，交互更轻松。也或者是需要一定的加载时间所以用长按配合

通过长按持续增加细菌圆点

5. 鼠标拖拽特效

通过鼠标点击长按某个元素进行移动的组合交互，一般用于拖拽移动、内容绘制、元素连接等。应用场景广，互动性较高，能为用户带来更多的参与感和趣味性，甚至制造小惊喜

示例内容：阿里内测的 Real 3D

6. 鼠标滚轮巧妙的联动效果

主要用于页面某个值的控制或页面滚动，在页面滚动的时候可以配合控制元素变化来实现更具创意的展现效果，通常元素透明度、位置、大小、序列图都可以控制

国内官网

7. 鼠标选中自动展开

鼠标经过选项时自动展开选项并聚焦，可以省去鼠标点开的动作，但不适用于选项内容较多且内容密集的场景

8. 按键与鼠标配合触发

通过指定按键和鼠标配合交互进行触发，适用于同界面的复杂交互场景，且存在某些变量需要鼠标控制。如果你的网页内交互丰富且包含变量元素，不妨试试看

9. 模块或分页加载动效

在页面滑动或分页信息加载时，界面构成元素有序的缓入进场。采用流畅的动效演示数据加载的过程，缓解数据加载渲染压力的同时，使得用户可以更加从容不迫地浏览信息，让界面呈现更加精致优雅

10. 趣味转场或加载等候

应用转场效果与 Loading 动画，运用某个元素变大覆盖或页面移动交替转场，而非生硬的直接替换，使得页面切换更有趣味和层级关系体现。再对加载较慢的内容补充 Loading 动画，缓解用户焦虑的同时还能延展品牌信息

11. 大图或多图轮播应用

精美的图片总是想要放大看，看了还想看。运用超大的轮播图展示与沉浸式功能布局，满足用户操作与大图赏析

12. 内容穿插滚动

运用特殊的图层顺序结构，在页面滚动查看时，形成奇妙的元素穿梭视感。通常会穿梭替换背景或让元素接力，这样相比静态写实的页面滚动时会更有层次感

13. 内容自动生成

输入关键内容后，页面自动生成结果进行呈现，整个过程可以是缓慢有序的，适用于降压或画面创意生成的产品，可以让用户感受整个过程与细节变化

14. 游戏互动模式

将产品内容以游戏的形式或交互呈现，让内容充满趣味和互动性，使得用户在参与游戏互动的过程中打破了常规的阅读体验

15. 三维或全景空间

建立一个三维或者全景空间进行查看或操作，再赋予操作按钮或说明，实现 3D 场景的交互与视觉效果，常用与地图全景查看或 3D 游戏应用，可以巧妙的结合产品 3D 模型，打造非凡的互动体验

16. 一镜到底的视角呈现

打造一个非平面的视觉场景。用鼠标点击或滚轮联动交互利用分层的元素变化，营造出由近到远或由上至下的一镜到底的视角穿梭体验。界面场景切换更加自然，还有超强的空间感与趣味性，让人难以忘怀如临其境。

17. 按键交互效果

将某些功能或任务引用按键进行交互或触发。常使用字母、数字、空格、方位键，界面需要有提示对用户进行指导。

18. 个性的模块展现方式

常见的有弹窗、抽屉、卡片展开、转盘等，通过个性轻松的显示结构与交互方式也能让人眼前一亮。

19. 可交互的颜色或图形

对一些颜色或形状元素提供切换或 DIY 的空间，允许用户进行意料之外的交互或配置能力，提升网页趣味性或用户个性化需求满足。

20. 音视频媒体控制

围绕产品介绍的媒体内容，常见有视频或音频且支持基本交互控制，结合场景需求可以丰富交互的形式或更多媒体控制功能，例如长按快进、倒退、剪辑、混音等，常用于娱乐互动场景或音视频类产品。

21. 内容或窗口抖动

通过抖动进行报错或反馈，常见为密码输入错误时或游戏中受到伤害的场景，可伴随音效提示一起。使用场景不广泛，但是也可以进行创意应用，例如抖掉灰尘小游戏，长按元素抖动干净为止。

22. 打造仪式感

结合现实场景中的交互方式，打造相似的线上场景帮助用户共情带入，再配合交互和动效完成类似的动作，为用户带来仪式感和共情效果。

23. 有声交互

通过麦克风采集声音来影响交互，是一种声音的交互，如果网站支持，甚至可以语音交互，是一种少见的网页交互形式，并非传统的音视频控制而已。

24. 镜头交互

通过摄像头授权获取镜头画面进行交互，通常是一些镜头滤镜效果或者增强现实技术结合做交互创意，网页上少见新颖。

网页创新设计的方法

找对方法去创新很重要！在实际工作中，我们不仅要衡量界面设计与交互效果，同时还要兼顾开发资源、实现难度以及产品架构本身考虑。对此我们也需要了解一下开发实现的概念，之后再研究如何进行创新设计。

1. 开发者的痛点与解决方案

在进行创意设计时不考虑开发，那不是自嗨就是对开发耍流氓。静态界面开发或简易的切换效果并不难。而代码层的图形变化效果、仿物理效果(例如反弹、律动、重力等效果)、3D 交互效果相对会复杂许多。大多的动效不能依赖 GIF 或 Lottie 进行解决，这对交互控制或性能优化都是挑战，而代码能够更好的保障这俩点，所以大量的交互动效还是需要开发者支持，而代码实现显然会比设计师产出复杂。

那么如何解决呢？

CSS 进行实现，部分动画元素可以由设计师通过第三方软件或在线生成 CSS、Svga、lottie 文件（相对下 lottie 更消耗性能，在线生成 icon 动画代码： https://loading.io/ ，在线 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主绘制导出 lottie： http://airbnb.io/lottie/ ，Svga 在线创造： https://www.svgator.com/ ，2D 动画制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊动效，其实会有可用的第三方库或代码资源来解决，首先就是保证你所设计出来的动效是可行的，过于逆天可能还是有难度，剩下的便是提供动效关键词方便开发查找相关资源，或者你给出参考来源。常见的代码动效素材网有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（欢迎补充哈，别藏着掖着）。对于 3D 效果的前端开发呢，暂推荐新开源的 Oasis 引擎或 Three js 这些来实现，当然其他引擎也没问题。2. 网页创新设计的策略考虑

考虑到创新开发的背景情况不一致，这里我提供了一些创新研发的策略提供参考：

传统改版：

1.明确改版目的，挖掘价值点

会议说明，清楚改版需求的背景与痛点，挖掘价值找到设计发力点

制定改版目标，明确分工计划，同步项目情况

2. 构建原型框架，评审优化

设计新版架构，确认范围层细节（功能型：功能规格支持。信息型：内容需求），完善流程与信息框架，然后拉拢项目相关人员进行评审优化，直到新版框架大体定型后，再进行视觉层输出

3. 明确产品定位，建立设计语言

要保障产品气质与视觉风格的契合，即一个资讯网站肯定不适合采用电商视觉进行输出。然后根据内容占比，考虑呈现的布局方式，即不同模块中的视频、图片、文字比例情况。然后你可以结合上文的视觉层创意形式进行套用，当主要的静态视觉设计完成后即可进入评审阶段

4. 高保真评审，挖掘交互创新点

对网页高保真进行评审，确认页面信息框架或界面设计可行。然后对交互创新方案探讨，结合网页的板式设计，提出交互创新的细节，与开发者同步，确保实现的可行性与项目工时可控，同时披露交互细节帮助开发者进行调研或准备

5. 交互创新对齐开发，进入研发阶段

准备提供交互的细节 Demo 或参考内容，在基础内容开发完成后或开发者认为适合介入的时机，进行交互创新内容的对齐，使创新方案在最小可行的基础上进行开发实现。之后建议设计同学耐心的陪同开发小哥进行还原，确保效果

6. 测试验收，预发上线

最后进行成果验收，确保基本的内容是否符合标准，再根据工时情况或上线计划等，考虑交互创新部分的细节还原调试，适公司实际情况可以考虑再迭代一版。之后根据产品情况自行考虑是否 A/B 测试、灰度上线等，上线后就是线上数据跟进或用户调研了，希望你的新版本收获一片叫好 哈哈

敏捷开发：

对于想要敏捷实现目标的话，可以采用谷歌冲刺法（Google Sprint)，当前基本分为六个阶段进行，分析理解阶段、定义阶段、发散思考阶段、决策阶段、原型产出阶段、测试验收阶段。这里我结合交互创新的方法，对多个阶段进行了补充，内容如下：

1. Understand 理解

明确建站目的、需求背景、梳理业务或用户需求。通过用户研究或竞品分析等手段，更好的理解产品、行业现状以及痛点机会，也为后面阶段提供可靠的依据或支撑

2. Define 定义

基于对此次建站需求与背景深度理解，定义产品设计目标，挖掘价值点

3. Diverge 发散

让参与者们集思广益，发散思考，将不同的点子记录下来，最好图文并茂的画一下，然后形成自己的方案。在这个过程中不必共处一室，独立进行即可，这样可以避免被带偏或扰乱

4. Decide 决策

方案决策环节，产品经理、设计师、开发小哥等将各自的方案进行展示说明，这个过程中不要急着评价对方，只要投票选出最佳方案即可，这是一个方案的根基，之后再进行优化和细节完善

5. Prototype 原型

建议先将方案框架进行原型绘制或 demo 产出，然后经过一轮初步测试评审后可以再次优化复盘。在原型绘制的过程中，主要是确认流程与信息框架，不必着急视觉层的问题。若准备进入视觉设计，则可以带入这几个问题进行思考；

• 了解框架结构，采取合适的布局方式（参考上文）
• 明确产品定位，挖掘符合产品气质的设计方案（制定初步的视觉规范）
• 根据产品属性，页面内容类型选取合适的视觉创意形式（可参考上文）
• 静态页面基本确认的情况，添加交互创意画龙点睛（网页内容呈现是核心，所以交互创意放在后面考虑，确保项目最小可行性优先）

6.Validate 验证

首先通过内部自测优化，再根据产品类型考虑是否找利益相关者进行可用性测试验证，或者找专家做顾问。之后再进行下一步的优化完善即可

网页框架如何搭配创意形式

也许讲了这么多，你还是不知道前面诸多的创意方式怎么用，没关系，这里我进行了简单的整理对标，希望你看完还有救！

1. 明确产品定位

网站本身即视为一个产品，一个产品的风格定向一定是由产品本身属性或用户属性影响，了解产品定位或目标用户也是重要的环节，这些环节可以制定更符合产品或用户的信息框架或视觉表现。通常我们可以将网站类型分为企业官网、品牌官网、营销官网、门户网站、论坛相关、综合网站六大类，这里简单讲一下这些网站定位与视觉特征；

1.  企业官网风格较为庄重正式，个性化体现少且相对板正些；
2. 品牌官网内容是多元化的，视觉与交互都更具个性化，没有太多表现限制，传递品牌优势或能力为主；
3. 营销网站更加体现产品或业务能力，并且都有相关咨询或消费入口，图片插画应用不会少；
4. 门户网站是指提供某类综合性互联网信息资源并提供有关信息服务的应用系统，内容多紧凑型；
5. 论坛相关又称 BBS，是聚集用户进行资讯、情感、娱乐等领域的电子公告系统，导航多，偏资讯；
6. 综合网站，内容结构更丰富，如企业营销品牌一体化，通常是产品营销做核心，图文搭配干活不累；

2. 信息框架决定板式细节

通常一个网页怎么设计版式、如何调整布局结构、调整基础交互，都是需要参考原型的信息框架。信息框架中的元素情况会直接影响视觉输入和基本交互。如信息框架中有很多图，那么设计时就需要考虑是平铺直叙还是轮播显示。

信息框架设计学习：《Web 信息框架》

那么关于不同的信息架构有什么好的布局方法吗？这一点通过内容的搭配形式，整理了几种方式供参考：

文の处理：

通常一个纯文本的界面是很难设计的，因为过于单调，对此可采用

• 几何色块进行搭配，配合字号对比形成冲击力
• 点线面装饰，标点符号箭头等都可以合理运用
• 利用板式跳跃率排版，有大有小有节奏有对比
• 补充插画搭配文案，采用小范围插画弥补单调
• ……

图の处理：

纯图片的形式不多见，但是不能否定，一般可能是图本身有一定的信息传达，或者是图片浏览类型的服务

1. Banner 走马灯的形式进行大图轮播
2. 大图展示加预览切换控件
3. 非全屏图片展示，配合 hover 状态提示切换，或屏幕上显示切换按钮，适合全屏布局
4. 图片响应式陈列排放，鼠标悬浮选中时进行聚焦放大
5. 环绕显示，通过鼠标拖拽或按钮切换聚焦对象
6. 多张图可陈列摆放或通过大小对比叠加摆放，也以栅格化错位摆放，再适当的配合切换控件

图文の处理：

少量图文配套是比较好处理的，手法也比较多，根据配套数量情况还可以调换位置形成错位区分模块

1. 大图背景铺满加遮罩文案，控件与内容少可采用全屏切换的页面交互
2. 图片抠图加文案左右排版，注意留白。多组可左右调换位置往下排布，或者使用不同的背景色分割
3. 图片陈列分割或多个横向排布，文字可以在图上下方摆放或图内加遮照显示，也可以鼠标悬浮聚焦时显示
4. 小图片配合加大文案叠加显示，突出文字，图片为辅

视频の处理：

视频的处理分为自动跟手动控制，自动即作为背景自动播放，可进行简单的切换，手动则要注意相关按钮布局和显示遮挡问题

1. 视频封面配合播放按钮做入口，不用直接播放，入口可以更小数量更多，点击后画中画或全屏播放都行
2. 设定好视频播放的大小或位置，给予封面以及播放按钮提示，或者鼠标移入范围显示播放按钮
3. 单个模块的多视频交互最好给予切换按钮，或者加以带缩略封面的切换栏进行处理，以减少视频模块的占比
4. 在能够保证内容播放清晰的情况下可以多个陈列摆放，鼠标移入目标时可以直接播放达到视频预览效果

图文视频の混合：

通常图文视频混合的情况很少见，视觉焦点不好控制，其中视频做背景是最好处理的，但内容信息不易过多

1. 视频做背景，少量图文或按钮搭建页面框架，确保视频内容不被过分遮挡，也能较好兼容这些元素
2. 在视频未播放前，也可以叠加遮罩与相关图文信息或按钮控件，点击播放按钮后，收起即可
3. 通过鼠标悬浮选中目标后，Tips 浮框显示额外的图文视频信息或按钮控件即可
4. 小范围播放视频支持全屏，使得图片文字视频能够在有限的范围显示更多有效内容
5. 半沉浸式全屏视频交互，采用幽灵式风格将图文按钮控件等往屏幕边缘分布，留出核心区域交互视频或观看

三维の处理：

因为是三维的场景，所以需要考虑到三维场景下的视角形式与操作方式

1. 固定视角，有一个固定的场景和视角，可以通过交互使场景的内容发生变化，内容和操作可以轻量化
2. 穿梭视角，通过交互场景中的图或模型，形成向前后穿梭的效果，适合多层内容逐步查看或过程演变
3. 自由视角，控制元素或视角在场景中自由移动，或者围绕某个元素全景查看，适合细节展示或空间体验
4. 固定操作，指固定的操作按钮布局或通过键盘控制场景变化，适合场景中效果简易有规律的产品
5. 三维操作，在三维场景中含有鼠标可以选取操作的元素，适合带有场景元素互动、交互丰富的产品

按钮の处理：

按钮是网页中最常见的交互控件，是页面扭转或功能启用的基础

1. 色块按钮，色块式的按钮，有视觉明显易触达的优点
2. 线性按钮，用于弱化显示或透出背景内容时较为常见的按钮样式
3. 鼠标悬浮按钮，不直接显示而通过鼠标经过相关模块时显示对应按钮
4. 元素按钮事件，对图文内容加上点击事件，通按钮使用，例如超链接

控件の处理：

控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大

1. 覆盖式卡片，通过卡片承载控件，控件多了就用更大的卡片呗
2. 幽灵式控件，线性样式展示控件来兼容背景，并结合鼠标悬浮加强选择样式
3. 为控件留白，留出控件交互的区域，通常采用留白或纯色背景来陈列控件组
4. 鼠标悬浮展开，结合图标或直接隐藏，在鼠标悬浮选中时显示相关控件详情
5. 展开收起式控件组，小面积显示核心控件，配合展开收起按钮隐藏更多
6. 折叠按钮与跳转，通过按钮入口触发新的弹框，或者打开新的页面来陈列控件组完成任务

3. 交互创意如何下手

结合信息框架对不同元素类型进行视觉设计调整后，再对页面内容的基本交互进行考虑，例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。

基本交互发力点

鼠标经过反馈：常见且重要的交互方式，通过鼠标经过时反馈选中状态或提示相关信息

按钮点击反馈：在鼠标点击后，按钮或控件的颜色形状变换效果，用于反馈点击成功，实现眼手体验一致

按钮长按效果：长按状态的动效示意，通过对长按目标加动画响应进度或持续的状态，而非单纯的变色或样式切换

完善 Loading 动画：如点击上传下载更新等，出现对应进度条或 loading 动画帮助用户完善体感

内容入出场动效：页面切换加载或滑动页面后，内容采取动效有序的进入场景定格，而非生硬的静态切换

多内容轮播应用：对 Banner 或其他多个内容展现，进行轮播交互完善和时间细节控制

锦上添花交互发力点

按钮切换动画：通过 icon 的路径动画表达按钮切换，而非直接的图标对换，更具个性和视觉观赏性

鼠标跟踪动画：可以适当的做一些鼠标跟踪事件，让一些背景或界面元素跟随鼠标律动起来，增强互动

特殊滚轮联动效果：通过鼠标滚动联动其他元素进行交互变化，来呈现更有创意的场景切换或内容展示

内容穿插滚动：将内容分层控制，页面滚动时将元素固定或交替显示，产生穿梭感提升界面层次

响应式展开收起：主要用于二级或下级内容的自动展开，由鼠标经过自动展开并聚焦，减少用户操作

结合音视频媒体控制：在页面中植入音视频内容通过按键或鼠标进行交互或切换，打造互动性更高的媒体传达

趣味转场或页面加载：对页面转场或加载深度优化。采取更有创意的方式或动画来过渡，让视觉体验提升亿点点

内容或窗口抖动报错：合理采用抖动效果进行报错反馈或特殊场景应用，使呆板提示更灵动

可 DIY 的颜色或图形：提供主题或模块的 DIY 空间，满足用户编辑符合自己喜好的视觉效果

结合产品的场景创意

打造个性的模块呈现方式：结合产品的应用场景打造有个性的呈现方式

打造游戏互动的呈现：将有剧情有故事的产品或内容游戏化，可以让用户趣味互动更加深刻

打造一镜到底的转场：结合鼠标滚轮联动做镜头创意，突出产品细节或内容呈现

打造三维或全景场景：根据产品属性考虑用三维的场景来增强互动与突出产品

打造仪式感交互：利用视觉和交互变化来制作符合产品的应用效果，实现仪式感线上体验

有声交互：比较少见，视产品情况应用，可以使声音产生互动或视觉影响

镜头交互：适合有镜头针对性应用的产品采用，需要授权，要做好隐私说明

补充按钮交互触发：在场景更为复杂交互需求更多后，进行的常规解决方法

补充按键与鼠标配合交互：适合按键触发且需要鼠标控制变量的复杂交互

文章来源：优设   作者：泡泡bing

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务