前言

• iOS 常见的几种架构：
  • 标签式 Tab Menu
  • 列表式 List Menu
  • 抽屉式 Drawer
  • 瀑布式 Waterfall
  • 跳板式 Springborad
  • 陈列馆式 Gallery
  • 旋转木马式 Carousel
  • 点聚式 Plus

1、标签式

• 优点：
  • 1、清楚当前所在的入口位置
  • 2、轻松在各入口间频繁跳转且不会迷失方向
  • 3、直接展现最重要入口的内容信息

    

• 缺点：
  • 功能入口过多时，该模式显得笨重不实用

    

2、列表式

• 优点：
  • 1、层次展示清晰
  • 2、可展示内容较长的标题
  • 3、可展示标题的次级内容

    

• 缺点：
  • 1、同级内容过多时，用户浏览容易产生疲劳
  • 2、排版灵活性不是很高
  • 3、只能通过排列顺序、颜色来区分各入口重要程度

    

3、抽屉式

• 优点：
  • 1、兼容多种模式
  • 2、扩展性好

    

• 缺点：
  • 1、隐藏框架中其他入口
  • 2、对入口交互的功能可见性（affordance）要求高

    

    

3.1 抽屉式架构简单实现

• ViewController.m

      #import "ViewController.h"
      #import "QCMainViewController.h"
      #import "QCDrawerViewController.h"
  
      // 设定抽屉视图的宽度
      #define DRAWER_VC_WIDTH ((self.view.bounds.size.width * 3) / 4)
  
      @interface ViewController ()
  
      @property (nonatomic, strong) QCMainViewController *mainVC;
      @property (nonatomic, strong) UINavigationController *mainNVC;
  
      @property (nonatomic, strong) QCDrawerViewController *drawerVC;
  
      @end
  
      @implementation ViewController
  
      - (void)viewDidLoad {
          [super viewDidLoad];
  
          // 添加主视图
          self.mainVC = [[QCMainViewController alloc] init];
          self.mainNVC = [[UINavigationController alloc] initWithRootViewController:self.mainVC];
          [self addChildViewController:self.mainNVC];
          [self.view addSubview:self.mainNVC.view];
  
          // 添加抽屉视图
          self.drawerVC = [[QCDrawerViewController alloc] init];
          self.drawerVC.view.frame = CGRectMake(-DRAWER_VC_WIDTH, 0, DRAWER_VC_WIDTH, self.view.bounds.size.height);
          [self addChildViewController:self.drawerVC];
          [self.view addSubview:self.drawerVC.view];
  
          // 抽屉视图显示／隐藏回调
          __weak typeof(self) weakSelf = self;
          self.mainVC.myBlock = ^(BOOL isPush){
  
              CGRect mainNVCFrame = weakSelf.self.mainNVC.view.bounds;
              CGRect drawerVCFrame = weakSelf.self.drawerVC.view.bounds;
  
              mainNVCFrame.origin.x = isPush ? DRAWER_VC_WIDTH : 0;
              drawerVCFrame.origin.x = isPush ? 0 : -DRAWER_VC_WIDTH;
  
              [UIView animateWithDuration:0.5 animations:^{
                  weakSelf.mainNVC.view.frame = mainNVCFrame;
                  weakSelf.drawerVC.view.frame = drawerVCFrame;
              }];
          };
      }
  
      @end

• QCMainViewController.h

      #import <UIKit/UIKit.h>
  
      @interface QCMainViewController : UIViewController
  
      @property (nonatomic, copy) void (^myBlock)(BOOL);
  
      @end

• QCMainViewController.m

      #import "QCMainViewController.h"
  
      @interface QCMainViewController ()
  
      @property (nonatomic, assign, getter = isPush) BOOL push;
  
      @end
  
      @implementation QCMainViewController
  
      - (void)viewDidLoad {
          [super viewDidLoad];
  
          self.view.backgroundColor = [UIColor yellowColor];
  
          self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"抽屉" style:UIBarButtonItemStylePlain target:self action:@selector(pushDrawer)];
  
          // 功能测试
          for (NSUInteger i = 0; i < 5; i++) {
              UIButton *btn = [[UIButton alloc] init];
              [self.view addSubview:btn];
              btn.frame = CGRectMake(20, 200 + i * 60, 100, 50);
              btn.tag = i +1;
              [btn setTitle:[NSString stringWithFormat:@"按钮 %li", i + 1] forState:UIControlStateNormal];
              [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
              [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
          }
      }
  
      // 功能测试
      - (void)btnClick:(UIButton *)btn {
          NSLog(@"按钮 %li", btn.tag);
      }
  
      // 抽屉视图显示／隐藏
      - (void)pushDrawer {
  
          self.push = !self.isPush;
  
          if (self.myBlock != nil) {
              self.myBlock(self.isPush);
          }
      }
  
      // 触摸手势抽屉视图显示／隐藏
      - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
  
          if (self.isPush) {
              [self pushDrawer];
          }
      }
  
      @end

• QCDrawerViewController.m

      #import "QCDrawerViewController.h"
  
      @interface QCDrawerViewController ()
  
      @end
  
      @implementation QCDrawerViewController
  
      - (void)viewDidLoad {
          [super viewDidLoad];
  
          self.view.backgroundColor = [UIColor blueColor];
  
          // 功能测试
          for (NSUInteger i = 0; i < 5; i++) {
              UIButton *btn = [[UIButton alloc] init];
              [self.view addSubview:btn];
              btn.frame = CGRectMake(20, 200 + i * 60, 100, 50);
              btn.tag = i +1;
              [btn setTitle:[NSString stringWithFormat:@"功能 %li", i + 1] forState:UIControlStateNormal];
              [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
          }
      }
  
      // 功能测试
      - (void)btnClick:(UIButton *)btn {
          NSLog(@"功能 %li", btn.tag);
      }
  
      @end

• 效果

  

3.2 抽屉式架构第三方框架实现

• 第三方框架 GitHub 地址
• 效果

  

4、瀑布式

• 优点：
  • 1、浏览时产生流畅体验

    

• 缺点：
  • 1、缺乏对整体内容的体积感，容易发生空间位置迷失
  • 2、浏览一段时间后，容易产生疲劳感

    

5、跳板式

• 优点：
  • 1、清晰展现各入口
  • 2、容易记住各入口位置，方便快速找到

    

• 缺点：
  • 1、无法在多入口间灵活跳转，不适合多任务操作
  • 2、容易形成更深的路径
  • 3、不能直接展现入口内容
  • 4、不能显示太多入口次级内容

    

6、陈列馆式

• 优点：
  • 1、直观展现各项内容
  • 2、方便浏览经常更新的内容

    

• 缺点：
  • 1、不适合展现顶层入口框架
  • 2、容易形成界面内容过多，显得杂乱
  • 3、设计效果容易呆板

    

7、旋转木马式

• 优点：
  • 1、单页面内容整体性强
  • 2、线性的浏览方式有顺畅感、方向感

    

• 缺点：
  • 1、不适合展示过多页面
  • 2、不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面
  • 3、由于各页面内容结构相似，容易忽略后面的内容

    

8、点聚式

• 优点：
  • 1、灵活
  • 2、展示方式有趣
  • 3、使界面更开阔

    

• 缺点：
  • 1、隐藏框架中其他入口
  • 2、对入口交互的功能可见性（affordance）要求高