视觉设计知识体系规划书

此文主要适读人群:梦想成为“全栈设计师”的你(偏向移动端产品)!

当然设计都是相通的,即使你的职位是产品设计、交互设计、网页设计、平面设计也都不妨一看,相信你也可以有所收获!

之前我就说过关于高级设计师的必经之路就是建立自己的设计体系,那作为一名视觉设计师到底应该有怎样的设计体系呢?今天菜心就来分享一下自己的整个体系规划,这是一个非常旁大的系统,目前我也正在按照这个系统来逐一总结,当然这需要一段十分漫长的过程才能完成,但是只要我们有了清晰的规划,至少这份规划可以让我们清楚自己处在什么阶段,避免发生自我迷茫的情况。

这个体系只是我本人拟定的一份粗略规划(仅供参考),有一些点之前总结过,还有很多暂时没有总结,以后会陆续推出,希望大家持续关注!

大纲如下(哪gggggvvxxdgu[45

++*里不会补哪里吧):

1、对app基础控件的认知

2、字体

3、配色

4、图标设计

5、标注与切图规范

6、排版的基础原则

7、简单的动效设计

8、走察规范

9、交互常识

10、项目文件管理

11、个人素材、资源库

12、开发常识

13、数据分析能力

14、产品常识

15、用研常识


1.对app基础控件的认知

作为移动端产品的视觉设计师,我们首先要对app内的一些基础控件有所了解,比如说:按钮、导航、弹窗、浮层、表单等等,当然这里的每一项其实都有各自的一套体系,完全可以单独拿出来讲解,之前我有系统的总结过关于弹窗的分类,大家有兴趣的可以查看:http://www.jianshu.com/p/3f35badaae00,之后也会陆续更新其他部分的内容。

这里需要强调一点,如果有精力的同学可以看看苹果和安卓的系统控件,对我们深入了解app规范会有很大的帮助。

对于控件如何分类,其实想有一个十分精准的定位与分类其实是非常困难的,尤其是在现在双系统(苹果和安卓)趋于同质化的今天,我们更难单维度的去将所有控件精准无误的分类,但我们可以参考业界的规范,针对自己的平台属性去进行梳理与分类,还是那句老话,只要有理论依据并且对实际工作有指导意义,那就是正确的。


2.字体

对于字体,我们需要了解各个系统使用的默认字体,还需要知道一些常用场景下的字体大小,比如说:导航栏一般使用32、34、36px的字体大小,底部标签栏的字体大小一般为20px等等,这些内容在网上有很多资料,大家可以自行查阅。

当然对于平面运营类的设计,字体还有另外一套说法,我们会将字体分为以下几种类型:衬线体、非衬线体、手写体、书法体,当然还可以自己去设计字体,如果平时经常会接到运营类的需求,不防对每一种字体的特点和使用场景都好好总结一番。

温馨提示:电脑里的字体不用太多,每一种类别的字体装一两个即可,关键是将其用好。

关于字体的总结推荐看一下牛mo王的文章,链接如下:http://www.zcool.com.cn/article/ZMTQ5Nzcy.html


3.配色

对于颜色,至少我们要学会以下两点

(1)颜色的基本认知:http://www.uisdc.com/head-first-color-theory

(这一篇文章还不错,推荐一看)

(2)实际项目中,我们应该如何选取颜色、如何制定颜色规范,这也是我后期准备总结的内容。


4.图标设计

关于图标设计,之前我有简单总结过,大家可以选择性查看:http://www.jianshu.com/p/062929b72336

这里我就不多说了


5.标注与切图规范

以前在用ps做界面设计时,标注切图是个很麻烦的事情,不过现在随着sketch 的普及,标注和切图都已经趋于自动化,越来越便利,但是对我们的设计稿规范要求也越来越高。

关于切图的命名规则之前菜心有总结过:http://www.jianshu.com/p/6178216c65a3

后期会对标注以及如何切图进行更深入的总结。


6、排版的基础原则

这里提两个比较基础的知识点

(1)排版的要素:构图(视角)、颜色、字体、点缀。

(2)排版的原则:对齐、对比、亲密性、重复。

建议大家可以买一本《写给大家看的设计书》,写的非常棒,对于没有排版经验的小伙伴很有帮助。

如果不想买书的话,也可以在网上找找相关的资料与教程,或者等我以后总结。


7、简单的动效设计

会做点动效会给我们加分不少,尤其是做一些加载动画,这是我们经常会遇到的需求,关于加载动画的场景分类之前有总结过,不了解的可以自行查看:http://www.jianshu.com/p/845559ef6d08

至于使用的工具,其实很多软件都是可以的,我一般会用ps做一些动态表情,用AE做一些加载动画,而页面之间的交互动效大家可以使用flinto、principle之类的软件。


8、走察规范

关于走查,不同的团队有不同的规范与形式,目的是为了检查我们设计稿的还原程度,是视觉设计师必须要经历的工作环节,小公司的话可以直接和开发进行沟通并修改,但是在大公司一定要将问题点梳理清楚后发邮件给项目组与开发哥哥,有些不清楚的地方也需要当面进行阐述。

基本的做法就是将手机上现实稿截屏与原版设计稿进行对比,列清楚所有问题点,并告知如何修改,至于用什么软件,可根据自己团队的需求统一规定。


9、交互常识

交互和视觉有很多交集的地方,比如控件的分类与定义、页面信息的布局方式等等,但是交互有很多值得视觉学习的地方,其中最重要的一点就是思维逻辑,对于产品的逻辑,他们要比我们思考的更加全面、透彻。至于他们如何思考,之前我也总结过一篇文章,大家可以选择性的查阅:http://www.jianshu.com/p/9677e3bc4848

如果你觉得视觉设计是你的重心,以后也不想往交互方向发展,那就点到为止,了解一些基础即可,一定要把握好自己的方向,千万不要忘记主次。


10、项目文件管理

这里就是告诉大家,每个项目的文件自己都要管理好,不然后期随着文件的增加、版本的迭代,如果没有一个分类规则,找文件时非常麻烦。至少我们在做项目之前,需要建几个最重要的分类文件,如下图:

至于里面怎么细分,以后再找机会详细的讲解。


11、个人素材、资源库

定期要对自己的资源进行整理与分类,比如说你的网站资源,下面的这张图是我的资源管理分类,大家可以参考:

后期我会再详细的整理一下,和大家分享一些我收藏的资源。


12、开发常识

作为视觉设计师,经常会和开发对接沟通,如果我们能了解一些关于开发的基础知识和他们的思维逻辑,一定可以避免很多不必要的时间浪费。在上次制作规范时,由于对很多开发逻辑的不清楚,导致执行过程中遇到很多问题,后来进行了梳理总结,总结地址:http://www.jianshu.com/p/463c14b869f5

大家可以选择性查阅。



13、数据分析能力

对于数据分析能力,对我们要求不高,但至少我们需要知道网站流量统计指标大致可以分为三类:IP、PV、UV(现在IP已经很少用了)。

至于这三个概念是什么意思,百度一下,网上有很多。

我们还需要通过这三类数据的变化,简单分析出产品可能存在的问题及解决方案。举个简单的例子,如果进入支付页面的点击率有很显著的增加,但是平台的交易额却不见增长,那我们就应该很快分析出,一定是支付环节的设计或程序发生了故障,要么有程序有bug,要么体验有漏洞等等。

这就是一个最简单的数据分析。


14、产品常识

关于产品常识,对我们的要求也不高,短期内把需求分析、产品定位等等这些基础的知识点理解清楚就足够用了,近期会分享一篇关于产品定位的总结,敬请期待。


15、用研常识

用研常识也一样,也是一些基础的知识点,短期内了解即可,比如用户旅程图、情感图谱、问卷调查等等,不要过于深究,以免本末倒置。


以上就是菜心目前的设计体系规划,可能还不够全面,后面会慢慢查缺补漏。

我们为什么会经常迷茫,其实就是因我们不清楚自己的方向,不清楚自己的规划,不清楚自己所处的位置,这也是我做这份规划的原因,希望能给大家一点思路上的启发。

最后菜心还是想说:看的再多那也都是别人的,你的总结才是自己真正沉淀下来的,在这么一个信息爆炸的时代,我们缺少的不是信息与资源,而是一份专注与沉淀。2017,我们一起加油!

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

推荐阅读更多精彩内容