論是在上市BAT還是創(chuàng)業(yè)小公司，都隨時可能接手到從0開始的新項目，那么作為負(fù)責(zé)新項目的主設(shè)OR獨立設(shè)計師，我們應(yīng)該從何開啟工作呢？

01.產(chǎn)品需求溝通

項目開啟的第一件事必然是和產(chǎn)品經(jīng)理的熱烈碰撞，那么如何在溝通中體現(xiàn)一個UI設(shè)計師的專業(yè)水準(zhǔn)呢？

1. 了解產(chǎn)品定位

首先要明確這是一款什么類型的產(chǎn)品，是工具型APP、社交型APP還是電商APP？

2. 確定目標(biāo)用戶

接下來就是確認(rèn)目標(biāo)用戶群，是大學(xué)生？寶媽？還是廣場舞大媽？具體到年齡段和大致職業(yè)方向。

3. 有無相關(guān)競品

大部分的產(chǎn)品原型都會有一定的參照競品，不排除個別完全創(chuàng)新的產(chǎn)品。雖然我們自己也能找到類似的競品，但是建議產(chǎn)品經(jīng)理給出TA認(rèn)為合適的相關(guān)競品，這里有2個好處：? 提供更多的競品以供視覺分析? 有助于我們了解產(chǎn)品經(jīng)理所想達(dá)到的APP設(shè)計效果。

4. 梳理原型圖大致邏輯

在這里假定大部分公司沒有交互設(shè)計師的崗位，原型圖1.0由產(chǎn)品經(jīng)理來出。那么在第一次交流溝通中，產(chǎn)品經(jīng)理會詳細(xì)描述一遍TA的原型圖跳轉(zhuǎn)邏輯與各界面內(nèi)容，我們需要了解APP版本1.0所需要完成頁面設(shè)計所有內(nèi)容，及時反饋不合理的跳轉(zhuǎn)邏輯。

5.確認(rèn)工作排期

在溝通后，需要協(xié)調(diào)產(chǎn)品開發(fā)進度，給到大致的設(shè)計排期。一般來說我們會這樣進行新項目的設(shè)計時間管理（針對復(fù)雜程度中等的APP）

*基本中小型APP1.0版本都沒有排期來完成界面的交互動效，所以這部分我們放到項目UX設(shè)計1到2的文章中再說。

02.風(fēng)格定位分析

在收集了產(chǎn)品需求之后不要著急開始頁面設(shè)計，還有幾個磨刀不誤砍柴工的步驟

1. 競品視覺分析

分析相關(guān)競品的視覺展示主要有2方面好處：? 檢測我們在模塊設(shè)計時是否有所忽略，有無更好的視覺表達(dá)方式。? 注意與競品保持一定差異性，保證自己的產(chǎn)品調(diào)性。

不過需要注意的是，在競品分析中不要受到競品影響而無法進行創(chuàng)新思考，永遠(yuǎn)在競品基礎(chǔ)上思考更優(yōu)化的方案。

2. 確定品牌色與APP風(fēng)格

品牌色是一個需要慎重思考的內(nèi)容，因為一旦確定開始設(shè)計運營，之后要進行改動都是比較困難的事情。一般情況下，品牌色與APP類型、目標(biāo)用戶有關(guān)。這里舉一個例子：最近在做的一個針對小白用戶群的理財資訊類APP。那么可以分析得出幾個風(fēng)格關(guān)鍵點：舒適留白（深度閱讀），親和力（財富相關(guān)），細(xì)節(jié)創(chuàng)新（用戶黏度）。

于是我們使用了#FFC900（黃色）作為品牌色（暖色、與大部分紅色競品拉開差異、同時干擾閱讀性較弱）。

3.初步的LOGO方案

文字型

把APP的大名放在APP里，或者APP名稱中的一個字放在APP里。例子可以說是數(shù)不勝數(shù)，可以稱為是APP LOGO設(shè)計最大眾最保守的方案。原因也很簡單，因為這樣的LOGO設(shè)計簡單粗暴，識別度高，最適合國人的閱讀偏好，因此之前也有數(shù)據(jù)說明是下載率最高的APP LOGO類型。

字母型

一般使用APP名稱拼音或英文的首字母放在APP里。其實英文字母與國人來說和圖形是相對類似的，只是使用字母對于APP的品牌名稱可能更容易直接呼應(yīng)上。

圖形型

圖形化LOGO的使用在APP LOGO上也十分廣泛。大部分有著自己圖形化LOGO的產(chǎn)品都會優(yōu)先使用圖形化LOGO而非文字LOGO去作為APP LOGO。一旦圖形化LOGO被大眾所理解接受，那么在茫茫的手機APP堆中識別起來就會相對容易，具有很強的識別度與品牌感。

吉祥物

一些成熟的APP后期也偏好將自己的APP吉祥物作為APP LOGO展示。這樣做的益處基本也在于親和力的營造與品牌文化的推廣。

4. App整體框架

卡片式

適合feed流、瀑布流產(chǎn)品，不同樣式和排布的卡片為不同維度的產(chǎn)品內(nèi)容提供很好的區(qū)分環(huán)境，同時也提高了閱讀效率。

分割線式

適合信息密集且強調(diào)信息展示效率的產(chǎn)品，分割線可以簡單粗暴的與整理所有碎片化的內(nèi)容，細(xì)化區(qū)分不規(guī)則內(nèi)容。但是這里建議如果非必須，盡量少使用分割線，不僅只是為了美觀和視覺潮流，更重要的在于，分割線（尤其重色分割線）容易使頁面產(chǎn)生割裂感，大量使用的話還會造成閱讀干擾。

無框式

適用于大圖、文藝類的產(chǎn)品。這大概是近一年最流行的潮流風(fēng)格了，從iOS11更新以來，大標(biāo)題無框式的構(gòu)架在各種飛機稿中隨處可見。但是產(chǎn)品是否真的適合這樣新的潮流風(fēng)格，仍需要設(shè)計師仔細(xì)思考，而不應(yīng)該盲目追隨設(shè)計潮流。

5. 思維導(dǎo)圖

在設(shè)計風(fēng)格與LOGO方案都基本敲定后，可以對交互原型進行一個思維導(dǎo)圖梳理。讓自己更清楚產(chǎn)品的整體框架與跳轉(zhuǎn)邏輯。

03.開工界面設(shè)計

你是一個披著UI設(shè)計師羊皮的美工嗎？

1. 模塊化管理你的設(shè)計稿

這里我們不提如何給文件夾命名之類雞肋的事情，每個公司都有自己的習(xí)慣，入鄉(xiāng)隨俗就好。重點的是如何用sketch搭建一個規(guī)范高效的界面框架。對于界面設(shè)計中重復(fù)出現(xiàn)的UI kit（UI組件），比如tab 圖標(biāo)，按鈕，我們都可以以symbol（符號）化的方式避免反復(fù)多次修改與設(shè)計稿的混亂。

*具體使用方法可自己嘗試或度娘

2. 考慮設(shè)計延展性

所有后臺上傳數(shù)據(jù)可能的最大值，比如粉絲、關(guān)注、點贊的數(shù)值最多多少位，卡片信息標(biāo)題最多多少字以及金融產(chǎn)品中個人賬戶的數(shù)字最大位數(shù)。往往區(qū)同美工與UI設(shè)計師的不是你的界面做的有多漂亮，而是細(xì)節(jié)你考慮的有多到位。具體有多少設(shè)計的可能性與延展性可以注意，我也在不斷收集中，之后應(yīng)該會再寫一文給大家總結(jié)一下。

*請忽略該圖的UI視覺風(fēng)格及其他細(xì)節(jié)，單純舉個數(shù)值延展性的栗子。

3. 努力以設(shè)計解決問題

其實不單單是UI設(shè)計，所有的設(shè)計領(lǐng)域，一個好的設(shè)計師應(yīng)該不僅僅只是美化產(chǎn)品，更多的應(yīng)該是去解決問題。在看到產(chǎn)品的原型圖時，首先思考TA為何要這樣畫原型，是否有更好的交互方式。這里舉一個例子：還是上文中提到的那個理財資訊APP項目。

這是產(chǎn)品經(jīng)理給出的原型

需要我們留意的是，發(fā)現(xiàn)頁在這里屬于一級界面，如果按照產(chǎn)品經(jīng)理所羅列的版式進行設(shè)計，那么會造成一個結(jié)果：頁面樣式過于單一，對于黏度本身就不高的小白用戶群，這樣的平鋪方式很不利于APP留住用戶。但是從產(chǎn)品經(jīng)理的角度出發(fā)他們同時關(guān)注信息的展示效率與曝光度。所以需要如何解決這個問題，達(dá)到兩全其美的效果呢？

這是設(shè)計的方案稿

在與產(chǎn)品經(jīng)理溝通后，提議用不同布局新增了熱門話題模塊，在保留了一定信息平鋪列表保證信息露出的基礎(chǔ)上，增加了信息表達(dá)的視覺多樣性與內(nèi)容優(yōu)先級。

04.與開發(fā)的對接

設(shè)計師與開發(fā)爸爸的碰撞已是老生常談，但是視覺還原做的不好，除了開發(fā)的鍋，設(shè)計也有責(zé)任哦。

1. 何種形式的切圖、標(biāo)注最高效

一些公司的流程習(xí)慣使用設(shè)計直接用markman或類似標(biāo)注工具，標(biāo)出密密麻麻的標(biāo)注圖給開發(fā)。但實際上這樣的對接效率無論對開發(fā)還是設(shè)計來說都不是一個科學(xué)高效的進行方式。所以建議使用sketch的插件sketch measure>規(guī)范，直接導(dǎo)出Html頁面，可以直接用鼠標(biāo)在html中查看任意的區(qū)域文字顏色等開發(fā)所需的css樣式，免去了人工標(biāo)注的時間。

需要注意的是，html無法讀取文件夾組里的單個元素信息。

2. 必不可少的視覺走查

基本每個版本開發(fā)完成后，都需要進行視覺走查校對，因為開發(fā)多少都會有一些視覺上的實現(xiàn)偏差。但視覺上的偏差有時候不完全是開發(fā)的鍋，一些細(xì)節(jié)設(shè)計師也是要負(fù)責(zé)的。比如，在sketch里單行字的間距沒有調(diào)整為與字體字號相同時，導(dǎo)出的html里就會顯示比實際字體要大的字體，這樣的界面開發(fā)結(jié)果就是行間距莫名的變窄了。又比如以圖片比例不為整數(shù)的設(shè)計稿，開發(fā)適配完一般都不會是你設(shè)計稿上的圖片大小，因為無法適配。

建議在每次走查后在excel列好所有的需要校正的點（用P1P2P3分好優(yōu)先級）。

05.建立視覺規(guī)范

你的視覺規(guī)范能物盡其用嗎？

大部分高設(shè)在整理視覺規(guī)范的時候還是習(xí)慣做出一個幾十來頁的PDF，很可能只是一個擺設(shè)，開發(fā)不會看，連設(shè)計師自己都不會多看。其實實用有效的視覺規(guī)范應(yīng)當(dāng)盡可能簡潔，而更多的控件樣式由ui kit來展現(xiàn)。

*小tip：可以給顏色和字號編好編號，如A1、A2這樣方便開發(fā)建立組件庫，方便調(diào)用組件。

UI kit的匯總建議也在sketch中完成，這樣也可以導(dǎo)出html供開發(fā)直接使用。這樣看來一個可以直接使用的UI kit明顯比N多頁規(guī)范與控件混合的pdf要實用很多。

UX設(shè)計0到1暫時寫到這里，有機會還會再更新一篇1到2，給大家總結(jié)一下如何做精細(xì)化設(shè)計與設(shè)計提升，筆芯。

本文由 @Nana柒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議

年以來，許多設(shè)計師一直認(rèn)為Photoshop是Web設(shè)計的必備工具。實際上，我在北京永燦的整個8年職業(yè)生涯中一直專門從事這項工作。

Photoshop使您能夠在一處完成許多不同的事情。您可以編輯照片，創(chuàng)建數(shù)字圖形，制作GIF甚至創(chuàng)建原型。

它本質(zhì)上是設(shè)計師的瑞士軍刀。

多年以來，我一直在聽到一個名為Sketch的新工具，該工具可以代替Photoshop并使我的工作流程更高效。

“褻瀆！”我想。

沒有什么可以取代我心愛的Photoshop。我覺得自己已經(jīng)掌握了該工具，以至于我在任何其他程序中都無法獲得更高的效率。

但是，這一切在幾年前發(fā)生了變化，當(dāng)時北京永燦接受了一個客戶，要求我們在Sketch中設(shè)計整個項目。

潛入素描

對于那些從未聽說過Sketch的人來說，它是由荷蘭Bohemian Coding公司開發(fā)的基于Mac的設(shè)計工具。

自2010年發(fā)布以來，它在設(shè)計師中倍受青睞，甚至獲得了Apple設(shè)計獎。

在一次小小的恐慌發(fā)作之后，我首先進入了不熟悉的Sketch水域。

一開始我很懷疑，但是三個月后，我知道沒有回頭路了。

是什么讓前自我認(rèn)可的Photoshop專業(yè)人士做出了轉(zhuǎn)換？

Sketch非常適合我的工作流程，使我能夠以真正的數(shù)字設(shè)計師的思維方式更快地工作。此后，我們的整個設(shè)計團隊已移至Sketch。

但是，這并不是說Photoshop在我的工作流程中仍然沒有位置，實際上對某些團隊來說可能更好。

為了幫助您確定最適合您的團隊的優(yōu)勢，讓我們仔細(xì)研究一下優(yōu)缺點，并推薦給現(xiàn)代數(shù)字設(shè)計師。

Photoshop：利弊

自1988年發(fā)布以來，Photoshop一直是Web設(shè)計工具的王牌。這并不奇怪，因為它是一種可以完成許多不同事情的工具。以下是使Photoshop如此強大的設(shè)計工具的一些出色功能，以及一些需要考慮的缺點。

優(yōu)點

圖書館

Photoshop允許您獲取圖像和插圖之類的資產(chǎn)，并將其存儲在云帳戶中，以在其他文件和Adobe軟件中訪問和重用它們。

這有助于保持設(shè)計的一致性，并使您不必一次又一次地重新創(chuàng)建資產(chǎn)。

與所有操作系統(tǒng)兼容

Photoshop是一款已經(jīng)存在了數(shù)十年的軟件，因此它不僅是經(jīng)過時間考驗的穩(wěn)定工具，而且還可以在PC和Mac上使用。

對于同時擁有兩種類型用戶的團隊來說，這是一個巨大的優(yōu)勢。

多功能軟件

Photoshop的閃光功能是它的多功能性。如果您是一個單人團隊，或者要在公司中處理各種設(shè)計任務(wù)，那么這是一個很好的工具。無論您需要編輯照片，布置頁面設(shè)計，甚至創(chuàng)建GIF，都可以在一個地方完成。

缺點

成本

Photoshop可以快速獲得昂貴的價格。計劃全年的價格從$ 20.99 / mo到$ 299.00。如果您的預(yù)算較少，則可能會花費很大。

文件大小和管理

盡管Photoshop確實可以在一個文檔中創(chuàng)建多個“畫板”，但是這樣做可以迅速增加文檔的文件大小。這可能會給您的計算機造成巨大損失，并且使與團隊其他成員共享文件變得困難。

Photoshop的文件可以很快變得很大。我有一頁文件，輕松達(dá)到160MB。這種大小的文件確實會減慢計算機的速度，并且難以共享。

因此，如果您正在從事網(wǎng)站重新設(shè)計項目之類的工作，則需要將每個頁面另存為單獨的文件，這可能會造成混亂并且使項目中的所有頁面難以引用。

多功能軟件

對。奇怪的是，Photoshop的最大資產(chǎn)也是其最大的缺點之一。Photoshop是一種功能強大的工具，但它并不針對某一特定學(xué)科。這意味著它“可以”做很多不同的事情，但是它并沒有真正專注于完美地完成一件事情。

當(dāng)您使用Photoshop進行網(wǎng)頁設(shè)計時，必須瀏覽許多混亂和不必要的工具，這些工具可能會使您減速。

那么，Sketch如何比較？

草圖：利弊

Sketch是Photoshop的歌利亞的大衛(wèi)。

在統(tǒng)治了Web設(shè)計世界二十年之后，由于其“專注于Web設(shè)計器”的思維方式和強大的工具箱，Photoshop的統(tǒng)治地位正受到Sketch的挑戰(zhàn)。

許多設(shè)計師已經(jīng)將Sketch用作Web設(shè)計和UI項目的必備工具。真的值得切換嗎？在下面查看我的優(yōu)缺點列表。

優(yōu)點

文件大小

我注意到的關(guān)于Sketch的第一件事之一是文件比我的Photoshop文件小得多。

例如，我正在使用的當(dāng)前Sketch文件（包括該項目的所有設(shè)計）只有90MB。

對于在需要快速，輕松地共享文件的遠(yuǎn)程團隊中工作的任何人來說，這都是驚人的。

文件管理

將我所有的移動和桌面頁面設(shè)計容納在一個文件中的能力令人贊嘆。

它有助于使我的所有頁面井井有條，并允許我直接從一個文件導(dǎo)出多個設(shè)計。

能夠快速引用其他設(shè)計并確保所有內(nèi)容看起來一致也很好。

符號

我認(rèn)為符號是將Sketch與Photoshop分開的最大，最令人印象深刻的功能。

第一次使用Symbols使我對Sketch充滿了信心，并徹底改變了我進行設(shè)計的方式。

簡而言之，Symbol是Sketch中的一項功能，可讓您在文檔中重用（和更新）元素，因此您無需從頭開始重新創(chuàng)建它們。

您可能會想“ 在Photoshop中聽起來像是一個智能對象 ”，但是符號要比這先進得多。

使用符號可以像使用Photoshop中的智能對象一樣創(chuàng)建“母版”，從而可以跨不同文檔使用鏈接文件。但是，在Sketch中，您可以自定義所有實例，同時保留母版的核心結(jié)構(gòu)。

例如，上面的兩張卡是相同的符號，除了我現(xiàn)在能夠更改資源標(biāo)題，圖像甚至我是否想要特色圖像中的圖標(biāo)之類的東西。

在處理需要重復(fù)使用的頁面元素時，符號為我節(jié)省了大量時間。

如果需要返回進行編輯，則可以輕松地在主數(shù)據(jù)庫中執(zhí)行此操作，并且更改將全局應(yīng)用于所有實例。將它們視為頁面上使用的小型模板。

缺點

草圖僅在Mac上可用

在完全切換到Sketch之前，需要考慮的一點是，它目前僅適用于Mac。在北京永燦，我們是100％pro-mac的辦公室，因此運行僅Mac的工具不是問題。

但是，如果您所在的團隊中包括PC用戶，那么與他們共享Sketch文件可能會有些令人頭疼。有一些軟件可以讓您在PC上打開Sketch文件，但這是您不需要的額外步驟和工具。

Sketch運行于插件之外

有些人可能還對以下事實有疑問：Sketch是該工具嚴(yán)重依賴于其廣泛的插件庫。

初次使用Sketch時，只有開始設(shè)計所需的基本工具。

如果要將文件上傳到Invision，為開發(fā)人員標(biāo)記設(shè)計間距或執(zhí)行其他許多任務(wù)，則需要下載插件。

這更多是一個優(yōu)先事項。我個人很喜歡當(dāng)我第一次開始使用Sketch時沒有膨脹。Photoshop要求您必須挖掘大量的菜單，而在使用Sketch時，您將永遠(yuǎn)不會使用它們的基礎(chǔ)知識。您可以使用所需的插件自定義設(shè)計工具，以使用它的方式。

為什么北京永燦到Sketch？

在北京永燦，我們花費大量時間與客戶合作處理各種UX / UI項目和網(wǎng)站重新設(shè)計。Sketch實際上是為在該領(lǐng)域工作的團隊而構(gòu)建的。

以網(wǎng)絡(luò)為中心的思維方式不僅幫助我們提高了工作效率，而且還提高了工作質(zhì)量。

我們的團隊能夠利用“ 符號”和“ 共享樣式”等強大功能來使我們的設(shè)計在頁面之間保持一致。我們還可以在幾秒鐘內(nèi)在任意數(shù)量的頁面上實現(xiàn)全局更改。

您在Sketch中創(chuàng)建的每種效果和樣式都可以用HTML和CSS生成。它的所有工具都旨在讓您專注于設(shè)計，而不必對您永遠(yuǎn)不會使用的工具和效果進行分類。

那么，哪個適合您的團隊？

這不完全是一種情況。所有這些都是使用正確的工具完成工作。

如果您是從事大量UI和Web設(shè)計的團隊的一員，則應(yīng)認(rèn)真考慮改用Sketch。這是一個有助于加速工作流程的工具。

但是，如果您從事許多涉及編輯照片，創(chuàng)建GIF或創(chuàng)建圖形的項目，那么Photoshop將成為您的工具。

即使我現(xiàn)在主要在Sketch中工作，我仍然幾乎每天都在使用Photoshop，但僅用于其最初的目的-圖像編輯。

很容易陷入舊的困境，因為“這是我們一直做的事情”，但是作為快節(jié)奏的行業(yè)中的人們，我們需要尋找可以改善我們的工作流程和整體工作的新工具。

我很想聽聽您在Photoshop和Sketch中的使用經(jīng)驗，以及您更喜歡哪一種。請您留言！