恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

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

自译外文 分类: 设计趋势 版权: 原作者: Diana Malewicz 举报
117 2 4 0
2020-06-28
0.9

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



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


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

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



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


视觉一致性

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


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


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


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


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



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

现在我们继续坚持下去。


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


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



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



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



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



使渐变看起来更平滑细腻


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



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


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


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



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


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


那会是什么呢?


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



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



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


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

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


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


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


感谢您的阅读,希望文章能令您兴奋和有帮助,谢谢!

Powered by Froala Editor

J_lin

多点练习,做做笔记,说不定有人看呢~

23粉丝/2关注

分享帝lv.1叫兽当仁不让lv.1原创达人收藏家lv.2
2019作品集近期整理_《餐饮空间2.0》改版

J_lin

J_lin

多点练习,做做笔记,说不定有人看呢~

分享帝lv.1叫兽当仁不让lv.1原创达人收藏家lv.2

你确定要举报如何实现轻便、友好和一致的UI设计

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年06月28日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

J_lin

TA已经获得8枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN