رسم رمز أفضل الممارسات

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

هناك إصدار محدث من هذا الدليل متاح:

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

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

إنشاء المكونات الأساسية

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

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

تأسيس اصطلاح تسمية

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

أوصي بمصطلح تسمية حالة تحكم / تعريف. لا ينبغي أن يكون للحالات الافتراضية حالة - علامة التبويب غير نشطة وفعالة التبويب نشطة. علامة التبويب ، علامة التبويب النشطة هي وسيلة للذهاب.

مثال:

  • زر / لون تمرير الماوس
  • علامة التبويب / رمز نشط

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

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

لا أحد يحب أن يرث ملف Sketch ضعيف التنظيم بشكل عام ، لذلك دعونا لا نوزع الرموز المنظمة بشكل سيئ.

استخدام النص العام

امنح الطبقات نصًا نائبًا عامًا - وليس فقط النص الذي كنت تستخدمه في حالة الاستخدام المحددة التي قمت بها عند إنشاء هذا الرمز. نص العنصر النائب الخاص بنا للأزرار هو "ACTION INTENT" كتذكير سلبي لكيفية عبارة microcopy الخاصة بك.

إعطاء طبقات أسماء مناسبة

أعط الطبقات نفسها أسماء مناسبة ومتسقة. يجب دائمًا تسمية الخلفيات باسم الخلفية وعدم خلطها مع bg وما إلى ذلك. ألعنك إذا تركتها المسماة مستطيل 100! إذا قمت بفصل الرمز ، فيجب أن يظل كائنًا أنيقًا ومستقلًا.

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

تطبيق التسلسل الهرمي نظيفة ومتسقة

ضع أي نص قابل للتحرير في المقدمة.

مجموعة مرتبة ، وتأكد من عدم وجود مجموعات أو عناصر إضافية لا تخدم أي غرض (والذي يمكن أن يحدث إذا قمت بلصق في أيقونة الخ).

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

تأكد من تغيير حجم الرموز بشكل صحيح

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

تحقق من ورقة تغيير حجم ورقة بيتر نوفيل

يجب أن يكون النص ثابت

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

تصميم أصغر نسخة من رمز

من الأسهل التصميم حول التمدد على الرموز بدلاً من ضغطها.

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

تأكد من أن الرموز التي ستستبدلها لها نفس حجم لوح الرسم

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

ضربني مع الأفكار وردود الفعل! لست متأكدًا تمامًا من أن هذا هو النهج الأمثل ، لكنني أرغب في بدء محادثة حول جودة Symbol.