การเพิ่มประสิทธิภาพไฟล์ Sketch: บทเรียนที่เรียนรู้ในการสร้างแอปลด (กรณีศึกษา)

Sketch ได้นำมาตรฐานใหม่ทั้งหมดมาสู่ขนาดไฟล์ คุณจะไม่เห็นไฟล์ Photoshop ขนาด 10 GB อีกต่อไป อย่างไรก็ตาม มีไฟล์ Sketch ขนาดใหญ่ และทำให้ Sketch ทำงานช้าลง เป็นผลให้ประสิทธิภาพการทำงานของคุณช้าลงเช่นกัน

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

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

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

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

ต้นแบบแรก

ฉันมีแนวคิดที่เป็นนามธรรมอยู่แล้วก่อนที่จะวาด UI ใดๆ เป้าหมายหลักคือการสร้างบางสิ่งที่จะอยู่ใกล้เพียงปลายนิ้วสัมผัสตลอดเวลา และช่วยให้เราปรับแต่งไฟล์ให้เหมาะสมได้อย่างรวดเร็วที่สุด แอปพลิเคชันแถบเมนูเป็นตัวเลือกที่ชัดเจน:

1. เรามีกรอบงานภายในสำหรับแอปพลิเคชันแถบเมนูแล้ว โดยมีการใช้งานฟังก์ชันแบบกำหนดเองจำนวนมาก เพื่อให้ข้อมูลพื้นฐานแก่คุณ: ผลิตภัณฑ์หลักของเราคือ Flawless App เป็นแอปพลิเคชันแถบเมนูที่เปรียบเทียบการออกแบบที่คาดหวังกับการใช้งานของนักพัฒนาในแบบเรียลไทม์ กรอบงานภายในนี้สร้างขึ้นสำหรับผลิตภัณฑ์หลักของเรา
2. คุณสามารถใช้แอปพลิเคชันแถบเมนูได้แม้ในขณะที่ Sketch ไม่ได้เปิดอยู่
3. การพัฒนาแอพ macOS ดั้งเดิมนั้นเร็วกว่าสำหรับเรามากกว่าปลั๊กอิน Sketch ด้วย CocoaScript (เนื่องจากประสบการณ์ก่อนหน้านี้ของเรา)

สิ่งสำคัญคือต้องให้ผู้ใช้สามารถสลับตัวเลือกการเพิ่มประสิทธิภาพที่แตกต่างกันสำหรับไฟล์ต่างๆ

นี่คือโครงร่างโครงร่างแรกที่วาดบนกระดาษแบบเก่า ไม่มีเครื่องมือสร้างต้นแบบที่หรูหรา

บทเรียน #1

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

จานสีและการพิมพ์

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

ฉันต้องการให้แอปพลิเคชันมีน้ำหนักเบาและแตกต่างทางสายตาจากผลิตภัณฑ์หลักของเรา นั่นคือ Flawless App ดังนั้นฉันจึงได้จานสีต่อไปนี้:

แถวแรกใช้สำหรับสีข้อความ (บวกพื้นหลังสีอ่อนที่จุดเริ่มต้น) แถวที่สองใช้สำหรับสีเฉพาะจุด สีทั้งหมดได้มาจากสีพื้นฐานหนึ่งสีโดยใช้กฎง่ายๆ สำหรับระบบสี HSB (H หมายถึง hue, S หมายถึงอิ่มตัว และ B หมายถึงความสว่าง)

สมมติว่าเรามีสีพื้นฐานเป็น #4A90E2 (สีน้ำเงิน) ซึ่งก็คือ (212, 67, 89) ใน HSB เพื่อให้ได้สีเข้มขึ้นเล็กน้อย เราต้องลดความสว่าง เพิ่มความอิ่มตัว และขยับเฉดสีเพียงเล็กน้อย เราจะได้ #2477C9 ซึ่งก็คือ (210, 82, 79) ใน HSB ฉันใช้วิธีเดียวกันกับสีอื่นๆ ทั้งหมด

ในที่สุด ฉันก็เลือกจานสีแรก (สีส้ม) ไฟล์สเก็ตช์และโลโก้ Sketch ก็เป็นสีส้มเช่นกัน ดังนั้นแอปพลิเคชันของเราจะดูเป็นธรรมชาติมากขึ้น

บทเรียน #2

สีมักเป็นเรื่องยากสำหรับฉัน ฉันมักจะใช้เวลามากในการค้นหาสีที่ใช่ ต่อไปนี้เป็นแหล่งข้อมูลสองสามอย่างที่ฉันใช้เกือบทุกวันเพื่อช่วยสำรวจสี:

• Adobe Kuler สามารถช่วยคุณค้นหาคู่สีสำหรับสีใดก็ได้
• Khroma เป็นเครื่องมือที่ใช้ AI ในการสร้างจานสีตามความต้องการของคุณ
• บทความของ Erik Kennedy เรื่อง "Color in UI Design: A (Practical) Framework" เป็นอัญมณีที่บริสุทธิ์ ฉันอ่านเรื่องนี้เมื่อแปดเดือนที่แล้ว และตั้งแต่นั้นมาฉันก็ใช้ระบบสี HSB มากกว่า RGB ใน Sketch

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

บทเรียน #3

มีแหล่งข้อมูลดีๆ มากมายให้สำรวจแบบอักษร อย่างไรก็ตาม ฉันใช้ Google Fonts แบบเก่าเพื่อให้เข้าใจถึงแบบอักษรบางตัว

การออกแบบซ้ำครั้งแรก

ฉันเริ่มจากสิ่งที่ฉันวาดในโครงร่างเริ่มต้น นี่คือโฟลว์ผู้ใช้ทั่วไปในแอปพลิเคชัน:

1. ลากและวางไฟล์ Sketch
2. เลือกตัวเลือกการเพิ่มประสิทธิภาพ
3. ลดขนาดไฟล์ที่เลือก
4. บันทึกมัน

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

บทเรียน #4

หากคุณไม่เคยออกแบบสิ่งใดสำหรับ macOS มาก่อน ลองดู Facebook Desktop Design Kit คุณจะพบองค์ประกอบ UI ของ macOS ทั่วไปทั้งหมดที่นั่น และจะทำให้คุณเข้าใจถึงขนาดและออฟเซ็ตสำหรับองค์ประกอบ UI สำหรับแอปพลิเคชันแถบเมนู macOS ขนาดแบบอักษร 12 ถึง 14 พอยท์นั้นเป็นเรื่องปกติโดยสิ้นเชิง

ปัญหา #1: Missed State

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

นักพัฒนาบ่นว่านักออกแบบออกแบบในสุญญากาศบ่อยแค่ไหน? คุณรู้ไหม พวกเขากำลังพูดถึงปัญหาเหล่านั้นกับสถานะที่หายไปในสถานะกลาง ว่างเปล่า โดยใช้ชุดข้อมูลที่สมบูรณ์แบบ และอื่นๆ

บทเรียน #5

ก่อนส่งการออกแบบของคุณให้นักพัฒนาตรวจสอบให้แน่ใจว่าคุณไม่ได้ลืมอะไรไป ตรวจสอบให้แน่ใจว่าคุณได้ระบุสถานะทั้งหมดแล้ว เพื่อที่นักพัฒนาจะไม่ถามคุณในภายหลังว่า “สิ่งนี้ควรมีลักษณะอย่างไรใน [เงื่อนไขพิเศษบางอย่าง]” วิธีที่ดีในการค้นหาสถานะที่ไม่ได้รับเหล่านี้คือการใช้เครื่องมือสร้างต้นแบบ จนถึงตอนนี้ ปลั๊กอิน Craft สำหรับ Sketch (สร้างโดย Invision) พร้อมฟีเจอร์การสร้างต้นแบบ เป็นวิธีที่เร็วที่สุดในการทดสอบดังกล่าว

ปัญหา #2: องค์ประกอบที่กำหนดเองมากเกินไป

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

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

บทเรียน #6

เพื่อให้เข้าใจถึงองค์ประกอบเริ่มต้นสำหรับแต่ละแพลตฟอร์ม ฉันขอแนะนำให้ดูเนื้อหาเหล่านี้:

• iOS: ทรัพยากรการออกแบบ UI ของ Apple พร้อมใช้งานสำหรับ Sketch, Photoshop และ Adobe XD
• Android: ชุดออกแบบวัสดุ
• macOS: Facebook Desktop Kit

ปัญหา #3: เน้นไม่เพียงพอในตอนท้าย

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

บทเรียน #7

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

ปัญหา #4: รายละเอียดเล็ก ๆ น้อย ๆ ที่ยิ่งใหญ่

พบปัญหาด้านล่างระหว่างการพัฒนา แต่ฉันจะวางไว้ที่นี่เพื่อให้โครงสร้างของบทความสอดคล้องกัน

ฉันเริ่มใช้การออกแบบ หลังจากเปิดตัวครั้งแรก ฉันรู้ว่าไม่มีทางที่ผู้ใช้จะออกจากแอปพลิเคชันได้

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

รายละเอียดล่าสุดที่ไม่ได้รับคือฟังก์ชันปิดไฟล์ที่ปรับให้เหมาะสมและกลับสู่หน้าจอหลักโดยไม่บันทึก ฉันเพิ่มปุ่ม "ปิด" เดียวกับที่ปรากฏในหน้าต่าง "รายการการเพิ่มประสิทธิภาพ" ที่มุมบนขวา

บทเรียน #8

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

เตรียมการออกแบบเพื่อการพัฒนา

ในที่สุด การออกแบบซ้ำก็จบลง ในทางเทคนิคแล้ว การออกแบบซ้ำๆ ไม่มีวันจบสิ้น สมมุติว่าเรามาถึงสถานะที่ดีพอ ที่ซึ่งเราสามารถก้าวไปสู่การพัฒนาได้

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

บทเรียน #9

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

โลโก้และชื่อ

สุดท้ายแต่ไม่ท้ายสุด ชื่อแอปพลิเคชันของเรามาค่อนข้างเร็ว สองคำเข้ามาในความคิดของฉัน: "ลด" และ "หด" ฉันตรวจสอบ Product Hunt และ "shrink" ถูกใช้ไปแล้ว ดังนั้นเราจึงเลือกใช้ "reduce"

โลโก้เป็นการต่อสู้ที่แท้จริงสำหรับฉัน เนื่องจากเป็นแอปพลิเคชันแถบเมนู ฉันจึงต้องสร้างไอคอนสำหรับแถบเมนูก่อน

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

หลังจากต่อสู้กับรูปทรงเรียบง่ายมาหลายวัน ฉันก็ยอมแพ้และเปิดส่วน "รายการเด่น" ของ Google Fonts ฉันกำลังมองหาแบบอักษรโค้งที่สวยงามซึ่งเหมาะกับโลโก้ (รวมถึงไอคอนแถบเมนูด้วย) ในที่สุด ฟอนต์ Pacifico ก็ปรากฏขึ้น และมันก็สมบูรณ์แบบสำหรับเป้าหมายของเรา

บทเรียน #10

โปรดจำไว้ว่ามีแถบเมนูสองเวอร์ชันใน macOS: มืดและสว่าง เตรียมไอคอนแถบเมนูของคุณสำหรับทั้งคู่ นอกจากนี้ ให้ทดสอบว่าไอคอนของคุณทำงานอย่างไรกับพื้นหลังการเลือกเริ่มต้น ตามค่าเริ่มต้น เมื่อผู้ใช้กดที่ไอคอนแถบเมนู macOS จะไฮไลต์ด้วยสีใดก็ตามที่ผู้ใช้เลือกไว้ในการตั้งค่าทั่วไป (Apple มีคำแนะนำที่ดีเกี่ยวกับสีใน macOS) ในการทดสอบนี้ ฉันได้สร้างสัญลักษณ์สำหรับสีเริ่มต้นทั้งหมด เพื่อที่ฉันจะได้สลับไปมาระหว่างสีเหล่านั้นและดูว่าไอคอนจะมีลักษณะเป็นอย่างไรเมื่อใช้พื้นหลังต่างกัน

โดยใช้สีเฉพาะจุดจากจานสีเริ่มต้น ฉันใส่ "R" ลงในวงกลมที่มีขอบโค้งเล็กๆ ในตอนนั้น โลโก้นั้นดีพอสำหรับฉัน

บทสรุป

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

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

นี่คือบทสรุปของสิ่งที่เราได้เรียนรู้ในการสร้างแอป Reduce:

• คิดเกี่ยวกับเป้าหมายของผลิตภัณฑ์และกรณีการใช้งานก่อนที่จะทำโครงร่างหรือต้นแบบใดๆ
• ใช้เครื่องมือเช่น Adobe Color และ Khroma เพื่อเลือกจานสีที่เหมาะสมได้เร็วขึ้น ความเข้าใจพื้นฐานเกี่ยวกับระบบสี HSB ก็จะช่วยได้เช่นกัน
• อย่ากลัวที่จะทดลองกับแบบอักษรที่กำหนดเอง
• ทุกแพลตฟอร์มมีชุดมาตรฐานของตัวเอง เรียนรู้ก่อนออกแบบ
• ใช้เครื่องมือสร้างต้นแบบเพื่อให้เข้าใจถึงขั้นตอนที่สมบูรณ์
• อย่าครอบงำการออกแบบของคุณด้วยองค์ประกอบแบบกำหนดเอง บางครั้งก็เป็นการดีกว่าที่จะยึดติดกับการควบคุมเริ่มต้นสำหรับแพลตฟอร์มที่กำหนด
• รับคำติชมเกี่ยวกับการออกแบบของคุณโดยเร็วที่สุด
• ให้นักพัฒนามีส่วนร่วมโดยเร็วที่สุด คุณสามารถรับข้อมูลเชิงลึกอันมีค่ามากมายเกี่ยวกับองค์ประกอบการทำงานและระยะเวลาที่จะใช้ในการปรับใช้ “ปุ่มไล่ระดับสีเล็กๆ ที่มีแอนิเมชั่นแบบก้นหอย”
• ใช้ตารางมาตรฐานแพลตฟอร์มเพื่อจัดเรียงองค์ประกอบทั้งหมด นักพัฒนาจะขอบคุณสำหรับมันในภายหลัง
• ทดสอบการออกแบบของคุณสำหรับกรณีการใช้งานต่างๆ (เช่น แถบเมนูสว่างและมืด) ก่อนทำการสรุป UI

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