首页

这回做网页不可能没思路了!

seo达人

一、图片类

图片类的网页头图是非常常见的,比如像全屏图片类的:

图片

图片

当然,这种全屏图片也是可以增加一些设计感的, 像下面这个国外摄影网站:

图片

看起来就非常的高级!

除了全屏图片的方式,还有半屏的,比如像下面这种:

图片

图片

这种基本都是一半图片,一半文字排版,很多都用在知识类网站,看起来相对中规中矩一下。

图片类型的头图还有一些图片拼接型的,比如像下面这种,三个图片拼接在一起:

图片

或者还有这种不规则拼接:

图片

图片类的网页头图还是比较常见的,上面这些形式,大家都可以多多参考!

 

二、插画类

插画类的头图就会比较有设计感了,比如像这样充满全屏的,沉浸感十足:

图片

图片

还有这种一半插画,一半文字排版的:

图片

图片

当然,随着3d的崛起,3d插画也渐渐成为了一种网页头图的设计风格,很有冲击力:

图片

如果你的网页使用用户年龄比较低,需要一定的亲和力,不妨尝试一下插图的设计方式。

 

三、图形类

图形类的头图,如果做的好,可以非常有设计感,比如一些nft类平台:

图片

图片

再比如这种:

图片

还有一些比较常见的形式,就是图形加人物,让人物从图形里破出:

图片

图片

这些都是图形的一些用法,大家可以多多尝试!

 

四、排版类

除了上面这些类别,还有一种就是信息排版类类,大部分都是文字信息内容:

图片

图片

图片

相对来说会比较素一点点,但是如果排版排的好看,依然可以出来好看的效果,大家也可以多多尝试!

 


 

原文地址: 菜心设计铺(公众号)

作者:菜心

转载请注明:学UI网》这回做网页不可能没思路了!

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


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

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

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



UI元素的尺寸到底该怎么定?(下)

纯纯

因为文章实在太长,所以会分为上下两篇发布,本篇为下篇,主要内容为:

    

    - 02. 字体字号

    - 03. 图标大小

    - 04. 组件尺寸





本小节要开始介绍前面没有说的文字了,文字的尺寸至关重要,但首先理解了前面所讲的控件之后,再去思考文字尺寸的用法,会相对更容易一些,它们之间也有一些有趣的联系。

而在对控件和文字都掌握熟练以后,才能进入后面的组件设计,这是我认为的一个比较合理的学习过程。

首先我们知道,安卓和 iOS 应用的中英文字体各不相同,苹果是用苹方和 San Francisco,安卓使用思源黑体和 Roboto。


如果不知道该去哪里下载这些字的同学,可以在我公众号里回复“字体”下载对应的字体源文件。

在后面我们主要以 iOS 作为说明的对象,安卓则同理,可以直接参照 iOS 的字体尺寸设置。



一、英文的字号


在苹果的官方建议中,有罗列出比较完整的文字字号建议,但大家一定要谨记,那些就是建议,并不需要在非官方的组件中应用那些字号。下图是苹果默认字体尺寸,详见我们翻译的 iOS 规范第 124 页 (公众号中回复“iOS”可获得下载链接)。

首先我们要先划分出一个文字字号的取用范围,之后所有字体的字号设置就在那里面挑选。

在 UI 中,最小字号的依据一般有两个,一个是人眼的可见度,另一个是屏幕的显示极限,综合两者最小的字号应该在 9pt 。而最大的字号,以 iOS11 的标题字号 34pt 为准即可。



从 9-34,理论上其中每一个整数都可以使用,但我还是建议要应用一定的习惯。下面,就是我在英文应用设计中会使用的字体字号列表,为了便于记忆,我就只拆分成三种类型,初学者在使用时直接套用就可以。


    • 标题:34、28、24、22、20
    • 阅读:18、16、14、12
    • 注释:11、10、9


    注:单位均为pt

在英文应用中,我们应用的字号大小随项目复杂度决定,通常,尺寸会在五种以上,两种标题、两种正文、一种注释类字号,当然,我们还会通过字重和色彩进一步划分,不过那不在这里的讨论范围中。例如下面我使用五种字号尺寸设计出来的原型案例:



另外,在 iOS 中,字号小于 20pt 使用 SF Pro Text,大于等于 20pt 时则使用 SF Pro Display 字体,这点大家需要牢记。



数字字体则可以等同于英文,但如果有需要展示数据的需求,那么最大尺寸就要靠自己的判断了。




二、中文字体


中文字体和英文字体的最大差异在于笔画数,很多中文的笔画和结构都异常复杂,如 “嚷”、“饕”、“餐”等,所以,最小的尺寸不可能和英文相等。建议最小中文字号使用 11pt。

至于最大的中文,因为苹方并没有 SF pro 字体那么丰富的字重,字号过大会有正负形失衡的违和感,所以,最大字号的尺寸也应比英文小。



下面是我在中文应用中建议使用的字号:


    • 标题:28、24、22、20
    • 正文:18、16、14
    • 注释:12、11


    注:单位均为pt

前面做过的原型,应用的就是这些字号。



中文的字号选择范围是比英文小的,并且,中文字重数远少于英文,我们在做中文应用的排版远远比英文应用的容易。很多新手误以为英文更容易设计,那都是源自对英文的陌生,只是将字符纯粹的当成有节奏变化的几何形状而不是用来阅读的文本,而如果涉及到需要阅读的英文文本设计时,字体、字号、字间距以及行高的选择就会变得异常复杂。


三、文字的边距

讲完了字号的选择范围,这里我们就要再来讨论下一个问题,就是如何更细化地去选择字号。

首先,合理的字号是和环境息息相关的,而这种联系最多的体现在文本区域的边距上。能被合理阅读的文本段落,是需要留白的,过于拥挤的文字排列只会造成阅读的不适。

因为前面我们已经说过控件的尺寸如何设置,所以当我们在设置文字时,很多时候是根据所定义的控件的高度,结合边距来选择文字的字号,下面通过一些控件来举例。

例如我们定义了一个 40pt 高的按钮,在设置文字时,尝试将多种文字字号置入,过多的间距和过小的间距都会让按钮看起来不精致。合适的字体大小应该是 16pt。



而如果设置了一个 24pt 按钮,那么得到的结论应该是 12pt。



输入框的文字应用和按钮相同,也以上下间距作为主要参考。



字号的选择,除了本身的定位(如标题或正文)以外,是可以通过比较的方式得出最优结果的。只要稍微花一点点时间,像上方案例演示的一样将设计元素复制排列出来,就可以很快选出最适合的数值。

最后,前面说到的关于文字字号的设定,结合控件的尺寸规范,就能在下面决定组件的设计尺寸,缺一不可。

多做针对性练习,以提升对控件和文字的掌握熟练度是很有必要的。建议多做一些简单界面的临摹,并套用前面提到的元素尺寸,这样很快就能适应这种高效规范的方式了。



这一节要讲讲关于图标的尺寸,应该是最容易的地方,因为前面的内容中,我们已经规范并习惯了使用 4 的倍数作为尺寸的最小量度,那么在图标中只需要同样遵循这样的原则。从相关的图标素材下载网站就可以发现这种规律,如 iconfont、iconsearch 等等。



一、图标的权重


在设置具体的尺寸前,我们还是要谈谈权重的问题。正常的 APP,通常会包含大量的图标,而这些图标,大小并不会完全一样。如下面的案例:



之所以这些图标的大小不一样,和它们代表的功能和权重分不开关系。我们可以简单将应用内会出现的图标分成 3 类,代表不同级别的权重。


最高:页面中重要的功能入口


中等:底部导航栏用的图标



最低:一般的工具类图标



当然,这是我简化过的逻辑,类似淘宝、京东、携程这类大型应用,就还可以划分出更细致的权重类型。而不同的权重实际上就对应了不同尺寸的图标,如果有 3 种权重,那么我们在设计的过程里就会设计三种尺寸的图标。


二、图标的尺寸


首先划重点:图标的尺寸,主要指的是图标在应用中占据的矩形区域,而不是图标本身图形的区域。



我们在设计具体图形前,是先通过确定矩形区域的尺寸,再制作参考线然后进行设计的。而不是随意设计了图标再对应缩放到指定的位置。


例如,设计快速入口时,一开始我们定义出的这个组件为分割成两行四列的矩形块,即每个入口的实际大小。



所以,下面就是我对矩形尺寸定义的建议:


    • 最大:64、56、48
    • 中等:44、36、32
    • 最小:28、24、20


    注:单位均为pt


根据图标所处区域的上下间距,从上方挑选合理尺寸即可,过程与字号设置是一样的,这里就不多做演示了。


还需要注意,在一套 App 中,图标出现的尺寸数尽可能减少,尤其对于新手,只需要应用 2-4 套不同的尺寸即可,否则也会对视觉体验带来明显的破坏。


最后,就要说说组件的尺寸是怎么设置了。

首先我们要知道组件是什么,它是一个包含了控件、文字、图标的功能合集。可以是一个独立的信息展示单元,也可以完成一个复杂的操作流,是学习 App 设计中最重要的环节。




一、组件的尺寸原则


定义组件的长和宽,方式有两种,一种是根据外部环境制定,一种是根据内容调节。


第一种,即通过外部的元素来确定组件的尺寸。例如我们要设计一个头部的 banner 轮播图组件,以左右可以滚动的形式展现。那么首先要确定我们希望轮播图在屏幕中占多少比例,再确定高度。例如我们觉得大致要有屏幕 1/3 高,那么可以设定高度为 220pt(664/3),而根据上下对齐的原则,左右就由屏幕宽减去左右内边距 16pt 即可。



第二种,是根据我们里面添加的内容元素来确定宽和高。例如在首页轮播图下方,添加左右滚动的卡片,那么我们先设定里面的控件和文字尺寸,然后再通过添加内边距的形式确定组件的尺寸。



当然,也有混合的定义方式,如一开始定好宽,根据内容设定高,像花瓣瀑布流的卡片,或者定义好高来调节宽。具体使用什么形式,就要因地制宜了。


下面会通过几个常见的组件案例,来演示如何定义它们的尺寸。



二、动态卡片


动态卡片是很常用的组件,通常以卡片的形式展现。每条动态通常占据内容区域的整列,即左右减去制定好的内边距 16pt,那么就是 375-32 = 343 pt 的宽。而高度,就要根据里面所包含的元素了,如下图所示。




三、设置列表


设置列表中,由高度相同的列表项组成,它们的高和宽应该是根据设计的风格一开始就制定好,如比较紧凑的风格我们采用 48pt 的高,比较宽松的风格就采用 64pt 的高。然后我们再排列内部的元素,进行垂直居中。




四、班次信息


常见的班次信息,我们在定义它尺寸时,也是根据内容来考虑的。首先确认它是一个撑满屏幕的组件即 375pt 宽,再填入对应的字段内容。

这时候可以将上下的内容拆分成3个不同的子模块:班次、时间、更多操作,班次和更多操作采用固定高度 44pt 的方式,时间则根据内容设置边距的方式,最后得到的高度的和,就是班次信息组件的高度。




五、瓷片区


主流的瓷片区,其实也由若干子模块组合而成,而如淘宝这类会有很多瓷片区并列的状态,我们优先要考虑的,是每个瓷片区在屏幕中的占比,也就是先定义好瓷片区的高度,再拆分内容的子模块。


例如划分为两行的瓷片区,总高度为 280pt,上方的模块高度为 180pt,下方的模块高度为 100pt,里面的元素,再根据这个内容区域进行排版。



完成一个完整的组件,是根据它的内容和周围的环境决定,我们只要感觉前面几个部分所说的参数设置进行分解,就可以很轻松的定义出组件的实际尺寸。而无论任何组件,它们都没有固定的尺寸值,需要大家不断的练习掌握制定的思路。之后再设计完整的页面,或整套应用时,就能大大提升效率和设计质量。

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

作者:酸梅干超人。 来源:站酷

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

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



那些高效的界面设计工具

纯纯

近年来界面设计工具不断推陈出新,一些新兴的实用界面设计工具渐渐走进设计师们的视野,逐步改变着设计师的工作模式。作为互联网设计师,效率至上的工作原则敦促我们不断尝试新工具,建立新的工作模式。本文将回顾界面设计工具的发展历程,并着眼界面设计工具的发展趋势,为大家推荐一些新兴、高效的界面设计工具,涉及UI、动效设计领域,希望对大家有所帮助。




Part1

——————————

界面设计工具的发展历程


随着互联网行业的日益繁荣,界面设计领域逐渐走向成熟,界面设计工具也一直在以惊人的速度发展。界面设计工具的发展历经了三个阶段:


1. 第一阶段是最早期界面设计领域刚刚起步,设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具,因此界面设计师在界面的绘制、文件的交付上都存在一定不便。


2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件,但其作为一款专门针对界面设计的工具,以其高效、小巧的优势迅速占领界面设计市场,逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺,出现了Principle、Flinto、Protopie等专门设计界面动效的工具,一般设计师都会将其搭配使用。


3. 当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野,它们专注于界面设计领域,不断挖掘和突破Sketch的短板,为设计师们打造更良好的使用体验。




Part2

——————————

界面设计工具的未来发展趋势

界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展,旨在实现更高效的设计生产活动。



云端性


随着云计算的发展,界面设计工具也在逐步走向云端化。设计从本地转向云端,不再依赖于本地硬件的性能,云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制,只要有网络,设计师可以随时随地的工作,临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方,变成发送链接给对方。前者耗费本地内存与下载时间,后者有网即可打开。设计工具的云端性使得设计的灵活度增强,设计效率大大提高。


协作性

注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具(如Figma、Framer Web)试图将产品、设计、开发、测试融为一个整体,让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生,扫除各工种之间的协作障碍。


通用性

今年9月Figma举办的第二届Config Europe大会,其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性,设计工具不仅可以帮助设计师输出设计稿本身,而且致力于打破设计与代码之间的壁垒,降低交接成本。让设计实现变得更加轻松高效。




Part3

——————————

界面设计工具推荐


1 UI工具篇

1.1 Figma

Figma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示,Figma的使用率从12%增长至26%,在今年的Config Europe大会上Figma也预告了一些即将推出的功能迭代,其便捷高效的特性使其受到众多设计师的追捧,正在逐步抢占sketch的用户市场。


Figma与Sketch相比,亮点功能有哪些?


(1)Windows用户也可随心使用

与sketch只支持苹果生态系统相比,Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用,理论上只要你能打开浏览器,就可以使用Figma愉快地设计。



(2)云端文件使用不卡顿,支持离线编辑


Figma创建的文件全部存储在用户的云端账户中,不占用本地内存。当文件过大时,sketch会出现卡顿现象,拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小,大文件也几乎不存在卡顿的情况。设计师们最关心的无网或若网情况下Figma的使用问题,Figma也给出了相应的解决方案。其支持离线编辑,离线时会自动把内容保存在本地,当网络恢复后自动同步到云端。



(3)一键导入sketch文件


Figma可导入Sketch文件,大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。





(4)更强大的组件功能


Figma和Sketch都拥有组件功能。当原始组件更改时,复制组件就会同步变化,在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步,复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时,原始组件不受影响。此时二者的关联逻辑仍然存在,当再次修改原始组件,复制组件仍然会同步变化。相比于Sketch,Figma把组件做的更加灵活限制更少。


同时Figma也在不断优化其组件功能,在Config Europe大会上,Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件,在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。


如下图中的按钮组件,设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。




(5)与代码紧密结合


在使用sketch输出设计稿时,设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合,本身自带交付功能。 其文件中的每个模块都有代码模式,只需要将开发同学的账号开通查看权限并发送链接,就可以直接在设计文件上获取标注,也可自行导出所需的CSS、ios、Android样式。





(6)一键恢复历史版本


Figma会将设计师的每一次修改存成对应的历史版本,当老板说想要某一版时,设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件,也有机会一键抢救。



(7)团队协作


团队协作功能可谓是Figma最大的核心竞争力。当几位设计师需要维护同一份设计文件时,Figma可以支持几位设计师同时在线修改,只要将文件链接分享给对方并给到相应权限(查看、编辑权限)即可。如果使用sketch,设计师一般会发送源文件给对方修改来达到协作效果。来回传输源文件不仅容易造成文件同步出错,而且有一定的下载时间成本和存储成本,相比之下Figma的优势显而易见。


除了设计师之间的协作,Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比,Figma的评论功能使得同事可以在设计文件中实时标注讨论方案,提高了线上评审效率。




小结

设计师受文件本地存储的限制,在工作中把源文件给同事、设计稿给产品、切图给开发、一项简单的输出对接任务变得琐碎起来。Figma的出现打破了设计师长久以来的孤岛工作状态,设计师只需分享一个链接,同事可以修改设计稿、产品可以评审、开发可以查看界面模块的属性甚至查看代码,大大提升了设计师的工作效率。如果您的团队正在考虑更换设计工具,Figma是一个不错的选择。




2 动效工具篇

2.1 Framer Web

Framer Web是一款在线动效设计软件,于今年5月上线正式版,相比于Framer家族的前两款产品Framer classic、Framer X, Framer Web突破了其以代码为操作核心的理念,上线的新版本对设计师来说更加易用友好。


Framer Web的核心亮点是什么?


(1)网页端全平台可用


相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑,Framer Web是一款基于浏览器的在线设计工具,因此windows用户也可以安心使用。同时个人版本免费,大大降低了设计师的使用成本。



(2)文件导入

Framer Web可通过import选项导入Sketch甚至Figma文件,可搭配Sketch和Figma快速制作高保真动效。




(3)轻松实现复杂动效


Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效,但对于设计师们来讲十分不友好,学习成本过高。此次发布的Framer Web为了解决这一问题,增加了适合设计师使用的可视化界面控制动效,设计师可以通过Magic Motion轻松实现复杂动效。


Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后,可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态,那么在画板切换时该元素就会生成补间动画发生相应变化。



同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video,本身会有一些独特的交互行为如End、Pause、Play(播放、停止、暂停),当进行这些操作时,会触发相应的页面变化。




(4)从设计到代码


代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板,设计师还是可以在设定了动效后,通过点击顶部的handoff调出相应代码。如果你是一个需要使用代码的设计师,你仍然可以通过编辑代码实现更复杂的动效。对于设计师来说,Framer提供的丰富动效已经可以满足绝大部分诉求。绝大部分设计师已经无需再关注代码部分,通过可视化界面完全可以做出很丰富的交互效果。而Framer Web最终的野心是希望设计师通过可视化界面设计出参数化的动效,可以直接导出相应的能交付生产端的代码。目前Framer Web 已经可以实现导出相应动效代码,但导出的效果仍有待完善,只是可以导出Transiton的参数而已。




(5)高效协作


Framer Web和Figma一样,也非常注重团队协作。设计师可以将链接分享对方进行查看、编辑,方便几位设计师合作一个项目的情况。与需要反复传输文件相比,Framer Web省时省力,大大提高了设计师的工作效率。


小结


Framer Web放弃了攻占界面设计领域的策略,转而和Figma官方达成积极的战略合作,专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整,相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能,非常值得期待。




3 插件篇


虽然云端化的设计工具正逐渐兴起,但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外,也会介绍一些好用的sketch插件,大家可以根据自己的需求自行尝试体验。


3.1 Design Lint(Figma)

设计师在做较大项目时可能会绘制几十个页面,难免会存在界面丢失元素的情况。Design Lint就能帮助你解决这一问题。它可以在你工作的时候进行实时更正,检查不同界面直接的差异,包括颜色、字体、填充、半径值等样式差异并纠正错误。如果你做了一些修改,Desgn Lint也会根据你的修改实时更新。这款插件可以让你更专注于设计本身,而不用浪费时间检查不同页面的元素是否使用正确,大大提高了设计师的工作效率。

https://www.figma.com/community/plugin/801195587640428208/Design-Lint



3.2 TinyImage Compressor(Figma)


设计师在做较大项目时导出的设计稿过大,存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件,导出多个图片时还会自动生成一个zip压缩包。

https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl




3.3 Design System Organizer(Figma)


这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时,会遇到如图所示的:“Buttons-Small-Default...”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后,该组中所有组件的名称都会随之改变,十分方便。

https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer




3.4 Juuust Handoff(Figma)


Figma本身自带交付功能,但该插件的好处是生成的是离线文件,导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。

https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff




3.5 Image Optim (Sketch)


设计师在导出设计稿时有时图片过大,Image Optim可以在导出图片时压缩图片,但不会影响图片的质量。使用时需先安装app再安装Sketch插件。

https://oursketch.com/plugin/imageoptim



3.6 FontFinder(Sketch)


设计师在做较大项目时可能会绘制几十个页面,难免会存在字体使用错误的情况,Font FInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体,你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改,大大提升了工作效率。

https://oursketch.com/plugin/font-finder





3.7 Craft(Sketch)


Craft插件十分强大,其中填充功能可以大大提升设计师的效率。在设计如列表页时,设计师为了效果需要编辑不同的标题、图片,都要冥思苦想编内容。Craft可以一键填充文字,如姓名、文章、日期、邮箱、地址、国家等。不同类别下面也设置了一些分类,方便设计师选择。除此之外,Craft还可以一键填充真实不重复的照片,为设计师节省了很多时间。

https://www.invisionapp.com/craft



3.8 BaseAlign(Sketch)


Sketch自带的对齐工具对形状来说很好用,但对于文字来讲一般是文字的文本框对齐,并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐,这样就以保证不同大小的文字都可以对齐,设计效果更完美。

https://oursketch.com/plugin/basealign



4 协作工具篇

4.1 XSHOW


XSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种,提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW,就可以将文件链接分享给产品经理、开发等同学。产品经理在手机小程序上就可以预览方案,设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。

网址:https://xshow.tencent.com





XSHOW是如何实现高效协作的?

对于设计师

(1)可视化上传文件

设计师先在Sketch中安装XSHOW插件,可使用快捷键或直接点选需要上传的文件画板,接着直接选择XSHOW中的“导出”,就可直观快速的将文件上传到XSHOW。




(2)记录所有版本迭代,轻松找回第一稿


设计师每一次上传的文件都会有云端记录,设计师可以通过时间轴便捷找回历史文件,轻松找回第一稿。



(3)灵活丰富的分享权限


对于项目分享的权限,XSHOW的设置更为灵活,除了支持私密、公开、指定人或团队可见外,也可以控制权限的时效。




对于项目管理者

(1) 直观了解团队输出,组建团队展示能力空间

XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况,同时可以组件团队展示能力空间。



(2)方案变更及时知道


XSHOW有记录所有版本迭代的能力,因此作为项目管理者可以及时知道团队成员对方案的修改变更,解决了团队内部有时同步不及时的问题。


(3)便捷组建项目和管理团队成员

项目管理者可以在XSHOW便捷组建项目和管理团队成员,大大提高了项目管理者的管理效率。





对于合作产品经理或甲方

(1)多端查看更方便

XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果,如果合作方身边没有电脑也可以及时查看稿件。




2. 查看历史变更


XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况,大大提升了信息同步效率。



对于开发工程师

(1)便捷查看标注与管理切片

设计师将文件上传到XSHOW后,只要将链接分享给开发,开发就可以直接在线查看文件标注、下载切片。


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司






设计工具的后起之秀——AffinityDesigner功能提炼

纯纯

一、基础操作


1.焦点显示

按住option单击图层缩略图,视图上会只显示该图层内容(暂时性隐藏其他图层,进行其他操作依然会显现出来)

2.蒙版(同PS剪切蒙版)

在AD中同样也是有蒙版功能的。例如下图,这三个字实在是太霸气了,我们想变怂一点,那该怎么办呢?在右侧图层面板中,按住矩形层缩略图,拖入文字层的缩略图与图层名称之间(也可以看作是缩略图层),即可完成蒙版操作。

但是要想调整文字大小,但是依然只显示矩形所在区域范围的内容呢?那么我们需要勾选上方工具栏中的【锁定子项(lock children)】按钮,在进行调整就OK了。


3.历史记录(history)※

1)定位滑块

历史记录工具包含一个定位滑块(position),拖动滑块,可快速撤销与复原,效率很高。同时也可以点击列表的特定步骤,点击后就会回到该步骤操作。

2)历史分支

在文件菜单栏中有个【随文档保存历史记录(save history with document)】,勾选后,保存的文件将保留历史记录。当你在历史记录中选中曾经的特定操作的情况下,进行一步新操作,则历史记录会产生一个小分支符号,分支符号代表不同的未来。例如我新建一个黄色矩形,然后将颜色调整为蓝绿色渐变。然后通过点击历史记录,回到新建黄色矩形的步骤,然后把颜色改成蓝紫色渐变,这样在填充步骤就会出现分支符号,通过点击分支可快速切换至蓝绿色渐变,可用于尝试性创作,并通过同时存在的两种结局来进行对比。


4.快速副本(power duplicate)

复制粘贴和复制图层操作与PS完全一致,不同的是power duplicate部分。首先,我们在画布上绘制一个矩形,然后按command J复制出一个矩形副本,将矩形副本移动到矩形的左边,然后缩放它,操作完成后按command J,在矩形副本的左边就会出现一个比矩形副本更小的矩形副本2副本2矩形副本的距离与矩形副本矩形的距离相同。好,我们回到第一步,绘制一个矩形。然后按住command 拖动矩形,则会出现矩形副本,然后移动矩形副本后,按command J,同样可以达到上面的效果,我们把这个操作叫做power duplicate,也就是快速副本。PS也有同样的功能,但是操作逻辑有些许不同,AD的更为清晰一点。


5.图层与像素图层

1)图层概念

在AD中,有两个图层的概念,一个叫做图层(就是普通图层,可以包括像素图层和矢量图形图层),另一个叫做像素图层。如果选中图层的状态下添加像素图层,则该像素图层会默认放置在该图层下,普通图层与组的概念类似。如果选中画板层的情况下添加像素图层,则像素图层自动创建在画板层,与其他图层同级。

2)三大角色模块(personas)

在AD中有矢量部分、像素部分、导出部分的区别。不同部分的工具区是不一样的。在矢量部分下,包括拖动矩形与钢笔绘制形状,所创建的都是矢量图层;像素部分创建出来的都是像素图层,这两者是不一样的,同时也是AD与AI的重要区别之一。


二、高级操作


1.等距视图※

1)内置网格

与AI需要自己手动绘制等距视图网格线不同,在AD中内置了一套优秀的网格系统,可以帮助我们快速的搭建出2.5D插画需要的网格线,并且支持角度变换。在调节角度时可以预览网格线的具体效果,就这一点就足以让2.5D插画作者扔掉AI转投AD。

2)等轴测工具(isometric)

isometric工具可以帮助我们快速绘制等距视图插画。我们可以想象一下在AI中,好不容易利用旋转复制人肉做出了参考线,还需要用钢笔工具去点击参考线的交点来绘制插画的一个个立体块面。在AD中这项繁复的工作将不复存在。通过等轴测工具,我们将告别手动对齐这种令人头大的工作。

等轴测工具功能由两部分构成,上方的三个立方体表示参考线当前描述的是哪个平面,并且可以通过这三个立方体来快速切换当前平面(current plane)。

在下方平面编辑选项部分,有这样几个功能项。

  • 在平面中编辑(重点):在该选项选中的状态下,我们通过图形绘制工具在画布上直接就能拖动出符合参考线角度的图形,特别是在绘制圆形时简直不要太方便。

  • 适应平面(重点):在画布中我们通过矩形工具绘制了一个正常的矩形,横平竖直那种,然后点击【适应平面(Fit to plane)】,只听得啪的一声,矩形就被啪到参考线上了,变成等轴视图的一个部分。

  • 在平面中翻转/旋转:这个没什么说的,就是普通的翻转旋转操作,变成了等距视图的翻转旋转操作。


2.资产(assets)

相当于UI组件库,Sketch与XD都有同样的功能。


3.符号(symbols)

视图(view)-studio-符号(symbols),将图形拖进去,就形成了symbols。

如果想要单独修改某一个符号,则需要点击符号面板右上方的【同步(sync)】来取消全局修改,然后单独修改某一个符号。修改后,该符号将脱离符号控制,不受符号修改影响


三、设计帮助


1.曲线吸附(curve snapping)

选择节点工具[A],去调整一条曲线的锚点,可以通过上方面板中的吸附(snapping)来选择各种吸附方式。


2.参考线管理器(guides)

视图-参考线管理器,可打开参考线面板,已存在的参考线都会在上面显示,同时可以点击参考线的数值来修改参考线的具体位置。

因为需要时间消化的原因,我会将文章分为几部分整理,在此阶段如果有朋友感兴趣可以去Affinity官网下载试用,同时结合本文上方的链接(官网的教学视频被异次元封印了)可以更好地了解AD。再次提一下,一定要看官方教学视频,不要想凭借着自己PS、AI的基础去直接上手,AD真的不一样。

AffinityDesigner(下文都用AD表示)是Affinity系列中偏向于矢量绘制与界面设计功能的工具,其并没有能够准确对标的竞品,如果非要对标的话,可能就是Adobe Illustrator和Sketch了。Affinity系列中的另外两款作品Affinity Photo(偏向图像处理,对标Adobe Photoshop)与Affinity Publisher(印刷排版,对标Adobe InDesign)也是非常有潜力的作品,不过目前这两款还没有办法完全替代掉Adobe家族的作品。

但是AD,我觉得是可以完全有实力跟Adobe Illustrator一较高下。在用过Sketch之前,我从未感觉用PS做UI有多低效,同样,在了解AD之前,我也从来没感觉Ai有多难以忍受,顶多有些地方感觉反人类罢了。但是经过两三天的了解与试用,我立即就在App Store下单入正并抛弃了AI。

因为AD,真的有点东西。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




快速帮你搞定插画的插件

纯纯

发现一个非常好用插画神器

地址是https://blush.design/zh-CN/sketch 

能自动生成各种你需要的插画形式,重点是这些插画都是可以免费商用的,肯定能帮到你。

undefined


它有Figma和sketch2个不同的版本,下面彩云就以sketch为例来说说这个插件怎么用。(没有Mac电脑不能使用sketch的同学,也可以用figma来生成插画哦,所以在win下也是可以用的,使用方法跟sketch类似) 



1.如何使用


使用非常简单,只需要简单几步就能搞定: 



1)下载插件并安装


装好后,从插件菜单点开Blush插件,会出现一个插画库界面。


undefined



2)生成插画


1.创建一个矩形,先给定一个大小,目的是为了给生成的插画一个位置和范围(也可以后面再调整,不是太重要) 



2.选一个你喜欢的插画风格,点下封面右上角的随机图标 


3.生成之后,你还可以针对它的组件各个部位再次随机,当然你也可以根据自己的喜好直接选择对应的部件 



3)导出插画

免费版把插画的尺寸改到中型尺寸再生成。效果调整好之后,按正常的sketch选择导出png图片就行。想导出svg矢量格式的需要付费,但我觉得2x的Png图,已经足够用了。



2.插件包含了哪些类型的插画资源呢?


1)城市元素 


undefined


2)装饰背景 



3)人物场景 




3.这种插画在实际项目中运用如何?


彩云随便做了几个,大家可以感受下,效果应该还可以 。



1) 引导页 


使用了插件中的Tech Life主题插画 


2)网页头图 


使用了插件中的Tech Life主题插画 


3)作品集包装



4)登录页


使用了插件中的Cityscapes主题 



4.结语


这个插件的原理是把插画进行组件化,利用sketch和figma的组件功能进行拆分再重组,构成大量的随机插画。可以看到,组件化已经成为一种思维方式,最初是用在UI中,现在已经扩展到了插画领域,未来还有哪些可以组件化?我们可以一起思考。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



必看的平台设计规范

纯纯

UI 设计师必备的一项基础能力:规范能力

为了避免重复造轮子,反复掉入同样的陷阱,阅读并熟知主流平台的设计规范,是非常有帮助的。

本文内容主要介绍了iOS 、Android、Ant Design的相关规范,为的是不重复累赘描述同一个知识点,涉及到移动端和PC端,主要为了帮助基础同学学习,适当地删减了一些有难度的规范。

设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

一、设计规范的价值 

1.确保界面的统一性(界面) 

通过设计规范的约束,保证产品的色彩使用、图标图形、空间、文字、页面布局等内容保证严格的一致性。 

2.技术及品牌的延续 

规范能延续产品风格及特性,保证产品视觉及交互层面的统一,包括技术带来的变革,增强用户的认知性,不同程度得提升用户体验。

3.协同工作提高效率(设计) 

多人合作完成一个项目时,需要视觉规范。遵循设计规范,保证视觉统一、提高工作效率。

4.指导搭建框架及布局(开发) 

辅助技术层搭建框架及布局的规则更清晰明确,如按钮、颜色、字体大小等,提高开发效率,确保应用软件最终实现效果与视觉设计相符合。



二、视觉规范 

视觉设计规范是指对设计的具体技术要求,是设计工作的规则。包含了目标、功能、技术指标,以及限制条件等。

(1)视觉规范的作用 

① 视觉设计规范,是量化的设计指标,具有指导性、约束性。

视觉设计规范要确定⼀般可用性原则和审美常识下的避免犯错的方法,以及一旦出现错误后的补救方案。规范的第一个目的是减少设计过程中出错的次数,针对新手设计师、第三方团队,可以很好地做到经验传递,迅速了解上手。减少标注时间,提高前端开发质量。

② 视觉设计规范,是确定关键因素,要有有效性、复用性。

获得该设计规范针对范围内的关键点,包括设计方向和设计元素,以通过项目设计的过程,达到团队成员的更加密切的配合效果。促进多人协作,解决视觉不统⼀现象。

(2)视觉常见类别 

① 品牌规范:塑造形象以及应用的规范。主要包含了标识的标准制图,配色字体等。以及常用的搭配方式。

⼀个企业或者⼀个产品,都有相应的品牌视觉识别系统(VIS)。品牌视觉识别系统是视觉设计最好的参考基础,既然是⼀种指导体系或者说是参考,那么也相应地会有品牌的规范。

② 平台设计语言规范:平台理念、遵循规范的好处、某种应用的生态。比如 Google 和 Apple 制定的规范。针对第三方的规范,主要旨在让这些第三方的设计更兼容平台应用。通常制定了大的方向和规则。并且会提供很多基础的设计元素和插件。

③ 产品业务规范:侧重在产品设计和实现层,内容清晰并且实用,标注详尽,方便设计师们使用。更注重个性化的部分。

三、平台设计语言规范-Material Design 

https://material.io/

Material Design 规范在于统一 Google 多种平台下的一致性,代表 Google 全新的体验。 包含丰富的色彩、空间的层次、流畅的动效、多样的组件。

谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。

1.Material Design 的作用 

从设计角度:建立共同的设计语言,将产品风格、品牌及交互形式统一起来。

从使用角度:提高产品认知度,提升品牌延续性及产品体验的一致性。

2.Material Design 的特征 

(1)环境 

Material Design 是基于三维空间的设计语言。 包含光线、材质、阴影。在 Material 环境中,虚拟灯光照射整个场景。

(2)属性

Material 有自身固定不变的外在特征和内在行为逻辑 ,理解这些固有的属性有助于实际的设计项目。

• 立体性 

• 空间位置的唯一性 

• 不可穿透 

• 形状可变化 

• 沿水平方向做变化 

• 不可弯曲 

• 能与其他材质对象合并 

• 分裂,再合并 

• 可沿任何轴上移动

(3)高度和投影

Material 借鉴了现实物理世界中的物质特性,并将其运用在虚拟三维空间中的 Material 元素上, 有利于帮助用户理解信息层级,同时可以统一各应用之间的体验。

投影提供了元素深度和运动方向的重要视觉线索;在运动中,投影提供了元素移动方向及高度变化。

四、平台设计语言规范-iOS 平台设计规范 

https://developer.apple.com/desig

iOS 设计规范逝之苹果开发者官网上面的 iOS 人机交互指南(iOS Human Interface Guideline)。制作这个规范的目的是为了让所有安装到 iOS 系统的 App 都遵从某些特定的视觉特性、交互特性,以达到风格一致的使用体验。另一层面,也是便于让设计人员和开发人员能够更好地理解 iOS 系统,更合理的运用系统提供的功能和接口,更高效地制作出 App。


1.iOS 平台设计规范的三大基本设计主题 

(1)清晰 (Clarity)

在整个 iOS 系统中,每一种尺寸下的文本信息都应该是易读的,图标应该是精确易懂的,每一个装饰应该是精巧适当的,而且更加需要注重功能驱动设计的原则。利用留白、色彩、字体、图像和界面元素巧妙的突出重要内容并传达其不同的交互性。

(2)遵从(Deference)

在简洁美观的界面中清晰流畅的动画效果可以帮助用户更容易理解内容并与之进行交互,而不会对用户的操作产生干扰。内容全屏显示时,半透明或者模糊处理的方式可以提示用户更多的内容。减少使用边框,渐变及阴影可以使界面轻 量化,突出显示内容(内容优先)。

(3)深度(Depth)

不同的视觉层次和逼真生动的动画效果 可以表达界面更深层次的内容,赋予了界面活力,使用户对界面内容更容易理解。易于发现并易于触摸的元素可以提升用户体验的愉悦感,用户在操作功能时不至于迷失。当用户在浏览内容时,流畅的转场效果提供了一种纵深感。

2.iOS 平台的设计原则 

为了最大限度地提高影响力和覆盖面,在应用设计规范时应牢记以下原则:

(1)审美完整(Aesthetic Integrity)

审美完整性体现了 App 的外观和行为与其功能的整合程度。例如,一个帮助用户执行严肃任务的 App 可以通过微妙、不显眼的图形、标准控件和可预测的行为来保持他们的专注。

另一方面,沉浸式的 App,比如游戏 App等,就可以提供吸引人的外观,传递乐趣和刺激感,同时鼓励发现。

(2)一致性(Consistency)

系统提供的界面元素、众所周知的图标、标准的文本样式和统一的术语来实现熟悉的标准和范例可以使得一个 App 的设计符合一致性。

(3)易用性(Direct Manipulation)

易用性指的是用户可以理解屏幕的内容,用手势、触动屏幕等动作直接操作,并且,用户通过直接操纵,可以看到他们的行动的直接的、可见的结果。

(4)反馈(Feedback)

反馈指对用户的行动进行了确认,并且通过显示行动结果以使用户了解情况。iOS 系统的 App 要为用户的每一项操作提供可感知的反馈。如:轻触时会突出显示交互元素;进度指示器会传达长时间运行的项目的状态;动画和音效有助于阐明操作的结果。

(5)隐喻(Metaphors)

当一个 App 中的虚拟元素以及动作都是用户对熟悉事物的隐喻的时候(包括现实世界和数字世界),用户会学习的更快。比如,用户移动视图来查看更多内容;拖拽内容;切换开关、移动滑块并且直接滚动来选取值;甚至可以像翻书或杂志一样轻快的翻页。

(6)用户操控(User Control)

在整个 iOS 中,用户是掌控者,而不是 App,App可以建议一个行动方案或者警示危险后果,但 App 不能替用户做决策。

好的 App 可以在用户授权和避免不必要的结果之间找到正确的平衡。

App 可以通过交互元素,确认、取消的提醒以使得用户觉得自己在控制。

五、平台设计语言规范-Ant Design平台设计规范 

https://ant.design/index-cn

Ant Design服务于企业级产品的设计体系,常用于PC端设计规范,基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。

1.Ant Design平台的设计原则 

(1)亲密性

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。

(2)对齐

正如「格式塔学派」中的连续律(Law of Continuity)所描述的,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

(3)对比

对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

(4)重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。

(5)直接了当

正如 Alan Cooper 所言:「需要在哪里输出,就要允许在哪里输入」。这就是直接操作的原理。

eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。

(6)足不出户

能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。

(7)简化交互

根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。

(8)提供邀请

很多富交互模式(eg:「拖放」、「行内编辑」、「上下文工具」)都有一个共同问题,就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在。

邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。

(9)巧用过渡

人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

  • Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。
  • Receding: 与当前页无关的信息元素应采用适当方式移除。
  • Normal: 指那些从转场开始到结束都没有发生变化的信息元素。

(10)即时反映

「提供邀请」的强大体现在 交互之前 给出反馈,解决易发现性问题;「巧用过渡」的有用体现在它能够在 交互期间 为用户提供视觉反馈;「即时反应」的重要性体现在 交互之后 立即给出反馈。

就像「牛顿第三定律」所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

写在最后 

当然,这并不代表了解这些就能做出优秀的设计方案了,英文水平比较好的同学建议直接读原文,直接从 Material Design 和 iOS 的官网进行规范学习,效果更佳。当然如果英文水平有限,网上也有很多译版方便大家阅读。

而关于Ant Design的设计规范,可以去官网查阅更多的详细内容,但PC端的设计规范平台还有很多,字节、腾讯等设计官网都有。

记得对于规范不需要死记硬背,练多了自然能够记住。

作者:知群

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

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

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

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

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





你一定要知道的色彩知识

纯纯

好的配色不但能传达出鲜明的产品主题调性,并且能为用户的视觉行为产生导作用,构成良好的用户体验。

对于UI设计师来说,不但要考虑颜色在给予用户的感受上的作用,同样应当考虑其实用性,避免重形式而轻内容的问题发生。

所以本文的内容是基于色彩的基础知识,为大家介绍 UI 设计师常用的配色方案、配色流程,当然也包括其他视觉设计工作者在工作中要用到的基础色彩常识。






一、色彩常识 


颜色或色彩是通过“眼、脑和我们的生活经验”所产生的⼀种对“光”的视觉效应。但是人对颜色的感觉不仅仅由“光”的物理性质所决定,还包含着“心理”等许多因素,比如人类对颜色的感觉往往受到周围颜色的影响。有时人们也将物质产生不同颜色的物理特性直接称为颜色。



颜色的应用在 UI 设计师的工作中是非常关键的一环。

1.颜色的三要素 

(1)色相 

是指色彩的相貌,色相被用来区分颜色,根据光的不同波长,色彩具有红色、黄色或绿色等性质,这被称之为色相。

(2)明度 

是色彩从亮到暗的明暗程度,黑色的绝对明度被定义为 0 (理想黑),而白色的绝对明度被定义为 100 (理想白),其他系列灰色则介于两者之间。

(3)纯度 

纯度通常是指色彩的鲜艳度。从科学的角度看,一种颜色的鲜艳度取决于这一色相发射光的单一程度。色彩的纯度强弱,是指色相感觉明确或含糊、鲜艳或混浊的程度。








2. 色彩模式 

(1)HSB :在 HSB 模式中,H(Hues)表示色相,S(Saturation)表示饱和度,B(Brightness)表示亮度。

(2)RGB :三原色红、绿、蓝叠加最终为白色(加色模式)。常用于光源光情况下,例如显示屏幕。

(3)CMYK :三基色洋红、黄、青叠加最终为黑色(减色模式)。常用于反射光情况下,例如印刷。

(4)LAB :LAB 色彩模型是由亮度(L)和有关色彩的 A,B 三个要素组成。L 表示亮度(Luminosity),A 表示从洋红色至绿色的范围,B表示从黄色至蓝色的范围。








3. 色彩心理作用 

色彩心理作用是指色彩作用与人的情感所产生的心理感受与综合性生理感觉作用。它影响着人们的记忆、感知、联想和情感,刺激着视觉,在设计中有着不可忽视的作用。色彩的直接心理作用对设计有着重大的影响,关系到对用户心理的把握。

色彩心理作用包括色彩的直接心理效应间接心理效应

(1)直接心理 

色彩的直接心理效应是色彩本身的属性即色相、明度、纯度等感官印象造成的心理感受。它包括很多不同的心理效应,一般可分为 9 类,即色彩的兴奋感和沉静感、色彩的冷暖感、色彩的轻重感、色彩的华丽感和朴素感、色彩的明快和阴郁感、色彩的软硬感、色彩的明暗感和色彩的空间感。







(2)间接心理 

色彩的间接心理效应是由色彩的直观感受反映到大脑所产生的联想效果。在设计中常常利用色彩间接心理效应来传达广告信息。

4. 色彩象征 & 联想 




色彩象征

1)灰⾊:正式、重⼒、成熟

2)棕⾊:保守、亲切、稳定

3)粉⾊:⼥性、天真、⻘春

4)⻩⾊:注意、提醒、快乐

5)紫⾊:奢华、浪漫、创意

是一种充满神秘的颜色,在自然界中较少见到,所以被引申为象征高贵的色彩。

在UI设计中的应用场景为紫+粉常用于女性化的产品调性。

6)⽩⾊:新鲜、清洁、健康

白色常常被认为是无色”即不是色彩。

在UI设计中的应用场景,常用于背景色,缓和各种颜色的冲突,以衬托其他色彩,提高画面明度,提高文字可读性。




图源-dribbble

7)⿊⾊:正式、权⼒、⽼练

是一种充满质感的颜色,它是所有色彩中最有力量的,能很快吸引用户的注意力。

在UI中的应用场景,常和其他色彩百搭,比如黑色+金色,黑色+红色等等,以及现在UI设计中的暗黑模式。



图源-dribbble

8)蓝⾊:信任、舒适、放松

纯净的蓝色通常让人联想到海洋和天空,让人的内心感到平和,有助于人的头脑变得冷静,减少工作中的烦躁和冲动。

在UI设计中应用场景,常用于工具、商务、科技类等产品,B端设计也经常运用。





图源-dribbble

9)绿⾊:⽣⻓、⾃然、成功

绿色是大自然中最常见的颜色,代表着健康、生命、青春、宁静、自然、和平、安全、舒适,是一种充满希望的颜色。

在设计中的应用场景,健康、医疗、运动及少儿类产品使用较多,一般在软件中表示安全、成功。





图源-dribbble

10)橙⾊:信⼼、能量、乐观

它烘托出的活跃气氛没有危险的感觉,反而是一种友好。

在UI设计中应用场景,电商、金融以及服务类的产品使用较多,比如淘宝。


图源-dribbble

11)红⾊:危险、重要、激情

最醒目和强势的颜色,甚至能引起一些生理反应,例如心跳呼吸加快等。

在UI设计中应用场景,红色常用于电商、金融、服务等行业。红色也最能烘托气氛,在中国传统节日里都使用热闹的红色来装饰,比如新年春节阶段。同时红色也代表了警示、告诫,所以在界面设计中常用红色的文字和按钮来警示用户慎重操作。





图源-dribbble

5.UI中的色彩


Ul配色一般包含主色和辅助色、强调色、中性色。

主色通常与品牌色一致,辅助色一般选择与主色色调一致且能拉开层次的颜色,强调色选择与主色相对立的互补色。

中性色主要用于界面中的线条和背景


图源-dribbble

二、配色方法 

每⼀种色彩都有其自身的特质,而这⼀特性的发挥,还需要依赖于色彩在整个配色时所处的位置、面积等,即色彩与其他色彩所形成的秩序。

1. 主色&辅助色配色 

颜色同样有主体,和辅助。确定主体色系,有助于页面整体基调的把控。在实际的操作过程中,颜色要适量,通常2-3种就可以了。多了往往较乱(并非绝对)。

2. 色环配色方法 

单色系配色法:同⼀个色系内根据颜色的明度和纯度不同去做区分,形成层级关系、对比关

系的配色方法。例如:深蓝、天蓝、浅蓝这样的层级变化。

邻近色配色法:相邻的色系进行搭配。例如:黄色、橙色、红色。

对比色配色法:对比的色系进行搭配。例如:黄色、紫色。




3.App 配色 

一套 App 配色基本由背景色、主题色、辅助色、点睛色 4 种色调组成。

  • 背景色:分为浅色基地(白基),深色基地(黑基),彩色基地(灰基)。
  • 主题色:除了基地背景色外占最多体积的色调组成,主色调也可由几个颜色混合的渐变色组成。
  • 辅助色:辅助主色,使画面细节更丰富,辅助色也可由呼应主色调内容图片辅助。
  • 点睛色:引导阅读,装饰页面,让页面的元素信息层级井然有序。




三、配色工具 

flatuicolors https://flatuicolors.com

提供多款扁平⾊彩配⾊⽅案,可以根据 UI 设计的需要选择使⽤。

Paletton http://paletton.com

是⼀个在线的⾊环配⾊⼯具,我们可以根据需要选择单⾊、相近⾊、对⽐⾊等规则来查看配⾊,也可以实时查看其在⽹⻚中的搭配效果。

uigradientshttps://uigradients.com/

UIgradients 以分享美丽渐变⾊彩为主的分享站,⾥⾯接近上百种渐变配⾊⽅案,设计师可根据⾃⼰⻛格来选择搭配,此外我们还能直接获得对应渐变配⾊的CSS代码。

webgradientshttps://webgradients.com/

富有超多好看渐变渐变配⾊的⽹站,只需要复制⾊彩编号填充渐变,或者直接下载PSD,Sketch,图⽚,CSS代码。

CoolHuehttps://webkul.github.io/coolhue/

富有超多好看渐变配⾊的⽹站,可安装Sketch 插件,或者直接下载图⽚和CSS代码。

中国色网站http://zhongguose.com/

只有中国的颜色, 才能这般,美得不可方物

Adobe Color【工具】https://color.adobe.com/zh/create/color-wheel

Adobe色轮配色工具,可以选择色彩模式与调和规则

ColorSpacehttps://mycolor.space/

功能强大的渐变色在线生成器,支持单色、双色,甚至三色渐变。

写在最后 

色彩是设计中的重要组成部分,不同的色彩传递不同的情感和态度给用户,这也是UI设计规范中需要注意的部分,即做到色彩统一、色彩平衡。

作者:知群

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

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

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

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

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




如何设计更好的图标?

纯纯

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

 

前言

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

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

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

 

技巧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

 

资源


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


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




日历

链接

个人资料

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

存档