สารบัญ:
2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12
เราจะมาดูกันว่าเราจะทำให้แอปของคุณบน AI2 ดูสวยงามได้อย่างไร:)
คราวนี้ไม่มีโค้ด มีแต่เคล็ดลับสำหรับแอปที่ลื่นไหลเหมือนตัวอย่างที่ 4 ด้านบน!
เสบียง
ขั้นตอนที่ 1: บทนำ
คำแนะนำนี้มีไว้สำหรับทุกคนที่เรียนรู้หรือใช้ App Inventor 2 ซึ่งเป็นซอฟต์แวร์ที่พัฒนาโดย MIT
MIT AI2 คือการพัฒนาแอพบนสมาร์ทโฟนที่ฟรี เรียบง่าย และน่าทึ่ง ซึ่งเหมาะสำหรับ DIY Arduino หรืออุปกรณ์อิเล็กทรอนิกส์ทุกตัว แต่ความเรียบง่ายของเขายังทำให้เขาค่อนข้างจำกัด โดยเฉพาะอย่างยิ่งเมื่อคุณพยายามทำให้แอปของคุณดูสวยงาม
จุดประสงค์ของคำแนะนำนี้คือการให้คำแนะนำในการสร้างส่วนหน้าที่ยอดเยี่ยมสำหรับแอปในอนาคต ซึ่งจะดูเรียบง่ายและสง่างามอย่างที่ทุกหน้าควรเป็น
เราจะมาดูพื้นฐานในการสร้างแอปซึ่งจะมีลักษณะเหมือน 4 ตัวอย่างที่แสดง
มาเริ่มกันเลย !
PS: ถ้าคุณรักโครงงานนี้ โหวตให้ฉันในการประกวด Classroom Science Contest ขอบคุณมาก !!
PS2: ภาษาอังกฤษผิดพลาดไปบ้าง ขออภัยด้วยนะครับ:)
ขั้นตอนที่ 2: พื้นหลัง
ฉันได้สร้างสรรค์เพิ่มเติมบน Figma ซึ่งเป็นซอฟต์แวร์ฟรีเวกเตอร์ เช่น การลงสีขั้นสูง ที่ช่วยให้คุณสร้างรูปทรงและสีได้อย่างง่ายดาย: ใช้งานง่ายมาก ฉันแนะนำ: www.figma.com !
คุณไม่จำเป็นต้องใช้ Figma สำหรับส่วนหน้าของคุณ แต่ฉันชอบที่จะออกแบบก่อนที่จะสร้างแอปพลิเคชันเอง
ดังที่คุณเห็นในภาพ พื้นหลังจะต้องนุ่มมาก เนื่องจากเราจะใส่ปุ่ม รูปภาพ ฯลฯ… ลงไป…
ฉันขอแนะนำความโปร่งใส 30% สำหรับสีที่คุณใช้ และพื้นหลังที่มีเพียงสีเดียว
ขั้นตอนที่ 3: สี
สีที่คุณเลือกและความเข้มของสีนั้นสำคัญมากในแอพ
คำแนะนำแรกที่ฉันให้คือเลือกสูงสุด 3 สี (+ ขาวดำ): เรายังคงพยายามทำให้อ่อนลง:)
สำหรับ 4 ตัวอย่างที่ฉันทำ นี่คือคำแนะนำที่ฉันเลือก (คุณสามารถเห็นคำแนะนำเหล่านี้ได้ในภาพเป็นการสรุป):
พื้นหลัง: พื้นหลังอ่อนและสว่างไม่มีรูปร่าง (ความโปร่งใสของสี 30%) จำสีนี้ไว้เพื่อรวมปุ่มของคุณ !
The Title: ตัวหนังสือบางสีเทาเข้มก็ดูดี! สำหรับคำบรรยายและข้อความต่อไปนี้ ให้อยู่ในสีดำ แต่เปลี่ยนเฉดสีดำ (สีเทาเมื่อไม่ใช่ข้อมูลขนาดใหญ่) และเล่นกับขนาดและแอตทริบิวต์ที่คุณทำได้ (ตัวหนา ตัวเอียง)
ปุ่ม: สีเดียว โดยทั่วไปแล้วสีพื้นหลังของคุณมี (โปร่งใส 80-100%) จากนั้นเป็นสีดำหรือสีขาวเพื่อจบ
แถบเลื่อน: อย่าใช้ 2 สีสำหรับพวกเขา มีเพียงสีเดียวทางด้านซ้ายและด้านขวาเป็นสีดำ
แค่นั้นแหละ !!
น้อยมาก !!!! อย่าใช้สี รูปร่าง และขนาดมากเกินไป จงละเอียด !
ขั้นตอนที่ 4: ตั้งค่าพารามิเตอร์ขวาของหน้าจอ
บนหน้าจอหลักของส่วน App Inventor Designer คุณสามารถเลือก caracteristic หลักของหน้าจอได้
ใน Screen1 -> Properties ให้ทำตามขั้นตอนต่อไปนี้เพื่อลบเฟรมพิเศษออกจาก AI2 ที่ดูไม่ดีจริงๆ ^_^
1 - การวางแนวของหน้าจอ
เลือกการวางแนวเพียงทิศทางเดียวเนื่องจากแอปพลิเคชันปรับไม่ค่อยดีเมื่อคุณหมุน
ฉันเลือกการวางแนวแนวตั้ง
2 - ปิดใช้งาน 'ชื่อที่มองเห็นได้' และ 3- ปิดใช้งาน 'ShowStatusBar'
ฉันปิดการใช้งานชื่อและแถบสถานะ เพราะมันเพิ่มแถบบางอันในแอป ซึ่งไม่ได้สวยงามมาก (ในความคิดของฉัน)
4 - มิติ
ขนาดของแอปทั่วไปคือ 505x320 (สูง x กว้าง) จำมิติเหล่านั้นเพื่อสร้างพื้นหลังและรูปภาพของคุณ (อย่างน้อยก็มีสัดส่วนที่เท่ากัน) ! หากคุณใช้ Figma คุณสามารถสร้างขนาดแอปที่เหมาะสมได้ทันที
5 - ขนาด
หากคุณเลือกแก้ไข แอปจะมีขนาด 505x320 หากคุณเลือก Responsive แอพจะพอดีกับสมาร์ทโฟนของคุณ แต่ระวัง คุณจะต้องปรับรูปภาพของคุณ
ขั้นตอนที่ 5: ทำอย่างไร:)
ในการทำซ้ำตัวอย่างแรก เราจะทำตาม 3 ขั้นตอน (เช่นรูปภาพ):
1 - ใช้มิติ
สิ่งที่ยอดเยี่ยมใน figma คือคุณสามารถเห็นขนาดของเฟรมและวัตถุของคุณได้ ดังนั้นคุณจึงสามารถดูว่าวัตถุของคุณมีขนาดเท่าใด และว่างเปล่า ! ช่องว่างมีความสำคัญมากใน App Inventor เพราะเราจะสร้างมันขึ้นมาโดยใส่ป้ายกำกับที่มองไม่เห็น!
2 - เติมช่องว่างจะมองไม่เห็น Labels
ดังที่คุณเห็นในภาพที่สอง เราทำซ้ำด้านหน้าที่เราต้องการโดยติดฉลากด้วยขนาดที่เหมาะสม จากนั้นทำให้ดูเหมือนล่องหน (ยกเลิกการคลิกปุ่ม 'มองเห็นได้')
ใช้ Layout -> Arrangement เพื่อวางสิ่งของด้วย
3 - ลองสร้างปุ่มของคุณบนซอฟต์แวร์
เมื่อเป็นไปได้ ให้สร้างปุ่มของคุณบนเว็บไซต์ AI2 ปุ่มเหล่านั้นจะมีคุณภาพสูง และแอนิเมชั่นขนาดเล็ก 'เมื่อคลิก' จะเจ๋งมาก:) เมื่อคุณไม่สามารถสร้างปุ่มของคุณเองได้ คุณสามารถสร้างปุ่มเหล่านั้นบนซอฟต์แวร์อื่น แล้วนำเข้าเป็นรูปภาพ
ขั้นตอนที่ 6: ผลลัพธ์:)
ทางด้านซ้าย: ภาพหน้าจอจากสมาร์ทโฟนของฉันบน AI2
ด้านขวา: ร่างที่สร้างขึ้นบน Figma
ฉันหวังว่าคำแนะนำนี้จะช่วยคุณสร้างแอปพลิเคชันที่ยอดเยี่ยมบน AI2
ขอบคุณมากสำหรับการรับชม หากคุณต้องการคำแนะนำเพิ่มเติมโปรดแจ้งให้เราทราบ…
คำแนะนำอื่นในแบ็กเอนด์ของ AI2 จะเปิดตัวเร็ว ๆ นี้!
ขอแสดงความนับถือ
Thomas จาก Technofabrique
แนะนำ:
การใช้ Kitronik Inventor's Kit กับ Adafruit CLUE: 4 ขั้นตอน (พร้อมรูปภาพ)
การใช้ Kitronik Inventor's Kit กับ Adafruit CLUE: Kitronik Inventor's Kit สำหรับ BBC micro:bit เป็นบทนำที่ยอดเยี่ยมสำหรับไมโครคอนโทรลเลอร์ที่มีอุปกรณ์อิเล็กทรอนิกส์โดยใช้เขียงหั่นขนม ชุดอุปกรณ์รุ่นนี้ออกแบบมาเพื่อใช้กับ BBC micro:bit ราคาไม่แพง หนังสือกวดวิชารายละเอียดที่มา
Soft Toy Bluetooth Dice และพัฒนาเกม Android ด้วย MIT App Inventor: 22 ขั้นตอน (พร้อมรูปภาพ)
Soft Toy Bluetooth Dice และพัฒนาเกม Android ด้วย MIT App Inventor: การเล่นเกมลูกเต๋ามีวิธีการที่แตกต่างกัน1) การเล่นแบบดั้งเดิมกับลูกเต๋าไม้หรือทองเหลือง 2) เล่นในมือถือหรือพีซีด้วยค่าลูกเต๋าที่สุ่มสร้างโดยมือถือหรือ pc.in วิธีที่แตกต่างกันนี้ เล่นลูกเต๋าและย้ายเหรียญในมือถือหรือพีซี
(Ascensor) โมเดลลิฟต์โดยใช้ Arduino, App Inventor และซอฟต์แวร์ฟรีอื่นๆ: 7 ขั้นตอน
(Ascensor) โมเดลลิฟต์โดยใช้ Arduino, App Inventor และซอฟต์แวร์ฟรีอื่นๆ: ESPConstrucción, paso a paso, de un ascensor a escala usando arduino (como controlador del motor y entradas y salidas por bluetooth), app inventor (para diseño de aplicación como panel ออกจากการควบคุม ascensor) y freeCAD y LibreCAD สำหรับ diseño.Abajo
Arduino Led/Strips RGB Bluetooth (Arduino + App Inventor): 5 ขั้นตอน
Arduino Led/Strips RGB Bluetooth (Arduino + App Inventor): ในบทช่วยสอนนี้ ฉันจะแสดงวิธีใช้ App Inventor และเชื่อมต่อกับ Arduino โดยใช้บลูทูธ
MIT App Inventor การทดสอบอนุภาคโฟตอน: 5 ขั้นตอน
MIT App Inventor Particle Photon Test: เรา (Team Practical Projects) ได้พัฒนาโครงการที่เชื่อมต่ออินเทอร์เน็ตโดยใช้อุปกรณ์ Particle Photon และ Electron IoT มาหลายปีแล้ว โปรดดูที่:https://github.com/TeamPracticalProjects เราได้ใช้บริการหลายอย่างเพื่อ สื่อสารกับพ่อของเรา