小按鈕,大學問

2022-04-01 14:44:35 字數 1538 閱讀 7584

[核心提示]作為最基本的互動控制項,按鈕(button)無論是在 pc 還是移動裝置中都是無處不在的,這些最不起眼但卻是使用最頻繁的按鈕不僅有著大作用還有著大學問。   

在我們日常使用個人電腦以及手機等各種移動裝置過程中,按鈕或許是最不起眼但卻是使用最頻繁的。對於乙個產品來說,作為最基本的互動控制項的按鈕統一風格是必須的。很多時候,乙個按鈕風格統一的產品甚至可以讓使用者僅僅通過按鈕就可以辨認出來。下面這張是 18 個產品的按鈕控制項樣式,來做個測試吧,看看你能分辨出幾個?

做完測試了吧,文字答案在文章底部,或點選我檢視**版答案。

從上面測試中可以看出,按鈕是乙個**或乙個應用除了 logo 之外最容易辨認的元素,因此一組經過設計過的獨一無二的按鈕可以建立並保持使用者對**或應用的忠誠度。

對於乙個**或乙個應用中的按鈕來說,或許在寬度上有大有小,但在高度上是應該統一大小的。如果你想設計一組符合行為召喚(call to action)的按鈕的話,那麼這一點是必須要遵守的。

要想打造一組統一風格的按鈕,首先要在外觀上保持一致。如果部分按鈕有圓角的話,那麼其他按鈕最好也要都有同樣的圓角效果(圓弧的半徑也要保持一致);如果部分按鈕有內陷樣式、漸變或紋理的話,其他的也要保持相同的風格。

對於一組良好設計的按鈕來說,有三種區分明顯的顏色就足夠了,它可以滿足絕大多數介面的需求。

1. 選擇一種顏色作為一級命令按鈕底色,如 google 的藍色搜尋按鈕以及 twitter 的黃色註冊按鈕。

2. 選擇另外一種顏色作為二級命令按鈕底色,二級命令按鈕雖然也重要但不能與一級按鈕形成衝突。

3. 而第三種顏色,也是最後一種顏色可以將它應用到其他按鈕中去,如「取消」、「設定」以及導航按鈕等。

對於按鈕的作用,或許亞馬遜的購買按鈕(add to cart)最為人熟知,這個黃色的條狀按鈕不僅是使用者眼中真正的「亞馬遜 logo」,其背後的「一鍵式下單」(one-click)功能在互動設計史也有著重要的地位。此外還有 facebook 的 like 按鈕也在同樣改變著網際網路世界。

--------------------geekpark's split line--------------------

測試答案:

1. google2. twitter3. facebook4. microsoft5. pinterest6. yahoo 

7. instagram8. flickr9. spotify10. rdio11. svbtle12. medium 

13. basecamp14. square15. amazon16. quora17. linkedin18.path

測試分析:

你一共辨認出幾個產品/公司呢?下面是測試對應結果的分析。

0 個     :恭喜你,你是乙個正常人;

1-5 個  :是不是被 g*w 關照了?

6-10 個 :不錯的成績哦;

11-15個 :身體還行不行,趕緊趁今天天氣不錯出門曬曬太陽吧;

16-18個 :太厲害了!你是乙個不折不扣的網蟲。

演講是門大學問

每年暑假前後提高班內部都有技術交流的活動,去年七期的師哥師姐們在資料庫 設計模式 uml等方面給了我們提點。今年輪到我們給九期做指導,反正我一直很緊張。既要考慮到九期孩子們的進度和情況,也要聯絡當年的自己對知識的理解程度。準備了一些ppt,想著把基礎知識嚼碎了餵給他們,還有盡可能的想舉一些幽默實際的...

小電梯,學問大

為了幫助新人學習c 為了保證既直觀,又具有一定的靈活度,電梯演算法是乙個不錯的切入點。寫了個小電梯作為demo。include include include include include class elevator 按下某個樓層 void add target floor int floor ...

汕頭大學2014屆畢業合唱《大學問》

大學問歌手 汕頭大學合唱團 知道什麼叫天高地厚 內心的天空也要懂得 知道什麼是海市蜃樓 人海的感受也要去進修 知識跟世界細水長流 智慧型用思考照明宇宙 我們懂得學問沒盡頭 學會怎麼做事再學做人的操守 我們懂得學習的理由 吸收是為了奉獻才能承先啟後 生命不止堅毅與奮鬥 有夢想才是有意義的追求 成功不止...