人機互動介面設計規範

2021-03-04 04:50:44 字數 2797 閱讀 1929

(討論稿)

1. 必須在編碼之前完成,否則就成花架子了。

2. gui規範不是一蹴而就,它和設計相互迭代,彼此補充,相互完善。

3. gui規範的內容70%是通用原則,涉及產品圖形控制項的基本屬性和構建的基本引數和原則,30%是與專案或產品特點相適應的內容,這部分內容就是在設計過程中迭代產生。

概述《目的、適用專案、基本風格》

通用指導原則

易用性理想的情況是使用者不用查閱幫助就能知道該介面的功能並進行相關的正確操作。如按鈕名稱應該易懂,用詞準確,要與同一介面上的其他按鈕易於區分。

《補充易用性細則》

完成同一功能或任務的元素放在集中位置,減少滑鼠移動的距離。

核取方塊和選項框要有預設選項,並支援tab選擇。

……規範性

通常介面設計按windows介面的規範,即包含「選單條、工具欄、狀態列、滾動條、右鍵快捷選單」等的標準格式,介面遵循規範化的程度越高,則易用性相應的就越好。

《補充規範性細則》

工具欄的圖示能直觀的代表要完成的操作。

標籤提示:字型為加重、宋體、黑色、無邊框。

對齊方式:左對齊、一般文字、單個數字、日期等。

等待過程:在需等待時間較短(0-10秒)的情況下應將滑鼠顯示成為沙漏;當需10秒以上時,要顯示進度條等。

選單深度一般要求最多控制在三層以內。

……美觀與協調性

介面應該適合美學觀點,感覺協調舒適,能在有效的範圍內吸引使用者的注意力。

《補充美觀與協調性細則》

父窗體或主窗體的中心位置應該在對角線焦點附近。

按鈕的大小要與介面的大小和空間要協調。

……獨特性

在框架符合以上規範的情況下,設計具有自己獨特風格的介面尤為重要。尤其在商業軟體流通中有著很好的遷移默化的廣告效用。

《補充獨特性細則》

安裝介面上應有單位介紹或產品介紹,並有自己的圖示。

登入介面上要有本產品的標誌,同時包含公司圖示。

……快捷方式

在選單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的使用者操作得更快一些,在windows及其應用軟體中快捷鍵的使用大多是一致的。

《補充快捷方式細則》

檔案操作:如列印、關閉相應的快捷鍵。

系統選單:如工具、幫助等的快捷鍵。

……安全性

在介面上通過下列方式來控制出錯機率,會大大減少系統因使用者人為的錯誤引起的破壞。

《補充安全性性細則》

應當注意盡可能避免使用者無意錄入無效的資料。

採用相關控制項限制使用者輸入值的種類。

……整體介面設計規範

整體框架設計

《布局說明》

整體頁面在瀏覽器中的位置說明,即長、寬、高(px);

頁面基本框架構成及位置說明:如系統logo、選單、導航、查詢、內容顯示區、頁尾等;

頁面顯示最佳解析度說明;

……《簡要布局圖》

整體頁面框架的簡要布局圖

《布局說明》

整體頁面在瀏覽器中的位置說明,即長、寬、高(px);

頁面基本框架構成及位置說明:如系統logo、登入區、公告區等、頁尾等;

頁面顯示最佳解析度說明;

……《簡要布局圖》

整體頁面框架的簡要布局圖

《布局說明》

整體頁面在瀏覽器中的位置說明,即長、寬、高(px);

頁面基本框架構成及位置說明:如系統logo、選單、**管理區、內容顯示區、超鏈區;

頁面顯示最佳解析度說明;

……《簡要布局圖》

整體頁面框架的簡要布局圖

配色方案

《配色說明》

系統配色基本原則;

系統主體背景配色;

系統輔助配色。

《配色圖例》

用具體顏色示意系統背景主體、輔助配色

字型設計

《系統主體字型說明》

系統主體採用的字型型別,包括漢字、英文本等

字型大小;

字型顏色;正常、有超鏈的、啟用後的等。

《主體字型圖例》

給出具體各類主體字型。

資訊提示

《資訊提示說明》

必添項提示:包括必添項前的標示、字型、輸入框顏色等;

等待提示:提示形式,如進度條等。

刪除提示:統一文字說明內容,字型,大小,顏色等。

儲存提示:統一文字說明內容,字型,大小,顏色等。

《系統資訊提示說明》

給出具體項事例。

介面元素設計規範

logo圖示與標題

< logo圖示與標題》

標題字型、大小、顏色、定位等。

《系統logo事例》

專案標題,公司**等

導航《系統導航說明》

導航條的位置、背景顏色、字型大小、字型顏色、字型型別、導航形式等。

《系統導航事例》

具體的導航事例圖。

選單《系統選單說明》

選單位置、選單分級數、選單展開風格,邊框顏色、背景、字型位置等

各級選單說明:啟用前、啟用後字型、顏色、大小等。

《系統選單事例》

具體的選單圖。

**《系統**說明》

**標題:標題單元背景、字型、大小、顏色、位置等

**行:行高、背景顏色、一頁顯示行數等

**單元格:單元格間距

資料單位位置:展示方式等。

**主體內容:正常的字型、大小、顏色;有鏈結的……;

翻頁及總體頁數表述:

《系統**事例》

具體的**圖示意。

圖表按鈕

文字框下拉框

單選框核取方塊

彈出視窗

指令碼其他

補充說明

《說明1:>

《說明2:>

安卓介面設計規範

目前主流的安卓手機解析度有以下3種 小公尺 3和小公尺4 螢幕尺寸和解析度 5英吋 1920 1080畫素 魅族mx2 螢幕尺寸和解析度 4.4英吋 1280 800像 魅族mx3 螢幕尺寸和解析度 5.1英吋 1800 1080畫素 htc one螢幕尺寸和解析度 4.7英吋 1920 1080畫...

DWIN人機互動介面 畫曲線功能說明

畫曲線功能說明 1.按照下圖1所示新建乙個工程檔案 圖12.按照下圖2所示說明進行設定 圖2如上圖2所示,曲線需要滿區域顯示時,設定縱軸放大倍數計算方法 縱軸放大倍數 mul y y2 y1 256 vmax vmin vmax vmin 分別為曲線數值顯示的最大 最小值。例如 採集資料vmax 1...

互動介面設計方案格式

教育科學與技術學院 設計方案 專業 網路工程 班級 2004級一班 姓名 劉博 學號 04415113 指導老師 高曉晶 設計方案要求 1 格式 正文為小四號宋體 行距為固定值22磅 上下左右頁邊距2.75厘公尺 左裝訂 一級標題四號宋體加粗 正文標題用三號黑體 2 頁面要求 b5紙 內容要求 內容...