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