-
第一章绪论
1.1
项目研究背景
传统互联网向移动互联网的迁移和演变，
智能手机时代的到来是本项
目研究的主要背景。
传统互联网发展至今，
理论研究和技术实践都日趋成熟，
却开始无法
满足人们希望在移动过程中快速便捷地获取互联网信息和服务的需
求。
宽带无线技术和移动终端技术的快速发展使得移动互联网应运而
生。最初移动互
联网是对传统互联网的简单复制、补充和延伸，发展
至今已成为互联网未来的发展方向，
渗透到社会生活的方面面，
并带
来了传
播领域的变革。根据中国互联网网络信息中心（
CNNIC
）的统计数据显示，截止
2013
年
6
月，中国手机网民数已达
4.64
亿，占全部网民的比例超过
70%
之
多，且保持着稳定增长的趋势。未
来十年被定义为移动互联网的十年。
< br>
伴随着移动互联网的强劲发展市场进入门槛的逐渐降低，
智能手机也
日益成为主流的手机类型。
早在
< br> 2010
年上半年，
智能手机凭借其强
大的可扩展性和丰富的应用成为用户关注度最高的手机类型。
智能手
机的出现颠覆了传统手机作为单一使用工具的现象，
既丰富了手机的
沟通属性，集工作、娱乐、生活于一体，又带动了第三方应用程序即
手机
APP
产业的兴起和繁荣。
１
.2
研究的目的与意义
随着移动通信和互联网技术迅猛的发展与结合以及智能手机的
普及，使移动
App
得到了广泛的关注。用户界面（
User Interface
，
UI
）是人与手机进行交流互动的载体和平台。智能手机
APP
的
UI
设
计的目的
是使人与手机之间信息交换方式更科学、
更合理、
更为人性
化。同时，保证使得人与手机之间的信息传递更加便捷、准确可靠。
智能手机上的移动社交软件是典型的代表。
UI
设计要符合人机
交互、操作逻辑、
界面美观和人的使用
习惯。手机
UI
设计是产品品
质体
现的重要因素，
好的
UI
设计不仅
在操作上应简洁易懂和舒适自
由，
也应充分体现软件的特点及定
位。
界面设计是融合了认知心理学、
设计学、
< br>语言学等不同学科参与的系统工程。
手机人机交互设计它的
设计体验直接影响着用户的产品选择和消费观念，
甚至影响手机文化。
让我们深有体会的是，只有好的
UI
设计，才能更好的
适应当今的手
机技术、消费心理、用户体验需求。
本项目的研究将会从手机用户的操作习惯、审美特征、心理、视
觉感受、功
能期望、消费需求、情感体会、文化传播等方面入手，探
究用户需求与体验是如何影响手
机
UI
设计的，从而研究如何使用户
在
与手机的人机对话中创造最为和谐的关系，
创造最大程度的人性化
设计。进而探索更为完整的用户界面设计原则、发展趋势和方向，指
导设计师们设计出
更便捷、
更舒适、
更流畅、
更美观的人
机交互界面。
对社交软件
APP
的
UI
设计提出相关见解，
提供相应的参考设
计意见。
1.3
研究方法
本项目研究的内容是针对当前的智能手机各种社交软件的
App
的用户界面进行调查研究，比较分析。站在界面设计者的角度，分析
简单的心理学（
如色彩）
，社会流行因素，不同人群的界面风格等。
站在用户的
角度，
以对用户体验感受的调查研究，
项目研究小组亲身
体验等方式，来研究各种移动社交软件的
UI
设计的特点。
项目从以下几个方面去研究智能手机
UI
的主要问题：
①
影响用户对
APP
体验的因素
②
制约手机
APP
的界面设计的客观条件
③
用户行为对
APP
界面的影响
从用户的行为习惯，例如左手习惯、右手习惯
④
手机本身条件对
APP
UI
的影响
从手机的屏幕大小、颜色
以及材料的质感去考虑智能手机
UI
的个性化设计因素。
用户使用同类软件或其他软件的熟悉程度。用户清楚易懂为目标。<
/p>
第二章社交类ＡＰＰ发展现状及发展趋势
2.1
国外社交类
APP
发展现状
及趋势
2008
年苹果公司创建的
第一个在线手机应用商店，手机
APP
的历史
< br>仅仅才七年之久，
国内外关于其界面设计的研究内容还未完全熟。
国
外关于界面设计的理论研究主要集中在
web
端。软件界面设计的鼻
祖
Alan
Cooper
的著作《
About
Face 3: The Essentials of
Interaction
Design
》针对个人和商务软件、
web
应用、手持设备
等产品和系统的设计，全面系统地讲述了设计过程、原理和方法
，成
为业界规范；
Jenifer Tidwell
《
Designing Interfaces
》给出了
很多界面设计中常用的模式，每个模式都包含着切实可行的设建议，
被称为现代视觉和交互设计的完整教程。除此之外，苹果的
i
OS
系
统和谷歌的
Android
系统作为目前全球两大主流的智能手机操作系
统，分别提出了在各自
操作系统中运行的手机
APP
应遵守的设计规
范《
i OS
Human InterfaceGuidelines
》
《<
/p>
Android Design
》
，对界
面
设计具有一定的指导作用。
Josh
Clark
《
Tapworthy: Designing
Great i Phone
Apps
》以基于
i
OS
系统的
i Pone
手机
APP
为核
< br>心，
呈现了大量真实应用的设计和思考过程，
包含丰富的
i
Phone
界
< br>面设计知识，具有参考价值。在国内，对手机应用界面设计研究具有
指导意义的理
论书籍还未出现。周陟的《
UI
进化论——移动设备人
机交互界面设计》
探讨了交互设计和界面设计的基本概念、
设计规范
和工作流程，其中的
GUI
视觉设计部分结合优秀的设计案例给出了
细致到位地实践指导。
２．
2
社交类ＡＰＰ
分类及特点
2.2.1
社交网络与社交媒体
先将社交类
APP
分为两类，
社交网络与社交媒体，
下面列出二者定义。
社交网络
即社交网络服务，
源自英文
SNS
（<
/p>
Social
Network
Ser
vice
）
的翻译，
中文直译为社会性
网络服务或社会化网络服务，
意译为社交
网络服务。社交媒体（
Social Media)
指互联网上基于用户关系的内
容生产与交换平台。社交媒体是人们彼此之间用来分
享意见、
见解、
经验和观点的工具和平台，
现阶段主要包括社交网站、
微博、微信、博客、论坛、播客等等。社交网
络强调人与人之间的关
系，
是社交关系在虚拟的互联网上的体现
，
大部分即时通讯软件实现
了社交网络的功能，即好友列表、对
话与消息。通常来说，先有线下
的社交关系，后有线上的好友关系。典型的
APP
有
QQ
，微信等。社
交媒体强调内容发布，每一个个体都是内容的发
布者，通过内容关注从而建立人与人之间的关系。社交媒体中，社交
关系的建
立有两条路径，
一条是现实好友间的互相关注，
另一条是通
过搜索或是随机关注。典型的应用有微博，豆瓣等。
层级比较从二者的定义与属性来看，
社交网络的层级要高于社交媒体，
因为社交网络属于强社交关系，
可以向社交媒体迁移，
只需基于好友
关系建立内容发布平台，比如
QQ
的
QQ
空间，微信的朋友圈。由于人
的社会属性，
交流与社交的需求永远存在，
应用
内的发布平台一旦建
立，
用户自发就会在平台上发布状态，
好友之间很自然的就会在平台
上形成互动。而社交媒体想向社交网络
方向发展，就会困难很多。社
交媒体上的人际关系都是弱关系，人与人之间的
交流通过评论、私信进行，
不易形成连续交流，
软件的功能也不是为
对话设计的，所以通过社交媒体，陌生人很难成为熟人。
2.2.2
衡量指标
/
分类标准
/
维度划分这里选取几个维
度，作为对社交
APP
分析的维度。
1
、实名与匿名
社交
APP
注册时，
使用何种方式
为自己命名，
体现了
APP
设定的隐私
保护策略、功能定位、社交关系强弱等因素。实名制：人人网，腾讯
朋友。实名制的目的是让社交关系更加真实，可信。昵称
/
实名：微
博，微信。大部分普通人倾向于昵称命名，一方面保护隐私，另一方
面彰
显个性。在微博中，一些名人会采用实名认
证，确保微博是本人，容
易被搜索到，增加人气。昵称：陌陌，抱抱。以陌生人社交作定
位的
陌陌，一定以昵称取名。因为陌陌之前的名声，用户一定不想
被熟人发现。
匿名：
微密。
一些
APP
提供了匿名消息发布和聊天功能，
有时是熟人之间，有时是陌生人之间。用户直接以化名命名，或者直
接没有名字。
2
、开放与封闭
根据动态
/
发布内容的可见性进行
分类。高可见性（所有人可见）
：微博，人人，陌
陌。弱社交关系的社交媒体，用户一般不会发布隐私消息，微博和人
人提供热门推荐，陌陌基于地理位置查看，都是高可见性的体现。当
然
，
产品也提供可见性选项，
保护用户隐私，
比如微博的可见性选项，
提供好友圈
/
指定的人
/
自己可见等等。中可见性（访问可见
/
好友可
见）
：人人个人
主页
/QQ
空间。这类产品提供不同的可见性选项，用
户可以自己设置。低可见性（共同好友可见）
：微信朋友圈。微信朋
友圈比
QQ
空间更为封闭，
在
QQ
空间中，
所有人对自己
好友的评论都
可见，而在微信中，只有共同好友的评论才可见。
3
、社交关系的建立方式
这里列出建立人与人之间联系的方式基于好友与共同好友，
基于手机
通讯录，基于地理位置，基于共同爱好，基于搜索
4
、好友关系层次
< br>陌生人
-
单项关注
-
互相关注，悄悄关注，好友陌生人
-
没有任何关系
的两个人单项关注
-
一方关注另一方互
相关注
-
双方互相关注悄悄注
提供非公
开关注功能好友
-
双方互为好友，任意一方解除好友关系。
好友关系即结束
。
２．３主流社交类ＡＰＰ产品对比
本项目研究的几款典型
APP
1
、微信。核心功能：通讯录，对话，群聊，朋友圈，公众号。其他
功
能：摇一摇，附近的人，漂流瓶微信以即时通信功能为核心，逐渐
发展成为社交服务平台
，朋友圈
-
社交媒体，公众号
-
阅读与服务，微
信支付
-
移动支付结算，多种功能集合在一个产品中，紧紧围绕人与
人进行。
2
、微博。
核心功能：发布
消息，浏览消息，评论，
私信。
其他功能：
热门微博，
搜索新浪微博自
2010
年发布之后，
迅速得到互联网关注，
用户数量爆炸式增长。微
博以传播信息快，范围广，即时性等特点，
受到广泛关注。
但是
碎片化浏览不利于深度挖掘消息背后的内容，
这
也是微博的缺点
。
3
、陌陌。核心功能：结识附近的
人，即时聊天，动态，联系人。其
他功能：聊天室，游戏，同城服务，附近活动陌陌以陌
生人交友为产
品定位，产品上线之后因“约
X
< br>”而成为热门产品，之后推出
LBS
服
< br>务，将服务、交友、社区加入产品，带来正向循环。
4
、
人人网。
核心功能：
校园交友，
发布动态，
浏览动态。
其他功能：
热门分享，大学社团人人网定位为校园社交产品，曾经一度风行，近
几年因为一系列原因，逐渐没落。网上有很多分析，在此略过。
。
5
、百度
贴吧。核心功能聚集大批同好网友，展示自我风采，结交知
音，搭建别具特色的“兴趣主
题“互动平台。其他功能：明星贴吧，
直播及视频直播，
实现多
吧交叉实时互动等等。
贴吧的使命是让志同
道合的人相聚。
贴吧的组建依靠搜索引擎关键词，
不论是大众话题还
是小众话题，都能精准地聚集大批同好网友，定位较为广泛。
。核心功能：好友列表，聊天，群聊，
QQ
空间，
QQ
公众号。其
他
功能：
QQ
邮箱，
附近的人等等，
QQ
是中国时间最长的社交类软件，
APP
是由传统互联网迁移过来的，而且
QQ
是中国用户量最大的社交
类
APP
面向
对象广泛
7.
领英。核心功能：向全
球职场人士提供沟通平台，并协助他们事半
功倍，发挥所长，是全球最大的职业社交网站
。
8.
易信。核心功能：易信是由网
易和中国电信联合开发的，一款能够
真正免费聊天的即时通讯软件，独特的免费电话。<
/p>
9.
钉钉。
核
心功能
：
企业沟通功能，
视频电话会议
，
高清稳定的画面，
随时随地高效沟通，支持
< br>3
到
5
人同时加入。
第三章
ＡＰＰ界面
设计与用户体验设计的理论概述
?
?
３
.
１ＡＰＰ界面设计的基本概述
3.1.1
ＡＰＰ的出现及分类
在这个充满各方企业和
APP
团队开发者的
移动互联网时代里，各
类
APP
占据了
各大应用市场，
要想赢得用户的下载和
APP
< br>软件在用户
移动客户端的粘度还需要企业和
APP
开发者更加努力，
开发出体验更
佳，
更符合用户需求的
APP
产品，
成都
APP
开发在整个
APP
开发行业
里仍处于领先水平。
成都
APP
开发平台已经帮助多家企业定制自己的
APP
应用平台。
社交类
APP
目前社交类
APP
应用也成为各个公司极度看重的移动互联网
平台，
从米聊到微信，陌陌，到后来的电信联合网易开发的易信，各大巨头
纷纷推出各自的移动社交平台，
社交类
APP
应用可谓强敌不断，
小马
哥推出的微信，
目前占据行业领先地位，
其他社交类
APP
中抢占行业
领先地位还需要后续更多投入和观察，
关于这几个社交
APP
应用，
小
编之前已写有文章专门分析。在这里就不多说社交类
APP
了。
地图导航类
APP
< br>地图导航类
APP
也是近两个月以来我们看重的焦点，最
早从高德
地图和百度导航推出免费产品争夺行业入口资源，而现在谷歌地图，
SOSO
全景地图，搜狗地图也纷纷推出移动互联网客户端
APP
产品，
最近
SOSO<
/p>
地图在余姚抗灾中首次利用移动地图参与救灾而获得了外
界更多的
关注，而高德再次推出人工导航免费也吸引了不少的用户。
生活类
APP
生活类
APP
软件去哪儿旅行，百度旅游，大众点评等，满足
用户
吃喝玩乐不同方面的需求，而百姓网，赶集网、
58
同城各类分类应
用也在移动互联网发力，
纷纷
抢占用户资源，
生活类
APP
要想脱颖
而
出必须符合用户的需求，推出软件独有的创意才能更好的留住用户，
< br>获得长远的利益。
通讯类
APP
通讯类
APP
，手机
QQ
，飞信，
QQ
通讯录，
Y
Y
语音等想必大家已
经非常了解了，这里就做对比分析了。
影音类
APP
影音类
APP
，作为搜索类霸主的百度
旗下百度影音上线时间不到
半年便获得了千万的下载量，
其他<
/p>
APP
与其争夺影音类
APP
王者地位
也待市场考验。
图书类
APP
图书类
APP
，
既腾讯推出
QQ
阅读，
各大出版社也争相推出属于自
己的出版社
APP
，而对于一贯处于传统图书
行业，移动应用
App
平台
势将给企业
带来更大的冲击，
当当网，
亚马逊等传统图书商也定制了
图书类
APP
应用，
而懒人听书，
91
熊猫看书等
APP<
/p>
深得用户的喜爱。
3.1.2
界面及界面设计
界面是人与物体互动的媒介，
换句话说，
界面就
是设计师赋予物体的
新面孔。
界面设计是人与机器之间传递和交换信息的媒介，
FaceUI
称
包括硬件界面和软件界面，是计算机科学与心理学、设计艺术
学、认
知科学和人机工程学的交叉研究领域。
近年来，
随着信息技术与计算
机技术的迅速发展，
网络技
术的突飞猛进，
人机界面设计和开发已成
为国际计算机界和设计
界最为活跃的研究方向。
1.
以功能实现为基础的界面设计。
交互设计界面最基本的性能是
具有功能性与使用性，通过界面设计，让用户明白功能操作，并
将作品
本身的信息更加顺畅的传递给用者，即用户，是功能界面
存在的基础与价值，但由于用户
的知识水平和文化背景具有差异
性，因此界面应以更国际化，客观化的体现作品本身的信
息。
2.
以情感表达为重点的界面设
计。
通过界面给用户一种情感传递，
是设计的真正艺术魅力所在
。用户在接触作品时的感受，使人产
生感情共鸣，利用情感表达，切实的反应出作品与用
户之间的情
感关系。
当然，
情感的信息
传递存在着确定性与不确定性的统一。
因此，我们更加强调的是用户在接触作品时的情感
体验。
3.
以环境因素为前提的界面
设计。
任何一部互动设计作品都无法
脱离环境而存在，
周边环境对设计作品的信息传递有着特殊的影
响。包括作品自身的历史、
文化、科技等诸多方面的特点，因此
营造界面的环境氛围是不可忽视的一项设计工作，<
/p>
这和我们看电
影时需要关灯是一个道理。
３
.
２ＡＰ
Ｐ界面的构成规范及设计原则
3.2.1iOS
篇
界面尺寸
设备
iPhone6 plus
iPhone6
iPhone5/5s/5c
iPhone4/4s
iPad1/2
iPad mini
分辨率
750×1334
px
640×1136 px
640×960 px
1024×768 px
1024×768 px
状态栏高度
导航栏高度
标签栏高度
60px
40px
40px
40px
40px
20px
20px
132px
88px
88px
88px
88px
44px
44px
147px
98px
98px
98px
98px
49px
49px
1242×2208 px
iPad3/4/Air/Air2/mini2
2048×1536 px
图标尺寸
程序应
App Store
用
工具栏
s
potlig
主屏幕
标签栏
和导航
ht
搜索
栏
设备
iPhone6 plus
iPhone6
iPhone5/5s/5c
iPhone4/4s
1024*1024
180*180
144×
144
87×87
75*75p
66*66p
px
px
px
px
x
x
1024*1024
120*120
144×144
75*75p<
/p>
44*44p
58*58px
px
px
px
x
x
1024*1024
120*12
0
144×144
75*75p
44*
44p
58*58px
px
px
px
x
x
1024*1024
120*120
144×144
75*75p
44*44p
58*58px
px
px
px
x
x
iPad3/4/Air/A
ir2/mi
1024*1024
180*180
144×144
100*100p
50*50p
44*44p
ni2
px
px
px
x
x
x
iPad1/2
iPad mini
1024*1024
25*25p
22*22p
90*90px
72*72px
50*50px
px
x
x
1024*1024
25*25p
22*22p
90*90px
72*72px
50*50px
px
x
x
字体
iPhone
上的字体英文为：
HelveticaNeue
至于中文，
Mac
下用
的
是黑体
-
简，
Win
< br>下则为华文黑体，所有字体要用双数字号。
百度用户体验部做过一个小调查，
对
于
app
字体大小的调查结
论如下：<
/p>
颜色值
IOS
颜色值取
RGB
各颜色的值比如某个色值，
给予
IOS
开发的色
值为
R:12 G:34 B:56
给出的值就是
12,34,56(
有
时也要根据开
发的习惯，有时也用十六进制
)
内部设计
1
、所有能点击的图片不得小于
44px
（
Retina
需要
88px
）
2
、单独存在的部件必须是双数尺寸
3
、两倍图以
@2x
< br>作为命名后缀
4
、充分考虑每
个控制按钮在
4
中状态下的样式，如图
3.2.2Android
篇
界面尺寸
android
的尺寸众多，建议使用分辨率为
720x128
0
的尺寸设计。这
个尺寸
720x1280
中显示完美，
在
1080x1920
中看起来也比较清晰；
切图后的图片文件
大小也适中，应用的内存消耗也不会过高。
状态栏高度：
50 px
导航栏高度：
96 px
标签栏高度：
96 px
Andro
id
最近出的手机都几乎去掉了实体键，
把功能键移到了屏幕中
，
当然高度也是和标签栏一样的：
96 px
内容区域高度为：
1038 px
（
1280-50-96-96=1038
）
图表尺寸
屏幕大小
320×480
px
启动图标
操作栏图
上下文图
系统通知图标
最
细笔
标
标
(
白色
)
画
32×32
16×16
24×24 px
px
px
不小于
2 px
不小于
3 px
不小于
2 dp
不小于
6 px
48×48
px
480×800px /480×854px
48×48
24×24
72×72
px
36×36 px
/540×960px
px
px
720×1280 px
1080×1920 px
48×48 dp
32×32
16×16
24×24 dp
dp
dp
144×144
96×96
48×48
72×72
px
px
px
px
ps:
Android
设计规范中，
使用的
单位是
dp
，
dp
< br>在安卓机上不同的密度转换
后的
px
是不一样的
字体
Android
上的字体为：
Droid
sans
fallback
，
是谷歌自己的字
体，
与微软雅黑很像。
颜色值
Android
颜色值取值为十六进制的值
比如一绿色的值，
给开发的值
为
#5bc43e
3.2.3
手机
APPUI
界面设计三大准则：
（
1<
/p>
）不乱用颜色。一个页面内不要超过
3
种
颜色
（
2
）
不乱用大图片当背景。你是想让用户看你的背景图片呢，还是
看你的内容？
（
3
）
< br>不乱填充内容。
页面元素如果太满，
给读者压抑感，
无所适从。
３
.
３ＡＰＰ界面设计中的用户体验
3.3.1
用户体验的概念
用户体验（
User Exp
erience
，简称
UE/UX
）是
一种纯主观在用
户使用产品过程中建立起来的感受。
但是对于一
个界定明确的用户群
体来讲，
其用户体验的共性是能够经由良好
设计实验来认识到。
新竞
争力在网络营销基础与实践中曾提到计
算机技术和互联网的发展，
使
技术创新形态正在发生转变，
以用户为中心、
以人为本越来越得到重
视，
用户体验也因此被称做创新
2.0
模式
的精髓。
在中国面向知识社
会的创新
2
.0
——应用创新园区模式探索中，更将用户体验作为“三
验”
创新机制之首
[1]
。
ISO
9241-210
标准将用户体验定义为
“人们对于针对使用或期望使
用的产品、系统或者服务的认知印象和回应”
。通俗来讲就是“这个
东西好不好用，用起来方不方便”
。因此，用户体验
[2]
是主观的，
且其注重实际应用时的产生的效果。
ISO
定义的补充说明有着如下解释：用户体验，即用户在使用一个产
品或系
统之前、使用期间和使用之后的全部感受，包括情感、信仰、
喜好、认知印象、生理和心
理反应、行为和成就等各个方面。该说明
还列出三个影响用户体验的因素：系统，用户和
使用环境。
ISO
标准的第
3
条说明暗示了可用性也可以作为用户体验的一个方面。
如，
“可用性标准可以用来评估用户体验一些方面”
。
不过，该
ISO
标
准并没有进一步阐述
用户体验和系统可用性之间的具体关系。显然，
这两者是相互重叠的概念。
3.3.2
用户体验的目标和要素
用户体验的目标
1
、有用（这个有用是指用户的需求）
2
、易用（不容易使用的产品，也是没用的）
< br>
3
、友好（祝贺你成为
XX
的会员和批准你加入
XXX
，你感觉那
个更友
好？）
4
< br>、视觉设计（让产品产生一种吸引力）
.
用户体验的五个要素
:
表现层
在表现层（
surface
）
，你看到的是一系列的网页，有图片和文字
组
成。一些图片是可以点击的，从而执行某种功能，例如把你带到购
物车里去。
一些图片就只是图片，
比如一本书的封面或网站自己的标
< br>志。
框架层
在表现层之下是网站的框架层（<
/p>
skeleton
）
：按钮、表格、照片
和文本区域的位置。
框架层用于优化设计布局，
以达到这些元素的最
大效果和效率——使你在需要的时候，
能记得标识并找到购物车的按
钮。
结构层
与框架层相比更抽象的是结构层
（<
/p>
structure
）
，
框架则是结构的
具体表达方式。
框架层确定了我们的结
账页面上交互元素的位置；
而
结构层则用来设计用户如何到达某
个页面，
并且在他们做完事情之后