首页

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咨询、用户体验公司、软件界面设计公司



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咨询、用户体验公司、软件界面设计公司


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咨询、用户体验公司、软件界面设计公司



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

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咨询、用户体验公司、软件界面设计公司



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

前端达人


  1. let myChart = this.$echarts.init(document.getElementById('plant-charts'));
  2. // 绘制图表
  3. myChart.setOption({
  4. tooltip: {
  5. formatter: '{c}' //设置单位
  6. },
  7. //图例样式
  8. legend: {
  9. data: ['宽带情况', '数据量'],
  10. textStyle: {//图例文字的样式
  11. color: '#fff',
  12. fontSize: 12,
  13. padding: [0, 20, 0, 0]
  14. }
  15. },
  16. grid: { //设置图标距离父级div的间距
  17. top: "10",
  18. left: "0",
  19. right: "15",
  20. bottom: "10",
  21. containLabel: true
  22. },
  23. xAxis: {
  24. type: 'category',
  25. boundaryGap: false,
  26. data: ['2015','2016','2017','2018','2019','2020','2021'],
  27. axisLabel: {
  28. interval: '0', //类目轴(category)中用数值表示显示间隔,0为显示所有,1为隔一个显示一个,以此类推
  29. textStyle: { //文字样式
  30. color: '#62799C',
  31. fontSize: '12'
  32. },
  33. },
  34. axisTick: { //y轴刻度线不显示
  35. show: false
  36. },
  37. },
  38. yAxis: {
  39. type: 'value',
  40. //show: false,
  41. axisLabel: {
  42. textStyle: { //文字样式
  43. color: '#62799C',
  44. fontSize: '12'
  45. },
  46. },
  47. // 控制网格线
  48. splitLine: {
  49. // 改变轴线颜色
  50. lineStyle: {
  51. color: '#2a2a2d'
  52. }
  53. },
  54. axisTick: { //y轴刻度线
  55. show: false
  56. },
  57. },
  58. series: [{
  59. data: [5000,6000,7000,4400,3200,4500,6800],
  60. type: 'line',
  61. itemStyle: {
  62. normal: {
  63. color: 'rgba(62,139,222,1)'//线颜色
  64. }
  65. },
  66. areaStyle: {
  67. normal: {
  68. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折线图颜色渐变
  69. offset: 0,
  70. color: 'rgba(62,139,222,0.6)'
  71. }, {
  72. offset: 1,
  73. color: 'rgba(62,139,222,0.01)'
  74. }])
  75. }
  76. },
  77. }]
  78. });

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 + "%";
          },
    },


这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咨询、用户体验公司、软件界面设计公司



这是一份汇集全球优秀APP截图的资源

seo达人


 
图片 
 
看到这些界面很多小伙伴儿会忍不住问黑马哥这都是什么产品,哪里可以下载。其实我也没有下载~O(∩_∩)O哈哈~,这就是今天要给大家分享的一个好东西。
 
为了方便大家进行灵感采集,黑马哥为大家发现了一个不错的平台。汇集了全球众多的优秀 APP 截图,你再也无需一个一个去下载截图了,而且也不需要受到注册才能使用的烦恼,这里全部为你截图好了。第一次访问的时候,惊讶到我了,简直是非常的人性化,这些优秀的设计开启了设计的灵感源泉。
打开网站映入眼眶的这个数字有没有惊呆小伙伴儿,网站汇集了 50000 多个应用的屏幕截图,大大的节省了设计师一个一个下载截图的时间。 
 
图片 
 
网站通过应用和屏幕截图来进行分类展示,默认以应用名称的形式展示,如果你想要直接查看屏幕截图,点击按钮切换也是非常便利。
图片 
 
同样的应用还为大家区分了 iOS 和 Android 两个不同的版本,是不是非常的人性化。
图片 
 
点击选中的产品会进入到该产品的屏幕截图详情界面,汇聚了这个产品的全部界面截图。如果该产品上线了 iOS 和 Android 两个不同的版本,详情界面也会分别展示两个不同版本的屏幕截图。
图片 
 
这是一个使用起来非常简单的网站,海量的设计必将开启你的灵感脑洞。话不多说,大家赶紧去体验一下吧!把那些优秀的设计作品都翻出来,提高我们的设计效率。 
 
APP 屏幕截图汇总网站链接:
https://mobbin.design/备注:仅作为学习交流,请勿他用。  
 
 
原文地址:黑马家族(公众号) 
作者:黑马青年

转载请注明:学UI网》这是一份汇集全球优秀APP截图的资源

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

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

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

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



设计师,如何高效完成竞品分析!

seo达人


1.什么时候开始竞品分析

竞品分析其实一般在任何时候都可以进行,做足市场竞品研究,可以有效帮助我们理解竞品,发现可以使我们产品脱颖而出的机会,同时也可以减少竞品对我们的直接影响。
那么启动竞品分析的几个关键时间节点,新项目启动、项目改版、竞品有重大更新时,这三个阶段去做竞品分析,是相对不错的时间点。

 

2.竞品分析方法

竞品分析方法有很多,在这里,我分享大家能快速掌握并上手使用的方法。通过以下四个步骤,我们可以初步完成一份竞品分析文档。下面我们来看看每个维度如何进行?
(1)寻找合适竞品
挑选竞品是非常关键的第一步,一般需要根据自家产品定位,选择垂直TOP级别的产品几个不同用户群体产品就可以,不需要把所有的都拿来分析。但是除了这个方向,我们还需留意一些潜力较好的产品,比如产品口碑较好、用户下载量增长快,这也是值得我们研究的一个竞品。
挑选完竞品后,我们需要将竞争产品进行分级,比如一级竞争对手,二级竞争对手,细分市场竞争者。因为不同等级,意味着我们花时间会有所不同。最直接竞争产品,当然需要去深入研究。
如果不知道你这个领域那些产品做得好,这里推荐大家一个产品查询的工具Sensortower,可以去看看排名。
图片
https://app.sensortower.com/ios/rankings/top/iphone/us/all-categories?locale=zh-CN&date=2021-09-07

 

(2)定义分析维度
我一直秉承的一个观点,也是在之前一个大师哪里学到,竞争分析切忌大而全的分析,因为越是大范围分析,越是无法分析透彻,从而价值感就会越低。我们在分析时候,需要定义一组关键的维度。
比如,这次竞品分析,只看某个重点功能的内容布局设计趋势,那么我接下来的研究分析中,都只围绕这个主题进行。

 

(3)将竞品进行比较
针对这一步,需要深入挖掘产品核心亮点,要去思考为什么这款产品是这样的设计?同时将优缺点都说明清楚。这里比较推荐的一种方法就是截图进行对比,快速有效。
图片
比如以音乐软件的搜索入口为例,站在用户视角看,这个产品核心功能是怎么布局的?体验亮点怎么设计吸引用户的?视觉质感呈现如何打造?主流表现技法?需要将每个竞品的做法优劣截图对比,并将优缺点写出来。
图片
同时还可以进入到更深层级,比如,搜索不到情感化如何处理的?搜索过程中加载表现方式等?当然,这些差异化打造,还可以看看其他行业做得较好的产品。

 

(4)得出关键结论
关键结论,就是将前面分析的重要要点进行整合筛选,得出最终的产品参考策略,后续可根据这份分析策略可作为产品设计参考点。
这里需要注意的是,竞争分析得出结论,是给我们学习别人如何把用户体验做到极致的?关注竞品如何解决用户体验问题的?品牌穿透如何做?我们完全可以充分利用这些打造自己的产品优势。

 

3.写在最后

大家看到我整篇文章里面,没有提及市场调研分析,用户分析等。网上很多文章讲得特别全而大,我相信有部分设计师看完就很懵逼,怎么入手?因此今天给大家支一个晓招,聚焦一个点分析,但偶尔我们可以适当在拓宽一些维度。好了,本文就到这,大家还需要多去实战练习,才能找到比较顺手的方法。

 

原文地址:功夫UX (公众号)
作者:Tony
转载请注明:学UI网》设计师,如何高效完成竞品分析!

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

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

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

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


PAG揭秘篇|高效动画解决方案

涛涛

在终端APP中,动画非常常见,它可以辅助视觉制造焦点,同时也可以让用户交互更加顺滑,但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端APP上是业界不断探索和解决的问题。


图1 传统动画实现流程图


当前最好的动画设计软件是Adobe After Effects(简称AE),从AE动画制作到终端APP呈现,传统的实现方式如图1所示,有三大痛点:实现成本高、沟通成本高和性能难以保证。


近几年,业界诞生了像Lottie、SVGA这样的动画工作流解决方案,虽然在一定程度上提升了生产效率,但存在AE支持能力有限、动画性能难以保证、配套工具支持有限的问题。


1 :PAG解决的问题

——————————

PAG(Portable Animated Graphics)是腾讯PCG发布器中台自主研发的一套完整的动画工作流解决方案,助力于将AE动画方便快捷的应用于各平台终端。PAG的流程图如图2所示,设计师在AE上设计出动画后,可以通过导出插件导出pag文件,同时PAG提供了桌面端预览工具,支持实时预览效果,在确认效果后,通过运行配置上线,各平台终端可以通过PAG SDK加载渲染pag动画。


图2 PAG动画工作流流程图



与Lottie、SVGA相比,PAG增加支持了服务端。除此之外,如图3所示,PAG动画方案在导出动画文件大小、AE特性支持和可编辑性方面具有较大的优势。


图3 PAG和Lottie对比图


2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

和Lottie、SVGA实现不同的是,PAG不依赖平台端渲染接口,可以实现各平台的渲染一致性。PAG与Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。


2.2 BMP预合成--全AE特性支持

无论是PAG还是Lottie、SVGA,所支持的AE特性仅仅是AE众多特性中的很少的一部分,这在一定程度上限制了设计师的创造力。针对这个问题,PAG新增了BMP预合成的导出方式,支持导出所有AE特性,适用于不可编辑的场景。其原理如图4所示,在合成的层面将渲染结果截取成图片,然后进行视频编码。

图 4 BMP预合成原理图



针对视频不支持透明通道而动画需要包含透明通道的问题,在编码的层面扩展了透明通道的支持,如图5所示。


图6 PAG矢量和BMP预合成混合导出




3: PAG导出插件

——————————

3.1 不支持AE特性提示

针对导出动画和AE设计动画存在偏差的问题,PAG导出插件增加了使用了不支持AE特性提醒功能,如下图7所示。

图7 PAG导出面板


在预览界面,同样有不支持特性的提示,如图8所示。

图8 PAG导出面板预览窗口


在使用AE设计动画的过程中,设计师可以方便快捷的提前查看使用了那些不支持直接导出的AE特性,换种实现方式或者导出成BMP预合成,有效的解决了设计动画和导出动画存在偏差的问题。


3.2 BMP预合成一键设置

在AE动画设计的过程中,PAG导出面板提供了一键设置BMP预合成的方法,如下图9所示。需要提示的是,一旦设置了BMP预合成,该合成中的文本和图片将不能再被用户编辑。


图9 BMP 预合成设置


由于BMP预合成可能会影响到可替换图片的数量,PAG同时会实时更新可替换图片的数量给设计以提示。


3.3 图片填充模式设置

在用pag设置的素材中,经常会遇到用户填充的图片与默认占位图尺寸不一致的情况,在导出面板中PAG增加图片填充的四个规则,如图10所示:


图10 可替换图片填充设置



其中:


不缩放:画面不缩放,从左上角位置开始裁剪


黑边:在保持高宽比的情况下缩放到设备的可用屏幕大小,图像不发生变形,如果图片尺寸和填充区域比例不一致,会出现黑边,为默认填充模式


拉伸:不保持宽高比填充,会发生失变形


裁剪:在保持高宽比的情况下缩放到完全填满可用的屏幕大小


具体效果如图11所示。


图11 图片填充效果图


4桌面预览工具PAGViewer

——————————

4.1 效果预览

PAGViewer支持桌面端预览PAG文件动画效果,如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片,且支持设计师本地填充素材,实时预览填充效果,无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频,如果PAG文件内置了音频文件,支持播放音频效果。具体效果如图12所示。

图12 PAG效果预览



4.2 性能检测

在pag动画实际使用的过程中,PAG经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳,需要进行返工优化,同样的问题在使用Lottie方案时候也会存在。


除了效果预览,PAGViewer还增加了性能展示面板,可以很方便的看到pag动画的基本信息,如时长、帧率、尺寸、bmp预合成的数量,图层总数等,还有量化的性能指标,定量的评估pag文件的性能,如图13所示,方便设计师进行针对性的优化,而不需要等到上线前才会暴露性能问题。具体效果如图13所示。


图13 PAG性能展示面板




5: PAG的应用场景

目前PAG方案已经广泛应用于腾讯公司内外几十款产品中,涵盖了众多的国民级应用。



总结下来,PAG目前主要使用在以下几大场景:


5.1 UI动画

图15 UI动画场景


设计师设计出动画文件后,研发只需要替换预设的文本内容即可,并且文件体积非常小。


5.2 贴纸动画

图16 贴纸动画场景


5.3 照片/视频模板

图17 照片/视频模板场景


PAG支持将内置的图片作为占位图替换,并保留所有动画效果。因此可以将整个PAG动画设计成一个模板,把预设的占位图替换成用户选取的照片,自动套用效果生成视频。全程可以让设计师自由批量生产模板,无需研发介入。


仍然基于图片替换原理,PAG也支持将占位图替换为视频,实现视频模板功能。



5.4 智能剪辑

图18 智能剪辑场景


智能剪辑是围绕用户上传的视频内容,生成定制化的模板,模板本身是不固定的,可以从多个PAG文件组合而成,类似活字印刷。设计师可以利用这个特性,构建自己的特效组件库,然后对接AI的识别能力,根据一定规则组合得到无限数量的模板效果,可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能,随机生成游戏高光时刻视频。


文章来源:站酷   作者:腾讯ISUX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

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

存档