在進行網頁設計的時候,我們都知道滑鼠懸浮或點擊是不可缺少的交互狀態,但是在APP設計的過程中,這種按壓的狀態常常會被設計師忽略,今天我們就來總結一下APP中需要焦點狀態的場景,以及各自的設計要點,方便我們需要的時候可以快速輸出符合要求的設計稿。

目錄:

1. 按壓反饋是甚麼

2. APP中常見的按壓狀態應用場景

 

      按壓反饋概念

簡單來說就是用戶按壓可操作區域時,可操作區域樣式的改變,讓用戶感知到自己對當前操作的有效控制。

比較典型的按壓反饋是IOS的鍵盤,在九宮格的狀態下,當你按壓對應的操作區域時,如果是白色的背景色,顏色會變暗;如果是深色的背景色,顏色會變白;通過這種明顯的顏色反差,讓用戶明確感知到自己所觸發的操作區域,能夠直觀的感受到與界面的溝通和交互。(因為無法截到鍵盤按壓狀態的示例,所以大家自己操作,感受一下~)

 

IOS原生軟體及國外的一些APP上的按壓狀態做的都挺好的,但是縱觀國內,多數產品其實都沒有做按壓反饋效果,像淘寶、支付寶、天貓等大廠的產品也只是在一些比較重要的操作上才會有按壓效果,整體來說對這個狀態的關註度不是很高;但是像一些平臺/工具類產品(比如ofo、滴滴、Things),因為會更多的關註用戶的操作體驗,會在這些細節交互狀態上下功夫~~

 

      常見的按壓狀態

經過整理發現APP中設計按壓狀態場景主要有:按鈕、分段控件、圖標、文字、列表、卡片,下面我們分別來看一下他們的設計方式。(以下所有的數值都是對比線上產品得出來的,不是唯一數值,僅可做參考)

 

1. 按鈕

根據按鈕樣式的不同,有多種呈現形式,分別為:

  • 顏色飽和度較高、明度較低的按鈕,降低不透明度,通常為原始按鈕的50%;

  • 顏色明度較高的按鈕,在背景上覆蓋20%不透明度的黑色遮罩;

  • 淺色塊按鈕(上面可能會包含一個圖標/logo),在按鈕整體上覆蓋50%不透明度的黑色遮罩;

  •  灰色線性按鈕,增加淺灰色填充,色值通常為 E******;

  • 有顏色的線性按鈕,變為對應顏色的填充,文字顏色變為白色;

卡片

2. 分段控件

  • 在線框內增加填充,調整不透明度為15%;

卡片

3. 圖標

  • 顏色明度較高圖標,覆蓋50%不透明度的黑色遮罩;

  • 顏色飽和度較高、明度低的圖標,降低不透明度,色塊降低到50%,線性圖標降低到30%;

  • 淺灰色面型圖標,加深顏色;

  • 操作區域背景變為灰色;

卡片

4. 文字

  • 有顏色的可操作文字,不透明度變為30%;

  • 灰色的可操作文字,不透明度變為50%;

卡片

5. 列表

  • 在列表上增加灰色背景:一些比較簡單的資訊列表,比如通訊錄、功能入口列表等,通常會選擇的按壓顏色為#D9D9D9(IOS系統列表按壓顏色);一些比較複雜的資源類列表,通常用的顏色為E*****;

  • 將列表的背景變為品牌色,文字反白處理;

卡片

6. 卡片

  • 卡片整體等比縮小; 

卡片

總結:

按壓狀態的設計思路主要有4個:

  • 增加黑色遮罩,不透明度通常是50%

  • 改變透明度50%或30%

  • 顏色加深

  • 等比縮小

以上列舉的只是部分常見的需要按壓狀態的場景,像搜尋框、輸入框等等如果考慮細節交互狀態的話也是需要做相應的設計的,就可以根據以上設計思路選擇合適的方案。

想學習更多卡片設計方面的知識可以訪問:http://www.designnow.com.hk/

創作者介紹
創作者 www.renewa 的頭像
www.renewa

www.renewa的部落格

www.renewa 發表在 痞客邦 留言(0) 人氣()