كيفية بناء إطار تصميم فعال (بما في ذلك إطار عمل مجاني لواجهة مستخدم Sketch)

إذا كنت تعمل في عالم التصميم لفترة من الوقت ، فمن المحتمل أنك سمعت بهذه المصطلحات: إطار عمل التصميم أو إطار عمل واجهة المستخدم أو مجموعة واجهة المستخدم أو مكتبة الأنماط. تشير جميعها إلى نفس الشيء - نظام معايير التصميم والقوالب وأنماط واجهة المستخدم والمكونات المستخدمة في جميع أنحاء المنتج وتخدم لغة التصميم الخاصة به.

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

دعنا نحدد المشكلات الرئيسية التي يحلها إطار عمل التصميم ، ولماذا تحتاج إلى واحد ، والمكونات التي ستحتاج إلى إنشائها عند إنشاء واحدة. ستجد إطار عمل Sketch UI قابل للتنزيل مجانًا لاحقًا في المقالة والذي يسمح لك بإنشاء إطار تصميم خاص بك.

ما هو إطار التصميم؟

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

غالبًا ما يكون هذا العمل متكررًا ويمكن توحيده وجعله أكثر كفاءة من خلال إنشاء نظام من الأنماط والمكونات المترابطة. بمعنى آخر ، إطار تصميم .

تحل أطر التصميم عدة مشاكل ، منها:

• القضاء على التناقضات في تصميم المنتج.
• زيادة التعاون والكفاءة والتواصل بين فرق التصميم والمنتج.
• جعل تحديثات التصميم لاحقًا في عملية التصميم أقل إحباطًا.

المشكلة الأولى: التضارب في المنتج

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

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

تحل أطر التصميم هذه المشكلة من خلال إنشاء معايير متسقة.

المشكلة الثانية: فجوات التعاون والتواصل

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

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

المشكلة الثالثة: المرحلة المتأخرة من تغييرات التصميم

كم مرة يتعين على المصممين إجراء تغيير لون واحد في ملف التصميم باستخدام 120 لوحة رسم تم تطويرها بالفعل؟ كم مرة يلزم تغيير رمز يمثل جزءًا من 200 مكون؟

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

كيفية إنشاء إطار تصميم

الآن بعد أن عرفنا ما هو إطار التصميم والمشكلات التي يحلها ، دعنا نتحدث عن إنشاء واحد (وما هو موجود في تنزيل مجموعة أدوات Sketch UI المتوفرة لاحقًا في المقالة).

إطار التصميم المستخدم لهذه المقالة هو ملف Sketch واحد تم وضعه باستخدام تسلسل هرمي محدد للمكونات ، والمعروف في Sketch باسم "الرموز". تسهل هذه الرموز تنفيذ التغييرات على مستوى الملف بنقرة واحدة. ينعكس تغيير واحد في المكون "الرئيسي" - "الرمز" - على الفور في جميع الحالات الأخرى.

التسلسل الهرمي لإطار التصميم

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

اللون

اللون هو العنصر الأكثر أهمية في التسلسل الهرمي لإطار عمل تصميم واجهة المستخدم - كل مكون فردي في التصميم يستخدم اللون. يثير اللون ردود أفعال وعواطف قوية لدى الأشخاص ويحدد المظهر العام للمنتج وإحساسه ونغمته.

من الممارسات الجيدة تقسيم الألوان إلى مجموعات:

1. الألوان الأساسية هي ألوان العلامة التجارية الرئيسية ، وعادة ما تُستخدم لإنشاء مخطط الألوان العام لمشروع ما وللمكونات الأساسية مثل الأزرار.
2. تكمل الألوان الثانوية اللوحة الأساسية — غالبًا ما تكون ظلال أو تشبع أو صبغات مختلفة من الألوان الأساسية. يستخدم تدرج الرمادي بشكل شائع للطباعة أو الخلفيات. في مكان ما بين خمسة إلى ثمانية مستويات من اللون الرمادي يجب أن يكون كافيًا.
3. تعد ألوان ملاحظات النظام مجموعة مهمة غالبًا ما ينسى المصممون أمرها. تعرض هذه الألوان رسائل النظام ، بما في ذلك التنبيهات والتحذيرات والإشعارات.

الشبكة: مساحة التصميم

بمجرد تحديد الألوان ، فإن الخطوة التالية هي إعداد شبكة. الشبكة تحافظ على جميع المكونات الأخرى على الصفحة في المكان والترتيب الصحيحين. هذه هي مساحة التصميم الشاملة.

هناك نوعان من الشبكات: الرأسي والأفقي .

الشبكة العمودية هي الأكثر استخدامًا وتحافظ على محاذاة كل شيء أفقيًا. هناك العديد من أنظمة الشبكات الشائعة مثل Bootstrap أو شبكة 960 بكسل الأقدم.

الشبكة الأفقية ليست شائعة. يتم استخدام شبكة أفقية للطباعة. يخلق إيقاعًا عموديًا للفقرات ويشيع ظهوره في الصحف.

المعدلات: قواعد الأسلوب

بالإضافة إلى اللون والشبكة ، هناك مكون آخر مرتفع في التسلسل الهرمي لإطار التصميم: المعدلات. لا يمكن استخدامها كمكونات مستقلة - فهي تستخدم لتعديل أو تصميم الآخرين.

تضفي هذه المجموعة أسلوبًا على المشروع وتتضمن مكونات مسؤولة عن الجماليات ، مثل الأشكال أو الظلال ؛ قد يكون تغييرها بشكل فردي في المراحل اللاحقة من المشروع مرهقًا.

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

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

الطباعة: المحتوى

الطباعة هي آخر عنصر مهم لإطار التصميم. يمكن تقسيمها إلى مجموعتين: نسخة صفحة ثابتة ، مثل الرؤوس والفقرات ؛ ونسخ المكونات التفاعلية ، مثل الأزرار أو التنقل أو حقول الإدخال.

صمم أسلوب وحجم جميع العناوين (H1 ، H2 ، H3 ، إلخ) والفقرات. لا تحتوي نسخة الصفحة الثابتة عادةً على العديد من الاختلافات الأسلوبية (اللون أو الوزن). الاختلاف الوحيد - فيما يتعلق بنمط نسخة الصفحة الثابتة - هو ما إذا كان على خلفية فاتحة أو داكنة. لذلك ، من الأفضل إنشاء مجموعتين من الألوان للتأكد من أن نسخة الصفحة الثابتة تعمل على كليهما.

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

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

أيقونات

هناك مجموعتان من الرموز في نظام التصميم: أيقونات إعلامية وواجهة مستخدم. عادةً ما تكون المجموعة الأولى جزءًا من نظام التوضيح ولا تُستخدم لأي مكونات تفاعل واجهة المستخدم (مثل الأزرار). المجموعة الثانية - رموز واجهة المستخدم - تضيف معنى للمكونات الأكثر تعقيدًا: الأزرار أو الملصقات أو الجداول ، بينما تشغل مساحة صغيرة جدًا. يمكن أيضًا استخدام الرموز الموجودة في واجهة المستخدم كمشغلات للوظائف مثل "تحرير" و "نسخ" و "تنزيل" و "إزالة".

ابدأ برموز بسيطة مستخدمة لتفاعلات واجهة المستخدم ، مثل الأسهم أو "إضافة" (+) أو "إغلاق" (x). من الممارسات الجيدة تصميمها بأحجام مختلفة (12 بكسل ، 16 بكسل ، 24 بكسل 32 بكسل).

عناصر

أزرار

تعد الأزرار بلا شك واحدة من أهم المكونات في تصميم واجهة المستخدم ، وعلى مر السنين ، مرت بالعديد من التغييرات مع ظهور اتجاهات التصميم وتلاشيها.

عند تصميم الأزرار ، تأكد من تصميم "حالاتها" الفردية. كقاعدة عامة ، يحتوي الزر على حالات متعددة ويوفر ملاحظات مرئية للمستخدمين للإشارة إلى الحالة الحالية (الخمول ، التمرير ، الضغط ، التعطيل ، النشط ، إلخ).

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

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

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

مكونات الإدخال

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

مكونات معقدة

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

الأقسام

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

أفضل ممارسات إطار التصميم

اختبار إطار التصميم باستمرار

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

إنشاء مكونات بسيطة لواجهة المستخدم

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

لا تركز على أسلوب واحد

يجب أن يكون إطار التصميم عالميًا ، لذا بدلاً من التركيز على نمط معين ، ركز على المكونات التي يمكن استخدامها لإنشاء نمط.

قم بإنشاء إطار التصميم الخاص بك

في مشروعك التالي ، خذ وقتك في البداية لبناء إطار تصميم مدروس. ستجد أنه يحسن عملية التصميم الإجمالية ، ويزيد من الكفاءة ، ويعزز اتساق تصميم المنتج ، مما يحسن قابلية الاستخدام. ستوفر الوقت ، وتنقل أفكار التصميم بشكل أكثر فاعلية ، وتجعل العملاء وأصحاب المصلحة سعداء عندما يتم إحياء هذه الأفكار في بضع ثوانٍ فقط على 120 لوحة رسم تخطيطية.

هل أنت جاهز لبدء إطار التصميم الخاص بك؟

قم بتنزيل ملف Sketch هنا. يتم تضمين التعليمات حول كيفية استخدامه.

أنظمة التصميم الملهمة وأطر واجهة المستخدم

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

تصميم المواد من Google - حاليًا أحد أكثر أطر التصميم شيوعًا في العالم. تعرف على كيفية قيام Google بطبقات عملية التصميم بأكملها وإنشاء تسلسل هرمي مفيد للمكونات.

لغة تصميم IBM - تشارك IBM عملية التصميم بالكامل بما في ذلك شرح عميق لكل التفاصيل. كما أنهم يشاركون الكثير من الموارد من لغة التصميم الخاصة بهم ، من الرموز البسيطة إلى مكتبة الرسوم المتحركة لواجهة المستخدم.

Atlassian - مصدر تعليمي رائع آخر. دليل نمط المنتج الخاص بهم هو نظام تصميم رائع للدراسة. يشاركون حزمة Web GUI الخاصة بهم ، وهو ملف Sketch يحتوي على الكثير من المكونات والمفاهيم.

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية