如何使用 excel 设计低保真稿?
发布时间:2022-06-15 16:22:31
作为一个经常使用sketch作图的设计师,的确用作图软件做起交互稿会比较美观好看,但是由于需求还未完全落地,中间涉及到的改动比较多,包括每个卡片里的数据也都在随着产品经理与三方运营的沟通不断变化。所以这时候如果运用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 优先级分阶布局
站在设计的角度上看,当很多信息同时出现的时候,需要有一个主次的区分,便于用户阅读。所以设定栅格之后,首先做的第一件事,是构思一下布局详略的区分。
大致可以考虑几种区分的方式:
(图1.5)
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还能根据不同业务的设计做出设计:
我发现这样做的另外一个好处就是,这样子设计出来的文档,可以在产品经理、运营、开发者、视觉设计师等多个角色中流通,产品、运营可以随时在上面增删自己想要的数据,视觉设计师也可以在上面复制取用想要的文字信息。
另外这个文档还可以成为一个信息库,未来如果需要转化成设计稿,这些文字就是比较真实的占位符,可以辅助将设计快速填充得更加真实。
猜你喜欢
- 咦!在word里可以画三维立体图耶,小编表示刚知道,所以立马分享出来给大家,不知道的朋友赶快学一下吧!在word中画三维立体图的流程1、打开
- excel表格该怎么设置密码?有时候情况特殊,需要加密,这时就要为其设置密码来进行数据保护,今天我们来看看excel数据加密的两种方法,需要
- 微软方面给出推送2004版本系统的更新的消息,微软win10 2004系统将要为广大用户们推出了2004版本系统的更新,版本为Build 1
- 众所周知,控制面板是Win10系统图形用户界面中不可获取的一部分,用户可以在控制面板上查看并操作基本的系统设置。那么,Win10 1909控
- 在Excel中有时我们插入的文本框会盖住了下面Excel中的文字内容,这时就有必要设置Excel文本框透明,那么,Excel文本框透明度如何
- 不少用户在使用电脑的时候,都会安装一些uwp应用,这些应用是专为Windows10系统设计制作。但是最近有不少用户在使用的时候却出现了闪退的
- 对于办公的朋友们,来说一个良好的办公软件可以使我们的工作,事半功倍,不知道你日常使用何时什么办公软件呢?是国产WPS软件?还是微软Offic
- excel中我们可以使用数据有效性来约束输入的数据提示,但具体该如何设置呢?下面随小编一起看看吧。Excel2017设置数据有效性的步骤1、
- “帕累托法则”是在商务领域中经常会提到的思考方法,也叫作“80:20法则”。它是指:“销售额的80%,是由20%的客户提供的。”“经费的80
- 在功能区设置颜色在功能区开始选项卡,字体功能组,使用填充颜色和字体颜色两个命令设置颜色。在设置单元格格式菜单中设置再此处除简单的填充颜色外,
- Excel求和公式这下全了,多表、隔列、多条件求和,一个都不能少!1、SUM求和快捷键在表格中设置sum求和公式我想每个excel用户都会设
- 工作中,我们不时会需要将大量图片插入word,并对其设置统一的尺寸大小。那么下面就由小编为您分享下批量导入、修改图片尺寸和压缩图片的技巧,欢
- Word2007插入的图片怎么设置文字环绕方式?word文档中插入了一个图片,感觉很突兀,想要给图片设置文字环绕方式,该怎么设置呢?请看下文
- 当我们使用win10版2004系统时,微软也在不断优化和维护新版系统。最近,微软又一次发布了win102004慢预览版的系统补丁。关于KB4
- 给重要的单元格添加简介和说明,这样可以让我们很轻松的找到要找的东西。只要将鼠标放到某个单元格上就会显示我们初始时填写的简介说明文字了。可以避
- 在WPS文字中插入并编写了表格后,发现有些内容是可以整合在一起,看起来也更加整齐,那么就要对表格进行合并和拆分。下面小编就向大家介绍下在WP
- word文档软件相信大家都不会陌生,我们电脑的系统一般都自带有word软件。在平常的办公工作中word软件成为不少朋友必须要用到的软件之一,
- Excel 是微软办公套装软件的一个重要的组成部分,它可以进行各种数据的处理、统计分析和辅助决策操作,广泛地应用于管理、统计财经、金融等众多
- 有的小伙伴反映说:安装Excel2007时,提示内存不足。遇到这个问题时怎么办呢?接下来,跟着小编一起看一下Excel2007中出现安装时提
- 杜比音效听起来会比普通音效更立体,更真实,在看电影或者打游戏时杜比音效会有很大帮助,很多的玩家想在玩电脑游戏的时候戴上耳机,那么怎么打开耳机