banner Menu

RWD網頁設計、UI設計、UX開發

  1. 首頁
  2. 電腦課程
  3. UI網頁-RWD網頁設計

HTML + CSS + JAVASCRIPT + 手機UI設計 + UX開發流程

本課程針對適應各種不同介面,進行UI設計教學,並透過RWD觀念學習網頁設計語法,並透過UX專案開發流程帶領同學完整製作一專案作品。 如果你喜歡,最後也可以把建置好的RWD網站,透過一個簡單的軟體,瞬間變成APP上架!

10堂 I 30HR I 單科價16,000 元 I (建議加修Photoshop影像處理軟體)

UI、RWD網頁設計

隨著智慧型手機的普及,網頁技術近年來也開始重視手機上的視覺效果了,為了讓一個網站能適應各種不同介面之螢幕大小,RWD的網頁製作觀念便成為目前的最新趨勢。

響應式網頁設計(Responsive Web Design)

簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項開始於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)。2012年後被公認為是日後網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。

RWD網站的優點:

1. 一個網站能隨不同螢幕大小調整內容。

2. 提升SEO網頁排名(google喜歡):優化你的網頁能讓你的網頁容易在搜尋引擎找到。在SEO這一方面除了大勝app外,而相較於獨立網址的手機版網站,自適應網頁可以避免重覆的內容、保持網頁原本的連結,因此自適應網頁設計的原理與使用習慣都有利於於SEO

3. 開發成本與時間比APP低:APP必須開發iOS版及Android版兩版本,任一版本皆至少個花費數十萬元建置,加上開發及審核上架時間相當冗長,相對RWD網站開發容易快速,建議一個等於同時建置網站、手機、IPAD介面。

4. 不需下載APP就能使用:這是所有手機版網頁相較於手機APP的最大優勢。APP必須被下載,若要更新,開發端必須重新審核過後,用戶才能更新。相對RWD網頁,只要管理者更新網站,每次連上網頁都會是最新版本。

5. 維護成本比APP低:APP完成之後要不定期需針對新版本測試,才能確定APP在新手機上能運作順暢。以目前新手機上市的頻率來看,開發端需要一直不斷測試、更新。

6. 品牌識別形象統一:同一網站適用於各種裝置,自然不需要針對不同版本設計不同視覺效果。

7. 利於分享:APP沒有網址可以分享,但網站可以分享

UX專案開發流程 + UI介面設計 + RWD網頁技術 = 專業UI/UX介面設計師

本課程透過實際案例操作,由最簡單到最專業的教學流程,並透過有趣實例的學習方式,快速建構自己的網站,讓你快速上手做中學。

UI/UX設計流程
依照業界開發UX及UI的實際流程,從實務中學習:
1. User Story 使用者情境分析
2. Functional Map 功能關係圖
3. Flow Chart 操作流程圖
4. UI Flow 介面操作形式
5. Wireframe 線稿(版型設定)
6. Mockup 彩稿(屬性設定)
7. Prototype 介面原型

UI設計知識
在UI開發過程,你會面臨到許多『設計』的課題,包括:
1. Symbol符號產生(單位形)
2. Layout版面設計(Grid網格系統、RWD觀念及實際執行技術)
3. Color 快速色彩搭配原則、網頁文字選擇技巧

UI/UX設計技術
1. Photoshop切圖:怎麼切圖才是工程師要的?什麼格式、尺寸的圖才可以被完美執行?
2. CSS語法實作:透過Dreamweaver編寫有效的CSS屬性設定,並瞭解RWD尺寸彈性的方式
3. HTML實作:透過Dreamweaver的操作,逆向學習HTML,讓語法不熟的同學能輕鬆上手。
4. Spry、Ajax:透過Dreamweaver來了解最炫的動態網頁,如何進行互動;進而暸解互動語法。
5. SEO觀念實際應用於網站製作上