后端开发教程 - Java、Spring Boot 实战 - msg200.com
我的 Web 开发流程（第一部分）：设计
我将讨论我如何开发基于 Web 的应用程序。我将介绍我的工作方式、我使用的软件以及对我有帮助的资源。我还是个大学生。因此，我希望一旦我进入职场并积累了更多经验，我的 Web 开发流程将会有很大的改进。
在一年多的时间里，我构建了几个基于 Web 的应用程序，我的流程经历了几次变化。过去，我直接开始写代码。我经常发现自己盯着屏幕思考几分钟，然后决定下一步怎么做。我也会尝试一些想法，但最终还是不了了之。
缺乏方向的开发可能会变得非常混乱。这可能会导致应用程序构思不周或设计不周。因此，我重新设计了我的工作流程。随着我在 Web 开发方面积累的知识越来越多，我意识到这不仅仅是编码，更是解决问题的过程。
目前，我正在遵循以下步骤：
仔细观察，它与软件开发生命周期 (SDLC)类似。它是项目团队开发软件所遵循的过程。它包含六个步骤：规划、分析、设计、实施、测试和维护。
研究与构思
首先，我会努力了解这个项目、它的目的、客户和受众。这可以通过研究或咨询客户来实现。这样，我就能清楚地知道这个应用应该包含哪些内容。
我还会看看其他人开发的应用。这有助于我了解这类应用的异同。例如，电商网页应用通常都带有购物车功能。
我问自己这些问题：
- 客户是谁？
- 对他/她来说什么是重要的？
- 观众是谁？
- 对他们来说什么是重要的？
我在 DevTips 上看到 Travis Neilson 如何搭建个人网站时萌生了这个想法。观察多位设计师的工作方式让我对 UX 设计产生了兴趣。
无论如何，作为设计师，你的工作是决定内容的放置位置，以确保客户和受众都满意。确定双方都看重什么，可以指导你做出决策。如果没有这一步，你可能会把项目推向错误的方向。
知道哪些内容需要优先处理后，我会列一个清单，并根据优先级进行排序。然后，我会思考它们之间是如何关联的。这样，我就能建立内容的层次结构。比如，先是登录页面，然后是管理面板页面。
最后，我会考虑要使用什么技术栈。我会决定这个项目的框架或库。也许，我会尝试一下纯 HTML、CSS 和原生 JS，为了好玩或者练习，呵呵。
设计
用户体验（UX）设计
用户体验 (UX) 设计是创建为用户提供有意义且相关体验的产品的过程。
-交互设计基金会
现在我已经清楚知道项目应该包含哪些内容，接下来就可以开始设计了。在设计过程中，我会考虑以下几点：
- 布局
- 用户使用应用程序时的流程（我猜是用户流程）
草图
在这一步，我会思考如何组织和呈现内容。我会先画一些草图。根据我写的内容清单，我会为每个项目至少创作三个设计方案。
我会用纸笔勾勒出我的想法，以减少干扰。我会让所有的想法自由流动。我不会在意线条是否笔直，也不会在意看起来是否美观，只关注版式。我会让我的思绪自由驰骋，将我脑海中的想法塑造成我想要的形式。我会决定内容应该以什么样的形式呈现。
当我的想法用完之后，我就会停下来。我会剔除那些我不满意的设计，然后从中挑选出最合适的。
接下来，我会重新绘制一个更简洁的草图。我会整理各个界面并将它们连接起来，展示应用程序的流程。由于不断的重新评估和改进，设计可能会有所变化。
线框
现在，我准备用 Adobe XD 画一些线框图了。有一些专为设计而设计的应用程序，包括：
- Adobe Experience Design - Mac 和 Windows（目前正在使用）
- Sketch - 仅适用于 Mac 用户
- Figma - 基于 Web、Mac、Windows、Linux
- 还有其他的，比如inVision Studio和UX Pin
我会把草图从纸上转移到软件上。画线框图时，我只使用不同深浅的黑色。这迫使我专注于布局，而不是外观或风格。我会通过在屏幕之间使用连线来实现交互。比如，当我点击登录按钮时，它会跳转到仪表盘屏幕。
这样，我就能从团队或客户那里获得早期反馈。通过其他人的意见，我就能发现自己忽略了哪些设计问题。这有助于改进设计，从而专注于解决最终用户遇到的问题。这也能防止我朝着错误的方向构建应用。完成线框图后，我就开始进行用户界面设计。
用户界面（UI）设计
用户界面（UI）设计是在软件或计算机设备中制作界面的过程，重点是外观或风格。
-交互设计基金会
如果我决定使用模板，我会跳过这一步。否则，我会自己设计。
我每周至少会看一次别人的作品来寻找灵感。这能让我保持创意思维，每当我遇到瓶颈时，它都能帮助我找到新的想法。
至于配色方案，我会以标志本身的颜色为基础。选择颜色时，我也会考虑主题。对于自然主题，我会选择绿色。对于快餐主题，我会选择红色和黄色来刺激食欲。如果只是为了好玩，我会尝试根据环境来选择配色方案。
我限制自己使用字体。两三种就够了。我会使用互补的字体。我还会展示它们之间的对比。比如，将大号、粗体、无衬线的标题与常规的衬线段落搭配起来。
虽然我考虑了所有这些，但我优先考虑的是可读性。我会选择赏心悦目的颜色。我会选择不会影响阅读内容的字体。而且，我更喜欢短段落，而不是长段落（如果不是文章的话）。
对于图片，我会选择高分辨率的。绝不会为了适应屏幕而进行拉伸，因为拉伸会导致图像变形。
最后，对于动画和过渡，我还在学习呵呵。
我用于设计制作的软件是：
您还可以使用其他方法，例如：
- Adobe Illustrator
- GIMP
- 我之前提到的软件，例如Figma和Sketch。
对我有帮助的资源有：
- Dribble - 包含众多优秀设计师和创意人士的作品。我用它来寻找灵感。
- 色彩空间——用于创建调色板或渐变色。
- Paletton——用于创建调色板。
- Font Awesome - 您可以使用的图标套件。
- Google Fonts - 您可以使用的各种字体。
- Unsplash——您可以免费使用的精彩照片。
- unDraw——开源插图。
- Lorem Ipsum Generator - 占位符文本生成器。
数据库设计
这是针对需要数据库的应用的。我主要做前端工作。所以，除非别无选择，我很少会用到这个。我经常使用关系型数据库 (RDBMS)。我还没试过 NoSQL。
在数据库设计中，我首先会分析收集到的手动表格或文档。这些文档可以是收据或登记表。然后，我会对数据进行规范化。这有助于防止数据异常。
然后，我创建了一个实体关系图，以帮助我直观地了解它们之间的关系。无论何时编程和维护数据库，这张图都会成为我的指南。
正如您所看到的，我更喜欢先勾勒出我的想法，然后再将其转换为数字形式。
总结
花时间研究、规划和设计会极大地影响应用的质量。像我过去那样直接写代码，会让 Web 开发变得一团糟。
研究和规划可以引导你有目的地开发应用程序。它能帮助你识别重要的内容以及需要解决的问题。设计可以让你的应用程序易于使用且易于理解。它还能让你思考用户体验。
我一直在学习 Web 开发。所以，随着经验的积累，我预计我的开发流程会有所改变。知道每个步骤在 Web 开发中都扮演着特殊的角色，真是太棒了。因为它不仅仅是编程，更是解决问题。这就是为什么我渴望学习更多编程以外的其他领域。
这就是我的 Web 开发流程的第一部分。第二部分将讲解编码。
希望你喜欢这篇文章。感谢你的阅读，祝你编程愉快！😊
鏂囩珷鏉ユ簮锛�https://dev.to/jorenrui/my-web-development-process-part-1-design-7l1