整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
着Android Q 与 iOS13 先后发布深色模式，深色氛围一跃而上成为系统平台级能力，这不禁让我们重新认真思考深色模式对于文娱类产品有什么样的价值与机会？
2019 年优酷经历了一次体验设计升级，在前期的设计探索中，优酷设计团队尝试了各种方向，其中包括全深色的界面。而随着Android Q 与 iOS13 先后发布深色模式，之前随公众理解的深色氛围一跃而上成为系统平台级能力，这不禁让我们重新认真思考深色模式对于文娱类产品有什么样的价值与机会？
体验设计升级期间尝试的全深色方案：
深色界面在专注环境下与内容有更高的契合度 ， 更凸显内容、缓解视觉疲劳
深色的背景降低了内容周围元素的存在感，同时内容被凸显出来，尤其是视频和图片会变的更加清晰，这样会让浏览者更加专注于内容，这让深色界面与内容平台更加契合。
由于深色消除了白光对人眼的刺激，这样大大降低了用户在长时间的视频和图片消费中视觉疲劳。
深色界面更易营造品质感与沉浸感
在我们视觉升级的初期方案探索中，全深色方案是第一时间吸引到大家的。大家包括非设计的同学能清楚的讲出对深色界面的感受，包括“专业”“高级”“沉浸感”“很特别”。大家为什么会有这样的感受，我尝试找到了一些线索，我们对深色界面的认识来自于专业软件、游戏、科幻电影给我们留下的印象。
深色界面更易建立填充感
白色背景的心理认知映射至日常生活的白纸和笔，白色在日常认知中是代表“空”，所有白色上的细微色彩变化都被理解为“添加”。而深色本身被理解为一种填充背景色，其认知属性与其他页面元素跟接近，从而让页面的填充感更强，这在一些信息匮乏的页面会更明显。
同时需要注意的一些点：
（1）文字的信息占比决定了是否将深色界面作为默认主题
几乎所有的图片编辑和视频剪辑类以及部分视频娱乐产品像抖音、Netflix等使用了默认的深色界面，但用我们也注意到这些产品的共同点是文字在产品中占极小的比重。原因是光线充足的环境下，白底黑字提供了最佳的可读性，而黑底白字不仅降低了可读性，同时有研究表明更容易产生视觉疲劳。所以要谨慎考虑文字在产品中所占的比重，来决定是否将深色作为默认主题。
（2）用户和平台都需要一个低成本开关
一个有趣的信息是“绝大多数的娱乐活动都发生在晚上”，优酷的数据也显示用户在夜间的分时活跃度和使用时长高于白天。而深色模式无疑能给用户带来更好的夜间使用体验，而文字在优酷中占有相当一部分比重，所以我们同样要考虑到白天文字的可读性。考虑到平台的技术实现成本和用户的开启成本，深色界面需要一个低成本的开关。对于深色模式价值的判断，帮助我们在优酷此次深色模式设计上获得更清晰的设计策略及方向。
Android Q 与 iOS13 先后发布深色模式后，我们等来了深色界面的“低成本开关”，优酷也迎来新一轮的设计升级。在着手之前我们首先制定了体验的目标和方向，以便在关键点上快速地决策并达成共识。
全局印象一致、降低实现成本、建立灵活可控机制
全局印象一致：一些体现产品独特性的视觉特征值得花费精力产出第二份设计做适配，让它们在深色模式下也看上去和谐，而有些低优先级的但成本较高的适配可以降级处理或不做处理。深色模式不需要建立一套新的色彩层级关系，而是延续原有的色彩层级关系，只是使用了深色调的配色。但过程中如果发现原有的层级有可优化的空间，也不必大动干戈，因为深色模式之后，对于色彩的调整变得更加全局、彻底、简单。
原有的深色定制的主题场景保持不变，不受深色模式的影响。例如高清频道、会员首页、导看场景、沉浸播放页、运营场，这些场景使用特殊的主题体现特定的的产品目的和视觉感受，应该保持固定心智，不需要有模式的切换。少儿场景可以定制特殊的深色模式，原因是深色会给儿童带来负面的心理影响。
降低实现成本、建立灵活可控机制：深色模式涉及的场景与团队非常多，按照常规做法会耗费巨大的开发成本。我们利用视觉产品化能力，将视觉属性与框架布局分离并与开发逻辑相互对应，通过SDK 的方式统一管理，一处替换全端生效，遍于未来控制并快速定义产品风格。同时，我们遵循了 iOS HIG 中的语义命令方式，这对于设计师和开发都非常友好，并且我们与系统的融合度会更高，避免未来因为兼容性照成的各种问题。
产品印象：尽量保留产品的核心视觉特征
深色模式的切换就像拉上了家中的窗帘，光线暗下来但不会改变壁纸和家具的固有色。我们主要对优酷五大栏目头部氛围和底栏图标进行了深色的第二套设计，让他们在深色上看起来和谐。
主背景色选择：保证与内容的兼容度
色彩框架：包容且一致
我们将现有色彩进行归类，并归纳出每个类型的用途，从而建立色彩框架。这样可以帮助我们确保同一用途的色彩包含的深色模式和浅色模式两个色彩组合的唯一性，而不是单个色彩的唯一性。例如：白色会同时使用在背景和有些按钮文字上，我们不能在深色模式中规定白色变成深色，因为在按钮上不适用。我们应该规定背景色的浅色模式是白色，深色模式是深色，这样按钮文字就不会受到影响。
值得注意的是要先抓住一般类型，再看特殊个例。类如：我们将文字、图标归纳为信息层并划分三个层级，而不是归纳为主标题、副标题、按钮文字、底栏图标、顶导航图标。
用一般类型归纳色彩的用途可以涵盖绝大部分的色彩类型，而特殊类型可以用场景、状态、组件等维度来划分，例如：“少儿一级背景色”、“可以隐藏的分割线”“黑色导航栏”。
色彩框架：
主要类型：
对比度的阶梯：清晰降噪
我们在背景的对比度上设置均匀的阶梯变化，这种均匀的变化有利于建立背景层级的秩序感。值得注意的是与浅色模式不同在深色模式下背景的视觉感受是逐步被抬高的层，海拔越高明度高。
文字的对比度阶梯则不同于背景，在深色和浅色模式下文字的对比度阶梯是趋同的。原因是我们希望主标题和副标题要有足够大的反差使主标题足够醒目，而副标题与置灰文字的反差则不需要那么大，值得注意的是需要适度提升次要层级文字的对比度。
更好的对比度阶梯有利于在复杂信息密度界面的视觉降噪。
可读性：跨场景测试
深色的外观很可能受到用户的喜欢，要考虑到用户在深夜弱光的环境中使用深色模式的同时也不能排除白天强光的使用场景，手机屏幕的自动亮度调节会给实际的比度带来影响。我们观察到 iOS 深色模式的设计提升了几乎所有元素的对比度，这值得我们有所考虑。所以尽可能在这两种极端环境中测试我们的最终设计，保证信息的可读性。
规范化：建立深色模式色板
基于色彩框架以层级划分色彩为主，特殊类型作补充，在对应的浅色模式的层级下添加深色模式的色彩。
同时我们需要在产品的真实场景中反复的对比尝试确保实际效果是满足要求的。
另外，一些细节上的处理仍然值得我们的关注：
图标：面型图标在深色下识别性更优
深色模式下线条型的图标有时会显得过于单薄缺少份量感导致关注度降低，为改善这种情况我们可以替换为块面型的图标。此外有研究表明多数情况下块面型的图标会比线条型的图标有更好的易用性，他们会被更快速的识别。
分割线和阴影：转换为填充色来区分
深色模式多数情况下对于层级的区隔来说，使用填充色会比分割线和阴影更有效。
深色模式不是简单的颜色的明暗变化的处理，它是一套全新的设计风格，涉及的场景与团队非常多，按照常规做法会耗费巨大的开发成本，如何快速实现优酷双端的深色模式适配是当前面临的主要问题。
优酷去年设计主导与开发共同搭建视觉产品化能力，设计侧针对优酷业务属性把视觉进行不同颗粒度的拆解抽象，把影响视觉风格调性的最基础属性（颜色、字号、间距、圆角、尺寸）进行了统一design token命名，设计与开发团队共同维护一套可扩展的视觉属性。视觉属性与框架布局分离并与开发逻辑相互对应，通过SDK 的方式统一管理，一处替换全端生效，遍于控制并快速定义产品风格。
在视觉产品化能力下进行深色模式的适配与落地相对来说比较容易。在两个风格的转化中主要需要适配：色彩、图片。
色彩：使用语义命名交付设计
整个优酷系统颜色体系分：静态色（在浅色模式下与深色模式下不需要变化的）、动态色（在深色模式下需要变化）。
动态色根据不同的层级进行重新语意化工程命名，底层还是保留静态色design token 。整个颜色会由一个sdk 进行统一控制，也保证了整体的一致性。
同时，我们遵循了 iOS HIG 中的语义命令方式，这对于设计师和开发都非常友好。语义命名实际上是为深色模式的动态色建立一个令牌，例如：命名一个叫“主背景色”的动态色，它实际包含了深色模式的主背景色和浅色模式的主背景色。设计师把“主背景色”标注在界面中相应的元素上，开发就可以实现这个元素两种模式的色彩切换，当然我们还要为开发同学准备一份动态色的对照表。
复用与滤镜
对于深色模式的图片处理，我们给出以下建议：
（1）设计侧尽可能一套图片适配两个模式, 例如，使用不透明度设置这类淡彩色可以同时适配浅色和深色模式，这是一种取巧的做法。
（2）开发侧可以选择代码滤镜
（3）对于一些无法复用的重要图片，需根据深色界面增加一套新的切图资源
工具化：设计的输出与维系
通常设计完成后与开发之间的协作是通过sketch Measure直接一键导出标注即可。
那我们对基础属性进行统一design token命名后，后续的标注设计要如何标注？需要对照表格手动标注么？开发怎么看design token？
盖亚是优酷设计主要在用的一个提效工具，不同于sketch Measure 导出RGB色值，盖亚导出标注会对属性的值进行符号化处理，显示属性对应的值的同时会显示对应的design token，从而解决了设计输出与开发实现的效率问题。
深色模式在用户体验中的价值体现还需要我们进一步的观察和思考，相信实现这一设计仅仅是一个开端，深色模式怎样跟文娱产品更紧密的配合，怎样结合内容和用户做出更多的洞察与创新是我们接下来的目标。
作者：文娱设计中心，公众号：AlibabaDesign（ID：AlibabaDesign）
来源：https://mp.weixin.qq.com/s/gj98pkA1uO-ckMwWgdkgRw
本文由 @AlibabaDesign 授权发布于人人都是产品经理，未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
次小编整理了2018年的移动UI设计规范，包含IOS和Android两个系统。
Part 1 设计前的准备工作
①合适的设计工具
Sketch
精不精通Sketch，就看插件用的溜不溜，推荐个网站：Sketch.cm
无论是学习Sketch，还是搜插件、找素材，都是Sketch使用者的优选项。
Sketch是OS X平台独占，需要下载Sketch可以到这个网站去下载。
这里推荐个Mac平台应用的下载网站，使用Mac的小伙伴可以去这里下：Xclient
我个人是很推荐使用Sketch做UI设计的，软件本身已经提供了大量的IOS和Android系统设计资源，配合各类插件，几乎无所不能。
Photoshop
相比于Sketch来说，体型胖了点，在UI设计上略逊一筹。不过因为Sketch是OS X独占，所以因为平台限制的原因，用PS设计也没有问题。
我很久没用它做UI设计了，也没啥可推荐的了。
②做好版本管理、文件归档的工作
专业水平不仅体现在设计能力之上，优秀的管理能力也是重要的职业素养。
合理规划好设计版本，进行明确的文件归档工作，有助于提高设计师的工作效率。
这里不赘述了，每个人有自己的版本管理方式，不过目标只有一个：清晰高效。
Part 2 关于手机的基础概念
这里的概念性内容不要强行记忆，理解即可，它是做移动UI设计的理论常识。
①基础常识：手机分辨率、屏幕尺寸、屏幕密度
手机分辨率：
手机屏幕的像素点数。比如750*1334、720*1280等等，细分还有物理分辨率和逻辑分辨率，这里不扩展讲解了，想了解自行百度吧。
手机分辨率牵扯到的就是工作时设计稿的尺寸，只要记住设计尺寸就可以了。
屏幕尺寸：
手机对角线的物理尺寸，单位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
屏幕尺寸和设计其实关系不大，主要是用来计算屏幕密度的。
屏幕密度(DPI或PPI)：
每英寸的像素点数。简单理解就是屏幕密度越大，画面越逼真细腻。
下面是屏幕密度的计算方法，范例是5英寸，分辨率为1920*1080的手机：
屏幕密度牵扯最多的是安卓系统，安卓手机屏幕本身的密度种类非常多，这也是导致了安卓系统需要提供多套切图的原因。(使用SVG格式图片可以解决多套切图和适配的问题，这个我们下面会提到)
Part 3 基础设计规范——IOS系统
这是苹果的开发者官网：传送门
这里有持续更新的最新设计规范和资源模板，虽然是全英文的，但并不影响阅读。
设计师应该学会从官方获得设计资料，这比其他途径获得的资料更加全面和权威。
下图是截止到目前，可能还需要支持的机型和对应的设计尺寸：
① 设计稿尺寸
只推荐750*1334的尺寸来做设计稿，这是向上向下都最容易适配的尺寸，包括用这个尺寸去适配Android版。
除了IPhone X的比例特殊外，其他的IPhone比例几乎差不多的，比较容易适配。
使用Sketch设计：
使用375 * 667尺寸即可，开发在Xcode里也是使用这个尺寸。
导出的@2x图适配IPhone 5/5S/5C/SE 6/6S/7/7S/8
导出的@3x图适配Iphone 6/6S/7/7S/8 Plus IPhone X
使用Photoshop设计：
画布就建成750 * 1334尺寸的即可，在这个前提之下，
导出原尺寸图片加后缀@2x，适配IPhone 5/5S/5C/SE 6/6S/7/7S/8
导出1.5倍图片加后缀@3x，适配IPhone 6/6S/7/7S/8 Plus IPhone X
②常用数据
下面的内容苹果官方提供的模板文档其实都有对应的数据，可以去官网下载。
字号使用建议(这个不是硬性规定，根据视觉效果酌情使用)
导航文字 34-38px
标题文字 28-34px
正文文字 26-30px
辅助文字 20-24px
Tab bar文字 20px
图标尺寸建议
APP应用图标，建议使用1024*1024尺寸去做，逐级缩小去应用到各种场景中。
SKetch已经提供了IOS和Android系统的APP尺寸图标模板，直接使用就可以了。
③ 界面适配
程序内部的功能界面：这种界面通过写成自适应的界面可以很好的适配各种机型；如果有特殊的布局要求，也可以让开发根据特定机型去调整，不需要单独为各类机型再做设计稿。
覆盖全屏类的界面：比如闪屏、启动页、引导界面、插画页面等等，这类覆盖全屏的界面必须要单独为IPhone X的比例重新绘制或者调整设计稿。
其他的IPhone机型，遇到这种界面，整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图就可以了。
IPhone X的安全区域：IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后，中间的内容显示区域。如果你不得不使用IPhoneX的尺寸做设计稿，请一定设置好参考线，不要把内容做进这两块区域内部。
④ 界面标注切图
标注切图纯粹是重复性劳动，但还要花费大量时间。不过现在配合SKetch插件，基本上实现了标注切图的自动化，所以效率已经提升了非常多了。
这里就不用实例说明了，有需要可以查看之前的文章。
———————— 简单理解标注切图的原理 ———————
1. 简单理解APP构成：
下图是IOS开发工具Xcode里的一个空白页面，图片的文字标注请仔细阅读。
本质上，开发写APP界面和设计做设计稿是一样的，只不过两者实现方法不同。
APP的构成远远要比上图写的复杂的多，我们这里使用最简单的理解方式。
2. 设计稿的标注
根据上图我们可以理解设计稿和程序之间的关系：
设计稿里的按钮、文字、图标、列表、背景色、线条等等所有的设计元素，
在Xcode里都有对应的控件，设计元素必须使用对应控件，才能在APP的界面里显示出来。
设计稿的标注，实质上是标注的各类控件的属性以及相对于其他控件的关系：
设计稿中：
程序的对应控件：
实际上各类控件的属性也要比这个复杂的多，这里是最简单理解的举例说明。
如今使用本地化插件Sketch Measure，几乎不用手工标注，标注导出HTML后，扔给开发，他们想看什么属性自己点击查看就是了，所以我们这里了解下标注原理就行。
而一些线上工具的插件，比如蓝湖、墨刀、Mockplus等等，功能更加丰富，各位根据自身情况灵活运用吧。
Sketch Measure去Sketch.im下载
3. 设计稿的切图
———————— 切图输出套数 ————————
IOS目前常用的还是输出2套PNG图片。@2x、@3x的后缀，是为了在Xcode导入图片资源时，识别对应机型所用的图片。
Xcode里提供了相应的位置，相同命名图片会根据后缀填入到对应的位置。
———————— 切图输出格式 ————————
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是对于UI设计来说，常用的图片格式就以下几种：
想具体了解WebP和SVG，可以查看之前的文章。
———————— 切图输出规范 ————————
前提：同一类型、位置的切图，请保证切图尺寸、规格一致，图片尺寸为偶数大小。
1.有操作功能、可点击的功能性切图：最小点击区域问题
苹果官方提供的能准确点击的最小点击区域：88 * 88，单位px。
小于这个范围也可以点击，但是点击不灵敏，体验较差。
对于比这个范围小的可点击按钮，周围需要用透明区域填充后再输出切图。
解释下为什么用透明区域填充来扩大点击区域范围：
图标这东西，对设计师来说没区别，都是图片。
但对开发来说，可操作和不可操作的图标是两种类型的控件，图标的样式不过是传给该控件的显示图片罢了。
可操作的功能图标在Xcode对应控件是UIButton。
对控件来说，如果不在代码里明确固定控件的大小、点击区域等等各类属性，设计师传给我多大的图，这个控件就会被这张图撑到多大。
你给我一张40*40的按钮切图，如果开发什么都不做，那这个UIButton在手机界面里就被撑到40*40的大小。
我也可以在Xcode里写几行代码，固定图片的大小就是40*40，扩大UIButton这个控件的大小变成88*88，这样这个控件的点击区域也扩大了。
但是一张规范的切图就能解决的事情，为什么还要在代码里再手动加几行呢？
一个可点击按钮需要加一行代码，整个APP就可能多加上百行上千行的代码。
规范的切图也是可以提升产品开发效率的。
2.非功能性切图，比如列表图标、说明图标等，按统一规格的最小尺寸切。
这么切还可以减少一些程序因图片资源大小导致的体积大小问题。
这类切图，对应的是UIImageView控件，就是一张图片，无操作，只是占位和显示。
所以你按照相同规格，最小尺寸切就可以了。
有朋友问：一定要切正方形的吗？如果图标都是30*20的，那我统一切30*20的行不行
答案是：可以，这个没有完全的硬性规定。虽然我是设计师，但也会去写一些IOS程序。正方形规格切图就是为了方便开发，当然还是推荐你使用正方形规格来切图。
但实际开发过程中，只要保证同一位置，切图规格统一就可以。
切图输出状态：
同一按钮、元素的不同状态，要明确命名对应状态之后，分别输出对应图片。
下图示例按钮的选中状态多出现在游戏APP中，这里仅表示说明。
———————— 切图的命名规则 ————————
不要使用中文、特殊字符，请使用英文、下划线、数字对切图命名，数字不要打头。
命名方式尽量清晰，推荐采用：种类_位置_功能_状态
示例说明：btn_homepage_seach_normal@2x.png
开发看到就会明白：这是位于首页，处于正常状态的搜索按钮2倍切图。
Part 4 基础设计规范——Android系统
这是Android Material Design中文版的地址：传送门
Android的官方地址资料不容易过去看啊，这里也就不放官网的地址了。
Android这里就不放下载地址了，因为官方的下载链接可能不是所有人都上的去。
Android不整理各类机型的尺寸规范了，数据零散，难以整理。所以我们从屏幕密度这里理解设计规范就可以了。
①Android手机屏幕密度
上文我们提过屏幕密度的计算方式，安卓手机因为各种屏幕尺寸和分辨率，导致如果单纯按照数值计算，可能屏幕密度种类会多到让设计师崩溃。
所以为了解决这个问题，安卓手机出厂时，屏幕有自己初始的固定密度，系统会根据这些屏幕密度自行适配，下图是对应的屏幕密度表：
②Android的开发单位以及设计尺寸
正因为Android手机分辨率多样，为了保证同一设计在不同屏幕密度的手机上显示效果一致，Android系统使用了下面两个单位：
dp：android开发单位，相当于比例换算单位。使用该单位，可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果；
sp：android开发文字单位，和dp类似，也是为了保证文字在不同密度的屏幕上显示相同的效果。
当屏幕密度为MDPI（160DPI）时，1dp=1px
当屏幕密度为MDPI（160DPI）时，1sp=1px
按照上面两个公式的换算，同样dp大小的图片在不同屏幕密度的手机上如下图所示，
基本可以保证图片显示效果在各类手机上相同。
设计稿尺寸：
通过上面的分析，在xHDPI这个密度等级下，倍数关系为2，推荐使用720*1280尺寸做设计稿，换算方便，适配容易。
不过目前的现状是，如果公司的产品有IOS和Android两个版本，基本上设计师只会做IOS的版本，然后套用给Android，这样做也是可以的。两者的切图，在这个设计尺寸之下是可以通用的。
③设计稿的标注
推荐使用dp和sp进行标注。但是呢，如果你用720*1280做设计，使用像素单位标注，现在也不会影响什么。
因为前面已经提到过IOS的标注了，这里也就不再赘述了。
④设计稿的切图
理论上，对于Android系统来说，如果你想完美适配各种机型，应该为不同的屏幕密度提供不同尺寸大小的切图，而Android的开发工具也为不同的屏幕密度提供了对应的资源文件夹。
但实际上，并不需要提供上面密度表那么多套的切图，程序安装包的大小基本就是由于图片占用了太多的位置。
所以需要提供多少套图片，请和公司的开发沟通，确定你们的产品实际支持哪些屏幕密度。
图片格式：WebP和SVG
我个人是推荐现在为Android系统使用WebP格式，体积小，显示效果好；
而SVG这种矢量图片格式完美解决了Android多套切图的问题，一套切图，完美适配各种屏幕密度。
最小可点击区域：
48dp：这和IOS的最小点击区域性质是一样的，都是考虑到手指点击的灵敏性的问题，设计可点击控件的时候要考虑到这一点。
更多的注意事项和IOS切图是相同的，这里不再赘述了。
Part 5 UI设计师的职业道路
如今的移动UI设计行业已经很成熟了，针对移动UI设计的便捷工具层出不穷；移动UI设计的理论体系知识也已经渐渐完善。但这些都是外部因素，社会发展了，我们跟着一起向前适应就好了；
但对于设计师工作能力的提升，还需要有明确的方法体系，更要有清晰的职业规划！
很多设计师工作了几年，却一直在原地踏步，苦苦挣扎，甚至没有职业目标。
目前我工作5年，就从我自身的体会来分享我自己的方式，当然精英设计怪就别跟我较真了，我代表的是那90%还在向上努力爬的普通设计怪~
工作能力，不仅仅指的是自身的专业技术水平，还包含了各种综合性能力，请务必对自己有明确的职业规划和能力发展轨迹。
———————— 工作0~2年 ————————
这个阶段对于新人来说，是一个设计能力和工作经验的快速积累过程，不夸张的说，这两年内的经验可以决定你之后的职业发展道路是否顺利。
此阶段目的：提升设计专业能力、完善理论知识、积累实际项目经验
这个阶段就别想着一专多能了，先把那个“一专”搞好就可以了，当然不是不让你学习别的知识，而是说重心应该发在提升目前的专业能力上。
提升设计能力：
一方面，通过公司的实际商业项目提升能力，这个没什么可说的；
另一方面，业余时间务必进行大量的作品练习，无论是临摹、还是重设计都可以，目的就是一个：量大 从优！
临摹请用高质量作品，临摹一堆垃圾还不如不做，临摹请务必做到99%以上的相似度，不然那不叫临摹，临摹的过程是考验软件功力、设计技法能否完美复制的过程。
重设计请使用成熟知名产品，不要重设计一堆垃圾应用，成熟产品每个界面的布局、样式、功能、逻辑都是经过深思熟虑后呈现给你的。
重设计的目的是要体会产品背后反映的设计意图，不是为了重设计而重设计。
所以重设计之前请自己思考原产品这么做的目的再动手。
完善理论知识：
没有理论体系方法的支持，在设计道路上是走不远的。
现在关于UI设计的知识网站已经很多了，当然不局限在这类专业性网站上。
人人都是PM、UI中国、25学堂等等很多这类网站都是学习理论知识的好地方。
当然，你也可以关注我嘛~（给自己打个广告，吼吼~）
———————— 工作2~3年 ————————
3年对于互联网从业者是一个坎儿，其实这是相对于职业规划来说的。
通过前两年的积累，对于UI设计本职工作已经可以胜任了，接下来的要考虑的是个人的职业发展规划了。
此阶段目的：拓展技能、明确职业目标、为进大厂做准备
拓展技能：
这个阶段可以考虑“一专多能”的多能了，作为UI设计师，可以学习的东西实在太多了，交互、动效、产品设计、开发等等。
不要求你达到那些专业从业者的地步，你要学到专业程度，还干什么UI设计啊。
目的是为了拓展自己的技能树，为自己提供更多的竞争力，这个习惯要一直保持伴随之后的工作……
明确职业目标：
设计师最怕的就是迷茫，如果说前两年因为刚入行，对行业，对自身都不完全了解，那情有可原。但工作两年后，对自身的情况再不清醒那就说不过去了。
可以从以下方面考虑：
是始终坚持在一线岗位的设计技术大牛，还是想做设计管理者，亦或者想从UI设计师转职成交互设计、产品设计等等。
工作两年已经对自身，对行业有理解了，自己的能力是否适合设计岗位，对设计的热爱是否能经久不变都可以作为参考调节了。
为进入大厂做准备：
刚工作，可能限制于能力实力问题，委身于小公司。
但是！虽然我们身在小公司，但心要在BATJ TMD，
Apple、Google也不是不可以！
Skr！Skr！
这阶段可以为大厂准备一下，当然不是让你工作两年多就去面试啊，如果你的能力特别突出，就当我放屁吧~
意思是，可以以进入大厂为目标，综合性的考虑自身的缺陷并尽量弥补。
千万别以为就在小公司将就着干吧，反正拿的钱也差不多，大公司的滋味你是体会不到的。
拿同样的薪水，在小公司和大公司的感受可是完全不同的，小公司对个人的眼界、人脉、能力提升的帮助都不可能和大公司相提并论。
———————— 工作3~5年 ————————
对互联网人来说，3年一个坎，5年一个坎，都是职业规划的节点时间。
3到5年的设计师，如果你真的用心工作了，一个人可以实实在在的顶起来一个项目。
我们上面说，为进入大厂做准备。在这个阶段，可以考虑进入一些中大型企业，提升个人的综合能力、拓展人脉。
部分企业也比较喜欢要这个阶段的设计师，有工作能力，职业道路又刚开始，搞不好可以在公司培养起来。
此阶段的目的：提升综合能力、拓展人脉圈子
这时的个人专业水平其实已经不是问题，继续在工作中磨练积累就可以了；
这里需要的是打开个人在职场上的道路。
说实话，即使是互联网行业，搞技术除了要保证自身技术过硬之外，会不会发展人脉，能不能提升综合能力才是最后职业道路能不能走远走高的决定因素。
提升综合能力：
与各部门的沟通能力、对设计资源的协调能力、在公司业务上的话语能力、对项目的把控能力等等，都算综合能力，这是对内部的能力。
不要以为对设计师来说，我闷着头接需求，做设计就可以了。
这样的设计师，也许你可以踏踏实实当个接需求的小设计，但你永远也只是一个这类的设计，对于有更高更强的职业追求的人来说，没有帮助。
所以，张开嘴、迈开腿，一步一步尝试去推动自身进步吧，这个没什么技术性方法，必须要自己亲自去做。
拓展人脉圈子：
人脉对个人职业道路的帮助，远远要比专业能力的帮助要大的多，这是对外的能力。
设计师的圈子，说实话不算大。搞技术的，本身就坐办公室，而做设计的人本身性格也有一部分原因，但还是请你努力拓展自己的人脉。
对于自身的专业圈子，努力分享自己的设计经验、工作心得，总结自己的体会，发布到各类设计专业论坛上，积极的帮助别人，这都算一种拓展方式。
时间久了，就会结识非常多的设计界朋友，设计大牛也会逐渐注意到你，这些都是你职业道路上的宝贵资源。
还可以认识几个不错的猎头朋友，有好的职位，他们都会优先想到你的。
这也是我写的最后一篇关于基础规范类文章，也算是整理一下工作到现在的基础常识类内容，以后不再写这类基础文章了。
人总要进步的，设计师还是要靠干货作品来撑腰的，对吧。
以后发的内容都是我做过的实际商业项目，我会把设计经验和工作方法融入到这些作品实例里来写，这总比我单纯讲理论知识要强。
结语：今天就讲到这里了，希望本文能够对大家有所帮助。喜欢本文的小伙伴们可以关注一下小编哦~小编接下来会为大家带来更优秀的文章。我们不见不散咯！
1.Content Generator
下载地址：https://github.com/timuric/Content-generator-sketch-plugin
——用于生成人名、头像、邮件、占位文字、地理位置、随机数字等等
2. Subtle Patterns
下载地址：Subtle Patterns Photoshop plugin（是一款收费插件）
——用于给图层添加一些微妙的纹理效果
3.Rename It
下载地址：GitHub - rodi01/RenameIt: Sketch plugin to rename layers like a boss
——用于快速重命名图层，比如可以使用例如「%n」这样的语法快速命名一个连续列表，也可以自动使用图层尺寸来给图层命名，可以很方便地使用「ABC Icon 36px * 36px」来导出Asset文件。
4. Sketch Arrange Artboard
下载地址：GitHub - kenmoore/sketch-arrange-artboards: Layout all artboards in a grid with user-specified number of rows
——帮助整理你混乱的Sketch Artboards
5. Sort Me
下载地址：GitHub - romashamin/sort-me-sketch: Sort artboards and layers by name
——根据图层/画布名字排序，配合Rename It使用效果拔群！
6. Icon Fonts
下载地址：GitHub - keremciu/sketch-iconfont: This plugin helps you easily insert and manage icons from icon fonts.
——直接在Sketch里添加FontAwesome的图标
7. Find and Replace
下载地址：GitHub - mscodemonkey/Sketch-Find-And-Replace: Sketch 3 plugin to do a find and replace on text within layers
——对Typo狂魔设计师简直是天大福音！妈妈再也不担心我在50张Mock里打同一个错别字了！
8. Sketch Constraints
下载地址：GitHub - bouchenoiremarc/Sketch-Constraints: A plugin that integrates constraints in Sketch to lay out layers.
——通过标注父子图层间的关系，我们可以让Sketch设计文件也可以Adaptive Layout，快速将同一套设计扩展到多种尺寸。
9. Material Design Color Palette
下载地址：t32k/material-design-color-palette
——这个不用解释啦，在Sketch里快速生成Material Design颜色板的利器
10. Measure
下载地址：GitHub - utom/sketch-measure: A measure tool for measurements & design specs.
——在Zeplin和Marketch等工具出现前的Spec标注神器，但即使有了Zeplin和Marketch，我还是会有时候用它来手动标一些自动标注器说不清楚的Spec。
11. Marketch
下载地址：GitHub - tudou527/marketch: Marketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.
——Zeplin是一个神器，但是很多公司（尤其是大公司）出于商业机密的考虑不允许设计师使用在线的Spec标注软件，Marketch就是一个几乎完美的替代品，它是一个可交互的Spec文档，选择某个元素后，各项尺寸都会显示出来，右边栏甚至还有写好的CSS Code。自从用了它，和我厂的工程师沟通腰也不疼了、腿也不酸了！
12. Magic Mirror
下载地址：http://magicmirror.design/
——设计师有时候想把Mock放在手机/Mac设备上来营造某种效果（逼格），通常的解决办法是在Sketch里导出设计稿然后在Photoshop再处理。而Magic Mirror这款插件帮助你在Sketch里实现这一效果，再也不用切换到Photoshop来做Dribbble图啦！
13. InVision Craft
下载地址：Craft by InVision LABS
——这款插件绝不是一个内容生成器那么简单。它可以帮助你摆脱「Lorem Ipsum」，使用真实的产品数据进行设计，这对设计师来说简直太重要了！具体的操作办法可以去他们的官网看视频教程。
资源链接：
https://pan.baidu.com/s/1Jk6geJ2uB1Lj7EQtZS18OA 密码:gwxo
*请认真填写需求信息，我们会在24小时内与您取得联系。
