导图社区 UI设计
七天UI设计训练营,小白入门必备宝典
提示: 本内容由社区用户上传并分享。平台不对内容的真实性、合法性、知识产权归属及是否侵害第三方权利进行事前审核或保证。本内容可能包含受版权保护的图片、字体或其他第三方素材,使用前请自行确认授权范围。
日常使用 AI 检索资料,常常难以辨别信息真伪,AI 生成内容容易出现事实偏差、数据错乱、来源虚构等幻觉问题,很多用户直接复制输出内容用于写作、报告和创作,很容易出现引用错误、论据失效等风险。这份 AI 搜索资料来源可信度判断图,搭建标准化打分评估模型,从来源权威性、信息时效性、证据完整度、表述客观性、资料可引用程度五大维度进行打分,每个维度划分低、中、高三档分值,单项分值 0‑2 分,整套评估满分 10 分。使用者可以对照表格逐项对 AI 输出的资料进行逐项评分,逐项核验信息出处、发布时间、论据支撑、立场倾向,再核算得出综合总分。依据总分自动划分三个使用等级:0‑3 分为待核查,可信度偏低,建议暂停直接使用,务必回溯原始来源核实内容;4‑7 分为谨慎引用,信息存在一定局限,使用时需要标注资料来源,做好补充交叉验证;8‑10 分可用于草稿,即便评分较高,依旧建议多渠道比对再定稿。图表同时附带对应的风险提示与实操建议,包含多源交叉验证、追踪原始出处、留存核查记录、存疑内容宁可不引用等实用准则。适合职场办公、学生写论文、自媒体素材整理、文案创作人群,拿到模板就能直接使用,规范信息核查流程,快速分辨 AI 检索内容的可靠程度,有效规避引用不实资料造成失误,养成严谨的信息甄别习惯,减少因 AI 幻觉带来的内容差错。
还在为孩子暑期安排发愁?这份方案整理 5 套可直接落地的亲子实践活动,适配小学三年级至初中阶段孩子,兼顾成长、陪伴与能力培养。方案一邀请孩子化身家庭小记者,采访长辈撰写家族小传,聆听长辈人生故事,拉近三代人情感,锻炼文字表达与沟通能力;方案二带孩子走进博物馆化身历史侦探,带着疑问探究文物背后的谜题,培养独立思考与史料求证思维;方案三亲子协作利用 AI 共同创作作品,引导孩子理性认识人工智能,锻炼创意构思与问题解决能力;方案四借助策略类游戏开展思维训练,建立规则意识,学会复盘总结,在玩乐中锻炼谋略与思辨能力;方案五开展 21 天兴趣探索计划,耐心发掘孩子真正热爱的事物,尊重孩子天性,找到长期坚持的方向。每套方案均包含适合年龄段、所需工具、参考方向、风险规避、清晰分步执行清单,从前期筹备到成果展示全流程规划。家长无需额外构思,直接按照步骤开展活动,摆脱枯燥刷题与无效电子产品消磨,打造充实、有温度、有成长价值的暑假亲子时光。
本图完整拆解当下全新流量赛道 GEO(生成式引擎优化),是品牌布局 AI 搜索流量必备专业参考资料,逻辑分层清晰,零基础也能看懂。内容开篇明确 GEO 核心定义,纠正大众普遍存在的 8 大认知误区,区分 GEO 与传统 SEO、AI 广告、内容推荐的本质差异;接着拆解 AI 检索 RAG 底层技术原理,从语义映射、检索流程、内容可信化三大维度讲清 GEO 生效逻辑。梳理行业三阶段发展周期:2025-2026 增速发展、2027-2030 趋于成熟、2030 年后全域重塑,预判流量迁徙与商业化走向;完整绘制 GEO 行业上下游生态图谱,罗列国内主流 AI 平台、服务商、品牌客户赛道,直观展示产业链玩家布局。重点落地可执行的 GEO 内容优化工程,从信息纠偏、语义增强、权威构建三大模块输出实操方法,配套完整内容搭建、分发实施流程;搭建标准化效果评估指标体系,区分 AI 可见、技术、业务多层考核维度,配套数据监测手段。最后剖析行业现存合规、技术、商业化三大挑战,给出长期发展趋势预判。整体图文结构化,适合营销投放、品牌运营、互联网从业者直接复用学习,可用于内部培训、行业方案撰写、流量规划参考。
社区模板帮助中心,点此进入>>
日常使用 AI 检索资料,常常难以辨别信息真伪,AI 生成内容容易出现事实偏差、数据错乱、来源虚构等幻觉问题,很多用户直接复制输出内容用于写作、报告和创作,很容易出现引用错误、论据失效等风险。这份 AI 搜索资料来源可信度判断图,搭建标准化打分评估模型,从来源权威性、信息时效性、证据完整度、表述客观性、资料可引用程度五大维度进行打分,每个维度划分低、中、高三档分值,单项分值 0‑2 分,整套评估满分 10 分。使用者可以对照表格逐项对 AI 输出的资料进行逐项评分,逐项核验信息出处、发布时间、论据支撑、立场倾向,再核算得出综合总分。依据总分自动划分三个使用等级:0‑3 分为待核查,可信度偏低,建议暂停直接使用,务必回溯原始来源核实内容;4‑7 分为谨慎引用,信息存在一定局限,使用时需要标注资料来源,做好补充交叉验证;8‑10 分可用于草稿,即便评分较高,依旧建议多渠道比对再定稿。图表同时附带对应的风险提示与实操建议,包含多源交叉验证、追踪原始出处、留存核查记录、存疑内容宁可不引用等实用准则。适合职场办公、学生写论文、自媒体素材整理、文案创作人群,拿到模板就能直接使用,规范信息核查流程,快速分辨 AI 检索内容的可靠程度,有效规避引用不实资料造成失误,养成严谨的信息甄别习惯,减少因 AI 幻觉带来的内容差错。
还在为孩子暑期安排发愁?这份方案整理 5 套可直接落地的亲子实践活动,适配小学三年级至初中阶段孩子,兼顾成长、陪伴与能力培养。方案一邀请孩子化身家庭小记者,采访长辈撰写家族小传,聆听长辈人生故事,拉近三代人情感,锻炼文字表达与沟通能力;方案二带孩子走进博物馆化身历史侦探,带着疑问探究文物背后的谜题,培养独立思考与史料求证思维;方案三亲子协作利用 AI 共同创作作品,引导孩子理性认识人工智能,锻炼创意构思与问题解决能力;方案四借助策略类游戏开展思维训练,建立规则意识,学会复盘总结,在玩乐中锻炼谋略与思辨能力;方案五开展 21 天兴趣探索计划,耐心发掘孩子真正热爱的事物,尊重孩子天性,找到长期坚持的方向。每套方案均包含适合年龄段、所需工具、参考方向、风险规避、清晰分步执行清单,从前期筹备到成果展示全流程规划。家长无需额外构思,直接按照步骤开展活动,摆脱枯燥刷题与无效电子产品消磨,打造充实、有温度、有成长价值的暑假亲子时光。
本图完整拆解当下全新流量赛道 GEO(生成式引擎优化),是品牌布局 AI 搜索流量必备专业参考资料,逻辑分层清晰,零基础也能看懂。内容开篇明确 GEO 核心定义,纠正大众普遍存在的 8 大认知误区,区分 GEO 与传统 SEO、AI 广告、内容推荐的本质差异;接着拆解 AI 检索 RAG 底层技术原理,从语义映射、检索流程、内容可信化三大维度讲清 GEO 生效逻辑。梳理行业三阶段发展周期:2025-2026 增速发展、2027-2030 趋于成熟、2030 年后全域重塑,预判流量迁徙与商业化走向;完整绘制 GEO 行业上下游生态图谱,罗列国内主流 AI 平台、服务商、品牌客户赛道,直观展示产业链玩家布局。重点落地可执行的 GEO 内容优化工程,从信息纠偏、语义增强、权威构建三大模块输出实操方法,配套完整内容搭建、分发实施流程;搭建标准化效果评估指标体系,区分 AI 可见、技术、业务多层考核维度,配套数据监测手段。最后剖析行业现存合规、技术、商业化三大挑战,给出长期发展趋势预判。整体图文结构化,适合营销投放、品牌运营、互联网从业者直接复用学习,可用于内部培训、行业方案撰写、流量规划参考。
UI设计
DAY01:进阶化组件思维
页面组件化-11个模块
1、状态栏(20px)
2、导航栏(48px)
3、工具栏
4、Banner
5、分页器
6、金刚区
7、UGC模块
8、栏目分类
9、悬浮广告
10、推荐位
11、Tab栏
页面包含18个UI元素
1、文字
2、颜色
3、按钮
4、列表
5、导航栏
6、Tab栏
7、选项卡&翻页
8、筛选
9、输入框
10、布局层级
11、填单页
12、Z轴层级
13、toast浮层
14、空白页
15、加载
16、运营图片展示规范
17、banner规范
18、金刚区
UI基础组件
字体
1、多行文本行间距=字体大小1.2-1.5倍,当字体很小的时候,比如18px时,多行文本行间距=字体大小1.5倍;大部分行间距是字体1.2倍
2、字体层次不小于4px(主文案>附属文案字体 4px以上),配合使用颜色、粗细拉开层次;
3、注意字体间呼吸感,呼吸感指行间留白、字间留白;字号、字重、颜色
4、 #333333 主文案颜色; #666666 辅助文案颜色 ;#999999 次要文案颜色
卡片
1、底部间距大于顶部间距,多个卡面拉开层级关系
2、间距留白采用8的倍数原则,减少沟通成本
配图
1、商品主图比例1:1,也就是正方形
2、干净简洁、凸显细节、图片质量高
3、好的配图=产品精修+设计细节
标签
1、左右间距大于上下高度,一般是左右间距:上下高度=2:1,保持呼吸感
2、字体变形/设计,统一字体重心,使字体更统一
3、卖点提炼要直击客户痛点
推荐设计软件:mac系统用sketch、windows系统用ps或adobe xd;设计用1倍图,导出文件时用2倍图
DAY02:界面拆分Feed流
何为Feed流?
Feed字面解释:一次喂给、喂养的;流:是按照某种时间线去呈现内容给用户
Feed流:即持续更新并呈现跟用户内容的信息流
感受:沉浸感和吸引力比较强,让用户不知不觉花费了大量时间在上面
软件类型
社交类:微信、qq
资讯类:今日头条、腾讯新闻
Feed流的设计细节
1、多字段
字体
颜色
1、#333333 适用于标题、主文案;
2、#666666 适用于层级较弱的内容文字;
3、#999999 适用于辅助性、说明性文字
深浅有别,视觉差异
大小
1、40px 适用于标题
2、32px 适用于内容
3、28px 适用于次级内容
4、24px 适用于辅助、说明
好的文字层级差>=4px
小结
标题:40px #333333
内容:32px/28px #333333/#666666
辅助信息:24px #999999
间距
元素的水平间距
1、40px 适用于标题和内容区
不同模块使用较多
2、20px 适用于头像信息与内容
3、10px 适用于文字内容与图片内容
相同模块使用较多
4、30px 适用于内容区和评论区
不同模块使用较多
5、20px、30px用的比较多
元素的纵向间距
1、20px 适用于不同元素之间
2、10px 适用于相同元素之间
2、等级标签
3、配图:背景干净 + 主体突出 + 细节清晰
配图比例:1:1(头像等);9:6(长:宽)
4、思维
1、主思路
希望用户去看:做大、做粗、做成有色板块
不希望用户去看:做小、做细、做浅、做深(入口深)、不透明度低;
合理引导用户视线
2、格式塔设计原则
接近性
彼此靠近
视觉分组
封闭性
连续性
3.黄金螺旋曲线
DAY03:界面拆分实操-会员中心
会员基本具备的特点
1、有独有的尊享感:体现在等级、配色、称号、勋章的视觉形式
2、等级特权带来的优越感:体现在各等级之间权限开放差异性
3、能够给用户带来优惠、福利:体现在积分进度、积分任务、积分换购、积分活动
会员中心页面构成
1、基础信息:一般由昵称、头像、等级、标签、勋章等组成
1、背景渐变色:同色系的渐变配色,可以采用左上右下的配色技巧进行配色
2、弥散阴影:颜色略带主色调偏向;高斯模糊的尽量控制在20左右;形状需要根据情况进行调整
3、内容层级:根据内容层次保持布局的平衡和美观
2、等级特权:会罗列出可享受的特权,部分也会各等级之间有所比较
1、图标绘制:外环90px,内环54px。合理呼吸感,图标内外比约=0.618
2、图标是否容易识别、视觉大小是否一致、线条粗细是否一致、圆角大小是否统一
3、积分任务:一般是列表流的方式呈现任务区
列表流间距留白合理,文字层级对比强:1、上下左右保持32px 2、内部间距保持16px 3、主28px 副24px 文案字号相差4px以上
标签、按钮:背景高度30px、文字22px 注意呼吸感、颜色选择、文案选择
4、积分商城:主要为积分兑换的商品货架
DAY04:图文混排设计强化
列表流图文混排
图片比例规范
1、1:1 构图规整,突出被拍摄体
2、4:3 图片占比比较大,适用广泛,图片重于内容
3、3:2 来自专业相机,强调专业性,内容重于图片
4、竖向图片调换对应长宽即可
左右布局
主体突出
案例实操
1、布局选择:根据需突出重点选择布局
2、文字层级:使用字号、字重、标签表达层级,注意色彩联系
3、人物处理:素材清晰度、神态、色调一致性
4、背景制作:彩色点缀,色彩
Day05:设计强化-瓷片区
瓷片区:移动界面中的广告位
瓷片区设计要点
排版
通用型
对角线
左右:瓷片区距离页面边距30px、文字距离瓷片区边距20px
电商类
上下
文字和图片上下排版:文字在上、图片在下,瓷片成高瘦矩形
旅游类
叠加
大多数产品:常搭配3块瓷片进行设计
配图
鲜艳有活力,充满正能量;能明确表达主题图片增强用户代入感
免费图库
https://unsplash.com
http://www.sozai-page.com/index.html
https://pixabay.com
https://www.sitebuilderreport.com/stock-up
https://www.pexels.com
https://picjumbo.com
https://gratisography.com
破局处理空间感较强
文字+标签
主标题:方体粗黑 32px
副标题:苹方中等 26px 与主标题字体大小对比大于6px
标签:DIN 22px
文字VS背景颜色:对比明显
文字层次:大小对比、粗细对比、颜色对比、行距对比(字体大小、颜色、字重)
背景板
同色系渐变:相同色相、不同饱和度微渐变处理
高饱和度渐变配色参考:ffea6b+ffc600 9bd6ff+009eff ffa87e+ea5959 ce96ff+7a61ff 57a6ff+4f57ff 64f2b4+07cbcb ff8c9f+ff3276 ffb642+ff5e46
Day06:设计强化Banner
来源
线下广告位
线上广告位-Banner
作用
较短时间内抓住用户心理
界面重要位置、吸引用户点击
颜值担当、提升产品调性
设计要点
文字
标题:方正兰亭粗黑 80-120px
标签:苹方中等 28px
标签呼吸感:高50px 圆角25px
字体
纤细类
小米兰亭
方正兰亭纤黑
华文黑体
促销类
造字工坊版黑/劲黑
方正粗谭黑
爱度综艺简体
书法字体
汉仪尚巍手书
李科旭书法
叶根友书法体
女装纤巧类
汉仪瑞意宋
汉仪宋韵朗黑
方正清刻本悦宋
免费商用字体:http://www.fonts.net.cn/commercial-free-32767/fonts-zh-1.html 字体天下
文字效果处理
错层阴影
简单快速操作
较好的视觉效果
单个字3处左右较为合适
配图
根据需求 主题关键字选择合适的素材
抠图技巧
抠图干净,无多余背景
图片清晰,无锯齿杂边
图片组合
近大远小、近实远虚、错落有致
细节美化
曲线明暗对比度
细节光影融入背景色
投影增加立体感
背景
颜色选取
微质感:颜色渐变
同色系或邻近色
点缀
色卡配色 马卡龙风格
规范复用
字体样式统一
布局、配色风格统一
排版、尺寸大小统一
替换文案内容、配色方案和商品素材
Day07:长图设计强化
为什么需要做长图
1、设计成长记录、优秀作品沉淀
2、综合审美能力、视觉统一能力强化
3、平台影响力建立+简历作品集素材库
创建思路
结构:总->分->总
总
封面:整体视觉展示
分
图标、主页面、运营页面拆解&说明:重要模块拆分
总
其他汇总:剩余页面展示
有经验设计师的教诲
1、排版新颖、差异化
2、独立思考、阐述深度
3、重点突出绘制能力强化
长图设计要点
封面颜值:好看、新颖、差异性
封面制作 细节拆解
1、构图:推荐左右,普适度90%
2、配色:2-3色配比
3、标题:要点体现
4、层次:拉开z轴层级
5、氛围:用好元素&质感
绘制能力:图标、重要界面、运营视觉、结尾
统一图标,增强视觉
重要界面有理有据
1、细节放大展示,体现视觉精细度
2、微动效凸显,体现趣味性
3、设计思路展示,阐述设计思路
运营视觉强化
重复就是力量,适合banner
细节元素拆解,banner/运营页通用
统一风格有开头/有结尾 记录成长记录
阐述深度
综合展示