「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

相关推荐

  • 你真的了解交互设计吗?

    回顾2017年,我们发现交互设计受到越来越多学生的青睐,这个新型专业在国内的认知度与外国并不完全同步。为了给更多学生带来交互信息的普及,设想决定带大家预测一下在2018年,信息体验设计会如何发展、还有哪些值得我们关注的趋势。更简单的导航方式导航体验是2017年的热点话题之一。为了设计出顺畅的用户体验,导航扮演的角色至关重要。线性导航Linear Navigation为了简化导航体验,很多app和网站致力于创造线性的导航体验(即分布式),...

    2018-03-19
  • 【招聘】萧山众多高薪岗位专场来了,就在等你!

    萧山之窗移动生活由此开始....关注还在愁到哪里去上班吗?还在担心工资不够花吗?这里或许有适合你的岗位!2018萧山信息港小镇春季综合型人才招聘大会企业名称招聘岗位微医集团(浙江)有限公司资深Java开发工程师,搜索研发工程师,前端架构师,Java架构师,自然语言算法工程师,医学影像算法工程师,家庭医生,健康管理师,HRBP,客服专员浙江讯飞智能科技有限公司系统测试工程师,资深视觉设计师,视觉设计师,大数据工程师,高级交互设计师,研发架...

    2018-03-21
  • 用户体验与产品价值

    关注一下,更多精彩等着你户体验不等于用户可用性当你局限地将用户体验等同于用户接触UI时的可用性的时候,或者是局限地理解用户体验只是发生在用户使用产品过程中的时候,你就会说:有比它更重要的事情,比如用户价值、产品价值。是的,没错。如果产品没有用,即对用户没有价值,UI的可用性绝对不是最重要且,但是我们仍然得时刻提醒自己,可用性不等同于用户体验,可用性只是用户体验(使用中)的一部分而已。用户体验设计超越产品设计。用户体验设计包括组织开展用户...

    2018-03-03
  • 蓝鸽集团2018校园招聘,多岗位,提供食宿,年薪8-20万!

    蓝鸽集团是一家专业从事语言教育技术的高科技. 集团化企业。目前拥有5个子公司. 1个研究院. 3个科技园。在全国30多个省. 市. 自治区设立了200多个分支机构,现有员工1000余名,是我国语言教育技术行业的龙头企业和第一品牌。蓝鸽在2006年与广东省电视台合作承办了国家级“英语辅导”电视台。2008年被认定为国家级高新技术企业。2013年经国务院批准设立博士后工作站。2015年第一个研制成功了具有物联网功能的智能化多媒体教室。201...

    2018-04-08
  • 2017用户体验行业调查报告

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

    2018-02-14
  • Sketch入门教程,教你4步打造完美投影

    经常逛Dribbble,Behance还有很多外国设计网站的小伙们应该都会发现,流行了一阵子的扁平化风都带有一个很清爽的投影(diffused drop shadow)。比如像这样的这样的还有这样小伙伴们有没有自己尝试过去做呢?会不会觉得很简单?确实,使用Sketch的小伙伴儿们应该都知道,Sketch添加投影的方法超级简单,旁边Shadows按钮一点击,就添加了一个投影。但有个问题是,Sketch的投影不是很好控制,容易做出这种四周黑...

    2018-04-16
  • 人工智能对用户体验的影响

    最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以...

    2018-03-26
  • 【设计竞赛】2018UIA-霍普杯竞赛开题!扎哈事务所新任掌门人帕特里克 · 舒马赫担任主席

    编者按 :期待已久的2018UIA-霍普杯国际大学生建筑设计竞赛题目新鲜出炉啦!扎哈 · 哈迪德建筑师事务所(ZHA)负责人帕特里克 · 舒马赫担任本次竞赛主席并拟定题目。帕特里克 · 舒马赫Patrik Schumacher扎哈·哈迪德建筑师事务所负责人竞赛主题演变中的建筑Architecture in Transformation竞赛题目城市共生:定制化社区模块Urban Co-living: Customizing Modules...

    2018-02-02
  • 关于用户体验 生活才是最好的老师

    早早起床,天下去小雨,收拾完一切,带上我的花伞出门。今天的任务是买一双早已在网上看好的球鞋![我的主要需求]来到了步行街,街上的人还不少。我的目光在细雨的缝隙间不断的寻找着我心中的那个目标。偶然,在一个个华丽的招牌旁边,我发现了一个黑色的招牌,特别显眼!黑底白字虽然单调却不失档次,门内的贴画很简单,不是某某明星,仅仅是一双鞋子,在鞋子的表面,有几滴水珠。我不禁心中发起感慨,有意思。[广告展示的对比,不光是门头还是贴画,给我视觉上的冲击和...

    2018-02-07
  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30