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

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

相关推荐

  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 1 部分: 推荐引擎初探

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 1 部分: 推荐引擎初探 随着 Web 技术的发展,使得内容的创建和分享变得越来越容易。每天都有大量的图片、博客、视频发布到网上。信息的极度爆炸使得人们找到他…

    2015-12-22
  • 你如何设计交互?

    进行界面设计时,很显然我们一上来就会想着画出整个流程。但这真的是最好的方法吗? 我曾偶然进行了编写一个具有想象的人机对话,之后我再继续使用画流程的方式。 编写人机对话的方法改变了我的思维方式,我再也没…

    2015-08-12
  • 2016天猫双11背后的品牌故事:全民剁手“All in one”

    2016 双11,“All in 1” 主标识,意为“精彩不止一点”。让我们随着阿里小编一起了解2016天猫双11背后的品牌故事。All in 1!将全平台、全品牌、全球融合到一点,迸发出更精彩的世界!

    2017-05-17
  • 不仅要漂亮:看图像如何引导用户体验!

    俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思!

    2017-05-08
  • 基于数据的可用性研究

    小编语:这是一篇关于交互设计与可用性研究的古老的文章,今天小编翻出来给新交互师们看一下~ Thomas Baekdal在The Battle Between Usability and User-Experience中提到,可用性较高的产品并不一定带来好的用户体…

    2015-01-24
  • 内容展示页,是选择瀑布流还是分页呈现?

    每个设计师在工作中都会纠结于是使用瀑布流还是分页列表去展示内容。到底如何选择,让我们先分析下两种交互方式的优缺点。

    2017-05-02
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 交互伏击战:是在射(设)击(计),还是在被射(设)击(计)?

    谈起这片交互的战场,相信每个设计师都有着自己的故事和见解。就在这个高速互联的网络时代,产品设计一面追求高大前卫,一面又对理想很大,无从谈及的“情怀”始终保持一种迷离和空洞。

    2017-05-15
  • UED内功心法口诀篇

    本文约5000字,阅读需15分钟本篇思想可能给你带来的价值何为UED?在产品定义阶段,它是一种关乎如何解决问题的思维模式,在产品迭代期,它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点,到底是什么样的思维模式和科学验证,近一年的时间我们通过大量案例逐渐将其解构出来,并将导图成“UED内功心法”,期望能够帮助交互设计师在具体实操过程中有的放矢,更有针对性地发挥设计的价值。心法口诀第一式:目标用户锁定招式1:找出契合业务的目标族...

    2018-02-02
  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20