至此，我們完成了app的定位、系統架構、產品結構、重要的2大流程圖（業務、頁面流程圖）以及所有頁面的原型稿和交互稿，接下來本文將圍繞UI的設計展開。
本系列是筆者拆解從0到1設計「職得App」，這個作品幫助我拿了好幾個offer，因此特別展開分享給大家。之前的文章，可以在筆者的個人中心閱讀，歡迎訂閱～
一、市場分析篇：市場分析（上）；市場分析（下）
二、競品分析篇：競品分析
三、用戶調研篇：用戶調研（上）；用戶調研（下）
四、需求管理篇：需求管理
五、架構流程篇：產品定位（上）；系統架構/產品結構（中）；業務、頁面流程圖（下）
六、原型設計篇：原型&互動設計
七、UI設計篇（本文）
八、PRD文檔篇
在此聲明：本系列的產品內容原創且非商用，如有雷同，你抄我的！
在上一篇原型&互動設計中，我們根據業務流程圖和頁面流程圖來做出來了能夠給開發使用的原型圖和交互圖。
其中重點拿「學員看視頻流程」這個看似簡單的流程做了案例拆解，我們得到了如下：
原型圖（線框圖）：
交互稿（低保真原型）：
接下來就是針對定稿的交互稿，讓UI同事負責包裝和開發規範。
上次我們也提到了，通俗來說，UI稿就是去定義視覺長什麼樣子，同時也負責交付給技術開發，因此還需要制定開發規範。
因此，如下圖，UI設計稿可以分為兩層：「視覺概念設計」和「設計執行規範」。
前者是產品經理需要關注的，而後者則是技術開發需要關注的。對於「職得App」這樣一款模擬、從0到1設計的產品。尤其重視設計原則、設計模式、情感共鳴、視覺結構和層次等。
視覺絕對是用戶體驗的一環，這個已經是常識。最著名的就是《用戶體驗要素》這本書的用戶體驗五層框架。如下圖，視覺層就是「表現層」：包含有屏的產品作業系統視覺和產品外觀視覺或者說最終產品的外觀。
有些人認為視覺設計和產品經理無關，大錯特錯。在之前xxxxx（產品定義）的文章中我就提到了產品經理做了功能定位、用戶畫像的描述以及產品目標。而視覺設計正是基於此，即「表現層」是基於「戰略層」和「範圍層」的理念，又是在「結構層」和「框架層」上進行加工包裝。
互動設計和視覺設計很相似，但又完全不同。如下圖-右，視覺概念設計包括品牌、logo、需求/價值觀、icon、字體、尺寸形狀等。
回到我們「職得App」的項目中來，回顧一下在之前做的產品定位：
名稱：職得App
定位：大牛培伴式網際網路職場技能學習平臺；
slogan：陪練十遍，技能自現；
目標用戶：非一線網際網路職場新人；
用戶痛點：在中小型公司得不到業界大牛指點崗位技能的機會。
首先定下整體品牌、logo和色彩基調：選用藍色冷色調作為主要色調，與職場相關，在loge設計上突出稜角，彰顯技能的銳利和重要性。另外整體logo採用微漸變，體現出呼吸感和前衛感，與傳統職場死氣沉沉的死板印象區分開來。
正常情況下公司的產品都不是從0開始，並且很少會改動整體品牌風格。一般的需求改動更多涉及是依據公司現有的色彩、尺寸、字體規範來做新的icon的設計、元素設計、頁面設計。
這裡貼一篇騰訊小程序UI：https://isux.tencent.com/articles/QQ-mini-program.html。講的就是如何設計遊戲類小程序的UI視覺，完全基於產品的定位和屬性來進行設計色彩、形狀、尺寸和調性。
對於「職得App」來說也是如此，因為一期產品相對很簡單，因此根據上面定下來的整體品牌感覺，著重針對icon、字體、還有尺寸設計。
icon：
字體：
各頁面尺寸：
效果圖：
注意，在「視覺概念設計」階段，我們注重的是「定位」「情感」「調性」「價值觀」這些詞語。視覺的感覺能否匹配產品的定位或者是功能的目的。
例如：品牌情感的輸出與職場相關則選擇冷色調為主，但又強調的是陪伴式，不能過於死板，會選擇柔和和icon。在V1.0.0版功能上是強調「大牛、圈主」，因此在進行尺寸設計時頁面更多展示圈主的信息和內容。
作為產品經理，你要去和UI設計師把控整體產品在視覺上體現出來的感覺。整體的畫風是否是你想要的，或者說是否和當前產品所保持一致。
除了產品經理關注的視覺概念設計之外。UI設計師還需要根據概念設計進行「標註」、「切圖」的工作，因為技術開發要完全按照這些標註數據來進行開發。
我們目前得到了「職得App」各頁面的概念設計圖。部分圖如下：
現在假設自己是UI設計師，你還需要對這些圖片進行「標註」和「切圖」，否則無法開發。
由於「職得app」是我在「起點學院就業特訓營」的模擬項目，並非公司商業項目，用不著交付給技術開發同學。因此沒有進行標註和切圖，而且產品經理並不需要了解這方面的知識，除非公司小到不得不兼任設計師。
關於「標註」和「切圖」，這篇文章寫得不錯，有興趣的產品經理或者悲催到切圖也要自己上的產品經理，可以詳細研究一下。
大概每個頁面、每個元素會變成如下：
最後貼上「職得APP」的全部概念設計稿：https://www.zcool.com.cn/work/ZNDA5NjA5MDg=.html
首先，再次感謝設計師朋友Vincent（站酷&微博：楊錦Vincent），賦予了一個模擬從0設計APP項目「職得App」新生，沒有UI設計的app是沒有靈魂的！要設計的朋友可以聯繫他。
現在設計稿也有了，把之前所有的東西整理成PRD即可！所以，下一篇內容：從0設計App（8）：PRD撰寫，也是這個系列的最後一篇內容。
作者：朱魯斌，公眾號：字字朱心。每周深度思考一個問題，不穩定的世界裡找到一份篤定。
本文由@朱魯斌 原創發布於人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash， 基於CC0協議。