Gallery: 可用性问题:指引:修订间差异

来自站长百科
跳转至: 导航、​ 搜索
(新页面: __TOC__ = Photo-Page = On a photo page a single item is displayed in detail. Typically this page focuses on only one image. Every theme provides the possibility to move forward to the nex...)
 
 
(未显示同一用户的2个中间版本)
第1行: 第1行:
__TOC__
__TOC__
= Photo-Page =
= 相片页面 =
On a photo page a single item is displayed in detail. Typically this page focuses on only one image. Every theme provides the possibility to move forward to the next Photo-Page in this album, or back to the previous one.
在相片页面上单个项目会显示以详细的信息。一般说来该页面是为单个图片服务的。所有外观主题都允许在该相册中前进到下一个相片页面或回退到上一个相册页面。


<p style="border-style:solid; border-width:1px; padding:5px">'''Guideline:''' Arrange buttons or links to the next or previous Photo-Page on a fixed place on the page, they should not move dependent of item-size.</p>
<p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 将上一张/下一张的相片页面按钮或链接安排到页面的固定位置,它们不会因项目尺寸的改变而改变位置。</p>


Rationale: Users who move from one Photo-Page to the next or backwards could find it bothering to have to move the mouse, even if it is only a small movement.
基本原理:用户从一个相片页面跳转到下一个或上一个页面时,会觉得老是要移动鼠标比较麻烦,哪怕只要移动一点点都会觉得不便。




= Visual Distinction between albums and items =
= 相册和项目间的视觉差异 =
The delete- or move-item dialog contains a step where several items are displayed in a list. There are albums as well as other items like photos or other files.
delete-或move-item对话中包含的一个步骤中,若干项目会显示在一个列表中。有相册以及其他项目,如相片,或者是其他文件。


<p style="border-style:solid; border-width:1px; padding:5px">'''Guideline:''' Differences between items in lists should be obvious. Visual distinctions like background-color or borders around items should reveal the difference. Information like item type, filename, file size, creation time, upload time, and last modification time should be displayed for each item, when an action can be performed.</p>
<p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 列表中项目的不同之处很明显。视觉上的差异,如背景色或项目边界就会昭示这种差异。当某动作可执行时类似项目类型,文件名,文件尺寸,创建时间,上传时间及最后修改时间这类的信息应当按单个项目进行显示。</p>


Rationale: Users need the mentioned information to make a decision like deleting or moving an item. Fast visual feedback makes it easier for them to get an overview about the presented items.
基本原理:用户需要提及的信息以决定某项目的删除或移动。更快的视觉反馈会使这个过程更简单,这样就能纵览呈现出来的项目了。。




= Visual Distinction between view-modes =
= 视图模式间的视觉差异 =
<span style="color:red">- Do not take this guideline for granted. It should first be verified by tests or a survey! - </span><br>
<span style="color:red">- 请勿盲从此条指引。应当在测试之后再做确认!- </span><br>
[[Image:Usab-view-mode.png|thumb|toggle-links]]Gallery admins have the possibility to change their view on albums or items to the view of a guest. So they can test how it looks like to be a guest. When changing view mode from admin to guest, mostly fewer options/actions for items/albums are possible.
[[Image:Usab-view-mode.png|thumb|toggle-links]]Gallery管理员可以将项目或相册上的视图修改为某游客的视图。这样他们就可以测试用户所见视图了。当执行这种视图转变时,针对项目/相册的选项/动作则会更少。


<p style="border-style:solid; border-width:1px; padding:5px">'''Guideline:''' Make the difference between the two view-modes visible. The user should know in which mode he is. The visual hint to the mode should be bound to the changing-mode-buttons. </p>
<p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 让2个视图模式之间的差异可见。用户应当能发觉其所在的视图模式。视图模式的视觉提示则应根据模式改变按钮进行判断。</p>


Rationale: When working with or in different modes it is much easier to recognize the present mode, when it is indicated with more than "toggle-links" somewhere on the page. A simple border or special background can make the present mode obvious to the user. So he doesn't need to search for the toggle-links.
基本原理:当使用不同模式操作时,很明显地就能分辨出当前所处的模式,尤其是当页面上出现了比"触发链接"还明显的提示时。简单的边界或特殊的背景可以让用户更易分辨当前的模式。所以就无需搜索出发链接了。


= 对话页面设计 =
Gallery中的很多页面都含有配置对话。这些对话形式通常是以迥异的方式设计出来的。某些被设计成表格,而某些则是一列复选框。页面尺寸,界面元素的安排,区域的划分和组合,色彩的使用,输入方法(AJAX或静态式)的使用,这些东西可能在一个页面中是一个样子,到另一个页面中就完全换了一张脸似的。那么为了降低可用性的问题,所有的对话形式都应当以某种恒定的风格来进行设计。


= Design of dialog pages =
<p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 对话形式以恒定风格进行设计。
Many pages in Gallery include configuration dialogs. Often, the dialogs are designed in very different ways. Some of them are put into tables, while others are just a list of check boxes. Page size, arrangement of interface elements, separation and grouping of sections, use of colors, use of input methods (AJAX or static) can differ from page to page. To decrease usability problems, all dialogs should be designed in a consistent manner.
*不要为对话区域的组合使用表格,除非总是出现这种节目元素。(如,所有的配置都可通过复选框来完成)
 
*有关组的输入元素分区
<p style="border-style:solid; border-width:1px; padding:5px">'''Guideline:''' Design dialogs in a consistent manner.
*在分区之间提供视觉上的分辨效果
*Don't use tables for grouping dialog sections, except if it is always the same interface element. (e.g. if all your configuration can be made with check-boxes)
*提供分区标题提示,这样用户就能很容易分辨了
*Group related input elements into sections
*插入"info"链接,以解释不易被理解的选项
*Provide visual separation between the sections
*Provide section headings and make them obvious to the user
*Insert "info" links to explain options that are not easy to understand

2008年11月11日 (二) 16:44的最新版本

相片页面[ ]

在相片页面上单个项目会显示以详细的信息。一般说来该页面是为单个图片服务的。所有外观主题都允许在该相册中前进到下一个相片页面或回退到上一个相册页面。

指引: 将上一张/下一张的相片页面按钮或链接安排到页面的固定位置,它们不会因项目尺寸的改变而改变位置。

基本原理:用户从一个相片页面跳转到下一个或上一个页面时,会觉得老是要移动鼠标比较麻烦,哪怕只要移动一点点都会觉得不便。


相册和项目间的视觉差异[ ]

delete-或move-item对话中包含的一个步骤中,若干项目会显示在一个列表中。有相册以及其他项目,如相片,或者是其他文件。

指引: 列表中项目的不同之处很明显。视觉上的差异,如背景色或项目边界就会昭示这种差异。当某动作可执行时类似项目类型,文件名,文件尺寸,创建时间,上传时间及最后修改时间这类的信息应当按单个项目进行显示。

基本原理:用户需要提及的信息以决定某项目的删除或移动。更快的视觉反馈会使这个过程更简单,这样就能纵览呈现出来的项目了。。


视图模式间的视觉差异[ ]

- 请勿盲从此条指引。应当在测试之后再做确认!-

Gallery管理员可以将项目或相册上的视图修改为某游客的视图。这样他们就可以测试用户所见视图了。当执行这种视图转变时,针对项目/相册的选项/动作则会更少。

指引: 让2个视图模式之间的差异可见。用户应当能发觉其所在的视图模式。视图模式的视觉提示则应根据模式改变按钮进行判断。

基本原理:当使用不同模式操作时,很明显地就能分辨出当前所处的模式,尤其是当页面上出现了比"触发链接"还明显的提示时。简单的边界或特殊的背景可以让用户更易分辨当前的模式。所以就无需搜索出发链接了。

对话页面设计[ ]

Gallery中的很多页面都含有配置对话。这些对话形式通常是以迥异的方式设计出来的。某些被设计成表格,而某些则是一列复选框。页面尺寸,界面元素的安排,区域的划分和组合,色彩的使用,输入方法(AJAX或静态式)的使用,这些东西可能在一个页面中是一个样子,到另一个页面中就完全换了一张脸似的。那么为了降低可用性的问题,所有的对话形式都应当以某种恒定的风格来进行设计。

指引: 对话形式以恒定风格进行设计。

  • 不要为对话区域的组合使用表格,除非总是出现这种节目元素。(如,所有的配置都可通过复选框来完成)
  • 有关组的输入元素分区
  • 在分区之间提供视觉上的分辨效果
  • 提供分区标题提示,这样用户就能很容易分辨了
  • 插入"info"链接,以解释不易被理解的选项