Web设计趋势分析

本文译自网站设计公司weavora.com,介绍了在他们眼里 8 个 Web 设计趋势:单页面、用照片做背景、色块设计、超大号的图片、聚焦简洁、响应式设计、视差滚动、强调字体,每个趋势后面都附了数个案例,相信对网站设计师会有一定的参考价值。

  • 像苹果网站的单页面

单个长页面的设计一度不受人待见(无论是客户还是设计师),但现在整个网络随处可见。一个合理的解释是,用户现在早已习惯于使用鼠标滚轮了,比起在多个页面间来回查看,用滚轮上下浏览要省事得多。

包括苹果在内的一些知名大公司也使用了相当长的页面来展示产品,获得了很不错的效果。

Apple

Visualboxsite

Versapay

Fitbit

Cageapp

Squarespace

  • 用品牌、商品照片做背景

出于品牌或展示的目的,把照片用做网站的背景,这样可以形成强烈的视觉表达效果。这也是为何你能在时尚、服装品牌、旅游业等等行业看到这样的设计办法。

Alexarts

Davidia

  • 色块方格设计

这一设计方法主要是引入了方块的网格设计,这些方块要嘛是纯色块配上文字,要嘛是方形照片配上文字。

「简洁」是吸引用户的一大原因,而不同的色块放在一起形成强烈的对比,容易引起用户的视觉兴趣,进而继续探索下去。

Dynamit

Lithium

 

Pepsi

  • 超大号的图片

这一潮流的兴起,多少与 Mac OS X 图标设计的流行有关。当工程师为自己的 Mac 程序推出网站时,这样配有超大号图片、突出品牌的设计再常见不过。自然地,这一潮流后来也被 iOS 开发者继承了下来,成为现代设计文化的一部分。

Zennaware

Panic

Versionsapp

Piictu

Enstore

  • 聚焦简洁

对简洁的追求贯穿了整个2012年,许多的网站开始寻求明快、直观的设计。

极简设计旨在透过整合或是删除多余的页面实现简化,只给用户需要的东西。极简设计通常会用到大号的加粗字体、超大号的图片,清晰地把重要的东西传达出来。

Basecamp

Dropbox

Checkoutapp

HTC

  • 响应式设计(Responsive web design

随着手机和平板设备越来越多地进入人们的生活,响应式设计也成为了当下网站开发不可忽视的一股力量。一个可自适应任何设备的网页是很了不起的,响应式设计能确保用户无论是在行动装置,或者在 PC 上都能按你的意愿浏览内容。

Nealite

Twitter-Github

Fork-cms

Floridahospital

  • 视差滚动

所谓「视差滚动」(Parallax Scrolling)就是让多层背景,以不同的速度移动,形成运动视差 3D 效果。随着越来越多的浏览器增加对视差的支持,这一技术也很有可能会更加流行。

Benthebodyguard

Tokiolab

Chartbeat

Inze

Titanic

Noleath

  • 强调字体

从前,设计师所能使用的字体,受用户计算机本地已有的字体所限;现在,借助 Google fonts 和 Typekit 等服务,从理论上说,你能使用的字体是无限多的,极大增强了网站设计的吸引力。设计师利用这一机会也已有了一段时间了,越来越多的网站也体现了对字体的重视;甚至有些网站如 Typographica,字体就占了整个网站设计的绝大部分,出来的效果也相当不错。

Nicehair

Bitfoundry

Daneden

相信以上的这些设计方法会流行相当长的一段时间,当然,你也可以发挥创造力,有机地组合它们,做出优秀的网站。

原文地址:http://www.alibuybuy.com/posts/77870.html

转载于:https://www.cnblogs.com/mcmurphy/archive/2012/12/04/2801412.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361097.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Jasmine,Spock和Nashorn测试JVM服务器端JavaScript

JavaScript使用不仅限于浏览器中的客户端代码或NodeJS支持的服务器端代码。 许多基于JVM的项目都将其用作内部脚本语言。 测试这种功能既不简单也不标准。 在本文中,我打算演示一种使用成熟的工具(例如Jasmine , Spock和Nashorn在服务器端JVM…

C#中的多态

封装、继承、多态,面向对象的三大特性,前两项理解相对容易,但要理解多态,特别是深入的了解,对于初学者而言可能就会有一定困难了。我一直认为学习OO的最好方法就是结合实践,封装、继承在实际工作中的应用随…

AJAX JSON

1、AJAX [1] AJAX简介 > 全称: Asynchronous JavaScript And XML > 异步的JavaScript和XML > AJAX就是通过JavaScript向服务器发送请求,并接收响应,然后我们在通过DOM来修改页面。 > XML指的是服务器响应的…

在WildFly 8.2中修补焊接3 – Java EE 8的第一个实验RI

Java EE 8一直在发展,并且已经提出了几个新的组件JSR。 JSR 365将定义CDI 2.0的规范。 红帽公司已经开始研究Weld 3的实现原型,并且Alpha3最近发布了 。 Red Hat的Java EE 8兼容应用服务器将是WildFly,将在其中实现所有不同的技术。 同时&am…

mat-form-field must contain a MatFormFieldControl错误的解决方法

下面的代码竟然出错了&#xff1a; <mat-form-field><input matInput placeholder"输入名称"></mat-form-field> 错误提示的莫名其妙&#xff0c;其实只要导入以下模块就可了&#xff1a; imports: [MatFormFieldModule,MatInputModule,] 更多专业…

lua# lua5.1.4 源码文件作用一览

写了个脚本列出lua源码C文件头部的注释&#xff0c;作为我有一搭没一搭以Lua为对象学习编译原理的开端。 lua5.1.4全部的源码有35个C文件&#xff0c;17216行代码。每个文件基本的功能如下 ./output_lua_sources_comments.sh ~/resources/sources/lua/src …

带有Hibernate OGM的NoSQL –第一部分:持久化您的第一个实体

Hibernate OGM的第一个最终版本已经发布 &#xff0c;团队从发布狂潮中恢复了一些。 因此&#xff0c;他们考虑建立一系列教程式博客&#xff0c;使您有机会轻松地从Hibernate OGM重新开始。 感谢Gunnar Morling&#xff08; gunnarmorling &#xff09;创建了本教程。 介绍 不…

为自己写程序之JavsScript代码段测试器

JavaScript的测试&#xff0c;通常是在Firefox的firebug插件中测试的。不过有时只是测试几行代码都要写一个html&#xff0c;再打开浏览器测试运行结果&#xff0c;感觉并不是很方便。 今天花了点时间做了一个简易的JS片段测试器。其实这主要是看了IronJs开源项目以后&#xff…

sizeof和strlen的区别(其中涉及NUL的讲解)

本文是自己结合平时所学的知识&#xff0c;对sizeof和strlen的区别进行了总结&#xff0c;如有不对的地方还请批评指证&#xff0c;共同进步&#xff01;&#xff01;&#xff01; 一、从C语言的定义上来讲 1、sizeof是关键字&#xff0c;而strlen是包含在string.h头文件中的一…

我的Wiki:使用JConsole对WildFly(或JBoss AS7)进行远程JMX访问

与以前的版本相比&#xff0c;JBoss AS7的目标之一是使其在默认情况下更加安全。 受此目标直接影响的领域之一是&#xff0c;您不再期望服务器在端口上公开某些服务&#xff0c;而无需任何身份验证/授权就可以访问它。 请记住&#xff0c;在以前的JBoss AS版本中&#xff0c;只…

js判断对象类型

1.typeof typeof只能判断区分基本类型&#xff0c;number、string、boolean、undefined和object,function&#xff1b; typeof 0; //number; typeof true; //boolean; typeof undefined; //undefined; typeof "hello world" //string; typeof function(){}; …

我喜欢的类型

http://v.qq.com/cover/h/hfd581s2y9unvy8.html?vidp0011ocge8q 转载于:https://www.cnblogs.com/sliz/archive/2012/12/09/2809742.html

使用WildFly和Java EE 7映像与Docker提供者一起流浪

什么是无业游民&#xff1f; Vagrant是创建虚拟开发环境的简化且可移植的方式。 它可与多种虚拟化软件一起使用&#xff0c;例如VirtualBox&#xff0c;VMWare&#xff0c;AWS等。 它还可以与多种配置软件一起使用&#xff0c;例如Ansible&#xff0c;Chef&#xff0c;Puppet或…

Apache Nutch 1.6 发布

Apache Nutch 1.6 发布&#xff0c;该版本修复了超过 20 个 bug&#xff0c;新功能包括&#xff1a;新的 HostNormalizer&#xff0c;可通过 MIME-type 和 Indexer API 的功能增强来动态设置 fetchInterval &#xff0c;更新 Tika 到 1.2 版本&#xff0c;更新 Autimaton 到 1.…

EE Servlet 3:如何在Web应用程序中设置后端服务

在Web应用程序中&#xff0c;提供用户界面&#xff08;UI&#xff09;通常只是工作的一半。 许多应用程序都有后端服务支持的要求。 后端服务的一些示例是调度程序进程&#xff08;批处理&#xff09;&#xff0c;侦听队列并在消息进入时作出响应&#xff0c;或者是简单的事情&…

es6解构赋值

解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。 数组解构赋值&#xff1a; {let a,b,rest;[a,b][1,2];console.log(a,b); //1 2 } {let a,b,rest;[a,b,...rest][1,2,3,4,5]; console.log(a,b,rest); //1 2 [ 3, 4, 5 ]…

Jquery插件之ajaxForm

如今ajax满天飞&#xff0c;作为重点的form自然也受到照顾。 其实&#xff0c;我们在平常使用Jquery异步提交表单&#xff0c;一般是在submit()中&#xff0c;使用$.ajax进行。比如&#xff1a; $(function(){$(#myForm).submit(function(){$.ajax({url:"/WebTest/test/te…

休眠锁定模式–乐观锁定模式如何工作

显式乐观锁定 在上一篇文章中 &#xff0c;我介绍了Java持久性锁定的基本概念。 隐式锁定机制可防止丢失更新 &#xff0c;它适用于我们可以主动修改的实体。 虽然隐式乐观锁定是一种广泛使用的技术&#xff0c;但是很少有人了解显式乐观锁定模式的内部工作原理。 当锁定的实…

CSS中可继承的属性

不可继承的属性太多了不要背&#xff0c;记住可以继承的属性有哪些就行了。可以继承的属性很少&#xff0c;只有颜色&#xff0c;文字&#xff0c;字体间距行高对齐方式&#xff0c;和列表的样式可以继承。这么来记很轻松的呀&#xff01;不要被下边的吓到了哦~所有元素可继承&…

如何在JMeter中执行客户端Web性能测试?

在本文中&#xff0c;我们将看到如何使用Jmeter插件进行客户端性能测试。 我将使用jmeter webdriver插件。 在开始本主题之前&#xff0c;请从我以前的文章中获得有关客户端性能测试的一些基本信息。 因此&#xff0c;让我们开始吧&#xff1a; 安装 通过这篇文章之后的链接&…