一个关于宠物护理App的界面设计——毕业论文

淮南师范学院本科毕业论文毕业设计题 目： 一个关于宠物护理App的界面设计学生姓名 ： 学号 ： 所在院(系)： 文化创意与传播学院专业名称 ： 数字媒体技术届别 ： 指导教师 ： 职称(学位)： 淮南师范学院教务处印制目 录1项目概述32项目分析32.1背景分析32.2用户分析32.3竞品分析43项目设计63.1设计思路63.2产品线框图73.3设计要求84项目详细设计94.1界面风格设计94.2图标展示与说明94.3界面设计实现114.4整体效果设计145设计体会16参考文献：17致谢18一个关于宠物护理App的界面设计学生： (指导老师： )淮南师范学院文化传播与创意学院 摘 要:APP的界面是用户与机器之间进行信息交流的媒介，是人与系统互动过程 的一个支持层面。界面设计所涉及到的领域有计算机科学，心理学，美 学和人机系统工程，注重的是人机交互，界面元素之间逻辑合理，排版 美观的整体设计。随着社会的发展，人们对APP的使用率越来越高，从 而对界面的要求也越来越严格，为了满足人们的需求和适应时代的发展， App界面设计也在不断的加强创新性和时代性。我的作品是一款宠物护理 APP的界面设计,伴随着社会经济的快速发展和人类生活观念的改变，养 宠物的人越来越多而且变得越来越年轻化，宠物市场正在一步步的崛起。 因此设计一款焕然一新的宠物护理APP，是非常具有市场意义的。我的这 款手机APP界面在设计上主题明确，整体色彩丰富多样，风格整体统一， 秉承着实用性强和服务功能全面的思路给用户带来便捷、贴心的交互体 验。 关键词：APP；界面设计；人机交互；宠物护理About a Pet Care APP Interface DesignStudent:Hao Zonghao (Adviser:Tan Lunrong )( Huainan normal university culture creativity &communication )Abstract:Userinterfaceisthemediumofexchangeofinformationbetweenuserandmachine,peopleinteractwiththesystemisasupportlevel.Interfacedesigninvolvesthefieldofcomputerscience,psychology,aestheticsandtheman-machinesystemengineering,focusesonhuman-computerinteraction,interfaceelementsbetweenthelogicalandreasonable,theintegraldesignofthelayoutisbeautiful.Withthedevelop-mentofthesociety,peoplesutilizationrateishigherandhighertotheAPP,whichisbecomingmoreandmorestricttotherequirementoftheinterface,inordertosatisfypeoplesneedsandadapttothedevelopmentofTheTimes,theAPPinterfacedesignalsoconstantlystrengthentheinnovativeanddynamic.MyworkisapetcareAPPinterfacedesign,alongwiththerapiddevelopmentofsocialeconomyandthechangeofthehumanlifeconcept,moreandmorepetownersandbecomemoreandmoreyounger,petmarketisrisestepbystep.SodesignanewpetcareAPP,isverymarketsignificance.IthephoneAPPinterfaceindesignthemeisclear,theoverallcolorvariety,styleisunifiedwhole,withstrongpracticabilityandservicefunctioncomprehensivethinkingbringstotheuser,andintimateinteractionexperience. Keywords:APP;Interfacedesign;Human-computerinteraction;Petcare. 1项目概述 在社会经济和城市化建设的不断发展过程中，人们在精神生活和物质生活方面也得到了很大的改变，随着社会的老龄化现象突出，独生子女和丁克家庭也越来越普及，人们在休闲方式上,消费观念和情感寄托方面也变得越来越多样化。我们发现养宠物的家庭在日益增多，一个新的产业，也就是宠物行业会有非常可观的发展。因为养宠物的人越来越多而且变得越来越年轻化，所以宠物市场正在不断的兴起。而随着人们对养宠物的热度越来越高，不难发现宠物行业中的美容、医疗、保健、寄养、训练、比赛、摄影等护理服务将会不断地发展开。所以目前中国的宠物市场正处于持续发展的时期，而在这断发展的过程中必然会有一些不可忽视的问题出现。因此，宠物健康、高效地发展需要线上与线下联合调控。目前市面上的宠物类APP，从调查分析来看功能都很杂乱。而且宠物主的水平还处于初步期，对宠物了解还有所欠缺。所以目前对于用户来说急需一款焕然一新的宠物护理类APP，能够给用户提供全面的养宠知识和护理服务。2项目分析2.1背景分析 从现在的宠物市场环境来分析，此行业还是处在不断发展的阶段。自从2008年开始，就出现了许多的国际市场调研机构对中国的宠物行业发展进行了调查。根据有关的调查显示，中国的宠物总数在2000到2008年的这八年时间中疯狂增长，总数将近翻了五番。特别是宠物猫和狗的数量惊人，总量大约在两亿只以上。而到2015年，这个数字已达到五亿。还有关于宠物行业的数据分析显示，外国的宠物经济在该国的GDP总量中占比非常高，而中国的宠物经济占GDP总量比少于1%。还有就是比较受欢迎的宠物类APP大多出现在2014到2015年间，近来没有此类APP上线。所以就目前中国经济的快速发展及人民消费理念的不断改变来看，宠物服务行业也将会迎来高速的发展。 2.2用户分析 随着移动互联网的高速发展，宠物服务行业的也会迎来新的发展机会。从消费群体来看，主要是90后的新生代，他们已经习惯于使用功能丰富，界面美观的APP，就像目前非常火爆的大众点评APP。而宠物行业也需要这样的服务平台，人们更愿意用简单的方式来解决问题，而APP的出现更好的解决了宠物服务和产品价格不透明，消费者对宠物服务站点信任度低等等问题。 随着互联网+概念的提出，宠物服务行业线上与线下的合作也会得到巨大的发展。而移动APP随下随用的特点，很容易得到发展。所以根据用户需求设计出口碑好的APP很容易在用户间扩散，得到更多人的认可。因此用户都愿意通过第三方服务平台来解决自己遇到的问题，所以设计出功能全面的，界面美观的APP是用户所需求的。2.3竞品分析2.3.1战略分析表1 战略分析名称Slogan产品定位商业模式溜溜一个让养宠生活更加简单有趣的新拍档社交+闲置物品交换电商闻闻窝宠物家有宠物，上闻闻窝就够了社交+o2o+电商电商乐宠有乐宠的地方就有爱社交+电商+上门服务电商+上门服务有宠你是我的好朋友社交+o2o+电商电商波奇宠物波奇全面关爱宠物生活社交+电商电商 根据上表所示可以看出:目前上线的这些app中基本功能以社交为主，从而来发展电商和少数的服务功能。2.3.2功能分析 基本需求分析，溜溜、闻闻窝宠物、乐宠、有宠这四款APP的社交方式类似于微博的分享，用户可以分别看到最新的，推荐的和附近的动态等；而波奇宠物采用的是类似于贴吧的分享方式，需要进入波奇剧场来看相应的消息。在动态分享方面，各有不同的特点，闻闻窝宠物使用的是从宠物的视角参与到互动中，分享动态。而有宠有所不同的是以用户与宠物共同参与的方式进行分享，其他的APP都是以用户的视角来互动的。在社交功能中，所有的APP都有用户之间的关注，查看动态和私信的功能。波奇宠物和闻闻窝宠物都有类似于微信群聊的功能，可以让用户更好的分享共同感兴趣的动态。期望需求分析，溜溜、闻闻窝宠物、乐宠和有宠发布消息时都会为图片添加滤镜、贴纸等效果，有一定的美化效果。以上所有的APP都会有活动的功能，有的是通过banner的形式展示，而有的是通过用户之间自己发起的。其他期望需求上，溜溜有造型，绝育等功能，闻闻窝宠物有专家问诊，周边服务等功能，波奇宠物有求助互动，有宠有专家在线问诊，资讯等功能。兴奋需求分析，乐宠、波奇宠物、闻闻窝宠物和有宠都有电商功能模块，都以类似于淘宝的购物方式进行商品购买。而且除了溜溜外，这些APP消费都会有积分累计，根据累积的积分可以换取商品。上门服务的功能都有些，各有不同。配对，防走失等热门功能都会出现在不同的APP中。在智能硬件方面，有宠的有宠贝贝具有定位功能，能有效的防止宠物走丢。乐宠则有防走失狗牌，通过二维码记录主人信息，宠物走丢时其他人只要扫描二维码就可以看到信息来联系主人。2.3.3分析总结溜溜，是一款专注于社交玩法的APP，主要特别推送，溜溜日常，互帮互助，热门标签和好物分享等。各种功能都是纯粹的利用宠物来社交，具备了很强的趣味性。其他的功能就只有商城了，服务类功能基本没有。 闻闻窝宠物，应该是目前宠物app中用户量最多的一个，功能较多，从功能的分布上看排版不统一，有些杂乱无章。首页是社交玩法，用户的分享质量较好，用户之间的互动也很多，似乎以宠物为第一视角的互动方式发挥出了一定的独特效果。而在电商模块设计非常简单，没有商品分类，也没有搜索栏，对用户的使用有一定的局限性。 乐宠，有独特的圈子功能，经过对不同宠物的分类，组建了各种各样的宠物圈，比如同一个圈子里可以邀请对方一同遛狗，这个功能的开发，给用户带来了很好的社交互动。而这个产品的设计主要是针对宠物狗和猫的，在服务方面，只有关于这两者的美容。商城的设计比较丰富多样，能够极大的满足用户需要。也有防走失平台和活动功能，主要是针对的对象较少，所以可用性较差。有宠，社交功能上主要是分享动态，没有特色之处。资讯非常多，但有很多不相关的内容，使得趣味性不是很强。服务主要体现在为用户提供较为丰富的养宠常识等。主要的两个两点：有宠公益和有宠智能，有宠公益对那些流浪动物多了一份关爱；而有宠智能则可以对宠物进行实时定位，并且可以对宠物健康数据监测。 波奇宠物，以波奇剧场为主的宠物社交，增添了不少的趣味性，可玩性较好。但是和乐宠一样针对的对象只有狗狗和猫猫，服务功能主要是通过线下站点的上门服务，功能不够全面。3项目设计3.1设计思路图1 脑图据竞品分析和调查结果发现，目前上线的这些app中基本功能主要有社交，电商和服务功能。社交玩法是通过分享宠物的照片和状态等，来找到有共同兴趣点的用户，进行养宠的乐趣和经验的沟通交流。电商主要体现在宠物的食，用和玩这些方面。而在服务功能方面，产品之间各有不同，功能都相对有所欠缺，主要是用户与线下站点的合作进行宠物护理。总的来说，目前宠物app还是处在发展的阶段，功能主要局限在：通过分享宠物状态来进行社交，通过电商来盈利和不够全面的护理服务。综上所述，设计了一款新的宠物护理APP的页面。如上图所示，是所设计的界面架构。架构的设计主要的作用是对所设计的产品信息进行了构建，它一般包括了两点：界面的功能性设计和界面信息的排版设计，它可以使设计者清晰的设计各个功能和组织各个功能模块的关系。此次所设计的这个APP页面有四个主页面，它们分别是首页，商城，服务和我的。而图中所示的上传是在首页里隐藏的一个功能，这也是此次设计的一个亮点。而此次APP界面设计的最大亮点是在服务功能模块。在这个功能模块有着非常全面的功能，总体上分为护理，医疗和线下站点这三个功能。而在这个模块中会设计了一些创新性功能。 3.2产品线框图图2 线框图如图所示是根据草图制作出来的产品线框图，线框图制作的重要性在界面设计中是不言而喻的。它是整合框架层项目要素的方法：首先是通过排列信息和放置来安排界面的信息设计；然后是通过识别和定义核心功能来整合了界面的导航设计；最后线框图安排并选择了界面元素从而有了界面设计的整合。通过这三个整合方法，线框图就基本确定界面了界面的功能架构，概念结构以及信息架构，同时也可以规划视觉设计应该选择的风格。看似一张简单的线框图，但是其中包含的信息内容有文字，图片和视频等等。所以通常情况下，在设计的过程中会用些特殊占位符来表示这些元素，会用带斜线的线框来替代图片，用一些标识性的文字来替代文本的排版。根据用户需求进行了功能的排版，信息架构的组建。在此过程中要考虑用户体验的可用性等等这些东西。最重要的是线框图可以使设计及时的改善，为后续设计减少了不必要的麻烦。3.3设计要求首先是颜色搭配，颜色在界面中除了美观的作用外，也表达了产品或者说APP的情感和联想。颜色的意义取决于产品的文化和用户使用产品的环境。色彩也影响着人的感官，具有非常强的视觉冲击力。在界面设计中起非常重要的作用，可以说仅次于功能。在本次的APP界面设计中我所使用的是多种配色，这些配色方式能够突出表达我们APP的功能，并且表达了一种对宠物的情感。其中选取了橙黄色作为主色调，使整个界面的风格在极具视觉冲击力的同时，又能够突出大多数宠物的毛发色。然后是字体的设计，字体在界面设计中所占的部分不多，更多的是使用系统自带的字体。所以在字体这一块只要按照基本的要求来做就行了。中文一般选择与iOS比较接近的冬青黑体，英文也选用与之相近的Helvetica。在PS中使用字体时，最小的标准为24-32pt，基本把最小标准定为28pt，特殊情况下可以为24pt。由于手机屏幕的比例关系，前端工程师在使用数据时，会把所给的数据除以二，如文字字号为32pt，则告诉工程师16pt，实际显示大小也是16pt。因此在字体方面，设计时尽量使字号的数据为偶数。字体的颜色一般不用纯黑色。纯黑的颜色在视觉上给人的感觉太深邃，会使用户迷失。最后是设计规范，传统的设计其实非常强调创新和个性，但界面设计对这一块的关注却不太需要的，甚至有点遏制的感觉在里面。而我的观点是只有适当地打破规范，才能创造出让人耳目一新、或者说有格调的产品。因为，界面设计的目的是为商业，为产品负责，为用户负责。4项目详细设计4.1界面风格设计此次设计的界面风格采用的是扁平化设计风格，这种设计风格的理念就是界面中的所有元素都不加入任何的阴影，浮雕，纹理，渐变，高光等等特效。在此次的设计过程中所涉及的色彩选择，功能按钮和信息组成都是采用的简约化设计，并没有较复杂的界面和交互，避免了认知功能障碍的产生，从而使得界面的设计更加的清晰，简约，并且使得交互的流程更加注重于功能的本身。4.2图标展示与说明 图3 启动图标这是此次设计的启动图标，启动图标是界面设计中最重要的元素之一，在设计的时候我们应该把图标的传达含义和功能放在首位，它是一个APP给用户带来的第一视觉体验。如果对于用户而言这个表达的意义不明确甚至使人感到厌恶，这样那可能对于整个APP的界面设计都是失败的。所以启动图标的作用是千万不可忽视的。该款APP作为一款宠物护理类的APP，启动图标采用的是宠物的英文“pet”的首字母“P”与狗狗的卡通形象相结合，设计出的扁平化风格的桌面图标。为了便于用户识别，该图标选择了无色彩渐变的剪影式设计，其主色调选择的是橙黄色，中心的logo采用的白色，设计简约大方且寓意深刻。给用户带来一种亲和感，非常清晰的表达了宠物的形象特征。图4 导航栏图标这是界面所涉及的四个主要图标，也就是APP界面中的导航栏。导航栏表示的是界面的名称和具体的功能或者说是页面之间的跳转按钮。它可以明确的告诉我们这里有什么，通过可视化的层次结构导航直观的告诉我们页面的内容是什么；它可以引导我们去使用APP，通过导航用户可以对我们APP大体的结构和功能所处的位置有一个大致的判断；一个清晰明确的导航会跟用户留下一个美好的印象，而对于一个产品的第一印象是非常重要的。此次此次设计的这四个图标表示了整个APP的主功能，它们分别是首页，商城，服务，和我的，用户可以清晰的了解到APP的大致功能，并且不需要过多思考的找到他所需要的功能。图标的设计也形象的表达了其功能特点。 图5 功能图标这是界面中所涉及的小功能图标，这些看似娇小的功能图标可以给我们的设计工作增加一些亮点。它们为界面添加了视觉引导、用作按钮、做整体修饰、使界面更显专业、增强了交互性。据研究表明，大多数的访客使用APP是会根据需要来确定哪些内容要去浏览，这些小icon就会引领用户进入感兴趣的版块。它让你的界面布局不再生硬，把整体分割成众多模块，每一块都内容丰富而充满魅力，吸引着访客来点击阅读。 以上所设计图标的依次用在商城，站点和护理模块。这些图标都是通过精心挑选的一些样式和寓意都与内容紧密相连设计出来的，设计的风格统一，表达的意思简约明了。要注意的是这些Icon图标不宜过于炫目，因为可能会分散访客的注意力，不要让它吸引了用户的注意力而忽略了内容。这些图标加强界面的内容和设计，阐述了功能特点。它要跟界面的其他部分协调且风格一致。减少界面中太炫目的图标设计，要多关注网站整体风格的一致性。 4.3界面设计实现4.3.1引导页 图6 引导页 如上图所示是设计的APP引导页。当你打开一款APP应用的时候就会看到精美的引导页，它们在你未使用产品之前提前带你进入状态，给用户第一印象。第一印象的好坏会极大地影响到产品用户体验。因此每个APP都在努力将这几个页面设计好，从一开始就引人入胜有效的提升用户体验。根据引导页的目的、出发点不同，我们可以将其分为四种类型：功能介绍类、使用说明类、推广类和问题解决类，一定要注意的是一般引导页不会超过5页，设计过多极有可能使其作用适得其反。 此次设计的是推广类引导页。界面使用简洁的视觉元素整合形成，确保了界面的直观，易于理解不需要做任何的引导。内容更多是想传达产品的情怀，并考虑与整个产品风格和形象相一致。这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。而制作精美、有趣的引导页，用户会细细品味观赏。而这三张引导页设计了一个符合用户情感的一个温馨的故事，给用户带来一种全新的爱护宠物的情怀和产生情感的寄托。4.3.2首页 图7 首页 这是首页的设计，对于用户来说使用APP的时候，特别是对于阅读类的APP来说首页尤为重要。优秀的APP首页设计，可以让你的APP成功一半。因为APP首页曝光率是整个APP界面中最高的，当然也要排除一些特殊情况，可以肯定的是APP首页却是分享最好的页面。APP首页的作用在于引导客户，迅速向用户呈现内容，而精彩的内容本身和更精准的分类能激发用户更多的分享，这对于扩大用户群体是有价值的；内容分类的价值就在于此。而此次设计的APP首页的功能主要是分享动态，关于社交方面的应用。从竞品分析的结果来看，每款此类的APP都会有社交类的功能。随着使用群体的不断年轻化，社交功能也越来越受欢迎，因此这一功能在设计的时候一定是必不可少的。在此模块可以分享自家宠物的动态，我们会注意到标题栏有一个摄像机图标，这个图标的功能就是用来分享动态的。而在这个功能会涉及到一个隐藏功能，也就是前面所叙述的上传功能。在上传分享动态过程中必须要经过审核的内容才能被别人浏览。因此提高了此版块内容的质量，也就避免了一些无关的，内容低俗的动态。在这个模块设计中，采用的是卡片化设计和延展性设计，通过上下的动效以及信息的延展让用户意识到整个界面的延展，获取最新信息，新内容上浮，旧内容下沉。这种设计可以延长与用户的交互时间，是服务更完善，更贴心。卡片化内容呈现打破了原有的模式，内容至上，去除一切干扰，在用户需要浏览大量信息的场景下，提高了内容的呈现效率，在信息展现上非常突出。4.3.3服务功能模块 图8 服务功能模块 此功能模块是此次设计的重点，也就是本次设计的主题模块。在设计方面，整个界面设计为扁平化设计风格，界面中的所有元素都没有添加浮雕，渐变，高光，羽化等特效修饰。和拟物化设计风格有所不同，它是注重的质感光影;根据扁平化设计的原则，简化了界面中功能图标的设计，采用的是色彩明亮柔和的色块，寓意明确的icon和文字信息结合来呈现;并且使用较为简单的视觉元素圆形，直线来区分界面，使得界面比较直观，易于使用，不用做过多的引导。在色彩方面，采用的是多色彩的搭配设计，同一界面的用色达到了6-8种，使界面看起来整体上较协调，而各个部分又会对比鲜明。关于排版，是把简单的图形元素，图片和文字三者进行合理的编排。根据用户的需求，在适当的地方以合适的元素呈现，设计出层次清晰的视觉效果，使用户在使用时更有效的理解设计；整个界面是简约化设计，界面的所有元素都是功能性元素，从而使得易用性与交互性大大增强，有效的提高了用户体验。在功能方面，在这里会提供给用户非常全面的护理服务功能，不仅包含了其他此类APP的护理功能，并且会开发出一些创新性功能。这里主要包含了三个主功能：站点，医疗和护理。在站点模块中有寄养，领养，防走失，配对四个功能。在此我的设计放大了寄养和领养这两大功能。经过调查发现，一些爱宠人士在外出较长时间的情况下，对宠物的寄养感到烦恼，所以根据这种问题设计了寄养功能，这里的寄养功能不会局限于用户和线下站点之间，还会提供用户与用户之间的沟通，为宠物找到更好的家庭寄养。领养则是根据那些即将想养宠物的用户设计的功能，在此用户可以找到自己所想要养的宠物。这样通过用户与用户，用户与线下站点之间进行互动，极大的降低宠物被遗弃的可能性。在医疗模块中提供了驱虫，皮肤，疾病，预防和专家问诊五个功能。而护理模块则有美容，保健，训练和预防功能，这里的预防与医疗中的有所不同，在此预防的是宠物受伤和走丢等，还有关于宠物的护理小知识，给用户提供些护理小技巧和解决常识性问题。在这两个模块中设计几个创新功能，他们是预防，保健和训练功能。随着人们对宠物越来越重视，对宠物的健康关注度也越来越高，因此预防和保健功能也就能得到爱宠人士的认可。而训练功能则是针对那些初次接触宠物的人群，在这里会提供给这些人士全面的训练知识，从而是宠物有着较好的生活习惯，而且还可以为宠物训练些小技能等等，这样既可以提高宠物的生活质量又可以为爱宠人士增添些养宠物的趣味性。在用户体验反面，扁平化的设计风格可以给用户留下直接的体验。重点功能设计聚焦在页面顶部，突出内容；各功能之间布局位置独立，不会受到其他元素的局限。界面包含的信息一目了然，图片文字之间空间分配合理，符合用户的操作习惯，给用户留下一种清晰的，舒适的总体印象。功能之间的切换可以通过左右滑动来实现，合理的交互步骤给用户带来很大的便利性。避免了使用时用户产生焦虑感，极大的提升了用户体验效率。4.4整体效果设计 图9 首页-上传界面 图10 商城-商品分类界面 图11 服务护理界面 图12 我的-个人主页界面5设计体会本次的APP界面设计作为我的毕业设计，重要性是不言而喻的，所以每个人都会无比的关心和重视。只为能做出理想的作品，顺利毕业。此次设计过程中遇到了许多的困难，从选题开始就想了很多，由于想法太多导致思路混乱，后来经过老师的指导分析才把题目确定下来。接下来就是准备工作，从开题报告开始就遇到了许多问题，被老师指责过不够用心，准备不足，没有静下心来认真的思考过设计过程。经过老师的提醒，才真正的走入到此次的设计过程中，从开题报告开始做起。再然后投入到设计工作中来，去查阅资料了解界面设计；根据题目进行用户调查分析和竞品分析，一步步的理清设计思路，进行思维脑图的制作，进入到具体设计中来。之后就是进行原型图，线框图的绘制，再到详细的界面设计。在此过程中遇到许多专业性的问题，如界面的风格设计，色彩的搭配，界面元素的排版都是设计中的难点。在此过程中我坚信自己能做好设计，从而通过查阅相关资料，请教老师帮忙，和同学探讨学习解决了不少问题。设计本来就是一个循序渐进的过程，本身就充满着困难，只要我们不自暴自弃，半途而废，我想经过