App 首頁相關UI结构
2020-10-15 17:21:15 0 举报AI智能生成
APP首页看似很平常，其实涉及到的功能还是比较多的，有些功能点也比较细微，不同的产品首页功能布局也不一样。该思维导图简单的概括了产品首页通用的一些功能结构，希望能对刚入门的UI设计师有些帮助。
作者其他创作
大纲/内容
授權彈窗
網絡授權、消息通知授權、獲取定位、相機/相冊授權……
麥克風、日曆、藍牙、通訊錄……
彈窗樣式
系統樣式
iOS
固定文字+說明
一次性出現
Android
固定文字
可以多次出現
iOS二次授權
deep-link引導至系統設置打開相應授權
預授權
試探用戶，點擊button後彈窗系統授權彈窗
下拉刷新
下拉刷新的過程
页面整体下拉，顶部出现提示文案“松开即可刷新”，—松开后显示旋转动效+“刷新中”，—刷新成功后动效消失（toast提示刷新数据情况），页面自动置顶/如果刷新失败进行toast提示。
如果用户在短时间内进行多次下拉刷新，需要进行toast提醒（比如：“你的操作太过频繁啦”），防止出现页面卡顿或服务器请求失败的情况。
特色動效，融入品牌基因
将自己的品牌基因融合进去，并加以趣味活泼的文案修饰，给人一种惊喜感，可以加深了用户对产品的印象
自動刷新
长时间没有登录，再次登錄
实时查看数据
持續下拉進入產品二樓
優勢
放到二楼可以保证2个模块的独立性，可以互不打扰。
例子
淘寶
微信
微信小程序
盒馬
城市/地址定位
電商類首頁頂部不保留定位功能入口
團購類產品首頁定位到區/縣/市等
外賣/及時配送類產品首頁需要定位到具體地址
搜索模塊
搜索入口形式
搜索框
搜索框
搜索icon
搜索關鍵詞
掃一掃/相機掃碼識別
搜索icon
搜索頁面主要組件
搜索框
搜索icon
热搜关键词（+扫一扫/相机扫描识别）
通过扫描条码或商品进行识别，得出搜索结果和类似商品；
关键词联想
这个功能十分重要，可以减少用户输入，每输入一个字段就要加载一次，将联想的结果展示出来，方便用户快速找到目标搜索对象；
清空关键词button
键点击快速清空错误关键词或更换新的关键词；
返回/取消/搜索button（+分类tab）
如果搜索框左侧没有返回button，右侧就会有取消button；如果左侧有返回button，右侧取消button可以变为搜索button；
分类tab
针对当前分类下进行关键词搜索，更加快速、准确；
历史搜索
保留历史搜索记录可以方便用户一键点击，再次进行搜索，可以避免重复操作，当然删除搜索记录也很必要，可以减少页面无用信息的占比，也可以有效保护用户的搜索隐私；
清空搜索记录（+热门搜索+语音输入）
热门搜索
可能是搜索热度较高的关键词；运营需要主推的关键词；大数据推荐猜你感兴趣的关键词；
语音输入
用户通过语音直接说出关键词，免去输入步骤，可以方便老年人/残疾人或是特殊场景下也能使用搜索功能；
输入键盘（搜索button）
进入搜索页键盘默认弹出，搜索button最好设置在键盘上，会更加方便，关键词输入结束后用户上下滑动查看搜索结果时键盘要自动收起。
分支主题
掃一掃
產品掃一掃頁面對比
首要功能
掃描識別
文字提示引導
判斷環境光，及時引導打開手電筒
導航形式
底部標籤式導航
最常見、最常用、最符合用戶習慣的樣式
一般作為全局導航使用；導航的內容最直觀，不會被隱藏，並且被選中的標簽會高亮顯示，明確告訴用戶當前所在位置，用戶可以輕松點擊標簽進行頁面切換；
頂部Tab式導航
很常見，常與底部標籤式導航搭配使用
音樂播放類軟件，tab導航作為一級主導航
舵式導航
也叫點聚式導航，可以給用戶沉浸式體驗
設計上會和其他標簽有明顯區分並重點突出了自己，很容易吸引用戶的注意力，也有鼓勵用戶使用該功能的意味，但是因為過于明顯所以會弱化其他功能入口
抽屜式導航
也叫漢堡或側邊欄導航
多用于閱讀類産品
節省了屏幕空間，自然可以讓頁面看起來簡潔美觀
宮格式導航
代表：美圖秀秀
子主题 1
在視覺上比較整齊直觀，方便用戶快速查找
同等級功能之間割裂感比較大又或是功能之間沒有很大的關聯可以采用這種導航形式
列表式導航
表現形式：純文字/icon + 文字/文字 + 圖片等
數量上也可以很多，並沒有局限性
常作為二級導航和其他導航搭配進行使用，因為不方便用戶切換功能，並且太靠下的列表可能點擊率不高；
懸浮式導航
節省屏幕空間，但會對用戶的視覺形成干擾
閱讀類或工具類産品中比較常見
頂部banner廣告位
設計尺寸
常見尺寸：2:1和16:9
流出頂部危險區域
頂部黑色透明遮罩：70%-0%
上滑時顯示狀態欄和導航欄底色
分類模塊入口
一般有1-2頁，數量4-20個不等
icon設計：面性圖標
面性圖標 + 圓形/方形底色（漸變色）
“資訊/新聞/快報/頭條”入口
字體：需要設計，可以和品牌字體有相關性
內容：輪播，3秒左右進行更換一次
底部標籤欄
icon設計
融入品牌基因
線性
品牌色區分表述選中狀態
線轉面結合使用
品牌色區分表示選中狀態
面性
品牌色區分表述選中狀態
線性icon的粗細、圓角角度大小、開口的大小等都要保持一致
反饋
視覺
線性/面性、顏色、動效
聽覺
音效
隱藏功能
再次點擊icon置頂頁面功能
加載方式
下拉刷新加載
進度條加載
多用於web端/移動端H5
全屏加載
進入新頁面時的加載方式
建議使用情感化設計
分段加載
一次性加載出多少條數據
分步加載
先加載出頁面的框架，在加載出頁面的內容
懶加載
指在用戶使用到時才會加載
預加載
對用戶下一步的操作進行預判，提前加載下一頁內容
智能加載
指在不同網絡環境下，加載的內容不一樣
收藏
收藏
0 条评论
下一页
