لماذا تحتاج الشركات الناشئة إلى Styleguide

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

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

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

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

أهم خمسة أسباب تجعل من Styleguide فكرة جيدة

1. Styleguide يجعل التصاميم ملموسة والعلامات التجارية واضحة

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

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

يجعل دليل الأسلوب أسلوب التصميم العام وإرشادات العلامة التجارية والمواصفات والقواعد متاحة للجميع في شركتك. انها مجرد نقرة واحدة. يمكنهم الانتقال إلى عنوان URL للوصول بسهولة إلى دليل النمط عبر الإنترنت أو تنزيل ملف PDF. يصبح التصميم مهمة الجميع - لم يعد مسؤولية فريق التصميم وحده. إنه نهج حكيم من شأنه تحسين واجهة مستخدم منتجك.

2. Styleguide يجعل التصميم الخاص بك أكثر تناسقًا

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

1. "انها تمطر؛ أحتاج إلى مظلتي ".
2. "إنها تمطر ، أحتاج إلى مظلي"
3. "إنها تمطر ، أحتاج إلى مظلة"

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

الاتساق يجعل منتجك أكثر سهولة في الاستخدام ؛ يمكن أن يترجم منتج قابل للاستخدام بشكل كبير إلى مزيد من المشاركة والمبيعات.

3. إعادة استخدام نفس مكونات النظام يجعل تطبيقك أسهل في الاستخدام

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

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

4. يجعل Styleguide تطبيقك أسرع في التطوير على المدى الطويل

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

5. Styleguide يسهل كفاءات الإنتاج والابتكار

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

تحديات بدء التشغيل ، دليل أسلوب متغير

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

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

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

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

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

ابدأ ببعض إلهام واجهة المستخدم

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

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

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

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

تصميم مكونات واجهة المستخدم الصلبة

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

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

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

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

Styleguide كوثيقة حية

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

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

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

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

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

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

خاتمة

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

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

• • •

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

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