一個設計師的開發之路
來源于：
http://blog.viggoz.com/2018/01/03/2018-01-03-webstack/
在看這篇文章之前大家先看做出來的產品是什么：www.WebStack.cc?–這是一個設計師的網址導航網。
寫這篇文章的本意是站在一個設計師的角度，分析設計師在有一個好玩的點子的時候，應該怎樣利用所有的資源去完成這個點子，下面我是通過做這個導航網站為栗子，來講述一個產品從0到1的這個過程和一些個人建議。
1. 計劃
首先說明一下這個項目我計劃是在一周時間做完，實際是差不多7天時間，后面有幾天是在完善內容數據。開始之前我會根據定下來的功能需求自己大概估計一下時間，這里就包括產品需求文檔、UI設計?前端開發、后臺開發、測試上線、內容完善?等。這些對于這個簡單的網站來說開發和完善內容用掉了大多數時間。
因為這篇文章是寫給設計師看的，可能除了設計之外的其他工作并不是我們擅長的，但是我們可以不一定要很專業，我們的目的是做一個產品出來，我們只需要知道這個東西怎么做，然后就用最簡便的方法去實現，有現成的東西就不去重復搭梯子，有開源的代碼就不自己重頭碼。
2. 確定功能需求
這里要扯一點其他的。在2017年我養成了一個習慣，每天都會抽空看看有哪些互聯網新產品出現，不管是App還是有趣的網站。在這個習慣有了一段時間之后我發現我自己收藏了很多很多的網站書簽，但是在保存這些書簽的時候并沒有很好的去按照嚴格的分類收集，這就導致了后來想起之前看到過的某個網站，也記得當時收藏了，但就是死活想不起來收藏到哪個瀏覽器分類當中了。
這里也就是差不多我最初要做這個導航網站的原因（不算是直接原因）。后來我在網上搜集了很多設計師的導航網站,發現在這很多的導航網站中其實產品定位都是有很大不同側重。這里我們不用出具體的設呢么競品分析，用戶研究這些，大概按照自己想要的方向去做就好，我這里很明確的目的就是要做UI設計師需要的導航網站。后面我收集了大量的導航網站，算是簡單競品分析。如下圖
首先要確定導航網站的排布方式，導航欄的位置。根據大多數這類導航網站和我自己的體驗來看，最好的交互應該是左側固定全局的導航欄方式，因為導航的內容條目會非常多，不適合做頂部導航或者可收縮式的導航欄。固定的全局導航可以讓用戶能夠快速選擇并且定位到自己需要的內容位置。
除了導航功能之外還有一個就是讓用戶提交書簽的功能。根據自己的需求和競品初步分析確定了產品主要功能之后，這一步就ok了。這一步基本可以不需要輸出任何東西，只要知道要做的東西即可。
3. 需求文檔
這一步作為設計師，我們來看看怎么去簡單快速的輸出一些東西。
PRD文檔的編寫我們不用按照非常規范的東西去寫，但是要讓自己能夠梳理清楚產品的結構即可。我這里用的是Mindnode和Axure這兩個軟件。
我是先在Axure中創建如下圖的目錄，完整的PRD目錄不止是這些內容，但是對于這個小項目來說，我們只需要著重關注產品介紹、信息結構、產品結構這幾個方面即可，我的目的就是清楚的梳理產品的邏輯。對于后面設計和開發來說也是必要的。在這個梳理的過程中也會發現很多功能方面的問題，自己也可以在這一步驗證產品的可行性。而不是想到一個點子直接開始設計UI界面，這是設計師做產品比較忌諱的。
- 產品介紹
- 先看產品的介紹部分，這里用最簡單的一句話描述一下產品，這句話要能體現產品的核心功能和面向用戶。再做一下簡單的用戶特征等的簡單分析，怎么簡單怎么來。
信息結構圖
在寫信息結構圖的時候其實是梳理網站邏輯的一個過程，要將產品功能的信息進行一一羅列，你會清楚的知道每一個字段的對應關系，也完全能夠確定下來產品的功能結構。在寫這個結構圖的過程一定要不斷挖掘到最底層，每一個產品細節都可以在這里體現出來。
產品結構圖
產品功能圖實際上就是一種結構化的產品原型。我們在梳理產品功能的時候，就會清楚這個功能有哪些表現方式，跳轉到什么樣的網頁上，網頁之間的互相關聯等。
關于結構圖的寫法大家可以根據自己的需要去寫，我習慣用思維導圖的方式記錄，關于怎么做思維導圖大家可以去知乎科普，還是那句話，我們的目的就是要讓這些圖能表達出自己的想法就行。
4. 交互UI設計
這里作為設計師來說，就是很擅長的事情了，我這里網站結構非常簡單，為了節省時間并沒有去用軟件畫線框交互稿，但是最基本的線框圖還是要在紙上簡單繪制，讓自己對設計的網站有個大概的框架。
后臺管理系統界面設計，后臺Dashboard界面在設計之前就有考慮，因為是管理網站的界面，我這里是直接用開源的框架來用，界面風格不用過多設計，網上有很多售賣的前端web UI kit，這類套件能讓設計師很快的做出網頁，代碼方面只需要知道前端基本知識就可以，后臺對于界面要求不是很高完全可以直接用框架節省時間，也不用專門去找前端研發同學來做。
下面是后臺的部分界面截圖：
5. 前端開發
開發網站對于設計師來說其實是比較難，但是去學習一點前端開發知識是很容易入門的，建議去?慕課網看一下相關的HTML/CSS課程很快上手，然后用開源框架也能夠很快的實現想要的網站效果。我這里用的是XENON這個基于Bootstrap的前端Dashboard UI框架。也有另外一套框架Bootstrap 4 UI Kit | Wrappixel這個UI Kit可以做網頁中基本能用到的所有控件效果，但是界面設計的局限性比較大。這類UI Kit是有很多的，不用每個都去用，找一套自己比較喜歡的下載來用一次兩次就能很輕松的自己實現網站靜態頁面開發了。
在寫好頁面前端之后，還可以再去看一些基礎的網站SEO優化的內容，最簡單的方法去買本書來看即可，不用深入，簡單入門，知道怎么優化網站title、description、keywords即可，我這里加入了一些facebook、google+、twitter等的分享的標簽，在分享網站的時候看到的網頁鏈接就會有小圖片顯示了。
加入Google Analytics的代碼就可以監測網站訪問數據了。
- 前端開發在這里基本就ok，如果你做的網站是靜態網頁，到這一步就可以直接發布網站上線了。
6. 后端開發
- 后端開發這里對于UI設計來說其實是比較難入門的，要學的東西比較多，筆者大學是學的軟件開發專業的，畢業之后從事了UI設計的工作，深知后臺開發和服務器開發是需要比較多的時間去研究才可以的。所以這部分不建議設計師去花時間搞的，可以找朋友做。我這個項目在前期設計的時候是有后臺系統的，直接用開源的CMS框架開發起來其實也是可以很快完成的，但是我后臺放棄了，因為這個系統還是比較笨重的，對于導航網站這個項目來說可以不用這么復雜。最后放棄了開發后臺系統，改用了純靜態的網站頁面。
7. 網站上線
這里需要一點注意，國內在萬網購買的域名需要實名認證，服務器需要備案別人才能正常訪問，很多后綴的域名現在暫時不能實名認證所以你就算買了服務器也不能通過備案。在購買域名的時候一定要注意。
- 服務器：阿里云、騰訊云、百度云都是有服務器賣
國內獨立主機比較貴，學生是有免費主機可以用，有時候買域名也是有送半年服務器這樣子的，但是續費比較貴。當然也可以考慮國外云服務器。這個坑也是比較多，需要時間去學。建議用下面的方法。
- 用Github做靜態網頁服務器
這里可以去學一下怎么用github，也是簡單入門即可，github注冊帳號之后你是可以有一個個人獨立主頁，這個主頁是可以直接通過互聯網訪問的，例如：viggoz.github.io這個域名地址前面是你的github用戶名，你可以在購買了域名之后直接通過CNAME方式解析域名到這個地址即可。
github的每一個項目也都可以有gh-pages分支，這個分支也是可以直接放靜態頁面通過外網訪問。這個項目是可以有多個項目的，也就是說你可以放無數多個靜態頁面在這里。但是這些項目的網站并不能當成一級域名地址來訪問，他都是包含在你的viggoz.github.io之下，所以這個頁面就不能單獨進行域名綁定。
但是，還有但是，通過github你是可以創建多個組織，一個組織是可以有一個官網，一個官網可以像你的github帳號一樣解析一個域名的。
注意：如果這里自己搞不定，也是建議直接找朋友幫忙吧。
8. 總結
這篇文章是寫給設計師看的，其實設計師一個人去做一個網站也不是很難，雖然接觸的東西比較多，但是設計師通過這些東西可以自己掌控一個項目，而且入門的學習成本并不是很高。相信很多設計師是可以很容易做到這些的。大家也可以收藏這個網站www.webstack.cc，這里面的網站是我做UI設計以來收集的一些比較好的網站書簽，如果大家有什么想法或者問題都可以通過我的個人網站www.viggoz.com聯系到我。