淺談按鈕UI設(shè)計方法和技巧

0 評論 10357 瀏覽 2 收藏 7 分鐘

一直覺得做設(shè)計就是做原色的統(tǒng)一和對比,無論是平面、UI界面、數(shù)碼、環(huán)境空間、服裝等,一切設(shè)計概莫能外。有對比就會有統(tǒng)一,對比統(tǒng)一是設(shè)計師最容易也是最難拿捏的部分。這些往往都是設(shè)計師在自己的工作和學(xué)習(xí)中總結(jié)的屬于自己的學(xué)習(xí)方法。

那么下來我就說說我在界面設(shè)計中按鈕設(shè)計的運用方法和大家一起分享、一起學(xué)習(xí)、一起進步。

色彩統(tǒng)一

首先我想起自己最早學(xué)設(shè)計的時候,總是找不到設(shè)計的感覺,心里一直在搗鼓究竟問題出在哪兒了,后面在學(xué)習(xí)的過程中才發(fā)覺我一直在對比和統(tǒng)一中來摸索著學(xué)設(shè)計。后面的設(shè)計之路也一直在這上面糾結(jié),慢慢的后面自己發(fā)現(xiàn)了最簡單的一種方法。就是同色系的統(tǒng)一,所以在做一個設(shè)計的時候只選定幾種色后,就在這幾種色彩中選擇使用,來完成一幅相對完整的作品。

色彩是最容易讓人識別的,視覺識別系統(tǒng)也成為一個企業(yè)、集體和產(chǎn)品很重視的部分。那么在界面設(shè)計中,我在按鈕設(shè)計的使用上,首先也是根據(jù)整個網(wǎng)站的整體色調(diào)來考慮按鈕的色彩,這樣做的優(yōu)勢在于整個界面的統(tǒng)一性,也是用得最多的一種按鈕設(shè)計方法。如圖

質(zhì)感統(tǒng)一

界面設(shè)計不同于普通平面設(shè)計的一個很重要的地方就是設(shè)計師要對界面質(zhì)感的把握,那么這樣我們對界面中按鈕設(shè)計的運用要就有一定的要求,首先一點就是整個界面的質(zhì)感統(tǒng)一,不論是圖標或按鈕。這一點是最基本的要求。如圖:

042941SrB

7777777777

色彩對比

在設(shè)計中做統(tǒng)一是一種比較簡單而且很有效果的一種方法,但是缺點就是很難在視覺上給用戶有一種新鮮感,所以好多設(shè)計師會在設(shè)計對比上思考許久,因為這樣達到的效果是能給人眼前一亮的感覺。前面我寫了設(shè)計中的統(tǒng)一,有統(tǒng)一必然會有對比,所以接下來我談?wù)勎覍εc按鈕設(shè)計運用的對比方法。這些方法我們在生活中都能找到相關(guān)的設(shè)計元素。

說起色彩對比那又將是一篇長篇大論,所以在這里我也只是根據(jù)按鈕設(shè)計中的問題點到為止。我們知道色彩最重要的屬性之一就是它的冷暖性,所以冷暖對比是在設(shè)計中運用最多的,但是如果再把色彩對比劃分的話還有明度對比,純度對比,補色對比,冷暖對比,面積對比,黑白灰對比,同時對比,空間效果和空間混何等的對比。

曾經(jīng)看過一步電影《向左走向右走》里面的一個場景讓我印象深刻,如圖所示,在這個場景中我深深的被場景中的色彩對比鎖吸引,這個場景對我以后在做設(shè)計的時候強調(diào)主次起了很大的啟發(fā)作用。如圖:

042942WFS

然而被稱之為經(jīng)典的界面設(shè)計就是蘋果的計算機工具界面設(shè)計,這是典型的來源與生活中的按鈕設(shè)計。其方法和《向左走向右走》里面的這個場景一樣。這樣的按鈕設(shè)計直接給用戶指出了重要的部分,能更加幫助用戶的使用。如圖:

042942pgO

質(zhì)感對比

在生活中不同質(zhì)感組合表現(xiàn)一樣的物品也很多,但是給我印象最深的就是下面這款筆記本,它是采用木質(zhì)和金屬質(zhì)感以及塑料質(zhì)感的對比而成,整個設(shè)計簡潔大氣不失美觀。如圖:

042942Am0

作為界面設(shè)計中被設(shè)計師很看重的界面質(zhì)感設(shè)計。在進行按鈕設(shè)計上考慮最多的質(zhì)感的搭配,現(xiàn)在來說說質(zhì)感對比,往往我們看界面設(shè)計時按鈕都會有幾種狀態(tài),那么怎么來設(shè)計這幾種狀態(tài)能讓按鈕有新的亮點,這值得每個界面設(shè)計師的考慮。在這里思考的質(zhì)感就會有很多種對比,沒有好壞之分,關(guān)鍵看設(shè)計師做這種對比想給用戶一種什么感覺。如圖:

042943RQC

后面我談到的這種方法也是我個人的思考點,至于在界面設(shè)計中怎么運用,值得每個設(shè)計師的思考,大家都知道過馬路,當(dāng)一群人從走往右走的時候,對面一個人走過來?這樣的的動態(tài)是不是很特別呢,是不是有個醒目的感覺。我曾經(jīng)看過一個服裝廣告設(shè)計就是這樣設(shè)計的,動態(tài)的對比是界面的發(fā)展正朝著運動的模式發(fā)展,所以我們在按鈕設(shè)計的運用上可以考慮按鈕的動態(tài)對比的運用將會是怎么樣的。

最后我們無論是在界面設(shè)計中做統(tǒng)一或?qū)Ρ龋覀兌家谡麄€產(chǎn)品的整體性基礎(chǔ)之上來考慮,這樣才能保證產(chǎn)品的完整性。同時我們在設(shè)計界面的時候千萬記住界面的細節(jié)表現(xiàn),因為在界面設(shè)計中載體大小的限制,我們應(yīng)該把握好每一個像素的運用,這樣做出來的界面才會工整美觀。

 

來源:搜狗UED

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!