草学畜牧科技总第247期cao xue 2019 年第 4 期基于用 的 APP界面设计付文桂,刘 宁,文 斌,刘汉中,张 凯12!222(1•四川省新津县职业高级中学,四川成都611430; 2•四川省草原科学研究院,四川成都611743)摘 要:兔场环境监控助手是基于物联网、移动互联网等技术开发的一款手机APP,功能是实现兔场环境监控,辅助生产
管理人员采集、查看兔场中的环境数据。以此为例从需求分析、界面设计规范、原型设计、交互式设计四个方面进行兔场环境
监控助手APP界面设计,为兔场工作人员提供良好的人机交互接口,有效满足兔场工作人员体验需求,解决生产过程中出现的
各类问题。关键词:用户体验;兔场;环境监控;界面设计中图分类号:S126 文献标识码:A 文章编号:2096 -3971 (2019) 04 -0072 -05DOI: 10. 3969/j. issn. 2096 - 3971. 2019. 04. 014随着物联网技术、计算机技术、网络通信技术
外,人机交互接口-移动应用界面的设计显得尤为
的发展,互联网+畜牧的智慧养殖场给畜牧生产带 来了深远的影响。很多规模化的养殖兔场搭建了圈
环境监测与控制系统、视频信息采集系统、综合 管理系统
重要。用户界面(User Interface)是用户与应用程序 进行交互的重要平台,UI设计是指对软件的人机交
互、操作逻辑、界面美观的整体设计[1]。本文从用
硬件平台, 平 是 在PC户体验的视角对兔场环境监控助手APP[2*进行界面
设计,提出面向用户体验的界面开发设计模型,通
端,移 ,给养 作带 不便。以移 联网为媒介的智能 APP凭借其操作简易、过用户的参与,以保证最终设计的产品具有较高的 用
[]便携性好等特点受到人们广泛喜爱,然而有的APP
3, 为养兔 作人员提供环境 •采石沉大海,有的APP却受到用户的青睐,除了功能集和控制的软件助手,同时实时监控兔场状况,当
某些特定数据超过设定值时,将启动控制程应措施 管理人
收稿日期:2019-05 -19基金项目:6家兔产业技术体系:獭兔品种改良(农业部CARS-示信息,便于兔场管理人员及时发现问题、处理问题,避免因人为因素
43 - A-3 ) UR川省\"十三五”兔育种攻关项目
(2016NYZ0046)共同资助而导致的养殖经济损失&作者简介:付文桂(1983 -),女,中学一级教师,网络工程
师,硕士,主要从事计算机教学。1面向用户体验的界面设计流程四部分八个环节。兔场*通讯作者:刘宁(1981 -),男,副研究员,硕士,主要从事獭兔8病防控研究。兔场环境监控助手APP界面设计以用户为中心
贯穿于整个设计过程,分为需求分析、界面设计规
范、原型设计、交
72草学基于用户体验的兔场环境监控助手APP界面设计CAO XUE环境监控助手设计流程如图1所示。产品测1S 卄友攻VT 严品Demo图1兔场环境监控助手设计流程图1.1用户研究,
的内心需和兔 作人员一起完成 作任用 属于用户分析的 ,包括 用户 务,发现各功能 型,为下一步界面
整的 , 用 I心理和用 为, 兔管 用 础( 2)。求,包括经验、 ,为研究主要是基于工作理解、动机.需求、经历 经验.习惯等用户研究图2用户分析研究1.2 需求分析用 ,便于操作, 引用户眼球的系统映象用 型。通过各种信息采集 ,如访、问 、实地 集信息,确定兔场环境监控助手APP显性要素和隐性要素,结人机交 法 现有的 型
1.4原型设计资料、 资料、 资料、市资料等,挖经过初步需求分析,利用Axure、Adobe XD等 ,用 时间、 开发一个满足系统基需求的简单的可 反馈
用户需求形成用户需求分 档。系统,供用 开发人员试1.3任务和系统模型在用户需求分析的基础上,将用户需求、市
分析和产品定位作为具体任务,
用,感受功能的演示系统。通过与用 通,将:一步优化界面 好的用
&开目标的模、分 作。系统验,一步完善系统的需求规格和系统
型,便于开 人员开 1.5 测试评估型就是解决界面信息, 换为 可执行用 :在界面 过程中,需要将用户结
地对界面内容和
设计体系,产品不同,测试
不断,通过 现界面功能。界面信息 -, 正、补充界面象地呈现给用户, 不一样。I晅草学畜牧科技总第247期cao xue 2019 年第 4 期! 6 产品Demo在原型
2. 1. 3研究对象 养兔场工作人员。本款APP和测试 的基础上,制作高保真&主要服务于四
10名,
兔养 ,工作人员主要为人 ,其中 1的产品Demo,作为内部评审和测试 兔场管理人员、饲养人员、
!7 开发设计包括界面
15名。智能 中 系统21部,苹和 开发&前端与用果IAS系统4部,平 龄为43岁&切的是界面,包括界面的色彩 、 、布2.2 需求分析通过物联网传
局 ,后端包括 开发的内容、各功能 i的实现、开 的 、 的 、后期的维
与升级等〔4*&时采集兔场中的环境数:有 (氨、硫化、一化 )、温! 8 产品测试包括产品各功能的实现情况,对可靠性、性能
度,将 时显示在APP中,用 可以根据需要实时查看环境 控视频⑸。此,该 APP应具有简单
的特点,功能, 作、满度的评估等。!9发布与维护产品通过测试后可 外公布,后期进一步收
清晰,便于操作,应用 级联在3级内便能现功能和任务。 风格宜简洁大方, 适中,清晰,色彩 , 中
人的 ,尽集使用过程中的反馈数据,进一步对产
和优化&维护不给用户的认知带 外的 &兔 养人员大化不高, 是兔场的一 作人员,是各项2兔场环境监控助手APP需求分析2 1 用户研究的目
2.1.1
手APP的心理期望,
工作的具
上减轻
施者,兔环境监控助手在一定程度的工作任务,
是最 的受益人。I空:当兔舍温度高于30i时,控制系统将
为养兔 型的用
作人员&兔场环境监控助,自降温,并反馈信息给管理人员&目标 用
色模型。,分析3兔场环境监控助手APP界面设计规范3. 1 界面设计规范用Swis721 BlkCN BT,中文字体使
2.1.2 法通过访谈、田
用 的心 和 为, 用 环境 控助 APP
的显 隐性需求,由此确定产品的显性要素和隐用方正大 简体,颜色 3 &要素&SPECIFICATIONAENGUSHFOHTSABCDEFGHIJKLMNOPQRSTUVWZYZ abcdefghijklmnopqrstuvwxyzFONTNAMESwis721 BlkCN BTDESIGDESIG
SPECIFICATION设il•规范Color SELECTION
每种Al,牌T机的默认字体会U不同, 所以使川乎机默认7体时.本设计 稿便用方直大标来简体7体务称颜色选择ICON DESIGN图标设计«0e948b #5e5e5e厨0自+GGCO方正大标宋简体图3兔场环境监控助手APP文字、颜色、图标规范3. 2 APP各子系统功能及信息架构APP各子系统功能及信息架构
控多个兔舍内温度和湿度的现状,并有风机、湿
帘、
4,其主要功态各种报 控&能有
3.2.1
面&控功能通过通信线路,实时监3.2.2数据统计功能 它可 时显示兔舍温
度、湿度、光照强度等,统 当前周期、一、一
控包括温度、光照强度、湿度、三个通风窗口 周和一个月等时段的最大值、最值和平均值&3.2.3 温
功能 可 在的位置和开关状态、
741开 态。可[程草学基于用户体验的兔场环境监控助手APP界面设计CAO XUE个温
可将
态变化的时间、当前状态和位置、3.2.4远程设定功能 可以远程修改程序并设
当前目标温度、室内温度、目标湿度和室内湿度, 置参数印出来&实时监控远程监控设置运行远程设置设备状态iU 度光照强度漫 度01 ffi參数设置光照强度忖标温度
室内温度通风側【I“ «宿害代体统计周期故大值等H标湿度室内漫度设备状态警示设??警示设说图4 APP各系统构架图4原型设计及测试评估原型
流 信息的架构与 ,包括菜单 、界面的定 交 档等&在 APP中需要完成兔场有概念 、纸面 和界面原型等,环境 集系统、兔 控制系统三个功能子系统 构、交 流
时监控系统、兔 环境节点所有信息架于开 的整个过程,只是 不同,主要指界面流程的原型
型 包括:信息交
&界面流程的原档,并在Photoshop中绘出草和界面草图。信息交互和方式,主要解决交互( 5 )&设计决定 的操作
图5兔场环境监控助手APP界面草图该步骤主要完成草图和低保真原型做测试,工
作人员通过口语测试法,测试APP进行纸面原型测 试,发现问题,解决问题,优化设计&色系选择白色,LOGO图标采用兔子剪影,界面通过 简单 色块分割,给人 统一简洁的效果[6,7]&5. 2 APP交互式设计及测试交
5兔场环境监控助手APP界面设计5. 1 整体风格界面按键的定义、状态、功的界面能等。使用Axure RP软件将Photoshop中
一步的交
APP的风格为简约风,供用测试,找问题并根据用 ,确定 改优化界面,以达兔 作人员的最6)&格,色彩选用蓝-白-灰,给人以清爽的 ,主果&优化后的移动端部分页面效果展示(
I晅草学畜牧科技总第247期cao xue 2019 年第 4 期图6兔场环境监控助手APP效果图6结语兔场环境监控助手APP是一
参考文献于物联网、移[1] 张苇.论数字时代背景下的品牌形象数字化设计表达
动互联网的手机APP,具有简单易学的特点,功能[J].包装工程,2015, 36 (06): 55 -58, 67.清晰,便于操作,层级不多& 风格简洁大[2] 程丽荃.智能手机移动互联网应用的界面设计研究
[J].电子技术与软件工程,2015,(05): 40-41.[3]
,
,
.面向
, 适中,清,色彩 &为养兔场生产管
人员提 养殖生产 中的各种
的 助手,同时 控兔 往必须通过电脑
的常
集和控体验的手持移动设学学报,时状况,解决 控的,提高了养软件界面设计[J].计算机辅助设计
2010, 22 (06) : 1033 -1041.生产信息的采集 ,实现 养 ,真正
的实时监[4] 高 .家禽畜牧业环境智能控制系统研究[J].山东
工业技术,2014, (13) : 201.测,促 兔场的管 ,同时对养
便、[5] 朱文龙.移动式智能养殖系统的设计与开发[D].杭
用。因此,在我国兔业生产中有着 的应用前州:杭州电子科技大学,2017.[6] 百度移动用户体验部.百度移动用户体验设计之道
[M].北京:电子工业出版社,2017.的环保监测奠定了坚实的基础。[7] 柳 ,毕树生,梁勇,薛新,徐成志.畜禽养殖环能 的设计与实现[J].计算机工程,2009, 35
(19) : 20 -22, 25.Design of APP Interface of Rabbit Farm Environment Monitoring Assistant Based on User ExperienceFU Wen -gui1, LIU Ning2* , WEN Bin2, LIU Han - zhong2, ZHANG Kai2(1. Sichuan Vocational High School of Xinjin County, Chengdu 611430, China;2. Sichuan Academy of Grassland Sciences, Chengdu 611743, China)Abstract: Rabbit farm environmeni monitoring assistant io a mobila phone APP developed based on the Internei of things, mobila Intee-
nei and otfeo technologies. Us function is to monitoo tfe rabbit farm environment end assist production managers to ccllect end view the envi-
ronmenta? dato in tOe rabbit farm. Taking this as an example, tOe APP interface desien of rabbit farm environment monitoring assistant was
carried out from four aspects including demand analysis, interface design specification, prototype design and interactivv desien, so as to pro
vide good human - machine interaction interface for rabbit farm staff, rfectivvly meet the experiencc needs of rabbit farm staff and solve wri- ous problems in the production process.Key words: user experiencc ; rabbit farm ; environment monitoring ; interface design