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