10组时尚单页风格的网页设计欣赏

UI / UI设计 / 网页设计 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:尛沫尛沫

关键词

你一定也会被密密麻麻的新窗口弄的烦躁不已吧!当你想找之前的浏览过的某一个页面却又不知所措的时候,你是不是会期望所有的网站页面都能井然有序的排列着,或者说一个网站只需要打开一个窗口,所有的内容都能在单页上实现。

单页网页设计,是一种布局和结构都很简单的页面。如今创意十足的网站越来越多,用户对此渐渐审美疲劳,而单页网页设计正让我们的视觉体验在现代感中慢慢返璞归真。单页设计虽然不是什么新鲜事,但随着趋势变化,单页网页设计似乎越来越被我们所需要,这也意味着我们的浏览体验将更有效率和条理。

AnyForWeb为大家罗列了一些单页网站的设计案例,希望能从中有所收获。

1.这个网站以天空星座为主题,再用色彩营造出一种神秘的气氛,但其特点并不在此,而是在网站的导航设计中。大多数单页网页的导航会设置在顶部,或是首屏的底部,很少会放在侧边。由于单页式的网页设计想要体现的就是大气整洁,所以肯定会选用宽屏,而侧边导航又会减少页面的视觉宽度,因此侧边导航很少会在单页网页中出现。用户点击导航后,页面就会随之变化,简洁明了。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

2.这是一个小学的介绍网站,显示的案例是网站的整个页面。网站整体简短可爱,手绘的设计风格和鲜亮的黄色更是充满了童趣。为了不让页面显得过于臃肿,设计师把导航拆分为上导航和侧边导航,在这样的情境中倒也不显得拖沓,反而让页面变得比较饱满,在视觉上也很舒适,没有空洞感。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

3.Sphere无论从内容上、设计上还是效果上都属于的非常简洁的网站。单页网页这样的设计形式相比较于其他的设计形式本来就偏单调,所以,通常情况下会使用一些前端效果来表现他的与众不同。但这个网站却完全没有,只用了一张超大的高清图片作为背景,让用户能专注于网站内容之中。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

4.单页网页设计在国内还比较少的被利用和接受,,只是显示了一种趋势,而在国外市场中却并不少见,或者说介绍性质的网站都会使用单页网页的设计手法。但这种常见仅限于官网性质的网站设计中,单页式的电商网站却还是显得格外出跳,下面的案例就是其中之一。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

5.这个单页网站一共由六个页面组成,每个页面都有不同的主色和人物,每换一个页面都让用户换一种不同的心情。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

6.这是一个会令浏览者有无限遐想的网站,无论背景还是整体的浏览体验,网站中的每个细节都充满了文艺的气息。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

7.又是一个童真有趣的网站,该网站从全局来看各方面都显得很和谐融洽,虽然在色彩上很鲜亮,但完全没有一种浮躁感。单页网页设计的一大好处就是让用户在浏览的时候更有连贯性,能对网站的各个元素即使作出反馈和理解。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

8.这是一个节日网站,各种细节设计都让人爱不释手,比如小巧可爱的“scroll”按钮,以及人物之间的切换,网站抓哟表现出一种比较滑稽的风格

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

9.这是一个展示型官方网站,使用了《2014年全球网站设计的15个趋势》中提到的“超长网页设计”手法。超长网页设计有其独特的地方,是用户体验较好的一种设计方式。这个网站主要用线条来连接网站中元素,让整体看起来既自由又不散漫。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

10.这个网站采用了横向切换页面的方法,这在单页式网页设计中也是比较少见的。如果网站的主要作用是商品展示,那使用横向的图片切换就是个不错的选择。

10组时尚单页风格的网页设计欣赏,PS教程,思缘教程网

单页网页设计的优点不仅是大气整洁,更是提升用户体验的另一种体现。

 收藏