沒錯,這是一個非常沒有吸引力的題目。首先,它是講iOS的,這就意味這一大波數量遠超iPhone的Android用戶可以直接繞過了。其次,它是講一個按鈕的。所以,如果你還在繼續看這篇文章,說明你,作為一個iOS設計師或者設計愛好者,太閑了。
話說回來。最近在做一個設計提案的時候,討論會上,我的設計主管C(此人以后我還會提到,暫時不方便說他的真名),和一眾設計師,都指著我方案中的界面左上角的返回按鈕問:
“你為什么用 <Back ?”
這個問題把我一下子問愣住了。當然,聰明如我,一定是知道,他們言下之意,是問我為什么不用一個更簡潔的 < 來作為返回按鈕。
更重要的是,我們的App,現在用的就是 < 這樣一個簡潔的按鈕。
那么問題就來了,好不容易變簡潔了,為什么又要搞復雜呢?我想,我的主管和一眾設計師一定是這個意思。不然就沒意思了。
作為一個職業設計師,要回答這樣的問題,我當然不能說:“我覺得這樣更好。”這樣模糊不堪的回答的。
然而,同樣作為一個職業設計師,同樣有的時候我們做出一個解決方案的緣由只是在腦子里一閃而過。于是想要好好回答這樣一個問題,就好像要讓時間停下來,好讓我們能細致地描繪閃電的形狀一樣。有意義,卻有點讓人不耐煩。
為了更好的理解這個問題,我專門又查找了一下多年沒看過的Apple開發者文檔。對于App導航欄上的Back按鈕,蘋果有詳盡的解釋。
頁面的標題(Title)位于導航欄的居中位置,返回按鈕位于導航欄的頭部(左側),返回按鈕的標題應當是上一個頁面的標題。例如當你從App首頁(Home)進入一個新頁面,那么這個頁面的返回按鈕就應當是 <Home 。也就是說,在蘋果的設計理念里,返回按鈕在導航系統里,一定程度上起到傳統網頁的“面包屑”作用,告訴用戶,他從哪里來,可以回到哪里去。
當然,在西文(比如英語,或者更倒霉,俄文、德文等單詞很長的語言)環境下,時常會出現標題很長,在手機界面上難以顯示完整的情況,例如“Today's Collection”這樣的標題。這時候,如果你硬要用 <Today's Collection,就有可能出現返回按鈕和導航欄標題撞到一起的情況。于是,蘋果說,在這種情況下,你可以用一個籠統的 <Back 來代替。真周到。
那么,這樣說來,簡化的 < 反而不合理了?別急,蘋果畢竟是比什么Metarial Design要來的老練的。在規范里也允許了自定義的返回按鈕,而實現方式,可以用代碼來隱藏按鈕標題,只留 < ,也可以是用自定義圖片來做返回按鈕。這么做的另一個原因,是蘋果允許漢堡包(或者成為抽屜)交互。抽屜按鈕默認位于導航欄的頭部(左側)位置,當進入二級頁面,左側第一個位置變成返回按鈕時,抽屜按鈕退到左側第二位置。在這個導航結構下(導航欄頭部位置出現兩個按鈕),按鈕就必須進行簡化。設計案例可以參考amazon。
這種較為開明的設計理念,讓iOS里可以容納百花齊放的各種設計風格的App。
那么,回到我們一開始的問題。到底是用 <+標題的返回,還是簡化的 < 呢?
于是,我又研究了一下其他的App是怎么做的。通過一番對比,我們可以發現,iOS自身的系統界面,以及蘋果的原生應用,例如App Store、Apple Music,都是較為嚴格地使用了 <+標題的返回按鈕設計,而像微信、支付寶之類“國民級”應用,也是遵循了這套設計方式,并沒有追求簡化。相反的,例如Fancy這樣的設計風格化很明顯的App,就會采用簡化的 < 按鈕。
這樣,初步判斷下來,我的結論是:
1. 如果你希望你的App足夠易懂,讓什么人都可以用,那么從設計一套誠實、意義明確的導航系統開始,是一個不錯的選擇;
2. 如果你的App本事功能結構就較為復雜,可能同時存在多個平行功能區,或者頁面層級較深,那么使用表意完整的返回按鈕,也不會錯。
除此之外,如果你更加追求整體設計風格的簡潔,那么采用簡化的 < 也沒有什么錯。
寫了這么多,似乎什么問題都沒有解決。