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的下班後一角
17會員
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
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
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 跨網站指令程式碼的防禦處...
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News