2022-3-24 周周
簡(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ǔ)雀編輯器的頂部工具欄
簡(jiǎn)介： 「懸浮工具」其實(shí)很常見(jiàn)，在 PC 端，就是當(dāng)用戶(hù)鼠標(biāo)掠過(guò)對(duì)象時(shí)就懸浮顯示一些工具和功能；在移動(dòng)端，當(dāng)用戶(hù)點(diǎn)擊對(duì)象時(shí)，懸浮工具就會(huì)顯示在旁邊。
例子： 花瓣網(wǎng)在鼠標(biāo)滑動(dòng)在圖片卡片上時(shí)，圖片上方就會(huì)出現(xiàn)放“采集”和喜歡的功能。
簡(jiǎn)介： 「動(dòng)作面板」是集成了系列動(dòng)作的 UI 面板或命令組?；谟脩?hù)在軟件中的停留位置和使用情況，面板上通常是頻繁使用和最相關(guān)的動(dòng)作集合。相比于界面其他的行動(dòng)按鈕，如常規(guī)的「按鈕組」，動(dòng)作面板能以更加醒目的方式顯示命令。
例子： Mac 電腦的屏幕下方會(huì)為用戶(hù)展示一組可操作的命令
簡(jiǎn)介： 「行動(dòng)號(hào)召按鈕」是用來(lái)號(hào)召用戶(hù)點(diǎn)擊的進(jìn)行下一步的操作按鈕/可點(diǎn)擊的組件。
例子： 螞蟻金融科技首頁(yè)的“開(kāi)始探索”按鈕，點(diǎn)擊后跳轉(zhuǎn)到一個(gè)新的頁(yè)面進(jìn)行下一步操作。
簡(jiǎn)介 「智能菜單』是一種動(dòng)態(tài)顯示菜單項(xiàng)的設(shè)計(jì)模式，根據(jù)用戶(hù)所處的不同上下文，提供不同的菜單選項(xiàng)，這是一種讓菜單變得更靈活和高效的設(shè)計(jì)模式。
例子 macOS 日歷的右鍵菜單項(xiàng)
簡(jiǎn)介 ：「結(jié)果預(yù)覽」是一種在用戶(hù)執(zhí)行某個(gè)動(dòng)作之前，為其顯示操作效果的設(shè)計(jì)方法，可以為用戶(hù)預(yù)期的最終結(jié)果提供參考。
例子： 寶馬官網(wǎng)在用戶(hù)選購(gòu)時(shí)可以對(duì)車(chē)的各種屬性進(jìn)行配置和效果預(yù)覽
簡(jiǎn)介： 「加載提示」是用戶(hù)在提交操作之后，程序響應(yīng)結(jié)果前顯示的動(dòng)畫(huà)和指示。
加載提示通常是儀表或溫度計(jì)式的動(dòng)畫(huà)，用于顯示某項(xiàng)耗時(shí)較長(zhǎng)的任務(wù)的關(guān)鍵數(shù)據(jù)。例如，上傳大型文件或圖像，或者在移動(dòng)設(shè)備上加載移動(dòng)應(yīng)用程序時(shí)的動(dòng)畫(huà)，表示當(dāng)前的狀態(tài)以及完成任務(wù)剩余的時(shí)間。
例子： 使用 Ant Design 組件-加載中 搭建的kitchen頁(yè)面加載時(shí)的效果
簡(jiǎn)介 「撤銷(xiāo)按鈕」是一種允許用戶(hù)取消耗時(shí)操作的設(shè)計(jì)模式。
例子 Ant Design Upload 組件，文件上傳時(shí)允許用戶(hù)點(diǎn)擊垃圾桶圖標(biāo)進(jìn)行刪除
簡(jiǎn)介： 「多級(jí)撤銷(xiāo)」允許用戶(hù)撤銷(xiāo)一系列的操作。用戶(hù)操作的順序能被系統(tǒng)捕獲記錄，根據(jù)原始執(zhí)行順序，一步步返回歷史操作。
例子： 用 Sketch 畫(huà)設(shè)計(jì)稿時(shí)，可以多級(jí)撤銷(xiāo)，允許用戶(hù)返回上一步或更早的歷史操作
簡(jiǎn)介： 「歷史記錄」包含可撤銷(xiāo)的操作和瀏覽器歷史記錄兩種。
「可撤銷(xiāo)的操作」指的是當(dāng)用戶(hù)在某些軟件內(nèi)執(zhí)行某些操作時(shí)，系統(tǒng)自動(dòng)保存的關(guān)于這些操作的可見(jiàn)記錄，記錄了用戶(hù)做了什么操作、作用在什么對(duì)象上、以及執(zhí)行操作的時(shí)間。此記錄可以被用戶(hù)移除或改變這些動(dòng)作的順序。
「瀏覽器歷史記錄」指的是用戶(hù)瀏覽互聯(lián)網(wǎng)時(shí)，瀏覽器保留的用戶(hù)那些瀏覽過(guò)的網(wǎng)站，程序和URL的可見(jiàn)記錄。當(dāng)用戶(hù)忘記之前訪問(wèn)過(guò)的網(wǎng)站網(wǎng)址時(shí)，能幫助用戶(hù)根據(jù)歷史歷史記錄進(jìn)行查找。
例子： 釘釘?shù)脑票P(pán)查看文件后留下的最近查看文件的歷史記錄。
簡(jiǎn)介 ：「宏」是一種創(chuàng)建指令集來(lái)減少用戶(hù)交互操作的設(shè)計(jì)模式。用戶(hù)可以通過(guò)記錄或把一系列操作放在一起來(lái)創(chuàng)建一個(gè)宏以供復(fù)用。指令集在集合里包含了其他一些小的操作，往往可以節(jié)省大量時(shí)間，提高工作流程效率。
例子： macOS 的快捷指令，就運(yùn)用了宏這種模式。用戶(hù)可以錄制自己的快捷指令，高效地完成復(fù)雜任務(wù)流程。
注：以上模式來(lái)源《Designing Interfaces》，案例由 Ant Design 團(tuán)隊(duì)收集整理，如有侵權(quán)請(qǐng)聯(lián)系刪除。
文章來(lái)源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com