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

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

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

1、以结果和目标为导向来撰写文案

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

撰写文案的时候,始终以导向结果和目标的方式来撰写,在结构上,尽量以指向目标的关键词置于文案靠前的部位,这种方式能够帮助用户尽量清晰快速地理解要做什么,减少发生错误的可能性。

2、确保投影的光源方向是一致的

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

虽然投影在 UI 界面当中是相对不那么显著的元素,但是当投影效果不统一的时候,也容易让人感到迷惑。在投影的设计上,经常出现的错误之一就是不同元素的投影角度、方向、距离不一样,尽量让投影的方向角度是一致的,确保整体体验和视觉逻辑的统一。

3、多用清晰的留白来实现视觉层次结构

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

清晰的留白是呈现视觉和排版层级的关键,将文本按照信息层级的重要程度进行排布之后,根据相关度进行分组,这个时候,留白就显得非常重要了。组内的文本保持接近,而不同的组之间的的留白要足够多,确保呼吸感,但是不能距离太远,否则不容易快速扫视阅读。

4、为段落选择合理的宽度

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

在处理阅读的可读性的时候,有很多讲究,不仅行高和间距要平衡,也要控制段落的宽度来贴合用户的阅读习惯和节奏。

通常在西文为主的排版中,认为每行 45 到 75 个字符是一个特别适合阅读的宽度,这种限制让每行不会太长,足以呈现,但是也不会在扫读过程中迷失。

5、在空状态页面中给用户提示操作

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

空状态是很多 UI 界面和流程的基础组成部分,甚至很多时候就是初始状态。空状态是告诉用户新功能、帮助用户发现新功能的一个重要的渠道。不要让用户在空状态下真的「空转」,而是引导用户去做有意义的事情。

6、根据文本的x高度来设置行高

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

在西文当中,小写字母x的高度被称为「x高度」,x高度决定了通常文本的视觉高度,基于文本的x高度来计算行高和行间距是最合理的基础。x高度越大的字体,行高需要适当调整得越高。在中文当中通常不存在这样的情况,不过中文当中,行的宽度会影响到行高,通常每行字数越多,行高需要相应的更高一些,确保可读性。

作者:陈子木

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

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

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

相关推荐

  • 2022 设计趋势!Web3 圈子正在流行的新设计风格-Boxmoji。

    无独有偶,设计师 Diego Salvatierra 还提出一种新的「Boxmoji」的设计趋势,而他所总结出的这种设计趋势,和 Michal Malewicz 所提出的「新粗野主义」风格有不少共通的地方。「boxmoji」有啥特征?所谓「Boxmoji」…

    2023年3月1日 SEO操作
    07
  • 用实战经验带你掌握设计资产更新全流程。

    对于 B 端数字产品来说,建立一套企业级的 Design Systems 可以提升团队生产力为企业赋能,这当中会沉淀很多设计资产(设计资产指设计体系中的所有产出物)。在有了设计资产后,如何确保使用者能够正确使用?如何维…

    2023年3月7日 SEO操作
    01
  • HootSuite:TikTok广告统计数据。

    TikTok 广告有可能覆盖近8.85亿人 如果您决定在 TikTok 上投放广告活动,则需要确保您的创意与频道的精神相匹配。简而言之,让内容保持轻松和易于传播。 18-24岁是 TikTok 最大的广告受众 鉴于Z世代对该平台的青睐…

    2023年3月1日
    09
  • 小编分享自适应网站设计的特点是什么。

    自适应网站顾名思义,网页是自适应显示在不同大小的终端。一旦设计好,它们通常是合适的,允许同一页面自动适应不同的屏幕大小,并根据屏幕宽度自动调整布局。 一、自适应网站的优势 响应式网站设计满足用户在不同…

    2023年6月15日
    01
  • 小编教你浅析:电子商务网站设计中三个常见错误。

    不可否认,一个好的电子商务网站是零售商想要增加在线销售和客户满意度时需要考虑的第一件事。对于一个设计较好的网站,小编将对电子商务网站设计中常见的3个错误进行深入的剖析。1.不合理的信息量吸收信息是每个人…

    2023年6月16日
    00
  • 网站设计专业公司要注意哪些事项?

    网站设计,现在是一个信息化的时代,如果企业能够建立自己的网站。那么就能够跟上时代,文宣企业的产品,树立企业的形象,所以说,建设企业网站是非常有必要的。但是一个成功的网站往往也不是那么容易建成的,那么…

    2019年11月12日
    0271
  • 我来分享网页视觉设计包含内容。

    网页视觉设计,也被称为网页界面设计,是一种专注于创建用户友好、吸引人的网页设计的过程,它涉及到使用颜色、字体、图像、布局和其他视觉元素来创建一个易于使用和理解的网站,网页视觉设计的目标是提高用户体验…

    2024年6月28日
    00
  • 网站设计中的排版技巧。

    排版不仅仅是选择一个字体,字体大小和粗细。人们通常认为你只需要选择一个漂亮的字体,仅此而已。但是排版是大多数设计的重要组成部分。 作为一名印刷设计师,我很快学会了良好的排版技巧的重要性。设计软件可以很…

    2023年2月18日 SEO操作
    02

联系我们

QQ:951076433

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