首页

如何通过设计语言手册来传递品牌理念！

seo达人


图片

本次以3.0时代加入以人文中心主义的设计，人文感官品牌情怀社区为方向发起升级！58到家作为一款为消费者提供家政服务的产品，致力于为消费者带来品质生活！设计语言的存在需要将用户、产品、服务进行结合，并在不同服务中保持统一的展现，从而对体验和商业上带来价值。

我们将产品划分为三个阶段：

1.0：满足了以产品为中心的设计，达成生产售卖通顺闭环；

2.0：满足了以消费者为中心的设计，考虑更多用户体验；

 3.0：加入以人文中心主义的设计，人文感官品牌情怀社区。

图片

那么明确了我们本次升级的方向后，制定了整个产品的框架，底层加入了人文感官品牌情怀的相关因素，再应用到我们现有的业务上，在协同上进行高效的链接，产品到设计，设计与设计，设计到开发。最终形成了我们的前台展现页面。

 

 

图片

最适合用户的设计语言手册，才是合理的，那么在3.0阶段的人文感官品牌情怀，核心即为人，也就是我们的用户，首先我们要了解用户的情感诉求。

图片

根据我们的用户画像以及多轮访谈调研， 得知用户的相关正负情绪。生活当中家务工作的角色分配问题，一直是经常出现的一个场景。用户希望通过我们的产品服务，来提升生活的幸福指数！

在以此为前提的背景下，用户希望我们是专业标准化的、省心高效的、温暖温馨的、舒适的、具有亲和力的等等。最终都会期望以更有品质的生活而结尾，那么“品质生活”即为我们需要来传递给用户的情感。

 那么品质生活是什么呢？

图片

其实用户对我们的要求是一款提升生活品质及愉悦感的产品，而非工具。

 

 

图片

综上所述，我们确定了以品质生活成为我们的本次设计语言升级的slogan，再结合业务的自身特性，我们进行了详细的拆分后提炼出了以下相关关键词，来满足用户更多的情感诉求。

干净明亮 

居住环境的洁净会带给人更多舒适惬意的感受。首先对品牌色进行了升级，使其更鲜明。也延展与其相匹配的辅助色来打造出完善的色彩体系。

图片

光 

阳光照射在屋子里，用户惬意地躺在沙发上，光总是能给人温馨温暖的感觉。针对光束进行了深度剖析，过滤掉了光源生硬的进入以及具象光源的展示方案，最终确定使用相对适中的渐变色。

专业 

专业是线上线下综合诉求的结合体，那么在线上加强品牌背书、有迹可循的一致性来达到满足所的情感诉求。

高效 

用户携带诉求而来，那么减少用户感到麻烦的情绪，对产品的识别清晰、操作便捷提升是最直接影响的。

亲和力 

服务行业需必备的能力，微笑服务也成为了我们的业务情感透传标准。提炼出微笑符号结合我们的实际场景进行运用！

慢生活… 

在对用户的相关情感诉求结合业务进行了落地后，对效率类设计原则也进行了相应的升级。

 

 整体架构 

应用整体架构也是一个应用对外呈现的基础结构，是系统风格的体现形式之一，除了特殊设计诉求，通常情况下，应用需要使用通用的应用架构来保持系统的一致性和用户操作的易用性。

图片

 栅格系统 

布局不是静态固定的，栅格系统在一个应用内的重要程度不言而喻。我们设定了以4dp / 4pt为基数的栅格系统。

图片

 文本原则  

文本作为产品中用户获取信息的主要信息载体，字号大小和字重决定了信息的层级和主次关系。对字号、字重、行高以及组合字体进行了设定，为不同的场景创造了层级分明以及清晰的信息读取体验。

图片

 间距参数  

针对页面内容区域的通用元素间距进行了分类。设计师结合具体场景的情况，来调用间距参数的适配逻辑。以此来结合栅格系统进行更好的适应相关视觉元素符号的对应变化。

图片

 圆角参数  

结合业务属性保证亲和力的透传，在产品尽量避免出现锐角图形的设计表达手法。故此针对圆角的大小也进行了系统级别的定义，进行深度统一管理！

图片

语意原则及动效等，并依据相关设计原则产出了组件库。

 

 

图片

在多元化的产品时代，时刻关注并满足用户的情绪，是产品能脱颖而出的关键！在建立设计语言手册时从提升用户体验和满足商业价值整体考虑，挖掘流程当中线上线下的触点，多维度思考并总结落地，深度传递品牌理念。

设计语言手册更多时候是一个相对宽泛的阈值，并非组件的固定值，在某些业务场景下能为用户带来增值体验或较高商业价值时，可以被打破。最后，核心就是在搭建语言手册时应思考更多“为什么”这么做！


作者：58UXD

转载请注明：学UI网》如何通过设计语言手册来传递品牌理念！

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


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

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



评论(0) 浏览(1108)

中后台产品的产研协同提效调研

seo达人

一、目前有哪些提升设计与前端生产力的方案

1、D2C（Design To Code）

D2C（Design to code）这个模式我们非常熟悉，其本质是将设计师的设计资产转化为代码，让前端工程师可以快速的复用，在这个成熟的领域主要分成两大类：「设计资产类」和「设计对接类」

a. 设计资产类

设计资产类是完整系统的规范和代码进行沉淀形成设计类的资产，这一类的产品在市面上目前是属于主流，产品有网易的Fish Design（网易自研）、Ant Design、Arco Design、Element 等，这些产品都是将组件化的设计资产转化为代码资产，方便前端工程师在开发 B 端产品页面时可以快速引用，提升开发的效率。

图片

b. 设计对接类

设计对接类又分成「设计稿查看类」和「设计稿代码生成类」两种类型：

设计稿查看类：主要是 D-box（网易自研）、figma、蓝湖等可以让前端工程师在线查看设计师的设计稿并提供一定的转化代码方案，主要是为了保障产品的还原度。

图片

设计稿代码生成类：最近两年为了彻底的解决还原度的问题，让前端工程师专注的解决代码问题「设计稿代码生成类」也开始在市场崭露头角。

比如：Imgcook、Codefun，直接复制设计稿地址进入软件内部转为代码文件，直接导出完整的静态页面代码，减少开发过程中的样式调整问题。

直接导出整页代码模式的小缺陷是无法满足开发中：代码精简（ai 智能生成的代码对目前还达不到开发人员喜欢的程度，较为冗余）、控件交互、绑定数据等几方面的需求，但是比如在一次性的静态页面的实现中还是能够达到提效的目的。

图片

结论：D2C模式的产品相对独立，从定义还原度「设计资产类」、保障还原度「设计稿查看类」、解决还原度「设计稿代码生成类」层层递进，可以有效提升设计师和前端工程师的生产效率和协同效率。

但在目前竞争激烈的大环境中，优秀团队的效率提升已经达到瓶颈，而提效的本质是为了比竞争对手更快更好，当所有人都有了相同的东西时，提效的目标可能就需要从别的地方打开缺口。

 

2、C2D（Code To Design）

C2D（Code To Design)「前端代码转设计稿」这个模式对于设计师相对模糊，不过国外的企业已经做出了探索。

比如：2017 年Airbnb 发布的前端开源模块 React Sketch.app，其核心理念是用代码做设计。第一次看到的时候感觉真的很酷，通过 React Sketch.app 直接在 Sketch 设计软件中编译出设计界面，代码也可以直接在项目中使用。

图片

还有另外一个产品叫 html-sketchapp，通过在输入框中输入网页地址就可以直接在 Sketch 中生成可编辑的设计界面「网页转设计文件」，通过任何前端代码都可以转为设计资产的文件，甚至直白一些说就是参考成熟产品做设计，适度借鉴吧。

图片

结论：目前的 C2D 的市场方案对于设计师而言不够友好，无法让设计师可以直接使用，都需要工程师来完成转换，同样也会遏制设计创新，陷入同质化的泥潭中。

但这个模式，却非常适合“有意”借鉴参考成熟或者竞争对手的项目团队，可以快速达到同类型产品的基准水平。

 

 

二、针对目前现状，什么样的方式可以实现提效？

从我们当前的工作流程来看

图片

在这个流程中设计最在乎的就是设计阶段的表现需求和前端的设计还原，为了保障精准的表现需求，在设计阶段需要大量的沟通和风格尝试。

在前端还原阶段需要和前端不断的扣细节，输出几百条信息的走查文档，那应该如何解决这些问题？

图片

答案就是「 C2D2C」的模式

 

1、C2D2C（Code To Design To Code）

C2D2C（Design to code to design）的模式，将流程中的设计表现和前端还原阶段的通过设计标准化和研发工业化的方式进行流程优化，减少设计和前端开发的参与，实现中后台研发流程的整体提效。

图片

在十几年的发展里互联网行业积累了大量的设计资产。

这些设计资产的沉淀是设计标准化的基础，将设计资产转为封装好的代码组件也就是 D2C 的过程。将封装好的组件通过低代码平台进行属性配置、搭建页面、布局调整实现页面的设计就是 C2D 的过程。

通过平台设定交互行为和绑定后台数据，完成整个系统，最后在进行站点发布，就实现了 C2D2C 的完整流程。

图片

C2D2C 的模式是设计资产与线上智能化布局的代码方案（低代码平台）以及后台数据绑定的结合，将以前的人工分工通过智能化方案综合一体去解决。

但这个过程不是僵化死板的模式，在C2D环节实现“设计->前端”的高还原度下快速落地，在D2C环节下实现“低代码平台->自有产品”的灵活调整下快速复制。

结论：随着社会的发展，标准化和智能化的产品线都将会被人工智能取代，互联网行业也正在向这个方向发展，所以设计的标准化和开发的工业化就像手工业向工业化的转型，这是一个大的趋势，未来可能一天的时间就可以生产数套后台产品，这样的生产效率才能跟上中国的数字化转型浪潮。

 

2.、C2D2C 的市场化

低代码平台 是 C2D2C 模式得以实现的核心平台，从2018 年开始海外投资开始关注低代码平台，OutSystem 平台获得 KKR 和高盛的 3.6 亿美元的融资，成为了低代码赛道的独角兽，另一家低代码创业公司 Mendix 被西门子以 7 亿美元的价格收购，资本市场的关注让低代码赛道开始火热起。

而国内的低代码平台是从 2020 年疫情肆掠开始，疫情助推了在线办公的发展，国家也在大力支持数字化经济，更多的企业开始数字化转型，这也让低代码在国内有了飞速发展的土壤。

目前海外比较成熟的平台主要是 OutSystem和 Mendix，而国内也有很多已经商业化的低代码产品，像网易轻舟等，已经开始投入商业化的使用，可以从网易轻舟的低代码产品架构，清晰完整的看到C2D2C模式的所需要具备的能力。

图片

网易轻舟从业务角度出发，具备持续迭代能力、组件具备可扩展性，并且可以为企业进行私有化部署，部署完成后可以和存量系统进行集成，交付后具备非常好的可运维性，是一个成熟的商业化平台。

网易轻舟目前已经服务了包括工商银行、吉利汽车、申万宏源证券、泰康人寿、台州银行等包括政府产业平台30家，从服务的客户我们也可以看的出来，低代码产品在大型企业中落地更有优势。

结论：C2D2C 的模式已经得到市场的验证，研发工业化可以更加高效的提升中后台产品的研发效率，设计标准化也可以减少中后台设计师大量的重复性劳动，对于中后台的业务产品，可以大胆地选择一个富有实力低代码产品。

 

 

最后

低代码平台的使用需要同时具备一定的代码能力和设计能力，这不管是对开发还是设计师都具备一定的门槛。目前的低代码平台使用角色应该是前端工程师，复杂的后台交互平台还是需要设计师的深度介入。

低代码平台的诞生减少了中后台设计师大量的重复性工作，可以让中后台设计师将更多的精力投入到用户研究和提升用户体验上。拖拽式的 UI 和智能化的布局以及良好的用户体验和以前的开发相比较，在中后台的开发上更加的高效也更加的智能。

在最初调研到低代码平台的时候，行业的快速发展和成熟，让我下意识的反应是中后台的设计师可能要失业了，但是在调研了平台的使用和深入的思考后，我觉得这是中后台设计师的机会。C2D2C 模式的最优解应该是 0 代码方案，而使用 0 代码平台最好的角色就是设计师。设计师专业的审美和对于用户体验理解的深度都是其他职业所不具备的，未来的中后台设计师更应该将自己的精力投入到平台流程的优化和用户体验的研究中去，这也在未来 0 代码平台到来后，我们才能更快更好的投入到新的生产中。


作者：程鑫

转载请注明：学UI网》中后台产品的产研协同提效调研

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


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

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



评论(0) 浏览(1070)

5000字，作品集中的推理部分该怎么写！

seo达人

图片

现在很多公司面试UI都会面试交互能力，问你设计方案的推导、怎么量化、怎么分析、怎么做深度的设计思考等等，所以呢大部分设计师在本身视觉能力没那么强的情况下，无奈在作品包装中加入了推导分析的文字部分，结果，问题又来了，这些分析过程和推导其实是经不起推敲的，因为往往在实际工作中，大部分设计师没有真的运用过这些方法、数据，靠的是参考市面上的作品集从而包装出来，也就经不起面试官的深问。最后作品集也成为了四不像的结果。

那么如果我们的设计基本功没那么强，但又想展示自己的思维能力该怎么做呢？我在这里并不是教大家怎么去编和套设计流程的框架和理论，而是希望大家能明白，如果要放你的思维过程，应该怎么正确的去放，如果真的没做过，我建议不要去硬套，很容易漏洞百出。

 

设计师的定位和价值

一个项目的推导过程首先要明确，你在项目中扮演的是什么角色，你在整个项目中的价值是什么，是独立负责？还是某一个环节的执行者？我相信很多同学都想把自己包装成一个独立负责人，恨不得整个产品从立项到调研到分析到执行都一个人包揽，但你越这样去包装，作品集内容就越零散。

作品集主要展示的是你个人的能力，而不是让你去描述和介绍你的产品。很多同学都变成了后者，比如先描述项目背景、产品的用户群体是什么、每个功能模块分别是什么功能…..这样的方式去包装作品真的味同嚼蜡，没体现能力不说，还很枯燥。

图片

 

 

一、讲故事

其实我们可以用讲故事的框架，来整理项目流程以及展示你在项目中的价值。在上学的时候老师会跟我们说，要讲清楚一件事，需要分别理清楚三个阶段，分别是：起因、经过、结果。所以我们现在要讲一件什么事呢？我们要讲的是，你是如何通过设计手段帮助产品/用户解决问题的。

那么我们就可以用起因、经过、结果三个阶段来阐述我们是怎么解决问题的，把这个逻辑给梳理出来。

 

1、起因

起因包含了

1.有哪些问题/机会

2.你是怎么发现问题的（为什么要做这个项目）

3.导致问题出现的原因是什么

图片

比如我举个例子，我发现我家厕所外墙开始掉粉脱落，甚至时不时的浴室柜下方会流出一些水，所以我怀疑是不是哪里漏水了，在这里我用的是观察法，用观察法很直观的看到了问题。接下来我要去找到问题的原因，到底是什么原因导致了外墙掉粉脱落以及渗水的问题。于是我先自己做了一个假设，是不是埋在地下的水管破了？因为之前有用过腐蚀性很强的通下水道的药剂，但是这个原因被我排除了，因为如果水管漏水那么就会一直漏，而不是间歇性的出水。那还有可能是什么原因呢？浴室柜中下水管堵塞导致水流到了没做美缝的缝隙中吗？还是楼上漏水渗下来了？

图片

最后经过多个原因的排除，问题找到了，是由于楼上确实漏水以及淋浴间下水不畅长期积水导致水从下水管口子边上的缝隙流了过去，两个原因。

 

所以我们再回过头来看，作品包装中起因应该说明哪些事项：

1.1和2可以合并在一起写，比如通过xx方法我们找到了目前产品中存在的问题，也可以写我们找到了xxx问题，是由于我们用了xxx方法。

 

2、你是怎么发现你产品中存在的问题的？

是自我经验的观察判断？还是通过数据分析找到的某个现象（比如一个板块的点击率在逐月下降）还是通过对用户访谈或者体验地图找到了某些体验问题？你得采用一些方法，越客观越好，比如很多同学在找问题的时候总会用一些比较宽泛的修辞来描述：首页结构不合理、层次不清晰、体验较差，所以看到这样的描述，我就想问，那么具体不合理、不清晰、体验较差的点在哪里呢？为什么你觉得不合理、不清晰、体验较差？是你的主观感受？还是数据表现？还是客户的体验？你得证明出来。所以问题的来源是很多的，有的是你专业经验的判断，有的是用户的反馈，有的是数据的表现，都不一样。

图片

 

3、导致问题出现的原因是什么？比如很多同学做改版，改版原因他们就写：结构不合理、层次不清晰、体验较差…..这个是不对的，改版原因应该是，由什么具体事件，导致的结构不合理、层次不清晰、体验较差，比如通过对用户在支付任务流程中的数据表现，我发现经常有用户在支付流程中跳失，导致转化率下降，因此我们调研访谈了10个在支付流程中跳失的用户，其中8个用户在准备支付的时候找不到编辑收货地址的功能，于是他们放弃了这次支付，这个问题凸显的就是核心功能没有满足用户预期，有效性差。至于样本量的问题我就不展开了。

很多同学在第一阶段会放很多产品的一些市场研究、定位，这些其实一点用也没有，雷声大雨点小，一开始切入点很大，结果这些点对描述你的设计能力没有任何帮助，并且在后面的设计方案和策略中也完全不能体现出来有什么关联。不如聚焦一点，针对问题直接进行展开。

 

小结一下，起因包含了3个问题，这三个问题可以通过几种方法来解答：

1.你是怎么发现问题的（经验判断法、渠道反馈法、用户调研法、数据分析法、可用性测试…..）

2.有哪些问题（卡片分类法、kano模型、价值分析法……）

3.导致问题出现的原因是什么（经验判断法、用户访谈、观察推测……）

 

 

二、经过

这个阶段就是用来体现你是怎么解决问题的，这里我们就要来讲到解决问题的策略和逻辑了。诸葛亮草船借箭大家都听说过吧，这个事件的问题在于缺箭，为什么会缺箭呢？原因是没有足够的时间和材料来制作那么多箭矢，要解决这个问题怎么办呢？招募更多的士兵？收集更多的材料？采用缓和之计争取时间？显然这些策略是无效的，那怎么办？内部不行，只能靠外部来解决，于是就有了草船借箭。

再举个例子，这两天有点头痛（问题），医生说头痛可能有多种因素造成的，例如睡眠不好、颈椎有问题、受凉、压力大等等（原因），所以为了解决这个问题，我就可以有几个不同的策略，如果是睡眠导致的，那么我就通过改善睡眠质量来解决，如果是颈椎导致的，那么我可以去找中医做一下推拿，这些都是解决问题的策略。

所以在经过阶段你必须讲明白你是怎么选择一种合适的策略的。举个例子，比如有一个新的电商产品上线了，并合作了一些大品牌，但是我们发现这个品牌的销量还不如一些不知名的品牌来的高（问题），于是我们通过第一步的研究起因，发现用户之所以不买单，是因为他们觉得这些大品牌在你们平台卖的是不是假货（原因）。那么为了解决这个问题，我们就要研究一下具体的策略，怎么样能够让用户对该品牌产生信赖，而我们又如何才能让用户知道这个品牌是正品呢？

图片

策略1:透出品牌资质和曝光度：告知用户我们有品牌授权的资质

策略2:给予用户更多保障：给用户产品质量的售后保障和检测权利

策略3:让用户提前进行体验：可以给部分用户试用

经过分析以及成本权衡，策略2和3实施起来较为困难，成本高，于是策略1是一个比较好的选择。那么具体的方案就要到第三阶段来呈现了。

 

再举个例子，抖音大家都有用过吧，在之前的老本版中，有用户想查看当前视频的上下集，非常不方便（问题），因为需要点击或者侧滑进入作者首页，然后经过滑动才能找到当前视频的位置（原因）。所以为了解决这个问题，如果你是抖音的设计师，你会有哪些策略呢？

策略1.提高用户查看视频的效率：直接给用户定位到当前视频

策略2.提高作者制作系列视频的便捷性：可以让用户不用进入主页也能看到上下集

 

所以，小结一下，“经过”这个阶段中找策略我们依然也可以用到一些方法：上瘾模型、aarrr模型…..但是这些模型我是不建议大家在作品集里写的，太形式化了，在大厂的设计流程中，设计策略基本上是通过产品和设计的经验判断给出的，不会真的说是靠这个模型工具而产生输出的策略，比如像我们说“给用户一种温暖的感觉”，这是一个设计目标也可以是一个策略，但它很难说是由哪个方法论或者工具提炼出来的。

 

 

三、结果

结果，也就是我们通过设计目标和策略，选择具体的设计方案。在作品集中，设计方案给面试官展示，这其实没那么重要。面试官想看的是什么呢？是你虽然最后给出了a方案，但是在设计过程中，有没有b方案和c方案，最后让你选择a方案的理由是什么，你是怎么思考的，也就是方案的由来。

这个才是我们展示能力的最好表现。以上面的抖音为例，通过策略1，用户点击主页可以直接定位到当前视频的区域以便用户查看上下集，如果直接根据这个策略设计方案是很简单和直观的，只要定好位，并给用户一个当前正在播放哪个视频的状态，做个标签即可。

但是最终方案并不是这样的，而是当用户侧滑或者点击头像后先定位到的是用户主页的头部区域，而在右下方给了一个“刚刚看过”的按钮，点击按钮才会定位到刚刚正在看的视频。

 

图片

 

这两个方案显然是有区别的，为什么不直接定位，而要多给出一个“按钮”呢？原因就在于抖音更希望观看者和作者能够更多的产生互动和链接，提高作者的关注率，让观看者先看到作者的主页，再去查看刚才的视频，因为只有你关注了作者，作者才有更多动力去制作视频，同时关注作者也会为你个人的偏好附上一个大的权重，以便于做更精准的推荐。 

这是对于两种方案的解读，所以方案a和方案b，为什么选b不选a，这就是理由。当你的方案呈现在作品集中，面试官就会这么问。

通常在做方案的时候，大家也总会用到竞品分析，竞品分析是一把双刃剑，它可以让你的方案至少不会出大错，也可以让你的方案没有特点，所以这也很考验设计师是怎么将产品业务的定位、用户属性、业务目标的差异化结合到方案中去的。竞品分析大家也很喜欢单独拿出一个板块放在作品集里，咱先不论有没有真实操作过，放在作品集里的内容，一定要有目的性，大家仔细品一下这句话。你想要通过放这块内容告诉面试官什么？是你拿了一堆竞品做了比较和描述，还是说你能够结合自己业务和用户的特性，找到和其他竞品设计差异化的点，最后应用或指导到你的设计方案中去？

 

结果阶段除了方案的探索、权衡外，还需要进行验证和复盘。虽然咱们花了很大的力气，从发现问题到找到原因，再到定义目标和策略，最后选择方案，但并不意味着最后的结果是好的，因为我们不知道我们的方案到底有没有解决最一开始的问题，你原来头痛，最后选择了吃药，结果吃了一个月，还是没好，那就说明：1.问题原因不对 2.策略有问题 3.药吃错了。所以如果你要以结果为导向，那么最后的验证和复盘不可缺少。那有同学说，我们公司没有数据，没有用户，那我要怎么验证呢？那我劝你好好跟产品或者老板去谈一谈，虽然你想操这个心，但是老板都不在意那也没有办法，但是你在面试的时候需要表达出这样的思维。

 

  

总结一下 

再说一下，分析推理部分，不是UI/UX作品集必备，你想做纯视觉包装作品集也可以，但我们要清楚，你应聘的岗位要求是什么，而你的作品集和岗位要求是否能对应起来。现在的一些公司要求都很高，UI和UX都成为了标配要求，所以我们尽可能要把这两块都在作品集里展示出来。有人说，我实在没做过这些东西，让我编也编不出来怎么办？那就从今天起试着开始主动找找产品存在什么问题，然后去解决它，试着走一遍：起因、经过、结果三个阶段，我相信你一定会有收获。 


作者： 应骏

转载请注明：学UI网》5000字，作品集中的推理部分该怎么写！

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


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

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



评论(0) 浏览(1000)

卡片式设计 | 掌握这些技法，快速提升界面效果！

seo达人

一、卡片式设计的定义

1、什么是卡片？

早在互联网时代之前，卡片就出现在了我们生活中的方方面面，如名片、不干胶标签、便利贴、会员卡…等，不管是何种类型的卡片，它都将代表着我们现实生活中的某个特定信息。

图片

卡片指的是含有图片或文本信息的容器，它将我们需要的信息归纳在一起、并形成独立的个体，以至于后续被引用到线上界面中，同样具有非常不错的信息归纳效果。

 

2、互联网中的卡片式设计

卡片本身就是一个完整的信息区块、并同时承载丰富的互动方式。在UI设计中，个性化和美感兼备的卡片式设计具有很强的易用性，它是一个UI设计组件，将标题、文本内容、图形/图片进行整合并模块化，让信息的表达更加直观、操作也更便捷。

卡片式设计之所以能成为当今比较流行的趋势，是因为它能让界面信息更有层次感，从设计、交互、视觉以及用户体验等各方面来看，都有不错的优点。站在用户角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相对来说，学习成本也是极低的。

图片

 

 

二、卡片式设计价值

1、结构清晰

卡片在占用屏幕空间较少的情况下能够将不同大小、不同类型的信息内容按逻辑进行分组呈现，使界面结构更加清晰。相比纯粹的留白或分割线，卡片不仅对信息作出了分割，其本身还是一个独立的容器，让归纳组合后的信息能快速突出重点，将复杂内容简单化处理。

卡片式布局整齐简练，清晰的信息结构有助于用户浏览，方便快速找到自己感兴趣的内容，避免用户产生一种费时或感觉内容超长的恐惧感，还能节省更多的时间成本。最常见的就是信息列表、图文混排等，不仅做到了视觉上的美观，也达到了平衡文字及图片强弱的效果。

图片

 

2、场景拓展

卡片式设计有利于场景拓展，他能在信息不断增/减的情况下、页面依然能组成一个连贯的整体，在视觉上毫无违和感。例如支付宝在头部插入的广告引流入口、淘宝在节假日增加二层楼…等。

图片

 

3、空间扩展

卡片式设计一度打破了移动端多为纵向操作、原有传统的列表式布局，在空间有限的移动端设备中，还能很好的利用横向空间。将横向滑动区域的最后一个卡片漏出一小部分（若隐若现才是诱惑），不仅能给予用户更多选择与期待，其空间利用率也得到了很好的扩展，在展示更多内容的情况下依然能保持模块的整体性。

图片

 

4、突出重点

卡片式设计能很好的通过边界衬托出内容的整体性，特别是在电商类产品中的首页头部、瓷片区、营销引流区将其应用到了极致，即便在卡片数量较多的情况下，用户依然能清晰的感知到内容的归属层级以及重要信息。

图片

 

5、兼容多端

卡片作为一个容器，它可以自由无限的等比缩放，非常适合响应式设计。在手机、iPad、电脑等屏幕尺寸复杂的情况下，通过放大缩小或增减纵向排列数量的方式配合响应式的断点设计，让同一界面在不同设备之间轻易的创造出一致性的视觉体验。

图片

 

6、易于操作

卡片给人最直观的感觉就是可以操作，它不用箭头、按钮或超链接等引导性的视觉元素提醒，节省了一定的页面空间，还有着更大的操作热区，无需做到精准点击。卡片式设计很容易融入各种交出手势，如单击、双击、长按、拖动、滑动等，为用户提供更多便捷的操作。

 

7、跳转流畅

卡片可通过缩放的形式充分利用动画进行页面跳转，例如App Store“Today”频道，点击卡片后直接等比放大至全屏，给用户一种还停留在当前页面的错觉，避免了传统的跳转页面而造成的信息割裂感，流畅丝滑的过渡，给用户更自然的交互体验。

 

 

三、常见的卡片式设计样式

1、四周留白

这种类型的卡片在UI设计中最为常见，柔和的圆角、边缘阴影以及四周很自然的留白，让内容模块的存在感更加强烈，整个页面信息的层级也更加清晰。

图片

 

2、悬浮内容之上

悬浮型卡片并非模态弹窗，与其相比，悬浮卡片不需要主动操作触发，可作为临时控件或长期固定显示，并且比模态弹窗能承载更多信息内容，可通过伸缩来定义卡片中的信息数量，或多、或少、或展示、或隐藏，在页面中非常灵活。

例如高德地图首页，搜索框及右侧的功能入口长期悬浮在地图之上，而下方卡片中的内容会随着高度的伸缩自动调节可展示的数量，非常实用。

图片

 

3、通栏类型

通栏类型的卡片具有更强的视觉阻断，对区分不同的功能模块有不错的效果，不过这种类型只通过页面背景色保留上下边间、且不会过多，不然页面会显得零散、杂乱。

图片

 

 

四、卡片适用场景介绍

1、瀑布流

瀑布流主要正针对图片较多、或以图片为主的内容设计，它最大的优点是无需过于在意图片的高度，最大限度的还原原始图片效果。

卡片式设计的瀑布流对信息的组合、包容性更强，不仅能在单屏区域内显示更多内容，同时又将每组信息组合作出了明确的划分，在不破坏页面整体性的基础上也做到了相对独立，如花瓣、Pinterest就是最好的例子。

图片

 

2、信息流

信息流的展现方式主要以文字、图片或视频内容为主，是一种较长内容的媒介，不管哪种展现方式，其都需要用户耗费较长时间的滑动、浏览来筛查对自己有用的信息。

卡片式设计将信息进行分块处理，通过阻隔的方式快速告知用户每个卡片的核心内容，便于用户在长时间的滑动过程中也能快速识别重要信息。

图片

 

3、左/右滑动

卡片式左右滑动组合在音乐、视频类产品中用最为广泛，因内容本身就图片居多，也更适合卡片式设计，相比平铺具有更强的层次感，对用户的吸引力较强，尤其最右侧漏出的一小部分内容营造出神秘的感觉，用户会不由自主的想去滑动以求获取更多信息。

图片

 

4、优惠卡/券

卡/券设计实际是把生活中的实物映射到了UI设计中，通过模拟实物造型设计成卡片样式，有效降低用户的理解成本，并对其有了更直观的感知，真实感尤为强烈。

图片

 

5、突发事件/临时提醒

对于用户主动触发或系统临时发起的非固定性内容，利用卡片式设计会让信息布局更灵活、视觉更突出，在不影响用户使用的前提下，可出现在任何位置。

图片

 

6、部分页面头图

卡片式设计可以将个人中心、个人主页、会员等页面中的关键信息进行概括，并在头部位置进行重点突出，不仅让原本单个的内容形成整体，还能营造出沉浸式的氛围。

图片

 

 

五、卡片式设计原则及小技巧

1、一致性原则

为了保持界面设计的一致性，需要将卡片样式纳入设计规范，例如卡片是否通栏、是否需要设定圆角半径、不同场景中卡片大小的划分界限以及圆角数值的确定等，大部分情况下都需要遵循设计规范。

图片

 

2、功能定位决定卡片形式

在同一产品中，虽然要遵循设计规范以确保一致性的视觉效果，但并非所有页面都适合卡片式设计。

那么，到底是否需要采用卡片形式、使用哪种卡片类型？这还得根据页面内容属性及目标定位来决定。例如社交产品中的临时会话列表、动态圈子使用卡片形式，很浪费纵向空间、甚至会显得很“鸡肋”，用分隔线或间距留白来区分信息组显然更合适；但对于电商类型的产品，利用卡片将不同的商品分隔后又进行归纳，会更容易识别，信息的可读性也会更强。

图片

 

3、避免过多卡片嵌套

卡片式设计本身就包含了容器与背景的层级表现，为了保持内容的正常展示与用户浏览体验，避免在卡片中嵌套多层卡片，以免信息层级杂/乱而增加用户的视觉负担。

如果再同一卡片中需要再次区分多个信息组，可利用间距留白、分割线或浅色背景等元素属性来区分，依然能达到想要的效果。

图片

 

4、合理利用横向空间

因为卡片内、外的双向间距留白，在空间有限的移动端设备中，横向空间利用率较低，因此除了合理的减小左右间距外，还可以适当利用左右滑动来扩充横向隐性空间。

例如淘票票首页，在1.5屏的范围内，几乎每个模块都能横向滑动查看更多内容，从用户体验角度出发，这是纵向空间无法比拟的。

图片

 

5、降低纵向空间的浪费

卡片式设计不是目的，其主要是用来更好的区分信息层级、提升用户浏览体验，因为卡片要作为独立空间的存在，必定会增加上下间距而导致页面拉长，因此，如无必要，不必盲目采用卡片式设计。

例如美团APP的「首页、电商、购物车、我的」4大主功能页面都使用了卡片形式，而「消息」页则采用分割线进行信息分组，试想一下，如果为了统一规范而使用卡片，不仅造成很强的割裂感、还会极大的浪费纵向空间。

图片

 

6、长文表达不适合卡片

这点不用多说，新闻资讯类产品的内容详情页就是最好的证明，不管其他页面是否采用卡片形式，但详情页并不会跟随形式，一方面可以让同屏展示更多内容、增加空间利用率，另一方面可减少无关元素对用户产生的干扰、给予沉浸式的浏览体验。

图片

 

7、突出一个核心内容

很多时候，我们总会听到PM说这个很重要、那个也很重要，都需要突出一点，殊不知当什么都突出了也说明什么都没有突出。在单个卡片中，组始终牢记这个准则：一次只突出一个核心信息，以便于用户快速、精准捕捉，切记不可贪多。

 

六、结语

卡片式设计之所有能快速流行起来且经久不衰， 其主要得益于自身的灵活性，尤其是在跨设备、跨屏幕上有着纯天然的优势，能忽略设备的差异给用户提供更好的服务。卡片并不是简单的样式设计，它是一种自由布局的设计语言，通过多种方式的信息组合、结合丰富的交互操作，给用户创造出极致的使用体验。

信息的呈现方式虽有不同，但最终的目的都是为了服务于内容，卡片式设计只是其中的一种形式而已，在设计过程中，我们需要根据内容结合实际情况作出合理的判断，切勿拘泥于形式而忽略内容本身的重要性。

任何设计风格及展现形式都有可能成为历史，卡片式设计也不会例外，但绝对不是这么快就结束，它依然值得我们去深究，力求打造更好的信息布局、更舒适的用户体验。

 

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》卡片式设计 | 掌握这些技法，快速提升界面效果！

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


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

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



评论(0) 浏览(1059)

2023 年全新视觉设计趋势来啦！趋势7把我萌翻了！

seo达人



近日，2023年度视觉设计趋势报告发出出来了，总共有11个大的趋势，那么23年又流行哪些趋势呢？下面跟着菲尔刚哥的一起逛这场视觉盛宴吧！记得收藏噢！

2023年平面设计趋势概览：

1、粘土风格

2、3D孟菲斯风格

3、简洁风格

4、迷幻设计

5、霓虹灯和抽象卡通贴纸

6、70年代复古平面设计

7、简化3D风格

8、抽象线条艺术人物

9、艺术衬线字体

10、彩虹色调色板

11、受自然启发的设计

1、粘土风格（The Clay Look）

Example by Ramy Wafaa

2023年橡皮泥设计趋势的关键要素

  • 介绍由数字技术或真正的橡皮泥制成的不完美的凹凸表面。
  • 提醒您在不完美中寻找完美。
  • 鼓励不断蜕变，塑造自己的未来。

2、3D孟菲斯风格（The 3D Memphis Style）

2023 年 3D 孟菲斯设计的关键要素

  • 通过 3D 现实的棱镜重生的著名 80 年代风格。
  • 基于 3D 几何图形和鲜艳色彩的大胆组合。
  • 鼓励在平凡中寻找不平凡。

3、简洁风格（The Clean Style）

2023 年清洁风格设计的关键要素

  • 一个整洁的设计，将所有图案、装饰品和装饰都排除在外。
  • 可以通过 3D 设计技术或平面简约主义来呈现。
  • 调色板由流行的白色或白色色调组成。

4、迷幻设计（Trippy Design）

2023 年 Trippy 设计趋势的关键要素

  • 在设计美学方面可能不符合逻辑的风格混杂。
  • 创造一种超现实的体验，类似于产生幻觉的效果。
  • 挑战设计师将他们的想象力超越所有既定的设计规则和限制。

5、霓虹灯和抽象卡通贴纸（Neon & Abstract）

2023年霓虹灯和抽象卡通贴纸趋势的关键要素

  • 霓虹灯和抽象卡通贴纸风格流行。
  • 虽然有些类似于平面物理贴纸，但有些则呈现出运动和体积。
  • 抽象卡通贴纸风格传达了艺术绘画的感觉。

6、70年代复古平面设计（70s Retro Flat Designs）

2023 年 70 年代复古平面设计的关键要素

  • 大胆、华丽、饱和的颜色，看起来很美。
  • 所有设计元素都由黑色细边框勾勒出来。
  • 具有 3D 效果或简单黑色轮廓的大块圆形字母类型。

7、简化3D风格（Simplified 3D Style）

2023 年简化 3D 设计的关键要素

  • 将细节减少到最低限度，同时在简单中寻求完美。
  • 基于简单、平滑的几何形状，如球体、立方体、圆柱体等。
  • 易于理解、熟悉和吸引人，因为它类似于幼儿简单的玩具。

8、抽象线条艺术人物（Abstract Line Art ）

2023年抽象线条艺术人物设计的关键要素

  • 扁平的线性风格，结合明亮的色彩，传达复古的氛围。
  • 扭曲的比例和动物、物体和人类特征的奇怪混合。
  • 与您所见过的任何东西都不相似的角色。

9、艺术衬线字体（Artistic Serif Fonts）

2023年艺术衬线字体趋势的关键元素

  • 笔画创意操控：不同字母的交织、扭曲、液化、延伸等。
  • 超大衬线字体可以是作品中唯一或主要的设计元素。
  • 衬线字体仍然传达复杂性，但变得更加有趣和不可预测。

10、彩虹色调色板（Rainbow Palette Colors）

2023年彩虹调色板颜色设计的关键元素

  • 灵感来自彩虹的颜色。
  • 与其他流行的设计风格相结合。
  • 代表各种形式的多样性。

11、受自然启发的设计（Nature-Inspired Designs）

2023 年自然灵感设计趋势的关键要素

  • 柔和的泥土色调、天然材料、纹理和形状。
  • 平衡感官，因为它传达宁静、内心的平静和和谐。
  • 一些设计呈现出真实自然和虚构现实之间的混合。

写在最后的话

2023年度最新的视觉设计趋势预测报告将设计师的想象力推向了全新的高度。这11个设计趋势也为设计师们打造了一个超乎现实、梦幻般的场景，唤醒观众的好奇心，激发人们探索的自然欲望。

好了，2023年最新视觉设计确实介绍完毕，你有什么看法呢？

本文 由「菲尔.刚哥」编辑整理，仅供分享交流

图源 Graphicmama网站| 版权归原作者所有

-END-

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


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

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



评论(0) 浏览(1437)

UI 场景中常见的 3 个主题化区域

seo达人


图片

 

 

一、底部标签栏主题化设计

1、底部标签栏图标主题

在不改动结构的情况下，替换底部标签栏图标是最方便的形式。通过主题化的图标也非常容易传递氛围，无论是在节日庆典、购物季、主题活动等场景中，这个形式都是最直观的表达之一。

比如优酷 APP 在中秋节的时候，就将底部标签栏图标替换为各式各样的月饼造型，主题营造也是非常的明显。将原本的图标造型融入到月饼图案中，镶嵌图案的设计非常巧妙，不仅保留原本的识别特征，也强化了主题氛围感。

图片

除了在图标造型上面发挥以外，也可以将主题文案融入到设计中，这也是较为直接的表现形式。作为特定主题来说一目了然，需要把控主题文案数量。

图片

 

2、底部标签栏背景层

底部标签栏的设计中，除了通过图标设计附和主题之外，也可以在背景层进行主题氛围营造。由于底部属于操作频繁区，背景层的设计不能过于抢眼，容易干扰功能的识别与操作。比如前段时间抖音 APP 将底部标签栏背景层进行主题营造的时候，在黑色层上面运用的色调比较深一些，与原本黑色的沉浸式体验有差异，在白底上面呈现效果还可以。

图片

没过多久抖音设计团队便进行了更新，压暗了背景元素的色调，弱化了视觉感。更符合原本的感官体验习惯，也能强化主题感。

图片

除了抖音以外，小红书 APP 前段时间也在底部标签栏背景层上面进行了营造。如果营造面积比较大的话，在无图标形式（纯文字版底部标签栏）上面比较适合。如果带有图标的话，适合做局部强化。

图片

 

 

二、顶部视觉区强化主题感

顶部视觉区包含状态栏、导航栏和顶部内容区域，通常是白底、灰底、品牌色底和运营主题背景等为主。也是强化视觉感的常见区域，作为营造主题氛围来说也是非常好的选择。

图片

该区域不仅可以作为功能性活动入口，也能在特殊时间段作为氛围营造。很多产品都会在顶部视觉区域做应变处理，满足多场景的需求发挥。

图片

顶部视觉区的强化也是增强页面感官体验的方式之一，除了静态背景的营造以外，也可以使用动态或者流体渐变等形式。

图片

 

 

三、金刚区图标设计主题化

金刚区也是作为主题化设计最常见的区域，由于该区域像百变金刚一样，较强的灵活性方便元素替换和重组。

 

1、图标主题化

在一些特定主题日活动中，可以将金刚区图标替换为带有主题元素的设计，以此增强活动氛围。通常是阶段性时间内展示，可以是图标造型层面主题化，也可以是主题文案镶嵌在图标造型中，灵活性相对比较高。

图片

 

2、局部动效化表达

除了整体金刚区变动以外，也可以在局部图标上进行设计发挥，这样带来的干扰性比较低。通常是以图标微动效为主，以此来突出个别功能和活动主题等。不适合过度动效，容易互相干扰，适合局部动效化表达，突出局部内容的关注度。

金刚区作为曝光度较高的区域，经常作为流量分发的关键场景，主题化发挥也是非常具备灵活性的。

 

 

小结

产品设计除了常规性的视觉升级和功能优化以外，主题化设计也是至关重要的，可以让用户时刻感受产品的变动。一成不变的体验使用时间长了也会麻木，结合节日庆典和一些主题活动进行视觉呈现，可以在感官体验层面得到提升。

本文观点属于个人经验总结，不足之处欢迎大家补充，我们互相进步。


作者：黑马青年

转载请注明：学UI网》UI 场景中常见的 3 个主题化区域

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


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

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



评论(0) 浏览(1126)

3个技巧瞬间提升logo设计的价值感

seo达人


一、设计一个开放的圆

圆是最完美的图形，所以把很多东西设计成圆形都会很好看，logo也一样，但如果设计成一个封闭的圆，可能会给人不够灵活、缺少变化的感觉，所以，我们可以尝试把logo设计成一个开放的圆，即只要一个半封闭状态的圆，或者是设计一个不完整的圆，比如下面这些案例：

图片

▲ 由于这种logo属于半封闭的图形，所以也比较容易处理成正负图形。

 

把logo设计成一个开放的圆有以下几个好处:

❶ 视觉平衡。因为圆形本身是对称图形；

❷ 视觉聚焦。圆形会让人的视觉往中心集中；

❸ 有设计感。因为通常把一个图形设计成圆形都需要简化和规范，这会增加图形的设计感。

 

示例一

几年前我接触了一个品牌名称首字母为“s”的电子公司，也用这种方式做了一个logo方案，字母S加上圆。在下面的两种组合方式中，很明显第二个更开放、更有设计感一些。

图片

但仅仅如此肯定还不行，一是这个S太普通，二是图形没有经过规范，所以我在草图上尝试了几个方向，最终选择了下图来执行，简单、抽象，在感性的柔和中夹杂着一点理性的坚硬。

图片

对于这种简约风的几何图形，通常都是通过采用圆形裁剪来制作，这样会更快捷、也更严谨，在草图的基础上通过多次调整，最终确定了如下图的辅助线(如果你的草图不是很规范，那么就不必太遵循草图)。

图片

通过这些辅助线我们就能得到中间这个比较规范的“S”图形。

图片

运用AI中的路径查找器中的工具，我们很快就能得到如下图形，填上颜色这个开放的圆形logo就做完了。

图片

在最终的图形中，我们除了能看到圆和S以外，我们甚至还能看到握手和循环图形，这些对于企业来说都是非常好的寓意，这也为我们写标志说明提供了一些不错的思路和依据。

 

 

二、塑造矛盾空间

矛盾空间是一种在三维世界中并不存在的二维图像，矛盾空间的形成通常是利用视点的转换和交替，在二维的平面上表现了三维的立体形态，我们熟知的埃舍尔就是这个领域的艺术大师。

图片

这种手法也常常被用在logo设计中。

图片

 

使用塑造矛盾空间设计的logo具有以下几个好处:

❶ 有趣。带有视觉欺骗效果的logo会让人忍不住想多看几眼；

❷ 富有艺术效果和创意。设计这样的logo需要一定的空间感和想象力；

❸ 具有良好的寓意。比如无限、无止尽、可持续等。

 

示例二

我的一个朋友开了一家装饰艺术品工作室，名字叫首工艺场，英文名为：First Technical Field，于是委托我设计一个logo，他是这样说的：我没什么要求，只要简单、大气、好看、现代、独特、富有艺术气息就好了，真的，我没什么要求。”

 

这个logo其实并不好做，老实说，我当时也没啥思路，于是我用品牌英文名的首字母在画纸上随意捣鼓，天知道我画了多少稿，终于我发现用两个字母F左右对称排列，中间形成的空间刚好可以加入字母T。

图片

这个图形让我想到了曾经看过的一件矛盾空间作品。

图片

纯二维的效果过于普通，我觉得可以尝试在此基础上加入矛盾空间效果，这样会更符合设计需求，于是得到了下面这个图形。

图片

最后，在AI中用矩形工具进行规范制图，于是就得到了下面这个矛盾空间logo图形，客户表示非常满意，毕竟他给的实在太少了。

图片

 

 

三、立体渐变

即通过渐变色使图形呈现出立体效果，这样的logo也非常多，并且在前些年很流行。

图片

虽然现在logo设计的大趋势是扁平风，但是仍有不少设计师和客户青睐这种立体渐变风，比如近两年才面世的北京冬奥会logo、IE浏览器新logo等等。图片

 

因为这种风格的logo其优势也是显而易见的，比如:

❶ 美观。这类图形既有细腻的颜色变化，又有层次感，很容易得到惊艳的视觉效果；

❷ 有很强的品质感。这种图形通常都需要倚仗曲线，再加之渐变色和立体效果，所以细节会比较丰富；

❸ 视觉冲击力强。丰富的颜色变化和对比关系，可以大大加强图形的视觉冲击力。

 

示例三

第三个客户是一家名叫东瑞的生物科技有限公司，主要是销售酵素、胶原蛋白之类的产品，logo设计要求简单、时尚、能体现行业属性。对于这张logo，比较稳妥的做法还是运用品牌名的首字母来做，由于没有英文名，所以我选择了品牌名拼音的首字母“D”和“R”来做创意组合。

图片

由于字母D是一个完全封闭的图形，所以我想到了用正负形的方式来设计，即把字母R作为D的负形，行得通吗?应该是可以的，因为大写的字母R可以简化成下图效果，与字母D一结合就能得到我们想要的效果。

图片

组合的方式有两种，我个人更喜欢开放的图形，并且我觉得第一种组合方式很普通，造型不是很好看，所以我选择了第二种方向。现在我们开始正式制图。

第一步：在AI中用矩形工具画一个正方形，然后用直接选取工具把右边的两个直角拉成圆角，拉到最大。

图片

第二步：把描边加粗到一个比较合适的效果，主要考虑字母D的负形大小与描边粗细的比例，是否符合字母R的特点，确定描边粗细以后，将路径扩展外观，使其变成一个轮廓图形，然后把左边的直角也拉成小圆角。柔和一点更符合企业的调性。

图片

第三部：画一个直角梯形对字母D进行裁剪，梯形的宽度和倾斜角度是关键，尽量保证R的识别性和图形的美观性，裁剪完以后得到如下效果。

图片

第四步：把图形的部分转角处也拉成圆角，然后给其填充一个蓝色，到这里基本的造型就做好了。

图片

但是这样的效果还是有点过于普通，也体现不出行业特性，于是我想到了添加立体渐变效果。

第五步：在现有的图形基础上画如下两个圆，我们的目的是要用下图中两条黑色的路径对图形进行裁剪，而这两条路径一定要很自然地融入图形中，所以，画圆要很讲究，依据是找到圆与图形的切点和交叉点，如右图中的四个点。

图片

第六步：在上图基础上用路径查找器里面的工具对进行裁剪、合并等操作得到如下图形，原来的图形被弧线切割成了三部分。

图片

第七步：给图形的三个部分分别填上由浅到深的渐变色，使其呈现出立体效果，考虑到企业的行业属性，我使用了蓝色到青色、绿色到黄色、黄色到橙色三个渐变色，最终效果还可以。

图片

logo图形设计方案合集:

图片

 

 

图片

logo设计得太常规容易被客户说没有品质感、体现不出企业或品牌的价值感，所以合理地使用一些技巧是有必要的，这会客户会觉得你的logo设计还是花了一些心思的，看起来比较专业，所谓得套路者得人心，希望这篇文章对你有帮助。


作者：葱爷

转载请注明：学UI网》3个技巧瞬间提升logo设计的价值感

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


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

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



评论(0) 浏览(1091)

大厂搜索哪家强？这些交互设计值得你收藏学习！

博博

大体上分为两类：彩蛋流和体验流

搜索的本质是什么？无疑是内容的召回和信息的推荐。

可随着时代的发展和行业公司的内卷，不少公司除了持续优化搜索结果与推荐外，在搜索的体验和彩蛋上也是下了不少功夫，从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些，那有意思的大厂搜索交互。

大体上分为两类：彩蛋流和体验流

A.彩蛋流

注重提升搜索过程中的趣味程度，以增加用户的好感度与产品印象/口碑。行业代表：谷歌浏览器、百度浏览器

1.谷歌浏览器

可以说是搜索彩蛋的先行者，内置了很多搜索关键词的有趣彩蛋，如娱乐角色：搜索【灭霸】，页面右边会打响指，相关字段会被’毁灭‘掉



搜索【马里奥兄弟】，右边也有游戏里一样的点击彩蛋



还有各种有意思的搜索结果比如搜：is google down（谷歌关闭了吗），搜索结果优先显示：NO



再如搜索《银河系漫游指南》的一句话：the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。



而且在日常的节日、活动、热点运营上，谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与，可以已经形成一个稳定、具有品牌感的企业文化了。

如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。



2.百度浏览器

百度在搜索彩蛋里下的的功夫也不少，最著名的应该是搜索【黑洞】时，页面上会出现黑洞的吸入特效。



而且和谷歌相同，在其他的搜索关键词上，百度也是埋下了不少彩蛋，比如：搜索【翻转】，页面会左右翻过来



搜索【跳跃】，页面会在上下跳动



搜索【失重】，页面上的字会飘起来‍



而在【活动运营】上，百度也是很有心地进行着创新设计，力求给用户一种眼前一亮的感觉。比如每年的愚人节，搜索结果页上都有‘调戏’用户的创意设计，各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。





还有在【活动入口】的设计上也是特别有想法：在某年的圣诞节上，百度创新性地将活动入口’嵌套‘在结果页卡片中间，用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」





用这种充满创意+应景的的入口设计与引导方式，最大限度地降低漏斗，吸引让更多用户参与该活动。另外，百度搜索框上面的运营活动入口，也和谷歌有异曲同工之妙。



而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

B.体验流

注重提升搜索过程中的交互体验，以增加用户的操作效率与产品易用性。

代表：苹果产品、夸克浏览器

1.Apple/苹果产品

·iPhone

iPhone的【桌面搜索】除了能查询手机上的各种信息、文件，它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器，大大减少操作链路。



在iOS的原生键盘里，可以根据输入词检测+搜索对应的手机号码：当你输入 【打+我或通讯录好友+电话】时，键盘上会自动显示自己或好友的电话号码，点击号码就能自动粘贴在输入框中。



用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码，大大提升操作体验与效率

·Mac

在Mac电脑的工具栏上搜索相关帮助时，系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里，并减少寻找的操作路径，免去多余操作



在Mac电脑的‘系统偏好设置’里搜索帮助，在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时，该入口的聚光灯会更清晰些，特别容易找到搜索结果。



2.夸克浏览器

夸克浏览器除了传统的「点击搜索框」唤出输入栏外，在屏幕任意位置下滑手势同样可以唤出搜索框。



降低「需要往上手指移动，才能点击搜索框」的操作成本，让用户更快、更精准地触达搜索。

而且在输入网址或英文等字段时，搜索框下方会出现一个滑块区。点击就会变成长条的滑块，拖拽滑块即可改变光标位置。



而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

让用户更方便地将光标快速移动到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克还会前置搜索结果， 比如在搜索框中输入“某城市+天气”的关键词，上方就会以卡片的形式显示该地区最近一周的天气。

用户无需触发搜索、进入结果页才能看到想要查询的信息。



– END



作者：和出此严      来源：站酷

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

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

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

猎聘 | 聊一聊IM改版4.0那些事～

博博

通过Q3不断的努力，终于把IM4.0的这个硬骨头成功拿下，下面就复盘下这次IM4.0的设计过程吧～


作者：不是作家      来源：站酷

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

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

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

Web端工具如何设计「保存」

博博

前言

数据保存是Web端工具的基础功能，一般在产品和技术框架设计之初就已经确定了数据保存的方式，后续不太会频繁更改。

正因为如此，在日常需求迭代中，设计师很容易忽略数据保存的过程，也很少质疑当前的保存机制是否合理，但是当需要设计新模块或产品时就会对保存有疑惑。

此外，保存也是一个受技术限制较大的领域，设计师需要对保存的技术类型有基础认知，因为它会影响保存生效的逻辑和交互形式。

本文将会基于个人经验，从设计表现和技术实现的角度聊聊Web端工具的数据保存。

「Chapter One」保存的对象

对于Web端工具产品来说，保存的对象可分为「文件数据」、「设置数据」、「用户行为数据」。

1.1 文件数据

「文件数据」是相互独立的内容，比如酷家乐的一个方案、Figma的一个文档都是文件数据，在文件A中触发保存并不会影响到文件B。文件数据是最主要的用户资产，若丢失会给用户造成很大的损失。

1.2 设置数据

「设置数据」分不同的维度，主要有用户级别、组织级别、设备级别这三种。

用户级别：数据保存在当前用户的账号下，同一个用户的所有文档都会应用该设置，比如酷家乐云设计工具的偏好设置。

组织级别：数据保存在组织级别，可能由组织管理员设置，同一个组织下的所有用户都应用该数据。

设备级别：数据保存在设备（浏览器）上，同一个设备上的不同账号、不同文档都会应用此数据。区别用户级别和设备级别的保存很简单，只要清空浏览器缓存，看看数据是否变化即可。

一般来说，「设置数据」也是用户资产。但是设备级别的数据存在丢失的可能性，一般情况下不会存储大量重要的数据。

1.3 用户行为数据

技术上经常把「用户是否进行过xx行为」这样数据保存在用户级别或设备级别，用于差异化的引导、运营方案。这类数据虽然不能被视为用户资产，但对于产品设计来说至关重要。

<h2 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin: 8px 8px 16px; font-size: 20px; white-space: normal; line-height: 1.5; letter-spacing: -0.008em; color: rgb(23, 43, 77); border-bottom-color: rgb(255, 255, 255); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" background-color:="" rgb(255,="" 255,="" 255);"="" class="js_darkmode__19" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h2-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

「Chapter Two」保存的位置 

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根据数据保存的位置，可以分为两类：后端保存和前端保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常见的保存方式，触发保存后，将方案数据上传并存储在服务器（云端），需要联网。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依赖网络；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.数据量大时会耗性能，可能会阻塞操作</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以缓存 (cache) 的方式将数据保存在浏览器中，一般采用的技术方案是 indexDB（如Figma)。即使将浏览器关闭，下次打开时仍能够恢复数据。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制（几百兆）；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必须要同设备，且不能清除缓存；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有时间上限（大部分浏览器最多可以保存 30 天）</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">还有一种前端的临时保存，即会话保存（sessionStorage），通常为了方便单次会话而设置，例如记住选项状态、输入框的内容等，但只要关闭或刷新标签页这些数据就会被清除。从严格意义上来说，会话保存不是真正的保存，本文不对此展开讨论。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般会以后端保存为主，前端保存为辅，这样能够最大程度避免因网络或服务不稳定造成的数据丢失。</span></span>
</p>




<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Three」保存的触发机制
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">从保存的触发维度，可以将保存行为分为自动保存、手动保存、提示保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自动保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根据保存的触发条件，可将自动保存分为以下3种：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定时触发保存以一定的时间间隔（通常采用几分钟 ~ 1 小时）周期性地自动触发保存。这是酷家乐云设计工具目前采用的保存方式。这种自动保存能减少因软件崩溃、断电等特殊原因造成的数据丢失的影响，但仍无法避免数据丢失，需要手动保存作为辅助。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 条件触发保存特定的用户行为会触发方案自动保存。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具体哪些行为需要触发保存，则要结合业务逻辑和技术实现来共同确定。要注意的是，这类保存通常因技术原因而采用，用户对其没有预期，尽量不要让它打断或干扰用户的操作。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 实时保存只要数据发生改变，立即触发自动保存，无需用户手动保存（尽管一些产品考虑到用户习惯，仍会保留手动保存的交互）。部分产品会用间隔几秒钟的自动保存（如 Microsoft 365），效果基本等同于实时保存。实时保存能最大程度避免数据丢失，是Web端工具理想的保存触发方式。但因为技术原因，并非所有工具都能够做到实时保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手动保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手动保存指用户通过额外的操作触发保存，通常为点击「保存」按钮或快捷键。部分有实时保存机制的工具不需要额外的手动保存（如Figma），但对于没有实时保存的工具来说，手动保存的设计至关重要。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手动保存，用户还是可能忘记保存。当用户离开工具或某个环境时，若程序监测到有未保存的内容会丢失，则将此风险暴露给用户，用户可以选择保存或者直接离开。如果用户通过直接关闭浏览器/标签页的方式离开，也可以在浏览器上设置类似的兜底提示对话框，但是对话框上的文案无法定制。</span></span>
</p>



那如何选择保存的触发机制？ 

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「实时保存」保障性最好，在技术允许时推荐采用；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技术原因无法采用「实时保存」时，推荐使用「定时触发保存」 + 「手动保存」共同作用，也能较好地保障数据；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「条件触发保存」通常是因技术原因而采用，用户对其没有预期，尽量不要让它打断或干扰用户的操作；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在数据有丢失风险的时候需要提示用户保存，可根据用户的操作路径选用工具自身的提示或浏览器的提示。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Four」保存的触发设计<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
</h1>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 触发原则</span></span>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在开始聊具体的设计之前，先提出保存的 2 点设计原则：</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防错</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是对方案数据的 最重要的 保障机制。稳定的系统需要有可靠的保存机制，尽量避免各种原因造成的方案数据丢失。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">状态可见</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反馈需及时有效，让用户知道当前方案的存储状态，如果有异常也需要第一时间告知，并给出可行的解决方案。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一书中提到的“触发器”概念，可以将保存作为一个触发器。触发器是启动一系列动作的原点，分为系统触发器（系统被动触发）和手动触发器（用户主动触发）。</span></span>
</p>
<h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:&quot;">
</h4>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系统触发器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">对系统触发保存来说，主要需确定2个点，何时触发、触发频率。对Web端工具来说，有3种主要的触发模式：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定时触发</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一个独立工具一般只有一个保存触发间隔设置，其间隔范围很广，可以是几秒钟、几分钟，甚至一个小时。一般会暴露给用户设置。建议产品设计师根据技术现状设定合理的时间，如果保存对性能有较大消耗，过于频繁的保存也会影响用户体验。可通过选择器给用户几个合适的选项，选项之间的时间间隔依次变大，总选项数不超过 5 个。</span></span>
</p>



某设计工具偏好设置中的保存时间设置 

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.条件触发</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用户行为也可触发自动保存，如酷家乐云设计工具环境切换、新建楼层，水电工具的智能设计等，都会触发方案保存。以下是一些常见的「条件触发保存」时机，这些时机是由技术能力、业务要求共同决定的。设计师需要考虑如果这些时机触发了自动保存，对用户的操作会用什么影响。</span></span>
</p>



c.实时触发 

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">现在已经有很多在线工具（如 Figma）实现了实时触发保存，对用户来说可以不用再理解保存这个概念，是一种认知上的减负，并且这种方式对数据保障的效果也最好。但是，仍然有设计师提出这种体验上的风险，比如没有容错余地、频繁保存造成的干扰和系统压力。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手动触发器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">对保存来说，「手动触发器」一般来说是一个保存按钮。在没有实时保存的创作类工具中，手动保存按钮的设计至关重要，一般会放在界面上方较显眼的位置，并设置快捷键 (Ctrl+S)，方便用户操作。</span></span>
</p>



酷家乐云设计工具的保存位于顶部栏第一个分区 

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而对于管理类工具，保存按钮一般位于页面下方，因为用户一般从页面上到下确认完内容后再进行保存。</span></span></span>
</p>



酷家乐账号设置页面 

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Five」保存的反馈设计
</h1>

<h3 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin-top: 10px; font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin-left:="" 8px;="" margin-right:="" 8px;"="" class="js_darkmode__98" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h3-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

5.1 成功反馈 

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自动保存的反馈对于自动保存，当保存结果无异常时，尽量减少对用户的干扰，尽量不使用全局提示 (Toast) 反馈。比较场景的做法是在工具某个固定位置，用图标或文字的状态变化作为反馈。</span></span>
    </p>



当某些条件触发保存时，甚至不需要让用户感受到保存的发生，因为用户对保存是没有预期的，建议将保存的过程与其他过程合并。 

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如说从云设计工具进入施工图时，因为技术原因需要保存方案，但可以将保存方案的进程与施工图加载的进程合并。</span></span>
    </p>



b.手动保存的反馈对于手动保存，当保存结果无异常时，可使用全局提示（Toast）告知保存进度和保存结果，也可以用「保存」按钮的状态变化作为反馈。 

    <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
        <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 异常反馈</span></span></strong>
    </h2>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">当保存有异常时，应即时给予且较明显的异常反馈，并帮助用户排查问题。在设计保存异常反馈时，需注意以下 3 点：</span></span>
    </p>
    <ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:&quot;font-size:14px;">
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些数据保存异常，是全局数据还是个别模块的数据，是否会因为非核心模块的保存异常而影响到整体用户进程，是否可以通过其他方式（如前端保存）让用户继续操作</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存异常的原因是什么，用户可以通过何种操作解决问题（检查网络？重新登录？）</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">当从异常恢复后，应该如何提示用户</span></span>
        </li>
    </ul>



图片a



图片b



图片c 

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        图片
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        Figma与保存异常相关的反馈 a.保存异常反馈；b.异常原因与解决方法；c.异常恢复提示
    </p>
    <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
        总结
    </h1>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后总结一下，当我们接手一个新产品、新模块、新需求的设计时，应该如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">设计保存：</span></span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先，确定保存对象，是文件数据、设置数据，还是用户行为数据。一个完整的产品一般都会包含以上三者，但对于某个具体的需求，可能只涉及其中一两种。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存对象后，可以与产品、技术等团队成员一起确定保存的位置（云端、浏览器）和保存的触发机制（自动保存、手动保存、提示保存）。建议根据用户流程在不同的触点用不同的触发机制，以最大程度保障数据安全。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下来，根据保存对象、保存触发机制，设计保存的交互，包含保存的触发、保存的规则和保存的反馈。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后，以用户使用工具的流程再检查一遍数据的产生和存储，是否会有遗漏，设计保存兜底。</span></span>
    </p>







作者：酷家乐UED      来源：站酷



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

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



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



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

评论(0) 浏览(919)

分类

日历

链接

个人资料

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

存档