至此，我們完成了app的定位、系統(tǒng)架構(gòu)、產(chǎn)品結(jié)構(gòu)、重要的2大流程圖（業(yè)務(wù)、頁面流程圖）以及所有頁面的原型稿和交互稿，接下來本文將圍繞UI的設(shè)計展開。

本系列是筆者拆解從0到1設(shè)計「職得App」，這個作品幫助我拿了好幾個offer，因此特別展開分享給大家。之前的文章，可以在筆者的個人中心閱讀，歡迎訂閱～

一、市場分析篇：市場分析（上）；市場分析（下）

二、競品分析篇：競品分析

三、用戶調(diào)研篇：用戶調(diào)研（上）；用戶調(diào)研（下）

四、需求管理篇：需求管理

五、架構(gòu)流程篇：產(chǎn)品定位（上）；系統(tǒng)架構(gòu)/產(chǎn)品結(jié)構(gòu)（中）；業(yè)務(wù)、頁面流程圖（下）

六、原型設(shè)計篇：原型&交互設(shè)計

七、UI設(shè)計篇（本文）

八、PRD文檔篇

在此聲明：本系列的產(chǎn)品內(nèi)容原創(chuàng)且非商用，如有雷同，你抄我的！

一、前言

在上一篇原型&交互設(shè)計中，我們根據(jù)業(yè)務(wù)流程圖和頁面流程圖來做出來了能夠給開發(fā)使用的原型圖和交互圖。

其中重點拿「學(xué)員看視頻流程」這個看似簡單的流程做了案例拆解，我們得到了如下：

原型圖（線框圖）：

交互稿（低保真原型）：

接下來就是針對定稿的交互稿，讓UI同事負(fù)責(zé)包裝和開發(fā)規(guī)范。

二、UI設(shè)計稿

上次我們也提到了，通俗來說，UI稿就是去定義視覺長什么樣子，同時也負(fù)責(zé)交付給技術(shù)開發(fā)，因此還需要制定開發(fā)規(guī)范。

• 原型需求稿：頁面有什么功能（why）
• 交互UE稿：功能如何被用戶使用（how）
• 視覺UI稿：功能長什么樣子（what）

因此，如下圖，UI設(shè)計稿可以分為兩層：「視覺概念設(shè)計」和「設(shè)計執(zhí)行規(guī)范」。

前者是產(chǎn)品經(jīng)理需要關(guān)注的，而后者則是技術(shù)開發(fā)需要關(guān)注的。對于「職得App」這樣一款模擬、從0到1設(shè)計的產(chǎn)品。尤其重視設(shè)計原則、設(shè)計模式、情感共鳴、視覺結(jié)構(gòu)和層次等。

2.1 視覺概念設(shè)計

視覺絕對是用戶體驗的一環(huán)，這個已經(jīng)是常識。最著名的就是《用戶體驗要素》這本書的用戶體驗五層框架。如下圖，視覺層就是「表現(xiàn)層」：包含有屏的產(chǎn)品操作系統(tǒng)視覺和產(chǎn)品外觀視覺或者說最終產(chǎn)品的外觀。

有些人認(rèn)為視覺設(shè)計和產(chǎn)品經(jīng)理無關(guān)，大錯特錯。在之前xxxxx（產(chǎn)品定義）的文章中我就提到了產(chǎn)品經(jīng)理做了功能定位、用戶畫像的描述以及產(chǎn)品目標(biāo)。而視覺設(shè)計正是基于此，即「表現(xiàn)層」是基于「戰(zhàn)略層」和「范圍層」的理念，又是在「結(jié)構(gòu)層」和「框架層」上進(jìn)行加工包裝。

交互設(shè)計和視覺設(shè)計很相似，但又完全不同。如下圖-右，視覺概念設(shè)計包括品牌、logo、需求/價值觀、icon、字體、尺寸形狀等。

回到我們「職得App」的項目中來，回顧一下在之前做的產(chǎn)品定位：

名稱：職得App

定位：大牛培伴式互聯(lián)網(wǎng)職場技能學(xué)習(xí)平臺；

slogan：陪練十遍，技能自現(xiàn)；

目標(biāo)用戶：非一線互聯(lián)網(wǎng)職場新人；

用戶痛點：在中小型公司得不到業(yè)界大牛指點崗位技能的機(jī)會。

首先定下整體品牌、logo和色彩基調(diào)：選用藍(lán)色冷色調(diào)作為主要色調(diào)，與職場相關(guān)，在loge設(shè)計上突出棱角，彰顯技能的銳利和重要性。另外整體logo采用微漸變，體現(xiàn)出呼吸感和前衛(wèi)感，與傳統(tǒng)職場死氣沉沉的死板印象區(qū)分開來。

正常情況下公司的產(chǎn)品都不是從0開始，并且很少會改動整體品牌風(fēng)格。一般的需求改動更多涉及是依據(jù)公司現(xiàn)有的色彩、尺寸、字體規(guī)范來做新的icon的設(shè)計、元素設(shè)計、頁面設(shè)計。

這里貼一篇騰訊小程序UI：https://isux.tencent.com/articles/QQ-mini-program.html。講的就是如何設(shè)計游戲類小程序的UI視覺，完全基于產(chǎn)品的定位和屬性來進(jìn)行設(shè)計色彩、形狀、尺寸和調(diào)性。

對于「職得App」來說也是如此，因為一期產(chǎn)品相對很簡單，因此根據(jù)上面定下來的整體品牌感覺，著重針對icon、字體、還有尺寸設(shè)計。

icon：

字體：

各頁面尺寸：

效果圖：

注意，在「視覺概念設(shè)計」階段，我們注重的是「定位」「情感」「調(diào)性」「價值觀」這些詞語。視覺的感覺能否匹配產(chǎn)品的定位或者是功能的目的。

例如：品牌情感的輸出與職場相關(guān)則選擇冷色調(diào)為主，但又強(qiáng)調(diào)的是陪伴式，不能過于死板，會選擇柔和和icon。在V1.0.0版功能上是強(qiáng)調(diào)「大牛、圈主」，因此在進(jìn)行尺寸設(shè)計時頁面更多展示圈主的信息和內(nèi)容。

作為產(chǎn)品經(jīng)理，你要去和UI設(shè)計師把控整體產(chǎn)品在視覺上體現(xiàn)出來的感覺。整體的畫風(fēng)是否是你想要的，或者說是否和當(dāng)前產(chǎn)品所保持一致。

2.2 設(shè)計執(zhí)行規(guī)范

除了產(chǎn)品經(jīng)理關(guān)注的視覺概念設(shè)計之外。UI設(shè)計師還需要根據(jù)概念設(shè)計進(jìn)行「標(biāo)注」、「切圖」的工作，因為技術(shù)開發(fā)要完全按照這些標(biāo)注數(shù)據(jù)來進(jìn)行開發(fā)。

我們目前得到了「職得App」各頁面的概念設(shè)計圖。部分圖如下：

現(xiàn)在假設(shè)自己是UI設(shè)計師，你還需要對這些圖片進(jìn)行「標(biāo)注」和「切圖」，否則無法開發(fā)。

由于「職得app」是我在「起點學(xué)院就業(yè)特訓(xùn)營」的模擬項目，并非公司商業(yè)項目，用不著交付給技術(shù)開發(fā)同學(xué)。因此沒有進(jìn)行標(biāo)注和切圖，而且產(chǎn)品經(jīng)理并不需要了解這方面的知識，除非公司小到不得不兼任設(shè)計師。

關(guān)于「標(biāo)注」和「切圖」，這篇文章寫得不錯，有興趣的產(chǎn)品經(jīng)理或者悲催到切圖也要自己上的產(chǎn)品經(jīng)理，可以詳細(xì)研究一下。

大概每個頁面、每個元素會變成如下：

最后貼上「職得APP」的全部概念設(shè)計稿：https://www.zcool.com.cn/work/ZNDA5NjA5MDg=.html

三、總結(jié)

首先，再次感謝設(shè)計師朋友Vincent（站酷&微博：楊錦Vincent），賦予了一個模擬從0設(shè)計APP項目「職得App」新生，沒有UI設(shè)計的app是沒有靈魂的！要設(shè)計的朋友可以聯(lián)系他。

現(xiàn)在設(shè)計稿也有了，把之前所有的東西整理成PRD即可！所以，下一篇內(nèi)容：從0設(shè)計App（8）：PRD撰寫，也是這個系列的最后一篇內(nèi)容。

作者：朱魯斌，公眾號：字字朱心。每周深度思考一個問題，不穩(wěn)定的世界里找到一份篤定。

本文由@朱魯斌? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議。