• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        按鈕組設計,是組合在一起好還是分開好?

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2017-12-19 14:21

        按鈕組就是指兩個或兩個以上的按鈕排布在一起。什么時候我們會使用按鈕組,按鈕組有哪些使用場景?按鈕組設計,是組合在一起好還是分開好?

        .....

        關于按鈕組設計,不少胖友都有一些疑惑,本文作者(王M爭),對按鈕組的使用場景進行了總結,或許可以幫助到在這方面有疑惑的同學。

        上周一個朋友問了我一個問題,按鈕組排布的時候是組合在一起好還是分開好?這個問題當時就把我問倒了,因為我之前從來沒有考慮過這個問題。為了回答這個問題,我對按鈕組的使用場景進行了一個簡單的總結,希望可以幫助到大家。

        按鈕組設計,是組合在一起好還是分開好?

        什么是按鈕組?

        顧名思義,按鈕組就是指兩個或兩個以上的按鈕排布在一起。為了了解按鈕組的使用場景,首先我們來思考一個問題:什么時候我們會使用按鈕組?

        從按鈕組的樣式上我們可以看出常見的按鈕組是供用戶進行判斷(兩個選項)或者選擇(兩個以上選項)的。

        判斷

        首先我們來說判斷,就是只有兩個按鈕的情況。一般來說,兩個按鈕中肯定有一個擁有更高的優先級或者說用戶更希望去點擊,那么我們會在樣式設計上進行區分。

        按鈕組設計,是組合在一起好還是分開好?

        微信的”取消”按鈕背景色選擇的是灰色,而淘寶直接讓”取消”成了一個光禿禿的文字按鈕。這樣的對比設置可以讓用戶很快找到“確認登陸”按鈕,進而完成登錄操作,提升了操作效率。

        其實可以讓用戶進行判斷操作的組件還有開關。開關,又稱switch,也是我們很常見的一個組件,表示兩種相互對立的狀態間的切換,多用于表示功能的開啟和關閉。而一項功能的開啟可能會帶來相應的后續操作,例如你在iOS設置里開啟了微信的“通知”功能,那么你就需要對通知形式進行進一步的設置。而按鈕組不會出現這些后續操作,更像是一錘子買賣,這也是按鈕組和開關的一個主要的區別。

        按鈕組設計,是組合在一起好還是分開好?

        小時候,我們家的燈開關都是拉繩的。拉繩的開關有一個缺點就是停電的時候,你不知道當前的燈是開還是關,這個就很頭疼。所以開關要用好必須要讓用戶明確自己當前所處的狀態以及清楚操作后的結果。其實淘寶的這個switch用的并不是很好,因為這里的圖形暗示并不是很清晰。

        按鈕組設計,是組合在一起好還是分開好?

        線狀和面狀

        在上面我們提到了設計中的一個對比理論,這里我們不妨來進行一個拓展。我們在設計按鈕的時候,經常會面臨著抉擇,線狀按鈕還是面狀按鈕?其實線狀還是面狀爭論不僅僅存在于按鈕,還有icon,tab和標簽等樣式。面狀和線狀代表不同的設計理念,我們都知道面狀元素在界面中更容易吸引用戶的注意力,而線狀元素強調的是輕量化。具體到按鈕,簡單來說就是面狀按鈕比線狀按鈕具有更強的可點擊性。我們可以來看一個例子:

        按鈕組設計,是組合在一起好還是分開好?

        微信里“通訊錄”里的icon加了一個色塊做背景,但是“發現”和“我”界面中的icon都沒有加色塊做背景。我嘗試著把icon的色塊背景給去掉,發現它的視覺權重立馬降了一檔。因為通訊錄這個界面中有用戶頭像,如果不加色塊背景,用戶很難注意到這四個功能。所以說塊狀元素的使用可以提升功能的轉化率。

        按鈕組設計,是組合在一起好還是分開好?

        我們再來看一個例子,喜馬拉雅Fm這個界面中的“錄音”按鈕其實看起來特別的吃藕,因為很突兀。但是設計師的目的達到了,為了提升用戶黏性,他們肯定很希望用戶在喜馬拉雅Fm里上傳自己的錄音作品,那么必須做到足夠的顯眼。

        我們對這個界面進行高斯模糊處理,發現視覺焦點就在這個“錄音”按鈕上,所以“突兀”算什么?就怕你不突兀呢!

        按鈕組設計,是組合在一起好還是分開好?

        “一個”是我個人很喜歡的應用,它的界面中除了必要的配圖,其余所有icon和按鈕使用的都是線狀元素,給用戶一種非常清新淡雅的感覺,這倒也很貼合這款產品的氣質。

        按鈕組設計,是組合在一起好還是分開好?

        對于一款產品來說,設計師的職責是非常大的,不應該像現在這樣僅限于美工層面。從整個產品的角度來說,設計師要準確的定位目標用戶群,根據目標用戶群的喜好來確定界面設計風格,具體到每個界面中設計師要考慮各個功能的優先級排布。不要怕麻煩,你能做的事情越多,你的“可替代性”就越低,所得的報酬就會越多。

        選擇

        喝完了雞湯,接下來我們回到正題。再來說按鈕組中有三個或者三個以上的選項的時候我們應該怎么處理呢?

        其實這種出現多個選項的按鈕組樣式我們可以看成是單選/復選功能的一個變形。只不過現在傳統的單選/復選的樣式很難滿足當前的設計需要,用戶渴望更加新穎多變的按鈕樣式。特別是選項過多的情況下,按鈕的優勢就凸顯出來了。

        按鈕組設計,是組合在一起好還是分開好?

        那么我們再回到之前的那個問題,“按鈕組排布的時候是組合在一起好還是分開好?”對于這個問題,我是這么認為的:分開的按鈕樣式具有更強的適應性,可以換行,也可以滑動。組合按鈕樣式一般都要全貫通,適合展示信息層級較高的功能。總結成一句話:如果選項在一屏的寬度中可以展示完全,那么組合在一起和分開的區別并不是很大,但是一旦選項過多需要用戶滑動和換行才能瀏覽完的時候,分開的樣式更加適合。

        按鈕組設計,是組合在一起好還是分開好?

        單選/復選都是供用戶進行選擇操作,其實還有一個組件跟單選/復選很相似,那就是下拉列表。當選項過多時,用戶可以使用下拉菜單展示并選擇內容。下拉列表的優勢在于節省了界面空間,但是用戶想要看到全部的選項必須要點擊出下拉列表,增加了操作步驟,而且會對界面中其他內容造成遮擋。所以當你的界面元素不是很多的情況下,我的個人建議是盡量使用單選/復選按鈕。

        按鈕組設計,是組合在一起好還是分開好?

        總結

        以上就是我對按鈕組的使用場景做的一個總結,希望可以給大家帶來一些幫助。

        感謝大家閱讀由平面設計培訓分享的“按鈕組設計,是組合在一起好還是分開好?”希望對大家有所幫助,更多精彩內容請關注UI培訓官網

        免責聲明:本文由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:指引2018年設計方向的年度潘通色
        下一篇:為什么我做的banner這么丑?

        淺談設計中的加載

        平面設計中的印刷知識與印刷尺寸

        教你如何把手機里的自拍照片轉成手繪照

        如何將品牌基因融入到產品設計中?

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>