前言 Bottom Navigation 通常作為主畫面的元件之一,位於畫面底部,能讓用戶操作並進行各個畫面的導航,是個以操作體驗與畫面跳轉為重的組件 Bo...
大綱 Standard bottom sheet Modal bottom sheet Expanding bottom sheet Common Using...
前言 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天每天要燒腦一兩個小時;但到了報名的最後一天,還是忍不住填了資料,想把自...