设计具有良好体验的app案例讲解

你可能有一个这样的设计概念：未来的应用将允许你与来自全世界的人讨论很多不同的主题。发布，发现以及分享您的个人兴趣。

那么，如何将此概念设计成一个具有良好体验的app呢？我们接着学习。

设计流程

下面是我每天如何进行优化产品概念或改进的示意图。

您可以看到设计思维过程不一定是线性的。同理心（Empathize）涉及整个项目，允许将自己置于用户的位置，以提高用户友好性。

我的设计过程

首先，我尝试对这个应用概念相类似的产品进行借鉴参考，然后想象出一个混合了多个应用的接近功能的感念。

然后，我用日常手表做研究。我寻找的应用或网站提出的概念接近于简要中要求的概念。我想了几个应用或网站的混合，以便研究这些想法。将应用的“大图”可视化是很重要的，然后会在以后的设计过程中进行改进。

寻找灵感

1，Pinterest的“引导页”设计，您可以在注册后选择喜欢的主题。

2，Snapchat用于水平和垂直的导航设计。

3，论坛或新闻app的轻量级主题列表（Designers news，Sidebar.io，stackoverflow.com，tomsguide.fr/forum/，dropboxforum.com）

4，Fubiz的设计风格和照片展示。

5，Product Hunt的按钮，提出有趣的主题。

6，Slack的对话部分。

然后，我决定看看竞争对手。我在几个国家AppStore上寻找灵感，我下载了与以下关键词相关的所有app：“论坛，社区，公共聊天，讨论，聊天组”。

根据竞争分析，我注意到大多数应用在设计体验方面非常相似，而且在内容方面也是类似。

分析

设计：设计简单而纯粹，但看起来常常像论坛风格，常被认为是一个支持的工具，而不是一个愉快的聊天应用。

经验：我喜欢在这方面进行创新，这对我来说是一个应用的主要部分。

以下是我希望改善体验的要点：导航，互动，动画和UI动效，UI声音，艺术方向。

内容： “论坛风格”方法显示已发布的内容。产生的对话主要是解决问题，这意味着很多人使用这种类型的应用来获得支持，但不要将它用于相互支持，因此许多问题仍然没有答案。

有趣的是，有不同的兴趣，它不是一个专业的社区，这意味着我们可以围绕热门话题进行对话。如果团队围绕热门话题为社区制作动画，则用户可以就不同主题交换他们的观点。

我决定采用不同的方法。我的目标是使应用具有建设性，用户使用它来阅读和了解不同对话主题的其他观点，同时也可以添加自己的对话主题。用户必须认为该应用是为他制作的，这样他才能让自己接受他喜欢的不同主题。

形成概念

我想给应用一个名字，所以我把它称为“ zone ”，意思是“空间”。

在法语中，我们也可以说一个“ 对话区 ”来谈论人们讨论的空间。我发现这很有趣，简短，令人难忘和国际化。

由于有多个频道和子类别，我想通过图片而不是图标来说明不同的主题，因为图标不够精确。我在Unsplash上​​使用了几个图像来突出显示聊天频道。

一些照片来说明频道

除此之外，我认为用户必须进行最少的选择，以便他的体验更有趣，并在应用上增加更多活动。

流程图和线框图

下面的方案代表了应用的不同页面。我有意减少页面数量以获得更好的互动体验，并将主页置于应用程序的中心。

绘制功能流程

我使用元素动画制作了水平和垂直导航，只需使用滑动即可显示更多内容。

垂直导航可以显示多个选项，例如设置和配置文件。水平导航可以改变频道。滑动将更加直觉和快速，并且使用户可以仅用一只手进行导航。

快速线框图

通过单击主题或向上滑动，可以打开内容列表，同时显示筛选帖子的菜单。

这个想法是让用户根据他的意愿（趋势，热门，最近，标签，日期......）对帖子列表进行排序，从而避免突出显示某些对话而不是其他对话。

Twitter激发了我对“列表”方面的启发，因为我不想强迫用户发布图片来说明他们的对话。这会抑制言论，并有助于限制劣质图片。

界面设计

我在Sketch App中设计了“主页”屏幕的几个部分。

同时，我设计了嵌套符号。您可以使用嵌套符号来节省时间并改善工作流程。

创建嵌套符号（组件）

每个讨论主题包括 ：

- 讨论标题

- 子类别标签

- 一个upvote按钮

- 一个约会

- 讨论的人数

- 媒体（可选）

符号允许您轻松地重复使用元素

UI交互原型设计

然后我使用“Principle App”来制作动画和UI交互的原型。我根据垂直和水平滚动制作了几个动画组件。

来看看新的应用“zone”

导航

第一主页面是用表示主题的全屏图片的类别列表。图片根据频道的变化而变化。

在这个首页面可以访问：

1. 不同的设置（通知，帐户，语言，本地化......）
2. 您的个人资料（频道跟踪，讨论创建，数据，旧通知，个人信息）
3. 一个按钮开始讨论
4. 用于查找讨论或频道的搜索功能
5. 推送通知，当有人评论讨论时发出通知
6. 允许访问对话的频道列表

我想象一个动画效果，可以缩小背景，在这个屏幕上创建一些视角。通过单击某个主题或向上滑动，我们可以载入所选​​类别，该页面显示会话列表，筛选器。

滚动转换

不要因为图标位置改变而打扰用户，我删除了第一个屏幕的底栏，并在第二个屏幕右上方添加了一个图标来说明“开始讨论”。顶部栏由最重要的元素（搜索，通知，添加讨论），必须始终可见。

为了让阅读有更好的舒适度和沉浸感（全屏），我故意没有在应用设计中添加任何导航栏。

通过滑动进行水平切换频道

我们可以水平切换来查看其他频道，其余内容（顶部栏和过滤器）仍然可以不动。背景图片“淡化”的改变，提示已切换频道。

我们可以在列表中滚动并扩展以显示更多的对话，UI元素交互并且背景消失。

滚动频道中的转换

为了强调类别中的缩放效果，我屏蔽了状态栏，当我们滚动一个类别时，会话卡也可以缩放以占据屏幕的整个宽度。

通过滚动类别，类别标题会上升以显示更多对话。小圆点向用户指示我们可以水平滑动切换以更改类别，并且通知组件（如果它处于活动状态）向右移动。