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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者:Marc Andrew

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/233911.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月1日 12:56
下一篇 2023年3月1日 12:56

相关推荐

  • 做网页设计时要知道的10个重要常规小技巧。

    如果在设计一个网页的时候有好的设计技巧,那么将会大大提升这个网站的用户体验,如果一个网站的用户体验提升了那么访问量也就提升了,访问量提升了那么销售额自然也就提升了,一个网站能让一家公司的销售额提升起…

    2023年2月14日 SEO操作
    02
  • 登录注册页面的三个禁忌

      登录与注册容易混淆 原因不仅仅是这两种页面设计比较简洁化,而是两者之间非常的相似,甚至是将其直接容纳到同一个页面当中。导致用户经常输入到差不多或者输入完成之後,才发现其中并不是自己所需求的页面…

    2022年6月25日
    0148
  • B端产品页面如何设计,从用户专注维度详解B端产品的三种页面类型。

    前言在 B 端产品当中,我们经常看到五花八门的设计页面,很多人会质疑自己,这是 B 端产品的页面么?感觉品牌调性不太符合,B 端产品往往传达给用户的都是严肃、刻板,但是在同一个产品当中,同样会存在这样的差异…

    2023年3月1日 SEO操作
    01
  • 浅谈视觉稿

    视觉稿是高保真的静态网页设计图,通常来说,视觉稿其实是网站视觉方面的设计草图和终稿。出色的视觉稿应该具备以下2点: 能够表达网站建设的信息框架,静态样式出网站的内容和功能; 能够发挥在视觉角度审阅网站建…

    2022年6月11日
    0148
  • 提升网站用户体验的方法之提升登录过程体验的5大方法

    提升网站用户体验的最好方法,归根到底就是让用户使用产品的整个体验更为简单。下面,我们将一起探讨提升登录过程体验的五大方法,首先我们会提到不同的登录类型,紧接着我们将讨论标签的重要性和资源占用的问题。 …

    2022年6月25日 建站资讯
    0147
  • 实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的。

    编者按:这篇文章来自英国资深设计师 Dmitry Novikov,他是著名 Mac 管理类工具 CleanMyMac X 背后的视觉和体验设计师,他将设计的过程和想法发布到他自己的 Behance 当中: CleanMyMac 可能是 Mac 平台上最常用的 …

    2023年3月1日 SEO操作
    00
  • 两招搞掂响应式的图片设计

    运用响应式进行网页设计可以说是现在的标配之一,因为它可以更好地应对日渐碎片化的设备屏幕尺寸。而图片是响应式的难点,不妨看看下面两个重要因素: 高宽比 桌面端的图片和移动端的图片对於用户体验来说,当然是…

    2022年6月25日
    0440
  • 框架建立前的清单如何罗列清楚?

    所谓的线框图内容清单,简单来说就集合了所有网站建设相关的内容、要求以及素材。一般建议制成电子表格,根据页面来进行划分,将需要当初呈现的内容进行明确的标记。这一步有助於进行以内容为中心的网站建设,能够…

    2022年6月11日
    0129

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息