一、系統(tǒng)界面設(shè)計(jì)是什么意思

系統(tǒng)界面設(shè)計(jì)一般是指B/S結(jié)構(gòu)的后臺(tái)管理系統(tǒng)界面設(shè)計(jì)，是對(duì)后臺(tái)管理系統(tǒng)的使用界面進(jìn)行視覺(jué)美化、風(fēng)格規(guī)范化的設(shè)計(jì)，從而滿(mǎn)足軟件專(zhuān)業(yè)化、標(biāo)準(zhǔn)化的需求，以達(dá)到合理的布局、便捷的操作以及統(tǒng)一的視覺(jué)效果。系統(tǒng)界面設(shè)計(jì)包括登錄界面設(shè)計(jì)、主界面設(shè)計(jì)、信息列表設(shè)計(jì)、操作頁(yè)面設(shè)計(jì)、按鈕設(shè)計(jì)、菜單設(shè)計(jì)、圖標(biāo)設(shè)計(jì)等。

二、系統(tǒng)界面設(shè)計(jì)的原則

1、簡(jiǎn)易性

系統(tǒng)界面的簡(jiǎn)潔是要讓用戶(hù)便于使用、便于了解產(chǎn)品，并能減少用戶(hù)發(fā)生錯(cuò)誤選擇的可能性。值得注意的是，設(shè)計(jì)中不能讓系統(tǒng)界面設(shè)計(jì)太過(guò)引人注目，而要弱化程序本身的功能。需要平衡視覺(jué)設(shè)計(jì)和功能，尋找最佳點(diǎn)，消除華麗的裝飾和不必要的元素，UI界面要簡(jiǎn)單直接的頁(yè)面邏輯和直觀必需的元素組成。

2、高效性

熟悉用戶(hù)的流程，了解用戶(hù)的目標(biāo)，然后在此基礎(chǔ)上盡量簡(jiǎn)化流程，使得用戶(hù)能夠便捷快速的達(dá)成目標(biāo)。在此過(guò)程中，仔細(xì)考慮系統(tǒng)界面每個(gè)功能細(xì)節(jié)，規(guī)避可能存在的漏洞，幫助用戶(hù)快速完成用戶(hù)流程。

3、記憶負(fù)擔(dān)最小化

人腦不是電腦，在設(shè)計(jì)系統(tǒng)界面時(shí)必須要考慮人類(lèi)大腦處理信息的限度。人類(lèi)的短期記憶有限且極不穩(wěn)定，24小時(shí)內(nèi)存在約25%的遺忘率。所以對(duì)用戶(hù)來(lái)說(shuō)，瀏覽信息要比記憶更容易。

4、一致性

用戶(hù)界面可視化設(shè)計(jì)中最重要的原則是一致性原則。用戶(hù)期待用自己的體驗(yàn)探索更多的內(nèi)容，探索是否有效取決于設(shè)計(jì)的一致性是否足夠好。具體表現(xiàn)是為用戶(hù)提供一個(gè)統(tǒng)一的界面，這意味著用戶(hù)可以從一個(gè)界面操作自己，從而減少操作和學(xué)習(xí)的時(shí)間。這個(gè)過(guò)程中的體驗(yàn)直接移植到另一個(gè)界面，使整個(gè)ui體驗(yàn)更加流暢。

5、清晰

清晰性應(yīng)該是所有ui界面的基本屬性。請(qǐng)記住， UI界面是為了讓用戶(hù)更容易與系統(tǒng)交互，因?yàn)樗枰軌蚺c用戶(hù)清楚地交互。保持一個(gè)清晰的ui界面設(shè)計(jì)并不困難。首先，要保證標(biāo)簽和標(biāo)簽文本的操作清晰指向，并允許信息的清晰傳遞，這樣用戶(hù)才能快速理解交互的方向性。盡量不要在ui中使用冗長(zhǎng)、復(fù)雜、難以記住的文本標(biāo)簽。它越復(fù)雜，對(duì)整體用戶(hù)體驗(yàn)的影響就越大。

6、用戶(hù)的熟悉程度

用戶(hù)體驗(yàn)設(shè)計(jì)的一個(gè)重要目標(biāo)是要讓用戶(hù)能夠憑借直覺(jué)來(lái)操作UI界面。用戶(hù)要能夠自然地理解其中的內(nèi)容，操作自然就不難了，也就是說(shuō)，要讓用戶(hù)對(duì)你的界面產(chǎn)生"熟悉感"。所以，要充分利用用戶(hù)對(duì)于系統(tǒng)界面設(shè)計(jì)所熟悉的部分。

當(dāng)用戶(hù)對(duì)UI界面抱有熟悉感的時(shí)候，通常意味著他們對(duì)于這個(gè)設(shè)計(jì)有所了解，甚至知道怎么交互，他們明白操作之后大概會(huì)發(fā)生什么，也知道哪些事情不應(yīng)該做。所以，如果你能利用好用戶(hù)對(duì)于交互和界面模式的熟悉來(lái)進(jìn)行設(shè)計(jì)的話(huà)，能讓用戶(hù)更快上手操作。

7、從用戶(hù)習(xí)慣考慮

想用戶(hù)所想，做用戶(hù)所做。用戶(hù)總是按照他們自己的方法理解和使用。通過(guò)比較真實(shí)與虛擬的事物，完成更好的設(shè)計(jì)。好的UI界面是隱形的，華麗的裝飾和不必要的元素都已經(jīng)被剔除，簡(jiǎn)單直接的頁(yè)面邏輯和直觀必要的元素構(gòu)成了這樣的UI界面，專(zhuān)注于核心的用戶(hù)體驗(yàn)。

8、層次

系統(tǒng)界面的視覺(jué)層次是非常重要且常常被忽視的一個(gè)屬性，它能夠幫助用戶(hù)專(zhuān)注重要的內(nèi)容。如果你想讓界面中每個(gè)內(nèi)容都看起來(lái)很重要，那么只會(huì)單純地讓信息過(guò)載，讓每個(gè)元素都分?jǐn)傆脩?hù)的注意力，最終只會(huì)讓整個(gè)設(shè)計(jì)顯得混亂不堪。不同尺寸的字體、不同的色彩和不同的控件最終應(yīng)該是相互搭配，構(gòu)成層次，有輕重緩急地呈現(xiàn)給用戶(hù)，將復(fù)雜的結(jié)構(gòu)簡(jiǎn)單化，幫助用戶(hù)完成任務(wù)。

9、靈活性

簡(jiǎn)單來(lái)說(shuō)就是要讓用戶(hù)方便的使用，但不同于上述。即互動(dòng)多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤(pán)或手柄、界面)。

10、安全性

用戶(hù)能自由的作出選擇，且所有選擇都是可逆的。在用戶(hù)作出危險(xiǎn)的選擇時(shí)有信息介入系統(tǒng)的提示。這樣會(huì)讓用戶(hù)會(huì)覺(jué)得很安全，自己的權(quán)益不會(huì)遭到損失！

11、人性化

高效、用戶(hù)滿(mǎn)意度是人性化的體現(xiàn)。應(yīng)該有一個(gè)專(zhuān)家和初級(jí)玩家系統(tǒng)，即用戶(hù)可以根據(jù)自己的習(xí)慣自定義界面并保存設(shè)置。因此，一個(gè)好的系統(tǒng)界面設(shè)計(jì)師，在技巧方面，不僅可以畫(huà)圖標(biāo)，而且界面會(huì)有很多的互動(dòng)知識(shí)。

三、系統(tǒng)界面設(shè)計(jì)流程

1、產(chǎn)品需求分析

當(dāng)一個(gè)UI設(shè)計(jì)師拿到項(xiàng)目或者需求之后，正常情況是交互設(shè)計(jì)師細(xì)化過(guò)后的交互文檔，里面包含交互原型。而作為UI設(shè)計(jì)師所要做的就是理解并吃透文檔，包括里面交互邏輯，具體的操作方式，流程，反饋等，需要不斷核對(duì)和確認(rèn)。

2、深層次的用戶(hù)體驗(yàn)研究與分析

對(duì)已定義的目標(biāo)用戶(hù)群體及特征進(jìn)行深層次的剖析，包括目標(biāo)用戶(hù)群體的年齡，性別及目標(biāo)戶(hù)群體的一些情感習(xí)慣，心理特征等，這樣就可以有針對(duì)的對(duì)這個(gè)產(chǎn)品構(gòu)想設(shè)計(jì)出一個(gè)大概的色系搭配及元素控件設(shè)計(jì)。

3、初稿設(shè)計(jì)

結(jié)合產(chǎn)品設(shè)計(jì)原型和自己對(duì)產(chǎn)品的體驗(yàn)研究分析結(jié)合起來(lái)設(shè)計(jì)初稿。（大概的色系搭配，框架布局，元素控件，圖標(biāo)ICON等設(shè)計(jì)都可以在這一步呈現(xiàn)出來(lái)）

4、視覺(jué)規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)

初稿設(shè)計(jì)完成后，就是要做好視覺(jué)規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)。視覺(jué)規(guī)范設(shè)計(jì)就是要對(duì)整個(gè)產(chǎn)品的顏色，字體，字號(hào)，元素控件，圖標(biāo)ICON，間距及交互效果做個(gè)統(tǒng)一的規(guī)范，這樣才可以做出一個(gè)成熟的產(chǎn)品，對(duì)前端制作也是有很大的好處的。

5、前端對(duì)接

確認(rèn)完設(shè)計(jì)稿后，進(jìn)入ui設(shè)計(jì)師與前端工程師對(duì)接的階段，ui設(shè)計(jì)師需要提供切圖，標(biāo)注，設(shè)計(jì)說(shuō)明文檔以及設(shè)計(jì)圖給到前端工程師，一般常用的與開(kāi)發(fā)對(duì)接的工具有藍(lán)湖，figma。這個(gè)階段需要保持跟開(kāi)發(fā)頻繁地溝通，確?？梢院芎玫剡€原設(shè)計(jì)稿（實(shí)際工作中很難苛求百分百還原），特別是需要設(shè)計(jì)師自身要懂得一點(diǎn)前端代碼知識(shí)，可以更好地進(jìn)行溝通。

6、測(cè)試與反饋

產(chǎn)品進(jìn)入到測(cè)試階段，需要測(cè)試人員介入，一般這個(gè)時(shí)候是先部門(mén)內(nèi)部進(jìn)行可用性測(cè)試，然后擴(kuò)大到整個(gè)公司，反復(fù)測(cè)試幾輪之后確保沒(méi)有很大的問(wèn)題之后才可以發(fā)包給客戶(hù)測(cè)試或者上線(xiàn)，而ui設(shè)計(jì)師這個(gè)時(shí)候就要收集反饋，收集意見(jiàn)，與產(chǎn)品一起討論改進(jìn)方案。

四、系統(tǒng)界面設(shè)計(jì)規(guī)范

1、一致性

堅(jiān)持以用戶(hù)體驗(yàn)為中心設(shè)計(jì)原則，界面直觀、簡(jiǎn)潔，操作方便快捷，用戶(hù)接觸軟件后對(duì)界面上對(duì)應(yīng)的功能一目了然、不需要太多培訓(xùn)就可以方便使用本應(yīng)用系統(tǒng)。

字體：保持字體及顏色一致，避免一套主題出現(xiàn)多個(gè)字體不可修改的字段，統(tǒng)一用深灰色文字顯示。

對(duì)齊：保持頁(yè)面內(nèi)元素對(duì)齊方式的一致，如無(wú)特殊情況應(yīng)避免同一頁(yè)面出現(xiàn)多種數(shù)據(jù)對(duì)齊方式。

表單錄入：在包含必須與選填的頁(yè)面中，必須在必填項(xiàng)旁邊給出醒目標(biāo)識(shí)（*）；　　-各類(lèi)型數(shù)據(jù)輸入需限制文本類(lèi)型，并做格式校驗(yàn)如電話(huà)號(hào)碼輸入只允許輸入數(shù)字、郵箱地址需要包含"@"等，在用戶(hù)輸入有誤時(shí)給出明確提示。

鼠標(biāo)手勢(shì)：可點(diǎn)擊的按鈕、鏈接需要切換鼠標(biāo)手勢(shì)至手型；

保持功能及內(nèi)容描述一致：避免同一功能描述使用多個(gè)詞匯，如編輯和修改，新增和增加，刪除和清除混用等。建議在項(xiàng)目開(kāi)發(fā)階段建立一個(gè)產(chǎn)品詞典，包括產(chǎn)品中常用術(shù)語(yǔ)及描述，設(shè)計(jì)或開(kāi)發(fā)人員嚴(yán)格按照產(chǎn)品詞典中的術(shù)語(yǔ)詞匯來(lái)展示文字信息。

2、準(zhǔn)確性

使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫(xiě)和顏色，顯示信息的含義應(yīng)該非常明確，用戶(hù)不必再參考其它信息源。

● 顯示有意義的出錯(cuò)信息，而不是單純的程序錯(cuò)誤代碼。

● 避免使用文本輸入框來(lái)放置不可編輯的文字內(nèi)容，不要文本將輸入框當(dāng)成標(biāo)簽使用。

● 使用縮進(jìn)和文本來(lái)輔助理解。

● 使用用戶(hù)語(yǔ)言詞匯，而不是單純的專(zhuān)業(yè)計(jì)算機(jī)術(shù)語(yǔ)。

● 高效地使用顯示器的顯示空間，但要避免空間過(guò)于擁擠。

● 保持語(yǔ)言的一致性，如"確定"對(duì)應(yīng)"取消","是"對(duì)應(yīng)"否"。

3、布局

在進(jìn)行系統(tǒng)界面設(shè)計(jì)時(shí)需要充分考慮布局的合理化問(wèn)題，遵循用戶(hù)從上而下，自左向右瀏覽、操作習(xí)慣，避免常用業(yè)務(wù)功能按鍵排列過(guò)于分散，以造成用戶(hù)鼠標(biāo)移動(dòng)距離過(guò)長(zhǎng)的弊端。多做"減法"運(yùn)算，將不常用的功能區(qū)塊隱藏，以保持界面的簡(jiǎn)潔，使用戶(hù)專(zhuān)注于主要業(yè)務(wù)操作流程，有利于提高軟件的易用性及可用性。

菜單：保持菜單簡(jiǎn)潔性及分類(lèi)的準(zhǔn)確性，避免菜單深度超過(guò)3層。菜單中功能是需要打開(kāi)一個(gè)新頁(yè)面來(lái)完成的，需要在菜單名字后面加上"…"。

按鈕：確認(rèn)操作按鈕放置左邊，取消或關(guān)閉按鈕放置于右邊。

功能：未完成功能必須隱藏處理，不要置于頁(yè)面內(nèi)容中，以免引起誤會(huì)。

排版：所有文字內(nèi)容排版避免貼邊顯示（頁(yè)面邊緣），盡量保持10-20像素的間距并在垂直方向上居中對(duì)齊；各控件元素間也保持至少10像素以上的間距，并確保控件元素不緊貼于頁(yè)面邊沿。

表格數(shù)據(jù)列表：字符型數(shù)據(jù)保持左對(duì)齊，數(shù)值型右對(duì)齊（方便閱讀對(duì)比），并根據(jù)字段要求，統(tǒng)一顯示小數(shù)位位數(shù)。

滾動(dòng)條：頁(yè)面布局設(shè)計(jì)時(shí)應(yīng)避免出現(xiàn)橫向滾動(dòng)條。

頁(yè)面導(dǎo)航（面包屑導(dǎo)航）：在頁(yè)面顯眼位置應(yīng)該出現(xiàn)面包屑導(dǎo)航欄，讓用戶(hù)知道當(dāng)前所在頁(yè)面的位置，并明確導(dǎo)航結(jié)構(gòu)，如：首頁(yè)>新聞中心>歐科智能招商服務(wù)平臺(tái)正式發(fā)布，其中帶下劃線(xiàn)部分為可點(diǎn)擊鏈接。

信息提示窗口：信息提示窗口應(yīng)位于當(dāng)前頁(yè)面的居中位置，并適當(dāng)弱化背景層以減少信息干擾，讓用戶(hù)把注意力集中在當(dāng)前的信息提示窗口。一般做法是在信息提示窗口的背面加一個(gè)半透明顏色填充的遮罩層。

4、系統(tǒng)操作

● 盡量確保用戶(hù)在不使用鼠標(biāo)（只使用鍵盤(pán)）的情況下也可以流暢地完成一些常用的業(yè)務(wù)操作，各控件間可以通過(guò)Tab鍵進(jìn)行切換，并將可編輯的文本全選處理。

● 查詢(xún)檢索類(lèi)頁(yè)面，在查詢(xún)條件輸入框內(nèi)按回車(chē)應(yīng)該自動(dòng)觸發(fā)查詢(xún)操作。

● 在進(jìn)行一些不可逆或者刪除操作時(shí)應(yīng)該有信息提示用戶(hù)，并讓用戶(hù)確認(rèn)是否繼續(xù)操作，必要時(shí)應(yīng)該把操作造成的后果也告訴用戶(hù)。

● 信息提示窗口的"確認(rèn)"及"取消"按鈕需要分別映射鍵盤(pán)按鍵"Enter"和"ESC"。

● 避免使用鼠標(biāo)雙擊動(dòng)作，不僅會(huì)增加用戶(hù)操作難度，還可能會(huì)引過(guò)用戶(hù)誤會(huì)，認(rèn)為功能點(diǎn)擊無(wú)效。

● 表單錄入頁(yè)面，需要把輸入焦點(diǎn)定位到第一個(gè)輸入項(xiàng)。用戶(hù)通過(guò)Tab鍵可以在輸入框或操作按鈕間切換，并注意Tab的操作應(yīng)該遵循從左向右、從上而下的順序。

5、系統(tǒng)響應(yīng)

系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過(guò)長(zhǎng)，用戶(hù)就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過(guò)快也會(huì)影響到用戶(hù)的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則：

● 2-5秒窗口顯示處理信息提示，避免用戶(hù)誤認(rèn)為沒(méi)響應(yīng)而重復(fù)操作；

● 5秒以上顯示處理窗口，或顯示進(jìn)度條；

● 一個(gè)長(zhǎng)時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。

五、系統(tǒng)界面設(shè)計(jì)常用工具

1、Adobe Photoshop

Adobe Photoshop是一種優(yōu)質(zhì)的網(wǎng)頁(yè)設(shè)計(jì)工具。它有很多選項(xiàng)來(lái)創(chuàng)建和編輯您的Web模板。它適用于圖像，您可以為您的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)建圖形。通過(guò)無(wú)限的顏色和漸變選項(xiàng)，可以制作出最佳的模板設(shè)計(jì)。它為您提供了一個(gè)空白的畫(huà)布，讓您的想象力生動(dòng)。您可以按照自己的方式附加圖像，移動(dòng)元素，繪制框，裁剪邊緣以及編輯模板。它適用于圖層，這使您的工作非常簡(jiǎn)單。您可以顯示/隱藏圖層以有效管理Web設(shè)計(jì)元素。

2、Sketch

Sketch是適用于Mac設(shè)備的網(wǎng)頁(yè)設(shè)計(jì)軟件。它是專(zhuān)注于創(chuàng)建Web模板和設(shè)計(jì)的專(zhuān)業(yè)工具。它適用于矢量圖像，因此您將獲得最佳，最高分辨率的結(jié)果。工具欄和選項(xiàng)非常簡(jiǎn)單。Sketch提供了創(chuàng)建和管理Web設(shè)計(jì)項(xiàng)目的完全靈活性。它具有鏡像功能，允許在多種設(shè)備（如手機(jī)或平板電腦）上測(cè)試您的網(wǎng)頁(yè)設(shè)計(jì)模板，可以100％確定您的網(wǎng)頁(yè)設(shè)計(jì)將如何在不同的屏幕尺寸上顯示。

3、Figma

Figma是一個(gè)多用戶(hù)網(wǎng)頁(yè)設(shè)計(jì)軟件。它允許您與設(shè)計(jì)團(tuán)隊(duì)聯(lián)系以使用相同的Web模板。它是與客戶(hù)共享項(xiàng)目并在模板設(shè)計(jì)上進(jìn)行實(shí)時(shí)更改的智能工具。Figma將網(wǎng)頁(yè)設(shè)計(jì)提升到一個(gè)全新的水平，它的編輯面板中包含字體，顏色和其他設(shè)置。用于創(chuàng)建圖標(biāo)或完整的Web模板時(shí)，工具和選項(xiàng)非常棒。

4、Adobe Illustrator

Adobe Illustrator 提供了一個(gè)完美的像素級(jí)設(shè)計(jì)環(huán)境，您可以在其中創(chuàng)建靈活且流暢的 Web 元素。它為您提供了創(chuàng)建清爽利落的 Web 布局所需的一切，包括矢量圖形、響應(yīng)式媒體圖標(biāo)、可伸縮組件、CSS 生成、SVG 導(dǎo)出、線(xiàn)框以及可重復(fù)使用的符號(hào)。

Adobe Illustrator

5、Adobe XD

adobe家打造的一款集頁(yè)面設(shè)計(jì)和交互原型為一體的設(shè)計(jì)工具，支持多人在線(xiàn)實(shí)時(shí)協(xié)作功能。另外在兼容性上優(yōu)勢(shì)最大，能跟全家桶產(chǎn)品進(jìn)行聯(lián)動(dòng)；但是在資源和功能這兩方面相對(duì)于前面兩款就比較弱勢(shì)了。

6、Canva

Canva是一款免費(fèi)的設(shè)計(jì)工具。它不能被認(rèn)為是一個(gè)成熟的網(wǎng)頁(yè)設(shè)計(jì)軟件，但你可以使用Canva創(chuàng)建有趣和有吸引力的設(shè)計(jì)來(lái)支持你的網(wǎng)頁(yè)模板。它非常適合構(gòu)建可以添加到Web設(shè)計(jì)中的圖像。

它配備了數(shù)百個(gè)模板，使您的工作更輕松。如果您沒(méi)有任何設(shè)計(jì)技能，可以使用Canva中的模板，輕松地為您的Web模板構(gòu)建具有專(zhuān)業(yè)外觀的圖像。

六、系統(tǒng)界面設(shè)計(jì)注意事項(xiàng)

1、布局要簡(jiǎn)潔

不管是用戶(hù)的瀏覽體驗(yàn)還是操作體驗(yàn)，系統(tǒng)界面設(shè)計(jì)都應(yīng)當(dāng)盡量將整體的布局設(shè)計(jì)簡(jiǎn)單化，讓用戶(hù)可以一目了然。

2、色彩運(yùn)用

系統(tǒng)界面的色彩運(yùn)用傾向于少而精，少代表了整體頁(yè)面的顏色使用；精代表了在配色的時(shí)候盡可能的協(xié)調(diào)。

3、注意實(shí)用性

UI設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)，首要考慮的就是該產(chǎn)品的實(shí)用性。只考慮設(shè)計(jì)本身，而脫離產(chǎn)品使用，那產(chǎn)品注定是失敗的。

4、信息歸類(lèi)

系統(tǒng)界面中的信息操作頁(yè)面頁(yè)面比較多，在進(jìn)行系統(tǒng)操作界面設(shè)計(jì)時(shí)，如果操作項(xiàng)過(guò)多，則要注意將操作項(xiàng)進(jìn)行歸類(lèi)并分步驟進(jìn)行，有利于用戶(hù)更快更有效的完成操作。

最后總結(jié)

優(yōu)化猩SEO：很多產(chǎn)品的應(yīng)用都是通過(guò)B/S結(jié)構(gòu)實(shí)現(xiàn)的，系統(tǒng)界面設(shè)計(jì)的需求量很大，尤其是手機(jī)的普及與云計(jì)算的發(fā)展，系統(tǒng)界面設(shè)計(jì)不僅要考慮PC端的，還要考慮移動(dòng)端產(chǎn)品界面設(shè)計(jì)。

修改于2023-08-24