当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 设计理论之Rich设计模式

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 设计理论之Rich设计模式


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 158 ::
收藏到网摘: n/a

但凡设计师都对简洁的设计情有独钟,我们不喜欢复杂,却也不能不会rich。

先来看下“rich”在字典里的意思

  1. having an abundant supply of desirable qualities or substances;
  2. of great worth or quality;
  3. very productive;…

可见,“rich”即暗示比满足普遍需要或期望的要多。

那么以RIA为例,来看下RIA(Rich Internet applications富互联网应用程序)比IA(Internet applications)多在哪?

更快、更直接的互动、更仿真、更流畅的体验、更cool、更好玩、更易安装、更容易传播、更安全…更容易使用户迷惑、更复杂、更容易不切实际、更难部署、更高开发成本…

——可见,多出来的既有优点也有缺点。

我们假设B=f(U,E),即行为(Behavior)是一种以用户(User)与环境(Environment)为变量的函数(function)。

我们想要通过交互设计创建一个符合逻辑的流程以及在其中进行的符合意料的行为,但是我们不能直接控制用户,我们需要通过交互、界面设计等,找到有效控制环境的方式。因此,我们要仔细的研习下更“rich”的控制与体验并不断探索。以RIA为例,这种探索包括了解其应用类型与常用模式,了解其设计挑战与风险,在设计其应用时注意扬长避短,并学会评估由此形成的效应。

应用类型与常用模式

RIA从应用上可以做为:

  • 单独的软件、widget(脱离浏览器在桌面上运行)
  • 网站的某些部分(在浏览器中有效地运行)
  • 添加到传统的网页的“丰富组件”(来导航或互动)

且目前已有以下几种类型的应用:

  • 信息/参考应用:网络/本地资源的整合,搜索,多媒体,用户参与…
  • 资源浏览/编辑应用:浏览,阅读,检索、分类,协作,发布…
  • 电子商务应用:购物,数据库浏览…
  • 实用应用:提示,过滤,帮助,向导…
  • 娱乐应用:游戏…
  • 营销应用:广告…

先将这些应用中RIA的模式穷举一下:

再将这些模式分解

交互——每一种模式都以一种交互开始

悬浮、鼠标滑过、点击、释放、快捷键、拖拽、移动、选择、定焦、调整大小…

操作

查找——“我需要的时候能找到信息”
自动匹配、载入内容、缩小选择、及时搜索、精确搜索、动态过滤、细节缩放、随需刷新、悬停出现的详细信息、原位替换、可调整大小的模块、滚动的模块、模块扩展…

动作——“在界面情境中我能够采取行动”
拖拽模块、当页编辑、内置文字编辑、内置标记编辑、内置的自定义编辑、直接的静态编辑、评价评级、弹出或滑出的自定义编辑、网格单元编辑、记忆选择、自动保存、记忆配置…

验证——“我能提前预防错误发生”
内置验证、验证后建议、气泡提示、计数(如用在文本框的字符限制)、即时预览…

消息——“我能及时的沟通”

界面呈现:界面的更新

可用的、已用的、指示、忙碌的指示、进度指示、内置状态、光标状态、渐隐渐现、对比度、动态目标、显示焦点、灯箱特效、高亮、褪色、扩展、淡入淡出、翻转、移动、折叠、幻灯片特效、动画…

设计风险

关于RIA设计容易出现的问题与应用风险,几年来已有很多专家总结,在此仅承接上述模式分类概况几点:

信息浏览与查找是否需要用户更多的注意力和鼠标操作,如:点击、拖拽、滚动?一个页面是否弄得太乱了?是否在界面上滥用了丰富的交互形式?组件与整体页面是否协调?视觉上是否体现出了层次关系?新的交互模式是否改变了用户使用传统网络的习惯?用户可能看不出RIAs和传统网站的不同——但其实没有后退按钮了?没有弹出提示窗口了?

那么我们在设计时就要注意建立一些原则尽量规避风险:

  1. 将控件及其功能可视化,使用户对控件的位置及其作用容易理解。保持操作一致性及与其他类似网站/桌面应用程序的一致性。
  2. 提供明显的返回途径或确保后退按钮可用。后退按钮通常被视为锚点,一种大众用户的取消方法。
  3. 变化适当。界面中有更新或微型状态变化时,确保人们注意到这些变化:
    选择适当的动态效果和颜色变化吸引注意。
    变化应该发生在人们在看的区域及附近。
    不要同时更新多处,用户的注意力跨度过大以至于感觉混乱。
  4. 当界面上的变化不及时时,提供及时的信息反馈;善用提示更新的方式。
  5. 不要在一个页面塞满内容,腾出空间给新内容。
  6. 在(概念)设计阶段不要做太多混合应用,做好可复用的设计。
  7. 提前规划无障碍设计。RIA中的可用性往往比较困难,比如使用移动设备访问可能无法正常显示(即使使用iPhone),因此可能需要准备其他版本。

一致性的标准来规范设计

对于设计标准,有两件事一定要明确。一,仍然是以用户为中心进行设计,二是要想清楚rich在哪里可以增加价值。因此评估时要尽量对目标用户测试全方位的互动体验,对于高概率的变化与更新建立详细的标准。比如,我们要规范“悬停出现详细信息”这一模式,就需要说明当需要在界面情境中(文字段落、图片等)查看详细信息时,弹出气泡太快或太慢都可能降低用户体验,因此要注意规范到对于气泡的弹出要相比鼠标触发有0.3s的延迟;鼠标移开或有点击行为时弹出的气泡立即消失。

如前所述,当RIAs为我们提供了提升体验的巨大机会,如何设计更“rich”的控制与体验还需要不断积累探索。