編者按：這是 UI 設計師 Diana Malewicz 的第二篇 UI 設計分享。這一次，她要設計的是一個控制面板的界面，如何控制不同UI元素的平衡，如何從零開始構建，相當值得學習~

歡迎來到我的「UI設計指南」第二篇！如果你對於我的第一篇文章印象不錯的話，那麼這一篇應該也會合你胃口：

閱讀文章 >>

當然，請注意一點，我創建 UI 界面的過程中，繞過了通常 UI 和產品設計應該有的「用戶調研」——「用戶研究」——「體驗分析」這樣的前置步驟，而是直接開始創建乾淨、一致的 UI 界面。在真實的設計項目當中，開頭的這些步驟是無法忽略的！

基本思路和低保真線框圖

這一次我們要設計的是儀錶盤界面。那麼我們從基本的想法開始。

這一次，我們將會設計一個服務於醫療行業的控制面板（實際上，這個設計的初衷來源於我的姨媽，她是一名醫生，不僅要治療病人還要處理大量的文書工作），而整個設計我將會在 Sketch 中完成。

通常，我會從一個非常低保真的線框圖開始。我會創建一系列的矩形線框，然後將他們按照需求和大小進行排列，直到最終滿足我的想法為止。我選擇了一些隨機的、但是相近的色彩，確保我能看清位置就可以了。

然後我針對哪些內容在哪裡显示，進行了基本的說明。

這就是一個非常原始的界面框架了。

在下一步當中，我將會開始選取字體、配色和樣式，就像我的上一篇文章一樣，我們將會創建一系列小的設計系統或者說樣式表，供我取用和調試。

字體選取

對於這個控制面板，我選擇的是「Sofia Pro」作為主要的現實字體，並且只有這一個字體。

實際上，想要創建一套漂亮的 UI 界面，並不需要很多字體。

我更喜歡使用 1~2 種字體來進行設計（標題和正文各一種）。

Sofia Pro 非常漂亮，給人感覺非常雅緻舒適，氣質上和 Futura 有點像，易讀性也不錯。如果你有 Adobe 創意雲服務，那麼可以直接調用。

不需要使用太多字體，而要盡量使用字體的粗細對比，大小對比來營造視覺層次，這樣其實是夠用的。

就像上圖所示，我僅僅使用了4種不同的大小（52p/32p/24p/18p），兩種不同的字重（Bold 和 Medium）。我還使用了3種不同的主要配色——鮮艷的藍色（強調色），深藍色（常規文本），淺藍色（詳細信息用這個顏色，但是它實際上是深藍色將不透明度調整到 30%之後的效果）。。

如果在選擇字體尺寸大小的時候碰到問題，可以試試按照黃金比例來進行選取，效果也不錯。

配色方案

在配色這件事情上，我很少會採用色輪或者預製的配色方案，我比較喜歡手工取色。但是如果你在取色這件事情上，經驗並不豐富，那麼預製的配色方案是非常有用的。

了解色彩心理學，對於配色是非常有用的。不同的行業在配色選取上有哪些習慣和傾向，這些東西是非常有必要了解的。

閱讀文章 >>

考慮到我們正在創建一個針對醫療保健行業的控制面板，所以我們選用綠色和藍色是非常合理的，一方面是藍色和綠色是契合行業的，另一方面是它們本身足夠討人喜歡，讓人感到舒適、專業和信任。

我在為這個項目選擇的主色調的時候，挑選一個鮮艷大膽的藍色，然後降低不透明度，微調出了第二個藍色，用作背景。我盡可能在同一色相中挑選配色。此外，我還調整了飽和度，獲得了另外一種藍色，也可以通過調整不透明度來用作背景配色。最後，我會選擇自己最喜歡的顏色，也就是純白。

除此之外，我們還需要使用一些強調色來對配色進行區分。我僅僅通過稍稍修改色相（H）的參數來進行選擇，就可以挑選出很不錯的強調色。

UI 元素樣式

選好字體和配色之後，我們需要為 UI 元素來創建樣式（容器、圖標、按鈕等）。

其實只需要為數不多的幾種樣式進行設計，就可以創建出引人入勝的界面，你可以根據元素的重要性和作用進行合理的混搭。

你可以看看我下面的元素所使用的參數，都不複雜。

如你所見，我真正創建出來的樣式其實只有5種，其中的樣式明顯是針對不同的目的的（比如容器和按鈕）。值得說明的是，這些樣式都是針對主要的交互和 CTA元素來設計的，並且只用於主要的元素和交互。

在創建陰影的時候，務必記得使用和配色同色相的陰影，但是記得降低不透明度。

圖標的選取

在選取圖標的時候，一致性始終是最重要、最關鍵的部分。所以，我決定在整個控制面板中統一使用線性圖標。

此外，還記得我在上一篇文章當中針對用戶頭像進行的配色優化嘛？在可用性上可以說是非常無意義的設計，但是非常令人愉悅！在這裏我也做了！

元素布局和文字內容

現在，這個控制面板所涉及到的絕大多數的內容我都有了，因此我開始重新排列元素，直到我滿意。這個部分真的沒有取巧的地方，唯一能做的就是進行盡可能多的嘗試，結合一部分普世的需求，然後就是對不同排版進行嘗試，不同的對齊方式，細節的處理等等等等，直到我們看起來用起來感覺不錯為止。

不過，在馴服混亂、尋求秩序的過程中，我依然是有一些有價值的建議：

1. 記住元素和元素之間應該保持相同/相似的邊距或者間距。即使此時我們不討論網格和布局，但是至少要確保主要的內容在視覺比例上的協調一致。
2. 不必過度擔心留白。留白是界面最好的朋友。它可以賦予任何界面以呼吸感，讓它看起來整潔。
3. 將主色使用在一些處於選定狀態的元素，從另一個角度上來說，主色應該應用在令人矚目的元素和交互上。
4. 使用不同的陰影來製造縱深感。但是請記住，每次都只讓一部分元素擁有陰影，這樣才能製造出層次差異，其他的則保持平整。
5. 每個元素或者容器都應該擁有一致的邊緣，比如按鈕都應該擁有相同的弧度，卡片邊緣的弧度也應當一致。
6. 記住按鈕上的標籤文本應該居中。
7. 保持容器內元素的邊距是相同的。
8. 如果想讓界面變得足夠平滑友好，可以提高圓角的弧度，讓它越接近氣泡色感覺，這樣給人的感覺就越友好！

創建一幅簡單的插畫

我們快要完成了，這是最後一步！這將會讓我們的控制面板顯得更加美觀和友好。

Sketch 其實是創建插畫的理想工具。我曾經用過很長時間的 AI，並且非常討厭它。事實證明，我在 AI 中可以實現的效果幾乎都可以在 Sketch 中做出來！

就像上圖當中，你可以通過基礎形狀很快創建出醫生的插畫。對於這張插畫，我選取了一種非常流行的樣式，其中的陰影和高光其實都非常簡單，但是加入了富有趣味的對比線條。

首先，你可以使用橢圓和線條來快速拼接出基本的輪廓，進行插畫繪製的時候，始終從最基本的圖形入手，確實是非常有幫助的！在接下來的步驟當中，你可以添加不同的細節。在最後一步當中，添加線條狀的深色陰影，增加白色的線條來呈現高光。

這真的是超級簡單，但是很能出效果，即使你不是插畫師也可以做到！

最終效果

我強烈建議你也進行類似的 UI 設計練習！這種練習方式不僅出效果，而且能夠很好地磨練自己的技能，嘗試新鮮的設計技法，並且填充自己的作品集。新鮮的嘗試甚至可以算得上是某種意義上的「娛樂」！如果將一部分 UI 元素突出呈現並超出原本的界面範圍，藉助陰影來強化層次，則能讓這個 UI 更適合展示！

閱讀文章 >>

閱讀文章 >>

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5登錄_高手如何從零設計控制面板？別錯過這個實戰案例！