「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

相关推荐

  • 为了生存!QQ空间升级改变非主流印象,论用户体验的重要性

    关注留学签证移民的新资讯分享学习工作生活的新鲜事JT EDUCATION点击上方关注非主流、火星文、酷炫的QQ空间45度叫仰望天空、明媚的忧伤十年前,谁还不是个中二症患者?曾经的中二少年变成了大人大人不再点开的QQ空间也变样了面对微博微信这样的对手总要活下去这次QQ空间品牌升级重点在于对用户体验的设计哦?又是用户体验这个词真的是使用频率越来越高什么产品和服务都强调用户体验但具体说起来是什么意思呢?比如有人说现在发微博就像玩扫雷不知道发个...

    2018-03-06
  • 喊话优酷:求别再强奸用户体验了好吗

    之前,我给大家做过腾讯视频、爱奇艺视频国际版与国内版的应用对比,可以说,有着谷歌商店的规范,这些国内的视频软件巨头,几乎看不见广告。不管是视频开头那丧心病狂,长达120秒,两分钟的广告,还是应用内Banner处各种穿插的广告,都没有了。看视频没有广告,点开就看,这种感觉可以说是相当nice的。但是!谷歌商店里却没有优酷视频!emmm...颇有种老奸巨猾的既视感。所以,优酷用户不想忍受广告,好想只能开会员,破财消灾...但是!开了会员,也...

    2018-03-21
  • 通过微信学习用户体验和产品迭代

    这几天一直不停的开会,讨论产品,活生生的从运营的位置跑偏到了产品,似乎可以调岗了,andy一直在聊迭代的问题,想来想去,觉得还是微信做的最牛逼,那就翻翻历史,聊一聊吧。微信是2011年1月21日才面世的,为什么能在短短六七年的时间实现9亿多用户?在QQ已经在通讯社交行业占据霸主地位时,微信又是如何脱颖而出实现反超的? 在米聊率先面世创下不俗业绩后,微信又是如何后来居上的? 微信的成功对于产品人来说有很多值得挖掘、学习的地方。初期的微信和...

    2018-05-05
  • 交互设计中的情感化!

    文/金雅庆UI即User Interface 用户界面的简称。UI设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计是一种如何让产品易用,有效而让人方便的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理...

    2018-03-09
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 用户体验:网页设计中错误提示的五种设计方法

    每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。一个好的错误提示必备的3条重要法则:清晰地文本提示语放置在正确的位置良好的视觉设计清晰的文本信息1. 错误提示信息应该简明易懂提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且...

    2018-04-07
  • 设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

    让人人都懂点儿设计设计史论全文字数 :4689 | 阅读 时长:12分钟今天史论君为大家分享一篇来自interaction design foundation的文章原文作者:TEO SLANG    |    翻译:于于于Jessica编辑:Sujay Wu转载后台回复 :史论君把不好的设计和好的设计的反面例子一起看,不仅有趣,而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱,并让我们理解如何将设计理论转化为在现实世界...

    2018-04-07
  • 设计室开题 | 用户体验设计从入门到实战

    凯诺设计室(Canopy Design Studio)基于研究、实际项目而设立,每期6-12人、5-10周,在设计室讲师的带领下,从无到有生成完整方案,基于线上教学,打破地域限制,回归设计专业基于studio教学的本质,主题涵盖建筑、景观、城市、艺术、人机交互、用户体验设计等领域。*设计室开题请关注凯诺公众号或官网这是第38个凯诺设计室▽Chenyu SiWanderlust Inc 产品设计师加州大学圣地亚哥分校HCI学士凯诺优秀讲师...

    2018-04-07
  • 交互设计的重要性

    陌陌年会以疯x做伴手礼 引起互联网一片羡慕今天以陌陌产品为例讲讲交互设计的重要性在浏览页面时,左滑、点击返回按钮都可以回到上一页为什么发布帖子使用的是取消按钮而不是返回,也不可使用左滑呢如下:发布圈子非浏览而是在完成某一任务,点击返回或者左滑返回上一页,给用户任务未结束的负担,我只是返回了 并未取消任务的困扰

    2018-02-23
  • 巴塞罗那发团丨LES FONTS DEL LLOBREGAT探寻自然一日游

    看腻了古镇城堡?看够了沙滩海岛?那就跟随我们深入略夫雷加特河的源头Fonts del Llobregat来一次悠闲的探寻自然之旅吧!发团日期:2月17日行程价格:42欧/人行程包含:1.大巴游览2. 西语陪同导游3. 餐食午餐包括:escalivada炭烤蔬菜拼盘,加泰罗尼亚沙拉,咸火腿,白肠、黑肠、香肠拼盘,Escudella炖菜,酱汁bandejas de pies de poco,蘑菇牛肉+烤鸡肉甜品:Bunyols amb mo...

    2018-02-05