iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

網頁 UX / UI 攻心術|30天練成 Figma、Axure RP 以及 UX 心法系列 第 7

Day7. 使用 Whimsical 繪製低精度 Wireframe

製作低精度原型時,紙、筆、及便利貼是相當方便的工具,但許多人是手繪苦手,畫出來的線歪歪斜斜,實在很難專注在原型構建上。用紙、筆、便利貼的好處是不用花太多心思在工具的學習上,用數位工具的好處是,可以較為工整地製圖,且當有多項類似重復的地方,可使用方便的復製貼上大法。

究竟,有沒有兩全其美的辦法呢?有的,今天我們就來介紹一個網站-Whimsical。他是一個易於構建低粗度框線原型的工具,已內建一些常見的元件,經過簡單的點按就可快速勾勒出畫面。

首先申請帳號並登入,並新增一個 Wireframe 類型的畫布:
https://ithelp.ithome.com.tw/upload/images/20210922/20105528wGprHNBD0e.png

接著便會看到畫面,主要分三塊: 1. 導航列 2. 主要工具列 3. 畫布
https://ithelp.ithome.com.tw/upload/images/20210922/20105528tg7pEY10cj.png

最上面工具箱類型,會隨不同選擇下方出現相關的工具。我們今天的練習都只會用到 Wireframe 工具箱,所以點選 Wireframe。
https://i.postimg.cc/4dMQW3Lw/D7-1-toolbar-4types.gif

Frame工具可選擇媒體,我們要做的是網頁,故拉 window 視窗進畫布就可以了 (手機只是為了展示給大家看)。
https://i.postimg.cc/Xvs8yL9R/D7-2-toolbar-frame.gif

以下我們就以此 frame 為底,試著畫出 Instagram 的登入頁面來做練習。會用到的元件有 button, text field, 及 image。

  1. button
    a. Whimsical 的按鈕有三種類型,主按鈕(實心)、次按鈕(空心)、及超連結式按鈕。幾乎所有元件的顏色、大小、對齊都可以做可變更。
    https://i.postimg.cc/JhHnb4XR/D7-3-toolbar-button.gif

    b. 按鈕也可置放 icon ,Whimsical 提供了一個方便快速尋找並置放 icon 的功能 (雖說如此,但其實低精度原型,icon 只是輔助好懂,千萬別花太多時間在 icon 設置上)
    https://i.postimg.cc/YSD6S9Hk/D7-4-toolbar-put-Icon.gif

    c. 萬一設置按鈕類型時設錯了怎麼辦?沒關系,三種類型的按鈕,也可快速互相轉換。
    https://i.postimg.cc/GpLK2VTP/D7-5-toolbar-buttons-change-Type.gif

  2. Image: 放置圖片,只要拉一個圖框進來表意即可
    https://s3.us-west-2.amazonaws.com/secure.notion-static.com/c83ae79b-d707-49fe-a1dd-6cefb160c151/toolbar-imgFrame.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20211201%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20211201T150827Z&X-Amz-Expires=86400&X-Amz-Signature=252275058e7fc8378c6ba8860764334dea861574a03799ce07164952e765aab0&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22toolbar-imgFrame.png%22&x-id=GetObject

  3. Text Field: 文字輸入框,預設不包含 Label,若有需要也可叫出
    https://i.postimg.cc/QxcJqhpk/D7-6-toolbar-txt-Field.gif

以上都了解了之後,我們就可以善用所學,實際做出 IG 的低精度 Wireframe。
https://ithelp.ithome.com.tw/upload/images/20210922/201055287asOiCV912.png

完成之後,便可將此 Frame 輸出成 PNG 檔。

以此類推,便可將整個 Login 的 Wireframe 都依樣畫葫盧出來了。
https://ithelp.ithome.com.tw/upload/images/20210922/20105528kcZuAn0Kn5.png


上一篇
Day6. 常見原型種類及製作方式
下一篇
Day8. 使用 Invision 搭建低精度互動原型
系列文
網頁 UX / UI 攻心術|30天練成 Figma、Axure RP 以及 UX 心法30

1 則留言

0
alincode
iT邦新手 2 級 ‧ 2021-11-13 09:23:18

好多圖都壞了,有點可惜。

已重新上圖並修復,謝謝你的提醒 :)

我要留言

立即登入留言