欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

简单实用!七步学会用 Sketch 搭建复杂表格

发布时间:2018:02:02 13:20:43 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1126个文字,预计阅读时间3分钟
导语
笔者之前去华润置地东北大区做用户调研,需要现场理解需求,快速搭建用于用户测试的可交互原型。

  笔者之前去华润置地东北大区做用户调研,需要现场理解需求,,快速搭建用于用户测试的可交互原型。由于方案中涉及大量的表格,有点措手不及。回来后,我构思做一个 Sketch 模版沉淀,以防下次再遇到这种情况。这篇分享主要涉及两个 Sketch 的重要 feature:Symbol 嵌套和 Resizing。关于前者之前已经分享过一篇,补课的同学请点击这里。本篇将专注于 Resizing。

  效果预览

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  △ 用 Resizing Symbol 搭建的虚拟任务列表

  第一步,了解 Resizing

  Sketch 从44开始,对之前的布局功能进行了优化,重新整合为 Resizing。Resizing 由两部分组成:

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  Pin:选中某对象上下左右某一边后,拉伸 Group 时该对象距离该边的距离恒定。

  Fix:选中某对象宽/高固定后,拉伸 Group 时该对象宽/高的数值恒定。

  光从字面不太容易理解,笔者直接上图,举四个例子帮助大家:

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  第二步,设计一个单元格

  单元格看似简单,其实是由不同的元素和属性组合而成,笔者根据工作的需要,整理出来一张脑图。大家可以根据自己的切身需求进行增删。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  大体上这些信息可以分成两部分,定量和变量。根据我司设计规范 Clarity Design 规定好间距以及基本元素尺寸:

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  所以我们现在看到的应该是这样一个单元格,这里提前演示下拉伸后的效果。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  第三步,图标和颜色

  整理好可能用到的图标。我这里以文件类型为例子,大家也可根据需要放入其他图标。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  整理好会用到的颜色。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  整理好操作按钮,利用 Mask 功能实现按钮变色,不懂的同学请点击这里补课。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  第四步很关键,请醒一醒。

  第四步,对齐样式

  一般表格中的单元格都会视情况选择对齐方式,不同的对齐方式也有各自细分的用法。笔者对自己的用法进行一个归纳:

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  三种对齐方式中,左对齐的制作最为复杂,因为涉及到图标、字和操作。我在这里就以此为例,其他两种对齐方式希望大家可以举一反三。首先,按照下图创建三个同样大小的 Symbol,参数如图所示。放上字和操作按钮,按照图示 Resizing 配置。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  tip:当文字的设置为 auto 时,图标跟随在字后方足够近的地方,在 override 更多文字时会跟随文字图层的宽度而自动移动。

  然后,创建两个新的相同大小的 Symbol,尺寸与上述三个不同,如图。加入图标并设置好 Resizing。其中嵌入上面三个 Symbol 中任意一个。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  最后,创建一个新的 Symbol,尺寸与上述五个不同。其中嵌入上面两个 Symbol 中任意一个。同时,完成右对齐和居中对齐相关步骤,我们可以得到三种对齐方式的 Symbol,它们的尺寸一致。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  我们将左/中/右中任意一个 Symbol 嵌入第二步中的单元格内,左右间距5 qu。

  

 

  这样对齐方式就设置完了,我们得到一个叫做 Cell 的 Symbol。可以选择对齐方式,复写文字内容,选择是否需要操作图标。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  第五步,分隔样式

  单元格的分隔样式有两种样式,下划线和描边。首先我们来实现可以改变颜色和粗细的下划线。拿出到之前准备好的颜色 Symbol 进行拼接。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

  然后我们来实现可以改变颜色和粗细的描边。

  

简单实用!七步学会用 Sketch 搭建复杂表格

 

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:数据型B端设计理念探讨

下一篇:【体验】设计过程中完全可以避免这些雷区

  • 18894 文章总数
  • 2305986访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信