明里在线播放,日韩国产亚洲欧美中国v

<strong id="roxbv"></strong>

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

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

What 是什么

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

例子：語雀編輯器的頂部工具欄

undefined

Why 為什么

按鈕組可以讓界面不言自明。在復(fù)雜的布局中，被精心安排過的按鈕組會很容易被用戶感知和使用。一方面，它們在界面上往往非常明顯，用戶能夠一眼看到有這些功能可以進(jìn)行相關(guān)操作。

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

When 什么時候使用

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

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

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

使用條件：

· 存在大量操作按鈕；

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

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

How 如何使用

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

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

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

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

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

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

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

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

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

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

Example 案例

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

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

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

undefined

案例二：macOS Finder

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

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

undefined