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