$30 off During Our Annual Pro Sale. View Details »

行動版網頁不就是把網頁縮小而已嗎?

jiimmysu
July 13, 2014

 行動版網頁不就是把網頁縮小而已嗎?

jiimmysu

July 13, 2014
Tweet

More Decks by jiimmysu

Other Decks in Design

Transcript

  1. 行動版網頁不就是把網頁縮小而已嗎?
    [email protected]
    http://jimmysu.logdown.com/

    View Slide

  2. 大環境

    View Slide

  3. 你的網站在行動裝置上能看嗎?
    • 線上輸入表單 : 挑戰人類耐心極限的
    • 一直縮放、拖曳、縮放、換頁、拖曳、縮放
    • 很難點的按鈕
    • 「滑鼠移過」才會看到某些按鈕,但手機上沒有滑鼠移過這回事。
    • 全Flash的網站、或是選單是Flash的網站,在行動裝置根本看不到
    • ….族繁不及備載

    View Slide

  4. 案例宣導
    設計,不是美化 — 2011 台北設計大展的爛設計
    MR JAMIE ─ 創業者需要的啟發,每日新鮮供應
    總統府700萬網站,華麗的突槌+手機可愛版
    T客邦

    View Slide

  5. 在行動裝置呈現資料的選擇
    原生APP RWD 行動專屬網站
    特色 • 可使用較多的手機硬體、軟
    體功能,如推播通知、各種
    感應器、離線操作、讀取手
    機文件…等。
    • 要通過審核跟繳年費才能上

    • 行動/桌機的網址相同,利於搜尋
    引擎索引與分享
    • 後端程式只要寫一次,其他都是
    美工跟前端的事。
    • 可引導客戶將網站「加入主畫
    面」,在客戶桌面佔有一席之地。
    • 區分手機版網站
    與完整版網站
    • 編排與效能最佳

    缺點 • iOS/Android 跨平台問題
    • App後續維護與更新問題
    • 搜尋引擎難以索引app內容
    • 動線的規劃與設計
    • 資料呈現需有規劃
    • 高度依賴客戶端瀏覽環境
    • 載入速度問題
    • 要維護兩個網站
    適合 • 預算充足的客人
    • 有特別互動需求者
    • 需要極快速反應的程式、複
    雜的動畫、遊戲 … 等
    • 需要下載付費才能使用的網
    路服務
    • 一個網站打天下的客人 • 原有網站架構龐
    大、改版工程浩
    大的客人

    View Slide

  6. 其他行動裝置資料呈現方案
    Web App AIR For Android/iOS
    App套版程式、
    App開店程式
    製作電子書
    (Epub格式或各大軟體
    市集架上的電子書/互
    動電子書)
    用網頁方式製作,
    再用 Phonegap 之類
    的程式,封裝編譯
    各手機平台的 App。
    使用 Flash 相關開發
    工具製作,編譯成
    App。
    範例:
    • Android Authority、
    • Xure Apps
    • United Cloud
    Apps
    • 91mai
    • …
    使用 Adobe Indesign 等
    的程式製作互動電子書,
    在市集上架。

    View Slide

  7. RWD(Responsive Web Design)
    實作技術細節
    • 基本心法1 – 流動布局
    • 內的設定
    • 判斷使用者
    • 基本心法2 –Media Query
    • Media Query & Media Type
    • Media Query - device-pixel-ratio
    • 掌握解析度-慎選 Breakpoint
    • Table 如何 RWD
    • 選單如何 RWD
    • 行動裝置上的網頁動畫
    • 圖片也要RWD
    • 圖示也要RWD
    • 嵌入多媒體也要 RWD
    • 設定Flash替代內容
    • 表單準備好了嗎?
    • 按鈕準備好了嗎?
    • 網頁原本用的Plugins準備
    好了嗎?
    • 文書人員上資料時要小心
    • 測試工具

    View Slide

  8. RWD(Responsive Web Design)
    基本心法1- 流動布局(Fluid layout )
    http://www.weareconvoy.com/2013/12/04/responsive-vs-adaptive-layout-design/

    View Slide

  9. 內可以設定的
    name="viewport"
    content="width=device-width; initial-scale=1.0" />
    • Width=device-width / 固定數值
    設定網頁與手機可視寬度或是實際寬度同寬
    • user-scalable 設定網頁是否可被縮放
    • initial-scale 初始縮放倍率
    • maximum-scale 最高縮放倍率
    • minimum-scale 最小縮放倍率

    View Slide

  10. 內可以設定的
    http://frugihoyi.wordpress.com/2013/04/20/optimizing-webpages-for-mobile-devices-part-1-the-viewport-meta-tag/
    有加 viewport 沒有加 viewport
    * 如使用一些網域轉址服務或免空網頁,會在原有網頁外面加一層frameset,將導致武功全廢

    View Slide

  11. 內可以設定的
    • 主畫面圖示相關設定

    • iOS隱藏瀏覽器按鈕列 (網頁要加到主畫面)

    • 電話號碼不讓人點

    網頁裡有一堆數據資料,容易被手機誤判為電話號碼時可使用
    • 讓IE用最新的文件模式來執行網頁,而不要進入相容性模式

    不然網頁在PC IE上看可能會爆炸

    View Slide

  12. 判斷使用者
    方法1 : 依裝置的 User Agent 做切換 (ex.LV網站)
    if ((navigator.userAgent.match(/iPhone/i))
    {alert(“iPhone!!”);}
    前後端各種User Agent偵測法整理
    http://detectmobilebrowsers.com/
    方法2: 使用 Modernizr
    判斷裝置是否支援某項功能,來執行對應的JS語法
    http://modernizr.com/docs/

    View Slide

  13. 基本心法2 –Media Query
    方法3 :
    使用CSS3 Media Query判斷裝置特性,執行
    對應的CSS
    • 螢幕方向 @media (orientation:landscape){}
    • 螢幕比例@media screen and (device-aspect-ratio:
    16/9){}
    • 螢幕dpi @media screen and (min-resolution: 192dpi){}
    • 螢幕寬度 @media screen and (max-device-
    width:600px){}

    View Slide

  14. Media Query & Media Type
    • @media all and (max-device-width: 400px)
    – 裝置寬度,PC瀏覽器不認得
    – max-device-width 最大到… (小於)
    • @media all and (max-width: 400px)
    – 視窗寬度
    – max-width 最大到… (小於)
    • @media screen and (max-width: 400px)
    – screen: 電腦螢幕、手機、平板螢幕
    – print: 印表機
    – projection: 投影機
    – tv: 電視機

    View Slide

  15. Media Query - device-pixel-ratio
    devicePixelRatio = physical pixels(物理像素 ) / 設備獨立像素 dips
    1 pixel 不只是 1 pixel

    View Slide

  16. 常見裝置的 device-pixel-ratio
    線上檢測您的裝置 device-pixel-ratio
    http://bjango.com/articles/min-device-pixel-ratio/
    1.0 1.3 1.5 2.0 3.0
    • 一般PC
    • • • iPad mini 1

    • Nexus 7
    (1代)
    • Asus
    MemoPad
    HD 7
    • HTC Desire HD
    • Kindle Fire HD
    • Samsung S2
    • 視網膜 Mac
    • iPhone 4+
    • iPad 3+
    • HTC One X
    • Samsung S3
    • Samsung Note 2
    • Nexus 7 (2代)
    • HTC One
    (M7)
    • HTC
    Butterfly
    • LG G2
    • Samsung S4
    • Samsung
    Note 3

    View Slide

  17. 用device-pixel-ratio判斷裝置特性,
    執行對應的CSS
    @media only screen and (-webkit-min-device-
    pixel-ratio: 2),
    only screen and ( min--moz-device-pixel-ratio: 2),
    only screen and ( -o-min-device-pixel-ratio: 2/1),
    only screen and ( min-device-pixel-ratio: 2),
    only screen and ( min-resolution: 2dppx) {
    CSS code
    }
    要對應各家瀏覽器,必須要寫這麼多行
    你也可以用Sass或一些編輯器外掛來幫你補瀏覽器前綴詞(prefix)

    View Slide

  18. 掌握解析度-慎選 Breakpoint
    First Screen
    會看到不一樣的東西
    手機(直)
    平板(橫)
    手機(橫) 平板(直)
    視窗沒有放到最大的電腦螢幕
    多一吋螢幕就多一份重量的筆電

    View Slide

  19. 目的:
    – 在不同寬度的螢幕上呈現的東西要如何編排?
    – 在不同高度的螢幕上呈現的東西要如何編排?
    – 同一寬度條件,但顯示高度不同,要如何編排?
    – 同一份資料在大螢幕上看,縮小之後是否還看
    得清楚?
    – 如何最快速達成上述需求,而且不用寫許多組
    css?

    View Slide

  20. 掌握解析度-慎選 Breakpoints
    • 320 : Smartphone 手機打直
    • 481 or 568 : Smartphone 手機打橫
    • 768 : 平板 打直
    • 961 : 平板打橫 / 小筆電 / 瀏覽器視窗沒有放到最大的PC
    • 1025 : 桌機
    • 1281 : 寬螢幕
    Style.css
    @media only screen and (min-width : 320px) and (max-width : 480px) {手機直}
    @media only screen and (min-width : 480px) and (max-width : 595px) {手機橫}
    @media only screen and (min-width : 595px) and (max-width : 800px) {平板直}
    @media only screen and (min-width : 800px) and (max-width : 1024px) {平板橫}
    @media only screen and (min-width : 1024px) and (max-width : 1224px){寬螢幕}

    View Slide

  21. Media Query - 另一種寫法


    rel=“stylesheet” >
    rel="stylesheet" >

    缺點 : 改變breakpoint時要動 html,或是一次要修改好幾支css檔

    View Slide

  22. Bootstrap菜鳥
    • Bootstrap 2 預設為螢幕寬<768時,選單會摺
    疊變為≡ 圖示,但是如果視窗沒放到最大…
    • 使用position:fixed屬性,選單高度變更沒有隨
    螢幕寬度再作處理,導致蓋住網頁上的內容

    View Slide

  23. 慎用 position:fixed
    http://dbushell.com/2013/09/10/css-fixed-positioning-and-mobile-zoom/

    View Slide

  24. Table 如何 RWD
    Table切版的網頁談RWD? 免談!!

    View Slide

  25. Table 如何 RWD
    網頁還是離不開表格
    • 會員購物紀錄、訂單
    • 報表
    • 菜單
    • 規格資料
    • 購物車結帳畫面
    • 表單類
    • 在後台用table排資料
    X
    目標 : 一長串的資料在小螢幕要如何呈現

    View Slide

  26. Table 如何 RWD – 範例1
    讓table出現卷軸法
    Ex.Bootstrap
    缺點,如果有很多列,卷軸會在螢幕外

    View Slide

  27. Table 如何 RWD – 範例2
    行列置換法
    缺點: 不適合有跨欄跨列的表格、表格內不能混雜其他東西

    View Slide

  28. 四、Table 如何 RWD – 範例3
    資訊收合法
    Ex: Foo Table

    View Slide

  29. Table 如何 RWD – 範例4
    要看什麼自己選法
    Ex: Responsive tables
    by @nadangergeo & @filamentgroup
    缺點同範例1

    View Slide

  30. 選單如何 RWD
    • 目的: 一組menu的html,隨環境顯示正確的選單
    這就是為什麼我們要用一些前端的framework,因為他都幫我們做好初步規劃了


    項目1
    項目2

    項目1
    項目2


    項目3


    View Slide

  31. 選單如何 RWD – 範例1
    選單
    在行動裝置變成下拉式Select選單
    優點: 結構單純,不會有點不到、破圖…等問題
    缺點: Android/ iOS / WP 的各瀏覽器 select 顯示效果都不一樣

    View Slide

  32. 選單如何 RWD – 範例2
    在行動裝置變成下拉式選單
    Ex.Bootstrap預設樣式
    優點:
    可自訂樣式
    方便顯示多層分類
    缺點:
    字少時在平板/大手機可能造成空間浪費
    Hamburger icon的介面設計探討

    View Slide

  33. 選單如何 RWD – 範例3
    Off canvas Menu
    側邊展開選單
    Ex.
    Foundation,
    Google starter kit,
    Jquery Mobile,
    Yahoo Pure…
    以上framework的行動選單樣式都是
    Off canvas Menu

    View Slide

  34. 其他行動裝置選單範例
    矩陣式
    錨點式

    View Slide

  35. 其他行動裝置選單範例
    獨立選單頁( http://rvlt.com/ ) 無選單式(非RWD)

    View Slide

  36. 其他行動裝置選單範例
    http://devco.re/
    動畫效果式 頭尾固定式

    View Slide

  37. 選單如何 RWD – 現實面
    項目超多又有圖…
    ? ?
    選單整塊都是圖片….
    網頁有好幾組選單的時候...
    • 主選單
    • 註冊、登入、等會員功能選單
    • 切換語系選單
    • 搜尋功能
    • 左邊分類選單…

    View Slide

  38. 行動裝置上的網頁動畫
    經典文字閃光動畫
    常用於建築業、室內設計、工業類網站
    經典落葉+陽光動畫
    萬用素材
    美工通常都做過以下 Flash 動畫,但在手機上要怎麼辦呢?
    飛翔軌跡動畫
    引導視線,或拖延網頁停留時間專用
    經典星光閃爍動畫
    常用於深色背景的網站

    View Slide

  39. 技術/格式 可用軟體 優點 缺點
    Gif Adobe Flash, Photoshop 相容性高 檔案大、256色、半透明邊緣爆炸
    Javascript + css 繪圖軟體+文字編輯器 相容性高 製作時間拉長
    Html5 canvas Adobe Flash, Google web
    designer, Adobe Edge
    animate
    效能 IE8、不夠直覺
    Svg Adobe Edge animate / 繪
    圖軟體+文字編輯器
    效能、向量 IE8、不夠直覺
    Css3 Adobe Edge animate / 繪
    圖軟體+文字編輯器
    效能、方便 IE8、不夠直覺
    嵌入影片
    (flv, mp4)
    Adobe After Effect 符合一般作
    動畫的流程
    • 影片載入前->畫面沒東西
    • 串流影音->播到一半lag或停

    • 無法與影片中的元件互動
    • 有些裝置會鎖自動播放
    比較常見、相容性高的解決方案
    行動裝置上的網頁動畫

    View Slide

  40. 新時代網頁動畫案例
    IE团队技术揭秘:“月熊志”是怎样炼成的?(3D webGL) 前端技术:迅雷7.9宣传下载页面CSS3动画实现心得

    View Slide

  41. 圖片也要RWD
    目的 圖片類型 手段
    • 小螢幕顯示比較小張的
    圖,
    減少載入流量
    提高縮放與滑動時的整
    體網頁效能
    • 高品質螢幕(如Retina
    Display)顯示更好的圖
    • CSS
    圖片
    • 使用media query切換
    • HTML
    圖片
    • 使用 javascript 套件切換 ex. rwd.images.js



    • 由伺服器端處理
    • Picture element (未定案)
    • srcset (未定案)
    隨螢幕滿版縮放,符合全
    畫面(Fit Screen)
    使用相關Css 屬性
    max-width, min-width, width
    max-height, min-height, height
    Background-size, background-cover

    View Slide

  42. 圖片也要RWD – 應用題
    ???
    如果使用 Fit screen 方案
    • 字太小看不清楚
    • 要一直縮放,滑動才能看完整張圖
    一般製作網頁輪播展示圖片,或是電子郵件 edm 會遇到的問題…
    http://placekitten.com/

    View Slide

  43. 圖片也要RWD – 應用題
    http://static.elliotjaystocks.com/responsive-
    background-images/examples/problem1.html

    View Slide

  44. 圖片也要RWD – 應用題
    字太多,導致精心計畫的圖片與編排破功
    http://static.elliotjaystocks.com/responsive-
    background-images/examples/problem1.html

    View Slide

  45. 圖示也要RWD
    • http://responsiveicons.co.uk/
    • http://www.smashingmagazine.com/2014/
    03/05/rethinking-responsive-svg/
    • https://useiconic.com/guides/using-iconic-
    responsively/

    View Slide

  46. 嵌入多媒體也要 RWD
    src="//www.youtube.com/embed/CfpzKs
    XeluY?rel=0" frameborder="0"
    allowfullscreen>
    縮放寬高的算式要寫好,不然會出
    現黑邊。
    要額外再寫 css 覆寫 iframe 寬度,
    不然影片會被裁掉 、或是超出版面
    ex.Responsive Youtube Embed, fitvids.js

    View Slide

  47. 設定Flash替代內容
    在電腦上看到華麗的flash動畫選單,
    在行動裝置上還是可以正常瀏覽與點選
    若使用 swfobject.js 嵌入Flash
    可將替代文字修改
    成靜態選單超連結

    View Slide

  48. 表單準備好了嗎?
    一般網站的輸入表單
    • 搜尋
    • 聯絡表單
    • 報名表單
    • 線上訂購單
    • 網站管理後台
    購物網站常見的輸入表單
    • 會員註冊表單
    • 會員登入表單
    • 忘記密碼表單
    • 購物結帳
    • 金流相關表單
    • 物流相關表單

    View Slide

  49. 表單準備好了嗎?
    如何改善在行動裝置上痛
    苦的輸入流程?
    • 自動完成(auto complete)
    • 正確的表單屬性設置
    • 減少必填欄位
    • 欄位驗證失敗可以即時提示
    (不要等全部填完送出之後才提示)
    • 如果欄位驗證失敗,不會把使用者輸入
    的資料清掉。
    • Oauth第三方登入功能
    • HTML5 Geolocation API
    • 賣非常棒的產品,表單再難用,客人也
    會買。(???)

    View Slide

  50. 表單準備好了嗎?
    選項A 選項A
    選項A
    選項A

    感應區域 感應區域
    讓選項文字也變成可點擊的感應區域
    Checkbox, radio 點擊區域問題

    View Slide

  51. 表單準備好了嗎?
    type=email
    type=tel
    type=number
    type=text
    讓使用者在輸入email/電話/數字時,可以直接彈出正確的鍵盤
    正確的表單屬性設置

    View Slide

  52. 表單準備好了嗎?
    太主動的「自動拼字修正」功能可能導致輸入錯誤的資訊
    可設定 關閉自動拼字更正功能

    View Slide

  53. 表單準備好了嗎?
    瀏覽器會自動幫你把開頭文字變大寫,導致網站登入、驗證碼檢查都無法使用
    就要設定
    http://www.smashingmagazine.com/2013/05/21/recommendations-mobile-commerce-websites/

    View Slide

  54. 表單準備好了嗎?
    可使用的input屬性與瀏覽器支援度查詢
    http://www.wufoo.com/html5

    View Slide

  55. 表單準備好了嗎?
    • 留意輸入框寬度是否過短,造成輸入或確認的困難
    • 欄位說明或名稱請放在左邊或上面,因為鍵盤輸入時會蓋住網頁下半部
    http://www.smashingmagazine.com/2013/05/21/recommendations-mobile-commerce-websites/

    View Slide

  56. 表單準備好了嗎?
    50 +
    - 我打錯了 X
    可以看密碼有沒有打對 可以快速更改數量 可以快速清除輸入內容
    用點的驗證碼 表單元件的取捨
    http://uxmovement.com/forms/stop-misusing-select-menus/

    View Slide

  57. 按鈕準備好了嗎?
    按鈕 按鈕
    • 西方研究:
    按鈕最好大於48px
    http://touchlab.mit.edu/p
    ublications/2003_009.pdf
    • 清楚知道點擊範圍
    • 實際感應區域有多大?
    <------- 48px ------>
    <------- 48px ------>
    • 是按鈕還是字?
    • 畫面較簡潔,
    感應區域感覺也變大了
    穩 潮

    View Slide

  58. 網頁原本用的Plugins準備好了嗎?
    • Modal box 功能 (如Lightbox, jQuery UI Dialog)之類的
    特效,在行動裝置上的版面會不會有被裁掉、點不到按鈕
    的情況發生?
    • 是否有經由hover滑鼠事件才能觸發的重要功能或按鈕?
    • 是否有需按住鍵盤某鍵,滑鼠再點擊某處,才能使用的重
    要功能?
    • 一些變更瀏覽器預設表單樣式的套件,在行動裝置上能否
    正常點擊、瀏覽、使用?
    • 一些PC only的表單元件(如select multiple),在行動裝置該
    如何讓人操作?
    • 網頁上是否有使用flash元件的功能(如多檔選取上傳),在
    行動裝置上會功能失效?

    View Slide

  59. 文書人員上資料時要小心
    • 避免手動換行
    • 有些高級文書人員在PO新聞或商品資料時會用
    table排資料,但是在行動裝置上…
    • 實際測試圖文、多媒體混排在不同裝置上的呈現
    是否適當。
    (中央社記者林孟汝台北30日電)
    國際液化瓦斯需求增加,依浮動氣價機
    制估計,7月桶裝瓦斯每公斤恐上漲新
    台幣0.5元,天然氣價格每立方公尺則
    微幅調漲;實際調幅要等中油公司7月
    1日下午公布。
    (中央社記者林孟汝台北
    30日電)
    國際液化瓦斯需求增加,
    依浮動氣價機
    制估計,7月桶裝瓦斯每
    公斤恐上漲新
    台幣0.5元,天然氣價格每
    立方公尺則…
    寬度變動時…
    手動斷行,表面上創造美觀的版面

    View Slide

  60. 多看、多學、多做
    • 看看別人的作品
    http://responsive-jp.com/
    http://mediaqueri.es/
    • 查詢裝置資訊
    Viewport Sizes
    • 查詢瀏覽器支援度
    http://caniuse.com/
    • 查詢device-pixel-ratio
    http://bjango.com/articles/min-device-pixel-ratio/
    • The Current State of HTML5 Forms
    http://www.wufoo.com/html5

    View Slide

  61. 測試工具
    • All-New ScreenQueries
    • Viewport Resizer
    • Android SDK
    • Opera Mobile Classic Emulator
    • Remote Debugging

    View Slide

  62. 進階的RWD
    • 不要什麼東西都由客戶端的瀏覽器與硬體
    設備來處理,也可以由伺服器後端處理,
    提高網站效能。
    • 如何針對不同的裝置,適當地呈現內容。
    • 建立各裝置間一致的使用者操作體驗。
    • 更方便直覺、多功能的開發工具或框架。
    • 優雅降級/漸進增強 的設計理念
    • $$$

    View Slide