1. 藍湖xd

一、UI設計作品如果是作為展示作品集的話格式一般為pdf格式。

二、如果是平時工作完成過后保存的格式，要具體根據(jù)自己用的設計軟件確定。用PS的話，格式為psd.

用XD的話，格式直接導出來就行。

用sketch的話，格式就是sketch。

但是現(xiàn)在一般根據(jù)開發(fā)的流程來說，最后都是要上傳到藍湖這種開發(fā)平臺，方便開發(fā)實現(xiàn)。

2. 藍湖xd怎么切圖

第一、市場分析

商業(yè)分析能體現(xiàn)出做某個產(chǎn)品的商業(yè)價值，這是對產(chǎn)品整個生命周期最宏觀的指導性文件，報告就是這個工作的產(chǎn)出文件。簡單的說就是行業(yè)前景，意思就是這款新的產(chǎn)品是否有商業(yè)價值，產(chǎn)品投放后的回報是多少，這一步應該是高層甚至是創(chuàng)始人對整個市場的把控得出的結(jié)論，值得一提的是，新產(chǎn)品和已有產(chǎn)品上新模塊功能，在此階段的分析差別是很大的，新產(chǎn)品的分析難度更大；而已有產(chǎn)品由于已經(jīng)積累了一定的數(shù)據(jù)，對行業(yè)、用戶等都有了較深的理解，做新模塊功能時阻力往往會小很多。

第二、產(chǎn)品定位

這個詞其實在剛參加工作的同學們聽到后，其實挺虛的，我在剛做UI的時候，聽到什么產(chǎn)品定位啊，市場分析啊這類的詞，其實比較犯困的，想著直接告訴我需求就好了，干嘛還要說這么多虛詞，但是工作到3-5年后，其實這些是至關重要的，我認為產(chǎn)品定位的關鍵信息其實就是指這個產(chǎn)品是干什么的，比如微信就是社交，ins就是照片分享生活，其次就是這個app可以解決什么問題、用戶年齡段的分布。

第三、需求階段

確定了市場方向，就要找到該方向上都有哪些需求是急需被解決的，。在需求環(huán)節(jié)，你同時也會注意到很多該市場方向上的直接競爭對手和間接競爭對手。這個階段就跟我們UI很貼近了，市場分析和產(chǎn)品定位都確定后，就該找痛點了，要明確哪些需求是急需被解決的。在這里，PM往往會輸出一分競品分析報告，羅列出競品的優(yōu)劣，部分會采用SWOT進行分析。

第四、產(chǎn)品設計

這個環(huán)節(jié)和UI是密不可分的，因為我們在每次做需求的時候，都會看到這個東西，是和我們息息相關的，最熟悉的工作。pm在這個環(huán)節(jié)里其實就是畫原型，寫文檔；但其實據(jù)我這么多年的經(jīng)驗來說，真正牛逼的pm還是很少的，主要表現(xiàn)在原型繪制粗糙、文檔描述遺漏以及在UI設計中，反推了不少優(yōu)于PM的點等等。還有一個原因是大多數(shù)資歷較淺的pm善于抄競品，但是往往不知兩個產(chǎn)品是由本質(zhì)的區(qū)別。這個階段基本是由PM和UE完成，交互完成后，會內(nèi)部進行交互評審，確認交互方案后方可給到UI設計師。

我們在工作中會看到形形色色的原型交互圖，但是畫的好的其實少之又少，基本見到的就是下面這種的…是不是很慘不忍睹….

PM要在整個產(chǎn)品規(guī)劃中達到什么目標呢？產(chǎn)品規(guī)劃中要達到的目標，其實就是產(chǎn)品價值。產(chǎn)品規(guī)劃中要明確每個階段的目標是什么，所有的決策和行為都是圍繞著這個目標來進行的，最終以數(shù)據(jù)等可考核的方式來判斷是否解決了問題。這就要求階段性的目標是明確的，比如用戶活躍度、成交量等指標，這些都是驗證前面幾步是否有效的依據(jù)。切忌把產(chǎn)品規(guī)劃做成空中樓閣，無法執(zhí)行的假大空文件，會嚴重影響從0-1產(chǎn)品的生命周期。

第五、需求評審

這個基本是產(chǎn)品需求確認后，由產(chǎn)品拉會，每個負責項目的職能人員參會，一般有PM、UE、UI、RD、FE、QA、這五種職責的人參加，進行評審。會議中由PM進行需求文檔（大公司一般用wiki）的闡述，根據(jù)經(jīng)驗，一般研發(fā)提問題最多，原因是因為評審前PM和UE和UI都進行了確認無誤，研發(fā)和測試也有提一些風險性的問題，比如這個是否可以直接調(diào)用代碼，如果不行，可能會進行風險預警；還有技術(shù)上是否有難點等等。評審完后，研發(fā)會進行一個排期。

第六、UI設計師介入，這里分為幾點要說：

1.我們拿到項目后，尤其是從來沒做過的，不要急于下手去擼圖，先要搞清楚產(chǎn)品的意圖目的，其次仔細走查整個產(chǎn)品線（這里主要看一下整體app設計調(diào)性，字體字號，間距些），然后我們要去進行競品分析（這里的分析和產(chǎn)品的分析不太一樣，我們主要去看視覺層，也就是說找找參考，看看別家是怎么設計的，然后再結(jié)合我們的設計意圖去下手去做。）

2.當我們決定下手去設計后，要給我們的整體設計進度進行時間預估，然后給出設計排期，排期要根據(jù)頁面設計+修改的時間進行計算，這樣可以避免項目延期，按我來說，比如10個界面，我給自己3天設計，然后給上游確認后，1天修改，那么就是4天時間，如果時間富?？梢栽偌右惶斓木彌_，那么就是3+1+1，就是五個工作日；排期最好用keynote或者excel做一個表格，列出具體頁面具體出圖時間，細化一下比較好。

3.在設計中，我們一般按照@2x進行設計，確保UI規(guī)范的正確執(zhí)行（這里包括icon是否粗細統(tǒng)一、視覺重量是否一致、字體自重是否統(tǒng)一，間距是否按照倍數(shù)、顏色是否跟整體產(chǎn)品調(diào)性保持統(tǒng)一呢？）

4.切圖標注，在@2x的設計圖中，切圖icon/背景。切圖分兩種：第一可以切刀切（規(guī)定好熱區(qū)，直接按快捷鍵s就行），第二可以用組件切（規(guī)定好熱區(qū)，直接右鍵創(chuàng)建組件，然后雙進進去，導出即可）；命名規(guī)范新手肯定是以中文命名，也是可以的，不過還是要按照正確的方式來命名，一般是：在哪里/是什么/狀態(tài)/倍數(shù)。當然你也可以有更明確的規(guī)范。一切ok后，可以上傳到藍湖了。但是部分公司現(xiàn)在用figma～也是很不錯的。

5.開發(fā)完后，我們需要對我們的UI設計稿進行視覺還原，也就是走查聯(lián)調(diào)階段。強調(diào)一下（沒有什么是技術(shù)寫不了的，如果開發(fā)說沒法做，那么他一定是很懶）這個階段很重要，據(jù)我的經(jīng)驗，有的開發(fā)還原度極低，基本50%，有些大廠有個原則是：如果開發(fā)還原度低于60%，那么打回開發(fā)重新調(diào)整后再去走查?；咀卟樽煮w字號字重、顏色、間距、icon、邊距這些規(guī)范類的東西，你會發(fā)現(xiàn)開發(fā)真的是寫的不太好～～～，走查聯(lián)調(diào)基本達到95%就差不多ok了。

走查聯(lián)調(diào)的步驟是：我們要用好幾部不同品牌的測試手機去看，因為可能一部手機ok的話，另一部可能會出現(xiàn)小的誤差，比如還要兼容適配劉海屏，@3x的屏等等問題，我們在測試手機上把每個界面截圖后，放到wiki里，標注問題所在，然后再把UI圖貼圖給開發(fā)做參考，這樣開發(fā)看起來就很明確了。聯(lián)調(diào)一次如果還有問題，可以有2次3次聯(lián)調(diào)，待開發(fā)還原到90%的時候，我們可以搬個小板凳去開發(fā)旁邊親自調(diào)細節(jié)問題，直到自己滿意為止。

6.QA測試環(huán)節(jié)

這個環(huán)節(jié)其實絕大多數(shù)設計師的通俗感受就是：測試就是用來提bug的～沒錯兒，通俗來說確實是這樣的，bug的確是影響整個產(chǎn)品的最大的障礙，項目上線必須確保無bug才行，解bug的優(yōu)先級是最高的。準確來說，QA是check研發(fā)實現(xiàn)的功能與產(chǎn)品、UI、交互設計的是否一致。找些異常情況、及優(yōu)化，把控項目的質(zhì)量環(huán)節(jié)，其實大家可以理解為類似風控吧～

這里有一個小點就是：正式全量上線前會先上線到tips環(huán)境，那么什么是tips呢？其實就是為了測試，有時候測試環(huán)境的數(shù)據(jù)和線上不同，可能有些問題在測試環(huán)境體現(xiàn)不出來，所以要先到tips，tips環(huán)境與線上共用數(shù)據(jù)。

7.產(chǎn)品驗收環(huán)節(jié)

產(chǎn)品從0-1的過程中，產(chǎn)品驗收是非常重要的一個環(huán)節(jié)，產(chǎn)品驗收的最終結(jié)果是上線，不過在此之前可能會經(jīng)過反復的修改。

產(chǎn)品上線之前需要通過測試、UI驗收和產(chǎn)品驗收，這是控制產(chǎn)品質(zhì)量的必要手段。產(chǎn)品驗收更重要的是通過產(chǎn)品角度驗收開發(fā)是否滿足了產(chǎn)品需求，側(cè)重點在于業(yè)務邏輯，對需求負責。

3. 藍湖xd插件用不了

說的簡單點兩者最大的區(qū)別就在于，平面都是印刷的東西多一些，當然也有一部分是熒屏顯示的。而UI用最簡單直觀的理解其實就是說都是關于屏幕上顯示的東西！

在細點的說，平面涉及的都是一些靜態(tài)的東西，比如海報啊，易拉寶，名片，等等。而UI幾乎都是一些動態(tài)的界面，但是需要設計做的是一個靜態(tài)的界面，至于動態(tài)怎么加上去，那是前端和交互去加的！

最直觀的，ui設計用ps做的東西都是RGB格式，也就是所謂的三色，屏幕上顯示的格式！而平面設計用ps做的大多都是CMYK格式，也就是四色打印機噴色用的格式！

前后兩者其實也是有很大關系的，UI設計前期的基礎就是平面設計！例如，排版啊，色彩搭配啊，這些都是基礎，用到UI里面，就會利用這些基礎怎么讓界面更簡單明了，更容易讓人看起來舒服，更容易操作，等等！

4. 藍湖xd插件灰色

UI設計師的要求掌握了PS，Illustrator，AE，DW，Indesign，ARP，XD這幾款軟件和思維導圖，藍湖，墨刀這幾款插件完美足夠啦，插件可以自己選學，如果把這幾款軟件都學會啦，基本的UI設計工作是完全沒有問題的。

一、Photoshop

Photoshop是圖像編輯和設計軟件，相信大家再熟悉不過了。現(xiàn)在不光是設計行業(yè)，一些非設計類崗位在招聘人員的時候也更加傾向于會使用Photoshop的人，因為現(xiàn)在很多行業(yè)都會用到PS來簡單改圖，新媒體行業(yè)更是如此。那么UI設計行業(yè)的從業(yè)者當然就得更加精于Photoshop，才能夠做出更好的設計、拿到更高的薪資。Photoshop是設計的基礎，不管是UI設計還是平面設計、網(wǎng)頁設計、電商設計，都需要熟練運用Photoshop，Photoshop也可以說是設計行業(yè)的門檻，掌握了它，才能夠邁入UI設計行業(yè)。

二、Illustrator

Illustrator是矢量圖形和插圖軟件。它主要用來做頁數(shù)多的宣傳品，也可以完成一些簡單的圖像編輯。復雜的圖層設計會先用Photoshop完成，再導入Illustrator進行排列。它是高階UI設計師需要的技能，也是在UI設計中比較常用到的軟件。所以有對ui設計師心動的你還不快到地方獲取資料學習的企鵝圈前三個是108中間是379最后是6051。

三、Indesign

Indesign主要用于圖書和講義的排版，也是UI設計師經(jīng)常用到的，雖然它不能做太多樣式的設計、但是排版還是比較有效率的。

四、XD

XD主要用于用戶體驗設計和原型創(chuàng)建，更多的用于UI交互設計。一些網(wǎng)站設計以及app軟件的設計大多數(shù)會用到它。不過它對系統(tǒng)的級別和配置要求比較高。

五、CAD

CAD是一個草圖繪畫軟件，用于室內(nèi)設計、工業(yè)設計等三維設計，在設計師當中也算是常用軟件之一。有這項技能的UI設計師的工資往往會比沒有這項技能的高出很多。

六、各類手繪軟件

雖然一些設計軟件也可以進行手繪，但是畢竟不是專業(yè)的手繪軟件，畫筆的種類較少，有時候不能很好的表達設計師的思想，所以設計師們在手繪時更傾向于用專業(yè)的手繪軟件。具體用哪款軟件就見仁見智了，設計師會根據(jù)手感和習慣，來選擇手繪軟件。

5. 藍湖xd插件禁用

XD的優(yōu)勢在于支持 Windws，吊打不至于，工具哪個更好取決于個人，而且兩者都可以用藍湖標注切圖，我覺得都挺不錯的。

6. 藍湖xd插件

Mac平臺目前最主流的UI設計軟件就屬【Sketch】了，國內(nèi)外的一線公司基本上都是使用這款軟件做UI設計的，包括國內(nèi)現(xiàn)在很多中小互聯(lián)網(wǎng)公司，大部也是用Sketch做為主力設計軟件的。

我就下面幾點特殊說明下吧

Sketch 是最強大的移動應用矢量繪圖設計工具，對于網(wǎng)頁設計和移動設計者來說，比PhotoShop好用很多！尤其是在移動應用設計方面，Sketch 的優(yōu)點在于使用簡單，學習曲線低

目前最新版為Sketch 58，需要macOS High Sierra（10.13.4）或更高版本系統(tǒng)。

Sketch是專為像你這樣的UI設計師設計的。

有非常實用的功能，直觀的界面和強大的插件，它有助于你更專注于做最好的設計。

Sketch軟件界面，簡單清新，易操作

頂部的工具欄包含所有重要的工具和操作。 右側(cè)的檢查器可以調(diào)整所選圖層的屬性。 左側(cè)窗格是圖層列表，并列出文檔中的所有圖層和圖板。 最后但并非最不重要的是，中間的畫布是您將看到您的設計的地方。

沒有浮動面板。 相反，檢查器會適應每一時刻向您展示所需的工具，并隱藏所有其他工具。 這樣你總是有一個完全視野的視圖畫布。

Sketch的畫布

Sketch的畫布是無限大小的; 您可以在任何方向無限滾動，因此您可以完全自由地設置您的繪圖區(qū)域。

如果您想在無限畫布中定義一個固定框架，只需插入一個或多個畫板。 例如，當設計移動界面時，許多設計師為應用程序中的每個屏幕創(chuàng)建一個“畫板”，并按外觀順序排列。

您可以在具有無限精度的獨立于分辨率的視圖中查看畫布，也可以打開像素預覽，您將會準確了解每個像素在導出為位圖格式（如JPG或PNG）時的外觀。

檢查器

右側(cè)的檢查器可讓您調(diào)整當前圖層的設置或當前工具的選項。當您選擇圖層時，您將看到檢查器分為幾個部分。

觸摸欄

對于MacBook Pro用戶，Touch Bar可以作為任何應用程序中的附加窗格，Sketch也不例外。根據(jù)您在應用程序中的操作，Touch Bar將顯示與該特定上下文相關的控件和快捷方式。

Sketch Mirror iOS設備實時預覽（Android借助第三方APP也可以實時預覽）

Sketch Mirror允許您通過Wi-Fi網(wǎng)絡在iPhone或iPad上實時預覽您的設計，或通過USB閃電線連接。結(jié)合本地分享，您還可以使用網(wǎng)絡瀏覽器在任何設備上預覽您的設計。

通過插件Sketch Measure一鍵導出Html 免去標注煩惱

當然了，你也可以使用在線工具，例如【藍湖】等，不過如果對保密要求高的公司，建議使用離線插件吧，畢竟把源文件上傳，容易信息泄漏的。不過付費部署企業(yè)級服務器也是可以的，這樣安全也是有保障的，我們一般都是使用離線插件的，Sketch Measure還是挺好用得。

下載安裝包雙擊 Sketch Measure.sketchplugin 完成安裝

執(zhí)行 Plugin > Sketch Measure > Toolbar 或使用快捷鍵 control ? + shift ? + B

AEUX-Sketch一鍵導入AE工具-支持最新版Sketch前身是Sketch2AE

喜歡用Sketch做圖，然后用AE做動畫的同學們的福音啊

使用您喜歡的工具進行UX動效設計

AEUX是After Effects和Sketch 52+的一組面板，用于將圖層傳輸?shù)紸fter Effects，從視覺設計到動效。

AEUX以前稱為Sketch2AE，旨在跟上人們?yōu)槠聊辉O計的最新方式。

本次更新，修復了 AE CC 2019 插件安裝不了的BUG

工作流程

只需點擊幾下，即可將動畫圖層直接傳輸?shù)紸e中

Sketch

從頂部插件菜單中打開Sketch中的插件面板

在Sketch中選擇圖層

使用以下任一方式傳

Ae -layer數(shù)據(jù)的選擇在幕后傳輸

導出AEUX.json – 圖層數(shù)據(jù)保存為文件

圖像（如有必要）將導出到您指定位置的磁盤

導出完成后會彈出通知

切換到After Effects

After Effects

從頂部菜單“ 窗口”>“擴展”中打開AEUX面板。

點擊構(gòu)建

Sketch的圖層數(shù)據(jù)現(xiàn)在在幕后的應用程序之間傳輸。一旦可以在Ae中構(gòu)建圖層，您將在面板中收到藍色徽章和圖層計數(shù)的通知。粘貼一堆代碼的日子已經(jīng)一去不復返了。確保面板在Ae中打開。

拖放

可以將圖層數(shù)據(jù)導出為獨立的.json文件。通過單擊導入