NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

​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:472987
用户头像

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

关注

评论

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

数据库原理及MySQL应用 | 多表查询

TiAmo

MySQL 数据库 12月月更

银斯微与大敦科技签署MOU,推动UI开发工具在中国的落地应用

科技热闻

马斯克都不懂的 GraphQL,API 网关又能对其如何理解?

API7.ai 技术团队

api 网关 graphql APISIX

震惊,WSL2居然可以挂载USB

DisonTangor

WSL2 usb

spring高级源码笔记:深入理解阿里spring源码核心思想及框架应用

钟奕礼

Java 程序员 java面试 java编程

版本更新 | Towify V1.23.1 有哪些实用新功能?汇总来了!

Towify

微信小程序 无代码平台

guitar pro2023下载官方版app

茶色酒

Guitar Pro guitar pro2023

有一说一!项目中引进这玩意,排查日志又快又准

程序员小毕

程序员 面试 微服务 后端 框架

公司刚来的京东架构师:看完我写的spring笔记,甩给了我一份文档

钟奕礼

Java 程序员 Java 面试 java编程

手把手系列:如何将小程序游戏引入自有APP?(iOS篇)

FinClip

如何制作一个实时在线显示评论?

Towify

微信小程序 无代码

介绍四大并发集合类并结合单例模式下的队列来说明线程安全和非安全的场景及补充性能调优问题。

C++后台开发

多线程 并发 后端开发 异步 linux开发

聚焦技术,锐意创新,GaussDB给世界一个更优选择

华为云开发者联盟

数据库 后端 华为云 12 月 PK 榜

如何删除数据并刷新列表

Towify

微信小程序 无代码 触发器

Kerberos 身份验证在 ChunJun 中的落地实践

袋鼠云数栈

数据集成 kerberos 大数据 开源

PreSTU:一个专门为场景文本理解而设计的简单预训练模型

华为云开发者联盟

人工智能 华为云 OCR 12 月 PK 榜

AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

No Silver Bullet

项目实战 AngularJS 12月月更 启动加载

20000节点云数仓在大型商业银行的“实践之路”

酷克数据HashData

金融科技 云数据仓库 数据库·

cdr2023断网离线激活下载教程

茶色酒

cdr2023

如何合并Excel文档

Geek_249eec

C# Excel VB.NET

Kubernetes:Flomesh 服务网格与多集群通信

Flomesh

服务网格 K8s 多集群管理

自研分布式高性能RPC框架及服务注册中心ApiRegistry

车江毅

Java Eureka 注册中心 服务治理 服务中心

直播 | 数据智能大咖在线研讨,带你找到适合自己的企业级方法论!

StarRocks

数据库 物流

FinClip 手把手教学:如何将小程序游戏引入自有APP?(Android篇)

FinClip

openGemini v0.2.0版本正式发布:5大特性全面增强

华为云开发者联盟

数据库 后端 华为云 12 月 PK 榜

骨灰级精品,京东百万架构师亲码的MySQL内部笔记太硬核了

小小怪下士

Java MySQL 程序员

系统的混乱并非业务本身之复杂,我们并不擅长处理『简单』

阿里技术

软件工程 复杂度

Sovit3D引擎快速构建智慧变电站三维可视化系统

2D3D前端可视化开发

物联网 智慧变电站 智能变电站 数字孪生变电站 变电站可视化

什么是制造业数字化转型?制造业数字化转型的核心与意义

优秀

数字化转型 制造业

哪篇论文宣布了 HTAP 数据库的诞生?解读《A Common Database Approach for OLTP and OLAP Using an In-Memory Column DataBase》

StoneDB

MySQL HTAP 数据库· StoneDB 12 月 PK 榜

AngularJS进阶(四十)创建模块、服务

No Silver Bullet

服务 模块 AngularJS 12月月更

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