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



    13會員
    16Content count
    自我成長上的小發現
    留言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 一個月下來,我想它對於設計師可以是一個學習
    你可能也想看
    Thumbnail
    1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    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
    1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    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團隊來發想整體風格。 在四年前的俄羅斯冬奧會上,俄羅斯展現了傳統模式和俄羅斯的華麗色彩,在里約奧運會上展現出了巴西華麗的色彩和柔和的曲線。 而平昌冬奧