在工作上,依据每个公司、每个部门的业务目标之不同,其工作范围及工作性质也有所不同,有可能一个人同时需负责网页设计与平面设计工作,也有可能单纯只负责其中一个工作。今天我们简单介绍一下网页设计工作与平面设计工作,让这个领域以外的朋友们,对网页设计与平面设计相同与差异之处有一个基本概念。
一、什么是网页设计 网页设计(web design/web UI design)指的是网站的前台页面美化设计,根据网站策划好的功能,和企业想要向用户展示的品牌信息、企业简介等内容进行的页面布局设计。具体包括整个网站设计风格的把控、横幅设计、栏目页设计、内页(文章、新闻、内容页面)排版等。好看的网页设计能够给浏览者留下良好的第一映像,树立企业良好的品牌形象。
二、什么是平面设计 平面设计(graphic design)的定义泛指具有艺术性和专业性,以“视觉”作为沟通和表现的方式。透过多种方式来创造和结合符号、图片和文字,借此作出用来传达想法或讯息的视觉表现。举个例子,一部电影准备上影,这时宣传部要做出几张电影海报,用于线上线下媒体宣传,于是需要设计师借助软件将广告文案、图片素材、各种元素发挥创意设计、排版成可视化的具体画面。
三、网页设计工作与平面设计工作的对比
典型的网页设计工作 | 典型的平面设计工作 | |
---|---|---|
基础概念 | 设计基础、色彩学、造形原理 | 视觉传达、创意设计、排版 |
技术 | 网页相关技术 | 印刷相关技术 |
常用软件 | Dreamweaver(网页开发)Flash(网页动画)Fireworks(网页排版)Photoshop(影像处理) | InDesign(印刷排版)Illustrator(印刷排版)CoreDraw(印刷排版)Photoshop(影像处理) |
相关专业知识 | Html标签用法前端代码(DIV+CSS)FTP资料上传SEO搜索引擎优化程序语言(php、asp.net…)服务器(Apache、IIS…) | 印刷(色票、特别色、CMYK、四色黑…)拼版书藉装订(骑马钉、胶装、线胶装…)印刷加工(镂空、上亮光、上雾光、压箔、压凹、打凸、印金、烫金、烫银、摺页、经本折…) |
图片使用 | 色彩模式:RGB图片解析度:72dpi常用图生格式:JPG, GIF, PNG | 色彩模式:CMYK图片解析度:300dpi常用图片格式:JPG, TIFF, PSD, EPS |
色彩标示 | 例:#FF6688 | 例:C:100, M:100, Y:20, K:40 |
相关重点 | 介面设计使用性设计互动设计文本设计 | 美編排版使用性设计(海报、书籍、目录…)文字设计(內容量、诉求焦点…) |
设计师心中永远的痛 | 每台显示器的颜色都不一样 | 每次印刷出來的色彩都不一样印刷:约5%色差喷图:约10~20%色差 |
字体 | 纯文字:宋体、微软雅黑将文字做成图片:不限字体 | 不限字体 |
平面设计和网页设计有什么区别?
一、视觉的呈现两个设计在色彩方面的选择都是不一样的,平面和网页的设计时用的色彩模式都是不同的,平面页设计在创意是运用的色彩在其注重视觉的冲击力及视觉流的引导,网页设计注重的是信息结构,简洁明了关系的梳理,如果将色彩运用的过重过多过强,这样会很容易引起用户浏览时的视觉疲劳感。 平面设计因为后期的实现是因为要依赖于印刷,才能展现在用户体验的视觉中,所以必须采用的是CMYK的色彩模式;而网页设计是根据其显像方式,在互联网上展示出真实的视觉,所以使用的是RGB色彩模式。 二、展现的形式平面设计的的展示方式是静止状态的,而网页设计是拥有许多动态的元素,包括按钮、表单、导航等等。 在视觉上也较为丰富,没那么死板,这样才能够引导用户有继续看下去的可能性,增加用户的互动性。 三、视觉的焦点平面设计的完整性较强,用户在一页内基本上可获得相对直观的感受。 而网页设计受制于显示屏大小,会尽可能将重要信息在第一屏内予以展示,因此完整性相对较弱。 四、排版的设计在内容传播上,平面设计仅限于纸质媒介,传播力度小,因此在内容排版上的灵活性受限于纸质印刷尺寸的大小。 而网站设计则可以灵活出现于各种电子产品载体当中,如桌面显示屏,智能手机、平板电脑等。 而且随着互联网科技的发展,自适应页面技术日趋成熟,同样的内容,在不同尺寸的浏览器下都可以获得最佳的排版效果,加强了网页内容排版的灵活性。
网页设计与平面设计的区别有哪些?
1.设计理念不同
平面设计的核心是品牌。它要以品牌为出发点去设计,要在视觉上100%体现品牌的魅力。而网页设计的核心是用户。网站的目的是与用户100%沟通,是要实现某些特定的功能,这有点像电脑中的软件。那么网页设计其实是一种UI设计,也就是所谓的界面设计,要以用户的操作习惯为出发点去设计,换句话说也就是要设计得人性化,让用户使用得更方面,长时间盯着网页看也不觉得累。这也就是为什么众多门户要用白色做为页面主色调的原因,因为白色看久了不会造成眼睛疲劳,而鲜艳的颜色看久了会眼困!
2.颜色运用不同
平面设计可以使用成千上万种颜色,换句话说可以使用所有颜色,但是网页设计不行!网页设计中规定了240种安全色,也就是说只能使用这240种颜色才能使网页更加漂亮,更加有兼容性。在色彩方面平面设计与网页设计使用的色彩模式完全不同,平面设计因为后期的实现依赖于印刷,所以采用CMYK的色彩模式,而网页根据其显像方式使用RGB的色彩模式。平面设计时的色彩运用注重视觉的冲击力及视觉流的引导(在这点上与网页设计中的BANNER设计相类似),而网页设计(产品类)更注重的是信息结构关系的梳理,如果将色彩运用的过多过强,很容易引起视觉的疲劳感。
3.设计要求不同
网页设计不仅仅是在做设计,更多的是要考虑网页的打开速度、兼容性等问题。所以有时候不得不为了照顾这些特殊的要求而牺牲美观。我们往往看到门户站的网页都是大量的文字,这其实是为了减少页面的打开时间。韩国的网站喜欢用大量的图片、FLASH,那是因为韩国的网络带宽全球第二,它有那个条件去大量的实现视觉冲击!而目前的中国不行!
4.信息传播不同
平面设计属于比较传统的信息媒介设计,一般会通过张贴、销售、邮寄派送等形式进行传播,这样传播的方式范围小且成本较高,相对而言在这方面网页设计的信息传播能力却非常的强,但依赖于第三方媒介的支持,平面设计却拥有更为广泛的受众人群,不同的年龄层对于纸张或书本的信息接受能力总是强于网络媒体的,毕竟网络信息获取的将会存在一个学习成本,在今后网络信息的不断普及以及终端媒介用户体验的不断提升,在受众人群方面在我看来差距会越来越小。
5.图形运用不同
从图形使用上,平面设计比网页设计丰富,表现方式也多样化,特别是对于产品类的网页设计,模块化的设计思路更为明显,在视觉表现上也是如此,平面对于图形的表现是不需要考虑到后期的实现的,在一点上是有目共睹的。在来说一下咱们设计时使用的尺寸单位问题,平面设计在使用尺寸标注时都用的是物理尺寸的概念,比如英寸,厘米,毫米等,而网页使用的像素。
6.文字的运用不同
我们平常在规划过程中,平面规划的字体选用更为自在一些,不用担心后期实现的问题,所有的文字结尾都会输出为图形进行打印,而网页设计就需要思考的更为全面,并且在字体的选用范围上也很小,为了让输出的制品巨细不对服务器形成压力,依据html的特性,一切字体都是依据用户操作系统内默许字体而定的,当然近年跟着技能的沿革与开展,这个距离也逐渐在减小,当前经过html5的API能够完成个性化字体的运用而不需要将个性化的字体结尾输出为图形,在不添加后端压力的一起,大大提升了用户体会,十分赞。
7.浏览方式不同
平面设计的属于渐进式的浏览方式,无法对整个浏览的过程进行多样化串联,网页设计拥有滚动条下拉、按钮链接跳转等多样化的浏览信息方式,在拥有同样一种信息架构的条件下,信息之间的串联性更为丰富,用户选择信息的自由度更大,但平面设计也自然有其优势所在,比如平时我在设计照片书这类产品的时候,就很明显的发现,这一类的产品在电脑显示器上进行翻阅,不如印刷成为一个真实的书本来翻阅感受要更好一些,并且更具有收藏及纪念意义。
8.用户体验不同
这两种设计形式拥有着不同的用户体验,我们应该根据不同设计内容,选择正确的设计形式提升用户体验,北大青鸟发现以上这些只是个人对平面与网页设计的一些粗浅认识,也作为抛砖引玉希望大家能分享出自己对于设计的想法,引用一段平面设计大师陈幼坚的一段话“做创意最重要就是定位清晰,如果定位清楚目标明确,很多创意就会自然创造出来。
平面设计和网页设计的区别
区别一:定义不同
1、平面设计,是以“视觉”作为沟通和表现的方式,透过多种方式来创造和结合符号、图片和文字,借此作出用来传达想法或讯息的视觉表现。
2、网页设计,根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。
3、UI设计,指对软件的人机交互、操作逻辑、界面美观的整体设计。
区别二:使用平台不同
1、平面设计是纸媒时代的产物,主要以平面媒体或载物进行设计,报纸、杂志、画册、海报、宣传页、书籍装帧等都是平面设计的工作。随着互联网及移动互联网的发展,浏览逐渐趋向移动端发展,平面设计的发展也受到一定的阻碍。
2、网页设计主要针对的PC端运用的设计,后来移动互联网的流行,网页开始在手机上流行起来,为保证能够多端正常显示,在HTML5和CSS3的帮助下,“响应式设计流行”,使得网页能够在任何平台都能正常显示。
3、UI设计主要针对的PC端运用的设计手机系统界面、软件界面、网站界面、游戏操作界面、智能电视界面、汽车导航界面、VR虚拟现实等都需要UI设计师。
区别三:信息量不同
1、平面设计承载的信息量是有限的。
2、网页设计或UI设计的信息承载量是无限的。
3、平面设计是无法与读者进行沟通获取用户反馈的或者二次更新的。
更多优质资源请微信扫码访问:盘姬资源网小程序
免责声明
本文仅代表作者观点,不代表本站立场,内容的真实性请自行甄别谨防上当受骗。
本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可,转载或引用本站文章应遵循相同协议。
-
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
-
本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
-
本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
-
如果有侵犯版权的资源请尽快联系站长,我们会在24h内删除有争议的资源。
站长邮箱:xm520vip@gmail.com
本文链接:https://123.775n.com/post-369.html
发表评论