ใช้ Firefox เพื่อสร้าง Mockups ง่าย

ดินสอเป็นเครื่องมือ wireframing ที่เราสามารถใช้ในการร่างภาพจำลองของส่วนต่อประสานผู้ใช้ของแอปพลิเคชันของเรา สิ่งที่ยอดเยี่ยมเกี่ยวกับดินสอก็คือมันมีน้ำหนักเบาใช้งานง่ายและผสานรวมกับ Firefox อย่างแน่นหนา เหนือสิ่งอื่นใดแอปพลิเคชั่นโอเพนซอร์สฟรี! ในตอนท้ายของบทความเราจะให้คุณตัวอย่างง่ายๆเกี่ยวกับวิธีการใช้ดินสอในการสร้างโครงลวดเหมือน Brizzly.

ทำไมเราถึงสร้าง wireframes ?

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

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

เริ่มต้นด้วยดินสอ

ดาวน์โหลด Pencil จากส่วนเสริมของ Pencil เมื่อคุณติดตั้งดินสอจะสามารถเข้าถึงได้จาก 'เครื่องมือ'> 'ดินสอร่าง'.

นี่คือสิ่งที่ดูเหมือนว่า Brizzly เป็นแอปพลิเคชั่นเว็บสวย ๆ ที่รวม Facebook และ Twitter ของคุณไว้ในหน้าเดียว.

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

สร้างสี่เหลี่ยมผืนผ้า

ขั้นตอนแรกของการสร้างรูปร่างของเส้นลวดคือการลากรูปร่างจากเมนู 'รวบรวมรูปร่าง' ลงบนผืนผ้าใบ.

ปรับขนาดสี่เหลี่ยมผืนผ้าให้มีความกว้างและความสูงที่เหมาะสม.

เราสามารถปรับแต่งข้อความเส้นขอบและสีพื้นหลังของรูปร่างใด ๆ ในดินสอ คลิกขวาที่สี่เหลี่ยมผืนผ้าแล้วเลือก 'Properties' เพื่อเปิดหน้าต่าง Properties นี่คือหน้าจอคุณสมบัติพื้นหลัง ตั้งค่าสีพื้นหลังของสี่เหลี่ยมผืนผ้าเป็นสีขาว (#FFFFFF).

คลิกแท็บ 'ชายแดน' และปรับคุณสมบัติของเส้นขอบ ตั้งค่าสีขอบเป็นสีดำ (# 000000) และเปลี่ยนน้ำหนักเส้นขอบเป็น 1.

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

กำลังสร้างแท็บ

แท็บ home, draft, picture เป็นแท็บสามแท็บที่ซ้อนทับกัน ลาก 'แผงควบคุมแท็บ' สามรายการลงในสี่เหลี่ยมผืนผ้า ปรับขนาดแต่ละแท็บเพื่อให้แต่ละแท็บแสดงเคียงข้างกัน.

เปิดหน้าจอคุณสมบัติข้อความเพื่อปรับสีตัวอักษรของแท็บ 'รูปภาพ' และ 'แบบร่าง' ตั้งเป็นสีเทา (# 989898).

การสร้างข้อความ

ลากรูปร่าง 'ข้อความ' ลงบนผืนผ้าใบเพื่อสร้างเมนูแต่ละรายการ เราสามารถปรับลักษณะที่ปรากฏของข้อความโดยการเข้าถึงหน้าต่างคุณสมบัติข้อความ.

เคล็ดลับที่เป็นประโยชน์สำหรับการเปลี่ยนสี

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

นอกจากนี้เรายังต้องการใช้ colorzilla เพื่อเลือกสีจากหน้าจอและใช้ในดินสอ คลิกที่ไอคอนรูปตาหยดน้ำที่มุมซ้ายล่างของ Firefox เพื่อเลือกสีบนหน้าจอ นอกจากนี้เรายังสามารถเปิดตัวเลือกสีของ ColorZilla ได้ด้วยการดับเบิลคลิกที่ไอคอนรูปหยดน้ำ เพียงแค่คัดลอกวางรหัส Hex ลงในรหัส HTML สีของดินสอ.

ข้อสรุป

ดินสอเป็นเครื่องมือ wireframing ที่ใช้งานง่าย การรวมดินสอกับ Firefox ทำให้เราสามารถใช้ปลั๊กอิน Firefox อื่น ๆ เพื่อช่วยสร้างโครงร่างที่ดีกว่า

การเชื่อมโยง
ดาวน์โหลดดินสอ
ดาวน์โหลด Colorzilla
แผ่นโกงสี HTML W3C