设计 way to explore https:https://cdn.v2ex.com/navatar/3b8a/6142/215_normal.png?m=1523190513 https:https://cdn.v2ex.com/navatar/3b8a/6142/215_large.png?m=1523190513 2025-10-05T11:02:13Z Copyright © 2010-2018, V2EX DexScreener 网站的设计挺不错的 tag:www.v2ex.com,2025-10-05:/t/1163435 2025-10-05T10:02:13Z 2025-10-05T11:02:13Z sillydaddy member/sillydaddy 这个网站就是看币价的:
https://dexscreener.com/solana/ctxhhwbovttrf1kc4zwfz8zf8bnw78n2uur3ozx5vfkb

其中,打动我的一个设计细节:中间那块区域,上面是价格曲线,下面是一些列表,中间有一根灰色分隔线。为了让人知道这根分隔线可以上下拖拽,从而调整大小,特意给它加上了上下箭头。

]]> V 友有设计师么 tag:www.v2ex.com,2025-09-25:/t/1161788 2025-09-25T07:57:05Z 2025-09-25T15:06:41Z yanng member/yanng V 友们,有 Web 设计师么,能贴一下你们的作品或者站点么

]]>
[有奖问卷] 帮帮孩子的设计课!参与桌面收纳模块调查,赢 10 元红包/产品 Demo tag:www.v2ex.com,2025-09-05:/t/1157210 2025-09-05T00:27:19Z 2025-09-05T04:52:58Z daishuge member/daishuge v2 的各位大佬们,大家好!

我是一名正在学习设计与技术课程的学生,目前正在做一个关于桌面收纳的课程项目。

这是我的产品概念图,一个桌面收纳模块(功能可能不同,看你们的问卷答案了~)

demo

为了让这个设计更贴合大家的真实需求,我制作了一份问卷,预计占用您 3-5 分钟时间 。您的每一个建议都对我至关重要!

[参与福利] 为表感谢,我准备了一些小礼物:

幸运奖 (1 位) :抽取一位填写问卷的朋友,送上 10 元 现金红包。(学生党经费不足请谅解~) 体验奖 (5 位) :抽取五位朋友,送出第一批 产品 Demo (邮费需自理哈)。 [如何参与抽奖] 完成问卷后,在评论区截图完成页面,并说一句有关的建议~谢谢

抽奖传送门:

https://www.wjx.cn/vm/h4ftOOe.aspx#

]]>
搭建了个生活权益小程序,求宝贵建议! tag:www.v2ex.com,2025-09-01:/t/1156410 2025-09-01T12:59:11Z 2025-09-01T14:59:11Z hxyu member/hxyu 现在终于有了自己的小程序,按照喜欢的风格对界面进行了排版,也对接了一些实用的优惠权益渠道,目前覆盖了点餐、手机话费充值、酒店预定、演出门票预定、电影票预定、寄快递、二手物品交易等。

想让大家帮忙提提建议,看看还有什么可优化的地方,比如大家平时哪些生活权益类需求比较多,还有哪些需要增加的,或者哪些功能觉得鸡肋,需要砍掉的。

目前想对接加油的渠道还没有找到,后面考虑增加下。

https://vip.123pan.cn/1819953815/yk6baz03t0m000d7w33gck1djxu2bpdxDIYPBIryDwYPAGxPAwUPDF==.jpg ]]>
想做一个 app 但是不懂设计,有什么好的工具推荐 tag:www.v2ex.com,2025-08-25:/t/1154839 2025-08-25T10:06:12Z 2025-08-25T12:49:25Z v7788120 member/v7788120 有人搞了一个给照片加胡子的在线 AI 工具, 挺好玩的 tag:www.v2ex.com,2025-07-25:/t/1147723 2025-07-25T08:56:56Z 2025-07-27T14:04:22Z terryso member/terryso

给志玲姐姐加了一条黄金胡子, 😂😂😂

网站: https://mustaiche.vercel.app/

]]>
[教程贴] 一分钱不花,我如何用 AI 生成网站的全套品牌 VI tag:www.v2ex.com,2025-07-25:/t/1147579 2025-07-25T02:21:21Z 2025-07-24T10:19:21Z iamzerolu member/iamzerolu 最近我的AI 心理网站V 站上发布后,有网友在评论区问我:“这种动漫画风的图,是 AI 生成的嘛,如果是,是什么 ai 生成的,还能保持一致性”,也有不少网友表示期待看到教程。 Image

📢 @dassh @hulebaji 来查收你们要的教程啦~

其实这整套 VI ,包括 logo 、插画、favicon 都是我用lovart星流 agent(星流 agent 其实就是 lovart 的中国版)制作的,我甚至还用它制作了四格漫画!

而且目前为止我还没有充过一分钱,完全靠初始积分+每日赠送的积分就制作出了这些素材!

流程如下:

1 、 让 lovart 给你创建一个 logo ,描述你想要的感觉 Image 如果有一些不满意的地方,直接让 AI 帮忙修改即可(我就让 AI 去掉了代表科技感的线条) Image

2 、 选择了满意的 logo 后,让 lovart 继续创建包括网站首页、字体、logo 、插画等全套 VI 这类插画往往普适性特别好,应用在很多地方都不会违和!

Image

3 、 当需要生成特定的网页插画时,可以将满意的 IP 图“send to chat”,然后让 AI 生成网站上你需要的插画。

提示词参考:“请使用附图中的形象和画风来制作网页插画,希望是一个森林的场景。。。”

我的森林动物人格心理测试用到的两幅插画就是通过这个方法生成的,效果还不错吧哈哈😄

Image

注意:

再分享几个小技巧

1 、你还可以保持 IP 形象不变,将其变成 3D 版本!

Image

2 、可以通过即梦让插画动起来,同样也是免费的哦

https://github.com/user-attachments/assets/73ab1805-68b0-4ec3-8280-eb5e10401909

3 、结合 deepseek 还可以生成下面这样的四格漫画, 用于日常分享小红书笔记等!

Image

大家也可以体验一下我做的三个测试:

  1. 森林心理测试
  2. 答案之书
  3. 罗夏墨迹测试(付费)

有什么问题可以在下面评论,大家的评论我都会尽可能回复的

]]>
draw.io 的创新用途 tag:www.v2ex.com,2025-06-09:/t/1137469 2025-06-09T13:59:07Z 2025-06-10T17:16:20Z liuzhiyong member/liuzhiyong 本来是用于方框图之类的,效果很好,比 Visio 漂亮多了。

工作中公司生产的设备,要写说明书:有个同事用它画设备的面板,面板上显示屏、旋钮、开关、等等。我看了,效果真好。这个应该算是创新用途了,软件原本不是搞这个的。

]]>
做了一个给图片添加矢量描边的 Figma 插件 tag:www.v2ex.com,2025-05-21:/t/1133388 2025-05-21T15:36:20Z 2025-06-12T13:26:32Z fenx member/fenx ⚠️ Vibe Coding 警告 ⚠️

众所周知 Figma 中是不能给透明背景的图片直接按照轮廓添加矢量描边的。所以做了这么一个插件。

插件地址

banner

其实算是重写了,第一版的算法是自己和 Claude 3.5 琢磨的,速度有点慢,输入参数也很复杂,详见这篇文章

时隔五个月,Figma Config 一众新功能依然没有取代这个插件,所以配合 Gemini 2.5 Pro ,以及 @liajoy 的算法思路重写了插件。描边速度生成得更快,用起来更不复杂,顺便换了全新的界面。

liajoy 佬的算法最终是在 canvas 生成的描边,效果已经很不错。Figma 插件这边的难点依然在于,如何连接生成的锚点,在一些比较复杂的多图像透明 png (且各图像距离较近),算法就会暴露出很多不完善的地方(比如到处飞线),但是感觉再研究下去有点触发边际效应——花费大量时间不如手动改下锚点。

新旧界面对比

]]>
有没有懂设计的,百度地图这个是对 less is more 的高级理解吗? tag:www.v2ex.com,2025-05-14:/t/1131740 2025-05-14T08:19:11Z 2025-05-14T12:34:40Z katwalk member/katwalk 再看看人家高德,那叫一个清晰明了,人类友好度满分。

百度:



高德:

]]>
AI 设计工具生成的页面要导入到 Figma、MasterGo、Pixso 等接着编辑,试试这个 tag:www.v2ex.com,2025-05-09:/t/1130646 2025-05-09T04:27:41Z 2025-05-09T05:27:41Z delai member/delai 上链接

https://demoway.cn/html-to-design

https://demoway.cn/blog/ai-design-to-mastergo-pixso-figma

]]>
iOS 产品设计:为什么国内大厂的输入框换行要隐藏在菜单里面, Return 设计为发送,然后输入框右边还有一个发送按钮 tag:www.v2ex.com,2025-05-09:/t/1130620 2025-05-09T03:03:23Z 2025-05-13T16:33:25Z usVexMownCzar member/usVexMownCzar 在 iOS 上对比了几个 AI chat app ,DeepSeek ,豆包,通义,return 是发送,然而输入框右边还有一个发送按钮。换行反而隐藏在菜单里面。

为啥要这么设计,不会是借鉴的微信吧😅

deepseek

doubao

qwen

opencat 的 return 是换行,然后有发送按钮。与 chatgpt Claude grok 等 app 的逻辑是一样的。

opencat

有没有懂产品的解答下

]]>
Elementary OS 的图标设计指南里的例图用的是什么工具? tag:www.v2ex.com,2025-04-30:/t/1129190 2025-04-30T09:31:36Z 2025-04-30T10:49:17Z Livid member/Livid https://docs.elementary.io/hig/reference/iconography

https://github.com/elementary/icons

文章中例子图看起来是某种矢量绘图工具,官方库里输出的也确实是 SVG 格式,但是看起来这个矢量绘图工具又带有某种帮助像素精确对齐的功能,会是什么工具呢?

]]>
88x31 badges by Louie Mantia tag:www.v2ex.com,2025-04-23:/t/1127664 2025-04-23T20:33:42Z 2025-04-24T01:37:54Z Livid member/Livid
这里有一组很有爱的设计:

https://lmnt.me/badges/

]]>
马上五一节都要开始做与五一有关的活动或则 PPT 文档了,这里收集了大量关于五一节的 PPT 模板,选好模板直接套文字就可以。 tag:www.v2ex.com,2025-04-15:/t/1125536 2025-04-15T02:50:55Z 2025-04-15T02:50:55Z pingfan520 member/pingfan520 马上五一节都要开始做与五一有关的活动或则 PPT 文档了,这里收集了大量关于五一节的 PPT 模板,选好模板直接套文字就可以。下载链接: https://pan.xunlei.com/s/VONONskbBiaGnF9g0yDb770kA1?pwd=588u

]]>
请问一下大家学设计有什么推荐的信息流 tag:www.v2ex.com,2025-04-13:/t/1125170 2025-04-13T14:28:24Z 2025-04-13T17:26:24Z X1aoma member/X1aoma 最近在做一个 app,对设计不太懂,我目前看了 www.behance.net undraw.co www.navbar.gallery 想找一些这种找灵感的网站或者 app 之类的

]]>
AI 跟艺术能碰撞出什么火花? tag:www.v2ex.com,2025-03-31:/t/1122298 2025-03-31T06:44:16Z 2025-04-05T07:57:25Z vnorange member/vnorange 最近突发奇想,用 AI 写了个 AI 生成的网站,面向非专业用户的没有门槛的 AI 艺术创作工具,完完全全免费使用。

网站的内容就是通过"碎片输入+智能扩展"的方式,将随手截取的图片/文字片段自动转化为一个艺术风格的作品,通过 AI 结合传统艺术、现代艺术等不同风格生成对应的图片。内置了一些逻辑,不需要很复杂的提示词,也没有任何的学习门槛,简简单单就能生成一个艺术风格的图片。

网站自取:

https://cliptoart.app

为什么做这个?

  1. 工作需要,有一些场景需要一些特别风格的图片
  2. 简单,没有开发登录、付费等逻辑,就几个生成的接口手动对接了一下,其他都是 AI 生成
  3. 好奇,想传统的山水画、工笔画,还有敦煌等艺术风格跟 AI 结合能有什么火花

免费能不能一致持续?

不确定,虽然没什么成本,不过生成速度有点慢;加速的方式也有,但是成本就高了,暂时没处理;免费的生成的质量也还行,将就用着

]]>
大家有推荐开发人员入门快的原型设计工具吗? tag:www.v2ex.com,2025-03-13:/t/1118242 2025-03-13T10:57:32Z 2025-04-03T19:30:28Z xiaohupro member/xiaohupro 最近用户慢慢多起来了,这个月涨了三百位用户,我的老婆昨天说你这个小程序页面看起来有点老,我犟嘴回复到这叫“极简风”,其实我内心同意她的说法,因为虽然是走极简风吧,但是看起来总是那么的“low”,正好已经离职了,想着把 UI 和原型设计方面的知识学习一下,大家有没有推荐的工具适合开发人员的,我之前知道的有:蓝湖、墨刀等,主要就是太多了,不知道该用哪个,想听听大家的建议,然后后续就一直使用,不想后面把一个工具换来换去的。另外贴上目前小程序的页面,大家指正一下: moodrecorder

最后那张纸是我想后面首页改成的样子,因为后期想多增加一切功能,但是目前首页只有记录和 tips 多位置,所以后期想把首页这块空间利用起来,最下面的卡片放一些未来增加的功能,中间左侧用一个环状图展示已经记录的正面和负面情绪的占比,右侧放目前的两个正面和负面记录按钮,最上面还是放置 AI 根据天气情况和上次心情生成的提示语,这个功能其实我想砍掉,感觉用户很少会看。

]]>
一个小而美的作品集网站 tag:www.v2ex.com,2025-03-10:/t/1117227 2025-03-10T05:37:05Z 2025-03-11T04:17:55Z ioNaLyhO member/ioNaLyhO 青苔设计官网 next.mossdesign.cn

这是一个非商业项目,是设计师学习 Next.jsSanity 的一个实例。在很大程度上也受制于技术,因为我的技术有限,只能做自己能实现的设计,好在不必受制于人,也因此做得很开心。这样说并不是否定人类文明进程中许多伟大的成果不是分工合作所创造的,我当然相信商业本身就是互助合作和正和游戏,不过是我们还在榨取式社会丛林中艰难的前行,想要坚守「平凡但不平庸」实际上是极高的要求。

我的初衷是做一个小而美的作品集网站,本项目以兄弟公司青苔设计为原型,在设计中,我先为网站构思了文案,青苔设计这个名字是什么意思?如果人们无法解读就会缺少共情。我想到杉本博司的书《直到长出青苔》便去挖掘其中的意义,于是有了「真正有生命力的事物,需要时间去沉淀、去生长、去被理解」、「青苔不语,生机盎然」、「沉淀、静谧、坚韧、永恒」这些标语,与该公司做品牌设计相契合。有了文案,我们才有了排版的元素,甚至有了做设计的感觉,它不仅仅是信息本身,也是一种视觉元素,更有可能成为点睛之笔。就像一首歌,如果光是好听,那也只是好听而已,如果它的歌词触动了你,它就超越了好听。文案是自然语言,设计是视觉语言,普通人更能够理解自然语言,不一定理解视觉语言,它们相互相成,文案也为普通人去理解设计做了铺垫。

这是一种极简主义的设计,但不同于以富媒体为主视觉的网页设计,比如苹果的官网;也不同于以文字为主视觉的网页设计,比如 Typewolf 收录的网站。青苔的网页设计倾向于以作品本身为视觉主语,结合网页特性的轻体验,塑造一个简约而不简单的作品集网站。就像无印良品的风格,我称它为——没有设计的设计——自然、本味。我喜欢《不服从的艺术》里面译者的一句介绍:「虽然身为译者,但最大的梦想却是让读者感觉不到译者的存在。期待自己的译文能如原文般自然流畅、饶富趣味。」

网站的主要特性和实现

  1. (sanity): 创建了自定义数据模式类型,用于后台管理和前端渲染
  2. (sanity): 适配了浏览器默认语言,支持自动切换管理面板中英文界面
  3. (sanity): 支持按需新增图片、视频或文本块的页面搭建
  4. (sanity): 仅在开发环境中自动启用了 vision 工具可用于查看数据结构,而不干扰最终用户
  5. (sanity, next.js): 支持预加载低像素模糊占位图
  6. (next.js): 页面首图使用了预加载、其余图片使用懒加载
  7. (tailwindcss): 适配了系统色彩模式,支持 light 和 dark 方案
  8. (tailwindcss): 适配了从手机到 5K 屏幕的自动布局

演示
next.mossdesign.cn
后台
next.mossdesign.cn/studio
用户名
demo@cooooolt.com
密码
y6{O65*7Zr
]]>
时间感知工具,专业工作者必备!正式公测,一年专业版派送中~ tag:www.v2ex.com,2025-02-13:/t/1111289 2025-02-13T12:28:23Z 2025-02-20T03:51:23Z matrixage member/matrixage 过年期间开发了基于 Todo 的时间感知工具,有四个维度,符合日报周报月报的模式,内测了几个月,现在正在公测,激活码派送中,程序员/设计师派送一年专业版,其他专业人士最少半年专业版,感兴趣的加我 V:Mrhehero 🙏

官网:if.openages.com

Image

Image

Image

Image

Image

Image

Image

Image

]]>
deepseek 的 logo 有意思,包含了有 2 条鱼/2 个眼神 tag:www.v2ex.com,2025-02-01:/t/1108482 2025-02-01T02:07:09Z 2025-01-31T21:37:25Z xbox360 member/xbox360 https://cdn.deepseek.com/logo.png

第一眼是一条鲸鱼,再细看一点会看到一条鲨鱼.

鲸鱼和鲨鱼看你的眼神不一样.

]]>
设计了两个弹性长度数字编码,可以灵活地编解码数字以便高效传输 tag:www.v2ex.com,2025-01-14:/t/1105049 2025-01-14T08:53:11Z 2025-01-14T16:24:39Z idrunk member/idrunk DCE 是一个通用路由库,除了能路由 Http 等协议外,还能路由 Websocket 、Tcp 、Udp 等非标准可路由协议的协议,只需要实现定义的可路由接口即可。实现该接口需要序列化及反序列化数据包,为了实现一个高效灵活的二进制可路由协议,我设计了两个弹性数字编码。

7 比特弹性长度数字编码

一开始想着用第一个字节比特位标志表示是否有请求 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+864 位数字,用最小一个字节表示 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 版本,该版本较旧,近期大概不会更新,但最终会同步,欢迎关注。

]]>
室内设计师们都用什么软件?效果图,安装图/施工图,🙏 tag:www.v2ex.com,2025-01-08:/t/1103653 2025-01-08T12:05:31Z 2025-01-15T11:13:21Z wxmomomowx member/wxmomomowx 推荐一款字体搭配 tag:www.v2ex.com,2024-12-12:/t/1096993 2024-12-12T05:57:27Z 2024-12-13T04:36:39Z hyh0u0 member/hyh0u0 PT Sans + 思源黑体,目前 Obsidian 在用,感觉比思源黑体自己的英文和数字好看很多

]]>
txt.dev · 一个很精致有趣的设计 tag:www.v2ex.com,2024-12-11:/t/1096737 2024-12-11T07:22:12Z 2024-12-17T07:43:51Z Livid member/Livid https://txt.dev/ ]]> AI 设计神器 Recraft tag:www.v2ex.com,2024-11-27:/t/1093086 2024-11-27T06:19:50Z 2024-11-30T11:22:13Z gzllla member/gzllla 网上冲浪发现有人推荐这个工具,整体界面还是很好看,而且他有无限空白画布。贴一个带邀请码的链接,注册后双方都能获取 200 个类似能量的点数,每日还能免费获得 50 点数(每日重置) https://www.recraft.ai/invite/lzx8YyYdFY

]]>
有没有人关注一些硬件的设计 tag:www.v2ex.com,2024-11-22:/t/1091878 2024-11-22T10:23:34Z 2024-11-24T17:07:19Z triwateroccupied member/triwateroccupied 不是设计师,但有时候有些简单的 P 图,抠图之类的工作或制作一些小海报,有什么推荐的软件吗? tag:www.v2ex.com,2024-11-13:/t/1089195 2024-11-13T05:48:25Z 2024-11-14T04:24:05Z chuck1in member/chuck1in 用过网页在线版的可画,能用但是用起来有点卡而且感觉有些地方没那么顺手。

有没有本地安装的软件可以实现这些简单的功能?最好能免费用 AI 实现一些简单的 P 图抠图操作。谢谢大家的推荐~

]]>
全干工程师怎么入门 UI 设计 tag:www.v2ex.com,2024-11-11:/t/1088434 2024-11-11T03:01:29Z 2024-12-05T07:19:18Z coollest member/coollest 现在的工作是给一个生物信息实验室做相关的数据库项目,目前前后端代码逻辑没什么问题,就是被吐槽页面 UI 及结构设计比较丑,有没有相关设计的入门路线或者学习路线,各种文档或者学习视频都行,提前感谢各位大佬!

]]>
1024,送你们两张图片吧 tag:www.v2ex.com,2024-10-24:/t/1083389 2024-10-24T14:24:56Z 2024-10-14T14:23:56Z kylebing member/kylebing art-horizontal-1024-3000h art-portrait-1024-3000w

]]>
为什么很多 ui 的背景设计不使用纯白? 而是使用 fafafa ? tag:www.v2ex.com,2024-10-21:/t/1082347 2024-10-21T14:47:07Z 2024-10-28T17:58:46Z jeesk member/jeesk 当用计算机思维进行 Logo 设计时? - 思考过程 | D2Learn 开源社区 tag:www.v2ex.com,2024-09-24:/t/1075522 2024-09-24T12:49:35Z 2024-09-24T12:46:35Z Sunrisepeak member/Sunrisepeak 🐼🐳暂时没搞懂怎么加图片, 就先引用一下自己知乎上的图片🐱🐶


最近在 github 上创建了一个d2learn 社区, 于是就想着怎么也得搞个 Logo 吧, 于是结合社区背景设计了如下 Logo

这个 logo 初看, 可能看不出什么。但是如果给一个提示: 二进制。那么我相信很多有一些计算机背景的同学, 肯定就能猜到这个 logo 的设计思路了 —— 二进制 + ASCII 码。下面就来详细的介绍一下 D2Learn Logo 和其动画的创作过程

Logo 想法的诞生过程

由于 d2learn 是一个关于技术知识分享、学习、交流的开源社区。所以 logo 设计的时候希望体现一定的技术背景并且一定程度的能表达 d2learn, 这样就有了大体框架

从文字到图案 - 二进制和 ASCII 码

这样我们就能很容易把 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 图案

并且黑色也作为背景色没有缺席

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

Other

Logo 生成和动画完整代码

d2learn 开源社区

]]>
偏执的工程师思维,是不是设计不好一个产品特性?因为他总是用数学上的解 描述这个世界。 tag:www.v2ex.com,2024-08-12:/t/1064309 2024-08-12T03:47:29Z 2024-08-11T19:47:29Z kzhiquan member/kzhiquan
https://picview.chitaner.com/zh-cn/blog/window_image_zoom_mode/) ]]>
给大家分享一下 Flux.1 模型的 9 大热门提示词 | 亲测好用 tag:www.v2ex.com,2024-08-09:/t/1063754 2024-08-09T05:34:58Z 2024-08-14T06:33:58Z iamzerolu member/iamzerolu 由 Black Forests Labs 研发的 Flux.1 ,这款创新的图像生成模型自发布以来迅速走红全球。它能够根据文本提示创造令人惊艳的视觉效果,激发了全球艺术家、设计师和创意爱好者的无限创意。Flux.1 为探索视觉艺术的新领域提供了强大工具。

在本文中,我们将分享 9 组效果出色的提示词,一展 Flux.1 模型的多功能性和强大功能。 以下是这些提示词的示例,你可在 Flux-1.com | Free way to use Flux.1 family of models. 上免费体验 Flux.1 模型。

image

1.角色表情集

imageimage

场景说明:适合动画或漫画创作者为角色设计多样的表情。这些提示词可以生成展示同一角色在不同情绪下的表情集,涵盖快乐、悲伤、愤怒等多种情感。

提示词: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

2.全角度角色视图

imageimage

场景说明:当需要从现有角色设计中生成不同角度的全身图时,如正面、侧面和背面,适用于角色设计细化或动画建模。

提示词:A character sheet of [SUBJECT] in different poses and angles, including front view, side view, and back view

3.80 年代复古风格

imageimage

场景说明:适合希望创造 80 年代复古风格照片效果的艺术家或设计师。这些提示词可以生成带有怀旧感的模糊宝丽来风格照片。

提示词:blurry polaroid of [a simple description of the scene], 1980s.

4.智能手机内部展示

image

imageimage

场景说明:适合需要展示智能手机等产品设计的科技博客作者或产品设计师。这些提示词帮助生成展示手机外观和屏幕内容的图像。

提示词:a iphone product image showing the iphone standing and inside the screen the image is shown

5.双重曝光效果

imageimage

场景说明:适合摄影师或视觉艺术家通过双重曝光技术创造深度和情感表达的艺术作品。

提示词:[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

6.高质感电影海报

imageimageimage

场景说明:适合需要为电影创建引人注目海报的电影宣传或平面设计师。

提示词: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].

7.游戏场景截图

imageimage

imageimage

场景说明:适合游戏开发者或市场营销人员生成逼真的游戏截图用于宣传展示。

*这个可以使用 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.

8.镜面自拍效果

imageimageimage

场景说明:适合想要捕捉日常生活瞬间的摄影师或社交媒体用户。

提示词: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.

9.像素艺术创作

image

imageimageimage

场景说明:适合像素艺术爱好者或复古游戏开发者创造或复刻经典像素风格图像。

提示词:[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 模型哦。

image

]]>
独立开发日记:一个删除交互的思考和设计 tag:www.v2ex.com,2024-08-02:/t/1061916 2024-08-02T01:56:56Z 2024-08-02T05:08:30Z vulgur member/vulgur 最近给极简日记的交互做了一次大改动,其中关于删除的交互经历了复杂的思考、推敲和设计,感觉值得单独写一篇文章分享出来。

前情提要

原来在日记列表里,轻点日记条目就是直接进入编辑页面,左划日记条目出现删除、折叠、模糊、分享的操作按钮,经典的 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 心流。而且躺在床上后,一想到这个交互整个的推敲过程,居然兴奋到没有了睡意,直到两点半才睡着。

]]>
hitu 现在什么情况了呢?打不开了? tag:www.v2ex.com,2024-07-29:/t/1060896 2024-07-29T07:17:59Z 2024-07-29T08:24:02Z 2bad4u member/2bad4u hitu.alipay.com

据说能生成插画,想试试,发现打不开了

发生了什么?

]]>
photoshop2024 出现一个白色无法关闭? tag:www.v2ex.com,2024-07-25:/t/1059961 2024-07-25T04:16:23Z 2024-07-25T05:43:59Z GuluMashimaro member/GuluMashimaro

这是什么东西,中间一个白色,关不掉。 ]]>
分享一个 Figma 插件,设计师抄作业神器,可以导入任意网页到 Figma 里继续编辑 tag:www.v2ex.com,2024-07-03:/t/1054624 2024-07-03T10:35:35Z 2024-07-03T11:35:35Z delai member/delai HTML to Figma

https://html.tofigma.com

适合:

1 、抄别人作业
2 、抄自己作业(基于现有产品界面继续迭代设计)

视频:
https://x.com/HTMLtoFigma/status/1808441073343271163

HTML to Figma 插件地址

]]>
有什么好的笔记软件方便生成图片的么? tag:www.v2ex.com,2024-07-03:/t/1054451 2024-07-03T02:16:47Z 2024-07-03T11:34:22Z rmrf member/rmrf 看到小红书上不少图片文字分享都很好看,不知道什么软件生成的。

]]>
最近一直在找在学各种前端框架,现在我决定重新复习 HTML+CSS tag:www.v2ex.com,2024-06-30:/t/1053725 2024-06-30T09:17:17Z 2024-07-01T07:45:10Z maymay5 member/maymay5 因为我发现,我不是缺一个顺手的框架,而是审美有问题,框架用得再 6 ,也不影响我画得极丑的 UI ,各位大佬有什么产品或者方法来提高一下自己审美吗...... ]]> 欢迎大家来评价一下这个 debug 工具 tag:www.v2ex.com,2024-06-27:/t/1053193 2024-06-27T12:09:45Z 2024-06-26T20:06:45Z moonbitlang member/moonbitlang 在 MoonBit 最新版本中,仅需简单在 Javascript Debug Terminal 上执行 moon run --target js --debug 即可立刻进入调试。🔧 Repo 链接: https://github.com/moonbit-community/moonbit-js-debug-demo

]]>
分享一个 AI 直接生成免抠透明 PNG 的免费网站 tag:www.v2ex.com,2024-05-21:/t/1042630 2024-05-21T06:39:39Z 2024-05-22T02:20:07Z iamzerolu member/iamzerolu genpng.com 大家好,不管是平时写 PPT 、写文档、做设计、做网站,我们难免会用到各种 png 素材,但是搜集这些 png 素材不仅费时费力,而且经常遇到假 png 图像,或是需要付费购买商用许可。 但是 AI 时代,有人折腾出了通过提示词免费生成 PNG 素材的工具了。我测试了一下,非常简单,接下来手把手教会你。 Genpng 网站直达: https://genpng.com/ 进入网站后,可以看到首页里面有不少 png 图像了,都可以直接下载,免费可商用。 genpng.com

点击一个图片可以看到详情,包括正向提示词和反向提示词,可以直接下载。如果你对图像不太满意,可以点击 remix 利用同样的提示词来生成里一张图(需要登陆)。

如果希望自己生图,需要登陆。第一步点击右上角注册/登陆按钮。注意:需要使用谷歌账号登陆。登陆后就可以免费生成图像了,输入提示词,点击生成按钮就可以生成,一般十几秒就可以生成一张。 genpng.com

用户每天可以免费生成 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 Low poly 风
3D 卡通建模风 Adorable 3D Character of a cat, 3D render, adorable character, 3D art ugly, deformed, noisy, blurry, low contrast 3D 卡通建模风
堡垒之夜风 Fortnite Art Style, a cat, 3D cartoon, colorful, Fortnite Art Style ugly, deformed, noisy, blurry, low contrast, photo, realistic 堡垒之夜风

谢谢大家的阅读,感恩~

]]>
如今还有哪些交互方式令人眼前一亮? tag:www.v2ex.com,2024-05-10:/t/1039502 2024-05-10T07:46:14Z 2024-05-13T19:40:21Z Pionear member/Pionear
-微博、公众号的留言
-视频时代的点赞与弹幕

目前像 discord 的互动模块有着酷炫的动画,个人觉得会是下一个交互风口~

你觉得呢?可否详细聊聊你的观点~ ]]>
一个好的简约博客大概是什么样的呢? tag:www.v2ex.com,2024-04-22:/t/1034691 2024-04-22T09:15:36Z 2024-10-15T18:10:23Z xiaopanglian member/xiaopanglian 我看网上很多博客设计,都不是很好看,前几天看到 V 站一个大佬开源的产品,然后看到他的个人博客,感觉挺好看的,https://xblog.io/,这种简约博客我感觉就非常喜欢,有没有其他的类似的博客页面可以参考下呢?

]]>
V 友们有没有原型组件和模板分享的啊 tag:www.v2ex.com,2024-03-15:/t/1023917 2024-03-15T03:48:13Z 2024-03-19T22:11:27Z coderMonkey member/coderMonkey 夜间模式在类阅读场景的必要性 tag:www.v2ex.com,2024-03-15:/t/1023883 2024-03-15T02:58:15Z 2024-03-14T22:58:15Z rezied member/rezied 任何带有阅读、阅览性质的产品(知乎,语雀,贴吧...),夜间模式(护眼模式)的设计是不是非常有必要的? V 站的背景长时间看下来确实刺眼,而且它的日夜切换按钮我也是用了一段时间才找到在哪里😓

]]>
帮朋友找兼职美工,应该怎么给报酬? tag:www.v2ex.com,2024-03-10:/t/1022247 2024-03-10T03:33:26Z 2024-03-21T08:37:02Z phf0313 member/phf0313 对美工兼职行情不了解,问问大家兼职美工应该怎么给报酬。平时就是做做宣传图,产品图。

按单还是按月?按单现在行情是多少钱?

]]>
Chrome Extension Mellow:批量保存 DALL-E 生成的 AI 作品 tag:www.v2ex.com,2024-03-07:/t/1021617 2024-03-07T13:56:02Z 2024-03-08T05:26:52Z Younow member/Younow https://chromewebstore.google.com/detail/mellow-dall-e-image-and-p/bnhmpplknkpgddeeippmpomgokhkiadi

Mellow 是一款为设计师开发的浏览器插件,帮助设计师保存 DALL-E 生成的 AI 作品和提示词。 目前支持保存到 PDF 和 Fibery 。欢迎大家试用!

使用中遇到的问题欢迎在此反馈 https://github.com/mellow-design/mellow-site/issues

使用文档 https://mellow-design.gitbook.io/mellow-extension-docs/

]]>
ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86