UI——day12.次级页面（二）

最新推荐文章于 2020-12-12 13:54:08 发布

Tiny_G

最新推荐文章于 2020-12-12 13:54:08 发布

阅读量340

点赞数

分类专栏： UI设计文章标签： ui设计

本文链接：https://blog.csdn.net/qq_45801179/article/details/110195697

版权

UI设计专栏收录该内容

23 篇文章 4 订阅

订阅专栏

APP的导航形式
1. 经典标签:底部标签栏、浮动按钮、舵式导航
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KcnJDbhc-1606379841370)(E:\learning\笔记\img\image-20201126152331703.png)]$
  
  优点：方便用户快速跳转，减少层级的跳转
  
  缺点：占定一部分区域，误操作
2. 抽屉导航
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8VuvRCZ-1606379841372)(E:\learning\笔记\img\image-20201126152553737.png)]$
  
  优点：收纳不常用又不得不有的标签，让主页干净
  
  缺点：抽屉里不易被发现，用户单手操作也费劲
3. Tab导航/Tab选项卡
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9rnUIHhI-1606379841373)(E:\learning\笔记\img\image-20201126152859006.png)]$
  
  ios:分段选择控件
  
  android：固定标签导航
4. 宫格导航
  
  优点：排版规整
  
  缺点：太多对用户不友好
5. 列表导航
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lgVyIZTl-1606379841374)(E:\learning\笔记\img\image-20201126160813399.png)]$
  
  优点：简单、高效
  
  缺点：没有主次，太单调
6. 轮播导航
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sBAno1U4-1606379841375)(E:\learning\笔记\img\image-20201126161050826.png)]$
  
  优点：方便页面切换
  
  缺点：当页面太多的时候，滑动较麻烦
7. 3D卡片式
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oC9fZ2xB-1606379841377)(E:\learning\笔记\img\image-20201126161250199.png)]$
8. 混合导航
APP的页面类型
1. 聚合类
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mTTF1ogK-1606379841378)(E:\learning\笔记\img\image-20201126161531228.png)]$
2. 列表类
3. 内容类：详情页（核心）
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iPnV4OxN-1606379841379)(E:\learning\笔记\img\image-20201126161626588.png)]$
4. 功能类
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iSLmGEXU-1606379841379)(E:\learning\笔记\img\image-20201126161651172.png)]$
空页面设计

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UYmOASOR-1606379841380)(E:\learning\笔记\img\image-20201126161744043.png)]$

1.空页面设计两种场景：
1. 用户的初次使用(未进行操作)
2. 错误结果
2.设计解决方案
1. 使用系统推荐项
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XmlTfxTY-1606379841380)(E:\learning\笔记\img\image-20201126162136213.png)]$
2. 使用操作指引
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nQCh8xIq-1606379841381)(E:\learning\笔记\img\image-20201126162307881.png)]$
3. 情感化表达（唐纳德诺曼情感化设计三层次：本能、行为、反思
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0PfmLpdg-1606379841381)(E:\learning\笔记\img\image-20201126162352898.png)]$
4. 提供新的任务
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Q2NO9bB-1606379841382)(E:\learning\笔记\img\image-20201126162704030.png)]$

Tiny_G

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UI——day12.次级页面（二）

APP的导航形式经典标签:底部标签栏、浮动按钮、舵式导航优点：方便用户快速跳转，减少层级的跳转缺点：占定一部分区域，误操作抽屉导航优点：收纳不常用又不得不有的标签，让主页干净缺点：抽屉里不易被发现，用户单手操作也费劲Tab导航/Tab选项卡ios:分段选择控件android：固定标签导航宫格导航优点：排版规整缺点：太多对用户不友好列表导航优点：简单、高效缺点：没有主次，太单调轮播导航优点：方便页面切换缺点：当页面太多的时候，滑动较麻烦..
复制链接

扫一扫