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
15會員
17內容數
自我成長上的小發現
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
K的下班後一角 的其他內容
公司產品的專業文章一直都受受眾喜愛,發到社群平台上都能獲得不錯的回響和點擊率。但經營一陣子後我們發現,文章能觸及到的都是社群平台上的粉絲,自然流量極低。這才讓團隊意識到 — 我們編輯辛苦撰寫的文章在 Google 並無法被搜尋到啊啊啊! 不過也所幸在產品推出前期發現事態嚴重,進一步研究原因
矽谷思維:5個思維升級你的職場技能(上) 近期和朋友開始定期的讀書會,我選定第一本書的為矽谷思維。矽谷思維作者 Han 是一名赴美的中國軟體工程師,他在矽谷公司實習起步,一路晉升成為一線工程師,並將這一切所培養的思維、養成的習慣與所學經驗,紀錄於這本書中。 原本從書名看到「思維」二字,會怕是使用
過去學生時期認為電子報是個「很過時」的資訊傳遞媒介,在網路社群和通訊軟體如此普及的今天,還有誰會用寄信的方式啊? 不過隨著資訊爆炸的時代,電子報卻是最能不受演算法干擾的內容傳遞方式,你可以選擇真正喜愛的內容,當我們收到創作者發來的電子報時,這就像是打開了一扇通往他們世界的小門,這種一對一的互動在這
最近在瀏覽國外的設計分享或產品時,發現將 Bento UI 加入的品牌越來越多了! Bento UI,也有些人稱為 Bento Box,是在今年真正開始流行起來的設計風格之一。從 Framer 範本來看,也有不少網頁都有加入 Bento UI 這個元素!
身為 UI/UX 設計師,「設計交付」一直是工作上的大課題,如何讓工程師更有效率地開發、讓產品更貼近設計稿落地,都是在設計交付這個環節中實現。 我目前待的團隊人數並不多,主要的產品開發團隊即我(UI/UX)、前端工程師、後端工程師以及該專業領域的老闆。因此在產品開發過程中,彼此之間的合作頻率算是蠻
在開頭我想直接說「uxcel真的是我相見恨晚的一個學習管道!」 每每繪製新產品或功能UI,一定會在電腦前苦惱「要選擇A做法好,還是B做法好?」、「設計側邊菜單有沒有什麼訣竅?」,或是設計稿都快完成了,才發現還有小細節沒有做到! 實際使用 Uxcel 一個月下來,我想它對於設計師可以是一個學習
公司產品的專業文章一直都受受眾喜愛,發到社群平台上都能獲得不錯的回響和點擊率。但經營一陣子後我們發現,文章能觸及到的都是社群平台上的粉絲,自然流量極低。這才讓團隊意識到 — 我們編輯辛苦撰寫的文章在 Google 並無法被搜尋到啊啊啊! 不過也所幸在產品推出前期發現事態嚴重,進一步研究原因
矽谷思維:5個思維升級你的職場技能(上) 近期和朋友開始定期的讀書會,我選定第一本書的為矽谷思維。矽谷思維作者 Han 是一名赴美的中國軟體工程師,他在矽谷公司實習起步,一路晉升成為一線工程師,並將這一切所培養的思維、養成的習慣與所學經驗,紀錄於這本書中。 原本從書名看到「思維」二字,會怕是使用
過去學生時期認為電子報是個「很過時」的資訊傳遞媒介,在網路社群和通訊軟體如此普及的今天,還有誰會用寄信的方式啊? 不過隨著資訊爆炸的時代,電子報卻是最能不受演算法干擾的內容傳遞方式,你可以選擇真正喜愛的內容,當我們收到創作者發來的電子報時,這就像是打開了一扇通往他們世界的小門,這種一對一的互動在這
最近在瀏覽國外的設計分享或產品時,發現將 Bento UI 加入的品牌越來越多了! Bento UI,也有些人稱為 Bento Box,是在今年真正開始流行起來的設計風格之一。從 Framer 範本來看,也有不少網頁都有加入 Bento UI 這個元素!
身為 UI/UX 設計師,「設計交付」一直是工作上的大課題,如何讓工程師更有效率地開發、讓產品更貼近設計稿落地,都是在設計交付這個環節中實現。 我目前待的團隊人數並不多,主要的產品開發團隊即我(UI/UX)、前端工程師、後端工程師以及該專業領域的老闆。因此在產品開發過程中,彼此之間的合作頻率算是蠻
在開頭我想直接說「uxcel真的是我相見恨晚的一個學習管道!」 每每繪製新產品或功能UI,一定會在電腦前苦惱「要選擇A做法好,還是B做法好?」、「設計側邊菜單有沒有什麼訣竅?」,或是設計稿都快完成了,才發現還有小細節沒有做到! 實際使用 Uxcel 一個月下來,我想它對於設計師可以是一個學習
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
Canva近年來成為設計界的熱門工具,其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上,操作簡便實用。本文將介紹Canva的新擴張功能,如何套用在不同的商品上,以及如何使用細部編輯模式調整大小和位置。
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
透過專案管理工具 ClickUp,一站整合專案任務、內容協作、資源管理、自動化流程,有效提升生產力!ClickUp 支援多元檢視模式,讓你自由切換甘特圖、心智圖、樹狀圖、月曆等形式,還提供可視化圖表功能,協助掌握團隊成員負荷程度及專案耗費時間。另有文件共編功能和自動化模組供直接套用,省下重複瑣碎工作
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
每一次的選擇都是機會成本的考量當你多花一天在考慮要挑白色調或米白色調的油漆時,完工的時間可能得往後推遲個一週,因為中間存在著溝通的時間成本,若能更完善的掌握整體從設計到裝修的過程,相信能避免掉許多這類型的隱藏成本。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
Canva近年來成為設計界的熱門工具,其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上,操作簡便實用。本文將介紹Canva的新擴張功能,如何套用在不同的商品上,以及如何使用細部編輯模式調整大小和位置。
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
透過專案管理工具 ClickUp,一站整合專案任務、內容協作、資源管理、自動化流程,有效提升生產力!ClickUp 支援多元檢視模式,讓你自由切換甘特圖、心智圖、樹狀圖、月曆等形式,還提供可視化圖表功能,協助掌握團隊成員負荷程度及專案耗費時間。另有文件共編功能和自動化模組供直接套用,省下重複瑣碎工作
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
每一次的選擇都是機會成本的考量當你多花一天在考慮要挑白色調或米白色調的油漆時,完工的時間可能得往後推遲個一週,因為中間存在著溝通的時間成本,若能更完善的掌握整體從設計到裝修的過程,相信能避免掉許多這類型的隱藏成本。