以Xeropan改版为例,探讨怎样的UI设计才算是成功

记得曾经有个客户跟我们说,UI设计很简单,只要界面做得好看,能吸引使用者的目光,并给使用者带来舒适的视觉体验,那就证明这个UI设计是成功的。

但UI设计真的如这位客户说得那麽简单吗?下面,Inspirr将会以一个叫Xeropan的趣味游戏英文学习APP的改版过程为例,和大家说说到底「怎样的UI设计才算是成功的」。

Xeropan改版前存在哪些问题?

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

▲ Xeropan改版前是长这个样子的

Xeropan改版前的UI设计其实并没有想像中难看,甚至路人点赞评分也不低,唯一美中不足的是付费转化率却远远低於预期

为什麽会出现这种情况?事实上,根据使用者的反映,他们不愿意付费并非产品不够好,也不是产品价格过高,而是感觉这个APP设计比较低龄化,不适合自己的年龄段和身份;以及免费与付费之间的权限差异并不大。

因此,要解决这一问题,Xeropan需要做的就是「改变低龄化形象,同时让定位与付费用户更加贴合」

【Xeropan APP的改版过程 逐步找准产品定位】

第一版:低龄化严重 产品专业性不高

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

为了搞清楚为什麽使用者会对产品形象产生误判,设计师与用户进行了访谈实验,发现:

· 产品icon与学英语关系不大,反而让人认为这是一个医药健康类APP

· UI设计看起来非常幼稚,不够专业,不够严肃

第二版:icon换成年轻教授

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

针对第一版存在的问题,设计师将icon改为年轻教授,看起来更专业,更像老师;针对使用者反馈「插画复杂,难以理解」的情况,设计师去掉了很多元素,同时为了让等级和话题更清晰,加强界面的色彩方案对比,并有一根线串联。

用户反馈:

整体UI设计更加简单明了,但两个版本的方案差异太小,产品依然看起来比较低龄化。

第三版:去掉插画故事

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

针对第二版所存在的问题,设计师去掉了icon中教授的外套,让他看起来更加年轻;将之前岛屿和时间旅行的概念去掉,选择更清晰易懂的信息布局。

用户反馈:

整体UI设计一扫之前两个版本的低龄化感觉,产品定位更符合大众、成人和专业人士;但正因为界面更偏向商务人士使用,反而让人困惑到底这款产品是用来做什麽的。

第四版:重新设计插画故事

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

之前版本的UI设计太过专业,反而会误导用户,於是这次改版还是回归游戏化元素,继续以时间旅行和角色概念为主,但整体视觉风格变得更加简洁、成熟化。

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

使用者刚进入产品时,可以根据自己的语言和难度等级,了解故事的发展。

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

插画比之前更简洁,布局也更加统一,让用户能快速理解产品定位。此外,每个主题都有详细的介绍,能激发使用者的探索欲。

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

强调颜色与等级之间的关联性,让用户能快速判断所处的阶段。

以Xeropan改版为例,探讨怎样的UI设计才算是成功

UI设计案例介绍

产品除了提供原有常规课程,使用者还可以通过完成常规课程收集星星解锁额外的奖励课程。

用户反馈:

本次改版在保持原有产品游戏化和故事性的特徵前提下,改变整体视觉风格和概念,让产品定位更符合大众,并确保使用者一看就知道这个APP是用来学习语言,而且还和旅游相关。免费和付费版本差异拉大了,吸引更多付费意愿强的年轻用户使用,从而提高付费转化率。

最後,我想说…

很多企业做认为UI设计很简单,界面改版画来画去就那几个版式。上述改版案例却告诉我们,最终的成品背後是需要做很多个方案和测试才能找准方向的。再者,或许将这四个版本给使用者点赞评分,很可能第一版分数最高,但最後真正能帮产品赚钱还是最後一版。

可见,UI设计的难点不是画图,而是找准方向、不断测试、让产品满足UX设计……而这些流程才是UI设计成功的关键所在。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/41900.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • 什么是 WCAG?帮你从零开始掌握WCAG色彩对比度。

    最近在学习大厂设计系统时,发现了 WCAG 标准。这个概念之前也听说过,但是没怎么当回事儿,这次沉下心来了解了一番,发现里面包含了不少科学的方法。我觉得 B 端设计师还是有必要了解下这块内容。 一、什么是 WCAG…

    2023年3月2日 SEO操作
    043
  • UI设计技巧:如何提高UI设计的可用性

    如何提高UI设计的可用性?无论是网页设计还是APP设计,要确保产品的可访问性是一件知易行难的事情。很多UX设计师的工作都是由一系列的小决定堆叠起来,最终积累构建成一个庞大的产品。但同样这些小决策所带来的小问…

    2022年6月25日 建站资讯
    0209
  • 网页设计技巧:界面色彩太乱怎麽办

    界面色彩太乱怎麽办?色彩搭配,一直是网页设计中的重中之重。但由於不同人对色彩的把控力和敏感度不尽相同,导致市面上的网页设计作品质量参差不齐。因此,要想提升网页设计的视觉效果,掌握一些配色规则是非常重要…

    2022年6月25日 建站资讯
    0137
  • 网页文字不能复制最简单的解决办法

    有没有遇到过,网页内容是自己想要的,却不能复制下来,文字一大堆,一个字一个字打也挺累人,此时,你需要本文章来解决你的需求。 准备工具:Google Chrome浏览器,windows内置纯文字处理程序:记事本。 步骤:打…

    2022年6月13日
    0567
  • 界面动效如何避错

    1、 考虑手绘性质:手绘和工具的实际设计,需要切实的考虑到参数,手绘很多时候只是方便於创意和灵感,但是对於参数方面却没有特别的限制。2、 不要为了视觉效果而牺牲叙述:界面中的交互需要承载着合理的叙述性质…

    2022年6月13日
    0144
  • 网页设计技巧:新手需学习哪些颜色搭配技巧

    进行网页设计时,颜色搭配是非常重要的,这就像衣服搭配一样,如果颜色搭配不对,Cutting再好的衣服都会让人感到非常奇怪。所以,网页设计足够好,颜色搭配是功不可没的。接下来,南宁网页集团将为大家分享,新手需…

    2022年6月25日 建站资讯
    0135
  • 2022 设计趋势!Web3 圈子正在流行的新设计风格-Boxmoji。

    无独有偶,设计师 Diego Salvatierra 还提出一种新的「Boxmoji」的设计趋势,而他所总结出的这种设计趋势,和 Michal Malewicz 所提出的「新粗野主义」风格有不少共通的地方。 「boxmoji」有啥特征? 所谓「Boxmoji…

    2023年3月1日 SEO操作
    07
  • 怎样保持页面出错时用户的良好体验?

    在出现错误时帮助用户迅速复原 也就是还原功能的设计,这是很多页面设计会忽略的问题,最常见的雷区是无法支持用户快速回到原始的状态,而是要用户重新再来! 尽可能保留用户原始的操作信息 简单来说就是支持用户实…

    2022年6月17日
    0109

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息