案例 · Web

Towchronicle:运河周刊网站 UI 概念(Landing / Week / Harelock)

原创高保真网站 UI 概念,面向一份运河周刊:带船闸插画的首页、从上到下的一周日志,以及 Harelock 专页。虚构航道,读数为 DEMO,不是通航指南。

  • 4 张图片

图片署名:Tink

Towchronicle 是一款原创高保真网站 UI 概念,设定为一份关于虚构航道 Wynn Navigation 的周刊:一条小运河、一座单室船闸,每周写一次。

三个页面

Landing(首页)。 标题 “The week on the cut.” 旁边是代码绘制的 Harelock 闸室,窄船 Heron 停在两扇闸门之间。短注说明这不是通航指南,水位数字仅供 DEMO。Harelock 水位记为平稳,高于夏季水位 +0.12 m,这是期刊读数,不是建议。卡片选出 11 月 10 日周二 Heron 于 09:40 出闸;截至周三已记录 18 次通过;以及 11 月 14 日周六 14:00 起的闸屋开放下午。

Week(本周)。 从 11 月 9 日周一到 15 日周日的纵向日志,不是时刻表。周一:给闸门上油。周二:Heron 于 09:40 出闸。周三:在 Mile 4 修纤道,到晚上本周记录为 18 次。周四 12 日(今天)记下昨夜有霜——这是期刊观察,不是天气或通航警告。周五:Reed Pound 志愿刈草。周六:闸屋从 14:00 起开放下午。周日:尚无通过记录。侧栏重复:截至周三 18 次、上周 41 次、水位 +0.12 m 平稳。

Harelock(船闸)。 深色专页,同一幅闸室图。事实:落差 8 英尺 3 英寸、单室、上周 41 次、本周截至周三 18 次、水位 +0.12 m、闸守 Eli Moss(虚构)。页面标明不是航行建议。

视觉系统

  • 米色、砖色、河水色、苔色和金色
  • 标题用 Literata,界面用 Barlow,标注用 IBM Plex Mono
  • 闸室和窄船均以 SVG 绘制
  • 期刊导航:This week、The cut、Harelock、Archive、About

说明

Towchronicle 是虚构品牌。Wynn Navigation、Harelock、Heron、Eli Moss、水位读数和通过次数都是演示用的 DEMO 数据,不是真实航道,也不是通航指南。这是静态设计研究,不是真实网站。全部画面由代码绘制,没有照片或第三方标志。