1、 毕业设计 题 目 ： 一个关于宠物护理 App 的界面设计 学生姓名 ： 学 号 ： 所在院 (系 )： 文化创意与传播学院 专业名称 ： 数字媒体技术 届 别 ： 指导教师 ： 职称 (学位 )： 淮南师范学院教务处印制 目 录 1 项目概述 . 3 2 项目分析 . 3 2.1 背景分析 . 3 2.2 用户分析 . 3 2.3 竞品分析 . 4 3 项目设计 . 6 3.1 设计思路 . 6 3.2 产品线框图 . 7 3.3 设计要求 . 8 4 项目详细设计 . 9 4.1 界面风格设计 . 9 4.2 图标展示与说明 . 9 4.3 界面设计实现 . 11 4.4 整体效果设计
2、. 14 5 设计体会 . 16 参考文献： . 17 致谢 . 18 淮南师范学院本科毕业论文 1 一个关于宠物护理 App 的界面设计 学生 ： (指导老师： ) 淮南师范学院文化传播与创意学院 摘 要 :APP 的界面是用户与机器之间进行信息交流的媒介，是人与系统互动过程的一个支持层面。界面设计所涉及到的领域有计算机科学，心理学，美 学和人机系统工程，注重的是人机交互，界面元素之间逻辑合理，排版 美观的整体设计。随着社会的发展，人们对 APP 的使用率越来越高，从 而对界面的要求也越来越严格，为了满足人们的需求和适应时代的发展，App 界面设计也在不断的加强创新性和时代性。 我的作品是一
3、款宠物护理APP 的界面设计 ,伴随着社会经济的快速发展 和人类生活观念的改变，养 宠物的人越来越多而且变得越来越年轻化，宠物市场正在一步步的崛起。因此设计一款焕然一新的宠物护理 APP，是非常具有市场意义的。我的这款手机 APP 界面在设计上主题明确，整体色彩丰富多样，风格整体统一，秉承着实用性强和服务功能全面的思路给用户带来便捷、贴心的交互体 验。 关键词 ： APP；界面设计；人机交互；宠物护理 About a Pet Care APP Interface Design Student:Hao Zonghao (Adviser: Tan Lunrong ) ( Huainan norma
4、l university culture creativity Interface design; Human-computer interaction; Pet care. 淮南师范学院本科毕业论文 3 1 项目概述 在社会经济和城市化建设的不断发展过程中，人们在精神生活和物质生活方面也得到了很大的改变，随着社会的老龄化现象突出，独生子女和丁克家庭也越来越普及，人们在休闲方式上 ,消费观念和情感寄托方面也变得越来越多样化。我们发现养宠物的家庭在日益增多，一个新的产业，也就是宠物行业会有非常可观的发展。因为养宠物的人越来越多而且变得越来越年轻化 ，所以宠物市场正在不断的兴起。而随着人们对养宠物
5、的热度越来越高，不难发现宠物行业中的美容、医疗、保健、寄养、训练、比赛、摄影等护理服务将会不断地发展开。所以目前中国的宠物市场正处于持续发展的时期，而在这断发展的过程中必然会有一些不可忽视的问题出现。因此，宠物健康、高效地发展需要线上与线下联合调控。目前市面上的宠物类 APP，从调查分析来看功能都很杂乱。而且宠物主的水平还处于初步期，对宠物了解还有所欠缺。所以目前对于用户来说急需一款焕然一新的宠物护理类 APP，能够给用户提供全面的养宠知识和护理服务。 2 项目分析 2.1 背景分析 从现在的宠物市场环境来分析，此行业还是处在不断发展的阶段。自从 2008年开始，就出现了许多的国际市场调研机构
6、对中国的宠物行业发展进行了调查。根据有关的调查显示，中国的宠物总数在 2000 到 2008 年的这八年时间中疯狂增长，总数将近翻了五番。特别是宠物猫和狗的数量惊人，总量大约在两亿只以上。而到 2015 年，这个数字已达到五亿。还有关于宠物行业的数据分析显示，外国的宠物经济在该国的 GDP 总量中占比非常高，而中国的宠物经济占 GDP 总量比少于 1%。还有就是比较受欢迎的宠物类 APP 大多出现在 2014 到 2015 年间，近来没有此类 APP 上线。所以就目前中国经济的快速发展及人民消费理念的不断改变来看，宠物服务行业也将会迎来高速的发展。 2.2 用户分析 随着移动互联网的高速发展，
7、宠物服务行业的也会迎来新的发展机会。从消费群体来看，主要是 90 后的新生代，他们已经习惯于使用功能丰富，界面美观的 APP，就像目前非常火爆的大众点评 APP。而宠物行业也需要这样的服务平台，一个关于宠物护理 App 的界面设计 4 人们更愿意用简单的方式来解决问题，而 APP 的出现更好的解决了宠物服务和产品价格不透明，消费者对宠物服务站点信任度低等等问题。 随着互联网 +概念的提出，宠物服务行业线上与线下的合作也会得到巨大的发展。而移动 APP 随下随用的特点，很容易得到发展。所以根据用户需求设计出口碑好的 APP 很容易在用户间扩散，得到更多人的认可。因此用户都愿意通过第三方服务平台来
8、解决自己遇到的问题，所以设计出功能全面的，界面美观的 APP是用户所需求的。 2.3 竞品分析 2.3.1 战略分析 表 1 战略分析 名称 Slogan 产品定位 商业模式 溜溜 一个让养宠生活更加简单有趣的新拍档 社交 +闲置物品交换 电商 闻闻窝宠物 家有宠物，上闻闻窝就够了 社交 +o2o+电商 电商 乐宠 有乐宠的地方就有爱 社交 +电商 +上门服务 电商 +上门服务 有宠 你是我的好朋友 社交 +o2o+电商 电商 波奇宠物 波奇全面关爱宠物生活 社交 +电商 电商 根据上表所示可以看出 :目前上线的这些 app 中基本功能以社交为主，从而来发展电商和少数的服务功能。 2.3.2
9、功能分析 基本需求分析，溜溜、闻闻窝宠物、乐宠、有宠这四款 APP 的社交方式类似于微博的分享，用户可以分别看到最新的，推荐的和附近的动态等；而波奇宠物采用的是类似于贴吧的分享方式，需要进入波奇剧场来看相应的消息。在动态分享方面，各有不同的特点，闻闻窝宠物使用的是从宠物的视角参与到互动中，分享动态。而有宠有所不同的是以用户与宠物共同参与的方式进行分享，其他的APP 都是以用户的视角来互动的。在社交功能中，所有的 APP 都有用户之间的关淮南师范学院本科毕业论文 5 注，查看动态和私信的功能。波奇宠物和闻闻窝宠物都有类似于微信群聊的功能，可以让用户更好的分享共同感兴趣的动态。 期望需求分析，溜溜
10、、闻闻窝宠物、乐 宠和有宠发布消息时都会为图片添加滤镜、贴纸等效果，有一定的美化效果。以上所有的 APP 都会有活动的功能，有的是通过 banner 的形式展示，而有的是通过用户之间自己发起的。其他期望需求上，溜溜有造型，绝育等功能，闻闻窝宠物有专家问诊，周边服务等功能，波奇宠物有求助互动，有宠有专家在线问诊，资讯等功能。 兴奋需求分析，乐宠、波奇宠物、闻闻窝宠物和有宠都有电商功能模块，都以类似于淘宝的购物方式进行商品购买。而且除了溜溜外，这些 APP 消费都会有积分累计，根据累积的积分可以换取商品。上门服务的功能都有些，各有不同。配对 ，防走失等热门功能都会出现在不同的 APP 中。在智能硬
11、件方面，有宠的有宠贝贝具有定位功能，能有效的防止宠物走丢。乐宠则有防走失狗牌，通过二维码记录主人信息，宠物走丢时其他人只要扫描二维码就可以看到信息来联系主人。 2.3.3 分析总结 溜溜，是一款专注于社交玩法的 APP，主要特别推送，溜溜日常，互帮互助，热门标签和好物分享等。各种功能都是纯粹的利用宠物来社交，具备了很强的趣味性。其他的功能就只有商城了，服务类功能基本没有。 闻闻窝宠物，应该是目前宠物 app 中用户量最多的一个，功能较多，从功能的分布上看 排版不统一，有些杂乱无章。首页是社交玩法，用户的分享质量较好，用户之间的互动也很多，似乎以宠物为第一视角的互动方式发挥出了一定的独特效果。而
12、在电商模块设计非常简单，没有商品分类，也没有搜索栏，对用户的使用有一定的局限性。 乐宠，有独特的圈子功能，经过对不同宠物的分类，组建了各种各样的宠物圈，比如同一个圈子里可以邀请对方一同遛狗，这个功能的开发，给用户带来了很好的社交互动。而这个产品的设计主要是针对宠物狗和猫的，在服务方面，只有关于这两者的美容。商城的设计比较丰富多样，能够极大的满足用户需要。也有防走失 平台和活动功能，主要是针对的对象较少，所以可用性较差。 一个关于宠物护理 App 的界面设计 6 有宠，社交功能上主要是分享动态，没有特色之处。资讯非常多，但有很多不相关的内容，使得趣味性不是很强。服务主要体现在为用户提供较为丰富的
13、养宠常识等。主要的两个两点：有宠公益和有宠智能，有宠公益对那些流浪动物多了一份关爱；而有宠智能则可以对宠物进行实时定位，并且可以对宠物健康数据监测。 波奇宠物，以波奇剧场为主的宠物社交，增添了不少的趣味性，可玩性较好。但是和乐宠一样针对的对象只有狗狗和猫猫，服务功能主要是通过线下站点的上门服务，功能不够全面。 3 项目设 计 3.1 设计思路 图 1 脑图 据竞品分析和调查结果发现，目前上线的这些 app 中基本功能主要有社交，电商和服务功能。社交玩法是通过分享宠物的照片和状态等，来找到有共同兴趣点的用户，进行养宠的乐趣和经验的沟通交流。电商主要体现在宠物的食，用和玩这些方面。而在服务功能方面
14、，产品之间各有不同，功能都相对有所欠缺，主淮南师范学院本科毕业论文 7 要是用户与线下站点的合作进行宠物护理。总的来说，目前宠物 app 还是处在发展的阶段，功能主要局限在：通过分享宠物状态来进行社交，通过电商来盈利和不够全面的护理服务。综上所述，设计了一款新的宠物护理 APP 的页面。 如上图所示，是所设计的界面架构。架构的设计主要的作用是对所设计的产品信息进行了构建，它一般包括了两点：界面的功能性设计和界面信息的排版设计，它可以使设计者清晰的设计各个功能和组织各个功能模块的关系。 此次所设计的这个 APP 页面有四个主页面，它们分别是首页，商城，服务和我的。而图中所示的上传是在首页里隐藏的
15、一个功能，这也是此次设计的一个亮点。而此次 APP 界面设计的最大亮点是在服务功能模块。在这个功能模块有着非常全面的功能，总体上分为护理，医疗和线下站点这三个功能。而在这个模块中会设计了一些创新 性功能。 3.2 产品线框图 图 2 线框图 如图所示是根据草图制作出来的产品线框图，线框图制作的重要性在界面设计中是不言而喻的。它是整合框架层项目要素的方法：首先是通过排列信息和放置来安排界面的信息设计；然后是通过识别和定义核心功能来整合了界面的导航一个关于宠物护理 App 的界面设计 8 设计；最后线框图安排并选择了界面元素从而有了界面设计的整合。通过这三个整合方法，线框图就基本确定界面了界面的功
16、能架构，概念结构以及信息架构，同时也可以规划视觉设计应该选择的风格。 看似一张简单的线框图，但是其中包含的信息内容有文字，图片和视频等等。所以通常情况下，在设计的过程中会用些特殊占位符来表示这些元素，会用带斜线的线框来替代图片，用一些标识性的文字来替代文本的排版。根据用户需求进行了功能的排版，信息架构的组建。在此过程中要考虑用户体验的可用性等等这些东西。最重要的是线框图可以使设计及时的改善，为后续设计减少了不必要的麻烦。 3.3 设计要求 首先是颜色搭配，颜色在界面中除了美观的作用外，也表达了产品或者说APP 的情感和联想。颜色的意义取决于产品的文化和用户使用产品的环境。色彩也影 响着人的感官
17、，具有非常强的视觉冲击力。在界面设计中起非常重要的作用，可以说仅次于功能。在本次的 APP 界面设计中我所使用的是多种配色，这些配色方式能够突出表达我们 APP 的功能，并且表达了一种对宠物的情感。其中选取了橙黄色作为主色调，使整个界面的风格在极具视觉冲击力的同时，又能够突出大多数宠物的毛发色。 然后是字体的设计，字体在界面设计中所占的部分不多，更多的是使用系统自带的字体。所以在字体这一块只要按照基本的要求来做就行了。中文一般选择与 iOS 比较接近的冬青黑体，英文也选用与之相近的 Helvetica。在 PS 中使用字体时，最小的标准为 24-32pt，基本把最小标准定为 28pt，特殊情况下可以为24pt。由于手机屏幕的比例关系，前端工程师在使用数据时，会把所给的数据除以二，如文字字号为 32pt，则告诉工程师 16pt，实际显示大小也是 16pt。因此在字体方面，设计时尽量使字号的数据为偶数。字体的颜色一般不用纯黑色。纯黑的颜色在视觉上给人的感觉太深邃，会使用户迷失。 最后是设计规范，传统的设计其实非常强调创新和个性，但界面设计对这一块的关注却不太需要的，甚至有点遏制的感觉在里面。而我的观点是只有适当地打破规范，才能创 造出让人耳目一新、或者说有格调的产品。因为，界面设计的
