社交类APP界面的设计与制作毕业设计说明书.docx
《社交类APP界面的设计与制作毕业设计说明书.docx》由会员分享，可在线阅读，更多相关《社交类APP界面的设计与制作毕业设计说明书.docx（31页珍藏版）》请在冰点文库上搜索。
毕业设计说明书
社交类APP界面的设计与制作
：
1221010735
班 级：
12210E01 学号
学生姓名：
学 院：
专 业：
指导教师：
软件学院
软件工程（数字媒体技术）
2016年 6月
社交类APP界面的设计与制作
摘要
本课题研究以社交类APP为研究对象，以各专家提出的情感化设计理论为指导依据，研究界面设计中各类视觉元素的设计和方法，实现社交类APP界面的高保真设计目标。
通过对一些社交软件的分析，以及熟练运用互联网思维以及讨论配色中的一些技巧和方法，加深对界面色彩、版式及功能的理解，促进APP设计更好的发展。
本课题主要分为两个部分：
第一部分是对APP进行简单设计，做出低保真原型图；第二部分是对其进行细化，完成文字，图形，版式布局设计和功能设计，结合用户使用情境，实现界面的设计。
本次设计通过根据iOS的设计规范，通过进行市场调查了解用户的需求和痛点，做出用户体验最好的社交类 APP的界面设计。
并且运用AdobephotoshopCC进行界面设计通过Axure对其进行交互的实现。
本文从用户体验的角度对此类APP的设计与交互进行分析，把目前应用和后继发展进行兼顾考虑，随着社会的发展，和用户人群的需求和使用习惯，该课题还存在大量的后续研究工作。
关键词：
互联网思维，UI视觉，交互，Axure
ThedesignandproductionofsocialAPPinterface
Abstract
InthisresearchforthestudyofsocialclassAPP,emotionaldesigntheorytovariousexpertsasaguidebasedinterfacedesignstudydesignandmethodsofvarioustypesoftoiletvisualelementstoachieveemotionaldesigngoalofsocialclassAPPinterface.Throughtheanalysisofsomesocialsoftware,andskilleduseoftheInternetthinkinganddiscussionofcolorinsomeofthetechniquesandmethodstodeepenthecolorinterface,layoutandfunctionofunderstanding,promotethedevelopmentofbetterdesignAPP.Thistopicisdividedintotwoparts:
ThefirstpartisasimpleAPPdesignedtomakelow-fidelityprototypedrawing;thesecondpartisitsrefinement,completetext,graphics,layout,layoutdesignandfunctionaldesign,combinedwiththeuserusecontexttoachieveemotionaldesigninterface.
ThedesignadoptedinaccordancewiththedesignspecificationsofiOS,byconductingmarketresearchtounderstanduserneedsandpainpoints,makingtheuserexperiencethebestofsocialnetworkingAPPinterfacedesign.AnduseAdobephotoshopCCinterfacedesignbyAxurethemachieveinteraction.
FromtheperspectiveoftheuserexperiencedesignandanalyzetheinteractionofsuchAPP,tobeconsideredtakingintoaccountthecurrentapplicationandsubsequentdevelopment,withthedevelopmentofsociety,andtheuserpopulationneedsandhabits,theproblemthereisalotoffollow-upstudyjobs.
Keywords:
Internetthinking，UIvisual，interactive，Axure
中北大学2016届毕业设计说明书
目 录
第Ⅰ页共Ⅱ页
1引言 1
1.1课题的提出 1
1.1.1课题的背景和意义 1
1.1.2课题的现状及其发展 1
1.2本课题的主要工作及目的 2
1.2.1主要工作 2
1.2.2最终目的 2
1.3本课题技术支持 2
1.3.1互联网思维-标签思维 3
1.3.2互联网思维-简约思维 3
1.3.3互联网思维-痛点思维 3
1.3.4互联网思维-产品思维 3
2社交类APP设计需求分析 5
2.1社交类APP使用中的用户痛点 5
2.2系统功能需求 5
2.3系统性能需求 5
3社交类APP设计详细设计 6
3.1社交类APP用户研究 6
3.1.1用户信息 6
3.1.2核心痛点 6
3.1.3机会痛点 6
3.1.4角色设计 6
3.2竞品分析 7
3.2.1竞品分析对比表 7
3.2.2总结、APP总体设计 8
3.3APP低保真原型设计 9
3.3.1APP一级页面 9
3.3.2APP二级页面 12
4基本要素设计 13
4.1标准色定义 13
4.2规格定义 13
5APP高保真界面设计 23
5.1LOGO设计 23
5.2闪屏设计 23
5.3主题页设计 23
5.4特色页面设计 23
5.5功能页面设计 23
5.6注册页面设计 23
5.7登录页面设计 19
5.8运动数据页面设计 20
6测试与实施 22
7结束语 23
7.1设计结论 23
7.2心得体会 23
参考文献 24
致 谢 26
1引言
1.1课题的提出
1.1.1课题的背景和意义
现代社会随着网络越来越快速的普及，便携的手机成为了人们生活中越来越不可缺少的一部分。
根据中国互联网网络信息中心（CNNIC）的统计数据表示，截止2015年6月，中国手机网民已达5.65亿，占全部网民的比例超过70%之多，且有继续增长的势头。
未来十年被定义为移动互联网的十年。
特别是在近期乌镇举行的世界互联网大会中，国家主席习近平亲自参加会议并接待多为网络巨头，更可以看出国家对此也是越来越进行了重视。
伴随着互联网的强劲发展和市场进入门槛的逐渐降低，智能手机也逐渐成为人们手中必不可少的一件科技产物。
早在2010年上半年，智能手机就凭借其强大的可扩展性和丰富的应用成为用户们关注度最高的手机类型，拥有传统手机前所未有的非凡的用户体验[1]。
当代的中国迅猛发展，互联网产业也在飞速增长，同时中国已经超越美国成为全球最大的智能手机市场，发展前景可观。
智能手机的出现打破了传统手机作为单一使用工具这一现象，既加强了手机的沟通性，集工作，娱乐，生活于一体，又带动了第三方应用程序即手机APP产业的兴起和繁荣[2]。
特别是在最近几年中，人们更加注重于网络社交，于是各类社交型软件冒出，品种，质量更是层次不齐，令人眼花缭乱。
1.1.2课题的现状及其发展
中国的移动互联网已经进入快速发展的大数据时代。
手机APP作为移动互联网高速发展之下应运而生的产物，以其的便捷性和时效性被广泛运用于当今生活[3]。
以小米公司为代表的一系列手机公司，使得智能手机对于国人来说越来越便宜，从而造成了最大化的智能手机使用人群。
而在此基础上，用户可以更加便捷的下载各种APP，打造专属于用户自己的移动生活[3]。
但纵观整个发展过程，手机APP虽然在数量上呈现出井喷增长的态势，但是其用户界面设计水平却缺参差不齐并存在很多问题和不足。
同时作为一种产业来讲，目前还没有成熟完善的设计体系和方法来指引手机APP的界面设计。
这次，我以目前最热门的社交类APP为研究主体，以APP的界面设计为研究基础，
第26页共26页
以情感化设计理论为研究线索，从而可以探索出更好的，最直接有效的原则和方法，做出最好的用户体验和交互效果，实现视觉与交互的完美统一，最终达到界面设计的要求，从而能够更好的促进当代手机APP界面设计的创作思路和发展。
从2008年苹果创建第一个网络手机应用商店至今，手机APP的出现仅有不到8
年的时间而已，国内外关于界面设计的研究内容还未完全成熟[6]。
国外关于界面设计的理论研究主要还是集中在网页前端。
除此之外，苹果的IOS系统和谷歌的Android系统作为目前全球两大智能手机操作系统，分别都提出了在各自操作系统中运行的手机APP应该遵守的设计规范，对界面设计具有一定的指导作用，但是值得关注的是，目前国内对于Android界面的设计并没有遵守其设计规范[8]。
在国内，对手机APP界面设计研究具有指导意义的理论书籍还没有出现。
国人对于整个界面设计还处于摸着石头过河的阶段[7]。
故而造成现在国内各类APP界面设计水平参差不齐，良莠不齐。
1.2本课题的主要工作及目的
了解了本课题的背景和意义后就需要明确本课题的主要工作和定位。
1.2.1主要工作
本课题的主要工作，需要从一个设计师的角度出发，并要结合用户对APP的情感变化，做出让用户感到最舒服的界面来[19]。
其中包括交互，视觉两大部分。
其中可以详细分为了解用户、网络调研，调查问卷，局部筛选、分析需求-使用习惯（功能的摆放和推送，以及使用习惯）、了解市场-竞品分析、功能导图、低保真原型图，以及视觉方面的色彩与排版[18]。
主要工作划分如下：
（1）网络调研，用户需求分析；
（2）进行3-5种竞品分析以及Redesign；
（3）延展辅助功能，增加用户黏性；
（4）制作低保真原型图，利用Axure实现简单交互；
（5）做出高保真视觉效果；
（6）实现页面与页面之间的跳转动效的联系。
1.2.2最终目的
本APP最终定位于能投入使用并具有较高用户黏性、稳定性以及精确性，旨在完
成对用户进行使用此款APP时可以实现最大化的舒适体验程度。
1.3本课题技术支持
想要做出让用户喜欢，而且能让用户长久的将其存留在手机里的APP，首先要很好的设计思维，在UI设计中有很多的的设计师认为UI设计师等同于互联网设计的，这一点我也是赞同的，所以我个人也觉得设计思维中最重要的就是互联网思维。
1.3.1互联网思维-标签思维
标签思维，现在想一想，你的产品的标签是什么？
如果没有，很不幸，这款产品离成功还很遥远{16}。
对于产品来说，有自己的品牌标示只是个开始，在用户的脑海中形成一个记忆关键词才叫成功。
1.3.2互联网思维-简约思维
简约不是从最近才兴起的一种新鲜事物，而早在Google和百度的产品设计里，就透出这种极简思维的魅力{15}。
少即是多，简约即时美，简约而不简单！
看看hao123网站是如何年收入20亿的。
少即是多，就是指单一功能能够在同类中做到更好的原则。
对于用户来说，太多的重点代表没有重点，反而会让核心功能不突出。
学会减法，对产品来说更为重要。
简约而不简单，简约即是美[9]。
1.3.3互联网思维-痛点思维
痛点是一切产品的基础，挖掘痛点不要相信用户的嘴，要相信用户的腿，不要靠感觉，而要靠数据，把解决痛点的方案用放大镜放大100倍，让用户由痛变痛快{17}。
痛点是一切产品的基础，不要相信用户的嘴，要相信用户的腿。
不要靠感觉，要靠数据[12]。
要想准确地找到用户痛点两种方式：
一种是使用数据分析方法，比如搜索引擎公司设置指标，开展搜索结果，然后获得数据结果，评估搜索结果，从而对用户需求做出判断；另外一种则是通过场景寻找用户痛点，开发新产品，团队往往会采用这种方法[10]。
通常，团队在做数据分析时，最重要的是要弄清楚我需要什么样的数据。
要怎样做到数据的详细和细致呢？
基本需要八个纵向的分析数据[18]。
1.固定的报表。
比如，定期反映用户使用量、报告产品成绩等。
2.即席查询。
支持灵活的查询分析，满足报表之外的信息需求。
例如，哪些用户使用了你的产品，同时还有哪些用户离开了你的产品。
3.多维分析。
从多个角度分析查询问题，如用户的留存率，哪些用户用什么样的方式接触到产品，产品所展示的诸多平台中哪一些是最重要的。
4.预警功能。
比如当用户的使用数对历史数据来说显然过高或者显然过低的时候，都应该出现这样的机制，以协助产品分析。
5.统计分析。
比如通过回归分析，肥西产品一些列的指数。
6.预测分析。
比如预测未来一段时间内产品的用户量是否会增加，是否要增加某些方面的投入。
7.数据挖掘建模分析。
基于用户的使用细分客户群，寻找每个客户群行为特征以及潜在需求，推送个性化的信息和服务。
8.优化分析。
这一点会比较复杂，不同产品需要不同数据来定义优化分析后的结果及要素。
2社交类APP设计需求分析
2.1社交类APP使用中的用户痛点
社交类APP已经随着手机和网络的普及逐渐在人们的生活中得到了广泛的应用，但是在如今的APP市场当中，此类APP良莠不齐，用户在使用此类APP的过程中经常会发出诸多抱怨，这些就是用户痛点，列如：
（1）用户界面过于简单粗暴，没有层次感；
（2）核心功能难以找到；
（3）安全性得不到保障；
（4）社交圈过于窄小，不能很好地进行交友等。
2.2系统功能需求
为增加用户黏性，提高用户体验度，更好的为用户进行服务，此社交类APP要提供以下功能：
（1）交友功能：
可以在众多人群中通过详细的描述定位来查找心仪的好友；
（2）显示功能：
当用户通过该APP设定今日的心情之后，用户界面会根据用户所选更改颜色来衬托用户的心情和情感；
（3）设置功能：
用户可以根据自己的需要来设定需要的功能；
（4）安全功能：
为用户提供一定程度上的安全选项等。
2.3系统性能需求
由于外界环境以及根据摩尔定律，该APP应该具有时效性，因为仅仅满足基本功能并不能做到提升用户好感度和体验度。
因此该APP应具有如下性能：
（1）精确性：
能根据用户所提供的大量数据，从中筛选出真正重要的信息，具有较强的抗干扰能力；
（2）稳定性：
APP能功能完善，不必要短时间就进行维护更新；
（3）成本低：
在保证APP所有功能齐全并优良下使成本达到最小；
（4）便捷性：
操作简单等。
3社交类APP设计详细设计
3.1社交类APP用户研究
3.1.1用户信息
（1）65.2％的用户居住一二线城市，主要定位在一线城市；
（2）用户年龄在20~30岁之间，以工作，社会人员居多；
（3）工资收入中等，在3000~5000之间。
3.1.2核心痛点
（1）用户交友面积小，圈子难以扩展；
（2）个性化需求得不到解决；
（3）用户界面单一，不丰富；
（4）功能没有做到浅而窄，有些功能找不到；
（5）对于目的性强的用户，不能给出一套系统的引导体系等。
3.1.3机会痛点
（1）个性化推送的内容和时间问题；
（2）清理东西时会不小心清理掉以存储的APP推送的视频资料等；
（3）对于新手用户指引不够明确，使用不方便；
（4）方便用户查找过于定向仔细的查找等。
3.1.4角色设计
（1）崔貌洁
33岁，天津，体育老师
使用APP主要目的：
扩大圈子每天使用时间：
20分钟
“作为一名老师使用，可以很好的与学生们打成一片”
（2）康杰
21岁，吕梁，学生
使用APP主要目的：
和同学一起玩每天使用时间：
30分钟
“在恋爱的季节，记录每一天的日出时日落，奔跑在花样年华里”
（3）贾迪
25岁，上班族
每天使用时间：
3分钟
“让我去交朋友炼？
！
还是好好想想怎么能涨工资的好！
”
3.2竞品分析
3.2.1竞品分析对比表
竞品分析在制作APP过程中是非常重要的，如表3.1所示
表3.1 竞品分析对比表
性能
竞品
微信
Linkedln
Between
用户定位
全年龄段，全体社会成员
中高层白领精英人士
情侣间专属
主要功能
1、在聊天中，可以发送文字、语
1、拓展职场人脉；
1、聊天：
随时与对
音、表情、图片、视频等；
2、浏览业界资讯；
方分享生活点滴。
提
2、高质量语音和视频通话，随时
3、获取数据洞察；
供安全，私密的聊天
和朋友面对面；
4、覆盖全球超过4亿
功能，让用户能及时
3、朋友圈，记录你和朋友们的生
用户；
传送可爱的贴图；
活；
5、轻松搜索会员、职
2、回忆功能：
将甜
4、在公众号，找到服务和资讯，
位、公司；
蜜合照，贴心的语音
与世界紧紧相连；
6、关注并了解公司信
留言留在APP上储存
5、微信钱包，支付、转账、多项
息等。
并分享。
轻松建立属
服务，让生活更简单；
于自己的二人世界，
6、微信游戏，和朋友们在游戏中
还可以随时回忆每一
互动；
个美好而甜蜜的时光
7、扫一扫，读码、识图，扫出更
大的世界；
8、摇一摇，找到朋友、歌曲，还
可以参与电视节目互动；
9、微信运动，支持接入Apple
Watch及iPhone健康数据，可通
过“WeRun-WeChat”公众号与好
友一较高下等。
交互
1、交互较为便捷
2、按键与操作符合人的操作习惯
3、首次使用有交互教学提示
1、APP随时为用户推荐人脉圈中在赵职位及公司的同事、校友信息用人脉开启无限的机会
1、隐私设定：
建立好记的密码锁让甜蜜
，的时光永远不外流；
；2、自定背景：
选择最喜欢的合照当首页当用户打开APP首页
2、优化人脉关系算法，
。
，
为用户提供更精确有效的人脉推荐，快速拓展职场人脉；
3、用户的领英档案一件申请工作，随时随地地抓住好机会；
4、阅读优化，提升文章加载速度，实现一键分享文章好句，方便阅读热门文章，节约用户
大量时间等。
就可以看到彼此。
视觉
1、界面扁平化处理，响应速度快
2、界面清爽，无广告
1、界面扁平化处理，响应速度快
2、界面清爽，无广告
1、界面扁平化处理，响应速度快
2、界面清爽，无广
告
运营
利用成功案例加以督促
及增加用户粘性
借鉴
优点：
1、自主定制
2、资源充足，专业性高。
表现为一些理论的文章以及精确的数据推荐
缺点：
1、某些核心功能体现不明显，用户想要找到非常费事，费劲，费时间。
2、“页面跳转”大部分没有声音提示，有声音提示的页面又缺少
“跳过”功能；缺少动作预览。
3、“设置”的每项选项的视觉引导较弱，不利于用户使用相应的
APP的功能，增加用户使用效率；缺少筛选功能。
优点：
1、单页面、单模块的内容与排布合理，提供的信息详尽、专业，符合用户需求；
2、核心任务流程——
“初步了解计划>详尽了解计划>参与>指导”的用户体验良好。
各阶段，能较好的把控用户需求，给出相应的设计
3、信息架构比较简单，降低用户的学习成本。
优点：
1、注重社区运营，重视社交的作用
2、「进行交流时」的交互方式符合个性化的需求。
缺点：
在「约会计划详情页的“事件预览”模块缺少事件的名称和重
o量介绍；在「事件进行页」的页面，不同内容的优先级排布略有偏颇——强化“上一个事件名称”，而弱化“下一个事件的名称”。
这一点就和用户的使用情境不匹配，在实际使用场景中，用户更希望在休息期间查看下一个事件标准并做好准备，
而非上一个事件。
」
，
3.2.2总结、APP总体设计
经过对比三款同类型的APP，结合其优点，借鉴其缺点，根据自身APP的特点，
做出有自己特色的专属用户自身体现其情感化的私人APP。
借鉴微信的交互，保障本
APP中的功能完善以及用户操作的流畅性；借鉴Linkedln中的专业性，严谨性，对用户的一切负责；借鉴Between中对用户的隐私的保障性，只有如此，才可以提高用户好感度，增加用户黏性。
3.3APP低保真原型设计
3.3.1APP一级页面
图3.1图标点击界面
图3.2闪屏页
闪屏页对于APP是十分重要的，如图3.2。
它是一款APP对于用户的第一眼印象。
如果闪屏页做的非常丰富，可以让用户有眼前一亮的感觉，有继续使用下去的欲望，这对于一款APP是非常重要的。
而闪屏页也要具备以下几点特性：
（1）字数一定要少，不要超过20字；
（2）尽量简单明了，起到指引用户的作用；
（3）轮播页面最后一页，一定要有一个指向按钮；
（4）轮播显示当前位置，数量控制3到5张；
（5）遮罩加图标，关键让用户明白是什么意思；加载图标不要特别的突兀。
图3.3一级页面
一级页面一共有六个界面，分别为信息页面、发现-关注页面、发现-推荐页面、发现-附近页面、日常页面、个性化页面，如图3.3。
具体内容分别为：
信息页面将用户所接受到的信息分别显示出来，特别注意的是有一个专门显示心情的可视化数据，这是一个亮点；
发现页面分为：
关注、推荐和附近。
分别点开会推送不同的信息；
日常页面，作为一个计划页面，更加的人性化，可以让用户为自己制定一个详尽
的计划；
个性化页面是用户中心，用户可以在这个页面进行
设置和管理。
3.3.2APP二级页面
图3
升级会员 