设计师应该怎么去学习网站开发

资料来源：网络整理时间：2023/3/22 2:28:37 共计：3558 浏览

　　写这篇信息文章的本意是站在一个设计规划师的角度，分析设计规划师在有一个好玩的点子的时候，应该怎样利用所有的资源去完成这个点子在看这篇信息文章之前大家先看做出来的商品产品是什么：这是一个设计规划师的网址导航网。

　　写这篇信息文章的本意是站在一个设计规划师的角度，分析设计规划师在有一个好玩的点子的时候，应该怎样利用所有的资源去完成这个点子，下面我是通过做这个导航网站站点为栗子，来讲述一个商品产品从0到1的这个过程和一些个人建议。

　　1. 计划

　　首先说明一下这个项目我计划是在一周时间做完，实际是差不多7天时间，后面有几天是在完善信息内容数值数据。开始之前我会根据定下来的功能需求自己大概估计一下时间，这里就包括包含商品产品需求文档、UI设计规划、前端建设开发、后台建设开发、测试上线、信息内容完善等。这些对于这个简单的网站站点来说建设开发和完善信息内容用掉了大多数时间。

　　因为这篇信息文章是写给设计规划师看的，可能除了设计规划之外的其他工作并不是我们擅长的，但是我们可以不一定要很专业，我们的目的是做一个商品产品出来，我们只需要知道这个东西怎么做，然后就用最简便的方式方法去实现，有现成的东西就不去重复搭梯子，有开源的代码就不自己重头码。

　　2. 确定功能需求这里要扯一点其他的。在2017年我养成了一个习惯，每天都会抽空看看有哪些互联网新商品产品出现，不管是App还是有趣的网站站点。在这个习惯有了一段时间之后我发现我自己收藏了很多很多的网站站点书签，但是在保存这些书签的时候并没有很好的去按照严格的分类收集，这就导致了后来想起之前看到过的某个网站站点，也记得当时收藏了，但就是死活想不起来收藏到哪个查看浏览器分类当中了。

　　这里也就是差不多我最初要做这个导航网站站点的原因（不算是直接原因）。后来我在网上搜集了很多设计规划师的导航网站站点，发现在这很多的导航网站站点中其实商品产品主题定位都是有很大不同侧重。这里我们不用出具体的设呢么竞品分析，用户使用者研究这些，大概按照自己想要的方向去做就好，我这里很明确的目的就是要做UI设计规划师需要的导航网站站点。后面我收集了大量的导航网站站点，算是简单竞品分析。如下图

　　首先要确定导航网站站点的排布方式，导航栏的位置。根据大多数这类导航网站站点和我自己的感受体验来看，最好的交互应该是左侧固定全局的导航栏方式，因为导航的信息内容条目会非常多，不适合做顶部导航或者可收缩式的导航栏。固定的全局导航可以让用户使用者能够快速选择并且主题定位到自己需要的信息内容位置。

　　除了导航功能之外还有一个就是让用户使用者提交书签的功能。根据自己的需求和竞品初步分析确定了商品产品主要功能之后，这一步就ok了。这一步基本可以不需要输出任何东西，只要知道要做的东西即可。3. 需求文档这一步作为设计规划师，我们来看看怎么去简单快速的输出一些东西。

　　PRD文档的编写我们不用按照非常规范的东西去写，但是要让自己能够梳理清楚商品产品的模版结构即可。我这里用的是Mindnode和Axure这两个软件。

　　我是先在Axure中创建如下图的目录，完整的PRD目录不止是这些信息内容，但是对于这个小项目来说，我们只需要着重关注商品产品介绍、信息模版结构、商品产品模版结构这几个方面即可，我的目的就是清楚的梳理商品产品的逻辑。对于后面设计规划和建设开发来说也是必要的。在这个梳理的过程中也会发现很多功能方面的问题，自己也可以在这一步验证商品产品的可行性。而不是想到一个点子直接开始设计规划UI界面，这是设计规划师做商品产品比较忌讳的。- 商品产品介绍先看商品产品的介绍部分，这里用最简单的一句话描述一下商品产品，这句话要能体现商品产品的核心功能和面向用户使用者。再做一下简单的用户使用者特征等的简单分析，怎么简单怎么来。

　　- 信息模版结构图在写信息模版结构图的时候其实是梳理网站站点逻辑的一个过程，要将商品产品功能的信息进行一一罗列，你会清楚的知道每一个字段的对应关系，也完全能够确定下来商品产品的功能模版结构。在写这个模版结构图的过程一定要不断挖掘到最底层，每一个商品产品细节点都可以在这里体现出来。

　　- 商品产品模版结构图商品产品功能图实际上就是一种模版结构化的商品产品原型。我们在梳理商品产品功能的时候，就会清楚这个功能有哪些表现方式，跳转到什么样的网页页面上，网页页面之间的互同类相关联等。

　　关于模版结构图的写法大家可以根据自己的需要去写，我习惯用思维导图的方式记录，关于怎么做思维导图大家可以去知乎科普，还是那句话，我们的目的就是要让这些图能表达出自己的想法就行。4. 交互UI设计规划这里作为设计规划师来说，就是很擅长的事情了，我这里页面结构网站结构非常简单，为了节省时间并没有去用软件画线框交互稿，但是最基本的线框图还是要在纸上简单绘制，让自己对设计规划的网站站点有个大概的框架。

　　后台管理系统界面设计规划，后台Dashboard界面在设计规划之前就有考虑，因为是管理网站站点的界面，我这里是直接用开源的框架来用，界面样式风格不用过多设计规划，网上有很多售卖的前端web UI kit，这类套件能让设计规划师很快的做出网页页面，代码方面只需要知道前端基本知识就可以，后台对于界面要求不是很高完全可以直接用框架节省时间，也不用专门去找前端研发同学来做。

　　6. 后端建设开发后端建设开发这里对于UI设计规划来说其实是比较难入门的，要学的东西比较多，笔者大学是学的软件建设开发专业的，毕业之后从事了UI设计规划的工作，深知后台建设开发和we服务器建设开发是需要比较多的时间去研究才可以的。所以这部分不建议设计规划师去花时间搞的，可以找朋友做。我这个项目在前期设计规划的时候是有后台系统的，直接用开源的CMS框架建设开发起来其实也是可以很快完成的，但是我后台放弃了，因为这个系统还是比较笨重的，对于导航网站站点这个项目来说可以不用这么复杂。最后放弃了建设开发后台系统，改用了纯静态的网站内容页面。7. 网站站点上线我们网站制作网站设计实现ok之后，怎么让别人顺利浏览访问我们的网站站点，这里可以自己买网站域名，买we服务器然后上线。这里是需要一定的花费的。

　　- 网站访问域名：可以去万网或者GoDaddy购买

　　这里需要一点注意，国内在万网购买的网站域名需要实名认证，we服务器需要备案别人才能正常浏览访问，很多后缀的网站域名现在暂时不能实名认证所以你就算买了we服务器也不能通过备案。在购买网站域名的时候一定要注意。

　　- we服务器：阿里云、腾讯云、baidu百度云都是有we服务器卖

　　国内独立主机比较贵，学生是有免费主机可以用，有时候买网站域名也是有送半年we服务器这样子的，但是续费比较贵。当然也可以考虑国外云we服务器。这个坑也是比较多，需要时间去学。建议用下面的方式方法。

　　- 用Github做静态网页页面we服务器

　　这里可以去学一下怎么用github，也是简单入门即可，github注册帐号之后你是可以有一个个人独立主页，这个主页是可以直接通过互联网浏览访问的，例如：viggoz.github.io这个网站域名地址前面是你的github用户使用者名，你可以在购买了网站域名之后直接通过CNAME方式解析网站域名到这个地址即可。

　　github的每一个项目也都可以有gh-pages分支，这个分支也是可以直接放静态网站页面通过外网浏览访问。这个项目是可以有多个项目的，也就是说你可以放无数多个静态网站页面在这里。但是这些项目的网站站点并不能当成一级网站域名地址来浏览访问，他都是包含在你的viggoz.github.io之下，所以这个网站页面就不能单独进行网站域名绑定。

　　但是，还有但是，通过github你是可以创建多个组织，一个组织是可以有一个官方网站，一个官方网站可以像你的github帐号一样解析一个网站域名的。

　　注意：如果这里自己搞不定，也是建议直接找朋友帮忙吧。

　　8. 总结这篇信息文章是写给设计规划师看的，其实设计规划师一个人去做一个网站站点也不是很难，虽然接触的东西比较多，但是设计规划师通过这些东西可以自己掌控一个项目，而且入门的学习成本并不是很高。相信很多设计规划师是可以很容易做到这些的，后续会在出一些系列的信息文章，感谢大佬们看到这里。以上精彩的信息文章由宣传册设计规划公司企业进行实时分享！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：网站SEO推广必须掌握的要点！ | ·下一条：百度移动搜索建站优化白皮书