UI設計原則是什么

(資料圖片僅供參考)

使用PhotoShop或Firework設計頁面，然后用ImageReady或Firework切割頁面的圖片后直接生成HTML網頁，再把相應的內容填入網頁中，最后加上各種Java和表單效果完成網頁的制作。以下是小編整理的UI設計原則是什么，歡迎來閱讀!

UI設計原則是什么 篇1

而這一系列的工作全部由“網頁美工”一人完成。這種做法從1997年網頁制作熱潮延續至今，面對日新月異的網絡，各種網絡技術的突起，陳舊的做法已不能適應當前的形勢，網站建設發展至今已經不再是一人包攬的局面，網站建設正朝著項目化、流程化的方向科學發展。在一個完整的網站建設團隊中，每角色都有明確的分工。

從網站項目成立，到網站結構策劃，網站結構設計，網站頁面布局，頁面腳本處理等一系列與美術設計無關的任務全部從“網頁美工”身上解放開，在這個流程中原來 “網頁美工”的角色被更專業化的定義，賦予一個更貼切的名稱——網頁美術設計師。從而，網頁美術設計師能充分地發揮特長，在平面美術設計的基礎上進行專業的網頁美術設計。

很多人常常把平面美術設計與網頁美術設計混淆，以為平面美術設計師一定會做網頁美術設計，實際上，網頁與印刷品有很多差別，因為它提供了更多功能，這一點與軟件比較類似。網頁設計近似于軟件設計，網頁美術設計則相當于軟件UI設計，更準確的說，網頁美術設計是圖形化人機介面(Graphics User Interface，或簡稱GUI)的一種。因此，網頁美術設計師也可稱為——網頁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 圖標。很多時候會用圖標來描述功能，漂亮的帶點陰影和倒影的圖標是非常搶眼的，使用圖標的話要注意風格、透視角度、分辨率、辨識度的一致性。

UI設計原則是什么 篇2

UI設計已經成為一門專門性交叉學科，通過對視覺思維、心理學、人體工程學等不同學科的研究，設計者從各個方面不斷的改善用戶的操作體驗。早期的軟件界面曾經通過“擬物化”設計（skeuomorphism）試圖通過模擬真實物體的質感來讓人機交互更趨向于人與現實世界的交互方式而“去虛擬化”；而21世紀以來，隨著UI設計中對視覺傳達規律的運用，“扁平化”設計（flat）成為更為主流的設計趨勢。扁平化設計更為現代主義，通過簡潔、單純的色塊的組合與運用幫助用戶更好地理解與使用產品本身。

1 UI設計中色彩的功能

色彩作為視覺傳達中非常重要的要素在UI設計中具有非常重要的作用，可以歸納為以下幾個方面。

1）顯示界面的整體架構

一個UI界面總是借助圖形化的"外觀直接作用于客戶的視覺系統。用戶接觸一個UI界面，看到的往往是一個由底色、其他幾何色塊、圖標、按鈕等元素構成的圖形符號系統。用色彩可以非常直觀的凸顯出背景、導航欄、狀態欄，按鈕等構成元素，并顯示出UI界面的邏輯架構。

2）明確視覺層級關系

UI設計中不同的內容屬于不同的層級關系，如菜單于菜單間的同級關系、內容間的從屬關系等等。用同色系色彩、不同色相色彩間的差距可以非常直觀地區分內容的層級關系，還可以通過色彩間的強對比突出關鍵內容。

3）營造界面整體風格

UI界面雖然是個復雜的視覺圖形系統，但通過主色調、輔助色、裝飾色之間的對比調和關系會呈現出明顯的風格傾向。用不同的色系或者同色系色彩之間的對比與調和關系，可以塑造出不同的界面風格。如適合男生的金屬質感的黑色、灰色、藍色系，女生喜歡的夢幻甜美色系、糖果色系。界面風格定位于品質已經成為用戶體驗中最重要的部分之一。

4）基于人體工程學的色彩運用。

由于色溫會影響到光源顯示的顏色，大于 6500K 就會偏冷（白藍），小于 6500K 就會偏暖（黃紅）。而藍光大量存在于電腦顯示器、熒光燈、手機、數碼產品、顯示屏、LED等光線中，由于藍光是一種高能量的短波光線，因而會較為嚴重的傷害視力。基于人體工程學保護視力考慮，蘋果手機Iphone7和iphone7plus手機背光顯示設計了Night Shift 的屏幕去藍光保護功能，開啟后會在晚間自動將屏幕顯示調成暖黃色調，減少視覺疲勞。

此外，UI界面中，考慮到電子設備的顯示特點。背景色要與圖標色彩之間至少有5.38以上的對比差，才能夠易于區分。而在此差值范圍內的配色則會因為過于接近而在顯示環境中對辨認造成困擾。

還有一些特殊人群，如紅綠色盲人群，由于特殊視覺需求而需要進行特別的配色設計。

2 UI色彩設計方案

在進行UI設計時，要通過對產品及用戶體驗的分析確定明確的色彩搭配反感，形成“標準色彩規范”，在這個基礎上再進行具體界面、線框、圖標等細節設計。標準色彩規范中要規定出最主要主色、輔助色、裝飾色的色號，方便設計師的設計稿的色彩統一。

1）主色調

主色用量基本占據全部用色的75%，基本決定了整個界面的視覺風格。主色選擇要符合產品本身的氣質、訴求和色彩心理學規律，可在主色的基礎上通過明度與純度的變化衍生出同色系色調作為主色調范圍。

根據色彩在視覺中的能量值，一般主色傾向于選擇飽和度高、明度低的色彩，往往會在在同一界面中占據較大的面積或明顯的凸現于背景。

2）輔助色

輔助色起到輔助主色的作用，在全部用色中約占據20%。用與主色同色系色彩作為輔助色可以呈現柔和、整體、統一的視覺效果；而用主色鄰近色作為輔助色可以讓界面有豐富的變化，產生活潑感；用主色調對比色作為輔助色可以讓主色更為突出。

3）裝飾色

占全部色彩方案的5%的裝飾色起到點綴、提醒的作用。并界面增加個性化、富于趣味的視覺元素。裝飾色要與界面整體色調相區別，一般在明度、飽和度上要有明顯差異，一般會用明度或飽和度高的顏色。

3 UI設計中對色彩三要素的運用

色相、明度、飽和度是色彩的三要素，對這三個色彩要素的理解和運用體現在UI設計中整個色彩方案中。

色相是色彩的首要特征，是不同色彩相區分的重要因素。色相也是色彩搭配中進行色彩對比的主要因素。對主色色相的選擇往往決定了一個UI界面的整體風格與氣質，或奔放活潑，或冷靜深沉，或淡雅清新，或濃郁艷麗。其他輔助色則起到對比或調和的作用。因而一個UI界面的主色選擇要符合產品本身的特質。以手機APP為例，淘寶、百度外賣、大眾點評等許多電商類APP常常用容易讓人興奮、熱烈的紅色、橙色作為主色調；而主打探索與求知的“知乎”APP則使用理性、冷靜的藍色作為主色。

色彩的明度是色彩的明亮程度，是對色彩進行調和的主要因素。同色相色彩的明度變化可以在同色系中呈現一種調和統一的變化關系，協調而具有層次感。常常用于配合主色進行圖標、菜單、導航等設計。明度變和也會帶來色彩性格上的差異，明度升高會讓色彩變得明亮、呈現清涼感；而明度降低則會讓色彩變得暗淡，呈現溫暖感。

飽和度是指色彩的鮮艷程度，也是色彩進行調和的主要因素。飽和度的改變同樣會讓色彩呈現從濃烈活潑到安靜深沉等不同的“色彩性格”。此外飽和度的改變還會讓色彩呈現不同的質感，如金屬的不透明、堅硬、光澤感；糖果色的清新甜美感等等。

4 UI設計中的色彩心理學運用

色彩具有非常強的聯想性。不同的色彩會在味覺、空間、冷暖、情緒等不同方面引發人們不同的綜合感受。UI界面在主色調的選擇中往往會利用人們對于色彩的聯想習慣突出產品的定位。仍以ios系統手機APP為例；以介紹美食菜譜的“香哈”APP，主色采用最容易誘發食欲的紅、橙色系；而具有豐富中國民俗傳統的萬年歷APP則采用了充滿中國傳統文化涵義的中國紅作為主色并配合這一氣質采用篆書字體作為文字標識。

綜上所述，由于色彩的重要性，對色彩的理解和駕馭對整個UI界面的設計產生著巨大的影響。