Ảnh hưởng của thiết kế bao gồm Microsoft trong mã Visual Studio

phổ cập, hoặc là thiết kế bao gồm là một triết lý thiết kế mới Microsoft dường như khá nghiêm túc trong việc phát triển phần mềm gần đây. Thiết kế bao gồm đưa thiết kế có thể truy cập lên cấp độ tiếp theo, vì nó xem khả năng truy cập từ góc độ rộng hơn nhiều. Khi tôi đang thử nghiệm trình soạn thảo mã nguồn mới của Microsoft, Visual Studio Code, câu hỏi về họ đã thực hiện lý thuyết như thế nào trong thực tế tự nhiên nảy sinh trong tâm trí tôi.

Bài đăng này không có ý định chỉ là một mô tả về các tính năng trợ năng của Visual Studio Code, vì trong các tài liệu chính thức bạn có thể tìm thấy một bản tóm tắt tuyệt vời về chúng, nhưng nhằm mục đích là một trường hợp nghiên cứu về những gì cần chú ý khi bạn muốn thiết kế một ứng dụng bao gồm trong tương lai.

Bởi vì chúng tôi có thể chắc chắn rằng tính toàn diện sẽ sớm là một yêu cầu trong cả phần mềm và thiết kế web, tất nhiên không chỉ vì lý do vị tha, mà bởi vì nó sẽ đưa nhiều người dùng mới vào bàn.

4 nguyên tắc thiết kế bao gồm của Microsoft

Windows Dev Center đặt thiết kế phần mềm có thể truy cập trong danh mục Khả năng sử dụng, và họ cũng đã xuất bản nhiều bài viết tuyệt vời về chủ đề này. Microsoft Bốn nguyên tắc thiết kế bao gồm (được liệt kê ngắn gọn dưới đây) được thảo luận trong bài viết này.

Suy nghĩ phổ cập.
Làm cho nó cá nhân.
Giữ nó đơn giản.
Tạo nên Hân hoan.

Nếu bạn đã đọc qua bài viết gốc, bạn sẽ thấy các nguyên tắc được giải thích theo cách không phải lúc nào cũng dễ kiểm tra, sử dụng các biểu thức như "kêt nôi cảm xuc", "gợi lên sự ngạc nhiên", và "huyền diệu". Vì vậy, tôi thà ở lại thực tế, loại bỏ những ý nghĩa chủ quan này và biến các nguyên tắc thành tiêu chí khách quan.

Khi tôi phân tích cách chúng được triển khai trong Visual Studio Code, tôi sử dụng chúng theo nghĩa sau:

Suy nghĩ phổ cập: Khả năng tiếp cận
Làm cho nó cá nhân: Khả năng tùy biến, mở rộng
Giữ nó đơn giản: Giao diện người dùng hợp lý, không bị phân tâm
Tạo nên Hân hoan: Tính năng khám phá

Tất nhiên, đây chỉ là một cách phân loại có thể, và có nhiều chồng chéo, ví dụ tùy biến cũng có thể là một phần của “Tạo niềm vui” nguyên tắc, nhưng khi chúng ta cần một cái gì đó hữu hình, bây giờ chúng ta hãy theo cách giải thích này.

Mặc dù Windows Dev Center khuyến nghị các nguyên tắc thiết kế bao gồm này sẽ được áp dụng cho các ứng dụng Windows 10, Microsoft cũng dành riêng trang web Microsoft Design của mình cho thiết kế bao gồm.

Mặc dù Visual Studio Code không chỉ dành cho Windows 10 mà nhằm mục đích trở thành phần mềm đa nền tảng, chúng ta vẫn có thể kiểm tra các tính năng của nó một cách an toàn theo các nguyên tắc đã nói ở trên, vì Microsoft rõ ràng coi thiết kế bao gồm là con đường thiết kế phần mềm mà họ muốn đi theo trong tương lai.

Nghĩ phổ quát

Ở dưới cái “Nghĩ phổ quát” về nguyên tắc, chúng tôi sẽ nghiên cứu kỹ xem Visual Studio Code có thể truy cập như thế nào cho các nhóm người dùng đa dạng, chẳng hạn như người dùng công nghệ hỗ trợ (cho dù họ sử dụng chúng cho người khuyết tật hoặc sở thích), người có công nghệ hạn chế, người nói tiếng Anh không phải là người bản xứ, v.v..

1. Thu phóng

Thu phóng có thể dễ dàng thực hiện bằng cách nhấn Ctrl + = / Cmd + = (Mac) phím tắt cho Phóng to, và Ctrl + - / Cmd + - (Mac) phím tắt cho Thu nhỏ, và chúng tôi cũng có thể truy cập tính năng Thu phóng qua thanh menu trên cùng.

Lưu ý, kể từ phiên bản 1.1.1, trên bàn phím Windows, các dấu + và - không hoạt động trên bàn phím số ở bên phải, chỉ trên bàn phím gõ (chữ số) - có lẽ không phải là tốt nhất cho tính bao gồm.

Tính năng Mức thu phóng liên tục phần nào bù đắp cho điều này, vì nó cho phép chúng tôi dễ dàng định cấu hình Mức thu phóng liên tục trong Cài đặt người dùng (đọc bài viết phổ biến của tôi về cách thực hiện việc này).

2. Chủ đề tương phản cao

Chủ đề tương phản cao tạo điều kiện trong xử lý thông tin trực quan đối với người dùng khiếm thị và do đó họ là một yếu tố quan trọng của khả năng truy cập.

Có một chủ đề tương phản cao mặc định trong Visual Studio Code, bạn có thể đặt bằng cách nhấp vào Tệp> Tùy chọn> Chủ đề màu menu, nhưng bạn cũng có thể tải xuống những người khác từ Thị trường mã Visual Studio.

Microsoft đã giới thiệu các chủ đề Tương phản cao trong Windows 7, thật tuyệt khi thấy họ làm theo với tính năng này.

3. Điều hướng bàn phím

Cung cấp điều hướng bàn phím là điều cần thiết cho những người không thể sử dụng chuột vì khiếm khuyết về thị giác hoặc di động. Điều hướng bàn phím hiệu quả đòi hỏi người dùng có thể kiểm soát mọi chức năng của một phần mềm bằng cách chỉ sử dụng bàn phím.

Visual Studio Code thực hiện độc đáo tính năng này và trong khi nó có nhiều các ràng buộc chính đặt trước (xem danh sách đầy đủ), người dùng cũng có thể tùy chỉnh các phím tắt với sự trợ giúp của tệp cấu hình định dạng JSON.

4. Điều hướng tab

Điều hướng tab làm cho nó có thể nhảy qua các khu vực khác nhau của mã Visual Studio.

Hiện tại, kể từ phiên bản 1.1.1, Mã VS không hỗ trợ điều hướng tab cho tất cả các khu vực, ví dụ: thanh menu trên cùng không có sẵn theo cách này. Tin tốt là Microsoft thừa nhận thiếu tính năng này trong Các vấn đề đã biết hiện tại trong các tài liệu.

Trong quá trình thử nghiệm, tôi thấy rằng Biên tập viên, các Thanh bên, các Xem thanh (xem cách đặt tên các khu vực của VS Code) và tất cả các hành động và vật phẩm của chúng đều có thể truy cập được bằng phím Tab. Mặc dù người dùng Tab không thể truy cập các chức năng của thanh menu trên cùng bằng bàn phím của họ. Command Palette F1 có thể thay thế phần nào cho điều này, vì tất cả các lệnh có thể được tìm thấy trong menu trên cùng cũng có thể được truy cập từ đó.

Một tính năng trợ năng quan trọng của điều hướng tab là bẫy tab cho phép người dùng chuyển đổi giữa hai chức năng của phím Tab. Phím Tab bị kẹt làm cho nó có thể di chuyển qua các phần khác nhau của Mã VS, trong khi thông thường phím Tab thêm một ký tự Tab vào tệp văn bản mở trong khu vực Biên tập. Người dùng có thể chuyển đổi giữa hai khả năng bằng cách nhấn liên kết phím Ctrl + M.

5. Trình đọc màn hình

Tất nhiên, một phần mềm có thể truy cập cũng cần phải có sẵn cho người dùng trình đọc màn hình. Các tài liệu đề cập rằng nhóm phát triển VS Code đã kiểm tra tính khả dụng của trình đọc màn hình với trình đọc màn hình NVDA.

Để thử nghiệm, tôi đã sử dụng hai trình đọc màn hình khác, JAWS, một trong những ứng dụng đọc màn hình được sử dụng rộng rãi nhất và Microsoft Narrator là trình đọc màn hình tích hợp của Windows 10.

THÁNG 7 đọc to tất cả các khu vực, lệnh và menu một cách siêng năng, tuy nhiên Người kể chuyện có một số vấn đề nhỏ hơn với nhiệm vụ. Chẳng hạn, nó chỉ đọc các mục menu trên cùng một cách chính xác khi tôi di chuyển ngang qua chúng, nhưng không đọc được khi tôi sử dụng mũi tên Xuống trên bàn phím. Tuy nhiên, điều này khá là thiếu sót của Người kể chuyện, không phải Visual Studio Code, vì vậy chúng tôi có thể giả định rằng người dùng khiếm thị có thể truy cập tất cả các chức năng của Mã VS bằng cách sử dụng ứng dụng trình đọc màn hình nâng cao hơn.

6. Khả năng truy cập của trình gỡ lỗi

Để làm cho một ứng dụng có thể truy cập đầy đủ và bao gồm, chúng ta cũng cần quan tâm đến những phần mà trước tiên chúng ta không nghĩ đến. Trong trường hợp Visual Studio Code, Debugger là một ví dụ điển hình cho việc này. Nhóm nhà phát triển đã chú ý để làm cho nó bao gồm cả, do đó, nó cũng hỗ trợ điều hướng Tab và bàn phím, và trình đọc màn hình của nó có thể truy cập được.

7. Bản địa hóa

Bây giờ chúng tôi đã sẵn sàng thảo luận về các tính năng trợ năng của danh sách Mã VS trong tài liệu, nhưng có những điều quan trọng khác mà chúng tôi cần đề cập khi nói về “Nghĩ phổ quát” nguyên tắc thiết kế bao gồm. Một trong số đó là nội địa hóa, hoặc với các từ khác hỗ trợ ngoại ngữ là ngôn ngữ hiển thị, vì nhiều người trên thế giới không phải là người nói tiếng Anh bản ngữ.

Visual Studio Code hiện được bản địa hóa cho 10 ngôn ngữ hiển thị khác nhau (Tiếng Anh, tiếng Trung giản thể, tiếng Trung Quốc truyền thống, tiếng Pháp, tiếng Đức, tiếng Ý, tiếng Nhật, tiếng Hàn, tiếng Nga, tiếng Tây Ban Nha).

Người dùng đến từ các ngôn ngữ này thậm chí không phải định cấu hình ngôn ngữ hiển thị của họ, dưới dạng Mã VS chọn ngôn ngữ hiển thị của hệ điều hành theo mặc định. Nếu họ muốn đặt ngôn ngữ khác làm ngôn ngữ hiển thị, họ có thể dễ dàng định cấu hình ngôn ngữ của mình locale.json tập tin.

Có lẽ 10 ngôn ngữ hiển thị không phải là nhiều, nhưng cũng không tệ nếu chúng ta xem xét rằng Mã VS là một phần mềm mới và rất có thể Microsoft sẽ hỗ trợ nhiều hơn trong tương lai. Hiện tại, người dùng có ngôn ngữ không nằm trong số những người được hỗ trợ sẽ cài đặt Mã VS bằng tiếng Anh.

8. Kích thước có thể truy cập

Các trình chỉnh sửa mã nguồn hiện đại không thực sự lớn và Microsoft cũng đã tham gia xu hướng này, vì Visual Studio Code là một ít hơn 100 MB tải xuống và dấu chân đĩa của nó nhỏ hơn 200 MB.

9. Phát triển đa nền tảng

Nếu chúng ta muốn phần mềm bao gồm, tất nhiên nó cũng cần phải là nền tảng chéo có nghĩa là nó cần phải chạy trên các hệ điều hành khác nhau. Mã VS đáp ứng yêu cầu này, vì nó hỗ trợ Windows, OS X và Linux cũng.

Làm cho nó cá nhân

“Làm cho nó cá nhân” là nguyên tắc thứ hai của Microsoft về thiết kế bao gồm, và chúng ta sẽ xem xét tùy biến và mở rộng theo tiêu chí này, như tôi đã hứa trước đây. Visual Studio Code đáp ứng cả hai yêu cầu độc đáo đến nỗi tôi thậm chí đã viết các bài đăng riêng biệt trên cả hai, ở đây về khả năng tùy biến và ở đây về khả năng mở rộng.

Nói tóm lại, khả năng tùy biến được thực hiện với chủ đề tùy chỉnh và cài đặt cấu hình định dạng JSON được mô đun hóa, trong khi khả năng mở rộng đạt được bởi tiện ích mở rộng tùy chỉnh mà người dùng có thể tải xuống từ Thị trường mã Visual Studio hoặc tạo riêng cho họ bằng TypeScript hoặc JavaScript.

Bạn có thể đọc thêm về nền tảng kỹ thuật của phương pháp mở rộng của Visual Studio Code tại đây.

Khả năng tùy chỉnh được giải quyết theo cách lý tưởng cho những người am hiểu công nghệ, những người sử dụng điển hình của các trình soạn thảo mã nguồn, vì một phần quan trọng của nó được triển khai thông qua các tệp cấu hình định dạng JSON được mô đun hóa.

Đây là một giải pháp tuyệt vời, vì các tùy chọn cấu hình không bị ẩn đằng sau một hệ thống phân cấp menu lớn mà khó có thể nhìn thấy. Người dùng, ngay cả khi họ không phải là chuyên gia mã hóa, có thể dễ dàng chỉnh sửa tùy chỉnh của họ .json các tập tin, vì Visual Studio Code mở mặc định và các cài đặt tùy chỉnh trong hai khung soạn thảo ngay cạnh nhau, cho phép người dùng dễ dàng thử nghiệm với chúng.

Các tệp cấu hình được mô đun hóa, chúng có cấu trúc phân cấp logic .json tập tin, đây là danh sách những cái quan trọng nhất:

settings.json cho Cài đặt người dùng tùy chỉnh, có thể truy cập thông qua Tệp> Tùy chọn> Cài đặt người dùng thực đơn
.vscode / settings.json cho Cài đặt không gian làm việc tùy chỉnh, có thể truy cập thông qua Tệp> Tùy chọn> Cài đặt Workpraces thực đơn
keybindings.json cho Ràng buộc khóa tùy chỉnh, có thể truy cập thông qua Tệp> Tùy chọn> Phím tắt thực đơn
javascript.json, php.json, css.json, c.json, và một loạt các .json tập tin cho các ngôn ngữ lập trình khác nhau để thiết lập Đoạn trích người dùng tùy chỉnh, có thể truy cập thông qua Tệp> Tùy chọn> Đoạn mã người dùng thực đơn
launch.json cho Cài đặt trình gỡ lỗi tùy chỉnh, có thể truy cập bằng cách nhấp vào biểu tượng bánh răng trên thanh trên cùng của Debug View (bên trái trình chỉnh sửa)
.vscode / locale.json cho cài đặt Ngôn ngữ hiển thị tùy chỉnh, có thể truy cập bằng cách gõ Cấu hình ngôn ngữ lệnh vào Bảng lệnh (F1)
.vscode / task.json cho Cài đặt tác vụ chạy tùy chỉnh, có thể truy cập bằng cách gõ Cấu hình tác vụ chạy lệnh vào Bảng lệnh (F1)

Tôi nghĩ rằng người dùng VS Code khó có thể phàn nàn về khả năng tùy biến, vì ngay cả việc liệt kê các tùy chọn là một nhiệm vụ toàn diện.

Khi các tùy chọn cấu hình được mô đun hóa, người dùng chỉ phải quan tâm đến những tùy chọn đó họ thực sự cần, giúp họ tiếp tục tập trung vào các nhiệm vụ họ muốn thực hiện. Do đó, họ sẽ được để lại một quy trình làm việc trực quan hơn.

Giữ nó đơn giản

Chúng ta có thể gặp Microsoft Giữ nó đơn giản Nguyên tắc thiết kế bao gồm ở nhiều nơi khác trong lập trình và thiết kế, chỉ cần nghĩ về nguyên tắc thiết kế KISS (Keep It Simple, St ngu) và nguyên tắc phát triển phần mềm DRY (Đừng lặp lại chính mình). Đối với bối cảnh hoạt động này, chúng tôi sẽ tập trung vào giao diện người dùng đơn giản.

Về khả năng truy cập, giao diện người dùng đơn giản, dễ sử dụng thường được đề xuất vì người dùng bị khuyết tật về nhận thức và trí tuệ. Vì Visual Studio Code là trình chỉnh sửa mã nguồn, có lẽ nó không phải là phần mềm thường được sử dụng bởi những người có loại suy yếu này, tuy nhiên cũng có thể có một số vùng màu xám.

Đơn giản không chỉ quan trọng bởi vì chúng, vì một giao diện logic được thiết kế tốt cũng có thể hạ thấp đường cong học tập, và tăng tốc độ làm việc, làm cho một phần mềm hấp dẫn hơn đối với người dân nói chung.

Mã Visual Studio cũng thúc đẩy hiện tượng tâm lý nổi tiếng, hiệu ứng tiếp xúc đơn thuần (hoặc hiện tượng quen thuộc), vì nó chấp nhận một bố cục cơ bản tương tự như bố cục các trình soạn thảo mã nguồn nổi tiếng khác, chẳng hạn như Atom, sử dụng.

Từ các tài liệu chúng ta có thể biết rằng đó là một nỗ lực của Microsoft đã tác động rất lớn đến:

Mã VS cũng cung cấp cho người dùng tính năng Chỉnh sửa Side by Side cũng có thể tìm thấy trong các trình chỉnh sửa mã nguồn khác và đó không phải là sự trùng hợp ngẫu nhiên, như nó làm cho quá trình mã hóa đơn giản hơn nhiều, và tất nhiên đóng góp cho “Giữ nó đơn giản” nguyên tắc thiết kế bao gồm, quá.

Ngoài giao diện người dùng cơ bản, Visual Studio Code có các tính năng thú vị đáng được đề cập trong một bài viết về thiết kế bao gồm, chẳng hạn như:

Intellisense cung cấp cho người dùng các đề xuất dựa trên ngữ cảnh (phần phụ trợ sử dụng trí tuệ nhân tạo cũng là một giải pháp hay)
Peek (Shift + F12) hiển thị các định nghĩa hàm hoàn chỉnh trong cửa sổ nội tuyến
Bảng lệnh (F1) làm cho tất cả các lệnh có thể truy cập tại cùng một nơi.

Tạo niềm vui

Không dễ để tìm thấy các tiêu chí hữu hình mà chúng ta có thể sử dụng để kiểm tra “Tạo niềm vui” Nguyên tắc thiết kế bao gồm, vì vậy cuối cùng tôi đã giải quyết được tiêu chí tính năng khám phá, như Microsoft đã định nghĩa nguyên tắc này theo cách sau:

Phrasing này có thể nhắc nhở nhiều bạn về những khoảnh khắc vi mô, một trong những điều lớn nhất mới nhất của Google và do đó cho thấy các công ty công nghệ hàng đầu có thể đi đến kết luận tương tự như thế nào khi họ nghĩ về cách thúc đẩy ngành công nghiệp tiến lên.

Trong thiết kế bao gồm, nó rất quan trọng đối với thu hút người dùng, và khơi dậy sự tò mò của họ, rằng chúng ta có thể đạt được điều tốt nhất nếu chúng ta giúp họ tiến về phía trước khi họ đạt đến một điểm nhất định trong hành trình người dùng của họ. Chỉ vào đúng thời điểm, không trước, không sau.

Khi chúng ta nói về tính năng khám phá, biểu hiện của việc tạo ra niềm vui trên thế giới nhiều hơn, nó có thể được tăng lên bởi những thứ như điều hướng tiện ích được thiết kế tốt, tài liệu thông minh và thông tin hỗ trợ chỉ xuất hiện đúng lúc.

Chúng ta có thể tìm thấy các ví dụ cho tất cả các tính năng này trong Visual Studio Code, chỉ cần nghĩ về những điều đã nói ở trên IntelliSense và Bảng lệnh, nhưng đánh dấu cú pháp và đoạn mã tùy chỉnh cũng có thể giúp người dùng tận dụng tối đa phần mềm. Bạn cần tự đánh giá xem việc sử dụng Visual Studio Code có khiến bạn cảm thấy thích thú không.

Đối với bản thân tôi, tôi ít nhiều thích trải nghiệm: tài liệu trực tuyến có cấu trúc tốt, các Thị trường mã Visual Studio dễ điều hướng, và chủ đề màu tùy chỉnh có thể được xem trước thời gian thực trong khi cuộn danh sách thả xuống (truy cập nó qua Tệp> Tùy chọn> Chủ đề màu thực đơn).

Từ cuối cùng

Vì thiết kế bao gồm là một lĩnh vực mới, ngành công nghệ vẫn đang trong giai đoạn thử nghiệm. Tôi nghĩ rằng Microsoft đã tạo ra một cột mốc quan trọng bằng xác định bốn nguyên tắc thiết kế bao gồm.

Như chúng ta có thể thấy, họ đã quản lý để thực hiện thành công lý thuyết trên thực tế trong trình soạn thảo mã nguồn mới, Visual Studio Code, mặc dù vẫn còn một số lĩnh vực cần cải thiện, như cung cấp hỗ trợ Tab đầy đủ và tính năng Tìm kiếm và Thay thế toàn cầu.

Vì cả khả năng tiếp cận và bao gồm các phần của trải nghiệm người dùng, nó có thể là một ý tưởng tốt để tìm hiểu thêm về họ nếu bạn muốn theo kịp các xu hướng công nghiệp mới nhất. Đây là các tài nguyên có thể giúp:

Các bài viết về khả năng truy cập của Windows Dev Center
Hướng dẫn sử dụng Bộ công cụ thiết kế toàn diện của Microsoft Design (PDF) (có thể tải xuống)
Thẻ truy cập Hongkiat.com