Skip to content

UI

元信息

  • 目标:建立界面形态的分类框架——按渲染方式(TUI/GUI/NUI)与交互方式(命令行/窗口/可穿戴)理解界面演化,定位 Web 界面"窗口容器 + 文本模式渲染"的混血特性,展望 Gen UI 的生成方式变革
  • 关键概念:TUI、GUI、NUI、命令行界面、窗口界面、可穿戴界面、Gen UI
  • 关联阶段:cp4
  • 常见误区:以为 GUI 只是 TUI 的简单升级(渲染单元从字符到像素,带来的是像素级绘制与标准控件两套体系);以为 Web 界面就是纯 GUI(页面在窗口容器中运行,但主要基于文本模式渲染,canvas 才补上像素级绘制);以为 NUI 全面优于 GUI(自然交互亲和但精确性低,"一个点击能解决的事不必啰嗦",混合交互常是更优解)

用户界面

用户界面指用户与应用或人机之间进行交互的一组媒介元素和行为模式。

  • 按渲染方式: 文本用户界面(TUI)、图形用户界面(GUI)、自然用户界面(NUI)
  • 按交互方式: 命令行界面(CLI)、窗口界面(windows)、可穿戴界面(wearable)

文本用户界面 TUI

文本用户界面,最小渲染单位为文本字符(asiic或unicode),继承自传统的印刷系统

  • 最小图形单元是字符,字符的形状由不同的字体库决定
  • 屏幕被划分为若干行列,譬如标准的终端窗口:80*40个字符
  • 优点是简单易用:字符相当于预制好的组件,拿来即用
  • 缺点则是精度不足:同样受限于字符与字体,不能随心所欲的在屏幕上绘制任何形状和布局

有爱好者使用文本字符进行各种图形的设计,称之ascii的艺术,

图形用户界面 GUI

图形界面,最小渲染单位为像素, 典型代表是windows、mac等窗口系统,允许应用程序以像素为单位在屏幕上绘制各种图形,其特点是

  • 提供了基于像素的绘制能力及API,允许高度定制,虽然较难
  • 提供了一组标准的窗口控件及API,解决了基本界面元素的绘制问题
    • 著名的C++ MFC类库、java swt库等
  • 提供了桌面模式,允许各控件以像素级精度对齐。所以窗口软件又称桌面软件
  • 窗口操作系统提供了标准的文本输出模式(字库),兼容于TUI

自然用户界面 NUI

自然用户界面 ,是以语音、手势、触控、行为等人类自然交流方式实现人机交互的无形界面系统,其核心特征在于无需依赖字符、窗口等标准式化界面元素

  • 语音:语音对话
  • 体感:眼动、手势、动作、触觉、温度等
  • 行为:连续的动作、全息的环境等

命令行界面

古老的交互形式,基于键盘(字符级)输入设备和文本输出模式,采用命令式操作模式

  • 程序的执行由一行接一行的命令行组成,命令 + 参数 + 文件 = 动词 + 名词
  • 闪烁的光标代表着当前输入(或焦点)的位置
  • ctrl-c、ctrl-z、ctrl-p ctrl-n等快捷键
  • 管道符、重定向等数据处理流

窗口界面

GUI诞生后的交互形式,基于鼠标(像素级)输入设备和标准化窗口输出模式,采用面向对象的操作模式

  • 程序由多个窗口组成;窗口具有统一外观(方方正正),由标题栏、菜单栏、状态栏等标准组件所组成;右上角是基本菜单(最大化、最小化、关闭)、左上角是应用自定义菜单
  • 打开或关闭一个程序,即对应于打开或关闭一个主窗口;切换主窗口即等同于在不同程序进程之间进行切换,切换到前台的窗口(焦点窗口)即当前进程,可接收用户输入
  • 先选择,后操作,文件 + 配置 + 操作 = 名词 + 动词
  • 左键单击选择,左键双击执行,右键单击上下文菜单

可穿戴界面

NUI和AI时代的新型交互形式,基于可穿戴输入设备和多模态输出模式,采用

  • 更加符合人类自然行为的输入输出形式,如语音、手势、行为、XR等。初级的例子是移动设备的触摸和拍照等新输入模式,大大降低了电子设备的使用难度;高级的例子则是AI眼镜、AI耳机等
  • 另一种观点是混合交互模式:NUI的人类亲和性 + GUI的高效性

一个点击就能解决的事情,为什么要啰嗦了?关于汽车上是否要保留实体按键?关于有了强大的AI是否还需要人类的判断?这不仅是一个关于UI的设计问题,也是一个人类社会如何运转的复杂问题。

Web界面与应用

Web诞生于TUI界面(终端下的浏览器),成熟于GUI界面,当前是一种桌面软件,融合了两种界面的特性:

  • 页面在窗口容器中运行,但主要基于文本模式进行渲染
  • 将各种二进制格式进行标准化和语义化,如mathML、SVG等
  • 支持嵌入图片、视频等像素级的图形资源
  • HTML5中引入画布(canvas)元素,允许通过javascript脚本在画布元素中绘制像素级图形图像
  • 在未来,web同样将支持NUI,如https://webvr.info/

Web界面与应用的特点

Web生来具有的开放和跨平台的特征,使其在交互形式有着超载普通窗口应用的特性:

  • 链接跳转;链接收藏;链接分享
  • 上一步;下一步;刷新;

Web界面的本质是:打破了桌面软件的孤岛,将信息世界完全联结起来,是人-机体验与机-机互通这两者之间的平衡

界面发展的时间线

  • 命令行界面:几乎与现代计算机同时出现
  • Windows界面:兴起于90年代,基于GUI,适用于桌面
  • Web界面:随互联网而兴起,基于文档
  • 移动设备界面:随移动智能终端而兴起,特色是手势
  • 自然界面: 随着AI而兴起,如自然语言对话、自动图形图像识别等

这里的用户指的是普通用户;专业用户还可以通过其它界面,如WEB API(应用程序接口)等方式与WEB应用进行信息交换

Gen UI

UI的生成方式:指如何开发或生成UI,传统采用的是程序员驱动与静态开发。未来的演进趋势:

  • 程序员驱动 -> 用户驱动
  • 编码实现 -> 语义描述
  • 设计时静态编译 - > 运行时动态生成
  • 一应用一界面 -> 多应用一界面
  • 多用户一界面 -> 一用户一界面
  • 模板 -> 组件 -> 语义
    • 是不是类似于html标记的设计初衷和前端技术的发展路线?

参考 https://claudecode.io/zh/blog/imagine-with-claude