本文將通過(guò)一些實(shí)用的小技巧，一步步引導(dǎo)你完成設(shè)計(jì)~

基本思路和粗略的線框

? ? 從一個(gè)儀表盤的idea開(kāi)始~

????我們將為醫(yī)療行業(yè)創(chuàng)建一個(gè)的儀表板，尤其是為醫(yī)生，他們每天輪班，要面對(duì)不同的患者和其他職責(zé)（我姨媽是醫(yī)生，實(shí)際上她不僅僅挽救生命，還要處理大量的文書工作）。我會(huì)用Sketch完成整個(gè)創(chuàng)作過(guò)程。

????通常，我會(huì)從一個(gè)非常低調(diào)的線框開(kāi)始。創(chuàng)建一個(gè)矩形和另外一些矩形~~然后更改它們的大小和排列，直到對(duì)結(jié)果滿意為止。我選擇了一些隨機(jī)但相似的顏色，以便看到矩形的位置。

? ??這時(shí)候，我們需要清楚將要顯示哪一類內(nèi)容以及在哪顯示。

這就是儀表板最原始的“骨架”樣子

? 下一步，選擇要使用的字體，顏色和樣式。因此，我們先創(chuàng)建一個(gè)小的設(shè)計(jì)系統(tǒng)或“樣式表”（隨便你怎么稱呼吧~~）

字體

????對(duì)于這個(gè)儀表板，我選擇“ Sofia Pro”作為主要字體。只有這一個(gè)字體。

? ??實(shí)際上，創(chuàng)建一個(gè)漂亮的UI的確不需要很多字體。

????我更喜歡使用一種或兩種字體（一種用于標(biāo)題，一種用于文本塊）。

Sofia Pro是非常漂亮，外觀新穎，易于閱讀的字體-如果你有Creative Cloud，可以使用

不要使用許多字體，而應(yīng)使用大小，粗細(xì)和顏色等參數(shù)來(lái)區(qū)分同一字體。

????如上圖所示，我只用了四種大小（52p / 32p / 24p / 18p）和兩種字重（粗體和中體）。還使用了三種主色-鮮艷的藍(lán)色（強(qiáng)調(diào)色），深藍(lán)色（普通文本），淺藍(lán)色（詳細(xì)信息，它實(shí)際上是深藍(lán)色，但不透明度約為30％）。

????如果你在選擇正確的字體大小上遇到??問(wèn)題，可以嘗試使用黃金比例方法。

色彩調(diào)色板

????對(duì)于顏色，我很少使用色輪或預(yù)制調(diào)色板（我喜歡手工選擇顏色）。但，如果你對(duì)選色不太滿意，那它們可以幫到你。

? ??了解顏色心理學(xué)的基礎(chǔ)知識(shí)，并能夠選擇適合的（適用于具體某產(chǎn)品/行業(yè)）調(diào)色板非常重要。

????我們要?jiǎng)?chuàng)建的是一個(gè)醫(yī)療行業(yè)的儀表板，因此合適的顏色可能是藍(lán)色和綠色，因?yàn)樗鼈兪亲钍軞g迎的、討人喜歡的顏色，它們舒緩、放松又給人以專業(yè)和可信的感覺(jué)。

????我選擇的主色是鮮艷的，大膽的藍(lán)色。然后降低不透明度得到第二種顏色（例如，背景色）。從相同的顏色表（HSL）中選擇深藍(lán)色，再降低它的不透明度，就可以得到另一種低飽和度的顏色，這個(gè)顏色可用于背景。然后，選擇我最喜歡的顏色，即留白與和諧的顏色。（當(dāng)然，在設(shè)計(jì)師世界中是白色）

我們將要使用的非常單色的調(diào)色板

????我們還需要其他一些強(qiáng)調(diào)色來(lái)區(qū)分內(nèi)容。我是通過(guò)微調(diào)色相（H）來(lái)選擇，它們看起來(lái)會(huì)彼此很合適，除非你不會(huì)冷暖搭配。

UI元素樣式

????選擇字體和顏色后，我們?yōu)閁I元素（容器，圖標(biāo)和按鈕）創(chuàng)建樣式。

? ?只通過(guò)幾種樣式就可以創(chuàng)建一個(gè)功能豐富且引人入勝的界面，你可以根據(jù)元素的作用和重要性混合使用樣式。

? ? 可以參考下圖中所創(chuàng)建樣式的詳細(xì)參數(shù)。

可以對(duì)不同的元素使用相同的樣式

? ? 可以看到，我一共只創(chuàng)建了五種樣式，其中一些樣式可用于不同目標(biāo)（例如，容器和按鈕）。需要強(qiáng)調(diào)：主要?jiǎng)幼鳂邮剑╬rimary action style）只能應(yīng)用于主要?jiǎng)幼? CTA（call to action）。并且應(yīng)該只將其應(yīng)用于最重要的元素。

? ??創(chuàng)建陰影時(shí)，請(qǐng)嘗試使用與元素相同的顏色，但降低不透明度。

圖標(biāo)圖像

????選擇圖標(biāo)時(shí)，一致性是關(guān)鍵。盡量不要將線性與填充混合使用。我決定在整個(gè)儀表板使用線性圖標(biāo)。

圖標(biāo)來(lái)自《設(shè)計(jì)用戶界面》一書

? ? （另外，還記得我在上一篇有關(guān)UI的文章中向您展示的用戶頭像的魔術(shù)嗎？在可用性方面沒(méi)什么用，但是可以為Dribbble作品創(chuàng)造奇跡~~文章鏈接：https://uxdesign.cc/how-to-achieve-friendly-lightweight-and-consistent-ui-design-a33a57183612 ）

元素排列和文字內(nèi)容

? ? 我們已具備創(chuàng)建儀表板所需的一切，現(xiàn)在開(kāi)始重新排列所有元素，直到滿意為止。這一步?jīng)]有魔法（我嘗試了不同的搭配，更改組合，打磨對(duì)齊方式，直到看起來(lái)不錯(cuò)）。不過(guò)，在處理這種創(chuàng)造性混亂時(shí)，這里有一些建議：

? ? 1.記住要在元素之間保持相似的邊距/間距。我們現(xiàn)在不討論網(wǎng)格/布局，但是請(qǐng)至少確保主要內(nèi)容在間距上是成比例的。

元素間距一致性上一個(gè)非常粗糙的栗子~

? ? 2.不必?fù)?dān)心留白過(guò)多。留白是任何一個(gè)界面的最好搭檔。它可以幫助UI“呼吸”，并使它看起來(lái)時(shí)尚整潔。

????3.只將主色用于一些選中的元素。要不然，主色會(huì)顯得太歸于壓倒性（到處都用的話）。

????4.使用不同的陰影來(lái)營(yíng)造縱深感。請(qǐng)記住，只有少量元素可以使用陰影，其他的保持扁平就好。

????5.同一組元素應(yīng)保持圓角一致。例如：按鈕都應(yīng)具有相同的圓角，容器可以具有更大的圓角，但所有容器圓角大小應(yīng)該是相同的。

????6.記住將按鈕中的標(biāo)簽居中（水平居中，垂直居中）。

????7.容器的內(nèi)邊距保持一致。

????8.將矩形的圓角增加到一個(gè)看起來(lái)非常平滑的點(diǎn)。這樣它們會(huì)看起來(lái)“很氣泡”且“可點(diǎn)擊”~

看起來(lái)不錯(cuò)，但是缺少一些東西

創(chuàng)建一個(gè)簡(jiǎn)單的插圖

????OK，我們就快完成了！這是最后一步，這會(huì)使我們的儀表板看起來(lái)更加美觀，更加友好。

不必成為畢加索，就可以為用戶界面創(chuàng)建漂亮的插圖

????你是否知道Sketch實(shí)際上是創(chuàng)建簡(jiǎn)單插圖的理想工具？我在用Adobe Illustrator工作了很長(zhǎng)時(shí)間（并討厭它）。事實(shí)證明，在Illustrator中所做的幾乎所有操作都可以在Sketch中完成（驚奇?。?/p>

????如上圖所示，你可以使用非?；A(chǔ)的形狀創(chuàng)建醫(yī)生插圖。這里的插圖，我選擇了一種非常流行的樣式：陰影和高光實(shí)際上很簡(jiǎn)單，但是有對(duì)比線。

????首先，幾乎只需要用到橢圓來(lái)創(chuàng)建基本輪廓。進(jìn)行插圖繪制時(shí)，請(qǐng)始終從最基本，最簡(jiǎn)單的形狀開(kāi)始——真的很實(shí)用！在接下來(lái)的步驟中，可以添加和試玩不同的細(xì)節(jié)。在最后一步中添加陰影（深色線表示陰影，淺色線表示高光。）

????看到了吧？小菜一碟~~~我們不是插畫師，但我們可以做到！

最終結(jié)果

????就是這個(gè)啦！強(qiáng)烈建議你做類似的UI練習(xí)。通過(guò)實(shí)踐學(xué)到的東西最多，我們都應(yīng)該經(jīng)常練習(xí)。如果停止以嘗試新事物和做UI為樂(lè)，即使是最專業(yè)的設(shè)計(jì)師也會(huì)迷失方向。

現(xiàn)在看起來(lái)更友好了

在儀表板周圍添加一些浮動(dòng)的UI元素，我們就得到了一個(gè)非常棒的Dribbble作品！

如果喜歡這篇文章，歡迎點(diǎn)贊鼓勵(lì)~~~

作者：Diana Malewicz
原文鏈接：https://uxdesign.cc/how-to-design-a-sleek-dashboard-ui-a90ba41f0af1