布萊恩的創業小窩

  難道 RWD 才是最好的選擇?看完這篇說不定你會覺得AWD更適合你呢!       目錄 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 評估現有的資源人力 對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！ AWD 要怎麼做才能對 SEO 無痛? 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 當下  RWD  正夯，但並不代表所有的網頁都適用 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力，再決定使用  AWD  還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單整理如下表所示 ：   RWD AWD 人力需求 較少，因為只有一套  CSS 較多 (因為需要多套 CSS)， 需要網頁人才與尚需 前端 工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式 維護成本 較少，因為只有一套 CSS 較多，因為有多套  CSS  以及程式 適用內容 網站內容較單純時適用。 如簡單的企業形象網站、一頁式網站等等。 網站內容較多、較複雜時適用。 如博克來、MOMO 購物網、蝦皮拍賣等。 適用排版 較簡潔的畫面與排版 較多元化、複雜的畫面與排版 SEO  支援 SEO  優化、維護較容易 同左，但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址，導致流量分散。 工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS 可支援的裝置 各裝置都適用 各裝置都適用 以上分析建議仔細看過。 以下再作補充說明： 評估現有的資源人力 只需要寫一套  CSS ...

  始終搞不清楚RWD和AWD間的差別嗎?看完這篇你就清楚啦!   目錄 RWD 和 AWD 的差異與優缺點 RWD、AWD 的異同之處 共同之處 不同之處 RWD AWD RWD 的優點與缺點 優點 缺點 AWD 的優點與缺點 優點 缺點 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ AWD  跟  RWD  的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端 工程師或是 網頁前端設計師 在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 RWD 和 AWD 的差異與優缺點 在網頁上， RWD  是「Responsive Web Design (響應式 網頁設計 )」的縮寫；而 AWD 則是 「Adaptive Web Design (自適應式 網頁設計 )」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的  CSS  寫法，讓 網頁設計 無論在桌機螢幕上、或是尺寸較小的行動裝置上，都能清楚的呈現，讓使用者能更舒服的瀏覽網頁。 RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套  CSS ，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。 RWD  與 AWD 的差異，簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下： RWD 會把所有裝置的樣式都寫在同一套  CSS  中，因此無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用到 CSS 中的哪一個樣式。 ...

5. 按鈕在版面上的順序位置 循序漸進的按鈕順序如同使用者和系統之間的對話，在  UI  設計的過程中，不斷反問自己或換位思考，使用者點選按鈕的步驟，會希望達成什麼目的，並進行相對應的設計。比如：上一頁/下一頁的按鈕，左右方向的箭頭按鈕是常見呈現方式。 6. 避免過多的按鈕分散注意力 為了增進  UX  使用者體驗，會在同個頁面上增加各式各樣的按鈕，一不小心數量會比預期來得多，便會產生分流降低點擊率。比如：如果主要目的是想讓使用者點選頁面下載按鈕，使用者可能因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開，確保使用者點選到目標按鈕。 7. 加入音效或動畫產生互動 藉由人的五官體驗，在按鈕的設計上傳達聲音與動態效果加深使用者的體驗，試著營造出如同按鈕圖示呈現的舒適情境，當使用者點選時，產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時，通常會認為系統沒有接收到指令，而不斷的重複點選，便會導致多次不必要的操作。 方便點選的按鈕還有許多值得探討的  UI  設計技巧，以上所述的7個基本要點常用也是最容易忽略的一部分。優化按鈕設計的各種細節，探索各個細節對目標的點選，更能達成自己所理想的轉換成效。 本文為下篇，上篇請看此 連結

按鈕在網站上出現的頻率是相當高的，猶如實體店面的動線，協助顧客快速找到目標。隨著線上的商業發展蓬勃，網站設計上開始重視使用者觀看版面的體驗（ UX ），如何透由按鈕的佈局轉換為交易，並進一步提升營收。 雖然現今的網站美輪美奐，還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design，簡稱 RWD）的普遍，改善同時在手機、iPad與電腦不同裝置顯示問題，在版面中搭建使用者與系統之間的互動操作流程，仍不能缺少按鈕作為基礎視覺元素。 按鈕的設計不只是簡單的一個圖示，任何讓我們感到舒適方便的操作，都是有規律可循的。 UI/UX  設計過程嘗試揣摩使用者心理，加入外觀美學、色彩學等知識創建而成，分成以下7個基本要點說明： 1. 互動式的按鈕設計 建立按鈕需要使用正確的樣式，依照按鈕產生的狀態設計不同外觀，包含：大小、形狀、顏色、陰影等因素組成，再搭配上合適的字體與間距，藉由簡單的觸控、按下去即可達到目的，讓人享受到即時的強烈滿足感。 線上虛擬按鈕的視覺性，來自接觸實體按鈕的體驗和認知根深蒂固， UX  使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。 以下是大多數用戶熟悉的幾個按鈕示例： 帶有方形邊框的按鈕 帶圓角的按鈕 帶陰影的按鈕 幽靈按鈕 除了容易點選的按鈕樣式，保持與周遭文字適當的留白避免視覺干擾。 2. 方便搜尋版面上的按鈕位置 使用者閱讀內容的同時，會搜尋版面可點選的功能按鈕，比如：下一頁、產品介紹等，如果使用者在視覺上尋找的時間愈久，若找不到按鈕，便不會知道它的的存在，愈容易感到網站不好使用。 為了和使用者不要玩追逐按鈕的遊戲，因此使用一致性的排版設計，便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局，足夠的留白與簡潔使版面不會太擁擠，即使不是強烈鮮明的按鈕，依然隨著閱讀動線吸引使用者輕鬆的點選。 3. 指令清楚的按鈕標示與說明 帶有誤導性資訊的按鈕標示，容易讓使用者感到迷惑。設計標示按鈕文字時，為了傳達出每個按鈕的作用，便需要簡短、有邏輯且適當的文字，讓使用者清楚了解點選按鈕後的結果，盡快獲得自己想要的內容，太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠...

又要提供一個成為前端工程師的偷吃步方法:學習路線!相信這樣你便不再是隻無頭蒼蠅,一步步的方式和目標變得超明確! 達內教育評價小組今天要跟大家分享的文章是2019年教你正確的 網頁前端 學習路線! 很多人想要轉職勝任網頁 前端工程師 ，但是尚未找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的 網頁前端學習路線 ，一起來一看究竟!   第一步：把握 HTML /CSS 這是基本的網站的構建元素，是所有網頁設計/開發者都必須要學會的語言。尤其是 HTML5 ，並且 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. Ja...

你不要以為前端工程師傻傻的!現在不同的行動設備,他們同樣也有辦法對付! 行動載具特性 圖上方為傳統以桌機為主設計模式；下方為「行動裝置優先 (Mobile First)」模式 手機、平板等行動設備在操作上與電腦差異很大，電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此，兩者的網頁開發在互動設計上也有所不同。 行動載具的基本特徵有：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）以及文字虛擬鍵盤。 除了上述與電腦差異很大的特徵外，在視覺呈現上也與電腦差很大， 前端工程師 與 網頁設計 師需注意的事項如下： 按鈕大小： 電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者，任何需要被觸控的 UI (使用者介面) 元件，都不能小於 44*44px。 超連結大小： 除了上述的按鈕之外，也會有文字的超連結內容。同理，也不能讓帶有超連結的文字太小，以利於手指點擊。 UI 設計： UI 設計必須考量到行動載具的畫面尺寸，因此像按鈕等需要被觸控的 UI (使用者介面) 元件，都需要在畫面中容易被點擊的地方。 點擊效果： 在按鈕效果的開發上，有時滑鼠除了點擊與放開的指令外，還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的，所以就不需要此種特效強調。 互動效果： 電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計　RWD 網頁時，要考量到不同設備的效能。 行動裝置優先 (Mobile First) 概念 行動裝置優先 (Mobile First) 是由知名的 設計師 與 UI規劃師 Luke Wroblewski 提出的，他曾當過美國 yahoo 架構設計負責人，他在2010年的時候進行了一次簡報，標題就是 Mobile First（ 原始簡報與影片 )，是指設計網站時，應該以行動裝置的介面、互動、顯示等為主要考量，其他的裝置次之，有別於過去設計網站時「以桌上型電腦為主，再將電腦網站上的內容移植到行動裝置上」的模式。 現在越來越多的人使用行動裝置上網，根據美國最大電信...

標準的RWD網站範例 現今前端工程師都選擇RWD網站,今天介紹Media Query尺寸斷點時的兩種布局斷點,和優雅降級.漸進增強! 當代的 前端工程師 與 網頁設計師 在開發網站時都選擇 RWD 網站，在規劃其 Media Query 的尺寸斷點時，有兩種布局斷點的依據：「根據設備」以及「以內容為主」，介紹如下： 1.根據時下的主流設備來佈局斷點 (設備優先) 透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點，而設計多套樣式，再分別對應到各種設備上，如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便，又能精準對應到時下最普及的設備，但是隨著設備不斷汰舊換新，未來總會有無法合適對應到的設備。 「設備優先」示意圖（圖片來源：http://static.codeceo.com） 2.根據網頁內容作為佈局斷點的標準 (內容優先) 這種方式不是以設備為主；而是依據網頁內容的布局、段落等來下斷點，是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易，但是斷點會依據設備的不同而落在不同的地方，這樣就沒有標準、精準的設計模式。 「內容優先」示意圖（圖片來源：http://static.codeceo.com） 儘管如此，現今大多 前端工程師 與 網頁設計師 會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新，若採用此種方式，雖然無法精準對應到特定的設備，但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變，網頁內容的本身依然會是重點。 在內容優先的策略中，前段工程師與設計師要讓網站盡可能兼容所有設備：因為我們不知道用戶會用什麼樣的設備來訪問網站，因此，我們必須盡可能地把所有狀況都考慮進來；所有的佈局、元件、區塊等都能兼容不同類型的設備和平台。有「優雅降級（Graceful Degradation）」以及「漸進增強（Progressive Enhancement）」兩種思維模式，可以套在「內容優先」為主的 RWD 響應式網站 設計的過程：   「優雅降級」還是「漸進增強」? 圖上方為「優雅降級（Graceful Degradation）」的 網頁設計 模式；下方為「漸進...

即使是當代前端工程師,所有概念也不能囫圇吞棗!現在就和你分享你可能也搞錯的小觀念! 在智慧型手機等行動上網的裝置普及之前，早期的 前端工程師 與 網頁設計師 在做網站時較輕鬆。因為網站只需適應一種規格，在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下： 從上圖可以看出，在開發 RWD 網站時，若要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求，就要開發出 4-5 種版面，無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段，必須要規劃 Media Query 的尺寸斷點再去進行 網頁設計 、程式撰寫，再根據不同的尺寸斷點進行反覆測試、調整與修正。 (相關文章： Media Query使用方法 、 Media Query中的視窗與頁面尺寸媒體特性一覽表 )。 在著手各種載具版面的設計前，應先根據與客戶討論後的結果，粗略進行各種載具的網頁框架規劃 ( Wireframe )。Wireframe 是低保真度的設計原型，是在除去所有視覺設計細節 (如色彩、字型等) 之下，進行頁面架構、功能與內容的規劃，藉此更能集中地檢視整個介面流程和架構，方便與客戶溝通想法。 (相關文章： 與前端溝通更順利！從了解整體網站的規劃流程開始 )。 網頁框架規劃 ( Wireframe ) 是運用方塊、文字線條，把每個區塊要呈現的內容表現出來。盡可能地減少設計元素，這樣才能突顯網頁所呈現的介面、動線流程與階層，確認使用者體驗如何。有時為了在視覺上清除區分不同的區域，可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。 本篇為「 前端工程師 必懂RWD概念」三部曲第一篇，全系列目錄如下: (目錄) RWD網頁與傳統網頁設計的差異 內容優先的「優雅降級」與「漸進增強」 行動載具的設計考量 🙆延伸閱讀區： 前端工程師需釐清的RWD概念(中)網頁設計的優雅降級和漸進增強 前端工程師需釐清的RWD概念(上)RWD網頁VS傳統網頁設計 影響前端工程師超大的3個必備技能1-RWD是什麼何方神聖? 網路行銷課程的SEO優化跟帽子有關,你知道嗎?  Python可以建造人工智慧?你想學嗎? ...

身為前端工程師,怕人家笑你不內行?把Media Query學完大家都說:"您真內行啊!" 許多 前端工程師 在面對 網頁設計 時，都要處理 RWD網頁 。這些 RWD網頁 中的圖片如下圖所示，能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。 在 RWD網頁 中圖片的顯示方式有兩種，一種是傳統的「<img>」標籤，另一種就是直接使用 CSS 的背景圖。在網頁中插入一般的圖片，也就是使用「<img>」標籤的場合時，只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，另一個則設為 auto 則可以達到 RWD 的效果，範例如下： #banner { max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/ height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/ } 上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。 相信大家已經看過夠多美美的滿版圖片的網頁了吧？這是因為在背景圖的設定上，CSS3 的新屬性「background-size」可以指定背景圖片的大小是否可填滿整個容器。未指定「background-size」屬性的話就是 auto 原圖的大小；如果有指定為 cover 的話，那就可以使背景填滿容器。 快來看看以下背景圖片的 Fluid Image 設定為填滿容器的語法： #banner { background-size: cover; } 上過 網頁設計 課程的 前端工程師 應該可以一目了然： 下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。 本篇為「前端工程師必備的RWD基礎」系列文章最後一篇，全系列目錄如下: (目錄) 前端工程師必備的RWD基礎(一)RWD基礎概念 前端工程師必備的RWD基礎(二)流動布局Fluid Grid 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用...