UI設(shè)計(jì)3天時(shí)間完成~

這個(gè)界面不難的，按照我的交互稿上個(gè)色就好了~

簡(jiǎn)單設(shè)計(jì)一下，馬上給我~

再調(diào)幾個(gè)顏色給我選一下~

模塊先設(shè)計(jì)，顏色最后調(diào)一下也很快的~

…

熟悉吧，以上是作為UI設(shè)計(jì)師的你，幾乎每天都能聽(tīng)到的把。拜托，就算是路邊打印店，讓人家?guī)湍阍O(shè)計(jì)個(gè)名片，你也會(huì)問(wèn)人家什么時(shí)候能做好吧。難不成設(shè)計(jì)這么好做?要不你行你上?我做不了~

慢著，我做，我做，誰(shuí)讓你給我發(fā)錢，給錢就是老大，要做就做吧~

于是出現(xiàn)了以下設(shè)計(jì)稿

常說(shuō)設(shè)計(jì)是一個(gè)用戶接觸產(chǎn)品的第一道門。從應(yīng)用市場(chǎng)的圖標(biāo)開(kāi)始到用戶下載打開(kāi)app的啟動(dòng)頁(yè)，再到用戶進(jìn)入app后看到的首頁(yè)。難道設(shè)計(jì)師真的不考慮什么嗎?真的按照產(chǎn)品或交互設(shè)計(jì)稿做嗎。從圖標(biāo)在應(yīng)用市場(chǎng)的吸引力，到用戶使用app后的留存率，請(qǐng)問(wèn)哪一個(gè)不是和UI設(shè)計(jì)師有關(guān)系！業(yè)績(jī)好，業(yè)務(wù)好是產(chǎn)品的營(yíng)銷和自然增長(zhǎng)率。業(yè)務(wù)差就是設(shè)計(jì)不吸引人沒(méi)有感染力，嗯哼？？？

在此呼吁廣大項(xiàng)目管理者，請(qǐng)給我們的設(shè)計(jì)師一些思考的時(shí)間，一些打磨設(shè)計(jì)的時(shí)間。

好了，廢話不多說(shuō)，進(jìn)入正題。假設(shè)有一天，公司給了你足夠的時(shí)間設(shè)計(jì)。你該如何思考？你要怎么不受約束的將自己的產(chǎn)品觀融入你的設(shè)計(jì)中？從現(xiàn)在開(kāi)始，即使產(chǎn)品給你的設(shè)計(jì)時(shí)間很短，你也要學(xué)著思考，學(xué)著加入自己的思維，做一個(gè)有思想的設(shè)計(jì)師。做到這一點(diǎn)很難，但是你必須學(xué)著這樣做，跟我沒(méi)關(guān)系，但對(duì)你有益。

1.學(xué)著像產(chǎn)品經(jīng)理一樣思考(THINKING LIKE PM)

產(chǎn)品經(jīng)理是怎么思考的。產(chǎn)品經(jīng)理是產(chǎn)品的CEO，手握著產(chǎn)品的生殺大權(quán)?？紤]的會(huì)更偏像于產(chǎn)品的核心觀。幫助用戶解決什么痛點(diǎn)，通過(guò)什么方式解決這個(gè)痛點(diǎn)，怎么為公司提高贏利、如何提高轉(zhuǎn)化、如何提升留存…當(dāng)然你并不需要完全知道所有的東西，因?yàn)槟阌心阕约旱膶ｉL(zhǎng)(UI設(shè)計(jì))。

但是，必須留意的幾點(diǎn)就是:(1)用戶群體(2)相關(guān)競(jìng)品(3)主要商業(yè)模式

（1）對(duì)于用戶群體的了解，你能夠通過(guò)這部分用戶群體找到相關(guān)的用戶畫(huà)像。這一點(diǎn)很重要（因?yàn)閺哪闳肼殲閁I設(shè)計(jì)師的那天開(kāi)始，你的設(shè)計(jì)是幫助公司服務(wù)于用戶的，并不是為了表達(dá)你崇高的藝術(shù)涵養(yǎng)的）。通過(guò)用戶畫(huà)像，你能找到這部分人的主要特征，這將會(huì)有助于你選擇設(shè)計(jì)中使用的顏色、字體大小。

     打個(gè)比方來(lái)說(shuō)，總不能為服務(wù)于紅綠色盲人群設(shè)計(jì)的產(chǎn)品，UI做出了綠色界面+紅色按鈕吧？你以為你通過(guò)顏色對(duì)比突出了按鈕，實(shí)際…對(duì)吧？你可以用顏色來(lái)讓界面產(chǎn)生差異，單不能僅依賴于顏色提升設(shè)計(jì)效果，因?yàn)椴⒉皇敲總€(gè)人都能精確的分辨出各種顏色。

(2)產(chǎn)品的競(jìng)品，對(duì)于相關(guān)競(jìng)品的研究，也是目前UI設(shè)計(jì)師設(shè)計(jì)過(guò)程中常用的一種方法。好處呢當(dāng)然顯而易見(jiàn)，競(jìng)品的顏色用取，設(shè)計(jì)風(fēng)格…這些都是已經(jīng)線上經(jīng)過(guò)驗(yàn)證了的。有很多設(shè)計(jì)師是在看完競(jìng)品后恍然大悟，顏色該用啥，按鈕用啥色。但這是萬(wàn)萬(wàn)不可取的。這會(huì)導(dǎo)致你們的產(chǎn)品沒(méi)有任何競(jìng)爭(zhēng)力，上線比人家晚，看著有和人家差不多。怎么打差異化的戰(zhàn)?取其優(yōu)，去其差。思考人家設(shè)計(jì)師為什么這么做，他們是怎么想的，如果我設(shè)計(jì)會(huì)設(shè)計(jì)成什么樣？

（3）你必須要了解你的商業(yè)模式。作為設(shè)計(jì)師有權(quán)知道公司的基本商業(yè)模式，這也是考慮在整體設(shè)計(jì)里程里面。霧里看花管中窺豹，你永遠(yuǎn)看不到你所設(shè)計(jì)的產(chǎn)品本質(zhì)。再打個(gè)比方：假設(shè)你的產(chǎn)品是通過(guò)用戶購(gòu)買相關(guān)服務(wù)進(jìn)行盈利的，那么設(shè)計(jì)前你得思考整個(gè)產(chǎn)品其實(shí)是需要安全、信任、服務(wù)作為設(shè)計(jì)主旨，其中突出“服務(wù)”作為亮點(diǎn)，需要傳遞給用戶一種安全可靠的情感，最終引導(dǎo)消費(fèi)者完成支付購(gòu)買。

2.學(xué)著像交互設(shè)計(jì)師一樣思考(THINKING LIKE UE)

     用戶體驗(yàn)、使用場(chǎng)景、信息優(yōu)先級(jí)、轉(zhuǎn)場(chǎng)、使用習(xí)慣…對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)這是多么熟悉的名詞。確實(shí)，交互設(shè)計(jì)師考慮更多的是怎么讓用戶在app上操作的爽了，最符合用戶的操作習(xí)慣，將產(chǎn)品經(jīng)理傳達(dá)下來(lái)的商業(yè)模式/邏輯變?yōu)榱鞒痰男问揭龑?dǎo)用戶進(jìn)行使用。通過(guò)數(shù)據(jù)的分析，不斷優(yōu)化上線后產(chǎn)品的相關(guān)體驗(yàn)。

作為設(shè)計(jì)師的你，怎么像交互設(shè)計(jì)師一樣思考呢?

(1)用戶體驗(yàn)=顏色是否和諧。顏色的使用，之前已經(jīng)說(shuō)過(guò)了，考慮用戶群體的基礎(chǔ)上，看你顏色的配比是否讓人舒適，是否準(zhǔn)確的傳遞出了產(chǎn)品想給用戶的那種感覺(jué)。產(chǎn)品正式設(shè)計(jì)前，通常會(huì)進(jìn)行所謂的風(fēng)格探索階段。是允許設(shè)計(jì)師根據(jù)提供的用戶群體發(fā)揮自己的創(chuàng)意進(jìn)行設(shè)計(jì)的。當(dāng)找到那種適合的顏色搭配后，接下去的設(shè)計(jì)會(huì)顯得游刃有余。但是目前很多公司都是略過(guò)探索這一步的。為追求產(chǎn)品的快速上線，基本都是領(lǐng)導(dǎo)找競(jìng)品給顏色，設(shè)計(jì)師根據(jù)這個(gè)顏色（衍生色）進(jìn)行設(shè)計(jì)。缺乏用色的專業(yè)性。

(2)使用場(chǎng)景=顏色使用是否符合用戶使用產(chǎn)品時(shí)的場(chǎng)景。這個(gè)就比較好理解了，產(chǎn)品到底是晚上用的還是白天用的，到底是地鐵上用的還是書(shū)房里用戶。不同的使用場(chǎng)景在設(shè)計(jì)時(shí)也應(yīng)該考慮在內(nèi)。例如，晚上使用的產(chǎn)品顏色一定會(huì)偏暗一些、白天熱鬧場(chǎng)所使用的產(chǎn)品一定會(huì)是偏簡(jiǎn)潔、書(shū)房使用的產(chǎn)品一定是偏溫和…

(3)信息優(yōu)先級(jí)=如何通過(guò)設(shè)計(jì)的方法(大小、位置、形狀、顏色、動(dòng)畫(huà))突出產(chǎn)品重點(diǎn)。通過(guò)對(duì)比、突出等手法，將重要信息直接展示給用戶。做到簡(jiǎn)單直接有效。

(4)轉(zhuǎn)場(chǎng)=如何通過(guò)動(dòng)效的方式便于用戶理解邏輯跳轉(zhuǎn)。這一點(diǎn)特別是在相對(duì)復(fù)雜的產(chǎn)品的時(shí)候較為常用，例如層級(jí)相對(duì)比較深，則會(huì)通過(guò)轉(zhuǎn)場(chǎng)的引導(dǎo)告知用戶從哪來(lái)到哪兒去。引領(lǐng)用戶使用你的產(chǎn)品，不至于在產(chǎn)品使用過(guò)程中迷失。

(5)使用習(xí)慣=相關(guān)設(shè)計(jì)規(guī)范。用戶長(zhǎng)時(shí)間使用完你的產(chǎn)品后，已養(yǎng)成了使用習(xí)慣。知道哪個(gè)位置是重要的內(nèi)容。如果用戶已經(jīng)建立了產(chǎn)品工作原理的心理模型，他們可能會(huì)有非常強(qiáng)烈的觀點(diǎn)，認(rèn)為某些東西就應(yīng)該在某些特定的位置，通常設(shè)計(jì)師可以利用這一特點(diǎn)來(lái)引導(dǎo)用戶發(fā)現(xiàn)重要功能。

3.學(xué)著像用戶一樣思考(THINKING LIKE UESR)

（1）用戶在使用產(chǎn)品的時(shí)候，最優(yōu)考慮的是，這個(gè)產(chǎn)品是不是能幫我解決我的問(wèn)題(賺錢、記賬、提醒…)，產(chǎn)品的核心功能一定是用戶最先考慮的。

（2）你的設(shè)計(jì)是不是好看，他會(huì)考慮說(shuō)，這個(gè)東西怎么看著這么low，是不是公司不正規(guī)啊?前文也提到了，每個(gè)產(chǎn)品都有自己的目標(biāo)人群，那么研究這部分目標(biāo)人群的相關(guān)喜好，通過(guò)設(shè)計(jì)的方式將其重現(xiàn)給用戶。

（3）這個(gè)產(chǎn)品用起來(lái)爽不爽，怎么這么卡頓、怎么看起來(lái)能點(diǎn)實(shí)際不能點(diǎn)、怎么功能這么多都沒(méi)用、怎么…

當(dāng)然用戶有千千萬(wàn)萬(wàn)，你不可能完全都能像所有用戶那樣思考，滿足大部分用戶就可以了。

4.學(xué)著像你自己一樣思考(THINKING LIKE YOURSELF)

   是否在為產(chǎn)品設(shè)計(jì)的過(guò)程中，已經(jīng)忘了像自己一樣思考了。滿腦子都是產(chǎn)品經(jīng)理想要什么樣的，用戶想要什么樣的。這也會(huì)讓你喪失自己的思考能力。

(1)學(xué)著像自己一樣思考，不是說(shuō)按照自己的喜好來(lái)，而是你在設(shè)計(jì)的過(guò)程中是否偏離了自己的設(shè)計(jì)觀。對(duì)于明顯是錯(cuò)誤的設(shè)計(jì)，你選擇接受。

(2)以調(diào)研或用戶研究結(jié)果為準(zhǔn)則，完全喪失你自己對(duì)這個(gè)產(chǎn)品應(yīng)有的樣子的判斷。做個(gè)半理性半感性的設(shè)計(jì)師，會(huì)讓你的設(shè)計(jì)既符合用戶口味，又有自己的韻味。

總結(jié)

記住設(shè)計(jì)產(chǎn)品的人是你，對(duì)產(chǎn)品美化體驗(yàn)的是你，如果你的設(shè)計(jì)和使用不再適用于用戶，他們可以毫不留情的轉(zhuǎn)向其他產(chǎn)品，而作為設(shè)計(jì)師的你不能這么做。用戶不知道你的設(shè)計(jì)是怎么來(lái)的是怎么想的，但是你了解這一點(diǎn)。用戶不知道你是通過(guò)調(diào)研或研究得出他們的相關(guān)喜好最終選擇了這樣的設(shè)計(jì)，但是你很清楚。真正受制于產(chǎn)品設(shè)計(jì)的人是你，因此要確保它仍是你值得付出，引以為傲的東西。

目錄

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

按鈕的位置非常重要

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

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

結(jié)論

正文

大家好，我是西瓜～

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

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

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

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

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

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

現(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)該以某種方式而不是其他方式來(lái)設(shè)計(jì)用戶界面。

按鈕的位置非常重要

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

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

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

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

1、減少視覺(jué)注視

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

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

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

用戶只關(guān)注每個(gè)按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側(cè)可能會(huì)使用戶更容易點(diǎn)擊，但從用戶的心理過(guò)程和視覺(jué)注視速度來(lái)看，將主要操作放在對(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ū)域可以使用戶在視覺(jué)掃描時(shí)看到他們最后需要執(zhí)行的主要操作，這不僅改善了視覺(jué)流動(dòng)，還改善了任務(wù)流程。用戶在掃視過(guò)程中不會(huì)錯(cuò)過(guò)主要操作按鈕，當(dāng)他們經(jīng)過(guò)時(shí)，他們的目光會(huì)停留在上面，從而可以立即點(diǎn)擊它。

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

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

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

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

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

一、前言

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

比如，“保存” 用鼠標(biāo)操作：點(diǎn)擊界面開(kāi)始菜單 - 調(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 + ?】 ，打開(kāi) Figma 的快捷鍵面板，可查看 Figma 的所有快捷鍵，方便快速查找。

2、等比例縮放

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

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

快速畫(huà)出環(huán)形進(jìn)度條的方法，先畫(huà)一個(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ù)制粘貼下來(lái)。如下圖：

6、快速定位組件母版

對(duì)于使用組件的元素，在調(diào)整的時(shí)候需要修改組件母版，才會(huì)對(duì)每個(gè)組件生效。當(dāng)有很多組件時(shí)，我們可以通過(guò)任意組件，點(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】，可以直接將所有圖層折疊起來(lái)，這樣，不管之前展開(kāi)了多少層，都能直接折疊，方便快速瀏覽整個(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í)輸入了一些文本，行高有問(wèn)題，但是暫時(shí)又沒(méi)有很明確的行高參數(shù)，這個(gè)時(shí)候，只需要在行高這里輸入 auto，點(diǎn)擊回車，就可以把這些文字設(shè)置成自動(dòng)行高了。如下圖紅框位置：