目录

10种不同类型的移动UI设计模式

10种不同类型的移动UI设计模式

https://i-blog.csdnimg.cn/blog_migrate/3ef50bf688b334885515f2c51593f84a.jpeg
ui
【编者按】@图灵教育 推荐了《移动应用UI设计模式》一书,在书中用户体验设计师Theresa Neil,介绍了包括反模式在内的10种不同类型的设计模式。

无论你正在设计一款简单的iPhone应用,还是开发适用于当前市场上所有流行移动操作系统的应用,这些设计模式都能助你一臂之力。

要设计出优秀的移动应用,就要先了解目前不同操作系统下优秀的设计案例。这本书的书名很明显是受“四人组”《设计模式》的影响,将改善编程质量的方法用在了UI设计上。

其中收集了大量的界面设计图片(iOS、Android、BlackBerry、WebOS、Symian和Windows等系统的应用截图),对于移动应用界面设计师来说,这无疑是笔巨大的财富,可以将它们作为创作的灵感源泉。

书中介绍的设计模式有以下10种。

导航模式:

主要导航模式和次要导航模式。

https://i-blog.csdnimg.cn/blog_migrate/1e62fc648a55b9d421aba1f7f5a88e8e.png
ui design 1
https://i-blog.csdnimg.cn/blog_migrate/0a3e01be3889a509a75ac1b5b060f214.png
ui design 2

表单:

登陆表单、注册表单、核对表单、计算表单、搜索表单、多步骤表单、长表单。

https://i-blog.csdnimg.cn/blog_migrate/c8f21e022ebaaca5800fba6e179ec755.png
ui design 3

表格和列表:

只显示最重要的信息。

https://i-blog.csdnimg.cn/blog_migrate/b72c67b0c75d8a84912af4a770f910b3.png
ui design 4

搜索、分类和过滤:

让这些功能易于使用。

https://i-blog.csdnimg.cn/blog_migrate/1c4ccbfe370dfbde010f7c6ae3c501a9.png
ui design 5

工具:

采用直接、轻量化的设计。

https://i-blog.csdnimg.cn/blog_migrate/172174c70312f737c9f6283af01aecb1.png
ui design 6

图表:

借鉴基本图表的经典设计理念。

https://i-blog.csdnimg.cn/blog_migrate/2cecc096f64e0e52c22e33ae3eb3ba08.png
ui design 7

视觉吸引:

吸引用户并促使其发现产品功能。

https://i-blog.csdnimg.cn/blog_migrate/4cbd5a4b8693dfd06c704299360091fd.png
ui design 8

反馈与功能可见性:

向用户提供适当、清晰且及时的反馈。

https://i-blog.csdnimg.cn/blog_migrate/0071d24d3a6462c0bbca4d39a4b0c91f.png
ui design 9

帮助:

应该易于用户学习,让用户快速掌握应用使用方法。

https://i-blog.csdnimg.cn/blog_migrate/e8693156ef55050a7950db5f67d7e182.png
ui design 10

反模式:

标新立异、隐喻错位、愚蠢的对话框、图表垃圾、按钮海。

https://i-blog.csdnimg.cn/blog_migrate/c93a70eaa25c2fd521dbdd244bad2038.png
ui design 11

书籍购买:图灵社区