图灵社区之《移动应用UI设计模式》官方电子书是一本全面介绍移动应用界面设计的专业指南,由Theresa Neil撰写,王军锋、郭偎武艳芳翻译,本书旨在帮助读者理解和利用UI设计模式,以解决常见的设计难题,以下是对这本书内容的详细介绍:
1、主要导航模式
跳板式:利用网格布局各个同等重要的内容项,通过不规则的布局方式凸显某些项的重要性。
列表菜单:适合显示较长或拥有次级内容的标题,所有次级屏幕内应提供返回列表菜单的选项。
选项卡:为已选择的菜单项设置不同的视觉效果,使用易于识别或带有标签的图标。
陈列馆式:适用于用户经常浏览、频繁更新的内容。
仪表式:不要过多使用,通过研究确定关键量度。
隐喻式:谨慎使用,避免蹩脚模仿造成反模式。
超级菜单式:在选择导航模式前,先确定信息架构。
2、次级导航模式
页面轮盘式:适用于少量页面的导航,利用直观的指示器标示总屏数和当前位置。
图片轮盘式:展示清新悦目的内容,如艺术品、产品和照片等。
扩展列表式:逐步显示某个内容项的更多细节或选项。
3、表单模式
登录表单:采用常见的设计方案,提供取回密码的方式。
注册表单:简洁明了,最好在一屏之内显示完所有信息。
核对表单:提升速度、效率和用户放心为目标,去掉不必要的输入域。
计算表单:使用标准的表单设计和布局原则,尽量在同一页面内显示计算结果。
搜索表单:控制搜索条件在一页之内,采用方便操作的控制方式。
多步骤表单:告知用户当前位置和将要去的地方,最小化页面和操作步骤数量。
长表单:不要人为地把表单划分成多个步骤来避免屏幕滚动。
4、表格模式
有表头的表格:不要使用暗色网格线和垂直分割方式,文字左对齐,数字右对齐。
无表头表格:每一宽行内最多显示三行信息,不太重要的细节使用较小、浅色的字体。
固定列表格的表格:为固定的列设计醒目样式,利用滑动操作浏览更多数据。
总览和数据的表格总览应该显示在数据上方,且要一目了然。
行分组表格归纳行设定与其他行不同的视觉效果。
级联式列表:使用较为宽泛的信息结构可以避免产生较深的层次。
带有视觉指示器的表格:使用用户能够迅速识别的视觉化指示器。
可编辑表格:不要为大量数据输入使用可编辑表格。
5、搜索模式
显性搜索:在输入域周围提供明显的操作按钮,并提供撤销搜索的选项。
自动补全搜索:如果程序在显示搜索结果时有延迟,就要给出反馈。
动态搜索:适用于有限的数据,如地址薄或个人媒体库。
范围搜索:根据数据集提供合理的搜索范围选项。
保存搜索记录并显示最近搜索内容:考虑哪种方式最能满足用户需求。
搜索表单:尽量减少输入域的数量。
搜索结果/浏览结果:标明已找到搜索结果的总项数,使用延迟加载。
6、分类模式
屏内分类:以明确的方式告知用户当前采用(生效)的分类选项。
分类排序选择器:根据操作系统的设计惯例选择控制搜索结果分类的方法。
7、工具模式
直接、轻量化的设计:采用直接、轻量化的设计。
8、图表模式
借鉴基本图表的经典设计理念:借鉴基本图表的经典设计理念。
9、视觉吸引模式
吸引用户并促使其发现产品功能:吸引用户并促使其发现产品功能。
10、反馈与功能可见性模式
向用户提供适当、清晰且及时的反馈:向用户提供适当、清晰且及时的反馈。
11、帮助模式
易于用户学习,让用户快速掌握应用使用方法:易于用户学习,让用户快速掌握应用使用方法。
12、反模式
标新立异、隐喻错位、愚蠢的对话框、图表垃圾、按钮海:标新立异、隐喻错位、愚蠢的对话框、图表垃圾、按钮海。
FAQs
1、什么是UI设计模式?
UI设计模式是一种可复用的解决方案,用于解决常见的设计问题,它们可以帮助设计师快速创建一致且用户友好的界面,导航模式中的“跳板式”利用网格布局各个同等重要的内容项,通过不规则的布局方式凸显某些项的重要性。
2、如何避免在UI设计中出现反模式?
避免反模式的关键是理解用户需求和使用场景,隐喻式导航需要谨慎使用,避免蹩脚的模仿造成用户困惑,愚蠢的对话框和图表垃圾也是常见的反模式,设计师应确保每个元素都有明确的用途和意义。
章节 | 概述 | |
第一章 | 介绍移动应用UI设计模式的重要性以及本书的结构和内容。 | |
第二章 | 设计原则 | 讲解移动应用UI设计的基本原则,如简洁、一致性、易用性等。 |
第三章 | 布局与导航 | 探讨移动应用布局和导航模式,包括底部导航、顶部导航、抽屉式导航等。 |
第四章 | 触摸交互 | 分析移动应用的触摸交互设计,包括手势识别、反馈机制等。 |
第五章 | 图标与符号 | 讨论图标和符号在移动应用UI设计中的作用和最佳实践。 |
第六章 | 文字与排版 | 介绍如何有效利用文字和排版提升移动应用的可读性和用户体验。 |
第七章 | 色彩与视觉 | 分析色彩在移动应用UI设计中的运用,以及视觉层次的重要性。 |
第八章 | 图形与动画 | 探索图形和动画在提升用户体验中的作用,以及如何适度使用动画。 |
第九章 | 响应式设计 | 讲解如何设计适应不同屏幕尺寸和分辨率的移动应用UI。 |
第十章 | 优化性能 | 分析如何优化移动应用UI的性能,提高加载速度和响应速度。 |
第十一章 | 用户研究 | 强调用户研究在UI设计中的重要性,以及如何进行用户测试。 |
第十二章 | 案例研究 | 通过实际案例展示优秀的移动应用UI设计,分析其成功因素。 |
第十三章 | 未来趋势 | 探讨移动应用UI设计的未来趋势,如人工智能、虚拟现实等。 |
第十四章 | 归纳与展望 | 归纳本书的主要内容,并对移动应用UI设计的未来进行展望。 |