美文网首页UI设计UX Lifehacks
如何设计高雅时尚的Dashboard界面

如何设计高雅时尚的Dashboard界面

作者: 采涟说 | 来源:发表于2020-05-27 01:57 被阅读0次

    本文将通过一些实用的小技巧,一步步引导你完成设计~

    基本思路和粗略的线框

        从一个仪表盘的idea开始~

        我们将为医疗行业创建一个的仪表板,尤其是为医生,他们每天轮班,要面对不同的患者和其他职责(我姨妈是医生,实际上她不仅仅挽救生命,还要处理大量的文书工作)。我会用Sketch完成整个创作过程。

        通常,我会从一个非常低调的线框开始。创建一个矩形和另外一些矩形~~然后更改它们的大小和排列,直到对结果满意为止。我选择了一些随机但相似的颜色,以便看到矩形的位置。

        这时候,我们需要清楚将要显示哪一类内容以及在哪显示。

    这就是仪表板最原始的“骨架”样子

      下一步,选择要使用的字体,颜色和样式。因此,我们先创建一个小的设计系统或“样式表”(随便你怎么称呼吧~~)

    字体

        对于这个仪表板,我选择“ Sofia Pro”作为主要字体。只有这一个字体。

        实际上,创建一个漂亮的UI的确不需要很多字体。

        我更喜欢使用一种或两种字体(一种用于标题,一种用于文本块)。

    Sofia Pro是非常漂亮,外观新颖,易于阅读的字体-如果你有Creative Cloud,可以使用

    不要使用许多字体,而应使用大小,粗细和颜色等参数来区分同一字体。

        如上图所示,我只用了四种大小(52p / 32p / 24p / 18p)和两种字重(粗体和中体)。还使用了三种主色-鲜艳的蓝色(强调色),深蓝色(普通文本),浅蓝色(详细信息,它实际上是深蓝色,但不透明度约为30%)。

        如果你在选择正确的字体大小上遇到​​问题,可以尝试使用黄金比例方法。

    色彩调色板

        对于颜色,我很少使用色轮或预制调色板(我喜欢手工选择颜色)。但,如果你对选色不太满意,那它们可以帮到你。

        了解颜色心理学的基础知识,并能够选择适合的(适用于具体某产品/行业)调色板非常重要。

        我们要创建的是一个医疗行业的仪表板,因此合适的颜色可能是蓝色和绿色,因为它们是最受欢迎的、讨人喜欢的颜色,它们舒缓、放松又给人以专业和可信的感觉。

        我选择的主色是鲜艳的,大胆的蓝色。然后降低不透明度得到第二种颜色(例如,背景色)。从相同的颜色表(HSL)中选择深蓝色,再降低它的不透明度,就可以得到另一种低饱和度的颜色,这个颜色可用于背景。然后,选择我最喜欢的颜色,即留白与和谐的颜色。(当然,在设计师世界中是白色)

    我们将要使用的非常单色的调色板

        我们还需要其他一些强调色来区分内容。我是通过微调色相(H)来选择,它们看起来会彼此很合适,除非你不会冷暖搭配。

    UI元素样式

        选择字体和颜色后,我们为UI元素(容器,图标和按钮)创建样式。

       只通过几种样式就可以创建一个功能丰富且引人入胜的界面,你可以根据元素的作用和重要性混合使用样式。

        可以参考下图中所创建样式的详细参数。

    可以对不同的元素使用相同的样式

        可以看到,我一共只创建了五种样式,其中一些样式可用于不同目标(例如,容器和按钮)。需要强调:主要动作样式(primary action style)只能应用于主要动作/ CTA(call to action)。并且应该只将其应用于最重要的元素。

        创建阴影时,请尝试使用与元素相同的颜色,但降低不透明度。

    图标图像

        选择图标时,一致性是关键。尽量不要将线性与填充混合使用。我决定在整个仪表板使用线性图标。

    图标来自《设计用户界面》一书

        (另外,还记得我在上一篇有关UI的文章中向您展示的用户头像的魔术吗?在可用性方面没什么用,但是可以为Dribbble作品创造奇迹~~文章链接:https://uxdesign.cc/how-to-achieve-friendly-lightweight-and-consistent-ui-design-a33a57183612 )

    元素排列和文字内容

        我们已具备创建仪表板所需的一切,现在开始重新排列所有元素,直到满意为止。这一步没有魔法(我尝试了不同的搭配,更改组合,打磨对齐方式,直到看起来不错)。不过,在处理这种创造性混乱时,这里有一些建议:

        1.记住要在元素之间保持相似的边距/间距。我们现在不讨论网格/布局,但是请至少确保主要内容在间距上是成比例的。

    元素间距一致性上一个非常粗糙的栗子~

        2.不必担心留白过多。留白是任何一个界面的最好搭档。它可以帮助UI“呼吸”,并使它看起来时尚整洁。

        3.只将主色用于一些选中的元素。要不然,主色会显得太归于压倒性(到处都用的话)。

        4.使用不同的阴影来营造纵深感。请记住,只有少量元素可以使用阴影,其他的保持扁平就好。

        5.同一组元素应保持圆角一致。例如:按钮都应具有相同的圆角,容器可以具有更大的圆角,但所有容器圆角大小应该是相同的。

        6.记住将按钮中的标签居中(水平居中,垂直居中)。

        7.容器的内边距保持一致。

        8.将矩形的圆角增加到一个看起来非常平滑的点。这样它们会看起来“很气泡”且“可点击”~

    看起来不错,但是缺少一些东西

    创建一个简单的插图

        OK,我们就快完成了!这是最后一步,这会使我们的仪表板看起来更加美观,更加友好。

    不必成为毕加索,就可以为用户界面创建漂亮的插图

        你是否知道Sketch实际上是创建简单插图的理想工具?我在用Adobe Illustrator工作了很长时间(并讨厌它)。事实证明,在Illustrator中所做的几乎所有操作都可以在Sketch中完成(惊奇!)。

        如上图所示,你可以使用非常基础的形状创建医生插图。这里的插图,我选择了一种非常流行的样式:阴影和高光实际上很简单,但是有对比线。

        首先,几乎只需要用到椭圆来创建基本轮廓。进行插图绘制时,请始终从最基本,最简单的形状开始——真的很实用!在接下来的步骤中,可以添加和试玩不同的细节。在最后一步中添加阴影(深色线表示阴影,浅色线表示高光。)

        看到了吧?小菜一碟~~~我们不是插画师,但我们可以做到!

    最终结果

        就是这个啦!强烈建议你做类似的UI练习。通过实践学到的东西最多,我们都应该经常练习。如果停止以尝试新事物和做UI为乐,即使是最专业的设计师也会迷失方向。

    现在看起来更友好了

    在仪表板周围添加一些浮动的UI元素,我们就得到了一个非常棒的Dribbble作品!

    如果喜欢这篇文章,欢迎点赞鼓励~~~


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

    相关文章

      网友评论

        本文标题:如何设计高雅时尚的Dashboard界面

        本文链接:https://www.haomeiwen.com/subject/fyxiahtx.html