首页 > 设计文章 > 正文

2015年新兴的网页设计趋势 让设计更富美感(下)
2015-04-15 09:40:09    应酷设计
0   

网页设计越来越强调美感,可以不断指出许多在前期设计中所犯的错误:概念,导航流程规划,线框,文案写作等等。所以扩大视野和学习新技术的同时,要确保自己不要忘记最基本的东西。

6.方框减少

网页设计师总是喜欢炫耀自己的思维能够跳出框框,而且能以不止一种方式跳出方框。姑且称之为“画一个框框然后证明你能打破它”理论。矩形显示器本身就是对网页设计师的束缚(别说你见过圆形显示器)。网页上的每个HTML元素也是方形的。

但是跟大多数人一样,设计师不喜欢被束缚。下面提供据我判断目前处于上升期的几个趋势,可以作为证明你不是矩形奴隶的长期战略计划。

就像不存在矩形边框一样去设计布局

1422939018Circles_Hexagons_Iirregular_Shapes

详情点DAN Paris.  DAN的instagram photo由圆形组成菜单导航.

和谐元素:圆形,六边形,不规则形状,甚至菱形。

 

1422939110rectangles

详情点Lorenzo Bocchi

轴测图的视角展示的水平倾斜视角和网站布局预览,给人空间和运动的感觉。

 

1422939171z_lotu_ptaka_realism

详情点The Rosa
在罗萨餐厅主页你的感官会被骗到–你几乎可以闻到饼干的香味。其实不是新技巧,它是一个现代版的以百年老技术trompe-l’œIL,模拟镜头下的真实桌面。例如,把木桌作为背景,然后把所有的布景物体放置在上面。

 

1422939205swiss2

详情点Swiss Airlines

否定矩形的根本方法是将用户置于一个无限的空间里,滚动页面就可以飞行,呃,滚起来。
瑞士航空公司的挑战了你的网站导航的理解。浏览他们的页面,你会感慨我们对文档空间的理解是多么常规和局限。在这里,不是鼠标在向上或向下,而是我们在云里自由穿梭。

7.贴瓷砖

 

1422939251Tiles_Windows8

如果你和矩形相处得很融洽,那么有一个很酷的方式来组织你的内容:贴瓷砖。不知为何瓷砖在网页设计这块比在Windows 8 Metro界面这块更为流行。瓷砖非常适用于响应式布局,同时是一个形成令人印象深刻的布局元素。

如果贴瓷砖变得太无聊,可以尝试进一步把边缘锯齿化,然后把对象或者文本推出锯齿边缘。

8.导航控件

 

1422938950dailybeast_s

Daily Beast网站导航控件把滚动方向显示在文章内部。

导航设计一直是网页设计师最喜欢的游乐场。“玩”导航达到顶峰的时候,网站是纯粹的Flash设计。Flash消失后菜单
变得安静了,没有了动画或夸张的交互。

但尖锐导航趋势又一直在上升,部分是由于新的网页设计趋势和现有的导航模式的低效。由于Java的不断演化和现代CSS在各个浏览器中更频繁的被阐释,Java Script脚本的更广泛的应用(通过框架和插件),因此尖锐导航设计的实现变得更为容易。

这里有几个导航设计试验和趋势的几个例子。其中部分想法已得到了广泛的应用,而其余的作为一种新生力量在推动网页设计
走向。

粘性菜单

 

1422938157less_s

菜单在鼠标滚动时不断扩展相关项目。它适用于有很多内容的单页网站。The LESS的菜单是一个少有的非常舒适的使用“手动”的网页。

粘性菜单是当鼠标滚动时菜单仍停留在屏幕的顶部或边缘。不管你喜不喜欢,它正在成为单页网站的标准。

有时它结合scrollspy脚本创建一个部件能准确显示浏览者在页面具体位置,这在是有长长层次关系菜单的网页里尤其实用。

贴在屏幕四角的粘连导航

 

1422938080HUM_1

详情点Hum

街景视角导航条

 

1422938008pudelko_w_pudelku_nawigacja

详情点Oh Dear Games

谷歌地图,特别是街景,启发了这个网站开发者创建类似通过谷歌街景步行的导航。时间会告诉我们它是否能成为一种趋势。

9.结合谷歌地图

 

1422937088street_view_inspire

把这个特点作为2015一大趋势,不仅因为它已经在近几年逐渐崛起(而且我们看它几乎无处不在),而且它正变得越来越有趣,这得益于谷歌提供的易用定制选项。

按这个特点做的最有趣的网站是在一个地图概念图周围进行功能区和视觉上的创意构造。当然,它使用的是定制的谷歌地图以良好地配合页面的外观和感觉。

10.混搭界面

 

1422936959necotrans_preview

详情点Necotrans

对单页网站持续的偏爱所带来的挑战是可以解决的,而且是以一种创造性的,用户友好的且直观有吸引力的方式解决。面临的挑
战是要在一个页面上包容很多信息,实现很多功能。所以页面必须有一个整洁,现代的外观和易用的导航。

该解决方案可以称为混搭界面:一个布局包括许多“层”,适应所需的功能或内容。实际这不是新概念,它本质上很类似于桌面应用程序,却没有在主流的互联网上广受欢迎。最近,这种界面的使用率在增大,他们变得越来越精致,功能多样。

Necotrans网站在网页上方似乎没有什么内容,仅仅在全屏背景上打上一行字。但是右侧菜单允许访问所有必要的功能,为用户提供站点搜索工具,定制的谷歌地图,新闻版块和联系方式表单。

11.极简化

 

1422936847maemo_big_video2a

详情点Maemo

20世纪60年代以来,经典的KISS原则(“Keep It Simple, Stupid”的首字母)已被用于军事,企业和政府。然而,即使你可能已经很努力的简化你的设计了,它也许还有进一步简化的可能。

Maemo餐厅用不可抗拒的口吻,最精炼的语言讲述自己的故事,冷雾萦绕的峡湾上悬着餐厅的名字。浏览者只面临一个去诱惑——行动(订一个餐位)。

向下滚动会看见随意布置的几张照片,很难说是水平还是垂直对齐。照片的主题看起来也很随意。然而,浏览网页会给人强烈的感官体验。

苦行僧的形式提升了照片的质量,而这种极简主义让你很愿意去读照片下方的几句禅语。

从这里能学到什么?你可以在网页上保持视觉上的沉静,同时实现震撼的视觉效果!尽量减少文字、表格和色彩的同时,要添加大幅逼真的视频来营造趣味性。

12.加载网页设计

 

1422936761loading

我们能以前所未有的快速度创建网站,如使用高清视频网站后台。但每一步都是有代价的,在这种情况下,代价是加载时间。

现在我们可以看到一个大逆转的视觉魅力的加载页面,而不像在Flash时代小游戏式的加载网页。

13.设计自动化

 

1422936614thegrid1_

详情点grid.io

截图的是显示有错误的一个页面,没有人会去做这样的东西:在黑暗的背景放上不易读的黑色文本。

本文如果不提“grid”的话就不算一篇完整的文章–“grid”是由最近经常搞出动作的“折衷的设计师”提出的一个吸睛的想法。它试图以人工智能取代设计师和程序员的位置。未来网页设计师会变成多余的?有待观察。

现在仍然无法测试这个假想系统,所以很难判断其可用性。这个系统做出的网站似乎是其理论的唯一依据,这个网站对大多数问题应对良好,但试图创造完全人工艺术似乎是这个时代做不到的。例如,绘画傻瓜创意软件还没有消灭掉绘画艺术画廊。

结语

这13个网页设计的趋势已经蔓延在过去一年,也很可能会极大影响2015年的网站建设样貌。然而,如果我们用一句话来概括今年的建站趋势,就是“内容为上”。

这条定律一直很准。但如今,网页设计越来越强调美感,可以不断指出许多在前期设计中所犯的错误:概念,导航流程规划,线框,文案写作等等。所以扩大视野和学习新技术的同时,要确保自己不要忘记最基本的东西。

相关热词搜索: 新兴  趋势  网页  设计  美感

上一篇:2015年新兴的设计趋势 助你发现新的灵感(上) 下一篇:教你如何设计一个顶尖的“联系我们”页面