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

視覺系統(tǒng)中的按鈕

2017-2-19    資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


小編:千萬別小看了一個按鈕,下文是關(guān)于建立一個長遠的視覺系統(tǒng)的12點建議。

我愛按鈕們。我可以用按鈕很多事:進行下一步,做出決定,或者完成事務(wù)。有了按鈕,交互變得煥發(fā)生機。

這就是為什么按鈕們是一個設(shè)計系統(tǒng)里最重要的組成部分。非常簡單,它們在指定的區(qū)域提供可以點擊的簡單標簽。因此,按鈕是你應(yīng)用一種設(shè)計語言的基本特征的重要方式,之后你可以把特征擴展到其他更復(fù)雜的部分上。

這篇文章講的是我在一個新生系統(tǒng)中著手設(shè)計主要按鈕、次要按鈕、以及一大堆其他類型按鈕的時候所學(xué)習(xí)到的 12 條經(jīng)驗。

主要按鈕

#1. 設(shè)定一個系統(tǒng)的風(fēng)格基調(diào)

一個按鈕就像是系統(tǒng)視覺風(fēng)格中最純粹的原子表達(譯者注:原子是化學(xué)反應(yīng)中不可分割的最小微粒)。它結(jié)合了三大屬性——顏色、字體以及圖像——這些成為了一個原子中不可分割的部分。按鈕也引發(fā)了對空間的討論:內(nèi)部填充(特別是標簽的左、右)和邊距(與其他元素相鄰)。最后,按鈕甚至可以表達更深層次的東西,比如圓角(通過邊緣半徑),比如提升效果(通過邊框陰影)。

要點:你應(yīng)該贊同按鈕是一個系統(tǒng)風(fēng)格的首要展現(xiàn)。如果你把按鈕的定義與顏色、大小、空間或其他細節(jié)等新的變量聯(lián)系起來,那將會是很好的加分項。

按鈕這樣一個簡單的元素包含了范圍廣泛的屬性。

#2. 設(shè)定一個語言基調(diào)

幸運的是,「點擊這里」的講法已經(jīng)是過去式了。但我們?nèi)匀恍枰卮穑阂粋€按鈕上的標簽可以有多長?標簽是用祈使句寫的嗎(比如「保存」或「關(guān)閉」)?我應(yīng)該用一個對象(「文檔」)來匹配一個動詞(「保存」)嗎?這些常用的標簽有一些默認的用處么? 我們是否需要引入品牌聲音?

要點:我發(fā)現(xiàn)按鈕的價值是通過標簽的引導(dǎo)來推動一個一致性的聲音。當然,單詞表和深層次的文案標準可以在具體的文檔中找到,比如說語言和語調(diào)的指南。但無論如何,要把各種指引橋接在一起,按鈕是一個絕佳的元素。

#3. 在背景變得復(fù)雜時使用反轉(zhuǎn)色

大部分按鈕在白色的背景上都可以正常工作。但是當你把按鈕放到一張照片上又會發(fā)生什么呢?或者深色的背景上呢?誒,它甚至可能被放到一個淺色的中性顏色上?你的按鈕可以被用到任何地方嗎?你可以更改主要按鈕的顏色嗎?

要點:請在一個清晰可見的背景上展示你的按鈕,并且設(shè)定一個反轉(zhuǎn)色備用——白色?一個完全不同的顏色?或是半透明?——在背景灰暗時使用。當在編排文檔時,在一系列有普遍性的背景上展示備用的亮色或暗色來把標準搞清楚。

在不同的背景上展示按鈕,看看它們看起來是不是都好

#4. 限制每頁只有一個按鈕,除非要重復(fù)主要操作

按鈕可以引起動作。我們經(jīng)常用一個主要的按鈕,把用戶的注意力吸引到頁面里高優(yōu)先級的操作上。但是,如果有一大堆按鈕散落在頁面上,我們就無法區(qū)分出它們的優(yōu)先級的先后了。(除非它們都是一樣的,對吧?)

在某些情況下,使用一個主按鈕是恰當?shù)模热绠斈惚仨殢囊淮蠖哑叫械膶ο笾凶鲞x擇,或是一個設(shè)置頁面有相似的模塊化的區(qū)域,布滿了指向不同類別的選項。

要點:明確什么時候使用,和什么時候應(yīng)該避免——在一個頁面上使用超過一個的主要按鈕。

#5. 設(shè)計并建立一個按鈕的交互特征

按鈕是最原始的交互,并隨著交互變化。只展示按鈕在頁面加載時的樣子,并告訴開發(fā)者「這就是按鈕的設(shè)計!」顯然是不夠好的。相反,應(yīng)該由設(shè)計師來展示一個按鈕在許多不同的狀態(tài)下應(yīng)該出現(xiàn)的樣式:默認、懸停、焦點狀態(tài)(「一圈光環(huán)」),按下/活動中,甚至一個旋轉(zhuǎn)的加載動畫。

要點:在資料中附上一個動畫展示(把按鈕放到頁面里?。梢哉故景粹o的各種狀態(tài)而不需要閱讀者親自來互動。閱讀文檔不是一個尋寶游戲。像 Material Design 的指南那樣做一個演示視頻將會很加分。

#6. 讓多元素更具有靈動性

將按鈕上的文字與 icon 配對可以讓用戶更快地識別和更易理解。

但是等等!我認為按鈕應(yīng)該處于可被預(yù)見的可點擊區(qū)域內(nèi)。當你添加了一個新元素,即使是一個簡單的 icon,按鈕的布局都不應(yīng)該被破壞。要應(yīng)對不可預(yù)見的元素揭示了間距和內(nèi)部對齊等討厭的問題。你會想要讓他們的布局更加平緩,特別是按鈕包括了標簽、icon 其他部件的時候。

要點:讓你的按鈕對代碼或設(shè)計工具可響應(yīng)。用戶們將要添加?xùn)|西的——icon、標簽、或者其他任何東西——但別擔(dān)心間距和排列會被破壞。做好了前面的工作你就可以讓它們正確地顯示了。

次要按鈕

#7. 次要 ≠ 不可用

沒有誰希望看到灰色的按鈕

但你可能發(fā)現(xiàn)你需要為那個吸引人的、高飽和度的主要按鈕匹配一個次要按鈕。你避免了使用第二個高飽和度的顏色,因為這會導(dǎo)致兩個高飽和度的按鈕彼此相鄰,就像綠色表示保存,藍色表示提交。不說用戶,就連你自己也不知道哪個按鈕更重要。

所以,你可能會選擇使用中性顏色。中性顏色看起來接近或完全是灰色。并且它看上去像是表達不可用。更糟糕的是,當主要按鈕不可用的時候它也會變成灰色。并且就在你灰色的次要按鈕旁邊。哎。:-(

要點:同時處理次級按鈕的顏色和不可用按鈕的顏色。確保所有選項在一起時都可以正常工作并且都容易可見。

哪一個才是不可用的?

#8. 當心機器里的「幽靈」

「幽靈按鈕」通常只依賴于相同顏色的邊框和標簽,而缺乏填充背景色。這樣的標簽背后的區(qū)域是不確定的。有時候標簽在白色上(是的,那很容易被看清?。?。然而,在其他時候一個純色或者細節(jié)豐富的照片都可以讓標簽變得很難閱讀。

「幽靈」讓設(shè)計師在設(shè)計高對比度的主要按鈕時想要偷懶。然而,把他們稱為「幽靈」是有原因的。因為很多時候它們會無法被看見。我觀察了「幽靈按鈕」被難以查看的圖片覆蓋的情況下的可見性測試。參與者看不清它們或很難閱讀它們。這將會削弱或破壞我們原本打算讓這個按鈕實現(xiàn)的交互的價值。

要點:在一個系統(tǒng)中使用「幽靈按鈕」是將你自己的設(shè)計置于為危險中。我觀察到的情況表明「幽靈按鈕」的表現(xiàn)比填充色還要差。此外,你可能只是想避免花費幾個小時來傾聽關(guān)于這個問題的極端設(shè)計師辯論。

幽靈按鈕——即使在簡單的情況下——表現(xiàn)也是有問題的。你想要在不可預(yù)測的背景上使用它?忘掉這回事吧。

其他按鈕類型

很快,系統(tǒng)的用戶們就需要你提供那些其他的按鈕。大一點或者小一點的按鈕。帶有菜單或工具欄可切換的按鈕。這取決于你的系統(tǒng)是否足夠完整。

#9. 可變尺寸,大(或者超大/巨大/擴展)&小(或者微小/極?。?

交互可以在重要的地方比如卡片元素或側(cè)邊欄模塊中找到。有時,你需要在一個全屏的圖片上放上一個巨大的按鈕來引起用戶關(guān)注。

要點:在有必要的時候調(diào)整按鈕的尺寸大小,盡可能像其他的 CSS 類或者設(shè)計軟件的風(fēng)格一樣簡潔。此外,考慮一個更難忘的名字——比如「擴展」或「微小」——而不是一個平淡的「大」或「小」

#10. 區(qū)分按鈕與鏈接

在扁平化設(shè)計的時代,像 Material Design 這樣的視覺系統(tǒng)使用了多種「扁平」按鈕,來用在工具欄、對話框操作和行內(nèi)文本渣。在默認狀態(tài)下,按鈕和鏈接幾乎沒有視覺差異。然而,一個按鈕的狀態(tài)和行為,與簡單的錨標簽相比,會帶來完全不同的效果。

要點:如果你的系統(tǒng)使用了扁平化的版本,應(yīng)該確保它的常規(guī)使用——在設(shè)計和代碼中——都有別于鏈接。此外,這條準則應(yīng)該涵蓋所有復(fù)雜交互。例如焦點被按下的狀態(tài),間距對齊方式

#11. 使用菜單和區(qū)塊豐富按鈕的多樣性

可變的按鈕可以觸發(fā)相關(guān)的菜單選項來進行選擇。許多系統(tǒng)在 UI 位置緊張時提供了復(fù)合式的選項,就像菜單(或下拉菜單)和分割(或分段式)按鈕。

一個菜單按鈕可以指示當前的選項(例如已經(jīng)選擇了 Arial 作為字體)或者打開一個獨立選項(例如分享或打印)。在右側(cè)添加一個小箭頭的圖標,你還可以得到一個額外的獨立區(qū)域來布局一個菜單,同時左側(cè)的區(qū)域可以觸發(fā)一個獨立的主要操作。

要點:你可以用菜單式的按鈕來豐富你的 App 的選項,但需要謹慎。這樣的按鈕和它們的區(qū)域分割(左側(cè)主要操作,右側(cè)菜單)可以支持許多種情況,但這也帶來了更高的開發(fā)成本和學(xué)習(xí)成本。對設(shè)計更簡潔的網(wǎng)站來說,不要用這些不常用的替代方案來破壞了原有的架構(gòu)。

#12. 從開關(guān)到工具欄,讓按鈕們工作地更和諧

按鈕可以成組使用。一個按鈕組常常搭配一個主要選項和一個或多個次要選項。一個開關(guān)按鈕常常用來表示開關(guān)(比如粗體)或者顯示一個設(shè)置菜單的選項(就像文本對齊選項的左對齊、右對齊、居中或兩端對齊)。在它們最廣泛的用法中,一個工具欄可以把許多不同類型的按鈕搭配在一起:主要的、次要的、開關(guān)、菜單、部件。

要點:當你在拓展按鈕的種類時,你應(yīng)該試著讓按鈕們在一個緊張的空間內(nèi)做一個壓力測試,并且嘗試多種不同的組合。視覺系統(tǒng)的設(shè)計師們不是算命先生,沒有辦法預(yù)測未來。但是探索一個不同情形下的合理狀態(tài),可以幫助你避免厭惡情緒或一條道走到黑。

對于按鈕,就使用

有一個很好的關(guān)于學(xué)習(xí)按鈕代碼的寶庫。這篇 CSS 技巧的文章什么時候使用按鈕元素(和關(guān)于它的活躍的討論)是一個很好的開始。

Markdown

要點:學(xué)習(xí)代碼原型來了解常規(guī)的按鈕和可行性。你可以認真閱讀 Alex Lande 的 Anchors, Buttons, and Accessibility 和 CSSKarma 的 Meet the Polybutton, An Accessibility Polyfill ,通過這樣的文章,你將可以慢慢得到進步。

想要開始著手視覺系統(tǒng)的設(shè)計,或者需要深入討論產(chǎn)品和用戶? EightShapes 會進行系統(tǒng)的專題研討會并且在視覺系統(tǒng)設(shè)計上指導(dǎo)客戶。讓我們聊一聊吧?

原文地址:Buttons in Design Systems

原文作者:Nathan Curtis

譯文出自:掘金翻譯計劃

譯者:Funtrip

校對者:yifili09、skyar2009

來源:學(xué)UI網(wǎng) ? 視覺系統(tǒng)中的按鈕

藍藍設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.88yangsc.com

存檔