search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

UI 設計初學者入門-UI設計的規範

UI設計的規範

一致性原則

堅持以用戶體驗為中心設計原則,界面直觀、簡潔,操作方便快捷,用戶接觸軟體后對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本應用系統。

字體 -保持字體及顏色一致,避免一套主題出現多個字體; -不可修改的欄位,統一用灰色文字顯示。

對齊 -保持頁面內元素對齊方式的一致,如無特殊情況應避免同一頁面出現多種數據對齊方式。

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

滑鼠手勢 -可點擊的按鈕、鏈接需要切換滑鼠手勢至手型;

保持功能及內容描述一致 -避免同一功能描述使用多個辭彙,如編輯和修改,新增和增加,刪除和清除混用等。建議在項目開發階段建立一個產品詞典,包括產品中常用術語及描述,設計或開發人員嚴格按照產品詞典中的術語辭彙來展示文字信息。

準確性原則

使用一致的標記、標準縮寫和顏色,顯示信息的含義應該非常明確,用戶不必再參考其它信息源。

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

避免使用文本輸入框來放置不可編輯的文字內容,不要將文本輸入框當成標籤使用。

使用縮進和文本來輔助理解。

使用用戶語言辭彙,而不是單純的專業計算機術語。

高效地使用顯示器的顯示空間,但要避免空間過於擁擠。

保持語言的一致性,如「確定」對應「取消」,「是」對應「否」。

可讀性原則

文字長度

文字的長度,特別是在大塊空白的設計中很重要,太長會導致眼睛疲憊,閱讀困難。太短又經常會造成尷尬的斷裂效果,斷字的使用也會造成大量的複合詞,這些斷裂嚴重的影響了閱讀的流暢性。

空間和對比度

每個字元同線路長度,間距也是重要的。所以每個字元之間的空間至少等於字元的尺寸,大多數數字設計人員習慣選擇一個最小的文字大小的150%為空間距離,這就可以留下足夠的空間。當每一行中讀取大段的文字,且線路長度過多或線之間的空間太少,都會造成理解困難。

對其方式

無論是在文本中心,還是偏左,或者是沿著一個文件的右側對齊,文本的對齊相當重要,可以極大地影響可讀性。一般而言,文本習慣向左對齊,因為它反映了你的閱讀方式 – 從左至右。你熟悉每一行開始和結束的地方。

布局合理化原則

在進行UI設計時需要充分考慮布局的合理化問題,遵循用戶從上而下,自左向右瀏覽、操作習慣,避免常用業務功能按鍵排列過於分散,以造成用戶滑鼠移動距離過長的弊端。多做「減法」運算,將不常用的功能區塊隱藏,以保持界面的簡潔,使用戶專註於主要業務操作流程,有利於提高軟體的易用性及可用性。

菜單 -保持菜單簡潔性及分類的準確性,避免菜單深度超過3層。 -菜單中功能是需要打開一個新頁面來完成的,需要在菜單名字後面加上「…」。【只適用於C/S架構,B/S請無視】。

按鈕 確認操作按鈕放置左邊,取消或關閉按鈕放置於右邊。

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

排版 -所有文字內容排版避免貼邊顯示(頁面邊緣),盡量保持10-20像素的間距並在垂直方向上居中對齊;各控制項元素間也保持至少10像素以上的間距,並確保控制項元素不緊貼於頁面邊沿。

表格數據列表 -字元型數據保持左對齊,數值型右對齊(方便閱讀對比),並根據欄位要求,統一顯示小數位位數。

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

頁面導航(麵包屑導航) -在頁面顯眼位置應該出現麵包屑導航欄,讓用戶知道當前所在頁面的位置,並明確導航結構,如:首頁>新聞中心>歐科智能招商服務平台正式發布,其中帶下劃線部分為可點擊鏈接。

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

目前我還是用的ios7的設計規範,1136*640適配性能還是很好的。

當然如果想用其它規範也可以。



熱門推薦

本文由 yidianzixun 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦