VISUAL LANGUAGE / DESIGN GUIDE

电影感深色

Modern Dark (Cinema Mobile)

以深色背景、较大影像和克制文字模拟电影片单的氛围。小屏需要在海报表现与快速找到标题、时长、播放状态之间取得平衡。

电影感深色设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

以深色背景、较大影像和克制文字模拟电影片单的氛围。小屏需要在海报表现与快速找到标题、时长、播放状态之间取得平衡。

适用场景

视频内容、影展片单、影视作品集。

不适用与取舍

主要任务是表格录入或全天处理通知的企业工具。

实现方法

海报固定宽高比,文字置于有保护的底色或渐变上;加载前保留空间。播放按钮有标签,音视频不自动发声,字幕与控制入口可发现。

具体界面示例

片单卡展示海报、片名与时长,详情给简介和播放入口;手机点选后不会被悬停效果挡住。

常见误区

暗色图片上的白字也可能看不清;不能让巨幅海报把关键说明和返回入口挤出首屏。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。