UI设计师宝藏提效技巧,10个隐藏Pixso神技能!

在用户的存量时代,产品设计不仅要保持高效的迭代速度,抢占新兴应用市场,更要不断打磨产品细节,提供更加极致的用户体验。在「质」与「量」的双重需求之下,设计师该如何摆脱加班的命运呢?

协作设计软件的变革,带来了全新的生产和协作方式,规范组件库、自动布局、属性复制、设计插件、组件替换等功能的上线,带来了很多行之有效的提效方法。

本期内容,以协作设计软件Pixso为例,给大家总结了10个设计提效技巧,都是日常设计中高频使用到的功能,帮你告别繁琐的操作步骤,早日摆脱无尽的加班痛苦。

下面,就一起探索这些设计中的宝藏技巧吧!

01.构建「组件化」思维

组件化思维是通过对功能和视觉中元素的拆解、归纳、重组等,并基于可复用的目的,形成规范化的模板。组件化思维可以避免一次性设计,同时保持团队设计的一致性,让设计师专注到业务体验的提升。

组件库

与传统的组件库相比,Pixso组件库最大的优势就是协作属性,它可以降低组件传输和同步的成本,同时与设计软件深度集成,让组件库的创建和复用都更加便捷。

完成规范组件库的设计后,只需要选中对应的组件,在「右键」菜单栏中选择「创建组件」,将组件上传到「本地组件库」中,即可在文件内部复用。

想要在其他文件或团队中复用,可以点击Pixso管理资源库内的「发布」按钮,将组件上传到团队组件库。也可以点击「管理资源库」,查看团队所有组件资源,可以更具需求开启组件库,方便组件的高效管理。

后期需要创建新的项目,可以点击Pixso画布左侧「组件」按钮,通过简单拖拽的方式,使用规范组件像搭积木一样搭建页面,减少页面搭建的成本。也可以使用组件搜索功能,高效获取所需的组件。

样式

在设计文件中,颜色、文字、字号、边距、效果等,都可以称之为样式。我们可以通过创建样式的方式,形成单一样式的设计规范,并在其他设计元素中高效复用。

这里就以单一颜色样式为例,给大家演示Pixso样式的创建方法:

Step1:选中需要共享的样式;

Step2:选择对于属性面板「样式」按钮;

Step3:点击创建样式;

Step4:输入对应的样式名称,如蓝色。

完成样式的创建后,即可在其他元素上复用:

Step1:选中想复用样式的对象;

Step2:点击「样式」按钮;

Step3:选中目标样式,点击复用。

我们可以看到,当选择任意组件和元素,右侧功能面板对应属性的右侧就会出现「样式」按钮,点击就可以完成对应属性样式的创建和复用啦~

02.组件库替换功能

一套完整的设计方案,通常会包含多种配色模式,如「深色」和「浅色」模式等,假如想要创建一套新的配色,传统的方式是将页面的配色进行逐一替换,过程繁琐还容易造成错漏。

使用Pixso组件库替换功能,只需要创建一套新的配色方案,就可以一键替换对应组件库,实例中的组件、样式、配色等也会自动同步,免除手动替换的困扰。

下面就给大家演示一下:

Step1:打开「组件」面板;

Step2:点击「管理资源库」图标;

Step3:选择想要用于替换的组件库;

Step4:点击「替换」按钮,等待替换完成即可。

03.组件变体

组件变体是把多个引用组件合并为一个整体,通过对属性的设置制作可以切换不同状态的超级组件。在一些特定场景下,组件需要在不同操作逻辑下呈现不同形态,就要使用组件变体功能。

Pixso组件变体的创建非常简单,例如设置面板「按钮状态」的组件,只需要通过以下5步:

Step1:绘制不同形态的按钮,将按钮复制出来;

Step2:选中某个按钮,点击右键选择「创建组件」,将三个按钮分别生成组件;

Step3:依次选中三个组件,点击右侧「创建变体组件」,然后将组件命名成它们对应的状态;

Step4:点击变体栏右侧的「更多」按钮,选择「新增属性」创建变体属性。然后选中组件,依次修改它们的属性状态(如开启、关闭属性);

Step5:将创建的组件集拖拽到界面中对应的位置,组件就创建完成啦。

04.一键填充多张照片

设计的过程中经常遇到多个占符的情况,不少小伙伴还在一张张的填充内容,或者将图片拖入Pixso在逐一填充。使用快速填充功能,只要按下「Ctrl+Shift+K」选中多张图片或动图,就可以依次填充图片啦。

如上图所示,光标下方会显示剩余填充的图片数量,每填充一张图片数字逐一变小,清晰呈现剩余填充的图片数量。

05、自动布局

自动布局能够建立高效的设计规范,在增加、删除、修改某些元素时,无需调整相邻元素位置和尺寸,并自动适配成为非常好的状态,避免牵一发而动全身的状况。

添加/删除

例如APP菜单栏的设计,需要添加或删除一个icon,使用Pixso自动布局功能,选中icon添加「自动布局」选项,对齐方式改为「均匀分布」,icon就会自动适配到栏目中,方便后期随时添加和删除。

响应式布局

遇到不同屏幕尺寸的适配,需要对一些元素做拉伸处理,如何让父级元素跟随规则自适应变化呢?

我们可以为页面添加自动布局,选择Pixso自动布局左上角对齐方式,将分布方式改为均匀分布,上下方内嵌的两个父级就会跟随自适应,不用手动进行逐一适配。

当你对文字进行新增或删除后,文本框的高度变化也会被视为拉伸,卡片也会跟随自适应变化。

绝对定位

遇到消息通知、播放按钮等设计,需要把对于元素插入自动布局中,元素一般会自动吸附在现有布局,按照现有布局关系自动排列,很难灵活调整位置。

这时候我们可以使用Pixso绝对定位功能,将对应元素拖入自动布局内,就会触发「绝对定位」按钮,点击即可不受现有布局约束,任意摆放到任意位置。

06.自动填充样式

在同一个设计界面中,通常会有很多相同的设计样式,这些样式可能涵盖数十个属性,如果每个图标都重新设置属性,必然造成大量重复劳动。

使用Pixso复制属性功能,元素包含的文本属性、描边属性、效果属性、填充属性等,可以一键复制元素的所有属性,并粘贴应用到其他设计元素,原本需要几步甚至几十步才能完成的工作,只需要复制、粘贴即可完成。

复制属性:Ctrl+Alt+C;

粘贴属性:Ctrl+Alt+V。

07、快速选择元素

面对一些大型设计项目,因为图层的层级过多,想要选中下层的元素,通常需要反复双击,面对元素的批量调整时,这种选中方式就很费力。

使用Pixso,可以按照Command的同时用鼠标点击,这样可以直接选择最里层的元素。但如果你想选中不是最里层,而是倒数的N层,建议尝试使用以下快捷键:

选择下层:回车键

选择上层:Shift+回车键

选择下一个:Tab

取消选择:Esc

08.快捷键指南

相信很多设计师一定看过一些快捷键操作,但是实际操作起来总是让人摸不着头脑。可以点击Pixso菜单栏选项中的「快捷键指南」按钮,即可打开快捷键面板,清晰呈现所有的快捷键内容,帮助大家更加高效的设计。

你也可以点击最右边「自定义快捷键」,即可在面板自定义设置快捷键,适配用户个性化使用需求。

09、社区/插件

优秀的产品设计,需要学会借助优质的素材资源。Pixso资源社区集成腾讯、阿里、百度、京东、华为、微软、苹果等大厂资源,涵盖APP设计、网页设计、UI组件、图标、插画、线框图、矢量图标等,都是开源的免费矢量图资源,所有用户都可以任意使用。

你可以在「资源社区」找到合适的模板,点击「复制」或「调用」,也可以点击编辑器左侧「资源」栏目,将资源拖拽到画布内使用。

Pixso资源社区还集成覆盖产设研全流程的插件,在「插件广场」点击安装,拓展设计更多可能性。

10.历史版本管理

随着项目的不断向前推进,就会衍生出大量的历史版本文件,遇到一些特殊的定稿需求,版本会不断堆积,管理起来非常麻烦。

以上就是10个设计提效技巧,尤其是设计系统的构建、自动布局等功能,搭配上Pixso的协助能力,对效率的提升不止一点点。同时也带来很多好用的宝藏功能,帮助用户快速产出设计解决方案。

THE END
1.如何设计APP的简单UI界面实践操作pixso设计app界面因为公司没有UI工程师,由于开发做的APP界面实在太丑,作为一个测试看不下去,决定亲手做一版UI给开发,尝试过后,发给问朋友看着怎么样,结果所有人回复都是:“丑”,太扎心了。 总结:没有艺术细菌的人不配干UI设计 我的UI设计失败之路: 使用软件:Pixso(个人使用免费) https://blog.csdn.net/leap__frog/article/details/139024127
2.Pixso在线UI设计工具一站式在线ui设计协同工具,集合ui设计师必备强大设计功能,拥有矢量网格、布尔运算、样式创建、智能排版等高阶功能,真正实现高保真的ui设计。https://pixso.cn/ui-design-collaboration/
3.Pixso(UI设计工具)Pixso(UI设计工具)软件Pixso是一款多功能的UI设计工具,适用于设计师、开发者、管理层、产品经理等多种场景。通过Pixso,可以非常便捷地进行UI设计,网页、App、小程序等都可以进行设计。图形式设计方式,简单便捷,大大降低的行业门槛。完成的UI设计可一键生成代码,能够在开发中带来很大的帮助。 Pixso安装步骤 1、下载安装程序并打开,点击自https://www.sxiaw.com/down/24688.html
4.Pixso官网Pixso是一个一站式的数字化团队协作工具,支持UI设计、UX设计、原型设计等多种设计需求。Pixso具备智能UI设计工具、高保真原型、链接交付、在线白板等多种功能,帮助团队协作更加高效。Pixso还拥有丰富的社区资源和设计系统,让设计无需从0开始。Pixso支持多人实时协作,成果一键交付,用户问题实时反馈,数据私有化等多种特性https://tools.voidke.com/sites/7767.html
5.UI设计软件Pixso即时设计和MasterGo个人体验UI设计软件Pixso、即时设计和MasterGo个人体验 前言 最开始是使用的即时设计,后来又体验了MasterGo和Pixso,这三者之间各有利弊。 三者对于普通用户都是免费的,也没有什么硬性的限制。 功能对比 这三者的功能基本一致。 Pixso把设计和原型分开了,如果选择原型会内置一些组件方便使用https://cloud.tencent.com.cn/developer/article/2432250
6.pixso官网,在线协同产品UI设计工具别摸鱼导航设计师网址导航网站原型设计工具界面设计设计工具 pixso,在线协同产品UI设计工具 标签:原型设计工具界面设计设计工具 3+3-131+ 链接直达 ?>1.免费ai视频生成+写作(可联网)?>>2.免费ai视频神器推荐3.免费ai写作绘画 pixso官网,在线协同产品UI设计工具 https://biemoyu.com/sites/pixso.html
7.Pixso官网Pixso是一体化设计协作工具,助力产研设团队制作原型,UIUX设计,视觉设计,低代码交付时获得更轻松流畅的工作体验,让团队协作更高效。支持https://www.hbdrxws.com/p-72234.html
8.一站式设计神器Pixso宣布个人免费!挑战Figma地位?优设网4大 UI 设计利器 大家最关心的肯定还是,这款软件的设计体验能否与 Figma 一战。如果说团队实时协作提高了沟通效率,那这 4 个功能就是实实在在提高设计效率的利器。 自动布局顾名思义,无论是增加还是减少界面,Pixso 都会自动适应,类似于观看响应式网页般丝滑的体验,设计师再也不用因为文本框过长,一个个修改组件https://www.uisdc.com/pixso
9.UI软件怎么做轮播图?Pixso无需代码高效演示!文章/经验设计轮播图是一种十分常见的页面形式,轮播图常常出现在页面首页,用来作为重要信息和广告的展示。但是对于很多UI设计师来说,制作完整体的设计稿后,轮播的区域不能直观展示,稿件交付时最终效果也不够直观。 如何在UI设计稿内生成轮播效果,让演示与交付呈现更加直观,为大家推荐一个UI设计神器——Pixso协同设计。 https://www.zhisheji.com/jiaocheng/1665680.html
10.Pixso官网,一个一体化设计协作工具,旨在助力产研设团队制作原型Pixso(官网),一个一体化设计协作工具,旨在助力产研设团队制作原型、UI/UX设计、视觉设计以及低代码交付,让团队协作更高效 Pixso是什么? 一个一体化设计协作工具,旨在助力产研设团队制作原型、UI/UX设计、视觉设计以及低代码交付,让团队协作更高效。 该工具支持sketch和figma格式,提供了高保真原型、交互式动画演示功能https://www.8kmm.com/sites/5973.html
11.Pixso原型设计优秀新媒体导航Pixso是一体化设计协作工具,助力产研设团队制作原型,UI/UX设计,视觉设计,低代码交付时获得更轻松流畅的工作体验,让团队协作更高效。支持Sketch,Figma格式。 这是一个在线设计网站,你不用下载安装,打开网页就能使用,对于随时有可能改稿的设计师来说,文件自动保存云端,随时都能在线设计一定是个大好消息! https://123.meibp.com/10009.html
12.Pixso协同设计软件Pixso下载v1.8.0官方版在UI设计时: Pixso作为一款UI设计软件,最核心的功能当然是UI设计! Pixso属于一款小而美的UI设计工具,设计功能全而精,不会过于复杂全面而难以入手,但又能很好的包含UI设计工作时所需要的功能。 钢笔工具 | 相较于传统的AI软件更加灵活,可以直接增加无方向路径。 https://www.wmzhe.com/soft-72734.html
13.设计工具Pixso设计工具产品入口:https://miro.com/assist/Visily设计平台,帮助从简单的文字提示中生成详细的流程图和图表,将纸上草图转换为专业的可编辑数字版本。 UI设计 6月前 Unicorn Studio:一款基于WebGL的设计工具 一键给图片或视频加炫酷效果 UnicornStudio是一款基于WebGL的设计工具,旨在帮助用户打造引人入胜的网页体验和视觉资产https://www.chinaz.com/tags/787618.shtml
14.PixsoPixso原型/交互设计免费试用评价Pixso是一款基于浏览器的协作式UI设计工具,支持多人协同,可以轻松完成UI设计、原型设计、设计交付、在线协作和资源管理等多个设计步骤,真正实现一站式设计交付。 展开> 产品特点与优势: Pixso是一款基于浏览器的协作式UI设计工具,支持多人协同,可以轻松完成UI设计、原型设计、设计交付、在线协作和资源管理等多个设计步https://www.jingxuanxing.com/space/388/
15.InChina成为民族骄傲!插件ui设计云储存产品设计组件库设计组件是Sketch最吸引我的地方,我以前在学习UI设计的时候尝试过Photoshop,那种批量修改的痛苦让我每次想起都感到难受,所以自从尝试Sketch以后就彻底放弃Photoshop了。 组件的建立比较简单,但相比Sketch,即时设计、Mastergo和Pixso都加入了一个变体的功能,这真的很棒。因为在Sketch里当一个组件有不同状态的时候,我需要建https://www.163.com/dy/article/H6MQ61LH0511805E.html
16.figma是什么?国内UI设计师必备软件!在商用字体方面,Pixso内置了国内设计师常用的大多数商用字体,例如思源黑体、站酷快乐体、江西拙楷体、OPPO SansHarmonyOS等,每个字体包含多个字重,你也可以任意安装自己需要的字体,满足不同场景下的设计需求。 3、专属企业服务,数据更加安全。 除了产品性能上的优势,Pixso还是国内首家推出“企业版”的UI设计软件,在数据https://hea.china.com/article/20230208/022023_1220287.html
17.PixsoAl设计师在线协同设计工具官网入口及简介Pixso AI是国产在线协同设计工具Pixso中的一项重要功能。Pixso AI致力于为设计师提供一体化的设计解决方案。 Pixso AI具备AI设计探索、白板、原型、UI/UX设计、交付、管理等全栈式能力,覆盖产品设计的全流程,使设计工作变得更加高效和智能。 AI绘图:Pixso AI具备强大的AI绘图功能。无论是视觉探索、素材配图还是元素生成https://www.aieva.cn/sites/1335.html
18.Pixso:一站式完成原型设计交互与交付AI设计Pixso致力于提升数字化团队协作效率,通过一站式完成原型、设计、交互与交付,打通产品、设计到研发的工作链路。 Pixso官方网址入口:https://pixso.cn/ Pixso主要功能特点介绍 一站式完成设计流程: Pixso能够覆盖产品原型、UI/UX设计、原型交互、设计交付等全流程,让用户无需切换多个工具,即可完成整个设计项目。 实时https://ai.ipkd.cn/sites/pixso.html
19.PixsoPixso官网 一代UI设计工具 网站服务:在线图片工具,在线工具,图片处理,用户体验和易用性,跨台协作与云端存储,实时同步与迭代管理,安全与隐私保护,多功能一体化设计。 Pixso简介 pixso是一体化设计协作工具,助力产研设团队制作原型,ui/ux设计,视觉设计,低代码交付时获得更轻松流畅的工作体验,让团队协作更高效。支持skethttps://www.openi.cn/sites/3270.html
20.PixsoAI工具导航当面对一个复杂的设计项目时,通过Pixso链接邀请团队成员,进行多人云端协作设计,实时同步字号、边框、颜色等各种细节。 ? 智能UI设计工具:快速上手专业技能 传统产品,往往要多个工具协作才能预期效果。而Pixso自带组件变体、自动布局等专业设计工具,支持UI/UX设计和原型播放,一体化完成高保真产品设计。 https://www.aig123.com/sites/2907.html
21.Pixso协同设计软件下载Pixso协同设计软件1.8.0官方下载在UI设计时: Pixso作为一款UI设计软件,最核心的功能当然是UI设计! Pixso属于一款小而美的UI设计工具,设计功能全而精,不会过于复杂全面而难以入手,但又能很好的包含UI设计工作时所需要的功能。 钢笔工具 | 相较于传统的AI软件更加灵活,可以直接增加无方向路径。 https://soft.3dmgame.com/down/199128.html
22.原型设计工具——Pixso严宇亮Pixso 定位于产品设计协作一体化工具,能一站式完成原型、设计、交互与交付,打通产品、设计到研发的工作链路,全面覆盖产品原型、UI/UX设计、原型交互、设计交付全流程,浏览器即开即用。 Pixso的核心特点 快捷的图形绘制:Pixso内设有许多快捷键方便用户一键绘图,也可以导入自己的图片,亦或直接点击图片类型,都可以快捷地https://www.cnblogs.com/yyl66/p/18201746
23.Pixso协同设计软件下载Pixso协同设计软件免费版v1.0在UI设计时: Pixso作为一款UI设计软件,最核心的功能当然是UI设计! Pixso属于一款小而美的UI设计工具,设计功能全而精,不会过于复杂全面而难以入手,但又能很好的包含UI设计工作时所需要的功能。 钢笔工具 | 相较于传统的AI软件更加灵活,可以直接增加无方向路径。 https://www.crsky.com/soft/328917.html
24.什么是UI设计?UI设计需要学习哪些软件?UI设计技能,使用 MindMaster 绘制 UI 设计软件 目前可用来完成 UI 设计的软件比较多,大概可以分为 3 类: 纯UI 设计软件:Sketch、Adobe XD 综合型 UI 设计软件:Figma、Pixso 辅助UI 设计软件:Zeplin、Principle、Ps、Ae、C4D 等 纯UI 设计软件,可用来完成大部分 UI 设计工作,在平时的设计练习或个人项目的场景没https://www.jianshu.com/p/8064ce967a28
25.PixsoAI—潮运营Pixso AI 中国 0415 AI设计工具 pixso是一体化设计协作工具,助力产研设团队制作原型,ui/ux设计,视觉设计,低代码交付时获得更轻松流畅的工作体验,让团队协作更高效。支持sketch,figma格式。 标签:AI设计工具figmapixsoui设计实时协作替代sketch 链接直达手机查看https://www.chaoyunying.com/sites/10683.html