按鈕規(guī)范文案怎么寫

按鈕規(guī)范文案怎么寫第一篇按鈕規(guī)范文案怎么寫第一篇高權(quán)重：帶有填充色的主操作按鈕，當(dāng)同一個頁面存在多個按鈕，只允許存在一個高權(quán)重（主操作）按鈕；

中權(quán)重：帶邊框輪廓的概述按鈕，同一頁面可存在多個中權(quán)重的按鈕；

低權(quán)重：純文本按鈕，以及淺色填充+淺色文字的按鈕，同一頁面可存在多個低權(quán)重按鈕。

按鈕的狀態(tài)

在設(shè)計按鈕時，為了體現(xiàn)按鈕不同的具體含義，以及后續(xù)設(shè)計、開發(fā)的統(tǒng)一性，明確按鈕交互樣式是設(shè)計過程中不可缺少的重要組成部分。設(shè)計師需要在不干擾界面視覺的前提下，對每個按鈕的樣式、狀態(tài)有清晰的定義，與其他元素、布局區(qū)分開來，以確保按鈕的可供性。常見的狀態(tài)主要有以下幾種：

按鈕規(guī)范文案怎么寫第二篇為按鈕編寫文案時，保持一致性很重要。研究表明，一致性可以幫助用戶準(zhǔn)確地建立產(chǎn)品工作方式的心理模型，從而最終獲得更好的用戶體驗。設(shè)計微文案的一些具體準(zhǔn)則可以幫助我們達(dá)到這一目的。例如，你可以：

1）規(guī)范字?jǐn)?shù)：不同組件平均應(yīng)該有多少個詞？每個按鈕一個、兩個或多個單詞。

2）選擇大小寫：例如整個產(chǎn)品始終使用大寫字母，你也可以在句子大小寫、標(biāo)題大小寫、大寫或小寫之間進(jìn)行選擇（稍后將詳細(xì)介紹…）

3）文案結(jié)構(gòu)：你需要確定文案的結(jié)構(gòu)。它們是否僅包括一個動詞或是動詞與名詞的組合（例如“動詞”+“名詞”或“動詞”或“動詞”+a+“名詞”）？

4）對特定含義的用詞表達(dá)一致：詞語選擇上的細(xì)微差異可能會對用戶體驗產(chǎn)生影響。例如，正如TobiasvanSchneider所報告的，“請求定價”和“獲取報價”描述了相同的動作，但在不同的產(chǎn)品中卻產(chǎn)生了不同的結(jié)果。

按鈕規(guī)范文案怎么寫第三篇上面提到的許多例子中，還存在一個類似的問題：它們大多選用iOS自帶的彈框直接做為操作對象。

我始終覺得在iOS提供的彈框中，兩個操作的按鈕顏色保持一致是不對的。

粗細(xì)有時候很難被直觀感受，而顏色可以在第一時間被感知。

比如前面提到的這個案例：

理想情況下，即使用戶知道右邊是行進(jìn)，左邊是取消，但彈出這個彈框的時候，不免還是需要再次閱讀一遍進(jìn)行確認(rèn)。

但如果改個顏色，好像就更好理解（當(dāng)然文案也是問題，但優(yōu)先級弱于顏色），畢竟彈框也是設(shè)計的一部分：

需要注意的是，用戶既然已經(jīng)選擇取消，就盡量明確的告知用戶，不要為了留存而留存，以至于模糊化該彈窗的選擇結(jié)果。

所以召喚行為，并不是強(qiáng)迫用戶去做，而是遵循用戶的「旨意」去提供選擇。這里的「返回」才是真正的召喚行為，而「取消」并不具備召喚屬性。硬生生的給「取消」附上召喚屬性，只會讓用戶在操作時摸不著頭腦。

這樣例子還有很多。

但是我覺得做得好的，應(yīng)該是這樣的：

這就是刻板印象造成的結(jié)果。我們應(yīng)該學(xué)會適當(dāng)?shù)厥褂每丶?，并根?jù)自己的產(chǎn)品對其進(jìn)行優(yōu)化。而不是一味跟風(fēng)。

綜上所述：界面層的取消，為了表示其作用性的不同，且界面元素眾多，突出顏色是沒問題的；但彈框?qū)拥娜∠c確認(rèn)在顏色上沒做區(qū)分，直接用不太明顯的粗細(xì)效果讓用戶聚焦于這兩個內(nèi)容的選擇上，其實是不友好的設(shè)計。

如果對iOS設(shè)計規(guī)范有足夠的了解的同學(xué)就能知道：它們在彈框控件上給出的兩個選擇都不是真正意義上的召喚行為按鈕，只是常規(guī)內(nèi)容，且更適用于產(chǎn)品開發(fā)，而不是設(shè)計指導(dǎo)。

如果你仔細(xì)觀察macOS的設(shè)計，就能發(fā)現(xiàn)他們?yōu)榫邆湔賳拘袨榈陌粹o位置與顏色都做了特殊處理，并不是簡單的同色系，或用粗細(xì)表示。如圖：

雖然用macOS來反駁iOS似乎不太合理，但我只是想說明在設(shè)計結(jié)果上，我們應(yīng)該有自己的思考。

就這個問題，我在Twitter上咨詢了前Apple，后創(chuàng)辦了UXM的產(chǎn)品設(shè)計師Anthony。原因是，他曾經(jīng)也就「取消按鈕」的顏色提出過一些個人看法。

在我說了這些內(nèi)容之后，他跟我說的第一句話是：

HiDai—WhileAppleisverygoodatdesign,theyarenotperfect.（Apple非常擅長設(shè)計，但它們并不完美。）

接著他繼續(xù)說道：你這套理論非常棒，所以你完全可以按它去給自己的產(chǎn)品構(gòu)建一套設(shè)計規(guī)范，并不一定要遵循Apple。

借著這個機(jī)會，我還跟他聊了許多其他內(nèi)容。而這件事本身再一次驗證了我的想法：越牛逼的人越謙虛，且平易近人。

哦，不是，跑題了，應(yīng)該是：不存在完美的設(shè)計規(guī)范，設(shè)計師在成長過程中并不一定要循規(guī)蹈矩，受到規(guī)則的限制，認(rèn)為設(shè)計就該如此。而是學(xué)會獨立思考，突破屏障，去挖掘更深層次的內(nèi)容。

看完這篇文章，再去翻一翻GoogleMaterialDesignGuidelines，就會有一種「哇哦！原來如此！」的感觸了。

按鈕規(guī)范文案怎么寫第四篇“提交”一詞就是一個很好的例子，它可以用于大多數(shù)按鈕。正如UXMovement的Anthony所建議的：“如果文案不是針對任務(wù)場景來描述的，當(dāng)用戶看到它時，就不知道會發(fā)生什么?！币虼?，用戶會對他們的行為會產(chǎn)生什么結(jié)果而感到困惑。避免這種情況的一種方法是使用描述用戶任務(wù)結(jié)果的微文案。

這可以通過使用針對任務(wù)場景描述的文案而不是通用的文案來實現(xiàn)。這讓用戶認(rèn)知更清晰，并為他們的行動提供了確定性。請記住，用戶通常會掃視頁面以獲取相關(guān)信息。為了改進(jìn)用戶體驗，微文案應(yīng)該準(zhǔn)確地描述用戶在任務(wù)中所做的事情。例如，如果用戶正在刪除照片，則“刪除”的按鈕會告訴用戶單擊動作按鈕將會刪除照片，這對于他們的任務(wù)來說是明確而具體的（見下例）。

使用針對任務(wù)場景的語言可以使文案更清晰（右側(cè)示例）

按鈕規(guī)范文案怎么寫第五篇應(yīng)該要使用動作動詞，而不是泛指詞。應(yīng)避免使用“是”或“否”，因為它們可能會產(chǎn)生歧義并讓用戶混淆。

在交互設(shè)計中，用戶先閱讀對話框的內(nèi)容然后才進(jìn)行操作。如前所述，研究表明大多數(shù)用戶通過掃視頁面的方式來獲取相關(guān)信息，而不是去仔細(xì)閱讀所有信息。這意味著，如果他們跳過或誤讀了對話框，他們最終會按錯按鈕。使用被動描述的文案會迫使用戶做更多的工作。通過按鈕文案來確認(rèn)接下來要做的動作，會減少出錯的機(jī)會，并減少用戶的工作量。

在下面的示例中可以看到（受UXMovement的啟發(fā)）。當(dāng)對話框文本沒加載出來，只有按鈕可見時，按鈕的文案是用戶唯一可用的信息。動作動詞可以幫助他們采取行動，但使用“是”或“否”文案的按鈕就不能達(dá)到這個目的。所以很顯然帶有動作動詞的按鈕任務(wù)效率更高，可以防止用戶出錯。

賦予動作動詞的按鈕的任務(wù)效率更高，可以防止用戶出錯

按鈕規(guī)范文案怎么寫第六篇有效的微文案應(yīng)該是對話式的。

不應(yīng)使用行業(yè)術(shù)語和底層的技術(shù)內(nèi)容（如錯誤代碼）。用戶應(yīng)該感覺的是他們在和另一個人說話，而不是一臺機(jī)器。羅伯茨建議，“微文案應(yīng)該使用簡單的語言，由最少的詞組成”。這意味著除非特殊情況，否則我們應(yīng)該避免使用行業(yè)術(shù)語。

這其實是一件比較難實現(xiàn)的事情，因為我們對我們所設(shè)計的產(chǎn)品以及我們每天遇到的行業(yè)術(shù)語非常熟悉。解決這個問題的一種方法是與用戶一起測試微文案?—看一下?他們懂我們使用的語言嗎？

下面展示了一個示例。與“啟用”這個詞相比，用戶可能更熟悉“打開”這個詞。

避免使用專業(yè)術(shù)語

按鈕規(guī)范文案怎么寫第七篇其實嚴(yán)謹(jǐn)點來說，界面層的「取消按鈕」與彈框?qū)拥摹溉∠粹o」的意義是不同的。

雖然都是安全性后退，但是前者多了一層含義：放棄屬性。

還是微信朋友圈的界面：

所以會彈出第二層彈窗：

無非就是微信通過加粗「保留」來告訴用戶，這里的召喚行為是它而已。

所以這層「取消」的含義，不僅僅是取消，還多了一步是否把你放棄的內(nèi)容保留下來的邏輯。

因此在這層含義上，「取消按鈕」也需要特殊處理。

如果說微信這里的「取消按鈕」在設(shè)計上沒有突出其特殊性，那Twitter同樣的例子，就比微信高明很多：

按鈕規(guī)范文案怎么寫第八篇顏色是最容易感知到的對比方式，不同的顏色會給用戶不一樣的心理預(yù)期。B端產(chǎn)品的用色一般以理性、嚴(yán)肅的基調(diào)為主，其中藍(lán)色最為常見。如選用其他色彩可適當(dāng)調(diào)低飽和度，以降低長時間使用造成的視覺疲勞感。

在設(shè)計時，還要將顏色分為主題色、強(qiáng)調(diào)色和輔助色，以適應(yīng)不同按鈕層級。主題色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對外的形象。主題色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。

主題色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等；強(qiáng)調(diào)色多用于需要拉開主次關(guān)系的次按鈕中，一般采用主題色的對比色彩或者鄰近色；輔助色用于提示其他場景，比如成功、失敗、警告、無效等。

按鈕規(guī)范文案怎么寫第九篇不設(shè)圓角值，在PC端較為常見，也有部分較為嚴(yán)謹(jǐn)?shù)囊苿佣藨?yīng)用使用直角按鈕。

4.按鈕中的文字

按鈕中的文字要便于用戶理解，不能過于陌生或繞口，用戶碰到不易理解的信息會產(chǎn)生困惑，甚至誤導(dǎo)用戶導(dǎo)致操作失誤從而造成損失。除此之外，文字還需要精簡，不能過多或折行且能合理的引導(dǎo)用戶完成操作。

5.文字與按鈕比例

按鈕中的文字太大或太小都會影響用戶對信息接收的效率，大小比例需要適中。文字太大會感覺很擁擠（跟大家衣服買小了感覺一樣），沒有呼吸感，要給文字四周留下足夠的空間，同時文字太小會顯得小氣，看起來也會比較吃力，不利于信息接收。

6.按鈕與其他組件的區(qū)分

設(shè)計好按鈕組件之后，頁面中的其他組件或元素要與按鈕有很明顯的區(qū)別，避免讓用戶產(chǎn)生不必要的誤解。

7.彈窗主/次按鈕的位置

在彈窗中，主按鈕是在左？還是在右？這是一個爭論不休的問題，那么不爭了，在移動端的彈窗設(shè)計中，主按鈕靠右就行了，不一定絕對正確，但絕對不是錯的。根據(jù)調(diào)查數(shù)據(jù)顯示，單手使用右手操作手機(jī)的用戶比左手操作手機(jī)的用戶量高，且用戶也有一定的意識，左側(cè)為上一步、右側(cè)為下一步，頂部左側(cè)為返回，右側(cè)為保存或確定。

8.無障礙設(shè)計

按鈕規(guī)范文案怎么寫第十篇談到按鈕設(shè)計前，先簡單說說B端產(chǎn)品。B端產(chǎn)品主要面向的是企業(yè)客戶以及內(nèi)部員工使用，比如OA、ERP、CRM等，一般除了目標(biāo)用戶，其他用戶很難接觸到。B端產(chǎn)品的設(shè)計通常需要結(jié)合具體的業(yè)務(wù)場景，功能和邏輯往往比較復(fù)雜，且用戶通常需要長時間沉浸使用，因此要求界面設(shè)計層級清晰，布局簡潔高效。

B端按鈕設(shè)計通常存在三方面的復(fù)雜性：

按鈕數(shù)量多：B端產(chǎn)品幾乎所有頁面都會有按鈕，甚至同時有多個按鈕。對層級感和美觀度的要求都很高；

應(yīng)用場景多：按鈕需要適應(yīng)B端產(chǎn)品的多種業(yè)務(wù)場景，包括登錄界面、表單、彈窗、信息提示框等；且每個場景出現(xiàn)的形式都不盡相同，需要對每種場景嚴(yán)格規(guī)范才不至于使用混亂；

出現(xiàn)形式多：按鈕通常具有正常、聚焦、懸停等多種狀態(tài)，需要保證用戶能夠及時發(fā)現(xiàn)并獲得準(zhǔn)確的反饋效果。

要想解決這些問題，我們需要了解按鈕的主要類型和設(shè)計細(xì)節(jié)，以便在各類情況下靈活運用。

按鈕規(guī)范文案怎么寫第十一篇根據(jù)VaishnavShravan的說法，“大寫是UX寫作中提高文本元素理解和一致性的工具，需要給予應(yīng)有的重視”。