UI設(shè)計(jì)（步驟/界面）規(guī)范-：ui設(shè)計(jì)基礎(chǔ)概念和步驟1.1目標(biāo)規(guī)范企業(yè)UI設(shè)計(jì)步驟,使UI設(shè)計(jì)師參與到產(chǎn)品設(shè)計(jì)整個(gè)步驟中來(lái)，對(duì)產(chǎn)品易用性進(jìn)行全步驟負(fù)責(zé),使UI設(shè)計(jì)步驟規(guī)范化，確保UI設(shè)計(jì)步驟可操作性。1.2范圍I界面設(shè)計(jì)I此文檔用于界面設(shè)計(jì)，本文檔讀者對(duì)象是項(xiàng)目管理人員、售前服務(wù)人員、UI界面設(shè)計(jì)人員、界面評(píng)審人員和配置測(cè)試人員。1?3概述UI設(shè)計(jì)包含交互設(shè)計(jì),用戶硏究,和界面設(shè)計(jì)三個(gè)部分。基于這三部分UI設(shè)計(jì)步驟是從一個(gè)產(chǎn)品立項(xiàng)開始,UI設(shè)計(jì)師就應(yīng)依據(jù)步驟規(guī)范，參與需求階段、分析設(shè)計(jì)階段、調(diào)研驗(yàn)證階段、方案改善階段、用戶驗(yàn)證反饋階段等步驟，推行對(duì)應(yīng)崗位職責(zé)。UI設(shè)計(jì)師應(yīng)全方面負(fù)責(zé)產(chǎn)品以用戶體驗(yàn)為中心UI設(shè)計(jì)，并依據(jù)用戶（市場(chǎng)）要求不停提升產(chǎn)品可用性。本規(guī)范明確要求了UIi殳計(jì)在各個(gè)步驟職責(zé)和要求,以隔務(wù)個(gè)步驟工作質(zhì)星。1.4基礎(chǔ)介紹A、需求階段軟件產(chǎn)品仍然屬于工業(yè)產(chǎn)品范圍。仍然離不開3W考慮（Who,where,why.）也就是使用者,使用環(huán)境，使用方法需求分析。所以在設(shè)計(jì)一個(gè)軟件產(chǎn)品之前我們應(yīng)該明確什么人用（用戶年紀(jì)，性別，爰好，收入，教育程度等）。什么地方用（在辦公室/家庭/廠房車間/公共場(chǎng)所）。怎樣用（鼠標(biāo)鍵盤/遙控器/觸摸屏）。上面任^可_個(gè)元素改變結(jié)果全部會(huì)有對(duì)應(yīng)改變。除此之外在需求階段同類競(jìng)爭(zhēng)產(chǎn)品也是我們必需了解。同類產(chǎn)品比我們提前問(wèn)世，我們要比她作愈加好才有存在價(jià)值。那么單純從界面美學(xué)考慮說(shuō)哪個(gè)好哪個(gè)不好是沒(méi)有一個(gè)很客觀評(píng)價(jià)標(biāo)準(zhǔn)。我們只能說(shuō)哪個(gè)更適宜，更適宜于我們最終用戶就是最好。B、 分析軸階段經(jīng)過(guò)分析上面需求,我們進(jìn)入設(shè)計(jì)階段。也就是方案形成階段。我們?cè)O(shè)計(jì)岀幾套不一樣風(fēng)格界面用于被選。C、 調(diào)硏驗(yàn)證階段幾套風(fēng)格必需確保在相同設(shè)計(jì)制作水平上，不能顯著看出差異，這么才能得到用戶客觀真實(shí)反饋。測(cè)試階段開始前我們應(yīng)該對(duì)測(cè)試具體細(xì)節(jié)進(jìn)行清楚分析描述。調(diào)研階段需要從以下多個(gè)問(wèn)題出發(fā)：用戶對(duì)各套方案第一E卩象用戶對(duì)各套方案綜合印象用戶對(duì)各套方案單獨(dú)評(píng)價(jià)選出最喜爰選出其次喜爰對(duì)各方案色彩，文字,圖形等分別打T分。結(jié)論出來(lái)以后請(qǐng)全部用戶說(shuō)出最受歡迎方案優(yōu)缺點(diǎn)。全部這些全部需要用圖形表示出來(lái)，直觀科學(xué)。D、方案改善階段經(jīng)過(guò)用戶調(diào)研，我們得到目標(biāo)用戶最喜爰方案。而且了解到用戶為何喜爰，還有什么遺憾等,這么我們就能夠逬行下一步修改了。這時(shí)候我們能夠把精力投入到一個(gè)方案上，將方案做到細(xì)致精美。E、用戶驗(yàn)證階段更正以后方案，我們能夠?qū)⑺葡蚴袌?chǎng)。不過(guò)設(shè)計(jì)并沒(méi)有結(jié)束。我們還需要用戶反饋，好設(shè)計(jì)師應(yīng)該在產(chǎn)品上市以后去站柜臺(tái)。雲(yún)距離接觸最終用戶，看看用戶真正使用時(shí)感想。為以后升級(jí)版本積累經(jīng)驗(yàn)資料。經(jīng)過(guò)上面設(shè)計(jì)過(guò)程描述,大家能夠清楚發(fā)覺(jué),界面UIi殳計(jì)是一個(gè)很科學(xué)推導(dǎo)公式,她有設(shè)計(jì)師對(duì)藝術(shù)了解感悟，但絕對(duì)不是僅僅表現(xiàn)設(shè)計(jì)師個(gè)人繪畫。所以我再?gòu)?qiáng)調(diào)這個(gè)工作過(guò)程是設(shè)計(jì)過(guò)程。UI界面設(shè)計(jì)不存在美工。UI設(shè)計(jì)步驟2.1概述依據(jù)上述標(biāo)準(zhǔn)，分析企業(yè)產(chǎn)品特點(diǎn),制訂符合軟件產(chǎn)品（或項(xiàng)目）生命周期UI設(shè)計(jì)步驟。每個(gè)產(chǎn)品（或項(xiàng)目）生命周期中,UI設(shè)計(jì)師應(yīng)該嚴(yán)格根據(jù)步驟，完成每個(gè)步驟職責(zé),確保步驟正確有效得到實(shí)施，從而提升產(chǎn)品可用性,提升產(chǎn)品質(zhì)量。二:UI界面用戶體驗(yàn)設(shè)計(jì)標(biāo)準(zhǔn)和規(guī)范1:應(yīng)該遵照基礎(chǔ)標(biāo)準(zhǔn)不管是控件使用，提醒信息措辭，還是顏色、窗口布局風(fēng)格，遵照統(tǒng)一標(biāo)準(zhǔn)，做到真正一致。這么得到好處:1:使用戶使用起來(lái)能夠建立起正確心里模型，使用熟練了一個(gè)界面后,切換到另外一個(gè)界面能夠很輕松推測(cè)岀多種功效，語(yǔ)句了解也不需要費(fèi)神了解2:降低培訓(xùn)、支持成本,支持人員不會(huì)行費(fèi)力逐一指導(dǎo)。3:給用戶統(tǒng)一感覺(jué)，不認(rèn)為混亂，心情愉快,支持度增加做法：項(xiàng)目組有經(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)參見《Microsoft用戶體驗(yàn)》控件樣式在許可范圍內(nèi)能夠統(tǒng)一W改其樣式、色調(diào)參考其它軟件優(yōu)異操作，提取對(duì)本項(xiàng)目有用功效，以使用，絕對(duì)不能盲從，漫無(wú)目標(biāo)。依據(jù)需要,設(shè)計(jì)特殊操作控件,準(zhǔn)則為：簡(jiǎn)化操作、達(dá)成一走功效目標(biāo)界面實(shí)施人員和美工商榷控件可實(shí)現(xiàn)性(如不實(shí)施此步驟，j各會(huì)造成各自對(duì)對(duì)方工作不滿意,也會(huì)產(chǎn)生不一致混亂)。反復(fù)尋代上述工作。建立合理化文檔《UI標(biāo)準(zhǔn)》描述上述規(guī)范,強(qiáng)行界面設(shè)計(jì)者了解之，州乍為開發(fā)準(zhǔn)則，SQA人員逬行監(jiān)控開發(fā)人員是否遵照，立即告誡開發(fā)人員。:(Color)顏色使用合適，遵照對(duì)比標(biāo)準(zhǔn)：1:統(tǒng)一色調(diào),針對(duì)軟件類型和用戶工作環(huán)境選擇合適色調(diào)：如：安全軟件,依據(jù)工業(yè)標(biāo)準(zhǔn),能夠選擇黃色,綠色表現(xiàn)壞境保護(hù),藍(lán)色表現(xiàn)時(shí)尚、紫色表現(xiàn)浪漫等等，淡色能夠使人舒適，暗色做背景使人不認(rèn)為累等2:假如沒(méi)有自己系列界面，采取標(biāo)準(zhǔn)界面則能夠少考慮此方面，做到和操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表3:色盲、色^用戶,即使使用了特殊顏色表示關(guān)鍵或尤其東西，也應(yīng)該使用特殊指示符，?quot;!,?著重號(hào),和圖標(biāo)等4:顏色方案也需要測(cè)試，常常因?yàn)轱@示器、顯卡問(wèn)題,色彩表現(xiàn)每臺(tái)機(jī)器全部不一樣,應(yīng)該經(jīng)過(guò)嚴(yán)格測(cè)試，不一樣機(jī)器進(jìn)行顏色測(cè)試5:遵照對(duì)t匕標(biāo)準(zhǔn):在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)色文字以白色背景輕易識(shí)別,而在紅色背景則不易分辨,原因是紅色和藍(lán)色沒(méi)有足夠反差,而藍(lán)色和白色反差很大。除非特殊場(chǎng)所，杜絕使用對(duì)比強(qiáng)烈,讓人產(chǎn)生憎惡感顏色。6:整個(gè)界面色彩盡可能少使用類別不一樣顏色itop色表具體標(biāo)準(zhǔn)參考美術(shù)學(xué)統(tǒng)計(jì)學(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:也需要遵照統(tǒng)一規(guī)則，包含上述顏色表建立，圖標(biāo)建立步驟也應(yīng)該盡可能形成標(biāo)準(zhǔn)，參考itopoutlookbar圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)2:有標(biāo)準(zhǔn)圖標(biāo)風(fēng)格設(shè)計(jì)，有統(tǒng)一構(gòu)圖布局,有統(tǒng)一色調(diào)、對(duì)比度、色階，和圖片風(fēng)格:底圖應(yīng)該融于底圖，使用淺色，低對(duì)比，盡可能少使用顏色。4:圖標(biāo)、圖像應(yīng)該很清楚表示出意思，遵照常見標(biāo)準(zhǔn),或用戶機(jī)器輕易聯(lián)想到物件，絕對(duì)不許可畫出莫名奇妙圖案。5:鼠標(biāo)光標(biāo)樣式統(tǒng)一,盡可能使用系統(tǒng)標(biāo)準(zhǔn),杜絕出現(xiàn)反復(fù)情況,比如一些軟件中一個(gè)手形狀就有4鐘不一樣樣子。:（Font）字體使用統(tǒng)一字體,字體標(biāo)準(zhǔn)選擇依據(jù)操作系統(tǒng)類型決定。漢字采取標(biāo)準(zhǔn)字體，"宋體"，英文采取標(biāo)準(zhǔn)MicrosoftSansSerif不考慮特殊字體（隸書、草書等，特殊情況能夠使用圖片替換），確保每個(gè)用戶使用起來(lái)顯示全部^正常。字體大小依據(jù)系統(tǒng)標(biāo)準(zhǔn)字體來(lái)，比如MSS字體8磅，宋體小五號(hào)字（9磅）五號(hào)字（10.5磅）。全部控件盡可能使用大小統(tǒng)一字體屬性，除了特殊提醒信息、加強(qiáng)顯示等例外情況ITop采取BCB,全部控件默認(rèn)使用parentfont,不許可修改，這么有利于統(tǒng)一調(diào)整。?系統(tǒng)大小字體屬性改變處理。Windows系統(tǒng)有個(gè)桌面設(shè)置,設(shè)置大字體屬性,很多界面設(shè)計(jì)者常常為這個(gè)惱火,假如設(shè)計(jì)時(shí)遵照微軟標(biāo)準(zhǔn)，全部使用相對(duì)大小作為控件大小設(shè)置，當(dāng)切換大小字體時(shí)候,相對(duì)不會(huì)有什么特殊問(wèn)題。不過(guò)因?yàn)槌３７奖闶褂命c(diǎn)陣作為窗口設(shè)計(jì)單位，造成改變大字體后，出現(xiàn)版面混亂問(wèn)題。這個(gè)情況下，應(yīng)該做對(duì)應(yīng)處理:1:寫程序自動(dòng)調(diào)整大小，點(diǎn)陣值乘以一個(gè)對(duì)應(yīng)百分比2:全部采取點(diǎn)陣作為單位,不理會(huì)系統(tǒng)字體調(diào)整,這么能夠降低調(diào)整大字體帶來(lái)麻煩。BCB/DELPHI中多采取這種方法，不過(guò)肯走結(jié)果是和系統(tǒng)不統(tǒng)一。:(Text)文字表示提醒信息、幫助文檔文字表示遵照以下準(zhǔn)則:1:口語(yǔ)化、客氣、多用您、請(qǐng)，不要用或少用專業(yè)術(shù)語(yǔ),杜絕錯(cuò)別字2:斷句逗號(hào)句號(hào)頓號(hào)分號(hào)使用方法,提醒信息t匕較多話,應(yīng)該分段，3:警告、信息、錯(cuò)誤使用對(duì)應(yīng)表示方法4:使用統(tǒng)一語(yǔ)言描述，比如一個(gè)關(guān)閉功效按鈕,能夠描述為退岀、返回、關(guān)閉，則應(yīng)該統(tǒng)—要求。5:依據(jù)用戶不一樣采取對(duì)應(yīng)詞語(yǔ)語(yǔ)氣語(yǔ)氣,如專用軟件，能夠出現(xiàn)很多專業(yè)屬于,用戶為兒童：這能夠語(yǔ)氣親切和藹，老年用戶則應(yīng)該成熟穩(wěn)重。制訂標(biāo)準(zhǔn)遵照之。:(STYLE)控件風(fēng)格，不要使用錯(cuò)誤控件，控件功效要專_有設(shè)計(jì)好同一風(fēng)格控件，假如沒(méi)有能力設(shè)計(jì)出一套控件，則使用標(biāo)準(zhǔn)控件,絕對(duì)不能不倫不類,雜亂無(wú)章?不要錯(cuò)誤使用控件,比如：使用Button樣式做Uable功效，拿主菜單條顯示版權(quán)信息，?統(tǒng)一類型控件操作方法相同,比如一個(gè)控件雙擊能夠?qū)嵤┮恍﹦?dòng)作,而一樣控件,雙擊卻沒(méi)有任何反應(yīng)?—個(gè)控彳牛只做單一功效,不復(fù)用大家為了寫程序方便，喜爰把一個(gè)控件在不一樣情況下做不一樣功效用，這些對(duì)用戶首次了解增加難度,只有用戶熟悉后才能了解。比如改變紅色選項(xiàng),左邊參數(shù)代表不一樣設(shè)置,可能因?yàn)闉榱斯?jié)省控件或編程臺(tái),不過(guò)只有熟練用戶才回使用，這種情況下處理方法：1:分組，使用雙份控彳牛2:使用TABLE頁(yè)，給用戶很顯蕃視覺(jué)改變總結(jié)起來(lái)就是：產(chǎn)品制作人，寫產(chǎn)品計(jì)劃書。用戶體驗(yàn)硏究員，作調(diào)查分析。信息建構(gòu)師,設(shè)計(jì)產(chǎn)品架構(gòu)?；?dòng)設(shè)計(jì)師，作出互動(dòng)步驟。視覺(jué)設(shè)計(jì)師和用戶界面設(shè)計(jì)師,作出頁(yè)面視覺(jué)設(shè)計(jì)。前臺(tái)工程師，前臺(tái)開發(fā)。后臺(tái)工程師，后臺(tái)開發(fā)。8?用戶體驗(yàn)研究員，做用戶測(cè)試確保質(zhì)呈。確走目標(biāo)用戶在軟件設(shè)計(jì)過(guò)程中，需求設(shè)計(jì)角色會(huì)確走軟件目標(biāo)用戶，獲取最終用戶和直接用戶需求。用戶交互要考慮到目標(biāo)用戶不一樣弓I發(fā)交互設(shè)計(jì)關(guān)鍵不一樣。t匕如：對(duì)于科學(xué)用戶和對(duì)于電腦入門用戶設(shè)計(jì)關(guān)鍵就不一樣。耐目標(biāo)T軟件中往往存在多個(gè)組成部分（組件、元素）。不一樣組成部分之間交互設(shè)計(jì)目標(biāo)需要比如：假如以電腦操作初級(jí)用戶作為目標(biāo)用戶，以簡(jiǎn)化界面邏輯為設(shè)計(jì)目標(biāo)，那么該目標(biāo)需要落實(shí)軟件（軟件包）整體,而不是局部。3?元素外觀T交互元素外觀往往影響用戶交互效果。同一個(gè)（類）軟件采取一致風(fēng)格外觀,對(duì)于保持用戶焦點(diǎn)，改善交互效果有很大幫助。遺憾是怎樣確走元素外觀一致沒(méi)有尤其統(tǒng)一衡臺(tái)方法。所以需要對(duì)目標(biāo)用戶進(jìn)行調(diào)查取得反饋。7.可用性標(biāo)準(zhǔn)軟件要為用戶使用，用戶必需能夠了解軟件各元素對(duì)應(yīng)功效。假如不能為用戶了解，那么需要提供一個(gè)非破壞性路徑，使得用戶能夠經(jīng)過(guò)對(duì)該元素操作,了解其對(duì)應(yīng)功效。t匕如：刪除操作元素。用戶能夠點(diǎn)擊刪除操作按鈕,提醒用戶怎樣刪除操作或是否確定刪除操作,用戶能夠愈加具體了解該元素對(duì)應(yīng)功效,同時(shí)能夠取消該操作。7.2可達(dá)成用戶是交互中心,交互元素對(duì)應(yīng)用戶需要功效。所以交互元素必需能夠被用戶控制。用戶能夠用諸如鍵盤、鼠標(biāo)之類交互設(shè)備經(jīng)過(guò)移動(dòng)和觸發(fā)已經(jīng)有交互元素達(dá)成其它在此之前不可見或不可交互交互元素。要注意是交互次數(shù)會(huì)影響可達(dá)成效果。當(dāng)一個(gè)功效被深深隱藏（通常來(lái)說(shuō)超出4層）那么用戶達(dá)成該元素幾率就大大降低了?？蛇_(dá)成效果也同界面設(shè)計(jì)相關(guān)。過(guò)于復(fù)雜界面會(huì)影響可達(dá)成效果。（參考簡(jiǎn)單導(dǎo)向標(biāo)準(zhǔn)）Quote盼段一：分析］1、 用戶需求分析2、 用戶交互場(chǎng)景分析3、 競(jìng)爭(zhēng)產(chǎn)品分析這二者能夠說(shuō)是相輔相成。對(duì)于一個(gè)較為正規(guī)項(xiàng)目而言，肯走有對(duì)用戶需求分析內(nèi)容。其中用戶UI需求是關(guān)鍵組成部分。假如說(shuō)UI設(shè)計(jì)標(biāo)準(zhǔn)是全部UI設(shè)計(jì)出發(fā)點(diǎn)話，那么用戶UI需求就是此次設(shè)計(jì)出發(fā)點(diǎn)。好UI設(shè)計(jì)建立在^寸用戶深刻了解之上。所以用戶交互場(chǎng)景分析就很關(guān)鍵。對(duì)于大部分項(xiàng)目組來(lái)說(shuō)可能沒(méi)有時(shí)間和精力去實(shí)際勘查用戶現(xiàn)有交互、制作完善交互模型考察，不過(guò)UI設(shè)計(jì)人員在分析時(shí)候一定要站在用戶角度思索：假如我是用戶,這里我會(huì)需要什么。競(jìng)爭(zhēng)產(chǎn)品能夠上市而且被UI設(shè)計(jì)者知道,肯走有其優(yōu)點(diǎn)。這就是所i胃三人行必有我?guī)熞馑?。每個(gè)設(shè)計(jì)者思維全部有不足,看到她人設(shè)計(jì)會(huì)有觸類旁通好處。當(dāng)然有時(shí)候能夠參考并不一走是競(jìng)爭(zhēng)產(chǎn)品。［階段二:耐］采取面向場(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ì)?，F(xiàn)在程序開發(fā)主流采取是面向?qū)ο笤O(shè)計(jì)。面向?qū)ο笤O(shè)計(jì)能夠有效表現(xiàn)面向場(chǎng)景和面向事件特點(diǎn)。設(shè)計(jì)四個(gè)要素：交互又塢，數(shù)據(jù)又據(jù)，事件（交互事件和異常），動(dòng)作［階段三：開發(fā)］經(jīng)過(guò)：用戶交互case圖（說(shuō)明用戶和系統(tǒng)之間聯(lián)絡(luò)）用戶交互步驟圖（說(shuō)明交互和事件之間聯(lián)絡(luò)）交互功效設(shè)計(jì)圖（說(shuō)明功效和交互對(duì)應(yīng)關(guān)系）最終得到UI設(shè)計(jì)產(chǎn)品。［階段四：驗(yàn)證］正如UI交互設(shè)計(jì)標(biāo)準(zhǔn)探討文中提到，對(duì)于UI產(chǎn)品驗(yàn)證關(guān)鍵從下面多個(gè)方面入手：1、功效性對(duì)照UI設(shè)計(jì)再好,禾口需求不一致也不能夠。2、實(shí)用性內(nèi)部測(cè)試UI設(shè)計(jì)最重關(guān)鍵點(diǎn)就是實(shí)用性。3、用戶焦點(diǎn)小組UI設(shè)計(jì)是否優(yōu)異關(guān)鍵衡呈依據(jù)。最終，說(shuō)一點(diǎn)具它問(wèn)題。現(xiàn)在往往認(rèn)為交互式設(shè)計(jì)和最終UI效果設(shè)計(jì)能夠截然分開。這就好比說(shuō)需求能夠和設(shè)計(jì)截然分開,是不可能。QuoteUI設(shè)計(jì)步驟和設(shè)計(jì)師參與步驟最近工作中總結(jié)出一條結(jié)論：擁有一個(gè)完善規(guī)范步驟，是決走著一個(gè)項(xiàng)目走向成功或失敗關(guān)鍵。對(duì)于UI設(shè)計(jì)工作步驟,我認(rèn)為能夠依據(jù)"市場(chǎng)分析-用戶分析-架構(gòu)-原型-界面-輸出-完善"這條根本制訂，每個(gè)步驟UI設(shè)計(jì)師全部應(yīng)參與其中。1?產(chǎn)品定位和市場(chǎng)分析這一類工作大多全部是由新產(chǎn)品硏發(fā)部門和市場(chǎng)需求完成，但UI設(shè)計(jì)師應(yīng)了解產(chǎn)品市場(chǎng)走位、產(chǎn)品走義、用戶群