手机APP设计毕业论文

毕业论文

手机APP设计

摘 要

手机移动设备不断普及，对手机设备的软件需求越来越多，界面视觉效果良好，且具有良好体验的应用留在自己的手机上长期使用，因此，手机ui设计在当今移动互联网迅猛发展的时代中显现的尤为重要。我的作品是一款拥有时尚前卫的手机社交APP设计,把一些潮流的动感元素融入，转化为有形的，可以看到的平面艺术中去，以平面化的表现方式进行美的表现，带给人以此时无声胜有声的更高境界。时尚的红色带着少女的朝气，视觉艺术的转化基础是人类基本的心灵感受，它使人们具有相似的或共同的审美体验。界面在表现形式中也不同于常见的平面化界面，以平面设计中"立体化"的视觉表现形式为切入点进行创新，此款手机APP产品设计主题突出、明确，整体色彩虽运用单色系列却不显现单调，界面风格整体统一，是一款人们值得拥有社交类APP，给予现在年轻人不同的社交体验。作品独特、具有视觉冲击感，创意设计灵魂体现在每一个界面，如：柔美的线条，构成少女美妙的身姿，仿佛在跟随着音乐起舞，在交互操作中会带给人意想不到的惊喜体验；细节决定一切，人性化的细节设计如：定位时间、地点以及日期、精确到每一个像素等细节呈现着令人赏心悦目的视觉效果。我的APP旅游产品设计将以实用和独特的想法呈现给用户便捷、新颖、贴心的交互体验。

关键词：创意设计，地点定位，时间定位，精细分类

目录

摘 要 ....................................................................................................... II

1项目概述 ................................................................................................. 1

1.1项目目的和内容 ........................................................................... 1

1.2项目分析 ....................................................................................... 1

1.2.1行业背景分析 .................................................................... 1

1.2.2典型用户分析 .................................................................... 2

1.2.3同类型APP分析 ................................................................ 2

1.3基本要素 ....................................................................................... 3

1.3.1设计风格定义 ................................. 错误！未定义书签。

1.3.2标准色定义 ........................................................................ 3

1.3.3规格定义 ......................................... 错误！未定义书签。

2概要设计 ................................................................................................. 4

2.1创意来源 ....................................................................................... 4

2.2产品的风格定义 ........................................................................... 4

2.3手机APP流程图 ........................................................................... 4

3详细设计 ................................................................................................. 6

3.1开场界面 ....................................................................................... 6

3.1.1原型图 ................................................................................ 6

3.1.2效果图 ................................................................................ 7

3.2登录界面 ....................................................................................... 6

3.2.1原型图 ................................................................................ 6

3.2.2效果图 ................................................................................ 6

3.3首页界面 ....................................................................................... 7

3.3.1原型图 ................................................................................ 7

3.3.2效果图 ................................................................................ 7

3.4注册界面 ....................................................................................... 8

3.4.1原型图 ................................................................................ 8

3.4.2效果图 ................................................................................ 8

3.5个人中心界面 ............................................................................... 9

3.5.1原型图 ................................................................................ 9

3.6.2效果图 ................................................................................ 9

3.6购物界面1 ................................................................................ 10

3.6.1原型图 .............................................................................. 10

3.6.2效果图 .............................................................................. 10

3.7 购物界面2 ................................................................................. 11

3.7.1原型图 .............................................................................. 11

3.7.2效果图 .............................................................................. 11

3.8分享界面 ..................................................................................... 12

3.8.1原型图 .............................................................................. 20

3.8.2效果图 .............................................................................. 21

3.9设置界面 ..................................................................................... 22

3.9.1原型图 .............................................................................. 22

3.9.2效果图 .............................................................................. 23

4设计中所遇困难和解决方案 ............................................................... 14

5设计体会 ............................................................................................... 15

致谢 ........................................................................................................... 16

1项目概述

1.1项目目的和内容

手机UI设计 ：是手机软件的人机交互、操作逻辑、界面美观的整体设计。手机移动设备不断普及，对手机设备的软件需求越来越多，界面视觉效果良好，且具有良好体验的应用留在自己的手机上长期使用，因此，手机ui设计在当今移动互联网迅猛发展的时代中显现的尤为重要。

我的作品是一款拥有时尚前卫的手机社交APP设计，主要针对于15-30岁时尚简约、热爱旅游与生活、追寻高品质生活的人群。此款手机APP设计主题突出、明确，整体色彩虽运用热烈的鲜红却不显现单调，界面风格整体统一，是用平面化的表现方式为现实生活中忙碌的人们带来一些不一样的清新热烈的体验。我的作品具有高的体验效果，创意设计把用户所需要的体现在每一个界面，如：精确的分类，使用户能找到自己所喜欢的分类，在交互操作中会带给人意想不到的惊喜体验；细节决定一切，人性化的细节设计如：时间定位、地点导航以及日历指导、并且精确到每个像素的细节呈现着令人赏心悦目的视觉效果。我的APP界面设计将以实用和独特的想法呈现给用户便捷、愉悦、贴心的交互体验。

作品内容包括有：首页（1）、、登录（1张）、注册（1张）、设置（1张）、分享（1张）、个人中心（1张）、购物分享（1张）、购物（1张）、开场页（1张）

1.2项目分析

1.2.1行业背景分析

世界旅游业的快速发展已经成为现代世界经济的一大特征。在过去的16年里，全球旅游业年平均增长率高达9%，成为世界第一大产业。根据世界旅游组织公布的数字，2002年全球旅游人次超过7亿，较2001年增长了3.1%。在各种旅游形式中，休闲度假开始成为旅游的一种主要形式，相关的旅游产品已逐渐成为当今世界旅游产业中档次最高的产品，并引领着当今世界旅游业的发展。 在今后相当长的一段时期内，世界性的旅游消费需求将保持持续增长的势头。到2020年，全球仅国际旅游人数将达到16亿人次，国际旅游收入将达2万亿美元。21世纪既是旅游业发展的“黄金时代”，更是“亚太世纪”。

我国旅游业发展迅速，现在已成为中国第三产业中最具活力的新兴产业、国

民经济新的增长点，在第三产业优先发展序列中位居第一，并已被各地列为当地经济发展的支柱行业、先导产业和龙头行业。

再从移动端社交App下载量排行中可以看到近期，近期关于社交App软件应用的一些趋势，微信、手机QQ、新浪微博、QQ空间仍然稳稳的位居了前四位，其中微信的周下载量为7万次，是新浪微博下载量的3倍多，手机QQ的下载量为58万次，是新浪微博的2倍多。因而腾讯在移动端社交App软件将会稳稳的占据在前几位，而且与其他社交软件的差距将会进一步拉大。

YY语音、陌陌等移动社交App软件在周下载量的排名，与总下载量的排名相比有所提升，这两款软件近期的下载人气呈现上升趋势。

从移动端社交App用户好评率曲线图来看，社交App软件的用户好评率出现参次不齐的状况，总体评价状况并不佳，在腾讯的强大实力以及QQ天下里，YY语音能借助语音服务而上市，并且在移动端社交App排行榜中占据一席之地，这就说明移动端用户对社交App软件应用的一些需求并没有被满足，未来还有比较大的发展前景。

1.2.2典型用户分析

用户人群：针对于16-30岁时尚潮流、热爱旅游、爱好交友，追寻品质生活的人群。

1.2.3同类型APP分析

相比同类型APP，我的既有缺点也有也他自身的亮点之处。缺点是，他刚刚被开发，并没有被很多人熟知，在知名度上就有了欠缺，而且，他并有有先有APP所具有的酒店，飞机一体化，APP解决的缺陷。这可能会造成后期流量的流失，对于这个缺点，后期开发时也会进行修正，以便使用户使用时更贴心。

有点是，他具有现下APP所没有的私人订制功能和小景点，例如漫展、逛一些小型景点等，私人订制可以为用户贴心打造一个合适用户，并且可以达到90%用户相当满意的程度，内容涵盖详尽，包含用户出行所想不到的一些贴心服务，使用户使用更便捷更贴心，至于小景点功能，就是可以发起一个组织，我们后台可以为用户寻找志趣相投的伙伴，去出行漫展等其他活动等，这也为二次元的小伙伴的活动提供了一个平台。虽然有美中不足之处，但是和同类型相比，我的APP还是存在他本身的优势。

1.3基本要素设计

1.3.1设计风格定义

在Photoshop CS5中处理图片的色阶和饱和度，做主要的工作；辅助线的规划，智能参考线的辅助，在软件中做出效果图，之前则是需要Axure的辅助做好原型图等。

1.3.2标准色定义

主要颜色：

# F44B50

#FFFFFF # F6C930 1.3.3规格定义

（1）设计尺寸：640px 1136px;

（2）最佳显示分辨率：72ppi;

（3）色彩模式：RGB;

# 140808

2概要设计

2.1创意来源

在万千人中遇到你，得之则幸，错过就是一种无法掩饰的悲哀吧。这也是我的的创意来源，人生有无数个过客，但是谁又知道，那些过客中是否有你的知己好友，还是你的蓝颜，亦或是一生不可或缺的哪一位呢？在当下这个来也匆匆，去也匆匆的时代，人们很少能交到除了工作圈，同学圈之外的朋友，就如我一样，每天忙忙碌碌，想找到志同道合的好姐妹，但是去哪里找？想看漫展没人陪，想去喜欢的地点没朋友结队，想去唱歌，都在忙„„这样的情况大多数人都拥有过吧，外表拒人千里，内心其实热烈如火，这也是为什么这次选择使用娇艳而不张扬的西瓜红的原因，红色不仅能带来与众不同的清新和时尚感，也能给人带来心理上的愉悦，这也正是现下人们所或缺的一种热情吧。

设计主题比较明确后，由此联想便开始展开。创意是作品的灵魂，没有灵魂的创意不可能成为一个好的创意，我的灵感来自与当下人际交往的淡漠，以平面化的创意界面来为人们打开一个新的世界这也是我所希望看到的，我非常希望他能带给用户愉悦新鲜的体验效果，带给他们更多人性化的设计，感受到来自所有用户的爱意。

在人际交往中，难免会产生一些不愉快的事情，甚至产生一些矛盾冲突。这时候我们就要学会宽容别人，不斤斤计较，正所谓退一步海阔天空。人不犯我，我不犯人。人先犯我，礼让三分。不要因为一些小事而陷入人际纠纷，这样我们会浪费很多时间，同时也变得很自私自利变得很渺小。大家彼此喜欢和对方交往，并能从交往的过程中有所收获，交往就得良性循环的进行下去。如果交往变成了负担，变成了没有意义的纯粹是浪费时间的活动，那这样的交往不会长久。感情愉悦往往作用于交往的前期。

交往的过程中，彼此的价值观相似，不仅可以得到支持和共鸣，而且可以预测对方的行为倾向，这样，双方就比较容易适应。价值观相似到了交往的后期起很大的作用，很多人因为价值观的分歧而最后分道扬镳。

以此，界面以平面设计中“和谐”、“对比”、“平衡”、表现形式为切入点,突破平淡无趣的表现形式,是平面变的更有节奏感和空间延展,和传统单一单调的设计有所不同，构建出更具表现力的新视觉语言,增强了视觉冲击力；在平

面化转化基础上增添打破传统的设计理念使用户可以得到更好的体验。

好的创意设计充满灵性与美感,能够表达出思想，拥有地点定位和时间定位的功能也极具独特创新，让体验者产生美妙的愉悦感。

界面根据整体风格进行定位设计，其中的线条柔美的女性形像呈现给人以简约，有趣的视觉效果，并且LOGO也有采用折纸的效果，线条的勾勒出的每一笔都充满了动感，人性化的设置不用设定，也可为每位用户定位你所在的位置时间，给人以不同寻常的独到的设计。

2.2 产品的风格定义

主要风格：时尚、简约的表现。

2.4手机APP流程图

3设计表现说明

3.1开场界面

3.1.1原型图

3.1.2效果图

3.2登录界面

3.2.1.原型图

3.2.2效果图

3.3首页界面

3.3.1.原型图

3.3.2.效果图

3.4注册界面

3.4.1原型图

3.4.2效果图

3.5个人中心界面

3.5.1原型图

3.5.2效果图

3.6购物界面1

3.6.1原型图