Pencil เป็นเครื่องมือ Wireframing ที่เราใช้ในการร่างภาพจำลองของอินเทอร์เฟซผู้ใช้ของแอปพลิเคชันของเรา สิ่งที่ยอดเยี่ยมเกี่ยวกับ Pencil คือมีน้ำหนักเบาใช้งานง่ายและผสานรวมกับ Firefox อย่างแน่นหนา เหนือสิ่งอื่นใดทั้งหมดเป็นแอปพลิเคชั่นโอเพ่นซอร์สฟรี! ในตอนท้ายของบทความเราจะสาธิตวิธีใช้ Pencil เพื่อสร้างโครงร่าง Brizzly เหมือน Wireframe
ทำไมเราถึงสร้าง wireframes?
โครงร่างเป็นภาพร่างของแนวคิดเค้าโครงหน้าโครงร่างมุ่งเน้นไปที่การออกแบบข้อมูลของหน้าเพื่อให้แน่ใจว่าการออกแบบนั้นตรงกับสิ่งที่ผู้ใช้ต้องการ โครงร่างมักประกอบด้วยรูปร่างที่แตกต่างกัน (เช่นกล่องวงรีและเพชร) เพื่อแสดงถึงเนื้อหาองค์ประกอบที่ใช้งานได้และการนำทาง รูปร่างเหล่านี้แสดงตำแหน่งบนหน้า
ในตอนแรกอาจดูเหมือนเสียเวลาในการสร้างภาพร่างคร่าวๆของเพจ โครงลวดเป็นสิ่งสำคัญที่จะทำให้ผู้ใช้ของคุณมุ่งเน้นไปที่องค์ประกอบสำคัญบนหน้าของคุณ การสร้างภาพร่างคร่าวๆของหน้าโดยไม่มีองค์ประกอบภาพที่สวยงามเปลี่ยนความสนใจของผู้ใช้ไปยังองค์ประกอบที่สำคัญเช่นการปรับขนาดการจัดวางและการจัดวางส่วนประกอบของหน้า เราจะเริ่มทำความเข้าใจเกี่ยวกับสิ่งที่ลูกค้าต้องการและต้องการจากซอฟต์แวร์อย่างแท้จริงเมื่อผู้ใช้เริ่มโฟกัสไปที่องค์ประกอบที่สำคัญของเพจ การสร้างโครงลวดช่วยให้คุณและผู้ใช้ทำงานร่วมกันได้อย่างมีประสิทธิภาพและระบุปัญหาการออกแบบที่อาจเกิดขึ้นได้ตั้งแต่เนิ่นๆ
เริ่มต้นใช้งานดินสอ
ดาวน์โหลดดินสอจากหน้าส่วนเพิ่มของดินสอ เมื่อคุณติดตั้ง Pencil แล้วจะสามารถเข้าถึงได้จาก "Tools"> "Pencil Sketching"
นี่คือลักษณะของ Brizzly เป็นเว็บแอปพลิเคชันที่ยอดเยี่ยมที่รวบรวม Facebook และ Twitter ของคุณไว้ในหน้าเดียว
นี่คือผลลัพธ์สุดท้ายของโครงลวด รูปร่างหลักในโครงร่างนี้ ได้แก่ สี่เหลี่ยมกล่องข้อความและแท็บ ส่วนถัดไปของบทความจะยกตัวอย่างง่ายๆในการสร้างแต่ละรูปร่าง
การสร้างสี่เหลี่ยมผืนผ้า
ขั้นตอนแรกของการสร้างรูปร่างโครงลวดคือการลากรูปร่างจากเมนู "Shape Collections" ลงบนผืนผ้าใบ
ปรับขนาดสี่เหลี่ยมผืนผ้าให้มีความกว้างและความสูงที่เหมาะสม
เราสามารถปรับแต่งข้อความเส้นขอบและสีพื้นหลังของรูปทรงใดก็ได้ในดินสอ คลิกขวาที่สี่เหลี่ยมผืนผ้าแล้วเลือก "Properties" เพื่อเปิดหน้าต่าง Properties นี่คือหน้าจอคุณสมบัติพื้นหลัง ตั้งค่าสีพื้นหลังของ Rectangle เป็นสีขาว (#FFFFFF)
คลิกแท็บ "เส้นขอบ" และปรับคุณสมบัติของเส้นขอบ ตั้งค่าสีเส้นขอบเป็นสีดำ (# 000000) และเปลี่ยนน้ำหนักเส้นขอบเป็น 1
หน้าจอคุณสมบัติของข้อความช่วยให้เราสามารถปรับแต่งแบบอักษรขนาดลักษณะน้ำหนักสีความสว่างและความทึบของข้อความได้
การสร้างแท็บ
แท็บบ้านแบบร่างเป็นแท็บสามแท็บที่ซ้อนทับกัน ลาก "Tabs Panel" สามอันลงในสี่เหลี่ยมผืนผ้า ปรับขนาดแต่ละแท็บเพื่อให้แต่ละแท็บแสดงเคียงข้างกัน
เปิดหน้าจอคุณสมบัติข้อความเพื่อปรับสีแบบอักษรของแท็บ "รูปภาพ" และ "ร่าง" ตั้งค่าเป็นสีเทา (# 989898)
การสร้างข้อความ
ลากรูปร่าง "ข้อความ" ลงบนผืนผ้าใบเพื่อสร้างแต่ละเมนู เราสามารถปรับลักษณะข้อความได้โดยเข้าไปที่หน้าต่างคุณสมบัติข้อความ
คำแนะนำที่เป็นประโยชน์สำหรับการเปลี่ยนสี
สีเป็นส่วนสำคัญที่สุดอย่างหนึ่งในการนำเสนอโครงร่างที่สวยงาม วิธีที่แม่นยำที่สุดในการเปลี่ยนสีของรูปร่างคือการระบุรหัส HTML ของสี การหาโค้ด HTML สำหรับสีใดสีหนึ่งอาจเป็นเรื่องยาก เราสามารถใช้เอกสารโกงสี HTML จาก w3cschools.com เพื่อค้นหาโค้ด HTML ที่ถูกต้องสำหรับสีที่ต้องการ
เราชอบใช้ colorzilla เพื่อเลือกสีจากหน้าจอและใช้ใน Pencil คลิกที่ไอคอนหยดตาที่มุมล่างซ้ายของ Firefox เพื่อเลือกสีบนหน้าจอ นอกจากนี้เรายังสามารถเปิดตัวเลือกสีของ ColorZilla ได้โดยดับเบิลคลิกที่ไอคอน Eye Drop เพียงคัดลอกและวางรหัส Hex ลงในโค้ด HTML สีของ Pencil
สรุป
ดินสอเป็นเครื่องมือ Wireframing ที่ใช้งานง่าย การรวม Pencil กับ Firefox ทำให้เราสามารถใช้ปลั๊กอินอื่น ๆ ของ Firefox เพื่อช่วยสร้างโครงร่างที่ดีขึ้นได้
ลิงค์
ดาวน์โหลด Pencil
ดาวน์โหลด Colorzilla
W3C HTML Color Cheat Sheet
