设计师怎样学习网站开发

褪色

写这篇文章的本意是站在一个设计师的角度，分析设计师在有一个好玩的点子的时候，应该怎样利用所有的资源去完成这个点子。

在看这篇文章之前大家先看做出来的产品是什么：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、google+、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. 总结

这篇文章是写给设计师看的，其实设计师一个人去做一个网站也不是很难，虽然接触的东西比较多，但是设计师通过这些东西可以自己掌控一个项目，而且入门的学习成本并不是很高。相信很多设计师是可以很容易做到这些的，后续会在出一些系列的文章，感谢大佬们看到这里。大家也可以收藏这个网站www.webstack.cc，这里面的网站是我做UI设计以来收集的一些比较好的网站书签，如果大家有什么想法或者问题都可以通过我的个人网站www.viggoz.com联系到我。

原文章链接：http://www.ui.cn/detail/310446.html