后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何准备开发设计（完整指南）
🏁 简介
10个阶段流程
TL;DR
在网站规划和设计阶段做好尽职调查，可以节省大量的开发时间，避免许多麻烦。在本指南中，我将详细介绍我在接触代码之前通常会经历的 10 个阶段。
目录
10个阶段流程
1.创意简报
2.功能列表
3.网站地图
4.线框
5.原型
6.设计系统
7.组件流
8.优化图像
9.开发说明
10. Trello 生产板
🏁 简介
说实话，从零开始创建一个网站或应用程序相当困难。需要考虑很多事情，比如要使用哪些可能的技术栈、在哪里托管、是否需要使用框架等等……
然而，今天我想退一步，重点关注在打开 WebStorm 或 Visual Studio Code 之前发生的事情。
在我们编码之前，我们需要知道...
- 要构建哪些功能
- 为什么它们很重要
- 他们对谁重要
- 如何使我们的愿景与项目决策者保持一致
- 如何轻松地从战略过渡到设计再到开发
在本指南中，我们将介绍如何在 10 个关键阶段实施战略和设计。
看似步骤繁多，但每一步都清晰地阐明了网站的目标和方向。最终，编程开始后应该几乎不会出现任何变化或疑问。
适用对象
-
刚开始从事自由职业并希望帮助客户进行网站设计和内容开发的人。
-
一家小公司/初创公司中负责“我们的网站/应用程序”所有事务的“Web Gal/Guy”。
-
学生希望提高他们的小组项目和作品集水平。
-
想要了解 Jira / Trello / Basecamp / Monday.com / Asana 中许多已提交任务背后的决策的开发人员
重要提示
1 — 这是我的完整流程，但对于非常快速/小型的项目来说，简化它是完全有效的。
2 — 本指南并未概述具体的用户体验策略，例如人物角色模型或用户访谈。如果可以的话，这些策略仍然值得尝试，我会指出它们可以在哪里运用。
3 — 以下阶段基于“瀑布”方法，而不是软件开发中流行的“敏捷”方法。
两者都很棒，但我个人更喜欢客户网站的“瀑布式”设计，因为各个阶段的定义非常明确。
如果您想了解更多信息，请查看此资源。
我的背景
自2020年初以来，我一直在学习和从事前端Web开发工作。最近，我担任iOS健身应用的React Native开发人员。
在此之前，我在一家设计机构担任多学科设计师和团队负责人约 5 年。
从 2018 年到 2020 年，我专注于网页设计、客户管理、人力资源以及管理我们的全球开发团队。
正是在这两年的时间里，我真正体会到了“网页设计的过程”。
10个阶段流程
创意简报
创意简报（也称为 RFP 或项目简报）概述了项目的细节和需要考虑的事项。这通常是了解项目内容的起点。
他们很棒，我总是会反复复习，以便完全理解需要的内容。通常情况下，我会至少打一次电话来跟进，澄清我的理解。
可悲的是，我们并不生活在一个完美的世界
在项目开始时，没有得到这些反馈是很常见的。很多时候，项目一开始就有人说：“我想要一个现代化、独特的网站”或者“市场部希望提升我们的流量”。
对于那些不确定的人来说……这些信息还不够。我不知道如何基于“它应该现代化”来为你建立一个有效的网站。
多问问题完全没问题，而且说实话也确实有必要。当你向客户/老板/老师提出创意简报时，这能体现你从策略和经验的角度思考问题。
需要问的一些关键问题
问题 1 — 你为什么要寻找新网站或进行更新？
不要妄下结论。让对方告诉你他们的“痛点”（他们想要解决的问题）。
问题 2 — 谁会访问这个网站？（目标人群）
你实际上并不是为你的客户/老板建立网站。你建立它是为了满足他们客户的需求。
如果访问者是经验丰富的医生，而访问者是不确定自己在寻找什么的患者，那么医疗网站的构建应该有所不同。
问题 3 — 你如何知道这个网站是否成功？（关键绩效指标）
如果项目目标不明确，你就无法知道自己做得好不好。遗憾的是，“看起来很棒”本身并不是衡量成功的指标。它只是达到目标的一种方式。
另外，信不信由你，并非每个人都将高流量作为优先指标。有时，拥有小规模的目标受众和极高的转化率更为重要。
示例：为现有客户提供帐户门户，使他们可以轻松更新账单信息，从而减少 40% 的技术相关电话。
问题 4：您认为哪些竞争对手的网站效果好？
是的，您也需要做好调查，但他们是各自市场的专家。让他们举例说明他们认为哪些网站做得非常好。竞争对手的网站可以为您提供很多建议，告诉您应该采取哪些措施，或者应该避开哪些网站。
我们的客户可能不知道如何用语言表达“现代网站”的含义。然而，您可能会注意到，他们的竞争对手的网站提供在线订购功能，而他们只有 PDF 菜单。这正是他们想要的，但您正在将其转化为切实可行的解决方案。
问题5：您近期的业务目标是什么？未来2-3年您的业务发展方向是什么？
能够同时考虑当前和未来目标的解决方案，这对您来说意义非凡。
这也有助于你帮助他们确定功能的优先级。也许他们想要一个商店页面，但在接下来的一年里他们没有足够的团队来支持它。
这是一个很好的机会，可以帮你留意这些客户，并节省一些前期的金钱和时间。没错，你的前期收入可能会少一些，但你会获得一个终身满意的客户。
问题 6：网站什么时候上线？
大家都希望自己的网站尽快上线，但有时这意味着 3 个月后的第一季度末，有时意味着下周。搞清楚具体时间很重要。
问题 7 — 我的联系人是谁？谁负责审批各个阶段？
如果你正在与一个新团队或客户群合作，这一点至关重要。这可能意味着，你可能需要熬夜修改，就因为有人说不喜欢某个核心功能。
（为项目提供资金的首席执行官和无法授权最终决定的初级助理的反馈之间存在很大差异。）
问题 8：你们有现成的品牌/开发指南吗？
这将有助于明确哪些设计和开发方案是可以做的，哪些是不允许做的。
功能列表
如果创意简报中没有明确说明，我会使用功能列表来粗略地概述项目范围。我喜欢在 Trello 中以清单的形式进行操作，但在 Word/Google 文档中也可以轻松完成。
需要考虑的事项包括...
- 大概有多少页
- 调出博客、账户门户或支付功能等重要部分
- 如果有动画，它们大概在哪里
- 网站是否需要搜索功能
这不需要非常具体，甚至不需要最终确定。以后会有专门的阶段来处理这个问题。这只是一种在纸面上大致了解计划内容的方法。
根据项目的不同，这可能发生在不同的阶段......
-
如果这是一个客户项目，我会将其作为提案的一部分，以帮助协调项目规模。
-
如果是学校或工作作业，这是我理解如何构建的第一步。这也让我更容易提问。
网站地图
站点地图（在设计阶段）是网站上所有页面及其相互连接方式的视觉呈现。它对于制定信息架构 (IA) 以及用户如何浏览网站至关重要。
站点地图不应过于复杂。只需清晰地展现页面名称、页面主要部分以及它们之间的连接方式即可。
我非常喜欢这个阶段，因为它让我能够快速地与我的团队或客户协调网站结构。对于一个看起来如此简单的网站来说，它对于优化用户体验至关重要。
如果你正在深入研究用户体验，那么应该在此阶段之前就开始着手。从访谈、人物角色和 A/B 测试中收集的洞察可以帮助你规划站点地图并制定后续阶段。
最后，在这个阶段以及线框图和原型阶段，我推荐使用 Figma。你可以在下面的研讨会上了解更多关于这个很棒的免费工具的信息。
线框
这是第一个正式的“设计”阶段，我们比站点地图更深入一些。
现在我们对网站有了总体的了解，我们可以使用线框来勾勒出各个部分和功能在页面上的位置。
上面的关键词是“草图”。线框图并非像素完美，也不是最终成品。它们只是一种快速测试和呈现与内容和功能相关想法的方法。
例子
假设您需要在页面上显示 6 张图片。您可以通过几种方式进行布局。
-
您可以将它们显示在网格中，并在灯箱中打开图像。
-
另一个选项是全宽旋转木马，每隔几秒循环播放一次图像。
线框可让您快速布局两个选项，而无需创建需要数小时才能完成的像素完美设计。
我对线框图的考虑
-
线框图并非最终设计！为了更好地传达这一点，我总是用黑白两色来制作，并使用通用的字体和图像形状。
-
审查线框的客户和团队成员应该只关注内容、功能和粗略布局。
-
因为线框是校对内容的好方法，所以我总是尝试使用“接近最终版本”的副本，而不是 lorem ipsum 文本。
-
虽然它们可以是纸上的草图，但我喜欢在 Figma 中构建简洁干净的布局。如果某个部分确实需要保留，那么在实际设计时就不必从头开始。
原型
在这里，我们才能真正落实所有的研究和规划。即使您不是设计师也没关系。以下部分也可以作为寻找设计合作伙伴的参考。
原型设计（也称为高保真模型）是在我们开始编码之前我将展示每个主要屏幕的外观的地方。
这是我们制定最终设计和用户体验解决方案的地方。我们会在这里应用品牌颜色、图形和最终布局等元素。
根据设计的复杂程度和项目需求，我还会创建专门针对移动设备的屏幕。这使得采用“移动优先”方法的编码变得容易得多。
我还发现将所有页面定位在与站点地图或用户流相同的结构中很有帮助。
像 Figma 这样的程序可以很容易地做到这一点，并在它们之间画出它们的连接线。
它提供了另一个机会来验证用户针对特定操作所采取的路径是否合理。
设计系统
原型设计不仅要看起来美观，还要使设计和开发过程更容易。
创建一个设计系统非常重要，它可以容纳任何主要和/或可重复的样式、组件和资产。
例如，设计系统通常会包含所有使用的排版样式和全彩调色板。导航、页脚或按钮等组件也会存在其中。
这样，如果有编辑，您只需在设计系统中进行一次编辑。如果设置正确，像 Figma 这样的程序会自动更新整个设计中的元素或样式。
当你开始写代码的时候，它也超级有用。我使用样式指南作为我的CSS蓝图，这使得设置颜色变量和排版元素变得容易得多。
设计系统可以有各种规模。你可以从小规模开始，然后随着项目的复杂程度逐渐扩展。以下是我在设计系统中常用的部分列表。（并非所有部分都适用。）
移动和桌面网格
例如，桌面使用 12 列网格，移动使用 2 列或 4 列网格。
颜色
这包括任何品牌颜色、十六进制代码、变量名称及其色调/阴影。
排版
这包括 h1-h6 标题、正文 lg/md/sm 和电子邮件版本，因为营销电子邮件中只允许使用默认字体。
按钮（网站和电子邮件）
我尝试在网站上包含具有默认、悬停、活动和禁用状态的任何按钮。
UI 组件
：用于非导航的可重复元素，例如 logo、卡片元素、表单字段、横幅广告等。
导航
我发现导航组件通常有很多状态，有时在大型网站上还会有多种类型。所以它们会有一个单独的版块。
图标：
任何 UI 特有的图标，例如箭头、V 形、菜单、轮廓等。
效果
这包含框阴影、插入框阴影、图层模糊和背景模糊的样式。
组件流
最近我开始为我的 React 项目构建“组件流”图。这是一种可视化规划和跟踪 React 组件结构的方法。
顶层显示标准“组件”文件夹内的主要文件夹。每个文件夹都用颜色编码。
下方的树状图显示了组件在应用中的结构。组件的颜色也与它们所在的文件夹颜色相匹配。
这非常有用，因为并非所有一起出现的组件都位于同一个文件夹中。例如，某个<ButtonPrimary />组件出现在几个不同的部分，但它的文件位于“UI”文件夹中。
这使我能够更轻松地构建我的应用程序，然后在开发过程中找到问题。
优化图像
许多网站页面性能的一个大问题是使用大图片。如果一个首页上有 10 张图片，每张图片 3mb，那么该页面就需要下载 30mb 的文件。这比一些完整的网站还要大！
理想情况下，大多数图片应该小于 200kb，如果是大型 Hero 图片，则至少应小于 650kb。当然也有例外，但即使这种方法对 80% 的图片有效，也能大幅提升性能！
使用 Photoshop 或 Adobe Lightroom，我确保图像分辨率为 72dpi，并将宽度/高度降低到所需尺寸的两倍。
-
显示器无法处理更高的分辨率，但许多相机的拍摄分辨率为 144dpi，甚至达到 300dpi 的全打印质量。这无疑会给文件增加负担。
-
如果我需要将图像用于视网膜显示，那么 2x 尺寸可以有所帮助。
这是在我将其放入 Figma 之前完成的，这样可以使其运行得更快，并且生产已经开始使用优化的文件。
上传到网站之前，我通常会先在tinypng.com上查看图片。这个网站对图片的压缩效果非常出色，几乎没有文件损坏或失真。正如上图所示，效果简直是天壤之别。
开发说明
一旦设计完成并且图像等资产准备就绪，我还想在设计中添加开发人员注释。
Figma 让这一切变得非常简单，你可以在设计的任何位置放置评论钉，甚至可以在其中标记其他人。
它是添加动画、API 参考和同事之间协调提醒的好地方。
Trello 生产板
从技术上讲，这一步可以从一开始就开始。我发现在 Trello 板上跟踪项目从设计到开发的整个过程非常有价值。
我常用的工作流程是 Kataban 方法，其中任务在 3 个列表中进行跟踪——“待办”、“正在进行”和“已完成”。
很多时候我会将其扩展以按顺序列出以下列表......
1. 杂项/资源： API 密钥、登录、品牌指南以及在整个项目中有用的东西。
2. 未来功能：如果我们有时间/预算，这包含任何可以添加的功能，但对于网站的启动并不重要。
3. 待办事项：对网站上线至关重要的待办事项。通常会标记负责该事项的人员和截止日期。
4. 正在执行：正在积极进行的任务。
5. 审核：准备由团队成员或客户审核的项目。如果有编辑，这些项目可能会返回到“待办事项”或“正在进行”状态。
6. 已完成：这些项目已全部完成。跟踪项目进度并向客户展示已完成的部分非常有用。
概括
希望以上内容对您有所帮助！内容可能看起来很多，但您可能已经注意到，每个阶段都是建立在下一个阶段的基础之上的。
我坚信，先花更多时间把事情做好，然后再因为沟通不畅而重做，这样会更快。
有没有哪些事情应该列入这个清单，但却没有列入？我很想知道你是如何确保项目、预期或沟通顺利进行的！
祝你（策略、设计）编程愉快！🤓
使用Figma设计的缩略图
文章来源：https://dev.to/gedalyakrycer/how-i-prepare-designs-for-development-complete-guide-2kjc