一、先画导航栏的5种选中状态
- 用 矩形工具（R） 画个长条当导航栏背景，调个圆角，颜色选和支付宝差不多的浅灰色，高度大概50px就行。
- 找5个图标（推荐、理财、视频、消息、我的），可以从阿里图标库拖进来，也能自己画简易的。每个图标下面用 文字工具（T） 打上对应名字，字号12px左右，摆整齐。
.画正圆：选左侧椭圆工具（O），按住Shift拖动画出正圆，设为白色填充、无描边。
对齐首个选项：选中圆形+“理财”图标，点顶部水平+垂直居中，再和白色矩形高亮条拼接贴合。
复制并调整位置：复制4个圆形，分别选中圆形+“推荐/视频/消息/我的”图标，用同样的居中对齐方式，让每个圆对应到各自选项位置。
匹配变体：每个导航栏变体里，只保留对应选项的圆形，删掉其余四个。
- 按同样的方法，再复制4次，分别把“理财”“视频”“消息”“我的”改成选中样式，总共得到5个导航栏，必须保证每个版本的图标、文字、高亮条的位置和图层名字完全一样，不然动画会乱。
二、编组所选项
-
选中单个导航栏里的圆形+高亮条+图标+文字所有元素；
-
右键点击选中区域，直接选编组所选项（或按Ctrl+G），把单条导航栏整合成一个分组，避免元素散架。
三、合并为变体
-
按住Shift键，依次点选5个编好组的导航栏，右侧面板会显示5 selected；
-
点击面板里的合并为变体按钮，直接生成包含5个状态的导航栏组件集，完成变体创建。
![78024a9c148f20636b1e0cd72aa9688b]()
四、设置点击切换的交互（原型连线）
-
点右边面板的 原型 选项卡，切换到原型模式。
-
先点选“推荐选中”的变体，看到它边缘有个小圆点，按住这个圆点，拖到“理财选中”的变体上，松开鼠标，就会弹出交互设置框。
- 交互设置这么填：
◦ 触发方式选 单击；
◦ 动作选 修改为（这个是改组件状态的，不是跳页面的）；
◦ 动画选 智能动画；
◦ 时长调个0.2秒，曲线选 先快后慢，这样切换更顺滑。
- 按同样的方法，把5个变体之间都连上线——比如“理财”连“视频”、“视频”连“消息”，想怎么切换就怎么连，也可以连回之前的状态，实现来回切。
- 点右上角的 播放按钮，点一下导航栏，就能看到切换
然后再把导航栏变体放在支付宝底部，我们就可以得到这样的交互效果，再做一些调试。如推荐，理财，视频，消息，我的，都可以点击，然后切换到不同的页面下期我再详细的写
