gui界面怎么分页_什么是用户界面和体验设计

4d1a25ed2a032ede48a81fedf758277d.png

本文译自 Mikos Philips 的 UI vs UX  —  A Guide to UI Design

因为发现仍然有小伙伴跑来问我比较基础的专业划分问题,所以翻译了这篇科普文。

——

用户界面(UI, User Interface)设计是设计软件产品所涉及到的几个交叉学科之一。不论是用户体验(UX, User Experience)、交互设计(ID, Interaction Design)还是视觉/图形设计(Visual / Graphic Design),都能牵扯到用户界面设计。

什么是用户界面设计?

广泛来讲,用户界面是人与机器交流的媒介。用户向机器发出指令,机器随即开始一段进程,回复信息,并给出反馈。用户可以根据用户反馈进行下一步操作的决策。

人机交互(HCI, Human Computer Interaciton)所关注的主要是数字界面,即过去的打孔机、命令行,直至今天的图形界面(GUI, Graphic Design)。

用户界面设计对于数码产品来说主要关注的是布局、信息结构,以及界面元素在显示屏和各种终端平台上的展示。电子游戏和电视界面也包括其中。

190378b0bd3e2f5d39a23566cb10d4f1.png

1981 年的 Xerox 8010 信息系统(图片来源:DigiBarn ,图片有裁剪

用户界面设计师根据设计原则来创作符合用户需求的设计,而不是单纯地提供技术解决方案。在这过程中往往需要在平衡取舍用户功能需求和展示效果(由品牌定位和视觉设计决定)。

2695776bae534da513382d78907635ba.png

B2B 仪表板用户界面设计

优秀的用户界面设计利用清晰、统一的视觉层次和内容结构来引导用户完成任务,并减少非必要的内容和元素。

出色的用户界面通过真实世界的符号隐喻传达信息——例如按钮、声量滑块、日历、软盘样式的保存图标等。

用户界面的组成元素主要包括:

  • 输入:让用户可以进行选择或输入信息,包括复选框、单选框、下拉框和文本域等交互组件等。
  • 导航:用于选择目的地和筛选信息的组件,包括下拉菜单、滚动条、面包屑、页签和分页等。
  • 信息:向用户提供反馈的交互元素,包括图标、文字、媒体、进度条和提示等。

6a95d10a00389d683b9797d7cfe7335c.png

图片来源:Thrive

高效的设计师会参考优秀设计案例、设计惯例、标准以及可用性原则来确保界面方案符合用户需要。其中最重要的设计原则包括:

  • 统一的界面元素能让用户快速熟悉并掌握使用方式
  • 清晰的元素层级和页面结构能让用户一眼看到最重要的内容
  • 用颜色和字体等样式来向用户暗示元素的优先级以及作用
  • 发送系统状态变更、错误以及用户操作时,提供反馈信息,以便用户了解进程并进行下一步决策
  • 了解用户喜好和需求优先级,让操作过程更顺畅自然
  • 利用留白及合理布局让界面更加清晰易懂

4047c010d8c7876d303c9990226eb20f.png

植物浇水App,图片来源:Tubik

用户界面设计和体验设计的差别

用户界面设计和用户体验设计很容易混淆。虽然二者有重合之处,但是各自有截然不同的技能需求。

用户体验设计注重产品的全局架构和功能,以及用户使用感受。相较于界面设计师来说,体验设计师的工作集中在通过信息架构来组织内容;通过用户调研、任务测试和商业分析进行方案决策。以电子商务的账号创建和下单流程为例,体验设计师使用用户流程、体验地图、低保真线框图和交互原型等方法,并通过用户测试来验证和优化设计理念。

87e2e71425ce56df72f58a439316fef0.png

Apple Watch 原型动画,图片来源:Alex Dovhyi

用户界面设计与体验设计的对比

界面并不是产品的真正解决方案。界面设计通常在体验设计师的工作中占重头戏,但并不是全部。你可以这样理解:如果说用户体验是消耗品的话,那么用户界面就是工具(使用消耗品的工具)。

用户体验设计是包含很多个步骤的设计策略流程,其目标是创造产品具有吸引力、方便使用、易于理解的产品。通过用户体验设计这个流程,我们可以获得正确的用户界面解决方案。

f6ac04ef6d8892d9c6cf302df2c5710e.png

用户体验(UX)与用户体验(UI),图片来源:Shane Rounce

用户界面设计师做什么?

用户界面设计师在用户体验设计师提供的线框图的基础上,创造更加接近最终形式的产品界面方案。他们需要遵循体验线框图所表达的信息层级和优先级,并将合理统一的视觉和交互规则运用于整个产品。

4229988e23cb00ee8549fe63b113289e.png

电商界面概念设计,图片来源:Remco Bakker

用户界面设计师的职责范围包括视觉层级、构图、间距、对其、标题和文字的视觉比重、组件使用规则(按钮、表单等)以及配色规范和Logo。

由于现如今用户界面越来越多的涉及到动态交互及过渡,而不限于简单的静态页面,界面设计师也会需要与动效和交互设计师合作,并优化用户体验设计师所提供的基本交互理念。

用户界面设计也包含数据可视化和信息设计的工作,这些能通过简单的信息展示帮助用户快速理解复杂的数据。

92291f353d64601fb440442469988252.png

珠宝电商概念设计,图片来源:Tubik

用户界面设计师提供最终的页面高保真原型给程序开发人员。上文提到用户界面设计有时与用户体验设计有重合之处,其实它也可以涉及到前端开发,尤其可能参与建立前端组件库、和页面模板。

为了提高用户体验优化效率,我们的工作方式正在变得越来越成熟。因为当今世界的数字化进程,用户界面设计扮演的角色愈发重要。在接下来的数十年里,用户界面设计将突破二维屏幕,朝着3D和VR(虚拟现实)、AR(增强现实)和MR(混合现实)的方向演化。

无论技术、屏幕、场所和环境如何,界面设计的关注点都会坚持聚焦于人机交互与体验的高效性。

8ec96e214188fbbaa107851d08e543dc.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/343583.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

詹金斯搭建_与詹金斯一起连续交付Heroku

詹金斯搭建如果您安装了Jenkins Git插件,那么利用Jenkins并针对Heroku的连续交付管道的设置就非常简单。 通过此管道,对特定Git分支的更改将导致Heroku部署。 为了使此部署过程正常运行,您应该至少使用两个Git分支,因为您希望有一…

工业交换机品牌选择时注意的事项介绍

杭州飞畅科技有限公司是一家致力于光纤传输设备、数据通信设备及网络接入设备为主的集研发、生产、销售和服务为一体的高新技术企业,公司自成立以来就开始研发生产安防通信产品,采用高稳定性的通信技术制造安防产品,使得安防产品的稳定性极高…

使用Spring Boot和MongoDB构建一个反应式应用程序

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证。 如果您要处理大量流数据,反应式应用程序可让您更好地扩展。 它们是非阻塞…

zune自搭虚拟服务器离线升级,Zune 30g 固件更新至 3.3 记录

换成64位Win7后Zune的桌面管理器木有了,而64位版的Zune 1.3桌面安装麻烦死个人,各大论坛的115下载连接无一例外的都断链了,无奈只好把Zune升级至最新的3.3。升级记录:1. 在Zune官网 http://www.zune.net/zh-CH 下载最新版的桌面管…

工业交换机芯片选择需要注意什么事项呢?

相信不少工业级交换机品牌,在其工业交换机机内的芯片选择上一定很慎重,因为工业交换价的芯片将影响到其以后的使用,工业交换机常用的芯片有Marvell和Broadcom平台。那么,工业交换机芯片选择要注意什么呢?接下来就由飞畅…

JAX-RS和OpenAPI对Hypermedia API的支持:任重而道远

或早或晚,大多数积极使用REST(ful) Web服务和API的开发人员都偶然发现了这种真正的外星事物,即HATEOAS : 超文本作为应用程序状态的引擎 。 对HATEOAS是什么以及它与REST的关系的好奇最终将导致发现Richardson成熟度模…

工业以太网交换机的光口和电口有什么区别?

对于从事安防传输设备行业的朋友们来说,相信大家对工业以太网交换机应该都不陌生。客户购买工业以太网交换机时,很多客户都会要几光几电的交换机,最近也接到不少客户的电话,都会询问工业以太网交换机的电口和光口有什么区别&#…

家用、商用、工业交换机的用途与区别

以太网交换机一般分为:商用(以太网)交换机、工业(以太网)交换机、家用(以太网)交换机。那么,家用交换机,商业交换机,工业交换机之间有什么区别呢?接下来我们就跟随飞畅科技的小编一起来详细了解下吧! 商用…

将Spring Boot应用程序部署到Tomcat中

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证。 部署应用程序很困难。 通常,您需要控制台访问服务器,从服务器…

HD-SDI光端机是什么?其性能特点和技术参数有哪些?

HD-SDI光端机是将SDI信号与光信号互相转换的设备。SDI光端机的原理是发送端将SDI信号通过激光器调制后变为光信号,接收端将激光二极管收到的数据再编码为SDI信号。那么,HD-SDI光端机是什么呢?其性能特点和技术参数有哪些呢?接下来我们就跟随飞…

HD-SDI光端机有哪些优势?

3G-SDI光端机适合电视行业的高清可靠、高清性能的标准,杭州飞畅的3G-SDI光端机采用最新科技,采用H.264编码方式,采用高清SDI专用VIDIO SFP光模块,一般情况下采用SDI接口。其产品最早为广电行业客户开发使用,应用于电视…

PDH-SDH光端机指示灯具体含义介绍

最近有很多客户朋友来咨询有关PDH/SDH光端机各个指示灯含义的问题,其实在很多故障发生的时候我们都可以通过光端机各个指示灯的状态来分析故障问题,从而帮助解决问题。接下来我们就来为大家详细介绍一下PDH/SDH光端机指示灯的具体含义,感兴趣…

PDH光端机的主要作用以及特点有哪些?

在之前小编为大家介绍了光端机的详细分类,相信很多看过的朋友对pdh光端机这一块不陌生了吧,但是对于pdh光端机的作用以及特点你还了解吗,今天,飞畅科技的小编就来为大家详细介绍下pdh光端机的作用以及特点,感兴趣的朋友…

python将html存为pdf_用Python将HTML转为PDF。

上期提到了如何获取公众号文章信息,这回就说下怎么将网页转为PDF,方便日常学习。html而后扩散一下以前一个比赛的结果(华章计算机抖音大赛)。数据库顺便谈谈本身对从此送书的一个想法。微信另外以前的送书活动,有中奖的读者没有联系我&#x…

使用Gradle – 2019版从Travis可靠发布到Maven Central

得益于在2018年和2019年末实现的显式登台存储库创建功能集,使您(自动)从Travis(不仅是)发布到Maven Central更加可靠。 背景 如果您仅想获取信息,如何使您的工件从Travis发布更可靠,请前进到另…

spring admin mysql_easyadmin: 简易的java后台管理框架,基于SpringBoot+FreeMark+ace admin+mysql...

easyadmin数据库一定要用utf8mb4编码,记得先执行manager.sql,再执行initdata.sql,其中tenant表不用管,这是我打算做的另外一个项目设计的表,因为直接复制的本项目,怕到时候忘记,所以没有删除拦截器相关文档…

SDI高清视频光端机特点有哪些?

SDI视频光端机设计和生产是适用于电视行业的高可靠、高性能的串行数字光传输设备,信号格式从19.4Mbps到1.485Gbps, 系统支持SMPTE292、SMPTE259M、SMPTE297M、SMPTE305M、SMPTE310M以及DVB-ASI(EN50083-9)等数字电视格式的信号,满足工业级产品的要求。那么&#xff…

SDI光端机是什么?SDI光端机产品介绍及监控方案!

SDI光端机就是光信号传输的中端设备。光纤价格的降低使它在各个领域得到很好的应用,因此各个光端机的厂家就好比是雨后春笋般发展起来。但是这里的厂家大部分技术并不是完全成熟,开发新技术需要耗资和人力、物力等,这就产生厂家多是中小企业&…

adf可以自定义溶剂吗_ADF Faces。 立即的自定义客户端事件

adf可以自定义溶剂吗在本文中,我将重点介绍ADF Faces Javascript API方法以从客户端触发自定义事件。 例如: function cliListener(actionEvent) {AdfCustomEvent.queue(actionEvent.getSource(), "servListener",null, true);}我们可以使用a…

VGA光端机技术原理及应用领域介绍

VGA光端机采用纯数字传输模式,能从根本上克服普通铜芯电缆传输系统在传输高频带信号时造成的拖尾、重影等现象,清晰的重现图象画面。VGA光端机传输的是光信号,没有电磁辐射,系统具有极高的保密性。同时VGA光端机把显示设备和信号源…