1.饱和度高，明度中间，刺激大；饱和度中间,明度高,刺激小
2.色相饱和度改变的是它的下面一个图层
3.饱和度越高色彩越亮，饱和度最低变成灰色
4.明度越最高越靠近白色，越低越靠近黑色

//混合模式
正片叠底:白色消失,其他颜色加深.黑色看不出变化
同原色叠低:协调融合美
重复正片叠底：正片叠底，画面更清晰

／／变倾斜
ctrl＋t －> ctrl 鼠标拖拽上边届中心的点

减去选区:alt

10 banner
15抠图
10海报

背景为灰色怎么处理
调节色阶

内容区（主页banner）
天猫 990 方正
淘宝 950
文字框宽1000之内
京东:汉仪字体
聚美:冬青 数字,英文:nobel

比例，破型， 减弱
海报尺寸：1920*500-600

画笔工具，按住alt 快速切换吸管工具

把字体嵌入到图片上,使图片镂空:
在需要镂空的形状上面添加蒙版,将想要的字体加载成为选取,关掉小眼睛.回到蒙版上,填充黑色

全景网 视觉中国 500像素 可下载图片
千库 png psd格式
黄蜂 电商淘宝
摄图网,花钱下载

通道的黑白灰,黑色表示有油墨(有颜色),白色表示没有油墨(没有颜色)

选区以内的在新建蒙版的时候自动填充白色,之外的填充黑色,删除

填充只影响当前图层,不影响效果; 不透明度,影响图层和效果.

ctrl +altshift+t

滤色：既能看见本图层的图片，也能看见下一层的图片

宋体也叫衬线体:有装饰
黑体也叫非衬线体:简洁,无装饰
曲与直:圆润-刚健
松散与严谨:随性(识别性低,适合小孩子)-庄严(适合阅读)
简与繁:古典-现代
chen via

粗细对比:同一字型,字体大小一致
字型对比:衬线体与非衬线体(宋体-黑体)
疏密对比:大标题:密集,辅助信息:稀松

兰亭，冬青，思远：有细体

ctrl＋t 调出字符

去色:ctrl + shift + u
返选:ctrl + i

A4 厘米：21*28.5,竖向 打印->分辨:300 颜色:cmyk 小字：8-10号

ctrl ＋ 回车，结束文字工具

Arial:相当于中文中的微软雅黑：后面有字体样式
Book:古罗马字体,衬线体
Times:罗马体,宋体,衬线体

在移动工具上,ctrl + 拖拽,框选

所有小字用”微软雅黑细体,或思源体正常”

alt + 上下箭头调上下字间距 ; alt + 左右箭头调左右字间距

详情页
淘宝，京东 宽：750
天猫：790
聚美 宽：790
手机端 宽:640px

调整边缘：ctrl ＋ alt ＋ r

京东拿大图的方法
右键－>新标签页打开图片->地址栏的n5改为n12
天猫
右键－>新标签页打开图片->地址栏的6060改为800800

淘宝
店招：1920120px
导航：192030px 字号：18-20
宽：950
轮播图banner：1920（900）＊550-650
优惠券在轮播图下
天猫：990

淘宝－20；天猫－10 代码：height:973
<div>:height:-20

聚美：字体：冬青
本单详情：宽790px 高不限，

手机端：优惠券：152*152（四个小块的）
海报：608px

盖印：ctrl ＋ alt ＋ shift ＋ e

中性灰：808080

=========================================================
1.＝＝＝＝＝＝＝＝＝＝
网站界面设计规范
页眉/banner(广告区)/内容区/页脚

屏幕快照 2017-10-23 上午11.10.01.png

运营或文案（提供文案信息，广告区banner的文案）－> 产品经理（网页原型图）－>网页设计师（界面视觉设计）－>前端开发

常用尺寸:19201080 1366768 1440900 1024768
页眉+banner 尽量720以内 不要超过800
搜索+导航+浏览器高度<200
搜索:30
导航:100

字号:正文中文14(英文16),最小12
主导航:20 24
按钮:18 20 24�

UI设计
字体:Mac-ios:苹方常规 苹方中黑 苹方系列
Windows-Android:黑体 宋体 微软雅黑 思源黑体

屏幕快照 2017-10-23 上午11.10.10.png

网站设计主要尺寸:1440900 19201080

屏幕快照 2017-10-23 上午11.08.59.png

常用设计尺寸集合:
常见企业类网站:1176 1170
电商购物类网站:1224 1220
新闻行业门户类:980
游戏娱乐:1600

屏幕快照 2017-10-23 上午11.08.54.png

图片大小：根据网格定宽，根据信息内容定高

icon最小: 20*20

字体大小
标题文字:+4 +6 20 22 24
内文:-4 -2 20
最小楼层高度:56 ->56+8 … （有色�（比无色大），无色）

屏幕快照 2017-10-23 上午11.08.47.png

网站设计基准尺寸:设计区/画布大小

屏幕快照 2017-10-23 上午11.08.37.png

2.＝＝＝＝＝＝＝＝＝＝
视觉设计规范
网页的网格系统:6列/12列(常用)/24/列
网格系统/栅格好处
视觉:画面整齐
适配上:大型电商网站更容易,好控制

网站视觉布局规范：
先整体后局部（以用户的使用习惯为主）
布局中的最重要概念是“盒子模型”
包含东西：盒子
不包含东西：内容

页眉设计
宽度：满屏
高度：200以内
设计的内容：品牌logo，主导航（100左右），副导航（30左右）以及联系方式，搜索，辅助功能性导航链接

屏幕快照 2017-10-26 上午9.33.25.png

导航功能：明显 明确 便捷 易用
全局导航：也叫主导航
局部导航：副导航（下拉菜单，或在一边）
实用性导航：标识链接，搜索引擎，网站地图 （类似书籍目录）

屏幕快照 2017-10-26 上午9.32.53.png

屏幕快照 2017-10-26 上午9.32.42.png

页脚：

屏幕快照 2017-10-26 上午9.31.32.png

屏幕快照 2017-10-26 上午9.32.04.png

页眉与页脚的区别：
1.页眉承载了整个网站的主要功能
制作时更突出
放置重要链接
2.页脚放置辅助信息

导航表现形式：
1.菜单 2.链接文本 3.按钮 4.面包屑 5.标签 6.图片 7.图标

导航设计形式上的3个要点：采用标准控件；重视导航、选项、内容的默认状态；用户切换功能的状态

页脚的设计
高度：无要求
内容：法律条款声名、版权信息、企业名称以及联系方式、搜索以及关联性的页脚导航和辅助信息。

内容：从上到下，左到右
网页板式（形式）：
1.一栏版，没有分隔，不受限制，尤其是智能手机和平板更适合。目前应用最多的
2.两栏版，在内容区域的旁边分割出辅助区域（导航，广告...）增加实用性
3.三栏版，内容的左右个增加一个辅助区域，适合在电脑和平板横向放，不能在职能手机上使用

3.＝＝＝＝＝＝＝＝＝＝
网站的流程
1.低保真(黑白图)->2.视觉规范->3.竞品分析(优势,劣势) 分析报告->4.效果图(最终视觉稿)
第一步和四步设计师主要做的

电商类网站:大型(淘宝天猫京东)130-300个页面(普通:70-90)
企业类网站:20-左右个页面
房产(有交互):70-90

UI:视觉 界面
UE:交互 交互逻辑和体验感
GUI:视觉+体验感会AE(做动效)

banner构成:1.背景 2.主体 3.文字 4.装饰(简单无装饰)
背景根据产品文案来选择；根据产品扩展思路，找出适合产品的元素，根据所学的美学知识进行搭配。
banner分为两类:
1.元素整合流
2.光影写实流

4.＝＝＝＝＝＝＝＝＝＝
字体的分类：
（1）男性字体：粗旷，硬朗，强劲有力，拐角分明，力量感。（非衬线黑体中的粗体）
运动类、男性的日用品、竞技类、摇滚、体育用品、营销活动、
金属......
（2）女性字体：正方中倩简体、方正正纤黑简体、张海山锐线体简、兰亭黑－简（带衬线）
爱情、女性杂志类、
（3）孩童：方正准圆简体、造字工房悦黑GOVI、华康海报体W12(�P)、圆体－简
趣味游戏、婴幼儿产品、游乐园、文具
（4）中性：干净、简介、中性美、精致、平静
冬青黑体简体、方正兰亭黑_GBK、微软雅黑、方正正黑简体（大部分非衬线体，相对细，看着清晰，辨识度高）
介绍功能的、app、说明书、企业网站页面、科技、手机、电脑、性别属性不强、并不需要强烈的情感特征

5.＝＝＝＝＝＝＝＝＝＝＝＝＝＝
（1）网格搭配模式
导航－>文字叠加的banner－>网格（2至4列不带图标的图片）－>主题区域－>页脚
�（2）单页设计
导航－>以图片为主的主图区（没banner）－>页脚（留白多）
�（3）经典的f式布局
靠右常为侧边栏，展示相关的链接－>页脚
（4）自定义栅格（常用于个人网站）
导航－>栅格（呈现大量视觉内容，以图片为主）->页脚
（5）极简分层（苹果多）
导航->轮播图banner->主题区域->页脚
（6）瀑布流布局（可以没页脚）
轻量级页头->多栏瀑布流展示->
（7）单页分块布局
一块一块的全部是一样的

5.配色====================
主色 辅色 装点色

主色：移动端和网站 用在结构＋装饰上 运营logo的颜色为主色 为了统一产品的传播性 banner构成( 背景 文字 主体 装饰)
主要的三对互补色:红绿,蓝橙,黄紫

6.网站制作流程===================
(1).产品经理给框架图(竞品分析)->视觉规范->框架调整->最终视觉稿

标注：文字的大小、颜色、各种间距、图片的尺寸

跟程序的对接：一份标注、一份切图

7.透视＝＝＝＝＝＝＝＝＝＝＝＝
近大远小；近实远虚

8.做网站时,当信息较多时用文字而不是用图片,一行最多放6个

9.网站的设计风格============================
设计觉风格（内在气质）
视觉元素（外在形象）
（气质决定形象，形象塑造气质）
界面的风格由界面的元素展现出来

扁平风，拟物风，极简风（大量留白，苹果官网），杂志风（栅格布局，更注重排版）
单页网站（长度很短只有一页，就会分也），单屏滚动（侧边切换，也是一屏），超大背景（一张大图叠字）
（以上两排位现在比较常用的风格）
文字艺术，像素风格，视频背景，3d图形，绘画风格

网站并不是只有一种风格，更多的事两到三种混搭

10网站界面色彩=＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
红绿，蓝橙，黄紫（反差色）
色彩搭配分类：同源色，反差色（对比色，互补色），百搭色（黑白灰）
�（红＋黑［高贵］ 黄（亮黄）＋黑［时尚］）很好看

同源色

1351510884357_.pic.jpg

1361510884527_.pic_hd.jpg

1371510884528_.pic.jpg

反差色

1381510884621_.pic.jpg

1391510884798_.pic_hd.jpg

百搭色

1411510884815_.pic_hd.jpg

绿色：中性色，平静温和，安全信赖，丰富活力，自然生命。
深绿：沉稳，与财富声望有关
嫩绿：生机生命

1421510886887_.pic.jpg

================== APP ====================

屏幕快照 2017-11-21 下午9.07.47.png

ios主流级型分辨率：1136640 （5s，5） 1334750（6s，6）［常用重要］ 2208*1242（plus）

安卓的单位名称：dp距离的单位；sp字号
iOS的单位名称：pt磅

APP栅格规范：
Android界面的最小间距是8dp（16px），而规范的图像资源尺寸为16dp，24dp，32dp，48dp的序列均可被8整除，采用8dp为栅格

屏幕快照 2017-11-21 下午9.10.21.png

屏幕快照 2017-11-21 下午9.12.31.png

屏幕快照 2017-11-21 下午9.14.44.png

屏幕快照 2017-11-21 下午9.13.49.png

屏幕快照 2017-11-21 下午9.16.53.png

屏幕快照 2017-11-21 下午9.17.27.png

屏幕快照 2017-11-21 下午9.19.25.png

屏幕快照 2017-11-21 下午9.18.50.png

屏幕快照 2017-11-21 下午9.18.11.png

屏幕快照 2017-11-22 下午5.07.50.png

布局规范的目的：更符合程序、不同机型适配过程，信息还原的更好,画面不失真。

手机端菜单栏文字：最小18px（常用20px），英文20px
图标icon：最小40px＊40px；菜单栏下最小icon48px＊48px

安卓与ios最大的区别，安卓有物理控件（返回），ios没有
iOS常用扁平化，安卓常用微立体

一级导航“菜单栏”：有5种形式
1.标签式导航（ios常用模式）,直观了解当前位置，快速切换，直观了解当前页面的功能
2.抽屉式导航（安卓常用），一般是隐藏的，可以放很多东西，但是切换很不方便
3.下拉式导航：顶部或底部弹出页面（手机通知）
4.点聚式导航：点击左下按钮打开，再次点击收起
5.桌面式导航：可扩展性好

二级导航：3种
1.tab式导航：图片2-4，文字5-7 可用下拉箭头，图片页面跳转，文字切换效果
2.列表式导航：设置里居多，通栏带图标
3.左右幻灯片式导航：需要添加动画来增添乐趣

常用标题字号：20，28，24

最小触控范围：88px，7mm

大间隔，隔功能：40常用
小间隔，隔相同功能中的信息：小功能：24，大功能：40

数字最小18px，汉字最小20px；

安卓
导航上一排文字：36px（标题）、34px（返回），两�（三）排文字28px
内文：34（标题），28

iOS中图标最小2px，下线（长的）1px，下划线4px
图标：没点击2px；点击3px，
面是正，线是负

分栏（斑马线）：分功能，最好不超过三栏
分割线：分内容

最小图标：40*40；

图标与图标距离：24px、或一个图标的距离
图标与文字距离：16＋（返回按钮与文字）

栏高一定大于88px＋（因为点击大小最小为88）

738927285300990813.jpg

＝＝＝＝＝＝＝＝＝＝＝＝切图＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
命名规范：模范类别功能状态.png
举个例子：Nav_button_search_nor.png
导航按钮搜索默认
注意：用下划线，用英文，无空格

iOS
项目名称V3.2
Picture resources（切片资源）
images(icon文件和切图文件夹) 东西少都放在images里，文件夹@2（a_icon a区），@3
Common resource(共用资源（导航、标签）)
Common home（公司首页）
Common home（联系人）

启动页/闪屏:简洁明了 logo、广告语、文字、图片
图片为主，logo在图片下方
logo为主，最下方可放 版权信息（下方98以内，不带logo的，带 logo的放在98以外）

使用应用logo可口号作为元素，传递品牌信息
使用情境化的启动页，引起情感上的共鸣
感情故事类，画面具有一定暗示性，温婉的表达出情感
节日氛围类
广告类

引导页
3-5页
功能介绍类、使用说明类、情怀类、问题解决类
前置性引导，过程中引导

通讯类：情感类（图片渲染）
功能性产品：功能介绍
痛点渲染
角色榜样类比

人类短时间能记忆的不超过9个，一般2-7容易记住，可通过断句将长的文案变成短的，可通过“打标点，留空格，断行”

字体设计
断－舍－离
断笔：横断、竖断、斜断

笔刷：
.abr笔刷 .tpl工具
画笔－>工具->载入

＝＝＝＝＝＝＝＝＝＝＝＝网站专题＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
品牌头图－>优惠券->产品列表
头图：主视觉、logo、导航、banner
优惠：活动优惠券、兑换码
产品：主推产品、爆款产品、产品列表
关联：销售情景演绎、企业介绍

专题页规范：
电商平台常用尺寸1200或1224，为了方便使用12列网格，建议采用1224（京东）

网站专题分类：
专属活动专题、产品展示专题、活动＋产品专题

AE
design:预合成(AE画布)
文件夹:图片png,原图
位置:P
缩放:S
透明:T
旋转:R
锚点:A
缓动:F9(FN+F9)动画曲线
显示关键帧:U
渲染：ctrl+com+m
前一帧:J
后一帧:K
mask遮罩:
文件－>整理文件－>收集文件－>全部
导入ps文件：

屏幕快照 2017-12-21 下午2.36.03.png

二维码大小：
草料生成器：容错7 格式：svg
最低：2121
最高 177177
码眼／定位

WechatIMG130.jpeg

WechatIMG131.jpeg

黑色＝1 白色＝0

黑白二维码制作：
1.草料二维码生成器 https://cli.im/
容错7%，大小随意->其他格式SVG->下载
2.aI打开.取消编组，将最外层边框删除

微信截图_20180627163032.png

01.png

02.png

03.png

00000000.png

微信截图_20180627171445.png

03.png

05.png

AE:
帧融合：

图片.png

运动模糊：

图片.png

图片.png

图片.png

将调整层放大后的效果

图片.png

图片.png

微信截图_20180328091239.png

微信截图_20180423200638.png