网页设计师岗位技能

虽然现在不少公司的项目团队会将交互原型的绘制交由项目策划人员来负责，但是网页设计师也需要了解常用的原型设计软件Mockplus、Axure等的使用方法。下面介绍网页设计师岗位技能，希望可以帮助到各位。

1.设计工具

好的工匠总有自己的一套工具箱。如刚才列举的岗位描述，设计师必须会使用几个必备的设计软件。虽然现在可以在Web浏览器中设计网站，但Photoshop，Sketch，Mockplus等工具在图片处理型，图标设计，和原型设计等步骤中都是非常有帮助的工具。在恰当的阶段使用恰当的工具将使你的工作事倍功半。可别傻傻的只用一个设计软件哦~

图片处理: PS (Photoshop):

PS在平面设计和网页设计中的强大功能不需我多费唇舌了

图形处理: AI

Adobe Illustrator,简称“AI”,是一款非常好的矢量图形处理工具,主要用于字体设计、图形设计,产品包装的设计、画册/书籍/杂志的排版、插画设计等。

动效: AE

Adobe After Effects简称“AE”,是Adobe公司推出的一款图形视频处理软件,简单来说就是一个动态版的PS,功能十分强大,但是操作比较复杂。

原型交互: Mockplus，Axure

虽然现在不少公司的项目团队会将交互原型的绘制交由项目策划人员来负责，但是网页设计师也需要了解常用的原型设计软件Mockplus、Axure等的使用方法。

2. 设计感

拥有良好的设计感对于网页设计来说是非常重要的。网页设计不仅仅是外观好看，你还必须了解设计元素以及基本设计原则以及如何排版，如何使用图像，布局原则等。

3. UX

UX代表用户体验，或人们在使用网站时的感受。为此，你需要研究你的用户并创建“角色”，使用站点地图布置页面和内容，了解用户在实际网站访问中的路径。通过反复的测试，设计出具有良好用户体验的网站，以增加用户会话和转化。

例如，CTA按钮应该如何布局才能更好的吸引点击?或者如何潜移默化的引导用户操作? 这需要在原型设计阶段勾勒出每个网页的关键部分。

4.响应式设计

随着智能手机，平板电脑以及其他移动设备的增长，越来越多人使用小屏幕来查看和阅读网页信息。作为网页设计师，你应该了解响应式网页设计的原则使你的网页在小屏幕上也能保持良好的网页可读性。(12个最佳的响应式网页设计教程，轻松带你入门!)

5.平面设计

对于很多网页设计师来说，网页设计vs. 平面设计是有区别的，可比性不强。而事实上，很多网页设计师，特别是资深级的，大多都是从平面设计转到网页设计的。假如你又恰好是一个自由网页设计师，那么你的设计技能、思维将会得到更大的发挥。

6.Flash

动画能让一个生硬的网页具有灵动感。网页上适当的增加动画也许会起到点睛之笔的作用。为何不在适当的位置加上一点呢?尤其是特殊场合或根据客户网站的特殊性，例如品牌服装、汽车、影视等，动画此时就会显得格外重要。这种网站需要给浏览者以

视觉上的冲击才能表达出品牌的旨意。

1、了解网页的程序实现，作为网页设计师，当然不必跟程序员一样会书写脚本代码，但是必须要了解网页的程序实现方式，因为现在互联网90%以上的网站都是动态网页，都是需要动态程序支持的，所以在做网页设计的时候需要考虑页面动态程序的实现;

2、DIV+CSS，这是一种网页前台排版布局的技术，利用这种技术可以更好的使搜索引擎爬行网页，加速用户打开页面的速度;

3、PHOTOSHOP，这是平面设计人员常用的工具，网页设计其实也是平面设计的一种，但是因为网页设计又要必须符合网页制作的一些规范，所以又有别于平面设计了;

4、DREAMWEAVER，这是一款专业的网页制作工具，用PHOTOSHOP设计出网页平面，那只是一张平面图，而在互联网上浏览的一张张网页都是使用html网页格式语言进行格式化排版布局的，所以专业的网页设计人员是要掌握网页制作的知识的;

5、FLASH，我们经常在网页上看到一些比较炫目的动画效果，这些效果就是通过FLASH这个软件实现，作为网页设计师，不一定要能做出很酷很炫的效果，但是掌握这些动画的基本原理，会一些小动画的制作也是必要的。

随着网页开发技术的快速发展对网页设计师的要求也越来越高。除了精通专业技能，了解必要的开发语言将对你有更长远的益处。

1. HTML

可能大多数人都不认为网页设计师应该掌握HTML，但现在都2018年了，丢掉这种想法吧!不论你是不是开发者，网页开发最基本的语言HTML/CSS 你是有必要掌握的，知道如何阅读、编辑并解决问题。然而根据设计师/开发者的实际工作情况，你所需要了解的程度、范畴甚至会更广一些。在任何情况下，你都应该清楚样式、色彩要如何通过代码来进行控制和调整。从长远来看，这些技能是极其有用的。

2. CSS

CSS和HTML可以说是一对好基友，是构建网页结构和样式的基础组合。HTML决定网站的结构，CSS处理视觉外观。例如，通过CSS可以调整颜色，更改字体或添加令人惊叹的背景。

3. JavaScript

虽然你可以使用HTML和CSS编写设计代码，但如果你也可以使用JavaScript进行编程，那么你将更具有竞争力。即便网页设计师不需要学习JavaScript，但有所了解的话，在实际工作中也许会帮你解决大问题哦。另外，根据StackOverflow的一项调查，JS仍然是全栈开发人员最流行的编程语言。

4. Web服务器管理

大多数网页设计师都认为他们可以忽略服务器，但Web服务器和停机问题是不可避免的。你不需要成为后端专家，但了解Web服务器及其基本功能如何工作将有助于你更快地解决问题。

一、使用放大镜的图标

可能有一些网站在设计时希望能够展现出与众不同的一面，带给用户一些新奇的体验，所以会在很多元素的设计上做出改进。但不得不说的是，一些功能最好还是按照用户们最为熟悉的方法设计才能给用户带来良好的使用体验。诚然，放大镜的图标绝对算不上新颖，甚至可以说十分的老套，但不得不考虑的是，这恰恰是大部分用户最能接受的展现方式。放大镜图标与搜索栏的绑定关系是在多年来的互联网使用过程中养成的习惯，以至于用户在希望使用搜索栏的时候总会下意识的去寻找放大镜的图标。所以，在网站搜索栏的设计时，也应该尽量的使用放大镜图标，这样可以让用户轻松的辨认出来。同时需要注意的是，放大镜图标在设计时也应该尽量的简单明了，以此来提高图标的辨识度。

二、保证搜索栏非常显眼

无论网站的主体颜色是什么，一个白色并带有放大镜图标的搜索栏都一定会显得十分显然，并且它们经常出没于网站顶端或是右侧，这样的设计不是没有意义的，而是最大程度的保证了搜索栏的显眼。同时，占地不大的搜索栏不会在用户使用不到的时候影响他们的视线，却能够在他们需要使用时第一时间发现，这一点也非常重要，搜索栏存在的目的就是方便用户的浏览，而如果用户很难看见搜索栏在哪，那么这一个最大的特点无疑就无法发挥其作用。

三、保证每个页面都有搜索栏

大部分用户都不会喜欢每看完一个页面就要回到主页去寻找搜索栏，所以搜索栏应该尽量的充斥在网站的每一个页面中。这样可以保证用户在每一个特定页面都可以通过搜索栏跳到另一个页面，而不是点击后退按钮回到主页。这种设计也是为了方便用户的使用，能够很大程度的提升用户对于网站的好感。

四、让搜索栏位于用户习惯的位置

与搜索栏的显眼设计同理，搜索栏应该尽量的放置于用户所习惯的位置，比如顶端或者右侧。这样的设计能够保证用户在需要使用搜索栏时可以第一时间发现并使用，而不必等到他们需要使用的时候再在页面中寻找，这已经违背了搜索栏存在的初衷。

五、注意搜索栏尺寸大小的合理性

搜索栏的设计无论太大还是太小都会影响用户的使用体验。如果搜索栏的尺寸太大的话，就会遮挡内容，而如果搜索栏的设计太小，用户输入的内容很可能无法完全显示，这样十分的影响用户的使用体验。目前有很多网站的搜索栏设计过小，导致用户在使用时下意识的缩短自己想要搜索的内容，这样一来就从精确搜索变为了大范围的搜索，即使你的搜索栏可以满足用户很长的搜索关键词，但由于视觉效果，仍然会有很多用户会自主的缩短在搜索栏输入的内容，这样一来无疑让搜索栏的可用性变得很差。搜索栏是网站建设过程中一个看似非常简单的事情，但其背后仍有很多细节需要站长仔细考虑。在搜索栏的设计中，一些小的改动也可以让用户的使用体验发生很多的变化，所以在进行搜索栏的设计时，一定要保证小心谨慎。