阅读更多

2顶
0踩

Web前端

转载新闻 2018 年值得关注的 Web 设计趋势

2017-12-29 10:55 by 副主编 jihong10102006 评论(0) 有15874人浏览
web

网页设计在过去几个月已经发生了很大变化,我们迫不及待地想知道 2018 年会是什么样。2017 年是关于极简主义的一年,2018 年将给设计界带来更醒目的字体、鲜艳的色彩、用户互动的新的可能性。设计会比以往任何时候都更试图吸引我们的注意力,让我们在网站浏览的同时保持专注和投入。

审视下我们自身,看看什么在变化!

 

这里为你介绍 2018 年六个热门网页设计趋势

 

1.粗体字

粗体字的流行即将来临。大写字母的标题四周有很多空白,这会带给我们强烈的视觉冲击。对于那些掌握字体解剖学技巧的人来说,2018 将是他们大展身手的一年。到了 2018 年底,我们都将知道什么是字体的ascender、ear 和 loop。(译者注:这几个名词是字体解剖学术语,在此不做翻译。推荐一篇相关文章:https://en.fontke.com/article/2690)

粗体字不仅仅是美学上的考量。粗体字还对阅读速度、阅读理解程度和用户感知有很大的影响。

Google/IBM 进行的一项研究表明,有衬线字体 Georgia 的阅读速度比黑体快 7.9%。

即使有些研究表明人们如何使用衬线字体来更好地理解文字,但是事实恰好相反。使用像 Helvetica 这样的无衬线字体的测试人员在阅读速度和阅读理解上的获得的评分更高

粗体字会有产生奇妙的效果。粗体字很容易阅读和理解。我们很高兴可以在 2018 年看到更多的粗体字设计。

 

2. 鲜艳的颜色又回来了!

曾经到处都是柔和的色彩,然而两年后,鲜艳的颜色又杀回来了。不再是柔和的配色方案,新的一年将充满了高对比度和鲜明的个性。

色彩对情绪的影响一直是个广泛研究的课题。颜色对我们的大脑、知觉和行为有着重要的影响。根据 Kissmetrics 的调查,92% 的客户表示视觉表达是最具影响力的购买决策因素

颜色会影响我们的感受,明亮、生动的颜色会让人感到清醒、兴奋,充满活力。

Smashing 杂志声称颜色在影响应用程序的各个方面中排名第二(第一是功能)。

像气味一样,颜色也是一个非常强大的因素,因为它直接影响我们的感受

当我们离开一个网站的时候,可能会忘掉它的内容,但我们会记住它让我们产生的感觉

鲜艳的颜色能激发人们的活力,让我们保持活跃,并激发我们的购买力。它们积极,引人注目,始终吸引着我们的注意力。

一些设计机构已经在一段时间内使用了鲜艳的颜色(你好,黄色!),但在 2018 年,不管是小公司还是大企业,都会迎头赶上。

 

3. 掌握移动设计

随着移动流量每天都在增加,响应式网站在过去几年中已经成为必备。到 2018 年,是时候真正掌握移动设计了。问题不再是:我们的网站是否适用于手机?而是:我们的内容如何最好地展现在移动设备上?

80% 的互联网用户拥有智能手机,并经常使用。事实上,根据 TechCrunch 的调查数据表明,在移动设备上花费的平均时间正在稳步增长,并且每天超过 5 个小时。

掌握移动设计并理解如何在较小的设备上最好地展示内容将是 2018 年的关键挑战。

移动设计的一些关键挑战是:

  • 您不希望你的屏幕显得杂乱无章

  • 您不希望用户在其移动设备和桌面版上找到相同的内容

  • 您想保持一个类似的功能和导航的内容

  • 您可能需要展示广告,这对移动设备来说是一个挑战

  • 您想让你的桌面网站与移动设计触发相同的情绪和品牌效应

用户必须喜爱你的移动设计体验否则他们会流失。谷歌最近的一项研究表明,用户用自己的智能手机做一些研究基本上没有太多的问题。一些关于牙刷,水瓶或盐的研究(是的,盐!)

谷歌的研究显示,在过去两年中,移动搜索“best”这个词的搜索量已经超过了 80% 以上。

实现移动优先级的一个关键要素是您的内容必须易于用一只手进行导航。想想你如何使用你的智能手机。您可以在公交车或地铁站阅读文章,也可以通过超市走道发短信,在途中见到朋友的时候,您可能正在寻找“2017年最好的红酒”。有可能你只用一只手做这些事情。

谷歌称这些情况为“micro-moments”,在时间短暂的情况下,人们正在转向在智能手机上以获取、了解、执行和购买。

据 Steven Hoober 介绍,智能手机使用率的 49% 是单手执行的,而不是两手一握。在手机上,49% 的时间我们单手持有并浏览网站。

这意味着导航必须适应拇指才能触及屏幕的每个部分或大致部分。

 

4. 微互动将更加巧妙

“没有什么大作” - Victor Papanek
2017 年,我们开始看到微互动,将来肯定会看到更多。微互动允许用户以小手势与软件或应用程序进行交互。

在他的“微交互”一书中,Dan Saffer 是这么描述微互动的:

“微互动可以为整个应用程序或设备提供支持,或者(更常见地)在更大的产品中或其内部存在。他们是可以变得沉闷和被遗忘的,或愉快和吸引人的小时刻。每当你改变设置、同步你的数据或设备、设置闹钟、选择密码、打开设备、登录、设置状态消息,或偏爱/喜欢的东西,你正在从事微互动。

虽然 Saffer 用非常函数式的术语描述了微互动,但他们变得更加巧妙和更有趣。

例如,在 iMessage 中,你可以对发给你的任何文本进行“like”、“haha”,“!”或“?”互动。

Facebook Messenger 允许你增加拇指大小,具体取决于按“like”(赞)按钮的时间长短。

微互动的例子是无止境的,但为什么公司使用它们呢?

微互动非常容易上瘾,并且很有趣。他们补充道 - 用户体验设计师和作家 Nick Babich 称之为“人性化”,使任务更加有趣和富有吸引人。微互动鼓励用户与软件交互,并有一些乐趣!

 

5. Visual storytelling(可视化叙事):视频将变得更加重要

叙事将越来越个人化,并且视频在这方面起着至关重要的作用。

原因如下:

  • 根据 Eyeview 统计,在登录页中包含视频可以将转化率提高80%

  • 如果你的电子邮件主题行中包含“视频”一词,根据 Syndacast 统计,你的邮件被打开的概率将上涨19%。

  • 根据 Wistia 的说法,平均而言,人们在有视频的网页上花费的时间比没有的多了2.6倍。

视频是可视化叙事的主体,吸引用户进入场景、故事和情感。它引人注目,吸引人的注意,并保持我们的专注和参与。

 

6. SVG

简单来说,在 2018 年,SVG 有上升趋势,而且它的使用率可能会增加。随着动画越来越受欢迎以及 SVG 能够转换图形和网站的能力,SVG 在过去的几个月里已经稳定地流行起来。

已有 4.9% 的网站使用SVG,包括 WhatsApp、GitHub、Espn、Dropbox 和纽约时报等热门网站。

你可以在 w3techs.com 上的此图中看出:最近几个月中 SVG 有显着增长。

动态 SVG 的常见用例是导航菜单和网站标题。SVG 意味着在保持实用的同时增强接口。导航条或文本是 SVG 的用例。

下面是我最喜欢的示例之一:如果你点击 Sean McCaffery 的 Codepen 网站上的 “Hover” ,动画就会开始:

来自: oschina
2
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Android Studio插件开发3之Extensions And Extension Points(扩展与扩展点)

    如果说自己定义Action并实现相应的功能逻辑是造轮子的话,那么实现Extensions就是使用别人的轮子了,简单快速实现复杂的功能!定义Extensions 和Extension Points是Intellij平台提供的一套供插件之间或者是插件与平台核心功能之间通信的接口。Extension points一个插件提供给其它插件扩展自己功能的入口点,通过定义接口来约定沟通的方法,通俗点说就是造好轮子

  • Extension-Points

    Extension-Points是Ant1.8.0加入的新特性,与target类似,有一个名称和一个依赖列表,并且也能够在命令行中执行。与target不同的是,Extension-Points中没有task,它的主要目的是将有助于达到期望目标的target收集到依赖列表中。 Target可以通过extensionOf将自己添加到extension-points的依赖列表中。target将自己添加到

  • 正确理解扩展关系和扩展点

    在编写用例时,很多人搞不清扩展和扩展点的概念,我也曾为此头痛,经过一段时间摸索才搞明白,所以写了这篇短文与大家共享。    用例可以扩展(extend)一个已经存在的用例。在扩展用例中,扩展发生在一个特定的点上,被称为扩展点(extension point)。可以把扩展看作是在某一特定情况下将额外的描述文本在扩展点上插入被扩展用例中。扩展主要用来简化复杂的事件流,以表示可选择的行为或处

  • kettle执行job流程分析(2)

    真是时光荏苒啊好长时间没再写kettle的代码分析了,正好最近在排查kettle的连接池泄露的问题,趁此机会再来好好聊一聊。job里有个比较灵活的用法,就是前后监听器 JobListener。遍查 engine的代码,以结束监听较多。如果查看 trans 和 job 的执行,就会发现这两者的执行是有较大差别的。

  • eclipse 自定义扩展点

    在RCP程序中,实现可扩展性和可插入性的主要手段就是创建自定义扩展点,当然软件自身也要设计得当才行。本节就以给SMS项目的功能导航器增加一个结点为例,演示如何创建自定义扩展点,最终效果如图33.3所示。  图33.3  效果图         增加一个自定义扩展点将以下语句加入到plugin.xml文件,就可以创建一个扩展点。如图33.4所示,在插件清单编辑器的“扩展点”界面会多出

  • java第三方控件的使用,pf4j: PF4J 是一个 Java 的插件框架,为第三方提供应用扩展的渠道。使用 PF4J 你可以轻松将一个普通的 Java 应用转成一个模块化的应用。PF4J 本身非常...

    Plugin Framework for Java (PF4J)A plugin is a way for a third party to extend the functionality of an application. A plugin implements extension pointsdeclared by application or other plugins. Also a ...

  • eclipse扩展点_Eclipse扩展点评估变得容易

    eclipse扩展点 编码Eclipse扩展点评估有点冗长,而且很少能自我解释。 当我最近忙于自己忙于这个话题时,我写了一个小助手,目的是减少通用编程步骤的样板代码,同时增加开发指导和可读性。 它原来是不容易找到一个表现的解决方案,其中所有的使用情况下,我可以从目前的项目中提取匹配。 因此,我认为分享我的发现并看看其他人对此有何想法是一个好主意。 Eclipse扩展点评估 考虑一个简单...

  • Eclipse重构功能:扩展点的使用

    转载于:http://developer.51cto.com/art/200908/143871.htm Eclipse中提供了几个扩展点,方便扩展重构功能。 基本的重构功能有, Rename,Move,Create,Delete,Copy。对应扩展点即为:  org.eclipse.ltk.core.refactoring.renameParticipants    or

  • extension-point schema

    先看个例子,com.bolour.sample.eclipse.service.ui_1.0.0的extension-point schema,省略了部分不重要的内容.                                    Each extension provides one or more service callbacks functions.         For e

  • java与kettle的集成DEMO

    java集成kettle 示例: 方案: 启用定时任务,调用PDI生成的trans.ktr文件 maven仓库地址:http://maven-repository.com/artifact/pentaho-kettle     pentaho-releases     http://repository.pentaho.org/arti

  • rcp(插件开发) 如何查找自己定义的扩展点

    规则: 扩展点所在的插件ID(X)+扩展点的name(Y) 也就是 X.Y   具体代码 Platform.getExtensionRegistry().getExtensionPoint(X.Y).getExtensions() 就OK了。

  • OSGI-Eclipse 扩展点,扩展机制

    Eclipse的组件架构师基于插件的,这就意味着将一组代码组件化为一个单一的组件,然后利用Eclipse框架注册为组件之一,其他组件可以绑定该组件或者调用该组件。 扩展点是插件允许其他插件向公开扩展点的插件提供附加功能的方法。     插件(Plug-in):   Eclipse功能实现的最小单位,包含了Java代码或者其他文件。插件位于plugins目录下,使用清单文件plugin...

  • IExtensionPoint和IExtension

    eclipse的核心框架是OSGi,在这个基础之上发展出eclipse整个基础平台,最让我们印象深刻的是MANIFEST编辑器。另外还有eclipse的扩展机制IExtensionPoint。   IExtensionPoint:此接口描述的是一个扩展点的定义,它并不是具体的实现,但是能够通过它获取到当前加载的插件中,所有的实现。   IExtension:是我们针对某一个IExtensi...

  • Spring学习笔记4_容器扩展点(Container Extension Points)

    文章参考来源:Spring Framework官方文档 Spring的IoC部分被设计成可扩展的。应用程序开发者通常不需要继承各种各样的BeanFactory或者ApplicationContext的实现类(BeanFactory和ApplicationContext都是接口)。通过插入(plug in)特殊集成接口的实现,可以无限扩展Spring IoC容器。 说白了,扩展点,就是允许你在不修改Spring源码的情况下,通过实现一些Spring预留的接口来把你自己的代码融入到Spring IoC容器初.

  • ext viewpoint简单例子

    以建立一个的简单的后台管理模板为例子(样式如下):  1、必要的引用    其中local为语言包,resources为ext UI包 , ext-all.js则为核心库,shared则是当涉及多个框架的时候使用。  2、新建一个html测试页面加入必要的引用  Html代码   link rel="stylesheet" type="text/css" h

  • java 扩展点 extension point

    http://www.blogjava.net/yangbutao/archive/2007/09/27/148500.html 转载于:https://www.cnblogs.com/chengkun-west/p/5769992.html

  • Java轻量级的插件框架PF4J的使用教程

    一、简介 PF4J是一个Java轻量级的插件框架,可以实现动态加载,执行,卸载外部插件(支持jar以及zip),具体可以看官网:https://pf4j.org/。 本文例子基于Github地址:https://github.com/pf4j/pf4j <dependency> <groupId>org.pf4j</groupId> <artifactId>pf4j</artifactId> <version>3.0

  • 做不好业务中台,你可能是缺了这种设计

    文章目录一、前言1 什么是中台2 为什么需要业务中台二、扩展点机制2.1 青铜菜鸟: If一把梭2.2 荣耀黄金: 策略模式消除If2.3 荣耀王者: 扩展点机制三、源码示范3.1 模型a. 3个扩展点数据模型b. 2个注解c. 1个扩展点管理类3.2 运行机制a. 扩展点扫描&注册b. 扩展点执行3.3 小结3.4 Spring注解开发四、总结 一、前言 1 什么是中台 中台这个概念近几...

Global site tag (gtag.js) - Google Analytics