恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
聊聊xiaopiu那些鲜为人知的惊喜功能(进阶篇)
0.0°
2019-09-18 原创文章 教程 举报 5123 8 7 1

小伙伴们好~ 中秋过得怎么样呀~还记得上周介绍的是原型工具中的基础效率型操作,帮助新来的小伙伴快速通过xiaopiu完成工作内容,传送门→→→「聊聊xiaopiu那些鲜为人知的惊喜功能(基础篇)」


这一篇内容就是在基础上稍微进阶一点的部分啦~!包含特色功能点与更精细化的辅助技能,马了上一篇文章的记得这一篇也不要遗漏哟~!盘点细节,查漏补缺!




进阶篇

 

一、你了解的基础编辑操作中包括这些吗?

 

1、精确调整组件间距


选中任意2个及以上组件时,在右侧面板打开间距面板,就可以输入数值精确调整组件之间的间距大小了。因为可以批量调整多个间距,修改多个列表项的间距时简直不要太爽!~

Image title




2、可视化的阴影编辑


阴影功能升级以后变得十分高级,你不仅可以通过多项独立参数来精确调整阴影样式,还可以直接在面板上可视化拖拽调整阴影效果。更重要的是,这里还内置了4种常用阴影模板,让你一键切换想要的效果哟!~

Image title

 

 


3、快捷键 Ctrl(⌘):按住可查看组件间距


除了快速选中组件外,按住「Ctrl(⌘)」还可以快速查看组件间距,并且不受集合的层级限制!

Image title

 


  

4、保持原宽高比例,快速替换已有图片


除了基础上传图片的操作外,选中图片组件时,也可直接从本地拖拽图片到图片组件上添加/替换原图哟~ 拖拽进来替换的图片保持原比例自动智能裁剪!

Image title

 


 

5、跳转外部链接


常常有用户问xiaopiu怎么实现跳转外链,来来来,方法在这里:

1、新建一个空白页面,在页面上添加网页组件,输入网址;

2、设置从其它页面跳转到这个页面就可以啦。

P.S.:在该外链页面内手动设置一个「返回按钮」,还可以实现从外链页面返回到项目原型哟!

Image title

 

 


 

二、状态与事件里的这些小细节你get了吗

 

6、返回上一页

 

你只需要在组件的事件中将跳转页面设置为「返回上一页」,就可以实现返回上一个页面的效果了,从哪里来就回到哪里去。

Tips:如果项目中有多处需要返回逻辑,那你可以把返回按钮做成一个引用组件,设置好以后直接复制到所有页面,简直不要太方便!

Image title


 

 

7、重置页面为初始形态

 

在某个页面上常常会因为用户操作改变一些组件状态,比如修改了组件文案、弹出了弹层等,但我们希望从其它页面再次跳转回该页面时,该页面能够恢复到最开始的样子。

这时候你只需要在设置跳转事件时,打开「重置」按钮,就可以满足你的需求啦!

Image title



 

8、当前页「回到顶部」的效果是这样做出来的

 

点击按钮返回顶部是很多app和网页中长页面都会用到的功能。在xiaopiu中这样的功能怎么实现呢?你只需要两步操作,第一步将按钮设置为跳转到当前页面,第二步打开「重置」按钮,ok,大功告成!~

Image title


 



三、一般人不知道的使用小技巧

 

9、这样做全局弹窗,方便又好管理

 

除了用状态,这里再告诉你一个好办法来轻松做弹层!

将一个需在多处应用的弹窗做在单独的空白页面中,页面背景设置透明度,任意需要调取弹窗的页面选择添加跳转事件就可以完成了!~绝对高效好用又方便修改!

P.S.:弹窗内记得给需要关闭弹层的组件设置「返回上一页」的事件哟! 

Image title

 


 

10、组件多个状态整体移动

 

之前有很多用户反馈,组件所有状态不能一起移动,得挨个移动,不方便~现在你可以把这样的状态组件设置为「引用组件」,这时候它就相当于一个小容器,就可以实现所有状态一起移动啦!

Image title


 



四、如何花样玩转我的个人库

 

11、基础组件库用着不顺手?行,自己定制!

 

嫌默认文本拖出来字太小?嫌矩形每次拖出来都是带背景色的?嫌线条每次使用都觉得颜色太深?没关系!基础组件库完全按照自己的需求自行定制!只要自己创建一个组件库,将自己喜欢的基础样式做好,保存进组件库就好了!操作起来跟官方基础组件库是完全一致的~!

Image title



 

12、团队共享规范

 

不是只有项目才可以协同,库也可以!做好的页面库、组件库协同给团队成员,既可以让团队统一规范,也可以一起把库打造成你们觉得最高效最顺手的组件库页面库!

Image title


 


13、组件库太多了,但不能删,能收起管理吗?

 

“创建的组件库太多了”、“团队拉我协同的库我用不上”、“存的库太多了找起来不方便”,可以通过管理库来解决!在左侧即点击「管理按钮」,将暂时用不到的库隐藏就ok啦~!

Image title


 

 



进阶篇就先讲这些啦~!下周是超级好玩的「终极篇」(含彩蛋),千万不要错过了!~你一定没有全部了解到的xiaopiu隐藏功能!

 

大家可以在下方评论区聊一聊自己最喜欢的功能,有好的意见和建议也可以在下方写出来噢!当然还可以聊聊自己做原型时用到的让人拍案叫绝的野路子操作!~



更新:2019-09-18

收藏

8人已收藏

xiaopiu

xiaopiu.com - 优雅高效的在线原型设计平台

  • 106

    作品

  • 1622

    粉丝

  • 1

    关注

  • 无缝切换工具,「Sketch 适配模式」开启快速上手新体验!
  • 高效评审 : 和团队一起在设计稿上「打点讨论」!
  • 「即时设计」又双叒叕更新啦!「团队版」让你协作、管理更轻松!
  • 「即时设计」更新啦!飞速迭代,5 大功能同时上线!

    猜你喜欢

      2019-09-18 原创文章 教程 举报 5123 8 7 1

      聊聊xiaopiu那些鲜为人知的惊喜功能(进阶篇)

      0.0°

      你确定要举报聊聊xiaopiu那些鲜为人知的惊喜功能(进阶篇)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年09月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      8
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录