Web UI 设计中交互与外观样式的取舍

  标题所指的“交互”与“外观样式”并非取舍关系,而是在这里将阐述两者各自的问题。这篇文章并不阐述技术细节,而是探讨应当如。

  并且本文没图片也没太多例子,有些文字描述的比较模糊和不仔细,嘛,就大概的交代下一些东西,能看到多少是多少。好的开始。

  如果你已经写过一段时间的 HTML 和 CSS 了,那么你应该接触过不少的特效和外部库了吧?

  我们先探讨“外观样式”方面的。

  样式的设计应当遵从一种事先整理好的概念模型,我们发现很多开源的样式库,或者一些大型企业(指国外)都遵宗这一道理(交互方面也是如此)。

  如果你确定了网页的整体颜色,接着你会确定一个或几个与其搭配的颜色,例如按钮,接着我们遇到的问题是,按钮需要几种色彩,多少种设计?例如:灰色、黑色、蓝色、红色、黄色、绿色,接着定义了两种外观:填充背景色的 和 缕空背景色(有线条轮廓)。

  接着我们遇到了一些类似按钮或就是按钮的东西,如果你没有系统的规划,你可能为它再单独的写一个样式。

  对此,我的建议是,如果 黑色 的按钮没有存在的必要(使用不到那么多颜色)那么可以取消它,而如果你只打算控制少数色彩,既按钮只需要留下 灰色、蓝色、绿色 这样三个即可,它们通常可以应付大多数情况。而外观,如果可以省掉 缕空背景色 的按钮设计,那么就取消它(缕空型的用于 tab 性质的按钮,通常两个连一起)。

  设计中的页面元素数量和我们经常看到的“你能控制3种颜色就足够了”是相同的道理,过多的色彩如果无法控制,页面会显得凌乱,而设计元素也是相同,当你设计了五彩缤纷,而或是有各种造型的按钮,它们同色彩一样,是一种很难控制的事情,又或者说,能少既少。除非,你能确信它的存在是非常必要的,这个按钮必须不同于之前的。

  对于其它模块也是如此。甚至对于一个按钮的细节。

  如果你还未系统的整理过 CSS 的规划方式,我的建议是去看看不同的样式库,它们往往都有规划(它们必须规划),它们会告诉你一个网站通常有哪些元素模块,接着你得学习如何将这些模块最有效的写出来,复用性,可以用在各种情况,并很好的将它们以代码的形式规划部署在你的代码文件里。

  接着我们再将“交互”中的取舍。

  我经常看到一些网站特效非常的多,的确 CSS3 和 JavaScript 为我们提供了非常多的动画和过滤效果。

  但你要比样式更注重一个问题:阅读成本。以及其中的 视觉中断 问题。

  任何一个交互过程,都会导致用户大脑的暂停,让他来响应你的交互效果。甚至你可以理解成,当鼠标经过一个超链接,如果只是改变背景色,那么用户的大脑接收到了这一改变,它只有一个信息:鼠标经过时该链接变成了某颜色。而如果你加了 0.2s 的缓冲,并且做了 :before 或直接的下划线。那么用户大脑所要处理的事情就不只是颜色了。虽然这个消耗成本或许并不大。但是你的确多给了用户很多信息,不是么?

  当一个交互涉及的内容比较大,那么会带来的结果是,用户的注意力被分散,暂停,又或者说被这个效果所吸引导致暂停。例如我们在一个 table 列中,让用户鼠标经过某行时,这行的背景色发生变化,当你做这件事时,并不应该把它当成一种效果,而是一种目的,目的在于让用户把这个变化作为视觉焦点,让用户更容易,或有意的让它锁定在这行。

  你会经常看见有一些导航菜单的设计,那么我来描述一个非常复杂的:页面载入时,导航以一种特效形式出现,接着当鼠标经过菜单中的某个时,该项会有一个比改变背景色更复杂的过滤效果,接着以一个特效列出了它的二级菜单,接着鼠标指针在不同的二级菜单列种游荡,每次经过菜单都会有一个 CSS 过滤效果,并且给它加了动画和装饰,而且每个项都有字体图标,再用户点击它的时候再来一个变化……

  非常高端,但是,有什么用呢?实际上如果你以用户的视角去体验,这些特效反而会使你觉得这设计真差!

  我们需要的是一个方便我们寻找和切换类目的菜单,这才是它的目的,如果没有缓冲的改变背景色太过直接,那么我们可以加上 0.x 秒的缓冲使过程显得柔和。安卓当前的设计即是如此,一切都非常简单,会有简单的过滤效果,最后在用户点击的时候背景色产生一个动画的原形扩散,它们本身都保持了样式外观上的简洁性。

  不必要的东西都可以不存在,每一项设计都存在着一个目的,以及用户的阅读成本,它都会带来一个利好,但都有其对应的消耗与相反的弊端。

  交互中的特效应当作为一种点缀,整个网站都不需要存在过多这种设计。

  网站的根本目的是在于用最好的方式展示出用户希望获得内容信息,以及我们有时希望用户聚焦的信息。

  如同我们用纯图标代替一个文字按钮,它除了美观,也是为了让用户可以更快速的了解这个按钮是做什么的。

  对于过程性的交互,简化它,很多时候,我们向用户表明的内容无非只有:账户菜单,内容分类,和正文。

  最后,一个鼠标经过缓冲效果应当最好是在 0.1 ~ 0.3 秒 最多 0.5 秒,交互中的展示和收纳也是如此 不要超过 0.5 秒,并且你应该将所有动画的缓冲时间规定在固定的几种,例如我的动画大部分都是两种:0.3 和有时候如果 0.1 太短 0.3 太长 会偶尔的有一个 0.15 0.2 0.25 之类的……