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

作為WEB端和移動端的組成部分，按鈕承載著引導用戶的作用，遵循怎樣的設計原則，才可以讓按鈕真正起到作用，同時不造成誤解呢？

按鈕對于現在的我們來說，不管是WEB端還是移動端，已經非常常見了。但是對于早期互聯網來說，樣式比較少。當時只有超鏈接，也就是文字鏈接，點擊一次，就可以直接到達。

這種超鏈接也就是目前我們看到的樣式，文字+藍色下劃線。

還有一種就是Button，有方形的、圓形的、立體的、hover的、按下的、釋放的等等種樣式。

這是早期的谷歌首頁，兩種按鈕樣式還是對比很清楚的。

現在的互聯網較之前相比，按鈕樣式越來越復雜。因為現在的信息越來越多，為了更清楚讓用戶分清主次，就需要不同的樣式來表達。

現在我們常見的按鈕樣式無外乎就是文字按鈕、普通按鈕、圖標按鈕、標簽按鈕、懸浮按鈕這幾種樣式，我先簡單介紹一下。

文字按鈕

對于文字按鈕，既定的規則是通過藍色或者加下劃線表示，當然不是必須是藍色的，也可以根據產品換成其他顏色。但是需要形成對比，具有可識別性，讓用戶知道這是一個可以點擊的鏈接。

比如百度的搜索熱點，用藍色向用戶傳達：我是可以點擊的；而旁邊的不可點擊的數字則以黑色做對比，告訴用戶：你看看就好了，不要花時間來點我，對用戶來說非常直觀明了，用戶看到后基本不會去花時間去試試能不能點擊，除非個別人就想試一試的。

而對于加下劃線的超鏈接，和其他文字對比，也是直觀明了。

普通按鈕

普通按鈕則分為幽靈按鈕和填充按鈕。對于大家來說，這應該比較常見了，視覺層級上來說，填充按鈕肯定高于幽靈按鈕，一般引導性的操作都會使用填充按鈕。

在這兩種按鈕上，每個按鈕都會包含一個文本指令，它會告訴用戶這個按鈕的功能和指向。所以，按鈕上的文本要盡量簡潔、直觀，并且要符合整個網站風格的語音語調。

當用戶點擊按鈕的時候，按鈕所指示的內容和結果應當合理、迅速地呈現在用戶眼前，無論是提交表單、跳轉到新的頁面，用戶通過這個按鈕應當獲得他所預期的結果。

圖標按鈕

圖標按鈕在WEB端和移動端也非常常見，用圖標意形的方式直接告訴用戶，點擊這個按鈕可以達到什么結果，比較形象化。

標簽按鈕

標簽按鈕則可以進行分類，標記不同的屬性和維度，可以進行編輯操作，比如“添加”和“刪除”。

懸浮按鈕

而懸浮按鈕可以說是代表用戶在界面上最高頻次的操作。

由于懸浮按鈕通常承載的是主要的、有代表性的操作，通常它應該是個積極正向的交互，比如創建、分享、探索等；不應該執行破壞性的操作，比如刪除。

高德高航的兩個懸浮按鈕則為“回到原位置”和“查找路線”。

總結

無論對于什么按鈕來說。

“操作前，操作結果可預知”這個原則很重要，這個按鈕是只放圖標就可以了？還是要寫上文字用戶才清楚？——這是經常會遇到的問題。

要做這個判斷，我們得先確定：需要讓用戶清楚到什么程度。應該盡量讓用戶能猜到點擊后將帶來什么結果，這樣用戶才更敢去點擊。

是不是只放一個圖標，用戶就沒法猜到后果？那也不一定。這要看產品里的上下文情景，還有用戶對產品的熟悉程度。相機APP里，只放一個拍攝的圖標，幾乎所有人都知道是拍攝。

寫到這，突然想到了之前在設計彈窗按鈕的時候，遇到的一個問題，是“確定在左，取消在右”，還是“取消在左，確定在右”？

同時用過Windows和Mac系統的用戶，應該清楚，這兩個系統對于這個設計是完全相反的。Windows是“確定在左，取消在右”，Mac則相反，那到底哪個才更合理呢？

Android 的設計規范中則規定，“‘取消’操作的按鈕始終處于左邊，當用戶執行這個操作的時候會回到上一個狀態，而正向操作的按鈕則安排在右側”。也就是說，在Android規范當中，“取消”按鈕是在“確認”按鈕的左邊。

根據古騰堡原則：人們在瀏覽頁面的時候，都趨向于從上到下，從左到右的眼球運動規律。左上角是視覺的第一落點區，而右下角是視覺最終落點區。用戶的視覺中心往往在頁面的左上方，而結束瀏覽時視線往往落在右下角。

既然用戶的最終操作行為是“確認”，我們是不是就應該把“確認”按鈕放在最終視覺落點區呢？這樣用戶既不會錯過“確認”這個重要操作，也保證用戶在這之前都掃描到了所有的操作。

所以根據這個原則，建議是放在右邊。但是按照遵循設計規范來說，平臺的一致性原則優先級較高，用戶有可能會有錯誤或者遲疑的風險，這個就需要通過用戶反饋來調整了。

同時在我們設計彈窗時，應該讓每個彈窗都盡可能明確，不能只是為用戶提供選擇而已，明確的標簽能夠幫助用戶在選擇的時候不遲疑，更迅速和準確的去點擊。

比如以下這個案例：

第一個彈窗中，“No”僅僅是回答問題，但并沒有指向性，并未指出這么選擇的后果。而第二個彈窗則好了許多，“Cancel”和“Discard”兩個選項，后者和前文所提出的問題相對應，指向性明確，Cancel 的含義更加清晰。

當然在設計彈窗時，我們還可以自定義落焦點。當首選操作是正向操作時，視覺重量要大于次要操作，比如“保存”；而反向操作時，不可逆的操作比較高，所以為了避免用戶出錯的風險，此時在速度和正確性上相比，正確則是比較重要的，比如“刪除”，所以這時設計師就需要把引導性做好。

好了，按鈕設計就聊到這，下篇見。

本文由 @謙元 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。