本文摘要：这是 UI 设计师 Diana Malewicz 的一篇 UI 界面设计的分享。总体来说，让人眼前一亮，值得借鉴！以下文章来自民众号：优设（ID：uisdcer）, 作者：Diana Malewicz原文链接：https://mp.weixin.qq.com/s/BPjGI8JjtHjaq-4Aos9G5Q真的关注趋势变化，你会清晰的感受到，视觉效果和设计技巧一直在变……它们一直是设计师们的话题中心。

这是 UI 设计师 Diana Malewicz 的一篇 UI 界面设计的分享。总体来说，让人眼前一亮，值得借鉴！以下文章来自民众号：优设（ID：uisdcer）, 作者：Diana Malewicz原文链接：https://mp.weixin.qq.com/s/BPjGI8JjtHjaq-4Aos9G5Q真的关注趋势变化，你会清晰的感受到，视觉效果和设计技巧一直在变……它们一直是设计师们的话题中心。可是这篇文章并不计划讨论这个事儿，无论渐变是否盛行，新拟物化的可会见性是否不足，都不在今天的讨论规模内。

对于种种气势派头、方法，我的看法始终是：做出来的设计要可用，有用，有良好的可会见性，用户可以轻松明白，就行了。不外，我更乐于从趋势中获得兴趣，而不是将它视作为约束，如果每个界面看起来都是一样的，那该是一件何等无聊的事情啊。

关键在于，要让产物的视觉样式和你的用户群体匹配起来。我小我私家很是喜欢漂亮的渐变和微妙的阴影，这样的设计经常显得魅力特殊。

这种自然的过渡和光影的变化，很是贴合我们对于现实世界的感知，这就是为什么这样的设计能够俘获大量没有技术配景的用户的心——因为它们看起来友好，而且易于明白。在这篇文章当中，我将分享如何将 UI 效果设计得出彩又友好，让视觉效果柔和又让人感受舒适。本文围绕着一个「面向年轻人的金融 APP」虚拟设计项目来举行展示。

下面我们开始吧！1、视觉条理的一致性 怎么让我们的设计看起来柔和圆润呢？下面开始准备事情：1）选择想要使用的配色（想想使用柔和的粉彩组成的配景主色调，搭配一个给人精致感的次要色，以及一个抓人注意力的强调色。）2）选择合理的字体（我用的是 Brandon Grotesque，这是我最喜欢的字体，它足够友好，能够营造有趣的气氛，且具有良好的可读性）。接下来，给字体设计差别巨细和字重（最好不凌驾5种差别的样式）。

其中，标题字体应该较大，正文字体较小，最小的字体用于细节出现。注意，只管不要在长句子内里使用全大写。

3）确定你所需要的阴影的高程（Height）和模糊度。4）如果使用的是图标，确定使用填充样式还是描边样式。

只管不要混用。至此，一个小型的设计系统就已经确定了。挺悦目的！2、给UI元素营造柔和梦幻的气氛 在设计界面的时候注意，锐利的边缘会让界面看起来严肃而专业，圆角则会显得充满亲和力。

自然弥散的阴影也会让设计看起来足够精巧，所以当我们向元素添加阴影的时候，会强化视觉条理。差别的阴影效果，给人的「高程」上的感受也纷歧样。

阴影较深的元素会显得距离配景更近一些，阴影较浅，弥散规模更大，则显得高程更高，距离底部配景更远。这就是为什么很少会有元素发生较深的阴影，因为太多就会显得不够自然。选择元素并赋予它们以一定的模糊效果是一个需要不停实验的历程。不外不要畏惧，这就是一个调整参数的小游戏。

下面是我设计界面的时候的一些参数设置。如果要让阴影看起来越发奇特，尽可能让阴影和前景元素使用同色相的颜色，然后降低不透明度。理想情况下，配景也应该有类似的色调。

3、让渐变看起来越发平滑细腻为了让渐变看起来越发舒适，我们可以从同一个配色方案中选择对比强烈的颜色，甚至也可以是同一色系的颜色，稍微调治一下它的亮度就可以了。然后重新拉伸一下渐变，让颜色过渡变得越发平滑。虽然这样的渐变险些看不清楚，可是元素看起来会有显着的凹凸感。

对于白色的元素，你可以选取和配景相近的颜色来制作阴影，只要确保对比度，不会相融就可以了。4、选择和配景匹配的正确字体在字体配色上，玄色和灰色是最经典的选择。可是如果要让字体和整个设计在视觉上保持同一协调，你还需要往其中注入一些此外颜色，让它和整体融合度更高。

好比这里用的绿色的配景，那么可以在其中加入一点绿色的色调，这样就协调了许多。5、增加让项目更具吸引力的细节元素有些细节可能是没有须要的。可是对我小我私家而言，我很是喜欢引人入胜的小细节，通过这些「分外」的设计细节，让人感受到纷歧样和愉悦感。那么要加入什么样的细节呢？假设你的页头是一个沉闷单调的形状，那么不妨让它柔和一点，加一个小三角，然后它就酿成了一个对话框气泡，界面和用户之间的对话感就发生了。

如果配景是单调的白色，可以加入一些越发富有娱乐性的底纹，它可以简约的图标，也可以是其他。你可以简朴的复制粘贴同一个元素，调整巨细和角度，只要不影响前景的可读性即可。感受单纯的数据展示很无聊？那么可以添加一些小图标，来举行区分、说明和展示。

尽可能地让你的界面看起来越发有趣、富有创意。如果你不知道要怎么办，可以用现实生活中的物品或者设计作为灵感泉源。最后，调整用户头像的细节这个步骤一般而言是完全没有须要的……可是我每次都市在这件事情上花费不少时间举行调整，这可能是强迫症吧。我会给自己的样机选择一个足够漂亮的用户头像，可是她的妆容和整个 UI 界面的配色可能是不匹配的，这对于我这样一个完美主义者而言是……难以接受的。

所以我总会分外花费一点时间来微调一下妆容来满足我的「强迫症」。好比这个案例当中，我会从界面取色，将头像中原本棕色的瞳孔微调成为绿色的「美瞳」，在头像上新建一个图层，借用 PS 的混淆模式给瞳孔添加颜色（不透明度50%）。

✨现在头像终于完美了！总而言之，UI界面设计的焦点始终还是遵循一致性、可用性和良好的可会见性。可是在遵循这些规则的前提之下，尽可能地发挥自己的想象力，建立让自己也让用户感应欣喜的用户体验，发挥创意，这样的 UI 界面会让人爱不释手！。

本文关键词：设计,妙手,实战,案例,告诉,你,如何,从,零,泛亚电竞官方网站

本文来源：泛亚电竞-www.qiulin1008.com