1、第一章绪论1.1 项目研究背景传统互联网向移动互联网的迁移和演变，智能手机时代的到来是本项目研究的主要背景。传统互联网发展至今，理论研究和技术实践都日趋成熟，却开始无法满足人们希望在移动过程中快速便捷地获取互联网信息和服务的需求。宽带无线技术和移动终端技术的快速发展使得移动互联网应运而生。最初移动互联网是对传统互联网的简单复制、补充和延伸，发展至今已成为互联网未来的发展方向，渗透到社会生活的方面面，并带来了传播领域的变革。根据中国互联网网络信息中心（CNNIC）的统计数据显示，截止 2013 年 6 月，中国手机网民数已达 4.64 亿，占全部网民的比例超过 70%之多，且保持着稳定增长的趋势
2、。未来十年被定义为移动互联网的十年。伴随着移动互联网的强劲发展市场进入门槛的逐渐降低，智能手机也日益成为主流的手机类型。早在 2010 年上半年，智能手机凭借其强大的可扩展性和丰富的应用成为用户关注度最高的手机类型。智能手机的出现颠覆了传统手机作为单一使用工具的现象，既丰富了手机的沟通属性，集工作、娱乐、生活于一体，又带动了第三方应用程序即手机 APP 产业的兴起和繁荣。.2 研究的目的与意义随着移动通信和互联网技术迅猛的发展与结合以及智能手机的普及，使移动 App 得到了广泛的关注。用户界面（User Interface，UI）是人与手机进行交流互动的载体和平台。智能手机APP 的 UI 设
3、计的目的是使人与手机之间信息交换方式更科学、更合理、更为人性化。同时，保证使得人与手机之间的信息传递更加便捷、准确可靠。智能手机上的移动社交软件是典型的代表。UI 设计要符合人机交互、操作逻辑、界面美观和人的使用习惯。手机 UI 设计是产品品质体现的重要因素，好的 UI 设计不仅在操作上应简洁易懂和舒适自由，也应充分体现软件的特点及定位。界面设计是融合了认知心理学、设计学、语言学等不同学科参与的系统工程。手机人机交互设计它的设计体验直接影响着用户的产品选择和消费观念，甚至影响手机文化。让我们深有体会的是，只有好的 UI 设计，才能更好的适应当今的手机技术、消费心理、用户体验需求。本项目的研究将
4、会从手机用户的操作习惯、审美特征、心理、视觉感受、功能期望、消费需求、情感体会、文化传播等方面入手，探究用户需求与体验是如何影响手机 UI 设计的，从而研究如何使用户在与手机的人机对话中创造最为和谐的关系，创造最大程度的人性化设计。进而探索更为完整的用户界面设计原则、发展趋势和方向，指导设计师们设计出更便捷、更舒适、更流畅、更美观的人机交互界面。对社交软件 APP 的 UI 设计提出相关见解，提供相应的参考设计意见。1.3 研究方法本项目研究的内容是针对当前的智能手机各种社交软件的 App的用户界面进行调查研究，比较分析。站在界面设计者的角度，分析简单的心理学（如色彩） ，社会流行因素，不同人
5、群的界面风格等。站在用户的角度，以对用户体验感受的调查研究，项目研究小组亲身体验等方式，来研究各种移动社交软件的 UI 设计的特点。项目从以下几个方面去研究智能手机 UI 的主要问题： 影响用户对 APP 体验的因素 制约手机 APP 的界面设计的客观条件 用户行为对 APP 界面的影响从用户的行为习惯，例如左手习惯、右手习惯 手机本身条件对 APP UI 的影响从手机的屏幕大小、颜色以及材料的质感去考虑智能手机 UI的个性化设计因素。用户使用同类软件或其他软件的熟悉程度。用户清楚易懂为目标。第二章社交类发展现状及发展趋势2.1 国外社交类 APP 发展现状及趋势2008 年苹果公司创建的第一
6、个在线手机应用商店，手机 APP 的历史仅仅才七年之久，国内外关于其界面设计的研究内容还未完全熟。国外关于界面设计的理论研究主要集中在 web 端。软件界面设计的鼻祖 Alan Cooper 的著作 About Face 3: The Essentials of Interaction Design针对个人和商务软件、web 应用、手持设备等产品和系统的设计，全面系统地讲述了设计过程、原理和方法，成为业界规范；Jenifer Tidwell Designing Interfaces给出了很多界面设计中常用的模式，每个模式都包含着切实可行的设建议，被称为现代视觉和交互设计的完整教程。除此之外，苹
7、果的 i OS 系统和谷歌的 Android 系统作为目前全球两大主流的智能手机操作系统，分别提出了在各自操作系统中运行的手机 APP 应遵守的设计规范i OS Human InterfaceGuidelinesAndroid Design ，对界面设计具有一定的指导作用。Josh ClarkTapworthy: Designing Great i Phone Apps以基于 i OS 系统的 i Pone 手机 APP 为核心，呈现了大量真实应用的设计和思考过程，包含丰富的 i Phone 界面设计知识，具有参考价值。在国内，对手机应用界面设计研究具有指导意义的理论书籍还未出现。周陟的UI
8、进化论移动设备人机交互界面设计探讨了交互设计和界面设计的基本概念、设计规范和工作流程，其中的 GUI 视觉设计部分结合优秀的设计案例给出了细致到位地实践指导。2 社交类分类及特点2.2.1 社交网络与社交媒体先将社交类 APP 分为两类，社交网络与社交媒体，下面列出二者定义。社交网络即社交网络服务，源自英文 SNS（Social Network Service）的翻译，中文直译为社会性网络服务或社会化网络服务，意译为社交网络服务。社交媒体（Social Media)指互联网上基于用户关系的内容生产与交换平台。社交媒体是人们彼此之间用来分享意见、见解、经验和观点的工具和平台，现阶段主要包括社交网
9、站、微博、微信、博客、论坛、播客等等。社交网络强调人与人之间的关系，是社交关系在虚拟的互联网上的体现，大部分即时通讯软件实现了社交网络的功能，即好友列表、对话与消息。通常来说，先有线下的社交关系，后有线上的好友关系。典型的 APP 有 QQ，微信等。社交媒体强调内容发布，每一个个体都是内容的发布者，通过内容关注从而建立人与人之间的关系。社交媒体中，社交关系的建立有两条路径，一条是现实好友间的互相关注，另一条是通过搜索或是随机关注。典型的应用有微博，豆瓣等。层级比较从二者的定义与属性来看，社交网络的层级要高于社交媒体，因为社交网络属于强社交关系，可以向社交媒体迁移，只需基于好友关系建立内容发布平
10、台，比如 QQ 的 QQ 空间，微信的朋友圈。由于人的社会属性，交流与社交的需求永远存在，应用内的发布平台一旦建立，用户自发就会在平台上发布状态，好友之间很自然的就会在平台上形成互动。而社交媒体想向社交网络方向发展，就会困难很多。社交媒体上的人际关系都是弱关系，人与人之间的交流通过评论、私信进行，不易形成连续交流，软件的功能也不是为对话设计的，所以通过社交媒体，陌生人很难成为熟人。2.2.2 衡量指标/分类标准/维度划分这里选取几个维度，作为对社交 APP 分析的维度。1、实名与匿名社交 APP 注册时，使用何种方式为自己命名，体现了 APP 设定的隐私保护策略、功能定位、社交关系强弱等因素。
11、实名制：人人网，腾讯朋友。实名制的目的是让社交关系更加真实，可信。昵称/实名：微博，微信。大部分普通人倾向于昵称命名，一方面保护隐私，另一方面彰显个性。在微博中，一些名人会采用实名认证，确保微博是本人，容易被搜索到，增加人气。昵称：陌陌，抱抱。以陌生人社交作定位的陌陌，一定以昵称取名。因为陌陌之前的名声，用户一定不想被熟人发现。匿名：微密。一些 APP 提供了匿名消息发布和聊天功能，有时是熟人之间，有时是陌生人之间。用户直接以化名命名，或者直接没有名字。2、开放与封闭根据动态/发布内容的可见性进行分类。高可见性（所有人可见）：微博，人人，陌陌。弱社交关系的社交媒体，用户一般不会发布隐私消息，微
12、博和人人提供热门推荐，陌陌基于地理位置查看，都是高可见性的体现。当然，产品也提供可见性选项，保护用户隐私，比如微博的可见性选项，提供好友圈/指定的人/自己可见等等。中可见性（访问可见/好友可见）：人人个人主页/QQ 空间。这类产品提供不同的可见性选项，用户可以自己设置。低可见性（共同好友可见）：微信朋友圈。微信朋友圈比 QQ 空间更为封闭，在 QQ 空间中，所有人对自己好友的评论都可见，而在微信中，只有共同好友的评论才可见。3、社交关系的建立方式这里列出建立人与人之间联系的方式基于好友与共同好友，基于手机通讯录，基于地理位置，基于共同爱好，基于搜索4、好友关系层次陌生人-单项关注-互相关注，悄
13、悄关注，好友陌生人-没有任何关系的两个人单项关注-一方关注另一方互相关注-双方互相关注悄悄注提供非公开关注功能好友-双方互为好友，任意一方解除好友关系。好友关系即结束 。主流社交类产品对比本项目研究的几款典型 APP1、微信。核心功能：通讯录，对话，群聊，朋友圈，公众号。其他功能：摇一摇，附近的人，漂流瓶微信以即时通信功能为核心，逐渐发展成为社交服务平台，朋友圈-社交媒体，公众号-阅读与服务，微信支付-移动支付结算，多种功能集合在一个产品中，紧紧围绕人与人进行。2、微博。核心功能：发布消息，浏览消息，评论，私信。其他功能：热门微博，搜索新浪微博自 2010 年发布之后，迅速得到互联网关注，用户
14、数量爆炸式增长。微博以传播信息快，范围广，即时性等特点，受到广泛关注。但是碎片化浏览不利于深度挖掘消息背后的内容，这也是微博的缺点。3、陌陌。核心功能：结识附近的人，即时聊天，动态，联系人。其他功能：聊天室，游戏，同城服务，附近活动陌陌以陌生人交友为产品定位，产品上线之后因“约 X”而成为热门产品，之后推出 LBS服务，将服务、交友、社区加入产品，带来正向循环。4、人人网。核心功能：校园交友，发布动态，浏览动态。其他功能：热门分享，大学社团人人网定位为校园社交产品，曾经一度风行，近几年因为一系列原因，逐渐没落。网上有很多分析，在此略过。5、百度贴吧。核心功能聚集大批同好网友，展示自我风采，结交
15、知音，搭建别具特色的“兴趣主题“互动平台。其他功能：明星贴吧，直播及视频直播，实现多吧交叉实时互动等等。贴吧的使命是让志同道合的人相聚。贴吧的组建依靠搜索引擎关键词，不论是大众话题还是小众话题，都能精准地聚集大批同好网友，定位较为广泛。6.QQ。核心功能：好友列表，聊天，群聊，QQ 空间，QQ 公众号。其他功能：QQ 邮箱，附近的人等等，QQ 是中国时间最长的社交类软件，APP 是由传统互联网迁移过来的，而且 QQ 是中国用户量最大的社交类 APP 面向对象广泛7.领英。核心功能：向全球职场人士提供沟通平台，并协助他们事半功倍，发挥所长，是全球最大的职业社交网站。8.易信。核心功能：易信是由网
16、易和中国电信联合开发的，一款能够真正免费聊天的即时通讯软件，独特的免费电话。9.钉钉。核心功能：企业沟通功能，视频电话会议，高清稳定的画面，随时随地高效沟通，支持 3 到 5 人同时加入。第三章 界面设计与用户体验设计的理论概述 .界面设计的基本概述3.1.1的出现及分类在这个充满各方企业和 APP 团队开发者的移动互联网时代里，各类 APP 占据了各大应用市场，要想赢得用户的下载和 APP 软件在用户移动客户端的粘度还需要企业和 APP 开发者更加努力，开发出体验更佳，更符合用户需求的 APP 产品，成都 APP 开发在整个 APP开发行业里仍处于领先水平。成都 APP 开发平台已经帮助多家
17、企业定制自己的 APP 应用平台。社交类 APP目前社交类 APP 应用也成为各个公司极度看重的移动互联网平台，从米聊到微信，陌陌，到后来的电信联合网易开发的易信，各大巨头纷纷推出各自的移动社交平台，社交类 APP 应用可谓强敌不断，小马哥推出的微信，目前占据行业领先地位，其他社交类 APP中抢占行业领先地位还需要后续更多投入和观察，关于这几个社交APP 应用，小编之前已写有文章专门分析。在这里就不多说社交类APP 了。地图导航类 APP地图导航类 APP 也是近两个月以来我们看重的焦点，最早从高德地图和百度导航推出免费产品争夺行业入口资源，而现在谷歌地图，SOSO 全景地图，搜狗地图也纷纷推
18、出移动互联网客户端 APP 产品，最近 SOSO 地图在余姚抗灾中首次利用移动地图参与救灾而获得了外界更多的关注，而高德再次推出人工导航免费也吸引了不少的用户。生活类 APP生活类 APP 软件去哪儿旅行，百度旅游，大众点评等，满足用户吃喝玩乐不同方面的需求，而百姓网，赶集网、58 同城各类分类应用也在移动互联网发力，纷纷抢占用户资源，生活类 APP 要想脱颖而出必须符合用户的需求，推出软件独有的创意才能更好的留住用户，获得长远的利益。通讯类 APP通讯类 APP，手机 QQ，飞信，QQ 通讯录，YY 语音等想必大家已经非常了解了，这里就做对比分析了。影音类 APP影音类 APP，作为搜索类霸
19、主的百度旗下百度影音上线时间不到半年便获得了千万的下载量，其他 APP 与其争夺影音类 APP 王者地位也待市场考验。图书类 APP图书类 APP，既腾讯推出 QQ 阅读，各大出版社也争相推出属于自己的出版社 APP，而对于一贯处于传统图书行业，移动应用 App平台势将给企业带来更大的冲击，当当网，亚马逊等传统图书商也定制了图书类 APP 应用，而懒人听书，91 熊猫看书等 APP 深得用户的喜爱。3.1.2 界面及界面设计界面是人与物体互动的媒介，换句话说，界面就是设计师赋予物体的新面孔。界面设计是人与机器之间传递和交换信息的媒介，FaceUI称包括硬件界面和软件界面，是计算机科学与心理学、
20、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。1. 以功能实现为基础的界面设计。交互设计界面最基本的性能是具有功能性与使用性，通过界面设计，让用户明白功能操作，并将作品本身的信息更加顺畅的传递给用者，即用户，是功能界面存在的基础与价值，但由于用户的知识水平和文化背景具有差异性，因此界面应以更国际化，客观化的体现作品本身的信息。2.以情感表达为重点的界面设计。通过界面给用户一种情感传递，是设计的真正艺术魅力所在。用户在接触作品时的感受，使人产生感情共鸣，利用情感表达，
21、切实的反应出作品与用户之间的情感关系。当然，情感的信息传递存在着确定性与不确定性的统一。因此，我们更加强调的是用户在接触作品时的情感体验。3.以环境因素为前提的界面设计。任何一部互动设计作品都无法脱离环境而存在，周边环境对设计作品的信息传递有着特殊的影响。包括作品自身的历史、文化、科技等诸多方面的特点，因此营造界面的环境氛围是不可忽视的一项设计工作，这和我们看电影时需要关灯是一个道理。.界面的构成规范及设计原则3.2.1iOS 篇界面尺寸设备 分辨率 状态栏高度 导航栏高度 标签栏高度iPhone6 plus 12422208 px 60px 132px 147pxiPhone6 750133
22、4 px 40px 88px 98pxiPhone5/5s/5c 6401136 px 40px 88px 98pxiPhone4/4s 640960 px 40px 88px 98pxiPad3/4/Air/Air2/mini2 20481536 px 40px 88px 98pxiPad1/2 1024768 px 20px 44px 49pxiPad mini 1024768 px 20px 44px 49px图标尺寸设备 App Store 程序应用 主屏幕 spotlight 搜索 标签栏工具栏和导航栏iPhone6 plus 1024*1024px 180*180px 144144
23、px 8787 px 75*75px 66*66pxiPhone6 1024*1024px 120*120px 144144px 58*58px 75*75px 44*44pxiPhone5/5s/5c 1024*1024px 120*120px 144144px 58*58px 75*75px 44*44pxiPhone4/4s 1024*1024px 120*120px 144144px 58*58px 75*75px 44*44pxiPad3/4/Air/Air2/mini21024*1024px180*180px144144px100*100px50*50px44*44pxiPad1/
24、2 1024*1024px 90*90px 72*72px 50*50px 25*25px 22*22pxiPad mini 1024*1024px 90*90px 72*72px 50*50px 25*25px 22*22px字体iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac 下用的是黑体-简，Win 下则为华文黑体，所有字体要用双数字号。百度用户体验部做过一个小调查， 对于 app 字体大小的调查结论如下：颜色值IOS 颜色值取 RGB 各颜色的值比如某个色值，给予 IOS 开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根
25、据开发的习惯，有时也用十六进制)内部设计1、所有能点击的图片不得小于 44px（Retina 需要 88px）2、单独存在的部件必须是双数尺寸3、两倍图以2x 作为命名后缀4、充分考虑每个控制按钮在 4 中状态下的样式，如图3.2.2Android 篇界面尺寸android 的尺寸众多，建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280 中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。状态栏高度：50 px导航栏高度：96 px标签栏高度：96 pxAndroid 最近出的手机都几乎去掉了实体键，把功能键移到
26、了屏幕中，当然高度也是和标签栏一样的：96 px内容区域高度为：1038 px （1280-50-96-96=1038）图表尺寸屏幕大小 启动图标 操作栏图 标 上下文图 标 系统通知图标 (白色) 最细笔 画320480 px 4848 px 3232 px 1616 px 2424 px 不小于2 px480800px /480854px /540960px 7272 px4848 px2424 px 3636 px不小于3 px7201280 px 4848 dp 3232 dp 1616 dp 2424 dp 不小于2 dp10801920 px 144144 px 9696 px 4
27、848 px 7272 px 不小于6 pxps: Android 设计规范中， 使用的单位是 dp， dp 在安卓机上不同的密度转换后的 px 是不一样的字体Android 上的字体为： Droid sans fallback ，是谷歌自己的字体，与微软雅黑很像。颜色值Android 颜色值取值为十六进制的值 比如一绿色的值， 给开发的值为 #5bc43e3.2.3 手机 APPUI 界面设计三大准则：（1）不乱用颜色。一个页面内不要超过 3 种颜色（2）不乱用大图片当背景。你是想让用户看你的背景图片呢，还是看你的内容？（3）不乱填充内容。页面元素如果太满，给读者压抑感，无所适从。.界面设计
28、中的用户体验3.3.1 用户体验的概念用户体验（User Experience，简称 UE/UX）是一种纯主观在用户使用产品过程中建立起来的感受。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计实验来认识到。新竞争力在网络营销基础与实践中曾提到计算机技术和互联网的发展，使技术创新形态正在发生转变，以用户为中心、以人为本越来越得到重视，用户体验也因此被称做创新 2.0 模式的精髓。在中国面向知识社会的创新 2.0应用创新园区模式探索中，更将用户体验作为“三验”创新机制之首1 。ISO 9241-210 标准将用户体验定义为 “人们对于针对使用或期望使用的产品、系统或者服务的
29、认知印象和回应” 。通俗来讲就是“这个东西好不好用，用起来方不方便” 。因此，用户体验2 是主观的，且其注重实际应用时的产生的效果。ISO 定义的补充说明有着如下解释：用户体验，即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。该说明还列出三个影响用户体验的因素：系统，用户和使用环境。ISO 标准的第 3 条说明暗示了可用性也可以作为用户体验的一个方面。如， “可用性标准可以用来评估用户体验一些方面” 。不过，该ISO 标准并没有进一步阐述用户体验和系统可用性之间的具体关系。显然，这两者是相互重叠的概念。3.3.
30、2 用户体验的目标和要素用户体验的目标1、有用（这个有用是指用户的需求）2、易用（不容易使用的产品，也是没用的） 3、友好（祝贺你成为 XX 的会员和批准你加入 XXX，你感觉那个更友好？）4、视觉设计（让产品产生一种吸引力）.用户体验的五个要素:表现层 在表现层（surface） ，你看到的是一系列的网页，有图片和文字组成。一些图片是可以点击的，从而执行某种功能，例如把你带到购物车里去。一些图片就只是图片，比如一本书的封面或网站自己的标志。 框架层 在表现层之下是网站的框架层（skeleton）：按钮、表格、照片和文本区域的位置。框架层用于优化设计布局，以达到这些元素的最大效果和效率 使你在
31、需要的时候，能记得标识并找到购物车的按钮。 结构层 与框架层相比更抽象的是结构层（structure） ，框架则是结构的具体表达方式。框架层确定了我们的结账页面上交互元素的位置；而结构层则用来设计用户如何到达某个页面，并且在他们做完事情之后能去什么地方。框架层定义了导航条上各项的排列方式，允许用户可以浏览书籍的不同类别；结构层则确定哪些类别应该出现在那里。 范围层 结构层确定网站各种特性和功能的最合适的组合方式，而这些特性和功能就构成了网站的范围层（scope） 。有些卖书的网站提供了一个功能，使用户可以保存之前的邮寄地址，这样他们可以再次使用它。这个功能 或任何一个功能 是否应该成为网站的功
32、能之一，就属于范围层要解决的问题。 战略层 网站的范围基本上是由网站的战略层（strategy）所决定的。这些战略不仅仅包括了经营者想从网站得到什么，还包括了用户想从网站得到什么。就我们的网上书店的例子而言，一些战略目标是显而易见的：用户想要买书，我们想要卖出它们。另一些目标可能并不是那么容易说清楚的。第四章 设计调查分析与定位 .社交类使用情况调查及结果分析在众多类型的手机 APP 中，社交 APP 成为大学生们使用频率最高的应用类型。据调查发现，54%的大学生在入学前就通过辅导员、校园论坛等渠道和新同学在手机社交 APP 中建立了联系。那么，大学生对手机社交的依赖度到底有多高呢？调查发现，
33、在手机社交的使用频率上，57%的大学生每天使用时间超过 5 小时，日常生活基本“机不离手”。每天使用时间在 3-5 小时的占 28%，而每天使用不足一小时的仅占 5%。据调查，在目前手机社交 APP 对大学生有很高的渗透率，具体使用时长很难明确界定，大多数人在没有社交信息的时候，软件在后台仍然是开启状态，一旦有信息提示，学生们会马上回复。学生们表示，手机社交的使用习惯也引发了WiFi 热，出门没 WiFi 比没带钱更可怕。通过调查发现，新老大学生在购置开学用品上的花费差异较大，其中 66%的大学新生开学季花费在 1500-3000 元之间，花销在 3000 元以上的占 19%。这中间除生活必需
34、品外还有数码产品的费用。而高年级的学生对开学花销则显得较为冷静，统计显示，54%的高年级学生开学花销在 1000 元以内，超过 3000 元的仅占 6%。.人群定位不同的社交类 APP 的人群定位一般不同：微信的用户人群比较广泛，精英白领或者打工族，或者学生，甚至是老人，拥有智能机的用户，80%都会使用微信。钉钉的定位非常明确，是专门用于工作的，所以用户人群都是公司职员。人人网本身是校内网，其主要用户的大学生。陌陌是用于陌生人交友的软件，主要用户的年龄是青年人。贴吧是比较年轻的一代人喜欢上的网络交流的工具，更是偏向于娱乐性。所以说，玩贴吧的人 90 后尤其居多，其次是 80 后和 00后，再老
35、一辈的人几乎没有什么人玩百度贴吧。玩易信的人基本上不是为了娱乐而去的。易信本身以节省话费闻名全国，所以用易信的人各个年龄层次应该都有，主要是以 8090后为主。再老一辈的用户也不多，但是整体上应该比百度贴吧用户年龄层次分布更加均匀一些。领英，待毕业的大学生，失业人员，正在工作的职业人。新浪微博范围比较广，从小学生到老人都有分布。3 功能定位主要功能为方便人与人之间的沟通交流。百度贴吧：致力于娱乐，个人兴趣，网友间交流，核心是各种兴趣贴吧，能将臭味相投的人聚集在一起，一起讨论自己感兴趣的东西。易信：以其强大的通讯管理功能及省话费功能风靡全国，通吃男女老少，只要会用智能手机，对它一般就不存在抗拒心
36、理。领英：查找公司，查找职位，结交朋友。致力于给职业人带来方便，让失业人员找工作更方便。新浪微博：发布微博，转发微博，关注，搜索，评论，私信，赞微博，我的微等等；可以和朋友聊天，可以了解社会动态，知晓最新消息，集娱乐，聊天，看新闻于一体的综合类软件。微信：主要功能是社交，其他还有钱包，购物，游戏，订阅等。钉钉：主要功能用于工作交流，且其针对工作的特色功能很多，如签到、审批、工作日志等等。功能定位相当明确。人人网：主要功能是社交，其他还有游戏等。陌陌：主要功能用于交友交流，且其针对定位的特色功能很多，如摇一摇、个人、星级等等。第五章 社交类 APP 界面设计的视觉元素解构 手机 APP 的界面设
37、计虽然与传统媒介在设计手法上有所不同，但所借助的视觉元素基本一致，包括了色彩、文本、图形等。从APP 基于功能的界面构成来看，在多种视觉元素组合运用的基础上，出现了很多新型的设计元素，包括图标、导航等。因此，从这两个方面对 社交类 APP 界面的视觉元素进行解构，分析其在 APP 中的表现、作用与特点。5.1 基于视觉的造型要素 5.1.1 色彩元素 色彩是人们感知事物的重要手段。他作为有效的传播工具，具有强烈的视觉刺激已经成为最重要的视觉元素。色彩的色相、纯度和明度被定义为色彩的三要素。在这三个基本要素中，人们对色相的感知是最直接和绝对的，它反映了颜色的本体特征。例如人们可以直接通过肉眼观察
38、判断出物体是绿色还是红色。色相有原色、间色、复色之分，其中红黄蓝三色由于不能通过其他颜色的调配而成被称为“三原色” ，而间色和复色是在原色基础上按任意比例混合后得到的颜色，调和比例的不同可以得到丰富多彩的颜色。纯度和明度分别描述了色彩的饱和、纯净度和明与暗的程度。而色温及色彩带给人的冷暖感受也是其重要元素之一，它反映了色彩带给人的主观体验。此外色彩与人类心理特征的关联性也得到了广泛关注和利用。计算机技术的出现后，色彩被赋予了新的呈现方式。手机屏幕上看到的色彩是一种新的数字色彩RGB 色彩模式。 “RGB 色彩模式是由红(R)、绿(G)、蓝(B)三种光相叠加而产生其他颜色，因此该模式也叫加色模式
39、。 ”通过基色光叠加比例的不同，可以得到丰富的色光混合效果。肉眼能够辨别的色彩，都能通过 RGB 色彩模式来表现。所以进行手机 APP 的界面设计时可运用的色彩丰富多样，这不仅为设计师提供了广泛选择，也是对设计师如何运用好这么多色彩的挑战。手机 app 的界面是直接面向人的，不同色彩的呈现对人有不同的影响，简单的归纳为两个方面：视觉感知和心理感知，人的眼睛能直接观测到色彩的变化，是色彩给人带来的直接视觉影像。抬头看天是蓝色的、低头看草是绿色的等等。这种感知与人所在的生活环境中接触的色彩直接相关。社交类手机 app 界面设计中色彩运用于人的这种视觉感知有共同性，利用人的情感转移效应能清晰传达色彩
40、所有赋予的含义。色彩的心理感知则是色彩对人产生的情感效应，是人们在生产和社会实践中形成的不同色彩理解和感情共鸣所带来的不同的心理感受，且因人而异。在进行社交类 APP 的色彩运用前要注重色彩这两方面的影响，充分利用用户的视觉感知和心理感知，完成色彩的信息传达。5.1.2 文本元素 文字是作为信息传播的基础符号，在人类历史上扮演了重要角色，历经漫长的发展至今，已经成为信息传播中最重要的一种传播方式，是人类联系和交流的纽带。在具体的运用过程中，设计师通过字体基本属性变化和编排设计使文本信息视觉化。随着传播环境的不断发展，现今的信息传播载体已由平面媒体向网络媒体转变。新兴的手机媒体的出现，为文本元素
41、的设计和利用提供了新的环境。一般的手机都会提供多种默认的字体供用户进行选择，依据社交类 app 的文本元素的运用特点，可以从三方面来探讨界面设计中的文本元素。首先是文本即字体的基本属性，包括字号、颜色、粗细、行间距，字符数、段落宽度等，这些属性变化会直接影响文字在手机屏幕上的可辨识性。同时文字的编排设计也要考虑手机不同型号的屏幕大小和分辨率。然后是自己在社交类 app 界面中运用的场景不同表现手法不同。例如欢迎界面中的字体运用做为图片格式中的一部分，不受系统字体的约束，表现手段多样，主要根据引导界面的主题特点变化。而主界面中的导航、按钮中的字体和信息文本中的字体设计也有所差异。再次是手机的移动
42、化特点使得 app 界面所面对外界环境的多样性，强光、黑暗、颠簸都对文字的显示效果提出了要求，所以设计则在设计的时候就要结合产品功能充分考虑来保证信息呈现出来时能给用户更好的体验。5.1.3 图形元素 这是一种有异于上面两种符号的一种特殊的信息符号，他能以形象帮组人们进行记忆、识别和传播。图形出现与流行打破了人们传统的文字交流方式。它拥有其他传播所不能及的可视化，能在设计中扮演不同的功能角色，单色、彩色，为文本信息提供着视觉对比，吸引用户的眼球，借助创造性的处理方式和点线面的艺术化表现，可以使图形产生多变的视觉效果，准确直观地向受众传递信息，实现情感交流。随着 Mobile phone 流行，
43、图形的表现呈现多元化。它在社交类app 界面的设计中，根据所发挥的效果不同，将其分为两种：app的 logo 和功能性图标。这种显示于手机屏幕的图形与传统的图形设计有所区别。所以社交类 app 界面设计者在设计图形时必须综合考虑手机的物理硬件和系统软件的特性除此之外，由于 APP 的信息加载需要在联网状态下进行，耗费用户流量，图形元素相对于其他元素占比很高，且过多过大的图片会降低界面加载速度，直接影响用户体验，需要设计师格外留意。版式与布局 版式和布局的功能相当于一个公司的总体框架，所以它异常的重要，各种视觉元素的综合使用，需要一个整体和谐的版式来组织布局。版式设计就是将页面中的多种视觉元素进
44、行有机地组合与排列，呈现视觉逻辑，建构页面秩序，实现页面元素的协调统一。在传达美感的同时有意识地引导用户视线，阅读并理解信息，高效、人性化的完成信息传递。这要求设计师全局性地考虑设计方案，确保各元素之间的相互联系和相互支持。而且页面的版式布局与受众的注意力密切相关，包括注意的范围和视觉中心的关系，注意的转移和视觉流程的关系，注意的稳定性和版面分割的关系等值得关注。作为社交类 app 界面造型元素的重要组成部分，在利用普适性的视觉流程规律的同时，还需要留意用户在与手机的交互过程中视觉流程的特殊性变化。一是感知对象的多元化。除了传统的图文要素的组合外，APP 的界面中还融合了声音、视频等元素。二是
45、浏览方式的非线性。APP 功能的多样性和界面的交互性为用户的浏览路径创造了多种可能，用户可以根据自己的喜好选择浏览路径。此外，用户既扮演着信息被动接受者的角色，又主动参与到了信息的加工处理和发布之中。这些特性都对 APP 界面的版式布局提出了更高的要求，无论用户如何主观地在各个版面中穿梭，都要保证版面布局的合理与愉悦性，实现用户预期。5.2 基于功能的内容要素 5.2.1 引导界面 引导界面，不言而喻，指的是用户在首次安装并进入 app 后，所看到指引熟悉产品功能及基本操作的界面，是将产品功能和行为视觉化的表现在首次安装及引导完成后，引导界面便不再出现，直到 APP 版本更新，引导界面会再次出
46、现，指引用户熟悉新版本的功能特性，类似于一个简洁的、创意化的 APP 说明书。引导界面一般为全屏静态图，用户可以左右滑动进行界面切换查看内容。引导界面是基于用户需求和产品目标两个元素：一方面是帮助新手用户快速愉悦地学习如何使用产品，另一方面是尽快地将新手用户转化为活跃度高、黏度高的忠实用户。因此，引导界面的设计要注重二者目标的平衡。5.2.2 主界面 主界面是指承载 APP 核心功能的界面，一般指用户首次进入APP 的界面。由于社交类 APP 的内容主体主要包括用户群体以及用户产生的内容，所以主界面一般用来展示用户与用户之间互动的最新内容，以便吸引用户持续使用 APP。其设计主体包括标题栏、内
47、容区、导航栏三个部分。5.2.3 分界面 分界面是指除主界面以外的其他界面。社交类 APP 的分界面设计元素与主界面设计具有延续性和继承性。例如标题栏、导航栏的主体设计几乎一致。而内容区则根据显示内容的不同有所不同。依据内容的主次性排序，主要的分界面内容包括内容列表页面和内容展示页面。因其向用户传递信息的目标不同，设计手法也有所不同。针对社交类 APP 的社交属性，分界面中需要着重关注用户个人主页界面的设计。这是用户个人信息展示的窗口，也是用户与用户之间相互了解沟通有无的桥梁。因此，个人主页的视觉效果呈现会直接影响 APP 社交氛围的营造与关系链的建立，间接影响 APP 对用户的吸引力和黏性。
48、5.2.4 其他细部元素输入框 在社交类 APP 的界面中，除了上文中提到的引导界面以及主界面和分界面的设计，还有其他共有性细部元素设计，作为用户输入信息入口的输入框便是其中之一，也是最重要的一个。根据输入信息类型的不同，输入框呈现不同的设计样式。虽然这些内容元素不在 APP 的界面中占有主导地位，但是也处于用户与 APP 交互的核心环节。优秀的视觉与交互设计的结合，可以带给用户顺畅的体验。5.3 各要素基于情感化三个设计水平的归类上文对社交类 APP 界面视觉元素的解构，将界面中包含的视觉元素分为了以下几类：色彩元素、文本元素、图形元素、版式和布局、引导界面、主界面、分界面、搜索框与输入框。
49、根据第三章情感化设计的内容分析以及三个层次水平的设计对应的社交类 APP 的产品特点，将这些视觉元素进行如下分类。本能水平的设计关注产品的外观设计，直接对应 APP 界面中的视觉造型元素：包括色彩元素、文本元素、图形元素。行为水平的设计关注产品的操作行为设计，直接对应 APP 界面中的内容元素：包括引导界面、主界面、分界面、输入框。反思水平的设计则与产品概念直接相关，体现在 APP 的功能、交互、视觉的整体设计给用户带来的意识情感和认知的变化。三者是递进发展的过程，本能水平的设计元素主要关注用户的视觉体验，行为水平的设计元素在关注视觉体验的同时，进一步关注交互体验。反思水平的设计则在视觉与交互体验的基础上上升到关注用户的情感意识、对品牌的感知以及对自我价值的认知，是情感化设计的最高境界。第六章 社交类 APP 界面的情感化设方法探究 6.1 手机软硬件特性分析 手机硬件：在物理层面对手机运作提供支持，通常大众所关心的硬件有屏幕，处理器，内存和相机等等。屏幕：现在市场主流是大屏手机（5.2 寸及以上） ，用起来舒服，不费眼，无论是玩游戏还是看视频
