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

2016年网页设计领域11个流行趋势预测

Catherine • 2017-05-29 17:26 • 交互设计

来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势 ,而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势 会在2016年逐一涌现,但是总体上来说,它依然会沿着2015的大趋势来逐步演变。可以预见到的是,2016年会有更多的网站使用视频背景,更多基于Material Design 风格的界面设计,幻灯片式的界面切换也会继续火热下去。

文章目录[隐藏]

  • 垂直滚动
  • 更多的卡片式界面
  • 视频背景/视频页头
  • 小动效
  • 专注于交互
  • 更漂亮的字体排版
  • 插画和涂鸦
  • 大胆明亮的色彩
  • 更多的汉堡图标和标识
  • 现实和想象之间的边界逐步模糊
  • 幻灯片式网页设计

来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势,而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势会在2016年逐一涌现,但是总体上来说,它依然会沿着2015的大趋势来逐步演变。可以预见到的是,2016年会有更多的网站使用视频背景,更多基于Material Design 风格的界面设计,幻灯片式的界面切换也会继续火热下去。

Designmodo 对2016年预测的设计趋势有11种,其中许多确实和Medium “所见略同”。两相印证,应该能让你看的更明白。

垂直滚动

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

随着移动端流量一而再再而三的爆发,网页设计开始越来越明显地向着移动端倾斜,更加直接的垂直滚动式的页面成为了大势所趋。

几年前,垂直滚动式的页面一度流行过,当时许多人对于这种“过于简单”的页面设计手法并不看好,可是移动端扁平化风潮之后,移动端正是上位,垂直滚 动页面设计卷土重来,杀出了一片天地。移动端上,页面滚动对于用户而言是一种直觉式的交互,这样一来,垂直滚动式的页面就显得更加自然直接了。

更多的卡片式界面

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

卡片式界面设计是 Material Design 启发下逐步流行开的设计手法,它最早出现于APP设计,随后在网页设计中 开始流行,甚至影响到许多平面设计作品。卡片式界面是一种有趣又有用的创举,因为卡片的存在可以更好地组织信息,还能让用户更清晰地交互。卡片式设计暗合 了模块化设计的思想,从结构到视觉上均是如此,这也使得它轻松地成为了跨设备交互的一种载体,堆叠、移动、传输均可以有逻辑、清晰地完成。

视频背景/视频页头

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

视频背景的设计趋势一直在升温。让网页浏览拥有观看电影一样的用户体验,这是设计师一直期待的事情,但是由于数字设备的性能短板,在很长的一段时间 里面,设计师没法实现自己的构想。但是现在不一样了,手机和电脑的处理能力已经相当不错了,短视频背景也可以在手机电脑上流畅地播放。另外,智能电视的普 及,使得视频的运用有了更大的空间,和更多的可能性。

小动效

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

和视频背景一样,动效也是目前的热门趋势。视频背景吃对带宽的要求更高,而小动效则是名副其实的吃性能,还好对于目前的数码设备而言并不会有太大的 压力。小动效可以在网页的各个角落出现,将用户的注意力有意识地吸引到特定的地方,让用户流连,产生足够的惊喜,带来愉悦的体验。

当然,动效设计中最重要的因素,是动效设计的目的:为什么要设计这么一个动效,它真正的目的到底何在?

专注于交互

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

同小动效关联最紧密的应该是交互。让应用和界面同用户真正产生关联的是交互,它是沟通的桥梁。真正优秀的交互是润物细无声的,它可以不明显,可以很 微妙,但是一定要自然,并且为用户产生效用。从最简单的提醒,到复杂而漂亮的弹出框,从显而易见的操控界面,到微妙的回弹微交互,交互设计界定了人和机器 之间的逻辑关系,将界面、动效、内容、操作串联到一起。现在设计师们更加注重统一的交互设计,也着迷于如何将微交互和动效充分地结合到一起,相信在新的一 年里,这也是大家所关注的重点。

更漂亮的字体排版

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

简约直观的界面已经微漂亮的字体排版留足了空间。尺寸巨大,风格化的字体标题和LOGO依然占据着欧美网页设计的主流,国内也有更多的设计师开始选择这样的设计。漂亮的字体排版设计不仅会更加视觉化,而且可以为其他的元素留下更多的发挥空间。字体排版设计有一个问题特别值得注意,字体排版要兼顾设计的趣味性和内容的可读性,优秀的设计不仅设计思路优秀,而且特别注重字体的搭配。

插画和涂鸦

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

插画和涂鸦往往能让网页显得妙趣横生,将奇思妙想注入其中。插画的类型很多,风格多样,大到整页的背景,小到页角的图标,都可以是插画。插画和涂鸦 最美妙之处在于,它会赋予网页以性格,让它更加个性化。也正是这种个性化,往往能同用户产生共鸣,而这也是它走向流行的重要基础。

大胆明亮的色彩

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

复古一直都在流行。而复古色的流行,很明显是近几年回潮的几种流行元素之一。Material Design和扁平化的流行,给予了80年代风的大胆、明亮的色彩以全新的舞台。在过去的2015年当中,单色的网站设计中,这些明亮的色彩已经得到了验 证,用户并没有抵触。而在2016年里面,这些色彩可能会重现80年代的氛围。

更多的汉堡图标和标识

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

图标从来都是重头戏,炫技用图标,做网页设计、UI设计、平面设计也都需要各式各样的图标来做支撑。越来越多的UIKit 开始加入图标,而图标合集也开始将各大图标设计项目整合进来,打包下载,甚至制作成独立的图标工具。得益于SVG的格式优势,许多超大图标也可以以更小的 体积运用到网页和UI中。

现实和想象之间的边界逐步模糊

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

网站一定要设计成现实的,或者全是动画的么?在网页设计这个事情上,现实和想象之间的边界会越来越模糊,现实的素材和想象的元素会在一个界面中糅 合,以一种更富有张力的方式呈现出来。其实这种现实和虚拟的内容整合式的呈现,会赋予网页更加个性化的浏览体验,对于设计师而言,这种手法的设计空间更 大。

幻灯片式网页设计

2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测 2016年网页设计领域11个流行趋势预测

网站的轮播图并不是什么新鲜的东西,但是如果将它扩展到整个屏幕,就会形成类似幻灯片一样的页面。每个占据整个屏幕的幻灯片可以承载不同的内容,不 一样的设计,可以制作成滚动式的页面,也可以加入延时动效。用户可以左右滑动切换幻灯片,这是一种接近物理现实的交互体验。和许多设计趋势一样,这样的网 页设计更加简约、直觉。

 

原文地址:designmodo

译文来自:优设

译者:@陈子木

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

APP设计logoMaterial designUIUI设计WEB交互交互设计产品经理动效动效设计动画图标图标设计字体微交互沟通用户用户体验界面设计移动端素材网站设计网页设计视觉设计设计师设计趋势译文
赞 (0)
CatherineCatherine
0
生成海报
浅聊四个主流的页面间跳转动效
上一篇 2017-05-29 16:24
浅谈APP交互设计师是一个什么样的职位
下一篇 2017-05-29

相关推荐

  • Android电视应用:Amazon Fire TV版TVPlayer设计 IxD案例

    Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 交互设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重…

    交互设计 2015-08-31
  • 微信热点

    交互设计,应该从哪学起?

    交互设计行业感觉很火嘛,我也很有兴趣,甚至想转型做交互设计,需要具备什么条件吗?什么职业都可以转型做交互设计吗?网络上很多培训内容都太宽泛,我到底该学什么呢?想职业转型,想拿到高薪,想提升生活品质,如果只是停留在“想”,永远都不会获得成功。不如从今天、从此刻开始,开启你的交互设计之路,从职业规划到求职面试,本课程带你走上职场进阶的坦途。课程139课时,超过1500分钟,800MB课程资料,全面讲解交互设计知识!商业实战案例,1年私人顾问...

    2018-01-30
  • Axure RP 案例教程-入门篇

    本教程通过案例引导交互设计新手进行入门级学习,图文结合,简单易懂,全部免费下载,需要的亲们赶紧下载并动手练习吧,废话不多说,上干货:下载链接看过来~~~:AXURE_RP案例教程-入门篇下载下期教程,敬请期待...…

    交互设计 2014-11-06
  • 移动端用户体验:底部导航 交互设计

    移动端用户体验:底部导航

    把最重要最常用的操作放在屏幕底部非常重要,因为它们能用一只手指轻松触及。

    2016-10-30
  • 微信热点

    【新锐玉商风云榜】颜传赞:以‘用户体验’为支点 撬动家装行业“一键式”转型升级

    在父辈创造的奇迹上,是传承、是创新、是开拓,每一位新生代年轻玉商都在给出自己的答案。——“新锐玉商”专栏总题记新锐玉商风云榜他是“2016浙商年度创新人物”;他提出“构家”如“构车”的“一键式”整体家装新理念,推动家装行业从传统的手工作业升级为家装工业4.0;他的公司“构家”获得复星集团数亿A轮投资。他就是坊间广称为“船长”——杭州构家创始人兼CEO颜传赞。在经济创新这条漫长的大道上,颜传赞以玉环人海派的作风和追求卓越品质的韧性,谱写“...

    2018-02-03
  • 微信热点

    你的网站用户体验为什么比竞争对手差

    网站SEO优化用户体验,又是用户体验!总是有一些站长弄不明白他的网站到底哪里做的不好,明明也做了蛮多的网站优化工作,但是与竞争对手的网站相比的时候,优化数据始终差一截。总是有窗口自动弹出不管是广告窗口,还是在线咨询窗口,如果不是用户主动点开,就自动频繁的弹出来,用户关掉一遍两遍,还是弹出来,那么这种设置明显是在撵用户离开你的网站。存在死链或错误链接第一种情况是用户通过搜索目标关键词找到你的网站,想点击进入却发现是无法打开的;第二种情况是...

    2018-02-16
  • 微信热点

    設計者說 | 交互设计总监+创始人+设计师导师 潘翔的多维思考

    设计者说  |  设计发声平台| 第 53位设计师 |▲ 专访:设计总监+企业管理者+资深导师 三位一体经验分享今天的嘉宾经历过很多次转型——工业设计出身;毕业做交互设计;创业做用户体验设计;当然他也是一只梨的导师之一:潘翔尚器设计联合创始人资深交互设计师同济大学硕士曾任职于designeaffairs一只梨交互设计资深导师几次转型都成功是潘翔最厉害的地方。每换一次角色就会让他的思考和经历叠加一层全新维度。在他身上,同时有资深设计师的专...

    2018-03-26
  • 心得分享:正确对待所面临的一切

    前面一直在和大家分享我在自学的过程当中所学到的知识,其实每次在写文章之前,我都会自己提前做好准备工作,然后再整理出来一个完好的结果呈献给大家,但是自从结束实习到回到学校的这段时间,产出率几乎为零,今…

    交互设计 2015-08-24
  • 微信热点

    AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

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

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