Deft
Ask AI

Search

Search skills, authors and topics

oil-oil / oil-ui

oil-ui

Design, improve, and review interfaces for websites, apps, dashboards, and components: explore directions, generate side-by-side comparisons, and refine visual hierarchy against real screenshots. Delivers a comparison page, design notes, a comp, or a working interface when asked. Design judgment only. Hand off to oil-ui-pro when that skill is installed.

Install

npx skills add https://github.com/oil-oil/oil-ui --skill oil-ui

说服型页面首屏骨架

落地页、品牌页、产品发布页、展览页等以说服、传递理念为主的页面,按本规范选定首屏骨架(整体设计方向流程见 设计方向 [blocked])。

模型最顽固的习惯是左右分栏,它在写文案之前就定下来了:先想好标题、一段说明、一个按钮,摆好就是左右两栏。所以骨架要在写任何文案之前决定。

每个方向先从下表选一个首屏骨架,再用 3–5 个方框画出首屏线框:每块是什么、占首屏多大面积、阅读从哪里开始。

骨架首屏长什么样
满版图像压字一张图占满首屏,标题和动作压在图的安全区里
居中单一物件一个物件或一句话居中,四周是大面积空白
画面即界面首屏就是产品界面或一件实物本身,标题、导航和按钮都长在它上面
满版文字文字本身就是画面,字大到占满首屏、跨过边缘或被裁切
通栏上下堆叠通栏大标题横跨整个宽度,下面紧接内容
网格拼贴多块内容同时出现,按网格或拼贴排列
纵排或斜向文字竖排、斜切或旋转,打破从左到右的阅读
左右分栏文字一侧,画面一侧。这是模型的默认,一轮最多一个方向使用,并写出为什么适合当前内容。另一侧要有撑得住场面的主角:跨出边界的图像、图形装置,或放大到看清核心操作的产品界面特写,不要塞一张缩得很小、没有重点的整页截图

规则:

  • 同一轮的方向,骨架互不相同。
  • 所谓“大标题九栏、说明三栏”同样算左右分栏。
  • 骨架定好之后再写文案。文案去适应骨架,不让骨架去适应“标题 + 说明 + 按钮”的组合。

构图的大胆程度和调性无关。安静精致的产品,一样可以把一句话放在空白首屏正中,或让纵排标题贯穿整屏,或让界面本身占满首屏。调性决定音量,骨架决定结构;不要因为调性偏安静,就退回左右分栏。