如何实现轻便、友好和一致的UI设计

释放双眼,带上耳机,听听看~!

这些天我在Medium阅读到了一篇非常不错的设计干货文章(人气也非常高),内容容易理解且实用性高,在我们平常的项目中落地性大,于是就跟大家一同分享。

如何实现轻便、友好和一致的UI设计

今年设计的趋势正在不断变化,每个月都有一个新的视觉效果或技巧变成“ 新的最热门事物 ”。但这不是我们今天讨论的。今天,我们可以争论深阴影是否对用户友好,渐变是否很热,或者我们设计中的每个小元素是否应该平坦(就像我们心爱的母亲一样,对吧?)。我的观点是:只要可以访问,只要有用,只要用户理解就算是很不错的产品。使用您想要的所有趋势并从中获得乐趣。如果每个产品看起来都一样,那就变得很无聊了。


“关键是使产品样式与用户组匹配”

我个人很喜欢用美丽的阴影和渐变制成的所有东西。它们使界面看起来生动有趣。具有色调过渡和阴影的元素模仿了我们在现实生活中的感知,这就是为什么即使对于非技术敏锐的用户,它们也更加友好和易于理解的原因。


如何实现轻便、友好和一致的UI设计

是的,这就是我所想分享——实现好的UI效果和轻巧友好的界面设计的整体视觉“感觉”的方式。我们创建了一个假的“青少年/年轻人金融应用程序”作为示例。让我们开始吧!

视觉一致性

如何使我们的设计看起来圆滑而一致?首先准备:


1.选择您要使用的颜色(请考虑使用柔和的粉彩作为背景,CTA应当是一种非常对比的颜色,次要元素应使用更精细的颜色,而重点则使用流行色)。


2.选择要使用的字体(这里使用了Brandon Grotesque,这是我最喜欢的字体之一:它具有友好,有趣的氛围,并且可以同时读取)。创建一些字体大小(最好不超过5个,并且不超过该限制),标题和字幕的大小较大,内容的大小较小,最小的基本细节最小。因为这会对可读性产生负面影响-在按钮上看起来最好)。


3.确定您想要阴影的深度/模糊度。

4.如果使用的是图标,请确定要使用实体还是轮廓。尽量不要混在一起。 

如何实现轻便、友好和一致的UI设计

至此,您已经创建了您的小型设计系统。 挺酷的!

现在我们继续坚持下去。


实现元素上柔和梦幻的氛围


在设计界面时,要记住,锐利的边缘会使界面看起来更加严肃和“专业”。圆角以相反的方式,它使界面看起来不那么严肃,更有趣和无忧无虑。 


如何实现轻便、友好和一致的UI设计


那些光滑、深色的阴影也使我们的设计看起来精致轻巧。当我们向元素添加阴影时,我们会创建一个视觉层次。更深的阴影的物品是离我们最近的物品。投射出细腻光影的元素是靠近表面的元素。这就是为什么只有很少的元素应该投射出深深的阴影,而其余的元素应该作为背景的原因,不管怎样它看起来都是不自然的!


如何实现轻便、友好和一致的UI设计


选择元素并为其赋予模糊效果。不要害怕,玩数字游戏。以下是我在界面中使用的不同元素: 


如何实现轻便、友好和一致的UI设计


如果要使阴影看起来更加幻想,可以使阴影具有与投射阴影的元素相同的颜色,然后降低不透明度。理想情况下,背景也应具有类似的色调。 


如何实现轻便、友好和一致的UI设计


使渐变看起来更平滑细腻


为了使渐变看起来更好,我从同一调色板中选择了相反的颜色。它甚至可以是相同的颜色,但可以使其中一种颜色更亮,并为其添加一些色相(H)(5至10点)。现在,拉伸渐变的锚点,以便颜色过渡变得非常平滑。渐变几乎看不到,但仍使元素看起来有点凸。 


如何实现轻便、友好和一致的UI设计


对于白色元素,可以使用白色和与背景相匹配的非常精美的颜色进行渐变。只要确保它具有足够的对比度并且不会融合太多即可。


选择正确的字体颜色,使其与背景匹配


黑色和单色灰色是用于内容的经典字体颜色,但是要使字体在视觉上与背景匹配,可以添加某种流行色。例如,如果我们有绿色背景,则在灰色处添加一点绿色。那么看起来会更加配对! 


如何实现轻便、友好和一致的UI设计


考虑一些使您的项目更具吸引力的细节


这些可能根本没有必要。您也可以跳过它,设计也可以。但就个人而言,比较喜欢使界面看起来令人愉悦且引人入胜的所有小细节。喜欢有人实际上付出了一些努力,并在设计上添加了一些“额外”的感觉。


那会是什么呢?


假设您有一个无聊的形状,可以用作界面的标题。使它变圆并添加一个小三角形。现在看起来像气泡。因此,界面在视觉上与您对话。 


如何实现轻便、友好和一致的UI设计


简单的白色背景怎么办?添加一些东西,使其更具娱乐性。它可以是一个简单的图标,您已经复制并粘贴了几次并创建了图案。只要确保它不会降低内容的可读性即可。


如何实现轻便、友好和一致的UI设计


无聊的数据?使交易清单看起来像时间轴上的小收据。
如果可以,添加一些图标以直观地表示不同类型的信息
尽一切努力使您的界面看起来更具创造力和无限的可能性。如果没有想法,可以在现实生活中的物品和过程中寻找灵感。


如此额外,您可以更改用户头像上的颜色,使其与界面匹配

此步骤可能完全不必要,但我还是每一次都这么做!


有时,我会为用户找到一张漂亮的脸部照片。但是,眼睛的颜色或化妆与界面的其余部分不匹配。这让我的完美主义者不高兴。因此,我使用颜色选择器工具,并从界面中获取一些颜色。假设绿色代表眼睛,红色代表嘴唇。给眼睛创建形状,以便她们覆盖照片上的形状。给形状上色,将混合模式切换为“颜色”,并将不透明度改为50%。

如何实现轻便、友好和一致的UI设计


尽管您使用了界面样式,但最关键的元素还是一致性,可访问性和和可用性,确保您的设计符合这些规则,并利用您的想象力来创建用户会喜欢的创意和出色的界面!

人已赞赏
交互设计

交互设计中格式塔原理怎样应用

2020-6-29 9:07:43

交互设计

UI设计师,需要懂得交互那些事

2020-6-29 14:49:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索