环绕式插画设计-WEB网页设计常见布局

①环绕式画面。围绕一个中心旋转发散。或以环绕的方式进行图形排列的构图形式。叫做环绕式画面。

②中心对称式画面。以中心竖轴或横轴或中心点构成的对称形式的画面叫做中心对称式画面。

③对角线均衡式画面。有较强的运动感。主要形象成对角线分布的画面叫做对角线均衡式画面。

④散点均衡式画面。主题形象大小错落。或按照C形、S形等分布于画面之上。并形成一定空间透视感觉的画面。叫做散点均衡式画面。

⑤平面重复式画面。主题形象几乎没有大小区分。均匀分散或整齐排列。进而产生重复效果的画面叫做平面重复式画面。

⑥对比对称式画面。画面类似对称,但是又呈现出上下或左右的错落对比关系(即对比性差异),因此形成鲜明对比的画面,叫做对比对称式画面。

⑦均衡式画面。主要形象在画面的一角,次要的形象在对应的另一个角上,叫做均衡式画面。

⑧中心放松式画面。画面中心放松,留出大量空白,并将形象分散于中心以外的部分,使人产生遐想,这种构图叫做中心放松式画面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以WPS为例,设置图片紧密型环绕的方法如下:

1、在文档中插入一张图片。

2、选中图片后单击鼠标右键选择“其他布局选项”。

3、选择“文字环绕”后选择“紧密型”,点击确定即可。

WPSforAndroid是WPSOffice的安卓版,WPSOffice是一款办公软件套装,可以实现办公软件最常用的文字、表格、演示等多种功能。内存占用低,运行速度快,体积小巧。具有强大插件平台支持,免费提供海量在线存储空间及文档模板,支持阅读和输出PDF文件,全面兼容微软Office97-2010格式(doc/docx/xls/xlsx/ppt/pptx等)。在2013年5月17日发布了WPS2013版本,更快更稳定的V9引擎,启动速度提升25%;更方便更省心的全新交互设计,大大增强用户易用性;随意换肤的WPS,四套主题随心切换(不含25周年纪念版和扩展主题,扩展主题需另行下载,25周年纪念版已在2014年01月01日绝版);协同工作更简单,PC、Android设备无缝对接。

更多关于图片紧密型环绕怎么弄,进入:https://m.