热门标签 | HotTags
当前位置:  开发笔记 > 小程序 > 正文

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

王M争:一款产品的成功取决于多方面因素之间的相互配合,但其中最重要的因素是优秀的用户体验设计。而在当前这个产品同质化严重的时代,差异化用户体验设计可能更容易赢得用户的青睐。这就意味着我们进

王M争:一款产品的成功取决于多方面因素之间的相互配合,但其中最重要的因素是优秀的用户体验设计。而在当前这个产品同质化严重的时代,差异化用户体验设计可能更容易赢得用户的青睐。这就意味着我们进行设计的时候,要从那些容易被忽视的细节做起。这篇文章中,我将会从视觉反馈、微文案和留白,这些可能会被我们忽略,但却极其重要的设计元素来研究细节是如何影响一款产品的用户体验。

视觉反馈

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

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

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

功能性动画可以让用户及时获知状态的变更。

加载动画向用户展示系统的实时状态,使用户能够快速了解目前发生了什么。

微文案

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

人性化表达

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

安慰

微文案中的报错提示会极大的影响用户对于该产品的友好度,但我们却常常忽视它存在的重要性。

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

系统报错时极易引起用户不适的心情,措辞不当的文案则可能直接让用户抓狂。

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

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

报错提示在做到准确友好的同时,还要告诉用户解决方案。

缓解用户负面情绪

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

留白

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

提升页面可读性

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

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

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

△ Medium通过合理的留白应用提升了文字和图片的可读性

吸引用户注意力

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

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

建立层级关系

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

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

总结

用心做设计,哪怕最小的细节也应该获得我们足够的重视,因为设计是互联互通环环相扣的。



推荐阅读
  • 数字账号安全与数据资产问题的研究及解决方案
    本文研究了数字账号安全与数据资产问题,并提出了解决方案。近期,大量QQ账号被盗事件引起了广泛关注。欺诈者对数字账号的价值认识超过了账号主人,因此他们不断攻击和盗用账号。然而,平台和账号主人对账号安全问题的态度不正确,只有用户自身意识到问题的严重性并采取行动,才能推动平台优先解决这些问题。本文旨在提醒用户关注账号安全,并呼吁平台承担起更多的责任。令牌云团队对此进行了长期深入的研究,并提出了相应的解决方案。 ... [详细]
  • php实现文件下载代码一例,
    php教程|php手册php,实现,文件下载,代码,一例,php,实现,文件下载,代码,一例,我们,需要,用到,header,函数,来,发送,php教程-php手册php实现文件下 ... [详细]
  • 新趋势下的物业管理再思考
    2019年的7-8月,中国消费者协会组织开展了一项住宅小区物业服务调查体验活动,随机选取了全国36个城市的148个住宅小区进行调查。从调查数据来看&#x ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 本文介绍了新款奇骏的两个让人上瘾的功能,分别是智能互联系统和BOSE音响。通过对新款奇骏的配置和功能进行评测,探讨了这两个新增功能的使用体验和优势。此外,还介绍了新款奇骏的其他配置和改进,如增加的座椅和驾驶辅助系统,以及内饰的舒适性提升。对于喜欢音响的消费者来说,BOSE音响的升级也是一个亮点。最后,文章提到了BOSE音响的数字还原能力,以及7座版无法配备BOSE音响的原因。 ... [详细]
  • 生成对抗式网络GAN及其衍生CGAN、DCGAN、WGAN、LSGAN、BEGAN介绍
    一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ... [详细]
  • 本文介绍了一些好用的搜索引擎的替代品,包括网盘搜索工具、百度网盘搜索引擎等。同时还介绍了一些笑话大全、GIF笑话图片、动态图等资源的搜索引擎。此外,还推荐了一些迅雷快传搜索和360云盘资源搜索的网盘搜索引擎。 ... [详细]
  • 本文介绍了如何使用python从列表中删除所有的零,并将结果以列表形式输出,同时提供了示例格式。 ... [详细]
  • 大学生自学复制假饭卡:2个月卖出3千张,获利10万元!背后的神器长啥样?
    山东淄博的一名在校大学生通过自学复制饭卡的技术,2个月内成功卖出3千张假饭卡,获利10万元。他使用了一种特殊的设备来复制饭卡,并通过网店销售给其他学生。该学生已被刑拘。此事被发现是因为学校食堂管理员发现了大量负数的情况,经警方调查后发现是这名学生所为。他制作的假饭卡与真卡几乎一模一样,售价仅为面值的40%。该学生一共复制了三千多张饭卡,并已全部卖完,获利十万余元。 ... [详细]
  • 荣耀V8搭载基于Android 6.0的EMUI 4.1,功能介绍及用户体验
    本文介绍了荣耀V8搭载基于Android 6.0的EMUI 4.1的功能,包括色温调节、护眼模式、智灵键和学生模式等。荣耀V8在色温调节方面提供了多种选择,用户可以根据自己的喜好进行调节。护眼模式能够减少屏幕蓝光辐射,预防眼部疲劳。智灵键位于机身侧面,用户可以自定义其功能,方便快捷操作。学生模式需要密码才能开启或关闭,为家长提供了更好的控制。通过本文,读者可以了解荣耀V8的功能特点及用户体验。 ... [详细]
  • 如何关闭迅雷会员自动续费详细介绍
    友情提示:教程内容为了更好的解决大家的问题,所以电脑教程网的每一篇内容都是图文并茂的在多端设备下呈现给大家。告诉大家的是,文章内里的图片也尤为重要, ... [详细]
  • 支付宝入门手册 给父母的支付宝入门手册怎么样
    支付宝入门手册,给父母的支付宝入门手册怎么样?支付宝在两周前表示:我们正在做专门给父母看的支付宝常用功能操作指南,把字印的大大的,小伙伴们可以拿回家给长辈。现在,支付宝入门手册终于 ... [详细]
  • 哪些行为可以获得淘宝公益时 获得淘宝公益时攻略
    哪些行为可以获得淘宝公益时?淘宝官方宣布今天发布了国内首个公益时标准,去手机淘宝或支付宝,搜索“3小时”,即可查看你积攒了多少公益时。有些哪行为可以获得淘 ... [详细]
  • 支付宝扫描敬业福利攻略指南
    支付宝扫【敬业福】攻略:沾沾卡攻略:把所有的卡都给别人,就留了一张敬业;然后再去沾你想要的敬业福,不过还是有概 ... [详细]
  • 如何运营好一个产品?
    最近,知乎上线了一个“圈子”的新功能,让有共同兴趣爱好的人可以在一个“圈子”里以更轻松的的方式交流和互动。如果是你创建了这样一个“圈子”, ... [详细]
author-avatar
手机用户2502913925
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有