下面是怎样才能设计出一个具有良好用户体验的手机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”
导航
第一主页面是用表示主题的全屏图片的类别列表。图片根据频道的变化而变化。
在这个首页面可以访问:
- 不同的设置(通知,帐户,语言,本地化......)
- 您的个人资料(频道跟踪,讨论创建,数据,旧通知,个人信息)
- 一个按钮开始讨论
- 用于查找讨论或频道的搜索功能
- 推送通知,当有人评论讨论时发出通知
- 允许访问对话的频道列表
我想象一个动画效果,可以缩小背景,在这个屏幕上创建一些视角。通过单击某个主题或向上滑动,我们可以载入所选类别,该页面显示会话列表,筛选器。
滚动转换
不要因为图标位置改变而打扰用户,我删除了第一个屏幕的底栏,并在第二个屏幕右上方添加了一个图标来说明“开始讨论”。顶部栏由最重要的元素(搜索,通知,添加讨论),必须始终可见。
为了让阅读有更好的舒适度和沉浸感(全屏),我故意没有在应用设计中添加任何导航栏。
通过滑动进行水平切换频道
我们可以水平切换来查看其他频道,其余内容(顶部栏和过滤器)仍然可以不动。背景图片“淡化”的改变,提示已切换频道。
我们可以在列表中滚动并扩展以显示更多的对话,UI元素交互并且背景消失。
滚动频道中的转换
为了强调类别中的缩放效果,我屏蔽了状态栏,当我们滚动一个类别时,会话卡也可以缩放以占据屏幕的整个宽度。
通过滚动类别,类别标题会上升以显示更多对话。小圆点向用户指示我们可以水平滑动切换以更改类别,并且通知组件(如果它处于活动状态)向右移动。
End. 教程到这里讲完了,阅读是否有所收获呢?本站还提供有用户体验 手机 app 交互体验 ui 相关的内容,欢迎继续阅读。
相关排行总榜
网页教程
网站运营
特效排行
一款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写的一个书架式的图片缩放滚动展示