30個方法教你如何用A/B測試改善網站的UI設計!!(1)

30個方法教你如何用A/B測試改善網站的UI設計!!(1)
30個方法教你如何用A/B測試改善網站的UI設計!!(1)

身為UI 設計師~知道如何使用A/B測試來改善網頁設計嗎?今天的文章依次交給你!!(1)

UI 設計的知識網站「GoodUI.org」整理分享了許多已經 A/B 測試的 UI 設計,先幫忙把常見的網頁排版都測完,幫助 UI 設計師/網頁設計師們省下許多功夫!

什麼是A/B測試

A/B 測試(A/B Test)運用了統計學的原理,顧名思義就是眼前有「A 版」與「B 版」兩種方法,為了測試哪種方法能獲得更好的市場反應,將 2 種版本同時上線,將消費者導入 A 或 B 版網頁做測試。

A/B 測試的優點在於可以得到實際的數據,而非依靠主觀意見來決定網站的架構與UI 設計,也能不落傳統思維的俗套。只是各個版本需運行一段時間,待累積足夠的數據,才能確保測試的準確性,也需耗費不少成本。

範例1:嘗試使用單欄排版取代多欄

多欄式排版的 UI 設計有分散頁面焦點的風險,而單欄式排版可以更好地安排內文敘述,同時從上而到下引導讀者的視覺動線也更加直覺,也能避免於閱覽者分心。最後可以安排醒目、富有號召力的內容做結尾。

範例2:在行動呼籲前先給予誘因

UI 排版上,先給予像是「送禮」等誘因,是一種基於互惠原則的有效說服策略,同時也是能優化 UX 使用者體驗、改變顧客想法的最簡單方式。即使聽起來似乎很理所當然,但嘗試表現出友善的態度,如一封感謝信、小紀念品等,也能讓網站受眾的 UX 體驗更佳。這個微小的 UI 調整,也許會在未來帶來出乎意料的好處。

範例3:嘗試合併類似功能的欄位,避免版面破碎化

 

 

範例4:讓社群證明價值,不要自吹自擂

社群的廣泛好評對於提高轉化率是很好的說服策略,當客戶看到其他用戶支持並討論您的產品服務,會增進他們想深入了解的動機。

嘗試蒐集過往客戶的推薦文、滿意度證明或各種可以佐證的數據證明,並放在網頁上吧!

範例5:不要害怕重複顯示引導指示,只要放在不同位置就好

在跨度大或多分頁的網站中,重複出現讓使用者點擊的行動呼籲是可行的,但當然不是指讓「購買」等按鈕在同一畫面重複顯示10次,這麼做肯定會惹惱使用者……。

重點在於合理規劃欄位分配,因長長的一頁式網頁已相當能被大眾接受,不需像過去一樣,把所有網頁元素都壓縮在一個螢幕大小。所以在一頁式網頁的最上方設置一個適中的點擊按鈕、最下方放置一個醒目的點擊按鈕,也是符合UX使用者體驗的原則。

根據 A/B 測試出來的使用者習慣,當使用者「滑」網頁到最底時,看到可點擊的按鍵,他們會停下來思考接下來要做什麼 —— 例如點下那個「購買」鍵。

範例6:讓「可點擊」和「可選擇」的外觀有差異

為了清楚的引導訪客使用網站介面,UI 設計師要明顯區分出「可點擊」(如連結或按鍵)、「可選擇」(如選單)和純文字的樣式,不只在設計上要有所區別,同時上方描述文字也必須簡潔清楚。可以利用視覺元素,例如:顏色、深淺和對比度等,來達到又美觀又可以區分的效用。

例如以圖例來看,設計師選擇「藍色」做為網站上可點擊按鍵的色調,而選擇「黑色」為當前所在頁面的名稱。簡明扼要的顏色應用就能達到不言而喻的效果。最重要的是:千萬別使用過多的顏色混淆使用者。

推薦閱讀:為落實“數位優先”的UI設計…Audi,福斯竟將LOGO壓扁了!

範例7:突顯最推薦的項目,避免讓所有項目都看起來相同

有心理學研究表示,當人們眼前的選擇越多,反而會陷入一種「分析癱瘓」的狀態,導致從選擇中挑選的機率越低。

UI 設計師為了避免這個困境,比起單純陳列所有的項目,強調突出最主要的商品或服務是更好的做法。

推薦閱讀:UI設計師的配色攻略:5個黑色的設計意義/用法

範例8:讓使用者主動選擇「復原」,而不是重複詢問意圖

想像一下,當按下按鍵或連結,網頁可能會出現兩種提示:第一種是在介面底部出現「復原」(undo)鍵,讓你回復至上一步;另一種則是跳出視窗要你「確認即將要進行的操作,確認後無法復原」。這兩者會帶給消費者什麼不同的使用者體驗 (UX)?

跳出視窗要你「確認自己在做什麼」會讓使用者覺得備受質疑,而「復原」提供使用者就算操作錯誤也可以回復到上一步的功能,則會讓人感到友善、包容與尊重。

另外,若使用者需重複的進行某項操作,網頁不斷跳出提示視窗,也讓使用者感到操作效率低下,產生不佳的 UX 體驗。

 

 

本篇為第 1 篇,第 2 篇請點此30個方法教你如何用A/B測試改善網站的UI設計!!(2)

更多關於UI或其他類型文章請點閱下方連結~

 

 

 

其他閱讀

特效不夠AI 來湊!迪士尼換臉技術達百萬畫素

Google Analytics「工作階段」定義與範例一次解析!

亞馬遜人工智慧出包 搞混國會議員與罪犯

人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼

為何各個UI設計師都愛用圓角矩形?真的有比較好?()

考取APCS認證非知不可的攻略秘笈就看這篇!!()

人工智慧也會騎重機飆車?!頂尖車手擔憂快失業!!

HTML5小教室:六款電子書翻頁特效

HTML5小教室:六款電子書翻頁特效
HTML5小教室:六款電子書翻頁特效

今天要來跟大家分享HTML5的翻頁特效!!需要的同學不要錯過了!!

1. HTML5 書本翻頁動畫特效

 

 
 

這是手動翻書頁面特效的基本款。這款 HTML5 翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果,也可以點擊書頁的邊框來快速翻頁。

▶網頁上展示

▶原始碼下載

2. HTML5 3D書本翻頁特效

 

 
 

利用 HTML5 和 CSS3 不但可以實現翻頁動畫,還可以 3D 的立體形式實現。下面這款書本翻頁特效,使用鼠標拖拽書本頁面即可翻動頁面,在翻頁的過程中,書本還可以呈現出3D立體的效果 – 包括書本中的圖片也是。

▶網頁上展示

▶原始碼下載

3. HTML5/CSS3書本翻頁3D動畫

 

 

另一種簡潔版書本3D動畫特效,當我們將鼠標滑過書本時,書本就會自動一頁頁翻過去,書本的3D效果非常鮮明、極簡舒服。

▶網頁上展示

▶原始碼下載

 

4.超逼真書本翻頁動畫(CSS3版)

 

 
 

這款 CSS3 動畫效果是模擬書本翻頁的動畫特效。當鼠標滑過書本右上角時,書本即可向前翻一頁,而且翻頁動畫非常逼真。由於 CSS3 的運用,我們並不需要使用複雜的圖片來製造逼真的書本效果,書本翻頁可以很簡單地完成。

▶網頁上展示

▶原始碼下載

5.超逼真書本翻頁動畫(jQuery版)

 

 
 

這款 jQuery 書本翻頁 3D 動畫,功能更加強大,支援頁數不限,並且也有非常逼真美觀的視覺效果。書本的內容支持所有的 HTML 元素,彈性高、強大好用。

▶網頁上展示

▶原始碼下載

6.jQuery/CSS3書本翻頁動畫特效

 

 

這是一款基於 jQuery 和 CSS3 的書本翻頁動畫特效,外觀清新、還有指示便於操作。除了典籍滑鼠來翻頁之外,我們還可以直接點擊左右按鈕進行翻頁。

▶網頁上展示

▶原始碼下載

 

 

更多關於HTML5的相關文章請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Python vs R語言:哪個比較適合人工智慧/機器學習?

人工智慧釀酒超越人類 全球首支AI威士忌勇奪金牌

捷克新創Resistant.AI 開發2產品 揪出欺騙人工智慧的詭計

AI 人工智慧、ML 機器學習、深度學習、Python 是什麼?

有關Python的大小問題通通在這裡!!

時下最夯程式語言之一的Python和人工智慧有密不可分關係?!

一張圖秒懂Python,人工智慧和機器學習之間的關係!!

前端工程師CSS小課:float浮動屬性

前端工程師CSS小課:float浮動屬性
前端工程師CSS小課:float浮動屬性

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是float浮動屬性!

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時,必用的基本語法之一。使用 CSS float 浮動屬性,可將一個元素往左移或是往右移,並允許其他元素圍繞它(例如文繞圖、圖繞文等)。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時,預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時,就需要使用 float 屬性。

如下方例子,若我們使用一般的 div 區塊元素時,則所有的區塊就整齊的由左上出來,一個 <div> 區塊就佔用了一行。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.

承上例,若在 CSS 中加一個「float: left;」,則結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法):

See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.

這是因為「float」屬性使 div 區塊元素「漂浮」起來,不再形成 div 區塊占滿整行的情況

承上例,若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」,則所有的區塊就會由右側開始「飄」出來,結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法):

See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.

CSS 浮動屬性有三個參數:left、right 與 none。left 與 right 顧名思義,就是控制區塊由左側還是右側浮出用的,如上方兩個例子所示。而 none 就是不使用浮動參數的意思。

下方是另一個文繞圖排版的例子,就是文字的部分「不」設定 float 屬性,但是在 logo 圖片的部分使用浮動屬性「float:right;」,文字的部分則不使用浮動屬性。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.

前端工程師想要做出兩欄或多欄的網頁,則可以善用 float 屬性搭配寬度需要進行初步的排版。

以下範例為兩欄的排版示例。兩個欄位視為兩個區塊, float 屬性都設定為「left」,左欄寬度為 20%;右欄為 80%:

See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.

網路上有人說:前端工程師的網頁 layout 基石除了本章介紹的浮動(float) 屬性之外,還有下一張會介紹的清除浮動(clear)。想當前端工程師的各位同學們請先把本章再複習一次,並親自使用 codepen 自己練習一次程式,才會達到最佳的學習效果!

 

 

更多關於前端工程師的文章請點閱下方連結!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

前端工程師CSS小課:定位元素

前端工程師CSS小課:定位元素
前端工程師CSS小課:定位元素

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是定位元素~

為了要設計出更複雜的網頁前端版面,前端工程師都必須知道 CSS 的所有「position 屬性」。如下所示,它有一大堆屬性值,這些屬性值不好理解且也不好記憶,但稍一設定不好,就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下,也建議各位想當前端工程師的學員們把這頁加入網頁書籤中,以便日後方便查詢。

See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.

CSS:Positioning Elements 定位元素

CSS 定位屬性(positioning properties)是用來定位元素使用。它可將一個元素置於另一個元素之後,還可以指定當某個元素的內容太大時該如何做。

所有的元素都可用 top(上)、bottom(下)、left(左) 與 right(右) 屬性來定位。但若沒事先將「定位屬性」設置好的話,以上四種屬性(top、bottom、left 與 right)皆不起作用。它們亦會依照定位方法的不同,而以不同的方式呈現。

靜態定位(position: fixed)

「靜態定位(position: fixed)」是所有 HTML 元素的預設值。當元素為「靜態定位(position: fixed)」時,會遵循「Normal flow (指從左到右、上到下的常態佈局)」來排列。

靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例,儘管我們 CSS 設定為「top: 30px;right: 5px;」(上方距離30px、右側距離50px),被靜態定位的 HTML 元素,排版仍不受這些 CSS 影響。

See the Pen position_static by Tedutw (@Tedutw) on CodePen.

固定定位(position:fixed)

固定定位(position: fixed)的元素會相對於瀏覽器視窗來定位,這意味著即便頁面捲動,它還是會固定在相同的位置。

不同於靜態定位,固定定位(position: fixed)的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位(position: fixed)」的範例,其中的 CSS 「position:static」改為「position:fixed」,則排版受到「top: 30px;right: 5px;」(上方距離30px、右側距離50px)的屬性影響,如下所示:

See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.

固定定位(position: fixed)的元素會從「Normal flow (從左到右、上到下的排列)」的常態佈局中移除。所以其他未設定為「固定定位(position: fixed)」的元素,仍然依照「左到右、上到下」的排列,彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。

相對定位(position:relative)

所謂的「相對」,是以原本正常的位置為中心點,依照元素偏移原本位置多少而定數值。相對定位(position:relative)的元素可以結合 top、bottom、left、right 等屬性,使其元素「相對地」偏移原本該出現的位置。

如以下的例子,我們在原本的位置安插粉紅色背景的文字(文字為「相對定位」)區塊,並且設定該區塊相對於原本該出現的區塊「上方留空間 5px(top: 5px;)、 左方留空間 5px(left: 5px;)」。

See the Pen position_relative by Tedutw (@Tedutw) on CodePen.

相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置,會被保留而不會消失。

相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。

絕對定位(position:absolute)

不得不說,絕對定位(position:absolute)是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像,不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。

當元素的 position 設定為 absolute 後,它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed,若有,則以父元素為定位的基準點;若無,則以該網頁頁面(“body”)的左上角為定位點置,看起來就是這張網頁的絕對位置一樣。

以下範例為兩個絕對定位(position:absolute)元素的範例,右上方的元素的父元素 position 沒有設定,因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個,因此該元素會以整個網頁區域為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px;而另一個元素的父元素 position 是 relative,因此會以父元素為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px。

See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.

同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。

所有的 CSS 版面配置:Positioning Elements 定位元素介紹到此結束。光看以上的解釋,會容易搞混。此時,不妨回到此章節的最前面的範例,點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼,並且親自練習一次這些 CSS 碼,試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話,就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動(float)屬性

 

更多關於前端工程師的文章請點閱下方連結!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

超夯網頁前端小教室:display與visible

超夯網頁前端小教室:display與visible
超夯網頁前端小教室:display與visible

想學習網頁前端的你絕對不能不知CSS!今天要來跟大家就紹的就是display 屬性與visibility屬性!

本篇介紹網頁前端排版的兩個CSS屬性:display 屬性與 visibility 屬性。

CSS:display 屬性

display:block

對於 CSS 語法來說,網頁前端的每個元素都是一個矩形盒(rectangular box)模型。使用「display」屬性可以決定「盒(box)」的呈現方式。

又「區塊元素(block element)」則會佔用可用寬度的最大值,前後有換行符

以下範例分別顯示了是否有將<span>元素顯示為區塊元素(block element)的結果。在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的網頁前端 CSS 語法設定如下:

span.block{
  display:block;
}

display:inline

inline 元素只佔用可用寬度的最大值,並不強制換行。

將上一段範例的<span>元素,CSS 換成「display: inline」的結果如下。跟上一個範例一樣,在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的 CSS 語法設定如下:

span{
  display:inline;
}

display:none

「display:none」用來將元素隱藏使用,元素隱藏後就不佔用任何空間,在網頁前端頁面顯示時不會展現出來,就好像該元素不存在一樣。

以下範例中,我們將第 2、4 段設為「display:none」,其他設為「display:block」。

See the Pen display: none by Tedutw (@Tedutw) on CodePen.

上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值,如 list-item、table、table-cell、table-column、grid 等,會在往後的章節中一一介紹

visibility 屬性

visibility 屬性用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden

當我們想要隱藏園素食,有兩個方法:一是上一段介紹的,將「display」屬性設為「 none」參數;二是將「visibility」屬性設置為「hidden」來隱藏元素。

注意:以上兩個方法雖然都能將元素隱藏,但都呈現出不同的結果:

被「display:none」隱藏後的元素,就不會佔用任何的空間,就好像它從來都不存在一樣;而被「visibility:hidden」隱藏後的元素,雖然在網頁前端不會顯示,但仍佔用了對應的空間(就是被隱藏的元素有多大,網頁上空出來的空間就有多大),所以仍會影響排版。範例如下:

我們準備要將以下的例子,第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。

See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.

將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下:

See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.

由以上例子我們可知,同樣都是將元素隱藏,第一個<p>元素雖然被「visibility:hidden」隱藏了,但是仍遺留下空間;第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」,連原本的位置都不見了。

下一張我們將介紹網頁前端排版的另一個 CSS 屬性:Positioning Elements。

 

更多網頁前端相關文章請到本部落格首頁搜尋~

 

 

 

其他閱讀

Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

今年10月即將入手的新身分證,它的UI設計有啥亮點?

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

給零基礎網站前端學員的入門簡介!!

前端工程師一定要懂的JavaScript變數命名規範~

UI學員看過來!即將登場的新式身分證有甚麼特別的呢!()

想當前端工程師嗎?首先你得了解前端工程師的養成計畫表!!

想當前端工程師嗎?首先你得了解前端工程師的養成計畫表!!
想當前端工程師嗎?首先你得了解前端工程師的養成計畫表!!

想報名前端工程師當個斜槓青年嗎?那你一定不能錯過今天的前端工程師養成計畫表!!

這一篇要跟大家分享2019年正確的網頁前端學習路線! 很多人想要轉職勝任網頁前端工程師網頁開發的工作,但是還沒找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的網頁前端學習路線,一起來一探究竟!

第一步:把握HTML/CSS

這是基本的網站的構建元素,是所有網頁設計/開發者都一定要學會的語言。並且HTML/CSS也很簡單易學,沒得挑!

第二步:學會使用基本工具

文本編輯器:例如 Sublime Text、Dreamweaver、Visual Studio Code 等
圖像編輯器:Photoshop、Illustrator 等
FTP/SSH 工具:Filezilla、PuTTY 等
網頁瀏覽器:Chrome、Firefox 等
雲端硬碟:Dropbox、Google Drive 等

第三步:進修 JavaScript

JavaScript (現階段先忽略Node.js 和任何框架)
理解數據類型:String、Number、Arrays、Objects等
JSON(JavaScript Object Notation)
jQuery框架

第四步:搭建基本網站

使用像 Hostgator、Hostmonster 等的虛擬主機建置網站
學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師前端工程師

現階段的你可以:
1. 建立簡單容易的網站
2. 搭建網頁應用的界面
3. 可以把一張 PSD 檔轉化為基於 HTML/CSS 的靜態網頁
4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合,無法獨立架站)

接下來你還需要進修的有:
1. HTML/CSS框架:如 Bootstrap
2. 熟悉網頁後端的程式語言:PHP (建議初學者用)、Ruby 等
3. JavaScript 框架:如 React、Angular 等
4. 數據庫:如 MySQL

第六步:HTML/CSS框架

Bootstrap (強烈推薦)、Zurb、MUI 等

第七步:網頁後端程式語言 (專注再一個就好)

PHP (不是最好的語言,可是目前用於後段較普及且適合初學者學習)
Node.js (一款新型、強大的後台語言)
Ruby on Rails (最好的框架語言,但是對程式語言初學者較難入手)
Python (簡單易學,但是尚未如 PHP 般普及,不過隨著 AI 的爆紅 Python 也越來越普及。

第八步:數據庫(專注於一個!)

關係型數據庫:如 MySQL
非機構化數據庫:如 MongoDB 和 CouchDB
建議選擇以下其中一個組合:
1. PHP 搭配 MySQL
2. Node.js 搭配 Mongolian

第九步:必要時,精進一些進階的前端技能:

SSH & Basic Command Line
CSS 預編譯器:如 Sass、Less、Stylus
APIS / REST 服務
HTTPS / SSL

第十步:應用

VPS 虛擬專用伺服器
應用雲端平台:如 AWS、Digital Ocean、
Linux 呼籲行
維護和進級

第十一步:恭喜你,已經成為一名全端工程師/後端工程師/網頁開發者了!

可以開發架設網站
能建置後端 API
能連接 Server
可以處理數據庫
你可以選擇受雇為全端工程師/後端工程師,或是成為可以獨當一面的 soho 族、創業等。

第十二步 (選修技能):精進程式語言

JavaScript 框架: React、Angular 2、Vue.js、Express (後端)
PHP 框架: Laravel、Codeigniter、Symfony
Ruby on rails
MVC框架:路由、數據庫映射、幫助程序、數據綁定、模板和 UI

第十三步 (選修技能):基於 PHP 的 CMS 網站

WordPress (最多人用的 CMS 網站)、Joomla、Drupal
以上 CMS 網站架站快速、有豐富的 plug-in 模組,不過功能有限,適合需要快速架站的場合。

第十四步 (選修技能):行動 App 開發

你不需要進修 Java 和 C 語言,只要把握 JavaScript!我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App

以上就是前端工程師課程老師為大家分享的前端學習路線!的文章,希望本篇文章能夠對想要學習網頁前端技術的初學者們有所幫助。想要了解更多Web學習方法記得關注達內教育評價。最後祝大家都能夠順利學成,成為一名優秀的網頁前端工程師。

 

 

 

其他閱讀

簡明扼要的HTML5入門課程(一):七個內容模組簡介

簡明扼要的HTML5入門課程(二):用新的元素排版俐落又精簡!

簡明扼要的HTML5入門課程(三):網頁內容相關語意元素

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

想報名前端工程師的學員一定要看的學習路線圖在這裡!!

想報名前端工程師的學員一定要看的學習路線圖在這裡!!
想報名前端工程師的學員一定要看的學習路線圖在這裡!!

成為一名前端工程師是你的夢想嗎?在報名課程前先看一看前端工程師的學習路線圖吧!!

本篇要跟大家分享2019年正確的網頁前端學習路線! 很多人想要轉職勝任網頁前端工程師網頁開發的工作,但是還沒找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的網頁前端學習路線,一起來一探究竟!

第一步:把握HTML/CSS

這是基本的網站的構建元素,是所有網頁設計/開發者都一定要學會的語言。並且HTML/CSS也很簡單易學,沒得挑!

第二步:學會使用基本工具

文本編輯器:例如 Sublime Text、Dreamweaver、Visual Studio Code 等
圖像編輯器:Photoshop、Illustrator 等
FTP/SSH 工具:Filezilla、PuTTY 等
網頁瀏覽器:Chrome、Firefox 等
雲端硬碟:Dropbox、Google Drive 等

第三步:進修 JavaScript

JavaScript (現階段先忽略Node.js 和任何框架)
理解數據類型:String、Number、Arrays、Objects等
JSON(JavaScript Object Notation)
jQuery框架

第四步:搭建基本網站

使用像 Hostgator、Hostmonster 等的虛擬主機建置網站
學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師前端工程師

現階段的你可以:
1. 建立簡單容易的網站
2. 搭建網頁應用的界面
3. 可以把一張 PSD 檔轉化為基於 HTML/CSS 的靜態網頁
4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合,無法獨立架站)

接下來你還需要進修的有:
1. HTML/CSS框架:如 Bootstrap
2. 熟悉網頁後端的程式語言:PHP (建議初學者用)、Ruby 等
3. JavaScript 框架:如 React、Angular 等
4. 數據庫:如 MySQL

第六步:HTML/CSS框架

Bootstrap (強烈推薦)、Zurb、MUI 等

第七步:網頁後端程式語言 (專注再一個就好)

PHP (不是最好的語言,可是目前用於後段較普及且適合初學者學習)
Node.js (一款新型、強大的後台語言)
Ruby on Rails (最好的框架語言,但是對程式語言初學者較難入手)
Python (簡單易學,但是尚未如 PHP 般普及,不過隨著 AI 的爆紅 Python 也越來越普及。

第八步:數據庫(專注於一個!)

關係型數據庫:如 MySQL
非機構化數據庫:如 MongoDB 和 CouchDB
建議選擇以下其中一個組合:
1. PHP 搭配 MySQL
2. Node.js 搭配 Mongolian

第九步:必要時,精進一些進階的前端技能:

SSH & Basic Command Line
CSS 預編譯器:如 Sass、Less、Stylus
APIS / REST 服務
HTTPS / SSL

第十步:應用

VPS 虛擬專用伺服器
應用雲端平台:如 AWS、Digital Ocean、
Linux 呼籲行
維護和進級

第十一步:恭喜你,已經成為一名全端工程師/後端工程師/網頁開發者了!

可以開發架設網站
能建置後端 API
能連接 Server
可以處理數據庫
你可以選擇受雇為全端工程師/後端工程師,或是成為可以獨當一面的 soho 族、創業等。

第十二步 (選修技能):精進程式語言

JavaScript 框架: React、Angular 2、Vue.js、Express (後端)
PHP 框架: Laravel、Codeigniter、Symfony
Ruby on rails
MVC框架:路由、數據庫映射、幫助程序、數據綁定、模板和 UI

第十三步 (選修技能):基於 PHP 的 CMS 網站

WordPress (最多人用的 CMS 網站)、Joomla、Drupal
以上 CMS 網站架站快速、有豐富的 plug-in 模組,不過功能有限,適合需要快速架站的場合。

第十四步 (選修技能):行動 App 開發

你不需要進修 Java 和 C 語言,只要把握 JavaScript!我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App

以上就是前端工程師課程老師為大家分享的前端學習路線!的文章,希望本篇文章能夠對想要學習網頁前端技術的初學者們有所幫助。想要了解更多Web學習方法記得關注達內教育評價。最後祝大家都能夠順利學成,成為一名優秀的網頁前端工程師。

 

 

 

其他閱讀

前端工程師必備HTML5入門課程:七個內容模組簡介

前端工程師必備HTML5入門課程:嵌入影片元素video

前端工程師必備HTML5入門課程:載入進度的顯示條

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

專屬前端工程師RWD概念(三):設計以行動設備為主

專屬前端工程師RWD概念(三):設計以行動設備為主
專屬前端工程師RWD概念(三):設計以行動設備為主

專屬前端工程師的RWD概念文章最後一篇要來和大家分享RWD網頁需要注意哪些事~

行動載具特性

 


圖上方為傳統以桌機為主設計模式;下方為「行動裝置優先 (Mobile First)」模式
 

手機、平板等行動設備在操作上與電腦差異很大,電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此,兩者的網頁開發在互動設計上也有所不同。

行動載具的基本特徵有:可單指或多指操控的多點觸控、多種手勢(如搖一搖、滑動等)以及文字虛擬鍵盤。

除了上述與電腦差異很大的特徵外,在視覺呈現上也與電腦差很大,前端工程師網頁設計師需注意的事項如下:

按鈕大小:
電腦因為是用滑鼠操控,所以無論按鈕多小,滑鼠一樣點的到。但是行動裝置是以觸控為主,按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者,任何需要被觸控的 UI (使用者介面) 元件,都不能小於 44*44px。

超連結大小:
除了上述的按鈕之外,也會有文字的超連結內容。同理,也不能讓帶有超連結的文字太小,以利於手指點擊。

UI 設計:
UI 設計必須考量到行動載具的畫面尺寸,因此像按鈕等需要被觸控的 UI (使用者介面) 元件,都需要在畫面中容易被點擊的地方。

點擊效果:
在按鈕效果的開發上,有時滑鼠除了點擊與放開的指令外,還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的,所以就不需要此種特效強調。

互動效果:
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計 RWD 網頁時,要考量到不同設備的效能。

行動裝置優先 (Mobile First) 概念

行動裝置優先 (Mobile First) 是由知名的設計師UI規劃師 Luke Wroblewski 提出的,他曾當過美國 yahoo 架構設計負責人,他在2010年的時候進行了一次簡報,標題就是 Mobile First(原始簡報與影片),是指設計網站時,應該以行動裝置的介面、互動、顯示等為主要考量,其他的裝置次之,有別於過去設計網站時「以桌上型電腦為主,再將電腦網站上的內容移植到行動裝置上」的模式。

現在越來越多的人使用行動裝置上網,根據美國最大電信業者 AT&T 的數據,手機流量在 3 年內成長了 50 倍,目前行動裝置上網的使用率仍在激增當中,而且還有更多的功能持續被開發出來。

相較於傳統的電腦,行動裝置的使用較不受到時間空間限制,無論是在捷運、廁所等都可使用,人們也花了不少零碎時間使用手機上網,因此瀏覽網頁的頻率跟電腦比起來有過之無不及,所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。

那「行動優先」要如何套用到網頁設計上?一開始先針對行動裝置的小畫面來設計版面、填入最重要的內容,然後再以這些基本內容都存在的狀況下,針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來,網頁在行動裝置呈現的介面會非常好瀏覽且美觀,該有的功能、內容都有,並且由小畫面擴大至大畫面,內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強(Progressive Enhancement)」)。但是如果是從大畫面開始設計,當要轉換成小畫面時,其內容的擺放就會越來越困難,常常需要透過刪減內容,才能「塞」入較小的版面當中。這樣一來,有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容,而無法給使用者完整的內容 (參見「優雅降級(Graceful Degradation)」)。

若要建立良好的行動裝置使用者體驗 (UX),應考慮以下幾點:

  • 使用者使用行動載具的習慣、方式及思考模式
  • 提供明確精要的內容,比完整的導覽功能更重要
  • 提供清楚且好觸控的導覽選單
  • 簡潔明確的頁面內容
  • 符合行動載具操作特性

現在大多數的 RWD 響應式網站,都是採用行動裝置優先 (Mobile First) 概念來設計,範例如下:

Youtube網站

 

就算是在手機上,也可以很方便的點閱影片、撥放、暫停,甚至對影片作評論、按讚!

 

 

Airbnb網站

 

選單的按鈕設計的大小適中,使用者用手機就可以輕易地透過選單找到目標住處,並且藉由滑動的行為瀏覽屋況,並按下預訂按鍵!

 

 

本篇為「前端工程師必懂RWD概念」三部曲第三篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 網頁設計的「優雅降級」與「漸進增強」
  3. 行動設備的設計考量

 

 

其他閱讀

專屬前端工程師RWD概念(一):RWD網站和傳統網站哪裡不同?

專屬前端工程師RWD概念(二):什麼是優雅降級和漸進加強?

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

中國IT教育領導品牌 達內教育集團第一家海外授權中心

專屬前端工程師RWD概念(二):什麼是優雅降級和漸進加強?

專屬前端工程師RWD概念(二):什麼是優雅降級和漸進加強?
專屬前端工程師RWD概念(二):什麼是優雅降級和漸進加強?

前端工程師一定要學的優雅降級和漸進加強你知道是甚麼嗎? 還不知道的快學起來吧!!


 

當代的前端工程師網頁設計師在開發網站時都選擇 RWD 網站,在規劃其 Media Query 的尺寸斷點時,有兩種布局斷點的依據:「根據設備」以及「以內容為主」,介紹如下:

1.根據時下的主流設備來佈局斷點 (設備優先)

透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點,而設計多套樣式,再分別對應到各種設備上,如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便,又能精準對應到時下最普及的設備,但是隨著設備不斷汰舊換新,未來總會有無法合適對應到的設備。


 

2.根據網頁內容作為佈局斷點的標準 (內容優先)

這種方式不是以設備為主;而是依據網頁內容的布局、段落等來下斷點,是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易,但是斷點會依據設備的不同而落在不同的地方,這樣就沒有標準、精準的設計模式。


 
儘管如此,現今大多前端工程師網頁設計師會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新,若採用此種方式,雖然無法精準的對應到特定的設備,但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變,重點依然是網頁內容的本身。

在內容優先的策略中,前段工程師與設計師要讓網站盡可能兼容所有設備:因為我們不知道用戶會用什麼樣的設備來訪問網站,因此,我們必須盡可能地把所有狀況都考慮進來;所有的佈局、元件、區塊和UI,UX設計等都能兼容不同類型的設備和平台。有「優雅降級(Graceful Degradation)」以及「漸進增強(Progressive Enhancement)」兩種思維模式,可以套在「內容優先」為主的 RWD 響應式網站 設計的過程:

「優雅降級」還是「漸進增強」?

 


圖上方為「優雅降級(Graceful Degradation)」的網頁設計模式;下方為「漸進增強(Progressive Enhancement)」模式
 

1. 優雅降級(Graceful Degradation)

一開始就針對「功能最完整」的平台來設計、開發網站,完成所有的功能和體驗後,再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案,以確保網站能在最新、最完整的平台上完美呈現,擁有「最好的使用者體驗」;而在較舊的或是功能限制較多的的平台上,仍然可使用最重要的功能,整體介面「簡陋卻可用 (poor but passable)」,而不是無法使用。

2. 漸進增強(Progressive Enhancement)

這個方式與「優雅降級(Graceful Degradation)」的方式相反,是先針對最不完整或是限制最多的平台上創建最重要的基本內容,用最精簡的方式呈現;然後以這些基本內容都存在的狀況下,開始慢慢擴展其佈局,隨著平台的限制越來越少,內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。

本篇為「前端工程師必懂RWD概念」三部曲第二篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 網頁設計的「優雅降級」與「漸進增強」
  3. 行動設備的設計考量

 

 

其他閱讀

專屬前端工程師RWD概念(一):RWD網站和傳統網站哪裡不同?

專屬前端工程師RWD概念(三):設計以行動設備為主

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

中國IT教育領導品牌 達內教育集團第一家海外授權中心

專屬前端工程師RWD概念(一):RWD網站和傳統網站哪裡不同?

專屬前端工程師RWD概念(一):RWD網站和傳統網站哪裡不同?
專屬前端工程師RWD概念(一):RWD網站和傳統網站哪裡不同?

RWD網站概念前端工程師都會了嗎? 今天要來和大家談談RWD網站和傳統網站在設計上哪裡不一樣~

在智慧型手機等行動上網的裝置普及之前,早期的前端工程師網頁設計師在做網站和UI,UX設計時較輕鬆。因為網站只需適應一種規格,在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下:

從上圖可以看出,在開發 RWD 網站時,若要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求,就要開發出 4-5 種版面,無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段,必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、程式撰寫,再根據不同的尺寸斷點進行反覆測試、調整與修正。

(相關文章:Media Query使用方法Media Query中的視窗與頁面尺寸媒體特性一覽表)。

在著手各種載具版面的設計前,應先根據與客戶討論後的結果,粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型,是在除去所有視覺設計細節 (如色彩、字型等) 之下,進行頁面架構、功能與內容的規劃,藉此更能集中地檢視整個介面流程和架構,方便與客戶溝通想法。

(相關文章:與前端溝通更順利!從了解整體網站的規劃流程開始)。

網頁框架規劃 (Wireframe) 是運用文字線條、方塊,把每個區塊所要呈現的內容表現出來。盡可能減少設計元素,以突顯網頁所呈現的介面、動線流程與階層,確認使用者體驗如何。有時為了在視覺上清除區隔不同區域,可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。

本篇為「前端工程師必懂RWD概念」三部曲第一篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 內容優先的「優雅降級」與「漸進增強」
  3. 行動載具的設計考量

 

 

其他閱讀

專屬前端工程師RWD概念(二):什麼是優雅降級和漸進加強?

專屬前端工程師RWD概念(三):設計以行動設備為主

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

中國IT教育領導品牌 達內教育集團第一家海外授權中心