首页

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) 浏览(2018)

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) 浏览(2054)

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) 浏览(8384)

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) 浏览(1869)

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) 浏览(2383)

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) 浏览(4172)

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

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) 浏览(2431)

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) 浏览(3494)

echarts图例(legend)显示设置位置，样式，内容(百分比，水平，竖直显示，icon样式)

前端达人

   

 

//图例
    legend: {undefined
        icon: "circle",
        //icon形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
        itemWidth: 10,  // 设置icon宽度
        itemHeight: 10, // 设置icon高度
        itemGap: 40, // 设置间距
        // top: '5%',//竖直位置
        // left: 'center',//水平位置
        x: 50,//水平位置
        y: 200,//竖直位置
        orient: "vertical",//设置显示顺序，默认水平（水平，竖直）
         textStyle: {undefined
            color: "#000"
         },//文本样式
         // 使用回调函数（设置文本显示内容，例如 加百分号）
          formatter: function(name) {undefined
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {undefined
              total += data[i].value;
              if (data[i].name == name) {undefined
                tarValue = data[i].value;
              }
            }
            var p = ((tarValue / total) * 100).toFixed(2);
            return name + " " + " " + p + "%";
          },
    },


评论(0) 浏览(10147)

这7个小技巧快速帮你改善UI界面

seo达人


1.为了更好的字体组合，选择「超大字体家族」吧！

在成千上万的字体当中寻找合适的组合是一件非常艰难的事情。如果你也为之苦恼，那么试试「超大字体家族」吧！

通常所说的「超大字体家族」（SuperFamily）其实指的是一组被打包到一起可以互相搭配的衬线和非衬线体，它们风格和细节不一样，但是互相搭配效果是颇为不错的。

我个人强力推荐的是 Merriweather 和 Merriweather Sans、Roboto 以及 Roboto Slab 这样的搭配。

「超大字体家族」最大的优势在于，它是已经被验证过的优质组合，用的时候不用担心~

 

 2.减小标题文本字间距，视觉平衡更好

在标题文本中使用较大的字间距，是排版设计中最常见的禁忌之一！

在放大文本的时候，常规比例下的字间距会显得更加明显，视觉上会显得有点「稀疏」，减小字间距能够让标题文本更加紧凑，在视觉上更加平衡，通常会让人更加愉悦。

 

 3.注意纵向行间距和段落间距的节奏感

当你想让整体排版的节奏感足够好的时候，有必要针对性地重新调整行间距和段间距。

你需要根据靠近原则，让相互关联的标题和正文之间的段间距更加靠近一点，让不相关的内容块互相之间分开，间距拉远，从而自然而然地进行区分。

通常而言，你可以让标题上方的留白更大一些，标题下方的留白更小一些，这样就可以了。

 

4.如果标题很短，可以试着使用全部大写

在英文为主的页面当中，全大写的文本辨识度其实相对更低的一些，较长的标题文本使用大写字母更是难于辨认。不过对于仅有一两个单词的短标题而言，就容易识别多了。

另一方面，短标题使用小写字母会显得不够饱满，这个时候使用大写字母能够让它在视觉上更加突出。

相应的，在使用全大写的短标题当中，适当地拉开字间距，能够增加呼吸感，降低压迫感。

 

5.如果能让你的标题更加简短明了……那么就这么做吧！

如果可以的话，标题尽量简短有力一些。

比如「It’s your style, and your way」这样的标题可以直接浓缩为「Your style. Your way.」。

这样的标题更容易阅读，也更加有力，更容易被消化和感知到。

当然，这样的文案设计技巧是需要根据行业和领域进行优化的，这个方法并不适用于全部领域。

 

6.选字体的时候，尽量选择有很多不同字重的

你所下载或者购买的字体，是否有很多不同的粗细/字重/样式供你选择？

如果你有的选，尽量购买或者选择那种有很多不同字重的字体族。如果这款字体只有一种字重，建议你尽量避开它。

在很多不同的设计项目当中，不同的场合可能会用到不同的字重，如果它只有一种字重，那么你要么只能选择别的字体，要么就需要额外购买，很麻烦。

即使这款字体包含两三种不同的样式或者字重，也足以应对很多不同的需求，创造出有韵律感的设计了。

 

7.选择贴合设计风格和气质的字体

不同的字体有不同的风格。有的字体粗壮有力，有的柔和自然，有的现代而规整，有的友好而舒适，有的则有趣且俏皮，等等等等。

每种字体都有不同的气质，你需要把握字体的气质特征，有意识地总结这些属性，当你在应对不同的设计项目的时候，能够快速找到气质贴合的字体。

这似乎是一项艰巨的任务，但是从长远来看，能够帮你更快地搞定各种设计问题。

 

结语

很多技巧都不复杂，甚至称得上是微不足道。但是如果用好这些小技巧，能够让你的设计事半功倍。

 

原文地址：marcandrew.me

译文地址：追波范儿（公众号）

作者：Marc Andrew

译者：terechen

转载请注明：学UI网》这7个小技巧快速帮你改善UI界面

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

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

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

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

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



评论(0) 浏览(2168)

分类

日历

链接

个人资料

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

存档