首页

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

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

创意动画

1. 品牌加载

公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。

△ Netflix & Airbnb

2. 图标动画

微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。

最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。

△ Facebook Website

留白分隔

在 UI 界面中,最常见的分隔方式是用细线对模块进行划分,但随着设计重心趋向简约,注重内容本身,传统的分隔线方式就略显多余。

根据格式塔亲密原则,通过留白控制间距大小,可以清晰地划分模块层级,同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。

△ Gmail & Messenger

融入插图

1. 品牌形象插画

一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象,包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。

从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的 ID。

△ Snapchat

2. 3D插画

随着软件技术的提升,3D 插画在这几年中大受欢迎,很多应用都使用 3D 渲染产品,如:星巴克、Keep、毒App 等等,因为它真实立体,有着更高的转化率。

△ Starbucks by Wojciech

△ Keep & 毒

圆角卡片

圆角代表友好、亲和力,而卡片模块化的布局更为清晰、有效、整洁。

在上周的微信改版《微信 7.0.5 发布:9个细节提升体验》的文章中,我讲到了订阅号的推送文章去掉了标题栏的背景,卡片变得更加简洁。另外,公众号详情页由原先的列表式,改成了圆角卡片式,弹窗也由直角改成圆角。

△ Broadcasting & 微信

视频背景

长期以来,图像在视觉设计中起着至关重要的作用,而视频能够更直观的吸引用户,传达主要的思想。

在移动端中,视频主要用于登录页背景,一般可以是几秒钟的循环剪辑视频,它可以带来一种身临其境的体验感受。

△ Lyft & Nike

轻提示

Toast 是一种轻量级的提示,作为用户操作后的反馈。UI 形态上从居中浮层,慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。

举一个反例,iOS 的调整音量提示,大范围的遮住了界面,特别是对正在玩游戏的用户非常不友好,直到 iOS 13 这个设计才被修改。

△ Google Earth & Spotify

色彩平铺

随着扁平化设计和 Material Design 进一步占据主流趋势,简约的界面,明亮,大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。

△ Snapchat & Spotify

注重内容

重内容、轻 UI,把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点,就是文字都是黑白灰,将彩色交给图片去传达,让用户关注内容即可。

△ Facebook for Android

AR

增强现实的技术,已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面,可预期到这种类型的 App 将会越来越多。

1. 地图导视界面

地图+AR,让你不再盯着二维平面上那个蓝色的点,而是现实世界中的箭头告诉你在哪个路口转向。

△ Google Map

2. 表情贴纸

Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作,表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。

△ Spark AR

车载系统界面

随着 5G、车联网、人工智能、自动驾驶的发展,车载界面也越来越受重视了。

在今年的 Google I/O 开发者大会上,针对车载系统 Android Auto,推出了新的设计语言,它有着更好的可拓展性。在 UI 上,完全重新设计了导航栏,能够更轻松地访问应用、通知,和你的 Google 智能助理,最大限度的帮助驾驶者减少分心,将注意力集中在道路上。

△ Android Auto UI

此外,还开发了新的系统小部件,在使用地图进行导航时,仍然可以一键控制音乐应用,或者正在进行的电话,同时在屏幕上保持地图的完整视图。

总结

UI 设计的趋势除了侧重内容和情感之外,还会根据不同设备载体、新的技术(3D、AR)而变化。但归根结底还是以人为本,借用 Adobe 设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求,用户的需求,打造真正人性化,多元化与包容性的设计。

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


2019 年 LOGO 设计趋势报告(下)

涛涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

抽象图形拼接

坦白说,这些抽象的 LOGO 设计让我立刻想起了JK·罗琳和她书中的魔法符号。如果这些Logo背后都有着独特而富有力量的故事,那么它们确实可以很好地服务于品牌。这样的了 LOGO 设计应当在笔触上保持一致,并且充满意义,我觉得如果能传递出这样的信息,它就很优秀了。

利落清晰的笔触,完美的角度和弧线,这样精准的设计会给人带来可靠的感知。当然,这些Logo 的应用场景同样有着严格的环境要求,设计师几乎没有异想天开的余地。这些 Logo 看上去相当正式,有着明显的高级感。

负空间

借助负空间来传递信息一直一种巧妙的 LOGO 设计技巧,它就像缺少关键证据的犯罪现场,墙上的洞,它并不是借助现有存在的因素来告诉你信息,而是通过一个「不在场的关键元素」,来传递重要信息。负空间就是这样,它同样也是一块画布,只不过给人的感觉是通过画布的背面来呈现信息和故事。

负空间并不是为了隐藏信息而存在,就像联邦快递 (FedEx) Logo中隐藏的箭头,或是 Toblerone 巧克力 Logo 中山腰上的熊。这些元素都不是为了隐藏信息,而是为了通过这种不完整来传递更多的信息。通过正空间来凸显负空间就是关键的技巧,正如 Reinhard Ernst 博物馆的 Logo 所示,中间开放的矩形区块如同画框,似乎可以代表博物馆的任何一件藏品,这也是一种「less is more」的设计。

托拽笔触

很多做 Logo 的设计师都曾经历无法控制的时刻,发呆失神应该也经常会发生。如果你是在纸上画草图,笔尖无意识地滑动,或者墨水洇出,都会产生有趣的笔触痕迹。我知道这不是电脑上绘图的方式,但它确实帮助我描绘出这种视觉设计的特征。将笔尖绘制成一个完美的圆,而笔尖后则是留下托拽的痕迹,在笔痕结束的位置,自然留下的也是一个圆弧边缘。

不管这些 Logo 的布局特征是怎样的,它们都呈现了类似视觉特征。小圆点和托拽痕迹构成了它主要的「笔触」,它们而生动地拼出字母,绘制出路径,或者勾画出有意义的符号。我想你已经捕捉到了它们的特征了——活力四射,生动新鲜的笔触路径。

间断渐变

在logo设计中广泛使用渐变色,是整个行业在过去十年中经历的最两极分化的趋势之一。仍有很多设计师抵触过渡色,因为从LOGO设计的角度上来说,渐变色违背了很多规则,而这些规则是在数字时代之前就已经存在了。不过,LOGO 设计师们总能想出好办法,比如间隔渐变式的设计。

将均匀渐进的色彩变化用连续的纯色片段来替代,同样呈现出色彩的变化和韵律感,但是消解了渐变色在 LOGO 展示过程中潜在各种问题。上面案例中,Qwant 的 logo 就是通过轮廓化的颜色分割来实现这一点,它真实地模拟了渐变的效果,所呈现出的效果比CPA Ireland 要好,CPA Ireland 则使用了的四等分几何分割加上色阶转换。总体上来说,间隔渐变的色彩使用技巧,很好地在当下的流行趋势和 LOGO 设计诉求之间找到了平衡点,值得尝试。

轮廓线条

使用线条来勾勒和描摹事物,传达信息,是一项古老而传统的技艺。在时下的审美体系当中,使用轮廓线条来绘制 LOGO 似乎显得太过于老派,不够现代。不过技术总归是服务于表达的,依然有设计师能够充分的利用这一技术——加入透视,不再局限于二维,而是开始描绘三维的对象。

这一的设计看起来和如今的线性图标的绘制方式在技法上保持了延续性,但是它在维度呈现上更加深入,更加具有表现力和形式感。通过富有规律性的利落的线条,设计师不用太多的线条就能勾勒出立体而抓人眼球的LOGO。这种设计要求设计具备更强大更精准的描摹能力。你可以延续这种思路到整个设计当中,这会使得整个品牌化设计思路更加开阔、有趣。

句点元素

在 LOGO 设计当中,使用句点这样的标点符号,通常都会借用它身处标点符号中的含义和功能。当我仔细琢磨这一趋势时,发现这些类似句点的符号有时像句号,有时则偏向冒号,它们在LOGO中总带着一些奇特的意味。如你所见,这些原点在更多的时候,它更接近于句号,充当收尾和封顶的终止符。

有的时候,它的装饰性更强,以不同的形式漂浮在文本和符号周围。如果你要深究这些 LOGO 设计本身的含义会发现,这个小圆点可能是字母 i 上的那个小圆点简略之后的残留痕迹。这个小圆点,在如今的很多 LOGO 中已经超出了装饰性的范畴,基于不同的需求和设计出发点,它可能意味着时间,可能代表着字母,承载着特定的词汇和含义,可能是感叹号或者句号,表达情绪或者终止。设计师将内容抽象成几何图形,承载意义,提升了对话的智慧。

翅膀元素

在传递放飞、飞翔、展望、自由、远见、轻盈、速度等含义的时候,很多设计师都会借用翅膀的意象。这也是为什么越来越多的地方会看到被提炼和抽象出来的翅膀和羽毛的符号或者图形,某种意义上,翅膀已经远超出了它本身的意味。这些被设计得形制不一的翅膀类的图形,有着冥想的前倾或者后掠的姿态,仿佛在对抗变幻莫测的大风,借助空气动力学向上飞起。

很多翅膀元素形制类似于字母 U,只不过两只翅膀在倾斜角度、弧度和长短上,进行了比较深入的调整。之后,再对 Logo 进行弧度和细节进行修饰,这样就完成了。如同我们上面所在展示的几个案例,设计师经过很快的迭代就可以完成这样的设计。与此同时,在具体的设计过程中,设计师还会引用品牌中一些字母的特征,比如Jetta的字母J,DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了双翼的意象。苹果有翅膀,乌龟也可以有翅膀。我们可以用翅膀填补空白。

门窗元素

门其实我们常常会引申出「打开新世界大门」的概念,它在实际设计中会带有通道、时间、新世界,甚至一种全新心境和意境的概念。很多品牌 LOGO 都想借助这个意象来承载更高远的含义,微软就是一个典型。门和窗本身一直都是一组象征性极强的元素。门象征着通行的权利,解决方案的途径,机会,甚至欢迎的含义,某种意义上它们和眼睛在含义和隐喻上是共通的。这也是很多设计师在设计 LOGO 的时候青睐这一意象的原因所在。

关于2019年的LOGO趋势报告

2019年的LOGO趋势报告,是我们的第17份 LOGO趋势报告。每年的趋势报告都是从成千上万的 Logo 中,寻找新趋势和细微微妙的差别。我们承认,每一个设计案例都代表着来自世界各地的设计师们的思考和心血,我们对他们表示敬畏,并感谢他们不遗余力地帮助我们完成这份报告。感谢所有在过去、现在和未来几年为潮流报告做出贡献的设计师们。


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


2019年UI和UX设计趋势来了!

鹤鹤

在UI行业里面,设计趋势是更新非常快的,它能够更好的指导我们的设计方向,包括一些设计手法,都在不断地发生变化。作为一个UI设计师,需要更多的了解设计趋势。所以今天MICU哥将与大家分享2019年UI和UX设计趋势,希望给大家带来一些帮助。

为什么如今的APP UI设计如此的趋同?这也许是件好事!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里




现在,当你打开 Instagram、Airbnb、Apple Music、Twitter、Dropbox 这些应用的时候,乍一看很难区分清楚彼此的区别:带有圆润边缘、现代感极强的非衬线字体大标题,极简的黑白色调为主的界面,大量的留白,少量的提亮色甚至没有提亮色。

这种现代的界面设计风格,乍一看很简陋。而具有讽刺意味的地方在于,它们出自于最大的公司,是也是受众最广的产品,在视觉观感上,让人觉得几乎没有被设计过。

Instagram 的深蓝的页头怎么变了?Lyft 中经典的亮粉色元素怎么不见了?这些有着深厚底蕴的品牌是否已经放弃了标识性的设计?又或者是它们开始共享相同的模板了?

问题在于,这不止是 Instagram 和 Lyft 这样了,有迹象表明,Google 这样的大厂也有类似的倾向。比如Gmail 中标志性的红色大幅度减少,白色的背景,白色的交互按钮,白色的输入框,其他的Ui控件都很精准到位地保持了这种简约而一致的风格。

身在硅谷的大型企业,互相之间的借鉴学习是常有的事儿,但是至少保持了足够的差异化。但是现在的局面则不同,这种高度趋同的趋势,让整个事情看起来非常反直觉。

到底是怎么回事?

好吧,我们认为产品设计的一致性是好事情,这里有几个值得注意的原因。


让用户更加关注内容和结果

对于大量APP 的视觉和信息疲劳是谁都无法忽略的真实存在,绝大多数人已经厌倦了在太多应用之间来回切换,每一次下载新的应用都要花费大量的时间来重新了解界面的设计

调研表明,超过四分之一的应用,在首次下载之后,用户只用过一次就卸载了。绝大多数人日常使用的APP 其实是非常固定的,它们中绝大部分,核心在于帮助人们节省时间和金钱(或者兼而有之),让生活更轻松。

对,让生活更轻松。而这需要数字产品具备良好的一致性,而设计师也越来越多地将注意力投注在这一个点上。

正如同我们熟知的UX设计专家唐纳德·诺曼所说的:「很多用户界面所存在的真正的问题,在于它仅仅只是用户界面。很多用户界面的设计阻碍了功能。我想努力达成某个目标,而不是将精力耗费在界面上。」


更一致意味着更好的可用性

所有的电商网站基本上都遵循着类似的交互逻辑和视觉元素,你不会搞错购物车的图标,也不会错过任何环节。这些约定俗成的惯例,意味着用户不再需要重新学习在某个新的平台上购物,降低学习成本。

绝大多数约定俗成的规则和流程都被用户不自觉地印刻在大脑中,成为一种自然的习惯,而独特的设计,截然不同的规则,则常常会成为习惯以外的东西,引起混乱,让初次上手的用户感到受挫和沮丧。

以 Snapchat 为例,今年早些时候曾经发布过一个版本,其中包含有一些比较有争议的设计。这个版本当中,被重新修改过的导航和几乎随意堆砌的功能模块,让用户活跃度几乎立刻下降了73%,甚至直接导致了用户流失和股票下跌。

正如同 Snapchat 所证明的那样,新颖的设计是有风险的。一致的设计,确实有一定的机率降低用户在面对新兴事物时候的不安感。


设计不应止步于视觉

明白用户的需求和意图,在不断探索解决方案的过程中,才能真正创造出伟大的用户体验。相比于独特的外观,差异化的体验是更有价值的。

当然,样式和风格很重要,它们也确实会影响到体验,当人们感知到有视觉吸引力的设计的时候,即使有一些混乱和无效的设计,也是可以忍受的。

但是设计师的精力是有限的,用户的也是如此,相比于在色彩和花哨的动画上反复尝试,帮助用户找到更好完成任务的方式,无疑更有价值。设计好的产品,最终能够给用户带来价值的东西,是需要看似无限的测试和迭代,来向着可用和易用的产品更进一步。

奥巴马、乔布斯和扎克伯格每天穿着相同的衣服,他们的衣服和这种行为同样出名。心理学家将这种现象称之为「决策疲劳」,它们每天需要用有限的能量来做大量的决定,而为了给更重要的事情留下足够的精力,他们穿相对固定的衣服,就可以省心很多。

设计师面对的是同样的局面。随着界面设计的趋同化,设计师可以花费更少的时间来决定用什么色彩,而可以将更多的精力投注在更为深入的设计当中,比如更有效的布局,反思为什么要这样设计,等等。


趋同的设计是否会扼杀创造力

我想你一定在思考这种设计趋势之下的缺点,比如这样的设计是否会显得缺乏创新,甚至会扼杀创造力。老实说,我觉得这样的影响是存在的。

但是,即使每个产品设计师都参与到极简主义设计的运动当中来,仍然有大量的设计工作有待完成,设计的范畴太广泛了,需要设计的东西远超用户界面本身。

事实上,界面中的趋同化在近期看来是颇为有益的,对于长期的影响也是非常巨大的。

首先,最重要的一点,VR、AR 和人工智能的逐渐普及,用户和数字设备之间的互动可能会变得更加隐形,小屏幕同样在普及,手势操作将会成为最基本的交互语言,我们将会越来越多地参与到无屏幕的交互当中去。

即使我们在iPhone 上,人工智能加持下的 Siri 越来越好用,越来越多的用户开始习惯使用类似的语音助手来创建待办事项,选择音乐,发送消息,查看天气,简单的功能它们已经可以很好地完成了,复杂的功能和需求也会通过机器学习逐步习惯、越做越好。

在诸如人工智能、机器学习这样相对高深的概念背后,是软硬件正在更好地帮助人类完成任务,做对事情。设计师的角色需要更进一步,更深入地参与到产品当中。

如果设计师要改进 Siri 的设计,那么要做的工作远不止设计界面,已经有很多相关领域的专家讨论过这个问题了,设计师所需要了解、掌控的维度越来越多,设计正在变得更加深入和复杂。更通俗的讲,设计师需要考虑新的方式,更加富有创造力的策略来吸引用户的注意力,甚至要深入到情感和感知当中去,而不是单纯的视觉。

如果我们仅仅将优秀的设计局限于我们在屏幕上看到的内容,未来更多的可能性,可能就止步于此了。

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

【2018下半场】设计趋势之抽象设计,赶快上车

鹤鹤

在产品设计领域,或许有人认为已经到了成熟阶段,已没有太多空间进行创新。



选择极简主义风格做设计,不是没有道理

涛涛

关于极简主义

实际上极简主义这个词在人类活动的各个领域中都被地使用着,Merriam-Webster 词典种对于它的解释是“在音乐、文学和设计领域中以极其平衡简洁而著称的一种风格或技术”。极简主义正在被越来越多的领域所接纳,其核心的特征是简约而富有意义。

作为一种视觉设计的新方向,极简主义在20世纪60年代的纽约很受欢迎,当时的新老艺术家正在探索将抽象几何元素融入绘画和雕塑艺术。相应的,极简主义在当时的诸如包豪斯运动、建构主义运动中,留下了浓墨重彩的一笔。在涉及视觉艺术的不同领域,极简主义的核心原则基本都是优雅地保留关键性的、引起观者注意力的部分。线条、形状、色彩、留白、构图等一切元素都被有效地组织起来。今天我们在生活的各个领域都可以看得到极简主义的影子:建筑、艺术、摄影、文学、音乐、UI设计,甚至食物。

2017设计趋势&流行人设 , 你还看得懂吗?

用心设计

2017年3月一年一度的设计盛事《设计上海》在上海展览中心拉开帷幕,从各国自带品牌和文化属性的作品中,依然不难瞥见未来设计的前沿趋势和走向。其中由yang
design设计咨询公司发布的一年一度2017-2018设计趋势报告从材质,用色,以及人群角度提炼出了当代四大设计趋势。2017年3月一年一度的设计盛事《设计上海》在上海展览中心拉开帷幕,从各国自带品牌和文化属性的作品中,依然不难瞥见未来设计的前沿趋势和走向。其中由yang
design设计咨询公司发布的一年一度2017-2018设计趋势报告从材质,用色,以及人群角度提炼出了当代四大设计趋势。

2017设计趋势&流行人设 , 你还看得懂吗?

刚刚过去的6月,网页设计师们特别青睐这3种设计趋势

涛涛

如果要深究近期网页设计趋势的变化,这些变化更多是关于用户模式,色彩和排版设计的。但是不论是其中哪种,都牵涉到一些微妙的设计技巧和复杂的影响因素,将它们纳入6月的设计趋势,似乎略有不足。在过去一个月所出现的新网页设计作品当中,最显著的设计趋势还是体现在一些设计元素上,风格独特的底部导航,自由随性的Box元素,装饰性极强的竖线元素。

近期如果你在纠结怎么设计网页的话,这些设计趋势可以用来看看~

2017年流行的这些字体排版趋势,你都知道嘛?

涛涛

技术和设计趋势一样,随着时间的推移总在不停地变化。对于网页设计师和前端而言,字体和排版所涉及到的技术和设计尤其是如此。不过纵观这几年,网页字体和排版在大方向上并没有明显变化,结合当前主流产品和设计,并不难确定2017年内,我们需要关注的这些字体和排版趋势。

日历

链接

个人资料

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

存档