首页

拿捏8种LOGO设计技法!

seo达人

图片

图片

我们先来分析一下这个 LOGO:

1. 基本形状为字母 D;

2. 一大一小、一长一短均匀的进行向外发散渐变。

如果我们把一大一小、一长一短分别单拿出来,都是比较方便做出来的,先做出两个不一样的线然后绕着 D 的外轮廓混合就好,但是同时满足这两个条件的话,就需要采取其他的办法,ok,下面我们来看一下演示步骤。

第一步,我们先把字母 D 的外轮廓画出来,直接用一个方形右边拉圆角即可!

图片

然后我们选择【对象】➡️【路径】➡️【偏移路径】,数值改为负数,向内缩小复制一个。

图片

将里面的 D 左边断开,并连接到外面的 D 里面。

图片

用上面同样的方法再次向内整一个小 D。画好后我们就可以直接删掉它了…不是,删一半就行,因为图形是上下对称的,我们先画一半直接镜像!可以事半功倍,能偷懒就偷懒。

图片

画完这三条线有啥用呢?不急,我们先从最外面的入手,先在左右两个端点出分别画一大一小的圆。

图片

然后对这两个圆进行混合,用【混合工具】分别点击两个圆,指定步数改为 9,然后再【替换混合轴】,就可以让圆沿着我们画好的路径进行大小重复排列。

图片

然后我们在最小的线的两头端点处分别画一个很小很小的圆,再次执行前面同样的操作,混合 9 步,替换混合轴。

图片

然后我们分别让上面的大圆对下面的小圆进行混合,步数给的大一些,这样就会出现发散效果的图形啦。(别忘了先扩展和取消编组)

图片

那一大一小的发散该怎么实现呢?这就用到了我们第二根线了,我们分别把单数混合上面的圆向下移动到第二根线上,然后调整一下间距,就搞定了!

图片

画好一半了,直接镜像复制一下,整体就出来了,然后我们给每一根线添加上渐变色。

图片

最后加上排版就搞定了,这个 logo 的难点在于他是一大一小的进行发散,所以直接用单个线来混合达不到这个效果,所以我们就采取单一作战模式,用同样的方法,选择不同的混合对象,会实现不同的效果。

图片

 

图片

图片

红点奖作为世界三大设计奖之一,一直以来都是设计师们梦寐以求想要获得的奖项,它的 logo 大家应该都很熟悉,但这种球形环绕式 LOGO 很多同学都不知道应该怎么实现,ok,下面我们就来设计一个红点奖颁给日夜操劳却依旧菜 b 的自己…

首先第一步我们先画两条相等长方形,其中第一个填充为红色,第二个去掉填充色和描边。

图片

然后我们就向下复制多个,但也不用太多,给太多不好…

图片

之后调出符号窗口,将这个图形编组后整体移动到符号窗口里面,也可以取一个好听的名字,虽然没什么用。

图片

放完后先不管它,我们额外画一个圆形,注意用描边模式,之后砍掉它的一半。

图片

选择【效果】➡️【3D】➡️【绕转】

图片

先选择【贴图】,将符号部分改成我们刚才设置的图形,然后点击【缩放适用】及【三维模型不可见】,可以适当拉高拉宽,之后确定回到绕转页面,拖动左边的方块更改它的绕转方向,然后选择下方【表面】改为无底纹。

图片

得到新的图形之后,是漫长的取消编组和扩展,多操作几次,你就可以得到下面两个部分。

图片

将他们居中对齐,然后给下面的图形增加一个渐变,这样效果就出来了!

图片

最后就是更改一下细节了,将上面和下面的部分可以单独切一下,做出一个角度。ok,基本的方法就是这样啦,虽然最终效果和红点的原 logo 不太一样,有点像破产版,但没办法,想得到真正的红点奖,还得靠你自己的努力!!!

图片

 

图片

我们在遇到相对比较复杂的图形的时候,一般就会用到形状生成器工具,它可以通过合并或删减简单形状创建出复杂的形状,掌握了这个工具,可以说你的 logo 就多了无数种可能性。下面我们通过一个看起来比较复杂案例来演示一下如何使用它!

图片

越是看似复杂的东西,往往越具备一定的规律性,我们看一下这个图形,可以发现它是由一个部件通过旋转复制得到的,如下图:

图片

所以我们只需要把这红色部分先绘制出来,就很容易画出来了!我们看一下操作步骤。

第一步先画出他的网格,先画出横线部分,再倾斜 60 得到右斜线,然后将有斜线镜像复制出左,最后三组居中对齐。

图片

接着我们画出它的圆形框架,注意与线段的对齐关系。

图片

ok,这样就把所有的网格线全部绘制好啦!这个时候就可以回到开始的时候讲的,我们只绘制那六分之一的图形即可。选择【形状生成器工具】按住 alt,将多余的线删除(记得提前复制一份圆备用)。

图片

得到这个图形后,我们将它描边加粗一些,然后扩展,之后绕大圆圆心旋转 60 度复制一圈(为了方便切割,我们把线往外延伸一些)。

图片

这时候我们再次请出形状生成器工具,一是将大圆外圈的部分删掉,二是将内部闭合的地方填充上。

图片

最后我们再在中间连接一个矩形色块,就做好啦!为了充分体现形状生成工具的强大功能,特意选了这么个复杂的 logo,真是累瞎了我的狗眼… 总之总之,形状生成器工具的作用有很多,可以提取闭合图形,可以删除多余图形,线或者面都可以进行操作!

图片

 

图片

图片

我们无论是在做 logo 还是做辅助图形的时候,这种异形扭曲空间图形真的很常见,它们看似复杂,其实用一个工具就可以搞定,就是封套扭曲工具。

他一共有三种表现形式,第一个是用变形建立,也就是我们在效果中看到的旗形、波形、鱼形等,常用于文字;

第二种是用顶层对象建立,比如先画一个苹果,然后打上文字介绍,用这个建立就可以让文字扭曲成苹果的形状;

而第三种,用网格建立,是可控性非常强的扭曲变形,我们通过建立网格体系产生大量的锚点,拖动任意一个都可以产生不同的变化,下面我们就用这个方法来做一下这个 logo。

第一步,我们先画一个长方形,向下均匀复制多个,形成多个等距的长条。(也可以用混合工具)。

图片

第二步,给图形添加渐变色。

图片

第三步,我们选择图形,执行【对象】➡【封套扭曲】➡【用网格建立】,行数和列数均设为 1。

图片

然后就是关键的一步了,我们用直接选择工具(A)拖动调整网格的锚点和手柄,得到一个扭曲的图形(如下图 1234 各点的位置变换)。

图片

调整完之后将图形扩展,用形状生成器工具将中间重合多余的地方删掉(按住 alt 删除)。

图片

ok,最后加上排版,一个通过扭曲得到的抽象鸟 logo 就做好了,这个方法基本的套路就是这样了,主要在于锚点摇杆的调节和把控,另外,在设置网格半径时,数值越大,可操作的空间及难度也就越大,大家可以多去试试看。

图片

 

图片

图片

参加过波波品牌课的同学们应该都知道,这类 logo 就是贵为九大构成之一的重复构成!因为特有的重复性和规则性,使它呈现出来的效果会很高级很实用。但是我看很多同学在做的时候都是单个的缩小放大摆放…这样往往是很不标准的,下面给大家安利一个简便高效的方法!

首先第一步我们还是先把基础图形画出来,用钢笔工具勾一个造型即可,注意线条要丝滑一些!

图片

然后就是重点部分了,我们选择【效果】➡️【扭曲和变换】➡️【变换】依次调整一下的参数(参数不是固定的,要打开预览根据自己的实际情况来设置)

缩放:控制变换的大小对比

移动:控制变换的路径方向

旋转:控制变换的路径角度

副本:变化添加的图形数量

图片

ok,调整完后就可以得到下面这个造型了!

图片

然后我们给它添加颜色啦,这里再来一个快速设置渐变色块的方式,先做好最深色和最浅色,然后用混合工具很容易就做出来了。

图片

做好颜色后我们就一个一个的给它上色就可以了。

图片

最后加上底色和排版就搞定啦!

图片

变换这个方法真的非常好用,非常适合重复构成的 logo,这里给大家留个小作业,可以用这个方法试着自己做一下华为的 logo。

图片

 

图片

立体 logo 往往拥有比纯扁平 logo 更加良好的视觉展示,在色彩上也更多运用渐变色进行搭配,使其更具吸引力。

但是实现起来往往比扁平 logo 要困难的多。下面我们通过这个案例来演示一下绘制立体 logo 常用方法。

图片

先简单分析一下:

由三个立方体堆积搭配渐变色形成视觉错位感,ok,我们第一个思路就是先从单个立方体入手,下面我们就来绘制一下立方体。

首先我们画一个正方形,大小给到 80px(也可以是其他数值,但要记住这个数值)。

图片

点击【效果】➡️【3D】➡️【凸出与斜角】,执行三步操作:

1. 将位置改为等角上方;

2. 凸出厚度改为 80 的两倍也就是 160;

3. 表面材质选择无底纹。之后点击确定。

图片

这样一个基础立方体就出现啦,为了方便后面的操作,我们可以换成描边模式。然后通过这个立方体进行旋转,分别旋转 -30、-150,90 度得到三个不同倾斜角度的立方体。

图片

将他们组合在一起,然后用形状生成工具绘制出错位感。

图片

再依次给每个面添加上渐变色,就完成啦!

图片

那除了这个方法还可以怎么做呢?假设我们已经画好了草图,在草图的基础上绘制 3Dlogo 的时候,可以使用网格大法!

图片

可以看到这个图形的斜边是直线倾斜 30 度来完成的,那我们就可以用这个角度先把网格绘制出来。

图片

然后通过网格可以直接用【形状生成工具】或【实时上色工具】将视觉错位之后的图形绘制出来,省去了 3D 的步骤。

图片

之后就和第一种方法一样添加渐变就完成了,这个方法比较适用于在已经有草图或想法的基础上来绘制,会更精确更快捷,如果是想单纯的绘制立体图形,那还是更多的用第一种 3D 凸出与斜角的方式。

图片

 

图片

图片

这是全球市场调研咨询公司 PRS IN VIVO 推出全新品牌 LOGO,相信大家看到它应该不会陌生,没错,它就是运用了彩色半调效果来进行视觉设计。它会帮你生成一个波点圆形点阵,呈现出一种像素化感觉,同时也是波普艺术中重要的变现形式,下面我们就看一下如何做出彩色半调效果的 logo。

我们在进行设计前,先新建一个 cmyk 模式的画板,分辨率也给的大一点。

图片

我们画一个正圆,给它添加一个黑白渐变。

图片

将渐变模式改为径向渐变,再点击反向渐变,再将黑色部分改的稍微灰一点,得到一个新的渐变圆形。

图片

然后我们就用这个图形进行彩色半调。【效果】➡【像素化】➡【彩色半调】

图片

那么如何控制点阵中原点的排列疏密和数量呢?

我们在进行彩色半调的时候,会添加一个半径参数,这里数值就决定了点阵的数量(也可以随便输入一个数值,然后放大缩小圆形进行控制)而疏密程度,则是由一开始我们给予黑色的黑度所控制的,越黑越密,越浅越疏。

图片

OK,调整完参数后,我们将它变成矢量图形。具体操作为:

1.【对象】➡【栅格化】

2.【图像描摹】➡【黑白徽标】➡【扩展】

图片

这样一个矢量的彩色半调圆形点阵就做好了,之后添加一个粗一点描边的圆框,将圆框与之前的圆重复部分用形状生成工具提取出来,删除多余的波点,再添加渐变和文字排版,就得到了这个 logo 图形。

图片

彩色半调不仅仅局限于圆形哦,其他任何形状都可以用这个方法进行点状像素化,还不快去试试?

 

图片

图片

上面这些图,虽然可能没有见过,但大家一定都不会太陌生,是的,上面的图形都是用黄金比例圆来完成的,只要是做过 logo 有一定时长的同学就一定会接触。我也曾经遇到过好多次客户直接在设计需求中点出了要用黄金分割比例做设计图形…至于它为什么好看,那不是我们今天所研究的,今天只负责教会你该怎么用!

工欲善其事,必先利其器。想要用黄金比例来绘制图形,那首先你得把黄金分割比例的圆先做出来,这里介绍两种比较方便快速的绘制方法:

第一种是黄金比例分割,也就是通过绘制 0.618 倍数的多个图形,如下图。

图片

但是我们在实操中没有必要用这么规整的来方形堆积来绘制,只需用一个工具就可轻松搞定!

双击【比例缩放工具】,等比数值改为 61.8%,点击复制。

图片

这样就得到了 1:0.618 的两个圆啦,我们只需按住 CTRL+D,重复复制多个,一个黄金比例圆就画好了!

图片

第二种方法是利用斐波那契数列绘制。斐波那契数列指的是:1,1,2,3,5,8,13,21,34,55,89…这样从第三项开始,每一项都等于前两项只和。换算成设计语言的话就是这么个图形:

图片

我们用这个结构,把每一个正方形都换成圆形,组合起来就是一个黄金分割比例的圆形环。

图片

以上两种方法哪一种都可以!灵活运用!下面我们就用画好的黄金比例圆来绘制 logo。

首先,你得先画一个草图…纸上或者 PS 都可以,将它垫底。

图片

然后我们把黄金比例圆放进来,注意不要随意放大缩小,先整体编组,将最大的圆环对准图形最大的弧线部分,之后就可以将剩下的圆进行一一对应摆放了。(可无限重复使用,一些小细节可以适当拉大拉小一点点)

图片

摆完之后我们用【形状生成工具】或【实时上色工具】,将切割得到的大象绘制出来!

图片

黄金比例固然好,但是我们在设计的过程中不能过度的去依赖它,毕竟无论你用不用它,只要 logo 是好看的,那就有价值!PS:不过它确确实实能够为你的提案加分…很多客户都吃这一套,嘘…

图片

好勒,八个案例全部完事了,不知道大家吸收的怎么样,其实虽然分了八个方向,但有很多技法都是互相通用的,而且AI中隐藏的小技法远远不止这些,相信跟着一起实操过来的你,一定可以丰富自己的武器库,给自己的LOGO作品集,增添一大波可能性!

好了,时候不早了,做 AI(Adobe illustrator)也做的有些累了,大家晚安!记得实操!

 


作者: 告白天

转载请注明:学UI网》拿捏8种LOGO设计技法!

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

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

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

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

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


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

seo达人


image

 

准备好了吗?

工具:Photoshop、手绘板

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

适合:板绘零基础入门

 

马克笔笔刷的亮点:叠色

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

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

image

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

image

盆,盆栽的盆

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

step 01

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

image

step 02

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

image

画的是植物没错

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

step 03

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

image

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

image

第二幅,来多一点装饰

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

step 04

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

image

step 05

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

image

step 06

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

image

step 07

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

image

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

image

拿去练吧~从简单开始

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

image

长图版更适合临摹:

image

笔刷下载地址

百度网盘下载

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

提取码:aqdb

 

原文地址:飞屋设计

作者:飞屋睿UIdesign

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

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

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

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

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

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


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

seo达人

一、预判设计

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

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

1.历史记录

a.用户操作行为记录

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

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

图片

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

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

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

图片


2.效果预知

a.效果预览

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

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

图片

b.效益预估

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

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

图片


3.智能辅助

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

图片


4.行为惯性

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

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

图片

 

二、表达清晰

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

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

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


1.功能易理解

a.术语转换

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

图片

b.信息有效展示

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

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

图片


2.内容强吸引

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

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

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

图片


3.选择无负担

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

图片

 

三、操作可控

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

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


1.操作一致性

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

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

图片


2.明确指引性

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

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

图片

 

写在最后

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

 

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

作者:商业用户体验部

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

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

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

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

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

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


设计提效-Figma插件篇

seo达人

 

图片

 

序言

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

图片

 

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

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

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

图片

 

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

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

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

图片

 

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

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

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

图片

 

4、Mesh Gradient-网格渐变工具

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

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

 

5、Webgradients-配色灵感工具

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

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

 

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

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

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

图片

 

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

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

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

图片

 

8、Styler-快速创建样式

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

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

图片

 

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

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

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

图片

 

10、Breakpoints-响应式断点插件

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

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

图片

 

11、Themer-UI界面主题管理

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

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

图片

 

12、Motion-关键帧动画

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

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

图片

 

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

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

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

图片

 

结语

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

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

 

Tips:

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

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

图片

 

原文地址:腾讯ISUX

作者:ISUX设计

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

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

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

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

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

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


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

seo达人


图片

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

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

 

 

图片

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

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

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

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

方向区别:

图片

长短的区别:

图片

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

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

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

图片

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

图片

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

图片

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

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

① 利用高斯模糊制作。

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

图片

图片


② 利用光圈模糊工具

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

图片

图片

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

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

图片

图片

图片

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

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

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

 

 

图片

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

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

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

图片

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

图片

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

图片

图片

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

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

图片

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

图片

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

类似的案例还有:

图片

图片

图片

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

 

 

图片

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

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

图片

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

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

图片

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

类似的案例还有很多:

图片

图片

图片

图片

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

图片

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

图片

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

图片

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

图片

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

图片

再改个配色形式试试:

图片

来波红配绿:

图片

花里胡哨再来一个:

图片

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

 

图片

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

图片

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

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

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

图片

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

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

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

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

图片

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

在案例中的表现:

图片

图片

图片

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

 

 

图片

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

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

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

图片

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

图片

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

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

图片

图片

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

图片

图片

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

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

 

 

图片

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

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

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

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

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

 

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

作者:老张

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


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

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

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

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

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




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

seo达人


图片

 

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

 

Contento

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

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

图片

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

图片

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

 

1.内容简单:

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

图片

2.社区强大:

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

图片

3.自定义:

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

图片

 

Chinese Font Picker

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

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

图片

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

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

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

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

图片

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

 

FigmaEX

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

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

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

图片

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

 

NB Charts

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

图片

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

 

Measure

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

图片

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

 

Auto follower

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

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

 

SkewDat

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

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

图片

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

 

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

作者:CE青年

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

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

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

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

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

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




万物皆可异质同构

seo达人



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

图片

图片

图片

图片

图片

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

 

1.置换材质

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

图片

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

图片

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

图片

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

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

图片

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

图片

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

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

图片

图片

 

2.组合堆积

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

图片

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

图片

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

图片

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

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

图片

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

图片

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

图片

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

图片

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

 

3.质感对比

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

图片

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

图片

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

图片

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

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

图片

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

图片

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

图片

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

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

图片

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

图片

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

图片

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

 

图片

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

 

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

作者:葱爷

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

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

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

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

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

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



万物皆可异质同构

seo达人



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

图片

图片

图片

图片

图片

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

 

1.置换材质

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

图片

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


图片

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


图片

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

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

图片

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

图片

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

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

图片

图片

 

2.组合堆积

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

图片

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


图片

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


图片

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

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

图片

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


图片

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

图片

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


图片

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

 

3.质感对比

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

图片

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

图片

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


图片

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

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

图片

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


图片

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


图片

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

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

图片

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

图片

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


图片

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

 

图片

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

 

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

作者:葱爷

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

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

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

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

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

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


复杂网站的导航模式要怎么设计才合理舒适?

ui设计分享达人

具有大量库存商品,或是涉及复杂产品的网站,通常会提供产品类别页面,或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表,但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤,让用户不用一下子面对海量的分类信息。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Eddie Bauer 在其全局导航中, WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容,以及促销子类别(例如SHOP FLANNEL 和 SHOP FLEECE )的链接。

类别页面通常提供以下组合:

  • 类别的描述、解释及其包含的内容
  • 带有描述和代表性图像的子类别菜单
  • 推销该类别中的特色产品

并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火,因为用户需要通过额外的步骤才能查看特定类别的产品。

许多网站完全省略了类别页面,而是将用户直接引导到产品列表页面,在那里他们可以借助过滤筛选的方式来浏览产品。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Bonobos 网站上的 Pants & Jeans 链接不是类别页面,而是将用户直接带到产品的列表页面。这种方法通常效果很好,因为它尽快向客户展示了他们可选的选择。

虽然本文偏向于电商网站中的类别页面的探讨,但实际上这些页面也用于其他类型的网站,特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况,但最好根据领域对你的设计进行测试,以防你的用户需求与购物型用户的需求不同。

何时使用类别页面

如果您的电商网站所涉及的产品非常复杂,以至于您的许多客户需要经过学习之后才会使用,才能正确地过滤和比较产品,那么类别页面就是一个好主意了 。此外,具有 大类别和大量子类别的网站,有时会提供某种类型的独立类别页面,以帮助用户找到有意义的起点。

不过,你可以决定让特定的产品具有类别页面,而其他的则不具有独立的类别页面。例如,Lululemon 主打的健身服装产品(大多不需要分类页面),同时也销售一种名为 MIRROR 的昂贵的家庭健身产品,后者需要更详细的解释,因此有自己的分类页面。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面,但并未为其所有产品类别使用类别页面。

阐释复杂产品

类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项,他们可能还没有准备好单击单个产品。与随机点击不同的产品相比,类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。

例如,智能手表通常会有不同的功能和价格范围,著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面,列出了不同类型的智能手表,并提供「立即购买」、「了解更多」 以及「比较」的选项。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异

子类别的特征

购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而,一个拥有大量产品和内容,并组织成许多子类别的网站,仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品,此外它还可以为国外的购物者提供帮助。

REI 销售用于各种户外活动的许多产品,从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后,页面跳转到一个包含所有露营产品的列表面,用户可能会不知所措,而且无趣。相反,REI 让链接指向到一个传统的类别页面,而不是列表,这个页面包括:

  • 子类别 (帐篷, 睡袋 , 远足)
  • 该类别中最受欢迎的品牌(Osprey、YETI)
  • 与类别相关的季节性信息(寒冷天气徒步旅行)
  • 建议(如何选择睡垫、食物储存和处理的技巧)

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。

不要强迫客户浏览类别页面

如果你的网站确实提供了传统的类别页面,请同样为用户提供了避免进入这些页面的简单方法,并在他们愿意时,也能直接转到产品列表页面。为你的站点的全局导航,提供指向子类别产品的列表页面(比如使用超大导航 Megamenu ),以及指向传统类别页面的链接。

可能还需要确保搜索结果始终指向产品选项,而不是将购物者引导到类别页面。在我们的研究中,Zappos 会将某些搜索结果指向到以品牌为中心的类别页面,而不是链接到该品牌的产品。

在用户测试的时候,一位参与者看到孩子后很生气,因为搜索她最喜欢的品牌 Sam Edelman 时,她进入了一个具有促销感的传统类别页面,而不是指向她要的产品。对她来说,这感觉像是一个不必要的额外步骤。

「当我进入 Sam Edelman 时,我想看到结果。我不希望打开一个品牌的分类页面。」

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

当用户在 Zappos.com 上搜索「sam edelman」时,她很恼火地看到一个没有列出任何单个产品的品牌类别页面。

当用户搜索时,他们希望立即看到结果。

混合:在产品列表页面上提供类别信息 

为了避免传统的类别页面的缺陷,并提供对产品列表的快速访问,许多电商网站现在在主产品列表页面中,结合混用了少量的类别有页面的设计——例如简短的描述性内容,或简短的子类别菜单。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

在女士紧身裤 产品列表页面上,Lululemon 包含了一些传统会在类别页面上显示的元素:营销内容(蓝绿色框标注的区域)和对不同紧身裤样式的解释,以及指向这些子类别的链接(以黄色框标注的区域)。

这种混合呈现方法效果很好,因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它,而不感兴趣的用户可以简单地跳过,直接快速访问实际的产品列表。

说明内容

一些电商网站在 产品 Banner 旁边加入营销的内容和元素,这些元素传达有用的信息而不会减慢用户的速度,就像传统的类别页面一样。

高级珠宝零售商 VRAI 使用混合式设计,在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中,圆形订婚戒指页面中,包含了带有价格的产品列表,以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明,以及更多详细信息。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

在这个列表页面中,VRAI 包含了促销内容(以蓝绿色框标注)和说明性内容(以黄色框标注)。其中所呈现的图文内容是典型的传统类别页面的特征(没有产品列表)。

子导航

一些零售类的网站不使用类别页面,而是提供指向产品列表页面上的子类别的导航链接。这些链接(这是最初发明类别页面的原因之一)让用户轻松浏览网站的产品库存。

例如,Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别,并提供指向该子类别的链接。这些内容直接显示在产品列表上方,帮助用户了解可用类别项目,并且直接导航到这些类别。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Ann Taylor 的网站在 裤子 的列表页面的顶部,加入了不同裤子款式和合身度的说明和图片,以便用户了解其中的差异。

文章来源:优设  作者:陈子木
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

ui设计分享达人

老龄化社会已经到来,如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户,也属于适老化的涵盖范畴。

在前期调研和设计环节中,我们收集了一些相关的文献及案例,并且结合项目实践有所思考和沉淀,在这里与大家分享。

普适的适老化设计理念

世界卫生组织根据现代人生命状况,提出了人生阶段年龄的新划分。45~59 岁为中年人;60~74 岁为年轻老年人;75~89 岁为老年人;90 岁以上为长寿老人。[1]

随着年龄的增长,人们的身体机能、心理状态、认知能力等都会出现衰退的情况。

适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出,设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者(如残疾人、老年人)的使用需求。[2]

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

目前互联网产品中大多数的适老化设计,主要是集中在 C 端。针对不同障碍(视觉、肢体、听觉、认知障碍)[3],目前普适的适老化设计原则有:

1. “强烈“好于“柔和”

针对视觉障碍,常见做法有增大字体大小,使用非衬线体字体,提高颜色对比度等。

相比原版的 App,百度大字版 App 和支付宝长辈模式修改了 UI 界面,每个功能模块都用了明亮的大色块、加大字体的设计。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

2. 善用“辅助”和“替代”

针对听觉障碍,常见的做法有通过视觉辅助,将声音转化成文字、扩大音量、降低语速等。

Google 安卓系统推出了 Live Caption 功能,可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能,可识别特定声音(比如烟雾警报器、婴儿啼哭、敲门声等),并转化成文字及视觉符号推送至手机,方便听障用户辨别生活当中一些重要的声音信号。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

3. “点击”好于“滑动”

针对肢体障碍,减少页面信息的密度,避免使用过小的按钮以及复杂的交互手势。

有研究表明,老年群体在操作时难以瞄准物体,在浏览图片时,由于视力衰退导致无法对焦,他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]

平安银行 App 关怀模式采用卡片拼接的设计方式,将间距放大,保证每个信息有更大的展示空间,同时也放大按钮点击热区,提高操作的准确率。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

4. “具象”好于“抽象”

针对认知障碍,避免使用不易识别的图标,尽可能配有图标或图片,简化信息内容。

有研究表明,文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]

滴滴 App 关怀模式针对老年人进行功能精简,满足高优先级核心诉求,首页只放「一键打车」,操作简单,大字、无广告。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

B端产品引入适老化设计也值得深思

在很多行业中,中老年人因为拥有丰富的经验在岗位上更具竞争优势,譬如教师、医生、律师、会计等职业,工作年限长、经验足是优势,可以提供更好的服务。他们既会使用 C 端产品,也有使用 B 端产品的场景。

随着时代变迁,2015 年世界卫生组织提出了“健康老龄化”理念[6],倡导改变过去“老了就要退出社会生活”的消极认识。

从“老有所依”到“老有所为”,很多的 B 端场景都覆盖了中老年用户,如何提升中老年用户的办公用户体验是重要课题。

另外我们看下 C 端与 B 端的主要差别:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是,C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反,业务逻辑复杂,用户要长时间使用而且要求效率。B 端面向企业定制化,针对特定人群、情景,使得在适老化设计中要解决的问题更清晰。

适老化设计在POS中的应用

留意生活中的零售行业,如餐厅、商场、药局、便利店的服务人员,往往能看到中老年人的身影。

POS 系统是 B 端场景中使用率最高的产品之一,POS 系统的英文全名为 Point of Sale,中文名为销售时点信息系统。[7]它由硬件与软件组成,根据产业和店面类型的不同,会有功能上的差异。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

最近团队参与了一个改造 POS 系统的项目,使用人群覆盖到了中老年用户,提升他们的办公用户体验是其中一个产品目标。

本次项目主要是 POS 界面的更新,完整的 POS 体验不仅有软件本身,有更大的部分在于实体环境与设备,例如:结账区的控件、店面的摆设、扫描枪,读卡器等,而 POS 界面是连结上述元素的节点。

在对 POS 系统进行改造时,我们是按照以下设计思路进行的:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

第 1 步:沿用旧系统规则与结构

B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统,而是存在一个被使用了很多年的系统。

在这种情况下,企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案(尽管不好用,但是大家都会用了),但新的方案如果不好用,他们的生产力反而会因为不知道如何使用新方案而降低。

这就意味着在做 B 端设计时,现行的方案会产生很大的习惯引力。

当设计师要引入一个新方案时,取消或改变某些功能及操作行为将有难度,不能霸道性更改,取代需要合理性。

设计思路:

  1. 梳理业务逻辑和功能模块:沿用旧系统规则与结构。
  2. 制定框架:定稳定一致、拓展性强的信息框架与导航栏。
  3. 统一专业术语:信息表达(文案)与原有系统尽可能保持一致。
  4. 遵从使用者习惯:原系统中可能存在一些不够美观或不合常理但却实用的快捷入口及交互方式,可以整合优化后进行复用。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

第 2 步:理清主要用户与使用场景

想要了解使用者的真实痛点,需从场景出发。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

第 3 步:用适老化设计原则去解决场景中的问题

POS 使用场景有很多,这里列举 3 个常见的使用情境:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

可能存在的障碍:无法聚焦信息内容,难做到边看屏幕边与顾客交流。

设计目标:确保信息在复杂的环境中,信息内容清晰可读。

设计思路:

1. 放大信息内容

服务至上,POS 使用者在工作时需保持端庄热情的姿态,不能只专注看 POS 屏幕信息而不顾顾客。

内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定,在复杂的现场环境中,信息内容要清晰易读。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

2. 色彩对比度符合 WCAG 标准

参照 WCAG 有 AA 和 AAA 的对比度标准,界面中的信息与其背景间的关系对比度至少在 4.5:1 之上,保证信息易读性。

WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南,有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准,给大家推荐 2 款:Sketch 插件 Cluse,Figma 插件 A11y-Color Contast Checker。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

3. 设计有意义的动画

通过动效来表达静态视觉效果无法准确传达的信息,如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。

比如用动画来展示商品被加进购物车的状态,引导下一步操作。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

4. 加大点击热区

提高使用者点击操作的准确率和速度。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

5. 一屏策略

在这次的项目中存在一个场景,除了销售端服务员看到的屏幕,顾客也会有一个客显屏,即服务人员看到的界面,顾客也会看到。

对于页面信息框架以及布局尽量“一屏”展示,确保双方的视线和注意力一致,便于沟通交流。但这时会有挑战:字放大、按钮放大,信息和功能在一屏上怎么放得下?

解决思路:

  • 进行功能筛选,满足场景中高优先级核心诉求,提取核心功能展示。
  • 模块化展示每个信息,根据格式塔的视觉感知理论,做到聚焦用户视角。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

可能存在的障碍:在顾客的“催促”下,使用者也会着急,对事物表现出茫然的情绪,定位当前位置困难。

设计目标:追求信息的有效表达和操作的直觉性与效率。

设计思路:

1. 避免使用不易识别的图标

B 端系统中会有些功能很难用一个图标去表达其含义,此时文字+图标按钮优于纯图标按钮,能帮助 POS 使用者更好地理解语意并做出操作。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

2. 信息的呈现符合用户眼动规律,操作轨迹越短越好

可运用古腾堡图表法 Diagonal Balance,它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律,左上角是视觉第一落点区,右下角是视觉最终落点区,右上角和左下角都是一个视觉落盲点,大多数情况容易被忽略。

在进行信息排布时,可根据用户习惯性的眼动规律,将最重要的信息放在左上角,右上角和左下角添加辅助元素,右下角作为整个视觉落点可以展示重要操作。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

可能存在的障碍:百忙之中,应变能力下降,容易发生误操作的情况。

设计目标:预防不当行为,提升容错率,反馈要及时有效且清晰。

设计思路:

1. 通过二次确认避免误操作

在产品设计时,要把各种可能性考虑进去,通过模态对话框让用户二次确认来避免误操作行为。

当有重要操作时需告知用户处理结果,状态反馈信息采用的颜色需要遵守用户对色彩的基本认知,如红色代表警示,黄色代表警告、绿色代表成功等。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

上述举例的设计原则是启发但不是限制,每个设计提案最后都要经过用户调研,看是否符合使用者的使用习惯,是否真能解决业务与工作中的痛点。

附上总结图:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

其实设计到后面会发现,起初为了方便中老年用户使用 POS 运用的设计原则,最终都能给多数人带来很大便利。

这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。

结语

适老化设计,不仅仅只是为中老年群体做设计,更是一种新的设计思维方式,去挖掘更多普适的场景痛点,来指导我们做方案设计。

市面上很多适老化设计方法为 B 端产品提供了借鉴,但 B 端产品不能为了适老而适老,理清相关工作情境和要解决的问题很重要;不能霸道性更改,取代需要合理性,因为 B 端产品现行的方案会产生很大的习惯引力。

以上是近期对 B 端引入适老化设计的一些思考和沉淀,是开始,也将继续,适老化设计还有很多值得深究和验证的内容。

文章来源:优设  作者:范特西
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


日历

链接

个人资料

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

存档