web网页界面设计-WEB网页设计常见布局

摘自电子商务系统分析与设计

Web页面设计遵循三条原则:简洁性、一致性和对比度。简称3C原则。

1)简洁性

设计并不再现具体的物像和特征,它要表达的是一定的意图和要求,在适当的环境里为人们所理解和接收。

醒目的图形,要求简洁。

限制字体和所用颜色的数量。

页面上所有的元素都应当有明确的含义和用途。

2)一致性

页面的排版,各个页面使用相同的页边距。文本、图形之间保持相同的间距。

主要图形、标题或符号旁边留下相同的空白。

各个页面使用相同的图标。

色彩和风格的一致性,所有图片都应该具有相同的风格。

文字的颜色要同图形的颜色保持一致并注意色彩搭配的和谐。

一个站点通常只使用一两种标准色。

3)对比度

使用对比度是强调突出某些内容的最有效的办法之一。

使内容容易辨认和接受。

例如:内容提要使用蓝色,正文采用黑色。

也可以使用大标题。

图像对比,题头的图像明确地向浏览者传达本页的主题。

很多新手设计师都会面对一个问题,Web页面尺寸宽度到底选哪个?

其实答案并不是固定的,可以做成1920,也可以做1280。黑客认为最重要的决定因素在于你自己的工作电脑分辨率。

这是广告公司AdDuplex送出的统计大数据

市面上的电脑屏幕尺寸多种多样,不过大部分都集中在这几种:

1920-1080:目前常用设备中最大的尺寸(Mac 5K屏除外)

1440-900:15寸MacBook Pro为代表,很多UI设计师首选

1366-768:普通的PC电脑

1280-800:13寸MacBook Pro为代表

在以上设备中,13寸和15寸Mac Book,虽然实际分辨率非常大,但由于是Retina屏幕,视觉展示上还属于以上范围。

所以,网站的内容显示宽度大部分都在1200px以内,确保小的电脑屏幕能显示全网页内容。更早的时候很多都是960px,不过由于屏幕越来越大,目前比较少。

在了解过电脑屏幕尺寸后,网页设计尺寸(本文专指宽度,高度不限)选哪个也很清楚了:选哪个都不会错。

事实上很多设计师是这么做的:用小于1920的屏幕去设计1920的网页。

这样设计没错,而且是很多培训机构、学校的标准定义:网页设计宽度尺寸是1920。

但是如果你用了这个神器的Sketch插件,就不会按照之前的结论来设计了。

以前黑客有介绍过。 点击查看

设计师在做界面的过程中需要经常查看设计稿,以便及时修改设计细节。除非你用1920的屏幕可以设计1920尺寸,否则我们的设计尺寸和屏幕尺寸不相同,就会导致预览的界面偏移,需手动调节居中。

如果设计的尺寸和屏幕尺寸保持一致,那么插件预览的效果就会完美,不用每次都要去调节。

本质上网页设计尺寸选哪个都是正确的,关键在于怎么方便、快捷地帮助我们预览、展示设计稿。

在利用sketch插件频繁预览的前提下,黑客建议网页设计尺寸等于你的工作电脑屏幕尺寸,这会节约你很多时间。在设计后台类的界面时,这个方法的优势会更加明显。

最后有一点需要注意,在进行切图的时候,如果遇到全屏的图,需要把切图修改成1920,否则在1920电脑中切图宽度会不足。不过到了切图这一步,就属于设计工作的后期了,我们只需要花点时间把对应切图改成1920即可。

更多UI设计干货文章请关注UI黑客

微信公众号 uihacker

UI黑客官网

/

UI黑客论坛

/

我们一般的版式设计除了平面设计,就是网页设计和互联网产品,比如一些移动端手机APP这些界面的设计。这些设计都有一些通用的布局, 大家在刚开始学习布局时有一个诀窍,即不用太在意布局的理论,而去收集一些大家常用的布局,先把这些东西记下来,随着经验的积累,可以通过这些通用的布局产生自己的理解和想法,然后去打破这些传统的布局,有自己的创新和突破。

左边为最常见的大框套小框的布局,整个网页首先在一个比较大的框里面,然后各个模块在大的框里面去布局分配。

这种布局的特点是有一个比较大的背景,背景是可以平铺的,然后其他的内容可以限制在一定的宽度范围内,好处就是视线比较集中。

通栏布局打破了框的限制,如图导航部分等是适应屏幕拉伸的。

如图背景可以根据屏幕无限延伸,显得比较大气。视觉上显示比较整体,整个网页上都是有内容的。

如图为导航在主视觉下方的布局的示意图,传统规则就是导航放在画面中间。

这是一种比较时尚、流行的布局方式,如图上面是体现当前页面主题的一个banner,这个banner比较重要,它的设计完全可以体现整个网页的风格,同时也起到一个装饰的作用。接下来把这个banner放在中间的位置而不是传统的上面的位置,这样就给banner这个位置留下了比较多的空间,让整个画面显得比较简洁大气。

如图为左中右布局示意图。

结合案例,如图分三栏左中右。对banner进行比较主题式的设计,如图第一张素材的选择体现了整个网页的风格。同样第二张、第三张的图片选择也是体现整个网页主题的主体部分。所以这种布局是必须有个部分体现这个主题的,其他两个部分用来布局网页的其他内容。

如图为环绕式布局的示意图。

环绕式就是页面会环绕一个比较显眼的图片装饰来进行设计。如图一,中间为图片焦点,内容部分环绕在图片焦点周围,进行布局设计。第二张、第三张也为内容环绕主题进行设计的。这种布局比较灵活,可以先选好一个主题图,然后所有元素围绕它的视觉效果去设计,整个画面的效果就会以图为中心,主题非常鲜明。

穿插式布局虽然很少看到,但效果也不错。

如图案例均属于穿插式布局,即所使用的图片素材在内容里面是一个穿插效果。整个banner穿插在网页内容里面,整个网页对称、画面感非常强。比较适合做一些专题类的网站。

真正的版面设计里面的布局时千变万化的,我们只要遵循前面讲到的用户体验要好、视觉上画面平衡,那效果就会很好。