1、UI 界面設(shè)計(jì)規(guī)范方案模板（1 6 頁(yè)）本頁(yè)僅作為文檔封面，使用時(shí)可以刪除This document is for reference only-rar21 year.MarchUI設(shè)計(jì)（流程/界面）規(guī)范一：UI 設(shè)計(jì)基本概念與流程目的規(guī)范公司 UI 設(shè)計(jì)流程，使 UI 設(shè)計(jì)師參與到產(chǎn)品設(shè)計(jì)整個(gè)環(huán)節(jié)中來(lái)，對(duì)產(chǎn)品的易用性進(jìn)行 全流UI UI 范圍I 界面設(shè)計(jì)I 此文檔用于界而設(shè)計(jì)，本文檔的讀者對(duì)象是項(xiàng)目管理人員、售前服務(wù)人員、UI 界而設(shè)計(jì)人員、界而評(píng)審人員和配豊測(cè)試人員。概述UI UI 個(gè)產(chǎn)品立項(xiàng)開(kāi)始，UI UI UI 設(shè)計(jì)，并根據(jù)客戶（市場(chǎng)）UI 設(shè)計(jì)在各個(gè)環(huán)節(jié)的職責(zé)和要求，以保證每個(gè)環(huán)節(jié)的

2、工作質(zhì)量?；窘榻BA、需求階段軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開(kāi) 3W 的考慮（ Who,where,why.）也就是使用者，使用環(huán)境，使用方式的需求分析。所以在設(shè)計(jì)一個(gè)軟件產(chǎn)品之前我們應(yīng)該明確什么 人用（用戶的年齡，性別，愛(ài)好，收入，教育程度等）。什么地方用（在辦公室/家庭/廠房車(chē) 間/ 公共場(chǎng)所）如何用（鼠標(biāo)鍵盤(pán)/遙控器/觸摸屏）。上而的任何一個(gè)元素改變結(jié)果都會(huì) 有相應(yīng)的改變。B、分析設(shè)計(jì)階段界而用于被選。C、調(diào)研驗(yàn)證階段真實(shí)的反饋。調(diào)研階段需要從以下幾個(gè)問(wèn)題岀發(fā)：用戶對(duì)各套方案的第一印象用戶對(duì)各套方案的綜合印彖用戶對(duì)各套方案的單獨(dú)評(píng)價(jià)選出最喜歡的選出其次喜歡的對(duì)各方案的色彩，文字

3、，圖形等分別打分。所有這些都需要用圖形表達(dá)出來(lái)，直觀科學(xué)。D、方案改進(jìn)階段E、用戶驗(yàn)證階段經(jīng)過(guò)上而設(shè)計(jì)過(guò)程的描述，大家可以淸楚的發(fā)現(xiàn)，界面 UI 設(shè)計(jì)是一個(gè)非?？茖W(xué)的推導(dǎo)公 式， 他有設(shè)計(jì)師對(duì)藝術(shù)的理解感悟，但絕對(duì)不是僅僅表現(xiàn)設(shè)計(jì)師個(gè)人的繪畫(huà)。所以我們一 再?gòu)?qiáng)調(diào)這個(gè)工作過(guò)程是設(shè)計(jì)過(guò)程。UI 界而設(shè)訃不存在美工。2. UI 設(shè)計(jì)流程概述根據(jù)上述原則，分析公司產(chǎn)品的特點(diǎn)，制泄符合軟件產(chǎn)品（或項(xiàng)目）UI 程。每個(gè)產(chǎn)品（或項(xiàng)目）的生命周期中，UI 設(shè)計(jì)師應(yīng)該嚴(yán)格按照流程，完成每個(gè)環(huán)節(jié)的職責(zé)，確保流程準(zhǔn)確有效的得到執(zhí)行，從而提髙產(chǎn)品的可用性，提升產(chǎn)品質(zhì)量。二：UI 界面用戶體驗(yàn)設(shè)計(jì)原則與規(guī)范1： 應(yīng)該遵

4、循的基本原則無(wú)論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo) 準(zhǔn)，做到真正的一致。這樣得到的好處:1:使用戶使用起來(lái)能夠建立起精確的心里模型，使用熟練了一個(gè)界面后，切換到另外一個(gè)界面能夠很輕松的推測(cè)出各種功能，語(yǔ)句理解也不需要費(fèi)神理解2： 降低培訓(xùn)、支持成本，支持人員不會(huì)行費(fèi)力逐個(gè)指導(dǎo)。3：給用戶統(tǒng)一感覺(jué)，不覺(jué)得混亂，心情愉快，支持度增加做法：項(xiàng)H 組有經(jīng)驗(yàn)人士，確立ui 規(guī)范：美工提供色調(diào)配色方案，提供整體配色表界面控制程序人員、用戶體驗(yàn)人員提出合理統(tǒng)一使用的控件庫(kù)。參考標(biāo)準(zhǔn)界面使用規(guī)范：控件功能遵循行業(yè)標(biāo)準(zhǔn)，windows 平臺(tái)參見(jiàn)Microsoft 用戶體驗(yàn)控件樣式在允

5、許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)參考其他軟件先進(jìn)操作，提取對(duì)本項(xiàng)LI 漫無(wú)H 的。根據(jù)需要，設(shè)計(jì)特殊操作控件，準(zhǔn)則為：簡(jiǎn)化操作、達(dá)到一定功能口的界面實(shí)施人員與美工商榷控件可實(shí)現(xiàn)性,(如不實(shí)行此步驟，將會(huì)導(dǎo)致各自對(duì)對(duì)方 工作不滿意，也會(huì)產(chǎn)生不一致的混亂)。重復(fù)疊代上述工作。建立合理化文檔UI 標(biāo)準(zhǔn)描述上述規(guī)范， 強(qiáng)行界面設(shè)訃者理解之，并作為開(kāi)發(fā)準(zhǔn)則，SQA 人員進(jìn)行監(jiān)控開(kāi)發(fā)人員是否遵循，及時(shí)告誡開(kāi)發(fā)人員。2(Color)顏色使用恰當(dāng)，遵循對(duì)比原則：1：統(tǒng)一色調(diào)，針對(duì)軟件類(lèi)型以及用戶工作環(huán)境選擇恰當(dāng)色調(diào)：如：安全軟件，根據(jù)工業(yè)標(biāo)準(zhǔn)，可以選取黃色，綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時(shí)尚、紫色表現(xiàn)浪漫等等，淡色

6、可以使人舒適，暗色做背景使人不覺(jué)得累等2：如果沒(méi)有自己的系列界面，采用標(biāo)準(zhǔn)界面則可以少考慮此方面，做到與操作 系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表3：色盲、色弱用戶，即使使用了特殊顏色表示重點(diǎn)或者特別的東西，也應(yīng)該使 用特殊指示符，quot;!,著重號(hào)，以及圖標(biāo)等4：顏色方案也需要測(cè)試，常常ft于顯示器、顯卡的問(wèn)題，色彩表現(xiàn)每臺(tái)機(jī)器都 不一樣，應(yīng)該經(jīng)過(guò)嚴(yán)格測(cè)試，不同機(jī)器進(jìn)行顏色測(cè)試5：遵循對(duì)比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán) 色文字以口色背景容易識(shí)別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒(méi) 有足夠反差，而藍(lán)色和白色反差很大。除非特殊場(chǎng)合，杜絕使用對(duì)比強(qiáng)烈，讓 人產(chǎn)生憎惡感的

7、顏色。6：整個(gè)界面色彩盡量少的使用類(lèi)別不同的顏色itop 色表具體標(biāo)準(zhǔn)參考美術(shù)學(xué)統(tǒng)訃學(xué)術(shù)標(biāo)準(zhǔn)。色表的建設(shè)，對(duì)于美工在圖案設(shè)計(jì)、包裝 設(shè)計(jì)上起著標(biāo)準(zhǔn)參考作用，對(duì)于程序界面設(shè)計(jì)人員設(shè)計(jì)控件、窗體調(diào)色起到有 章可循的作用。3(Resource)資源一個(gè)多姿多彩的人機(jī)交互界面，少不了精美的鼠標(biāo)光標(biāo)、圖標(biāo)以及指示圖片、底圖等。1：可能的形成標(biāo)準(zhǔn)，參考itop 的outlookbar 圖標(biāo)設(shè)訃標(biāo)準(zhǔn)2：有標(biāo)準(zhǔn)的圖標(biāo)風(fēng)格設(shè)訃，有統(tǒng)一的構(gòu)圖布局，有統(tǒng)一的色調(diào)、對(duì)比度、色 階， 以及圖片風(fēng)格3：底圖應(yīng)該融于底圖，使用淺色，低對(duì)比，盡量少的使用顏色。4：圖標(biāo)、圖像應(yīng)該很清晰的表達(dá)出意思，遵循常用標(biāo)準(zhǔn)，或者用戶機(jī)器容

8、易聯(lián) 想的到物件，絕對(duì)不允許畫(huà)出莫名奇妙的圖案。5：鼠標(biāo)光標(biāo)樣式統(tǒng)一，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況，例如某些軟 件中一個(gè)手的形狀就有 4 鐘不同的樣子。4（Font）字體使用統(tǒng)一字體，字體標(biāo)準(zhǔn)的選擇依據(jù)操作系統(tǒng)類(lèi)型決定。中文采用標(biāo)準(zhǔn)字體，宋體，英文采用標(biāo)準(zhǔn)Microsoft Sans Serif 不考慮特殊字體（隸書(shū)、草書(shū)等，特殊情況可以使用圖片取代）,保證每個(gè)用戶使用起來(lái)顯示都很正常。字體大小根據(jù)系統(tǒng)標(biāo)準(zhǔn)字體來(lái)，例如MSS 8 （9 磅）五 號(hào)字（磅）。所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外 情況ITop 釆用BCB,所有控件默認(rèn)使用parent fon

9、t,系統(tǒng)大小字體屬性改變的處理。Windows 系統(tǒng)有個(gè)桌面設(shè)置，設(shè)置大字體屬性，很多界面設(shè)計(jì)者常常為這個(gè)惱 火， 如果設(shè)訃時(shí)遵循微軟的標(biāo)準(zhǔn)，全部使用相對(duì)大小作為控件的大小設(shè)置，當(dāng) 切換大小字體的時(shí)候，相對(duì)不會(huì)有什么特殊問(wèn)題。但是ft于常常方便使用點(diǎn)陣作為窗口設(shè)訃單位，導(dǎo)致改變大字體后，出現(xiàn)版面 混亂的問(wèn)題。這個(gè)情況下，應(yīng)該做相應(yīng)處理:1:寫(xiě)程序自動(dòng)調(diào)節(jié)大小，點(diǎn)陣值乘以一個(gè)相應(yīng)比例2：全部采用點(diǎn)陣作為單位，不理會(huì)系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體 帶來(lái)的麻煩。BCB/DELPHI 中多釆用這種方法，但是必然結(jié)果是和系統(tǒng)不統(tǒng)一。5(Text)文字表達(dá)提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則：1

10、： 口語(yǔ)化、客氣、多用您、請(qǐng)，不要用或少用專業(yè)術(shù)語(yǔ)，杜絕錯(cuò)別字3：警告、信息、錯(cuò)誤使用對(duì)應(yīng)的表示方法4：使用統(tǒng)一的語(yǔ)言描述，例如一個(gè)關(guān)閉功能按鈕，可以描述為退出、返回、關(guān)閉，則應(yīng)該統(tǒng)一規(guī)定。5:根據(jù)用戶不同采用相應(yīng)的詞語(yǔ)語(yǔ)氣語(yǔ)調(diào)，如專用軟件，可以出現(xiàn)很多專業(yè)屬 于， 用戶為兒童：這可以語(yǔ)氣親切和藹，老年用戶則應(yīng)該成熟穩(wěn)重。制定標(biāo)準(zhǔn) 遵循之。6(STYLE)控件風(fēng)格，不要使用錯(cuò)誤控件，控件功能要專一有設(shè)計(jì)好的同一風(fēng)格的控件，如果沒(méi)有能力設(shè)計(jì)出一套控件，則使用標(biāo)準(zhǔn)控件，絕對(duì)不能不倫不類(lèi)，雜亂無(wú)章不要錯(cuò)誤使用控件，例如：使用Button 樣式做TTable 統(tǒng)一類(lèi)型的控件操作方式相同，例如一個(gè)控件雙

11、擊可以執(zhí)行某些動(dòng)作，而同樣 控件，雙擊卻沒(méi)有任何反映一個(gè)控件只做單一功能，不復(fù)用很多人為了寫(xiě)程序方便，喜歡把一個(gè)控件在不同情況下做不同功能用，這些對(duì)用戶初次理解增加難度，只有用戶熟悉后才能理解。例如改變紅色選項(xiàng)，左邊的參數(shù)代表不同的設(shè)置，可能ft于為了節(jié)省控件或者編程 量， 但是只有熟練用戶才回使用，這種情況下解決方法：1:分組，使用雙份控件2： 使用TABLE 頁(yè)，給用戶很明顯的視覺(jué)變化總結(jié)起來(lái)就是：1產(chǎn)品制作人，寫(xiě)產(chǎn)品計(jì)劃書(shū)。用戶體驗(yàn)研究員，作調(diào)查分析。信息建構(gòu)師，設(shè)計(jì)產(chǎn)品架構(gòu)。4互動(dòng)設(shè)計(jì)師，作出互動(dòng)流程。5.視覺(jué)設(shè)計(jì)師和用戶界面設(shè)計(jì)師，作出頁(yè)面視覺(jué)設(shè)計(jì)。8用戶體驗(yàn)研究員，做用戶測(cè)試確保質(zhì)

12、量。確認(rèn)目標(biāo)用戶在軟件設(shè)計(jì)過(guò)程中，需求設(shè)計(jì)角色會(huì)確定軟件的LI 標(biāo)用戶，獲取最終用戶和直 接用戶的需求。用戶交互要考慮到LI 標(biāo)用戶的不同引起的交互設(shè)計(jì)重點(diǎn)的不 同。例如：對(duì)于科學(xué)用戶和對(duì)于電腦入門(mén)用戶的設(shè)計(jì)重點(diǎn)就不同。設(shè)計(jì)LI標(biāo)一致軟件中往往存在多個(gè)組成部分（組件、元素）。不同組成部分之間的交互設(shè)計(jì) LI 需要一致。例如：如果以電腦操作初級(jí)用戶作為L(zhǎng)1 標(biāo)用戶，以簡(jiǎn)化界面邏 輯為設(shè)計(jì)訂標(biāo)，那么該LI 標(biāo)需要貫徹軟件（軟件包）整體，而不是局部。元素外觀一致交互元素的外觀往往影響用戶的交互效果。同一個(gè)（類(lèi)）軟件采用一致風(fēng)格的 外觀，對(duì)于保持用戶焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素

13、外觀一致沒(méi)有特別統(tǒng)一的衡量方法。因此需要對(duì)LI 標(biāo)用戶進(jìn)行調(diào)查取得反饋。7 可用性原則可理解軟件要為用戶使用，用戶必須可以理解軟件各元素對(duì)應(yīng)的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過(guò)對(duì)該元素的操 作， 理解其對(duì)應(yīng)的功能。例如：刪除操作元素。用戶可以點(diǎn)擊刪除操作按鈕， 提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元 素對(duì)應(yīng)的功能，同時(shí)可以取消該操作?？蛇_(dá)到用戶是交互的中心，交互元素對(duì)應(yīng)用戶需要的功能。因此交互元素必須可以被 用戶控制。用戶可以用諸如鍵盤(pán)、鼠標(biāo)之類(lèi)的交互設(shè)備通過(guò)移動(dòng)和觸發(fā)已有的 交互元素達(dá)到其它在此之前不可見(jiàn)或者不可交互的交互

14、元素。要注意的是交互 的次數(shù)會(huì)影響可達(dá)到的效果。當(dāng)一個(gè)功能被深深隱藏（一般來(lái)說(shuō)超過(guò) 4 層）那 么用戶達(dá)到該元素的兒率就大大降低了?？蛇_(dá)到的效果也同界面設(shè)計(jì)有關(guān)。過(guò) 于復(fù)雜的界面會(huì)影響可達(dá)到的效果。（參考簡(jiǎn)單導(dǎo)向原則）Quote階段一：分析1用戶需求分析2、 用戶交互場(chǎng)景分析3、競(jìng)爭(zhēng)產(chǎn)品分析這兩者可以說(shuō)是相輔相成的。對(duì)于一個(gè)較為正規(guī)的項(xiàng)LI 而言，必然有對(duì)用戶需求的分析內(nèi)容。其中用戶ui 需 求 是重要的組成部分。如果說(shuō)ui 設(shè)訃原則是所有ui 設(shè)計(jì)的出發(fā)點(diǎn)的話，那么 用戶ui 需求就是本次設(shè)訃的出發(fā)點(diǎn)。好的ui 設(shè)計(jì)建立在對(duì)用戶深刻了解之 上。因此用戶交互場(chǎng)景分析就很重要。對(duì)于大部分項(xiàng)LI

15、組來(lái)說(shuō)也許沒(méi)有時(shí)間和 精力去實(shí)際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是ui 設(shè)計(jì)人員 在分析的時(shí)候一定要站在用戶角度思考：如果我是用戶，這里我會(huì)需要什么。 競(jìng)爭(zhēng)產(chǎn)品能夠上市并且被ui 設(shè)計(jì)者知道，必然有其長(zhǎng)處。這就是所謂三人行必 有我?guī)煹囊馑?。每個(gè)設(shè)計(jì)者的思維都有局限性，看到別人的設(shè)計(jì)會(huì)有觸類(lèi)旁通 的好處。當(dāng)然有的時(shí)候可以參考的并不一定是競(jìng)爭(zhēng)產(chǎn)品。階段二：設(shè)計(jì)采用面向場(chǎng)景、面向事件驅(qū)動(dòng)和面向?qū)ο蟮脑O(shè)計(jì)方法。ui 設(shè)計(jì)著重于交互，因 此必然要對(duì)最終用戶的交互場(chǎng)景進(jìn)行設(shè)計(jì)。軟件是交互產(chǎn)品，用戶所作的就是 對(duì)軟件事件的響應(yīng)以及觸發(fā)軟件內(nèi)置的事件。因此要面向事件設(shè)計(jì)。現(xiàn)在的程 序開(kāi)發(fā)主流采用

16、的是面向?qū)ο笤O(shè)計(jì)。面向?qū)ο笤O(shè)計(jì)可以有效的體現(xiàn)面向場(chǎng)景和 面向事件的特點(diǎn)。設(shè)計(jì)的四個(gè)要素：交互對(duì)象，數(shù)據(jù)對(duì)象，事件（交互事件和異 常），動(dòng)作階段三：開(kāi)發(fā)通過(guò)：用戶交互case 圖（說(shuō)明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說(shuō)明 交互和事件之間的聯(lián)系）交互功能設(shè)計(jì)圖（說(shuō)明功能和交互的對(duì)應(yīng)關(guān)系）最終得到UI 的設(shè)計(jì)產(chǎn)品。階段四：驗(yàn)證正如UI 交互設(shè)計(jì)原則探討文中提到的，對(duì)于UI 產(chǎn)品的驗(yàn)證主要從下面兒個(gè)方 面入手：1、 功能性對(duì)照UI 設(shè)計(jì)的再好，和需求不一致也不可以。2、 實(shí)用性內(nèi)部測(cè)試UI 設(shè)汁的最重要點(diǎn)就是實(shí)用性。3、 用戶焦點(diǎn)小組UI 設(shè)計(jì)是否優(yōu)秀的重要衡量依據(jù)。最后，說(shuō)一點(diǎn)其他的問(wèn) 題。現(xiàn)

17、在往往認(rèn)為交互式設(shè)計(jì)和最終的UI 效果設(shè)計(jì)可以截然分開(kāi)。這就好比說(shuō) 需求可以和設(shè)計(jì)截然分開(kāi)，是不可能的。QuoteUl 設(shè)計(jì)流程以及設(shè)計(jì)師參與的環(huán)節(jié)最近的工作中總結(jié)出一條結(jié)論：擁有一個(gè)完善規(guī)范的流程，是決定著一個(gè)項(xiàng)LI 成功或失敗的關(guān)鍵。對(duì)于ui 面一輸出一完善這條主線制定，每個(gè)環(huán)節(jié)ui 設(shè)計(jì)師都應(yīng)參與其中。產(chǎn)品定位與市場(chǎng)分析這一類(lèi)工作大多都是由新產(chǎn)品研發(fā)部門(mén)以及市場(chǎng)需求完成的，但ui 設(shè)訃師應(yīng)了 解產(chǎn)品的市場(chǎng)定位、產(chǎn)品定義、客戶群體、運(yùn)營(yíng)方式等。用戶研究與分析這個(gè)過(guò)程是非常重要的，設(shè)計(jì)師應(yīng)該找到合適的方法來(lái)完成此環(huán)節(jié)。你可以搜 集相關(guān)資料分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心里、需求等，提出用戶 研究報(bào)告和可用性設(shè)計(jì)建議。這部分工作也可和團(tuán)隊(duì)配合完成。時(shí)間與項(xiàng)LI 需 求允許的情況下，更可以制定實(shí)景用戶分析。架構(gòu)設(shè)計(jì)這里涉及到比較多的界面交互與流程的設(shè)計(jì)，根據(jù)可用性分析結(jié)果制定交互方 式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。原型設(shè)計(jì)我覺(jué)得這里應(yīng)該是一個(gè)小的階段標(biāo)志，要對(duì)前面所有工作加以設(shè)計(jì)方面的實(shí) 施，根據(jù)進(jìn)度與成本，可以把原型控制在手繪一圖形一FLASH-視頻兒個(gè)質(zhì)量 范圉。原型的本質(zhì)更傾向與一個(gè)DEMO,它不需要有全部的功能，但