网页 设计 专业技能介绍

虽然现在不少公司的项目团队会将交互原型的绘制交由项目策划人员来负责，但是网页设计师也需要了解常用的原型设计软件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)内源性眼跳由浏览者自身因素引起，是个体主动发起的，比如个体本身对某些信息感兴趣或者个体在指导语的提示下，主动进行的眼跳，它主要与返回抑制与眼运动记忆相关联。外源性眼跳则是主要与刺激物的基本特征有关，在研究者对引起眼跳的外源性刺激的研究中，从颜色特征到后来的方向、运动、大小、亮度、形状等目标特征，都会引起较大的眼跳，影响视觉搜索的效果。所有这些目标特征中，颜色特征的影响最大。国内有关研究还发现，在注视时间方面，注视时间由短到长依次是图画、中文词、英文词;在反应时方面，人的反应时从短到长依次为图画、英文词、中文词;在眼跳距离方面，眼跳距离从小到大依次是中文、英文、图画。有学者对分栏设计的视觉搜索效率的眼动研究发现，1大开本(1/16开本)设计材料在跳距离、行内与行间回视次数在阅读理解指标上均显著优于小开本(1/32开本)材料一栏、二栏、三栏设计材料，表现为一栏最优。在进行具体的网页设计时，如果设计的目的倾向于引起读者的注意，那么首选图片和动画，颜色可以选择鲜艳的能与周围信息区分开的;如果倾向于信息的获取或理解，应该首选文字，其次是图片或视频，最好不要选择过多的颜色，会增大眼跳，不利于信息的获取和理解。此外，和网页屏幕上呈现的网页材料相比，人们接触最多的文本材料更容易引起人的眼疲劳。因此，在有大量文本信息的网页设计中，为了减少被测试者的疲劳，可以采用大开本的一栏设计以方便浏览者的视觉搜索和理解。

(2)在网页设计中，重要信息和目标信息是需要引起用户较多关注的。基于相似性的规律，可以尽量减少重点信息和非重点信息;基于目标信息和干扰信息之间的相似性，可以增加重要信息或目标信息的新颖性、诱目性、独特性，且背景信息尽量简洁，减少干扰，以使重要信息和目标信息从背景信息群中“脱颖而出”，以此吸引浏览者的注意，提高他们的搜索效率;在文字与背景颜色选择上，最好设置为深色文字，浅色背景;在超链接颜色选择上，最好选用不同的颜色来区分已访问和未被访问的链接，这样有利于用户将两者区分开来进而搜索还没有浏览的超链接，而忽略已经访问的超链接。

(3)有学者研究发现，形状加工和颜色加工存在中央凹和边缘视野的分离。视觉的注意选择中存在这种空间位置效应，注意资源的分配也存在位置效应，当刺激呈现在中央凹视角时，被测试者对任务的反应时较刺激呈现边缘视角时的反应时变大。据此可以将文字信息置于网页中心位置，颜色图形等信息置于网页的边缘位置。

(4)视觉刺激效应告诉我们，旨在让用户从网站中搜索或获取信息(例如一些新闻类门户网站)，设计者应避免那些会引起强烈刺激的视觉呈现方式，或者过多的信息呈现也会影响用户的信息搜索能力。如果旨在让用户获得信息，最好不要添加一些动态图片、动态文字等动态效果强烈而很容易干扰用户注意力的信息元素，这会干扰用户对文字信息的搜索。

(5)文章通过眼动实验对于Web页面视觉信息搜索行为的研究发现，人们在网页上进行视觉信息搜索时，更多地注视周边区域，而对于中心区域的注视较少，呈现视觉搜索的周边特性。而且，在带有浮动广告的网页上进行视觉信息搜索时，同样呈现视觉搜索周边特性。实验结果表明，从视觉搜索角度来看，在网页设计时，对于具有超级链接性质的标题信息，放置在网页的周边区域比放置在网页中心区域更利于人们的视觉搜索行为。而且，在视觉信息搜索时，人们很少去看浮动广告，说明浮动广告的广告效应并不明显，应该改变其广告形式。

传统文化网页设计编排重点是什么

一、中国元素的穿插

中国传统的吉祥纹样、民俗装饰图案、剪纸艺术、印章、水墨等艺术形式，都是被广泛认同的中国元素，是中国传统文化和艺术情感的深切体现。在网页编排中，创意性地运用中国元素，更易表现地域文化的特色，这也是网页风格定位的重要手段。如在“中国?乌镇”的网站设计中(图1)，网站的首页以水墨透叠的方式体现出一个江南古镇的风貌，书法体的网站名称、纵向书写的古文字式衬底、左下角的印章，使得整个页面犹如一幅古典的风景画，饱含东方意味。在点击链接的各个页面里，雕花的廊檐、黛瓦粉墙、石板小巷、小桥流水以及那导航栏上的传统纹样，无一不透着浓郁的历史和文化气息。

二、标准色的运用

色彩是形成网站气氛、特色的重要元素，是网站视觉形象的体现和延伸。将网站的LOGO、主菜单、底色等用整体统一的标准色，其他颜色只作为衬托点缀，形成主色调。这样既利于网站主题的突出，又便于浏览者识别记忆。红色是中国传统吉祥、喜庆的民族色彩，素有“中国红”一说，而泛黄的纸色则具有历史悠久感和文化的书卷味。此外，青色、暗红色等也都多用于中国风的网页中。“渔”女装网站(图2)，运用大面积的红色作为网页底色，这种浓郁的东方色彩，树立了“渔”的与众不同的品牌特色，网页中左右侧边的装饰图案，体现了时尚与经典结合的文化内涵。主菜单和链接的自由又另类的编排方式，随意、时尚、现代感极强。传统色彩与现代元素相互交融，强调了传统与现代的碰撞，使品牌更具个性和渗透力。

三、对称的构图方式

对称美在中国传统美学中占有重要地位，中国古代的建筑格局、家居摆设、装饰图形等都广泛的运用此设计理念。中国风网页设计在图文编排上整体也多为左右对称结构，局部较为自由，视觉上庄重平衡，排列有序。打开“故宫博物院”网站(图3)，整个页面就像一幅悬挂的卷轴，鼠标的滚动如同使卷轴缓缓打开，世界上最大的历史文化艺术博物馆由此展现。网页的布局左右对称，庄重整齐。金色、浅黄、暗红的色调有着皇家的气派和悠久的历史气息。

四、留白的手法

网页中编排的内容部分是实体，而实体之外的空间就是留白，它既可以是未放置任何图形文字的空间，也可以是实体背后的一种颜色或图形。在中国画中，留白是一种十分重要的绘画技巧，讲求“密不透风，疏可跑马”。留白能更好地衬托主题，使人产生丰富的遐想。网页设计中的留白使页面有透气的空间，其设计风格清新流畅、主次分明。相比较信息量很大的网页，留白会让浏览者的阅读舒适、放松，能达到更好的传播效果。“渔”女装网站的各个页面都大量留白，视觉空间自由、灵动，疏密对比强烈、主题突出，整体风格高雅精致、形式感强。

如今，文化作为设计灵感的来源，越来越显示出其强大的生命力和独特的艺术价值。中国风网页就是将其独有的传统美学精神融入到现代设计的理念中去，引导网站整体风格和文化氛围，使浏览者充分感受到中国传统文化的艺术魅力。

在网页设计中Flash的动态图像应用

1、娱乐性的Flash动态图像应用

网页设计中根据网站的设计需求和目的，对于娱乐、宣传性为主的网站或是其他类型的网站都会多多少少应用娱乐、宣传性质的Flash动画，使其达到像多媒体一样具有丰富文字、音效、音乐、图片美术等多种元素的效果，极大程度地增强了网页设计的娱乐、公益宣传价值。网页设计的任何动态图像都需要运用摄像的技巧，综合考虑和控制图像的光线、声音、画面、色彩、整体场景、图像比例及营造气氛这些元素，能够尽可能的达到这些因素的是Flash，同时Flash形成的动态图像也能够影响和支配浏览者和用户的喜怒爱乐等情绪。

2、广告收益性的Flash动态图像应用

起初在我国网站的网页设计的广告85%是GIF格式简易动画效果，我国早期网页设计中Flash动态图像的应用并不是像如今如此普遍和广泛。随着不断的发展，如今的以广告角度的Flash动态图像的网页设计是日益更新，并且表达的广告创意新、潜力深，极大地吸引浏览者的关注度。因为当今win-dows98以上的系统程序已经可以无需下载Flash播放软件，就直接看得到Flash制作的动态图像广告，而且这样获得的利益是非常可观的，我国91%的网站都采取了Flash动态图像的网络网页广告。现在各大网站，如新浪网、搜狐网等网页的Flash动态图像广告数不胜数，甚至现在流行的微博，就像姚晨的微博，点击率极高，其微博也都是使用Flash的动态图像使得微博的整体网页效果达到个性、自我、时尚主题。

3、休闲性、单机型游戏的Flash动态图像应用

如今，Flash动态图像通过交互式接口方式实现了交互式动态图像能够结合声音、文字、视频影像、图像美术、音效等整合在一个整体媒体环境，并能够多渠道的进行交流，使得休闲性、单机型游戏受到更多上班族、女生们的喜欢，创造出了Flash游戏的多沟通管道回馈功能，进而促进网络网页游戏的互动性、有趣性。受到更多网民们的追逐，也使得网页设计中加入了更多小型的、休闲的、单机型的Flash游戏。事实上，Flash游戏开发持续了多年的尝试，游戏的功能和管理还是存在一定的限制，但是随着FlashPlayer7的运行性能提高了非常多(2倍变成5倍)，这些将会带动Flash的动态图像开发的游戏发展到另一个高水平、高品质、高效率发展，创造着越来越多的游戏，满足现在网民们的需求。

4、网站首页开头的Flash动态图像应用

现在，当我们进入任何一个网站时常常会先出现一段动态图像来表达和展示网页或网站的主题及中心，短短的几秒炫目的、个性的动画并伴随着音乐的播放，把主要的内容通过简单的文字和直观的动态图像清楚的展示在浏览者和用户的眼前，帮助用户更好的理解和进入网站的情绪中，并融入网页情景。这一段Flash动画可以说是网站的欢迎页面。但是网页开头的动画一般会经常使用在企业形象或是个人个性、时尚网页或是个人博客及微博中，不适用于如今的商务网站。由于此段Flash动态图像能够展现企业整体精神和设计风格，而且这样产生的成本低、效果好，因此网页设计师、企业都普遍接受而且喜欢这种表现形式，能够产生深刻的印象。

5、网页导航栏的Flash动态图像应用

Flash具有时间分段处理和重组元素等技术，适当的结合ActionScitp的对象控制功能，能够使得多媒体设计形成动态的、强劲的、小巧的平台。特别是网页的导航栏能够让浏览者很有兴趣去接受和点击，进而促进网站的点击率，形成电子商务市场，进而是网页设计产生“质”的飞跃，增加美感、动感。网站会用个性化、时尚的导航栏来吸引浏览者和用户的关注度。