本文將通過一些實用的小技巧，一步步引導(dǎo)你完成設(shè)計~
基本思路和粗略的線框
? ? 從一個儀表盤的idea開始~
????我們將為醫(yī)療行業(yè)創(chuàng)建一個的儀表板趣苏，尤其是為醫(yī)生，他們每天輪班，要面對不同的患者和其他職責(zé)（我姨媽是醫(yī)生匾旭，實際上她不僅僅挽救生命，還要處理大量的文書工作）圃郊。我會用Sketch完成整個創(chuàng)作過程价涝。
????通常，我會從一個非常低調(diào)的線框開始持舆。創(chuàng)建一個矩形和另外一些矩形~~然后更改它們的大小和排列色瘩，直到對結(jié)果滿意為止伪窖。我選擇了一些隨機但相似的顏色，以便看到矩形的位置居兆。
? ??這時候覆山，我們需要清楚將要顯示哪一類內(nèi)容以及在哪顯示。
? 下一步泥栖，選擇要使用的字體簇宽，顏色和樣式。因此吧享，我們先創(chuàng)建一個小的設(shè)計系統(tǒng)或“樣式表”（隨便你怎么稱呼吧~~）
字體
????對于這個儀表板魏割，我選擇“ Sofia Pro”作為主要字體。只有這一個字體钢颂。
? ??實際上钞它，創(chuàng)建一個漂亮的UI的確不需要很多字體。
????我更喜歡使用一種或兩種字體（一種用于標(biāo)題殊鞭，一種用于文本塊）遭垛。
不要使用許多字體，而應(yīng)使用大小牲尺，粗細(xì)和顏色等參數(shù)來區(qū)分同一字體卵酪。
????如上圖所示，我只用了四種大邪肌（52p / 32p / 24p / 18p）和兩種字重（粗體和中體）溃卡。還使用了三種主色-鮮艷的藍(lán)色（強調(diào)色），深藍(lán)色（普通文本）蜒简，淺藍(lán)色（詳細(xì)信息瘸羡，它實際上是深藍(lán)色，但不透明度約為30％）搓茬。
????如果你在選擇正確的字體大小上遇到??問題犹赖，可以嘗試使用黃金比例方法。
色彩調(diào)色板
????對于顏色卷仑，我很少使用色輪或預(yù)制調(diào)色板（我喜歡手工選擇顏色）峻村。但，如果你對選色不太滿意锡凝，那它們可以幫到你粘昨。
? ??了解顏色心理學(xué)的基礎(chǔ)知識，并能夠選擇適合的（適用于具體某產(chǎn)品/行業(yè)）調(diào)色板非常重要。
????我們要創(chuàng)建的是一個醫(yī)療行業(yè)的儀表板张肾，因此合適的顏色可能是藍(lán)色和綠色芭析，因為它們是最受歡迎的、討人喜歡的顏色吞瞪，它們舒緩馁启、放松又給人以專業(yè)和可信的感覺。
????我選擇的主色是鮮艷的芍秆，大膽的藍(lán)色惯疙。然后降低不透明度得到第二種顏色（例如，背景色）浪听。從相同的顏色表（HSL）中選擇深藍(lán)色螟碎，再降低它的不透明度，就可以得到另一種低飽和度的顏色迹栓，這個顏色可用于背景。然后俭缓，選擇我最喜歡的顏色克伊，即留白與和諧的顏色。（當(dāng)然华坦，在設(shè)計師世界中是白色）
????我們還需要其他一些強調(diào)色來區(qū)分內(nèi)容愿吹。我是通過微調(diào)色相（H）來選擇，它們看起來會彼此很合適惜姐，除非你不會冷暖搭配犁跪。
UI元素樣式
????選擇字體和顏色后，我們?yōu)閁I元素（容器歹袁，圖標(biāo)和按鈕）創(chuàng)建樣式坷衍。
? ?只通過幾種樣式就可以創(chuàng)建一個功能豐富且引人入勝的界面，你可以根據(jù)元素的作用和重要性混合使用樣式条舔。
? ? 可以參考下圖中所創(chuàng)建樣式的詳細(xì)參數(shù)枫耳。
? ? 可以看到，我一共只創(chuàng)建了五種樣式孟抗，其中一些樣式可用于不同目標(biāo)（例如迁杨，容器和按鈕）。需要強調(diào)：主要動作樣式（primary action style）只能應(yīng)用于主要動作/ CTA（call to action）凄硼。并且應(yīng)該只將其應(yīng)用于最重要的元素铅协。
? ??創(chuàng)建陰影時，請嘗試使用與元素相同的顏色摊沉，但降低不透明度狐史。
圖標(biāo)圖像
????選擇圖標(biāo)時，一致性是關(guān)鍵。盡量不要將線性與填充混合使用预皇。我決定在整個儀表板使用線性圖標(biāo)侈玄。
? ? （另外，還記得我在上一篇有關(guān)UI的文章中向您展示的用戶頭像的魔術(shù)嗎吟温？在可用性方面沒什么用序仙，但是可以為Dribbble作品創(chuàng)造奇跡~~文章鏈接：https://uxdesign.cc/how-to-achieve-friendly-lightweight-and-consistent-ui-design-a33a57183612 ）
元素排列和文字內(nèi)容
? ? 我們已具備創(chuàng)建儀表板所需的一切，現(xiàn)在開始重新排列所有元素鲁豪，直到滿意為止潘悼。這一步?jīng)]有魔法（我嘗試了不同的搭配，更改組合爬橡，打磨對齊方式治唤，直到看起來不錯）。不過糙申，在處理這種創(chuàng)造性混亂時宾添，這里有一些建議：
? ? 1.記住要在元素之間保持相似的邊距/間距。我們現(xiàn)在不討論網(wǎng)格/布局柜裸，但是請至少確保主要內(nèi)容在間距上是成比例的缕陕。
? ? 2.不必?fù)?dān)心留白過多。留白是任何一個界面的最好搭檔疙挺。它可以幫助UI“呼吸”扛邑，并使它看起來時尚整潔。
????3.只將主色用于一些選中的元素铐然。要不然蔬崩，主色會顯得太歸于壓倒性（到處都用的話）。
????4.使用不同的陰影來營造縱深感搀暑。請記住沥阳，只有少量元素可以使用陰影，其他的保持扁平就好险掀。
????5.同一組元素應(yīng)保持圓角一致沪袭。例如：按鈕都應(yīng)具有相同的圓角，容器可以具有更大的圓角樟氢，但所有容器圓角大小應(yīng)該是相同的冈绊。
????6.記住將按鈕中的標(biāo)簽居中（水平居中，垂直居中）埠啃。
????7.容器的內(nèi)邊距保持一致死宣。
????8.將矩形的圓角增加到一個看起來非常平滑的點。這樣它們會看起來“很氣泡”且“可點擊”~
創(chuàng)建一個簡單的插圖
????OK毅该，我們就快完成了博秫！這是最后一步，這會使我們的儀表板看起來更加美觀眶掌，更加友好挡育。
????你是否知道Sketch實際上是創(chuàng)建簡單插圖的理想工具朴爬？我在用Adobe Illustrator工作了很長時間（并討厭它）即寒。事實證明，在Illustrator中所做的幾乎所有操作都可以在Sketch中完成（驚奇Ｕ儇）母赵。
????如上圖所示，你可以使用非尘叩危基礎(chǔ)的形狀創(chuàng)建醫(yī)生插圖凹嘲。這里的插圖，我選擇了一種非常流行的樣式：陰影和高光實際上很簡單构韵，但是有對比線周蹭。
????首先，幾乎只需要用到橢圓來創(chuàng)建基本輪廓贞绳。進行插圖繪制時谷醉，請始終從最基本，最簡單的形狀開始——真的很實用冈闭！在接下來的步驟中，可以添加和試玩不同的細(xì)節(jié)抖单。在最后一步中添加陰影（深色線表示陰影萎攒，淺色線表示高光。）
????看到了吧矛绘？小菜一碟~~~我們不是插畫師耍休，但我們可以做到！
最終結(jié)果
????就是這個啦货矮！強烈建議你做類似的UI練習(xí)羊精。通過實踐學(xué)到的東西最多，我們都應(yīng)該經(jīng)常練習(xí)囚玫。如果停止以嘗試新事物和做UI為樂喧锦，即使是最專業(yè)的設(shè)計師也會迷失方向。
在儀表板周圍添加一些浮動的UI元素抓督，我們就得到了一個非常棒的Dribbble作品燃少！
如果喜歡這篇文章，歡迎點贊鼓勵~~~
作者：Diana Malewicz
原文鏈接：https://uxdesign.cc/how-to-design-a-sleek-dashboard-ui-a90ba41f0af1
