首页

高手如何从零开始设计 UI 界面?这个实战案例告诉你!

周周

这是 UI 设计师 Diana Malewicz 的一篇 UI 界面设计的分享。怎样在保证基本的可用性和易用性的同时,让界面柔和、富有亲和力?如何在让用户愉悦的同时,还能用设计取悦自己?Diana 的方法谈不上有多神奇,但是让人眼前一亮,值得借鉴。

真的关注趋势变化,你会清晰的感受到,视觉效果和设计技巧一直在变……它们一直是设计师们的话题中心。但是这篇文章并不打算讨论这个事儿,无论渐变是否流行,新拟物化的可访问性是否不足,都不在今天的讨论范围内。

对于各种风格、方法,我的观点始终是:做出来的设计要可用,有用,有良好的可访问性,用户可以轻松理解,就行了。不过,我更乐于从趋势中获得乐趣,而不是将它视作为约束,如果每个界面看起来都是一样的,那该是一件多么无聊的事情啊。

关键在于,要让产品的视觉样式和你的用户群体匹配起来。

我个人非常喜欢漂亮的渐变和微妙的阴影,这样的设计常常显得魅力非凡。这种自然的过渡和光影的变化,非常贴合我们对于现实世界的感知,这就是为什么这样的设计能够俘获大量没有技术背景的用户的心——因为它们看起来友好,并且易于理解。

在这篇文章当中,我将分享如何将 UI 效果设计得出彩又友好,让视觉效果柔和又让人感觉舒适。本文围绕着一个「面向年轻人的金融 APP」虚拟设计项目来进行展示。

下面我们开始吧!

视觉层次的一致性

怎么让我们的设计看起来柔和圆润呢?下面开始准备工作:

1、选择想要使用的配色(想想使用柔和的粉彩构成的背景主色调,搭配一个给人精致感的次要色,以及一个抓人注意力的强调色。)

2、选择合理的字体(我用的是 Brandon Grotesque,这是我最喜欢的字体,它足够友好,能够营造有趣的氛围,且具有良好的可读性)。接下来,给字体设计不同大小和字重(最好不超过5种不同的样式)。其中,标题字体应该较大,正文字体较小,最小的字体用于细节呈现。注意,尽量不要在长句子里面使用全大写。

3、确定你所需要的阴影的高程(Height)和模糊度。

4、如果使用的是图标,确定使用填充样式还是描边样式。尽量不要混用。

至此,一个小型的设计系统就已经确定了。挺好看的!

2020~2021年UI界面设计趋势

涛涛

2020年已经过去一大半,这些时间以来,我一直在关注数字设计领域未来的设计趋势。从年初就开始收集,到今8月份了,我想是时候将发现的一些趋势风格分享出来,这些风格很有可能继续延续到2021的产品设计上。

对于UI界面视觉趋势,同样需要我们高度重视。毕竟每年改版方向,视觉风格研究是必不可少的一个环节,下面正式开始。

少量的渐变

今年在各网站上看到大面积的渐变色设计,相对前两年来说越来越少,设计上有所克制。大面积的渐变色虽然视觉冲击力强,但大部分停留在概念中。

从今年设计中我们可以看到设计更加理性与克制,将渐变色彩运用到关键功能上,突出强调重要信息。

高手出品!2020~2021年UI界面设计趋势

机票选购界面,将渐变色运用到头部位置去强调功能。

高手出品!2020~2021年UI界面设计趋势

运用在功能卡片上,突出重点信息。

高手出品!2020~2021年UI界面设计趋势

如上图,设计上同样只将渐变色运用在背景上,其他卡片上基本没有渐变色。

包豪斯风格图形

几何图形设计是目前运用最多一个设计手法,今年发现一些比较抽象艺术化包豪斯风格几何图形,在UI设计中大量运用,且效果还不错。

这种图形带来好处就是记忆性强,应用广,它不仅可以拓展在品牌包装,品牌图形延展,还可以运用在UI设计中。

高手出品!2020~2021年UI界面设计趋势

卡片设计采用一些具有意向符号的图形,来表达功能的设计,形成记忆点。

高手出品!2020~2021年UI界面设计趋势

品牌设计上,也是重复这种极简包豪斯风格几何图形。将logo元素提取,进行包豪斯风格化,重复运用在设计中。

有深度的界面

今年这样的设计屡见不鲜,大量3D运用在界面设计中,二维的界面已经不再满足当前设计需要。设计师去探索更多维度学科与UI界面融合,形成一种全新的视觉感官。

uber的概念官网就通过3D来呈现,表达功能亮点。

高手出品!2020~2021年UI界面设计趋势

将二维世界三维化,将是2021年重要的趋势。目前国内外线上有一些产品,开始在部分功能模块使用这样设计手法,如Naver,支付宝等。

毛玻璃效果

可以说是趋势轮回,毛玻璃的效果又回来了。这也是今年在各网站设计上出现频次多一些的设计。

新的毛玻璃效果更加去注重功能说明,用在视觉强调的地方。

高手出品!2020~2021年UI界面设计趋势

如上图设计,毛玻璃运用在顶部关键信息上。这样设计即可减少其他色彩运用,还可以对功能信息进行强调。

高手出品!2020~2021年UI界面设计趋势

毛玻璃效果运用在个人中心,人物头像位置,进行设计强调。

高手出品!2020~2021年UI界面设计趋势

运用毛玻璃去包装UI界面,可以提升品质感与神秘感。

沉浸式界面

将功能与场景融合设计,用户在使用产品过程中,能产生更多情景体验感触。这也是最近今年喊的比较火的一种设计思路。在各网站上,这样设计出现次数越来越多,设计效果冲击力强,得到很多设计师的认可。

高手出品!2020~2021年UI界面设计趋势

场景中关键人物元素与设计进行巧妙集合。

高手出品!2020~2021年UI界面设计趋势

运用超现实设计手法,将人物与酒店场景进行排版布局。

高手出品!2020~2021年UI界面设计趋势

将制作材料与产品集合。

高手出品!2020~2021年UI界面设计趋势

拟真植物元素与土地进行巧妙集合,在视觉上传达逼真效果。

界面排版杂志化

杂志化设计风格鲜明,可以有助产品去打造强化记忆点。杂志化设计的优势可以不受到网格约束,排版使用大字体,同时设计排版上更加个性。我们在做产品概念探索前期,可以多去尝试这样的风格。

高手出品!2020~2021年UI界面设计趋势

拟物化图标

拟物图标又回来了,Apple新版本的Big Sur系统,就采用拟态图标,这也是一个新的尝试,当然也是一个开始。我们很有必要时刻关注这个趋势,未来将会在更多设计中看到拟物化图标的出现。

不过这种风格也不能大面积运用在界面中,我们可以运用在一些关键功能入口设计上。

高手出品!2020~2021年UI界面设计趋势

在天气上的运用,相对之前扁平化设计,目前具有空间的拟物化设计,增加了真实感。

高手出品!2020~2021年UI界面设计趋势

圆形的运用

圆形趋势,我想大家也许会忽略的点,最近几年设计中,圆形的设计无处不在。它的好处不言而喻,亲和力强、场景覆盖广,几乎任何设计都能去用圆形。因此我们有必要去注意圆形运用技巧。

高手出品!2020~2021年UI界面设计趋势

星巴克的web UI概念设计,采用圆形与产品进行集合设计排版。

2021新拟态界面

新拟态趋势是2020年受到广泛关注的趋势之一,这种趋势大量使用了柔和的阴影和微弱渐变,使设计既具有未来感又具有现实感,并且为熟悉的界面带来了新的感觉。相对之前大面积浓厚阴影而言,目前新的简化拟态界面,会克制使用这些元素。

高手出品!2020~2021年UI界面设计趋势

2021年拟态界面,更注重功能与体验。拟态效果会使用在关键功能上,如仪表、按钮,又或者需要重点强调的地方,避免了大面积使用这种设计手法。

写在最后

2021年的趋势相对来说,有继续延续2020年一些设计风格,这些风格将会在继续加强,同时我们也有发现,目前越来越多3D元素与二维界面进行集合设计,能更生动传达功能与将故事,2021年大家务必要注意这种趋势的延续。

作为设计师,我们对设计的思考不能只停留在表象层面,而更多的需要围绕信息传达这一设计的本质功能,以充满自省的精神深化和反思自己的设计意识,同时要时刻保持对趋势的敏感度。将新趋势合理的运用在产品设计中,以产生最大化收益。

文章来源:优设    作者:功夫UX

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

关于医疗产品经理,这7件事你需要知道

涛涛

编辑导读:随着医疗行业与互联网的联系日益紧密,医疗行业对产品经理的需求也越来越迫切。在这个特殊行业中,医疗产品经理需要具备哪些能力,应该如何工作,创造哪些价值?本文围绕医疗产品经理展开,从七个方面展开介绍分析,希望对你有帮助。

越来越多的医疗机构开始考虑设置医疗产品经理这个岗位,但是对于产品经理具体应该做什么工作,可能产生何等价值,以及如何招聘到合适的人才,和这个角色在组织内部如何开展工作,都有很多的困惑。今天我们就简单聊聊这个话题。

总的来说医疗产品经理还是个非常新,甚至可以说有一些超前的职能,传统FMCG和互联网行业的产品经理对应的工作内容和思考方式并不能简单照搬过来使用。我们需要清空过去在这些行业积累的认知,从医疗经营的原点出发,从下面7个方面思考:

  1. 医疗产品经理的价值何在
  2. 医疗产品的设计逻辑
  3. 医疗产品经理的职责
  4. 好的产品经理应该具备的技能
  5. 产品经理需要和哪些部门沟通
  6. 与产品经理相关的组织架构
  7. 医疗产品经理的招聘和培养

一、医疗产品经理的价值何在

产品经理就是足球场上的中场大将,起到承上启下,功放转换的枢纽,具体说有三大作用:

  1. 进攻的发起
  2. 防守的第一道屏障
  3. 三条线的串联

什么是进攻?进攻就是尝试主动去占据一块领地。

对营利性医疗机构来说最常见的情况有4种:

  1. 地域上,新开了一个诊所,或者一家医院,要进攻这个网点覆盖的人群。
  2. 专业上,新增了一个科别,可以多覆盖若干种疾病人群,包括自己存量病人,也包括切割存量市场竞品的份额。
  3. 设备上,新装备了一种设备,可以开展之前不具备的检查、治疗和手术能力。
  4. 还有一种是阶段性行动,在没有新的项目情况下,为了扩大客户群,采取一定的促销行动,最典型的如双十一洗牙9.9。

那么,又何谓防守呢?简单来说,就是对应上述各种进攻的应对。

十年前私立医院还不算很多,也还没有那么多连锁诊所品牌的时候,事实上大家主要都在忙着跑马圈地,短兵相接的攻防其实并不多。现在随着市场参与者的倍增,慢慢开始出现了小区域内的半正面PK,并且我预计在未来两年内可能会出现直接内部指名道姓对标的战斗。

足球场上的三条线是进攻、防守和中场,这里我们所说的三条线,大体对应的是:市场营销、医疗质量和行政职能三大板块。产品经理的重要价值就是能够打通这三条线的隔阂,把整个医院的资源凝结成有效的市场成果。

二、医疗产品的设计逻辑

医疗产品不等于,不等于,不等于“打包套餐”!这个概念请务必建立起来。

首先要厘定什么是医疗产品。

可以用“三个明确”来界定之:

  1. 明确人:由专业医务人员实施的某种行为
  2. 明确物:有标准的资源配比、服务项目
  3. 明确钱:有公开的定价

医疗产品开发的逻辑的源头就在于评估一种医疗服务是否吻合这三个明确,因此不是所有的医疗服务都可能变成“产品”。

比如我们医院口腔科有一个非常棒的医生,专注于牙齿美容,我们称之为“微笑设计”。这种设计是完全量体裁衣的,我们市场团队对他的关注点就主要在故事性的传播,而不是试图将这种高度个性化、动态化的医疗行为产品化。

简单来说,对于符合三个明确的医疗服务,我们对其进行产品化的“化”,是一系列有序的动作:

  • 确定需求
  • 自我评估
  • 调配资源
  • 制定服务
  • 设定价格
  • 内部培训

囿于篇幅,这里我们就不展开详述了。

三、医疗产品经理的职责所系

理想中的医疗产品经理对下面4件事情负责:

  1. 开发新品
  2. 发起促销
  3. 产品监测
  4. 竞品追踪

很容易看出来,这4种不同的职责恰好也就对应了攻防转换的价值所在。其中促销是一个容易被忽视和轻视的事情,“不就是打折然后发个微信(十年前是发短信)推文嘛”——绝对不是这样,促销是一门大学问,打折、捆绑、买赠、兑奖、积分凡此种种。不仅花样很多,更重要的是背后的深层次的思考,是“为什么”。

另外,目前的医疗机构基本上也没有人比较认真、成体系地做竞品追踪。这样会失去潜在市场机会,非常可惜。

四、好的产品经理应该具备的技能

我认为一名出色的医疗产品经理应该在下面四个方面都具备一定的能力,没有特别的短板:

  1. 学习能力
  2. 同理心
  3. 数据敏感性
  4. 表达能力

特别就同理心和表达能力简单阐述。同理心,即换位思考,用现在更流行的话说,是场景意识。能否准确地设置出用户的场景,体会到用户的感受,会直接决定产品带给客户的体验,进而一系列结果:定价、毛利、传播ROI、客户口碑,口碑带来的新客增长,等等不一而足。

而表达能力则是决定这个产品经理是否能实现“串联三条线”价值的决定性因素。医院是一个观念高度保守,流程高度复杂的行业,很多人雄心勃勃地进来,最终死在“搞不定那些人”上。因此,优秀的表达能力,包括书面和口头表达能力,是遴选医疗产品经理必须考量的重要因素之一。

五、产品经理需要和哪些部门沟通

我不是危言耸听:产品经理几乎要和医院里所有部门打交道。

常见的如下面这些:

  • 医疗
  • 护理
  • 财务
  • 客服
  • 呼叫中心
  • 新媒体
  • 地推/线下活动
  • 推荐:独立的数据部门

医疗、护理和财务对于产品工作的重要性相信无需赘言。后面几个呢?

试想,你精心设计的卖点,是你自己拉着每一个潜在客户去吆喝么?当然不是,客服要帮你介绍,新媒体要帮你写文章、画插图。他们是不是要吃透你的意思?如果涉及填表、兑奖,要不要和客服商量流程?遇到产品的技术较为复杂,需要不需要策划一些活动帮助客户直观理解其价值?最后,当潜在用户感兴趣而打电话给呼叫中心的时候,接线员是否已经被你提前武装好,能充分回答各种提问了?

至于独立的数据部门,是我的一个强力推荐。传统上由财务和病案提供的数据,更多聚焦于“既往”而很少关注“开来”。如果不由同时懂得医疗业务和有商业经验的数据部门处理,很难直接推动运营的改善和提升。

六、与产品经理相关的组织架构

很多人问我,产品经理属于市场营销部门吗?难道不是属于运营部,或者医疗企划之类的部门吗?

别忘了,市场营销最基本的范式——4P中第一个P就是产品,Product。只要你所在的医疗机构设置有相对完整的市场部门,就应该在其中设置产品经理岗位。或者反过来说,如果你准备建制产品经理岗位,从一开始就应该将其设置在市场部内,并从头开始考虑这个职位所需要的上下游角色和他们之间的衔接。

如前面所分析的,产品经理的后端,一定要有提供数据支持的部门,前端一定要有专业的传播团队,这样才能实现产品的潜力。横向上,产品经理和他的上级,一定要高度重视与客户服务团队的紧密合作。

七、医疗产品经理的招聘和培养

老实说,现在几乎没有多少现成的、成熟的医疗产品经理。因为营利性医疗行业太新了,而产品经理这个岗位在这个行业又是近一两年刚刚兴起的角色。

从招聘角度来说,我建议不要拘泥于候选人必须有医疗背景。我就没念过医学院,十一年前入行,就这样摸着石头过河,也多多少少做过一些还不错的产品,有过几个“爆款”的心得。相对来说,我更看重候选人是否有完整的商业思考逻辑能力。

换一个角度来说,还可以在医院内部挖掘有潜力的人才,从临床部门转型为产品经理。最关键的环节在于这个人是否有足够强烈的兴趣。世上无难事只怕有心人,有医学院背景的人才,只要对产品工作发自内心感兴趣,就有很大的转型成功概率。

文章来源:人人都是产品经理    作者:易亮 

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

2020年的8种UI/UX设计趋势

鹤鹤

世界和技术正在飞速发展,每年都会影响设计趋势的走向。作为设计师,我们需要了解现有和即将到来的设计趋势,不断学习,改进和扩大我们的知识储备,以便与时俱进。

根据研究、经验和观察,我们非常仔细地选择了2020年应该注意的8种UI / UX设计趋势。那就让我们开始吧~


简介:2020年8种UI / UX设计趋势


1. 动画插图

通过对插图,或者让插图进行运动,可以使我们的设计脱颖而出,并使其栩栩如生-增加额外的细节和个性。


2. 微交互

微交互完美证明了:着重于细节和发扬这些细节可能会大大改善你的APP的用户体验,并将使之更高能/更。


3. Web和移动界面中的3D图形

新的Web浏览器功能为3D图形打开了大门,作为设计师可以在现代Web和移动界面中创造和实现惊人的3D图形。


4. 虚拟现实(VR)

游戏行业常将创新、和新技术带入产品设计中。


5. AR技术

在AR空间中,有无数令人兴奋的体验机会。AR的UI设计将成为2020年的主要趋势之一,因此,作为设计师,我们应该做好准备,并主动在创建AR体验时学习新的工具和原理。


6. 新拟物

VR / AR技术的增长,以及最流行的设计平台上显示的那些优秀的设计告诉我们:设计趋势可能会使拟物设计在2020年卷土重来,但这一次,它会加入更多现代时尚。


7. 不对称布局

非对称布局有很大的创造空间,不过创建优秀的非对称布局需要我们有一定的经验和时间去处理它。


8. 讲故事

讲故事就是以最佳的信息和创意方式将数据传输给用户。讲故事也是一种出色而有效的营销工具,可以极大地提高你的产品/服务的销售额。




1. 动画插图

插画在产品设计中已经存在了很长时间。最近几年的发展更是令人瞩目。插画作为非常流行的设计元素,为我们产品的整体UX添加了「自然的感觉」和「人性化的感觉」。插画也是吸引注意力的焦点:通过对这些插画进行动效的展示,可以使我们的产品栩栩如生,并使它们脱颖而出-增加更多的细节和个性。

欢迎来到我们的商店!



入职动画



动效展示的另一个好处是可以吸引用户的注意力并使用户与您的产品互动。动画也是讲述您的品牌、产品或服务故事的最有效方法之一。




2. 微交互

微交互几乎存在于每个APP或网站中。每次打开喜欢的APP时,你都会看到它们。例如,Facebook有大量不同的微交互,其中「赞」功能就是一个很好的例子。虽然有时我们甚至不会特意感知到它的存在,因为它非常明显的、自然的「融合」到用户界面中去了。但是如果你从界面中删除它们,你将很快意识到,某些重要的功能丢失了。

菜单切换关闭动画



标签栏活动动画



一般来说,在UI / UX设计中,有时即使很小的更改也可能产生巨大的影响。微交互完美证明了细节和发扬它们可能会大大改善你的APP的整体用户体验,并将其置于更高能/更的层次。在每一年,每种新设备都会带来新的创造全新的微交互的机会,当然,2020年也不例外。


















3. Web和移动界面中的3D图形

3D图形几乎无处不在-在电影,视频游戏,街头广告中。3D图形是几十年前才被引入到产品设计中的,从那时起,它已经得到了极大到改善,并得到了高速的发展。移动和网络技术也在快速增长。新的Web浏览器功能为3D图形打开了大门,我们作为设计师可以在现代Web和移动界面中创建和实现炫目的3D图形。

3D翻转菜单



汽车健康报告用户界面



创建3D图形并将其实现到Web和移动界面中需要一些特定的技能和大量的工作,但是通常结果是非常有意义的。

Apple AirPods Pro登陆页面



3D图形以一种更具交互性和吸引力的方式来展示产品或服务:例如,可以以360度演示方式查看3D图形,从而改善了产品的用户体验。

在2020年,更多的品牌将使用3D模型来展示产品或服务,打通线上线下,以模拟现实世界(店内)的购物体验。



4. 虚拟现实(VR)

2019年对于VR来说,是重要的一年。在过去的几年,我们见证了VR技术的发展和其不可思议的效果,其中大部分是在游戏行业。游戏行业通常会首先在产品设计中引入创新和新技术。研究证明VR也不例外,2019年Oculus Quest推出后,其他行业也尝试了很多可能性。Facebook首席执行官马克·扎克伯格(Mark Zuckerberg)已经测试了令人兴奋的手部交互功能,并于2020年初正式宣布了Quest的手部跟踪更新!

Oculus Quest-手互动功能



PlayStation虚拟现实网站设计



索尼和微软将在2020年发布其新一代游戏机。这些将为虚拟现实技术带来很多机遇和增长空间。




5. AR技术

过去几年中,我们看到了AR的许多发展和改进。世界领先的科技公司在AR开发方面投入了数百万美元,我们应该期望在2020年行业会扩展和发展此项技术。甚至苹果公司也推出了自己的AR工具包ARKIT 3,以帮助设计人员和开发人员构建基于AR的产品。


ARKit 3 苹果


公共交通应用



Nathan Riley的植物之家AR概念



在AR空间中,有无数令人兴奋的体验机会。AR的UI设计将成为2020年的主要趋势之一,因此,作为设计师,我们应该做好准备,并主动在创建AR体验时学习新的工具和原理。




6. 新拟物

一般来说,拟物设计是指以逼真的样式/方式创建的设计元素,以匹配现实生活中的对象。VR / AR技术的增长和最流行的设计平台(Dribbble,Behance等)上显示的设计趋势显示:拟物设计可能会在2020年卷土重来,但这一次,它会加入更多现代时尚。同时有了一个略作修改的名称:“新拟物” (也称为Neumorphism)。

Skeuomorph手机银行的黑暗模式



音乐播放器



睡眠周期应用程序



我们可能已经注意到:「新拟物设计」代表非常详细和的设计风格。高光,阴影,发光都被运用在设计中去。他们对细节的关注令人非常印象深刻。这已经启发了来自世界各地的许多设计师,并且很有可能成为2020年最大的UI设计趋势。




7. 不对称布局

在过去的几年中,我们注意到产品设计中大量使用不对称布局。基于  传统/模板 的布局渐渐消失。2020年将依旧如此,因为这一趋势将继续保持。正确使用非对称布局会为我们的设计增加很多特征、动态和个性,或许它们将不再拘泥于模板。


Limnia高级珠宝首饰网格



卡琳时装商店



创建非对称布局时、有很大的创造空间。尽管创建成功的非对称布局需要一定的经验和时间、将元素随机放置在网格上当然是不行的)  此外,应谨慎使用和实现它们-因为我们要始终牢记用户的需求:我们不希望用户使用我们产品的时候感到困惑。



8. 讲故事

故事在产品设计中的用户体验中扮演着非常重要的角色。可能会在登录页面上经常看到它们,作为对品牌,产品或新功能的介绍。讲故事就是以最佳的信息和创意方式将数据传输给用户。这可以通过「版权(品牌)保护」与「强大而平衡的视觉等级」(印刷术,插图,高质量照片,大胆的色彩,动画和交互式元素)混合来实现。

讲故事就是以最佳的信息和创意方式将数据传输给用户。 



「本周青年实验室」页面故事动画


讲故事确实有助于在品牌和用户之间建立积极的情感和关系。讲故事还可以使您的品牌更令人难忘,并使用户觉得他们是我们产品或服务的一部分,因此他们希望与他们建立联系。话虽如此,讲故事还是一种出色而有效的营销工具,可能会大大提高您的产品/服务的销售额。作为非常成功的工具,讲故事将在2020年继续并扩大。

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

文章来源:站酷  作者:一个辛普森



上半年最热门的新拟物设计趋势是如何演变的?

涛涛

新拟物化——Neumorphism ,这么说可能不容易理解,但如果说「新拟物风格」,想必 UI 界的设计师们就知道这股「风头」,在2020年刮的多么凶猛了。

乌克兰设计师亚历山大·普卢托 (Alexander Plyuto) 在 Dribble 平台发布了一张 UI 作品《Skeuomorph Mobile Banking》,由于该作品使用了拟物化的设计风格,令人耳目一新,导致了作品的热度持续飙升,并登上了平台 Popular 榜首。Dribble 的评论区直接炸开了锅,大家纷纷讨论。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 普卢托的《Skeuomorph Mobile Banking》,获得了3000多次喜欢

随后一位评论者杰森·凯利(Jason Kelley)在评论中将 New Skeuomorphism 「新拟物化」组合得到的 Neuomorphism 称为「新拟物」 ,并决定去掉「 o 」,于是新设计词汇「 Neumorphism 」便产生了。之后大家便用此做 Tag ,为自己的新拟物化设计作品打标签上传。

此风格的出现也给一直流行的扁平化设计添加了新的展现形式。今年2月初,三星召开 Galaxy Unpacked 活动,为宣传新设备而发出的邀请函,便应用了新拟物化。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 凸出的部分,用来比喻新机型的卖点

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

什么是新拟物风格?

想要了解新拟物的由来,就必须知道拟物的概念。拟物又被称为拟物化,或是现实主义(Realism),概括的说其主要目标是使用户界面更有代入感,降低人们使用的学习成本,产生熟悉亲和的情感联系。

A skeuomorph, or skeuomorphism is a design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design. Skeuomorphs may be deliberately employed to make the new look comfortablyold and familiar.

via:en.wikipedia.org/wiki/Skeuomorph维基百科上关于拟物化的释义

Apple 苹果公司最早提出了拟物化的设计概念,通过模拟现实物体的纹理、材质来进行界面设计,当时的 UI 设计师们都为拟物化设计「痴狂」。苹果创始人乔布斯也非常推崇拟物化,他认为:「通过拟物化,用这种更加自然的认知体验方式,可以减少用户对电脑操作产生的恐惧感」。不妨来回忆下曾经拟物化的 IOS 界面:

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ IOS 5系统中的相机展开状态(拟物化的镜头)

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 拟物化的精美 ICON

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ IOS 6系统中,被精细刻画的录音机(底部指针也很惟妙惟肖)

而新拟物则是拟物的变体,在拟物的基础上改变了图形的样式,让设计元素看起来更有真实感,不再是精细的模拟,更像是从界面中「生长」出来。设计师 Michal Malewicz 以卡片的形式,将新拟物和质感设计(Material Design)对比,阐述了二者在实现时的差别。

新拟物卡片给人呈现的是一种无缝隙的「闭合」感,由界面中凸起;而质感设计卡片,则是漂浮状,阴影向四周发散,没有边界限制;二者的光影效果也非常明显,新拟物偏柔和,质感设计则相反,非常凸显物体本体。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

Michal Malewicz 还标注了新拟物卡片的背景、阴影和高光的色值,整体色调比较接近。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

拟物化风格的结构由背景色+高光色+阴影组成,掌握了基本规律,就可以通过改变按钮、卡片的参数进行调整变换。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 形状、阴影参数的不同,实际效果也有区别

新拟物风格在UI层面的设计表现及趋势?

新拟物也经常被拿来与扁平化比较,因为拟物和扁平化是两个相对的概念。其实在苹果创造的设计系统的早期界面其实是非常拟物风的,但系统从 IOS 7开始,才转向扁平的设计风格。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

随着 AR、VR 技术的进步,其实对于真实物理环境,或者说对显示效率的提升之后,我们对接近物理环境的设计更热衷了。比较有代表性的就是 Google 推出的 Material Design System,它基于人们去模拟真实的物理世界的样子,进而在数字世界里展现我们对于真实世界的一个反馈后,这样的设计流程和逻辑,也让我们的设计更真实,更具有感染力。当然也不止 Google 一家发布了这样偏拟物化的设计风格。

从美学角度来看,其实新拟物化抛弃了之前很多拟物化里不必要的冗余,比如一些阴影、细节的繁琐设计,更偏近现在先进科技发展的设计风格。比如 Windows 推出的 Fluent Design System ,正迎合了未来的 AR、VR 技术广泛普及后的设计环境,希望打造一个先趋的设计系统。

在 Fluent Design System 提到的特点有:Lignt、Depth、Motion、Material、Scale。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

1. Lignt

光照,它指的是点击或 Hover 的动作上面加入光照的效果,或是像柔和的光源洒落在空间中,可以去反应物体本身的反光质感,它和 Material Design 强调的光影的扩散的光影效果是不同的概念。

2. Depth

深度,其实它的概念从 Material Design 开始就已经被强调了,但是 Fluent Design System 希望是用更多的方式去呈现,比如井深的模糊效果,视差滚动的动态效果,物件彼此的大小与位置等等。

3. Motion

动效,其实它想强调的动态效果更接近真实的世界,更强调细腻的变化,比如李安的电影「比利·林恩的中场战事」,这个电影拍摄的帧数与以往传统电影不一样,看起来的感觉会更加的流畅自然,你体验过之后会很难回去之后那种电影呈现效果了。而 Windows 强调的 Motion 也是一样的,比起这种单调的动作,它也会去强调每个设计对象彼此之间的动态效果的时间差,看起来会更加的流畅自然。而且与真实空间中前景后景的物理概念一样,不同的时间差会更容易凸显出想要凸显的主题效果,也会更加的聚焦。

4. Material

材质,其实在 Windows 提出的 Fluent Design System 里面,它会出现大量的模糊,透明的背景。也就是模拟毛玻璃的材质感。通常也会代入一些微光源的效果。除了能够吸睛,吸引你的视觉之外呢,其实在 AR、VR 的界面上面感知空间中的物件是很重要的,所以模糊的背景的利用可以在不影响观看内容情况下,还能起到背景暗示的作用。其实毛玻璃效果在 Windows 系统中已经被运用到了,但是由于当时的效能以及干扰视线的问题仅仅运用在了一些小区域,而这次 Fluent Design System 的就成为了最强烈的视觉焦点,其实同样的 iOS 和 Mac iOS 系统里面在最近的更新也大量使用了模糊效果。

6. Scale

缩放,在视觉上眼前的物体大,后面的物体小,所以缩放也是来营造空间感、纵深感,尺度感的这样一个设计特性。

新拟物风格在设计上的应用体验?

1. 界面设计上的特点

常应用于图标、卡片或按钮元素设计上,背景板多为干净的纯色;界面平滑,没有明显的颗粒感;

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ Filip Legierski 《 Banking App 》

按钮的外边框均设置了阴影、渐变效果,突出立体感;

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ Samson Vowles《 Neumorphic dark ui kit components 》

在视觉处理上,凸出的按钮为可点击的状态,凹进去则代表已选中。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》

2. 被吐糟的缺点

层次结构弱

Whale Lab 观察发现,新拟物弱化颜色区分而强调近远景阴影布局,所以整体色彩都相近,除了在个别的位置加入其它颜色点缀,用户识别起来也会迷茫;而卡片、按钮都使用了阴影,高光效果,层次结构不明确,也很难带来流畅的体验;

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

△ 新拟物风格,Filip Legierski《 Neumorphism UI Elements 》

对比度和视觉限制

明显的对比是界面设计的重要原则。由于新拟物风格具有各种阴影色调和角度,可单击的内容与不可单击的内容区域在哪里不是很好区分。根据产品的功能和要求,每个应用神经同构的产品都可以具有自己的UI阶段规则;但是由于阴影,角度和浮动水平的不同,由于缺乏一致性,迷失方向的可操作项,「神经变形」会给用户带来混乱,最终为残疾用户造成使用障碍。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

如同下面这个例子,按钮状态已点击和未点击的一个效果,由于受压状态的反差太小,则看起来的效果也没有什么不同。

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

增加开发难度

更为严重的是,不少设计者在使用 Neumorphism 进行界面开发过程中,也遭遇到了不少局限。要实现这个风格,主要有两个方式:

卡片、按钮切图,每个状态(Normal、Hover、Pressed)都要裁切,导致资源库图片量过载;

代码实现,这个风格的实现效果是对元素增加两个不同方向的投影,但需要开发对每个元素添加投影,样式代码增多,工作量浩大。

网站neumorphism.io,可以快速生成 Neumorphism UI 。设置按钮的参数值,就能看到多样的新拟物化效果,非常神奇!

完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

新技术、事物、趋势的出现,起初都会给人们带来焦虑甚至是恐慌。不管是拟物还是扁平,Whale Lab 觉得若是绝对化的去推崇某一种,都是错误的,尽管苹果放弃了拟物进入扁平化,也不一定代表扁平就是最好,毕竟二者始终相辅相成。不敢否认,新拟物风格在今后是否变得「真香」,但对于设计师来说,从用户体验、产品出发的优秀设计,都值得被认可与尊敬。

文章来源:优设    作者:UX辞典

2020年最值得关注的10个UI设计小趋势

涛涛

编者按:这篇文章来自 UI 设计师 Diana Malewicz,她在日常工作中会非常注意 UI设计的流行趋势,而这篇总结就是她梳理总结的10个小趋势。它们更多的是偏向 UI 视觉方面,并不涉及到体验和交互。

最近我花了不少时间来观察 UI 设计的发展趋势,我偶然间注意到了不少很有意思的苗头,或者说设计趋势。我认为这些设计趋势,能够在不久的将来塑造更加独树一帜的UI 。

下面是我所梳理总结出来的 10 种趋势。

1、新拟物化

的确,新拟物化是2020年处于风口浪尖的一种视觉风格,无论你喜欢不喜欢,觉得它可行不可行,它现在都已经是一个确定的、成型的风格,并且会持续存在着。

不过,新拟物化从最初诞生到现在,已经有一定的改变了,并且在向着更加复杂、完善的方向发展,有着更为良好的可访问性,开始具备更多拟物化的设计特征,但是更加新鲜、现代,并且更能渲染出独特的氛围感。

2、柔和渐变

渐变这种设计趋势正在进入两极分化的一个阶段。一方面,在视觉设计领域,一部分渐变变得更加夸张,但是在 UI 设计领域,无论是背景、UI元素(比如按钮、卡片和图形),渐变依然存在,只不过会显得更加微妙柔和。

在 UI 设计领域,还有的设计师会使用双色渐变,并且结合模糊效果,让它更加柔和。

3、几何元素

几何元素既可以作为背景来使用,也可以作为装饰细节,让你的设计越来越有趣。几何元素在最近几年受到的关注非常多,在设计上的应用也颇为广泛,甚至有人将几何元素拼接成为马赛克,最终呈现出来的视觉效果非常酷!

4、色调柔和背景

必须说,我个人是非常喜欢这种设计趋势的。我已经看到了很多令人惊艳的、轻巧且极富美学价值的背景设计,它们用明亮柔和的色彩铺满背景,展现出极强的色彩和搭配的技巧。

使用色调柔和的背景能够让整个设计都显得现代而沉静,清新,让内容真正抓住用户的注意力。

5、插画和3D元素

插画毫无疑问是非常流行的。不过,不论是配色还是视觉风格,无论是什么样的插画风格,最终的目标依然是要契合产品和 UI,所以很多插画都选择了相对扁平的风格,或者选择模拟类似3D的视觉外观。相比于每个数字项目都在使用的免费图片,插画真的是向前走出了一大步!

在这篇文章当中,我有分享在 UI 中使用插画的一些简单技巧:

6、抽象图形

和传统的规则的几何图形不同,抽象而不规则的图形可以让界面显得更加不拘一格和好玩,更通俗的来讲,就是让 UI 界面更加「有机」,我认为这是一件好事。使用钢笔工具在原始的圆形和矩形上进行编辑,尝试不同的轮廓,承载不同的颜色和渐变效果,最后生成的效果会非常有趣。如果你不想去自己绘制,可以尝试一下 Blobmaker 这个工具,能够帮你节省时间~

7、深色模式

深色模式在这2年绝对是人所共知的一个设计风尚了,如今的深色模式 UI 设计已经深入到各个不同的应用。简单来说他是整个界面配色反转之后的效果,便于用户在深夜更轻松地浏览界面信息。只不过在具体的设计实施上,深色模式远不是简单的色彩反转就可以实施的,有很多注意事项,尤其是在对比度控制上,具体可以看看下面的文章:

8、倾斜角度呈现

最初大家在 Dribbble 上会倾向于使用非标准的排版布局方式来呈现UI界面,后来这种展现方式开始逐渐在实际的设计项目中应用开来。在实际的设计当中,绝大多数情况下都会挑选30度到50度之间的倾斜角度。这种方法非常不错,可以多尝试。

9、弥散的阴影

阴影是拟物化设计当中最重要的视觉元素之一,而如今它又再次大规模流行开来了。只不过相比于之前「沉重」的阴影,柔和的弥散阴影在美学上更加令人愉悦,通常,阴影会让 UI 元素的「可点击感」更强,并且有助于区分界面中的层次结构。在这篇文章当中,我有详细说明:

10、简约加粗的字体

实际上早在 iOS 7 的时代,曾经一度流行过笔触纤细且字体宽度比较窄的字体,不过很庆幸这个时代过去了。现在所流行的字体更加讲究字体的可读性,字体的外轮廓都大体趋近于正方形,外观显得更加大气而现代。如果你正在寻找类似这样的字体,可以试试 PoppinsMontserratGilroySofia ProProxima Nova 等字体。

写在最后

这篇总结,基本上都是基于我个人对于趋势的观察和了解,在我看来,它们都有着非常强大的生命力,UI 设计的未来会更加富有希望。

文章来源:优设    作者:Diana Malewicz

5G将开启全新的出行方式

鹤鹤

5G以其更快的速度、连接和云访问,将大数据引进车内





在MWC上,华为、小米、三星等通讯企业纷纷发布了5G手机,而吉利也在2月26日的MWC上,宣布了与高通和高新兴合作发布吉利全球首批支持5G和C-V2X的量产车型计划。可见5G时代对于各大车企来说有着巨大的影响,尤其是车联网产业。那么,在5G环境下,汽车行业究竟有什么变化呢?



5G是一代的移动网络,凭借高带宽和低延迟,提供了更快的速度、连接和云访问。5G的最大速度可达到每秒20GB,比4G要快100倍。它可以应用于手机、无人驾驶、VR、电影、充电桩、医疗、农业等多个领域。而基于5G通讯技术推出的C-V2X,是实现无人驾驶和车内技术的重要前提。



万物互联


万物互联是自动驾驶汽车发展的关键,基于5G通讯技术推出的C-V2X能让联网车辆与交通基础设施进行通信。通过5G可以实现自动驾驶汽车彼此之间所有数据的沟通与互联。并与交通灯、道路、传感器、停车场等基础设施之间的信息互联,最终实现车路协同、万物互联。



车车互联提升驾驶辅助


在5G环境下的汽车,可以通过云计算来计算车与车之间的距离、车辆的下一步动作、隐藏车辆可视化、零误差高清导航等信息。同时,也可以与其他车辆实现共享数据,提升ADAS和AEB等驾驶辅助功能,来避免车辆之间发生碰撞。



智慧交通引领场景化设计


5G环境下,大量的数据将被引入车内,来提供更准确的数据信息。如,高速收费、红绿灯、RTTI、实时车位情况、消费支付、行人检测等情况。众多的交互有助于车辆更好的了解环境信息,并作出反馈,从而提供更好的场景化设计。如,自动超车、协作式避让、自动播报前方道路拥挤程度并重新规划路线功能等场景化设计。



再比如,哈曼正在研发的交通信号灯速度优化建议技术,帮助司机根据红绿灯信息调整时速;西亚特测试了在交通信号灯中安装热像仪,以检测行人的动作并将数据反馈给汽车。



车、商业、家居互联改善驾驶体验


当车辆与酒店、商场、影院、餐厅、健身房、加油站、家居、充电桩等场所相连接,就需要以5g结合C-V2X技术的部署为基准。从而根据车主的需求,更快地预定房间、订餐、定电影票、充电桩、商场优惠等活动,实现终端之间更的通信。



比如,我们要去看电影,那么车辆会根据实时路况(是否拥堵、有几个红绿灯、是否有车祸)为您选择最佳的路线方案,并通知停车场到达时间,以方便确定是否有符合您时间的停车位,从而得到及时的反馈。




车载娱乐


可以说,如今我们所说的无人驾驶、车载触屏、全息投影、AR(增强现实)、VR游戏、AR-HUD、实时电影、车辆之间影片共享、移动办公、多模态交互等车载信息娱乐,都是需要在5G环境下来完成的。在未来,你可以在车内利用几秒的时间下载一部电影,也可以在车内与其他车辆之间建立网络游戏通信,实现虚拟内容与车辆运动的实时对接。



奔驰与哈曼合作开发的MBUX信息娱乐平台也引入了增强现实(AR)的车载导航系统。


MBUX信息AR车载导航系统

BMW Vision Next 100 AR-HUD


奥迪发布的“沉浸式车内娱乐系统”,让乘客在车内佩戴VR眼镜,然后车辆会根据行驶路线路况,实时匹配逼真的电竞类影片。


奥迪发布的“沉浸式车内娱乐系统”

手势交互

车载机器人

全息投影

移动办公


安全驾驶


未来的汽车将变得更加安全和,因为5G凭借其更高的带宽、最小的延迟和零误差高清导航,能够预防事故和观察到车身周围的各个角落。再结合C-V2X技术将极大地促进车辆之间、车辆与行人、道路基础设施之间的信息流动和监控车辆异常情况。从而做到提前预知危险,并迅速作出响应来提高道路安全性。另外,5G对于阻止黑客攻击和数据拦截能够得到更快响应,从而保障通讯安全。



想象一下,如果你的车可以在1毫秒内做出反应并将反馈传达给数百人,那么,危险系数就会降低很多。5G时代,端到端的时长为1毫秒,同时1平方公里内可同时连接100万个网络,足以满足智能交通和自动驾驶的要求。



无人驾驶


5G是实现无人驾驶最为关键的因素,如今,5G的成功研发有助于车辆之间大量的数据传输和存储,实现车联网的同时,也保障了车辆行驶的安全性;另一方面,5G可实现数据更快速的云访问,从而更有效地减少传感器技术的成本,最终实现无人驾驶。


总结


5G以其更快的速度、连接和云访问,将大数据引进车内。从而,在提升驾驶体验的同时,实现了汽车与万物的互联,保障了汽车驾驶中的安全性,从而为无人驾驶汽车提供了技术支撑和更便捷和的信息娱乐系统。


  • 5G将成为未来十年全球主导的移动通信标准;

  • 基于5G的C-V2X技术,会加快无人驾驶技术的落地;

  • 5G环境下的车载信息娱乐系统将改善用户驾驶体验,同时催生大量的市场新机会;

  • 共享平台下,5G将根据实时路况作出更准确的判断,从而减少时间成本和停车成本;

  • 5G远不止应用于汽车、手机,它将应用于医疗、机器人、农作业、航空等更多方面;

  • 5G技术为无人驾驶的实现提供了技术支撑和安全保障,同时也降低了安装传感器技术的成本;

  • 5G实现了车与车、道路、家居、商业之间真正意义上的“车联网”,为交通提供更准确的交通信息和通信信息;

  • 5G将会提供更多的场景,从而加快市场社会变革和新的商机,但需要大量的资金投入,能否将技术化为盈利是一大问题;

  • 5G以毫秒的速度,提供更精细的地图数据和更高级的驾驶辅助,并作出快速的反馈,提高了驾驶的安全性,对于减少交通拥堵,提高交通效率和道路安全有着积极的作用。



转自-站酷

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




2020的UI设计趋势,我先收藏了(上)

鹤鹤




设计总是在变化。在过去一年里,我们不仅看见了五福的C4D运用,双11的动效插画运用,以及大量AR/VR智能的设计,还有苹果黑暗模式的普及,新技术带来新的体验和解决方案。2020年,关注研究新兴的用户体验趋势,前段时间,在我星球里,我带着设计师一起来研究关于2020界面设计趋势,希望能帮助大家是设计中有所启发。



 研究背景 



 随着UI/UX领域人工智能的发展,和虚拟现实等新技术的变革,从前单一的内容很难满足用户的诉求,用户的诉求也变得千人前面,所以在研究趋势之前,我基于这些关键词,来分析2020的设计趋势。




 色彩趋势 



1.彩虹渐变


这两年来,彩色渐变一直是设计趋势,设计师将大胆的渐变,饱和度更高的渐变运用在设计中去,让整体的色彩感觉,更加年轻化与活跃。



 Apple一直是这个领域的引领者,随着当年iPhoneX的发布,彩虹的渐变色,大胆的渐变风格瞬间成为设计师笔下的弄潮儿。



 这组插画中,作者就运用了大面积的渐变,两种颜色的运用,通过重叠,明度变化,丰富了整个设计层次。



 不仅在平面设计中,在网页设计中,也是被大量运用,SWATCH的官网,清新的渐变配合动感的模特照片,以及和产品的完全结合,让页面充满着活力。



 在移动端也是如此,金融产品的背景设计,银行卡面的设计,可视化图表的运用,都能看出大胆渐变还是很受欢迎。


2.黑暗模式


随着google和facebook以及instagram这些知名应用都开始提供黑暗模式,国内微信也开始黑暗模式,2020黑暗模式设计,一定是需要设计师去关注的。


黑暗模式,除了在黑暗中提高内容可读性以外,还能减少用户疲劳,还可以节约电池,所以黑暗模式在今年将是所有应用程序必不可少的一个功能。



 Google的黑暗模式运用,通过一个简单的按钮开关就可以切换,也可以根据系统定义切换。



 黑暗模式未来会成为一种标配,一个软件设计在刚开始的时候就必须考虑进来。



 关于黑暗模式,正向当年iOS扁平化刚出来的时候,国内的很多产品都还没有准备好,但是相信过不了多久,黑暗模式一定会普及开来,所以2020大家都应该提前去了解黑暗模式的,设计规范和细节。


3.更大胆的一种颜色



 除了渐变色,那么大胆的单色在设计中运用也会越来越多,整个设计就一套色彩体系贯穿,大多时候以品牌色的形式去运用,配合留白,对比明显的字体,整体给人印象深刻。



 在韩国的应用中用的比较多,它的优势是色彩干净,品牌整体感强,但是对设计师驾驭页面能力也要求很高,因为大面积的单色,如果用不好就会很刺眼。


 Naverpay的设计,整个界面就是用的绿色渐变,清新同时也能很好和Naver品牌色进行结合。



 在它的很多页面中,很多控件这个绿色运用的很巧妙,不会给人很刺眼的感觉,所以大胆的一种颜色运用在2020页将是设计师值得去关注的一个方向。



▲ 扫码加入知识星球,了解更多




 插画趋势  



在过去几年里,插画是一种新的表达方式,越来越多的设计师,插画师通过插画表达产品的情绪,个人的情绪主张,那么在2020插画的运用就得和品牌很好的融合起来,如果你的插画是和品牌割裂的,需要注意。


1.和品牌结合



 wibbite的插画,标志性欧美的风格,除了插画本身手法比较简约模块,插画中运用的色彩和内容本身也很产品定位匹配。



 插画对于品牌来说也是非常重要的一个因素,无论在界面设计,还是在品牌营销很多场景都需要插画去营造产品氛围和气质,插画有助于将我们的品牌故事讲述给听众听,所以在构建一个品牌时候,插画是非常重要的点之一,但是做之前一定要尽量多去了解我们为客户提供的设计价值,只有了解了用户价值,才能去定义去特色的故事,帮助产品。



 Uber系列插画提供暖色,以及安全蓝的运用,突出打车服务中安全的关键要素。




 Google的插画系统也是如此,没有很华丽的炫技,有的是对于多元文化的思考,设计场景的融合贯通。


所以不难看出,插画的方向一定是和品牌结合的,不会为了趋势而趋势,一定是围绕内容去设计。



2.3D插画



▲ 如果说这2年,各种各样的插画手法百花齐放,那么随着人们的审美变化,趋势也从静态变成动态,从平面变成3D,从今年的支付宝五福设计中大家应该能感觉到2020的插画设计一定是往着3D方向,而且是动态3D方向演进的。



 谷歌一组插画,结合与大脑、团队合作、想法、密码箱为图形进行创意设计,人物造型可爱好玩,凸显年轻化潮流。



 Apple在中国区App Store 的一组设计,整体设计以红色为主,运用了象征中国元素的龙、红包、灯笼、福字、纸牌作为设计元素,整体运用3D表达,凸显年轻和趣味性。


3.等距插画



等距插画这两年已经是一个主流风格之一,在未来还会接着流行,但是等距插画未来或许和场景联系在更紧密,在每年天猫双11设计中,互动城的设计每年基本都是等距插画风格,它的故事感和画面感,都能让人眼前一亮,所以电商的设计,在短时间内,大型活动场景基本都离不开这个风格。



 这组等距插画场景故事感很强,建立了一个空间世界,作为网站主风格非常的吸引人。



 除了这种大的场景,等距插画,在小的场景中,作为插画规范也是运用比较多,它风格可轻可重,随着5G时代到来,静态可能会逐步演进成动态插画。


4.根据内容定制的插画



随着内容的升级,对内容的表达也会被越来越重视,那么如何更好的把内容更生动表达出来,插画就是很好的一个形式,根据内容定制的插画,在很多产品中被运用到,互联网教育,IT等领域。所以专门针对内容去设计插画,在今年或许是一个趋势,插画不再是孤零零只是为了情感化而存在。



 Crowdrise的产品设计,整体就是运用作为整体设计语言,风格统一,内容突出,画面效果好。



 插画的形态终于不再是孤零零的只是用户情感的表达,而是随着内容的升级变化,在产品中发挥的重要性也越来越大。


3.3D黏土插画的运用


3D设计因为今年设计师很喜欢用的样式之一,我们将尽管3D已经存在了一段时间,但最近我们看到了很多模仿粘土样式效果的3D插图的兴起。这将成为今年流行的设计趋势,我们甚至还会看到很多艺术家在电影,插画和广告中结合了2D和3D风格。



 在instagran的一组设计中,设计师运用这种黏土和3D的方式设计,画面充满了生活感和温暖。



 谷歌也在它们的项目中大量运用这种黏土风格设计,会显得更加的现代和活泼,黏土的设计相对3D插画区别在于更加细腻,线条上更加柔和。


 字体趋势 



这几年越来越多的公司,开始定制字体,根据自己的品牌特质去做一些独特的字体,从国外到国内,品牌定制字体未来或许还会越来越多,对于设计师好处来说,这些品牌字体很多都是免费开放给设计师用,会形成一个很高的商业环境。


1.定制字体



 锤子发布了他们的Smartisan T黑字体。



 腾讯发布了定制的“腾讯字体”,相比原来倾斜的黑体字,腾讯的新字体更现代、更协调、更动感。运用起来也非常有力量感。


 阿里普惠体,随着集团业务庞大,字体使用场景多且复杂,包括各产品客户端、营销设计、操作系统、硬件设备、建筑空间及公关传播等等。决定以现代为核心设计理念,以可靠、明快为设计切入点,将阿里精神融入到字体当中。最终一款拥有现代感满足全场景黑体诞生了,而且商用免费。




 除了前面的阿里,腾讯,锤子,小米OPPO,京东也都发布了自己的专属品牌字体,所以在2020年,品牌字体或许是每个公司的一个标配了,我们拭目以待。




 国外其实是最早开始为品牌定制字体的,三星手机虽然销量消化,但是他们品牌字体:SamsungOne,设计风格,很强的现代感,而且,这个字体有不同粗细的笔画字重,适用面很广。






 IBM的字体名称:IBM Plex Sans Text,这款字体设计比较简洁,干净,没有多余的笔画,这个字体很良心免费商用的。


2.粗体的运用



纵观2020的一些设计,留白越来越大,边距越留越多,字体也变的很粗,粗的字体和正文普通字体形成了明显的对比,再加上网格的布局,让页面内容更加凸显。



 大字体的运用,字体就是内容,重复运用内容元素作为排版手段,对于内容组织和平面要求较高。




 在UI设计中,大字体的设计也很常见,苹果商店,苹果官方应用都是大字体的推崇者,随便5G的来临,对于内容的追求也会越来越高,那么除了大字体,视觉元素减少,内容本身质量要求也越来越高。


 粗的字体常用语大标题,或者页面导航性指引作业,帮助用户更好去理解功能本身,上面这个页面粗的字体就是导航,告诉用户这一页,你需要去完成什么动作指引。



▲ 扫码加入知识星球,了解更多




 最后 

 

设计趋势必然与技术发展紧密结合,作为设计师我们需要了解,以及平时和我们设计进行结合,下期将带来,2020的UI设计趋势下部分,看看还有哪些需要我们去关注的。

转自:ui中国-skys 

国外设计师分析的全新UI趋势,原来是它~

鹤鹤

分享火爆Dribbble和Ins的设计趋势




相信最近很多小伙伴在逛Dribbble时候,发现最近流行一波新的设计风格,和以往不同的是,这次趋势又回到之前拟物化了,但它与纯拟物化还是有区别的,现在它有一个流行词语叫“新拟态”,今天就和大家分享下国外一位设计师对这个趋势的看法!





拟态化是什么?

-

虽然UI以各种拟态化的形式存在(例如,您的桌面OS垃圾桶),现在这种风格的趋势更加明显。正如卡米尔·法拉纳(Kamil Falana)指出的那样,从无生命的“表达”到现实主义的过渡开始出现。



不久前,我们还观察到,这种变化开始在我们身边发生,苹果(IOS13系统)就是一个很好的例子。向最小化设计和轻拟物化发展,最终带来了无纹理3d视觉感官。受到了大家的喜欢,来看一张高清图。






拟物化风格的回归,会更好吗?
-

如下图设计风格,在dribbble上获得认可度比较高!


Dribbble用户alexplyuto的作品获得了四千多次赞,并带动了这一趋势。


这种设计引发了一波设计潮流趋势,尽管其中的有部分并没有实际意义(可滑动的后退箭头?),但这使我们对UI 再次产生浓厚的兴趣! 

备注:可看出目前扁平化设计过于雷同,用户审美疲劳。偶尔出现新设计趋势风格,反而更个给各位设计师们带来新鲜感!





新风格的特征点

-

由于按钮的视觉表现看着变化不大(因为小了一些,不直观),因此我们将重点放在实际的卡片概念上,以使这种视觉表现更能直观感受出来



- 现代材料卡片(右图)
如现代材料(升级版)卡片,通常是在画布中以浮层的形式出现,厚度更加明显。阴影既可以增加深度,也可以在很多情况下定义形状本身,因为阴影通常是无边界的。 

- 拟态化卡片(左图)
拟态化卡片从背景中突出。它是由与背景颜色完全相同的卡片制成的凸起形状。当我们从侧面看时,它不会浮起来。 
通过调节两个阴影, 一个阴影为负值,另一个阴影为正值,很容易实现此效果。 但是要使其正常显示,我们的背景不能是全黑或全白。它至少需要一点色调,以便可见“深色”和“浅色”阴影。您可以使用任何色调作为背景,以便根据您的选择将其变暖或变冷。但是必须能看到深色或者浅色投影。 


这是例子,根据您的喜好进行调整:






优缺点

-

这种风格的主要好处是“新鲜”(至少持续很长时间)。它为界面带来了“新感觉”,并使其脱颖而出。它也可以与其他样式混合使用,这样就避免很呆板整个画面变成这种柔软凸起的效果。

到目前为止,有一些问题需要解决。我们发现了两个主要问题:

1. 可见性

2. 易用性


- 可见性

图形与背景对比度的主要问题是,当它们都是相同的颜色时,就没有可测量的对比度;客观上存在阴影,因此我们可以近似并尝试测量其外部的第一个像素。在上面的示例中,我们得出了这些对比度值。


如您所见,现代材料卡片和新拟态化卡片的对比度都非常低。并且卡片本身并不用于主要的操作控件上(只是一个背景),只要我们保持按钮突出并具有足够高的对比度,就可以了。 
两者之间的差异很小,如果我们想为卡片使用更好的对比度,我们就必须这样做: 


而且由于几乎没有人会尝试使用如此强烈的阴影,这意味着其余UI元素必须可访问。这种假设得出的结论是,如果我们通过版式,相近度和与重要元素的对比来进行正确的层次划分,那么这些卡片/凸起的塑料卡片并不那么重要。

尚未对此进行测试(我将尝试找到时间做这件事),但现在我们假设下面元素的两个“版本”均为“确定”。即使有些人看不到阴影,也有足够的对比度让他们看到图标并“使用它”。



- 易用性

尽管“按钮”看起来像按钮,但是如果图标本身与背景形成鲜明对比,它将仍然有效。 因此,这里要记住的主要事情是,如果要使用这种样式,请以足够高的对比度保留所有重要元素。

毕竟,大多数“现代材料”卡片视图也不会通过阴影来做对比。 





仅仅是卡片吗?

-

但是,如果我们决定将组件用作按钮而不是卡片,则会出现可访问性的主要问题。

我们可以像下面的示例一样轻松创建带有内部阴影的按下状态。


对比度测试


这里的问题实际上很大。 

此按下状态的对比度太小,不足以表示差异。是否可以通过改变的其余部分来表达按钮的状态,这里有一些想法,例如使用轮廓和填充图标,下划线或甚至用颜色填充按下状态。


尝试各种想法,但状态必须立即被识别。 




开发

-

开发实现其实它比我们认为的在CSS中实现“软阴影”外观要容易。我们尚未研究Swift和Kotlin,但我认为这不应该成为问题。

https://neumorphism.io/#55b9f3(实现新拟态效果CSS代码)






其他影响

-
刚才说的形状只是一方面。这种设计新样式还带有更多的按钮和图标。通常情况下,我们只需要回到“过去的美好时光”并使用位图。这似乎是一种回归,不必担心-这是没有必要的。 

您可以轻松地将可开发的设计与这些卡片形状组合在一起(新拟态卡片),从而获得很好的效果。







我们真的需要这些吗?

-

尽管这一新趋势影响了许多设计师,但对比以前使用的卡片组件可访问性问题相比,它的问题并不那么严重。

所以去疯狂的顺应这一趋势,并对其进行调整以使其成为您的趋势。UI设计师的工作就是需要不断来回挑战自我,探索潮流,以符合产品审美。如果没有这种不断的探索的精神,所有产品将再次看起来相同,同质化严重。



但也要记住,每个新趋势都带有不可抗拒性因素,如果要使用,必须精心的设计探索, 验证后才拿去面对用户。 



个人感悟

-

本篇文章,作者通过对新拟态设计趋势分析,在文中提及“新拟态”和以前材料卡片的区别,同时证实了新拟态风格优势!但也存在一定的弊端!如何去权衡与设计的把控,需要设计师们多去研究探索!



就我个人而言,我认为目前新拟态设计风格, 其实更适合像车机那种偏实体硬件的HMI设计又或者智能硬件平台,智能橱窗,智能镜等,但是如果在移动端去使用,那么需要去适当做简化。如何去简化以适应新趋势,这需要不断去尝试。 



这一趋势如果要盛行起来,需要大厂来引领, 比如今年苹果会出现的IOS14或者Google材料3.0到来。 扁平化是苹果带来的,材料设计师google带来的。 

如今新拟态才初出茅庐,还未被广泛使用,需要有先驱者引领。毕竟国内的环境大家都不敢冒险去尝试运用到线上! 



转自:站酷-功夫UX 

循环设计,用户体验如何呼唤时代变革

鹤鹤

关于循环设计,可持续发展是商业领域非常关注的话题,作为UX需提前转变思维,给企业带来更多价值,一线大厂已在运用这种思维


本文共 3589 字,预计阅读 10 分钟

译者推荐|本文从“可持续”和“设计”的两点谈起,来论述从线性经济向可持续经济的转变,以及“可持续设计”的四个主要阶段:理解、定义、制造、发布。

“循环设计”不是为了追求时髦或者抬升设计地位,而是将这个已经日益庸俗化的“设计”冠为自己的定语,是设计本身发展所趋,以及可持续发展所需,设计界需要对自己的责任有所承担,形成一个全局观、系统性看待设计问题的方式。让回收利用和可持续发展成为一种规范,从而做到一劳永逸。

我们生活在一个呼唤变革的世界。在过去的50年中,现代社会所依赖的漫不经心和无休止的消费是不可持续的。我们从小就不关心自己的事情。如果有什么东西坏了,我们也就不修了。产品被设计成用完直接丢弃,而不是去修复。数字产品也不例外。然而,为了解决这些问题,出现了一种新的思维方式:循环设计(可持续设计)①。(益达说:其实这个理念和风格已经存在了很长的时间,大多应用在不为大众所知的能源、材料再生流程之中,然而随着时代的发展,循环设计可以变得更加普世。)

①注:循环设计是20世纪80-90年代产生的一种设计风格,他又称回收设计,是指实现广义收回和利用的方法,即在进行产品设计时,充分考虑产品零部件及材料回收的可能性,回收价值的大致方法,回收处理结构工艺性等于与回收有关的一系列问题,以达到零部件及材料资源和能源的再利用。它旨在通过设计来节约能源和材料,减少对环境的污染,使人类的设计物能多次反复利用,形成产品设计和使用的良性循环。

那么,循环设计方法意味着什么?在数字产品上要如何使用?在回答这些问题之前,首先,我们需要仔细观察我们是如何构建我们的世界,为什么这个世界已经不可持续了,并且要理解环保世界的需求是如何改变我们的思维方式,促使我们渴望从线性设计模型转变为循环设计模型。


向循环转变


我们的经济主要基于“按需配置”流程之上。在此线性系统中,我们构建了会在一段时间后淘汰的产品,并且将其组件视为垃圾。与此相反,循环设计方法将产品的生命周期视为一个闭环,其中资源不断地被重新利用。


在“经典”线性模型中,产品经历了生产、消费和破坏的各个阶段,最终以浪费告终。在设计一款循环产品过程中,我们使用的方法包含四大阶段,这四个阶段形成了一个闭环,并形成了一个恒定的循环,在这个循环中,不仅仅只有闪闪发亮的、新的,未使用过的材料才被受欢迎。

 

循环设计方法的四个阶段是:

理解 / 定义 / 制造 / 发布



当我们同时看线性设计和循环设计模型方法时,有一点吸引人的是,开始设计东西的时候,方法的差异。从只是生产某种东西,到对我们将要生产的产品做出深思熟虑的决定,以及在实施过程中付出的努力和关心,这是一个大转变。


看看我们现在的立场


为什么做出这种转变如此的重要?我确信每个看新闻的人都听说过气候变化。NASA 致力于解决环境问题,因此我们都可以非常详细地了解人类行为和无限增长对我们生态系统的影响。


但好消息是我们不必继续这样做,因为我们可以很容易从数字世界中“产生”方式中学习事物的产生。电力废弃物已成为现代世界的主要废弃物来源之一。大量的手机和电脑被扔掉,随之经济是建立在每年都有新东西的基础上的。


当您的手机屏幕意外碎裂时,我们该怎么办?我们知道如何处理它吗?我们知道如何修理吗?我们并不知道……但是幸运的是,有些设计师对此问题提出了解决方案。Fairphone② 是一种合乎情理,模块化的智能手机,其组件数量很少,可以轻松更换和回收。大公司也应朝这个方向迈出一步,让回收利用和可持续发展成为一种时尚和规范,一劳永逸。

② Fairphone:这家公司生产的手机希望实现全球手机供应链的公平贸易,具体而言就是不使用“冲突矿物”并且确保生产手机的工人没有被奴役和压榨,目前仍然坚持在非洲贫困和战乱的国家进口材料,已经在刚果和卢旺达境内找到了一些矿山,用更好的商业实践推动当地经济更健康地发展。


设计和设计师的重要性


设计师,比任何其他专业人士,都更有可能在一转变中产生巨大的影响的人。我还敢说,我们有责任采用可持续设计的方式行动和思考。因为是我们创造了那些最终出现在传送带上的东西。我们也有责任教育我们的用户。幸运的是,越来越多的人重视具有可持续发展目标的产品或品牌,或者重视起在产品背后有意义的故事。同样,可持续发展不仅成为流行语,而且成为一种价值观,被越来越多的人意识到基于有限资源的无限增长是无法实现的目标。但是,要从线性经济向可持续经济转变,我们需要学习不同的思维方式。幸运的是,智能设备和数字产品的时代带来了一种复杂的设计思维方法,可以作为物理世界中生产链的范例。


用户体验必须提供什么


地球上有一个地方,您不能随便丢东西:互联网。这是一个对已有产品进行再构思的地方,您只能去完善它,不能丢弃它,因为如果您一夜之间说:“我不喜欢我的网站,明天我将推出一个全新的网站”,那您便会失去用户。

如果我们看一下可持续发展设计方法的四个主要阶段,就会发现我们在用户体验设计中使用的方法与此很相似。

让我们再次看一下四个阶段,然后将其更详细地分解:

理解

当我们谈论与循环设计相关的理解时,我们谈论的是在开始设计一个未来的产品之前就了解它的用户和环境。研究一直是数字产品设计的基础。与数字产品的连接比与实体产品的连接要更多的涉及到人类的心理。因此不可避免地要开发出新的研究方法,以帮助我们洞察用户在使用某种产品时的想法、感受和行为。但这不仅与用户有关, 研究还必须深入到经济领域,并研究未来产品的组成部分,同时牢记它们必须可被再次利用。


定义

在此阶段,将定义(商业)目标,并构建一个商业模型画布作为生产过程的计划。用户体验使用这种方法已有一段时间了,让涉众参与其中,并在设计过程中更多地激活它们。为我们设计的产品设定一个目标是至关重要的,因为有了它,我们可以为用户创造额外的价值。因此,无论是制作商业模型画布还是举办精彩的价值主张研讨会,在生产方式中实施这些方法都会对当前的生产流程产生巨大的影响。


制造

这是关键部分。现在我们正在做的事情就好像没有明天一样。随着每种无法回收的产品的出现,我们产生的废料越来越多。但是循环方法是为产品创建一个原型,并定义将需要使用那些材料反映在产品原型上,并在定义阶段概述的商业模型上定义材料。原型设计和构思是用户体验设计过程中的关键要素,这也是为什么需要制作原型。


发布 

根据循环设计模型,随着产品的发布,生产周期进入了第四阶段,然同时理解阶段又重新开始了。对于数字产品来说,这是自然发生的事前:你发布一个产品,基于该版本收集反馈,然后构思它,周而复始,这个循环再次产生。


但是,观察这个循环并建立这些连接仅仅是冰山一角。在数字时代发展起来的设计思维给世界带来了许多反思。


变革中的大佬


幸运的是,已经有许多大品牌意识到转变的必要性,并采取和提出了数字设计思维方法来支持转变,并建立循环设计的时代。根据《循环设计指南》,“我们应该把我们设计的所有东西都看作软件产品和服务——这些产品和服务可以基于我们通过反馈得到的数据而不断的发。”


用户体验研究和用户体验设计一直是在做的一件事是:基于全面的研究和真实的用户需求来构建产品。上面的设计指南是非常复杂的工具,具有许多可能的方法。它强调了从产品到服务流程转变的重要性,并展示如何使用敏捷流程并将其实施到构建产品的方法之中。


IDEO(全球顶尖的设计咨询公司)与 Ellen Macarthur Foundation(艾伦·麦克阿瑟基金会)合作,试图“试图通过设计构建一个具有恢复性和再生性的经济框架”。在这里,您可以找到几乎每个生产方面和领域——例如食品、时装、经济和设计——并在每个领域中提出解决方案,以打破线性生产系统。


耐克还宣布了其基于循环设计模型生产高品质运动鞋的新方法原则。正如您已经看到的那样,无论您身处哪个经济领域,都可以为循环生产过程的蓬勃发展做贡献,并成为一支主导力量。


重要的结论


我认为,作为设计师,我们始终要为变革而努力,并始终努力与客户、产品或服务保持紧密的关系,并通过构思使其不断完善,以实现这一目标。这是因为伟大的事情只有通过时间和不断的反思才能实现。在离线世界中,数字设计过程也有很多东西可以贡献。希望通过教育,能有更多的大公司意识到用户真正想要的产品是具有更多功能并可持续使用的,而不仅仅是将它们当作一次性产品,一旦它们不像最初那样光鲜就把她扔掉。

转自:站酷-大猴儿er 


日历

链接

个人资料

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

存档