注册 | 登陆
您的位置:阿里西西 > 前端技术 > 手机APP前端设计 > 详细内容

怎样才能设计出一个具有良好用户体验的手机app UI交互

  稿源:本站整理   2018-09-18   点击:   撤稿纠错
你可能有一个这样的设计概念:未来的应用将允许你与来自全世界的人讨论很多不同的主题。发布,发现以及分享您的个人兴趣。 那么,如何将此概念设计成一个具有良好体验的app呢?我们接着学习。

下面是怎样才能设计出一个具有良好用户体验的手机app UI交互体验讲解的相关内容,文章教程主要讲述与用户体验 手机 app 交互体验 ui 相关的一些技术与知识,更多的内容欢迎大家访问http://www.alixixi.com,获取更多最新教程,下面是教程讲解:

设计流程

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

您可以看到设计思维过程不一定是线性的。同理心(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元素交互并且背景消失。

滚动频道中的转换

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

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


End. 教程到这里讲完了,阅读是否有所收获呢?本站还提供有用户体验 手机 app 交互体验 ui 相关的内容,欢迎继续阅读。

更多关于 用户体验 手机 app 交互体验 ui 的文章
·上一篇:解析手机APP端的隐藏式导航菜单交互设计
·下一篇:已经没有了
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示