设计 | 值得一看的2020 UX设计趋势!

00 前言


2020年UX设计趋势!感谢关注我的小朋友~ 


01 Dark Mode  深色模式


Dark Mode (深色/暗黑模式)已经成为了一种新的设计趋势。AppStore强制要求第三方 APP适配这一模式。

Slack、WhatsApp、Chrome 等软件,都已宣布支持 Dark Mode,微信虽然与苹果僵持了一段时间,最终还是决定推出暗黑模式。在iOS系统中,开启 Dark Mode 后,深色配色方案将作用于整个 iOS 系统,包括 iOS 随附的应用,第三方 APP 被 AppStore 强制要求适配(或者系统自动识别实现更改)这一模式。


图:Chrome软件 暗黑模式


图:微信团队宣布即将上线暗黑模式


阿里巴巴APP案例


暗黑模式三大优点

夜晚避免强光刺激,符合数字健康理念:

Google 在去年提出了「Digital Wellbeing(数字健康)」的概念,注重在科技设备与用户之间,找到一个健康的平衡点。Dark mode是一个新的系统色泽,深色模式下,柔和暗光让眼睛避免强光刺激。这不是简单的颜色改变,从背景填充到文字图标,都基于大量的人因研究进行了对比度和色阶调试,只为带给用户更舒适沉浸的阅读体验。

OLED屏幕省电,减少功耗:

对于使用OLED的最新一代设备而言,可以帮助用户节省电池消耗,因为OLED在显示纯黑时,会彻底关闭发光体,这样一来,更少的光意味着更少的功耗。

图:华为手机暗黑模式

聚焦于内容,提供更好的沉浸感:

如果你细心观察,你会发现许多专业级的多媒体内容生产软件,一直以来都是黑色的界面。深色背景具有良好的沉浸感,并与其它的高饱和度亮色相互作用,带来更高的识别效率,有利于我们沉浸于生产内容/消费内容本身。同时很好地体现产品的科技感和时尚感。



2.Illustrations in UI 界面插图


近年来,越来越多的手机应用程序背景设计使用了插画。插图有助于保持用户的注意力,是一种很好的视觉符号,帮助用户理解产品背后的故事,配上一些好的创意概念,以更有趣的方式讲述品牌、公司或产品的故事,使得信息传达的更快。

案例一:

设计师:JAM    应用类别:小说阅读,美术或绘画应用

这位设计师的灵感来自世界各地的著名画作。它们以非常幽默的方式进行了重新设计。


案例二:Smart Home App — IOS by Maria Osadcha


3.Animated graphics &Micro-interactions 动态插图与微交互(混合媒体)


拍摄的视频,生动的插图,用户与媒介的交互操作,把这些结合在一起会产生意想不到的惊喜。微交互使用户了解产品的工作原理,并引导其获得更好的体验。使用动效后,能抓住用户的注意力使其能够更加沉浸在产品中。

插图非常能抓人眼球,尤其是在融入动效后会显得更加的自然,将产品带入生活的气息,使得产品功能更加突出,同时也增添了更多的细节和个性。

案例一:UI/UX | Smart Pharmacy app by Anastasia M, Sergey Nikonenko UX


案例二:Welcome to Swiggy by Saptarshi Prakash


案例三:谷歌动态形象设计



4.Gradients 渐变


设计中的渐变趋势在2020年将继续保持强劲,因此值得一提。新鲜大胆的色彩是成功使用渐变的完美选择。它们可以用于按钮、图标、插图、排版。

案例:Arabic World App Background

设计师:Andrei Honcharuk  应用类别:旅游类应用

案例二:NIKE


5.Bold colors 大胆用色


明亮鲜艳的配色往往在视觉上非常具有吸引力,强烈大胆的色彩已成为重要的趋势。这些颜色大胆、色彩丰富、明亮,甚至极富活力,使用它们作为主要或次要颜色。近两年,我们看到越来越多的品牌开始使用超高饱和度的色彩作为品牌色。

举例一:支付宝的品牌色,新版比旧版更明快

高饱和度的蓝色能让品牌更有科技感也更专业,无论是线上还是线下传播都能轻易吸引眼球。


视觉层次是创造导航和交互的核心元素。色彩是有层次的,但是这种层次是怎么样被理解,则和用户的思维有关系。明亮的色彩更容易被注意到,所以设计师会使用它们来表现需要突出显示的元素,将色彩运用到不同元素上,产生重要性或者功能上的关联。UI 组件需要以层次分明的方式组织起来,用户的大脑才能通过层次所营造的差异区分对象,明白优先级。

举例二:点餐的价格和操作按钮这两个重要信息,以高饱和度的明黄显示

举例三:大胆使用高饱和度的色彩,活力和炫才是重点



6.Functionality 功能设计


UI设计中一个重要的部分即是功能设计,设计将更专注如何引起用户对APP/Web的注意,而功能设计将使体验变得更轻松,让用户可以更快地找到信息,以实现设计和功能之间的平衡、融合、相互补充。

案例一:Skilling Trading (skilling.com) — Loredana Papp-Dinea , Mihai Baldea

案例二:支付宝APP


7.Storytelling 故事性设计


故事在整个用户体验中扮演着非常重要的角色。一个完整的故事包含几个关键点:人物、人物的需求(目标)、场景、人在场景中的行为(人和物及环境发生了哪些互动关系)、人的体验、最终的结果。一个好的设计不仅仅是信息罗列和元素堆砌,还需要提供有用的内容为用户提供一个完整的用户体验。

讲故事就是利用创意的形式把信息传递给用户。这可以通过强大的视觉元素来呈现(字体、插画、高清图片、颜色、动画、交互元素)。故事性设计更多运用于网页设计中,较大的页面宽幅更有助于讲述网页独有的故事,为用户提供个性化的体验。

讲故事可以帮助产品创造出品牌和用户之间积极的情感连接,创造出记忆点,让用户感受到自己就是产品或服务的一部分,他们便会更加愿意使用你的产品。

讲故事也是一种非常有效的营销手段,极大地提高你的产品/服务的销量。一个好的故事(尤其是一个准确把握受众需求,巧妙结合企业产品特色,并能够轻松引起用户共鸣的故事),更能赋予网页思想和灵魂,让用户不由自主停留,逐步深入,最终完成购买。

http://www.thebestreason.gr/en/


图为知名希腊葡萄酒品牌(Domaine Glinavos)在线网页,用户轻松点击,即可逐步了解必选该酒类品牌的8个理由。


8.Video in UI 视频内容


2020年信息传递给用户必须快速,通过视频内容将会更好地完成这个目标。不管是选择通过动画、经典影片、广告片来解释产品,视频内容对于任何APP/Web都是必不可少的。

案例一:苹果官网(https://www.apple.com.cn/pro-display-xdr/)

案例二:Mountain Bike Tracker App Video Background

设计师:Kirill Shapoval  App类:旅游类App

山地自行车追踪App利用骑行视频来吸引用户。而不是冗长的宣传介绍,视频背景用简单、简短的文字更有效地激发用户的兴趣。


9.Attention to details 专注细节


在UI设计中,从按钮、图标、加载、导航到细微的细节,都影响着设计水平。随着新技术的出现,在UI中必须注意细节持续变化,即使非常小和细节处的设计都可能会带来巨大的冲击力,并让产品体验上升一个台阶。

案例一:Tab bar active animation — Aaron Iker

案例二:线框图


参考文献:

【1】2020 UX设计趋势:https://mp.weixin.qq.com/s/zf5GWiYwFv6iMuW31-Mt8g

【2】Behance发布2020设计趋势报告:http://www.shejijingsai.com/2019/12/330755.html

【3】支付宝“蓝上加蓝”背后,你必须知道的logo色彩常识:https://www.digitaling.com/articles/269912.html

【4】时下流行的鲜艳配色方案,缺点和优点一样明显:https://www.uisdc.com/bright-colors-in-ui-design

【5】2020年最佳App背景设计范例:https://mp.weixin.qq.com/s/hYz46otaG1mqAiMtclVG8Q

【6】Behance 年度好文!2020年设计趋势全方位分析:https://new.qq.com/omn/20191030/20191030A0CYR500

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

  • 情况说明:在很多情况下(如使用迅雷批量下载文献),可以将网址批量粘贴到粘贴板上,然后逐条打开。 欢迎多多交流Ema...
    快乐的夏天_eaf9阅读 176评论 0 0
  • Headers HTTP协议的Header总共分为三种,分别是General Headers、Entity Hea...
    Allenware阅读 653评论 0 1
  • 昨天,无意中看到一部穿越罗布泊无人区的短片,讲述了整个穿越过程,特意还去了几个地方。片头部分特意描述了下罗布泊无人...
    来过吧阅读 545评论 0 0
  • 这两天在广州参加腾讯的“理性公益 科技向善”互联网公益峰会,听了大咖的主题分享,看了分论坛各行各业的公益创意...
    徐竹君阅读 296评论 0 2