首页

这么好看还免费?还能商用? 刚开始我是不相信的!

seo达人


图片

我随便下了两张:

图片

图片

往上随便加点文字排版:

图片

图片

那效果也是杠杠的!

再看看别人用的效果,网页头图啥的:

图片

图片

也是相当强。

这图的质量那也是非常高清,6000px的大小:

图片

 

最最最关键的是,完全免费并且可商用,看看官网上的说的:

图片

够意思!

这个网站的网址如下:https://gradienta.io/

需要科学上网,如果不会的话,可以找我领取,我帮大家下载了一部分,获取方式:点个在看,后台回复ppt封面,即可获得。

 

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

转载请注明:学UI网》这么好看还免费?还能商用? 刚开始我是不相信的!

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

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

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

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



详解|交互设计中的色彩搭配,这样更有效!

seo达人


图片

△ 豆瓣 App 电影榜单卡片

 

颜色的搭配其实是一个非常值得研究的问题。深入剖析的话内容也会很多,本文会告诉你,颜色如何挑选会更有规律,并保证基本和谐

 

1. 色彩学概念浅谈

想要做好色彩的搭配,需了解一些色彩学概念。色彩学将颜色分为:同类色、类似色、邻近色、中差色、对比色、互补色。这几种颜色通过色相环的角度进行取色,如下图所示:

图片

任意颜色都可以作为基色,每一个基色都有其相对应的同类色、对比色、互补色等等。

通常情况下,相邻的两个颜色,选择基色和邻近色之间的颜色,也就是与基色之间的角度 ≤ 60° 的颜色,会让页面的颜色显得和谐统一。

图片

△ 得到 App 服务内容卡片

 

图片

△ QQ 音乐 App 榜单卡片

 

如果选用对比色和互补色,则需要控制颜色的面积,比如以红色为主的页面中可以出现蓝色,但蓝色的面积占比最好不要超过 20%

除了色相上的变化,颜色还有明度纯度上的变化,对于颜色的影响也至关重要。这三个词汇的概念如下:

  • 色相 Hue:也称色调,是指色彩的相貌
  • 纯度 Saturation:也称饱和度,是指色彩的鲜艳程度
  • 明度 Brightness:也称亮度,是指颜色的明暗程度

色相、纯度、明度三者构成了色立体的概念,让色相环由二维变成了三维的概念。

图片

 

2. HSB 色彩模式

RGB 和 CMYK 是我们较为熟知的色彩模式。而根据上文提到过的色彩学概念,在实际工作中我们也可以借鉴 HSB 色彩模式进行调色和选择颜色。

在 sketch 和 PS 的 HSB 色板界面如下图:

图片

其中:

  • 色相 Hue (H):取值在 0-360 度之间
  • 纯度 Saturation (S):取值在 0-100 之间,数值越高色彩就越纯艳
  • 明度 Brightness (B):取值在 0-100 之间,数值越高色彩就越明亮

图片

由于纯度 Saturation (S) 和明度 Brightness (B) 之间的数值都是在 0-100 之间,因此两者具备一定的对应关系。这些数值可以为你在选择颜色时提供依据。

具体怎么使用这些数值,我们用案例来说明:

 

案例  

某 PC 端产品功能卡片需要做配色设计:

图片

已知产品的品牌色是以下两个颜色,其 HSB 色值如下图所示:

– 颜色 A:H=233,S=74,B=100(主色)

– 颜色 B:H=267,S=79,B=100(辅色)

图片

因此卡片的衍生色我们可以使用:蓝色调 + 临近色,且临近色的颜色最好介于蓝色和紫色之间,会使产品页面颜色的搭配更加和谐统一。

于是我们可以先根据品牌主色:

– 颜色 A:H=233,S=74,B=100

来确定初步颜色,我们只改变色相(H)的数值,分别在 233 的基础上进行 +10 和 -10,由此可以得到三个颜色 A1、A2、A3,呈现效果如下图:

– 颜色 A1:H=253,S=74,B=100

– 颜色 A2:H=243,S=74,B=100

– 颜色 A3:H=223,S=74,B=100

图片

现在的卡片颜色略显单薄,我们可以再给每一张卡片加一个颜色,做出过渡色效果。于是我们在数值 A1、A2、A3的基础上,保持色相(H)不变,只改变这三个数值的明度(B)和纯度(S)的数值。以颜色 A1 为例:

– 颜色 A1:H=253,S=74,B=100

现在,我们想要得到一个比 A1 更深一点的颜色 A1-1,根据色彩学理论,我们可以降低明度(B)的数值,这样颜色会变深,同时增加纯度(S)的数值,这样颜色会更沉稳纯正,为了保证数值可控,我们将明度(B)降低 26,将纯度(S)提高 26,所以可以得到颜色 A1-1 的色值:

– 颜色 A1-1:H=253,S=100,B=74

A1 和 A1-1 的颜色效果如下图:

 

图片

按照此方法,我们可以得到两组颜色和其数值:

图片

所以我们的卡片可以使用渐变色:

图片

这样卡片的颜色就基本确定下来了,我们可以再调整下卡片的细节,比如增加相关的背景插图,调整卡片上的文字排版等等,这组 PC 端卡片最后的效果如下图:

图片

 

3. 补充说明

一个页面中元素的色彩选择有很多影响因素,比如:产品的品牌色、页面的功能、页面的内容、氛围等等,所以还是要具体情况具体分析,综合考虑选择颜色。

当然,以上提出的这些数值只是参考,为的是给你的颜色选择提供理论支撑。在实际应用中,也还是需要设计师根据具体情况,以及人眼视觉感知的效果,酌情做颜色上的优化处理。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》详解|交互设计中的色彩搭配,这样更有效!

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

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

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

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



3D动效设计小集

seo达人



 

原文地址:站酷
作者:FY印迹

 

转载请注明:学UI网》3D动效设计小集

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

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

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

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



这些不同类型的菜单图标和用法,我做了个总结分析!

seo达人


1.汉堡菜单

图片

关键词:横条、多个菜单选项

这个图标的样式简洁易懂,通常位于网页和App的上下角,用来告知用户这个按钮之外还有更多内容可以探索。

当产品有多个菜单选项时,考虑使用汉堡图标来显示,但尽可能避免在桌面视图中使用。

 

2.垂直三点式菜单

图片

关键词:垂直、内嵌菜单

通常位于屏幕或窗口的右上角或顶部,是用于打开带有附加选项的图标,打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。

 

3.水平三点式菜单

图片

关键词:水平、内嵌菜单、web

水平三点式菜单同样常位于屏幕或窗口的右上角,用于打开菜单或显示相关项的操作。

因为图标样式是水平的,所以更容易在web上或者在表格等水平方向中使用。

 

4.九宫格菜单 

图片

关键词:子分类、子功能

九宫格菜单通常用于打开同一产品中包含不同子产品或子功能,可以在它们之间快速切换,此图标常位于产品主页的右上角。

 

5.过滤式菜单

图片

关键词:过滤、排序

过滤式菜单由三行不同长度的线段水平叠放而成,是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用,或者与全局过滤器结合使用。

 

6.汉堡菜单变体

图片

关键词:样式特殊、时尚感更强

作为汉堡图标的替代品,与显示列表菜单的目的相同吗,但是这些样式我们平常见的可能会比较少,更常用在充满现代感、时尚感和艺术感的网站上。

图片

 

最后

不同的样式可能代表着截然不同的设计目的,常思考这些小而精的细节,是保证产品体验提升的关键。

 

参考:uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》这些不同类型的菜单图标和用法,我做了个总结分析!

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

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

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

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



我翻遍全网,这11种高级感样机建议下载

seo达人

#1.智能手机屏幕模型

图片
图片

 

#2.信封透明封面小册

图片
图片

 

#3.高级感简约iphone样机

图片

图片

 

#4.3D手持样机

图片

 

#5.工卡名牌样机

图片

 

#6.iphone12样机模型

图片

 

#7.高级感纸张纹理样机,可以使用在海报包装上

图片

 

#8.折叠小册子模型

图片

 

#9.简约纸袋模型

图片

图片

 

#10.高级感褶皱样机

图片

图片

 

#11.情绪版展示样机

图片

好了,分享到这,文件已打包好

图片


 

原文地址:  功夫UX(公众号)
作者: 功夫UX

转载请注明:学UI网》我翻遍全网,这11种高级感样机建议下载

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

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

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

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


天呐,国外大佬总结的这20条B端图表设计原则,简直太实用了!

seo达人


图片

 

1. 选择一个正确的图表可视化类型

选择错误的图表类型,或默认为最常见的数据可视化类型,可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容,可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。

图片

 

2. 根据正负值使用正确的绘图方向

当使用水平条时,在基线的左侧绘制负值,在右侧绘制正值。不要在基线的同一侧绘制负值和正值。

图片

 

3. 条形图总是以0基线开始

删数据起点会导致曲解。在下面的例子中,看左边的图表可以很快的得出结论,值B比D大3倍多,而实际上,两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。

图片

 

4. 折线图应该要清晰体现y轴上的趋势变化

对于折线图,总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势,因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。

图片

 

5. 使用折线图时要考虑时间连贯性

折线图是由线连接的“标记”组成,通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的,并且对于较短的时间间隔非常有效,但当数据更新不频繁时,这可能会导致混淆。

图片

例如: 使用折线图来代表年度收入,如果数据是每月更新的,则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值,而在特定时间实际的收入数字是未知的,所以可能会产生误会。在这种情况下,使用垂直条形图可能是一个更好的选择。

 

6. 不把折线图强行“平滑”

平滑的折线图可能在视觉上很好看,但它们错误地反映了背后的实际数据,而且过粗的线会模糊真正的“标记”位置。

图片

 

7. 避免使用比例不同的双轴折线图

通常,为了节省可视化空间,当有两个具有相同度量但大小不同的数据系列时,可能倾向于使用双轴图。但这些图表不仅难以阅读,而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例,只是浏览图表,然后就得出了错误的结论。

图片

 

8. 限制饼图中显示的切片数量

饼状图是最流行的也是经常被误用的图表之一。在大多数情况下,条形图是更好的选择。但如果你决定做一个饼状图,有2个比较好的建议:

1)不要超过5-7片,保持简单

2)可以将额外的最小段分组到“其他”切片

图片

 

9. 在图表上直接标注

如果没有适当的标签,无论你的图表有多好,它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。

图片

 

10. 不要在切片上贴数据

将数据放在切片上可能会导致多个问题,在可读性问题上和窄切片上都会有挑战。相反,添加黑色标签能清晰的链接到每个部分。

图片

 

11. 保持饼图切片秩序以提升阅读效率

在确定饼片秩序时,有几种常用的方法:

1)将最大的切片放在12点的位置,然后将下一片切片顺时针降序排列

2)把最大的切片放在12点的位置,第二大的放在顺时针相邻位置,第三大的放在11点的位置,其余的切片按顺时针降序排列

图片

 

12. 避免随机排列

同样的建议也适用于其他许多图表。不要默认采用字母排序,将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图),以确保最重要的数值占据最突出的空间,减少眼球运动和阅读图表所需的时间。

图片

 

13. 窄的饼图是难阅读的

饼图通常不是最容易阅读的图,因为比较相似的值非常困难。当我们把中间部分去掉,创建一个圆圈图表时,我们腾出了空间来显示额外的信息,但这样牺牲了清晰度,极端情况下,图表就会变得毫无用处。

图片

 

14. 视觉效果不要抢了数据风头

不必要的造型不仅会分散注意力,还可能导致对数据的误解和用户的错误印象。你应该避免:

1)3D元素,明暗面

2)阴影、渐变和其他扭曲的多彩色

3)斑马图案,过多的网格线

4)过度装饰,斜体,粗体或衬线字体

图片

 

15. 选择与数据性质相匹配的调色板

颜色是有效的数据可视化的组成部分,在设计时考虑以下3种颜色类型:

一个定性调色板最适合显示分类变量。为确保易用性,所分配的颜色应该是不同的。

连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合,可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合,中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。

图片

看看一个方便的工具- [ColorBrewer],它可以帮助你生成各种调色板。

 

16. 设计的可访问性

根据美国国家眼科研究所(National Eye Institute)的数据,大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1)在调色板中使用不同的饱和度和亮度

2)把现有配色去色然后检查对比度和可读性。

图片

 

17. 关注易读性

确保排版能够准确传达信息,帮助用户专注于数据,而不是分散用户的注意力。

1)选择易读的字体,避免衬线和装饰过度的字体

2)避免使用斜体、粗体和全部大写

3)确保与背景有高对比度

4)不要旋转文字

图片

 

18. 使用水平条形图代替旋转标签

这个简单的技巧将确保用户能够更有效地阅读图表,而不会扭伤他们的脖子。

图片

 

19. 事先选择合适的图表库

如果你的任务是在web和移动项目中添加交互式图表,你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现,并能提供大量交互想法。

图片

 

20. 做成动态图表

帮助用户通过改变参数,可视化数据进行探索。然后得出结论,最大化价值和洞察力。在下面的示例中,你可以看到IOS Health应用使用了各种数据表示的组合。

图片

 

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

原文地址:medium

作者:Taras Bakusevych

译文地址:彩云译设计(公众号)

译者:彩云Sky


转载请注明:学UI网》天呐,国外大佬总结的这20条B端图表设计原则,简直太实用了!

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

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

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

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



苹果Google都在用的设计趋势,简直太绚丽了!

seo达人

图片

 

什么是色彩叠加?

图片

色彩叠加这种风格我们经常可以在很多大厂设计中看到。从它的名字我们就知道这是一种通过颜色混合的一种表现手法。色彩叠加在色彩构成学上叫色料混合, 也叫第二混合。两种或者多种颜色混合后所产生的新颜色,混合的色彩不但色相发生变化,明度和纯度都会产生变化。它是多个颜色通过不同模式进行混合,可以得到不同的颜色,通过色彩模式叠加的运用,让它的细节层次更丰富,色彩的饱和度也高。下面我来解刨一下它的特点,你也可以通过这些特点,轻松掌握这个设计技法哦!

 

 色彩叠加特点一:邻近/互补色搭配 

图片

在色相环上采用邻近色搭配,颜色多以明亮的高饱和度为主,使得页面更具时尚活泼感。

图片

邻近色是色环相邻的两种颜色,色相在60度以内,这样的颜色搭配色彩过度比较平和也会显得页面有层次。互补色是色环相对立的颜色,色相相距180度,这样的颜色搭配对比会非常强烈,视觉效果会鲜明。
 

邻近/互补色在网页的运用

图片

在视觉表现上运用互补色对比,搭配柔和的渐变过渡,给人一种年轻有活力的视觉感受。
 

邻近色在APP中的运用

图片

明亮的邻近色搭配作为页面的背景、卡片背景设计,页面年轻活泼,通过色彩的叠加,有空间感。

 

色彩叠加特点二:混合的质感 

图片

搭配混合模式的运用,营造一种空间感,给页面形成不一样的质感,通过明亮、色相形成一种空间感、层次感、通透,形成不一样的感觉。

 

混合质感图标中的运用

图片

邻近色色彩搭配作为背景,搭配简单的图形和色彩混合和不透明度运用,整个图形给人一种多彩、通透的视觉感受。

 

色彩叠加特点三:简单的几何图形 

图片通过简单的几何图形,主要是圆形、正方形、三角形等;加上混合模式的质感,给人一种高级感。加上透明度、叠加的光影,简单的几何图形背景呈现出空间感。图片上通过运用一个单色渐变,搭配方形的重复色彩叠加,给我的视觉感受是有层次的、立体的空间感。

图片

如图所示,饱和度高的背景搭配几何图形的运用,再运用颜色不透明的渐变,加上形状的重复和变化,使得这个设计给人通透、高级的视觉感受。
 

几何图形在海报中的运用

图片

很多变化丰富的设计都是通过简单的几何图形处理的,简单的几何图形也可以作为设计的抓手,在暗色背景上,通过几何图形的放大,搭配时尚的混合渐变,这样的效果很有科技感、洋气。图片
明亮的色彩搭配块面感的几何图形,这样的设计手法是不是很简单。

 

色彩叠加在APP上的运用 

图片

这样的几何图形我们在设计网站上经常可以看到,通过重复几何图形的组合加上混合模式的叠加,在设计上别具一格。同时让我们的设计多一种表现手法也增加我们的行业竞争力。

图片

通过邻近色/互补色搭配,运用几何图形作为背景装饰,这样的配色与布局会让设计很出彩,并且活泼舒适平和。这样的设计对色彩的搭配要求较高,我们可以通过配色网站进行多种组合搭配练习。图片
示例是菜鸟的首页,在 banner 入口它运用了色彩叠加的设计手法,同时金刚区的图标也是运用了色彩叠加的样式,整体给人一种年轻、时尚的感受。图片色彩叠加还可以运用在引导页、闪屏页面。通过叠加、柔和的过渡,整体呈现的视觉效果还是很时尚、符合主流的设计趋势。

 

色彩叠加在icon上的运用 

图片

明亮的颜色搭配混合模式和不透明度,出现出另外一种效果。

图片

图片

色彩叠加运用在icon上居多,饱和度高的色彩加上不透明度的叠加,整体的视觉效果都偏年轻、时尚,如果你的产品是面向年轻的用户,这样的设计手法你可以考虑运用上哦!图片
这个 app 中,金刚区位置上采用了色彩叠加的视觉手法,通过简单的几何图形,搭配混合模式,使整个页面具有全新的视觉感受,传递的是一种年轻时尚感。

 

色彩叠加在品牌上的运用 

图片

Apple 的今年官方宣传采用简单的正方形搭配明亮的色彩,加上不透明度、混合模式的运用,达到不一样的视觉效果。图片google 家的品牌升级,我们也看到了最新的趋势,运用 google 经典的颜色,搭配混合模式的渐变,同时具有品牌识别性。

 

色彩叠加-设计小教程 

图片

1.选择深色的颜色(#0A00BC),画一个圆角,填充蓝色渐变背景。

图片

2.画一个圆,填充红色的渐变,模式选择提亮的效果,剪贴蒙板在圆角背景上。

图片

图片

3.画第二个大圆,填充红色的渐变,模式选择提亮,透明度调到70%,剪贴蒙板在圆角背景上。

图片

4.画第三个圆,填充红色-黄色的渐变,模式选择正常,透明度调到85%,剪贴蒙板在圆角背景上

图片

5.画第四个圆,填充蓝色的渐变,模式选择提亮,透明度调到90%(可以自己试着调整),剪贴蒙板在圆角背景上。图片6.我们看到示例图交叉处是黄色渐变,把第三个和四个圆进行复制,选择交集,生成一个交叉的图形,把这个交叉的图形改为黄色渐变,模式改为加暗。图片

7.最后一步,右下角的高亮,通过蓝色径向渐变,调整到我们满意的效果即可,模式选择变亮,透明度90%。

图片

8.加上文字效果,这个图标就完成了,是不是很简单,通过不同模式的叠加,出现不同的效果,你也快点试一下吧!图片
 

最后 

图片

色彩叠加这种设计手法经常出现在海报/icon。包括 apple 在品牌宣传上也运用了这种视觉手法,重复运用简单的几何图形,加上混合模式的叠加,构成页面色彩空间感、通透;视觉感受上也有冲击力。我们做设计的也知道往往具有高级感的设计就是通过简单的几何图形加上色彩的混合渐变,也会让我们的设计具有层次感、简约。

 

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》苹果Google都在用的设计趋势,简直太绚丽了!

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

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

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

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


UI&UE实用方法论 | 做设计为什么需要“对比” :「冯·雷斯托夫效应」

seo达人


以前我看罗振宇的一个节目,听他谈过一个个人观点,具体原话我记不清了,但大概意思差不多是:得到APP里有一个活动或者功能特别重要的时候,他会要求设计师把入口做得足够特别,格格不入或者丑一些都没关系,但要保证用户一眼就可以看到它,并且产生足够的好奇心和想去点击的欲望。

罗振宇在这里用到的设计手法就是“对比”,而这种手法背后的理论支撑,就是我们今天要探讨的—— 冯·雷斯托夫效应(Von Restorff Effect)。

 

一、冯·雷斯托夫效应及其衍生

1933年,德国医生海德维希·冯·雷斯托夫(Hedwig von Restorff)进行了一系列记忆研究实验,通过多组、多次的对比实验发现了一个人类记忆规律:在一组物品中,人们总是很容易关注记住某个最特别的东西。比如说一组物品,用聚光灯照射其中一个,那么相比其他未被照射的物品,人们会更容易注意并记住它。

也就是说该实验发现并证明了:越特别的事物,越容易抢夺人们的注意力,并形成记忆点。这种人类行为、记忆现象后来以实验者的名字被命名为了「冯·雷斯托夫效应」。「冯·雷斯托夫效应」实际是隶属于人类行为学、心理学方面的研究结果,历史上过了许久才慢慢地被运用于美学设计中来。

从该效应被正式确立命名之后,基于它,后面还有许多科研学者对这种行为、记忆现象展开了更深入的研究,剖析了「冯·雷斯托夫效应」的优缺点,并衍生出了许多其他的理论和学术说。

我个人认为其中比较重要,且对设计同行们有较大意义的两个是:

  1. 独特性可以让内容被人更轻易地关注和记住,但同时会攫取人们的注意力,从而降低人们对项目中其他内容的关注度。因此构建特殊性,就要承担同时会削弱人们对项目整体记忆的风险;
  2. 越突出、越新颖、越令人惊讶、越独特的刺激,越能增强「冯·雷斯托夫效应」的作用程度(1978·Taylor & Fiske 研究结论)。

我认为这两个衍生结论对设计人员最有意义的原因是,它们分别对应了 Material Design “一个页面只专注一件事情” 的设计原则 和 罗宾·威廉姆斯书中所说 “要对比就对比得足够夸张” 的观点。

我知道许多的产品设计者总是希望自己页面上的每一个功能都被用户看到,但你必须学会划分优先级,请把「冯·雷斯托夫效应」作用在真正重要且必须的事情上。

 

二、到底对设计有什么作用

从前面我的反复提及可以看出,「冯·雷斯托夫效应」会影响到人们的注意力记忆两个方面。拆解了这两点,就比较容易理解应该如何将这个设计理论运用在项目之中了。

 

作用一:对注意力的影响作用  

开头我提到的罗振宇的观点中,他就是利用了「冯·雷斯托夫效应」对注意力的影响作用。

其实这一手法在UI设计中经常被使用,不论出于商业价值考虑还是功能考虑,设计师们总是知道用视觉差异来吸引用户的注意力。上案例:

我们看到,得到和汽车之家APP在常规的排版设计中遵循统一、和谐的视觉语言,压低了次要功能的视觉层级,再通过脱离常规视觉语言的设计,抓取用户注意力,吸引用户关注,从而助力营销和商业目标。

不光是商业设计中有很多案例,我们几乎每天都接触到的Badge(徽标)控件,实际也是为了构建视觉上的独特性,引起用户的视觉关注。

所以在设计中,和谐、统一固然是基本,但正是因为有序,才让设计师能够发挥“无序”的功效和威力。

在《写给大家看的设计书》中,罗宾·威廉姆斯总结了许多构建对比的方式,比如 大小、字体、粗细、冷暖色、平滑与粗糙、水平与垂直、松与紧等等。这些方法均可以运用到我们自己的设计中去。

 

作用二:对记忆力的影响作用  

你会记住生命中最极致快乐和最极致痛苦的时刻,因为它比起其他的日子足够特别,这也是「冯·雷斯托夫效应」作祟。别忘了「冯·雷斯托夫效应」最开始本就是起源于行为和心理学。

让特殊的日子被纪念,百度Doodle不就是做着这样有趣并且有益于文化传播的事吗?

Doodle的出现,已经是将「冯·雷斯托夫效应」作用于产品温度和连接用户情感的层面上了,传递了品牌调性与理念。

这一点也可以用于打造自身产品,不论是从功能、交互还是视觉,构建产品的差异,从同质化严重的互联网现状中脱颖出来,就可以让用户深刻地记住你。例如马云的双十一,例如为了躲开马云而发展出来的垂直电商…

 

三、反向运用案例

反例一:太多的突出=没突出  

前面我提到一句“正是因为有序,才让设计师能够发挥‘无序’的功效和威力”,所以越有序的内容中出现一个越不和谐的元素,才能把「冯·雷斯托夫效应」发挥得越极致。

看一个案例:以下两个页面,哪一个你更能关注到标签栏中的“摇现金”功能?毋庸置疑的答案是页面2。

因为页面1中金刚区和功能瓷片区抢走了用户非常多的视觉关注,图标的用色在饱和度和对比度上也比较一致,我很难关注到标签栏中的活动。而页面2中“摇现金”图标的画风、色彩饱和度都与其他元素不一致,我虽然眼睛盯着金刚区,但我的余光一直在被标签栏疯狂拉扯。

当然我这里只是为了论证太多的突出=没突出的论点,拼多多也许有自己的商业和功能考量。该案例在单一论点中进行描述,只是想告诉大家:要发挥「冯·雷斯托夫效应」的作用,前提就是先构建“平庸的和谐”。不要想着每一个元素和功能都要突出,都突出=都不突出。

 

反例二:本末倒置  

受“危险按钮”的陶冶,曾经设计师们都喜欢给负向情绪操作非常高的视觉层级。例如退出登录。

实际上设计者是希望告知用户此操作危险,视觉层面却仿佛在疯狂地暗示用户“看我!然后点我”。虽然近些年在移动端,这样的矛盾设计已经越来越少了。但这个“危险按钮”也真实地困惑了我很久…与其告诉用户“这个操作很难危险”,为何不直接让用户尽量忽视掉这个操作呢…

我至今没有探索和查找到相关文献来解释为何“危险按钮”视觉层级这么高。但AntDesigng规定“危险按钮”一般还需要进行二次确认操作,些许解开了一点我的担心。

但单从「冯·雷斯托夫效应」来看,这样的设计确实是有些本末倒置。在日常的设计当中,也应该极力避免。

 

原文地址:UCD耍家(公众号)

作者:Howiet


转载请注明:学UI网》UI&UE实用方法论 | 做设计为什么需要“对比” :「冯·雷斯托夫效应」

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

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

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

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


B 类产品设计细节:文本缩略

seo达人


缩略方式

末端截断

  • 内容超过列宽时超出的用‘…’省略;
  • 标签内文案超出由‘…’省略。
  • 长文本截断的通用模式。

 

中间截断

  • 设置开头、末端保留的字符数,在末端保留字符前显示 ‘…’;
  • 开头保留字符数根据列宽以「显示尽量多的字符」的原则来确定(极端情况为开头不保留字符,即为「开头截断」;若空间十分有限,则尽量多地保留末端字符)。
  • 中间截断在文本的开头相同、末尾字符对区别字段起到关键作用时使用。

 

场景举例 1:实例名

包括任务名、文件名、表名、系统名等等。

典型案例:完整字段如下:

company_sales_record_20150116

company_sales_record_20150117

缩略结果:

 

场景举例 2:系列名称

开头统一的系列长名称,通过后半部分来区分的字段。

典型案例:阿里集团的 BU 完整名称如下:

口碑-本地生活事业部-北方大区-北方运营

口碑-本地生活事业部-七星大区-东南运营

缩略结果:

 

设计要点

  • 重要数字、时间不建议缩略。
  • 名称列缩略可结合表头的拖拉控制显示与缩略,内容完全显示时‘…’消失。
  • 单行文本省略使用 tooltip,多行文本省略使用展开与收起。

  • 描述‘…’支持 hover,标签整个支持 hover。
  • 标签数量多时建议通过折行全部展示,不建议通过‘…’隐藏后面的标签。

  • tooltip 不承载复杂文本和操作。
  • 根据使用场景为字段设置合理的字数上限和展示空间,避免隐藏过多的内容。
  • tooltip 的尺寸不应过大,建议最大尺寸不超过长 320px、宽 160px。

 

原文地址:Ant_Design(站酷)

作者: 林叶

转载请注明:学UI网》B 类产品设计细节:文本缩略

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

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

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

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


3C Design-618项目复盘总结家电篇

seo达人



PART 1 业务诉求-焕新你的生活

用家电创造生活价值,把对的家电与消费者的核心需求联系在一起。针对于我们全新的品牌主张与不断年轻化的核心购买用户,在整个画面的视觉层面上表达出我们的设计语言:生活焕新,家庭,时尚有态度。

 

PART 2 项目目标

本次618项目在营销层面上,希望借助618购物狂欢这一节点,挖掘各圈层用户对家电618的期待,激活焕新需求,激发用户兴趣,刺激下单的目的。

在设计层面上,首先实现营销方向的焕新、高端及年轻化。在营销方面侧重多元化创新营销助力焕新生活和跨界营销合作线。其次在集团模板的基础上做贴合家电品类的差异化设计,第三通过场景化影响用户心智,做用户看得懂的设计。

图片

 

PART 3 视觉概念

消费者人群-Z世代

Z世代的审美从小受到信息浪潮的洗礼,“颜值即正义”他们更加追求个人幸福感,拥有鲜明的个性,勇于表达自己的观点,从这些性格特征映射到消费特征,所以他们更加喜欢有文化、有故事、有性格的品牌,非常愿意为品牌买单、为兴趣买单,追求及时行乐;个性化、多元化成为他们的主要人设标签;

图片

 

概念脑暴

为了进一步提升家电品牌焕新理念在Z世代中的好感度与传播度,根据不同的家电用户群体(中高端用户、家装用户、女性用户、男性用户、年轻粉丝用户),代入主人公居家场景切换视频的设计理念,通过分析群体共性 场景故事包装、动效印象加成让互动变的更有趣、更有温度。

图片

 

PART 4 系列视觉展示

图片

 

PART 5 设计过程

主会场

家电618主会场针对于我们Z世代的用户群体,创造了一个年轻化的人物形象,此形象也是搭在我们整体视觉创意的心智锚点;视觉创意设定了客厅,厨房,卫生间,三大日常展现家电商品家居场景,结合我们的人物形象,通过三段分镜动效的表现形式,希望能够给我们的用户带来沉浸式的环境共鸣,从而给用户带来全新的购物体验。

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

分会场——IP联盟

IP会场是通过小鸡彩虹为载体,号召百大家电萌物联合传播,在大促期间建立高颜值萌物的活动心智,视觉上打造萌趣味性风格。通过站内外联动传播,整体视觉风格统一。促成IP联盟活动的前期流量铺垫与品牌心智的认知。整体视觉创意采用了IP形象彩虹小鸡,整个视觉结合618视觉模板组成引导视觉中心点,萌趣小鸡的形象吸引视觉,以此激发(女性、颜值爱好者、Z时代)三类人群的关注,渗透萌物圈,表达出家电也可以很萌的态度。

图片

图片

 

分会场——星推官

以集团主风格为核心,保证整体品牌一致性,以明星作为流量会场,背景星星设计元素,渐变质感呈现,突出星推官主题。此次活动初期分析了去年1.0的不足,进行视觉上的优化,整体综艺视觉感更强,页面重点模块进行了交互上的创新,再用户学习零成本的情况下,体验感得到了提升。

图片

 

分会场——极速焕新家

焕新家是家电第一次与综艺合作的项目,由京东家电独家冠名与东方卫视的强强合作,挖掘各圈层用户对家电618的期待,激活焕新你的生活需求。焕新家的活动视觉不同于618其他的会场,是剪辑整合了综艺的宣传片视频,与综艺节目高度契合,传递用户心智。

图片

 

PART 6 项目总结

家电今年618整体的视觉设计相较之前,技术上应用了当前一些比较流行的软件工具与设计技法,从用户圈层维度划分,打造了5大全方位覆盖家电用户人群的会场。

从故事场景代入,再到情感化心智打造,设计表现力有过之而无不及,通过多场景,多维度,多样式的玩法,引发用户参与刺激抢购共鸣,最终达成618“焕新你的生活”的创意心智情感表达,后续我们会从大促的体系化建设与模块持续的AB测试入手,通过数据驱动设计,不断深挖家电用户对于我们整个618活动的价值体验。

图片

 

原文地址:京东设计中心JDC(公众号)

作者:吴晓菊 等

转载请注明:学UI网》3C Design-618项目复盘总结家电篇

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

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

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

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


日历

链接

个人资料

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

存档