恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Sketch 3排版简述
0.0°
2014-08-26 自译外文 经验/观点 原作者: Erica Jaclyn Stein 举报 7233 31 10 0

首先,感谢Erica Jaclyn Stein。此文仅为中文译文。原文见文末的链接。下面为译文正文。

设计经常需要修改,因此便于修改对于设计师来说很重要。功能、特点、美学特性会经常变化。

毋庸置疑,最新版本的Sketch拥有难以置信的强大功能。快捷、灵活、简便被认为是Sketch 3的代名词。在众多的优化中,Symbol(符号-译者注)被认为是最重要的功能。但是Sketch的奇迹远非这些,Sketch引入了图层样式链接功能,该功能针对形状和文本。定义文本的格式并将它应用到所有地方从未如此简单。

排版—Sketch 3中的文本样式

全局链接

类似于“群组符号(Grouped symbols-译者注),文本样式可以在图层和画板间复用。它可以随意创建并在样式窗口中管理,然后应用到你需要的的文本图层中。详见下文。

系统性与基础性特点

我认为Sketch的文本样式最棒的地方就是拥有“活的”预设样式指南并可以在未来的复用中方便的修改。借助预设的排版格式,我们可以快速创建简单的线框图和模型。文本样式功能迫使我们养成坚持使用结构性、灵活性内容样式指南的好习惯。

简单、快速、高效

如上所述,文本样式极大地简化了创建样式指南的工作。但更重要的是,对于动态产品版本或者公司的样式指南,它可以简便的保持跨团队和复用时排版的一致性。

样式指南

创建样式指南并非所有设计师钟爱的工作。但保持样式的统一性和字体格式的一致性确实必须的。如果在设计流程的末端,才创建样式指南或许是很繁琐的。

“随着理性标准的不断发展,设计师有能力做出’创意性的决策’,这些决策是基于系统性方法,而非仅凭直觉。”-Karl Gerstner

开始行动吧!

从文本样式的基础开始学起,我借助一个网页设计项目来为大家介绍一般的操作流程。

首先,打开Sketch 3,导入预设的网页设计模板。

在Sketch 3中增加的这些预设模板大大提高了工作效率!

Sketch 3已经预设了基本的“排版指南”

然后,定位到文件的symbol(符号-译者注)页面,选择预设的“排版”画板(感谢Bohemian开发的代码!)现在,我可以在画板的文本图层将默认的文本样式调整成我喜欢的样式了。同时,我还可以添加更多我自己的文本样式。

完成后画板如下图:

在Sketch 3中“排版指南”针对桌面端和移动端采用不同的文本样式解决方案。编辑和导出都很方便!

思路是在设计之前就设定文本的样式。这样做主要有两点原因:

1.创建个性的基础要素。当创建线框图时,内容的结构和页面的结构非常关键,例如元素与信息层级间的关系等。应用该工具可以将我调整文本样式的时间减小到最小并且降低单独文本图层出错率。

2.必要的文本格式化。例如,设备分辨率需要调整时。如果我设计响应式网页,我希望同时考虑手机和平板的分辨率。

再次,在画板上完成一两页页面设计之后,将页面的标题改为“文章样式”,如图:

根据不同的分辨率设计的画板:桌面端、平板端(iOS)和手机端(iOS),该页面为文章或故事而设计。

OK,现在该了解如何设置样式指南和设置文本样式。现在开始考虑一些变化……

我决定是时候获取一些反馈,因此我与团队一起评审我的作品。感谢我之前做的工作样式指南,我可以与开发团队快速评审基本元素。因此他们能掌握结构性元素的要旨。我收到段落文本过小的评论。

调整任意文本图层,查看在在全局内被归类的样式的变化

快速调整:我所要做的仅仅是选择任意已经被归类的“文本段落”中的“段落”图层,将其调整到更大的字体尺寸。

“谨记:文本样式始终保持同步,因此你调整一个文本图层将传递到所有应用该样式的所有图层“-在Sketch模板的预设:“iOS UI设计”中已注明。

最后两点小技巧:

文本样式可以在符号(symbols)或者样式管理窗口中重命名或者删除。你可以在工具栏中选择样式化文本(Styled Text)进入样式管理窗口。

文本图层在同一文件或者不同sketch的文件中可以保持所属文本样式的样式不变。

原文链接:https://medium.com/@ericajaclyn/typography-in-sketch-3-linked-text-styles-9946a32af688

更新:2014-08-26

收藏

31人已收藏

charles.li007

Sharing & inspiring

  • 5

    作品

  • 30

    粉丝

  • 0

    关注

  • O2O App (iOS版)
  • 击剑会所网站登录页
  • 从设计到iOS 7原型
  • 移动优先的设计

    猜你喜欢

      2014-08-26 自译外文 经验/观点 原作者: Erica Jaclyn Stein 举报 7233 31 10 0

      Sketch 3排版简述

      0.0°

      你确定要举报Sketch 3排版简述

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年08月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      31
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录