基于Photoshop應(yīng)用的網(wǎng)頁界面設(shè)計(jì)研究

祝曉銘，王艷平

（1.山東理工大學(xué)，淄博255000；2.淄博第十七中學(xué)，淄博255033）

0 引言

Photoshop，簡稱“PS”，是 Adobe 公司開發(fā)的圖像處理軟件，具有強(qiáng)大的圖像圖形處理能力，被廣泛地應(yīng)用在各類平面視覺傳達(dá)設(shè)計(jì)上。網(wǎng)頁是平面設(shè)計(jì)借助電子媒介載體進(jìn)行信息傳達(dá)的應(yīng)用擴(kuò)展，是網(wǎng)絡(luò)信息化時(shí)代用戶獲取信息的重要渠道，簡潔高效優(yōu)雅大方的網(wǎng)頁界面設(shè)計(jì)，可以使用戶產(chǎn)生良好的瀏覽體驗(yàn)和準(zhǔn)確的信息傳遞?，F(xiàn)在還沒有完全的界面設(shè)計(jì)專用軟件，Photoshop是絕大多數(shù)網(wǎng)頁設(shè)計(jì)者的首選軟件。

網(wǎng)頁界面設(shè)計(jì)主要包括形與色這兩個(gè)方面，即通常所講的版式設(shè)計(jì)和色彩設(shè)計(jì)。設(shè)計(jì)者在進(jìn)行不同種類的網(wǎng)頁設(shè)計(jì)時(shí)，要根據(jù)網(wǎng)站的內(nèi)容傳達(dá)屬性和用戶目標(biāo)群體進(jìn)行網(wǎng)頁界面的提前規(guī)劃，制作網(wǎng)頁設(shè)計(jì)效果圖。Photoshop在網(wǎng)頁效果圖制作過程中，發(fā)揮著巨大的建設(shè)作用，是實(shí)現(xiàn)網(wǎng)站建設(shè)者和網(wǎng)頁設(shè)計(jì)者在建站之初，對(duì)于網(wǎng)站功能定位和呈現(xiàn)形式，所做出的設(shè)計(jì)構(gòu)想和執(zhí)行保證。

1 網(wǎng)頁布局

1. 1 布局的簡約風(fēng)格

界面設(shè)計(jì)的意義就是服務(wù)于用戶，給用戶帶來極佳的使用體驗(yàn)，以功能第一為首要設(shè)計(jì)原則[1]。用戶訪問網(wǎng)頁的首要目的是信息的瀏覽與獲取，網(wǎng)頁布局的成功與否是用戶能否輕松順暢地瀏覽網(wǎng)頁和準(zhǔn)確獲取信息的先決條件。簡約主義風(fēng)格“少即是多”的設(shè)計(jì)理念，應(yīng)用到網(wǎng)頁界面布局上，即采用簡約構(gòu)成原則，對(duì)界面構(gòu)成元素特別是內(nèi)容信息層級(jí)進(jìn)行概括提煉，科學(xué)規(guī)劃網(wǎng)頁的版塊組成，形成簡潔、清新、輕松、易讀的界面。

1. 2 布局的構(gòu)成元素

網(wǎng)頁界面的構(gòu)成元素主要包括網(wǎng)站Logo、導(dǎo)航欄、Banner、內(nèi)容、鏈接、版權(quán)等六部分組成。其中，內(nèi)容是整個(gè)網(wǎng)頁界面中，信息傳遞功能發(fā)揮最為突出的重要部分，其所占網(wǎng)頁布局位置比重的幅面最大。

現(xiàn)在主流PC端顯示器的分辨率是1920px×1280px。設(shè)計(jì)時(shí)，要將網(wǎng)頁界面構(gòu)成元素的主體部分，在顯示器有效尺寸合理范圍內(nèi)進(jìn)行優(yōu)先布局。針對(duì)不同的結(jié)構(gòu)形式或多屏顯示的網(wǎng)頁界面，要注意將版權(quán)部分以外的其他構(gòu)成元素，盡量在顯示器第一屏尺寸空間進(jìn)行優(yōu)化布局，以保證用戶在第一時(shí)間內(nèi)即可獲取網(wǎng)站傳遞的有效信息。

1. 3 Photoshop的布局操作

在Photoshop的操作上，從最初的白色背景圖層，就要按照界面設(shè)計(jì)構(gòu)想做好網(wǎng)頁空間分配。首先，借助縱向輔助線對(duì)頁面尺寸進(jìn)行橫向分割，定好左右邊界，確立網(wǎng)頁的視覺寬度；其次，根據(jù)頁面構(gòu)成元素間的比例輕重，借助橫向輔助線對(duì)頁面進(jìn)行縱向分割，確定網(wǎng)頁內(nèi)容元素的位置和大小關(guān)系；再次，可以在分割范圍內(nèi)填充不同色相的高透明度色塊進(jìn)行畫面拼接，形成簡單的二維效果圖，有助于設(shè)計(jì)者對(duì)網(wǎng)頁界面建立相對(duì)明確的布局結(jié)構(gòu)和色彩感受。

對(duì)于尺寸關(guān)系的把握上，一要注意并不是分辨率有多大，設(shè)計(jì)尺寸就要設(shè)定多大。一般情況下，還要兼顧分辨率向下層級(jí)的顯示效果。根據(jù)現(xiàn)在顯示器實(shí)際應(yīng)用情況，1024px是橫向最小尺寸，界面設(shè)計(jì)時(shí)宜將橫向尺寸設(shè)置為1000px比較合適。縱向尺寸受傳達(dá)內(nèi)容多少影響較大，一般不做具體考慮；二要注意對(duì)于橫向整屏或自適應(yīng)的網(wǎng)頁設(shè)計(jì)，要做好留白處理。留白空間是界面的重要組成部分，是內(nèi)容意境的一種伸展，給人以呼吸和憧憬的空間，并且界面的留白可以增強(qiáng)主體內(nèi)容的存在感[2]，使用戶的瀏覽過程增加輕松舒適的閱讀體驗(yàn)。

2 網(wǎng)頁內(nèi)容

文字與圖片是網(wǎng)頁界面設(shè)計(jì)中進(jìn)行信息傳遞的主要內(nèi)容，也是構(gòu)成視覺傳達(dá)的主體因素。在網(wǎng)頁界面設(shè)計(jì)之中，要注重文字內(nèi)容信息的整合提煉，突出主要文字的視覺焦點(diǎn)作用，保持信息傳遞的有效性；同時(shí)，也要突出圖片作為“無國界信息符號(hào)”極強(qiáng)的視覺穿透力，保證信息傳達(dá)的美觀性，創(chuàng)造功能與藝術(shù)相融合的空間和美感。

2. 1 網(wǎng)頁界面的形式美法則

形式美法則是人類在創(chuàng)造美的形式、美的過程中對(duì)美的形式規(guī)律的經(jīng)驗(yàn)總結(jié)和抽象概括。掌握形式美的法則，能夠使人們更自覺地運(yùn)用形式美的法則表現(xiàn)美的內(nèi)容，達(dá)到美的形式與美的內(nèi)容高度統(tǒng)一[3]。網(wǎng)頁界面設(shè)計(jì)作為一種平面藝術(shù)呈現(xiàn)形式，其內(nèi)容構(gòu)成元素應(yīng)符合和遵循形式美法則，通過上下、大小、曲直、方圓、聚散、開合等形態(tài)組合，完成頁面功能元素間“點(diǎn)、線、面”的對(duì)比調(diào)和，形成變化統(tǒng)一的網(wǎng)頁界面設(shè)計(jì)風(fēng)格。

2. 2 文字的信息傳遞主體效應(yīng)

文字是情感表達(dá)和信息傳遞的工具，在視覺傳達(dá)上已經(jīng)超出了最初的語言范疇，具有了網(wǎng)頁界面視覺元素的形式和功能。使用Photoshop進(jìn)行網(wǎng)頁界面設(shè)計(jì)時(shí)，應(yīng)根據(jù)文字使用所屬的功能表現(xiàn)，確定設(shè)計(jì)操作方案。

一方面，文字作為信息傳遞的主體正文時(shí)，多以文字版塊的形式出現(xiàn)，要注重信息內(nèi)容層級(jí)的歸納整理，做到字體使用的統(tǒng)一、規(guī)范、清晰、易讀。具體到設(shè)計(jì)上，要注重使用具有扁平化風(fēng)格的無襯線字體，如微軟的雅黑體、等線體等；要注重文字正文字體的大小和行距，英文字體12像素、中文字體14像素、行間距24像素的設(shè)置，最為適應(yīng)各年齡層次用戶的瀏覽習(xí)慣；要注重字體使用的飽和度，正文字體不宜使用過高的色彩純度，以減輕文字版塊集中作為“面”的形式出現(xiàn)，帶來的視覺刺激不良效應(yīng)。另一方面，文字作為標(biāo)題或特殊表現(xiàn)符號(hào)時(shí)，應(yīng)該多突出其視覺傳達(dá)作用，采用符合界面整體色彩效果的臨近色或?qū)Ρ壬M(jìn)行使用，色相要明顯、干凈、飽滿，以突出文字的識(shí)別記憶效果。

2. 3 圖片的視覺傳達(dá)優(yōu)先效應(yīng)

在現(xiàn)代的網(wǎng)頁設(shè)計(jì)中，由于信息量的激增，人們更加愿意從圖片獲取所需的信息，圖片能夠打破文字較為呆板的視覺效果，豐富網(wǎng)頁的視覺表現(xiàn)[1]。網(wǎng)頁界面設(shè)計(jì)中的圖片元素很多，根據(jù)其形態(tài)類型和使用功能，可基本分為網(wǎng)站Logo、Banner圖片、裝飾圖標(biāo)、網(wǎng)頁背景等。

Banner圖片在網(wǎng)頁界面中圖形元素里占有舉足輕重的地位，其所處頁面位置往往處于網(wǎng)頁顯示的核心，具有極強(qiáng)的視覺沖擊效果，是用戶接受網(wǎng)站信息傳遞的首要元素。現(xiàn)在流行趨勢下，一般將Banner圖片作為圖像新聞專題使用，使之具備明顯的圖說功能。應(yīng)盡量把握Banner圖片個(gè)性張揚(yáng)、簡潔明晰的設(shè)計(jì)特點(diǎn)，使用戶引發(fā)強(qiáng)力注目，產(chǎn)生濃厚的閱讀興趣。在Photoshop操作上，圖片設(shè)計(jì)合成要根據(jù)傳達(dá)內(nèi)容的主題選取素材，優(yōu)先確立主體圖片，并圍繞主體圖片選取背景圖形或各類裝飾素材。在背景圖形和主體圖形的拼合上，可以對(duì)主體圖形進(jìn)行適度的邊緣羽化操作，再輔以符合背景主色調(diào)的外發(fā)光效果，可以實(shí)現(xiàn)兩者較為和諧統(tǒng)一的融合拼接。同理，對(duì)其他Banner組合圖形也可進(jìn)行類似處理，通過彼此間蒙版、遮罩等各項(xiàng)操作，使之形成主體突出、色調(diào)統(tǒng)一、效果豐富的視覺傳達(dá)元素。

裝飾圖標(biāo)和網(wǎng)頁背景的處理上，要盡量應(yīng)用扁平化設(shè)計(jì)的理念和操作。裝飾圖標(biāo)的選取上，多采用具有抽象化、平面化、符號(hào)化特點(diǎn)的矢量圖標(biāo)，減少視覺污染，克服視點(diǎn)無序，使界面視覺傳達(dá)效果更為集中和突出。網(wǎng)站Logo的選取和代入，應(yīng)盡量采用背景透明的PNG格式，以方便后期效果制作。

3 網(wǎng)頁色彩

色彩具有豐富的情感意義，能夠引起用戶不同的心理感受，設(shè)計(jì)作品中的影響在很大程度上是由使用的色彩和配色效果決定的[2]。通過對(duì)網(wǎng)頁界面色彩的合理搭配和準(zhǔn)確運(yùn)用，能夠向用戶傳遞設(shè)計(jì)情感和美的體驗(yàn)。設(shè)計(jì)者要根據(jù)網(wǎng)站的屬性定位和行業(yè)特色，確定網(wǎng)頁界面的色調(diào)和色彩應(yīng)用效果。

3. 1 網(wǎng)頁界面色調(diào)的確立

網(wǎng)頁色調(diào)是指整個(gè)界面外觀上的大的色彩傾向，是由界面上占比最多的色彩決定的。不同網(wǎng)站的功能定位、行業(yè)特色以及用戶年齡層次，對(duì)網(wǎng)頁界面色調(diào)的要求也不盡相同。在Photoshop操作上，可以將網(wǎng)站所屬視覺識(shí)別系統(tǒng)的標(biāo)準(zhǔn)色，優(yōu)先確立為網(wǎng)頁界面選取的主色系，盡量采用具有扁平化特點(diǎn)的色塊來增加量感。輔助色系的選取，可以圍繞主色系選取2-3種相近顏色，適度降低顏色的飽和度或明度，便于形成色調(diào)統(tǒng)一、主色突出的網(wǎng)頁界面色調(diào)效果。要注重明確網(wǎng)頁界面主體內(nèi)容和頁面背景之間的從屬關(guān)系。

3. 2 信息版塊的色彩應(yīng)用

網(wǎng)頁界面中，內(nèi)容傳遞越為重要的信息版塊，其色彩表現(xiàn)一定要更為突出，主要體現(xiàn)在色彩飽和度高、面積大、位置重等方面。在Photoshop操作上，不同版塊之間的色彩關(guān)系，可以采用不同的色相加以區(qū)分，然后使用較為相同的明度和飽和度來進(jìn)行色彩的調(diào)和統(tǒng)一；相同版塊之間，可以根據(jù)傳遞信息的重要程度，以相同色相但明度和飽和度不同的色彩來加以區(qū)分。需要特別注意的是，Banner圖形在網(wǎng)頁界面中，占有極其重要的布局位置和面積，因此Banner的色彩一定要服從整個(gè)界面的色調(diào)統(tǒng)一，在使用與界面整體色調(diào)呈對(duì)比關(guān)系的圖片時(shí)，可以通過增加與界面色調(diào)相對(duì)一致的文案字體或有漸變形態(tài)的圖形，實(shí)現(xiàn)界面色彩的對(duì)比調(diào)和，營造和諧統(tǒng)一的視覺色彩效果。

4 結(jié)語

Photoshop在網(wǎng)頁界面設(shè)計(jì)中發(fā)揮著重要作用，通過其強(qiáng)大的圖像處理功能，可以產(chǎn)生千變?nèi)f化的設(shè)計(jì)形態(tài)。要進(jìn)行成功的網(wǎng)頁界面設(shè)計(jì)，設(shè)計(jì)者在使用Photoshop的過程中，不能只局限在軟件參數(shù)的調(diào)整和應(yīng)對(duì)上。一定要遵循設(shè)計(jì)藝術(shù)的形式美法則，讓軟件功能為設(shè)計(jì)理念服務(wù)，使網(wǎng)頁作品成為審美藝術(shù)。