วิธีสร้าง Sketch Style Guide, Library และ UI Kit

ทุกโครงการออกแบบสามารถได้รับประโยชน์จากแนวทางการออกแบบที่รอบคอบ ใช้บทช่วยสอนนี้เพื่อสร้างชุด UI และสร้างไลบรารีที่กำหนดเอง (และนำกลับมาใช้ใหม่ได้) พร้อมกันสำหรับการสร้างต้นแบบอย่างรวดเร็ว

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

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

การสร้างคู่มือสไตล์ร่างของคุณ

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

ขั้นตอนที่หนึ่ง: องค์กร

1. สร้างโฟลเดอร์หลักเพื่อเก็บไฟล์สเก็ตช์ ปลั๊กอิน และทรัพย์สินที่จำเป็นอื่นๆ เช่น แบบอักษรและการยึดถือ (ปลั๊กอินจะกล่าวถึงในตอนท้ายของบทช่วยสอน)
2. เริ่มไฟล์ Sketch ใหม่และตั้งชื่อว่า " Clientname Library" ตัวอย่างเช่น ถ้าไคลเอนต์ของคุณคือ Toptal ไฟล์ของคุณควรมีชื่อว่า “Toptal Library”

ขั้นตอนที่สอง: สี

หากเลือกสีแล้ว ขั้นตอนต่อไปคือการแปลงสีของคุณเป็นสัญลักษณ์

1. เมื่อต้องการทำสิ่งนี้ ให้สร้างสี่เหลี่ยมที่มีขนาดเท่ากันและเปลี่ยนสีตามนั้น คลิก "สร้างสัญลักษณ์" และบันทึกองค์ประกอบเหล่านี้โดยใช้ระบบการติดฉลากสี/ @color-name Color/@pink , color/@background-gray หรือ color/@FFFFF เป็นตัวอย่างของป้ายกำกับที่เหมาะสม หลักการตั้งชื่อมีความสำคัญในการจัดระเบียบคู่มือสไตล์ ดังนั้นควรกำหนดและปฏิบัติตามรูปแบบของทุกอย่างตั้งแต่เริ่มต้น
2. เมื่อเสร็จแล้ว เพิ่มลงในหน้าคำแนะนำลักษณะ
3. บันทึกแถบสีในส่วนเอกสารของจานสีของคุณ

ทางลัดที่เป็นประโยชน์: R - เครื่องมือสี่เหลี่ยมผืนผ้า, T - เครื่องมือข้อความ, alt - วัดระยะทาง

ขั้นตอนที่สาม: ไอคอน

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

1. บันทึกไอคอนเป็นสัญลักษณ์ (ติด .svg สำหรับประเภทเนื้อหา ถ้าเป็นไปได้)
2. ไปที่หน้าสัญลักษณ์ ค้นหาไอคอน และปิดบังด้วยสีเริ่มต้นจากสีที่บันทึกไว้ก่อนหน้านี้ ในการดำเนินการนี้ ให้วางสัญลักษณ์สีทับบนไอคอนแล้วคลิก "มาสก์" ในแถบเครื่องมือ (หรือคลิกขวาแล้วเลือก "มาสก์" จากเมนูป๊อปอัป)
3. หลังจากปิดบังไอคอนแล้ว ให้ลบการเติมโดยยกเลิกการเลือกช่องทำเครื่องหมายใต้ส่วน "เติม" ในตัวตรวจสอบ
4. จัดระเบียบไอคอนในหน้าคำแนะนำลักษณะ ในส่วนเดียวกัน การระบุสีสำหรับไอคอนที่ใช้งานอยู่และไอคอนที่ไม่ใช้งาน จะเป็นประโยชน์ รวมถึงข้อกำหนดสีที่สำคัญอื่นๆ

ขั้นตอนที่สี่: สไตล์ข้อความ

เมื่อเลือกแบบอักษรแล้ว ก็ถึงเวลาระบุรูปแบบข้อความ: H1, H2, H3, H4, H5, เนื้อหา, ลิงก์, คำอธิบายภาพ, ป้ายกำกับ ฯลฯ ข้อมูลอ้างอิงที่ดีสำหรับการพิมพ์เว็บคือโพสต์ในบล็อกนี้โดย Typecast

1. เลือกขนาด น้ำหนัก ตัวอักษร และระยะห่างบรรทัดสำหรับสไตล์ได้มากเท่าที่จำเป็น
2. เขียนคำ (“พิมพ์บางสิ่ง” จะปรากฏขึ้นโดยอัตโนมัติเมื่อคุณกด T เครื่องมือข้อความ) และจัดรูปแบบเพื่อให้สะท้อนถึงรายละเอียดสไตล์ที่เลือก
3. คลิก "สร้างรูปแบบข้อความใหม่"
4. จัดระเบียบสไตล์ข้อความในหน้าคำแนะนำสไตล์

ขั้นตอนที่ห้า: สินทรัพย์

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

ต่อไปนี้คือเนื้อหาบางส่วนที่แนะนำให้ใช้งาน:

ปุ่ม

1. สร้างสัญลักษณ์ไดนามิกเหล่านี้ เช่นเดียวกับไอคอน โดยปิดบังปุ่มในสีเริ่มต้นและลบการเติม
2. หากต้องการให้ข้อความอยู่กึ่งกลางตลอดเวลา ให้ขยายความกว้างของกล่องข้อความให้เท่ากับปุ่มและจัดข้อความให้อยู่กึ่งกลาง
3. เพื่อให้แน่ใจว่าใช้รูปแบบข้อความที่บันทึกไว้เพื่อให้แน่ใจว่ามีความสอดคล้องกัน
4. บันทึกองค์ประกอบเหล่านี้เป็นสัญลักษณ์โดยใช้ระบบการตั้ง ชื่อปุ่ม/ปุ่ม
5. ใช้คุณสมบัติแทนที่เพื่อเปลี่ยนป้ายกำกับและสี

แถบค้นหา

1. ใช้ข้อจำกัดการปรับขนาดกับช่องค้นหา ตลอดจนไอคอนและข้อความที่ใช้ภายในช่อง
2. อย่าลืมเกี่ยวกับการใช้สไตล์ข้อความและสีที่บันทึกไว้ก่อนหน้านี้ในจานสีของเอกสารของคุณ
3. บันทึกองค์ประกอบนี้เป็นสัญลักษณ์โดยใช้ การค้นหา เป็นชื่อ หรือหากคุณมีการค้นหาประเภทต่างๆ ให้ยึดตามระบบการติดป้ายกำกับ เช่น search/standard และ search/no-icon

ปุ่มตัวเลือกและช่องทำเครื่องหมาย

1. เป็นไปได้ที่จะมีสัญลักษณ์อยู่ภายในสัญลักษณ์ และวิธีที่ดีในการทดสอบคือการสร้างปุ่มตัวเลือกอัจฉริยะและเนื้อหาช่องทำเครื่องหมาย
2. ขั้นแรก สร้างเนื้อหาปุ่มเอง บันทึกองค์ประกอบนี้เป็นสัญลักษณ์โดยใช้ ช่องทำเครื่องหมาย/เลือก แล้ว และ ช่องทำเครื่องหมาย/ยกเลิกการเลือก เป็นตัวอย่างการติดฉลาก
3. ตอนนี้สร้างอินพุต เพิ่มข้อความที่พักถัดจากสัญลักษณ์ช่องทำเครื่องหมาย จากนั้นแปลงเนื้อหาทั้งหมดเป็นสัญลักษณ์ เนื่องจากตอนนี้เป็นอินพุต จึงแนะนำให้บันทึกเนื้อหาดังกล่าว ดังนั้นป้ายกำกับที่ดีจะเป็น input/checkbox/selected และ input/checkbox/deselected

ขั้นตอนที่หก: ใช้คู่มือสไตล์!

การทำงานทั้งหมดนี้เพื่อสร้างคู่มือสไตล์จะมีประโยชน์ก็ต่อเมื่อจริงๆ แล้ว มันจะทำให้โปรเจ็กต์ทำงานได้อย่างราบรื่นมากขึ้น เมื่อสร้างเนื้อหาทั้งหมดแล้ว ก็ถึงเวลานำไลบรารีไปใช้กับเอกสารที่ออกแบบ ใน Sketch ไปที่ "Preferences -> Add Library..." และเพิ่มเอกสารไลบรารี

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

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

โบนัส: การนำเข้า/ส่งออกรูปแบบข้อความ

สไตล์ข้อความไม่ได้รับการบันทึกด้วยไลบรารี แต่ปลั๊กอินลักษณะข้อความที่ใช้ร่วมกันสำหรับ Sketch ช่วยแก้ปัญหานั้น เมื่อคุณดาวน์โหลดปลั๊กอินแล้ว ให้ไปที่เอกสารไลบรารีแล้วไปที่เมนู: “ปลั๊กอิน ‐> สไตล์ข้อความที่ใช้ร่วมกัน ‐> ส่งออก…” บันทึกไฟล์นี้ในโฟลเดอร์เดียวกับเอกสารในไลบรารีของคุณ จากนั้นในเอกสารการออกแบบของคุณ ไปที่เมนูอีกครั้ง: “ปลั๊กอิน ‐> สไตล์ข้อความที่ใช้ร่วมกัน ‐> นำเข้าลักษณะข้อความ…” และนำเข้าไฟล์ที่คุณเพิ่งบันทึก ลักษณะข้อความของคุณจะปรากฏขึ้น

โบนัส: การนำเข้า/ส่งออกจานสี

เช่นเดียวกับสไตล์ข้อความ สีเอกสารจะไม่บันทึกทับด้วยไลบรารี Sketch แต่ปลั๊กอิน Sketch Palettes แก้ปัญหานั้นได้ เหมือนกับด้านบน ส่งออกจานสีโดยใช้ “ปลั๊กอิน ‐> Sketch Palette ‐> Document Colors ‐> Save Palette” และนำเข้าด้วย “Plugins ‐> Sketch Palette ‐> Document Colour ‐> Load Palette” อย่าลืมบันทึกไว้ในโฟลเดอร์เดียวกับเอกสารไลบรารีอื่นๆ ของคุณ

โบนัส: แบบอักษร

Craft by InVision เป็นชุดปลั๊กอินที่นำซอฟต์แวร์ Sketch ไปสู่อีกระดับ Craft ให้คุณแทนที่รูปภาพด้วยภาพถ่ายสต็อก สร้างต้นแบบและซิงค์กับ InVision สร้างไลบรารี และอื่นๆ หากดาวน์โหลด Craft ให้กด "cmd-shift-c" ในเอกสารและสไตล์ชีตจะถูกสร้างขึ้น แบบอักษรจะแสดงอยู่ที่นี่

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

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• ทำไมสตาร์ทอัพต้องมี Styleguide
• สิ่งที่คุณอาจไม่รู้เกี่ยวกับวิชาการพิมพ์ใน Sketch
• สุดยอดรายชื่อ 50 ปลั๊กอิน Sketch ที่ดีที่สุด
• Adobe XD กับ Sketch - เครื่องมือ UX ใดที่เหมาะกับคุณ
• วิธีสร้างกรอบการออกแบบที่มีประสิทธิภาพ (รวมกรอบงาน Sketch UI ฟรี)