手把手教学,如何做出左右切换的标签导航?

用户头像
北京/UI设计师/7年前/2250浏览
手把手教学,如何做出左右切换的标签导航?

怎样让自己的产品有一个完美的切换状态?就让我们来带领你走向高端的设计吧~~




【正文】

 




首先拉出一个矩形,去描边,颜色为D0D0D0,圆角为30大小为宽300高30,位置在X:39,Y:101,再复制这个矩形颜色改为白色FFFFFF,大小为宽68高28,位置为X:42,Y:101,拉三个文字分别是分类1,分类2,分类3,位置分别是X:55,Y:104   X:169,Y:104     X:283,Y:104文字是最顶层


拖拉出一个图片大小为宽150高90,再复制三个构成一组位置分别是X:25,Y:170    X:201,Y:170   X:25,Y:280   X:201,Y:280

这四个分别复制一组 在横向相同的距离边界外分别各放置一组



因为刚才排布有一点小问题线调整默认状态,最左侧第一组放到界面内中间,状态2把白色矩形放到中间,第二组图片移到中间,状态3把白色矩形移到最右边,第三组图片移动到中间

进入全局状态复制三个链接区域大小调整到能和白色矩形差不多就好,分别覆盖在分类1 分类2 分类3上面,进入默认状态,分类2上面的链接区域链接到状态2,分类3上面的链接状态连接到状态3,进入状态2,分类1上面的连接区域连接到默认状态,分类3上面的连接区域连接到状态3,进入状态3,分类1上面的链接区域连接到默认状态,分类2上面的链接区域连接到状态2,大功告成,搞定!




分享链接

  https://pro.modao.cc/app/UBTLClzmOM1VJcTRhmLgcmpRwJJTABP

7
阅读原文
|
举报
|
10
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI通用设计素材1
我的钱包-UI界面设计-app
【新年UI图标】影音icon
钱包ui模板
新能源APP应用UIKit
UI应用平面图标
【新年UI图标】汽车icon
智能家居中心 简约 UI设计组件库
Security Camera UI kit
UI界面 组件
3D卡通UI界面图标可爱插画免扣素
高级感金属拟物 UI设计组件库
【新年UI图标】珠宝icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
【新年UI图标】会员icon
手表表盘UI系列
UI 登录界面设计模板包
新拟态风格 UI设计组件库
【新年UI图标】秒杀icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
科技医疗透明柜UI界面设计
户外旅行飞机情侣假日出行
你可能喜欢
大家都在看
登录注册