第一篇：UI設(shè)計規(guī)范

UI設(shè)計(流程/界面)規(guī)范

一：UI設(shè)計基本概念與流程 1.1 目的

規(guī)范公司UI設(shè)計流程，使UI設(shè)計師參與到產(chǎn)品設(shè)計整個環(huán)節(jié)中來，對產(chǎn)品的易用性進(jìn)行全流程負(fù)責(zé)，使UI設(shè)計的流程規(guī)范化，保證UI設(shè)計流程的可操作性。1.2范圍 l 界面設(shè)計

l 此文檔用于界面設(shè)計,本文檔的讀者對象是項目管理人員、售前服務(wù)人員、UI界面設(shè)計人員、界面評審人員和配置測試人員。1.3 概述

UI設(shè)計包括交互設(shè)計，用戶研究，與界面設(shè)計三個部分。基于這三部分的UI設(shè)計流程是從一個產(chǎn)品立項開始，UI設(shè)計師就應(yīng)根據(jù)流程規(guī)范，參與需求階段、分析設(shè)計階段、調(diào)研驗證階段、方案改進(jìn)階段、用戶驗證反饋階段等環(huán)節(jié)，履行相應(yīng)的崗位職責(zé)。UI設(shè)計師應(yīng)全面負(fù)責(zé)產(chǎn)品以用戶體驗為中心的UI設(shè)計，并根據(jù)客戶（市場）要求不斷提升產(chǎn)品可用性。本規(guī)范明確規(guī)定了UI設(shè)計在各個環(huán)節(jié)的職責(zé)和要求，以保證每個環(huán)節(jié)的工作質(zhì)量。1.4 基本介紹 A、需求階段

軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開3W的考慮（Who,where,why.）也就是使用者，使用環(huán)境，使用方式的需求分析。所以在設(shè)計一個軟件產(chǎn)品之前我們應(yīng)該明確什么人用(用戶的年齡，性別，愛好，收入，教育程度等)。什么地方用（在辦公室/家庭/廠房車間/公共場所）。如何用（鼠標(biāo)鍵盤/遙控器/觸摸屏）。上面的任何一個元素改變結(jié)果都會有相 1 應(yīng)的改變。

除此之外在需求階段同類競爭產(chǎn)品也是我們必須了解的。同類產(chǎn)品比我們提前問世，我們要比他作的更好才有存在的價值。那么單純的從界面美學(xué)考慮說哪個好哪個不好是沒有一個很客觀的評價標(biāo)準(zhǔn)的。我們只能說哪個更合適，更合適于我們的最終用戶的就是最好的。B、分析設(shè)計階段

通過分析上面的需求，我們進(jìn)入設(shè)計階段。也就是方案形成階段。我們設(shè)計出幾套不同風(fēng)格的界面用于被選。C、調(diào)研驗證階段

幾套風(fēng)格必須保證在同等的設(shè)計制作水平上，不能明顯看出差異，這樣才能得到用戶客觀真實的反饋。

測試階段開始前我們應(yīng)該對測試的具體細(xì)節(jié)進(jìn)行清楚的分析描述。

調(diào)研階段需要從以下幾個問題出發(fā)： 用戶對各套方案的第一印象 用戶對各套方案的綜合印象 用戶對各套方案的單獨評價 選出最喜歡的 選出其次喜歡的

對各方案的色彩，文字，圖形等分別打分。

結(jié)論出來以后請所有用戶說出最受歡迎方案的優(yōu)缺點。所有這些都需要用圖形表達(dá)出來，直觀科學(xué)。D、方案改進(jìn)階段

經(jīng)過用戶調(diào)研，我們得到目標(biāo)用戶最喜歡的方案。而且了解到用戶為什么喜歡，還有什么遺憾等，這樣我們就可以進(jìn)行下一步修改了。這時候我們可以把精力投入到一個方案上，將方案做到細(xì)致精美。E、用戶驗證階段 改正以后的方案，我們可以將他推向市場。但是設(shè)計并沒有結(jié)束。我們還需要用戶反饋，好的設(shè)計師應(yīng)該在產(chǎn)品上市以后去站柜臺。零距離接觸最終用戶，看看用戶真正使用時的感想。為以后的升級版本積累經(jīng)驗資料。

經(jīng)過上面設(shè)計過程的描述，大家可以清楚的發(fā)現(xiàn)，界面UI設(shè)計是一個非常科學(xué)的推導(dǎo)公式，他有設(shè)計師對藝術(shù)的理解感悟，但絕對不是僅僅表現(xiàn)設(shè)計師個人的繪畫。所以我們一再強調(diào)這個工作過程是設(shè)計過程。UI界面設(shè)計不存在美工。

2.UI設(shè)計流程 2.1 概述

根據(jù)上述原則，分析公司產(chǎn)品的特點，制定符合軟件產(chǎn)品（或項目）生命周期的UI設(shè)計流程。每個產(chǎn)品（或項目）的生命周期中，UI設(shè)計師應(yīng)該嚴(yán)格按照流程，完成每個環(huán)節(jié)的職責(zé)，確保流程準(zhǔn)確有效的得到執(zhí)行，從而提高產(chǎn)品的可用性，提升產(chǎn)品質(zhì)量。

二：UI界面用戶體驗設(shè)計原則與規(guī)范 1：應(yīng)該遵循的基本原則

無論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。

這樣得到的好處：

1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個界面后，切換到另外一個界面能夠很輕松的推測出各種功能，語句理解也不需要費神理解 2：降低培訓(xùn)、支持成本，支持人員不會行費力逐個指導(dǎo)。3：給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加

做法：

項目組有經(jīng)驗人士，確立UI規(guī)范： 美工提供色調(diào)配色方案，提供整體配色表

界面控制程序人員、用戶體驗人員提出合理統(tǒng)一使用的控件庫。參考標(biāo)準(zhǔn)界面使用規(guī)范： 控件功能遵循行業(yè)標(biāo)準(zhǔn)，windows平臺參見《Microsoft 用戶體驗》 控件樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)

參考其他軟件先進(jìn)操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無目的。根據(jù)需要，設(shè)計特殊操作控件，準(zhǔn)則為：簡化操作、達(dá)到一定功能目的

界面實施人員與美工商榷控件可實現(xiàn)性,(如不實行此步驟，將會導(dǎo)致各自對對方工作不滿意，也會產(chǎn)生不一致的混亂)。重復(fù)疊代上述工作。建立合理化文檔《UI標(biāo)準(zhǔn)》描述上述規(guī)范，強行界面設(shè)計者理解之，并作為開發(fā)準(zhǔn)則，SQA人員進(jìn)行監(jiān)控開發(fā)人員是否遵循，及時告誡開發(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)時尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等

2：如果沒有自己的系列界面，采用標(biāo)準(zhǔn)界面則可以少考慮此方面，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表

3：色盲、色弱用戶，即使使用了特殊顏色表示重點或者特別的東西，也應(yīng)該使用特殊指示符，?quot;!，?著重號，以及圖標(biāo)等

4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現(xiàn)每臺機器都不一樣，應(yīng)該經(jīng)過嚴(yán)格測試，不同機器進(jìn)行顏色測試

5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒有足夠反差，而藍(lán)色和白色反差很大。除非特殊場合，杜絕使用對比強烈，讓人產(chǎn)生憎惡感的顏色。6：整個界面色彩盡量少的使用類別不同的顏色 itop色表

具體標(biāo)準(zhǔn)參考美術(shù)學(xué)統(tǒng)計學(xué)術(shù)標(biāo)準(zhǔn)。色表的建設(shè)，對于美工在圖案設(shè)計、包裝設(shè)計上起著標(biāo)準(zhǔn)參考作用，對于程序界面設(shè)計人員設(shè)計控件、窗體調(diào)色起到有章可循的作用。3：(Resource)資源

一個多姿多彩的人機交互界面，少不了精美的鼠標(biāo)光標(biāo)、圖標(biāo)以及指示圖片、底圖等。1：也需要遵循統(tǒng)一的規(guī)則，包括上述顏色表的建立，圖標(biāo)的建立步驟也應(yīng)該盡可能的形成標(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)、對比度、色階，以及圖片風(fēng)格

3：底圖應(yīng)該融于底圖，使用淺色, 低對比，盡量少的使用顏色。

4：圖標(biāo)、圖像應(yīng)該很清晰的表達(dá)出意思，遵循常用標(biāo)準(zhǔn)，或者用戶機器容易聯(lián)想的到物件，絕對不允許畫出莫名奇妙的圖案。

5：鼠標(biāo)光標(biāo)樣式統(tǒng)一，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況，例如某些軟件中一個手的形狀就有4種不同的樣子。4：(Font)字體

使用統(tǒng)一字體，字體標(biāo)準(zhǔn)的選擇依據(jù)操作系統(tǒng)類型決定。

中文采用標(biāo)準(zhǔn)字體，“宋體”，英文采用標(biāo)準(zhǔn) Microsoft Sans Serif 不考慮特殊字體(隸書、草書等,特殊情況可以使用圖片取代),保證每個用戶使用起來顯示都很正常。

字體大小根據(jù)系統(tǒng)標(biāo)準(zhǔn)字體來，例如 MSS字體8磅，宋體的小五號字(9磅）五號字（10.5磅)。

所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強顯示等例外情況 ITop采用BCB，所有控件默認(rèn)使用 parent font，不允許修改，這樣有利于統(tǒng)一調(diào)整。·系統(tǒng)大小字體屬性改變的處理。

Windows系統(tǒng)有個桌面設(shè)置，設(shè)置大字體屬性，很多界面設(shè)計者常常為這個惱火，如果設(shè)計時遵循微軟的標(biāo)準(zhǔn)，全部使用相對大小作為控件的大小設(shè)置，當(dāng)切換大小字體的時候，相對不會有什么特殊問題。

但是由于常常方便使用點陣作為窗口設(shè)計單位，導(dǎo)致改變大字體后，出現(xiàn)版面混亂的問題。這個情況下，應(yīng)該做相應(yīng)處理：

1：寫程序自動調(diào)節(jié)大小，點陣值乘以一個相應(yīng)比例

2：全部采用點陣作為單位，不理會系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。BCB/DELPHI中多采用這種方法，但是必然結(jié)果是和系統(tǒng)不統(tǒng)一。5：(Text)文字表達(dá)

提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則：

1：口語化、客氣、多用您、請，不要用或少用專業(yè)術(shù)語，杜絕錯別字 2：斷句逗號句號頓號分號的用法，提示信息比較多的話，應(yīng)該分段，3：警告、信息、錯誤 使用對應(yīng)的表示方法

4：使用統(tǒng)一的語言描述，例如一個關(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)格，不要使用錯誤控件，控件功能要專一

有設(shè)計好的同一風(fēng)格的控件，如果沒有能力設(shè)計出一套控件，則使用標(biāo)準(zhǔn)控件，絕對不能不倫不類，雜亂無章

·不要錯誤使用控件，例如：

使用Button樣式做TTable的功能，拿主菜單條顯示版權(quán)信息，·統(tǒng)一類型的控件操作方式相同，例如一個控件雙擊可以執(zhí)行某些動作，而同樣控件，雙擊卻沒有任何反映

·一個控件只做單一功能，不復(fù)用

很多人為了寫程序方便，喜歡把一個控件在不同情況下做不同功能用，這些對用戶初次理解增加難度，只有用戶熟悉后才能理解。例如

改變紅色選項，左邊的參數(shù)代表不同的設(shè)置，可能由于為了節(jié)省控件或者編程量，但是只有熟練用戶才回使用，這種情況下解決方法： 1:分組，使用雙份控件

2：使用TABLE頁，給用戶很明顯的視覺變化

============================ 7

總結(jié)起來就是：

1.產(chǎn)品制作人，寫產(chǎn)品計劃書。2.用戶體驗研究員，作調(diào)查分析。3.信息建構(gòu)師，設(shè)計產(chǎn)品架構(gòu)。4.互動設(shè)計師，作出互動流程。

5.視覺設(shè)計師和用戶界面設(shè)計師，作出頁面視覺設(shè)計。6.前臺工程師，前臺開發(fā)。7.后臺工程師，后臺開發(fā)。

8.用戶體驗研究員，做用戶測試確保質(zhì)量。

1.確認(rèn)目標(biāo)用戶

在軟件設(shè)計過程中，需求設(shè)計角色會確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計重點的不同。例如：對于科學(xué)用戶和對于電腦入門用戶的設(shè)計重點就不同。

2.設(shè)計目標(biāo)一致

軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設(shè)計目標(biāo)需要一致。例如：如果以電腦操作初級用戶作為目標(biāo)用戶，以簡化界面邏輯為設(shè)計目標(biāo)，那么該目標(biāo)需要貫徹軟件（軟件包）整體，而不是局部。

3.元素外觀一致 交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風(fēng)格的外觀，對于保持用戶焦點，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標(biāo)用戶進(jìn)行調(diào)查取得反饋。

7.可用性原則

7.1可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對應(yīng)的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能。例如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元素對應(yīng)的功能，同時可以取消該操作。

7.2可達(dá)到

用戶是交互的中心，交互元素對應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過移動和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見或者不可交互的交互元素。要注意的是交互的次數(shù)會影響可達(dá)到的效果。當(dāng)一個功能被深深隱藏（一般來說超過4層）那么用戶達(dá)到該元素的幾率就大大降低了。可達(dá)到的效果也同界面設(shè)計有關(guān)。過于復(fù)雜的界面會影響可達(dá)到的效果。（參考簡單導(dǎo)向原則）Quote [階段一：分析]

1、用戶需求分析

2、用戶交互場景分析

3、競爭產(chǎn)品分析這兩者可以說是相輔相成的。

對于一個較為正規(guī)的項目而言，必然有對用戶需求的分析內(nèi)容。其中用戶UI需求是重要的組成部分。如果說UI設(shè)計原則是所有UI設(shè)計的出發(fā)點的話，那么用戶UI需求就是本次設(shè)計的出發(fā)點。好的UI設(shè)計建立在對用戶深刻了解之上。因此用戶交互場景分析就很重要。對于大部分項目組來說也許沒有時間和精力去實際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是UI設(shè)計人員在分析的時候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。競爭產(chǎn)品能夠上市并且被UI設(shè)計者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑肌Ｃ總€設(shè)計者的思維都有局限性，看到別人的設(shè)計會有觸類旁通的好處。當(dāng)然有的時候可以參考的并不一定是競爭產(chǎn)品。

[階段二：設(shè)計]

采用面向場景、面向事件驅(qū)動和面向?qū)ο蟮脑O(shè)計方法。UI設(shè)計著重于交互，因此必然要對最終用戶的交互場景進(jìn)行設(shè)計。軟件是交互產(chǎn)品，用戶所作的就是對軟件事件的響應(yīng)以及觸發(fā)軟件內(nèi)置的事件。因此要面向事件設(shè)計。現(xiàn)在的程序開發(fā)主流采用的是面向?qū)ο笤O(shè)計。面向?qū)ο笤O(shè)計可以有效的體現(xiàn)面向場景和面向事件的特點。設(shè)計的四個要素：交互對象,數(shù)據(jù)對象,事件（交互事件和異常）,動作

[階段三：開發(fā)]

通過：用戶交互case圖（說明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說明交互和事件之間的聯(lián)系）交互功能設(shè)計圖（說明功能和交互的對應(yīng)關(guān)系）最終得到UI的設(shè)計產(chǎn)品。

[階段四：驗證]

正如UI交互設(shè)計原則探討文中提到的，對于UI產(chǎn)品的驗證主要從下面幾個方面入手：

1、功能性對照UI設(shè)計的再好，和需求不一致也不可以。

2、實用性內(nèi)部測試UI設(shè)計的最重要點就是實用性。

3、用戶焦點小組UI設(shè)計是否優(yōu)秀的重要衡量依據(jù)。最后，說一點其他的問題。現(xiàn)在往往認(rèn)為交互式設(shè)計和最終的UI效果設(shè)計可以截然分開。這就好比說需求可以和設(shè)計截然分開，是不可能的。Quote

UI設(shè)計流程以及設(shè)計師參與的環(huán)節(jié)

最近的工作中總結(jié)出一條結(jié)論：擁有一個完善規(guī)范的流程，是決定著一個項目走向成功或失敗的關(guān)鍵。

對于UI設(shè)計的工作流程，我覺得可以根據(jù)“市場分析－用戶分析－架構(gòu)－原型－界面－輸出－完善”這條主線制定，每個環(huán)節(jié)UI設(shè)計師都應(yīng)參與其中。

1.產(chǎn)品定位與市場分析

這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場需求完成的，但UI設(shè)計師應(yīng)了解產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運營方式等。

2.用戶研究與分析

這個過程是非常重要的，設(shè)計師應(yīng)該找到合適的方法來完成此環(huán)節(jié)。你可以搜集相關(guān)資料分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心里、需求等，提出用戶研究報告和可用性設(shè)計建議。這部分工作也可和團(tuán)隊配合完成。時間與項目需求允許的情況下，更可以制定實景用戶分析。

3.架構(gòu)設(shè)計

這里涉及到比較多的界面交互與流程的設(shè)計，根據(jù)可用性分析結(jié)果制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。

4.原型設(shè)計 我覺得這里應(yīng)該是一個小的階段標(biāo)志，要對前面所有工作加以設(shè)計方面的實施，根據(jù)進(jìn)度與成本，可以把原型控制在“手繪－圖形－FLASH-視頻”幾個質(zhì)量范圍。原型的本質(zhì)更傾向與一個DEMO，它不需要有全部的功能，但要體現(xiàn)出設(shè)計對象的基本特性。

5.界面設(shè)計

如果很傾向于圖形界面設(shè)計，這兒是你最喜歡的部分。但一定要結(jié)合循環(huán)討論過的分析結(jié)果做設(shè)計，否則你的作品很難被人信服。色調(diào)、風(fēng)格、界面、窗口、圖標(biāo)、皮膚的表現(xiàn)是本環(huán)節(jié)的關(guān)鍵。

6.界面輸出

作為設(shè)計師，在這一部分的工作就是配合好開發(fā)人員完成相關(guān)的界面結(jié)合。

7.完善工作

這個環(huán)節(jié)是很多部門共同參與的，包括可用性的循環(huán)研究、用戶體驗回饋、測試回饋。同時，UI人員也應(yīng)該把一些可行性建議進(jìn)行完善。很多設(shè)計師做了東西不喜歡改，這是一個大忌。

如上的流程，可能會有很多部門共同參與完成，UI設(shè)計師如何與團(tuán)隊配合并發(fā)揮自己應(yīng)有的作用非常重要。一名合格的UI設(shè)計師，應(yīng)該能貫穿整個UI流程進(jìn)行工作，而并非是單純的圖形界面設(shè)計。

第二篇：UI設(shè)計規(guī)范（流程、界面）

UI設(shè)計(流程/界面)規(guī)范

一：UI設(shè)計基本概念與流程

1.1

目的規(guī)范公司UI設(shè)計流程，使UI設(shè)計師參與到產(chǎn)品設(shè)計整個環(huán)節(jié)中來，對產(chǎn)品的易用性進(jìn)行全流程負(fù)責(zé)，使UI設(shè)計的流程規(guī)范化，保證UI設(shè)計流程的可操作性。

1.2范圍

l

界面設(shè)計

l

此文檔用于界面設(shè)計,本文檔的讀者對象是項目管理人員、售前服務(wù)人員、UI界面設(shè)計人員、界面評審人員和配置測試人員。

1.3

概述

UI設(shè)計包括交互設(shè)計，用戶研究，與界面設(shè)計三個部分。基于這三部分的UI設(shè)計流程是從一個產(chǎn)品立項開始，UI設(shè)計師就應(yīng)根據(jù)流程規(guī)范，參與需求階段、分析設(shè)計階段、調(diào)研驗證階段、方案改進(jìn)階段、用戶驗證反饋階段等環(huán)節(jié)，履行相應(yīng)的崗位職責(zé)。UI設(shè)計師應(yīng)全面負(fù)責(zé)產(chǎn)品以用戶體驗為中心的UI設(shè)計，并根據(jù)客戶（市場）要求不斷提升產(chǎn)品可用性。本規(guī)范明確規(guī)定了UI設(shè)計在各個環(huán)節(jié)的職責(zé)和要求，以保證每個環(huán)節(jié)的工作質(zhì)量。

1.4

基本介紹

A、需求階段

軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開3W的考慮（Who,where,why.）也就是使用者，使用環(huán)境，使用方式的需求分析。所以在設(shè)計一個軟件產(chǎn)品之前我們應(yīng)該明確什么人用(用戶的年齡，性別，愛好，收入，教育程度等)。什么地方用（在辦公室/家庭/廠房車間/公共場所）。如何用（鼠標(biāo)鍵盤/遙控器/觸摸屏）。上面的任何一個元素改變結(jié)果都會有相應(yīng)的改變。

除此之外在需求階段同類競爭產(chǎn)品也是我們必須了解的。同類產(chǎn)品比我們提前問世，我們要比他作的更好才有存在的價值。那么單純的從界面美學(xué)考慮說哪個好哪個不好是沒有一個很客觀的評價標(biāo)準(zhǔn)的。我們只能說哪個更合適，更合適于我們的最終用戶的就是最好的。

B、分析設(shè)計階段

通過分析上面的需求，我們進(jìn)入設(shè)計階段。也就是方案形成階段。我們設(shè)計出幾套不同風(fēng)格的界面用于被選。

C、調(diào)研驗證階段

幾套風(fēng)格必須保證在同等的設(shè)計制作水平上，不能明顯看出差異，這樣才能得到用戶客觀真實的反饋。

測試階段開始前我們應(yīng)該對測試的具體細(xì)節(jié)進(jìn)行清楚的分析描述。

調(diào)研階段需要從以下幾個問題出發(fā)：

用戶對各套方案的第一印象

用戶對各套方案的綜合印象

用戶對各套方案的單獨評價

選出最喜歡的選出其次喜歡的對各方案的色彩，文字，圖形等分別打分。

結(jié)論出來以后請所有用戶說出最受歡迎方案的優(yōu)缺點。

所有這些都需要用圖形表達(dá)出來，直觀科學(xué)。

D、方案改進(jìn)階段

經(jīng)過用戶調(diào)研，我們得到目標(biāo)用戶最喜歡的方案。而且了解到用戶為什么喜歡，還有什么遺憾等，這樣我們就可以進(jìn)行下一步修改了。這時候我們可以把精力投入到一個方案上，將方案做到細(xì)致精美。

E、用戶驗證階段

改正以后的方案，我們可以將他推向市場。但是設(shè)計并沒有結(jié)束。我們還需要用戶反饋，好的設(shè)計師應(yīng)該在產(chǎn)品上市以后去站柜臺。零距離接觸最終用戶，看看用戶真正使用時的感想。為以后的升級版本積累經(jīng)驗資料。

經(jīng)過上面設(shè)計過程的描述，大家可以清楚的發(fā)現(xiàn)，界面UI設(shè)計是一個非常科學(xué)的推導(dǎo)公式，他有設(shè)計師對藝術(shù)的理解感悟，但絕對不是僅僅表現(xiàn)設(shè)計師個人的繪畫。所以我們一再強調(diào)這個工作過程是設(shè)計過程。UI界面設(shè)計不存在美工。

2.UI設(shè)計流程

2.1

概述

根據(jù)上述原則，分析公司產(chǎn)品的特點，制定符合軟件產(chǎn)品（或項目）生命周期的UI設(shè)計流程。每個產(chǎn)品（或項目）的生命周期中，UI設(shè)計師應(yīng)該嚴(yán)格按照流程，完成每個環(huán)節(jié)的職責(zé)，確保流程準(zhǔn)確有效的得到執(zhí)行，從而提高產(chǎn)品的可用性，提升產(chǎn)品質(zhì)量。

二：UI界面用戶體驗設(shè)計原則與規(guī)范

1：應(yīng)該遵循的基本原則

無論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。

這樣得到的好處：

1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個界面后，切換到另外一個界面能夠很輕松的推測出各種功能，語句理解也不需要費神理解

2：降低培訓(xùn)、支持成本，支持人員不會行費力逐個指導(dǎo)。

3：給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加

做法：

項目組有經(jīng)驗人士，確立UI規(guī)范：

美工提供色調(diào)配色方案，提供整體配色表

界面控制程序人員、用戶體驗人員提出合理統(tǒng)一使用的控件庫。參考標(biāo)準(zhǔn)界面使用規(guī)范：

控件功能遵循行業(yè)標(biāo)準(zhǔn)，windows平臺參見《Microsoft

用戶體驗》

控件樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)

參考其他軟件先進(jìn)操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無目的。

根據(jù)需要，設(shè)計特殊操作控件，準(zhǔn)則為：簡化操作、達(dá)到一定功能目的界面實施人員與美工商榷控件可實現(xiàn)性,(如不實行此步驟，將會導(dǎo)致各自對對方工作不滿意，也會產(chǎn)生不一致的混亂)。重復(fù)疊代上述工作。

建立合理化文檔《UI標(biāo)準(zhǔn)》描述上述規(guī)范，強行界面設(shè)計者理解之，并作為開發(fā)準(zhǔn)則，SQA人員進(jìn)行監(jiān)控開發(fā)人員是否遵循，及時告誡開發(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)時尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等

2：如果沒有自己的系列界面，采用標(biāo)準(zhǔn)界面則可以少考慮此方面，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表

3：色盲、色弱用戶，即使使用了特殊顏色表示重點或者特別的東西，也應(yīng)該使用特殊指示符，?quot;!，?著重號，以及圖標(biāo)等

4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現(xiàn)每臺機器都不一樣，應(yīng)該經(jīng)過嚴(yán)格測試，不同機器進(jìn)行顏色測試

5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒有足夠反差，而藍(lán)色和白色反差很大。除非特殊場合，杜絕使用對比強烈，讓人產(chǎn)生憎惡感的顏色。

6：整個界面色彩盡量少的使用類別不同的顏色

itop色表

具體標(biāo)準(zhǔn)參考美術(shù)學(xué)統(tǒng)計學(xué)術(shù)標(biāo)準(zhǔn)。

色表的建設(shè)，對于美工在圖案設(shè)計、包裝設(shè)計上起著標(biāo)準(zhǔn)參考作用，對于程序界面設(shè)計人員設(shè)計控件、窗體調(diào)色起到有章可循的作用。

3：(Resource)資源

一個多姿多彩的人機交互界面，少不了精美的鼠標(biāo)光標(biāo)、圖標(biāo)以及指示圖片、底圖等。

1：也需要遵循統(tǒng)一的規(guī)則，包括上述顏色表的建立，圖標(biāo)的建立步驟也應(yīng)該盡可能的形成標(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)、對比度、色階，以及圖片風(fēng)格

3：底圖應(yīng)該融于底圖，使用淺色,低對比，盡量少的使用顏色。

4：圖標(biāo)、圖像應(yīng)該很清晰的表達(dá)出意思，遵循常用標(biāo)準(zhǔn)，或者用戶機器容易聯(lián)想的到物件，絕對不允許畫出莫名奇妙的圖案。

5：鼠標(biāo)光標(biāo)樣式統(tǒng)一，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況，例如某些軟件中一個手的形狀就有4鐘不同的樣子。

4：(Font)字體

使用統(tǒng)一字體，字體標(biāo)準(zhǔn)的選擇依據(jù)操作系統(tǒng)類型決定。

中文采用標(biāo)準(zhǔn)字體，“宋體”，英文采用標(biāo)準(zhǔn)

Microsoft

Sans

Serif

不考慮特殊字體(隸書、草書等,特殊情況可以使用圖片取代),保證每個用戶使用起來顯示都很正常。

字體大小根據(jù)系統(tǒng)標(biāo)準(zhǔn)字體來，例如

MSS字體8磅，宋體的小五號字(9磅）五號字（10.5磅)。

所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強顯示等例外情況

ITop采用BCB，所有控件默認(rèn)使用

parent

font，不允許修改，這樣有利于統(tǒng)一調(diào)整。

·系統(tǒng)大小字體屬性改變的處理。

Windows系統(tǒng)有個桌面設(shè)置，設(shè)置大字體屬性，很多界面設(shè)計者常常為這個惱火，如果設(shè)計時遵循微軟的標(biāo)準(zhǔn)，全部使用相對大小作為控件的大小設(shè)置，當(dāng)切換大小字體的時候，相對不會有什么特殊問題。

但是由于常常方便使用點陣作為窗口設(shè)計單位，導(dǎo)致改變大字體后，出現(xiàn)版面混亂的問題。

這個情況下，應(yīng)該做相應(yīng)處理：

1：寫程序自動調(diào)節(jié)大小，點陣值乘以一個相應(yīng)比例

2：全部采用點陣作為單位，不理會系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。BCB/DELPHI中多采用這種方法，但是必然結(jié)果是和系統(tǒng)不統(tǒng)一。

5：(Text)文字表達(dá)

提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則：

1：口語化、客氣、多用您、請，不要用或少用專業(yè)術(shù)語，杜絕錯別字

2：斷句逗號句號頓號分號的用法，提示信息比較多的話，應(yīng)該分段，3：警告、信息、錯誤

使用對應(yīng)的表示方法

4：使用統(tǒng)一的語言描述，例如一個關(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)格，不要使用錯誤控件，控件功能要專一

有設(shè)計好的同一風(fēng)格的控件，如果沒有能力設(shè)計出一套控件，則使用標(biāo)準(zhǔn)控件，絕對不能不倫不類，雜亂無章

·不要錯誤使用控件，例如：

使用Button樣式做TTable的功能，拿主菜單條顯示版權(quán)信息，·統(tǒng)一類型的控件操作方式相同，例如一個控件雙擊可以執(zhí)行某些動作，而同樣控件，雙擊卻沒有任何反映

·一個控件只做單一功能，不復(fù)用

很多人為了寫程序方便，喜歡把一個控件在不同情況下做不同功能用，這些對用戶初次理解增加難度，只有用戶熟悉后才能理解。

例如

改變紅色選項，左邊的參數(shù)代表不同的設(shè)置，可能由于為了節(jié)省控件或者編程量，但是只有熟練用戶才回使用，這種情況下解決方法：

1:分組，使用雙份控件

2：使用TABLE頁，給用戶很明顯的視覺變化

==========================================================================

總結(jié)起來就是：

1.產(chǎn)品制作人，寫產(chǎn)品計劃書。

2.用戶體驗研究員，作調(diào)查分析。

3.信息建構(gòu)師，設(shè)計產(chǎn)品架構(gòu)。

4.互動設(shè)計師，作出互動流程。

5.視覺設(shè)計師和用戶界面設(shè)計師，作出頁面視覺設(shè)計。

6.前臺工程師，前臺開發(fā)。

7.后臺工程師，后臺開發(fā)。

8.用戶體驗研究員，做用戶測試確保質(zhì)量。

1.確認(rèn)目標(biāo)用戶

在軟件設(shè)計過程中，需求設(shè)計角色會確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計重點的不同。例如：對于科學(xué)用戶和對于電腦入門用戶的設(shè)計重點就不同。

2.設(shè)計目標(biāo)一致

軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設(shè)計目標(biāo)需要一致。例如：如果以電腦操作初級用戶作為目標(biāo)用戶，以簡化界面邏輯為設(shè)計目標(biāo)，那么該目標(biāo)需要貫徹軟件（軟件包）整體，而不是局部。

3.元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風(fēng)格的外觀，對于保持用戶焦點，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標(biāo)用戶進(jìn)行調(diào)查取得反饋。

7.可用性原則

7.1可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對應(yīng)的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能。例如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元素對應(yīng)的功能，同時可以取消該操作。

7.2可達(dá)到

用戶是交互的中心，交互元素對應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過移動和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見或者不可交互的交互元素。要注意的是交互的次數(shù)會影響可達(dá)到的效果。當(dāng)一個功能被深深隱藏（一般來說超過4層）那么用戶達(dá)到該元素的幾率就大大降低了。可達(dá)到的效果也同界面設(shè)計有關(guān)。過于復(fù)雜的界面會影響可達(dá)到的效果。（參考簡單導(dǎo)向原則）

Quote

[階段一：分析]

1、用戶需求分析

2、用戶交互場景分析

3、競爭產(chǎn)品分析這兩者可以說是相輔相成的。

對于一個較為正規(guī)的項目而言，必然有對用戶需求的分析內(nèi)容。其中用戶UI需求是重要的組成部分。如果說UI設(shè)計原則是所有UI設(shè)計的出發(fā)點的話，那么用戶UI需求就是本次設(shè)計的出發(fā)點。好的UI設(shè)計建立在對用戶深刻了解之上。因此用戶交互場景分析就很重要。對于大部分項目組來說也許沒有時間和精力去實際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是UI設(shè)計人員在分析的時候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。競爭產(chǎn)品能夠上市并且被UI設(shè)計者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑肌Ｃ總€設(shè)計者的思維都有局限性，看到別人的設(shè)計會有觸類旁通的好處。當(dāng)然有的時候可以參考的并不一定是競爭產(chǎn)品。

[階段二：設(shè)計]

采用面向場景、面向事件驅(qū)動和面向?qū)ο蟮脑O(shè)計方法。

UI設(shè)計著重于交互，因此必然要對最終用戶的交互場景進(jìn)行設(shè)計。軟件是交互產(chǎn)品，用戶所作的就是對軟件事件的響應(yīng)以及觸發(fā)軟件內(nèi)置的事件。因此要面向事件設(shè)計。現(xiàn)在的程序開發(fā)主流采用的是面向?qū)ο笤O(shè)計。面向?qū)ο笤O(shè)計可以有效的體現(xiàn)面向場景和面向事件的特點。設(shè)計的四個要素：交互對象,數(shù)據(jù)對象,事件（交互事件和異常）,動作

[階段三：開發(fā)]

通過：用戶交互case圖（說明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說明交互和事件之間的聯(lián)系）交互功能設(shè)計圖（說明功能和交互的對應(yīng)關(guān)系）

最終得到UI的設(shè)計產(chǎn)品。

[階段四：驗證]

正如UI交互設(shè)計原則探討文中提到的，對于UI產(chǎn)品的驗證主要從下面幾個方面入手：

1、功能性對照UI設(shè)計的再好，和需求不一致也不可以。

2、實用性內(nèi)部測試UI設(shè)計的最重要點就是實用性。

3、用戶焦點小組UI設(shè)計是否優(yōu)秀的重要衡量依據(jù)。最后，說一點其他的問題。現(xiàn)在往往認(rèn)為交互式設(shè)計和最終的UI效果設(shè)計可以截然分開。這就好比說需求可以和設(shè)計截然分開，是不可能的。

Quote

UI設(shè)計流程以及設(shè)計師參與的環(huán)節(jié)

最近的工作中總結(jié)出一條結(jié)論：擁有一個完善規(guī)范的流程，是決定著一個項目走向成功或失敗的關(guān)鍵。

對于UI設(shè)計的工作流程，我覺得可以根據(jù)“市場分析－用戶分析－架構(gòu)－原型－界面－輸出－完善”這條主線制定，每個環(huán)節(jié)UI設(shè)計師都應(yīng)參與其中。

1.產(chǎn)品定位與市場分析

這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場需求完成的，但UI設(shè)計師應(yīng)了解產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運營方式等。

2.用戶研究與分析

這個過程是非常重要的，設(shè)計師應(yīng)該找到合適的方法來完成此環(huán)節(jié)。你可以搜集相關(guān)資料分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心里、需求等，提出用戶研究報告和可用性設(shè)計建議。這部分工作也可和團(tuán)隊配合完成。時間與項目需求允許的情況下，更可以制定實景用戶分析。

3.架構(gòu)設(shè)計

這里涉及到比較多的界面交互與流程的設(shè)計，根據(jù)可用性分析結(jié)果制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。

4.原型設(shè)計

我覺得這里應(yīng)該是一個小的階段標(biāo)志，要對前面所有工作加以設(shè)計方面的實施，根據(jù)進(jìn)度與成本，可以把原型控制在“手繪－圖形－FLASH-視頻”幾個質(zhì)量范圍。原型的本質(zhì)更傾向與一個DEMO，它不需要有全部的功能，但要體現(xiàn)出設(shè)計對象的基本特性。

5.界面設(shè)計

如果很傾向于圖形界面設(shè)計，這兒是你最喜歡的部分。但一定要結(jié)合循環(huán)討論過的分析結(jié)果做設(shè)計，否則你的作品很難被人信服。色調(diào)、風(fēng)格、界面、窗口、圖標(biāo)、皮膚的表現(xiàn)是本環(huán)節(jié)的關(guān)鍵。

6.界面輸出

作為設(shè)計師，在這一部分的工作就是配合好開發(fā)人員完成相關(guān)的界面結(jié)合。

7.完善工作

這個環(huán)節(jié)是很多部門共同參與的，包括可用性的循環(huán)研究、用戶體驗回饋、測試回饋。同時，UI人員也應(yīng)該把一些可行性建議進(jìn)行完善。很多設(shè)計師做了東西不喜歡改，這是一個大忌。

如上的流程，可能會有很多部門共同參與完成，UI設(shè)計師如何與團(tuán)隊配合并發(fā)揮自己應(yīng)有的作用非常重要。一名合格的UI設(shè)計師，應(yīng)該能貫穿整個UI流程進(jìn)行工作，而并非是單純的圖形界面設(shè)計。

第三篇：UI設(shè)計師必學(xué)的設(shè)計規(guī)范

要做設(shè)計規(guī)范前，先來了解什么是設(shè)計規(guī)范，不是把所有組件都擺在同一張圖上排排站吃果果就好，設(shè)計規(guī)范(Design Code / Design Specifications)一文中提到： 設(shè)計規(guī)范是指對設(shè)計的具體技術(shù)要求，是設(shè)計工作的規(guī)則。一般包括總體目標(biāo)的技術(shù)描述、功能的技術(shù)描述、技術(shù)指標(biāo)的技術(shù)描述，以及限制條件的技術(shù)描述等。

設(shè)計規(guī)范的層次

粗分成 3 個層面：公司、產(chǎn)品線、單一產(chǎn)品。包含視覺、品牌、用戶體驗等。

設(shè)計規(guī)范的目的 量化指標(biāo)

確定一般可用性原則和審美常識下的避免犯錯的方法，以及一旦出現(xiàn)錯誤后的補救方案。

確認(rèn)設(shè)計關(guān)鍵點

獲得該設(shè)計規(guī)范針對范圍內(nèi)的關(guān)鍵點，包括設(shè)計方向和設(shè)計元素，以通過項目設(shè)計的過程，達(dá)到團(tuán)隊成員的更加密切的配合效果。它是一份檢驗文件，記錄過程中的錯誤，留作以后的經(jīng)驗。并在此可以做出項目和產(chǎn)品設(shè)計的里程碑。

規(guī)范設(shè)計原則

這個原則有可能是針對單個項目的，也有可能是整個設(shè)計團(tuán)隊的指導(dǎo)原則，這個原則要被反復(fù)強調(diào)，反復(fù)實施，團(tuán)隊人員要共同為這個原則負(fù)責(zé)。

簡單來說就是：告訴你這些組件可以怎么用、用在哪里、有什么樣的限制、怎么驗收。

以上取自 設(shè)計規(guī)范(Design Code / Design Specifications)

產(chǎn)品組成

產(chǎn)品的組成大約可以拆分成 頁面 > 組件 > 元素 > 圖(影片)、文字、icon、窗體、互動 等。

各元素都可能需要制定 色彩、透明度、尺寸、間距、文件格式、質(zhì)量、風(fēng)格 等。

互動包含 手勢操作、過場動畫、特效、音效、震動 等。

先將各個產(chǎn)品拆到最小單位，再進(jìn)行分類整理，通常就是那幾種分類方式。參考現(xiàn)有的設(shè)計規(guī)范會更容易理解。

別人家的設(shè)計規(guī)范

我又把 Google design guidelines(自備梯子)掏出來了，這份應(yīng)該是目前最流行、寫得詳細(xì)的一份設(shè)計規(guī)范。可以從里面分析設(shè)計規(guī)范要包含哪些內(nèi)容。

從左方的選單中可以看到這份文件包含：總覽、動畫、風(fēng)格、布局、組合組件、圖片、易用性、資源。點開后還有更詳細(xì)的分類，之后才會是內(nèi)文部份。

每一個組件或元素都會包含

元素意義

使用規(guī)則、限制

運用場合、時機，與其原因

和同質(zhì)元素間的一制性(新制規(guī)則)

組合運用

各種狀態(tài)

平臺差異性

正確示范、錯誤示范

元素意義

這個元素有什么的功能、對用戶來說有什么幫助、呈現(xiàn)什么信息等等。

使用規(guī)則、限制，與其原因

要怎么使用這項元素、使用這項元素需要注意什么事情?為什么?

運用場合、時機

什么情況下會使用到這項元素?它會出現(xiàn)在什么地方?

和同質(zhì)元素間的一致性(新制規(guī)則)

若現(xiàn)有同質(zhì)元素不敷使用、需另制新款時，必須符合哪些規(guī)定以求風(fēng)格一致?(如icon)

組合運用

當(dāng)元素和其他組件混合使用，會有什么限制?是否有特例情況?

各種狀態(tài)

若元素會因操作或其他原因呈現(xiàn)不同樣貌狀況時，規(guī)則為何?

平臺差異性

若產(chǎn)品發(fā)布于各種平臺上，該元素是否會有不同的情況?

正確示范、錯誤示范

除了正確示范外，將常見的錯誤一并標(biāo)示可以降低出錯慮、節(jié)省來回修改的時間。不僅只有文字之外，最好附上圖片甚至動畫說明。

制作文件的規(guī)范

只要是「文件」都有它的規(guī)范存在，即使是 Style Guideline。制作這份文件也有它的規(guī)則存在。

階層

分類

順序

視覺

維護(hù)人員

階層

你的產(chǎn)品可拆分成幾個階層?階層的規(guī)則是什么?如果不懂的話先套用 Google Design 的分類，之后就知道怎么創(chuàng)健自己產(chǎn)品的階層。

分類

即使分了階層，也會有各式各樣的元素待整理，比如按鈕。同性質(zhì)的放在一起或是同個區(qū)塊才會用到的方在一起，要看你的產(chǎn)品適合套用什么樣的分類規(guī)則。

順序

最重要信息的放最醒目的地方，這次改版才加入的新規(guī)則也可放在最醒目的地方。這份文件要用什么規(guī)則排序目錄需要好好思考。

視覺

這份文件的排版、色彩、字體字型、內(nèi)容一致性、檔案發(fā)布的格式等等，都會影響到使用者是否能快速找到他想看的章節(jié)。

維護(hù)人員

規(guī)范不是做好了就算，每過一段時間就需要檢查改版。需要明確訂定編修人員，并建立改版審核機制「要在什么情況下才能變動此文件的內(nèi)容」，確保此文件的穩(wěn)定和可信。

結(jié)論

Style Guideline 是份指南，將所有的規(guī)則系統(tǒng)整理后條列化，必需要做到「不管是誰只要看了這份文件都能產(chǎn)出一樣的成品」。不光是設(shè)計師需要常常閱讀，同時也會影響到 PM、企劃、RD 在產(chǎn)品上的設(shè)計與開發(fā)。絕對不能今天做了什么好看的設(shè)計、就去改一下設(shè)計規(guī)范。而且所有的設(shè)計都要照這份文件開發(fā)，要改動規(guī)范就必須提出申請，并通知所有 公司成員，確實傳達(dá)改動內(nèi)容與原因，否則這份文件形同虛設(shè)。

第四篇：UI設(shè)計中的字體設(shè)計規(guī)范

去名企 拿高薪 到翡翠教育

UI設(shè)計中的字體設(shè)計規(guī)范

很多剛做APP界面的設(shè)計師，經(jīng)常會因為字號，字體顏色，間距而困擾。拿到設(shè)計需求后，開始進(jìn)行設(shè)計，不知道從何去調(diào)整界面的字號和行間距等。容易碰到的問題是頁面和頁面的字號調(diào)著調(diào)著就大小或顏色不統(tǒng)一了。并且容易導(dǎo)致設(shè)計稿反復(fù)得修改。設(shè)計出來的效果圖文字左右間距層次不齊，導(dǎo)致與預(yù)期不符等。

在實踐的過程中我們會慢慢發(fā)現(xiàn)一些規(guī)律或者經(jīng)驗規(guī)范。接下來翡翠教育柳州墨本校區(qū)的老師將和大家一起聊聊在界面設(shè)計中的那些常規(guī)字體的使用規(guī)范。

不明確而繁瑣的字體搭配會導(dǎo)致整個畫面失調(diào)。可以這樣說，字體可以成就設(shè)計也可以毀掉設(shè)計。

問題的關(guān)鍵有：

1.字體樣式太多，導(dǎo)致頁面雜亂 2.使用的字體不易識別

3.字體樣式和內(nèi)容的氣氛或規(guī)范不匹配 怎么避免這樣的結(jié)果發(fā)生呢？

通過設(shè)計經(jīng)驗可以幫助你做出更好的版式,翡翠教育柳州墨本校區(qū)的老師都擁有豐富的從業(yè)經(jīng)驗，了解不同平臺的常用字體設(shè)計規(guī)范，幫助學(xué)生快速的掌握規(guī)范。

在每個項目設(shè)計中只使用1-2個字體樣式，而在品牌字有明確的規(guī)范的情況下，只需要一種字體貫穿全文，通過對字體放大來強調(diào)重點文案。字體用的太多，越顯得不夠?qū)I(yè)。

不同的樣式的字體，形狀或系列最好相同，保證字體風(fēng)格的一致性。字體與背景的層次要分明,確保字體樣式與色調(diào)氣氛相匹配

在不同平臺的界面設(shè)計中規(guī)范的字體會有不同，像移動界面的設(shè)計就會有固定的字體樣式。網(wǎng)頁中會有常用的幾個字體，在這我和大家分別介紹一下。

以下是在72像素/英寸下的規(guī)范 移動端常規(guī)字體

IOS:常選擇華文黑體或者冬青黑體，尤其是冬青黑體效果最好。去名企 拿高薪 到翡翠教育

Android

英文字體：Roboto 中文字體：Noto 移動端常用的的字號有哪些呢？ 導(dǎo)航主標(biāo)題字號：40-42px 在內(nèi)文展示中字號大小又是多大呢？

大的正文字號32px,副文是26px，小字20px，在內(nèi)文的使用中，根據(jù)不同

類型的App會有所區(qū)別。

像新聞類的APP或文字閱讀類的APP更注重文本的閱讀便捷性，正文字號36px，會選擇性的加粗。

大家注意了，在選用字體大小的時候一定要選擇偶數(shù)的字號，因為在開發(fā)界面的時候，字號大小換算是要除以二的。這個詳細(xì)緣由大家可以網(wǎng)上查詢，我就不在這一一的介紹了。大家感興趣的歡迎前來翡翠教育柳州墨本校區(qū)咨詢了解。

第五篇：療養(yǎng)院設(shè)計規(guī)范

3.3 理療用房

第3.3.1條 理療部分一般由電療、光療、水療、體療、蠟療、泥療、針灸、按摩等療室組成。各療室應(yīng)符合下列規(guī)定：

一、各療室的設(shè)置應(yīng)視療養(yǎng)院的性質(zhì)、規(guī)模及天然療養(yǎng)因子資源等情況確定；

二、各療室宜集中組合成獨立區(qū)，水療室、體療室可單獨設(shè)置；

三、各療室宜有等候空間，治療床的間距視各種療法確定，但不應(yīng)小于0.75m，床之間宜有活動分隔。

第3.3.2條

電療室

一、高頻、超高頻、靜電、電睡眠及四槽浴應(yīng)單獨設(shè)室。

二、高頻、超高頻室宜有屏蔽措施。醫(yī)護(hù)人員工作臺與治療機中線的距離不應(yīng)小于3m。

三、電睡眠室應(yīng)有遮光隔聲措施，治療床之間應(yīng)分隔，隔間凈寬不應(yīng)小于1.80m。

四、靜電室應(yīng)有通風(fēng)換氣設(shè)施。

五、地面應(yīng)有絕緣、防潮措施。墻面應(yīng)做不低于1.20m的絕緣墻裙。

六、暖氣片宜嵌入墻內(nèi)，并應(yīng)設(shè)置非導(dǎo)電體的護(hù)欄。

七、各種管線應(yīng)暗裝。八、四槽浴臺座應(yīng)有絕緣措施，給水管宜敷設(shè)于管溝內(nèi)。數(shù)量較多的四槽浴治療室室內(nèi)地面排水宜采用帶孔蓋板的排水溝。

第3.3.3條

光療室

一、紫外線治療宜單獨設(shè)室，并應(yīng)有通風(fēng)換氣設(shè)施。

二、激光室墻面、頂棚應(yīng)為深冷色調(diào)，窗玻璃應(yīng)避免反光。

三、光療室地面應(yīng)有絕緣、防潮措施，墻面應(yīng)有不低于1.20m的絕緣墻裙。

第3.3.4條

水療室

一、水療室由等候空間、醫(yī)護(hù)辦公室、浴室、更衣休息室、廁所、貯存室等組成。

二、更衣休息室應(yīng)與各浴室有門相通，其休息床數(shù)與水療設(shè)施使用人數(shù)比例為1:1～2:1，兩平行休息床的間距不應(yīng)小于0.60m。

三、盆浴室兩平行浴盆間距宜為0.70m，浴盆應(yīng)設(shè)上下盆扶手。

四、大池浴室、旋渦浴室的進(jìn)口處應(yīng)設(shè)淋浴噴頭和洗臉盆。

1.大池宜做成矩形，旋渦浴池應(yīng)做成圓形或橢圓形，深度宜為1.30m，拉手棒中線離池底高度宜為1.20m，池的溢水口離池底高度宜為1.10m，池底應(yīng)采用防滑易清洗的面層材料；

2.在大池的適當(dāng)位置應(yīng)設(shè)帶扶手的上下池臺階或固定便梯，旋渦浴池應(yīng)設(shè)方便上下池的活動便梯。

五、設(shè)“8”字形槽浴者，槽壁上緣離地面高度宜為0.85m，槽深宜為0.50m。

六、脈沖水力按摩機浴室應(yīng)有隔聲措施。

七、淋浴室包括全身浴、坐浴、針狀浴、雨狀浴、直噴浴、扇形浴等。1.操縱臺應(yīng)設(shè)在工作人員能看到每個淋浴者處；

2.操縱臺與直噴浴、扇形浴的距離為3.50～4.00m。直噴浴墻上應(yīng)裝把手；

3.各淋浴位置之間宜用透明材料分隔，坐浴、針狀浴、雨狀浴的隔間中距不應(yīng)小于1.10m，全身浴不應(yīng)小于1.50m；

4.地面排水應(yīng)坡向直噴浴處。排水溝宜采用帶孔蓋板。

八、浴室的墻面，頂棚應(yīng)用防水面層材料，頂棚應(yīng)防冷凝水下滴。

九、浴室的窗戶應(yīng)有視線遮擋措施，并應(yīng)有通風(fēng)排氣設(shè)施。

第3.3.5條

體療室

一、體療室視需要可附設(shè)診察室，氣功室及貯存室等。

二、體療室布置應(yīng)避免其聲響對鄰近用房的干擾，若布置在樓層，應(yīng)采取隔聲措施。

三、樓地面面層宜采用有彈性、耐磨損材料。

四、體療室設(shè)有球類活動時，其窗戶、燈具應(yīng)有防護(hù)措施。體療室墻面應(yīng)采用耐碰撞、易擦拭的面層材料。

五、體療室的凈高應(yīng)按體療設(shè)施要求確定。

第3.3.6條

蠟療室

一、蠟療室由治療、貯蠟、熔蠟。制蠟等部分組成。治療部分應(yīng)獨自設(shè)室。規(guī)模較大的蠟療室視需要可附設(shè)洗滌小間。

二、蠟療室應(yīng)防止其氣味對周圍用房的影響。熔蠟室應(yīng)有通風(fēng)換氣設(shè)施。

第3.3.7條

泥療室

一、泥療室由治療、貯泥、泥攪拌、泥加溫、調(diào)泥、淋浴、廁所、洗滌等部分組成。治療部分應(yīng)男女分別設(shè)室。

二、設(shè)有原泥池進(jìn)行全身泥療的治療房，應(yīng)有上下池便道及抽排地下水的設(shè)施。

三、泥療室宜設(shè)于底層，并應(yīng)有良好通風(fēng)。

第3.3.8條

針灸室與按摩室兩平行治療床的間距不應(yīng)小于0.90m。針灸室應(yīng)有通風(fēng)換氣設(shè)施。

3.4 醫(yī)技用房

第3.4.1條

放射科用房

一、放射科用房由透視、攝片、暗室、登記、存片、辦公、讀片和候診等部分組成。

二、放射用房應(yīng)單獨布置或布置在建筑物底層一翼的盡端。三、一般透視、攝片室的面積不應(yīng)小于24m2；200mA以上的X光診斷機機房每間面積不應(yīng)小于36m2(包括控制臺位置)。室內(nèi)凈高應(yīng)滿足設(shè)備安裝的要求。1.窗戶及裝有機械通風(fēng)的通風(fēng)口應(yīng)有遮光措施；

2.地面面層應(yīng)采用防潮、絕緣的材料，并宜設(shè)帶有活動蓋板的電纜地溝； 3.裝有風(fēng)扇者，其旋轉(zhuǎn)部分離地不應(yīng)低于2.20m，并不得影響X光機組的運行； 4.門的凈寬不應(yīng)小于1.10m，通向控制室的門的凈寬不應(yīng)大于0.70m； 5.四周墻體、樓面、頂蓋及其相關(guān)設(shè)施必須達(dá)到衛(wèi)生部門規(guī)定的防護(hù)要求。

四、暗室的位置應(yīng)與攝片室相鄰。

1.暗室與攝片室相鄰的墻面應(yīng)裝置傳片箱，箱內(nèi)尺寸應(yīng)能容納最大膠片盒橫放，并應(yīng)加防護(hù)措施； 2.暗室進(jìn)口處、窗戶及機械排風(fēng)口應(yīng)有遮光措施。墻面、頂棚應(yīng)用較深色調(diào)；

3.洗片池內(nèi)壁應(yīng)用深色耐酸堿材料，池底用淺色耐酸堿材料，其斷面應(yīng)符合Ｘ光片夾子擱置要求。

五、存片室應(yīng)有防潮、通風(fēng)措施，其位置應(yīng)與觀片室相鄰。規(guī)模較小者兩室可合并。

第3.4.2條

檢驗科用房

一、檢驗用房包括臨床、生化、洗滌等部分。根據(jù)療養(yǎng)院規(guī)模大小可分設(shè)或合并設(shè)置。

二、顯微鏡觀察臺宜沿外窗設(shè)置，天平臺應(yīng)有防震措施。

三、生化檢驗室應(yīng)設(shè)通風(fēng)柜，并應(yīng)有電源、水源及排水等設(shè)施。通風(fēng)柜的排氣管應(yīng)高出屋面。

四、洗滌室宜靠近臨床、生化檢驗室，洗滌池內(nèi)壁及排水管應(yīng)用耐酸堿材料。

第3.4.3條

功能檢查用房

一、功能檢查包括心功能檢查、腦功能檢查、基礎(chǔ)代謝測定、超聲波及肺功能檢查等部分組成。可按實際需要設(shè)置，其位置應(yīng)遠(yuǎn)離電磁干擾處或采取屏蔽措施。

二、腦功能檢查室宜設(shè)于盡端，避免有穿過式交通。

三、基礎(chǔ)代謝測定室應(yīng)布置在較安靜處。

四、超聲波檢查室應(yīng)有遮光措施。

五、肺功能檢查室應(yīng)設(shè)洗滌池，墻裙應(yīng)采用可沖洗的面層材料。

六、檢查床旁應(yīng)有放置儀器和操作的空間。一床獨用凈寬不應(yīng)小于1.0m，兩床共用凈寬不應(yīng)小于1.40m。檢查室應(yīng)有醫(yī)師工作臺位置。

七、地面應(yīng)有絕緣防潮措施。

第3.4.4條

藥劑用房

一、中藥房由配方、貯藥、整理加工、原藥庫、煎藥等部分組成。1.整理加工室宜緊靠中藥原藥庫，并應(yīng)有良好通風(fēng)、排煙、除塵等條件； 2.配方、貯藥、整理加工、原藥庫等應(yīng)有防潮、防鼠害措施； 3.煎藥室宜單獨設(shè)置，并應(yīng)有排煙、排氣設(shè)施。

二、西藥房由調(diào)劑室、普通制劑室(可按實際需要設(shè)置)及藥庫等部分組成。1.調(diào)劑室應(yīng)設(shè)領(lǐng)藥處；

2.普通制劑室位置應(yīng)鄰近調(diào)劑室和藥庫，室內(nèi)應(yīng)設(shè)制劑臺及洗滌池，臺面及池壁應(yīng)用耐酸堿材料； 3.普通制劑室的地面、墻面、頂棚和工作臺應(yīng)采用耐沖洗、易清潔材料； 4.易燃、易爆、劇毒和貴重藥品存放必須有安全防護(hù)措施； 5.調(diào)劑室、藥庫應(yīng)有防潮，防鼠害的措施，并避免陽光直射。

第3.4.5條

供應(yīng)室

一、供應(yīng)室由接收、洗滌、敷料制作、消毒、貯存、分發(fā)、工作人員更衣等部分組成。規(guī)模較小的療養(yǎng)院可合并使用，但應(yīng)避免潔污交叉。

二、洗滌池面層應(yīng)采用耐酸堿材料。

三、敷料制作及消毒室應(yīng)有通風(fēng)換氣設(shè)施。