thuật ngữ IT cho Comtor. #1
Bài viết giới thiệu một số thuật ngữ kỹ thuật liên quan đến thiết kế/ lập trình User interface (giao diện người dùng)
Reference: https://www.w3schools.com/tags/ref_byfunc.asp
Lưu ý: các thuật ngữ được giới thiệu không phải từ góc độ người dùng (User), mà từ góc độ Development team (team phát triển phần mềm)
Khi làm việc với các tài liệu thiết kế hoặc mô tả Yêu cầu liên quan đến giao diện, màn hình… Comtor. nên biết một số thuật ngữ trong bài (các thuật ngữ sẽ bao gồm cả tiếng Anh, tiếng Nhật và được bôi đậm)
I. Liên quan đến nhập liệu và Form
Trong một sản phẩm phần mềm sẽ luôn có vài giao điện được lập trình với mục đích nhận thông tin từ User (利用者)
Một giao diện tương tác với User thường sẽ là một màn hình và một màn hình được thiết kế để nhận thông tin từ User thì cần có các “mục nhập liệu”.
Mục nhập liệu – Input item là một khái niệm chung trỏ đến tất cả các “item” trên màn hình mà cho phép nhận thông tin từ User. Từ tiếng Nhật: 入力項目
Do thông tin từ User có nhiều kiểu dữ liệu khác nhau nên sẽ có nhiều loại Input item cụ thể. Input item đầu tiên và đơn giản nhất là nhập liệu kiểu text (Text box): User có thể nhập bất cứ ký tự nào từ bàn phím vào text box. Từ tiếng Nhật: テキストボックス. VD:
Ở tình huống khác, thay vì để User tự nhập (vd. tên tỉnh thành phố họ đang sống chẳng hạn), có thể để họ chọn từ một danh sách, lúc này trên màn hình sẽ có mục nhập liệu dạng Hộp chọn – Select box, hay còn gọi là Dropdown list. Từ tiếng Nhật: 選択項目, セレクトボックス, コンボボックス. VD:
Ta cũng có một số mục nhập liệu như check box/ radio cho những lựa chọn nhanh. Trong khi check box cho phép User chọn nhiều hơn 1 option (lựa chọn/ 選択肢) thì Radio sẽ chỉ cho phép chọn 1 option duy nhất. Từ tiếng Nhật: チェックボックス, ラジオボックス. VD:
Ngoài ra, trên màn hình còn có thể có mục nhập liệu dạng date/ time giúp User chỉ định ngày tháng một cách trực quan hơn. Từ tiếng Nhật: カレンダー/ カレンダー入力項目. VD:
Một input item cũng thuộc loại “trực quan hoá” nhưng ít được dùng và ít được biết hơn là loại slide, hay còn gọi là slider control/ range. Từ tiếng Nhật: スライドコントロール. VD:
Tóm tắt một tẹo thì tất cả những input items bên trên (bao gồm cả button Submit như ảnh ngay trên) còn được gọi là GUI controls (Screen controls). Từ tiếng Nhật là 画面コントロール hay nói ngắn gọn làコントロール.
Trong lập trình và thiết kế giao diện người dùng (UI), “screen controls” là các thành phần giao diện người dùng cho phép người dùng tương tác với phần mềm hoặc ứng dụng.
Như đã liệt kê một phần, ví dụ về “screen controls” bao gồm:
- Nút (Button ボタン): Các nút cho phép người dùng bấm và kích hoạt các chức năng.
- Hộp văn bản (Text Box): Nơi người dùng có thể nhập văn bản.
- Danh sách thả xuống (Dropdown List): Cho phép người dùng chọn một giá trị từ một danh sách.
- Hộp kiểm (Checkbox): Cho phép người dùng bật/tắt một tùy chọn.
- Thanh trượt (Slider): Cho phép người dùng điều chỉnh một giá trị bằng cách di chuyển con trượt.
- Thẻ (Tab タブ): Cho phép chuyển đổi giữa các giao diện hoặc chức năng khác nhau.
- Cửa sổ (Window ウインドウズ): Các khung hiển thị nội dung hoặc thông tin.
Các “screen controls” này giúp người dùng dễ điều khiển và tương tác với ứng dụng một cách hiệu quả.
II. Các thành phần khác nhau của màn hình
Không phải mọi thứ trên màn hình đều là Controls, trên đó còn có những thành phần khác. Ví dụ, ở trên cùng của màn hình hiển thị thường là Screen title/ Screen name (画面タイトル・画面名) để phân biệt màn hình này với màn hình khác trong cùng ứng dụng. Ví dụ màn hình bên dưới có screen title là “Timesheet Management“)
Để giúp giải thích cho User phải nhập thông tin gì vào mục (item) nào trên màn hình, phía trước hoặc phía trên các Input item thường có text mô tả mục đích của input item (control) đó, text này gọi là Label (ラベル). Trong ví dụ dưới ta có các label hiển thị text như: Place…/ Reason …/ Phone Contact ….
Nếu để ý ta thấy các label trong ảnh trên đều có đi kèm với ký tự * ở phía trên bên phải. Ký tự dấu sao mầu đỏ như thế này để chú thích rằng mục input item tương ứng của label đó là “bắt buộc phải nhập”. Thuật ngữ này là input required/ required (入力必須・必須) . “Required” ở đây là một thuộc tính (properties プロパティ/ 属性) của input item. Ngoài những input item là required (bắt buộc phải nhập) ra, còn có những input item “không bắt buộc phải nhập”. Thuật ngữ là Not required/ optional (オプショナル・任意).
Nhân nói đến “thuộc tính”, bản thân các ký tự/ text (文字列・文字) tiếng Nhật có một thuộc tính đặc biệt là Full-width(全角) và Half-width (半角) . Dưới đây là ví dụ cùng một từ Properties nhưng được viết lần lượt theo kiểu full-width và half-width:
“プロパティ”
“ﾌﾟﾛﾊﾟﾃｨ”
(bạn nào quan tâm có thể tự tìm hiểu thêm về sự khác biệt giữa 全角 và 半角）
Tập hợp của nhiều Input item và một Submit button (送信ボタン) trên màn hình tạo nên một khu vực (Screen area/ 画面エリア) gọi là Form (フォーム). Về mặt kỹ thuật, các thông tin User nhập vào Input items không được gửi đi ngay lập tức mà chỉ được gửi đi khi Submit button ở cùng Form (với các input item ấy) được ấn (click/ 押下).
Có thể hiểu toàn bộ area được minh hoạ dưới là một Form:
Để mô tả cặn kẽ hơn nữa cho User về thông tin có thể/ cần phải nhập vào từng input item, ngoài Label bên ngoài, ta có một thứ nữa là Placeholder (プレースホルダー). Đoạn text hiển thị sẵn trong text box và sẽ biến mất khi User bắt đầu input vào, đoạn “半角英数字” ở dòng đầu tiên trong ảnh trên là một ví dụ của một Placeholder.
Đôi khi ta cần User tập trung thao tác, nhập liệu… trên một Form hay một màn hình và muốn đảm bảo User sẽ không thể di chuyển đến một màn hình khác (他の画面へ遷移する) trong cùng ứng dụng cho đến khi hoàn thành thao tác với màn hình hiện tại. Chế độ màn hình mà không cho phép di chuyển (ra chỗ khác) như thế gọi là Modal (モーダル) (vd. modal screen: モーダル画面, modal dialog モーダルダイアログ）. Modal ở đây là một ví dụ cho Chế độ hiển thị ( Display mode / 表示モード）.
Các ví dụ khác của Dislay mode có thể là chế độ hiển thị dạng bảng (Grid グリード/表）, có thể thu gọn (Collapse/ 折りたたみ) / mở rộng (Expand/ 展開))
III. Tìm kiếm và duyệt kết quả
Một control có tính tương tác cao với User chưa được nhắc đến ở phần trên là input item cho phép tìm kiếm: Search box (検索項目・サーチ項目)
Một Search box cổ điển sẽ chỉ làm nhiệm vụ nhận keyword tìm kiếm từ User, tuy nhiên ngày nay Search box có thể kết hợp cả tính năng hỗ trợ input kiểu Select (Dropdown list). Trong ảnh dưới, danh sách các item có thể select được sẽ thay đổi tuỳ theo keyword (trong ảnh đang là “er”) được User nhập vào.
Trong ngành IT, “search” là một tính năng rất phổ dụng và có một số thuật ngữ khác cũng có nghĩa tương tự (tuỳ theo ngữ cảnh cụ thể) như: filter (フィルター), query (クエリー), 絞り込み
Với trường hợp Search cổ điển, kết quả tìm kiếm sẽ được hiển thị ở dưới Search box. Với những công cụ quản lý giao tiếp như email hay Slack, nhu cầu tìm kiếm của User sẽ khá đa dạng, vì thế ô Search box có thể biến hình thành cả một Search form (検索フォーム) như ảnh minh hoạ. Một Search form cho phép User đưa vào nhiều keyword để tìm kiếm khác nhau, do đó chứa nhiều Search conditions (検索条件) khác nhau.
Nói đến Search, có lẽ mọi người ai cũng biết và quen thuộc với Google Search. Kết quả tìm kiếm (Search result 検索結果一覧) do Google Search trả về thì thường rất nhiều, không thể hiển thị hết trong một trang được, khi đó ta sẽ thấy xuất hiện thanh phân trang ở phía dưới của màn hình như thế này:
Ngoài kiểu trên, ta còn có rất nhiều kiểu thanh phân trang kết quả tìm kiếm/ hiển thị khác nữa. Thuật ngữ của “Hiển thị phân trang” là Pagination/ Paging (ページング式表示・ページネーション・ページ分け表示・ページ付け表示). Bản thân Thanh phân trang thì được gọi là Pagination control/ Paging control.
Với trường hợp muốn duyệt qua các trang kết quả hiển thị, ta phải di chuyển đến các page khác nhau. Trong trường hợp này, “di chuyển” có thuật ngữ là Go to/ Jump to …. page (… ページへ遷移する). Tương tự, khi di chuyển đến một màn hình nào đó trong ứng dụng, ta có thể nói ….画面へ遷移する。
Bonus một từ liên quan: 画面遷移図 , bạn thử tự tìm hiểu ý nghĩa của từ đó nhé 🙂
Xin kết thúc bài viết tại đây,
Hẹn gặp lại các bạn với các thuật ngữ liên quan đến lập trình ở bài sau
About The Author
