UI設計規(guī)范---論文

1、UI 設計規(guī)范1. 界面規(guī)范1.1. 總體原則l 以用戶為中心。設計由用戶控制的界面，而不是界面控制用戶。l 清楚一致的設計。所有界面的風格保持一致，所有具有相同含義的術語保持一致，且易于理解l 擁有良好的直覺特征。以用戶所熟悉的現實世界事務的抽象來給用戶暗示和隱喻，來幫助用戶能迅速學 會軟件的使用。l 較快的響應速度。l 簡單且美觀。1.2. 原則詳述1.2.1. 用戶控制用戶界面設計的一個重要原則是用戶應該總是感覺在控制軟件而不是感覺被軟件所控制。l 操作上假設是用戶-而不是計算機或軟件-開始動作。用戶扮演主動角色，而不是扮演被動角色。在需要自動執(zhí)行任務時，要以允許用戶進行選擇或控制它的方

2、式來實現該自動任務。l 提供用戶自定義設置。因為用戶的技能和喜好各不相同，因此他們必須能夠個性化界面的某些方面。Windows 為用戶提供了對許多這方面的訪問。 您的軟件應該反應不同的系統(tǒng)屬性-例如顏色、字體或其他選項的用戶設置。l 采取交互式和易于感應的窗口， 盡量避免使用模態(tài)對話框， 而使用 "非模式 "輔助窗口。"模式 "是一種狀態(tài)，它排除一般的交互，或者限制用戶只能進行特定的交互。當最好使用一個模式或該模式只是可替換的設計 時 - 例如，用于在一個繪圖程序中選定一個特定感覺- 請確保該模式是顯然的、可見的，是一個明確的用戶選定的結果，并且容易取消

3、。l 在后臺運行長進程時，保持前臺式交互。例如，當正在打印一個文檔，即使該文檔不能被改變，用戶也應該可以最小化該窗口。l 諒解。用戶喜歡探索一個界面，并經常從嘗試和錯誤中學習。一個有效的界面允許交互式的發(fā)現，它只提供一組合適的選擇，并在用戶可能破壞系統(tǒng)或數據的情況時發(fā)出警告。如果可行，還應提供可逆轉或可還原的操作。即使在設計得很好得界面中，用戶也可能犯錯誤。這些錯誤既可以是物理上得（偶然地指向了錯誤的命令或數據），也可以是邏輯上的（對選定哪一個命令或哪些數據做出了錯誤的決定）。有效的設計避免很可能導致錯誤的情況。它還包容潛在的用戶錯誤，并且使用戶易于還原。1.2.2. 清楚一致的設計一致允許用

4、戶將已有的知識傳遞到新的任務中，更快地學習新事物，并將更多的注意力集中在任務上。這是因為他們不必花時間來嘗試記住交互中的不同。通過提供一種穩(wěn)定的感覺， 一致使得界面熟悉而又可預測 。一致在界面的所有方面都是很重要的，包括命令的名稱、信息的可視表示，操作行為，以及元素在屏幕和窗口內部的放置。l 相同含義的詞使用統(tǒng)一的術語。 比如對于倉庫中存放的物料，不可同時又稱為物品、貨物、備品、產品和材料等等，而統(tǒng)一約定一個稱謂，且此稱謂是用戶熟悉的和易于理解的。l 使用一組一致的命令和界面來展示常見功能。 例如， 避免一個 "復制"命令在一種情況下立刻執(zhí)行一個操作，但在另一種情況顯示一個

5、對話框要求用戶鍵入目標然后才執(zhí)行。應該使用同樣的命令來執(zhí)行對用戶來說相似的功能。l 操作環(huán)境內的一致。保持 Windows 提供的交互操作和界面約定之間的高度一致，用戶將能很快熟悉軟件的使用。l 使用隱喻的一致性。如果一個特定的行為更多的是一個不同的事物的特征，而不是它的隱喻的含義，那么用戶可能在學習將行為和該事物相關聯時遇到困難。例如，對于放在回收站中的對象而言，焚燒爐和廢紙籮代表不同的模型。l 建立項目保留字。通過建立保留字來明確和統(tǒng)一術語和操作命令。l提供可視反饋。在后臺運行長進程時（時間超過 110秒，視具體情況而定），必須提供進度條等信息 指示。l 除非特別必要時，不要提供聲音反饋。

6、 在有嚴重的問題發(fā)生時，可以使用聲音來提示用戶，但是通常應該允許用戶取消聲音。l 保持文字內容清楚。信息的表達要言簡意賅，易于理解而又不羅嗦；避免使用冗長的文字給用戶反饋。1.2.3. 有良好的直覺特征l 用熟悉的隱喻為用戶的任務提供直接而直觀的界面。通過允許用戶利用他們的知識和經驗，隱喻使得預測和學習基于軟件的表示的行為更加容易。l 在使用隱喻時，不需要將基于計算機的實現局限在真實世界的對應物上范圍之內。例如，與其基于紙張的對應物不同， Windows 桌面上的文件夾可以被用來組織各種對象，例如打印機、計算器、以及其他文件夾。同樣， Windows 文件夾可以其真實世界對應物不可能的方式被排

7、序。在界面中使用隱喻的目的是提供一個認知的橋梁；隱喻并不以其自身為最終目的。l 隱喻支持用戶認知而不是記憶。用戶記起與一個熟悉的事物相關聯的意義要比他們記起一個特定命令的名稱要容易得多。l 同常見軟件保持一致性。 出色的用戶界面在程序中將實現同用戶以前用過的其它成功軟件一致的動作。1.2.4. 較快的響應速度l 保持界面能很快對用戶操作作出反應。l 提供快捷鍵。特別對于有大量錄入項的界面，能讓用戶不使用鼠標即可完成快速數據錄入。在用戶界面中加入一些功能，這些功能可以讓熟練用戶在不同的區(qū)域快速的輸入數據。這些功能包括重復功能、快捷鍵、帶有有意義的圖標的按鈕等等，所有這些可以使速度快的用戶可以控制

8、界面并加快數據的輸入。l 除非必要，不要重繪屏幕。1.2.5. 簡單且美觀l 簡單。界面應該很簡單（不是過分單純化）、易于學習、并且易于使用。它還必須提供對應用程序的所有功能的訪問。在界面中，擴大功能和保持簡單是相互矛盾的。一個有效的設計應該平衡這些目標。支持簡單性的一種方法是將信息的表示減少到進行充分交流所需的最少信息。例如，避免命令名和消息的文字描述。不相關或冗長的句子擾亂了您的設計，使得用戶難以很容易地提取重要信息。另一個設計簡單而有用的界面的方法是使用自然的映射和語意。界面元素的排列和表示影響它們的意義和關聯。簡單還與熟悉 相互關聯。熟悉的事物通常似乎更簡單。盡可能嘗試建立利用用戶已有

9、的知識和經歷的聯系。您可以使用 漸進揭示來幫助用戶管理復雜的事物。"漸進揭示”涉及到仔細的信息組織，以便只在恰當的時候才顯示信息。通過隱藏向用戶表達的信息，您減少了用戶必須處理的信息數量。例如，您可以使用菜單來顯示操作 或選擇的列表，還可以使用對話框來顯示一組選項。漸進揭示并不意味著對顯示信息使用非傳統(tǒng)的技術， 例如需要一個修飾鍵作為訪問基本功能的唯一方法，或者強迫用戶通過一個更長的分級交互序列。這會使 用戶界面更加復雜和麻煩。l美觀?？梢曉O計是應用程序界面的重要部分?？梢晫傩蕴峁┝朔浅：玫挠∠?，并傳達特定對象的交互行 為的重要線索。同時，出現在屏幕上的每一個可視元素也是很重要的，它

10、們可能競爭用戶的注意。提供清 楚地促進用戶對表達的信息的理解的連貫環(huán)境。圖形或可視設計器的技巧對于這一方面是無價的。1.3. 細節(jié)約定1.3.1. 界面風格i使用一致性 一致的外觀將使用戶界面更易于理解和使用。用戶界面控件看起來應該是一致的。i使用安排和流程在西方文化中（包括中國），人們習慣于從左到右，從上到下進行閱讀，因此，應該將重要信息放在上面和左邊。左上角最容易吸引起人們的注意力。i使用對齊 通常，使用左對齊來使用戶界面控件更易于瀏覽。對于數值文本，應該使用小數點對齊或右 對齊。對于非數值文本，應該避免使用右對齊或居中對齊。不必對什么都使用中間對齊，或者使它們保持 對稱形式。在右邊或底部

11、保留空白區(qū)域更適合習慣。i使用分組 將相關的用戶界面控件分成組，以體現它們之間的關系。同時，還要顯示相關信息。將控件 放在它所作用的對象旁。使用空格、分組框、線條和標簽，或者其它分隔符對用戶界面控件進行分組。i使用強調 使用焦點、位置、分組、層次、啟用/禁用、大小、顏色或者字體等，來將注意力集中在需要首先看到的用戶界面控件上。盡量以可視的方式指明用戶接下來應該進行的操作。i使用可視的提示盡量使用近似的大小和間距來指出用戶界面控件是相似的，而使用不同的大小和間距來指出用戶界面控件視是不同的。i使用空格 使用空格來創(chuàng)建一個"透氣室"。以使窗口布局更易于理解，并且查看起來更舒服。

12、空格的多少 要適當，不要顯得太分散。但是，要避免過多地使用空格。如果可能，盡量使窗口小一些。i警惕空洞不要到處粘貼公司或產品的名稱及徽標。雖然在啟動屏或"關于"框中出現公司或產品名稱及徽標是完全可以接受的，但其他窗口中的可用空間應該出現其他內容。如果沒有其他內容，那么應盡量使窗 口小一些。i注意大小 使用用戶界面控件的分辨率具有獨立性。使用系統(tǒng)規(guī)格（使用 GetGystemMetrics API 函數） 或文本規(guī)格（使用 GetTextMetrics 或GetTextExtentPoint32 API函數）來確定用戶界面控件的大小。任 何顯示文本的對象（如對話框或定義的文本

13、文檔）都應該使用文本規(guī)格。l考慮使用資源或預定義的布局網格資源模板或預定義的布局網格有助于您在不同的窗口之間實現一致性。注意，下頁所示圖的第二個對話框，與第一個不同，它有一個緊湊、從左到右、從上到下的流程，并且，左對齊的標簽很便于瀏覽；通過對齊編輯框并調整其大小，使它顯得更有組織，更加平衡。不合理的平衡的對話框1.3.2. 統(tǒng)一術語1.3.2.1. 術語的重要性我們用名稱來區(qū)別、描述和查找事物，使用名稱來分解并理解不熟悉的事物。采用統(tǒng)一的術語有助于 我們更好地理解和進行交流-簡化并統(tǒng)一用戶界面術語有助于用戶理解和充分應用我們設計的界面。使用不同的術語描述相同的事物是最讓人迷惑的，而改變人人都已

14、經熟悉的術語也是有害的。這兩種情況都使得程序難以討論、描述，以及歸檔。甚至使它難以編程。1.3.2.2. 命名下面是一些需要命名的、與界面有關的典型對象： 程序本身； 程序使用的文檔類型； 用戶利用程序執(zhí)行的主要操作； 所有的窗口、對話框和屬性表； 主程序窗口中的使用區(qū)域； 認為非標準的屏幕對象、命令、屬性、交互、或者技術。簡而言之，用戶可以看到或需要與其進行交互的、顯示在菜單、工具欄、窗口、對話框、狀態(tài)欄、聯 機幫助或文檔中的任何內容都需要有一個名稱。當然，您將會使用已存在的標準屏幕對象的名稱。例如， 您不需要命名常用的對話框，因為它們已經擁有名稱。1.3.2.3. 用用戶的語言說話使用軟件

15、面向的用戶所熟悉的詞語，除非您的軟件是為了程序員設計的，否則應該避免使用計算機行話，而應用常用的單詞代替。例如，對絕大多數用戶來說，常用單詞"separator"（分隔符）就比技術術語"delimiter" （定界符）要好得多。如果必須使用技術詞匯，那么應采用那些用戶可能知道的術語。1.3.2.4. 要避免的術語也有些術語是千萬不要用在您的用戶界面中的。盡管"execute"執(zhí)行、"kill"（殺死）、"terminate"（結束）、"fatal"（致命的）和"ab

16、ort"（中止）這樣的術語在程序員文獻中是完全可接受的，但完全應該避免出現在其 他的文字中。關于UI規(guī)范的幾點意見1、UI規(guī)范分為兩個方面：a、GUI規(guī)范，指導產品 GUI設計和GUI編碼。b、交互設計規(guī)范，指導產品設計，著重統(tǒng)一團隊意識，作為設計產品交互行為的最高標準。這里大家講的主要是 GUI規(guī)范。2、GUI規(guī)范的制定時間可前可后，但是有兩個關鍵點：a、必須在編碼之前完成，否則就成花架子了。b、GUI規(guī)范不是一蹴而就，它和設計相互迭代，彼此補充，相互完善。3、GUI規(guī)范的內容70%是通用原則，涉及產品圖形控件的基本屬性和構建的基本參數和原則，30%是與項目或產品特點相適應的內容。

17、這部分內容就是在設計過程中迭代產生。4、規(guī)范制定不是問題，最大的問題在于執(zhí)行。必須打破現有的開發(fā)流程和組織架構，有專人負責界面編碼 和界面測試，才能保證規(guī)范能貫徹下來。讓做邏輯和函數的編碼工程師來執(zhí)行，完全不可控，走樣是自然 的，因為他不懂，也不在乎，而且他有理由逃避責任。5、規(guī)范不能直接拿出來執(zhí)行，篇幅太多，操作有難度。所以必須要讓規(guī)范落地。也就是說，要有具體的設計文檔作為執(zhí)行的依據。設計文檔按照產品設計思路分片分線組織，所有設計文檔結合起來就是整合的產品原型。所以說， GUI 設計、交互設計、設計、規(guī)范、原型，執(zhí)行是一個完整的互動的概念，牽一發(fā)而動全身。原文 ：UI design1. In

18、terface Specification1.1. The general principlesl user-centered. Controlled by the user interface design, rather than control the user interface.l clear and consistent design. All consistent interface style, all have the same meaning in terms consistent and easy to understandl have a good intuitive

19、features. Users are familiar with the realities of world affairs to give the user hints and abstract metaphors to help users quickly learn to use the software.l fast response.l Simple and beautiful.1.2. The principle of detailed1.2.1. User ControlUser interface design is an important principle is th

20、at the user should always feel in control of the software, rather than feeling controlled by software.l operating on the assumption that the user - not the computer or software - Start action. Users play an active role, rather than playing a passive role. Automate tasks when needed, to allow the use

21、r to select or control of its way to achieve the automated tasks.l to provide user-defined settings. Because the user's skills and preferences vary, so they must be able to personalize certain aspects of interface. Windows provide users with access to many in this area. Your software should refl

22、ect the different system attributes - such as color, font, or other options for user settings.l take an interactive and easy induction of the window as far as possible avoid the use of modal dialog boxes, the use of "non-model" secondary window. "Model" is a state, it excludes ge

23、neral interaction or restrict specific user can only interact. When is best to use a model or the model is designed to replace - for example, a drawing program for a specific selected sense - make sure the pattern is clear, visible, is a clear result of the user selected and easy to cancel.l long pr

24、ocess running in the background, keeping the former desktop interaction. For example, when a document is printed, even if the document can not be changed, the user should be able to minimize the window.l understand. Users like to explore an interface, and often learn from trial and error. An effecti

25、ve interface allows interactive discovery, only to provide a suitable alternative, and may damage the system or the user when data warned. If possible, also provide reversible or restore operation. Even in well designed interface too, the user may make mistakes. These errors can be both physically h

26、ave (accidentally points to the wrong command or data), it can be logical (to which the selected command or data which made the wrong decision). Effective design to avoid the situation is likely to cause errors. It is also inclusive of potential user errors, and enables users to easily restore.1.2.2

27、. A clear and consistent designAgreed to allow users to transfer existing knowledge to new tasks, learn new things faster and more focus on the task. This is because they do not take the time to try to remember the different interactions.By providing a sense of stability, consistency makes the inter

28、face familiar and predictable. Consistent in all aspects of the interface is very important, including the name of the command, the visual information that the operation behavior, and the elements within the screen and the window placement.l use the same word meaning a unified terminology. For examp

29、le, the materials stored in warehouse, not at the same time as items, goods, spare parts, products and materials, etc., and unified convention of a title, and this appellation is familiar and easy to understand.l Use a consistent set of commands and interface to display common features. For example,

30、 to avoid a "copy" command in a situation to perform an operation immediately, but in other cases, display a dialog box asks the user type target and then be enforced. Should use the same command to perform a similar function for the user.l within the same operating environment. Maintain t

31、he Windows interface to provide interactive operation and a high degree of consistency between the agreement, users will be able to quickly familiar with the use of the software.l use of metaphor consistency. If a particular behavior is more a feature of different things, but not its metaphorical me

32、aning, then the user may learn to act and the things associated with difficulties. For example, an object placed in the Recycle Bin, the incinerator and the waste paper basket on behalf of different models.l establishment of the project reserved words. Through the establishment of reserved words to

33、a clear and uniform terminology and operation commands.l to provide visual feedback. When a long process running in the background (more than 1 to 10 seconds,as the case may be), must provide information such as instructions progress bar.l Unless necessary, do not provide audible feedback. In a seri

34、ous problem occurs, you can use sound to prompt the user, but should generally allow users to cancel sound.l to keep text clear. The expression of information to be concise and easy to understand without wordy; to avoid lengthy text to the user feedback.1.2.3. Have a good intuitive featuresl with a

35、familiar metaphor for the user's task to provide direct and intuitive interface. By allowing users to use their knowledge and experience, metaphor and learning based on the predicted behavior of the software that much easier.l the use of metaphor, the need to limit the realization of computer-ba

36、sed counterpart in the real world on the range. For example, instead of different paper-based counterpart, Windows folder on the desktop can be used to organize various objects, such as printers, calculators, and other folders. Similarly, Windows folders can be their real world counterparts in ways

37、not possible to be sorted. The use of metaphor in the interface is intended to provide a cognitive bridge; metaphor is not the ultimate goal of its own.l metaphor to support user awareness rather than memory. The user to remember with a familiar sense of things than they associated with a specific c

38、ommand to remember the name much easier.l the same common software consistency. Excellent user interface and the program will achieve the same user previously used the software in line with other successful action.1.2.4. Fast responsel to keep the interface to quickly respond to user actions.l to pr

39、ovide shortcuts. Especially for a large number of input items of the interface that lets users do not use the mouse to complete the fast data entry. The user interface to include some features that allow experienced users in different regions of the input data quickly. These features include the rep

40、eat function, shortcut keys, buttons with meaningful icons, etc., all of which allow the user to control the speed and accelerate the data entry interface.l unless absolutely necessary, do not redraw the screen.1.2.5. Simple and beautifull simple. The interface should be very simple (not simplistic)

41、, easy to learn and easy to use. It must also provide the application access to all functions. In the interface, expanded features and keep it simple is contradictory. An effective design should balance these goals. One way to support the simplicity of the information that is reduced to the minimum

42、required for a full exchange of information. For example, to avoid the command name and message text description. Long sentences are not relevant or disturb your design, making it difficult for users to easily extract important information. Another simple and useful interface design approach is to u

43、se natural mappings and semantics. Interface elements that affect their arrangement and the significance and relevance. Interconnected with simple familiarity. Familiar things often seem to be easier. As far as possible try to build using the user has the knowledge and experience of the contact. You

44、 can use the progressive reveal to help users manage complex things. "Progressivereveal" the information relating to the carefully organized so that only just at the right time to display information. Expressed by hidden to the user information, you reduce the amount of information usersmu

45、st deal with. For example, you can use the menu to display a list of actions or choices, you can also use the dialog box to display a set of options. Progressive does not mean that the display of information reveal the use of non-traditional techniques, such as the need of a modifier key as the only

46、 way to access basic functions, or force users to interact through a longer sequence classification. This makes user interface more complicated and cumbersome.l beautiful. Visual design is an important part of the application interface. Property provides a very good visual impression, and convey a s

47、pecific object of the interactions important clues. At the same time, appears on the screen every visual element is very important, they may compete user's attention. Provide clear information for users on the expression of a coherent understanding of the environment.Graphic designer or visual s

48、kills for this aspect is priceless.1.3. Details of the agreement1.3.1. interface stylel use the same consistent look and feel will user interface easier to understand and use. User interface controls should look the same.l use arrangements and processes in Western culture (including Chinese), they a

49、re used from left to right, top to bottom reading, therefore, important information should be placed on the top and left side. From the upper left corner of the easiest to attract attention.l use the alignment usually use the left-aligned to make more easy to navigate user interface controls. For th

50、e numerical text, you should use a decimal point aligned or right aligned. For non-numeric text, and should avoid the use of right-aligned or center aligned. Do not use the middle of what are aligned, or keep them symmetrical form. The right or bottom of the blank area is more suitable for custom.l

51、use of the relevant group user interface controls are divided into groups to reflect the relationships between them. At the same time, but also display relevant information. To control its effect on the target side. Spaces, group boxes, lines and tags, or other separators to group of user interface

52、controls.l used to use stress focus, location, group, level, enable / disable, size, color or font, etc., to focus on the need to first see the user interface control. Visual way as far as possible should be specified by the user following the operation.l use to make use of visual promptsapproximate

53、 the size and spacing to that user interface controlsare similar, but different in size and spacing to that user interface controls, as is different.l use the spaces use spaces to create a "breathable room" to make easier to understand the window layout, and more comfortable view. How many

54、 spaces should be appropriate and not too dispersed. However, to avoid the excessive use of space. If possible, try to make the window smaller.l do not guard against empty paste around the company or product name and logo. Although the start screen or the "About" box appears company or pro

55、duct names and logos are perfectly acceptable, but the other windows in the available space should be no other content. If nothing else, it should try to make the window smaller.l Note that the size of user interface controlsresolution independent. Using the system specification(using GetGystemMetri

56、cs API function) or text size (using GetTextMetrics or GetTextExtentPoint32 API function) to determine the size of the user interface controls. Any display of text objects (such as the definition of the dialog box or text document) should use the text size.l consider the use of resources or a predef

57、ined grid layoutresources predefined layout template orgrid will help you to achieve consistency between different windows.Note, as shown in Figure next page the second dialog box, with the first difference, it has a compact, from left to right, top to bottom in the process, and, left-aligned labels

58、 are easy to navigate; by Alignment edit box and adjust its size, it seems more organized, more balanced.IrrationalBalance of the dialog box1.3.2. uniform terminology1.3.2.1. The importance of termsWe use names to distinguish, describe and find things, use the name to decompose and understand unfami

59、liar things. Unified terminology will help us better understand and communicate- tosimplify and harmonize terminology helps users to understand user interface and full application of our interface design.use different terminology to describe the same thing is confusing, but to change and everyone is familiar with the term harmful. Both of which makes the program difficult to discuss, describe, and archive. Even make it difficult to p