استخدم Firefox لإنشاء نماذج بالأحجام الطبيعية البسيطة

Pencil هو أداة سلكية يمكن استخدامها في رسم نموذج واجهة المستخدم الخاصة بالتطبيق. الشيء الرائع في لعبة Pencil هو أنها خفيفة الوزن وسهلة الاستخدام ومتكاملة بإحكام مع Firefox. وفوق كل ذلك تطبيق مجاني مفتوح المصدر! في نهاية المقال سنقدم لك عرضًا توضيحيًا بسيطًا حول كيفية استخدام Pencil لإنشاء سلكية تشبه Brizzly.

لماذا نخلق wireframes ?

يُعد الإطار السلكي بمثابة رسم تخطيطي لفكرة تخطيط الصفحة. ويركز إطار العمل على تصميم معلومات صفحة لضمان توافق التصميم مع احتياجات المستخدم. عادةً ما يتكون wireframe من أشكال مختلفة (مثل الصناديق والأشكال البيضاوية والماس) لتمثيل عناصر المحتوى والوظيفية والملاحة. تعرض هذه الأشكال موضعها على الصفحة.

في البداية قد يبدو وكأنه مضيعة للوقت خلق الرسومات الخام للصفحة. من المهم إنشاء إطار سلكي لتشجيع المستخدمين على التركيز على عنصر الأهمية على صفحتك. يؤدي إنشاء رسم تقريبي لصفحة ما دون عناصر مرئية رائعة إلى تحويل انتباه المستخدم إلى عناصر مهمة مثل تغيير الحجم وتخطيط وموضع مكونات الصفحة. سنبدأ في الحصول على فهم أفضل لما يريده العميل بالفعل ويحتاج إلى الخروج من البرنامج عندما يبدأ المستخدم في التركيز على العناصر المهمة للصفحة. يتيح لك إنشاء إطار سلكي أنت والمستخدمين التعاون بشكل فعال وتحديد مشكلة التصميم المحتملة مبكرًا.

الشروع في العمل مع قلم رصاص

قم بتنزيل Pencil من صفحة إضافات Pencil. بمجرد تثبيت Pencil ، يمكن الوصول إليه من 'Tools'> 'Pencil Sketching'.

هذا ما يبدو بشوش. إنه تطبيق ويب رائع يقوم بتجميع Facebook و Twitter الخاص بك في صفحة واحدة.

هذه هي النتيجة النهائية للإطار السلكي. الأشكال الرئيسية في هذا الإطار السلكي هي ، المستطيلات ، مربعات النص ، وعلامات التبويب. سوف يعطي المقطع التالي من المقال مثالاً بسيطًا حول كيفية إنشاء كل شكل.

خلق مستطيل

تتمثل الخطوة الأولى لإنشاء شكل إطار سلكي في سحب شكل من قائمة "مجموعات الأشكال" إلى اللوحة القماشية.

قم بتغيير حجم المستطيل إلى عرض و ارتفاع مناسبين.

يمكننا تخصيص النص والحدود ولون الخلفية لأي شكل في Pencil. انقر بزر الماوس الأيمن على المستطيل وحدد "خصائص" لفتح نوافذ الخصائص. هذه هي شاشة خصائص الخلفية. تعيين لون خلفية المستطيل إلى الأبيض (#FFFFFF).

انقر فوق علامة التبويب "الحدود" واضبط خصائص الحدود. قم بتعيين لون الحدود إلى أسود (# 000000) وقم بتغيير وزن الحدود إلى 1.

تتيح لنا شاشة خصائص النص تخصيص نوع الخط ، والحجم ، والنمط ، والوزن ، واللون ، والسطوع ، وغموض النص.

خلق علامات التبويب

تعد علامات تبويب الصفحة الرئيسية والمسودة وعلامات الصورة ثلاث علامات تبويب مكدسة فوق بعضها البعض. اسحب ثلاثة "لوحة علامات التبويب" في المستطيل. تغيير حجم كل علامة تبويب بحيث تظهر كل علامة تبويب جنبًا إلى جنب.

افتح شاشة خصائص النص لضبط لون الخط في علامة التبويب "الصور" و "المسودة". عيّنها على Gray (# 989898).

خلق النص

اسحب شكل "النص" إلى لوحة الرسم لإنشاء كل من القائمة. يمكننا ضبط مظهر النص عن طريق الوصول إلى نافذة خصائص النص.

نصائح مفيدة لتغيير اللون

اللون هو واحد من الجزء الأكثر أهمية في تقديم wireframe. الطريقة الأكثر دقة لتغيير لون الشكل هي عن طريق تحديد كود HTML الخاص بالألوان. قد يكون من الصعب اكتشاف شفرة HTML الخاصة بلون معين. يمكننا استخدام ورقة الغش HTML اللون من w3cschools.com للبحث عن رمز HTML الصحيح ل لون معين.

نود أيضا استخدام colorzilla لاختيار الألوان من الشاشة واستخدامها في قلم رصاص. انقر فوق رمز قطارة العين في الزاوية السفلية اليسرى من Firefox لاختيار لون على الشاشة. يمكننا أيضا فتح منتقي الألوان ColorZilla عن طريق النقر المزدوج على أيقونة قطرة العين. مجرد نسخ لصق رمز Hex إلى رمز HTML لون Pencil.

استنتاج

قلم رصاص من السهل استخدام أداة wireframing. يتيح لنا دمج قلم الرصاص مع Firefox استخدام مكوّن Firefox الإضافي للمساعدة في إنشاء إطار سلكي أفضل

الروابط
تحميل قلم رصاص
تحميل Colorzilla
W3C HTML لون ورقة الغش