`

10条UI设计评估规则

阅读更多

The following are nine heuristics listed in Nielsen (1993) and one (the last one) is from Nielsen and Mack (1994).

Visibility of System Status (可视化原则

Brief explanation of the heuristic. The computer should keep the user informed about what is going on; what input it, the computer, has received; what processing it is currently doing; and what the results of processing are.

计算机程序在运行过程中需要给用户详细的反馈,需要实时给出当前系统的处理状况,这在《Unix编程思想》中叫做“软件的透明性:来点光”。

Relationship to the information-processing model of a user. The computer has to supply information to the user through sight or sound; otherwise, the user will not have the information necessary to understand what is happening.

Match Between System and the Real World(和现实世界相结合

Brief explanation of the heuristic. The UI design should use concepts, language, and real-world conventions that are familiar to the user. This means that the developers need to understand the task the system is going to perform—from the point of view of the user . This also makes cultural issues relevant for the design of systems that are expected to be used globally.

Relationship to the information-processing model of a user. Familiar concepts, language, and real-world conventions in the interface can make use of knowledge already in a user’s long-term memory because of their experience with the task domain (independent of the computer).

软件系统的设计者在进行界面设计时,时时刻刻需要从用户的角度出发、以一个用户专家的身份来设计一个系统,可以称为“软件的紧凑性”,我在以前的文章简单提到过软件紧凑性的问题 。总之就是说,如果你是一个用户你觉得系统怎么用最简单、最高效的提高自己的工作效率,毕竟IT技术就是为了提高人们的工作效率。如果扬弃了这一点,你的系统可能就是一个简简单单的数据setter、getter、finder的叠加体了。

User Control and Freedom(用户具有自主控制系统的权力

Brief explanation of the heuristic. Allow the user to have control of the interaction. Users should be able to undo their actions easily, exit from any interaction quickly at any time, and not be forced into a series of actions controlled by the computer.

Relationship to the information-processing model of a user. Users will make errors, and, therefore, they will need easy ways to recover from them.

在设计系统时,需要能够让用户使用全程具有控制权,能够自主控制进度。

在这里,我就想起了以前写的一个上传下载控件类,当时那个控件一旦运行计算机CPU彪升到100%,用户体验就是系统死机。主要是当时在设计时完全从充分利用系统资源的角度,完全没有给用户反应时间。不但用户体验不好,就连自己做测试时有惊出了一声冷汗。

Consistency and Standards(系统的一致性原则

Brief explanation of the heuristic. Information that is the same should appear to be the same (same words, icons, and positions on the screen). Information that is different should be expressed differently . This consistency should be maintained within a single application and within a platform. Developers therefore need to know platform conventions.

Relationship to the information-processing model of a user. As with the Match Between System and the Real World heuristic, this heuristic makes use of a user’s prior knowledge and experience with other parts of the same application as well as with other applications on the same platform.

就是说系统在接收信息或是反馈信息的时候(界面也是信息反馈的一个途径),需要前后一致,让用户有最少的以外感觉。这其实和我们平时写文档、写报告是一样的,我们通篇的字体需要一致(这个一致是指文章各个部分分别:正文一致、标题一致、目录一致、页脚页眉一致等等)。

Error Prevention(预防用户出错

Brief explanation of the heuristic. As much as possible, prevent errors from happening in the first place. For instance, if there are a limited number of legal actions at some point in the application, then help users select from among these legal actions—rather than allowing them to perform any action and telling them after the fact when they've made an error. This could be considered a subset of the first heuristic, visibility of system status (what input the computer system is ready to accept), but it is so important and so often violated that it warrants its own heuristic.

Relationship to the information-processing model of a user. Errors can come about because users make mistakes in perception, lack knowledge about what to do next, recall the gist of a command rather than the exact details, or slip when they type or point. Some of these mistakes can be prevented by showing only those actions that are acceptable at that particular point in an interaction (e.g., graying out inappropriate buttons) or caught as soon as the user performs them (e.g., not accepting an incorrect abbreviation of a US state in an address form).

这个好像是软件工程需要着重考虑的问题,在WEB开始时一个典型的例子就是表单验证了。

Recognition Rather Than Recall(系统需要有足够的提示信息让用户第一时间获得需要的信息

Brief explanation of the heuristic. Show all objects and actions available to the user. Do not require them to remember information from one screen of the application to another.

Relationship to the information-processing model of a user. This heuristic is a direct application of theories of human memory. It is much easier for someone to recognize that they know what to do if there are cues in the environment coming into working memory through perception as well as knowledge in long-term memory of what to do.

在很多软件中,都有典型的下一步下一步的工作模式,在这个时候就可能存在一个信息传递的问题。可能前面说填写的信息在后面需要继续指导用户,这时候不应该是让用户自己记忆信息而是应该由系统主动给出信息。例如:在安装软件时,我们一步一步配置安装信息,在最后一步确认配置时应该给出前面信息的综合信息以对用户起提示作用。

Flexibility and Efficiency of Use(提供灵活高效的使用方式

Brief explanation of the heuristic. The design should have accelerators (keyboard shortcuts) to allow skilled users to speed up their interaction (as opposed to always using menus or icons with the mouse). Skilled users should also be able to tailor their interface to speed up frequent actions.

Relationship to the information-processing model of a user. The value of accelerators comes primarily from the motor processes of the user. Typing single keys is typically faster than continually switching the hand between the keyboard and the mouse and pointing to things on the screen. Furthermore, skilled users will develop plans of action, which they will want to execute frequently, so tailoring can capture these plans in the interface itself.

这一点就是要求系统能给出操作上的优良途径,方便专家用户在定制操作后提高使用效率。

Aesthetics and Minimalist Design(提高系统的易读性

Brief explanation of the heuristic. Eliminate irrelevant screen clutter.

Relationship to the information-processing model of a user. This heuristic relates to the visual search aspect of perception and also to memory. The more clutter, the more information the eyes must search through to find the desired information. In addition, the more information coming in through perception as the visual search proceeds, the more this information interferes with the retrieval from long-term memory of the information that is actually relevant to the task at hand.

系统易读性最好的一个例子应该是当初Google的成功了。它简单明了,直接给出用户需要做的事情。在这个世纪,我们已经面临信息爆炸,更希望一致直截了当的信息。

Help Users Recognize, Diagnose, and Recover from Errors(给用户足够的错误提示信息,以帮助用户从错误中恢复

Brief explanation of the heuristic. Error messages should be written in plain language, tell the user what the problem is, and give constructive advice about how to recover from the error. Again, this could be considered a subset of the first heuristic, visibility of system status , but it is so important and so often violated that it warrants its own heuristic.

Relationship to the information-processing model of a user. This is simply an admonition to give the user sufficient information to understand the situation.

至于这个的典型例子,我比较喜欢Java的异常流模式,特别方便程序员定位错误。对于广大用户来说,平时使用时弹出的错误提示框中的详细信息就是一个这样的应用体现。微软的错误提示做的很详细(一般都是给出下一步下一步的选择),不过一般结果很遗憾总是在点了无数次下一步后又回到了起点。

Help and Documentation(给出必要的文档和说明帮助

Brief explanation of the heuristic. If the system is not an extremely simple, walk-up-and-use application, it is going to need help and documentation. This should be always available, easily searchable, and give concrete advice applicable to users’ tasks.

Relationship to the information-processing model of a user. This is again an admonition to give the user sufficient information to understand the application. The search feature should allow information to be found by asking for the gist of the meaning, rather than only the exactly right keyword, because people will remember only the gist, not the exact words (if they ever knew them).

这个不但要给用户,也要给我们广大的程序员。

评论
5 楼 qianjigui 2008-11-12  
<h2>HE: Flexibility and Efficiency of Use(<span style='color: #0000ff;'>提供灵活和高效的使用方式</span>)</h2>
<h3><strong>Provide Keyboard Shortcuts(<span style='color: #0000ff;'>需要提供快捷键</span>)</strong> </h3>
<p>Keyboard shortcuts provide alternative ways of issuing commands, and
in most cases, using a keyboard shortcut is faster than using the
mouse. Using the mouse requires moving the hand from the keyboard to
the mouse, moving the mouse to the target, clicking the target, and
then moving the hand back to the keyboard. In contrast, when a user
uses a keyboard shortcut, their hands need not leave the keyboard. </p>
<p>Examples of keyboard shortcuts: </p>
<ul>
<li> On the Macintosh, when a choice of buttons is presented, the
button outlined in bold can be "pressed" by hitting the RETURN key.</li>
</ul>
<ul>
<li> Common commands like opening and closing documents in an
application, printing, saving, and quitting can be issued using
keyboard shortcuts such as CTRL-O (under Windows) or Command-O (under
MacOS).</li>
</ul>
<ul>
<li> Windows 95/NT/98 provides an additional keyboard shortcut
mechanism. The underlined letter of a menu item indicates that that
menu option can be invoked by hitting the ALT key and the underlined
letter together. For example, opening a file can be accomplished by
hitting the F key and then the O key while holding down the ALT key -
or
simply by pressing CTRL-O.</li>
</ul>
<h3><strong><a name='af'/>Allow for Customization(<span style='color: #0000ff;'>为专家级用户提供定制功能</span>)</strong> </h3>
<p>Giving users control over how their computer looks and behaves
allows users to tailor their environment to suit their preferences.
This gives users a sense of being in charge that has an overall
positive effect on their experience. It also allows users with special
needs to adapt their computing environment to meet their needs. For
example, a user with difficulty using their left hand can move
important keyboard shortcuts to the right side of the keyboard. Some
other examples are </p>
<ul>
<li> <strong>Speed</strong>: Power users want to maximize speed, typically by
adding keyboard shortcuts in order to reduce the amount of time they
use the mouse.</li>
</ul>
<ul>
<li> <strong>Appearance</strong>: Some people are strongly affected by the
amount of clutter on their screen. Giving users control over secondary
menus and toolbars within an application as well as icon placement on
the background gives users control over how their computer looks.</li>
</ul>
<ul>
<li> <strong>Readability</strong>: Other users (such as elderly users) may
require a large font for readability reasons or reverse-video (white
text on a black background) to reduce eyestrain. Giving users control
over the computer’s background, font face and size, and other display
settings allows users to adapt these according to their needs and
preferences.</li>
</ul>
<p> </p>
<h3><strong>Example UAR: Button Accelerators Exist</strong> </h3>
<div style='background-color: #eeeeee;'>
<h4><strong>UAR Identifier</strong> </h4>
<p>HE9 - Good Feature </p>
<h4><strong>Succinct description:</strong> </h4>
<p>"OK" and "Apply" buttons have keyboard shortcuts. </p>
<h4><strong>Evidence for the aspect:</strong> </h4>
<p>Heuristic: Flexibility and efficiency of use: keyboard accelerators.
</p>
<p><strong>Interface aspect:</strong> </p>
<p>The buttons at the bottom of the screen labeled "OK" and "Apply"
have keyboard accelerators, as shown in the picture below. The "OK"
button is in focus, so pressing the ENTER key will activate that
command. And, notice that the "Apply" button has a keyboard shortcut:
typing ALT-A (as indicated by the underlined "<span style='text-decoration: underline;'>A</span>" in "<span style='text-decoration: underline;'>A</span>pply")
will activate that command. <br/>
  <br/><img src='/upload/attachment/49326/922c91dc-0515-3d7a-afe0-e46382ef418a.png' alt=''/></p>
<h4><strong>Explanation of the aspect:</strong> </h4>
<p>OK and Apply are the actions the users will most frequently want to
take (assuming that Cancel is used only for undoing errors and changing
courses of action - both of which should be relatively rare in
comparison
to other actions people choose and carry out.) </p>
<p>The OK button is the default, indicated in the standard way (with a
bold outline). The Apply button can be activated by typing ALT-A, also
indicated in the standard way: by underlining the "<span style='text-decoration: underline;'>A</span>" in "<span style='text-decoration: underline;'>A</span>pply".
Both of these interaction techniques can be found in the <em>Design
Guide.</em> (See the following sections in Chapter 8: "Characteristics
of Secondary Windows/Default Buttons" and "Characteristics of Secondary
Windows/Navigation in Secondary Windows" respectively.) </p>
<h4><strong>Benefit of the good feature:</strong> </h4>
<p>Users who are skilled at using Windows will be able to operate these
two commands without their hands leaving the keyboard (which is faster
than using the mouse - see "1.1.3 Basic
Psychology Needed for Interface Design"). Since the commands are
indicated visually in standard ways, skilled users will see these
indications and know them for what they are - clues to the keyboard
shortcuts. </p>
<h4><strong>Solution/Discussion:</strong> </h4>
<p>I cannot think of any drawbacks to using the standard button labels
and actions at this time. </p>
<h4><strong>Relationship to other UARs:</strong> </h4>
None when this UAR was originally written. </div>
4 楼 qianjigui 2008-11-12  
<h2>HE: User Control and Freedom(<span style='color: #0000ff;'>用户具有良好的控制权与较高的自由度</span>)</h2>
<h3>Let the User Be in Control(<span style='color: #0000ff;'>让用户具有控制权</span>)</h3>
<p>The sense of "who's in charge" strongly affects how a user feels about
an application. Users get frustrated when they don’t feel in control of
the computer, and for this reason, users should initiate actions, not
the computer. Also, carefully consider the wording of messages; their
tone should suggest that the computer is ready and compliant, not
commanding or threatening, and that the user, not the computer, is in
charge.
</p>
<p><span style='color: #0000ff;'>交谈之中,听者为大。软件生产,客户为大。软件运行,用户为大。软件始终需要灌输一个思想:用户是软件运行的主导,他需要具有很好的软件控制权。</span></p>
<h3> <a name='pu'/>Provide an Undo Mechanism(<span style='color: #0000ff;'>提供撤销操作</span>)</h3>
<p>
The user should be able to reverse the steps in a process and retreat
back to a previous state. Some of the ways applications implement undo
are listed below:</p>
<ul>
<li> An undo command that reverses the most recent command is common
in many applications. The simplest form only allows the user to reverse
the most recent command. Some applications allow the user to reverse
several steps.</li>
</ul>
<ul>
<li> A "Reset" or "Factory Settings" button is another form of undo
mechanism.  These buttons will reverse certain edits. 
The Reset button will reverse settings that have been set in the
current editing session.  The Factor Settings button will cause
the settings to be returned to their out-of-the-box configuration。</li>
</ul>
<p><span style='color: #0000ff;'>人人都会犯错,软件使用者亦不例外。我们需要给用户提供良好的用户体验。提供Redo和Undo.这一点我非常佩服Google,人家让WEB应用也如此的人性化了。在这里略微谈下原理:利用栈结构。</span></p>
<h3> <a name='rc'/>Require Confirmation(<span style='color: #0000ff;'>在重要操作时,需要给用户提供确认操作</span>)</h3>
<p>
The user should be warned when an irreversible action is about to be
initiated. An application should require an explicit confirmation
before allowing an irreversible step to be set in motion.
</p>
<h3> <a name='per'/>Provide an Escape Route(<span style='color: #0000ff;'>提供及时退出功能</span>)</h3>
<p>
Users should be able to halt processes. A typical way to provide for
this is to offer a Cancel button at all times. However, when canceling
a process may leave the computer in an unstable state - such as
canceling
an install process when only a subset of the necessary files have been
transferred - the user should be warned that canceling could have
negative consequences and should be advised of an alternative way to
halt or reverse the process.
</p>
<p> </p>
<p>下面给出一个UAR:</p>
<h3><strong><strong>Date/Time Control Panel Applications of this
Heuristic</strong></strong></h3>
<h3><strong>Example UAR: Aspect 1 — Cancel Button Is Good</strong>
</h3>
<div style='background-color: #eeeeee;'>
<h4><strong>UAR Identifier</strong> </h4>
<p>HE7 - Good Feature </p>
<h4><strong>Succinct description:</strong> </h4>
<p>"Cancel" button provides an "emergency exit." </p>
<h4><strong>Evidence for the aspect:</strong> </h4>
<p>Heuristic: User control and freedom </p>
<p><strong>Interface aspect:</strong> </p>
<p>There is a Cancel button at the bottom of the screen, as shown in
the picture below: <br/><img src='/upload/attachment/49284/c2d55d8b-8984-3540-a71b-93ab02544769.png' alt=''/></p>
<p>In the online <em>MSDN Library Visual Studio 6.0 </em>(see section<em>
Books/The Windows Interface Guidelines for Software Design/ Chapter 8
Secondary Windows/Property Sheets and Inspectors/Closing a Property
Sheet)</em>, it lists the following specification of the Cancel button's
action: </p>
<p> </p>
<table border='0' width='55%'>
<tbody>
<tr>
<th width='21%'>
<div><strong>Command</strong></div>
</th>
<td width='79%'><strong>Action</strong></td>
</tr>
<tr>
<td valign='top' width='21%'> </td>
<td width='79%'> </td>
</tr>
<tr>
<td valign='top' width='21%'><em><strong>Cancel</strong></em></td>
<td width='79%'>Discards any pending changes and closes the
property sheet window. Does not cancel or undo changes that have
already been applied.</td>
</tr>
</tbody>
</table>
<p> </p>
<h4><strong>Explanation of the aspect:</strong> </h4>
<p>If users setsthe time and then change their minds, they can cancel
all the changes by clicking the Cancel button. The button is prominent
and is the standard way to undo a sequence of changes made in a
property box. </p>
<h4><strong>Benefit of the good feature:</strong> </h4>
<p>Users will be able change their mind and undo a series of changes
with just one button click. </p>
<h4><strong>Solution:</strong> </h4>
<p>Although the Cancel button discards all the changes that have not
been applied and closes the window, if the Apply button was clicked
prior to clicking the Cancel button, no changes will be undone, though
the window will be closed. See UAR #HE8 for more discussion of this
control panel operation. </p>
<h4><strong>Relationship to other UARs:</strong> </h4>
<p>UAR# HE8 Cancel doesn't give feedback when it doesn't cancel
anything.</p>
  <br/>
 
<h3><strong><a name='exu2'/>Example UAR: Aspect 2 — UARs Sometimes Lead
to More UARs</strong> </h3>
<p>It is quite possible that as you write up one UAR about a good
feature or problem, you will discover other usability aspects that
warrant their own UARs. When this happens, just record in the first UAR
that another UAR is connected; then write the second UAR. For example,
while writing UAR# HE7 above, we discovered that the Cancel button
doesn't always cancel something, and when it does not, it doesn't
indicate that fact. We discovered this when we were thinking about
trade-offs and writing in the <strong>Solution</strong> slot. Therefore, we put
a note in that slot referring readers to the next UAR, UAR# HE8.
Likewise, we listed UAR# HE8 in UAR# HE7's <strong>Relationship to other
UARs</strong> slot. </p>
<h4><strong>UAR Identifier</strong> </h4>
<p>HE8 - Problem </p>
<h4><strong>Succinct description:</strong> </h4>
<p>Cancel doesn't give feedback when it doesn't cancel anything </p>
<h4><strong>Evidence for the aspect:</strong> </h4>
<p>Heuristic: Visibility of system status </p>
<p><strong>Interface aspect:</strong> </p>
<p>There is a Cancel button at the bottom of the screen, as shown in
the picture below: <br/>
  <br/><img src='/upload/attachment/49284/c2d55d8b-8984-3540-a71b-93ab02544769.png' alt=''/></p>
<p>In the online <em>MSDN Library Visual Studio 6.0 </em>(see section<em>
Books/The Windows Interface Guidelines for Software Design/ Chapter 8
Secondary Windows/Property Sheets and Inspectors/Closing a Property
Sheet)</em>, it lists the following specification of the Cancel button's
action: </p>
<p> </p>
<table border='0' width='51%'>
<tbody>
<tr>
<th align='left' width='38%'><strong>Command</strong></th>
<td width='59%'><strong>Action</strong></td>
</tr>
<tr>
<td valign='top' width='38%'> </td>
<td width='59%'> </td>
</tr>
<tr>
<td valign='top' width='38%'><em>Cancel</em></td>
<td width='59%'>Discards any pending changes and closes the
property sheet window. Does not cancel or undo changes that have
already been applied.</td>
</tr>
</tbody>
</table>
<p> </p>
<p>As specified in the <em>Design Guide</em>, if changes are made in the
property box and then the Apply button is pressed, those changes are
made permanent and cannot be discarded by clicking the Cancel button.
However, there is no visual indication that these changes are not
available to be canceled; the Cancel button still looks active. In
effect, if the Cancel button is clicked right after the Apply button is
clicked, the Cancel button will behave exactly like the OK button: it
will simply close the window (because the changes have already been
applied). </p>
<h4><strong>Explanation of the aspect:</strong> </h4>
<p>The <em>Windows Design Guide</em> does not seem to give advice about
whether the standard buttons should be available (black) or unavailable
(gray) at any particular time. However, this Date/Time control panel
tab (labeled "Date &amp; Time") makes the Apply button unavailable
(gray) when there are no changes to be applied, and it will have no
effect. The Cancel button is not grayed out when there are no changes
to cancel, presumably because it will still have <em>an</em> effect
(i.e., closing the window), but it will NOT have <em>the</em> effect it
was labeled for (i.e., canceling something) if the changes have been
applied. </p>
<h4><strong>Severity of the problem:</strong> </h4>
<p>This can be a rather severe problem if there is no way the user can
check the status of the property box once it is closed - or even if the
information is on the screen but difficult to see. In this case, many
users will have the clock in very small font down in the bottom right
corner where they may never have occasion to look. This is severe
because users may <em>think</em> they've canceled changes when they
haven't: in reality, the changes have been applied to the system clock.
This change will affect the dating of files and e-mail messages and,
therefore, can have wide-reaching consequences. </p>
<h4><strong>Solution:</strong> </h4>
<p>Make the Cancel button unavailable (gray) when there are no changes
to cancel. Thus, the Apply and Cancel buttons will either be available
(black) or unavailable (gray) at the same time - depending on whether
or
not there are changes to apply or cancel. </p>
<p>When there are no unapplied changes, only the OK button will be
available (black), and it will close the window. </p>
<em>Note that this train of thought could continue to the point of
reconsidering if the OK button should also be gray when there are no
unapplied changes made. The window could always be closed with the
Close button (labeled with an "x") in the top right corner of the
window. A complete analysis of this issue would generate at least one
more UAR to discuss the OK button, links between all these UARs, and a
group UAR to discuss them all as a group (to be discussed in a later
section of the course).</em>
The <em>Windows Design Guide</em> seems to be silent on the issue of
active/inactive Property Sheet command buttons, so graying the Cancel
button would not violate an explicit platform standard. However, we
might want to look at several other applications with property boxes to
see if there is a de facto standard, or see if people in user tests are
confused by the Cancel button becoming unavailable (gray).
<h4><strong>Relationship to other UARs:</strong> </h4>
UAR# HE7 - Good Feature:
<p>"Cancel" button provides an "emergency exit." </p>
</div>
<p> </p>
3 楼 qianjigui 2008-11-12  
<h2>HE: Consistency and Standards(<span style='color: #0000ff;'>一致性与标准化的设计规范</span>)</h2>
<h3>Don’t Frustrate the User(<span style='color: #0000ff;'>不要迷惑用户</span>)</h3>
<p>
Users become accustomed to certain actions and sequences, and they are
likely to become confused or frustrated when they encounter unexpected
behavior. When one screen requires a specific series of actions, users
will expect the same series of actions to be required under similar
conditions. The qualities of familiarity and predictability in an
interface reduce the stress involved in using an application.
</p>
<p><span style='color: #0000ff;'><span style='color: #ff0000;'>系统的返回信息需要明确</span>,需要让用户能够在看到系统的反应时不会诧异和意外。</span></p>
<h3> <a name='mp'/>Maintain Platform Consistency(<span style='color: #0000ff;'>系统设计需要符合平常的使用惯例</span>)</h3>
<p>
Products should conform to the conventions of the platform for which
they are built.
</p>
<ol>
<li> User frustration is minimized when products adhere to platform
conventions.  An example of a platform convention is the location
and contents of the File menu-the File menu option is always the
leftmost item on a Windows-style menu bar-and users can expect to find
File menu commands for opening, closing, saving, printing, and
quitting.</li>
<li> Users are able to learn new products quickly. That is, users
don’t have to learn new locations or sequences for common commands
(such as Open, Close, Save, Print, and Exit/Quit). Hence, they can
concentrate on learning the commands that are unique to the product.</li>
</ol>
<h3>  <a name='ma'/>Maintain Application Consistency(<span style='color: #0000ff;'>整个系统需要统一</span>)</h3>
<p>
Consistency within an application is also important. One kind of
consistency is location consistency-that is, commands should not move
around between menus, sometimes appearing on one menu and sometimes on
another. Also, commands should not appear and disappear from
menus-disappearing or moving menu items leave users unsure of where and
when they last saw or used a particular item. Instead, menu items that
aren’t available to the user at a given moment should be <cite>dimmed</cite>
(or <em>shaded</em>) instead of being removed from the menu.
</p>
<p>Other areas where consistency is important are </p>
<ol>
<li> Key bindings-keyboard shortcuts should comply with platform and
application standards.</li>
<li>Messages, warnings, and alarms-messages, warnings, and alarms
should be consistent in their wording and in where they appear.</li>
<li> Color semantics—colors, when they are used as codes, should keep
the same meaning throughout.</li>
<li> Formatting-formatting styles for date and time, monetary units,
and numbers should be kept consistent.</li>
<li> Dialog boxes-dialog boxes should be consistent in their
presentations.</li>
<li> Data presentation-aspects of data presentation (such as
labeling, capitalization, font face, use of bold and italic, and the
placement of fields) should be kept consistent.</li>
<li> Terminology-words used to describe actions, behaviors, and
commands should be kept consistent.</li>
</ol>
<p><span style='color: #0000ff;'><span style='color: #ff0000;'>系统上面的显示和使用控件需要在系统的始末都保持一致</span>,举个简单的例子:一个button在有的时候不能点击,这个时候我们最好使它的属性变成不可使用而不是直接删除。</span></p>
<p><span style='color: #0000ff;'>这方面(<span style='color: #ff0000;'>一致性</span>)涉及到其它的一些控件和事件:</span></p>
<ol>
<li><span style='color: #0000ff;'>快捷键</span></li>
<li><span style='color: #0000ff;'>各种提示信息</span></li>
<li><span style='color: #0000ff;'>颜色风格(错误提示是一种风格、普通显示是一种风格等等)</span></li>
<li><span style='color: #0000ff;'>整体样式</span></li>
<li><span style='color: #0000ff;'>提示对话框</span></li>
<li><span style='color: #0000ff;'>数据显示</span></li>
<li><span style='color: #0000ff;'>专业的术语</span></li>
</ol>
<p> </p>
<p>下面用一个UAR来作为一个具体实例进行解释:</p>
<h3><strong><strong>Date/Time Control Panel Applications of this
Heuristic</strong></strong></h3>
<h3><strong>Example UAR: Aspect 1 - Button Labels Are Good</strong>
</h3>
<div style='background-color: #eeeeee;'>
<h4><strong>UAR Identifier</strong> </h4>
<p>HE5-Good Feature </p>
<h4><strong>Succinct description:</strong> </h4>
<p>"OK", "Cancel", and "Apply" button labels follow Windows standards. </p>
<h4><strong>Evidence for the aspect:</strong> </h4>
<p>Heuristic: Consistency and standards (in particular, the "standards"
part of this heuristic) </p>
<p><strong>Interface aspect:</strong> </p>
<p>The buttons at the bottom of the screen are labeled "OK", "Cancel",
and "Apply"-as shown in the picture below. </p>
<p><br/><img src='/upload/attachment/49269/50064ad1-4540-3cab-8c37-48ae1fc0af92.png' alt=''/></p>
<p>In the online <em>MSDN Library Visual Studio 6.0 (see Books/The
Windows Interface Guidelines for Software Design/ Chapter 8 Secondary
Windows/Property Sheets and Inspectors/Property Sheet Commands)</em>, it
lists the following standard ways to close the property sheet: </p>
<p> </p>
<table border='0' width='50%'>
<tbody>
<tr>
<th width='23%'>
<div><strong>Command</strong></div>
</th>
<td width='64%'><strong>Action</strong></td>
</tr>
<tr>
<td valign='top' width='23%'><em>OK</em></td>
<td width='64%'>Applies all pending changes and closes the
property sheet window.</td>
</tr>
<tr>
<td valign='top' width='23%'><em>Apply</em></td>
<td width='64%'>Applies all pending changes but leaves the
property sheet window open.</td>
</tr>
<tr>
<td valign='top' width='23%'><em>Cancel</em></td>
<td width='64%'>Discards any pending changes and closes the
property sheet window. Does not cancel or undo changes that have
already been applied.</td>
</tr>
</tbody>
</table>
<p> </p>
<h4><strong>Explanation of the aspect:</strong> </h4>
<p>All the standard ways to close the property sheet are present and
work as described. </p>
<h4><strong>Benefit of the good feature:</strong> </h4>
<p>Users will be able to use their prior knowledge of Microsoft
products with this control panel. </p>
<h4><strong>Solution:</strong> </h4>
<p>I cannot think of any drawbacks to using the standard button labels
and actions at this time. </p>
<h4><strong>Relationship to other UARs:</strong> </h4>
<p>None when this UAR was originally written.</p>
</div>
<p> </p>
 
<h3><strong><a name='eu2'/>Example UAR: Aspect 2 - Button Names Are Very
Similar</strong> </h3>
<p>At the same time that the "OK" and "Apply" button labels conform to
the standards part of the <strong>consistency and standards</strong> heuristic,
those words are so similar in meaning that they may violate the
"consistency" part of the same heuristic. That is, when very similar
words are used to describe different actions, the user is likely to
become confused. First, we'll write up this UAR and then discuss the
problem of what to do when heuristics give conflicting design advice. </p>
<div style='background-color: #eeeeee;'>
<h4><strong>UAR Identifier</strong> </h4>
<p>HE6-Problem </p>
<h4><strong>Succinct description:</strong> </h4>
<p>The difference between "OK" and "Apply" is not obvious. </p>
<h4><strong>Evidence for the aspect:</strong> </h4>
<p>Heuristic: Consistency and standards (in particular, the
"consistency" part of this heuristic) </p>
<p><strong>Interface aspect:</strong> </p>
<p>The button labels "OK" and "Apply" have very similar definitions in
lay English. </p>
Definition of "OK" in Webster's New Collegiate Dictionary:
approve, authorize. <br/>
In the context of just making changes to something, the changes are the
things that are approved or authorized.
<p>Definition of "apply" in Webster's New Collegiate Dictionary: To put
into effect. <br/>
In the context of just making changes to something, these changes are
the things that will be put into effect. </p>
<h4><strong>Explanation of the aspect:</strong> </h4>
<p>The difference between "OK" and "Apply" is not obvious to the user.
From common definitions of the words, it would seem that they do the
same thing: make the changes that the user just indicated in the
control panel. Since the words are different, the actions should also
be different according to the <strong>consistency and standards</strong>
heuristic, but the difference between the actions should be reflected
in the words used to label them. </p>
<p>According to the <em>Design Guide </em>passage quoted<em> above</em>,
both buttons <em>apply</em> the changes the user made to the property
sheet. The only difference is that the Apply button leaves the property
sheet open and the OK button closes the property sheet. Unfortunately,
this difference is not inherent in the meanings of the labels. </p>
<h4><strong>Severity of the problem:</strong> </h4>
<p>The users will probably learn the difference between these buttons
pretty quickly, especially if they use other Windows products. </p>
<h4><strong>Solution:</strong> </h4>
<p>Change the labels to reflect the real difference in the actions.
Perhaps use "Apply" and "Apply &amp; Close". </p>
<p>However, following this solution will violate the <em>Windows Design
Guide</em> conventions and, therefore, will violate the standards part
of the same heuristic. The buttons "OK" and "Cancel" were standardized
long before dialog boxes that needed "Apply" were in use. Therefore,
the terms have been "inherited" with a lot of users knowing what they
mean. It will not be easy to change away from the "OK" label. </p>
<h4><strong>Relationship to other UARs:</strong> </h4>
UAR# HE5 – Good Feature: <br/>
"OK", "Cancel," and "Apply" button labels follow Windows standards.
<p>This heuristic seems to give conflicting advice. Perhaps we'll have
to do user testing-or at least conduct a survey or some interviews-to
see if our users will really have problems with "Apply" and "OK". </p>
</div>
2 楼 qianjigui 2008-10-21  
554949699 写道

都是武汉的 打个招呼 支持下

谢谢!

关于以上的十条规则,我们更多的会在软件界面设计方面用到。
但是很多时候,我们可以将其作为我们前期开发设计的基本标准,并且我们应当将主要精力放在UI设计这一块。毕竟我们设计的是软件而不是在做一个自己用的小程序。在经历了很多软件比赛后,我的感受比较深刻,软件的后期包装、外观设计是更主要的。至于底层实现,使用者是不会太在意的(因为很多使用者不是专家)。
1 楼 554949699 2008-10-21  
都是武汉的  打个招呼  支持下

相关推荐

Global site tag (gtag.js) - Google Analytics