移動端app界面布局方式

關于移動端app界面的7種結構體例和其適用性詳解

東西/原料

一臺電腦
ps

方式/步調

1
大屏移動式結構
.（IOS10起頭呈現）——總結
.主要的一點削減滑動次數5~10次之內
.適合展示什么信息?
.數目有限層級一致
.界面相對于高端產物，以少量的優質保舉詳情為本家兒
.解放屏幕橫標的目的區域，分頁閃屏，保舉信息心猿意馬制方案
.削減跳轉，操作較為簡單，條理不成太多
.信息擴展性較差
.信息量受到制約展示不成太多，插手縮略信息來填補頁數少的缺陷
.Eg:BOSS直聘
2
宮格局結構
.展示大量信息）展示豎式信息，橫標的目的要節制——總結
.橫標的目的留白要比縱標的目的的大一些，宮格之間的間距要≤24px
.不法則，或法則色塊組成，圖片、視頻、功能頁面
.簡單直不雅、適合初級用戶
.層級不成太多
.卡片式，柵格化，瀑布流
3
列表式結構
.列表高度≥88PX 跟著信息的增添而轉變
.最早也是最輕易接管的信息展示體例之一（包羅手風琴）
.可以無限延長信息，可是查找信息比力麻煩
.多連系其他形式利用，如標簽式結構（分組選項卡）搜刮框搜刮提醒
4
標簽式結構
.iOS平臺中多用于底部或頂部
.安卓，WP選項卡凡是位于頂部
.削減界面跳轉的層級，反復操縱統一屏幕
.沒有過多的埋沒信息，相對于未選擇的選項，就會呈現埋沒信息，信息量較大
.信息量龐大的網站App利用居多信息的層級屬于平行關系
5
側滑式結構
.合用于中高級用戶，經由過程特別提醒，動效來吸引用戶來注重
.屬于埋沒信息，對客戶自己來講要對APP有必然的領會，凡是利用“漢堡包”按鈕進行提醒或者小我頭像進行提醒
.削減界面跳轉，信息延展性強，增添當前頁面的操縱率
.也會包含埋沒信息
.左側滑動優先連系右側滑動輔助
6
不法則結構
.不常見-可以增添展示型信息，不要過多的功能（按鈕）放到手部熱區中
游戲型頁面，數據展示型，指南針地圖
.用于高級心猿意馬制型APP，凡是在東西型App，手游界面中利用較多
.界面個性美不雅
.延展性較差
.對用戶要求比力高，會發生必然的進修當作本
.以閱讀性信息為本家兒，人機交互性功能操作削減，其顯示位置要充實考慮費茨法則來加以示范席克心猿意馬律
.頁面按鈕一般是5個以內 3個
7
夾雜式結構
.沉浸型應用
.效率型應用（o2o）
.東西型應用（產物中的從屬功能進行表現）

發表于 2019-02-19 22:44
閱讀 ( 1277 )
分類：其他類型

移動端app界面布局方式

東西/原料

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章