- 相關推薦
網站美工需要注意web UI設計原則有哪些
之前的網站美工就是會使用PhotoShop或Firework設計頁面，然后用ImageReady或Firework切割頁面的圖片后直接生成HTML網頁，再把相應的內容填入網頁中，最后加上各種Java和表單效果完成網頁的制作。以下是關于網站美工需要注意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 、圖標。很多時候會用圖標來描述功能，漂亮的帶點陰影和倒影的圖標是非常搶眼的，使用圖標的話要注意風格、透視角度、分辨率、辨識度的一致性。
【網站美工需要注意web UI設計原則有哪些】相關文章：
網頁美工設計基本原則有哪些07-02
SEO網站優化需要注意哪些問題07-13
網站代碼優化需要注意哪些問題10-10
UI設計和美工的區別09-03
網頁美工設計需要注意的細節07-16
網站頁面布局和優化需要注意哪些11-03
模具設計需要注意哪些05-24
設計臥室需要注意哪些事項09-15
網站美工設計基礎知識有哪些10-19
SEO網站Web設計錯誤大全09-23