首页

B端产品-BI分析工具

lanlanwork


(本作品所有数据均已脱敏,非真实数据,知识产权属快手所有,未经许可不得转载)

(本作品所有数据均已脱敏,非真实数据,知识产权属快手所有,未经许可不得转载)

 

原文地址:站酷
作者:三鱼先生

转载请注明:学UI网》B端产品-BI分析工具

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

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

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

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

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


8个AI技能给你的LOGO加BUFF!

lanlanwork


 

图片

像这样的梦幻色彩的 LOGO 是怎么做出来的?其实非常非常简单,它的制作方法,没有任何感情全靠 AI 技能。能够熟练掌握 AI 工具对我们做 LOGO 的效率也会有大步的提升。今天我们就来分析一下如何借助 AI 的工具技能来设计 LOGO。

 

图片

我们都知道 PS 的图层混合模式有使当前图层图像的色彩与下层图像的色彩进行混合的效果。很多同学不知道其实 AI 也有这个功能。在(窗口——透明度)里面就可以找到。

图片

那现在我们就来分析一下这个 LOGO 是如何使用渐变的混合模式完成的。

首先仔细观察这个 LOGO 由哪些元素组成。是由几个小房子形状的几何图形,以不同透明度的渐变色彩叠压组成。其中的重点是色块叠压处的色彩是混合而成。

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析AI技法 

 

第一步:先绘制出一个小房子形状,使用倾斜工具做出透视效果。

图片

第二步:打开效果——扭曲和变换——变换,调整数值。

图片

到这里图形就绘制完了,可以开始上色了。

第三步:先把图形取消编组,给图形填充渐变色后调整透明度为 50%。将混合模式调整为正片叠底。(下图展示的导出的渐变色图片失真了,实际上是很丝滑的颜色)

图片

第四步:因为红色与蓝色叠加的关系,导致图形的中间有些暗,我们可以给图形添加一个高光。绘制一个圆形执行高斯模糊,将混合模式改为滤色,调整透明度让高光更通透。

图片

最后,再加上排版就完成啦。

图片

看到这里是不是就明白了梦幻色彩是怎么做出来的了。其实就是不同颜色的渐变色块的混合叠加。再按照物体的身体结构叠加上高光和阴影就可以了。是不是很简单。

 

 

 

图片

图片

第一步:将图形分成块面。注意需要按照动物的生长结构去划分 ,块面的大小不要相差太大,不然会形成特别空的面。

图片

第二步:将每个块面填充渐变色,渐变色需要设置为混合模式。具体使用哪种混合模式需要按照混合模式的规律进行调整。块面与块面相交处还需要注意衔接自然,可以通过调整渐变的角度和透明度的方式进行过渡。

图片

第三步:给色块添加多彩渐变形成亮面和高光。如果一层不够就多添加几层,一直到色彩多变又整体协调。

图片

第四步:给色块添加阴影和暗面,让图形的色彩更通透。注意色彩混合模式需要调整,具体选择哪个模式由底色和新色块叠加后的效果决定。可以多个尝试模式对比,最终选择一个更合适的模式。

图片

最后,把比较空的面填充一些细节,既填补了的空间又有一种动物毛发的感觉。再画出眼睛就完成啦。

图片

说起来不难,做的时候还是有点麻烦的,几乎每个色块都叠加了五六层渐变。最后看一下渐变叠加的动图,可能会更直观一些。

图片

 

 

图片

有时候做完图形却觉得缺少细节,这时候可以通过渐变效果塑造出 LOGO 的层次感。通过渐变色彩明暗的变化和角度的调整,可以将图形刻画出立体感,也可以通过多层渐变叠加的方式,刻画出图形的高光和阴影。

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法 

 

接下来我们来解析一下这个 LOGO 是怎么做出来的。看上去是一靶心一样,但是其实非常简单,只需要将其中四分之一做出来旋转复制一圈就可以了。

图片

图片

首先绘制出四个圆形和十字交叉线,这样就切出两个圆形的基本形。但是观察图形是有尖角的。所以再延着竖线绘制出几个圆形,特别需要注意的是线与线之间必须相切,这样就可以切出尖角了。

图片

最后再旋转复制一圈就可以了。

图片

接下来我们再看一下这个案例,相对于上面那个会更复杂一点,除了普通渐变还使用渐变刻画出高光和阴影效果。

图片

最后将背景改为黑色效果更突出,再加上排版就完成了。

 

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

首先绘制一个三角形,拉出圆角。再画一个圆形与三角形居中对齐。

图片

打开(窗口—效果—变形—下孤形)这样就得到了一个有弧度的边。然后扩展图形我们将上面半截裁掉,只保留下面的图形。

图片

以中间的圆形为轴心,将得到的图形旋转 120 度复制一圈。调整位置后合并图形,这样就得到了一个带有弧度的三角形。

图片

在得到的三角形上绘制一条曲线,分割出一个图形,将得到的图形旋转 120 度复制三份。再使用形状生成器进行剪切合并。这样基础图形就完成了。

[优化输出图像]

 

接下来为三个图形分别填充不同的渐变色。再绘制出阴影和高光增加层次感。

图片

 

绘制阴影,将阴影填充黑色,调整透明度为 50%。绘制好一个之后旋转复制 2 份就可以了。

[优化输出图像]

 

高光填充白色到透明的渐变,混合模式调整为叠加。同样也只需绘制一份,之后复制即可。

[优化输出图像]

这样就完成了,普通的图形加上渐变色后变得更有层次感了。

图片

 

 

 

图片

AI2022 对 3D 功能进行了升级,可以轻松地将 3D 效果(例如旋转、绕转、凸出、光照和阴影)应用到矢量图稿 ,接下来我们就来解析如何使用 3D 效果设计出更有立体感的 LOGO。

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

这个图形虽然是喷泉的形态,但是拨开多余的线条我们可以清楚的看出基础形其实是一个甜甜圈。甜甜圈的横切面是一个圆形,由此可以得出第一步需要先画一个圆形。再使用 3D 绕转功能即可得到甜甜圈了。

图片

执行 3D 绕转后调整数值 ,注意调整位移的数值来调整厚度。当然位移的数值由基础图形的大小决定。

 

图片

之后需要绘制出一排黑白相间的线条,并新建为符号。PS:把所有线条选中,直接拖入符号面板就可以新建符号了。新建为符号后就可以作为贴图使用了。

图片

继续打开 3D 绕转的面板,点击贴图按钮,在符号处选择刚才新建的符号,为每一个面贴图,选完贴图以后需要勾选(缩放以合适)和(三维模型不可见),这样线条才能完全覆盖圆环。

图片

 

 

这样 3D 绕转加贴图形就完了,然后再将图形扩展。扩展后就可以随意调整线条了。将线条延长并且调整长度,做出参差不齐的效果模仿水流的状态,然后将延长的图形拉出圆角就可以了。

图片

最后调整一下细节,再给图形加上排版就完成了

图片

图片

上一个案例使用了 3D 绕转功能,接下来这个案例就使用了 3D(经典)里面的另一个功能,3D——凸出和斜角。

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析AI技法

首先打出字母,当然做这种类型的 LOGO 时候对字母的选择有一定的限制 。需要选择两个字母可以连接不突兀的才行。比如这两个 E 就可以完全的链接在一起。打好字母后将 E 字母适当变形,再复制一组线条,作为中间的连接线。将三组图形分别新建为符号(前面讲解过怎么新建符号,这里就不重复了)。

图片

接下来绘制路径,作为横切面。然后打开效果——3D(经典)——凸出和斜角。打开预览,调整数值和角度。

图片

图片

再打开贴图,选择刚才新建的符号,把图形的每个面贴上对应的符号。可以先选择缩放以适合,再根据实际预览效果进行调整至最佳效果。

图片

最后将得到的图形进行扩展,取消编组后,为图形填充不同颜色增强图形的立体感。

图片

两个案例看下来,是不是已经掌握了 3D 工具的使用方法了。那么接下来我们举一反三,使用 3D 功能来做一个立体感的 LOGO。

 

 

图片

图片

第一步:肯定是先绘制出横切面,用线条绘制出字母 B 的轮廓,注意线条不需要闭合。

图片

 

第二步绘制黑白相间的条纹线条,拖入符号面板新建为符号备用。

 

第三步选中 B 字母的横切面,打开效果——3D(经典)——凸出和斜角。调整凸出厚度的数值还增加图形的立体厚度。调整角度让图形的视角更舒适。

图片

打开贴图选择刚才新建的条纹符号。在表面那里选择不同的面,都贴上条纹,选择缩放以适合。

图片

最后再在相交处绘制阴影增强立体感。这样就完成啦,新技能 get~

 

 

图片

第一次见这样的立体感 LOGO,还以为是 3D 软件做出来的。后来发现 AI 一样也可以完成。只需要用简单的网格就可以绘制出立体的效果。

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

 

第一步绘制出菱形网格。网格的绘制方法也非常简单,可以用线条建立,先画出一排竖线,然后旋转 120 度并复制,再重复复制就可以了。也可以使用等边三角形连续复制进行搭建。

图片

第二步使用形状生成器延着网格的方向合并图形,形成立体感的造型。两个格子组成一个正方形,再用一个一个的正方形组成想要的几何图形。

源图像

 

 

第三步将生成的图形提取出来。

图片

 

第四步为图形上色。上色的时候需要设定一个光源,根据光打过来的方向,设定每个面的颜色。通过每个方向的块面的深浅变化,强化图形的立体感。

图片

最后再加上排版就完成了,是不是超级简单。

图片

那么举一反三,我们也来尝试用 2.5D 网格绘制做一个 LOGO,第一步还是按照上面的方法绘制出 2.5D 网格

 

图片

图片

 

第二步延着网格的角度绘制出长方形,并拉出圆角。因为将字母几何化后,字母的形态是有两条竖边的,所以绘制出四个长方形为一组,方便后面合并修剪出字母结构。

Source image

 

 

第三步,按照字母的结构,先绘制出分割线条,注意线条与线条之间需要相切。因为之后需要使用形状生成器工具进行修剪。

Source image

 

 

第四步,使用形状生成器工具合并和剪切出字母的结构出来。

图片

第五步,将生成的字母,复制一份进行翻转。然后调整色彩,将字母做出立体感。

源图像

 

是不是很简单。除了这个 LOGO,还有很多种类型的 LOGO,都可以借助这样的菱形网格来完成。快去尝试吧!

图片

图片

AI2022 新增了一个重复功能。尤其是径向重复,简直太好用了。学会这个功能分分钟做出一个 LOGO。接下来我们就尝试使用重复工具做出下面这个 LOGO。

 

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

 

先绘制一个圆形一半,将描边模式改为尖角。复制出四个。

图片

打开对象——重复——径向。

图片

拖动按钮即可调整数量和距离。左边的按钮可以调整重复数量,中间的圆形按钮可以调整元素的距离,中间的另一个按钮可以调整重复的范围。另外双击进入隔离模式可以调整单元素的方向和形态,其它的元素也会随着单元素的变化产生实时变化。

源图像

 

 

 

得到想要的图形后,将其扩展,使用形状生成器进行修剪。最后再给图形填充颜色就完成了。

[优化输出图像]

 

 

最后配色再加上简单的排版就可以了!

图片

 

 

重复工具真的太好用了,尤其在做重复构成 LOGO 时会提供很大的便利。下面我们就尝试用这种方法来设计一个 LOGO。单元元素图形直接使用英文字母 O。

 

首先打出一个字母 O,我们将其进行简单变形。

图片

图片

打开对象——重复——径向,调整数量和单元素的角度,调整的过程中会得到很多意料之外的好看的重复图形。

图片

图片

 

 

最后再调整细节加上排版就是一个完整的 LOGO 了!

图片

图片

是不是有很多同学好奇像这样复杂又有规律的线条图形是怎么做出来的,其实也是非常简单。接下来我们就来分析一下如何简单快速地做出复杂的线条渐变图形。

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

我们先看这个简单一点的线条渐变图形应该如何做。首先还是先分析解构图形,将它旋转 45 度后,将线条折分开,是由细、中、粗三种粗细不同的线条组合而成一个圆形。

图片

 

 

那么我们就先画出三种粗细不等的线条。

图片

再画出三个部分的外轮廓。

图片

将三个部分分别与刚才绘制的条纹进行剪切。使用形状生成器,按住 alt 健减掉不需要的部分即可。

图片

将得到的三个图形拼合在一起后,合并所有图形,再在相交处拉出圆角,增加细节同时也让图形之间更有整体感。

图片

最后将图形倾斜 45 度让图形更有张力,再加上排版就完成了。

图片

 

看完这个案例,是不是对线条在 LOGO 图形中的应用有了一定的认识,我们再来学习下面这种更复杂一些的应该如何做。

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法 

 

首先将图形进拆解,可以看出这个图形看似复杂,其实是由两个线条组成的圆形重复构成。重复构成的图形我们只需要做出单元元素即可,那我们就先把单元元素提取出来。

图片

 

从提取的单元元素可以看出图形是由粗到细变化的线条组成的。从线条变化的角度是左右对称的。所以我们先绘制出对称变化的线条。

图片

 

绘制两个长条方形,将下面一根的一端转为尖角。使用混合工具混合出 6 条渐变的线条。再将图形整体复制一份进行垂直翻转。

图片

 

绘制一个圆形与刚才得到的图形进行剪切。使用形状生成器工具,按住 alt 键将不需要的部分修剪掉即可。

图片

 

将线条的右侧全部改为尖角,选中两个点——右击——平均——两者兼有,就可以转成尖角了。

图片

 

 

绘制一个小圆形,居中对齐。将图形与小圆形进行切割,将切割出的线条水平翻转。

图片

 

最后将得到的图形旋转 90 度,向下复制一份就完成了。

图片

 

图片

AI 的混合工具可以将两个形状或者颜色创建平滑的过渡,步数越多过渡也就过平滑。快捷健是 ctrl+alt+b。

 

图片

图片

首先我们来分解一下这个 LOGO 的图形,先抛开色彩,只看图形。

图片

我们可以看出这个图形的基础图形其实由两个三角形的混合而成。还需要注意的是,三角形的顶点需要设置为圆角。

图片

接下来我们将两个三角绘制出来,注意线条的粗细并且选择圆角的形式。

图片

将两个图形进行混合,注意按顺时针方向进行混合,图形会更饱满些。

是不是特别简单,那么快去举一反三,别光让眼睛学会了,也照顾照顾“手”,让它也学学。

最后看一下今天的案例汇总!

图片

好了,今天教程就到这里啦,我们下期见!

 

原文地址:胡晓波工作室(公众号)

作者:yoyo

转载请注明:学UI网》8个AI技能给你的LOGO加BUFF

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

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

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

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

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


10个优秀的UI/UX设计技巧

lanlanwork


一、利用手势辅助实现快捷操作

利用手势交互辅助隐藏式功能操作,可以在不改变当前结构的基础上实现快捷操作,带给用户更加便捷化的体验。

夸克 APP 在访问了多层级页面之后,如果想要快速回到浏览器主页,点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动,可以快速激活返回主页的操作,手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作,提高了用户对于产品的使用体验。

图片

图片

    

二、点赞设计的情感化探索

点赞在阅读类场景中随处可见,用于表达用户对内容的认可度而产生的情感共鸣,通过点赞给予赞同。点赞设计的创新已逐步在探索,通过更加情感化的设计表达提高用户体验,借助手势的变化呈现出更有趣味性的点赞设计。

今日头条 APP 单击点赞图标会随机性弹出表情化符号,多次点击会持续弹出更为丰富密集的表情符号,长按则会像模拟持续发射的特效,伴随着音效和震动带来“视听触”等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验,也是用户释放阅读压力的一种情感共鸣。

图片 
 

三、情感化的点赞文案设计

除了从点赞视觉感官层面进行设计探索以外,众多产品也在文案提示设计上面进行情感化探索。

AcFun APP 在对话题等内容点赞时,会弹出温馨的文案提示,每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度,带给用户更好的社交互动体验。

图片 
 
 

四、突破常规的模式切换设计

设计都在探索差异化的感官表达,如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面,设计师都在尝试更有创新的表达,带给用户不一样的使用体验。

Wonder APP 在模式切换上做出了一个新颖的设计解决方案,通过环形卡片设计进行模式切换,可以单击和滑动进行切换。动态的卡通形象增加了感官体验,流畅的卡片切换也带来了不错的操作体验,是一个在布局层、视觉感官层、互动层等方面的不错探索。

图片

[优化输出图像]

 

 

五、特色的签到展示设计

签到设计对于大家来说并不陌生,提高用户签到的参与度是大家都在不断思考和探索的方向。

AcFun APP 将签到设计成日历展示形式,点击签到之后弹出,配合日历运势的概念来设计,提高用户的签到兴趣。内容却不是正式的日历运势相关内容,配合趣味化的文案设计,让用户会心一笑。视觉感和情感化文案设计的融入,提高了签到设计的感官体验,进而提高用户的参与度。

图片 
 

六、自定义字号提高阅读体验

通过公众号等自媒体进行阅读已经成为大家的习惯,不同公众号编辑内容都会有所不同,字体大小和行间距等没有特定的规范。官方虽然会有默认设置,但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验,自定义的阅读调整至关重要。

在公众号阅读文章时,可以通过右上角的功能入口进入“调整字体”。用户可以根据自己的阅读习惯设置字体大小,在标准和自定义大小之间切换,提高用户的阅读体验。

图片 
 

七、自选色实现更灵活的个性换肤

个性化的皮肤主题在众多产品中已经运用普遍,当用户体量增加之后,个性化的设置才能满足不同用户的体验需求。

酷我音乐 APP 在个性换肤模块中,除了设置多个主题皮肤供选择以外,用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格,也可以通过色环自己调节任意颜色,满足不同用户对于感官体验的需求。

图片 
 

八、自定义图满足用户的创作欲

对于一些追寻个性化较强的用户,预装的自定义设计已经无法满足他们的体验需求,激发用户创作欲的设计迎面而来。

酷我音乐 APP 在个性换肤模块中,用户可以通过“自定义图”实现更加个性化的皮肤。用户可以选择任意拍摄的照片,然后通过透明度和模糊度来调节照片效果,满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择,用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲,才能带给用户更加人性化的使用体验。

图片 
 

九、关联功能叠加设计提高使用率

为了提高功能的曝光度,直接展示在用户的视野中是很多设计师的处理形式,但是却增加了感官层面的视觉负担。

幸识 APP 把关联功能进行合并式的叠加设计,不仅对视觉进行降噪,由于属于关联性的操作,用户更容易通过功能联想进行使用。当用户点击观看“时间戳”时,底部功能会被替换为“发起”,发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时,不一定选择各自展示,相互叠加或者切换式的交互设计也是不错的解决方案。

图片 
 

十、趣味性爆满的点赞设计

点赞是用户情绪化表达的关键,表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户,更加趣味夸张的设计在逐步被探索。

微博 APP 针对点赞设计单击时,出现表情化的符号弹出,持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴,满足用户释放情绪的最大化需求。

图片

源图像

 

小结

在用户使用体验和感官体验层面探索了这些优秀的案例,希望可以抛砖引玉,带给大家更多启发。发现设计背后的思路,总结设计表达的经验,运用优秀案例的技巧,提高我们的设计解决能力。

以上总结仅代表个人观点,如有不足欢迎大家留言补充,我们互相进步。

 
原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》10个优秀的UI/UX设计技巧

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

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

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

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

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


如何正确使用字体的重要性

lanlanwork


 

图片

 

 

我们不妨换个手写的文艺字体,通过对比,这时会发现适合的字体可以恰当表达出一张图片的风格。

源图像源图像

 

 

再拍一张照片,夜晚寂静的高架桥,符合氛围的主题、加上好的排版方式本是一件非常浪漫的事情,但如果字体不在一个频道里,就会破坏整个主题的氛围。

 

图片

我们不妨换个字体试试,通过对比,能看出字体在设计场景时的重要性。

源图像

 

 

 

 

一串文字,为什么通过排版设计出来还是不好看了,因为字体是一个非常细致的感受,当改变了字体形态之后,那种暗恋的感觉好像又回到了当初在校园同桌的她。

图片

图片

 

我们用英雄两个字来示例如何分析字形判断。

1、字形内部的空间和边缘体饰都偏版直方正,所以缺少个性,无法给人独特性的氛围表达,适合叙述性场景。

图片

 

2、字形内部宽厚,边缘体饰却带有微微尖角,上下故意的压扁,使着字体底盘很稳,给人一种力量和浑厚的感受。

图片

 

3、毛笔性字体,天生带有自由和挥洒豪气的特点,但是这类字体顿挫的边缘好像在告诉我们,它在克制自己的张力,适合做为主标题使用。

图片

 

 

4、同样的毛笔性字体,跟上一种就截然相反,它将字体的豪迈豪不隐藏的表现出来,能体现出一种情绪的特征化。

图片

 

在实际场景使用时,以下几种字体的使用就更能表达出恰当的字体在设计场景时是多么重要。

图片

 

 

最后再带来一个字体的实际案例

一个建筑放置于画面中间,两只手拖住物体,制造夸张对比的错视感。

图片

 

 

再将主题文案通过穿插的版式手法放置于物体周围,最后添加一些叙述信息填补版式的空缺,看起来排版没有太多问题,但仔细观察主体和场景的气质却没有被烘托起来。

图片

 

当我们改变字体的使用后,整体的气质立马显得庄严和宏伟,再通过对比我们发现,原来与好的设计之间,差距也只是一个字体的使用而已。

源图像

 

图片

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》如何正确使用字体的重要性

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

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

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

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

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


来了!解读2022年10种UI/UX设计趋势

lanlanwork


1.极简主义

越是领先的科技公司,你会发现,他们对简单大气、重点信息明确、精致的设计越有强烈的偏好。这种趋势逐年增多,覆盖范围也越来越广,品牌和各行各业的设计师也越来越多的偏好这种风格。

例如:英国金融科技公司Revolut

Meta(2021年10月28日,Facebook宣布,该平台的品牌将部分更名为“Meta”。)

Dribbble设计师:MoRas ✪ 的作品

小结:从心理学角度上说,极简主义也是在寻求一种安全感,纷杂的物品和内容生产者无时无刻都在绑架我们的眼睛,很容易让人沉沦其中,不能自拔。当越来越多的人开始明确自己的定位,明确这些购物和社交软件只是满足自己需求的一种工具,而拒绝做工具的奴隶。「觉醒」的人越多,极简主义的运用就会越来越普遍。

 

2.粗旷/粗野主义

粗旷主义包含强烈的轮廓、鲜明的对比色、大胆的排版和真实的生活摄影相结合。

去年我们还在说:“ 野蛮主义设计风格短期内应该不会深入到UI设计中去,更多的会在网站,或者杂志的设计运用此种设计思想。”

今年Spotify Wrapped(可以理解为国外的网易云年报)就给我们上了一课—野无止境。

贪吃蛇一样的形状配合各种高饱和颜色,穿插于各种界面和海报中,形成了巨大的视觉冲击,令人难以忘怀。

让我们来看看他们的设计:

 

3. 重回90年代

流行趋势总是轮回又轮回,但原因可能不是现在的人忽然意识到以前的回忆有多美好,而是当年的90后小孩成了行业的领头羊以后,将童年的美好回忆拿出来沉醉一番,找个机会释放内心的那份童真。

创意机构CPB London的设计总监June Frange将这波趋势称之为「年代怀旧」,短视频平台和明星效应的加持,以及使用者自发性的DIY内容,也使得它的影响力更加强大。

今年《王者荣耀》推出了两个新主题的游戏皮肤,其中一个以旧版西游记为原型打造的孙行者皮肤,一经上线在销售量上就远远超过了同时出现的安琪拉新皮肤。而原因却并不是皮肤的精美,因为从孙行者皮肤的精美程度而言,官方这一次就是出了一个“原皮”。

这样一个简单的皮肤,却让无数玩家纷纷掏钱买账,这就是怀旧的魅力。这种使用传统神话故事元素结合官方的创新设计,让无数玩家用一种全新的方式感受到了传统文化的魅力所在。

虽然我玩游戏不多,但是也半夜爬起来买了个孙猴子~

 

4.排版变得更生动有趣

10 年前,行业对排版比现在要严格得多,有明确的排版和字体使用规范。

不过现在,设计师们可以对标题和段落做任何想做的事情——完全取决于想象力。将字体与形状、照片和表情符号混合,在其上添加纹理,或者选择一种形式非常复杂的字体做装饰。

这种设计会产生一种有趣、引人注目的效果,但它也必须要美观和谐——我们仍需在设计时首先牢记:用户的舒适度永远是第一原则。

字体设计在2022年仍将占有一席之地,设计排版中融入夸张的、富有个性的字体,比如:同时拥有流畅的线条与锐利的棱角。

《鱿鱼游戏》的韩文片名标题,是由几何图形重新排列组合而成,挑战了抽象形状和文字之间的区别,借此突破字体必须易于阅读的局限,创作出具有表现力的形式。

Design Bridge London的高级设计师 Chris Algar认为:「  2022 年将是字体的重要一年」。

他预测:“我们将看到排版风格融入真正夸张的个性字体,在流畅的线条和锐利的棱角形状之间形成对比。”

Chris 认为,颜色和活力也将在 2022 年的排版趋势中发挥重要作用。

 

5.Glassmorphism 和玻璃元素

玻璃态已经无处不在——这是事实。有背景模糊、半透明物体,如卡片、水彩、玻璃球等等。从 Mac OS Big Sur 和 Windows 11 ,玻璃拟态已经存在了很长时间。

在去年,Glassmorphism(玻璃拟态)经过一整年的风靡也算站稳了脚跟,并未像新拟态风(Neumorphism)一样火速崛起又火速沉寂。越来越多的设计师将这种风格融入设计中去。

 

6.极光背景

不知大家是否可能还记得前一年的这个趋势——「模糊的彩色背景」。

它在2021变得非常流行,甚至有了一个专有名词——极光背景。

微妙、多彩、模糊的颜色看起来非常友好和有机——且更具视觉吸引力。这些飞溅和高斯模糊可以用作整个背景或置于一些重要的 UI 元素下。

 

7.全息/霓虹灯

这种网络全息/霓虹灯效果很适合虚拟现实和全息界面的时代。虚拟世界提供的新可能性激发了设计师的灵感。充满活力的、发光的颜色、抽象的圆形、全息图纹理是这一趋势的典型特征。

它也被广泛用于许多加密空间,以展示这些接口的未来性。

 

8.环保风

我们大多数人还是愿意选择环保的生活方式的,投射到设计中——可以将「生态外观」和感觉融入设计中。

越来越多的品牌在追逐这种「纸质感」的趋势——背景通常是灰色的,类似于可回收的纸板。排版风格极简。对比度很高。颜色非常克制,看起来稍显「暗淡」,这种风格包含现实生活中的摄影、纹理、和涂鸦。

 

9.粘土形态3D

3D 作为一种艺术风格正在变成设计趋势和大众流行

现在一种特殊的风格越来越受欢迎,3D最新的流行风格是粘土形态——类似于由粘土制成的对象(形状简单,由圆柱形/椭圆形组成,由内阴影和外阴影创造深度,但采用更「松软」的 3D呈现方式,通常与其他极简设计结合在一起。粘土3D有种可以按出一个坑的质感。

 

10. Metaverse

元宇宙(英语:Metaverse),又称形上宇宙,此一科技词汇由前缀“meta”(意思是超越)和词干“verse”(通过逆向构词法从“宇宙(universe)”得来)组成,可简称为MVS。这个词通常用来描述未来互联网虚拟环境的概念,于共享、持久的3D 虚拟空间组成一个可感知的虚拟宇宙,此合成环境包含对象、常驻用户与其交互关系,并存在于虚拟定义的时间中。旨在提供连接用户长时间登录和交互。广义上的元宇宙概念不仅指虚拟合成世界,还指整个互联网,也包括增强现实的范围。

Metaverse描述的是一种趋势:越来越多的技术和媒介,都在不停地缩短虚拟和现实的距离。

人类的大量活动和时间在往数字世界进行迁移。我们的社交活动、经济活动都是在数字世界(或者叫虚拟世界)里面,玩游戏也好,购物也好,社交也好,所以元宇宙(Metaverse)就是顺应这样的趋势产生的,元宇宙就是个数字世界。

感兴趣的朋友可以自行搜集详细资料。

用户体验设计,设计师的出发点是人,让人的使用体验感加强,趣味性加强,使用更加方便。在此角度,设计师不仅应当对设计趋势进行学习和分析,也要促成设计趋势落地的执行。学习拥有国际化的全局视野,增强面对复杂的中国本土市场的应对能力和洞察力,把学习和研究成果转化为产品设计的能力。

文献:Diana Malewicz (UX Collective)  素材来源dribbble,侵权删。

 

原文地址:站酷

作者:一个辛普森

转载请注明:学UI网》来了!解读2022年10种UI/UX设计趋势

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

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

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

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

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



工作经验|如何编写「设计规范」?这套思路一学就会!

lanlanwork


看上去复杂的规范,其实都可以抽离出同一套编写思路,不管你写的是哪一类规范(比如组件规范、动效规范、Banner 视觉规范等 )都可以尝试分为以下几个步骤:

1. 定义通用原则

2. 定义事件特点

3. 定义特殊场景

4. 其它内容补充

 

一、定义通用原则

通用原则会为你的使用者提供评价内容设计好坏、质量高低的衡量标准,定义整体设计的大方向,也会帮助使用者决策,判断什么该做、什么不该做。

 

案例:

以编写「Banner 的设计风格」规范为例,规范中的某两条内容如下:

– 契合语义:Banner 中的元素需要与文字语义契合,并对重点内容做强化和引导;

– 样式简洁:以不过于吸引视线为标准,形状不可过于复杂,面积不要过大,符合 XXXX 行业的风格特征。

 

经验:

1. 通常总结出关键的 2-5 条即可,内容在精不在多;语言精练,易记、易理解很重要。

2. 这些原则是最基础、通用的判断标准,在编写的过程中要结合实际情况,使之具备真实有效的指导性。

3. 形式要从简。写规范不是为了彰显设计价值,而是为了统一和更正他人的设计行为,因此形式要追随功能,侃侃而谈和花里胡哨的排版都要慎用,切忌舍本逐末。

 

二、定义事件特点

接下来你需要对所要规范的事件本身进行描述,包括事件的特征、状态、使用方式等细节。这就需要你对于事件本身进行有逻辑的拆解和分类,你可以按照设计流程或者组成事件的框架结构来进行描述。

 

案例:

以编写「Banner 的设计风格」规范为例,你可以按照 Banner 的设计产出流程,从 Banner 的构成框架、图案样式、文案规范、色彩规范、输出文件格式等方面,对其进行详细描述,这些内容就是你对于设计产出的基础要求和限制。

经验:

1. 通常来说你不需要从 0-1 来定义这部分内容,而是可以借鉴现有行业中已被广泛认可的设计原理和法则(比如视觉原则就有:视差规律、情感化设计、费兹定律等等),来为你的规范做理论背书,再结合实际产品 / 行业特点来编写规范。

2. 规范颗粒度没有限制,描述越细致,规范就越严格。规范定义得太宽松会起不到效果,太严格则会产生限制、不宜遵守,因此要适度。

3. 对于一些比较难理解的规范内容,可以给出一些正确 / 错误实例,也直接给出一些切实可用的实操模版,辅助使用者进行理解或操作。如下方 Material Design 在描述 icon 设计规范时给出的实例:

图片

 

三、定义特殊场景

以上的通用规范和定义可以涵盖 80% 左右的设计情况。但在具体业务中难免会出现特殊或极端情况,预判并定义这些特殊场景的使用方式也很重要。你可以把特殊场景理解为「边界场景」,相当于找到事件位于临界点时的处理方法。

 

案例:

还是以编写「Banner 的设计风格」规范为例,对于文案规范这部分内容,当业务一定要修改现在的文字排版和布局;或者给出的文字内容很长且无法缩减;再或者要翻译成多国语言等,对这类情况提前做好预判,给出合理的解决方案。

 

经验:

1. 对于特殊场景,你可以给你自己设定一条逻辑线,有顺序地思考。

2. 更可行的方法是收集实际工作中其他设计师在设计过程中遇到的各种特殊情况,进行汇总整理。

3. 特殊场景的规范不需要一步到位,随时发现,随时补充

 

四、其他内容补充

你还可以补充以下内容,让你的规范更完整:

 应用此规范的最佳实践案例

 对于其他相关部门的同事,想要获取相关知识,如何快速阅读关键内容;

 设立简易的反馈和答疑方式,收取使用者的反馈,以便优化规范;

 规范的更新时间和更新内容纪要,保留完整的记录和归档。

规范的编写过程不会是一帆风顺的,不要急于求成,可以步步为营,逐渐优化。

 

另外,并不是说规范文档编写好就万事俱备了,更重要的是要提供给规范使用者阅读的便利性,包括:如何更快地阅读文档、在更新文档之后如何同步等等。关于编写好规范如何落地和推广应用,你可以查看文章:如何让「设计规范」被有效执行和落地 。

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

作者:元尧

转载请注明:学UI网》工作经验|如何编写「设计规范」?这套思路一学就会!

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

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

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

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

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


久等了,2022 IF设计大奖作品来袭!

lanlanwork

图片

图片

三星隐私视觉体验视觉识别系统,该系统的标志以一致的方式应用于所有三星设备和服务,直观地表明用户的个人信息受到安全保护。

图片

三星对隐私的关注以平易近人、外观友好的图形形式传达给用户。该可视化系统旨在帮助用户安全、安心地访问各种服务,并提醒所有相关人员注意保护个人信息的重要性。

图片

图片

图片

图片

阿波罗智联(北京)科技有限公司

Roboride 是无人驾驶机器人出租车的完整解决方案。设计系统为用户和其他交通参与者创造了一种安全感。外屏作为用户的第一接触点,为身份认证提供了精准的交互方式。

图片

HMI屏幕还可以通过3D实时显示路况、安全语音提示和定制场景让用户感受到更多的掌控感,增加用户的信心和舒适度。

图片

图片

图片

“FICTION PLAY”活动旨在通过添加“游戏”的概念来摆脱短篇小说的世俗体验。NC 有七位作家和七篇短篇小说,提出了三种以各种方式和主题与人交流的方式。

图片

从网络小说、作者配音的有声读物、AR体验到虚拟空间中寻找参与者的句子,打造全新的“PLAY”体验。促销活动、线下出版物和展览空间为多种用户体验开放。

图片

图片

图片

RTL United已经合并成为一个一致的品牌,全新外观,色彩缤纷,超级动感。RTL 将成为多样性、娱乐和灵感的宣言。目标:新的品牌价值,一种新的态度,一种新字体,可提供最大的易读性并创建清晰和情感交流。

图片

图片

图片

图片

图片

HarmonyOS建立在分布式操作系统架构之上,可以跨设备运行,是华为全场景战略的一部分。这款新操作系统适用于移动办公、健身、健康、社交、媒体娱乐等。

图片

图片

图片

图片

慕尼黑国家社会主义历史文献中心专注于纳粹独裁的历史——最重要的是它对现在和未来的意义。

图片

图片

图片

图片

图片

OERA由全球最权威的化妆品与美容权威Dr.Sven和MOJO创意总监Alison Goudreault联手打造,是时尚专业公司HANDSOME旗下的首个奢华护肤品牌。

图片

OREA 提出了“达到绝对零状态的每日旅程”的概念,Oera通过详细的微交互、简单时尚的布局和增强的 3D 来提供自己的奢侈品身份。Oera 将其自身的生物技术应用到 Orea 产品上,以友好的语气提供内容,从而最大限度地发挥 Oera 品牌的声望氛围。

图片

图片

图片

图片

Galaxy Watch4 配备了全新的统一平台,因此用户可以使用更多种类的应用程序,并且在与手机一起使用时,它提供了更好的可用性。

图片

此外,针对圆形显示进行了优化的精美屏幕营造出愉悦的用户体验。增加身体成分和睡眠分析功能,让用户更好地保持健康。手表经过重新设计,允许更自然的交互,从而创造更方便和愉快的用户体验。

图片

图片

图片

图片

Minna Bank 是日本第一家为数字原生个人创建的数字银行服务。利用设计的力量,将传统银行业务重新定义为对客户生活至关重要的数字服务。

图片

Minna Bank 提供一系列数字银行服务,允许用户通过智能手机控制他们的资金,包括虚拟借记卡、预算功能和透支保护。Minna Bank 设计友好简约,时尚插画营造出有趣活泼的氛围,让用户摆脱传统金融机构带来的压力。

图片

图片

图片

图片

New Naturalist Landscape Design是欧洲领先的先进景观理念和技术、科研景观公司。

新自然主义景观设计侧重于栖息地露营、可持续景观和生物多样性恢复和改善等领域。赋予新自然主义以阳光般的生机与活力,清新美丽的空气,水土般的自由融合。

植物群落不断重组中的生态景观呈现出新的生命形态,城市与自然在有限的空间中寻求无限平衡的感觉。

图片

图片

图片

图片

图片

今年IF设计大奖还是有很多优秀的作品,我挑选了其中部分展示,大家感兴趣可以去官网看看其他设计作品。

从这些设计获奖作品中,我们可以学习的他们设计理念,设计表达形式,以及如何进行视觉包装,最终获得IF设计大奖。看完后可以多思考,他们为什么要这样设计,我们能学习地方是哪里?

 

作者:Tony

转载请注明:学UI网》久等了,2022 IF设计大奖作品来袭!

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

魏华的微信.png

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

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

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


优秀日本食品海报的10个设计细节

lanlanwork

01.布纹背景
以布纹做背景既比纯色背景更显细腻,也不会太花,且视觉上会给人一种干净、专业、卫生的感觉,此外,还能加强与餐饮行业的联系。

图片

图片

图片

 

图片

图片

 

 

02.柔色

柔色即看起来很柔和,有点小清新的色系,这类颜色的饱和度和明度偏高,作为食物海报的主色,可以大大加强食欲,还能突出食物,是典型的日系配色。

图片

 

图片

图片

图片

图片

 

 

03.花瓣素材

大家都知道日本最出名的花是樱花,所以很多日式食品海报通常会用樱花来作装饰,粉色或白色飘零的樱花,不仅能使画面更丰富、更有动感,还能赋予画面一丝浪漫的日式气息。

图片

图片

图片

图片

图片

 

 

04.扁平插画素材

如果你看过比较多的日本海报,你应该会发现很多日本的海报都喜欢使用扁平插画素材,在食品海报中也不例外,扁平、简单,甚至是有点随意的插画,能与食物图片形成鲜明的对比,而且还能给画面增加一种淳朴、健康的感觉。当然,这些插画素材通常是跟食物直接相关的,比如原材料或餐具之类的。

图片

图片

图片

图片

图片

图片

图片

 

 

05.展示原材料

很多食物的原材料都是很有食欲的,比如水果味的冰淇淋、加入了水果的糕点、食材丰盛的菜品等等,把这些新鲜、美味的原材料加入都画面中,与食物本身进行组合,比如作为画面背景、作为装饰素材,或者与食物进行对比等,可以使画面的食欲更强、更美观。

图片

图片

图片

图片

图片

图片

 

 

06.使用手写字

手写字与扁平插画一样,可以增加食品海报纯朴、手工制作的感觉,而且更显亲切,比起宋体和黑体来也更加活泼一些,很多国内的食品海报也喜欢用手写字体做标题。

图片

图片

图片

图片

图片

 

 

07.超强食欲的图片

作为一张食品海报,能否激起消费者的食欲是最关键的,所以优秀的食品海报,其食物图片肯定是很有食欲的。食欲很强的图片在拍摄时要使用一些技巧,比如通过特写镜头拍出食物外表或内部的质感、拍食物流汁或流出果酱的状态。另外,色彩通常要以暖色为主,要鲜艳、干净,而且图片一定要高清。

图片

图片

图片

图片

图片

图片

图片

 

 

08.以食物图片作为主视觉

如果食品图片够好看、够有食欲,那么直接把食物图片放大作为画面的主视觉,是最简单、最有效的做法,视觉上会很聚焦、不凌乱,还能有效吸引目标消费者。

图片

图片

图片

图片

图片

图片

 
 

09.食物俯拍

很多日本食品海报喜欢使用俯拍的食物图片,因为俯拍的角度能够更全面的展示食物甚至是餐具的特色,而且由于大部分餐具都是几何形的,所以采用俯拍的角度可以使图片的轮廓更简单,多张食物图片组合在一起时还能形成重复的效果,统一性和节奏感比较强。另外,俯拍的角度比较平拍在视觉上会更新颖一些。

图片

图片

图片

图片

图片

 

10.有动感的构图

比如让食材或者食物图片腾空而起、或者是旋转倾斜,画面的动感就会大大增强,有动感的构图一方面可以让食物看起来更新鲜、更有食欲,另一方面也能够让画面变得更活泼、空间感更强。

图片

图片

图片

图片

图片

 

图片

以上就是日式食品海报中常常会用的一些设计技巧,当然,这些技巧并不是必须的,也不能保证你能做出优秀的设计,但优秀的设计确实会有很多共同点和方法,找到它们,并结合自己的设计需求合理使用,你就能够事半功倍。

 

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

作者:葱爷

转载请注明:学UI网》优秀日本食品海报的10个设计细节

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

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

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

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

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


百年包豪斯设计风格,凭什么这么牛?

lanlanwork


图片
图片
包豪斯德绍,1925-1926

包豪斯(Bauhaus)以德语命名,意为“建筑之家”,由建筑师沃尔特·格罗皮乌斯于 1919 年在德国魏玛创立。1915 年,他接管了大公撒克逊工艺美术学院,四年后该学院与魏玛美术学院合并,形成了激进的新设计学院。

图片
沃尔特·格罗皮乌斯

 

包豪斯从一开始就不仅仅是一种建筑风格,而是一所结合了手工艺和美术的学校,受到现代主义、英国工艺美术运动和建构主义的影响,包豪斯也最终成为20世纪最具影响力的现代主义艺术学校。

图片
包豪斯的老师

学校被定义为一个将工业设计、建筑、雕塑和绘画融为一体的乌托邦工艺行会,为艺术家和设计师提供了由实践技能、工艺、技术和理论知识组成的原创和有影响力的课程。

图片
Image via spicewoodchess.org
包豪斯在柏林短暂第三个发展阶段中就停止了,总体来说,虽然包豪斯存在时间不长,仅有13年,但是它的设计思想,理念风格却成为一个大流派,影响一直延续至今。甚至我们也有看到现今一些设计,形式感,处理手法上也有包豪斯一些影子在其中。
图片
图片
Mauri Davida | Typographic Posters Collection 

包豪斯的设计理念是形式追随功能,少即是多,去除一些不必要的装饰,也是包豪斯整个设计风格特点的精髓,包豪斯设计在保持功能性的同时体现了未来主义的外观。

包豪斯倡导功能为主,不花哨,简单而优雅的几何形状,理性化和简洁设计为主,它偏向于实用而不是炫耀。这种理念在包豪斯产生重大影响的领域非常突出。

Bauhaus Books by Michael Kimmerle

在设计中包豪斯更看重产品实用性,而非纯美学。不过,这并不是说包豪斯在视觉上没有吸引力,极简美学特征就是它最大的标致,以至于流传到现在一些经典设计,看起来依旧没有觉得过时。

图片
Bauhaus 2.0
图片
Pienso | Ray Dak Lam
截屏2022-05-10 上午11.37.14.png
包豪斯风格影响了诸多行业的设计变革,也被奉为现代设计的经典,那么受到包豪斯风格影响的设计到底变成怎样了,下面带着大家看看包豪斯设计风格一些案例。
品牌设计中的应用
图片

 CFB 2018

图片

 

图片

Bauhaus Football Club

图片

BRANDING • 19-19 Cabinet d’Architecture Indépendant

图片

BRANDING • 19-19 Cabinet d’Architecture Indépendant

图片
 László Moholy-Nagy
图片

版式设计中的应用

图片
图片
Salon du livre de Montréal by Melanie Lambrick
图片
Beacon: A new design-led project to raise money for disaster relief efforts
图片

Robert Gutmann | 20TH CENTURY DESIGN

UI设计中的应用
图片

Blockchain mobile Franko Komljenović

图片
Web Design Concept for Balenciaga

图片

图片

图片

Glyphs app Brand Identity & Website

包装设计中的应用

图片

图片

图片

Plácida

图片

包豪斯设计风格在其长达一百年的发展历史中,仍然延续至今,也在过程中经历了诸多挫折和逆境,在其发展的三个阶段中不断变化迭代,以及其革新的设计理念影响了当时诸多设计。在 21 世纪包豪斯风格仍然存在,激励着前前后后的设计师学习和借鉴思考。

回个头来我们也需要思考,为什么我们现在看一些设计风格可能就一年或者半年就被市场给抛弃了,究其原因还是过于形式化和追求华丽的外表设计。而包豪斯风格带给我我们的设计理念就是功能为主,少即是多。

 

原文地址:功夫体验设计(公众号)

作者:Tony

转载请注明:学UI网》百年包豪斯设计风格,凭什么这么牛?

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

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

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

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

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


轮播设计总结-提高用户点击

分享达人

提到轮播首先可能想到的是广告,我们经常在移动端首页或网站首页会看到各式各样的轮播banner,不管在移动端还是网页上通常点击数据都是非常差的,本篇文章带你深入了解banner轮播。


如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。


本篇文章通过以下几点探索轮播的特性,预计阅读20分钟


目录

1、用户真的使用轮播吗

2、轮播的轮换形式

3、轮播的进度展示

4、轮播定位

5、轮播的切换

6、对轮播进行分类

7、使用缩略图进行预知

8、轮播异形化

9、轮播时间

10、总结


一、用户真的使用轮播吗

用户是否对轮播有感知,这个则需要根据不同的场景进行判断,包括每个产品中的每个轮播对用户用户的定位也不相同,常见的应用场景品牌曝光、活动营销、产品展示,每个场景下相关的数据也不相同。


促销轮播banner


品牌推广轮播banner


产品介绍轮播banner


同时还有个关键因素,轮播的占比,这里以pc端为例若是产品是以品牌效应吸引用户的,大多轮播是以大的屏幕占比为主通常会占首屏的50%,如果是以营销、内容为主的产品,轮播通常以16:9、7:4的常规比例进行展示。


轮播的页数

用户在使用产品时会默认忽略轮播区域,一般轮播都会有自动轮换机制,一定时间后自动轮放下一张banner,那么每当页面上进行轮播时便会吸引用户进行关注,效果上会有一定的提升,所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。


还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。


如果banner是作为内容传播希望用户通过banner了解内容,那么则要避免放在最后一位置,对于用户而言最后一张轮播路径过于长,并且用户很少会手动滑动banner。


国外一家公司在针对轮播中进行了相关的研究测试,随着页数的增加用户的点击逐步下降。

那么如果想让产品中的轮播更具有效果,则需要根据不同的场景设定策略达到目的。




二、轮播的轮换形式

不管在移动端还是手机端,轮播都有各种交互形式和尺寸,以pc为例在交互上会多样化一些,常见的几种则是通过滚轮滑动、通过点击切换两种。


如下图某艺术网站,它则是通过鼠标滚轮进行切换轮播banner,并且banner的占比也是铺满首屏,这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点,同时也符合用户目标。



在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换,并且占比也是铺满首屏,在医美领域用户更关注美感,而轮播形态也是符合用户的心理预期更加沉浸美观。


而在移动端轮播的形式就比较统一,大多都是自动播放+手指滑动进行切换。




三、轮播的进度展示

在网页中轮播都会有当前的定位点,许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标,不用一张一张切换,但是在有些产品中会忽略这一点,设计中会做的非常小导致用户在点击上可用性不太友好,如下图中的banenr进度点设计上过于小导致点击上有些阻碍。





如以下网站去除进度定位的方式,通过缩略图预览来告知用户下一个banner的内容,空白区域也可以添加缩略图引导介绍等关键信息,帮助用户提前预知在体验上相对较好。

以下国外某网站在进度定位的设计上采用了标签文案方式进行设计,能够帮助用户更加全局的了解banner内容




四、轮播的定位

定位主要是用来指示当前轮播的进度,像上图中讲的便于用户更加全局的观看banner的张数和当前进度。


以下网站的设计中则把定位与进度相结合,进度条展示该banner预计多久会切换下一张,对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。

以下是某个国外网站,不管是pc还是移动端都在轮播底部添加了水平条,告知用户当前位置


随着市场上产品同质化严重,产品的竞争力也更依赖体验,在下图中的数据可视化的网站上,在进度条上就利用了产品的特性以饼状图的形式进行展示。






五、轮播的切换

在刚才上面举的例子中很多优秀的网站在设计上都很有创新性,但是需要注意一个点,在轮播中不只有自动播放,还需要考虑用户手动切换,因为在实际用户浏览中可能会对产品的播放时间达不到预期,此时则会使用手动切换,除去可点击的进度点,还需要上一张和下一张的入口切换。


在此基础上需要注意,在处于最后一张banner时,下一张切换还能不能点击,第一张时上一张切换还能不能切换,这个取决于产品特性和轮播张数,如果轮播张数过小的话则需要进行循环播放,如果过多的页数则第一步和最后一步不可点击。

切换的距离和位置

上一张和下一张的距离远近取决于banner的大小,如果轮播banner占比较大时则需要考虑用户的操作时长,距离越短时间越快,为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出,便于用户寻找。


如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大,保持视觉平衡,因为小区域banner用户能够更加全局的观看,在使用上不会犹豫。




反观移动端在轮播中除了展示banner进度外很少展示切换按钮,移动端更加依赖手势交互。


六、对轮播进行分类

当轮播banner过多时利用标签进行分类,用户通过点击标签进行查看相关的轮播组合。


此方式更适合一些电商平台、新闻网站这种内容过多的产品


如下图国外社交媒体网站则使用了标签进行分类,此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。


七、使用缩略图进行预知

在banner首屏中,显示的内容越多,越能激发用户进行点击,像上面讲过的农业产品网站就使用下一张预览图的形式进行展示,当然不仅局限于这种形式,如下图中的餐饮网站把所有的轮播banner展示给用户观看。


相对于缩放图,图标展示效果上也较好,空间占用更少,使用这种方式需要谨慎,对图标的识别性要求较高,我印象中能够使用的这种方法的网站是苹果官网,让产品抽象化展示。


在移动端也存在这种设计手法,但是基于分辨率原因移动端的缩略图展示过少,最常见的如下图中的马蜂窝和企鹅电竞。






八、轮播个性化

轮播最大的缺陷则是像刚开始讲的用户会默认为广告,对此可以使用个性化设计突破用户心理障碍,使轮播banner更具备亲和力。


如下图中的数码科技网站,利用产品与背景的结合营造出一种功能性的展示。


再例如下图中苹果官网入口,结合百度的定制化功能在大搜中进行个性化处理,把常规的banner轮播以功能卡片形式进行展示,同时卡片承载产品动画引导用户进行点击。


苹果官网进入后随意点击产品介绍页后会发现,苹果把轮播结合鼠标滚轮营造沉浸式观看,每个屏效内都展示产品一个功能特点,打破传统banner的展现形式。




九、自动轮播时间

自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级,如我们平常使用产品时会忽略banner广告,我们会更加关注移动中的东西,特别是在移动端上通常是banner进行轮播时才会关注。


谷歌设计团队曾对banner轮播的时间进行测试,测试结果得出5s-7s的轮播时间最佳,在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。


如下图谷歌商店的轮播时间设定在6s。

同时还需要注意,在自动播放的过程中如果用户鼠标hover上去后,则需要判定播放暂定,避免用户错过感兴趣的内容。




十、总结

本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍,在实际产品中轮播有很多可用性上的问题存在,我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。

文章来源:站酷   作者:爱吃猫的鱼——

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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档