論UI中控制元件的使用方法

木魚妮子發表於2017-12-08

一、按鈕Button

1、按鈕分為:重要按鈕、一般按鈕和軟弱按鈕

重要按鈕:一般是指在整個介面當中比較大,醒目的位置,通常是指執行重要操作以及吸附在底部的按鈕。比如下單、搜尋、確定、提交等等操作。

一般按鈕:不是特別重要操作的按鈕。比如清空、退出、說明性的等按鈕。 重要按鈕和一般按鈕都是文字是在按鈕上的,而且佔的面積比較大。

軟弱按鈕:這裡指優先順序最低的一種按鈕,這類案例主要是文字和圖示一起搭配出現的。比如篩選、排序等按鈕。

2、樣式:

按鈕的表現形式有兩種:線框型、填充型(實色、漸變)

線框與線框排列,實色與實色排列是最基本最安全的排布方式,使用頻率最高或者重要的按鈕放在最右側(考慮使用者體驗的結果),給個規範內的色值即可,統一排列內的其它按鈕置灰(可參考淘寶後臺)。

3、滑鼠效果:

初始、滑鼠滑過(懸浮或稱為選中狀態)、點選、不可點選

一般來說滑鼠滑過建議加深色值(變淺效果不佳不做推薦)、點選可以初始狀態相同,不可點選需要置灰,色值需要低一些,建議(#dddddd)。(參考下圖)

論UI中控制元件的使用方法

持續更新……


相關文章