设计2026 年 10 月 24 日
字符的形状,终端的秩序:ASCII 艺术与 TUI 设计调研
从打字机艺术、BBS 与 Amiga 字标,到日本 AA、台湾 ANSI 和现代 terminal 应用,研究字符如何承载图像、品牌与交互,为 NBTCA Prompt 寻找设计灵感。
打开终端,想知道下一节课在哪里上、社团下一场活动什么时候开始,我们能给用户多少信息,又能留下多少个性?
这个问题贯穿 NBTCA Prompt 的设计。它需要容纳课程、校历、活动、考试、成绩和知识库,也需要在不同终端、窗口尺寸与网络条件下保持可用。一个字符占据多少空间,一条分隔线放在哪里,选中项怎样出现,都在影响使用体验。
研究 ASCII 艺术,可以让我们看到字符造型的广度;研究优秀的 terminal 应用,则能看到这些材料如何组成可操作的界面。两者放在一起,才容易把欣赏转化为设计能力。
本文依据艺术家的作品与回忆、历史档案、技术规范、研究论文和项目官方文档展开。案例按历史影响、造型方法、交互清晰度以及与 Prompt 的关联选取,覆盖欧美 scene、日本 AA、台湾 BBS 等不同传统。应用比较以公开界面、官方演示和文档为依据,文中没有进行跨产品性能排名。
资料查阅截至 2026 年 10 月 24 日。历史事实、画面观察与针对 Prompt 的设计建议会分别交代。文章中的界面草图和课程、日期、地点均为虚构示例。
阅读导航
- 理解字符、字体与显示控制
- 回顾历史中的设计条件
- 细读艺术作品与字标
- 练习字符造型的基本功
- 研究十二组 terminal 应用
- 把研究用于 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 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 标题图版,以斜线字标、细长竖线和大面积留白组织阅读节奏。
图版与署名来源:Lotvonen 的研究。
这张图值得从三个尺度看。拉远看,大字标决定视觉重心;正常阅读时,标题与短句之间的留白形成节奏;靠近看,细长的竖线和小型形象又把不同段落串起来。
对 Prompt 的品牌探索,可以从一个 3 至 5 行的字标开始。先确定一种笔画逻辑,再画紧凑和展开版本。这样,开屏上的完整作品与页眉中的小字标就可能保留相同的家族特征。
这也是理解负空间的好机会。字标的内部空洞、字间间隙和外部留白,都需要有意识地安排。压窄一个字标时,仅仅删去空格,可能会让字母粘成无法辨认的团块。
Roy/SAC:小画布上的可读性是一门具体技术
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 年制作的人物群像,展示几何块形与中文构图。
图版、署名与下方作品日期来源:Beyond Encoding。其中未明确标注上方登录画面的创作日期。
登录画面的椰树、落日和中文短句共同建立了观看顺序。树的剪影提供稳定轮廓,水平色面拉开天空与水面,文字则出现在相对容易阅读的位置。下方群像依靠明确的块形边界,让多个角色同时存在。
这条传统与 Prompt 的中文使用环境有直接关联。我们可以研究中文标题、日期与图形重心怎样相互让位,也可以比较同一幅画面里,哪些区域需要细节,哪些区域适合保留平整色面。
实际实现仍需要考虑当前 Unicode 终端中的字符与字宽。历史作品的视觉方法可以保留,具体字节和字符映射需要按目标环境重新验证。
Raquel Meyers:从一套视觉零件发展出完整风格
Raquel Meyers 的项目档案 涵盖 PETSCII、Teletext 与展演。图版选用其 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 | 持续可见的范围与筛选 | 学期、周次和当前数据范围 |
| Glow | Markdown 阅读与分页 | Docs 的阅读排版 |
| Gum、Huh | 输入、选择、确认与表单 | 登录、设置和导出流程 |
| Harlequin | 数据目录、编辑和结果区 | 密集数据与区域放大 |
Midnight Commander:操作可以直接出现在界面里
Midnight Commander 的官方页面 介绍了双栏文件管理、查看、编辑等功能,并提供截图。
Midnight Commander 官方截图,展示双栏文件列表、打开的 File 菜单和底部功能键提示。
截图来源:Midnight Commander。
这张图可以同时观察两种提示。底部功能键持续占据固定位置,菜单则把更多动作与对应快捷键放在一起。用户可以通过浏览逐渐学会操作。
它给 Prompt 的启发是让少量当前操作保持可见。活动列表、搜索输入和登录表单,各自需要的操作不同。底栏可以随上下文改变,而完整帮助仍有稳定入口。
双栏也值得有条件地借鉴。列表与详情同时出现,有助于保持对象关系;窗口过窄时,独立详情页可能更清楚。采用哪种布局,需要比较实际内容能否读完整。
htop 与 btop:图形承担概览,数值承担精确阅读
htop 的官方截图集 同时展示了单色、不同主题、树形结构和图表。它适合研究对齐、排序和较高信息密度下的阅读。
btop 官方截图,以固定区域显示 CPU、内存、磁盘、网络和进程信息,图形与精确数值并列。
截图来源:btop 官方仓库。仓库还说明了图形符号、颜色模式和字体要求。
在这张截图里,比例条和图形帮助快速找到大致状态,旁边的数值与单位支持精确判断。它们承担不同的阅读任务。
对 Prompt,适合比较的图形包括一周课程分布、近期活动分布和年度活跃度。使用图形前,需要定义单位与尺度。同样宽的一格代表一天、一周还是一节课,应当容易查到;没有加载的格子也要与零值区分。
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:把输入过程作为完整体验设计
Prompt 的登录、学期选择和日历导出,都可以沿这些状态逐个检查。出现错误时,应当保留用户仍能继续使用的上下文;操作完成后,应当能读到发生了什么,以及接下来可以做什么。
Harlequin:密集数据需要按任务分配空间
Harlequin 的官方介绍区分 Data Catalog、Query Editor 和 Results Viewer,也提供放大主要区域的能力。
这类界面提醒我们,数据量增加后,可以让用户在概览与局部阅读之间切换。考试和成绩列表适合扫读,完整课程名称、时间说明和原始成绩信息则可能需要更多空间。
对 Prompt 的借鉴应当围绕具体阅读任务:概览页保留哪些字段,选中后展开哪些字段,窄屏下怎样读到完整信息。评估重点是用户能否取得所需数据,并理解各区域的关系。
六、这些研究怎样用于 Prompt
先看现有基础
本节依据 Prompt 的代码快照 ca3110f。固定快照便于后续对照,避免把未来变化与本次观察混在一起。
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,可以让普通文本中的应用名、状态和结果保持可读,为艺术展示提供跳过或关闭方式,并继续保留适合脚本和一次性查询的输出。具体支持程度需要在实际工具中验证。
八、怎样判断设计是否产生了收益
用具体任务比较原型
审美偏好可以帮助选方向,实际任务则能检查设计是否有效。可以先让第一次接触原型的人完成这些任务:
- 找到下一节课的开始时间和教室。
- 找到下一场社团活动,并判断是否已经结束。
- 搜索一篇文档,打开后再返回之前的位置。
- 解释当前显示的是刚刷新的数据、缓存,还是尚未加载的内容。
- 在没有颜色时,指出当前选中项与一条错误提示。
记录完成时间、误操作与误解发生的位置。若要设定时间目标,应把它当作团队自行提出的验收目标,并与真实观察一起调整。
让同一原型经历不同显示条件
建议至少比较正常内容、空结果、加载中、刷新失败但有缓存,以及长中文标题等状态。再把这些内容放进不同窗口和显示能力中。
| 比较条件 | 主要观察 |
|---|---|
| 80×24 与 120×36 | 信息顺序、空间分配与完整详情 |
| 更窄或更矮的窗口 | 换行、截断与必要操作提示 |
| 深色与浅色背景 | 正文、弱化文字和焦点的可读性 |
| 关闭颜色 | 状态与选择能否继续区分 |
| ASCII 图形模式 | 图形资源是否真正使用兼容字符 |
| 减少动效 | 静止结果与首次可操作时间 |
| 中文与英文混排 | 对齐、截断与焦点位置 |
| 远程终端与网络失败 | 输出量、刷新节奏与数据状态 |
实现后,应检查生产构建产物。开发服务器中的资源路径、字体和刷新行为,未必代表发布后的结果。npm 包体积、启动耗时和运行时依赖,也应与改动前的实际基线比较。
把待验证的判断保留下来
这份研究提出的几个方向,可以转成明确的设计假设:
- 三档共享特征的品牌资产,能在不同窗口中保持识别。
- 当前语境中的少量操作提示,能帮助新用户找到下一步。
- 图形与精确值并置,能帮助用户同时理解时间概览与具体安排。
- 未知与空值使用不同标记,能减少对数据完整性的误解。
- 小型插画能增加亲和力,同时保留主要任务的阅读空间。
它们还需要通过原型和实际使用检查。保存失败案例与观测条件,会让下一轮设计更有依据。
九、把调研变成可以持续练习的能力
第一轮:只研究轮廓和空白
选一幅 jgs 小作品和一幅 Amiga 字标,各记录三个最关键的识别特征。随后自己画一个 16×8 的物件,再把它压缩到更小尺寸,观察识别在哪里开始丢失。
重点是判断关键特征。可以暂时不用颜色,也不使用图片自动转换。
第二轮:建立一个小型字符家族
为 NBTCA 设计三种 3 至 5 行的字标,选出一种笔画逻辑,再画两个关联尺寸。用两种真实 terminal 字体查看,并在单色下比较。
接着为同一风格增加一个分隔符和一个空状态形象。检查这些素材是否共享密度、转角和留白。
第三轮:拆解一次完整交互
观看 fzf、Helix 或 Lazygit 的官方示例,选一段任务,记录开始、选择、执行与返回时的画面。每个时刻都写下:当前对象是什么、焦点在哪里、下一步怎样操作、结果怎样确认。
再把这套观察用于 Prompt 的文档搜索或学期选择。这样,借鉴会落到可讨论的状态,而不仅是配色与边框。
第四轮:用同一份内容比较三种方向
选定一组虚构课程与活动,在相同尺寸中分别尝试清晰排版、社团字标和时间概览。每种方向都保留同样的主要任务。
让首次接触的人完成上一节的任务,记录收益与问题。保留有效元素,再制作组合原型。
推荐继续阅读的三条路径
交互与实现可以从 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 活动页的日历插画、无近期安排说明与浏览菜单
图版 8。80×24 的活动页示例。画面由该实现快照的生产构建渲染函数生成,再把 ANSI 文本转换为浏览器图版;示例状态没有近期活动。它用于比较内容位置,具体字形和颜色仍会随终端配置变化。
这个取舍借鉴了小型 ASCII 作品使用轮廓建立识别的方法,也吸收了 terminal 应用对行动路径的重视。插画与说明并列之后,用户依然可以浏览活动、修改查询或返回。宽屏中的亲和力需要通过实际使用观察;能否保住说明和操作,则可以直接验证。
在 20×12 的文档搜索示例中,插画会隐藏,查询、零结果说明和返回操作仍然显示。高度预算也作用于宽而矮的窗口,避免只看列数就增加装饰。
用三个状态取代含糊的疏密暗示
原有周概览使用不同纹理表示工作日与周末,活动数据尚未到达时则留空。对于只记录“当天是否有安排”的布尔数据,“较满”和“较空”会让人联想到实际并不存在的数量或时长。
本轮把格子的意义收敛到数据能够支持的范围:
▓▓ 表示有安排,·· 表示无安排,?? 表示活动数据尚未加载。ASCII 模式分别使用 ##、.. 与 ??。无安排的工作日和周末采用同一标记;活动数据到达后,未知标记会被真实的有无状态替换。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 的探索,可以从一个小字标、一张更清楚的首页,或一次更容易理解的搜索开始。每次留下观察、原型和验证结果,让这份研究继续获得真实使用中的证据。
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
作者:NBTCA,发表日期:2026 年 10 月 24 日








