基于Photoshop應用的網(wǎng)頁界面設計研究

祝曉銘，王艷平

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

0 引言

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

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

1 網(wǎng)頁布局

1. 1 布局的簡約風格

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

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

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

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

1. 3 Photoshop的布局操作

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

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

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

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

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

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

2. 2 文字的信息傳遞主體效應

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

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

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

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

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

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

3 網(wǎng)頁色彩

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

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

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

3. 2 信息版塊的色彩應用

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

4 結(jié)語

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