一、特殊场景下的差异化设计

根据用户使用场景和特殊情况出现时，产品会结合变化呈现不同的功能或者服务，这种差异化的设计更能体现情感化设计的一面，提高用户对于产品的认可度。

腾讯新闻 APP 在东航事故出现时，在底部操作栏新增了祈祷的图标，方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求，也体现出了产品的温度，带给用户更强的粘性。

二、优化指引路径提高操作效率

通过提取本机号码一键登录减少了繁琐的注册流程，提高了登录的效率，减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容，当用户未勾选时通常都是提示用户，指引用户选择后操作。这样的设计增加了用户的操作路径，使用体验不是很好。

网易云音乐 APP 在同样问题出现时，提供了一个弹窗进行指引，用户无需重复操作，直接点击“同意并继续”即可完成登录。在用户误操作出现时，无需用户过多的操作路径，给出了更高效的操作解决方案，提高了用户使用体验。

三、温馨提示降低用户的过度依赖

随着互联网时代的到来，太多的娱乐产品占据了我们的时间，过度依赖和使用耗费了大量时间。特别是短视频的走热，刷视频容易带来过度依赖，影响用户的视力等健康问题。

抖音 APP 作为用户量庞大的短视频产品，提高用户体验至关重要。为了降低用户的过度依赖，提示用户注意休息，特意设计了温馨提示。用户可以设置提示时间和进行管理，APP 也会定期提示用户。温馨的设计提高了用户对产品的好感度，也能辅助用户做好时间管理，以免过度依赖而影响休息时间。

四、隐藏式设计提高版面利用率

对于用户来说希望内容具有较高的可见性，提高内容的曝光度才能被关注。在控制内容的优先级时，通过隐藏式设计可以满足更多内容的呈现，不过需要做好隐藏内容的引导，提高隐藏内容被发现的概率。

网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计，将签到相关的附属内容隐藏在展开卡片中，为更多主要内容提供了展示空间。为了提高展开的交互设计，在每天初次访问时会默认展开，然后再收起隐藏，这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求，通过动作引导提高了用户知晓度，是一个具备较好体验的设计解决方案。

五、更人性化的模式设计

随着用户群体的跨度增加，为了带给不同年龄段用户更好的体验，众多产品都针对不同用户提供了定制化模式。特别是针对老年用户而进行适老化设计，还有针对青少年儿童设计的时间管理等，不同模式满足了更多不同年龄段的用户需求。

比如优酷 APP 在个人中心设计了“模式切换”，点击可以设置长辈模式、青少年守护、儿童守护。针对不同年龄段对于产品的使用需求进行定制化，带给用户更加人性化的使用体验。

六、定制化的播放页模式设计

不同用户对于产品的使用需求有所差异，固定的模式虽然可以减少产品的开发成本，但是单一的体验不够人性化。针对不同用户提供更多选择，可以带给用户更加人性化的体验。

MOO 音乐 APP 为了满足不同用户对于播放页的体验差异，设计了播放页模式定制化切换，用户可以选择以专辑封面或者背景大图进行展示。为了直观的方便用户做出选择，模式设计以可视化的图形展示，便于用户更快的做出选择。定制化的模式虽然把繁琐的事情留给了产品开发者，却把更好的体验带给了用户。

七、缩放预览满足对细节的体验

随着短视频走进更多用户的视野中，短视频的形式也是越来越丰富，满足不同用户的使用体验至关重要。特别是图片形式引入短视频平台，对于细节的体验因人而异，缩放画面满足对于细节的体验才能更加人性化。

抖音 APP 无论是针对视频还是图片形式作品都可以缩放预览，配合缩放的手势交互带给用户放大细节查看的体验，满足了不同用户对于细节的需求。手势交互也是产品设计师需要多多探索的方向，更加便捷的操作有助于提升用户对于产品的使用体验。

八、满足用户好奇心的设计

用户从小白到依赖是一个逐步探索的过程，好奇心的用户会点击尝试任何的功能，甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验，给予反馈式的设计才能满足好奇心的驱使。

爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗？有没有尝试去点击体验，作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面，为该功能的曝光新增了首页入口，用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心，也赋予了 LOGO 展示功能化的作用。

九、可以标记和叠加的点赞设计

点赞设计在众多产品中均有体现，这是用户表达对于内容的喜欢，以此来增加作者和用户之间的互动性。为了吸引用户点击和带来差异化的体验，点赞设计也被脑洞大开，在表情化、叠加点赞、点赞标记、微动效等方向不断探索。

小宇宙 APP 在播放页中对音频进行点赞时，可以多次叠加点赞，点击之后会针对音频播放进度条进行点赞标记，反复点击也会使得进度条纹增高，以此来强化点赞的程度。该设计解决方案不仅丰富了点赞的设计，也能通过标记和进度条纹的高度让用户记住关键的部分，方便后续回顾的时候知道哪些时间段是重要内容，提高用户对于产品的使用体验。

十、差异化的短视频推荐设计

作为新闻资讯类产品来说，大部分用户的习惯还是图文结合的阅读形式，不过随着短视频的出现，改变了一部分用户的阅读习惯。通过短视频获取新闻资讯、搜索指定内容、学习生活技巧或者专业技巧等均可实现，改变了用户的阅读习惯和获取内容的形式。

央视新闻 APP 作为新闻资讯类的专业平台，在满足用户阅读新闻的同时，也跟进了短视频观看新闻的体验。在底部标签栏以舵式导航的形式作为短视频新闻入口，点击之后会有推荐视频展示，差异化的推荐设计不仅提高了内容的曝光度，也吸引了用户的关注度。

小结

本期为大家总结了提高用户体验的十个优秀设计解决方案，体验、分析、总结是为了掌握别人的设计经验，积累设计灵感并运用到项目设计中。灵感的积累离不开总结，探索细微之处的差异化对于 UX 设计师而言至关重要。

本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。

1.圆的线性语言

线性圆形，它的粗细可自由变化，根据当前设计语言的风格调性特征决定的。线性圆形的作用绝大部分都是装饰，丰富画面视觉感官，它们大多情况下都是以单色或者黑白灰出现。

如果我们把上图的圆形线条去掉，设计感自然就弱几分。当然如果非要去掉也不会影响阅读，有了圆形形式感自然增强许多。

LOGO符号应用，变为粗线条

UI界面中应用圆形

2.圆形的渐变语言

渐变圆形基本都是以粗块面为主，它可以呈现出丰富细腻的质感、厚度、虚实变化的光影。

Sedigas

西班牙天然气协会Sedigas的品牌LOGO更新，通过圆形设计语言提取，在多场景下贯穿圆形的应用。

Sedigas（可点击图片查看视频或 点击Sedigas查看原文中内视频）

在品牌视觉语言动态介绍过程中，我们可以看到圆形的应用和丰富的变化，圆形与物理世界万物连接。

来看看其他案例

3.圆形面的特征

当圆形以块面的姿态出现时，它更随和，更加温润。块面的圆形和线性的不一样，块面圆形更加厚实，整体性，更聚焦。大部分情况下作为背景或者承载内容的容器。

在UI界面中，有时候圆形也可作为功能承载，操作区域更直观可视化。

当以时装饰元素使用， 圆形一般都会用作强调一些重要信息，同时也增加设计形式感，张力，可玩性。

4.圆形参数化特征

参数化圆形，它简单纯粹，以一种单一形态不断重复几个甚至几十个上百个的相同的形态，这些重复出现的圆形，大部分都是以装饰视觉效果呈现。

我们可以看到大部分圆形以线性姿态不断重复，而且重复中带有规律可循，比如朝着某个方向拓展开，这个方向可以是斜方向、水平或者垂直。

以同心圆的方式向外计算扩散开。

5.圆形的肌理

上面我们讲到了圆的线，块面圆、参数化形态和渐变特征，那么在最后这个模块，我们可以看到圆形还有一种特殊的存在，那就是肌理，这里说的肌理不是贴图的那种材质，而是通过几何演变来实现的，比如通过多条线的组合而形成，下面来看看。

上图的圆形，由多个长条几何形状不断重复形成，这些重复几何条状物就形成了一个大圆形的肌理视觉特征。

右上角圆形线性阵列，通过重复小短线条而形成，在一些特殊场景下，这种阵列圆形图还可以用来打造视觉记忆点或者品牌DNA序列。

圆形应用远远不止这些，比如还有立体、真实物理质感，还有多形态、空间感营造等等。

今天列举出来的这5种形态是我们设计中常用，不过在使用时候还是需要依据产品视觉调性合理应用，形式要追随功能。

原文地址：友设青年（公众号）

转载请注明：学UI网》没想到用上圆形后，设计感瞬间强了很多！

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、日常积累

设计师日常除了应对当下的需求，每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法，也可以让我们潜移默化中得到提升。

Panda｜全而美的设计订阅平台

Panda帮助设计师不错过每天的设计灵感和资讯，包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把Panda替换Chrome主页，每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用chrome浏览器的翻译功能可以粗略查看。

地址：https://app.usepanda.com/#

Topys｜创意内容平台

全球顶尖创意内容平台，作为中国成立最早、最受欢迎的创意垂直网站，以 “Open Your Mind” 为宗旨，始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。

地址：https://www.topys.cn

Voicer｜分享生活和设计的美学

我们总在生活中与「一瞬间的感动」相遇。Voicer的理念即是发现这「感动」， 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。

地址：https://www.voicer.me

Design better｜优质设计读物网站

涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物，同时提供PDF和有声格式。

地址：https://www.designbetter.co

二、研究分析

设计师在调研过程会研究用户、记录用户的行为和需求，会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理，协作整理，这里会推荐一些记录和整理的工具给大家。

Noted｜录音笔记好工具

Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候，经常错过记录的内容，如果通过一些软件录音的话，后期回听需要比较多时间成本。Noted可以在记录笔记的同时记录输入文字的时间点所对应的录音，输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听，方便在漫长的录音文件中快速检索。

Marginnote｜文献收集箱

重塑学习方式的阅读笔记工具，更加高效阅读书籍和学习，可以在阅读时摘录笔记，制作学习卡，提取关键词，根据笔记生成思维导图，梳理知识框架。非常适合阅读专业书籍，阅读论文以及复习。

地址：https://www.marginnote.com/chinese/home

GoodNotes｜手写笔记

一款功能强大的手写笔记软件，拥有多种笔记封面和纸张模板可以选择，支持自定义模板，可以简单处理图片，可以导入pdf、ppt等文稿并做标记，也适合做电子手账。

地址：https://www.goodnotes.com/zh-cn

腾讯文档｜在线协作

调研阶段方便多人一起搜集资料和汇总，多人同时在线编辑，内容实时同步。随时随地高效协作，轻松创作。

地址：https://docs.qq.com/home

Xmind｜思维导图

功能强大的思维导图软件，极简设计，流畅体验，多种结构图风格选择，方便资料的汇集和思路的整理。

地址：https://www.xmind.cn

三、设计创作

当设计目标确定时，接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外，一些高效的设计工具可以让我们事半工倍。

3.1 灵感搜集

Collect UI｜界面灵感

UI设计灵感库，基于dribbble平台精心挑选优质内容，提高效率便捷，为设计师提供专项更好的灵感。同时支持邮件订阅推送。

地址：https://collectui.com

Adobe Color｜配色灵感

Adobe color不仅从各个维度解决了我们的配色需求，同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索behance趋势。

地址：https://color.adobe.com/zh/create

Useanimations｜图标动效灵感

图标动态效果库，当绘制的图标需要一些巧妙的微动态效果时可以参考。

地址：https://useanimations.com/index.html

3.2 设计打磨

FigmaEX｜插件可视化

当插件特别多时候，FigmaEX极大的改善了Figma中使用插件的体验，将插件可视化。可以进行展开，同时显示插件的名称与图标。可以通过拖拽调整插件的顺序，调节高度。

Autoflow｜流程图插件

输出交互设计稿的时候，方便快捷的在不同画板之间连线，提升输出效率。

地址：https://www.figma.com/community/plugin/733902567457592893/Autoflow

Skewdat｜倾斜插

这是一个非常简单实用的 Figma 插件，它可以帮你将任何形状元素倾斜过来。

地址：https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio

Undraw｜插画素材

最棒最全的插画库，支持快速搜索，一键调整颜色。

地址：https://undraw.co/illustrations

Magic Eraser｜轻松移除杂物

一款免费的在线服务，它通过 AI 自动去除图片中不需要的部分，只需要上传图片，等待几秒钟即可。用鼠标把不要的部分划掉，松开鼠标就会闪几下，被划掉的部分就消失了，比如去水印之类的小东西，如果用 PS 的图章，估计要十来分钟，而用 Magic Eraser 就几秒钟，简单易用，推荐使用。

地址：https://www.magiceraser.io

3.3 设计验证

Checklist Design｜设计清单

设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景（页面、元素、流程、主题、品牌）下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。

地址：https://www.checklist.design/?ref=prototyprio

四、测试评估

好的方案不是一蹴而就的，设计方案需要不断的打磨和迭代。方案需要持续和用户进行沟通和测试，才能得到完善的方案。也需要和开发工程师不断沟通，以达到最佳的实现效果。

4.1 用户测试

腾讯文档｜在线收集表

用户测试阶段方便高效的收集用户反馈，一般用于定量的用户测试。

地址：https://docs.qq.com/

Hawkeye｜眼动追踪工具

一般的眼动跟踪设备比较昂贵，使用繁琐。这个名为鹰眼的眼动追踪APP，可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。

地址：https://www.usehawkeye.com/?ref=prototyprio

4.2 评估还原

CoDesign｜腾讯自研设计协作平台

覆盖产品经理、设计师、工程师协作需求。设计交付更轻松，有效管理和使用设计资产。

地址：https://codesign.qq.com/

Pixel Eye｜高效视觉还原

在项目上线前设计师都会对最终的产品实现效果进行走查，以保证设计还原的准确性，体验的流畅性。这是一款视觉还原工具，帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异，实时对比、实时修改，减少工程师与设计师的沟通成本，提升整体开发效率。

地址：pixeleye.暂未对外开放敬请期待

五、对外宣传

设计完成后汇报展示、产品的宣传包装等，提供更便捷优秀的展示形式。

5.1 效果展示

Mockup World

样机的类型全面而且免费，综合质量很高。

地址：https://www.mockupworld.co

ls.graphics

素材非常优质精美，有免费和付费的资源。

地址：https://www.ls.graphics/#UI

5.2 在线作品集制作

Adobe Portfolio

主要面向设计师群体，帮助设计师建立个人在线作品集。几分钟就可以建好一个作品集网站，提供精美模板选择。最大的特点是易于操作，无需懂网页程式，都能在建立一个网站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收费。已订阅用户可免费使用。

地址：https://portfolio.adobe.com/start

Portfoliobox

针对设计师或者创意人员的作品展示工具，可以直接在网页浏览器中搭建属于你的作品展示平台。

地址：https://www.portfoliobox.net/cn/

结语

此综述篇大家有了比较整体的了解，在设计流程中每个环节，介绍了一些比较好用的工具，后续的设计工具系列文章会针对某一环节进行更深入的探索。

感谢阅读，以上文章由腾讯ISUX团队创作，版权归腾讯ISUX所有,转载请注明出处，违者必究，谢谢您的合作。 

原文地址：腾讯ISUX

作者：ISUX设计

转载请注明：学UI网》设计效率工具趋势 ｜ 综述篇

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

转载请注明：学UI网》B端产品-StreamLake-RTC

转载请注明：学UI网》B端产品-BI分析工具

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

像这样的梦幻色彩的 LOGO 是怎么做出来的？其实非常非常简单，它的制作方法，没有任何感情全靠 AI 技能。能够熟练掌握 AI 工具对我们做 LOGO 的效率也会有大步的提升。今天我们就来分析一下如何借助 AI 的工具技能来设计 LOGO。

我们都知道 PS 的图层混合模式有使当前图层图像的色彩与下层图像的色彩进行混合的效果。很多同学不知道其实 AI 也有这个功能。在(窗口——透明度)里面就可以找到。

那现在我们就来分析一下这个 LOGO 是如何使用渐变的混合模式完成的。

首先仔细观察这个 LOGO 由哪些元素组成。是由几个小房子形状的几何图形，以不同透明度的渐变色彩叠压组成。其中的重点是色块叠压处的色彩是混合而成。

图形来源于网络，版权归原作者所有，本文借用分析AI技法 

第一步：先绘制出一个小房子形状，使用倾斜工具做出透视效果。

第二步：打开效果——扭曲和变换——变换，调整数值。

到这里图形就绘制完了，可以开始上色了。

第三步：先把图形取消编组，给图形填充渐变色后调整透明度为 50%。将混合模式调整为正片叠底。（下图展示的导出的渐变色图片失真了，实际上是很丝滑的颜色）

第四步：因为红色与蓝色叠加的关系，导致图形的中间有些暗，我们可以给图形添加一个高光。绘制一个圆形执行高斯模糊，将混合模式改为滤色，调整透明度让高光更通透。

最后，再加上排版就完成啦。

看到这里是不是就明白了梦幻色彩是怎么做出来的了。其实就是不同颜色的渐变色块的混合叠加。再按照物体的身体结构叠加上高光和阴影就可以了。是不是很简单。

第一步：将图形分成块面。注意需要按照动物的生长结构去划分 ，块面的大小不要相差太大，不然会形成特别空的面。

第二步：将每个块面填充渐变色，渐变色需要设置为混合模式。具体使用哪种混合模式需要按照混合模式的规律进行调整。块面与块面相交处还需要注意衔接自然，可以通过调整渐变的角度和透明度的方式进行过渡。

第三步：给色块添加多彩渐变形成亮面和高光。如果一层不够就多添加几层，一直到色彩多变又整体协调。

第四步：给色块添加阴影和暗面，让图形的色彩更通透。注意色彩混合模式需要调整，具体选择哪个模式由底色和新色块叠加后的效果决定。可以多个尝试模式对比，最终选择一个更合适的模式。

最后，把比较空的面填充一些细节，既填补了的空间又有一种动物毛发的感觉。再画出眼睛就完成啦。

说起来不难，做的时候还是有点麻烦的，几乎每个色块都叠加了五六层渐变。最后看一下渐变叠加的动图，可能会更直观一些。

有时候做完图形却觉得缺少细节，这时候可以通过渐变效果塑造出 LOGO 的层次感。通过渐变色彩明暗的变化和角度的调整，可以将图形刻画出立体感，也可以通过多层渐变叠加的方式，刻画出图形的高光和阴影。

图形来源于网络，版权归原作者所有，本文借用分析 AI 技法 

接下来我们来解析一下这个 LOGO 是怎么做出来的。看上去是一靶心一样，但是其实非常简单，只需要将其中四分之一做出来旋转复制一圈就可以了。

首先绘制出四个圆形和十字交叉线，这样就切出两个圆形的基本形。但是观察图形是有尖角的。所以再延着竖线绘制出几个圆形，特别需要注意的是线与线之间必须相切，这样就可以切出尖角了。

最后再旋转复制一圈就可以了。

接下来我们再看一下这个案例，相对于上面那个会更复杂一点，除了普通渐变还使用渐变刻画出高光和阴影效果。

最后将背景改为黑色效果更突出，再加上排版就完成了。

图形来源于网络，版权归原作者所有，本文借用分析 AI 技法

首先绘制一个三角形，拉出圆角。再画一个圆形与三角形居中对齐。

打开（窗口—效果—变形—下孤形）这样就得到了一个有弧度的边。然后扩展图形我们将上面半截裁掉，只保留下面的图形。

以中间的圆形为轴心，将得到的图形旋转 120 度复制一圈。调整位置后合并图形，这样就得到了一个带有弧度的三角形。

在得到的三角形上绘制一条曲线，分割出一个图形，将得到的图形旋转 120 度复制三份。再使用形状生成器进行剪切合并。这样基础图形就完成了。

接下来为三个图形分别填充不同的渐变色。再绘制出阴影和高光增加层次感。

绘制阴影，将阴影填充黑色，调整透明度为 50%。绘制好一个之后旋转复制 2 份就可以了。

高光填充白色到透明的渐变，混合模式调整为叠加。同样也只需绘制一份，之后复制即可。

这样就完成了，普通的图形加上渐变色后变得更有层次感了。

AI2022 对 3D 功能进行了升级，可以轻松地将 3D 效果（例如旋转、绕转、凸出、光照和阴影）应用到矢量图稿 ，接下来我们就来解析如何使用 3D 效果设计出更有立体感的 LOGO。

图形来源于网络，版权归原作者所有，本文借用分析 AI 技法

这个图形虽然是喷泉的形态，但是拨开多余的线条我们可以清楚的看出基础形其实是一个甜甜圈。甜甜圈的横切面是一个圆形，由此可以得出第一步需要先画一个圆形。再使用 3D 绕转功能即可得到甜甜圈了。

执行 3D 绕转后调整数值 ，注意调整位移的数值来调整厚度。当然位移的数值由基础图形的大小决定。

之后需要绘制出一排黑白相间的线条，并新建为符号。PS：把所有线条选中，直接拖入符号面板就可以新建符号了。新建为符号后就可以作为贴图使用了。

继续打开 3D 绕转的面板，点击贴图按钮，在符号处选择刚才新建的符号，为每一个面贴图，选完贴图以后需要勾选（缩放以合适）和（三维模型不可见），这样线条才能完全覆盖圆环。

这样 3D 绕转加贴图形就完了，然后再将图形扩展。扩展后就可以随意调整线条了。将线条延长并且调整长度，做出参差不齐的效果模仿水流的状态，然后将延长的图形拉出圆角就可以了。

最后调整一下细节，再给图形加上排版就完成了

上一个案例使用了 3D 绕转功能，接下来这个案例就使用了 3D（经典）里面的另一个功能，3D——凸出和斜角。

图形来源于网络，版权归原作者所有，本文借用分析AI技法

首先打出字母，当然做这种类型的 LOGO 时候对字母的选择有一定的限制 。需要选择两个字母可以连接不突兀的才行。比如这两个 E 就可以完全的链接在一起。打好字母后将 E 字母适当变形，再复制一组线条，作为中间的连接线。将三组图形分别新建为符号(前面讲解过怎么新建符号，这里就不重复了)。

接下来绘制路径，作为横切面。然后打开效果——3D（经典）——凸出和斜角。打开预览，调整数值和角度。

再打开贴图，选择刚才新建的符号，把图形的每个面贴上对应的符号。可以先选择缩放以适合，再根据实际预览效果进行调整至最佳效果。

最后将得到的图形进行扩展，取消编组后，为图形填充不同颜色增强图形的立体感。

两个案例看下来，是不是已经掌握了 3D 工具的使用方法了。那么接下来我们举一反三，使用 3D 功能来做一个立体感的 LOGO。

第一步：肯定是先绘制出横切面，用线条绘制出字母 B 的轮廓，注意线条不需要闭合。

第二步绘制黑白相间的条纹线条，拖入符号面板新建为符号备用。

第三步选中 B 字母的横切面，打开效果——3D（经典）——凸出和斜角。调整凸出厚度的数值还增加图形的立体厚度。调整角度让图形的视角更舒适。

打开贴图选择刚才新建的条纹符号。在表面那里选择不同的面，都贴上条纹，选择缩放以适合。

最后再在相交处绘制阴影增强立体感。这样就完成啦，新技能 get~

第一次见这样的立体感 LOGO，还以为是 3D 软件做出来的。后来发现 AI 一样也可以完成。只需要用简单的网格就可以绘制出立体的效果。

图形来源于网络，版权归原作者所有，本文借用分析 AI 技法

第一步绘制出菱形网格。网格的绘制方法也非常简单，可以用线条建立，先画出一排竖线，然后旋转 120 度并复制，再重复复制就可以了。也可以使用等边三角形连续复制进行搭建。

第二步使用形状生成器延着网格的方向合并图形，形成立体感的造型。两个格子组成一个正方形，再用一个一个的正方形组成想要的几何图形。

第三步将生成的图形提取出来。

第四步为图形上色。上色的时候需要设定一个光源，根据光打过来的方向，设定每个面的颜色。通过每个方向的块面的深浅变化，强化图形的立体感。

最后再加上排版就完成了，是不是超级简单。

那么举一反三，我们也来尝试用 2.5D 网格绘制做一个 LOGO，第一步还是按照上面的方法绘制出 2.5D 网格

第二步延着网格的角度绘制出长方形，并拉出圆角。因为将字母几何化后，字母的形态是有两条竖边的，所以绘制出四个长方形为一组，方便后面合并修剪出字母结构。

第三步，按照字母的结构，先绘制出分割线条，注意线条与线条之间需要相切。因为之后需要使用形状生成器工具进行修剪。

第四步，使用形状生成器工具合并和剪切出字母的结构出来。

第五步，将生成的字母，复制一份进行翻转。然后调整色彩，将字母做出立体感。

是不是很简单。除了这个 LOGO，还有很多种类型的 LOGO，都可以借助这样的菱形网格来完成。快去尝试吧！

AI2022 新增了一个重复功能。尤其是径向重复，简直太好用了。学会这个功能分分钟做出一个 LOGO。接下来我们就尝试使用重复工具做出下面这个 LOGO。

图形来源于网络，版权归原作者所有，本文借用分析 AI 技法

先绘制一个圆形一半，将描边模式改为尖角。复制出四个。

打开对象——重复——径向。

拖动按钮即可调整数量和距离。左边的按钮可以调整重复数量，中间的圆形按钮可以调整元素的距离，中间的另一个按钮可以调整重复的范围。另外双击进入隔离模式可以调整单元素的方向和形态，其它的元素也会随着单元素的变化产生实时变化。

得到想要的图形后，将其扩展，使用形状生成器进行修剪。最后再给图形填充颜色就完成了。

最后配色再加上简单的排版就可以了！

重复工具真的太好用了，尤其在做重复构成 LOGO 时会提供很大的便利。下面我们就尝试用这种方法来设计一个 LOGO。单元元素图形直接使用英文字母 O。

首先打出一个字母 O，我们将其进行简单变形。

打开对象——重复——径向，调整数量和单元素的角度，调整的过程中会得到很多意料之外的好看的重复图形。

最后再调整细节加上排版就是一个完整的 LOGO 了！

是不是有很多同学好奇像这样复杂又有规律的线条图形是怎么做出来的，其实也是非常简单。接下来我们就来分析一下如何简单快速地做出复杂的线条渐变图形。

图形来源于网络，版权归原作者所有，本文借用分析 AI 技法

我们先看这个简单一点的线条渐变图形应该如何做。首先还是先分析解构图形，将它旋转 45 度后，将线条折分开，是由细、中、粗三种粗细不同的线条组合而成一个圆形。

那么我们就先画出三种粗细不等的线条。

再画出三个部分的外轮廓。

将三个部分分别与刚才绘制的条纹进行剪切。使用形状生成器，按住 alt 健减掉不需要的部分即可。

将得到的三个图形拼合在一起后，合并所有图形，再在相交处拉出圆角，增加细节同时也让图形之间更有整体感。

最后将图形倾斜 45 度让图形更有张力，再加上排版就完成了。

看完这个案例，是不是对线条在 LOGO 图形中的应用有了一定的认识，我们再来学习下面这种更复杂一些的应该如何做。

图形来源于网络，版权归原作者所有，本文借用分析 AI 技法 

首先将图形进拆解，可以看出这个图形看似复杂，其实是由两个线条组成的圆形重复构成。重复构成的图形我们只需要做出单元元素即可，那我们就先把单元元素提取出来。

从提取的单元元素可以看出图形是由粗到细变化的线条组成的。从线条变化的角度是左右对称的。所以我们先绘制出对称变化的线条。

绘制两个长条方形，将下面一根的一端转为尖角。使用混合工具混合出 6 条渐变的线条。再将图形整体复制一份进行垂直翻转。

绘制一个圆形与刚才得到的图形进行剪切。使用形状生成器工具，按住 alt 键将不需要的部分修剪掉即可。

将线条的右侧全部改为尖角，选中两个点——右击——平均——两者兼有，就可以转成尖角了。

绘制一个小圆形，居中对齐。将图形与小圆形进行切割，将切割出的线条水平翻转。

最后将得到的图形旋转 90 度，向下复制一份就完成了。

AI 的混合工具可以将两个形状或者颜色创建平滑的过渡，步数越多过渡也就过平滑。快捷健是 ctrl+alt+b。

首先我们来分解一下这个 LOGO 的图形，先抛开色彩，只看图形。

我们可以看出这个图形的基础图形其实由两个三角形的混合而成。还需要注意的是，三角形的顶点需要设置为圆角。

接下来我们将两个三角绘制出来，注意线条的粗细并且选择圆角的形式。

将两个图形进行混合，注意按顺时针方向进行混合，图形会更饱满些。

是不是特别简单，那么快去举一反三，别光让眼睛学会了，也照顾照顾“手”，让它也学学。

最后看一下今天的案例汇总！

好了，今天教程就到这里啦，我们下期见！

原文地址：胡晓波工作室（公众号）

作者：yoyo

转载请注明：学UI网》8个AI技能给你的LOGO加BUFF

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、利用手势辅助实现快捷操作

利用手势交互辅助隐藏式功能操作，可以在不改变当前结构的基础上实现快捷操作，带给用户更加便捷化的体验。

夸克 APP 在访问了多层级页面之后，如果想要快速回到浏览器主页，点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动，可以快速激活返回主页的操作，手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作，提高了用户对于产品的使用体验。

二、点赞设计的情感化探索

点赞在阅读类场景中随处可见，用于表达用户对内容的认可度而产生的情感共鸣，通过点赞给予赞同。点赞设计的创新已逐步在探索，通过更加情感化的设计表达提高用户体验，借助手势的变化呈现出更有趣味性的点赞设计。

今日头条 APP 单击点赞图标会随机性弹出表情化符号，多次点击会持续弹出更为丰富密集的表情符号，长按则会像模拟持续发射的特效，伴随着音效和震动带来“视听触”等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验，也是用户释放阅读压力的一种情感共鸣。

 

三、情感化的点赞文案设计

除了从点赞视觉感官层面进行设计探索以外，众多产品也在文案提示设计上面进行情感化探索。

AcFun APP 在对话题等内容点赞时，会弹出温馨的文案提示，每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度，带给用户更好的社交互动体验。

 

四、突破常规的模式切换设计

设计都在探索差异化的感官表达，如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面，设计师都在尝试更有创新的表达，带给用户不一样的使用体验。

Wonder APP 在模式切换上做出了一个新颖的设计解决方案，通过环形卡片设计进行模式切换，可以单击和滑动进行切换。动态的卡通形象增加了感官体验，流畅的卡片切换也带来了不错的操作体验，是一个在布局层、视觉感官层、互动层等方面的不错探索。

五、特色的签到展示设计

签到设计对于大家来说并不陌生，提高用户签到的参与度是大家都在不断思考和探索的方向。

AcFun APP 将签到设计成日历展示形式，点击签到之后弹出，配合日历运势的概念来设计，提高用户的签到兴趣。内容却不是正式的日历运势相关内容，配合趣味化的文案设计，让用户会心一笑。视觉感和情感化文案设计的融入，提高了签到设计的感官体验，进而提高用户的参与度。

 

六、自定义字号提高阅读体验

通过公众号等自媒体进行阅读已经成为大家的习惯，不同公众号编辑内容都会有所不同，字体大小和行间距等没有特定的规范。官方虽然会有默认设置，但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验，自定义的阅读调整至关重要。

在公众号阅读文章时，可以通过右上角的功能入口进入“调整字体”。用户可以根据自己的阅读习惯设置字体大小，在标准和自定义大小之间切换，提高用户的阅读体验。

 

七、自选色实现更灵活的个性换肤

个性化的皮肤主题在众多产品中已经运用普遍，当用户体量增加之后，个性化的设置才能满足不同用户的体验需求。

酷我音乐 APP 在个性换肤模块中，除了设置多个主题皮肤供选择以外，用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格，也可以通过色环自己调节任意颜色，满足不同用户对于感官体验的需求。

 

八、自定义图满足用户的创作欲

对于一些追寻个性化较强的用户，预装的自定义设计已经无法满足他们的体验需求，激发用户创作欲的设计迎面而来。

酷我音乐 APP 在个性换肤模块中，用户可以通过“自定义图”实现更加个性化的皮肤。用户可以选择任意拍摄的照片，然后通过透明度和模糊度来调节照片效果，满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择，用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲，才能带给用户更加人性化的使用体验。

 

九、关联功能叠加设计提高使用率

为了提高功能的曝光度，直接展示在用户的视野中是很多设计师的处理形式，但是却增加了感官层面的视觉负担。

幸识 APP 把关联功能进行合并式的叠加设计，不仅对视觉进行降噪，由于属于关联性的操作，用户更容易通过功能联想进行使用。当用户点击观看“时间戳”时，底部功能会被替换为“发起”，发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时，不一定选择各自展示，相互叠加或者切换式的交互设计也是不错的解决方案。

 

十、趣味性爆满的点赞设计

点赞是用户情绪化表达的关键，表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户，更加趣味夸张的设计在逐步被探索。

微博 APP 针对点赞设计单击时，出现表情化的符号弹出，持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴，满足用户释放情绪的最大化需求。

小结

在用户使用体验和感官体验层面探索了这些优秀的案例，希望可以抛砖引玉，带给大家更多启发。发现设计背后的思路，总结设计表达的经验，运用优秀案例的技巧，提高我们的设计解决能力。

以上总结仅代表个人观点，如有不足欢迎大家留言补充，我们互相进步。

我们不妨换个手写的文艺字体，通过对比，这时会发现适合的字体可以恰当表达出一张图片的风格。

再拍一张照片，夜晚寂静的高架桥，符合氛围的主题、加上好的排版方式本是一件非常浪漫的事情，但如果字体不在一个频道里，就会破坏整个主题的氛围。

我们不妨换个字体试试，通过对比，能看出字体在设计场景时的重要性。

一串文字，为什么通过排版设计出来还是不好看了，因为字体是一个非常细致的感受，当改变了字体形态之后，那种暗恋的感觉好像又回到了当初在校园同桌的她。

我们用英雄两个字来示例如何分析字形判断。

1、字形内部的空间和边缘体饰都偏版直方正，所以缺少个性，无法给人独特性的氛围表达，适合叙述性场景。

2、字形内部宽厚，边缘体饰却带有微微尖角，上下故意的压扁，使着字体底盘很稳，给人一种力量和浑厚的感受。

3、毛笔性字体，天生带有自由和挥洒豪气的特点，但是这类字体顿挫的边缘好像在告诉我们，它在克制自己的张力，适合做为主标题使用。

4、同样的毛笔性字体，跟上一种就截然相反，它将字体的豪迈豪不隐藏的表现出来，能体现出一种情绪的特征化。

在实际场景使用时，以下几种字体的使用就更能表达出恰当的字体在设计场景时是多么重要。

最后再带来一个字体的实际案例

▽

一个建筑放置于画面中间，两只手拖住物体，制造夸张对比的错视感。

再将主题文案通过穿插的版式手法放置于物体周围，最后添加一些叙述信息填补版式的空缺，看起来排版没有太多问题，但仔细观察主体和场景的气质却没有被烘托起来。

当我们改变字体的使用后，整体的气质立马显得庄严和宏伟，再通过对比我们发现，原来与好的设计之间，差距也只是一个字体的使用而已。

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》如何正确使用字体的重要性

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

转载请注明：学UI网》来了！解读2022年10种UI/UX设计趋势

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司