文档章节

网页设计排版中哪些元素最重要?

jongde
 jongde
发布于 2017/09/06 18:44
字数 1701
阅读 9
收藏 0

有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上。在我看来,内容质量的好坏确实是能够决定你浏览量多少的关键因素,但事实上,页面的排版也是一门非常大的学问。俗话说“红花还需绿叶衬”,其实我觉得两者之间没有轻重之分,是相得益彰的关系。没有绿叶的陪衬,又怎能显出红花的娇贵呢?一个好的网站设计,不仅要求质量好的内容,还必须有整洁干净的页面排版,才能真正地达到良好的用户体验。

网页设计排版VS平面设计排版

网页设计中的排版和平面设计的排版有着很多相似,但又有很多不同。我认为平面设计排版是网页设计排版的基础,在一些文字、图片的排版方面,它们遵循的原则基本是相同的。但是,网页设计排版又会涉及交互性的功能还有动态的效果。所以排版的时候不仅要考虑文字图片等的静态效果,还要考虑一些动态的视觉效果。所以,这么多种元素要呈现在固定大小的页面上,要考虑的情况自然就比平面设计多得多。那么下面我们讨论一下一些在网页设计排版中设计师们注意的一些元素。

1.文字

虽然有时候可能一个页面的文字没有几个,但你可千万别小瞧文字的作用。字体的选择,字体的大小、间距以及多种字体如何自然地搭配都是决定你设计的关键因素。在同一个页面有限的文字区域内你所用到的字体样式绝对不止一种,甚至会有三四种,这是为了打破单一字体给用户带来的单调感。字体的搭配是将两种或更多字体通过合理的排版达到最佳效果的过程。对于很多初学者来说,他们觉得选择只用选择漂亮字体就够了,事实上,选择漂亮的字体并不难,如何让它们完美地搭配在一起,相得益彰,这才是应该好好下功夫的地方。

 

2.图片

图片可以说是一个网站的核心了,许多设计师都会把大量的精力放在图片设计上,因为很多用户在浏览网页的时候停留的时间不会太久,更不会花太多时间阅读你的内容。这个时候,一张好看的图片就能够快速有效地抓住用户的眼球。大家所熟知的苹果公司官网大部分都是这样的套路,直接将产品的图片呈现在大家面前,没有过多的赘述,反而会让用户觉得简洁明了。

 

3.交互

交互设计在网页设计中有着相当好的势头,那么在设计交互的时候,必定会涉及到许多的页面、组件。由于这么多的组件元素要排列在同一个页面上,要考虑的情况也就多了许多。在做交互设计之前,你必须站在用户的角度考虑,菜单导航应该在哪个地方最清晰可见?组件应该通过什么样的方式展现用户才会觉得方便?组件和组件之间要怎样排布才会不影响用户的视觉效果?这就要求网页设计师有一个流畅的原型设计过程,通过借助一些原型设计工具(AxureMockplus, Justinmind等)来设计出合理、带来良好用户体验的交互设计。

4.视频和动画

如果一个网页只有文字和图片这样静态的元素,难免少了一些生气。现如今,视频和动画的制作成本很低,网络传播性强,与社交媒体网站的兼容性好,甚至在一定程度上,视频和动画传播的有效信息比文本还要多。于是,在网页设计排版中,视频和动画也会被设计师们加入其中。但要注意的是,视频或者和动画设计在同一个版面上不能出现太多,最好一到两处就可以,否则会让用户感到眼花缭乱,甚至它们会喧宾夺主,导致顾客找不到你产品的重点。

说了这么多理论,我想给大家举三个具有代表性的优秀网页版面设计案例:

1.Webydo

Webydo本身就是一个帮助网站设计自由职业者和代理机构的网站,它拥有内置的CMS和托管,可以更快地创建网站并开展业务。我觉得它们的网页设计非常有趣,它们直接将整个页面模拟为我们常见的设计工具页面,明确地传达出了网站主题,也能够准确地吸引目标客户。

 

2.CALEO

CALEO是一部独立的男性出版物,它们的官网页面是很多设计师在实际设计中都会参考的,像这样的时尚网站,大多都会选择用许多图片作为重点,但他们很好地解决如何将它们合理排版,不会造成杂乱的视觉效果,图片之间一定的间距和图片尺寸的大小都有一定的合理规划。

 

3.Foreign Policy

我个人非常中意这个网页设计的原因是它将手绘风格完美地融入了页面设计中,小清新的配色和一目了然的导航菜单排版也是他的亮点之处。此外他们在许多细微的地方都运用了动态效果,让你在浏览时处处都有小惊喜。

 

小结:

所谓最好的设计,就是在整个网页中,你的设计浑然一体,没有突兀的地方,也没有不恰当的结合。成功的排版可以让页面的逻辑性更加明确,让用户产生良好的体验,成功地将用户引导到他们需要的信息上。虽然说设计师最主要的工作是把页面做的漂亮从而创造良好的视觉效果,但是也要关注网页的可操作性。

© 著作权归作者所有

共有 人打赏支持
jongde
粉丝 8
博文 260
码字总数 323940
作品 0
成都
文字排版中的设计四原则(三)

3.对齐 在网页设计中,页面上的元素不能随意摆放,每一项都要与页面内容存在某种联系。对齐也是网页设计必不可缺少的一部分,它可以帮助设计师做出非常吸引眼球的设计,这也是是优秀网页设计...

博为峰教研组
2016/11/11
17
0
2012网页设计趋势(上)

纯粹主义者会说,伟大的设计是永恒的。是的,在一个理想世界中,我们可以忽视趋势与流行。 但是实事求是地讲,跟踪和融入设计的趋势是很有价值的,尤其是网站方面。让我们面对现实:网络时刻...

未来十年
2011/12/25
0
0
2014年全球网站设计的15个趋势

1、超长网页设计 以往的长网页会挤满内容,我们习惯于下滑滚动网页来获取信息,但并非是挤满内容枯燥的长网页,而是由更多的留白空间以及快速响应技术合并而成的超长网页设计。这样的设计能使...

fjxichao
2015/01/15
0
0
网页文字排版(一)

一、易读性规范 1.行宽 如果一行文字过长,那么视线移动距离也会长,这样很难让人注意到段落起点和终点,阅读会比较困难;如果一行文字又过短,眼睛要不停来回看,破坏了阅读节奏。 因此我们...

博为峰教研组
2016/11/14
14
0
三大最棒的开源Web开发模板或框架

  【IT168 评论】在过去的日子里,从头开始创建一个网站变得越来越容易。了解HTML、可能还有CSS的程序员,可以用很少的精力创建一个不错的网页,然后把它放在网络服务器上,就搞定了。比如...

it168网站
2017/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
27
0
学习设计模式——观察者模式

1. 认识观察者模式 1. 定义:定义对象之间一种一对多的依赖关系,当一个对象状态发生变化时,依赖该对象的其他对象都会得到通知并进行相应的变化。 2. 组织结构: Subject:目标对象类,会被...

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部