15 / 零基础手绘:把想法画到别人看懂 · 小节 1
从线条到基本形体
用简单形体搭起物体,不靠描细节掩盖结构。
大纲要求的教学展开 · 手绘实践 · 本节来源与考点
前置知识:点线面、色彩与信息层级 · 符号回看
从一个问题开始
不会画画,能把回收箱或导览终端的想法说明白吗?
从轻线到功能标注
定比例外框和中轴,不急着描深。
搭出方体,先检查各面关系。
加入能解释功能的投口与检修门。
引线标注功能,留白给文字。
原创教学示意 · 手动播放,可随时暂停;折叠或离开小节时停止。
把这件事讲清楚
手绘首先用于沟通。轻线定位、实线明确轮廓、虚线表示隐藏/辅助、箭头表示动作,各有职责。画直线前先标两端,空中练一次走势,再连续落笔,避免用密集短线反复涂黑。椭圆可先画外接矩形和长短轴,再绕轴练习,左右应近似对称。
复杂物体拆为方体、圆柱、球体等:终端是方体加倾斜屏,杯子是圆柱加把手。先整体比例后局部。线条层级主要靠两三种轻重即可,不需大量颜色。示意不是工程施工图,涉及实际尺寸仍需测量和规范。
怎样做 · 分步推演
五步:①轻线画外包框;②标中轴与主要分割;③搭基本形体;④加能解释功能的细节;⑤加轮廓和标注。每一步都检查比例,错了优先改结构,不继续涂阴影。上方图示可逐步观察;打印模板用于亲手练习。
入门示范 / 1
画回收箱:先画高宽约3:2的方体,顶面留投口,正面分出图示区,下部留检修门;最后用箭头标“投放”“可更换面板”。两处功能细节比十条装饰线更有帮助。
应用示范 / 2
画触屏终端:先用竖方体确定总高,再把屏幕画成上部斜面,最后补底座。若屏幕随意悬空,读者难判断结构,应以支撑线连接而不是只上阴影。
停一下,自己试一试
先独立作答;卡住时看提示,完成后再对照解析。
概念判断
起稿就画最深的外轮廓,方便吗?
需要一点提示
结构可能还要改。
查看过程、答案与错因
不宜。先轻线验证比例,确认后再强调;过早描深会增加修改成本。
案例分析
比较两个箱体草图:一幅细节多但歪斜,一幅简洁但结构稳定。
需要一点提示
沟通核心信息。
查看过程、答案与错因
参考:后者更能说明形体与功能位置;前者可先回到外包框和轴线纠正。自评看是否指出具体结构问题,不凭“画得像不像”笼统判断。
方案与绘图实践
画10条直线、6个椭圆,再组合一个带投口箱体。
需要一点提示
使用练习模板,先结构后细节。
查看过程、答案与错因
自评:端点可控、椭圆轴明确、箱体比例一致、投口与标注对应。常见问题为反复描黑、椭圆尖角、功能细节无位置依据;无需追求艺术素描效果。
带走这一句
先画能解释结构的线,再画细节。
15 / 零基础手绘:把想法画到别人看懂 · 小节 2
比例、透视与构图
用消失点约束同方向边,安排画面主次。
大纲要求的教学展开 · 手绘实践 · 本节来源与考点
从一个问题开始
同一排平行地砖为什么看上去越远越窄?
一点透视:边沿同一方向汇聚
先画视平线、消失点和正面。
正面四角连向同一消失点。
在射线上截取后表面,保留所需轮廓。
原创教学示意 · 手动播放,可随时暂停;折叠或离开小节时停止。
把这件事讲清楚
透视描述空间如何投到平面。视平线对应观察者眼高;同一空间方向的平行线在合适透视中汇向同一消失点。一点透视常用于正对一个面的场景,深度方向汇向一点;两点透视用于转角方体,两组水平边分别汇向视平线两点,竖线在常见两点透视简化中保持竖直。
近大远小是结果,不是随意缩放;同一物体的边须服从同一投影关系。比例先比较整体高宽与局部占比。构图让主物体有足够空间,配合人物、路径与注释说明使用,不用把每处空白填满。
怎样做 · 分步推演
一点透视:画视平线与消失点→画正面矩形→从四角连向消失点→选后表面位置→截出深度→去掉多余辅助线。两点透视:先画最近竖棱→上下端分别连两消失点→选两侧竖棱→补背部方向。消失点太近会夸张变形,可放到画外。
入门示范 / 1
走廊正对尽头,左右墙地面交线向同一消失点汇聚;近处门框较大,远处按同一深度关系缩小。若每条线各指不同点,空间会扭曲。
应用示范 / 2
画回收箱转角:最近竖棱先定高度,两侧边分别指向左右消失点;投口沿所在面透视,不能把它画成完全正视圆洞而与面方向冲突。
停一下,自己试一试
先独立作答;卡住时看提示,完成后再对照解析。
概念判断
所有画面里的平行线都汇向同一个点吗?
需要一点提示
空间方向不同。
查看过程、答案与错因
不对。不同方向对应不同消失点;与画面平行的线可能保持平行。
案例分析
检查草图的顶面和底面边,哪些应指向同一消失点?
需要一点提示
比较现实中同方向的边。
查看过程、答案与错因
参考:同一方体向左延伸的顶、底边共左消失点,向右的共右点;自评看延长线是否一致,不按屏幕上“看着斜”随意分组。
方案与绘图实践
用一点透视画一个导览柜台,标视平线与消失点。
需要一点提示
先正面,后深度。
查看过程、答案与错因
自评:四条深度线指向同点、竖边关系一致、柜台主次清楚、人物尺度有依据。辅助线可以保留淡色,帮助说明方法。
带走这一句
让辅助线约束形体,比例才不会靠猜。
15 / 零基础手绘:把想法画到别人看懂 · 小节 3
人物、动作与使用场景
画出谁在怎样使用方案,避免只有孤立产品。
大纲要求的教学展开 · 手绘实践 · 本节来源与考点
从一个问题开始
同一个屏幕对站立者和坐姿使用者,触达是否一样?
人物把比例与操作带进图里
先画头、躯干与动作方向。
加入终端及触达箭头,观察手与操作面关系。
原创教学示意 · 手动播放,可随时暂停;折叠或离开小节时停止。
把这件事讲清楚
人物示意不要求肖像相似,重点是头、躯干、四肢关系与动作。先用动作线表示姿态,再用头部圆、躯干块和关节线定位。人体比例可先用统一图示比例练习,实际设计须查目标人群尺寸与能力范围,不能把“七头身”之类画法当人体工学标准。
场景由人、物、环境和行动组成。背景只保留影响使用的元素,如道路、台阶、入口、等待区。使用箭头和接触点标清操作,人物位置可帮助判断屏高、视线、空间拥堵与多人协作。
怎样做 · 分步推演
先写一句场景“坐姿用户查询无台阶路线”;画人与终端相对位置;标视线与手的操作方向;补地面与必要障碍;最后写待验证的尺寸,不随意把示意比例当已合规。
入门示范 / 1
适老出行图画站牌、坐椅、用户与路线信息,把“看信息→确认方向→求助”用三种短动作标出;不必画每片树叶。一个扶手和遮雨位置可能比背景细节更能说明方案。
应用示范 / 2
图书借阅场景画两人排队、一人扫描、屏幕反馈。若扫描与取书动作交叉,应调整设备位置,让流程从左到右连续,减少碰撞;这个推演需现场尺寸验证。
停一下,自己试一试
先独立作答;卡住时看提示,完成后再对照解析。
概念判断
画了老人符号就证明适老了吗?
需要一点提示
符号不替代能力需求。
查看过程、答案与错因
不能。还要展示可读、触达、容错与替代渠道,并通过目标用户验证。
案例分析
分析排队场景中两条交叉箭头意味着什么。
需要一点提示
是否可能冲突或只是画法混乱?
查看过程、答案与错因
参考:可能出现进出冲突,应核对真实动线并调整入口出口;也可能仅图面表达不清,需区分后再改。
方案与绘图实践
画站立与坐姿两位用户操作同一终端。
需要一点提示
标视线、手部与屏幕关系。
查看过程、答案与错因
自评:人物动作可辨、空间关系清楚、兼顾触达与阅读、关键尺寸标“需验证”;常见问题是人物只是装饰且不接触产品。
带走这一句
人物是方案的使用证据,不是画面的配饰。
15 / 零基础手绘:把想法画到别人看懂 · 小节 4
界面草图、故事板与流程图
用三种图分别说清页面、经历与逻辑。
大纲要求的教学展开 · 手绘实践 · 本节来源与考点
前置知识:人物、动作与使用场景 · 符号回看
从一个问题开始
一张漂亮首页,能说明用户怎么完成预约吗?
纸面界面:先任务信息,再主操作
第一屏找书:搜索、结果、位置与状态,主操作明确。
确认屏保留书名、取书点和期限;不能只剩“确定”。
失败状态说明原因,提供下一步;保留返回。
原创教学示意 · 手动播放,可随时暂停;折叠或离开小节时停止。
把这件事讲清楚
线框图说明页面结构和信息层级,不必先画真实图片;故事板用连续场景说明动机、行动、反馈和结果;流程图说明条件分支和系统逻辑。三者不能互相替代。矩形可表示步骤,菱形表示判断,箭头标方向与条件,开始结束用一致符号。
界面草图保留标题、核心信息、主操作、反馈、返回或退出。按钮文案用动作词,错误提示说明原因与下一步,空状态解释尚无内容而不是留一片空白。标注放在图外,用编号或引线对应,避免压住图形。
怎样做 · 分步推演
先画“预约前、提交中、成功、失败”四状态;再画用户为什么来、怎样选、如何收到结果的四格故事;最后用流程图检验异常路径是否遗漏。纸面点击测试可由伙伴根据手指点选换纸页。
入门示范 / 1
借阅首页用书名搜索框和结果列表,条目显示位置与可借状态;确认页显示书名、取书点、期限和确认按钮。没有余册时显示预约入口,不能还呈现必然借阅成功。
应用示范 / 2
四格故事:新生找资料→定位书架→到架无书→改为预约并收到通知。它展示现实不确定性和恢复路径,比四张成功页面更能说明服务价值。
停一下,自己试一试
先独立作答;卡住时看提示,完成后再对照解析。
概念判断
流程图中的“失败”节点画完就够了吗?
需要一点提示
失败后用户怎么办?
查看过程、答案与错因
不够。应指向重试、修改输入、人工支持或安全退出,避免死路。
案例分析
分析只有“确定/取消”的弹窗文案。
需要一点提示
不知道确定的后果。
查看过程、答案与错因
参考:改为“取消这次预约/保留预约”,正文说明是否恢复名额;自评看操作后果是否可预期。
方案与绘图实践
画三屏借阅线框+四格故事+一条失败分支。
需要一点提示
先用同一任务贯穿。
查看过程、答案与错因
自评:屏间数据一致、故事有情境、流程无断点、标注不遮挡。教学标准看表达与逻辑,不以绘画精细程度单独评分。
带走这一句
页面讲结构,故事讲经历,流程讲条件。
15 / 零基础手绘:把想法画到别人看懂 · 小节 5
把方案组织成一张清楚的答卷
从题目要求倒推版面,保证证据、方案和评价完整。
大纲要求的教学展开 · 手绘实践 · 本节来源与考点
前置知识:界面草图、故事板与流程图 · 符号回看
从一个问题开始
图画得很大,最后没空间解释问题与创新点,怎样避免?
一张答卷的阅读顺序
先分区:问题、主图、细节和验证。
主图最大,说明贴近对应位置;统一对齐和少量层级。
原创教学示意 · 手动播放,可随时暂停;折叠或离开小节时停止。
把这件事讲清楚
先读题圈出对象、场景、必须输出和限制,再分配版面。可采用顶部题意与核心主张,中部主方案图,旁侧关键细节与流程,底部实施与评价。主视图用于理解全貌,细节图说明难点,短注释解释为什么。创新点应是有作用的机制变化,不是堆“智能、生态、未来”。
时间分配由实际题量决定;本课练习可用约20%审题构思、60%表达、20%检查作为起点,再按个人速度调整,不是官方考试时长或评分规定。避免过早精描一张图而漏答其他要求。
怎样做 · 分步推演
五步成卷:①圈题意并列检查项;②画小缩略布局;③写一句方案价值;④先完成所有模块,再强调关键图;⑤按题意逐项勾查。自检还包括箭头方向、编号、尺寸性质、原创假设标识及评价方法。
入门示范 / 1
题目要求为校园导览设计互联网方案。答卷先写新生找入口的具体障碍,再画路线与界面,说明地标照片、无障碍筛选和人工求助,最后写路线数据更新责任与测试任务;并非只画手机外形。
应用示范 / 2
同一方案放两种版面:A把装饰标题占半页,B以清楚主图和三条功能引线为中心。B更易检索答案;美观可通过对齐、留白和一致线条实现,不必靠大幅装饰。
停一下,自己试一试
先独立作答;卡住时看提示,完成后再对照解析。
概念判断
写满技术名词就能说明创新点吗?
需要一点提示
技术如何改变任务?
查看过程、答案与错因
不能。要说明机制、作用与证据,例如“把入口照片和路线最后20米对应,减少到楼不到门”的具体关系。
案例分析
审查一个只有主图和口号的答案缺什么。
需要一点提示
问题、流程、实现、评价。
查看过程、答案与错因
参考:缺问题依据、关键交互、异常处理、实施条件和验证;按题目要求补,不机械塞满固定模板。
方案与绘图实践
在打印版面上完成一页社区回收方案。
需要一点提示
先缩略后正式,保留说明位置。
查看过程、答案与错因
自评:每项题意均回应、主图可辨、两处机制有说明、流程与评价能执行;常见问题为图文矛盾、标注过密、虚构调研。
带走这一句
先保证答案完整,再让重点更醒目。
章末 / 把知识接起来
综合训练
原创综合训练
为坐姿与站立者共用的导览终端画一页方案:基础形体、透视、人物、两屏界面、失败流程、三条标注。
需要一点提示
先缩略布局,再分五步完善,不把比例草图当施工尺寸。
查看过程、答案与错因
参考以方体支撑斜屏,人物标触达与视线,屏一选目的地、屏二显示路线及入口;信息过期时提供人工帮助。自评结构、视角一致、文字可读、任务闭环、待验证尺寸均明确。可合理采用其他形态,不能只画外观没有使用过程。