《艺考帮》手机APP交互设计报告数字媒体艺术本科毕业设计论文.docx

1、艺考帮手机APP交互设计报告数字媒体艺术本科毕业设计论文艺考帮手机APP交互设计报告-数字媒体艺术本科毕业设计论文渭南师范学院 题 目:艺考帮手机APP交互设计报告 学 院: 丝绸之路艺术学院 专业班级: 2013级数字媒体艺术1班 毕业年份: 2017年 姓 名: 吴杰 学 号: 130541015 指导教师: 冯文博 职 称: 副教授 曹宇 第二导师: 工作单位: 陕西国广影视制作有限公司 渭南师范学院教务处 制 1.毕业论文(设计)任务书 2.毕业论文(设计)开题报告 3.毕业论文(设计)中期检查表 4.毕业论文(设计)登记表 5.毕业论文(设计)文稿 6.答辩记录 渭南师范学院本科毕业

2、设计任务书 毕业设计题目 艺考帮手机APP交互设计 传媒学部数字媒体艺术 学生姓名 吴杰 学部、专业、班级 学 号 130541015 13级1班 指导教师 冯文博 职 称 副教授 一、文献查阅指引 1.资料查阅 ,1,查阅途径:图书馆、中国知网 ,2,查阅方法:关键词、作者、文献名 2.经典作品资料阅读指引 ,1,考研帮APP ,2,音乐宝APP 二、毕业设计任务及要求 要求学生在指导教师的指导下独立完成毕业设计任务撰写符合要求的毕业设计报告。在知识要求方面应综合运用多学科的知识与技能分析并解决实际问题使得理论认识深化、知识领域扩展、专业技能延伸,在能力培养要求方面学生应学会依据课题的任务进

3、行资料的调研、收集、加工与整理的能力,在综合素质要求方面培养学生严肃认真的科学态度和严谨求实的工作作风。 三、进度安排 第一阶段:查阅资料确定设计方向,2016年9月8日至2016年10月20日,设计选题阶段查找相关的书籍、收集资料确定设计作品方向制作PPT及完成开题报告。 第二阶段:规划草图,2016年10月21日至2016年12月31日,开始进行初步设计创意构思拟写设计方案及设计构图绘制设计草图。 第三阶段:设计执行方案,2017年2月22日至2017年4月20日,导师讨论修改设计方案撰写设计报告创作毕业设计“艺考帮”手机APP的交互设计作品。 第四阶段:成品,2017年4月20日至201

4、7年5月31日,整理完善毕业设计作品进行成品展示。根据答辩小组的建议继续修改完善毕业设计报告审核提交设计报告、设计作品、源文件等资料。 指导教师,签名, 专业负责人,签名, 主 管 领 导,签名 , 年 月 日 渭南师范学院本科毕业设计开题报告 毕业设计题目 艺考帮手机APP交互设计 传媒学部数字媒体艺术 学生姓名 吴杰 学部、专业、班级 学号 130541015 13级1班 指导教师 冯文博 职称 副教授 一、拟开展设计的价值、意义 界面交互设计已成为数字媒体艺术发展的流行趋势好的界面交互设计不仅让软件变得有个性有新意而且还能够吸引我们的注意挑起我们的兴趣更让软件的操作变得简单与自由。艺考帮

5、是美术艺术朋友交流的互动平台是艺考生及艺术爱好者最理想的聚集地。平台上驻扎有职业画家、高校老师,参加过往届艺术高考阅卷,、培训班老师、在读的各大学、学院、艺术院校大学生。他们为艺考生指点迷津只要你上传作品便可和他们对话获得专业的点评。平台上还有大量高质量的范例作品可下载还收录历年考试真题、各省考试通知、各高校招生简章、录取分数线等。 价值就在于能够为艺考生提供更多的便利同时也能够更好的把艺考帮推广出去让更多的人知道和使用。设计的意义在于为艺考生提供更好的快捷服务以及得到更多的讯息在此基础上也是对大学四年所学知识的运用提升自己的专业知识水平。 二、设计步骤、方法及措施 1.设计步骤 第一阶段:查

6、阅资料确定设计方向,2016年9月8日至2016年10月20日, 第二阶段:规划草图,2016年10月21日至2016年12月31日, 第三阶段:设计执行方案,2017年2月22日至2017年4月20日, 第四阶段:成品,2017年4月20日至2017年5月31日, 2.设计方法 负责图标的设计制作和界面的设计制作所运用的设计方法是查阅收集资料实地考察参考借鉴个人创作。 3.措施 ,1,明确艺考帮产品设计方向进行图标和界面设计的创作, ,2,实地进行考察寻找设计灵感, ,3,查找关于图标设计相关资料并对资料进行综合分析根据艺考生自身的特点进行图标和界面的设计, ,4,及时与指导教师交流讨论解决

7、设计中的技术问题与设计形式等问题, ,5,进行相关交流活动丰富设计形式。 三、设计内容框架 1.艺考帮手机APP的LOGO图标以及按钮设计, 2.艺考帮手机APP的每一级的界面设计, 3.艺考帮手机APP的整体交互设计展示。 手机APP交互设计体现了软件的个性和创意满足了我们在生活中的需求为我们的生活提供便利。在设计中界面菜单分为三级首先就是打开界面展示艺考帮的动态形象图片。接着就是主界面作为一级菜单里面含有考评、发现、艺圈、省份、艺术类别、活动等信息二级菜单主要是一级菜单的详细信息和分类在三级菜单中包括是对前两级菜单更为详细的展示和使用。 四、主要参考文献 1程安萍.智能手机UI设计中用户体

8、验的视觉体验研究D.北京林业大学,2016. 2顾炎辉.论手机UI设计发展趋势J.科技信息,2009. 3张亚先.UI设计中图标设计的释义方式J.机械设计,2013. 4林冠龙.基于整合流程的UI设计系统D.华南理工大学,2014. 5薛文峰.移动互联网软件产品中的UI设计研究J.包装工程,2016. 6韦达.浅谈移动设备中的信息图形化设计J.设计,2013. 指导教师意见: 主管院长意见: 指导教师签字: 主管院长签字: 年 月 日 年 月 日 注:开题报告是在导师的指导下由学生填写。 渭南师范学院本科毕业设计中期检查表 毕业设计题目 艺考帮手机APP交互设计 传媒学部数字媒体艺术 学生姓名

9、 吴杰 学部、专业、班级 学 号 130541015 13级1班 指导教师 冯文博 职 称 副教授 完成情况及改进意见: 该生的创作已经进入中期制作阶段已完成前期的图标、界面的设计毕业设计报告二稿已基本完成正按照指导教师的意见进一步修改完善。 1.主要存在的问题 ,1,毕业设计作品中缺少细节设计方向较不明确, ,2,颜色搭配不统一主次不明显, ,3,图标设计不够具体未能展示图标功能, ,4,设计报告的大纲层次不清晰格式不够规范。 2.修改意见 ,1,明确艺考帮产品设计方向进行界面设计的整改, ,2,寻找设计灵感对一些界面设计的用色进行整改, ,3,查找关于图标设计相关资料根据艺考生自身的特点进

10、行设计整改, ,4,严格按照渭南师范学院本科毕业设计撰写规范,修订稿,的要求修改设计报告。 指导教师签字: 年 月 日 学部意见: 签字: 年 月 日 主管领导签字: 年 月 日 注:完成情况及改进意见由指导教师填写。 渭南师范学院本科毕业设计登记表 艺考帮手机APP交互设计 毕业设计题目 传媒学部数字媒体艺术 学生姓名 吴杰 学部、专业、班级 学 号 130541015 13级1班 指导教师 冯文博 职 称 副教授 成绩评定 指导教师评语: 该生毕业创作UI设计艺考帮手机APP交互设计,以艺考生、美术高考为基点,对艺术群体能够准确定位,能正确运用数字图像处理技术以及交互软件进行一系列的UI创

11、作,工作量饱满,难度较大,设计报告图文并茂,文字较通顺,技术用语准确。 该同学的毕业设计,创作,达到了本科毕业生学士学位的要求同意参加毕业设计,创作,答辩。 指导教师签字: 年 月 日评阅人评语: 该生毕业创作UI设计艺考帮手机APP交互设计内容较丰富,色调和谐统一,对所要创作的内容进行了准确的分析与细致的刻画,并以交互形式展现软件。毕业创作报告表述较清晰,格式基本规范。 该同学的毕业设计,创作,达到了本科毕业生学士学位的要求建议参加毕业设计答辩。 评阅人签字: 年 月 日 答辩小组评语: 该生毕业创作UI设计艺考帮手机APP交互设计主题明确,内容较丰富,所创作的一系列界面具有整体性及协调化的

12、设计,该生在论文答辩过程中,表述清晰、流畅,能够认真准确的回答答辩老师提出的所有问题。 经答辩小组研究,认为吴杰同学的毕业设计达到了本科学位论文的要求,决定通过答辩。 成 绩 答辩小组组长签字: 年 月 日 (分数) 答辩委员会审核意见: 答辩委员会主席签字: 年 月 日 艺考帮手机APP交互设计报告 吴杰 (渭南师范学院 丝绸之路艺术学院传媒学部 数字艺术系 数字媒体艺术2013级1班) 摘 要:艺考帮手机APP交互设计以美术生、艺术爱好者为基调来进行对APP的设计，分为前期的图标和界面设计以及后期的交互设计，主要采用简约、简洁的设计风格，颜色主要以橙白灰三色为主。设计理念以用户为本，始终把

13、用户体验感放在首位，受众对象主要以学生和美术爱好者为主，设计目的是制作出一款操作简单、视觉效果舒适的帮助艺考生的APP软件。主要特点是实现用户体验感增强，在产品体验中体验交互。其优点是促进艺考生以及美术爱好者之间的交流与互动。 APP;交互设计 关键词:艺考帮;界面设计;一、艺考帮手机APP交互设计概述 1.创作背景 艺考，对于每一个艺考生来说，是他们人生中一个重要的转折点。艺术联考，就是指目前国内比较权威，及教育部备案的各大艺术类院校，或者各大院校的艺术系对于高中三年级艺术类考生在高三第一学期末举行的一次综合的专业考试。考试合格者获得报考院校的专业合格证，持此合格证书参加高考，高考成绩公布以

14、后，各艺术类院校进行择优录取。而对于庞大的数据，需要一个手机软件帮助艺考生掌握资讯，掌握动向，帮助艺考生之间的交流以及相互学习的机会。在类似APP中发现了灵感，比如考研帮、高考帮、音乐宝等APP中，对于不同的群体，各软件间呈现的是不同的设计风格，考研帮针对的是考研的学子，而高考帮侧重高考，音乐宝侧重音乐学子，有着不同的受众对象。 创作目的 2.艺考帮手机APP交互设计的制作初衷是让美术、艺术朋友一起交流的互动平台，让艺考生及艺术爱好者成为最理想的聚集地，使得资源共享，互相交流讨论的目的。艺考帮手机APP交互设计实现用户注册登录，手机验证、QQ、微博三种形式实现用户登录。以用户身份进入主页面，使

15、得更为简单及快捷，增强用户之间的体验感以及帮助到更多的美术爱好者以及艺考生。 3.创作创新 软件的创新点在于平台上驻扎有职业画家、高校老师(参加过往届艺术高考阅卷)、培训班老师、在读的各大学、学院、艺术院校大学生。其目的是让资源1 共享，为艺考生、美术爱好者指点迷津，只要你上传作品便可和他们对话，获得专业的点评。当然平台上还有大量高质量的范例作品可供下载以及收录历年考试真题、各省考试通知、各高校招生简章、录取分数线等。 二、艺考帮手机APP交互设计创意构思 1.思维导图 艺考帮手机APP交互设计的思维图是由7个主要部分组成搜索资料、整理资料、风格设定、绘制草图、图标设计、界面设计、交互设计。

16、图1 艺考帮手机APP交互设计思维导图 图1为艺考帮手机APP交互设计思维导图，制作出优秀的UI作品首先需要对艺考帮针对的对象进行了解。 第一步，要深入了解艺考生的现状和模式，在网上查找相关资料，登录各艺考网站查询最新动态。 第二步，进行资料整理，初步分析艺考帮的定位以及对资料的整体分析，把文字资料和图片资料分别整理。 第三步，确立所设计的作品风格，最终选用了简约和扁平化的风格，原因有两点:首先扁平化是如今UI设计的主要风格，被大众所接受和认可;其次就是扁平化风格直观明了，用户的体验感更加强烈，操作更为简单方便。 第四步，对作品的图标和界面进行设计，先进行草图的绘制，把大概的图形样式图标形态在

17、纸上表现出来，再对界面的排版布局进行设计，使界面更加舒服合理。 第五步，对所有界面进行交互设计，运用Xcode进行代码设计实现交互，完成交互设计。该作品的创意灵感来源于考研帮、高考帮、音乐宝等APP上。这几款APP各有各的特点，面对的群体也不同。但同样也存在不足，没有很好2 的从用户的视觉上和方便程度上来进行创作构思和制作。于是综合了几款不同类别的APP之后，设计了该款既简洁明了又方便操作的APP软件，其目的是为了帮助艺考生更好更快的掌握艺考资源。 2.设计定位 作品运用了Coreldraw和Adobe Photoshop两款图形处理软件，遵循UI设计原则进行的图标和界面设计。界面大小是参照i

18、Phone 5的界面大小640*1136px设定的，PPI为326PPI，状态栏高度为40px，导航栏高度为88px，标签栏高度为98px，本款字体选用的是黑体、宋体，字体的大小有24号、30号、36号等。 设计一款艺考帮的APP，在选择主色调的时候应遵循受众人的年龄以及审美，并且色彩的纯度和明度都应选择较高的。因此我选用的主色调是#ff6b01、#e6e6e6、#fed324以及#929292，这些颜色偏暖色调，橙黄灰白搭配，由深色到浅色，字体的颜色根据界面效果来进行调整的，以黑色、深灰为主。界面的底色是用的是白色填充，以达到简约、简洁的效果。 三、艺考帮手机APP交互设计过程 1.创作过程

19、 第一步，进行资料搜索，实地考察和资料的整理工作。了解艺考生和美术高考的现状，找到相关同类型的APP(考研帮、音乐宝)查看其软件的总体风格。把调查和搜集来的资料进行总结和整理。 第二步，图标和界面的设计工作，确定受众对象和风格，然后设计出图标和界面布局的草图，接着用Coreldraw和Adobe Photoshop进行电脑制作。 第三步，用户体验和修改阶段，制作好的界面和图标导入手机后让部分体验者提出意见和建议，然后与导师商量进行修改工作。 第四步，实现交互设计，运用Xcode软件实现界面交互，最终输出到手机实现离线模式的演示。 2.艺考帮手机APP交互设计图标设计草图 图2是艺考帮手机APP

20、交互设计的图标设计草图，主要是主界面上的图标草图以及各二级界面的图标设计。Icon的设计运用书法体，书法体体现艺术的韵味。底色运用蓝色底，既简约又明了。邮箱的信封、注册的图标充分运用该功能的体现，满足了用户的即视感。QQ与微博登录的图标运用原图标，对考评、发现、设置、我的等图标设计运用简约的线条组成，与之与整体相互协调。 3 图2 艺考帮手机APP交互设计图标设计草图 3.艺考帮手机APP交互设计结构图 图3 艺考帮手机APP交互设计界面设计草图 4 图4 艺考帮手机APP交互设计界面设计草图 图3、图4是艺考帮手机APP交互设计的界面设计草图，主要是主界面上的界面草图，前四行是底部操作栏的四

21、个图标，第一行主要是登录前的导图界面，主要目的是介绍该软件的特点，以便直观的初体验。以三张整界面来体现艺考帮的主要特点，让用户更为直观的了解该软件，为后续的功能做铺垫设计。 第二行登录界面，包括QQ登录界面、微博登录界面、邮箱/手机登录界面以及立即注册界面。四个主要登录方式，体现了直观性与直接性。每一个界面都有其对应的界面，实现了交互与链接。四种登录方式可以相互穿插，目的是为了用户更为简单快捷的使用该软件。 第三行是选择身份界面，包括学生、老师、培训机构以及其他四个部分。以身份进入软件的主页面是更为具体的、直观的，方便用户的使用。学生的身份包括高三、高二、高一、初中生、大学生、研究生。老师的身

22、份包括画室老师、高中老师、大学老师、大学教授、美术老师、职业画家、自由艺术工作者、企业设计师。培训机构包括美术培训机构、文化课培训机构、美术出版社、美术画廊。其他包括美术爱好者、艺考生家长。身份的选择让用户更为直接的接触不同身份的群体，促进交流与分享，使得艺圈更为宽广。 第四行主界面，包括考评、发现、相机、艺圈、我的五个部分。考评界面包括模拟考和大众评，用户可以上传自己的图片与大家分享交流。界面中增加了省份选择，更为直观的了解用户省份的情况。发现界面中包括找画室、找老师、找课程、图库以及资讯，更为方便快捷的帮助用户寻找所需的资料以及资讯。相机界面就是以手机相机为依托，拍摄作品上传的作用。艺圈界

23、面中包括素描、色彩、速写等诸多热门供用户选择与关注。我的界面中主要的是个人信息的设置以及自己的收藏信息，包括模拟考、大众评、圈子、收藏等个人关注的信息汇总。设置界面包括个人信息的账号与安全、退出登录等。 5 四、艺考帮设计APP交互设计结果展示和评述 1.艺考帮手机APP交互设计界面作品展示 图5 艺考帮手机APP交互设计界面设计展示图 6 2.艺考帮手机APP交互设计效果图综述 本次设计的APP界面都是经过深思熟虑后，考虑到用户的方便操作，借鉴了各种艺考APP的优点，增加了导航界面，让用户体验更加流畅舒适，增强了用户体验，因为APP的制作就是为用户设计的，所以在设计之前要考虑到用户的感受。其

24、次又增加了一个软件简介的界面，从而对软件进行更多的介绍，让用户了解该软件，从而达到更加信任信赖的目的。第三点增加了一项搜索功能，可以对进行作品进行搜索定位，从而更快的帮助用户找到所需用的作品，节省用户的时间，让用户体验不在繁琐。 图5是艺考帮手机APP交互设计手机界面图标展示，图标采用扁平化风格，不仅保留以前特有的艺考认识度，并且更具特色，简约时尚大方是最直观的感受。界面颜色选用橙灰组合，对比适当，遵循了色彩原则，做到风格统一，主要是想第一时间吸引用户眼球;主界面的按钮较多，排版合理，所以让用户能直接找到自己所需要的功能。风格统一、定位准确，更为直观的了解用户需求。图标设计遵循功能合理化，对具

25、体的功能抽象化设计。 因为受众定位的原因，四个引导页的设计用色比较大胆，进入页面，给人由大到小，由面到点，更彰显了艺术生的轻松休闲放松的感觉，这样设计的初衷就是为了能让用户获得好感。主界面的布局是由图片、区域图标按钮、底部操作栏和导航栏组成，然后向各级分二级界面，三级界面四级界面。 选择身份界面，包括学生、老师、培训机构以及其他四个部分。以身份进入软件的主页面，更为具体的、直观的进入软件，方便用户的使用。学生的身份包括高三、高二、高一、初中生、大学生、研究生。老师的身份包括画室老师、高中老师、大学老师、大学教授、美术老师、职业画家、自由艺术工作者、企业设计师。培训机构包括美术培训机构、文化课培

26、训机构、美术出版社、美术画廊。其他包括美术爱好者、艺考生家长。身份的选择让用户更为直接的接触不同身份的群体，促进交流与分享。 主界面，包括“考评”、“发现”、“相机”、“艺圈”、“我的”五个部分。考评界面包括模拟考和大众评，用户可以上传自己的图片与大家分享交流。界面中增加了省份选择，更为直观的了解用户省份的情况。发现界面中包括找画室、找老师、找课程、图库以及资讯，更为方便快捷的帮助用户寻找所需的资料以及资讯。相机界面就是以手机相机为依托，拍摄作品上传的作用。艺圈界面中包括素描、色彩、速写等诸多热门供用户选择与关注。我的界面中主要的是个人信息的设置以及自己的收藏信息，包括模拟考、大众评、圈子、收

27、藏等个人关注的信息汇总。设置界面包括个人信息的账号与安全、退出登录等。 艺考帮手机APP交互设计以美术生、艺术爱好者为基调来进行对APP7 的设计，分为前期的图标和界面设计以及后期的交互设计，主要采用简约、简洁的设计风格，颜色主要以橙白灰三色为主，设计理念以用户为本，始终把用户体验感放在首位，受众对象主要以学生和美术爱好者为主，设计目的是制作出一款操作简单、视觉效果舒适的帮助艺考生的APP软件。促进艺考生以及美术爱好者之间的交流与互动。 (指导老师:冯文博 曹宇) 8 渭南师范学院本科毕业论文设计答辩记录 毕业设计题目 艺考帮手机APP交互设计 传媒学部数字媒体艺术 学生姓名 吴杰 学部、专业

28、、班级 学号 130541015 13级1班 指导教师 冯文博 职 称 副教授 说明:本栏目填写学生论文汇报情况答辩小组成员提问、学生回答等答辩过程及论文综合评价情况。每个答辩小组记录一份。 一、答辩小组组长熊晓莉老师宣布答辩开始 二、艺考帮手机APP交互设计作品展示 三、吴杰同学开始答辩 题目:艺考帮手机APP交互设计报告 内容: 1.艺考帮手机APP交互设计概述 (1) 创作背景 (2) 创作目的 (3) 创作创新 答 2.艺考帮手机APP交互设计创意构思 (1) 思维导图 (2) 设计定位 辩 3.艺考帮手机APP交互设计过程 (1) 创新过程 记 (2) 图标设计草图 (3) 交互设计

29、结构图 录 4.艺考帮手机APP交互设计创作结果展示和评述 (1) 艺考帮手机APP交互设计界面设计展示图 (2) 艺考帮手机APP交互设计效果图综述 四、答辩小组老师提问 1.侯君奕老师提问:界面设计如何体现功能性与便利性, 吴杰同学回答:艺考帮手机APP以艺考生为主要依靠设计主体对象主要为学生。在功能性的体现中运用简约的风格体现各个功能的作用。以图标设计为例各个小图标与功能互为对应。在各图标间展示各功能的运用利用交互设计展现功能间的联系。便利性的应用直观的视觉冲击受众的视觉利用颜色、对比、图标的样式等设计元素直观的展现界面所代表的功能。 2.冯文博老师提问:设计定位在哪里, 吴杰同学回答:设计一款艺考帮的APP在选择主色调的时候应遵循受众人的年龄以及审美并且色彩的纯度和明度都应选择较高的。字体的颜色根据界面效果来进行调整以黑色、深灰色为主要基调界面的颜色用白色填充以达到简约、简洁的效果。在颜色、字体、布局中选择与界面搭配的设计元素。 五、答辩小组组长熊晓莉老师宣布答辩结束。 答辩日期 年 月 日 答辩小组组长签字: 答辩小组成员签字: 记录人