無論是在上市BAT還是創(chuàng)業(yè)小公司依溯，都隨時可能接手到從0開始的新項目耿眉，那么作為負責新項目的主設OR獨立設計師菌瘪，我們應該從何開啟工作呢蚁袭？
01/產(chǎn)品需求溝通
項目開啟的第一件事必然是和產(chǎn)品經(jīng)理的熱烈碰撞征懈，那么如何在溝通中體現(xiàn)一個UI設計師的專業(yè)水準呢？
1. 了解產(chǎn)品定位
首先要明確這是一款什么類型的產(chǎn)品揩悄，是工具型APP卖哎、社交型APP還是電商APP？
2. 確定目標用戶
接下來就是確認目標用戶群删性，是大學生亏娜？寶媽？還是廣場舞大媽蹬挺？具體到年齡段和大致職業(yè)方向维贺。
3. 有無相關競品
大部分的產(chǎn)品原型都會有一定的參照競品，不排除個別完全創(chuàng)新的產(chǎn)品巴帮。雖然我們自己也能找到類似的競品溯泣，但是建議產(chǎn)品經(jīng)理給出TA認為合適的相關競品，這里有2個好處：
?? 提供更多的競品以供視覺分析
?? 有助于我們了解產(chǎn)品經(jīng)理所想達到的APP設計效果榕茧。
4. 梳理原型圖大致邏輯
在這里假定大部分公司沒有交互設計師的崗位垃沦，原型圖1.0由產(chǎn)品經(jīng)理來出。
那么在第一次交流溝通中用押，產(chǎn)品經(jīng)理會詳細描述一遍TA的原型圖跳轉(zhuǎn)邏輯與各界面內(nèi)容肢簿，我們需要了解APP版本1.0所需要完成頁面設計所有內(nèi)容，及時反饋不合理的跳轉(zhuǎn)邏輯只恨。
5.確認工作排期
在溝通后译仗，需要協(xié)調(diào)產(chǎn)品開發(fā)進度，給到大致的設計排期官觅。一般來說我們會這樣進行新項目的設計時間管理（針對復雜程度中等的APP）
*基本中小型APP1.0版本都沒有排期來完成界面的交互動效纵菌，所以這部分我們放到項目UX設計1到2的文章中再說。
02/風格定位分析
在收集了產(chǎn)品需求之后不要著急開始頁面設計休涤，還有幾個磨刀不誤砍柴工的步驟
1. 競品視覺分析
分析相關競品的視覺展示主要有2方面好處：
?? 檢測我們在模塊設計時是否有所忽略咱圆，有無更好的視覺表達方式。
?? 注意與競品保持一定差異性功氨，保證自己的產(chǎn)品調(diào)性序苏。
不過需要注意的是，在競品分析中不要受到競品影響而無法進行創(chuàng)新思考捷凄，永遠在競品基礎上思考更優(yōu)化的方案忱详。
2. 確定品牌色與APP風格
品牌色是一個需要慎重思考的內(nèi)容，因為一旦確定開始設計運營跺涤，之后要進行改動都是比較困難的事情匈睁。一般情況下监透，品牌色與APP類型、目標用戶有關航唆。
這里舉一個例子：最近在做的一個針對小白用戶群的理財資訊類APP胀蛮。那么可以分析得出幾個風格關鍵點：舒適留白（深度閱讀），親和力（財富相關）糯钙，細節(jié)創(chuàng)新（用戶黏度）粪狼。
我們使用了#FFC900（黃色）作為品牌色（暖色、與大部分紅色競品拉開差異任岸、同時干擾閱讀性較弱）再榄。
3.初步的LOGO方案
?? 文字型
把APP的大名放在APP里，或者APP名稱中的一個字放在APP里演闭。例子可以說是數(shù)不勝數(shù)不跟，可以稱為是APP LOGO設計最大眾最保守的方案。原因也很簡單米碰，因為這樣的LOGO設計簡單粗暴窝革，識別度高，最適合國人的閱讀偏好吕座，因此之前也有數(shù)據(jù)說明是下載率最高的APP LOGO類型虐译。
?? 字母型
一般使用APP名稱拼音或英文的首字母放在APP里。其實英文字母與國人來說和圖形是相對類似的吴趴，只是使用字母對于APP的品牌名稱可能更容易直接呼應上漆诽。
?? 圖形型
圖形化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)容，細化區(qū)分不規(guī)則內(nèi)容君账。
但是這里建議如果非必須繁堡，盡量少使用分割線，不僅只是為了美觀和視覺潮流，更重要的在于帖蔓，分割線（尤其重色分割線）容易使頁面產(chǎn)生割裂感矮瘟，大量使用的話還會造成閱讀干擾瞳脓。
?? 無框式
適用于大圖塑娇、文藝類的產(chǎn)品。這大概是近一年最流行的潮流風格了劫侧，從iOS11更新以來埋酬，大標題無框式的構(gòu)架在各種飛機稿中隨處可見。但是產(chǎn)品是否真的適合這樣新的潮流風格烧栋，仍需要設計師仔細思考写妥，而不應該盲目追隨設計潮流。
5.? 思維導圖
在設計風格與LOGO方案都基本敲定后审姓，可以對交互原型進行一個思維導圖梳理珍特。讓自己更清楚產(chǎn)品的整體框架與跳轉(zhuǎn)邏輯。
03/開工界面設計
你是一個披著UI設計師羊皮的美工嗎魔吐？
1. 模塊化管理你的設計稿
這里我們不提如何給文件夾命名之類雞肋的事情扎筒，每個公司都有自己的習慣，入鄉(xiāng)隨俗就好酬姆。
重點的是如何用sketch搭建一個規(guī)范高效的界面框架嗜桌。對于界面設計中重復出現(xiàn)的UI kit（UI組件），比如tab 圖標辞色，按鈕骨宠，我們都可以以symbol（符號）化的方式避免反復多次修改與設計稿的混亂。
2. 考慮設計延展性
所有后臺上傳數(shù)據(jù)可能的最大值相满，比如粉絲层亿、關注、點贊的數(shù)值最多多少位立美，卡片信息標題最多多少字以及金融產(chǎn)品中個人賬戶的數(shù)字最大位數(shù)匿又。
往往區(qū)同美工與UI設計師的不是你的界面做的有多漂亮，而是細節(jié)你考慮的有多到位悯辙。具體有多少設計的可能性與延展性可以注意琳省，我也在不斷收集中，之后應該會再寫一文給大家總結(jié)一下躲撰。
3. 努力以設計解決問題
其實不單單是UI設計拢蛋，所有的設計領域桦他，一個好的設計師應該不僅僅只是美化產(chǎn)品，更多的應該是去解決問題。
在看到產(chǎn)品的原型圖時快压，首先思考TA為何要這樣畫原型圆仔，是否有更好的交互方式。這里舉一個例子：還是上文中提到的那個理財資訊APP項目蔫劣。
需要我們留意的是坪郭，發(fā)現(xiàn)頁在這里屬于一級界面，如果按照產(chǎn)品經(jīng)理所羅列的版式進行設計脉幢，那么會造成一個結(jié)果：頁面樣式過于單一歪沃，對于黏度本身就不高的小白用戶群，這樣的平鋪方式很不利于APP留住用戶嫌松。
但是從產(chǎn)品經(jīng)理的角度出發(fā)他們同時關注信息的展示效率與曝光度沪曙。所以需要如何解決這個問題，達到兩全其美的效果呢萎羔？
在與產(chǎn)品經(jīng)理溝通后液走，提議用不同布局新增了熱門話題模塊，在保留了一定信息平鋪列表保證信息露出的基礎上贾陷，增加了信息表達的視覺多樣性與內(nèi)容優(yōu)先級缘眶。
04/與開發(fā)的對接
設計師與開發(fā)爸爸的碰撞已是老生常談，但是視覺還原做的不好昵宇，除了開發(fā)的鍋磅崭，設計也有責任哦。
1. 何種形式的切圖瓦哎、標注最高效
一些公司的流程習慣使用設計直接用markman或類似標注工具砸喻，標出密密麻麻的標注圖給開發(fā)。但實際上這樣的對接效率無論對開發(fā)還是設計來說都不是一個科學高效的進行方式蒋譬。
所以建議使用sketch的插件sketch measure>規(guī)范割岛，直接導出Html頁面，可以直接用鼠標在html中查看任意的區(qū)域文字顏色等開發(fā)所需的css樣式犯助，免去了人工標注的時間癣漆。
2. 必不可少的視覺走查
基本每個版本開發(fā)完成后剂买，都需要進行視覺走查校對惠爽，因為開發(fā)多少都會有一些視覺上的實現(xiàn)偏差。但視覺上的偏差有時候不完全是開發(fā)的鍋瞬哼，一些細節(jié)設計師也是要負責的婚肆。
比如，在sketch里單行字的間距沒有調(diào)整為與字體字號相同時坐慰，導出的html里就會顯示比實際字體要大的字體较性，這樣的界面開發(fā)結(jié)果就是行間距莫名的變窄了。又比如以圖片比例不為整數(shù)的設計稿，開發(fā)適配完一般都不會是你設計稿上的圖片大小赞咙，因為無法適配责循。
05/建立視覺規(guī)范
你的視覺規(guī)范能物盡其用嗎？
大部分高設在整理視覺規(guī)范的時候還是習慣做出一個幾十來頁的PDF攀操，很可能只是一個擺設院仿，開發(fā)不會看，連設計師自己都不會多看崔赌。
其實實用有效的視覺規(guī)范應當盡可能簡潔意蛀，而更多的控件樣式由ui kit來展現(xiàn)。
UI kit的匯總建議也在sketch中完成慈迈，這樣也可以導出html供開發(fā)直接使用。這樣看來一個可以直接使用的UI kit明顯比N多頁規(guī)范與控件混合的pdf要實用很多省有。
UX設計0到1暫時寫到這里痒留，有機會還會再更新一篇1到2，給大家總結(jié)一下如何做精細化設計與設計提升蠢沿，筆芯?伸头。
