10种不同类型的移动UI设计模式
2015-07-03 17:48
736 查看
无论你正在设计一款简单的iPhone应用,还是开发适用于当前市场上所有流行移动操作系统的应用,这些设计模式都能助你一臂之力。
要设计出优秀的移动应用,就要先了解目前不同操作系统下优秀的设计案例。这本书的书名很明显是受“四人组”《设计模式》的影响,将改善编程质量的方法用在了UI设计上。
其中收集了大量的界面设计图片(iOS、Android、BlackBerry、WebOS、Symian和Windows等系统的应用截图),对于移动应用界面设计师来说,这无疑是笔巨大的财富,可以将它们作为创作的灵感源泉。
书中介绍的设计模式有以下10种。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/1e62fc648a55b9d421aba1f7f5a88e8e.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/0a3e01be3889a509a75ac1b5b060f214.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/c8f21e022ebaaca5800fba6e179ec755.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/b72c67b0c75d8a84912af4a770f910b3.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/1c4ccbfe370dfbde010f7c6ae3c501a9.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/172174c70312f737c9f6283af01aecb1.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/2cecc096f64e0e52c22e33ae3eb3ba08.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/4cbd5a4b8693dfd06c704299360091fd.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/0071d24d3a6462c0bbca4d39a4b0c91f.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/e8693156ef55050a7950db5f67d7e182.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/c93a70eaa25c2fd521dbdd244bad2038.png)
书籍购买:图灵社区
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/3ef50bf688b334885515f2c51593f84a.jpg)
【编者按】@图灵教育 推荐了《移动应用UI设计模式》一书,在书中用户体验设计师Theresa Neil,介绍了包括反模式在内的10种不同类型的设计模式。
无论你正在设计一款简单的iPhone应用,还是开发适用于当前市场上所有流行移动操作系统的应用,这些设计模式都能助你一臂之力。要设计出优秀的移动应用,就要先了解目前不同操作系统下优秀的设计案例。这本书的书名很明显是受“四人组”《设计模式》的影响,将改善编程质量的方法用在了UI设计上。
其中收集了大量的界面设计图片(iOS、Android、BlackBerry、WebOS、Symian和Windows等系统的应用截图),对于移动应用界面设计师来说,这无疑是笔巨大的财富,可以将它们作为创作的灵感源泉。
书中介绍的设计模式有以下10种。
导航模式:
主要导航模式和次要导航模式。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/1e62fc648a55b9d421aba1f7f5a88e8e.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/0a3e01be3889a509a75ac1b5b060f214.png)
表单:
登陆表单、注册表单、核对表单、计算表单、搜索表单、多步骤表单、长表单。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/c8f21e022ebaaca5800fba6e179ec755.png)
表格和列表:
只显示最重要的信息。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/b72c67b0c75d8a84912af4a770f910b3.png)
搜索、分类和过滤:
让这些功能易于使用。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/1c4ccbfe370dfbde010f7c6ae3c501a9.png)
工具:
采用直接、轻量化的设计。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/172174c70312f737c9f6283af01aecb1.png)
图表:
借鉴基本图表的经典设计理念。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/2cecc096f64e0e52c22e33ae3eb3ba08.png)
视觉吸引:
吸引用户并促使其发现产品功能。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/4cbd5a4b8693dfd06c704299360091fd.png)
反馈与功能可见性:
向用户提供适当、清晰且及时的反馈。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/0071d24d3a6462c0bbca4d39a4b0c91f.png)
帮助:
应该易于用户学习,让用户快速掌握应用使用方法。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/e8693156ef55050a7950db5f67d7e182.png)
反模式:
标新立异、隐喻错位、愚蠢的对话框、图表垃圾、按钮海。![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/c93a70eaa25c2fd521dbdd244bad2038.png)
书籍购买:图灵社区
相关文章推荐
- iOS"Request failed: unacceptable content-type: text/html"
- quick3x_tiledMap瓦片地图
- 直接拿来用!10款实用Android UI工具
- android 帅气的UI框架
- UIViewController学习心得
- UITextField的文本框部分文本以*的方式来显示
- iOS —— UINavigationController 补充
- 实现程序-q(quiet)模式运行
- jsp Request获取url信息的各种方法比较
- UIView/视图&&UIImageView/图片视图
- easyui1.4.2 formatter处理json内嵌数据undefined
- Building modules for a precompiled kernel
- 包装ServletRequest和ServletResponse
- rqt install in Fuerte / git target directories
- UILabel 设置不同颜色,不同字体
- IOS入门学习笔记(普通UI控件--UILabel)
- JS 前端框架8 require.js使用
- Failed to convert property value of type [java.lang.String] to required type [java.util.Date] for pr
- 【Streaming】我在拓扑中使用了Ack机制,为什么在Storm UI上有大量Failed数据?
- JS 前端框架7 一个简单的require功能