web交互规划办法:信息架构中的常见模型

《信息架构中的常见模型》是整个“web交互规划办法”中的一部分：

本期的内容目的是共享和总结信息架构中一部分根本的交互模型。信息架构需求考虑内容和功用的建构, 首要需求考虑怎样安排内容和功用的关系，也便是切分内容，怎么把一些动作和方针跟主题顺畅的结合起来；第二步便是考虑怎样引导用户通过界面达到他们的方针,也便是用”物理结构”把内容用页面\窗口\面板等元素将信息表达出来,交互模型正是针对第二个进程来说的，这些办法帮助咱们在表达信息的时候能够有一些常用的思路和出发点。

1. 双面板展示（Two-panel Selector）

【办法】把两个相邻的面板放在界面上，在第一个面板显现一组方针，用户能够从中恣意挑选，在第二个面板上显现选中方针的内容。

【长处】

这种办法由于两个面板相邻摆放，用户能够很快把他们的注意力换来换去，一会看着列表的整个结构（比方图中显现了哪些是最新的运用），一会检查一个方针的具体信息（这个运用是做什么的，有哪些内容等等）。与单个窗口比较，这种紧密地集成有几个杰出的好处：

减少膂力开支，两个面板间隔很近，用户的眼睛不需求进行长间隔的穿梭，能够通过用一次鼠标单击或按键来改动挑选的项目，而不是首要要在窗口和屏幕之间挑选；

减少了可视化的认知担负，当一个窗口弹出到最上面，或当一个页面的内容彻底改动时，用户就得花额定的注意力到现在要看的东西上，假如窗口自身一直不变，用户就能够把注意力会集在一个较小的改动范围内；

它也减少了回忆担负，这儿左面的列表充当了“路标”的角色，因此用户彻底了解自己当时是在哪个运用下。

【用法】

整体布局：把能够进行挑选的列表放在上面或左面的面板上，显现具体内容的面板放在下面或右边，这样做利用了绝大多数用户的视野活动方向，根据用户从左到右的言语阅览习惯让用户方便找到自己需求得到的信息。

列表的布局：一般有四种布局办法：线性列表，一般是排序的；二维表格，能够排序，也能够让用户通过列或行的标题进行过滤；空间安排办法，如地图、图表以及类似桌面的区域，让用户能够按自己的需求放置方针。

操作：当用户单击列表中的一个方针时，在第二个面板中立即显现它的内容或具体信息。一起最好能支持键盘操作以改动挑选的办法，如上下箭头键；

视觉：让已经选中的方针在视觉上杰出显现，如给选中的列表方针换一种颜色和亮度。

【比如】

Qzone中的双面板运用，当从左面列表挑选出信息今后，右侧会显现该方针的具体内容，并且选用了主题类别的信息切分办法，假如从常用办法的根本运用办法来看，当用户选中左面列表方针后，假如在视觉上能够对该方针进行杰出显现，可能会更友好一些。

2. 画布加东西条（Canvas Plus Palette）

【办法】

用于图形编辑器上，把一个带图标的东西条放在空白画布周围，用户单击调色板东西条上的按钮，在画布上创立方针。一般东西条用来创立方针，画布用来摆放方针。

【长处】

这个办法来自于人们的日常生活经验，画布、调色板，便是这样的款式，因此用户在运用时简略了解；一起画布加东西条也利用了可视化辨认的好处，最常用的图标（画笔、手型图标、放大镜等）在各种不同的运用系统中一次又一次的得到重用，并且每次都是同样的用法，减少了用户回忆和学习的本钱。

【用法】

东西条自身应该是一个图标按钮或许看起来像按钮的网格，由于中文自身词汇的表达比较强，所以东西条里用图标加文字的办法会更简略了解。

东西条放在画布的左面或许上面，当东西比较多时，能够吧东西条的图标分红几个小组，比方用（card stack）办法的TAB来表明这些分组。

【比如】

QQ秀泡泡日志的编辑框正是一个画布加东西条的用户， 通过Icon加文字的办法组成了东西条，并用分割线将东西进行了分组。

3. 导游（Wizard）

【办法】

在界面上一步步引导用户按预定的次序完结使命，把使命分红一系列进程，在每个进程里让用户会集处理一件作业。如，Qzone个人空间的注册页面：

【长处】

关于较长的使命，在规划用户界面时怎么让用户了解操作的进程，导游的长处正是让用户按照预先规划的路线图来安排这项使命，而不用了解整个使命的结构，用户要做便是按次序执行每个进程，相信他们假如遵循指示，就会成功完结。

【用法】

把组成使命的操作分红几个部分或几组操作，各个部分的次序摆放可能有必要是严厉限制的，也能够是能够由用户挑选的。

Qzone的的注册进程包括 挑选风格款式、填写个人信息、弥补资料和完结四步，用户有必要顺次填写，而不能先填写后边的进程再回来写前面的；而关于一些在线付出类的流程，从产品挑选、付出信息、付出地址、送货地址等进程，它们的次序并不重要，由于后边的挑选并不依赖前面的挑选，把相关的挑选放在一起仅仅简化了人们填写表单的作业。

使命拆分后进程的数量和粒度往往需求很好的权衡，假如只有两步，那会显得很傻，假如有十五步，就会显得庸俗单调；但是每个进程也需求确保不能太杂乱，否则失去了导游的含义。

【页面体现】

1）多页面体现办法

从页面体现上来看，最简略的实现办法便是将每个进程放在一个独自的页面上，用前进和后退按钮进行操控，但这种办法也有缺陷，每个独立的界面不能显现上下文，用户不知道前面和后边分别显现的是什么，因此这样的办法最好能够答应用户在进行进程中能够随时向前或许向后移动。由于假如不能让用户能够改动前面的选项而有必要重新开始那就会让人受不了。从这点来说，假如是多页面的导游，它的规范的配置应该是：

或许结合双面板挑选办法：

2） 单一页面体现办法：

第一种 带标题的栏目：标题上有固定编号，由于一眼就能够看到所有的进程，所以这个办法适合用在分支不多的使命上。

第二种 呼应式答应或呼应式打开：在用户完结前面一个进程之后才把后边的进程显现在页面上，假如导游的进程不多,选用这样的办法会让页面更简洁一些。

总结：

以上三种常用的办法：双面板挑选、画布加东西条以及导游是咱们经常会在网页规划中见到的办法，平时的运用中咱们已经在不知不觉中认识并习惯它们了，通过这些根本的办法，在规划加以变形和创新就能够创造出更有趣和方便的交互办法。下面的比如是一个综合了以上三种交互办法的比如：

显而易见的，这个东西运用了画布加东西条的办法，由两组东西条和一个画布组成。一起，这个网页东西还结合了双面板挑选办法，通过TAB把东西条进行了分类，当单击“face”、“noses”、“lips”时，东西条一次改动，并显现这些方针：

并且在操作进程的提示上，选用了导游办法的呼应式打开：当用户第一次挑选TAB中的类型是，会提示用户从东西条中挑选合适的元素到画布当中，而当用户作出挑选之后，则会显现下一个进程的提示：