巧用色块布局,让你的网站与众不同!

2013-12-24    蓝蓝设计的小编

转载蓝蓝设计(   www.lanlanwork.com  )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的   BS界面设计 、 cs界面设计 、  ipad界面设计   、  包装设计 、  图标定制 、  用户体验 、交互设计、   网站建设 平面设计服务

来源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想订阅本博客内容,每天自动发到您的邮箱中,   请点这里 

QQ截图20130428163130

Metro UI是一种界面展示技术,和苹果的iOS、谷歌的Android界面最大的区别在于:后两种都是以应用为主要呈现对象,而Metro界面强调的是信息本身,而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户”这儿有更多信息”。同时在视觉效果方面,这有助于形成一种身临其境的感觉。

科普一下:神马是Metro?Metro是由微软公司开发的内部名称为” typography-based design language”(基于排版的设计语言)。最早出现在微软电子百科全书95,后来的产品如:windows媒体中心、Zune播放器都有用到这项技术。该技术已于2010年初(美国)获得Metro UI专利批准(USPTO)如今该技术被引入到微软开发的Windows Phone操作系统和已经发布的Windows 8预览版以及Office 15中。

蓝蓝设计 :2012年7月,在大连中软实训基地学习时,老师要求我们分小组开发项目,理所当然地,我担任前端设计和开发的工作。
当我略微得意地把设计好的页面拿给老师显摆时,他给了一个字的评价:”俗!”然后讲,”中国风看起来的确美,但这种美很容易趋于小气和庸俗,远不如简单用色块搭配出的效果。”

也是从那时候起,我开始注意色彩的搭配,也开始用这种观点来把玩一些网页和海报等的设计。
《甄嬛传》再经典,老外们也不会明白隐藏在后宫中的弯弯绕…

下面来分享一下蓝蓝设计眼中或凌厉傲娇或简洁明朗或大气磅礴或小家碧玉的一些网页截图:

ux-lx.com

每一个导航都有一种鲜明的颜色,而且对应的子页面中也会有不同的背景颜色,瞬间能感受到一种扑面而来的时尚和热情了,你怎么看?

ux-lx.com

 

piccsy.com

#E02E42和不同灰度的黑白色彩,简单的icon图标,营造出了一种优雅、愉悦的气氛,flatUI、自然排列的圆角二级导航菜单,清新明快,有没有想再停留一会儿的赶脚呢?有时候,管理复杂比简约设计更重要哦~:)

httppiccsy.com

 

kippt.com

这个网站告诉你神马叫做一目了然!有时候,捉迷藏会令人感到很烦…

kippt.com

 

ryanfait.com

在这个全屏、居中、甚至居左的页面都满天飞的web时代,这个页面是不是很别致?是不是很空灵?是不是很…美?看header上文字的巧妙排版,有木有拍自己脑袋的冲动?



 

gathercontent.com

这种…最近风头挺旺的,暗含内容被虚化的大背景图片,上面摆放文字、半透明的div块,有些页面中会将图片加上一层暗纹,不多做介绍~

gathercontent.com

 

honghaihaotian.com

之前有提到过这个网页,flash做的,那些小方块立体翻滚,烟雾缭绕,建议去感受下,
如果不提动态,背景图片加上色块导航,也是挺不错的一款设计方案~

QQ截图20130428163954

 

smashingmagazine.com

这个页面其实没有很多的色块元素,但是…信息量很大。把它列在这里的原因是:我发现它最上方的导航做成了tab样式,整个页面有层次感,很有特色~~有没有发现搜索显得很亮?

QQ截图20130428162446

 

shejidaren.com

关于这个页面,我只想说两点:1、底纹往往决定一个网页的气场和品位;2、繁体字的大标题是不是显得更加饱满和惊艳?3、我绝对没看出来这是用wordpress搭建的…

显然…这个跟我们标题讨论的色块也没有关系…但是,我觉得很有必要分享…



 

nicolasgallagher.com

为了让这个懒洋洋的页面更全面地显示出来,小编省略了中间更多的内容,特意为两幅<img>添加了border,拼接起来供大家赏玩…你看到过这样的网页么?至简啊有木有…

nicolasgallagher.com QQ截图20130428161428

 

意犹未尽的最后

其实,不管什么风格的页面,看久了都会视觉疲劳,所以,当你看到最后一幅的时候,你可能会感觉到很舒服…我们的眼睛需要休息,多元可定制的风格才是王道,期待web带给我们越来越美妙的体验。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档