為了讓 iPhone X 更好瀏覽網頁,優秀設計師增加什麼?

iPhoneX 發佈之後,全新的螢幕和為之適配的iOS系統,為我們呈現出全新的交互。

之前我們習慣了的交互,在這塊帶著瀏海的螢幕上,不再完全相同,之前恰到好處的設計,在這塊螢幕上似乎也沒法完美的運作了。

產品設計師Daniel Korpai 發現了在iPhoneX移動端網頁導航上存在的交互上的問題,並撰寫此文。

使用漢堡菜單還是使用標籤式導航,是移動端UI設計師常常會糾結的問題。就目前來看,隨著手機螢幕尺寸不可控制的逐步膨脹,標籤式導航似乎越來越受歡迎。

不過值得注意的是,在移動端上APP會更加傾向於使用標籤頁導航,而絕大多數的移動端網站仍然會使用漢堡菜單作為主要的導航工具。

值得注意的是,漢堡菜單這種設計在目前越來越大的手機螢幕上,可用性正在逐漸降低。

關鍵的痛點

絕大多數的時候,我們會在行進中使用手機,在地鐵上,超市裡,在下班路上,這個時候我們常常無法雙手操作,手上提著袋子,或者拿著一杯咖啡,或者握著地鐵上的扶手。

但是往往這個時候,我們更需要同界面進行快速的交互。多數傳統的移動端網站導航,要麼在頁面的最頂端,要麼在最底端,可是問題在於,手機螢幕太大了。

網頁的漢堡菜單圖標卻常常位於手機的左上角或者右上角,恰好是距離拇指最遠的位置。

面對的挑戰

面對這種痛點,UI和UX設計師們並沒有忽略。有不少設計師會和開發者協同,在網站界面的底部放置一個小尺寸的固定導航欄。

在桌面端上瀏覽的時候,它看起來是懸浮在頁頭的導航,在移動端上,它是懸浮固定在頁面底部的快速訪問式的小的導航按鈕組合。

隨後,這種嘗試逐步演變成了靠近漢堡圖標的一系列快速訪問功能按鈕,這些按鈕代表著這個網站的重要、常用的功能元素,可能是導航、電話、特定頁面的鏈接等等。

可問題在於,在iPhone X上,即使是這樣設計的導航,可用性依然存在問題,承載瀏覽器主要交互的按鈕又需要從界面頂部觸發。

同時,網頁底部內置的菜單其實是會讓人分心,整個體驗是支離破碎的。

落地的設計

所以,我琢磨著設計出一套能夠儘量兼顧到包括iPhoneX在內的所有設備的移動端網頁導航,儘可能讓它易用且解決各種痛點。

我的方法不複雜,就是在移動端網頁靠近底部的位置上增加一個懸浮的菜單按鈕。

這個固定位置的懸浮按鈕居中靠下,無論是左手握持還是右手握持都能正好點擊得到。

為了不受到iPhoneX 螢幕邊緣圓角的影響,也儘量不影響內置的導航工具欄,我決定讓這個按鈕點擊觸發之後,展開是一個橫跨螢幕的菜單欄。

按鈕的位置靠近底部但是不靠近邊緣,不會遮蓋到iPhoneX 的Home鍵。位置的選取並不難。

點擊懸浮按鈕之後,網頁菜單展開,也會觸發並調用系統內置的瀏覽器導航菜單,兩用戶不僅可以在上面的網頁菜單中調用各種針對當前網頁的操作,還能點擊下面的瀏覽器菜單,針對不同網頁進行操作。不過,這個解決方案還不是完美的。

在iOS的 Safari 瀏覽器上,點擊螢幕底部的任何元素,第一次點擊會觸發Safari 瀏覽器內置的菜單欄,第二下才會真正觸發這個懸浮的網站導航欄。

不過開發者可以有針對性地進行調整,欺騙iOS Safari 瀏覽器,讓它在第一下點擊的時候就觸發這個網頁導航。

可用的原型

在設計原型的時候,我的目標是創造一個響應快速而簡短、可交互的原型,確保它在開發人員那邊看起來也是可行的:

最終的思考

這並不是一個太複雜的設計項目,但是在實際需求上,卻是實實在在地解決了令人糾結的痛點。

這個概念設計在大型的移動端設備上其實也能夠輕鬆實現。

不過,它還能繼續深入地探索下去,比如,它在iPad Pro 的瀏覽器當中,這個導航按鈕放置在哪個位置更合適呢?

設計師還可以仔細衡量這個按鈕是否要在滾動瀏覽的時候隱藏起來,怎麼隱藏,何時觸發。

我想,這才是UI/UX設計師需要思考的問題吧。

資料來源:https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化