sketch 如何规范的设置自己的字体样式库( Text styles )

简介: sketch 如何规范的设置自己的字体样式库( Text styles )

1、设定字体格式



image.png


快速改变字体:1)字体    2)更改字体     3)同步风格


每个主题下包含四种字体格式:(还可以创建一组暗色主题如图上第二行)


默认格式(通常设定80-100%透明度)


次级格式(50-70%透明度)


不可用格式(20-40%透明度)


强调格式(常常适用品牌色)



为什么不是改变颜色值而是设定透明度呢?


原因一:想要改变字体的颜色,只需要改变基准颜色值就可以一键全部改掉;


原因二:透明度可以在任何背景下更好的融合


如下图所示


image.png


2.设定颜色以及对象风格



设计前先选5种基准色


品牌色:很明显,这是品牌的颜色。


黑色:选定一种你将在设计中使用的基准黑色。我会避免纯黑,取而代之的是加入了少量品牌色的黑色(或者加入互补色)。看下图


image.png


在你的品牌色上覆盖上80-90%透明度的黑色。选取这个颜色作为你的基准黑。这是个小细节,却会产生奇妙的效果。


状态颜色


错误状态:红色的变种。这个颜色提示用户有东西出岔子了。纯红色有点过了,加上少许黄色或蓝色让这个红色看起来更舒服。


警告状态:黄色的变种。这个颜色会让用户警惕错误的发生。别选择太浓烈的黄,我一般选择带点橙色的黄,这样在白色背景上也能很好的看清。


成功状态:绿色的变种。这个颜色提示用户事情进展顺利。我喜欢app中的颜色偏冷,所以我会在绿中加一点蓝色。



image.png


从左到右:品牌色,黑色,错误状态,警告状态,成功状态


额外的颜色适合于表格或图片,但请选用你基准颜色之外的颜色。


对象风格


设定这个同样也是为了节省时间。对象,包括了你app中的任何东西,从卡片背景到列表条目背景。下图是我的一些对象风格:


image.png


3.创建页面和画板



这个很简单,但却能让你理清思路。再开始设计前,先决定如何组织你的设计:


按照功能:在食物app中,你也许需要一整页来存放“食谱”的画板,另一页来存放“个人信息”的画板。


按照用户角色:在阅读app中,你也许需要一页来存放“读者”的画板,而另一个页来存放“投稿者”画板。


按照工作流:在Uber的app中,你也许用一页来存放“订车”这个工作流程,而另一个页来存放“添加信用卡”的工作流程。


这上面提到的都可以,但要尽早决定,并坚持使用一种。




相关文章
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
278 0
css:网页引入字体@font-face以及动态加载字体
|
3月前
|
前端开发 开发者
关于 FontAwesome 字体图标库的 content 属性
关于 FontAwesome 字体图标库的 content 属性
28 0
|
4月前
css3快速完成重构title提示tip样式
css3快速完成重构title提示tip样式
|
8月前
|
前端开发
css--字体和文本样式
css--字体和文本样式
|
8月前
|
前端开发 程序员
css制作的tip提示框
css制作的tip提示框
205 0
|
10月前
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
296 1
|
前端开发
CSS基础之字体样式
CSS基础之字体样式
159 0
CSS基础之字体样式
|
前端开发
css 修改默认滚动条的样式 小工具
css 修改默认滚动条的样式 小工具
css 修改默认滚动条的样式 小工具
CSS3文本字体相关属性
本文介绍CSS3文本字体相关属性的用法
87 0
CSS3文本字体相关属性
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用
305 0
Font-Awesome如何引入矢量字体图标