本日目標
做出第二個頁面,並讓兩頁產生連結。
大綱
- 認識左側功能列
- 建立新畫布
- 輸入文字
- 調整文字:大小與顏色
- 切換到「原型製作模式」
- 製作連結
認識左側功能列
我們接下來會用到左側功能列上的功能,所以先認識一下。
由上到下依序為:
- 選取物件
- 畫方
- 畫圓
- 畫直線
- 畫曲線
- 輸入文字
- 新增畫布
- 視野縮放
你可能會問左下角還有2個按鈕是做什麼的?嗯,總之,它們是另一組功能。
建立新畫布
因為我們需要第2個頁面,所以要增加一個畫布。
增加畫布有2種方式:
- 複製現有畫布
- 建立新的空白畫布
我們今天要用的是第二種方式,做法是這樣的:
- 選取左側功能列的「新增畫布」功能,也就是「放大鏡」上面的那一個
- 介面右側會出現一籃子的選項,各種預設尺寸
- 選擇其中一個尺寸
為了延續上一個畫布的尺寸,我們選擇和之前一樣的「iPhone 6/7/8」。
輸入文字
網頁也好、APP也好,最基本的元素莫過於圖片和文字了。
所以我們要來學如何輸入文字,做法如下:
- 選取左側功能列的「輸入文字」功能
- 在畫布上任何一個地方點一下
- 輸入你要的文字
調整文字:大小與顏色
一個物件有很多屬性,位置、大小、顏色等等。
你可以從右側屬性欄位查看這些屬性,並編輯它們。
文字相關的屬性,在大概中間的位置。
「文字大小」就是「書寫的對齊方式」上面的那個數字。
點選那個數字,就可以輸入你要的文字大小囉。
文字的預設顏色是灰色,但你不會乖乖地用預設值,對吧?
顏色相關的屬性在下面;你可以滑動捲軸看到下面的項目。
「填色(Fill)」就是整個區域填滿的概念,可以說是顏色中最基本的屬性。
我們就是要來編輯這個屬性。
點選「Fill」左邊的色塊,會開啟調色盤,你可以在調色盤編輯文字的顏色。
切換到「製作原型模式」
原型就是要有連結,才可以在展示時做互動,不然要幹嘛?
想要製作連結,首先,你要先點選左上「Prototype」,切換到「製作原型模式」。
切換到「製作原型模式」後,你會發現介面稍微有點不一樣:
- 畫布左上角多了一個房子,是首頁符號
- 被選的物件,原本邊緣的8個小白點,現在沒有了
- 取而代之,被選的物件邊緣上有一個小箭頭,是連結符號
小房子,淺藍色代表首頁,灰色代表不是首頁。
XD會在你製作第一個連結時,幫你自動設定首頁。
至於這個小箭頭,用通俗的方式說,就是用來製作按鈕的;你可以透過它設定,當使用者按下它的時候,會開啟哪個頁面。
製作連結
製作連結的方法:用滑鼠拉就可以了。
選取作為按鈕的物件,把小箭頭拉到你想開起的頁面,你會看到,兩者之間透過一條線和一個小箭頭連了起來。
連結的一些特性:
- 每個物件只能有一個連結,但每一個頁面可以被多個物件連上
- 連結和物件一樣,可以被選取、被編輯
- 被選的連結,旁邊會出一個對話框,有頁面切換時的種種設定
- 你可以用滑鼠拉動連結,改變要開啟的頁面,或是指向空白處,這樣就會移除連結
現在,你可以用預覽去試看看,連結的效果是不是如你預期的那樣。
今天就這樣功德圓滿囉,結束前提醒您,記得存檔。
留言列表