@布萊恩臣 :iPhone X 在 2017 年上市以來,全面屏手機就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機型 iPhone 11 的 6.1 寸屏幕,以及 Pro Max 系列的 6.5 寸,各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現(xiàn),物理 Home 鍵都被舍棄改成虛擬按鍵,甚至是沒有虛擬按鍵的手勢滑動操作。
而這些手機都有一個共同的特點,就是屏幕尺寸越來越大。屏幕尺寸變大后,手握手機的方式和界面交互操作方式也隨之改變,那對于設(shè)計而言,是否也應(yīng)該隨之進行改變呢?
想單手點擊屏幕的操作,需要手足夠靈活進行一輪操作才能夠到屏幕上方,過程中稍有不慎,手機隨時會砸地上。作者的手機屏幕已經(jīng)修了幾次,差不多趕上一臺二手機的價格了。
在 2013 年,國外設(shè)計師 Steven Hoober 發(fā)表了一篇《手機界面設(shè)計》的研究報告中,對一千三百名手機使用者進行量化研究數(shù)據(jù):
據(jù)當(dāng)時研究的數(shù)據(jù)可以看出,有近半的用戶是單手使用手機(現(xiàn)在肯定不止)。當(dāng)用戶單手操作的時候,實際拇指可以觸摸到的區(qū)域是如下圖這樣的。綠色區(qū)域是拇指的正常操作區(qū)域,黃色區(qū)域是拇指能觸碰到的最大限度范圍,紅色區(qū)域是觸摸比較困難的區(qū)域。
然而這份研究報告的數(shù)據(jù)是在 2013 年發(fā)布,當(dāng)時還沒有全面屏的出現(xiàn),如果把上面研究結(jié)論的區(qū)域,套用到如今的手機屏幕尺寸上,頂部的紅色區(qū)域會占更大比例。以 iPhone 11 尺寸比例作為參考,如下圖:
拇指可操作范圍大約在 3 分之 2 的區(qū)域,可見想要觸碰到紅色區(qū)域是有一定難度的。也正是因為這份報告只適合當(dāng)時的手機市場情況,在當(dāng)今已經(jīng)不適用了,因此需要重新去考慮如何為大屏幕手機進行界面設(shè)計。
根據(jù) 2020 年手機UX設(shè)計趨勢,大屏幕設(shè)計將會成為熱點。根據(jù)數(shù)據(jù)報告中有說明,2018 年 10 月使用大屏手機的用戶比例是16.3%,到 2019 年 12 月,該數(shù)據(jù)已經(jīng)上升到 41%,并且會在未來更多新機型的出現(xiàn)中持續(xù)上漲。
那隨著大屏幕手機的普及,就意味著設(shè)計師在設(shè)計界面的時候,要為大屏幕手機的使用場景進行界面調(diào)整,避免用戶難以使用的體驗問題。以下是我整理的一些設(shè)計建議方案:
1. 頭部區(qū)域設(shè)計更高
通過將標題欄的信息區(qū)域放大,盡量把主要操作內(nèi)容向拇指區(qū)域靠近。
2. 常用導(dǎo)航與操作居于底部
比起導(dǎo)航欄放在頂部,更適合大屏幕手機的方式是將導(dǎo)航和重要操作盡量往屏幕底部放置。
3. 手勢操作頁面切換與返回
抖音和 Instagram story 等短視頻應(yīng)用界面都是通過手勢滑動屏幕的方式,對頁面進行切換,操作的學(xué)習(xí)成本很低,而且主要操作也在屏幕底部。這種操作方式也會在今年越來越多地被使用。
4. 提示彈窗從底部升起
常用的彈窗,很多是設(shè)計在屏幕中間彈出,為了適配大屏幕,不妨嘗試從底部彈出,關(guān)鍵選項都能輕松選擇,提高轉(zhuǎn)化率。
5. 使用大卡片
屏幕尺寸變大以后,使用整張大卡片可以讓用戶瀏覽內(nèi)容更專注,大面積的配圖和留白,也能提高用戶的點擊欲望。
除此以外,作為手機廠商,在發(fā)布大屏幕手機的時候,就有對界面操作做了一些對應(yīng)系統(tǒng)級的設(shè)計調(diào)整,比如界面下拉懸停,鍵盤單手模式,屏幕邊緣滑動返回等等。
大屏幕尺寸已經(jīng)是趨勢,屏幕大意味著內(nèi)容可以更大限度地得到展示,有利于產(chǎn)品提供更多的服務(wù),不再糾結(jié)首屏無法展示完主要內(nèi)容。在這個信息爆炸的時代,用戶也不再滿足于小屏幕的瀏覽方式。可以說,大屏幕已經(jīng)是無法改變的趨勢。與其擔(dān)心問題到來,設(shè)計師更應(yīng)該思考如何去適應(yīng)產(chǎn)品的快速迭代,不斷更新自己的設(shè)計思維模型,更全面思考問題,產(chǎn)出更合理、體驗更好的設(shè)計方案。
希望本文內(nèi)容可以對你有所啟發(fā)。
轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
更多精彩文章:
手機及小程序界面設(shè)計之一:讓設(shè)計更有說服力的20條經(jīng)典原則:菲茨定律
手機及小程序界面設(shè)計之六:讓設(shè)計更有說服力的20條經(jīng)典原則:菲茨定律
手機及小程序界面設(shè)計之八:如何適配iPhone X?來看滴滴出行的實戰(zhàn)案例復(fù)盤!
1. 理論表述
任意一點移動到目標中心位置所需要的時間,與目標距離正相關(guān),與目標大小負相關(guān)。
2. 研究背景
1954 年,Paul Morris Fitts 根據(jù)信息類比提出一個假設(shè),該假設(shè)能夠量化「移動到目標選擇任務(wù)」這個操作的難度「1」。雖然該假設(shè)還未涉及到人機交互中的具體參數(shù),卻給了后來的交互研究人員極大的啟發(fā)。
我們現(xiàn)在經(jīng)常看到的 Shannon 公式(即上面那個公式)是由約克大學(xué)教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」,該變體被廣泛地應(yīng)用于需要指針操作的人機交互系統(tǒng)當(dāng)中。作為交互設(shè)計和 UI 設(shè)計的理論基礎(chǔ),它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數(shù)關(guān)系:因為以 2 為底的指數(shù)函數(shù)是遞增函數(shù),所以,T 與 D 正相關(guān)(D 越大 T 越大),而與 W 負相關(guān)(W 越大 T 越?。?
人們做出一個移動指針的操作通常需要兩步:
菲茨定律所包含的兩點內(nèi)容:
綜合兩者來看,菲茨定律中的 D 在第一步中起更為明顯的作用,而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示,主要也是從這兩方面入手。
案例1:系統(tǒng)右鍵菜單,微信彈出菜單
最典型的例子就是菜單,無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶,點擊這類按鈕之后一定會有后續(xù)的任務(wù)和操作,所以這些任務(wù)都被安排在了距離所點擊區(qū)域更近的菜單中。
案例2:夸克和 Safari 的 url 輸入框位置比較
另外一個例子是瀏覽器的搜索欄輸入框,現(xiàn)在已經(jīng)有一些瀏覽器(比如簡單搜索、夸克)會將輸入框以及一些其他更常用操作置于底部,這是因為我們正常握持手機時,大拇指離底部更近,所以需要進行點擊操作的話底部的輸入框操作起來更方便,也更快。
這一點在現(xiàn)今的 APP 中做得已經(jīng)非常到位了。
案例3:哈羅出行
作為哈羅單車租用操作的入口,頁面中的「開鎖」按鈕做得足夠大,用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄(也就是開始)按鈕也是一樣的道理。
還有一個比較特殊的就是對于邊角的利用,無論是在 Windows 還是在 MacOS 中,邊角總是有一些比較重要的操作,比如 Windows 的「開始菜單」(在左下角),MacOS 的 Dock 欄(在底部)以及頂部狀態(tài)欄,包括 Mac 特有的觸發(fā)角。
案例4:MacOS 觸發(fā)角設(shè)置
為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權(quán)重相當(dāng)之高的組件或者操作呢?在硬件設(shè)備中邊角是一個極其特殊的存在,由于指針再怎么移動都不可能超越屏幕邊界,只能停留在邊界上,所以邊界對于用戶的操作來說是「無限可觸發(fā)」的,這有什么意義呢?這意味著對于隱性存在的目標來說,W 趨于無限大。
既然 W 趨于無限大,根據(jù)公式時間 T 就趨于常量 a。
結(jié)論就是無論指針距離目標物多遠,所需要花費的時間都已經(jīng)達到了理論的最小值,輕松且高效。而在移動 APP 中同樣有邊角的應(yīng)用,比如最近拿了 Google Play 設(shè)計大獎的 Drops。
案例5:Drops
創(chuàng)新的交互將屏幕底邊充分的利用了起來,只要將單詞移到底部,就代表用戶已經(jīng)記住這個單詞了。注意整個底部都是可以觸發(fā)的,而不僅僅是腦袋那個圓形區(qū)域。本來「移動」這個操作對于「按鈕」來說更加繁瑣,但是在 Drop 的應(yīng)用場景下這樣的移動反而沒有覺得麻煩,滑起來相當(dāng)帶勁。
菲茨定律給我們的啟示通常都是正向的,都是以縮短用戶的操作時間為主要目標,但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時,可以逆向運用菲茨定律,增加操作的復(fù)雜度。
案例6:iPhone 關(guān)機和微信刪除聊天窗
iPhone 的滑動關(guān)機延長了用戶關(guān)機操作的時間,以提醒用戶此操作為不可逆,需要謹慎操作。微信也是同理,甚至還縮小了刪除按鈕的大小,以達到警示的目的。
另一個典型就是彈出窗口的關(guān)閉按鈕。
案例7:Luckin Coffee 的彈出窗
彈出窗口里一般都包含了開發(fā)商的推廣、廣告、運營活動等等,所以開發(fā)商會希望用戶花盡量多的時間去注意到它們的內(nèi)容,這時候雞賊的開發(fā)商會把關(guān)閉按鈕做得又小又遠(遠離視覺中心),讓用戶花更多的時間去尋找和點擊它們,效果拔群。
注意點1:D 不能過分短
過分短的間距不僅無法提升操作效率,反而會造成視覺壓力從而降低用戶體驗。
反面案例1:唯物魔改版
按照菲茨定律魔改的唯物登錄頁面,理應(yīng)操作得更迅捷方便,然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構(gòu)成之外,我嘗試著點了一下覺得十分逼仄擠手,所以過度縮減按鈕間的間距并不合理。
注意點2:W 不能過分大
大尺寸的點擊目標確實能夠有效地降低用戶操作成本,但是過分大的目標也會很直接地破壞畫面的平衡,浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關(guān)系,當(dāng)按鈕已經(jīng)足夠大時,再增大就沒有什么體驗上的提升了,如下圖所示。
反面案例2:KEEP 魔改版
與唯物類似,當(dāng)按鈕大到一定程度之后,會對畫面造成恐怖的破壞效果。
參考資料
轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司