【ArchSummit架构师峰会】探讨数据与人工智能相互驱动的关系>>> 了解详情
写点什么

​Joshua Porter 谈优秀的 UI 设计原则

  • 2012-08-16
  • 本文字数:2188 字

    阅读完需:约 7 分钟

Joshua Porter 是 HubSpot 公司的 UI 工程师,他在“ Principles of User Interface Design ”一文中总结了若干优秀的 UI 设计原则。

界面清晰最重要

界面清晰是 UI 设计过程的第一步,也是最重要的工作。要想你设计的 UI 被人喜欢,首先必须让用户能够认可它,让用户知道为什么使用它。比如当用户使用时,能够预期发生什么,并方便地与它交互。

界面是为促进交互而存在的

界面的存在,促进了用户和世界之间的互动。优秀的界面不但能够让我们做事有效率,还能够激发、唤起和加强我们与这个世界的联系。

全力维护用户的注意力

我们生活在被打扰的时代,比如阅读的时候,总是会有事物分散我们的注意力。因此,在进行界面设计的时候,能够吸引用户的注意力是很关键的,所以千万不要将应用的周围设计得乱七八糟,谨记屏幕整洁能够吸引注意力的重要性。如果你非要显示广告,那么请在用户阅读完毕之后再显示。​​​

让界面处于用户的掌控之中

人类往往对能够掌控自己和周围的环境感到很舒服心。不考虑用户感受的软件往往会让这种舒适感消失,迫使用户不得不进行额外的交互,这会让用户很不舒服。保证界面处于用户的掌控之中,让用户自己感受系统状态。

直接操作的感觉最好

当能够直接操作物体时,用户的感觉是最棒的,但这并不太容易实现,因为在界面设计时,我们增加的图标往往并不是必需的,比如我们过多的使用按钮、选项等等其他繁琐的东西以便我们最终操纵 UI 元素而不是重要的事情。理想情况下,界面设计要简洁,让用户有一个直接操作的感觉。

每个屏幕只提供一个操作主题

我们设计的每一个画面都应该有单一的主题,这样不仅能够让用户使用到它真正的价值,也使得上手容易,使用起来也更方便,在必要的时候更容易进行修改。如果一个屏幕支持两个或两个以上的主题,立马会让整个界面看起来混乱不堪。正如文章应该有一个单一的主题以及强有力的论点,我们的界面设计也应该如此,这也是界面存在的理由。

过渡自然

界面的交互都是关联的,所以要认真地考虑到下一步的交互是怎样的,并且通过设计将其实现。这就好比我们的日常谈话,要为进一步交谈提供途径。当用户已经完成该做的步骤,不要让他们不知所措,给他们自然而然继续下去的方法,以达成目标。

表里如一

人总是对符合期望的行为最感舒适。当其他人、动物、事物或者软件的行为始终符合我们的期望时,我们会感到与之关系良好。这也是与人打交道的设计应该做到的。在实践中,这意味着用户只要看一眼就可以知道接下来将会有什么的动作发生,如果它看上去像个按钮,那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明,要在更高层次的问题上发挥创造力。

区别对待一致性

如果屏幕元素各自的功能不同,那么它们的外观也理应不同。反之,如果功能相同或相近,那么它们看起来就应该是一样的。为了保持一致性,菜鸟设计师往往对应该加以区分的元素采用相同的视觉处理效果,其实采用不同的视觉效果才是合适的。

强烈的视觉层次感

强烈的视觉层次感是通过屏幕上视觉元素提供的清晰浏览顺序来实现的。也就是说,用户每次都能按照同一个顺序浏览同一些元素。弱化的视觉层次没有给用户提供如何浏览的线索,用户会感到困惑和混乱。在变化巨大的视觉环境中,难以维护强烈的视觉层次,因为视觉权重是相对的:当一切都是粗体时,就显示不出粗体的效果了。​ ​

恰当的组织 UI 能够降低认知难度

正如 John Maeda 在他的书中所说,对屏幕元素的恰当组织能够使页面显得简洁。这能够帮助大家更容易并且更快地理解你的界面。把元素组织起来,通过位置和方向来展示自然的关系。

颜色可以起到提醒的作用,但不是决定性因素

物体的颜色会随着光线的变化而变化。在现实世界中,颜色是一个变化的性质,不应该在界面上起决定性作用。它可以用于提醒,但是不应该是唯一的区别成分。​

渐进展示​

在每个屏幕上只显示必要的内容。如果用户在做选择,那么给他们显示足够的选项信息,然后在各自的页面上展示详情。避免过度解释或者一次显示所有细节。

适当的帮助信息

在理想情况下,帮助信息是不必要的,因为界面能够让用户理解和使用。但现实情况下,很难做到这一点,所以帮助信息应该是上下文相关的,只有在它需要出现的时间和位置才应该出现,在其他位置就应该隐藏在幕后。要求用户打开帮助文档寻找答案是在推卸设计师的责任。

关键时刻:零状态

第一次访问见面是最重要的时刻,但经常被设计者忽视。为了帮助用户适应,最好从零状态开始设计,也就是在一切都没发生的情况下。这种状态不应该是空白界面…应该提供启动的方向和指导。​

现有问题最值得重视

用户总是为已有的问题寻找答案,而不是潜在的问题或者未来的问题。因此,坚持为已知问题创建界面,观察现有行为。

出色的设计是无形的​

出色设计的关键特质是它经常无形的施加于用户上。如果设计是成功的,那么用户可以只关注自己的目的,而不是界面…当他们完成目标之后,不会在依赖于界面。这对设计师来说是困难的,因为设计出色时,没有多少掌声。

依赖其他的设计规则

视觉设计、排版等都是界面设计的一部分。不要看不起这些规则,根据自己的情况来使用这些规则,同时从其他领域,如编程、印刷等领域寻找可以借鉴的经验。

界面是被人使用的

在这么多设计规则中,请记住只有用户使用你设计的界面时,你才是成功的。如果一把椅子很漂亮,但是做起来不舒服,那么设计是失败的。​

更多有关的内容请查看原文,也欢迎读者朋友发表自己对设计方面的意见。

2012-08-16 08:472984
用户头像

发布了 501 篇内容, 共 248.2 次阅读, 收获喜欢 57 次。

关注

评论

发布
暂无评论
发现更多内容

架构师 01 期,大作业一

子文

架构师训练营第2期 第11周命题作业

月下独酌

与前端训练营的日子 --Week10

SamGo

学习

Week1 作业

oooh-la

完美!华为爆出Redis宝典,原来Redis性能可压榨到极致

996小迁

redis 架构 面试 资料

第 11 周 系统架构总结

心在那片海

谁说明天上线,这货压根不知道开发流程!

小傅哥

Java 小傅哥 架构设计 开发流程 开发规范

关于一个梦(自我的死亡)

Yuchen

身心健康 心理 自我

2020年国内前端团队都做了些什么?

徐小夕

大前端 技术栈 2021

消息队列优化(1) -- 鶸的介绍篇

1412

消息队列 workflow srpc 异步调度 并行计算

呃?!!!我彻底忘了这件事😂

Nydia

万字长文聊缓存(上)

Silently9527

Java nginx HTTP

AI人脸识别技术门禁系统解决方案智慧社区建设

13828808769

人脸识别 智慧城市 智慧平安小区平台开发 刷脸

开源整套Netty源码笔记+19个案例调优+游戏项目,终于彻底顿悟了

Java架构追梦

Java 源码 架构 Netty 游戏项目

十一、高可用

Geek_28b526

Week 11 作业

evildracula

消息队列优化(2) -- 几种基本实现

1412

消息队列 workflow srpc 异步调度 并行计算

判断回文数字算法,swift 5初始化详解,时间管理计划落地,swift5 多线程高级用法 John 易筋 ARTS 打卡 Week 33

John(易筋)

ARTS 打卡计划 算法回文数字判断 时间管理计划落地 swift5 初始化详解 swift5多线程高级用法

面试官:数据库自增ID用完了会怎么样?

艾小仙

数据库

架构师训练营第2期 第11周总结

月下独酌

console.log也能插图!!!

德育处主任

CSS html 大前端 Web js

微服务缓存原理与最佳实践

万俊峰Kevin

缓存 缓存穿透 缓存并发 go-zero Go 语言

消息队列优化(3) -- grpc MPMCQueue 简介及各队列性能对比

1412

消息队列 workflow srpc 异步调度 并行计算

UDP连接要不要发起connect

kof11321

网络编程

架构师第一周总结



我画了 40 张图就是为了让你搞懂计算机网络层

cxuan

计算机网络 IP 网络层 ipv6 ipv4

软件架构设计方案实战

Andy

重学JS | 数组知识点大全,必收藏!

梁龙先森

大前端 编程语言

这样规范写代码,同事直呼“666”

xcbeyond

Java 代码规范 规范

江苏民丰 x mPaaS | 县域小银行,技术团队就12人,却找到了数字化转型的秘籍

蚂蚁集团移动开发平台 mPaaS

银行数字化转型 mPaaS

第 11 周 系统架构作业

心在那片海

​Joshua Porter谈优秀的UI设计原则_语言 & 开发_崔康_InfoQ精选文章