14个优秀UI设计的金蛋

正如我所讨论的 ,我去过Devoxx 2011上的Joe Nuxoll( @joeracer )的“良好UI设计规则”。在这次演讲中,他给出了14个“金蛋”用于设计用户界面(UI)。
“金蛋”已从乔的幻灯片上写下来-我希望没有大错。 这些评论是我根据他的讲话总结的。 乔的演讲的完整版本即将在Parleys上市

1 –基础数据结构不应定义用户界面
这是Joe在几个Java Posse情节中一直在谈论的话题。 而且很简单:通过查看UI,您应该已经无法看到数据结构。 用户界面应专门定制为易于用户理解和理解。 用户通常不会考虑数据结构–请勿创建它们。

2 –接口不应定义数据结构
有了前一条规则,我们中的一些工程师倾向于走出去,设计视图,并使数据结构看起来完全一样。 这不是应该的样子。 我们所有应用程序中都有一些层,用于从用户界面抽象出数据结构,例如数据库中的数据结构。 因此,我们应该这样做。 将数据结构设计为高效且易于存储。 与用户界面不同。

3 –需要进行技术开发
绝对不要使用HTML 5,因为它是HTML5。不要为了技术而使用任何东西。
考虑用户,考虑他们的期望。 您想给他们什么用户体验? 这将引导您做出技术决策。

4 –以实际用例开始流程
开始设计UI时,请使用实际用例。 不是抽象的,是广义的。 使用用户真正会对应用程序做的事情。 使用实际的示例交互和数据。

5 –确定将使用您的应用的人群的不同类别
确定哪种人会使用您的应用。 将它们分为几类,并给它们起一个真实的名字,例如“ Ben”或“ Anna”。 给他们一个个性-在设计过程中这被称为角色 。 在要讨论的每个用例上附加一个角色。 附带说明:如果您有两个非常不同的角色,请考虑在创建两个UI而不是使一个可配置之间进行权衡。 有时创建两个UI较为便宜。

6 –考虑流程而不考虑要素
对于用户体验,考虑应用程序流程很重要。 表示单击“登录过程”的所有状态更改和转换的过程。 不要考虑登录屏幕。 相似–如果设计设计原型,则使其具有功能。 设计中的步骤与屏幕上的外观一样重要。

7 –经常使用原型。 经常放弃原型
UI设计是在原型中开发的。 创建应用程序用户界面的原型,然后将其丢弃。 如果不扔掉它,那不是原型!

8 –使下一步显而易见
当您在应用程序对话框中时,用户想要执行的下一步应该总是很明显。 不用担心找到登录按钮下一个按钮或创建新用户按钮 ,这就是用户想要做的。

9 –减少感知的事物的数量
要了解这一点,您必须了解我们的大脑在感知用户界面时的工作方式。 总分为三个阶段: 在情感阶段 ,大脑会识别屏幕上的颜色,布局和图像。 它设置了与UI交互的基调。 在解析阶段 ,大脑会找出屏幕上每个元素的目的。 它为用户准备任务。 在执行阶段 ,用户开始与UI的第一个元素进行交互。 屏幕上显示的元素越多,在第二阶段中必须解析的元素就越多。 元素越多,用户就越难理解他应该做什么。 元素越多,用户需要更多的时间来理解UI。

10 –利用肌肉记忆力。 始终如一
我们的大脑是一块肌肉。 可以训练。 它对常见模式做出反应。 因此,请确保您的UI一致使用。 相同的事物应始终看起来相同。 它们应与用户期望的操作系统行为保持一致。

11 –在页面加载之外进行思考。 如果可以就地做事
如果您在网络中,请避免完整的页面加载。 使用AJAX提供的技术将新元素或信息加载到位。 因此,用户不必重新解析所有元素,因为它们暂时消失了。

12 –使用转换更改状态
如果您的应用程序更改了状态,请使用简单的过渡来明确情况。 例如,如果您隐藏某物,则将其淡出,以便用户知道他是否想将其放回哪里。

13 –迭代和优化。 迭代和优化
设计UI的过程是迭代的。 您必须提出很多建议,并准备改变主意。 扩展它们。 添加新设计。 合并它们。 抛弃一些想法,并使用其他想法进行进一步迭代。

14-为您的客户提供丰富的经验。
永远不要破坏用户的体验。 这不限于您应用程序的用户界面。 它包括您的支持内容,您的Twitter提要和您的主页。 一切都应该对用户友好,并为用户提供最佳体验。 最好的客户体验。

参考:来自JCG合作伙伴的 14个优秀UI设计的金蛋   JohannesThönes博客上的JohannesThönes


翻译自: https://www.javacodegeeks.com/2012/02/14-golden-eggs-of-good-ui-design.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值