手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

<listing id="c60jm"></listing>

按鈕組 Button Groups：大量的操作按鈕如何排布與設(shè)計(jì)？

2022-3-24 ui設(shè)計(jì)分享達(dá)人

What 是什么

簡(jiǎn)介：按鈕組是把相關(guān)的動(dòng)作組織成一組按鈕的設(shè)計(jì)模式。按鈕組的內(nèi)部?jī)?nèi)容彼此水平或垂直對(duì)齊，并采用相似的視覺(jué)設(shè)計(jì)。如果超過(guò)三個(gè)或四個(gè)動(dòng)作，往往會(huì)采取多個(gè)分組。

例子：語(yǔ)雀編輯器的頂部工具欄

undefined

Why 為什么

按鈕組可以讓界面不言自明。在復(fù)雜的布局中，被精心安排過(guò)的按鈕組會(huì)很容易被用戶感知和使用。一方面，它們?cè)诮缑嫔贤浅Ｃ黠@，用戶能夠一眼看到有這些功能可以進(jìn)行相關(guān)操作。

大家所熟知的格式塔原則（Gestalt principles）也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近，因此會(huì)讓用戶感覺(jué)到這一組按鈕可以完成類似的功能。相對(duì)的，不同的按鈕分組往往暗示著不同的功能類型，因此彼此間應(yīng)該保持間距，或用不同的形狀，或用分割線進(jìn)行區(qū)分。

When 什么時(shí)候使用

如果你需要在界面上展示許多操作按鈕，且需要確保它們隨時(shí)在界面上可見(jiàn)。但同時(shí)，你又需要用圖形化的方式組織它們，以使它們看起來(lái)不會(huì)特別散亂。

這些動(dòng)作中有許多是彼此相似的 —— 它們有相似或互補(bǔ)的效果，比如，它們的功能語(yǔ)義相類似 —— 由此它們可以三五成組地放在一起。

按鈕組可以用在對(duì)產(chǎn)品全局有效的操作上（例如「打開(kāi)」和「選項(xiàng)」操作），或特定的一些通用操作（「保存」、「編輯」和「刪除」），或特定的某些操作（例如布局的「對(duì)齊」、「分布」）。不同范圍的操作不應(yīng)當(dāng)被到一個(gè)組中。

使用條件：

· 存在大量操作按鈕；

· 希望用圖形化的方式組織這些按鈕；

· 操作按鈕間存在功能相關(guān)性和差異性；

How 如何使用

這個(gè)模式的總結(jié)簡(jiǎn)單到像是一句廢話：把相關(guān)的操作按鈕分成一組。

但如果詳細(xì)展開(kāi)就會(huì)有更多的介紹。比如：

· 如果需要包含文本說(shuō)明，盡量使用兩個(gè)字或三個(gè)字的動(dòng)詞短語(yǔ)，不要使用專業(yè)術(shù)語(yǔ)。

· 不要把不同功能范圍的按鈕放在一個(gè)組，應(yīng)當(dāng)將它們分成不同的分組。

· 同一組的按鈕應(yīng)該有同樣的視覺(jué)設(shè)計(jì)：邊框、顏色、高度或?qū)挾?、圖標(biāo)風(fēng)格、動(dòng)態(tài)效果等。

· 在空間排布上，可以將它們并排起來(lái)作為橫排放置，如果空間不太適用的話，也可以考慮一列縱列放置（例如Photoshop的左側(cè)工具欄）。

· 如果某一個(gè)動(dòng)作是核心動(dòng)作，可以將其區(qū)別對(duì)待。例如網(wǎng)頁(yè)表單中的“提交”按鈕。核心動(dòng)作是希望大部分用戶都需要（或期待）執(zhí)行的動(dòng)作。讓這個(gè)按鈕擁有更加強(qiáng)烈的圖形或視覺(jué)風(fēng)格來(lái)讓它在顯得更為突出。

· 如果按鈕足夠多，而且它們都有小圖標(biāo)，你也可以把它們放在工具條或者像工具條那樣的狹長(zhǎng)條上，放置在頁(yè)面的頂部。

通過(guò)使用按鈕組可以避免界面上按鈕或鏈接過(guò)于擁擠混亂，也可以避免一長(zhǎng)串冗長(zhǎng)的動(dòng)作列表看起來(lái)毫無(wú)關(guān)聯(lián)或區(qū)別。

通過(guò)這一模式，你可以創(chuàng)建一個(gè)較為清晰的元素層級(jí)結(jié)構(gòu)：用戶可以一眼看出哪些動(dòng)作是彼此相關(guān)的，哪些是重要的。

Example 案例

案例一：Sketch 的頂部按鈕工具區(qū)

用戶需求：編輯設(shè)計(jì)文件中的對(duì)象

Sketch 也是個(gè)很典型的應(yīng)用了按鈕組的設(shè)計(jì)工具。Sketch頂部的按鈕不少于15個(gè)，有很多要理解和追查。但是得益于精心的視覺(jué)和語(yǔ)義組織，界面按鈕始終保持一定的可理解性。

undefined

案例二：macOS Finder

用戶需求：按自己需求對(duì)文件進(jìn)行顯示修改和操作

這個(gè)案例顯示了來(lái)自 macOS 的 Finder 窗口的頂部按鈕組。秉承其設(shè)計(jì)傳統(tǒng)，按鈕風(fēng)格明顯。導(dǎo)航組是放置在左側(cè)中的按鈕組。布局相關(guān)的按鈕組放在了中間，文件操作相關(guān)的按鈕組放在了右側(cè)。這樣的設(shè)計(jì)使得界面變得易于理解和使用。

undefined