一个专业的产品着陆页是怎么设计出来的呢。

对于许多品牌和网站来说，登陆页面在营销中起着至关重要的作用。打开登陆页面后，用户可以即时了解这个网站是做什么的，提供什么产品和服务，不会被其他信息分散注意力。由于其独特的地位，登陆页在品牌和内容营销中起着重要的作用。要让登陆页正常工作，有足够突出的转化率，就需要基于目标受众进行设计。

但是，对于一个受众广泛，用户类型多样的网站平台，如何设计登陆页面呢？在今天的文章中，我们将看看这样一个着陆页设计案例。如今，这个设计的设计者是柳德米拉·舍甫琴科。

任务

设计登陆页面，需要搭配相应的自定义数字插图。

处理过程

这一需求是由英国公司Collectively Intelligent Limited提出的，该公司拥有一个名为Colony的在线数字协作平台。创建这个平台是为了帮助来自世界各地不同国家和地区的人们通过它共同创建公司。在社区中，不同的用户可以围绕一个目标进行合作，共同创造，共同控制资金，分享项目收入。在这个过程中，这些人甚至不需要互相认识，只需要目标一致，通过平台协作。

客户提出了单独设计登陆页面的需求，希望这个登陆页面能以相对简洁、平易近人的设计传达自己的价值主张。Colony是一个成熟而复杂的产品，所以登陆页的主要功能是帮助人们了解它是如何工作的，以及他们可以从中获得什么好处。

登录页面的设计

有些人认为在登陆页中包含尽可能多的产品细节可以吸引用户。但其实一个登陆页面不应该包含太多的信息，而应该让用户注意到产品的核心价值，突出对用户有利的信息。所以在设计的时候，通常是比较简单明了的视觉设计，由几个有凝聚力的UI元素(比如CTA按钮和表单)来呈现。

围绕核心功能设计登陆页面，设计师需要分层次规划整体布局，以及各部分的优先级。有效的视觉层次有利于用户逐步获取信息。

自定义插图经常出现在登陆页面中，是帮助用户理解产品功能和概念的重要UI组件。所以在第一张图的位置使用插画是相当常见和有效的。Tubik团队的Arthur Avakyan和Denis Boldyriev也参与了第一幅插图的头脑风暴和创意设计，以便设计出更有效的插图。设计师试图以连接地球上不同地区用户的概念进行设计。这是他们基于这个概念设计的插图:

插图由Ludmila Shevchenko设计

Arthur Avakyan设计的插图

Denys Boldyriev设计的插图

设计师想出不同风格的插画，在主题上与整个UI保持一致，营造出友好、平易近人的氛围，同时让人对整个公司形象产生好感。插图展示了Colony如何帮助世界各地的用户交流、沟通和实现目标。

客户在视觉上更倾向于浅色的背景和流畅的轮廓，因为这更符合他们的业务定位。考虑到客户对方向的选择，Ludmila还根据客户的选择画出了一系列变体。

全球互联

连接大地

太空任务

连接世界

当再次向客户提交四个不同的设计时，他们倾向于将第三和第四个图纸的概念结合起来。

经过调整，我们得到了最终版本。第三张图中的UI元素与第三张图中的插画完全融合，而配色则采用了集中明亮但不张扬的颜色，如粉色、黄色、青绿色、紫色等。

特色插图

接下来，设计自定义插图来展示不同的功能。这些插图也将使用与第一张图中插图相同的配色方案。这些插图的存在是为了简洁地展示产品的功能，让用户快速了解产品的功能和本质。此外，插图将配有一些微文案，以帮助用户了解这些功能的特点。这时候就需要文案和设计师参与进来了。

正如你所看到的，所有的插图都使用了大量的空白和微妙的元素来突出产品的复杂性。因为插图中的颜色看起来非常友好，这使得插图非常友好和有吸引力。

为了让整个界面看起来足够一致，设计师还做了一个产品故事插画，说明了人们为什么需要这款产品。故事是吸引潜在客户注意力的好方法，漂亮的自定义插图足以给用户留下好印象。

代币销售页面

殖民地有其独特的网络系统和金融系统。为了拥有足够的所有权，用户需要努力获得更多令牌。他们得到的代币越多，就能通过Colony的网络获得越多的权限。为了吸引用户的兴趣，并通知他们代币销售开始，客户要求我们设计一个特殊的倒计时页面。