您現在的位置是:首頁 > 單機遊戲首頁單機遊戲
關於按鈕的細節與運用
- 2021-07-21
我的世界如何設定按鈕
按鈕幾乎是每一個頁面不可或缺的元素,對於按鈕的認識基本停留在視覺層面,一個圓角矩形搭配一句文案就能拼湊成一個最基礎的按鈕。
視覺是一個觀察的切入點,但僅停留在視覺層面還是不夠的,比設計表現更重要的往往是背後支援設計的理由。
本文中的所有案例均來自線上產品,觀點僅是個人粗淺的理解,有疑問的地方歡迎大家討論指正。
一、按鈕的定義
1。 按鈕的來源
數字世界是現實世界的一種對映,許多數字概念,都可以在現實世界中找到原型,按鈕就是很生動的一個案例;在視覺表現上貼近現實生活中真實物體的外觀,擬合用戶心智模型,降低使用者的認知和理解成本。
2。 按鈕的定義
如果從視覺形式上看,按鈕的組成很簡單,一個矩形容器加上文字或圖示即可組合成一個常見的按鈕,但是僅僅從視覺層面定義按鈕是不嚴謹的。
按鈕是一種重要的控制元件型別,而控制元件是圖形使用者介面(GUI)的主要構成模組;想要深入理解按鈕,就必須要求我們首先理解什麼是控制元件以及控制元件的分類。
3。 控制元件分類和介紹
定義:控制元件是使用者和產品間進行交流的螢幕物件,是圖形使用者介面(GUI)的主要構成模組。
分類:根據使用者目標,可將控制元件分為4大類。
每一類控制元件下又有更多具體細分。所有介面中常見的具體控制元件都可以根據其功能找到所屬的類別。
4。 按鈕的分類
在以上各個細分控制元件中,我將部分控制元件歸入按鈕類別:
命令控制元件下的:傳統按鈕、圖示按鈕、文字按鈕;
選擇控制元件下的:開關按鈕、單選按鈕、組合圖示按鈕、狀態切換按鈕(開關和複選框樣式比較固定,為了方便討論,姑且不算在按鈕範疇之內)。
因此如果以按鈕為主體,以功能屬性為分類條件,可將按鈕分為:
命令型按鈕和選擇型按鈕:
二、命令型按鈕與選擇型按鈕的區別
不論從功能維度、互動維度、視覺維度上看,這兩類按鈕各自都有不同的特點。
選擇型按鈕非瞬時狀態有:“選中”和“未選中”兩種互斥狀態,可以把選擇型按鈕理解為某種狀態的確認和展示。
命令型按鈕的非瞬時狀態只有一種:正常狀態,當用戶點選命令型按鈕後,命令即可下達;可以把命令型按鈕理解為一個動作,點選按鈕代表著立即執行這個動作。
三、常見按鈕的拆解
介紹完了命令型按鈕和選擇型按鈕在功能、互動、視覺層面的區別點後,我們再來看看實際工作中常見和常用的按鈕型別。
1。 傳統按鈕(有容器兜底的按鈕)的來源
GUI中“按鈕”的概念來源於真實世界中的按鈕。真實的按鈕具有一個非常顯而易見的特點:擁有一個適合點選按壓的受力面,這個受力面就是可點選感的來源。
試想一下,假設一個按鈕只有針尖般大小,且不說你是否能認出這是按鈕,即便你知道這是按鈕,你會有按下的慾望嗎?
真實情況下,擺在人們面前的按鈕面積越大,想按壓的慾望就越強;因此傳統按鈕的最顯著特點就是擁有一個承載內容的“受力面”,也就是承載文字或者圖示的“容器”。受限於早期的顯像技術,以及與真實世界的對照,這種“容器”通常一般都是矩形,後期漸漸衍生出更加柔和的圓角。
風格發展:
在相當長的一段時間裡按鈕都有三維凸起的特徵,進一步鞏固了按鈕的可點選感。不過進入移動時代後,這種流行趨勢發生了改變,按鈕的三維印記被不斷移除。
使用者已經建立起了成熟的心智模型,即便按鈕在視覺上越來越“平”,也不妨礙點選行為的發生;結合多年的使用經驗,使用者已經將矩形形狀這一特徵和按鈕牢固地聯絡了起來。即便現在的按鈕大多都是扁平化,使用者也能一眼就辨認出按鈕屬性。
2。 傳統按鈕的拆解:
常見按鈕一般是由容器和內容組成。
1)容器層面
容器形狀:移動端比較主流的按鈕形狀有:矩形、圓角矩形、膠囊形和圓形4種。
一般,在人們的認知裡,圓角越大傳遞的感覺越圓融親切。其實形狀本身並沒有好壞區別,與單純視覺偏好相比,元素的統一性更加重要;一旦選定了某一種按鈕形狀,就需要保證所有場景中出現的按鈕都儘量看上去整體統一。
容器尺寸:視覺上,按鈕越大,越吸引使用者注意,決定按鈕大小的主要依據是按鈕在頁面中的優先順序;而一個產品涉及到頁面眾多,如果不同的頁面元素之間缺乏統一的排程規則,就會出現按鈕尺寸過多,沒有規律,細節混亂,效率低下的情況。
為了既能適應不同的場景,又能保持產品級的控制元件統一,一般要給按鈕尺寸設定幾個檔位以適配不同頁面需求;排除個別特殊頁面,一般把按鈕設定為5個優先順序梯度檔位就足以滿足設計需求。
我們可以從優先順序從高到低的順序,將按鈕分為:特大、大、正常、小、特小5個尺寸檔位。
下面展示最常使用的三個檔位,大、正常、小檔位。
容器顏色:按鈕的大小、形狀、顏色三個維度中,人眼是對顏色資訊最為敏感的;在一個頁面中,突出一個元素的方式有多種,其中最簡潔有效的方式就是用顏色進行突出;顏色包含了色相、飽和度和明度三種屬性,改變顏色的不同屬性,都會對按鈕的表意產生影響;同時,不同的顏色代表著不同的含義,配色時需要加以注意。
容器樣式:容器除了基本的尺寸、形狀、顏色之外,還有多種樣式。上文介紹的容器是強面性的,此外,容器還有弱面性、線性等樣式。
容器細節:雖然現階段按鈕的越來越扁平,但在扁平的趨勢下,依舊有發揮設計創意的空間;顏色漸變、投影、動效都是常用的設計手法。
2)內容層面
聊完了“容器”部分,再來看看容器承載的“內容”又有哪些細節點。
3。 圖示按鈕的介紹
並非所有按鈕都需要容器,尤其當按鈕密度較大時,去掉容器只保留內容,可以更好地提高空間利用率,簡約視覺。
4。 文字按鈕的介紹
比圖示按鈕更輕量的按鈕型別是文字按鈕,以文字的形式展示,和介面融合度更高,當用戶有需要時才會注意到文字按鈕的可點選性。
5。 傳統按鈕與圖示按鈕的組合
這種組合形式相當常見,將多個功能整合在一個區域內,如底部工具欄(ToolBar)或者頂部導航欄(Navigation Bar);不同按鈕承載著不同功能,側重越明顯,越利於使用者快速識別並決策。
四、特殊按鈕型別
上面介紹的是常見的按鈕形式,除了以上按鈕,有一些按鈕形式專門適用於某些特殊場景;如懸浮按鈕、膠囊按鈕等。
五、按鈕的優先順序
一個頁面往往有多個按鈕,不同按鈕承載不同功能,功能之間有相同或者不同的優先順序,因此按鈕之間也存在這相同或者不同的視覺優先順序。
我們分兩類情況來討論:相同優先順序的按鈕和不同優先順序的按鈕組合。
六、按鈕樣式小結
上文羅列了實際工作中常用到的一些按鈕樣式,最重要的步驟是分清按鈕主次,使用不同的樣式進行搭配。優先順序強到弱:強面性按鈕、弱面性按鈕/線性按鈕、圖示按鈕、文字按鈕。
碎碎念:本文中出現的部分名詞,比如“弱面性”、“容器”等,只是為了便於交流和統一指向,並沒有具體權威出處。
文中提及的按鈕型別均來源於線上產品,樣本有限,適用場景相對固定,還有很多樣式沒有一一遍歷;但掌握瞭如何選擇樣式的原理,就可以根據日後具體需求做出合理方案。
文中出現的資料都是經驗型資料,如按鈕按下狀態是在正常狀態下新增10%純黑的遮罩,文字字號大小等,這些都是建議型資料,可以根據具體情況靈活調整。
作者:doo_W