产品设计之界面框架

设计模式

一、标签导航(微信)

标签导航位于页面底部,标签的分类最好可以控制在5个以内

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

缺点:功能入口过多时,该模式显得笨重不适用

二、舵式导航(微博,底部有【+】标签)

中间用特别的标签,两边是其他操作按钮

优点:需要突出重要且频繁操作的入口

缺点:同标签导航

三、抽屉式导航(知乎)

将菜单隐藏在当前页面后,点击入口即可像拉抽屉一样拉出菜单

优点:节省页面展示空间、让用户注意力聚焦到当前页面、扩展性好

缺点:入口太深,不适合频繁切换的应用

四、宫格导航(美图秀秀)

将入口全部聚合在页面,让用户做出选择,适合各页面之间切换不频繁的应用

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

缺点:无法完成入口间的跳转、不能直接展现入口内容、不能显示太多入口次级内容

五、组合导航

用户需要聚焦内容,同时又需要一些快捷入口能够连接到某页面时就可以采用组合导航

优点:布局灵活,能适应架构的快速调整

缺点:不规则容易有杂乱感

六、列表导航(微信发现)

优点:层次展示清晰、可展示内容较长的标题、可展示标题的次级内容

缺点:同级过多时产生疲劳、排版灵活性不高、只能通过排序、颜色来区分各入口重要程度

七、Tab导航(indicate menu)

本质和标签导航相同,层级较多的情况下,可以采用tab导航,典型场景是用于改变当前的视图,或对当前页面内容进行分类查看

优点:对多内容多层级产品适用

缺点:结构复杂,内容繁多

八、轮播导航(viewpage)

应用信息足够扁平,可以尝试轮播导航

优点:单页面简洁内容,整天性强、线性的浏览方式有顺畅感、方向感

缺点:不适合展示过多页面、非主页面不利于展示和查看

九、点聚导航(自定义卫星聚合控件)

主操作选项或导航合并成一个按钮,浮动在页面上

优点:灵活、展示方式有趣、页面更开阔

缺点:隐藏了更多入口和操作

十、瀑布导航

适用于图片为主的内容,下拉自动加载

优点:浏览时产生流畅体验、排版布局多变、沉浸式体验

缺点:不适合层级架构复杂的产品、容易产生疲劳感

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前的几篇文章谈了谈APP设计中的启动页、引导页、注册【登录】和搜索,本篇文章谈谈导航部分。 同样,我们先来看看导...
    岳山丘阅读 4,045评论 4 87
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,817评论 1 92
  • 平常我们去商场或者景点逛的时候,通常会看到整个景区或者整个商场的导游图,能让我们知道身处何地并且快速的找到目的地。...
    Ronie阅读 7,705评论 5 148
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,765评论 25 709
  • 阳朔四叶草国际幼儿园 2017.5.4 龙老师 我佩服自己 1.佩服自己 对于没睡着的两个孩子从开始的那种审视“你...
    龙之蹊阅读 260评论 0 0