快速提升 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年6月25日
    0201
  • 我来分享视差特效在网页设计中如何运用。

    视差特效是目前最流行的网页规划趋势之一。在这个翻翻滚画特效支撑之下,前景的元素和背景会在翻滚阅读时以不同的速度运动,营造出动感又共同的视觉体验。 视差动效能够运用在绝大多数类型的网站傍边,它是增强用户…

    2023年6月13日
    00
  • 什么样的网页设计才独特。

    现如今千篇一律的网页,对于很多人都看腻了,绝大多数人都对一些独特的网页有着喜好。 想要有独特的网页那么就要从很多地方下手。最常见的就是创新,现在的网络技术是非常发达的,所以在设计的时候就可以通过各种手…

    2022年7月4日
    0221
  • 快速提升 UI 设计效果的 6 个小技巧 (UI 设计集-8)。

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

    2023年3月1日 SEO操作
    00
  • 网页设计公司设计网页项目流程

    今天为大家介绍一下南宁和其他一些网页设计公司的网页设计项目流程,请大家悉知。 step 1:网页设计公司业务人员与客户沟通网页制作需求 通过当面交谈、电话或Whatsapp等方式了解客户对网页制作的具体需求,其中包…

    2019年5月13日
    0263
  • 超越金钱:网页设计项目的隐藏好处。

    并不是所有的网站设计都是平等的,事实是,他们在薪酬、范围和你的整体经验方面都有所不同。但几乎每个项目都会给你带来一些好处,它们并不总是金钱。它们并不一定是显而易见的——至少现在不是。这可能需要你在事后…

    2023年2月21日 SEO操作
    00
  • 这两点会影响表单的可流览性  

      标签位置   不少的页面设计经验告诉我们,用户对标签顶部对齐的表单中所耗费的时间最短。因为这种方式大大地减少了使用者眼球运动次数。在通常表单标签设置中,右对齐的方式能让使用者也能很快帮助用户…

    2022年6月25日
    0111
  • 聊聊公司手机网站设计新技巧你知道多少呢。

    了解响应式设计、用户体验优化、视觉层次感等技巧,以及使用HTML5、CSS3和JavaScript等技术。 (图片来源网络,侵删) 在当今的数字化时代,手机网站设计已经成为企业在线营销的重要组成部分,随着移动设备的普及和…

    2024年7月1日
    00

联系我们

QQ:951076433

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