触屏設備的界面布局設計

最近在产品的上线跟进过程中,将触屏设备的界面布局中遇到的一些问题总结一下,希望能抛砖引玉,和大家一起讨论。

1/触屏設備使用場景备

首先是關於兩組關於智能設備的關鍵數字,智能設備的使用在生活中非常頻繁,所以有了非常重要的設計研究。

在了解設計原則之前,務必了解到人是如何持機操作的,以下為4ourth的 研究成果,在生活中絕大多數的用戶的持機方式。

1.1 用戶如何使用智能手機

以下是拇指在操作過程中的最大能夠操作區域,容易/精準區 拇指能否很方便的完成操作,OKAY區,拇指勉強可以完成動操作,一般重要功能不要放在拇指熱區之外。

下圖是手機屏幕的進化圖,從三星Galaxy系列以後,手機屏幕的趨勢越來越大。

1.2 人如何使用平板手機(大屏手機)

單手操作平板手機時,人們必須將拇指之外的四根手指託在機身背後才能保持穩定。這樣就是拇指活動的範圍及相應的熱區減少

2、跨平台基本設計原則

在拇指的操作過程中,骨骼驅動下的活動範圍上圖,和拇指熱區的操作比較一致。

z手會遮住元素

iOS 輸入法中,按住時會在遮住區域之外放大顯示本來的按鍵。

京東金融的APP消息展示,和居中顯示的TOAST相比,能夠避免手指操作時候遮住操作內容。

3、​系統/瀏覽器對設計方案上的限制

在系統和瀏覽器層面,主要集中在以下兩方面:

3.1、不同操作系統的固有交互會影響交互方案

在之前的一個項目的數據分析中,發現某一項關鍵數據的轉化率分析當中,Andriod系統的轉化率比iOS 明顯低,在通過系統去追蹤數據分析中,發現在響應時間數據比較,Andriod系統大約是iOS的時間兩倍,等待時間太長是用戶放棄得到主要原因。

發現數據差異后和前端哥哥進行溝通時候,原因是採用了多頁面的技術,所以在後續的項目中避免了這種的技術方式,上線后觀察一段時間安卓和iOS的關鍵轉化率並沒有很大的差異。

Facebook不同版本的區別

Instagram不同版本的區別

3.2、運行其他APP中的APP(常見的H5),瀏覽器本身的控件和布局的影響

​三條經驗:在線上H5開發遇到的技術問題

1、不要設計滾動的彈窗,在H5的滾動當中,彈窗會隨頁面滾動影響內容的顯示。

2、不要將WEB APP導航和操作欄控件固定在頁面底部,

在Safari中,下滑页面时页面底部分享按鈕会适配显示在屏幕最下方,如果要點擊分享的話,第一次點擊店面底部會讓瀏覽器顯示出底部操作欄,造成一次無效點擊。

在部分瀏覽器底部固定元素,如微信内嵌的H5页面,會隨著滾屏抖動,還會出現位移,然後突然回到所謂的固定位置。

3、盡量不要將導航和操作欄固定在頁面頂部,如果一定要固定,需要考慮好高度和橫屏的樣式。

以上就是对触屏设备几点的总结。希望以后再选择合适的设计方案时能够有所帮助和提醒。

记录在此,抛砖引玉,希望能对大家有所帮助!

——————————

補充:

關於文中提到的人如何使用手機的關鍵數據,推薦大家看以下的兩個文件:

参考链接:

1、How People Really Hold and Touch (their Phones)

2、How People Use Their Devices/What Marketers Need to Know

https://storage.googleapis.com/think/docs/twg-how-people-use-their-devices-2016.pdf

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫