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

2017年,UI设计风格的五点预测

Catherine • 2017-05-01 21:27 • 交互设计

设计工作几年后,你有没有接到设计需求时不满足于之前的处理手法,想要突破自己,不想麻木的做设计?不希望自己在习以为常的设计中走向平庸,成为一个废柴……最近对国内外各种资讯文章的阅读和最新优秀产品的体验,梳理下今年的UI设计的趋势,希望在接下来的设计工作中,理性的前提下又不失创新。

文章目录[隐藏]

  •  1. 半扁平化的设计
  • 2. 更多三维呈现
  • 3. 几何图形的点缀
  • 4. 渐变色的运用
  • 5. 大标题,大间距的处理
  • 总结

设计工作几年后,你有没有接到设计需求时不满足于之前的处理手法,想要突破自己,不想麻木的做设计?不希望自己在习以为常的设计中走向平庸,成为一个废柴……最近对国内外各种资讯文章的阅读和最新优秀产品的体验,梳理下今年的UI设计的趋势,希望在接下来的设计工作中,理性的前提下又不失创新。

2017年,UI设计风格的五点预测

 1. 半扁平化的设计

在过去的两年左右,扁平化无疑是讨论最多、最火的设计趋势。但设计趋势往往受到媒体,技术,和实用性的影响,一般都以缓慢渐进的方式渗透在我们的设计中,周期在1-2年之间。目前已经有很多设计师对它进行细微改进,形成了一个新的设计趋势-半扁平设计。

半扁平化设计说直白点,其实就是结合了material design和flat design两种风格的处理手法。使简洁的设计上多一些空间感,包括悬浮的按钮和卡片的设计。按照Wired的话来说,那就是让像素具备海拔高度,这样子的话,系统的不同层面的元素,都是有原则、可预测的,不让用户感到无所适从。

下面是一些国外的设计案例。

2017年,UI设计风格的五点预测

从细节上来看,顶部的导航条是通过淡淡的投影来与背景区分,而不是是常见于ios设计中的1px的灰色的线条。包括更有空间感的卡片的处理,在保证细节的时候,又不会由于增加了投影给用户带来视觉干扰,反而页面更有层次感。

可能有的设计师会说,这些都是国外的效果图!而且英文的很容易做出高大上的效果啊!要我我也可以!但是自己做的产品或者说国内的设计不太好做出这样的啊ba la ba la~

兄弟!不要为自己的懒惰找借口了,例子来了! hiahiahia。  下面是最近常用的一些国内app,半扁平化的设计已经在他们产品上有了体现。(以下APP分别是:字里行间,微信阅读,轻芒杂志,滴滴出行,微信阅读)

2017年,UI设计风格的五点预测

2017年,UI设计风格的五点预测

2. 更多三维呈现

在以前,UI或运营设计中常见的都是二维的处理手法。元素以平面的方式展示给我们,但是今年会慢慢趋于更多3D的效果,使内容更加有纵深感从而也提升了设计的趣味性,尤其是运用在运营设计上会让画面显得更加丰富。

2017年,UI设计风格的五点预测

2017年,UI设计风格的五点预测

360做的抢票软件的的视觉设计给我印象很深,采用的是粘土塑形的方式塑造的立体形象。我认为这种对设计的创新手法,很值得设计师们学习的。做设计真的不仅仅局限于每天对着屏幕挪动着鼠标,反而对生活的热情和动手的能力会让自己的设计脱颖而出。

2017年,UI设计风格的五点预测

3. 几何图形的点缀

从2016年年底就有一些设计作品或者设计包装采用不同颜色的几何图形进行点缀。它不是作为设计内容的主角,而是起到渲染画面氛围的作用。用色一般鲜亮大胆,会给人视觉上的冲击,多用于运营设计。

2017年,UI设计风格的五点预测

2017年,UI设计风格的五点预测

下面是国内产品运营设计实用几何形的案例(所以我都找了国内的案例,专治各种找借口说只能用英文才好出效果):

2017年,UI设计风格的五点预测

2017年,UI设计风格的五点预测

4. 渐变色的运用

渐变色的运用范围很广,它可以当作背景使用,也可以在logo或者按钮上使用。今年的渐变不再是像拟物化时代为了还原物体本身的空间所做的处理。这里的渐变多为大撞色的使用,为了营造氛围和产品气质使用。

2017年,UI设计风格的五点预测

2017年,UI设计风格的五点预测

渐变色的处理在logo或者按钮上的运用:

2017年,UI设计风格的五点预测

5. 大标题,大间距的处理

预测今年将会有越来越多优秀的产品跳脱出系统本身规范的束缚,开始更大胆的设计。不在局限于本身规范里最大字号不能超过多少px,间距最好在稍稍px之内等等…而是针对不同场景,不同用户群体,不同的内容去特殊处理。

所以出现了目前更多大标题大间距大量留白的设计作品。其实像这种处理手法有点类似几年前微软的Metro Design,只是现在很多优秀设计师都能把不同的设计语言灵活的去运用,而不仅限于某个系统平台。

下面是国内一些APP设计实例(依次是:轻芒杂志,airbnb,ofo,VUE,字里行间):

2017年,UI设计风格的五点预测

2017年,UI设计风格的五点预测

总结

我们需要了解趋势,预判未来,接受创新。但并不需要盲目追随趋势。不能为了设计而设计。在形式服从内容的今天,只能说哪种设计风格更适合自己的产品。

设计趋势只是设计工作中小小的一部分,更重要的是我们如何做到把握好自己产品需求的情况下把这种优秀的设计语言巧妙的加进去,做到符合产品定位,节约开发成本和提升商业价值的效果,从而给产品带来更多的利益。

 

作者:大牙,百度用户体验部高级UI设计师。微信公众号:大牙的设计笔记。

本文由 @大牙 原创发布于人人都是产品经理。未经许可,禁止转载。

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

APP设计ioslogoUIUI设计产品产品经理场景微信用户用户体验视觉视觉设计设计设计师设计案例设计风格转载运营
赞 (0)
CatherineCatherine
0
生成海报
以开发的视角做设计:开发眼中的设计稿长什么样?
上一篇 2017-05-01 20:26
成也排版败也排版:一个选择的过程
下一篇 2017-05-01 22:23

相关推荐

  • 微信热点

    Axure 从入门到够用

    第180篇Glen几个月前决定总结分享一个Axure教程系列,结果现在才腾出时间来梳理。Axure是最常见的产品原型工具了,看完这篇文章,你就基本具备了日常工作需要的产品原型能力了。Axure入门到够用教程1. 尺寸规范1.1 网页端产品尺寸优秀的产品原型是需要做到像素级高保真的,这样便于之后设计师输出设计图,毕竟眼见为实嘛。现在互联网主流屏幕分辨率有1920 * 1080、1366 * 768、1440 * 900。你在画网页产品原型...

    2018-03-06
  • 怎么策划一个成功的活动——线上篇

    怎么策划一个牛逼哄哄的线上活动?大家都说网络营销火爆,都在搞线上活动,那么,一份完整的线上策划案,应该怎么准备呢?知乎用户柒石二为我们提供了一份可行的回答。 始。 先问度娘: “线上活动是指依托于网络的…

    交互设计 2014-12-13
  • 原创译文 | 面向对象的用户体验设计 交互设计

    原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 微信热点

    信息港招聘3000多岗位......

    萧山之窗移动生活由此开始....关注2018萧山信息港小镇春季人才招聘200余家企业,3000多个信息经济岗位!3月31日信息港小镇将会举办一场盛大的春季人才招聘会。招聘会时间:2018年3月31日(周六)9:00—16:00招聘会地点:萧山经济技术开发区启迪路198号 信息港小镇B-C连廊除了微医集团、科大讯飞、华网信息、一知智科、网盛数新、华澜微、云集微店、湾区孵化器.....这些信息港小镇内的王牌企业,还有萧山经济技术开发区的部分...

    2018-03-26
  • 杭州-UI设计师招聘需求

    点击上方蓝字一起关注这个公众号吧!什么是用户体验用户体验是一种纯主观的在用户使用一个产品(服务)的过程中建立起来的心理感受。把最终用户作为设计和开发活动的焦点,而不是系统、应用程序或者单纯的审美价值。它是基于一般的以用户为中心(用户至上)的设计理念。最简单的用户体验(User Experience,简称UE),最直接影响你的网页浏览度的因素。在网站策划和网站运营当中,用户体验是最重要的一个因素,直接影响到你的网站是否成功。网站用户体验(...

    交互专题 2018-03-13
  • 交互设计

    友盟、缔元信.网络数据、CNZZ合并,新公司叫友盟+

    公告书 亲爱的用户: 年关将至,值此辞旧迎新的日子, 友盟、缔元信.网络数据、CNZZ联合发出公告:三家公司已于2016年1月26日宣布合并,联手打造新公司,更名为“友盟+”,共同开启“全域数据”时代。新公司任命阿里巴巴…

    2016-01-27
  • CHI2017 交互设计在较热门的研究领域如何继续创新? 交互设计

    CHI2017 交互设计在较热门的研究领域如何继续创新?

    什么是CHI? 今天跟大家分享一个学术会议SIG CHI,全称Special Interest Group on Computer-Human Interaction,顾名思义,这是研究人与计算机互动的一个学术会议。但希望大家别被「学术」两个字吓到,因为这个会议…

    2017-05-31
  • 对话界面的现在与未来 IxD案例

    对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • 微信热点

    智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • 微信热点

    福睿斯幸福号春运列车的背后:营销回归用户体验

    爆竹声中辞旧岁,品牌送暖入屠苏。一年一度的春节,不仅是万家团圆的时刻,也是品牌们“秀肌肉”,送暖消费者的黄金期。每到这时,煽情、怀旧、调侃、明星、红包、互动……各大品牌总会使出浑身解数以俘获消费者“芳心”。而今年最暖的,莫过于福睿斯推出的“幸福号春运列车”。今年春节期间,长安福特福睿斯联手凤凰网、12306客户端、高铁杂志《旅伴》等平台,在1月30日至3月31日期间联手为春节回家的朋友打造往返于成都—上海的“福睿斯幸福号”专属列车(D3...

    2018-03-29
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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