UI界面設(shè)計(jì)規(guī)范分析

1、 精選文檔 精選文檔 可編輯可編輯UI 設(shè)計(jì)(流程/界面)規(guī)范一：UI 設(shè)計(jì)基本概念與流程目的規(guī)范公司 UI 設(shè)計(jì)流程，使 UI 設(shè)計(jì)師參與到產(chǎn)品設(shè)計(jì)整個(gè)環(huán)節(jié)中來，對產(chǎn)品的易用性進(jìn)行全流程負(fù)責(zé)，使 UI 設(shè)計(jì)的流程規(guī)范化，保證 UI 設(shè)計(jì)流程的可操作性。范圍l 界面設(shè)計(jì)lUI 界面設(shè)計(jì)人員、界面評審人員和配置測試人員。概述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)證階段、方案改進(jìn)階段、用戶驗(yàn)證反饋階段等環(huán)節(jié)，履行相應(yīng)的崗位職責(zé)。UI 設(shè)計(jì)師應(yīng)全面負(fù)責(zé)產(chǎn)品以用戶體驗(yàn)為中心

2、的 UI 設(shè)計(jì)，并根據(jù)客戶（市場）要求不斷提升產(chǎn)品可用性。本規(guī)范明確規(guī)定了 UI 設(shè)計(jì)在各個(gè)環(huán)節(jié)的職責(zé)和要求，以保證每個(gè)環(huán)節(jié)的工作質(zhì)量。基本介紹A、需求階段軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開 3W 的考慮（Who,where,why.）也就是使用者，使用環(huán)境，使用方式的需求分析。所以在設(shè)計(jì)一個(gè)軟件產(chǎn)品之前我們應(yīng)該明確什么人（/ 公共場所）。如何用（觸摸屏）應(yīng)的改變?？陀^的評價(jià)標(biāo)準(zhǔn)的。我們只能說哪個(gè)更合適，更合適于我們的最終用戶的就是最好的。B、分析設(shè)計(jì)階段的界面用于被選。C、調(diào)研驗(yàn)證階段實(shí)的反饋。測試階段開始前我們應(yīng)該對測試的具體細(xì)節(jié)進(jìn)行清楚的分析描述。調(diào)研階段需要從以下幾個(gè)問題出發(fā)：

3、用戶對各套方案的第一印象用戶對各套方案的綜合印象用戶對各套方案的單獨(dú)評價(jià)選出最喜歡的選出其次喜歡的對各方案的色彩，文字，圖形等分別打分。結(jié)論出來以后請所有用戶說出最受歡迎方案的優(yōu)缺點(diǎn)。所有這些都需要用圖形表達(dá)出來，直觀科學(xué)。D、方案改進(jìn)階段案做到細(xì)致精美。為以后的升級版本積累經(jīng)驗(yàn)資料。UIUIUI概述根據(jù)上述原則，分析公司產(chǎn)品的特點(diǎn)，制定符合軟件產(chǎn)品（或項(xiàng)目）生命周期的UI程。每個(gè)產(chǎn)品（或項(xiàng)目） 設(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、顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。這樣得到的好處：1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個(gè)界面后，切換到另外一個(gè)界面能夠很輕松的推測出各種功能，語句理解也不需要費(fèi)神理解2：降低培訓(xùn)、支持成本，支持人員不會行費(fèi)力逐個(gè)指導(dǎo)。3：給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加做法：項(xiàng)目組有經(jīng)驗(yàn)人士，確立 UI 規(guī)范：美工提供色調(diào)配色方案，提供整體配色表界面控制程序人員、用戶體驗(yàn)人員提出合理統(tǒng)一使用的控件庫。參考標(biāo)準(zhǔn)界面使用規(guī)范： 控件功能遵循行業(yè)標(biāo)準(zhǔn)，windows 平臺參見Microsoft 用戶體驗(yàn)控件樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)參考其他軟件先

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

6、景使人不覺得累等2讀取系統(tǒng)標(biāo)準(zhǔn)色表3：色盲、色弱用戶，即使使用了特殊顏色表示重點(diǎn)或者特別的東西，也應(yīng)該使用特殊指示符，?quot;!，?著重號，以及圖標(biāo)等4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現(xiàn)每臺機(jī)器都不一樣，應(yīng)該經(jīng)過嚴(yán)格測試，不同機(jī)器進(jìn)行顏色測試56：整個(gè)界面色彩盡量少的使用類別不同的顏色itop 色表具體標(biāo)準(zhǔn)參考美術(shù)學(xué)統(tǒng)計(jì)學(xué)術(shù)標(biāo)準(zhǔn)。 色表的建設(shè)，對于美工在圖案設(shè)計(jì)、包裝設(shè)計(jì)上起著標(biāo)準(zhǔn)參考作用，對于程序界面設(shè)計(jì)人員設(shè)計(jì)控件、窗體調(diào)色起到有章可循的作用。3：(Resource)資源一個(gè)多姿多彩的人機(jī)交互界面，少不了精美的鼠標(biāo)光標(biāo)、圖標(biāo)以及指示圖片、底圖等。1：也需要遵循統(tǒng)

7、一的規(guī)則，包括上述顏色表的建立，圖標(biāo)的建立步驟也應(yīng)該盡可能的形成標(biāo)準(zhǔn)，參考 itop 的 outlookbar 圖標(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)、對比度、色階，以及圖片風(fēng)格3：底圖應(yīng)該融于底圖，使用淺色, 低對比，盡量少的使用顏色。絕對不允許畫出莫名奇妙的圖案。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)類型決定。t s f MSS 字體 89 磅（10.5 磅)。所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外情

8、況 ITop 采用 BCB，所有控件默認(rèn)使用 parent font，不允許修改，這樣有利于統(tǒng)一調(diào)整。系統(tǒng)大小字體屬性改變的處理。Windows但是由于常常方便使用點(diǎn)陣作為窗口設(shè)計(jì)單位，導(dǎo)致改變大字體后，出現(xiàn)版面混亂的問題。這個(gè)情況下，應(yīng)該做相應(yīng)處理：1：寫程序自動(dòng)調(diào)節(jié)大小，點(diǎn)陣值乘以一個(gè)相應(yīng)比例2：全部采用點(diǎn)陣作為單位，不理會系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。BCB/DELPHI 中多采用這種方法，但是必然結(jié)果是和系統(tǒng)不統(tǒng)一。5：(Text)文字表達(dá)提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則： 12：斷句逗號句號頓號分號的用法， 提示信息比較多的話，應(yīng)該分段，3：警告、信息、錯(cuò)誤

9、 使用對應(yīng)的表示方法4：使用統(tǒng)一的語言描述，例如一個(gè)關(guān)閉功能按鈕，可以描述為退出、返回、關(guān)閉，則應(yīng)該統(tǒng)一規(guī)定。5: 根據(jù)用戶不同采用相應(yīng)的詞語語氣語調(diào)，如專用軟件，可以出現(xiàn)很多專業(yè)屬于，用戶為兒童：這可以語氣親切和藹，老年用戶則應(yīng)該成熟穩(wěn)重。制定標(biāo)準(zhǔn)遵循之。6：(STYLE)控件風(fēng)格，不要使用錯(cuò)誤控件，控件功能要專一倫不類，雜亂無章不要錯(cuò)誤使用控件，例如：使用 Button 樣式做 TTable 的功能，拿主菜單條顯示版權(quán)信息，統(tǒng)一類型的控件操作方式相同，例如一個(gè)控件雙擊可以執(zhí)行某些動(dòng)作，而同樣控件，雙擊卻沒有任何反映一個(gè)控件只做單一功能，不復(fù)用增加難度，只有用戶熟悉后才能理解。 例如熟練用戶

10、才回使用，這種情況下解決方法：1:分組，使用雙份控件2：使用 TABLE 頁，給用戶很明顯的視覺變化=總結(jié)起來就是：產(chǎn)品制作人，寫產(chǎn)品計(jì)劃書。用戶體驗(yàn)研究員，作調(diào)查分析。信息建構(gòu)師，設(shè)計(jì)產(chǎn)品架構(gòu)?；?dòng)設(shè)計(jì)師，作出互動(dòng)流程。視覺設(shè)計(jì)師和用戶界面設(shè)計(jì)師，作出頁面視覺設(shè)計(jì)。前臺工程師，前臺開發(fā)。后臺工程師，后臺開發(fā)。用戶體驗(yàn)研究員，做用戶測試確保質(zhì)量。確認(rèn)目標(biāo)用戶設(shè)計(jì)目標(biāo)一致（元素外觀一致（類可用性原則可理解操作，用戶可以更加詳細(xì)的理解該元素對應(yīng)的功能，同時(shí)可以取消該操作。可達(dá)到4 層）那么用戶達(dá)到該元素的幾率就大大降低了。可達(dá)到的效果也同界面設(shè)計(jì)有關(guān)。過于復(fù)雜的界面會影響可達(dá)到的效果。（參考簡單導(dǎo)

11、向原則） Quote階段一：分析1、 用戶需求分析2、 用戶交互場景分析3、 競爭產(chǎn)品分析這兩者可以說是相輔相成的。對于一個(gè)較為正規(guī)的項(xiàng)目而言，必然有對用戶需求的分析內(nèi)容。其中用戶UI 需求是重要的組成部分。如果說UI 設(shè)計(jì)原則是所有 UI 設(shè)計(jì)的出發(fā)點(diǎn)的話，那么用戶UI 需求就是本次設(shè)計(jì)的出發(fā)點(diǎn)。好的 UI對于大部分項(xiàng)目組來說也許沒有時(shí)間和精力去實(shí)際勘查用戶的現(xiàn)有交互UI需要什么。競爭產(chǎn)品能夠上市并且被UI 設(shè)計(jì)者知道，必然有其長處。這就是所謂三人行必階段二：設(shè)計(jì)采用面向場景、面向事件驅(qū)動(dòng)和面向?qū)ο蟮脑O(shè)計(jì)方法。 UI階段三：開發(fā)通過：用戶交互 case 圖（說明用戶和系統(tǒng)之間的聯(lián)系）用戶交互

12、流程圖（說明交互和事件之間的聯(lián)系）交互功能設(shè)計(jì)圖（說明功能和交互的對應(yīng)關(guān)系） 最終得到 UI 的設(shè)計(jì)產(chǎn)品。階段四：驗(yàn)證正如 UI 交互設(shè)計(jì)原則探討文中提到的，對于UI 產(chǎn)品的驗(yàn)證主要從下面幾個(gè)方面入手： 1、 功能性對照 UI 設(shè)計(jì)的再好，和需求不一致也不可以。2、 實(shí)用性內(nèi)部測試 UI 設(shè)計(jì)的最重要點(diǎn)就是實(shí)用性。3、 用戶焦點(diǎn)小組 UI 設(shè)計(jì)是否優(yōu)秀的重要衡量依據(jù)。最后，說一點(diǎn)其他的問題?，F(xiàn)在往往認(rèn)為交互式設(shè)計(jì)和最終的 UI 效果設(shè)計(jì)可以截然分開是不可能的。QuoteUI 設(shè)計(jì)流程以及設(shè)計(jì)師參與的環(huán)節(jié)敗的關(guān)鍵。對于 UI 設(shè)計(jì)的工作流程，我覺得可以根據(jù)“市場分析用戶分析架構(gòu)原型界面輸出完善”這條主線制定，每個(gè)環(huán)節(jié)UI 設(shè)計(jì)師都應(yīng)參與其中。產(chǎn)品定位與市場分析這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場需求完成的，但UI 設(shè)計(jì)師應(yīng)了解產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運(yùn)營方式等。用戶研究與分析這部分工作也可和團(tuán)隊(duì)配合完成架構(gòu)設(shè)計(jì)轉(zhuǎn)流程、