10 เคล็ดลับสำหรับการส่งออกเนื้อหาเวกเตอร์จาก Sketch ไปยัง Android

ข้อดีของเวกเตอร์ถึงแรสเตอร์นั้นชัดเจน สินทรัพย์แบบเวกเตอร์มีขนาดเล็กลงแก้ไขได้ง่ายและง่ายขึ้นมากในการวัดขนาดไมโคร (โดยเฉพาะในแง่ของขนาดและสี)

ฉันทำงานกับแอพพลิเคชั่นที่ค่อนข้างซับซ้อนซึ่งรองรับแพลตฟอร์มที่แตกต่างกันมากมาย ด้วยขนาดและความละเอียดหน้าจอที่เพิ่มขึ้น (มองคุณ Nexus 6P) สำหรับ Android เรารู้สึกว่าจำเป็นต้องอัปเดตเนื้อหาที่มีอยู่จากแรสเตอร์เป็นรูปแบบเวกเตอร์เพื่อให้สินทรัพย์สามารถปรับขนาดได้เนื่องจากความต้องการการสนับสนุนความละเอียดที่แตกต่างกัน

เนื้อหาส่วนใหญ่ที่เราใช้อยู่ในปัจจุบันนั้นถูกสร้างขึ้นโดยใช้ Sketch ทำให้เกิดปัญหาที่น่าสนใจขณะพยายามแปลง เนื่องจากสินทรัพย์เวกเตอร์ได้รับการสนับสนุนเพียงบางส่วนโดย Android ใน API ปัจจุบัน (Android 24) ดังนั้นสินทรัพย์ที่ส่งออกจึงแตกในหลาย ๆ ทางที่ไม่คาดคิด

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

ไม่ค่อนข้าง“ สนับสนุนเต็มที่”

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

1. ทำให้มันง่ายโง่

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

2. หลีกเลี่ยงการใช้มาสก์

มาสก์ที่สร้างโดยใช้ Sketch ไม่ได้รับการรองรับโดย Android API เวอร์ชันปัจจุบัน การมาสก์ใด ๆ ที่ทำใน Sketch จะถูกละเว้นโดย Android VectorDrawble (AVD) และมาสก์ที่สร้างใน Sketch บางครั้งอาจทำให้ Adobe Illustrator ขัดข้อง หากมีสถานการณ์ที่ต้องสร้างเอฟเฟกต์การแรเงาควรใช้รูปร่างที่ทับซ้อนกันด้านบนของเลเยอร์ที่มีอยู่เพื่อประโยชน์ของมาสก์

ใช้การดำเนินการค้นหา“ ตัด” บนชั้นแรเงากับชั้นฐานเพื่อสร้างรูปร่างที่คุณต้องการ

3. จัดทำโครงร่างไม่ใช่จังหวะ

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

ดังนั้นสิ่งนี้หมายความว่าขอบด้านในของความหนา 10 บน Sketch จะกลายเป็นจุดศูนย์กลางความหนา 20 เมื่อเรนเดอร์บน AVD

เนื่องจากโครงร่างเป็นรูปร่างจึงมักแสดงลักษณะที่ต้องการเสมอเมื่อปรับหรือเปลี่ยน โครงร่างยังง่ายต่อการทำงานด้วยหากคุณต้องการใช้การดำเนินการค้นหา

คุณสามารถเปลี่ยนจังหวะเป็นโครงร่างได้อย่างง่ายดายโดยใช้ CMD + Shift + O

4. Pathfinders เป็นเพื่อนของคุณ

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

5. Adobe Illustrator เป็นเครื่องมือแก้ปัญหาที่ดีที่สุด

Adobe Illustrator แสดงผลสินทรัพย์แบบเวกเตอร์ในลักษณะเดียวกับ VectorDrawable ของ Android (จากประสบการณ์เล็กน้อย) หากเนื้อหาไม่แสดงขึ้นอย่างถูกต้องใน AVD ลองวินิจฉัยปัญหาโดยใช้ Illustrator บ่อยครั้งที่วิธีการแก้ปัญหานั้นง่ายเหมือนเพียงแค่ลบการเติม

ปัญหาทั่วไปสำหรับการส่งออกเนื้อหาสำหรับ Android โดยใช้ Sketch

6. รูปร่างที่รวมกันและเปลี่ยนรูปอาจไม่ปรากฏตามที่ปรากฏ

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

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

7. แผ่นโปร่งใสเป็นเพื่อนของคุณ ...

แผ่นใสได้รับการสนับสนุนและแสดงอย่างถูกต้องในอุปกรณ์และแพลตฟอร์มทั้งหมดใช้เพื่อสร้างเงา / ไฮไลต์ตามความเหมาะสม

สังเกตเงาวางใต้สเต็ก

8. …และการไล่ระดับสีไม่ใช่

ในทางตรงกันข้าม AVD ไม่รองรับการไล่ระดับสี สินทรัพย์ที่ทำในลักษณะนี้จะแตกหักในระหว่างการนำเข้า ควรใช้เทคนิคการบังเงาด้วยเทคนิคการไล่สีแบบไล่ระดับสี

วางเงาใต้สเต็กหายไป

9. ส่งออก artboards ไม่ใช่เลเยอร์

การใช้กล่องขอบเขตใน Sketch เพื่อกำหนดขนาดของสินทรัพย์เวกเตอร์เป็นเทคนิคแบบโรงเรียนเก่า แม้ว่ามันจะยังคงเป็นวิธีที่ใช้ประโยชน์ได้ในการกำหนดขอบเขตสำหรับการส่งออกเวกเตอร์ แต่วิธีที่ดีกว่าคือการสร้าง artboard ที่มีขนาดเท่ากับวิวพอร์ตที่คุณพยายามกำหนด เลเยอร์กล่องขอบเขตในเนื้อหาถือเป็นเส้นทางแยก แต่โปร่งใสเมื่อแปลเป็น VectorDrawable xml

10. รูปร่างที่แบนจะช่วยแก้ปัญหาส่วนใหญ่ได้

เนื้อหาที่ส่งออกมีข้อมูลเมตาอธิบายการแปลงและองค์ประกอบในขณะที่มันกำลังแก้ไขเนื่องจากสิ่งนี้บอกผู้ใช้ว่า "วิธี" มันถูกสร้างขึ้น อย่างไรก็ตามเมื่อพูดถึงการส่งออกและการเรนเดอร์ข้อมูลเหล่านี้ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการแต่งมักจะทำให้เกิดปัญหามากกว่าที่จะแก้ไขได้ (ไม่สนับสนุนการหมุนและการสะท้อนใน Sketch) นอกเหนือจากการเพิ่มขนาดไฟล์

สถานะสิ้นสุดของสินทรัพย์เป็นเพียงสิ่งเดียวที่ถูกแสดงดังนั้นในกรณีนี้เฉพาะการปรากฏตัวของสถานะสิ้นสุดเท่านั้น

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