其中,打动我的一个设计细节:中间那块区域,上面是价格曲线,下面是一些列表,中间有一根灰色分隔线。为了让人知道这根分隔线可以上下拖拽,从而调整大小,特意给它加上了上下箭头。
]]>我是一名正在学习设计与技术课程的学生,目前正在做一个关于桌面收纳的课程项目。
这是我的产品概念图,一个桌面收纳模块(功能可能不同,看你们的问卷答案了~)
为了让这个设计更贴合大家的真实需求,我制作了一份问卷,预计占用您 3-5 分钟时间 。您的每一个建议都对我至关重要!
[参与福利] 为表感谢,我准备了一些小礼物:
幸运奖 (1 位) :抽取一位填写问卷的朋友,送上 10 元 现金红包。(学生党经费不足请谅解~) 体验奖 (5 位) :抽取五位朋友,送出第一批 产品 Demo (邮费需自理哈)。 [如何参与抽奖] 完成问卷后,在评论区截图完成页面,并说一句有关的建议~谢谢
抽奖传送门:
]]>给志玲姐姐加了一条黄金胡子, 😂😂😂
]]>📢 @dassh @hulebaji 来查收你们要的教程啦~
其实这整套 VI ,包括 logo 、插画、favicon 都是我用lovart和星流 agent(星流 agent 其实就是 lovart 的中国版)制作的,我甚至还用它制作了四格漫画!
而且目前为止我还没有充过一分钱,完全靠初始积分+每日赠送的积分就制作出了这些素材!
1 、 让 lovart 给你创建一个 logo ,描述你想要的感觉 如果有一些不满意的地方,直接让 AI 帮忙修改即可(我就让 AI 去掉了代表科技感的线条)
2 、 选择了满意的 logo 后,让 lovart 继续创建包括网站首页、字体、logo 、插画等全套 VI 这类插画往往普适性特别好,应用在很多地方都不会违和!
3 、 当需要生成特定的网页插画时,可以将满意的 IP 图“send to chat”,然后让 AI 生成网站上你需要的插画。
提示词参考:“请使用附图中的形象和画风来制作网页插画,希望是一个森林的场景。。。”
我的森林动物人格心理测试用到的两幅插画就是通过这个方法生成的,效果还不错吧哈哈😄
注意:
1 、你还可以保持 IP 形象不变,将其变成 3D 版本!
2 、可以通过即梦让插画动起来,同样也是免费的哦
https://github.com/user-attachments/assets/73ab1805-68b0-4ec3-8280-eb5e10401909
3 、结合 deepseek 还可以生成下面这样的四格漫画, 用于日常分享小红书笔记等!
大家也可以体验一下我做的三个测试:
有什么问题可以在下面评论,大家的评论我都会尽可能回复的
]]>工作中公司生产的设备,要写说明书:有个同事用它画设备的面板,面板上显示屏、旋钮、开关、等等。我看了,效果真好。这个应该算是创新用途了,软件原本不是搞这个的。
]]>众所周知 Figma 中是不能给透明背景的图片直接按照轮廓添加矢量描边的。所以做了这么一个插件。
→ 插件地址
其实算是重写了,第一版的算法是自己和 Claude 3.5 琢磨的,速度有点慢,输入参数也很复杂,详见这篇文章。
时隔五个月,Figma Config 一众新功能依然没有取代这个插件,所以配合 Gemini 2.5 Pro ,以及 @liajoy 的算法思路重写了插件。描边速度生成得更快,用起来更不复杂,顺便换了全新的界面。
liajoy 佬的算法最终是在 canvas 生成的描边,效果已经很不错。Figma 插件这边的难点依然在于,如何连接生成的锚点,在一些比较复杂的多图像透明 png (且各图像距离较近),算法就会暴露出很多不完善的地方(比如到处飞线),但是感觉再研究下去有点触发边际效应——花费大量时间不如手动改下锚点。
为啥要这么设计,不会是借鉴的微信吧😅
有没有懂产品的解答下
]]>网站的内容就是通过"碎片输入+智能扩展"的方式,将随手截取的图片/文字片段自动转化为一个艺术风格的作品,通过 AI 结合传统艺术、现代艺术等不同风格生成对应的图片。内置了一些逻辑,不需要很复杂的提示词,也没有任何的学习门槛,简简单单就能生成一个艺术风格的图片。
网站自取:
为什么做这个?
免费能不能一致持续?
不确定,虽然没什么成本,不过生成速度有点慢;加速的方式也有,但是成本就高了,暂时没处理;免费的生成的质量也还行,将就用着
]]>最后那张纸是我想后面首页改成的样子,因为后期想多增加一切功能,但是目前首页只有记录和 tips 多位置,所以后期想把首页这块空间利用起来,最下面的卡片放一些未来增加的功能,中间左侧用一个环状图展示已经记录的正面和负面情绪的占比,右侧放目前的两个正面和负面记录按钮,最上面还是放置 AI 根据天气情况和上次心情生成的提示语,这个功能其实我想砍掉,感觉用户很少会看。
]]>这是一个非商业项目,是设计师学习 Next.js 和 Sanity 的一个实例。在很大程度上也受制于技术,因为我的技术有限,只能做自己能实现的设计,好在不必受制于人,也因此做得很开心。这样说并不是否定人类文明进程中许多伟大的成果不是分工合作所创造的,我当然相信商业本身就是互助合作和正和游戏,不过是我们还在榨取式社会丛林中艰难的前行,想要坚守「平凡但不平庸」实际上是极高的要求。
我的初衷是做一个小而美的作品集网站,本项目以兄弟公司青苔设计为原型,在设计中,我先为网站构思了文案,青苔设计这个名字是什么意思?如果人们无法解读就会缺少共情。我想到杉本博司的书《直到长出青苔》便去挖掘其中的意义,于是有了「真正有生命力的事物,需要时间去沉淀、去生长、去被理解」、「青苔不语,生机盎然」、「沉淀、静谧、坚韧、永恒」这些标语,与该公司做品牌设计相契合。有了文案,我们才有了排版的元素,甚至有了做设计的感觉,它不仅仅是信息本身,也是一种视觉元素,更有可能成为点睛之笔。就像一首歌,如果光是好听,那也只是好听而已,如果它的歌词触动了你,它就超越了好听。文案是自然语言,设计是视觉语言,普通人更能够理解自然语言,不一定理解视觉语言,它们相互相成,文案也为普通人去理解设计做了铺垫。
这是一种极简主义的设计,但不同于以富媒体为主视觉的网页设计,比如苹果的官网;也不同于以文字为主视觉的网页设计,比如 Typewolf 收录的网站。青苔的网页设计倾向于以作品本身为视觉主语,结合网页特性的轻体验,塑造一个简约而不简单的作品集网站。就像无印良品的风格,我称它为——没有设计的设计——自然、本味。我喜欢《不服从的艺术》里面译者的一句介绍:「虽然身为译者,但最大的梦想却是让读者感觉不到译者的存在。期待自己的译文能如原文般自然流畅、饶富趣味。」
第一眼是一条鲸鱼,再细看一点会看到一条鲨鱼.
鲸鱼和鲨鱼看你的眼神不一样.
]]>一开始想着用第一个字节比特位标志表示是否有请求 ID 、请求路径等信息,第二个字节表示为扩展标志,来表示是否宽请求 ID 、长请求路径等。如在有或无扩展标志时,请求 ID 为 u32 或 u16 ,请求路径长度为 u16 或 u8 ,这样可以较为高效与灵活的编码请求头。对于请求的主体数据,它的长度不好确定,u8/u16/u32 都有可能,再用标志来表示的话需三个 bit ,且不是很灵活优雅,于是我设计了个 7 比特弹性长度数字编码来表示数据长度。
0 1 2 3 4 5 6 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- |0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- |1|B|B|B|B|B|B|B|0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- |1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- |1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- |1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- |1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|- |1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|0|S|B|B|B|B|B|B |1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B |1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B|1|B|B|B|B|B|B|B +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- 7 8 9 10 11 12 13 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |1|B|B|B|B|B|B|B|S|B|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ 0:尾字节,1:非尾字节 S:符号位,B:二进制数字位
上面为 7 比特数字编码图。字节第 7 位为标志位,为1
时表示还有下个字节,否则为尾字节。若为第九个字节,则没有标志位,这样最大可以用最多 9 个字节表示7*8+8
64 位数字,用最小一个字节表示 7 位数字,较为灵活且节省空间。字节序采用小端序,因为最高位字节可能为 8 比特数字位,而其他的字节皆为 7 比特,大端序需分情况来偏移运算,比较麻烦,而小端序则统一偏移 7 位即可,比较方便高效。
当写完这个 7 比特数字编解码算法后,发现实际应用还是有些不方便。首先用标志来表示宽窄数字不是很灵活,比如不支持 u64 的请求 ID 。其次解码数字时不太方便,无法一次性知道数字的字节长度,需要最多 9 次循环读取一个数字全部字节。针对第一个问题,将全部数字换成弹性数字即可,这样只需一个比特标记是否有,而无需标记长短。针对第二个问题,则需重新设计一个前缀式数字编码。
前缀式编码,即以第一个字节作为数字头部,存储数字字节长度信息,读取第一个字节后,就能将剩下字节一次性取出来而无需循环读取。这个前缀又不能只存长度信息,不然白白浪费了一个字节,可以在其高比特位存长度信息,低位存数字本体,于是基于这些需求设计了下图编码。
0 1 2 3 4 5 6 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- |0|S|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- [int7] |1|0|S|B|B|B|B|B|B|B|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- [int14] |1|1|0|S|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- [int21] |1|1|1|0|S|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|- [int28] |1|1|1|1|0|S|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|- [int35] |1|1|1|1|1|0|S|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|-|- [int42] |1|1|1|1|1|1|0|S|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B [int64] |1|1|1|1|1|1|1|0|S| 保留,后续可表示 128 位数字, 最长 1+8+8=17 字节. S: 符号位 |1|1|1|1|1|1|1|1| 为其他情况保留. B: 二进制数字位 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- 7 8 9 10 11 12 13 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| |B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|B|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-| +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
上图为前缀式弹性数字(后续将省略“前缀式”而直接简称为“弹性数字”)编码图。有一个固定的头部,其中第一个0
为长度与数字本体分隔符,高位的1
的个数表示躯体数字字节数,低位为符号与数字的高位部分。当头部高位以0
开头时,剩余部分为 7 位整数,无符号最大 127 ,没有躯体部分。由于头部需一个分隔符占位,所以最大只能表示 56 位数字,为了支持 64 位数字,当头部高位的1
的个数大于 5 时,直接视为 64 位数字,加头部共 9 个字节表示。由于 6 字节起的整数皆为万亿级别,很少用到,可以忽略其浪费的字节。头部剩余的可用标志位,为以后可能需要支持的 128 位数字作保留。
细心的朋友可能已经发现,这不是很像 UTF-8 吗?是的,这个方案是以 UTF-8 编码为灵感设计出来的,只是做了一些调整以支持 64 位数字的编码。UTF-8 需要表示的范围较小,且可能为了表现出较强的特征,躯体部分都以
10
开头,浪费了很多空间。而弹性数字编码,除了头部需占用比特位来表示字节长度外,躯体部分 8 比特全部表示数字,没有浪费。
实现弹性数字编码后,就可以较优雅的实现 DCE 二进制可路由协议的编码了。总体分为三个部分:一个标志头,用以表示有哪些属性;一个数字部分,用以标注属性值长度或作为数字值;最后为按序追加的属性值部分。
0 1 . . . 0 1 2 3 4 5 6 7 0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . +-+-+-+-+-+-+-+-+- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |I|P|S|C|M|L|N|R| LEN of| LEN of| LEN of| LEN of| ID | CODE |NumPath| same | |D|A|I|O|S|O|P|S| Path | Sid | Msg | Body |FlexNum|FlexNum|FlexNum| order | |E|T|D|D|G|A|A|V|FlexNum|FlexNum|FlexNum|FlexNum| HEAD | HEAD | HEAD |FlexNum| |N|H| |E| |D|T| | HEAD | HEAD | HEAD | HEAD | | | | BODY | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ - - - - - - - - - - - - - - - - - - - - - - - | | | | | | | Path | Sid | Msg | Body Data ... | | | | | | +-+-------------+-+-------------+-+-------------+-------------------------------+
上图为 DCE 弹性可路由协议包编码图。图中将弹性数字头与躯体分别堆在一起,是为了取到标志开启数量后,能一次性取出所有数字头部,继而一次性取出完整数字,提升编解码效率。在表示长度的数字中,0 是无意义的,标志未开启即为 0 长度,无需占用一个字节来表示。所以专门提供了长度编解码方法,将需编码与解码的长度减或加一,可以多表示一个有效长度,这在标注如十六进制 sha512 时非常有用,可以仅用 1 个字节( 7 比特头)来表示 128 的长度,节省了一个字节。
节省这一两个字节有用吗?通过 DCE 可路由协议,仅需 2 到 3 个字节,就能发起一个有效的类 GET 请求,而 HTTP 动辄需要成百上千字节,这在一些网络珍贵的场景是不可接受的,节省的每个字节都尤为珍贵。
要二进制省流量可以用 protobuf ,要灵活可以用 json ,为什么还要自己设计一个协议呢。这两者确实不错,DCE 也实现了基于它们的可路由协议。硬要说起来,protobuf 不够灵活,它的数字需固定长度,会浪费空间。除此之外有个最重要的原因,在 tcp 连接下,无法方便的从数据流中提取一个完整的 pb 或 json 包,需要借助分隔符或长度标注。分隔符无法同时做到高效与可靠,最靠谱的还是长度标注,而这个长度标注相当于需在外层再套一层协议,所以也需弹性数字来实现这层协议。
最后感谢你读到这里,上述的技术代码,可至DCE-GO查看。DCE-GO 初发布,欢迎体验。可能有 BUG 或可改进的地方,欢迎提出建议,欢迎协同开发。持续维护的 DCE 还有RUST 版本,该版本较旧,近期大概不会更新,但最终会同步,欢迎关注。
]]>有没有本地安装的软件可以实现这些简单的功能?最好能免费用 AI 实现一些简单的 P 图抠图操作。谢谢大家的推荐~
]]>最近在 github 上创建了一个d2learn 社区, 于是就想着怎么也得搞个 Logo 吧, 于是结合社区背景设计了如下 Logo
这个 logo 初看, 可能看不出什么。但是如果给一个提示: 二进制。那么我相信很多有一些计算机背景的同学, 肯定就能猜到这个 logo 的设计思路了 —— 二进制 + ASCII 码。下面就来详细的介绍一下 D2Learn Logo 和其动画的创作过程
由于 d2learn 是一个关于技术知识分享、学习、交流的开源社区。所以 logo 设计的时候希望体现一定的技术背景并且一定程度的能表达 d2learn, 这样就有了大体框架
这样我们就能很容易把 d2learn 或其中的几个字母通过 ASCII 转成对应的二进制
d2learn 01100100 00110010 01101100 01100101 01100001 01110010 01101110
或许可以换个排序方式?
01100100 // d 00110010 // 2 01101100 // l 01100101 // e 01100001 // a 01110010 // r 01101110 // n
似乎有点"图案"的感觉了
起初也差点就想把 0 和 1 的颜色调一下就当做社区 logo 的, 但想了想是不是有点太直白了点?
同时也想到了 0 和 1 与颜色中黑与白似乎是对应的, 这样就可以把 0 用黑色表示, 1 用白色表示就能自然的形成一个图案了
这样看起来就感觉有点哪个意思了, 但还是单调了点。或许可以把白色换成天蓝色(青-CYAN)似乎更有科技感一点?
到这 基本这里 图案也有了、含义也有了、但似乎还是缺少了一点“艺术性”?
由于一个字节由 8 个 bit 位组成, 但是 ACSII 码的最高位都是 0, 并且 d2learn 也是 7 个字母。这就导致 Logo 的实际大小是 7x7 。在这种情况下如果要突出 8 这个数字或者显式一点 8bit 的含义就是把 7x7 扩展到 8x8 。
为了不破坏图案, 或许可以给已经形成的图案加一个底座, 并且底座必须要 8bit 都要点亮才符合我们的期望, 这里的难点就变成了底座的颜色选择了
如果采用一种颜色会不会感觉太单调? 如果采用多色那又选择哪些颜色呢?
能不能把“所有颜色”都融入这个 logo 里呢? 这个时联想到先前的白色、色散、光谱色(彩虹色)。这样就恰到好处 [红、橙、黄、绿、青、蓝、紫] + 白 正好是 8 种颜色。这样我们 logo 底盘的 8 个 bit 位就可以用这些颜色点亮了, 也就形成了最开始的 logo 图案
并且黑色也作为背景色没有缺席
使用 8x8 的像素面板, 然后从上到下依次控制像素的显示
最后形成的效果就有点 Terminal 控制终端闪烁的输入提示符一样, 一个一个的输入像素的感觉...
#include <vector> #include "hanim.h" using namespace hanim; const static int THICKNESS_240P = 1; const static int THICKNESS_480P = 2; const static int THICKNESS_1080P = 4; const static int THICKNESS = THICKNESS_480P; // THICKNESS_1080P; static std::vector<std::vector<bool>> d2learnLogoMap { {0,1,1,0,0,1,0,0}, // d {0,0,1,1,0,0,1,0}, // 2 {0,1,1,0,1,1,0,0}, // l {0,1,1,0,0,1,0,1}, // e {0,1,1,0,0,0,0,1}, // a {0,1,1,1,0,0,1,0}, // r {0,1,1,0,1,1,1,0} // n }; struct D2LearnLogo : public Scene { virtual void timeline() override { auto logo = PixelPanel(); logo.stroke_color(HColor::BLACK); logo.scale(2); //play(Create(logo)); for (int i = 0; i < 7; i++) { for (int j = 0; j < 8; j++) { if (d2learnLogoMap[i][j]) { play(FillColor(logo[i][j], HColor::CYAN), 5); } else { play(FadeOut(logo[i][j]), 5); } } } play(FillColor(logo[7][0], HColor::RED), 10); play(FillColor(logo[7][1], HColor::ORANGE), 10); play(FillColor(logo[7][2], HColor::YELLOW), 10); play(FillColor(logo[7][3], HColor::GREEN), 10); play(FillColor(logo[7][4], HColor::CYAN), 10); play(FillColor(logo[7][5], HColor::BLUE), 10); play(FillColor(logo[7][6], HColor::PURPLE), 10); play(FillColor(logo[7][7], HColor::WHITE), 10); } }; int main() { hanim::HEngine::default_config1(); //hanim::HEngine::set_window_size(320, 240); //hanim::HEngine::default_config2(); hanim::HEngine::recorder_file_name("d2learn-logo"); hanim::HEngine::render(D2LearnLogo()); hanim::HEngine::save_frame_to_img("d2learn-logo.png"); return 0; }
https://github.com/user-attachments/assets/03999462-5902-4e03-82e8-47289cabbe4b
在本文中,我们将分享 9 组效果出色的提示词,一展 Flux.1 模型的多功能性和强大功能。 以下是这些提示词的示例,你可在 Flux-1.com | Free way to use Flux.1 family of models. 上免费体验 Flux.1 模型。
场景说明:适合动画或漫画创作者为角色设计多样的表情。这些提示词可以生成展示同一角色在不同情绪下的表情集,涵盖快乐、悲伤、愤怒等多种情感。
提示词:An anime [SUBJECT], animated expression reference sheet, character design, reference sheet, turnaround, lofi style, soft colors, gentle natural linework, key art, range of emotions, happy sad mad scared nervous embarrassed confused neutral, hand drawn, award winning anime, fully clothed
[SUBJECT] character, animation expression reference sheet with several good animation expressions featuring the same character in each one, showing different faces from the same person in a grid pattern: happy sad mad scared nervous embarrassed confused neutral, super minimalist cartoon style flat muted kawaii pastel color palette, soft dreamy backgrounds, cute round character designs, minimalist facial features, retro-futuristic elements, kawaii style, space themes, gentle line work, slightly muted tones, simple geometric shapes, subtle gradients, oversized clothing on characters, whimsical, soft puffy art, pastels, watercolor
场景说明:当需要从现有角色设计中生成不同角度的全身图时,如正面、侧面和背面,适用于角色设计细化或动画建模。
提示词:A character sheet of [SUBJECT] in different poses and angles, including front view, side view, and back view
场景说明:适合希望创造 80 年代复古风格照片效果的艺术家或设计师。这些提示词可以生成带有怀旧感的模糊宝丽来风格照片。
提示词:blurry polaroid of [a simple description of the scene], 1980s.
场景说明:适合需要展示智能手机等产品设计的科技博客作者或产品设计师。这些提示词帮助生成展示手机外观和屏幕内容的图像。
提示词:a iphone product image showing the iphone standing and inside the screen the image is shown
场景说明:适合摄影师或视觉艺术家通过双重曝光技术创造深度和情感表达的艺术作品。
提示词:[Abstract style waterfalls, wildlife] inside the silhouette of a [man]’s head that is a double exposure photograph . Non-representational, colors and shapes, expression of feelings, imaginative, highly detailed
场景说明:适合需要为电影创建引人注目海报的电影宣传或平面设计师。
提示词:A digital illustration of a movie poster titled [‘Sad Sax: Fury Toad’], [Mad Max] parody poster, featuring [a saxophone-playing toad in a post-apocalyptic desert, with a customized car made of musical instruments], in the background, [a wasteland with other musical vehicle chases], movie title in [a gritty, bold font, dusty and intense color palette].
场景说明:适合游戏开发者或市场营销人员生成逼真的游戏截图用于宣传展示。
*这个可以使用 Claude 3 来为图像生成详细的提示。 *
提示词:A first-person perspective screenshot from Call of Duty: Warzone, with the player’s hands holding a modern assault rifle in the foreground. The HUD elements are visible, including a mini-map in the corner, ammo count, and health bar. In the center of the screen, about 50 meters away, Naruto Uzumaki is clearly visible, wielding a sniper rifle. Naruto is wearing his iconic orange and black jumpsuit, with his blonde spiky hair and Konoha headband clearly visible. He’s in a combat stance, partially behind cover of a destroyed vehicle. The environment is a war-torn urban landscape typical of Warzone, with damaged buildings, debris, and smoke in the background. Other players can be seen in the distance, engaged in firefights. The lighting suggests it’s late afternoon, with long shadows and a warm glow. The image has the characteristic high-resolution, realistic graphics of a modern FPS game.
场景说明:适合想要捕捉日常生活瞬间的摄影师或社交媒体用户。
提示词:Phone photo: A woman stands in front of a mirror, capturing a selfie. The image quality is grainy, with a slight blur softening the details. The lighting is dim, casting shadows that obscure her features. [The room is cluttered, with clothes strewn across the bed and an unmade blanket. Her expression is casual, full of concentration], while the old iPhone struggles to focus, giving the photo an authentic, unpolished feel. The mirror shows smudges and fingerprints, adding to the raw, everyday atmosphere of the scene.
场景说明:适合像素艺术爱好者或复古游戏开发者创造或复刻经典像素风格图像。
提示词:[Anything you want] pixel art style, pixels, pixel art
通过本篇文章,我们简要介绍了 Flux.1 的 9 大热门提示词。如果你也想尝试这些提示词,可以点击Flux-1.com | Free way to use Flux.1 family of models.免费体验 Flux.1 模型哦。
原来在日记列表里,轻点日记条目就是直接进入编辑页面,左划日记条目出现删除、折叠、模糊、分享的操作按钮,经典的 iOS 交互。而切换日期是需要通过拖动底部的加号按钮来完成的,往左拖动就是切换到前一天,往右拖动就是切换到后一天。
自打上线以来,无数用户都反馈过,希望可以左右划动就可以切换日期。但是这个左划的手势,已经日记条目占用了,加入左右划动的话就会造成手势冲突,所以我就一直没改。
直到上周,极简日记上架刚过 3 年,我也有点无法忍受现在的交互了,改!
要想实现这个左右划动切换日期,首先就要把关于日记条目的操作先做修改。最小的改动方式应该就是将 swipe actions 去掉,用长按出现 context menu 来代替,但是长按这个操作需要明确的引导下用户才知道,而且我个人不喜欢长按,感觉速度太慢了。
其实在 demo 阶段的时候,我曾经采用过这个交互方式:点击日记条目出现一个预览页面,页面主体是日记的内容,页面底部是所有的操作按钮。这次我也采用了这个方案,我计算了一下,只有打开编辑页需要多点击一次,而其他操作的步骤和原来是一样的,都是需要操作两下。日记的预览内容直接复用的就是日记的分享样式,头疼的是这些按钮怎么设计……
最开始的想法就是借用 Swipe Actions 的设计,横向排列这些按钮,每个按钮都是圆形的,icon 采用 SF Symbol 和不同的颜色,写出来一看,好丑!
后来,打算将这些按钮排列成一个圆弧形或者扇形,没实际写代码,光是画个草图就感觉还是很丑。也想过做成 iOS 中 Menu 那个样式的按钮菜单,但是受限于屏幕空间,也放弃了。也想过使用 SwiftUI 的 Action Sheet 或者 Confirmation Dialog ,但是这个控件需要再弹出一个页面,会有一种中断的打扰,也放弃了。
最终我发现丑的原因就在于 SF Symbol 、圆形、不同颜色这三个要素的不协调搭配,索性就把这些都去掉了,就采用最最简单的文字按钮,果然就顺眼好多了。删除按钮放在了最左边,采用红色文字,用分割线和其他操作按钮区分。
说一下这篇文章的重点,删除交互的实现,这是这次改动中花的时间最多的一个地方。
之前的删除交互就是左划日记条目,点击删除按钮,弹出一个 Alert ,点击确定后再删除日记。一开始我也想沿用这样的设计,但是首先遇到的问题就是 Alert 不弹出。新加入的预览卡片是通过肘子哥的 SwiftUIOverlayContainer 这个 package 来实现的,就是在日记列表页面弹出一个模态页面,可能是因为这个 package 导致预览页面和父页面的 alert 冲突导致,或者是其他 SwiftUI 什么乱七八糟的 bug ,导致 Alert 无法显示。塞翁失马,焉知非福,被逼着变通思路,既然无法显示 Alert ,何不如将整个预览页面变成一个 Alert ,这样不就完美解决了吗。于是改成点击删除按钮,下面的操作按钮变成取消按钮和确认按钮。
但是这样除了底部的按钮整体没有任何变化,需要在视觉上加强一下删除的状态,于是整个卡片加上了红色的边框,顶部加上了一个垃圾桶的 icon ,这样感觉就好多了。
既然顶部有了个垃圾桶,我就在想如果点击删除按钮后有一个日记内容被吸入垃圾桶的动画效果就好了。我的想法是,先将整个日记内容由长方形变成上窄下宽的体型,然后一边收窄一边向上移动,移动的同时整体的透明度降低。我把这个想法交给 Claude 和 ChatGPT ,很遗憾都没给出满意的动画代码,甚至都不接近。
这时我就想到了 macOS 上窗口最小化的「神奇效果」,搜了一下这个动画的英文名是 Genie Effect ,于是就在网上搜有没有已经用 SwiftUI 实现的例子。好消息是,GitHub 上有两个,坏消息是用 Shader 实现的,必须 iOS 17+ 才可以。下了这两个 repo ,默认的动画效果和我的想法有一些不同,都必须修改一下 Shader 代码才可以,于是花了一晚上一上午才调好一点点,但和我理想的效果还差一点,期间也问过 AI ,但是 AI 给出的 Shader 代码也都没法用。至此,整个动画就完成了,Siu ~~~。最后又给顶部的垃圾桶加上了 bounce 效果,让整个动画更有趣一些。
改成左右划动切换日期后,所有之前的日记操作几乎都重写了一遍,很多页面也都重构了,很自然地出现了很多 bug 。比如日期切换错误、分享页面弹出多次、编辑页面内容消失、分享图片尺寸不对等等,因为之前大量使用了通知,很多跨页面的数据是靠通知传送的,导致通知不是发送错误就是接收错误。
还在 TabView 上遇到了坑,图片预览的页面里的 TabView 即使在 App 退出前台时所有的页面都会重建一次,导致 App 回到前台,图片会有闪烁,闪烁的次数和图片的数量是一样的……换了好几个第三方 package 都不行,最后发现 SwiftUIX 的 PageView 就没有这个问题。
而我肯定,还有很多 bug 还没发现。
不过这次的改动,连续三天写代码到后半夜 1 点多,体验到了久违的 coding 心流。而且躺在床上后,一想到这个交互整个的推敲过程,居然兴奋到没有了睡意,直到两点半才睡着。
]]>据说能生成插画,想试试,发现打不开了
发生了什么?
]]>适合:
1 、抄别人作业
2 、抄自己作业(基于现有产品界面继续迭代设计)
视频:
https://x.com/HTMLtoFigma/status/1808441073343271163
moon run --target js --debug
即可立刻进入调试。🔧 Repo 链接: https://github.com/moonbit-community/moonbit-js-debug-demo ]]>点击一个图片可以看到详情,包括正向提示词和反向提示词,可以直接下载。如果你对图像不太满意,可以点击 remix 利用同样的提示词来生成里一张图(需要登陆)。
如果希望自己生图,需要登陆。第一步点击右上角注册/登陆按钮。注意:需要使用谷歌账号登陆。登陆后就可以免费生成图像了,输入提示词,点击生成按钮就可以生成,一般十几秒就可以生成一张。
用户每天可以免费生成 20 张 png 图像,一般来说也够用了。
使用这个网站需要一点提示词技巧,不过我这里以猫为例整理了一些好用的提示词,大家可以去尝试一下:
风格和链接 | 正向提示词 | 负向提示词 | 结果图 |
---|---|---|---|
卡通迪士尼可爱动物风 | cute disney style render of a animal baby cat with a round body and large glowing pupils, edge light with a soft pastel background | ugly, deformed, noisy, blurry, low contrast | |
高质量照片 | breathtaking cat ,award-winning, professional, highly detailed | sloppy, messy, grainy, highly detailed, ultra textured, photo | |
矢量风 | Simple Vector Art, a cat, 2D flat, simple shapes, minimalistic, professional graphic, flat color, high contrast, Simple Vector Art | ugly, deformed, noisy, blurry, low contrast, 3D, photo, realistic | |
手绘风 | comic cat . graphic illustration, comic art, graphic novel art, vibrant, highly detailed | ugly, deformed, noisy, blurry, low contrast | |
简笔画风 | Cel Shaded Art, a cat, 2D, flat color, toon shading, cel shaded style | ugly, deformed, noisy, blurry, low contrast | |
玻璃雕塑风 | transparent glas figure of a cute cat , 4k, high quality, masterpiece | ugly, deformed, noisy, blurry, low contrast | |
Low poly 风 | low-poly style cat . low-poly game art, polygon mesh, jagged, blocky, wireframe edges, centered composition | noisy, sloppy, messy, grainy, highly detailed, ultra textured, photo | |
3D 卡通建模风 | Adorable 3D Character of a cat, 3D render, adorable character, 3D art | ugly, deformed, noisy, blurry, low contrast | |
堡垒之夜风 | Fortnite Art Style, a cat, 3D cartoon, colorful, Fortnite Art Style | ugly, deformed, noisy, blurry, low contrast, photo, realistic |
谢谢大家的阅读,感恩~
]]>按单还是按月?按单现在行情是多少钱?
]]>Mellow 是一款为设计师开发的浏览器插件,帮助设计师保存 DALL-E 生成的 AI 作品和提示词。 目前支持保存到 PDF 和 Fibery 。欢迎大家试用!
使用中遇到的问题欢迎在此反馈 https://github.com/mellow-design/mellow-site/issues
使用文档 https://mellow-design.gitbook.io/mellow-extension-docs/
]]>