目錄

平臺(tái)一致性的問題

按鈕的位置非常重要

為什么"確定"按鈕在右側(cè)效果更好

按鈕放置在角落還是放在一起？

結(jié)論

正文

大家好，我是西瓜～

這次我們聊一個(gè)設(shè)計(jì)知識(shí)點(diǎn)，這個(gè)知識(shí)點(diǎn)平日會(huì)被設(shè)計(jì)師忽視，因?yàn)樗^于默許，但我們應(yīng)該知道的是，很多默認(rèn)的東西也是有自身的知識(shí)結(jié)構(gòu)支撐，久而久之被人忽視了。

大家應(yīng)該都見到過彈窗、表單里的"確定"和"取消"按鈕吧，這兩個(gè)按鈕大家還記得會(huì)放在頁(yè)面中的哪個(gè)位置嗎？"確定"按鈕是完成任務(wù)的主要操作，而"取消"按鈕是輔助操作，它主要的作用是用于返回到起點(diǎn)屏幕而放棄任務(wù)。那么，根據(jù)它們的功能，最佳的按鈕順序是什么？"確定"按鈕應(yīng)該放在"取消"按鈕之前還是之后呢？

平臺(tái)一致性的問題

可能這時(shí)候很多設(shè)計(jì)師會(huì)按照習(xí)慣，選擇遵循一致性，采用一些常見的組件樣式進(jìn)行操作。雖然這看起來似乎是解決問題的方法，但實(shí)際上并非如此。這并沒有回答哪種位置對(duì)用戶更有效以及為什么，單純遵循已有組件并不足以讓設(shè)計(jì)師有更好的思維和主動(dòng)思考的意識(shí)。

"一致性"是設(shè)計(jì)師中常用的一個(gè)詞。然而，這常常也被用作一個(gè)借口，讓設(shè)計(jì)師不深入思考用戶面臨的設(shè)計(jì)問題，如果一個(gè)設(shè)計(jì)師都不知道為什么一致性的規(guī)則存在，那么遵循這種設(shè)計(jì)慣例又有什么意義呢？

如果某種設(shè)計(jì)慣例對(duì)用戶來說是有害的，那么設(shè)計(jì)師是否應(yīng)該盲目遵循它，僅僅因?yàn)橐非笠恢滦?？體驗(yàn)極差的設(shè)計(jì)樣式和結(jié)果是否應(yīng)該因?yàn)樵O(shè)計(jì)師希望迎合大家都默認(rèn)的設(shè)計(jì)一致性而繼續(xù)存在？這其實(shí)本質(zhì)就是個(gè)問題...

現(xiàn)在網(wǎng)上有很多組建和參考，都被設(shè)計(jì)師天天借鑒和廣泛使用，因?yàn)樗鼈冞m用于用戶。但關(guān)鍵在于，設(shè)計(jì)師永遠(yuǎn)不應(yīng)該滿足于墨守成規(guī)的選擇設(shè)計(jì)的一致性，將其作為做設(shè)計(jì)的唯一理由，我們關(guān)鍵還是要理解為什么應(yīng)該以某種方式而不是其他方式來設(shè)計(jì)用戶界面。

按鈕的位置非常重要

這時(shí)候有的設(shè)計(jì)師可能會(huì)主張通過賦予操作按鈕更多的視覺重量和清晰明了的標(biāo)簽來突出界面中的操作按鈕，而不是僅關(guān)注按鈕的位置，雖然操作按鈕的視覺重量和標(biāo)簽是需要考慮的重要設(shè)計(jì)方面，但它們并不是唯一的方面。

真正一名有思想，會(huì)獨(dú)立思考的設(shè)計(jì)師會(huì)綜合考慮每個(gè)設(shè)計(jì)方面對(duì)用戶的影響，而不只是關(guān)注其中的一個(gè)方面，對(duì)于設(shè)計(jì)師來說，最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關(guān)于"確定"/"取消"按鈕的位置進(jìn)行說明的原因。

為什么"確定"按鈕在右側(cè)效果更好

當(dāng)我們?cè)谑褂迷O(shè)計(jì)組建框架前進(jìn)行考慮時(shí)，你可能會(huì)開始明白哪個(gè)位置會(huì)對(duì)用戶效果更好一些，我們可以通過分析設(shè)計(jì)對(duì)用戶的影響來解決這個(gè)問題。

1、減少視覺注視

有些設(shè)計(jì)師認(rèn)為，將主要操作放在左側(cè)，在次要操作之前，對(duì)用戶來說更好，因?yàn)樗?，所以點(diǎn)擊所需時(shí)間更少，這看起來好像有點(diǎn)道理，但我們不能忽視一個(gè)問題，即在選擇要執(zhí)行的操作之前，用戶會(huì)查看所有選項(xiàng)，這意味著大多數(shù)用戶不會(huì)在不查看旁邊的次要操作按鈕的情況下盲目地點(diǎn)擊主要操作按鈕。

他們將首先看到左側(cè)的主要操作，然后再看右側(cè)的次要操作，然后他們會(huì)將視線轉(zhuǎn)回主要操作按鈕進(jìn)行點(diǎn)擊。這里總共涉及到三個(gè)視覺注視點(diǎn)，在多個(gè)方向上分散了用戶的注意力。

與將主要操作放在左側(cè)相比，將主要操作放在對(duì)話框的右側(cè)，將次要操作放在左側(cè)，用戶只需注視每個(gè)按鈕一次，并在主要操作按鈕上結(jié)束。這樣一來，視覺注視的數(shù)量就減少了，并且在一個(gè)方向上產(chǎn)生了更流暢的視覺流動(dòng)。

用戶只關(guān)注每個(gè)按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側(cè)可能會(huì)使用戶更容易點(diǎn)擊，但從用戶的心理過程和視覺注視速度來看，將主要操作放在對(duì)話框的右側(cè)實(shí)際上更快。

2、與預(yù)期的按鈕功能相匹配

當(dāng)用戶點(diǎn)擊“取消”操作按鈕時(shí)，他們期望的是產(chǎn)品不進(jìn)行任何操作，而是將他們返回到起始屏幕位置，因此，"取消"按鈕的功能類似于"返回"按鈕。

當(dāng)用戶點(diǎn)擊“確定”操作按鈕時(shí)，他們期望產(chǎn)品進(jìn)行按鈕所表示的操作，并將他們帶到下一個(gè)屏幕。因此，"確定"按鈕的功能類似于"下一步"按鈕，將次要操作按鈕放在左側(cè)，將主要操作按鈕放在右側(cè)，可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。

這類似于分頁(yè)按鈕的放置方式，將用戶帶到下一頁(yè)的按鈕位于右側(cè)，將用戶帶回先前頁(yè)面的按鈕位于左側(cè)。這種按鈕位置的安排是有效的，因?yàn)樗c用戶從左到右的閱讀和導(dǎo)航方向相吻合，其中右側(cè)是前進(jìn)方向，左側(cè)是后退方向。

3、"確定"讓用戶前進(jìn)到下一個(gè)屏幕，"取消"讓用戶返回到原始屏幕。

對(duì)話框中的"確定"和"取消"按鈕應(yīng)該遵循類似的交互模式，因?yàn)樗鼈兊墓δ茴愃朴诜猪?yè)按鈕，另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側(cè)，將次要操作放在左側(cè)，可以使對(duì)話框按鈕對(duì)用戶更易于理解和使用。

4、提供更高效的任務(wù)流程

將按鈕放置在對(duì)話框的右下角更容易被用戶點(diǎn)擊，因?yàn)檫@符合【古騰堡圖表】。在古騰堡圖表中，右下角區(qū)域是終端區(qū)域，用戶在掃視后的最終目的地。

將按鈕放在終端區(qū)域可以使用戶在視覺掃描時(shí)看到他們最后需要執(zhí)行的主要操作，這不僅改善了視覺流動(dòng)，還改善了任務(wù)流程。用戶在掃視過程中不會(huì)錯(cuò)過主要操作按鈕，當(dāng)他們經(jīng)過時(shí)，他們的目光會(huì)停留在上面，從而可以立即點(diǎn)擊它。

掃視對(duì)話框并采取行動(dòng)變得更快更容易，因?yàn)橛脩舻哪抗庾罱K會(huì)落在主要操作按鈕上。

按鈕放置在角落還是放在一起？

我們需要考慮另一個(gè)問題，那就是我們應(yīng)該將按鈕放在角落還是放在一起，當(dāng)將主要操作和次要操作放在對(duì)話框的角落時(shí)，這與左右導(dǎo)航方向相吻合，這是很好的映射。然而，由于"確定"和"取消"按鈕并不是導(dǎo)航按鈕，因此并不需要遵循方向映射，有時(shí)候這樣做可能帶來更多的弊端。

較大的視覺分離使得比較操作變得困難，并將一個(gè)操作與另一個(gè)操作隔離開來 如果產(chǎn)品頁(yè)面即將執(zhí)行用戶無法撤銷的關(guān)鍵操作，那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下，"取消"按鈕的功能可能類似于"上一步"按鈕，但它更重要，因?yàn)樗洚?dāng)安全按鈕以防止任何更改。

將"取消"按鈕放置在最左下角的危險(xiǎn)在于，由于兩個(gè)按鈕之間的視覺分離較大，可能會(huì)導(dǎo)致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個(gè)操作，以選擇最佳操作。  

一、前言

如果軟件操作速度提升了，那么在相同時(shí)間內(nèi)，我們可以有更多時(shí)間和精力用于方案的思考，提升工作效率。這也是我們經(jīng)?？吹胶芏郆端產(chǎn)品，在系統(tǒng)做快捷鍵的原因之一。在日常軟件的使用中，我們要盡可能的多使用快捷鍵，減少鼠標(biāo)操作。舉個(gè)實(shí)例：

比如，“保存” 用鼠標(biāo)操作：點(diǎn)擊界面開始菜單 - 調(diào)出下拉菜單 - 找到“保存”按鈕再點(diǎn)擊，這一系列動(dòng)作需要點(diǎn)擊 3 次鼠標(biāo)，花費(fèi)3～4 秒。如果使用快捷鍵，光靠下意識(shí)的動(dòng)作，就可以在 0.1 秒內(nèi)完成操作。

下面整理了一些常用的 Figma 快捷鍵使用技巧，幫助我們提升Figma的操作效率，更快更好的完成工作，節(jié)省時(shí)間，以便更專注地思考方案。

文章末尾附 Axure RP9、 Sketch提高效率的常用技巧。

二、Figma快捷鍵技巧

1、查看 Figma 快捷鍵

快捷鍵：【Ctrl + Shift + ?】 ，打開 Figma 的快捷鍵面板，可查看 Figma 的所有快捷鍵，方便快速查找。

2、等比例縮放

快捷鍵是【K】，在設(shè)計(jì)中縮放是經(jīng)常要用到的功能，在 Figma 中，按一下【K】鍵進(jìn)行縮放，就可以完全保證比例。

3、快速畫出環(huán)形進(jìn)度條

快速畫出環(huán)形進(jìn)度條的方法，先畫一個(gè)圓，然后鼠標(biāo)拖動(dòng)兩下就完成了。如下圖：

4、圖片快速填充

在桌面或文件夾，選擇需要填充的圖片【Command + C】。點(diǎn)選Figma中待填充元素【Command + V】。填充成功，如下圖：

5、復(fù)制粘貼樣式

選中一個(gè)已經(jīng)調(diào)整好樣式的元素（圖形或文字），第一步：【Command + option + C】，第二步：【Command + option + V】就可以把樣式復(fù)制粘貼下來。如下圖：

6、快速定位組件母版

對(duì)于使用組件的元素，在調(diào)整的時(shí)候需要修改組件母版，才會(huì)對(duì)每個(gè)組件生效。當(dāng)有很多組件時(shí)，我們可以通過任意組件，點(diǎn)選右側(cè)“跳轉(zhuǎn)回組件母版”icon，快速定位至母版。如下圖：

第一步：點(diǎn)選右側(cè)“跳轉(zhuǎn)到組件母版”icon，右側(cè)紅框處

第二步：自動(dòng)定位到該組件母版

7、快速整理表格元素

選擇一組陣列中的多個(gè)元素之后，可以隨意交換任意兩個(gè)元素之間的位置，其他的不受影響，還能直接拖動(dòng)調(diào)整它們的間距。如下圖：

8、快速批量修改顏色

快速批量修改顏色。比如下面九個(gè)元素中有三個(gè)是紅色，當(dāng)我想要批量修改這三個(gè)紅色元素的時(shí)候，我不需要一個(gè)個(gè)選擇這三個(gè)元素，只需要批量選擇，然后在右側(cè)屬性欄那里，選擇想修改的那個(gè)紅色，直接改顏色，三個(gè)元素的顏色就會(huì)一起修改了。

9、圖層折疊瀏覽

快捷鍵【Alt+L】，可以直接將所有圖層折疊起來，這樣，不管之前展開了多少層，都能直接折疊，方便快速瀏覽整個(gè)系統(tǒng)的全貌。

10、快速瀏覽圖層

使用鍵盤快捷鍵快速瀏覽圖層?？旖萱I【Tab】快速向 下 切換選中圖層，【Shift+Tab】快速向 上 切換選中圖層。

11、快速選取顏色樣式

使用顏色樣式時(shí)，這里有一個(gè)小按鈕（下圖紅框標(biāo)出），可以快速得在列表樣式和網(wǎng)格樣式之間進(jìn)行切換，使用列表樣式能夠更方便瀏覽使用了哪些顏色，方便進(jìn)行管理。

12、用吸色工具預(yù)覽顏色

吸色工具的快捷鍵是【i】，當(dāng)你按住【i】鍵不動(dòng)時(shí)，移動(dòng)光標(biāo)，就能預(yù)覽顏色，而不是直接取色了，預(yù)覽的顏色就如下圖，是展示在右上角的。

13、重復(fù)上一步操作

快捷鍵是 【cmd/ctrl + D】，如下圖所示，向右下方復(fù)制一個(gè)元素，然后使用【cmd/ctrl + D】，會(huì)繼續(xù)向右下角復(fù)制元素，重復(fù)的是相關(guān)對(duì)象和操作中設(shè)計(jì)到的所有元素。

14、自動(dòng)行高

如果設(shè)計(jì)時(shí)輸入了一些文本，行高有問題，但是暫時(shí)又沒有很明確的行高參數(shù)，這個(gè)時(shí)候，只需要在行高這里輸入 auto，點(diǎn)擊回車，就可以把這些文字設(shè)置成自動(dòng)行高了。如下圖紅框位置：