Ethan

小编:原质化设计(material design)强调结合实体物理属性和规律的、合理的动效以及高效的空间化利用。与物理世界接近的触感能够让用户更为自然、高速地理解和认知。我们可以把原质化设计看作一个视觉设计语言,试图构建跨平台(移动、桌面、平板、可穿戴等)的、一致的产品视觉交互体验。

首先,Robinhood 是一个零佣金股票交易APP,允许用户购买和出售股票,实时查看市场数据,并构建个性化的股票关注列表。

打造一个强大的金融APP,允许人们查看,买进和卖出股票是一项复杂的任务。 Robinhood通过让用户获得快速轻松的产品学习熟悉的体验来解决了这一挑战,该体验使用动画来帮助用户定位APP的核心功能。 滑动轻扫手势可以快速导航,颜色的区分运用可以更新用户对股票及其个人投资组合的重大变化。Robinhood巧妙且高标准地运用了原质化设计的原则,使得该APP在2016年上半年获得了4.65的平均评级,超过9000次评论。Robinhood还获得了2016年Google Play设计卓越奖。

 

 1.通过动画和图片来提高用户学习熟悉产品的体验

Robinhood通过一系列精简的动画形式的过渡来轻松引导用户,从而简化了复杂的产品熟悉体验。每个提示都包含一张统一风格的白色插图,与明亮的绿色背景形成鲜明对比,微妙而恰到好处地运用了钱币上的颜色。Robinhood的创意总监Zane Bevan认为,简化视觉设计有助于简化APP的复杂功能。

我们利用大胆的颜色和排版,在应用程序中创建视觉层次结构,这样可以将重点放在用户的注意力上并减少混乱。— Robinhood创意总监Zane Bevan 

此外,触摸波纹有助于增强用户的信心,特别是当人们被要求分享机密的个人信息时; 一个低调的进度条让人们知道APP正在处理信息而不妨碍用户操作流程。

1

Robinhood使用与文字相关的插图来帮助用户完成手头的任务。例如,当应用程序要求链接银行帐户时,它显示支票簿和信用卡的图像。

 

 2.使用颜色传达关键变化

股价可能会在一分钟内波动,让用户了解波动对其投资组合的影响对于建立用户对产品的信任至关重要。用颜色帮助用户从视觉上观察股票价格趋势是一个很好的方法,让用户一目了然地了解价格是涨还是跌。如果股票的整体投资组合表现良好,则UI是绿色背景上搭配浅绿色图表。依据股价走势,个人股票动态的表示也可能由绿色变为红色。满屏的背景颜色让用户知道市场何时开放或关闭 — 交易时段后,背景从白色转变为暗淡的灰色。

通过这个简洁漂亮的系统,用户可以启动应用程序,查看股票市场是否运转良好和各种活动,而不用读一个文字。— Robinhood创意总监Zane Bevan

 2

UI的颜色根据市场的状态和股票的价值而变化。

 

 3.增加卡片的可发现性

卡片用于新闻更新,并标有绿色徽章以指示未读事件或消息的数量。用户可以通过简单的向左滑动来轻松取消卡片。

更重要的是,卡片用于表示个人投资组合中的每支股票。这允许用户轻松组织相关信息。当用户点击时,卡片将以动画形式过渡,从其初始位置开始填充填充屏幕。股价由较大的数字和图片来表示,两者都会在票价发生变化时用动画的形式提示用户。 

如果用户对某些股票感兴趣,可以加关注,可以随时取消关注,也可以把某些股票添加到个人的“观察列表”中进行跟踪作为潜在可能会购买的股票。搜索功能使用显示动画和向用户提供自动填充的搜索内容,使用户更容易找到更多的公司并添加到他们的“观察列表”。最后,Snackbar (Snackbar是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方)的运用可以通知用户什么时候从列表中添加或删除了一支股票。

卡片模式对于信息的分组非常有用。他们允许我们预先向我们的用户提供少量的信息,但是也提供机会给想要更深入了解的用户。— Robinhood创意总监Zane Bevan

Robinhood

3

使用卡片来分组信息,如股价,最近的消息和通知。

 

 4.获得积极的用户反馈并与用户互动

像一开始提到的,来自Robinhood用户的反馈意见非常棒,平均评级为4.65,超过9,000条评论。设计团队认为,原质化设计在实现这一目标方面发挥了巨大的作用:“原质化设计在他们的应用程序用户体验中是一个非常积极的因素。 我们频繁听到用户评价我们的设计是干净,易用,美观的。”这是对细节和视觉设计的关注 — Google Play团队在2016年颁奖典礼上引用的,证明Robinhood的重新设计是高标准的。

 

原文地址:design

译者:学UI网翻译社-鼹鼠

 

转载请注明:学UI网 » Robinhood: 如何运用原质化设计(material design) 提升用户体验

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
腾讯设计师:互联网金融体验设计方法总结腾讯设计师:互联网金融体验设计方法总结
设计思考:B端产品的6条交互设计经验设计思考:B端产品的6条交互设计经验
通过微信Android和iOS版看两大系统差异通过微信Android和iOS版看两大系统差异
标签栏ICON的设计与应用标签栏ICON的设计与应用
三分钟搞清iPhone X 设计尺寸和适配三分钟搞清iPhone X 设计尺寸和适配
浅谈立体书形式在设计中的应用浅谈立体书形式在设计中的应用
组件化设计思维 – 从规范到工具的构建与探索组件化设计思维 – 从规范到工具的构建与探索
版式设计:主要元素提取版式设计:主要元素提取
云计算交互设计师的必备知识!云计算交互设计师的必备知识!
腾讯设计师:浅谈小红点的设计腾讯设计师:浅谈小红点的设计