通用界面設計指南

AI時代,如何更快入行搶占紅利得高薪?前阿裡巴巴産品專家帶你15天入門AI産品經理。了解一下>

一:遵循一緻的準則,确立标準并遵循

無論是控件使用,提示信息措辭,還是顔色、窗口布局風格,遵循統一的标準,做到真正的一緻。

這樣得到的好處:

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

2:降低培訓、支持成本,支持人員不會行費力逐個指導。

3:給用戶統一感覺,不覺得混亂,心情愉快,支持度增加

做法:

項目組有經驗人士,确立UI規範:

·美工提供色調配色方案,提供整體配色表

·界面控制程序人員、用戶體驗人員提出合理統一使用的控件庫。參考标準界面使用規範:

控件功能遵循行業标準,windows平台參見《Microsoft 用戶體驗》(MSDN中有,中文已經翻譯發行,項目組必須有一本)

控件樣式在允許的範圍内可以統一修改其樣式、色調

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

根據需要,設計特殊操作控件,準則為:簡化操作、達到一定功能目的

·界面實施人員與美工商榷控件可實現性,(如不實行此步驟,将會導緻各自對對方工作不滿意,也會産生不一緻的混亂)。重複疊代上述工作。

·建立合理化文檔《UI标準》描述上述規範,

·強行界面設計者理解之,并作為開發準則,

·SQA人員進行監控開發人員是否遵循,及時告誡開發人員。

二:(Color)顔色使用恰當,遵循對比原則:
1:統一色調,針對軟件類型以及用戶工作環境選擇恰當色調:

如:安全軟件,根據工業标準,可以選取黃色,綠色體現環保,藍色表現時尚、紫色表現浪漫等等,淡色可以使人舒适,暗色做背景使人不覺得累等

2:如果沒有自己的系列界面,采用标準界面則可以少考慮此方面,做到與操作系統統一,讀取系統标準色表

3:色盲、色弱用戶,即使使用了特殊顔色表示重點或者特别的東西,也應該使用特殊指示符,?quot;!,?着重号,以及圖标等

4:顔色方案也需要測試,常常由于顯示器、顯卡的問題,色彩表現每台機器都不一樣,應該經過嚴格測試,不同機器進行顔色測試

5:遵循對比原則:在淺色背景上使用深色文字,深色背景上使用淺色文字,藍色文字以白色背景容易識别,而在紅色背景則不易分辨,原因是紅色和藍色沒有足夠反差,而藍色和白色反差很大。除非特殊場合,杜絕使用對比強烈,讓人産生憎惡感的顔色。 6:整個界面色彩盡量少的使用類别不同的顔色

itop色表

具體标準參考美術學統計學術标準。 色表的建設,對于美工在圖案設計、包裝設計上起着标準參考作用,對于程序界面設計人員設計控件、窗體調色起到有章可循的作用。

三:(Resource)資源
一個多姿多彩的人機交互界面,少不了精美的鼠标光标、圖标以及指示圖片、底圖等。

1:也需要遵循統一的規則,包括上述顔色表的建立,圖标的建立步驟也應該盡可能的形成标準,參考itop的outlookbar圖标設計标準

2:有标準的圖标風格設計,有統一的構圖布局,有統一的色調、對比度、色階,以及圖片風格

3:底圖應該融于底圖,使用淺色, 低對比,盡量少的使用顔色。

4:圖标、圖像應該很清晰的表達出意思,遵循常用标準,或者用戶機器容易聯想的到物件,絕對不允許畫出默認奇妙的圖案。

5:鼠标光标樣式統一,盡量使用系統标準,杜絕出現重複的情況,例如某些軟件中一個手的形狀就有4鐘不同的樣子。

如:《如何創建XP圖标》http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp

附件:Itop outlook howto.doc 描述itop項目中,outlookxp風格圖标的制作方法

四:(Font)字體
使用統一字體,字體标準的選擇依據操作系統類型決定。

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

字體大小根據系統标準字體來,例如 MSS字體8磅,宋體的小五号字(9磅)五号字(10.5磅)。

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

ITop采用BCB,所有控件默認使用 parent font,不允許修改,這樣有利于統一調整。

·系統大小字體屬性改變的處理。

Windows系統有個桌面設置,設置大字體屬性,很多界面設計者常常為這個惱火,如果設計時遵循微軟的标準,全部使用相對大小作為控件的大小設置,當切換大小字體的時候,相對不會有什麼特殊問題。

但是由于常常方便使用點陣作為窗口設計單位,導緻改變大字體後,出現版面混亂的問題。

這個情況下,應該做相應處理:

1:寫程序自動調節大小,點陣值乘以一個相應比例

2:全部采用點陣作為單位,不理會系統字體的調節,這樣可以減少調節大字體帶來的麻煩。BCB/DELPHI中多采用這種方法,但是必然結果是和系統不統一。

五:(Text)文字表達
提示信息、幫助文檔文字表達遵循以下準則:

1:口語化、客氣、多用您、請,不要用或少用專業術語,杜絕錯别字

2:斷句逗号句号頓号分号的用法, 提示信息比較多的話,應該分段,

3:警告、信息、錯誤 使用對應的表示方法

4:使用統一的語言描述,例如一個關閉功能按鈕,可以描述為退出、返回、關閉,則應該統一規定。

5: 根據用戶不同采用相應的詞語語氣語調,如專用軟件,可以出現很多專業屬于,用戶為兒童:這可以語氣親切和藹,老年用戶則應該成熟穩重。制定标準遵循之。

六:(STYLE)控件風格,不要使用錯誤控件,控件功能要專一
有設計好的同一風格的控件,如果沒有能力設計出一套控件,則使用标準控件,絕對不能不倫不類,雜亂無章

·不要錯誤使用控件,例如:

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

·一個控件隻做單一功能,不複用

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

改變紅色選項,左邊的參數代表不同的設置,可能由于為了節省控件或者編程量,但是隻有熟練用戶才回使用,這種情況下解決方法:

1:分組,使用雙份控件.

2:使用TABLE頁,給用戶很明顯的視覺變化

七:(ALIGN)控件布局,窗口不擁擠,按功能組合控件
1:屏幕不能擁擠

擁擠的屏幕讓人難以理解,因而難以使用。試驗結果(Mayhew,1992年)屏幕總體覆蓋度不應該超過40%,而分組鐘覆蓋度不應該超過62%。

讓人看上去,不能太擁擠,也不能太松散。

整個項目,采用統一的控件間距,通過調整窗體大小達到一緻,即使在窗體大小不變的情況下,甯可留空部分區域,也不要破壞控件間的行間距。

2:區域排列

一行控件,縱向中對齊, 控件間距基本保持一緻

行與行之間間距相同,靠窗體Border距離應大于行間間距(間距加邊緣留空)。

當屏幕有多個編輯區域,要以視覺效果和效率來組織這些區域。

3:數據對齊要适當

說明文字,中文版應使用中文全角冒号,縱向對齊時,并按冒号右對其,如圖。 縱向控件寬度盡量保持相通。并左對齊。

例如金額等字符穿應根據小數點對齊,或者右對齊

4:有效組合

邏輯上相關聯的控件應當加以組合,以表示其關聯性,反之,任何不想光的項目應當風格開,在項目集合間,用間隔對其進行分組,或者使用方框劃分各自區域。

例如: 以下界面,選擇搜索方式來判斷号碼範圍是表示主叫号碼範圍還是被叫号碼範圍,和入帳方式無關,
則應該修改為: 搜索方式和入帳方式調換位置。以免用戶産生誤解。

5:窗口縮放時,控件位置、布局:

為了使界面不出現跑版或者難看的局面,解決方法:

1:固定窗口大小,不允許改變尺寸,
2:改變尺寸的窗口,在Onsize的時候做控件位置、大小的相應改變。

BCB/DELPHI的VCL中,大部分控件有布局屬性:

某些控件擁有alignment屬性,可以用來做布局調節:TcustomPanel,Tmemo等,考左靠右靠上靠下以及撐滿(Client)屬性,用來根據版面自動調節。

大部分控件有屬性Anchors,裡面上下左右akLeft, akTop等如果為true,則表示相對各個邊緣的距離是否改變。這個可以進一步設計好排版工作。

八:(TAB ORDER)TAB順序
習慣用法,閱讀順序,從從左到右,從上到下

窗體中控件的Tab按鍵激活順序,TabOrder,. BCB/DELPHI中使用窗體設計右鍵菜單選擇taborder設置,VC中窗體RES編輯區域使用ctrl+D

九:(ShortcutKey & Accelerator& PopMenu)快捷鍵、加速鍵和彈出菜單
·快捷鍵:

1:全局快捷鍵菜單中加以描述 CTRL+XXX 并入幫助列表。

2:快捷鍵寫入幫助,特殊說明,并在使用培訓時強調使用
·加速鍵:

1:使用非破壞性缺省按鈕,回車、ESC鍵的正确使用 一個窗體,有默認加速鍵,如回車表示激活當前窗口設置為default的按鈕動作,esc表示關閉窗口。

在調用default按鈕動作和關閉動作時候,不應該做有破壞性的操作,避免用戶錯誤操作産生危害程度,例如不能把删除數據等功能的按鈕作為缺省按鈕。當用戶要提交很多數據時,應該屏蔽esc,或者做退出提示,告誡用戶是否保存提交。

2:可接收動作控件必須擁有加速鍵,統一加速鍵描述(&A)

為結合鍵盤使用,可操作控件都應該有加速鍵,加速鍵定義準則,為英文單詞第一個字母,如果同一窗體重複則用第二個字母,以此類推,則加速方式為alt+這個加速鍵,用統一的方法标識在界面中,如XXX(A) 或者wps的 A.XXX 英文可直接在字母下标識下劃線 Cancel,

對于無法像button一樣顯示快捷鍵的Edit等控件,則在Edit描述的Label中顯示快捷鍵。

·彈出菜單

輔助菜單必須在可視化界面上擁有對應的按鈕或者菜單選項。

由于輔助菜單由用戶點擊鼠标左右鍵或者别的動作才能調出來顯示給用戶。無法清晰的顯示給用戶,所以對應選項應該可以通過别的途徑得到,例如界面上有相應控件或彈出右鍵菜單的按鈕等。

十:(ACTION)用戶交互

1:disable而不是not visible

要使一個功能有時允許有時不允許用戶使用,則這個控件的不能随便隐藏,應該使用disable屬性進行表示,以免用戶發現控件失蹤後措手無策

2:窗口彈出位置要明顯

點擊一個控件,彈出窗口或者菜單,應該給人明顯提示,最低要求是覆蓋剛才點擊的位置,讓用戶輕松跳轉到新的界面。

3:執行動作要提示

給用戶一個視覺感受的同時,寫程序的時候應該注意用戶的交互感受,UI作為人機對話的工具,用戶做了任何動作,應該給用戶一個視覺或者聽覺、觸覺提示。而且這個提示應該行明顯,但不應提示過長,可以有以下幾種方法:

當用戶點擊按鈕等動作進行一個工作時:

1:彈出交互對話框讓用戶點擊确認。

2:改變UI中控件參數提示:(處理不用用戶确認的提示,有一定延時,或者用戶按鍵後自動清除。)

如:改變标題欄字符串,顯示“信息:提交成功”,或者專門設置一個狀态欄、TLable等用來進行提示。

3:聽覺提示:

在确定有聲卡,用戶可以聽到聲音的時候,發出特殊聲音提示。一般作為重要提示的輔助。聲音不應過長,緊急錯誤提示應該短促,頻率較高,成功提示應該舒緩,輕松。等等……

十一:(HELP)聯機幫助:

什麼時候要幫助,什麼時候不要幫助

1:系統默認、行業标準的控件操作不需要逐一描述,隻需要對特殊控件加以描述 2:特殊操作、特殊功能界面,在界面上加控件直接連接到對應的HELP文件中

3:特殊設置詳細,應該在界面上用簡潔明了的語句說明,或者是好用Tiptool,并由第二步幫助

幫助文檔:

結構化,按功能模塊劃分

必須闡述功能通過什麼方法可以在軟件中實現

幫助文件是幫助用戶更好的使用軟件,措辭要恰當、簡捷、通俗易懂,每一句話都應該有目的,幫用戶解決問題

幫助文件不是廣告、商業軟件不允許打廣告。描述公司信息目的是為了方便用戶在沒有辦法的情況下找到售後支持,網址連接、信箱地址、電話号碼絕對不允許無效。
十二:發行時闡明規則

對統一的東西進行逐一闡述,并加以典型描述,放入HELP和用戶手冊中,同時加有詞彙表

附錄:
美工何時參與進來:

美工作為界面美化的主要人員,不但擁有藝術設計、包裝設計的才能,還應該穿插整個項目,給界面程序設計人員提出系統參考意見。

1:軟件設計前期,美工參與需求了解,分析同類軟件界面有缺點,提出主色調、典型界面風格、以及構思整個美術包裝等。

2:界面原型設計過程中,與開發人員共同修改、商榷最終表現樣式,以及确立UI标準。

3:程序開發過程中,提供标準風格的資源文件(icon,cur,bmp等),并總結出統一風格的資源的設計過程,形成規範文檔* .

4:産品化方面,協助制作幫助文件、網站風格以及參與制作,制作附帶宣傳圖片、動畫、産品包裝、海報等。

版權聲明:轉載時請以超鍊接形式标明文章原始出處和作者信息及本聲明
http://feelmilk.blogbus.com/logs/11867595.html

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言讨論~!