網(wǎng)頁設(shè)計

如何設(shè)計一個網(wǎng)站后臺管理控制面板界面？

4478

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

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

如何設(shè)計更加友好和一致性的app界面？

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

基本思路和低保真線框圖

這一次我們要設(shè)計的是儀表盤界面。那么我們從基本的想法開始。

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

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

然后我針對哪些內(nèi)容在哪里顯示，進行了基本的說明。

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

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

字體選取

對于這個控制面板，我選擇的是「Sofia Pro」作為主要的現(xiàn)實字體，并且只有這一個字體。

實際上，想要創(chuàng)建一套漂亮的 UI 界面，并不需要很多字體。

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

Sofia Pro 非常漂亮，給人感覺非常雅致舒適，氣質(zhì)上和 Futura 有點像，易讀性也不錯。如果你有 Adobe 創(chuàng)意云服務，那么可以直接調(diào)用。

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

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

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

配色方案

在配色這件事情上，我很少會采用色輪或者預制的配色方案，我比較喜歡手工取色。但是如果你在取色這件事情上，經(jīng)驗并不豐富，那么預制的配色方案是非常有用的。

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

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

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

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

UI 元素樣式

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

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

你可以看看我下面的元素所使用的參數(shù)，都不復雜。

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

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

圖標的選取

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

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

元素布局和文字內(nèi)容

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

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

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

創(chuàng)建一幅簡單的插畫

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

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

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

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

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

最終效果

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