UI設計效率提升有感!checklist.design幫你整理好UI設計清單

更新於 發佈於 閱讀時間約 2 分鐘

在之前【如何進行設計交付?做自己看得懂的檢核表、不要害怕看網頁原始碼…】那篇文中有提到,交付時可製作一份交付Checklist,這個概念也可以套用在設計過程中!

最近發現一個超實用的工具「Checklist Design」,Checklist Design 提供各種UI設計的確認清單,包括一些你可能會忽略的小細節,像是處理不同狀態的呈現,或者如何優化使用者體驗。重點還是免費的,開發者真的佛心!

實際使用下來 Checklist Design 不僅真的節省到時間,也能讓設計稿更有效率地達到基本需求。


Checklist Design 提供了哪些內容?

Checklist Design 提供了由小至UI元素大至頁面規劃的設計提醒,這邊拿幾個案例來做分享:

1.UI元件:按鈕 Button

在按鈕的Checklist中,即列出了5個可以提供的細節,右方區塊分享相關文章資源。「Copy」那點在交付的過程中就相當重要,以文字描述當按下按鈕後會發生什麼情況。

Checklist Design

Checklist Design


2.Flows:重新設定密碼 Resetting password

有時候事情太多時間不夠,要針對一個小功能產出Flows真的壓力山大!Checklist Design 提供部分功能的流程設計細節真的是救星!

像是這個「重新設定密碼」的功能即提供了一套可行的驗證流程,讓設計師不必一切從頭開始,更能專注於每個步驟的細節,或是放在更重要的專案上。

Checklist Design

Checklist Design



3.頁面:購物車頁面

要設計一個購物車頁面最少需要哪些元素呢?Checklist Design 也都列出來了!同時也提供你更進階的設計技巧(沒有沒關係,但有了說不定更好!)

在購物車頁面Checklist也列出不錯的實際網站案例,對設計師來說是相當有效的參考資源!

Checklist Design

Checklist Design



4.網頁布局+品牌塑造

如果是想開發新網站,這兩大頁面也值得參考,從網頁RWD布局到文字與色彩風格的呈現訣竅都有提及!




Checklist Design使用心得

使用Checklist Design真的有幫助我提升設計效率和決策,搭配之前介紹的Uxcel網站,讓我在設計的過程中真的多了夥伴的安心感XD

不過目前Checklist Design尚未推出太久的時間,開發者也僅有一位產品設計師,內容還沒有到非常豐富,相信未來會漸漸完善!

如果想要感謝開發者,也可以在網頁右上角贊助他咖啡唷!(不過目前僅限透過Stripe贊助)

Checklist Design

Checklist Design



留言
avatar-img
留言分享你的想法!
avatar-img
K的下班後一角
18會員
17內容數
自我成長上的小發現
K的下班後一角的其他內容
2024/05/11
本文記錄 1/27~1/28 參加臺南青年職涯發展中心舉辦的 「SEO不只是入門-進階實際應用班」講座。講座內容相當扎實,包含SEO概念與內容佈局,進階SEO技術,以及數據分析應用。另外,文章也提到了SEO的工作內容和目標,以及關於SEO演算法因素和網站架構的相關資訊。
Thumbnail
2024/05/11
本文記錄 1/27~1/28 參加臺南青年職涯發展中心舉辦的 「SEO不只是入門-進階實際應用班」講座。講座內容相當扎實,包含SEO概念與內容佈局,進階SEO技術,以及數據分析應用。另外,文章也提到了SEO的工作內容和目標,以及關於SEO演算法因素和網站架構的相關資訊。
Thumbnail
2024/02/27
這篇文章紀錄瞭如何透過新社群平臺Threads提升公司品牌曝光的過程,以及一些成功的策略和方法。文章分享了Threads的特點,以及一些在這個平臺上有效的行銷策略。
Thumbnail
2024/02/27
這篇文章紀錄瞭如何透過新社群平臺Threads提升公司品牌曝光的過程,以及一些成功的策略和方法。文章分享了Threads的特點,以及一些在這個平臺上有效的行銷策略。
Thumbnail
2024/01/19
以往對於macOS系統都不會追求要更新到最新版本,儘管許多人推的macOS Sonoma免費版釋出後,也遲遲沒有升級XD。 直到知道升級後就能透過App Store下載copilot使用GPT-4就衝動更新了!(有聽說部分人的網頁版就可以直接選擇GPT-4?)
Thumbnail
2024/01/19
以往對於macOS系統都不會追求要更新到最新版本,儘管許多人推的macOS Sonoma免費版釋出後,也遲遲沒有升級XD。 直到知道升級後就能透過App Store下載copilot使用GPT-4就衝動更新了!(有聽說部分人的網頁版就可以直接選擇GPT-4?)
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
在之前【如何進行設計交付?做自己看得懂的檢核表、不要害怕看網頁原始碼…】那篇文中有提到,交付時可製作一份交付Checklist,這個概念也可以套用在設計過程中! 最近發現一個超實用的工具「Checklist Design」,Checklist Design 提供各種UI設計的確認清單,包括一些你可
Thumbnail
在之前【如何進行設計交付?做自己看得懂的檢核表、不要害怕看網頁原始碼…】那篇文中有提到,交付時可製作一份交付Checklist,這個概念也可以套用在設計過程中! 最近發現一個超實用的工具「Checklist Design」,Checklist Design 提供各種UI設計的確認清單,包括一些你可
Thumbnail
Button 功能的演進、如何利用這個小功能的模板製作流程。
Thumbnail
Button 功能的演進、如何利用這個小功能的模板製作流程。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
我覺得這個顏色太淺了,可能需要調整一下~ 好的,沒問題! 於是你在設計系統中開始尋找使用到這個顏色的所有元件,然後一個一個修改,改完一個檔案還有另一個,好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿~瘋掉!!! 這樣令人抓狂的場景不只有在設計的時候會發生,當我們交付設計稿之後的開發階段
Thumbnail
我覺得這個顏色太淺了,可能需要調整一下~ 好的,沒問題! 於是你在設計系統中開始尋找使用到這個顏色的所有元件,然後一個一個修改,改完一個檔案還有另一個,好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿~瘋掉!!! 這樣令人抓狂的場景不只有在設計的時候會發生,當我們交付設計稿之後的開發階段
Thumbnail
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
Thumbnail
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
Thumbnail
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
之前一直沒有寫相關的作業心得筆記,一方面是覺得很熟練難度不高所以就很懶惰...但進入到學期2-2後,光是S2的製作電影清單,突然感覺難度一下提升超級多,很多內容不是一次兩次就能夠記起來且熟悉,而且邏輯程式方面的量也上升到百行才發現真的很難一下吸收,所以決定開始來寫學習、作業、技術相關筆記來加深自己的
Thumbnail
之前一直沒有寫相關的作業心得筆記,一方面是覺得很熟練難度不高所以就很懶惰...但進入到學期2-2後,光是S2的製作電影清單,突然感覺難度一下提升超級多,很多內容不是一次兩次就能夠記起來且熟悉,而且邏輯程式方面的量也上升到百行才發現真的很難一下吸收,所以決定開始來寫學習、作業、技術相關筆記來加深自己的
Thumbnail
UX文案是設計師們操作情境很好的工具,可以減少用戶認知負擔,讓介面簡單易懂。但我看過許多後台介面的Placeholder文案似乎是亂寫的? 為什麼想寫這個題目? 比起光鮮亮麗的前台介面流程,一般營運管理介面(俗稱後台)經常淪為配角,常被認為是「有空再來談怎麼優化」,而所謂的後台優化常常意味著追加功能
Thumbnail
UX文案是設計師們操作情境很好的工具,可以減少用戶認知負擔,讓介面簡單易懂。但我看過許多後台介面的Placeholder文案似乎是亂寫的? 為什麼想寫這個題目? 比起光鮮亮麗的前台介面流程,一般營運管理介面(俗稱後台)經常淪為配角,常被認為是「有空再來談怎麼優化」,而所謂的後台優化常常意味著追加功能
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News