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

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

在创建漂亮而高效的 UI 的时候,你需要花费不少的时间来打磨细节,并且在此过程中进行不断的调整,让你的客户、用户以及你自己感到满足。如果你是设计师,你会很明白这种感受。

我在做设计的过程中,发掘了不少实用的、有效的细节调整的技巧,可以快速地将整个设计稿的视觉效果提升一个档次。

在这篇文章当中, 我将这些技巧梳理了出来,希望能够给你一些帮助。

1、让元素看起来更清晰的技巧

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

其实并不复杂,就是在通常不会用阴影的元素边缘增加「多个投影」或者使用非常微妙的边框(比阴影要稍微暗一点),可以让这个元素看起来更加清晰,并且避免了弥散投影带来的那种拖泥带水的感觉。

2、只使用一个字体族做设计

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

虽然使用字体组合可以创造视觉风格和样式上的对比,但是实际上仅用一个字体族所制作的效果是完全没问题的。

请忽略「至少使用2种不同字体」这种设计规则,通过调整字重、尺寸、配色,你同样可以达到相当优秀的效果。

3、长篇幅文本最好在 20pt 浮动

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

对于长篇幅的文本内容,比如博客文章,项目说明以及需要用户阅读一段时间的内容,最好在正文当中,采用 20 pt 的文本参数。

当然,考虑到使用场景、字体本身的样式差异,20pt 这一参数并非是定死的,而是可以根据实际效果进行灵活调整。在过去的 10 年间,依然有很多网站遵循传统采用 18pt 的字号,阅读体验相当糟糕。

4、提供可选的新用户引导流程

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

在用户首次安装 APP 或进入网站的时候,通常是会提供给用户以一个新用户教程以引导用户熟悉产品和交互。

但是!并不是每个用户都有看完教程的必要,在界面中提供「跳过」选项,让用户拥有选择的权利,同时,这个「跳过」按钮尽量在界面的底部,毕竟在这个大屏当道的时代,手指最便捷的交互区域主要集中在屏幕底部。

5、为阴影统一光源

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

这可以算是一个统一体验的进阶技巧了,当 UI 界面元素的光源不统一的时候,可能会有一部分用户能够感知到并觉得奇怪。但是如果光源统一,能够给 APP 的体验带来强烈的一致感。

6、用微妙的叠加图层来改善对比度

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

文本和背景之间的对比度并不一定理想,这个时候你可以额外增加一个色彩叠加层,不过这个叠加图层尽量不要使用纯色,而是要用一定的渐变(从下往上或者从上往下)来变化,一方面优化了元素之间的对比度,还能确保自然舒适。

7、克制地使用居中对齐的文本

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

居中对齐式的文本排版并非不能用,而是要克制地使用。尽量只在标题和少量的小块文本当中使用居中的文本排版,对于其他的内容,请还是遵循普世的左对齐排版。

8、请大胆使用留白

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

留白是排版设计的时候,最重要的元素。请不要吝啬,不要过度追求信息的饱和度,尽量让界面有呼吸感,在这个信息过载的时代,尽量给用户以舒适通透的体验。让行高至少为文本高度的
1.5倍,基于亲近原则,合理地将元素分组的前提之下,让元素与元素、组与组之间,不要过于密集。

这是提升设计感最快的方法之一。

9、加深浅色背景上的文本

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

现在的设计师同学应该很清楚不要在浅色和白色背景上使用纯黑的文本了,大家通常会使用灰色或者使用使用透明度来控制文本的深浅,不过很多时候为了展示需要,很多同学用的灰色文本,可读性并不强。

为了改善实际的体验和效果,保证文本内容的可访问性,适当加深文本的灰色,在保证色彩对比度以及和其他文本的层次感的前提下,达到优秀的视觉体验。

结语

想要让 UI 界面的体验更加优秀,其实在很多时候都需要在细节上打磨即可。类似这样的小技巧有很多,后面我还会继续补充。

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

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

(0)
重蔚重蔚管理团队
上一篇 2023年3月1日 13:03
下一篇 2023年3月1日 13:04

相关推荐

  • 超全总结!2022 年值得关注的 7 个网页设计趋势。

    编者按:这篇文章出自资深设计师 Erik Messaki 的总结,文章总结了 7 种网页设计趋势,虽然其中很多趋势之前已经存在,但是在细节和特征上,Erik 有更为深入的分析,值得看看。 关注趋势本质上就是关注未来可能存在…

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

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

    2022年6月25日 建站资讯
    0126
  • 网站在建设时 文本该如何排版。

    对于网站来说,其最核心的部分无疑就是网站中的内容,也就是以文字呈现给用户并供其提取信息的文本。所以在设计网站的装饰、图片、图标、按钮等部分的同时,也一定不能忽视文本的排版设计问题。清晰的排版和合适的…

    2022年7月3日
    0120
  • 页面常用功能和重要数据如何更接近用户

    页面设计之前需切实的分析和确认大多数用户的意图,呈现他们想要的目标; 精心筛选出和跳转至用户需要的条目; 将用户常用的选项或者常精心查阅等的内容最为默认、置顶等; 要特别说的是电商类型的网站建设,一定要…

    2022年6月12日
    0142
  • 小编分享跨屏网页设计越来越流行的原因是什么。

    跨屏网页设计是近几年来广为流行的方式,跨屏建站方案替代了传统的多屏建站方案,多屏建站即为不同的终端单独建立一个网站,而跨屏建站则是创建一个套网站,但是可以自适应不同大小屏幕的终端,优点是成本更低,维…

    2023年6月15日
    00
  • 我来说说北京哪里学网页设计,北京网页设计工资一般多少。

    ## 北京网页设计学习与工资情况 ### 1. 北京哪里学网页设计? 在北京,有许多机构和学校提供网页设计的培训课程,以下是一些知名的培训机构: – 北京大学信息科学技术学院:提供计算机科学与技术、软件工程等…

    2024年7月28日
    00
  • 三个方面着实提升动效实用性

    突出动 既然动效,一定要清晰而着重的突出“动”这点。要动得符合规律,也要动得恰到好处。从图形图像到用户的交互过程,动效都要动得可爱而趣味。 视觉反馈 尤其是针对於网站对产品的展现,视觉反馈是非常重要的设计…

    2022年6月25日
    0111
  • 版面布局概述

    其实,你真的知道什麽是界面设计当中的版面布局吗? 将需要放置的文案、图片、图标等元素合理地安排到页面上,然後根据可视化的方式,将元素调整得在位置、大小等方面上达到美观的视觉效果。一般来说,在页面版式布…

    2022年6月25日
    0196

联系我们

QQ:951076433

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