ההשפעה של עיצוב משולב של מיקרוסופט ב - Visual Studio קוד

אוניברסלי, או כולל עיצוב היא פילוסופיה עיצוב חדש מיקרוסופט נראה לקחת ברצינות רבה בפיתוח תוכנה לאחרונה. עיצוב כוללני לוקח עיצוב נגיש לשלב הבא, כפי שהוא רואה נגישות מנקודת מבט רחבה יותר. כאשר הייתי בודק קוד המקור החדש של מיקרוסופט עורך, Visual Studio קוד, את השאלה כיצד הם יישמו את התיאוריה הלכה למעשה באופן טבעי התעוררה במוחי.

פוסט זה אינו מתכוון להיות רק תיאור של תכונות נגישות של Visual Studio קוד, כמו במסמכים הרשמיים אתה יכול למצוא סיכום גדול מהם, אלא שואפת להיות מקרה מבחן על מה לשים לב כאשר אתה רוצה עיצוב יישום כולל בעתיד.

כי אנחנו יכולים להיות בטוחים כי inclusivity יהיה בקרוב דרישה הן תוכנה ועיצוב אתרים, כמובן לא רק מסיבות אלטרואיסטיות, אלא משום שזה יביא משתמשים חדשים רבים על השולחן.

4 עקרונות של עיצוב משולב של מיקרוסופט

Windows Dev Center מציב עיצוב תוכנה נגיש בתוך קטגוריית השימושיות, והם גם פירסמו מאמרים רבים על הנושא. של מיקרוסופט ארבעה עקרונות של עיצוב כוללני (המפורטים להלן בקצרה) נדון במאמר זה.

1. תחשוב אוניברסלי.
2. תעשו את זה אישי.
3. תשמור את זה פשוט.
4. צור תענוג.

אם קראת את המאמר המקורי, תראה את העקרונות מוסברים באופן זה לא תמיד קל לבדוק, באמצעות ביטויים כמו "חיבור רגשי", "לעורר פלא", ו "קסום". אז אני מעדיף להישאר על האדמה, להסיר את הקונוטציות הסובייקטיביות האלה ולהפוך את העקרונות לקריטריונים אובייקטיביים.

כאשר אני מנתח כיצד הם מיושמים ב- Visual Studio קוד, אני משתמש בהם במובן הבא:

1. תחשוב אוניברסלינגישות
2. תעשו את זה אישי: התאמה אישית, הרחבה
3. תשמור את זה פשוט: ללא הפרעה, ממשק משתמש לוגי
4. צור תענוג: יכולת גילוי

כמובן, זה רק סיווג אפשרי אחד, ויש חפיפות רבות, למשל להתאמה אישית יכול להיות גם חלק “יצירת תענוג” עקרונית, אבל כפי שאנחנו צריכים משהו מוחשי, בואו מקל על פרשנות זו לעת עתה.

בעוד ש- Windows Dev Center ממליץ על עקרונות התכנון המשולבים הללו ליישומים של Windows 10, מיקרוסופט הקדישה גם את אתר עיצוב Microsoft לעיצוב כולל.

למרות קוד Visual Studio הוא לא רק עבור Windows 10, אבל מכוון להיות פלטפורמת תוכנה, אנו יכולים עדיין לבדוק בבטחה את תכונותיה כנגד העקרונות הנ"ל, כפי שמיקרוסופט מתייחסת בבירור לעיצוב כוללני כאל נתיב תכנון התוכנה שברצונם לעקוב אחריו בעתיד.

חשבו Universal

תחת “חשבו Universal” עקרונית, נסקור כיצד נגישים קוד Visual Studio עבור קבוצות משתמשים מגוונות, כגון משתמשים בטכנולוגיות מסייעות (בין אם הם משתמשים בהם עבור מוגבלות או העדפה), אנשים עם טכנולוגיות מוגבלות, לא דוברי אנגלית, וכו '.

1. זום

זום יכול להתבצע בקלות על ידי לחיצה על Ctrl + = / Cmd + = (מק) קיצור מקשים עבור התקרב, ואת Ctrl + - / Cmd + - (מק) קיצור עבור להקטין את התצוגה, ואנחנו יכולים גם לגשת לתכונה זום באמצעות שורת התפריטים העליונה.

שים לב כי החל מגרסה 1.1.1, במקלדות Windows הסימנים + ו- - לא פועלים על לוח המקשים המספרי מצד ימין, רק בלוח המקשים (אלפאנומרי) - אשר כנראה אינו הטוב ביותר עבור inclusivity.

התכונה מתמשך רמת זום קצת מפצה על זה, כפי שהוא מאפשר לנו בקלות להגדיר רמת זום מתמשכת ב הגדרות המשתמש (לקרוא את ההודעה הראשונה שלי על איך לעשות את זה).

2. נושא ניגודיות גבוהה

נושאים ניגודיות גבוהה להקל עיבוד מידע חזותי עבור משתמשים לקויי ראייה, ולכן הם מהווים מרכיב חשוב בנגישות.

יש נושא ברירת המחדל של High Contrast ב Visual Studio קוד, כי אתה יכול להגדיר על ידי לחיצה על קובץ> העדפות> ערכת נושא צבעונית , אבל אתה יכול להוריד אחרים מ Visual Studio קוד שוק גם כן.

מיקרוסופט הציגה נושאים ניגודיות גבוהה ב- Windows 7, זה נחמד לראות שהם עוברים דרך עם תכונה זו.

3. ניווט בלוח המקשים

אספקת ניווט המקלדת היא חיונית עבור אנשים שאינם יכולים להשתמש בעכבר בגלל מגבלות ויזואליות או ניידות. ניווט יעיל בלוח המקשים כרוך בכך שמשתמשים יכול לשלוט בכל פונקציונליות של תוכנה באמצעות המקלדת בלבד.

קוד Visual Studio יפה מיישמת תכונה זו, ובעוד יש לה הרבה כריכות מפתח מראש (ראה את הרשימה המלאה), משתמשים יכולים גם להתאים אישית את קיצורי המקשים בעזרת קובץ תצורה בפורמט JSON.

4. ניווט כרטיסייה

ניווט Tab מאפשר לקפוץ בכל רחבי אזורים שונים של קוד Visual Studio.

נכון לעכשיו, כמו גרסה 1.1.1, קוד VS אינו תומך ניווט הכרטיסייה עבור כל האזורים, למשל את שורת התפריטים העליון אינו זמין בדרך זו. החדשות הטובות הן מיקרוסופט מכירה את חוסר תכונה זו של בעיות ידועות הנוכחי של המסמכים.

במהלך הבדיקה, מצאתי כי עורך, ה בר צדדי, ה הצג בר (ראה שמות של אזורי קוד VS), וכל פעולותיהם ופריטים נגישים עם מקש Tab. למרות שמשתמשים בטאב לא יכולים לגשת לפונקציות של שורת התפריטים העליונה עם המקלדת שלהם. לוח הבקרה F1 יכול להחליף במקצת את זה, כמו כל הפקודות שניתן למצוא בתפריט העליון ניתן לגשת משם גם כן.

תכונת נגישות חשובה של ניווט בלשונית היא לכידת הלשונית המאפשרת למשתמשים לעבור בין שתי הפונקציות של מקש Tab. המפתח Tab לכוד מאפשר לעבור על חלקים שונים של קוד VS, ואילו בדרך כלל את מקש Tab מוסיף תו Tab לקובץ הטקסט פתוח באזור עורך. משתמשים יכולים לעבור בין שתי היכולות על ידי לחיצה על מקש Ctrl + M מחייב.

5. קוראי מסך

כמובן, תוכנה זמינה צריך להיות זמין באופן מלא עבור משתמשי מסך המסך גם כן. המסמכים מציינים שצוות ה- VS Code VV בדק את זמינות קורא המסך עם קורא המסך של NVDA.

לבדיקה, השתמשתי בשני קוראי מסך אחרים, JAWS כי הוא אחד הנפוץ ביותר בשימוש באפליקציות קריאת מסך, ו- Microsoft Narrator הוא קורא המסך המובנה של Windows 10.

JAWS לקרוא בקול רם את כל האזורים, פקודות ותפריטים בחריצות, אולם Narrator היו כמה בעיות קטנות יותר עם המשימה. לדוגמה, זה רק לקרוא את הפריטים בתפריט העליון כראוי כאשר עברתי אותם עם העכבר, אבל לא כאשר השתמשתי בחץ למטה במקלדת שלי. זה, לעומת זאת, היא חסרון של Narrator, לא Visual Studio קוד, כך שאנחנו יכולים בבטחה להניח כי משתמשים לקויי ראייה יכולים לגשת לכל פונקציות קוד VS באמצעות קורא מסך מתקדם יותר App.

6. Debugger נגישות

כדי להפוך את האפליקציה לזמינה באופן מלא וכולל, אנחנו גם צריכים לטפל בחלקים כי כנראה לא מגיעים בראש בראש שלנו. במקרה של Visual Studio Code, הבאגים הוא דוגמה טובה לכך. צוות dev שילם את תשומת הלב כדי להפוך את זה כולל גם, ולכן הוא תומך גם ניווט Tab ו מקלדת, וזה הקורא מסך נגיש.

7. לוקליזציה

עכשיו אנחנו מוכנים לדון תכונות נגישות VS קוד רשימות של מסמכים, אבל יש דברים חשובים אחרים כמו גם אנחנו צריכים להזכיר כאשר אנחנו מדברים על “חשבו Universal” - עיקרון תכנון כוללני. אחד מהם הוא לוקליזציה, או במילים אחרות תמיכה בשפות זרות כמו שפת התצוגה, כמו אנשים רבים בעולם אינם ילידי דובר אנגלית.

קוד Visual Studio כרגע מתואם עבור 10 שפות תצוגה שונות (אנגלית, סינית פשוטה, סינית מסורתית, צרפתית, גרמנית, איטלקית, יפנית, קוריאנית, רוסית, ספרדית).

משתמשים המגיעים משפות אלה אפילו לא צריכים להגדיר את שפת התצוגה שלהם, כמו קוד VS בחירת שפת התצוגה של מערכת ההפעלה כברירת מחדל. אם הם רוצים להגדיר שפה אחרת כשפת תצוגה, הם יכולים בקלות להגדיר את התצורה שלהם locale.json קובץ.

כנראה 10 שפות תצוגה לא כל כך הרבה, אבל זה גם לא רע אם ניקח בחשבון כי קוד VS היא תוכנה חדשה, ומיקרוסופט תהיה ככל הנראה תמיכה יותר בעתיד. לעת עתה, משתמשים ששפתם אינה מבין אלה הנתמכים מקבלים את קוד VS שלהם מותקן באנגלית.

8. גודל נגיש

קוד המקור המודרני עורכי הם לא ממש גדול, וגם מיקרוסופט הצטרפה גם למגמה זו, כמו Visual Studio קוד הוא פחות מ -100 MB להוריד, ואת טביעת הדיסק שלה הוא פחות מ 200 MB.

9. פיתוח הפלטפורמות

אם אנחנו רוצים תוכנה כולל, כמובן זה גם צריך להיות חוצה פלטפורמה זה אומר שהוא צריך לרוץ על מערכות הפעלה שונות. קוד VS עונה על דרישה זו, כפי שהיא תומכת Windows, OS X ו- Linux גם כן.

לעשות את זה אישי

“לעשות את זה אישי” הוא העיקרון השני של מיקרוסופט של עיצוב כולל, ואנו נסתכל יכולת התאמה אישית ו הרחבה לפי הקריטריון הזה, כפי שהבטחתי לו קודם. Visual Studio קוד עונה על שתי הדרישות כל כך יפה, כי אני אפילו כתב הודעות נפרדות על שניהם, כאן על התאמה אישית, וכאן על הרחבה.

בקיצור, התאמה אישית מיושמת עם נושאים מותאמים אישית ו הגדרות תצורה בפורמט JSON מודולרי, בעוד ההרחבה מושגת על ידי תוספים מותאמים אישית כי משתמשים יכולים להוריד מתוך Visual Studio קוד שוק, או ליצור משלהם ב- TypScript או JavaScript.

אתה יכול לקרוא עוד על רקע טכני של Visual Studio קוד גישה להרחבה כאן.

היכולת להתאמה אישית נפתרת בצורה אידיאלית לאנשים בעלי ידע טכני שהם משתמשים אופייניים לעורכי קוד המקור, שכן חלק ניכר מהם מתבצע באמצעות קובצי תצורה בפורמט JSON מודולרי.

זהו פתרון נהדר, שכן אפשרויות התצורה אינן מוסתרות מאחורי היררכיית תפריט ענקית שקשה לראות דרכה. משתמשים, גם אם הם לא קידוד מומחים, יכול בקלות לערוך את המנהג שלהם .ג'סון קבצים, כמו Visual Studio קוד פותח את ברירת המחדל ואת הגדרות מותאמות אישית בשני העמודים העומדות ממש ליד זה, ומאפשר למשתמשים בקלות להתנסות איתם.

קובצי התצורה מודולריים, הם באים כהייררכיה מובנית מבחינה הגיונית .ג'סון קבצים, הנה רשימה של החשובים ביותר:

1. הגדרות ל הגדרות משתמש מותאמות אישית, נגיש באמצעות קובץ> העדפות> הגדרות משתמש בתפריט
2. .vscode / הגדרות ל הגדרות סביבת עבודה מותאמות אישית, נגיש באמצעות קובץ> העדפות> הגדרות Workpraces בתפריט
3. מפתח ל כריכות מפתח מותאמות אישית, נגיש באמצעות קובץ> העדפות> קיצורי מקשים בתפריט
4. javascript.json, php.json, css.json, c.json, וחבורה של אחרים .ג'סון קבצים עבור שפות תכנות שונות להגדרה קטעי משתמש מותאמים אישית, נגיש באמצעות קובץ> העדפות> קטעי משתמש בתפריט
5. Launch.json ל הגדרות Debugger מותאמות אישית, נגיש על ידי לחיצה על סמל גלגל השיניים בסרגל העליון Debug View (בצד שמאל של העורך)
6. ./ vscode / locale.json ל הגדרות שפת תצוגה מותאמות אישית, נגיש על ידי הקלדת הגדר שפה הפקודה ללוח הפקודות (F1)
7. .vscode / משימות ל אישית, נגיש על ידי הקלדת הגדרת ראנר המשימה הפקודה ללוח הפקודות (F1)

אני חושב VS קוד משתמשים בקושי להתלונן על להתאמה אישית, כמו גם רשימת האפשרויות היתה משימה ממצה.

כמו אפשרויות תצורה מודולריות, משתמשים רק צריך לטפל בהם הם באמת צריכים, אשר מסייע להם לשמור על התמקדות המשימות שהם רוצים לבצע. לכן, הם יישארו עם זרימת עבודה אינטואיטיבית יותר.

תשאיר את זה פשוט

אנחנו יכולים לפגוש את מיקרוסופט תשאיר את זה פשוט עקרון העיצוב כולל במקומות רבים אחרים תכנות ועיצוב, רק לחשוב על KISS (שמור את זה פשוט, טיפש) עקרון העיצוב, ואת DRY (אל תחזור על עצמך) עקרון פיתוח תוכנה. בהקשר זה פועל, נשמור על המיקוד שלנו הפשטות של ממשק המשתמש.

במונחים של נגישות, ממשק משתמש פשוט וקל לשימוש מומלץ בדרך כלל בגלל משתמשים בעלי מגבלות קוגניטיביות ואינטלקטואליות. מאז Visual Studio קוד הוא עורך קוד המקור, זה כנראה לא תוכנה זה משמש לעתים קרובות על ידי אנשים שיש להם סוג זה של פגיעה, עם זאת ייתכן שיהיו כמה אזורים אפורים גם כן.

הפשטות היא לא רק חשוב בגלל אותם, כמו ממשק מעוצב היטב, הגיוני יכול גם להוריד את עקומת הלמידה, ו להגביר את מהירות העבודה, מה שהופך את התוכנה יותר מושך את האוכלוסייה הכללית גם כן.

קוד Visual Studio גם ממנף את התופעה הפסיכולוגית הידועה, השפעת החשיפה בלבד (או תופעת היכרות), שכן היא מאמצת פריסה בסיסית הדומה לפריסה של קוד מקור ידוע אחר, כגון Atom,.

מתוך המסמכים אנו יכולים לקבל לדעת שזה היה מאמץ מיקרוסופט לשים השפעה עצומה על:

VS קוד גם מספק למשתמשים את הצד על ידי צד עריכת תכונה כי ניתן למצוא גם אחרים קוד קוד העורכים, וזה לא צירוף מקרים, כמו זה עושה את תהליך קידוד הרבה יותר פשוט, וכמובן תורם “תשאיר את זה פשוט” כולל עיקרון התכנון הכולל.

על גבי ממשק המשתמש הבסיסי, Visual Studio Code כולל תכונות מגניבות שראוי להזכיר במאמר על עיצוב כולל, כגון:

• אינטליסנס המספק למשתמשים הצעות המבוססות על ההקשר (חלק backend המשתמשת באינטליגנציה מלאכותית הוא גם פתרון נחמד)
• להציץ (Shift + F12) המציג הגדרות פונקציה מלאה בחלון מוטבע
• לוח בקרה (F1) שהופך את כל הפקודות לנגישות באותו מקום.

יצירת תענוג

זה לא קל במיוחד למצוא קריטריונים מוחשיים אנו יכולים להשתמש כדי לבחון את “יצירת תענוג” עקרון העיצוב כולל, אז אני סוף סוף התיישבו על הקריטריון של יכולת גילוי, כפי שהגדירה מיקרוסופט את העיקרון הבא:

נוסח זה עשוי להזכיר לרבים מכם רגעי מיקרו, אחד הדברים הגדולים האחרונים של גוגל, ולכן מראים כיצד חברות טכנולוגיה מובילות עשויות להגיע למסקנות דומות כאשר הן חושבות כיצד להעביר את הענף קדימה.

בעיצוב כולל, זה מאוד חשוב לעסוק משתמשים, ו מעוררים את סקרנותם, כי אנחנו יכולים להשיג את הטוב ביותר אם אנחנו לעזור להם להתקדם כאשר הם הגיעו לנקודה מסוימת במסע המשתמש שלהם. רק ברגע הנכון, לא לפני, לא אחרי.

כאשר אנחנו מדברים יכולת גילוי, את הביטוי הגשמי יותר של יצירת תענוג, זה יכול להיות מוגברת על ידי דברים כמו ניווט השירות תוכנן היטב, תיעוד חכם, ומידע תומכת כי צץ רק ברגע הנכון.

אנו יכולים למצוא דוגמאות עבור כל התכונות הללו ב- Visual Studio קוד, רק לחשוב על הנ"ל אינטליזנס ו לוח בקרה, אבל הדגשת תחביר ו קטעי קוד מותאמים אישית - - יכול גם לעזור למשתמשים להפיק את המרב של התוכנה. אתה צריך לשפוט בעצמך אם באמצעות Visual Studio קוד משאיר אותך עם תחושה של הנאה.

עבור עצמי, אני פחות או יותר אהבתי את החוויה: תיעוד מקוון מובנה היטב, ה קל לנווט ב- Visual Studio Code Marketplace, וה ערכות נושא מותאמות אישית צבע - - כי יכול להיות בתצוגה מקדימה בזמן אמת בעת גלילה של רשימה נפתחת (לגשת אליו דרך קובץ> העדפות> ערכת נושא צבעונית תפריט).

מילים סופיות

כמו עיצוב כולל הוא תחום חדש, תעשיית הטכנולוגיה היא עדיין בשלב הניסוי. אני חושב מיקרוסופט עשה ציון דרך משמעותי על ידי המגדיר את ארבעת העקרונות של עיצוב כוללני.

כפי שיכולנו לראות, הם הצליחו בהצלחה ליישם את התיאוריה בפועל קוד המקור החדש שלהם, קוד Visual Studio, אם כי יש עדיין כמה תחומים כדי לשפר, כגון מתן תמיכה מלאה Tab ו גלובלית חיפוש והחלפה תכונה.

כמו נגישות הן inclusivity הם חלקים של חוויית המשתמש, זה יכול להיות רעיון טוב ללמוד עליהם יותר אם אתה רוצה לשמור על קשר עם המגמות בתעשייה האחרונה. הנה משאבים שעשויים לסייע לך:

• מאמרים בנושא נגישות של Windows Dev Center
• עיצוב כולל של Microsoft Design Toolkit ידנית (PDF) (להורדה)
• Hongkiat.com תג נגישות