ui設(shè)計(jì)的基本原則（ui設(shè)計(jì)的基本原則有哪些）

大家好！今天讓小編來(lái)大家介紹下關(guān)于ui設(shè)計(jì)的基本原則的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

• 1、UI設(shè)計(jì)中的5大金手指原則

• 2、什么是ui，網(wǎng)站ui設(shè)計(jì)應(yīng)該注意些什么，有哪些基本原則

• 3、「UI設(shè)計(jì)」如何做好按鈕設(shè)計(jì)的9個(gè)基本原則

• 4、軟件界面設(shè)計(jì)原則有哪些

一、UI設(shè)計(jì)中的5大金手指原則

一、先搞清楚：給誰(shuí)用?在什么時(shí)候用?

首先，你必須要分析做的這個(gè)設(shè)計(jì)解決的是什么人(用戶(hù))、在什么時(shí)候(場(chǎng)景)下的問(wèn)題?而青藤小編在他們前面都加了一個(gè)詞“不同”，一般情況下，即使是同一個(gè)界面，在不同用戶(hù)的不同場(chǎng)景下設(shè)計(jì)也要細(xì)分，有所區(qū)分的進(jìn)行設(shè)計(jì)。

二、搞清楚：用戶(hù)在這個(gè)頁(yè)面要做且必做的一件重要的事是什么

做事情不能三心二意，做頁(yè)面設(shè)計(jì)亦是如此。界面設(shè)計(jì)要簡(jiǎn)潔，一個(gè)頁(yè)面只承載一個(gè)最為重要的功能，完成最重要的一個(gè)指標(biāo)，如果一個(gè)頁(yè)面要表達(dá)的東西太多，那將會(huì)給用戶(hù)帶來(lái)選擇恐懼，想要說(shuō)都是重點(diǎn)那也將都不是重點(diǎn)。

三、重點(diǎn)優(yōu)先級(jí)：功能+交互操作+視覺(jué)

做設(shè)計(jì)要讓頁(yè)面的元素具有清晰的層次，一個(gè)頁(yè)面的重點(diǎn)是什么?次之是什么?最弱化的是什么?而這個(gè)層次從三個(gè)方面都要有設(shè)計(jì)體現(xiàn)：功能+交互操作+視覺(jué)。一般情況下，這三個(gè)的優(yōu)先級(jí)基本是一致的， 功能的優(yōu)先級(jí)決定了交互操作和視覺(jué)的優(yōu)先級(jí)，視覺(jué)優(yōu)先級(jí)引導(dǎo)用戶(hù)的操作路徑的優(yōu)先級(jí)，他們互相制約互相影響。

四、可識(shí)別性是第一視覺(jué)原則

清晰明了的識(shí)別是界面設(shè)計(jì)的第一原則。產(chǎn)品最好不要搞朦朧派、抽象派，要想你設(shè)計(jì)的界面立意準(zhǔn)確、有效有用，首先就得保證用戶(hù)能夠準(zhǔn)確的認(rèn)出它，然后準(zhǔn)確的操作使用它。

五、取舍：功能性能大于視覺(jué)

對(duì)大多數(shù)設(shè)計(jì)師來(lái)說(shuō)，都把自己定位為視覺(jué)型設(shè)計(jì)師，把顏值看得比生命還重要，殊不知我們應(yīng)該晉級(jí)成為產(chǎn)品型設(shè)計(jì)師、運(yùn)營(yíng)型設(shè)計(jì)師甚至是還要懂一點(diǎn)技術(shù)的設(shè)計(jì)師，要帶著用戶(hù)的思維從源頭來(lái)看這件事，那就是設(shè)計(jì)這個(gè)界面的目的是什么?答案：為了解決用戶(hù)的問(wèn)題。

以上就是青藤小編關(guān)于UI設(shè)計(jì)中的5大金手指原則的分享，總之，界面設(shè)計(jì)不僅僅只是設(shè)計(jì)一個(gè)美麗的外表，它必須在保證有用好用的前提下再是好看!

二、什么是ui，網(wǎng)站ui設(shè)計(jì)應(yīng)該注意些什么，有哪些基本原則

UI即User Interface(用戶(hù)界面)的簡(jiǎn)稱(chēng)。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

好的網(wǎng)站UI設(shè)計(jì)，不僅具備清晰的界面，還要給用戶(hù)以簡(jiǎn)潔的感覺(jué)。用戶(hù)的第一印象是非常重要的，簡(jiǎn)潔的UI設(shè)計(jì)原則會(huì)讓用戶(hù)在最短的時(shí)間內(nèi)找到自己想要的內(nèi)容，提高了效率，很多建站公司都明白其中的道理，進(jìn)行網(wǎng)站改版就是為了簡(jiǎn)潔化。扁平化設(shè)計(jì)就是一個(gè)好的思路。

三、「UI設(shè)計(jì)」如何做好按鈕設(shè)計(jì)的9個(gè)基本原則

按鈕是任何用戶(hù)界面當(dāng)中（無(wú)論是桌面還是移動(dòng)用戶(hù)界面）必備的交互元素：甚至可以說(shuō)，如果頁(yè)面中沒(méi)有一個(gè)按鈕，整個(gè)頁(yè)面設(shè)計(jì)將是不完整的。

接下來(lái)我們就來(lái)聊聊制定按鈕規(guī)范時(shí)會(huì)遇到的一些問(wèn)題，雖然只有普通按鈕，但還是有很多細(xì)節(jié)值得我們思考學(xué)習(xí)。

大綱如下

1、 按鈕的類(lèi)型

2、 按鈕的狀態(tài)

3、 按鈕的主次關(guān)系

4、 按鈕的設(shè)計(jì)尺寸

5、 按鈕的圓角

6、 按鈕的文字

7、 按鈕的樣式一致

8、 按鈕的色彩

9、 按鈕的擺放位置

1、按鈕的類(lèi)型

按鈕包括很多種，本文主要分享的是我們?cè)谠O(shè)計(jì)中經(jīng)常運(yùn)用到的一些按鈕類(lèi)型。比如普通按鈕、圖標(biāo)按鈕、文字按鈕、下拉按鈕等等

2、按鈕的狀態(tài)

按鈕的狀態(tài)一般分為三種：正常態(tài)、不可點(diǎn)擊狀態(tài)、點(diǎn)擊狀態(tài)。

正常狀態(tài)就不必多講了。按壓狀態(tài)：我常用的一種方式是將按鈕的不透明度改為80%- 85%:

不可點(diǎn)擊狀態(tài)，也推薦兩種實(shí)現(xiàn)方式，一種是降低為30%的透明度，另一種是直接置灰:

3、按鈕的主次關(guān)系

頁(yè)面的內(nèi)容信息可以通過(guò)文字的大小、顏色形成層級(jí)關(guān)系。同樣按鈕設(shè)計(jì)，我們可以在風(fēng)格上進(jìn)行區(qū)分，讓主要按鈕與次要按鈕形成差異，達(dá)到層級(jí)結(jié)構(gòu)的視覺(jué)提升，更好引導(dǎo)用戶(hù)根據(jù)設(shè)定的軌跡進(jìn)行操作。

4、  按鈕的設(shè)計(jì)尺寸

4.1   合適的大小

按鈕需要方便用戶(hù)進(jìn)行點(diǎn)擊操作，如果用戶(hù)點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會(huì)帶給用戶(hù)不友好的體驗(yàn)。若是帶有文本的按鈕，只要文字大小不要小于極限值即 移動(dòng)設(shè)備上 44 * 44 ，通常實(shí)現(xiàn)出來(lái)的按鈕交互熱區(qū)都會(huì)滿足點(diǎn)擊需求。

4.2 按鈕的高度

每個(gè)平臺(tái)都會(huì)有多種型號(hào)的按鈕，我見(jiàn)過(guò)最多的可以分為5種：超大按鈕、大按鈕、中按鈕、小按鈕，超小按鈕，這個(gè)可以根據(jù)自己平臺(tái)的需要來(lái)制定多少種。每一種按鈕都需要有一個(gè)特定高度，那么這個(gè)高度如何制定才比較科學(xué)呢？這里可以推薦一種方式，就是按鈕的高度是文字的三倍左右，這樣看起來(lái)會(huì)比較舒服：

4.2 按鈕的寬度

在不同的頁(yè)面中按鈕的寬度是隨機(jī)的，所以按鈕的具體寬度我們需要具體的功能來(lái)設(shè)置。

比如在閑魚(yú) APP的登錄頁(yè)、購(gòu)買(mǎi)頁(yè)中，按鈕的寬度都不是相同的。

5、  按鈕的圓角

對(duì)于按鈕邊框來(lái)說(shuō)，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。 一般我采用全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值通?？刂圃?1/4H（高度值的四分之一）以?xún)?nèi)。

同時(shí)要注意的一點(diǎn)是，在同一款產(chǎn)品中要保證所有按鈕的  圓角比例是一致的，而不是圓角一致  。如果不同大小按鈕的圓角都是一致的，那會(huì)顯得非常別扭。

6、  按鈕的文字

按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白，不要做“舍不得”的設(shè)計(jì)，使得按鈕給人感覺(jué)很擁擠。如果你把控不好可以分析一些按鈕的負(fù)空間獲取經(jīng)驗(yàn)，看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系。找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中，也許會(huì)讓你的設(shè)計(jì)顯得更加成熟穩(wěn)重。

建議按鈕的文字一般  不要超過(guò)6個(gè)漢字  。

7、  按鈕的樣式一致

在同一頁(yè)面中  按鈕的樣式要形成一致  ，不要給用戶(hù)造成理解上的成本。

8、  按鈕的色彩

顏色部分比較簡(jiǎn)單，一般會(huì)選用規(guī)范體系的顏色即可。但像紅色或者橙色多為行動(dòng)刺激作用，不適合在非品牌色的時(shí)候?yàn)E用。淺灰色或者低飽和度的色系會(huì)帶有不可用、禁用、失效等屬性，需要酌情選擇。

9、  按鈕的擺放位置

按鈕的擺放位置通常要  結(jié)合用戶(hù)的視覺(jué)感受、與用戶(hù)操作習(xí)慣  進(jìn)行擺放。

好了，以上就是關(guān)于按鈕規(guī)范的分享，希望能幫助大家提供一些思路和靈感，歡迎交流！

四、軟件界面設(shè)計(jì)原則有哪些

界面設(shè)計(jì)原則總的來(lái)說(shuō)可以概括成界面在用戶(hù)的掌控之中、保持界面的一致性和減少用戶(hù)記憶的負(fù)擔(dān)這三大點(diǎn)，下面就給大家具體介紹一下界面設(shè)計(jì)原則。(一)界面設(shè)計(jì)原則(1)用戶(hù)原則。人機(jī)界面設(shè)計(jì)首先要確立用戶(hù)類(lèi)型。劃分類(lèi)型可以從不同的角度，視實(shí)際情況而定。確定類(lèi)型后要針對(duì)其特點(diǎn)預(yù)測(cè)他們對(duì)不同界面的反應(yīng)。這就要從多方面設(shè)計(jì)分析。(2)信息最小量原則。人機(jī)界面設(shè)計(jì)要盡量減少用戶(hù)記憶負(fù)擔(dān)，采用有助于記憶的設(shè)計(jì)方案。(3)幫助和提示原則。要對(duì)用戶(hù)的*作命令作出反應(yīng)，幫助用戶(hù)處理問(wèn)題。系統(tǒng)要設(shè)計(jì)有恢復(fù)出錯(cuò)現(xiàn)場(chǎng)的能力，在系統(tǒng)內(nèi)部處理工作要有提示，盡量把主動(dòng)權(quán)讓給用戶(hù)。(4)媒體最佳組合原則。多媒體界面的成功并不在于僅向用戶(hù)提供豐富的媒體，而應(yīng)在相關(guān)理論指導(dǎo)下，注意處理好各種媒體間的關(guān)系，恰當(dāng)選用。(詳見(jiàn)媒體的選擇)(二)界面分析與規(guī)范在人機(jī)界面設(shè)計(jì)中，首先應(yīng)進(jìn)行界面設(shè)計(jì)分析，進(jìn)行用戶(hù)特性分析，用戶(hù)任務(wù)分析，記錄用戶(hù)有關(guān)系統(tǒng)的概念、術(shù)語(yǔ)，這項(xiàng)工作可與多媒體應(yīng)用系統(tǒng)分析結(jié)合進(jìn)行，囊括于用戶(hù)分析報(bào)告里。(三)人機(jī)界面的類(lèi)型任務(wù)設(shè)計(jì)之后，要決定界面類(lèi)型。目前有多種人機(jī)界面設(shè)計(jì)類(lèi)型，各有不同的品質(zhì)和性能，下圖進(jìn)行了詳細(xì)的描述。創(chuàng)造性地使用多媒體環(huán)境，將會(huì)使應(yīng)用程序功能大大增強(qiáng)。要做到這一點(diǎn)，需從如下兩方面考慮：(1)媒體的功能：沒(méi)有任何一種媒體在所有場(chǎng)合都是最優(yōu)的，每種媒體都有其各自擅長(zhǎng)的特定范圍，各種媒體功能參考如下：①文本：在表現(xiàn)概念和刻劃細(xì)節(jié)時(shí)可用表現(xiàn)。②圖形：擅長(zhǎng)表達(dá)思想輪廓及蘊(yùn)含與大量數(shù)值數(shù)據(jù)內(nèi)的趨向性信息，在空間信息方面有較大優(yōu)勢(shì)。③動(dòng)畫(huà)：可用來(lái)突出整個(gè)事物，特別適于表現(xiàn)靜態(tài)圖形無(wú)法表現(xiàn)的動(dòng)作信息。④視頻影像：適于表現(xiàn)其它媒體所難以表現(xiàn)的來(lái)自真實(shí)生活的事件和情景。⑤語(yǔ)音：能使對(duì)話信息突出，特別是在于影像，動(dòng)畫(huà)集合時(shí)能傳遞大量的信息。⑥姿態(tài)與動(dòng)作：在與別的媒體結(jié)合時(shí)具有較強(qiáng)的信息引用能力，可以在相關(guān)信息之間建立起時(shí)間、空間以及邏輯上的聯(lián)系。(2)媒體選擇的結(jié)合與互補(bǔ)：腳本設(shè)計(jì)可根據(jù)內(nèi)容需要分配表達(dá)的媒體，這里要特別注意媒體間的結(jié)合與區(qū)別。提出幾條原則如下：①人們?cè)趩?wèn)題求解過(guò)程中的不同階段對(duì)信息媒體有不同需要。一般在最初的探索階段采用能提供具體信息的媒體如語(yǔ)音、圖像等，而在最后的分析階段多采用描述抽象概念的文本媒體。而一些直觀的信息(圖形、圖像等)介于兩者之間，適于綜合階段。②媒體種類(lèi)對(duì)空間信息的傳遞并沒(méi)有明顯的影響，各種媒體各有所長(zhǎng)。③媒體結(jié)合是多媒體設(shè)計(jì)中需要研究的新課題。媒體之間可以互相支持，也會(huì)互相干擾。多種媒體應(yīng)密切相關(guān)，扣緊一個(gè)表現(xiàn)主題，而不應(yīng)把不相關(guān)的媒體內(nèi)容拼湊在一起。④目前，媒體結(jié)合在技術(shù)上主要通過(guò)在一個(gè)窗口中提供多種媒體的信息片段(空間結(jié)合)和對(duì)聲音、語(yǔ)音、錄相等隨時(shí)間變化的動(dòng)態(tài)媒體加以同步實(shí)現(xiàn)(時(shí)間序列組合).⑤媒體資源并非愈多愈好，如何在語(yǔ)義層上將各種媒體很好的，結(jié)合以更有效地傳遞信息，是要很好地探索的研究課題，也是應(yīng)用系統(tǒng)人機(jī)界面設(shè)計(jì)的關(guān)鍵問(wèn)題。(四)界面設(shè)計(jì)原則中的用戶(hù)心理學(xué)認(rèn)知心理學(xué)，從廣義上來(lái)說(shuō)，就是關(guān)于認(rèn)識(shí)的心理學(xué)。人類(lèi)認(rèn)識(shí)客觀事物，主要就是通過(guò)感覺(jué)、知覺(jué)、注意、記憶、思維想象等來(lái)進(jìn)行，因此，凡是研究人的認(rèn)識(shí)心理過(guò)程的，都屬于認(rèn)識(shí)心理學(xué)。實(shí)際上，我們這里所指的認(rèn)知心理學(xué)是指純粹采用信息加工觀點(diǎn)來(lái)研究認(rèn)知心理學(xué)過(guò)程的心理學(xué)，也就是運(yùn)用信息論以及計(jì)算機(jī)的類(lèi)比、模擬、驗(yàn)證等方法來(lái)研究的的知識(shí)是如何獲得、如何存貯、如何交換、如何取使用的。所以，我們這里所指的現(xiàn)代認(rèn)知心理學(xué)實(shí)質(zhì)是信息加工心理學(xué)。一般地，人們將信息加工心理學(xué)又稱(chēng)為狹義的認(rèn)知心理學(xué)。1.認(rèn)知過(guò)程看和聽(tīng)的過(guò)程構(gòu)成知覺(jué)，圖像和聲音作為刺激的特征被接收并以抽象的方式被編碼，把輸入和記憶中的信息進(jìn)行對(duì)比得出對(duì)刺激的解釋?zhuān)@一過(guò)程就是認(rèn)知。人體信息處理器包括感官，短期記憶、長(zhǎng)期記憶及與其相聯(lián)系的動(dòng)作處理器和認(rèn)知處理器。每種知覺(jué)均有一個(gè)對(duì)應(yīng)的短期存儲(chǔ)器和處理器，人體信息模型總體框圖如左圖4.3.1所示。其中認(rèn)知處理器執(zhí)行的工作就是我們通常所說(shuō)的思維。思維的結(jié)果或被存儲(chǔ)起來(lái)，或送至動(dòng)作處理器控制行動(dòng)。2.認(rèn)知心理學(xué)(1)現(xiàn)代認(rèn)知心理學(xué)的核心： 現(xiàn)代認(rèn)知心理學(xué)的理論實(shí)質(zhì)，就是以計(jì)算機(jī)信息加工的觀點(diǎn)來(lái)研究人的心理學(xué)活動(dòng)，把人腦看作是一種如同計(jì)算機(jī)的信息加工系統(tǒng)。(2)現(xiàn)代認(rèn)知心理學(xué)兩個(gè)關(guān)鍵的重要概念： 現(xiàn)代認(rèn)知心理學(xué)的學(xué)說(shuō)內(nèi)容集中體現(xiàn)在兩個(gè)關(guān)鍵的重要概念上。現(xiàn)代認(rèn)知心理學(xué)的一個(gè)重要的中心概念，就是“信息”。在某種程度上說(shuō)，抽掉了“信息”的概念，認(rèn)知心理學(xué)的理論也就會(huì)散架解體，難以存在。 現(xiàn)代認(rèn)知心理學(xué)的另一個(gè)重要的中心概念，就是“信息加工系統(tǒng)”。信息加工系統(tǒng)的理論，是現(xiàn)代認(rèn)知心理學(xué)理論的主體。(3)現(xiàn)代認(rèn)知心理學(xué)的研究方法：現(xiàn)代認(rèn)知心理學(xué)的研究方法有實(shí)驗(yàn)法、觀察法(包括自我觀察法)以及計(jì)算機(jī)模擬法等。3.人機(jī)交互設(shè)計(jì)遵循的認(rèn)知原則根據(jù)用戶(hù)心理學(xué)和認(rèn)知科學(xué)，提出了如下基本原則指導(dǎo)人機(jī)界面交互設(shè)計(jì)。(1)一致性原則。即從任務(wù)、信息的表達(dá)、界面控制*作等方面與用戶(hù)理解熟悉的模式盡量保持一致。(2)兼容性。在用戶(hù)期望和界面設(shè)計(jì)的現(xiàn)實(shí)之間要兼容，要基于用戶(hù)以前的經(jīng)驗(yàn)。(3)適應(yīng)性。用戶(hù)應(yīng)處于控制地位，因此界面應(yīng)在多方面適應(yīng)用戶(hù)。(4)指導(dǎo)性。界面設(shè)計(jì)應(yīng)通過(guò)任務(wù)提示和反饋信息來(lái)指導(dǎo)用戶(hù)，做到“以用戶(hù)為中心”。(5)結(jié)構(gòu)性。界面設(shè)計(jì)應(yīng)是結(jié)構(gòu)化的，以減少?gòu)?fù)雜度。(6)經(jīng)濟(jì)性。界面設(shè)計(jì)要用最少的支持用戶(hù)所必須步驟來(lái)實(shí)現(xiàn)。在界面設(shè)計(jì)原則指導(dǎo)下，提出以下幾點(diǎn)針對(duì)界面設(shè)計(jì)與屏幕設(shè)計(jì)的參考：(1)由具體到抽象。即首先通過(guò)多媒體界面給用戶(hù)提供具體的對(duì)象。然后從具體對(duì)象、內(nèi)容中讓學(xué)習(xí)者歸納出抽象的概念或原理，或用模擬系統(tǒng)來(lái)引導(dǎo)出抽象的原理。(2)由可視化的內(nèi)容顯示不可見(jiàn)的內(nèi)容。盡可能利用數(shù)字、圖解、動(dòng)畫(huà)、色彩等清晰爽目的對(duì)象顯示原理、公式或抽象的概念。(3)由模擬引導(dǎo)創(chuàng)新。突出人機(jī)交互，盡量啟發(fā)用戶(hù)的積極思維和參與，并激起用戶(hù)的學(xué)習(xí)和創(chuàng)造欲望。(4)合理運(yùn)用再認(rèn)與再憶，減少用戶(hù)短期記憶的負(fù)擔(dān)。所謂再認(rèn)就是從系統(tǒng)給定的幾個(gè)可能答案中要用戶(hù)選擇一個(gè)正確的或最好的。再憶即要求用戶(hù)輸入正確的答案或關(guān)鍵字。(5)考慮用戶(hù)的個(gè)別差異，使用用戶(hù)語(yǔ)言。以上五點(diǎn)具體體現(xiàn)了“由易而難，逐步強(qiáng)化。”這一源于認(rèn)知心理學(xué)的原則。上文介紹的界面設(shè)計(jì)原則應(yīng)該讓大家心中對(duì)界面設(shè)計(jì)原則有了一定的認(rèn)識(shí)，當(dāng)然，因?yàn)榻缑嬖O(shè)計(jì)是復(fù)雜的需要多學(xué)科參與的，心理學(xué)、語(yǔ)言學(xué)、設(shè)計(jì)學(xué)等學(xué)科都在里面占有重要作用。而用戶(hù)界面是與程序交流的唯一方式，為了給用戶(hù)提供最便捷的服務(wù)，界面設(shè)計(jì)原則是一定要遵守的。

以上就是小編對(duì)于ui設(shè)計(jì)的基本原則問(wèn)題和相關(guān)問(wèn)題的解答了，如有疑問(wèn)，可撥打網(wǎng)站上的電話，或添加微信。

推薦閱讀：

學(xué)了UI能做平面和電商嗎（學(xué)了ui能做平面和電商嗎知乎）

免費(fèi)ui素材網(wǎng)站app（ui素材免費(fèi)下載）

上甲UI設(shè)計(jì)（上海ua設(shè)計(jì)）

客服能看到哪些信息（客服能看到哪些信息呢）

0經(jīng)驗(yàn)轉(zhuǎn)行做短視頻運(yùn)營(yíng)行不行？