案例研究：优秀的UI设计是如何诞生出来的？Colony-协作平台的登陆页面设计

欢迎来到 「NEW案例三分钟」 栏目~ 「NEW案例三分钟」 是由美国交互设计资讯连载的关于交互设计的案例分享栏目，每周为大家更新不同类型的UI&UX设计案例，希望大家在阅读案例的研究过程有所收获~

我们之前已推出6期「交互设计新视觉系」推文为大家分享视觉设计知识，

本期案例研究就为大家带来一个真实的案例，我们一起来看看一个优秀的UI设计是如何诞生出来的：

页面重要性

良好的 登录页面 在 成功 的网络营销活动中起着 至关重要 的作用。

它展示了特定的产品或服务，以便访问者可以 快速、不受干扰 地找到所需的信息。有效的登录页面 能够吸引潜在客户的注意力 ，并使他们采取某些有助于 高转化率 的行动。为了使其良好运行， 根据目标受众的偏好进行登录页面的设计 非常 重要 。

任务

带有  数字协作平台 定制插图 的 登录页面 设计。

目标

客户是一家来自伦敦的英国公司Collectively Intelligent Limited，是一个名为Colony的 数字协作平台 的策展方。 该平台使世界各地的人们能够在线共同组建公司。社区可以围绕一个项目联合起来合作，共同控制资金，分享项目的收入——所有这些都不需要与跟他们合作的人建立信任，甚至不知道他们是谁。

客户提出了一个登录页面的 设计要求 ，要以一种简单易懂的方式传达其主张的价值。Colony 是一款复杂的产品，因此 主要任务 是帮助人们了解它的工作原理以及人们可以从中获得什么好处。

登录页面设计

有的人可能会认为，如果登录页面包含有关产品的所有详细信息，客户更有可能对其产生兴趣。

然而，有效登录页面的 主要任务 是将用户的注意力 集中 在 特定的信息 上。它通常通过 简约 的视觉呈现进行管理，这种呈现专注于少数个 UI 元素，如 CTA 按钮和应用程序表单。

为了创建具有适当 视觉中心 的登录页面设计，设计师计划了布局的结构。有效的 视觉层次 有助于人们有序接收信息。 有关视觉层次结构的 知识可阅读往期推文： UI设计中的视觉层次结构：如何有效地组织UI内容，提升用户体验？

定制插图 通 常作为 UI组件 应用于登录页设计中，帮助用户 理解产品的理念及其功能 。因此，下一个任务就是找到将应用于主体部分的主题插图的样式。为了扩大选择范围，平面设计师ArthurAvakyan和DenisBoldyriev进行了 头脑风暴和创造性探索 ：

设计师展示了 不同风格和配色方案 的插图，这些插图的 重点 是展示 Colony 如何帮助世界各地的人们进行交流和成功协作。

客户选择了应用第三种 浅色背景和流畅线条 的设计方向，因为看起来更接近商业风格。根据客户选择的方向，设计师创建了适合登录页面UI元素的插图 变体 ：

当呈现给客户时，客户要求将第四种变体的视觉呈现与第三种用户插图的想法结合起来。

完成所有更改后，我们得到了最终版本。 UI 元素 与 主题插图 和谐地结合在一起，主题插图展示了地球与远距离协作的用户。 调色板 包括几种明亮的颜色——一个主要颜色，带有几个辅助色。

有关色彩的知识可阅读往期推文： UI中的色彩设计（二）：正确地选择颜色和使用颜色配比！

特色插图

下一个任务是为 功能演示 创作 定制插图 。主要 目的 是以简单明了的形式呈现功能，以便用户可以 快速理解 该产品的本质。

如您所见，所有 插图 都有大量的留白和微小的元素， 反映了 公司的复杂原理。

为了制作一致的界面，设计师还 为产品故事创建了插图 ——简要描述了它是什么以及人们为什么需要它。 故事是吸引潜在客户注意力的好方法 ，精美的定制插图增加了从中获得良好印象的机会。以下是为此目的而创作的插图：

代币销售页面设计

Colony 是一种独特的网络，有自己的规则和金钱。 为了引起人们的兴趣并告知他们代币销售的开始，客户想要创建一个页面来显示特殊日期的倒计时。

设计师采用了与 登录页设计 相同的样式和颜色，以提高 品牌 知名度。倒计时以彩色圆圈显示天、小时、分钟和秒。这是销售页面设计的最终版本：

展示新的独特产品可能会成为设计师的挑战。吸引人们的注意力并展示产品的优势方面非常重要。

福利时刻

扫码添加小助手微信
凭 文章转发+截图

领取 书籍福利~

《平面设计200年》(1820年以来18个国家55种设计流派的773个经典案例大全，首版30年来四次增补）

往期推荐 | Read More

案例研究：在游戏中创建的理想世界变成现实？AR社区应用程序—Project Portland

设计资讯：Figma vs Sketch！为什么10 家设计机构从 Sketch 转向 Figma？

设计资讯:「新粗野主义」网页设计 —— 卷土重来？2022必看设计趋势！

文字丨Jelly

编辑丨Jelly

如果觉得我们做的还不错点个赞和在看吧！ ：）