正如题目所说：细节决定成败，微交互就是利用细节提升产品体验和设立品牌标志。

一、摘要

直到今天，人机交互已经有很长时间的发展。从例如烤面包机的简单产品到银行应用程序类的复杂数字产品，我们每天进行上百次的交互。这些交互转化为产品的可用性，最终转化成用户满意度、信任度和产品整体体验。

在过去的二十年里，设计师们一直在关注这些交互（按钮、滚动、长按等）。从电脑大屏幕到移动设备、智能手表以及现在的可折叠设备，交互也在不断地发展。本文研究了微交互的结构及其与交互模型的关系，审美体验的不同驱动力，以及我们如何通过改变微交互的元素来优化体验。最后，我们讨论了自下而上的产品构建方法。

二、简介

自灯泡、收音机、门铃等电气设备出现以来，微交互一直存在于我们的生活。微交互和技术共同出现、发展。在我们的日常生活中充满了与周围物体的微交互，例如使用烤面包机、解锁手机、将手机切换到静音模式、控制音量等。

从简单的按下按钮到摇动手腕激活智能手表，微交互随着技术的进步而不断发展。像复制文本或移动文件这类我们如今习以为常的、无形之中的微交互，都曾是新颖的微交互。观察微交互有助于设计师改进产品。

有趣的是，设计师将现实生活场景投射到产品来建立微交互，如剪切-粘贴、放大-缩小等。这些细节不仅提高了产品的可用性，也通过直观的互动降低用户学习难度。

我们如何准确定义什么是微交互，什么是交互？

论文《开启移动微交互》（Ashbrook，2010）将微交互定义为“接触设备开始到完成的时间不超过4秒的互动”。而《微交互》一书（Saffer，2013）将其定义为：“微交互是围绕着单个用例的产品使用场景——它们有一个主要任务。”整个应用程序或产品可能只是一个微交互，例如，天气应用程序（图1.1）或烤面包机，因为它们只关注一件事。

图1.1 天气应用程序能被看作是一个微交互，因为它只显示天气。

图1.2 LinkedIn 的“喜欢”按钮由两个微交互组成，（a）当你长按“喜欢”按钮时，它会打开一个空间展示多个表情符号以供选择（b）你选择表情符号发送给帖子。

一个功能可以由多个微交互构成，例如LinkedIn的“喜欢”按钮（图1.2），人们可以对帖子发送不同的表情符号。因此，微交互是一个功能模块，或者是整个产品。与产品互动时，微交互也许能帮助用户了解做什么，如何做，后续是怎样。精心设计的微交互使产品变得直观，优化了产品的用户体验。

当微交互打造了与品牌产生共鸣的特殊体验时，它化身为了品牌标志。专业术语称之为“标志性时刻——产品或服务中给人留下持久而难忘印象的突出互动”（Janhagen, Leitch & Judelson, 2020）。

Facebook的“喜欢”按钮是它的标志性时刻。微交互并不仅仅局限于视觉，它们可以是声音、触觉、实体硬件或手势交互。Snapchat的通知作为产品的标志性时刻是因其独特的声音。同样地，iPhone有一个中心按钮作为苹果的标志，它有多个微交互方式。

微交互通常首选（Narvhus, J.M. 2016）：

• 沟通反馈。
• 开启和关闭某项功能，如将手机静音。
• 实现一个单一的任务，如喜欢一个Facebook上的帖子。
• 控制一个正在进行的进程：显示更改或系统状态，如加载条或状态图标。
• 改变一个设置。
• 防止人为错误。
• 查看或制作内容。

我们将在之后的章节中研究一些微交互案例。

三、交互模型与微交互结构

1. 人类处理器模型

在进入交互模型之前，我们将尝试研究心智和心智表征，以更好地理解人类如何与世界上的物体互动。(Newell & Card, 1985)文章谈到了三个不同的处理器：感知处理器、认知处理器和运动处理器是如何工作以理解周围世界。

认知处理器与长期记忆和工作记忆一起工作，从现有的知识中提取物体、感觉、行动等的表征，以理解来自知觉处理器的输入。一旦认知处理器完成处理，它就会向运动处理器发出信号，以特定方式对特定情况采取行动。心智表征是现实世界中事物如何运作的心智模型或理解。

2. 诺曼交互模型

唐-诺曼的七个行为阶段（诺曼，2013）（图2）是一种更清晰的心智学形式，解释了人类如何与物体互动以实现目标。目标可能是打开一盏灯或在移动应用程序上进行在线交易。让我们把手机解锁的简单目标分解成七个行动阶段。

1. 目标是手机解锁。
2. 我如何解锁手机？输入密码或扫描手指指纹。
3. 选择哪个方式？如果我选择输入密码，那么就在屏幕上按顺序点击密码。
4. 一旦我有了行动规范，就可以执行任务。
5. 点击回车键后，将看到后续发生的事情。
6. 我看到我已经到达了主界面。
7. 我根据以往经验判断是否已经完成了目标。

在这个循环的每个阶段，都有一个输入->处理->输出的过程。在宏观层面上，我们也在遵循同样的过程来达到我们的目标。我们可以从行动模型的七个阶段推导出互动周期（Norman, 2013）（图3）。

交互周期包括执行过程和评估过程，前者是行动所需信息差，后者是行动发生时各类情况所需理解的信息差。整体用户体验取决于交互过程中互动周期的每个部分。微交互的目标是消除差距，使产品变得直观。现在让我们看看微交互的基础结构，了解它们如何帮助消除信息差。

3. 微交互的结构

微交互之所以强大，不仅仅是因为它们的细微交互差别或迷你尺寸，还因为它们构建的方式。微交互的结构包括四个部分（图4）（Saffer，2013）：开启微交互的触发器，决定微交互如何运作的规则，以及影响微互动的元规则——阐明规则、循环和模式的反馈。

触发器可以由用户触发，例如点击图标、填写表格等，触发器也可以由系统产生，例如低电量提示框，通知用户电池电量不足。

让我们以Duo应用中验证用户的微交互为例。

• 触发器：向我发一个推送通知是微交互的触发器（图5(a)）。
• 规则：它将发送带有两个动作的通知（图5(b)）。用户必须点击这两个动作中的一个（图5.(c)）。
• 反馈：一旦用户点击批准，它将显示带有“登陆”的绿色提示。(图5.(d))
• 循环和模式：如果你选择了在7天内记住本次登陆，下次登录时它将直接显示绿色提示，而不是向你发送推送通知。

现在当我们解构微交互并理解其结构时，微交互的结构支持行动七阶段理论，最终帮助消除执行和评估之间的鸿沟。精心设计的触发器便于用户进行计划->指定->执行行动，精心设计的规则和反馈便于用户进行感知->解释->对比结果确认完成目标。我们将在下一节中谈论触发器、规则和反馈的设计，以了解微交互如何有效构建所需的用户体验。

我们回看心智部分，认知处理器不仅包含了不同事物如何工作的心智模型，并且随着我们在日常生活中对新物体的体验而不断地发展。从这些心智模型中，设计师可以创建概念模型。作为关于产品和功能运作的高级计划，概念模型一旦被建立就能被转化为行动模型的七个阶段，从而帮助我们创建对用户来说很直观的微交互。这是一种自下而上的方法，用于建立交互 -> 功能 -> 产品。

四、审美与微交互

在上一节中，我们谈到了交互模型和微交互的结构，并探讨了它们如何携手使产品变得直观好用。现在我们将关注动态审美体验，以及微交互如何在产品的微观层面建立体验。

审美体验的韵律之舞有一个内在的、动态的结构。杜威指出了体验建立的相关过程，如累积、保存、紧张张力和预期，来指称体验的内部动态（McCarthy & Wright, 2004）。

完整的用户体验是这些动态的集合，它可以根据用户过往经验和知识认知而变化。过往经验和任何审美经验都取决于上下文：用户的过往和能力，人工制品的技术，以及互动发生的任一物理、社会空间（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。当我们与物体/产品互动时，触觉、嗅觉、视觉和听觉都会唤起体验。

在过去的几十年里，设计师们一直在关注这些触发奇迹的交互。交互不应该仅仅是传达内容和完成任务，它应该引人思考，并鼓励人们以不同的方式思考变化。我们将展示一些唤起了不同审美体验的动态微交互案例。

1）积累：指伴随着体验时间展开的积聚。我认为谷歌支付作为微交互建立了用户体验，并包含非常优秀的展开界面和支付完成音效。

这个之所以判定为其微交互，是因为它只专注于一件事，而且建立了非常充实的体验。这个交互开始于点击支付端->选择银行卡->加载->支付完成（图6）。动画和音效带来了一步步徐徐展开的体验感受。

2）留存：指保留一些过往事物的趋势，不论体验还是内容。文本或信息的保存对优秀用户体验来说确实是必要的，毕竟这样能减少认知负担。在网站和应用程序上填写表格时，许多微交互都保留了之前的填写信息。

这类微交互的一个非常简单的例子是，当你复制一个链接并试图将其输入网络浏览器时，浏览器会显示直接粘贴链接的选项，甚至显示你复制的内容（图7）。我们在这此观察到与微交互的结构不同的是重点更多地放在了交互的反馈上，它传达的状态是：你复制的内容已保存，并可以用来搜索网页浏览器。这是一个展示了我们如何调整微交互侧重点来优化体验的优秀案例。

3）张力：指体验内和参与体验的人之间的关联。这是社交媒体和流媒体平台使用的一种技术，当用户期待在短时间内快速阅览内容时，用户不断下滑来反复触发刷新的微交互（图8.） 。微交互带给用户参与感以牢牢抓住其注意力。它带来的延迟满足，让用户在想快速浏览内容时耐心等待。

这个特殊的微交互的重点是方式：即在内容加载之前显示一个加载器。

4）预期：它包含两个时间阶段。第一阶段是用户在交互中开始期待，第二阶段是用户从交互中得到期望反馈。我想到的微交互是Google Pay India的刮刮卡奖励（图9）。

这个特殊的微交互为它在印度带来了巨大的成功。人们喜欢期待好事发生，即使期望没有发生。若是期望发生，那期待就是值得的。支付完成后，用户进入刮刮卡奖励界面，对刮奖产生期待，点击卡片进行刮奖。刮奖微交互的重点是动作的触发上，兼具有趣性和参与感，触发本来可以只是一个点击按钮，但他们设计了一个刮擦动作作为触发。

上文提到的各种例子可看出：通过调整微交互的元素来优化体验。微交互小而强的原因在于：它们是产品的差异化细节。好的微交互能让产品提升一个等级。

五、微交互会引人讨厌吗？

我们认识了精心设计的微交互在创造美好体验方面的力量，现在让我们来探讨一下，如果糟糕的微交互可能会引发什么问题。

我想到的案例是手机通知。并不是说通知很糟糕，而是它设计得如此之好，以至于它有违用户的意愿。通知是由系统发起的触发器，它仅显示部分信息来吸引用户点击。

每个人都会遇到这样的情况：明明只是想看看时间，但在看到通知时点击进入信息，无声无息之中半个小时就耗费了。这不仅仅耗费了时间，更严重的是人们在驾驶时也会分心看通知。

另一个案例是 Facebook 的著名的“喜欢”按钮。这个精心设计的微互动，是 Facebook 的标志，但没有人意识到一个微互动可以对人们的生活产生如此大的影响。近期 Instagram 停止显示帖子上的点赞数，因为它对用户行为产生了负面影响。上面的例子也显示出：小事情可以产生大影响。

微交互也会令人讨厌，例如，在填写表单最后点击提交时，弹出一个对话框（图10），说表单填写中存在错误。这里的触发器是提交按钮，规则是显示一个对话框，反馈是静态文本——“有填写有误”。

这里的微交互形式是错误的，如果填写有误，提示应该在出错点附近。而且这里的反馈是糟糕的静态文本，对用户没有任何用处，因为它没有说明出错的位置和类型。因此，微交互的使用和场景真的很重要。

六、结论

纵观全文，我们探讨了什么是微交互，以及如何创建符合交互模型的微交互来消除执行和评估之间的差距。接下来，我们研究了动态审美体验，以及我们如何在产品的微观层面上用微交互创造美好体验。

设计师有几种方法来创建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一种方法是把整个产品看成是一个微交互，如果你想增加另一个功能，那么就把它看成是另一个只包含一个微交互的产品。

我相信谷歌支付是以这种方式创建的，因为它是从支付开始，且只专注于支付，后来才引入了奖励和其他内容。

微交互有助于建立一个品牌标志和提升用户体验。我们喜欢或者讨厌产品的根源正是细节。细节是向用户展示你以用户为中心并为用户着想的方法。这就是微小的事情会带来巨大差异的原因。

作者：三分设

来源：人人都是产品经理

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

讲到UX文案，大家可能并不陌生：一个按钮、一个弹窗的文案填充，我们几乎每天都要与他接触。但即便如此，大家对他的态度通常是得过且过的：“文案嘛，有了就行，看得懂不出错就好，没什么值得注意的”。

确实，作为设计师，我们关注交互流程、视觉呈现，但UX文案似乎从来不是我们的首要考虑；在很多时候，文案与我们的设计流程是分裂的：要不就是设计完成后再填入，要不甚至直接让产品经理来提供文案素材；文案撰写，好像从来没有被我们真正重视过。

但UX文案真的只是一个无足轻重的辅助位吗？

一、 UX文案的重要性

首先，先抛结论，UX文案并不是无足轻重，相反的，它是好的产品体验中不可或缺的一部分。并且随着时代的发展和新兴应用场景的涌现，它对于产品体验的重要性正直线拉升。

在我们还将UX文案看作一个可有可无的流程时，一些先进的企业就有远见的意识到了它的重要性：早在2017年的I/O谷歌年度开发者大会上，三位职业UX文案作家就向我们展示了UX文案如何切实地为谷歌带来了产品数据的提升：

在用户在搜索”酒店“相关内容时，谷歌将直白的文案 “预定房间” 改为了更贴合用户心智的 “查看房源情况”；这一小小的改动，带来了17%点击量提升。

随着UX文案的价值不断的被发掘，在海外，已经有越来越多的团队将UX文案写作作为一个细分的的独立专业来看待。例如，在国际最大的旅游电子商务公司之一Booking.com，曾在不到一年的时间里增加了40名UX文案岗位，达到了每5或6个设计师中就有一个UX文案设计师的夸张比例。

二、 重新认识UX文案

面对海外对于UX文案的重视度激增场面，我们心中可能不免疑惑：“不还是为页面配文而已吗？平常不起眼的工作，怎么现在就好像突然变特殊了呢？”。

存在这样的误解，是因为我们对UX文案的认知还停留在过去，始终认为它仅仅是一个辅助位，最多起到“锦上添花”的作用，并不能真正影响核心用户体验的好坏。

而实际上，与我们印象中的边缘形象不同，UX文案（UX Writing），也叫内容设计（Content Design），所涉及的知识横跨体验设计、内容策略、用户调研，是一个多元的、完整的设计学科；旨在基于同理心与专业沟通技巧，通过合适的文字信息，在产品使用过程中为用户提供愉悦的体验，远不只是“为按钮填词”这么简单。

而随着时代的发展，UX文案的覆盖范围、呈现方式以及工作流程等都已经发生了巨大的变化；站在设计师的角度，我们希望通过以下几个方面介绍UX文案与过去相比发生了哪些变化，来帮助大家消除对UX文案的刻板印象，重新认识它在我们设计中扮演的角色，并学会运用它为用户呈现出更加优秀的产品体验。

1. 从「文字」到「语言」

首先，如今的UX文案有着比之前更广阔的范畴：过去关于文字，如今关于语言。

以前，我们讲到UX文案，指代的可能只包含APP里的标题、按钮等静态文字；但如今，随着智能家居、智能车机等新兴领域对于语音交互能力展现出的强需求，以及类似喜马拉雅等播客产品的持续火热，UX文案已经慢慢跳出了文字的范围，有了更广阔的发挥空间。

想象一下，当你结束疲惫的一天回到家时，你的智能家居助手应该以怎样的语气向你问好？应该使用什么措辞能最精准地得知你的意图？这些动态的、无实体的语音内容，也逐渐成为UX写作要关注的重点内容。

简单说，如今所有用户和产品产生交流的场景，都可以划分于UX写作的范畴。得益于科技的发展，UX写作逐渐地更接近了自己最终的目标，慢慢跳出了静态页面的框架，得以真正的与用户产生有意义的、愉悦的语言的交流。

2. 从「填充页面」到「主导页面」

其次，UX文案与过去最显著的不同之一是：不再仅是为页面填充文本，更多的是根据信息主导页面。

以下面一个常见的对话框为例，仅有一个小小的对话框来承载超额的信息；如果根据之前的“填充页面”的观念，我们要做的其实很简单，就是根据行文规范删减、重新排列文字，试图把过量的内容塞进小小的容器。

这样得到的结果在视觉上看起来可读了一些，但似乎也不尽人意。

这就是典型的机械性的填充页面，信息的展现完全受制于已给页面的结构，实际上已经脱离了更好传递信息的初衷。

如果我们调转思路，试着真正从传递信息本身出发，就能很明显的发现，原来的对话框最大的问题不是文字长短，而是信息过载—强迫用户在有限的空间里一次性确认两类信息：更改时间和通知参会人。而在我们上面的方案里，这个问题并没有被解决。

当我们真正开始用信息主导页面，应该做的是将一页多个问题拆分为每页一个问题，分步响应用户，对冗杂的信息进行分解，以真正创造清晰有效的对话。

如果体验没有达到理想的效果，通常需要改进的是整个设计，而不单单是文字。我们需要逐渐去理解的是，页面在根本上是信息传达的媒介，一昧的修改文本来适应页面，反而是本末倒置的做法。

3. 从「单纯可用性」到「体现品牌声音」

目前，UX文案通常仅需要保证基本的功能可用性；即使是已经有文案规范的团队，更多的也是将其作为辅助位，保证文案“有一致性，不出错”即可；对于品牌形象、差异化的诉求则基本一笔带过。

相较于UX文案，大家习惯用Icon的质感、品牌色的搭配等视觉的呈现去传递品牌声音，因为这样的效果简单直观，是可以直接被“看得见”的，这点无可厚非。

但随着语音交互的兴起，以及近年来轰轰烈烈的品牌去色化趋势，单纯的利用纯视觉的呈现来塑造品牌形象变得没那么万能了，与此同时，UX文案对于品牌形象的重要性也逐渐被发掘；我们发现，在很多时候，一句措辞得体的语音信息，或者是一句抓人眼球的标语（Slogan），就足以弥补视觉上品牌呈现的缺憾，甚至更能与用户产生共鸣。

这就需要UX文案在保证基本的可用性的基础上，更要考虑什么才是真正适合自己品牌的声音。

例如Google Earth 过去的一句经典的标语：“Hello, Earth”，这句标语完美的契合了Google Earth的品牌形象，它简洁正向，并且和产品名称之间有巧妙的双关，即代表了产品本身，也暗示了Google Earth带领用户去探索世界的功能定位。

仔细观察苹果、谷歌的产品，你就会发现从他们的UX文案除了保证了基本的一致性和可用性外，偶尔会隐藏一些小巧思，这些小巧思与他们的品牌形象相互呼应，能让用户在产品使用中潜移默化地对其品牌形象、产品价值观形成认知，而这样与产品体验本身结合的认知构成往往更加坚固，比传统的广告宣传更容易让人信服与认可。

三、 怎样做得更好，一些实用小tips

随着UX文案越来越广阔的范畴，我们过去熟悉的工作方法已经并不完全匹配如今UX文案的目标了；因为它包括的已经不仅是单纯的文字内容，更多的还有文案之间的层级结构、什么时候出现这段文字，以及这段文案向用户传递了什么情感等等，这已经超出简单的行文规则所涵盖的了。

那么，我们怎么才能真的做好UX文案呢？

我们根据以往的项目经验，总结出了除了通用行文规则之外，三个在关键节点上可以做到的几件小事，希望帮助大家能找到真正适合、高效的设计方法，并打造出优秀的UX文案。

1. 流程——更早地加入

首先，最基本也是最重要的：在流程上，永远要尽早的考虑文案问题。

我们过去熟悉的设计步骤是：“先把产品设计好，将有文字的地方空出，最后再填充。”

这样带来的问题是：关键的体验问题直到最后期才会被注意到，留给UX文案的发挥空间十分有限，能做的只是为糟糕的体验贴上掩饰的创可贴，并不能真正避免糟糕体验为用户带来的伤害。

正如我们上面所说，UX文案不仅仅是填充文字，它的核心是在产品与用户之间创造合适、愉悦的对话，所涵盖的内容几乎横跨产品体验的每个流程。

因此，要想真正缔造好的UX文案，永远要尽早地参与到设计流程中，这样才能真正的找出体验的问题，并最大限度的发掘UX文案究竟可以为此做些什么，创造与用户真正有效的交流。

2. 方法——模拟真实的对话

其次，在我们着手输出UX文案时，请尽量在脑海中模拟真实的对话场景。

这个方法来自于最近的全球开发者大会（WWDC22）上，苹果设计团队向大家分享的UX写作方法框架：“PACE”：Purpose（目的）、Anticipation（预判）、Context（环境）、Empathy（共情）。

其中，在Anticipation（预判）里提到了 “将UX文案想象成一种对话” 的概念，意思是在设计产品的过程中，应该把页面上的文字看作一个与用户的对话，而不只是一个静态的短语；这样能更好的帮助我们预判用户的诉求。

想象在这样的场景：当你的用户在周末的晚上打开手机，开始调节明早起床的闹钟时间；你会怎么设计这里的UX文案呢？

使用流程似乎很简单：打开闹钟app，调节明早闹钟时间，确认设置完成。

上述的交互没有问题，用户可以清晰的完成设置。但如果考虑到上面提到的 “想象成一种对话”，那这个流程就还有可改进的地方。

因为在一段有效的对话中，交流应该是有来有往的：其中的角色应该有时在聆听，有时在发言；而不应该仅仅一方是单方面的输出（在上述的场景里，仅仅是用户一股脑的对闹钟app进行信息输出，闹钟app只是单纯的服从命令，这不是一个正常对话的模式）。

让我们想象是自己在跟用户在交流，就能很容易地发现用户想传递的底层信息并不是 “我要调闹钟了 ”，而是 “好不容易到周末了，我明天要多睡一会”，能解读到这一层话外音，我们就成功利用“对话”预判了用户的目的。

打开ios的起床闹钟试一下，你会发现它比我们的基础流程多了一个贴心的询问 ：“你要将此更改应用到这个定时中的所有周末吗？”；在这里，苹果实际上做了两层预判，第一层是预判绝大多数人的周末和工作日起床时间是不一样的，所以将复用的范围限定在了周末；第二层预判是在大多数情况下人们只能确认明天的起床时间，所以主选项是“仅更改下个闹钟”。

简单的一个改动，就把机械性服从命令的程序，变为一个有智慧、思想的助手。如果我们在每次输出文案时，都能试着想象真实的对话并剖析，可能就能逐渐把一个“可用的产品“变成“贴心的朋友”，真正地走进用户的内心。

3. 验证——大声地念出来！

最后，如果你还是觉得心里没谱，不确定是否输出了合适的文案，有一条被苹果和谷歌共同推荐的验证方法，简单粗暴但有效，那就是 “大声将你的文案念出来”。

就像我们刚刚反复强调的，UX写作其实就是与用户创造有效的交谈，那么最简单的验证方法就是真正说出来，将它真正变成一段对话，然后再去聆听，最直观的感受到你的语言听起来是否自然不生硬？是否有一些不易察觉的重复或语法错误等等？

大声地将你的文案念出来，如果能使你自己信服，相信也能使你的用户信服。

四、结语

最后，读到这里，相信你已经对于UX文案有了一个全新的认识，并对如何做好它有了基本的概念。其实在日常工作中，每个产品对于UX文案的要求可能不尽相同，但重要的是作为设计师，我们能意识到他逐渐攀升的重要性并真正对他加以关注。引用苹果开发者大会上的一句话：UX写作其实就是始于对屏幕另一侧用户的好奇心，并真正怀着尊重和理解与其交流。只要能意识到这一点，相信大家都能呈现出真正有效的、令人愉悦的UX文案。

作者：腾讯ISUX
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

前言

博学多闻，不同凡响。

博闻美育，是一款致力于提升用户文化素养的产品。研发团队以“长见识，会思考，懂审美”作为核心理念，设计出《中国故事》《四方采风》《高端文学》等的系列课程。

面对一个真正落实人文素养的全新课程产品，我们作为视觉设计师，首先希望的就是为用户打造出最美的课堂，使用户在高品质的美学场景中能沉浸式体验到学习的乐趣。当然，我们同样希望探寻如何通过设计帮助青少年在使用产品时养成高审美意识，加强文化自信。

在此次对博闻产品的视觉品牌设计中，设计团队探寻了如何将视觉设计体验与课程教学更好的结合，以下为我们的设计过程以及设计成果。

设计目标：提升学习体验

首先，我们通过对产品特性的分析，明确了此次视觉品牌探索的主要设计目标 —— 重新定义什么是提升学习体验的人文素养产品，从用户视角转变为参与者，更加沉浸于课堂。

基于对设计目标的进一步探索，我们提炼出了提升学习体验的三种核心理念：

核心理念：情 感 | 经 典 | 沉 浸

情感 · 价值认同

近年来，国潮文化与传统艺术在青少年群体中“走红”，成为青年对话传统的方式。体现了青少年对中华优秀传统文化的价值认同和情感认同。我们希望在青少年养成审美与内在的关键阶段，也尽到自己的一份小小的努力。

经典 · 传承创新

在保留传统艺术精华的基础上，我们寻求视觉上的创新，突破设计的思维惯性，使用户可以通过现代的视觉表达形式与经典文化产生共鸣，传达国风之美，多角度唤起青少年用户对于传统经典的文化价值和艺术价值的理解。

沉浸 · 专注体验

我们希望将国风之美呈现在用户面前，将有道博闻系列课程全面包装成能够让学生身临其境的国风互动课堂，丰富用户的心智，发挥产品的双重价值。

设计策略：探索国风之美

确立核心理念后，我们将中国传统艺术中的精髓进一步提炼，最终选择了以下关键词作为视觉设计的表现点：

接下来，我们基于各个关键词对具体方案展开探索

01 国风之美 · 符号

容纳承载，历史渊源。

为了确保博闻三个系列的课程（《中国故事》《四方采风》《高端文学》）在品牌视觉设计上能够更好的进行拓展应用、传播差异化、与用户情感共鸣。我们结合了三个系列课程的特点与对传统文化的研究，分别为各个课程建立了代表性的元素作为超级符号，加强用户的记忆点：

① 中国故事 —— 讲述中华经典

中国故事系列课程会通过诗、词、歌、赋、散文、小说全类型文学作品，讲述中华经典。玉玺作为皇帝的玉印，是至高权力的象征，在各朝各代中见证了各色各样的传奇故事。因此选用【玉玺】作为中国故事的符号图形。

② 四方采风 —— 探访文化名城

四方采风系列课程首次“走出屏幕”，采用文化直播结合外景采拍的形式，在历史文化名城中讲述各地的风土人情。使用【中国古建筑】作为这一系列课程的超级符号，见证和反映了各地社会的发展和历史变迁。

③ 高端文学 —— 精读文学作品

高端文学系列课程将带领用户学习重磅文学作品，该系列选用【卷轴】作为代表符号，卷轴不仅承载了国人对中国绘画、书法的认识，更是写入了古人的思想与信念。

在确认好三个系列的代表符号后，我们将构图一分为二，左边作为系列的重点信息区域，右边作为符号以及视觉表现区域。

02 国风之美 · 色彩

浓墨淡彩，总相宜。

在视觉品牌的色彩方面，我们从古代写意的浓墨重彩中，提取出了富有中国气质的一抹颜料。

历史厚重的「红」，风光写意的「绿」，静心阅读的「蓝」代表了三个系列课程各自独有的气质。

03 国风之美 · 书法

刚柔并济，行云流水。

我们依据行楷的笔画特点，设计了三个系列的第一识别字体。「行楷」介于楷书与行书之间，比端正的楷书多一分活泼自由，又比随性的行书多一份端庄。我们在此行楷的灵活中增添一抹稳重，刚柔并济，恰到好处。

第二识别字体的设计灵感来源于印章。「印章」的历史可以追溯到战国，至今仍在生活中广泛应用，古人凿铜刻玉，力艰功深，我们希望这种信念依旧可以传承在青少年的品格中。受到印章印面形式的启发，设计了第二识别字体。文字采用现代字体为基础，增加辨识性。

04 国风之美 · 国画

清新淡雅，水天一色。

国画，以其永恒的艺术魅力穿越时空。国画的绘制讲求布局、造型、运笔、赋彩，不拘泥于自然物象的再现，强调主观意境的创造，是中华民族传统文化的瑰宝。我们借鉴了国画中工笔画的「留白」构图理念，并添加水墨画中的「墨韵」作为细节补充，创作了既符合现代视觉风格，又不失古韵的插画；

最终，我们将提炼出的「符号」「色彩」「书法」「国画」这四个关键词融合在系列课程之中。

创作作品凝结：深挖沉浸体验

01 除了赋予课堂知识，我们还能为用户做什么？

除了设计课程产品常规的讲义以及线上页面，为了进一步提升用户的沉浸式学习体验，有道博闻独创了「手账本」这一教辅材料，并且随课程附赠可以使用户进一步体验传统艺术魅力的「国风礼盒」。

02 如何使用户更加沉浸地参与课堂？

「手账本」可以帮助用户将课上的知识融会贯通，并收入「手抄报」「旅行MAP」「作家名片」「思维导图」等模块，让用户深度参与到【输入-加工-输出】的产品结构中，使用户充分吸收课堂知识、加入自己的思考理解，并最终输出观点和总结。【听-想-做】循环，巩固知识印象。我们最终会收集用户的优秀作品，并集结成刊，出版成册，进一步提升用户的参与度，增强他们的学习热情。

在手账本的视觉设计中，我们根据课程内容绘制了精美插图，考虑到用户书写的便捷性，设计了古风的书写外框，力求用户可以时时刻刻沉浸在充满国风之美的课堂中，使视觉设计与教学内容完美融合。

03 所有心意，只为准备给喜爱课程的你！

「国风礼盒」将“长见识，会思考，懂审美”的概念植入到礼盒的选品和包装中。封面设计我们选用了「时空穿梭」的概念，通过时空隧道，串联古今，大开眼界。礼品内容里，充分尊重用户的喜好，最终选取了「国画颜料」「手绘扇子」「国风笔记本」「考古盲盒」。每一份礼品，都充满着我们对它的严格要求和对用户参与的期待。

写在最后

“古老的种子，它生命的胚芽蕴藏于内部，只是需要在新时代的土壤里播种。”    ——泰戈尔

中华传统文化正是一颗充满惊喜和生机的种子，静待着我们的细心发掘。我们会继续探索，用设计在新时代中传承优秀传统文化。让传统艺术拥抱青少年，让东方美学成为青少年心中最引以为豪的文化。

本次有道博闻项目的设计过程中，我们牢记以用户为中心的理念，做与课程产品融合的设计，最终收获了一份宝贵的经验，也获得了用户的一致好评和赞许。未来，设计团队也会坚持做以用户为中心的产品，传达设计的力量。

相信种子，相信力量。

                         

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系。 



作者： 有道LCT设计团队  来源：站酷





分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

01 前言

你有没有注意过，App底部的图标是如何变成选中的？大多数产品是将静态图标替换（硬切过渡），来完成状态切换。

当我看完上百个动态后，找到了更有趣的方式...

02 App底部导航构成

通常由图标、文字/点线装饰、和底板卡片组成，（当然也有些产品只使用图标或文字），但设计师在进行动态设计时则是针对这3部分。

03 Tab Bar动态类型

• 图标动态
• 装饰元素动态
• 底板卡片动态

动态效果由弱到强，视觉层级由低到高依次排序：图标动态 — 装饰元素动态 — 底板卡片动态。（根据本文案例效果来排序，但效果不同会有所差异）

▍图标动态․
我们知道图标风格可以简单的分为：线性、面性还有线面。在这基础上通过修改颜色或造型，又能延展出更多风格。

• 在底部导航中，假如图标选中前后都是线性风格

最常用的是添加修剪路径（Ae的一种路径效果），你可以把它理解成托尼老师，可以通过调整百分百参数来控制线条生长。

但只是单色修剪，看起来很单调。我们可以在这个动画基础上再多复制几层，并分别加入品牌色，这样可以让视觉看起来更丰富。

也可以换一种方式，只调整不同颜色图标的位置属性，便能得到故障效果。

如果你觉得这些太浮夸，那么单个图标添加修剪路径，再配合位移、旋转等基础属性则是更好的选择。

• 假如选中图标是面型风格

通用的方法是调整不透明度，相比于硬切更柔和，且不会过多吸引用户注意力。但对于带有娱乐类属性的产品来说，可能会显得有些普通。

我们可以考虑使用遮罩来制作动态，首先在图标周围绘制几个圆，再将图标外轮廓，作为圆的遮罩，来控制其显示范围，最后调整圆的缩放即可。

在一些特殊的时间，设计师们可能会技痒，而将图标绘制的更加丰富，来营造氛围。

对于这类图标，只需要参考它们的物理状态[下方解释]，再遵循从下往上，从中心往四周扩张的原则来调整基础属性，便能制作出细节丰富的出场动画。

（物理状态：该物体在现实场景下的状态，上图奖杯真实世界状态通常是放置地面，所以出场方向是从下到上。但假如你的图标是锦旗，那么物理状态应该是挂在墙上，所有出场方向是从上到下）

当然如果去掉高光和投影，在制作一些动态时会更方便。
例如：复制一颗星，将其初始位置设定为一个奖杯的距离，并记录关键帧，然后整体再移动一个奖杯距离。耳朵则调整路径来完成移动和变形，这样便能营造出3d旋转的错觉。

• 假如选中图标是线面风格

对于结构复杂的图标，可以提前分层。其中线条依旧可以使用修剪路径（在Tab bar中，不同图标修剪路径的起始点方向通常相同，以便保持一致性），而填充只需要调整元素缩放，并借助蒙版限制其显示范围就行。

▍装饰元素动态․
如果你觉得前面这些方案不够新颖，那我们可以对装饰元素下手。（当然这类方案很少见，原因在于商业价值不足，实现成本高，所以这里也只是提供一些创意练习思路）
在一些年轻化产品中，如果图标含义很容易理解，那么设计师可能会用线或点来替代文字，让整体更简洁。
国外设计师Tubik，通过让点元素在移动时呈现心电图样式，让人眼前一亮。

通过动态效果，甚至能体现出产品行业属性。

• 基于这种思路，我们同样让装饰元素放在下方

尝试修改轨迹样式，然后为元素不透明度和位置添加动画，你能猜出这是什么类型的产品吗？

又或者再夸张些，将轨迹设计成电路图。其中线条添加修剪路径，再借助Ae路径跟踪方法，使圆点沿路径运动。最后通过蒙版来控制整体动画显示范围，这个方案看起来适合科技或游戏类产品。

• 装饰元素还可以放在上方

通过调整元素路径来改变其造型，模拟液体滴落，再通过蒙版缩放，让选中状态下的图标出现。

• 装饰元素还可以放在中间

假如你的图标设计的足够巧妙，我们可以提前绘制好关键笔画的运动轨迹，便能通过修剪这条轨迹来完成笔画的移动。

▍底板卡片动态․
这类动态少见的原因在于其动态效果面积大，视觉层级高，容易过度吸引用户注意力。目前也只是在个别产品中看过卡片凸起效果。

• 当选中图标时，让卡片凸起

在Ae中要制造这样的效果，最先想到的可能是调整卡片路径，但这样的方式在制作弹性时非常麻烦。

我们有更简单的方法，先多画出一个圆，然后与卡片路径合并。
为了让边缘圆滑，整体添加高斯模糊和简单阻塞，分别加大参数，便能让边缘圆滑。（这种方式有个缺点：会收缩原有卡片宽高。所以添加效果后，需要借助参考线再次调整卡片大小）

完成圆滑处理后，修改其他元素的基础属性即可。

目前能记起的只有美团外卖看过这效果。但为了降低视觉干扰，其弱化了弹性次数。

• 除了凸起，还可以凹陷

这个效果灵感来源于Dribbble设计师（EuroART93），我们只需要将凸起案例中，圆与底板卡片的布尔运算模式改为相减就行，其他元素同样调整基础属性。

此方案目前还没有在其他产品中看过，究其原因还是效果太过抢眼。

看了这么多，其实不难发现。同一个图标，只需要改变不同属性或元素的运动方式，便能带来不一样的感受。

或许创意的产生，并不是脑袋突然迸发出全新的东西。而是许多我们熟知的旧有内容组合了起来。
正是它们之间这种奇妙的融合，给我们带来了新鲜感，或许这就是我们要的创意。

---

最后再说两句：

每个产品都有自己的调性和目标用户，动态效果也有强有弱。好的动态应该是能与其进行匹配，而不是根据某个产品得出一个绝对的答案。
本文演示了不同类型图标用什么动态，并不代表只能这样用。动态效果类型远远不止这些，而以上只是最常见的动态属性组合方式，所以请不要局限你的想法。

作者：幺零三
链接：https://www.zcool.com.cn/article/ZMTQ5OTgwOA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者：幺零三      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

01 前言

在产品设计中，当有新上线的功能或隐藏功能时，我们通常会给予用户提示。常见的有小红点、角标、黑色遮罩+文字提示等这类静态提示。

而人类是视觉生物，相比于静态内容，我们的注意力更容易被动态内容吸引。

今天来聊一下页面中常见的动态引导。

02 一个小案例

当你看到这个页面时

我想你会先被色彩凸出的元素吸引，然后是面积占比大的元素，最后根据阅读习惯从上到下，从左到右，依次查看其他内容。（大致如下图）

而当页面元素都赋予细节时

假如我想让你关注到其中某个较小元素

其实只需要为它添加动态，便能使其脱颖而出，这就是产品设计中的动态引导。

03 动态引导的作用

• 新功能提示
• 重要内容强调
• 诱导用户操作
• 操作教学指引
• 信息高效传递

▍新功能提示 ․

当产品上线新功能时，设计师们都会根据功能重要程度，来决定使用什么形式让入口元素和其他元素区分开来。常见的有小红点、标签、气泡这类静态点缀元素（通常这类形式只出现一次，当用户点击后就会消失）。当然，也有将上述点缀元素动态处理的。如果入口是图标，甚至可以为图标制作动画，这在很多电商产品的品类区经常可以看到。

动态处理的形式，比原本的静态更容易引起用户对元素的注意力（与动态方式有关），甚至传递某种情绪。由于是循环播放的动画，因此可以持续吸引用户注意力。

ps：据说，每当页面多出一个会动的元素，后台就会多出这样一些留言，捅了开发窝了[Doge]。

▍诱导用户操作 ․

动态引导还常常被设计师用来强调重要内容（有可能被产品、运营拿刀架脖子），来达成某些数据指标，通过利用动态诱导用户操作。

例如：在会员卡片中添加光效、在广告中让按钮进行缩放、为签到入口图标设置动画。

这些都能充分引起用户注意，甚至提升功能点击率。

▍隐藏功能提示 ․

我们知道，在大屏上有更多空间可以展示信息。但在移动端，受屏幕大小限制，设计师通常会折叠或隐藏不常用的功能，来保持页面简洁。

对于这些不可见的功能，在初次使用时需要进行引导，才能被用户感知与使用。

▍操作教学指引 ․

讲到引导，还必须要提的是手势引导，通过动态直观展示不同手势的作用，提示用户如何与产品进行交互。

这在游戏教学中就常常使用，它可以帮助用户快速理解游戏玩法。

回到视频 App 中，你是否留意到，当你第一打开视频时， App 会提醒你双击屏幕可以点赞，上下滑动可以切换视频。

在产品交互设计中，如果使用到一些新颖的交互方式，这类引导可以大幅降低用户学习成本，帮助用户快速上手。

▍信息高效传递 ․

动态叙述的直观性，使得我们可以减少对复杂信息进行大量文字描述。通过动态设计，我们可以创建视觉故事，这有助于将复杂信息以更简单、清晰的方式进行传递，从而帮助用户快速完成任务。

也因此，在一些含有复杂操作的弹窗中，渐渐开始应用。

但是需要注意的是，上述这些大多都只在第一次使用时才会触发。

当然有特例，例如：

在 App Store 每次下载应用进行验证时（面容解锁的情况下），系统会通过动态提醒用户电源键位置，并告知用户需要双击进行人脸识别。

在扫码时，弱光场景下出现的手电筒，通过动态引起用户注意，指引用户使用。

以及作为动态演示，帮助用户理解如何使用手掌滑动截屏

如何进行NFC感应等等..

04 总结

动态引导像是设计师用来控制我们眼睛的法宝，有的人用它改善产品体验，有的人用它提升商业转化。

但法宝虽好，我们只有理性使用，才能避免用户迷失在这眼花缭乱的世界中。

感谢大家看到这里，我是幺零三，咱们下期见...

作者：幺零三
链接：https://www.zcool.com.cn/article/ZMTQ2MTI0OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者：幺零三      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

目录

• • 什么是搜索引擎优化？
  • 搜索引擎优化和网页开发的区别
  • Web 开发和 SEO 的优缺点
  • • Web开发
    • 搜索引擎优化
  • 选择适合你的行业！
  • • 1.选择适合你风格的
    • 2.知道你在找什么
    • 3.开始使用快速提示和技巧
    • 4.考虑混合策略

Web 开发是设计、开发和维护网站的数字过程。SEO，搜索引擎优化，是一种优化网站内容和元数据的做法，以提高其在 Google 等搜索引擎中的可见度或排名。在本文中，您将获得决定走哪条路线所需的所有信息！

什么是搜索引擎优化？

在搜索引擎优化 (SEO) 中，对网站或网页进行优化以提高其可见性。SEO 可以被认为是在线成功的“秘密武器”。它可以帮助您的网站在搜索结果中排名更高，为您的网站带来更多流量并增加您的底线。

⇒基本上有两种类型的搜索引擎优化：内容营销和搜索引擎优化。内容营销就是创造有价值的、高质量的内容，这些内容将被其他人共享和链接。这种类型的优化侧重于提高网站上单个页面的可见性和排名，而不是整个网站。

⇒搜索引擎优化：这 是使您的网站或网页在搜索引擎中尽可能可见和相关的过程，编写出色的内容并向网站添加 SEO 关键字。目标是为您的网站带来更多流量，以便您可以从广告收入或通过这些访问者产生的销售中获利。

有许多不同的技术可用于 SEO，但最终归结为确保您的网站经过充分研究和设计，使其在任何给定搜索引擎中看起来都不错并且排名靠前。

搜索引擎优化和网页开发的区别

“搜索引擎优化”(SEO) 和“网页开发”这两个术语可能会让很多人感到不解。那么，两者有什么区别呢？SEO 是改进网站以使其在搜索引擎结果页面(SERP) 中显示更高的做法。这意味着搜索特定主题信息的人会更频繁地找到您的网站。

另一方面，Web 开发是设计、创建和维护网站的过程。虽然 SEO 专注于改善网站在搜索引擎上的外观和性能，但 Web 开发不仅仅包含设计和布局。

它包括确保网站在各种设备上正常工作，优化社交媒体平台的内容，以及开发电子商务商店或 CRM 解决方案等自定义功能。

最终， SEO 和 Web 开发之间的区别 归结为目的。SEO 主要侧重于增加网站的访问量；而网络开发旨在确保用户一旦到达那里就可以真正找到他们正在寻找的东西。在大多数情况下，最好将这两种做法结合起来以达到您想要的结果。

Web 开发和 SEO 的优缺点

如果您正在考虑 Web 开发或搜索引擎优化 (SEO)，在做出选择之前需要考虑一些事项。下面比较了每种方法及其优缺点。

Web开发

优点：您可以从头开始构建自己的网站或博客，或者使用 WordPress 等现有平台。如果您想自定义网站的外观，或者不想自己托管和维护网站，这是一个多功能选项。

此外，在大多数情况下，Web 开发成本低于 SEO，如果您不确定将来是否需要它，这可能是一个因素。

缺点：如果您没有任何构建网站的经验或不熟悉编码，则 Web 开发可能具有挑战性。

此外，Web 开发并不总是与所有类型的内容兼容——例如，某些博客使用的视频内容无法轻松转换为文本。最后，一些在线流行的网站——如福布斯——是使用网络开发技术构建的，但他们的 SEO 工作是密集且昂贵的。

搜索引擎优化

优点： SEO 可以帮助您的网站或博客在与您的主题相关的特定关键字的搜索结果中排名更高。这可能会导致流量和转化率增加，从而可以通过两种方式提高您的底线：

首先，随着越来越多的人通过 Google 搜索找到您的网站，广告收入可能会增加；其次，某些网站（如 Netflix）提供的高级会员服务需要在搜索引擎结果中获得较高的排名。

缺点： SEO 是一个密集且耗时的过程，从长远来看可能很难获得一致的结果。此外，某些网站内容（例如产品说明或博客文章）可能更难通过 SEO 技术进行改进，因此如果您想要获得更好的结果，则可能需要考虑其他策略。最后，SEO 可能很昂贵，尤其是当您针对高流量关键字时。

选择适合你的行业！

Web 开发和搜索引擎优化 (SEO) 各有利弊。但在你做出决定之前，你需要了解你的优先事项。这里有四种策略可以帮助您决定哪一种适合您：

1.选择适合你风格的

如果 Web 开发更符合您的风格，那就去做吧。看到您的辛勤工作在搜索引擎结果页面 (SERP) 上获得更好的排名，您会感到满意。

但是，如果您更喜欢 SEO，请准备好长时间投入大量精力。您可能更愿意与顾问一起工作，他们将逐步指导您完成整个过程，但这也意味着要为他们的服务支付额外费用。

2.知道你在找什么

如果您知道您的行业或地区流行什么类型的网站，那么 SEO 可能更适合您。搜索引擎会奖励针对相关关键字进行了优化的网站，因此以这些术语为目标将使您的网站在竞争中更具优势。

如果您不确定从哪里开始，请尝试使用Google 的 AdWords 工具查看相关页面上最常搜索的关键字。这会给你一些关于从哪里开始优化你的网站内容和设计的想法。

3.开始使用快速提示和技巧

许多初学者在没有先学习如何优化他们的网站的情况下直接进行全面的 SEO 计划。这可能会很快适得其反，因为搜索引擎会惩罚包含不正确或过时信息的页面。

更好的方法是从快速提示和技巧开始，然后逐步采用更全面的策略。这样，您将有更好的机会获得预期的结果，而无需预先花费太多时间和金钱。

4.考虑混合策略

如果您不确定哪种方法适合您，请考虑将每种方法中的一部分结合起来的混合策略。

例如，您可以定位网站上的关键关键字，但也要确保您的网站针对搜索引擎结果页面 (SERP) 进行了优化。这将为您带来两全其美的效果——增加流量和提高排名。

 来源：csdn



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

目录

一、回答点

二、深入回答

监测机制的变化

Fragments（碎片）

API模式的变化

数据的存放

生命周期钩子

父子传参

diff算法

v-if和v-for优先级

一、回答点

监测机制的变化、Fragments（碎片）的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。

二、深入回答

监测机制的变化

• Vue3中使用了ES6中Proxy API 对数据进行代理，监测整个对象，而不再是某个属性。
• 消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。
• Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。
• Vue3中支持Map、Set、WeakMap和WeakSet

Fragments（碎片）

• Vue2在组件中只能有一个根节点。
• Vue3在组件中可以拥有多个根节点。

API模式的变化

• Vue2使用选项式API（Options API）。Vue3使用组合式API（Composition API）

数据的存放

• Vue2中数据存放在data属性中
• Vue3使用setup()方法，setup()方法在组件初始化构造的时候触发。
  • 从vue引入ref或reactive
  • 简单数据类型使用ref()方法进行处理，复杂数据类型使用reactive()方法进行处理。
  • 使用setup()方法来返回响应式数据，在template可以获取这些响应式数据。

生命周期钩子

• setup()：开始创建组件之前，在beforeCreate和created之前执行。
• onBeforeMount()：组件挂载到节点之前执行。
• onMounted()：组件挂载完成之后执行。
• onBeforeUpdate()：组件更新之前执行。
• onUpdated()：组件更新之后执行。
• onBeforeUnmount()：组件卸载之前执行。
• onUnmounted()：组件卸载之后执行
  • 若组件被keep-alive包裹，则多出两个钩子函数
    • onActivated()：被激活时执行。
    • onDeactivated()：A组件切换到B组件。A组件消失时执行。

父子传参

• 子组件通过defineProps()进行接收，并且接收这个函数的返回值进行相应操作。

diff算法

• Vue2：进行虚拟节点对比，并返回一个patch对象来存储两个节点的不同，最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素，进行比较会消耗性能。
• Vue3：diff算法在初始化时会给每个虚拟节点一个patchFlags（优化的一个标识）。只会比较patchFlags发生变化的Vnode，从而进行视图更新，对比没有变化的做静态标记，渲染时直接复用。

v-if和v-for优先级

• Vue2中：v-for优先执行
• Vue3中：v-if优先执行
• 注：最好不要把v-if和v-for同时用在一个元素上，这样会带来性能的浪费

来源：csdn



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

/* JS的输出语句 */ alert("弹出") document.write("直接在写页面上面") console.log("打印在控制台上面") 
        


            

                1
            

            

                2
            

            

                3
            

            

                4
            

        

var msg1 = confirm("你好!") //我可以将我们点击确定和取消的结果当做变量的值 console.log(msg1); //当我们点击确定时候得到值是一个true,当我们点击取消的时候得到的结果是false 
        


            

                1
            

            

                2
            

        

var msg = prompt("你可以在这上面输入一句话") //我们可以把这一句话当中一个变量值,赋值给一个变量  alert(msg) //将变量的值直接弹出来 
        


            

                1
            

            

                2
            

        

var a = 10; //合法 var name = "张飒" //合法 var var = "李四" //不合法,不能使用关键字 var 1name = "王八" //不合法,不能以数字开头 var alert = "老刘" //合法 var name% = "美丽姐" //不合法,变量的命名要以数字,字母,下划线,$组成 
        


            

                1
            

            

                2
            

            

                3
            

            

                4
            

            

                5
            

            

                6
            

        

var userName = "张三" //遵守了小驼峰的命名规范 
        


            

                1
            

        

console.log(isNaN("张三")) //true console.log(isNaN(10)) //false 
        


            

                1
            

            

                2
            

        

// 因为他判断是不是数字 //     如果是一个数字,那结果直接是false //     如果不是一个数字,那么他会判断这个值能不能转换成数值,如果可以,那么结果是false,如果不可以,那么结果是true // boolean与number其实就是相通的 //     boolean类型的true   代表数值类型的一切非0的值 //     boolean类型的false  代表数值类型的0 console.log(isNaN("123"));//false console.log(isNaN("123a"));//true console.log(isNaN(11));//false console.log(isNaN(true));//false 
        


            

                1
            

            

                2
            

            

                3
            

            

                4
            

            

                5
            

            

                6
            

            

                7
            

            

                8
            

            

                9
            

            

                10
            

        

var a = 10; var a1 = String(a) console.log(a1, typeof a1); var b1 = a.toString() console.log(b1, typeof b1); console.log(a + "~~", typeof (a + "")); 
        


            

                1
            

            

                2
            

            

                3
            

            

                4
            

            

                5
            

            

                6
            

        

    来源：csdn



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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