事情起因是這樣的，因為想?yún)⒓右粋€國內(nèi)剛剛舉辦不久，也還不是很知名的計算機競賽（對哦，我一個哲學學生為什么想要參加某計算機競賽呢？），恰巧又認識幾個厲害的技術大佬；于是乎，我們便開始組隊參加比賽了咯。
最后呢，也拿到了一個還算馬馬虎虎的成績，畢竟互聯(lián)網(wǎng)行業(yè)還是更喜歡「商機」這種東西，不管這種東西在不在，總有人覺得反正埋頭找就對了！
于是，我就被激流小姐姐約稿，說能不能談談怎么制作一個小程序呢？既然這樣，那就好的吧。
不過，不管你們知道還是不知道，還是需要提前說一下的是，我這不是一個業(yè)余美工么？很多具體的技術實現(xiàn)層面的問題，我其實也不是很了解，所以在這里我就只能很不要臉地說，這篇文章將更多地從「UI設計」、「產(chǎn)品邏輯」的角度來聊一聊怎樣制作一個微信小程序，對于技術方面，我就只能稍微寫一點點，還望大家見諒啦。
首先需要解釋的是，不管是開發(fā)網(wǎng)站、APP，還是制作一個微信小程序，都需要有人扮演「美工」、「前端」、「后端」三種角色，有的時候還會需要有人扮演「產(chǎn)品經(jīng)理」的角色。而每一種角色所負責的事情也是不同的：「美工」主要是負責UI / UX設計，UI / UX設計只要是負責軟件的界面設計、交互設計以及一些動效設計；當然，在人力有限的時候，美工也會分擔產(chǎn)品經(jīng)理關于「產(chǎn)品邏輯」的任務，自行厘清產(chǎn)品的邏輯，自己制作原型圖。「前端」負責的即使網(wǎng)站前臺部分，即展現(xiàn)給用戶瀏覽的部分。「后端」主要涉及的是邏輯功能的模塊，這一部分是用戶看不見的部分。「產(chǎn)品經(jīng)理」主要是負責研究用戶需求，制作用戶需求圖像，分析產(chǎn)品所需功能，提供產(chǎn)品原型圖，以及負責整個團隊的協(xié)作。一個開發(fā)團隊中所有成員都必須相互合作，美工需要為前端提供邏輯清楚明晰的UI設計圖，后端需要和前端調試好接口才能保證開發(fā)出來的產(chǎn)品良好運行，產(chǎn)品經(jīng)理需要統(tǒng)籌整個團隊的開發(fā)工作。
同樣，所有產(chǎn)品開發(fā)都會經(jīng)歷相似的開發(fā)周期。具體來說，產(chǎn)品開發(fā)基本上可分為四個階段，分別是「產(chǎn)品分析」、「UI設計」、「前端開發(fā)」、「后端開發(fā)」，這四個階段不是時間上的線性存在的，有一些開發(fā)過程是可以同時進行的。比如說，「產(chǎn)品分析」是整個開發(fā)周期中的第一個階段，在此階段所有工作完成之前，其他階段的開發(fā)工作都不能進行。在「產(chǎn)品分析」階段工作完成之后，第一種方案可以這樣，美工可以開始「UI設計」階段的工作。一般可以等美工完成「UI設計」的全部工作之后，「前端開發(fā)」和「后端開發(fā)」再一同進行；第二種方案就是在美工完成一部分UI設計圖之后，啟動「前端開發(fā)」和「后端開發(fā)」工作，這樣「UI設計」、「前端開發(fā)」和「后端開發(fā)」同時進行。第二種方案相較于第一種方案會更節(jié)省開發(fā)時間，但是如果美工、前端、后端之間的溝通不流暢的話，會產(chǎn)生更多、更嚴重的問題。
下面我會以我參與開發(fā)的那個微信小程序「嘮嘮Todo」為例子，比較粗略地介紹一下產(chǎn)品每個開發(fā)階段：
顧名思義，「產(chǎn)品分析」就是對某互聯(lián)網(wǎng)產(chǎn)品，進行系統(tǒng)的、多緯度的分析，并最終完成一份邏輯清晰，符合客觀事實的報告。
以「嘮嘮ToDo」這樣一款基于「人工智能自然語言處理技術」、通過用戶與AI「聊天」的形式記錄個人待辦事項的日程管理小程序為例，在「產(chǎn)品分析」階段，需要思考的是，在這個微信小程序中我們需要實現(xiàn)的功能有哪些？應該以何種方式把不同的功能整合在一起？用戶在使用這個微信小程序的時候，用戶路徑是怎么樣呢？這樣的用戶路徑是否夠便捷？還有，對于這樣一款相對比較新穎的軟件來說，怎樣使得用戶上手比較便捷呢？什么樣的交互會用戶用起來比較舒服呢？
等等諸如此類的問題，都是在「產(chǎn)品分析」階段需要想清楚的，只有在這一部分思考清楚之后，美工才能做出合理的UI設計圖。
具體來說，「產(chǎn)品分析」的內(nèi)容可以劃分為多個維度和若干的細節(jié)，例如「產(chǎn)品基本信息」、「用戶研究」、「用戶體驗要素」、「盈利模式」四個部分。
其中，「產(chǎn)品的基本信息」部分主要包括產(chǎn)品作用、解決問題、行業(yè)現(xiàn)狀、團隊背景、主要競品、用戶評價等；「用戶研究」和「用戶體驗要素」是較為重要的兩個部分，從用戶的角度上來說，我們需要考慮用戶的年齡、性別，用戶的學歷、收入，所在地區(qū)，生活工作狀態(tài)，主要興趣愛好；從產(chǎn)品的角度上看，我們需要關注企業(yè)戰(zhàn)略、產(chǎn)品定位，以及產(chǎn)品的功能結構和信息結構、產(chǎn)品的界面的配色方案、動效方案、視覺特征等方面具體的細節(jié)。
以嘮嘮ToDo為例，嘮嘮 Todo 的目標用戶是所有有使用線上日程管理軟件需求的微信用戶。
嘮嘮ToDo所希望解決的現(xiàn)實問題則包括如下問題：
- 目前單獨安裝獨立的日程管理APP占用用戶移動端大量資源，所以需要一個普及程度更高的平臺搭載日程管理功能，避免安裝過多軟件占用用戶手機端資源；
- 微信小程序中尚無成型的的日程管理小程序，填補這一部分的空白；
- 目前常見的日程管理軟件大多依賴用戶手動添加任務，而形式較為僵硬，嘮嘮Todo 首次采用「人工智能自然語言處理技術」，希望借此幫助用戶更便捷地創(chuàng)建日程；同時，「聊天」的形式也能帶給用戶更不一樣的使用體驗；
「盈利模式」就是需要考慮這個產(chǎn)品如何盈利，例如直接發(fā)生交易的產(chǎn)品類型，只要分析產(chǎn)品本身的交流的過程即可；如果是社交、資訊、工具類的應用，這類應用的利益點往往會較為分散且較為隱晦，所以這類應用需要考慮如何實現(xiàn)產(chǎn)品變現(xiàn)。
對于一個初學的設計者來說，首先需要了解如下內(nèi)容：
設計軟件操作能力是一名設計師入行設計的最基本要求；因為只有當設計工具都會使用的話，再多的想法都沒辦法很好的還原呈現(xiàn)。根據(jù)我的經(jīng)驗來說，軟件使用越發(fā)熟練，設計者復現(xiàn)和呈現(xiàn)某種東西的成功率和效率就越高，而唯有不斷的練習才能提高軟件的使用熟練程度。另一方面，軟件只是工具而已，會使用軟件并不代表會設計。
1. Adobe Photoshop（簡稱 PS）
Photoshop是初學設計的人優(yōu)先要學會的軟件，也是一款具有高普及度、高市場占有率的設計軟件。在熟練掌握PS之后，對學習其他的設計軟件將會有很大的幫助，因為絕大部分的設計軟件都會引進「圖層」這一概念，這將使得絕大部分設計軟件的使用邏輯相互貫通。
對于 UI 設計師來說，這款軟件主要用于：界面布局設計、圖片處理與合成、插畫創(chuàng)作、運營需求設計等等。
2. Adobe Illustrator（簡稱 AI）
AI ，是一款矢量圖形設計軟件，在矢量插畫、圖標設計、LOGO 圖形設計、字體設計、排版等方面都有非常大的優(yōu)勢。AI和PS在使用邏輯上是相似的，只是在功能上各有所長，所以只要先學會了 PS ，這款軟件學習起來將會事半功倍；當然PS和AI之間還是有一些具體的功能上的差別。
一般而言，對于UI設計來說，AI大多被用于繪制網(wǎng)站的某些要素或者是插畫，再將在AI中制成的成品導入PS中以組合進UI設計圖中。
3. Sketch
Sketch是一款輕量、易用的矢量設計工具，也是 UI 設計行業(yè)中近年來非?；馃岬能浖?。最近更新的 54 版本已實現(xiàn)漢化。只要在擁有 PS 和 AI 軟件基本操作的基礎上，才能比較容易地上手Sketch。由于目前Sketch只能在 Mac 電腦中運行，因此也受到了一定的局限。如果沒有 Mac 電腦，可以用Windows電腦安裝雙系統(tǒng)，即可使用Sketch。
4. Adobe XD
Adobe XD 是一款Adobe公司專為 UX/UI 設計師提供的設計利器，設計師可以利用該軟件進行移動應用和網(wǎng)頁設計與原型制作等。由于是 Adobe 家族的產(chǎn)品，和其旗下別的軟件（例如PS、AI等）相互之間的配合親密無間，可以提高了設計配合之間的效率。更為方便的一點是這款軟件沒有操作系統(tǒng)的限制， Mac 電腦或者 win 電腦都可安裝使用，不過需要注意系統(tǒng)的最低版本要求，具體可查看官方的有相關說明。
5. Axure RP
Axure RP 是一款專業(yè)的原型設計工具，雖然現(xiàn)在一些公司的交互設計師也在運用 Sketch 軟件進行交互設計，但 Axure RP 還是很多交互設計師的選擇。Axure RP 的使用者主要包括商業(yè)分析師、信息架構師、產(chǎn)品經(jīng)理、IT 咨詢師、用戶體驗設計師、交互設計師、UI 設計師等。根據(jù)個人使用體驗來看，覺得這款軟件使用體驗其實不太好，對于初學者來說意義并不大，可以等進階一點之后再使用。
6. 動效設計軟件
近些年對動效制作能力的要求也越來越普遍，特別是在下一個 5G 時代的到來，微動效輔助產(chǎn)品體驗將會更為全面普及。
現(xiàn)在實現(xiàn)動效的軟件和平臺也很多，比如：Adobe After Effects（簡稱 AE）、Principle、Adobe Flash、Pixate、Origami、Hype 3、Flinto 等等。個人一般主推的是 AE 軟件，因為沒有操作系統(tǒng)限制，市面上的學習資源也比較多。雖然Principle 也是比較流行的，用的設計師也還算多，由于目前只支持 Mac 電腦，也存在一定的局限。
動效軟件學習起來相對難度要大一點，可能會涉及到一部分視頻制作的知識，而且一個案例花費時間較長，比較考驗耐性。
品牌、產(chǎn)品的設計風格與配色是相輔相成的，依據(jù)產(chǎn)品特性與需求，選擇合適的設計風格，更利于提升視覺效果（更有利于讓甲方滿意）。除此之外，我們需要隨時了解最新的設計趨勢與風格，分清各個設計風格的特點和區(qū)別，這其實也是培養(yǎng)審美的過程。
1. 半扁平化風格
半扁平化風格的特點：極簡、符號化、光影。
由于受到具體化設計的影響，現(xiàn)在界面設計更加趨向于立體化、光和陰影的運用，成為「半扁平化設計」。為了適應現(xiàn)代科技而推崇的扁平化設計仍會存在，但已不再被大量發(fā)展并使用。適量漸變陰影的使用，將會在保留其簡約風格的基礎上，使扁平化設計更加復雜和寫實化。
2. 三維渲染風格
三維渲染風格的特點：平面立體感，純色，空間感。
隨著 C4D 的流行，三維的表現(xiàn)形式在設計中變得愈演愈烈。不過在后扁平化時代，如何在扁平與立體的形式中間尋找平衡是大家關注的焦點，而三維純色渲染恰恰是一種很好的嘗試。
空間感的布局可以拓展畫面深度，同時物體純色系的渲染方式又強化了畫面的平面感。設計將干擾人們注意力的因素排除，只留下需要傳達的主題部分。
3. 動畫效果
動畫效果已經(jīng)越來越多的以各種形式出現(xiàn)在網(wǎng)頁設計上，諸如 gif、SVG、WebGL、CSS 或小視頻。
4. 漸變色風格
漸變色風格的特點：多色、同色系、對比色。
漸變色是時下最主要的流行趨勢之一，始于 2016 且勢頭至今有增無減。像 Instagram 這樣的業(yè)界大拿甚至將其 logo 由扁平改成了多顏色漸變。從 logo 到按鍵和圖片，漸變色的潮流已經(jīng)無處不在。漸變其實是一個雙刃劍，好看的漸變配色會使得整個設計瞬間變得高大上，但是如果配色的方案沒有選好，會導致整個設計慘不忍睹。
5. 極簡風格
極簡風格的特點：極簡、雅致、留白。
在內(nèi)容越來越多的前提下，設計師應該減少無用信息的干擾，使得用戶可以快速聚焦到內(nèi)容本身，這種「少即是多」的設計思路就是我們常說的極簡風格。刪減與用戶任務無關的非功能性元素，只保留重要的信息，減輕用戶的認知負荷。
6. 波普風格
波普風格的特點：波點、夸張、設計感極強。
波普風格主要體現(xiàn)在大眾喜聞樂見的人物、事物、事件中。簡單來說，它有以下幾個特點：
設計中強調新奇和獨特，采用強烈的色彩處理，個性化的配色風格很有感染力。
圖案是最主要的表現(xiàn)形式。常常帶有娛樂、趣味性、詼諧性。
難以確定統(tǒng)一的風格，追求各種風格的混合，追求新奇、古怪。
通俗大眾，設計元素一般來自日常生活中的人物、事物。
拼接。
7. 孟菲斯風格
孟菲斯風格的特點：明快，集合結構，隨性。
孟菲斯風格在色彩上，常常打破配色規(guī)律，喜歡用一些靚麗、純度高、大膽、對比強烈的配色，借鑒了波普藝術的配色。在排版上，元素之間沒有過多的聯(lián)系，元素的排列常常無規(guī)律可循，運用大量的幾何元素，點、線、面綜合運用。規(guī)則的幾何圖形有圓形、三角形、矩形、圓環(huán)、波浪線、網(wǎng)格、斜杠等等，不規(guī)則的幾何圖形也是由點、線、面拼貼而成。
8. 光感透氣疊加
光感透氣疊加的特點：光感，漸變，氤氳感。
具有光感的半透明漸變疊加平面設計風格。光因為其剔透，純凈，反射的特性，一直被人們所青睞著。人們不再滿足于簡單的色彩疊加，增加光感的設計將會為產(chǎn)品增添更多的未來迷幻屬性。
9. 插畫風格
插畫風格也有很多種分類。
扁平插畫：簡單來講就是把復雜的關系簡約化，讓畫面更加清爽整潔，也是現(xiàn)在比較常用的風格了，很多商務工具類的 APP 會選擇使用這種風格。
肌理插畫：顧名思義就是給插畫加上了些肌理質感（比如雜色）和光感，本質也和扁平插畫差不多，一些想體現(xiàn)質感的頁面會用到這種風格。
手繪插畫：需要設計師具備很強的繪畫功底，也算是插畫里面難度比較高的一種。手繪風格的插畫運用得也比較廣，常見的有插畫繪本，故事場景設計等。
MBE插畫：dribbble 的一位設計師創(chuàng)作了這種風格，它主要的特點就是圓潤、可愛、呆萌、簡潔。在 APP 中的引導頁、啟動頁和缺省頁運用也比較廣泛。
漸變插畫：有點類似日本漫畫場景的感覺，風格特別唯美浪漫。光感比較強，所以也稱為微光插畫。顏色一般采用相近色，顏色種類不要太多。
2.5D插畫：立體插畫，也就是在二維的空間里表現(xiàn)三維的事物。大多設計師使用 C4D 設計，PS/AI 也可以。
10. 中國風風格
中國風風格的特點：水墨、雅致、文藝。
利用中國風的視覺元素在設計上完成表達。在各種視覺表現(xiàn)形式中，國畫，書法，服飾紋理，建筑結構，陶瓷等傳統(tǒng)材料肌理等等，都可以作為素材，利用中國風元素的同時，適當改造，更換色彩，簡化結構，復雜化肌理效果等等，以求在視覺上更接近品牌的氣質。
11. 剪紙風格
剪紙風格的特點：矢量插畫、投影、紙張肌理。
12. 低多邊形風格（Low Poly）
低多邊形風格的特點：多邊形、3D、低細節(jié)。
low poly 實際是把多色元素，用三角形分割，每個小三角形的顏色，取自原多色元素的相應位置。這種設計風格的特點是低細節(jié)，面又多又小，高度渲染，經(jīng)常配以柔光效果。
13. 賽博朋克風格
賽博朋克風格的特點：虛擬現(xiàn)實、人工智能、霓虹光感。
賽博朋克又稱賽伯朋克、數(shù)字朋克、電腦判客、網(wǎng)絡判客，是科幻小說的一個分支，以計算機或信息技術為主題。在視覺設計中的主要特點就是藍、紫、青等冷色調為主色調，霓虹燈光感效果為輔助，故障藝術風為輔助（圖像的失真、錯位、破碎等），有時還可以加一些異常的現(xiàn)象，比如 180 度翻轉的建筑，還有復古風和未來風并存。很多攝影作品修圖時也會有意識地調色調成賽博朋克風格（有很多教程都教這個的，B站上蠻多的）。
14. 蒸汽波風格（Vaporwave）
蒸汽波風格的特點：熒光、流體、夢幻感。
蒸汽波是一種受賽博朋克影響的網(wǎng)絡線上藝術，選用的視覺元素主要有古典藝術形象，八九十年代的流行文化產(chǎn)物，window95 經(jīng)典窗口樣式，又或者是代表著某個時代記憶的各種事物。
15. 像素風格
像素風格的特點：像素化，輪廓清晰，卡通。
像素風格屬于點陣式圖像，是一種圖標風格的圖像，更強調清晰的輪廓、明快的色彩，幾乎不用混疊方法來繪制光滑的線條，同時它的造型比較卡通，得到很多朋友的喜愛。
16. 故障藝術風格（Glitch Art）
利用事物形成的故障，進行藝術加工。特點就在于圖像失真、破碎、錯位、變形，還有顏色的失真、錯位，和一些條紋圖形的輔助。
實際上，在UI設計中我們會使用很多不同種類的圖標，以下則是關于圖標的介紹。
設計中常用的圖標，從使用的用途來說圖標可分為兩種，功能性圖標和展示性圖標。
功能性圖標是為了引導用戶理解和操作，需要表現(xiàn)精確和簡介，方便用戶識別其含義。功能性圖標常規(guī)狀態(tài)下為無彩色。
展示性圖標通常為頁面入口，會有更多形狀、顏色、質感的表達，吸引用戶的注意力和點擊欲望，強調差異性，比如各種品類區(qū)的圖標、徽章、等級圖標等等。
但圖標的風格并不止兩類，以下簡單的整理了一下圖標的風格分類，設計中選擇符合產(chǎn)品整體風格的圖標即可。
常用圖標網(wǎng)站有如下幾個：
iconfont：www.iconfont.cn
Flaticon：www.flaticon.com
Iconmonstr：iconmonstr.com
Iconstore：iconstore.co
Nova：webalys.com/nova/
Iosicongallery：iosicongallery.com
在有了以上基本的設計知識之后，我們就可以回到小程序制作的開發(fā)上。
首先，我們需要根據(jù)一個微信小程序所解決的需求仔細分解和歸類出微信小程序的功能，這是一個分類和整理的過程，便于后面的功能模塊的設計和整合，下面是在開始設計嘮嘮ToDo時候預估的功能：
在對一個微信小程序的功能進行詳細整理之后，需要規(guī)劃出不同的功能模塊，這是一個更加細致化的過程，如圖：
接下來的工作就是UI設計工作中最為艱苦的部分了，即挨個繪制每個靜態(tài)界面。這個過程會調動軟件操作、審美，以及對產(chǎn)品的理解。在這里我可以展示一些嘮嘮ToDo的靜態(tài)界面給大家看看（因為前段時間重新配置了服務器，所以現(xiàn)在這個小程序處于停用狀態(tài)，大家就別掃這個二維碼啦）：
最后，把不同頁面相互連接在一起，并且檢查一下其中功能模塊是否齊全？界面跳轉之間是否合理？下面這張圖是在Adobe XD 中繪制完嘮嘮ToDo所有的靜態(tài)界面并添加完交互連接之后的界面：
到此，一個微信小程序的UI設計圖算是基本完成，可以提交給前后端進行下一步的制作。
嚴格來說，我不是一個合格的程序員，對于前后端的知識我大多是僅僅是懂得其中的原理，但是具體實操方面會比較弱一些，所以，要教大家如何做一個好的前端或者好的后端其實是力不足的。在這里可以給大家推薦一個適合技術小白的網(wǎng)站：https://www.w3schools.com/ ，在這上面可以看到很多關于代碼知識的講解，但是，同樣，實際操作、親自上手更重要一些。
以上，便是制作一個微信小程序的完整流程，光聽無用，實操更重要。
作者：商隱
文章首發(fā)于偵知棒（BestDet）公眾號
