كيفية إنشاء نظام التصميم

استقلالية أنظمة التصميم مثل تصميم المواد وكيف يمكن للمرء أن يبدأ في بناء نظمه الخاصة.

ملاحظة: هذه المقالة مستوحاة من محادثة أجريتها مع Nick Butcher ، Design and Developer Advocate في Google ، عن سلسلة YouTube الخاصة بنا "Designer vs. Developer". يمكنك أيضًا الاستماع إلى إصدار أطول من المحادثة عن طريق تنزيل أو الاشتراك في البث لدينا على Spotify أو iTunes أو Google Play Music.

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

  • المتانة (Firmatis): يجب أن يكون المبنى قويًا وأن يبقى في حالة جيدة.
  • الأداة المساعدة (Utilitas): يجب أن يكون المبنى وظيفيًا ومفيدًا للأشخاص الموجودين فيه.
  • الجمال (Venustatis): يجب أن يكون المبنى سارًا وحافلًا.

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

المبدأ الأول: الطبقة البشرية

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

يجب أن تكون أهداف اللمس 48 × 48 بكسل على الأقل.

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

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

المبدأ الثاني: طبقة الاتفاقيات

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

مثال على اتفاقيات تطبيقات Crane عندما يتعلق الأمر بمعالجة الأخطاء

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

المبدأ الثالث: طبقة العلامة التجارية

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

في هذا المثال ، يتكيف تطبيق Shrine مع التصميم المادي للتعبير عن علامته التجارية الخاصة.

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

تشبه طبقة العلامات التجارية مبدأ Beauty Beauty من Vitruvius ، وهي تمثل روح نظام التصميم.

تطبيق المبادئ

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

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

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

يمكنك معرفة المزيد حول تصميم UX في Web Fundamentals.