Adobe XD 教學系列 0201

本日目標

做出第二個頁面,並讓兩頁產生連結。

大綱

  1. 認識左側功能列
  2. 建立新畫布
  3. 輸入文字
  4. 調整文字:大小與顏色
  5. 切換到「原型製作模式」
  6. 製作連結

認識左側功能列

我們接下來會用到左側功能列上的功能,所以先認識一下。

Adobe XD 教學系列 0202

由上到下依序為:

  • 選取物件
  • 畫方
  • 畫圓
  • 畫直線
  • 畫曲線
  • 輸入文字
  • 新增畫布
  • 視野縮放

你可能會問左下角還有2個按鈕是做什麼的?嗯,總之,它們是另一組功能。

建立新畫布

因為我們需要第2個頁面,所以要增加一個畫布。

增加畫布有2種方式:

  • 複製現有畫布
  • 建立新的空白畫布

我們今天要用的是第二種方式,做法是這樣的:

  1. 選取左側功能列的「新增畫布」功能,也就是「放大鏡」上面的那一個
  2. 介面右側會出現一籃子的選項,各種預設尺寸
  3. 選擇其中一個尺寸

為了延續上一個畫布的尺寸,我們選擇和之前一樣的「iPhone 6/7/8」。

輸入文字

網頁也好、APP也好,最基本的元素莫過於圖片和文字了。

所以我們要來學如何輸入文字,做法如下:

  1. 選取左側功能列的「輸入文字」功能
  2. 在畫布上任何一個地方點一下
  3. 輸入你要的文字

調整文字:大小與顏色

一個物件有很多屬性,位置、大小、顏色等等。

你可以從右側屬性欄位查看這些屬性,並編輯它們。

Adobe XD 教學系列 0203

文字相關的屬性,在大概中間的位置。

「文字大小」就是「書寫的對齊方式」上面的那個數字。

點選那個數字,就可以輸入你要的文字大小囉。

Adobe XD 教學系列 0204

文字的預設顏色是灰色,但你不會乖乖地用預設值,對吧?

顏色相關的屬性在下面;你可以滑動捲軸看到下面的項目。

「填色(Fill)」就是整個區域填滿的概念,可以說是顏色中最基本的屬性。

我們就是要來編輯這個屬性。

點選「Fill」左邊的色塊,會開啟調色盤,你可以在調色盤編輯文字的顏色。

切換到「製作原型模式」

原型就是要有連結,才可以在展示時做互動,不然要幹嘛?

想要製作連結,首先,你要先點選左上「Prototype」,切換到「製作原型模式」。

Adobe XD 教學系列 0205

切換到「製作原型模式」後,你會發現介面稍微有點不一樣:

  • 畫布左上角多了一個房子,是首頁符號
  • 被選的物件,原本邊緣的8個小白點,現在沒有了
  • 取而代之,被選的物件邊緣上有一個小箭頭,是連結符號

小房子,淺藍色代表首頁,灰色代表不是首頁。

XD會在你製作第一個連結時,幫你自動設定首頁。

至於這個小箭頭,用通俗的方式說,就是用來製作按鈕的;你可以透過它設定,當使用者按下它的時候,會開啟哪個頁面。

製作連結

製作連結的方法:用滑鼠拉就可以了。

選取作為按鈕的物件,把小箭頭拉到你想開起的頁面,你會看到,兩者之間透過一條線和一個小箭頭連了起來。

連結的一些特性:

  • 每個物件只能有一個連結,但每一個頁面可以被多個物件連上
  • 連結和物件一樣,可以被選取、被編輯
  • 被選的連結,旁邊會出一個對話框,有頁面切換時的種種設定
  • 你可以用滑鼠拉動連結,改變要開啟的頁面,或是指向空白處,這樣就會移除連結

Adobe XD 教學系列 0206

現在,你可以用預覽去試看看,連結的效果是不是如你預期的那樣。

今天就這樣功德圓滿囉,結束前提醒您,記得存檔。

arrow
arrow
    全站熱搜

    Frank 發表在 痞客邦 留言(0) 人氣()