毕业论文- “植志”APP移动客户端界面交互设计.docx

中山大学南方学院2018届本科生毕业论文摘要 本次毕业设计的首要目的是运用已经学习到的交互设计语言和数字媒体艺术综合知识自主实现一个实用的移动客户端，使得现有知识得到更好的巩固，更加熟练。同时在实现中学习到更多新的知识，能更深入掌握软件、交互应用，了解软件开发的全过程，为以后的学习与工作打下坚实的基础。现如今手机移动设备不断普及蓬勃发展，对手机设备的软件需求也越来越多，界面视觉效果良好，且具有良好体验的应用留在手机上长期使用，因此，手机UI设计再当今移动互联网迅猛发展的时代中显得尤为重要。 希望通过本次的植志移动端交互设计让更多人对绿植搭配有更多的认识和喜欢上家居植物。关键词：家居植物，美化环境空间，护理搭配，获取咨询，分享动态目录目录3第一章 课题分析4 1.1 灵感来源4 1.2 创作目的4 1.3 研究内容4 1.4 UI设计基本介绍5第二章 调研分析6 2.1 调研过程6 2.2 竞品分析7 2.3 用户画像11第三章 方案设计与构思12第四章 作品设计与制作13 4.1 应用简介13 4.2 设计规范13 4.2.1 颜色规范13 4.2.2 字体规范14 4.2.3 icon规范14 4.2.4 logo分析15 4.3 应用流程图16 4.4 手机线框图17 4.5 手机界面图18 4.6 空状态22 4.7 动效23 4.8 客户端界面25第五章 作品分析与解读27第六章 总结28参考文献29致谢30附录31第一章 课题分析1.1 灵感来源 随着室外环境质量的不断下降，人们更加渴望能在室内欣赏大自然的景色，分享一片绿地。植物是大自然生态环境的主体，又有净化空气和调节室内小气候陶冶情趣的作用，接近自然，感受自然是人们的渴望。同时对于现代的家居生活，绿植的装饰是必不可少的，植物的摆放不单单只是好看的问题【1】，也是有讲究的，可以使人从精神上得到满足，提高室内空间的生理和心理环境质量。 由于工商业的发达，现代人的生活空间日益狭窄。因此若能在办公室及居家室内摆设些绿色的植物，便可以把自然景观搬到室内，不仅具有美化作用，并可舒解人们忙碌紧张的工作情绪得，对于身心的调剂具有莫大的帮助。然而绿植种类繁多，人们常常难以选择，没有太多时间考虑各种植物与不同家居空间间的搭配而导致室内风格不搭调甚至弄巧成拙。而且本人本身很喜欢绿植在家居和园林带给人愉悦的视觉享受,喜欢研究植物。1.2 创作目的 取名为“植志”,一来是该APP功能和电子杂志相似，另一是因为该词还有树立意志的意思，希望通过“植志”让人们轻松变身植物专家，随时学习植物知识包括花卉的名称、分类、花语、特征习性等。 非常适合植物爱好者、花卉养护者、园艺工作者、孩子家长、旅行者、拍照爱好者以及任何热爱生活、喜欢植物的人。1.3研究内容 探讨人们在家居植物中与植物的关系，根据人们的物质生活与精神生活的需要出发，配合整个室内环境进行设计，达到人、室内环境与大自然的和谐统一。而且根据要室内环境状况进行绿化布置，不仅针对单独的物品和空间的某一部分，而是对整个环境要素进行安排，将局部的装饰组织搭配，以取得总体的美化效果。 可以说，现代建筑装修及物品器具布置只是解决了“硬件”装修和装饰，而室内绿化装饰是现代家庭的“软装修”，这种“软装修”是普通装修布置的必要补充，又可净化空气。利用植物本身的大小、高矮可以调整空间的比例感，使环境更加协调，充分提高室内有限空间的利用率【2】。而手机移动端的APP作为即时方便的媒介能快速有效地传达这些空间环境知识，具有独一无二的高效性。1.4 UI设计基本介绍 随着社会的不断进步，人们对于应用设计的界面美观要求越来越高，特别是像一些购物类型的网站，例如淘宝，而如今聚集了一批批商家在上面买卖产品，离不开设计师的精心设计，因为一个好的产品没有设计师的精心包装，别人看了也不会有很大的购买欲望，当然其他因素也是不可忽视的，UI设计在商海中是不可或缺的。 UI是用户界面，是英文User和 Interface的缩写。从字面上看是用户与界面两个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，分别是：用户研究、交互设计、界面设计。 国内外众多大型IT企业(例如：百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺还是蛮激烈的。我国UI设计人才缺口巨大，目前，中国市场上的手机、软件、网站等产品，同质化程度非常高，过去企业在设计产品的时候，主要是在功能、质量或者产品外观上和竞争对手有所区别，而现在随着技术的进步和市场的发展，越来越多的企业意识到用户体验的重要性了，而这种用户体验的提升则主要依赖于UI设计者们的劳动。 “可用性高”的设计会战胜“简洁”的设计。智能手机的用户已经扩展到非常边缘的人群，而且数量级很大，他们对于一般的界面交互、隐喻没有任何概念，把信息尽量直白、无损地传递出去，会在可用性和设计的简洁性上产生一定的冲突。 很多人不知道用户界面是什么，事实上他们也不关心。他们不知道有人在网站的背后策划着他们所见到的一切。他们只知道他们需要一个简单的应用。他们要一个易用的系统，加载和响应速度快，不要让用户思考并且不给用户伤痛的理由。 第二章 调研分析2.1 调研过程 本次调查的样本总量为 92人，男女比例基本均等，样本年龄段集中在2030岁间，主要使用网上发放调查问卷的形式。如图2.1所示。图2.1 据调查显示，超过50%的用户在一线城市，年龄多集中在2055岁。 可以推断出应用的目标用户集中在2045岁这个年龄段的植物爱好者，有一定的消费能力，且注重生活的品质。 由此可以得出结论：l 近一半的人喜欢绿色系风格的植物APP，另外一半喜欢彩色系的植物APP。l 有大部分的人的家里有种植植物。l 大多数人并没有使用过植物类的APP。l 近75%的人认为植物在家居中的作用比较重要。l 近75%的人曾有种植不成功的经验。l 近75%的人不需要一个可以沟通交流种植或者与植物有关的信息的盆友圈子。许多人都很少记录植物的生长状态。l 很大部分人表示愿意尝试这款APP。图 2-2 很多人遇到的主要问题是不容易养活植物，其次是不知道选择植物和不懂家居与植物的搭配。如图2-2所示。图 2-3 由上图2-3可得：用户最需要的功能是针对不同植物的护理指南和植物百科，其次是插花艺术指引。 可以添加的功能是花卉商城，同时可去掉的功能可以使花语，同城交流。我决定把记录分享植物的状态的功能和交流论坛结合在一起。2.2 竞比分析 我选择了目前应用商城上的植物类APP，通过体验其界面和功能对比，得到了如下的结果：29听花: 优点是界面简单，花类丰富。应用以花为主，而且主打商城购物，旨在为客户提供新鲜的花卉和专业的配送等贴心服务，但是养花指南的功能做得还不够，已有涉及插花艺术,如图2.4。 并且在商品详情页面上贴心地附上了该植物的插花步骤介绍，方便了用户的种植，总体来说是个优秀的花卉商城应用，如图2.5。 图2.4 图2.5踏花行APP: 以花卉养护讨论为主的社区，包括居家园艺、多肉植物、球根植物、月季等不同类植物的专门讨论区，用户可以分区进行交流各种养护经验和问题。 其突出的是分类交流功能，用户很快就能找到“组织”。养花的问题直接在上面看和问，都能获得回复和解决，还能看到花友们的养花经验分享，但界面过于简单，没有自己的特色，难以令用户从第一印象就喜欢上它，如图2.6。图2.6多肉植物APP： 界面陈旧，经常无人更新内容，商家广告漫天飞，而且普通玩家发的帖被管理员随意删帖，花币无故被取消，申诉没人理睬。如图2.7。图2.7形色: 界面和内容文艺清新让人舒服,拍照识花的功能很好很强大，是款成功的植物识别软件。而且附加的赏花攻略，旅行足迹记录和高清壁纸功能都能使app功能更完整和齐全。如图2.8。图2.8 综上所述，“植志”APP的定位与上面的都不同。植志主打家居环境中的植物搭配。养花草的知识不会像上述APP那么丰富，但花艺和空间相关的知识会比较多，和设计相互交融的东西会比较多，所以软件本身界面也要有设计感。突出自己的功能，做出自己的风格。2.3 用户画像图2.3方小羽，女，31岁，在家上班，每天的工作较轻松，使用手机时间很长。喜欢多肉植物，常制作干花。李小杰，男，23岁，应届毕业生。每天工作，长时间使用电脑，喜欢在电脑桌以及周围放置植物。梁大姐，女，45岁，家庭主妇，家里有个小花园，喜欢各种鲜花，每天打理花园。围放置植物。方小羽：我希望这个应用操作简单，上手容易；内容不沉闷，能推荐最新的植物文章。李小杰：因为工作的原因，我有几次不成功的种植经历。希望能通过软件更好地护理植物并学到更多知识。梁大姐：我空闲时间比较多，有空看文章，我想看到更多的种植技巧以及搭配攻略。最好能有个一个可以沟通交流种植或者与植物有关的信息的盆友圈子。第三章 方案设计与构思基本策略 一方面主动搜集优秀的护理贴士及教程文章，帮助用户提高种植水平；另一方面用户可以发布照片以及心得，去分享提高种植的兴趣。用户目标1. 查看最新最热的植物资讯2. 分享植物的动态3. 快速找到想要添置的植物用户需求关键词1. 提供人气文章以及热门用户的推荐2. 美化优化分享界面，支持第三方分享3. 搜索便捷、浏览方便、操作简单动效设计逻辑: 1,任何元素的移动都会遵循现实中的物体运动规律。在现实生活中，一个物体对象的加速或减速一般都受到外力的影响（如重力、摩擦力等），而且运动速度的变化是连续而非突变的，所以同样的，在动效设计里，突然的/奇怪的运动模式都会显得不自然，丧失愉悦的使用体验，具体的解决办法为使用缓出缓入效果。 2，在单次交互动效中，不宜发生太多样、太多元素的动态变化。交互动效应当清晰、简明、一致。“少即是多”的设计原理在“植志”同样适用。盲目的酷炫会干扰视觉，所以帮助功能的实现，信息的展示，适用的便捷才是目的。 3.视觉反馈在UI设计中极为重要，因为它给了用户的自然期望以一个及时而符合逻辑的确认。用户界面应当根据用户的触发的操作快速给予反馈，同时，应当表明新的界面和触发它产生的UI元素之间的联系，让人总是知道当前的操作将会带来什么变化。第四章 作品设计与制作4.1应用简介 产品定位: 植志是一款分享并探讨植物与家居的搭配、交流社区、学习植物护理知识的移动在线应用； 热门推荐、专题分类和话题讨论大大提高了用户体验，同时有能方便用户购买心仪的植物及周边副产品的商城。 而拍摄分享，养护搭配是植志产品的核心理念。 4.2设计规范4.2.1颜色 选择用户调研中大多数人喜爱的绿色，同时希望能传达积极健康的感觉。如图4.2.1。图4.2.14.2.2 字体 遵循IOS10的字体规范，通过字体的大小来区分出界面内容中的层级关系。如图4.2.2图4.2.24.2.3 Icon 图标设计在整个APP设计中是比重较大的板块之一。这里主要使用扁平风格的图标保持统一性，同时也使用相同的颜色协调配色。如图4.2.3。图4.2.3 设置页采用统一宽度、统一圆角和处理手法的线性图标，保持使用上的连续性，保持整体的视觉平衡。 使用简单明了的图形语言以提高图标辨识度，便于用户识别【3】。同组图标使用统一的表现风格和处理方式。如图4.2.4。图4.2.44.2.4 Logo Logo的灵感来自植志的名字，根据植志APP是分享和记录的特点，联想到代表记录的铅笔和叶子；整合得到应用的主品牌logo。如图4.2.5。图4.2.54.3 应用流程图图4.3 植志的界面的导航栏功能主要包括五个方面，分别是有热门和订阅的首页，能看专题和优秀用户的发现页，包涵设置与消息的个人中心，还有包括购物车和商品分类的商城，最后是位于最中心的发布按钮，可以发布文章动态。4.4 手机界面线框图 设计基本方向为简洁易用，简单的交互能提高易用性和用户的使用效率，植志从用户的直观感受出发确保交互的一致性以及流程顺畅性。保证每个触点都能得到及时有效的反馈，保持良好的用户体验。如图4.4。图4-44.5 手机界面4.5.1 首页图4.5.1 首页主层级分为热门和订阅两个版块。 热门的每日推荐版块由官方编辑为用户推荐2-3篇优质文章。 同时能为用户做出优质信息筛选，使用户不需思考即可获得最新最好短文的初步信息纬度。 分割线可以区分上下信息层级和界面装饰，颜色的表现力低于文字信息的力度，所以选择浅色而不是深色，这样界面会更加简洁通透。如图4.5.1。4.5.2 个人中心图4.5.2 采用精简风格，突出用户的发布信息，方便用户找到自己的消息记录和空间历史。 可以在空间看到自己的订单消息和历史收藏。 并且与设置页面搭配在一起，不用再进入二级页面，简化操作。如图4.5.2。4.5.3 商城图4.5.3 商品详情采用精简模式，能够突出展示商品的特点， 商城放置8个主要分类版块，简便快捷直观。 卡片式浏览方式，方便用户快速筛选热门商品以及活动。 既有提供快捷的更详细合理的分类信息和筛选功能的“精确购买”。 也有可吸引人的专题页面供发现选择的“模糊购买“，围绕用户的目的和行为来设计。如图4.5.3。4.5.4 发现页图4.5.4 发现页主要集合专题分类和热门用户推荐，能方便用户找到自己感兴趣的内容,以及展示优秀的用户供关注。 此外加入banner的设计，提供更多的用户互动和选择性。 按广大用户的洗好程度进行排列的分类专题功能可以为用户提供更多选择性的同时方便用户更准确快捷地筛选到想到的资讯。如图4.5.4。4.6 空状态 页面内容为空时，称为空状态，也就是应用程序没有用户内容的那些时刻。即使指引只有一个步骤，也会让用户放心的使用。用户在使用一个新的东西或者功能时，时常会由于各种原因不知道该如何进行下一步以及其他状况，这种情况是不可避免的，我利用屏幕来教育吸引用户，把一无所有的页面设置要发生的事情的期望，变得饱满。我使用了文字加上视觉的表达去引导初次使用用户去尝试收藏和分享。 收藏夹和纸笔的图形搭配文案有助于用户理解上下文，即使它只是一个临时的步骤，也要为用户最大化其传递价值，要告诉用户：当前页面是什么以及应该如何获得。 重视空状态，因为它不是临时的或者次要的，实际上它和设计其他组件一样重要，不能让用户第一次打开应用时面对空白的页面，而是令用户充满了潜在的驱动、参与和喜悦。如图4.6所示。 图 4.64.7 动效 动效可以通过灵活变化使应用的界面更加充满活力。在应用UI设计中，我们应当巧妙的设计好的功能性动效（functional animation），使用户切换各个功能模块或者页面的体验更加流畅，更好地解释一个界面里各元素的变化过程，更好地强化各个元素的层级结构关系。 目标：通过动效辅助建立完整的层级关系。 在动效上任何物体都需要一定的时间用来加速或者减速。所以在植志一个页面内部的转移会调节缓入/缓出来设计动效，以导出更真实的运动模式。如图4.7.1，当用户点击右边的矩形时可以切换查看自己所订阅的用户列表，通过4.7.2把4.7.1向右边移动。同时一直在4.7.2下方的4.7.3向上移动并且透明度由低变高形成流畅的切换状态。图 4.7.1 图 4.7.2 图 4.7.3 在视觉反馈上，植志的文字和辅助图形会出现颜色以及大小的变动来让用户清晰地了解到界面的变化和动作的结果。如图4.7.4。 图 4.7.4 植志首页上方的顶栏会随着滑页的滚动而上移消失，如图4.7.6，当滑页重回顶端时又会重新出现，利用推挤和悬浮的效果可以创造生动的沉浸式体验。如图4.7.5。图 4.7.5图 4.7.64.8 客户端界面 客户端界面的尺寸是1920*1080，对应着市面上大部分的屏幕分辨率。移动端选择了中文的界面，这里网页则用英文设计界面。 在开始的着陆页上尽量使用简洁的字体和元素，网站的logo在左上方，右边是导航栏，页面结构比较简单，减少用户的其他操作。 同时许多现代主页通过具体的号召性用语（CTA）吸引访客注意，我这里应用了“Join us”(加入我们)来引导其进一步了解应用，进入更深一层找到自己想要的信息。恰到好处的CTA可以引导访问者在自己预期的路径上浏览。如图4.8.1。图 4.8.1 采用极简主义手段构建框架，并在定位元素和色板选择上加入更多创意，三个图标分别介绍植志的三个突出功能，让观众清楚知道植志的特点。如图4.8.2。图4.8.2图 4.8.3 往下拉能看到植物商城，文章分享，家具浏览等进入窗口。如图4.8.3。第五章 作品分析与解读 从视觉心理来说，优化功能逻辑，减少层级，同时预判结果，让流程更顺畅，让人们使用的更加轻松快捷的完成设计目标是重中之重。简洁明快的事物能给人赏心悦目的视觉。 大学四年的学习让我对于设计有了更深的理解，明白好的UI设计能传达给人们更好的使用体验，甚至能让用户透过贴心的应用交互看到我们的细心和温暖。 这次毕业设计是集合UI,字体，色彩，空间的一次综合实训，检验了各项技能之外，还锻炼了我的统一风格能力，但是还是存在着很多的不足，很难同时兼顾美观和使用的方便，有时会脑子一片空白想不出办法，这时我就让自己多参考别人的作品，去思考别人的设计逻辑，而不是盲目地闭门造车。我仍记得一开始做的界面，既不对齐，颜色也脏兮兮，跟现在的差距很大很大，如图5.1。但是后来经过自己的分析与别人的对比才找到了自己的错误，这些错误真的很难发觉，必须是经历过多次的碰壁才会清楚的，所以要继续多看，多做，多思考。图5.1 在准备毕业设计的过程中我找到了自己在数字媒体艺术专业中最喜欢的其中一个方向，那就是UI设计，希望我今后能更加努力设计更多更好的UI，不断进步。第六章 总结 在这次的毕业设计的完成过程中我对UI设计有了更深的理解，明白到设计是服务于产品的，或者说是为了解决产品上碰到的问题而发挥作用的。在不断发现问题的过程中解决问题，在开展设计时，考虑的不仅仅是作为一个视觉设计师的那些内容，而是要足够了解产品甚至与开发者在同一高度去考虑问题，自己的设计才经得起推敲了。所以未来我要不断继续学习，希望自己能成为优秀的UI设计师并坚持自己喜欢的道路。参考文献1 设计中的设计 作者：原研哉 出版社：山东人民出版社 出版时间：20062 设计心理学 作者：（美国）唐纳德A诺曼(Donald Arthur Norman)出版社：中信出版社 出版时间：2010.3.13 下一站：用户体验 作者：杨艾祥 出版社：中国发展出版社 出版时间：2012.7.14 方寸指间：移动设计实战手册 作者：无限工坊 出版社：电子工业出版社 出