正文

網(wǎng)頁界面設(shè)計（網(wǎng)頁界面設(shè)計中,標準分辨率是）

發(fā)布時間：2023-07-01 21:27:13 稿源：創(chuàng)意嶺閱讀： 1512

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于網(wǎng)頁界面設(shè)計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

本文目錄:

1、網(wǎng)頁界面設(shè)計工具有哪些
2、網(wǎng)站界面設(shè)計應遵循的幾個原則
3、UI設(shè)計和網(wǎng)頁設(shè)計的區(qū)別？
4、八.網(wǎng)站界面設(shè)計分哪些步驟進行

一、網(wǎng)頁界面設(shè)計工具有哪些

下面給你整理了幾款網(wǎng)頁制作常用的軟件：

PS（Photoshop）圖像處理軟件：用于對網(wǎng)頁圖片進行潤色或特殊效果處理，是一款網(wǎng)頁制作必備之軟件。

Flash動畫制作軟件：動畫或動態(tài)圖片是網(wǎng)頁的重要組成部分，充分合理的使用Flash程序來設(shè)計網(wǎng)頁元素，往往可達到意想不到的效果。

CSS Design:一款適合對CSS對進調(diào)試的專業(yè)級應用，能夠?qū)SS語法進行著色，同時支持即時查看樣式功能，特別方便程序的調(diào)試以及效果的比對。

Dreamweaver網(wǎng)頁制作軟件，該軟件已成為專業(yè)級網(wǎng)頁制作程序，支持HTML、CSS、PHP、JSP以及ASP等眾多腳本語言的語法著色顯示，同時提供了模板套用功能，支持一鍵式生成網(wǎng)頁框架功能。是初學者或?qū)I(yè)級網(wǎng)站開發(fā)人員必備之選擇工具。

二、網(wǎng)站界面設(shè)計應遵循的幾個原則

網(wǎng)站界面設(shè)計應遵循的原則主要有以下幾個：

1、用戶導向原則

設(shè)計網(wǎng)頁首先要明確到底誰是使用者，要站在用戶的觀點和立場上來考慮設(shè)計網(wǎng)站。要作到這一點，必須要和用戶來溝通，了解他們的需求、目標、期望和偏好等。網(wǎng)頁的設(shè)計者要清楚，用戶之間差別很大，他們的能力各有不同。另外，用戶使用的計算機機器配置也是千差萬別，包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會有不同。設(shè)計者如果忽視了這些差別，設(shè)計出的網(wǎng)頁在不同的機器上顯示就會造成混亂。

2、簡潔易操作原則

KISS原則就是"Keep It Sample And

Stupid"的縮寫，簡潔和易于操作是網(wǎng)頁設(shè)計的最重要的原則。畢竟，網(wǎng)站建設(shè)出來是用于普通網(wǎng)民來查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒有必要在網(wǎng)頁上設(shè)置過多的操作，堆積很多復雜和花哨的圖片。該原則一般的要求，網(wǎng)頁的下載不要超過10秒鐘；盡量使用文本鏈接，而減少大幅圖片和動畫的使用；操作設(shè)計盡量簡單，并且有明確的操作提示；網(wǎng)站所有的內(nèi)容和服務(wù)都在顯眼處向用戶予以說明等。

3、布局控制

關(guān)于網(wǎng)頁排版布局方面，很多網(wǎng)頁設(shè)計者重視不夠，網(wǎng)頁排版設(shè)計的過于死板，甚至照抄他人。如果網(wǎng)頁的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。一般在網(wǎng)頁設(shè)計上所要遵循的原理有：

(1)Miller公式。一個人一次所接受的信息量為 7±2

比特。這一原理被廣泛應用于網(wǎng)站建設(shè)中，一般網(wǎng)頁上面的欄目選擇最佳在5～9個之間，如果網(wǎng)站所提供給瀏覽者選擇的內(nèi)容鏈接超過這個區(qū)間，人在心理上就會煩躁，壓抑，會讓人感覺到信息太密集，看不過來，很累。

(2)分組處理。上面提到，對于信息的分類，不能超過9個欄目。但如果你的內(nèi)容實在是多，超出了9個，需要進行分組處理。如果，你的網(wǎng)頁上提供幾十篇文章的鏈接，需要每隔7篇加一個空行或平行線做以分組。如果你的網(wǎng)站內(nèi)容欄目超出9個，如微軟公司的網(wǎng)站，共有11個欄目，超過了9個。

4、視覺平衡

網(wǎng)頁設(shè)計時，也要各種元素(如圖形、文字、空白)都會有視覺作用。根據(jù)視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，在設(shè)計網(wǎng)頁時需要以更多的文字來平衡一幅圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循這個這個道理。

例如，你的很多的文字是采用左對齊〈Align=left〉，需要在網(wǎng)頁的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下，每張網(wǎng)頁都會設(shè)置一個頁眉部分和一個頁腳部分，頁眉部分常放置一些Banner廣告或?qū)Ш綏l，而頁腳部分通常放置聯(lián)系方式和版權(quán)信息等，頁眉和頁腳在設(shè)計上也要注重視覺平衡。

同時，也決不能低估空白的價值。如果你的網(wǎng)頁上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至會引起讀者反感，破壞該網(wǎng)站的形象。在網(wǎng)頁設(shè)計上，適當增加一些空白，精煉你的網(wǎng)頁，使得頁面變的簡潔。

5、色彩的搭配和文字的可閱讀性

顏色是影響網(wǎng)頁的重要因素，不同的顏色對人的感覺有不同的影響，例如：紅色和橙色使人興奮并使得心跳加速;黃色使人聯(lián)想到陽光，是一種快活的顏色;黑顏色顯得比較莊重，考慮到你希望對瀏覽者產(chǎn)生什么影響，為網(wǎng)頁設(shè)計選擇合適的顏色(包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等)。

為方便閱讀網(wǎng)站上的信息，可以參考報紙的編排方式將網(wǎng)頁的內(nèi)容分欄設(shè)計，甚至兩欄也要比一滿頁的視覺效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體(Arial，CourierNew，Garamond，Times

NewRoman，中文宋體)最易閱讀，特殊字體用于標題效果較好，但是不適合正文。

6、和諧與一致性

通過對網(wǎng)站的各種元素(顏色、字體、圖形、空白等)使用一定的規(guī)格，使得設(shè)計良好的網(wǎng)頁看起來應該是和諧的。或者說，網(wǎng)站的眾多單獨網(wǎng)頁應該看起來像一個整體。網(wǎng)站設(shè)計上要保持一致性，這又是很重要的一點。

一致的結(jié)構(gòu)設(shè)計，可以讓瀏覽者對網(wǎng)站的形象有深刻的記憶;一致的導航設(shè)計，可以讓瀏覽者迅速而又有效的進入在網(wǎng)站中自己所需要的部分;一致的操作設(shè)計，可以讓瀏覽者快速學會在整個網(wǎng)站的各種功能操作。破壞這一原則，會誤導瀏覽者，并且讓整個網(wǎng)站顯的雜亂無章，給人留下不良的印象。

當然，網(wǎng)站設(shè)計的一致性并不意味著刻板和一成不變，有的網(wǎng)站在不同欄目使用不同的風格，或者隨著時間的推移不斷的改版網(wǎng)站，會給瀏覽者帶來新鮮的感覺。

7、個性化

(1)符合網(wǎng)絡(luò)文化

整個互聯(lián)網(wǎng)的文化是一種休閑的、非正式性的、輕松活潑的文化。在網(wǎng)站上使用幽默的網(wǎng)絡(luò)語言，創(chuàng)造一種休閑的、輕松愉快、非正式的氛圍會使網(wǎng)站的訪問量大增。

(2)塑造網(wǎng)站個性

另外，網(wǎng)站的整體風格和整體氣氛表達要同企業(yè)形象相符合并應該很好的體現(xiàn)企業(yè)文化，進而形成風格。

三、UI設(shè)計和網(wǎng)頁設(shè)計的區(qū)別？

UI設(shè)計和網(wǎng)頁設(shè)計的區(qū)別：兩者側(cè)重點不同。

1、網(wǎng)頁設(shè)計側(cè)重于代碼層面，一些前臺的技術(shù)如HTML，CSS，JQuery，JS等都要熟練掌握，還有網(wǎng)頁的版面美工設(shè)計和排版，主要運用在互聯(lián)網(wǎng)上。

2、UI設(shè)計側(cè)重于圖像、圖標設(shè)計和軟件類的界面設(shè)計層面，主要涉及網(wǎng)站或者app畫面，icon，交互的設(shè)計，用戶體驗等。

專業(yè)的網(wǎng)頁設(shè)計，需要經(jīng)歷以下幾個階段：

1、需要根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，從而建立起營銷模型。

2、以業(yè)務(wù)目標為中心進行功能策劃，制作出欄目結(jié)構(gòu)關(guān)系圖。

3、以滿足用戶體驗設(shè)計為目標，使用axure rp或同類軟件進行頁面策劃，制作出交互用例。

4、以頁面精美化設(shè)計為目標，使用PS、AI等軟件，調(diào)整，使用更合理的顏色、字體、圖片、樣式進行頁面設(shè)計美化。

5、根據(jù)用戶反饋，進行頁面設(shè)計調(diào)整，以達到最優(yōu)效果。

以上內(nèi)容參考百度百科-UI設(shè)計、百度百科-網(wǎng)頁設(shè)計

四、八.網(wǎng)站界面設(shè)計分哪些步驟進行

第一步：創(chuàng)建一個畫布

首先，打開photoshop創(chuàng)建一個新的項目。你可以點擊文件>新建或按下CTRL+N快捷鍵來創(chuàng)建。我們選擇一個普通的畫布大小1000×900，當然這些設(shè)置可以在后期增加。

第二步：應用漸變

既然我們的畫布已經(jīng)創(chuàng)建了，是時候開始背景的設(shè)計了。創(chuàng)建一個新層（快捷鍵CTRL+SHIFT+N）。接著給這個圖層從左往右添加漸變前景色設(shè)置為#edd8af背景色為 #ede4c9.這個顏色用來表示盒子的顏色。

第三步：添加紋理

我們想要BoxedArt背景設(shè)計看起來像厚紙板的效果。創(chuàng)建另一個新層，顏色填充為#bcb6a9。下一步應用膠片顆粒藝術(shù)效果設(shè)置參數(shù)如下。接著為了使它看起來粗糙一點，我們給它應用一點高斯模糊效果。

channel

Gaussian Blur

以下就是我們應用這些效果后背景圖層看起來的效果。

第四步：導航條設(shè)計

頂部的導航區(qū)域部分我們放置了一條條狀的帶子。我們可以看到這種帶狀風格在很多網(wǎng)站都有應用，不過我們這里用到的有一點不同。由于BoxedArt 想要將這個設(shè)計看起來像用來發(fā)送郵件的盒子。為了創(chuàng)建這個導航條我們需要從bigstockphotos.com上下載一個帶狀的圖片，使用自由變換工具（在編輯菜單下選擇自由變換或者快捷鍵CTRL+T）沿著頂部的區(qū)域伸展開來。接下來創(chuàng)建透明效果我們要把圖層樣式設(shè)置為線性加深。

第五步：老郵票導航按鈕

停留在盒子主題，我們要讓這個導航按鈕看起來有點破舊磨損郵票。為了達到這種效果列，我們需要一張老郵票（還是在bigstockphotos.com上下載）。下載后第一步是描出郵票的路徑，從背景中提出來，郵票上依然有圖像。為了覆蓋郵票上的圖像，我們用一張黃色的紙張粘貼在上面也就是添加一個紋理效果。

下一步，我們要給導航按鈕添加一些顏色來區(qū)別各種不同類的導航，我們在郵票上添加一些裝飾花紋效果，在你完成創(chuàng)建好顏色盒子后，我們把這個層的樣式修改為線性加深以便顏色能與老照片混合在一起。然后我們增加另一個新層自上而下顏色為黑白我們給這個圖層添加膠片顆粒藝術(shù)效果設(shè)置如下，最后我們把圖層設(shè)置為正片疊底，把這個不透明度設(shè)置為60%。

第六步應用導航按鈕到導航條上

現(xiàn)在我們已經(jīng)創(chuàng)建好了幾個不同顏色的郵票按鈕，是時候來完成最后header部分的準備工作了，把導航按鈕應用到導航條上，我們通過給每個導航按鈕應用由mathilde設(shè)計的Sketchy icons圖標來添加一些手寫效果。這些icon圖標是放置在每個顏色盒子，并調(diào)整了中心圖標的位置。同樣的步驟把icon應用到每個郵票上去。

下一步，對每個郵票使用自由變換工具（CTRL+T），將他們調(diào)整不同的朝向給他們一種拍打的效果。這一步后，我們切換到文字工具，每個分類使用一種手寫字體。這里我用到的是 “Loved by the King”.最后我們的導航條就完成了。

第七步開始頂部介紹區(qū)域

首先創(chuàng)建一個新層（CTRL+SHIFT+N）在工具欄中選擇矩形選框工具?，F(xiàn)在在頁面上創(chuàng)建一個矩形使用白色來填充。這塊區(qū)域?qū)⒈挥脕懋斪鲆粡埌准垺?span style="display:none">MJ9創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司

好了我們已經(jīng)完成白色紙張部分了，在白紙圖層下面創(chuàng)建另一個新層然后填充黑色，這個將用來創(chuàng)建陰影。完成之后我們轉(zhuǎn)到濾鏡>模糊>高斯模糊半徑設(shè)置為6.5.之后把這個層的不透明度設(shè)置為20%，向右移動5pixels。然后添加主要的文字，這樣的話短語”Simplify and Save”會被用到，位于頂部紙張部分。

現(xiàn)在你看在白紙下面有陰影，但是紙張并不是粘在哪里的。所以我們在紙張的一邊來添加一些膠帶，如先前的教程一樣，我們在另一邊添加了一個郵戳來保持畫面的平衡。在你的紙張完成后，我們選擇一些手寫字體來添加一些文字。看起來的話想事包裹上的信息。最后加亮這些圖層按下CTRL+T自由變換工具，角度設(shè)為-1.5 degrees 使它看起來更加具有真實效果。

第八步貼上一個便簽

我們使用了一個便簽設(shè)計來分開空間來介紹我們網(wǎng)站的優(yōu)惠注冊信息。這個在整個盒子主題上運用的非常好，設(shè)計這樣一個便簽效果需要創(chuàng)建另一個新的圖層，選擇鋼筆工具使用鋼筆工具來繪制一個方形區(qū)域。

在你完成之后轉(zhuǎn)到路徑面板，按住CTRL鍵點擊路徑圖層，接著你會看到方形區(qū)域已經(jīng)載入選區(qū)了，之后使用前景色#fffb78背景色#fffcd1從左上角到右下角繪制漸變。你將會看到這樣一個熟悉的黃色便簽紙形狀。

第九步

現(xiàn)在我們需要再一次添加陰影效果，給這個便簽紙?zhí)砑由疃龋詣?chuàng)建另一個新層(CTRL+SHIFT+N)。過程如之前給白紙創(chuàng)建陰影差不多，但是是將不透明度設(shè)置為40%。你需要變換一下陰影來創(chuàng)建一種傾斜效果，輕微的拖動一下。

第十步給便簽紙?zhí)砑觾?nèi)容

下一步，給便簽紙?zhí)砑右恍┪淖?，在我們的便簽紙中我們要添加一些加入等按鈕，為了創(chuàng)建相似的按鈕首先我們繪制一個盒子使用綠色填充，然后添加一個蒙板選擇一種grudge 筆刷。下一步遮住按鈕的一些部分看起來就像破損一樣，這就是我們創(chuàng)建郵戳的效果。

第十一步卷曲膠帶紙標題

我們轉(zhuǎn)到body的內(nèi)容部分。在這個設(shè)計中，我們要創(chuàng)建2欄和一些圖標。我們使用的是已經(jīng)有的圖標因為我們喜歡這種手寫效果包括Handy Icons and Sketchy icons.。在body開始的區(qū)域我們要一個標題欄用來羅列我們網(wǎng)站的內(nèi)容。我們把這個header部分做成卷曲效果。至于說到透明膠帶我們使用的來自bigstockphoto 的圖片。為了增加膠帶的深度，我使用矩形選框工具來選擇膠帶的一些區(qū)域。在選中選區(qū)后我們復制這個圖層按下ALT+SHIFT向左邊移動，然后在向右移動一下使它看起來顯得長一些。為了避免縫隙的產(chǎn)生我們使用圖章工具里拼合這些縫隙。

第十二步預覽下的小圖標

BoxedArt網(wǎng)站的內(nèi)容區(qū)域包含很多網(wǎng)頁模板的預覽。創(chuàng)建這種效果我們需要選中矩形選框工具創(chuàng)建一個小的矩形，然后使用顏色#123057填充。這些按鈕我們只要復制第一個圖層，移動它到第一個圖層下面，設(shè)置這個圖層的透明度這里我們設(shè)置的為40%。重復同樣的步驟處理余下的按鈕。

第十三步使用針腳線來分開這些區(qū)域

為了分開這些主要的分類，為了創(chuàng)建這些虛線我們可以文字工具角度為90，把這些圖層的樣式設(shè)置為疊加，為了使這些顯眼點我們只需復制這個圖層2-3次至于顏色多深取決于你自己。

第十四步填充額外的內(nèi)容

添加剩下的內(nèi)容就非常簡單了，我們只需使用直線工具來分開每個部分，在添加些圖標和文字，這里我們用到的是一種干凈的字體Helvetica Condensed,。

第十五步—底部廣告部分

我們已經(jīng)到了底部放置廣告部分了，這里的帶狀條將會再一次應用起來，使用先前有的圖片作為起點，下一步，我們要使用圓角矩形工具，前景色設(shè)置為白色半徑為5px。接著我們需要在設(shè)置一些小的圓角矩形，顏色設(shè)置為#f8f7f3邊框用深灰。你可以在下圖的圖層樣式中設(shè)置邊框（就是一種描邊效果）。

第十六步公告部分

公告部分我們采取的是和header部分相似蒙板的方法，當然還有訂閱新聞通訊等區(qū)域也是這樣的方法，就像紙張粘上去的一樣。首先我們給header部分添加一種厚紙張效果，這個和body部分的方法基本一樣。至于內(nèi)容部分，選中矩形選框工具在右下角繪制小盒子顏色填充為#f9e5a6。完成按下CTRL-D取消選區(qū)，在選擇加深工具，筆刷大小設(shè)置為35pixels加深棕色盒子的邊角區(qū)域。

最后我們把圖層的不透明度設(shè)置為60%再雙擊圖層在圖層樣式中添加一些陰影效果，參數(shù)設(shè)置，然后在添加一些內(nèi)容。

第十七步網(wǎng)頁底部

到了我們創(chuàng)建底部的部分了，首先我們使用矩形選框工具，在頁面上選擇下圖這樣一個區(qū)域，使用顏色#462d0f填充，選擇直線工具繪制一條直線顏色設(shè)置為#a05d18。

到了底部的分類部分了，我們要又一次繪制一個大的選框，顏色填充為#472a0b ，圖層的不透明度度設(shè)置為78%，接著創(chuàng)建另一個圖層顏色填充為#fffcd1。下一步添加膠片顆粒效果最后把圖層的不透明度設(shè)置為30%圖層樣式為正片疊底。

最后我們只需重復我們在footer部分的操作或者復制圖層把它移到底部，這樣你就可以添加內(nèi)容了?？聪孪旅娴念A覽圖，是否有些啟示列，希望你喜歡。

以上就是關(guān)于網(wǎng)頁界面設(shè)計相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。