提到按鈕,你可能第一反應是“就這?? so easy! ”,在深入了解按鈕前我也這麼想,但是在實際工作中你會發現,按鈕的學問比我們想象中的大,如果把設計精美的界面比作一首歌,那麼按鈕就是音符,是基礎又極為重要的部分.
按鈕是界面中運用非常廣泛的一類組件, 按鈕的設計正确與否不僅影響用戶的正常業務流程,更影響了用戶對于産品的整體感觀和體驗度, 但是在企業級的軟件中,由于場景角色的複雜化多元化,按鈕的運用也可能面臨着一些問題和考驗,你是否曾經遇到過這樣的疑問:
接下來,讓我們一起全面的了解一下按鈕的規範:
車爾尼雪夫斯基曾說:“藝術來源于現實,又高于現實”. 設計也不例外,比如界面中的按鈕來源于現實世界中的物理按鈕,如撥電話時的撥通按鍵,點爐竈時的旋轉開關等等,由于按鈕的設計貼合現實生活中真實物體的外觀,降低了用戶的認知和理解成本,所以用戶很快就學會如何操作.
如今市面上常見的按鈕以扁平化風格居多, 但是在互聯網發展早期,拟物化按鈕十分流行, 它就是“設計來源于現實”的體現,隻不過後來慢慢的,為了适應效率高、更叠快的互聯網時代,拟物風格在時代的潮流中逐漸被扁平風格取代.
在UI設計中,按鈕是一個明确指示交互行為動作的組件,主要用于觸發某一個即時操作,很多時候,我們需要采取下一步行動或返回到上一步,都要通過按鈕(部分場景可用手勢交互)來完成。
03 按鈕類型按鈕天生被設計來讓用戶産生點擊的欲望,因此在設計師的工具集中,按鈕是視覺上最引人矚目的控件,于是它有了不計其數的變體,去設計網站上随便一搜,你就能看到眼花缭亂的按鈕樣式,這裡筆者參照B端規範去歸納按鈕的分類,分别按照功能、優先級、外觀、組成元素、特殊按鈕等類型分類.
3.1 功能按照功能的差異性可分為簡單按鈕、狀态切換按鈕、組合按鈕、菜單按鈕.
3.1.1 簡單按鈕簡單按鈕一次隻觸發一個動作,它通常指代特定的行為動作如創建、編輯、保存、通過、拒絕、接受、确定、取消等等,它也是按鈕中最常見的類型.
狀态切換按鈕,英文叫做toggle button, 「Toggle」一詞對應帶有短柄的撥動式開關,撥動它的時候,能夠在兩種不同的狀态之間切換。
狀态切換按鈕, 通過激活或者置灰一個對象,在觸發該動作的同時, 顯示了用戶當前的狀态, 并且它的交互方式允許用戶在兩種狀态中自由切換,還節約空間.
拿最常見的switch開關來說, Toggle button在實際使用中常常遇到A方案的問題,乍一看好像沒什麼問題,但是實際使用中,用戶會很迷惑,究竟這個On/Off代表當前的狀态還是執行的動作呢?
B方案在A方案的基礎上,給On加了綠色,表明當前的激活狀态,但是初級用戶有可能沒辦法立刻理解顔色代表狀态還是按鈕的操作,在實踐了幾次之後,建立了顔色和按鈕狀态的聯系,慢慢的習慣了這樣的用法,B方案也是目前比較流行的方案.
C方案從用戶體驗的角度來說是最佳方案, 它做到了把狀态和操作清楚的區分開來,讓用戶一目了然,不會感到迷惑.
組合按鈕允許用戶從一組選項中選擇一個動作, 舉個例子,切換表格的視圖: 柱狀圖、餅狀圖、線性圖,一個組合中的按鈕通常是功能關聯緊密的一系列圖标.
菜單按鈕是菜單中不可分割的一部分,菜單本身可以被單獨考慮,但菜單按鈕無法單獨存在.點擊菜單按鈕的箭頭,便可以彈出一個下拉框,從一堆動作中選擇一個動作.
菜單按鈕可以分為常規菜單按鈕和帶分割線的菜單按鈕:
常規菜單按鈕:
當用戶點擊按鈕後,菜單選項彈出,這是默認的類型.
帶分割線的菜單按鈕:
帶分割線的菜單按鈕被分為兩個區域: 文字标簽和下拉圖标. 文字标簽的内容通常是默認選項(被頻繁使用到的動作),點擊文字标簽就會直接觸發這個動作,而如果點擊下拉按鈕則會彈出選項.
這還有一個容易被設計師忽略的思考點,就是文字标簽是否需要變化,文字标簽的兩種交互變化:
通常來說,如果在需要告知用戶自己所處的狀态、當前頁面處所的狀态、當前正在使用的工具時,菜單按鈕的文字标簽就要改變,常見的有賬戶切換、篩選過濾、工具使用等等.
除此之外的簡單情形,文字标簽則默認不改變.
拿飛書右上角的“新建”按鈕舉個例子,點擊新建後,彈出下拉框,當你選擇其中任意一個選項,系統就會完成這個任務, 所以這裡不需要改變文字标簽.
再拿Figma中的篩選菜單按鈕舉個例子,點擊篩選的因素,然後标簽就改變成當前應用的此篩選因素.
在日常場景中,主按鈕是頁面中按鈕區最為核心的操作按鈕, 通常使用主題色填充容器吸引用戶視線聚焦, 引導用戶去關注、操作主流程,強調性較高。
一個按鈕區最多應該使用一個主按鈕。那麼一個頁面可以有多個主按鈕嗎?因為沒有足夠的反面案例支撐一個頁面不能有多個主按鈕,比較建議在一個焦點任務中,最多一個主按鈕,也可以沒有主按鈕.
次級按鈕是在日常場景中運用最廣泛的的一種按鈕, 視覺呈現上相較于主按鈕較“弱”, 強調性中等, 可用于所有次要的按鈕行動,如果我們有許多同等重要性的行動在一個屏幕上,或不确定要選擇哪種按鈕,次要按鈕永遠是最安全的選擇。
三級按鈕是次于次級按鈕重要性的按鈕. 比較适合諸如“取消”、“還原”等無需強調的操作, 比如表格操作列這類無需強調的操作也推薦使用。
按鈕外形五花八門,這裡介紹B端常見的按鈕類型,按照外觀有無填充、描邊差異、顔色差異大緻分為以下類别:
按照組成元素可分為圖标&文字、僅圖标、僅文字:
有的按鈕隻出現在特定的場景下,比如像PS的工具欄:當鼠标懸停在某個工具(通常是icon表示)上時,下方會彈出該icon的快捷鍵和文字解釋(tooltip); 再比如說系統收到新消息時,消息圖标的右上角會顯示收到的信息數量……特殊按鈕類型包括比如角标提示按鈕、默認按鈕、快捷鍵提示按鈕等等,這裡隻是舉幾個例子說明.
3.5.1 角标提示按鈕(Badge on Button)
默認狀态下的按鈕, 可以通過Enter/Ctrl Enter快捷鍵觸發, 無論此時聚焦中心在哪裡、是否聚焦, 大多數情況下, 默認按鈕是強調按鈕或者是接受按鈕,為了便于識别,我們可以賦予它與衆不同的圓角.
當一個按鈕有對應的快捷鍵時,鼠标在懸停狀态下會顯示該按鈕的快捷鍵提示, 快捷鍵提示位置也許會出現在按鈕的上方或者下方,這取決于鼠标停留的位置.
試着把按鈕想象成嬰兒Q彈的臉蛋,你按下去的時候,它會凹下去一塊,當你放手時,它會“嘣”的一聲彈回來,恢複原樣,這種特性叫做“受範性”.
如果一個用戶點擊了按鈕,可按鈕在視覺上沒有産生任何變化,這個時候用戶就會開始懷疑自己到底有沒有按下這個按鈕,甚至會覺得這個按鈕是不是壞掉了?? 盡管單一狀态的按鈕可以大大減少開發難度,但是會造成非常糟糕的用戶體驗.
用戶渴望按鈕發生改變,這叫做“受範性反應”, 常見的按鈕的狀态改變可以被分為常規、懸停、按下、禁用、聚焦:
除了這五種最基本的按鈕交互狀态外, 還有一些在特殊的情形下才出現的按鈕狀态,比如說:
現在我們了解按鈕的分類和具體用法,但是在實際工作上可能常常會遇到“這個按鈕該放在那個位置?”“這個按鈕和那個按鈕我應該那個放在左邊哪個放在右邊?“等等令人糾結的問題, 先不着急,萬變不離其宗,我們先來看看用戶在浏覽界面時的一些閱讀模式:
5.1.1 F-PatternF模式遵循字母F的形狀,也因此得名, Jacob Nielsen 在進行眼球追蹤研究後首次提出了這種模式, 容易被大家忽略的一點是, 他的眼動研究是針對如報紙和文章這樣的密集文本和大量搜索結果頁面進行的.
與其他模式一樣,眼睛從頂部/左側開始,水平移動到頂部/右側,然後回到左側邊緣,接着再次向右水平掃描, 但是第二次掃描不會像第一次那麼遠, 此後的眼睛掃描按照這樣的規律進行, 最終眼睛在向下移動時會停留在左邊緣附近。
Z模式有時被稱為反向模式, 它的布局遵循字母Z的形狀, 用戶将從頂部/左側開始,水平移動到頂部/右側,然後對角線移動到底部/左側,然後完成另一個水平移動到底部/右側。
與古騰堡圖表的主要區别在于, Z模式下的用戶将穿過兩個低注意力區, 而古登堡是從第一視覺落腳點到最終視覺落腳點.
我們稍微擴展一下Z模式,不妨把它看作是一系列小Z運動,而不是一個大Z運動, 這其實我們正常情況下閱讀大量文本的方式, 這一系列Z運動有時被稱為之字形圖案, 如果我們繼續在圖案中添加更多的之字形和鋸齒形, 随着Z的對角線部分變得越來越淺,我們最終會進行一系列近水平的左右運動。
Z模式還衍生出所謂的金三角形圖案, 如果用戶進行第一個水平和第一個對角線運動,然後關閉形狀,用戶最終會得到一個直角三角形。
古登堡圖表描述了在平鋪式信息情境下下眼動的一般規律,如閱讀小說或者報紙時.
古登堡圖表将頁面布局分為4個象限:
該模式表明,眼睛将以一系列水平運動橫掃頁面, 每次掃蕩從左邊邊緣開始,向右邊緣移動得更近一點。整體運動是眼睛從主區域移動到終端區域,這條路徑被稱為閱讀重力。
古騰堡圖表明,強休耕區和弱休耕區位于這條閱讀重力路徑之外,除非以某種方式在視覺上強調,否則受到的關注很少, 重要元素應沿閱讀重力路徑放置.
焦點模式是你完全控制的模式, 一旦你給你的設計元素不同的視覺權重,并創建層次結構和流程,上面的模式就不再适用.
焦點模式表明,人們将首先查看頁面上最占主導地位的元素(視覺重量最大的元素或區域).
從那裡,眼睛将沿着從主導元素到設計中其他焦點的路徑。順序将取決于這些焦點的相對權重,以及指示下一步要看的任何視覺線索。
5.2 界面布局一般頁面可分為3個部分, 标題區、内容區、頁腳區.
标題區放置是影響全局行為的按鈕(如: 編輯、删除).
規則:
内容區放置的是隻影響該内容區的按鈕, 内容的形式有很多,這裡拿圖表和表格舉例說明,按鈕的一些規律:
表格按鈕通常頂部右對齊,常見的按鈕功能包括:
圖表按鈕頂部右對齊,常見的按鈕功能有:
頁腳區的動作通常是影響業務流程進度的, 代表一個流程中的步驟, 如: 提交、保存. 它可以是用戶想要完成的東西(如保存一個表格), 或者結束一個業務流程的(如 拒絕請求, 提交表單).頁腳區的動作也可以包含替換當前路徑的動作(如: 返回), 或者跳出當前業務的動作(如: 取消)
頁腳區的動作按鈕的規律是:
當産品給出很多的按鈕需求時,通常第一步是按照功能分類,把功能相類似的按鈕分在一起,可用menu button 的形式放在一起,如“導出為excel”和“導出為PDF”可以合并在一起,這樣做的益處是,一方面節省寶貴的屏幕空間,使得頁面看上去整潔清晰,另一方面讓用戶更快速的做出選擇.
如果按鈕實在太多了,也沒有一些可以合并成一個menu button的選擇, 那麼這個時候可以考慮使用“更多”的展開按鈕(overflow button),而選擇哪些動作放進“更多”,這個取決于産品經理給出的優先級.
從現象層來看,圖标與信息就是信息的兩種不同表現方式。兩個表現方式都各自有各自的特點,所以在設計過程中,應根據具體的場景去選擇合适的表現方式。
通常情況下,我們不推薦圖标和文字一起使用, 比如fiori規範中要求盡量使用圖标或者文字,避免繁冗.
5.4.1 圖标圖标作為現在使用較多的信息表現方式,具有以下幾個特點:
優點:
缺點: 不夠準确,容易有歧義.再優秀的設計師也不能設計出一個能夠另所有人都理解的圖标,因為它永遠沒有文字來的直白和準确,不過為了彌補圖标的這個缺點,設計師們發明了tooltip,當你懸浮在圖标上,附近會顯示它的說明文字,幫助初次使用者熟悉工具.
優點:
準确性: 文字相較于圖标,其最大的特點,就是信息傳遞的準确性高。人腦在認知文字時,首先會将其轉化為腦中與之對應的圖案,然後再進行理解記憶。雖然每個個體腦中的圖案可能存在差别,但這些圖案本身對于個體來說,卻是唯一的,這種唯一的确定性,就保證了文字信息傳遞的準确性。
缺點:
文字按鈕:
圖标按鈕:
接下來,咱們來庖丁解牛拆解一下按鈕,按鈕可大緻分為容器、背景、圖标、文本、描邊、圓角等基本組成元素,每種元素的視覺呈現都會反過來影響按鈕的外觀。不同風格、不同氣質的産品,需要相應處理影響按鈕視覺呈現的各個元素.
在PC端設計按鈕時,因為鼠标的精準點擊,按鈕尺寸可以設計的小一些,同時也能讓整個界面看起來更加精緻,隻要不影響操作,36px~48px範圍内的按鈕是比較常見的。
然而移動端的按鈕設計,考慮到手指點擊操作的實際範圍, 于是在iOS的設計規範中, 将按鈕的最小點擊區域規定為44pt,一旦小于這個數值,操作時就會出現精準度較低的情況,導緻操作失誤或無效. 但是在實際的IOS界面中,并未嚴格遵守這個要求, 因為很多按鈕的權重較低, 并且如文字按鈕, 因為它永遠不可能達到這樣子的标準(但是可以加大熱區範圍).
每個平台都會有多種型号的按鈕,一般按照尺寸可以分為:超大按鈕、大按鈕、中按鈕、小按鈕,超小按鈕,這個可以根據自己平台的需要來制定多少種。
高度: 每一種規格的按鈕高度是固定的.
寬度: 按鈕有最大寬度和最小寬度限制,
最大寬度: 在手機端,最大寬度就是頁面寬度減去安全邊距(下圖兩個紅線間距就是安全邊距, 常見的安全邊距有10pt、12pt、16pt等;在電腦端,通常沒有最大寬度的說法,因為按鈕本身的字數不多,所以按鈕最長也不會像根釣魚竿一樣, 但是正常情況下按鈕有固定的Padding(内邊距).
最小寬度: 根據各平台屬性來制定即可。
而當按鈕寬度處于最小寬度和最大寬度之間時,按鈕的長度是根據内容的長度而做變化的,隻需設定單個元素到按鈕左右邊距、多個元素之間邊距Padding.
這裡有一個注意事項: 在設計軟件中,邊框默認是居中邊框的,但是在開發中,沒有居中邊框這一種說法,默認是内邊框, 所以按鈕的元素邊距(Padding)是包括描邊大小的.
通常主按鈕會使用面性, 而線性按鈕也被稱為幽靈按鈕,在視覺上,線性按鈕在視覺上引起的注意力弱于面性圖标.
設計過程中的每一個小決定都會影響整體設計的感覺. 按鈕就是其中很重要的一環. 圓角按鈕所帶來的不僅僅是圓角大小的視覺表現,更多是影響着用戶對整個産品整體認知,以及用戶在使用産品過程中的具體感受, 合理運用一定圓角的按鈕對整個産品使用體驗的提升大有裨益。
這裡的圓角不僅僅局限于按鈕,推而廣之适用産品中的每個元素,提前合理的規劃各種元素圓角,讓産品整體看上去一緻、和諧、美觀.
0px圓角: 完全的直角是一類經典用法, 塑造嚴肅、專業的界面. 為了整體界面的一緻性,其他的元素也需要有鋒利的幾何棱角感.
3-4px圓角: 這一類圓角是最安全的選擇.在很多大廠規範中, 都使用這一類的圓角, 可以說是比較标準的用法,它比完全的直角要友好.
8-14px圓角: 這一類圓角适用于卡片, 因為圓角比直角的識别度高的多, 直角的卡片看上去更鋒利, 用戶的目光通常是劃過它們而不是目光在它們身上逗留.
全圓角: 全圓角的按鈕和一般圓角的按鈕相比, 全圓角更适合在空間足夠的情況下, 作為一個CTA(call-to-action)按鈕, 引導用戶特定的行為. 而且,在列表、卡片布局的情況下, 全圓角發揮的更好.
如果平台的按鈕是圓角矩形,就需要制定按鈕圓角的大小,但是并不是所有按鈕的圓角大小都是一樣的,需要按鈕大小比例來制定.
在大多數界面設計中,我們通常所見到按鈕還是小圓角和全圓角居多,也有部分按鈕完全直角,需要根據産品的行業屬性與氣質來選擇最合适的圓角類型。
按鈕的大小、形狀、顔 色三個維度中,人眼是對顔色信息最為敏感的;在一個頁面中,突出一個元素的方式有多種,其中最簡潔有效的方式就是用顔色進行突出;顔色包含了色相、飽和度和明度三種屬性,改變顔色的不同屬性,都會對按鈕的表意産生影響;同時,不同的顔色代表着不同的含義,配色時需要加以注意。
基礎色: 按鈕顔色和産品整體顔色 (品牌色) 相關, 由品牌色衍生出一系列基礎色, 用于展示不同狀态下按鈕顔色.以螞蟻中台舉例:
語義色: 語義色可以用來代表一些特殊的語境狀态如消極的、批判的、積極的、中等的、傳達信息的.這裡以螞蟻中台舉例:
業務色: 業務色和産品中的具體業務有緊密關聯, 是由産品定義的.這裡以sap Erp系統舉例:
規則總在發展變化之中不斷進步優化,我們在了解規則的同時,也不要過于死闆,要靈活運用規則,讓規則服務于設計,并且嘗試在運用中不斷思考完善規則,這是是一個優秀的新時代設計師應該具備的素質.
關于按鈕設計規則的探讨,依然存在很多細節問題尚待解決,歡迎大家提出自己的見解,讓我們共同進步!
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!