• iOS和Android規范解析——按鈕

    /2017-06-22 15:47:39/

  • \

    Material Design Guidelines

    按鈕告知用戶按下按鈕后將進行的操作(疑似廢話,,MD開篇就是這一句,好氣哦)。我們可以把按鈕理解為一個操作的觸發器。按鈕主要有以下五種:扁平按鈕,凸起按鈕,懸浮按鈕,底部常駐按鈕,下拉菜單按鈕,開關按鈕。下面我們來一一介紹。

    扁平按鈕

    扁平按鈕就是把文字用作按鈕,如下圖:

    文字按鈕示例(圖中紅色虛線即為文字按鈕)

    行為:在點擊扁平按鈕的時候,按鈕不會有升起的動作,但是它的背景會有一個從中間向四周擴展顏色的動效,如下圖的第三個動畫所示:

    扁平按鈕的各種狀態(動畫)

    左:扁平按鈕的各種狀態(靜態);右:按下扁平按鈕時的狀態示例

    用法:扁平按鈕一般用在警告框中,推薦居右對齊。一般右邊放操作性的按鈕,左邊放取消按鈕。如果用在卡片中,扁平按鈕一般居左對齊,以增加按鈕的曝光。不過,卡片有很多種不同的樣式,設計師可以根據內容和上下文來安排扁平按鈕的位置。只要保證在同一個產品中,卡片內的扁平按鈕的位置統一就可以了。
    \

    凸起按鈕

    凸起按鈕由于具有一定的高度,視覺上相對搶眼,所以可以起到強調按鈕本身的作用。

    \

    當頁面中的按鈕需要強調的時候,建議使用凸起按鈕,如下圖:

    \

    行為:當點擊凸起按鈕時,按鈕的背景會從中間向四周填充上顏色,同時按鈕本身會升起一段距離作為反饋:

    凸起按鈕的各種狀態(動畫)

    凸起按鈕的各種狀態(靜態)

    懸浮按鈕

    關于懸浮按鈕,MD用了單獨一節專門講這個按鈕,由于內容較多,我會在下篇文章詳細介紹。

    底部常駐按鈕

    如果你的應用需要用戶隨時可以進行某個操作,那么請考慮使用懸浮按鈕或者底部常駐按鈕。

    底部常駐按鈕示例

    下拉菜單按鈕

    下拉菜單按鈕允許用戶從一系列選項中選擇一個選項。按鈕默認會展示當前選中的選項以及一個下拉箭頭。

    下拉菜單按鈕示例

    當用戶點擊下拉菜單按鈕,選項會在按鈕的正上方彈出,擋住下拉菜單按鈕,如下圖所示:

    使用下拉菜單選擇選項的動畫示意

    需要注意的是,下拉菜單的選項是可以設計成允許修改的,設計師可以根據需要決定是否需要可修改的屬性。具體如下圖所示:

    選項值可修改的下拉菜單按鈕

    開關按鈕

    開關按鈕,就像開關一樣有兩種狀態:點擊一下,它就會從狀態A切換成狀態B;再次點擊,又從B切換成A。最常見的比如喜歡、收藏按鈕:

    開關按鈕示例

    iOS Human Interface Guidelines

    蘋果的規范對于按鈕的介紹要簡略的多,主要介紹了蘋果系統提供的三種按鈕:系統按鈕、信息按鈕和添加聯系人按鈕。

    系統按鈕

    所謂的系統按鈕,其實就跟MD中的扁平按鈕一樣:使用一個詞做為一個按鈕。

    系統按鈕示例

    關于系統按鈕,蘋果給出了以下三個注意的要點:

    1. 使用動詞。表明了操作的動詞,可以表明這個詞是可操作的,并且說明了點擊之后會有什么效果。
    2. 盡量使動詞簡短。
    3. 只在必要的情況下,增加邊框或者背景色。默認情況下,系統按鈕是沒有邊框和背景色的。但在某些情況下,如果需要強調該按鈕,則可以增加邊框和背景色。

    信息按鈕

    信息按鈕很好理解,就是點擊之后會出現相關的詳細信息,一般以模態的形式出現。

    信息按鈕示例

    有一點需要特別注意:如果是通過點擊整行來出現詳細信息,那么請不要同時使用信息按鈕,否則容易引起誤解。

    添加聯系人按鈕

    添加聯系人實在沒什么好說的,就是點擊按鈕之后會出現聯系人的頁面,一般也是以模態視圖的形態出現。(蘋果關于按鈕的說明也是很沒有誠意呢,攤手。)

    添加聯系人按鈕

    以上介紹了MD和iOS設計規范中按鈕這個高頻使用的控件。值得一提的是,MD的按鈕動效還是很有自家特色的,在應用中稍微一使用,就會有明顯的MD風格。大家在做設計時,有機會可以嘗試一下。

    貴陽網站建設,貴陽APP開發,宏思銳達

<
上一篇: 如何設計內容精確、體驗友好的DASHBOARD?(上篇) 下一篇: 從設計指南說起,詳解iOS系統組件分類體系(屬性分類篇)

Hi,互相認識一下

很高興遇見你,友誼往往從第一次握手開始, 微信聯系: 13765801787

91久久久久无码精品国产|好吊妞国产日韩欧美在线观看|美国乱人伦中文视频在线|国产日韩另类中字