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

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

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

1、簡易性

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

2、高效性

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

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

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

4、一致性

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

5、清晰

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

6、用戶的熟悉程度

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

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

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

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

8、層次

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

9、靈活性

簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。

10、安全性

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

11、人性化

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

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

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

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

2、深層次的用戶體驗研究與分析

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

3、初稿設(shè)計

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

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

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

5、前端對接

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

6、測試與反饋

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

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

1、一致性

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

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

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

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

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

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

2、準(zhǔn)確性

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

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

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

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

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

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

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

3、布局

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

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

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

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

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

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

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

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

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

4、系統(tǒng)操作

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

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

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

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

● 避免使用鼠標(biāo)雙擊動作，不僅會增加用戶操作難度，還可能會引過用戶誤會，認(rèn)為功能點擊無效。

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

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

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

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

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

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

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

1、Adobe Photoshop

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

2、Sketch

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

3、Figma

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

4、Adobe Illustrator

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

Adobe Illustrator

5、Adobe XD

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

6、Canva

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

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

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

1、布局要簡潔

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

2、色彩運(yùn)用

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

3、注意實用性

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

4、信息歸類

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

最后總結(jié)

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

修改于2023-08-24