一個(gè)設(shè)計(jì)師的開(kāi)發(fā)之路

來(lái)源于：

http://blog.viggoz.com/2018/01/03/2018-01-03-webstack/

在看這篇文章之前大家先看做出來(lái)的產(chǎn)品是什么：www.WebStack.cc?–這是一個(gè)設(shè)計(jì)師的網(wǎng)址導(dǎo)航網(wǎng)。

寫(xiě)這篇文章的本意是站在一個(gè)設(shè)計(jì)師的角度，分析設(shè)計(jì)師在有一個(gè)好玩的點(diǎn)子的時(shí)候，應(yīng)該怎樣利用所有的資源去完成這個(gè)點(diǎn)子，下面我是通過(guò)做這個(gè)導(dǎo)航網(wǎng)站為栗子，來(lái)講述一個(gè)產(chǎn)品從0到1的這個(gè)過(guò)程和一些個(gè)人建議。

1. 計(jì)劃

首先說(shuō)明一下這個(gè)項(xiàng)目我計(jì)劃是在一周時(shí)間做完，實(shí)際是差不多7天時(shí)間，后面有幾天是在完善內(nèi)容數(shù)據(jù)。開(kāi)始之前我會(huì)根據(jù)定下來(lái)的功能需求自己大概估計(jì)一下時(shí)間，這里就包括產(chǎn)品需求文檔、UI設(shè)計(jì)?前端開(kāi)發(fā)、后臺(tái)開(kāi)發(fā)、測(cè)試上線、內(nèi)容完善?等。這些對(duì)于這個(gè)簡(jiǎn)單的網(wǎng)站來(lái)說(shuō)開(kāi)發(fā)和完善內(nèi)容用掉了大多數(shù)時(shí)間。

因?yàn)檫@篇文章是寫(xiě)給設(shè)計(jì)師看的，可能除了設(shè)計(jì)之外的其他工作并不是我們擅長(zhǎng)的，但是我們可以不一定要很專業(yè)，我們的目的是做一個(gè)產(chǎn)品出來(lái)，我們只需要知道這個(gè)東西怎么做，然后就用最簡(jiǎn)便的方法去實(shí)現(xiàn)，有現(xiàn)成的東西就不去重復(fù)搭梯子，有開(kāi)源的代碼就不自己重頭碼。

2. 確定功能需求

這里要扯一點(diǎn)其他的。在2017年我養(yǎng)成了一個(gè)習(xí)慣，每天都會(huì)抽空看看有哪些互聯(lián)網(wǎng)新產(chǎn)品出現(xiàn)，不管是App還是有趣的網(wǎng)站。在這個(gè)習(xí)慣有了一段時(shí)間之后我發(fā)現(xiàn)我自己收藏了很多很多的網(wǎng)站書(shū)簽，但是在保存這些書(shū)簽的時(shí)候并沒(méi)有很好的去按照嚴(yán)格的分類(lèi)收集，這就導(dǎo)致了后來(lái)想起之前看到過(guò)的某個(gè)網(wǎng)站，也記得當(dāng)時(shí)收藏了，但就是死活想不起來(lái)收藏到哪個(gè)瀏覽器分類(lèi)當(dāng)中了。

這里也就是差不多我最初要做這個(gè)導(dǎo)航網(wǎng)站的原因（不算是直接原因）。后來(lái)我在網(wǎng)上搜集了很多設(shè)計(jì)師的導(dǎo)航網(wǎng)站,發(fā)現(xiàn)在這很多的導(dǎo)航網(wǎng)站中其實(shí)產(chǎn)品定位都是有很大不同側(cè)重。這里我們不用出具體的設(shè)呢么競(jìng)品分析，用戶研究這些，大概按照自己想要的方向去做就好，我這里很明確的目的就是要做UI設(shè)計(jì)師需要的導(dǎo)航網(wǎng)站。后面我收集了大量的導(dǎo)航網(wǎng)站，算是簡(jiǎn)單競(jìng)品分析。如下圖

首先要確定導(dǎo)航網(wǎng)站的排布方式，導(dǎo)航欄的位置。根據(jù)大多數(shù)這類(lèi)導(dǎo)航網(wǎng)站和我自己的體驗(yàn)來(lái)看，最好的交互應(yīng)該是左側(cè)固定全局的導(dǎo)航欄方式，因?yàn)閷?dǎo)航的內(nèi)容條目會(huì)非常多，不適合做頂部導(dǎo)航或者可收縮式的導(dǎo)航欄。固定的全局導(dǎo)航可以讓用戶能夠快速選擇并且定位到自己需要的內(nèi)容位置。

除了導(dǎo)航功能之外還有一個(gè)就是讓用戶提交書(shū)簽的功能。根據(jù)自己的需求和競(jìng)品初步分析確定了產(chǎn)品主要功能之后，這一步就ok了。這一步基本可以不需要輸出任何東西，只要知道要做的東西即可。

3. 需求文檔

這一步作為設(shè)計(jì)師，我們來(lái)看看怎么去簡(jiǎn)單快速的輸出一些東西。

PRD文檔的編寫(xiě)我們不用按照非常規(guī)范的東西去寫(xiě)，但是要讓自己能夠梳理清楚產(chǎn)品的結(jié)構(gòu)即可。我這里用的是Mindnode和Axure這兩個(gè)軟件。

我是先在Axure中創(chuàng)建如下圖的目錄，完整的PRD目錄不止是這些內(nèi)容，但是對(duì)于這個(gè)小項(xiàng)目來(lái)說(shuō)，我們只需要著重關(guān)注產(chǎn)品介紹、信息結(jié)構(gòu)、產(chǎn)品結(jié)構(gòu)這幾個(gè)方面即可，我的目的就是清楚的梳理產(chǎn)品的邏輯。對(duì)于后面設(shè)計(jì)和開(kāi)發(fā)來(lái)說(shuō)也是必要的。在這個(gè)梳理的過(guò)程中也會(huì)發(fā)現(xiàn)很多功能方面的問(wèn)題，自己也可以在這一步驗(yàn)證產(chǎn)品的可行性。而不是想到一個(gè)點(diǎn)子直接開(kāi)始設(shè)計(jì)UI界面，這是設(shè)計(jì)師做產(chǎn)品比較忌諱的。

• 產(chǎn)品介紹
• 先看產(chǎn)品的介紹部分，這里用最簡(jiǎn)單的一句話描述一下產(chǎn)品，這句話要能體現(xiàn)產(chǎn)品的核心功能和面向用戶。再做一下簡(jiǎn)單的用戶特征等的簡(jiǎn)單分析，怎么簡(jiǎn)單怎么來(lái)。

信息結(jié)構(gòu)圖

在寫(xiě)信息結(jié)構(gòu)圖的時(shí)候其實(shí)是梳理網(wǎng)站邏輯的一個(gè)過(guò)程，要將產(chǎn)品功能的信息進(jìn)行一一羅列，你會(huì)清楚的知道每一個(gè)字段的對(duì)應(yīng)關(guān)系，也完全能夠確定下來(lái)產(chǎn)品的功能結(jié)構(gòu)。在寫(xiě)這個(gè)結(jié)構(gòu)圖的過(guò)程一定要不斷挖掘到最底層，每一個(gè)產(chǎn)品細(xì)節(jié)都可以在這里體現(xiàn)出來(lái)。

產(chǎn)品結(jié)構(gòu)圖

產(chǎn)品功能圖實(shí)際上就是一種結(jié)構(gòu)化的產(chǎn)品原型。我們?cè)谑崂懋a(chǎn)品功能的時(shí)候，就會(huì)清楚這個(gè)功能有哪些表現(xiàn)方式，跳轉(zhuǎn)到什么樣的網(wǎng)頁(yè)上，網(wǎng)頁(yè)之間的互相關(guān)聯(lián)等。

關(guān)于結(jié)構(gòu)圖的寫(xiě)法大家可以根據(jù)自己的需要去寫(xiě)，我習(xí)慣用思維導(dǎo)圖的方式記錄，關(guān)于怎么做思維導(dǎo)圖大家可以去知乎科普，還是那句話，我們的目的就是要讓這些圖能表達(dá)出自己的想法就行。

4. 交互UI設(shè)計(jì)

這里作為設(shè)計(jì)師來(lái)說(shuō)，就是很擅長(zhǎng)的事情了，我這里網(wǎng)站結(jié)構(gòu)非常簡(jiǎn)單，為了節(jié)省時(shí)間并沒(méi)有去用軟件畫(huà)線框交互稿，但是最基本的線框圖還是要在紙上簡(jiǎn)單繪制，讓自己對(duì)設(shè)計(jì)的網(wǎng)站有個(gè)大概的框架。

后臺(tái)管理系統(tǒng)界面設(shè)計(jì)，后臺(tái)Dashboard界面在設(shè)計(jì)之前就有考慮，因?yàn)槭枪芾砭W(wǎng)站的界面，我這里是直接用開(kāi)源的框架來(lái)用，界面風(fēng)格不用過(guò)多設(shè)計(jì)，網(wǎng)上有很多售賣(mài)的前端web UI kit，這類(lèi)套件能讓設(shè)計(jì)師很快的做出網(wǎng)頁(yè)，代碼方面只需要知道前端基本知識(shí)就可以，后臺(tái)對(duì)于界面要求不是很高完全可以直接用框架節(jié)省時(shí)間，也不用專門(mén)去找前端研發(fā)同學(xué)來(lái)做。

下面是后臺(tái)的部分界面截圖：

5. 前端開(kāi)發(fā)

開(kāi)發(fā)網(wǎng)站對(duì)于設(shè)計(jì)師來(lái)說(shuō)其實(shí)是比較難，但是去學(xué)習(xí)一點(diǎn)前端開(kāi)發(fā)知識(shí)是很容易入門(mén)的，建議去?慕課網(wǎng)看一下相關(guān)的HTML/CSS課程很快上手，然后用開(kāi)源框架也能夠很快的實(shí)現(xiàn)想要的網(wǎng)站效果。我這里用的是XENON這個(gè)基于Bootstrap的前端Dashboard UI框架。也有另外一套框架Bootstrap 4 UI Kit | Wrappixel這個(gè)UI Kit可以做網(wǎng)頁(yè)中基本能用到的所有控件效果，但是界面設(shè)計(jì)的局限性比較大。這類(lèi)UI Kit是有很多的，不用每個(gè)都去用，找一套自己比較喜歡的下載來(lái)用一次兩次就能很輕松的自己實(shí)現(xiàn)網(wǎng)站靜態(tài)頁(yè)面開(kāi)發(fā)了。

在寫(xiě)好頁(yè)面前端之后，還可以再去看一些基礎(chǔ)的網(wǎng)站SEO優(yōu)化的內(nèi)容，最簡(jiǎn)單的方法去買(mǎi)本書(shū)來(lái)看即可，不用深入，簡(jiǎn)單入門(mén)，知道怎么優(yōu)化網(wǎng)站title、description、keywords即可，我這里加入了一些facebook、google+、twitter等的分享的標(biāo)簽，在分享網(wǎng)站的時(shí)候看到的網(wǎng)頁(yè)鏈接就會(huì)有小圖片顯示了。

加入Google Analytics的代碼就可以監(jiān)測(cè)網(wǎng)站訪問(wèn)數(shù)據(jù)了。

• 前端開(kāi)發(fā)在這里基本就ok，如果你做的網(wǎng)站是靜態(tài)網(wǎng)頁(yè)，到這一步就可以直接發(fā)布網(wǎng)站上線了。

6. 后端開(kāi)發(fā)

• 后端開(kāi)發(fā)這里對(duì)于UI設(shè)計(jì)來(lái)說(shuō)其實(shí)是比較難入門(mén)的，要學(xué)的東西比較多，筆者大學(xué)是學(xué)的軟件開(kāi)發(fā)專業(yè)的，畢業(yè)之后從事了UI設(shè)計(jì)的工作，深知后臺(tái)開(kāi)發(fā)和服務(wù)器開(kāi)發(fā)是需要比較多的時(shí)間去研究才可以的。所以這部分不建議設(shè)計(jì)師去花時(shí)間搞的，可以找朋友做。我這個(gè)項(xiàng)目在前期設(shè)計(jì)的時(shí)候是有后臺(tái)系統(tǒng)的，直接用開(kāi)源的CMS框架開(kāi)發(fā)起來(lái)其實(shí)也是可以很快完成的，但是我后臺(tái)放棄了，因?yàn)檫@個(gè)系統(tǒng)還是比較笨重的，對(duì)于導(dǎo)航網(wǎng)站這個(gè)項(xiàng)目來(lái)說(shuō)可以不用這么復(fù)雜。最后放棄了開(kāi)發(fā)后臺(tái)系統(tǒng)，改用了純靜態(tài)的網(wǎng)站頁(yè)面。

7. 網(wǎng)站上線

• 我們網(wǎng)站設(shè)計(jì)實(shí)現(xiàn)ok之后，怎么讓別人順利訪問(wèn)我們的網(wǎng)站，這里可以自己買(mǎi)域名，買(mǎi)服務(wù)器然后上線。這里是需要一定的花費(fèi)的。
• 網(wǎng)站域名：可以去萬(wàn)網(wǎng)或者GoDaddy購(gòu)買(mǎi)

這里需要一點(diǎn)注意，國(guó)內(nèi)在萬(wàn)網(wǎng)購(gòu)買(mǎi)的域名需要實(shí)名認(rèn)證，服務(wù)器需要備案別人才能正常訪問(wèn)，很多后綴的域名現(xiàn)在暫時(shí)不能實(shí)名認(rèn)證所以你就算買(mǎi)了服務(wù)器也不能通過(guò)備案。在購(gòu)買(mǎi)域名的時(shí)候一定要注意。

• 服務(wù)器：阿里云、騰訊云、百度云都是有服務(wù)器賣(mài)

國(guó)內(nèi)獨(dú)立主機(jī)比較貴，學(xué)生是有免費(fèi)主機(jī)可以用，有時(shí)候買(mǎi)域名也是有送半年服務(wù)器這樣子的，但是續(xù)費(fèi)比較貴。當(dāng)然也可以考慮國(guó)外云服務(wù)器。這個(gè)坑也是比較多，需要時(shí)間去學(xué)。建議用下面的方法。

• 用Github做靜態(tài)網(wǎng)頁(yè)服務(wù)器

這里可以去學(xué)一下怎么用github，也是簡(jiǎn)單入門(mén)即可，github注冊(cè)帳號(hào)之后你是可以有一個(gè)個(gè)人獨(dú)立主頁(yè)，這個(gè)主頁(yè)是可以直接通過(guò)互聯(lián)網(wǎng)訪問(wèn)的，例如：viggoz.github.io這個(gè)域名地址前面是你的github用戶名，你可以在購(gòu)買(mǎi)了域名之后直接通過(guò)CNAME方式解析域名到這個(gè)地址即可。

github的每一個(gè)項(xiàng)目也都可以有g(shù)h-pages分支，這個(gè)分支也是可以直接放靜態(tài)頁(yè)面通過(guò)外網(wǎng)訪問(wèn)。這個(gè)項(xiàng)目是可以有多個(gè)項(xiàng)目的，也就是說(shuō)你可以放無(wú)數(shù)多個(gè)靜態(tài)頁(yè)面在這里。但是這些項(xiàng)目的網(wǎng)站并不能當(dāng)成一級(jí)域名地址來(lái)訪問(wèn)，他都是包含在你的viggoz.github.io之下，所以這個(gè)頁(yè)面就不能單獨(dú)進(jìn)行域名綁定。

但是，還有但是，通過(guò)github你是可以創(chuàng)建多個(gè)組織，一個(gè)組織是可以有一個(gè)官網(wǎng)，一個(gè)官網(wǎng)可以像你的github帳號(hào)一樣解析一個(gè)域名的。

注意：如果這里自己搞不定，也是建議直接找朋友幫忙吧。

8. 總結(jié)

這篇文章是寫(xiě)給設(shè)計(jì)師看的，其實(shí)設(shè)計(jì)師一個(gè)人去做一個(gè)網(wǎng)站也不是很難，雖然接觸的東西比較多，但是設(shè)計(jì)師通過(guò)這些東西可以自己掌控一個(gè)項(xiàng)目，而且入門(mén)的學(xué)習(xí)成本并不是很高。相信很多設(shè)計(jì)師是可以很容易做到這些的。大家也可以收藏這個(gè)網(wǎng)站www.webstack.cc，這里面的網(wǎng)站是我做UI設(shè)計(jì)以來(lái)收集的一些比較好的網(wǎng)站書(shū)簽，如果大家有什么想法或者問(wèn)題都可以通過(guò)我的個(gè)人網(wǎng)站www.viggoz.com聯(lián)系到我。