https://www.kogiko.me/articles daily 0.75 2024-10-27 https://www.kogiko.me/articles/ux-portfolio-tips monthly 0.5 2024-10-27 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/e66614cc-e7fe-437e-91ec-77548927542e/portfolio_tips_-1.png Articles - 3 個小技巧：讓 UX 作品集煥然一新 - ii) 運用簡單的項目符號列來組織內容，讓資訊更加清晰明瞭 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/06d09e05-32c1-4515-9072-8c5e3649265b/kogiko.ux_image_portfolio_tips.png Articles - 3 個小技巧：讓 UX 作品集煥然一新 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/563fd13e-cdad-46a7-ab81-e3c0ea5a3441/portfolio_tips_+%285%29.png Articles - 3 個小技巧：讓 UX 作品集煥然一新 - iii) 視覺與文字的比例適中，不要讓大量文字淹沒頁面 例如：如果你發現整個畫面只有段落式文字，那麼你便可以知道文字太多了。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/6ff38849-a3fe-4305-842a-77385fc88119/portfolio_tips_+%286%29.png Articles - 3 個小技巧：讓 UX 作品集煥然一新 - i) 使用描述性的標題，讓閱覽者一眼就能知道重點 https://www.kogiko.me/articles/8-ux-skills-thrive-with-ai monthly 0.5 2024-10-20 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/bd6a2a1a-bfeb-4529-adab-df6235c8572b/kogiko.ux_image_figma_AI_review+%283%29.png Articles - 8 個技能：讓 UX 設計師和 AI 共存 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.kogiko.me/articles/figma-ai-review-01 monthly 0.5 2024-10-13 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/731b18aa-b392-4b90-99a3-d17f4b8b6453/Figma_AI_review_-6.png Articles - Figma AI 初步試用後分析（1/2） - Make Changes: Prompt ❌ 嘗試整個版面由 Listing Page 變成某產品的 Detail Page，失敗。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/6f061112-94dc-407c-9651-8375828a66bf/Figma_AI_review_-10.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt 我決定給仔細的 Prompt，結果： ✅ 有提供 3 個車款的選擇 ❌ 不明白為何有 3 個輸入地址選項 ❌ 3 個車款選擇的 UI 形狀和插畫風格並沒有跟隨指示 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/9145dc16-9414-48a9-81a3-67c0305a52f8/Figma_AI_review_.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt ✅ 大部份 UI 都如期產出 ✅ Icon 使用了 24x24 ✅ 產品標題行距沒有使用預設 （Auto）的設定，而是自設 135%，這接近行內建議的最低標準 ✅ 使用了 8 Grid System ✅ 價錢有顯示兩個小數位，如 749.99 ❌ 心型圖標和圖片之間的行距出現小數位（如：12.5） ❌ 沒有 5 星評價的 UI https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/96cf9c47-b957-4a79-9502-f5259cd37456/Figma_AI_review_-1.png Articles - Figma AI 初步試用後分析（1/2） - Make Changes: Prompt ❌ 嘗試使用 Make Changes 補上 5 星評價的 UI 失敗，被 AI 認為太複雜。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1728741108179-T82R133GW6CGUC4A9ML3/First_draft_1.png Articles - Figma AI 初步試用後分析（1/2） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1728741108182-BNSOGFJBX247JZBRHIS4/First_draft_2.png Articles - Figma AI 初步試用後分析（1/2） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/de039c4c-c6d1-4990-80ff-bcd045ab49d8/Figma_AI_review_-2.png Articles - Figma AI 初步試用後分析（1/2） - Make Changes: Prompt ❌ 批量更換圖標失敗，被 AI 認為太複雜。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/ab9046d0-f782-487c-9ab9-5ab377d05769/kogiko.ux_image_figma_AI_review+%281%29.png Articles - Figma AI 初步試用後分析（1/2） - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/fef5b013-76e3-4295-963b-a212c6ea4366/Figma_AI_review_-14.png Articles - Figma AI 初步試用後分析（1/2） - 人手改動 最後我決定人手改動，建立 Component，修改 I.A. 和 Visual Hierarchy https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/d7b72c1c-453a-4edf-9b64-cb4d7a7abe9d/Figma_AI_review_-8.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt ✅ 有展示基本內容如 Pick Up Location和 Destination。 ❌ 不能夠同時間產出多個設計選項 ❌ 重複功能（兩個錄音圖標） ❌ I.A. 嚴重出錯（如：地圖在這裡根本沒有用） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/e44a55a9-7b1d-4763-a8ad-a148e18f5a32/Figma_AI_review_-9.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt 我見到上面那個 UI 的 I.A. 嚴重有錯，於是嘗試修改一下 Prompt，試一下它的理解能力，我刻意提到一個抽象一點的要求： ‘make it super simple for elderly to use’，結果它認為 ‘make it simple’ 便是將大部份的組件移除，效果比之前更差。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/d1950569-3e93-4af7-8d40-da245d63a8b5/Figma_AI_review_-7.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt 如果要產出下一頁的設計，便要重新以 First Draft 來處理。結果： ✅ 大部份 UI 能成功產出 ❌ 功能有重複（如心型圖標、3 張縮圖和 Carousel 有衝突） ❌ 內容未能合理地展示相關功能（牛奶通常沒有 Size 要去選） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1728741516260-IYXT0K7X3SHCT36LXS0L/makeChange.png Articles - Figma AI 初步試用後分析（1/2） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/89b41cd7-6904-4c70-98c2-0c693b8786d0/Figma_AI_review_-16.png Articles - Figma AI 初步試用後分析（1/2） - 如果原來的頁面不是由 AI 生成，則不能夠使用 AI 中的 Make Change 作出更改。 這代表了對大部份現有團隊的設計檔，這 Make Changes 便起不了作用。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/279b8e26-cd37-44f4-8015-e3d3260f7a71/Figma_AI_review_-4.png Articles - Figma AI 初步試用後分析（1/2） - Make Changes: Prompt ❌ 批量更換風格、批量移除字眼失敗 我指示它去將 Seller Name 變成 Underline，結果連價錢都變成 Underline。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/cb3ba62c-759d-4b26-9fa5-c89988e5b666/Figma_AI_review_-11.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt ❌ 錯得離譜 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/d4cb99cf-ca07-4f73-a32b-53c6ab4ccb4c/Figma_AI_review_-3.png Articles - Figma AI 初步試用後分析（1/2） - Make Changes: Prompt ✅ 成功使用 Make Changes 加上新內容。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/2f585593-3d5c-4aca-8bb8-85ad75d312b2/Figma_AI_review_-5.png Articles - Figma AI 初步試用後分析（1/2） - Make Changes: Prompt ✅ 批量更換內容成功 ✅ 圖片由手機產品更換成超市產品後，價錢也會自動合理調整 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1154ec9a-7a34-490d-8096-292fe2a04120/Figma_AI_review_-12.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt 我之後修改 Prompt，並寫得十分仔細，並試了5次以上，例如： Develop a mobile app homescreen for a user to submit reimbursement, with reimbursement history in listing format, highlight the 'Total Spend Amount' on each reimbursement, with 1 line description each and with status like 'successful' or 'pending' using chip UI, sort by latest reimbursement, with a 'add' button at right bottom corner 結果： ✅ “增加”按鈕順利產出，能自動判斷是一個 floating 按扭 ✅ 基本內容產出 ❌ 內容的 Visual Hierarchy 和 I.A.錯亂，錯重點（如：價錢和狀態應該是重點要看的資訊，可是並沒有突顯出來） ❌ 會出現不相關的功能如圖片和『心型圖標』？ https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/362f8e81-7c85-4f0d-a137-89dff6e465c1/Figma_AI_review_-13.png Articles - Figma AI 初步試用後分析（1/2） - First Draft: Prompt 我再寫更仔細的 Prompt，結果： ✅ 有替我強調價錢 ✅ 沒有多餘圖片 ❌ 不同『狀態』沒有使用不用顏色（不用那麼大吧） ❌ 沒有日期 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/fdfa5b4d-63a3-4a9b-b54f-6ac6fccd700d/Figma_AI_review_-15.png Articles - Figma AI 初步試用後分析（1/2） - Auto-filled content 這個真的太神，只需要輕輕一拉，便自動產出相關內容，但還是有些出錯： ✅做到隨機顯示相關標題、隨機價錢和隨機狀態 ❌日期不是順序 https://www.kogiko.me/articles/3-ways-pitching-interview monthly 0.5 2024-10-06 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/d2b5bfdd-fc44-4bce-8f9e-38257cbabeed/Kogiko.ux_pitching_interview-1.png Articles - 3 個推銷方法：穩勝第一輪面試 - Elevator Pitch (Another Template): I'm [Your name], I'm a [What type of designer they need, a end-to-end designer, a senior designer?]. Over the past [Years of working experience], I’ve focused on 3 things：I've [Which 2-3 contributions do you have that match the job requirements?] https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/ff017c00-6caa-4537-bdb3-bf123a1b321a/kogiko.ux_image_3tips_first_interview.png Articles - 3 個推銷方法：穩勝第一輪面試 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/4df48795-d315-40a7-8ab5-65f536a6aed6/Kogiko.ux_pitching_interview+%281%29.png Articles - 3 個推銷方法：穩勝第一輪面試 - Elevator Pitch Template: I'm [Your name], I'm a [What type of designer they need, a end-to-end designer, a senior designer?]. Over the past [Years of working experience], I've [what contributions you have and how's that's relevant to the job?] https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/65cae6fa-b111-43fd-85d6-416954384cbd/Kogiko.ux_pitching_interview+%282%29.png Articles - 3 個推銷方法：穩勝第一輪面試 - 另一例子：我自己則會習慣在 Elevator Pitch 中加入少許 personal touch https://www.kogiko.me/articles/user-centric-hypothesis monthly 0.5 2024-09-29 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/b1421001-13ed-42a2-9e03-f90227ff029b/kogiko.ux_hypothesis_2.png Articles - 5 個有效步驟：讓利害關係人的想法更以用戶為中心 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/bfafcca5-6e1f-4131-b640-7d99b42875f6/kogiko.ux_hypothesis_1.png Articles - 5 個有效步驟：讓利害關係人的想法更以用戶為中心 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/382b0e8b-b6f0-4fe9-be43-4af9b2426a63/kogiko.ux_image_stakeholder_user-centric.png Articles - 5 個有效步驟：讓利害關係人的想法更以用戶為中心 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.kogiko.me/articles/6-effective-methods-creating-high-quality-hmw monthly 0.5 2024-09-22 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/182db6ae-35bb-438e-99e4-207788afa910/kogiko.ux_image_HMW+%281%29.png Articles - 6 個有效方法：創造高品質的 HMW - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.kogiko.me/articles/personas-vs-proto-personas monthly 0.5 2024-09-15 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/91e59344-1998-4d06-a9d2-85adf0977b59/kogiko_ux_template.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas - Proto Personas 經過真正的使用者測試完後，我們便知道真正用戶的期望和痛點。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/5dde04f9-f47d-4d47-a09b-fd34cc4554c8/Persona+-+Proto+Persona+Template.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1c549cd8-8202-42a9-a5db-bed0c99fc9f8/Proto+Persona+Template.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas 然後，如果真的想保留研究得來的資料，最多只以 Personas 的圖像作為一個總結，避免分享逐個細節。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/5f0d0423-891d-49aa-a492-05ecf17faa0e/Persona+-+Proto+Persona+Dont%27+1.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1773daeb-3eaa-48db-bbd8-c2849de9ca3d/kogiko.ux_image_personas.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/e130edf6-c0b5-4a84-8f37-b6b860ab8813/Persona+-+Proto+Persona+Template.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas - Make it stand out 先逐一帶出用戶面對的問題。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/05661e4d-2c7d-4c84-86fe-a632d22f1e10/Persona+-+Proto+Persona+Template-1.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/6344df7a-187a-4cf2-82f6-60da213e5830/Persona+-+Proto+Persona+Dont%27+2.png Articles - 4 個常見錯誤和 1 個建議 ：關於 Personas 和 Proto Personas - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.kogiko.me/articles/ux-content-scannability-readability-tips monthly 0.5 2024-09-08 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/19d14081-4ff2-4e51-a8e5-2403518fc1fb/kogiko_ux_typography_4.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - 良好的字體排版可以建立視覺上的突出性，並強調關鍵資訊。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/e7c40400-af48-4bff-b160-fe9fed4e649f/kogiko.ux_image_006.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/b305c6b8-7007-403b-b32c-7a0ace6965cc/kogiko_ux_scannability_readability_5.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - 使用混合方法：單靠顏色並不足夠，要混合配合顏色和粗細對比，提升視覺層次 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1725614182854-NCG6SY5N2F0I40B2R99B/IMG_5110.PNG Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1725614182560-AT4HH1V5GVHA0G58966H/IMG_5112.PNG Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1725614196790-0CSDE23WXWRF6A4TOTDW/IMG_5111.PNG Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/765e0c9e-7e2f-4544-87cf-36609dbac63d/kogiko_ux_scannability_readability_9.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - 行距通常以字體大小的百分比來衡量： 目標行距應為 140%-180%：以達到最佳的可讀性和可訪問性。（200%有時候也可以） 行距的百分比應該隨著字體大小的減小而增加：這是因為較小的字體本身就更難以閱讀，因此需要更多的空間來幫助眼睛輕鬆跟隨。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/6d7a2147-922c-49b0-a87c-c2d550739575/kogiko_ux_scannability_readability_2.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - 透過視覺層次，重要的元素會被強調，而次要的元素則會被適當地弱化： 使用字體粗細、大小、行距和顏色的組合來定義視覺層次和版面佈置。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/c088d2aa-54a9-432c-986e-1485492535ef/kogiko_ux_typography_10.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - RE：9. 調節字體粗細（Font Weight）突出重要內容 除了調節字體大小，還可以通過字體粗細來創建視覺層次。 字體粗細通常以數字量表來衡量，範圍從 100（超細）到 900（超粗）。然而，一些字體可能有不同的粗細分類，例如「light」（輕細）、「regular」（正常）、「medium」（中等）、「semi-bold」（半粗）和「black」（黑體）。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/0b3c74ce-36f9-4185-9ed4-6ecb516f486d/kogiko_ux_scannability_readability_7.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - 使用混合方法： 1️⃣ 大小字體 2️⃣ 避免全大寫 3️⃣ 粗細對比 4️⃣ 行距 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/a78655f4-5497-4db8-9ecb-f6c27f13d9fe/kogiko_ux_typography_11.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - RE：7. 加入圖片或圖標： 加入圖標有效地幫助用戶快速掃視 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/bef9211a-b044-489a-b4a5-5e1ee170abae/kogiko_ux_scannability_readability_6.png Articles - 15 個實用方法：提高內容的可掃描性和閱讀性 - 使用混合方法： 1️⃣ 顏色深淺：以深色突顯你想用戶先掃描的重點 2️⃣ 粗細體：突出你想用戶先掃描的重點 3️⃣ 分段、列表、行距：讓用戶眼睛容易掃瞄 4️⃣ 減少 Font Style 數目：避免過多不同字體大小 https://www.kogiko.me/articles/ui-spacing monthly 0.5 2024-09-01 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/309b63f6-ad8f-49a8-be06-f38747cd8f90/kogiko.ux_spacing_6.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/f683f2a8-3435-4407-aac1-4fe21d237cfd/kogiko.ux_spacing_7.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/50398cf6-baa2-47e1-a6c1-21e31e1070bc/kogiko.ux_image_005.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/527cba49-f4bd-44cd-bb28-5d14aa645b65/designDoc.jpg Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/f3bbe619-f05c-4240-8511-79259f320472/kogiko_ux_padding.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - 上圖：全用 24px Padding 下圖：只有 Outer Padding 用 24px https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/e800fc58-501d-4ce9-912c-969d4864dbfb/kogiko.ux_spacing_1.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/278b22bb-2bd8-40d3-be1a-c2e40409e016/kogiko.ux_spacing_5.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - 如果使用奇數如 5 的話，在解析度為 1.5 倍的設備裡，便在會造成畫面出現模糊的可能。 如： 5px 按 1.5 倍縮放（7.5）會導致半個像素的偏移。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/72a1f001-67b2-4d1e-8bc4-652d48e4c338/kogiko.ux_spacing_4.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - Make it stand out 使用 4 Point Grid System 具有更高彈性，讓設計師容易達到心目中的『美感』。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/a90f1965-654c-4138-b070-8285b3dfb633/kogiko.ux_spacing_3.png Articles - 3 個系統性方法：人人都可以創造出具美感的 UI - 隨意搭配隔距 VS 格線系統 (Grid System) 一般人可能看不出分別，可是招聘主管就是能看出當中沒有使用 Grid System 的『不尋常』間距 https://www.kogiko.me/articles/ngxymhnzceujighvsdmbugek0p5274 monthly 0.5 2024-08-25 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/612bfc47-b596-4e37-80e9-566b344103ff/kogiko.ux_image_004.png Articles - 別再混淆：Customer Journey Map 和 User Flow 的差異 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/be4fd316-83e4-441b-9959-6f015717f5d7/kogiko_ux_8_2.png Articles - 別再混淆：Customer Journey Map 和 User Flow 的差異 - Make it stand out 以上是一個極為簡化的 User Flow，真實的會比上面的要複雜得多。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/a7b6754b-96ec-4145-ab00-7cc6168c9fdf/kogiko_ux_6.png Articles - 別再混淆：Customer Journey Map 和 User Flow 的差異 - 4 個常用的圖表形狀 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/45c0d5ab-e9b0-4897-a60e-477e6126366b/kogiko_ux_8_1.png Articles - 別再混淆：Customer Journey Map 和 User Flow 的差異 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.kogiko.me/articles/10- monthly 0.5 2024-08-18 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/6fcc9b21-9df0-49e4-b811-b8a114182f70/kogiko_ux_4.png Articles - 10 個創造出直覺設計的方法 - 如果必須提供多個選項，將它們分成幾個小組或類別，以減少用戶每次面對的選擇數量。這樣可以幫助用戶更輕鬆地瀏覽和篩選選項。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/0d367ab2-6a41-4cdd-8da3-617a8e3c74e9/kogiko_ux_1.png Articles - 10 個創造出直覺設計的方法 - F 形掃描模式是人類在閱讀或掃描網頁時常見的一種視覺路徑。用戶首先從左到右掃描頁面的頂部，然後向下移動視線，進行另一條水平掃描，最終沿著左側垂直向下掃描，形成一個「F」字形的路徑。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/861bc128-9098-4bea-8ef4-6a93d5686c51/kogiko_ux_2.png Articles - 10 個創造出直覺設計的方法 - Z 形掃描模式通常出現在具有較少文本和更簡單布局的頁面上，例如登陸頁或橫幅廣告。用戶的視線從左上角開始，水平移動到右上角，然後斜向左下角，最後再水平移動到右下角，形成一個「Z」字形的路徑。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/e0afcdc8-32b0-4bfc-94ef-ffeec7127a37/kogiko_ux_3.png Articles - 10 個創造出直覺設計的方法 - 減少可供用戶選擇的選項數量，並將複雜的任務分解成較小的步驟或頁面，可以減少認知負荷，使介面更具可用性。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/8b9a5041-04c7-4ee5-93e2-9945a46a351f/kogiko_ux_6.png Articles - 10 個創造出直覺設計的方法 - 不一次性展示所有選項，而是逐步展示相關選項，根據用戶的行為和需求來顯示更多細節。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/3ac4dbe2-5776-487a-b49d-44978e2b9e0d/kogiko_ux_5.png Articles - 10 個創造出直覺設計的方法 - 提供一個明確的預設選項或推薦選項，減少用戶的選擇負擔，讓他們更容易決策。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/1d93f868-5676-43f7-bd7a-575fddd37dc0/kogiko.ux_image_003.png Articles - 10 個創造出直覺設計的方法 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/52165642-fc5b-42f2-8249-4f87ddfaa6e5/kogiko_ux_7.png Articles - 10 個創造出直覺設計的方法 - 盡量讓用戶在每次需要記下的資訊量減少，甚至不需要記下。 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/fbf9bd89-d465-47ad-9971-3037e3b93e4e/kogiko_ux_8.png Articles - 10 個創造出直覺設計的方法 - 其中一個原則：接近性（Proximity） 我們傾向於將彼此靠近的物體視為一組或一個整體。設計師可以利用這一點來組織內容，使相關元素看起來是一組的，例如將相關的按鈕或信息放在一起。 https://www.kogiko.me/articles/-ai-ux- monthly 0.5 2024-08-26 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/05b576a1-6ab6-427b-b1a4-1f481d404d83/kogiko.ux_image.png Articles - AI 崛起：應該走通材還是專材之路？（新手 / 初級設計師篇） - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/d4b41006-0e9c-453a-aa0a-cd1a6d7de774/kogiko_ux_article_talent.png Articles - AI 崛起：應該走通材還是專材之路？（新手 / 初級設計師篇） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/17282b59-d99c-4709-abcf-87f09d4feafb/kogiko_ux_article_talent-3.png Articles - AI 崛起：應該走通材還是專材之路？（新手 / 初級設計師篇） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/f7c3d99c-af5f-4e35-99d3-9063ada17287/kogiko_ux_article_talent-1.png Articles - AI 崛起：應該走通材還是專材之路？（新手 / 初級設計師篇） https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/a96a1899-04cc-4c0f-adbb-b75983715252/kogiko_ux_article_talent-2.png Articles - AI 崛起：應該走通材還是專材之路？（新手 / 初級設計師篇） https://www.kogiko.me/articles/blog-post-title-one-3jwn8-fz82d monthly 0.5 2024-08-03 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/721ea260-fbcf-4572-867c-11e195d22c98/kogiko.ux_0408_2024.png Articles - 1 個心態 ＋ 7 個原則 ＝ 寫好 1 個 UX 案例 - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/7a3dcc9c-bce8-4de8-ad12-7eade8880274/kogiko.me_ux_banner-1.png Articles - 1 個心態 ＋ 7 個原則 ＝ 寫好 1 個 UX 案例 - Make it stand out 例子 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/a8acb5a7-85d3-41de-b3a0-fe59a1e0776d/kogiko.me_ux_banner.png Articles - 1 個心態 ＋ 7 個原則 ＝ 寫好 1 個 UX 案例 - Make it stand out 例子 https://www.kogiko.me/home daily 1.0 2024-10-20 https://www.kogiko.me/about daily 0.75 2024-08-02 https://images.squarespace-cdn.com/content/v1/6581fd2d9a7c875e912e0907/838def3e-d424-4283-ac90-6e9bc422b6ee/4184049.jpg https://www.kogiko.me/contact daily 0.75 2024-08-02 https://images.squarespace-cdn.com/content/v1/6581fd2d9a7c875e912e0907/7dea3a66-4829-422f-8bdb-230a7ca603a8/Chair+.jpg https://www.kogiko.me/e-newsletter daily 0.75 2025-04-19 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/87b023ce-f055-4680-99a2-59e9f2dbf94e/kogiko_ux_profile.png https://www.kogiko.me/testing daily 0.75 2024-08-29 https://www.kogiko.me/subscription-success daily 0.75 2024-10-17 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/d6b0fbdc-9914-4313-bc63-5d443aecf5f6/email_reminder.png https://www.kogiko.me/ux-online-course-kogiko daily 0.75 2025-07-13 https://images.squarespace-cdn.com/content/v1/66acd5a999083f745215fe03/aecec103-b87f-4b07-8e9f-25d78cf1ab86/uxnova-banner-square.png