设计分享

分享流程

graph TD
A[制作设计规范] -->|A1| B(制作设计组件)

B -->D[更新设计规范]
B -->E[开发制作开发组件]
B -->F[更新开发规范]
E -->G[设计规范落地]

制作设计规范过程可以帮助去总结自己的项目,

熟悉自己的设计风格

个人的设计风格可以在日积月累中渐渐体现.不断地在接受外界的内容,自己其实也在不断的转化.

加深对排版的感觉

因为手机的屏幕十分有限,所以相差微小数值的内容,看起来也很不一样.

不同权重内容icon

可以理解不同的字体和不同的权重内容该怎么区分.

  1. 设计语言设定包含了,设计原则、色彩系统、颜色系统、栅格系统、图形(图片、插画和icon)、字体、投影、动效等原则
    1. 规范的用处
  1. 移动端和网页的端的常用font大小及icon大小
    1. 随着流行趋势的改变和手机屏幕的变大,死板的设计嵌套是肯定不行的。
  1. 栅格系统的应用

    1. 网页端应用
    2. 移动端应用
  2. 组件的应用及助力

  1. 制作规范的常用方法以及规范在团队中的落地使用
    1. 探讨与开发对接的设计规范文档

1. 规范的用处

1. 使设计元素不那么杂乱

设计规范就是为了避免杂乱,使设计语言统一
同样是设计,不可能把淘宝的设计元素直接去套用在微信上面。
一个APP或者网站的设计可以包含数十甚至上百的页面,如果每个设计师根据自己的喜好建立了很多个pattern样式,在当前的页面看起来没问题,但是当和其他页面对比的时候才发现自己用了多少不同的样式。

较乱的组件使用

这是对开发资源的一种浪费,更是对于APP自身设计语言的破坏。

建立用户对于APP(品牌)的认知

用户在从打开APP的那一刻起,就在不断地对APP进行建立认知,就像是去熟悉一个陌生人。APP里面的设计元素和交互元素就像是陌生人发出的“语言”。这些语言不断在用户头脑中建立认知。用户知道淘宝是一个怎样怎样的APP,有着什么样的性格。

品牌认知

需要注意的是设计并不应该成为用户关注的重点

色彩系统
material design

颜色系统

一个APP的色彩系统就像是一个活动页面一样。

活动页配色
图形(图片、插画和icon)
扁平插画

image.png

渐变插画

立体插画
字体
iOS和Android系统的字体

字重

应该是也能从APP包里面导入其他的字体的吧

动效
动效曲线-page

动效曲线-插画

规范内容

2. 基础UI元素

手动输入参数
像素虚化
按钮
按钮权重

当我们设计按钮时,优先要从高度入手,再去定义宽。为了便于新手理解,我首先从高度上来匹配权重,分成高、中、低三类:

高权重:40-56pt
中权重:24-40pt
低权重:12-24pt
输入框的使用高度尺寸,常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤

高权重的按钮,类似登录页的注册、登录,购物详情页的购买,流程页中的下一步,它的最小高度应该从 40pt 开始递增,低于这个大小,那么这个按钮就很难在这个页面起到视觉支撑,因为感觉太细了。

最大宽度应该小于内容距离上下的 2 倍
而圆角的设置范围,不大于高度的 1/4

高权重

中权重
字体
英文字号

英文应用示例

在中文应用中建议使用的字号:

标题:28、24、22、20
正文:18、16、14
注释:12、11

中文应用示例
图标
高权重图标

中权重图标

低权重图标

图标尺寸

图标大小

所以,对矩形尺寸定义的建议:

最大:64、56、48
中等:44、36、32
最小:28、24、20

3. 栅格系统的应用

电脑端
image.png
移动端
外边距

列和水槽

12=24>6>8
8等分 网格 外边距 列宽 水槽
大小 8px 32px (750-32X2-24X7)➗8=65px 24px
移动端网格系统

3. 组件的应用

Humaaans的library

为什么能够那么快速的实现这些功能?因为设计师已经事先将这些东西用了两三天或者一个星期将这些东西做成了组件。
以后随时调用就可以了。

sketch组件库

开发可以同上述一样将代码进行组件化。这样对设计和开发来说都有好处。

对设计师的意义
保持交互一致性

保持视觉风格统一

便于多设计师协作

便于修改设计
对开发者的意义
降低耦合度

降低冗余

优化性能

便于多开发协作

便于差错

便于修改

如果说让开发根据设计师的组件去制作组件的话,那就需要设计师对于前端的搭建有一定的了解。

轻度组件化
轻度组件化

组件化开发有两种不同程度的做法。

先讲讲轻度组件化。它的主要思想是使用相同的html结构和特定的class名,并且用同一段css代码定义样式,用同一个js函数来定义交互。

引用同一代码

我们来看看上面这个登录框,下面3个代码块是它大致的代码结构。输入框在其他页面肯定也会用到,那么只需要与左边框里的html结构保持一致。各处页面代码中引用同一个css和js文件,至少做到了在一处集中管理样式与交互。但如果组件的html结构发生变化,修改的工作量还是会比较大。

重度组件化
重度组件化

重度组件化的方式可以解决这个问题,不过这就不仅仅停留在思想层面,对项目的代码结构都有一定的要求。
每个组件的html结构、css样式、js交互都独立封装管理,定义好框架和加载方式,内容在加载时从外部填充。

组件的独立封装

在重度组件化的项目中,每个组件都做到了彻底的独立封装。比如这个页头组件,它的代码存在于独立的目录下,这个目录包含了它的html结构、css样式、js交互、资源图、甚至自测试模块。

那么各处页面中要加载页头组件,往往只是一条语句,将数据传入这个已存在的结构中就行了。
组件如果要与外部进行数据传递,也应该以接口形式对外开放。组件内部是个黑盒,外部只需要了解数据的输入与返回,不必关心组件内的工作原理。

4. 规范的制作及落地

完整设计规范的示例
页面规范.png

控件规范.png

icon规范.png

字体规范.png

一个完整设计规范的制作不是一天两天就可以做出来的,需要更多的思考。甚至有可能是需要一周的时间,还需要后期不断去维护。
需求文档的制作也不是那么的简单。都需要人员投入和时间投入。

框架设计规范的示例
控件规范

font&color规范

间距规范

在使用过程中,发现布局参数上,框架间距的代号应与普通间距代号区分开,否则在界面大改版无法灵活地调整界面框架的间距和尺寸参数。分离框架代号(#WG)与普通代号(#W)后,研发工程师只要修改框架间距代号的数值就能快速调整框架,并且不影响界面具体代号的效果,极大地降低过往版本迭代中要逐个参数对比修改的工作量。

制作规范过程中的难题

  1. 规范文档和生产软件不能很好的联通,需要手动去查。
  2. 规范是非常占工时的一项工作。
  3. 规范的推广落地需要严格的执行甚至是加入考核标准。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342