一、界面模式Mobile Design Pattern
1. 启动界面
(智能手机启动时所显示的界面)
- 启动界面/开机界面Splash
- **过场界面Walk though ** 8ede5806dfe3a84a0d304f4c3550.jpg
- 教程界面/用户指引Coach Mark/User Guide
- 空数据提示消息
2. 顶层界面
(用于显示各种各样的信息,并通过导航功能将其他界面关联起来)
- 门户界面
- 用户信息界面User Profiles
- 电商界面
- 企业界面
3. 一览界面
(通常包含列表类的UI组件,用于连续显示所有相关内容)
- 搜索结果Search
- 时间轴
- 图库Image Browse
- 通知/活动
4. 详细信息界面Detail View
- 阅览器(照片/视频)
- 新闻报道Article
- 地图Map
- 产品
5. 插入/操作界面
(执行特定的操作)
- 注册/登陆login & Register
- 消息发布Comment/Checkin
- 照片拍摄
- 设定/管理Settings
二、基本UI组件
1. 导航控件Navigation Bar与控制控件Control
-
标签式导航控件/选项卡菜单式Tab Menu/Navigation
a 标准模式/固定选项卡Fixed Tabs
269458073e97a84a0d304fc8a2ce.jpgb 底部布局模式
aab858073f74a84a0e282b1d3512.jpg(如果应用的主要类别超过5个,可以把“更多”放在最右侧的第五个选项卡上)
c 下划线模式/顶边栏
![6d9e58073335a84a0e282ba29451.jpg](http:https://img.haomeiwen.com/i4316111/8874444e801d4a51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
d 滚动模式/滚动选项卡式
(滚动选项卡一般比标准的标签栏要窄,因为它们没有必要作为触摸对象)
62e3580740a1a84a0d304fbd3bd0.jpge 垂直模式/导航抽屉/侧边式抽屉Navigation Drawers
(只在首次启动时弹出抽屉,可以拥有多个层级)
cacf58082647a84a0d304f96d3f0.jpg 97bf58106fada84a0e282b2676f8.jpg- 分段控件Segmented Control/Scope Bar
a 标准模式
c25a58074335a84a0d304f82bad8.jpgb 内联文本模式
f7da580744efa84a0e282b746367.jpg- 滑动导航控件
a 标准模式
4e4158081d8ea84a0e282b37942a.jpgb 页面指示器组模式
49e758081dbda84a0e282b2b7037.jpgc 标签式导航控件组模式
d58b58081e23a84a0e282b3854e0.jpg- 下拉式菜单Spinners
a 标准模式/悬浮式操作控件Action Overflow
f0be58081f8ba84a0d304f8f6180.jpgb 控制模式
c 气泡模式/弹出窗口Popover
40b4580821d2a84a0d304fe5bd85.jpg
- **深入式菜单**
a 标准模式
![a07f58082438a84a0d304f6b86fb.jpg](http:https://img.haomeiwen.com/i4316111/956905667be0d975.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
**折叠式菜单/手风琴式Accordion **
(这种模式比跳转到另一页面再跳回去更高效)
b **气泡模式**
![d3ee58082b31a84a0d304f291f7b.jpg](http:https://img.haomeiwen.com/i4316111/5f8c28f2bafd3db0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- **仪表盘式导航控件**
91e458106bd2a84a0d304f588b46.jpg
- **跳板式菜单/启动面板Dashboard/Springboard/Launchpad **
(一个带有菜单选项的登陆界面,而菜单选项就是进入各个应用的起点。
优点是跨平台,可放置很多选项。缺点是全部选项扁平化,没有任何优先级)
![772c58082e59a84a0d304f141910.jpg](http:https://img.haomeiwen.com/i4316111/039f34d65fc8da9f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- **返回按钮Back button/Up button/Home**
a 返回按钮模式
![e07858082f2da84a0e282b89493d.jpg](http:https://img.haomeiwen.com/i4316111/0af4b13bf4ad6359.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 徽标模式
![6655580830d6a84a0d304f121d93.jpg](http:https://img.haomeiwen.com/i4316111/3bd93717a8706bae.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
c Home图标模式
- **向上向下滚动按钮**
a 标准模式
![f60c580832fea84a0e282bed6a84.jpg](http:https://img.haomeiwen.com/i4316111/e8b9dfe0c19bc1df.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 向下滚动模式
c 叠加模式
d 索引模式
![image](http:https://img.haomeiwen.com/i4316111/ba92c6b1f0fa009d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
image
- 分页按钮
-
无限分页列表
a 标准模式
d7c358086911a84a0d304fb14d16.jpgb 按钮模式
0aa6580873a0a84a0e282bfebd67.jpg -
刷新控件Refresh Control
- 侧滑式菜单
2. 列表
- **垂直列表/列表菜单List Menu/Table/hierarchal navigation**
(每一个列表项都是进入该应用各项功能的入口,并且模块之间的切换需要返回到列表主页)
a 标准模式
![bf0858086c6fa84a0d304f7d6e82.jpg](http:https://img.haomeiwen.com/i4316111/6958049c42e0f7f7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 值模式
![2aac58086ca2a84a0d304fbff4ab.jpg](http:https://img.haomeiwen.com/i4316111/b264b557a440a154.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
c 缩略图模式
![6a2058086d05a84a0d304fae2580.jpg](http:https://img.haomeiwen.com/i4316111/578b55811dfa2536.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
d 半尺寸模式
![486558086d86a84a0e282bcc71c8.jpg](http:https://img.haomeiwen.com/i4316111/7333b8c1d198cbda.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 网格列表/陈列馆式Gallery
(最适合呈现经常更新的视觉效果直观的无层级内容,可采用网格布局或轮盘布局)
a 标准模式
![ba7b58086e20a84a0e282bff363a.jpg](http:https://img.haomeiwen.com/i4316111/f23f0c1d7a2ede2f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 标签叠加模式
c 块状标签模式
![481a58087038a84a0e282b493255.jpg](http:https://img.haomeiwen.com/i4316111/42e242db8618c326.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- **轮播面板Cover Flow/Carousel**
a 标准模式
![d34f5808744ba84a0e282b35e60a.jpg](http:https://img.haomeiwen.com/i4316111/31ee9809f58ad71d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 控制模式
![6880580874e0a84a0d304ffb7408.jpg](http:https://img.haomeiwen.com/i4316111/5f5499e7985f69cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
c 商标展板模式
![86fd58087524a84a0e282b8cb0c2.jpg](http:https://img.haomeiwen.com/i4316111/fdfe84468bf9cbc5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
d 导航模式
![4e2e580875cfa84a0e282b5bc22f.jpg](http:https://img.haomeiwen.com/i4316111/5b9f3c85dc65f7dc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
时间轴
a 标准模式
dd695808765ea84a0d304fb197c8.jpgb 消息模式
4625580876c9a84a0e282b48bc71.jpg- 日历/日期列表Calendar
a 月份模式
713f58087a50a84a0e282b8d39c7.jpgb 周模式
c 日模式
4aec58087bc3a84a0d304f1d6a29.jpg
3. 表单
- **文本框/撰写Compose**
a 单行模式
![d26758087d01a84a0d304f7fd33e.jpg](http:https://img.haomeiwen.com/i4316111/3a73c0f746c2b49b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 搜索框模式
![dbde58087d35a84a0d304fca992f.jpg](http:https://img.haomeiwen.com/i4316111/d55231feb4e3dee2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
c 多行模式
![c6a758087d5ea84a0e282b3f8da4.jpg](http:https://img.haomeiwen.com/i4316111/52aca8f5788f65bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
开关
a 复选框模式(复数选择)Checkboxes
f26658088738a84a0e282bc8aeb7.jpgb 单选框模式(单项选择)Radio Buttons
image
c 开关按钮模式On/Off Switches
![d18f58088769a84a0e282bf972c2.jpg](http:https://img.haomeiwen.com/i4316111/a4b6fcdd9003ecaa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- **选择器Picker**
a 标准模式
![7c1f580b08b1a84a0e282bbcaab1.jpg](http:https://img.haomeiwen.com/i4316111/6083de7bc06698a2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 复数模式
![afef580b08bda84a0d304f48c781.jpg](http:https://img.haomeiwen.com/i4316111/0af4b68bccd17acc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 滑块
- 拖放控件
4.通知与消息Notifications
- 模态消息
- 无模态消息
a 标准模式
b7cd580b0dfda84a0e282b639de6.jpg b 状态栏消息
![e4fc580b0e1ca84a0e282b3a5905.jpg](http:https://img.haomeiwen.com/i4316111/9a5d1c486cd81660.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 块消息
- 角标
a 标准模式
9bff580b0e3aa84a0e282b30e8b6.jpgb 通知模式
![f926580b0e54a84a0d304f743f0e.jpg](http:https://img.haomeiwen.com/i4316111/5d81c89230681e1d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 气泡消息
5. 信息的可视化
-
无限循环指示器
a 标准模式
b 原创模式
![e65a580d780da84a0d304f7bd849.jpg](http:https://img.haomeiwen.com/i4316111/e2ea5975ab91e0bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
c 条状模式
- 进度条Progress
-
页面指示器Page Indicator
a 标准模式
c94f580d7daca84a0e282b3e8561.jpgb 页面模式
c 步骤模式
-
图表
a 柱状图模式
b 折线图模式
c 饼图模式
- 评分控件
a 标准模式
b 表情模式
c 好评差评模式
d 等级模式
6. 图标
-
房屋
-
放大镜
- 齿轮
- 星形
a** 收藏夹**模式
![02bc580dc08ca84a0d304f5056dd.jpg](http:https://img.haomeiwen.com/i4316111/61769ee78329e170.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b 评分模式
![781d580dc09ea84a0e282bb36cb5.jpg](http:https://img.haomeiwen.com/i4316111/e2301c00c9ae044c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
模拟时钟
-
大头针
- 人像
a 单人模式
b 双人模式
![9526580dc0dda84a0e282bfb583f.jpg](http:https://img.haomeiwen.com/i4316111/8b447781e0a88630.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
c 三人模式
- 铅笔
a 创建新条目模式
![049b580dc410a84a0e282bd95327.jpg](http:https://img.haomeiwen.com/i4316111/985b05133128e9ef.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
a0ab580dc4e7a84a0e282bb006bd.jpg
b 编辑模式
![28fe580dc116a84a0e282bd67bea.jpg](http:https://img.haomeiwen.com/i4316111/af06cafe1e6cb58b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 回收站/垃圾箱
a 移至回收站模式
b 立即删除模式
![3e63580dc13aa84a0e282badf22b.jpg](http:https://img.haomeiwen.com/i4316111/b5c6fbebdd70bbe7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 加号
-
叉号
a 清除模式
ca42580dc1e0a84a0d304ff074bf.jpg
b 终止模式
c 关闭模式
![2095580dc477a84a0d304f8d0a48.jpg](http:https://img.haomeiwen.com/i4316111/71b533cdc37a60fa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 照相机
-
三连圆点
a 水平排列模式
b 垂直排列模式
3f8b580dc6d4a84a0e282bec887d.jpg -
相连圆点
-
分享Share
-
三连短线/导航图标/汉堡包图标
a 菜单开启模式
66fc580dc92da84a0e282b2f1728.jpgb 一览显示模式
![eb3d580dcb82a84a0e282b8fa01f.jpg](http:https://img.haomeiwen.com/i4316111/3eb01db952773ffd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
c 列表排序模式
![51175811b0f2a84a0d304fd8385c.jpg](http:https://img.haomeiwen.com/i4316111/ba5365a4ed7ed42d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "undefined")
- 刷新
-
动画
-
向左向右滑动
-
叠加展开收起
-
淡入淡出
-
翻转
-
放大缩小
-
摇动扭动
-
三、手势
-
轻触Tap
-
拨动Flick
-
滑动Swipe
-
按压Press
-
拖动Drag
-
多点缩放Pinch in/out
网友评论