從零開始全棧開發一個微信小程序（二）——設計篇

產品在通過需求原型階段後，明確了設計目的，就能夠進入設計階段了。這個階段須要在上一階段的基礎之上更深刻地消化需求細節，最終將需求落地爲具體的視覺解決方案。

1、配色方案

色彩是視覺方案中很是重要的因素，好的配色方案能夠加強產品可用性，提高產品氛圍，加強產品情感化訴求。

考慮到在找東西這種場景下，用戶的情緒通常是處於較爲焦躁的狀態，因此須要在色彩方面進行「降溫」，避免刺激用戶情緒，這種狀況下選用冷色系色彩較爲適宜。基於以上考量，我最終決定採用藍色做爲產品主題色，以烘托「高效、明快、整潔」的用戶情感訴求。

推薦配色工具：ColorSchemer Studio。若是不想安裝客戶端的話，能夠試試在線版：ColorScheme Designer

2、UI 規範

那麼接下來就付諸 UI 設計嗎？答案是：不！UI 設計不一樣於繪畫、雕塑這類須要天馬行空般想象力的藝術創造，不少狀況下它處於各類條條框框的限制之下，這些條條框框，就是規範。正是這些規範，統一了設計差別性，下降了用戶學習成本，使得咱們開發出的產品更易於使用。

既然咱們是基於小程序這個平臺進行設計，那麼就頗有必要先去了解下小程序的 UI 規範（傳送門），官方還提供了對應的 UI 組件庫 可供下載。

官方這個 UI 組件庫源文件（WeUI1.0.psd），裏面的內容幾乎都是微信公衆號的組件用例，並無小程序 navigateBar、titleBar 和 tabBar 這些關鍵組件的用例，因此仍是得本身根據官方設計文檔中的隻言片語，本身摸索。

3、界面設計

1. 工具

在界面設計上，我選擇使用 Axure 來製做界面的高保真原型圖，代替設計圖，個人依據是：

1. Axure 的作圖效率比 PS 高（Windows 黨用不了 Sketch……）；
2. 像圖標、背景圖這類圖片素材，可以使用第三方現有的資源，因此無需切圖；
3. 界面元素徹底遵循官方的 UI 規範，不存在「標新立異」的元素，因此對設計圖上 UI 細節的要求較低。

固然，這只是個人主觀意見，你們可根據自身項目特色來合理選擇用 PhotoShop、Sketch、Illustractor 這類專業的設計圖製做軟件。

2. 設計尺寸

鑑於官方提供的 UI 組件庫裏並無現成的小程序特有組件的用例，因此在開始設計前，我自行製做了微信小程序的「外殼」 Axure 元件庫，來做爲界面設計圖尺寸方案。

尺寸上採用基於 iPhone6 的 375×667 做爲設計尺寸。若是是作高清設計圖，且須要切圖交付的話，建議使用 iPhon 6 的 750×1334 像素尺寸做爲設計尺寸。

這裏須要瞭解小程序中的一個單位尺寸———— rpx。即 responsive pixel，翻譯過來就是響應像素，它是一個能夠根據屏幕寬度進行自適應的單位。小程序官方規定屏幕寬度爲 750rpx，如在 iPhone6 上，則有：750rpx = 375px（屏幕像素寬度）= 750物理像素，此時 1rpx = 0.5px（屏幕像素寬度）= 1物理像素。因此若是設計圖是按照 375×667 設計的，則換算成 rpx 單位時須要乘以 2；若是設計圖是按照 750×1334 設計的，則按 1:1 處理。

3. 設計圖

本人非美術科班出身，純野路子設計，你們就湊合看吧……

4、交互設計

在有了界面設計圖後，咱們須要對設計圖進行交互設計，工做內容包括：

1. 頁面元素的交互效果（按壓、拖動、長按等）；
2. 頁面加載、跳轉（轉場）效果；
3. 各類邊界狀況的頁面顯示，如空狀態；
4. 動畫特效；
5. 走查用戶路徑是否造成閉環，業務交互邏輯有無異常。

---

下一話：《從零開始全棧開發一個微信小程序（三）——開發篇》，敬請賜候。