如何设计时尚的仪表板 UI



欢迎使用分步 UI 指南。请注意,这不是关于如何创建产品的“合法”过程。我们将专注于创建一个干净、一致的用户界面,我们会跳过所有的研究/用户体验/您喜欢的任何名称/步骤。

基本思路和粗线框

让我们从仪表板的想法开始。我们将为医疗保健行业创建一个仪表板,最好是医生,他们每天轮班,不同的患者和其他职责(我的阿姨是一名医生,实际上她不仅在拯救生命,而且正如她所说的那样“有 sh*tload的文书工作”)。我将在整个过程中使用 Sketch。通常, 我从一个非常低调的线框开始。 我创建了一个矩形和其他一些矩形,然后更改它们的大小和排列,直到我对结果感到满意为止。我选择了一些随机但相似的颜色,所以我实际上看到了矩形的位置。在这一点上,我也有我想展示什么样的内容以及在哪里展示的想法。

在下一步中,我将选择要使用的字体、颜色和样式。所以,和我之前的文章一样,我们将创建一个小设计系统/样式表/随意调用它。

字体

对于这个仪表板,我选择了“Sofia Pro”作为我的主要字体。只有这一个。实际上,创建漂亮的 UI 并不需要很多字体。我更喜欢使用一种字体,或者两种(一种用于标题,一种用于文本块)。

不要使用多种字体,而是尝试使用大小、重量和颜色等参数来区分相同的字体。如上图所示,我只使用了四种字体大小(52p/32p/24p/18p)和两种字体粗细(粗体和中等)。我还使用了三种主要颜色——鲜艳的蓝色(重音)、深蓝色(常规文本)、浅蓝色(详细信息,它实际上是深蓝色,但不透明度约为 30%!)。如果您在选择正确的字体大小时遇到​​问题,请尝试使用黄金比例方法。

调色板

对于颜色,我很少使用色轮或预制调色板。我喜欢手工选择颜色。但是,如果您对颜色选择不太满意,它们会非常有用。了解色彩心理学的基础知识并有能力选择适合某种产品/行业的调色板是非常重要的。我们正在为医疗保健创建仪表板,因此合适的颜色可能是蓝色和绿色,因为它们是最受欢迎、最讨人喜欢的颜色,它们舒缓、放松,并营造出专业和信任的感觉。我选择了我的主要颜色——对于这个项目,鲜艳、大胆的蓝色。我降低了不透明度,我得到了我的第二种颜色——例如,用于背景。我从相同的颜色图 (HSL) 中选择我的深蓝色。我还降低了该颜色的不透明度,这就是我获得另一种饱和度较低的颜色的方式,可用于背景。然后我选择了我最喜欢的颜色,空旷和谐的颜色,在设计师的世界里当然是白色。

我们还需要一些其他强调色来区分内容。我只通过稍微改变颜色图上的色调 (H) 参数来选择它们。它们彼此看起来很好,除非你不会把冷的和暖的混在一起。

UI元素样式

我们还需要一些其他强调色来区分内容。我选择它们 当我们选择了字体和颜色后,我们可以为我们的 UI 元素创建样式——容器、图标和按钮。您可以创建一个功能性、有吸引力的界面,只有几种样式可供使用,您可以根据元素的角色和重要性进行混合。您可以查看下图中我创建的样式的详细参数。

如您所见,我总共只创建了五种样式。其中一些用于不同的目的(例如用于容器和按钮)。重要提示:主要操作样式应仅用于主要操作/CTA。它应该只为最重要的元素保存。创建阴影时,尝试使用与元素相同的颜色,但降低不透明度。

图像学

选择图标时,一致性是关键。我决定为整个仪表板使用线框图标。尽量不要将轮廓与实体混合。

元素排列&文字内容

由于我们拥有创建仪表板所需的所有东西,让我们开始并重新排列所有元素,直到我们对结果感到满意为止。这里没有魔术——我尝试不同的配对,改变构图,润色某些对齐,直到它看起来不错。但是在驯服这种创造性的混乱时,这里有一些建议:

  1. 请记住在元素之间保持相似的边距/空间。我们现在不会讨论网格/布局,但要确保至少主要内容具有视觉上成比例的间距。2.放弃对太多空白的恐惧。它是每个界面最好的朋友。它可以帮助任何 UI 呼吸,并使它看起来圆滑整洁。3. 仅在少数选定元素上使用您的原色。在另一种情况下,这将是压倒性的。4. 使用不同的阴影来营造深度感。请记住,只有一些元素应该投射阴影。将其余部分平放。5. 各组元素应具有一致的边缘圆度。例如,按钮都应该具有相同的圆度。容器可以有更大的圆角半径,但它们的值相同。6. 记住将标签在按钮中水平和垂直居中。7. 在容器内保持相同的边距。8. 将矩形边缘的半径增加到看起来非常平滑的程度。它们看起来非常活泼且可点击!

创建一个简单的插图

好的,我们快完成了!这是最后一步,这将使我们的仪表板看起来更加精致和友好。

您知道 Sketch 实际上是创建简单插图的完美工具吗?我在 Adob​​e Illustrator 工作了很长时间(并且讨厌它)。事实证明,我在 Illustrator 中所做的几乎所有事情都可以在 Sketch 中完成(惊喜!)。如上图所示,您可以创建具有非常基本形状的医生插图。对于这幅插图,我选择了一种非常流行的风格,阴影和高光实际上很简单,但是对比线条。首先,您创建一个基本轮廓,几乎只使用椭圆形。制作插图时,请始终从最基本、最简单的形状开始——这真的很有帮助!在接下来的步骤中,您可以添加和使用不同的细节。在最后一步中添加阴影——阴影的暗线,高光的白线。看?像馅饼一样容易。我们不是插画师,但我们可以做到!

最终结果

就是这个!我强烈建议你做一个与 UI 练习类似的练习。我们从实践中学到最多,我们都应该经常练习。即使是最专业的设计师,如果他们停止尝试新事物并为了乐趣而做 UI,他们也会偏离轨道。让我们在仪表板周围添加一些浮动 UI 元素,我们有一个非常漂亮的 Dribbble 拍摄材料!

如果您在我的文章的帮助下制作了仪表板,请告诉我,我很高兴看到它。谢谢您,祝您设计愉快!


来源:https://prototypr.io/post/how-to-design-a-sleek-dashboard-ui


0

上一篇:构建响应式拖放 UI
下一篇:UI & UX 小技巧:第三卷
[按键盘← → 左右方向键也可以翻页哦~]