移动应用UI设计模式 7.2分
读书笔记 第一章至第二章
香蒲
  • 第 1 章导航
    • 1.1 主要导航模式
      • 1.1.1 跳板式……
      • 1.1.2 列表菜单式…
      • 1.1.3 选项卡式
      • 1.1.4 陈列馆式…
      • 1.1.5 仪表式
      • 1.1.6 隐喻式
      • 1.1.7 超级菜单式
    • 1.2 次级导航模式
      • 1.2.1 页面轮盘式
      • 1.2.2 图片轮盘式
      • 1.2.3 扩展列表式…
  • 第 2 章表单…
    • 2.1 登录表单……
    • 2.2 注册表单
    • 2.3 核对表单
    • 2.4 计算表单
    • 2.5 搜索表单
    • 2.6 多步骤表单…
    • 2.7 长表单…

第 1 章导航

主要导航模式:

跳板式(Springboard)、

列表菜单式(List Menu)、

选项卡菜单式 (Tab Menu)、

陈列馆式(Gallery)、

仪表式(Dashboard)、

隐喻式(Metaphor)、

超级菜单式(Mega Menu)。

次级导航模式:

页面轮盘式(Page Carousel)、

图片轮盘式(Image Carousel)、

扩展列表式(Expanding List)。

1.1 主要导航模式

1.1.1 跳板式……

常见的布局形式是 3×3、2×3、2×2 和 1×2 的网格(见图 1-6)。但跳板式导航不一 定非要拘泥于网格布局,你可以成比例地放大某些选项,以彰显其重要性。在 iPhone 的应用 Masters 中,VIDEO 选项就是其他菜单选项的 2 ~ 3 倍大(见图 1-7)。

1.1.2 列表菜单式…

列表菜单式导航与跳板式导航的共同点在于,每个菜单项都是进入应用各项功能的入口点。这种导航有很多种变化形式,包括个性化列表菜单(Personalized List Menu)、 分组列表(Grouped List)和增强列表(Enhanced List)等。

1.1.3 选项卡式

选项卡式导航在不同的操作系统上有不同表现,对于选项卡的定位和设计,不同操 作系统有不同的规则(见图 1-12)

屏幕底部水平滚动的选项卡是个非常不错的设计【可以参考界面新闻app上放的滚动菜单。】

1.1.4 陈列馆式…

主要用来显示一些文 章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示

有时,对这些内容进行分组更易于用户浏览。Dwell 利用侧边选项卡把陈列馆式导 航里的内容组织成了可供用户管理的内容块。

1.1.5 仪表式

仪表式导航提供了一种度量关键绩效指标(Key Performance Indicators,KPI)是否 达到要求的方法。经过设计以后,每一项量度都可以显示出额外的信息。这种主要 的导航模式对于商业应用、分析工具以及销售和市场应用非常有用

1.1.6 隐喻式

游戏

1.1.7 超级菜单式

它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项

1.2 次级导航模式

那些位于某个页面或是模块内的导航

所有的主要导航模式都可以用作次级导航。

还有一些其他的导航模式也可作为次级导航,但不太适合用作主要导航

1.2.1 页面轮盘式

1.2.2 图片轮盘式

1.2.3 扩展列表式…

第 2 章表单…

常见表单模式:

登录表单(Sign In)、

注册表单(Registration)、

核对表单(Checkout)、

计算表单(Calculate)、

搜索表单(Search Criteria)、

多步骤表单(Multi-step)、

长表单(Long Form)。

大部分网络应用程序都依靠表单实现数据输入或布局。

Web Form Design: Filling in the Blanks,Luke Wroblewski 著(由 Rosenthal Media 出版)

Forms on Mobile Devices: Modern Solutions,Luke Wroblewski 著(出自 Smashing Magazine 网站)2

Mobile Form Design Strategies, Chui Chui Tan 著(出自 UX Booth 网站)3

2.1 登录表单……

登录表单应该只包括少量的信息输入:用户名、密码、操作按钮、密码帮助、注册选项等。

有一种登录表单直接抛弃了用户名输入框,只要求用户输入密码。在安装应用时, 用户就已经具备了使用权限,只要再输入密码就可以访问敏感数据了。这种形式多见于金融领域的应用

2.2 注册表单

应该只包括少量的信息输入

易于阅读

2.3 核对表单

?银行转账?

2.4 计算表单

最好的计算应用应该把输入数据和视觉化结果紧密关联。

2.5 搜索表单

某些搜索功能要求用户输入多个约束条件或标准,才能找出搜索结果。

...也应该只包括必要的输入项,并提供合理的默认值。

2.6 多步骤表单…

像 Fring 应用的注册流程一样,显示当前操作步骤和总步骤数

清晰的导航对移动表单尤为重要,因为用户使用移动设备时被打断或走神的概率更高。

一个很有创意的进度指示器

2.7 长表单…

某些表单可能会需要滚动屏幕才能浏览完。长表单的最精妙之处在于,它用命令取代了按钮。Zappos 和 Skype 都在 iOS 版本的应用中采用了模式化的表单,把按钮放在了标题栏内(

这种形式在其他操作系统中都是非标准化形式,但把按钮放在表单的底部也很有效

0
《移动应用UI设计模式》的全部笔记 11篇
豆瓣
免费下载 iOS / Android 版客户端