UI网页设计师入门必备指南-送给即将毕业的你

时间：2023-10-05 21:06:02 | 来源：网站运营

时间：2023-10-05 21:06:02 来源：网站运营

UI网页设计师入门必备指南-送给即将毕业的你：大家对于网页设计的认识有多少呢？知道网页和平面的区别吗？那么学习网页又要从哪些地方学起呢？需学习哪些软件呢？如何快速成为一名网页设计师......等等。有一部分的网页设计新手会有疑惑，我就与大家聊一聊网页设计和平面设计的区别。想入门网页设计都需要掌握什么软件以及技巧。

屏幕显示视觉传达动态 传统纸类视觉传达设计

设计+技术的呈现方式 设计+工艺的呈现方式

两个同样是视觉传达的设计但是之间的差异性在于

网页和平面印刷使用色彩模式完全不同， 平面后期实现依赖于印刷，所以采用CMYK的色彩模式；而网页设计根据屏幕显像方式使用RGB格式 。有一些平面设计师用习惯了CMYK 模式，但当用CMYK去做banner或者是网页的时候颜色色差很大。无论是CMYK模式还是RGB模式，同样是为了设计而服务，只要根据设计的需求遵循色彩模式标准就可以了，这也算是在入门网页设计的时候最基础的知识。

在平面设计中会涉及到一些印刷品设计。比如展架、喷绘布、宣传手册、LOGO设计、DM单、折页、臂贴、地贴、角旗、车贴、海报、等等，一般根据设计需求而设定像素，不同尺寸的平面设计设置不同的分辨率。

例一：

设计一个喷绘布，10M长5M宽，那么根据自己的电脑硬件来考虑设置分辨率，一般会选择 30像素、 45像素、 50像素，如果你电脑硬件条件很好则尝试72像素也行，（但是那么大的喷绘布好像很少有用这么高的像素）

当然了设计设置分辨率也不是很绝对的，还要根据情况而定，但是有一个要记住就是：画面越大分辨率的值就相对于越低,画面越小分辨率的值就要相对于越高。

随着互联网的发展、网页设计、UI设计也热门起来、首先是PC/移动端,其中包含了专题设计、栏目设计、门户设计、电商设计、详情页设计、banner广告设计、H5设计、APP设计,无论是其中的哪种设计设置72像素即可、这是因为最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72,PS中把图像DPI也设成72，便于设计。之后72像素显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

平面设计中设计海报、展架、画册等都有统一的尺寸规则，网页设计尺寸随着不同时期的流行趋势，尺寸也同样在变化。可视区域内从早期的网页680像素、800像素、960像素、 980像素、1000像素、1200像素在门户网站、专题设计中应用。经过了互联网的发展、网页设计尺寸也有所不同、电商网站为了展示更好、更大的图片产品内容、在设计的时候可视范围设置成1200、1090、1230等甚至更大尺寸、追求设计扁平化、全屏设计、大背景图设计也是个主流的方式、响应式网站也同样热门于网页设计当中、通栏整洁设计、让用户有更好的用户体验、在各个终端演示观看都是一个出彩的效果、还有滚动式、滚动视觉差形式、多种方式同样展示出最终效果、设计形式根据时期趋势追求大图、大视频、大背景设计手法、更让浏览者有更好的视觉体验。

从版式的布局上来说，平面设计和网页设计有很多可以互用的表达手法。左右布局、上下布局、中心布局、对称布局为最常规的设计版式、排版多样化，最终呈现的效果根据自己的感觉来进行设计。但是很重要的一点，就是在网页设计中一定要模块化，就算是不规则的排版方式，也要做到有理有据。

无论是平面设计也好,网页设计也罢，在字体应用上需要注意如下几点：

1.文字适合性，根据标题主题选择，字体样式。


2. 可识别性、在文字设计应用设计同时要注重文字的识别性、一定要让


浏览者在不失美观的程度下有更好的阅读主题。


3.文字的美观程度、在运用字体的时候一定要字体具有一定的美观度。


整体的效果也会有提升


4.文字个性化一般都运用在头图或一些大标题上、具有一些文字图形上的变化、虽然变化但是一定要在保持识别性的情况下去做文字图形的修改、文字不只是图形装饰，也是一种文字图形的一种表达方式。


5.在网页内容正文中一般文字选择性都很小，在正文中，为了让输出的成品大小不对服务器造成压力，一般正文文字都不建议用图片演示、基本是手打字、基于HTML的特性，字体都根据用户操作系统默认字体而定。


平面设计一般会通过纸质进行宣传，这样宣传范围小、具有局限性且成本较高，相比而言网页的信息传达能力非常强，互联网的科技发展使得大家从网络平台上获取更多的信息，而网页大家对于视觉上的享受也有所要求，之前大家对网页是以视觉的而看重，而近几年大家可能更加看重用户体验。从比较写实、厚重的页面到现在简约、大气、扁平化、更让人利于操作、更带来视觉享受。在用户体验的前提下还要注重用户的交互功能的实现，网页界面不仅能融入绚丽HTML5动态交互效果还能插入视频，这是平面不能体现的。

从事设计专业的人，大多数都有过绘画的基础，比如：手绘、素描、水粉、速写等，这些都可以帮助设计师提高色彩能力、审美能力、造型能力。把这些学习的运用在设计当中同时也学习理论的平面构成、色彩构成、立体构成，等一些技法，都是对设计有所帮助。

那么在这些能力具备的前提下就是软件操作的技能，在网页设计当中、软件操作要精通的有：Photoshop 、Illustrator等、这两个是必须要掌握的软件，现在对用户体验的不同需求，在设计技术上也不同的升级，FLASH在网页设计中已经不是很重要的地位。但在动效H5中FLASH软件的升级版AN在动效效果上起到了很重要的角色。

除此之外，还有更多技术运用在网页设计中，如：3D技术、AE技术、C4D技术、插画技法等，更加满足现在的视觉需求，让网页上的视觉更加具有冲击力，更加的有交互性。

AE技术(图片来自于网络)

软件操作性都熟练之后，UI图标、网页设计、H5设计等 多练习、多看、多临摹。从临摹过程中提取出一些经验，如何用的排版、留白、版式、字体、颜色、字号、等。

另外，如时间允许也可以学习一下Dreamweaver软件，或者学习HTML丰富一下知识储备。

Dreamweaver软件的功能、操作性。然后在学习HTML，了解一些基础的标签，比如<h1>-<h6>,<P>、<a>标签等。至少知道这些标签是起到什么作用。

接着了解一下DIv+CSS样式表。比如：类选择器、ID选择器、相对定位、绝对定位。边框、内边、外边等、给网页增加一些版式样式。除此之外如果有精力还可以学习一下javas cript。从而可以实现更好的网页交互性。

习一定要有一个路径、循序渐进、通过系统的学习，相信你一定能成为一个优秀的设计师。




文章来源公众号：顺叔聊设计