「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

相关推荐

  • 良好的用户体验不一定是品牌成功的关键

    一项针对品牌魅力的新研究表明,良好的用户体验不一定是成功的关键,因为品牌完整性受损可能会超越公众的看法。 这是对四个市场10,000名消费者的在线调查的结果。这项研究从认知、目的、诚信、慷慨,勇气和交付的六个维度检查了知名品牌。分析表明,与消费者的动态关系是短暂的受欢迎,还是长期的忠诚之间存在的真正区别。乐高式最具实力的品牌,一直让顾客感到满意。相反,FIFA被评为得分最低的品牌。另外,苹果在美国排在前十位,在英国排在第十六位。尽管其创...

    2018-02-26
  • 一文看懂用户体验五要素

    《用户体验要素》是美国AJAX之父Jesse James Garrett的经典之作,被称为互联网入门必读的书籍,系统介绍了产品用户体验设计的模型。原作第一版完成于2002年,距今已经16年了,本书的最初是针对网页设计写作而成,但在这16年间,从internet到APP再到移动互联网,这个理论都能适用,越来越被称为经典,可见其在当下以及可见的未来,都具有普适性。因此,学习下用户体验的五要素还是很有必要的。用户体验五要素是将产品设计的过程抽...

    2018-03-17
  • Axure教程:实现类网易云音乐APP播放效果

    整体效果截图首页:视频播放:我的音乐:朋友:音乐识别:音乐播放:实现本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。1.原型共有11个独立页面:依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。2.音乐识别界面效果实现分析:1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量...

    2018-03-24
  • 什么是交互设计?这篇文让你彻底弄清!

    达内UI设计,中国UID课程标准制定者通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽...

    2018-04-08
  • 互联网产品经理要看哪些经典书籍?需要准备什么?

    入行产品经理所需的准备目前,互联网产品经理的社区很多,里面有海量的信息,如何修炼成为一名优秀的产品经理的经验也是林林种种,笔者也阅读不少,获益不少。今天,笔者并不是谈如 何成为一名优秀的产品经理,成为优秀的产品经理只是第二步,入行才是第一步。笔者作为一个做了一段时间产品的人。谈谈入行产品经理所需做的准备。前提:做产品,关键是要发现用户的需求点,发现用户的痛处~~关注互联网动态和产品动态:1 每天阅读新浪科技或者其他门户网站最新的互联网资...

    2018-03-14
  • SEO营销之浅谈用户体验

    好的产品不是做出来的,而是改出来的。任何一个产品都不可能一招致胜,都需要不断的打磨,改进,尝试过失败之后,才能更为光彩的进入用户的视野。在这个反复修改的过程中,大家提到最多的词恐怕就是“用户体验”了,没有之一。今天,山哥就来跟大家交流一下我对“用户体验”的理解,希望各位看官手下留情。什么是用户体验标准定义:人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。通俗讲法:这个东西好不好用,用起来方不方便。总的来说,用户体验是用户...

    2018-03-23
  • 每个用户体验设计师都要懂的UX移情图

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cnEmpathy,同理心,或者说移情,是UX设计师在为产品进行用户体验设计的时候,最强的能力和工具之一。移情是人类情绪和心智中最重要的功能之一,在很多时候,它是产生情感共鸣和理解的基石,它也是改善用户体验的重要途径。通常我们所说的换位思考,就是移情。借助移情,设计师站在用户的角度来看待问题,了解用户的需求,理解用户的心态,这是改善用户体验的第一步。在...

    2018-02-01
  • UED专访 | 李冀:建筑设计的唯一性与多样性

    📌 编辑 | XK P.S建筑行业之所以能百花竞放是因为有人独树一帜,自成一派有人匠心筑梦,执著务实在各展所长的事务所里李冀的原地工作室像潜生的植物一样有着自己的节奏与坚守静默地成长着……©UED我们常说懂一个作品应是知其然并知其所以然。本次我们专访内容围绕李冀及其原地建筑事务所作品展开,以长白山河谷别墅群等作品为切入点,尽可能多地去探究建筑建造过程的一些原由故事,倾听设计师还原当时的设计思路,了解作品从无到有精细入微的生长。也许你会因...

    2018-02-08
  • 作品集讲座 | 交互设计与工业设计的关系?

    专注艺术留学作品集辅导前几期克瑞斯带同学们分析了景观设计、建筑设计和室内设计三大专业。今天为大家分享艺术作品集比较热门的交互设计和工业设计专业,对于交互设计,许多同学们都不太了解,甚至因为同样涉及到产品,因此容易和工业设计混为一谈 ,今天克瑞斯就来跟大家详细讲一讲交互设计与工业设计的区别,希望同学们在选择专业上更加清晰明了。如今的工业设计变得非常的宽泛,它本身就是一个非常需要人们来思考的概念思维,并且它的设计思维都是从产品的整体外形线条...

    2018-03-31
  • 关注用户体验的酒店设计永不过时

    目前110000+人已加入品筑设计位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极...

    2018-04-10