![](https://img-blog.csdnimg.cn/direct/f30cb9e4e5e6444aac179db9f72a0dd0.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
新媒体 SVG 交互设计学
文章平均质量分 80
新媒体 SVG 交互设计学
计育韬
著有《硬核运营:技术流新媒体养成》《PREZI完全解读》等
展开
-
配音方面目前可以用AIGC替代吗?( 计育韬老师高校公益巡讲答疑实录2024)
一方面,专业配音人员如电视台主播介入项目时,我们可以在他主观发挥的基础上,要求他在特定字词和气口进行具体的调整,并结合文本内容表现出情绪的强烈变化;*本轮巡讲主题除了涉及 SVG 交互外,还包含了新媒体中 AI 人工智能工作流的详解,为高校师生带来包括与多家央媒的项目合作经验和复旦大学本校的案例分析,因此答疑梳理中也会出现与 AI 相关的知识点,如有任何偏颇之处也欢迎在评论区斧正。即便对语音要求更高的视频如歌曲演唱,也不乏优秀的解决方案,这也是之前在哔哩哔哩爆火「孙燕姿唱一切」事件的技术前提。原创 2024-06-07 17:05:33 · 249 阅读 · 0 评论 -
AI提示词Prompts有没有好公式?( 计育韬老师高校公益巡讲答疑实录2024)
产品层的使命都在于对人类自然语言的极致 AI 认知与反馈,不应逆着平台的发展宗旨使用平台,毕竟终有一天我们可以不再需要所谓「提示词」这样的概念,以最质朴而直观的表达与 AI 沟通。其实优秀的提示词,往往胜在逻辑观,而不是尸块状且晦涩机械的特定关键词权重控制。*本轮巡讲主题除了涉及 SVG 交互外,还包含了新媒体中 AI 人工智能工作流的详解,为高校师生带来包括与多家央媒的项目合作经验和复旦大学本校的案例分析,因此答疑梳理中也会出现与 AI 相关的知识点,如有任何偏颇之处也欢迎在评论区斧正。原创 2024-06-04 15:08:48 · 629 阅读 · 0 评论 -
国内AIGC工具是否存在版权争议?( 计育韬老师高校公益巡讲答疑实录2024)
但在2023年3月2日,原告发现被告刘某通过百家号账号发布了名为《三月的爱情,在桃花里》的文章,文章里使用了自己先前生成的图片作为插图,并且去除了该图片原有的水印。原告在Stable Diffusion输入提示词,设置参数,生成初始图片,又根据初步生成的图片,增加提示词、调整参数,最终选择了自己满意的图片即涉案图片,体现了原告的“智力投入”,图片具备了“智力成果”要件。涉案人工智能模型设计者仅是创作工具的生产者,不是涉案图片的作者,其亦不主张对输出内容的权利。原告是涉案图片的作者,享有涉案图片的著作权。原创 2024-05-30 17:02:27 · 732 阅读 · 0 评论 -
如何用SVG+AI做一个恐怖故事?( 计育韬老师高校公益巡讲答疑实录2024)
当然,恐怖的感觉并非一定要来源于极端恐怖的画面,合理的「氛围感」创作其实也可以实现创作者期望的效果,或许再结合一段 AIGC 的恐怖氛围音乐生成,你的图文作品就能更上一层楼。*本轮巡讲主题除了涉及 SVG 交互外,还包含了新媒体中 AI 人工智能工作流的详解,为高校师生带来包括与多家央媒的项目合作经验和复旦大学本校的案例分析,因此答疑梳理中也会出现与 AI 相关的知识点,如有任何偏颇之处也欢迎在评论区斧正。》中的部分带有血渍的视觉设计,客观条件下看仍然需要专业的画师介入,创作完全匹配的恐怖故事场景。原创 2024-05-23 16:42:20 · 609 阅读 · 1 评论 -
零基础如何入门SVG?( 计育韬老师高校公益巡讲答疑实录2024)
本轮巡讲主题除了涉及 SVG 交互外,还包含了新媒体中 AI 人工智能工作流的详解,为高校师生带来包括与多家央媒的项目合作经验和复旦大学本校的案例分析,因此答疑梳理中也会出现与 AI 相关的知识点,如有任何偏颇之处也欢迎在评论区斧正。计育韬老师认为这样的学习方法在 SVG 交互设计领域也是极具价值的,毕竟他本人作为复旦大学马克思主义哲学研究出身的学者,能完全投入设计与开发领域并有所建树就是一个具体的实例。你的本专业不是绝对的瓶颈,只有学习方法才决定你技术造诣的上限。但此时,要求你计划教授给另一个人。原创 2024-05-20 15:52:27 · 320 阅读 · 1 评论 -
计育韬著《硬核运营》导读:VI-品牌的身份象征|第一章
举个例子,一家 Local 在收到 Global 的材料后,根据 Social Media Guidelines 的要求对将设计内容部署到网站或公众号/微博图文上,由于手册中客观标注了一些对于尺寸、距离的绝对值控制问题,所以在执行前端设计时,执着于如 px 等单位的应用,并因为不同机型表现出极大差异而苦恼不已。这也就是为何,一个优秀的新媒体账号 VI 应用,会在用户扫过屏幕的一瞬间,得出“这一定是某某品牌账号”的结论——VI 所带来的品牌身份象征,是无需诠释,更无须专业化分析的。上海市知识分子联谊会会员。原创 2023-09-01 14:42:10 · 48 阅读 · 1 评论 -
实例|微博SVG实验 - 基于 id 能力的 <use> 复用结构
目前就微信公众号生态端看,由于 id 限制的缘故,套娃型代码层出不穷且层级深不见底,这既给后期调试工作带来诸多不便,又不利于代码本身的加载效率,还容易引起各类在传统 XML 开发中匪夷所思的误触情况。归根结底,是因为在 id 限制条件下,除了透明度动画外各类位移属性的书写都有局限性,尤其若要实现具备长按/松开形式下坐标变化的 animation,可行性均有待商榷。大家好,我是交互设计师计育韬,本文分享一个微博 SVG 交互的经典模型开发,其效果为:在长按屏幕时,三个立方体朝不同方向飞出;原创 2023-07-17 11:46:59 · 92 阅读 · 0 评论 -
计育韬:关注后才能阅读全文?SVG模拟实现!
小杨说,“就是不会才有创造力,太会就被框死了”。目前计育韬老师在带一些高校学生时候,代码野蛮写法并不会被他绝对禁止,除非是「跑不通」才会进行介入修改。创意源自不屈,甚至可能源自无知。我们无法自证我们所知的规则是否是客观规则的极限,那么不妨首先将自己已知的规则推向极限。想问问,有没有那种点文章看一半,然后要关注公众号才能看全文的功能,并未不是基于付费功能。,计育韬老师构建了上述这个基础的模型演示,后续将视情况授权至编辑器方应用。实现的技术方法已经梳理在了上方的交互画面内,而我们不禁会思考的是。原创 2024-04-18 17:15:02 · 122 阅读 · 1 评论 -
五一去哪儿玩?启动SVG大转盘!(计育韬设计)
的瞬移序列切换,类似于普遍的抽签交互设计。同时,计育韬老师为点击指令额外增加了一组接续位移并以 0;1 的方式进行降速时间微分,这也就更加贴近交互设计场景下转盘游戏的特性。的 SVG 交互创意设计方法,因而我已将该 SVG 模型同步授权至 E2 SVG 编辑器的 UGC 专区,感兴趣的同学可以前往平台使用。临近五一,大家都安排好去哪儿出游了吗?计育韬老师近期开发了一组基于 SVG 交互技术实现的轮盘滚动效果,主体采用。这个模型的创作初衷,是受 E2.COOL 邀请讲授一期。欢迎留言评论,万一实现了呢?原创 2024-04-22 16:02:48 · 111 阅读 · 0 评论 -
计育韬:公众号图像素材高清晰度应用指南
不同行业的图像设计方法各不相同,对图像品质的感官要求亦是天差地别,我所提到的所有知识点也是经验的总结和积累,所以也一样建议你多总结自己实操过程中的感悟。只要形成了标准化的操作习惯,对像我们这一类行业资深玩家来说,图像模糊是完全不会存在的问题。也衷心希望你通过本文能了解到全新的新媒体图像处理知识,预祝你在此后的运营工作中一切顺利!原创 2023-07-14 12:39:29 · 116 阅读 · 0 评论 -
计育韬:聊聊最近捐赠复旦档案馆的一件文物
到过本人课堂的同学们,应该都有印象我在「修辞学」方面的一些粗浅的研究工作。而说来惭愧,无论是早些年融合视效演示技术的论述还是当下新媒体范畴的交互设计开发流程解构,我更多侧重以古希腊亚里士多德《修辞学》为溯源基点,力主「修辞学」在丰富感官层面上的积极作用。于是本人开始选择一个归零(Unlearn)学习的新起点,以我们复旦大学老校长陈望道先生的《修辞学发凡》为伊始而求索,并特地竞购了一份 1932 年大江书铺初版的上下册。可惜到手后,发现纸张已经严重脆化,不适于再进行翻阅与批注。原创 2023-11-22 13:52:43 · 31 阅读 · 0 评论 -
计育韬:为什么vw单位比px更适合新媒体设计?
首先,vw 单位是 Viewport Width 的缩写,意为视窗宽度。而所谓的视窗一般指整个浏览器,所有无论你在 HTML 结构中的任何位置引用,它的比例尺都是相对整个浏览器而言的,相比之下百分数就会受制于父结构的尺寸而不能针对整个浏览器尺寸进行更直接的适配。不管在什么终端屏幕条件下, vw 都是把屏幕分为平均的 100 等份,那么对于整个屏幕而言,1vw 和 1% 就是完全相同的——比如我们假定移动端视窗宽度为 350px,那么 1vw 就相当于 3.5px。原创 2023-08-22 12:40:41 · 46 阅读 · 1 评论 -
计育韬:公众号图文内GIF色差衔接问题解决方案
在 GIF 的导出流程中,一般设计师会选择通过 PS,将视频的 MOV 格式或 PS 自身制作形成的动态转化为 GIF 格式。但 256 色本身的色彩局限性,就意味着其显色的丰富性不足,因此计育韬老师认为它并非是解决 GIF 色差问题的上上策。而运营人应当积极寻求的解决方案,在计育韬老师看来就对应包含了两大路径:1) 从色彩数着手,统一动态图与静态图的颜色;2)从设计着手,让切片实现合理的过渡和优化。》中,计育韬老师为广大运营人全面解析了 GIF 图的优化策略,但众所周知:GIF 作为一种图像格式本身,原创 2024-02-20 14:53:35 · 307 阅读 · 0 评论 -
计育韬著《硬核运营》导读:新媒体人本质上是科技工作者|序言
同样,在后续的导读中,计育韬老师也会以序言立论为核心,在必要的篇章中引入更多当下科技工具的应用思路和人工智能产品的辅助设计。同样,我们也期待曾经读过或未曾读过《硬核运营:新媒体技术流养成》的新媒体人,能习得「科技工作者」的精神和修养,在「生产-研究」的循环之中完成自己扎实的科技知识与技能基础。当然,有的读者会感到彷徨甚至悲悯,对未来的个人职业持一种悲观态度,但在多数人无法拒绝的现实下,至少尝试拥抱它足以解决此刻面临的诸多新媒体岗位问题。上海市信息化青年人才协会会员。上海市知识分子联谊会会员。原创 2023-08-31 15:35:55 · 101 阅读 · 2 评论 -
计育韬:照片过多,公众号如何优雅排版设计?
<click> 的双重触发将轨迹描摹与画布展开同时激活,值得一提的是此处还融入了「关怀设计」,即便用户不做点击行为,也会在若干秒后开始强制执行动画,由此确保了企业中的中高层领导以及外籍人士等相对不熟悉 SVG 操作的读者可以顺利浏览内容。在设计层面,车体采用了突破宫格的巧妙半抠图设计,且宫格线包含了不规则倾斜,灵动而大气,让照片紧密却不拥挤,丰富却有重点。在现实中,照片内容本就各不相同,当我们的设计越模拟真实,读者对照片的视觉统一性预期就越低。》中通过如以上的方式,将照片以不同的角度平铺摆放。原创 2024-03-19 17:59:51 · 617 阅读 · 0 评论 -
计育韬:(答疑)为何明明代码正确,SVG动画却有白线/缝隙?
但同样的,当设备本身出现卡顿,尤其出现未达到明确跳帧,但存在卡顿的情况时,就容易发生时隐时现缝隙的问题了。过分高频的对草稿图文的反复预览行为,导致本机微信中对应缓存过多,以及预览草稿被逐步限流访问,实际使得 SVG 动画播放卡顿,进而产生了肉眼可见的缝隙。解决方法上,一方面是修正本身存在的设计、排版错误,另一方面也还是建议利用好「背景图片」或者说「零高图片」思路,垫掉存在的对应缝隙。同时也不必过于纠结这一现象,因为对一个新用户来说,图文都是首次打开,不存在运营人情形下的多次反复预览导致缓存溢出的问题。原创 2023-07-14 12:43:16 · 175 阅读 · 0 评论 -
计育韬:SVG在苹果VisionPro下表现的前瞻测试与分析
全网首个 Vision Pro 终端 SVG 交互图文测试报告原创 2024-04-02 14:35:34 · 1022 阅读 · 1 评论 -
计育韬:在中国新媒体大会,向新华社、腾讯、中传追问行业的未来
初看到这个产品时,计老师并没有完全抓到它的应用价值,但现场的中传人告诉我,他的一个重要意义其实在于,当新闻记者身处有危险性(如战争、自然灾害)要素的场景中时,它可以极大避免新闻人因编辑工作导致威胁个人安全的问题。而我在这里,短暂跳出当下所属的技术圈层,却能看到未来更宏大的科技世界蓝图。特地观察了大会的英文标题,对新媒体的诠释为「NEW MEDIA」而非「SOCIAL MEDIA」——这就意味着,「新媒体」的定义在这场盛会的视角下是非常宽泛的——甚至它是一种内容、媒介、科技、产品的综合体。原创 2023-07-19 11:46:45 · 82 阅读 · 0 评论 -
微博,也支持SVG啦!(附内测申请)
品牌新媒体人必读!原创 2023-07-17 11:37:24 · 134 阅读 · 0 评论 -
计育韬:出书是怎样一种体验?|世界读书日随笔
今天是世界读书日,想和大家换一个站位,从作者视角看看其中好玩的感受与体验。原创 2024-04-24 17:41:12 · 550 阅读 · 0 评论 -
计育韬著《硬核运营》导读:VI-品牌的身份象征|LOGO与触发权重
购买过《硬核运营:新媒体技术流养成》的新媒体人有很多,但能对每个部分充分掌握,并随着行业发展进阶理解的读者难寻。近期综合广大读者们的意见,在图书首版的 5 年后,计育韬老师现开设导读专栏,并结合部分直播活动,带领大家再次打开本书,结合当下新媒体发展共同阅读。原创 2023-09-21 13:56:22 · 65 阅读 · 1 评论 -
计育韬|微博SVG交互开发限制性规则|内参
例如在 V3 新版发布前夕,我曾就微博 SVG 编辑器 30 万字符限制的特性向微博官方提出了开放建议,希望可以提供约 80 万的容量。鉴于微博 SVG 整体技术的白名单尚未确定,我撰写此帖为内参,也汇总了多位资深开发者好友的探讨,相信可以为未来的入局者们提供积极的参考价值。此外,我也协调支持了包括秀米、135 编辑器两方共同参与,以期官方编辑器能快速入局为更普遍的用户提供好模版服务。原创 2023-07-19 11:42:33 · 37 阅读 · 0 评论 -
计育韬著《硬核运营》导读:VI-品牌的身份象征|如何更有创意地实现配色
近期综合广大读者们的意见,在图书首版的 5 年后,计育韬老师现开设导读专栏,并结合部分直播活动,带领大家再次打开本书,结合当下新媒体发展共同阅读。同理亦有如蕉内等品牌,其 LOOK 采用标志性的三维立体叙事手法,已经成为了整个行业内的「视觉锤」;而插画则由当代艺术家赖犬先生操刀,他善于基于几何与物体的创作,把「物体」与「生物」融合在作品中,表达自然与现代工业的和谐共处理念。而其中的配色系统往往有很多差异化的应用思路,但沿用 LOGO 并基于 LOGO 进行配色演化,往往是安全且始终高效的配色方案。原创 2023-12-12 12:12:19 · 33 阅读 · 0 评论 -
计育韬:关于 SVG 交互物体轨迹动画的时间微分策略
参数,虽并不常用但在轨迹型互动中它具备重要意义,它同样基于 0 到 1 的区间,对应可以将贝塞尔曲线进行运行点分割。1" 这样的搭配方式,就能有效实现 SVG 交互物体轨迹动画的时间微分策略。1 表现,位移就会如 0;目前在 SVG 主流开发体系内,时间微分是一项效果极佳的“防”二次触发策略(印象中是 GL 最早应用实践),即通过超长时间的。进行时间多个区间的极大/极小分配,将动画区分成运动态和静止态两段流程,并使得大多数后段时间执行静止态。参数表达的,即便它包含分号(两段位移的贝塞尔曲线),在仅有。原创 2024-04-15 12:03:19 · 214 阅读 · 0 评论 -
计育韬:新媒体图像设计参数质因数分解与屏幕物理像素的适配意义
但是,显示器硬件彼此之间总有差异,比如,iPhone X 的屏幕大小为 5.8 英寸,分辨率为 1125x2436,也就是说,这款手机在宽度方向有 1125 个物理像素,长度方向有 2436 个物理像素。如果你还不能充分理解上述概念,其实可以一定程度上逆向思考:好比任何一台摄影设备都无法捕获现实物理世界的一切那样,真实物理和虚拟数据之间的转化总存在信息的丢失,如同柏拉图《理想国》认为的世界是「理念的世界」一样,这种偏差是客观存在着的。显然,我们即便不考虑硬件的具体像素偏差补偿算法,原创 2023-07-13 13:29:59 · 40 阅读 · 0 评论 -
计育韬:新媒体(公众号)端GIF动态图压缩对抗与优化的核心方法
纵观腾讯系的顶级、二级、三级域名,http://mp.weixin.qq.com(也就是公众号生态域名)是一个业务端典型吃力不讨好的存在————但大多数运营人和品牌方,除了每年 300 块的认证费实际上没有向腾讯上缴过一毛的流量过路费。而流量主生态和朋友圈广告生态作为少数能为腾讯带来盈利的能力,基本只是在补腾讯云自身的窟窿而已。这时候,拿流量本体开刀已经是相对温和但有效的方法,由此动辄若干 M 的 GIF 首当其冲,每年都会被时不时地提升平台端压缩强度。原创 2023-07-13 13:43:24 · 56 阅读 · 0 评论 -
「小红书」如何快速破万粉?这8条设计方法别错过!
文末提供 1v1 小红书账号诊断咨询入口原创 2024-04-26 12:45:42 · 659 阅读 · 1 评论