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

无一例外,每当我高兴的点击类似名为“今年网页设计趋势”的链接后都会感到失望。如果你写了一个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

相关推荐

  • 【交互设计留学】作品集是怎么样的?

      美国交互专业作品集侧重点是一个方向很多的专业,如果学生偏重界面、视觉、解决方案方向,那么作品集要注重调研,以及数据分析,数据展示、解决方案等内容。如果学生是侧重多媒体,交互装置方向,那么作品集要…

    交互设计 2016-05-08
  • 什么是用户体验文案设计?【UXRen译#164】

    作者: Kristina Bjoran  |  翻译:陈馥丹,校审:小四   有一种新的职业出现了,嗯,也许不是“新”的,但可以肯定的是这种职业出现次数会逐渐增加,像谷歌、亚马逊、Dropbox、Paypal……许多大型科技公司正在寻找UX文…

    交互专题 2017-08-07
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • UI设计有哪些规范?

    UI设计有哪些规范?可能很多小伙伴都在工作中思考过这个问题,现在作者总结了一些UI的设计规范,给大家做个参考。

    2017-05-22
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 交互设计师必备的9种能力(下篇)

    让我们继续来跟着大饼哥来看交互设计师必备的9种能力。

    2017-05-15
  • 浅谈视觉设计与用户体验的统一

    Dribbble,国内比较追捧的媒体。上面聚集了很多项目的视觉设计图,有的配色很漂亮,有的表现手法很新颖(一定程度上会激发我们灵感的火花),但我们在不了解设计场景、目标的情况下是无法判断出这样的视觉设计是否最终解决了用户的问题。脱离业务场景的设计是没有生命力的更谈不上产品体验、服务体验,只有视觉和体验统一起来才能更好的占有市场,设计才具备了商业价值。

    2017-05-24
  • 7个实用规则,让你的设计更加简单直观

    简单直观的设计并不一定非得是极简的,它同样可以是丰富而又有趣的。

    2017-05-09
  • 这其实是一篇技术出身的产品经理所写的关于用户体验的深刻忏悔书

    十大交互原则实用总结 如果当初没有进入产品经理的队列,笔者说不定也是互联网程序猿中的一员。做技术出身的产品经理有好也有不好,好是因为一般有一个idea或者是新的需求,在没有用到特别尖端、特别前卫、特别超出…

    2015-11-30
  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29