• 想從事UI設計行業的小伙伴們好奇UI設計的工作流程

• 小公司的UI設計師好奇大公司大項目的UI設計工作流程

• 大公司的UI設計師想知道其他大公司的項目中的UI設計師的工作流程

事實上，設計師的工作流程，鑒于不同規模的公司和項目會有所差異，但基本大同小異，必須有的流程還是要執行的，下面即將為大家介紹互聯網公司小伙伴們的日常：

產品經理：

• 初期：需求調研 → 競品分析 → 產品規劃；

• 前期：思維導圖「功能模塊」 → 需求文檔「流程邏輯」，原型設計「信息架構」→ 評審；

設計師：

• 中期：準備工作 → UI設計 → 交互原型 → 評審→ 標注切圖；

攻城獅

• 后期：開發跟進 → 用例測試 → 上線；

接下來為大家介紹日常用到的工具：

一、準備工作

產品結構和邏輯梳理階段：思維導圖軟件MindNode ＋流程圖軟件Viso

邏輯梳理：流程圖軟件Visio對本次需求的流程進行梳理，這步是很有必要的

很夸張的是，大多數產品團隊中，往往只有交互設計師認真從頭到尾思考過產品流程；同時大多數產品，直到完成后才發現流程上的 bug，但此時只能假裝沒看見。

只有設計師明白產品整體的使用流程，才能站在全局的角度去看待本次的設計任務，讓設計師也從始至終參項目，這在后面會減少很多溝通成本。

二、UI設計

主力設計工具 Sketch，不用多說，無限尺寸的畫布配合快捷鍵和龐大的第三方模版更利于輸出移動產品原型。如果在團隊全 Mac 的配置下，還可以無縫銜接設計與前端的項目協作。

三、交互原型

強烈推薦:主力交互工具Flinto，是一個使用圖片快速生成移動應用的原型，簡單粗暴，只要上傳幾張設計效果圖隨便拖拽幾下，只需要幾分鐘就可以部署到手機上查看逼真的交互效果，學習成本極低，最開心的是版本已經有中文版了。

Appstore下載Flinto，可以在手機上實時預覽，查看逼真的交互效果，跟成品差別不大，開發再也不用過來問，這個應該跳轉到哪個頁面，這個怎么操作......

尤其是給老板，客戶展示的時候，一來這貨夠專（zhuang）業（bi），二來千言萬語不如真機來體驗一下。

四、評審

戶體驗地圖：把根據「問題」和「驚喜」的數量情況，和重要性程度，理性地判斷每個行為節點的情感高低，并連線。

1、看看最高點，為它多做一點事情，將它推到。

2、看看點，思考能不能把其它體驗值高的步驟，分攤一部分功能到這里，均衡體驗情感。

用戶體驗地圖：如果你參加過收費的 workshop 或者看過講設計方法的書，你一定聽過體驗地圖（Experience Maps）。在一些些臺版書籍里也叫使用者旅程圖（User Journey Maps）。

使用幫助：以干貨開場，如何有效地做用戶體驗地圖

體驗地圖第一大優勢：好看。它以視覺化的方式，將用戶與產品或服務進行互動時的體驗分階段呈現出來，讓體驗地圖中的每一個節點都能更直觀地識別，評估和改善。不論是電子版還是滿墻的便利貼，在效果上已經充滿了形式美。

體驗地圖的第二大優勢：非常貼合時下流行的「情感化設計」。體驗地圖能協助團隊精準鎖定產品引發強烈情緒反應的時刻，同時找到最適合重新設計與改進的地圖節點，這一切都幾乎用戶使用中的情感需求。

體驗地圖的第三大優勢：能夠多人參與，并且讓所有人都橫向梳理一遍產品流程。很夸張的是，大多數產品團隊中，往往只有交互設計師認真從頭到尾思考過產品流程；同時大多數產品，直到完成后才發現流程上的 bug，但此時只能假裝沒看見。

為什么你覺得體驗地圖無用？因為你不知道：

體驗地圖并不是一個獨立的設計方法，它是產品用戶研究過程中重要的一部分。在我做過的案例中，體驗地圖往往是最終收尾、拿結論的最關鍵節點——但是不能脫離了前期其它設計方法的材料準備。

轉自專欄：理科生是設計師

作者：星玫

五、切圖標注

相信大多數設計師只希望做好屬于自己的界面設計，不想在切圖和標注這上面浪費太多時間，每次一到要標注的時候，心中就萬頭草泥馬在奔騰

勞資是一個設計師，不是切圖仔！！！

還是默默地去標注尺寸去了，讓本公舉切圖該多好!心里想如果有一天能不在

切圖工具演變路徑：馬克鰻 → Pxcook→ Zeplin

直到發現了zeplin這個神奇的工具，以后再也不用標注和切圖了，使用zeplin有以下好處：

1.標注尺寸那里需要點那里，距離相鄰元素的所有尺寸和顏色清晰明了，之前是標注太細致，ui沒法看，標太少，相當于沒標注

2.支持css/less/saas等css屬性，直接粘貼，開發簡直不能太爽了

3.支持標注，方便團隊協作（可以替代prd文檔了）

4.支持色板和字體 導航 ，可以用作使用規范

關于zeplin：

隨著sketch的普及，好多團隊都陸陸續續把sketch作為設計主力工具，去年zeplin發布1.0版本時候還不支持Photoshop cc，一年過去了，版本已經可以兼容版的ps了，可喜可賀。并且zeplin客戶端在Mac和Windows上面都有對應的版本。

再也不需要為了一個zeplin去學習sketch了，ps也支持啦！畢竟再重新學一個軟件，本寶寶心好累

安裝步驟：zeplin官方安裝幫助

步驟一：安裝軟件＋zeplin插件

1.Mac用戶：安裝sketch；Zeplin.app；zeplin-sketch插件

直接解壓安裝即可

2.Windows用戶：安裝Photoshop CC2015；Zeplin.app；zeplin－ps插件&面板

步驟二：注冊zeplin迭代帳號，邀請項目人員。

步驟三：把sketch或ps里的文件導出到zeplin

使用姿勢：

切圖神器二：slicy是經過測過幾種輔助切圖工具后又回來使用的神器。「把整個 PSD 扔進去，結束。」簡潔利落不啰嗦。我愛它的程度已經到了沒有它我就不會切圖了（哈哈）。

1. PS 圖層依規則命名→2. 把檔案丟進 Slicy 里→3.完成

夠簡單無腦了吧？

使用姿勢gif：

其他實用工具也分享給你

1.圖標管理工具

▌iconjar for Mac：目前支持 SVG、PNG、Gif 三種格式的圖片。建議大家去官方下載官方素材庫資源時候盡量導入svg格式,這樣以,畢竟是矢量的.

選中某個圖標,側邊欄會出現名稱和標簽,當然不需要的右邊欄話也可以在菜單欄隱藏.

偷懶姿勢：

1）下載圖標并安裝：官方素材庫

2） 把圖標拖進sketch或ps 里。

▌Icon8 for Windows：提供客戶端（Mac/Windows）來方便用戶搜索和直接下載圖標，沒有付費的用戶可以使用客戶端程序獲取50PX（像素）的 PNG 圖標，而且能自定義圖標顏色。通常的使用中，這些風格統一、可以定制顏色的小圖標就夠用了，如果要進一步獲得大尺寸的圖標或 eps 矢量格式需要付費。

支持：Photoshop, Axure, Visual Studio 等等,如圖所示

2.字體管理工具：Rightfont

下面是google自動翻譯的，大概意思還是正確的

3.GUI 規范管理與共享（圖標/色板）：Lingo 

這個可以當做公司內部設計師和開發公用的一套GUI設計規范來用,

• 團隊:收費

• 個人:完全免費

頂部工具欄可以創建色板,吸取顏色創建完成后,直接Command+c復制 Commandl+v粘貼 進sketch或ps 里,完成取色任務.

最右邊支持HEX RGB HSB 顏色的拷貝和粘貼,同時支持css顏色代碼快速顯示

偷懶姿勢：

1） 創建色板

2）把Command+c復制 Commandl+v粘貼 進sketch或ps 里。

4.設計素材收集：Zoommy+Inboard

• Zoommy （Mac/Windows均可）

每個設計師都有一個習慣，那就是做設計之前先去搜素材，每次找個合適的素材會花很長的時間，百度的圖片質量各位都懂，那么問題來了，如何快速的獲取到你想要的圖片素材呢？

相對來說我們上高中的時候找圖片，找半天都找不到中意的素材，現在比之前好多了，免費的素材也要多很多，有些質量還挺棒的，高清無碼大圖。

所以小公舉用的就是一款多圖庫源管理應用-Zoommy，有了它我們可以很方便的關注40多個圖庫源，找素材的效率大幅提升。

媽媽再也不擔心我找圖了，hiahia~

Windows上面也可以用，不多說，上圖：

• Inboard：比Ember更輕盈

如果你用過Ember回頭再來使用Inboard，你會發現它在功能上確實會少很多。但帶來的好處就是應用足夠輕盈，易用。再看看Ember中那些復雜的功能，我會用到的始終只會是它其中的一小部分。

1.文件夾和Tag方式的圖片素材管理

2.Chrome、Safari的全屏截圖保存

3.Dribbble like的關注兩個核心功能 延伸閱讀 如何成為 Dribbble 的 Player ？

使用截圖

講到這里，是不是如獲至寶

良心推薦，無私分享

有沒有講到你的工作上的痛點呢？

趕緊下載用起來吧！

藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務