界面設(shè)計(jì)規(guī)范(存儲(chǔ)版)
【正文】 輸入 /選擇框，通過鼠標(biāo)或鍵盤都不可讓光標(biāo)定位至此控件。 2. 支持 tab鍵、 shift+tab鍵移動(dòng)光標(biāo)焦點(diǎn)。 【 規(guī)范要求 】 如果存在多層嵌套窗口，每層窗口彈出時(shí)都自動(dòng)往右下移動(dòng)一點(diǎn)點(diǎn)，以保證不遮蓋上層窗口標(biāo)題為準(zhǔn)。（如’、”、 ） 【 功能名稱 】 表單列表 【 功能簡(jiǎn)述 】 對(duì)表單列表的相關(guān)規(guī)范。 【 規(guī)范要求 】 1. 在用戶沒有提供明確需求情況下，限制 F IE工具欄、退格鍵（僅限頁(yè)面不限輸入框）。 ? 界面設(shè)計(jì)規(guī)范 不規(guī)范實(shí)例 ： ? 如果列表前選擇框使用的是 RadioButton，則應(yīng)該默認(rèn)選中第 1條 。 在設(shè)計(jì)用戶界面時(shí)必須考慮防錯(cuò)處理，目的是讓用戶不必為避免犯錯(cuò)誤而提心吊膽，小心翼翼的操作。消息文本、 圖形標(biāo)志和命令按鈕在語(yǔ)義上不一致等 【 功能名稱 】 html編寫 【 功能簡(jiǎn)述 】 對(duì) html編寫的規(guī)范要求 【 規(guī)范要求 】 1. 首行縮進(jìn)的處理，不要使用全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義 p { textindent: 2em。 9. 為保證系統(tǒng)和瀏覽器的兼容性，當(dāng)設(shè)置背景圖片時(shí)，要堅(jiān)持用雙引號(hào)。 總之遵循一條原則：不出現(xiàn)多于一個(gè)的控制同一個(gè)單元格大小的 height和width，保證任何一個(gè) height和 width都是有效的，也就是改動(dòng)代碼中任何一個(gè)height和 width的數(shù)值，都應(yīng)該在瀏覽器中看到變化。 ? 界面設(shè)計(jì)規(guī)范 【 功能名稱 】 html編寫 【 功能簡(jiǎn)述 】 對(duì) html編寫的規(guī)范要求 【 規(guī)范要求 】 7. 行距建議用百分比來定義，常用的兩個(gè)行距的值是 lineheight:120%/150%。 ? 如果發(fā)生意外和錯(cuò)誤，應(yīng)當(dāng)及時(shí)給出警告信息和錯(cuò)誤信息，提醒用戶做出正確的處理。 系統(tǒng)中彈出框的樣式需統(tǒng)一 ? 界面設(shè)計(jì)規(guī)范 【 功能名稱 】 一般編輯界面 【 功能簡(jiǎn)述 】 對(duì)一般編輯界面規(guī)范要求 【 規(guī)范要求 】 ：編輯頁(yè)面中的必填項(xiàng)必須有標(biāo)識(shí)，如右圖： ：多行的文本框必須有提示剩余輸入字?jǐn)?shù)的功能，且文字是黑色 的，數(shù)字必須是突出的紅色字體 如圖所示： ? 界面設(shè)計(jì)規(guī)范 【 功能名稱 】 一般編輯界面 【 功能簡(jiǎn)述 】 對(duì)一般編輯界面規(guī)范要求 【 規(guī)范要求 】 ：暫時(shí)不用的控件應(yīng)該灰掉 ? 界面設(shè)計(jì)規(guī)范 【 功能名稱 】 防錯(cuò)和出錯(cuò)處理 【 功能簡(jiǎn)述 】 用戶在使用軟件的過程中，不可避免的會(huì)出現(xiàn)一些錯(cuò)誤的操作。 ? 界面設(shè)計(jì)規(guī)范 列表名稱 選中的行 菜單層次 列表內(nèi)容 表頭 按鈕 【 功能名稱 】 列表界面 【 功能簡(jiǎn)述 】 對(duì)列表界面規(guī)范要求 【 規(guī)范要求 】 ? 界面設(shè)計(jì)規(guī)范 ： 說明本模塊所在位置的文字，所在的位置必須對(duì)應(yīng)功能菜單， 比如點(diǎn)擊菜單上的 則模塊位置說明文字必須對(duì)應(yīng)起來 ，顯示： ： ? 按鈕的顏色是統(tǒng)一的 。并且高和寬（或 W寬和高）的比應(yīng)該大致保持為 3:4（或 4： 3）。 4. 對(duì)非法字符的控制。 子窗體的大小最好不要超過父窗體，且最好不要遮住父窗體的主要信息。 6. 當(dāng)功能按鈕為圖片按鈕時(shí)，光標(biāo)停留需給予浮動(dòng)提示信息。 2. 當(dāng)必填項(xiàng)沒有填寫時(shí)，可在光標(biāo)準(zhǔn)備移走時(shí)，在文本框后以“請(qǐng)輸入”紅色文字標(biāo)識(shí)。 【 功能名稱 】 顏色 【 功能簡(jiǎn)述 】 各個(gè)頁(yè)面必須使用統(tǒng)一的顏色設(shè)置 【 規(guī)范要求 】 “危險(xiǎn)、有風(fēng)險(xiǎn)、未知、基本安全”的顏色，有什么講究嗎？“黃色”看不清楚。 ? 界面設(shè)計(jì)規(guī)范 【 功能名稱 】 字體 【 功能簡(jiǎn)述 】 各個(gè)頁(yè)面必須使用統(tǒng)一的字體樣式 【 規(guī)范要求 】 不規(guī)范實(shí)例： 所有字體尺寸一律采用“ pt” 作為單位，對(duì)象和線條的尺寸一律采用“ px” 作為單位。 ，子窗體沒有必要縮放。 6. 放置完控件后界面不應(yīng)有很大的空缺位置。 8. 對(duì)運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的地方要有提示，讓用戶明白錯(cuò)誤出處，避免形成無限期的等待。 ? 應(yīng)該遵循的基本原則 數(shù)據(jù)輸入原則 ? 應(yīng)該遵循的基本原則 合理性原則 屏幕對(duì)角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引 用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。 盡量遵循可不用鼠標(biāo)的原則：應(yīng)用中的功能只用鍵盤也應(yīng)當(dāng)可以完成。 4. 界面要支持鍵盤自動(dòng)瀏覽按鈕功能，即按 Tab鍵的自動(dòng)切換功能。 這樣得到的好處： ? 用戶使用起來能夠建立起精確的心里模型，使用熟練了一個(gè)系統(tǒng)界面后，切換到另外一個(gè)系統(tǒng)界面能夠很輕松的推測(cè)出各種功能。知道企業(yè)與用戶雙方對(duì)產(chǎn)品的期許和目標(biāo)，有助于確立用戶體驗(yàn)各方面戰(zhàn)略的制定 面對(duì)大量的選擇，用戶只能自己想辦法，去決定哪一個(gè)軟件系統(tǒng)功能會(huì)符合她的要求。 框架層 — 界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 在充滿概念的結(jié)構(gòu)層中開始形成了大量的需求，這些需求都是 來自我們的戰(zhàn)略目標(biāo)的需求。你按 F1，它沒有彈出幫助，卻執(zhí)行了一件絕對(duì)出乎你意料的動(dòng)作。 結(jié)果：盡管你已經(jīng)非常努力，但是你還是遲到了。 Web應(yīng)用界面設(shè)計(jì)規(guī)范 ? 部門：研發(fā)中心 ? 主講人： ? 軟件界面規(guī)范的重要性及其目的 ? 用戶體驗(yàn)為何如此重要 ? Web規(guī)范體系介紹 ? 界面設(shè)計(jì)開發(fā)流程 ? 應(yīng)該遵循的基本原則 ? 界面設(shè)計(jì)規(guī)范 ? 軟件界面規(guī)范的重要性及其目的 產(chǎn)品設(shè)計(jì)通過規(guī)范的方式來達(dá)到以 用戶為中心的目的。 排了 3趟地鐵，終于到公司了，但是你卻遲到了。 ? 表現(xiàn)四：違背使用習(xí)慣。 ? 用戶體驗(yàn)為何如此重要？ 體驗(yàn)好的用戶界面 糟糕的用戶界面表現(xiàn) 糟糕的用戶界面 ? 用戶體驗(yàn)為何如此重要？ 用戶體驗(yàn)的要素 視覺設(shè)計(jì) 交互設(shè)計(jì) 信息架構(gòu) 界面設(shè)計(jì) 導(dǎo)航設(shè)計(jì) 功能說明 內(nèi)容需求 用戶需求 產(chǎn)品目標(biāo) 具體 抽象 表現(xiàn)層
畢業(yè)設(shè)計(jì)相關(guān)推薦
鄂ICP備17016276號(hào)-1