快速提升 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

相关推荐

  • 品牌网站还停留在几年前的审美?分享2022下半年即将流行的UI设计趋势

    到了2022年的今日,相信大部分公司都有自己的网站,但你的网站是什麽时候制作好的?是否符合现时的审美? 随着网站开发技术的提升,以及用户上网习惯的改变,如果你的网站还是以几年前的审美来设计,很可能会让用户觉…

    2022年6月20日 建站资讯
    0197
  • 实用!空白界面如何呈现友好

    引导用户输入内容 以简明扼要的文字与标识引导用户,如何成功、快捷地进行输入。即使是明眼都知道的用户名和密码账号输入,都应该在侧边以标签或者输入框内占位符的形式标注。 反馈错误、提示与帮助 在用户的操作出…

    2022年6月25日
    0154
  • 企业网站制作必知:为什麽企业必须有自己的官方网站?

    想要经营网络商店,不外乎两种方式: ① 品牌官方网站制作; ② 在电商平台开设自己的账户和店铺,如:Amazon、eBay、Taobao等等。 虽然目前使用电商平台购物的族群越来越多,而且对大部分中小型品牌经营而言,大型电…

    2022年6月21日 建站资讯
    0135
  • 卡片样式设计的7条最佳用法

      留白。介面设计需要合理和边界与边距,避免介面的杂乱。 张卡片一件事。卡片样式能够简化介面的结构,不要将卡片设计得过於复杂,破坏它们自身的简洁、便捷的特点。 合适的图片。卡片中的图一般比较小,但必…

    2022年6月25日
    0128
  • 万字干货!详细讲述场景化设计思维。

    编者按:本文从《无界面交互》一书说起,总结了场景化设计思维的知识点,帮读者掌握场景化设计。 一、从《无界面交互》开始 最近又翻了翻《无界面交互》这本书,不过与上次阅读却有了些不一样的反思与收获,这本书…

    2023年3月2日 SEO操作
    05
  • 交互设计如何有效地进行分析需求

    交互设计流程,是设计师从拿到网页设计专案的需求就着手的。交互需求分析主要目的是,明确网页设计专案的目标定位,以及它想要实现的功能。 需求分析有很多有效的方法,比如目标使用者分析、竞品分析或者已有的网页…

    2022年6月25日
    0234
  • 两种趣味十足的页面清单设计形式

      字母标记卷轴 这种清单设计模式简单来说就是以字母的方式进行排列,在清单上使用英文字母的方式作为清单的卷轴。一般出现在用户不知道列表专案的完整名称中的页面设计需求使用,以此可以帮助用户快速地进行…

    2022年6月25日
    0148
  • 配色影响界面设计的具体方面

    1、 文本的可读性 这是提了很多次的因素之一。文本的可读性很大程度不仅仅受制於文字字体本身的,如尺寸、字体类型,还有字体的配色。 2、 文字与图片叠加时 图文混排的形式是界面设计常用的布局方法之一。配色的重…

    2022年6月25日
    0135

联系我们

QQ:951076433

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