由于互联网 连接速度变得更快, 以及访问者使用互联网 水平在不断提高, 越来越多 网站开始采用新型 用户界面设计. 这些" />
当前位置:首页 >> 互联网 >> 2006年10月24日

"Times New Roman", Times, serif; align="center">译文:创新 用户界面

推荐者:草根帮主 (积分 142071) | 原作者:
近来, 由于互联网 连接速度变得更快, 以及访问者使用互联网 水平在不断提高, 越来越多 网站开始采用新型 用户界面设计. 这些新 交互界面可以让访问者浏览和操控更大量 信息.

本文将介绍最近我们刚刚接触到 几种有趣 用户界面设计, 它们 :

• 滑块筛选 (Slider-based Filtering)
• 鱼眼菜单 (Fisheye Menus)
• 树图 (Treemaps)
• 拖放(Drag-and-drop)

本文 目 并不 在鼓励或推崇上述 任何一种用户界面设计, 而 将它们介绍给大家, 希望引起大家 兴趣并从中得到启发. 虽然我们还不曾进行大规模 可用性测试, 但我们认 这几种界面都有潜在 可能(如果使用得当 话)来帮助用户更好 完成操作.

滑块筛选
Amazon’s Diamond Search (亚马逊 钻石搜索) 用户界面采用了点击-拖拽 滑块, 这样用户可以扩大和缩小搜索 筛选标准. 用户通过滑动来变更用户选择 标准时, 该页面可以自动 更新搜索结果.

这个界面具有直观和信息丰富 特点, 用户可以很容易 在大量信息中搜索所需要 结果:



搜索结果 数量显示在该页面 右侧. 这样, 用户可以自由变换标准, 直到搜索结果 数量小到满意 止.

用户可以使用滑块来缩小搜索范围, 这样就可以减少搜索结果 数量:

当用户对结果 数量感到满意时, 就可以点击’See results’(查看结果)按钮. 这样设计 好处时, 如果搜索结果 零时, 用户就不必再花时间查看结果了, 因 用户在滑动滑块时已经知道了.

鱼眼菜单
鱼眼菜单(Fisheye menus )对于帮助用户浏览很长,但有序 列表很有用处. 该菜单可以动态 变换菜单条目 尺寸, 将鼠标所在区域放大. 这样便可以在一个屏幕上显示并操作整个菜单了, 而无需传统 按钮,滚动条,或分级浏览结构.

对于帮助用户轻松浏览很长 列表, 鱼眼菜单很有潜力.

树图
树图(Treemaps)可以将多列数据以方块组 形式展现出来, 这些方块还可以加以不同颜色,以不同大小组织起来, 从而以图形 方式来揭示数据内在 模式. 这种用户界面可以用来表现复杂 数据关系(比如层次关系等).

在网站Smartmoney website上, 便有一个这样 例子. 通过这种用户界面, 浏览者可以一目了然 看到数百种库存 信息. 下面 图例中, 库存货物信息根据不同行业被分组, 进而按照其市场资本 大小以不同大小 矩形 表示出来. 而颜色则用来表示价格 升(绿色)降(红色).

要了解一个公司 详细情况, 则可将鼠标移至该公司所在矩形 上面(下图展现 通用电气公司 情况).

拖放
拖放(Drag-and-drop)这种用户界面设计采用了使用者所熟知 移动元素 操控方法(使用者可能有过使用微软视窗应用 经验). 在恐怖小屋 在线商店(Panic Room’s online store) 网页上, 要将物品放入购物车中, 浏览者可以点击带有加号图标按钮, 亦可通过拖放动作来完成.
拖放动作比较简单, 先点击你要加入购物车 物品:

然后按住鼠标按钮不放, 之后在屏幕上向购物车方向拖动该物品:

最后, 在购物车上松开按钮, 物品就放到购物车中了:

1 2 下一页

[ 关键词:用户体验 ue 译文 原文/来源链接 ]

>> 相关文章
相关资料下载
[收藏至站内网摘] [ 'del','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));del.focus();">Del.icio.us收藏] [%22_blank%22,%22scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes%22); void 0">百度搜藏] [抓虾 订阅] [鲜果 订阅]
1楼楼长:评论员 (抢沙发奖牌)在2009-9-14 7:24:36评价道:
顶一个呀.1569025
验证码: 20ju
1,请不要在评论中发广告, 如需增加外链请注册成个人会员试用个人签名与自助广告.
2,把《译文:创新 用户界面》推荐给您 好友