首页

132021-10

B端产品界面高屏效初探

背景

在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

案例收集｜发现问题，大胆假设

纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

文章来源：站酷作者：An t_design
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

评论(0) 浏览(1780)

132021-10

从体验层面出发，分析App搜索框设计的要点

鹤鹤

搜索动作在App中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。

1、搜索框结构分析

从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：

使用前-找到搜索框入口；使用中-点击输入内容；使用后-展示搜索结果。

其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。

2、搜索框的常见类型

回想常用App的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。

搜索图标

页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。

基本搜索框

基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式，文字提示为搜索，简洁清晰。

文字提示类搜索框

和基本搜索框的唯一不同的地方在于，这类搜索框中的文字提示部分不再是搜索两个字，而是根据产品需求支持预置多组文字提示并在搜索框内循环展示。

▲ 在大众点评的顶部搜索框中，文字提示部分循环展示了三组不同的内容，引导用户快速检索到好吃和好玩的。

功能类搜索框

之所以叫做功能类搜索框，是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标，如扫码图标、拍照图标、语音图标等，赋予搜索框更多的功能属性。

▲ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标，点击之后可以快速扫描图书条码或二维码，快速识别书的内容，省去检索的麻烦。

▲ 淘宝搜索框的组成更复杂，除了支持扫码外还有相机图标，方便用户拍照识别商品。

3、搜索框设计状态分析

使用搜索框搜索的过程总体可以分为四部分：搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程，再考虑每个状态对应的交互细节及反馈，这样才能保持逻辑清晰。

搜索前-默认状态

位置

大多数搜索框出现在页面顶部，作为一个大的触摸目标更符合用户的认知习惯，更容易被用户发现和使用。

▲ 在苹果自带的地图应用中，搜索框放在页面中部偏下的位置，相比于顶部搜索框，这样的位置分布更方便用户单手操作。

样式

搜索前的状态除了前面讲的几种常见的搜索框样式外，有些产品会直接在搜索框增加“搜索”按钮。

▲ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮，相比于点击搜索框再点击键盘搜索内容推荐，直接点击按钮简化了搜索流程。

点击后-获取焦点

搜索框

点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，搜索框右侧会出现“取消”按钮。

▲ 点击大众点评的搜索框后，搜索页会出现三个选项，点击每一个选项，搜索框内的文字提示都会改变，有效帮助用户提升搜索准确度，虽然是很小的点但做的很用心。

键盘

点击搜索框后会弹起键盘，在不输入内容的情况下，点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。

搜索页

搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块，记录用户的搜索行为，推荐目标商品或服务，提高转化率。

▲ 豆瓣将最热门的内容都展现在搜索页中，包括实时更新的热门书影音榜单、热门小组、热门话题等，为用户提供有效的引导。

关于历史搜索我们还可以继续深入分析，思考这些记录怎么排序、最多显示几条记录……

▲ 网易云音乐的历史搜索最多可以保留10条，采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录，这会导致排在后面的历史记录不容易被用户快速发现。

▲ 淘宝的历史搜索可以容纳更多的数量，当搜索记录超过两行时会有一个小的展开按钮，点击按钮可以查看早期的记录，这样既能节省屏幕空间也能最大化容纳历史记录。

搜索中-输入内容

删除/取消

当开始输入内容时，在搜索框的右侧会出现删除图标，方便用户一键删除输入的内容，这里要注意区分删除和取消的区别。

▲ 在淘宝中点击“删除”图标，页面会返回到上一级也就是搜索页；

▲ 点击“取消”按钮，页面会直接返回到主页也就是搜索前的状态。

搜索提示

在用户输入内容时，产品会根据用户输入的内容提供相对应的搜索推荐，这是搜索框的必备的交互反馈。

通过合理的词条推荐能极大降低用户的思考时间，提高搜索效率，同时省去再次点击搜索按钮的流程，降低用户的操作步骤。

字数限制

目前我所知道的大多数App在搜索时都没有字数限制问题。

回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的，尽量不要约束用户的输入内容。无论用户输入多少内容，点击都可以完成基本的搜索操作，这样整个流程才完整。

▲ 在百度中输入过多字符时，会提示查询限制在38个汉字以内，多的字符会被忽略，虽然给出了提示但并未打断用户的操作流程，可以让用户继续完成搜索。

搜索后-展示结果

符合预期

搜索的理想状态是搜索到的结果符合用户的预期，满足用户的搜索需求，并把最吻合的搜索结果排在前面，为用户带来清晰的结果展示。

智能提示

智能提示是对用户输入内容上的一种提示或纠正，如果用户输入的内容有问题或不够标准，在搜索结果中会能给最贴切的搜索结果。

▲ 在淘宝中输入“shouji”或“souji”，淘宝会根据拼音给出“手机”的搜索结果，但仍保留原标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”标签，这种差异化的反馈能更好的为用户服务。

无结果提示

如果没有搜索到用户输入的内容，搜索页会显示一个空状态，提示用户没有搜索结果。关于空状态如何设计可以看我之前写的一篇文章——如何做好「空状态」设计？来看资深设计师的总结！详细分析了空状态的设计方法。

▲ 相比于直接显示搜索无结果的状态，拼多多的搜索结果首先会标明相关商品较少，然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。

文章来源：站酷作者：Clippp
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

评论(0) 浏览(1983)

132021-10

如何选择合适的图标？来看这份图标类型和风格汇总

鹤鹤

常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。

大家好，我是Clippp。看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题！

一、定义图标类型

对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。

面对这样的问题，推荐使用系统性的结构来划分图标类别：

首先将图标按尺寸大小分为两类；
继续细分对应的面性、线性、线面结合、扁平、拟物化等类型；
最后选择标准、容器、渐变、3D、手绘、阴影等风格。

利用这种结构层级，可以明确定义图标类别。

二、图标尺寸

图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到16px，这些酷炫的效果都无法呈现出来。

在对图标归类时，首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类：

大尺寸图标通常指标志性图标，例如App启动图标或代表品牌形象；
小尺寸图标用作UI控件，起到引导功能或装饰目的。

三、图标类型

确定图标尺寸后，进一步细分图标类型：

面性图标

线性图标

线面结合图标

扁平化图标

拟物化图标

利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。

四、图标组成

图标尺寸越小，展示的细节越有限。相比于大图标，小图标的尺寸有一定局限性，图标组成包括 标准和容器两种。

大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。

五、小尺寸图标样式

简单的图像可以更具包容性。图标的尺寸越小，越考验设计师传达信息的能力。

1.面性图标

1.1标准面性图标

面性图标易识别，适合应用在小尺寸图标中。

关键点：

确保图标有清晰的边缘，避免羽化；

图标复杂程度随着尺寸变小而灵活调整。

1.2带有背景色的面性图标

彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好，更具吸引力。

关键点：

为背景选择4-12种颜色。

考虑图标是浅色还是深色，是否适用于所有背景色。

在彩色背景上使用白色图标比黑色效果更好。

2.线性图标

2.1标准线性图标

线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰，我们可以更加大胆地使用线性图标。

关键点：

确保轮廓像素清晰。

越简单越好。

追求更简单的细节。

2.2双色线性图标

设计小尺寸图标时，必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时，可以考虑添加一些颜色。

关键点：

使用两种搭配和谐的颜色。

考虑将一种颜色用于主要形状，另一种颜色用于细节。

少即是多。

使用粗线条。

3.线面结合图标

线面结合拥有更多细节，提升用户的愉悦感。

关键点：

最好使用深色而不是纯黑色描边。

限制图标的颜色种类。

避免过多细节。

4.扁平化图标

扁平化图标既简单又巧妙，表达品牌形象的同时具有丰富的内涵。

关键点：

避免在<20px的尺寸中使用此图标样式。

选择2-3种颜色，可以一起使用。

一种颜色为主色，另一种颜色应为高光/细节色。

六、大尺寸图标样式

大尺寸图标在界面中使用较少，更多用于产品标识或品牌宣传。

1.线性图标

1.1标准线性图标

在设计任何图标前，都可以先创建一个线性轮廓，确保形状看起来足够美观后再添加颜色。

关键点：

这类图标最容易制作。

避免出现轮廓羽化。

线条粗细要一致。

不要害怕添加细节。

1.2渐变线性图标

添加一些渐变能让原本单一的线性图标赋予更多的个性。

关键点：

在小尺寸图标中添加渐变会降低图标的可视性。

选择渐变时，首先考虑邻近色。

线条越粗，渐变越明显。

线条细节越多，渐变越明显。

1.3等距线性图标

2.5D图标做起来会花费很多时间，但效果会很好。在设计汽车、房屋、家具等实体产品时，建议优先使用2.5D图标。

关键点：

同一组图标要使用相同的等轴测网格。

2.5D等轴图标很复杂，在较小的尺寸下会失去作用。

如果可以，让所有图标都朝向同一个方向。

1.4手绘线性图标

随着设计趋势向简约化、扁平化发展，很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。

关键点：

手绘图标扫描后，再用数字方式重新绘制，这样可以保证线条粗细一致。

尽量让所有的线条保持相同的颜色，这会使文件更小。

1.5断线图标

标准的线性图标看起来可能会很单调，而简单灵活的断线处理能为图标增加更多个性。

关键点：

断线粗细应该相同。

图标的中断次数尽可能保持一致。

1.6双色线性图标

关键点：

确保两种颜色具有相同的对比度，否则可能会导致用户看不清其中一种颜色，因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。

2.线面结合图标

线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓，让图标能够清晰可见。

2.1标准线面结合图标

关键点：

使用有限的颜色和统一的线条风格，使图标具有品牌性。

使用线条和点来添加更多细节。

避免使用纯黑色描边。

2.2带有背景色的线面结合图标

关键点：

描边断开时，图标效果很更好。

避免在小尺寸时使用。

使用有限的调色板。

考虑使用较浅的描边/背景色。

考虑在图标下方添加一条水平线，使图形具有相同的位置(中间的图标示例)

2.3错位线面结合图标

当填充色与描边错位时，颜色移到右边图标左上角留出高光，带来一种清新的感觉。

关键点：

考虑使用断线描边。

使用有限的调色板。

确保描边和填充色简单且一致。

2.4色块图标

这种风格的图标的特点在于并不依赖于颜色，仅将其用于装饰。

关键点：

选择有限的调色板。

先关注轮廓再关注颜色，颜色仅用于装饰。

避免形状色和背景色过于相似，降低可见度。

2.4单色线面结合图标

关键点：

避免使用暖色调尤其是红色，会让用户感到压抑。

首先确定合适的描边颜色，再考虑填充色。

3.扁平化图标

扁平化图标通常没有描边，主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节，让这类图标非常具有吸引力。

3.1标准扁平化图标

关键点：

使用柔和的调色板，避免明亮的颜色。

分清简化和添加细节之间的界限。

3.2带有容器的扁平化图标

尝试让图形打破容器，带来动态的感觉。

关键点：

尝试让图形从容器中凸出来，以增加深度。

因为在容器中，可以添加更多的细节而不用担心图形变得混乱。

尝试使用正方形、椭圆形或与品牌相关的容器形状。

3.3等距图标

关键点：

保持所有图标朝向同一方向。

选择恰当的调色板能让图标看起来更一致。

避免小尺寸使用。

3.4半阴影扁平图标

半阴影图标是在扁平图标的基础上添加半色调阴影，得到更具个性的图标。

关键点：

小尺寸图标不起作用。

使用有限的调色板。

确保所有的图标色调相似。

3.5长阴影扁平图标

当图标位于容器中时，可以考虑添加长阴影，主要包括纯色阴影和渐变阴影两种类型。

关键点：

使容器具有相同的颜色或类似的色调。

只在大尺寸图标中使用。

将半阴影与长阴影组合使用效果更好。

4.拟物化图标

拟物化图标实际上已经包含了大部分的样式，例如它们是立体的，有丰富的渐变和阴影。

这种风格的图标看起来与现实生活中的图标尽可能类似，让用户感到更舒适。

关键点：

考虑添加底部阴影。

使光源来自同一方向。

确保图标都朝向相同的方向。

目前绝大多数界面不在有这种风格的图标，可以考虑使用3D建模来实现这种效果。

总结

希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。

文章来源：站酷作者：Clippp
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

评论(0) 浏览(2671)

132021-10

掌握这20条用户体验设计原则，助力设计成长！

鹤鹤

文章整理了20条用户体验设计原则，希望通过这份简洁易懂的合集能够让你对用户体验领域有一个初步的概览和了解。

1.以用户为中心

这是最常被提及的用户体验设计基础，当涉及到产品设计决策时，提醒我们要学会使用同理心，而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的，用户的意见、痛点、愿望、偏好和需求对产品来说至关重要，所以在项目初始阶段需要投入大量的时间和精力去了解用户。

用户体验研究重点是了解用户，为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求，区分了设计任何人都可以使用的产品和为目标用户设计的产品。

一款特定的产品需要面对不同的目标群体，前期研究中需要了解目标人群需要什么并在产品中反映出来，这是针对性很强的设计研究。

2.了解信息架构

可能很多人对信息架构的定义很模糊，这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中，如果把所有内容都堆到一个列表或页面中，可能我们将无法使用这款产品，所以我们看到大多数的App和网站都包含很多的导航和页面结构，按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么，并帮助他们找到需要寻找的内容。

信息架构在制作线框图或原型之前完成，因为它是产品的基础，有助于设计师考虑什么功能是最重要的，哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关，有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。

信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容，点击任何元素都没有反应，会给用户带来很糟糕的使用体验。

3.考虑使用场景

没有场景，任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。

这条原则有助于设计师考虑还有哪些因素会影响用户和产品，很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。

例如在设计表单时，会尽可能的添加 输入提示，最大程度地减少用户出错的机会。

4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受，因为用户不需要再次学习如何操作，他们会回忆起之前的操作习惯并将其作为指导，这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件，并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时，所以按钮的状态应该是一致的。

从逻辑上讲，产品越大，这种一致性会变得越来越有挑战性，这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡，放弃的用户就会越多，在市场营销中，这通常被称为销售漏斗中的漏洞。

5.给予用户适当的控制权

这条原则意味着用户希望能控制产品，无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权，例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等中。

需要注意的是，当提供太多选项或用户太依赖于自己的选择时，用户可能会不知所措，造成所谓的 选择悖论。所以在设计时要了解用户乐于掌控的余地，不能让用户感到使用压力。

6.把可用性放在首位

在整体上看，建立高标准的可用性是为用户做的最好的事情，有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。

可用性的重要之处在于要理解可用性的灵活性和重要性。

7.了解用户测试

结合可用性的概念，我们还要进行用户测试，这是设计师对工作进行测试的方式，对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时，设计师要观察真实的用户是如何与之交互的，可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。

测试通常分几轮进行，团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现，设计也随之发生了变化。

如果发生更改，将会进行新一轮的测试，通过这个过程，设计团队可以改进他们的工作，直到达到可用性标准。

8.少即是多

在创造力和创造独特事物的渴望中，很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击，但也会给用户带来负面体验，在设计时要学会克制并优先考虑真正关键的部分很重要。

另外手机端的屏幕空间非常小，创建一个有效的布局，想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。

9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动，并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连，帮助用户消化所接触到的信息。

创建层次结构从概念的草图开始，一直持续到完成设计。例如发送按钮通常会用绿色而是不红色，而次要按钮会显示为灰色或与背景混合，并显示“撤消”或“返回”。

10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式，是帮助设计师从用户的角度看待问题的工具。

正确使用意味着用户无需投入精力就可以使用的直观产品，而错误的思维模型会导致一些问题，例如界面混乱、高昂的交互成本。

为了匹配用户的心智模型，可以采用多种不同类型的研究方法，常见的方法包括 卡片分类、决策树、对用户行为的密切观察，或者使用大量的数据来建立关键用户的心理模型。

11.设计中的讲故事

讲故事的方式更加直观，利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感，给用户留下持久的印象。

想出一种可视化的方式来传达复杂的内容具有挑战性，但同时也是有益的，可以更好地接近用户并将其作为提高产品可学习性的方法。

12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标，但是直接使用原型软件不断添加各种页面细节是错误的操作。

避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下，一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。

13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品，还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。

事实上，残疾人和其他用户一样需要数字产品，但很多产品在设计时并没有考虑到这些群体，但这也提供了一个机会，为所有用户提供一个可以依赖的好产品。

14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线，同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如，大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮)，这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

使用用户已经熟悉的东西并不一定会让产品的独特性消失，有经验的设计师会利用这种熟悉性来来创造一些独特的设计，同时也是直观的，不需要太多努力就可以使用。

设计一个完全不依赖熟悉度的产品可能是具有风险的行为，因为它很容易让那些不熟悉产品的用户超负荷，形成巨大的学习曲线，增加用户负担。

15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容，包括用户画像、心智模型、用户旅程以及线框图和原型等，是一种有形和具体的表现。

可交付成果是用户体验设计原则，可以帮助设计团队和其他利益相关者理解和交流概念。

▲ 用户画像可以捕捉理想用户，并提供可以相关联的真实面孔，是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤，有助于确保这些步骤确实可以轻松执行，并且整个过程很流畅。

这些交付成果服务于关键功能，设计师需要在整个项目中都依赖它们，不断转换为用户可以与之交互的真实有形的设计。

16.专业的原型设计工具

用户体验设计的过程不是线性的，而是一个循环。无论创建什么样的产品，都需要专业的原型工具，将基本框架放在一起，然后添加可能需要的所有细节。

从逻辑上讲，设计团队的具体需求会因团队而异，但一些关键功能例如团队协作、需求管理、交互设计和开发移交等，对于大多数团队来说是必要的。

17.精心管理产品需求

一切都从收集需求开始，然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易，但随着项目的进展，要保持列表的条理性确实是一个挑战。

除了创建需求和检查复选框之外，还有一个问题就是调整需求，需要从 设计、技术和业务各个方面来处理各种需求，还要确保这些需求之间没有相互矛盾。

18.了解移动和网络产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸，这意味着所有的视觉层次结构和信息架构都将将从Web到App发生变化。

移动端产品会有更多影响设计决策的因素，例如设备的操作系统、使用产品的环境等。了解移动端产品在 导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。

19.利用UX设计模式

几乎所有的产品都专注于设计模式，它们可靠、易于查找并通过减少设计时间来为项目增加实用性。

▲ 当用户在谷歌搜索中输入的内容有问题时，谷歌会提供一个相关的搜索提示，辅助用户进行精确地搜索，解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。

20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性，如果线框和原型分散在多个渠道中，这种内容的集合就会变得很难达成。

通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题，防止产品细节没有表现出来或者被忽略。

最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里，不过我们可以确定，无论它带给我们什么，肯定都会很有趣。

慢慢来比较快，希望对你有所帮助～

文章来源：站酷作者：Clippp
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

评论(0) 浏览(2360)

132021-10

腾讯公益小红花火爆全网，背后的设计思维是什么？

鹤鹤

今年是腾讯发起99公益日的第七个年头。腾讯公益不仅在配捐机制、产品体系、企业联动、公益基础建设上全面升级，还连接数亿网友、近万家慈善组织和爱心企业，为全民公益交出一张漂亮的成绩单：

数据显示，小红花互动人次超1.25亿，送小红花、答公益题目等行为公益实现破圈传播，亿万爱心网友共同领取了超9000万朵助力小红花，共计有超过6870万人次在99公益日期间捐出35.69亿元，加上腾讯公益慈善基金会的6亿元资金支持，共募得善款41.69亿元。

99 公益日为何能实现破圈传播，作为腾讯公益日和 99 公益日的品牌符号，小红花的设计背后又传达了怎样的思考？今天就来聊聊小红花那些事。

2015年9月9日，腾讯公益联合国内数百家公益组织、知名企业共同发起了中国第一个互联网公益日。

为了让用户了解互联网公益的核心特色与参与方式，让更多的人参与到互联网公益中，第一届 99 公益日的活动主题定调为“一起爱”，在logo的设计中也借用了“无限”符号表示“爱无止境”的含义。

在前三年的 99 公益日中，募款额度得到了广度上的增长，在用户已经了解到互联网公益低门槛、多形式、透明度、可记录的特点之后，如何留住用户，对互联网公益形成日常习惯和持久投入，就成为了设计亟需解决的问题。

“小红花”是腾讯公益平台在2018年给出的答案。因为小红花作为国人的集体回忆，关联着你我儿时从老师那里收获到的鼓励。每一朵小红花背后，是我们完成的一件“好事”。

延续小红花的记忆线索进行延展，在公益中，小红花是对用户的捐赠给予的最大肯定，是受助者正在发生的改变。在传播上，小红花是记录用户每一次公益行为的符号，通过「戴小红花，一块做好事」而得到成就感的有效激励。

于是，2018年99公益日的主视觉上，无数的爱心化为花瓣，汇聚成一朵小红花，这是小红花在腾讯公益平台的初次绽放。

为了让品牌有延续性，加深用户对小红花和99公益日的认知，小红花作为核心品牌元素开始贯穿在每一年99公益日的主视觉中，并通过不同的画面故事表达每一年的主题。

比如，2018年的主题是积小善，成大爱，于是在设计中，让很多爱心小花汇聚在一起，让小的爱心变成大爱；2019年的主题是一块做好事，通过每个人的善意汇聚成小红花……

在2019年，“小红花”正式成为腾讯公益与99公益日的品牌符号。

从2020年开始，小红花开始发力于传播，联动外部品牌 IP 如QQ、微信、Bilibili、狐妖小红娘等开启推广，在各种不同的场景，诠释“一块做好事”的内涵。

这一年，小红花之歌火了，同名神曲MV播放量超1亿次；在线下，小红花也开到喜茶等连锁品牌的店里。

而2021年，属于用户独特的小红花爱心账户上线了，用户在腾讯公益平台做好事打卡，向好友发起集小红花的自发传播，从而争取更大的配捐额，在增强用户捐款积极性的同时，撬动更多用户了解并参与到活动中来。

小红花爱心账户

用户还可将积累的小红花兑换周边礼品。在推广上则从创作入手，发起共绘小红花的活动。

可以说，小红花串联起了用户从感知、到行动、到反馈的全流程，保证了用户参与互联网公益的动机和动力。

在预热推广阶段，腾讯公益推出一支小红花为主角的宣传片，试图为小红花是什么，做出来自官方的定义。

不管是线上线下征集用户绘制的小红花，“每个人的小红花”画展，还是在感恩日随证书送出的小红花画作，都让用户全方位地感受到腾讯公益小红花的“玩法”，也为小红花元素赋予了丰富的内涵。

征集到的部分小红花作品

寄出公益荣誉证书

爱心用户的开箱视频

99公益日期间，小红花与腾讯新闻、微保、腾讯视频、腾讯会议等多产品的玩法联动，让小红花开遍“地球村”。

多款产品联动一块做好事

而在线下，小红花也伴随系列广告，落地在线上下，IP联盟、异业合作、核心城市灯光投影秀等，让小红花无处不在。

部分城市地标灯光投影秀

最后，小红花这一品牌形象的成功，不仅在公益设计这一领域上有借鉴的意义，在品牌IP的设计上同样有值得学习的地方。

文章来源：站酷作者：零弟小武
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

评论(0) 浏览(2771)

132021-10

为什么越简单的设计越说不出理由

鹤鹤

常见场景

设计师日常工作中，经常遇见的那些显而易见的设计逻辑，却难以给出设计理由的情况到底指的是什么呢？

以我自己近期的工作为例，不妨为大家举个简单的例子：

下图是一个补贴规则的设置流程，在用户未设置补贴规则之前，明确告知用户还未设置补贴规则，当用户设置了补贴规则后，可以对补贴规则进行修改。

我认为这是一个非常简单且合理的页面路径跳转，并且在很多现有的产品中都有类似这样的逻辑存在。然而在与上下游同学对接的过程中，却遇到了不同的意见：有人认为没有必要区分用户是否设置了规则，用户未设置规则可以直接展示系统默认的补贴条件和补贴范围，如果用户认为不合理，自行修改便是。

不知道大家看到这里是什么感觉，我在听到「方案二」时的反应是：能够理解却并不认同，说不出来哪里不对，就是觉得这事它不应该这样。

以上，就是在我工作中发生的一次非常具体的案例。

直觉真的不如推理靠谱吗？

那么为什么我会产生“感觉哪里不对，却又说不出为什么”的强烈感受呢？

最直接的原因是，这样的设计方案（方案一）是用直觉做出来的，缺少了对方案本身的思考。

直觉，指的是那些没有经过分析推理的观点，因此常常给人一种不靠谱的感觉。

可是有时候我们依赖「直觉」做事真的就完全不靠谱吗？带着这样的疑惑，我去查阅了一些相关的资料来辅助我更好理解这种直觉性思考，恰好找到了一个真实的实验案例：

1997年，Bechara, Antoine et在一个赌博游戏实验中发现：「直觉」比「意识」更能指引正常人做出有利的的选择。

该实验先后邀请了10名正常人和6名前额叶损伤的决策缺陷患者，以探究人们做出正确选择是在对相关知识进行推理之前还是之后。在游戏开始前，工作人员给予每位参与者2000美金、发放4副牌，要求参与者在游戏过程中翻出100张卡片，并尽可能的多赢钱，但他们不会告知参与者每副牌中的卡片价值：从A、B两副牌中翻出正常的卡片能赚100美金，C、D两副牌中的正常卡片值50美金，同时每副牌中也隐藏着罚款，A、B两副牌中的罚款比C、D两副牌的罚款重，参与者很可能会输光所有的钱。

实验结果显示：正常人在意识到哪副牌赢面更大之前就开始选择有利的卡牌，而决策缺陷患者即使知道了正确的策略，却仍然继续选择对自己不利的卡牌。

根据上述实验，我们起码能发现直觉未见得不可靠，也就是说，凭借直觉出的设计方案，并不意味着不是一个正确的方案。

可是在日常沟通协作的过程中，「直觉设计」一旦遇到不同的意见，就会缺少理论支撑。决策者无法判断设计师的直觉是否可靠，从而觉得方案本身也不可靠。

遇到这种看似「死胡同」的情况，我们应该怎么去思考呢？

很简单，直觉在前，策略性推理在后。

乔纳森•海特（Jonathan Haidt），著名社会心理学家，在《正义之心》中有提到：

判断和论证是两个相互分离的过程，直觉与推理的关系就像大象与骑象人，骑象人（推理）骑在大象（直觉）上，骑象人不断发展以服务于大象。

拿上述的方案来说，当我面对这类的质疑时，我也会有愣住，但我知道我不能惊慌，而是该让骑象人（推理）表演了。

其实仔细分析一下上述案例就会发现，方案一和方案二最本质的区别在于：

是否需要区分用户（商家）自行设置过「补贴规则」？

百度百科对规则的定义是：

规则，一般指由群众共同制定、公认或由代表人统一制定并通过的，由群体里的所有成员一起遵守的条例和章程。

规则本身是属于利益相关者之间的约定。按照这个逻辑，「补贴规则」可以理解为用户（商家）与消费者形成的基本约定。

用户（商家）未设置规则，如果系统直接展示默认的补贴条件和补贴范围，就会给用户（商家）一种平台借以商家的名义与消费者形成了约定的印象，这与现实不符，甚至可能给用户（商家）的业务带来不必要的纷争。因此，区分用户是否设置过补贴规则是非常有必要的。

为什么要为自己的设计辩护？

在上述场景中，虽然我的直觉先于理性给我发送了信号，但设计师如果光依靠直觉却给不出任何说明，同样会带来一系列麻烦。

汤姆·格里弗（Tom Greever）在一篇文章提到，伟大的设计往往取决于你怎么说。

描述设计不是一件容易的事情，但每个设计师都不得不向很多没有设计经验的人讲述自己的设计，并且要让他们信服自己是对的，这群人很可能是方案的决策者。决策者通常会选择那个听上去最合理的方案，所以方案的表述对于最终方案的确立至关重要。

普通设计师和顶级设计师之间的差距不仅仅是他们解决问题的能力，还在于他们能否用一种让人心服口服、并促使人们同意的方式来阐述他们是怎么解决问题的。理论上，最好的设计应该胜出，然而事实并非如此，设计评审很容易变成设计批判会，每个人都在告诉设计师要怎么设计。

最终，那些能够说服别人“我是对的”的人会胜出。设计师如果没有办法说服别人为什么他们要这么做，就不得不按照他们不同意的方式去修改设计，原因仅仅是因为他们没有办法简要的为自己的设计辩护。

听起来似乎这些决策有失公允，甚至成了设计师的辩护大会，那么对于一些有着出色能力却不善言辞的设计师而言，就真的没有任何方法了吗？

如何突破直觉，能言善辩？

设计师要想守卫自己的设计，就要警惕那些单凭设计直觉做出来的方案。

设计直觉的形成与个人经历、阅读经历相关。遇到相似的问题，设计师如果有这方面的经验固然是好的，直接复用之前的做法可以大大提升设计效率。但我们完成设计后，最好想想哪些地方存在路径依赖，以确保自己的方案能经得住质疑。

一个最实用的可以判断自己的设计方案，是不是由直觉得来的，就是多向自己提问。

同样，我们来用实际的案例做个说明：

想想下图中「智能上传」「更多操作」按钮放在表格的左下方行不行？

很明显不行，但重点是支持这么做不行的理由是什么？

如果你的理由是：

“别的页面是将按钮放在了列表左上角的”

“放在左下角不好看呀”

“没见过有产品这么放啊”

“......”

那这个方案就是直觉设计的产物了。

想要突破直觉设计，设计师需要尽可能在每个设计点上多思考几步，比如：

为什么别的页面会将按钮放在左上角？

根据2006年NNGroup 在眼动实验中的发现，人们在网络中的阅读成F型，即用户进入页面中的第一眼，通常会落在页面的左上角，也就是说左上方的区域是页面的黄金区。「智能上传」「更多操作」属于页面的核心操作，那么放在列表左上方是非常合理的。

此外，我们可以看到页面的翻页器是可以筛选列表展示的条数，假设用户设置的条数，超出了屏幕显示范围，也就意味用户进入到页面会看不到操作选项，所以按钮放在表格的左下方也是不合理的。

为什么别的页面按钮放在左上角这个页面也要这么做？

因为我们需要保障产品的一致性，产品的核心操作方式保持一致，可以有效地降低用户的学习成本，避免不必要的思考。

总结

在设计协作的过程中，设计师不可避免地会接收到来自四面八方的声音，而我自己也曾在设计沟通中陷入过类似困境，因此我越发明白只有清晰地表述出自己的设计思考，才可能赢得每个人的支持。

凭借直觉出的设计方案，并不意味着不是一个正确的方案。
直觉在前，策略性推理在后。
顶尖的设计师，也是顶尖的交流者。
要想守卫自己的设计，就要警惕那些单凭设计直觉做出来的方案。
多向自己提问，以确保自己的方案能经得住质疑。

以上是关于这篇文章的关键思考总结，回到设计师个体而言，我认为我们需要对直觉设计保持警惕，因为看似简单的设计背后往往蕴含着复杂的设计原理，而一个好的设计师除了拥有过硬的设计能力，强大的设计思考力和表达能力以外，我相信同样在跨学科的研究和学习上会远强于普通设计师，否则根本无法支撑起背后的设计思考。

文章来源：站酷作者：范思蜀
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

评论(0) 浏览(1924)

132021-10

js_防抖与节流（闭包的使用）

前端达人

js的防抖与节流

防抖事件

定义：持续触发事件，一定时间内没有触发事件，事件处理函数只会执行一次，
当设定的时间内触发过一次事件后会重新开始延时。
例：输入框的事件（2s显示内容，不是实时刷新显示内容），对比输入框的内容事件。
实时刷新的效果

 <div class="container"> <div class="left"> <p>实时刷新显示内容</p> <input type="text" id="leftInput" /> <div class='textDiv' id="textShow"></div> </div> <div class="right"></div> </div> <script> var inputDom=document.getElementById('leftInput'); inputDom.addEventListener('keyup',function(e){ var textDom=document.getElementById('textShow'); console.log(e.target.value); textDom.innerText=e.target.value; }) </script>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17

输入123456会依次打印123456的金字塔
在这里插入图片描述

防抖（1s内显示输入内容）

 <div class="container"> <div class="left"> <p>防抖（1s内显示输入内容）</p> <input type="text" id="leftInput" /> <div class='textDiv' id="textShow"></div> </div> <div class="right"></div> </div> <script> // 防抖 var inputDom = document.getElementById('leftInput'); // 函数柯里化 function debounce(delay, callback) { let timer return function(value) { //闭包内存泄漏 clearTimeout(timer) timer = setTimeout(function() { //执行 callback(value) }, delay) } } // 显示内容的函数 function showText(value) { var textDom = document.getElementById('textShow'); console.log(value) textDom.innerText = value; } var debounceFunc = debounce(1000, showText); inputDom.addEventListener('keyup', function(e) { let value = e.target.value debounceFunc(value) }) </script>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36

1s内输入123456只会打印一次123456
在这里插入图片描述

节流事件

定义：一段时间直只调用一次事件处理函数
实际用例：提交事件、游戏的技能cd（在游戏cd中点击n次都不会发动技能）

// 节流
            var skillDom = document.getElementById('skillTriger');
            function throttle(wait,callback) {
                let timeOut;
                return function(value) {
                    if (!timeOut) {
                        timeOut = setTimeout(function() {
                            callback(value);
                            //执行一次，时间段内的都不知执行
                            timeOut = null;
                        }, wait)
                    }
                }
            }
            function skillEvent(value){
                var textDom = document.getElementById('skillEventId');
                console.log(value)
                ++count
                textDom.innerText = value+count;
            }
            var skillAc=throttle(3000,skillEvent)
            var count=0
            skillDom.addEventListener('click', function(e) {
                let value = e.target.value
                skillAc(value)
            })  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26

在这里插入图片描述

完整的html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>防抖与节流</title> </head> <style> * { margin: 0; padding: 0; } .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: #262626; display: flex; } .left { position: relative; width: 50%; height: 100%; background: #00cec9; box-sizing: border-box; overflow: hidden; } .right { position: relative; width: 50%; height: 100%; background: #b2bec3; } </style> <body> <div class="container"> <div class="left"> <p>防抖（1s内显示输入内容）</p> <input type="text" id="leftInput" /> <div class='textDiv' id="textShow"></div> </div> <div class="right"> <p>节流（3s内触发一次）</p> <input type="submit" id="skillTriger" value="发动技能" /> <div class='skillEvent' id="skillEventId"></div> </div> </div> <script> // 防抖 var inputDom = document.getElementById('leftInput'); // 函数柯里化 function debounce(delay, callback) { let timer return function(value) { //闭包内存泄漏 clearTimeout(timer) timer = setTimeout(function() { //执行 callback(value) }, delay) } } // 显示内容的函数 function showText(value) { var textDom = document.getElementById('textShow'); console.log(value) textDom.innerText = value; } var debounceFunc = debounce(1000, showText); inputDom.addEventListener('keyup', function(e) { let value = e.target.value debounceFunc(value) }) // 节流 var skillDom = document.getElementById('skillTriger'); function throttle(wait, callback) { let timeOut; return function(value) { if (!timeOut) { timeOut = setTimeout(function() { callback(value); //执行一次，时间段内的都不知执行 timeOut = null; }, wait) } } } function skillEvent(value) { var textDom = document.getElementById('skillEventId'); console.log(value) ++count
                textDom.innerText = value + count; } var skillAc = throttle(3000, skillEvent) var count = 0 skillDom.addEventListener('click', function(e) { let value = e.target.value skillAc(value) }) </script> </body> </html>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58
    

    
        59
    

    
        60
    

    
        61
    

    
        62
    

    
        63
    

    
        64
    

    
        65
    

    
        66
    

    
        67
    

    
        68
    

    
        69
    

    
        70
    

    
        71
    

    
        72
    

    
        73
    

    
        74
    

    
        75
    

    
        76
    

    
        77
    

    
        78
    

    
        79
    

    
        80
    

    
        81
    

    
        82
    

    
        83
    

    
        84
    

    
        85
    

    
        86
    

    
        87
    

    
        88
    

    
        89
    

    
        90
    

    
        91
    

    
        92
    

    
        93
    

    
        94
    

    
        95
    

    
        96
    

    
        97
    

    
        98
    

    
        99
    

    
        100
    

    
        101
    

    
        102
    

    
        103
    

    
        104
    

    
        105
    

    
        106
    

    
        107
    

    
        108
    

    
        109
    

    
        110
    

    
        111
    

    
        112
    

    
        113

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

评论(0) 浏览(1964)

132021-10

配合前端vue实现表格的增删改查

前端达人

前言：

这个章节内容是比较多的，分为前端部分和后端部分。

实现效果：增删改查

一、后端部分：

（1）数据库：

新建一张表user,设置几个字段，效果如下：

（2）egg逻辑部分：

提供的接口：http://localhost:7001/setUserList

get 请求，获取数据，支持模糊查询
post 请求，新增数据
put 请求，给后端当前数据id，修改内容
delete 请求，根据数据id删除当前条数据

（3）egg具体实现步骤：

1、router.js中添加：

 


    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 路由配置 
            

        

    

    

        

            

            

        

        

            
                 * @param app 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                module.exports = app => {
            

        

    

    

        

            

            

        

        

            
                const { router, controller } = app;
            

        

    

    

        

            

            

        

        

            
                //-------------------------------------------------- 
            

        

    

    

        

            

            

        

        

            
                // server接口 
            

        

    

    

        

            

            

        

        

            
                //-------------------------------------------------- 
            

        

    

    

        

            

            

        

        

            
                app.get('/setUserList', controller.new.user.getUserList);
            

        

    

    

        

            

            

        

        

            
                app.post('/setUserList', controller.new.user.postUserList);
            

        

    

    

        

            

            

        

        

            
                app.put('/setUserList', controller.new.user.putUserList);
            

        

    

    

        

            

            

        

        

            
                app.delete('/setUserList', controller.new.user.deleteUserList);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }

2、新建：app / controller / new / user.js

（1）查，模糊查询

select * from user where name like ? % 内容 %

（2）增

this.app.mysql.insert('表名'，内容)

（3）改

UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2

（4）删

delete from user where id = 1

user.js 源码：

 


    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 *  用户信息路由 
            

        

    

    

        

            

            

        

        

            
                 * @param app 
            

        

    

    

        

            

            

        

        

            
                 * @returns {HomeController} 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                const Controller = require('egg').Controller;
            

        

    

    

        

            

            

        

        

            
                class NewsController extends Controller {
            

        

    

    

        

            

            

        

        

            
                async getUserList() {
            

        

    

    

        

            

            

        

        

            
                //查询库里的user表 
            

        

    

    

        

            

            

        

        

            
                let params = this.ctx.query //获取路径后面的参数 
            

        

    

    

        

            

            

        

        

            
                console.log('用户的参数：');
            

        

    

    

        

            

            

        

        

            
                console.log(params);
            

        

    

    

        

            

            

        

        

            
                let sql = 'select * from user' 
            

        

    

    

        

            

            

        

        

            
                let initSql = sql
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let content = [];//参数 
            

        

    

    

        

            

            

        

        

            
                let isMore = false;//是否有多个查询参数 
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * @模糊查询-量大的时候效率低 
            

        

    

    

        

            

            

        

        

            
                 * select * from user where name like ? % 内容 % 
            

        

    

    

        

            

            

        

        

            
                 * 在user表中全局查找name值 == 内容的 
            

        

    

    

        

            

            

        

        

            
                 * % 内容 % 全局查找内容 
            

        

    

    

        

            

            

        

        

            
                 *   内容 %  查找以 内容 开头的数据 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                if(params.name){
            

        

    

    

        

            

            

        

        

            
                sql += " where name like ?";
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.name+"%" );
            

        

    

    

        

            

            

        

        

            
                isMore = true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                if(params.age){
            

        

    

    

        

            

            

        

        

            
                if(isMore){//true代表有多个参数 
            

        

    

    

        

            

            

        

        

            
                sql += "and age LIKE ?";//and是两个条件都必须满足，or是或的关系 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += " WHERE age LIKE ?";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.age+"%" )
            

        

    

    

        

            

            

        

        

            
                isMore = true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                if(params.address){
            

        

    

    

        

            

            

        

        

            
                if(isMore){//true代表有多个参数 
            

        

    

    

        

            

            

        

        

            
                sql += "and address LIKE ?";//and是两个条件都必须满足，or是或的关系 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += " WHERE address LIKE ?";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.address+"%" )
            

        

    

    

        

            

            

        

        

            
                isMore = true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                if(params.phone){
            

        

    

    

        

            

            

        

        

            
                if(isMore){//true代表有多个参数 
            

        

    

    

        

            

            

        

        

            
                sql += "and phone LIKE ?";//and是两个条件都必须满足，or是或的关系 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += " WHERE phone LIKE ?";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.phone+"%" )
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //开启分页 
            

        

    

    

        

            

            

        

        

            
                if(params.page || params.pageSize){
            

        

    

    

        

            

            

        

        

            
                let current = params.page;//当前页码 
            

        

    

    

        

            

            

        

        

            
                let pageSize = params.pageSize;//一页展示多少条数据 
            

        

    

    

        

            

            

        

        

            
                sql += " limit ?,?";
            

        

    

    

        

            

            

        

        

            
                content.push((current-1)*pageSize,parseInt(pageSize));
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let allList = await this.app.mysql.query(initSql);
            

        

    

    

        

            

            

        

        

            
                let userList= await this.app.mysql.query(
            

        

    

    

        

            

            

        

        

            
                sql,content
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data: {
            

        

    

    

        

            

            

        

        

            
                list:userList,
            

        

    

    

        

            

            

        

        

            
                total:allList.length
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 新增用户信息 
            

        

    

    

        

            

            

        

        

            
                 * INSERT INTO loginlist (aaa,bbb,ccc) VALUES ('"'+111+'","'+222+'","'+333+'"') 
            

        

    

    

        

            

            

        

        

            
                 * this.app.mysql.insert('表名'，内容) 
            

        

    

    

        

            

            

        

        

            
                 * this.app.mysql.insert('表名'，{ 
            

        

    

    

        

            

            

        

        

            
                 *   name:123, 
            

        

    

    

        

            

            

        

        

            
                 *   age:1, 
            

        

    

    

        

            

            

        

        

            
                 *   address:西安 
            

        

    

    

        

            

            

        

        

            
                 * }) 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                // 
            

        

    

    

        

            

            

        

        

            
                async postUserList() {
            

        

    

    

        

            

            

        

        

            
                console.log(this.ctx.request.body);
            

        

    

    

        

            

            

        

        

            
                //新增数据-user表 
            

        

    

    

        

            

            

        

        

            
                let data = this.ctx.request.body
            

        

    

    

        

            

            

        

        

            
                data.id = parseInt(Math.random()*100000)
            

        

    

    

        

            

            

        

        

            
                let insertResult = await this.app.mysql.insert(
            

        

    

    

        

            

            

        

        

            
                'user', data
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data:insertResult
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 修改用户信息 
            

        

    

    

        

            

            

        

        

            
                 * UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2（唯一值），修改一个 
            

        

    

    

        

            

            

        

        

            
                 * UPDATE loginlist SET username = 'admins', `password` = 'Ad123456' WHERE id = 2，修改多个 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                async putUserList(){
            

        

    

    

        

            

            

        

        

            
                //新增数据-user表 
            

        

    

    

        

            

            

        

        

            
                let id = this.ctx.query.id //获取路径后面的参数 
            

        

    

    

        

            

            

        

        

            
                let data = this.ctx.request.body
            

        

    

    

        

            

            

        

        

            
                let sql = 'update user set ' 
            

        

    

    

        

            

            

        

        

            
                let isMore = false;//是否有多个查询参数 
            

        

    

    

        

            

            

        

        

            
                if(!id){
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'warning',
            

        

    

    

        

            

            

        

        

            
                data:'id没有传' 
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                return 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //姓名 
            

        

    

    

        

            

            

        

        

            
                if(data.name){
            

        

    

    

        

            

            

        

        

            
                sql += 'name = "'+data.name+'"' 
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //年龄 
            

        

    

    

        

            

            

        

        

            
                if(data.age){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',age = "'+data.age+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'age = "'+data.age+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //地址 
            

        

    

    

        

            

            

        

        

            
                if(data.address){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',address = "'+data.address+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'address = "'+data.address+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //手机号 
            

        

    

    

        

            

            

        

        

            
                if(data.phone){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',phone = "'+data.phone+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'phone = "'+data.phone+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //邮箱地址 
            

        

    

    

        

            

            

        

        

            
                if(data.email){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',email = "'+data.email+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'email = "'+data.email+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                sql += ' where id = ' + id
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let insertResult = await this.app.mysql.query(sql)
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data:insertResult
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 注销用户接口 
            

        

    

    

        

            

            

        

        

            
                 * DELETE FROM loginlist WHERE username = 'superman' 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                async deleteUserList(){
            

        

    

    

        

            

            

        

        

            
                //查询库里的user表 
            

        

    

    

        

            

            

        

        

            
                let params = this.ctx.query //获取路径后面的参数 
            

        

    

    

        

            

            

        

        

            
                console.log('用户的参数：');
            

        

    

    

        

            

            

        

        

            
                console.log(params);
            

        

    

    

        

            

            

        

        

            
                let sql = 'delete from user where id = '+ params.id
            

        

    

    

        

            

            

        

        

            
                let res = await this.app.mysql.query(
            

        

    

    

        

            

            

        

        

            
                sql
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data:res
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 模糊查询封装方法 
            

        

    

    

        

            

            

        

        

            
                 * @params = auth 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                async query( auth ) {
            

        

    

    

        

            

            

        

        

            
                const TABLE_NAME = 'user';
            

        

    

    

        

            

            

        

        

            
                const QUERY_STR = 'id, name, age, phone, address';
            

        

    

    

        

            

            

        

        

            
                let sql = `select ${QUERY_STR} from ${TABLE_NAME} where authName like "%${auth.authName}%"`;
            

        

    

    

        

            

            

        

        

            
                const row = await this.app.mysql.query(sql);
            

        

    

    

        

            

            

        

        

            
                return row;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                module.exports = NewsController;

3、引入mysql:点我

4、跨域问题解决：点我

二、前端部分：

新建vue文件：testApi.vue

1、初始化查询列表数据：页面展示列表，列表数据mouted获取

 


    

        

            

            

        

        

            
                <el-table 
            

        

    

    

        

            

            

        

        

            
                :data="tableInfo.list" 
            

        

    

    

        

            

            

        

        

            
                style="width: 100%">
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                type="index" 
            

        

    

    

        

            

            

        

        

            
                label="序号" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="name" 
            

        

    

    

        

            

            

        

        

            
                label="姓名" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="age" 
            

        

    

    

        

            

            

        

        

            
                label="年龄" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="address" 
            

        

    

    

        

            

            

        

        

            
                label="地址">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="phone" 
            

        

    

    

        

            

            

        

        

            
                label="手机号">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="email" 
            

        

    

    

        

            

            

        

        

            
                label="邮箱">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                label="操作" 
            

        

    

    

        

            

            

        

        

            
                width="100">
            

        

    

    

        

            

            

        

        

            
                <template slot-scope="scope"> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="editFun(scope.row)">编辑</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="deleteFun(scope.row)">删除</el-button> 
            

        

    

    

        

            

            

        

        

            
                </template> 
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                </el-table>

 


    

        

            

            

        

        

            
                mounted(){
            

        

    

    

        

            

            

        

        

            
                this.initPage()
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                methods: {
            

        

    

    

        

            

            

        

        

            
                /*** 
            

        

    

    

        

            

            

        

        

            
                 * 获取列表数据 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                initPage() {
            

        

    

    

        

            

            

        

        

            
                let params = {
            

        

    

    

        

            

            

        

        

            
                page: this.tableInfo.page, //当前页 
            

        

    

    

        

            

            

        

        

            
                pageSize: this.tableInfo.pageSize //一页展示多少条 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.$axios.get('http://localhost:7001/setUserList',{
            

        

    

    

        

            

            

        

        

            
                params
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.list = res.data.data.list
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.total = res.data.data.total
            

        

    

    

        

            

            

        

        

            
                }).catch(error => {
            

        

    

    

        

            

            

        

        

            
                this.$message(error.data.message)
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }

2、页面点击新增：展示弹框，并将弹框内容去除掉，点击新增，将弹框内容发送给后端

3、页面点击列表里面具体数据的编辑：弹框，并回填数据，修改将当前数据的id和表格数据传给后端

4、删除按钮，点击出现二次确认弹框，点击确认将当前数据的id给后端就行

testApi.vue 源码：

 


    

        

            

            

        

        

            
                <template> 
            

        

    

    

        

            

            

        

        

            
                <div class="pro_body"> 
            

        

    

    

        

            

            

        

        

            
                <el-button type='success' @click="addModal">新增</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-table 
            

        

    

    

        

            

            

        

        

            
                :data="tableInfo.list" 
            

        

    

    

        

            

            

        

        

            
                style="width: 100%">
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                type="index" 
            

        

    

    

        

            

            

        

        

            
                label="序号" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="name" 
            

        

    

    

        

            

            

        

        

            
                label="姓名" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="age" 
            

        

    

    

        

            

            

        

        

            
                label="年龄" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="address" 
            

        

    

    

        

            

            

        

        

            
                label="地址">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="phone" 
            

        

    

    

        

            

            

        

        

            
                label="手机号">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="email" 
            

        

    

    

        

            

            

        

        

            
                label="邮箱">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                label="操作" 
            

        

    

    

        

            

            

        

        

            
                width="100">
            

        

    

    

        

            

            

        

        

            
                <template slot-scope="scope"> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="editFun(scope.row)">编辑</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="deleteFun(scope.row)">删除</el-button> 
            

        

    

    

        

            

            

        

        

            
                </template> 
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                </el-table> 
            

        

    

    

        

            

            

        

        

            
                <el-pagination 
            

        

    

    

        

            

            

        

        

            
                class="work_pagination" 
            

        

    

    

        

            

            

        

        

            
                background 
            

        

    

    

        

            

            

        

        

            
                :layout="'total,prev, pager, next,sizes'" 
            

        

    

    

        

            

            

        

        

            
                :total="tableInfo.total" 
            

        

    

    

        

            

            

        

        

            
                :hide-on-single-page="false" 
            

        

    

    

        

            

            

        

        

            
                :current-page="tableInfo.page" 
            

        

    

    

        

            

            

        

        

            
                :page-size="tableInfo.pageSize" 
            

        

    

    

        

            

            

        

        

            
                @current-change="pageChange" 
            

        

    

    

        

            

            

        

        

            
                @size-change="pageSizeChange" 
            

        

    

    

        

            

            

        

        

            
                >
            

        

    

    

        

            

            

        

        

            
                </el-pagination> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--弹框部分--> 
            

        

    

    

        

            

            

        

        

            
                <el-dialog 
            

        

    

    

        

            

            

        

        

            
                custom-class="modalName" 
            

        

    

    

        

            

            

        

        

            
                :visible.sync="modal.show" 
            

        

    

    

        

            

            

        

        

            
                :width="modal.type === 'delete'? '470px' : '800px'">
            

        

    

    

        

            

            

        

        

            
                <h3 v-if="modal.type === 'add'" slot="title">新增</h3> 
            

        

    

    

        

            

            

        

        

            
                <h3 v-if="modal.type === 'edit'" slot="title">修改</h3> 
            

        

    

    

        

            

            

        

        

            
                <h3 v-if="modal.type === 'delete'" slot="title">提示</h3> 
            

        

    

    

        

            

            

        

        

            
                <div v-if="modal.type !== 'delete'" class="editNameBody"> 
            

        

    

    

        

            

            

        

        

            
                <el-form class="editNameFrom" :model="modalFrom" label-width="120px" label-position="right"> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="姓名："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.name"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="年纪："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.age"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="手机号："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.phone"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="邮箱："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.email"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="地址："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.address" type="textarea"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                </el-form> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                <div v-if="modal.type === 'delete'"> 
            

        

    

    

        

            

            

        

        

            
                <i class="el-icon-warning" style="margin-right:7px;color:#FFAA00;font-size: 16px;"></i>请确认是否删除
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                <div slot="footer" class="dialog-footer"> 
            

        

    

    

        

            

            

        

        

            
                <el-button @click="modal.show = false">取 消</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button v-if="modal.type === 'add'" type="primary" @click="addUserList">新增</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button v-if="modal.type === 'edit'" type="primary" @click="editUserList">修改</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button v-if="modal.type === 'delete'" type="primary" @click="deleteUserList">确 认</el-button> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </el-dialog> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </template> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script> 
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                data() {
            

        

    

    

        

            

            

        

        

            
                return {
            

        

    

    

        

            

            

        

        

            
                tableInfo:{
            

        

    

    

        

            

            

        

        

            
                columns:[
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                title: '序号',
            

        

    

    

        

            

            

        

        

            
                type: 'index',
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '姓名',
            

        

    

    

        

            

            

        

        

            
                prop: 'name',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                title: '年龄',
            

        

    

    

        

            

            

        

        

            
                prop: 'age',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '地址',
            

        

    

    

        

            

            

        

        

            
                prop: 'address',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '邮箱',
            

        

    

    

        

            

            

        

        

            
                prop: 'email',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '手机号',
            

        

    

    

        

            

            

        

        

            
                prop: 'phone',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {//内容slot 
            

        

    

    

        

            

            

        

        

            
                slot: 'operateT' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                ],
            

        

    

    

        

            

            

        

        

            
                list:[],
            

        

    

    

        

            

            

        

        

            
                page:1,
            

        

    

    

        

            

            

        

        

            
                pageSize:10,
            

        

    

    

        

            

            

        

        

            
                total:0,
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                modal:{
            

        

    

    

        

            

            

        

        

            
                show:false,
            

        

    

    

        

            

            

        

        

            
                type:'add' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                modalFrom:{
            

        

    

    

        

            

            

        

        

            
                name:'',
            

        

    

    

        

            

            

        

        

            
                age:'',
            

        

    

    

        

            

            

        

        

            
                phone:'',
            

        

    

    

        

            

            

        

        

            
                address:'',
            

        

    

    

        

            

            

        

        

            
                email:'' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                mounted(){
            

        

    

    

        

            

            

        

        

            
                this.initPage()
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                methods: {
            

        

    

    

        

            

            

        

        

            
                /*** 
            

        

    

    

        

            

            

        

        

            
                 * 获取列表数据 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                initPage() {
            

        

    

    

        

            

            

        

        

            
                let params = {
            

        

    

    

        

            

            

        

        

            
                page: this.tableInfo.page, //当前页 
            

        

    

    

        

            

            

        

        

            
                pageSize: this.tableInfo.pageSize //一页展示多少条 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.$axios.get('http://localhost:7001/setUserList',{
            

        

    

    

        

            

            

        

        

            
                params
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.list = res.data.data.list
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.total = res.data.data.total
            

        

    

    

        

            

            

        

        

            
                }).catch(error => {
            

        

    

    

        

            

            

        

        

            
                this.$message(error.data.message)
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 当前页发生改变 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                pageChange(page) {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.page = page
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新列表数据 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 当前第几页发生改变 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                pageSizeChange(pageSize) {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.page = 1 
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.pageSize = pageSize
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新列表数据 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //新增弹框 
            

        

    

    

        

            

            

        

        

            
                addModal(){
            

        

    

    

        

            

            

        

        

            
                this.modalFrom ={
            

        

    

    

        

            

            

        

        

            
                name:'',
            

        

    

    

        

            

            

        

        

            
                age:'',
            

        

    

    

        

            

            

        

        

            
                phone:'',
            

        

    

    

        

            

            

        

        

            
                address:'',
            

        

    

    

        

            

            

        

        

            
                email:'' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = true 
            

        

    

    

        

            

            

        

        

            
                this.modal.type  = 'add' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //修改弹框 
            

        

    

    

        

            

            

        

        

            
                editFun(row){
            

        

    

    

        

            

            

        

        

            
                this.modalFrom = row
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = true 
            

        

    

    

        

            

            

        

        

            
                this.modal.type  = 'edit' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //删除弹框 
            

        

    

    

        

            

            

        

        

            
                deleteFun(row){
            

        

    

    

        

            

            

        

        

            
                this.modalFrom = row
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = true 
            

        

    

    

        

            

            

        

        

            
                this.modal.type  = 'delete' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                addUserList(){
            

        

    

    

        

            

            

        

        

            
                this.$axios({
            

        

    

    

        

            

            

        

        

            
                method:'post',
            

        

    

    

        

            

            

        

        

            
                url:'http://localhost:7001/setUserList',
            

        

    

    

        

            

            

        

        

            
                data:this.modalFrom
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.$message.success('新增成功')
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新数据 
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = false 
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                editUserList(){
            

        

    

    

        

            

            

        

        

            
                this.$axios({
            

        

    

    

        

            

            

        

        

            
                method:'put',
            

        

    

    

        

            

            

        

        

            
                url:'http://localhost:7001/setUserList',
            

        

    

    

        

            

            

        

        

            
                params:{
            

        

    

    

        

            

            

        

        

            
                id:this.modalFrom.id
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                data:this.modalFrom
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.$message.success('修改成功')
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新数据 
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = false 
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                deleteUserList(){
            

        

    

    

        

            

            

        

        

            
                this.$axios({
            

        

    

    

        

            

            

        

        

            
                method:'delete',
            

        

    

    

        

            

            

        

        

            
                url:'http://localhost:7001/setUserList',
            

        

    

    

        

            

            

        

        

            
                params:{
            

        

    

    

        

            

            

        

        

            
                id:this.modalFrom.id
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.$message.success('删除成功')
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新数据 
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = false 
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style lang='scss'> 
            

        

    

    

        

            

            

        

        

            
                .modalName{
            

        

    

    

        

            

            

        

        

            
                h3{
            

        

    

    

        

            

            

        

        

            
                padding:10px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

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

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

评论(0) 浏览(6545)

122021-10

全面总结图表设计的思路和方法

涛涛

数据成为了日常工作的一大重要角色，越来越多的公司以数据驱动产品进行迭代。但令人困惑的是可视化图表无处不矮，但却给大家带来了误导。作者分享了一些简单的思路与方法，以此来改善这些问题，希望对你有所帮助。

越来越多的公司以数据驱动产品进行迭代，从中我们能看出数据的重要性。

日常工作中，无论是汇报还是设计，都离不开图表的使用。但令人困惑的可视化图表无处不在，往往给人带来误导性，通过遵循下面这些简单的思路和方法可以有效改善这些问题。

一、选择正确的图表类型

选择错误的图表类型，或默认使用最常见的类型，可能会混淆用户对数据产生误解。

一组数据可以有多种表示方式，具体类型取决于用户希望看到的内容。

二、根据正负值确定方向

当数据中出现正负值时，要先确定基线的位置，再确定数据位置，将正值分布在基线上侧（X轴）或右侧（Y轴），负值分布在下侧（X轴）或左侧（Y轴）。

避免在基线的同一侧同时添加正值和负值，造成用户对图表信息理解错误。

三、始终从零开始绘制条形图

单看左侧的条形图，能发现B的值比D的值要多3倍以上，但在右侧从零开始的条形图中，实际差异要小得多。从零开始可确保用户获得更准确的数据展示。

四、折线图使用自适应Y轴

对折线图来说，如果始终将Y轴的比例限制为从零开始，一旦数据波动幅度很小，那整个折线图会看起来很平坦，效果不明显。

折线图主要用来表现趋势，根据给定时间的数据调整比例，并保持折线区域能占到Y轴范围的三分之二。

五、使用折线图时考虑时间间隔

折线图是由一条条小线段连接组成，这些线段展示了在短时间内数据是如何变化的。当时间间隔很大或数据更新不频繁时，就要慎重考虑是否使用折线图。

例如想表示年收入，左侧的两个折线图样式都不太合适，每个月的收入是固定的数字，而折线图展现的数据更像是收入的变化，相反右侧的条形图更适合来展示每月具体的收入。

六、不要使用平滑的折线

平滑的折线图可能看着很舒服，但它们歪曲了背后的实际数据，而且过粗的线条掩盖了真正的节点。

七、谨慎使用双轴折线图

当两组数据出现X轴代表的信息相同但Y轴不同时，为节省空间我们可能会考虑用双轴图。

但大部分双轴图难以阅读，只是感觉图表上有很多数据，但远远没有单个图表展示的清晰。

八、限制饼图的切片数量

饼图是最受欢迎但经常被误用的图表之一。在使用饼图时，首先要注意切片的数量最好保持在5-7片。

如果还有很多占比很小的切片，可以将这些全部归到“其他”切片中。

九、直接在图表上标注

如果没有正确的标注，无论图表设计的多好看都没有意义。

直接在图表上标注数据或信息对使用者来说更直观，更节省时间和精力。

十、不要在切片上标注

将数值放在切片上虽然很直观，但可能会导致很多问题，例如左侧饼图数值的可读性问题、切片太薄无法添加数值等，对比来看，右侧饼图添加标注的方式更合适。

十一、饼图切片的排序

饼图切片的排序是一个很容易忽略的问题，将饼图切片只是一个开始，通过合理的排序保证用户清晰观看图表才是关键。

常见的排序方法是将面积最大的切片放在12点钟位置，然后按顺时针降序放置第二大的切片，以此类推。

十二、避免随机性

同样的建议适用于其他类型的图表。尽量不要默认按字母顺序排序，将最大值放在顶部(水平条形图)或左侧(对于垂直条形图)，以确保最重要的值占据最突出的空间，减少视线运动和阅读图表所需的时间。

十三、避免极端的环形图

环形图，又称为甜甜圈图,是饼图的一种变体,本质是饼图将中间区域挖空，用在多样品间的多种数据的比较中。

虽然环形图腾出中间区域来显示额外的信息，但牺牲清晰度走极端会让图表变得毫无用处。

十四、让数据自己说话

不必要的设计样式不仅会分散注意力，还可能导致用户对数据误解并产生错误印象，图表在设计上应避免：

3D元素、阴影、渐变；
斑马纹、过多的网格线；
装饰性过强的斜体、粗体或衬线字体。

十五、选择与数据性质匹配的调色板

颜色是保持数据可视化有效的组成部分，在设计时考虑3种调色板类型：

分类色板（左）适合显示分类数据，当你想区别不连续且内在没有顺序关系的数据时可以使用这种类型；
连续色板（中）适用于需要按特定顺序放置的变量中，使用色调/亮度或两者组合创建色板。
离散色板（右）是两个连续色板的组合，中间有一个中心值(通常为零)。不同的调色板会传达正值和负值。

十六、无障碍设计

根据眼科研究中心的数据，大约每12个人中就有1个色盲，图表只有在广泛受众可以访问的情况下才是成功的：

在调色板中使用不同的饱和度、亮度；
黑白打印可视化图表，检查对比度和可读性。

十七、注重易读性

确保图表排版在传达信息并帮助用户专注于数据，而不是分散注意力：

选择字迹清晰的字体，避免使用衬线和装饰性很强的字体；
避免使用斜体、粗体和全部大写；
确保文本与背景形成高对比度；
不要旋转文本。

十八、使用水平条形图代替旋转标注

这个简单的技巧可以确保用户能够更有效地浏览图表，而不会使他们感到紧张。

十九、建立图表库

如果你的任务是将交互式图表添加到Web和移动项目中，那么首要考虑问题是将使用什么样的图表？

基于定义的库(Highcharts)进行设计将确保易于实现，并为我们提供大量的交互想法。

二十、超越静态报告

通过更改参数、可视化类型、时间线帮助用户进行探索，得出最大价值化的结论。例如IOS Health结合使用了各种数据表示来发挥优势。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：人人都是产品经理作者：Clippp
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

评论(0) 浏览(1862)

122021-10

如何提升用户体验

涛涛

现代人的生活离不开应用程序，我们的手机中有着各种各样的app帮我们处理各种琐事。各大互联网公司开发多种应用商店，努力使我们的生活变得有趣，但要想提高整体的用户体验，还需要注意五点，不然再好的app也会让用户放弃使用。

1.禁止使用大段的功能介绍

我们必须要提示一下：如果一个应用程序要在手机屏幕上发挥作用——必须简单。这个应用需要使用冗长的功能介绍，才能让用户熟悉使用起来，那很可能是开发人员在这个版本中设置太多功能。用户并不介意多次更新程序，适应新版本，但他们也不可能为了使用程序而阅读长如圣经般的介绍。

2.牢记用户需求

如果想要急于求成，跳过用户调研，上线新的应用，那么失败的概率会大大增加。大多数应用开发团队都容易犯这样的错误，只拿到了用户发送给支持团队的数据。通过分析数据，就能迅速确定用户所需的功能，使用缺陷等，但是，总的来说，联系支持团队的用户是那些产生挫败感的人；那么99%（或更多）的用户从来没有和支持部门谈过？难道你不愿意让他们一直满意，而是花费时间，只让使用支持功能的1%用户满意？

即使你认为自己了解用户需求，也需要与他们进行沟通。

3.使用屏幕技术

当人们花费了近万元买了一部智能手机时，他们希望能使用手机上的所有功能。所以制作这款手机时没有任何借口在视觉内容上偷工减料（或忽视任何技术能力）。这就是用户花钱的原因，要想提高用户体验，就需要满足用户期望。

4.停用费时的设置向导

设置向导的本意是为用户提供更好的内容，更能让用户获取自己想要的。为了优化用户体验可以让用户填写一些内容，但并不意味着暴露全部隐私。最好在需要时索取，而非提前取得全部数据。

5.减少通知次

每个软件都想要发送通知，但是每一个通知都是必要的吗？每隔两秒钟就有一些应用告知用户一些无用消息，比如谁谁谁又发了微博，谁谁谁上线了，又或者谁谁谁开始直播了，可以根据用户的兴趣选取推送而不是一股脑全部告知用户，所以请尽量减少的通知消息吧！

文章来源：站酷作者：马克笔留学设计

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

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

评论(0) 浏览(1918)

« 1 ... 429 430 431 432 433 434 435 ... 1020 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

首页

背景

探索阶段-为谁在何时何地设计

实践阶段-如何设计

交互层｜低跳转-高频信息前置

信息层｜有效性-信息重组织

结语

1、搜索框结构分析

2、搜索框的常见类型

搜索图标

基本搜索框

文字提示类搜索框

功能类搜索框

3、搜索框设计状态分析

搜索前-默认状态

点击后-获取焦点

搜索中-输入内容

搜索后-展示结果

一、定义图标类型

二、图标尺寸

三、图标类型

四、图标组成

五、小尺寸图标样式

1.面性图标

2.线性图标

3.线面结合图标

4.扁平化图标

六、大尺寸图标样式

1.线性图标

2.线面结合图标

3.扁平化图标

4.拟物化图标

总结

1.以用户为中心

2.了解信息架构

3.考虑使用场景

4.了解一致性及其重要性

5.给予用户适当的控制权

6.把可用性放在首位

7.了解用户测试

8.少即是多

9.视觉层次

10.了解用户的心智模型

11.设计中的讲故事

12.不要直接跳到高保真原型上

13.可访问性测试很重要

14.熟悉并在用户体验设计中使用

15.了解交付成果的力量

16.专业的原型设计工具

17.精心管理产品需求

18.了解移动和网络产品之间的差异

19.利用UX设计模式

20.使用合适的工具才能有效

最后

常见场景

直觉真的不如推理靠谱吗？

为什么要为自己的设计辩护？

如何突破直觉，能言善辩？

总结

js的防抖与节流

防抖事件

节流事件

完整的html

前言：

这个章节内容是比较多的，分为前端部分和后端部分。

目录：

实现效果：增删改查

一、后端部分：

（1）数据库：

新建一张表user,设置几个字段，效果如下：

（2）egg逻辑部分：

提供的接口：http://localhost:7001/setUserList

（3）egg具体实现步骤：

1、router.js中添加：

2、新建：app / controller / new / user.js

（1）查，模糊查询

（2）增

（3）改

（4）删

user.js 源码：