网页设计的五个实际应用的趋势

无一例外,每当我高兴的点击类似名为“今年网页设计趋势”的链接后都会感到失望。如果你写了一个2016年设计趋势列表,其中包括了全屏视频背景那你应该回去看看一些网站之前的各个版本。总之,闲话少说,下面列出五个今年上班年的实际趋势。

无一例外,每当我高兴的点击类似名为“今年网页设计趋势”的链接后都会感到失望。如果你写了一个2016年设计趋势列表,其中包括了全屏视频背景那你应该回去看看一些网站之前的各个版本。总之,闲话少说,下面列出五个今年上班年的实际趋势。

1) 全屏 & 不可滚动的页面

如今不可滚动的网站越来越受人关注。没有滚动条的网站,可以用点击顶端锚点链接的方式来浏览内容逐渐成为网页设计的趋势。尽管有人很讨厌限制了滚动操作,但是它有时可以表现得很出色。在设计此类网站时利用的是页面的限制性,键盘导航在此类网站中很常用。

1-gY-veW2AFqTj78Liuj_zRQ

Facebook Privacy Basics

三个没有滚动的全屏站点:

  1. Facebook Privacy Basics— 很棒的站点,尽管有时候没有响应,但是通过它一步步的向我们解释了facebook如何通过各种服务方式来保护用户的隐私。
  2. Fantasy— 一个设计机构在今年早些时候上线了一个备受期待的网站,当然,它并没有让我们失望。特别是工作查询的部分,一目了然。
  3. KLM 50 Travels— 很棒的评选类网站。它可以带你到50个景点,仅仅需要一个屏幕、一点时间。键盘导航很不错。

2. 标题放旁边

最新的网页设计趋势应该看一些设计机构的网站或者一些设计部门的设计。文章的标题应该可以滚动到文章的旁边,很多很酷的设计师都是这么做的。这是一个web端设计趋势,如果你在移动端上阅读,则没有必要。

2-XZct6V6IhmFL4AR9ogffwg

Code & Theory

三个案例:

  1. Code & Theory—当你滚动浏览网页信息时,城市的标题会停留在图片上。
  2. Stack Overflow— 虽然这个网站不太符合这个例子。但是向右滚动时,导航会保持固定。
  3. DDB Sthlm—如果你向下滚动新闻时,你会发现标题一直保持在旁边。

3) 加载时会呈现出品牌logo

这是一个巨大的趋势,在今年几乎成了每一个机构网站的共同点。每个网站都应该拥有也应该去做,首先它看起来不错,同时让用户感觉到该网站是该logo品牌的一部分,加深了用户的品牌感。

3-9rAh84JBJbcvkH0TESy7Sw

Instrument

在加载时使用logo的三个例子:

  • Instrument— 这个网站的logo只在你打开导航菜单和加载时显示,这是一个有胆量的事情。
  • Fubiz— 每个部分有不同的logo和对应的动画。
  • This Also— 这个不错的设计网站有很多之前从未见过的设计。加载程序时会出现导航图标。

4) 有交互效果的背景图案

有一个背景图片在浏览窗口里不是一件新鲜的事,这好像是2013年的网站设计趋势。但是将一些交互效果添加到背景图片中,比如在鼠标悬停时…那将会使网站提高到了一个新的境界。

4-NXKd2cLMbd9068vyXeSaPQ

Active Theory

背景图片交互的三个例子:

  1. Make me pulse— 当鼠标移动到背景时,感觉山有了动感。
  2. Active Theory— 如果你为你的公司设计一个网站,有什么更好的方法能展现出你高超的设计技巧呢?那就是让你的网站像一个谷歌实验,除此之外没了。
  3. Details—它会带来一些滚动。这个瑞士的设计机构显然不想用锚点链接,如果你向下滚动到4/4的页面时,你会看到一些轻微的变形效果。

5)顶部动画的设置

在技术上是可行的,如果做得好那将会是视觉上的享受,但是如果做的不好,不停循环的动画会令人烦躁。所以当你使用它的时候,请谨慎。

5-qlBzjRvbUM8WCTNGjOu6Rg

Waaark

三个例子:

  1. Waaark— 这个小工作室呈现了一个完美的视觉体验。
  2. Animocons— 一些点击图片动画的例子,所有效果都由网页代码写出。
  3. Rally Interactive Beta— 当你点击和选择的时候顶部导航栏会变化。

作者:Nils Sköld

译文: IAMUE 小编 bead_交互

 

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

(0)
iouedioued
上一篇 2016-08-11
下一篇 2016-08-23

相关推荐

  • 十步交互设计方法

    理清业务逻辑是交互设计的第一步,你必须得拥有非常清晰的逻辑思维,因为某些产品往往伴随着海量的功能、大量的模块、错综复杂的交互流程以及难以理解的业务技术背景,这些都是对设计师逻辑思维的一个挑战。如果你没有清晰的清晰的逻辑思维,那可能就不适合做交互设计了。

    2017-05-27
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • FaceUi招交互设计师-UE网免费发布交互设计师招聘信息

    职位:交互设计师   岗位职责: 1、熟悉了解移动智能产品的UED流程; 2、设计不同的产品原型方案;独立负责并完成单个项目; 3、参与团队设计交流与创新尝试与研究; 4、跟进视觉设计师和开发工程师,负责对接客户…

    交互设计 2015-05-12
  • APP框架之提示框架

    某日和iOS开发聊天,说到iOS规范里没有安卓中的Toast形式的提示。我有点惊讶,仔细回忆iOS的交互规范,似乎是有。后来找来书确认了下,竟然是没有。遂把这个框架整理了下,在文中同时也强调下Android的交互规范的差…

    2016-09-29
  • 用户体验设计师、UI 设计师和交互设计师有什么区别?

    首先,不同的公司对不同职位都有自己的理解和定位,名称相似的职位在不同的公司文化中通常职责不尽相同。比如 Google 会要求用户体验设计师有 “专家级的 XHTML,HTML,CSS 和 Javascript 能力” ,而这样的要求在其他公司并不常见。不过通常来说,这三个职位还是各自有一些大概的职责范围的。用户体验设计师用户使用你产品的每一秒钟,都是这 “体验” 的一部分。先不管 “用户体验” 能否被 “设计”,既然你尝试去改变或者影响...

    2018-03-11
  • 为什么交互设计师总觉得自己的方案不完美?

    最近和一个交互设计师闲聊,聊到了关于对自己设计产出物的满意度问题,感触颇深,专门整理了一下分享给大家。

    2017-04-29
  • 关于交互设计师的工作内容,这篇讲得最全面!

    交互设计师的工作,并不仅仅是输出设计方案,我们需要参与前期的需求讨论、后期开发、测试验收等等产品设计与实现的多个环节。本篇将介绍我目前参与交互设计的工作流程以及各个阶段的工作职责。

    2017-05-18
  • 提升用户体验的12大法器—《从点子到产品》读书笔记

    读了刘飞老师的《从点子到产品》书中关于用户体验的讲解,获益颇多。特此整理Mark一下,也分享给需要的童鞋~

    2018-04-26
  • 浅谈Web设计中的上下文工具

    最近在阅读Bill Scott和Theresa Neil 所著的《Web界面设计》,其中上下文工具一章给我留下深刻的印象,下面我将结合部分实例来回顾一下主要的内容。

    2017-06-04
  • 印尼APP用户体验调查报告

    随着智能手机功能的不断优化,用户对设备的体验要求也逐渐提高,用户的满意程度不再仅仅由服务质量来衡量。移动市场的竞争逐渐加剧,简单易操作的移动应用程序更能获得许多用户的青睐。市场玩家需从用户的角度去优化用户体验。用户体验一直是一个非常主观的问题,每个人都有自己的偏好。年龄、受教育水平、设备类型等因素都会影响到用户体验。近期一篇关于用户手机app使用体验调查报告透露了印尼用户的一些使用行为习惯,详细如下:(注册偏好)大部分受访者在注册一个应...

    2018-04-12