推广

快速提升 UI 设计效果的 6 个小技巧(UI 设计集-11)。

iseeyu3年前 (2023-12-12)推广139

在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 8 个实用性很强的 UI 效果提升小技巧,是系列文章的十一篇,原文最早发布于 marcandrew.me 。

在创建实用、可访问性良好且视觉效果颇为出彩的 UI
界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX
优化小贴士(看完文章在文末获取),这篇文章继续增加 6 条实用的建议,一起来看看吧!

1. 少用点色彩一样可以让视觉充满凝聚力

在上方的两个设计范例当中,左边使用的配色明显不搭,右边则基于基础色微调明度和饱和度来进行配色,更加协调。

如果你的设计项目可以让你在颜色选择方面有更多的自由,不要总是倾向于用花哨的彩虹色来包装它。

如果你沿着彩虹系的配色走下去,你可能会很快发现你所选取的色彩总会在视觉上显得不那么协调。

实际上,你只需要基础的色彩,然后基于这个颜色,借助微调明度和饱和度来拓展配色方案,就能够得到更加均匀、更加具有凝聚力和专业感的外观了,不需要闪亮的彩虹色和复杂的配色技巧,同样能够拿出好设计。

当然,基于基础的颜色快速搭建出配色,我推荐这个网站:https://maketintsandshades.com。

2.抓住用户的注意力的技巧

在上面的两个设计范例当中, 一个菜单选项使用了简单的方形选框,另一个使用了彩色的背景。

UI 可以是干净简约又直观的,但可用性和易用性更重要,不能以牺牲用户体验为代价。对于关键信息,UI元素需要有足够的对比度,以抓住用户的注意力。

对于像选项菜单这样简单的东西,请确保用户在快速浏览的时候,能立刻注意到所选的项目。

相比于小巧的选框,使用彩色的背景来进行区分,会更加直觉,也更容易被用户所识别出来。

3. 使用细文本的时候加深颜色

在上方的两个设计范例中,一个文本使用浅灰色,另一个则使用了更深的黑色。

当涉及到长篇文本内容的时候,如果字体是普通粗细,使用可读性有所保障的某种灰色是目前多数设计师的选择,它相比于黑色更加优雅,不会显得对比过于强烈导致视觉感知上的突兀。但是当字体文本非常细的时候,灰色的可读性可能就存在问题了。

这个时候,可以通过使文本变暗,让尽可能多的用户在阅读的时候不会出现可用性的问题。

4. 让界面上最重要的元素更加突出

在上面的两个设计范例当中,左边的一个视觉层次较差,右边的视觉层次则改善了很多。

在做 UI 设计的时候,你总会希望用户的眼睛每次都能快速、高效地被关键的元素所吸引,并且只需付出最少的认知努力,不会觉得费劲。

通过控制 字体大小、字重、颜色和布局等视觉层次,您可以轻松突出最重要的元素:重要的元素字体更大、字重更粗、颜色有差异、在排版的时候更加突出。

5. 打消用户的顾虑,让用户放心点击下一步

在上面的两个设计案例中, 一个仅仅只使用了CTA按钮,另一个则在此基础上,提供了额外的说明,打消了用户的顾虑。

当用户在 UI 中需要进行重要操作的时候,尤其是面对某些带有号召性用语的按钮,请确保用户对于当前的局面有充分的了解,不会对接下来可能发生的事情一无所知。对于一些常见的、可能普遍存在于用户内心的顾虑,一定要提前考虑到,并提供说明。

改善用户体验的每一步,都不要让用户在交互的历程中的任何环节产生质疑。

6. 请对 CTA 元素的设计「更自私」一点

在上方的两个设计范例当中,一个 CTA 按钮和其他元素使用了相同的颜色,另一个则做出了差异化,让CTA 按钮更突出。

引导用户行为的 CTA 按钮必须是屏幕上最关键的元素之一,它理应得到最高的视觉优先级,换句话说,就是应该尽可能「自私」一点,将最吸引人注意力的颜色分配给它,让用户不会将它和其他的 UI 控件在优先级上出现混淆。

当然,你也可以在尺寸、形状等方面更进一步设计,但 CTA 按钮应该保持一种突出的颜色,仅此一项,就可以规避掉绝大部分的问题。

作者:Marc Andrew

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://0291.com.cn/post/117465.html

相关文章

我来教你如今网站设计中背景的发展方向是怎样的。

我来教你如今网站设计中背景的发展方向是怎样的。

网站的页面设计有很多种,而且是不断变化,不过还是有规律的。随着时代的变化,人们的视觉也会随着变化,网站的页面设计也会跟着变化。作为网站的设计师,要紧跟互联网发展的步伐,每时每刻关注网页设计的变化趋势。 究竟什么样的背景才是最适合你的网站,这个并没有绝对的。但是都会有一些共同点。网站页面背...

透析3个营销案例,这样的内容确实可以吸引大众注意

透析3个营销案例,这样的内容确实可以吸引大众注意

上的成功案例非常多,听别人说、看人好像都非常简单,当自己照搬过来使用时,结果做成营销的反面案例,营销案例这么多,但是没有足够的营销,也无法找到真正合适自己的营销方法来给自己使用。下面为大家列举今年的营销案例,帮你扩宽营销思维。1蜜雪冰城洗脑MV蜜雪冰城“你爱我,我爱你,蜜雪...

外贸企业为什么要做谷歌推广?

外贸企业为什么要做谷歌?大家都知道,Google在全世界搜索引擎销售上可谓是遥遥领先,2021年Google占全世界搜索引擎销售市场的92.75%,几乎完全垄断市场。如今很多的外贸公司都会做竞价推广、Google优化推广,假如外贸公司的站点沒有做优化营销推广,就会与你的竞争...

做好网站结构易于网站优化与用户体验。

做好网站结构易于网站优化与用户体验。

在网站的推广和优化过程中,网站结构往往容易被忽视,而网站结构往往在网站优化过程中起着至关重要的作用。网站结构对优化的影响是什么?1、使网站的整体逻辑更加清晰,帮助用户和搜索引擎理解网站的整体框架。2、使网站更容易收集。3、使用户快速、方便地查找相关内容和内容,提高用户体验,增加访问驻留时间。4、易于...

软文营销指南:从内容创作到发布渠道,教你最全的软文推广策略

传统的广告投放,其目的更多的在于“曝光”,而,其目的在于“转化”,通过软文形成认知输出,攻占心智,并让用户在进行用户决策时,“上头”地想到你的或产品。你一定接过各式各样的推销电话,比如“信用卡办理需要吗”、“大流量优惠套餐需要吗”、“游泳健身需要吗”…但你的第一反应肯定是谢...

从多维度做网站优化效果更好。

从多维度做网站优化效果更好。

所以问题是,既然排名上升了,那高质量外链的数量就大于垃圾外链和作弊外链,我们假设这个外链投票的阈值叫做x值。那么链接的质量如何呢?我出版的外链和普通人出版的外链有什么区别?只有分析这一问题点,才能尽可能地做好有效可信的外链建设,从而减少垃圾外链的释放。 从我给大家分发的维度来看,真实...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片