新浪体育手机新浪网一
iOS和Android規范解析——按鈕
技術文檔    發布日期:2017-06-13 10:27   來源:

今天介紹的是按鈕。按鈕是設計的過程中,經常使用的一種控件。我們來看看Google的Material Design和蘋果的設計規范都是怎么說的。

Material Design Guidelines

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

扁平按鈕

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

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

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

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

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

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

凸起按鈕

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

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

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

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

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

懸浮按鈕

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

底部常駐按鈕

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

底部常駐按鈕示例

下拉菜單按鈕

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

下拉菜單按鈕示例

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

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

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

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

開關按鈕

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

開關按鈕示例

iOS Human Interface Guidelines

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

系統按鈕

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

系統按鈕示例

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

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

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

信息按鈕示例

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

添加聯系人按鈕

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

添加聯系人按鈕

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

討論使我們認識更加深刻,歡迎留言討論。

#關于作者#

新設計青年,微信公眾號:新設計青年。愛奇藝高級交互設計師。德國海龜一枚,曾任職于騰訊微生活、網易、宜信等公司。

本文未經許可,禁止轉載。

?
地址:深圳市南山區創業路南光商務大廈2-1114    Email:[email protected]    Tel:0755-86176995    中國 · 深圳
Copyright ? 2006 -2020 深圳匯網在線 All Right Reserved.    粵ICP備14062458號-1


咨詢電話:0755-86176995
{ganrao} 秒速时时彩 11选5山东 益配资 竞彩足球比分结果是红色 3d独胆双胆专家预测 快乐飞艇 竞彩足球比分直播 大同麻将乱刮风规则 网球比分查询 麻将作弊暗号 08nba活塞vs黄蜂 天津市十一选五走势 辉煌配资 澳门足球赔率即时赔率 yy陕西麻将下载 北京11选5*结果