梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书

此文主要适读人群:梦想成为“全栈设计师”的你(偏向移动端产品)!当然设计都是相通的,即使你的职位是产品设计、交互设计、网页设计、平面设计也都不妨一看,相信你也可以有所收获!1、对app基础控件的认知
2、字体
3、配色
4、图标设计
5、标注与切图规范
6、排版的基础原则
7、简单的动效设计
8、走察规范
9、交互常识
10、项目文件管理
11、个人素材、资源库
12、开发常识
13、数据分析能力
14、产品常识
15、用研常识


此文主要适读人群:梦想成为“全栈设计师”的你(偏向移动端产品)!当然设计都是相通的,即使你的职位是产品设计、交互设计、网页设计、平面设计也都不妨一看,相信你也可以有所收获!

梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书

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

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

大纲如下(哪里不会补哪里吧):

1、对app基础控件的认知

2、字体

3、配色

4、图标设计

5、标注与切图规范

6、排版的基础原则

7、简单的动效设计

8、走察规范

9、交互常识

10、项目文件管理

11、个人素材、资源库

12、开发常识

13、数据分析能力

14、产品常识

15、用研常识

1. 对app基础控件的认知

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

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

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

2. 字体

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

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

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

3. 配色

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

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

4. 图标设计

关于图标设计,之前我有简单总结过,大家可以选择性查看《实例分析:图标设计4原则

这里我就不多说了。

5. 标注与切图规范

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

关于切图的命名规则之前菜心有总结过《APP切图命名规范:介绍一种通用的命名规则》,后期会对标注以及如何切图进行更深入的总结。

6、排版的基础原则

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

  1. 排版的要素:构图(视角)、颜色、字体、点缀。
  2. 排版的原则:对齐、对比、亲密性、重复。

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

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

7、简单的动效设计

会做点动效会给我们加分不少,尤其是做一些加载动画,这是我们经常会遇到的需求,关于加载动画的场景分类之前有总结过,不了解的可以自行查看《App加载动画知识体系:交互、视觉都需要掌握!》。

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

8、走察规范

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

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

9、交互常识

交互和视觉有很多交集的地方,比如控件的分类与定义、页面信息的布局方式等等,但是交互有很多值得视觉学习的地方,其中最重要的一点就是思维逻辑,对于产品的逻辑,他们要比我们思考的更加全面、透彻。至于他们如何思考,之前我也总结过一篇文章,大家可以选择性的查阅《做交互方案时,请注意检查这4个点

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

10、项目文件管理

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

梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书

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

11、个人素材、资源库

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

梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书

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

12、开发常识

作为视觉设计师,经常会和开发对接沟通,如果我们能了解一些关于开发的基础知识和他们的思维逻辑,一定可以避免很多不必要的时间浪费。在上次制作规范时,由于对很多开发逻辑的不清楚,导致执行过程中遇到很多问题,后来进行了梳理总结,总结地址《制作UI 设计规范时,你遇到的最大瓶颈是什么?

大家可以选择性查阅。

13、数据分析能力

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

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

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

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

14、产品常识

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

15、用研常识

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

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

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

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

2017,我们一起加油!

干货分享

腾讯多个产品的品牌书,大家可以研究研究,尤其是制作品牌规范时可以参考,isux团队的官网可以下载,但考虑到还是有很多同学不知道,所以我全都下载好了,放在了百度云盘,网址为:https://pan.baidu.com/s/1nv365YD (没有密码!)

 

作者:菜心(微信号:410628210  微信公众号:菜心设计铺),华为ITUX用户体验设计师(主视觉),3年工作经验,参与华为Welink、3MS、连长社区等多个项目的用户体验设计工作。欢迎大家互相交流关注。

本文由 @菜心 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24888/

(0)
CatherineCatherine
上一篇 2017-05-10 02:04
下一篇 2017-05-10 03:48

相关推荐

  • 腾讯多个品牌LOGO重设之思路

    作者:飛兒     在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。…

    交互专题 2017-08-07
  • 用户体验五要素

    01战略层什么是用户体验:用户在使用产品过程中建立起来的一种纯主观感受。用户体验的重要性:给用户一个积极、高效的体验,他们会持续使用你的产品,产品满足用户某方面的需求并来盈利,帮助人们提高生活质量,提高工作效率,改善人际关系,等等。五要素:战略层、范围层、结构层、框架层、表现层用户体验要素的作用:要素之间相互作用完成任务,创建一个总体的用户体验设计。适用场景:设计:战略层→范围层→结构层→框架层→表现层用户体验:表现层→框架层→结构层→...

    2018-02-06
  • 阿里UED双11组织文化传播-为每位阿里小二制造快乐

    这个组织,从创意策划、设计体验方案、执行落地再到传播推广,各种角色无缝衔接。下面带大家探秘这个神秘组织—UED双11品牌传播团队。印象里…双11阿里组织文化传播设计不就是内部宣传么(简称内宣)。Too young Too simple,一次成功的双11背后,内宣就好比阿里小二的精神鼓励师,支(bi)撑(po)着大家不断创造新的历史(走过最长的路,就是内宣人的套路,此处应有掌声)。那么,今年内宣设计的策略和体验核心是什么呢?今年双11品牌...

    2018-02-02
  • 【竞赛结果】2017 年度UA创作奖 · 概念设计国际竞赛最终结果

    来源:城市建筑竞赛题目:UA城的滨水居住建筑2017年度UA创作奖•概念设计国际竞赛由《城市建筑》杂志社主办,哈尔滨工业大学建筑设计研究院承办。组委会于2017年11月发布竞赛题目,共收到672个团队的注册参赛信息,至2018年1月15日止,共收取375份作品。本届竞赛评审分初审、通讯评审、现场评审、网络公示、评审委员会复议等阶段进行。初审遴选出362份有效参赛作品,其中前8所通过全国高等学校建筑学专业教育评估的学校学生报送作品63份,...

    2018-03-27
  • 善用Axure写PRD:产品逻辑的五种呈现方法

    每天一篇好文章,2018年第2期不管是APP、web网站还是pc客户端的软件,流程&页面&交互&逻辑始终是最重要的几环,分享一下我呈现逻辑的几种方法,大部分PM应该也采用过类似的方法。一、直接不写逻辑最开始根本没有写逻辑的概念,只是用交互事件加上基本的页面跳转。当技术童鞋来问的时候,口述给他。经常会被鄙视。二、直接写到页面里开始学乖了,把一些逻辑直接写到页面里。不过很快就发现了弊病,某些逻辑不应该呈现给用户,只能给前后端童鞋看。同时也造...

    2018-03-27
  • Sketchbox:会画图就能使用的AR建模应用

    在目前的情况下设计虚拟现实和增强现实产品并不容易,仍存在挑战。Unity和Epic Games可以说是现在比较常用的编辑应用,帮助用户以非常精确的方式去编辑虚拟现实内容。但需要指出,这两者都是为已掌握相关技术的人群所提供的技术项目,虽然没必要会写代码,但是了解一些简单的原理和技术能达到的界限也还是需要的,从这方面看,设计VR或AR产品的门槛相对还是比较高的。最近,Y Combinator的最新一期项目中的Sketchbox可以帮助设计师...

    2018-03-23
  • 一个更适合产品迭代的卡片创意法

    本文是由58UXD的交互小组的工作总结文章,交互设计师常常需要进行迭代设计,为此,他们琢磨试验出一个更适合产品迭代的卡片创意法。收到消息通知→打开消息通知→查看消息→回复/其它操作接收(告知用户有消息需要了解)→阅读(了解更多消息详情)→反应行为

    2017-05-01
  • U+敏捷研发体系

    “研发是一项创造性的工作,卓有成效的研发需要优秀的研发团队来完成,优越的研发流程始终能够发现最佳的机遇,推出有竞争力的产品和服务,并以最快的速度把这些研发成果投入市场。”△ △ △ U+敏捷研发体系流程 △ △ △需求分析1研发体系中的第一个环节,这一阶段要求需求分析人员针对待开发软件提供完整、清晰、具体的要求,确定软件必须实现哪些任务。其中包含的敏捷建模,要求需求分析人员对现实问题的抽象想法构画出草图,以规避需求的不合理等问题。原型设...

    2018-03-30
  • 玩转交互设计,给景观来点生命力!

    景观设计从一开始关注项日的审美性,再到功能性,全社会对于它的要求已经在逐步升高。现代景观设计中,公园、绿地,甚至校园景观、风景名胜区等需要从单纯的生态意义中提升到一个更高的层次。在诸多国内的项日中,虽然将“以自然为题,以人为本”定为设计目标,但是往往停留在服务于人们行为上的舒适性、安全性,而忽略了人性中的更多需求。与此同时,人们每天被层出不穷的新鲜事物所包围,绿色环境对人的吸引力逐渐降低。在现代化工业大发展的背景下,人与人、与其他生物间...

    2018-02-07
  • Adobe的UX设计系列:如何为移动应用设计错误状态

    人非圣贤,孰能无过。当人们操作用户界面的时候,错误难免会发生。有时候是因为用户做了错误操作,有时候则是由于应用本身出了问题。无论原因如何,出现的错误以及对其处理的方式,都对用户体验产生巨大的影响。糟糕的错误处理方式以及无用的报错信息会让用户感到万分沮丧,甚至会导致用户放弃继续使用你的应用程序。

    2017-05-15