多设备时代UI设计研究

陈莹

【摘 要】本文针对多设备用户界面设计做了研究，探讨网站和应用程序APP的思维方式和设计方法，通过分析网站空间架构与多设备界面，介绍了不受设备种类影响的通用型界面设计方式。

【关键词】多设备;多元性;界面设计

1前言

现今，我们生活中的信息终端设备不再只有PC机，除了智能手机和平板电脑，还有电视设备、游戏机、数字面板（广告、车载导航等），未来还将有更多全新类型的设备产生，使得设备变得更多元。设计者需站在多元化的角度分析这些设备的多元性，设计出符合用户体验的不受设备种类影响的通用型界面。

2 空间架构和设备界面分析

（1）空间架构

网站或者应用程序APP都是由多个页面、多种功能组成的复杂结构。“链接”让页面之间产生了相互联系，使得页面之间拥有垂直、水平、前后的空间立体结构。用户是否能够了解目前所处位置和移动的路径脉络与结构，是用户对网站和应用程序“好不好用”的评判要素之一。因此通过空间立体的视角和理念进行观察和设计，才能够设计出好用、易用的网站和应用程序。

用户浏览网站或者应用程序应了解四个要素才可以在页面之间流畅切换移动，这四个要素分别是现在所处的页面、该页面内容、从哪里来到该页面、该页面可以前往哪个页面。除了第三要素，其它要素都可使用网页中的元素进行说明。因为用户不一定从网站的主页进入当前页面，很可能是通过搜索引擎链接到当前页面，而“从哪里来到该页面”这一信息呈现需要给网页元素添加“变化量”，或者运用“互动性”表达。因此，“前后关系”设计目标是用户光凭直觉就能清楚移动脉络。设计方法有以下两种：第一，通过“视觉化”体现页面的前后关系。直接的方法是直接显示“从哪里来到该页面”的信息内容。间接的方法是页面移动后，网页产生“变化元素”，移动后，将下一个页面的视觉元素特征局部或全部替换，替换元素越多，说明移动越远。第二，利用互动的表现形式呈现页面的前后关系。所谓互动，指页面对用户操作有所反馈。当用户从一个页面移动到另一个页面时，设计者利用简单移动的效果或者动画让用户了解移动的路径和过程。这一方法比较适合运用在应用程序。

（2）设备界面

不同的设备尺寸、用途、输入方式、用户与画面之间的距离或者画面的方向等都有不同的特征，设备的多元性呈现出多种状态。虽然设备具有多元性，但抛开软件限制，影响界面设计的物理因素基本相同，包括屏幕尺寸、用户和屏幕的距离、屏幕的方向、输入方式四点。

屏幕尺寸的影响：每个设备的屏幕大小和形状都是固定的，这是影响界面设计的重要因素之一。除了PC机可以调节浏览器的大小和形状，其它设备几乎都需要全屏方式浏览网页，并且不能放大缩小。设备页面越大，页面所能放置的元素和信息就越多，界面设计就拥有较高的自由度。而智能手机这类屏幕较小的设备，几乎没有空间放置多余的元素。屏幕的形状几乎没有正方屏，无论屏幕以横为长还是以竖为长，界面的设计都必须与之相适应。换言之，不管横竖都会对界面设计造成影响。这些网站和应用程序的特性与实用程度，都需要以屏幕大小和形状为前提，受屏幕大小和形状的限制。

用户和屏幕距离的影响：用户与屏幕之间的距离是影响所显示信息量的重要因素。用户与屏幕距离和信息量是成反比的。为了能够增加信息量，可以提高分辨率。但在距离固定前提下，能够显示的信息量是有上限的，因为文字图片缩得过小将导致阅读困难。此外手持触屏设备受手腕移动范围的限制，用户与屏幕距离较小，PC机用鼠标操作距离较远，如果使用遥控器的设备则距离更远。所以距离应限制在一定范围呢，太近或者太远都对阅读有影响。因此设计的时候必须把用户和屏幕距离的影响加入设计方案中考量。

屏幕方向性的影响：绝大多数设备都会产生纵横两种方向性，屏幕的方向性会影响画面滚动的方向和网络应用内容。屏幕长宽比越大，影响越显著。在实际应用中，不同的应用内容应有其适合的屏幕滚动方向，例如通讯录和歌曲等列表类的信息，适合以纵向的屏幕滚动方向显示，而地图比较适合横向显示（虽然纵横都可以）。以屏幕方向为主的产品设计，会因为不同产品的特性和使用方式的差别，对设计也有影响。比如智能手机和平板电脑可以根据用户需求改变屏幕方向，电视设备的屏幕则固定不变。

输入方式造成的影响：鼠标和触摸屏、遥控器等输入工具是连接人与设备界面的起点，因此输入方式直接影响了界面设计。输入方式不同，界面的设计也应有不同设计。如果采用的是鼠标加键盘，界面设计自由度更高，可以更加精细;触摸屏和遥控器这类输入方式，元素的面积就必须放大，各区域之间的差异性就必须更加明显，可点选和不可点选的元素设计得更具差异性。

3 符合用户体验的多设备UI设计

网站或者应用程序在拥有立体的空间架构的同时，更丰富、更具有互动性的界面是现在的主流，因此在设计阶段，必须重视的是如何让用户理解或者体验界面的设计。网站或者应用程序的立体结构是指水平、垂直、前后，就如同网站页面里的上下左右前后的关系。

人类对于不同次元的概念无法全部理解，因此想要通过平面的事物了解立体实物比较困难。要想更具体的掌握网页结构，可以将自己的想法绘制成图。Wireframe（线框图）或结构表等设计资料都可以表明与设计相关的所有事项，不论是网站的方向还是版面编排，都是记录的内容之一，这些都是让开发人员的理解统一的关键。

有时候虽然按照Wireframe制作，但是网站或应用程序的成品却与想象完全不同，为了修补理想与现实之间的差异，可以通过模型来体现设计图不能展现出来的部分，需要注意前后关系和互动性两个问题。换言之，用模拟实物的方式体验那些不实际体验就不能够理解的事情，这种方式对于网站或应用程序的设计非常有效。首先制作范本网页，然后尝试切换页面，或者试着制作互动性的元素，就像建筑业先做模型一样，可以帮助我们以立体的模式模拟网站或应用程序的最终成品。

只有在真机上进行测试，才能真正了解网络服务方式。有的时候网络服务在除PC机以外的设备，如智能手机、平板电脑或者电视等设备上运行会有相当大的 差异，最终不得不调整网页设计、视觉设计方案。不断反复制作测试用的局部或者原型，可以渐渐消除想象与实物之间的差异。首先可以从视觉设计的角度进行检验。字体、图片的分辨率、設备屏幕的大小与观看距离，都会影响到其在真机中呈现的外观效果。其次，可以从互动性操作的角度进行验证。设备的规格、JavaScript或者CSS的前端建置与功效，都会影响网络服务的执行效率。还可以从输入方式造成的物理制约方面进行验证，即通过设备输入方式、手持方式检查操作性的优劣。营造印象的方式是从心理层面进行验证。

4结语

虽然一些设计有着固定模式和方法，但是任何人都可能被某种因素影响而产生不同设计，以及产生设计效果现实与想象的差异，因为不同设备产生极大变化的问题在网站或应用程序的设计中是非常普遍的。本文在多设备的用户界面基础上梳理了思维方式和设计方法，设计不仅仅是视觉设计，应该还包含规划，只有进行规划设计，才能有效提高效率和产品品质。

参考文献：

[1]王倩.介于多设备时代下的界面设计表现方式上的差异性[J].艺术科技，2016，29（09）：98.

[2]静电.不一样的UI设计师[M].电子工业出版社：北京，2017.

[3]薛文峰.移动互联网软件产品中的UI设计研究[J].包装工程，2016，37（06）：45-48.

基金项目：

广西壮族自治区教育厅项目：广西本科高校特色专业及实验实训教学基地（中心）建设——电子信息工程）。

（作者单位：百色学院）