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

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

在创建实用、可访问性良好且视觉效果颇为出彩的 UI
界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX
优化小贴士(看完文章在文末获取),这篇文章继续增加 6 条实用的建议。如果你对于这个系列感兴趣,上一期的内容也值得看看:

下面,一起来看看最新的 6 项设计技巧吧!

1、用页内链接让用户尽快获取信息

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

页面内链接,或者页内导航,在过去曾经一度被很多设计师所抵制,但是如果在对的地方使用,实际上对于整个页面的体验是有明显加成的。最典型的,就是在较长页面当中,页面内跳转链接能够帮助用户更好地导航。

当用户打开一篇较长的文章的时候,文章通常会被划分为多个不同的部分,不同的章节,这个时候页内链接本质上就是某种意义上的导航,帮助用户快速定位到他们需要的位置,无需进行无休止的滚动,迅速确定自己的兴趣点,点击,精准降落。

使用得当,页内链接会大大提高页面内容的可发现性和内容的参与度。

2、让按钮文本指向性保持一致清晰

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

按钮上的文案内容是非常重要的。用户打开一个页面,当他面对一个 CTA 按钮的时候,他需要知道当他点击这个按钮之后,会发生什么,去到什么地方,起码他应该知道这个按钮所指向的行为和方向是什么,这也对按钮的标签文案提出了要求。

我经常看到网站和 APP 当中的文案使用模糊或者整体的语言风格不够一致。比如有的地方文案是「Lets do
this(就这么干吧)」,有的地方则是「Join
Now(现在加入)」,类似功能的标签,却使用了截然不同风格的文案,这种情况可能会增加用户的认知负荷,还会让用户对产品产生怀疑。

3、自动填写重复表单字段帮用户节省精力

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

有些表格可能会很长,尤其在是在电商和各种涉及专业服务的网站上,需要非常具体而准确地填写各种表单。

为用户简化冗余的表单项目是非常有必要的。比如需要用户填写送货地址这种字段,可能需要多次填写,这种字段需要花费较长时间来完成,而且可以确定的是,这几个地方是完全一样的。这个时候,系统应当提供自动填写功能来帮助用户节省精力。

不过值得一提的是,在注册表单当中,有时候需要用户重复填写密码,这个环节是出于确认密码正确性而设置的,不应该在这个地方帮用户「偷懒」。

4、将字段名称放在较长表单的输入框上方

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

对于较短的表单,我们将每个字段的名称放在填写表格的左侧倒是影响不大,用户在填写的时候视线会使用Z字型来回折返,由于内容量较少,在体验上不会让人感到疲惫。但是在较长的表单当中,情况就不一样了。

由于用户需要持续地填写内容,使用Z字型扫读会非常疲惫,这个时候,需要将字段名称移到表格的上方,这样用户可以使用F式的扫读方式,视线基本上是从上到下自然移动,在体验上更加轻松。

5、不要让不必要的文案内容扰乱操作

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

即使你所设计的网站和 APP 并不是走极简的风格,在很多的页面当中,都是需要做一些必要的精简,帮助用户更加快速和顺畅地从 A 点出发抵达 B 点。

比如在注册页面当中,一个「Register Now(立刻注册)」就足以告知要做的事情,那么副标题「请填写下方的注册表单」其实是没有存在的必要。

指引用户方向当然是必要的,但是在本身的文案和功能是不言自明的情况下,再增加额外的说明就属于画蛇添足了。

6、不要为了精简而粗暴精简UI控件

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

和上面一条的道理相同,虽然有的 UI
控件在设计上确实存在精简的空间,但是也不要为了精简而精简。最典型的案例,就是加载进度条的设计。从根源上来说,进度条的存在是为了帮助用户了解某项操作的进度,简单的加载控件仅仅只能够给用户以模糊的感知,只有明确的百分比标识才是用户真正想要知道的信息。

将百分比的标识去掉,仅保留进度条本体,很难让用户对信息把控,这种精简方式其实是在体验上开倒车。

作者:Marc Andrew

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

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

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

相关推荐

  • 经验分享html怎么做翻页效果。

    翻页动画在网页设计中是一种常见的效果,通常用于展示内容或引导用户进行下一步操作,要实现翻页动画,我们需要结合HTML、CSS以及JavaScript技术,以下是详细的步骤和示例代码: (图片来源网络,侵删) 1. 创建HTM…

    2024年6月23日
    01
  • 按钮如何在细节上让用户不犯错

    1、 正向的首选操作 也就是当需要用户进行的首选操作是正向的时候,相关的表单和按钮会拥有比较突出的视觉重量。而次要的选项按钮视觉重量会更加轻。 2、 反向的首选操作 如果需要用户进行的首选操作是反向的,如替…

    2022年6月25日
    0122
  • 网页设计有哪些技巧。

    想要提升网站的吸引力,精美的网页是必要的。网页设计的好坏,直接吸引着客户浏览的次数,有客户前来观看,我们的网站流量才会高。所以网页设计是关键。接下来我们重点分析一下网页设计的一些技巧。 第一,网页设计…

    2022年7月4日
    0119
  • 2020年最值得关注的13个网页设计趋势。

    网站设计趋势每年都在变化和发展。紧跟最新趋势,可以防止您的网站过时,以下是我们2020年的顶级网站设计趋势,以确保您的网站设计在竞争激烈的市场中脱颖而出,同时仍专注于优化的用户体验。 1. 创意配色 2020年网…

    2022年7月4日 建站资讯
    0211
  • 按钮如何设计?从6个层面详细分析按钮设计的知识点。

    虽然直觉认为按钮是一种很简单的控件,但在梳理按钮相关知识点的过程中,发现小小控件其中包含了很多容易被忽略的细节。按钮几乎是每一个页面不可或缺的元素,对于按钮的认识基本停留在视觉层面,一个圆角矩形搭配…

    2023年3月1日 SEO操作
    013
  • 如何设计好看又受欢迎的企业官网

    随着电子商务迅速发展,企业官网的数量变得越来越多,想要在如此激烈的战争中成为其中的佼佼者。企业官网不但要重视用户体验的问题,还需要设计出美观吸引用户的网站版面。那麽,如何设计好看又受欢迎的企业官网? …

    2022年6月25日 建站资讯
    0318
  • UI设计基础知识:移动端UI设计与PC端有什麽异同点

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

    2022年6月23日 建站资讯
    0594
  • 经验分享网页设计的思路和要点有哪些。

    网页设计的思路和要点 网页设计是一种视觉艺术,它需要设计师运用创新思维和技术手段,将信息以吸引人的方式呈现给用户,以下是一些网页设计的思路和要点: 1. 用户为中心:设计师需要明确网站的目标用户群体,了解…

    2024年6月14日
    011

联系我们

QQ:951076433

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