首页

Behance 首页推荐的作品集为什么这么高级?为你拆解其中7个秘密

seo达人


1、错开对齐

如果你对自己的排版不是太自信,又担心排版太死板,错开展示是一个很容易上手的技巧。只需要把界面稍微错开一下,展示效果就会好很多。下面就是一些Behance大佬用这种手法做的展示效果,可以从背景,作品摆放比例,留白,间距和错开幅度上进行研究学习。

图片

图片

图片

图片

图片

图片

图片

图片

 

2、增加层次感

为了增加展示细节,丰富层次是一个非常好用的展示技巧。如果你的作品界面在视觉上比较寡淡,那么把一些界面元素提取出来,利用投影加多层次感,视觉效果上就可以很快得到提升。这个技巧在执行上也比较简单,关键要注意投影的大小和颜色,千万别做的太重。

图片

图片

图片

图片

 

3、出界设计

有时候,一些界面元素确实视觉效果好的元素太少,比如很多B端表格的界面,用这种方法可以增加画面中的图片率,将本来隐藏在界面外的图片进行出界展示,更多利用图片提升画面的设计感。

图片

图片

图片

图片

图片

甚至可以将banner图中的元素进行出界,增加设计感。

图片

 

4、倾斜设计

倾斜设计,也是一个提升设计感的常用技巧。先在正视角度下摆好,利用技巧1错开一下界面,然后整体旋转一个角度就能很好的提升画面表现力,增加设计感。但要注意用这个方法的时候,要保证界面元素的清晰度,不要出现锯齿。

倾斜后也可以适当增加一些圆点点缀

图片

把一些UI 组件斜角后,结合层次感设计技巧

图片

图片

倾斜设计+出界+底部方块装饰

图片

倾斜设计后,增加一些半透明的装饰层次设计

图片

 

5、3D厚度设计

现在3D设计非常流行,把自己做的界面增加一定的厚度然后结合倾斜设计,也能快速提升界面的设计感。

但因带有倾斜,很容易出现锯齿。我有一个常用的小技巧是做的时候可以把图做大一倍,然后再缩小放到作品集中,就能提升清晰度。例如我要做一份1920×1080的PPT,那么我就会先做一个2x 尺寸,也就是3840×2160然后再缩小,会比你直接做1x尺寸的图要清晰很多。

把界面增加3D厚度后,再稍微加一些比较轻量的3D装饰元素,常用的有小球、方块等3D元素能让画面效果更好。

图片

图片

图片

图片

图片

图片

图片

图片

 

6、增加底图设计

这个技巧要注意让界面与背景图自然融合,关键在于需要找到一张非常好的图片,考验选图的能力,存在一定的风险。如果你对这种包装方式不大放心的话,建议你谨慎使用。

比如这张图,细节点在于界面左边浅色配上底图中左边的白,右边深色界面搭配右边深色的山体颜色,看起来就很和谐。

图片

下面这张图用了一个跟界面中配图同一个调性的图片,为了防止干扰界面,还加了一点高斯模糊,效果也非常不错。

图片

这张图的底图用了一些比较具有设计感的图形,整体比较简洁高级

图片

常用的一些底图元素还有圆形,点等等

图片

图片

图片

图片

用一些插画元素作为底图也是非常不错的

图片

 

7、套用样机来展示

前面提到的很多实用技巧,能看到都是不需要用样机的,我自己更倾向于不用手机模型来展示,即使要用也是比较轻量的那种。有看过不少同学的作品集,其中的样机用的太过了,不知道的还以为你成了卖手机的作品集。这也是我放到最后一条来说的原因,我更推荐你在不使用样机的情况下把自己的作品展示做好。

当然,如果用样机也没什么大问题,原则还是为作品服务的,保证清晰度,不抢作品本身的视觉就OK。用上了样机,它就成了你作品的一部分,要保证样机是最新的,且质量要高。

关于样机的话,彩云之前也帮大家找了一些非常高质量的样机资源,需要的话可以点击下面的文章看看内容,并找到获取方式下载使用。

2021年全网最新品质最好的样机资源被我找到了,免费分享给你!

2021年全网最好的样机资源都在这里,收藏这一篇就够了!

图片

图片

图片

 


 

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

作者:彩云Sky

转载请注明:学UI网》Behance 首页推荐的作品集为什么这么高级?为你拆解其中7个秘密

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

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

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

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

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



无需手绘的AI矢量扁平几何风基础插画:《鲜果派对》海报

seo达人


image

 

工具

工具:AI(Adobe illustrator)

适合:零基础入门

 

扁平风的基础思维准备:几何形组合造型

几何形一直被视作是抽象造型的基础元素,通过几何形有意识的相互叠加组合,就可以使得这个造型呈现出可识别的对象,比如我们在这个教程里所表现的那样:用几何形画水果。

比起细腻丰富的传统画法,极简的几何平涂造型所创作的水果,看起来有着别样的生动的特质,摆脱了对水果表面质感的依赖,转向对形色的探索,是扁平插画的基础思维。

常用的几何形是:圆、方、三角,在这个教程里,我们就运用矢量软件AI(Adobe illustrator)进行创作,接下就开始来打造我们的《鲜果派对》海报吧。

image

 

用方形塑造苹果基础形

常见苹果的画法可以是圆形起步,也可以是从方形开始。

STEP 01

打开AI,新建一个文档,运用粉色画出一个正方形,这就是苹果的起始形。起始形非常重要,它决定了接下这个苹果的形状走向。

然后,我们把这个正方形改变为梯形,改变的方法有很多种,这里我们利用变形工具,进入【效果>变形>弧形】,在变形工具的面板里,将垂直这个滑块调整为-15%。

image

STEP 02

在选中上一步所变形成为的梯形的基础上,进入到【对象>扩展外观】对它做一次扩展外观。

扩展外观就是让这个形状真正变为矢量梯形的路径,如果没有做这一步,这个形状看似是梯形,其实还是原来正方形的矢量路径。分辨真假梯形也很简单,只要选择这个形状,看到路径的走向仍然是正方形,那就是假性梯形,这就需要为它做一次扩展外观。

image

STEP 03

然后再选中这个梯形的基础上,单击左边的工具栏里的【直接选择工具】,就会看到四个角内分别带有四个很小的圆点(仔细看是一个同心圆),拖动它,你会发现它会控制这个角,将它从锐利的角变为圆弧。

根据圆弧离形状中心的距离多少,弧度也会相应发生变化。

image

好了,苹果的基础形就完成啦~

 

细节的魔力

我们开始为苹果增加叶片,叶片的画法首先也是要从基础几何形开始慢慢演变而成。我们在叶片这个部分提供的基础几何形同样是正方形。

STEP 04

用蓝紫色画出一个正方形,然后再复制一个正方形,将这个复制的正方形旋转45°,变为菱形。再复制第一个正方形。于是我们得到了两个正方形和一个菱形,将它们像下图所示拼起来。

然后再选中这个组合造型,进入到【窗口>路径查找器】,在路径查找器的面板中运用【联集】将它们拼合成一个独立的封闭的路径。

image

STEP 05

然后再利用控制形状角度的小圆点,就像STEP 03那样分别选中下方以及左右两边的圆点,将角转为弧形。一片叶子就这样制作而成。

image

问:感觉似乎这样的方式比较麻烦,为什么不直接用钢笔工具画呢?

这也是我在这一风格的画法中想要重点强调的:尽量避免使用钢笔工具,而用几何形进行转化,是保持扁平风格中几何感和抽象感的诀窍。

因为手动画出的路径毕竟不会特别严谨,这时就难免让扁平风格失去了它本身的风格特点,而这时如果没有较强的结构感,整个画面就会看起来”平淡“甚至”无趣“。

其实叶片的造型也可以探索出其他的几何方式进行组合构造,本文只表现一种方法。其他的方法,可以留给你下去尝试。

STEP 06

这时,把这个叶片的形状的混合模式改为“正片叠底”,利用叠加的视觉效果增加画面的几何感和时尚感,这是在我们过去写过的文章《超级可爱!插画萌新必学的PS极简马克笔简笔画:盆栽篇》以及相关系列文章也都运用过类似的技法。

image

STEP 07

最后,用线条增加最后的细节。这里所用的线条是较细的3px的黑色线条。这里的线条粗细要根据形状本身的尺寸大小比例来确定。总之,对细节的描绘可以克制一些,不要太过复杂。

利用线形的组合以及形状叠加的视觉效果,扁平风的简约苹果元素就画好了。

image

 

准备好元素,完成海报

STEP 08

蓝莓的画法从矩形起步,对矩形的组合以及成形的演变方法,是我们重点要训练的对象。中间的步骤我们已在文章前面详细叙述过了,这里就不再重复。可以继续用这个方法演练下去。

image

STEP 09

画草莓的时候,运用了两个梯形进行组合。利用叶片造型进行叠加,也能增加图形的魅力。

image

STEP 10

我们把其他的水果元素也画好,我这里准备了一些比较可爱的樱桃、西瓜之类,你也可以画点菠萝、芒果之类,注意要把握每一个水果的基础形特点,然后在细节的部分加以强调

image

把每个水果元素放到海报的设计中时,要考虑的还有对水果元素之间的间隙的疏密均匀程度,元素可以较大,有些元素甚至可以渗出到海报之外,这样会让视觉效果更为延伸。

如果经过路边有家鲜果店,挂上这样一张海报,应该效果是不错的吧~ 先自我陶醉一波~

image

最后,献上我的同类作品集小站

当然,如果你想要临摹或者参考更多,可以通过访问下面这个网站,我在这里会放入更多类似的作品,继续保持对这类风格的探索。

image


 

原文地址:飞屋设计

作者:飞屋睿UIdesign

转载请注明:学UI网》无需手绘的AI矢量扁平几何风基础插画:《鲜果派对》海报

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

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

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

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

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



LOGO 设计技法(第三弹)

seo达人


1. 多层次线条渐变 LOGO(形状分割)

2. 条纹隐形立体 LOGO(封套扭曲)

3. 条纹穿插 LOGO(新建画笔工具)

4. 角度渐变穿插 LOGO(描边角度渐变)

5. 半透明光影 LOGO(混合工具)

6. 时钟大小渐变 LOGO(替换混合轴)

7. 不规则球形 LOGO(3D 贴图)

8. 原研哉的LOGO(混合工具)

 

如果有跟我一样不爱看文字的宝贝,可以划到底部直接去看结尾处的视频版本哦。话不多说,跟着我来细细分解一番。

PS:本文所有案例均来源于网络,只用作分析技法。

图片

图片

首先我们来分析一下这个 LOGO,整体是由一些线条组成。长短不一的线条,通过渐变的明暗处理形成了字母 D 的轮廓。如果是使用常规的方法,一条一条地画完线条,调整长短再组合在一起,那还不得加班到凌晨?学了这个方法让你再也不用加班,来!

图片

首先我们将绘制出 12 根线条,然后给图形填充由黑到白的渐变色。

图片

绘制出两个长方形并左对齐,然后将右边的直角转为大圆角,拉到底的那种。这样就形成了字母 D 的轮廓。接下来就是将两组图形组合到一起了。

图片

为了方便观察,我们将字母 D 的轮廓暂时改为红色。因为渐变色是由上至下的,纵向切割线条不会有明暗方面的变化,我们只需要横向切割,所以将 D 的左侧竖向的线条删除即可。

图片

打开窗口—路径查找器,找到左下角分割的按钮。

图片

全选中左侧的图形,点击切割按钮,就得到了左边的图形。

图片

为了方便观察,我们可以先将左边图形全部改为填色模式,然后将多余的面删除。再调整每组线条的渐变色条,就形成了这种层次关系。

图片

基础层次和效果出来了,接下来还有很重要的一步,需要再调整亿点点细节。现在上去分层太多有些碎了,而且缺少 D 字线左边的竖线,所以可以将一些线条合并,刚好可以形成字母 D 的左边的竖。右边有两根线条过长,所以从间切开增加层次。再调整一下渐变的位置,让整体更协调。

图片

最后,再加上简单的排版就完成啦!

 

 

图片

图片

首先还是分析一下这个 LOGO,是由一些条纹经过错位形成了立体的字母 K,仿佛隐藏在条纹下面。这样的立体效果又该怎么做呢?其实非常简单,来!

图片

首先绘制出由七个长方形组成的条纹,注意条纹的宽度要和间距相等。

图片

接下来就要使用要封套工具了,封套扭曲之前我们先来分析一下需要多少行数和列数。按照节点去划分,最终形成 13 行和 9 列。

图片

打开对象-封套扭曲-用网格建立,填写 13 行 9 列,得到右边的图形。

图片

先打出一个 K 字母作为垫底,根据 K 的结构调整网格。先选中节点向上移动,然后将两侧的节点向中间靠拢,形成突出的效果。

图片

调整中间两条条纹的宽度与字母 K 的中间部分对齐。

图片

左边的是一条垂直的笔画所以只需要全选节点向上移动就可以了,但是右边是两个交叉的笔画,所以处理起来会有点麻烦。同样也是先将笔画中部分的节点选中向上移动(如上图左),然后再根据 K 的结构调整节点的位置。这可是个耐心活儿,需要一个个节点去调整。不过好在节点不多,整得也挺快。

图片

最后,给图形填充色彩加上排版就完成了。

 

 

图片

图片

乍一看,这麻花扭得不错。类似的图形还有咱们中国结,但是中国结是单线形式,绘制相对比较简单。这个是用条纹扭的,看上去更复杂一些。没关系,其实也很简单,来!

图片

首先我们需要新建一个画笔图案,绘制出两组条纹,分别填充红色和蓝色。

图片

打开窗口—画笔面板,将两组条纹分别拖进画笔面板,选择图案画笔,点击确定后,继续确定就完成了新建画笔。

图片

接下来我们把轮廓画出来。先绘制一个正方形,然后将三个直角改成圆角,是的还是拉到底的那种。

图片

将图形整体压扁一点,并将端点继续向外延伸,注意曲线要做到平滑。

图片

选择曲线,点击画笔面板中刚才新建的画笔,瞬间就可以得到右边的图形。

图片

将曲线复制一份,点击另一个新建的画笔。把其中一个镜像翻转后,将两个图形叠压在一起。

图片

接下来做出穿插关系就可以了。我们先来分析应该如何叠压。如上图所指的三个相交处应该把蓝色调整到上面。

图片

最后,再调整下细节,加上排版就完成啦!

 

 

图片

图片

这个 LOGO 的特点在于渐变的类型和扩散的角度是圆形的,AI 里面的渐变却没有这种类型。但是我们仔细观察它是有一个很清晰的切割的边的,这样就可以通过描边渐变的形式去完成了。来!

图片

我们先将图形进行拆解,可以分成三个不完整的圆去组成。那么我们只需要做出其中一个圆形,重复旋转 120 度就可以得到完整的图形了。

图片

我们先来绘制一个圆形,选择描边模式。接着将圆形的描边加粗,加粗至完全覆盖整个圆形的面积(如上图右)。

图片

然后给图形填充渐变色,渐变的模式选择—沿描边应用渐变。

图片

绘制一条直线,旋转 120 度,然后将它与圆形居中对齐。直线作为参考线使用。

图片

使用剪刀工具,将直线与圆形相交的点断开,并删除一部分节点,得到上图中间的图形。然后再将右边的点延伸,就得到了右边的图形。接下来只需要将这个图形进行旋转复制就可以了。

图片

将得到的图形旋转 120 度,并重复复制。注意轴心的位置,在图形的下面并且与图形垂直居中。

图片

最后再加上排版就完成啦!

 

 

图片

图片

光影效果的 LOGO,通常是使用渐变工具来完成。今天我们来使用混合工具尝试一下。来!

图片

首先绘制出 40 的轮廓。先大致画出 4 和 0 的形状,再进行修剪,将 0 的上面和下面的线条断开。4 的每一条线段也需要断开。

图片

复制一份并缩小,放置在右边,将 4 和 0 的距离分开一些。为了方便观察混合后的状态,先把透明度调整至 20%。

图片

将大 40 图形与小 40 图形的每一条对应的线段进行混合。混合步数设置为 500。

图片

接下来,我们再来调整下透明度和细节。为了方便观察,我们先将两个图形分开,先把后面的小 40 的透明度调至 0%,颜色改为白色。色块叠压较重的地方,也需要调整透明度,让整体更通透。也可以将大 40 的线条颜色改为黑白渐变色,这样光影的效果会更强。

图片

最后再将两个图形合并到一起,加上排版就完成了!

 

 

图片

图片

旋转复制的工具,大家应该都会用了,但是像这样的旋转复制的同时,图形的宽度也有规律的跟随着旋转变化,应该又怎样做呢?

图片

首先我们依然是先将图形拆分一下,可以把它看成是由一组等粗的直线旋转环绕加一组像是树叶般有宽度的线条随着旋转而变化的图形组合而成。这里我们给这两个图形起个名字,一个是“直线形”一个是“叶子形”。

图片

我们先将简单的“直线形”图形做出来,先绘制一组横竖交叉线条并建立为参考线,然后沿着参考线绘制一条垂直的直线。

图片

以参考线的中心为轴心,设置旋转角度为 15 度,进行旋转复制。之后重复复制(快捷键 CTRL+D),直至旋转一周。这样就完成了“直线形”图形。

图片

接下来,我们来做“叶子形”图形。先绘制出一大一小两条直线,再将直线从等宽改为有宽度变化的模式。

图片

使用混合工具,将两个线条进行混合,指定步数为 22。取向要选择右边的那个弧形的。这样就得到了 24 个规律变化的叶子状的图形。

图片

一排叶子做出来了,怎样把它们变成环绕形的呢,这就要用到替换混合轴了。首先绘制一个圆形,再把上面切掉一块。

图片

同时选中加圆形和叶子们,打开对象-混合-替换混合轴。就得到了上图右边的图形,已经可以看出“叶子形”的样子了,接下来还需要做一些细节的调整。

图片

先将两图形的轴心与参考线居中对齐。再将叶子图形调整到与直线垂直,只需要调整两端的图形,中间混合的图形会自动跟着变换。

图片

现在“叶子形”已经基本完成了,但是我们发现,使用混合工具后的图形是中心对齐的,而不是底部对齐,所以接下来,我们需要手动将叶子调至底部对齐。

先将图形扩展,然后调每个叶子移动到与线条的底端对齐即可。

图片

最后再加上排版就完啦!

 

 

图片

图片

常规的球形 LOGO,之前的教程已经演示过了。那像这样的不规则的球形 LOGO 又该怎么做呢?来!

图片

首先还是来分析下,这个的构成。上面和下面有两条直线,中间是有很类似 H 字母的形状,后面也是直线。

图片

按照上面分析得到的结果,我们绘制出相应的图形。使用长方形,拼出不规则的图形。最后再将右边的直角改为圆角。

图片

打开窗口-符号。将绘制好的图形,直接拖进符号面板,默认选项直接点确定就可以了。

图片

绘制一个圆形,并删除一半。

图片

选择一半的圆形,选择效果-3D 和材质-3D(经典)-绕转,就可以看到上图的对话框了,默认选项,点击贴图按钮。

图片

打开贴图的对话框,可以看到左上角有一个符号选项,选择刚才新建的符号,勾选右下角三维模型不可见。接下来就调整中间图形的位置,开启预览后可以边调整边看到图形覆盖在球形的变化。调整至合适位置后点击确定就可以了。

图片

将得到的图形进行拆分,解组和释放复合路径后,就可以得到右边的两个图形,接下为他们填充颜色。

图片

正面的图形填充蓝绿渐变色,背面的图形填充较深的蓝色。

图片

最后将两个图形再组合到一起,加上排版就完成啦。

 

 

图片

图片

原研哉为知美术馆设计的 LOGO,由美术馆的外观瓦片提取而来,形成富有变化的水波样。同时,色块规律性的大小变化也组成了字母 Z 的形状。我们来解析一下大师的 LOGO 是怎么做的?来!

图片

首先我们来分析一下方块的变化规律。左边是由上至下逐渐变大,右边是由上至下逐渐变小。中间是从中间向两侧逐渐变小,但是中心不在一条垂直线上。

图片

那第一步画出一大一小两个方块,然后使用混合工具,步数设置为 9。这样我们就得到了由大到小规律变化的一组方块。

图片

那么怎样得到由小到大再到小变化。很简单,将刚才得到的一组方块,镜像复制一份,就可以了。

图片

得到一组图形之后,再将它们向斜上方,连续复制就可以了。注意要将方块错开,行距也要相等。

图片

最后再将多余的方块,删除掉即可。

图片

排版再加上大师的字,瞬间就高级了起来!你学会了吗?

有很多 AI 里面的工具,也许你认识它,它也认识你,但是你不知道它竟然可以干这种大事。来跟我们一起探索巧用 AI 工具做 LOGO 的更多更简单的可能性。

今天的教程就到这里了,下方视频教程更方便哦,任何人看完不跟着做的话我都会伤心的 ooooooooooooooooooK?

 

文末,点击原文地址,可直接观看视频教程 或 文字版本,随你选择;

 

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

作者:yoyo

转载请注明:学UI网》LOGO 设计技法(第三弹)

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

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

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

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

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



关于设计师作品集那些事2-提升篇

seo达人


1.顺叔有话说

各位广大设计师朋友们大家好!送走2021迎来新的一年2022,我们又见面了,好久没写设计干货了,不知大家是否还记得当年那个夏雨荷,啊不对~~是当年的那个顺叔,已经有一些小伙伴留言,私信我催更了。

最近顺叔正好有一些时间,可以去沉下心来写一篇设计干货。我是一个比较佛性的设计师写设计类文章也是同样的佛系,了解我的人都清楚之前的文章一般时隔时间不是那么规律,原因是我希望更好的沉淀和进行总结,才能分享出来更好的内容给大家。也一直在构思、内容、框架,是否能帮助到一些人,在距之前的一篇《关于设计师简历作品集那些事》已有两年之久,感谢平台,收获了很多粉丝以及单篇17万的浏览量,同样在之前的设计文章干货中帮助了很多人,留言咨询我也给予了一些指导,帮助很多人。有一些设计师顺利进入到心仪的公司以及大厂。从自身方面也挺开心和成就感。 在平台下面有很多留言的朋友,其中有设计师朋友ID:木十一小透明说,“本人以为如果有实例就更好了”的留言。这个必须有,那么今天就安排上,走起。

此篇文章受用于正迷茫,懵B,正在准备作品集冲大厂的你,正好它来了!

本篇文章会是上篇文章的进阶提升2.0版本。之后也会陆续有3.0…本篇会从各个方面进行解析,思路流程,框架,以及作品集的规范性,组成部分等方面进行展开说。通过一些例子让你更清楚如何去做自己的作品集。希望这篇文章结合上一篇作品集文章结合看疗效会更加显著。

好了废话不多说了 开整

 

2.作品集的重要性

作品集的作用不少设计师都知道它的重要性,但往往还有不少设计师不知如何进行梳理、排序、排版,放哪些作品。作为一个设计师需要有一个作品集,作品集是对于你能力上、成长、以及经历上的判断,在众多的作品集中 如何能脱颖而出,这个也是需要一些技巧的。希望能通过本次文章能有所收获。

undefined

现在平台各种的作品集,各式各样,结合现在设计流行趋势是没问题的,但有一些“机构”或设计师对于作品集来说还是有一些误解和跟风,甚至同质化严重。我的理解作品集最初是自己的作品集合到一起进行排版做个整合。最终找工作的时候可以给面试官看的,仅此而已。但现在的情况有所不同,有很多已经忽略了作品集当中的作品能力核心质量,而是在最终的作品集的样式表现使劲,导致现在的作品集华而不实,很多设计师把作品集搞的很漂亮,但核心的能力以及作品薄弱了,忽略了作品的本质。作品集的外表样式来说是提升作品的品质感,和提升作品的可看度,是赋予作品灵魂,好的作品集不只是一个包装而已,也是要有好的作品内容相结合才是最终的结果。

对于作品集来说:

2-1从大厂的角度对作品集十大衡量标准

2-1-1对于设计师基础判断

一份作品集是对于设计师从审美、创新、沉淀总结、设计能力,思考,作为基础的判断。

作品集是一个敲门砖的说法,设计师要作出专属个性,艺术范的作品集尤为重要,内容作为核心,包装作为附加。

undefined

2-1-2从作品集看出是否团队中所需要

作品集所呈现的作品,作为专业性的面试官只要一眼扫过就知道它是不是我们团队要找的人,从设计调性,人员的能力模型招聘需求方面,创新,能力都会快速锁定,比如团队中缺少插画的设计角色,当一个作品集中看到求职者插画能力,色彩能力,创意能力很强,那么很容易被锁定。或者团队中,品牌中调性是很年轻,潮,运用的设计技法比较新颖,好玩。那么作品集的作品,以及作品集的包装很符合这个公司调性,那么也很容易被锁定。

契合度完全在一份作品集中初步判断。

undefined

2-1-3通过作品集可以了解设计师的能力如何,哪些比较强项

同样作品集是一个设计师的沉淀,总结,整合。一定是把最好,最优秀的一面展示在作品集中。所以其中的设计作品,也是招聘者判断设计能力的标准。快速判断设计中你的插画能力比较强,还是版式,色彩,交互哪个模块比较有优势。和招聘岗位职责的要求是否符合。

通过作品集就知道专业性的长板和短板。

undefined

2-1-4设计的类别是否完整

现在对于进大厂设计考核的标准简直就像古代选宫女一样,严格,全面,多才多艺,啥都会干。

设计师的评判就是设计要好,有创意,色彩搭配,设计思维,设计流程,项目落地,审美要好,各种软件要会,甚至插画能力,C4D,AE动效,交互能力等等加分项。所以好多设计师都学杂了,没有勇气在学设计!无时不刻的在填充自己的能力。落后很容易被拍在沙滩上,对于招聘方看作品集的完整度就是看你在整个作品集中类别分类都有什么。说白了就是你都会啥绝活。比如IP形象设计,运营设计,视觉设计,品牌设计,插画,还会交互 UI界面设计。这样设计师就比较“吃香”,可以判断你属于综合性设计人才。

undefined

2-1-5设计师的设计精细化

对于设计师的精细化是从设计中看得出,细节上的处理,以及做设计的时候是否有精心化,把设计做到满意及标准化。比如做设计的时候界面字体规范不对,图标的粗细不同,画的插画比较粗糙等等。都是针对于设计师精细化的一种考核。对于精细化能考核看出,设计师是否对于设计的高要求,对于细节把握的程度,对于质的标准。很多刚进入行业的设计师在精细化上的确缺少能力。这也是需要工作多年后逐步的习惯性才会让自己对于作品的细节把握更好,更稳。

精细化也是对于设计师的一个态度问题。毛躁的设计师做的设计就倾向于粗糙,稳一点的设计师对于作品就会照顾得到精细化。在设计走查的过程中知道哪些存在问题,哪些需要更好的迭代和修改,也是考验设计师的自我“修养”

undefined

2-1-6了解设计师的设计方法及思维

在整个作品集中除了作品视觉以外,更多要看的就是设计思维,设计流程和设计推导,这样才能体现出两个维度.

1.你在设计的时候是动脑了

2.这个作品是你做的

往往有一部分设计师做设计觉得最终做出效果图就行了,但往往不是这样的,设计师是需要思维灵活,具有天马行空有一些创意创新思维的。所以做设计师的时候应该有一些推导呈现在作品集中,也是很多公司在看的。不止看视觉还要看设计师是不是有思维的设计师,思维是内核,设计作品的呈现,流程,方法给予的作品意义。

比如做一个IP形象,如何定义,设计策略是什么,设计目标是什么,设计价值是什么,设计流程和设计推导是哪些等等这些就是设计师需要以文字或者图片进行阐述的,所以我们要做一个会思考的设计师。

undefined

2-1-7设计师的总结能力

设计师的总结能力是从设计方法进行总结,另一个就是从自我出发进行总结。往往这个环节是很直接。分析,归纳,沉淀,总结。

总结是对于自己的一个自我判断。具有条理清晰,透彻,具体,深入,明确,逻辑性强一系列特点。很好的总结能力在总结的过程中可以发现问题,解决问题。

undefined

2-1-8是否有落地项目

作品集中的项目是否落地尤其的重要,主要考核你的经验,是否能很快上手做设计工作,所以如果有真实项目是很重要的。其中项目价值,项目完整度,类型,项目中角色,项目中思考,项目中遇到问题如何解决问题,项目中协作,沟通等等。

说白了如果有落地项目来公司就直接上手干活,如果没有落地项目还需要进行前期的培养。时间成本,人员成本也是比较高的。如果有一个落地项目知道其中的过程,甚至参与过其中的环节那么在有新的项目也会得心应手。特别那种在校大学生最好有实习的机会去工作,这样为自己攒一些能力,新手设计师同样能参与到项目中是对自己的一种磨练和提升。

undefined


2-1-9作品集的差异化

作品集的差异化,就是不同,独特性,所以作品集一定要具有一定的自我风格,杜绝模版化,如果一个设计师套用一个模版,那么这个设计师是懒呢?还是设计不行呢?对于你能力产生一种判断,设计的可以作为借鉴,但切勿抄袭。作品集的差异化,有特点,有设计感,有层次,从感官上眼前一亮,才有机会继续往下观看,这个也是技巧。

undefined

2-1-10.作品集的设计表现力

对于作品集来说除了内核的内容作品以外,外包装就是作品集,对于作品集的表现力说白了就是好看且好用。表现力各有所需,每个人定义的风格来说都具有不同,但无论选择什么样式,设计出的一定具有一定的艺术感和设计感,根据现在比较流行的一些技法结合到我们的作品集中,进行表现,比如线性的,透视线,酸性,大字,重复,图章,标签,等等都可以融入到设计的表现力中。

说白了设计的作品集不要老气,要新颖,独特性,艺术感,设计感。流行的趋势,就没毛病。表现力也是通过色彩,图形,字体,插画等进行的版式。具有一定的层次感。如何进行表现力在后面会详细提到,高清大图配文字哦。耐心往下观看!

undefined

 

3.从个人层面的作品集

上面说的也很清楚,其实考核的标准也是设计师需要做到的标准。但从设计师角度来说对应现状考核要求去做自己的作品集是一点问题没有的,对于设计师大致核心的这四点

3-1作品集做好看

3-2作品集要全面完整及精细化

3-3展示自己的设计能力

3-4 设计思维和流程的体现

其实无论是公司角度,还是个人角度核心的目的就是公司想找到合适的人,设计师想找到合适的公司。

通过作品集进行前期的判断,但不少面试官从作品集的“好看”忽略能力上的实用性。导致工作中一步一个坎,设计师的现状觉得漂亮的作品集就能找一个不错的工作,其实这个算是个病态。漂亮的花瓶,不实用也不易用。说白了最终就是作品集好看+设计作品精细化+落地 才是各方所需要输出的最终目的。

也祝找工作的朋友们,幸运!找到心仪的工作。

 

4.作品集的适用范围

undefined

遇到过工作了很多年了,也攒下来了很多作品,但最终做成作品集没有思路进行去梳理,也不知晓有些作品该放还是该pass、梳理如何梳理、排序如何排序、设计如何设计、增加什么内容。

也有遇到过视觉传达专业的学生。干脆不知什么是作品集,自然更不知作品集如何做,也没有什么作品,等等。所以让大家清楚如何做成属于自己的作品集

 

5.设计作品集的八大流程

5-1 作品集框架-框架要好思路清晰

作品集框架好比一个脑图规划,会更直接更清晰可见,可以在Xmiand软件中实现,比如信息的层级,页数,结构,排序,都会有序规划。脉路清晰,结构清晰在后期设计作品集的时候会更加快捷。

比如首页-个人简历-目录-设计作品排序,然后首页放什么内容,目录放什么内容,更好的对作品集层级规划。undefined

5-2 作品集设计作品的分类-类别归档有序查找

如果多年的设计师会有很多的作品,比如banner,UI界面,B端的设计,海报设计,插画 ….很多,这个时候就要有分类,有归类,在挑选作品的时候一定把最好的挑选出来,不好的千万不要放,不要为了量,要质!这个环节我一般会建一些文件夹,分好类,比如banner,海报,字体,项目界面,插画、然后把挑选的类别作品放入到文件夹中,在作品集排版的时候方便查找和使用,至少不乱!

undefined

5-3 作品集的风格定义-风格调性决定气质

风格调性决定气质,就好比一个人的穿着,给人感官是可爱的,还是酷酷的!

作品集同样风格定义决定了气质,比如想要酷酷的感觉,还是可爱风格,还是国潮 …

在设计运用和表现中元素、色彩、板式、字体都会有不同表现

undefined

5-4 作品集色彩的定义-色彩觉得了作品集的风格

色彩的定义和风格定义是具有关联性的,比如想要做一个潮酷的风格那么对应的色彩在运用中一定是黑色,白色,或者灰色为主,搭配一些辅助的蓝,红,黄,等颜色

如果调性上选择可爱风格的,那么选择的主要颜色一定是饱和度偏高一点的红黄蓝绿等颜色、通过对比色、邻近色进行设计,颜色决定了作品集的气质。

undefined

5-4-1 推荐几款不错的配色

undefined

5-4-2 推荐几款不错的渐变色

undefined

5-5 作品集的元素/图形/版式收集

这个环节基本就是为自己增加一些灵感元素,设计本身就不是闭门造车,多看看表现形式,排版,字体的应用,色彩的应用,元素表现等等。把好的元素,设计收集到 灵感库中,最终在设计的时候结合自己的想法进行设计,也就是我们所谓的借鉴。

undefined

5-6 作品集设计

在设计的时候一般情况下我都会使用PS、AI、SK进行设计。

尺寸:1920*1080.16:9. PPI72

颜色模式:RGB

PPI:72PX

举例在AI中我会建立一个1920*8640(可放8个1920*1080)的画板命名为画板1,然后复制出一个画板2,画板3 或者更多,根据自己的版面多少就建立多少画板。

这个时候就可以在空白的画板进行设计。在设计的过程中首先不要考虑太多细节,先给一个定义好的颜色,然后把元素,文字(先不考虑什么字体)先摆上。

然后整体完事在进行细节调整,字体的大小、色彩的对比、元素的摆放位置。

先做加法,后做减法。

首页干净、简约、核心的元素,文字凸显出来即可。

一般设计完通过AI 导出PDF格式

undefined

5-7 作品集导出PDF

设计完毕,需要导出PDF的,切记!!!不要弄PNG/JPG的长图。

怎么导出来PDF就不详细说了,如果PDF都不会还做什么设计师!还做什么作品集!

最后说一个导出小技巧:AI导出PDF的时候在预设选项中选择,“高质量打印”不要问我为什么这样选,信我就对了!

undefined

5-8 PDF进行压缩

正常情况下导出作品集PDF都会很大,一般招聘网站上传限制30MB,如弄了一个500MB的传不上去尴尬不尴尬,如果给面试官或者HR下载龟速很慢也很尴尬,讲话了谁的时间都是宝贵的,下载这作品集就花了五分钟,看你作品集的概率就减小了。很多压缩的平台,自己动动小手找一找!实在找不到问我!!!

undefined

 

6.作品集的六大组成部分

了解作品集组成部分在作品集布局时有效排序并设计,给作品集设计提供了快速有效的设计流程。

6-1首页(封面)

封面是必不可少的,封面主导着整个作品集的规范,调性。同样把图形信息和文字信息汇总在一个版面中,更好更快传达出信息,封面代表的个人展示的作品集的样式,很直接,好看,潮酷或者创意都会具有抓住浏览者或者招聘者的眼球,所以第一封面在设计的过程中一定从色彩,创意,图形,版式吸引才有更多机会和欲望往下观看。

先吸引,后详细查看,一般招聘者或HR在筛选作品集的时候短短几秒,怎么能在短短几秒中脱颖而出继续了解你,封面起到了很大作用。

在封面需要展示的内容:

6-1-1 作品集标题

6-1-2名字/艺名

6-1-3标签

6-1-4年份

6-1-5英文

6-1-6元素

6-1-7图形

例图

下面作品集是我的学生栗子的作品集,过程中由我进行的指导。经学生的同意,拿栗子的

作品集给大家进行讲解。感谢设计师栗子 站酷ID:栗子Ocean

undefined

第一步

首先在做作品集封面的时候把需要展示的文字,图形,颜色先摆放上,然后在进行调整设计。初步的摆放略显粗糙,层级变化不够明显,所以可以通过比较流行的线条,透视线,等作为背景,让背景充实起来。

undefined

第二步

定义风格,上面提及过,风格的定义主导了整个的调性,前期考虑到潮酷,年轻化的设计,没有运用太复杂以及渐变的背景,干净简约,背景主要的功能就是衬托前面图形和文字信息,背景和前面信息具有层次感更突出。这个时候尝试用线条进行信息分割,线分割也要考虑布局这个作品集首页运用的左右布局,左边运用了AI工具栏的样式,右边线分割。具有了一定的设计感把一些文案进行区分文案信息要有文字的主次分明,在封面,作品集三个字是需要明显的明显设计角度出发点是要么大,要么颜色有变化,标题,副标题,以及内容在标准化设计中要有一个定义。

风格定义:潮酷

颜色定义:黑/白/绿

图形元素:黑白插画

装饰元素:几何形

字体:中文,英文

undefined

第三步

文案摆放入到布局的网格中,在字体中要有大小,颜色,粗细,中英文的变化,以及图形结合文字/英文布局,从文字中定义主要信息层级,次要信息层级,以块状有序的进行排版。刚设计的时候不需要考虑颜色,都用一个颜色,或者白灰就行,一旦都摆放完毕,在根据情况给予颜色,比如整个画面有黑,有灰,在来一个绿色,会更让整个画面更加的提气具有变化感英文+图形结合最终放在顶端底部运用,整个界面设计丰富了很多。

undefined

第四步

文字,色彩,版式也差不多了那么还缺少一个图形主角,图形构图,酷酷的雷电,时光机宇航员,以及小怪物,以黑白色调主调。和整体作品集风格契合度加强。视觉点具有一定爆发视觉冲击点。文字信息和图形信息结合传达表现设计意义。

undefined

第五步

最终到这一步基本接近首页设计尾声,进行精细化设计处理,以及设计走查,在做加法同时在做减法,把多余改去掉的去掉,增加的增加,整个过程中还缺少一些辅助图形可以添加运用辅助图形,以及比较酷酷的,复古一点的设计元素,增强设计感和视觉感让画面更饱满。信息层级更清晰

undefined

总结

运用了几个步骤大致讲了一下在作品集封面时候的步骤和思路。设计不可直接复制,但可给予一些灵感。通过这个步骤和思路清晰情况下在进行设计就轻松的多了。设计表现形式不止于此。还有更多表现形式。通过创意发挥出设计的本质。希望通过这个小例子给大家一些方向和灵感思路

6-2.个人介绍  

此页的重要性就不言而喻了,可以说那是相当的重要了 !从作品集了解你的设计能力,那么从个人介绍中了解你的个人信息,教育背景,获奖背景,项目背景,以至于你的联系方式,有很多同学在个人介绍中忘记留联系方式,导致尴尬到面试官联系不到你!个人信息中,有项目一定要把项目写明,并且在项目中担任的角色,做了哪些工作。可以简单描述,但必须要清晰。还有就是在个人介绍中个人照片一定要有艺术感点,别弄一个随便的自拍照放上去,要有点质量,千万别整个西装革履打个领带,那你可能整错了,要做销售那照片没问题。

信息层级:

6-2-1.名字,

6-2-2.教育背景

6-2-3.电话/邮箱/微信

6-2-4 .二维码

6-2-5.个人照片

6-2-6.标签

6-2-7获奖/参赛

6-2-8.项目

undefined

个人信息页从设计表现上延续了首页风格调性。增加信息层级内容,在设计表现中线框浏览器样式,以及英文线重复设计,并在整个设计中增加标签以及透明塑料布作为视觉辅助效果,并在下面破损的纸样式作为设计层级变化。让视觉呼应切变化。增加了更大视觉感。通过复古的一些元素视觉效果顺延。

6-3.个人目录

个人目录要写清楚列表,这样也会更清晰让浏览者和面试官更好的找到要看的内容,引导面试官清晰信息类别层次!比如: 运营设计 品牌设计 项目设计 插画 C4D等。什么样的设计师针对性的进行排序和分类,根据自己情况进行类别分类!

undefined

目录分类条

undefined

6-4.设计作品排序

设计作品的排序其实也是有一些技巧的,要找运营视觉设计师,那么就需要优先放视觉的内容。要找UI设计就优先于项目部分!

运营视觉设计师:比如海报,banner,主KV,插画,H5,IP吉祥物,C4D。

品牌设计师:主KV,包装设计,VI,海报,字体设计,图形设计,IP吉祥物等

UI设计:banner,海报,插画,H5,交互设计,B端,C端。

电商设计师: banner,网页设计,H5,专题页,详情页,插画,C4D

当然了,如果没有定义是什么设计师,还能做视觉还能做品牌,还能做UI部分的工作,那么从作品中挑选出不错的放在作品集中,同样也要考虑到优先排序问题。

6-5.样机展示

样机是什么?在作品集中是为设计提升B格、提升设计感的、作为辅助、提案所应用。

如果没有样机作为设计显得单调,如果有样机是让作品更有品质。但我发现部分设计师为了样机而样机,甚至用的样机不恰当和设计内容完全不匹配,为了好看确没有实际意义。频繁用样机也不好,样机老气也不好。所以样机除了体现设计的品质,合适最重要。我发现作为学生做的样机很喜欢都放在整合一页展示,本身就是提升设计感,放大设计放在一页显得单调,还不如不放。所以作品集一定要单页去排序摆放。会让设计更具有品质感

错误的样机应用排版

undefined

正确的样机应用排版

undefined

6-6.总结

在最后一页的时候最好写一些总结性话术,可以从你的长板,短板进行说,千万不要说客套话,也不要从网络摘抄。要客观的对于自己的评价和总结。让面试官更清晰更快的认识你。

 

7.常见作品集形式

undefined

在这几种形式PDF是最常见的了,而且也是最经济,方便,直接的,但要注意的就是大小上要注意,最好30MB-50MB最佳的。长图来说不太建议,不要问为什么,你懂得!第三方设计平台比如站酷,UI中国,等设计平台。但这个在观看的时候体验感一般!最后一个就是官网,个人官网到不错,但需要设计,程序,域名空间,繁琐了点,在整个形势中,PDF是比较直接的也是大家接受度比较多的。无论什么样的形式,根据自己情况而去决定。但大家都在用也有一定道理。

 

8.作品集的加分项是哪些

undefined

 

8-1.C4D在作品集中的体现绝对的具有一定的加分,无论是运营,品牌还是电商甚至UI都需要有C4D的呈现,品牌中IP吉祥物3D样式,电商中详情页,banner应用3D样式,运营设计中海报,视觉运用C4D,C4D的表现也无处不在。也备受设计师以及现在审美需求所需要。

8-2.插画最为近几年的在设计中表现形式,讲究情感化设计,通过内容进行图形,插画表现,更好的让用户所接受,同样插画在品牌设计,包装,UI,运营备受关注和应用,如果有插画能力那么在作品集设计作品中进行结合具有一定的加分项。

8-3.包装样机,必不可少,也是作品集的加分项,但不要乱用和频用,恰当适合为佳。

8-4.设计的作品越多越好,但一定要好的作品放进作品集,作品集一定是把最好的东西,最能代表设计能力的作品展示出来。不要纠结于放哪几个或者都要放。

8-5.设计一定具有一定的规则,创意。比如banner,为什么要用这样的创意,为什么要用这样的字体,为什么要用这样的颜色,都是有一定的技法和思维推导的,描述清楚。作一个思考的设计,而不是做一个素材的搬运工!

8-6.解决问题是考核设计师解决事情能力,在项目中,甚至在设计中一定会遇到很多问题,比如沟通问题,协作问题,设计问题,在设计中遇到的问题是什么如何解决的。说明也考验了设计师的总结能力,做事态度和做事解决能力!设计师的工作也是为产品,视觉,营销解决交互,体验,视觉的事情。所以如何解决也是看待你在工作中是否能把事情更好解决,也就是我们所谓的沉淀经验。

 

9.作品集的设计表现

undefined

undefined

undefined

 

undefined

篇幅原因就介绍这些吧,还有比如用一些酸性的设计,线性的设计。等等,就不一一举例了大家也可以在设计过程中发现美。如果有什么疑问和不了解的也可以随时问我。以上的干货希望大家慢慢吸收。篇幅有点过长。

 

10.作品集的压缩好物

PDF压缩好物,主要免费,在线的。卡卡就是一顿压!好不好不要问,自己体验才是真舒服了留言说一声!

undefined

 

11.招聘职责参考物

下面 在网络上找了几个互联网公司的招聘信息,为什么要放这个,而且还是已经过去的事,目的是让大家心里有个数,看看现在招聘对于设计师的职责,要求能力都需要会啥,啥行自己对照一下,哪块不行补哪里,而且根据职责要求,工作内容进行作品集的设计以及排序。要有针对性的准备,不能盲目、迷失、要有个方向感!

undefined

 

12.你敢问!我敢答!

下面 在网络上找了几个互联网公司的招聘信息,为什么要放这个,而且还是已经过去的事,目的是让大家心里有个数,看看现在招聘对于设计师的职责,要求能力都需要会啥,啥行自己对照一下,哪块不行补哪里,而且根据职责要求,工作内容进行作品集的设计以及排序。要有针对性的准备,不能盲目、迷失、要有个方向感!

undefined

 

顺叔最后想说

这篇文章准备了很久,文字,以及配图都是很精心的准备,希望能通过我的经验分享大家能受益,这些年一直输出些设计文章,对于每一篇文章我都是很精心的去设计以及写内容。写这篇也是经过了几个凌晨。很用心在写。当有人给我留言,通过文章有一些灵感,找到了不错的工作,帮助到了他,对于我自身来说还是很开心的,具有成就感。赚到的就要给人,学到的就要教人,我虽然比较佛性,文章一年可能就一篇,但每一篇我都认真的对待。上一篇作品集文章达到了17W浏览量很欣慰,这篇是基于上一篇做的提升版,其中有很多技巧个人觉得还是比较有用。给正在迷茫,不知所措准备作品集的你一些灵感和思维,如果觉得不错的话 希望多给顺叔一些支持和点赞也不枉我认真熬夜的去写这篇设计干货!好了话不多说,希望能帮助到你!你的支持是我的动力。不断的有设计作品和设计干货。我们都是在设计路上的陪伴者!!

 

原文链接:zcool

作者:张增顺

转载请注明:学UI网》关于设计师作品集那些事2-提升篇

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

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

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

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

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



有哪些高质量的设计周刊?

seo达人


1.体验碎周报

这个估计大家都知道了,作者是:龙爪槐守望者 ,目前已经坚持发布了94期了(每周一期,94期是什么概念!)会在知乎,公众号,语雀文档,个人博客每周日晚上同步更新,因为大大本身就是一名产品体验设计,所以周刊内容都跟产品,体验,设计相关,内容也是非常的干,每周看一看,能发现不少优质的设计资源。

查看地址:
https://www.ftium4.com/categories/%E4%BD%93%E9%AA%8C%E7%A2%8E%E5%91%A8%E6%8A%A5/

图片

 

2.DEX周刊

这位博主也是在非常有名的:丁一,DEX周刊已经更新了114期,主要是是偏向设计,交互体验,前端开发,国外设计趋势。国外的内容比较多,话说很多新工具新趋势不都是国外先火起来的吗?值得一看,每次看完,不禁感叹:哇又开眼了,如果你是设计师又对前端感兴趣可以收藏啦。

查看地址(需要注册):
https://newsletter.dex.group/

图片 
 
 

3.月球背面

听起来真的很文艺哦,我很喜欢,不只是因为他们的周刊,是因为这个团队分享的一些Figma的插件简直太好用了,周刊也是刚刚开始做,目前更新到了12期,不过内容都比较实用,不想漏掉每一篇文章,墙裂推荐!

查看地址:
https://moonvy.com/blog/

图片 
 
 

4.优设每月精选集合

这个是按月更新的,可以打开优设网关注这个小编:陈子木。每月都会更新视觉相关的精选集合,内容也是挺不错的,还有源文件分享。

查看地址:
https://www.uisdc.com/author/chenzimu7/publish/post

图片 
 
 

5.且曼B端产品设计

“不积跬步,无以至千里;不积小流,无以成江海”。系统知识的搭建来自于日常阅读的积累,周刊汇集本周优秀文章案例,愿和大家一起学习成长。主要是针对B端设计文章的汇总,在公众号发布,目前已经更新了68期,学习B端的小伙伴,可以直接关注了。

查看地址:
https://mp.weixin.qq.com/s/KzD0-OEEFLFYS_27NzpTyQ

图片 
 
 

6.BLUE·周刊

非常不错的每周刊集合视觉,交互,产品相关的文章都有分享,目前已经更新了20期啦。

查看地址:
https://huazi.zhubai.love/

图片 
 
 

7.产品体验周刊

小冯同学的产品周刊,内容包括产品亮点、产品吐槽、产品动态,每周一更新,目前已经更新了21期。

查看地址:
https://www.yuque.com/xftx/huxvh4

图片 
 

 

本次就先分享这么多,应该还有很多高质量的周刊,高效君还没发现,小伙伴有知道的可以写在评论区,

其实整理周刊还是有一些好处的

1.能提高自己的搜索能力,提高工作效率;

2.开阔眼界,互联网更新迭代非常快,需要不断获取新的知识;

3.把筛选出来的优质的内容分享给其他小伙伴,也是很不错的;

4.整理自己的知识库,做设计知识的沉淀。

 

原文地址:高效设计笔记(公众号)
作者:高效设计笔记
转载请注明:学UI网》有哪些高质量的设计周刊?

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

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

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

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

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



我为什么要去看美院毕业设计展?(设计)

seo达人


为什么要看展览 

无论是美院毕业展还是其他形式的展览,我们都可以经常去看看,也要多去美术馆、博物馆和展览馆等多逛逛。对于设计或者美术类工作者来说,艺术感的熏陶至关重要,长时间的艺术渲染才能提高我们的艺术感知。
 
对于设计师来说,可以通过美院毕业设计展的作品了解一些创新方式,提高我们的设计创新能力。这些优秀的创作作品可以激发我们的灵感,也能让我们保持对于设计的初心,只有持续的燃放着创新的脑洞,我们才能做出更有创新的作品。欣赏优秀的作品也能重新燃起我们的激情,每次看完展览之后内心总有创作的激情,让我可以保持对于持续创作的动力。
对于设计不仅是我们的工作,更多的还是拥有一份兴趣,从小培养出来的兴趣爱好。也只有兴趣才能让我们更热爱设计,因为热爱才能自发的去研究和驱动,也才能做得更好。希望今天的分享可以和大家一起共鸣,点燃我们创作的动力,保持对行业的初心。 

——————————————————————————————————————————————————————————

 

一年一度的毕业季已经开始了,对于设计师来说比较关注各大艺术院校的毕业设计作品,最近较为热门的话题就是美院毕业设计展啦!有些是线上的展示形式,也有在线下举办展览,通常在院校举办居多,也有一些知名院校会在展览馆和美术馆等举办。
 
大部分展览都是对外开放的,比如中国美院的毕业设计展,今年在浙江展览馆、浙江美术馆、西湖美术馆、象山校区等多个展点举行。大家也可以看看自己所在城市的展览情况,或者搜索关注各大艺术院校的公众号,通过线上形式观看也不错。
 
作为生活在杭州的黑马哥,中国美院的毕业设计展最近也去看了一圈,由于比较难预约,我选择了规模较大的浙江展览馆去观看。
 
浙江展览馆主要展示的是中国画与书法、创新设计、艺术设计、文创设计、影视与动画艺术等。下面挑选了一些现场的照片,和大家一起感受艺术与设计的魅力。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

以上仅选择性展示部分现场照片,如有机会大家可以去看看,或者选择线上观展。
(关注中国美院公众号或者展览馆、美术馆等公众号获取这方面的信息来源)
 
 
原文地址:黑马家族(公众号) 
作者:黑马青年 
转载请注明:学UI网》我为什么要去看美院毕业设计展?(设计)

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

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

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

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

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


用户体验写作:作为设计师如何处理产品文案

ui设计分享达人

用户体验设计师经常需要兼职各个角色职责,除了线框图和原型制作之外,还有可能与团队一起研究、写作等问题。这样的例子不胜枚举,用户体验是一个不断发展的多学科领域,因此优秀的 UX 设计需要广泛的技能开发,UX写作位居榜首。

一、内容策略简介

关注用户从内容开始,内容策略是所有产品信息的制作和开发。用户体验(UX)写作是该学科的专长,它专注于帮助用户用语言实现他们的目标。

语言帮助用户到达他们想去的地方,通过关注用户想要实现的目标,内容策略可以建立忠诚度和信任度

UX设计师思考页面上的信息层次结构,然后,这将指导用户操作。UX与研究人员一起测试有关语言的假设并提供专业的见解。

当您拥有 UX 写作的基础,并参与品牌建设时,就会发生惊人的事情,用户体验写作可以让品牌茁壮成长。


二、用户体验写作最佳三个原则

1.清晰

通常在产品中,使用的词是软件操作,请用动词,它往往是句子中最有力的部分。它将与用户的某些操作有关,

保障用户使用中清楚,需要删除技术术语并将操作置于用户的上下文中。


2.简洁

简洁不仅意味着简短,还意味着简单高效。当我们写作时,需要查看我们的信息每个词语都有不同的工作。


以上是产品写作中的常见问题,在这里不需要标题。在系统接口中很常见,研发提供一种状态,我们通过这种状编写文案。我们应该确保内容优于设计,视觉效果与要表达的内容一致。尽量不要把信息塞进不适合的盒子(代码)里。



在这里,我们删除了标题。正如研究表明,大多数人不会阅读屏幕上出现的每个词语,用户倾向于扫描。他们的眼睛会遵循 F 形图案。阅读第一行,第二行,然后开始向下跳过页面,只捕捉每个句子的第一个或第二个词。出于这个原因,保持我们的文本不仅简洁而且前置。将重要概念放在首位,这样做是为了让人们在浏览页面时能看到那些重要的词。



这个原则永远适用,将最重要的文本放在前面,然后无情地编辑后面的内容。


3.有用

号召性用语 (CTA) 引导人们进行下一步,您希望引导用户到达他们想去的地方,号召性用语需要与用户想要做的事情产生共鸣,这里的“好的”不是一个好的行动号召。

“再试一次”是一个不错的选择,这不是全部场景,如果用户忘记了密码,而唯一的按钮只有“再试一次”,用户可能会感到沮丧,我们需要给用户多一个选项「忘记密码」。


注意写作时需要结合使用场景,它可能需要提供的一些基本功能,但可以提升产品的用户体验。



4.最佳实践总结

如果您注意这三个原则,您将更好地与用户建立联系。


这三个原则并不总是协调一致的,他们之间有一种张力在互相竞争。


当我们使文本清规则时,文案仍然很长,而且不太好阅读。当我们使文本简洁规则时,它使文案更短,但可能牺牲一些清晰度为代价。最后,当我们使文本有用规则时,它变得更长且更不易阅读。

三、建立产品品牌文案

1.品牌原则

从一个品牌中,我们可以筛选出 3 或 4 个形容词,以及希望用户如何看待它。提取这些形容词,可以采用头脑风暴练习。

想象一下,如果要设计一个约会产品

您会在产品资料中加入什么词或信息?让它在众多产品中脱颖而出,是什么让用户觉得它最有趣?

是什么让用户想要点击并想要了解更多信息?

然后,您可以将这些品质提炼成描述性词语,这些将成为您的品牌原则。


Google Pay 的原则是:新鲜、善解人意、平易近人。 


2.语气

想想您在不同的环境或情绪中听到声音是什么样,这是语气。

声音和语气之间差异,是声音传播手段,语气是根据情况或内容而不断调整的。在一个产品中,就像在不同的情况下以不同的方式与用户交谈,语气的利用容易带用户进入情感化的设计。

例如:

  • 抱歉,网络连接失败,请重新连接
  • 暂无内容,请刷新试试

3.音谱(产品阶段)

将不同的阶段映射到用户旅程中,可确保用户在整个产品体验中以一致的方式使用产品文案。

对于产品,您的文案写作可能从信息丰富到鼓舞人心或者幽默风趣。创建产品开端与终端后,您需要确定要映射的用户旅程中的哪些时刻,考虑用户体验中不同的里程碑或交互,如注册、引导、或错误提示之类。

为了帮助您确定这些将落在频谱中的哪个位置,您可以考虑:

  • 用户的目标是什么?
  • 那一刻他们可能有什么感受?
  • 你希望他们有什么感觉? 


四、我们做一些写作练习

现在,我们将前面讲的内容,融合在一起做一次UX 写作练习

UX写作原则


举个例子,第一次使用 Android Pay 时需要对用户说什么?

第1步

在流程开始时,从以下描述性内容开始:

第2步

思考良好的用户体验写作的三个原则,文本清晰有用,但并不简洁。让我们查看看哪些信息是必不可少的,哪些部分可以使用视觉效果?最后编辑为如下所示:

Google Pay 的原则是:新鲜、善解人意、平易近人。

第 3 步

文案已经清楚,简洁和有用,现在需要考虑语气词,还有就是“这段文字是否传达了品牌?”不多,感觉很一般。

因此,回到品牌原则,需要考虑如何让它更新鲜、更令人兴奋,因为这可能是用户的第一印象。

五、你的用户体验写作清单

有了这份清单,您就可以让产品在语言上脱颖而出:

  • 用户至上:关注您的用户
  • 清晰:用没有行话的语言和上下文写作
  • 简洁:以高效且可扫描的风格书写
  • 有用的:以指导下一步行动的方式写作
  • 关于品牌:定义品牌的声音并应用适当的语气

作者唐小白92

转载请注明:站酷

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

魏华的微信.png

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

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

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

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


B端设计师如何做产品分析

ui设计分享达人

行业对设计师的要求⼀直都在不断革新,只有「⼀技之⻓」的设计师已经很难满⾜⾏业需要,产品分析已经不仅仅是产品经理的工作内容,对于 UI 设计师来说,也是必备技能之一了,尤其是对于 B 端领域的设计师来说,更需要拓宽视野,思维前置。

那么,该如何去做产品分析呢?本文将从产品分析是什么,如何做两个方面来讲述,为大家提供思路,做真正落地的对设计有帮助的产品分析,提高自己理解业务、处理业务、解决问题的能力,体现出设计师的价值。






1.1 产品分析定义

1.11 B端产品是什么

对于 B 端产品来说,它只有一个目标,就是解决问题,通过对问题的分析得出解决方案,而任何一个问题都不会只有一种解决方案,在权衡利弊后得出了最终的解决方案,产品就是解决方案的表现形式和实际载体。

1.12 产品分析是什么

从设计师的角度来说,产品分析通常是挖掘产品缺陷,优化产品体验,为产品迭代提供依据,比如:通过深度体验产品,挖掘产品的在功能、交互体验方面的不足,并通过分析制定产品优化方案。一款产品从浅至深拥有无数的可被挖掘的信息,这些信息本身是庞杂冗余无意义的,只有通过分类和清洗才能得到对人有意义的信息,本质上来说,产品分析就是在做信息分类和清洗的工作。

1.2 产品分析与市场分析、竞品分析



1.21 市场分析

市场分析是对产品所在的市场进行宏观的竞争态势和市场规模的分析。市场分析主要包括行业背景、市场现状和商业模式三部分。可以看到,市场分析其实是从很宏观的一个角度来切入,更偏向于战略层内容,因此市场分析也是三者中距离设计师最远的一个概念。用通俗的话来说,市场分析最主要的目的就是分析产品是否赚钱。

1.22 竞品分析

广泛意义上说,竞品分析就是根据分析目的,找到切入角度,对竞争对手或市场进行客观分析,找到竞品或自己的优势与不足,为下一步决策提供科学依据,其实就是「知己知彼」的过程。对于设计师而言,竞品分析的目的更倾向于寻找解决方案,比如:通过竞品分析来寻找参考从而解决自己当前遇到的问题。

1.3 产品分析对设计师的意义

  • 1. 设计:帮助设计师理解产品的历史和现状,避免设计时天马行空无法落地
  • 2. 业务:帮助设计师快速理解业务和融入新团队
  • 3. 沟通:可以帮助设计师同产品经理更好地进行对话,降低沟通成本



1.4 难点——业务难以理解

不同于 C 端,B 端往往有很坚固的行业壁垒,所涉及业务也非常难以理解,究其原因,来自以下两个方面:

  • 1. 业务逻辑复杂
  • 2. 远离日常生活



1.41 业务逻辑复杂

B 端产品很多时候,都是在原有线下业务的基础上进行数字化。逻辑的复杂度本质上是来源于这个行业多年来积累的足够成熟的业务流程与规范,而这些东西没有办法速成,只能靠不断地积累来增进理解。

1.42 远离日常生活

C 端产品的设计中,设计师大部分情况下都或多或少地就是用户本身,或者带有用户属性,比较容易产生同理心,去发现问题解决痛点。

而 B 端产品不是给普通用户使用的,是给特定群体使用的,这种特质就决定了设计师很难去真正地理解用户的处境,设计师最厉害的特质——同理心也很难派上用场。

1.5 误区

有的设计师同学,一接到产品分析的任务,到手就是先去网上看看别人是怎么做的,然后按着人家的结构对自己的产品进行一通分析,其中不乏用到了「用户体验五要素」、「SWOT分析」等看起来高大上的方法论。

按这样做,产出的分析报告不能说错,但是最起码是不恰当的,对设计上的帮助微乎其微。其中有这样两个问题:

  • 1. 与产品经理边界混淆
  • 2. 注重方法论,流于表面



1.51 与产品经理边界混淆

产品经理是产品的第一负责人,需要对产品的整个生命周期负责,说人话就是产品经理负责产品做什么不做什么,该什么时候做,而设计师关注的是产品的用户体验。产品是商业的代言人,而设计师是用户的代言人,二者本质上的不同,就决定了在做产品分析时关注点必然不同。如果按着产品经理的思路来做产品分析,得出大环境之类的太过于泛化的结论对设计没有什么实质性的帮助。



1.52 注重方法论,流于表面

用户体验五要素,swot,等等这些高大上的方法论看起来非常有用,从多个维度把一款产品分析得非常清楚。可真实的情况时,往往新手设计师同学既不懂方法论的本质,也不懂使用场景,只是盲目地套用,导致产出的是一篇「八股文」一般的产品分析报告,过于全面但没有重点,什么都是点到为止,对自己理解业务和辅助设计没有实质性的帮助。

我认为,「方法论」本质上是经验主义,使用过去解决问题的方式来解决新的问题。在一定程度上,方法论是有用的,一些简单的问题,确实是有固定解法的,而且,解决问题也更快。但是在更难更特殊的场景下,方法论不再管用了。很多时候,问题表面上看起来一样,可是由于问题的背景不同,所以解法也是不一样的,这时候再采用方法论,就会产生思维固化,强行去套方法流程,得到的一定不是最正确的答案。



在确定了目标和分析重点之后,我们就可以开始进行分析产出产品分析报告了,在这里我整理了几个撰写时的原则供大家参考:

  • 1. 避免主观
  • 2. 思考要全
  • 3. 自上而下



2.1 避免主观——不要把自己当成使用者

第一点是我们要避免去主观臆断功能的合理性。正如我上面提到的一样,我们并非 B 端产品的核心用户,有些我们感觉反常的地方,但是其实有它的合理性,因为 B 端用户的痛点往往是在特定的工作场景下产生的。因此,在不了解真正用户和场景的情况下,仅凭经验下的结论往往是错误的。

我之前的一个项目的设计中,在给图表配色时,我最初的一个版本是用的近似色去完成的,在发给产品经理初审时被打回来了,理由是这种配色不够明显。我追问原因后才知道,我们的一部分用户是年龄比较大的用户,对比度足够高才能方便他们看清楚。最后出的一个版本是对比度非常高的配色,尽管从设计的角度来看这种配色美观度不足,但是能够让用户看得清楚。

在这个例子中,用户对于美观度并没有很高的要求,反而对于数据的识别度要求更高。我们常听的一句话是「己所不欲,勿施于人」,然而在B端的设计中,我们更要做到「己所欲,亦勿施于人」。

2.2 思考要全——使用者和决策者都要考虑

B 端产品有一个很重要的特点,购买决策者与使用者的割裂。我们在思考一个功能时,不能仅仅考虑使用者的体验,也要考虑决策者的想法。

比如钉钉的「已读未读」这个功能,相信大家对这个功能是槽点满满。但是在 B 端产品中,决策链上游是购买决策者即老板,因此就有了这个功能。如果只考虑到用户体验,这个设计从一开始就不该出现。但是,与 C 端产品的流量思维不同,B 端产品不是靠体验来吸引用户存活的,而是靠满足决策者的需要来活下去的。很多大家感觉不好用或者体验很差劲的 B 端产品,仍然活得很好,就是这个道理。

说句题外话,钉钉已经注意到了这个细节,在去年的一个演讲上,钉钉总裁也提到了对这个功能点的考虑,他举了一个场景,在不改变现有设计的情况下解决了这个问题,通过智能手表等外设来预览消息,而手机和电脑依然显示未读,自己考虑好了的时候再去回复。

2.3 自上而下——从宏观到微观

从战略层到功能架构,再到每个功能细节,采用金字塔原理去遍历,避免遗漏的同时层层深入。



在此处,我介绍一下我认为一份合格的产品分析报告应该包含的部分,各位设计师同学可以根据自己的需要进行适当调整。



3.1 文档说明

3.11 版本说明

因为产品分析是有一定的时效性的,且是针对某一个具体版本去进行分析的,所以在文档开头要列出自己所分析产品的版本,例如(飞书 V5.6.9,钉钉 6.3.35)。

3.12 分析时间

即设计师进行产品分析的时间,留档以供以后查看。

3.2 产品概述

此处要回答的问题是,产品是用来干嘛的,给谁设计的以及怎么赚钱的。



3.21 产品定位

即产品是用来干嘛的,不需要特别具体,只需要在大方面上对产品进行概括即可。举个栗子,抖音定位是一款短视频消费型产品,以“内容”的新鲜有趣为主,强调分享和信息获取,满足幸福快乐的美好时刻需要。

3.22 目标用户

即产品是给谁设计的,在此处需要对客户和用户做区分。客户一般是指企业的 CEO/管理者,他们来决定是否要斥「巨资」购买一款软件。比如说某公司的 CEO 最终决定买钉钉还是飞书作为办公协同软件。而用户一般是企业内的员工,他们使用软件来完成一些日常工作。分析目标用户的意义是,在之后的分析中,我们都要以用户为落脚点,去分析功能的合理性。

需要注意的是,此处并不需要去做一套完整的用户画像,只需要大概描述一下是产品的客户和用户的职位和核心需求即可。

举个栗子,对于某客服工作台产品,

  • 用户:客服,主要职责是接受用户咨询,帮助顾客解答疑惑。
  • 客户:公司 CEO,目标是对业务情况进行把控,提高客服效率。

3.23 商业模式

即产品如何赚钱,在这里,我们并不需要用各种很高端的工具——比如商业模式画布,去分析商业模式,我们仅需要知道产品的赚钱方式即可。作为设计师,我们不需要有产品经理那么专业的商业思维,但是我们也一定要能够从商业角度理解产品的价值,一款产品最健康的状态一定是用户价值与商业价值并存。因为本质上而言,用户体验也是商业价值的一部分。

对于B端产品而言,有两种最常见的售卖方式:

  • 1. 本地部署模式
  • 2. SaaS 模式



1. 本地部署 —— 按软件数量售卖

本地部署是指产品的应用、数据都存储在一台计算机中,这台计算机不与其他任何服务器、计算机相连。21世纪之前的传统 IT 公司大部分都属于这类,比如 Adobe 旗下的产品(尽管他们也在做云,但是更多情况下我们还是把 PS 当做本地产品来使用),那时候 B 端企业的商业模式是:主要服务于大企业客户,通过与顶级的合作伙伴合作,推出顶级的产品,提供一整套软硬件解决方案,并进行深度服务,一次性收取高昂的软硬件费用,并且每年加收不少服务费。

2. SaaS —— 订阅制

21 世纪后,随着云计算技术的发展,越来越多的产品开始部署在云上,也就逐渐发展成了现在的 SaaS 产品,从这个角度来讲,我们通常所说的 SaaS 产品其实就是将本地部署变为云端部署的产品服务。

这时候 B 端企业的主要商业模式是:不仅服务于大型企业,也服务于中小企业。以订阅制的方式,定期收取费用,并且提供不同的版本,进行差异化定价,实现收益最大化。

举个例子,蓝湖就是提供了四个版本并且以季付或年付的方式进行收费。



3.3 功能架构

3.31 什么是功能

将需求转化为对应的软件层面可实现的能力,即功能,功能可以实现需求所期望达成的目标。

3.32 什么是功能架构

一个完整的 B 端产品包含若干功能,将一套功能依据业务进行分类整合,形成的抽象化业务模型即功能架构。

3.33 功能架构与信息架构

功能架构指的是产品是如何由这些功能组成的。我们在分析功能架构时实际上更偏向于产品的实现模型。

信息架构是包括组织系统、标签系统、导航系统、搜索系统在内的综合系统。我们在分析信息架构时,分析的是这个产品是如何将不同的功能组合在一起展现在用户面前的,分析的是产品的呈现模型。

3.34 为什么要分析功能架构

一个成熟的 B 端产品甚至会有甚至会有三四百个功能,我们在分析功能细节前,必须要先厘清架构,以一种抽象的框架视角来全局思考,而不是也仅仅以用户的视角来看产品的表象。

3.35 如何分析功能架构



收集

真正地去使用产品,并将产品的所有功能与模块收集到一起。

整理

以模块作为分类依据,将所有功能分到不同的模块里,必要的话,可以继续细分子模块。

在这里要注意,一个功能是否属于某一个模块,不能以这个功能是否在某个页面为依据。一个页面出现了某个功能,只是因为这个场景下用户需要这个功能,而不是这个功能属于这个页面。

以飞书后台为例,很多人在分析时会把首页也作为功能架构图中的一个节点去分析,这是错误的。

首页只是功能的聚合,而非功能模块,例如「添加成员」这一功能应该属于「组织架构」模块中,如果将首页也加入分析,势必会出现功能的重复。



3.4 功能分析

在分析完整个功能架构之后,我们可以深入到每个功能的细节了。其中包括以下两点:

  • 1. 功能使用流程
  • 2. 功能背后的需求



3.41 功能使用流程

通过绘制功能的使用流程,我们可以模拟用户在使用产品时的流程,发现一些从宏观角度上忽略的点。在绘制时,要注意的是,要控制在页面 & 操作维度,避免拔高到功能维度甚至业务维度。

3.42 背后的需求

我们除了要知道这个功能该怎么用之外,还要知道功能与业务的关系 —— 功能背后的需求。

3.43 需求分析

在分析背后的需求时,除了知道这一需求是什么,如果可以多走一步,对需求进行分类,那对于我们了解产品时大有裨益的。

3.44 马斯洛模型的局限性



关于需求的分级,在 C 端中常用的模型是马斯洛需求模型,但是这一理论并不适用于 B 端,主要是由于以下原因:

  • 1. 马斯洛需求研究的是人,而 B 端产品面向的是企业和组织
  • 2. B 端系统一般复杂度较高,除了业务目标之外,还要考虑软件架构、体系构建等问题。

3.45 B 端产品的需求划分

一般而言,我们可以将需求划分为功能性需求与非功能性需求。非功能性需求,指的是隐藏在功能需求背后以及开发需要考虑的的需求,也叫作“跨功能需求”。最常见的非功能性需求就是产品的响应时间,一般非功能性需求是由开发和测试同学考虑的。

而对于功能性需求,有三大类:业务需求、功能需求、产品需求。而这三类需求也有比较立体的层次关系:



业务需求,提出者是业务范围、业务模式和业务规则的制定者,一般是指业务方的高层人物,比如 CEO、高级经理等。产品设计是服务于业务定位的,进而使得产品战略遵循于企业的发展战略,只有这样产品方向才不至于发生偏差,因此,他们提出的需求一般不能违反,换句话说,他们提出的需求是整个系统设计的最高纲领。

用户需求,提出者是基层管理者和执行者。他们关心的是如何使用产品完成自己的工作,提出的需求相对细节,例如对操作、流程上的诉求。

产品需求,由于 B 端产品的复杂性,在建设时需要考虑到功能复用问题,以及与其他系统的架构交互问题。举个例子,语雀 App 是阿里旗下的产品,在开发登录界面时,没有重新开发,而是集成了阿里云的 SDK。产品需求本身对业务实现没有价值,它的价值体现在节省人力和优化软件架构上。

三者虽然并没有绝对意义上的优先级顺序,但是一般而言,B 端产品时优先考虑业务需求,其次关注用户体验,满足用户需求,最后才是考虑产品需求。了解了这一点,我们对功能背后的需求进行分类后,就可以从更高的视角来分析功能的设计逻辑,而不仅仅是停留在好不好看的层次上对功能进行分析。



3.5 交互设计

3.51 交互设计是什么

在《交互设计原理》中是指:对于交互式数字产品、环境、系统和服务的设计,定义人造物的行为方式,即人工制品在特定场景下的反应。

在《交互设计精髓4》定义为:设计交互式数字产品、环境、系统和服务的设计,聚焦于如何设计行为。

而在《超越人机交互》中则是指:设计交互式产品来支持人们在日常工作生活中交流和交互的方式,创造用户体验以增强人们工作、生活以及通信的方式,聚焦在实践上,即怎样设计用户体验。

交互设计即行为设计,关注于如何设计系统如何帮助用户更高效愉快地达成目标。



3.52 怎么分析交互设计

仅仅知道是什么远远不够,我们更要知道如何去分析一个产品的交互设计好坏。在这里,我提供两个思路供大家参考:

  • 1. 从行为维度拆分
  • 2. 十大可用性原则

从行为维度拆分

上文提到,交互设计的对象是行为,而这里的「行为」可以拆分为 3 个部分:导航,输入和展示。



导航系统:即用户在哪里和去哪里

设计要点:

  • 1. 导航不能是一个页面上可以链接到其他所有页面,而是要有的放矢,选择用户关心的,更想要去的页面添加导航。
  • 2. 导航要显示出来导航本身与所包含内容的关系
  • 3. 导航要显示所包含内容与当前页面的关系



例如:掘金的顶部导航,既体现出来了导航本身与包含内容的关系(导航的标签是当前内容的概括),又体现出来了内容与当前页面的关系(当前页面是首页下的一个子页面)。

输入系统:即用户向系统提供信息

这里的输入不仅仅指我们日常中的输入,而是一个广义的概念,将所有用户向系统提供信息的方式统称为输入。输入可以通过多种方式完成,包括输入命令、按下按钮、快捷键、甚至打手势、语音等方式。



设计要点:

  • 1. 高效,例如绝大多数的产品都提供了快捷键提高用户的操作效率。



  • 2. 准确,例如 sketch 里方向键的作用是移动 1 像素,使用户在使用鼠标快速移动的基础上,也可以准确操作。
  • 3. 防错,例如大部分的产品都会在危险操作前二次确认。



  • 4. 符合预期,例如在「幕布」中,在画布区和在滚动条区都向下拖动鼠标,操作结果是相反的,但却符合用户的预期。
  • 5. 适当隐喻,隐喻是指提供熟悉的实体,是人们能够容易地理解底层概念模型并知道在界面上做什么。例如我们所熟悉的购物车就是现实世界中购物车的隐喻,帮助用户快速理解软件的使用逻辑。

展示系统:即系统向用户提供信息

设计要点:



  • 1. 突出重点。用户的浏览动作不是读,不是看,而是扫。设计中应该突出重点,弱化和剔除无关信息。
  • 2. 保持一致性。样式规范一致性给用户带来品牌信赖感的同时,还能够通过一致的重复降低用户反复学习成本。
  • 3. 及时反馈。系统应该让用户知道目前的状态, 并及时给予相对应的反馈。

十大可用性原则

尼尔森十大原则由毕业于哥本哈根的人机交互学博士 Jakob Nielsen 发表,他提出十大可用性原则,用来评价用户体验的好坏,我们也可以以此为依据来分析一个产品的交互设计好坏。具体的内容网上有很多资料,笔者就不再赘述。

3.6 视觉设计

3.61 概念

视觉设计即 UI 设计,负责产品的图形、图标、色彩、视觉风格等,从视觉层面把控产品界面设计,决定营造出什么样的视觉体验。

3.62 分析内容

视觉设计的分析内容可以拆分为形、色、字、构、质、动。在分析时,如果是网页端,可以借助浏览器的开发者模式或者谷歌浏览器的插件「VisBug」来详细查看各个维度属性细节。






图标的圆角,卡片的圆角,icon 的风格与统一度(包括:视觉大小,线段粗细,端点类型、拐点类型等)

例如,同样是头像卡片,QQ采用了圆形来体现灵动轻盈的风格,而主打熟人社交的微信则采用了小圆角。



色彩分析包括用色规范、色彩搭配、层级等。在 B 端产品中,色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。

字体的属性有字号、行高、字体、字重等。通过合适字号和字重可以对界面元素划分视觉层级,帮助用户识别。而在一些特殊的场景下,可以运用特殊字体来提高识别度和增加页面美观度。

例如:支付宝使用了常用的 Din pro 作为其数字字体,其他 APP 厂商也分别使用了特殊的数字字体。



此处的构是指页面结构,分为层级和间距两大部分。合适的层级和间距可以帮助用户理解页面,并给予界面呼吸感和通透感。

质感与风格、界面风格,投影数值,扁平还是拟物。

比如说相比普通的单层阴影, Ant Design 采用了三层阴影的表达方式,让阴影更柔和,更符合真实状态。具体可查看 https://ant.design/docs/spec/shadow-cn



最近几年,越来越多的公司和团队已经意识到动效在产品用户体验中的重要性,动效设计已经成为产品设计语言的重要构成之一。

动效设计并不只是为了修饰,使用动效不仅可以更清晰地体现内容元素之间的逻辑和层级关系,还可以提供当前的状态反馈,加强用户对操作行为的感知,给用户以可控的感觉。



除了上述内容之外,我们在分析一个产品时还可以做以下两件事:



4.1 用户体验自查

4.11 为什么要做体验自查?

在被问到「你觉得这款产品的用户体验好吗?」时,我想大部分设计师同学即使做完了产品分析,也很难回答这个问题。那么,我们该如何做才可以较为准确地回答这一问题呢?

基于这个问题,我们从用户体验的定义出发,ISO 对用户体验的定义有着如下解释:

用户体验,即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受,包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

从定义可以看出,用户体验不仅是主观的,而且范畴非常广,所以在描述时,我们不能仅仅用好/不好来概括。要解决这个问题,要点在于建立一个清晰合适的标准来量化用户体验,体验自查就是在做这样一件事 —— 度量体验。

通过做体验自查,可以达成以下效果:

  • 1. 将用户体验量化,探索设计破局点
  • 2. 帮助设计师更全面地审视产品设计
  • 3. 将产品体验上的问题可视化,更直观地展示体验问题

4.12 工具 —— 设计走查表

本质上,设计走查表通常是设计师在完成设计稿后,用于快速遍历方案、修正遗漏或不周的工具。在产品分析中,我们使用这个工具也可以达成体验自查的目标。通常,我们是需要根据产品建立一套适合自己的交互设计自查表的。如果暂时没有,也可以暂时使用网上成熟的自查表来进行。



4.13 步骤



收集



字段说明

问题位置:

即体验问题发生的位置。

类别:

不同自查表对问题的分类不同,例如用户体验五要素、可用性原则等。

重要程度:

如果采用正向思考,很容易陷入“都很重要”的困境,所以这里一般采用反向分析法,也就是如果不解决这个体验问题,会造成多大的影响。我这里将重要程度分成了三个等级,分别是:

  • 1. 基本没有影响,有替代功能
  • 2. 不解决也可以用,但不太好用
  • 3. 不解决基本/完全不能用

发生频率:

同样是三个等级,需要注意的是,这里不是以时间频率来定义的,而是以「每经历 n 次业务节点就会出现这一问题」的方式来定义的,如果不好量化,也可以使用每次,经常,偶尔这样的词来代替。

严重程度:

严重程度 = 重要程度 * 发生频率

这里要注意的是,我们作为设计师,提出严重程度的判断仅仅是作为优先级参考,但是真正的优先级和排期还是需要产品经理来做。



问题描述:

即对体验问题的详细描述。

整理

首先,对问题进行重新审查和校验,去掉非体验问题、重复问题、补充不完整的问题描述等,然后整理到一起,这就是整个产品存在的大大小小、各种各样的问题了。

然后,我们通过图表对数据进行二次加工,一般采用雷达图或柱状图。

示例 - 雷达图的使用方式



严格意义上说,这并不是标准的雷达图,只是使用了雷达图的图表背景。

外圈:上述表格中的「分类」

数值:上述表格中的「重要程度」

为每个模块/流程各制作一张表,然后将每个问题都以点的形式置于图中,哪个分类问题最多,哪个模块/流程问题最多?哪些问题较为严重亟待解决?一目了然。

4.2 专业名词库

设计的本质是为了更好的解决问题,了解业务是解决问题的基础,也是沟通顺畅的利器。但是想要成为一个业务专家,没有长时间的沉淀上是不太可能的,但是公司一般不会给很长的时间去学习业务,那我们该如何在短期内快速掌握业务知识呢?

在理解业务时遇到的最大挑战就是那些晦涩难懂的特殊名词,如 json 文件,API 等开发中特定的术语。

针对这个问题,在产品分析的过程中,我们可以同步建立一个专业名词库,来记录这些特殊名词,并将这些概念用自己的语言进行描述。这样,在了解产品的同时也对业务有了一定程度的了解。



对设计师而言,相比 C 端的各种炫酷效果,B 端设计很难做的出彩,设计的价值更多是隐形的价值,基本不存在会有人因为你把一个按钮做得好看夸你。从这个角度来说,确实成就感比较低。

但是,通过自己的设计让帮助用户更有效率地完成工作,这何尝不会带来满满的成就感?B 端产品一般是用户不得不使用的产品,作为设计师的我们更应该对自己所设计的产品有着敬畏之心。

最后,给大家分享我很喜欢的一段话,与大家共勉。



本次的分享到这里就结束了,希望可以对大家有帮助。由于文章字数较多,笔者几经修改,仍不免有疏漏错误之处,如发现错误,请读者于评论区或私信指出,不胜感激。

在快节奏的洪流中,保持设计的初心,做有灵魂的设计,我们下篇再见~

作者靳凯杰ah

转载请注明:站酷

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

魏华的微信.png

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

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

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

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


用设计诠释搜索热点

ui设计分享达人

刷刷手机看看今天又发生了什么热点大事,已经成为现代人茶余饭后消遣时间的主要方式,而搜索热点区别于其他社区类产品,最大的优势是能够把大家关注的事件始末及相关知识服务快速聚合起来,帮助用户更全面的掌握信息。设计师作为连接用户与信息之间的纽带,在项目实践中也进行了系列的设计探索,除助力平台高效聚合呈现信息外,并以更丰富的设计层次诠释热点,帮助用户更便捷的获取所需。

///

设计思考及诠释方法

我们先要去了解用户是如何消费热点内容的,基于用户情景认知链路分析用户在事件消费的链路,可以分为三个重要节点:1.热点环境的感知;2.热点事件的理解;3.事件观点的产生。

结合用户的消费路径,我们将设计逻辑框架拆分为三个层级:

1.氛围背景层:分层呈现热度氛围,辅助用户感知热点环境;

2.信息内容层:精细化拼装管理,帮助用户理解热点事件;

3.功能互动层:轻互动玩法设计,激发用户参与抒发事件观点。

1. 热点环境感知:分层呈现热度氛围

从氛围表现层面,助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求,归类了两种设计表现层次:1.日常热度氛围 2. 大事件热度氛围

1)第一个层次:日常热度氛围

主要应用于热点新闻场景,时效性要求高,同时事件热度也会在:“发酵--爆发--消退” 间实时变化,设计根据热度“强弱”程度需求,划分两档视觉展现阶梯,以自动化的方式展现,满足热度的实时变化需求,辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点,“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。

如,“马斯克收购推特”,搜索热度持续上升,以第一阶梯-标签方式展示低热氛围;在 “马斯克收购推特” 的事件热度不断增长,成为热榜事件后,以第二阶梯 - 高热氛围自动匹配 ,通过背景及榜单标签的呈现,明确告知用户当前事件的火热程度。

2)第二个层次:大事件热度氛围

主要应用于热点大事件或运营活动场景,个性化展现要求高,同时事件关注度及重要程度也不同,设计根据事件的关注度及重要程度划分为两档阶梯,以人工配置的方式展现,超强的运营氛围,可以让用户充分感知当前事件的重要程度,“A级氛围”头部叠加场景元素设计用以展现大事件,“S级氛围”整页沉浸式视觉设计用以展现重大事件。

如,冬奥会,重大事件,选用第二阶梯 S级氛围,打造超强的运营大事件会场认知。

///

前置突发大事件氛围设计

近几年我们不断的经历各类突发大事件,如:疫情/暴雨/名人逝世等等,每次突然发生的事件都让设计师措手不及,匆忙产出运营氛围设计方案紧急上线,保时效就很难保障质量,因此我们在想能不能总结事件类型提前储备设计,以备不时之需。

不同突发事件会牵动网友不同的情感情绪,比如河南暴雨,我们为受难同胞担心,为救助工作加油,为逝者哀悼;火箭发射成功,我们骄傲喝彩;名人结婚,我们送上温馨的祝福。不同事件带来不同的情感情绪,也要求设计师要用准确的视觉语言表达。

因此我们在前置设计时也充分考虑了事件情感因素,通过对近一年突发大事件的归类梳理,并推导不同细分场景下的用户情绪,通过情绪分类的方式,总结两种视觉设计表达形式:1.实景图合成效果满足严肃/庄重/权威场景情感需求;2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计,保障突发热点运营设计质效。

截至22年Q1,前置设计已在38个热点场景应用:

2. 热点事件理解:内容精细化拼装管理

为满足用户不同事件场景下的信息需求,设计结合百度搜索:主要内容区(主要需求满足)+ 延展内容区(延展需求满足)的综合聚合能力,通过组件分区布局+精细化规则管理,为热点场景内容的高效拼装打好体验基础。

1)主要内容区

主要内容区,能够帮助用户快速了解事件的主题、时间及主要内容,结合热点事件长期的需求沉淀,设计将主要内容区又细分为主题区域及内容区域。主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件;内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定,业务可以快速选择所需组件进行页面组织拼装,达成分场景个性化满足用户主需求的目标。

如:元宵晚会,热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。

因为有设计拼装规则,不同大事件活动,各场景内容可个性化满足需求,交互布局设计上又可兼顾横向一致性。

2)延展内容区

延展内容区,能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求,选择多个延展内容模板与主要内容区进行拼装,搭建完整页面以呈现不同热点事件内容。

如:俄乌战争-战事场景,脉络卡帮助用户快速了解事件进展 ;冬奥会-赛事场景,数据卡帮助可视化呈现赛事进展;博鳌亚洲论坛-会议场景,百科卡帮助用户科普相关名词知识。

3. 事件观点产生-轻互动玩法强化参与感

通过氛围打造和内容组织,已经达成用户需求满足的目标,但到此截止,搜索结果的体验还是理智疏远单向的,搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析,并采取具体的设计策略逐步引导用户参与互动。

1)互动唤醒 - 吸引围观增强互动意愿

优化前的热搜结果页,用户的讨论内容都是隐藏在资讯落地页评论区内,需要点击进内容落地页内才能参与“围观”或“讨论”,除互动氛围已脱离当前场景外,也削弱了用户对此事件表态的参与积极性。

通过弹幕滚动+输入框组件组合外显的交互设计方式,将用户讨论外露,不仅丰富热点事件搜索场景的内容维度,同时基于从众心理,进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。

2)情绪抒发-轻互动玩法降低互动门槛

而投票表态+弹幕轻互动组合效果设计,能进一步降低用户交互心理门槛,让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法,使用户互动情绪表达更充分。

3)惊喜反馈-强化视效打造记忆点

原有设计风格,无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感,无互动反馈状态仅有互动前后状态变化。

结合热点场景积极外放情绪及庄重内敛情绪,视觉主要从形/质两个维度进行优化升级,并增加互动反馈动效,同时运营可结合具体事件主题配置,综合提升互动惊喜效果,打造产品记忆点。

视觉层:通过更立体的形态和更丰富的层次质感,更精准的表达情感

动效反馈层:以主图形+辅助元素,通过符合场景氛围的动态效果设计,更充分的表达情感

运营主题配置:在日常反馈基础上,增加运营主题配置层级,为特定主题场景提供定制反馈效果

///

写在最后

通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段,助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展,如营销活动、品牌造节等。设计不会止步于此,我们将基于用户需求不断探索深耕,为用户呈现更快速、准确、全面、有温度的搜索热点体验。

作者:百度MEUX

转载请注明:站酷

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

魏华的微信.png

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

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

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

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


2022 年 UXUI 设计趋势

ui设计分享达人

2022 年即将过半,疫情在家的我们重新花一些时间,回顾今年最引为人注目的一些设计趋势,有些已经变成现实,有些可能即将会发生。在过去的这十几年里,全国的互联网和移动互联网行业蓬勃发展,引发了 UX / UI 行业的火爆,无论是在设计技术方面还是在设计实践方面维持着快速发展状态。设计探索受到了前所未有的关注。创新也永不停止,正在向各个方向延伸——有的是昙花一现,有的是重塑想象,有的却循环往复。


下面我们将更详细地向你探讨一些 2022 年的设计趋势。

超级大的字体排版



The Badass Project 捣蛋派计划

过去几年里,大字排版的趋势越来越明显,字体尺寸也在增加!接下来,字体更大且几乎没有图像的时尚 英雄形象 网页设计,将成为主流风格。

(英雄形象在网页设计中是一个特定的网页横幅,通常是一个包含与内容相关的大图像页眉)

设计师和用户都越来越习惯在登陆页面前面和中心位置使用超大文字。无论是怪诞的无衬线字体还是现代奢华的衬线字体——这一趋势就是在于越大越好。通过精心选择的字体,网站可以做出比以往更大胆的宣传,以吸引受众的注意力并有效地信息传达。



这些字体选择通过 引人注目的动画进一步生动起来。设计师正在实现通过鼠标移动或向下滚动页面使排版移动并与用户产生互动的创造性效果。以粗体、动画和交互式排版为核心,许多网站也就不使用任何背景图像,让外观变得干净且精致。



MAFF

所以一定要试试这种趋势:把文本尺寸放大,可以将其放置在一些图像上,制作大尺寸的动态标题,让用户从中获得乐趣。最重要的是,要勇于呈现大胆强烈视觉效果,从而可以立即吸引用户的注意力。

案例:Medium 官网——https://medium.com/


复古风格回归



Shakib - Sneakerbumb

在经历了充满不确定性和阴郁的两年,我们学会了寻找和珍惜任何享受幸福的机会。我们大量独处时光的花在了数字空间上,这一现象也不例外。



La puce à l’oreille

为了回应这一需求,设计师从 80 年代和 90 年代获得了巨大的灵感;将色彩丰富、质感丰富、复古风格的主题与现代气息结合起来,打造真实的外观。鲜艳的色彩搭配柔和蜡笔肌理、古怪的排版、纹理丰富的背景、跨页面网格的布局、非传统的图像和古怪的插图,都可能会在接下来的一年吸引你的注意力。



Kristen Ryan for MakeReign

随着这一切的发生,我们甚至可以说,在过去几年里,每个人都学会了赋予自己一些自由的生活态度。这为我们提供了更多的实验空间,当然也为设计和其他领域带来了让人愉快的成果。这就是说,设计师们觉得有必要从简单和实用的用户体验转向有趣、搞笑甚至愚蠢的交互。出人意料的是,让别人微笑可能会是你的网站或 app 令人印象深刻的一种方式。

新野兽派设计



Blumenkopf

野兽派设计从 1950 年代的野兽派建筑运动中汲取灵感,延用其不修边幅、毛糙粗狂的外观形式,和故意做出的丑陋效果。就像在建筑中一样,野蛮主义在网站中揭露和解构(甚至庆祝)这种媒介的底层结构和重要原则。原始、大胆和反动的本性使野兽派设计一直处于数字空间的边缘,因为原始是互联网的全部。然而,近年来,野兽派一直在缓慢而稳定地复苏,现在被一些人称为新野兽派。



Caroselling


随着互联网上干净、传统的网站越来越多,个人网站变得难以脱颖而出。转向野兽派,提供真诚、原始但独特的视觉体验,可能正是提升你下一个网站的方式。


无网格布局,强烈的调色板,重叠的元素,拥挤和几乎混乱的设计只是你的野兽主义工具包的一部分。将它们与等宽和奇怪大小的排版结合起来,缺乏或极少的导航,这相当于没有额外的“空间”或子页面的“开放式版面”,你会得到一个引人注目的粗野派外观。



Work with us


案例:阿里云设计官网——Alibaba Cloud Design - Not Design Just Future


当然,还有更多,但野兽派网页设计的定义规则是没有规则;它反对既定的规则和惯例。更重要的是,你需要用更强烈的意义价值和意图来将你的野兽派杰作与另一个设计糟糕的网站区分开来。


本机桌面客户端



Messenger


Figma、Todoist、Slack和 Messenger 等网站和移动应用程序都把时间和精力集中在桌面客户端版本。



Todoist


越来越多的应用程序似乎也在效仿,因为研究表明,这样用户会感到 更舒适、更安全。用户希望自己的应用程序远离互联网浏览器,远离所有打开的标签,回到指定的应用程序窗口,让人感觉更宽敞、更专注。在使用这些应用程序时,不需要处理数分散注意力的标签,这无疑是一种进步!此外,将通知直接发送到桌面,我们的通知管理也必然得到改善。



Figma

本地化用户体验



为阿拉伯语国家的谷歌搜索页面布局


用户研究团队利用 人类心理学 领域的洞察,以及 可用性测试,已经能够塑造界面,为用户提供最大的满意度和愉快的体验感受。几十年来,这一直是用户体验设计的核心。

随着技术的快速进步,我们看到数字产品体验的保真度有了空前的提高。这一发展也为不同用户群体之间的细微差异提供了新的理解。年龄、文化、地理位置、日常习惯、社会结构(以及其他因素)的差异可能会导致人们对什么构成令人满意用户体验的期望存在显著的差异。因此,这些体验可能需要类似的设计,但肯定不是相同的设计方法。


随着技术和研究方法的到位,我们开始看到一款产品的多种变体同时推出,以满足不同用户的需求。随着许多大品牌都在努力扩大他们的用户群体,创造本地化的产品体验可能会成为一种大趋势——如果不是标准的话。


荣誉提名:包容性



NhuSW- Everyfit — Fitness for Everyone

包容性不仅是一种趋势,也是一种运作模式;人类生存和共存是一个不可否认的重要方面。在日益全球化的复杂世界中,我们不断意识到自己与其他个人或社群之间的差异。以同理心驾驭这些差异是我们的责任,并努力将所有文化、性别、性别、种族、能力和残疾都有意义地适当地纳入全球社会。



Spotify


随着数字空间引领着世界的全球化,它也毫无疑问地成为我们包容性努力的前沿。人们总是希望品牌和公司采用更具 包容性的叙述 和语言,并向包容性的平台、产品和服务 迈进。他们被鼓励在图像、语言和视觉语言中推动多样化的表现,这样做不仅仅是为了营销收益,而是为了更大的意义和价值。


这些是我们在 2022 年会看到的趋势和现象。记住,它们是为了提醒我们当前的总体设计趋势。可以使用它们来支持和授权您的设计决策,但不要害怕挑战它们,或用它们为人们创造更多积极有效的体验。


原文标题:UI/UX Design Trends of 2022

文章来源:Codeart

原创作者:Taras Bakusevych & Maja Mitrovikj

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

魏华的微信.png

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

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

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

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

日历

链接

个人资料

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

存档