响应式网站的排版与布局

来源:EIdea编辑:niubei浏览量:1371
  网站的设计是一个技术活,特别是响应式网站的排版与布局等更不是一般的工程师所能做好的,它的排版要遵循简约又好看的原则,要求设计师有精准的把控能力和独特的元素搭配能力,那么如果最初要建立一个响应式网站应该具体要怎么做呢?


  首先,整体的框架构成不应太过于复杂,应该以简单为主。一般我们网站上的内容都是文字与图片为主,因此,响应式网站也不例外。在确定了基调之后,就是设计文字与图片的具体排版了。按人们的一般习惯,网站左边一般放一些文字或者其他东西,比如说产品链接等,而右边就只放图片,这样就很符合人们在网上的浏览习惯了。这样的最简便也是最经典的布局,显得异常的清晰,使人第一眼看上去就非常的舒服。

  其次,由于在生活中,大部分人都喜欢一些能直接引起自己兴趣的事物,其中以色彩鲜艳的图片为主要。因此,在响应式网站的首页,应该尽可能多的添加一些图片,文字尽量少一些,以免引起用户阅读上的不适,从而有了很多的反抗心理。视觉上的刺激总是能给人印象深刻,但是又不是完全没有文字,只是说文字尽可能的做为图片的点缀,而且整个网站的背景色不应该过于鲜艳,免得盖住了产品和布局图片的"风采",导致主次不分,背景色以黑色、白色、灰色等暗色调为主,错开布局。



  然后,说完了响应式网站整体的设计,再来说一说侧边栏的布局。侧边栏不同于网站首页,虽然它也属于响应式网站的一部分,但是它有更加精细的要求。侧边栏内容的设置也是主要以图片和文字为主,但是在这里,两者所占的比重是一样的,一般一个产品会分一个版块,版块的上半部分为图片,其细节要做得更加详细一点,下部分为介绍文字,仔细的说明产品的用途、特色等等。这样的布局就显得很专业,由于侧边栏的一些内容都是相差不多的信息,这样的设计会让用户感到很舒服,对于自己所需要的信息也能快速的找到。

  第四,当你做完了以上的事情后,你会发现响应式网站的整体架构已经完成了,而且所有的图片和文字排布的非常合理,但是如果仅仅是这样的话还很不够,有时候你需要一些额外的信息呈现在网站上,然而如果再在网站首页增加内容的话,会显得首页十分拥挤,很不美观。因此,这个时候你可以增加一项功能,那就是CAT按钮,这个的功能就是相当于一个"链接",这个"链接"占的空间不大,然后用户看到了之后,只要点击一下,就能跳转到关于产品的更加详细的信息,因此,增加一个CAT,既可以节省空间,也能让网站更加的丰富。


  最后,关于网站的整体背景图片。这个背景的选择是很重要的,它能第一时间吸引到用户的眼光。应该选择一些与网站整体色调相差很大的颜色,而且要异常的清晰,这样差异化比较大的图片,会让用户感到很有新鲜感,同时整体网站的布局简约,散发出一种别的网站所没有的韵味,让人不自禁的就想更多的了解这个网站。选好背景图片之后,应该将这个图片的亮度调低,否则就会影响到首页图片的呈现,同时在网站底部的部分内容,不要一字排开,应该要一高一低的呈现,这样会更加的有层次感。

  以上就是响应式网站的具体排版方式了。

响应式案例欣赏

BVLGARI香水

化妆品H5创意设计品牌官网

奇柯集团

集团企业官网设计

韦格斯杨

创意型企业官网设计