【活動回顧 │暖身工作坊-模擬網站的操作獲得正確的使用者與市場反饋】

2022-11-25

今日的課程講師實際示範多種網頁設計功能!首先講師講述市面上常見的圖片和文字設計區塊如何製作,如:文字超出區塊範圍太多或不想呈現所有文字,便可點選「Truncate Text」,便會將超出的文字變為「...」,簡約的文字設計便躍然於螢幕上!不想一個一個點選,可直接套用主元件,子元件便會立即跟隨改變(類似更改「爸爸」,「兒子」也變的關係);相對地,若想更改子元件個別的文字及填圖,只能更改獨立的子元件才有用唷!

接著講師以某網頁範本為例模擬操作,過程中運用了許多嘆為觀止的方法:例如:點選「fix position when rolling」可以將header固定「黏」在滾動式網頁的最上方;點選「tidy up」功能並將間距設為0便可將網頁全部接起來;製作滾動式網頁或「go to top」按鈕僅須點選「prototype」功能,選取device(手機或平板型號),並將你所設計的「按鈕」以箭頭連結到想連結的頁面,便會自動跳轉!跳轉畫面除了直接呈現外也可選擇動畫模式,質感level up;將banner設計為左右滾動,須先設置一顯示區塊,接著將要呈現的圖片合併為一條,點選「clip content」便會隨著滾動將一條圖片呈現在顯示區塊內;figma也可製作地圖,利用插件「mapsicle」將地圖放入畫面中,製作原點按鈕及重新定位按鈕,可上下左右滾動重新定位的地圖便誕生了,原來figma還可以這樣玩!

講師最後提點同學們,邏輯思維對從事網頁設計,是非常重要的。唯有邏輯正確,釐清物件彼此之間的關係,套用正確的功能,才能做出理想中的網頁!