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

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

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

这篇文章是之前的《第一波!快速提升 UI 设计效果的 9 个小技巧》的后续,文章继续梳理了14个我所总结梳理出来的小技巧,来看看吧:

1、微调明度让文本更显轻盈

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

在长篇幅文本当中,如果文本字体使用「常规」的粗细,视觉上依然显得有点过于重,可以通过微调它的色彩,选择诸如 #4F4F4F 这样的色彩,让它对眼睛更加友好、舒适。

2、字号越小,行高越大

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

在文本排版当中,字号和行高并不是等比缩放的,当字号缩小的时候,行高不要等比例缩小,而是要把字号和行高的比例提高。同理,当字号放大的时候,对应的行高应该比按比例放大之后的行高要小。

3、基于色调和饱和度来丰富配色

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

在很多设计当中,你并没有必要用很多不同的色相来丰富配色方案,基于一个基础色,然后微调色彩的色调和饱和度,就可以快速搭配出合理且协调的视觉效果,增强整个设计的一致性。

4、突出最重要的元素

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

凸显最重要的元素,让视觉中心明显。通过调整字体尺寸、字重、色彩以及和背景的对比度,可以让这些元素显得明显。只需简单的调整,即可达到良好的用户体验。

5、确保图标样式高度一致

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

用户界面中使用图标的时候,请使用一致的图标,确保它们在大小尺寸、视觉风格、笔触粗细、填充样式都一致,不要混搭。

6、始终让行为召唤语句在最醒目的位置

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

这应该是常识吧?不过在信息过多、或者掺杂过多意图的页面当中,这种常识也常常被忽略。同样的,通过色彩、大小和样式对比,让行为召唤语句尽可能凸显。尽量不要总依赖图标这样的元素,使用文本标签会更加显著一些。

7、为表单报错信息提供视觉指引

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

在用户填写表单的时候,如果出错,用户可能不知道问题出现在哪里,通过明确的视觉指引,一方面告知用户出错的情况,另一方面,让用户明白出错的原因,对于整个流程好处更明显。

8、凸显菜单中最常用的功能和操作

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

在设计程序菜单的时候,优先级最高的功能和选项应该高亮显示,在屏幕上保持显眼,比如「上传图片」等等。

9、从产品图中提取背景色

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

基于你的核心产品图片的色彩来取色,用于背景、文本和其他的的视觉元素,然后合理地分别给不同的元素赋予不同的视觉效果。而这其中,背景色的一致性能够给整个视觉带来最直接、最直观的影响。

10、使用更大的可点击区域

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

在给移动端设计UI界面的时候,这些控件和可交互的元素要尽可能地大一点,确保用户的手指能够准确地点击到所看到的元素。使用按钮控件替代文本链接,结合指引性的图标,并且确保尺寸足够大。在
iOS 中,最小的按钮尺寸为 44×44 pt,在 AndROId 当中,为 48×48 dp 。

11、确保浅色文本和图片之间的对比度

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

浅色文本和浅色图片之间的对比度可能会不足,这个时候,可以在文本底下增加一个深色的半透明叠加层,从而达到提升对比度的效果,并且这种设计的好处在于,当你更换背景的时候,前景文本可以不用进行调整。

12、一组超赞的标题英文字体

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

这组字体是我在过往的设计项目当中总结出来的,特别适合用来作为标题来使用的字体。

13、一组很棒的正文英文字体

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

在长篇幅的文本当中,使用这些久经验证的字体,可以给用户带来极为突出的阅读体验。

14、给进度条增加更加清晰的信息指引

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

这可能是最不应该精简的组件了,尽可能在进度条,尤其是下载进度条当中,提供更多的信息,比如下载的进度和百分比,并不复杂,但是这却是用户最想获得的信息。

作者:陈子木

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

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

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

相关推荐

  • 最常见的导航错误设计及优秀导航设计案例

    导航设计千变万化,同时还需要兼备可用性和易用性,给用户提供舒适顺畅的网站用户体验。可靠的导航设计能帮助用户找到想要的内容,提升页面的转化率;但设计不合理的导航对网站用户体验来说简直就是一个灾难,甚至间…

    2022年6月25日 建站资讯
    0224
  • B端筛选功能如何设计?4个章节帮你掌握。

    引言筛选作为一个常用的功能,在产品设计中的应用面是非常广的。比如我们去购物,会选择销量高、价格实惠并且包邮的商品,筛选区的设计就便于用户进行数据的查询和定位,可以快速查询到满意的商品。本文就筛选这个…

    2023年3月7日 SEO操作
    01
  • 提升网站的用户体验,先喝点鸡汤

    以用户体验设计为主要方式的网站设计,应该还记得滚筒形式,是早前比较流行的。但是,对於用户来说,这种形式并没有多麽好,因为违背了用户体验的重要原则:需要用户回到页面当中才能够被识别。 由此得出一个经验:…

    2022年6月25日
    0114
  • 网页设计技巧:优秀的Loading动画需要具备哪些特徵

    没有人喜欢等待,在用户心目中,优秀的应用、工具和网站都应该制作精良能快速响应他们需求的产品。因此优秀的Loading动画,能减缓用户等待焦虑的心态,也能用来作为品牌宣传和增加曝光度。那麽,优秀的Loading动画…

    2022年6月25日 建站资讯
    0109
  • 教你网站设计要注意什么。

    网站设计要注意布局、色彩搭配、导航清晰、响应式设计、用户体验和SEO优化等方面。 (图片来源网络,侵删) 在当今的数字化时代,网站设计已经成为企业和个人展示自己的重要工具,一个优秀的网站不仅能够吸引访问者…

    2024年7月1日
    00
  • 网页设计技巧:UI设计时需要注意哪些细节

    很多企业总会有这样的疑惑,明明我的网页设计和其他网站看上去相差无几,为什麽总觉得差了点什麽,总觉得没有别人好看? 说实话,网页设计这种东西,好看与否不在於整体上的布局差异,往往都是小细节影响全局展现,…

    2022年6月25日
    0167
  • 表单页面设计的教训

    表单页面设计好,到底有什麽好处?典型例子可以参考旅游网站Expedia曾经贴出的分享:在他们网站订单页面当中,部分的用户填写了旅游地点、旅馆、付款资讯,并按下“立即购买”後,却没有成功完成交易!经过他们的细致…

    2022年6月10日
    0137
  • 什么是字距排版?网页设计定义。

    包含在用户界面 (UI) 样式指南中的一个关键元素是排版将如何出现在您的移动程序 或 网站设计中。您可以选择是要使用预先存在的字体还是创建您品牌独有的新字体。但是随着您的排版决策变得更加细化,您最终将需要讨…

    2023年3月7日
    01

联系我们

QQ:951076433

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