首页

如何设计更好的图标？

纯纯

如何在你的产品中设计和使用图标？怎样给品牌带来独特的感觉？我的以下几点建议建议可以来帮助你设计更棒的图标。

 

前言

图标是用户界面中重要的组成部分之一。它是一种表示命令、内容并揭示功能背后含义的视觉语言。

你设计的图标应该可以被用户立即理解和识别。

如何在你的产品中设计和使用图标？怎样给品牌带来独特的感觉？我的以下几点建议建议可以来帮助你设计更棒的图标。

 

技巧1 -设置网格

你永远不会创建单独一个的图标，因为图标总是一套的。为了让你的图标具备统一性，你需要一个网格。

定义安全区域并设置边框。使用生成的网格作为模板，以固化所有图标的比例和大小。

 

 


技巧2 -保持一致

在设计一组图标时，使用相同的线宽、角半径和填充样式。这将确保你的图标看起来品牌统一和更容易识别。

例如：线宽 - 2px，角半径 - 3px;

 

 


Icon set from Super Basic Icons.

 

技巧3：表达清楚

在图标设计中，少即是多。使用清晰的隐喻和点到为止的细节，使每个图标易于识别和理解。



技巧4 -使用相等的间距

在你的图标元素之间使用相等的间距，使你的一整套图标看起来和谐。

你可以通过按住 Figma、Sketch 或 XD 中的 ALT 键来计算向量线之间的距离。

 

 

技巧5 -视觉矫正

基于视觉中心对齐图标元素，平衡视觉重量。


技巧6 -填充空间

旋转局促的图标，充分利用空间来获得更好的可读性。

 

技巧7 -组合样式

使用填充和轮廓样式来描述界面状态，帮助用户找到正确的图标或按钮。


技巧8-便捷的工具

工具

  • Icons8.com

  • iconfinder.com

  • flaticon.com

  • thenouproject.com

 

资源


评论(0) 浏览(1749)

29个你可能从未听说过的设计工具网站

纯纯

作为设计师保存的珍藏

Figma Templates

设计领域充斥着无数的设计工具、插件、网站、资源。这些工具能够帮助你改善你的工作流程，让你成为更优秀的设计师。多年来，我已经尝试过很多工具，但只有少数几个真正脱颖而出。

本篇汇总文章可谓是精华中的精华。其中有些是有趣的网站，你可以从中获得灵感；有些是工具和资源，绝对会让你成为更好的设计师。

我希望你能喜欢!


1. The preposterous web portal of Erik Bernacchi

eeerik.com

这很可能是我见过的最古怪、最令人印象深刻的网站。在这个网站里乱搞一下还蛮有趣的。这个网站充满了古怪的小程序，在这里我能消磨很多时间。


2. Cofolios

cofolios.com

Cofolios是一个企业实习相关的网站，包含了作品集、文章、实习机会、案例研究等相关内容。

在这里你可以从其他设计师的作品中获取灵感，向他们学习。

当我开始我的产品设计生涯时，我也曾是一名设计实习生，现在我仍然认为这是初级设计师进入大厂的最佳途径。我喜欢看人们进入设计领域的所有非常规路径，也喜欢阅读设计师们的经历。Cofolios上分享的许多博文都提供了在不同的科技公司实习的情况，以及你如何也能做到这一点的技巧。


3. ShareKit

www.sharekit.io

 

ShareKit可以帮你实现便捷地为自己的图片添加链接。

我一直在使用ShareKit来定制LinkedIn简介中的链接，因为默认的预览图经常是模糊的，而且与我分享的内容不相关。我在Sketch中设计的图形，将它们上传，然后就可以了。ShareKit还提供了数据分析功能，可以显示多少人推荐了我的作品和我收到了多少点击。


4. Saasframe & UX Archive

www.saasframe.io & https://uxarchive.com/

Saasframe和UX Archive是我在网站设计的某一环节被卡住的时候获得灵感的好网站。

这个资源展示了来自前沿科技公司的不同用户体验流程，以及优秀的设计。例如，当我我好奇其他公司是如何布局他们的 "忘记密码 "页面的体验的时--有了这些网站，我可以快速浏览其他公司的例子，看看他们是如何做的。


5. Startup Jobs

startup.jobs/design

无论是实习、兼职还是全职工作--startup.jobs都能满足你的需求。

他们有各种角色的职位，主要为热门的科技创业公司服务。在寻找任何级别的职位时，这个网站都是不可或缺的工具。


6. Mesh Gradients

products.ls.graphics/mesh-gradients/

Mesh gradients提供了100个免费渐变选择。

我喜欢这些渐变中使用的柔和和充满活力的色调。它们可以用来为界面、登陆页面或其他任何你正在进行的工作添加一抹色彩。


7. POSE by Gal Shir

galshir.com/pose/

POSE是我发现的创建解剖学和人体插图的最佳工具。

在插画中获得恰到好处的比例从来没有像使用POSE那样容易。当我还是Snapchat的插画师时，我偶尔会完成一个角色的插画，但却发现腿部与身体其他部分的比例不协调。如果当时有POSE的话，就能帮我解决很多头疼的事情。


8. Brand Colors

brandcolors.net

Brand colors是一个来自家喻户晓的品牌色彩的大规模集合。

无论你只是在寻找灵感、有趣的调色板，还是需要特定品牌的颜色，Brand Colors都是你的首选。


9. Let’s Enhance

letsenhance.io

Let's Enhance是一款革命性的工具，可以在不损失分辨率的情况下将任何图像放大到16倍。其结果是令人震惊的。


10. BeyondUI

www.beyondui.net

作为Pávlo Sanchez的创意之作，Beyond UI是一篇关于界面、资本主义、政府和公民的视觉文章。这是一个有趣的卷轴，其中充满了关于我们现代世界的发人深省和令人头疼的图形。


11. Figma Templates

www.figma.com/templates/

Figma Templates为你提供了很多免费的模版比如Instagram模板、流程图生成器、线框工具等。在Figma网站上就有十多个免费模板，可以改善你的工作流程，让你在制作下一个旅程图或维恩图时，更加轻松。


12. Remove.bg

www.remove.bg/upload

Remove.bg是一个一键删除图片背景的网站。

下次当你有一张图片，但不想花半个小时用Photoshop中的钢笔工具抠图，可以先在Remove.bg中试试。虽然它并不总是完美的，但如果它能完成90%的工作，那么我就不用在Photoshop中浪费一下午的时间了。


13. Whimsical

Whimsical.com

我曾犹豫过要不要把这个放在这里，但Whimsical是一个很好的工具，不能不提。

我相信很多人都听说过它，但这是给没有听说过的两个人的。Whimsical是我工作流程中不可缺少的工具--无论是线框图、创建用户流程图，还是安排导航，Whimsical都是我的首选。


14. Fluid Simulation

paveldogreat.github.io/WebGL-Fluid-Simulation/

这不是一个工具，更多的只是一个有趣的网站。

你能做的就是浪费一些时间盯着屏幕。我承认我花了很多时间来搞乱各种设置，看看会发生什么丰富多彩的爆裂效果。


15. Brennon Leman

brennonleman.zine.press/

Brennon Leman是一位非常有才华和古怪的艺术家，他创造了一些我喜欢的奇异的艺术作品。

他的风格简单而友好，同时也很有趣味性。我喜欢时不时地滚动浏览他的作品，看看他创作的作品。


16. Beeple Crap

www.beeple-crap.com/everydays

Beeple Crap是在另一个层面上是一件不寻常的艺术作品。

我关注他的Instagram有一段时间了，每当我看到他的一个经常怪诞的作品出现在我的页面中时，我都会感到一丝厌恶、好奇和着迷。这是我见过的最令人印象深刻的3D作品，更多的时候绝对是搞笑的。


17. Hamburgers

jonsuh.com/hamburgers/

Hamburgers是一个免费的动画汉堡图标动画库，可以供设计师或开发人员使用。

汉堡图标动画是一种很酷的方式，能为您的个人网站增添色彩或个性。你可以按照页面上提供的步骤轻松实现这些效果。


18. SVG Backgrounds

www.svgbackgrounds.com/

SVG Backgrounds是一个超级娱乐的网站，可以乱七八糟的创建各种色彩和几何背景。

有几十种背景选项，可以用滑块调整和自定义它们的外观。我还没有实际应用过这个工具，但我很喜欢用它来捣乱，希望有一天能在我的一个项目中把它变成现实。


19. Picular

picular.co

Picular是一个搜索引擎，你可以搜索一个词，然后就会出现与该词相关的各种颜色。

这是一个可以让你获得与我们的情绪版上的术语相关的颜色的想法的好地方。在为我的一个品牌或平面设计项目确定调色板时，Picular特别有帮助。


20. Lordicon

lordicon.com

在Airbnb的动画SVG库Lottie的强大推动下，Lordicons用他们精美的动画图标集为界面带来了生命。

我真的很欣赏他们对细节的关注以及这套图标的完美执行。网上的图标比比皆是，但能找到一个设计精良的套件，而且还有奇特的动画效果，真是难能可贵。


21. Emojione

emojione.com

Emojione在过去的几年中已经炸开了锅，所以你可能已经听说过它。

如果没有，它是一个有趣的网站，有精心制作的表情包、贴纸、动画等。他们对传统的表情符号进行了自己独特的旋转，甚至还创造了一堆自己的新表情符号，但在iOS或Android上还不存在。


22. Rotato

www.rotato.xyz

Rotato是我最近很喜欢的一款设备模拟工具。它是为我的UI设计创建快速而专业的样机图的最省力工具。

以前，我一直在Photoshop的样机博客中搜寻，直到找到符合我需求的东西（还得希望它是免费的）。Rotato让生活变得更简单，现在我可以拖放我的设计，然后调整设备的角度，并在几秒钟内有一个完美的样机图。


23. Interns.design

interns.design

Interns.design是一个最新的招聘网站，提供设计领域的实习机会。

我非常欣赏这个网站的简洁性和分享的职位质量。如果你正在市场上寻找实习机会，可以自己去看看。就像我之前说的那样，实习是进入设计和技术行业的最佳途径之一。


24. Blush

blush.design

由巴勃罗-斯坦利带来的 Blush，是一个与众不同的插画网站。

有几十个选项可供选择，你可以自定义人物的头发、裤子、肤色等等。这个工具的灵活性和可能性让你甚至不用打开 Illustrator 就能创作出真正独一无二的插画。


25. Fonts Ninja

www.fonts.ninja

Fonts Ninja 可以让你识别在网络上遇到的字体，甚至有时还会告诉你在哪里可以购买或下载你找到的字体。

我使用 What Font 已经有一段时间了，但最近才尝试Font Ninja，在比较了两者之后，Fonts Ninja 占了上风。


26. Tabler Icons

tablericons.com

 

Tabler图标是一个850多个可调整笔画图标的集合。

我最喜欢这个网站的部分是，我不需要为每个我想要的图标下载SVG。只需点击你需要的图标，然后它就可以粘贴到任何使用笔画的设计程序中。


27. Hallway Chat

hallway.chat

Hallway chat是Slack的扩展，它可以让你的团队在一天中一起进行10分钟的聊天。

类似于你在办公室与同事的走廊对话，Hallway让这些类型的对话在虚拟世界成为可能。将它免费添加到你的Slack频道，你就可以与你的设计师同事或团队成员享受一些轻松的聊天，让你离开工作几分钟。


28. Cool backgrounds

coolbackgrounds.io

Cool Backgrounds是一个工具集，可以为博客、社交媒体和网站创建引人注目的彩色图像。除了背景，生成的图片还可以作为桌面壁纸或裁剪为手机壁纸使用。


29. Google Color & Type Tool

Google Typescale Generator & Google Palette Generator

 

谷歌材料设计系统包含了大量有用的工具、资源、技巧、指南等。我发现在我的工作中最有用的两个工具是字体工具和调色板工具。调色板提供了一个已经调整好的颜色，你可以直接使用，实在是太方便了

作者：知群

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

截屏2021-05-13 上午11.41.03.png

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

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

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


评论(0) 浏览(2154)

UI设计中如何配色？

纯纯

颜色跟其他事物一样，使用需要恰到好处。如果您在配色方案中坚持使用最多三种基色，您将获得更好的效果。将颜色应用于设计项目中，要保持色彩平衡，您使用的颜色越多，越难保持平衡。


颜色不会增加设计品质 - 它只是加强了设计的品质感

皮埃尔·波纳德（Pierre Bonnard）


如果您需要调色板中定义的颜色以外的其他颜色，请使用明度和色调进行调整。他们将提供不同的颜色基调与之配合。



60–30–10 规则


室内设计规则是一种永恒的装饰技术，可以帮助您轻松地将配色方案放在一起。 60％+ 30％+ 10％的比例是为了保持颜色平衡。这个公式非常有用，因为它创造出一种平衡的感觉，并允许眼睛从一个焦点到另一个焦点舒适地移动。 使用也非常简单。


60％是主色调，30％是副色和10％用于强调色。


e1f458de0ea5a801219c77abf06a.jpg


墙面漆（60%），家具（30%），配饰（10%）


颜色的含义


几个世纪以来，科学家已经研究出某些颜色的生理效应。 除了美学，颜色也是情感交流的创造者。 颜色的含义可能因文化差异而不同。这就是为什么你看到时装店铺的设计是黑白配色。 他们希望看起来优雅而高贵。


a18858de0ebca801219c77eecdb0.jpg


Asos采用纯黑白配色搭配绿色按钮设计，这种配色是有原因的。


  • 红色：激情，爱，危险

  • 蓝色：平静，负责，安全

  • 黑色：神秘，优雅，邪恶

  • 白色：纯净，沉默，清洁

  • 绿色：新生，新鲜，自然


首先考虑单色设计


在项目设计初期，我们通常倾向于尝试不同的颜色进行调整，但这种行为会很快违背你的初衷，当你发现的时候，已经花费了3个小时调整基础色...这确实很诱人，但你应该学会避免这种态度。

相反，你应当专注于元素的间距和整体布局。它会节省你很多时间。 这种约束是非常有成效的。从另一方面讲，它看起来并不乏味。如果你想让整个作品看起来更好，尝试不同的颜色选择。


43da58de08aaa801219c7791a8c3.jpg


我在追波（dribbble）上的作品之一。简约单色处理，专注于元素之间的使用。


避免使用灰色和黑色


我学到的最重要的颜色技巧之一是避免使用灰色等不饱和色彩。 在现实生活中，纯灰色几乎不存在。 黑色也是如此。

b6d358de08d0a801219c7750613e.jpg

这张图片最黑的颜色不是＃000，而是＃0A0A10


始终记着给你的颜色增加饱和度。潜意识里会显得更自然，为用户所熟悉。


667258de08f5a801219c77147ee4.jpg


相信自然


最好的颜色组合来自大自然。 他们看起来总是很自然。 寻找颜色设计的解决方案，最好的办法是调色板总是发生变化。


为了得到设计灵感，我们只需环顾四周。


975d58de0910a801219c7714bed0.jpg


保持对比


一些颜色相互融合，而其他颜色一起使用会发生冲突。 有一个明确的规则，想要了解不同颜色之间如何融合，最好的办法是观察一个色轮。 你应该知道这个方法，但是没有必要动手操作。


f09d58de095fa801219c77f5485c.jpg


获取灵感


当我们在谈论UI参考时，dribbble是最佳选择。它还具有通过颜色搜索的工具，所以当你想对其他设计师使用特定颜色进行视觉研究时，然后去这里：dribbble.com/colors


5ce458de097ba801219c77aa763e.jpg


视频，平面广告设计，室内设计，时装......有这么多鼓舞人心的地方可供收集。如果说根本就没有配色参考，那一定是懒惰的原因，把那些调色板保存下来，一切看起来都非常有趣。


通常我喜欢从KPOP（韩国流行音乐）视频剪辑中选取颜色，他们看起来很华丽。


配色工具推荐


为了方便起见，我搜集了一些最好的配色工具可供选择，在2017年获取调色板，他们会为您节省大量的时间。



Coolors.co


这个绝对是我最喜欢的取色工具。 您只需锁定所选颜色并按空格即可生成调色板。 Coolors还可让您上传图像并从中调出调色板。 很酷的事情是，你不仅仅是一个结果，而是有一个选择器，允许你修改参考点。


a68a58de0c65a801219c77885e56.jpg

网址链接：https://coolors.co

（请使用科学上网工具打开）


Kuler


这款Adobe旗下的配色工具已经和我们在一起了很长时间。它在浏览器和桌面版本中都可用。 如果您使用的是桌面版本，则可以将配色方案导出到Photoshop中。


296e58de0c83a801219c77fbb98e.jpg

网址链接：https://color.adobe.com

Paletton


它类似于Kuler，但不同的是，您不仅限于5个色调。 当您拥有原色并希望使用其他色调时，您可以使用这款很棒的工具。


92ba58de0c94a801219c77d2592b.jpg

网址链接：http://paletton.com

（请使用科学上网工具打开）



Designspiration.net


试想一下，你有自己的配色的想法，但你要看到几种颜色组合的例子。 Designspiration是一个伟大的工具。 您可以选择最多5种颜色，并搜索符合您的查询的图像。 真的很好，不仅用于找到具有特定调色板的图像，还可以在设计中实现它们。


52a358de09e9a801219c774d8bb5.jpg网址链接：http://designspiration.net

（请使用科学上网工具打开）


ShutterstockLab Spectrum


你可能会问：如果我想用我所选择的颜色搜索照片？ 那么，Shutterstock有一个叫做Spectrum的工具，你可以用特定的语气搜索照片。 您甚至不需要订阅，因为具有水印的小预览图像将足以生成调色板。


cc6c58de0a22a801219c77af34c9.jpg网址链接：https://www.shutterstock.com/labs/spectrum/

（请使用科学上网工具打开）


Tineye Multicolr


但是，如果你想搜索照片中的颜色混合，甚至指定每个颜色的数量，那么Tineye会帮助你。 本网站使用了来自Flickr千万张共享图像的数据库。

64dd58de0aa0a801219c77382a00.jpg

网址链接：http://labs.tineye.com



作者：Norman_HU

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

截屏2021-05-13 上午11.41.03.png

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

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

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




评论(0) 浏览(1410)

13种当下正火的设计风格，潮爆了！

seo达人


01.玻璃、琉璃质感

即把视觉主体做成玻璃质感或者是琉璃质感，并且在排版的时候，通常会把主体压在文字上，通过透明的材质使文字发生折射，创造出强烈的视觉反差。

图片

图片

图片

图片

图片

图片

 

02.酸性风

酸性设计是一种结合了金属质感、镭色渐变、达达主义、机能素材等特性的设计风格，在视觉上会有一种“酸”的感觉。

图片

图片

图片

图片

图片

 

03.不锈钢质感

有很多设计会把这种不锈钢质感的风格统统归结为酸性风，其实我觉得二者的差别还是挺大的，首先，这种不锈钢质感的颜色是黑白灰的，而不是彩色渐变；其次，整个海报的主色调通常也是黑白灰，视觉效果会低调、简约一些，并没有“酸”的感觉。

图片

图片

图片

图片

图片

图片

 

04.荧光风

因电影《蜘蛛侠之平行宇宙》的系列海报，荧光风也火了起来，画风类似街头涂鸦，并采用饱和度极高的对比色搭配，会有一种刺眼、眩晕的感觉，但视觉冲击力确实强，而且很酷、很潮。

图片

图片

图片

图片

图片

图片

 

05.弥散渐变插画

弥散渐变是一种通过模糊效果塑造的渐变效果，看上去像似水墨晕开的感觉，而且通常会加上一点杂色质感，使用这种渐变效果来绘制一些简单的插画，有一种清晰、时尚的感觉，常用于食品海报中。

图片

图片

图片

图片

图片

图片

图片

 

06.扁平几何插画

即通过简单的几何图形来绘制纯二维的插画，效果简单而抽象，这种风格一直都是设计师的宠儿，所以并不是最近才开始流行的，但是RGB色彩的使用可以让画面更加具有视觉冲击力，再配合灵活的描边和排版处理，这种风格也变得越来越现代、时尚。

图片

图片

图片

图片

图片

图片

图片

 

07.新丑风

这个备受争议的设计风格，喜欢使用很大胆、很刺眼的配色风格，比如玫红色配绿色，插画很随意，类似小孩的画作，在排版和构图上也很不严谨，完全不符合传统优秀设计的定义，故被称为新丑风，在商业设计中要慎用。

图片

图片

图片

图片

图片

图片

图片

 

08.三维文字

这类设计通常以文字为主，没有图片元素，把主要的文字通过3Ｄ贴图或者扭曲的方式，使其呈现出三维的视觉效果，这与文字通常呈现出来的状态完全不同，所以视觉冲击力也很强。

图片

图片

图片

图片

图片

 

09.3D插画

3Ｄ的世界是最接近真实的世界，所以3Ｄ是大的趋势，而如果把3Ｄ和富有想象力的插画结合起来，那么效果会更加的惊艳和震撼。

图片

图片

图片

图片

图片

图片

 

10.3D动效

在3Ｄ的基础上继续深化就是3Ｄ动效，被经常用在电商设计、线上海报设计和网页设计中。

图片

图片

 

图片

 

11.复古金属

画面中的图形也是简单的几何图形，但质感通常是用渐变工具做出的、比较粗暴的金属效果，再加上复古的配合和杂色质感，看上去很像上个世纪的海报。

图片

图片

图片

图片

图片

图片

 

12.复古故障

即把早期的电脑、电子设备出现故障所呈现出来的画面和效果，融入到设计当中，通常也会结合蒙太奇手法（拼贴风）使用，常用于艺术设计中。

图片

图片

图片

图片

图片

图片

图片

 

13.机能风

机能风也不是这两年才出现的，但最近也很火，画面的氛围比较科幻，通常以机器人或者被机械加工过的人物作为视觉主体，标题字体一般会用简洁、硬朗的无衬线体。另外，类似电路板造型的界面框也是机能风常用的设计元素。

图片

图片

图片

图片

图片

图片

– over –

 

 

转载请注明：学UI网》13种当下正火的设计风格，潮爆了！

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

截屏2021-05-13 上午11.41.03.png

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

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

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



评论(0) 浏览(1469)

22种最佳UI设计工具

纯纯

最好的UI设计工具可以适应几乎每一个设计过程，并有望满足你的创意要求。但是，既然有这么多的UI设计工具，那么应该使用哪些工具？ 


在过去几年里，Sketch和InVision的组合一直是许多设计师的选择，但其他工具也提供了具有竞争力的特性和选项。从来没有比以前更好的原型设计和线框工具选择了，所以我们现在来看一下都有哪些工具呢？ 


线框


1.MockFlow 


MockFlow使你能够快速构建基本布局 


MockFlow是一套应用程序，对典型项目过程中的许多任务都非常有帮助。基本上，WireframePro应用程序是一个不错的替代原型开发工具，尤其当你在测试一些新想法时。 


如果你只需要创建线框图，那么请看一下MockFlow。这对于处理初步构想非常有用，它使你能够快速构建基本布局，而这有时是使思想变为可表示形式所需的全部内容。 


2.Balsamiq 



如果你想要快速的线框图，那么Balsamiq还不错。你可以轻松快速地为你的项目开发结构和布局。拖放元素使生活更轻松，你也可以将按钮链接到其他页面。这意味着你可以快速开始计划界面，然后与你的团队或客户共享它们。 


3.Axure 


AxureAxure是用于更复杂项目的出色工具 


Axure一直是市场上最好的线框图工具之一，非常适合需要动态数据的更复杂项目。使用Axure，你可以真正专注于模拟更具技术性的项目，并且在结构和数据方面需要格外注意。 


04. Adobe Comp 


Adobe Comp 


对于那些发现自己在旅途中创建和概念化的用户而言，Adobe Comp是一个不错的选择。 


用户界面设计和原型 


5.Sketch 


Sketch是设计人员的首选选择



Sketch是设计社区中非常流行的工具，使你可以创建高保真度接口和原型。Symbols是其中一项出色的功能，你可以在其中设计UI和元素以进行重用，这有助于创建设计系统并使界面保持一致。从那里，你也可以轻松地将设计导出到可点击的原型中。 


6. InVision Studio 


使用InVision Studio，你可以在单个画板上创建自适应设计 


InVision Studio仍处于早期发行版，它将帮助你创建带有大量功能的精美的交互界面。你可以根据许多手势和交互来创建自定义动画和过渡。最重要的是，你可以停止考虑为多个设备创建多个画板，因为可以在单个画板上实现响应式设计。这样可以节省大量时间，同时你也可以想到更多的想法。 


7.Craft 


Craft是Sketch或Photoshop用户的必备工具（图片来源：InVision） 


如果使用Sketch或Photoshop进行UI设计，则需要使用Craft。该插件可以完成所有工作，将文件与Invision原型无缝同步，并使用真实数据来填充模型。 


8. Proto.io 


Proto.ioProto.io可以带您从粗略草图到逼真的原型 


Proto.io可以创建从粗糙的想法到完整的设计等逼真的原型。该工具还为你的项目提供了很多可能性，包括详细的动画和自定义矢量动画。你可以先以手绘样式来开发初始构想，然后将其加工成线框图，最后以高保真原型完成。如果你想使用其他工具进行设计，Sketch和Photoshop插件确实可以提供帮助，但是Proto.io确实能够很好地处理端到端设计过程。用户测试等其他功能也将有助于验证你的设计。 


9. Adobe XD 


Adobe XD如果你被锁定在Adobe工作流程中，XD是一个不错的选择 


Adobe XD在Adobe Creative Cloud设计工具集合下为数字项目提供了最佳环境。如果你是Adobe的热衷用户并且是XD的新手，那么你可能不会觉得它的界面非常像Adobe。 


10.Marvel 


用Marvel构建页面非常简单


Marvel是另一个原型制作工具，在产生快速构想和完善界面时是一个不错的选择。与此类其他许多应用程序一样，Marvel提供了一种非常整洁的方式来构建页面，并使你能够通过原型模拟设计。与Marvel进行了一些出色的集成，这意味着你可以将设计插入项目工作流程中。 


11.Figma 



Figma使您能够快速地组合和设计接口。Figma平台自诩为一个协作设计工具，多个用户可以同时在一个项目中工作——当一个项目中有多个涉众参与形成结果时，这是非常有效的。这是一种理想的工具，如果您有一个实时项目，例如开发人员、文案和设计师需要同时处理一些事情。 


12.Framer X 



Framer X是一个非常令人兴奋的新设计工具，对于想要从其工具中获得更多帮助的经验丰富的UI设计师来说，当然值得一看。原型设计和创建交互非常容易。 


13.Flinto  



Flinto是一个很好的简单设计工具，可让你在设计中创建独特的交互。通过设计前后状态，你可以利用多种手势并创建简单的过渡。Flinto可以找出差异，然后为你设置动画。 


14.Principle 


Principle非常适合构建美观的动画交互 


交互设计是Principle擅长的领域，特别是在移动应用程序方面。使用Principle来调整并获得正确的动画交互。 


15. UXPin 


UXPin对于大型项目和设计系统来说，是最佳解决方案 


被描述为“端到端” UX平台的UXPin本质上是另一种设计工具，但具有创建设计系统的强大功能。UXPin为需要设计相同样式和指南的较大的设计团队提供服务，从而在协作起着重要作用时节省了产品开发的时间。 


16.ProtoPie 



ProtoPie使你能够创建非常复杂的交互，并且非常接近你希望设计工作的方式。也许最突出的功能是能够控制原型中智能设备的传感器，例如倾斜、声音、指南针和3D Touch传感器。 


17.Justinmind 



Justinmind这个工具可协助进行原型制作并与Sketch和Photoshop等其他工具集成。你可以选择交互方式和手势来帮助将原型组合在一起。它还包含UI工具包，使你可以快速地将屏幕放在一起。 


18.Origami Studio 



鉴于Origami Studio是由Facebook的设计师构建和使用的，这是一个很棒的工具。它有很多功能，包括在交互中添加规则和逻辑。 


19.Fluid 



Fluid是构建快速原型和进行设计的直观工具，使你可以快速使用原型，并且在升级后，轻松地将自己的符号与首选的UI资产组合在一起。 


20.Keynote 



除了用作创建演示文稿的好工具之外，Keynote（尤其是它的Magic Move过渡）也是快速为设计动画化和传达想法的方法之一。  


其他UI设计工具


21.GRTC 


决定航向大小吗？该Golden ratio typography calculator使用的黄金比例的科学产生可以在你的界面设计中使用的排版比例。 


22.Zeplin 



Zeplin不一定是原型制作工具，但它非常适合与原型制作一起进行的后期设计和预开发阶段。它使你能够采用自己的设计和原型，将其移交给开发人员，并确保你的想法得到了很好的执行。您可以将Sketch，Photoshop，XD和Figma文件上载到Zeplin，这将为开发人员和设计人员创建一个移交项目的环境，而无需进行繁琐的创建准则的工作。但是，值得确保首先需要它。 

原文地址：站酷
作者：Pursuer设计

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

截屏2021-05-13 上午11.41.03.png

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

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

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


评论(0) 浏览(7323)

UI设计反馈页风格

seo达人


两套风格各有优劣，“三维风格”细节丰富，但如果把控不好，容易使视觉显得“过重”，因而对视觉掌控力的要求较高。而“矢量风格”视觉较轻量，不容易对内容产生干扰，无论是绘制难度还是使用场景对设计师的要求都相对较低，因而泛用性更高。

决定使用何种风格，往往和团队成员配置相挂钩。比如在以前的公司，视觉部分的设计由外包团队负责，那么就会面临设计质量不好把控的风险。在这样的环境下，三鱼选择以“矢量风格”为主，并制定了一套视觉设计规范：

首先我沉淀了一批泛用性较高的素材，方便团队成员快速取用。

接下来，面向团队中一些更为“高阶”的设计玩家，三鱼制定了一套易于上手的创作规则，方便让他们加入进来一起创作，从而丰富素材库。于是我把矢量插图拆解为“模型”、“贴图”、“传输介质”，各沉淀出常见的基础物料(如下图)。

最终输出给团队一套包含了各种基础模型的psd、一套包含了贴图和介质的透明底逐帧动画。

最后，我只需要通过一段使用教程，就能够教会团队上手这套素材模板。它实在是太简单了，只需要以下两步：

1. 在PS中用“基础模型”绘制出静态的效果；

2. 在AE中将“贴纸”“介质”利用“边角定位”功能贴到图形上，即可完成动画的制作。

（当然，如果不需要做动画，步骤二里面的操作也完全可以放到PS中完成）

通过这套规范与教程，三鱼把矢量绘制的难度大幅度降低，其他设计同学也能顺利地在此基础上展开创作，设计效果遍地开花，设计师和业务方都很开心。

不知道大家有没有发现，虽然这套风格被称为“矢量”，但三鱼在其中虚虚实实地穿插了很多三维渲染。下图是以前的作品，二者灵活搭配在我的作品中很常见。

https://www.zcool.com.cn/work/ZMjkzMzUzOTY=.html

后来我还尝试加入人物规范。可惜哪怕我把规范做到了头、手、脚可以自由拼接组合，大家还是只愿意用我提供的那几个“范例素材”。这时“矢量风格”的缺点渐渐暴露出来：素材使用的灵活性较低，三鱼已经无法通过完善素材库来提升大家的工作效率了。

于是我尝试制作3D素材。3D素材有个特点：即制作过程虽然很繁琐，但制作完成后，素材使用起来很轻松。比如人体模型，虽然建模的过程很繁琐，但大家只需要拿到成品去摆Pose就成了。

果然，模型建好以后，摆Pose的难度就很低了，于是顺利产出了一系列B端常用的动画循环。(想玩玩的可以找我要人模源文件，你会发现模型一旦做出来，后续的创意空间是源源不断的)。

我们把这些小动画应用于业务场景中，顺利投入工作。

后续的创作成本已经变得可控，甚至还可以自由地切换质感，根据需要来决定它是“矢量”还是“三维”。(暴露了没有仔细观察生活，姿势不太自然，见笑了…)

咳咳… 越聊越远了。不过大家也发现了，不管是我还是我的团队，随着我们对质量与效率的进一步追求，视觉风格中融入“三维”的一环是迟早的事了。相比于PS绘制，“三维风格”需要在立体的空间内设定构图，然后是建模+材质+布光，制作的成本明显高了很多。

虽然制作成本较高，但模型的细节度也是PS绘制所达不到的，而且一旦建模完成，后续的扩展自由度会非常高。比如自由地变换角度/颜色。

3D更大的优势还在于丰富的动画演绎空间。

但就像前面说的，“三维风格”对设计师的要求明显高了很多，而三鱼面对的依然是一个没有3D基础的设计团队。但这一次三鱼选择了另一种方式——面向团队成员开展3D软件培训，而且是一场有别于常规课程的培训。

很久以前，在三鱼还是个美术老师的时候，在每届学生的第一堂课上，我都会讲这么一段话：“这节课我所讲的内容，就是你们学画画所需要掌握的所有理论知识。接下来的时间里，我会不断重复它们，并和你们一起反复练习，直到你们熟能生巧！”这就是三鱼对掌握一个视觉技能的经验：唯手熟尔。只有反复且高质量的练习才是掌握视觉技能的关键。

因此我对团队的培训方式很特别，开课的第一天我就坦言：“三鱼掌握的C4D功能不超过10个，所以各位不要有压力，我只教10个功能，傻子都能学会。而且三鱼能把这10个功能用到天花板，只要你们彻底掌握这10个功能，那么三鱼过往的99%的作品你们就都会做了。所以你们也看到了，三鱼并非一个“百科全书”式的老师，倘若你们对这10个以外的功能感兴趣，去网上搜教程会比问我效果更好… 当然，虽然我只教这不到10个功能，但我会用无数个高质量的案例来反复教这10个功能，直到你们彻底掌握它…”

这种培训方式效果还不错。课程进行没多久，已经有同学能将技能应用到业务中了。而且随着可复用的场景、材质、模型资源越来越丰富，如今我们团队的3D制作效率已远超PS绘制，当设计师可以灵活选择视觉表现形式时，手上功夫便不再是制约创意的瓶颈。

其实我团队有一位设计师之前曾学过3D，但因为“没有应用场景”，学会以后又渐渐忘光了。

诶？…这哪是说他啊，分明也是在说你对吧？哈哈哈哈！

在第一堂课前，三鱼临时让大家做了个小测试，内容很简单：“钢笔工具”人人都会吧？那好，我现在在网上随便搜一张“鱼”的图片，给大家5分钟的时间，用钢笔工具把它的外轮廓描下来。

你们猜测试结果怎么样？居然没人能在5分钟内熟练地把外轮廓描下来，可“钢笔工具”不应该是每个设计师都必须掌握的基本技能吗？其实这就是问题点：“会”和“掌握”是两码事，大部分设计师所谓的“会”，可能仅仅只是了解“两个卯点控制一段曲线”而已，很少有人思考过如何以最少的卯点绘制出想要的效果吧。熟练使用钢笔工具的人，往往可以很准确地放置卯点，不熟练的人，则需要反复试错，耗费了很多精力和时间成本。

讲到这里你可能已经意识到了：不同熟练度的人使用“钢笔工具”耗费的成本是不同的，熟练度越低，成本越不可控，而当我们面对有限的项目排期时，我们就更倾向于使用成本可控的自己熟悉的手法来解决问题，于是这个方案每次都被绕开，被其它解决方案替代，其熟练度永远练不上来。

明白三鱼要说什么了吗？不是没有应用场景，而是以你目前的熟练度，根本无法控制成本。这就是为什么我只教10个功能，却要求大家反复练习反复刷题的原因，熟练度才是最重要的。

噢对了，那套人模我后来又试着用来诠释音视频场景，比如直播(Live Brodcast)、视频会议(Video Conference)、连麦(Real-Time Communication)、主播PK(Anchor Player Killing)、视频发布(Video Posted)中。还挺有意思的的，大家可以拿去试着结合自己的场景玩玩。

今天就聊到这吧，来看看我都讲了啥：

一开始我分享了两套B段反馈页的风格，并分享了源文件，算是比较正经的设计技法交流；

接下来我站在管理者的角度，讲了讲我在把控团队视觉风格的经验，以及我做事方式的转变过程，穿插分享了人模的设计技法交流(感兴趣的可以问我要源文件)；

再后来，随着做事方式的转变，我也从一名管理者变成了一名人民教师… emm

看来管理的尽头，竟然是当老师… 也不知道今天三鱼讲的这些对大家有没有帮助。

 

原文地址：站酷

作者：三鱼先生

转载请注明：学UI网》干货虽然迟到了，但三鱼还有私货

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

截屏2021-05-13 上午11.41.03.png

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

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

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



评论(0) 浏览(1443)

APP导航栏设计分析：5种设计样式+4种交互状态

lanlanwork


 一、导航栏的构成 

整个导航栏通常分为左、中、右三部分，左侧和右侧主要用来放置功能控件，中间部分主要用来放置文字标题，接下里展开分析左中右三部分的构成。

图片

 

左侧导航

放置在APP顶部导航栏左侧的控件很多都跟动作相关，例如执行返回动作、关闭动作或者点击汉堡菜单进行展开动作等。

图片

除了在左侧放置表示动作的控件，还可以在放置头像框、消息提示等优先级较高的内容，用来引起用户的注意。

图片

在网页端的顶部导航栏中，左侧都会放置品牌logo，因为网页端顶部的空间更大，所以还可以在LOGO周围结合徽标、搜索框、下拉菜单等空间。

图片

 

中间部分

APP顶部导航栏的中间部分主要用于放置标题，当然根据使用场景的不同，还可以放置头像、搜索框、下拉框、导航等控件。

1) 标题

最常见的是在中间使用加粗的文字作为标题，也可以使用主标题+副标题的形式来展示更多的信息。

图片

还可以把标题区域做成支持下拉的样式，扩展更多的功能全。

图片

2) 用户头像

在社交类产品或对话框中，会在中间部分放置用户的头像和信息，用来展示用户的详细信息。

图片

3) 产品Logo

有些产品还会将Logo放在导航栏的中心位置用来展示品牌形象，在APP的首页可以考虑这样设计，起到强调作用。

图片

4) 分段控件

在移动端产品中，还可以在中间部分放置分段控件，通常2-3个标签，在早期的网易云音乐APP中就用到了这样的设计，通过点击标签或者左右滑动页面完成内容切换。

图片

5) 搜索框

导航栏中间经常能看到搜索框，然后搜索框左右两边放置其他的控件。当导航栏的内容太多，比如有文字标题、头像、按钮等控件，搜索栏和这些控件可能无法并排放置时，可以将搜索栏横向拉长，放在下一行单独展示。

现在淘宝APP首页的导航栏就做成了两行，上一行用来放置文字标题和功能图标，搜素栏集合扫码、拍照等功能单独作为一行。

图片

6) 导航选项

在网页中，标签、按钮、面包屑导航等常见的导航组件，通常会固定在网页导航的中心位置。当页面缩小到移动端时，考虑到移动端尺寸较小，如果顶部导航内容太多，可以尝试把功能组件放到第二层级。

图片

 

右侧导航

相对于左侧和中间，APP导航栏的右侧部分更加灵活，没有固定的要求说必须放哪些内容，根据需求放置各种类型的功能控件。

1) 头像

如果想调用与用户属性相关的功能，就可以将头像放在导航栏的右侧区域，点击弹出相关的选项。

图片

2) 图标

在右侧区域放置功能图标是最常见的设计，把用户最常使用的功能，例如消息图标、搜索图标，都可以集中到导航栏的右侧区域。

图片

如果右侧需要展示的图标太多，可以把这些图标聚合在一起，处理成类似微信首页右上角的设计，点击之后出现更多功能。

图片

3) 按钮

按钮也可以放在右侧区域来引导用户操作。当出现多个按钮时，要使用样式和颜色来灵活区分按钮的主次关系。

按钮的形状包括圆形、方形、圆角矩形等，按钮样式包括颜色填充、描边、图标和文字结合等多种风格，通过灵活的设计抓住用户的注意力。

图片

4) 搜索框

在网页端中会看到搜索框放在右侧的设计，将搜索框作为单独的控件或者和其他控件组合使用放在右侧，方便用户快速访问。

图片

5) 下拉菜单

在Pad端和网页端中，可以使用嵌套在应用栏右侧的下拉菜单进行切换帐户、语言等操作。

图片

 

 二、导航栏的5种设计风格 

顶部导航栏设计风格需要与与整个产品的UI相匹配，常见的导航栏设计样式有

扁平风格、阴影悬浮效果、颜色填充效果、使用半透明导航等。

图片

 

扁平风格

顶部导航区域完全融入到背景中，和整个页面融为一个整体，页面看起来比较简约。

图片

 

阴影悬浮风格

通过在导航栏下方增加一层阴影效果，让导航栏有悬浮在页面上的感觉，同时便于和页面其他内容作区分。

图片

 

颜色填充风格

将导航栏背景进行色彩填充，不透明度降低到8-12%，使用一些简约而高级的色彩来增加页面的丰富度，体现品牌特点。

图片

 

深色风格

APP页面的背景大多都是浅色，这个时候如果使用深色的导航，能够产生很强烈的对比效果，用来突出导航中的内容。比如早期的微信APP页面，顶部就是采用深色的导航，和浅色的页面作对比。

图片

 

透明风格

图片详情页的UI设计中常用到透明的导航风格，既能避免导航栏将图片内容遮挡，还能突出页面的高级感。

图片

 

三、导航栏交互状态分析 

选中状态

当用户与导航栏交互时，导航栏上的控件要能够动态切换来为用户提供即时反馈，比如当选中页面中的内容时，导航栏要出对应的操作提示，是否删除、分享等。

图片

 

滚动状态

当页面上下滚动时，原本扁平的APP导航栏出现阴影悬浮的升高效果，状态的改变会让操作看起来更自然。

图片

 

背景模糊

当页面滚动时，顶部导航出现毛玻璃的模糊效果，这是现在很流行的视觉效果，会让整体的用户体验更流程。

图片

 

尺寸调整

当页面尺寸变小时，要考虑将多余的导航选项折叠并隐藏在“更多”图标里面，这样才会让设计更合理。

图片

 

最后 

以上就是导航栏(App Bar)设计中能用到的知识点和设计细节，希望通过这些内容能帮助你对导航栏有更多的设计想法和思考。

「组件系列」的其他文章，近期也会不断更新，欢迎大家关注❤️

设计夹将近期分享的设计资源整理成了一份清单合集，如果其中有大家需要的资源，直接在公众号后台回复对应的关键词即可免费领取，这份清单也会不断更新更多的资源，建议大家收藏起来随时查看。

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

 

领取方式：关注公众号，后台回复【资源】获取高清素材清单

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》APP导航栏设计分析：5种设计样式+4种交互状态

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

截屏2021-05-13 上午11.41.03.png

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

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

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


评论(0) 浏览(1668)

12种超级好用的-免费渐变神器

seo达人

01  Cool Backgrounds

网站链接：https://coolbackgrounds.io/

网站介绍：Cool Background 是由5个开源生成器整理组成的彩色渐变图像集合在一起的工具集，内置5种不同的背景风格，每一种风格还提供了简单的参数配置。非常的炫酷美观。

低模三角形

粒子

CSS渐变

阶梯渐变

图片

使用方式：左侧选择不规则形状、图形、渐变背景、图片等，右侧可以选择不同的色彩组合，选择适合自己的色彩风格后，点击下载即可。

 

 

02 180种渐变背景

网站链接：https://www.fengtupic.com/colortool

网站介绍：内含180种渐变配色方案，特别好看美观，适合各种场景模式下的背景使用。

使用方式：选择适合自己场景的渐变色，可拷贝css格式，也可下载png格式。

 

 

03 Pigment

网站链接：https://pigment.shapefactory.co/

网站介绍：可通过改变饱和度、色温和色系改变配色方案，还可通过查看场景效果观察此配色方案呈现效果。

网站截图

饱和度  亮度 颜色

选中和更多

使用方式：左侧可以选择不同的饱和度和亮度，选择其他色调，右侧放大可查看场景配色效果。

 

 

04 ColorSpace

网站链接：https://mycolor.space/

网站介绍：Color Space 是一款非常实用的渐变生成器，我们只需要选择一个颜色，就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项，可以快速生成配色并查看 CSS 代码。

网站截图

输入颜色代码或选择颜色

生成方案

更多与修改

CSS代码模式

三色渐变

使用方式：上面输入色值，自动出来渐变方案，还可左右滑动选择适合自己的搭配方案

 

 

05 Adobe Color

网站链接：https://color.adobe.com/zh/create/color-wheel

网站介绍：可自由选择色环上不同的颜色值，依照类比、单色、三原色、补色等不同搭配模式进行搭配，下面展示一系列色值。同时可将看到的好的图片色纸上传上来，自动配比色值，同时，还能查看背景色与文字的对比度检测，非常适合网站多色搭配。

色轮

辅助工具

使用方式：滑动多tab滑块，选择色环颜色做不同类型搭配；利用协助工具查看文字与背景的对比检测。

 

 

06 BrandColors

网站链接：https://brandcolors.net/

网站介绍：这个网站是基于最大的官方品牌颜色做整理，包含了众多品牌颜色官网的配色方案，可作为网站或者品牌配色的借鉴。

颜色方案

选中后复制下载

使用方式：选择好相关品牌的色彩调性，可查看色值，可复制色值，也可以下载相关色值，超级方便。

 

 

07 Color Leap

网站链接：https://colorleap.app/home

网站介绍：一键生成复古风图片色调分离，可以选择年代搜索过去180种配色方案。

年份选择

年份列表

代表图片和查看颜色

查看颜色和查看图片

使用方式：选择年代，选择图片风格的配色方案，查看颜色，复制相关色调即可。

 

 

08 ColorBox

网站链接：https://www.colorbox.io/

网站介绍：ColorBox 是选择一个颜色，会生成一个颜色系列的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集，配色页面还有大量的个性化选项，满足我们的任何需求。

网站截图

饱和

使用方式：左侧可以添加不同的颜色分类值，右侧调整搭配的颜色系列和同色系和补色系不同选择，曲线直观展示出色调和饱和度的变化幅度。

 

 

09 Eggradients

网站链接：https://www.eggradients.com/

网站介绍：Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站，以鸡蛋的形式展现，支持一键复制。

预选颜色

渐变调色板

使用方式：选择适合自己设计场景的配色方案，复制即可。

 

 

10 CoolHue 2.0

网站链接：https://webkul.github.io/coolhue/sketch-plugin/

网站介绍：CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。

使用方式：在sketch下载插件，直接点击插件，选择相关配色。

 

 

11 Free Mesh Gradient Collection

网站链接：https://www.ls.graphics/meshgradients

网站介绍：包含100多个免费的渐变色合集，支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。

网站截图

翻译截图

渐变截图

使用方式：可选择ai、eps、jpg、png格式，选择好看的渐变色下载即可。

 

 

12 Grabient

网站链接：https://www.grabient.com/

网站介绍：Grabient 一个非常漂亮且实用的渐变网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

网站截图

调整角度

调整颜色

渐变比例

使用方式：选择适合自己风格的配色方案，点开调整渐变梯度，下载即可。

 

最后感谢大家的欣赏和学UI网干货小组和学UI网解答团的辛苦整理；

后续仍然会给大家持续带来 #学UI网干货分享（其中包括在线配色网站、在线工具、插件等）

谢谢大家的持续关注！~

 

转载请注明：学UI网》12种超级好用的-免费渐变神器

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

截屏2021-05-13 上午11.41.03.png

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

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

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



评论(0) 浏览(3031)

数据可视化图表设计指南：圆环图

seo达人



3种圆环图样式 

标准圆环图

图片

图表中间空心的部分用来展示数据的总数，用圆环的弧长和颜色表示不同数据的占比，图表旁边有图例用来解释说明。

 

布尔圆环图

图片

布尔圆环图就像是给圆环图做了布尔运算，只表示正负两个值。

比如想重点突出完成率，就使用绿色圆环来表示68%的完成率，圆环其他部分为灰色，同理想重点突出反弹率，就使用红色圆环来表示83%的反弹率，圆环其他部分为灰色。

圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。

 

标签圆环图

图片

直接在对应的圆环上加入标签比使用图例更容易理解。在屏幕空间允许的情况下，可以直接在圆环上添加「名称+所占比例+数量」的标签形式。

 

圆环图交互状态分析 

悬停状态

图片

在标准圆环图中，鼠标悬停在圆环图上时，跳出分段名称+百分比+数量值的弹窗。在标签圆环图中，悬停的圆环部分突出显示，其余部分淡出处理。

 

点选状态

图片

图表段可以是交互式的，点击对应的分段时，右侧的图例也会同步高亮显示。

 

焦点状态

图片

焦点状态和上面提到的悬停状态类似，唯一的区别在于，焦点状态选中分段后有一个放大+描边的圆环效果，突出展示数据。

 

空状态

图片

当没有可用的数据时，应该在图表上表明这一点，并给出提示引导用户去点击。

 

错误状态

图片

获取数据时偶尔会出现发生错误的情况。发生这种情况时，向用户提供有用的、可操作的解释，说明发生错误的原因并告诉用户可以采取哪些措施来解决问题。

 

圆环图使用指南 

使用分类颜色

图片

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据，同色系颜色常用在直方图中。

 

最多使用五个分段

图片

当圆环图包含多个数据分段时，图标会变得难以理解，为保证图标的清晰，尽可能将分段控制在 2-3 段，不要超过5段。如果数据过多，可以考虑使用柱状图、条形图等其他形式的图表。

 

保证数据准确

图片

圆环图的所有分段加起来的数值应该始终为 100%，没有有多段数据占比过小，可以一起汇总到“其他”分段中。

 

按顺序排列数据

图片

圆环图的份分段应从12点位置开始按最大值排序，然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

 

不要将时间分段

图片

时间是一个顺序变量，不能用作圆环图中的类别。例如每个季度的时间是相同的，但是每个季度访客却不一样，使用圆环图会给用户造成一定的困扰。如果以时间作为基本单位，可以使用直方图、条形图等图表。

 


原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》数据可视化图表设计指南：圆环图

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

截屏2021-05-13 上午11.41.03.png

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

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

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



评论(0) 浏览(1814)

echarts折线图背景渐变以及常用配置项

前端达人 



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                let myChart = this.$echarts.init(document.getElementById('plant-charts'));
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 绘制图表
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                myChart.setOption({
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                tooltip: {
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                formatter: '{c}' //设置单位
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                //图例样式
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                legend: {
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                data: ['宽带情况', '数据量'],
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                textStyle: {//图例文字的样式
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: '#fff',
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                fontSize: 12,
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                padding: [0, 20, 0, 0]
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                grid: { //设置图标距离父级div的间距
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                top: "10",
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                left: "0",
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                right: "15",
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                bottom: "10",
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                containLabel: true
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                xAxis: {
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                type: 'category',
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                boundaryGap: false,
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                data: ['2015','2016','2017','2018','2019','2020','2021'],
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    
                axisLabel: {
            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                interval: '0', //类目轴(category)中用数值表示显示间隔，0为显示所有，1为隔一个显示一个，以此类推
            
    

        
    

    
    29. 

    
  29. 

        
    

            
    

            
    

        
    

        
    

            
    
                textStyle: { //文字样式
            
    

        
    

    
    30. 

    
  30. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: '#62799C',
            
    

        
    

    
    31. 

    
  31. 

        
    

            
    

            
    

        
    

        
    

            
    
                fontSize: '12'
            
    

        
    

    
    32. 

    
  32. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    33. 

    
  33. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    34. 

    
  34. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    35. 

    
  35. 

        
    

            
    

            
    

        
    

        
    

            
    
                axisTick: { //y轴刻度线不显示
            
    

        
    

    
    36. 

    
  36. 

        
    

            
    

            
    

        
    

        
    

            
    
                show: false
            
    

        
    

    
    37. 

    
  37. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    38. 

    
  38. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    39. 

    
  39. 

        
    

            
    

            
    

        
    

        
    

            
    
                yAxis: {
            
    

        
    

    
    40. 

    
  40. 

        
    

            
    

            
    

        
    

        
    

            
    
                type: 'value',
            
    

        
    

    
    41. 

    
  41. 

        
    

            
    

            
    

        
    

        
    

            
    
                //show: false,
            
    

        
    

    
    42. 

    
  42. 

        
    

            
    

            
    

        
    

        
    

            
    
                axisLabel: {
            
    

        
    

    
    43. 

    
  43. 

        
    

            
    

            
    

        
    

        
    

            
    
                textStyle: { //文字样式
            
    

        
    

    
    44. 

    
  44. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: '#62799C',
            
    

        
    

    
    45. 

    
  45. 

        
    

            
    

            
    

        
    

        
    

            
    
                fontSize: '12'
            
    

        
    

    
    46. 

    
  46. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    47. 

    
  47. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    48. 

    
  48. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    49. 

    
  49. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 控制网格线
            
    

        
    

    
    50. 

    
  50. 

        
    

            
    

            
    

        
    

        
    

            
    
                splitLine: {
            
    

        
    

    
    51. 

    
  51. 

        
    

            
    

            
    

        
    

        
    

            
    
                //  改变轴线颜色
            
    

        
    

    
    52. 

    
  52. 

        
    

            
    

            
    

        
    

        
    

            
    
                lineStyle: {
            
    

        
    

    
    53. 

    
  53. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: '#2a2a2d'
            
    

        
    

    
    54. 

    
  54. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    55. 

    
  55. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    56. 

    
  56. 

        
    

            
    

            
    

        
    

        
    

            
    
                axisTick: { //y轴刻度线
            
    

        
    

    
    57. 

    
  57. 

        
    

            
    

            
    

        
    

        
    

            
    
                show: false
            
    

        
    

    
    58. 

    
  58. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    59. 

    
  59. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    60. 

    
  60. 

        
    

            
    

            
    

        
    

        
    

            
    
                series: [{
            
    

        
    

    
    61. 

    
  61. 

        
    

            
    

            
    

        
    

        
    

            
    
                data: [5000,6000,7000,4400,3200,4500,6800],
            
    

        
    

    
    62. 

    
  62. 

        
    

            
    

            
    

        
    

        
    

            
    
                type: 'line',
            
    

        
    

    
    63. 

    
  63. 

        
    

            
    

            
    

        
    

        
    

            
    
                itemStyle: {
            
    

        
    

    
    64. 

    
  64. 

        
    

            
    

            
    

        
    

        
    

            
    
                normal: {
            
    

        
    

    
    65. 

    
  65. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: 'rgba(62,139,222,1)'//线颜色
            
    

        
    

    
    66. 

    
  66. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    67. 

    
  67. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    68. 

    
  68. 

        
    

            
    

            
    

        
    

        
    

            
    
                areaStyle: {
            
    

        
    

    
    69. 

    
  69. 

        
    

            
    

            
    

        
    

        
    

            
    
                normal: {
            
    

        
    

    
    70. 

    
  70. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折线图颜色渐变
            
    

        
    

    
    71. 

    
  71. 

        
    

            
    

            
    

        
    

        
    

            
    
                offset: 0,
            
    

        
    

    
    72. 

    
  72. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: 'rgba(62,139,222,0.6)'
            
    

        
    

    
    73. 

    
  73. 

        
    

            
    

            
    

        
    

        
    

            
    
                }, {
            
    

        
    

    
    74. 

    
  74. 

        
    

            
    

            
    

        
    

        
    

            
    
                offset: 1,
            
    

        
    

    
    75. 

    
  75. 

        
    

            
    

            
    

        
    

        
    

            
    
                color: 'rgba(62,139,222,0.01)'
            
    

        
    

    
    76. 

    
  76. 

        
    

            
    

            
    

        
    

        
    

            
    
                }])
            
    

        
    

    
    77. 

    
  77. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    78. 

    
  78. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    79. 

    
  79. 

        
    

            
    

            
    

        
    

        
    

            
    
                }]
            
    

        
    

    
    80. 

    
  80. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    81. 

    
  81. 

        
    

        
    

    
    82.
评论(0) 浏览(2899)

分类

日历

链接

个人资料

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

存档