如何使用 excel 设计低保真稿？-英雄云拓展知识分享

作为一个常常使用sketch作图的设计师，的确用作图软件做起交互稿会比较美观好看，但是由于需求还未完全落地，中间触及到的改动比较多，包括每一个卡片里的数据也都在随着产品经理与3方运营的对话不断变化。所以这时候候如果应用sketch来做大量的模板，改动起来的本钱会比较高。

图1.1

比如上图1.1的订票卡片，看上去信息仿佛挺完全，但从业务上看，一等座，剩余坐位，列车号需不需要显示呢？再加个延误状态？可以加广告位不？要不要加上时间，地点，日期？检票口？数据的优先级怎样排布比较好？是价格优先呢？还是班次优先？还是检票口优先呢？

因此我希望尝试制定一套将数据与低保真稿子融会于一体的excel低保真库，至今为止还在进行中，如果大家有甚么建议也欢迎随即一起探讨。

下面是我制作的进程：

1. 设计卡片模板

1.1 实例数据的搜集

这是一个单调但聚沙成塔的进程。首先我们要针对经验去寻觅一些相干的实例数据。比如说我们要设计一张机票，那末我们就要积累一些素材。可以从相干的旅游app中搜集，也能够拿出平时自己的实体票据对应查看。这些数据可以先在excel中以表格的情势列出。

图1.2

1.2 设定栅格与间距

具有了基本的数据以后，我们就能够开始设计低保真布局了。新建一个表！我们现在有两个表了。刚刚的是数据表，这个是专门设计低保真布局的表。我们暂且命名为“数据表”和“布局表”。

由于首先第一步是肯定栅格和间距，使得卡片的排布更加规律。这一步可以经过调剂excel上方工具栏里面的“版式（format）”来实现。点开以后可以分别调剂行高和列宽（如图1.3）。

图1.3

调剂以后的栅格图类似于图1.4这样，具体可以针对个人的习惯来调剂，我个人会习惯调剂成比较密的栅格，这样排布情势会比较灵活。。

图1.4

1.3 优先级分阶布局

站在设计的角度上看，当很多信息同时出现的时候，需要有一个主次的辨别，便于用户浏览。所以设定栅格以后，首先做的第一件事，是构思一下布局详略的辨别。

大致可以斟酌几种辨别的方式：

2. 数据的联动

2.1 跨窗口数据联动

在制定了基本的布局和框架以后，就能够将第一步中的积累的数据(见图1.2)关联同步到布局当中。这里面有个技能，就是关联的时候，需要在上方excel自带的文本框中填写“=数据表！B1”。数据表是数据来源，B1是被关联数据的行列编号。

图1.6

2.2 快捷复用

利用excel自带的复制效果，就能够快捷将相同的行进行复制。这个可用于有大量重复列表的页面。比如设置页，新闻流页，联系人页等。

图1.7

2.3 数据之变换

日期，金额等有规律变化的数字，都可以进行快捷拖拽复制，在拖拽的进程中，excel会顺带进行有规律的变化。比如图1.8所示，日期会变成顺序日期，种别的编号也会递增，这样就不需要手动去修改了。

图1.8

3. 美化设计稿

3.1 基本布局排布

将表格里面的数据有主次地排布成手机界面的情势（此处使用上文的“跨窗口数据联动”）

再将字体的大小、粗细进行调理，构成视觉上的重心。

3.2 色采化和丰富化

适当加入色采、图标等，美化视觉效果。

图2.0

注意到其中用了大量的图片、icon元素，其实这些本质上都是西东自带的标点、emoji表情。系统里面的标点表情其实特别丰富，里面包括了很多设计需要使用的元素。

比以下方图2.1，左侧的页面就是由右侧的几个基本表情+部件+文字构成。不同的电脑系统调出表情的方式可能不同，如果是mac系统，输入文字时，用ctrl+command+空格可调出系统图标库。其他的方式，比如输入法也会自带表情图标。

图2.1

为了查询或使用方便，我将最近常常使用的表情种别进行了一个归类，希望对大家有帮助。

图2.2

小结+利用一览

除制作上述的内容，扩大一下，用excel还能针对不同业务的设计做出设计：

我发现这样做的另外一个好处就是，这模样设计出来的文档，可以在产品经理、运营、开发者、视觉设计师等多个角色中流通，产品、运营可以随即在上面增删自己想要的数据，视觉设计师也能够在上面复制取用想要的文字信息。

另外这个文档还可以成为一个信息库，不久的将来如果需要转化成设计稿，这些文字就是比叫真实的占位符，可以辅助将设计快捷填充得更加真实。