案例研究：優秀的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

如果覺得我們做的還不錯點個贊和在看吧！ ：）