想优化 UI 作品,这14个设计细节一定要检查到位。

界面是用户在与任何产品、APP 或平台交互时看到的内容,用户体验就是建立在坚实的界面设计基础之上的。所以,如果你想要在 UI 设计上提升能力,应该多去思考界面设计背后的原因。

想优化 UI 作品,这14个设计细节一定要检查到位!

今天会跟大家分享一些被广泛运用的界面设计规则,它们能快速使得你的界面设计更干净、高效。

文案要易于理解

用更容易让用户理解(说人话)的引导文案,提升使用体验。

(彩云注:下面 2 个案例中,左侧的"购物车"和"库存 2"太过于术语化,右侧的"仅剩 2"和"加入购物车"更加贴近用户的日常理解。大家平时工作的时候,也一定要注意界面中的文案,尤其是说明文字,控件文字等等,这个点经常容易被忽略。)

想优化 UI 作品,这14个设计细节一定要检查到位!

垂直对齐易于扫视

良好的对齐方式,可以增强内容的可读性,让用户的视线更容易扫描。

(彩云注:左侧的"之"字形视动线比较难阅读,且不够专业;右侧的垂直对齐增强了可读性,也让设计看起来更加统一,能够快速的提升设计细节。)

想优化 UI 作品,这14个设计细节一定要检查到位!

给选项加图标

使用图标、动画作为标签,有助于更轻松地理解内容,它使界面看起来更加理性和丰富,能瞬间抓住用户的眼球。

(彩云注:左侧的导航相较于右边,很难第一时间准确识别它的意思,增加图标后不仅更快看清,视觉上也更加美观。)

想优化 UI 作品,这14个设计细节一定要检查到位!

大段内容要拆分

大段的长句会让内容变得难以阅读。为了获得好的体验和 UI,应该注意拆分内容,并使用项目符号突出关键点,利用拆分好的内容块让用户更快抓住重点。特别是在"功能说明和条款条件"或任何声明时,提炼要点有助于提升用户体验,这样也不至于让用户直接忽略。

(彩云注:左侧的大段文字我想应该没多少人会去阅读,右边的至少还能在短时间内快速看看几个关键词。)

想优化 UI 作品,这14个设计细节一定要检查到位!

流程增加进度条

进度条帮助用户追踪流程,它也能使查看上下步骤更加容易。线上购物,表单填写,申请流程等场景使用这种格式能很好的简化流程。

(彩云注:左边的表单 UI 不方便跟踪进度和流程,右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。)

想优化 UI 作品,这14个设计细节一定要检查到位!

错误提示要明确

错误提示一定要明确,易于理解,方便用户进行下一步的操作。如果用户不理解界面上出现的错误,用户就会感到很失望,可能会放弃接下来的流程。在 UI 设计时,在正确的地方用通俗的语言说明问题,以避免歧义,这一点非常重要。

(彩云注:我常常遇到各种出错,但出现的提示太过于术语化,也没有提示在正确的地方让我非常苦恼。)

想优化 UI 作品,这14个设计细节一定要检查到位!

按钮要正确合理

从菲茨定律(Fitt's Law)中我们应该知道,目标区域的距离和外观与所采取的行动成正比。因此,为了将注意力集中在转化按钮上,按钮应该准确放置在合理位置上。此外,按钮的大小应该易于点击,避免用户因尝试点击时不方便而流失。

(彩云注:左侧的按钮不在正确的决策位置以及按钮太小,右侧的按钮简洁明了并且符合用户的心理预期,能够让用户更快决策并点击。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用好色彩心理学

颜色是 UI 中不可缺少的部分,它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。

(彩云注:左侧的蓝色按钮颜色并不符合用户对于删除的心理预期,右侧的红色按钮对用户的心理预期有危险和警告,用红色代表删除能够让用户集中注意力关注这一特殊的操作。)

想优化 UI 作品,这14个设计细节一定要检查到位!

单列更易保持关注度

用单列展示内容,能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时,将所有信息垂直对齐时,能更好的保持用户关注度。

想优化 UI 作品,这14个设计细节一定要检查到位!

优先社交媒体账号登录

当用户准备登录或注册你平台的时候,把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号,能很好地增加点击率。

想优化 UI 作品,这14个设计细节一定要检查到位!

选择状态要清晰

在用户做选择的时候,需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

(彩云注:左侧的问题在于选中状态不清晰且选项的颜色过于丰富,右侧的选中状态清晰且选项颜色只有 2 种,选中和非选中,体验会更好。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用留白分组

如果想给信息分组,使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素,空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。

想优化 UI 作品,这14个设计细节一定要检查到位!

控件样式保持一致

保持设计的一致性,能够降低功能复杂度并让用户更快决策,一致性设计让用户更快熟悉操作而不需要太多思考。(彩云注:左侧的选项圆角不一致,会让用户思考为什么这里会有不同,而右侧的一致性选项设计,能让用户忽略内容外的干扰。)

想优化 UI 作品,这14个设计细节一定要检查到位!

搜索中的占位符要用好

在搜索输入栏添加适当的占位符,提示用户可以在平台上搜索和找到的内容,这样可以提供用户参考并带来更好的用户体验。

想优化 UI 作品,这14个设计细节一定要检查到位!

总结

以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则,这些点虽然基础,但却经常被人忽略。

作者:彩云译设计

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

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

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月2日 11:15
下一篇 2023年3月2日 11:16

相关推荐

  • 动效元素必须承载这三个“重任”

        提供回馈   动效能够强化用户正在进行的交互效果,帮助用户去了解操作的进行方向。对他们操作呈现出结果,以此让他们明白自己的操作是否成功。   确认效果   动效能够以更视觉化的方…

    2022年6月25日
    0101
  • UI设计技巧:如何利用视觉层次提升介面的易读性

    视觉层次是UI设计中搭建有效讯息架构的基础。当用户介面元素需要结构化和组织化时,合理的视觉层次的构建有效帮你快速达成这一目标。可见,构架清晰的视觉层次是UI设计中不可分割的部分,更是让用户快速了解产品的…

    2022年6月21日 建站资讯
    0137
  • 网页设计规律:盘点UI背景设计趋势

    无论是网页设计还是平面设计,背景设计都是最常用且最能体现目前设计趋势的一种设计元素。随着图片、插画、色块等元素在背景中发挥更大的作用,背景设计的功能性逐渐强化,而且还具备补充主体的功能。 如今越来越多…

    2022年6月25日 建站资讯
    0154
  • 【网页设计案例】打破一成不变的网页布局 破格网站设计需注意什麽

    过去几年,一成不变的网页布局早已让人感到乏味,幸好网页设计技术的演进,让网页设计变得更加灵活弹性,也为设计师和工程师带来更广阔的挥洒空间。Inspirr预计,今年将可看到更多「破格」网站,为我们带来处处经营…

    2022年6月20日 建站资讯
    0188
  • 小编分享解析:网页设计的重要性。

    通过可信度高的网站和出色的页面设计能够凸显您的线上业务。事实上,您的业务在线上的营销之前,您需要考虑很多因素。如果您已经有一个网站,无疑您需要扩大您的用户,优化您的网站,同时您需要让全世界都知道您的…

    2023年6月16日
    010
  • 如何做好网页设计?

    网页设计其实对于大多数人来讲,算得上是非常受欢迎的一种设计,因为如果要建设网站的话,肯定要做好网页设计,那么怎样才能够做好网页设计,其实在这其中涉及到很多问题。 1)不管是什么设备,尽量提供类似的体验 …

    2019年9月21日
    0172
  • UI设计基础知识:移动端UI设计与PC端有什麽异同点

    移动端UI设计与PC端有什麽异同点?很多PC端设计师在刚接手移动端UI设计时,会不自觉将PC端的部分设计理念「移植」到移动端上,出现水土不服的情况。开门见山地说,PC端与移动端最大的区别就是屏幕大小的不同,这也决…

    2022年6月23日 建站资讯
    0589
  • 浅谈网站当中的数据与信息可视化图表

    界面设计到了信息和数据的布局流程时,一般都会选择信息可视化形式。 什麽是数据可视化图标?简单来说,指的是为数据设计合适的图形图像。而信息可视化则更为具体化的,以及更包含着解释性的和独立性。 数据可视化…

    2022年6月25日
    0139

联系我们

QQ:951076433

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