论网页界面的交互性设计

2013-12-29张静,肖玮，杜煌

长春师范大学学报 2013年6期

张静,肖玮，杜煌

1 交互设计

交互设计（Interaction Design）作为一门关注交互体验的新学科，由IDEO的创始人比尔·莫格里奇在1984年一次设计会议上提出。他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”——交互设计[1]。从用户角度来说，交互设计并不是指产品本身是如何工作的，而是指产品如何和用户联系并发挥作用，也就是人们如何“接触“或者“使用”它。它涉及的内容包括功能是否易用、简约，使用过程中是否友好、界面是否美观等方面。努力让产品的界面具有可用性，这是对产品的一种优化。通过这种优化，用户能更方便地完成任务，获得良好的感觉，这就是交互设计的目的。

2 以用户为中心的网页界面设计

不同类型的网站有着不同的用户群，也有着迥异的网页界面设计风格。我们要充分考虑不同网页用户的需求，始终以用户为中心进行人性化设计[2]。如教育网站和政府网站，它们同娱乐、购物、企业网站等的网页界面设计风格大相径庭；一些为老年人设计的网页界面，简洁明了，用尽量少的操作完成搜索与查询；而以儿童为目标客户群的设计，如“腾讯儿童网”的主页，界面以娱乐园的形式展现，各个项目分别以Flash小动画的方式体现其特点一个过山车在反复地滑动，“测试转盘”在不停地旋转，“动物园”大象的鼻子甩来甩去。交互性最强的是“涂鸦馆”，当鼠标一靠近小房子，门自动打开，接着一个可爱的小女孩探出头热情地招手，欢迎儿童进入涂鸦的世界。此儿童网页界面色彩鲜亮、氛围轻松活泼、充满乐趣，具有较强的交互性，符合儿童好动的心理特性（图1）。

图1 腾讯儿童网界面

3 网页界面设计的交互性原则

3.1 结构清晰、简单易用

网页界面作为传递信息的载体，其庞大的信息量和复杂的结构，使人们在访问网页时往往带有一种选择心理。因此，信息的表达要明确、直接、结构清晰、简单易用。太过繁杂的界面和不和谐的交互设计往往使用户产生厌烦的情绪，对界面产生质疑，从而选择离开。一个好的界面设计，首先要做到结构清晰，在操作的过程中让用户清晰地知道自己身处何地及当前的操作状态；另外不要提供过多的功能，同一功能在不同的页面中要保持风格一致，界面的结构关系要明确[3]。

3.2 注重视觉回应，强化用户体验

当用户访问网页的时候，发出指令，不管是正确的还是错误的，系统都会给与相应的回应，使操作者了解当前的使用状态，更便捷地获得信息，这是网页最基本的交互功能体现[4]。随着网络技术的发展，在满足人们查询信息的同时，各个网站，为了吸引更多的目标客户，纷纷更新网页的界面设计以及交互性设计，强化视觉回应，调动用户的参与情绪。如可口可乐网页界面中，由于其用户群大多是活力四射的年轻人，其界面设计互动性较强。图2是可口可乐“产品系列”的界面设计，采用立方体块面组成。中间图标按钮设计成开瓶器的形状，圆形的发光体围绕箭头不停地旋转。当用户点击向右的箭头时，所有的立方体收缩成平面，代表产品由下向上跳出，立方块也随即高低错落地弹出来，产品包装就展示在不同的方块上，错落有致，别有一番情趣（图3）。

图2 可口可乐网页界面一

图3 可口可乐网页界面二

3.3 关注细节，体现友好交互

交互设计不仅体现在网页的结构清晰、逻辑关系明确，还体现在合理的导航设计以及按钮的摆放，如：按钮如何摆放更符合用户使用习惯，更显而易见；导航方式如何安排，使用户快速熟悉功能模块的应用；一个友好的界面设计，需要设计师付出更多的心血和智慧。如图4，看似简单的一个界面设计，却体现出设计师对用户的关爱；对于图5和图6两个表单的填写，图5需要用户自己手动填写，还需注意格式、大小写、符号等问题；而图6内容的填写与用户产生的交互性要强很多，用户只需要点击下拉菜单进行选择即可，有效节省了用户的时间。另外，还需要对界面进行字体、风格、图标等细节的考虑。交互设计从前期的结构逻辑分析到最后的界面细节调整，是贯穿始终的。