原型與設計
PRD：Product Requirements Document，產品需求文檔
原型圖：線框圖、低保真
設計稿：視覺稿，高保真
UI設計師（美工）的工作：原型圖 -> 設計稿 -> 標註、切圖
切圖：從設計稿中抽出前端開發所需的圖片
原型圖工具：Axure RP、Balsamiq Cloud
設計稿工具：Adobe PS、Sketch、Adobe XD
標註工具：藍湖、Zeplin
切圖工具：藍湖、Zeplin
矢量圖工具：Adobe Illustrator
動效工具：Adobe After Effects
設計規範
手機界面欄目：狀態欄40px、導航欄88px、標籤欄（工具欄、底欄）98px、搜索欄、Banner
首頁類型：入口導流型（消費類）、瀑布流型（資訊類）、對話列表型（社交類）
圖標：線性圖標、填充圖標(選中狀態)
Web項目新建設置：寬1920像素，高2000像素，分辨率72 像素/英寸，背景透明
寬屏：寬高比16:9
Banner尺寸：1920，有效信息區1200，不壓縮居中顯示
圖標
圖標風格：擬物化（下分：2.5D風格、超寫實風格）、扁平化（下分：線性-線條組合、剪影-色塊組合、填充-線面結合）、手繪風格
MBE風格：法國設計師MBE 創作的圖標風格，屬於填充風格；斷點式描邊、高飽和度色彩、同類色光影、表情元素、豐富的輔助圖形(星星)
設計社區網站：站酷zcool、UI中國ui.cn、優設網、花瓣網
Axure RP
美國Axure Software Solution公司出品
RP：Rapid Prototyping（快速原型）
簡圖類別：頁面圖、流程圖
導出HTML：Publish -> Generator HTML Files -> 用IE打開
母版（Master）：選中元素,右鍵 -> 轉爲母版（Create Master）
Sketch
荷蘭Bohemian Coding公司出品，只有Mac版
Adobe Photoshop
文檔：包含畫布 和 圖層
圖像大小：圖像->圖像大小，選中圖層的大小
移動工具參數：自動選擇（不鎖定的圖層都能選中，否則只能選中當前圖層）
畫板工具：一個設計稿中可以包含多個畫板，可以用於設計手機應用的不同屏
裁剪工具：選擇範圍後，鼠標在範圍內可移動位置，範圍邊緣可調整大小，範圍外可旋轉；雙擊應用裁剪；應用後再次選擇範圍則退到重新選擇範圍。切換到移動工具，則生效裁剪。
裁剪工具參數欄->刪除裁剪的像素：勾選則裁剪文檔（畫布和圖層），不勾選則只裁剪畫布
透視裁剪工具：平直的物體邊緣，由於透視原理在圖片中顯示爲斜邊；使用透視裁剪工具，沿物體邊緣裁剪，應用裁剪即可將斜邊拉直。
自由變換（縮放、旋轉、移動）：選中圖層->編輯->自由變換，另有操控變形、透視變形
斜切、扭曲、透視：自由變換時 -> 右鍵 -> 斜切、扭曲、透視；即可以單獨調整一個角的位置。斜切是平面上縮放，扭曲帶有縱深方向的變換，透視是同時對兩個角斜切。
智能對象：對智能對象圖層進行自由變換後，重新選中這個圖層，仍然可以重新調整。如果是拉入打開的圖片，自由變換後，重新選中該圖層，那麼其邊緣是緊貼它的矩形，而不是變換後的形狀
置入智能對象：文件->置入鏈接的智能對象
轉換爲智能對象：圖層->右鍵->轉換爲智能對象
智能對象效果：對智能對象進行調整 或 濾鏡（模糊化、銳化等），相當於是加了效果蒙版，塗黑該蒙版就是去掉效果，塗白即增加效果範圍
選區工具：包括選框工具、套索工具、魔棒工具、快速選擇工具
選區運算：選區工具參數->可選擇疊加或扣除選區、選擇->反選、選擇相似
選區操作：選擇範圍後即可複製黏貼、剪切、編輯->填充、圖層底欄->添加圖層蒙版（該圖層只留下選中區域）、面板->調整（調整色彩）、圖層->新建->通過拷貝的圖層（複製選區作爲新圖層）
魔棒屬性：連續
取消選中：選擇->取消選擇
色彩範圍：選擇->色彩範圍，一次選擇指定色彩範圍內的區域
橡皮擦工具
背景橡皮擦工具：取樣參數=一次（點擊時進行顏色取樣，移動鼠標只擦除取樣顏色）
圖層
圖層屬性：圖層頂欄->不透明度/混合模式
圖層混合模式：共6組27個模式
圖層操作：圖像->調整（色相、飽和度等）、面板->調整（色相、飽和度等）、圖層->修邊->去邊、圖層底欄->創建蒙版/調整(黑白圓)/新建/刪除/分組、圖層頂欄->過濾/鎖、圖層列表->隱藏顯示/解鎖/排序
圖層樣式（陰影、漸變、描邊等）：雙擊圖層、圖層底欄->fx、窗口->樣式面板（預設樣式）、圖層->圖層樣式、圖層右鍵（清除、拷貝圖層樣式）
多選圖層：參數欄可設置對齊，編輯->自動對齊圖層（根據圖層內容自動吻合重疊）
圖層蒙版：蒙版的白色部分表示圖層的顯示部分，黑色爲不顯示部分
圖層蒙版屬性：雙擊蒙版打開屬性面板，反相（該圖層留下的部分取反）
畫筆工具繪製蒙版：新建蒙版爲全白色蒙版，選中蒙版，設置畫筆顏色爲黑色，即可對圖層進行擦除，實質爲對蒙版繪製黑色；此方法優於橡皮工具擦除，因爲可以用白色畫筆擦回來。
智能濾鏡：選中圖層->濾鏡->轉換爲智能濾鏡->濾鏡->模糊，或者圖層右鍵->轉換爲智能對象->濾鏡->模糊 ；相當於添加了一個濾鏡蒙版，選中蒙版->畫筆工具塗黑，塗黑部分濾鏡失效
剪切蒙版：圖層右鍵->創建剪切蒙版，圖層->創建剪切蒙版；讓當前圖層的顯示部分爲下一圖層的不透明部分
蒙版轉選區：蒙版->右鍵->添加蒙版到選區，蒙版塗黑部分形成選區
通道：圖層的紅綠藍分量，紅通道越白表示紅分量越高
直方圖：窗口->直方圖，對整個圖層的顏色統計，橫軸表示亮度，縱軸表示像素數量
調整：曲線（對指定的亮度區域，調整亮度），黑白（可以根據不同通道決定灰度）
對比度：高亮區域 與 陰影區域 的亮度差
色彩飽和度（鮮豔度，純度）：主通道(可能是兩個) 與 其他通道的亮度差，純白，灰色，純黑的色彩飽和度爲0
色相：即顏色
色階：即亮度梯度
色調：色相、純度、亮度的綜合效果
漸變工具：在新建圖層上使用漸變工具，再與底頁合理疊加
漸變填充：圖層底欄->調整->漸變填充，漸變蒙版填充整個圖層
漸變映射：選中有漸變的圖層->調整面板->漸變映射，設置漸變效果
照片處理
濾鏡：濾鏡->Camera Row濾鏡
防抖濾鏡：濾鏡->銳化->防抖，去重影
內容識別填充：選區->編輯->填充->內容識別，去掉照片上的指定部分並與背景融合
內容感知移動工具：選區->內容感知移動工具（修復工具組下）->移動選區->應用，用於移動照片上的指定部分並修復背景
內容識別縮放：選中圖層->編輯->內容識別縮放，縮放照片時不會整體縮放，而是優先縮放空白處
修復工具：污點修復畫筆工具（滑動鼠標修復）、修補工具（用修補工具選定區域，移動區域到目標區域，即用目標區域修補選定區域）、修復畫筆工具（Alt+點擊 取樣，塗抹修復）、紅眼工具
歷史記錄畫筆工具：塗抹部分回覆到編輯前
照片拼接：文件->自動->Photomerge->選中要拼接的多張圖片
海綿工具：加色、去色、加深、減淡
仿製圖章工具（克隆工具）：Alt+點擊 取樣，塗抹克隆。更多參數在 窗口->仿製源
吸管工具：吸取前景色
標尺工具：測量兩點距離，在信息面板中查看
註釋工具：添加註釋
油漆桶工具：魔棒工具+填充
消失點濾鏡：濾鏡->消失點->創建平面工具->繪製四角平面->把其他圖像粘貼到消失點濾鏡窗口->把圖像拖入到四角平面，圖像超過四角平面的部分不顯示。讓四角平面形成一個透視角度，再調整圖像貼合透視角度，可達到圖像符合透視效果地貼合到底圖。
液化濾鏡：瘦臉、修身、局部收縮(收腰)、局部膨脹(豐胸)
自適應廣角濾鏡：約束工具（在圖像上拉一條斜線，放開後圖像會扭曲，使得斜線兩端成垂直或水平方向）
鏡頭校正濾鏡：拉直工具（在圖像上拉一條斜線，放開後圖像會旋轉，使得斜線兩端成垂直或水平方向）、變換（增減透視度）
UI
矢量工具：鋼筆工具、文字工具、路徑選擇工具、直線工具
文字工具：用文字工具畫一個框，即段落範圍
網格：視圖->顯示->網格
智能參考線：視圖->顯示->智能參考線，從標尺出拖出參考線 或 視圖->新建參考線
標尺：視圖->標尺
網格設置：編輯->首選項->網格
表格：在excel中製作表格，然後粘貼到PS
圖標：形狀工具組->自定義形狀->參數欄上可以選中不同的形狀
鋼筆工具：點擊添加錨點，點擊不放，可以拉出一個弧度路徑，可以閉合爲一個形狀
路徑修改：刪除錨點工具、添加錨點工具、轉換點工具（修改鋼筆工具拉取的弧度）
路徑選擇工具：選擇路徑 和 形狀
直接選擇工具：可以操作錨點
切片工具：裁剪工具組->切片工具，劃線 或者 劃框
切片選擇工具：選擇切片
切圖：1、切片工具劃框；2、參考線劃框，切片工具->基於參考線的切片，再刪除多餘的切片；
導出切片：文件->存儲爲Web所用格式->png 24
自動切圖：文件->導出->將圖層導出到文件->png 24，設計時需確保 圖層和切片的一一對應
自動切圖：編輯->首選項->增效工具->啓用生成器，文件->生成->圖像資源（勾選），給圖層 或 圖層組 命名爲*.png/jpg/webp/svg，就會自動在項目目錄下生成assets目錄，裏面放着圖層和圖層組對應的圖片。命名爲 200% *.png則導出二倍圖
導出多倍圖：圖層右鍵->導出爲
色彩的三大屬性：HSB，色相、飽和度、明度。是對單色的度量，而不是對整個圖像的度量。
配色：色（色相）環上，同類色(距離0-15度)，鄰近色(距離15-30度)，類似色(距離30-60度)，對比色(距離120度)，互補色(距離180度)，鄰近色、類似色最佳
色盤：色盤上選色即確定HSB三個指標
RGB：(Red-Green-Blue，紅綠藍)，發光模式（加色模式），發光三原色
CMY：(Cyan-Magenta-Yellow，青-品紅-黃~=紅黃藍)，反光模式（減色模式），反光三原色（美術三原色，印刷三原色，顏料三原色）
三間色：兩種原色混合得到的顏色
CMYK：CMY + Black，實際印刷中，加入黑色，避免得用三色混合來實現
Adobe Illustrator
軟件佈局和工具 跟PS差不多
最大圖標：256*256
分割爲網格：對象->路徑->分割爲網格，可以在每一個網格里放一個圖標
畫筆工具：可以先用畫筆工具畫一個草圖，作爲參考
剪刀工具：可以把路徑剪成兩半
偏移路徑：選中路徑->對象->路徑->偏移路徑，生成一個比原路徑大的相似路徑
水平直線：Shift+直線工具
輪廓化描邊：對象->路徑->輪廓化描邊，把一個形狀分離爲兩個形狀，其中填充部分爲一個，描邊範圍爲另一個
線性圖標改剪影圖標：輪廓化描邊->刪除填充部分形狀
Adobe After Effects
動畫12法則：擠壓與拉伸、預備動作(主動作開始前的小幅反動作)、慣性跟隨(動作停止前有一個慣性效果)、慢入與慢出、弧形運動軌跡、附加次要動作、動作誇張化
圖層：文本圖層、純色圖層、燈光圖層(隻影響啓用3D屬性的圖層)、攝像機圖層(隻影響啓用3D屬性的圖層)、形狀圖層、調整圖層(即具有調整屬性的圖層，影響其下方所有圖層)
圖層屬性：3D屬性，調整屬性
圖層屬性開關：點擊圖層後的方格
圖層效果：圖層右鍵->效果
關鍵幀動畫：時間軸-拉到起始時間->圖層面板-展開圖層-變換-點亮秒錶->時間軸-拉到結束時間->圖層面板-展開圖層-變換-設置變換目標
緩入緩出：時間軸-關鍵幀->右鍵->關鍵幀輔助->緩入/緩出
圖表編輯器：打開時間軸邊上的圖表編輯器，可以拖動拉桿，設置關鍵幀之間的變化曲線
渲染隊列：菜單欄-合成->添加到渲染隊列->渲染隊列面板->導出模塊->設置導出格式->輸出到->設置輸出文件->右側渲染
導出gif：輸出格式設爲QuickTime，輸出mov文件。安裝quickTime軟件，用PS打開mov文件，導出->存儲爲Web所用格式
Adobe XD
跳轉設計：切換到原型頁籤，點擊組件，拉取箭頭到另一個畫板
新增組件：在畫板中選中一個組件，在組件面板中點擊加號，即添加到組件庫
資源自動嵌入功能：圖片、text文件 都可以拖入到組件中
從PS、AI導入：從PS、AI可以把圖層拖入XD
重複網格：選中組件->屬性欄-重複網格->拉動組件邊上的耳朵，在一定範圍內重複排列組件
導出標記：圖層面板->鼠標懸浮於圖層->添加導出標記，即把該圖層作爲一個切圖
導出切圖：導出->導出所有內容
導出設計稿：導出->導出所有畫板
藍湖
藍湖產品（項目下的產品頁籤）
1、從藍湖官網上下載藍湖Axure並安裝
2、打開Axure RP，點擊預覽
3、在藍湖Axure上點擊上傳
藍湖UI設計（項目下的設計頁籤）
1、從藍湖官網上下載藍湖PS插件並安裝
2、重啓PS，窗口->擴展功能->藍湖->藍湖面板->登錄->上傳，即可自動標註
3、選中要作爲切圖的圖層 -> 藍湖面板->切圖頁籤->標記爲切圖->上傳，即可自動切圖
藍湖交互設計（項目->設計->上方-交互原型）
1、框出感應區域，選定跳轉目標
2、左側-演示