「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

相关推荐

  • sketch 也能快速绘制轴测视角

    轴测图(isometric),这种能同时反映物体三个坐标面形状的表现手法,让原本停留在二维空间的构想扩展到了三维世界。宛如蛟龙得水,一跃获得了大家青睐。除了具有差异性的展示效果,其应用范围也很广。插画、图标、界面…… 不用惊讶,我们早晚是要步入虚拟化时代,三维呈现是大势所趋,轴测图是这场革命中一个微妙的平衡点。作品来源:追波Shirley for UIGREAT很多朋友绘制轴测图都愿意用 AI,其次也是 PS。但实际上,Sketch 也...

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

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

    2018-03-30
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • 独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网版版平(m.toutou.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔手机注单...

    2018-03-15
  • 用户体验至上?也许并非如此 | 动点圆桌会

    动点科技 | ID:technode大家晚上好,我是动点君~近日,有网友反馈,微信朋友圈疑似屏蔽抖音短视频的内容,内容仅本人可见。但当晚24点之后,抖音小视频的内容分享到朋友圈又恢复了“所有人可见”。对于网友反映的这件事,微信团队已经做出了回应。腾讯公关总监张军发微博称:“朋友圈一直有防刷频机制,过了阀值就自动不可见了。过了凌晨12点自动恢复正常。屏蔽之说不存在哈。”虽然微信方面对网友的这一质疑做出了否定的回应,但是竞争平台疑似屏蔽竞品...

    2018-03-26
  • 2017用户体验行业调查报告

    更多精彩内容:IPO新机制 催生市场四大变化最全关于企业上市流程知识汇总!(强烈建议收藏)由IXDC主办的2017国际体验设计大会于2017年7月12-16日在国家会议中心举行,作为全球极具影响力的体验设计交流平台,吸引了3000多名从业者参加,大会通过主题演讲、工作坊等形式充分交流经验,共享体验设计盛宴。而作为一年一度的用户体验行业报告发布也是大会重要的组成部分,备受从业者们关注,报告每年通过全面详尽的调查分析,系统梳理整个行业脉络,...

    2018-02-14
  • Axure软件实现登录界面交互小教程

    先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

    2018-04-07
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11
  • MECC UED年终惊喜大放送

    时间是让人猝不及防的东西;岁月是一场有去无回的旅行。岁末年初,我们用一场部门小聚来辞旧迎新。有美食,有美景,更有大惊喜哦~首先要感谢在背后默默筹备了1周的工作人员,感谢组织为大家准备了这个充满惊喜的小聚会~感谢她们!👏👏👏👏👏这次我们年末小聚的地点是位于岭南天地——Loccy餐厅三楼那一天天空很高,风很清澈,从头到脚趾都快乐(就是有点冷)清新的绿植、简约的装饰、精致的餐具~最吸引人的还是这满满的礼物堆!现场准备了许多小道具供大家卖萌装逼...

    2018-02-24
  • 100本UI设计/交互设计PDF电子书资源,UI设计师进阶必读书目,还在持续更新哦【024期】

    好素材,不加班今天小编为您精选了【100本UI设计/交互设计PDF电子书】大小:3.07G提供方式:百度网盘获取方式:请查看文章底部部分书籍展示领取素材的方式长按二维码回复:024长按二维码回复:024长按二维码回复:024无需分享直接获取素材热门素材推荐▶UI设计师作品集模板,PSD格式【001期】▶设计项目展示经典范例四套【002期】▶三套2.5D插画设计素材合集【003期】▶C4D设计素材包含建筑【004期】▶100多套欧美网页设...

    2018-05-07