數位行銷
優秀的移動端頁面是怎樣的
最近GOOGLE的研究發現，那些針對移動端優化過的網站更容易贏得回頭客。這意味著網站針對移動端優化之後有著現實可見的好處。
那麼我們常說的“對移動端友好”到底是怎麼樣的概念呢？實際上，這個概念包含了一系列關鍵的特性，當你在進行移動端網頁設計的時候應當將它們納入考慮的範疇：
如果你希望自己的網站能夠輕鬆的在移動端設備上訪問，那麼應當消除所有移動端上可能存在的可用性的問題，下面有12條提升移動端網頁設計的建議，確保你的頁面能夠通過可用性測試，並提供良好的用戶體驗。
1、針對移動端進行全面優化
PC端網頁在移動端設備上首要的障礙就是選單的使用。看看下面DOMINO'S批薩的案例，它的PC端和移動端網頁的對比就相當明顯，移動端頁面經過優化之後的體驗就完全不同。簡單說來，優化後的移動端頁面更加乾淨
下面是優化移動端頁面的幾個實用技巧：
·僅使用垂直捲動。不要使用水平滾動，讓用戶只需單方向滾動就能瀏覽主要的內容。儘量通過CSS來控制頁面寬度、位置和圖片的縮放。
·將你的內容置於首位，避免其他的元素讓使用者分心。
·控制分欄的數目，儘量使用一欄單列式的佈局。
2、讓互動按鈕在移動端上友好易用
使用者經常會忽略移動端頁面上的一些元素，所以儘量使用CTA按鈕，確保使用者不會錯過它們。和PC端的情況不同，你需要將互動按鈕置於主要、顯眼的位置，確保他們容易發現，容易點擊觸發。
CTA按鈕應該易於點擊，並且不會同頁面中其他的元素形成干擾或者干涉。
3、讓選單簡短且易用
詳細而全面的功能表設計在PC端上能夠良好運行，但是當它出現在移動端上的時候，選單就顯得過長了，要在其中找到想要的內容就相當難了。所以，你需要考慮使用精簡的功能表，僅保留最重要的、必須的項目。根據以往的經驗，儘量不要讓選單超過7個項目。
同時你還要保持你的功能表目錄足夠的易好用：
·它應當基於根據重要性和價值來進行排序
·它不應當包含瀏覽者不理解的術語，功能表要使用通俗易懂的表述方式。
4、讓搜尋框顯眼
如果在你的網站中，搜尋是主要的功能，那麼你在做移動端頁面優化的時候應該突出這一功能，因為它是高轉化率的功能，確保它足夠顯眼是很有必要的。
當瀏覽者想要獲取特定功能的時候，傾向於使用搜尋功能來實現，所以，搜尋應當是使用者一打開頁面就能看到的項木。通常應當讓搜尋框置於頁面頂部，以文本輸入框的形式存在。
5、讓網站正好合適，無需縮放
PC端網頁出現在移動端設備上，最令人沮喪的地方就是它需要縮放。不放大頁面，不僅難於閱讀，而且用戶容易錯過重要的細節，而放大瀏覽，需要來回拖放。
而針對移動端優化後的頁面則不存在這個問題。圖片、字體和頁面寬度都正好合適，使用者能夠完整地獲取資訊，確保了最基本的可用性和易用性。
6、使用高品質的素材
你的網站中所有的圖片、影片UI元素都是你的產品的一部分，當你針對移動端優化頁面的時候，它們都是重要的組成部分，它們品質優劣直接影響到瀏覽者的觀感。
7、設計便於觸摸互動的頁面
如果你的頁面是針對移動端設計的，那麼網頁中按鈕的尺寸應當和手指的大小相匹配。
MIT的Touch Lab 通過研究發現，指面的觸摸尺寸平均大小為 10-14mm，而指尖的平均尺寸是8-10mm，也就是說10mmx10mm的控制項尺寸設計是比較合理的大小。
另外一個需要考慮的是就是可觸摸控制項指尖的距離。如果兩個按鈕比較靠近，那麼使用者在移動端上就很容易出現誤觸的情況了。
如果想要解決這個問題，就需要根據實際情況重新調整尺寸和按鈕之間的距離，以適應瀏覽者手指交互的需求。下面是推薦的尺寸設定。
8、讓用戶在決定之前先行探索
讓使用者在對你的網站毫無瞭解的情況下就要求他們去註冊，其實是違反互惠互利原則的。曾有資料表明，讓瀏覽者過早註冊導致超過85%的用戶選擇了放棄和離開。
NetFlix 曾經給予用戶一個月的免費試用，不過使用者需要註冊之後才能使用這一福利。
一般說來，使用者在提供個人資訊註冊之前，會瀏覽一下網站內容，瞭解這個網站是什麼樣的類型、提供什麼樣的服務，再做決策，對於從未聽過的品牌尤其是如此。
想要打破轉化率的壁壘，你在設計網站的時候應該做到下面幾點：
·提供無需登入就能完成的體驗流程
·讓瀏覽者可以作為訪客進行購買
·只有當需要使用者提供相關資訊的時候才要求註冊，並且盡可能少的讓使用者提供資料
9、告知使用者選擇更合理的螢幕方向
不同的螢幕方向下，使用者的瀏覽體驗會完全不同的。使用者慣於在同一螢幕方向下完成全部的操作，所以提醒他們切換方向可以提升網站瀏覽的用戶體驗。
所以，當你的網站偏向展示性，並且使用橫屏時瀏覽體驗更佳的話，不妨使用互動設計來提示瀏覽者。
10、讓產品圖片可以放大擴展
當瀏覽者在網上購物的時候，總希望能看到產品的高清無碼大圖（尤其是服裝），如果無法放大查看，瀏覽者的沮喪會直接影響產品銷量。所以，應當提供高品質的產品圖，並添加放大的功能，讓瀏覽者足以看清細節。
11、各種設備之間的切換更容易
並非所有的瀏覽者都習慣於在移動端上瀏覽、購買，有些瀏覽者僅僅是習慣於在移動端上搜尋資訊。
所以，你應該提供一個簡單的方法來保存資訊，讓它們能夠跨設備使用，當使用者離開移動端設備的時候，同樣可以在PC端上瀏覽、查看、購買。
·確保使用者能夠通過分享或者發送電子郵件/社交媒體，來保存資訊。
·同步Wishlist，以收藏的形式保存項目。
12、讓使用者在一個流覽器視窗中完成操作
智慧型手機的視窗間切換終歸比PC端麻煩，使用者找不到原來的頁面的風險是現實存在的。儘量讓使用者在一個視窗中完成全部的瀏覽和操作，簡化流程和複雜的互動，讓瀏覽者一直待在一個地方。
結語
其實移動端的網頁設計並不只是這麼簡單，這十二個技巧也相當的基礎，但是它們提供了一個不錯的入門指引。每一個網站都有其獨特的地方。但是無論如何，要記住，你的受眾不是設計師，而是瀏覽者，你的設計應當承載用戶的期待，實現它們的目標，而非成為負擔。
原文：http://www.uisdc.com/principles-of-mobile-site-design
本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設連結，違者必究。謝謝各位編輯同仁配合。
Google將在2017年1月10日之後，針對包含以下廣告的行動網頁祭出處罰，調降他們的搜尋排序。(圖／翻攝Google Blog)
為了提升行動平台網頁搜尋速度，搜尋引擎龍頭Google可謂是不遺餘力。根據Google在Webmaster Central Blog所公布的訊息，他們將針對內嵌侵入式廣告的行動網頁祭出處罰，以調降這些網頁的行動搜尋排名為方法，期待網頁內容能進行調整。這無疑對於內容提供商而言是項嚴厲的法則，但對於一般網友來說，將是樂見其成。
對於習慣使用手機、平板進行網頁搜尋的朋友，點入新網頁後跳出的廣告，肯定是扼殺網頁載入速度，以及你心情的因素之一。為了進一步提升行動網頁的載入速度，Google將針對在行動網頁中內嵌三種廣告的網頁進行調降搜尋排序的處罰，然而，如果在2017年1月10日之前先行修正，就可免罰。
Google針對行動網頁侵入式廣告也給出了定義，凡以「跳出式廣告」、「單獨佔領整頁的廣告」、「占據整頁的折疊式廣告」形式存在的網頁廣告，都必須要限期改善。然而，行動網頁若是以類似形式，在使用者瀏覽網頁時跳出「需使用cookie權限的提醒」、「年齡限制提醒(例如，未滿18歲不可進入)」，或是占據版面較小，不會影響整體網頁閱讀的廣告，都不在此限。
［image credit:Basecamp mobile］
Mashable的Brian Casel(@CasJam)是一個網頁設計師， 他觀察到網路行動化的趨勢越來越值得被重視，因為使用手機上網的人比以前多了很多，這對網頁設計者以及網頁擁有人來說意味著甚麼呢？
撰文者：吳姓網友
「想法錯了，資源就放錯了，連帶著整個產業都錯了」是我這段時間以來的體會，尤其是網路事業。 我發現很多企業主對於網站設計的方法與流程，與專業者的認知落差非常巨大。若是小型公司網站也就算了，但這個社會連創造新平台、大型商業網站也都如此想像時，這差距就會懸殊到徹底阻礙整個產業的進步。想一想，勢必要把它寫清楚。
傳統設計流程
一般公司，甚至包含現在的網路新創公司，對於網站設計的想像，就是請「網頁設計師」從平面設計開始，畫出這個網站的 look & feel（看起來、感覺起來如何），甚至要你多設計幾個樣貌、比稿之後，挑選中意的設計，再送給前端工程師切版、後端工程師套版，網站就上線了。我們暫時把這種流程稱為「傳統設計流程」好了。
那為什麼我們台灣的商業網站，多數設計還是不到及格邊緣呢？即使一開始設計不錯，但為什麼品質就是會慢慢向下變調呢？
其實問題就在於前面提到這種製作方法與流程，已經不符合時代了。一般大家認知的「傳統設計流程」也就是大概距離 15 年前、網路泡沫時代的「我的第一個 Homepage」的作法。當時的企業非常勇敢，我也參與其中，無論任何公司都要搭上 .COM 的潮流。作法確實是直接跳過 HTML 到 Adobe 軟體去製作所有的網頁。而其中 Adobe 軟體就包了好幾個項目：Photoshop、Dreamweaver、Fireworks、Flash 等等，主宰了大概快十年的網頁設計市場。
不過也因為這種「傳統設計流程」模式固定下來很久⋯⋯往往網頁設計公司經營到最後，變成專門供應廣告設計事務所製作「活動網站」，這種案例並不少見。也常常有人去應徵「網頁設計師」，搞到最後都在做線上 EDM 或活動網站，更慘一點還有幫忙做廣告 banner⋯⋯設計師自己感覺到連尊嚴都沒了。
更慘的是⋯⋯常看 104 徵才的內容就能知道，連現在 2016 當紅網路新創事業的公司還是一樣的狀況。如果這個市場環境裡的「網頁設計師」職位內容一直是混亂的，代表企業看待網站的層級就有根本上的問題：網站普遍在企業內既然被視為是次要的、替補的，企業對於網站設計的想法，就不會與時俱進。
這樣的流程早在 2010 之前就被淘汰了，而我們還在呼籲這件事。
時代改變後，如果「品牌、傳播媒體」或「平台」還使用「傳統設計流程」來製作，悲劇就會不斷的重複發生
首先，用「平面」來設計網站，就好像在一張紙上畫圖，既不能互動，又不能想像在各種不同寬度上的模樣。平面對我們的用途，僅能確認一個大概的方向。再來，如果一開始就在平面上模擬到最後的模樣，到最後切版、套版、上線之後，經營幾個月，風格一定會脫離一開始設計師模擬的畫面。然後過一季面臨各種文章更新、或新增功能、需求，整個風格就開始崩壞。
上面一段短敘，我們就能發現幾個現代要因應的問題：
要求更豐富的互動操作
面對多樣化上網裝置
工程品質：永續營運、品質的一致性
1. 更豐富的互動操作
網站如果只是從平面設計搬到網路上，那就不叫網站，那只能稱做 EDM，就像是你在服飾網站訂閱的電子報一樣，那也是 HTML 寫成的，但完全不能操作。你頂多只能點選連到該去的地方而已。而台灣有許多網站就是這樣設計完成的，前端工程師必須讓互動成真，必須修改幾乎要砍掉重練的 HTML 原始碼。另外，我們現在的輸入裝置除了滑鼠以外，可能還有觸控版、滾輪、或是觸控螢幕等。這是平面設計階段完全體會不到的。
2. 多樣化上網裝置
在 2000 年的網站設計觀念，從桌上型電腦開始到筆記型電腦，就有著各種不同的大小，但還好這些裝置螢幕都還算大，如果視窗放的太小，無法看到網站的全貌，就算他活該。我們現在上網的方法變多了，在 2016 年，有平版電腦、手機電腦（其實現代的手機應該叫做隨身手持電腦附屬手機功能）、甚至還有全螢幕分割模式、TV 或其他物聯網瀏覽器等，你不可預期的各種尺寸大小。這也是平面設計階段完全體會不到的。
3. 工程品質：永續營運、品質的一致性
從平面思考的網頁設計，其結果再怎麼讓人「眼睛一亮、哇、不得了」，都是一時的激情。等到交給前端工程師開始切版、套版之後，就不再是那麼熱血的事。因為純平面網頁設計師不知道程式的限制在哪，而純前端工程師也不知道設計的限制在哪裡。都不知道，自然也無法突破障礙，雙方都只能打出最安全的牌：盡量不要出錯。
歸結上面三點，你就會知道到底為什麼公司會為了因應各種活動、專案，就得勞師動眾，把整個開發團隊、設計師的產能都吃光、產能都調度去做臨時的專案。加上 RWD 觀念興盛，這些工作難度又再度雪上加霜。這完完全全就是因為決策層缺乏系統觀念。可怕的是經過惡性循環、缺乏人力的情況下，也會誤認為設計一套系統是浪費錢。
我們需要的是「設計系統」本身，而不是只有設計頁面長相。這就是目前台灣商業網站設計品質遇到困境的主因。事前做了妥善準備，在有設計系統的狀況下，完成一個新專案就不再是那麼艱辛的事，也許還可以把重複浪費使用的精力，拿去挑戰更困難或更高收益的內容。
設計系統
做產品前，先做這個產品的系統。做一整套事業之前，先做這整套事業的系統。分子化元件之後，使用設計系統來完成你的前線產品，其中可能包含（不限於）：
*跨媒體視覺識別系統（平面版、數位版）
*跨平台 UI 元件系統（HTML/CSS/JS/或其他平台相關格式之 Style Guide）
*商業邏輯分子化系統
設計系統本身確實需要額外的計畫、預算，企業主如何讓設計系統成為可能？
當想法對了，就會產出額外要做的事，也會省下事後不必要的浪費。不過⋯⋯若要問企業有沒有認真？從計畫與預算就能夠看出。
如果只是交代設計師、工程師在原有專案的壓力之下，剩餘時間又多做一個系統設計，相信只會提高離職率而已。
這必須是一個「認真的專案」，而不是「Side Project」之類的勵志成功小品。
調查規模
其實，只要先透過調查、診斷，先確認企業 1–2 年之內的野心、佈署、未來可能計畫，就能統整出適合自己事業的規模，需要做出的設計系統範圍。這步驟無論是內部主管自己多花來做、或請外部專業公司評估都可以。
不同規模的事業體、不同產業，製作設計系統的規模、範圍也就不同。我們不一定要花非常多的預算來做這件事，僅需求合理、合乎自己的需要即可。
下放資源
有了大致的範圍後，根據製作量的多寡，少至一個禮拜只挪週五來做，多至成立三個人的小組來負責做這件事，也都是比完全不做來的更好。而你投入的資源，可以是現成的人月時間，或是你的預算：例如產品的規模龐大，委託專業的設計公司來做，可能會比花現成的人力還要省時省錢。若資源暫時不足，也沒有關係。其重點就在於真正的面對這件事，是高於第一線業務的層級，非做不可。必須安排企業中菁英的決策者來下定決心、計畫、安排未來的時間與確切預算下去執行。等待在企業最有能力承擔的時候，把底打好。另外，設計系統也需要時俱進，當事業、產品線有擴展後，研發必須再回饋、增長自己的系統，長久以來就能夠發揮對產業的影響力。
唯有這麼做，網路事業才能呈現出品牌的樣貌，隨設計系統的累積不斷改進品質。面對設計人才的需求，也變為使用真正的高階人才。而前線業務的進行也變得更容易有規則，降低人事變動對企業的殺傷力。網路產業才會開始樂觀、令人嚮往了。 （5/10 2:35am 編修）
連結line帳號