蘑菇

网页设计是什么?

网页设计是平面设计的一种,但是却是和技术关系最密切的。它是技术和艺术的完美结合。如果离开了美感,大家只会想起用户图形界面早期年代,有限的显色情况下的网站,因为那时还没有网页设计的概念,网页都是由工程师进行搭建的。

有人说,网页设计就像一个容器,它把所有的平面设计有关的内容都包含进去了:排版、海报设计、LOGO设计、配图/插画设计等等(这也是为什么我一直没有写网页设计相关文章的原因,因为实在太庞大,只能是一点一滴讲起),但是我依然想尝试从自己的角度来写一系列网页设计的文章,和大家分享关于网页设计的点滴。

 

交互:平面设计的另一个维度

比起其他的平面设计,网页设计最大的特点就是交互。比如海报的设计一旦确定印刷以后,基本这个设计就定稿了。而网页设计从来没有定稿一说,因为网页的内容是不断在更新的,甚至网页的布局、元素都在不断的调整,包括用户如何与网页元素互动的动效等等这些交互的内容都在说明,网页设计需要考虑的不仅仅是某个时间点上的视觉,而是贯穿整个视觉的迭代过程,它是一连串的视觉经验,而非某一个片段。

要理解这一点其实很简单,当你看到展示出的很多优秀的网页设计的作品,可惜都没办法找到它们的链接,这就是这个网页的一个片段。没有链接,没有访问,还只是在设计师内部流传的一个视觉分享的经验,而没有办法真正进入迭代,投入使用。

 

网站:用来做什么?

网页设计必定需要代码,需要交互,需要url,就像一个人有了头、四肢、躯干,如果没有灵魂,我们会把它叫做body或者尸体,但是有了灵魂,我们就会称其为人。人来到这个世界都会有不同的任务,比如是来做设计的,就叫做设计师,那么网站也是一样,上线后的网站,就需要为其搭配一个职能,也就是它主要是用来做什么的?

按网站的职能,我们大致可以把网站划分为:博客网站、展示型网站、企业网站、商城、论坛等,而其他任何网站,其实都是在这五个网站的基础上的变形或相互的组合。但是无论什么网站:展示,是一个比较根本的目的。

根据展示所衍生出不同的用户对象,比如展示一个楼盘的信息需要放置的内容是图片、地段、面积、户型、周边生活配套等等,这就和展示一张摄影作品需要放置的信息完全不同。信息的不同就会使得网页的排版不同,所组合而成的整体风格自然也就有所差异。

而有的网站因为有了管理层级的需要,有用户注册会员这一系列的功能,比如商城、论坛等,会需要更庞杂的功能来进行管理。

 

页面:组成网站的大部件

大家知道一个网站不止一个页面,比如进入到某个商城,点击某个商城的产品分类,就会进入不同的分类下的产品列表,点击某个产品又能进入产品。可以说是层层递进,而当你看完一件商品,又能从这个商品返回到首页。

这些不同的页面就组成了网站,而这些页面略微的区分一下最简单就是首页和内页的区分。为了更好了解内页,我们又可以把内页叫做子页面,这些页面按照等级又可以划分为二级页、三级页……

首页:一般来说是重要内容的展示,有凸出品牌形象的作品 二级页:大部分情况下是各种列表页,大家可以在这些列表中看到展示的集合并且进入下一级页面 三级页:大部分情况下是详细页,就是单条项目的最完整的信息展示。

 

组件:拼图的玩法

不同的页面样式,就是利用组件来进行布局。组件是一个相对能独立出来的部分。比如在首页中,大家可以看到很多大图的轮播banner,有的会有轮播按钮,分别展示不同的图片。这就算作一个组件。这个组件可以放在页面的头部,也可以放在页面的尾部,无论组件在哪里,都不会影响页面组件的功能发挥。它们的位置不同只会产生不同的布局,形成不同的外观。

组件是页面的基本组成部分,我们可以把网页看成一个拼图,组件就是拼图的每一小块,页面最后长成什么样,就看你怎么安排你的组件的位置。比如banner一般最好的体验就是放在页头,如果你放在页尾也可以,但是不太符合用户习惯。有很多用户习惯形成的组件的经典款,这些组件之间的位置不太能有大的调整,就像一个房间基本都有客厅、厨房一样,你也可以设计一个没有客厅的房间,但是这不太符合大部分人的需求。所以这个拼图并非可以随心所欲,而是在一定的用户体验允许的范围内进行调整。

这里还要提到的一点就是组件的功能,除了发挥作为一片拼图的组成部分这一功能外,我们还有一个角度是从功能来看待它。

 

静态组件与动态组件

静态组件和动态组件是我们对组件在功能上的一个划分,什么是动态和静态的区别呢?很简单理解这一点就是针对组件的内容,就像人的身体有静脉和动脉的区别一样,它们最大的区别是什么呢?静脉的血流速度慢,动脉的血流速度很快(比如往你的动脉扎一刀,就会血流如注一样),那么动态组件和静态组件也是这样的:你的内容更新比较快的就是动态组件,内容更新慢的就是静态组件。

那这个内容更新快慢怎么理解呢?就像一个作品列表,作品在这里更新的内容肯定比你的LOGO、导航这些内容换得更快,需要不断增加,这样就可以知道作品列表、作品详细都是动态组件。相应的,比如关于页面里的内容,你要介绍自己,当然不可能每天或者每周都更新一次,也不需要有个“动态”去展示给用户,因此即使你仍然可能会更新,但是这里的内容却是相对更新比较慢的,因此我们就可以叫它作静态组件。

 

元素:组件的样式

组件是由什么构成呢?在这里我们会进一步涉及到另一个概念:元素。一个图标可以是一个元素,一个段落也可以是一个元素,元素虽小,五脏俱全,元素的不同组合就形成了不同的组件。

比如作品列表这个组件就是由图片、文字、分类标签、分页按钮所组成,当然不同的作品列表肯定展示的内容会略微的不同,可能会增加摘要或者图标等,但是从这里我们可以看到,这些图片、文字、分类标签、分页按钮就是所谓的不同的元素。

每个元素都会有不同的样式,元素的样式不同,它们所组成的组件样式也就不同。比如文字的样式可以是尺寸、字体、段落间距、位置(布局)等方面的变化,因此也就形成了不同的文字段落样式。

 

后记

综上,网站、页面、组件、元素这四个层次的关系,构成了种类多样、外观丰富的网页设计,网页设计也不再简单被看作一个大拼盘,而我们在做Pagepan这个产品的时候,就是基于这样的理念,来一层层搭建一个出一个网站。

 

原文地址:ifeiwu

作者:飞屋睿UIdesign

 

转载请注明:学UI网 » 网页设计(一):拼图游戏

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
创意网页排版设计和教程分享,打造 “视”不可挡的网页设计创意网页排版设计和教程分享,打造 “视”不可挡的网页设计
Airbnb前端工程师告诉你,如何在设计中选择正确的字体和版式Airbnb前端工程师告诉你,如何在设计中选择正确的字体和版式
表单设计的常见错误与解法表单设计的常见错误与解法
关于网格设计元素的5个创意设计理念关于网格设计元素的5个创意设计理念
8个最佳动效网页设计,告别枯燥体验!8个最佳动效网页设计,告别枯燥体验!
还在为黑白网页设计犯难?12款设计帮你轻松解决!!!还在为黑白网页设计犯难?12款设计帮你轻松解决!!!
下拉菜单设计指南下拉菜单设计指南
基于后台产品的设计思考基于后台产品的设计思考
2018年优秀动态网页设计大赏【附教程】2018年优秀动态网页设计大赏【附教程】
纯干货 . 推荐20个大气新颖灵感类网站纯干货 . 推荐20个大气新颖灵感类网站