Gallery: 可用性问题:指引:修订间差异
Firebrance(讨论 | 贡献) (新页面: __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...) |
Firebrance(讨论 | 贡献) 小 (→视图模式间的视觉差异) |
||
(未显示同一用户的2个中间版本) | |||
第1行: | 第1行: | ||
__TOC__ | __TOC__ | ||
= | = 相片页面 = | ||
在相片页面上单个项目会显示以详细的信息。一般说来该页面是为单个图片服务的。所有外观主题都允许在该相册中前进到下一个相片页面或回退到上一个相册页面。 | |||
<p style="border-style:solid; border-width:1px; padding:5px">''' | <p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 将上一张/下一张的相片页面按钮或链接安排到页面的固定位置,它们不会因项目尺寸的改变而改变位置。</p> | ||
基本原理:用户从一个相片页面跳转到下一个或上一个页面时,会觉得老是要移动鼠标比较麻烦,哪怕只要移动一点点都会觉得不便。 | |||
= | = 相册和项目间的视觉差异 = | ||
delete-或move-item对话中包含的一个步骤中,若干项目会显示在一个列表中。有相册以及其他项目,如相片,或者是其他文件。 | |||
<p style="border-style:solid; border-width:1px; padding:5px">''' | <p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 列表中项目的不同之处很明显。视觉上的差异,如背景色或项目边界就会昭示这种差异。当某动作可执行时类似项目类型,文件名,文件尺寸,创建时间,上传时间及最后修改时间这类的信息应当按单个项目进行显示。</p> | ||
基本原理:用户需要提及的信息以决定某项目的删除或移动。更快的视觉反馈会使这个过程更简单,这样就能纵览呈现出来的项目了。。 | |||
= | = 视图模式间的视觉差异 = | ||
<span style="color:red">- | <span style="color:red">- 请勿盲从此条指引。应当在测试之后再做确认!- </span><br> | ||
[[Image:Usab-view-mode.png|thumb|toggle-links]] | [[Image:Usab-view-mode.png|thumb|toggle-links]]Gallery管理员可以将项目或相册上的视图修改为某游客的视图。这样他们就可以测试用户所见视图了。当执行这种视图转变时,针对项目/相册的选项/动作则会更少。 | ||
<p style="border-style:solid; border-width:1px; padding:5px">''' | <p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 让2个视图模式之间的差异可见。用户应当能发觉其所在的视图模式。视图模式的视觉提示则应根据模式改变按钮进行判断。</p> | ||
基本原理:当使用不同模式操作时,很明显地就能分辨出当前所处的模式,尤其是当页面上出现了比"触发链接"还明显的提示时。简单的边界或特殊的背景可以让用户更易分辨当前的模式。所以就无需搜索出发链接了。 | |||
= 对话页面设计 = | |||
Gallery中的很多页面都含有配置对话。这些对话形式通常是以迥异的方式设计出来的。某些被设计成表格,而某些则是一列复选框。页面尺寸,界面元素的安排,区域的划分和组合,色彩的使用,输入方法(AJAX或静态式)的使用,这些东西可能在一个页面中是一个样子,到另一个页面中就完全换了一张脸似的。那么为了降低可用性的问题,所有的对话形式都应当以某种恒定的风格来进行设计。 | |||
<p style="border-style:solid; border-width:1px; padding:5px">'''指引:''' 对话形式以恒定风格进行设计。 | |||
*不要为对话区域的组合使用表格,除非总是出现这种节目元素。(如,所有的配置都可通过复选框来完成) | |||
*有关组的输入元素分区 | |||
<p style="border-style:solid; border-width:1px; padding:5px">''' | *在分区之间提供视觉上的分辨效果 | ||
* | *提供分区标题提示,这样用户就能很容易分辨了 | ||
* | *插入"info"链接,以解释不易被理解的选项 | ||
* | |||
* | |||
* |
2008年11月11日 (二) 16:44的最新版本
相片页面[ ]
在相片页面上单个项目会显示以详细的信息。一般说来该页面是为单个图片服务的。所有外观主题都允许在该相册中前进到下一个相片页面或回退到上一个相册页面。
指引: 将上一张/下一张的相片页面按钮或链接安排到页面的固定位置,它们不会因项目尺寸的改变而改变位置。
基本原理:用户从一个相片页面跳转到下一个或上一个页面时,会觉得老是要移动鼠标比较麻烦,哪怕只要移动一点点都会觉得不便。
相册和项目间的视觉差异[ ]
delete-或move-item对话中包含的一个步骤中,若干项目会显示在一个列表中。有相册以及其他项目,如相片,或者是其他文件。
指引: 列表中项目的不同之处很明显。视觉上的差异,如背景色或项目边界就会昭示这种差异。当某动作可执行时类似项目类型,文件名,文件尺寸,创建时间,上传时间及最后修改时间这类的信息应当按单个项目进行显示。
基本原理:用户需要提及的信息以决定某项目的删除或移动。更快的视觉反馈会使这个过程更简单,这样就能纵览呈现出来的项目了。。
视图模式间的视觉差异[ ]
- 请勿盲从此条指引。应当在测试之后再做确认!-
Gallery管理员可以将项目或相册上的视图修改为某游客的视图。这样他们就可以测试用户所见视图了。当执行这种视图转变时,针对项目/相册的选项/动作则会更少。
指引: 让2个视图模式之间的差异可见。用户应当能发觉其所在的视图模式。视图模式的视觉提示则应根据模式改变按钮进行判断。
基本原理:当使用不同模式操作时,很明显地就能分辨出当前所处的模式,尤其是当页面上出现了比"触发链接"还明显的提示时。简单的边界或特殊的背景可以让用户更易分辨当前的模式。所以就无需搜索出发链接了。
对话页面设计[ ]
Gallery中的很多页面都含有配置对话。这些对话形式通常是以迥异的方式设计出来的。某些被设计成表格,而某些则是一列复选框。页面尺寸,界面元素的安排,区域的划分和组合,色彩的使用,输入方法(AJAX或静态式)的使用,这些东西可能在一个页面中是一个样子,到另一个页面中就完全换了一张脸似的。那么为了降低可用性的问题,所有的对话形式都应当以某种恒定的风格来进行设计。
指引: 对话形式以恒定风格进行设计。
- 不要为对话区域的组合使用表格,除非总是出现这种节目元素。(如,所有的配置都可通过复选框来完成)
- 有关组的输入元素分区
- 在分区之间提供视觉上的分辨效果
- 提供分区标题提示,这样用户就能很容易分辨了
- 插入"info"链接,以解释不易被理解的选项