布萊恩的創業小窩

  難道 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. 指令清楚的按鈕標示與說明 帶有誤導性資訊的按鈕標示，容易讓使用者感到迷惑。設計標示按鈕文字時，為了傳達出每個按鈕的作用，便需要簡短、有邏輯且適當的文字，讓使用者清楚了解點選按鈕後的結果，盡快獲得自己想要的內容，太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠...