好了，分享到这，文件已打包好
转载请注明：学UI网》我翻遍全网，这11种高级感样机建议下载
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。
对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。
折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。
例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。
平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。
通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。
饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:
1）不要超过5-7片，保持简单
2）可以将额外的最小段分组到“其他”切片
如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。
将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。
在确定饼片秩序时，有几种常用的方法:
1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列
2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列
同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。
饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。
不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:
1）3D元素，明暗面
2）阴影、渐变和其他扭曲的多彩色
3）斑马图案，过多的网格线
4）过度装饰，斜体，粗体或衬线字体
颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:
一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。
连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。
发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。
看看一个方便的工具- [ColorBrewer]，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
本文翻译已获得作者的正式授权（授权截图如下）
原文地址：medium
作者：Taras Bakusevych
译文地址：彩云译设计（公众号）
译者：彩云Sky
转载请注明：学UI网》天呐，国外大佬总结的这20条B端图表设计原则，简直太实用了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：如今，用户增长越来越难，面对这个情况，本文作者分析了用户增长的两大底层逻辑和两大保障，提出了合格的增长闭环思考和一套切实可行的用户增长方法论。推荐对用户增长感兴趣的童鞋们阅读。
增长越来越重要了！
因为增长越来越难。
我们当初的尝鲜劲头已经过了，各种手机app，装了卸，卸了装，早已找到自己所爱。
产品研发门槛持续降低，各路神仙分分入局，同质化严重，消费者眼花缭乱，一片红海。
这一两年，我一直在做增长，今天分享一些对增长的思考。
增长的底层逻辑到底是啥？
做一次新客户活动，拉动更多的新用户；优化一个注册流程，提升用户注册转化率；通过邀请裂变活动，以老带新的方式，获取新客户。
诸如此类，都是我们常见的获得用户增长的方式。这些增长动作的背后，有什么更深层次的逻辑？
我认为，增长的底层逻辑有两个：精细化、规模化。
基于精细化经营的能力，用相同的模式，获得更多新用户。
精细和规模，相辅相成，相得益彰，这样才能启动增长飞轮。
没有两大保障，增长只是空中楼阁。
在实施增长的过程中，如果要说什么条件是必不可少。
我认为，这两个至关重要：数据支撑和多元角色。
增长涉及方方面面，包括产品、运营、设计、研发等等，有条件的话，可以组建一个完善的团队；没有足够的资源，增长负责人也应该具备各方面的能力经验。
合格的增长闭环思考应该是怎么样的？
着手做增长工作，应该沿着什么样的思路去开展？经过一两年的尝试、总结，下面这条思路，我觉得你可以直接拿去用。
很多人的增长思路是：
用户-问题（需求）-场景-方案-数据
其实这样是不够全面和科学的：
个人拙见，增长的闭环思考应该是：
数据-主要矛盾-用户-问题（需求）-场景-方案-数据
经过上述的分析，然后才是找到目标用户，将用户的问题转化为需求，在什么样的场景触发给用户，对应的解决方案是什么。
6步可复用的增长实战方法。
从用户生命周期经营角度，我将目标增长的人群划分为：新用户、存量用户、流失用户。下面我将按照这三个纬度，讲一讲具体的增长方法。
拉新户，是增长最主要的目标人群。
第一步，通过数据了解下当前业务情况。
1）整体情况
每日新增客户趋势图、累计用户数据趋势图、新客户转化人数、新客户转化金额、新客户转化率等等，了解业务大盘情况。
2）主要流量来源
了解整体情况后，接下来需要对流量端进行分析。
新客户主要流量来自那些渠道？自然流量、老带新、活动拉新、专题项目新增等等，把新客户增加的来源划分清楚，看看各个模块的占比和趋势变化情况。
3）转化情况
对上述流量来源，再进一步分析，各个模块转化情况。每天有多少流量进入，有多少新户注册成功，有多少用户成功转化。
完成上述三步，对整体业务情况，有了大致的了解。
第二步，找出最主要的矛盾。
通过公式拆解法：新客户=渠道流量（渠道1+渠道2+…+渠道n）*转化率（渠道1+渠道2+…+渠道n）
通过数据，你可以重点看几个关键点：
要想提升新增用户，无非从两个角度突破：1是流量大的，提高转化率；2是转化率高的，提升流量。
找出对应渠道，分析流量不高或者转化率不高的原因，为什么是现在这样的情况？
从多方面找原因（mece法则/金字塔）：是渠道流量不行？还是渠道费用太高？是活动设计页面不行？还是本身用户质量就很差？
各个原因逐一研究，找出主要矛盾。
第三步，分析用户特征。
勾勒用户画像：年龄、性别占比、城市、受教育程度、年收入水平、消费习惯等等，对这些用户有画像有大致的判断后，再从身边的朋友，真实接触了解这一类人群。
第四步，剖析用户的需求。
从已知出发，已有的用户为什么会用平台的产品，他们最关心产品什么样的核心功能、服务？这些用户，是否有渠道上特征的差异？这些用户，新开户7天之内，浏览最多、使用最多的是什么功能及页面？
由此做一轮最基础的推演，新用户也会有类似的关注，再增加渠道上的特征。
第五步，找到用户使用产品的触发场景。
比如，打车平台，一般是用户遇到公共交通工具用不了或者是没有覆盖到的地方或者是用户赶时间。
经常下雨天去坐公交就比较麻烦，很多人会选择打车。一个广告平台，根据天气情况情况，给用户推送打车平台以及打车券，那转化率就会很高。
所以，剖析完用户需求之后，找到触发用户使用平台功能的场景，能更高效率地获取新用户。
第六步，提出解决方案。
通过上面分析了，到了最后一步：解决主要矛盾的具体方案。
如果是转化率不高：那就优化转化路径、转化钩子。
这里的设计是要结合用户需求、用户触发场景进行：需求、触发、行动。
给用户一个行动的理由。
比如电商平台：给福利–新人福利券+限时领取倒计时；
又比如：描述用后效果–盖中盖广告，腰不酸了腿不疼了，一口气上五楼，嘿，不费劲儿～
存量用户增长关注的是用户往更忠诚的阶层成长；流失用户的增长则是用户回流。
这两个用户人群，做增长的思路跟新户是完全一样。我就不一一阐述了。讲一些不一样的侧重点：
1）存量用户做增长
从两个方面：横向和纵向两条线着手。
横向方面：让用户更多地体验平台上的其他功能，属于业务的交叉经营。
纵向方面：让用户更深度、更高频次地体验平台的核心功能，比如充会员，充更多的钱；用微信支付，用的频次更多。
2）流失用户做增长
用户的回捞思路，可以根据用户历史的行为制定策略。
A 用户历史有体验某个产品/功能：可以用功能更新/产品上新的方式，进行召回用户；
B 用户之前是活动转化的：可以用回归福利礼包的方式，触达用户；
C用户之前没转化，那用户就像是新用户一样，可以参考新户转化的策略做回流。
上述的三个方法，并不是完全固定的，可以交替着使用，分析数据那个有效就用那个。
总结下：本次的分享讲了增长的底层逻辑、两大保障、闭环思考流程以及完整地演绎了新户做增长的分析流程。
每一个模块，都是有不少的门道的，文章仅仅是点到即止。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
怎样迅速感知自己产品的用户体验好不好呢？来看看用户体验设计指南之SUS系统可用性量表，用过都说好呦~
SUS 全称 System Usability Scale ，系统可用性量表。SUS最初是Brooke于1986年编制，可以科学地量化用户体验，用于完成一系列任务场景后，对产品或系统整体宏观的感知可用性测量。
翻译过后可以得到下面的中文表，参与者在使用产品后对每个题目下面打钩来对产品进行5点评分。（小伙伴们可自行保存）
SUS提供整体可用性评估度量，由10个题目组成，奇数项为正面陈述，偶数项为反面陈述。
第4，5，10三项构成的子量表为“有效性”（Effectiveness）&“易学性”（Learnability） ；第2，3，7，8四项构成的子量表为“使用效率”（Use Efficiency）&“可用性”（Usability）；第1，6，9三项构成子量表“满意度”（Satisfaction）。
SUS适用范围广泛，产品新旧版本迭代之间对比，同类型竞品之间对比，同一产品不同终端之间对比均可使用。可采用线上线下问卷调研的方式，简单高效的采集真实用户反馈。避免在初期过早的关注细节。
当收集好用户问卷反馈过后，步骤如下：
1. 对于奇数序号的问题，将其得分减1；（比如第1题分数为4，得分为4-1=3分）
2. 对于偶数序号的问题，将其得分被5减去；（比如第2题分数为3，得分为5-3=2分）
3. 将所有问题最后的得分加在一起，然后乘以2.5；（每个题目的得分范围记为0~4，最大值为40，SUS可用性得分的范围在0~100，换算后乘以2.5）
4. 计算出的结果即为产品的SUS可用性得分。
Tips 注意事项：
1. 填写之前不要进行总结或讨论；
2. 应当要求用户快速完成各个题目，不要过多思考；
3. 第二题和第六题对于参与者可能难以理解，需要解释清楚；
4. 如果用户因为某些原因无法完成其中某个题目，就视为用户在该题上选择了中间值。
SUS分数等级与百分等级的区别：
我将其翻译过后得到中文表，可以大体上感知得出的SUS分数对应的用户可接受范围。
更加细化的SUS用户感知，可参照SUS分数曲线分级范围表：
注意到这里SUS分数等级与百分等级的区别。对照SUS分数曲线分级范围表，如果你的SUS分数为68，说明你的产品比市面上50%的产品可用性要好。也就是说这个产品的用户体验算是合格了，表明需要进行较小的改进。50%中值点对应SUS分数68。（（59-41）/ （71-65）= 3 故中值点为65+10/3≈68 ，68分是均值，因此对应百分比是50%。）
1. 量表公开免费，题目简单，只需参与者打分，实施便捷，操作简单；
2. 适用范围广泛，产品初期测试验证，竞品分析，新旧版本对比等等；
3. 研究证明SUS在样本量有限时，可以最快达到效果，可信度系数高；
4. 快速宏观有效区分可用系统（产品）和不可用系统（产品），避免在初期过早的关注细节；
5. 当团队内产生分歧时，SUS让更多的人员参与代替少数意见领袖说了算的形式，定量不追求定性。
6. 小样本量时依然呈现高度的内部一致性，产生真实可靠的反馈结果。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称 1s : 动画时间 linear : 动画以何种运行轨迹完成一个周期 infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称 1s : 动画时间 linear : 动画以何种运行轨迹完成一个周期 infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在色相环上采用邻近色搭配，颜色多以明亮的高饱和度为主，使得页面更具时尚活泼感。
邻近/互补色在网页的运用
邻近色在APP中的运用
混合质感图标中的运用
通过简单的几何图形，主要是圆形、正方形、三角形等；加上混合模式的质感，给人一种高级感。加上透明度、叠加的光影，简单的几何图形背景呈现出空间感。图片上通过运用一个单色渐变，搭配方形的重复色彩叠加，给我的视觉感受是有层次的、立体的空间感。
几何图形在海报中的运用
色彩叠加在APP上的运用
这样的几何图形我们在设计网站上经常可以看到，通过重复几何图形的组合加上混合模式的叠加，在设计上别具一格。同时让我们的设计多一种表现手法也增加我们的行业竞争力。
色彩叠加还可以运用在引导页、闪屏页面。通过叠加、柔和的过渡，整体呈现的视觉效果还是很时尚、符合主流的设计趋势。
明亮的颜色搭配混合模式和不透明度，出现出另外一种效果。
google 家的品牌升级，我们也看到了最新的趋势，运用 google 经典的颜色，搭配混合模式的渐变，同时具有品牌识别性。
1.选择深色的颜色（#0A00BC），画一个圆角，填充蓝色渐变背景。
2.画一个圆，填充红色的渐变，模式选择提亮的效果，剪贴蒙板在圆角背景上。
3.画第二个大圆，填充红色的渐变，模式选择提亮，透明度调到70%，剪贴蒙板在圆角背景上。
4.画第三个圆，填充红色-黄色的渐变，模式选择正常，透明度调到85%，剪贴蒙板在圆角背景上
6.我们看到示例图交叉处是黄色渐变，把第三个和四个圆进行复制，选择交集，生成一个交叉的图形，把这个交叉的图形改为黄色渐变，模式改为加暗。
7.最后一步，右下角的高亮，通过蓝色径向渐变，调整到我们满意的效果即可，模式选择变亮，透明度90%。
原文地址：我们的设计日记（公众号）
作者：sky
转载请注明：学UI网》苹果Google都在用的设计趋势，简直太绚丽了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
以前我看罗振宇的一个节目，听他谈过一个个人观点，具体原话我记不清了，但大概意思差不多是：得到APP里有一个活动或者功能特别重要的时候，他会要求设计师把入口做得足够特别，格格不入或者丑一些都没关系，但要保证用户一眼就可以看到它，并且产生足够的好奇心和想去点击的欲望。
罗振宇在这里用到的设计手法就是“对比”，而这种手法背后的理论支撑，就是我们今天要探讨的—— 冯·雷斯托夫效应（Von Restorff Effect）。
1933年，德国医生海德维希·冯·雷斯托夫（Hedwig von Restorff）进行了一系列记忆研究实验，通过多组、多次的对比实验发现了一个人类记忆规律：在一组物品中，人们总是很容易关注和记住某个最特别的东西。比如说一组物品，用聚光灯照射其中一个，那么相比其他未被照射的物品，人们会更容易注意并记住它。
也就是说该实验发现并证明了：越特别的事物，越容易抢夺人们的注意力，并形成记忆点。这种人类行为、记忆现象后来以实验者的名字被命名为了「冯·雷斯托夫效应」。「冯·雷斯托夫效应」实际是隶属于人类行为学、心理学方面的研究结果，历史上过了许久才慢慢地被运用于美学设计中来。
从该效应被正式确立命名之后，基于它，后面还有许多科研学者对这种行为、记忆现象展开了更深入的研究，剖析了「冯·雷斯托夫效应」的优缺点，并衍生出了许多其他的理论和学术说。
我个人认为其中比较重要，且对设计同行们有较大意义的两个是：
我认为这两个衍生结论对设计人员最有意义的原因是，它们分别对应了 Material Design “一个页面只专注一件事情” 的设计原则 和 罗宾·威廉姆斯书中所说 “要对比就对比得足够夸张” 的观点。
我知道许多的产品设计者总是希望自己页面上的每一个功能都被用户看到，但你必须学会划分优先级，请把「冯·雷斯托夫效应」作用在真正重要且必须的事情上。
从前面我的反复提及可以看出，「冯·雷斯托夫效应」会影响到人们的注意力和记忆两个方面。拆解了这两点，就比较容易理解应该如何将这个设计理论运用在项目之中了。
作用一：对注意力的影响作用
开头我提到的罗振宇的观点中，他就是利用了「冯·雷斯托夫效应」对注意力的影响作用。
其实这一手法在UI设计中经常被使用，不论出于商业价值考虑还是功能考虑，设计师们总是知道用视觉差异来吸引用户的注意力。上案例：
我们看到，得到和汽车之家APP在常规的排版设计中遵循统一、和谐的视觉语言，压低了次要功能的视觉层级，再通过脱离常规视觉语言的设计，抓取用户注意力，吸引用户关注，从而助力营销和商业目标。
所以在设计中，和谐、统一固然是基本，但正是因为有序，才让设计师能够发挥“无序”的功效和威力。
作用二：对记忆力的影响作用
你会记住生命中最极致快乐和最极致痛苦的时刻，因为它比起其他的日子足够特别，这也是「冯·雷斯托夫效应」作祟。别忘了「冯·雷斯托夫效应」最开始本就是起源于行为和心理学。
让特殊的日子被纪念，百度Doodle不就是做着这样有趣并且有益于文化传播的事吗？
Doodle的出现，已经是将「冯·雷斯托夫效应」作用于产品温度和连接用户情感的层面上了，传递了品牌调性与理念。
这一点也可以用于打造自身产品，不论是从功能、交互还是视觉，构建产品的差异，从同质化严重的互联网现状中脱颖出来，就可以让用户深刻地记住你。例如马云的双十一，例如为了躲开马云而发展出来的垂直电商…
反例一：太多的突出=没突出
前面我提到一句“正是因为有序，才让设计师能够发挥‘无序’的功效和威力”，所以越有序的内容中出现一个越不和谐的元素，才能把「冯·雷斯托夫效应」发挥得越极致。
看一个案例：以下两个页面，哪一个你更能关注到标签栏中的“摇现金”功能？毋庸置疑的答案是页面2。
因为页面1中金刚区和功能瓷片区抢走了用户非常多的视觉关注，图标的用色在饱和度和对比度上也比较一致，我很难关注到标签栏中的活动。而页面2中“摇现金”图标的画风、色彩饱和度都与其他元素不一致，我虽然眼睛盯着金刚区，但我的余光一直在被标签栏疯狂拉扯。
当然我这里只是为了论证太多的突出=没突出的论点，拼多多也许有自己的商业和功能考量。该案例在单一论点中进行描述，只是想告诉大家：要发挥「冯·雷斯托夫效应」的作用，前提就是先构建“平庸的和谐”。不要想着每一个元素和功能都要突出，都突出=都不突出。
反例二：本末倒置
受“危险按钮”的陶冶，曾经设计师们都喜欢给负向情绪操作非常高的视觉层级。例如退出登录。
实际上设计者是希望告知用户此操作危险，视觉层面却仿佛在疯狂地暗示用户“看我！然后点我”。虽然近些年在移动端，这样的矛盾设计已经越来越少了。但这个“危险按钮”也真实地困惑了我很久…与其告诉用户“这个操作很难危险”，为何不直接让用户尽量忽视掉这个操作呢…
我至今没有探索和查找到相关文献来解释为何“危险按钮”视觉层级这么高。但AntDesigng规定“危险按钮”一般还需要进行二次确认操作，些许解开了一点我的担心。
但单从「冯·雷斯托夫效应」来看，这样的设计确实是有些本末倒置。在日常的设计当中，也应该极力避免。
原文地址：UCD耍家（公众号）
作者：Howiet
转载请注明：学UI网》UI&UE实用方法论 | 做设计为什么需要“对比” :「冯·雷斯托夫效应」
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
场景举例 1：实例名
包括任务名、文件名、表名、系统名等等。
典型案例：完整字段如下：
company_sales_record_20150116
company_sales_record_20150117
缩略结果：
场景举例 2：系列名称
开头统一的系列长名称，通过后半部分来区分的字段。
典型案例：阿里集团的 BU 完整名称如下：
口碑-本地生活事业部-北方大区-北方运营
口碑-本地生活事业部-七星大区-东南运营
缩略结果：
原文地址：Ant_Design（站酷）
作者： 林叶
转载请注明：学UI网》B 类产品设计细节：文本缩略
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com