撰寫本文的初衷是站在設(shè)計師的一邊，分析設(shè)計師如何在他有一個有趣的想法時使用所有資源來完成這個想法。內(nèi)容：www.WebStack.cc - 這是一個設(shè)計師的網(wǎng)絡(luò)導(dǎo)航網(wǎng)絡(luò)。

撰寫本文的初衷是站在設(shè)計師的一邊，分析設(shè)計師如何在他有一個有趣的想法時使用所有資源來完成這個想法。下面我正在為栗子做這個導(dǎo)航網(wǎng)站。描述從0到1的過程以及一些個人建議。

1.計劃

首先，讓我解釋一下這個項目。我打算在一周內(nèi)完成它。實際上，差不多是7天。幾天后，我正在完善內(nèi)容數(shù)據(jù)。在開始之前，我將根據(jù)固定的功能要求估算時間。以下是產(chǎn)品需求文檔，UI設(shè)計，前端開發(fā)，后臺開發(fā)，在線測試和內(nèi)容改進(jìn)。這些大部分時間都在為這個簡單的網(wǎng)站開發(fā)和改進(jìn)內(nèi)容。

因為這篇文章是為設(shè)計師寫的，也許除了設(shè)計之外的其他工作對我們不好，但我們不一定非常專業(yè)。我們的目標(biāo)是制造產(chǎn)品。我們只需要知道這件事。怎么做呢，然后用最簡單的方法實現(xiàn)，有現(xiàn)成的東西不會重復(fù)的階梯，開源代碼不會重復(fù)代碼。

2.確定此處的功能要求以提高一點。 2017年，我養(yǎng)成了習(xí)慣，花時間看看有哪些新的互聯(lián)網(wǎng)產(chǎn)品出現(xiàn)，無論是應(yīng)用還是有趣的網(wǎng)站。在這個習(xí)慣已經(jīng)存在一段時間后，我發(fā)現(xiàn)自己已經(jīng)收集了很多網(wǎng)站書簽，但是當(dāng)我保存這些書簽時，我沒有按照嚴(yán)格的分類收集它們。這讓我想起了我之前看到過的東西。某個網(wǎng)站，我當(dāng)時還記得那個收藏品，但我記不起我收集的瀏覽器類別了。

這就是為什么我是第一個做這個導(dǎo)航網(wǎng)站的原因（不是直接原因）。后來，我在互聯(lián)網(wǎng)上收集了很多設(shè)計師導(dǎo)航網(wǎng)站，發(fā)現(xiàn)在很多這樣的導(dǎo)航網(wǎng)站中，產(chǎn)品定位差異很大。在這里，我們不必進(jìn)行特定的設(shè)計，競爭產(chǎn)品分析，用戶研究這些，可能是他們想要的方向，我這里非常明確的目的是做UI設(shè)計師需要的導(dǎo)航網(wǎng)站。后來，我收集了大量的導(dǎo)航網(wǎng)站，這是一個簡單的競爭分析。如下圖所示

首先，確定導(dǎo)航網(wǎng)站的布局，導(dǎo)航欄的位置。根據(jù)大多數(shù)這些導(dǎo)航網(wǎng)站和我自己的經(jīng)驗，最好的互動應(yīng)該是左邊的固定全球?qū)Ш綑冢驗閷?dǎo)航內(nèi)容項會非常大，不適合頂級導(dǎo)航或可伸縮導(dǎo)航。柱。固定的全球?qū)Ш皆试S用戶快速選擇和定位他們需要的內(nèi)容位置。

除導(dǎo)航功能外，還有一個允許用戶提交書簽的功能。根據(jù)您自己的需求確定產(chǎn)品的主要功能并對競爭產(chǎn)品進(jìn)行初步分析后，此步驟即可。這一步基本上不需要輸出任何東西，只知道該怎么做。 3.作為設(shè)計師的需求文檔，讓我們看看如何簡單快速地輸出內(nèi)容。

我們不必根據(jù)非常標(biāo)準(zhǔn)的事情編寫PRD文檔來編寫，但讓我們自己能夠理清產(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)品，這句話應(yīng)該體現(xiàn)產(chǎn)品的核心功能和用戶導(dǎo)向。讓我們對簡單的用戶功能等進(jìn)行簡單的分析。如何簡單地完成它。

- 信息結(jié)構(gòu)圖實際上是在編寫信息結(jié)構(gòu)圖時梳理網(wǎng)站邏輯的過程。要逐一列出產(chǎn)品功能的信息，您將清楚地了解每個字段之間的對應(yīng)關(guān)系并完全確定產(chǎn)品。功能結(jié)構(gòu)。編寫這個結(jié)構(gòu)圖的過程必須不斷深入挖掘，每個產(chǎn)品細(xì)節(jié)都可以在這里反映出來。

- 產(chǎn)品結(jié)構(gòu)圖產(chǎn)品功能圖實際上是結(jié)構(gòu)化產(chǎn)品原型。當(dāng)我們梳理產(chǎn)品功能時，我們會知道這個功能是什么樣的性能，如何跳轉(zhuǎn)到什么樣的網(wǎng)頁，網(wǎng)頁之間的相互聯(lián)系等等。

每個人都可以根據(jù)自己的需要寫作。我習(xí)慣以思維導(dǎo)圖的方式錄制。關(guān)于如何做思維導(dǎo)圖，每個人都可以了解科學(xué)或那句話，我們的目的是使這些數(shù)字能夠表達(dá)自己的想法。 4.交互式UI設(shè)計在這里，作為一名設(shè)計師，它非常擅長。我的網(wǎng)站結(jié)構(gòu)非常簡單。為了節(jié)省時間，我不使用軟件繪制線框交互式草稿，但最基本的線框仍在紙上。只需借鑒它，讓自己有一個粗略的網(wǎng)站設(shè)計框架。

后臺管理系統(tǒng)界面設(shè)計，后臺Dashboard界面在設(shè)計之前就已經(jīng)考慮過了，因為它是管理網(wǎng)站的界面，我直接使用開源框架，界面風(fēng)格不需要太多設(shè)計，前面有很多 - 在線銷售的網(wǎng)頁UI工具包。這種工具包可以使設(shè)計人員快速制作網(wǎng)頁。代碼只需要知道前端的基本知識。后端不是很高。界面可以通過使用框架直接節(jié)省時間，而且沒有必要去前端研發(fā)同學(xué)。做。

以下是一些背景屏幕的屏幕截圖：

5.前端開發(fā)和開發(fā)網(wǎng)站對于設(shè)計人員來說實際上非常困難，但是很容易開始使用一些前端開發(fā)知識。建議去Mutu.com查看相關(guān)的HTML/CSS課程并快速入門，然后使用開源框架。還可以快速實現(xiàn)所需的網(wǎng)站效果。我正在使用基于Bootstrap的前端Dashboard UI框架XENON。還有另一套框架Bootstrap 4 UI Kit-Wrappixel這個UI工具包可以完成基本上可以在網(wǎng)頁中使用的所有控制效果，但界面設(shè)計的局限性相對較大。有很多這樣的UI工具包，所以你不必每次都使用它們。找到一組您喜歡的下載，您可以輕松實現(xiàn)一兩次網(wǎng)站的靜態(tài)頁面開發(fā)。

寫完頁面的前端后，你還可以去一些基本的網(wǎng)站SEO優(yōu)化內(nèi)容，買書最簡單的方法就可以了，你不需要深入，易上手，懂得優(yōu)化網(wǎng)站標(biāo)題，描述，關(guān)鍵詞是的，我添加了一些共享標(biāo)簽，如臉書，谷歌+，推特等，當(dāng)我分享網(wǎng)站時會顯示一個小圖片。

加入Google Analytics代碼以監(jiān)控網(wǎng)站訪問：

這里的前端開發(fā)基本上沒問題，如果您正在做的網(wǎng)站是靜態(tài)網(wǎng)頁，您可以在此步驟中直接在線發(fā)布網(wǎng)站。

6.后端開發(fā)后端開發(fā)實際上很難開始使用UI設(shè)計。有很多東西需要學(xué)習(xí)。作者是一名軟件開發(fā)專家。畢業(yè)后，他從事UI設(shè)計工作，了解背景知識。開發(fā)和服務(wù)器開發(fā)需要更多時間進(jìn)行研究。所以這部分不建議設(shè)計師花時間去做，你可以找朋友去做。我在這個項目的早期設(shè)計中有一個后臺系統(tǒng)?？梢允褂瞄_源CMS框架快速完成。但是，我放棄了后臺，因為系統(tǒng)仍然相對繁瑣。說它可以不復(fù)雜。最后放棄了開發(fā)后端系統(tǒng)并切換到純靜態(tài)網(wǎng)站頁面。 7.網(wǎng)站推出后，我們的網(wǎng)站設(shè)計成功，如何讓別人成功訪問我們的網(wǎng)站，在這里你可以自己購買域名，購買服務(wù)器然后上網(wǎng)。這是一定的成本。

- 網(wǎng)站域名：您可以去萬旺或GoDaddy購買

這里需要注意的是，在國內(nèi)網(wǎng)絡(luò)購買的域名需要實名認(rèn)證，服務(wù)器需要正常存檔供其他人訪問，后綴的多個域名暫時不能進(jìn)行實名認(rèn)證，因此即使您購買服務(wù)器也無法傳遞記錄。購買域名時一定要注意。

- 服務(wù)器：阿里云，騰訊云，百度云全部由服務(wù)器銷售

國內(nèi)獨立主機(jī)比較貴，學(xué)生可以免費使用主機(jī)，有時域名也會發(fā)送到服務(wù)器半年，但續(xù)費費用較貴。當(dāng)然，您也可以考慮使用外部云服務(wù)器。這個坑也更多，學(xué)習(xí)需要時間。建議使用以下方法。

- 使用Github作為靜態(tài)Web服務(wù)器

在這里你可以學(xué)習(xí)如何使用github，它也是一個簡單的介紹，你可以在github注冊賬號后擁有一個個人獨立的主頁，這個主頁可以直接通過互聯(lián)網(wǎng)訪問，例如：viggoz.github.io這個域名地址在您的github用戶名前面，您可以在通過CNAME購買域名后直接將域名解析為此地址。

github的每個項目也可以有一個gh-pages分支，也可以通過外部網(wǎng)絡(luò)直接訪問。這個項目可以有多個項目，這意味著你可以在這里放置無數(shù)的靜態(tài)頁面。但是，這些項目的網(wǎng)站無法作為第一級域名訪問。它們包含在您的viggoz.github.io中，因此此頁面不能單獨綁定。

但是，您可以通過github創(chuàng)建多個組織，組織可以擁有官方網(wǎng)站，官方網(wǎng)站可以像您的github帳戶一樣解析域名。

注意：如果您對此不確定，建議您直接向朋友尋求幫助。

8.總結(jié)本文是為設(shè)計師編寫的。事實上，設(shè)計師成為一個網(wǎng)站并不困難。雖然有很多事情需要聯(lián)系，但設(shè)計師可以自己控制項目。學(xué)習(xí)成本不是很高。我相信很多設(shè)計師都可以輕松做到這一點，后來會提出一系列文章，謝謝你們看到這一點。

« 優(yōu)步將推出共享電動自行車服務(wù)，首批300輛車 | 設(shè)計熟悉但未命名的規(guī)則：功能可用性 »