Fantasy RPG UI 奇幻 RPG 界面（Fantasy RPG UI）
Fantasy RPG UI draws its look from the inventory screens, spellbooks, and status panels of tabletop-to-computer role-playing games: parchment, weathered stone, tooled leather, and dark patinated metal form the surfaces; runic or blackletter-inflected type announces headings; red health and blue mana bars wrap the action in resource drama. The style treats the screen as a physical artifact from a medieval-fantasy world, not as a flat display. It crystallized in early CRPGs and was polished into a convention by the MMO era, then surfaced again in every indie dungeon crawler and gacha RPG.
奇幻 RPG 界面的观感取自桌上角色扮演游戏转化而来的电脑 RPG 的背包、法术书和状态面板：羊皮纸、风化石材、压花皮革和深色氧化金属构成表面；符文或哥特黑体字标题宣告身份；红色生命条与蓝色法力条把资源张力包进画面。这个风格把屏幕当作中世纪奇幻世界的实体遗物，而非一块扁平显示屏。它在早期电脑 RPG 中成型，经 MMO 时代打磨成惯例，又在每一款独立地牢探险和抽卡 RPG 中回潮。
Scope: This entry covers the high-fidelity, medieval-fantasy interface skin used in role-playing games — the materials, typography, and HUD grammar — not the Pixel Art branch that builds the same motifs from visible square pixels, nor the broader fantasy illustration style outside UI.
范围：本条覆盖角色扮演游戏中高保真、中世纪奇幻风格的界面皮肤 —— 材质、字体排印和 HUD 语法 —— 不包括用可见方形像素构建同一母题的像素艺术分支，也不包括 UI 之外的广义奇幻插画风格。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Parchment, stone, and leather surfaces羊皮纸、石材与皮革表面 surface defining定义特征
Backgrounds and panels mimic aged parchment (#e8dcc3), rough stone (#6b655c), or dark tooled leather (#4a3b2a) with subtle grain, stains, and stitched seams — the UI is treated as a physical prop.
背景和面板模仿做旧的羊皮纸（#e8dcc3）、粗糙石材（#6b655c）或深色压花皮革（#4a3b2a），带有细微颗粒、污渍和缝线 —— UI 被当作实体道具处理。
-
Ornate metal borders雕花金属边框 geometry defining定义特征
Edges are wrapped in bevelled brass, iron, or dark bronze frames with decorative corner studs, filigree, or rivets; borders use 3–6px raised gradients to read as cast metal rather than flat lines.
边缘包着黄铜、铁或深色青铜的斜角边框，带装饰角钉、卷草或铆钉；边框用 3–6px 的凸起渐变来呈现铸造金属感，而不是扁平线条。
-
Runic or blackletter-inflected titles符文或黑体字标题 typography defining定义特征
Headings use angular runic, blackletter, or Celtic knot display faces with sharp serifs and uneven stroke rhythm, while body labels stay legible in a neutral serif or condensed sans.
标题使用棱角分明的符文、哥特黑体或凯尔特结展示字体，尖衬线和不均匀笔画节奏；正文标签则保持在中性衬线体或压缩无衬线体中以保证可读。
-
Health and mana resource bars生命与法力资源条 imagery defining定义特征
Red health (#c9302c) and blue mana (#2b6ca3) bars sit inside metallic tracks, often with glossy liquid fills, segmented notches, and small icon badges — the HUD borrows the language of character sheets.
红色生命条（#c9302c）和蓝色法力条（#2b6ca3）嵌在金属轨道内，常配光泽液体填充、分段刻度和微型图标徽记 —— HUD 直接借用角色卡的语言。
-
Medieval decorative motifs中世纪装饰母题 imagery supporting辅助特征
Corner flourishes, heraldic borders, wax seals, and Celtic knot dividers reinforce the pre-modern setting without becoming the primary structure.
角花、纹章边框、火漆印和凯尔特结分隔线强化前现代设定，但不成为主要结构。
-
Rich texture and directional lighting丰富纹理与方向光 depth supporting辅助特征
Soft drop shadows, inner bevels, and highlight gradients model the thickness of pages and plates; surfaces look illuminated from upper-left by torchlight.
柔和投影、内斜角和高光渐变塑造书页与金属板的厚度；表面看起来像被左上方的火把照亮。
-
Flat minimal panels扁平极简面板 surface avoid避免
Clean flat fills, zero borders, and system sans-serif type strip away the prop-like materiality and read as modern app design, not fantasy.
干净的平涂、零边框和系统无衬线字体会剥掉道具般的材质感，读起来是现代 App 设计，而不是奇幻风格。
Often confused with: Pixel Art最容易混淆：像素艺术（Pixel Art）
Fantasy RPG UI奇幻 RPG 界面（Fantasy RPG UI）
Pixel Art像素艺术（Pixel Art）
This is Fantasy RPG UI because the interface is rendered as high-fidelity illustration — textured parchment, brushed metal, leather grain, and smooth rendered type — rather than as a deliberately limited set of square pixels.
这是奇幻 RPG 界面，因为界面呈现的是高保真插画 —— 带纹理的羊皮纸、拉丝金属、皮革颗粒和平滑渲染的字体 —— 而不是刻意受限的方形像素集合。
It would become Pixel Art if every texture were reduced to visible 8×8 or 16×16 square cells, the palette shrank to a few indexed colors, and edges became stair-stepped without anti-aliasing.
如果所有纹理都被缩成可见的 8×8 或 16×16 方形单元、色板缩减到几种索引色、边缘变成无抗锯齿的阶梯状，就变成像素艺术了。
In code — optional starting points代码写法 —— 可选起点
Parchment panel with cast-metal border
.panel { background: #eaddcf; border: 6px solid transparent; border-image: linear-gradient(135deg, #a89978, #6d5d43, #8a7b68) 1; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 28px rgba(0,0,0,.45); }HP bar inside a metallic track
.hp-track { background: linear-gradient(180deg, #2a2320, #4a3d36); border: 2px solid #8a7b68; border-radius: 4px; padding: 2px; } .hp-fill { height: 14px; background: linear-gradient(180deg, #e74c3c, #8e1b17); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }MP bar inside a metallic track
.mp-track { background: linear-gradient(180deg, #2a2320, #4a3d36); border: 2px solid #8a7b68; border-radius: 4px; padding: 2px; } .mp-fill { height: 14px; background: linear-gradient(180deg, #4a9bd1, #1e4a73); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the interface as a Fantasy RPG UI. Defining signals: surfaces look like physical medieval props — aged parchment #e8dcc3 with subtle grain, rough stone #6b655c, or dark tooled leather #4a3b2a; edges are wrapped in ornate metal borders using beveled brass/iron gradients (#9c8c6c to #5d4f3a) with 3–6px thickness, corner studs, and inner highlights. Headings use runic/blackletter display type (Cinzel Decorative, Ringbearer, or UnifrakturMaguntia) at 22–30px with sharp serifs; keep body labels in a readable serif or condensed sans at 13–15px. HUD resource bars are the signature: red health #c9302c and blue mana #2b6ca3 fills inside metallic tracks (#3d3328 to #7a6a56), with glossy top highlights, segmented notches every 20–30px, and small icon badges. Add medieval ornaments — corner flourishes, wax seals, Celtic knot dividers — but keep them secondary. Lighting: soft drop-shadow 0 12px 28px rgba(0,0,0,.45), inner bevel inset 0 1px 0 rgba(255,255,255,.2), directional top-left highlights. Avoid flat minimal panels, system sans-serif type, and clean flat fills; they destroy the prop-like materiality. Ensure text contrast ≥4.5:1 over parchment and leather, pause pulsing bar animations under prefers-reduced-motion, and keep interactive focus rings visible.
按奇幻 RPG 界面（Fantasy RPG UI）创建这个界面。决定性信号：表面要像中世纪实体道具 —— 做旧羊皮纸 #e8dcc3 带细微颗粒、粗糙石材 #6b655c，或深色压花皮革 #4a3b2a；边缘包着雕花金属边框，使用黄铜/铁的斜角渐变（#9c8c6c 到 #5d4f3a），厚度 3–6px，带角钉和内高光。标题用符文/黑体展示字体（Cinzel Decorative、Ringbearer 或 UnifrakturMaguntia），22–30px，尖衬线；正文标签保持 13–15px 的可读衬线体或压缩无衬线体。HUD 资源条是招牌：红色生命 #c9302c 和蓝色法力 #2b6ca3 的填充条嵌在金属轨道（#3d3328 到 #7a6a56）内，顶部有镜面高光，每 20–30px 分段刻度，配微型图标徽记。再加中世纪装饰 —— 角花、火漆印、凯尔特结分隔线 —— 但保持为点缀。光照：柔和投影 box-shadow: 0 12px 28px rgba(0,0,0,.45)，内斜角 inset 0 1px 0 rgba(255,255,255,.2)，左上方向高光。避免扁平极简面板、系统无衬线字体和干净平涂；它们会破坏道具般的材质感。确保羊皮纸和皮革上的文字对比度 ≥4.5:1，prefers-reduced-motion 下暂停资源条脉动动画，并保持交互焦点环可见。
Accessibility & misuse可访问性与误用
Ornate runic and blackletter typefaces are decorative: use them only for headings at 18px or larger, and set body labels, stats, and timers in a highly readable serif or sans so the interface remains scannable.
华丽的符文和黑体字是装饰性的：只用于 18px 以上的标题，正文标签、数值和计时器则使用高可读性的衬线体或无衬线体，保证界面仍可扫读。
Parchment and leather textures can reduce contrast and make thin type hard to read; keep text over solid parchment #e8dcc3 at least #3a2e22, or place text on a semi-opaque dark scrim behind runic headers.
羊皮纸和皮革纹理会降低对比度，让细字难以阅读；放在纯色羊皮纸 #e8dcc3 上的文字至少用 #3a2e22，或在符文标题后垫一块半透明深色 scrim。
Glowing HP/MP bars, pulsing highlights, and page-turn animations should pause under prefers-reduced-motion, and color alone must never encode status — add icons or labels to red/blue bars.
发光 HP/MP 条、脉动高光和翻页动画应在 prefers-reduced-motion 下暂停，且状态不能只用色相编码 —— 红/蓝条要同时配图标或文字标签。
Origin起源
The visual grammar descends from tabletop role-playing games, above all Gary Gygax and Dave Arneson’s Dungeons & Dragons (1974, TSR), whose character sheets, spell cards, and DM screens established parchment, metal, and leather as the default fantasy props. Computer RPGs such as Richard Garriott’s Ultima (1981, Origin Systems) translated those props onto early screens, and Blizzard Entertainment’s Diablo (1996, developed by Blizzard North) and World of Warcraft (2004) polished the high-fidelity metal-and-parchment interface into a mass-market convention that indie dungeon crawlers and mobile gacha RPGs still imitate today.
这套视觉语法源自桌上角色扮演游戏，首推 Gary Gygax 与 Dave Arneson 的《龙与地下城》（Dungeons & Dragons，1974 年，TSR），其角色卡、法术卡和 DM 屏风确立了羊皮纸、金属和皮革作为默认奇幻道具。Richard Garriott 的《创世纪》（Ultima，1981 年，Origin Systems）等电脑 RPG 把这些道具搬上早期屏幕；Blizzard Entertainment 的《暗黑破坏神》（Diablo，1996 年，由 Blizzard North 开发）和《魔兽世界》（World of Warcraft，2004 年）则将高保真金属加羊皮纸界面打磨成大众市场惯例，至今仍被独立地牢探险和移动抽卡 RPG 效仿。