标签：产品设计 拖拉 进入 正文 margin block 覆盖 链接状态 ping
标签式导航是产品原型设计非常的形式，下面我们来看一看作者小龙是如何用四步做出标签式导航吧~
作者：小龙
工具：墨刀
【正文】
首先拉出一个矩形，去描边，颜色为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
产品设计：只需4步，教你做出标签式导航
标签：产品设计 拖拉 进入 正文 margin block 覆盖 链接状态 ping
原文地址：https://www.cnblogs.com/productcompass/p/9974810.html
