移动应用UI设计模式pdf

2019年1月3日12:42:27 发表评论 158
摘要

总结介绍了UI设计模式,一本很好的模式参考书
针对当前的iOS Android BlackBerry WebOS WindowsMobile和Symbian应用提供了400多个屏幕截图

移动应用UI设计模式 内容简介

当你迫于压力,要制作出设计精良、易于使用的移动应用时,根本就没时间进行完全的创新。这本《移动应用UI设计模式》提供了70多种移动应用设计模式作为参考,包括了从当前iOS、Android、BlackBerry、WebOS、Windows Mobile以及Symbian平台中提取的超过400张的应用截图。

用户体验设计大师Theresa Neil将向你介绍包括反模式在内的10种不同类型的设计模式。无论你正在设计一款简单的iPhone应用,还是开发适用于当前市场上所有流行移动操作系统的应用,这些设计模式都能助你一臂之力。

《移动应用UI设计模式》包括以下设计模式:

1.导航:主要导航和次要导航模式

2.表单:改变全行业不良的表单设计习惯

3.表格和列表:只显示最重要的信息

4.搜索、分类和过滤:让这些功能易于使用

5.工具:营造直接交互的体验

6.图表:借鉴基本图表的经典设计理念

7.视觉吸引:吸引用户并促使其发现产品功能

8.控制与反馈:帮助用户执行操作并及时提供反馈

9.帮助:把小型设计理念应用到帮助页面的设计中去

移动应用UI设计模式 目录

第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  长表单

第3章  表格和列表

3.1  基本表格

3.2  无表头表格

3.3  固定列表格的表格

3.4  带有内容总览和数据的表格

3.5  行分组表格

3.6  级联式列表

3.7  带有视觉指示器的表格

3.8  可编辑表格

第4章  搜索、分类和过滤

4.1  搜索

4.1.1  显性搜索

4.1.2  自动补全搜索

4.1.3  动态搜索

4.1.4  范围搜索

4.1.5  保存搜索记录并显示最近搜索内容

4.1.6  搜索表单

4.1.7  搜索结果/  浏览结果

4.2  分类

4.2.1  屏内分类

4.2.2  分类排序选择器

4.2.3  分类表单

4.3  过滤

4.3.1  屏内过滤

4.3.2  过滤容器

4.3.3  过滤对话框

4.3.4  过滤表单

第5章  工具

5.1  工具栏

5.2  选项菜单

5.3  调用动作按钮

5.4  情境工具

5.5  内联操作

5.6  多状态按钮

5.7  批量操作

第6章  图表

6.1  带过滤器的图表

6.2  带预览窗口的图表

6.3  总览加数据式图表

6.4  数据点细节图

6.5  详细信息图

6.6  缩放图表

6.7  数据透视表

6.8  火花谱线图

第7章  视觉吸引

7.1  对话框

7.2  提示

7.3  使用向导

7.4  视频演示

7.5  幻灯片

7.6  首次使用引导

7.7  持续视觉吸引

7.8  可发现的视觉吸引

第8章  反馈与功能可见性

8.1  反馈

8.2  出错信息

8.3  确认

8.4  系统状态

8.5  功能可见性

8.5.1  触摸

8.5.2  滑动

8.5.3  拖曳

第9章  帮助

9.1  使用说明

9.2  界面元素说明

9.3  使用向导

第10章  反模式

10.1  标新立异

10.2  隐喻错位

10.2.1  控制错位

10.2.2  图标错位

10.2.3  心理模型错位

10.3  愚蠢的对话框

10.4  图表垃圾

10.5  按钮海

附录

关于作者

移动应用UI设计模式 精彩文摘

主要导航模式:跳板式(Springboard)、列表菜单式(List Menu)、选项卡菜单式(Tab Menu)、陈列馆式(Gallery)、仪表式(Dashboard)、隐喻式(Metaphor)、超级菜单式(Mega Menu)。

次级导航模式:页面轮盘式(Page Carousel)、图片轮盘式(Image Carousel)、扩展列表式(Expanding List)。

我喜欢阅读移动应用市场里的用户评论,以此来更好地了解人们是如何使用这些应用的。市场评分系统是极具价值的反馈工具,传统的网络和桌面应用程序都不具备这样的功能。它提供了丰富的关于客户偏好和期望的信息。

一般来说,大部分给出4星或5星的评论都不是十分具体。这些评论通常是:“非常好的一款应用,它看上去很棒,运行也很流畅。”而1星或2星的评论却包含有更多的内容,这类评论大都指出了应用的问题所在。常见的负面反馈大致如下:

·软件崩溃

·缺乏某些关键的功能(同步、过滤、连接账户……)

·糟糕的导航(无法返回,找不到某些东西……)

·混乱的界面设计

前两项问题无法通过改变界面模式解决,但用户经常抱怨的第三、第四两项问题却是可以通过使用不同模式的界面解决的。参考常见的导航设计模式,可以保证用户能够在你的应用中找到并使用那些有用的功能。

正如精良的设计一样,优秀的导航也大象无形。不管是浏览好友信息,还是租赁汽车,完美的导航设计能让用户根据直觉使用应用程序,也能让用户非常容易地完成所有任务。一款应用的导航可以被设计成各种样式,但我想着重介绍6种主要的导航模式,也就是主菜单的导航模式(见图1-1)。

图1-1 主要导航模式

跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被称为“快速启动板”(Launchpad)。跳板式导航的特征是,登录界面中的菜单选项就是进入各个应用的起点。Facebook应用沿用了iOS 主界面上的跳板式设计,其他应用随之跟风(见图1-2至图1-4)。

图1-2 Facebook的跳板式导航和Ovi Maps应用

图1-3 Trulia和LinkedIn的导航设计

图1-4 Palm手机上的NewsRoom 和Nokia手机上的Yahoo!

个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能,允许用户改变跳板式导航的布局(见图1-5)。

图1-5 PayPal用户个性化的跳板式导航和Gowalla应用的早期版本

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

图1-6 跳板式导航的网格布局

图1-7 Norton Mobile的2×2网格布局和Masters的不规则布局

为同等重要的内容项使用网格布局,为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。

列表菜单式导航与跳板式导航的共同点在于,每个菜单项都是进入应用各项功能的入口点。这种导航有很多种变化形式,包括个性化列表菜单(Personalized List Menu)、分组列表(Grouped List)和增强列表(Enhanced List)等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的(见图1-8至图1-11)。

图1-8 列表菜单:Valspar Paint和Kayak应用

图1-9 列表菜单:Palm 手机上的RadioTime和Cozi应用

图1-10 个性化列表:Blackboard和Zoho CRM 应用

图1-11 增强列表:Am azon MP3应用;分组列表:Stratus应用

列表菜单很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项,用来返回菜单列表。通常的做法是在标题栏上显示一个带有列表图标或“菜单”字样的按钮。

选项卡式导航在不同的操作系统上有不同表现,对于选项卡的定位和设计,不同操作系统有不同的规则(见图1-12)。如果要为你的应用选择这种导航模式,就要为不同的操作系统专门定义选项卡的位置。

图1-12 不同操作系统内选项卡的位置

图书网:移动应用UI设计模式pdf

此资源下载价格为5图书币,请先

80%的人都看过:

  • 我的微信
  • 扫一扫加好友
  • weinxin
  • 微信公众号
  • 扫一扫关注
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: