L7工具的迭代思维-deepseek 0基础编程课.pptx

43KODAK300

Deepseek0基础编程课

工具的迭代思维

KODAK300

@

迭代的基本逻辑

批量图生成工具案例

批量图迭代案例

KODAK30043

今日课程：

KODAK300

迭代的基本逻辑

工具完成以后，如果用的觉得不是很顺手，还可以继续迭代。

许

w

-200150

n·150000

e·0000

迭代并不是说重新来过，但需要在一开始规划的时候就留有余地。

KODAK30043

KODAK300

属性区需T区

副性

E帮区

1

2

断

KODAK30043

迭代的基本逻辑

在思考迭代的时候必须思考的几个问题

一开始设计的框架是否支持做迭代

迭代要解决的什么问题，这个问题有没有必要一定要做迭代

解决这个问题的实际成本有多大

KODAK300

迭代的基本逻辑

迭代的核心，是最一开始的框架是否有延展性。

初期的界面结构框架如果承载性较弱，那么后面你功能增加的越多越不好用。

KODAK30043

KODAK300

我想要制作一个广告图生成器，需要实现的功能如下：

#新建画板：点击新建画板后，可以设置画板尺寸、颜色，生成一个画板，每次只能生成1个画板

插入图片：可以插入多个图片，插入后可以用滑杆等比放大缩小图片尺寸，可以拖拽图片的位置，图

片必须在画板内，超出画板区域的图片内容不显示

卜插入文字：可以插入文字，插入后可以编辑文字内容，调整文字的大小、颜色，粗细，可以拖拽文字的位置，文字必须在画板内

#裁切：输入长度和宽度的尺寸点击确认后，自动调整画板的长宽尺寸，裁切后的画板尺寸和裁切设置的尺寸匹配

保存：点击保存后，渲染画板区域内的所有元素，生成图片

请部我生成网而版本工日所有代码封装在一个Html里

基本结构包头包尾

只讲功能不说框架

批量图生成工具案例

如果功能过于复杂，无法一开始进行有效规划，也可以换一种模式，先有功能再做规划

当功能过于复杂的时候，框架和功能就需要做2选1了，这里我们优先保证功能

KODAK30043

KODAK300

基于这个框架后续如果做迭代，那只会越来越臃肿

但不要着急直接调整，接下来一块一块调整。

Bug:目前文字的颜色和大小无法正常工作，请修复这个BUG

BUG:文字生成后，需要可以即时调整字体的大小颜色和粗细

美化：画板改成色块，取消描边，其他功能保持不变

批量图生成工具案例

广告图生成器

新建画板宽度：直度

入图阀]缩族：

插入文字文字：入文学

数切宽度：度

得

虽然是美化问题，但实际解决的是功能问题

高度：国

大小：大小截切高度：属度

KODAK30043

色：

色：

粒

优先解决基本功能问题。

KODAK300

加租

KODAK30043KODAK300

补充需求：

下方画板区域分为三块：

左侧我们称之为图层区，这个区域固定200像素宽度

右侧我们称之为属性区，这个区域固定200像素宽度

中间为画板区域，我们新建的画板在这个区域的绝对居中的位置展示

注意：此调整只针对排版布局，功能上不要做任何调整，上方功能模块暂时不做调整

KODAK30043

批量图生成工具案例

修正：

1、取消主界面新建画布右侧的宽度高度和颜色的设置

2、点击新建画布之后，打开弹窗，在弹窗内设置宽度、高度和颜色。点击确定后生成画布

按照正常的新建逻辑，优化空间

由于后续的功能牵扯到下方三分框架，所以这里先搭建然后逐步的移动优化功能

随入文字文字：人文学大小加粗裁切宽度：度裁切高度：

插入图片缩放：

颜色：

裁切保存

图层区属性区

KODAK300

新