一款基于android系统的社交App交互界面设计

董长娥

【摘 要】随着移动互联网智能技术和大数据算法的发展，用户对于移动社交应用的需求更加多样化。本项目所设计的社交应用程序就像一个交友论坛，用户可以在这个大论坛里交流和分享他们感兴趣的问题，从功能设计和界面设计上使用户使用更方便，功能更清晰好用。

【关键词】社交APP;界面;设计

一、项目设计原则

通讯模块需要快速方便。作为社交类app，通讯功能是最基础的，用户能在最快时间结识到自己喜欢的朋友，还需方便省事，不用通过太多的步骤，在设计上也以轻简设计为原则。

具备LBS功能。线上和线下沟通结合，才能让用户感觉关系的牢靠性。线上的网络毕竟是一个虚拟的世界，人还是得回归现实中来，两者结合符合用户的生活习惯。

极力营造轻社交氛围。当今是读图时代，用户追求的是更加炫酷的视觉体验效果，而且最好是可以只通过一张照片进行社交互动，借此省去利用文字沟通的时间，让繁忙的用户感受到交友的方便。

二、项目风格

整体以极简主义、整洁舒适视觉为宗旨。映射人时，以年轻人为主，配合清新的大自然，既体现了年轻的活力富有创造力也体现了大自然的清新;视觉映射事时，以活力为主，符合用户整体年龄心态;视觉映射物时，以清新、鲜活为主，符合用户赋有朝气的层面。

1.设计目标

以极简为宗旨，通过图片、文字及短视频的方式分享生活，以移动社交为基础，以社区分享为核心，建立陌生人社交的模式，在图文视频社交中传播自己的生活态度，让相同兴趣爱好的用户进行更好的互动，找到志同道合的朋友，让移动社交变得更加有意义。

建立全新视觉体系：统一视觉规范，融入品牌色，打造特色差异化设计语言，建立品牌特色功能，拉开与竞品的差异性，提升用户对品牌的认知。

用新奇功能获客：真身进行真实社交，分身进行分享心情，吸引更多的用户使用这款产品。

提高用户黏性：增加Ibs功能基于位置的服务，真实可附近的进行社交，增加用户的黏性。

2.设计思想

采用大面积留白区分信息模块，打破市场主要社交类App的视觉风格，加入更多留白和圆角卡片，减少页面视觉干扰，提升视觉体验，创造沉浸式体验。

字体规范：字体均采用苹方字体，字号由大到小分别为40、36、30、26、20。

图标设计：图标的极简化是当今社会移动App发展的流行趋势，但是极简并不等于毫无装饰，除了统一线条粗细之外， 可以动一些简单的小心机，让这个小图标变得更加精致灵巧。

3.设计配色

根据用户画像分析，主要面向的是16-40岁的用户，而在这些人群中90后及00后居多，因此产品定位相对活泼：如蓝色，绿色，黄色及橙红色。在了解用户的视觉浏览偏好后，根据产品定位确定了最终色调以黄色为主题色，以黑色、白色及灰色为辅助颜色。

三、功能分析

1.功能模块划分

根据系统功能的要求，可以分为8个模块：引导页面、启动页面、登录/注册页面、首页面、发现页面、发布页面、消息页面及我的页面。

2.项目流程分析

用户通过引导页面进入启动页面，任意点击屏幕可以进入登录/注册页面，输入手机号获取验证码后方可登录成功进入首页面。

四、项目总体设计

1.引导页面

底部显示：“期待与你相遇”的文字，表示对用户使用App的期待。点击底部的圆圈按钮可以进入其他引导页。

2.启动页面

启动页面包含顶部状态栏、中间内容及底部滑动条三大部分。用户可以通过点击登录/注册按钮进入登录注册页面，也可以通过点击登录注册按钮下方的微博、微信及QQ的图标直接登录到首页面。

3.登录/注册页面

登录注册页面主要包括顶部状态栏、中间内容及底部滑动条三大部分。用户可以在输入手机号码后获取并填写验证码实现登录与注册以登录到首页页面。

4.首页页面

首页以类似朋友圈的展示方式，展示全部用户的分享图文视频，用户可点击查看图文视频详情，也可以对图文视频内容直接进行点赞和评论。屏幕的瀑布流布局有效降低了用户界面操作的复杂度，而且也节省了屏幕空间。在触屏设备上交互方式有了更加良好的用户体验，使用户能更好地专注于内容的浏览而不是繁琐的操作。

首页-推荐：推荐页面包含精选推荐、明星推荐及美食推荐三个页面。用户可以根据自己的兴趣，选择进入任意推荐页面，进入后可以看到App推荐的其他用户的优质内容，并可以对其进行点赞及评论。

首页-关注：进入关注页面后用户也可以点击图文进入关注用户的个人主页浏览其发布的个人内容并对其内容进行点赞或者是评论。用户也可以在关注的用户个人主页选择是否要取消对该用户的关注。

5.发现页面

发现页面包含顶部搜索栏、热榜推荐、发现主题推荐及大咖推荐四大部分。用户在发现页面可以看到推荐的各类精选主题及热门大咖，而且用戶可以根据自己的爱好选择自己感兴趣的内容。

6.发布页面

用户进入发布页面可以选择想要发布的图片并进行编辑处理，也可以点击底部的拍照及拍视频按钮进行拍摄，选择并处理好图片后点击下一步进入发布动态页面，用户可以编辑想要发布的文案，也可以选择是否要同步到微博或者保存到相册。用户动态发布成功后会跳转到成功页面，用户也可以在该页面选择是否要分享自己的动态。

7.消息页面

我的消息页面包括吐槽、新关注、你被赞了，私信、TA们也来了及评论和@六大部分。用户可以在我的消息页面查看最新关注的其他用户，自己被赞、被评论的动态消息，也可以看到有关自己的评论与@的动态消息。

8.我的页面

我的页面包括个人设置、用户个人信息及动态内容三大部分。用户可以在个人设置部分中选择并修改自己的个人信息，也可以在我的页面个人信息部分点击添加简历信息内容及编辑个人资料。

参考文献：

1.刘彧.新时代背景下音乐类APP界面交互设计研究[J].艺术品鉴，2021，（6）

2.郑云盼.“成长树”APP中用户交互界面的设计与实现[D].山东：山东大学，2021

3.李智.APP界面设计视觉思维研究[J].新闻传播，2019，（8）

4.王杨.符号学视角下的手机交互设计[J].裴学胜工业工程设计，2020，（6）

5.宋雨薇. “城市农场主”App界面的趣味性设计与应用[D].湖北：湖北工业大学，2020