當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

詳析設(shè)計無邊框按鈕的優(yōu)劣點

2018-01-17 1333 0
導(dǎo)覽列對于多數(shù)手機 APP 而言是個很重要的元素,它不但可以讓使用者明確的了解目前所開啟的功能名稱,在許多時候還是放置導(dǎo)航與重點功能的一個區(qū)域。

以細(xì)節(jié)打動你
在以往,當(dāng)導(dǎo)航列上出現(xiàn)可以點擊的按鈕時,設(shè)計師在視覺表現(xiàn)上都力求讓用戶知道是個按鈕,直至 iOS7 的去材質(zhì)化設(shè)計理念,將這些地方的按鈕的形態(tài)去掉、僅剩下符號與文字告知用戶該「按鈕」的功能。
以細(xì)節(jié)打動你 傳統(tǒng)上,大多數(shù)的按鈕外觀都被設(shè)計成擁有具體的形狀范圍,除了可以有效的提示使用者這是個「可以被點擊」的按鈕組件之外,還可以有效的讓用戶知道這個按鈕的「作用范圍」在哪里,以防誤觸到相鄰的按鈕。這點這在許多地方相當(dāng)有用,尤其是按鈕相當(dāng)多的屏幕小鍵盤或計算器,就需要讓用戶知道按鍵的實際感應(yīng)范圍在哪里。 以細(xì)節(jié)打動你 桌面系統(tǒng)與觸控系統(tǒng)大不同 其實在導(dǎo)覽列上去除每個按鈕實體的形狀并不少見,像是計算機系統(tǒng)中也是有許多組件的長相也不諾我們認(rèn)知中的按鈕,比如說系統(tǒng)列,其實就是一串按鈕的集合體。 以細(xì)節(jié)打動你 計算機系統(tǒng)的主要操作方式是透過鼠標(biāo)光標(biāo),當(dāng)按鈕擁有實體范圍時,它可以幫助用戶確認(rèn)按鈕的大小及位置,使鼠標(biāo)光標(biāo)準(zhǔn)確地移動至按鈕上方點擊,而遇到像導(dǎo)覽列或是工具欄的地方,因為導(dǎo)覽列本身已經(jīng)有實體范圍了,并且也可以利用 hover 特效,幫助用戶進(jìn)一步確認(rèn)光標(biāo)與按鈕之間的關(guān)系。 以細(xì)節(jié)打動你 而手機的觸控屏幕則不需要(也無法)執(zhí)行這么精確的操作,使用者只需要知道大概按壓哪個位置可以達(dá)到需要的功能即可。一般使用手指頭或觸控筆時在觸控屏幕上執(zhí)行操作時,實際上使用者覺得自己的點擊范圍約略就是自己指尖的大小,有時還會因為自己的手指頭而擋住一部分的屏幕范圍。
以細(xì)節(jié)打動你 而事實上我們在屏幕上所看到的按鈕造型,它的任務(wù)只是提示用戶「這是一個按鈕」的用途而已,實際上 按鈕感應(yīng)區(qū)往往大于其所長相的樣子,甚至有可能是被動態(tài)調(diào)整的。 應(yīng)該已經(jīng)很多人已經(jīng)知道 iOS 的鍵盤具有所謂動態(tài)變更感應(yīng)區(qū)的專利設(shè)計,系統(tǒng)會根據(jù)你所輸入的文字來調(diào)整按鈕的感應(yīng)區(qū)域。比如說,當(dāng)你輸入「worl」這個字符串時、在接下來鍵盤上面的「d」的感應(yīng)區(qū)域就會比「s」和「f」 還要來得大,這是因為有「world」這個單字,而沒有「worls」或「worlf」這兩個字。
(下圖為示意圖)
以細(xì)節(jié)打動你 去掉多余細(xì)節(jié)得到的好處 iOS7 的無邊框式的導(dǎo)覽列,將原本的按鈕形式轉(zhuǎn)換成單純文本的設(shè)計,并且僅利用色彩來區(qū)別按鈕與標(biāo)題欄文字,雖然可能在某些文字較長的時候出現(xiàn)空間不夠的問題,但整體而言整體畫面變得更為簡潔了。并且因為移除了實體按鈕的樣式,在視覺感受上可以點擊的范圍也變大了(雖然實際感應(yīng)范圍并沒有改變)。
以細(xì)節(jié)打動你 有得必有失 然而,舍棄了 擬物化設(shè)計可節(jié)省學(xué)習(xí)成本 的好處后,iOS7 在很多地方的設(shè)計其實很容易讓人不知所措。例如剛升上 iOS7 的使用者都會感到困擾的解鎖畫面。在 iOS6 中的設(shè)計為具有明顯箭頭外觀的滑動推桿,相當(dāng)容易上手。而快速啟動相機的圖示也具有立體化的橫桿,暗示了真實世界的使用習(xí)慣:在產(chǎn)品設(shè)計中,許多需要讓使用者抓取的部件都會做出凹凸造型以利使用。 而 iOS7的接口則常常被認(rèn)為過度簡化的設(shè)計,許多部分不僅拿去了控制上的視覺暗示,用戶也必須先嘗試與學(xué)習(xí),才能夠了解畫面上提供了哪些功能、以及該如何操作這個功能。 如果你今天是一個全新的 iOS 使用者,對于 iOS7 右下角的相機圖示,你首先會先嘗試去點擊它還是滑動它呢? 以細(xì)節(jié)打動你 我們在檢視了 iOS7 中的許多細(xì)節(jié)后,發(fā)現(xiàn)了其實 iOS7 已經(jīng)預(yù)設(shè)了使用者都已經(jīng)習(xí)慣了觸控式界面的使用,甚至是習(xí)慣了 iOS 操作的使用者,才能夠更快速的上手這個嶄新設(shè)計的操作系統(tǒng)。 去材質(zhì)、去立體化裝飾的設(shè)計,能為接口在視覺上開創(chuàng)更多可能性、也似乎更適應(yīng)了觸摸屏的特性,然而過度簡化的設(shè)計也會導(dǎo)致了學(xué)習(xí)成本提高、難以上手等問題。因此,接口設(shè)計師必須把握兩者之間的優(yōu)缺點而適度的調(diào)整設(shè)計,才能夠在好用、更易上手之間取得平衡。

16
評論區(qū)(0)
正在加載評論...