首先，为什么要动？可能你会想到以下几条理由：
呵呵，你要这么想就完了。
那么该如何衡量一个动效是否应该出现呢，我们认为有几个考核标准：
1. 这个动效是否会影响性能？
首先，这个动效是否会影响性能？这个是最重要的，添加任何动效前都要考虑是否会影响产品的性能，如果一个很酷炫的动效会拖累性能，使体验变得卡顿不流畅，那么必须毫不犹豫的砍掉或简化。
例子：化身间谍
比如这个例子，这是一个穿越情景的过场动画，随着年份的倒转背景出现各个历史大事件，给人以历历在目的感觉，设计师考虑到了多张图片会出现卡顿的可能性，所以特意降低了每张图的清晰度，因为内容本身就是老照片的风格，所以这种降低画质的手法反而增强了画面的真实感。
2. 这个动效是否会提高产品的可用性？
任何动效的出现都必须带有明确的目的性，能够解决用户在使用过程中的困惑，而不是炫技。单纯的炫技只会分散用户的注意力，弱化内容，变得适得其反。
例子：翻页提示
比如这个上滑提示。不用解释，用户一看知道该做什么。动效增加了产品的可用性，所以这样的动效是非常有意义的！
3. 这个动效是否会给你的产品带来独特气质？
这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花，深化你的主题和功能，注意，一定是与主题相关的，牵强的搭配只会叫人觉得莫名其妙，毫无意义。
例子：人生四时
再看这个例子，人生四时，四根火柴依次燃烧，慢慢燃尽，这种油尽灯枯的感觉很切合的体现了产品生老病死的主题。
4. 重新审视第一条，看你的动效是否影响性能
所以，合理的动效不应是花拳绣腿，而应该是解决问题的手段。
好，我们再看看哪里需要动效，这里举几个例子：
1. 加载
首先是出现在加载环境，不管是网页还是H5都不可避免的会出现让用户等待的情况，在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的，我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。
例子：化身间谍H5 loading
这是一个穿越类的H5，所以设计师在设计loading的时候选用了虫洞的理念，与内容本身紧密贴合。
2. 转场
第二个情景是转场。具有意义的转场会降低产品割裂感，我们看两个例子就明白了。
例子：QQ会员观影特权
这个例子里元素在默认状态下会做上下浮动的效果，当我们滑动时候，元素很自然的做了一个出场入场的效果。很自然，没有割裂感。对吧？
3. 页面元素的互动
也可以为网页元素增加一些必要的动效。
例子：好声音第四季首页：
看下好声音的专题页面，在网页上的能够点击的按钮或者文字链，在鼠标经过时都有点变化，这个十分必要。因为表面上的变化会给用户一种心理暗示，那就是点击后也会有变化。
4. 心理需要
这里所说的心理需求是指气氛和情景的营造，例如节日，游戏活动等产品，是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的，这个动效就比干巴巴的文字有趣多了。
例子：一封家书
一封家书，注意看，背景有飘落的雪花，漫天大雪勾起思乡情，对吧，合情合理，有情有义！
好，说完哪里动，我们现在看看怎么动。
1. 基于真实形态的模拟
基于真实的动画会叫人看起来自然流畅，符合规律，比如物体运动时的加速度现象。
例子：Look
注意看这个笔画的动势，是有快有慢的，模拟了写字时起笔收笔的那种节奏感，所以看起来是自然真实的。
2. 人物动作夸张化
在H5的设计中，经常会出现各种各样的人物形象，夸张的人物动作会生动你的形象，增加趣味性，给用户以惊喜。
例子：巴菲特这一年
巴菲特老爷爷，动作很亲切。
3. 给元素赋予弹性
有弹性的物体会叫用户觉得具有生命感和真实性，弹的程度取决于你对元素软硬度的设定。
例子：拍个大头鬼
三个小鬼一跳一跳，弹性赋予了他们顽强的生命力。
4. 蒙太奇
这是一种类似蒙太奇的手法，通过快速切换的画面来形成一种奇妙后现代感觉。
例子：传奇硬箱
炫酷了，节奏很快，提气！
好，以上只是一些基本的动效手法，在实际的应用中其实有很多手段，在这里我建议大家可以去看看迪士尼和皮克斯的动画，应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影，但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品，你会发现他们的作品中充满了走心的细节。
简单来说，当用户打开一个界面，注意力首先会被动态的物体吸引，然后才会把注意力转向颜色对比强的部分，最后才是形状。这一过程是人在进化过程中形成的本能反应，基本适用所有用户。同时一个非常重要且容易被忽略的原则：用户的注意力是有限的，而且越来越少。很可能在用户注意到一段动效之后，注意力和耐心已经用尽，无法看到其他内容就着急去下一个界面了。
所以，对于动效这样一个非常强势的工具，一定要用在希望用户注意的部分，并且认真打磨。真正做到“不为动而动”。
文章来源：优设 作者:程远
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文字和排版可以追溯到五千年前，而图形化界面仅仅只有40年的历史。最关键的转折点出现在1973年的施乐，最早的图形化界面出现在了他们的Alto电脑上，而这个设计就是现如今图形化界面设计的基础。在Alto 的界面诞生后的10年里，几乎是它一家独大，并且它也被大家视作为数字技术的未来。
早期的Alto 在80年代进化为著名的施乐之星，而施乐的这个设计方案也成为了第一个商用的操作系统图形化界面。
不过不论是Alto 还是施乐之星，都没能真正意义上崛起。不过施乐的图形化界面最终深深的影响了苹果和微软的道路，比尔盖茨和乔布斯先后在施乐的研发中心观摩了施乐之星的运作，而乔布斯更是在1984年先人一步发布了著名的Macintosh 系统，也就是后来我们所熟知的Mac OS。
Macintosh 的发布不仅仅意味着相对成熟的GUI的出现，而且它为大众带来了真正意义上的自定义字体的功能。这款系统内置了许多以著名城市命名的字体，也正是在此之后才有越来越多的著名字体的数字版本在数字平台上发布并应用。
仔细观察这些早期的字体，我们能够发现，虽然已经是图形化的界面，但是其中绝大多数的界面元素都还是以纯文本的形式而存在，它们以一种奇妙的方式被整合到一个界面当中。循着界面的发展历程沿路看过来，不难发现，文本和排版几乎是贯穿始终的主线，它是一个不容忽视的核心类别。
界面中的每一个文字、每一个字符都很重要。好的文本是好的设计。文本是最根本的界面，是我们设计师来塑造和打磨这些信息。
看看下面的天气界面的设计，想象一下将所有界面元素都摆在桌上会是什么样的效果：无非就是两张图，几个图标和一大堆文本。
作为设计师，工作并不是将一堆随机的内容和元素排布在屏幕上，让它们看起来够漂亮就行了。真实的情况是，我们要从最核心的内容和文本开始着手，然后从这里着手细化，并完善出其他的部分。这就是我们工作的核心。
文本的清晰度同样扮演着关键性的角色。如果我们的大脑花费一两秒钟单纯只是分辨一个字形，那么清晰度上的微小差异是无伤大雅的。可是当它们组合成为大段的文本，不同的字母组合构成不同的词汇、段落的时候，清晰度的影响就更大了，排版的重要性也显得更加明显了。
当然，影响界面设计的文本属性还有很多，比如平衡性，定位和层次结构，但是好的文案和排版的影响至少占据整体影响的95%。
在伟大的设计师眼里，文本不仅承载内容，而且可以构成界面。
– Oliver Reichenstein
既然屏幕上的文本显示是如此的重要，那么我们应当先了解人们是如何阅读的，而文本显示又是如何影响我们设计决策的。
读过Billy Whited 的文章《Setting Type for User Interface》之后，让我对于文本阅读的效率有了更深的认知。一个少于20个字母的独立单词放在句子中会更快被理解，而单独放置的时候我们需要耗费更长的时间来识别。
其实这个研究结果也表明我们阅读较长句子的时候，并非是逐个单词地阅读，而是跳跃着阅读功能性的词汇，我们将这种阅读方式称为离散跳跃式阅读，俗称扫视。
扫视让我们的阅读能力更强，我们甚至会跳过短的功能性词汇。
我们应当记住这一关键特征，因为我们的界面中所承载的词汇大多是孤立的单词。简单说来，界面是无法利用扫视这种方式来获取信息的。
总的来说，单词在阅读中发挥着无比重要的作用，无论是作为内容还是作为界面元素，均是如此。无疑，选择合适的字体就相当重要了。
过去，人们常常认为眼睛和大脑是通过单词的外轮廓（Bouma Shape）来识别单词，当然，后来的研究证明这个想法是错的，单词的可读性和易读性的影响因素不止是外轮廓，字母本身的形态、细节和清晰度同样深入的影响着它的识别度。
其实这个问题一开始并不是那么好回答。阅读很大程度上依赖于我们的习惯，越常见的内容对我们而言越容易识别。这样一来，我们就不那么容易判断让字母清晰易读的影响因素了。为了了解这一点，我们需要将句子分割为单词，分解单词为字母，在字母中查看细节。
早在2008年，维多利亚大学心理学系根据测试结果得出结论，大写和小写的拉丁文字母是最容易识别的，也最易于阅读。
这项研究有趣的地方在于，它揭示了一个事实：每个字母延伸出来的线性端点是最易于识别的地方，也是每个字母的特点所在。
上面的图片标识出了这些最易于识别的部分。每一款字体在这些部分应当设计为最通用、最为人所熟悉的样式，同样的，它们也应该强调每个字母的差异。
在2010年的时候，另一项由 Sofie Beier 和 Kevin Larson 开启了一个新的研究项目，这项研究专注于测试经常被误读的字母和字符的识别度。
这项研究表明，在相同的字体和相同的尺寸、相同字重的情况下，有些字体或者变体的细节确实比其他的更加清晰、更易于识别。这项研究的结果说明，纤细的字体加粗之后识别度效果会明显会增强，而字母的X高度如果能够占据上伸区或者下探区的空间，识别度会更好。
为了更好的理解字体的清晰度的概念，你可以下载我所开发的这款工具 Legibility APP 来测试不同字体在模糊、炫光等多种不同情况下的清晰度和辨识度。这是一款处于测试阶段的工具，可以在Chrmoe、Opera和Safari 中运行。
理解了用户阅读的方式和字体可读性的影响因素之后，我们应当开始了解UI中的字体的几个关键因素。下面是UI中字体使用的10个关键因素。
可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨，作为UI元素，其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体，甚至包括 Helvetica ，都没办法清晰分辨 字母 i 的大写形态 I，和大写字母 L的小写形态 l，这在界面设计中无疑是有影响的。
上图中，左边的字体为 Source Sans Pro , 右边为 Helvetica，无疑对于 Illiterate 这个词Helvetica 字体下前三个字母完全无法分辨。有部分用户也同意Helvetica 并不适合作为UI界面的显示字体而存在，因为这款字体终究是为平面印刷显示而设计的，并非为屏幕而生。
在iOS 7 时代，苹果短暂地将 Helvetica 作为系统的主要显示字体的时候，曾对特定的用户群体造成过信息识别的困扰。这也最终催生了我们现在所看到的苹果官方字体 San Francisco。旧金山是为UI界面而生的字体，它的x高度比Helvetica 更高，字母间距更宽，字母间的识别度更高。
一款理想的UI界面所用的字体，不应当过于“显眼”，而该是悄无声息，“隐型”的。当用户在试图完成某项任务的时候，字体不应当给用户以“出戏”或者“显眼”的感觉，也就是说，字体不应当超出用户的认知负荷，而内容和信息才应该成为真正的关注点。
给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计，作为一个网页博客平台，我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度，包括输入法。
所以我们最终为它所选取的字体应当支持大量不同的内容，在不同的尺寸下拥有良好的识别度，能够兼容不同的设备，尤其是在小屏幕上。Sans serifs 字体就是专门为小尺寸低分辨率屏幕而定制的。
x高度的参考标准是小写字母x的高度，同等尺寸下，x高度更大的字体更易于识别。不过x高度也不是越大越好，当x高度超过一定限度的时候，小写字母n和小写字母h就很难分辨了，这一点应当注意。
字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高，字母在小屏幕上的识别度就越高。
字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性，而好的显示字体会更好的控制字母间距，确保单词在视觉上的“透气性”，甚至可以营造出一种韵律感。
不过字间距不是越宽松越好，太过宽松会让整个单词看起来过于松散。有一个值得参考的标准，就是字母之间的间距应当比字母内的开口缝隙略小一点。
许多字体不同的笔画粗细不同，而对于UI界面而言，笔触间的对比度越小识别度越好。较大的笔触对比度下，字体在小尺寸屏幕上，较细的笔画会难于分辨。
OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性，对于不同的语言和特殊的字符有着更为优良的兼容性。
接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前，部分内容因为字体没有加载而无法显示。
其实这可以通过先加载本地字体，显示内容，等网页字体加载好了之后再行替换，以达到无阻塞显示。这种方法的缺陷是需要预先设定一个可调用的本地备用字体。
Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰，降低误读的可能性。
这项技术最初是由苹果公司所提出的，不过因为TrueType 字体技术的出现，Hinting 正在消失。
随着新的UI标准、排版技术的提升，字体技术也在不断的进步，在不远的未来，字体会从传感器获得信息，更好的兼容不同的环境、随着亮度、设备、距离而进行智能化的调整，甚至复杂而庞大的中文字体，也可能作为灵活的网页字体而存在。
字体会让我们的工作更加便捷
让界面交互更快，更加触手可及
让UI更加易用
更加便捷
也更加清晰而高效
文章来源：优设 作者:陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为大家概括性地介绍5种流行移动应用中常见的界面设计模式以供大家在自己的项目中参考。这些设计模式有助于大家提高设计的可用性，让界面变得更加直观。文章将侧重介绍能够帮助大家进行下列各方面设计的模式：
在这个社交网络盛行的时代，我们是不是真的还需要用这种陈旧的方式提交个人资料？社交登陆这一设计模式完全可以让用户轻松快捷的登陆，从而取代注册、填写表单之类的麻烦工作。
用户可以直接登陆自己的社交网络账号（Facebook、Twitter或者Google等），无需另外创建一个以后不太可能继续使用的账户，这样可以大大提高注册效率。除此之外，这一设计模式还有下列好处：
注：在国内这一设计演变成了：您可以使用QQ/微博合作帐号登录，然后给你绑定，继续回到注册界面 – –
通知功能可突出显示近期的活动和操作。我们每天要接触大量的信息，但百忙之中却没有时间（或者不愿意把时间）花费在手机上。我们都喜欢在尽可能短的时间内完成要做的事，然后马上知道是否有新的活动或者情况能够引起自己的关注。因此，对于通知设计模式的透彻理解和妥当实施非常重要。
很多知名公司的移动应用采用了下列几种不同的方法实施其通知设计：
你可以模仿一下你最喜欢的解决办法，试试这个办法是否适合于你和你的用户。
通知栏该怎么设计，具体方法右戳学习：《怕打扰用户？来看看怎样设计通知栏不会讨人厌》
弹窗（也叫层叠窗口）是一种常用于互联网广告的方法。弹窗会在不创建新窗口的情况下遮盖住主要内容，无法使用拦阻软件进行拦截，因此用户非看不可。一般来说这种情况很让用户讨厌，但在有些情况下，弹窗打断用户的使用反而能给用户带来帮助。例如，用户可能会希望在不丢失当前用户界面的情况下查看某些信息。
下面是一些弹窗设计模式帮助解决问题的案例：
在习惯了使用Facebook、Twitter或Google等社交网站后，我们都会很自然的使用下拉手势进行内容更新。第一个使用这个设计模式的公司是Apple，在此之后这一设计就广为流行开来了。
当用户需要显示一列非静态，但不能自动刷新的内容时，就可以适用下拉刷新模式。下拉刷新时，屏幕会滚动到顶部，刷新完成后新内容将从顶部开始显示。这种设计模式可以节约空间（不需要使用按钮）而且简单易懂。这种方式还不仅局限于更新内容，其还可以用于在一系列短信、图片或资料更新中加载早先的内容。
除了下拉刷新手势外，滑动也是智能手机上最为常用的手势之一。很多应用都允许用户在文章上左右滑动来了解详细信息或执行其他操作。与依赖于点击鼠标的传统web应用相比，这一方法充满创新意义。
在Android和iOS上有大量采用了滑动、点击及其他特定用户交互方式的移动应用，你可以在自己的项目过程中予以参考。每个应用对于自己的用户来说都有不同的意义和价值。你应当在画线框图的过程中做好规划再投入设计或开发流程。在测试过程中花点时间思考用户的反馈、建议和批评。
文章来源：优设 作者:程远
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
iPhone X 在 2017 年上市以来，全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现，物理 Home 键都被舍弃改成虚拟按键，甚至是没有虚拟按键的手势滑动操作。
而这些手机都有一个共同的特点，就是屏幕尺寸越来越大。屏幕尺寸变大后，手握手机的方式和界面交互操作方式也随之改变，那对于设计而言，是否也应该随之进行改变呢？
想单手点击屏幕的操作，需要手足够灵活进行一轮操作才能够到屏幕上方，过程中稍有不慎，手机随时会砸地上。作者的手机屏幕已经修了几次，差不多赶上一台二手机的价格了。
在 2013 年，国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中，对一千三百名手机使用者进行量化研究数据：
据当时研究的数据可以看出，有近半的用户是单手使用手机（现在肯定不止）。当用户单手操作的时候，实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域，黄色区域是拇指能触碰到的最大限度范围，红色区域是触摸比较困难的区域。
然而这份研究报告的数据是在 2013 年发布，当时还没有全面屏的出现，如果把上面研究结论的区域，套用到如今的手机屏幕尺寸上，顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考，如下图：
拇指可操作范围大约在 3 分之 2 的区域，可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况，在当今已经不适用了，因此需要重新去考虑如何为大屏幕手机进行界面设计。
根据 2020 年手机UX设计趋势，大屏幕设计将会成为热点。根据数据报告中有说明，2018 年 10 月使用大屏手机的用户比例是16.3%，到 2019 年 12 月，该数据已经上升到 41%，并且会在未来更多新机型的出现中持续上涨。
那随着大屏幕手机的普及，就意味着设计师在设计界面的时候，要为大屏幕手机的使用场景进行界面调整，避免用户难以使用的体验问题。以下是我整理的一些设计建议方案：
1. 头部区域设计更高
通过将标题栏的信息区域放大，尽量把主要操作内容向拇指区域靠近。
2. 常用导航与操作居于底部
比起导航栏放在顶部，更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。
3. 手势操作页面切换与返回
抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式，对页面进行切换，操作的学习成本很低，而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。
4. 提示弹窗从底部升起
常用的弹窗，很多是设计在屏幕中间弹出，为了适配大屏幕，不妨尝试从底部弹出，关键选项都能轻松选择，提高转化率。
5. 使用大卡片
屏幕尺寸变大以后，使用整张大卡片可以让用户浏览内容更专注，大面积的配图和留白，也能提高用户的点击欲望。
除此以外，作为手机厂商，在发布大屏幕手机的时候，就有对界面操作做了一些对应系统级的设计调整，比如界面下拉悬停，键盘单手模式，屏幕边缘滑动返回等等。
大屏幕尺寸已经是趋势，屏幕大意味着内容可以更大限度地得到展示，有利于产品提供更多的服务，不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代，用户也不再满足于小屏幕的浏览方式。可以说，大屏幕已经是无法改变的趋势。与其担心问题到来，设计师更应该思考如何去适应产品的快速迭代，不断更新自己的设计思维模型，更全面思考问题，产出更合理、体验更好的设计方案。
文章来源：优设 作者:布莱恩臣
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Peter Drucker 说过：「量化才能管理。」这个格言后来成为了我的信条。我决定将我的目标量化，将它分解成为最基础的习惯来执行，并且以每天一定量的执行，来实现最终的目标。
我们先构建了一个免费的 Chrome 插件 Confetti ，这是一个能够帮你追踪日常习惯的工具，每次完成一个任务，都会有五彩缤纷的纸屑效果出现，祝贺你守住了习惯，达成目标。
以下见解希望对你有所帮助!
一开始，我和 Wilson 就决定使用3屏的主要功能，并构建了一个粗糙的原型。但是，我们没有足够的远见，无法设想我们的产品最终的方向，也没有对全部的想法进行深入的打磨。
最终，我们向后退了一步。我们回过头来，确定了最小可执行原型的发布日期，以及真正的核心功能。我们在 Notion 上创建了一个文档，并且开始梳理和管理哪些功能是「必需品」，哪些功能「如果有了会更好」。比如，登录、注册、新用户引导是必不可少的功能。但是，我们认为「重新排列习惯」是一个提升体验但是并不亟需的功能。
我们基于这一点，我们开始抓住核心功能，尽可能让它们足够易用，强化核心特性。通过确定核心功能的优先级，并且确定发布日期，借此缓解我们的精神压力，确定我们不会被成堆的功能所淹没。这也似地我们有足够的动力解决核心功能。
在设计产品的时候，我经常被提醒要处理好每一个边缘情况，填好每一个坑，确保体验的顺畅。从零开始构建产品是一把双刃剑：基于自己的构想来创造产品是令人兴奋的，但是相应的，我需要经常在舒适区以外处理问题。
我一直在 Skookum 从事产品设计的工作，而这些工作通常都是在一定的约束条件下进行的，但是现在所要处理的产品则不同。之前的产品都可以借助现成的设计系统，有早已搭建好的设计语言，有完整的组件，有明确的 UI 状态，有非常明确的基础架构，但是这次是我自己的产品，所有的这些都没有。而且，这个产品还可能会存在几种极端的情况、流程和状态。
比如，在注册流程中，按钮会有默认、禁用、激活、填充、错误、悬停等几种状态，但是除了这些之外，我还需要考虑诸如密码重置的流程和体验，这可能会涉及到 6 个高度相似的 UI 界面状态：
这个过程中，有很多东西都令我一度感到迷惑，这也引发出我下一个要说的要点……
项目开始之后，我很快就遭遇了组织架构问题。因为我是在工作之余来创建这个产品，这导致我犯了一个非常严重的错误：我没有按照传统的产品流程来创建产品，这随后导致了一系列的问题。
按照标准的产品设计流程，我需要从用户流程开始创建，定义用户可能会执行的流程，并且针对主要的流程界面进行必要的总结说明。因为这个项目和之前的工作不一样，我一开始就忘记了遵循流程这件事情，我错误地将它视作为一个包含几个简单界面的简单项目（是不是听着特别耳熟？很多所谓的小项目翻车都是从这里开始的）。这样一来，当我开始处理诸多按钮的不同状态和界面变化的时候，整个用户流程变得混乱不堪，并且我很难确定其中的体验漏洞有哪些。
最终我停止了这种随性的设计方式，并且在 Whimsical 当中创建了完整的用户流程。于是我很快清楚了那些环节有所缺失，以及整个界面流程的走向。
按照用户流程来梳理界面的时候，可以对于整个产品的屏幕状态有所了解，并且随着产品的发展膨胀，用户流程的重要性会随之增长，成为至关重要的部分。
的确，在完成整个 UI 之前，不应该开始向着项目当中添加动画。但是，不添加并不意味着你无需考虑。实际上，不同的微交互和动画对于实际的体验影响是巨大的。你在思考 UI 设计的时候，就应该考虑到微交互和动画的使用，避免在后续动效和交互落地的时候，进行不必要的修改。
比如，当我在设计「达成成就」这一体验的时候，我就考虑到了需要用到的微交互的效果，所以在我设计 UI 的时候可以顺着我自己的喜好来进行设计，并且将可能会用到的动效拖到某个角落暂时记下来，避免在设计 UI 的阶段，影响了整体的流程和效果。而后续加入动效的时候，就会方便很多。
我认为，将 UI 和交互结合起来考虑是非常重要的，因为两者共通塑造了体验。如果在设计 UI 的环节直接加动效，会让整个设计过程变得复杂臃肿。
其实这也是我在这个项目中犯的一个大错：等了太长时间才获得反馈。
我通常是在晚上回家和周末才有空推进这个项目，在很长的一段时间内，我没有真正告诉任何人。
当我终于同我的家人、朋友、用户以及网上乐于尝鲜的用户公布了这一产品之后，他们在使用过程中，开始注意到了很多细节上显而易见、但是我并没有发现的问题。我意识到我作为产品的设计者，是很容易陷入并沉迷用户体验当中比较孤立的一部分，反而会忽略很多显著的问题。
回想一下，如果我能尽早向用户和朋友展示设计和原型，那么我会在更早的时候发现问题，并且在获得反馈之后才进入开发阶段，弥补大量的损失。
很多设计师会认为，所有的想法都必须是原创的才行，否则就是欺诈。但是稍微想想，其实彻底的原创其实很少的。当你看到一个优秀的产品，它优秀的配色和恰到好处的交互可能会让你觉得：「已经有人做出来了，我的想法在它面前完全没法比拟。」
这种思维方式其实有着极大的缺陷，并且抑制了你的创造力。
当我发现我的设计有缺陷的时候，我会竭尽全力去搜索和了解更多网上已有的设计。我会观察和思考别的公司和产品是如何设计新用户引导流程的，如何管理用户个人信息的。我从来都没有复制被人的体验，但是会隔三差五去钻研别人所创造出来的优秀细节，然后将这些细节借鉴到我的设计当中。
我最喜欢的一个范例，是从模态状态下，旋转退出的效果。这是我偶然在一个网站上看到的效果，因此我决定将它添加到 Confetti 当中，我还在着陆页的按钮中加入了类似的特效。
事实上，一切设计都是混搭创造出来的。你借鉴细节并不意味着抄袭，不要害怕去发掘和学习别人的优势和亮点，你要学会有机地拆解和借鉴，灵活地运用到自己的设计当中，它就像调制鸡尾酒一样有趣。
当我们开始设计的产品的时候，我和 Wilson 头顶上的身份就一直在变。我们是 UI设计师，要负责UX，要做交互，也制作动效，要进行平面设计，还要考虑市场营销，要管理产品，我们也要扮演其他的角色。
职责如此之多，以至于我们不可避免地遇到我们能力范围之外各种新问题。我们必须承认自己陷入了困境，寻求外部帮助成了必要的选择。
专注于自己专业的领域，其他不专业的方面来寻求外部帮助是非常合理的。比如在一个项目当中，一位艺术家负责了绝大多数的风景插画，另一位艺术家则完成了肖像画的部分，这很正常。
我希望产品的外观和功能能够保持高度的一致性，并且我确实做到了。但是不要误会我的意思，我并非是不敢走出舒适区去学习代码开发，而是在这样的项目当中，我并不适合从UI和UX领域延伸出去，毕竟完成项目的开发优先级比学习代码更高。
尽管给 MVP 安排好了发布时间，可以防止这个项目被无限膨胀的功能特性和工作量所淹没，但是这样依然无法防止我们基于已有的功能进行改进。
很多人都喜欢 Reid Hoffman 的一句话：「如果你对于产品的第一版感觉不尴尬，那你一定是发布晚了。」不过，我们正式发布的第一版的产品，并不会显得太尴尬，但是目前来看，当时那种简单直观的状态，比起再花费好几个月时间反复打磨之后再发布，来得更好。
在发布新产品之前，我们必须考虑2个问题：
这些问题让我们最终能够达成目标，且按时发布，避免分心。专注交付最核心的功能，而不是被一堆冗余的次要特性所压倒。
从项目一开始我就一直在做项目的管理和组织设计素材，以便后面进行开发。不过，由于我一开始就使用了 Zeplin 这样的协同工具，确保了我可以轻松地将所有的素材都顺畅地交给负责开发的 Wilson。作为一款设计系统工具，Zeplin 让我无需浪费时间对素材进行分类，非常便捷。
在交接的过程中，我还做了一些优化：
在设计 UI 的时候，界面中的文案部分是临时编写的，这促使了一次设计完成之后，整体的文案是不一致、不协调的。
我很希望一开始就创建了一个单独的文档，一次性将文案部分全部重写，包括提醒、注释、标签、弹出框提醒等等。而实际上，我的文案都是在设计 UI 的时候附带着写下来的，导致整体的一致性严重缺乏。
这种文案本身在调性上的缺乏，导致了整个产品在语气和用词上是混搭式的，一致性很差。
所以，在产品上线发布之后，一直在对文案进行修修补补。
文章来源：优设(陈子木) 作者:Danny Sapio
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前一直没有太多关注过如何定义一个 APP 的配色，或者如何画一个漂亮的 icon。曾经的上级指示都是这些基础对商业的不可量化。于是我在思考一个问题，就是没有直观商业价值的设计要素都失去了意义变成了所谓基础的事情吗？
半年前面试字节的时候，面试官问了我有关配色的定义，细节到为什么是这个色值。当时十分震惊于这么细节的问题，之后我就想起了之前有位朋友给我发送过一份有关支付宝「蓝」的定义 pdf，洋洋洒洒几十页就是为了解释他们为啥用这个有点脏的蓝色#108ee9 当主色。
所以其实 APP 的配色/图标与主品牌是一脉相承的，它是品牌的延续与象征。它以最直观的态度传达给用户，这个产品以及品牌的调性，并以此建立最强有力的视觉识别性。所以我觉得它是可以有条件地展示在我们设计方案里的，但一定注意它的篇幅和表达的方式，维度在品牌传达这一层就对了。
至于如何展示和定义你的 APP 配色，一般 2 类情况。
1. 在品牌主视觉配色基础上的适配
这种情况一般适用品牌主视觉方案已经设计完毕，APP 端作为延续。这个时候一般注意配色从 CMYK 模式到 RGB 的转换，所以作为 APP 的配色，具体色值上可以稍作调整，使它更适配于 LED 屏的用户感知与舒适度。
另外可以使用透明度进行色彩分阶段，一般从 0-100% 分为 10 阶就足够我们日常界面设计使用了。
2. 0-1定义APP配色
这种情况下我们从感性和理性 2 个角度去定义颜色。
从感性的角度分析：情绪板应该大家都熟知的了，根据不同的行业和用户定位得到相应的关键词。对应不同的关键词再搜集对应的图片，从图片和自然感知中提炼出主色。
从理性的角度分析：我们把色彩分为对比色、近似色、复合色、单一色、三角对立色和渐变色六种。根据产品的类型和定位，我们决定使用什么样的配色。比如一个年轻大学生专用的社交型 APP，我们可能就倾向更多地使用对比色这样的撞色得到更多潮流与青春的味道。
至于图标的话我就更不用多说了，大家肯定都记得那些非常基础的绘制图标的法则。个人认为图标也不太需要放一个单独的篇幅去展示，除非它有一些新奇有趣的亮点。
在之前的文章中有写过，匹配产品定位的界面框架一旦输出，对整个 APP 之后的迭代与功能设计都有很直接的影响。定义整体的UX 框架方案，是实践设计目标与策略的过程，基本围绕着这 3 个出发点：匹配产品定位、满足业务拓展性、符合舒适度美学 。
首先我们从宏观角度分析，一方面产品的业务线处于什么情况，是相对独立的业务主线产品（举例：拉勾）？还是平台级产品（里面包含了许多垂直的业务线，举例淘宝）？如果是平台级产品在整体框架设计时就需要考虑跨端跨业务的框架拓展型。
举个例子，就是在定义平台框架的时候要考虑这个框架与容器是不是同时适用于底下的子业务线，同时当这个框架到了 H5、小程序、PC 的时候需要做哪些适配调整，是否都可以很好地进行兼容适配。
另一方面，整体框架设计的类型是否符合设计目标。举个例子，无框式超大留白的框架设计虽然看上去很厉害，但在大部分商业产品中它的实用性却非常低的。假设说我们今天需要做一个电商类的 app，设计目标是希望能够提升业务转化以及购买效率，那么展示效率与功能分区就显得尤为重要，它就更适合一个相对紧凑的卡片式为主的框架设计。
其次从微观的角度来说，遍地就都是细节了。舒适度美学这一说，其实难免有些抽象，我们把它转为相对合理一些的落地原理就会清晰很多，像大家熟知的间距 4 倍数原理、对齐原则等等。但是这些微观的内容不建议大家放到方案展示里，因为它并没有针对单个方案的特殊性，更像一种大众共识。
△ 多说无益，直接上最终的效果图，方便大家参考
我们特地把单独的容器部分拿出来解析，是因为自定义容器是展示核心业务最主要思考呈现，同时还可以配合运营做很多提升业务效率的配置。在做具体设计的时候，我们需要区分「端上固定」模块和「运营配置」模块之间的差别。
「端上固定」模块
顾名思义就是开发端上需要写死的模块。写死的模块意味着，无论一个配图还是一句文案，也只有开发童鞋修改后通过发版才能实现内容变更。一般适用于相对固定的产品功能以及 UGC 用户生产内容。比如：拉勾上传简历功能、斗鱼的直播间列表。
「运营配置」模块
相对「端上固定」，「运营配置」就不需要跟着发版，可以随时后台上传替换模块内的内容，适用于需要 PGC 生产的内容。说到这里很多童鞋可能马上就联想到 banner，弹窗的运营位了，但其实除了这些之外还有很多容器模块是需要灵活配置为「运营配置」模块才能更有效地提升运营业务价值。
我们可以这样来区分「运营配置」模块类型。
一种是纯运营配置模块，即设计与开发输出框架、定好配置字段限制之后，运营可以独立完成后台配置的。比如：资讯 app 0-1 前期的资讯列表内容。
另一种是运营设计配合模块，即需要设计配合运营输出一定的设计图才可以进行后台配置的。比如：常见的 banner、弹窗、热门推荐专题等。
在 0-1 的设计方案中，更推荐大家展示「运营配置」模块的内容与解析，因为 0-1 是个以拉新为主的阶段，运营显得尤为重要，所以我们的设计需要侧重考虑整体的运营效率与转化。
在我们概述完大部分的整体思考路径与设计方案后，我们需要由面到点，从全局提炼细节，突出自己的设计方案亮点。
而如何提炼这个亮点呢？是挑一个我设计的最好看的界面呢？还是直接放最复杂的那个流程？以下是推荐选择的亮点设计：
1. 完成理论实践，并可以量化价值的设计case
大家应该都了解，一些和设计息息相关的数据 UV/PV/GMV/ 相关业务指标等，以及一系列在实践中很好应用来解释设计方案的理论支撑比如 5W1H、GSM 与五度分析……这些数据和理论是支撑我们设计更饱满更有说服力的重要支点。
虽然在 0-1 的项目里，我们基本不太用得上优化数据比对（因为产品初期用户数量少，产品体验路径也是一直处于不断试错阶段），但是我们还是可以借用上文所述的一些方法论或者 A/B test 来完成我们的方案思考过程展示。
那些你在完成践行设计策略完成设计目标时获得的数据指标要提前预知，养成习惯之后，你就可以快速轻松地察觉到哪里有可以做 A/B test、进行埋点数据比对的地方了。
2. 影响上中下游环节的设计case
除了对业务提升价值的项目外，我们有时候也需要注意对品牌设计、产品、运营、技术等上中下游造成影响力的设计项目。通常这类设计大部分也都是设计自驱发起的，能起到提升各方人效和业务效率的作用。
举例的话，我能马上联想到的就是多方协作的大型线上组件库，可以参考阿里的 Ant design、滴滴的魔方，在之后的版本拓展中甚至可以延展成功能更加强大的多方协作 UX 设计资源中心。
感觉近期面过的 80% 的公司都对组件库的定义非常关注，所以我们要做的不仅仅只是放一个视觉规范或者组件库的全景图，而需要对组件库进行拆解。
文章来源：优设(土拨鼠) 作者:Nana的设计锦囊
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中，表现清晰的层级关系，自然的引出与结束。交互动效有着承上启下的重要作用。
第一种：为衔接类型动画
主要针对不同界面直接的衔接，为带来更流畅的操作观感所做的设计，弥补两个界面直接的差异所带来的用户感知落差。
第二种：特效类动画
特效的核心目的是为了吸引用户的注意力，提高信息敏感度，在游戏界面设计当中使用更为广泛，能够带来更加绚丽的动态画面。
第一类：界面内的交互动效
在一个界面内的交互动效特别多，例如点击加号出现下拉菜单，出现浮层动画提示，点击舵式导航出现选择类型和遮罩，点击按钮出现评论点赞，当前页面的展开收起，加载等等。如下图所示：
第二类：界面间的交互动效
几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类：
△ 硬切到下一页
△ 下一页从右往左推入（上一页从左往右推出）
△ 下一页从下往上弹出
△ 上一页的元素过渡到下一页
总结：
“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。
按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：
时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。
指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。
用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。
在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。
“时间”的呈现方式和运用技巧
在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。
拿开会举例子：“下午 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 个复杂应用的设计原则和指南。
很多研究表明，对于复杂的应用和工具，用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。
与大量的教程、文档、帮助和设置说明相比，能够立刻开始的任务和项目，对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。
虽然在专业领域当中，倚靠摸索和试错学习是不恰当也不安全的，但是一定程度的边做边学是必须的，因为不可能在培训和手册当中涵盖所有的使用场景。
所以，在设计的时候应该提供「跳过教程」的直接上手的偏好设置，同时进行相应的安全性设置，避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作，让控制面板实时显示操作结果或者预览结果，这样用户无需执行全部操作就可以知道大概的结果。
在 Salesforce 控制面板当中，就可以实时预览面板编辑的效果。
绝大多数用户都不是进阶的专家级用户，他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后，通常不会主动做出改变，而这在日积月累之后导致大量的时间浪费，效率低下。
值得一提的是，这个时候依赖冗长的文档和教程其实很难达成效果，更合理的方式是结合用户所处的上下文环境，通过界面工具提示的方式，适时地告知用户「有更高效方便的方法」。
通常，可以使用悬停提示，或者是弹出式工具提示来实现这一功能。
ArcMap 是一款地理信息系统类工具，它通常会通过上下文环境下的信息引导，来帮助用户了解技巧。
复杂的应用程序，通常会有很多功能是分散的而非线性的，不同的功能组合起来可以实现特定的功能。在这类工具当中，用户日常可能也不是很确切知道最终的目标是什么，而需要通过数据分析来逐步推进，同时，在知道确切目标的情况下，也应该可以遵循不同的路径灵活地达成目标。
设计师这些应用的时候，设计师应该避免使用固定、唯一、 僵化的实现路径，迫使用户必循严格按照某一固定路径来做事情。一方面，允许用户跳过某个步骤，或者回滚到更早的路径，另一方面，允许用户遵循不同的方式和路径来达成目标。
比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。
复杂的任务，通常意味着它需要很多步骤，不同的环节，而在实际的应用场景中，某个分析步骤耗费几个小时甚至几天，都是有可能的。在高度复杂的现实生活中，某个步骤可能会换人接手，可能会因为硬件、 网络等问题而暂停甚至丢失，这也意味着「可追溯性」是很重要的。
所以，在这样的复杂应用当中，应该允许用户在使用过程中，可以便捷清晰地记录、保存、 导出内容和记录，允许用户中断，中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。
在决策建模软件TreeAge 当中，用户可以在分析和建模过程中进行开放式的注释，可以后续在底部快速访问这些笔记。
复杂的应用通常还会面临一个状况，就是工具本身的不足，用户需要在多个工作空间上使用工具和内容的时候，它需要具备切换的功能。对于不具备的功能，应用程序应该允许使用第三方的应用来作为补充。
比如当软件不支持某个操作的时候，应该允许用户从线上的其他数据库中获取并导出数据来使用，可以依托外部文档作为支持，允许用户在应用中做注释和评论。
减轻工作负担的一个要点，是尽量使用通用的API、接口和标准，尽量兼容行业标准软件，比如 Excel、Powerpoint ，尽量使用标准格式，等等。
微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能，非常方便
复杂应用通常旨在保持泛用性。使用场景多样，多种不同的功能，一家汽车生产厂家，可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是，这种泛用性的另外一面，就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户，而后者用到的功能很小概率会被基础用户用到。
所以，设计者需要在不降低功能性的情况下，基于应用场景、 用户需求来进行简化和优化，在保持功能完整易用的前提之下，降低复杂度和混乱度。
分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后，再呈现特定功能，是有效的设计方法。
即使降低了混乱度，在复杂应用当中，信息量可能依然是过载的。通常，对于这种情况可以通过区分信息层级的主次来进行快速的区分，不过，从交互上来说，这可能依然不够。
对于诸如控制面板一样的界面，用户可能需要时刻查看面板上的信息，需要了解次级信息但是又不能离开界面，这就体现出主次信息之间的过渡呈现的重要性了。
一般而言，使用类似与悬停显示的方式，能够比较柔和地将次级信息呈现出来，允许用户查看详细的定量数据。下面这个案例当中就是，悬停显示更多次级信息。
复杂应用通常在界面上包含由大量的信息，而这个时候关键性的数据如果不在视觉上做突出显示，会被用户错过。通过视觉区分、提示警报的方式，让用户及时注意到，才有可能规避可能存在的问题。
值得注意的是，让关键信息和元素凸显的方式，并不一定非得是使用鲜艳的色彩和较粗的字体，简单的放大呈现，使用图形化的元素辅助提示，或者是提供足够的留白都可以达到目的，就像下面的案例一样：
复杂的应用多种多样，支持的服务和功能也千差万别，但是无论如何呈现，此类复杂应用的设计都是非常挑战设计师的设计功底的，需要设计师了解业务，了解用户，并且能够通过设计更好地提供服务。
文章来源：优设(陈子木) 作者：Kate Kaplan
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
放眼过去大量同质化或跟风的网站风格，空有一副美观的皮囊，却少了些什么，为何不交互创新一下呢？具有创意的交互必然能使一副黑白的画面瞬间点亮色彩。
你可能想有创意的交互能为网页带来什么？
挺多的，我举例：一个连微动效都没有的静态网页你进去后也就看见的这样，那么如果这个网页进去时，内容会有入场动效，你是不是马上能感觉到这个网站有点儿东西，要抄起鼠标探索一番？换言之，好的交互创意甚至能让你产生心流模式，你通过鼠标到处点击，页面上不断的给出动画效果，然后你收获惊喜，最终促使你进行更多的尝试。
好了，说多了，就是希望为更多设计师提供设计思路或执行概念，帮助大家找到更多的创意灵感。
Web 端交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互，个别网站的产品可能会涉及麦克风声音采集或摄像头应用。
1. 鼠标允许的交互
现在的鼠标可以支持更多功能，但是通常来讲需要严格的考虑兼容问题，所以仅以鼠标左右键滚轮滚动以及光标映射选取为主；
以上所有交互都可以根据实际场景进行设定，不过鉴于用户习惯，一般不会用到快速的连击交互以及右键的双击、长按或拖拽，这不符合交互手势的舒适度或简化易用的初衷。
2. 键盘交互支持
键盘支持大量的按键交互，除去一些全局的功能按键和组合快捷键，在网页交互应用中常见的还可以分为以下几种情况；
在应用键盘按键功能的时候，除去那些作用明确大众悉知的按键功能，其他的按键操作应该保证界面上有指引有提示。
组合的交互动作常配合不能简单直接完成的任务，这里的组合指有两个及以上交互动作完成的类型，复杂的交互动作尽量少用，且尽可能的为用户提供操作指引，若非必要，费力不讨好；
组合动作主要分为以上 9 类，鼠标拖拽的组合动作通常会细分来应对界面场景的应用，例如通过横向拖拽将一个竖放的圆柱物体旋转起来，那么垂直的拖拽必然是没办法转动起来的，而且左右还会决定拖拽的方向。
简单来讲，无非就是看得见的元素、听得见的元素。听得见的元素无非就一个声音，讲深一点，也就涉及一些音效的交互控制。而看得见的元素则会相对丰富很多，如果再次细分的话还可以归为以下几种情况；
1. 常见变化形式
位置变化、透明度变化、角度变化、大小变化、形状变化、颜色变化、翻转效果、特效变化
web 端的交互概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量，页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。
页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态（鼠标短暂的点击时属于“选择时”，若长按有内容影响则属于“运行时”），因此在网页交互的过程中，我们需要考虑好这三种完整的状态时呈现形式，另外在考虑补充合适的动效进行过滤或信息反馈。归根到底网页的交互概念就是控制内容呈现罢了，这是网页价值的本质。
web 端内容呈现的结构应该算是页面交互的范畴吧，其实上网页的页面并不只是长页面的形式，实际上会有更多种结构可用。因为电脑显示器更大的缘故，web 端结构上比移动端更加灵活，同时根据产品的性质也有需要考虑移动端响应式的需求，一般来讲这些页面结构可以分为以下六类：
网页的组成区块通常分为五大类型，即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类，也有个别是通过点击弹出的导航。内容布局则更是五花八门了，是板式与技巧的呈现了。
个别产品本身也是创意的一部分，有一些可能界面交互平平，但是却有着魔性或引人关注的产品内容。而这里整理了些比较典型的视觉展现形式和交互创意形式的案例，这些方式通常可以根据产品的定位与特色进行组合设计和开发呈现，让你的网站更富有创意和较好的视觉体验；
1. 几何色块搭配文案
色块搭配标题文案，简约大气有视觉冲击力，再也不用担心没有图片或插画素材了
2. 精美大图背景搭配内容
采用精美大图背景搭配文案或交互控件，精美的图片本身就很抢眼，再搭配标题大字，瞬间就使得页面有冲击感有层次，常见于游戏官网或活动专题
3. 关联插画或图标搭配文案
采用小范围的插画或图标来表达服务或产品优势，搭配文案说明，风格统一精致耐看。常见于服务描述或产品说明模块应用
4. 留白大图搭配文案
将某个产品或其他元素放大显示再结合极简的排版说明，有较好的视觉冲击力和产品凸显效果，同时留白保证呼吸感和减少视觉噪点，使得用户能够更加专注产品图
5. 动态的背景或微动效装饰
应用动态背景或微动效的元素装饰，有较好的内容吸引力或氛围渲染力，可以展现更多的产品细节或丰富画面层次感，不过也比较考验视频本身或动效装饰自身质量
6. 点线面装饰与文案排版
应用简单点线面元素去装饰界面，再结合有对比有版式的文案排版。页面简洁美观，适合简约干净少图的页面模块
7. 栅格化应用与板式跳跃率
应用栅格化与版式跳跃率，使界面整体充满平面艺术，富有节奏感且不显凌乱。在日本的网页设计上有大量应用
9. 充满个性的视觉装扮
采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格，来打造符合产品的特殊视觉效果，为网页印象加分，提升品牌感染力
10. 引用 3D 视觉装饰
运用 3D 视觉搭建页面场景，常见的有 3D 图标、3D 动效或 3D 产品大图等，有较强画面立体感和表达能力，视觉新颖让人眼前一亮，也是当前的一种视觉趋势效果
11. 产品元素或其他元素来填充背景
将品牌元素进行弱化处理后作为背景墙，凸显个性和丰富画面，结合微动效可以有进一步的效果增强
12. 矩形陈列或卡片陈列
将内容模块用矩形陈列显示或卡片陈列，Win10 菜单或 WP 系统的手机桌面有较好体现，特点是干净利落模块分明，适合同类模块较多的场景进行排列显示
13. 极致的简约
采用极简的方式呈现内容核心，可以是一张图一段字、一段文案排版等，总之就这么简单的搞定了
14. 魔幻或神秘感界面呈现
如示例网址一样，魔幻且神秘，有着迷之吸引力和趣味性，不过需要慎用，比较恶搞。而适当给出一些神秘感，可以使得页面内容更有吸引力，用户更愿意去点击尝试。
主要是关于页面内容元素交互时的创意形式讲解，这里不对交互动效或特效细节进行过多说明，因为怎么去动又或者用什么样的特效去呈现实在数不清说不完，如果有兴趣可以参考一下文中的精选案例视频整理和提供的一些体验合集地址。
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. 镜头交互
通过摄像头授权获取镜头画面进行交互，通常是一些镜头滤镜效果或者增强现实技术结合做交互创意，网页上少见新颖。
找对方法去创新很重要！在实际工作中，我们不仅要衡量界面设计与交互效果，同时还要兼顾开发资源、实现难度以及产品架构本身考虑。对此我们也需要了解一下开发实现的概念，之后再研究如何进行创新设计。
在进行创意设计时不考虑开发，那不是自嗨就是对开发耍流氓。静态界面开发或简易的切换效果并不难。而代码层的图形变化效果、仿物理效果(例如反弹、律动、重力等效果)、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 验证
首先通过内部自测优化，再根据产品类型考虑是否找利益相关者进行可用性测试验证，或者找专家做顾问。之后再进行下一步的优化完善即可
也许讲了这么多，你还是不知道前面诸多的创意方式怎么用，没关系，这里我进行了简单的整理对标，希望你看完还有救！
网站本身即视为一个产品，一个产品的风格定向一定是由产品本身属性或用户属性影响，了解产品定位或目标用户也是重要的环节，这些环节可以制定更符合产品或用户的信息框架或视觉表现。通常我们可以将网站类型分为企业官网、品牌官网、营销官网、门户网站、论坛相关、综合网站六大类，这里简单讲一下这些网站定位与视觉特征；
通常一个网页怎么设计版式、如何调整布局结构、调整基础交互，都是需要参考原型的信息框架。信息框架中的元素情况会直接影响视觉输入和基本交互。如信息框架中有很多图，那么设计时就需要考虑是平铺直叙还是轮播显示。
信息框架设计学习：《Web 信息框架》
那么关于不同的信息架构有什么好的布局方法吗？这一点通过内容的搭配形式，整理了几种方式供参考：
文の处理：
通常一个纯文本的界面是很难设计的，因为过于单调，对此可采用
图の处理：
纯图片的形式不多见，但是不能否定，一般可能是图本身有一定的信息传达，或者是图片浏览类型的服务
图文の处理：
少量图文配套是比较好处理的，手法也比较多，根据配套数量情况还可以调换位置形成错位区分模块
视频の处理：
视频的处理分为自动跟手动控制，自动即作为背景自动播放，可进行简单的切换，手动则要注意相关按钮布局和显示遮挡问题
图文视频の混合：
通常图文视频混合的情况很少见，视觉焦点不好控制，其中视频做背景是最好处理的，但内容信息不易过多
三维の处理：
因为是三维的场景，所以需要考虑到三维场景下的视角形式与操作方式
按钮の处理：
按钮是网页中最常见的交互控件，是页面扭转或功能启用的基础
控件の处理：
控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大
结合信息框架对不同元素类型进行视觉设计调整后，再对页面内容的基本交互进行考虑，例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。
基本交互发力点
鼠标经过反馈：常见且重要的交互方式，通过鼠标经过时反馈选中状态或提示相关信息
按钮点击反馈：在鼠标点击后，按钮或控件的颜色形状变换效果，用于反馈点击成功，实现眼手体验一致
按钮长按效果：长按状态的动效示意，通过对长按目标加动画响应进度或持续的状态，而非单纯的变色或样式切换
完善 Loading 动画：如点击上传下载更新等，出现对应进度条或 loading 动画帮助用户完善体感
内容入出场动效：页面切换加载或滑动页面后，内容采取动效有序的进入场景定格，而非生硬的静态切换
多内容轮播应用：对 Banner 或其他多个内容展现，进行轮播交互完善和时间细节控制
锦上添花交互发力点
按钮切换动画：通过 icon 的路径动画表达按钮切换，而非直接的图标对换，更具个性和视觉观赏性
鼠标跟踪动画：可以适当的做一些鼠标跟踪事件，让一些背景或界面元素跟随鼠标律动起来，增强互动
特殊滚轮联动效果：通过鼠标滚动联动其他元素进行交互变化，来呈现更有创意的场景切换或内容展示
内容穿插滚动：将内容分层控制，页面滚动时将元素固定或交替显示，产生穿梭感提升界面层次
响应式展开收起：主要用于二级或下级内容的自动展开，由鼠标经过自动展开并聚焦，减少用户操作
结合音视频媒体控制：在页面中植入音视频内容通过按键或鼠标进行交互或切换，打造互动性更高的媒体传达
趣味转场或页面加载：对页面转场或加载深度优化。采取更有创意的方式或动画来过渡，让视觉体验提升亿点点
内容或窗口抖动报错：合理采用抖动效果进行报错反馈或特殊场景应用，使呆板提示更灵动
可 DIY 的颜色或图形：提供主题或模块的 DIY 空间，满足用户编辑符合自己喜好的视觉效果
结合产品的场景创意
打造个性的模块呈现方式：结合产品的应用场景打造有个性的呈现方式
打造游戏互动的呈现：将有剧情有故事的产品或内容游戏化，可以让用户趣味互动更加深刻
打造一镜到底的转场：结合鼠标滚轮联动做镜头创意，突出产品细节或内容呈现
打造三维或全景场景：根据产品属性考虑用三维的场景来增强互动与突出产品
打造仪式感交互：利用视觉和交互变化来制作符合产品的应用效果，实现仪式感线上体验
有声交互：比较少见，视产品情况应用，可以使声音产生互动或视觉影响
镜头交互：适合有镜头针对性应用的产品采用，需要授权，要做好隐私说明
补充按钮交互触发：在场景更为复杂交互需求更多后，进行的常规解决方法
补充按键与鼠标配合交互：适合按键触发且需要鼠标控制变量的复杂交互
文章来源：优设 作者：泡泡bing
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com