一個簡單的卡片樣式 Simple Card UI
從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。
前端工程師 August 的學習筆記 — solving problems, in simple ways.
從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。
自從 Google 設計了 Material Desgin 後,表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,連 Netflix 都在用了,看來是個好設計,就決定自己來寫一個。
本篇大綱:本篇要解決的問題、介紹GCP(Google Cloud Platform)及使用介面、使用GCP App Engine、安裝Google Cloud SDK、app.yaml、Cloud Build API、3個注意事項五、結論及心得
本篇大綱:圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入,實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後,頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據,4.57秒,下面這張是用了延遲載入後的數據,降到2.02秒。
GA大概是全球網站資料分析工具中市佔率最高的,所以AI提出的資訊會是大部份的網站都想知道的,像圖片中出現的Facebook來源狀況,跟網站的忠誠度,光看到標題就想點進去了。點進忠誠度這點,就看見以目前的網站數據,分析為什麼AI會覺得忠誠度降低的原因,並直接搭配圖表來說明。
上次遇到官網的讀取時間很耗了很久,但從 Network 也沒看出是哪一支檔案造成的情形。當時一位後端就在問說前端有沒有辦法用 JS 看頁面的效能狀況?今天原本是在查別的資料,一個巧合就看到側邊的推薦文章寫了一個 Performance API,在 Google 大神的指引下,找到了這篇:Performance API
Recent Comments