设计师怎样学习网站开发

　　写那篇文章的本意是站正在一个设想师的角度，阐发设想师正在有一个好玩的面子的时分，该当如何操纵一切的资本来完成那个面子正在看那篇文章之前各人先看作出去的产物是甚么：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、谷歌+、twitter等的分享的标签，正在分享网站的时分看到的网页链接便会有小图片显现了。

参加Google Analytics的代码便能够监测网站会见数据了：

前端开辟正在那里根本便ok，假如您做的网站是静态网页，到那一步便能够间接公布网站上线了。

　　6. 后端开辟后端开辟那里关于UI设想去道实在是比力易进门的，要教的工具比力多，笔者年夜教是教的硬件开辟专业的，结业以后处置了UI设想的事情，深知背景开辟战效劳器开辟是需求比力多的工夫来研讨才能够的。以是那部门没有倡议设想师来花工夫弄的，能够找伴侣做。我那个项目正在前期设想的时分是有背景体系的，间接用开源的CMS框架开辟起去实在也是能够很快完成的，可是我背景抛却了，果为那个体系借是比力粗笨的，关于导航网站那个项目去道能够不消那么庞大。最初抛却了开辟背景体系，改用了杂静态的网站页里。7. 网站上线我们网站设想真现ok以后，怎样让他人逆利会见我们的网站，那里能够本人购域名，购效劳器然后上线。那里是需求必然的破费的。

　　- 网站域名：能够来万网大概GoDaddy购置

　　那里需求一面留意，海内正在万网购置的域名需求真名认证，效劳器需求存案他人才气一般会见，许多后缀的域名如今临时不克不及真名认证以是您便算购了效劳器也不克不及经由过程存案。正在购置域名的时分必然要留意。

　　- 效劳器：阿里云、腾讯云、百度云皆是有效劳器卖

　　海内自力主机比力贵，教死是有免费主机能够用，偶然候购域名也是有收半年效劳器那模样的，可是绝费比力贵。固然也能够思索外洋云效劳器。那个坑也是比力多，需求工夫来教。倡议用上面的办法。

　　- 用Github做静态网页效劳器

　　那里能够来教一下怎样用github，也是简朴进门便可，github注册帐号以后您是能够有一个小我私家自力主页，那个主页是能够间接经由过程互联网会见的，比方：viggoz.github.io那个域名地点前里是您的github用户名，您能够正在购置了域名以后间接经由过程CNAME方法剖析域名到那个地点便可。

　　github的每个项目也皆能够有gh-pages分收，那个分收也是能够间接放静态页里经由过程中网会见。那个项目是能够有多个项目标，也便是道您能够放无数多个静态页里正在那里。可是那些项目标网站其实不能当做一级域名地点去会见，他皆是包罗正在您的viggoz.github.io之下，以是那个页里便不克不及零丁停止域名绑定。

　　可是，借有可是，经由过程github您是能够创立多个构造，一个构造是能够有一个民网，一个民网能够像您的github帐号一样剖析一个域名的。

　　留意：假如那里本人弄没有定，也是倡议间接找伴侣帮手吧。

　　8. 总结那篇文章是写给设想师看的，实在设想师一小我私家来做一个网站也没有是很易，固然打仗的工具比力多，可是设想师经由过程那些工具能够本人掌控一个项目，并且进门的进修本钱其实不是很下。信赖许多设想师是能够很简单做到那些的，后绝会正在出一些系列的文章，感激年夜佬们看到那里。