今天和大家一起温习下2021年占据主导的8个UI和UX趋势，干货建议提前收藏！
没人能够预测未来会发生什么，但是在数字世界中，趋势确实存在于设计师的圈子中，并且在有规律的演化中。大家可以已经看腻了不少趋势研判文章，但是，适当总结一下当年的趋势，把这个时间线拉长，你会觉得非常好玩。从移动端设计刚开始流行的时代，到现在，设计趋势都发生了哪些变化呢？它们是不是又会返祖，复古？周而复始？咱们不得而知。
虽然2021年已经过去一半，不过，今天咱们还是先Review一下2021年正在流行的几个设计趋势，加深一下印象吧！
当然，各位设计师，趋势仅仅是一种现象，想要做的出圈，与众不同，我们必须站在趋势之上，做出自己的创新，这样才能在千篇一律的设计中独当一面。
3D 图形越来越多地出现在 Web 和移动界面中。毫无疑问，将各种 3d 图形应用到移动和 Web 界面是一项相当大的挑战，需要良好的技能和艺术眼光才行。在我们的 UI/UX 设计中添加 3D 元素有很多好处：
ByMako Tsereteli
玻璃拟态是大多人更喜欢的最新UI设计趋势，它引人注目且色彩缤纷，这种趋势兼顾透明度和层次感。玻璃拟态设计给人以磨砂玻璃的感觉，近一段最受欢迎的趋势。这种风格深受苹果在 2013 年推出的 IOS 7 和 windows vista 中首次引入的类似概念的影响。在许多情况下，如果使用得当，Glassmorphism 可以使网站和应用程序对用户更具吸引力。
ByMahmudul Hasan Manik
深色主题现在已经成为应用必备的界面了。手机的白色界面可能对我们的眼睛造成更多的刺激，这就是所有应用程序和网站都加入了暗黑模式设计的原因。暗模式有一些我们应该遵循的特定规则。深色主题的主要优点是在弱光环境中具有更好的可读性。作为 UI 和 UX 设计师，我们应该明白它的主要作用，它主要是减少了用户的眼睛疲劳并提高了夜间的可读性。
ByJulius
色彩理论知识在每个 UI 和 UX 设计中都至关重要。正确使用颜色对于为您的客户创造正面形象很重要，这就是颜色在 UI 和 UX 设计中扮演重要角色的原因。大多数 UI 设计师都使用鲜艳的色彩来将用户的注意力集中在重要元素上，并使我们的设计令人难忘。下图分别为单色调和双色调界面。
By Resuscitation
包豪斯的风格通常被描述为艺术和手工艺运动与现代主义的结合。包豪斯设计几乎没有装饰，注重平衡的形式和抽象的形状。今天的 UI 和 UX 设计，也可以理解为包豪斯的复兴。包豪斯设计在UI设计上的核心，就是将设计简化为必要的功能，使其美观和轻松，以及精心制作每一个小细节。
包豪斯设计几乎没有装饰，注重平衡的形式和抽象的形状。今天的 UI 和 UX 设计也是包豪斯风格的复兴表现之一。
By Beto Garza “Helbetico”
在当今的设计中，白色背景越来越受到大家的欢迎。了解色彩心理学是创建配色的一个关键方面，这在数字设计中效果很好。吸引用户的最佳方式是通过“色块”平衡单色背景色与亮色，以突出数据中的重要内容或者异常提示部分。少即是多，当您在 UI设计中使用较少的颜色时，这将对用户更具吸引力和亮点。
By Resuscitation
插图是用户界面中更直观的视觉阐述，也一直是UI设计中长盛不衰的“趋势”之一。动画插图，在与用户交互过程中为UI注入了强大的生命力。它帮助用户获得更立体的反馈，为创建更生动的微交互创造了条件。
By Rachelizmarvel
极简主义是 UI 设计中使用最多的“风格”之一，它有助于改善用户体验。在我们的 UI 设计开始极简设计之前，有必要了解术语“极简”的含义以及为什么极简在 ui 中很重要。下面是极简主义的特征：
By Shakib
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：人人都是产品经理 作者：Tzw_n
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
效果图如下
//图例组件
legend: {
top: 'center',
right: 30,
data: [],
width: "auto",
itemWidth: 10, // 小方块尺寸
itemHeight: 10,
textStyle: {
color:'#90CCFF',
lineHeight:20,
// 通过rich自定义尺寸，加宽度使百分比及数值各自对齐
rich:{
a:{
width:100,
align:'left'
},
b:{
width:40,
align:'right'
}
}
},
orient: 'vertical', // 竖向排列
// 通过formatte自定义格式
// 因为formatter的参数里只有name一个参数，所以需要通过获取的数据匹配显示
// 这里的optionData是获取到的数据，格式为
// optionData:[
// { value: 47.01, name: "水果" },
// { value: 31.67, name: "蔬菜" },
// { value: 12.51, name: "禽畜" },
// { value: 8.24, name: "禽蛋" },
// { value: 7.27, name: "水产品" },
// { value: 6.32, name: "其他" }
// ],
formatter: (name) => {
var total = 0;
var tarValue;
this.optionData.forEach((item,i) => {
total += Number(item.value)
if (item.name == name) {
tarValue = Number(item.value ? item.value : 0)
}
});
var percent = ((tarValue / total) * 100).toFixed(2)
let arr = [
'{a|'+name+" : "+percent+'%}'+'{b|'+tarValue+'张}'
]
return arr
}
}
自定义legend的方式就是这样，遇到格式不同的可以参考上面的方式自定义
单独定义echarts中每个图例的样式,自定义图例的点击方法
//用不同样式的图例用数组写对应图例的样式
legend:[{
top: "15%",
right: "24%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微软雅黑"
},
itemWidth: 27,
itemHeight: 16,
data:[{
name: "农药",
icon: "circle"
},{
name: "LOL",
icon: "rect"
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微软雅黑"
},
itemWidth: 33,
itemHeight: 16,
data:[{
name: "农药+LOL",
icon: "image:///soyking/static/image/echarts/merge.png" //引用自定义的图片
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微软雅黑"
},
data:["\n","\n","\n","农药占比","LOL占比"]
}],
结果:
自定义图例的方法 (点击图例，显示图例的选中结果)
var bar = echarts.init(document.getElementById("barDiv"));
//自定义图例的方法
bar.on("legendselectchanged",function(obj){
//获取图例选择的结果
var selected = obj.selected;
for(var i in selected){
alert(selected[i]);
}
});
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
代码如下
var data = [ { name: "一次检验数/条", value: 150 }, { name: "多次检验数/条", value: 80 } ]; var option = { legend: { show: true, left: "center", top: "245", itemHeight: 13, itemWidth: 13, itemGap: 35, icon: "circle", data: data, formatter: function(name) { var total = 0; var target; var value; for (let i = 0, l = data.length; i < l; i++) { value = data[i].value; total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = ["{a|" + name + "}", "{b|" + target + "}"]; return arr.join("\n"); }, textStyle: { rich: { a: { color: "#B6B6B6", verticalAlign: "top", align: "center", fontSize: 12, padding: [0, 0, 28, 0] }, b: { align: "left", fontSize: 18, padding: [0, 10, 10, 0], lineHeight: 25, color: "#181818" } } } },
echarts legend 自定义图例
legend: {
selectedMode: true,
top: 0,
right: 0,
orient: 'vertical', // itemWidth: 24, // itemHeight: 2, textStyle: {
fontFamily: 'ABBvoiceCNSG-Regular',
fontSize: 12,
}, // icon: 'rect', data: [
{
name:"高严重等级报警",
icon:'rect',
},
{
name:"低严重等级报警",
icon: 'rect' },
{
name:"健康度",
icon: 'line' }
]
},
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：相信大家都听说过马斯洛需求层次理论，那么把它应用到产品需求层次设计中，会是怎样的场景呢？作者两个方面给我们分享了如何运用该金字塔进行产品设计，我们一起来看看吧。
美国心理学家亚伯拉罕·马斯洛 (Abraham Maslow)在 1943 年的论文《人类动机理论》中提出了人类需求的心理层次理论。用金字塔中的五层模型来表示人类的需求。从下到上，需求分别是生理、安全、社交需求、尊重和自我实现。
该理论认为，人类在转向更高级的需求之前，会先满足其基本需求。例如：一个饥寒交迫的人不会集中时间和资源寻求伴侣（社交需求），因为他首先满足生存需求（生理上的）。
随着时间的推移，马斯洛的理论被改编并应用于许多新领域。在产品设计领域，2010 年史蒂文·布拉德利 (Steven Bradley)提出了一套有用且实用的规则即“需求设计层次”。
用于创建新产品和评估现有产品的设计。与原始理论一样，必须首先满足设计的基本需求才能进入下一阶段。Bradley 理论的五个层次是功能性、可靠性、可用性、熟练性和创造力。
根据该金字塔原理，可以考量产品在对应的每个阶段要满足的功能要求。
产品设计最基本但最关键的部分是其功能。打车软件、聊天应用甚至一个杯子是否实现了其主要功能？如果没有，那么进入其他发展阶段就没有什么意义了。
例如，一个水杯如果不能盛水，不能用来饮用，那么它设计和包装是否漂亮就无关紧要。
它是无用的，它对消费者就毫无价值。随着产品的核心功能变得更加丰富，这个过程也会变得更加复杂，需要更多考量。
正如图表的比例所表明的，产品团队精力应该专注于完成主要流程和功能。实践方法：明确产品的定位和用户画像，始终深入研究你的客户期望你的产品用来解决什么问题。可以充分地进行调研。例如：现场调研、用户访谈、利益相关者访谈等。
可靠性与功能性是同样重要的设计基础。用户能否相信该产品能100% 正常工作？如果用户不相信你的产品在他每次需要时都能正常工作，他们是否愿意购买使用？
在创建可靠的产品时，关键是彻底的测试。实践方法：进行可用性测试并确保给用户能提供及时帮助。
可用性需求强调用户轻松使用你的产品的能力。用户能否以最少的指导弄清楚如何使用你的产品及其每个功能？例如，一款图片编辑的应用裁剪和保存功能不直观，那这款产品可能很难被认可。
实践方法：可参考尼尔森可用性原则的方法。即：系统状态的可见性、系统与现实世界相匹配、用户控制与自由、一致性与标准化、防错原则、减少认知负担、使用灵活性和效率优先、简约设计、提供帮助文档。
熟练程度是评价真正好的设计的一个标准。为了满足这一层要求，设计师需要问问自己产品的设计是否有助于用户更好地使用该产品。
例如：一款针对老年人设计的社交软件除了基础的聊天功能外，它应该提供关于该产品的诸多视频、图文类教程，来引导用户更好的使用产品。
实践方法：要时常思考“这个产品还能做什么？”。它是否会引导用户发现一种新的更好的做事方式？从某种意义上说，它是进步的吗？通过与设备的每次交互，用户是否会发现更多有关其功能的信息？
证明了产品能够可靠地履行其核心职责后，下一步是通过创新来满足其他需求。以跑鞋为例，除了功能属性外还可以展示其稀缺性、款式、地位等附加功能。
实践方法：分析用户心理、行为、痛点和动机。发挥创意，寻找创造性的方法满足用户的需求，为用户创造峰值体验。
以下是来自medium的延伸案例：原文作者：(NATHAN TENDIDO)布拉德利对马斯洛需求层次的改编有助于我们来理解为什么某些设计比其他设计更好。
为了应用 Bradley 对需求层次的翻译，我将使用三个搜索引擎（Google、Bing 和 Ask）作为示例来找出明天的天气。
（1）功能——它有效吗？
金字塔的底部和最高层是其整个总和中最不有趣但最基础的部分。没有效果的产品有什么用？由于我们正在评估搜索引擎，我们可以测试三个搜索产品是否可以正常搜索并得到有效结果。
毫无疑问这三个搜索引擎都运行良好
（2）可靠性——它在我需要的时候工作吗？
这一步和第一步同样重要。决定了我对该产品是否信任。幸运的是，这三个引擎在我需要的时候依旧正常工作，即使是在凌晨。
（3）可用性——我能弄清楚如何让它工作吗？
好的设计可以通过强化主要的视觉元素对用户进行引导。这三个搜索引擎都将搜索栏作为主页上最突出的部分。
谷歌搜索栏
必应搜索栏
Ask搜索栏
比较视觉浏览轨迹
当返回搜索结果时，清晰的视觉层次感有助于用户获取他们想要查找的信息。如果没有清晰的视觉层次结构，用户可能很难完成任务。Ask的搜索结果布局与 Google 和 Bing 相比，明显就多了一层操作，更不易找到想要的结果。
（4）熟练程度——它能告诉我如何让它更好地工作吗？
熟练程度是好的设计与优秀设计的区别所在。熟练程度要求设计可以帮助用户从头到尾成为专家。
三个引擎都使用了联想搜索，以便更高效地引导用户到达目标。虽然谷歌提供了更好的质量建议，但 Bing 的搜索栏在网页上更高，让用户可以看到更多的建议，而不会被 iPad 键盘挡住。
Ask 在这方面则有所欠缺。Google 和 Bing 还提供了其他搜索分类选项。
（5）创造力——该产品对我还有什么用？
在这一点上，这些产品已经完成了它们的基本功能，基础功能外还包含了更多友好的设计。通常主要是针对用户未来的访问进行个性化设置或提供工作空间以完成更多工作。
Google 提供了多种工作区工具，而 Bing 实际上奖励使用其网站的用户！
虽然上述案例并不是要抨击一个网站，但是当 Bradley 的需求设计层次结构被用作通过判断的标准时，上述三种产品之间的差异变得更突出。
这并不是说 Ask 是一个糟糕的设计。在某些地方，Google 看起来与 Ask 目前的表现完全一样。这三个网站都可以完成搜索引擎的基本功能。
然而，当把Ask放在 Google 和 Bing 旁边对比时，Ask 设计中的劣势变得更加明显。
如上所示，Bradley 的设计层次结构是思考大多数产品设计的有用过程。
然而，就像马斯洛的原始理论也有质疑一样。
马斯洛的等级制度也难以解释诸如“饥饿的艺术家”这样一个人为了追求更高的需要而忽视低级需求的情况。几乎没有证据表明人们有动力一次只满足一个需求水平，除非在需求之间存在冲突的情况下。
布拉德利的理论也不完美。对需求设计层次的批评包括以下问题：设计是否必须可靠才能可用？不能同时满足这两个条件吗？
例如：有些搜索引擎可以满足基础的搜索功能，然而在基础之上拓展的低级广告引导体验是好的吗？设计需求的层次结构绝不是完美的，有可能你参考此结构所做的设计相较之前还要糟糕得多。
然而，更完美产品需要超越这种规范去进一步研究。例如：可以将更精细级别添加到金字塔中。还需要设计者进行更多地思考。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：随着城市化进程加快，城市的体量在不断增长，随之而来的社区形态和管理也在日趋复杂。智慧社区能否解决社区管理之痛呢？本文作者对此进行了分析，与你分享。
社区是城市在小区域范围内的一个缩影。因为两者之间的体系结构和发展模式存在一定程度的相似和关联，所以在智慧城市的建设路径上，以智慧社区为切口，做好小区域范围的智慧管理成为当下市场和社会的一个风口，也是治理切口。
在中国，随着城市化进程加快，城市的体量在不断增长，随之而来的社区形态和管理也在日趋复杂。对此，暨南大学教授、华南城市研究会会长胡刚认为，建设智慧社区是作为当下社区建设的重要内容，至少应该包含三方面内容：
一是智慧信息，包括社区信息、住户信息等基本数据的采集；
二是智慧服务，比如在此次疫情下，部分社区实行封闭管理，居民可以在网上买菜，然后有人帮他们送到门口这样的服务就很重要。还包括社区的选举，平时大家都上班，不容易聚集在一起，这时候就需要有这样的网络选举投票服务；
三是虚拟社区，居民可以在虚拟社区聊天、共享资源、处理事务等。
由此可见，智慧社区的建设重点主要有三方面，信息感知、服务延伸以及虚拟社区。在腾讯、华为、旷视、海康威视等服务厂商的解决方案里，都能看到类似的思路和落脚点。但是如果说真正做好这三点内容的社区平台，或许还属微信。
为什么要这么说呢？
在这里需要理清一点，对于智慧社区建设，大部分人认为应该是房地产商、科技公司或者安防厂商的事情，但是实际上并不是，社区群众也在参与其中的建设，以微信为支点的数字化社区正在加速形成。
值得一提的，以微信为支点推动数字化社区的成功构建并不能归功于腾讯，而是社区群众。
这是一个自发的、自上而下的、无意识的社会行为，微信只是一个“被民众借用”的工具或者说平台。
微信作为移动互联网时代国内最大的社交软件和聚合平台，很多服务和模式实际上已经逐步跳脱出了它原本的范畴，通过用户自发形成的社群成为了很多新概念的实践场所。就以智慧社区来说，或许很多厂商还没想明白要如何切入庞大的人群体系，实际上社区群众已经在微信群上做到了胡教授所提及的三大内容：
首先是信息感知。尽管这样面向小区住户的信息采集不全面、不系统，但是通过微信群，大部分社区确实在人员信息收集、人员联络和信息传达方面实现了很多跨越。过去需要挨家挨户上门、打电话通知的内容，在短期内都能实现双向传递和感知。
广西某小区物业人员张春花（化名）告诉“智能相对论”，“从疫情爆发到现在组织打疫苗，微信群都帮了我们很多的忙，解决了大部分的联络组织工作。只要把通知、链接发到群里，艾特大伙，基本都能通知到，实在是没有反馈的再通过电话或上门的形式传达一下就行。包括现在谁没打疫苗、第一针、第二针，只要在群里吆喝一下，都能快速的组织起来……”
其次是智慧服务。实际上，对于张春花所在小区的业主来说，智慧服务是什么，他们还搞不清，但是比起以前，现在通过微信群的方式，很多服务确实方便了许多。陈先生（业主）提到，“当时疫情那会儿，物业就是在微信群上来帮各家各户统计买菜信息、送菜什么的，很方便。现在有什么社区投票、活动举办的事情，我们基本都是在微信上来参与和讨论。”
最后是虚拟社区。这对于微信群来说，基本没有什么异议。本来作为一个社交平台，微信给用户带来的就是一个虚拟社区的概念。现在各家各户有什么事情需要帮忙、或是信息需要分享的话，基本上都会通过业主群来进行发布和传达，平常没事也会聚在一起聊聊天、发发红包活络一下。
张春花表示：“小区的老人们经常在群里讨论跳舞、下棋什么的，要是遇到下雨天，也都会在群里唠唠嗑，念叨念叨，看着他们这样互动，有种回到以前住在村里的感觉……。”微信群对于他们来说，俨然成了另一个线上的社区。
可以说，微信群的存在很好的将社区的人连接了起来，为智慧社区的构建提供了一个基本的雏形。这种基于群众力量自发形成的新社群，是现在很多小区管理推进的常态。
很显然，作为一个自下而上的自发行为，社群的形成在一定程度上解决了很多社区管理的问题，但也存在诸多槽点，限制了这种模式的进一步发展。
1. 社群不系统、不全面，缺乏必要的顶层设计。
自发形成的社群本质就是片面的，它无法构成一个系统、全面的体系，很难在智慧社区的建设上发挥统领全局的作用。以具体反馈来看，虽然业主群可以覆盖大部分的住户，但是并不是全部，仍旧存在“漏网之鱼”，而且在信息管理上，社区也将处于一个非常被动的局面，住户可以选择提供信息，也可以选择不提供信息，很难规范住户的信息条例。
这也意味着，未来的智慧社区建设在信息感知上需要化被动为主动，借助更加有效的设备或模式来提高信息感知能力。正是看到了这种进阶的需求，所以科技厂商和硬件厂商此前在做智慧社区的时候，大多会从顶层切入，从全局出发来进行社区改造。
比如旷视科技目前提出的以人脸为ID的AI方案就是这样——用户经过小区门禁刷脸进入小区，系统可以自动识别并做好人员管理，使得进出小区的人员数据都能得到全面感知。基于人员数据的高度识别，智慧社区在人员管理方案，智能停车、智能物业，智能地产、安防、零售等方面都能获取相应的数据支持，从整体上把控社区的管理工作。
2. 社群做好了“人”的连接工作，但是没能做好“物”的数字化升级。
社群的另一个本质是人的聚集，对于业主群来说，它只是做好了人群的沟通、连接工作，但是在整个社区范围内，仅是做好人的工作，还不足以构建一个高效、便捷的智慧社区，仍需要在“物”的基础上实现数字化升级，比如监控、快递、消防、电梯等等场景。
“人”与“物”构成智慧社区建设的两条路径，对比来看，海康威视等硬件厂商更倾向于后者的升级——通过智能硬件，比如监控摄像头、门禁设备、对讲设备等的支撑，海康威视能在多个社区场景里进行数字化升级，来实现社区智慧化的表现。
比如，有了智能摄像头，社区的管理系统可以对小区的可疑人员进行预警、对电梯内进入电瓶车等危险行为予以提示、对高空抛物等违法行为提供24小时监管，等等。物理设备的数字化升级对于智慧社区的搭建尤为关键，可以说等同于社区智慧化的基础，这是微信群无法实现的。
3. 去中心化的社群无法接轨智慧城市建设。
社群是一个去中心化的概念，它由业主自发的创建，也可能会因为各种人为原因崩塌，比如广告过多、管理不善、业主矛盾等等。这种不稳定的模式很难进一步拓展应用，只能作为一个辅助性的管理。
特别是对于智慧社区的构建而言，未来的城市智慧化需要建立在一个又一个的智慧社区之上，因此要考虑到智慧社区与智慧城市的协同发展就必须要有一个稳定的系统予以支持。对此，我们可以看到中国电信在打造智慧社区的过程中，积极推动社区系统接轨电力、水力、燃气、养老等政务服务系统，使得小区人员可以足不出户的享受到购电、购气、通信缴费等服务，也确保了社区数据连接城市系统，实现双向互利。
那么，对于智慧社区的建设而言，社群存在诸多缺陷，很难进一步推动我国数字化建设，需要更多服务厂商从大局出发，做好顶层设计来构建一个全面、高效的智慧社区。
尽管如此，但是对于智慧社区的构建来说，并不是一个极端地行为，它不需要推到一个模式，再树立另一个模式。反之，不同的路径在当前复杂的建设进程上都应该被重视，在融合中发挥更加显著的价值。
简单来说，群众的社群路线和厂商的技术路线不冲突。在当前的现实情况下，社区的管理和人员联络需要微信支持，这是毋容置疑的。前者是“人”的数字化，后者是“物”的数字化，如何把这两方面结合起来发挥双重价值，才是智慧社区的未来所在。
因此，“智能相对论”认为，在智慧社区的构建上，腾讯是具有显著优势的。在滨海泰达智慧社区的建设上，腾讯就展现了这一优势——通过投入老人关爱门磁，依托物联网技术，利用实时感应传输功能打通网格化平台，泰达街道能做到对独居老年人等特殊人群居家情况的动态掌握，一旦出现异常情况，社区网格员便可通过微信接收到实时异常告警，精准服务相关人群。
简单来说，腾讯手握微信，在“人”的数字化上具有明显的优势，其未来只需要做好“物”的数字化，就能进一步推动智慧社区的构建。但这并不意味着腾讯会比其他厂商少做一个层面的事情，相反的，如何继续拓展微信的社群优势需要腾讯做更进一步的构思和验证。社群对于智慧社区建设的想象力还没有触碰到天花板。
在湖北宜昌，企业微信正在实现治理规范化，成为当地网格化管理向互联网拓展的新载体，也成为了社区居民互助、交流、自治的微载体。
具体来看，社区网格员通过企业微信建立统一的社群，网格员形象统一，有官方认证的身份，形成“中心化”管理的雏形。同时，基于企业微信和微信互通的能力，社区普通居民使用微信即可与网格员联系，也可在群中反映噪音、污染、故障等各种问题。而除了在群内沟通，网格员进行跟进调解外，还可以把相应的问题通过企业微信工作台提交工单，转给横向的相关部门，如城管、环保、公安等部门处理。
简单来说，在企业微信的支持，社群有了官方人员的介入逐步形成了一个更加系统和有效的社区管理与治理同步的体系。这对于腾讯而言，就是在“人”的数字化上发挥出了真正的信息优势。
对于其他厂商而言，这并非是不可超越的。中国电信的短信通知同样可行，只是相比微信缺乏了一点社群交互的基础，但在连接人的功能上并不输给微信。因此，对于一众服务厂商来说，若能准确地认识到“人”与“物”的双重数字化需求，也就能快速地把握智慧社区的建设思路，来打造出一个全面智慧化的社区。
如今，新小区的搭建、“老旧改”的推行，智慧社区依旧是一个没有边界的蓝海市场，据数据显示，2020年中国智慧社区产业规模达到5000亿，近3-5年仍将以至少40%的比例增长。而市场上，更多的厂商仍在专注于“物”的智慧化和数字化，对于连接人的工作似乎都丢给了微信，但伴随着智慧社区的需求愈发增长，或许其他的厂商也会逐渐把目光转向社群的搭建和经营之上。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。
摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
JS中的对象是属性和行为的结合体，其中属性是对象的静态特征，行为又称方法，是对象的动态特征。
JavaScript中的对象主要分为三大类：
定义非空对象
// 非空对象： var 对象名 = { 属性名： 值, ... 方法名: function([参数]){ 方法体语句; } ... }
var p1 = { color: '黑色',//给对象添加属性 weight: '188g',//属性之间用逗号隔开 screenSize: 6.5, call: function(name){//给对象添加方法 console.log("打出电话："+name); }, sendMassage: function(msg){ console.log("发出的信息是："+msg); }, playVideo: function(){ console.log("播放视频"); }, playMusic: function(){ console.log("播放音乐"); } } console.log("手机颜色:"+p1['color']);//也可以使用 对象['属性']来输出属性值 console.log("手机重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("张三");//调用对象的发方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1);
使用new Object()创建对象
var p = new Object(); // 创建一个空对象p
p2.name = '刘备'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//调用对象的方法
可以使用构造函数来创建对象：
语法： new 构造函数名( )
function Student(name,sex,age){ this.name = name;//这里的this指向的是构造函数新创建的对象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓别："+this.sex) console.log("年龄："+this.age) } } var s1 = new Student('乔峰','男',28);//s1为构造函数创建的新对象 即实例 s1.show(); var s2 = new Student('段誉','男',23); s2.show();
注意："构造函数"可以有参数，也可以没有参数，如果没有参数小括号可以省略
遍历对象的属性和方法：使用for…in循环
for(var 变量名 in 对象名){ 循环语句 }
function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓别："+this.sex) console.log("年龄："+this.age) } } // s2是要遍历的对象 var s2 = new Student('段誉','男',23); for(var k in s2){ console.log(k);//依次输出 name sex age show() console.log(s2[k]);//依次输出 段誉 男 23 }
in运算符
判断成员(属性)在对象中是否存在，存在返回true;不存在返回false。
JavaScript提供了很多常用的内置对象，包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。
Math对象：用来对数字进行与数学相关的运算，不需要实例化对象，可以直接使用其静态属性和静态方法.
Math对象:不需要实例化
Math.PI:算数常量PI Math.abs(x):返回x的绝对值
Math.max(args...):返回最大数
Math.min(args...):返回最小数
Math.pow(x,y):返回x的y次方
Math.sqrt(x):返回x的算术平方根
Math.random():返回0.0到1.0之间的随机数
Math.round(x):返回最接近x的整数
Math.floor(x):返回一个小于等于x 并且与它最接近的整数
Math.ceil(x):返回一个大于等于x 并且与它最接近的整数
Date对象：需要使用new Date()实例化对象才能使用，创建一个对象 Date()是一个构造函数，可以给该构造函数传递参数生成一个日期对象。
// 1.创建一个Date对象 没有参数 var date1 = new Date(); console.log(date1); // 2.传入年 月 日 时 分 秒 创建一个指定日期时间的Date对象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.传入一个日期和时间字符串创建一个Date对象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date对象距离1970年1月1日午夜之间的毫秒数 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021
数组：是一些类型相同的数据的集合，它和普通的对象功能类似，也是用来存储一些值，数组是使用数字来作为索引操作内部的元素。
数组的创建
var arr=[]//创建一个空数组
var arr = new Array();//定义一个空数组
判断一个对象是不是数组的两种方法：
var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue
关于数组的其他方法之前的文章要有详细介绍，这里不多做解释。
String对象:字符串对象，必须使用new String()来创建
字符串常用方法
- charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 连接多个字符串 - charCodeAt(n) 返回n位置上的ASCII码 - split('分隔符') 将字符串按给定的分隔符 转换成字符串数组 - substr(start,length) 从start开始提取length个字符构成一个新串 - substring(from,to) 提取from和to之间的字符串构成一个新串 - toLowerCase() 将串中的大写字符转换成小写 不影响原字符串 返回一个新字符串 - toUpperCase() 将串中的所有小写转换成大写 不影响原字符串 返回一个新字符串 - replace(str1,str2) 使用str2替换字符串中的str1 返回替换结果 不影响原字符串
// 输入一个由字母组成的字符串,统计串中每个字母出现的次数 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26个小写字母各自出现的次数 var upper = new Array(26);// 存放26个大写字母各自出现的次数 // 初始化两个数组 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper);
/* 输入一个十进制整数和一个数制（2、8、16）将该十进制整数转换成
对应的数值格式输出
取余法：
m=15 k=8
m%k 将余数存放在数组中
*/ var m = parseInt(prompt('请输入一个整数：')); var k = parseInt(prompt('请输入一个数制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放数制转换的结果 var i = 0; while(m!=0){//对m进行数制转换 将余数放在arr数组里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('转换的结果为：'+str);
值类型: 简单的数据类型(字符串,数值型,布尔型,undefined,null)
引用类型: 复杂数据类型(对象) 变量中保存的是引用的地址
注意： 引用类型的特点是，变量中保存的仅仅是一个引用的地址，当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向了同一个对象的引用。
下面对内存中的栈和堆进行分析
栈(stack)：会自动分配内存空间，会自动释放，简单数据类型存放到栈里面。
堆(heap)：动态分配的内存，大小不定也不会自动释放，复杂数据类型存放到堆里面。
由此可见存放在堆内存中的对象，变量实际保存的是一个指针，这个指针指向另一个位置，通过这个指针来寻找堆中存储的对象的属性和值，并且每个空间大小不一样，要根据情况开进行特定的分配。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
转自csdn博客
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.随着互联网的发展，页面传递给后台有太多需要验证的东西，尽管后端的代码是能够实现对传递过来的数据进行校验和判断的，但是这样的话无疑是加重了后台程序的工作任务量，于是广大互联网工作人员迫切需要有一种新的办法/语言能够实现这样的效果，于是js也就是在这样的一个大的时代背景下诞生的
2.js最开始的时候是不叫js而是叫scrpit语言，他们也想将这个前景光明的明日之星卖给微软，但是微软没有买下，在种种机缘巧合之后被Sun公司收购了，为了让其与java语言走的近点 ，更是改名为JavaScript简称为js
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成
1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
1.弱类型语言：在书写的时候不去做明确的数据类型的限定 例如 var a=3.14 var b=“998”
2.运行在浏览器端的解释执行性语言(js—>node.js可以运行在服务器上)
3.基于对象的编程语言
4.跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
5.动态性：JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页（Home Page）中执行了某种操作所产生的动作，就称为“事件”（Event）。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
可以简单的理解为：只要用户发出动作，js就会产生响应
6.安全性：JavaScript是一种安全性语言，它不直接允许访问本地的硬盘，并不能直接将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
小结：js现在的用途
1）作用于浏览器端帮助提升用户的体验度
2 ) 可以用来编写游戏脚本
3）可以被构建成各种组件(node.js,React.js，vue.js, Jquery)
<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*弹出对话框*/ </script> </body> </html>
小结：1.js在页面内使用的时候必须要写在<script>标签内
2.js代码书写的时候不用分号标识一行编程语句的结束
3.在js代码中xxx():此时表明这是一个函数
4.alert():以弹窗的形式将括号内的内容展示出来
JavaScript： 是一个脚本语言。它是一个轻量级，但功能强大的编程语言
1.数据类型：虽然JavaScript在书写校验上不去区分数据的类型，但是并不意味着是不区分数据类型，而是通过在浏览器中内置的JS解析器/引擎自动的去判断的
---------------------------------------------------------------------------------------------------------
1.1数字：
var a=12 //整数
var b=2.3 //浮点数或者说是小数型
var c=-0.5
友情提示：1）在js中变量名必须以字母或下划线（"_"）开头
2）变量可以包含数字、从 A 至 Z 的大小写字母
3）JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量
---------------------------------------------------------------------------------------------------------
1.2逻辑型或布尔型：
var a= true
var b=false
alert(a)
alert(b)
---------------------------------------------------------------------------------------------------------
1.3Undefined 和 null
Undefined： 用于存放 JavaScript 的 undefined 值，表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性
null:可以通过将变量的值设置为 null 来清空变量，其意思为空值
var a=""
var a=null
var a
alert(typeof(a))
---------------------------------------------------------------------------------------------------------
1.4字符串： 可以使用单引号或双引号
var firstName=“biil”
var familyName=‘Gates’
alert(firstName+familyName)
---------------------------------------------------------------------------------------------------------
1.5日期：
var myDate=new Date()
alert(myDate)/默认是格里尼形式的日期格式/
提示：Date是js中的一个内置的类
new：为类Date在内存中创建一个内存空间，进而实现实例化
补充：关键字：就是具有特殊含义的词
---------------------------------------------------------------------------------------------------------
1.6数组：是一种存放数据的容器，其一般可以存放多个，且需要知道其长度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
---------------------------------------------------------------------------------------------------------
注释：
单行注释：//
多行注释：/**/
扩展：注释的作用：
1）统一规范
2）注解，帮助理解/阅读代码
3）扯淡
---------------------------------------------------------------------------------------------------------
连接字符和转义字符：
连接字符：在js中场用+表示为连接字符
例如： var a=123
alert(‘变量a的值为：’+a)
转义字符：具有特殊含义的字符
\n 换行符 alert(“这是第一局 \n 这是第二句”)
\t 制表符 alert(“这是第一局 \t 这是第二句”)
---------------------------------------------------------------------------------------------------------
2.运算符：
2.1算术运算符： +， -， *， /， %，++，--
++：自动加1 例如 var a=12
alert(a++)
++在前：先计算再输出； ++在后：先输出再计算
–：自动减1，例如 var h=6
alert(a–)
---------------------------------------------------------------------------------------------------------
2.2关系运算符： > ，>=， <，<=, !=, ==,===
---------------------------------------------------------------------------------------------------------
2.3逻辑运算符：
与 ：&& ：全真为真，只要有一个假则为假
或 ：|| ：全假为假，只要有一个为真则为真
非 ：！ ：取相反的
JavaScript 可以通过不同的方式来输出数据：
1）使用 window.alert() 弹出警告框。
<html> <body> <h1>使用 window.alert() 弹出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html>
2）使用 document.write() 方法将内容写到 HTML 文档中。
<html> <body> <h1>我的第一个 Web 页面</h1> <script> document.write(123); </script> </body> </html>
3）使用 innerHTML 写入到 HTML 元素。
<html> <body> <h1>使用 innerHTML 写入到 HTML 元素</h1> <p id="demo">我的第一个段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
使用innerHTML方法，将前面定位到的选择器中的标签内容进行更改
4）使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html> <html> <body> <h1>使用 console.log() 写入到浏览器的控制台</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
console.log()会将想要输出的数据写到网页的控制台中显示
1）顺序语句：js默认是从上向下自动执行的
2）选择语句：
2.1）二路分支：
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
2.2）多路决策：
switch (表达式)
{
case 常量1 :
JavaScript语句;
break;
case 常量2 :
JavaScript语句;
break;
…
default :
JavaScript语句;
}
小结：switch…case…default不仅有多路决策的特性，还有穿透性
或者：
if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); }
3）循环语句：
for循环语句：
for (var i=0;i<10;i++) { alert("当前i的值为:"+i) }
while循环语句：
var i =1 while (i>5) { alert("当前i的值为："+i) i++; }
do…while循环：
var i=5 do { alert("执行了") i++; } while (i<5);
备注：for：知道次数的循环
while：>=0次的循环
do…while：>=1次的循环
break：语句用于跳出循环。
continue：用于跳过循环中的一个迭代。
1.typeof 操作符：可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
2.将数字转换为字符串
var a=123 //第一种方法，用String //var castResult=String(a) //第二种方法，用toString方法 var castResult2=a.toString() alert(typeof(castResult2))
3.将字符串转换为数字
var a="123" //用Number转换 var b=Number(a) //用parseInt方法将字符串强行转换为数字 //var b=parseInt(a) alert(typeof(b)) alert(b+998)
1.match():匹配字符串可用正则表达式
2.search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
var str = "abcderfha"; //返回查找到的下标位置 alert(str.search("er")) //返回 4 //查查找不到的时候返回-1 alert(str.search("zy"))//返回-1
3.replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "Hello World"; alert(str.replace("World","javascript"))//显示结果为Hello javascript
语法： function 函数名( ){
}
实例一
<html> <head> <meta charset="UTF-8"> <title>JS函数</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html>
定义一个求和函数，当点击求和按钮的时候将计算出传入的两个参数的和
ps：onclick单击事件
var xx =function(x,y){
alert(x+y)
}(23,34);
或
(function( o ){
alert(o)
})(“你好”)
实例二：
<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script>
创建一个数组：三种方式
1：常规方式
<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李宁" myCars[2]="安踏" alert(myCars[1]) </script>
2：简洁方式
<script type="text/javascript"> var myCars=new Array("nike","李宁","安踏"); alert(myCars[1]) </script>
3：字面方式
<script type="text/javascript"> var myCars=["nike","李宁","安踏"]; alert(myCars[1]) </script>
2：访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素
例如：var name=myCars[0];
3:数组的方法和属性
数组名.length ： 数组 中元素的数量
数组名.indexOf(“abc”)：“abc” 值在数组中的索引值
4：数组的排序
数组名.sort(); ：将数组按正序排序，但是是按照字符串的排序方式来排序，不管里面是数字还是什么都是按字符串的排序方式来排序
reverse（）：将一个数组中的元素的顺序反转，（即是将数组中的元素的头变成尾，尾变成了头，不是其他的）
扩展：将数组先用sort（）方法进行正序排序，在利用reverse（）方法反转，即可达成降序的目的
字符串中常用的属性和方法
str.length:获取字符串的长度
str.match("")：内容匹配
str.replace（）：替换内容
var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length;
1.对象：是属性和/方法的组合
属性：是对象所拥有的一组外观特征，一般为名词
方法：是对象可以执行的功能，一般为动词
例如：对象：汽车
属性：型号：法拉利 颜色：绿色
方法：前进、刹车、倒车
PS:三类已经存在的对象：
浏览器对象：BOM(已经存在于浏览器中的，到时候我们直接调用即可，例如Screen,History,Location,Navigator)
js脚本对象:数组，字符串，日期，Math等(JS语言中已经写好的具有某一些功能的对象，例如Array,Number,Math…)
HTML文档对象：DOM（已经存在于HTML中的，且已经写好了，用的时候可以直接调用即可，例如Document）
例如：
<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轿车"; this.fun=function(){alert("100km/h");} } var car1=new Car("奥迪","蓝色"); var car2=new Car("奔驰","绿色"); alert(car1.type); //轿车 car1.fun();//100km/h </script>
1.id选择器：通过 id 查找 HTML 元素，如果找到该元素，则该方法将以对象的形式返回该元素。
document.getElementById("id1").value //获取id为id1的标签中的value值
2.name选择器：通过name查找到HTML的元素，如果找到元素了，则会返回一个数组
var arr=document.getElementsByName("like") //将name为like的标签全部存入arr数组中
3.通过标签名找到 HTML 元素：
getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮，显示确认框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品订单");//弹出一个确定框，确定，返回true，取消返回false if(r==true){ x="提交成功，已确定" } else{ x="提交失败，已取消" }、 //抓取掉id为demo的标签，在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
点击确定，会在屏幕显示”提交成功，已确定“，点击取消，会在屏幕显示"提交失败，已取消"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮，显示输入框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("请输入你的名字","Hello"); //弹出对话框，可输入名字 //判断如果输入的不为空或者不是空字符串，则x被赋值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的开始，加油" } //抓取掉id为demo的标签，在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
点击确定以后则会将被赋值的x显示在屏幕中
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
转自csdn博客
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。
我非常理解这些读者的痛点，因为我在日常的工作中，也经常遇到一些难题。比如同样是滑动，但是些许参数的变化就会导致体验的天差地别，应该如何进行选择。再比如与开发同学沟通过程中如何准确描述自己想要的效果，让最后的结果不至于与自己的预期不一致。这些难题也促使我大量思考，大量体验各种产品的手势操作，希望能够从中总结出规律，让手势的设计与落地能够有理有据。现在经过一段时间的积累，我认为我在这方面可以讲一些能够帮助大家的内容了。不足之处，希望大家指正。今天给大家带来专栏的第一篇《交互手势全解析之位移类手势》。
手势作为图形界面与用户之间沟通的方式之一，在便携电子设备上大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式。
位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势，本篇文章主要讲解单指操作的位移类手势，多指的位移类手势（如捏合）将放到后续文章中讲解。
一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时，不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势，因为这三个维度的变化就会产生不同的变种，而且不同变种在体验上也存在很大差别，若不分场景随意使用，很容易就影响用户体验。那接下来我们首先了解一下这三个维度。
第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下。
绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。
相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。
比如在网易云音乐的播放页，左右滑动黑胶时，手指是施控物，黑胶是受控物，手指的横向位置变化和黑胶的横向位置变化是对应的，即绝对控制。上滑调出评论页时，评论页的位置和手指的位置没有对应关系，手指的上滑仅仅控制评论页是否出现，即相对控制。
与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。
但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如 iOS 的相机中，左右滑动切换拍摄模式，由于前后不同模式之间的页面框架变化较大，切换时会有过多元素的属性变化，如果使用绝对控制就会导致切换拖沓且混乱，使用相对控制就能避免这个问题。
定义
当我们使用手势控制某个受控物时，由于手势的某个属性（如手指位移）达到阈值，进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。
稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。
是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作轻扫。
以滑动切换抖音视频为例，当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后，下一条视频会往上移动一个固定的距离然后进入稳定状态，而不会出现停留在不完整的中间状态，如下图所示。
在 iOS 端的微信消息页左滑某条消息后会出现更多操作按钮，按钮会在手指滑动的距离达到阈值并松开后稳定在一个固定的大小，而不会停在类似下图左所示的混乱的中间状态。
在多内容选择的场景中，如果滑动与选中是绑定的话，一般需要使用稳定化效果。例如在 iOS 相机里选择滤镜时，滑动滤镜选项不但能够控制滤镜选项的位置，并且会自动选中一个位于中间位置的滤镜，位置的稳定化避免了被选中选项的不明确。
如果滑动与选中是分开的，比如美图秀秀的滤镜选项需要先滑动后选中，这种情况下稳定化效果不是必要的。
与效率的关系
不同的稳定化规则带给用户的体验差异是非常大的，最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解，稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。
比如在比较常见的 banner 切换功能中（下图左），无论手指位移和释放速度的值有多高，banner 只能切换并稳定到下一个，不能够一次切换多个 banner。而在网易云音乐的首页排行榜中，一次滑动能够切换多个内容卡片，我们可以说前者的稳定化效果比后者强。
拖拽和甩动虽然没有稳定化效果，但是也存在效率的高低。我们可以将其与轻扫放在一起做对比，如下图所示，拖拽、稳定化效果强的轻扫、稳定化效果弱的轻扫、甩动它们切换效率依次增加。
那么我们决定添加稳定化效果后，如何选择强弱程度呢？选择没有绝对的对错，整体来说主要考虑两点，业务诉求和用户诉求。例如在常见的 banner 切换中，banner 的总数量一般不会很多，业务的诉求是希望尽可能曝光每一个 banner，使感兴趣的用户进行消费，因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里，不同用户感兴趣的榜单是不同的，稳定化效果弱的轻扫可以方便用户单次滑动切换多个，快速切换到自己感兴趣的榜单的大概位置。
百度 App 的表情面板原本是左右轻扫浏览表情，在一次改版中改为了上下甩动浏览。主要目的之一就是为了提高浏览效率、降低非首屏表情的曝光难度。
微信视频号的改版是一个典型的案例，旧版的微信视频号的视频流并不是类似抖音那样的全屏化形式和轻扫手势（下图右），而是占据屏幕尺寸三分之一到二分之一之间的卡片形式（下图左），并且使用甩动而非轻扫。视频号问世初期优质内容匮乏，社交推荐算法不完善，贸然模仿抖音式的全屏化形式和轻扫手势的话，会导致用户浏览到劣质视频时负面感受被增强且切换效率变低，反之卡片形式加甩动手势给予了用户更自由的选择空间，提高了用户的切换效率，降低了负面体验。等到如今时机成熟，再从卡片形式和甩动手势换成全屏化形式和轻扫手势就势在必行了。
在某些场景，用户需要先通过高效的方式选择特定区域的内容，然后进入聚焦状态进行内容浏览和慢速的切换，此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图，在 iOS 的照片 App 中，先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置，点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。
触发时机
触发稳定化的时机可以分为释放前和释放后，不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时，手指位移达到阈值后，手指无需离开屏幕，稳定化即可被触发。如下图左，iOS 的相机滑动切换滤镜使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时，手指位移或释放速度达到阈值后，手指必须离开屏幕，稳定化才能被触发。如下图右，常见的 banner 切换。
释放前稳定化可以避免拖沓，增加切换效率，但是缺点是无法反悔回退且缺乏掌控感。反之，释放后稳定化可以反悔回退，掌控感强，但是缺点是比释放前稳定化拖沓了一些。
阈值是能够触发变化的最小值。比如当水的温度达到 100 度时就开始变成水蒸气，100 度就是一个阈值，温度是阈值类型。在手指与屏幕的交互中，手指在屏幕上的某个停留时间、位移、释放速度、点击次数等都可以成为一个阈值类型，达到相应阈值后就可以触发相应的变化，常见的变化有受控物的位置、大小、不透明度等，理论上变化可以是任意的。
在位移类手势中，通常会用到的阈值类型有手指位移和释放速度，手指位移是用户在手指触摸屏幕时的位置与之后某个时间手指位于屏幕的位置之间的距离，释放速度是用户的手指在屏幕表面进行位移后离开屏幕那一瞬间的速度。
市面上的 App 暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式，因为其不太符合常识。因此我们在设计位移类手势时，能够选择的阈值判定方式常见的有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。
当我们设计手势时，就需要考虑两者的区别。由于 ① 比 ② 增加了释放速度带来的额外移动距离，因此 ① 的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短，所以相对应的缺点就是易误操作和不精确。②就恰恰相反，由于不存在释放速度造成的不确定因素，它的优点是不易误操作和精确，缺点是低效。
甩动和拖拽之间的区别就在于阈值判定方式，甩动是 ① ，拖拽是 ② 。如下图，当在微信消息列表找相应的消息时，用户的诉求就是能够快速找到特定消息的位置，对特定消息的出现在屏幕的位置也没有特定要求，只要能够被手指点击到即可，因此选用甩动较为合适，但是对于调节音量、亮度这一类的操作，滑动的范围有限，因此用户对效率没有特别的要求，但是对于滑块位置的精确度有要求，因此选用拖拽是更为恰当的。
再举一个反例，在 Steam 移动端横滑首页的泳道卡片时（下图左），使用的手势是拖拽而不是甩动，浏览起来特别低效。更适合的做法应为甩动，会更符合此场景下的快速浏览的诉求，如下图右的豆瓣。
对于轻扫来说，使用哪种阈值判定方式有多种情况（如下图所示）。在本文中，根据阈值类型、稳定化效果以及控制方式的不同我将把轻扫分为 A-E 共 5 类（A-E 的命名方式仅存在于本文章，因此在向其他人传达时，尽量使用在后文我介绍的手势描述而不是类别名称，以便于对方理解。）。后续会为大家仔细举例讲解，大家现在仅了解一下即可。
当我们在刷抖音视频时使用的手势就是轻扫，是否滑动到下一条视频进行播放的判定方式是① 判定手指位移和释放速度满足任意一个即可，对应的手势类别是上面表格中的轻扫A。如下图所示，在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向位移大于半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式，因为既省力又便捷。
如果将阈值判定方式改为 ②仅判定手指位移，对应的手势类别是上面表格中的轻扫 B，并且位移的阈值设置得比较大的话，给用户带来的负面体验可能将是非常大的。比如下图中打开美图秀秀的短视频评论浮层后，想要下滑收起时，App 仅判定手指位移，而且这个位移阈值设置得比较大，对于希望通过快速滑动一小段距离收起浮层的用户来说体验很差。即使由于开发资源有限我们只能做到仅判定手指位移，我们也可以通过减少手指位移的阈值来降低负面体验。
但是某些场景下，②仅判定手指位移是更加合适的。比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页。这样处理的原因是在微信消息列表页，上下滑动浏览微信消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值的话，用户可能就极易在下滑消息列表时误操作，无意间打开小程序选择页。
因此，对于位移类手势，选用哪种阈值判断方式要依据用户使用场景和诉求，不能想当然地设计。
了解完三个基础维度后，我们再将其进行组合，从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势，我列举出了常见的 7 类，如下图所示，这 7 类基本涵盖了 95% 以上的场景，我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置，因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，无论释放时手指是否仍有速度，受控物都会立即停止移动。（下图的动态演示由 Principle 制作，观看会有些不太直观）
特点
精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果，拖拽适用于对操作精度要求高，对效率要求低的功能。
案例
在 iOS 设置中调节亮度时，在有限范围内，手指左右拖拽可以控制亮度变化。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指仍有速度，受控物将移动一段距离后才慢慢停止，移动的距离与释放速度呈正相关。若释放时手指速度为 0，则受控物立即停止移动。
特点
精确度低但效率高。由于阈值类型判定释放速度和手指位移，甩动适用于需要快速浏览较多内容的场景，如滚动浏览列表。
案例
在微信的消息列表页，使用甩动手势控制列表上下移动，若释放时仍有速度，列表将仍移动一段距离后才慢慢停止。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时的速度和手指位移有任意一个达到阈值，受控物将稳定在一个新位置。若释放速度和手指位移没有任何一个达到阈值，受控物将回到原位置。
特点
由于轻扫拥有稳定化效果，因此它能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性，就不一一赘述了。轻扫 A 与接下来要讲解的轻扫 B-E 的最大不同之处在于轻扫 A 的阈值类型为「释放速度和手指位移」，这让轻扫 A 与轻扫 B-E 有两点不同，一是轻扫 A 可以通过释放速度的快慢去控制内容的切换数量的多少，更加高效，二是轻扫 A 可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容，因此更加省力。
案例
在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向移动大概半个视频高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指位移达到阈值，受控物将稳定在一个新位置。若释放时手指位移没有达到阈值，受控物将回到原位置。
特点
轻扫 B 与轻扫 A 相比唯一的区别是阈值类型减少了释放速度的判定方式，这提高了触发切换的难度，使操作成本变高，但是在某些场景下，这也降低了误操作的概率。如下拉刷新等。
案例
比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页，这样处理的原因是在消息列表页上下滑动浏览消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值判定方式，用户可能就极易在下滑消息列表时误操作，无意间打开小程序页面。
因此，当页面已存在一个滑动操作的情况下，还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时，为了避免误操作，会将后者的手势设计为轻扫 B。
上文提到，轻扫 A 的阈值类型为判定「释放速度和手指位移」，轻扫 B 的阈值类型为仅判定「手指位移」，由于前者的实现成本比后者高，导致本应适合做成轻扫 A 的功能有时只能妥协做成轻扫 B，比如之前提到过的美图秀秀的短视频评论浮层案例，但我们也可以通过减少手指位移的阈值来降低负面体验，后文会讲解如何与开发同学沟通。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是受控物并不随着手指的控制而同步移动，仅当释放时手指位移达到阈值时，受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值，受控物位置则一直保持不变。
特点
上文讲到过释放后稳定化和相对控制的缺点，释放后稳定化比较拖沓，相对控制让用户缺乏掌控感。两者如果应用到了同一个手势（即轻扫 C ），就会导致用户在滑动屏幕时得不到任何反馈，用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作，整体的交互流程给用户一种滞后与延迟的感觉。
因此轻扫 C 与其他类别的轻扫相比存在劣势，但是它也存在很多的 App 的 H5 页面中，我的猜测是由于 H5 对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多，因此只能退而求其次选择轻扫 C 这个较差的方案，实际上在同样的应用场景中用轻扫 A 替换轻扫 C 可以带来更好的体验。
案例
下图左是 QQ 的个性装扮的 H5 页面，卡片的切换使用的就是轻扫 C，如果能够优化为轻扫 A 体验会更好，比如下图右的音街首页卡片的设计。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值，无需手指释放，受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值，无论是否释放，受控物位置则一直保持不变。
特点
相对控制的方式降低了用户的掌控感，释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时，我们不希望用户过于自由地操控对象之间的属性变化过程，并且牺牲掌控感从而增加单次的切换效率。
案例
比如 iOS 的相机中，左右滑动切换拍摄模式时，由于前后不同模式之间的页面框架变化较大，切换时会有不同元素的属性变化，如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓，使用相对控制和释放前稳定化就能避免这个问题。
特殊说明
上文我们讲到，通过轻扫手势 A-D 对受控物的绝对/相对控制都是存在于稳定化前，受控物一旦稳定化，就脱离了手指的控制，需要手指离开屏幕后再次接触屏幕开始下一次控制。
轻扫 E 的不同之处在于它可以在受控物稳定化后，仍然控制受控物朝着下一个节点稳定化，在每个节点之间切换时能够明显感觉到分段感，如下图案例所示。
由于轻扫 E 相对于轻扫 A-D 的特殊性，控制方式中的绝对控制和相对控制无法覆盖这个特殊现象，因此我们使用「多段相对控制」来命名轻扫 E 的这种特殊的控制方式。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，若手指位移达到阈值，无需手指释放，受控物就稳定在了一个新位置，但是此时手指还是仍然可以操控受控物继续移动的，并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。
特点
轻扫 E 适用于需要在多个对象之间快速切换和确认的场景，它的使用感觉很接近拖拽。如下图所示，我们可以这样理解，当被切换的对象数量接近于无穷大同时每个对象之间的距离接近无穷小时，轻扫 E 就可以视为拖拽。
案例
iOS 相机人像模式切换打光方式、微信的通讯录滑动字母索引导航，它们都使用轻扫 E 来满足多个对象之间快速切换和确认的需求。
了解完上述的维度和常用手势后，我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时，就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。
本案例是网易云音乐陌生人版一起听中的一个功能，一起听的双方在听歌过程中会收到彼此共同信息，比如听歌口味相似度、是否同城、都喜欢哪些歌手等，目的是为了增加可玩性和互动性、降低退出率，鼓励用户互相了解、提高一起听过程中的社交体验。
为了营造仪式感和避免信息过载，共同信息的展示方式设计为了一次只能看一条，进入浮层后默认展示最新的一条，可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态（如下图左），我们为其添加了释放后稳定化效果（如下图右），同时为了方便用户可以快速浏览旧的共同信息，这里使用的稳定化效果是较弱的，用户可以通过滑动一次切换多个共同信息。
由于需要满足用户快速浏览旧的共同信息的诉求，阈值类型选用了「判定手指位移和释放速度满足任意一个即可」，用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类，此手势为稳定化效果较弱的轻扫 A。
位移类手势的方向一般为上下或左右，但并不是一定要完全垂直或水平才能够触发手势。当上下滑动和左右滑动同时存在于一个页面时，默认会有一个容错角度，比如上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑，如下图所示。
但是有时开发同学出现失误，导致容错角度没有均分，例如下图中触发上滑和下滑的角度极小，导致用户在上下滑动时非常容易误操作为左滑和右滑。
云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（如下图 A，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（如下图 B ）。
因此，在验收阶段，除了上述的三个维度外，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，最好要切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才能够被发现。（下图素材来源于网络，侵删）
客户端的角度判定方式实际上是一个比较复杂的过程，上述的内容是简化的版本。后续将延展为一篇独立文章给大家仔细聊一聊。
上文讲到，基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别，是设计阶段一定要定义清楚的。但是除此之外，设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线？手指位移与受控物之间的位移的比率是多少呢？这些都是开发阶段不得不面对的。幸运的是，安卓和 iOS 有系统封装好的一套系统组件可以调用，操作系统自行解决了刚才讲到的细节问题，但是 H5 框架下是无法调用系统组件的，手势的各种细节都需要前端开发人员自己编写，难度较大，大部分情况只能实现一些比较简陋的效果，这也是为什么在很多 H5 框架下的界面滑动的体验比较差的原因。
由于信息不对称，与开发的沟通过程中，很容易出现理解偏差。比较常见的错误有：将甩动误解为轻扫 A，将轻扫 A 误解为轻扫 B 或甩动。如果造成效果达不到预期的情况，很多设计师不知道如何让开发同学修改，只能说“这个手势不丝滑，优化一下”，开发同学也是一头雾水，不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移，需要释放时的速度也能够触发跳转；这个位移的阈值太高了，滑动时很难触发跳转，需要把阈值改为 16pt ”类似这样准确的描述，就能够大大降低沟通成本，顺利验收。为了避免沟通出现问题，下面我将日常经验总结出现希望能够帮助到大家。
首先，一旦涉及到位移类手势，除了必要的文字描述外（可参考上述的手势定义的描述），最好给开发体验 demo 或者其他 App 上类似的效果，否则很容易产生理解偏差。各种 App 上的类似效果大家可以用本文的每个手势的案例给开发同学展示，但是 App 可能会更新，案例可能在未来某个时间就找不到了，所以我用 Principle 做了一个简易的基础 demo 集合，和我上述介绍的手势是对应的，大家可以拿着这个 demo 给开发同学演示大概的效果，也可以在这个 demo 源文件修改。
拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了，不需要我们给到额外的标注。但是对于轻扫，我们需要将细节定义清晰，下面将详细讲解。
1. 阈值类型
上文讲到，阈值类型一般有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。①的开发成本高于②。
如果我们选用轻扫的阈值类型是①，开发同学编写代码需要两个参数的阈值，分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2，例如下图的全屏短视频和 Banner 。
当然我们也可以自定义一个阈值，比如 100pt、受控物高度的 1/6 等，没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明，但是如果有特殊需要想要修改默认值，就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值，通常默认就非常的小，几乎是大于 0 即可触发，一般情况下使用默认值即可。
在本应该选用①的场景中，如果由于技术成本原因不得不选用②，需要注意的是由于缺少了释放速度的判定，手指位移的阈值我们需要设置得小一些方便用户触发，否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验，手指位移阈值一般定为 16pt 是比较适中的，既不会太容易误操作也不会难以触发。
2. 稳定化效果
轻扫是一定存在稳定化效果的，关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲，系统会监测用户的行为，用户在使用滑动时会有按下（down）、移动（move）、抬起（up）三个行为，释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作，开发成本几乎没有区别。
上文提到过稳定化效果强弱的概念。稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。首先，我们需要确定单次滑动允许切换多个还是只允许切换一个，如果允许切换多个，开发同学会设定一个控制切换难度的系数，而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数，但如果想让操作更加难或容易触发，可以告知开发同学修改这个系数。
3. 控制方式
绝对控制比相对控制的开发成本高，如果开发资源并不是很紧张，需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式，否则很可能被视为相对控制处理。
通过本文的学习，我们不但可以在开发工作进行前与开发同学高效沟通，保证开发工作的顺利进行，也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录，并且找到合适解决方案，然后用准确的语言描述给开发同学。下图是我在进行手势排查后输出的表格，挑选出一些有代表性的案例给大家作参考，开发同学可以通过它快速明确问题，理解解决方案。
本篇文章的归纳总结是通过日常积累和思考得来，希望能够帮助大家在设计与沟通层面解决实际问题，如果有任何疏漏和不严谨的地方，希望大家能够指出，后续的更新会将专栏不断完善，交互手势系列暂定的后续更新计划如下。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：设成于思
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
以前，设计师们都需要去跟开发沟通并手动标注所有文件，现在，有了像 Zeplin 和 Abstract 这样实用的标注工具，设计师几乎不需要花太多的时间在对接上。
但是，还是避免不了很多东西会在对接过程中出现问题。比如，这个按钮是固定大小的还是弹性大小？是保持底部边距固定还是在一个较大的对象内居中？让我们来看下约束布局在对接过程中的使用方法。
约束布局是定义控制应用中内容的规则。这些规则通过使用统一的元素和间距，保持跨平台、跨环境和跨屏幕大小的一致性。通常应用在 iOS 和 Android 中。
彩云注：这里想跟大家科普下相对布局和约束布局的区别。相对布局是通过相对定位的方式让控件出现在布局任意位置，相对布局因为逻辑原因，层级较多；而约束布局能够有效解决布局过多问题，让页面更加扁平化，布局之间相对位置也更好控制。约束布局也是继相对布局后，谷歌官方针对相对布局问题给出的一个更优解决方案，意在将来替代掉相对布局。当然，这里不再过多阐述，感兴趣的可以自行去了解下，可能偏开发方面会更多一些。
如果在 sketch 文件中已经设计布局好了所有元素，就可以开始了！
1. 基础单位
8×8
首先从定义基本单位开始，每个度量值都是其倍数。我建议使用偶数 8 来调整大小和间距，因为这样可以方便且一致地适配各种设备。
在 Sketch 中选择首选项>画布，将“通过 Shift+方向键调整移动对象中的 10px 改成 8px”，这样会解决很多问题！
2. 间隔单位
间隔单位是常用间距的视觉表达。例如，一个“2 间隔单元”是 16 pt/dp，因为 2×8=16。这些符号应该在设计中使用，别名应该被标注成代码，以便在和开发对接时使用相同的语言。
垂直和水平间隔
在项目很赶的时候，你可能没有足够的时间手动做到完美像素对齐。通过使用这些通用单位来标识，而不是标注工具自动生成的标注像素，它可以告诉开发实际间距。数字别名与“Shift +方向键”移动对象的次数相匹配。
响应式按钮：iPhone8、三星 Galaxy S8、iPhoneSE
间隔大小永远不会改变。如果是水平间隔，则垂直高度被锁定，反之亦然。这意味着在不同的手机宽度上，组件的尺寸会发生变化，但用于创建它的边距的间距将保持不变。
有时元素在间隔之间对齐。间隔之间对齐的主要方法是中心对齐和底部对齐。
垂直居、中水平居中和居中对齐
中心对齐是指你想要一个对象或一组对象向中间集中对齐。对象可以水平居中，垂直居中，或者向中间集中对齐。
底部对齐
底部对齐是指希望对象与其中一个对象的底部对齐。当有两种不同的文本大小并且想要在基线处对齐时，底部对齐就是比较常见使用方法。
1. 点击对象
48 x 48
在手机上，最小点击对象尺寸为 48x48dp /pt。这尺寸来自于谷歌设计指南，物理尺寸约等于 12 英寸。(HIG 建议使用 44x44pt，所以我选择更大的)。将元素放在一起时考虑点击对象大小。你也可以使用点击对象符号来表示元素的哪些部分是可点击的。
让我们通过一些组件示例切换来测试所有约束的使用：
组件示例：列表项、按钮和复选框
2. 基本尺寸
组件的基本尺寸，它的最小高度和宽度，应该基于最小点击对象的尺寸。视觉上小于点击对象的组件仍应由相同的最小点击对象大小触发。这意味着，如果用户在复选框之外触摸了一点，也会承认他们点击了复选框。
组件相对于最小点击对象的视觉尺寸：精确、高于和低于。
3. 内边距
使用间隔表示组件内的边距。
长字符串的水平边距
你可以通过设置水平边距来限制元素的水平位置，比如文本框。当文本太长时，你需要指出文本是否应该调整大小、换行和/或截断。换行到两行比截断一行更好！
动态类型的水平和垂直边距
垂直填充最常用于动态适配。尽管组件在当前手机尺寸、当前语言和当前字体大小下看起来可能很好——但所有这些因素都是最坏情况下的变量。当类型增加时，组件将变得比它的基本大小更大，并且你希望确保它仍然有垂直填充。
4. 基线对齐
使用居中和基线标记来示意，如何让那些没有接触到所有边的间隔元素表现出来。这部分主要是方便给开发理解的。
垂直居中的列表项文本、底部对齐的价格和居中的复选框
现在你已经布局好了一个页面，使用与在组件中相同的方式使用间隔、点击目标和对齐符号。
插图来源于 Meg
……瞧!这就是移动端的响应式布局!
提示：为你在界面布局中引用的组件创建单独的 symbol 画板。在组件中，将所有组件规范包含在一个文件夹中，该文件夹可以轻松打开和关闭。没有什么比同时标记组件和界面布局更好了。
即使是一个精心制作的交接文件也不能取代你与开发之间良好的语言交流。这应该与开始、移交和书面文档一起使用。你越让开发了解你的设计，还原的结果就越接近实际发布的产品。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：彩云译设计
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com