1. 程式人生 > >產品設計教程:如何用墨刀做出標籤式導航?

產品設計教程:如何用墨刀做出標籤式導航?

在這裡插入圖片描述在這裡插入圖片描述
作者:小龍
工具:墨刀
【正文】
在這裡插入圖片描述
首先拉出一個矩形,去描邊,顏色為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