发布时间:2019-10-10 分类: 行业资讯
当典型的UI设计师到达新公司时,他或她会遇到两种情况:
该公司的产品愿景框架,包括规格和施工团队,非常完整。乍看之下,产品体验非常好,而且只有少数优化的地方。与第一种情况相反。
然后我们从第二个不好的情况开始,总结如何从1过渡到2,以改善设计和用户体验。
一,梳理的基本问题
面试官是否经常喜欢提出这样的问题:您认为我们的APP中有什么可以优化的吗?
1.一致性原则
一致性原则是Jacob&Bulll十大互动设计原则之一;尼尔森在实际项目实践中具有强大的指导作用。
由于各种原因,一些产品的视觉设计不是标准化的,并且由不同批次的设计者完成,导致APP中许多界面的视觉风格不一致。
一致性体现的方面
控制结构:例如,卡底部的操作区域显示的均匀性(甜/评/共享固定控制方式)。可视化规范:每个界面中原色和其他二次色的均匀性,文本样式的均匀性和主文本的大小。操作反馈:统一使用APP的相同功能时用户的操作,获得统一的反馈。例如,单击弹出窗口关闭按钮将具有统一的滑落反馈。
一致性的重要性
由于相同的控制风格/操作反馈对用户触发相同的事情,因此不同的界面可视语言会破坏用户界面的惯性并损害产品的可用性。
同时,视觉不规则性只会影响后续版本的设计团队对迭代视觉规范的管理,同时也对产品的品牌化产生一定的影响,给产品带来不满的感觉。
虽然产品经理有时不关心APP界面的不一致性,但作为UI设计师,他们应该被说服。
2.视觉品牌
通常,我们通过视觉优化产品体验来定义UI设计的角色,以传达品牌概念。 APP产品与我们常见的离线产品不同,用户感觉几乎完全依赖于在线界面提供的信息。因此,除了自己的产品LOGO之外,整个APP UI正在向用户传达产品的定位和品牌音调。
因此,如果APP没有自己的色调并且类似于N级竞争像素级别,那么产品本身将难以从众多小屋中逃脱。
3.用户体验漏洞
我们不是在这里提到用户体验的改善,更不用说简单地说存在差距。您可能认为只有刚刚完成1.0版本的APP才会有这样的差距,而成熟的APP则不会。
这是一个成熟的工具APP的例子——墨水天气。
Photo/Select Image部分调用iOS本机控件,这显然是缺少设计细节。
另外,我想知道这个页面右上角的图标将是一个什么内容的界面(虽然APP第一次有一个黄色条)。
最后,我们回到了主页。让我感到惊讶的是,APP第一次没有提示屏幕,以便查看接下来5天的天气情况。
当然,也许墨水天气有其数据考虑因素,我们只能从视觉用户体验水平稍微分析一下。
每个人都应该发现,在这部分中,我没有提到大框架上的界面设计优化,因为事实上,在实际获取APP的具体数据到产品经理手中之前,了解实际的用户组和当前他们所针对的发展方向,APP设计优化也只是在浅层视觉优化层面。因此,真正的设计改进优化仍然必须从了解产品本身开始。
二,如何改进设计
您的设计从“可用”到“易于使用”有多远?
1.学习打包
当然,这里提到的包装并不意味着您将作品打包成一个带有各种模拟和排版的blingbling显示。把它扔到车站凉爽意味着你的包装成功。
有些学生还偷偷摸摸地问我为什么面试失败了。在阅读了TA的工作后,我发现了一个非常严重的问题。当工作没有落地时,我在视觉包装上留下了太多而不是内容包装。
如果您是在公司工作的UI设计师,那么工作中的真正问题是,从产品经理到设计经理,没有人会轻易同意您的设计(除非您是行业认可的大咖啡)。开发可以开始将您的设计从颜色匹配变为风格。那么你如何从一开始就获得主动权?
用完整思考路径代替结果
无论是颜色匹配还是图标风格,我相信您将拥有自己的思维过程,并将“证据”(竞争产品或大咖啡APP的效果)添加到完成的分析中,最后用完整的替换简单的分析。单页设计草案。
即使有不同的声音,至少你会让自己站在早期阶段,获得主动权,并且非常有说服力。
以下是每个人为公司提供基金详情页面优化的参考路径。
△基金会详情页面在用户体验修改后增加了3个百分点
提供更多解决方案
正如我们在《超全面!从0到1正确开启UX项目的方式》文章中所说,设计师正在解决问题,然后在找到解决问题的过程中,隐藏单个结果是不可能的。
建议通过思考(而不是太多)来制作各种解决方案,这是一个与您分享的示例。
2.设计同理心
这个概念也是我在分享腾讯大咖啡设计师后听到的概念。我觉得我受益匪浅。
简化是学会考虑用户对场景的使用,从用户的角度映射场景的使用,考虑设计的可能性,并将设计从可用变为有用。我们来谈谈下面的例子。
△这是腾讯大咖啡手机购买票的一个版本。在APP版本发生变化之前,它似乎正常工作。
△这是APP优化后的最终结果
个人觉得这是一个特别完美的例子。在比较之前和之后,我们可以清楚地看到,这不仅仅是视觉优化的过程,而是更多关于信息的集成和存储。
同时,它模拟用户的使用情况,模拟实体票快线上的票务信息,并使用不同的地铁线路对地铁站进行分类,而不是难以点击的字母分类(虽然个人觉得这件作品可以重新优化,目前它也是少搜索功能)。
这些变化大大提高了用户的使用效率,并且从UI级别真正接近地铁票APP的核心:方便购票。
3.培养产品思维
数据化思维
许多热心的设计师都注重设计创意和互动理论的积累,而忽略了数据分析的重要性。这可能需要在实际工作项目中加以理解。
在整个项目中,数据分析基本上可以分为:
以前的研究数据,中期测试数据,后期制作数据
以下是猎豹作为清洁大师时遇到的设计变更示例。
由于部分数据在中期测试中,用户反馈在主页修改后显得很明显(因为APP长时间没有经过重新设计,旧版本有更深的主色),所以主色已经重新调整了修订版本,并使用了亮度接近原始版本的蓝色。
营销思维
在关注数据后,我们可以根据基础设计,而不是如何设计好,但如何设计用户更容易付费。最近的一篇文章非常受欢迎《这5个丑出新高度的代购源码网站,为什么那么多人夸》,让我想起了Expedia之前为日本市场重新制作的“基础燃气”销售代购源码网站。
△左边是美国的Expedia,右边是日本的Expedia。 2014
日本是一个非常重视信贷的国家。美国版的Expedia对大多数日本人来说内容太少,而且没有足够的信任。
这个例子实际上告诉我们,所有UI设计都应该基于实际数据,而不是设计师的美学或外国书中讲述的互动法。设计意识和法律是参考,但决定一切的是产品开发策略和实际数据。不同的国家和不同的国情不一定适用,例如,欧洲人和美国人的阅读习惯与普通人的阅读习惯不同。
第三,误解了互动
在许多人的眼中,效果与辅助效果相同。它真的如此肋骨吗?
1.互动的目的是有区别的
可以在AP P中使用的交互式效果可以根据其用途分为几种类型:
反馈型交互动效
使用某个功能后,反馈用户当前APP功能状态切换的交互效果。覆盖范围也很广,例如下拉加载,tabbar上的微动,等等。
功能型交互动效
特定工具,现场直播等所需的元素效果。例如,在直播期间飞行的飞机,以及清洁应用程序时转动的风扇。这种动态效果通过准物理设计增强了与用户的交互,完成了某些重要功能,这是显示功能的最佳方式。
过渡型交互动效
在页面跳转和功能融合中起重要作用的交互。良好的过渡效果避免了界面快速切换时用户的损失,给人以极佳的舒适感。
趣味型交互动效
互动效果增添了锦上添花,增添了乐趣和品牌色调。
△以上例子来自运球
在这里,我们打开了暴涨的草稿和纯艺术创作,说在实际项目中交互式效果的应用并不是越多越好。
在实际项目中,不同类型的APP对动态效果有不同的要求。与新闻和深度阅读产品类似,过度和不必要的运动使用会干扰阅读。我们应该考虑实际情况的影响。第一选择。
2. Lottie开源动画库
通常我们会做很多复杂的app效果,在实际登陆过程中会遇到很多问题,比如:Gif图形乱码,占用内存太多,开发成本太高。
然后Airbnb的开源动画库Lottie非常有效地解决了这一系列问题。 Lottie可以直接使用AE导出的JSON动画文件,将它们解析为本机代码,并在iOS和Android设备平台上运行它们。