摘要：因?yàn)檫@意味著用戶實(shí)現(xiàn)功能的時(shí)間變少。人類的失誤設(shè)計(jì)過程中要盡量避免用戶意外點(diǎn)中不相關(guān)的功能。常見的操作會用工具欄來實(shí)現(xiàn)，它們被包裹在子菜單中。子菜單可以利用實(shí)現(xiàn)，當(dāng)用戶點(diǎn)擊其他的子菜單時(shí)當(dāng)前顯示的子菜單應(yīng)從移除。

最后一次更新于 2019/07/09

Microsoft Word

本程序菜單

這個(gè)項(xiàng)目是人機(jī)交互設(shè)計(jì)課程的一個(gè)小作業(yè)。

不過該作業(yè)的要求是不需要編寫任何代碼的。

但為了體現(xiàn)我們小組的設(shè)計(jì)和分組理念，我還是決定編寫一個(gè)菜單小程序，該程序有靈活的布局，是微軟的 Word 編輯器和 IntelliJ IDEA 編輯器布局的綜合。

我們小組需要處理的所有功能已經(jīng)預(yù)先被分類成如下幾種名稱：

根據(jù) 功能相似的應(yīng)該放在一起 的原則來布局所屬的按鈕。

例如，空白文本，加粗文本，斜體文本和下劃線文本。

根據(jù) 功能的分組可以反應(yīng)執(zhí)行的順序 的原則來布局所屬的按鈕。

例如，先復(fù)制后粘貼。

根據(jù) 使用頻率相似的功能應(yīng)該放在一起 的原則來布局所屬的按鈕。通常常用操作都會在工具欄里使用戶能直接點(diǎn)擊。

例如，保存和打印。

按鈕的面積越大越好。而用戶的鼠標(biāo)指針和按鈕之間的距離越小越好。因?yàn)檫@意味著用戶實(shí)現(xiàn)功能的時(shí)間變少。

設(shè)計(jì)過程中要盡量避免誤導(dǎo)用戶。

比如說，如果先使用戶看到“保存為”功能而不是“保存”功能的話很可能使用戶誤認(rèn)為“保存為”即是“保存”功能。

設(shè)計(jì)過程中要盡量避免用戶意外點(diǎn)中不相關(guān)的功能。

比如說，用戶可能誤點(diǎn)中“刪除”而不是“粘貼”如果這兩個(gè)功能緊挨在一起的話。

從各類文本編輯器和以上原理的靈感激發(fā)下，我決定做出靈活布局的菜單。

常見的操作會用工具欄來實(shí)現(xiàn)，它們被包裹在子菜單中。

子菜單 可以利用 JToolBar 實(shí)現(xiàn)，當(dāng)用戶點(diǎn)擊其他的子菜單時(shí)當(dāng)前顯示的子菜單應(yīng)從 JFrame 移除。

舉個(gè)例子

public void menuSelected(MenuEvent e) {
    if(toolbar != null) {
        toolbar.setVisible(false);
        frame.remove(toolbar);
    }
    if(viewbar == null) {
        viewbar = new JToolBar();
        JMenuBar menuBar = new JMenuBar();
        // 頁面。
        ImageIcon pageIcon = new ImageIcon("src/images/page.png");
        JMenu page = new JMenu("View Page");
        page.setIcon(pageIcon);
        menuBar.add(page);

        // 頁面所在位置。
        ImageIcon posIcon = new ImageIcon("src/images/position.png");
        JMenu position = new JMenu("Position");
        position.setIcon(posIcon);
        menuBar.add(position);

        // 顯示文檔。
        ImageIcon docIcon = new ImageIcon("src/images/documents.png");
        JMenu document= new JMenu("Alternative Document");
        document.setIcon(docIcon);
        menuBar.add(document);

        viewbar.add(menuBar);
    }
    frame.add(viewbar, BorderLayout.PAGE_START);
    viewbar.setVisible(true);
    frame.setVisible(true);
}

對于快捷鍵的實(shí)現(xiàn)而言，我們需要調(diào)用 setAccelerator() 函數(shù)來設(shè)置快捷鍵。

比方說，

toolItem = new JMenuItem("Delete");
toolItem.setAccelerator(javax.swing.KeyStroke.getKeyStroke(java.awt.event.KeyEvent.VK_DELETE, 0));

接著，我們應(yīng)該為每個(gè)按鈕設(shè)置一個(gè)圖標(biāo)以此來提醒用戶點(diǎn)擊該按鈕會發(fā)生什么。

這部分的實(shí)現(xiàn)比較簡單：

ImageIcon pageIcon = new ImageIcon("src/images/page.png");
JMenu page = new JMenu("View Page");
page.setIcon(pageIcon);

如果我的文章可以幫到您，勞煩您點(diǎn)進(jìn)源碼點(diǎn)個(gè) ★ Star 哦！
https://github.com/Hephaest/M...