更多

    Adobe XD =得啖笑?用戶界面設計好容易

    Avatar
    呀粗
    覺得科技很有趣,努力增補電腦知識中。喜歡儲設計精美的電腦產品包裝盒。

    市價 $700 多元最平 AX Router TP-Link Archer AX10 開箱實測

    TP-Link Archer AX10 市價只為 $700 多元,是香港市場最便宜的 AX Router 之餘,更比很多 AC 舊制式都還要便宜!速度就採用 AX1500 規格,究竟有沒有「伏」?即看開箱文吧!

    非大廠都有不錯 GUI、套件頗多 TerraMaster F2-210 開箱實測

    NAS 市場看似是 Synology、QNAP 和 Asustor 三足鼎立,但其實市場上還有其他品牌。今次就和大家揭開 TerraMaster F2-210 的神袐面紗,看看它圖像豐富的 GUI 網頁介面和手機 App。

    【全民自保】防火牆封鎖 LIHKG 都唔怕 教你簡單用 WARP VPN 上連登

    網上傳出 Lihkg.com 連登被大專院校網絡及部分寬頻網絡供應商封鎖之消息,有人建議使用 WARP VPN 作為後備方案,手機經 WARP Server 連接互聯網或 lihkg.com,以下教大家如何簡單啟用。

    Adobe XD?!小編呀粗作為一個曾經活在顏文字年代的人來説,第一次看到 Adobe XD 這個軟件名字,就心想 Adobe 幹嗎要推出一個關於笑的軟件呢?(「 XD 」在顏文字 / 表情符號中是解笑的意思 XDDD )當然 Adobe XD 跟笑話、大笑之類完全沒關, XD 其實是指 user eXperience Design,因為這個軟件是用來設計網站、手機 App 等的 UX / UI(User Experience 用戶體驗 / User Interface 用戶界面),簡單來説即是網站 / App 的介面設計、裡面有甚麼圖像、動畫效果、各版面的擺位如何、按某個鍵會連去哪個頁面,諸如此類有關用戶體驗的方案設計。我本身沒有涉獵 UX / UI 範疇,一直都覺得這門學問極度艱深,不過看完 Adobe XD 的影片後發覺,咦,原來都是 Drag and Drop 那麼易操作啊!

    Adobe XD 能夠方便大家設計 UX / UI。
    Adobe XD 能夠方便大家設計 UX / UI

    Adobe XD 功能簡介

    純文字解釋好難明白,大家看看官網的影片,就知道 Adobe XD 的操作是如何簡單了。如果你懂得用 Microsoft PowerPoint ,其實也應該很易上手,感覺操作都是一樣那麼直覺~一開始要先選擇裝置的版面大小,設計是供 iPhone 7 / 8 / X 、 iPad 、 Android 手機、還是電腦用呢?因為每部裝置的屏幕大小,以及解像度都不同。

    選擇裝置版面。
    選擇裝置版面

    設定完成後就可以把電腦裡的圖片,直接拖拉到 Adobe XD 的畫面,那就可以把圖片加進去設計啦。之後你可以插入文字、更換字體和顏色、畫出矩形或圓形的版塊、加插按鈕、調整各元素的大小及位置、增添更多頁面,一步步豐富手機 App / 網站的內容。

    [row][double_paragraph]

    一次過展示所有頁面。
    一次過展示所有頁面

    [/double_paragraph][double_paragraph]

    把圖片拉進去,變成頁面背景。
    把圖片拉進去,變成頁面背景。

    [/double_paragraph] [/row]

    [row][double_paragraph]

    更改字體。
    更改字體

    [/double_paragraph][double_paragraph]

    拖拉元素,搬到你想要的位置。
    拖拉元素,搬到你想要的位置。

    [/double_paragraph] [/row]

    [row][double_paragraph]

    調整頁面元素的大小。
    調整頁面元素的大小

    [/double_paragraph][double_paragraph]

    提供 Apple、Google 和 Microsoft 作業系統的 UI Kit。
    提供 Apple 、 Google 和 Microsoft 作業系統的 UI Kit。

    [/double_paragraph] [/row]

    做好美術方面的設計和內容後,就可以把不同的頁面連結起來囉~例如你想用戶在主頁按下「價目表」按鈕,就能連到價目表的頁面,那就只需從「價目表」按鈕拉出一個箭咀到價目表頁面,便完成連接了,非常簡單。或者你想用戶從主頁向左撥,就到價目表頁面,其實也是一樣拉箭咀,然後在選項選擇「左撥」的動作就可。

    [row][double_paragraph]

    用箭咀連結不同的頁面。
    用箭咀連結不同的頁面

    [/double_paragraph][double_paragraph]

    可選擇用甚麼動作,如向左 / 右撥,就會連到下一頁面。
    可選擇用甚麼動作,如向左 / 右撥,就會連到下一頁面。

    [/double_paragraph] [/row]

    完成設計後,你可以建立一條預覽連結,分享給朋友同事看。當他們點進連結,就可以看到整個 App / 網站的流程(即是剛才所拉出的箭咀連結),試試操作 App ,看到文字的字體、顏色,以及可以留言提供意見。對公司團體合作,可謂十分方便。另外,用戶亦可下載 Adobe XD 的 iPhone / Android App ,直接在手機體驗自己設計的 App 喔。

    [row][double_paragraph]

    同事可以留言,並指示該留言是與哪個頁面,哪個位置有關。
    同事可以留言,並指定該留言是與哪個頁面、哪個位置有關,方便跟進。

    [/double_paragraph][double_paragraph]

    下載 Adobe XD 的手機 App,就直接在手機預覽體驗你的作品了。
    下載 Adobe XD 的手機 App,就直接在手機預覽體驗你的作品了。

    [/double_paragraph] [/row]

    好,嗶哩吧啦介紹了那麼多功能,我都很急不及待想下載 Adobe XD 來玩,不過 Adobe XD 也出了接近兩年,為何我現在才發布這篇文章呢?其實因為 Adobe XD 最近有新版本了,上述功能依舊都有,但就加進一些更便捷的功能。為了讓大家先了解 Adobe XD 是甚麼,就先寫下這篇文章~想了解新版本的更新和如何下載永久免費版 Adobe XD,請按這裡,謝謝 XD

    下載 Adobe XD PC/Mac 版: 按此
    Adobe XD 手機應用程式

    Android 版:按此
    iOS 版:按此

    Source:Adobe

    您會感興趣的內容

    相關文章