简洁明了的优秀UI设计原则(4)

简介: 简洁明了的优秀UI设计原则(4)

#31 视觉必须体现层次

没有样式的内容,用户无法区分层次,也无法决定阅读顺序。右图那样一路看下来已经算好的了——多数用户碰到这种排版可是会直接走人的!

image.png

#32 分组相似的内容

常识。

image.png

△ 【左】菜单:打开 保存 建立副本 删除。工作区控制:放大 缩小。

【右】菜单:保存 缩小。工作区控制:放大 建立副本。 散在外边:打开 删除…… (这个有点搞笑了)


#33 表单内直接验证,替代传统的提交后返回错误

AJAX时代的新常识。不要忘记就可以。

当然也需要注意:传统的验证方法仍然要作为保底方案设计出来。绝对禁止因为前台有了AJAX后台就不验证。

image.png

△ 【左】好的表单 - 直接显示“这个选项是必填的”

【右】不那么完美的表单 - 提交后才显示缺少部分项


#34 宽容各种格式的用户输入!

在不引起二义性的前提下,程序员有责任尽可能多的接受各种格式的用户输入。例如信用卡号码、电话号码等数据,就应当自动接受并过滤括号、空格、减号、句点、逗号这些合理的分隔符。

宽进严出是程序设计的一个重要原则。对用户的输入要尽可能的宽容,但对数据的显示和输出(包括对用户输入数据的回显)必须格式严格。这个原则也同样适用于Web程序设计。

image.png

△ 几个电话号码中包含了空格、括号、减号、加号

【左】完美的表单 - 统统接受

【右】差强人意的表单 - 只接受带空格的

(不错了……国内多少表单连空格都不让加……程序员的懒惰、无知和自大气死人!)


#35 强调紧迫性

明日复明日,明日何其多。我生待明日,万事成蹉跎。不给用户设定时间期限,用户就永远没有行动的动力。该催促就催促。

用户都害怕失去机会,这是个应当合理利用的心理。只是不要欺骗用户——用户发现得了。

image.png

△ 【左】还有2天结束 —— 立刻行动

【右】总之行动吧,时间不要紧,今天、明天,反正拖到最后就不做了


#36 强调稀缺性

用户往往认为稀缺的东西更有价值,在面对稀缺资源时也更害怕错过。

用户都害怕失去机会,这是个应当合理利用的心理。只是必须再次强调:不要欺骗用户——用户发现得了。

image.png

△ 【左】最好的网络课程 - 仅余 2 席。 【右】最好的网络课程。


#37 给用户提示,不要让用户凭空回忆

做过调查问卷的都知道,右图那样一个<textarea>要求用户反馈的问题,如果是可选问题那么几乎没人写,如果是必填问题那么所有人都对付。

给用户一些提示去选择,明显比让用户自己从0开始回忆更友善。

image.png

△ 【左】请告诉我们您最喜欢的电影 - 这里是最近您看过的一些影片,供您选择。

【右】请告诉我们您最喜欢的电影 - 努力回忆一下吧!你能想起来的!加油!


#38 可点击元素做大点儿

小不点的按钮和导航条文字,那已经是上世纪90年代的网页样式了。

尤其是现在的移动时代,小按钮在手机上几乎没法点。请千万做大一点。

image.png


#39 页面加载做快点儿

几秒钟加载不出来,用户就流失百分之多少,这都是老生常谈的调查结论了。

请合理选择机房,并正确使用CDN、缓存等手段。生产环境的网站很大程度上都忌讳所有内容往主服务器上一堆完事。

image.png


#40 提供必要的快捷键

例如GMail使用j和k切换上一封/下一封邮件。对开发者群体会尤其受欢迎。

image.png


相关文章
|
11月前
|
小程序 开发者 UED
支付宝小程序UI/UX设计原则与最佳实践
支付宝小程序UI/UX设计原则与最佳实践
457 6
|
UED 开发者 Java
触摸未来:Vaadin UI设计原则如何引领你打造触动人心的数字体验
【8月更文挑战第31天】Vaadin UI设计原则致力于提升Web应用的用户体验,其核心理念包括简洁性、一致性、直观性和可访问性。通过简化界面、统一设计风格、增强直观操作及优化无障碍访问,开发者能构建出高效且吸引人的应用。本文详细介绍每个原则,并提供实用的Java代码示例,帮助开发者在Vaadin平台上实现卓越的用户体验,提升用户满意度与应用成功率。
160 0
|
小程序 UED 开发者
揭秘支付宝小程序成功之道:UI/UX设计原则与用户体验优化秘籍大公开!
【8月更文挑战第27天】支付宝小程序在移动互联网中扮演着重要角色,优秀的UI/UX设计能显著提升用户满意度。本文首先强调了设计的一致性、简洁性、易用性和响应性原则,确保用户获得顺畅体验。接着,介绍了最佳实践,包括利用支付宝设计组件库保持界面统一、优化加载速度、适应多设备显示、设置清晰导航以及重视用户反馈。最后,提供了一个简单示例展示如何应用支付宝设计组件。遵循这些指导原则,开发者能够构建既美观又实用的小程序。
449 0
|
数据可视化 UED
移动应用的UI/UX设计原则与实践
【7月更文挑战第2天】移动应用UI/UX设计聚焦简约、一致性与用户中心原则。关键在于理解用户需求,创建清晰的视觉层次,实现响应式布局。UX关注反馈速度、情感连接及无障碍访问。通过用户调研、原型测试和持续迭代,提升满意度和产品竞争力。
|
编解码 Android开发 UED
安卓UI/UX设计原则:打造引人入胜的用户体验
【4月更文挑战第13天】本文探讨了安卓UI/UX设计的关键原则,包括一致性、简洁性、反馈、清晰性、效率和适应性。一致性要求视觉和行为保持一致,利用系统UI;简洁性减少用户行动,简化导航;反馈需即时且明确;清晰性强调表达清晰,布局有序;效率关注性能优化和任务简化;适应性涉及多设备适配和用户多样性。遵循这些原则,可创建出色应用,提供无缝用户体验。设计应持续迭代,适应技术发展和用户需求。
444 6
|
存储 XML 编译器
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
324 3
|
数据可视化 大数据 人机交互
袋鼠云数栈UI5.0体验升级背后的故事:可用性原则与交互升级
最近,我们袋鼠云的UED部⻔小伙伴们,不声不响地⼲了⼀件⼤事——升级了全新设计语言「数栈UI5.0」!数栈UI5.0结合经典的尼尔森十大可用性原则,秉承给客户带来更加好用的功能和体验的目标,进行了重大提升,快点进文章看看,数栈UI5.0都做了什么什么吧!
268 0
|
存储
简洁明了的优秀UI设计原则(3)
简洁明了的优秀UI设计原则(3)
271 0
简洁明了的优秀UI设计原则(3)
|
前端开发
前端也要学习基本的UI设计原则与实践套路
有的人可能说,我是技术研发人员,UI的事情我们团队内会有别的人去操心这个,我只管技术即可。 在一天之前,我也是这么觉得的,但是我前些日子听了字节的《给开发看的UI设计》这节课后,觉得一个前端工程师也是要具备一定的UI设计能力的。 依赖市面上的组件库已经不能让产品维持在好用的状态了,还需要将一些设计元素添加进去,才能让我们开发的作品,达到一个更好的层次,给与用户最好的体验。 你的团队可能没有UI同学,也可能有UI同学,但是不一定专业,他们经常会是外包人员,UI给出的设计稿通常只是静态文件,是某一交互切面的,很多的交互细节都体现不出来,在大厂中,许多的B端产品是没有专职UI角色的,前端可能要
|
4月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
144 15

热门文章

最新文章