跳到正文

赛博朋克

Cyberpunk

初级通用

赛博朋克(Cyberpunk)是一种把高技术、城市密度与权力失衡放在一起表现的视觉风格,常见于近未来题材。它帮你为产品建立鲜明的世界观,比如让虚构城市的游戏官网看起来既先进又充满生存压力。

你可能会说:「我想做个近未来城市的网站,有高科技的感觉,但也要看出街头生活和压迫感。」

动手看看

NIGHT CITY / 07
● 系统在线
[ 宵禁 23:00 ] 城市资产归企业所有
第七区,永不熄灯
接入城市。改写你的身份。霓虹照亮街道,也照亮每一次信用审查。
申请入城权限
// 市政接入终端
区域:第七区
权限:临时居民
信用评分:待审核
官网视觉风格

切换官网风格,再悬停或用 Tab 聚焦入城按钮。赛博朋克不只是霓虹色:密集楼群、宵禁公告和信用审查一起交代了这座城市的权力关系。

要点

  1. 1

    先有世界观再选视觉元素

    赛博朋克通常不只是在展示新技术,还会追问技术由谁控制、普通人怎样生活。你做游戏或影视项目网站时,先想清楚要呈现哪种冲突,画面才不会只剩霓虹灯。

  2. 2

    用环境细节暗示生活处境

    密集的招牌、拥挤的街道、监控提示和临时修补的设备,都能让先进技术与日常生存形成对照。我们可以把这些细节放在背景和插画里,让用户一眼读出故事发生的环境。

  3. 3

    让叙事氛围服从使用任务

    产品界面还得让人完成操作。比如做赛博朋克题材游戏的官网,首屏可以突出世界观;到了购买按钮和系统要求,文字、对比度和层级要清楚,否则用户看懂了气氛,却找不到信息。

容易混淆的地方

赛博朋克和深色界面不是一回事:深色界面只是配色选择,赛博朋克还包含高技术与社会处境的对照。它也不同于终端极客风;命令行字体和代码片段能传达技术感,却不一定能讲出街头生活、权力关系与未来城市的故事。

什么时候用

适合用

  • 做近未来题材游戏的官网时,用它把城市背景和阵营冲突带进首屏。
  • 为科幻叙事 App 设计活动页面时,用它衔接剧情插画与交互界面。
  • 制作世界观展示型原型时,用它检验视觉氛围是否符合故事设定。

不适合用

  • 做医院预约页面时,用户更需要平静、清楚地完成挂号,选简洁且易读的界面更合适。
  • 做面向企业财务人员的日常对账后台时,重点是数据辨认和操作效率,用克制的业务界面更合适。
  • 做只需快速验证功能的内部工具时,先用常规组件搭出流程,比建立完整的科幻视觉世界更划算。

练一练

你要为一款讲述巨型企业控制城市的游戏做官网。AI 给出三种方案,哪一种最贴近赛博朋克,也适合官网使用?

让 AI 帮你做

请把这款近未来城市游戏的官网设计成赛博朋克风格:通过企业宣传与街头生活的对照表现世界观,而不只靠霓虹配色。首屏突出氛围,导航、游戏介绍和购买入口保持清楚易读;先给出视觉方向和页面结构。

接下来学什么