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

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

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

1、保持信息简短直白,去掉枝节

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

确保文本信息足够简短,切题,去掉文本当中不必要的修饰和枝节,让用户容易理解,有直接对话的感觉。

向用户呈现清晰简洁的信息,有助于更好地达成预期的目标。

2、在创建较长文本时用 20pt 字号

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

对于长篇的文本内容,比如博客文章,项目描述,正文文本部分建议使用 20 pt(甚至更大也可以)的字号,这样能够确保整体内容的可读性。

当然,在具体应用的时候,需要根据实际设定的字体来灵活处理,有些很纤细的字体在 20 pt 的时候阅读体验不够好,这个时候可能需要适当放大。

3、不要仅靠色彩来传递报错信息

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

在设计的时候,不要仅靠颜色来传递信息,这一行点很重要。尤其是在表单的报错信息当中,仅仅给输入框增加一圈红色的描边,并不足以让用户清晰地意识到出错,以及要如何修正。

一方面,要使用明确的指引信息帮用户了解要如何改正错误,另一方面,需要考虑到有视觉障碍的用户无法通过色彩感知到信息。

实际项目中,使用图标和文本来共同传达信息,有助于让信息更容易理解,提升整体的可访问性。

4、使用4pt基线和8pt网格来控制纵向间隔

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

说道字体和排版,可以将 4pt 基线和 8pt 网格系统结合起来使用,可以在设计中制造出更强的韵律感。

借助 4pt 的基线来做行高的控制,使用 4pt 的倍数(4pt、8pt、12pt、16pt、20pt)来设置行高的数值。

最主要的原因在于,在传统的 8pt 网格系统当中,行高的控制相对而言比较粗糙,可选的范畴比较窄,单独使用 4pt 基线系统来控制行距则会好很多。

5、减少标题文本的字间距和行高

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

和较长的正文文本不一样,标题文本通常会比较短,但是相应的,因为文本尺寸较大,你需要适当地降低字间距和行高,来确保标题的整体感更强。

适当的降低行高和字间距能能够获得更好的可读性,也会让视觉舒适感更强。

6、使用多层次阴影和微妙的边框让元素突出

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

在 UI 界面当中,可以给元素添加多层次的阴影,或者使用非常微妙的 1px 的边框(仅比实际阴影更深一点的色彩),可以让它们看起来更加清晰和突出。这种处理方法制造出来的阴影不会显得太过浑浊,也可以让整体视觉更加清晰。

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

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

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

相关推荐

  • 极光风如何设计?用案例详述热门的极光风设计趋势。

    作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。最近黑马哥结合落地产品所呈现出来的设…

    2023年3月1日 SEO操作
    020
  • 网页设计技巧:如何制作高品质的企业网站

    随着互联网重心逐渐改变,企业网站不仅仅只是作为一个门户网站,更多的是满足用户的需求,提高网站建设的水平,使网站的访问率、转化率和跳出率能达到理想的效果。 如何制作高品质的企业网站呢? 1. 注重网站页面的…

    2022年6月25日 建站资讯
    0126
  • 避免花俏乱糟糟的网页设计

    我们讨厌那种看起来花俏的乱糟糟的网页设计,这些网站看过之後让人头疼。 简单网页设计,这实际上就是我一直认为很不错的界面设计(当然也有尴尬的界面设计)。我接受这一原则,完全是因为WEB2.0的缘故。如果有人说…

    2022年6月12日
    0169
  • 三点有效提升着陆页的转化率

    1、视觉上重视图形图像元素   其实任何的类型的界面设计,视觉方面的比重都非常大!我们都是视觉动物,喜欢直观又吸睛的元素。因此,在进行着陆页设计时,最好能够合理化的基础上使用图形图像元素。毕竟,大段…

    2022年6月25日
    0114
  • 说说网站开发教程,网站设计与制作教程。

    网站开发教程,网站设计与制作教程 在当今数字化时代,拥有一个自己的网站已经成为许多个人和企业展示自己、推广产品和服务的重要途径,对于许多人来说,网站开发和设计仍然是一个相对陌生的领域,本文将为您提供一…

    2024年6月29日
    00
  • 颜色是如何服务於页面视觉比重?

    颜色是页面设计一个不可或缺的重要组成部分,而颜色自身就携带着一定的属性,所以很明显影响着页面的视觉效果比重。 其实,凭藉着我们自身的直觉去感知颜色的比重都是真实的,因为这些分辨能力可以说是与生俱来的。…

    2022年6月17日
    0206
  • 如何为网页设计营造出八十年代的风格

    我们经常说「古老当时兴」,看看最近网页设计非常崇尚八十年代的设计元素就知道。为何八十年代的设计元素如此火爆?因为在这十年间所流行的排版、配色都非常地具有代表性,在今天看来,八十年代风很复古,但却带有一…

    2022年6月25日 建站资讯
    0154
  • 网页设计技巧:如何在网页设计中巧妙地使用「纹理」

    随着扁平化设计的高度成熟,「纹理」在网页设计中已经成为一个不可或缺的元素。Inspirr网页制作表示,优秀的背景纹理能增加整个网站在视觉上的深度和丰富度,尤其是针对单色网页设计,加入纹理能让整个设计变得更加…

    2022年6月20日 建站资讯
    0132

联系我们

QQ:951076433

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