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



    15會員
    17內容數
    自我成長上的小發現
    留言0
    查看全部
    發表第一個留言支持創作者!
    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
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    在創建用戶體驗(UX)和用戶界面(UI)網頁設計時,設計師需要避免一些可能阻礙用戶體驗的常見錯誤。以下是一些需要避免的關鍵錯誤。
    Thumbnail
    使用者介面(UI)網頁設計中的 Icon 是一種強大的工具,可以幫助使用者更易理解和使用你的產品或服務。然而,如果沒有正確使用,它們也可能造成混淆和誤解。以下是一些如何在 UI 設計中使用 Icon 的建議。
    在當今數位時代,優秀的用戶界面UI設計在網頁和應用程式開發中發揮著至關重要的作用。設計師們需要運用創意和技術,創造出令人驚嘆且易於使用的界面,以提供卓越的用戶體驗。然而,要實現這一目標,選擇合適的設計工具以及掌握最新的設計技巧是至關重要的。
    Thumbnail
    市面上有許多 UI 設計的職缺,但要如何應徵上一份工作則是需要經驗與學問,最關鍵的部分就是面試,面試是一場現場與未來可能工作夥伴的交流,很多工作的面試流程僅有一場,可以說是一次定勝負,如何讓你的面試比其他設計師更有競爭力,就是這一篇要探討的主題,這次將以這些章節帶入面試應該要注意的項目
    Thumbnail
    深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
    Thumbnail
    做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
    Thumbnail
    多元裝置時代的網站UI/UX設計法則 這是一本「從零開始」教你怎麼從網頁設計認識UI設計的書籍,第一章開始便從UI設計的構造關係開始談起,之後每個小節逐一介紹網頁每一個區塊的功能與可能被使用者所操作的形式。
    Thumbnail
    自學UI設計這條路上,「實體書」一直在自學中擔任至關重要的腳色。儘管書中的資訊更新遠遠不及網路上的更新速度,但比起較為片段的網路文章,統整好各式訊息與知識架構的書籍,總是能讓初出茅廬的初學者能稍微有點頭緒。
    Thumbnail
    平昌冬奧的APP是由Naver(沒錯就是那個熊大公司)與平昌冬奧會一同設計。在夏天時開始創意會議,平昌冬奧的品牌設計團隊提供原有的品牌規範讓APP團隊來發想整體風格。 在四年前的俄羅斯冬奧會上,俄羅斯展現了傳統模式和俄羅斯的華麗色彩,在里約奧運會上展現出了巴西華麗的色彩和柔和的曲線。 而平昌冬奧
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    在創建用戶體驗(UX)和用戶界面(UI)網頁設計時,設計師需要避免一些可能阻礙用戶體驗的常見錯誤。以下是一些需要避免的關鍵錯誤。
    Thumbnail
    使用者介面(UI)網頁設計中的 Icon 是一種強大的工具,可以幫助使用者更易理解和使用你的產品或服務。然而,如果沒有正確使用,它們也可能造成混淆和誤解。以下是一些如何在 UI 設計中使用 Icon 的建議。
    在當今數位時代,優秀的用戶界面UI設計在網頁和應用程式開發中發揮著至關重要的作用。設計師們需要運用創意和技術,創造出令人驚嘆且易於使用的界面,以提供卓越的用戶體驗。然而,要實現這一目標,選擇合適的設計工具以及掌握最新的設計技巧是至關重要的。
    Thumbnail
    市面上有許多 UI 設計的職缺,但要如何應徵上一份工作則是需要經驗與學問,最關鍵的部分就是面試,面試是一場現場與未來可能工作夥伴的交流,很多工作的面試流程僅有一場,可以說是一次定勝負,如何讓你的面試比其他設計師更有競爭力,就是這一篇要探討的主題,這次將以這些章節帶入面試應該要注意的項目
    Thumbnail
    深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
    Thumbnail
    做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
    Thumbnail
    多元裝置時代的網站UI/UX設計法則 這是一本「從零開始」教你怎麼從網頁設計認識UI設計的書籍,第一章開始便從UI設計的構造關係開始談起,之後每個小節逐一介紹網頁每一個區塊的功能與可能被使用者所操作的形式。
    Thumbnail
    自學UI設計這條路上,「實體書」一直在自學中擔任至關重要的腳色。儘管書中的資訊更新遠遠不及網路上的更新速度,但比起較為片段的網路文章,統整好各式訊息與知識架構的書籍,總是能讓初出茅廬的初學者能稍微有點頭緒。
    Thumbnail
    平昌冬奧的APP是由Naver(沒錯就是那個熊大公司)與平昌冬奧會一同設計。在夏天時開始創意會議,平昌冬奧的品牌設計團隊提供原有的品牌規範讓APP團隊來發想整體風格。 在四年前的俄羅斯冬奧會上,俄羅斯展現了傳統模式和俄羅斯的華麗色彩,在里約奧運會上展現出了巴西華麗的色彩和柔和的曲線。 而平昌冬奧