交互设计中的软硬界面设计

李昀桐

摘 要：随着体验时代的到来，以用户为中心的交互设计逐渐受到重视。作为人与产品互相传递信息的唯一媒介，界面设计在交互设计中起到重要作用。界面设计分为硬界面设计、软界面设计及软硬界面协同设计。文章讨论了软硬界面设计在交互设计中的意义，从几方面浅析交互设计中如何进行软硬界面设计，最后探讨了交互设计中软硬界面设计的发展方向。

关键词：硬界面设计；软界面设计；软硬界面协同设计；交互设计

检 索：www.artdesign.org.cn

中图分类号：T 文献标志码： A 文章编号：1008-2832（2014）07-0050-03

ID and UI Interface Design in the Interaction Design

LI？Yun-tong

（China？Agricultural？University，？Beijing？100083，？China））

Abstract ：With the advent of the era of experience， User-centered interaction design gradually be taken seriously. As the only medium of transfer information of people and products， interface design plays an important role in the interaction design. Interface design is divided into ID Interface Design， UI Interface Design， ID and UI Interface Collaborative Design. This article discusses the meaning of ID and UI interface design in the interaction design， analyses how to design ID and UI interface in the interaction design from several aspects， finally discusses the Development direction of ID and UI interface design in the interaction design.

Key words ：ID interface design； UI interface design； ID and UI interface collaborative design； interaction design

Internet ：www.artdesign.org.cn

一、交互设计的定义

在当代社会，人们对产品的要求不再局限于使用功能的实现，人们更关注产品是否好用、易用、是否能给人带来美好感受。以用户为中心的交互设计应运而生。交互式产品的设计范围从主要针对计算机、互联网和信息产品的界面设计，扩展到各种门类的产品，为用户提供良好的使用体验。在《交互设计——超越人机交互》中，交互设计的定义为“设计支持人们日常工作和生活的交互式产品”①。交互设计使产品满足用户低级需要的基础上，能够满足用户的高层次情感需要。具体来说，交互设计的关注点是用户操作使用产品过程中的需求、期望、行为习惯，通过丰富、加强交互手段，使产品带给用户的交互感受更加愉悦。

二、交互设计中软硬界面设计的意义

在交互设计的整个过程中，界面是一种媒介，架起产品和用户之间沟通的唯一桥梁。界面分为硬界面和软界面两种，软硬界面的成功是产品向用户表达信息成功的基础，决定着产品感知用户是否成功，关系到用户与产品交互和谐与否。

三、交互设计中的硬界面设计

（一）操作信息可视化

用户首次使用产品时，生疏的操作界面令用户无所适从，将使用户对产品产生距离感，不利于形成用户与产品的良好交互，因此，为增强用户、产品之间交互的和谐性，方便用户学习操作，需要使硬界面中的操作信息能够可视化。

首先，产品硬界面中操作面板的布局按照功能的相异分割为不同板块，用材质、大小、形状、标识、符合等元素、方式来区分，用视觉信息来阐释清楚不同板块对应的功能及实现功能的操作方法。例如，傻瓜数码相机（图1）②的硬界面设计，巧妙搭配、结合形状、文字、材质等设计元素、变量，使不同知识水平的用户都可以轻松上手，实现了交互设计可用、易用的目标。

第二，各种颜色给人的感受也不同，这些感觉若应用到不同功能模块中，用户将直观地感知到区域间功能、操作的异同，从而流畅顺利地使用产品。例如，红色给人警惕、危险的感觉，而绿色代表正常、安全，因而，鲜艳的红色多用于报警装置按钮，而绿色则用于正常运转过程中操作的机动按钮。

第三，进行视觉信息的设计元素布局时，依照视觉设计中的排列原则、认知规律，结合用户个体不同的记忆、观念和习惯，常用的、重要的按钮设置在用户距离较近、易于操作的范围，并按使用频率、重要程度依次排序排列。

（二）利用自然匹配关系

利用自然匹配关系，可以使设计语言更简洁明了。首先，按钮与仪表的排布应一一对应，位置的关联性好；其次，按钮移动、旋转方向应与仪表指针运动方向一致；第三，符合操纵习惯模式，如按钮右旋为增加，反之减少。这样就能提高产品中人——机互动的效率，使用户不需特别记忆就能上手操作，有效减少用户操作产品中的障碍。

（三）提供及时反馈

反馈的含义为：向用户提供信息，使用户知道某一操作是否已经完成以及操作所产生的结果③。面对硬界面时，用户需要了解操作后将产生什么结果，如果出现障碍，问题出现在哪，又需要如何解决。因此，设计师需要在用户操作后，及时给予反馈信息，引导用户下一步的操作。而且，用户可以从触觉的维度辅助视觉感受硬界面，例如，按钮具有触感反馈，就可以辅助视觉上颜色变化产生的反馈。endprint

例如，机器被开启后，指示灯亮起，提醒用户操作成功，这是典型的视觉感知反馈。又如，用户按下按钮、旋转按钮，按钮将产生部分反作用力，这就形成了硬界面的触觉感知上的反馈。

四、交互设计中的软界面设计

（一）简洁性

用户无法在一个时间点上同时消化大批量的信息。在产品发挥应有功能的基础上，要尽量体现软界面的简洁性。软界面的信息区域往往面积有限，因此，要有效利用软界面的显示空间，凸出显示最有效的信息。不同门类的信息要分类排放，辅以窗口的不同进行分割，避免数据杂乱冗长。不常用的操作信息应设置在二级界面上，或进行隐藏，以简化一级界面的内容。在系统中顶部的菜单栏、操作命令的输入框、栏目设置等交互变量沿袭同一版本的设计。按功能将软界面屏幕进行模块分割时，可辅以不同色彩元素来表达。

（二）流畅性

美观不是软界面成功与否的标准，而操作流畅、信息清晰才是软界面的最终目标。信息的表达要易于令用户接受，对信息进行布局要合理。特殊设计的菜单要小心处理，如设计双击左键出现滚屏效果，如何停止而恢复静态界面，如何直接阅读底部信息等，都可能令用户疑惑，精心的设计便成为了软界面流畅性的阻碍。

为实现软界面的流畅性，需要进行测试。让不同的陌生用户进行完整的操作测试，或利用一些测试工具，可以有效破除设计师的个人局限及习惯，过程中不提供任何帮助提示，观测不同测试用户的操作过程是否正确、顺畅，从中查漏补缺，完善软界面的设计，大大提高其流畅性。

（三）容错性

软界面的设计必须符合用户的心理特点，当用户出错时持有包容的态度。不论考量多么周到全面，用户出现误操作都是可能出现的，第一时间提供响应，使用户得到如何正确操作的帮助、提示，告知用户发生误操作的原因、改善方法。

例如，发布信息时，有时用户坚持填写了大量信息，但由于填写时间超时而无法提交，需要从头输入信息，如果用户后退能够找回已经输入完成的信息，会增加软界面中人性化的成分。又如，在系统初次注册的软界面中，因密码位数与设置规定不符，无法成功修改初始密码，但由于没有及时反馈出错原因及改正方式，用户并不知道为何一次次操作失败，就可能使用户感到懊恼并放弃使用该产品。

软界面中，用户进行每一步操作后，要及时提供帮助并施加响应。允许用户进行后退及撤销，并能够缓存上一步骤的信息。在真正地执行操作命令之前，要使用户知道，即将可能发生的后果，请用户了解后果后，再次确认是否继续执行操作。

软界面设计中，如屏幕中利用触觉感知进行响应、屏幕翻转进行衔接等，是信息技术时代发展起来的反馈模式，更加先进、贴心，仿佛客服人员般愉悦地告知用户，我在为您服务。

五、交互设计中的软硬界面协同设计

（一）操作匹配

软界面在视觉感知上的信息呈递十分丰富丰满，是一种实用性的手段，能够辅助硬界面的表达更加充足、多样，而硬界面的触觉感知是无声的语言，使人产生触感和联想，是对软界面的一种辅助感受，二者互辅结合，才能为用户使用产品的过程创造更多便利性。因此，一个好的产品不仅需要优秀的硬界面设计，还需要与之匹配呼应的软界面设计，软硬界面和谐地互相匹配，才具备给予用户良好交互的能力。例如，尼康相机（图2）④设计中，硬界面设计中的按键在触觉上进行二维坐标尺上四个方向的击打触碰，软界面设计中的菜单图标按照上、下、左、右的相应顺序进行滑移操作。硬界面设计中的转盘可以在触觉上进行拨动操作，同时，软界面设计中的图标元素按匹配关系进行视觉上的旋转呈现。采用这种方式，用户在硬界面中进行触觉上的操作，软界面的设计元素在视觉上产生对应结果，这是一种清晰而自然的匹配、对应关系，也是软硬界面协调操作产生的和谐结果。

（二）表达情感

交互设计的目的是使用户心情愉快、精神放松。好的软硬界面协同设计，鼓励用户一步步操作产品，并在过程中产生创造性的思维，能够引起用户某种情感，使用户与产品的连接更加密不可分。

首先，若一个界面是好玩、漂亮的，用户的眼球将被深深的吸引。设计充满张力、表现力的软硬界面，营造充满活力、趣味、新奇的氛围，激发用户深入了解、使用并熟悉产品，使用户对产品形成良好的情感化评价。软硬界面中的图形和谐与否，按键精致与否，颜色漂亮与否，字体别致与否，都决定用户能否滋生产品预设的情感反应，能否深深地喜爱该产品。软硬界面中的图画、颜色、大小、比例等元素，就是情感设计的设计着眼点和突破口。要巧妙利用软硬界面中的图形元素，在表达清楚信息的同时，诱发用户产生美好的情感体验。

其次，以用户为中心，从用户的期待入手。界面设计应揣测用户头脑中的所思所想，使用户的需求、期望得到体会、实施和满足。例如，面向老人的界面，要照顾老年人退化的辨识、感知、思考能力，力求清晰明朗，在查询、引导和帮助上要着重处理，避免使老年人用户感到自尊心的伤害。又如，面向儿童的界面既要考虑幼儿身体尺寸还在发育，界面要易于握持、点击，又要满足孩童对鲜艳色彩、好玩有趣事物的向往。

六、交互设计中软硬界面设计的发展方向

社会经济不断发达，计算机技术日新月异。视线追踪技术、语音识别技术不断涌现。语音、遥控技术、手势等，都将渐渐出现在用户与产品的交互过程中。在显示、控制技术领域，将有更新更好的方式出现，在此影响下，用户与产品交互的软硬界面定会得到改进和完善，用户的操作定会更加便利快捷。

体验经济时代中，优秀的交互设计需要优秀的界面设计，其中，包括三个板块，即硬界面的设计、软界面的设计及软硬界面协同设计。交互设计中软硬界面的最高目的是在用户与产品间，实现一种超越自然的友好方式，作为交互设计师，这也是我们努力的高远方向。

注释：

①（美）Jennifer Preece，Yvonne Rogers，Helen Sharp著，刘晓晖，张景等译.交互设计——超越人机交互[M].北京：电子工业出版社，2003.

②朱伟.拉斯韦加斯的影像大典2007PMA展览胜[J].科学生活，2007（6）.

③诺曼·唐纳德著，梅琼译.设计心理学[M].北京：中信出版社，2003.

④高岩、陶晋、洪华.软硬界面协同影响下的用户体验[J].艺术与设计（理论），2008（11）.endprint