在看這篇文章之前大家先看做出來的產(chǎn)品是什么：www.WebStack.cc --這是一個設(shè)計師的網(wǎng)址導(dǎo)航網(wǎng)眷茁。
寫這篇文章的本意是站在一個設(shè)計師的角度畴博，分析設(shè)計師在有一個好玩的點子的時候，應(yīng)該怎樣利用所有的資源去完成這個點子，下面我是通過做這個導(dǎo)航網(wǎng)站為栗子，來講述一個產(chǎn)品從0到1的這個過程和一些個人建議巢价。
1. 計劃
首先說明一下這個項目我計劃是在一周時間做完，實際是差不多7天時間固阁，后面有幾天是在完善內(nèi)容數(shù)據(jù)壤躲。開始之前我會根據(jù)定下來的功能需求自己大概估計一下時間，這里就包括產(chǎn)品需求文檔备燃、UI設(shè)計 前端開發(fā)碉克、后臺開發(fā)、測試上線并齐、內(nèi)容完善 等漏麦。這些對于這個簡單的網(wǎng)站來說開發(fā)和完善內(nèi)容用掉了大多數(shù)時間客税。
因為這篇文章是寫給設(shè)計師看的，可能除了設(shè)計之外的其他工作并不是我們擅長的撕贞，但是我們可以不一定要很專業(yè)更耻，我們的目的是做一個產(chǎn)品出來，我們只需要知道這個東西怎么做捏膨，然后就用最簡便的方法去實現(xiàn)秧均，有現(xiàn)成的東西就不去重復(fù)搭梯子，有開源的代碼就不自己重頭碼号涯。
2. 確定功能需求
這里要扯一點其他的目胡。在2017年我養(yǎng)成了一個習(xí)慣，每天都會抽空看看有哪些互聯(lián)網(wǎng)新產(chǎn)品出現(xiàn)诚隙，不管是App還是有趣的網(wǎng)站讶隐。在這個習(xí)慣有了一段時間之后我發(fā)現(xiàn)我自己收藏了很多很多的網(wǎng)站書簽起胰，但是在保存這些書簽的時候并沒有很好的去按照嚴(yán)格的分類收集久又，這就導(dǎo)致了后來想起之前看到過的某個網(wǎng)站，也記得當(dāng)時收藏了效五，但就是死活想不起來收藏到哪個瀏覽器分類當(dāng)中了地消。
這里也就是差不多我最初要做這個導(dǎo)航網(wǎng)站的原因（不算是直接原因）。后來我在網(wǎng)上搜集了很多設(shè)計師的導(dǎo)航網(wǎng)站,發(fā)現(xiàn)在這很多的導(dǎo)航網(wǎng)站中其實產(chǎn)品定位都是有很大不同側(cè)重畏妖。這里我們不用出具體的設(shè)呢么競品分析脉执，用戶研究這些，大概按照自己想要的方向去做就好戒劫，我這里很明確的目的就是要做UI設(shè)計師需要的導(dǎo)航網(wǎng)站半夷。后面我收集了大量的導(dǎo)航網(wǎng)站，算是簡單競品分析迅细。如下圖
首先要確定導(dǎo)航網(wǎng)站的排布方式巫橄，導(dǎo)航欄的位置。根據(jù)大多數(shù)這類導(dǎo)航網(wǎng)站和我自己的體驗來看茵典，最好的交互應(yīng)該是左側(cè)固定全局的導(dǎo)航欄方式湘换，因為導(dǎo)航的內(nèi)容條目會非常多，不適合做頂部導(dǎo)航或者可收縮式的導(dǎo)航欄统阿。固定的全局導(dǎo)航可以讓用戶能夠快速選擇并且定位到自己需要的內(nèi)容位置彩倚。
除了導(dǎo)航功能之外還有一個就是讓用戶提交書簽的功能。根據(jù)自己的需求和競品初步分析確定了產(chǎn)品主要功能之后扶平，這一步就ok了帆离。這一步基本可以不需要輸出任何東西，只要知道要做的東西即可结澄。
3. 需求文檔
這一步作為設(shè)計師盯质，我們來看看怎么去簡單快速的輸出一些東西袁串。
PRD文檔的編寫我們不用按照非常規(guī)范的東西去寫，但是要讓自己能夠梳理清楚產(chǎn)品的結(jié)構(gòu)即可呼巷。我這里用的是Mindnode和Axure這兩個軟件囱修。
我是先在Axure中創(chuàng)建如下圖的目錄，完整的PRD目錄不止是這些內(nèi)容王悍，但是對于這個小項目來說破镰，我們只需要著重關(guān)注產(chǎn)品介紹、信息結(jié)構(gòu)压储、產(chǎn)品結(jié)構(gòu)這幾個方面即可鲜漩，我的目的就是清楚的梳理產(chǎn)品的邏輯。對于后面設(shè)計和開發(fā)來說也是必要的集惋。在這個梳理的過程中也會發(fā)現(xiàn)很多功能方面的問題孕似，自己也可以在這一步驗證產(chǎn)品的可行性。而不是想到一個點子直接開始設(shè)計UI界面刮刑，這是設(shè)計師做產(chǎn)品比較忌諱的喉祭。
-
產(chǎn)品介紹
先看產(chǎn)品的介紹部分，這里用最簡單的一句話描述一下產(chǎn)品雷绢，這句話要能體現(xiàn)產(chǎn)品的核心功能和面向用戶泛烙。再做一下簡單的用戶特征等的簡單分析，怎么簡單怎么來翘紊。
-
信息結(jié)構(gòu)圖
在寫信息結(jié)構(gòu)圖的時候其實是梳理網(wǎng)站邏輯的一個過程蔽氨，要將產(chǎn)品功能的信息進(jìn)行一一羅列，你會清楚的知道每一個字段的對應(yīng)關(guān)系帆疟，也完全能夠確定下來產(chǎn)品的功能結(jié)構(gòu)鹉究。在寫這個結(jié)構(gòu)圖的過程一定要不斷挖掘到最底層，每一個產(chǎn)品細(xì)節(jié)都可以在這里體現(xiàn)出來踪宠。
-
產(chǎn)品結(jié)構(gòu)圖
產(chǎn)品功能圖實際上就是一種結(jié)構(gòu)化的產(chǎn)品原型自赔。我們在梳理產(chǎn)品功能的時候，就會清楚這個功能有哪些表現(xiàn)方式殴蓬，跳轉(zhuǎn)到什么樣的網(wǎng)頁上匿级，網(wǎng)頁之間的互相關(guān)聯(lián)等。
關(guān)于結(jié)構(gòu)圖的寫法大家可以根據(jù)自己的需要去寫染厅，我習(xí)慣用思維導(dǎo)圖的方式記錄痘绎，關(guān)于怎么做思維導(dǎo)圖大家可以去知乎科普，還是那句話肖粮，我們的目的就是要讓這些圖能表達(dá)出自己的想法就行孤页。
4. 交互UI設(shè)計
這里作為設(shè)計師來說，就是很擅長的事情了涩馆，我這里網(wǎng)站結(jié)構(gòu)非常簡單行施，為了節(jié)省時間并沒有去用軟件畫線框交互稿允坚，但是最基本的線框圖還是要在紙上簡單繪制，讓自己對設(shè)計的網(wǎng)站有個大概的框架蛾号。
后臺管理系統(tǒng)界面設(shè)計稠项，后臺Dashboard界面在設(shè)計之前就有考慮，因為是管理網(wǎng)站的界面鲜结，我這里是直接用開源的框架來用展运，界面風(fēng)格不用過多設(shè)計，網(wǎng)上有很多售賣的前端web UI kit精刷，這類套件能讓設(shè)計師很快的做出網(wǎng)頁拗胜，代碼方面只需要知道前端基本知識就可以，后臺對于界面要求不是很高完全可以直接用框架節(jié)省時間怒允，也不用專門去找前端研發(fā)同學(xué)來做埂软。
下面是后臺的部分界面截圖：
5. 前端開發(fā)
開發(fā)網(wǎng)站對于設(shè)計師來說其實是比較難，但是去學(xué)習(xí)一點前端開發(fā)知識是很容易入門的纫事，建議去 慕課網(wǎng)看一下相關(guān)的HTML/CSS課程很快上手勘畔，然后用開源框架也能夠很快的實現(xiàn)想要的網(wǎng)站效果。我這里用的是XENON這個基于Bootstrap的前端Dashboard UI框架儿礼。也有另外一套框架Bootstrap 4 UI Kit | Wrappixel這個UI Kit可以做網(wǎng)頁中基本能用到的所有控件效果咖杂，但是界面設(shè)計的局限性比較大庆寺。這類UI Kit是有很多的蚊夫，不用每個都去用，找一套自己比較喜歡的下載來用一次兩次就能很輕松的自己實現(xiàn)網(wǎng)站靜態(tài)頁面開發(fā)了懦尝。
在寫好頁面前端之后知纷，還可以再去看一些基礎(chǔ)的網(wǎng)站SEO優(yōu)化的內(nèi)容，最簡單的方法去買本書來看即可陵霉，不用深入琅轧，簡單入門，知道怎么優(yōu)化網(wǎng)站title踊挠、description乍桂、keywords即可，我這里加入了一些facebook效床、google+睹酌、twitter等的分享的標(biāo)簽，在分享網(wǎng)站的時候看到的網(wǎng)頁鏈接就會有小圖片顯示了剩檀。
加入Google Analytics的代碼就可以監(jiān)測網(wǎng)站訪問數(shù)據(jù)了憋沿。
前端開發(fā)在這里基本就ok，如果你做的網(wǎng)站是靜態(tài)網(wǎng)頁沪猴，到這一步就可以直接發(fā)布網(wǎng)站上線了辐啄。
6. 后端開發(fā)
后端開發(fā)這里對于UI設(shè)計來說其實是比較難入門的采章，要學(xué)的東西比較多，筆者大學(xué)是學(xué)的軟件開發(fā)專業(yè)的壶辜，畢業(yè)之后從事了UI設(shè)計的工作悯舟，深知后臺開發(fā)和服務(wù)器開發(fā)是需要比較多的時間去研究才可以的。所以這部分不建議設(shè)計師去花時間搞的砸民，可以找朋友做图谷。我這個項目在前期設(shè)計的時候是有后臺系統(tǒng)的，直接用開源的CMS框架開發(fā)起來其實也是可以很快完成的阱洪，但是我后臺放棄了便贵，因為這個系統(tǒng)還是比較笨重的，對于導(dǎo)航網(wǎng)站這個項目來說可以不用這么復(fù)雜冗荸。最后放棄了開發(fā)后臺系統(tǒng)承璃，改用了純靜態(tài)的網(wǎng)站頁面。
7. 網(wǎng)站上線
我們網(wǎng)站設(shè)計實現(xiàn)ok之后蚌本，怎么讓別人順利訪問我們的網(wǎng)站盔粹，這里可以自己買域名，買服務(wù)器然后上線程癌。這里是需要一定的花費(fèi)的舷嗡。
這里需要一點注意，國內(nèi)在萬網(wǎng)購買的域名需要實名認(rèn)證嵌莉，服務(wù)器需要備案別人才能正常訪問进萄，很多后綴的域名現(xiàn)在暫時不能實名認(rèn)證所以你就算買了服務(wù)器也不能通過備案。在購買域名的時候一定要注意锐峭。
- 服務(wù)器：阿里云中鼠、騰訊云、百度云都是有服務(wù)器賣
國內(nèi)獨立主機(jī)比較貴沿癞，學(xué)生是有免費(fèi)主機(jī)可以用援雇，有時候買域名也是有送半年服務(wù)器這樣子的，但是續(xù)費(fèi)比較貴椎扬。當(dāng)然也可以考慮國外云服務(wù)器惫搏。這個坑也是比較多，需要時間去學(xué)蚕涤。建議用下面的方法筐赔。
- 用Github做靜態(tài)網(wǎng)頁服務(wù)器
這里可以去學(xué)一下怎么用github，也是簡單入門即可钻趋，github注冊帳號之后你是可以有一個個人獨立主頁川陆，這個主頁是可以直接通過互聯(lián)網(wǎng)訪問的，例如：viggoz.github.io這個域名地址前面是你的github用戶名，你可以在購買了域名之后直接通過CNAME方式解析域名到這個地址即可较沪。
github的每一個項目也都可以有g(shù)h-pages分支鳞绕，這個分支也是可以直接放靜態(tài)頁面通過外網(wǎng)訪問。這個項目是可以有多個項目的尸曼，也就是說你可以放無數(shù)多個靜態(tài)頁面在這里们何。但是這些項目的網(wǎng)站并不能當(dāng)成一級域名地址來訪問，他都是包含在你的viggoz.github.io之下控轿，所以這個頁面就不能單獨進(jìn)行域名綁定冤竹。
但是，還有但是茬射，通過github你是可以創(chuàng)建多個組織碑诉，一個組織是可以有一個官網(wǎng)曙蒸，一個官網(wǎng)可以像你的github帳號一樣解析一個域名的。
注意：如果這里自己搞不定，也是建議直接找朋友幫忙吧屯掖。
8. 總結(jié)
這篇文章是寫給設(shè)計師看的贯莺，其實設(shè)計師一個人去做一個網(wǎng)站也不是很難重慢，雖然接觸的東西比較多测僵，但是設(shè)計師通過這些東西可以自己掌控一個項目，而且入門的學(xué)習(xí)成本并不是很高朴读。相信很多設(shè)計師是可以很容易做到這些的屹徘。大家也可以收藏這個網(wǎng)站www.webstack.cc，這里面的網(wǎng)站是我做UI設(shè)計以來收集的一些比較好的網(wǎng)站書簽衅金，如果大家有什么想法或者問題都可以通過我的個人網(wǎng)站www.viggoz.com聯(lián)系到我噪伊。
