这3个UI设计细节,可以让你感受到和高手的差距

  设计可能更容易赢得用户的青睐。这就意味着我们进行设计的时候,要从那些容易被忽视的细节做起。这篇文章中,我将会从视觉反馈、微和留白,这些可能会被我们忽略,但却极其重要的设计元素来研究细节是如何影响一款产品的用户体验。

  反馈在我们制定设计规范时经常会被忽视,但它的存在实际上有效的梳理了产品的整个交互流程。交互设计其实可以看成是设计人与物(App或网站)之间的对话。如果没有任何反馈,就相当于聊天时的你滔滔不绝,但对方却一言不发,两人之间毫无互动。从产品的角度而言,如果没有反馈,用户则无法得知当下发生了什么,也无从确定自己操作的结果,更不必提要进行下一步的操作。所以说无反馈,不交互。

  良好的交互设计应该确保用户的每一次操作都能得到视觉反馈,无论成功与否,这会让用户体会到使用产品期间的一种安全感——一切尽在自己的掌控之中。视觉反馈的目的就是通过一种可视化、简洁的形式向用户展示操作的结果以及当前系统所处的状态。

  我们在手机上进行点击、滑动等操作时,按钮、控件和其他交互元素通过改变自身形态做出响应,为我们提供反馈。这种反馈模式会拉近用户与产品之间的距离,因为用户可以容易的感受到自己在同屏幕中的元素进行直接真实的互动。

  微文案是指引导用户操作的小段文字,在App和网站中,微文案的应用包括按钮上的标签,错误提醒和提示文字。在使用过程中,用户主要注意力可能都在页面的排版布局和配色上,这些微文案的存在似乎并不显眼。但如果恰当的使用微文案,这将会给产品带来魔法般的效果。以下就是微文案如何给设计添彩的具体实例。

  我们一直提倡做一款减少机械感却有温度的产品。如果微文案的使用可以借朋友之间对话的口吻,这会在无意间提升产品的用户友好度。拉近与用户之间的距离,让用户更容易信任这款产品。

  用户使用App或者网站都是为了解决特定需求的。例如想买一件衣服,看一场球赛直播或者是查看明天的天气情况。一旦出现系统错误导致进程受阻,这将给用户带来沮丧和焦虑情绪,使用户失去继续使用App或者网站的耐心。此时微文案的作用就可以凸显出来。

  上面这个报错提示可以说是一个反面典型,An error occurred(出错啦)这句模棱两可的话很难让用户信服。报错?到底报什么错了,为什么会报错,我接下来应该怎么做?

  从另一个角度说,在系统报错的时候,良好的微文案使用会起到安抚用户的作用,让用户在遇到问题时可以坦然面对。

  微文案的使用要考虑具体场景,因为微文案本身即为引导性文字,它就是为解决用户心中的疑惑而存在。例如在支付宝的支付设置页面中,我们可以在页面底部看到“账户安全保障中”的文案。因为涉及到金钱交易时,用户都是极其慎重的,所以支付宝通过细节,竭力来提升用户使用期间的安全感。这里微文案的使用就是通过强调资金的安全性来消除用户内心的不安。

  留白(或负空间)是指页面中设计师没有放置任何元素的区域。留白不代表一定要使用白色,而是预留出一定空间来组织页面空间中的其余元素。虽然很多人认为留白纯粹属于浪费宝贵的空间,但不可否认留白依旧是UI设计中的一个重要元素。

  页面中展示过多的信息会增加用户阅览的难度。对于那些觉得页面就应该塞得满满当当的客户,我们给他们看下面这个图。

  对于用户,杂乱的排版不存在任何吸引力,尤其是当前页面没有任何的层级结构,用户更是毫无阅读兴趣。

  使用留白主要是受限于人类短暂的记忆力,我们的短期记忆可以容纳的信息极少(在未经复述的条件下,大部分信息在短期记忆中保持的时间很短,通常在5-20秒,最长不超过1分钟)。用户看到一个页面,如果里面展示的信息过多,用户就会处理不过来。使用留白就可以减少当前页面中元素的数目,提升页面的可读性。

  用户的注意力是宝贵的资源,应该得到合理的分配。我遇到过很多客户,他们说这里要使用大红色突出,那里要放大字体吸引用户注意。在他们的设想中,页面里的任何一个元素都要强调出来,但是殊不知页面中视觉重点有且只有一个,过多的给予对于用户来说其实是一种负担。少即是多,这是互联网时代的信条。

  谷歌搜索的网站出现了大面积的留白,用户的目光自然就会被吸引到搜索框。这和谷歌的初衷相契合,他们希望用户在这个页面完成搜索操作,所以不用展示过多其他的信息来分散用户的注意力。

  根据交互设计中的接近法则:当对象之间距离太近时,用户潜意识中会认为它们是相似的。我们可以通过使用留白来建立不同元素之间的层级关系。例如,下图中几乎每一个人都会看到两组点,而不是16个点。

  对信息进行整合分组会提升内容的可读性。下图中右表格将15个字段分成3组。同样数量的内容,但用户的印象却大不相同。

  网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

  随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

  每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

  今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果: 让内容在显示区域滚动; 内容面板没有接触到顶部时,让内容面板移动至顶部; 内容面板接触到顶部,没有接...

  你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

  二哈讲述了广告业务的流量提升,在讲述提升广告点击率的时候,提到了迎合用户喜好的概念,本篇就来说说如何迎合用户喜好吧。...

  对于网页而言,视觉信息的传达至关重要。用户通过页面获取信息,文字、图片、图标、按钮、表单等UI元素都承载着不同类型的信息。在这其中,文字的作用尤其巨大。排版设计的时...

  如何设计一个简单的新闻聚合产品?文章介绍了制作极简的新闻聚合产品的7步骤,好奇的你和我一起来看看。 你知道在三四线的县城,用户在哪里看新闻么?不是在今日头条里,而是...

  响应式网页是一种对于设计的全新思维模式,响应是双方的,是互动的过程,在这个过程中设计师要考虑设备的性能、Dom节点数量、屏幕的大小等。 1、如何理解响应式设计(RWD) 响应...

  在这篇文章中,作者将讨论一些长滚动的优势和需要考虑的快速提示。 长或无限滚动的网站最近越来越普遍,这不仅仅是趋势或巧合。长滚动的技术允许用户来回移动大量的内容,且不...

上一篇:网站建设需要图文并茂但需做到谨慎科学
下一篇:怎样让你的网站令人眼前一亮?

欢迎扫描关注我们的微信公众平台!

欢迎扫描关注我们的微信公众平台!