1. 藍(lán)湖xd

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

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

用XD的話，格式直接導(dǎo)出來就行。

用sketch的話，格式就是sketch。

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

2. 藍(lán)湖xd怎么切圖

第一、市場分析

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

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

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

第三、需求階段

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

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

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

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

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

第五、需求評審

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

第六、UI設(shè)計師介入，這里分為幾點(diǎn)要說：

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

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

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

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

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

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

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

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

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

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

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

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

3. 藍(lán)湖xd插件用不了

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

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

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

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

4. 藍(lán)湖xd插件灰色

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

一、Photoshop

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

二、Illustrator

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

三、Indesign

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

四、XD

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

五、CAD

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

六、各類手繪軟件

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

5. 藍(lán)湖xd插件禁用

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

6. 藍(lán)湖xd插件

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

我就下面幾點(diǎn)特殊說明下吧

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

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

Sketch是專為像你這樣的UI設(shè)計師設(shè)計的。

有非常實(shí)用的功能，直觀的界面和強(qiáng)大的插件，它有助于你更專注于做最好的設(shè)計。

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

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

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

Sketch的畫布

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

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

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

檢查器

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

觸摸欄

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

Sketch Mirror iOS設(shè)備實(shí)時預(yù)覽（Android借助第三方APP也可以實(shí)時預(yù)覽）

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

通過插件Sketch Measure一鍵導(dǎo)出Html 免去標(biāo)注煩惱

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

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

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

AEUX-Sketch一鍵導(dǎo)入AE工具-支持最新版Sketch前身是Sketch2AE

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

使用您喜歡的工具進(jìn)行UX動效設(shè)計

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

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

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

工作流程

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

Sketch

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

在Sketch中選擇圖層

使用以下任一方式傳

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

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

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

導(dǎo)出完成后會彈出通知

切換到After Effects

After Effects

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

點(diǎn)擊構(gòu)建

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

拖放

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