欢迎来到培训无忧网!

全国切换

咨询热线 400-001-5729

位置:培训无忧网 > 新闻资讯 > 电脑/IT > UI设计 >  UI设计培训:提升UI设计效果的技巧有哪些?

UI设计培训:提升UI设计效果的技巧有哪些?

来源:www.pxwy.cn 发布人:云朵

2021-12-22 14:22:49|已浏览:181次

UI设计培训:提升UI设计效果的技巧有哪些?

    在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇文章梳理了 9 个实用性很强的UI效果提升小技巧。

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

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

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

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

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

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

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

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

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

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

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

5、为阴影统一光源

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

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

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

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

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

8、请大胆使用留白

    留白是排版设计的时候,最重要的元素。请不要吝啬,不要过度追求信息的饱和度,尽量让界面有呼吸感,在这个信息过载的时代,尽量给用户以舒适通透的体验。

    让行高至少为文本高度的 1.5倍,基于亲近原则,合理地将元素分组的前提之下,让元素与元素、组与组之间,不要过于密集。

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

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

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

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

    本文由培训无忧网长沙牛耳教育课程顾问老师整理发布,希望能够对想参加长沙UI设计培训的学生有所帮助。更多课程信息可关注培训无忧网UI设计培训或添加老师微信:15033336050

      注:尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-9218.html 违者必究!部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们,了解更多相关资讯请关注UI设计频道查看更多,了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多:150 3333 6050

留下你的信息,课程顾问老师会一对一帮助你规划更适合你的专业课程!
  • 姓名:

  • 手机:

  • 地区:

  • 想学什么:

  • 培训无忧网
免 费 申 请 试 听
提交申请,《培训无忧网》课程顾问老师会一对一帮助你规划更适合你的专业课程!