设计2026 年 10 月 24 日

字符的形状,终端的秩序:ASCII 艺术与 TUI 设计调研

从打字机艺术、BBS 与 Amiga 字标,到日本 AA、台湾 ANSI 和现代 terminal 应用,研究字符如何承载图像、品牌与交互,为 NBTCA Prompt 寻找设计灵感。
打开终端,想知道下一节课在哪里上、社团下一场活动什么时候开始,我们能给用户多少信息,又能留下多少个性?
这个问题贯穿 NBTCA Prompt 的设计。它需要容纳课程、校历、活动、考试、成绩和知识库,也需要在不同终端、窗口尺寸与网络条件下保持可用。一个字符占据多少空间,一条分隔线放在哪里,选中项怎样出现,都在影响使用体验。
研究 ASCII 艺术,可以让我们看到字符造型的广度;研究优秀的 terminal 应用,则能看到这些材料如何组成可操作的界面。两者放在一起,才容易把欣赏转化为设计能力。
本文依据艺术家的作品与回忆、历史档案、技术规范、研究论文和项目官方文档展开。案例按历史影响、造型方法、交互清晰度以及与 Prompt 的关联选取,覆盖欧美 scene、日本 AA、台湾 BBS 等不同传统。应用比较以公开界面、官方演示和文档为依据,文中没有进行跨产品性能排名。
资料查阅截至 2026 年 10 月 24 日。历史事实、画面观察与针对 Prompt 的设计建议会分别交代。文章中的界面草图和课程、日期、地点均为虚构示例。

阅读导航

一、先理解我们使用的材料

ASCII、ANSI 和 TUI 分别指什么

ASCII 是字符编码标准。严格讨论造型时,通常使用从空格到波浪号的 95 个可打印字符。换行负责组织文本行,控制字符不属于这组可打印造型材料。
在这套材料里,斜线可以成为屋顶,括号可以成为弧线,字母可以成为眼睛,也可以只是某种密度的纹理。字符原有的语言含义与它的视觉形状,可以同时参与作品。
ANSI art 是艺术社群形成的名称。传统 PC BBS 作品经常把 CP437 等字符资源与颜色、光标控制结合起来。这里需要区分两件事:字符编码决定字节如何对应字符,控制序列决定终端如何设置属性、移动光标等。ECMA-48 是理解后一层的重要规范。给一段 UTF-8 中文文字加上颜色,也可以使用这类控制序列。
TUI 是 Text User Interface,即文本用户界面。它描述交互方式,范围比字符画更广。一个只使用普通文字和反显选中行的文件选择器,同样可以是完整的 TUI。
为了准确讨论设计,我们可以把终端画面拆成四层:
层次需要回答的问题对应的设计决策
字符资源有哪些字符可以使用?ASCII、中文、线框、块元素、Braille
字体与网格字符怎样占据一个单元?字宽、行高、笔画粗细、连接方式
显示控制可以改变哪些显示属性?颜色、反显、光标位置、局部刷新
交互与语义用户怎样理解和操作?焦点、选择、搜索、帮助、状态反馈
这四层相互关联。字体换了,字标的斜线可能断开;颜色关了,选中项仍需要可辨认;窗口变窄了,信息顺序也要作出取舍。

几种值得分别研究的传统

传统常见的视觉语言适合研究的问题
手绘 ASCII轮廓线、标点、字母、小型具象形象少量字符怎样建立识别
PC BBS ANSI块字符、明暗字符、前景与背景色有限色板与界面整体性
Amiga scene ASCII连贯斜线、字标、纵向作品集字形、负空间与社群品牌
日本 AA日文字符、表情、角色、特定字体姿态、情绪与字体依赖
台湾 BBS ANSI几何块形、大色面、中文构图东亚字符环境中的画面组织
PETSCII、Teletext各自显示系统中的图形单元重复模块与有限资源配色
现代 Unicode TUI线框、比例条、点阵、字符图表数据表达与显示能力适配
这些分类既有技术背景,也有社群习惯。Anders Carlsson 的研究 Beyond Encoding 对这种交叉关系有专门讨论。本文沿用常见名称,同时在需要时说明作品的材料与显示条件。
还有一种容易混淆的情况:现代终端可以通过 Kitty graphics、Sixel、iTerm2 等协议显示真正的图像。它们与字符拼出的图形属于不同的显示路径。Yazi 的图像预览文档 列出了相关能力与适配方式。看到漂亮的 terminal 截图时,可以先确认其中哪些内容由字符组成。

二、历史告诉我们,限制怎样成为风格

打字机艺术:字符可以先成为形状

字符构图早于计算机。1893 年的 Pitman’s Typewriter Manual 包含装饰性字符图案;Flora Stacey 在 1898 年制作的蝴蝶,是经常被讨论的早期打字机艺术案例。Barrie Tullett 著作的图文介绍 和 Heikki Lotvonen 的研究 都展示了这些材料。
这里最有价值的观察,是字符可以脱离句子的顺序,转而参与轮廓、对称与密度的组织。我们可以先看见一只蝴蝶,再靠近辨认组成它的字符。
打字机还允许叠打、重新定位纸张等操作。了解这些条件,可以解释为什么某些作品像连续的素描,也能提醒我们:把打字机作品搬到固定网格中,通常需要重新设计。
对 Prompt 而言,这条传统提供了一种观看方法。设计小插画时,先判断用户能否认出形象,再考虑它用了多少种字符、技术上有多复杂。

Bell Labs:字符也可以成为明暗单元

Ken Knowlton 与 Leon Harmon 在 Bell Labs 的图像实验,展示了另一条路线:用大量符号形成远看连续的图像。Knowlton 在 Portrait of the Artist as a Young Scientist 中回忆了相关实验与 Harmon–Knowlton 作品的制作、传播。MoMA 1968 年的展览资料 则列出了 Studies in Perception 系列。
这类作品适合放在计算机字符图像与马赛克的历史中理解。它们涉及特定的符号、输出设备与图像处理过程,不能仅凭外观就断定使用了今天所说的 ASCII 字符画方法。
它带来的设计启发很明确:单个字符既可以贡献形状,也可以贡献明度。 同样的一块区域,可以用稀疏标点保留轻盈感,也可以用密集字形形成重量。

Rogue 与早期屏幕界面:字符开始承担空间语义

Rogue 的共同创作者 Glenn Wichman 在 A Brief History of Rogue 中讲述,能够把字符放到屏幕指定位置的 curses,为他们构思屏幕上的地下城提供了条件。
这一步对 TUI 很关键。信息有了稳定位置,字符之间也有了空间关系。门、墙、道路与角色可以同时存在,用户不必每次重新阅读一段完整的环境描述。
NetHack 3.6 的 Guidebook 保留了字符界面的示意,以及地图、顶部消息和底部状态的解释。这里引用的是历史版本文档。
我们可以把它看成一堂符号设计课:一个字符可以承载多少含义,取决于它是否出现在稳定的位置、是否遵守一致的规则,以及用户能否查到解释。Prompt 中代表课程、活动、冲突和未知状态的标记,也需要这样的语义基础。

三个字符也能改变阅读

1982 年 9 月 19 日,Scott Fahlman 在讨论串中提出用 :-) 标记玩笑。CMU 保存了原始讨论与恢复经过。
这件事适合用来理解微型字符设计。一个符号未必需要描绘复杂对象,它也可以给整句话增加语气。对界面而言,一个稳定的选中标记、一个容易理解的提示符,也可能比一幅细密插画更直接地影响阅读。

BBS 与 scene:品牌、作品和使用场景一起生长

BBS 的欢迎画面、菜单、文件信息和社群字标,为字符艺术提供了持续的使用环境。艺术家围绕这些场景制作作品,作品又通过 artpack 等形式传播。ACiD、iCE、SAC 等团体的历史,可以从 scene.org 保存的 1998 年历史文章、SAC 自身档案 以及 Sixteen Colors 的作品包中继续追踪。
研究这段历史时,值得把一组材料连起来看:大幅欢迎画面怎样介绍社群,菜单怎样延续相同气质,极短的字标怎样在文件列表中保持识别。
这与社团工具很接近。NBTCA 的品牌会出现在开屏、页眉、活动详情和文档里。统一感可以来自一套重复使用的笔画、间距、色板和小型符号。

三、细看作品:从欣赏转向造型判断

下面的评论以图版本身为观察对象。推荐打开原作,先看整体,再放大看字符。作品在不同字体、字号和显示系统中的外观可能变化,截图可以保留当时的展示效果。

Joan Stark:抓住形象最少需要哪些特征

Joan G. Stark 常用 jgs 署名。她的原站存档 保留了动物、人物、节庆与生活物件等分类,也说明了作品使用方式。可以先从动物分类 选择体量较小的作品观察。
左侧是 Joan Stark 于 1998 年制作的旋转木马,右侧是 Stylez 于 1995 年制作的透视字标。
左侧是 Joan Stark 于 1998 年制作的旋转木马,右侧是 Stylez 于 1995 年制作的透视字标。
图版来自 Carlsson 的 Beyond Encoding,作者与日期按其中署名保留。
旋转木马的识别来自几种线索的协作:马的外轮廓、头部方向、腿部姿态,以及贯穿画面的立柱。即使不能逐个辨认字符,也能读出对象与姿态。
我们可以从中提炼一个适合小插画的练习:先列出对象的三个关键特征,给每个特征安排必要的字符,再决定要不要补纹理。画猫时,耳朵、眼睛和坐姿可能已经足够;画课表空状态时,一本合上的书也许只需要一个可辨认的轮廓。
对 Prompt 来说,适合探索的小插画场景包括空日程、没有搜索结果、导出成功和初次使用。它们需要与说明文字共同工作。用户应该先读懂当前情况,再感受到形象带来的温度。

Stylez 与 h7:让空白成为字形的一部分

上图右侧的 Stylez 字标把字母拉进透视关系。笔画、字间连接与大块内部空白共同建立体积,黑底也参与了形状的构成。
Amiga ASCII 的字体条件尤其值得注意。Topaz 等字体让斜线和相邻笔画形成特有的连接效果。Lotvonen 的 Amiga ASCII art 同时讨论了字形、社群与作品集形式,并展示了芬兰艺术家 Antti “h7” Kiuru 的 Jungle Fever。
h7 于 2015 年制作的 Jungle Fever 标题图版,以斜线字标、细长竖线和大面积留白组织阅读节奏。
h7 于 2015 年制作的 Jungle Fever 标题图版,以斜线字标、细长竖线和大面积留白组织阅读节奏。
图版与署名来源:Lotvonen 的研究。
这张图值得从三个尺度看。拉远看,大字标决定视觉重心;正常阅读时,标题与短句之间的留白形成节奏;靠近看,细长的竖线和小型形象又把不同段落串起来。
对 Prompt 的品牌探索,可以从一个 3 至 5 行的字标开始。先确定一种笔画逻辑,再画紧凑和展开版本。这样,开屏上的完整作品与页眉中的小字标就可能保留相同的家族特征。
这也是理解负空间的好机会。字标的内部空洞、字间间隙和外部留白,都需要有意识地安排。压窄一个字标时,仅仅删去空格,可能会让字母粘成无法辨认的团块。

Roy/SAC:小画布上的可读性是一门具体技术

SAC 字标图集 收录了用于 NFO 与 FILE_ID.DIZ 的作品。可以把它们与 Roy 自选作品 对照,观察不同宽度下的笔画、字距和重量。
Roy 在 Width Restrictions & Challenges 中讨论了宽度限制与压缩。他还提醒创作者,在艺术字标附近保留普通文字名称,方便读者识别。
这个建议很适合 Prompt。艺术字标可以建立气质,普通文字中的 NBTCA 和应用名则承担直接识别。新用户、搜索引擎、日志阅读者和辅助技术,对同一画面的读取方式并不相同。
练习时,可以给自己两个画布:24 列和 48 列。分别设计同一个词,记录哪些笔画必须保留、哪些连接可以重做。最后再比较它们是否像同一家族,而不只比较大小。

ACiD、iCE 与 Blocktronics:有限色板怎样支撑复杂画面

打开 ACiD 100 的作品包,可以同时看到字标、图像和不同类型的文件。继续浏览 Blocktronics 档案,则能看到众多艺术家在相近材料条件下发展出的差异。
其中一个适合细读的案例,是 ungenannt 的 ungenannt_1453.ans,收录于 2016 年的 blocktronics_blocktober。原作是长卷,建议在档案站完整滚动观看。
画面主要围绕红、黑、灰、白组织人物和建筑。不同场景中的明暗大面反复出现,把局部复杂度连接成整体。观察时,可以暂时忽略人物细节,只记录沿纵向出现了哪些明亮区域、深色区域和强烈红色区域。
对 Prompt 的启发在于色板纪律。活动专题、欢迎画面或 About 页可以容纳较强的艺术表达,但一套有限色板和清楚的重心,会让画面更容易保持整体性。普通数据页中的状态色还承担实际含义,需要预留区分空间。

日本 AA:姿态与表情建立亲近感

日本 AA 使用的字符资源和字体条件,与西方常见的纯 ASCII 作品不同。Carlsson 的研究展示了包括 Illiorzilli 在 2013 年制作的机器人在内的案例,并讨论了 MS PGothic 等字体的影响。日本 AA 图版与背景。
对我们最有帮助的观察,是形象如何通过极少量位置变化表达情绪。眼睛的间距、嘴的位置、身体的倾斜,都会改变一个角色的语气。这种能力适合用于简短反馈与小型插画。
移植时,需要保留对显示条件的判断。浏览器中依赖特定字体排好的 AA,在另一种等宽终端字体中可能失去原有比例。对 Prompt 而言,可以学习表情与姿态,再用自身可控制的字符和网格重新设计。

台湾 PTT ANSI:中文和大色面可以共同构图

上方是 jacky90527 的 PTT 登录画面,下方是 else 于 2013 年制作的人物群像,展示几何块形与中文构图。
上方是 jacky90527 的 PTT 登录画面,下方是 else 于 2013 年制作的人物群像,展示几何块形与中文构图。
图版、署名与下方作品日期来源:Beyond Encoding。其中未明确标注上方登录画面的创作日期。
登录画面的椰树、落日和中文短句共同建立了观看顺序。树的剪影提供稳定轮廓,水平色面拉开天空与水面,文字则出现在相对容易阅读的位置。下方群像依靠明确的块形边界,让多个角色同时存在。
这条传统与 Prompt 的中文使用环境有直接关联。我们可以研究中文标题、日期与图形重心怎样相互让位,也可以比较同一幅画面里,哪些区域需要细节,哪些区域适合保留平整色面。
实际实现仍需要考虑当前 Unicode 终端中的字符与字宽。历史作品的视觉方法可以保留,具体字节和字符映射需要按目标环境重新验证。

Raquel Meyers:从一套视觉零件发展出完整风格

Raquel Meyers 的项目档案 涵盖 PETSCII、Teletext 与展演。图版选用其 2015 年的 PETSCII 作品。
Raquel Meyers 于 2015 年制作的 PETSCII 作品,以白、浅蓝和棕色几何单元形成对称结构。
Raquel Meyers 于 2015 年制作的 PETSCII 作品,以白、浅蓝和棕色几何单元形成对称结构。
图版与日期来源:Beyond Encoding。更多 Teletext 案例可见 Teletext Art 的艺术家页面。
这里的风格来自重复使用的形状、方向与颜色。阶梯、斜线和小块面像一组视觉零件,在规则内重新组合,就能形成明显的统一感。
Prompt 也可以建立这样的小型素材系统:少量分隔符、装饰角、活动徽记和空状态形象。每增加一个素材,都检查它与已有素材的笔画、密度和留白是否一致。数量可以慢慢增长,规则应当先变得清楚。

FIGlet:快速研究字符排字的尺度

FIGlet 把普通文字排成大字,官方页面提供了不同字体的示例。它很适合探索字高、笔画重量、字间关系和外轮廓。
可以让同一个词依次使用五种字体,再把它们缩小观看。某些字体在大尺寸下细节丰富,缩小后却可能失去识别;某些字体比较朴素,在狭窄窗口中仍然清楚。
对固定应用名而言,FIGlet 可以留在设计阶段。选定所需字标后,把文本资源随应用发布,通常就能保留效果。是否需要运行时生成,取决于产品是否真的允许用户输入任意标题。

Simon Jansen:字符艺术还有时间维度

Star Wars ASCIIMATION 是 Simon Jansen 自 1997 年开始的项目。它展示了角色姿态、镜头切换和字幕如何在字符画面中协作。
观看时,可以专门记录三个时刻:新场景何时变得可辨认,字幕停留多久,以及动作需要多少次变化才能读懂。这会帮助我们理解动画的可读节奏。
对 Prompt 的动效设计,值得探索的是很短的状态过渡:点阵徽记形成、任务完成、加载结束。每个动画都应当有完整的静止结果,并允许用户迅速继续操作。动画占据的时间和输出量,也应当进入设计评估。

四、字符艺术的几项基本功

把轮廓造型与明暗造型分别练习

轮廓式造型关心字符的形状与对象线条是否接近。明暗式造型关心字符在一块区域中贡献了多少视觉密度。Structure-based ASCII Art 是 SIGGRAPH 2010 的研究,讨论了轮廓结构的近似方法,并与已有的明暗式生成方法比较。
对小尺寸图标和字标,可以先寻找关键轮廓。对较大画布中的图像,可以进一步研究密度与层次。两种能力可以结合,但练习时分开,更容易发现问题出在哪里。
下面是本文编写的字符笔触试验。它们只用于比较材料,不是既有艺术作品的摘录:
Horizontal    ________    --------    ........
Vertical      | | | |     : : : :     ! ! ! !
Diagonal      ////////   \\\\\\\\    /\/\/\/\
Arc           (    )      /----\      .----.
Mass          ######      @@@@@@      MMMMMM
Texture       .,:;.,:;    +*+*+*+*    xoxoxoxo
同一组字符需要在实际字体中比较。一个字体里的 M 很重,另一个字体里的 @ 可能有更大内部空洞。常见的密度序列只能用作试验起点,不能代替实际观察。

字符单元的宽高比例会改变图像

终端字符单元通常不能直接当作正方形像素。相同数量的列与行,未必形成视觉上的正方形。把一张照片直接按字符数量等比缩小,可能会得到过高或过扁的形象。
因此,画圆、人物和徽记时,应当在目标终端里观察比例。保存文本只能保存字符与位置,无法固定用户选择的字体、字距和行高。必要时,作品需要为小、中、大尺寸分别重画,而不只是机械缩放。
这也解释了为什么一个漂亮的字符 Logo 应当同时有展示条件:大致需要多少列、多少行,使用哪类字符,在哪些字体下看过效果。对产品来说,这些条件最终会转化为资产选择与布局规则。

Braille 提供更细的点位,也带来自己的纹理

Unicode Braille Patterns 提供 2 列、4 行的八个点位。一个终端单元因而可以承载更细的空间分布。常见的点阵图形和小型趋势图会使用这组字符。
但点位数量增加,并不保证小图一定更容易辨认。点与点之间有空隙,字体会影响点的形状和重量,缩小后也可能出现散碎感。它适合哪些轮廓,需要与块字符和普通线条一起比较。
对 Prompt 的徽记,可以同时画轮廓线版、块面版和 Braille 版。对课表数据,则要先问:我们需要表达的是准确位置、忙闲分布,还是连续趋势?材料应服务于这个问题。

空白决定了信息怎样成组

字符界面的空白有两个作用。一个作用是形成图像内部的形状,另一个作用是帮助用户把内容归为一组。
例如,课程标题、时间和教室放在连续的几行里,用户会把它们读成一个对象;下一条课程之前留出少量间隔,就能建立对象边界。边框与分隔线可以进一步强化关系,但它们本身也占据空间和注意力。
画界面时,可以先只用缩进和空行分组,再评估哪些边界需要画出来。每条新增线都应该帮助读者理解关系。

颜色需要有稳定的分工

颜色可以表达品牌、焦点、类别和状态。这几种含义同时出现时,需要先决定优先级。
对 Prompt,可以把正文的基本可读性、当前焦点和数据状态作为独立问题考虑。品牌蓝青色适合形成识别,但“当前选中”“即将开始”“数据过期”还应通过文字、位置或符号表达各自含义。
检查单色输出时,要实际运行关闭颜色后的版本。把截图转成灰度,只能帮助观察明暗层级。NO_COLOR 约定的是抑制默认添加的 ANSI 颜色,其他样式、字符与交互能力还需要分别处理。

每个符号都需要可解释的语义

下面是为讨论编写的一组示例标记:
##  has a scheduled item
..  no scheduled item
??  data not loaded
!!  conflicting items
>   current selection
这组标记的价值在于区分状态。尤其要保留未知状态:没有安排、尚未加载、刷新失败和缓存可读,会导致不同的用户判断。
Prompt 面向中文用户时,实际图例应当使用自然中文。图形可以帮助扫读,说明文字负责消除歧义。随着用户熟悉,解释可以收敛到需要时出现的位置。

五、从十二组 terminal 应用中学习交互

艺术作品适合研究造型,应用界面还需要回答焦点、状态、反馈和下一步操作的问题。下表提供一个便于选择的入口,后文展开与 Prompt 最相关的做法。
应用或传统优先观察的内容对 Prompt 的关联
Rogue、NetHack空间位置与符号语义时间网格、课程与状态标记
Midnight Commander双栏、菜单和功能键列表与详情、操作可见性
htop对齐、排序、单色界面考试与成绩等结构化列表
btop字符图表与数值并置周分布、比例与趋势
fzf查询、结果与预览文档、课程和活动搜索
Helix模式、picker 与按键提示快捷键的逐步发现
Lazygit焦点面板与上下文操作列表、详情和可用动作
Yazi浏览、异步任务与预览文档导航、缓存与刷新反馈
K9s持续可见的范围与筛选学期、周次和当前数据范围
GlowMarkdown 阅读与分页Docs 的阅读排版
Gum、Huh输入、选择、确认与表单登录、设置和导出流程
Harlequin数据目录、编辑和结果区密集数据与区域放大

Midnight Commander:操作可以直接出现在界面里

Midnight Commander 的官方页面 介绍了双栏文件管理、查看、编辑等功能,并提供截图。
Midnight Commander 官方截图,展示双栏文件列表、打开的 File 菜单和底部功能键提示。
Midnight Commander 官方截图,展示双栏文件列表、打开的 File 菜单和底部功能键提示。
截图来源:Midnight Commander。
这张图可以同时观察两种提示。底部功能键持续占据固定位置,菜单则把更多动作与对应快捷键放在一起。用户可以通过浏览逐渐学会操作。
它给 Prompt 的启发是让少量当前操作保持可见。活动列表、搜索输入和登录表单,各自需要的操作不同。底栏可以随上下文改变,而完整帮助仍有稳定入口。
双栏也值得有条件地借鉴。列表与详情同时出现,有助于保持对象关系;窗口过窄时,独立详情页可能更清楚。采用哪种布局,需要比较实际内容能否读完整。

htop 与 btop:图形承担概览,数值承担精确阅读

htop 的官方截图集 同时展示了单色、不同主题、树形结构和图表。它适合研究对齐、排序和较高信息密度下的阅读。
btop 官方截图,以固定区域显示 CPU、内存、磁盘、网络和进程信息,图形与精确数值并列。
btop 官方截图,以固定区域显示 CPU、内存、磁盘、网络和进程信息,图形与精确数值并列。
截图来源:btop 官方仓库。仓库还说明了图形符号、颜色模式和字体要求。
在这张截图里,比例条和图形帮助快速找到大致状态,旁边的数值与单位支持精确判断。它们承担不同的阅读任务。
对 Prompt,适合比较的图形包括一周课程分布、近期活动分布和年度活跃度。使用图形前,需要定义单位与尺度。同样宽的一格代表一天、一周还是一节课,应当容易查到;没有加载的格子也要与零值区分。

fzf:搜索过程可以持续给人方向感

fzf 的官方文档 与预览窗口说明 展示了输入驱动过滤、当前候选项与可配置预览。
研究它时,可以沿着一条连续的阅读路径观察:输入查询,看到候选变化,识别当前项,再判断预览是否与当前项对应。查询、结果和预览之间保持关系,搜索过程就容易理解。
Prompt 的文档与课程搜索可以借鉴这种组织方式。在进入搜索后,用户应当知道当前查什么、筛选了什么、还剩多少项。若宽屏加入预览,选中项变化时也应明确处理正在加载、已加载和不可用的状态。
搜索退出后的定位同样重要。回到原列表时,如果之前的选择和上下文仍然容易找到,用户会更愿意把搜索当成日常导航的一部分。

Helix:让快捷键随着任务逐步出现

Helix 的键位文档 区分了模式、minor modes、picker 和 prompt。它提供了一种研究按键发现的入口:用户当前处于什么状态,接下来有哪些有效输入。
我们可以把 Prompt 的快捷键分为三类:始终可用的导航键,当前页面的操作,以及输入或确认过程中的操作。每种提示都应该出现在相应语境中。
例如,浏览活动时重点提示打开和搜索;编辑查询时突出输入、提交与取消;导出前则突出目标和确认。完整帮助可以保持完整,日常提示则服务于眼前的任务。

Lazygit:焦点决定了操作对象

Lazygit 的官方仓库与演示 展示了文件、diff、提交等区域之间的交互。它适合研究多面板中的焦点与动作对象。
对 Prompt 的课程与成绩界面,至少有三种状态需要容易区分:当前键盘焦点在哪个区域,列表选中了哪一项,以及哪些状态只是信息提醒。把它们都涂成相同颜色,容易增加判断负担。
因此,分栏设计需要先建立焦点规则。用户移动时,应该能预期选中对象和详情怎样变化;执行动作前,也应该知道动作作用于哪个对象。

Yazi:等待过程也有可设计的状态

Yazi 的官方说明 强调异步 I/O、任务管理与预览,操作入口可以从 Quick Start 继续查看。
对 Prompt 最有价值的启发,是把内容可读与后台刷新分别表达。缓存已存在时,用户可以先阅读;刷新过程需要一个清楚的状态;刷新失败后,也要让人知道当前看到的是什么。
预览同样如此。正在加载的区域应当保留稳定位置,旧内容是否继续显示也需要明确规则。这样,等待不会不断改变画面结构。

K9s:让范围始终容易确认

K9s 的官方预览 包含资源列表、日志与不同视图。研究这类应用时,可以留意运行上下文、当前对象范围和筛选条件分别放在哪里。
Prompt 对应的上下文包括学期、教学周、日期范围和筛选条件。成绩列表如果切换了学期,界面上应有稳定可见的依据;活动列表如果只显示未来安排,也应让人能读到当前范围。
上下文持续可见,可以减少用户在记忆中保留条件的负担。空间不足时,可以压缩名称或提供展开入口,但仍要保留足够的定位信息。

Glow:阅读需要自己的空间安排

Glow 提供 Markdown 阅读、文本宽度、样式与分页等能力。它适合研究 Docs 页面中标题、段落、代码块和导航提示之间的关系。
阅读一篇长文时,用户需要持续知道内容结构与当前位置。正文宽度、段间距和代码块的处理,会直接影响阅读节奏。代码中的长行还需要保留语义和复制能力,单纯截断可能让示例失去用途。
Prompt 可以为文档列表、搜索结果和正文阅读分别评估布局。它们属于不同任务,适合呈现的信息密度也可能不同。

Gum 与 Huh:把输入过程作为完整体验设计

Gum 与 Huh 提供选择、输入、确认与表单等交互。这里更值得借鉴的是状态组织:空值怎样提示,当前输入怎样显示,错误怎样说明,完成后留下什么结果。
Prompt 的登录、学期选择和日历导出,都可以沿这些状态逐个检查。出现错误时,应当保留用户仍能继续使用的上下文;操作完成后,应当能读到发生了什么,以及接下来可以做什么。

Harlequin:密集数据需要按任务分配空间

Harlequin 的官方介绍区分 Data Catalog、Query Editor 和 Results Viewer,也提供放大主要区域的能力。
这类界面提醒我们,数据量增加后,可以让用户在概览与局部阅读之间切换。考试和成绩列表适合扫读,完整课程名称、时间说明和原始成绩信息则可能需要更多空间。
对 Prompt 的借鉴应当围绕具体阅读任务:概览页保留哪些字段,选中后展开哪些字段,窄屏下怎样读到完整信息。评估重点是用户能否取得所需数据,并理解各区域的关系。

六、这些研究怎样用于 Prompt

先看现有基础

本节依据 Prompt 的代码快照 ca3110f。固定快照便于后续对照,避免把未来变化与本次观察混在一起。
Prompt 现有活动页,使用蓝青色强调、顶部标签、近期安排列表和底部操作提示。
Prompt 现有活动页,使用蓝青色强调、顶部标签、近期安排列表和底部操作提示。
截图来源:Prompt 仓库中的活动页截图。截图展示的是仓库保存的界面与示例活动,不代表本文发布时的实时安排。
当前实现已有值得延续的基础:蓝青色品牌色、Braille 点阵 Logo、多尺寸 Logo 选择、图标的 ASCII 替代、随窗口变化压缩的导航,以及一周分布与进度表达。对应实现可以查看 theme、logo、chrome 与 Home。
一个具体的兼容观察是:该快照中,ASCII 图标模式下的 Logo 读取 ascii-logo.txt,但文件内容 仍然使用 Braille。这个例子说明,资产名称、设置名称与实际字符能力需要一起检查。

品牌可以形成三个尺度

从 Amiga 字标、SAC 与小画布作品中,我们可以提出一个设计假设:完整徽记、紧凑字标和最小 wordmark 共享笔画或轮廓特征,会比彼此无关的几张资产更容易形成识别。
完整徽记适合有足够空间的展示;紧凑字标适合首页或 About;最小 wordmark 适合持续出现的页眉。终端空间不足时,可以按尺度选择,而不是裁掉作品的一部分。
这并不要求马上增加很多资产。先做三个相互关联的版本,再在实际终端中比较识别、空间占用和显示条件,就能检验这个方向。

首页先回答时间与下一步

对一个校园工具,首页可以优先尝试回答:下一节课是什么、接下来有什么社团活动、当前数据是否可用。下面是一张内容草图,全部数据均为虚构示例。
nbtca   [首页]   课表   活动   文档   设置
────────────────────────────────────────────────────────

今天 · 第 7 周                         缓存于 09:42

下一节课
→ 10:20  数据结构                       还有 18 分钟
         教学楼 A203                    2 节

本周          一   二   三   四   五   六   日
课程          ##   ##   ..   ##   ##   ..   ..
活动          ..   ..   ??   ..   ##   ..   ..
              ## 有安排   .. 无安排   ?? 尚未加载

下一场活动
  10-30 19:00   Weekly meeting

────────────────────────────────────────────────────────
1–5 切换   / 搜索   Enter 查看   ? 帮助
草图中,文字给出精确时间和地点,简短网格提供一周概览,缓存时间说明数据状态。它提出的是信息层级,具体按键与布局仍需通过原型验证。
如果窗口变窄,可以让概览压缩为纵向条目,同时保留课程、时间与状态的关系:
nbtca · 首页

下一节课
10:20 数据结构
A203 · 2 节 · 还有 18 分钟

本周
一 ##  二 ##  三 ..
四 ##  五 ##  六 ..  日 ..

活动数据尚未加载

? 帮助
同样的信息在不同尺寸下,可以改变排列方式。需要比较的是用户是否仍能迅速找到课程,以及是否会把未知读成没有活动。

搜索需要保留查询、结果与对象关系

从 fzf、Yazi 与 Lazygit 可以提出第二个假设:当查询、当前项和详情关系稳定时,用户会更容易理解搜索过程。
下面仍是虚构示例:
文档 / 搜索
> git
找到 12 项                         范围:全部文档

→ Git 入门                         Git 入门
  提交约定                         从版本记录开始……
  协作流程

↑↓ 选择   Enter 打开   Esc 返回   ? 帮助
宽屏中可以评估并列预览;窄屏中可以保留结果列表,把完整内容放到独立阅读页。两种形式都需要处理选中项、滚动位置和返回路径。

数据图形优先说明单位与状态

课表、活动分布和热力图都很适合字符表达,但它们需要明确的尺度。一个格子代表什么,深浅代表次数还是时长,当前周如何定位,都应当能回答。
对年度活动图,活动次数与参与人数也是不同维度。数据源没有提供的人数,不应由视觉密度暗示出来。对于尚未加载的月份,可以提供独立状态,让用户理解覆盖范围。
这里可以吸收 btop 的方法:图形提供概览,文字保留精确值。选中某一天时,再显示日期、数量和对应活动,就能把概览连接到具体内容。

用小型插画补足具体状态

可以先选择四种状态做同一风格的试验:
状态插画适合传达的感觉必须保留的说明
今天没有课程轻松、留白当前日期与查询范围
没有搜索结果等待、寻找当前查询与可调整条件
离线但缓存可读稳定、继续阅读缓存时间与刷新结果
日历导出成功完成、确认文件位置与后续操作
每幅图的体量可以很小。先检查它是否与文案一致、是否挤占主要信息,再比较风格。对错误状态,用户需要的恢复路径应当持续清楚。

三种值得制作原型的方向

研究可以先收敛为三个能比较的视觉方向:
方向核心做法验证重点
清晰的信息排版借鉴 fzf、Glow 的文字层级与定位首次阅读能否找到下一步
有辨识度的社团品牌借鉴 Amiga、SAC 的小字标与负空间品牌是否清楚、空间是否合适
可扫读的时间分布借鉴字符图表的概览与精确值协作是否更容易理解一周安排
比较时,应使用相同课程、活动、窗口尺寸与任务。这样才能知道,差异来自视觉选择,还是来自内容条件不同。

七、把显示条件与性能纳入设计判断

中文混排需要按实际显示宽度处理

JavaScript 的字符串长度、Unicode 码点数量、用户感知的字符数量与终端显示列数,分别回答不同问题。它们不能在排版中随意互换。
Unicode East Asian Width 提供字符宽度属性背景,也明确说明现代 terminal 需要针对具体情况调整。对中文、组合字符、emoji、变体选择符与某些符号,最终仍需要观察目标终端的行为。
对设计原型,应特别检查包含中文课程名、英文缩写、数字、标点和长文件路径的组合。截断后的文字是否仍可理解,焦点标记是否还在正确位置,都直接影响可用性。

兼容能力应分别表达

颜色、Unicode 图形、特殊字体和动画是不同维度。用户关掉颜色后,可能仍能使用 Unicode;选择 ASCII 图标后,中文正文也未必需要改变。功能名应说明它控制的是图形符号、颜色,还是其他行为。
同样,NO_COLOR、减少动效、TERM=dumb、非交互输出与真正的纯文本模式,应当分别有清楚的含义。设计上可以把它们映射到具体能力,再按能力选择素材和布局。
xterm 的控制序列文档 也提醒我们,终端能力包含许多可选项。产品应以已经验证的能力作出选择。

动画和刷新会产生实际成本

ASCII 文件很小,并不意味着任何动效都没有成本。大量帧、反复清屏和整屏重绘,会增加输出量,也可能影响远程连接中的观感。
因此,原型比较可以记录首次可操作时间、切换响应、动画输出量和空闲时刷新频率。对静态内容,按必要变化刷新;对固定字标,优先保存需要的文本资源。引入生成器或框架前,应先确定产品需要它提供什么能力。
本文对这些成本提出检查方法,没有给出未经测量的性能结论。后续实现应记录实际环境和测量方式,让结果可复现。

文本界面同样需要考虑辅助使用

字符画的逐字朗读、反复更新的全屏输出、只靠颜色区分的状态,都可能增加使用难度。NetHack 的历史 Guidebook 甚至包含针对盲人玩家的配置章节,值得作为不同使用方式的观察入口。
对 Prompt,可以让普通文本中的应用名、状态和结果保持可读,为艺术展示提供跳过或关闭方式,并继续保留适合脚本和一次性查询的输出。具体支持程度需要在实际工具中验证。

八、怎样判断设计是否产生了收益

用具体任务比较原型

审美偏好可以帮助选方向,实际任务则能检查设计是否有效。可以先让第一次接触原型的人完成这些任务:
  1. 找到下一节课的开始时间和教室。
  2. 找到下一场社团活动,并判断是否已经结束。
  3. 搜索一篇文档,打开后再返回之前的位置。
  4. 解释当前显示的是刚刷新的数据、缓存,还是尚未加载的内容。
  5. 在没有颜色时,指出当前选中项与一条错误提示。
记录完成时间、误操作与误解发生的位置。若要设定时间目标,应把它当作团队自行提出的验收目标,并与真实观察一起调整。

让同一原型经历不同显示条件

建议至少比较正常内容、空结果、加载中、刷新失败但有缓存,以及长中文标题等状态。再把这些内容放进不同窗口和显示能力中。
比较条件主要观察
80×24 与 120×36信息顺序、空间分配与完整详情
更窄或更矮的窗口换行、截断与必要操作提示
深色与浅色背景正文、弱化文字和焦点的可读性
关闭颜色状态与选择能否继续区分
ASCII 图形模式图形资源是否真正使用兼容字符
减少动效静止结果与首次可操作时间
中文与英文混排对齐、截断与焦点位置
远程终端与网络失败输出量、刷新节奏与数据状态
实现后,应检查生产构建产物。开发服务器中的资源路径、字体和刷新行为,未必代表发布后的结果。npm 包体积、启动耗时和运行时依赖,也应与改动前的实际基线比较。

把待验证的判断保留下来

这份研究提出的几个方向,可以转成明确的设计假设:
  • 三档共享特征的品牌资产,能在不同窗口中保持识别。
  • 当前语境中的少量操作提示,能帮助新用户找到下一步。
  • 图形与精确值并置,能帮助用户同时理解时间概览与具体安排。
  • 未知与空值使用不同标记,能减少对数据完整性的误解。
  • 小型插画能增加亲和力,同时保留主要任务的阅读空间。
它们还需要通过原型和实际使用检查。保存失败案例与观测条件,会让下一轮设计更有依据。

九、把调研变成可以持续练习的能力

第一轮:只研究轮廓和空白

选一幅 jgs 小作品和一幅 Amiga 字标,各记录三个最关键的识别特征。随后自己画一个 16×8 的物件,再把它压缩到更小尺寸,观察识别在哪里开始丢失。
重点是判断关键特征。可以暂时不用颜色,也不使用图片自动转换。

第二轮:建立一个小型字符家族

为 NBTCA 设计三种 3 至 5 行的字标,选出一种笔画逻辑,再画两个关联尺寸。用两种真实 terminal 字体查看,并在单色下比较。
接着为同一风格增加一个分隔符和一个空状态形象。检查这些素材是否共享密度、转角和留白。

第三轮:拆解一次完整交互

观看 fzf、Helix 或 Lazygit 的官方示例,选一段任务,记录开始、选择、执行与返回时的画面。每个时刻都写下:当前对象是什么、焦点在哪里、下一步怎样操作、结果怎样确认。
再把这套观察用于 Prompt 的文档搜索或学期选择。这样,借鉴会落到可讨论的状态,而不仅是配色与边框。

第四轮:用同一份内容比较三种方向

选定一组虚构课程与活动,在相同尺寸中分别尝试清晰排版、社团字标和时间概览。每种方向都保留同样的主要任务。
让首次接触的人完成上一节的任务,记录收益与问题。保留有效元素,再制作组合原型。

推荐继续阅读的三条路径

历史与文化可以从 Amiga ASCII art、Beyond Encoding 和 SAC 档案 开始。它们帮助我们把字体、作品和社群放回同一个场景。
造型与工具可以从 Structure-based ASCII Art、Roy 的宽度教程、FIGlet 和 Moebius 开始。Chafa 则提供观察图像到终端图形转换的另一个入口。
交互与实现可以从 fzf 文档、Helix 键位、Glow、btop 和 Unicode East Asian Width 开始。阅读时带着 Prompt 中的一项具体任务,更容易判断哪些经验适合我们。

十、第一次落地:字标、空状态与一周概览

沿着前面的判断,Prompt 的第一轮实现选择了三个范围较小、能够直接比较的改动。代码位于 ASCII 与数据状态优化 PR,以下说明对应实现快照。这部分记录提案中的行为与验证结果,发布状态以 PR 为准。

让 ASCII 模式拥有真正的 ASCII 字标

原有 Braille 徽记适合表现轮廓与层次。ASCII 模式则需要另一份符合字符能力的资产。本轮用三行、最宽 32 列的手绘字标作为紧凑版本:
|\  |   __   _____   __     /\
| \ |  |__)    |    /      /__\
|  \|  |__)    |    \__   /    \
它用竖线、斜线与下划线组成 NBTCA。B 的两个弧部交给括号,C 留出右侧开口,A 用斜线形成顶点与横梁。三行字标的识别依赖这些转折和空白,因此应在真实 terminal 字体中继续比较,尤其观察 B 与 C 是否容易辨认。
Logo 的选择同时考虑宽度和高度。支持 Unicode 且空间充足时,界面仍可选择已有的多档 Braille 徽记;空间缩小后尝试这份紧凑字标,再缩小则显示普通 NBTCA 文字。说明语与版本号也纳入行数预算,并按可用宽度换行。连最小版本都放不下时,启动展示会跳过。
这次落地主要验证了显示能力与布局选择,尚未完成前面提出的三档统一品牌家族。Braille 徽记与 ASCII 字标之间的造型关联,仍然值得继续设计。

空状态先留下说明,再决定是否增加插画

活动页和文档搜索分别加入一枚日历和放大镜。它们由三个文本行构成,使用较弱的色阶,状态文字保持完整。插画需要至少 40 列宽度,也需要在预留菜单、返回操作和其他状态说明后,仍然有三行空间。文字太长、窗口太窄或高度不足时,界面回到纯文字说明。
Prompt 活动页的日历插画、无近期安排说明与浏览菜单
Prompt 活动页的日历插画、无近期安排说明与浏览菜单
图版 8。80×24 的活动页示例。画面由该实现快照的生产构建渲染函数生成,再把 ANSI 文本转换为浏览器图版;示例状态没有近期活动。它用于比较内容位置,具体字形和颜色仍会随终端配置变化。
这个取舍借鉴了小型 ASCII 作品使用轮廓建立识别的方法,也吸收了 terminal 应用对行动路径的重视。插画与说明并列之后,用户依然可以浏览活动、修改查询或返回。宽屏中的亲和力需要通过实际使用观察;能否保住说明和操作,则可以直接验证。
在 20×12 的文档搜索示例中,插画会隐藏,查询、零结果说明和返回操作仍然显示。高度预算也作用于宽而矮的窗口,避免只看列数就增加装饰。

用三个状态取代含糊的疏密暗示

原有周概览使用不同纹理表示工作日与周末,活动数据尚未到达时则留空。对于只记录“当天是否有安排”的布尔数据,“较满”和“较空”会让人联想到实际并不存在的数量或时长。
本轮把格子的意义收敛到数据能够支持的范围:▓▓ 表示有安排,·· 表示无安排,?? 表示活动数据尚未加载。ASCII 模式分别使用 ##、.. 与 ??。无安排的工作日和周末采用同一标记;活动数据到达后,未知标记会被真实的有无状态替换。
Prompt 首页用问号标记尚未加载的活动数据,图例解释有安排、无安排和尚未加载
Prompt 首页用问号标记尚未加载的活动数据,图例解释有安排、无安排和尚未加载
图版 9。80×24 的首页示例,生成方式与图版 8 相同。课程、地点与日期均为虚构数据;课程概览已知,活动数据尚未加载。问号表达数据覆盖状态,不能据此判断该周没有活动。
这个改动来自调研中反复出现的一项经验:图形概览与精确语义需要一起出现。格子承担快速扫视,图例交代含义,页面中的加载或失败文字补充原因。即使用户不能从色彩分辨状态,也可以通过字符和文字理解它们。

验证覆盖显示与包体积,使用收益继续观察

实现的检查覆盖了 ASCII 字符范围、完整字标与元信息的宽高约束、短窗口中的文字与操作保留,以及未知活动数据到达后的状态变化。生产构建生成的界面在 80×24 与 20×12 两种尺寸下做了前后比较。完整检查通过 1,065 项测试、CLI 契约检查和安装后的 npm 包验证。
打包比较使用同一版本的 npm pack --dry-run,基线是本文前面引用的 ca3110f 快照。压缩包从 128,251 字节变为 128,577 字节,增加 326 字节;解包内容从 528,891 字节变为 530,236 字节。没有增加运行时依赖。这些数字描述当前构建的体积,不代表启动耗时或交互速度的改善。
自动检查能够确认尺寸和数据状态,也能发现装饰挤占操作的回归。字标是否更容易识别、插画是否帮助理解、未知标记是否减少误读,还需要把前文的任务交给实际使用者,记录他们寻找下一步时的表现。下一轮可以从这三个问题继续推进。

图版与资料说明

历史作品的作者、年份与出处在相应图版旁标注;未能从引文确定的日期保持未确定。应用界面来自项目官方截图,实际版本与用户配置可能不同。现有界面的观察与第一轮实现分别固定在相应章节注明的 Prompt 快照。
第三方艺术作品和应用截图的权利归各自作者所有,页面底部对本文的许可声明不包含这些第三方材料。本文将图版用于评论与比较;完整作品、原始文件和使用条件请查看对应来源。封面与文中字符试验、界面草图为本次研究编写。
后续对 Prompt 的探索,可以从一个小字标、一张更清楚的首页,或一次更容易理解的搜索开始。每次留下观察、原型和验证结果,让这份研究继续获得真实使用中的证据。