UI设计分享：「社交软件APP」设计思路

一个合理的移动端到底应该怎样去规划？

对于大多数成熟的设计师来说，这并不是一个太大的难题。但如果是一个刚接触UI设计的新人来说，在实际设计的时候，遗漏设计细节的情况比比皆是。不同的产品，在UI设计时注重的关键要点都有所不同，今天我们以社交类APP设计界面为例，将Pixso社区中的开源作品详细地展开讲解，如何开展移动端设计。

完整作品案例获取地址：https://pixso.cn/community/file/TLOUpinZJNotaSaf6IVSnA

一、 首页

01 内容

省掉复杂的「非必要存在的功能」，凸显出社交应用的特点，轻量化的展现，把核心业务模块快速地露出。

设计特点：

1、 进入首页即推送交友讯息，直接满足用户群体需求

2、 超大人像展示图片的区域，第一时间抓住进入首页用户的注意力

3、 只提供“关闭”和“喜欢”两种选择，避免过多选择，加快决策

4、 从商业角度出发，用户越快展开沟通，越提升用户留存率

02 底部菜单栏

在底部菜单栏选择了「回到主页」、「聊天页」、「匹配页」和「个人主页」。

第一：将匹配页放置在菜单栏，此功能的目的是让用户快速接触到更多的用户。即便在当前页面没有发现合适的匹配对象，也能快速触达其他对象。

第二：在首页直接突出匹配对象的照片，目的是为了利用巨大的交友流量池来吸引用户并留住用户。我们不仅要用户进入APP，同时也需要引导用户留在APP内，所以在照片下同时分享了地理位置，能够强化用户开展交流的心理，提升用户留存率。

03 左侧菜单栏

为了保留更纯粹更专注的用户体验，菜单栏需要点击后才会出现。这个页面可以进行用户筛选，只有三个关键信息：性别、地区和年龄。

二、 浏览页

在随机聊天页中，保留了最基础的「点赞」「关闭」「左滑」，首先是从推荐的角度出发，进入页面后可以快速地获取到配对对象的信息，不需要再填写预设偏好来寻找合适的对象。

同时，在「点赞」按钮旁会显示当前对象的点赞值，直观地展现该用户当前的“人气值”。我们从用户心理的角度出发，推动用户形成“紧迫感”，减少决策犹豫时间。

功能不是越少越好，而是要「刚刚好」，意思就是要满足用户基本的用户诉求和基本功能；在设计中提高用户交互动作，提升留存率。

随机聊天页是很重要的页面，用户会在该页面长时间停留。为了方便用户一方面能快速看到聊天信息，一方面还是能保留新加入用户的讯息，该页面的处理分为两个部分。

上半部分：将新用户信息以头像方式小窗陈列，同时加入“看更多”选择，引导用户查看更多用户信息，进行下一步沟通。
下半部分： 呈现用户留言，这一部分的处理类似微信等常规的社交APP，能够快速读取最近一条聊天信息。

三、 匹配页

匹配页的设计里，考虑到社交软件的特性，仍然采用的是突出用户照片的设计方案，去掉了多余的信息介绍，只保留了平台一贯突出的「年龄」与「距离」。

同时，在搜索框中，可以选择年龄和距离以外的关键词，例如兴趣、性格等，给用户增加了多种可能性，不仅仅是按照默认的几个固定标签。

总结

1、 符合社交APP的调性与用户场景

做用户软件，一定要进行完备的用户调研，前期的数据分析工作才能支撑你完成整个APP的设计。在社交APP中，更需要换位思考，去了解用户的体验以及使用场景。

2、 将“要不要选”，转换为“选哪一种”

每多一次选择，可能就会流失一部分用户。就好比“不应该问用户要不要吃饭，而是直接给他两种餐点，需要吃哪种”，这样才能提升用户留存率。

需要获取该作品源文件的小伙伴，请戳↓

移动端 社交软件设计作：pixso.cn/community/file/TLOUpinZJNotaSaf6IVSnA