Contact
Line : comsiam
Contact
Line : comsiam

ขนาด Rich Menu LINE ที่นิยมใช้ใน Canva มี 2 รูปแบบหลัก ได้แก่ 2500 × 1686 พิกเซล สำหรับ Rich Menu ขนาดใหญ่ และ 2500 × 843 พิกเซล สำหรับ Rich Menu ขนาดกะทัดรัด
สิ่งสำคัญไม่ได้มีเพียงขนาดของภาพ แต่เส้นแบ่งช่องใน Canva ต้องตรงกับพื้นที่กดที่เลือกใน LINE Official Account Manager ด้วย หากตำแหน่งไม่ตรง ผู้ใช้อาจแตะปุ่มหนึ่งแต่ระบบเปิดอีกเมนู
| รูปแบบ | ความกว้าง | ความสูง | เหมาะกับ |
|---|---|---|---|
| Rich Menu ขนาดใหญ่ | 2500 พิกเซล | 1686 พิกเซล | เมนูหลายช่องและข้อมูลหลายประเภท |
| Rich Menu ขนาดกะทัดรัด | 2500 พิกเซล | 843 พิกเซล | เมนูน้อยและต้องการประหยัดพื้นที่ |
| ขนาดใหญ่ครึ่งบน | 2500 พิกเซล | 843 พิกเซล | ใช้อธิบายโครงสร้างสองแถว |
| ขนาดใหญ่ครึ่งล่าง | 2500 พิกเซล | 843 พิกเซล | ใช้อธิบายโครงสร้างสองแถว |
Rich Menu ขนาดใหญ่มีความสูงเป็นสองเท่าของแบบกะทัดรัด จึงสามารถแบ่งเป็นสองแถว แถวละ 843 พิกเซลได้พอดี
เอกสาร LINE Developers ยกตัวอย่าง Rich Menu ขนาด 2500 × 1686 พิกเซล และกำหนดพื้นที่กดให้สอดคล้องกับภาพ โดยแนะนำให้ดาวน์โหลด Design Guide จากหน้า LINE Official Account Manager เพื่อใช้เป็นต้นแบบก่อนออกแบบ
เหมาะกับบัญชีที่ต้องการแสดงเมนูหลายรายการ เช่น
เหมาะกับบัญชีที่มีเมนูหลักไม่มาก เช่น
ไม่ควรเลือกแบบใหญ่เพียงเพราะมีพื้นที่มากกว่า หากธุรกิจมีเพียงสามเมนู แบบกะทัดรัดอาจใช้งานง่ายกว่า
LINE OA มีเทมเพลตพื้นที่กดหลายรูปแบบ เช่น
ขนาดของแต่ละช่องขึ้นอยู่กับเทมเพลตที่เลือก ไม่ควรคำนวณด้วยการหารเท่าแล้วออกแบบเองทันที เพราะบางเทมเพลตไม่ได้แบ่งช่องเท่ากัน
วิธีที่ปลอดภัยที่สุดคือ
โครงสร้างที่นิยมคือแบ่งขนาด 2500 × 1686 พิกเซลออกเป็นสองแถว และสามคอลัมน์
แต่เนื่องจากความกว้าง 2500 พิกเซลไม่สามารถหารสามเป็นจำนวนเต็มเท่ากันทุกช่องได้ ขอบเขตของแต่ละพื้นที่อาจมีความกว้างต่างกันเล็กน้อย
จึงไม่ควรกำหนดเส้นแบ่งจากการประมาณด้วยสายตา ควรใช้ Design Guide ของเทมเพลต LINE OA เพื่อให้ตำแหน่งภาพตรงกับพื้นที่กดจริง
หากใช้ Rich Menu ขนาดกะทัดรัด 2500 × 843 พิกเซล สามารถเลือกเทมเพลตแบบสามช่องได้ แต่ต้องอ้างอิงตำแหน่งจากระบบ LINE OA
ตัวอย่างเมนู ได้แก่
ข้อความควรสั้น ไอคอนมีขนาดใหญ่ และองค์ประกอบอยู่กึ่งกลางแต่ละช่อง
เข้าสู่ระบบผ่านเว็บไซต์หรือแอป
เลือกหน่วยเป็นพิกเซล
สำหรับแบบใหญ่ ให้กรอก
สำหรับแบบกะทัดรัด ให้กรอก
ตรวจอย่าสลับความกว้างกับความสูง เพราะ Rich Menu เป็นภาพแนวนอน
กดสร้างงานใหม่แล้วตรวจขนาดอีกครั้งก่อนเริ่มออกแบบ
อัปโหลดภาพต้นแบบที่ดาวน์โหลดจาก LINE OA แล้ววางให้เต็มพื้นที่ Canva
ลดความโปร่งใสหรือใช้เป็นชั้นอ้างอิง เพื่อให้มองเห็นเส้นแบ่งช่องขณะออกแบบ
หาก Canva มีตัวเลือกล็อกองค์ประกอบ ให้ล็อก Design Guide ไว้เพื่อป้องกันการเลื่อนโดยไม่ตั้งใจ
วางพื้นหลัง ไอคอน ข้อความ และภาพสินค้าให้ตรงกับแต่ละช่อง
ก่อนดาวน์โหลดต้องลบหรือซ่อนเส้นต้นแบบ หากเส้นเหล่านั้นไม่ใช่ส่วนหนึ่งของดีไซน์จริง
องค์ประกอบสำคัญไม่ควรวางชิดเส้นแบ่งช่อง เพราะผู้ใช้แตะบริเวณขอบได้ยากและข้อความอาจดูอึดอัด
ควรเผื่อระยะรอบองค์ประกอบทุกด้าน และทดสอบบนโทรศัพท์จริงก่อนเปิดใช้งาน
ไม่มีขนาดฟอนต์ตายตัว เพราะจำนวนช่องและรูปแบบตัวอักษรแตกต่างกัน ควรตัดสินจากการอ่านบนหน้าจอโทรศัพท์จริง
แนวทางที่แนะนำ ได้แก่
ข้อความ “ดูสินค้าทั้งหมดของร้านเรา” สามารถลดเหลือ “ดูสินค้า” เพื่อให้อ่านง่ายกว่า
เหมาะกับงานที่มี
PNG มักรักษาความคมชัดของขอบตัวอักษรได้ดี แต่ไฟล์อาจมีขนาดใหญ่
เหมาะกับงานที่เน้น
JPG ช่วยลดขนาดไฟล์ได้ แต่หากบีบอัดมากเกินไป ตัวอักษรและไอคอนอาจเบลอ
เริ่มจาก PNG หากไฟล์ใหญ่เกินข้อกำหนดของระบบ ให้ลดขนาดไฟล์อย่างระมัดระวังหรือพิจารณา JPG คุณภาพสูง
ควรตรวจข้อกำหนดชนิดและขนาดไฟล์ในหน้า LINE OA Manager ขณะอัปโหลด เพราะวิธีใช้งานผ่าน Manager และ Messaging API อาจมีรายละเอียดต่างกัน
หากไฟล์ใหญ่เกินไป สามารถลองวิธีต่อไปนี้
หลังลดขนาดต้องซูมตรวจข้อความและไอคอนว่าไม่เบลอ
ใช้แบบใหญ่ 2500 × 1686 พิกเซล แบ่งตามเทมเพลต 6 ช่อง เช่น
หากมีเพียงสามเมนูหลัก สามารถใช้แบบกะทัดรัด 2500 × 843 พิกเซลแทน
ใช้แบบใหญ่เมื่อมีเมนู เช่น
หากมีบริการหลักเพียงหนึ่งหรือสองรายการ อาจใช้แบบกะทัดรัดและทำให้ปุ่มแต่ละช่องมีขนาดใหญ่ขึ้น
สำหรับ comsiam ควรตั้งชื่อปุ่มและลิงก์ให้ตรงกับบริการด้านข้อมูล ไม่ควรใช้ข้อความที่ทำให้เข้าใจว่าเป็นบริการติดตั้ง หากไม่ได้ให้บริการดังกล่าว
เหมาะกับ
เหมาะกับ
ควรตรวจราคา เวลาเปิดร้าน และลิงก์สั่งอาหารให้เป็นปัจจุบัน
ปัญหานี้มักไม่ได้เกิดจากความละเอียดของภาพ แต่เกิดจากพื้นที่กดใน LINE OA ไม่ตรงกับภาพ
สาเหตุที่พบได้ ได้แก่
ต้องตรวจทั้งไฟล์ภาพ เทมเพลต และ Action พร้อมกัน
สาเหตุที่เป็นไปได้ ได้แก่
ควรกลับไปตรวจข้อมูลไฟล์ในคอมพิวเตอร์และข้อกำหนดที่แสดงใน LINE OA Manager
ความสูงไม่ตรงและระบบอาจไม่รับไฟล์หรือภาพแสดงผิดรูปแบบ
พื้นที่ภาพไม่พอกับเทมเพลตสองแถว
เส้นแบ่งภาพอาจคลาดกับพื้นที่กด แม้จะต่างเพียงเล็กน้อยก็ควรหลีกเลี่ยง
ข้อความดูอึดอัดและผู้ใช้อาจเข้าใจว่าปุ่มอยู่คนละช่อง
งานดูชัดบนคอมพิวเตอร์ แต่อ่านไม่ออกบนโทรศัพท์
ควรตรวจขนาดไฟล์และบีบอัดโดยไม่ลดความคมชัดมากเกินไป
ไฟล์ภาพไม่มีพื้นที่กด ต้องกำหนด Action ใน LINE OA Manager หรือผ่าน Messaging API
ขนาดที่นิยมคือ 2500 × 1686 พิกเซลสำหรับแบบใหญ่ และ 2500 × 843 พิกเซลสำหรับแบบกะทัดรัด
โดยทั่วไปใช้ภาพขนาดใหญ่ 2500 × 1686 พิกเซล แล้วเลือกเทมเพลต 6 ช่องใน LINE OA Manager ควรใช้ Design Guide เพื่อกำหนดเส้นแบ่งให้ตรง
ได้ โดยเลือกสร้างดีไซน์แบบกำหนดเอง เลือกหน่วยพิกเซล แล้วกรอกความกว้างและความสูง
LINE รองรับรูปแบบภาพตามข้อกำหนดของระบบ โดยงานไอคอนและข้อความเหมาะกับ PNG ส่วนงานภาพถ่ายสามารถใช้ JPG ได้
เพราะตำแหน่งช่องในภาพไม่ตรงกับพื้นที่ Action ของเทมเพลต ต้องตรวจ Design Guide และการตั้งค่าปุ่ม
Messaging API อาจรองรับขนาดภายใต้ข้อกำหนดของ LINE แต่สำหรับผู้ใช้ LINE OA Manager และ Canva ควรใช้ขนาดที่ตรงกับเทมเพลตในระบบเพื่อทำงานง่ายและลดข้อผิดพลาด
ขนาด Rich Menu LINE ที่ใช้บ่อยคือ 2500 × 1686 พิกเซล สำหรับแบบใหญ่ และ 2500 × 843 พิกเซล สำหรับแบบกะทัดรัด โดยแบบใหญ่มีความสูงสองแถว แถวละ 843 พิกเซล
ก่อนออกแบบควรเลือกเทมเพลตใน LINE OA Manager และดาวน์โหลด Design Guide มาใช้เป็นแนวแบ่งช่องใน Canva ไม่ควรหารความกว้างด้วยตัวเอง เพราะบางรูปแบบมีพื้นที่ปุ่มไม่เท่ากัน
ผู้อ่าน comsiam ต้องตรวจสามส่วนพร้อมกัน ได้แก่ ขนาดไฟล์ เส้นแบ่งช่อง และ Action ของแต่ละปุ่ม เมื่ออัปโหลดแล้วควรทดสอบกดทุกช่องบนโทรศัพท์จริง เพื่อให้แน่ใจว่าภาพและพื้นที่กดตรงกัน