正文

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

發(fā)布時間：2023-04-04 00:00:12 稿源：創(chuàng)意嶺閱讀： 67 當(dāng)前文章關(guān)鍵詞排名出租

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

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

文章目錄列表:

1、UI設(shè)計中的5大金手指原則
2、什么是ui，網(wǎng)站ui設(shè)計應(yīng)該注意些什么，有哪些基本原則
3、「UI設(shè)計」如何做好按鈕設(shè)計的9個基本原則
4、軟件界面設(shè)計原則有哪些

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

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

一、先搞清楚：給誰用?在什么時候用?

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

二、搞清楚：用戶在這個頁面要做且必做的一件重要的事是什么

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

三、重點優(yōu)先級：功能+交互操作+視覺

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

四、可識別性是第一視覺原則

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

五、取舍：功能性能大于視覺

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

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

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

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

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

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

按鈕是任何用戶界面當(dāng)中（無論是桌面還是移動用戶界面）必備的交互元素：甚至可以說，如果頁面中沒有一個按鈕，整個頁面設(shè)計將是不完整的。

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

大綱如下

1、按鈕的類型

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

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

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

5、按鈕的圓角

6、按鈕的文字

7、按鈕的樣式一致

8、按鈕的色彩

9、按鈕的擺放位置

1、按鈕的類型

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

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

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

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

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

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

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

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

4.1 合適的大小

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

4.2 按鈕的高度

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

4.2 按鈕的寬度

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

比如在閑魚 APP的登錄頁、購買頁中，按鈕的寬度都不是相同的。

5、按鈕的圓角

對于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。一般我采用全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值通常控制在 1/4H（高度值的四分之一）以內(nèi)。

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

6、按鈕的文字

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

建議按鈕的文字一般不要超過6個漢字。

7、按鈕的樣式一致

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

8、按鈕的色彩

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

9、按鈕的擺放位置

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

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

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

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

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