iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1

這幾天想來分享幾個設計行動版網頁要素,想必也有許多人開發過行動版網頁,也有許多的手機APP是透過嵌入一個Webview將網頁放到其中,大多數的使用者是感受不出來的,還是有一部分的人可以感受到,畫面不是操作的那麼流暢,這之中各有利弊,今天不是針對webview來做討論,提到一些我開發手機版的網頁會去注意的事項,也歡迎大家再下面留言,給予更好的建議。

Responsive Web Design(RWD) 響應式設計

簡單帶過吧!網路上有許多的文章可以參考,打「RWD、響應式」都可以找的到,簡單來說你可以不用寫不同版本的網頁,同一個網頁透過CSS @media 的屬性來調整使用者看到的內容,下面有一個CSS的範例,當你縮小視窗的時候文字的顏色也會跟著改變

div {
  color: black;
}

@media screen and (min-width: 560px) {
  div {
    color: red;
  }
}

有許多的網站是用響應式的設計,像是中華民國總統府(這個應該夠有份量了吧xDD),透過手機已及電腦看到的畫面,有不一樣的呈現方式,因為總統府的網頁沒有商業模式,沒有利益上的問題,但在許多的購物網站可以看到,分別設計桌上版及行動版的網站,因為他想要賣廣告,在手機看到的廣告會與電腦上看到的廣告不一樣,因為這樣所以這些網站在設計為護這些頁面上的成本相對來說較高,不同的模式會有不同的設計,我想講到這邊應該可以了解自己想要的是什麼樣的模式吧!
簡單說響應式有幾個優點

  • 維護成本低
  • 開發成本低
  • 相較於APP不需下載上架等手續
  • SEO排名較高 (流量、點擊率...等等)
    想研究RWD請洽Google

Layout設計 & Button的大小

對於行動版的Layout尤其重要,如果在小小的螢幕下面塞了滿滿的東西,使用者看起來應該不會覺得很開心吧。
在手機的設計中超過五個的按鈕或是擺放,會造成使用者的操作不順。

露天拍賣
(露天拍賣 行動版)

手機
(Android手機 Google搜尋)

POPUP的廣告最最最討厭的就是按鈕小小的,還讓你按到連結的廣告,在設計

各個瀏覽器的支援度

曾經在一個機會下,幫朋友寫了一個行動版的網站,在開發的時候一直沒有出現問題,直到網站正式上線後卻發現很多的內容怎麼都跑版了,而且js怎麼也掛了,這時候才發現在每個手機看到的狀況並不會一樣,或許是手機版本過新,或手機版本過舊...等等,有許多的問題,所以在開發完成後,最好在每個裝置上都測試一遍,不斷的去修正這些問題,當你下次在開發新專案時,你將更注意這些細節。
當然你要怎麼測試,有許多的方法,我的好友在這次鐵人賽有寫了篇關於測試的文章系列Nighwatch,測試就是我們開發的流程,盡量去做到面面俱到的功夫摟。


減肥專欄

今天的減肥計畫,應該在晚上執行,今天主管們準備豐富的下午茶來替我們補補腦,減肥最辛苦的就是看到食物的時候,要先再三想一想「這熱量高嗎?我還要運動多久才補的回來?」到後面開始自我放棄「算了啦!胖就胖沒有什麼不好的,肥宅我也教了個可愛的女朋友」,最折磨人的其實是心理因素吧。來想想看,今天練練腿好了!

小知識

有沒有必要上健身房??
許多人會有這樣子的疑惑,我也曾經問過自己到底有沒有必要上健身房?常常聽到朋友、同事下班或是假日的時候都往建身房裡面跑,說為了健康、為了體態...有許多的原因,但最重要的是「」有沒有必要上健身房,沒有一定的答案,但如果你想要達到下面幾點,我建議你可以考慮

  • 有正常規律運動習慣
  • 平時有在訓練但手邊的器材不夠
  • 真的下定決心要運動
  • 有一筆預算

上健身房也是要一筆花費,或許你只是想減肥,那我建議你可以到公立的運動中心或是操場跑跑,先建立起運動的好習慣,再加入健身的行列也不遲喔!


每日一句

有人說,男工程師穿網襪很奇怪
不是很奇怪,是因為你不常看到男生穿網襪
By 從網襪轉型黑絲的工程師


上一篇
Day4 初次見面Vue!
下一篇
Day6 全員耍廢中(中) Mobile設計
系列文
Go!從無到打造最佳行動網站30

尚未有邦友留言

立即登入留言