有些時(shí)候閑暇中想起來(lái)十分的慚愧， 一段時(shí)間來(lái)一直在研究和從事所謂的ui理論研究工作，但卻為能有時(shí)間和機會(huì )系統的研究和完成一套所謂的“界面指南（規范）”，， 今天發(fā)現了一個(gè)不錯的相關(guān)文章，特轉貼上來(lái)大家一起聊聊相關(guān)問(wèn)題。。。
一：遵循一致的準則，確立標準并遵循 無(wú)論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統一的標準，做到真正的一致。 這樣得到的好處：
1：使用戶(hù)使用起來(lái)能夠建立起精確的心里模型，使用熟練了一個(gè)界面后，切換到另外一個(gè)界面能夠很輕松的推測出各種功能，語(yǔ)句理解也不需要費神理解
2：降低培訓、支持成本，支持人員不會(huì )行費力逐個(gè)指導。
3：給用戶(hù)統一感覺(jué)，不覺(jué)得混亂，心情愉快，支持度增加
做法：
項目組有經(jīng)驗人士，確立UI規范：
·美工提供色調配色方案，提供整體配色表
·界面控制程序人員、用戶(hù)體驗人員提出合理統一使用的控件庫。參考標準界面使用規范：
控件功能遵循行業(yè)標準，windows平臺參見(jiàn)《Microsoft 用戶(hù)體驗》(MSDN中有，中文已經(jīng)翻譯發(fā)行，項目組必須有一本)
控件樣式在允許的范圍內可以統一修改其樣式、色調
參考其他軟件先進(jìn)操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無(wú)目的。
根據需要，設計特殊操作控件，準則為：簡(jiǎn)化操作、達到一定功能目的
·界面實(shí)施人員與美工商榷控件可實(shí)現性,(如不實(shí)行此步驟，將會(huì )導致各自對對方工作不滿(mǎn)意，也會(huì )產(chǎn)生不一致的混亂)。重復疊代上述工作。
·建立合理化文檔《UI標準》描述上述規范，
·強行界面設計者理解之，并作為開(kāi)發(fā)準則，
·SQA人員進(jìn)行監控開(kāi)發(fā)人員是否遵循，及時(shí)告誡開(kāi)發(fā)人員。
二：(Color)顏色使用恰當，遵循對比原則： 1：統一色調，針對軟件類(lèi)型以及用戶(hù)工作環(huán)境選擇恰當色調：
如：安全軟件，根據工業(yè)標準，可以選取黃色，綠色體現環(huán)保，藍色表現時(shí)尚、紫色表現浪漫等等，淡色可以使人舒適，暗色做背景使人不覺(jué)得累等
2：如果沒(méi)有自己的系列界面，采用標準界面則可以少考慮此方面，做到與操作系統統一，讀取系統標準色表
3：色盲、色弱用戶(hù)，即使使用了特殊顏色表示重點(diǎn)或者特別的東西，也應該使用特殊指示符，?quot;!，?著(zhù)重號，以及圖標等
4：顏色方案也需要測試，常常由于顯示器、顯卡的問(wèn)題，色彩表現每臺機器都不一樣，應該經(jīng)過(guò)嚴格測試，不同機器進(jìn)行顏色測試
5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍色沒(méi)有足夠反差，而藍色和白色反差很大。除非特殊場(chǎng)合，杜絕使用對比強烈，讓人產(chǎn)生憎惡感的顏色。 6：整個(gè)界面色彩盡量少的使用類(lèi)別不同的顏色
itop色表
具體標準參考美術(shù)學(xué)統計學(xué)術(shù)標準。 色表的建設，對于美工在圖案設計、包裝設計上起著(zhù)標準參考作用，對于程序界面設計人員設計控件、窗體調色起到有章可循的作用。
三：(Resource)資源 一個(gè)多姿多彩的人機交互界面，少不了精美的鼠標光標、圖標以及指示圖片、底圖等。
1：也需要遵循統一的規則，包括上述顏色表的建立，圖標的建立步驟也應該盡可能的形成標準，參考itop的outlookbar圖標設計標準
2：有標準的圖標風(fēng)格設計，有統一的構圖布局，有統一的色調、對比度、色階，以及圖片風(fēng)格
3：底圖應該融于底圖，使用淺色, 低對比，盡量少的使用顏色。
4：圖標、圖像應該很清晰的表達出意思，遵循常用標準，或者用戶(hù)機器容易聯(lián)想的到物件，絕對不允許畫(huà)出默認奇妙的圖案。
5：鼠標光標樣式統一，盡量使用系統標準，杜絕出現重復的情況，例如某些軟件中一個(gè)手的形狀就有4鐘不同的樣子。
如：《如何創(chuàng )建XP圖標》http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp
附件：Itop outlook howto.doc 描述itop項目中，outlookxp風(fēng)格圖標的制作方法
四：(Font)字體 使用統一字體，字體標準的選擇依據操作系統類(lèi)型決定。
中文采用標準字體，“宋體”，英文采用標準 Microsoft Sans Serif 不考慮特殊字體(隸書(shū)、草書(shū)等,特殊情況可以使用圖片取代),保證每個(gè)用戶(hù)使用起來(lái)顯示都很正常。
字體大小根據系統標準字體來(lái)，例如 MSS字體8磅，宋體的小五號字(9磅）五號字（10.5磅)。
所有控件盡量使用大小統一的字體屬性，除了特殊提示信息、加強顯示等例外情況
ITop采用BCB，所有控件默認使用 parent font，不允許修改，這樣有利于統一調整。
·系統大小字體屬性改變的處理。
Windows系統有個(gè)桌面設置，設置大字體屬性，很多界面設計者常常為這個(gè)惱火，如果設計時(shí)遵循微軟的標準，全部使用相對大小作為控件的大小設置，當切換大小字體的時(shí)候，相對不會(huì )有什么特殊問(wèn)題。
但是由于常常方便使用點(diǎn)陣作為窗口設計單位，導致改變大字體后，出現版面混亂的問(wèn)題。
這個(gè)情況下，應該做相應處理：
1：寫(xiě)程序自動(dòng)調節大小，點(diǎn)陣值乘以一個(gè)相應比例
2：全部采用點(diǎn)陣作為單位，不理會(huì )系統字體的調節，這樣可以減少調節大字體帶來(lái)的麻煩。BCB/DELPHI中多采用這種方法，但是必然結果是和系統不統一。
五：(Text)文字表達 提示信息、幫助文檔文字表達遵循以下準則：
1：口語(yǔ)化、客氣、多用您、請，不要用或少用專(zhuān)業(yè)術(shù)語(yǔ)，杜絕錯別字
2：斷句逗號句號頓號分號的用法， 提示信息比較多的話(huà)，應該分段，
3：警告、信息、錯誤 使用對應的表示方法
4：使用統一的語(yǔ)言描述，例如一個(gè)關(guān)閉功能按鈕，可以描述為退出、返回、關(guān)閉，則應該統一規定。
5: 根據用戶(hù)不同采用相應的詞語(yǔ)語(yǔ)氣語(yǔ)調，如專(zhuān)用軟件，可以出現很多專(zhuān)業(yè)屬于，用戶(hù)為兒童：這可以語(yǔ)氣親切和藹，老年用戶(hù)則應該成熟穩重。制定標準遵循之。
六：(STYLE)控件風(fēng)格，不要使用錯誤控件，控件功能要專(zhuān)一有設計好的同一風(fēng)格的控件，如果沒(méi)有能力設計出一套控件，則使用標準控件，絕對不能不倫不類(lèi)，雜亂無(wú)章
·不要錯誤使用控件，例如：
使用Button樣式做TTable的功能，拿主菜單條顯示版權信息，
·統一類(lèi)型的控件操作方式相同，例如一個(gè)控件雙擊可以執行某些動(dòng)作，而同樣控件，雙擊卻沒(méi)有任何反映
·一個(gè)控件只做單一功能，不復用
很多人為了寫(xiě)程序方便，喜歡把一個(gè)控件在不同情況下做不同功能用，這些對用戶(hù)初次理解增加難度，只有用戶(hù)熟悉后才能理解。 例如
改變紅色選項，左邊的參數代表不同的設置，可能由于為了節省控件或者編程量，但是只有熟練用戶(hù)才回使用，這種情況下解決方法：
1:分組，使用雙份控件.
2：使用TABLE頁(yè)，給用戶(hù)很明顯的視覺(jué)變化
七：(ALIGN)控件布局，窗口不擁擠，按功能組合控件 1：屏幕不能擁擠
擁擠的屏幕讓人難以理解，因而難以使用。試驗結果(Mayhew,1992年)屏幕總體覆蓋度不應該超過(guò)40％，而分組鐘覆蓋度不應該超過(guò)62％。
讓人看上去，不能太擁擠，也不能太松散。
整個(gè)項目，采用統一的控件間距，通過(guò)調整窗體大小達到一致，即使在窗體大小不變的情況下，寧可留空部分區域，也不要破壞控件間的行間距。
2：區域排列
一行控件，縱向中對齊, 控件間距基本保持一致
行與行之間間距相同，靠窗體Border距離應大于行間間距(間距加邊緣留空)。
當屏幕有多個(gè)編輯區域，要以視覺(jué)效果和效率來(lái)組織這些區域。
3：數據對齊要適當
說(shuō)明文字，中文版應使用中文全角冒號，縱向對齊時(shí)，并按冒號右對其，如圖。 縱向控件寬度盡量保持相通。并左對齊。
例如金額等字符穿應根據小數點(diǎn)對齊，或者右對齊
4：有效組合
邏輯上相關(guān)聯(lián)的控件應當加以組合，以表示其關(guān)聯(lián)性，反之，任何不想光的項目應當風(fēng)格開(kāi)，在項目集合間，用間隔對其進(jìn)行分組，或者使用方框劃分各自區域。
例如： 以下界面，選擇搜索方式來(lái)判斷號碼范圍是表示主叫號碼范圍還是被叫號碼范圍，和入帳方式無(wú)關(guān)，
則應該修改為： 搜索方式和入帳方式調換位置。以免用戶(hù)產(chǎn)生誤解。
5：窗口縮放時(shí)，控件位置、布局：
為了使界面不出現跑版或者難看的局面，解決方法：
1：固定窗口大小，不允許改變尺寸， 2：改變尺寸的窗口，在Onsize的時(shí)候做控件位置、大小的相應改變。
BCB/DELPHI的VCL中，大部分控件有布局屬性：
某些控件擁有alignment屬性，可以用來(lái)做布局調節：TcustomPanel，Tmemo等，考左靠右靠上靠下以及撐滿(mǎn)(Client)屬性，用來(lái)根據版面自動(dòng)調節。
大部分控件有屬性Anchors，里面上下左右akLeft, akTop等如果為true，則表示相對各個(gè)邊緣的距離是否改變。這個(gè)可以進(jìn)一步設計好排版工作。
八：(TAB ORDER)TAB順序 習慣用法，閱讀順序，從從左到右，從上到下
窗體中控件的Tab按鍵激活順序，TabOrder,. BCB/DELPHI中使用窗體設計右鍵菜單選擇taborder設置，VC中窗體RES編輯區域使用ctrl+D
九：(ShortcutKey & Accelerator& PopMenu)快捷鍵、加速鍵和彈出菜單 ·快捷鍵：
1：全局快捷鍵菜單中加以描述 CTRL+XXX 并入幫助列表。
2：快捷鍵寫(xiě)入幫助，特殊說(shuō)明，并在使用培訓時(shí)強調使用
·加速鍵：
1：使用非破壞性缺省按鈕，回車(chē)、ESC鍵的正確使用 一個(gè)窗體，有默認加速鍵，如回車(chē)表示激活當前窗口設置為default的按鈕動(dòng)作，esc表示關(guān)閉窗口。
在調用default按鈕動(dòng)作和關(guān)閉動(dòng)作時(shí)候，不應該做有破壞性的操作，避免用戶(hù)錯誤操作產(chǎn)生危害程度，例如不能把刪除數據等功能的按鈕作為缺省按鈕。當用戶(hù)要提交很多數據時(shí)，應該屏蔽esc，或者做退出提示，告誡用戶(hù)是否保存提交。
2：可接收動(dòng)作控件必須擁有加速鍵，統一加速鍵描述(&A)
為結合鍵盤(pán)使用，可操作控件都應該有加速鍵，加速鍵定義準則，為英文單詞第一個(gè)字母，如果同一窗體重復則用第二個(gè)字母，以此類(lèi)推，則加速方式為alt+這個(gè)加速鍵，用統一的方法標識在界面中，如XXX(A) 或者wps的 A.XXX 英文可直接在字母下標識下劃線(xiàn) Cancel，
對于無(wú)法像button一樣顯示快捷鍵的Edit等控件，則在Edit描述的Label中顯示快捷鍵。
·彈出菜單
輔助菜單必須在可視化界面上擁有對應的按鈕或者菜單選項。
由于輔助菜單由用戶(hù)點(diǎn)擊鼠標左右鍵或者別的動(dòng)作才能調出來(lái)顯示給用戶(hù)。無(wú)法清晰的顯示給用戶(hù)，所以對應選項應該可以通過(guò)別的途徑得到,例如界面上有相應控件或彈出右鍵菜單的按鈕等。
十：(ACTION)用戶(hù)交互 1：disable而不是not visible
要使一個(gè)功能有時(shí)允許有時(shí)不允許用戶(hù)使用，則這個(gè)控件的不能隨便隱藏，應該使用disable屬性進(jìn)行表示，以免用戶(hù)發(fā)現控件失蹤后措手無(wú)策
2：窗口彈出位置要明顯
點(diǎn)擊一個(gè)控件，彈出窗口或者菜單，應該給人明顯提示，最低要求是覆蓋剛才點(diǎn)擊的位置，讓用戶(hù)輕松跳轉到新的界面。
3：執行動(dòng)作要提示
給用戶(hù)一個(gè)視覺(jué)感受的同時(shí)，寫(xiě)程序的時(shí)候應該注意用戶(hù)的交互感受，UI作為人機對話(huà)的工具，用戶(hù)做了任何動(dòng)作，應該給用戶(hù)一個(gè)視覺(jué)或者聽(tīng)覺(jué)、觸覺(jué)提示。而且這個(gè)提示應該行明顯，但不應提示過(guò)長(cháng)，可以有以下幾種方法：
當用戶(hù)點(diǎn)擊按鈕等動(dòng)作進(jìn)行一個(gè)工作時(shí)：
1：彈出交互對話(huà)框讓用戶(hù)點(diǎn)擊確認。
2：改變UI中控件參數提示：(處理不用用戶(hù)確認的提示，有一定延時(shí)，或者用戶(hù)按鍵后自動(dòng)清除。)
如：改變標題欄字符串，顯示“信息：提交成功”,或者專(zhuān)門(mén)設置一個(gè)狀態(tài)欄、TLable等用來(lái)進(jìn)行提示。
3：聽(tīng)覺(jué)提示：
在確定有聲卡，用戶(hù)可以聽(tīng)到聲音的時(shí)候，發(fā)出特殊聲音提示。一般作為重要提示的輔助。聲音不應過(guò)長(cháng)，緊急錯誤提示應該短促，頻率較高，成功提示應該舒緩，輕松。等等……
十一：(HELP)聯(lián)機幫助： 什么時(shí)候要幫助，什么時(shí)候不要幫助
1：系統默認、行業(yè)標準的控件操作不需要逐一描述，只需要對特殊控件加以描述 2：特殊操作、特殊功能界面，在界面上加控件直接連接到對應的HELP文件中
3：特殊設置詳細，應該在界面上用簡(jiǎn)潔明了的語(yǔ)句說(shuō)明，或者是好用Tiptool，并由第二步幫助
幫助文檔：
結構化，按功能模塊劃分
必須闡述功能通過(guò)什么方法可以在軟件中實(shí)現
幫助文件是幫助用戶(hù)更好的使用軟件，措辭要恰當、簡(jiǎn)捷、通俗易懂,每一句話(huà)都應該有目的，幫用戶(hù)解決問(wèn)題
幫助文件不是廣告、商業(yè)軟件不允許打廣告。描述公司信息目的是為了方便用戶(hù)在沒(méi)有辦法的情況下找到售后支持，網(wǎng)址連接、信箱地址、電話(huà)號碼絕對不允許無(wú)效。
十二：發(fā)行時(shí)闡明規則 對統一的東西進(jìn)行逐一闡述，并加以典型描述，放入HELP和用戶(hù)手冊中，同時(shí)加有詞匯表
附錄：美工何時(shí)參與進(jìn)來(lái)：
美工作為界面美化的主要人員，不但擁有藝術(shù)設計、包裝設計的才能，還應該穿插整個(gè)項目，給界面程序設計人員提出系統參考意見(jiàn)。
1：軟件設計前期，美工參與需求了解，分析同類(lèi)軟件界面有缺點(diǎn)，提出主色調、典型界面風(fēng)格、以及構思整個(gè)美術(shù)包裝等。
2：界面原型設計過(guò)程中，與開(kāi)發(fā)人員共同修改、商榷最終表現樣式，以及確立UI標準。
3：程序開(kāi)發(fā)過(guò)程中，提供標準風(fēng)格的資源文件（icon,cur,bmp等），并總結出統一風(fēng)格的資源的設計過(guò)程，形成規范文檔* .
4：產(chǎn)品化方面，協(xié)助制作幫助文件、網(wǎng)站風(fēng)格以及參與制作，制作附帶宣傳圖片、動(dòng)畫(huà)、產(chǎn)品包裝、海報等。
聯(lián)系客服
微信登錄中...
請勿關(guān)閉此頁(yè)面
