案例研究：优秀的UI设计是如何诞生出来的？Colony-协作平台的登陆页面设计
UI & UX
Article：2022/05/28
欢迎来到「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
如果觉得我们做的还不错点个赞和在看吧！：）