《众妙之门——网站UI设计之道(修订版)》一第1章 现代网络应用中的用户界面设计1.1 什么是用户界面(UI)?

简介:

本节书摘来自异步社区《众妙之门——网站UI设计之道(修订版)》一书中的第1章,第1.1节,作者【德】Smashing Magazine,更多章节内容可以访问云栖社区“异步社区”公众号查看

第1章 现代网络应用中的用户界面设计

众妙之门——网站UI设计之道(修订版)
Dmitry Fadeyev

什么是用户界面设计?什么是有效的用户界面设计?你打算如何把用户界面设计得更好?这一章,我们就来了解一下现代互联网应用程序中可视用户界面设计的理论演化和技术更新。

1.1 什么是用户界面(UI)?

“在你使用工具完成任务的过程中,你所做的操作以及工具的响应,这些结合起来就构成了界面。”—Jef Raskin

用户在第一次使用一个界面时,仍然能发现某些元素是他们所熟知的。
用户界面设计并不仅仅是考虑如何摆放按钮和菜单,更为重要的是考虑应用程序或设备如何与用户互动;更多时候,还要考虑产品与多个用户之间的互动。这就意味着,用户界面设计不仅要做出好看的产品外观,还要做出好用的产品。这不仅仅是调整一下按钮的位置、给他们选选颜色,而是要为完成一项任务而选择正确的工具。一个特殊的界面,是否需要使用按钮?如果确实需要,那么这些按钮将完成什么样的工作?这个按钮需要如何设计才能让用户了解这个应用程序的工作方式,并且轻松达到用户的目的。

在产品的开发周期中,尽早开始用户界面设计至关重要。正如 Jef Raskin 所说:“对消费者而言,界面就是产品[1]”。用户一直看到和使用的都是用户界面,而不是深藏在应用程序背后的技术体系结构。把界面做好,这将极大地提高用户使用产品时的愉悦感,这也能让其很容易就掌握产品的使用方法。所以,先从界面设计开始,然后再开始应用程序后台引擎的编码,要好于先开始编码,再给它包裹一层界面。

什么因素能成就一个伟大的用户界面?

在我们开始着手设计用户界面之前,首先应该理解什么样的用户界面才是出色的用户界面,我们的设计要具备哪些品质才够得上“出色”。所有伟大的用户界面大都具有下面这8个品质或特点。

1.清晰——通过使用文字、流程图、层级图、图标等元素,避免用户对界面产生困惑。清晰的界面不需要手册,同时还能确保用户在使用的过程中减少犯错。

2.简洁——为了让界面清晰,可以通过在所有元素上添加浮动框说明或者标签这种简单的方法来实现,但这样做会导致界面膨胀臃肿。如果电脑屏幕上同时充斥了太多的东西,找到你想要的东西是非常困难的,用户使用起来就觉得困难乏味。如何让界面同时保持简洁和清晰,这正是设计伟大界面的挑战所在。

3.熟悉——人们总是对之前见过的东西有一种熟悉的感觉,有的界面即使是第一次使用,其中的有些元素我们还是会感觉很熟悉。在设计过程中,使用一些现实生活中公认的意象能够更好地帮助用户理解。例如,文件夹样式的选项卡通常在网站和应用程序中起导航作用,人们很快就能意识到它的导航作用,因为现实生活中,我们也是通过文件夹来分类资料的。

4.响应性——这意味着两件事情。首先,响应必须迅速,一个良好的界面不应该让人感觉反应迟缓。其次,界面应该提醒用户发生了什么事,用户的输入是否成功地处理,让用户了解这些信息反馈。并且明确告诉用户,他的请求已经被成功受理。

5.一致性——在整个应用程序中保持界面一致是非常重要的,这能够让用户识别出使用的模式。一旦用户学会了界面中某个部分的操作,他很快就能知道如何在其他地方或其他特性上进行操作,就好像他们早就知道似的。

6.美学性——尽管你不需要把一个界面做得非常有吸引力,但是有一个好看的界面会让用户工作起来更开心。况且,让用户开心绝对是一件好事。

7.高效性——时间就是金钱,一个伟大的界面应当通过快捷菜单或者良好的设计来帮助用户提高工作效率。毕竟这是科技带给我们的一个最大好处,它允许我们用更少的时间和努力来完成更多的工作。

8.容错性——每个人都会犯错,你的应用程序如何处理用户所犯的错误是对它的总体质量的最好测试。它是否容易撤消操作?是否容易恢复删除的文件?一个好的用户界面不应当因为用户的错误而惩罚用户,而应该总是为用户提供犯错之后的补救方法。

想要设计一个包含所有特性的用户界面非常困难,因为各个特性之间总是相互影响。你在界面中增加的元素越多,用户在使用上所花的努力就越大。当然,反过来亦是如此。没有足够的帮助和支持,用户会茫然不知所措。如何设计既简洁、优雅,又清晰、一致的用户界面,是摆在用户界面设计师面前的最大难题。

相关文章
|
14天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
148 78
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
|
4天前
|
数据处理
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
本篇将带你实现一个评分统计工具,用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果,并统计平均分。这一功能适合用于问卷调查或评分统计的场景。
109 65
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
|
15天前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
122 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
3天前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
75 38
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
|
5天前
|
存储 索引
「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
本篇将带你实现一个随机励志语录生成器应用。用户点击按钮后,界面会随机显示一条预设的励志语录。该应用展示了如何结合数组操作、状态管理和动态更新界面内容的功能,是一个轻量级的互动应用示例。
63 21
「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
|
17天前
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
本篇将带你实现一个升级版的数字猜谜游戏。相比基础版,新增了计分和历史记录功能,用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。
71 31
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
|
12天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
69 19
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
13天前
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
本篇将带你实现一个数字键盘应用,支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。
56 17
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
|
12天前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
37 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
16天前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
100 10
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条