策划必修课：三分钟学会画线框图

分类

未分类

策划必修课：三分钟学会画线框图

Post author

作者：AT

Post date

2025年4月17日

策划必修课：三分钟学会画线框图无评论

界面的最高境界是Don’t Make Me Think（即《点石成金》这套书的名字），即用户在看到的一瞬间就知道要怎么交互。这本质上是一个非理性的过程，因此要满足用户非理性的预期。（想进一步学习的微信读书搜《艺术与视知觉》）。

人类在观察界面时会本能的将视觉元素进行分组来理解，因此布局的基础可以理解为要拿着刀把整个界面砍成几块，这几块之间的观看顺序是如何的，以及每块里面都装了些什么。

不要画高保真的线框图，要画低保真的线框图。高保真会让你过于陷入细节，而低保真可以让你把更多的精力放在关注界面布局（Layout）上。刻意降低绘制的线框图的分辨率可以有效做到这一点。使用手绘风也可以有效做到这一点，所以我一直用balsamiq mockup。

一般而言界面在同一个方向上切块不要超过三块，超过三块之后用户观察界面时困惑的概率会大大增加。

由于把界面砍几刀的过程是具有方向性的，因此本质上线框图是可以转义成脑图的，即线框图的Layout本质上是树状的。因此当你不知道该如何动手开始画的时候，不如先画一画视觉元素的脑图。

上面已经说了，在水平方向上，Layout在某个方向上最好不要超过三层，那么在深度上，Layout的嵌套最好也不要超过三层，即避免“框套框套框”。翻译一下，就是脑图里不超过3棵树，每棵树的分叉不超过3层。

使用分割线可以有效避免框套框套框。

绘制线框图时用色要尽量克制，如果可以的话请只使用灰阶。你也可以像我的习惯一样把所有能交互的元素画成黄色的，这是我从工业设计师迪特·拉姆斯（Dieter Rams）这里偷学到的。

能交互的元素都应该有对应的迁移图，让同事看到后就知道交互的后果是怎样的。这里的目的是要求策划考虑到全部的交互可能性，而不是要求策划必须产出能交互的原型。纯静态的迁移图即可，不需要可交互也不需要动效。

每一张迁移图都应该有标题。

但你如果就是对UI非常感兴趣，就是想搞动效的话，那也可以用figma或者adobe xd之类的软件来搞。可以，但没必要。

界面布局即视觉元素之间的相对关系。界面元素之间的相对关系，本质上只有四种，即《写给大家看的设计书》中提到的亲密、对比、重复、对齐。

这四种关系的目的都是降低用户的理解成本，使界面符合用户的预期。

亲密的界面元素会让用户将其认知为一个整体，如一个按钮和按钮上的文字，一个图标和一个图标的文字，一段长长的价目表和下面的一个支付按钮。

要特别注意可交互的元素的亲密关系。比如一个要关掉某个界面的按钮，和这个界面之间的关系。

对比的界面元素会凸显哪个更主要哪个更次要。如果一个本应该主要的东西没有得到足够的凸显，那么就是设计问题，反之亦然。

用户最容易观察到的对比按照优先级排序是：1动，2大，3变色，即动静对比、面积对比、颜色对比。

前面提到界面用色尽量克制，就要求策划在画线框图的时候只用灰阶来完成对界面元素之间对比关系的概括。

重复的界面元素会让用户将其认知为一个具有确定或不确定个数的同质元素的的整体，如列表、背包、菜单（实体）等。

对齐的界面元素会让用户将其认知为一个具有多种相似元素的整体，降低用户见到界面时困惑的几率。

慎用居中对齐。如果能不用尽量不用。居中对齐的本质不是对齐，因为它无法使某个视觉元素形成稳定的边界。尽量用上、下、左、右对齐。

重复的元素大概率是对齐的元素，而对齐的元素不一定是重复的。

重复不是越多越好的，过多会显得臃肿或丑陋，而对齐一定是比不对齐更好的。

视觉元素的四种关系可以复合使用，如“一个有一半面积嵌入在弹出层边框中另外一半破框了的按钮”，同时使用了亲密和对比。如好友列表中的置顶好友，同时使用了重复和对比。

最有效的练习是徒手默写，找一个你天天用的软件或游戏，不要打开它，凭自己的记忆把这个软件的主界面布局画出来。画完了或者实在画不下去了，就打开这个游戏或软件，看你到底是没有注意到哪里的布局设计。这个练习可以让你快速的突破对别人的设计“视而不见”的门外汉阶段。

以下是一些具体建议题目：

Windows资源管理器

Excel

微信

抖音

Steam（PC端）

Edge或Chrome浏览器

你的手机的系统设置界面

你的手机的闹钟界面

你的手机或电脑的计算器界面

网易云音乐（移动端）

Youtube首页（网页端）

支付宝

本文一共提到了三本书，《点石成金》，《写给大家看的设计书》，《艺术与视知觉》。

←

如何写一篇完美的策划案

→

游戏常用英文词典 2.0

留下评论 取消回复

Δ