UI設(shè)計(jì)原則是什么

(資料圖片僅供參考)

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

UI設(shè)計(jì)原則是什么 篇1

而這一系列的工作全部由“網(wǎng)頁(yè)美工”一人完成。這種做法從1997年網(wǎng)頁(yè)制作熱潮延續(xù)至今，面對(duì)日新月異的網(wǎng)絡(luò)，各種網(wǎng)絡(luò)技術(shù)的突起，陳舊的做法已不能適應(yīng)當(dāng)前的形勢(shì)，網(wǎng)站建設(shè)發(fā)展至今已經(jīng)不再是一人包攬的局面，網(wǎng)站建設(shè)正朝著項(xiàng)目化、流程化的方向科學(xué)發(fā)展。在一個(gè)完整的網(wǎng)站建設(shè)團(tuán)隊(duì)中，每角色都有明確的分工。

從網(wǎng)站項(xiàng)目成立，到網(wǎng)站結(jié)構(gòu)策劃，網(wǎng)站結(jié)構(gòu)設(shè)計(jì)，網(wǎng)站頁(yè)面布局，頁(yè)面腳本處理等一系列與美術(shù)設(shè)計(jì)無(wú)關(guān)的任務(wù)全部從“網(wǎng)頁(yè)美工”身上解放開，在這個(gè)流程中原來(lái) “網(wǎng)頁(yè)美工”的角色被更專業(yè)化的定義，賦予一個(gè)更貼切的名稱——網(wǎng)頁(yè)美術(shù)設(shè)計(jì)師。從而，網(wǎng)頁(yè)美術(shù)設(shè)計(jì)師能充分地發(fā)揮特長(zhǎng)，在平面美術(shù)設(shè)計(jì)的基礎(chǔ)上進(jìn)行專業(yè)的網(wǎng)頁(yè)美術(shù)設(shè)計(jì)。

很多人常常把平面美術(shù)設(shè)計(jì)與網(wǎng)頁(yè)美術(shù)設(shè)計(jì)混淆，以為平面美術(shù)設(shè)計(jì)師一定會(huì)做網(wǎng)頁(yè)美術(shù)設(shè)計(jì)，實(shí)際上，網(wǎng)頁(yè)與印刷品有很多差別，因?yàn)樗峁┝烁喙δ?，這一點(diǎn)與軟件比較類似。網(wǎng)頁(yè)設(shè)計(jì)近似于軟件設(shè)計(jì)，網(wǎng)頁(yè)美術(shù)設(shè)計(jì)則相當(dāng)于軟件UI設(shè)計(jì)，更準(zhǔn)確的說(shuō)，網(wǎng)頁(yè)美術(shù)設(shè)計(jì)是圖形化人機(jī)介面(Graphics User Interface，或簡(jiǎn)稱GUI)的一種。因此，網(wǎng)頁(yè)美術(shù)設(shè)計(jì)師也可稱為——網(wǎng)頁(yè)UI設(shè)計(jì)師。

部分網(wǎng)頁(yè)設(shè)計(jì)原則

規(guī)劃目錄結(jié)構(gòu)時(shí)應(yīng)當(dāng)遵循的幾個(gè)原則：

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

2.按欄目?jī)?nèi)容分別建立子目錄;

3.在每個(gè)主目錄下都建立獨(dú)立的images目錄;

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

5.切忌使用中文目錄;

6.不要使用過(guò)長(zhǎng)的目錄;

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

除創(chuàng)意之外，在網(wǎng)站設(shè)計(jì)時(shí)還需要考慮以下基本原則：

1.網(wǎng)頁(yè)內(nèi)容要便于閱讀;

2.站點(diǎn)內(nèi)容要精、專和及時(shí)更新;

3.注重色彩搭配;

4.考慮帶寬;

5.要適當(dāng)考慮不同游覽器、不同分辨率的情況;

6.提供交互性;

7.簡(jiǎn)單即為美。

網(wǎng)頁(yè)設(shè)計(jì)的通用規(guī)則：

1.網(wǎng)站的設(shè)計(jì)目的決定設(shè)計(jì)方案;

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

3.頁(yè)面的有效性;

4.頁(yè)面布局的保持統(tǒng)一性;

5.使用無(wú)語(yǔ)意標(biāo)簽DIV和適當(dāng)?shù)慕Y(jié)構(gòu)來(lái)設(shè)計(jì)網(wǎng)頁(yè);

6.謹(jǐn)慎使用圖片;

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

在頁(yè)面進(jìn)入草圖設(shè)計(jì)后，需要確認(rèn)很多細(xì)節(jié)，我在檢查頁(yè)面設(shè)計(jì)稿是否可以進(jìn)入切頁(yè)面和制作時(shí)候，遵循以下原則：

1 界面統(tǒng)一性。一樣的功能在一樣的地方。一個(gè)頁(yè)面無(wú)非由一些基本模塊組成，每一種基本模塊在UI設(shè)計(jì)上，不同的應(yīng)用實(shí)例是否元素一致，包括字型、字號(hào)、顏色、按鈕顏色、按鈕形狀、按鈕功能、提示文字、行距等。說(shuō)來(lái)容易，執(zhí)行的時(shí)候很多設(shè)計(jì)師會(huì)有一些隨意的想法，可能某些想法是挺好的，但是我們必須執(zhí)行統(tǒng)一的界面標(biāo)準(zhǔn)。設(shè)想windows里面，如果不同的窗口關(guān)閉按鈕在不同的地方，并且顏色還不一樣，這會(huì)是什么樣混亂的狀況。

2 留住用戶而不是騷擾用戶。引導(dǎo)，不是強(qiáng)制。國(guó)內(nèi)的網(wǎng)站對(duì)于騙取點(diǎn)擊量是很有心得，記得有一段時(shí)間sina的新聞標(biāo)題都是危言聳聽，結(jié)果點(diǎn)進(jìn)去一看不是那么回事情，這樣的用戶體驗(yàn)就不好了。除了進(jìn)行角色用戶模型分析用戶關(guān)心的內(nèi)容以外，我這次也采用了比較極端的做法來(lái)避免用戶對(duì)于點(diǎn)擊的處理。彈出新頁(yè)面恐怕也是中國(guó)互聯(lián)網(wǎng)特有的現(xiàn)象，向前向后這些按鈕在中國(guó)用處不大。好在我們有各類多選項(xiàng)卡的瀏覽器，不怕，但是，良好的連續(xù)性體驗(yàn)被破壞了。你愿意看一本每頁(yè)印兩個(gè)字的書嗎?用戶感興趣才看某個(gè)網(wǎng)頁(yè)，我們要做得是引導(dǎo)用戶看到他想看的內(nèi)容，既不能硬塞，也不能騙取。

3 安靜的瀏覽器。曾幾何時(shí)，我在看網(wǎng)站的時(shí)候，是選擇不顯示所有圖片的，這樣的干凈在某些領(lǐng)頭羊的帶領(lǐng)下，已經(jīng)不復(fù)存在了。諸多的flash閃爍，一碰就顯示的層，甚至還有不請(qǐng)自來(lái)的視頻，這些都不是NI自然界面理論能允許的，我們要的是一個(gè)給用戶安安靜靜閱讀內(nèi)容參加互動(dòng)的網(wǎng)頁(yè)。根據(jù)NI第二原則：網(wǎng)站設(shè)計(jì)要滿足人們的需要，包括個(gè)人化的和社會(huì)化的。用戶到網(wǎng)站上來(lái)有個(gè)人的需求，盡可能簡(jiǎn)潔的版式，容易閱讀的內(nèi)容，方便的導(dǎo)航，這些對(duì)于用戶來(lái)說(shuō)都是容易接受的，從web2.0風(fēng)潮開始，有一點(diǎn)至少是好的，就是國(guó)內(nèi)網(wǎng)站也開始注意這些方面，而不是將內(nèi)容一股腦的堆砌在那里。如果還是沒有很明白的話，大家可以發(fā)現(xiàn)絕大多數(shù)國(guó)外網(wǎng)站在點(diǎn)擊一個(gè)鏈接的時(shí)候，是在本頁(yè)打開，而國(guó)內(nèi)的網(wǎng)站基本上都是新開頁(yè)面。

以上這些歸納為設(shè)計(jì)時(shí)候要注意的要點(diǎn)如下：

1 每一個(gè)模塊的邊框，標(biāo)題，按鈕(如果有的話)，“更多”“詳細(xì)”功能，這些元素的顏色、大小尺寸、位置、對(duì)齊方式、字體、字號(hào)、行距等都要一致。

2 整個(gè)頁(yè)面的基調(diào)顏色要一致，不同的模塊除非有很大意義的差別，顏色應(yīng)該一致。

3 可以點(diǎn)擊的文字、按鈕、圖片，鼠標(biāo)應(yīng)該呈現(xiàn)出統(tǒng)一的可點(diǎn)擊樣式，區(qū)別于不可點(diǎn)擊區(qū)域。

4 呈現(xiàn)的日期格式的統(tǒng)一，比如都用長(zhǎng)日期格式“2007-2-1”或者都用短日期格式“07-3-1”，樣式不同的日期呈現(xiàn)方式還不如不呈現(xiàn)。

5 可以點(diǎn)擊的圖片最好用不同的樣式顯示，比如鼠標(biāo)滑過(guò)時(shí)候的輝亮效果。因?yàn)榫W(wǎng)頁(yè)會(huì)大量的使用圖片做修飾效果，區(qū)分可以點(diǎn)擊和不可以點(diǎn)擊的圖片是值得去做的。

6 有沒有不必要的彈出窗口。(從netscape開始這個(gè)設(shè)計(jì)真的很糟糕，ie也完全繼承了，解決的辦法是用js方式來(lái)呈現(xiàn)彈出窗口。)

7 文字描述。很多時(shí)候會(huì)忽略這個(gè)問(wèn)題，在我們做demo的這個(gè)項(xiàng)目中有很多的文字描述，各有其用，統(tǒng)一描述的方式，統(tǒng)一人稱，統(tǒng)一語(yǔ)氣，都是給用戶帶來(lái)良好體驗(yàn)的途徑。

8 圖片風(fēng)格。我不是這方面的專家，從欣賞的角度，圖片應(yīng)該是盡可能的統(tǒng)一風(fēng)格，素描樣式和點(diǎn)陣樣式共存總不是太好的事情。

9 圖標(biāo)。很多時(shí)候會(huì)用圖標(biāo)來(lái)描述功能，漂亮的帶點(diǎn)陰影和倒影的圖標(biāo)是非常搶眼的，使用圖標(biāo)的話要注意風(fēng)格、透視角度、分辨率、辨識(shí)度的一致性。

UI設(shè)計(jì)原則是什么 篇2

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

1 UI設(shè)計(jì)中色彩的功能

色彩作為視覺傳達(dá)中非常重要的要素在UI設(shè)計(jì)中具有非常重要的作用，可以歸納為以下幾個(gè)方面。

1）顯示界面的整體架構(gòu)

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

2）明確視覺層級(jí)關(guān)系

UI設(shè)計(jì)中不同的內(nèi)容屬于不同的層級(jí)關(guān)系，如菜單于菜單間的同級(jí)關(guān)系、內(nèi)容間的從屬關(guān)系等等。用同色系色彩、不同色相色彩間的差距可以非常直觀地區(qū)分內(nèi)容的層級(jí)關(guān)系，還可以通過(guò)色彩間的強(qiáng)對(duì)比突出關(guān)鍵內(nèi)容。

3）營(yíng)造界面整體風(fēng)格

UI界面雖然是個(gè)復(fù)雜的視覺圖形系統(tǒng)，但通過(guò)主色調(diào)、輔助色、裝飾色之間的對(duì)比調(diào)和關(guān)系會(huì)呈現(xiàn)出明顯的風(fēng)格傾向。用不同的色系或者同色系色彩之間的對(duì)比與調(diào)和關(guān)系，可以塑造出不同的界面風(fēng)格。如適合男生的金屬質(zhì)感的黑色、灰色、藍(lán)色系，女生喜歡的夢(mèng)幻甜美色系、糖果色系。界面風(fēng)格定位于品質(zhì)已經(jīng)成為用戶體驗(yàn)中最重要的部分之一。

4）基于人體工程學(xué)的色彩運(yùn)用。

由于色溫會(huì)影響到光源顯示的顏色，大于 6500K 就會(huì)偏冷（白藍(lán)），小于 6500K 就會(huì)偏暖（黃紅）。而藍(lán)光大量存在于電腦顯示器、熒光燈、手機(jī)、數(shù)碼產(chǎn)品、顯示屏、LED等光線中，由于藍(lán)光是一種高能量的短波光線，因而會(huì)較為嚴(yán)重的傷害視力?；谌梭w工程學(xué)保護(hù)視力考慮，蘋果手機(jī)Iphone7和iphone7plus手機(jī)背光顯示設(shè)計(jì)了Night Shift 的屏幕去藍(lán)光保護(hù)功能，開啟后會(huì)在晚間自動(dòng)將屏幕顯示調(diào)成暖黃色調(diào)，減少視覺疲勞。

此外，UI界面中，考慮到電子設(shè)備的顯示特點(diǎn)。背景色要與圖標(biāo)色彩之間至少有5.38以上的對(duì)比差，才能夠易于區(qū)分。而在此差值范圍內(nèi)的配色則會(huì)因?yàn)檫^(guò)于接近而在顯示環(huán)境中對(duì)辨認(rèn)造成困擾。

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

2 UI色彩設(shè)計(jì)方案

在進(jìn)行UI設(shè)計(jì)時(shí)，要通過(guò)對(duì)產(chǎn)品及用戶體驗(yàn)的分析確定明確的色彩搭配反感，形成“標(biāo)準(zhǔn)色彩規(guī)范”，在這個(gè)基礎(chǔ)上再進(jìn)行具體界面、線框、圖標(biāo)等細(xì)節(jié)設(shè)計(jì)。標(biāo)準(zhǔn)色彩規(guī)范中要規(guī)定出最主要主色、輔助色、裝飾色的色號(hào)，方便設(shè)計(jì)師的設(shè)計(jì)稿的色彩統(tǒng)一。

1）主色調(diào)

主色用量基本占據(jù)全部用色的75%，基本決定了整個(gè)界面的視覺風(fēng)格。主色選擇要符合產(chǎn)品本身的氣質(zhì)、訴求和色彩心理學(xué)規(guī)律，可在主色的基礎(chǔ)上通過(guò)明度與純度的變化衍生出同色系色調(diào)作為主色調(diào)范圍。

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

2）輔助色

輔助色起到輔助主色的作用，在全部用色中約占據(jù)20%。用與主色同色系色彩作為輔助色可以呈現(xiàn)柔和、整體、統(tǒng)一的視覺效果；而用主色鄰近色作為輔助色可以讓界面有豐富的變化，產(chǎn)生活潑感；用主色調(diào)對(duì)比色作為輔助色可以讓主色更為突出。

3）裝飾色

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

3 UI設(shè)計(jì)中對(duì)色彩三要素的運(yùn)用

色相、明度、飽和度是色彩的三要素，對(duì)這三個(gè)色彩要素的理解和運(yùn)用體現(xiàn)在UI設(shè)計(jì)中整個(gè)色彩方案中。

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

色彩的明度是色彩的明亮程度，是對(duì)色彩進(jìn)行調(diào)和的主要因素。同色相色彩的明度變化可以在同色系中呈現(xiàn)一種調(diào)和統(tǒng)一的變化關(guān)系，協(xié)調(diào)而具有層次感。常常用于配合主色進(jìn)行圖標(biāo)、菜單、導(dǎo)航等設(shè)計(jì)。明度變和也會(huì)帶來(lái)色彩性格上的差異，明度升高會(huì)讓色彩變得明亮、呈現(xiàn)清涼感；而明度降低則會(huì)讓色彩變得暗淡，呈現(xiàn)溫暖感。

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

4 UI設(shè)計(jì)中的色彩心理學(xué)運(yùn)用

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

綜上所述，由于色彩的重要性，對(duì)色彩的理解和駕馭對(duì)整個(gè)UI界面的設(shè)計(jì)產(chǎn)生著巨大的影響。