快速提升 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

相关推荐

  • 配色影响界面设计的具体方面

    1、 文本的可读性 这是提了很多次的因素之一。文本的可读性很大程度不仅仅受制於文字字体本身的,如尺寸、字体类型,还有字体的配色。 2、 文字与图片叠加时 图文混排的形式是界面设计常用的布局方法之一。配色的重…

    2022年6月25日
    0129
  • 90%的网站设计都使用轮播图,但专家却说作用不大

    无论是页面布局还是内容填充,甚至是网站SEO优化,目的都是为了提高网站的流量和排名,继而提升网站的转化率。对於很多网站来说,轮播图是不可缺少的重要元素之一,因为它可以尽可能多的突出产品,展现产品信息,提…

    2022年6月25日 建站资讯
    0235
  • 如何制作专业的企业网站

      问题:公司网站现在存在漏洞经常被攻击,正在考虑重建。但是比较困惑的是,目前的网站转化率,而且感觉对比同行的企业网站并不是很专业。那麽如何制作专业的企业网站呢? Inspirr Creation解答: 其实现在很…

    2022年6月25日
    0139
  • 如何拯救尴尬的交互体验?  

      界面设计当中的交互流程出现问题并不罕见,主因当然是无法很好地在兼顾到细节。在界面设计过程当中,大多都是使用宏观框架,要细致到使用用户体验地图、卡片分类等方法去进行细节设计显然并不是那麽显示! …

    2022年6月25日
    0107
  • 购物网站移动端详情页怎样设计才吸引用户眼球

    对於一个购物网站而言,网站装修是影响网站流量的重要因素之一,但要导致买家最终决定购买的原因却是产品详情页的设计。即使你的网站装修设计得再好,但产品详情页设计头图页面设计不好,即使为你的网站带来不少流…

    2022年6月25日 建站资讯
    0135
  • 如何从按钮的细节去改善用户体验?

    可以从“预防出错”这个缓解上去花心机——可用性的问题如果能够很好的解决,网页的用户体验也不会差到哪里去。为能够帮助用户尽量避免容易出错的情况,让用户做出更多准确的操作。 最直观的实现形式,就是通过视觉上的…

    2022年6月25日
    0129
  • 简单好用的网站设计应专注的三件事  

      专注于行为召唤 网站设计的每一处细节都硬要是有目的,或相应地迎合用户的喜好还是行为与需求。而行为召唤设计也正是这依据,引导使用者的文案、按钮以及连结都应该保持清晰、明显,尽量地吸引用户的注意,…

    2022年6月25日
    0114
  • 为何不建议你使用自动切换的形式?  

      轮播图自动切换设计在很多界面设计当中非常常见。一般都是在一个固定的区域中,每X秒就自动切换到另外一张图片。这看起来似乎很吸睛,因为提高了界面内容的曝光率。然而,事实上并没有多少用户会盯着图片等…

    2022年6月25日
    0117

联系我们

QQ:951076433

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