← กลับไปหน้าบล็อก

วิธีทำให้บทช่วยสอนโค้ดทำตามได้ง่ายขึ้น (ซูม + เคอร์เซอร์ + เค้าโครง)

Published

ผู้ชมไม่ได้เลิกดูบทช่วยสอนโค้ดของคุณเพราะการอธิบาย React hooks น่าเบื่อ

พวกเขาออกเพราะดูแล้วปวดตา ฟอนต์ IDE จิ๋ว เมาส์ที่สะบัด เค้าโครงที่วุ่นวาย และการส่งออกที่ถูกบีบอัดจนกลายเป็นซุปเบลอ ถึงจุดหนึ่ง ความพยายามที่จะ “ดู” ล้วนๆ มากกว่าความพยายามที่จะเรียนรู้เรื่องนั้นเสียอีก

ถ้าอยากให้คอนเทนต์เทคนิคของคุณถูกมองจริงจัง คุณต้องออกแบบความชัดเจนของภาพ นี่คือเช็กลิสต์สำหรับบทช่วยสอนที่อ่านได้แบบลื่นไหล


เริ่มจากการอัปเกรดที่ไม่มีค่าใช้จ่ายก่อน

อย่าเพิ่งเปลี่ยนชุดการจับภาพของคุณจนกว่าจะทำสิ่งเหล่านี้:

เพิ่มขนาดฟอนต์ในเอดิเตอร์จนรู้สึกว่าใหญ่จนเกือบจะอึดอัด ยุบแถบข้างและแผงเทอร์มินัลที่บทเรียนไม่จำเป็นต้องใช้ ตั้ง 1440p เป็นความละเอียดพื้นฐาน และใช้บิตเรตส่งออกสูงขึ้นอีกนิดเพื่อปกป้อง syntax highlighting

ถ้าอยากให้ซอฟต์แวร์จัดการเลเยอร์โฟกัสนี้ให้บน Windows: ชมการสาธิต · ราคา


1) จัดการภาระการรับรู้

ผู้ชมของคุณต้องการจุดยึดทางสายตาเพียงจุดเดียวที่ชัดเจน

ไม่ว่าจะเป็นบล็อกฟังก์ชัน โล้กในเทอร์มินัล หรือพรีวิวเบราว์เซอร์ มันต้องครองเฟรม ถ้าโชว์ IDE สี่บาน ผู้ชมจะมองผิดที่

ซ่อนของที่รก คุณไม่จำเป็นต้องเปิด Git tree, file explorer, แผง extension และ live share พร้อมกันตอนอธิบายเมธอดของอาร์เรย์ UI สงบ การเรียนรู้ก็สงบ


2) บังคับขนาดฟอนต์

ถ้าตัวหนังสือเล็ก ความละเอียดก็ไม่มีความหมาย การจับภาพ 4K ที่ดีที่สุดช่วยฟอนต์ 8pt ไม่ได้เมื่อการบีบอัดของ YouTube จัดการกับมัน

ทดสอบง่ายๆ: เอนหลังพิงเก้าอี้แล้วยืดแขนออก ถ้าอ่านชื่อตัวแปรจากระยะนั้นไม่ได้ แสดงว่าตัวหนังสือเล็กเกินไปสำหรับวิดีโอ ขยายมัน 1080p กับ 1440p กับ 4K สำหรับการบันทึกหน้าจอ


3) ชี้ความสนใจ

คุณต้องพาผู้ชม

การซูมอัตโนมัติเยี่ยมมากสำหรับการแยกการแก้ไขโค้ดหนึ่งบรรทัดหรือกระโดดเข้าเมนูตั้งค่า มันดึงสายตาผู้ชมไปยังจุดสำคัญ

แต่การซูมอัตโนมัติที่ทำงานทุกครั้งที่มีการโต้ตอบเล็กๆ คือฝันร้าย ใช้มันกับการเปลี่ยนโครงสร้างใหญ่ๆ แล้วปล่อยให้กล้องพักระหว่างการอธิบาย การขยับตลอดเวลาทำให้เวียนหัว ซูมอัตโนมัติที่ทำถูกต้อง


4) วินัยเคอร์เซอร์

เคอร์เซอร์คือผู้บรรยายของคุณ

ทำให้มันมองเห็น: ธีมเคอร์เซอร์เข้มบน IDE พื้นสว่าง และขนาดใหญ่ขึ้นสำหรับ Shorts แนวตั้ง

แล้วทำให้นิ่มลง คุณไม่ต้องการลบเจตนาของมนุษย์ แต่ต้องการโกนอาการสั่นที่ทำให้การขยับดูวุ่นวาย เคอร์เซอร์ที่นิ่มแล้วอ่านแล้วรู้สึกมั่นใจ


5) ขัดขอบให้เนียน

motion blur ที่ละเอียดเชื่อมช่องว่างระหว่างเฟรมดิบกับความลื่นไหล ที่ 60fps มันทำให้การบันทึกธรรมดาดูผ่านการผลิต

ปฏิบัติกับมันเหมือนเครื่องปรุงรสที่เข้มข้น ถ้าผู้ชมสังเกตเห็น แสดงว่าใส่เยอะไป เป้าหมายคือความรู้สึกขัดเกลาในระดับใต้สำนึก ไม่ใช่ฟิลเตอร์ที่เห็นชัด Motion blur ในการบันทึกหน้าจอ


จังหวะตามสภาพแวดล้อม

YouTube. ความเร็ว ตัดช่วงเงียบ ฟาสต์ฟอร์เวิร์ดช่วงรอ npm install ยาวๆ และใช้สัญญาณซูมที่เด็ดขาดเพื่อพาผู้ชมผ่านตรรกะ

คอร์สออนไลน์. ความชัดเจนสำคัญกว่าโมเมนตัม ลดการขยับลง ล็อกเฟรม ปล่อยให้มีการทวนซ้ำ และพึ่งตัวหนังสือใหญ่ที่นิ่งๆ


คำถามที่พบบ่อย

ทำไมผู้ชมถึงหนีในนาทีแรก แรงเสียดทานทางสายตา ถ้าอ่านโค้ดไม่เจอหรือหาเคอร์เซอร์ไม่พบ บทช่วยสอนจะรู้สึกเหมือนการบ้าน แล้วพวกเขาก็กดปิด

4K สำคัญกับวิดีโอโค้ดไหม 1440p ที่นิ่งกับฟอนต์ที่ใหญ่กว่าชนะการบันทึก 4K ที่กระตุก ขนาดตัวหนังสือสำคัญกว่าจำนวนพิกเซล

จำเป็นต้องใช้ซูมอัตโนมัติไหม มันคือเครื่องมือที่แรงที่สุดในการชี้ความสนใจข้ามอินเทอร์เฟซที่แน่นๆ ตราบใดที่มันขยับอย่างสงบ แทนที่จะไล่ตามเมาส์


ที่เกี่ยวข้อง

Related workflows