詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn)發(fā)布者：本站     時(shí)間：2021-12-24 11:12:04

導覽列對于多數手機 APP 而言是個(gè)很重要的元素，它不但可以讓使用者明確的了解目前所開(kāi)啟的功能名稱(chēng)，在許多時(shí)候還是放置導航與重點(diǎn)功能的一個(gè)區域。

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

在以往，當導航列上出現可以點(diǎn)擊的按鈕時(shí)，設計師在視覺(jué)表現上都力求讓用戶(hù)知道是個(gè)按鈕，直至 iOS7 的去材質(zhì)化設計理念，將這些地方的按鈕的形態(tài)去掉、僅剩下符號與文字告知用戶(hù)該「按鈕」的功能。

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

傳統上，大多數的按鈕外觀(guān)都被設計成擁有具體的形狀范圍，除了可以有效的提示使用者這是個(gè)「可以被點(diǎn)擊」的按鈕組件之外，還可以有效的讓用戶(hù)知道這個(gè)按鈕的「作用范圍」在哪里，以防誤觸到相鄰的按鈕。這點(diǎn)這在許多地方相當有用，尤其是按鈕相當多的屏幕小鍵盤(pán)或計算器，就需要讓用戶(hù)知道按鍵的實(shí)際感應范圍在哪里。

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

桌面系統與觸控系統大不同

其實(shí)在導覽列上去除每個(gè)按鈕實(shí)體的形狀并不少見(jiàn)，像是計算機系統中也是有許多組件的長(cháng)相也不諾我們認知中的按鈕，比如說(shuō)系統列，其實(shí)就是一串按鈕的集合體。

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

計算機系統的主要操作方式是透過(guò)鼠標光標，當按鈕擁有實(shí)體范圍時(shí)，它可以幫助用戶(hù)確認按鈕的大小及位置，使鼠標光標準確地移動(dòng)至按鈕上方點(diǎn)擊，而遇到像導覽列或是工具欄的地方，因為導覽列本身已經(jīng)有實(shí)體范圍了，并且也可以利用 hover 特效，幫助用戶(hù)進(jìn)一步確認光標與按鈕之間的關(guān)系。

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

而手機的觸控屏幕則不需要(也無(wú)法)執行這么精確的操作，使用者只需要知道大概按壓哪個(gè)位置可以達到需要的功能即可。一般使用手指頭或觸控筆時(shí)在觸控屏幕上執行操作時(shí)，實(shí)際上使用者覺(jué)得自己的點(diǎn)擊范圍約略就是自己指尖的大小，有時(shí)還會(huì )因為自己的手指頭而擋住一部分的屏幕范圍。

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

而事實(shí)上我們在屏幕上所看到的按鈕造型，它的任務(wù)只是提示用戶(hù)「這是一個(gè)按鈕」的用途而已，實(shí)際上 按鈕感應區往往大于其所長(cháng)相的樣子，甚至有可能是被動(dòng)態(tài)調整的。

應該已經(jīng)很多人已經(jīng)知道 iOS 的鍵盤(pán)具有所謂動(dòng)態(tài)變更感應區的專(zhuān)利設計，系統會(huì )根據你所輸入的文字來(lái)調整按鈕的感應區域。比如說(shuō)，當你輸入「worl」這個(gè)字符串時(shí)、在接下來(lái)鍵盤(pán)上面的「d」的感應區域就會(huì )比「s」和「f」 還要來(lái)得大，這是因為有「world」這個(gè)單字，而沒(méi)有「worls」或「worlf」這兩個(gè)字。

(下圖為示意圖)

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

去掉多余細節得到的好處

iOS7 的無(wú)邊框式的導覽列，將原本的按鈕形式轉換成單純文本的設計，并且僅利用色彩來(lái)區別按鈕與標題欄文字，雖然可能在某些文字較長(cháng)的時(shí)候出現空間不夠的問(wèn)題，但整體而言整體畫(huà)面變得更為簡(jiǎn)潔了。并且因為移除了實(shí)體按鈕的樣式，在視覺(jué)感受上可以點(diǎn)擊的范圍也變大了(雖然實(shí)際感應范圍并沒(méi)有改變)。

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

有得必有失

然而，舍棄了 擬物化設計可節省學(xué)習成本 的好處后，iOS7 在很多地方的設計其實(shí)很容易讓人不知所措。例如剛升上 iOS7 的使用者都會(huì )感到困擾的解鎖畫(huà)面。在 iOS6 中的設計為具有明顯箭頭外觀(guān)的滑動(dòng)推桿，相當容易上手。而快速啟動(dòng)相機的圖示也具有立體化的橫桿，暗示了真實(shí)世界的使用習慣：在產(chǎn)品設計中，許多需要讓使用者抓取的部件都會(huì )做出凹凸造型以利使用。

而 iOS7的接口則常常被認為過(guò)度簡(jiǎn)化的設計，許多部分不僅拿去了控制上的視覺(jué)暗示，用戶(hù)也必須先嘗試與學(xué)習，才能夠了解畫(huà)面上提供了哪些功能、以及該如何操作這個(gè)功能。

如果你今天是一個(gè)全新的 iOS 使用者，對于 iOS7 右下角的相機圖示，你首先會(huì )先嘗試去點(diǎn)擊它還是滑動(dòng)它呢?

詳細解析網(wǎng)頁(yè)無(wú)邊框按鈕的優(yōu)劣點(diǎn),PS教程,

我們在檢視了 iOS7 中的許多細節后，發(fā)現了其實(shí) iOS7 已經(jīng)預設了使用者都已經(jīng)習慣了觸控式界面的使用，甚至是習慣了 iOS 操作的使用者，才能夠更快速的上手這個(gè)嶄新設計的操作系統。

去材質(zhì)、去立體化裝飾的設計，能為接口在視覺(jué)上開(kāi)創(chuàng )更多可能性、也似乎更適應了觸摸屏的特性，然而過(guò)度簡(jiǎn)化的設計也會(huì )導致了學(xué)習成本提高、難以上手等問(wèn)題。因此，接口設計師必須把握兩者之間的優(yōu)缺點(diǎn)而適度的調整設計，才能夠在好用、更易上手之間取得平衡。