1.3　UI設計的注意事項

關于UI設計規范，設計師們有各種各樣的說法，但是經過多方位總結，歸根結底，離不開以下五大原則。這些規范可以讓設計師設計出的軟件操作更加舒適簡單，同時體現產品定位和特點。

1.3.1　圖稿一致性原則

堅持以用戶體驗為中心，界面直觀簡潔，操作方便快捷，用戶接觸軟件后對界面上對應的功能一目了然，不需要太多操作就可以方便地使用該應用。這時，圖稿一致性就很重要了。

知識點講解——字體

◆保持字體及顏色一致，避免一套主題出現多種字體。

◆不可修改的字段統一用灰色文字顯示，如圖1-25所示。

圖1-25

◆保持頁面內所有元素對齊方式的一致，如無特殊情況應避免同一頁面出現多種數據對齊方式，如圖1-26所示。

圖1-26

知識點講解——表單錄入

◆在包含必填與選填的頁面中，UI設計師應在必填項旁邊給出醒目標識，例如紅色的*號，如圖1-27所示。

圖1-27

◆各類型數據輸入需限制文本類型，做格式校驗，例如，電話號碼只允許輸入數字，郵箱地址需要包含“@”等，并在用戶輸入有誤時給出明確提示，如圖1-28所示。

圖1-28

知識點講解——鼠標手勢

◆保持功能及內容描述一致，避免同一功能描述使用多個詞匯，如編輯和修改、新增和增加、刪除和清除等混用。

◆建議在項目開發階段建立一個產品詞典，包括產品中常用術語及描述，設計或開發人員嚴格按照產品詞典中的術語詞匯來展示文字信息。

◆可點擊的按鈕、鏈接需要切換鼠標手勢至手型，如圖1-29所示。

圖1-29

1.3.2　圖稿準確性原則

和圖稿一致性原則一樣，圖稿的準確性原則可以方便UI設計產品上線以后，用戶快速地了解和掌握產品。

01　使用一致的標記、標準縮寫和顏色，顯示信息的含義應該非常明確，用戶不必再參考其他信息源，如圖1-30所示。

圖1-30

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

03　避免使用文本輸入框來放置不可編輯的文字內容，不要將文本輸入框當成標簽使用，使用縮進和文本來輔助理解。

04　使用用戶語言詞匯，而不是單純的專業計算機術語。高效地使用顯示器的顯示空間，但要避免空間過于擁擠。保持語言的一致性，如“確定”對應“取消”，“是”對應“否”，“允許”對應“禁止”，如圖1-31所示。

圖1-31

1.3.3　布局合理化原則

在進行UI設計時需要充分考慮布局的合理化問題，遵循自上而下、從左到右的瀏覽、操作習慣，避免常用業務功能按鍵排列過于分散，以造成用戶鼠標移動距離過長的弊端，如圖1-32所示。

圖1-32

“減法”運算：將不常用的功能區塊隱藏，以保持界面的簡潔，使用戶專注于主要業務操作流程，有利于提高軟件的易用性及可用性。

菜單：保持菜單簡潔性及分類的準確性，避免菜單深度超過3層。

按鈕：確認操作按鈕放置左邊，取消或關閉按鈕放置于右邊。

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

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

圖1-33

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

滾動條：頁面布局設計時應避免出現橫向滾動條。

頁面導航（面包屑導航）：在頁面顯眼位置應該出現面包屑導航欄，讓用戶知道當前所在頁面的位置，并明確導航結構，例如，首頁>娛樂>軍事>體育>國內>國際，其中當鼠標經過時高亮顯示的部分為可點擊鏈接，如圖1-34所示。

圖1-34

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

圖1-35

1.3.4　操作合理性原則

操作合理性原則對于用戶接觸新的軟件應用也具有重要意義，設計出符合用戶操作習慣的產品更利于用戶上手新軟件。

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

02　查詢檢索類頁面，在查詢條件輸入框內按回車應該自動觸發查詢操作。在進行一些不可逆或者刪除操作時應該有信息提示用戶，并讓用戶確認是否繼續操作，必要時應該把操作造成的后果也告訴用戶。

03　信息提示窗口的“確認”及“取消”按鈕需要分別映射鍵盤按鍵“Enter”和“Esc”。

避免使用鼠標雙擊動作，因為這不僅會增加用戶操作難度，還可能引起用戶誤會，認為功能點擊無效。

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

1.3.5　系統響應時間原則

系統響應時間應該適中。響應時間過長，用戶就會感到不安和煩躁，而響應時間過快也會影響用戶的操作節奏，并可能導致錯誤。因此在系統響應時間上堅持如下原則。

01　2~5秒，窗口顯示處理信息提示，避免用戶誤認為沒響應而重復操作。

02　5秒以上，顯示處理窗口，或顯示進度條。

03　一個長時間的處理完成時應給予完成警告信息。