-
軟件界面設計
鎖定
- 中文名
- 軟件界面設計
- 滿 足
- 軟件專業化標準化
- 包 括
- 軟件啓動封面設計
- 主要部分
- UI
- 設計關鍵
- 軟件啓動封面設計--Splash
軟件界面設計概念
UI(User Interface)即用户界面，也稱人機接口。是指用户和某些系統進行交互方法的集合，這些系統不單單指電腦程序，還包括某種特定的機器，設備，複雜的工具等。User interface也可以稱之為用户接口或人機接口，是系統和用户之間進行交互和信息交換的媒介，實現信息的內部形式與人類可以接受形式之間的轉換。它是介於使用者與硬件而設計彼此之間互動溝通相關軟件，目的在使得使用者能夠方便有效率地去操作硬件以達成雙向之互動，完成所希望藉助硬件完成之工作。用户接口定義廣泛，包含了人機交互與圖形使用者接口，凡參與人類與機械的信息交流的領域都存在着用户接口。
軟件設計可分為兩個部分：編碼設計與UI設計。編碼設計大家都很熟悉，但是 UI設計還是一個很陌生的詞，即使一些專門從事網站與多媒體設計的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 interface的縮寫。從字面上看是用户與界面2個組成部分，但實際上還包括用户與界面之間的交互關係。
軟件界面設計設計關鍵
在設計的過程中有較多注意的關鍵問題，以下列出幾點:
(1)軟件啓動封面設計--Splash
應使軟件啓動封面最終為高清晰度的圖像，如軟件啓動封面需在不同的平台、操作系統上使用將考慮轉換不同的格式，並且對選用的色彩不宜超過256色，最好為216色安全色。軟件啓動封面大小多為主流顯示器分辨率的1/6大。如果是系列軟件將考慮整體設計的統一和延續性。在上面應該醒目的標註製作或支持的公司標誌、產品商標，軟件名稱，版本號，網址，版權聲明，序列號等信息，以樹立軟件形象，方便使用者或購買者在軟件啓動的時候得到提示。插圖宜使用具有獨立版權的，象徵性強的，識別性高的，視覺傳達效果好的圖形，若使用攝影也應該進行數位處理，以形成該軟件的個性化特徵
(2)軟件框架設計
軟件的框架設計就複雜得多，因為涉及軟件的使用功能，應該對該軟件產品的程序和使用比較瞭解，這就需要設計師有一定的軟件跟進經驗，能夠快速的學習軟件產品，並且在和軟件產品的程序開發員及程序使用對象進行共同溝通，以設計出友好的，獨特的，符合程序開發原則的軟件框架。軟件框架設計應該簡潔明快，儘量少用無謂的裝飾，應該考慮節省屏幕空間，各種分辨率的大小，縮放時的狀態和原則，並且為將來設計的按鈕，菜單，標籤，滾動條及狀態欄預留位置。設計中將整體色彩組合進行合理搭配，將軟件商標放在顯著位置，主菜單應放在左邊或上邊，滾動條放在右邊，狀態欄放在下邊，以符合視覺流程和用户使用心理
(3)軟件按鈕設計
軟件按鈕設計應該具有交互性，即應該有3到6種狀態效果：點擊時狀態；鼠標放在上面但未點擊的狀態；點擊前鼠標未放在上面時的狀態；點擊後鼠標未放在上面時的狀態；不能點擊時狀態；獨立自動變化的狀態。按鈕應具備簡潔的圖示效果，應能夠讓使用者產生功能關聯反應，羣組內按鈕應該風格統一，功能差異大的按鈕應該有所區別
(4)軟件面板設計
軟件面板設計應該具有縮放功能，面板應該對功能區間劃分清晰，應該和對話框，彈出框等風格匹配，儘量節省空間，切換方便。
(5)菜單設計
菜單設計一般有選中狀態和未選中狀態，左邊應為名稱，右邊應為快捷鍵，如果有下級菜單應該有下級箭頭符號，不同功能區間應該用線條分割。
(6)標籤設計
標籤設計應該注意轉角部分的變化，狀態可參考按鈕。
(7)圖標設計
圖標設計色彩不宜超過64色，大小為16x16、32x32兩種，圖標設計是方寸藝術，應該加以着重考慮視覺衝擊力，它需要在很小的範圍表現出軟件的內涵，所以很多圖標設計師在設計圖標時使用簡單的顏色，利用眼睛對色彩和網點的空間混合效果，做出了許多精彩圖標。
(8)滾動條及狀態欄設計
滾動條主要是為了對區域性空間的固定大小中內容量的變換進行設計，應該有上下箭頭，滾動標等，有些還有翻頁標。狀態欄是為了對軟件當前狀態的顯示和提示。
(9)安裝過程設計
安裝過程設計主要是將軟件安裝的過程進行美化，包括對軟件功能進行圖示化。
(10)包裝及商品化
最後軟件產品的包裝應該考慮保護好軟件產品，功能的宣傳融合於美觀中，可以印刷部分產品介紹，產品界面設計。
軟件界面設計設計規範
軟件界面設計一致性
- 字體 -保持字體及顏色一致，避免一套主題出現多個字體； -不可修改的字段，統一用灰色文字顯示。
- 對齊 -保持頁面內元素對齊方式的一致，如無特殊情況應避免同一頁面出現多種數據對齊方式。
- 表單錄入 -在包含必須與選填的頁面中，必須在必填項旁邊給出醒目標識（*）； -各類型數據輸入需限制文本類型，並做格式校驗如電話號碼輸入只允許輸入數字、郵箱地址需要包含“@”等，在用户輸入有誤時給出明確提示。
- 鼠標手勢 -可點擊的按鈕、鏈接需要切換鼠標手勢至手型；
- 保持功能及內容描述一致 -避免同一功能描述使用多個詞彙，如編輯和修改，新增和增加，刪除和清除混用等。建議在項目開發階段建立一個產品詞典，包括產品中常用術語及描述，設計或開發人員嚴格按照產品詞典中的術語詞彙來展示文字信息。
軟件界面設計準確性
使用一致的標記、標準縮寫和顏色，顯示信息的含義應該非常明確，用户不必再參考其它信息源。
- 顯示有意義的出錯信息，而不是單純的程序錯誤代碼。
- 避免使用文本輸入框來放置不可編輯的文字內容，不要文本將輸入框當成標籤使用。
- 使用縮進和文本來輔助理解。
- 使用用户語言詞彙，而不是單純的專業計算機術語。
- 高效地使用顯示器的顯示空間，但要避免空間過於擁擠。
- 保持語言的一致性，如“確定”對應“取消”,“是”對應“否”。
軟件界面設計佈局
在進行UI設計時需要充分考慮佈局的合理化問題，遵循用户從上而下，自左向右瀏覽、操作習慣，避免常用業務功能按鍵排列過於分散，以造成用户鼠標移動距離過長的弊端。多做“減法”運算，將不常用的功能區塊隱藏，以保持界面的簡潔，使用户專注於主要業務操作流程，有利於提高軟件的易用性及可用性。
- 菜單 -保持菜單簡潔性及分類的準確性，避免菜單深度超過3層。 -菜單中功能是需要打開一個新頁面來完成的，需要在菜單名字後面加上“…”。【只適用於C/S架構，B/S請無視】。
- 按鈕 確認操作按鈕放置左邊，取消或關閉按鈕放置於右邊。
- 功能 -未完成功能必須隱藏處理，不要置於頁面內容中，以免引起誤會。
- 排版 -所有文字內容排版避免貼邊顯示（頁面邊緣），儘量保持10-20像素的間距並在垂直方向上居中對齊；各控件元素間也保持至少10像素以上的間距，並確保控件元素不緊貼於頁面邊沿。
- 表格數據列表 -字符型數據保持左對齊，數值型右對齊（方便閲讀對比），並根據字段要求，統一顯示小數位位數。
- 滾動條 -頁面佈局設計時應避免出現橫向滾動條。
- 頁面導航（麪包屑導航） -在頁面顯眼位置應該出現麪包屑導航欄，讓用户知道當前所在頁面的位置，並明確導航結構，如：首頁＞新聞中心＞歐科智能招商服務平台正式發佈，其中帶下劃線部分為可點擊鏈接。
- 信息提示窗口 -信息提示窗口應位於當前頁面的居中位置，並適當弱化背景層以減少信息干擾，讓用户把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。
軟件界面設計系統操作
- 儘量確保用户在不使用鼠標（只使用鍵盤）的情況下也可以流暢地完成一些常用的業務操作，各控件間可以通過Tab鍵進行切換，並將可編輯的文本全選處理。
- 查詢檢索類頁面，在查詢條件輸入框內按回車應該自動觸發查詢操作。
- 在進行一些不可逆或者刪除操作時應該有信息提示用户，並讓用户確認是否繼續操作，必要時應該把操作造成的後果也告訴用户。
- 信息提示窗口的“確認”及“取消”按鈕需要分別映射鍵盤按鍵“Enter”和“ESC”。
- 避免使用鼠標雙擊動作，不僅會增加用户操作難度，還可能會引過用户誤會，認為功能點擊無效。
- 表單錄入頁面，需要把輸入焦點定位到第一個輸入項。用户通過Tab鍵可以在輸入框或操作按鈕間切換，並注意Tab的操作應該遵循從左向右、從上而下的順序。
軟件界面設計系統響應
- 2-5秒窗口顯示處理信息提示，避免用户誤認為沒響應而重複操作；
- 5秒以上顯示處理窗口，或顯示進度條；
一個長時間的處理完成時應給予完成警告信息。
[1]
百度百科：軟件界面
- 參考資料
-
- 1. UI設計規範文檔 ．盒子UI設計．2011-02-17[引用日期2013-04-06]
