IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

2017年视觉设计的六大趋势

Catherine • 2017-05-09 11:02 • 交互设计

我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

文章目录[隐藏]

  • 2017年视觉设计趋势
    • 1. 多色轮润感渐变(COLOR NEPHRITE GRADIENT)
    • 2. 半透明叠加(OVERLAPPING TRANSLUCENCE)
    • 3. 切面排列透视(MULTI-SECTIONAL PERSPECTIVE)
    • 4. 错层阴影(DISLOCATED SHADOW)
    • 5. 自然律动图形(NATURAL RHYTHM GRAPHIC)
    • 6. 欧普重构(OP ART REFACTORING)

我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

2017年视觉设计的六大趋势

大家好,去年HJUED团队完成了16年设计趋势报告,在一年的实践过程中验证了数个关键词确实如我们所预测有了较大范围的应用。在上个月中旬整个沪江用户体验设计团队开始了新一年的交互和视觉设计趋势研究,从大量的高质量素材采集到合并提炼,几乎所有成员都参与到了这个研究过程之中。

有了去年的经验,今年在各个环节上都有所提升改进。我们对素材收集的时间范围要求更高,比去年更加关注每一种纬度的特点,更有意识的去揣摩每一个关键字的定义以及其应用范围,细心研究每一种现有趋势名词的变化。

2017年视觉设计趋势

在今年的趋势分析流程中,我们分为“温故”和“知新”两个部分。“温故”部分对去年总结出的关键词进行跟踪梳理,总结得以印证的部分,探索新的变化趋势。“知新”部分,从字体、材质、形状、版式、动效五大维度进行分析,研究过程包括:素材收集、小组讨论、汇总提炼三个环节。从互联网、平面媒体、时尚等相关领域收集的最新素材中,通过分析提炼,确定各维度的流行趋势,再综合四个维度,合并去重,最终推导出2017年视觉设计流行趋势的风格关键词。

每个关键词包含概念简述和运用案例两部分。从中,我们可以看出在不同的设计领域存在着相当多的通用性,也对如何运用在沪江的产品中也有着很大的指导价值。

1. 多色轮润感渐变(COLOR NEPHRITE GRADIENT)

(1)概念简述

渐变的运用,在视觉设计中增加了更多细节化元素,并使画面充满变化。从2016年开始,渐变逐渐突破同色系,向多色系发展,打破保守的两色渐变规则。同时,跨越色轮的多种同级饱和度颜色结合有机圆润的形状,呈现出润泽透光的质感,体现出温婉的气质,柔和丰富而不艳俗。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

(2)运用案例

越来越多的界面中开始引入多色轮的渐变,丰富柔和的颜色叫醒用户的视觉神经,通透温润的质感体现更友好的亲和力,使界面更加有温度,更贴近用户。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

2. 半透明叠加(OVERLAPPING TRANSLUCENCE)

(1)概念简述

光,在视觉设计中显得越来越重要。光的运用能够使画面更加通透,彩色半透明元素的叠加使用,可以营造透光的彩色玻璃质感。在近期的视觉设计中,设计师们开始用这种方式对图形表现光感,体现图形关系的同时,又减少了厚重感,使画面更显明亮生动。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

(2)运用案例

半透明叠加的表现方式开始有了些许萌芽,较多运用在表现科技感的界面中,在logo的设计中,通过调节色彩明度和饱和度来体现不同产品的属性。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

3. 切面排列透视(MULTI-SECTIONAL PERSPECTIVE)

(1)概念简述

近年来视觉设计师开始不满足于平面的展现方式,向立体空间发起挑战。从热门的科幻作品中不难发现,“时空扭曲”、“重叠”等关键词一直被人们青睐。在设计中使用相同的元素重叠排列,延长、淡化、到最终消弭,在平面视觉上营造立体空间感,打造更强的层次感和表现力。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

(2)运用案例

切面排列所营造出的立体透视效果,由于强大的视觉张力,常被运用在独立页面或者海报当中。在界面中使用,可以增强画面的纵深感,如卡片叠加的空间感等。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

4. 错层阴影(DISLOCATED SHADOW)

(1)概念简述

空间感在视觉设计中显得越来越重要,通过文字的前后排列,紧缩元素间距形成层叠效果,增加更重的阴影效果,突显元素的前后空间关系,营造虚实有序的纵深感。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

(2)运用案例

错层阴影的效果,通常被使用在标题、头图等需要强大视觉表现力的文字中。丰富文字细节,体现虚实错层关系,突出主题和画面张力。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

5. 自然律动图形(NATURAL RHYTHM GRAPHIC)

(1)概念简述

设计源于自然,自然中的有机曲线赋予画面柔和、发散的特点。近来越来越多的几何元素被运用在视觉表现中。多种图形的聚集、扩散,更容易引导视觉焦点。在形式上是“流动,跳跃”的视觉效果,在内涵上则表现出一种“韵律”。多种元素组合做成背景装饰,并结合明亮的色彩,使整个设计变得活泼动感起来。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

(2)运用案例

自然律动的几何元素被大量运用在海报、KV、运营页面中,丰富的元素与主题结合,更突显主题。在界面中常被用于背景氛围烘托,使整个画面轻松活泼。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

6. 欧普重构(OP ART REFACTORING)

(1)概念简述

欧普艺术起源于1960年代法国,这是一种精心计算的视觉艺术,使用明亮对比的色彩,造成刺眼的颤动效果。将欧普艺术的元素弱化,混搭多种元素,打破传统的图形限制,利用视觉变化造成幻境效果,营造活泼跳跃的画面氛围。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

(2)运用案例

在近期的大型活动的营销类网页和banner中,欧普重构混搭的元素随处可见。由静态图形营造视觉上的动态效果和迷幻的空间感,利用炫目的空间错觉牢牢吸引住用户的视线。

2017年视觉设计的六大趋势

2017年视觉设计的六大趋势

 

作者:沪江UED设计团队

来源:微信公众号【沪江UED】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24684/

logoPSUEDUIUX交互产品产品经理体验设计动效字体年度趋势微信用户用户体验用户体验设计素材经验视觉视觉设计设计设计师运营
赞 (0)
CatherineCatherine
0
生成海报
三种方法,使用鲜艳的配色来制作WEB/APP界面
上一篇 2017-05-09 10:04
微软设计师分享|七个技巧,帮你提高产品的用户体验
下一篇 2017-05-09 12:12

相关推荐

  • 为什么你越来越爱用那些看起来丑而贱的表情? 交互设计

    为什么你越来越爱用那些看起来丑而贱的表情?

    好奇心研究所的微博(@好奇心研究所)和微信公众号(ID:QLab42)全面上线啦,微信直接搜索「好奇心研究所」就可以订阅,关注与所长亲密接触,赶紧的。

    2017-06-02
  • 用户体验设计专题——前言

    元宵佳节一过,春节假期正式步入尾声,相信大家的工作也已步入正轨。为了感谢大家对我们这个略显晦涩却干货满满的公众号的支持,经过系统梳理,我们归纳总结了9个用户产品设计的基本原理,结合从数千个小流量评估实验中筛选的经典案例予以阐述,在未来两个月的时间里,会逐步分享给大家!废话少叙,步入正题!笼统地说,用户体验(User Experience,简称UX或者UE),是指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。这里我们会关注两个重...

    微信热点 2018-03-02
  • 阿里设计专家深度解读:全链路设计师和设计增值再现

    分享嘉宾:汪方进(1688UED设计总监) 点评嘉宾:高峰(阿里巴巴国际UED B2B总监)、周敏青(阿里巴巴国际UED AliExpress总监)   前些日子的美国大选,特朗普胜出了,这个结果让很多小伙伴惊呆了!他竞选口号是:M…

    交互专题 2017-09-11
  • 交互设计

    如何从细节上真正节省用户的时间,从而带给用户更好的体验

    来源:优设网 作者:阿布编译 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,什么是…

    2014-09-21
  • 一个应届的交互设计毕业生应该具备哪些能力?

    作者:马力 @ 可能性与大设计   ( 上图来自Elizabeth Bacon ) 首先说,很多专业的同学都可以做交互设计(还有视觉设计,产品设计等等),既包括设计相关专业,如工业设计、建筑设计、园林设计等,也包括完全和设…

    交互专题 2017-08-07
  • 交互设计

    如何让头脑风暴更有效率

    头脑风暴法是广泛用于团队的一个产生想法和解决问题的方法。然而,许多头脑风暴活动是有不完美的,最终并不能帮助激发思想上的创新。众所周知,传统的头脑风暴,团体在一起,把想法一个接一个的表达出来,通常这是…

    2014-11-10
  • Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。 交互设计

    Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。

      摘要:Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。通过它,设备可以感知用户点击力度,再根据力度的不同调出相应的不同功能,让用户和设备能够进行更好的…

    2015-03-18
  • 微信热点

    VR/AR开发程序中直接搜索Sketchfab的3D素材 / Vive Pro 如何买更省钱?/ Vulkan拥有直接内存分配器

    从今天起试试这个新形式,把重点的资讯提炼后合并成一条,欲知详情就摁紧二维码跳转阅读啦。我们依然尽量让这些从外媒翻译过来的信息以最合适的中文翻译方法论润饰和(或)修改后放在这里。有什么好想法新想法告诉我们!【Sketchfab推出新API,3D内容“搜索引擎”可植入VR/AR应用中】Sketchfab今天推出了最新的 Download API(下载API),允许应用开发者直接把Sketchfab内容导入他们的3D、VR和AR软件,这样就无...

    2018-03-21
  • 微信热点

    【干货】学交互设计,毕业以后该做些什么呢

    大家对于交互设计有没有基本的认识,上一次的文章中给大家有过简单的介绍。平时和朋友同学之间再聊到交互设计,会觉得,交互设计都是app网站,但是随着科技的发展交互设计行业涉及很多方面,也有很多新的变化。所以在2018年之后,交互设计会有新的一些行业趋势。全感官体验因为未来找设计会越来越脱离我们所认知的app界面,会从app界面转移到其他的媒介上面去和其他设备上去做交互。全感官体验,因为平时我们都是从视觉上面去或者其他界面上做一个新的交互设计...

    2018-04-25
  • IAMUE经验分享-APP关于登录 与 注册引起的思考 交互设计

    IAMUE经验分享-APP关于登录 与 注册引起的思考

    1. 何时会触发登录与注册 A. 第一次打开,启动页滑动结束就触发登录与注册 页面没有返回button 根据产品阶段,或强调注册或强调登录 点击注册button,注册页面从右向左进入,左上角是返回icon 如IN 脉脉 注册时的,…

    2015-09-22
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress