• Android UX & UI 最佳实践: 设计有效的导航


    Best Practices for User Experience & UI

    Designing Effective Navigation

      导航:帮助用户有效直观地使用你的应用。

    Planning Screens and Their Relationships

      应用的信息模型可以用实体关系图表示(entity-relationship diagrams (ERDs))。

      定义出信息模型之后,就可以定义你的app所需要的所有屏幕画面。然后定义出屏幕之间的直接关系、跳转逻辑。这样就得到了screen map

      之后就可以设计一些细节,比如导航跳转按钮之类的。

    Planning for Multiple Touchscreen Sizes

      Android设备是有不同的类型和尺寸的,比如手机、平板,甚至还有电视。

      你的应用应该能够适配不同的屏幕尺寸和方向,提供平衡且美观的布局。

      当平板横放的时候,通常是从左到右,详细程度递增。

      很多桌面应用和网站都提供了左侧导航板,或者使用一种master/detail的两面板布局方式。

      单面板一般使用Activity实现,多面板可以用Fragment实现。

      多面板需要考虑的一个重要问题就是屏幕方向问题,当多面板解决了平板上的布局问题时,在横向可能工作得很好,但是垂直屏幕时又出了问题,所以可能会需要根据不同的屏幕方向写不同的布局。

      在解决平板纵向布局问题时,一些常用的策略如下:

      Stretch:拉伸宽度。

     

     

      Expand/collapse:展开/折叠:比如将左侧导航列表折叠。

     

     

      Show/Hide:显示/隐藏:这种方法将左侧完全隐藏。

     

      

      Stack:重新堆叠你的panel。

     

      通过提供多面板的布局,我们可以把屏幕结成组,可以重新规划一下上一节中的screen map。

     

    Providing Descendant and Lateral Navigation

      导航有两种,纵向和横向的,也即继承的和横向的(Descendant and Lateral)。

     

     

      兄弟屏幕的关系也分两种:关系相关的(collection-related)和部分相关的(section-related)

     

     

      前者表达同一个集合中的项目之间的关系,部分相关,表达的是同一个parent的不同部分。

     

    Buttons and Simple Targets

      这种section-related的屏幕之间,最直观的导航方式是在parent里提供各种按钮之类的控件来进行触摸导航。

      选择了控件后,相应的child screen被打开,完全取代当前屏幕。

      一种常用的基于button的模式就是dashboard(仪表盘)模式。这个模式是一种展现所有部分的很好的方法。

      大的目标会让UI更易用。Dashboard模式通常用于同等重要性的部分,但是这个模式在更大的屏幕上看起来并不是很漂亮,并且用户需要额外的这一步才能进入到真正的应用内容中。

    Lists, Grids, Carousels, and Stacks

      对于集合关系的元素,比如文字信息,最直观的方式是垂直滚动的列表。

      对于照片或者视频,比较常用的是:竖直滚动的格子(grid),水平滚动的列表(有时叫做carousels(旋转木马?)),或者是stacks(有时也叫cards)。

     

      这种list-based模式的导航通常用于显示元素较多的集合,但是也会有问题,那种项目较多、较深的列表(drill-down list navigation),通常是没有效率和繁重的,要得到一个特定的部分有可能需要点击(触摸)很多次,用户体验会不佳,尤其对比较着急的用户来说。

      使用垂直的列表也比较尴尬,在大的屏幕上,宽度被扩展,高度一定,会有很多没用的空白。

      一种缓解的方法就是加入文字信息,说明一下;另一种就是在这个list旁边加入其它的一个水平的面板。

    Tabs

      对于水平导航来说,使用tab是很常见的。Tab比较适合于小的集合(小于4)的section-based的屏幕。

      Tab应该一直保持一致,每次选择Tab之后只有Content区域会发生变化,并且Tab应当一直都在。

      Tab应该没有历史,并且应该在顶端。

    Horizontal Paging (Swipe Views)

      另一个比较流行的水平导航模式是水平的page,也叫swipe views

      这种模式最好用于collection-related的屏幕。和tab一样,这种模式也可以嵌套其他。

      这种水平滑动page模式适用于内容有相似性,并且页数比较少的情况。

      可以和Tab结合。对于collection-related的项目来说,如果屏幕之间有顺序关系,这种page模式是最直观的。

      如果子screen有水平平移的表面,比如地图,是不适用这种模式的。

     

    Providing Ancestral and Temporal Navigation

      导航不只是往下往child走,还应该向上向祖先走。并且要遵循Android的约定,提供返回键的回退功能

    Support Temporal Navigation: Back

      提供临时的导航,即历史回退,是Android系统重要的一个方面。

      所有的Android用户都会期待back键会把他们带回到上一个屏幕。

      屏幕历史的最根部是Launcher application,也即桌面,即按Back按钮足够多的次数后回返回到桌面,并且此时再按Back,就什么事也不会发生了。

    Provide Ancestral Navigation: Up and Home

      在Android 3.0之前,最常见的向上导航就是Home返回。

      这通常是通过设备上的菜单按钮,或者屏幕左上角的Home按钮(经常是作为Action Bar的一部分)实现的。

      通过选择Home,用户通常会被带到屏幕继承关系的最上层,即应用的首页。

      提供对应用首页的直接入口可以给用户安慰和安全感。不管他们在应用的哪个部分,只要他们选择Home,就可以回到熟悉的首页。

      Android 3.0引入了Up,在Action Bar里作为Home键的替代品。

      选择Up,用户将会返回本继承层次中的父屏幕。

      这种导航通常是返回上一个屏幕(像Back键一样),但也不总是这样。

      程序员必须要确定每个屏幕的Up都会返回一个单独的、确定的父画面。

      在有些情况下,Up也可以用来执行一些动作,比如侧边栏的显示隐藏控制

      实现注意:实现Home或者Up的时候,要注意back stack的清理。

      可以在intent中用标记 FLAG_ACTIVITY_CLEAR_TOP and FLAG_ACTIVITY_NEW_TASK来实现。

    Putting it All Together: Wireframing the Example App

      http://developer.android.com/training/design-navigation/wireframing.html

     

     

    参考资料

      Best Practices for User Experience & UI

      http://developer.android.com/training/best-ux.html

      Designing Effective Navigation

      http://developer.android.com/training/design-navigation/index.html

      Multi-pane Layouts

      http://developer.android.com/design/patterns/multi-pane-layouts.html

      Navigation

      http://developer.android.com/design/patterns/navigation.html

     

  • 相关阅读:
    将数据导入PostGIS
    图层管理
    CentIOS PHP 扩展库
    js 笔记 数组(对象)
    JSP 中的 Request 和 Response 对象
    ubuntu 安装 LAMP
    html 学习笔记
    Struts Ajax Json
    Servlet 笔记
    PHP+MYSQL 出现乱码的解决方法
  • 原文地址:https://www.cnblogs.com/mengdd/p/3441200.html
Copyright © 2020-2023  润新知