中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：按鈕是界面中運用非常廣泛的一類組件，好的按鈕設(shè)計，能給用戶帶來更好的整體觀感和體驗度。那么要怎么做按鈕設(shè)計呢？一起來看一下吧。

提到按鈕，你可能第一反應(yīng)是“就這？？ so easy！ ”，在深入了解按鈕前我也這么想，但是在實際工作中你會發(fā)現(xiàn)，按鈕的學(xué)問比我們想象中的大，如果把設(shè)計精美的界面比作一首歌，那么按鈕就是音符，是基礎(chǔ)又極為重要的部分。

按鈕是界面中運用非常廣泛的一類組件， 按鈕的設(shè)計正確與否不僅影響用戶的正常業(yè)務(wù)流程，更影響了用戶對于產(chǎn)品的整體感觀和體驗度。

但是在企業(yè)級的軟件中，由于場景角色的復(fù)雜化多元化，按鈕的運用也可能面臨著一些問題和考驗，你是否曾經(jīng)遇到過這樣的疑問：

• 圖標(biāo)按鈕和文字按鈕該用哪一種呢？
• 大量按鈕需求出現(xiàn)時，該如何解決畫面過于擁擠的問題？
• 按鈕的排序標(biāo)準(zhǔn)？
• 什么情況下該使用哪種類型的按鈕？

接下來，讓我們一起全面的了解一下按鈕的規(guī)范。

01 按鈕起源

車爾尼雪夫斯基曾說：“藝術(shù)來源于現(xiàn)實，又高于現(xiàn)實”。 設(shè)計也不例外，比如界面中的按鈕來源于現(xiàn)實世界中的物理按鈕，如撥電話時的撥通按鍵，點爐灶時的旋轉(zhuǎn)開關(guān)等等，由于按鈕的設(shè)計貼合現(xiàn)實生活中真實物體的外觀，降低了用戶的認(rèn)知和理解成本，所以用戶很快就學(xué)會如何操作。

如今市面上常見的按鈕以扁平化風(fēng)格居多， 但是在互聯(lián)網(wǎng)發(fā)展早期，擬物化按鈕十分流行， 它就是“設(shè)計來源于現(xiàn)實”的體現(xiàn)，只不過后來慢慢的，為了適應(yīng)效率高、更迭快的互聯(lián)網(wǎng)時代，擬物風(fēng)格在時代的潮流中逐漸被扁平風(fēng)格取代。

02 按鈕定義

在UI設(shè)計中，按鈕是一個明確指示交互行為動作的組件，主要用于觸發(fā)某一個即時操作，很多時候，我們需要采取下一步行動或返回到上一步，都要通過按鈕（部分場景可用手勢交互）來完成。

03 按鈕類型

按鈕天生被設(shè)計來讓用戶產(chǎn)生點擊的欲望，因此在設(shè)計師的工具集中，按鈕是視覺上最引人矚目的控件，于是它有了不計其數(shù)的變體。去設(shè)計網(wǎng)站上隨便一搜，你就能看到眼花繚亂的按鈕樣式，這里筆者參照B端規(guī)范去歸納按鈕的分類，分別按照功能、優(yōu)先級、外觀、組成元素、特殊按鈕等類型分類。

1. 功能

按照功能的差異性可分為簡單按鈕、狀態(tài)切換按鈕、組合按鈕、菜單按鈕。

1）簡單按鈕

簡單按鈕一次只觸發(fā)一個動作，它通常指代特定的行為動作如創(chuàng)建、編輯、保存、通過、拒絕、接受、確定、取消等等，它也是按鈕中最常見的類型。

2）狀態(tài)切換按鈕（Toggle Button）

狀態(tài)切換按鈕，英文叫做toggle button， 「Toggle」一詞對應(yīng)帶有短柄的撥動式開關(guān)，撥動它的時候，能夠在兩種不同的狀態(tài)之間切換。

狀態(tài)切換按鈕， 通過激活或者置灰一個對象，在觸發(fā)該動作的同時， 顯示了用戶當(dāng)前的狀態(tài)， 并且它的交互方式允許用戶在兩種狀態(tài)中自由切換，還節(jié)約空間。

拿最常見的switch開關(guān)來說， Toggle button在實際使用中常常遇到A方案的問題，乍一看好像沒什么問題，但是實際使用中，用戶會很迷惑，究竟這個On/Off代表當(dāng)前的狀態(tài)還是執(zhí)行的動作呢？

B方案在A方案的基礎(chǔ)上，給On加了綠色，表明當(dāng)前的激活狀態(tài)，但是初級用戶有可能沒辦法立刻理解顏色代表狀態(tài)還是按鈕的操作，在實踐了幾次之后，建立了顏色和按鈕狀態(tài)的聯(lián)系，慢慢的習(xí)慣了這樣的用法，B方案也是目前比較流行的方案。

C方案從用戶體驗的角度來說是最佳方案， 它做到了把狀態(tài)和操作清楚的區(qū)分開來，讓用戶一目了然，不會感到迷惑。

3）組合按鈕（Segmented button）

組合按鈕允許用戶從一組選項中選擇一個動作， 舉個例子，切換表格的視圖： 柱狀圖、餅狀圖、線性圖，一個組合中的按鈕通常是功能關(guān)聯(lián)緊密的一系列圖標(biāo)。

4）菜單按鈕（Menu button）

菜單按鈕是菜單中不可分割的一部分，菜單本身可以被單獨考慮，但菜單按鈕無法單獨存在。點擊菜單按鈕的箭頭，便可以彈出一個下拉框，從一堆動作中選擇一個動作。

菜單按鈕可以分為常規(guī)菜單按鈕和帶分割線的菜單按鈕：

常規(guī)菜單按鈕：當(dāng)用戶點擊按鈕后，菜單選項彈出，這是默認(rèn)的類型。

帶分割線的菜單按鈕：帶分割線的菜單按鈕被分為兩個區(qū)域： 文字標(biāo)簽和下拉圖標(biāo)。 文字標(biāo)簽的內(nèi)容通常是默認(rèn)選項（被頻繁使用到的動作），點擊文字標(biāo)簽就會直接觸發(fā)這個動作，而如果點擊下拉按鈕則會彈出選項。

這還有一個容易被設(shè)計師忽略的思考點，就是文字標(biāo)簽是否需要變化，文字標(biāo)簽的兩種交互變化：

1. 默認(rèn)文字標(biāo)簽固定。無論你最終在下拉框中選擇了什么動作，文字標(biāo)簽不會改變
2. 默認(rèn)文字標(biāo)簽會隨你的點擊改變。 當(dāng)你選擇和默認(rèn)文字標(biāo)簽不同的選項時， 在點擊動作完成后，菜單中的標(biāo)簽也會隨之改變

通常來說，如果在需要告知用戶自己所處的狀態(tài)、當(dāng)前頁面處所的狀態(tài)、當(dāng)前正在使用的工具時，菜單按鈕的文字標(biāo)簽就要改變，常見的有賬戶切換、篩選過濾、工具使用等等。

除此之外的簡單情形，文字標(biāo)簽則默認(rèn)不改變。

拿飛書右上角的“新建”按鈕舉個例子，點擊新建后，彈出下拉框，當(dāng)你選擇其中任意一個選項，系統(tǒng)就會完成這個任務(wù)， 所以這里不需要改變文字標(biāo)簽。

再拿Figma中的篩選菜單按鈕舉個例子，點擊篩選的因素，然后標(biāo)簽就改變成當(dāng)前應(yīng)用的此篩選因素。

2. 優(yōu)先級

1）主按鈕（Primary button）

在日常場景中，主按鈕是頁面中按鈕區(qū)最為核心的操作按鈕， 通常使用主題色填充容器吸引用戶視線聚焦， 引導(dǎo)用戶去關(guān)注、操作主流程，強調(diào)性較高。

一個按鈕區(qū)最多應(yīng)該使用一個主按鈕。那么一個頁面可以有多個主按鈕嗎？因為沒有足夠的反面案例支撐一個頁面不能有多個主按鈕，比較建議在一個焦點任務(wù)中，最多一個主按鈕，也可以沒有主按鈕。

2）次級按鈕（Secondary button）

次級按鈕是在日常場景中運用最廣泛的的一種按鈕， 視覺呈現(xiàn)上相較于主按鈕較“弱”， 強調(diào)性中等， 可用于所有次要的按鈕行動，如果我們有許多同等重要性的行動在一個屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠(yuǎn)是最安全的選擇。

3）三級按鈕（Tertiary button）

三級按鈕是次于次級按鈕重要性的按鈕。 比較適合諸如“取消”、“還原”等無需強調(diào)的操作， 比如表格操作列這類無需強調(diào)的操作也推薦使用。

3. 外觀

按鈕外形五花八門，這里介紹B端常見的按鈕類型，按照外觀有無填充、描邊差異、顏色差異大致分為以下類別：

• 強調(diào)按鈕（Emphasized Button）： 強調(diào)按鈕會有一個強調(diào)色的背景填充，用來強調(diào)頁面中重要的按鈕，通常主按鈕是強調(diào)按鈕
• 幽靈按鈕（Ghost Button）：幽靈按鈕有描邊， 但是沒有背景填充， 通常次級按鈕是幽靈按鈕
• 標(biāo)準(zhǔn)按鈕（Standard Button）： 除了特殊按鈕之外， 所有按鈕都是按照標(biāo)準(zhǔn)模式下規(guī)范
• 積極語義按鈕（Positive Button）：積極語義按鈕通常用積極語義色（通常是綠色）表示， 比如 接受、通過、同意這一類正面的動作
• 消極語義按鈕（Negative Button）： 消極語義按鈕通常用消極語義色（通常是紅色）表示， 比如 拒絕、不通過、不同意、錯誤這一類負(fù)面的動作
• 警告語義按鈕（Attention Button）： 警告語義按鈕通常用警告語義色（通常是橙色）表示， 比如 警告、提醒這一類引起額外注意的動作
• 透明按鈕（Transparent Button）： 透明按鈕沒有描邊， 也沒有背景填充，通常三級按鈕是透明按鈕

4. 組成元素

按照組成元素可分為圖標(biāo)&amp；文字、僅圖標(biāo)、僅文字：

• 圖標(biāo)&amp；文字（ Icon + Text ）： 同時包含圖標(biāo)和文字的按鈕， 這種類型的按鈕不推薦使用，因為會占據(jù)太多的空間，顯得繁冗
• 僅圖標(biāo)（ Icon only）： 只有圖標(biāo)的按鈕
• 僅文字（Text only）： 只有文字的按鈕

5. 特殊按鈕類型

有的按鈕只出現(xiàn)在特定的場景下，比如像PS的工具欄：當(dāng)鼠標(biāo)懸停在某個工具（通常是icon表示）上時，下方會彈出該icon的快捷鍵和文字解釋（tooltip）； 再比如說系統(tǒng)收到新消息時，消息圖標(biāo)的右上角會顯示收到的信息數(shù)量……特殊按鈕類型包括比如角標(biāo)提示按鈕、默認(rèn)按鈕、快捷鍵提示按鈕等等，這里只是舉幾個例子說明。

1）角標(biāo)提示按鈕（Badge on Button）

• 從其他頁面收集的信息數(shù)量可以通過角標(biāo)提示的方式顯示在按鈕上， 由此觸發(fā)一系列的行為動作， 角標(biāo)在視覺上可以快速捕捉人們的目光，吸引用戶注意力
• 角標(biāo)通常和以下的按鈕類型組合： 強調(diào)型按鈕、幽靈按鈕、透明按鈕
• 角標(biāo)的數(shù)字必須是整數(shù)如1，2，3，4，如果數(shù)字超過四位數(shù)，如9999，那么角標(biāo)中顯示999+
• 角標(biāo)的位置不固定，具體的取決于內(nèi)容密度，比如在一個上下空間較為寬松的模式下，角標(biāo)可以放在右上角， 如果處于上下空間較為擁擠的情況下，角標(biāo)比較適合放在右邊

2）默認(rèn)按鈕（Default button）

默認(rèn)狀態(tài)下的按鈕， 可以通過Enter/Ctrl + Enter快捷鍵觸發(fā)， 無論此時聚焦中心在哪里、是否聚焦， 大多數(shù)情況下， 默認(rèn)按鈕是強調(diào)按鈕或者是接受按鈕，為了便于識別，我們可以賦予它與眾不同的圓角。

3）快捷鍵提示按鈕（Button Shortcuts）

當(dāng)一個按鈕有對應(yīng)的快捷鍵時，鼠標(biāo)在懸停狀態(tài)下會顯示該按鈕的快捷鍵提示， 快捷鍵提示位置也許會出現(xiàn)在按鈕的上方或者下方，這取決于鼠標(biāo)停留的位置。

04 按鈕交互狀態(tài)

1. 五種按鈕基本狀態(tài)

試著把按鈕想象成嬰兒Q彈的臉蛋，你按下去的時候，它會凹下去一塊，當(dāng)你放手時，它會“嘣”的一聲彈回來，恢復(fù)原樣，這種特性叫做“受范性”。

如果一個用戶點擊了按鈕，可按鈕在視覺上沒有產(chǎn)生任何變化，這個時候用戶就會開始懷疑自己到底有沒有按下這個按鈕，甚至?xí)X得這個按鈕是不是壞掉了？？ 盡管單一狀態(tài)的按鈕可以大大減少開發(fā)難度，但是會造成非常糟糕的用戶體驗。

用戶渴望按鈕發(fā)生改變，這叫做“受范性反應(yīng)”， 常見的按鈕的狀態(tài)改變可以被分為常規(guī)、懸停、按下、禁用、聚焦：

• 常規(guī)（Regular）： 不進行任何交互動作時的按鈕狀態(tài)。
• 懸停（Hover）： 鼠標(biāo)在按鈕上方停留，但是還沒有點擊前的狀態(tài)，這個狀態(tài)是在電腦端才有的按鈕狀態(tài)，手機端沒有辦法懸停。
• 按下（Pressed）： 點擊按鈕瞬間的狀態(tài)。
• 禁用（Disabled）： 無法點擊該按鈕的狀態(tài)。
• 聚焦（Focused）： 按鈕獲得接收用戶鼠標(biāo)或鍵盤輸入的能力。 Focus狀態(tài)是一個非常重要的交互形式，但很多設(shè)計師都會忽略，甚至在很多平臺上會忽略這一點，導(dǎo)致使用 Tab 鍵無法獲取聚焦的反饋， 假如去除這類反饋，會導(dǎo)致用戶無法用方向鍵控制光標(biāo)位置，在很大程度上降低用戶使用的可能性，比如說對于視障人士來說，鍵盤是他們依賴的交互方式。

除了這五種最基本的按鈕交互狀態(tài)外， 還有一些在特殊的情形下才出現(xiàn)的按鈕狀態(tài)，比如說：

• 選中懸停（Hover on Selected）
• 聚焦懸停（Hover on Focused）
• 按下懸停（Hover on Pressed）
• 加載（Loading）

2. 不同按鈕交互狀態(tài)的差異

• 狀態(tài)切換按鈕在等到下一次按壓前會仍然維持按壓的狀態(tài)
• 組合按鈕中被選中的選項會維持激活的狀態(tài)，知道用戶做出了其他的選擇
• 菜單按鈕被激活后會彈出菜單選項
• 帶分割線的菜單按鈕， 如果按下文字標(biāo)簽，就直接出發(fā)該動作，如果按下下拉按鈕，則彈出菜單選項

05 按鈕使用場景

1. 用戶閱讀模式

現(xiàn)在我們了解按鈕的分類和具體用法，但是在實際工作上可能常常會遇到“這個按鈕該放在那個位置？”“這個按鈕和那個按鈕我應(yīng)該那個放在左邊哪個放在右邊？”等等令人糾結(jié)的問題， 先不著急，萬變不離其宗，我們先來看看用戶在瀏覽界面時的一些閱讀模式：

1）F-Pattern

F模式遵循字母F的形狀，也因此得名， Jacob Nielsen 在進行眼球追蹤研究后首次提出了這種模式， 容易被大家忽略的一點是， 他的眼動研究是針對如報紙和文章這樣的密集文本和大量搜索結(jié)果頁面進行的。

與其他模式一樣，眼睛從頂部/左側(cè)開始，水平移動到頂部/右側(cè)，然后回到左側(cè)邊緣，接著再次向右水平掃描， 但是第二次掃描不會像第一次那么遠(yuǎn)， 此后的眼睛掃描按照這樣的規(guī)律進行， 最終眼睛在向下移動時會停留在左邊緣附近。

2）Z-Pattern

Z模式有時被稱為反向模式， 它的布局遵循字母Z的形狀， 用戶將從頂部/左側(cè)開始，水平移動到頂部/右側(cè)，然后對角線移動到底部/左側(cè)，然后完成另一個水平移動到底部/右側(cè)。

與古騰堡圖表的主要區(qū)別在于， Z模式下的用戶將穿過兩個低注意力區(qū)， 而古登堡是從第一視覺落腳點到最終視覺落腳點。

鋸齒模式：我們稍微擴展一下Z模式，不妨把它看作是一系列小Z運動，而不是一個大Z運動， 這其實我們正常情況下閱讀大量文本的方式， 這一系列Z運動有時被稱為之字形圖案， 如果我們繼續(xù)在圖案中添加更多的之字形和鋸齒形， 隨著Z的對角線部分變得越來越淺，我們最終會進行一系列近水平的左右運動。

三角模式：Z模式還衍生出所謂的金三角形圖案， 如果用戶進行第一個水平和第一個對角線運動，然后關(guān)閉形狀，用戶最終會得到一個直角三角形。

3）古登堡圖表

古登堡圖表描述了在平鋪式信息情境下下眼動的一般規(guī)律，如閱讀小說或者報紙時。

古登堡圖表將頁面布局分為4個象限：

• 第一視覺落腳點（第二象限）
• 強休耕區(qū)域（第一象限）
• 弱休耕區(qū)域（第三象限）
• 最終視覺落腳點（第四象限）

該模式表明，眼睛將以一系列水平運動橫掃頁面， 每次掃蕩從左邊邊緣開始，向右邊緣移動得更近一點。整體運動是眼睛從主區(qū)域移動到終端區(qū)域，這條路徑被稱為閱讀重力。

古騰堡圖表明，強休耕區(qū)和弱休耕區(qū)位于這條閱讀重力路徑之外，除非以某種方式在視覺上強調(diào)，否則受到的關(guān)注很少， 重要元素應(yīng)沿閱讀重力路徑放置。

4）焦點模式

焦點模式是你完全控制的模式， 一旦你給你的設(shè)計元素不同的視覺權(quán)重，并創(chuàng)建層次結(jié)構(gòu)和流程，上面的模式就不再適用。

焦點模式表明，人們將首先查看頁面上最占主導(dǎo)地位的元素（視覺重量最大的元素或區(qū)域）。

從那里，眼睛將沿著從主導(dǎo)元素到設(shè)計中其他焦點的路徑。順序?qū)⑷Q于這些焦點的相對權(quán)重，以及指示下一步要看的任何視覺線索。

2. 界面布局

一般頁面可分為3個部分， 標(biāo)題區(qū)、內(nèi)容區(qū)、頁腳區(qū)。

1）標(biāo)題區(qū)

標(biāo)題區(qū)放置是影響全局行為的按鈕（如： 編輯、刪除）。

規(guī)則：

• 左上角作為第一視覺落點，用來放置標(biāo)題，按鈕群整體右對齊
• 標(biāo)題區(qū)動作始終被顯示， 不隨著滾動條而滾動
• 按鈕群從左到右的羅列規(guī)則： 業(yè)務(wù)動作（如： 編輯、刪除） 、管理內(nèi)容（如： 篩選）、管理頁面布局（如： 全屏）、一般的動作（如： 分享）
• 一個頁面只有一個主按鈕（使用強調(diào)按鈕風(fēng)格）， 主按鈕放在按鈕區(qū)最靠左的位置， 當(dāng)頁腳區(qū)按鈕和標(biāo)題區(qū)按鈕同時存在時， 我們更傾向于把主按鈕放在頁腳區(qū)
• 我們把影響業(yè)務(wù)整體進程的按鈕放在頁腳區(qū)，比如保存、提交、發(fā)送

2）內(nèi)容區(qū)

內(nèi)容區(qū)放置的是只影響該內(nèi)容區(qū)的按鈕， 內(nèi)容的形式有很多，這里拿圖表和表格舉例說明，按鈕的一些規(guī)律。

表格按鈕通常頂部右對齊，常見的按鈕功能包括：

• 在表格中添加一行新的內(nèi)容
• 編輯/刪除表格中選中的行
• 切換表格到編輯模式
• 控制表格設(shè)置選項， 比如篩選或者排序

如果一個動作只影響表格中的一行，那么該動作按鈕就放在這一行。

圖表按鈕頂部右對齊，常見的按鈕功能有：

• 切換圖表的類型
• 在表格和圖表視圖間切換
• 標(biāo)準(zhǔn)按鈕如： 圖例、個性化菜單、切換全屏模式

3）頁腳區(qū)

頁腳區(qū)的動作通常是影響業(yè)務(wù)流程進度的， 代表一個流程中的步驟， 如： 提交、保存。 它可以是用戶想要完成的東西（如保存一個表格）， 或者結(jié)束一個業(yè)務(wù)流程的（如 拒絕請求， 提交表單）。

頁腳區(qū)的動作也可以包含替換當(dāng)前路徑的動作（如： 返回）， 或者跳出當(dāng)前業(yè)務(wù)的動作（如： 取消）。

頁腳區(qū)的動作按鈕的規(guī)律是：

• 按鈕群整體右對齊
• 動作始終被顯示， 不隨著滾動條而滾動
• 按鈕群從左到右的羅列規(guī)則： 前進路徑（如： 提交）、可替換路徑（如： 返回）、消極路徑、跳出當(dāng)前頁面而不對其做任何改變（如： 取消）

3. 如何處理數(shù)量很多的按鈕

當(dāng)產(chǎn)品給出很多的按鈕需求時，通常第一步是按照功能分類，把功能相類似的按鈕分在一起，可用menu button 的形式放在一起，如“導(dǎo)出為excel”和“導(dǎo)出為PDF”可以合并在一起，這樣做的益處是，一方面節(jié)省寶貴的屏幕空間，使得頁面看上去整潔清晰；另一方面讓用戶更快速的做出選擇。

如果按鈕實在太多了，也沒有一些可以合并成一個menu button的選擇， 那么這個時候可以考慮使用“更多”的展開按鈕（overflow button），而選擇哪些動作放進“更多”，這個取決于產(chǎn)品經(jīng)理給出的優(yōu)先級。

4. 如何在圖標(biāo)和文字之間做選擇

從現(xiàn)象層來看，圖標(biāo)與信息就是信息的兩種不同表現(xiàn)方式。兩個表現(xiàn)方式都各自有各自的特點，所以在設(shè)計過程中，應(yīng)根據(jù)具體的場景去選擇合適的表現(xiàn)方式。

通常情況下，我們不推薦圖標(biāo)和文字一起使用， 比如fiori規(guī)范中要求盡量使用圖標(biāo)或者文字，避免繁冗。

1）圖標(biāo)

圖標(biāo)作為現(xiàn)在使用較多的信息表現(xiàn)方式，具有以下幾個特點：

①優(yōu)點

• 節(jié)約空間： 同等空間下，圖標(biāo)所傳遞的信息量會更大。而移動設(shè)備的屏幕大小，本身就存在著限制。所以同等空間下，為了信息傳遞的準(zhǔn)確性，可以優(yōu)先考慮圖標(biāo)這種信息傳遞方式。
• 快速定位： 圖標(biāo)圖像更容易吸引用戶的目光，讓用戶可以在短時間內(nèi)定位到圖標(biāo)所在的位置。
• 易理解： 大腦更容易處理圖像信息，更符合人的認(rèn)知規(guī)律。

②缺點

不夠準(zhǔn)確，容易有歧義。再優(yōu)秀的設(shè)計師也不能設(shè)計出一個能夠另所有人都理解的圖標(biāo)，因為它永遠(yuǎn)沒有文字來的直白和準(zhǔn)確。

不過為了彌補圖標(biāo)的這個缺點，設(shè)計師們發(fā)明了tooltip，當(dāng)你懸浮在圖標(biāo)上，附近會顯示它的說明文字，幫助初次使用者熟悉工具。

1）文字

①優(yōu)點

準(zhǔn)確性： 文字相較于圖標(biāo)，其最大的特點，就是信息傳遞的準(zhǔn)確性高。人腦在認(rèn)知文字時，首先會將其轉(zhuǎn)化為腦中與之對應(yīng)的圖案，然后再進行理解記憶。

雖然每個個體腦中的圖案可能存在差別，但這些圖案本身對于個體來說，卻是唯一的，這種唯一的確定性，就保證了文字信息傳遞的準(zhǔn)確性。

②缺點

• 缺少美感： 文字相對于圖案來說，傳遞的信息量少。如果過多的使用文字，就會顯得相對比較死板，缺少一定的美感。
• 在國際性的軟件上，語言在轉(zhuǎn)換時會有字?jǐn)?shù)上的差異，這種差異很可能是三倍字長，所以文字要求簡潔，但是圖標(biāo)就不會這樣的問題。

3）圖標(biāo)和文字按鈕應(yīng)當(dāng)遵循的原則

①文字按鈕：

• 主按鈕、次級按鈕、語義按鈕（積極語義/消極語義）使用文字按鈕
• 文字簡短、高效傳達信息
• 一致性： 同一種行為動作出現(xiàn)在不同的地方要用一個詞語表示

②圖標(biāo)按鈕：

• 使用通用的、標(biāo)準(zhǔn)的帶隱喻的圖標(biāo)
• 當(dāng)鼠標(biāo)懸停在圖標(biāo)上方時， 給一個文字提示（tooltip）， 告知用戶圖標(biāo)的具體含義，避免用戶產(chǎn)生歧義

06 按鈕細(xì)節(jié)

接下來，咱們來庖丁解牛拆解一下按鈕，按鈕可大致分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本組成元素，每種元素的視覺呈現(xiàn)都會反過來影響按鈕的外觀。

不同風(fēng)格、不同氣質(zhì)的產(chǎn)品，需要相應(yīng)處理影響按鈕視覺呈現(xiàn)的各個元素。

1. 尺寸

在PC端設(shè)計按鈕時，因為鼠標(biāo)的精準(zhǔn)點擊，按鈕尺寸可以設(shè)計的小一些，同時也能讓整個界面看起來更加精致，只要不影響操作，36px~48px范圍內(nèi)的按鈕是比較常見的。

然而移動端的按鈕設(shè)計，考慮到手指點擊操作的實際范圍， 于是在iOS的設(shè)計規(guī)范中， 將按鈕的最小點擊區(qū)域規(guī)定為44pt，一旦小于這個數(shù)值，操作時就會出現(xiàn)精準(zhǔn)度較低的情況，導(dǎo)致操作失誤或無效。

但是在實際的IOS界面中，并未嚴(yán)格遵守這個要求， 因為很多按鈕的權(quán)重較低， 并且如文字按鈕， 因為它永遠(yuǎn)不可能達到這樣子的標(biāo)準(zhǔn)（但是可以加大熱區(qū)范圍）。

每個平臺都會有多種型號的按鈕，一般按照尺寸可以分為：超大按鈕、大按鈕、中按鈕、小按鈕，超小按鈕，這個可以根據(jù)自己平臺的需要來制定多少種。

• 高度： 每一種規(guī)格的按鈕高度是固定的
• 寬度： 按鈕有最大寬度和最小寬度限制
• 最大寬度： 在手機端，最大寬度就是頁面寬度減去安全邊距（下圖兩個紅線間距就是安全邊距， 常見的安全邊距有10pt、12pt、16pt等；在電腦端，通常沒有最大寬度的說法，因為按鈕本身的字?jǐn)?shù)不多，所以按鈕最長也不會像根釣魚竿一樣， 但是正常情況下按鈕有固定的padding（內(nèi)邊距）
• 最小寬度： 根據(jù)各平臺屬性來制定即可

而當(dāng)按鈕寬度處于最小寬度和最大寬度之間時，按鈕的長度是根據(jù)內(nèi)容的長度而做變化的，只需設(shè)定單個元素到按鈕左右邊距、多個元素之間邊距Padding.

這里有一個注意事項： 在設(shè)計軟件中，邊框默認(rèn)是居中邊框的，但是在開發(fā)中，沒有居中邊框這一種說法，默認(rèn)是內(nèi)邊框， 所以按鈕的元素邊距（Padding）是包括描邊大小的。

2. 面性/線性

通常主按鈕會使用面性， 而線性按鈕也被稱為幽靈按鈕，在視覺上，線性按鈕在視覺上引起的注意力弱于面性圖標(biāo)。

3. 圓角

設(shè)計過程中的每一個小決定都會影響整體設(shè)計的感覺。 按鈕就是其中很重要的一環(huán)。 圓角按鈕所帶來的不僅僅是圓角大小的視覺表現(xiàn)，更多是影響著用戶對整個產(chǎn)品整體認(rèn)知，以及用戶在使用產(chǎn)品過程中的具體感受， 合理運用一定圓角的按鈕對整個產(chǎn)品使用體驗的提升大有裨益。

這里的圓角不僅僅局限于按鈕，推而廣之適用產(chǎn)品中的每個元素，提前合理的規(guī)劃各種元素圓角，讓產(chǎn)品整體看上去一致、和諧、美觀。

0px圓角： 完全的直角是一類經(jīng)典用法， 塑造嚴(yán)肅、專業(yè)的界面。 為了整體界面的一致性，其他的元素也需要有鋒利的幾何棱角感。

3-4px圓角： 這一類圓角是最安全的選擇。在很多大廠規(guī)范中， 都使用這一類的圓角， 可以說是比較標(biāo)準(zhǔn)的用法，它比完全的直角要友好。

8-14px圓角： 這一類圓角適用于卡片， 因為圓角比直角的識別度高的多， 直角的卡片看上去更鋒利， 用戶的目光通常是劃過它們而不是目光在它們身上逗留。

全圓角： 全圓角的按鈕和一般圓角的按鈕相比， 全圓角更適合在空間足夠的情況下， 作為一個CTA（call-to-action）按鈕， 引導(dǎo)用戶特定的行為。 而且，在列表、卡片布局的情況下， 全圓角發(fā)揮的更好。

如果平臺的按鈕是圓角矩形，就需要制定按鈕圓角的大小，但是并不是所有按鈕的圓角大小都是一樣的，需要按鈕大小比例來制定。

在大多數(shù)界面設(shè)計中，我們通常所見到按鈕還是小圓角和全圓角居多，也有部分按鈕完全直角，需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來選擇最合適的圓角類型。

4. 顏色

按鈕的大小、形狀、顏 色三個維度中，人眼是對顏色信息最為敏感的。在一個頁面中，突出一個元素的方式有多種，其中最簡潔有效的方式就是用顏色進行突出。

顏色包含了色相、飽和度和明度三種屬性，改變顏色的不同屬性，都會對按鈕的表意產(chǎn)生影響；同時，不同的顏色代表著不同的含義，配色時需要加以注意。

1）基礎(chǔ)色

按鈕顏色和產(chǎn)品整體顏色 （品牌色） 相關(guān)， 由品牌色衍生出一系列基礎(chǔ)色， 用于展示不同狀態(tài)下按鈕顏色。以螞蟻中臺舉例：

2）語義色

語義色可以用來代表一些特殊的語境狀態(tài)如消極的、批判的、積極的、中等的、傳達信息的。這里以螞蟻中臺舉例：

3）業(yè)務(wù)色：

業(yè)務(wù)色和產(chǎn)品中的具體業(yè)務(wù)有緊密關(guān)聯(lián)， 是由產(chǎn)品定義的。這里以sap Erp系統(tǒng)舉例：

07 結(jié)語

規(guī)則總在發(fā)展變化之中不斷進步優(yōu)化，我們在了解規(guī)則的同時，也不要過于死板，要靈活運用規(guī)則，讓規(guī)則服務(wù)于設(shè)計，并且嘗試在運用中不斷思考完善規(guī)則，這是是一個優(yōu)秀的新時代設(shè)計師應(yīng)該具備的素質(zhì)。

關(guān)于按鈕設(shè)計規(guī)則的探討，依然存在很多細(xì)節(jié)問題尚待解決，歡迎大家提出自己的見解，讓我們共同進步!

本文由郝小七指導(dǎo)http：//www.aharts.cn/u/917803

本文由@自來卷夏憶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。