交互案例研究-7天重新设计APP的用户界面，可能吗？

灵魂拷问：

你会因为不喜欢一个APP的界面设计而拒绝使用吗？

今天，小编就为大家分享设计师William Granefors的一个项目。他是AKQA公司的产品设计实习生，他将用7天的时间对金融类应用程序PayPal的界面进行了重新设计。

7天时间真的能重新设计一款APP的用户界面吗？在这个过程中我们又需要考虑哪些因素呢？赶紧来和小编一起看看吧~

设计背景

当William Granefors有机会在Hyper Island的用户体验设计学习的最后一个阶段尝试完成一个个人项目时，他知道自己想把重点放在项目的视觉设计方面——探索UI空间。建立一个坚实的设计系统，特别是一个受原子设计启发的组件结构是其进入这个项目的主要目标之一。虽然William Granefors对用户体验的视觉方面感到还算满意，但能够通过使用设计系统使自己的工作流程更加有效，却是他一直想要探索的事情。

设计目标

William Granefors通过一星期的时间来为其作品集设计一些可靠的用户界面，以此为即将到来的实习生招聘做准备。7天只是一个计划，它也会改变，设计者希望确保自己通过一个非常灵活的方法，实现在灵感板、笔和纸以及Figma的高保真设计之间的灵活使用。设计不是线性和静态的，而是创造性的自由流动，所以这种方法对他按时完成任务至关重要。

他对该项目拟定了以下设计目标：

- 至少有5个一致的高水准UI屏幕

- 在设计元素方面达到行业标准的结构

- 一个基于原子设计的设计系统

设计步骤

Day 1

确定重新设计项目

用户测试

William Granefors决定了此次需要重新设计的项目——PayPal。首先，他开始了用户测试。需要注意的是，这不是一个用户体验项目，它是一个只针对用户界面的重新设计。但是由于功能和设计元素的构建交织在一起，设计者决定需要先了解目前用户体验的问题。

他一共对四个人进行了调查，这喜人对PayPal应用并不熟悉，但目前在他们的日常工作中都会使用在线货币交易应用。设计者让他们对原始界面进行了操作，同时让他们说出自己所期待的操作、为什么想这么操作，以及他们对它的希望。同时，William Granefors也会通过观察进行相关记录。此外，为了更好地发现问题，他也给布置了他们一些需要完成的任务，比如：

- “给某人转账”

- “查看账户的余额”

- “改变尾号是XXXX的细节”

在测试结束时，William Granefors问了一些关于他们所做的某些操作和一般界面设计的问题，并从中得到了一些启示：

- UI中缺乏可扫描性和提示性，例如“编辑”和“删除卡片”有相同的风格

- 这款应用程序的流程是熟悉的，且可预测的和无缝的，这也进一步鼓励设计者把这个项目作为一个UI专属项目

- 主卡没有被识别为可点击

用户界面分析

在分析界面的某些部分时，William Granefors也考虑到了Nielsen Norman的10个可用性启发式方法。其中第一条，系统状态的可见性，对其来说是最突出的。这个启发式方法的一个成功例子就是地图上的“You are here”标记。PayPal的标签栏就如同“地图”，但“Pin”(选定的页面)由于反差太大，很难与其他两个选项区分开来。

Day 2

获得灵感

在进入设计阶段，灵感是第一位的。所以William Granefors在Dribbble上做了一个情绪板。进而帮助他掌握如何以实验性的方式使用布局、颜色和排版。

Day 3

创建Figma

今天的目标是设定设计。在从头开始构建一个界面时，这通常需要一个用笔和纸、枯燥的灰色方框和lorem ipsum的阶段。幸运的是，设计者有一个完整的现有应用程序作为参考，而这个应用程序的流程和内容已经被证明是有效的。

William Granefors充实了主屏幕，使之成为一个中/高保真屏幕，并作为其余框架的参考。这个屏幕定义了排版、颜色的使用、按钮和间距。此外值得注意的是，他仍然在灵感板、Figma和Sketchbook之间无缝切换。

此外对于某些单独的组件，设计师也迅速探索了主卡这类的不同布局。

Day 4-6

建立一致

在有了文字和颜色的样式，以及按钮、图标和间距的定义后，William Granefors在设计系统中预先定义了样式。这对确保各框架的一致性有很大的帮助，同时也加快了设计的过程。这不仅可以很容易地点击一个样式并将其应用于一个元素，而且如果我们知道每个样式应该放在哪里，设计一个界面就变成一个无需思考的过程。

该应用程序只适用于国内目的地，这意味着对印度旅游目的地的活跃度会相对较高。设计师将在需要的时候讨论其在本案例研究中所作的假设。

用户测试原子设计系统的挑战

William Granefors遇到的一个挑战是组件结构。如前文所述，他想复制一个类似于原子的设计系统，但这也阻碍了他的进程。原子是很容易定义的，但把这些东西移到分子和有机体中，并有适当的自动布局，使之与工业界一样，这在短时间内却是很困难的。他低估了开发一个完全连接的设计系统的所需要付出的努力。随着时间的流逝，William Granefors决定坚持使用自己的原子，并在需要时将它们结合起来。

这就产生了一个首先需要解决的且非常具体的问题。当把界面镜像到自己手机上时，设计者意识到由于可读性问题，圆圈应该是44x44，而不是36x36。由于所有的圆圈都是同一个主要组件的实例，他可以很快地改成所需的尺寸，但这就把与其他相近的组件的对齐方式搞乱了，因为它们之间没有联系。虽然修复对齐方式只花了2分钟，但如果是一个完全连接的分子，则总共需要2秒钟。这些都是其想在用户界面工作流程中改进的小细节。