## 產品研發的三個階段 //   軟件發展到現在已經標準化，工程化了。 > 根據**流程和參與成員的角色**，將一個產品從立項，討論需求直到開發完成到上線的全過程分為三個階段。 **第一階段（產品經理）：** ider，市場調研，需求討論/確定，手繪圖/稿，原型圖； **第二階段（UX/UI設計師）：** 手繪圖/稿，線框圖，視覺稿，（高）低保真線框圖，高保真設計稿，設計稿； **第三階段（程序員）：** 根據前兩個階段得到產品的邏輯和界面設計進行代碼開發，出demo，出成品，不斷迭代； 原型圖：主要是前期確定產品邏輯用的，主要是項目經理控制的。 設計稿：UX/UI設計人員根據產品前期討論確定下來的需求，即原型圖來設計的。設計稿需要比較專業。對開發人員來說最重要的就是設計稿，設計稿是開發階段所依賴的，設計稿包含高保真素材，開發人員最終是拿到高保真設計稿并還原成UI界面的。 所以不同階段所需要的角色，一個產品的成型背后還有這些東西的身影。 #### 各個階段所使用的工具、軟件 第一階段：需求管理，文檔管理，原型圖設計，Visio，Xmind，Axure，墨刀，Mockplus 第二階段：UX/UI設計師，Photoshop，Adobe XD，Sketch 第三階段：Visio，Xmind，Doc，Git，xxIDE，Sublime Text，Linux，PHP，Mysql，DevOps，…… >[danger] （用于做原型（設計稿/設計規范/設計規格）的設計軟件必須要有`自動貼合`，`自動對準`，`微調/自動調整`，`標尺`，`度量值`，`自動標注`等功能，這很重要，不然手動對準很難調整對準這些尺寸，難免會有偏差，也不標準。對于設計來說，需要專注于設計本身，而不是這些繁瑣又容易出錯的事情。） * * * * * ### 擴展 [Sketch和Axure畫原型，哪個好用？-UI中國-專業用戶體驗設計平臺](http://www.ui.cn/detail/114866.html) > 總結一下，如果想表現產品的業務流程，那么我建議使用Visio來繪制流程圖。如果想表現產品的頁面圖文布局和頁面的跳轉關系，我建議使用axure。如果想表現產品的信息架構，我建議使用Mindmanager或Xmind。如果想表現產品的視覺層，包括圓角＋投影＋布爾運算畫icon，我建議使用Photoshop或Sketch來作圖。 [error 69: -1: -1 when uploading design |?Adobe Community](https://forums.adobe.com/message/10511750#10511750)（解決無法上傳：`error 69: -1: -1 when uploading design` 問題的討論） [Adobe XD CC_Xd中文網](https://xd.94xy.com/) [Adobe XD如何標注 標注插件_Adobe XD CC_Xd中文網](https://xd.94xy.com/zuixindongtai/57.html) [PxCook - 最高效易用的自動標注工具，設計研發協作利器](http://www.fancynode.com.cn/pxcook)（自動標注工具，生成前端代碼, 設計研發協作利器） [FancyNode](http://www.fancynode.com.cn/)（設計軟件） [Framer教程 | Framer & Sketch: 一個有意義的工作流 - 簡書](https://www.jianshu.com/p/fa86de31cb63) [Cutterman - 為設計更專注](http://www.cutterman.cn/zh) [Cutterman - 最好用的切圖工具](http://www.cutterman.cn/zh/cutterman) [運維開發融合 - CSDN博客](https://blog.csdn.net/u010098331/article/details/52825223) [優秀的設計資源 · 產品設計 · 看云](http://www.hmoore.net/xiak/product/643133) [教程 | 與程序員進行高效溝通，三分鐘帶你掌握Zeplin](https://www.sohu.com/a/212650557_100087428) [UI設計教程：APP切圖適配規范](https://www.365yg.com/a6337139493007556865#mid=5891797386) > 設計眼中的程序員，看她們切圖時是怎么想我們的。 > > 2倍圖應該是制作時就按照最大的尺寸制作，不然放大的二倍圖會模糊，不過縮小的倍圖不會失真嗎，這樣的話豈不是制作時就要制作多份，還是這個導出多倍圖并不是簡單的縮放處理，不會導致模糊和失真嗎。 [我有一個 App 創意丨如何將其實現？ - 知乎](https://zhuanlan.zhihu.com/p/21719921?refer=fenzo) > 1. 需求梳理、分析（產品功能腦圖、一份功能列表） > 2. 產品原型圖繪制（產品原型圖、產品業務流程的泳道圖、簡單交互的原型） > 3. UI設計（風格稿、標注、切圖、sketch） > 4. 項目經理&技術負責人對接需求（細化需求） > 5. 技術方案 & 架構設計（整個項目的技術方案、可持續迭代的技術框架方案） > 6. 項目排期 & 任務分解（項目管理） > 7. 產品研發階段（Wiki對接、PAW） > 8. 交付測試階段（測試用例、測試過程） > 9. 最后，按原計劃上線 > > 以上均是理想情況下，一個App必經的幾個階段的簡潔步驟說明，具體執行依然會根據需求穿插進行。 > 不同的項目管理模式或許會有完全不同的流程步驟。但是專業性幾乎是保證產品質量的唯一準則。 * * * * * ### Adobe XD筆記 #### 框線、路徑線、符號線之間的區別 **框線**只能按住頂點對元素進行橫向和縱向上的縮放調整（只有在按住shift時為等比縮放），而**路徑線**則更加靈活，可以通過隨意拖動路徑頂點來使元素變形，**還可以在元素邊上點擊添加更多的路徑頂點（強大）。** 元素的框線和路徑線顏色都為淡藍色，**符號的“框線”為綠色，我們把它叫做符號線（符號線始終為正形矩形）。** 路徑線默認有一個頂點為選中實心狀態，可以根據這點區分路徑線和框線的區別。 框線在元素為選中狀態下就會顯示，此時可以通過框線對元素進行調整。而路徑線只有雙擊元素，使元素處于“激活狀態”時才會顯示。（單擊符號元素選中的是符號元素本身，雙擊符號元素選中符號下面的第一個元素，當然也可以通過圖層面板來快速進行操作） 任何元素都有:hover效果，鼠標移上去元素上會有一層正形矩形的輪廓。符號元素的輪廓顏色為綠色，其它元素為藍色。 所有非符號的元素右鍵【制作符號】都可以制作為符號，可以同時選中多個元素一起制作為符號。 符號是一種特殊的元素，符號下面有其它元素。 實驗：點擊選中符號元素，顯示綠色的符號線，再雙擊顯示選中下面的元素，此時顯示淡藍色的框線（外層的符號線變粗變透明了一點），繼續雙擊，元素變為“激活狀態”，只顯示路徑線了，現在可以進行路徑調整了。 任何XD項目中的元素（也包括路徑、符號）都可以無縫復制到其它新項目中再次進行調整。實現了跨平臺分享的能力，更重要的是XD竟然能打開sketch和ps的文件，這讓我們有展望XD一統江湖的前景了。 強大！ ~~~ 之前錯誤短淺的理解 符號元素沒有路徑線，所以不能在對它進行形狀上的改變了，但是依然可以通過框線進行橫向和縱向上的縮放調整。（錯！還可以繼續雙擊是元素為“激活狀態”顯示出路徑線再進行調整，任何元素都可以再變形） ~~~ * * * * * last update：2018-7-24 19:12:00