當前位置:才華齋>設計>美工設計>

網站美工需要注意web UI設計原則有哪些

美工設計 閱讀(3.15W)

之前的網站美工就是會使用PhotoShop或Firework設計頁面,然後用ImageReady或Firework切割頁面的圖片後直接生成HTML網頁,再把相應的內容填入網頁中,最後加上各種Java和表單效果完成網頁的製作。以下是關於網站美工需要注意web UI設計原則,希望大家喜歡!

網站美工需要注意web UI設計原則有哪些

  部分網頁設計原則

  規劃目錄結構時應當遵循的幾個原則:

1.不要將所有檔案都存放在根目錄下;

2.按欄目內容分別建立子目錄;

3.在每個主目錄下都建立獨立的images目錄;

4.目錄的層次不要太深;

5.切忌使用中文目錄;

6.不要使用過長的目錄;

7.儘量使用意義明確的目錄。

  除創意之外,在網站設計時還需要考慮以下基本原則:

1.網頁內容要便於閱讀;

2.站點內容要精、專和及時更新;

3.注重色彩搭配;

4.考慮頻寬;

5.要適當考慮不同遊覽器、不同解析度的情況;

6.提供互動性;

7.簡單即為美。

網頁設計的通用規則:

1.網站的設計目的決定設計方案;

2.瀏覽者的需求第一位;

3.頁面的有效性;

4.頁面佈局的保持統一性;

5.使用無語意標籤DIV和適當的結構來設計網頁;

6.謹慎使用圖片;

7.減少Java Applet和其他多媒體的使用

  頁面設計原則

1、 介面統一性。

一樣的功能在一樣的地方。一個頁面無非由一些基本模組組成,每一種基本模組在UI設計上,不同的應用例項是否元素一致,包括字型、字號、顏色、按鈕顏色、按鈕形狀、按鈕功能、提示文字、行距等。說來容易,執行的時候很多設計師會有一些隨意的想法,可能某些想法是挺好的,但是我們必須執行統一的介面標準。設想windows裡面,如果不同的視窗關閉按鈕在不同的地方,並且顏色還不一樣,這會是什麼樣混亂的狀況。

2 、留住使用者而不是騷擾使用者。

引導,不是強制。國內的網站對於騙取點選量是很有心得,記得有一段時間sina的新聞標題都是危言聳聽,結果點進去一看不是那麼回事情,這樣的使用者體驗就不好了。除了進行角色使用者模型分析使用者關心的內容以外,我這次也採用了比較極端的做法來避免使用者對於點選的處理。彈出新頁面恐怕也是中國網際網路特有的現象,向前向後這些按鈕在中國用處不大。好在我們有各類多選項卡的瀏覽器,不怕,但是,良好的連續性體驗被破壞了。你願意看一本每頁印兩個字的書嗎?使用者感興趣才看某個網頁,我們要做得是引導使用者看到他想看的內容,既不能硬塞,也不能騙取。

3、安靜的瀏覽器。

曾幾何時,我在看網站的時候,是選擇不顯示所有圖片的,這樣的乾淨在某些領頭羊的帶領下,已經不復存在了。諸多的flash閃爍,一碰就顯示的層,甚至還有不請自來的視訊,這些都不是NI自然介面理論能允許的,我們要的是一個給使用者安安靜靜閱讀內容參加互動的網頁。根據NI第二原則:網站設計要滿足人們的需要,包括個人化的和社會化的。使用者到網站上來有個人的需求,儘可能簡潔的版式,容易閱讀的內容,方便的導航,這些對於使用者來說都是容易接受的,從web2.0風潮開始,有一點至少是好的,就是國內網站也開始注意這些方面,而不是將內容一股腦的堆砌在那裡。如果還是沒有很明白的話,大家可以發現絕大多數國外網站在點選一個連結的時候,是在本頁開啟,而國內的網站基本上都是新開頁面。

  設計注意的要點

1 、每一個模組的邊框,標題,按鈕(如果有的話),“更多”“詳細”功能,這些元素的顏色、大小尺寸、位置、對齊方式、字型、字號、行距等都要一致。

2 、整個頁面的基調顏色要一致,不同的模組除非有很大意義的差別,顏色應該一致。

3、 可以點選的文字、按鈕、圖片,滑鼠應該呈現出統一的可點選樣式,區別於不可點選區域。

4 、呈現的.日期格式的統一,比如都用長日期格式“2007-2-1”或者都用短日期格式“07-3-1”,樣式不同的日期呈現方式還不如不呈現。

5 、可以點選的圖片最好用不同的樣式顯示,比如滑鼠滑過時候的輝亮效果。因為網頁會大量的使用圖片做修飾效果,區分可以點選和不可以點選的圖片是值得去做的。

6 、有沒有不必要的彈出視窗。(從netscape開始這個設計真的很糟糕,ie也完全繼承了,解決的辦法是用js方式來呈現彈出視窗。)

7 、文字描述。很多時候會忽略這個問題,在我們做demo的這個專案中有很多的文字描述,各有其用,統一描述的方式,統一人稱,統一語氣,都是給使用者帶來良好體驗的途徑。

8 、圖片風格。從欣賞的角度,圖片應該是儘可能的統一風格,素描樣式和點陣樣式共存總不是太好的事情。

9 、圖示。很多時候會用圖示來描述功能,漂亮的帶點陰影和倒影的圖示是非常搶眼的,使用圖示的話要注意風格、透視角度、解析度、辨識度的一致性。