看看我们最新文章:22 2022年网页设计的趋势

今年这些17趋势- 16(2016),+ 1的未来——直接回应我们穿过网络的进化方法。

1。Microinteractions

从按下电梯按钮Instagram喜欢照片,每天我们都执行吨动任务,通常没有太多的想法。我们称这些简单的订婚的时候microinteractions。

精心设计的microinteractions可以定义,因为尽管他们的简单,它们通常非常强大。把一个鼓舞人心的照片,喜欢诙谐的地位,转发一个强有力的信息已经司空见惯,我们甚至不需要名字的网站诞生。

如果做得好,microinteractions提供一种直观的方式与网站进行交互。做错了的时候,他们可以通过意想不到的功能,或者导致挫折非常离奇。

当我们设计师简化web体验,我们会看到-,创造更多microinteractions帮助我们简化我们需要采取的行动。

但是你怎么知道你microinteractions提供简单和权力人们想从他们吗?这个备忘单从丹Saffer, O ' reilly的作者Microinteractions:设计与细节可以帮助:

下载PDF Microinteractions备忘单

2。依赖图像/文本

随着网页设计的发展,高质量图像的重要性只会增加。固体份加强任何网站,但如果可以用一张照片说,动画,或短视频,这可能是一个真的好主意。

文字内容仍然无价的为搜索引擎优化的目的,但每一块的内容添加到你的网站,总是问自己:是否有更有吸引力,更简洁,和共享的方式传达这个想法吗?

一般来说,文本最适合消除歧义,视觉沟通是容易的方法。

值得记住的是,这并不总是一个问题的“一个或另一个。“如果你想设计和发布在一个可访问的方式,重视每一个用户的体验,你会想对视觉和文字内容。这样,每个人都可以体验内容的最佳方式。

3所示。设计与实际数据(即。、内容)

当然,模型看起来漂亮。但与郁郁葱葱的图像和精确lorem ipsum文本位置,它们代表了一种理想化的现实。的电器模型,模拟电视功能如纸板。

设计与实际数据让我们更深入的了解一个页面将函数。部分原因是它表面的所有“问题”设计师努力避免在他们的模型,如长标题,低质量的图像,等等。

设计与实际内容给作家和设计师更好的洞察他们需要做什么。如果你还没有,看看“为什么你的设计过程和内容应该开始吗”。Webflow的CMS可以帮助您设计与实际内容功能原型,让设计师和作家一个更好的主意是多么一个网站将函数。

4所示。Scrooooooooooooooooolling

与多种屏幕尺寸,术语“折叠线上面”已经失去了意义。

一旦被视为糟糕的设计,长期滚动的直观的功能在移动设备上带来了广泛的接受。它使导航更容易消除必要的额外的点击来显示内容。引人注目的转换和分化部分设计变换什么可能是一个单调乏味的长途跋涉到一个令人愉快的发现的过程。

长滚动改变用户体验设计,打开门更多的叙事方法和简单的交互模型。

5。会话/机器人网站和应用程序

许多科幻小说作家设想未来的地狱,人类已经机器人统治者的统治下。但在现实中,人工智能已经发展的非常有用的网站和应用程序。对不起,艾萨克·阿西莫夫。

没有人想一系列复杂的导航菜单就可以搞定了。谈话是一个容易得多的经验。应用程序和其他web服务是使用这个更自然的方式订购商品,获得财务咨询或预订酒店房间一样容易发几个短信。

另外,各种工具地弹出帮助非编码者做出自己的机器人,我们可能会看到吨多的在未来几年。

一个特别有趣的问题源自“机器人”的崛起:如何将web UI / UX设计的角色变换,这种新形式的界面增加人气吗?毕竟,在大多数情况下,已经有一个体格健美的设计包装的经验。这意味着单词本身成为核心UI。

这就自然引出一个问题:会在2017年的“内容设计师”呢?

6。汉堡的死亡菜单

汉堡的菜单是两极分化的。就像选举年政治,我们不建议讨论他们几个在公司混合饮料。特别是公司包括用户体验设计师说。

当然,汉堡菜单保存珍贵的房地产在小屏幕上。

但从可用性的角度来看,汉堡菜单有他们的问题。一些人甚至认识到图标。甚至那些识别不知道会发生什么当菜单打开时,考虑到交互的方式展开。他们也效率低下,他们添加一个额外的步骤来浏览一个网站的过程。

最后,他们还隐藏一个站点的宽度,因此排尿个人页面的上下文和在更大的整体。随着导航屏幕上可见,人们可以很容易地的地形,看看他们的选择。没有它,宏观取向变得更加困难。

应用像Spotify已经抛弃了他们的汉堡菜单支持简化导航,,我们预计我们将会看到更多的继续。

7所示。桌面推送通知

我们都经历过推送通知的力量。无论你在哪里,你在做什么,它是那么辛苦忽略那个小叮或嗡嗡声。所以很难不拿出你的手机,与谁联系你。

现在,许多网站正试图把桌面。如果你还没有看过,这通常表现为小modal-like元素来自浏览器顶部的滑下来,问你如果站点可以发送你桌面通知,拉松。

完美的意义:毕竟,在网站上给你,准备参与它。为什么希望你报名参加简报然后希望你能打开它,当他们可以打你现在这里吗?

说,这些情态动词似乎总是火一旦网站负载,所以很难答应这样的过早,侵入性的要求。(就像普通的通讯弹出)。也许明年会看到这种技术精制更有效和有用的。

8。欧宝体育在线首页产品讲解员视频

是的,这些已经存在了一段时间。但是他们只会在未来几年成长的重要性。

记录在90秒左右,产品讲解员视频提供快速、简洁的方式兜售给定产品的优欧宝体育在线首页点。用有用的画外音和聪明的动画,产品讲解员视频可以工作时公司让人们知道他们的产品是伟大的原因。欧宝体育在线首页

一个品牌要记住当使用这样的视频是他们无法理解一些观众如果标题不包括在内。另外,许多人(包括我,Ed)。直接拒绝观看视频营销网站,所以你不想依靠视频来解释一切。

9。双色版

双色版的图像是由灰度图像与第二个“印刷”,黑色的颜色。技术有它的起源在印刷和适合极简主义的网站设计美学。

双色版图片背景造就伟大的英雄,因为他们添加的一些没有过度分散的生活内容,或创造易读性问题。一个简单的双色版的配色方案也可以成为一个伟大的方式来创建一个干净,consistent-looking页面——尤其是当你想几个截然不同的图像在同一个地方(如商标或团队成员大头照)。

10。程式化的排版

极简设计方法留下余地更多艺术使用的类型。极端大小、自定义字体、传统字体用于非常规方式,高度程式化的字母都可以产生巨大影响。和增加访问谷歌字体和排版选择Adobe Typekit报价,没有必要坚持另一个无聊的无衬线字体了。

结合字体大小可以产生巨大影响的外观和组织一个页面。单个词可以占据整个页面。使用不同大小的字体创建层次结构,进而支持努力的人了解一个网站并找到他们想要的内容。大字体强调的主要信息页面,而较小的自然引导支持消息传递的眼睛。设计师们制造更多的视觉动态页面通过创造性的使用不同的字体大小。

专有的字体也获得了一个全新的在我们的生活。一旦品牌的领域相对、印刷材料、和品牌风格指南,定制的字体已经采取接口我们每天看到的关键角色。旧金山苹果自己的字体,亚马逊Kindle的布克,Android的Roboto,甚至UPS sans字体都是伟大的例子的排版效果对一个品牌的身份。也许是昂贵和费时的设计整个字体,但它可以区分你的公司有强烈的影响。

传统字体转化和使用更多的创造性的方式。文本的形式出现在面具,信在哪里的一个图像,传统文本重叠的方法。我们也看到不良再现,“复古”情感字体品牌拥抱一个DIY审美来捕捉所有重要的“羽衣甘蓝芯片和工艺啤酒“人口。

它可以填补一个页面,其中有些flourish-rich字体,但是当雅致地使用时,这种字体可以创建一个强烈的情绪和生活带来一个页面。

另一方面…

形成鲜明对比的是,我们也看到行动的开始回来为一些主要平台系统字体,包括GitHub。虽然自定义字体帮助创建一个更多样化的和美丽的网络,他们也可以对性能造成负面影响。让我们心存感激,今天的系统字体Arial和Helvetica相去甚远。

11。充满活力的配色方案

平平,极简设计已经得到普及,明亮的色彩一直在上升。所指出的sitepoint.com,这些更鲜艳的颜色方案不局限于网页设计,但在时装设计中,可以找到weathercast图形和室内设计。

卡或容器的布局已经成为更受欢迎,用鲜艳的色彩在这些块创建一个大胆的布局。鲜艳的颜色也有助于UI元素如按钮和导航跳出一个页面。最后,明亮的调色板可以有一个强大的品牌影响——你不能不假思索地认为巨大的明亮的粉红色,或谷歌没有“三原色”。

有一个艺术使用鲜艳的颜色方案有效且很容易走极端的万花筒02色调,唤起,上次你看到网络钓鱼。

12。破碎的网格布局

在其简单对称的网站可能是美丽的,但严格的几何也可以的。破碎的网格是一种放松方式布局,同时仍然保持某种意义上的视觉秩序。这种类型的布局挣脱公约及其新鲜让人。小心,因为太多的混乱可能会导致困惑混乱的内容。

打破电网,原因

我们竭诚推荐动摇你的网格系统,但要确保你正在做它的原因。设计决策不应出于这样的声明”,因为它看起来很酷。“相反,思考如何打破电网的意思是为你的品牌的东西,记住,意味着当你构建你的设计。

例如,Epicurrence网站打破了网格动摇我们通常对图像和内容之间的关系。它不仅仅只是一个聪明的设计——毕竟,这“non-conference”要求改变你的思维方式对行业事件。

没有设计决策应该是出于这样的声明,因为它看起来很酷。

13。动态的讲故事

企业努力联系他们的客户。毕竟,人不想要与寒冷,交互的实体——他们想要与真实的人。动态故事使用视频、图形和文本创建一个交互式的旅程,帮助人们获得更丰富的了解一个品牌,背后的人,他们的任务的价值。

产品也是一样。欧宝体育在线首页没有出现真空,没有历史。总是有一个背景故事,给人们的这个故事可以增加照片的空间感和深度,可能只是另一个软件。

14。与支持直接聊天

与客户聊天和回复他们的问题有助于个性化公司网络的存在。应用程序像对讲机现代化的支持体验镜像像Facebook这样的社交媒体网站消息是如何工作的。能够立即得到帮助也帮助建立信任的一个品牌。

聊天从而成为一个有效的工具在帮助客户解决他们的问题。对于那些不熟悉电脑,代表现在可以远程帮助他们通过协同浏览或分享自己电脑屏幕。这消除了需要找到,然后浏览密集的技术文档,减少摩擦。

直接聊天也可以帮助新用户在一个高度转换上下文的方法。毕竟,如果你致力于解决一个特定问题,突然得到消息,帮助你克服到底这个问题,你相信产品会飙升。欧宝体育在线首页

15。全屏签署“情态动词”

传统的弹出窗口。将全屏收购取代他们吗?

而不是打扰你当你认为小提示# 3是真的好,这些全屏”情态动词“压低的内容,填满你的整个屏幕。平滑滚动的动作使它更少的破坏性,全屏布局提供更多的空间,可以把真正有说服力的内容。另外,不需要手动关闭模态——你只是滚动前进。

电子邮件营销是这样一个巨大的交易,让感兴趣的客户签署比以往任何时候都更重要。虽然他们可能不存在一个完美的世界里的解决方案,博客只是让我们如果我们想报名,至少他们少一点烦人。

16。自定义图解插图

是的,你可以找到大量的视觉效果在你的设计中使用设计良好的股票。但真正让自己与众不同,你需要创建一些独特的东西。有人创建视觉和图像定制你的个性你的网站和项目。另外,它表明你真的把时间和精力放在这个设计。

股票图形的特点之一是无聊的同质性很多人网页设计世界的感知。创建自定义的视觉效果,直接与和你说话的内容提供了一个出路快餐设计陷阱。希望我们看到很多很多。

17所示。展望未来:网络虚拟现实

它只能在早期发展阶段,但虚拟现实浏览网页总有一天会…嗯…现实。Mozilla的WebVR团队设想一个虚拟现实网络,每个网站都能给人一种身临其境的3 d现实完全不同我们习惯于从网上。像大多数虚拟现实技术,WebVR还有长的路要走之前它将容易被大多数人理解。

也就是说,没有比现在更好的时间来思考未来。

2016年趋势你看到什么,你看接下来会发生什么?

网络充斥着创新设计和内容方法,所以我们相信我们错过了的东西。让我们知道你已经看到今年,你想看到更多,在下面的评论!