提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
首先,感谢Erica Jaclyn Stein。此文仅为中文译文。原文见文末的链接。下面为译文正文。
设计经常需要修改,因此便于修改对于设计师来说很重要。功能、特点、美学特性会经常变化。
毋庸置疑,最新版本的Sketch拥有难以置信的强大功能。快捷、灵活、简便被认为是Sketch 3的代名词。在众多的优化中,Symbol(符号-译者注)被认为是最重要的功能。但是Sketch的奇迹远非这些,Sketch引入了图层样式链接功能,该功能针对形状和文本。定义文本的格式并将它应用到所有地方从未如此简单。
类似于“群组符号(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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册