前言 Bottom Sheet 算是比較近期 App 非常熱門的應用設計,從底部彈跳出視窗。通常會搭配在 more action,提供用戶與當前情境畫面的細部操...
大綱 Simple Using Making card checkable Making card draggable Cards Elevated...
前言 Card 的設計,已經廣泛出現在我們的應用程式中,例如 ig、facebook 等等,是一種元件配置的設計方式,並非只是單純一個元件 Cards - D...
大綱 Alert dialog Simple dialog Confirmation dialog Full-screen dialog Anatomy Ke...
前言 Dialog 比起上一篇提到的 Snackbar,更為顯著且出現時會阻擋用戶操作 Dialogs - Design 分為下面幾個段落來介紹 Usag...
前言 Snackbar,是很常見的應用通知設計,位於應用程式的底部,提供用戶目前操作的任何相關訊息。由於 Snackbar 實作的篇幅較少,就一起講解 大綱...
大綱 Simple Using Linear progress indicators Circular progress indicators Anatomy...
前言 用來通知用戶正在進行的進程狀態,例如 加載應用程序、提交表單或保存更新應用程序的狀態並指示可用的操作,例如用戶是否可以離開當前屏幕。在進行異步或初始化時常...
前言 Divider 是能將要在 UI 呈現的重點內容,更加清晰且顯眼地表達。在我們想呈現列表形式的資料時,透過 Divider 的劃分,讓用戶能明顯辨識之間的...
大綱 Using Type Regular FABs Mini FABs Extended FABs Speed dial Custom Style Usg...
前言 為 selection controls components 最後一個元件,與 slider、checkboxes 在設計上都非常簡潔,一樣也是實作與設...
前言 FAB 作為一個獨立的 Action Button,位置上是在所有 Content 的前面並位於右下方,形狀上是圓形或依據不同大小可能為橢圓。通常對應著當...
前言 與上篇同為 Selection Controls Components,今天要講的是 Checkboxes,由於這些元件整體相對簡潔,Material D...
前言 接下來的篇幅會開始講到 Selection Controls Components 簡稱 “選擇控件”:允許用戶完成涉及做出選擇的任務,例如選擇選項、打開...
從零開始建置 CI/CD 會有很多挑戰,不同的團隊和產品會選擇的 CI/CD 工具有所不同。在開始設計流程之前,不妨思考自己的團隊以下幾點可以納入流程去思考:...
大綱 Simple Using Using Ranger Slider Adding/removing the value label Setting a...
前言 Slider 能讓用戶透過滑動按壓來對一系列的數值進行更加細部選擇的元件,常應用在音量控制或價格範圍等數值範圍選取的情境 Slider - Design...
大綱 Type Regular top app bar Simple Using Applying scrolling behavior Prominent...
前言 App bar:Top ( toolbar ),官方之所以這樣區分,是因為在 Material Design 分為 Top 與 Bottom,只不過在常見...
大綱 TextInputLayout Simple Using Adding a leading icon Leading icon attribute...
前言 今天要來介紹的是 Text fields ( Input Text ),與 Button 一樣都是在應用程式中很常見的元件,通常出現在需要讓用戶填寫資料的...
大綱 會分為下面幾個段落來介紹 Simple Using in layout in code add a icon Text Button in...
前言 觸控手機問世的那一刻,Button 就成了每個應用程式中不可或缺的元件。這也是我想把它擺到第一位來介紹的主因,作為 Mobile 移動端的開發工程師,都無...
Part I: 介紹 Sharik App 以及它的現有機制 EinkBro 身為瀏覽器,是個不斷從網路取得資訊的 App,但是卻完全沒有任何追蹤使用者的實作;...
安裝 NAVER 開發的瀏覽器 Whale 時,發現它有一個很好用的功能:可以同時在電腦畫面上顯示兩個網頁的內容,而且可以設定在其中一個網頁點擊任何連結時,都用...
EinkBro App 中的實作大都是用很舊很舊的技術。雖然隨著功能不斷增加,我有逐漸把一些檔案翻新成 Kotlin,和盡量把相關的邏輯抽出到獨立的 class...
鐵人賽的第二天,先來點篇幅短的開胃菜,暖暖身。 在使用 EinkBro 時,常會遇到網頁背景是黑色的,最常見的應該就是在開啟 ptt 的文章時。由於電子紙的特性...
從八月開始,又默默地注意到了2022鐵人賽開始報名。一直覺得不要再走這麼一回了,連續30天每天要燒腦一兩個小時;但到了報名的最後一天,還是忍不住填了資料,想把自...
12:55 Carol: 我啟動清除檔案的 Job,整個裝置的容量還是不太夠,該怎麼辦啊12:30 Alice: 垃圾筒也看過了?12:33 Carol: …...
前言 由於 Material Design 大多數的篇幅都注重在介紹 UI / UX 還有在 Android 中有哪些實用的元件 所以對前端工程師最大的好處應該...