أنظمة تصميم قابلة للتطوير لمنتجات SaaS

ياش شاه (00:02:914)

نعم، يقول أننا نعيش. انتظر حتى ينضم بعض الأشخاص.

ياش شاه (00:19.754)

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

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

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

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

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

ياش شاه (02:44.366)

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

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

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

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

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

ياش شاه (05:12.088)

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

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

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

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

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

ياش شاه (07:37.038)

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

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

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

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

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

ياش شاه (09:54.87)

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

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

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

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

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

ياش شاه (12:17.902)

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

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

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

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

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

ياش شاه (14:44.108)

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

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

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

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

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

ياش شاه (17:08.002)

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

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

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

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

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

ياش شاه (19:29.774)

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

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

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

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

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

ياش شاه (21:50.83)

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

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

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

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

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

ياش شاه (24:16.334)

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

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

تم إطلاقها باسم MVP وحتى بعد الإطلاق، حتى بعد الاستحواذ على Microsoft، فإنها لا تزال تحتفظ بنفس نظام التصميم. تم الاستحواذ على الشركة من قبل Microsoft. وندرليست. نعم، وندرليست. لقد قاموا بتغييره إلى Wunderlist وما زالوا يحتفظون بنفس نظام التصميم. ولكن هناك شركات ذهبت إلى حد ما لتغيير نظام التصميم بأكمله وذهبت إلى منصة على مستوى المؤسسة. لذلك، على سبيل المثال،

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

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

ياش شاه (26:38.995)

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

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

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

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

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

ياش شاه (29:04.781)

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

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

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

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

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

ياش شاه (31:25.965)

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

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

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

لإنهاء نظام التصميم الخاص بهم. لكن هذا رائع، أليس كذلك؟ حتى تتمكن من البدء. أنا 50-70٪ إنها ليست المهمة الكاملة المنجزة، ولكنها جيدة بما فيه الكفاية للبدء وإطلاق MVP، والحصول على أول عدد قليل، مثل أول 100 عميل يحبون ما تقوم ببنائه، والذين يحبون ما تفعله. وهذا جيد بما يكفي للوصول إلى هناك. وهكذا بالنسبة لجميع الأشخاص الموجودين، أينما كنت تشاهد هذا أو تستمع إليه في التعليقات، سنضيف الروابط إلى جميع الموارد التي ذكرها كوشيك، بما في ذلك Tailwind و Untitled و

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

ياش شاه (33:46.795)

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

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

‍