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

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

相关文章
|
2月前
|
机器学习/深度学习 PyTorch TensorFlow
卷积神经网络深度解析:从基础原理到实战应用的完整指南
蒋星熠Jaxonic,深度学习探索者。深耕TensorFlow与PyTorch,分享框架对比、性能优化与实战经验,助力技术进阶。
|
4月前
|
监控 安全 Shell
管道符在渗透测试与网络安全中的全面应用指南
管道符是渗透测试与网络安全中的关键工具,既可用于高效系统管理,也可能被攻击者利用实施命令注入、权限提升、数据外泄等攻击。本文全面解析管道符的基础原理、实战应用与防御策略,涵盖Windows与Linux系统差异、攻击技术示例及检测手段,帮助安全人员掌握其利用方式与防护措施,提升系统安全性。
222 6
|
8月前
|
SQL 分布式计算 Serverless
鹰角网络:EMR Serverless Spark 在《明日方舟》游戏业务的应用
鹰角网络为应对游戏业务高频活动带来的数据潮汐、资源弹性及稳定性需求,采用阿里云 EMR Serverless Spark 替代原有架构。迁移后实现研发效率提升,支持业务快速发展、计算效率提升,增强SLA保障,稳定性提升,降低运维成本,并支撑全球化数据架构部署。
912 56
鹰角网络:EMR Serverless Spark 在《明日方舟》游戏业务的应用
|
7月前
|
人工智能 监控 安全
NTP网络子钟的技术架构与行业应用解析
在数字化与智能化时代,时间同步精度至关重要。西安同步电子科技有限公司专注时间频率领域,以“同步天下”品牌提供可靠解决方案。其明星产品SYN6109型NTP网络子钟基于网络时间协议,实现高精度时间同步,广泛应用于考场、医院、智慧场景等领域。公司坚持技术创新,产品通过权威认证,未来将结合5G、物联网等技术推动行业进步,引领精准时间管理新时代。
|
3月前
|
机器学习/深度学习 人工智能 算法
卷积神经网络深度解析:从基础原理到实战应用的完整指南
蒋星熠Jaxonic带你深入卷积神经网络(CNN)核心技术,从生物启发到数学原理,详解ResNet、注意力机制与模型优化,探索视觉智能的演进之路。
440 11
|
8月前
|
存储 SQL 运维
中国联通网络资源湖仓一体应用实践
本文分享了中国联通技术专家李晓昱在Flink Forward Asia 2024上的演讲,介绍如何借助Flink+Paimon湖仓一体架构解决传统数仓处理百亿级数据的瓶颈。内容涵盖网络资源中心概况、现有挑战、新架构设计及实施效果。新方案实现了数据一致性100%,同步延迟从3小时降至3分钟,存储成本降低50%,为通信行业提供了高效的数据管理范例。未来将深化流式数仓与智能运维融合,推动数字化升级。
412 0
中国联通网络资源湖仓一体应用实践
|
10月前
|
机器学习/深度学习 编解码 自动驾驶
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
431 3
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
|
4月前
|
数据采集 存储 数据可视化
Python网络爬虫在环境保护中的应用:污染源监测数据抓取与分析
在环保领域,数据是决策基础,但分散在多个平台,获取困难。Python网络爬虫技术灵活高效,可自动化抓取空气质量、水质、污染源等数据,实现多平台整合、实时更新、结构化存储与异常预警。本文详解爬虫实战应用,涵盖技术选型、代码实现、反爬策略与数据分析,助力环保数据高效利用。
315 0
|
4月前
|
安全 Linux
利用Libevent在CentOS 7上打造异步网络应用
总结以上步骤,您可以在CentOS 7系统上,使用Libevent有效地构建和运行异步网络应用。通过采取正确的架构和代码设计策略,能保证网络应用的高效性和稳定性。
166 0
|
10月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
693 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章