发布时间：2021-9-7 分类： 行业动态
撰写本文的初衷是站在设计师的一边，分析设计师如何在他有一个有趣的想法时使用所有资源来完成这个想法。内容：www.WebStack.cc - 这是一个设计师的网络导航网络。
撰写本文的初衷是站在设计师的一边，分析设计师如何在他有一个有趣的想法时使用所有资源来完成这个想法。下面我正在为栗子做这个导航网站。描述从0到1的过程以及一些个人建议。
1.计划
首先，让我解释一下这个项目。我打算在一周内完成它。实际上，差不多是7天。几天后，我正在完善内容数据。在开始之前，我将根据固定的功能要求估算时间。以下是产品需求文档，UI设计，前端开发，后台开发，在线测试和内容改进。这些大部分时间都在为这个简单的网站开发和改进内容。
因为这篇文章是为设计师写的，也许除了设计之外的其他工作对我们不好，但我们不一定非常专业。我们的目标是制造产品。我们只需要知道这件事。怎么做呢，然后用最简单的方法实现，有现成的东西不会重复的阶梯，开源代码不会重复代码。
2.确定此处的功能要求以提高一点。 2017年，我养成了习惯，花时间看看有哪些新的互联网产品出现，无论是应用还是有趣的网站。在这个习惯已经存在一段时间后，我发现自己已经收集了很多网站书签，但是当我保存这些书签时，我没有按照严格的分类收集它们。这让我想起了我之前看到过的东西。某个网站，我当时还记得那个收藏品，但我记不起我收集的浏览器类别了。
这就是为什么我是第一个做这个导航网站的原因（不是直接原因）。后来，我在互联网上收集了很多设计师导航网站，发现在很多这样的导航网站中，产品定位差异很大。在这里，我们不必进行特定的设计，竞争产品分析，用户研究这些，可能是他们想要的方向，我这里非常明确的目的是做UI设计师需要的导航网站。后来，我收集了大量的导航网站，这是一个简单的竞争分析。如下图所示
首先，确定导航网站的布局，导航栏的位置。根据大多数这些导航网站和我自己的经验，最好的互动应该是左边的固定全球导航栏，因为导航内容项会非常大，不适合顶级导航或可伸缩导航。柱。固定的全球导航允许用户快速选择和定位他们需要的内容位置。
除导航功能外，还有一个允许用户提交书签的功能。根据您自己的需求确定产品的主要功能并对竞争产品进行初步分析后，此步骤即可。这一步基本上不需要输出任何东西，只知道该怎么做。 3.作为设计师的需求文档，让我们看看如何简单快速地输出内容。
我们不必根据非常标准的事情编写PRD文档来编写，但让我们自己能够理清产品的结构。我在这里使用了两个软件Mindnode和Axure。
我首先在Axure中创建了以下目录。完整的PRD目录不仅仅是这个内容，但对于这个小项目，我们只需要关注产品介绍，信息结构，产品结构等。目的是明确理清产品的逻辑。它也是后期设计和开发的必要条件。在这种梳理过程中，还会发现许多功能问题，并且可以在该步骤验证产品的可行性。而不是考虑直接开始设计UI界面的想法，这是设计师制作产品的禁忌。 - 产品介绍首先看一下产品的介绍部分，这里用最简单的句子来描述产品，这句话应该体现产品的核心功能和用户导向。让我们对简单的用户功能等进行简单的分析。如何简单地完成它。
- 信息结构图实际上是在编写信息结构图时梳理网站逻辑的过程。要逐一列出产品功能的信息，您将清楚地了解每个字段之间的对应关系并完全确定产品。功能结构。编写这个结构图的过程必须不断深入挖掘，每个产品细节都可以在这里反映出来。
- 产品结构图产品功能图实际上是结构化产品原型。当我们梳理产品功能时，我们会知道这个功能是什么样的性能，如何跳转到什么样的网页，网页之间的相互联系等等。
每个人都可以根据自己的需要写作。我习惯以思维导图的方式录制。关于如何做思维导图，每个人都可以了解科学或那句话，我们的目的是使这些数字能够表达自己的想法。 4.交互式UI设计在这里，作为一名设计师，它非常擅长。我的网站结构非常简单。为了节省时间，我不使用软件绘制线框交互式草稿，但最基本的线框仍在纸上。只需借鉴它，让自己有一个粗略的网站设计框架。
后台管理系统界面设计，后台Dashboard界面在设计之前就已经考虑过了，因为它是管理网站的界面，我直接使用开源框架，界面风格不需要太多设计，前面有很多 - 在线销售的网页UI工具包。这种工具包可以使设计人员快速制作网页。代码只需要知道前端的基本知识。后端不是很高。界面可以通过使用框架直接节省时间，而且没有必要去前端研发同学。做。
以下是一些背景屏幕的屏幕截图：
5.前端开发和开发网站对于设计人员来说实际上非常困难，但是很容易开始使用一些前端开发知识。建议去Mutu.com查看相关的HTML/CSS课程并快速入门，然后使用开源框架。还可以快速实现所需的网站效果。我正在使用基于Bootstrap的前端Dashboard UI框架XENON。还有另一套框架Bootstrap 4 UI Kit-Wrappixel这个UI工具包可以完成基本上可以在网页中使用的所有控制效果，但界面设计的局限性相对较大。有很多这样的UI工具包，所以你不必每次都使用它们。找到一组您喜欢的下载，您可以轻松实现一两次网站的静态页面开发。
写完页面的前端后，你还可以去一些基本的网站SEO优化内容，买书最简单的方法就可以了，你不需要深入，易上手，懂得优化网站标题，描述，关键词是的，我添加了一些共享标签，如脸书，谷歌+，推特等，当我分享网站时会显示一个小图片。
加入Google Analytics代码以监控网站访问：
这里的前端开发基本上没问题，如果您正在做的网站是静态网页，您可以在此步骤中直接在线发布网站。
6.后端开发后端开发实际上很难开始使用UI设计。有很多东西需要学习。作者是一名软件开发专家。毕业后，他从事UI设计工作，了解背景知识。开发和服务器开发需要更多时间进行研究。所以这部分不建议设计师花时间去做，你可以找朋友去做。我在这个项目的早期设计中有一个后台系统。可以使用开源CMS框架快速完成。但是，我放弃了后台，因为系统仍然相对繁琐。说它可以不复杂。最后放弃了开发后端系统并切换到纯静态网站页面。 7.网站推出后，我们的网站设计成功，如何让别人成功访问我们的网站，在这里你可以自己购买域名，购买服务器然后上网。这是一定的成本。
- 网站域名：您可以去万旺或GoDaddy购买
这里需要注意的是，在国内网络购买的域名需要实名认证，服务器需要正常存档供其他人访问，后缀的多个域名暂时不能进行实名认证，因此即使您购买服务器也无法传递记录。购买域名时一定要注意。
- 服务器：阿里云，腾讯云，百度云全部由服务器销售
国内独立主机比较贵，学生可以免费使用主机，有时域名也会发送到服务器半年，但续费费用较贵。当然，您也可以考虑使用外部云服务器。这个坑也更多，学习需要时间。建议使用以下方法。
- 使用Github作为静态Web服务器
在这里你可以学习如何使用github，它也是一个简单的介绍，你可以在github注册账号后拥有一个个人独立的主页，这个主页可以直接通过互联网访问，例如：viggoz.github.io这个域名地址在您的github用户名前面，您可以在通过CNAME购买域名后直接将域名解析为此地址。
github的每个项目也可以有一个gh-pages分支，也可以通过外部网络直接访问。这个项目可以有多个项目，这意味着你可以在这里放置无数的静态页面。但是，这些项目的网站无法作为第一级域名访问。它们包含在您的viggoz.github.io中，因此此页面不能单独绑定。
但是，您可以通过github创建多个组织，组织可以拥有官方网站，官方网站可以像您的github帐户一样解析域名。
注意：如果您对此不确定，建议您直接向朋友寻求帮助。
8.总结本文是为设计师编写的。事实上，设计师成为一个网站并不困难。虽然有很多事情需要联系，但设计师可以自己控制项目。学习成本不是很高。我相信很多设计师都可以轻松做到这一点，后来会提出一系列文章，谢谢你们看到这一点。
