「Sketch | 译文」用共享样式创建文本系统

原文作者:Bunin Dmitriy来自:Medium阅读全文大约需要 6 分钟相信字体样式管理对很多新人设计师而言并不是一件容易的事,甚至很多工作多年的设计狮也并没有很好的规划自己的项目字体样式的习惯,这不但增加了设计项目的维护难度,更主要的是随着项目的不断膨胀,你项目中的排版会变得杂乱无章、极不统一。其实使用Sketch来进行字体管理并不复杂,今天带来的是Bunin Dmitriy的一篇关于文本样式系统的文章,不到十分钟可以让你对文...

「Sketch | 译文」用共享样式创建文本系统

原文作者:Bunin Dmitriy

来自:Medium


阅读全文大约需要 6 分钟

相信字体样式管理对很多新人设计师而言并不是一件容易的事,甚至很多工作多年的设计狮也并没有很好的规划自己的项目字体样式的习惯,这不但增加了设计项目的维护难度,更主要的是随着项目的不断膨胀,你项目中的排版会变得杂乱无章、极不统一。


其实使用Sketch来进行字体管理并不复杂,今天带来的是Bunin Dmitriy的一篇关于文本样式系统的文章,不到十分钟可以让你对文本样式系统的构建有一个基本概念,之后你需要做的就是上手做一遍,那么这个技能就归你了。



以下为译文部分


有完善层级的字体样式

Text styles with a strong hierarchy

你或许已经注意到了,很多时候为了更快速的去命名你的图层或者样式,你常常会放弃思考,所以你会看到你的项目中充满了诸如“Title-2”,“subheader-small”,“header-3”等等毫无意义的命名,让我们停止这种毫无组织、混乱的方式吧。

当我们遇到混乱的样式时,即便是最基本的需求,当它设计到文本或字体时,也会变得复杂无比。一个项目的文本系统必须在设计师心中占有一席之地,所以我们的目标是制作一个无障碍的、可复用的字体系统,它可以根据项目的规模进行扩展或精简。

要做到这点,我们需要事先确定文本样式的数量,这里我用HTML举例,HTML为设计师提供了6个不同级别的标题,来表示段落、标题或文本的重要程度,比如<h1>是一级标题,表示最重要,而<h6>是六级标题,同时也表示它最不重要。

让我们来看看如何把这种方法应用于文本样式,并且用几个简单的步骤来组织它们,因此我们要为它们创建一个结构以方便管理。



创建一个字体系统

Create a typography system

1. 首先打开Sketch,然后把你所有的文本样式写到一个简单的列表中,按照从大到小的顺序排列,并把文本图层的对齐方式设置为居中对齐。提示—样式的数量可能会影响到你的项目的整体视觉感受,所以文本样式不是越多越好,尝试着更多的使用重复尺寸的字体样式,而不是总在设计新页面时候使用新的尺寸。

「Sketch | 译文」用共享样式创建文本系统

2.  现在复制该列,在该列两侧生成新的左右两列,他们一起形成一个字体表,别忘了更改每个文本图层的对齐方式,让他们适应各自所在列(如下图所示)。


「Sketch | 译文」用共享样式创建文本系统

3. 根据你的品牌色和界面状态色来决定你要复制多少次你之前制作的字体表(即步骤2中完成的字体表),例如,强调色、不可点击状态或激活状态等不同的文本颜色(也就是睡说有几种用色就做几套字体表)。


「Sketch | 译文」用共享样式创建文本系统

4. 现在到了这个阶段的重点,也就是文本图层的命名。你需要根据文本图层所在的列为他们分配名称,这样相同的样式便可形成组,同时样式也可以形成菜单结构,为了做这件事,我们需要用到“Rename It”插件。

我们的菜单结构看起来就想这样:

%*/Font name/Alignment/Color

其中(%*)是当前图层的名称。

| 如果你没有计划使用其他字体的话,就可以去掉菜单结构中的“Font name”



5. 现在你需要从每一个文本图层去创建文本样式,这时你需要使用https://github.com/lucaorio/sketch-styles-generator 插件快速的从我们的文本图层命名结构生成样式。这样你就不需要在文本样式的下拉菜单中手动的把每个文本图层分配给共享文本样式了。


「Sketch | 译文」用共享样式创建文本系统

下载字体模版

造物资源【百度云盘链接】

https://pan.baidu.com/s/1Oph5npRA8yX4T2NTEJHSCQ 

关注公众号【造物之心】,发送“文本系统”,获取资源下载密码 

把它用作你下一个项目的开始。你可以把自己的字体放入文件中让你在下一次项目中加快进程。


字体配对

Font pairing

所以你真的需要在你的项目中使用第二套字体是吧?

你文档中的第二套字体可以让你的文本更加高效,并且可以让你创造出更酷的外观,就像你在那些梦幻的着陆页看到的一样,另外当你的产品需要保证各种不同用户的可访问性的时候你也需要使用多种字体。

要连接第二套字体需要这样做:

1. 首先复制之前创建的字体表,并且更改所有文本图层的字体,比如从“Arial”字体改为“Roboto”字体。

2. 使用“Rename it”插件替换目录结构中的“/Font name”的部分,比如把“/Arial”改为“/Roboto”。

3. 现在把所有的新的文本图层覆盖为新的共享文本样式。

好的,它完成了,现在我们回顾一下,你会发现这样一个拥有良好结构的共享文本样式或许会在日后某一天拯救你。看看下面的GIF图,检查下下拉菜单是不是看起来像这样:


「Sketch | 译文」用共享样式创建文本系统

分享和导出你的文本样式

Share and import your Text styles

现在我们已经有了一个现成的文本样式系统,作为一个正常人我肯定希望马上把它应用到我的其他的项目中,文本样式分享插件会帮助我们实现它!

使用它你可以导出一个独立于当前文档的JSON文件,你可以把它保存在硬盘或Dropbox(云盘)上的任何位置。这个文件将包含你的共享文本样式的一切信息,所以你只需要把它放入新项目中,你就可以立刻再次拥有一个有着良好结构的共享文本样式了,并且你可以更好的保持排版的一致性。

保持你的头脑冷静,排版整洁。



更多提示

More pro tips

  • 为移动设备和桌面web设计页面的时候要使用不同的JSON文件

  • 因为项目的发展和需求的经常性变化,你需要保证你的文本样式系统的版本管理,保证github和摘要的同步。

  • 你可以重新导入一个JSON文件来覆盖初始的文本样式的状态,以便你重新开始新项目。

  • 在这里你可以找到大量不同的可供你尝试的字体组合—— http://fontpair.co/


「Sketch | 译文」用共享样式创建文本系统

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36464/

(0)
交互精选交互精选
上一篇 2018-04-14
下一篇 2018-04-15

相关推荐

  • 交互设计(一)表单设计

    此文来源于网络

    2018-04-04
  • 房屋建造实例映射出的用户体验原则

    来源:摩客专访(公众号)翻译:Tangerine设计构架如何在创造吸引人的应用程序时产生更好的情感影响?设计理念并不是某一领域—专门为某个具有一定需求的人群提供解决方案的专业人士独有的。我们在任何地方都能看到设计,但我们总是把注意力集中在某些我们觉得有需求的领域。在过去的几年里,我一直担任一名用户体验设计师。而我从来没想过类似这样的话题,直到最近我住进一家旅店。房子是如何建造的房屋是我们的基本需求之一。我们根据我们的需求以及预算来建造房...

    2018-03-12
  • 最近很火的租衣APP用户体验报告

    以下内容并非广告,但是如果衣二三和女神派的营销部门看到的话,要不要考虑来主动给我发点广告费?其实租衣APP这个东西应该火了好一阵了。有我微信的宝宝们可能知道,我这个人有个很大的毛病就是喜欢买衣服。且买来并穿不了一两次,接着就开始在朋友圈各种亏本卖闲置。最近整理衣服发现实在太多真的不能再剁手了,因为根本没地方放。然后突然想到了公司一个客户和我说过她一直用一个租衣APP叫衣二三。看到这个APP的时候我的内心是激动的 --- 终于有软件解决我...

    2018-03-30
  • 【分享•客户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,客户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-02-11
  • 设计和记录用户体验的细节

    设计和记录用户体验的细节体验设计是产品开发过程中一个复杂、多用途、耗时的阶段。组织良好的流程通过减少误解使结果可预测来减轻团队压力,在本文中,我希望着重将主流方法映射到实际项目中,并且将可交付的成果归总在一起。阶段1: 构想这个阶段的目标是弄清楚客户的业务如何运作以及产品目标是什么。低保真原型是一种工具,它可以帮助你与利益相关方确认产品的心智模型,并讨论设计方法,在这一点上,我们正在寻找一个关于“我们正在建设什么东西?”问题的答案。附注...

    2018-03-31
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 【招聘】在专注用户体验的公司上班是什么体验?

    随着艾体验业务范围的逐渐扩大以及合作伙伴不断增长,我司也开始扩充人力啦!我们是谁?艾体验是一家为需求企业提供更具商业价值和科技未来的产品“大设计”服务公司!(base in天府五街菁蓉国际广场)作为一家“大设计”公司,时常需要对外提供高端产品体验咨询服务,创新前沿人机交互解决方案研发,并且不断沉淀分享产品干货。而成为“我们”的将是这样一群人:这群人,热爱互联网和产品,同时也热衷于观察生活,不放过身边的任何一个小细节;这群人,贯彻着生命不...

    2018-02-26
  • Sketch强大新技能: 支持多个设计师之间同步组件啦!

    ▵优设品牌号,旗下新品及内测邀请码资格均在此号,关注推送掌握动态,有机会第一时间获取。封面设计:Graphéine团队里多个设计师之间经常需要共用一些设计组件和元素,如果可以有一个包含这些组件的 Symbol 库,并且自动和所有人保持同步就好了。现在 Sketch47 就搞定了这个问题, 再也不用像过去一样通过发邮件、QQ 来同步了。如果你的团队需要多人共享一个 Sketch 组件库, 只需把这个包含公共 Symbol 的文件在你的 S...

    2018-03-02
  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • Excel表格常用快捷键大全之1-10个

    为了小伙伴能更懂Excel 快捷键的具体使用场景,小雅不是单纯的像网上看到的一堆快捷键堆上去就好,做了更详尽的解释,希望大家能喜欢!收藏一下,记住些Excel常用快捷键还是不错的!善用快捷键,新手到高手的蜕变!不废话,进入正题,本篇是1-10个快捷键,后续会陆续为大家呈现更多的Excel快捷键。第一,插入工作表默认情况下,我们新建一个Excel文档,只有3个工作表。3个sheet,即sheet1,sheet2,sheet3。如果这三个s...

    2018-03-17