基于Photoshop应用的网页界面设计研究

祝晓铭，王艳平

（1.山东理工大学，淄博255000；2.淄博第十七中学，淄博255033）

0 引言

Photoshop，简称“PS”，是 Adobe 公司开发的图像处理软件，具有强大的图像图形处理能力，被广泛地应用在各类平面视觉传达设计上。网页是平面设计借助电子媒介载体进行信息传达的应用扩展，是网络信息化时代用户获取信息的重要渠道，简洁高效优雅大方的网页界面设计，可以使用户产生良好的浏览体验和准确的信息传递。现在还没有完全的界面设计专用软件，Photoshop是绝大多数网页设计者的首选软件。

网页界面设计主要包括形与色这两个方面，即通常所讲的版式设计和色彩设计。设计者在进行不同种类的网页设计时，要根据网站的内容传达属性和用户目标群体进行网页界面的提前规划，制作网页设计效果图。Photoshop在网页效果图制作过程中，发挥着巨大的建设作用，是实现网站建设者和网页设计者在建站之初，对于网站功能定位和呈现形式，所做出的设计构想和执行保证。

1 网页布局

1. 1 布局的简约风格

界面设计的意义就是服务于用户，给用户带来极佳的使用体验，以功能第一为首要设计原则[1]。用户访问网页的首要目的是信息的浏览与获取，网页布局的成功与否是用户能否轻松顺畅地浏览网页和准确获取信息的先决条件。简约主义风格“少即是多”的设计理念，应用到网页界面布局上，即采用简约构成原则，对界面构成元素特别是内容信息层级进行概括提炼，科学规划网页的版块组成，形成简洁、清新、轻松、易读的界面。

1. 2 布局的构成元素

网页界面的构成元素主要包括网站Logo、导航栏、Banner、内容、链接、版权等六部分组成。其中，内容是整个网页界面中，信息传递功能发挥最为突出的重要部分，其所占网页布局位置比重的幅面最大。

现在主流PC端显示器的分辨率是1920px×1280px。设计时，要将网页界面构成元素的主体部分，在显示器有效尺寸合理范围内进行优先布局。针对不同的结构形式或多屏显示的网页界面，要注意将版权部分以外的其他构成元素，尽量在显示器第一屏尺寸空间进行优化布局，以保证用户在第一时间内即可获取网站传递的有效信息。

1. 3 Photoshop的布局操作

在Photoshop的操作上，从最初的白色背景图层，就要按照界面设计构想做好网页空间分配。首先，借助纵向辅助线对页面尺寸进行横向分割，定好左右边界，确立网页的视觉宽度；其次，根据页面构成元素间的比例轻重，借助横向辅助线对页面进行纵向分割，确定网页内容元素的位置和大小关系；再次，可以在分割范围内填充不同色相的高透明度色块进行画面拼接，形成简单的二维效果图，有助于设计者对网页界面建立相对明确的布局结构和色彩感受。

对于尺寸关系的把握上，一要注意并不是分辨率有多大，设计尺寸就要设定多大。一般情况下，还要兼顾分辨率向下层级的显示效果。根据现在显示器实际应用情况，1024px是横向最小尺寸，界面设计时宜将横向尺寸设置为1000px比较合适。纵向尺寸受传达内容多少影响较大，一般不做具体考虑；二要注意对于横向整屏或自适应的网页设计，要做好留白处理。留白空间是界面的重要组成部分，是内容意境的一种伸展，给人以呼吸和憧憬的空间，并且界面的留白可以增强主体内容的存在感[2]，使用户的浏览过程增加轻松舒适的阅读体验。

2 网页内容

文字与图片是网页界面设计中进行信息传递的主要内容，也是构成视觉传达的主体因素。在网页界面设计之中，要注重文字内容信息的整合提炼，突出主要文字的视觉焦点作用，保持信息传递的有效性；同时，也要突出图片作为“无国界信息符号”极强的视觉穿透力，保证信息传达的美观性，创造功能与艺术相融合的空间和美感。

2. 1 网页界面的形式美法则

形式美法则是人类在创造美的形式、美的过程中对美的形式规律的经验总结和抽象概括。掌握形式美的法则，能够使人们更自觉地运用形式美的法则表现美的内容，达到美的形式与美的内容高度统一[3]。网页界面设计作为一种平面艺术呈现形式，其内容构成元素应符合和遵循形式美法则，通过上下、大小、曲直、方圆、聚散、开合等形态组合，完成页面功能元素间“点、线、面”的对比调和，形成变化统一的网页界面设计风格。

2. 2 文字的信息传递主体效应

文字是情感表达和信息传递的工具，在视觉传达上已经超出了最初的语言范畴，具有了网页界面视觉元素的形式和功能。使用Photoshop进行网页界面设计时，应根据文字使用所属的功能表现，确定设计操作方案。

一方面，文字作为信息传递的主体正文时，多以文字版块的形式出现，要注重信息内容层级的归纳整理，做到字体使用的统一、规范、清晰、易读。具体到设计上，要注重使用具有扁平化风格的无衬线字体，如微软的雅黑体、等线体等；要注重文字正文字体的大小和行距，英文字体12像素、中文字体14像素、行间距24像素的设置，最为适应各年龄层次用户的浏览习惯；要注重字体使用的饱和度，正文字体不宜使用过高的色彩纯度，以减轻文字版块集中作为“面”的形式出现，带来的视觉刺激不良效应。另一方面，文字作为标题或特殊表现符号时，应该多突出其视觉传达作用，采用符合界面整体色彩效果的临近色或对比色进行使用，色相要明显、干净、饱满，以突出文字的识别记忆效果。

2. 3 图片的视觉传达优先效应

在现代的网页设计中，由于信息量的激增，人们更加愿意从图片获取所需的信息，图片能够打破文字较为呆板的视觉效果，丰富网页的视觉表现[1]。网页界面设计中的图片元素很多，根据其形态类型和使用功能，可基本分为网站Logo、Banner图片、装饰图标、网页背景等。

Banner图片在网页界面中图形元素里占有举足轻重的地位，其所处页面位置往往处于网页显示的核心，具有极强的视觉冲击效果，是用户接受网站信息传递的首要元素。现在流行趋势下，一般将Banner图片作为图像新闻专题使用，使之具备明显的图说功能。应尽量把握Banner图片个性张扬、简洁明晰的设计特点，使用户引发强力注目，产生浓厚的阅读兴趣。在Photoshop操作上，图片设计合成要根据传达内容的主题选取素材，优先确立主体图片，并围绕主体图片选取背景图形或各类装饰素材。在背景图形和主体图形的拼合上，可以对主体图形进行适度的边缘羽化操作，再辅以符合背景主色调的外发光效果，可以实现两者较为和谐统一的融合拼接。同理，对其他Banner组合图形也可进行类似处理，通过彼此间蒙版、遮罩等各项操作，使之形成主体突出、色调统一、效果丰富的视觉传达元素。

装饰图标和网页背景的处理上，要尽量应用扁平化设计的理念和操作。装饰图标的选取上，多采用具有抽象化、平面化、符号化特点的矢量图标，减少视觉污染，克服视点无序，使界面视觉传达效果更为集中和突出。网站Logo的选取和代入，应尽量采用背景透明的PNG格式，以方便后期效果制作。

3 网页色彩

色彩具有丰富的情感意义，能够引起用户不同的心理感受，设计作品中的影响在很大程度上是由使用的色彩和配色效果决定的[2]。通过对网页界面色彩的合理搭配和准确运用，能够向用户传递设计情感和美的体验。设计者要根据网站的属性定位和行业特色，确定网页界面的色调和色彩应用效果。

3. 1 网页界面色调的确立

网页色调是指整个界面外观上的大的色彩倾向，是由界面上占比最多的色彩决定的。不同网站的功能定位、行业特色以及用户年龄层次，对网页界面色调的要求也不尽相同。在Photoshop操作上，可以将网站所属视觉识别系统的标准色，优先确立为网页界面选取的主色系，尽量采用具有扁平化特点的色块来增加量感。辅助色系的选取，可以围绕主色系选取2-3种相近颜色，适度降低颜色的饱和度或明度，便于形成色调统一、主色突出的网页界面色调效果。要注重明确网页界面主体内容和页面背景之间的从属关系。

3. 2 信息版块的色彩应用

网页界面中，内容传递越为重要的信息版块，其色彩表现一定要更为突出，主要体现在色彩饱和度高、面积大、位置重等方面。在Photoshop操作上，不同版块之间的色彩关系，可以采用不同的色相加以区分，然后使用较为相同的明度和饱和度来进行色彩的调和统一；相同版块之间，可以根据传递信息的重要程度，以相同色相但明度和饱和度不同的色彩来加以区分。需要特别注意的是，Banner图形在网页界面中，占有极其重要的布局位置和面积，因此Banner的色彩一定要服从整个界面的色调统一，在使用与界面整体色调呈对比关系的图片时，可以通过增加与界面色调相对一致的文案字体或有渐变形态的图形，实现界面色彩的对比调和，营造和谐统一的视觉色彩效果。

4 结语

Photoshop在网页界面设计中发挥着重要作用，通过其强大的图像处理功能，可以产生千变万化的设计形态。要进行成功的网页界面设计，设计者在使用Photoshop的过程中，不能只局限在软件参数的调整和应对上。一定要遵循设计艺术的形式美法则，让软件功能为设计理念服务，使网页作品成为审美艺术。