1. 產品原型設計
原型設計是產品經理的工作。
原型圖追求的是快速的開發和低保真的實現，重要的是頁面之間的邏輯，頁面的信息框架，和頁面承載的功能（狀態）和模塊。比如說，這個頁面需要搜索功能嗎，搜索頁面需要歷史紀錄，還是熱門搜索標籤；這個頁面的鍵盤是默認彈出，還是點擊輸入框彈出。
而UI設計師就需要從視覺的角度考慮如何美觀有效的呈現頁面內的功能信息和頁面間的邏輯。他們可能需要從對比，留白，視覺層級等方面提升頁面的美感和清晰。
2. Axure
Axure是原型設計常用的工具之一。不熟悉的可以去花瓣臨摹幾個App、Web交互原型，多臨摹幾個，就能立刻上手了。Axure很簡單很容易學，但“交互設計”不是那麼簡單的，需要畫很多時間和精力去學習去鑽研。
第一，不要去做高保真原型。
第二，不要子頁面套子頁面，直接用文件夾，目錄清楚規範統一。
第三，不要去設計點擊交互，所有的頁面內容都在左側展示，一目發然。（不需要做太多花哨的互交）
第四，不要在一個文件裏設計多個頁面，這樣研發團隊無法直觀估算工作量
第五，正確標註
第六，不要用假數據製作原型
第七，注意排版和間距，字體大小等，不要認爲這是UI做的事情
第八，萬能的矩形能解決很多問題
第九，原型就是黑白灰三色，不需要加其他的顏色
第十，對齊很重要
第十一，正確的給頁面命名，列表頁，詳情頁，首頁等
第十二，善於母版
不要需要刻意去學Axure，能規範清晰的表達出來原型設計理念就夠了。
常用操作：
1. 下載元件庫，可幫忙快速開發。
2. 鎖定元件（選中希望的所有元件，右擊，鎖定）
3. 元件對齊；頂層與返回（圖層上下關係）
4. 母版（選中所有希望元件，右擊，創建母版）
5. 使用母版（在頁面中將母版拉入即可）
6. 發佈生成html文件 （public to axure cloud）
3. XD與Sketch
XD，是一款輕便的矢量+原型工具，集線框圖設計，視覺設計 ， 交互設計， 原型設計 等功能於一體，你可以使用它輕鬆搞定用戶體驗設計。XD適用於mac和windows兩個平臺。
Sketch，只要功能同XD，只適用於mac，XD出現前Sketch是一哥的存在。
Adobe XD共分爲兩大功能部分，Design（界面原型設計）與Prototype（界面關聯與交互）兩個部分，剛剛說到的工具是屬於Design功能的，而Prototype的使用是與Axure完全不同的。
Axure的交互操作也並非不舒服，但是它缺少了更具互動性質的可視化操作。在Adobe XD中，只是將需要交互的兩端拉上一條線就可以完成的操作，Axure上卻是更多的操作步驟與繁雜的選項按鈕。
我屬於那種特別偏重於視覺性與操作性的人，所以如果時間允許我基本都是繪製高保真原型的，所以對於Axure本就爲了方便使用而產出的事物卻沒有爲我帶來應有的便捷，那麼我也只好做出了更優的選擇。Axure的價值在於它如同“隨手塗鴉”般的繪製體驗，而這種體驗在我看來更適合去繪製簡單的或是低保真的線框圖，Adobe XD則是一箇中等偏高保真級別的原型首選軟件。
常用操作：
1. XD 打開之後，主面板上有兩個tab，設計與原型。設計是所有頁面做設計的地方，當所有的設計完成之後就可以在原型面板那裏做互交設計。
2. 畫板。 新建一個畫板就是新建一個頁面。點擊畫板上方的名字可以選中整個畫板。ctl + d 複製整個畫板。
4. 位圖與矢量圖
矢量圖可以無限放大而不失真，位圖放大到一定程度之後就會越來越模糊。
矢量圖在保存圖形時，實際保存的是一些可以用來生成相同圖形的座標、函數、向量等信息，這些信息的背後都是一些數學原理。因爲矢量圖的背後都是數學算法和模型，所以呈現出來的畫面總是有一定規律可循的，儘管我們不能一眼看透它背後的規律，但就是這樣一種規律會給我們一種人造的、不真實的感覺。
位圖是由一個個像素點構成的。這樣的保存方式就導致了一個問題，當圖像的分辨率較高時，文件體積會變得特別龐大，保存幾百個點、幾千萬個點可不是什麼好玩的事情，所以這就催生出了各種壓縮圖像的方法。另一個問題就是大家所熟知的，一張圖像的分辨率是固定的，當我們想要查看圖像的細節，而這個細節的精度已經超出圖像分辨率所能表示的範圍時，我們就只能看到萬惡的馬賽克了。
所以，當我們需要一張有規律可循、中規中矩的圖時，矢量圖就是最好的選擇。這方面的例子有很多，比如軟件的圖標。對於軟件的圖標來說，我們就是需要簡單明快的配色，有數學理論支撐的漂亮曲線，讓人一眼就能認出來，那我們無疑應該選用矢量圖進行繪畫。而當我們想要更多的細節、更加原汁原味的真實時，我們就應該選用圖像，比如一個新聞記者，他肯定更願意要一張高清彩色照片，而不是畫家畫的現場寫生。至於海報，則要視具體的內容而定。事實上大部分情況下我們使用PS是因爲我們已經有了一定的素材，需要使用其中的圖像處理功能。如果是憑空作畫，那麼AI的矢量圖形則是更好的選擇。
5. AI 與 PS
Adobe illustrator，常被稱爲“AI”，是一種應用於出版、多媒體和在線圖像的工業標準矢量插畫的軟件。作爲一款非常好的矢量圖形處理工具，該軟件主要應用於印刷出版、海報書籍排版、專業插畫、多媒體圖像處理和互聯網頁面的製作等，比如手機APP、網頁設計的佈局排版、按鈕、圖標等矢量元素。
ps通常被認爲是一個圖像編輯軟件，是一個以處理柵格圖片爲主的像素圖處理軟件，適合用來做平面廣告、插畫或後期處理等。