Jolson's Blog

导航和框架设计

好的导航和框架的特点:

  • 功能和内容布局合理,最快发现最重要的功能和内容。这是一个导航是否好用的最基本要求,通常一个产品中,会有数十项功能和内容提供给用户,如果让用户不需要学习,一看就知道如何找到我们提供的功能和内容,是我们设计导航的核心目标。
  • 快速的消息传达性。在一些社交型的产品中,消息传达性至关重要,用户互动的频率是社交网站的关键指标,而用户互动很多是通过消息通知来实现的,所以消息传达就变得非常重要。
  • 良好的内容承载性。导航的设计,是否能将你提供的很容很好的展现出来,比如新闻阅读产品需要考虑阅读体验,你要考虑如何将阅读体验提高。
  • 良好的扩展性。为未来的内容和功能迭代演进,提供良好的扩展性。

iPhone App 常见的导航结构

九宫格式导航

  • 优点:展示给用户的功能较多,用户寻找方便,拓展性好
  • 缺点:无法让用户第一时间看到内容
  • 适用情况:工具型 app,功能点彼此独立,功能多,需要拓展性好

Tab 式导航

  • 优点:用户可以第一时间看到内容,展示给用户的功能够用,用户寻找方便,扩展性还不错
  • 缺点:这样的 app 比较多,个性化不强。不适合入口较多的功能型 app。
  • 适用情况:社交产品、工具型 app(比如 Dropbox)

Tab 式导航的多个变种

抽屉式导航

  • 优点:空间大,信息浏览体验非常好,抽屉导航的扩展性极佳
  • 缺点:主界面之外的入口比较隐蔽,进入成本稍高
  • 适用情况:用户 90% 的时间都花在浏览首页内容的社交或阅读类 app

平铺式导航

  • 优点:内容展示效果好,设计发挥空间大,可有自由创新
  • 缺点:设计难度高
  • 适用情况:阅读类 app、功能单一的 app,比如天气、记账、新闻等

iPad app 常见的导航结构

  • Tab 式导航
  • 两栏式导航
  • 抽屉式导航
  • 侧边导航,两栏、三栏
  • 平铺式

Web 常见的导航结构

  • 两栏
  • 三栏
  • 瀑布流
  • 辅助导航