首页

超级可爱!插画萌新必学的PS极简马克笔简笔画:盆栽篇

seo达人


image

 

准备好了吗?

工具:Photoshop、手绘板

笔刷:art-markers:Round kyle 70(文末附笔刷下载链接)

适合:板绘零基础入门

 

马克笔笔刷的亮点:叠色

打开PS,新建一个2000px*2000px的文档,颜色模式为RGB。

我们不要急着开始画,先试试用马克笔笔刷Round kyle 70画出蓝色的水平线和波浪线,熟悉一下笔刷画出的效果,和笔刷培养一下感情。

image

这个过程中,你会发现,这个笔刷如果只是从头到尾画一条线,看起来很平淡,但如果在蓝色线条之上多画上另一条红色线,两条线的交叉位置就出现一个颜色更深的“点”,我们把它叫做叠色区,它能让整个造型变得不俗气,高级起来了~

image

盆,盆栽的盆

这时,我们正式开始画小盆栽啦,用笔刷画出一条蓝绿色水平线。然后再画出整个容器的“身体”。

step 01

这里要营造一个小心机,不要让水平线和容器身体连接起来,这样就能制造一个断线,断线表示我们下笔也是要休息的,这是一种线条的呼吸,极简的感觉就是这样来的。

image

step 02

用亮蓝色画出盆上的花纹,这里我用了波浪线,还可以把它画出框。

image

画的是植物没错

高级的感觉靠的就是“有技巧的画不像”来制造的,比如植物大都是绿色,但我们这里用了红色。这种故意用错颜色的方法,就会让画面看起来很时尚

step 03

试一下,用红色线条画出植物。植物叶片很简单,由一条线加一个圆圈组成。

image

这里注意一下,相同的颜色也可以制造叠色效果哦。

image

第二幅,来多一点装饰

有点感觉了吗?再来试试另一个盆栽吧~

step 04

这个花盆的造型是个六边形,用亮蓝色先画花盆的上下两条等长的水平线,然后用红色画出花盆的左边和右边的折线,框出一个花盆轮廓。

image

step 05

再用黑色画出花盆内部的线条,花盆中间就不会显得空空荡荡。

image

step 06

在花盆上面的左右两边分别画上两片叶子,像两个猫耳朵。然后再画出中间的叶片,叶片和叶片之间可以叠色表现,看起来就像一顶皇冠。最后再在上方继续画叶子,类似菠萝头的造型。

image

step 07

最后,我们再用红色在每片叶子尖上画一个小线条,就像给叶子涂指甲油。这是一个点睛之笔,多肉的颜值就又提升了。

image

最后把画好的两幅小盆栽放在一起,看看效果~每幅小画我们都可以配点文字,有点仪式感,这样画起来也很有趣。

image

拿去练吧~从简单开始

最后,这里的有我画好的一页简笔画练习,不焦,不躁,一天进步一点点吧~

image

长图版更适合临摹:

image

笔刷下载地址

百度网盘下载

链接:https://pan.baidu.com/s/1OdfNVJID_Cq3UbgawGQxbw

提取码:aqdb

 

原文地址:飞屋设计

作者:飞屋睿UIdesign

转载请注明:学UI网》超级可爱!插画萌新必学的PS极简马克笔简笔画:盆栽篇

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

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

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

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

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


这些设计小妙招,助力B端产品体验提升

seo达人

一、预判设计

在团队活动时,从搭档的一个眼神我们就能预判他接下来的动作,相互的默契配合能让我们顺利地完成任务,在产品设计中的预判设计也可以得到事半功倍的效果。

我们可以从历史记录、效果预知、智能辅助和行为惯性4个方面进行设计,辅助用户决策,提升操作效率。

1.历史记录

a.用户操作行为记录

广告优化师通常会管理几十至上百个账号,需要在多个账号之间频繁切换去盯盘和新建广告,频繁的操作难免会造成信息遗忘和决策卡顿,从而会影响操作效率。在管理后台的设计中可以通过记录用户最近操作行为,恰合时宜地为用户提供帮助。

案例:在新建计划环节,标识出本账号上次的选择记录(最近一次的投放目标),辅助优化师快速做决策。

图片

b.基于操作习惯的系统预测

平台系统可基于个体操作习惯和大数据分析来预测用户需求,提供高概率的操作建议,给予用户贴心指导。

案例:针对广告平台表格信息密集,不易快速获取关键指标的问题,Google提供了用户自定义栏,而Facebook的表格栏会根据用户列操作习惯和自定义栏行为进行大数据分析,预置一些高频意图的组合栏,一键切换即可查看关键指标,操作更便捷。

图片


2.效果预知

a.效果预览

表单页对填写的物料内容进行映射,展示真实效果预览,降低用户心理的不确定性。

案例:在进行广告创意创建的过程中,优化师填写完标题和上传完物料后很难知道广告投放到手机端用户看的真实效果。而所见即所得的可视化编辑方法支持创意样式实时预览,可以辅助优化师更好地进行创意优化。

图片

b.效益预估

针对一些需要效力评估的页面,平台通过预置好的算法对用户内容的表达及时给出估算值,给出建议,从而提高内容填写质量,降低填写的盲目性。

案例:Google广告平台在新建创意环节,对广告素材资源的组合方式和数量进行估算,呈现当前广告与高质量广告设置的差距,辅助用户进行高质量的广告制作。

图片


3.智能辅助

用户在进行输入等操作时可以提供智能辅助,例如表单填写时对需要录入信息的区域提供辅助提示,通过自动补全或联想词来帮助用户快速录入信息,在保持用户的操作自由度的情况下提效。

图片


4.行为惯性

在一些场景里,用户的行为具有很强的关联惯性,例如上班时间进到办公区域打开办公APP首要目的一般是打卡签到。通过梳理主线任务或整理用户体验地图可以挖掘出很多基于行为预判的设计机会点。

案例:预判用户在工作台内截屏后大概率是去反馈遇到的问题,适时将反馈入口透出,可以提高反馈的效率和用户体验。

图片

 

二、表达清晰

现实生活中,在与他人交往时,清晰的表达尤为重要。同样是演讲,有的演讲者“词不达意”没有重点,或者内容晦涩难懂让听众感觉索然无味;而好的演讲者则会用场景化的方式将逻辑复杂的事情讲给听众,让听众有身临其境的画面感。

好的设计也应该是清晰好用的,能让用户沉浸其中轻松高效地完成自己的任务。

如何让用户通俗易懂地了解产品功能,并能快速上手?我们可以从功能易理解、内容强吸引和选择无负担三个方面来降低用户的操作门槛。


1.功能易理解

a.术语转换

将一些晦涩难懂的词汇转化表达方式,转化为更贴近用户视角的文案描述,传递细节感受;

图片

b.信息有效展示

透过需求背后的真实意图分析和高效率的信息展示可以让用户更方便地获取更多信息,提升产品的服务效益。

案例:服务器预警平台从传统的表格形式优化成拓扑图。将所有的云服务器都抽象成一个个矩形,矩形的颜色代表服务器监控指标的状况。当方块颜色显示为黄色,则表示该云服务器内有监控指标出现了异常,这个时候目标用户就需要重点关注。

图片


2.内容强吸引

对于老用户来说,从之前习惯的平台迁移到新的平台一般会有很大的抵触心理。迁移前用户考虑的关键点包括:不迁移是否有影响?新平台有什么优势吗?迁移起来麻烦吗?

以百度营销客户中心迁移引导页方案为例,初期方案首屏只告诉用户平台升级了,但是不能快速了解到升级后的核心优势有哪些,同时迁移按钮设计得很弱,传达的信息是迁移可能会很麻烦,很容易让用户止步于此。

所以在进入迁移导流页面时,首屏首先要讲清楚新版平台的能力和迁移方式。对于当下想迁移的用户,明确迁移方式和入口;对于徘徊不定的用户,告知迁移后的好处并做好最后下线时间的提示。这些信息不仅能够消除用户迁移前关于成本的顾虑,也能吸引用户立即开始迁移行动。

图片


3.选择无负担

B端产品操作链路通常比较长,用户很容易迷失其中。对于逻辑复杂的功能在做页面设计时需要突出主次和流程引导,尽可能提供一个主要触发的主按钮,让客户不用过多思考就知道模块和操作的隶属关系,降低认知的负担。

图片

 

三、操作可控

我们在执行任务时总是希望有过往经验可借鉴,如果事情按照自己的预期发展了会觉得很踏实有可控感。同理,用户在操作一个系统界面时也会有类似的心理变化,对于自己熟悉的功能希望主动权在自己手里,能复用之前的经验无需额外的学习成本;对自己不熟悉的功能希望有及时的引导,能很快地上手并能掌握主动权。

不可控的操作体验会让用户在使用过程中产生很强的挫败感,一旦有了这样的心理感受就很难被扭转。那如何保障体验的基线确保用户正向的感受呢?下面就结合操作一致性和明确指引性两方面进行说明。


1.操作一致性

针对同类型的功能,在交互设计上要尽可能地保持逻辑对齐,保证平台的一致性同时降低用户的学习成本。一致性设计对产研提效也有很大的益处。

案例:下例中的批量操作项的逻辑,都是通过选中复选框之后在模块上方展示批量操作栏且支持一键关闭。这样该平台的用户无论在任何场景下只要注意到复选框就对批量操作功能有了预期,没有额外的学习成本。

图片


2.明确指引性

对于复杂的使⽤流程,最好能够在客户使⽤的过程中建立统一的指引,引导客户⼀步步完成操作,从而提高任务的完成率,促成业务目标达成。

案例:当一个平台需要用户完成的任务繁多且流程性强时,需要把所有的核心任务按照层级进行呈现,并作为一个固定模块展示在醒目位置。这样用户既可全局视角理解业务又能作为功能入口快速触达。

图片

 

写在最后

B端业务中,交互设计的核心在于为特定场景设计择优的行为路径;通过分析用户当前所处的阶段和场景来判断此刻遇到的关键问题。针对不同的问题去选择对应的解决策略,例如对于新手来说降门槛会是首要任务,对于熟手来说操作的效率会显得更为重要。结合预判设计、表达清晰、操作可控三个维度的案例可以让我们在对业务理解有限的情况下,产品设计能有更多思考角度,也能有更明确的设计主张。

 

原文地址:百度MEUX(公众号)

作者:商业用户体验部

转载请注明:学UI网》这些设计小妙招,助力B端产品体验提升

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

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

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

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

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


设计提效-Figma插件篇

seo达人

 

图片

 

序言

咦,同样是用Figma,为什么同桌小花早早下班,隔壁二狗岁月静好,而你却在Figma中焦头烂额?设计提速的秘诀就在于Figma中功能各异的插件。但当打开Figma插件库,海量插件让人头晕眼花,究竟哪一款才是最适合你的呢?为此QQ设计师在日常工作中反复实验,终于找到了这些宝藏插件,让UI设计领域的你成为高效的设计师。

图片

 

1、Skale-缩放能力增强工具

很多设计师在从Sketch转换使用Figma的时候,找不到对应Sketch里的缩放功能。此时你就需要Skale,这是一款热门好用的缩放插件,可以设置元素缩放中心,缩放比例或者缩放到特定的宽度、高度(包括该对象的所有属性也会随之缩放)。

下载地址:https://www.figma.com/community/plugin/808289809557716614/skale

图片

 

2、To Path-路径上创建图形和文字

经常做平面的设计师会遇到的一个问题,Figma内要如何在创建曲线的文字呢?你不妨可以使用To Path插件,它的功能是可以按照指定的路径来变换图形和文字。

下载地址:https://www.figma.com/community/plugin/751576264585242935/To-Path

图片

 

3、Morph-快速创建特殊效果

Morph可以在Figma内快速创建一些特殊视觉效果,如浮雕,霓虹灯,抖音故障效果,倒影,玻璃等。可以帮助设计师快速进行一些风格化的尝试和探索。

下载地址:https://www.figma.com/community/plugin/906950256777348534/Morph

图片

 

4、Mesh Gradient-网格渐变工具

当我们需要多种颜色混合渐变的效果时,Mesh Gradient的作用是可以在Figma内以网格的形式编辑渐变,你可以编辑、拖动、填充这些网格点,做出极光的效果。

下载地址:https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient

 

5、Webgradients-配色灵感工具

做设计非常常用的一个方法就是多去尝试,当我们在做某个界面的时候不知道配色该如何处理的时候,可以使用Webgradients插件内置的多种高级配色,或许你的灵感就此诞生。

下载地址:https://www.figma.com/community/plugin/802147585857776440/Webgradients

 

6、Auto Layout Styles-自动布局管理

相比Sketch,Figma在Auto layou方面极大的提升了设计灵活度。而Auto Layout Styles插件可以很好的管理或者单独对某几个元素配置Auto Layout,设计师可以在插件内设置好布局关系并进行命名,然后应用到设计中。还可以对已经设置好的布局样式进行修改,Auto Layout Styles会同步到所有调用过这个布局样式的元素中。

下载地址:https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles

图片

 

7、Batch Styler-批量修改文本和颜色样式

大家在工作中经常会需要去修改大量样式,这时候你就可以使用Batch Styler插件,它的主要提效点在于可以批量修改颜色属性样式,批量更改排版样式,批量删除、重命名样式。

下载地址:https://www.figma.com/community/plugin/818203235789864127/Batch-Styler

图片

 

8、Styler-快速创建样式

当需要批量创建样式的时候,手动逐个去创建并不是有效的做法,而Styler插件可以快速批量创建样式(包括文本,颜色,效果等),它可以基于图层属性批量创建、修改或更新样式,当设计师在搭建组件库样式的时候,Styler可以大大提高工作效率。

下载地址:https://www.figma.com/community/plugin/820660579767995949/Styler

图片

 

9、Design System Organizer-管理设计系统

设计师在Figma内搭建组件库时,Design System Organizer插件可以更方便设计师创建,管理和修改组件库。超级提效实用的功能包含:1.像文件管理器一般管理组件内容。2.项目在类别树之间拖拽移动。3.文件之前批量转移样式。4.批量重新链接实例和样式。

下载地址:https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

图片

 

10、Breakpoints-响应式断点插件

在Figma内,当需要展示界面因为拉伸拖拽而发生响应变化的效果时,使用口头描述和各种静态界面标注并不是最优解,使用Breakpoints插件,可以做一些响应式动态布局的效果,并共享动画原型。即使团队其他设计师没有安装这个插件,也可以在拉伸界面时预览到动态布局。

下载地址:https://www.figma.com/community/plugin/824289601590456356/Breakpoints

图片

 

11、Themer-UI界面主题管理

同时设计深色模式和浅色模式的视觉稿会耗费设计师不必要的精力,Themer的主要功能包括一键切换样式,主题管理,团队共享主题。能够从团队库中的已发布的组件创建和交换主题。将其作用于颜色、文本和效果样式的替换。设计师使用Themer可以一键切换成深色模式和浅色模式的设计稿,避免无效的适配模式工作。

下载地址:https://www.figma.com/community/plugin/731176732337510831/Themer 

图片

 

12、Motion-关键帧动画

当需要在做界面的动画时,很多设计师会问,Figma要如何导入AE?其实未必要导入AE才能做动画。Motion插件的作用是可以直接在Figma内完成关键帧动画设计,将大部分图层属性创建成关键帧动画,避免设计师做动画时需要不停切换设计工具,在Figma内就可以轻松愉快的完成静态和动态的设计稿。

下载地址:https://www.figma.com/community/plugin/889777319208467032/Motion

图片

 

13、LottieFiles-导入和浏览Lottie资源

在Figma内使用LottieFiles可以将自己的dotLottie(.lottie)和Lottie JSON(.json)文件导入Figma作为gif动画或高质量的svg图层,且可以访问和预览免费Lottie动画库内的资源,意味着有时候设计师甚至不需要使用其他设计软件来配合展示UI动画。

下载地址:https://www.figma.com/community/plugin/809860933081065308/LottieFiles

图片

 

结语

设计工具与设计师是相辅相成的。所有的设计工具本身都有局限,但合理利用插件可以放大工具的价值,为设计提效,让设计师有更多的时间去思考设计方案本身。

你在设计中是否也遇到过一些宝藏插件呢?欢迎在评论区分享给我们,大家一起做最高效的设计师~

 

Tips:

配合上期“工具趋势”阅读,收获更多噢~

设计效率工具趋势 | 综述篇

图片

 

原文地址:腾讯ISUX

作者:ISUX设计

转载请注明:学UI网》设计提效-Figma插件篇

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

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

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

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

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


硬核干货!渐变色在设计中有哪些妙用?

seo达人


图片

对于渐变一词的解释:“一种有规律性的变化”。作为设计师我们提到渐变,首先想到的就是渐变色,在工作中渐变色的使用随处可见,比如色彩搭配、文字处理、图形图标等等。

那么在设计中使用渐变色具体有哪些作用呢?希望本期文章对你有所帮助。

 

 

图片

你也许不止一次的在工作中使用渐变色,但你对渐变色的了解有多少?它有哪些属性?如何分类?

接下来让我们重新认识一下渐变色。渐变可分为有规则和不规则两种。

所谓有规则,顾名思义就是可以通过一些具体参数进行调整的。

首先从基础属性上来看,渐变色会根据方向、长短的不同,呈现出不同的视觉表现形式。

方向区别:

图片

长短的区别:

图片

在保证其他属性不变,只改变其长度时:渐变越长,色彩的变化越平缓;反之就会越急促。

如果将设计中的渐变色进行简单分类的话,可以根据渐变呈现的样式和颜色属性作为分类切入点。

从呈现样式上区分的话,可以将常用的渐变色分为线性、径向、角度、对称、菱形。

图片

根据色彩色相数量的不同,可以将渐变色分为:无彩色、单色、多色。

图片

同理可以根据色彩的明度和饱和度不同,将渐变色分为高明度、低明度、高饱和度、低饱和度。

图片

再来说下不规则的,就是没有太多规律、主观性比较强,工作中常用的就是通过滤镜中的模糊或模糊画廊里的模糊工具,制作不规则渐变。

下面列举几个比较常用的制作不规则渐变的方法:

① 利用高斯模糊制作。

方法:绘制图形填充合适的颜色,通过模糊工具调整。

图片

图片


② 利用光圈模糊工具

方法:绘制图形之后,通过模糊画廊里的光圈模糊工具,对其每个图形进行模糊处理,多调整即可。

图片

图片

③ 利用液化、路径模糊工具

方法:简单画几个图形,填充颜色之后用液化工具随便涂抹两下,再通过路径模糊进行调整。

图片

图片

图片

这里给大家提供几个制作思路,工具使用的先后顺序不同,得到的结果也不同,都是尝试尝试,也许会有意想不到的效果。

所以你会发现,渐变色的表现形式是多种多样的,就跟我们上学时候学习排列组合一样,每种不同的组合都会产生不一样的结果。

重新认识渐变色,目的是让你对其有更系统的理解和认知,那么接下来就详细说下:渐变色在设计中的妙用有哪些?

 

 

图片

对于“质感”一词,百科上是这么解释的:指造型艺术中运用不同的表现手段表现出的各种不同物体所具有的特质。

如金属、竹木、陶瓷、玻璃、呢绒等的软硬、轻重、粗细、糙滑等真实感觉。

而渐变色对于我们营造整体设计质感,有一定的辅助作用,用最简单的渐变色和纯色对比:

图片

单纯只看背景的话,很明显右侧渐变色背景在视觉表现上质感更强、也更加丰富,下面结合案例来看,你认为哪款海报质感更强?

图片

比如我们经常会看到一些工业设计,在展示产品时经常会用到一些单色渐变或无彩色渐变作为背景。

图片

图片

如上图所示,背景使用渐变色的目的也很明显,更利于产品质感的凸显,与产品本身形成视觉上的呼应。

接下来我们用AirPods耳机做个演示:

图片

不改变整体元素,只在其背景上拉个简单的灰到白的渐变:

图片

是不是感觉质感提升了很多?

类似的案例还有:

图片

图片

图片

综合来看,一般当渐变色的目的是提升整体质感时,多为无彩色渐变或单色渐变。

 

 

图片

在设计工作中,画面空、枯燥乏味是很多设计师容易碰到的棘手问题,面对“空”最常见的解决方式就是做加法,也就是说增加视觉元素,而色彩也是视觉元素的一种。

渐变色在视觉上会给人很强的节奏感和审美情趣,通俗来讲:相比纯色,渐变色在视觉上的变化更丰富、层次感更强。

图片

人们对于色彩的感知度是非常敏感的,所以当我们的设计作品出现单调、缺少层次感时,通过改变色彩属性,营造更多视觉上的变化,也能帮助我们解决问题。

比如使用渐变色,就是能很好的解决上述问题,下面看个简单的案例:

图片

通过案例对比我们不难发现:在只改变背景配色的情况下,渐变色背景让作品整体在视觉上变得更加丰富、有层次感。

类似的案例还有很多:

图片

图片

图片

图片

不仅如此,丰富画面的渐变色不只是局限于背景,还可以是文字、装饰元素、图形等等,前提是要兼顾整体性,以免出现乱的现象。

图片

下面做个案例,用最近很火的歌曲《漠河舞厅》撸个简单的海报,先把文字和构图确定好。

图片

整体略显单调,简单做下调整,适当的加些装饰的元素。

图片

这样就有点感觉了,但整体视觉上还是不够丰富,给背景加点渐变试试。

图片

适当的加点杂色,会不会更有质感一些?

图片

再改个配色形式试试:

图片

来波红配绿:

图片

花里胡哨再来一个:

图片

当使用渐变色的目的是丰富画面时,不管是单色、多色,线性还是径向、规则与否等等,对其就没有太多的限制。

 

图片

聚焦,理解起来很容易,就是视线、注意力等集中于某处,举个例子:

图片

我们将其看做两块黑色的幕布,左侧除了漆黑一片,没有其他任何视觉元素,这就导致我们的眼睛会一直在这块幕布上来回游离,视线没有着落点。

而右侧幕布上出现了一个绿色的亮点,与周围大面积的漆黑形成了强烈的视觉反差,此时我们看这块幕布时,视线就会不由自主的落在绿色亮点上,这就形成了视觉上的聚焦。

正如无印良品的这组“地平线”系列海报一样,视线总有着落点。

图片

所以在商业设计中,一直在强调主次、层次,目的就是为了让用户看懂你的设计,而不是一味的炫技。

我们也可以把设计上的聚焦理解为强调突出,使得作品整体主次分明,视觉富有逻辑感。

而说到强调突出,很多人都会想到放大、加粗、变色等,常见的表现手法有:对比、留白、光效等等。

另外,渐变中有个模式叫径向渐变,由四周向中间过渡,给人最直观的视觉感受就聚焦,很适合用于强调、突出,比如:

图片

把渐变色用于强调突出作用时,其表现形式有很多种,比如:给需要突显的标题、文字添加醒目的渐变色、或者是通过使用渐变色块、图形、形状营造视觉差异化,从而达成强调突出的意图。

在案例中的表现:

图片

图片

图片

想要在设计中实现聚焦,核心还是营造视觉差异,只有这样在视觉才能形成层次、节奏、主次,这对于商业设计来说是非常重要的。

 

 

图片

有氛围感的画面,即便没有太多精细化的处理,也能通过整体营造出独特的美感。

比如暖色调的画面会给人一种温馨、阳光、浪漫的感觉;提到春节我们就会想到喜庆、快乐等等,这就是氛围带来的特殊感受。

举个简单的例子:看到下面的渐变色,第一时间你会想到什么?

图片

应该会有很多人想到:夕阳、落日、黄昏等等,就像下面这张图一样。

图片

这就是有氛围感的画面,即便是简单的两个颜色形成的渐变,也能给人带来无限的遐想。

渐变色本身在视觉上就富有一定的节奏感和层次感,所以用于提升画面整体氛围感是再合适不过了。

图片

图片

这也是为什么在电商设计中,一提到大促活动、氛围感要求强些的专题,设计师都会想到蓝紫、红黄、蓝青等渐变色的原因。

图片

图片

渐变色之所以对提升画面氛围感有帮助,主要是因为不同色彩属性变化带来的视觉差异化感受。

所以当渐变色用于提升作品氛围感时,无彩色渐变和单色渐变出现的相对会少一些。

 

 

图片

通过整篇文章的见解,你是不是对渐变色又有了新的认知?

渐变色对于设计师来说都不陌生,甚至是不起眼的,但却能帮助我们解决很多设计中的棘手问题。

当然,渐变色还有其他作用,比如:传递品牌价值、体现设计美学等等。

你会发现,很多时候并不是说你遇到的问题有多难解决,而是你缺少系统性的知识,不能将单个知识点串联起来,所以才导致你每次看到文章知识点时都会恍然大悟,到工作中又是不知该怎么办。

所以一定要利用非工作时间,多做练习,只有大量的练习、总结,才能真正将理论知识变成自己的。

 

原文地址:美工美邦(公众号)

作者:老张

转载请注明:学UI网》硬核干货!渐变色在设计中有哪些妙用?


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

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

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

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

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




B端设计师常用的七款 Figma 插件

seo达人


图片

 

我究竟要用哪一个插件?我不知道,每一个插件的是用来做什么的?我不清楚。因为身边的同学不停的给我推荐插件,而我便不停的安装,导致这么很多插件,我都没怎么用。今天为了解决这个问题,花了一下午的时间整理,分享一下我最常用的7款Figma 插件,大家也可以跟着我的思路,一起来整理一下你的 figma 插件

 

Contento

Contento 是一款内容填充插件,当然,在插件市场上你会发现,类似这样的插件非常多,但是我在使用过一段时间过后我都放弃了

有的是因为 操作过于复杂,比如:Content Reel ,他没办法做到本土化的数据,因此不能 开箱即用

图片

有的是因为功能简单,比如:Chinese User Data Generator,我没办法做到自定义数据内容

图片

使用Contento主要能够满足我三个需求

 

1.内容简单:

其实在日常的使用当中,我们要填充的无外乎就是常见的 “姓名、地址、电话、邮箱”等内容,在常用功能当中,我们最主要的是想要功能地快速上手,当我打开 Contento 就可以直接进行使用

图片

2.社区强大:

如果系统预设的内容不满足你的需求时,你也可以打开社区,在社区里作者会更新一些较为常用的图库和文本,然后你只需要这样点击,即可拥有这个素材内容

图片

3.自定义:

假设 系统自带 以及 社区的内容库 还不能够满足你的需求,你还可以利用 Contento 进行系统的自定义,在插件当中点击这里的 “加号”,选择想要添加的 文本、图片 等格式,进而将自己产品独有的内容放到里面,下一次就可以直接使用

图片

 

Chinese Font Picker

Figma 的中文字体选择,真的无力吐槽,Figma 你看看其他同学,像 PS、Sketch、甚至是 PPT、Axure

别人字体选择是怎么做的,再看看你,Figma,长点心吧!

图片

因为 Figma 软件本身自带有很多种字体,而这些系统字体也就造成了我们很难从众多字体的字体当中,选择用户想要的字体内容

另一方面,我们没办法快速预览字体,因此只能够通过 猜测这款中文字体的英文名字,来进行寻找

因此被逼无奈,只能够曲线救国,使用字体选择插件来解决这个问题

Chinese Font Picker 插件就能够快速呼出字体选择器,并且这里展示的字体都是经过筛选,会主要展示支持中文的字体

图片

通过每一款字体,我们可以预览字体具体的样式,方便我们快速的做出判断,Chinese Font Picker 是我使用频率最高的插件

 

FigmaEX

Figma 当中使用插件也会非常的麻烦(专业一点来说应该是操作路径过长 : ),因为 Figma 本身插件呼出非常低效,再加上很多设计师并不会记住插件的名字,导致寻找插件非常鸡肋

在 Figma 当中,比较难使用的便是如何高效的切换插件。这其实是一个交互问题,恰好 FigmaEX 解决了这个问题

我们都知道电脑屏幕的布局本身就是以宽屏的形式存在,也就意味着,FigmaEX利用了横向的宽度,在右侧固定一个区域用于展示基础的信息,这样就能够固定快速你想要的figma插件,并且这款插件是国人产出的,也更令人骄傲

图片

不过Figma EX 需要单独安装,不过这类插件确实已经超过 Figma 可以开放权限的范畴,只能够单独安装

 

NB Charts

在我们B端需求当中,一定会存在很多图表类的需求,这时候便可以使用 NB Charts 这款软件来快速实现页面,方便与团队明确这样的方案是否能够接受

图片

并且还可以根据图表进行内容的调整,导入对应的数据 JSON等等…,可谓是非常强大

 

Measure

虽然 figma 软件自带的标注功能就已经非常出色,但是在日常的工作协同当中,我们还是需要对页面当中的内容进行细致的标注,以便让程序员更加清楚的理解我们设计的含义。因此可以使用 Measure 这款软件来对页面的信息进行单独的标注

图片

这款老牌插件,含金量自然不必多说,因为我平时也只是简单用一用标注功能,因此这款插件还是非常不错

 

Auto follower

流程图怎么办?有的时候想要快速连接原型之间的交互,便可以使用它,可以快速连接不同的页面,还可以自定义这条流程线条的颜色、粗细、圆角大小等等

虽然比不了传统的流程图工具,但是解一解燃眉之急还是非常不错的

 

SkewDat

如果想要把一个页面稍稍倾斜一下,你会怎么办?在没使用 这款插件,我需要将这个图片导出、打开PS、通过PS来对图片进行调整,然后导出,再导入到 Figma 里面,整个操作方式可谓是“一气呵成”

SkewDat  恰好能够解决这个问题,同样,它可以斜切:图片、形状、文本 等内容,在使用上可以更加方便,并且这里的倾斜操作是非破坏性的,也就是说我们可以倾斜了过后继续调整字体

图片

当然上面的所有插件都可以在 Figma 社区找到,大家按照名字自行下载即可,不过在公众号放这么多动图真的痛苦,后续做一个视频详细给大家分享一下…

 

原文链接:CE青年Youthce(公众号)

作者:CE青年

转载请注明:学UI网》B端设计师常用的七款 Figma 插件

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

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

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

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

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




万物皆可异质同构

seo达人



很多人做的设计过于平庸,主要原因是图形部分太常规,比如单纯以产品图片、人物图片、某个元素或者是一幅普通插画作品作为画面的图形。这类图形缺少变化、缺少视觉冲突,所以很难有眼前一亮的感觉,也很难让人产生兴趣。而有一个简单的技巧,可以轻松解决这一问题,即异质同构。

图片

图片

图片

图片

图片

这个技巧大家肯定不陌生,这样的作品比比皆是,但是对于该技巧的使用还是有很多讲究的,首先,从设计的形式上来看,异质同构主要分为三种形式:

 

1.置换材质

即只保留一个事物原本的造型,而其材质用另一类元素进行置换,比如水材质的面膜、牛奶材质的人、云材质的鞋子等等。

图片

▲用水材质替换面膜原本的材质,以表达面膜的补水功能。

图片

▲把正在打篮球的小男孩做成牛奶材质,以表达该牛奶可以促进儿童健康发育、补钙等诉求。

图片

▲把鞋子做成云的质感,以表达该鞋子轻盈、舒适的卖点。

常见的材质有金、木、水、土、玻璃、皮、塑料、纸等等,如果通过材质就能识别出某些产品或者素材,那么就具备了使用这一技巧的基本条件。

图片

▲把甜菜置换成甜菜汁材质,表达了榨汁机超强的榨汁功能。

图片

▲把腿的材质换成仙人掌,腿毛则变成了仙人掌上的刺,表达了刮毛器超强的刮毛功能。

另外,想要置换材质的效果很好,那么对设计师的执行能力要求比较高,通常是通过合成或者3D渲染来完成。

图片

图片

 

2.组合堆积

即按照事物B的造型,用数量众多的事物A来进行有序的排列组合或者是堆积,比如把塑料瓶堆积成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜组成一个汉堡等等。

图片

▲用塑料瓶堆积出来的雪山装置,用以号召大家不要乱扔垃圾。

图片

▲真实的葡萄被设计成了一瓶果汁的形状,以表达该果汁真材实料、健康之类的的诉求。

图片

▲用纯蔬菜堆出两个汉堡,以表达蔬菜汉堡这一诉求。

在做堆积或者组合时,首先要能保证元素A与B的识别性,另外元素的排列要有序,而不是胡乱堆砌,要注意图形的美感和质感。

图片

▲用树叶、鲜花组合成“肺”的造型,以表达该椰汁可以给你带来由内而外的美好感受。

图片

▲鲜红的心脏细看却是用拳击手套组成,创意概念是:为生命而战。

图片

▲用“提子”组成的饮料瓶子,以表达该果汁原滋原味的诉求。

图片

▲用蘑菇以及手动加工的工具、配料等元素组合成蘑菇的造型,表达了该产品真材实料、纯手工制作、品质绝佳等诉求。

 

3.质感对比

即把某一事物的局部置换成符合原有造型,但质感不同的另一种或另几种事物,以形成鲜明的对比效果,比如上本身是男人、下半身是女人,左边是汽车、右边是滑滑梯,一边是导弹、一边是铅笔等等。

图片

▲把男士维修工人的上半身与女芭蕾舞者的下半身结合起来,以表达捐献器官可以让你拥有两次不同人生的诉求,这是一个器官捐献组织的公益广告,画风奇特的画面很有视觉冲击力。

图片

▲把汽车的前半截置换成滑滑梯,以传达清洁汽车的引擎,可以让你的旅途更愉快。

图片

▲把导弹的前半部分用铅笔的笔尖替代,以表达语言可以消灭战争的诉求。

质感对比的做法有两种形式,一种是对称图形,即左右两个不同材质的元素在造型上是相同或相似的,组合起来又是一个整体。

图片

▲ 左边是在荒漠里的仙人掌材质沙发,右边是在云层之巅的真实沙发,其实只是有没有空调的区别。

图片

▲ 把左右两个不同的饼组合成一个饼,只为告诉消费者,本店推出了两个新品。

图片

▲ 把灯泡图形的左边置换成大脑图形,以表达点亮创意的概念。

另一种是非对称图形,即图片中的几个部分组合在一起刚好是一个完整的图形,它们各自完成图形的某一个部分,造型上并不相同。

图片

▲ 把钓起的鱼浸在水里的部分置换成海洋垃圾,号召大家要爱护海洋,减少对海洋的污染。

图片

▲ 上图看似是一个正在飞奔的运动员,实则是由摔跤、跑步、击剑、足球四张运动图片组成,把多项奥运项目完美地结合起来。

图片

▲ 上半部分为巴西里约的耶稣像,下半部分为美国纽约的自由女神像,二者结合起来也相似一个完整的雕像,中间的分割线被设计成飞机的轮廓形状,巧妙地表达出该航空公司“速度快”的诉求。

 

图片

异质同构虽然是一个挺不错的图形设计技巧,但如果所用的素材、组合的方式、构图太过常规,那么做出来的作品还是会很普通,所以我们要尽量做出一些改变,尝试一些新的素材、新的组合方式、新的风格、新的创意概念,才能真正做出让人眼前一亮的效果。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》万物皆可异质同构

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

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

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

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

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



万物皆可异质同构

seo达人



很多人做的设计过于平庸,主要原因是图形部分太常规,比如单纯以产品图片、人物图片、某个元素或者是一幅普通插画作品作为画面的图形。这类图形缺少变化、缺少视觉冲突,所以很难有眼前一亮的感觉,也很难让人产生兴趣。而有一个简单的技巧,可以轻松解决这一问题,即异质同构。

图片

图片

图片

图片

图片

这个技巧大家肯定不陌生,这样的作品比比皆是,但是对于该技巧的使用还是有很多讲究的,首先,从设计的形式上来看,异质同构主要分为三种形式:

 

1.置换材质

即只保留一个事物原本的造型,而其材质用另一类元素进行置换,比如水材质的面膜、牛奶材质的人、云材质的鞋子等等。

图片

▲用水材质替换面膜原本的材质,以表达面膜的补水功能。


图片

▲把正在打篮球的小男孩做成牛奶材质,以表达该牛奶可以促进儿童健康发育、补钙等诉求。


图片

▲把鞋子做成云的质感,以表达该鞋子轻盈、舒适的卖点。

常见的材质有金、木、水、土、玻璃、皮、塑料、纸等等,如果通过材质就能识别出某些产品或者素材,那么就具备了使用这一技巧的基本条件。

图片

▲把甜菜置换成甜菜汁材质,表达了榨汁机超强的榨汁功能。

图片

▲把腿的材质换成仙人掌,腿毛则变成了仙人掌上的刺,表达了刮毛器超强的刮毛功能。

另外,想要置换材质的效果很好,那么对设计师的执行能力要求比较高,通常是通过合成或者3D渲染来完成。

图片

图片

 

2.组合堆积

即按照事物B的造型,用数量众多的事物A来进行有序的排列组合或者是堆积,比如把塑料瓶堆积成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜组成一个汉堡等等。

图片

▲用塑料瓶堆积出来的雪山装置,用以号召大家不要乱扔垃圾。


图片

▲真实的葡萄被设计成了一瓶果汁的形状,以表达该果汁真材实料、健康之类的的诉求。


图片

▲用纯蔬菜堆出两个汉堡,以表达蔬菜汉堡这一诉求。

在做堆积或者组合时,首先要能保证元素A与B的识别性,另外元素的排列要有序,而不是胡乱堆砌,要注意图形的美感和质感。

图片

▲用树叶、鲜花组合成“肺”的造型,以表达该椰汁可以给你带来由内而外的美好感受。


图片

▲鲜红的心脏细看却是用拳击手套组成,创意概念是:为生命而战。

图片

▲用“提子”组成的饮料瓶子,以表达该果汁原滋原味的诉求。


图片

▲用蘑菇以及手动加工的工具、配料等元素组合成蘑菇的造型,表达了该产品真材实料、纯手工制作、品质绝佳等诉求。

 

3.质感对比

即把某一事物的局部置换成符合原有造型,但质感不同的另一种或另几种事物,以形成鲜明的对比效果,比如上本身是男人、下半身是女人,左边是汽车、右边是滑滑梯,一边是导弹、一边是铅笔等等。

图片

▲把男士维修工人的上半身与女芭蕾舞者的下半身结合起来,以表达捐献器官可以让你拥有两次不同人生的诉求,这是一个器官捐献组织的公益广告,画风奇特的画面很有视觉冲击力。

图片

▲把汽车的前半截置换成滑滑梯,以传达清洁汽车的引擎,可以让你的旅途更愉快。


图片

▲把导弹的前半部分用铅笔的笔尖替代,以表达语言可以消灭战争的诉求。

质感对比的做法有两种形式,一种是对称图形,即左右两个不同材质的元素在造型上是相同或相似的,组合起来又是一个整体。

图片

▲ 左边是在荒漠里的仙人掌材质沙发,右边是在云层之巅的真实沙发,其实只是有没有空调的区别。


图片

▲ 把左右两个不同的饼组合成一个饼,只为告诉消费者,本店推出了两个新品。


图片

▲ 把灯泡图形的左边置换成大脑图形,以表达点亮创意的概念。

另一种是非对称图形,即图片中的几个部分组合在一起刚好是一个完整的图形,它们各自完成图形的某一个部分,造型上并不相同。

图片

▲ 把钓起的鱼浸在水里的部分置换成海洋垃圾,号召大家要爱护海洋,减少对海洋的污染。

图片

▲ 上图看似是一个正在飞奔的运动员,实则是由摔跤、跑步、击剑、足球四张运动图片组成,把多项奥运项目完美地结合起来。


图片

▲ 上半部分为巴西里约的耶稣像,下半部分为美国纽约的自由女神像,二者结合起来也相似一个完整的雕像,中间的分割线被设计成飞机的轮廓形状,巧妙地表达出该航空公司“速度快”的诉求。

 

图片

异质同构虽然是一个挺不错的图形设计技巧,但如果所用的素材、组合的方式、构图太过常规,那么做出来的作品还是会很普通,所以我们要尽量做出一些改变,尝试一些新的素材、新的组合方式、新的风格、新的创意概念,才能真正做出让人眼前一亮的效果。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网 »万物皆可异质同构

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

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

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

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

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


让我们来聊聊Loading

纯纯

在人机互动过程中,用户与界面的每一次互动都是一次加载过程。加载设计对于使用者来说是非常影响体验的一个方面,后台复杂的数据计算时间、网络状况不好都有可能造成等待时间长而带来焦虑,今天就让我们好好来聊下加载,以及怎么让加载的体验变得更好。



加载的出现 


加载指的是用户在客户端发出一个指令后,直到出现反馈结果时,中间这段时间内计算机完成的一系列执行动作,所以只要你在App中操作请求更多数据那就不可避免有加载。 



加载的重要性


根据一份调查得出,用户能够忍受加载的最长时间在:3到8秒。8秒是一个临界值。但现在的高速互联网真是把我们宠坏了,如果一个页面的加载时间超过4秒,可能会被用户直接退出,除非Ta一定要打开那个页面。

这里有个很重要的数据叫跳出率,在谷歌的一项调查中就已经发现:

1-3 秒的加载时间跳出率提高了 32%。

1-5 秒的加载时间跳出率提高了 90%。

1-6 秒的加载时间跳出率提高了 106%。

 

为了降低用户等待的焦虑,获得更好的用户体验,我们必须让用户知道我们正在努力加载,同时要让加载更有趣来分散用户等待的注意力。



加载的场景


首先我们要先了解以下这些App中最常见的加载场景,也就是那些发出指令后应用需要长时间处理的加载过程。


1、当页刷新

下拉刷新(请求最新数据)+上滑加载(请求更多数据)

▲ins_下拉和上滑


2、从后台切回App

当你在多个App中切换使用时,超过一定时间间隔就需加载数据。

▲系统后台切回


3、启动App

当应用出现异常关闭、应用闪退等情况重新启动app,需要进行数据加载。

▲App启动加载


4、页面间的跳转

页面加载新的数据,涉及原生跳原生或者H5页面。

▲Moo音乐_页面跳转

 

5、定时数据刷新

在特定的时间内页面自动进行数据刷新,例如每天0点更新排行,大部分用在运营或跟时间相关的场景。

▲番茄小说_排行定时更新

 

6、即时消息

通讯类社交的App都采用实时推送机制,不需要用户手动操作也能接收到最新的数据。

▲Quack社交聊天






加载类型的进化 


1、加载器(Spinners)


加载器是最早被使用的方式,适用于快速加载,这也是使用率最高的一种。

▲旋转菊花记载


然而这种加载器有个缺点就是无法告知用户需要等多久,Nielsen Norman早在1993年就提到响应时间和loading动画,“如果计算机无法提供快速响应,则应该以百分比的形式向用户提供持续反馈。”【Myers 1985 论文,“计算机-人机界面百分比进度指标的重要性”】

 

所以加载器和进度条成了黄金组合,适用于长时间(10秒或更长)的加载过程,显示一个操作将花费多长时间以及目前所处的状态,通常有线性进度、百分比、直观数字等。

▲Cream M.


▲Gleb Kuznetsov✈ 


▲有道乐读、哔哩哔哩漫画


在此基础上加载器也开始往趣味/品牌化发展,使用情感化加载动画,可以让等待过程变得轻松、愉悦。Tips:搭建符合目标用户群体的生活场景,能拉近与用户之间的距离。

▲摩拜单车


▲ARCADE STUDIO


吸引用户的眼球,感觉时间会过得更快一点,短暂忘记等待的过程。

▲Markus Magnusson


▲DeeKay



▲RWDS


通过品牌logo或产品相关的图形呈现在界面上,将品牌基因融入整个Loading动画中。

▲ Google


▲Medium


▲有道乐读


▲ 开言 

 


加载器和进度条这一组合有很多变体,可以应用在不同的页面位置:


1.1、白屏加载

当前页面内容需一次性加载完成后才能显示内容,这是页面加载最原始的状态。当页面元素较多时,内容呈现的等待时间会变得很长,一旦时间太久要给予提示。


1.2、Toast加载 

当用户执行某个操作时,为了防止用户继续操作导致数据加载失败,则用Toast的样式来提示正在加载。在画面中间出现提示框,有时会加上黑色透明底盖在画面中间,这种情况一般除了返回上一级的操作可点,其他操作将受到限制。


1.3、进度条加载 

可以是在顶部或底部栏上,告知用户等待的时间长度,让用户有一定的心理预期。


1.4、手动刷新加载 

通过手势操作,快速加载和更新当前页面的内容。


1.5、局部模态加载

在特定位置进行加载,功能指示更明确,避免用户反复操作。


加载器这种方式相对比较简单,但也会阻断用户的其他操作,用户只能等待加载完成才能继续操作。会给人的感觉时间较长,且对于加载出来的页面没有任何预期。

 

那什么时候是需要中断用户操作呢?主要有以下两种情况可以作为判断:

1-当前的操作未成功,则接下来的操作或结果也无法显示,例如:启动App、手机支付、渲染滤镜等;

2-当前的操作本身不能与其他操作同步进行,需停留在当前界面保证操作完成,例如:扫描、迁移资料、实时翻译等。

如果中断时间较短可以使用toast加载提示,时间较长则建议用专门的单页且有可取消的按钮来提示加载过程,以引起用户的重视。


加载器的特点

· 适用性广

· 拓展性强(趣味性及品牌宣传)





2、分布加载(占位符Placeholder)


占位符分布加载就是当界面中图文同时存在时,如果获取完所有信息才显示所耗费的时间是很长的,因此为了缩短用户等待的时间,会选择优先加载快的元素(文字),慢的元素(图片视频等)则用其他的方式占位,最终等待加载全部完成。较为适合feed或瀑布流模式。

 

分步加载的好处是在等待加载的时间里用户可以看到相关的文字内容,不会像空白页加载或Toast加载,只能默默地等待加载的过程。

 

2.1、灰色占位符

将图片用灰色或灰色图(对开发更易用)来代替,中性灰在界面中不会抢风头,在暗黑模式中也适用。

▲灰色色值(例如#EFEFEF)或灰色图片


▲Youtube 


2.2、品牌相关图

在灰色图上加入品牌元素也是不错的方式,例如logo或吉祥物IP,将品牌人格化、情感化,辅助企业向用户传达产品的气质特征,在各类产品中广泛运用。

▲Moo音乐、有道乐读


2.3、彩色色块

通过程序提取面积较大的主色调,并设置几种符合产品调性的默认色,以防取色失败。需保证色彩库的颜色高级耐看,饱和度不要太高,不然很刺眼反倒引起到不好的体验。

▲Behance、Apple Music


undefined


▲Pinterest


▲Google Search


2.4、模糊加载

模糊图像也称为模糊技术,渲染图像的一个低质量版本,然后过渡到高质量版本,初始图像的像素和 kB 都很小。为了去除伪影,图像会被放大和模糊。

▲Behance、Unsplash


分布加载的特点

• 良好的阅读性;

• 准确区分已加载和尚未加载的内容





3、骨架加载(Skeleton Screens)



骨架加载就是先加载UI布局框架,再加载框架中的内容,细节通常按照骨架轮廓(也称为占位UI)、文本、图像的顺序出现。通过这种方式直观地提前让用户知道整个界面的架构,并营造出一种渐进的感觉,使用户感知加载稳定且速度快,提高了产品的体验感。

 

“Skeleton Screens”这个词最早出现在Luke Wroblewski 的文章中,Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持,LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕,通过将被动等待变为主动等待。

 

被动等待是指你只是坐在那里无所事事,看着加载器转了一圈又一圈。积极等待是当你在等待时做一些感觉像是进步的事情。骨架加载通过在每次屏幕更新时为用户提供新信息来鼓励主动等待。

 

通过这种方式,骨架屏幕将焦点从您等待的时间量上移开,并将其放在您面前发生的实际进度证明上,从而使加载过程感觉更快。当它显示已加载的内容和剩余的内容时,它允许用户构建准确的UI界面期望。

▲Medium手机版 


▲Medium网页版



实现骨架屏幕时,请确保占位符 UI 大部分准确表示最终 UI 的外观。否则,就会在期望与现实之间产生差距。

▲夸克 


LinkedIn 最近开始使用 Skeleton Screens 进行加载,骨架屏幕转移了用户的注意力。它使人们专注于进度,而不是等待时间。

▲Linkin 


骨架加载提升了加载界面的速度进度,这种速度反馈表现的更加友好并减少了不确定性,如果加载时间比预期的要长,也可以在骨架之前短暂地显示一个加载器,这应该会为你争取更多时间来完成加载。


通常骨架和分布加载配合进行,称为渐进式加载

• 显示UI骨架布局

• 优先加载文字;

• 加载图像(或主颜色)质量较低的版本;

• 再在后台加载高质量图像;

• 淡入高质量图像,取代之前的低质量图像。

 

 

骨架加载的特点

• 感知更快的加载速度

• 清晰的可视化进度指示





容易被忽略的加载


1、预加载

预加载就是用户浏览当前页面时就预加载下一级所有列表的文字内容,当用户点击进入已加载的页面就感受不到等待,在无网络情况下也能进行正常的阅读,在阅读文字的时候再进行图片或视频的加载(相反地则叫懒加载,进入页面时再加载数据)。但是这种方式会增加客户端和服务器的负载,也会占用一定的网络带宽。


2、智能加载

根据不同的网络状况选择不同的数据加载方案,最常见就是用在音乐/视频/下载更新等占用比较大流量的产品,当判断用户处于3G/4G或网络卡断的情况下,为了既让用户使用流畅也不浪费流量,会自动切换至低速低画质;而处于Wi-Fi条件下,会优先选择高清或高质量进行播放。

▲哔哩哔哩


3、缓存加载

也就是离线加载,通过现有Wifi资源将服务器内容缓存到本地,无网络或是弱网环境下读取缓存加载。可以解决无网或弱网情况下数据获取的问题,会占用本地的存储空间,以及后续的缓存处理需要考虑。





加载出错后的反馈


加载时间过长可能会损害你的网站的整体用户体验。如果加载的速度很慢会导致用户点击多次,这时我们需给用户一个明确的提示“网站正在发生的事情是什么,提供适当的视觉反馈”,加载失败后最重要的是给出解决方案,让用户可再尝试或寻求帮助。请记住,提供反馈是良好的交互设计和积极的用户体验。


undefined

▲哔哩哔哩漫画、闲鱼


▲Dribbble





在过去,设计良好有趣的加载器是我们所能做的最好的事情,而现在,渐进式加载成为值得考虑的替代方案,它加快了等待时间感知,还清晰地呈现了UI布局并建立用户预期。但这并不意味着不继续思考更好的加载方案,期待未来出现更好的交互体验。



总结

一个好的加载应当具备以下特征:

1 让用户知道应用程序正在运行,给出大致的等待时间,简单的进度条或更数字视觉化的方式;

2 告诉用户等待的原因,在处理什么动作表明软件并没有崩溃而是处理请求;

3 有趣的动画内容来吸引注意力,让等待变得可以忍受;

4 加入品牌,让用户在等待的过程中加深品牌印象,形成品牌感知;

5 尽量使用非中断式加载,降低等待的心理感知时长。

原文地址:站酷
作者:_阿丹a_

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

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

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

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

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



为了设计更好的深色模式

纯纯

iOS作为UI/UE设计的风向标,一直是行业的引领者,不管你愿不愿意承不承认,他的每一次更新变化总能带动UI设计行业的一些大大小小的变革,并且产生更多的追随者,比如当年的iOS7开始的扁平化设计风格,对后续设计风格的影响直到现在已经7年了。



在最近半年,iOS在UI设计风格上最大的变革莫过于DarkMode(深色模式),在DarkMode之前,我们熟悉的UI界面往往都是浅白色界面为主,而从iOS13开始正式使用了DarkMode,界面突然可以变深色了,苹果官方说这样设计可以让眼睛更舒服的长时间阅读,为革命保护视力,而且更加省电增长续航,具体结果我们不得而知,需要科学家们去验证了,但是对于我们设计师来说带来的挑战就是要“黑白无常”了。



其实DarkMode从测试版算起已经差不多推出了有半年的时间了,一些知名的APP产品早已经有了自己的兼容方案,同时iOS原生界面也给了我们很多最佳实践案例,按道理大家对于DarkMode的设计方式方法应该已经掌握了差不多了,但直到这几天微信正式推出了自己的DarkMode兼容方案,才发现对DarkMode的探索还需要设计师们多多努力。谨以此文表达一下自己的观点,不妥之处敬请海涵。


从一个“列表页面”说起:

列表试图(TableView)是iOS中最常见的界面组件,一般常见于设置与栏目列表页面


iOS设置界面的浅色模式和深色模式看起来都非常协调。

下面我们看看微信发现页面,这个页面和iOS设置是很相似的。


如果单独看微信发现页面的浅色模式实际效果还是不错的。

但是直接转换到深色模式下就感觉突然差的很多了,甚至可以说是有点难看,这次微信真的做了一次黑天鹅?

 

到底是什么原因让微信发现页面在深色模式下视觉体验如此之差呢?

我们不妨将两个功能布局都相似的深色进行放在一起进行一下比较


组成色彩分析:

在色彩这块在这两个页面中微信和iOS基本保持一致,四层灰度设计能更好的保持页面整体干净整洁且层次分明,但是被A背景色上,微信的背景色选择了黑色偏绿的颜色,应该是微信设计师还是想体现出产品的标志色原色。

文字的颜色也较iOS略微深一点,但是在整体上影响并不大。


看来在主要色彩上并没有什么问题,那么为什么微信这个界面与iOS界面比起来视觉上要感觉差一些呢?

下面来看一下图标


图标设计分析:


图标上的差别主要在于线宽与外框,微信采用无外框统一线宽的线形图标,iOS采用的是有外框剪影图标。

我们我们把图标进行互换会怎么样呢?



观察到了吗?别看错了!

是的,我把故意位置做了对调,左边是iOS,右边是微信。替换图标后的微信明显加分不少,整个界面都整齐多了,而iOS换了图标后明显变得不够整齐了,潦草很多。


那么结论是微信的无框线性图标在深色模式下兼容有问题?是的的确如此。但是等一下,还有一些细节你注意到吗?换了图标的微信界面和之前的iOS界面比起来明显还是有点不够整齐,为什么呢?

来我们回过头来从细节再看一下iOS界面。


我们按照这个思路把刚才微信替换图标界面再排序一下!

界面视觉体验明显整齐了很多是不是!


疑问:

为什么细线图标和无框图标会在深色背景表现不够好,而在浅色背景下就没问题呢?

是不是所有的UI都会存在这样的问题呢?

我们再来看一些例子:


看来结论是一样的,线性图标在深色背景下的表现都是差强人意,反观带框图标适应性很强,浅色和深色模式下均能良好的适配,我来分析一下原因。


当年伽利略用望远镜往天上看,发现木星比金星大,换成肉眼看后金星则比木星大。他认为是眼睛的某种视觉特性造成了这种现象。

德国物理学家赫尔曼把这种错觉称为辐照错觉,就是说在黑暗背景下,亮度越高的物体看起来面积越大。


再来看一张图片


哪个圆圈看起来更大,显然是黑色背景下的白色圆形,实际上这只是一种错觉,所有圆圈是一样大。


光亮刺激会使得神经元产生非线性放大作用,导致刺激比实物本身看起来更大,白色圆形更亮,所以看起来更大一些。


线性图标是用线条勾画图案达到隐喻效果,一般线粗是2px~6px像素。



设计师在设计时候都是以最终视觉作为参考,而设计稿本身多是浅色背景,所以在浅色背景的映衬下图标视觉会显得稍大,视觉基本是平衡的,假如设计是4px而呈现出的效果其实是6px左右。


是不是觉得哪里有点不对了?按照这个逻辑黑色背景下白色线图标不应该是视觉更大、更明显吗?


我们还需要考虑一个因素,那就是色彩,之前的几个界面案例的线性图标都是彩色的,特别是黑色背景下,不同色彩的图标放在一起,会有明显的忽大忽小的感觉,会让界面感觉非常凌乱。


是不是感觉黄色最大,红色的最小?但是其实是一样的,这还是相同形状的,要是图标形状不同感受会更明显


看一个实际中的例子:

由于都是单色线性图标,在浅色和深色下表现还都不错的,但是单色图标略显界面单调,并不太建议这么设计。


毫无疑问,未来的UI场景需要适配多背景色风格,图标除了具备好看隐喻之外,更需要具备抗干扰性

带框图标是一个不错的解决方法,大胆预测带框图标会将成为未来一段时间图标设计主流!


结论

1:深色模式中灰度色阶在一个界面最多可分为四层。

2:为了适配深色模式,今后有框图标将会成为图标设计风格主流。

3:同样为了适配深色模式,细线图标将会被淘汰,剪影和粗线图标会流行起来。

4:图标除了个体设计上用心,在排列上也会极大影响到页面的整合视觉,光谱排列法是个不错的选择。


原文地址:站酷
作者:残酷de乐章

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

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

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

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

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



一些被忽略的 UI 设计表现技巧

seo达人

咕噜噜 
 
图片 
 

一、利用手势交互实现自动跳转 

随着手势交互的不断成熟,被普遍的应用到产品设计中。利用手势的辅助可以缩短用户的操作路径,通过不断优化用户的学习成本,带给用户更加便利的操作体验。
通过指向按钮的引导可以让用户抵达需求目的,需要用户进行点击操作。针对横向滑动的交互输出中,在连贯的滑动操作中配合手势交互,随着滑动力度的不同可以实现自动跳转。比如开言英语 APP 课程模块中,针对推荐的课程卡片在向左滑动过程中,随着滑动的程度提示“查看更多”和“释放查看”,实现详情内容的自动跳转。对于需要查看更多推荐内容的用户来说,减少了二次点击的步骤,提高了操作的便捷度和使用效率。 
图片
[优化输出图像]
 

二、手势交互带来的切歌体验

手势交互能够带给用户使用的便捷度,不过目前很多产品的手势玩法都还有待用户去挖掘。功能层面是否“暗藏玄机”需要用户的深度体验,如果可以培养用户的使用习惯,带来的便捷度和体验度都会进一步提升。
在 QQ 音乐主页底部标签栏上方会浮层展示播放器,方便用户操作正在播放的歌曲。可以通过左右滑动的手势进行切歌体验,对于盲选歌曲来说非常便利。在不改变当前布局结构的基础上新增功能操作,手势交互是不错的选择,这个隐藏的手势体验你是否注意到呢?
图片 
 

三、拖动进度条实时预览画面

从短视频到长视频,内容量的丰富可以满足用户的观看需求,针对长视频来说进度的设计可以便于用户选取感兴趣的部分。
抖音的进度条设计也在不断的探索新的体验,最近更新的版本中在拖动进度条时,会隐藏其他附属的功能,让界面显得更加简洁。拖动进度条时也会实时预览显示视频画面,辅助用户进行精准的内容确定,提高用户的操作效率。
图片
图片 
 

四、底部功能区的延伸设计

底部功能区是手势操作的最佳区域,近些年越来越多的产品对该区域进行延伸设计,满足更多功能曝光的目的。
百度翻译 APP 在底部标签栏上方延伸了一个功能区,初次进入时呈现隐藏式设计,单击或者上滑展开全部。延伸功能区为用户提供了更多常用功能,便于进行频繁操作,提升用户的操作体验和效率。
图片 
 

五、情感化的功能引导设计

初次使用一个产品时,针对一些重点功能都会进行引导设计,以此来提高功能的曝光度,降低用户的学习成本。
百度翻译 APP 通过情感化的 IP 形象进行功能引导,可爱的形象趴在功能区上,趣味性十足。情感化设计的融入相较于普通的文字浮层,更能吸引用户的关注度。
图片 
 

六、推荐模块的轮播翻页设计

推荐模块在产品设计中较为普遍,也呈现了各式各样的设计解决方案,结合自身的内容属性进行设计,是体现差异化设计的关键。
最近在喜马拉雅 APP 播客栏目发现了不一样的设计表达,通过专辑封面形式结合辅助解释来设计。不仅结合了自身内容属性,也能在强化视觉感的同时利用文案辅助让解释更加清楚。通过手势滑动进行翻页切换,动态效果也是非常的流畅自然。
图片1图片.gif 
 

七、提高图文布局视野感的设计

在针对新闻、资讯、热点等内容进行布局时,通常有左图右文、左文右图、纯文字布局、轮播图等形式。设计表达考虑了阅读引导和版面利用率,如果需要突出视觉感时,如何进行设计发挥呢?
最近在芒果 TV APP 首页的看点专栏发现了一个感官体验不错的设计,将文字信息以卡片式进行布局,以大图作为背景来衬托卡片。滑动时也会有进度条式的控件提示,整体的视野感更强,更能吸引用户的关注度。
图片 
 

八、微动效增强签到设计的关注度

签到的存在是为了提高用户粘性,通过签到获得积分,兑换礼品或者升级功能服务等权益。提高签到的曝光度才能吸引用户参与,进而达到需求目的。
除了在签到设计的视觉感上面进行强化以外,微动效的表达也是非常不错的选择。快看 APP 就将代表签到的图标通过动效来强化,也能吸引到用户的关注,提高签到的点击率和参与度。
图片 
 

九、辅助图形强化品牌感

立足于品牌做设计,无论是那个方向的设计都需要从品牌的角度进行思考,特别是 UI设计。通过辅助图形强化品牌感是一个方向,逐步被设计师加以运用。
比如考拉海购 APP 在多个局部区域融入了辅助图形进行强化,将辅助图形作为背景使用。辅助图形结合到 UI 场景中,是 UI 设计师后期需要逐步探索的方向。
图片 
 

十、悬浮动效式空状态设计

空状态代表无数据状态设计,通常形式有纯文案提示、图形加文案提示、情感化插画融入、IP 形象结合、动效表达形式等。在体验的众多案例中,动效形式的表达相对较少,不过感官度也是不错的。
在 COVES APP 中,采用动效式空状态设计来表达无数据状态。在局部的模块还使用了悬浮动效式表达,无论是视觉感还是吸引力都呈现出不错的效果。不仅吸引用户的关注度,也融合了产品的设计风格,是一个不错的设计解决方案。
图片 
 

小结

每一次的体验、分析、总结都能吸收新的思路和灵感,有助于我们提高设计的灵活性和解决需求的效率。希望本期的整理可以带给你更多帮助,我们互相进步。 
 
原文地址:黑马家族(公众号)
 
作者:黑马青年
 
转载请注明:学UI网》一些被忽略的 UI 设计表现技巧


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

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

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

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

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



日历

链接

个人资料

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

存档