UI的設計流程是什麼？以及每個步驟需要用到的軟體？

01-21

看了很多關於ui的介紹，但是知識過於碎片化，還是不太清楚整改UI設計流程，補充一個問題，app從設計到在應用商店上架的整個流程是什麼？

這玩意可以用蓋樓來解釋。一共四步而已：

要有什麼功能
這些東西的位置和順序
這些東西長什麼樣
把這些東西做出來

比如我們要蓋一棟大樓。

首先我們希望住在這棟樓的人基本都是有家庭的中產階層。所以生活配套都是齊全的，有學校，有商場，離公司比較近。而且交通便利。

這叫產品需求規劃。

接著來一場討論。在這座城市裡，距離公司近又有學校的地段價格非常貴，不是我們住戶可以承受得了的價格。那該怎麼辦？討論後，決定把距離公司近改為，距離地鐵站近。

這叫需求評審。

然後我們開始決定這些東西的位置和順序。把地鐵與大樓的距離定為500m,這樣地鐵的雜訊就不會吵到住戶，而且住戶走路就可以過去；我們把商場建在住宅的底層，這樣住戶購物方便，商場又有了人流量，而且底層的住宅還賣得出去（中國老百姓特別不喜歡低樓層的房子，怕灰塵和採光）。因為住戶都有家庭，所以每戶都是兩廳兩房的。

這叫交互設計。

其次我們開始設計大樓的樣子。外觀是白+黃的色調，可以營造溫馨家園的氣氛。用較重的鋼筋來建築，可以保證住宅多年不容易傾斜；每層調低一些，每戶面積都是89平，這樣就較為經濟適用一些。牆面貼的都是大塊的瓷磚，不僅顯得高檔，而且不怕小孩子亂塗亂畫。

這叫視覺設計。

敲定方案後，設計師把圖紙都畫出來，標明樓的各個尺寸，還有要使用的建材類型等等。給工程師過目。

這叫設計標註。

最後工程師按照圖紙把大樓建造起來。

這叫開發實現。

UI是一個完整的產品設計的概念，包括PM+UE+UI+前端，四個部分

全流程大體是：前期用戶調研——思維導圖——線框圖——低保真原型圖——帶交互的原型圖——高保真視覺稿——開發——測試——1.0版上線運營推廣——再調研再改版再測試2.0版

1，開始，原則上開完原型評審會議之後就開始設計

2，設計階段，如果沒有視覺規範的話先做設計規範，後續需要及時調整，讓開發看的；

用sketch或者PS根據原型圖，架構圖，流程圖，先把效果圖的做出來，如果有問題及時和產品經理溝通；

全部UI做完之後,出一份效果圖放進SVN讓產品經理先過一遍，有問題就討論修改；這時候不要全聽PM的，如果他覺得那裡設計的不滿意，就和他討論，如沒打成共識則交互層面聽PM的，UI自己做主，再不行找第三個人討論。

3，UI評審階段，這時候全體公司成員聽UI講一遍設計稿，如有問題就記下來修改，尤其是開發和後端的問題，下來修改讓PM確認一下就開始下一階段了

4，切圖標註階段，用markman,或者PS插件切圖標註，先把視覺規範讓開發看一遍，然後按照視覺規範標註切圖，這裡如果有不會的標註或切圖就問一下開發，這個階段其實很瑣碎，要有SVN文件管理，切圖命名規範，標註共識等等，現在基本每個UI有自己的一套規範和流程，這需要一定的工作經驗了，當然你也可以看知乎很多大神的工作流程，這裡不再獒述

5，引導頁，展示頁階段，在工程師開發完現階段需求的之前，做引導頁，Appstore展示頁設計，這個由PM或者運營出文案，按照文案設計，其次是圖標，iOS和安卓的不盡相同，iOS的出直角，安卓出圓角；應用商店需要的圖標和展示頁根據各個商店的要求來，讓運營給你個表格做就行

6，UI審查階段，可當面溝通也可把UI出問題的頁面截下來用圈點工具標註問題放到SVN，讓開發改，改不改到位你要自己安裝APP測試版核對，測試工程師不管你的UI做沒做到位，況且這問題只有你自己清楚，"像素眼"就是這時候練出來的.

下邊是我自己的SVN文件整理方式，按版本和工作文件分文件夾,所有的文件在SVN本備分好，防止丟失

我在知乎裡面收藏一些好的UI設計文章：設計 - 收藏夾