تأثير تصميم Microsoft الشامل في التعليمات البرمجية Visual Studio

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

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

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

مبادئ Microsoft الأربعة للتصميم الشامل

يضع Windows Dev Center تصميم برنامج يمكن الوصول إليه داخل فئة سهولة الاستخدام, ونشروا أيضا العديد من المقالات العظيمة حول هذا الموضوع. مايكروسوفت أربعة مبادئ للتصميم الشامل (المذكورة لفترة وجيزة أدناه) وتناقش في هذه المقالة.

1. يفكر عالمي.
2. أصنعها الشخصية.
3. إحتفظ به بسيط.
4. خلق بهجة.

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

عندما أقوم بتحليل كيفية تطبيقها في Visual Studio Code ، أستخدمها بالمعنى التالي:

1. يفكر عالمي: إمكانية الوصول
2. أصنعها الشخصية: التخصيص ، القابلية للتوسعة
3. إحتفظ به بسيط: خالية من الهاء ، واجهة المستخدم المنطقية
4. خلق بهجة: ميزة الاكتشاف

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

بينما يوصي Windows Dev Center بتطبيق مبادئ التصميم الشامل هذه على تطبيقات Windows 10 ، فقد كرست Microsoft موقع Microsoft Design أيضًا للتصميم الشامل.

على الرغم من أن Visual Studio Code ليس فقط لنظام التشغيل Windows 10 ولكن يهدف إلى أن يكون برنامج عبر منصة, لا يزال بإمكاننا اختبار ميزاته بأمان وفقًا للمبادئ المذكورة أعلاه ، نظرًا لأن Microsoft تتعامل بوضوح مع التصميم الشامل باعتباره مسار تصميم البرامج الذي يريدون اتباعه في المستقبل.

فكر عالميا

تحت “فكر عالميا” المبدأ ، سنقوم بفحص مدى إمكانية الوصول إلى Visual Studio Code لمجموعات المستخدمين المتنوعة, مثل مستخدمي التقنيات المساعدة (سواء كانوا يستخدمونها للإعاقة أو التفضيل) ، والأشخاص ذوي التقنيات المحدودة ، والمتحدثين باللغة الإنجليزية لغير الناطقين بها ، إلخ..

1. التكبير

يمكن إجراء التكبير بسهولة عن طريق ضرب Ctrl + = / Cmd + = (ماك) اختصار لوحة المفاتيح ل تكبير, و Ctrl + - / كمد + - (ماك) اختصار ل تصغير, ويمكننا أيضًا الوصول إلى ميزة Zoom عبر شريط القائمة العلوي.

لاحظ أنه اعتبارًا من الإصدار 1.1.1 ، لا تعمل علامات + و - على لوحات مفاتيح Windows على لوحة المفاتيح الرقمية على اليمين ، بل على لوحة مفاتيح الكتابة (الأبجدية الرقمية) - والتي ربما لا تكون الأفضل للتضمين.

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

2. موضوع التباين العالي

مواضيع عالية التباين تسهيل في معالجة المعلومات المرئية للمستخدمين ضعاف البصر ، وبالتالي فهي عنصر مهم في إمكانية الوصول.

هناك سمة التباين العالي الافتراضي في Visual Studio Code ، يمكنك تعيينه عن طريق النقر فوق ملف> تفضيلات> سمة اللون القائمة ، ولكن يمكنك تنزيل الآخرين من Visual Studio Code Marketplace أيضًا.

قدمت Microsoft سمات High Contrast في نظام التشغيل Windows 7 ، من الجيد أن تتعقب هذه الميزة.

3. لوحة المفاتيح الملاحة

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

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

4. تبويب الملاحة

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

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

خلال الاختبار ، وجدت أن محرر, ال بار جانبي, ال عرض بار (راجع تسمية مناطق رمز VS) ، ويمكن الوصول إلى جميع الإجراءات والعناصر باستخدام مفتاح Tab. على الرغم من أن مستخدمي علامة التبويب لا يمكنهم الوصول إلى وظائف شريط القائمة العلوي باستخدام لوحة المفاتيح الخاصة بهم. يمكن لـ Command Palette F1 أن يكون بديلاً إلى حد ما ، حيث يمكن الوصول إلى جميع الأوامر التي يمكن العثور عليها في القائمة العلوية من هناك أيضًا.

تتمثل ميزة إمكانية الوصول المهمة في التنقل بين علامات التبويب في ميزة ملائمة علامات التبويب التي تتيح للمستخدمين التبديل بين الوظيفتين الرئيسيتين في مفتاح Tab. يجعل المفتاح Tab المحاصر من الممكن التحرك عبر أجزاء مختلفة من رمز VS, بينما عادة ما يكون المفتاح Tab يضيف حرف الجدولة إلى الملف النصي فتح في منطقة المحرر. يمكن للمستخدمين التبديل بين الإثنين من الإمكانات عن طريق ضرب ربط مفتاح Ctrl + M.

5. القراء الشاشة

بالطبع ، يجب أن يكون البرنامج المتاح متاحًا بالكامل لمستخدمي قارئ الشاشة أيضًا. تذكر المستندات أن فريق VS Code dev قام باختبار مدى توفر قارئ الشاشة مع قارئ شاشة NVDA.

للاختبار ، استخدمت جهازي قراءة شاشة آخرين ، JAWS أحد أكثر تطبيقات قراءة الشاشة استخدامًا ، و Microsoft Narrator وهو قارئ الشاشة المدمج في نظام التشغيل Windows 10.

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

6. المصحح الوصول

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

7. التعريب

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

Visual Studio Code مترجم حاليًا لـ 10 لغات عرض مختلفة (الإنجليزية ، الصينية المبسطة ، الصينية التقليدية ، الفرنسية ، الألمانية ، الإيطالية ، اليابانية ، الكورية ، الروسية ، الإسبانية).

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

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

8. حجم يمكن الوصول إليها

برامج تحرير شفرة المصدر الحديثة ليست كبيرة جدًا ، وقد انضمت Microsoft أيضًا إلى هذا الاتجاه ، نظرًا لأن Visual Studio Code هو أقل من 100 ميجابايت التحميل ، ومساحة القرص أقل من 200 ميجابايت.

9. عبر منصة التنمية

إذا كنا نريد برنامجًا شاملاً ، فمن الضروري أيضًا أن يكون نظامًا أساسيًا مشتركًا مما يعني أنه يجب أن يعمل على أنظمة تشغيل مختلفة. VS Code يلبي هذا المطلب ، لأنه يدعم أنظمة التشغيل Windows و OS X و Linux كذلك.

اجعلها شخصية

“اجعلها شخصية” هو مبدأ Microsoft الثاني للتصميم الشامل ، وسوف نلقي نظرة على التفصيل و المدودية قابلى المد بموجب هذا المعيار ، كما وعدت من قبل. يلبي Visual Studio Code كلا المتطلبات بشكل جيد لدرجة أنني قمت حتى بكتابة منشورات منفصلة على كلاهما ، هنا حول التخصيص ، وهنا على القابلية للتوسعة.

باختصار ، يتم تنفيذ التخصيص مع موضوعات مخصصة و إعدادات التكوين JSON شكل وحدات, بينما يتم تحقيق القابلية للتوسعة بواسطة ملحقات مخصصة التي يمكن للمستخدمين تنزيلها من Visual Studio Code Marketplace ، أو إنشاء الخاصة بهم في TypeScript أو JavaScript.

يمكنك قراءة المزيد حول الخلفية التقنية لنهج Visual Studio Code للتوسعة هنا.

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

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

ملفات التكوين هي وحدات ، لأنها تأتي في شكل هرمي منظم ل .سلمان الملفات ، وهنا قائمة من أهمها:

1. settings.json إلى عن على إعدادات المستخدم المخصصة, يمكن الوصول إليها عبر ملف> تفضيلات> إعدادات المستخدم قائمة طعام
2. .vscode / settings.json إلى عن على إعدادات مساحة العمل المخصصة, يمكن الوصول إليها عبر ملف> تفضيلات> إعدادات مسارات العمل قائمة طعام
3. keybindings.json إلى عن على ربط مفتاح مخصص, يمكن الوصول إليها عبر ملف> تفضيلات> اختصارات لوحة المفاتيح قائمة طعام
4. javascript.json, php.json, css.json, c.json, وحفنة من الآخرين .سلمان ملفات لغات البرمجة المختلفة لإعداد قصاصات المستخدم المخصصة, يمكن الوصول إليها عبر ملف> تفضيلات> قصاصات المستخدم قائمة طعام
5. launch.json إلى عن على إعدادات المصحح المخصصة, يمكن الوصول إليها من خلال النقر على أيقونة الترس في الشريط العلوي لـ Debug View (على يسار المحرر)
6. .vscode / locale.json إلى عن على إعدادات لغة العرض المخصصة, يمكن الوصول إليها عن طريق كتابة تكوين اللغة القيادة في لوحة القيادة (F1)
7. .vscode / tasks.json إلى عن على إعدادات عداء المهام المخصصة, يمكن الوصول إليها عن طريق كتابة تكوين عداء المهام القيادة في لوحة القيادة (F1)

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

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

أبقيها بسيطة

يمكننا تلبية مايكروسوفت أبقيها بسيطة مبدأ التصميم الشامل في العديد من الأماكن الأخرى في البرمجة والتصميم ، فقط فكر في مبدأ التصميم KISS (Keep It Simple، Stupid) ، ومبدأ تطوير البرمجيات DRY (لا تكرر نفسك). لهذا السياق الجاري ، سنواصل تركيزنا على بساطة واجهة المستخدم.

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

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

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

من خلال المستندات ، يمكننا أن نتعرف على أنه كان مسعى وضعته Microsoft تأثيرًا كبيرًا على:

يوفر VS Code أيضًا للمستخدمين ميزة "التحرير جنبًا إلى جنب" التي يمكن العثور عليها أيضًا في برامج تحرير التعليمات البرمجية المصدر الأخرى ، وهي ليست مصادفة ، يجعل عملية الترميز أبسط بكثير, وبالطبع يساهم في “أبقيها بسيطة” مبدأ التصميم الشامل ، أيضا.

علاوة على واجهة المستخدم الأساسية ، يحتوي Visual Studio Code على ميزات رائعة تجدر الإشارة إليها في مقالة حول التصميم الشامل ، مثل:

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

خلق البهجة

ليس من السهل بشكل خاص إيجاد معايير ملموسة يمكننا استخدامها لفحص “خلق البهجة” مبدأ التصميم الشامل ، لذلك أنا أخيرا استقر لمعيار ميزة الاكتشاف, كما حددت مايكروسوفت هذا المبدأ بالطريقة التالية:

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

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

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

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

بالنسبة لي ، أحببت التجربة أكثر أو أقل: وثائق جيدة التنظيم عبر الإنترنت, ال يسهل تصفح Visual Studio Code Marketplace, و ال موضوعات ملونة مخصصة التي يمكن معاينتها في الوقت الحقيقي أثناء التمرير على قائمة منسدلة (الوصول إليها عبر ملف> تفضيلات> سمة اللون قائمة طعام).

الكلمات الأخيرة

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

كما رأينا ، فقد نجحوا في تطبيق النظرية بشكل عملي في محرر التعليمات البرمجية المصدر الجديد ، Visual Studio Code ، على الرغم من أنه لا تزال هناك بعض المجالات التي يجب تحسينها ، مثل توفير دعم Tab الكامل وميزة بحث واستبدال عالمية.

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

• مقالات إمكانية الوصول لـ Windows Dev Center
• دليل أدوات التصميم الشامل لـ Microsoft Design (PDF) (قابل للتنزيل)
• Hongkiat.com علامة إمكانية الوصول