一直以来我一直坚信一点：
UI 是开发的起始，UI 如何出图，采用哪种几个风格，配色方案，如何设计基础组件显示风格，如何复用组件组合及组合粒度，如何设计用户点击，手势交互，页面切换动画，数据加载，显示，切换动画........这都是决定了开发人员在 View 层如何设计，view 的自定义，view 的复用，以及相关的基础功能封装都是要和 UI 的设计思想是统一的，是根据 UI 的思路走的，UI 若是画家的话，我们就是那只笔。
自古千金买骨，良将难寻，优秀的开发人员难找，若是花些力气，金钱还是能找到的，但是优秀的 UI 设计人员那是圈行业也没几个的。我的感受，大多数公司 app UI 设计都外行，都是半吊子，这些不专业的干 app 的 UI 设计，真是会对开发造成很多麻烦，挖很多坑出来的。
我的想法：
既然 UI 的工具极大的影响开发的工作，别人干不好，不懂，没经验，那么我来，开发来，不是说让我们开发都去干 UI 的活，而是我们来指正 UI 设计中哪些不到位的点，我们来说，来点一下。这叫总体把关，相互提高，干好自己也能指定被人。我认为这是一条开发的进阶路线：开发+设计，属于混合技术深度扩展结合人才，未来主流公司是有大需求的，做好了，可以做产品经理，移动端经理，总监，资深开发，都是都前途的。
学习资料
饭要一点一点吃，事要一点一点干，学问要一块一块看
这块先放产品汪的学习资料，简友： Mandy权 | yufawu | 闽南小吃
UI 配色
配色是 UI 设计成功的一半，只要配色符合 app 定位，看着舒服，自然，那么这个 app 设计只要不是在操作，交互上反人类，那么这个 app 就合格了，可见配色的重要，所以这也是我们切入 Ui 设计的第一步
UI 的原子设计模式
前端 app 在 UI 层是高度抽象封装的，android 就是的 UI 界面就是由 style 、 theme 、 各种view 组成的， 主题，样式，控件在整个 app 层面来看都是高度封装的。那么相应的 UI 设计也要按照这个思路来才能和我们的代码设计无缝衔接，这就催生出了 UI 设计中的原子设计模式
但是奈何懂这个的 UI 设计实在太少了，这就造成了 UI 设计和我们的代码，样式设计，抽象，设计，编写，复用的冲突，我们抽象了太多的颜色，样式，view 但是基本很难复用，最后这一大堆的东西我们自己都搞不清是干啥的了，最提神的感受，我司的 UI 用了 20 多种灰色，实在让人无语。
原子设计模式是基于组件的设计方法，在6点上讲究设计复用：
-
一致性
包括颜色，排版，字体的统一
640.png -
元素
具体就是对应 android 中的各种控件， 应该设计成什么样子
640.png -
组件
是几个元素的组合，比如列表中的 item 就是一个组件
640.jpeg -
构成
是几个组件的组合，比如列表
640-1.jpeg -
布局、页面
相似的页面和布局应该遵循的基本样式
640.png
原文地址：“基于组件的设计方法”介绍
盒子设计模式
UI动效设计技巧
不总结真的不知道原来 UI 设计中有这么多动效，这些动效我们再未来都会朋友，各位开发的小伙伴们别等着 UI 来催啦，赶紧来看看吧
6种视觉风格
原文来自：如何用一套图形，做出6种不同的视觉风格
这里偏重图标等个， 作为发开人员，我们和 UI还有测试 ，产品本质上一条名为： app 工厂化的生产线上上下游不同的岗位罢了，开发是下游种最重要的位置，我们想要更上一步又不想跳出这个圈子，那么了解掌握整条生产线的各个环节自然是不二法门，很多岗位其实是这条生产线不同位置的组合，是的越往上越是更多环节的组合
所以啊，从小开化寺了解，只要我们有心机，努力抓住每一次，甚至创造和其他岗位交流讨论学习的机会，很快我们就可以多他们有一个全面的了解，这就是“ 面 ”，然后自己分析自己需要精研什么，先从图标 UI 风格开始
图标 UI 风格简单来说分为 6 种风格：
扁平风格 | 断线风格 | 矢量插画风格 | 插画风格 | 轻拟物风格 | 艺术风格
-
扁平风格
使用矢量工具，使用点，线，布尔运算绘制图形，元素越少颜色越少，采用同色系配色，可以适当加一些描边进来
-
断线风格
在图像上使用断点，断点采用间断过度，用月牙百变模拟光源效果，加上一些简单的符号，让画面更显活泼
-
矢量插画风格
英文字母，黑色，夸张的描边，黑色三角形的光源效果
-
插画风格
更丰富的颜色，每个图层加上杂色内发光效果
-
轻拟物风格
模拟真是光源，为每个图层添加基于真是光源的阴影，在真是效果的同时，又不能太过真实
-
艺术风格
带来致命梦幻的强烈明暗色调对比
归纳 / 梳理 / 先产品划分主次 / 后从用户视觉出发指定页面
如何在庞杂纷乱的需求和功能中，划分主次，更贴近用户的习惯好好整一个app 出来，我觉得这不单单是 UI 需要费心，更是产品，开发和全公司都要积极参与的，下面我分享一些 Nice 的文章带大家领略一下其中的思路
主要参考文章：复杂界面的布局设计
- 把需要展示的信息都列出来
先不考虑信息之间的关系和顺序，大致列出即可。主要信息一定要列出，优先级较低的信息不用100%覆盖也没有关系
以Facebook为例，首页需要展示的信息有：
- Logo、搜索、用户信息、导航、Explore功能列表、发帖发图、最新动态、朋友推荐、语言选择、网站声明、聊天板、我创建的、设置、注销…
- 从产品策略的角度整理信息
与对这个产品比你更了解的人讨论（如产品经理），从产品策略的角度将这些信息进行分组归纳（这时还不需要过多考虑用户）：
- 基础功能：搜索、导航、设置、注销
- 基础信息：Logo、用户信息
- 主要功能：发帖发图
- 主要信息（不断更新）：最新动态
- 重要功能：聊天板
- 重要信息：朋友推荐
- 辅助功能：我创建的、Explore功能列表
- 辅助信息：语言选择、网站声明
- 从用户的角度整理信息
与用户（或潜在用户）交流，观察他们对这些信息的真实想法。因为越贴近真实心理越好，所以可以用一些口头话、感性的表达方式：
- 可能是我使用这个东西的唯一目的：最新动态
- 我常用的东西，越方便越好：发帖发图
- 必须有，但我通常不会仔细去看：Logo、搜索、用户信息
- 如果有动态我就感兴趣：聊天板、我创建的
- 我想要时才回去找：设置、注销、语言选择
- 我不关心，偶尔可能看一眼：朋友推荐、Explore功能表
- 这东西需要吗：网站声明
- 根据用户心理调整按照产品策略整理的信息
- 产品策略中的重要功能“聊天板”根据用户反馈，除非有动态否则不会关心。所以放到辅助功能里。
- 产品策略中的重要信息“朋友推荐”根据用户反馈，并不会主动去看，所以放到辅助信息里。
- 再将其余的信息结合用户关心的优先级前后排列。
- 调整后，信息的分类变成了这样：
- 基础功能：导航、搜索、设置、注销
- 基础信息：Logo、用户信息
- 主要功能：发帖发图
- 主要信息（不断更新）：最新动态
- 辅助功能：聊天板（策略重要）、我创建的、Explore功能列表
- 辅助信息：朋友推荐（策略重要）、语言选择、网站声明
上面是我抄过来的，一个复杂页面的布局设计就是这样思考解决的，思想先于思路，思路决定做法，做法决定产品，我们得先知道怎么办，为什么才能积极深入
如入深山，先窥全貌，再细探索
Android ios 差异
如下图，参考：移动端（IOS、Android）APP的差异性以及规范整理
- ios 的 1.5x 切图 = android hdpi
- ios 的 2x 切图 = android xhpi
- ios 的 3x切图 = android xxhdpi
更多切图尺寸看这里
android 和 Ios 的差异总体上来说就是 MD 设计规范和 Ios 设计规范的差异，可以从阴影，导航，配色3个角度来分析
- android 大量使用 Z 轴来模拟真实自然界的存在感，这就是阴影，感官效果是可以突出某些部分，比如：Fab 按钮1
- 导航体系上的差距最大，Ios 统一使用底部 tab 导航，但是 android 的 tab 过多，使用顶部导航+滚动联动动画的方式，Tab 过时时采用二级细分页面，个人中心，设置一般都整合到侧滑页面
- 配上来说，Ios 很保守，扁平的小清新风格，颜色以但颜色为主，很克制。反观 MD 提倡使用高饱和度的对比色来提升产品的视觉表现力，也就是俗称的大色块，同样的一个功能，从底部栏背景色、插画到按钮，我们可以发现 iOS 在色彩的使用上比较克制
MD 风格注重节约空间，以提供最大的内容展示空间给用户，比如优化 tab 数量，结构，侧边栏，去掉底栏，内容区域连贯，没有分割感，功能 tab 在最上面适应用户习惯，这里 MD 更加贴合前端 Web 的展示效果
详细对比可看：
UI 样式统一
这里放一些我找到的示例，一遍大家理解，并提供素材刚和方案去和 UI，产品撕逼
