网页设计怎样最美? 8个Web设计趋势

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

  像苹果网站的单页面

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

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

  Apple

  

  Visualboxsite

  

  Versapay

  

  Fitbit

  

  Cageapp

  

  Squarespace

  

  用品牌、商品照片做背景

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

  Alexarts

  

  Davidia

  

  色块方格设计

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

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

  Dynamit

  

  Lithium

  

  Landor

  

  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

  

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

  来源:TechOrange

  (转载请注明来自:DamnDigital)

时间: 2024-10-25 10:01:06

网页设计怎样最美? 8个Web设计趋势的相关文章

《移动优先与响应式Web设计》一下册 响应式Web 设计

下册 响应式Web 设计 移动优先与响应式Web设计响应式Web 设计 本文仅用于学习和交流目的,不代表异步社区观点.非商业转载请注明作译者.出处,并保留本文的原始链接.

Web设计核心问题1:什么是Web设计(4)

web|设计|问题  1.8 形式和功能的平衡 Web站点设计的关键问题是形式和功能的平衡.在现代主义的影响下,很多设计者坚持认为事物的形式应符合它的功能.考虑到形式是Web金字塔的基础之一,而功能是另外的基础之一.形式不好的功能是令人厌烦的.站点可能运行得很好,但不能激发用户的灵感.与之相反,如果形式富有表现力,功能有限,用户则会感到失望.形式和功能之间需要一个清晰且连续的关系.简单地说,站点的形式应直接与它的意图相关,如果站点是商业性的,它的外观可能非常绚丽,并且有相当份量的多媒体内容,如果

Web设计核心问题1:什么是Web设计(3)

web|设计|问题  1.5 Web的图形用户界面传统 很多Web站点提供了在线商场.电子银行.软件下载.游戏以及网上交谈等功能,这些复杂的站点不仅提供了内容,而且也允许用户像使用传统软件一样进行交互或操作.然而, Web站点并不等同于传统软件,尽管它们都用类似的程序方法设计,但Web站点的发布是不同的,必须易于学习,没有安装与卸载的麻烦,必须专注于内容,并更直接地考虑市场.进一步说, Web与传统软件相比,有更复杂的时间效益与软件发布的考虑.考虑诸如s u p e r b o w l . c

Web设计核心问题1:什么是Web设计(2)

web|设计|问题  3.2 谁是Web用户 一个网站设计者经常犯的错误就是过于简化或完全忽略用户的能力和愿望.有时候,为一个特定的浏览器或特定的带宽设计网站的想法完全取代了任何严肃认真地为用户考虑的想法.不要为N e t s c a p e设计网站,要为那些使用N e t s c a p e浏览器的人设计网站.请时刻记住下面这条重要的网站设计规则. 规则:浏览器不使用网站,使用网站的是人. 幸运的是,大多数设计者不会完全忘记用户,但他们确实经常过于简化网站的使用者.通常,网站是为一些神秘的传统

Web设计核心问题1:什么是Web设计(1)

web|设计|问题 关于Web的讨论经常偏题,这是由于人们所用词汇的意义变动很大.尽管人们或多或少地有些看法,但没有人能够精确地定义什么是Web设计.一些问题被经常讨论,如可视化设计与编程,但关于它们在Web设计中的重要性则仁者见仁,智者见智.撇开可视化和技术方面不谈,很多人认为Web站点内容的创建和组织是Web设计最重要的方面.随着电子商务的兴起,商业方面的考虑也成为站点成功设计的重要方面. 对于特定的项目,上述所有学科以及其他代表着Web设计主要方面的交叉学科,都可能是需要的.由于许多学科,

WEB设计经验 -来自microsoft.com设计主管

web|设计 作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中心.产品目录.配置文件中心. 搜索 和注册等联机功能. 他为几个内部工具设计了用户界面,并且正致力于创建将于今年晚些时候发布的下一代主页. 从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计.的确,这些确实是我所关注的.视觉上的吸引力是重要的,但是这仅仅是工作的一小部分.而最终的目的是确保整个站点运

WEB设计经验 -来自微软设计主管

web|设计|微软 从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计.的确,这些确实是我所关注的.视觉上的吸引力是重要的,但是这仅仅是工作的一小部分.而最终的目的是确保整个站点运转正常. 我的意思是,人们通常在访问 microsoft.com 时,并未将它当作艺术作品来赞赏.而是为了获得有关产品的信息,或者有一些技术问题需要咨询,或是阅读有关开发商的期刊.所以网站的设计应该尽量清楚和有条理,以便他们能够容易地找到所需信息. 设计站点 在进行 Web

【译】Web 设计准则

本文讲的是[译]Web 设计准则, 原文地址:Do's and Don'ts of Web Design 原文作者:Nick Babich 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:吃土小2叉 校对者:michaelia.Hyde Song Web 设计准则 作者: Nick Babich Web 设计是一个棘手的主题.在创建一个网站的过程中需要考虑许多事项.为了简化这个任务,我准备了一份每个设计师都需要考虑的 Web 设计准则清单.好消息是这些

《HTML5移动Web开发实战》—— 1.1 移动Web设计的挑战

1.1 移动Web设计的挑战 众妙之门--移动Web设计精髓 针对移动设备的Web设计由于其行业的特殊性会面临一系列特殊的挑战,那就是设计师必须克服各种困难来制作一个在移动设备上完美运行的网站.如果你决定尝试设计一个移动设备上网站,那么下面将讲到一些值得你注意的可能出现的问题. 屏幕尺寸多样化 尽管Web设计师经常处理由于不同的屏幕尺寸而产生各种问题,与处理电脑屏幕大小不一问题的方法相比,移动设备Web设计的处理方法有所不同.大多数Web设计师都能顺利解决由于台式电脑屏幕分辨率提高而出现的问题,

响应式Web设计

在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好? 有没有办法能有效解决这些问题呢? 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应