AR眼镜图像界面设计与应用

李享 韩嘉宝 简子琪

摘要：现实增强技术（Augmented Reality简称AR）是现在炙手可热的新兴科技。在这个技术的发展下，AR眼镜的设计与生产也层出不穷，优秀的UI设计可以吸引用户对本产品的信赖度和使用时长。论文主要包括以下三个方面的工作：

1.综合分析系统框架、整体风格、视觉设计、页面布局、色彩搭配这五个方面，提出了层次明晰、实用美观、用户好感度高的可实施方案。

2.进行了产品外观展示、内部UI展示和效果评价。

关键词：AR眼镜；UI设计；用户分析

一、绪论

（一）研究背景和意义

在我们这个移动互联网快速发展的智能时代，虚拟现实技术逐渐被我们所熟知。增强现实技术（Augmented Reality，简称 AR）现在越来越普及。

各种顶级互联网开发公司都在争相研究人工智能、AR技术并开发相关产品。能让虚拟现实真正走向市场，在前期的AR技术开发、产品成本、用户分析、以及市场

诉求等都是非常重要的。

这次研究的目的就是想让AR能融入我们的日常生活，成为日常所需，方便快捷且成本低，推进社会向电子化高速发展。

（二）国内外AR技术发展现状

日本任天堂游戏公司在2016年联合口袋怪兽公司和谷歌的尼克斯公司制作了一款国内外都风靡一时的AR游戏《Pokmon Go》。再例如近两年支付宝AR抢红包、百度地图AR实景导航还有自拍软件的面部识别等等。随着移动互联网的深度渗透，AR的火爆，国内外的科技巨头纷纷加入这场竞争。而国外不仅仅在商业产业链中运用AR技术，还在艺术和航天科技中投入研究。目前，虚拟行星探索是美国重点研究项目，把虚拟现实技术放在对于遥远行星的研究工作中。总体来说，国内的AR、VR发展很快，但是与国外技术相比还是有一定差距的，不过不管是国内还是国外，AR技术在互联网和企业运用中有着很大的前景和空间。

二、AR眼镜可视化交互界面设计

（一）设计项目概述

1.设计理念

本项目是设计一款旅游型AR眼镜的网络交互界面，主要服务于我们在旅途中可能遇到的一些自身无法解决的问题，比如方向、语言、地理环境等。

设计理念是想将人工智能交互能融入我们的生活，去掉繁杂的无关信息，给用户简单明了的信息传递，柔和的视觉感受，舒缓用户的心理情绪，减轻用户的生活压力。

2.设计内容

本设计项目是基于用户体验的旅游型AR眼镜可视化网络交互界面的研究与应用，其主要功能为导航、实时翻译、多媒体播放、语音通话、天气预报等。

（二）设计构思和概念生成

1.设计构思

本项目研究的是旅游型的AR界面图像设计，主要是导航和实时翻译，主要针对在异国旅游、生活的用户。在做旅游型软件界面的时候，要遵循两个原则：一是尽可能的减少操作步骤，二是尽可能提高内容质量。所以在设计上要尽量简洁明了。

2.目标用户分析

主要针对的目标用户是经常出差，或者身处异国工作学习旅游的用户，由于是AR眼镜需要的科技含量很大，产品价格不会很平价，目标用户定位为高薪上班族、学生和背包客等，具体分析：

（1）高薪上班族

在工作上有频繁的业务交流，经常去不同的地方接触客户或者经常去外地出差。

（2）学生

中学生以上生活条件中上需要自主学习的学生，或者需要在网上听课的学生。

（3）背包客

经常一个人或者几个人自由行，经常去不同的地方旅游，爱好探险，特别是在异国旅游的人等。

3.界面設计风格定位

本软件是以AR与人工智能语音控制相结合，给用户一种未来的科技感，人机交互性会更强，产品定位是旅游型AR眼镜，主要用于为用户导航、翻译等，功能性较强。

本软件选取的是扁平化设计，画面简洁明了，可以让用户更直接的获取信息，提高效率。

（三）界面设计

1.体系流程设计

本论文所研究的AR眼镜的系统界面主要分为登陆界面，功能选择界面和二级界面。登陆界面包括个人信息界面和设置界面，功能选择界面包括导航界面、实时翻译界面、多媒体播放界面、天气预报界面、语音通话和摄像界面。

2.整体风格设计

整体风格偏男性化，色彩搭配大概以黑蓝色为主，选择运用偏平化设计，以界面美观、简约大方和条理清晰作为产品特点，设计元素上没有加渐变、浮雕等复杂的元素，而是强调抽象、简约和符号化，整体以蓝色为主色调，表达出科技蓝的感觉。

3.配色设计

该项目的界面色彩根据目标受众群体，选用的是具有科技感且易于识别的蓝色为主色，辅助色为灰白色，点睛色是根据具体的表达信息来定，不会大范围的使用点睛色。整体呈现出简约、科技的视觉感受[5]。

4.文字设计

界面文字采用的是微软雅黑字体，标准信息字体为12px，需强调的信息字体为20px，次级信息字体为6px，详细信息字体为5px。

5.图标设计

本研究的界面图标设计线条圆润简洁、质地柔和、风格统一，具有良好的辨识度。

图3.4 图标设计

（四）AR眼镜外形设计研究

1.国内外优秀设计作品介绍

（1）HoloLens

软HoloLens 是微软第一款无线全息AR眼镜，允许用户进行交互，并与周围现实环境中的虚拟影像进行互动。

（2）SmartEyeglass

SmartEyeglass是索尼公司出的一款智能AR眼镜，可以在用户眼前显示实时信息，该产品还配置了麦克风、摄像头以及传感器。

（3）Project Glass

Project Glass是谷歌在2012年发布的一款AR眼镜，用户可以用声音控制导航、语音视频通话、摄像，以及上网、接收发送短信和电子邮件等。

2.设计思路与内容

初期想法是想把眼镜和耳麦相结合，镜框的外观参照了滑雪的护目镜和潜水镜，使用大镜框是为了让显示屏不容易碎。在镜架中部直接连接包耳式耳机，镜框下面连接耳麦，镜框左上方加入摄像头。左边镜架前段加入“总开关”按钮。尾部用橡胶绳连接在一起，便于不同头型的人佩戴。如图3.9所示。

中期发现还想再简化，达到真正便携，于是把镜架尾部去掉，直接把耳机作为最末端，在镜架中间有可伸缩设计，为了适合不同头型的用户佩戴。把按钮设置为了四个符号，分别表示“总开关”、“上”、“下”和“退出”，把摄像头加到镜框上方，这样摄像的图片会更贴合人眼看到的图像。如图3.10所示。

后期优化了耳机位置，更符合人体工程学。如图3.11所示。

初期想法（图3.9） 中期想法（图3.10）

后期想法（图3.11）

3.纹理材质的设定

耳壳选用高品质塑胶喷漆金属漆，表面使用电镀模工艺加工出纹路，让表面看起来更有质感，镜框采用轻量化工程塑胶PP料设计，耐久性更强。同时耳套采用PU皮包裹透气高弹海绵设计，加强低频听感，可有效降低噪音。镜框、镜架及耳机的外观颜色都选用黑蓝色，体现出整体的功能性科技感。调节音量的触屏键选用的是界面设计里的主色，蓝色，使得内外统一。

三、产品展示

（一）外观展示

图4.1 AR眼镜外观建模

（二）界面图像展示

界面展示

图4.4 导航界面

四、结语

本项目主要研究设计的是旅游型AR眼镜的UI设计，主要从国内外AR技术现况、AR发展前景、UI设计理论分析、目标用户分析等方向来研究。在理论分析的基础上，加上前人的研究成果分析，得出结论是：想让AR产品能融入人类的日常生活，必须具有实时性、可传播性、大数据性以及便携性等特质；优秀的UI设计在满满足用户的基本诉求外，还要让用户感到舒适；UI设计必须结合产品本身的实用特点；要让产品在众多同类竞品中脱颖而出，需要设计一些细节创意点。

本项目的创新点之一就是语音识别，语音识别对于AR来说是一种绝佳的交互形式，可以让用户在对产品进行语音操作的时候解放双手。

本项目研究设计的创新点之二就是扁平化UI设计，结合目标用户的特征、习惯还有喜好，设计出以蓝色为主色的UI界面。

存在的问题是根据用户调研表明，用户更期望AR眼镜还有更多功能，比如可以通过手势识别来玩AR游戏、可以通过语音操作控制家中的电器等功能。本文的相关研究有些欠缺。

参考文献：

[1] 蔡希阳. 探究UI设计的视觉传达艺术[D].哈尔滨师范大学，2015.

[2] 王境垚. 移动端界面微交互设计研究[D].北京印刷学院，2017.

[3] 纪庆楠. 基于用户体验的智能公交APP交互设计研究[D].西安理工大学，2017.

[4] 柳真. 移动应用的信息可视化设计研究[D].北京印刷学院，2017.

[5] 刘晓霞. 基于用户体验的移动学习平台的UI设计与实现[D].华中师范大学，2017.

[6] 王玉峰，曹亮.虚拟现实关键技术与前沿应用[J].中国工业评论，2016（08）：40-47.

[7] 庞立丽.浅谈网页界面设计中的色彩运用[J].科技创新与应用，2014（19）：62.

[8] 顾硕.虚拟现实产业进入高速发展期[J].自动化博览，2017（02）：3.

[9] 李燕.虚拟现实在界面设计中的应用研究[J].艺术科技，2016，29（03）：282.

[10] 曹裕丰.谷歌眼镜发售，再掀可穿戴设备浪潮？[J].网印工业，2014（04）：5-6.

[11] 张晓英.AR红包，你玩了么？[J].通用机械，2017（02）：6.

[12] 孟美.虚拟现实人机交互开发要点分析[J].信息系统工程，2016（08）：20.

[13] 黄亮亮，曹娟.智能眼镜在直播中的应用研究[J].广播电视信息，2016（12）：12-14.

[14] 陈浩磊，邹湘军，陈燕，陈燕，刘天湖.虚拟现实技术的最新发展与展望[J].中国科技论文在线，2011，6（01）：1-5+14.

[15] 徐轩露.虚拟现实技术与计算机技术应用的共同发展[J].中小企业管理与科技（下旬刊），2013（01）：23.

（作者单位：重庆邮电大學传媒艺术学院）