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

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

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

1、 在 APP 当中保证底部标签栏内容不变

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

在目前绝大多数 APP 都会采用底部标签栏作为主要的导航模块,那么在设计的时候,要确保这个部分的功能上固定且明确的,不会消失,不会变化,不会给用户带来挫败感。

2、只需用字重字号变化即可构建层次

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

只需要使用字重和字号变化即可做到这一点!

在绝大多数的文本排版当中,只需要使用单一的字体即可实现层次颇为丰富的信息层级,你需要根据文本内容的重要性和优先级进行排列,优先级越高的文本字号越大,字重也越大。

另外要注意疏密排列,确保可读性和相关性更高的文本块更靠近。

3、在移动端 UI 上使用更大的可点击区域

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

虽然这个道理显而易见,但是总是在进行具体的界面设计的时候容易忘记这个重要的点。在 iOS 上,可点击的最小区域为 44×44 pt,在 AndROId 上则是 48×48 pt。

有时候,控件看起来可能较小,可以让触发区域尽量大一点。

4、使用尽量统一的导航设计

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

导航构成了用户探索网站和 APP 最为主要的行为路径,确保导航的一致性确保用户在后续的交互过程中不会感到疑惑和沮丧。

所以,在迭代升级过程中,即便是最微小的改变,也尽量在系统层级上保持统一。对于重要的、关键性的、破坏性的操作,可以做一些明显的差异化。

5、对于内容丰富的网站,让搜索功能凸显

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

如果有可能,对于内容较多的网站,尽量让搜索按钮被凸显出来,在触手可及的位置。尽量不要将搜索按钮隐藏在下拉菜单之类的地方,因为它可能是用户抵达目标的主要方式甚至可能上唯一方式。

6、不要随意选择字号

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

文本在页面当中字号到底要多大?在很多地方,字号的选择上其实是有完整的解决方案和处理技巧的。比如使用 TypeScale。

通常而言,让不同信息层级的文本大小保持 1.25 的倍率即可达到颇为不错的视觉效果和体验。而 TypeScale 可以基于基本的文本字体尺寸即 18px 按照 1.25 的比率进行缩放,从而帮你生成 H1、H2、H3 等不同层级文本的尺寸大小。

使用 TypeScale 生成的文本能够为你的排版带来自然、舒适的节奏和体验。

作者:李子木

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

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

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

相关推荐

  • 网页设计中的7大个用户体验要素。

    用户体验是现代网页设计的重要组成部分,用户的期望也在不断变化。 虽然我们无法看到未来,但在过去十年中所做的改变表明,调整用户需求从来都是最重要的。为了在不断变化的移动应用领域取得领先,设计师们必须时刻…

    2023年2月15日
    00
  • 现今流行的极简网站案例之二

    文字:形的构思 合理的对页面文字进行优化、设计,反而能够让它不仅仅成为字体,还能成为一副图片,也就是兼顾了视觉的美感。这种字体图形化的处理方式,其实很好理解:因为文字自身具有一定的含义,若能够合理的增…

    2022年6月9日
    0151
  • 行业揭秘:网页设计公司不为人知的秘密

    如今网页设计市场竞争越来越激烈,为了抢占客户,一些建站公司开始无所不用其极,甚至选择超低价获得客户,也就是我们说的“千元网页设计”,这样就真的靠谱吗?我们应该如何选择网页设计公司? “一分价钱一分货”的道…

    2019年7月25日
    0266
  • Inspirr Creation案例鉴赏:如何让网站更加有吸引力

    在如今的互联网移动时代,网站点击率的高低会直接反映网站所带来的访客数量,而提高访客数量也就意味着提高产品在网站的销售量。那麽,如何让网站更加有吸引力呢?下面,Inspirr Creation将从「kidsmebaby婴幼儿购物…

    2022年6月25日
    0116
  • 页面重构有哪些常见问题?

    页面的重构离不开设计稿的还原问题,而常见的问题则有以下几点: 页面宽度问题 主要内容部分,目前主要的分辨率一般都在960以上,但有时候视觉设计师都不大遵循这个要求。 毛边问题 放大之後会影响可读和易读性,容…

    2022年6月25日
    0125
  • 我来分享视差特效在网页设计中如何运用。

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

    2023年6月13日
    00
  • 万字干货!从零开始推导可视化色彩。

    本文分享个人搭建青云 QingCloud 可视化色彩体系过程中的一些经验。(阅读此文需要一定的色彩空间知识作为基础,否则有些难啃) 一、前言 1. 背景 目前平台上使用了三套组件库 A、B、C,A 是最原始的组件库,基于此…

    2023年3月7日 SEO操作
    08
  • 金融行业如何绘制图标?高手总结了2个方法+1个工具。

    小图标是界面的核心组成部分,承载着信息传递的重要作用。作为页面的最小展示单位,图标设计也是最能考验设计师基本功的一项工作。不过设计师熟练掌握的,往往只是单个图标的风格化绘制方法。在这个过程中,设计师…

    2023年3月7日 SEO操作
    06

联系我们

QQ:951076433

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