pixso教程ui
粉丝8.4万获赞69.0万
相关视频
03:05查看AI文稿AI文稿兄弟们，作为独立开发者，我发现最大的痛点其实并不是写代码，而是意外设计，没有设计基础的话，真的很难产出专业的界面。这段时间我一直在使用 cloud code 编程，但我发现每次的前轮界面写的都特别丑， 我发现了 pixel 这款国产爱工具，所以本期视频呢，我们将使用 cloud code 加 pixel 来完成一个实战项目，先给大家看下效果吧，比如你现在看到了这个效果以及这个效果，还有这个效果， 这都是我使用 pixel 设计生成的。从设计稿到可运行的 html 界面，其实可以看到还原度都非常高，包括细节处理非常到位，无论是图标、按钮，配色间距，那这些呢，都不需要手动调整，我们生成好了就可以直接用。 再说我们使用这个 pixel 设计的这个仪表盘吧，那整个过程呢，我们只需要三步，首先是我们打开 pixel 的 这个控制台，进入控制台之后呢，我们点击这个 ai 生成设计稿，这时候我们可以看到有一个对话的界面，在这里呢我们可以输入我们的 pixel 的 需求，例如仪表盘，我们点击回车， 在右侧就可以看到详细的过程。接着就是精细化调整了，我们点击右上角的编辑模式，你可以在这里面通过对话的方式去优化细节，它呢可以手动调整设计元素，非常的灵活， 我用的最多的还是这个研发模式，我们只需要点击这个设计稿等代码，这时候我们只要选择我们输出的格式，比如说像 html， 对 吧？这时候 pixel 呢就会生成可以直接用于生产环境的代码， 我实测下来，大家可以看到代码的结构是非常清晰的，应用的响应式布局也处理的很好，基本不用大改就能直接上线。另外值得一提的是呢， pixel 还能与各类的支持 m c p 的 客户端进行联动，比如说像 cloud code cursor 进行无缝写作，下面呢，我们来演示一下。首先打开 pixel 的 客户端，客户端 这里呢，我们只需要复制 m c p 的 链接，然后在工具中复制一下，通过这条命令我们就可以完成 m c p 的 安装了。这时候呢，我们就可以直接在 cloud code 当中去操作这个 pixel 的 图层了，比如说我们现在呢， 选择这个图层就可以一键生成 html 代码，这样我们设计和代码就能完全同步了，从此告别重复劳动。再说说我为什么推荐 pico 吧，其实它支持 ai， 一 句话生成 ui 对 标 figma 不 仅更快，而且更智能。好了，已经生成完了，那我们来看一下效果吧， 我们可以看到整体的还原效果还是非常惊艳的，虽然图标没有加载出来，但整体的还原度达到了百分之九十，无论是布局和配色都一比一的还原 好视频。最后呢，我想说这款工具呢，其实适合很多人群，第一个手不仅能让设计和代码之间可以互转设计稿，还能转代码，代码也能反向转设计稿。另外设计师呢，可以用来提升自己的设计效率， 产品经营呢，也可以为了快速应对想法而实时的看到效果。那前端人员呢，可以告别 u i 还原的繁琐工作，它能让独立开发者一个人也能做出专业的产品， pixel 这个国产设计软件真的值得一试。 ok， 那 就是本期视频的全部内容了，我是小刘，我们下期再见。
1.7万程序员晓刘
04:52查看AI文稿AI文稿当年 skych 的出现，干掉了 ui 设计师手中的 pot shop， 所有 ui 设计师惊呼，这才是属于我们的工具。不过里面有一个时代背景，就是 ios 七的发布， ios 七让整个 ui 设计界从你雾化进化到了扁平化。 为什么说是进化呢？因为他让 app 的制作难度至少减少了百分之四十，已让 ui 设计师的门槛降低到招聘信息里边，已经没有了必须手绘这道门槛了。关于这个话题说来话长， 我们有机会再聊，那么我们收回斯盖去，他对于卫头的处理能力还是很差的，所以 rs 七之后才真正的发挥了他的实力。可是现在时代又变了， 这个马的出现又让设计师们喊出当年的那句话，这才是我们想要的工具。最近几年，国内的工具开始日渐被资本和市场认可，比如今天我们要讲的主角 pickso， 它是一款国产 免费线上协同的做错工具，他和菲格玛的基因是相同的，如果公司目前还没有转菲格玛的打算，还在使用 sketch， 那我非常建议把个人项目迁移到 pixso， 来尝试一下新时代工具的魅力。我们下边来介绍一下。 相信用过 sit 或者来到比工具的朋友，一定遇到过文件管理、组建库管理、插件同步时遇到版本不统一的问题折磨我线上工具就很好的解决了这些问题。偶尔需要做一些个人项目的时候，是完全可以在 peco 上完成的。 这些新时代的工具都有比较好的内置资源，比如插件开放、组建库等等。因为 pics 是国产软件，所以国内的 ui 组建库都是非常齐全的，我们常用的微信组建， ls 组建，还有国内大厂的一些组建都有。如果你是刚刚入门的新手，可以看看这些组建，学习到很多 ui 规范的知识。这不仅让我想起当年使用 sky 在吃的时候要到处去找组建库，而且你不知道你下载的是不是最新版本。当然他们还有很多其他的库，比如我喜欢的这个扁平化的头像库，如果你是大佬的话，也可以公开自己的库，相信这里的内容会越来越多。等以后无论是设计师还是开发，都可以在这里面下载一些别人做好的 us 组件，然后拼一拼，就可以做出一个简单的 app， 一款工具，如果只是资源丰富也是没有用的，交互和功能能让你更快捷的完成工作才是重点。那要先从非法说起。 自从飞哥们推出了子母形式的组建和优化后的欧特雷奥自适应布局 skytee 的约束布局就已经显得不够用了。 奥特雷奥特的实现方式跟开发的 flax 布局非常像，设计工具无限曲径开发工具是非常好的方向， pikaso 也第一时间支持了这种方式。这种变革是实实在在的节约了工作成本。比如我做了一个卡片，把卡片做好，欧特雷奥特 然后做成组件，这样就可以无数次的调用他。但是设计师是纠结的，更改样式和布局是尝试，这时候就显示出来他们两个的厉害之处了，因为有奥特曼奥特，所以随意更改他都不会乱。如果发现组件的样式或者位置不对，可以直接改掉模板里面的内容，所有的组件都会发生变化，当然 你也可以指改子组建里面的样式，这样的话其他组建是不会发生变化的，但是 skyx 的组建只支持前者，而真正的工作场景是像飞个马和皮克所这样的，代码的开发过程也是这样的。 然后是变体，变体我想和交互言行一起说，变体就是一个组建的不同状态，比如一个按钮的多重状态，其中包括正常状态和按下，这样的话你可以把这些状态和交互打包到同一个变体里，然后调用的时候可以直接调用相应的状态，而且每次调用组 的时候交互逻辑都在，就不需要每次都做一次交互，确实非常方便。然后就是交付，之前 sky 最好的交互方式就是结合插件 pixo 自带交付的功能，只要把链接交给开发就可以，而且还能复制简单的代码用来辅助开发，也会给学习前端的设计师一个很好的入门指导。 自己画好图形，然后对照代码看一看，是一个非常不错的学习方式。因为设计最终是面向开发的，所以无论是看懂样式代码还是设计工具的逻辑越来越像开发，都是为了让设计和开发的沟通成本更低，而且这些基础学起来真的很快，一到两个月应该就入门了。 最后这个是我非常喜欢的版本追溯功能，它类似于开发的 get 功能，这样的话你可以手动制作版本，也可以无限追溯之前的版本，这样的话做起图来是非常有安全感的，而且当你的文档出现问题的时候，也可以 用这个方法去恢复，把出现问题的可能性降到最低。现在 pixo 可以导入 sky 取加 d 飞格马的原文件。不过说实话，如果你使用的是飞格马，我建议还是要再等一段时间，毕竟飞格马已经做了很多年了，而皮克搜还没有办法真正的取代飞格马。但是因为他们的基因都是先进的， 所以取代叉 d 和 sky 是没问题的。建议把个人项目和练习作品迁移到 peco， 毕竟他是免费的。那 peco 就介绍到这了。 后边我可能会做两期史亮图的科普和 ipad 史亮图工具的教学，到时候记得来看，记得关注我，我是不仅能让你的 ipad 更有用的 ipad。
1.3万哎呀思
01:54查看AI文稿AI文稿pixo ai ui 界面全流程教程来了，新手也能十分钟打造高保证 app 首页对于刚接触 ui 设计的新手而言，接触 ai 是 快速上手的最佳途径。今天我们就接触 pixo ai， 从新建画布开始，一步一步带你做出专业的 app 首页详细步骤。一、 新建画布，在 pixel 里选择移动端三百七十五乘六百六十七的尺寸，新建一个 app 项目，为设计之旅开启第一步。二、输入提示词，把专属提示词粘贴进去， 让 ai 一 次性生成完整的首页，轻松又高效。三、自动排版等 ai 生成页面后，使用自动排版工具，一键实现元素对齐， 统一元素之间的间距，让页面布局更规整。四、设置样式，建立颜色、文字组建这三大规范，并进行全聚同步，确保整个设计风格的一致性。五、 z 格系统开启八、 p x z 格，让所有元素的尺寸按照八 十六、二十四、三十二的倍数进行统一，让设计更具秩序感。六、组建精修，将按钮设置为四十八 p x 高 十二 p x 文角未输入框，添加默认、聚焦、错误三种状态，让组建细节更丰富。七、最终导出完成设计后，可以将作品导出为拼音记高清图或者 pdf 交付图，方便后续使用。这里为你准备了可直接复制的提示词， 极简现代风移动端一、 p p 首页包含顶部导航栏、搜索框、蓝蓝白主色 十二 p x 纹角轻阴影八、 p x 炸格层级清晰高保真 ui 设计 ui 设计教程 ui 设计 pixelai 零基础学设计设计干货。
70原见
00:40查看AI文稿AI文稿大厂设计师必会的毛玻璃效果， pixo 教你三步掌握它！第一步，新建一个为 iphone 十三尺寸的画板，圆角调整为四十三像素，不透明度设置为百分之二十四。 第二步，在右侧添加效果，切换为背景模糊，数值设置为一百。第三步，选中画板，在右侧继续添加效果，切换为内阴影模糊，数值设置为四，扩展数值设置为二。 最后，我们再加上相应文字与图片等元素，一个完整的毛玻璃界面就做好了。
1399Pixso协同设计
02:45查看AI文稿AI文稿用 ai 开发工具写代码，要保持一个良好的流程习惯，我在动手写代码之前，都是先会制作一份详细的 ui 界面及原型。 目前最好用的两款 ui 设计工具，一个是 figo， 一个是 pixel， 从价格角度来考虑，我认为 pixel 性价比更高一些。 从生成的效果对比来看，各有千秋吧，仁者见仁智者见智，我更喜欢 pixel 的 风格， 每一次对话都会生成一个新的版本。这里边除了 ai 本身的问题之外呢，还有一个原因就是我们在制作产品功能文档的时候，需要花很多时间，花精力做到精细， 所以在制作界面之前，我都会用大模型来生成产品的功能说明文档以及设计规范和要求。那现在国内的大模型我试了几个之后呢？还是偏重于豆包效果比较好。 最后是大家比较关心的 pico 的 收费标准，大家可以看一下， 这里边每一次对话大概会消耗一百到三百点，我这次制作一个小程序，大概对话了十次，总共生成了十个版本，消耗了一千五百积分。 还有朋友问说，呃，那我能不能直接用 ai 编程工具来设计界面？当然也是可以的，但是就目前 ai 的 能力来说呢？ 呃，会浪费你大量的时间，而且设计的整个界面的 ui 的 感觉和美观度可能达不到你的要求，相对于专业的 ui 工具来说差的太远了。因此在写代码之前，才建议用 pico 这样的工具来进行页面的开发。最最最后一个问题就是，呃，如何把 pico 设计好的作品导入到 ar 编程工具？大家看啊， 这里是有代码模式的，那你可以把整个代码通过这么一个小按钮下载下来，导入到你的开发工具里边，告诉 ar 编程工具，参考这个页面的样式和布局， 进行小程序的页面编辑就可以了。好，整个的 pixel 的 使用说明大概就是这样。
5187大白学编程
00:26查看AI文稿AI文稿使用教程，第一器，点击官网，进入主页，点击这里新建文件，也可以直接导入 sky 的吗？等文件进入工作区以后，左边是图层组建资源库，中间是画布，右侧是 属性栏。点击右上角，可以通过链接或者邮箱邀请小伙伴一起创作。点击 f 快速创建画板和尺寸，绘制任意图形都不会超出容器，还可以随意改变容器形状和圆角，添加自动布局，设置好对齐方式和编剧数值，容器内容的元素都会自适应调整，非常方便，下期继续。
9922Pixso协同设计
00:34查看AI文稿AI文稿如何制作轮播效果？首先绘制一个画板，设置画板颜色，添加文字，然后点击 pacsos 插件，输入查找关键词即可一键填充图片，然后新建多个画板，轮播图就做好了。 接下来点击右侧版面里的圆形，再点击加号，添加流程，起点连接画板，然后依次选择单机跳转到相应的画板动画，选择一入，点击右上角的播放按钮即可进行演示，还可以添加演示模型，这样的轮播效果就做好了，快用 pixo 实现交互自由吧！
451Pixso协同设计
00:54查看AI文稿AI文稿还在丛林画设计稿吗？现在用拍扣一句话就够了！进入拍扣，直接输入你的需求描述，纹身设计稿马上生成 不放心效果哦！你也可以上传参考图，或者直接选择代码类型，选择大厂通用组建库，生成结果直接对其真实项目规范。不管你做的是 app 还是后台，系统、设备类型、视觉风格都能自定义， 生成之后不是只能看。你可以直接导出工程化代码，对局部进行对话式修改， 一键转成可编辑的设计稿，继续精修。从需求到设计到代码，一步打通。不管你是设计师、产品经理还是独立开发者， ko 真的 值得你试一次！
02:07查看AI文稿AI文稿注意看，嗯，这是一个资深表单，他可以像这样随意拉伸每列的宽度，然后调换每个列的位置，还能任意的添加行和列的数量，只需要三十秒。我用的是 pixel 制作的，如果你们用飞马什么的也可以。道理都一样，在浏览器中直接搜 pixel， 然后点这个 free button 就可以开始使用了。 我们先新建设计文件，然后创建一个画板，在画板里面输入文字，然后选中画板，点击右侧的这个自动布局，并且把这里的间距和边距都清空，上下边距呢，我们设置成平时常用的就行了，给个十六。 ok， 那现在呢？我们可以看到画板已经保留了上下的编剧，我们再新建一个画板作为列的容器，给他添加上自动布局方式呢？改成纵向，然后清空编剧，稍微改个颜色，方便我们等会区分，然后把我们之前的内容拖进来，此时我们可以看到，改变外面的这个列 宽度啊，内容是不会跟随变化的，下面一步很关键，同学们认真看，选中里面的画板，把这个响应方式改成为填充容器，这个时候你再改变外面的尺寸啊，里面就跟着变化了。然后我们还是选中里面的这个内容，画 c 画微微微微微，这列就做出来了。 然后最后一步，再新建一个容器，跟之前一样添加自动布局，全选之前的内容，把它改成组件，拖到容器里面，再复制，复制，复制复制。然后选中组件，把每个组件的这个地方也改成填充容器，用插件中把文字替换一下，看看效果。 ok， 然后我们再把它复制到之前的布局里面，在表单的约束这里啊，固定宽度改为左右看就做好了，如果你还能看到这里，那一定是铁粉。再给你们分享一个厉害的，在左侧组件这一栏还有个叫做资源的分类，点开它看到了吗？ 基本上所有的大厂的组建库全都预设好了，随便点开一个，我们看到组建分类特别清晰，需要哪个直接拖进来就行，那如果这些还不能满足你， ok， 我们可以直接在下面这个入口找到资源社区， 在这里面基本上涵盖了我平时会用到的所有分类，咱们根据自己的需要找到，然后复制加修改，懂吗？那么以上呢，就是本期视频的全部内容，如果觉得对你有所帮助，还希望你能给我点赞支持，咱们下期再见。
6227赫华啊
00:35查看AI文稿AI文稿如何制作滚动一出效果？当页面有内容一出时，我们通常会勾选超出画板不显示来裁剪内容，这时就可以给这个页面添加滚动一出的效果。我们选中这个画板，在圆形面板中选择垂直滚动， 然后演示一下，看页面就能进行上下滚动了。假如我们不想这个标题跟着滚动出画面，希望他能固定在顶部。 我们回到画布，选中它，在设计面板中的约束里勾选滚动时，固定位置演示一下，就能看到标题会被固定在页面顶部了。
2.3万Pixso协同设计
01:20查看AI文稿AI文稿ios 七在全球盛行后，渐变在设计中得到了广泛的应用。今天就给大家介绍五种渐变色的应用场景，让你的作品吸金百分百。 产品设计中经常通过渐变来突出视觉中心，提升产品质感，所以这类渐变通常都是单色渐变。 我们还可以将渐变叠加在图片上，为文字留出空间的同时，还强调了视觉中心。 ui 设计中也经常用这种方法来营造主体物的氛围。使用的时候，为了保持整体风格统一，最好是使用邻近色来做渐变哦。 一段文字给它增加一点渐变，空间感就有了。再增加一点细节文字海报，那不就是一眨眼的功夫。 如果我们有两个颜色，分别添加渐变，再添加高斯模糊，最后再叠加一层皂点，效果立即升华。无论是正常还是暗色模式，都能完美配合。 两个黑白相间的角度渐变。一个颜色丰富的镜像渐变，修改他们的图层效果，再叠加在一起，一个镭射渐变就制作完成了！超酷的镭射渐变贴纸，就是这么简单！
1262Pixso协同设计
01:02查看AI文稿AI文稿现在制作这种的 ui 开屏真的超级简单，在这里只需要输入你的设计需求， ai 直接给你吐出一整套可以编辑的原文件，不仅可以一键生成设计稿，还可以让设计与开发无缝对接，一天一个斜修网站第四十四期今天介绍的网站是， 首先我们打开 pix 二点零，点击 ai 生成设计稿，输入我们的需求。在这里我们还可以选择大肠的编码，点击预览就能看到它生成的设计稿件，不过也是相当的哇塞！ 最后点击这里，一键可以转为可编辑的设计稿，里面的文字图形都是可以直接编辑的。在这里打开研发模式，点击这里，选择代码类型设计稿，一键转代码，直接打通设计和开发。这还不算完，点击这里，他居然能把代码直接还原成设计稿，并且全图层可编辑，这功能真的离谱！ 而且它跟飞格玛一样，拥有在线编辑共同创作功能，在这基础上不仅加入了大量 ai 功能，同时还支持海量插件、主键以及软件的使用，大大提升了设计效率。这一套组合拳下来，设计效率想不提升都难。
74AI小杜
