4-Web、Android、iOS等平台的设计规范和准则

Thumbnail
缩略图
Thumbnail
缩略图
Thumbnail
缩略图
Login
登录
Login
登录
Login
登录
Login
登录
Pagination
分页导航
Pagination
分页导航
Pagination
分页导航
Distinction
分割
Distinction
分割
Distinction
点击一次即可访问到应用所有的主要功能
标注清晰的菜单，告知用户主要功能和当前所在功能
缺点
只能显示 5 个标签 一个用的每个页面都会被明显占据一定的屏幕空间
iPhone GUI
iPhone中的视觉设计
树形结构的优缺点
优点
能应变大量的类别，功能和项目 组织方式常见，容易理解 可直接对内容进行交互。直观且占用屏幕空间小 列表展示很适于用户自定义分类
背景
Background
背景
Header
页头
Header
页头
Signup
注册
Signup
注册
Signup
注册
Slideshow
幻灯片
Slideshow
幻灯片
Slideshow
幻灯片
Slideshow
幻灯片
Borders
边框
Borders
边框
Borders
边框
Borders
幻灯片 边框
Links
链接
Icons
图标
Sort
下拉列表
Button
按钮
Image
图片
Calendar
日历
Subnavigation Tooltips
二级导航 工具提示
Tabs
标签栏
Comments
评论
Lists
列表
Tags
标签
Thumbnail Login
缩略图 登录
Pagination
分页导航
Distinction Video
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
分割
Distinction
分割
Video
播放器
Video
播放器
Video
播放器
Video
播放器
Modal
弹窗
Modal
弹窗
Modal
弹窗
Navigation
导航
Notice
提醒
Notice
提醒
Notice
提醒
Notice
提醒
Features
焦点图
Features
焦点图
Features
iPhone GUI
iPhone中的视觉设计
多用标准控件，一致性将增加可靠性 屏幕上不能超过两条“栏”——上边导航栏，下边就是标签栏或工具栏。 多用表格视图。表格视图是最具普适性的iphone标准界面元素 认真为每个文本输入框选好键盘，选择是否开启自动纠错功能
iPhone GUI
iPhone中的视觉设计
“UI TAPES”
视觉设计元素
Web Module
404 Pages
出错页
Footers
页脚
Popovers Forms
浮窗 表格
Search
搜索
Articles
文章
Breadcrumbs
面包屑导航
Audio
音频
Background Headers
背景 页头
Signup
注册
Slideshow Borders
表格
Forms
表格
Search
搜索框
Search
搜索框
Article
文章
Article
文章
Article
文章
Breadcrumbs
面包屑导航
Breadcrumbs
面包屑导航
Breadcrumbs
面包屑导航
Audio
音频
Audio
音频
Background
背景
Background
分割 视频
Modal
弹窗
Navigation Notice
导航 提示框
Feature
焦点图
Mobile Module
Friends
好友列表
Popovers
浮窗
Forms
表格
Search
搜索
Articles
文章
Settings
面包屑导航
Walkthroughs
首次演练
Audio
音频
Background
iPhone GUI
iPhone中的视觉设计
树形结构的优缺点
缺点
主要功能只有在最顶层页面才会被显示出 主要功能和分类直接切换有点麻烦。必须先回到顶层空间，然后再依次点入
iPhone GUI
iPhone中的视觉设计
遵循普通，不见得别人就会觉得普通。要有“苹果味”的设计感 苹果内置的导航模型基本上可以解决大多数应用的结构问题。 把你的页面都画成故事版，用这种方式来规划出应用的清晰流程。 开始丑点没关系。先从原始的原型应用开始，然后再做详细设计，然后编码
边框
Links
链接
Sorts
下拉菜单
Sorts
下拉菜单
Button
按钮
Button
按钮
Button
按钮
Button
按钮
Image
图片
Image
图片
Image
图片
Calendar
日历
Calendar
日历
Calendar
日历
Subnavigation
二级导航
Subnavigation
iPhone GUI
iPhone中的视觉设计
基于 44 像素的设计韵律进行设计
44 像素
88 像素
44 像素 44 像素 88 像素
88 像素
88 像素
44 像素
iPhone GUI
iPhone中的视觉设计
尽量让一屏显示完，避免滚动条
iPhone GUI
iPhone中的视觉设计
尽量减少屏幕上的元素
观察大家如何使用你的应用，然后来添加观察到的应用到相应的手势。 为没有发现你应用手势的人，准备好备用方案。 所有的手势操作都应该能通过可见的控件来完成 除了用来触发撤销/重做对话框或某些新奇用法以外，要避免使用摇动手势 提供多点触摸手势的同时，也要提供单指手势作为替代 给手势稍加点难度，或使用点击组合，以此来防止意外的误点击发生
演示
“iPhone GUI”
iPhone 中的视觉设计
iPhone GUI
iPhone中的视觉设计
拇指的规律
iPhone GUI
iPhone中的视觉设计
iPhone GUI
iPhone中的视觉设计
iPhone GUI
iPhone中的视觉设计
拇指的规律
iPhone GUI
iPhone中的视觉设计
模块索引
Mobile Module
Friends
好友列表
Popovers
浮窗
Forms
表格
Search
搜索
Articles
文章
Settings
面包屑导航
Walkthroughs
首次演练
Audio
音频
Background
背景
Signup
注册
Social Media
社交功能
Compose
文本框
Loading
iPhone GUI
iPhone 的小号图标 iPad的小号图标 iPhone4 的小号图标
iPhone中的视觉设计 29 X 29 48 X 48 58 X 58
iPhone的中号图标
iPad的中号图标 iPhone4 的中号图标 大号图标
57 X 57
72 X 72 114 X 114 512 X 512
iPhone GUI
iPhone中的视觉设计
应用的图标要清晰明了，用来描述应用的功能、界面、名称或品牌 在图标设计中，要加强主轮廓 名称短才是好的 把启动图像做成假的应用背景，这样可以减少启动的感知时间
iPhone GUI
iPhone中的视觉设计
手势来源于经验。大家是如何触摸现实物体的，是如何用鼠标控制指针的？
960 Grid System
960栅格系统
960 Grid System
960栅格系统
960 Grid System
960栅格系统
“Module Index”
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
模块索引
Module Index
载入
Pagination
分页导航
Icons
图标
Empty data
空数据集
Button
按钮
Image
图片
Thumbnail
缩略图
Login
登录
Modal
弹窗
Tabs
标签栏
Comments
评论
Lists
列表
Navigation
导航
Notice
提示框
Popovers
浮窗
Popovers
浮窗
Form
认真为每个文本输入框选好键盘，选择是否开启自动纠错功能
iPhone GUI
iPhone中的视觉设计
触动人心的设计会让应用魅力十足。在开始设计前，为你的应用选好个性方向 在标准控件上使用自定义颜色或图形，能让控件焕然一新。 奢华的材质能增加你应用的感知价值，逼真的界面元素让用户有点击的欲望 图标重在意义清晰而不是个性。图标干净的轮廓胜过浮华的细节 从真实世界借鉴界面隐喻，但是要确保借鉴的应用能适合于手机
二级导航
Subnavigation
二级导航
Tooltips
工具提示
Tooltips
工具提示
Tabs
标签栏
Tabs
标签栏
Comments
评论
Comments
评论
Lists
列表
Lists
列表
Lists
列表
Lists
列表
Tags
标签
Tags
标签
Tags
标签
Thumbnail
缩略图
iPhone GUI
iPhone中的视觉设计
平铺导航的优缺点
缺点
每次只能翻过一页，没法立即跳到非相邻页 并不能适应较多的页面数量，页面指示器只能容下20个小点 难以包含滚屏，对长文本不利
页面指示器太小，可能被用户忽略，因此让用户错过应用的其他页面
iPhone GUI
优点
iPhone中的视觉设计 标签栏的优缺点
主要操作要容易够着，在切实可行的情况下避免使用滚屏 用“秘密面板”、“隐藏之门”将高级工具分散到次级视图
iPhone GUI
iPhone中的视觉设计
平铺导航的优缺点
优点
很适合少而精的内容个，适于随意浏览的页面 适于内容自定义，且数量可变的页面 易于使用，只需熟悉的滑动手势即可导航
页面占用空间少，页面分页控件只占用一点空间，给内容该留下更多余地
焦点图
Features
焦点图
“960 GRID SYSTEM”
960 栅格系统
960 Grid System
960栅格系统
960 Grid System
960栅格系统
960 Grid System
960栅格系统
960 Grid System
960栅格系统
960 Grid System
960栅格系统
按钮
Splash Screen
进版
Splash Screen
进版
Camera
相机
Camera
相机
Tab Bar
标签栏
Tab Bar
标签栏
Comments
评论
Comments
评论
List
列表
List
Baidu Nhomakorabea列表
Loading
载入
Loading
载入
Walkthroughs
演示
Walkthroughs
iPhone GUI
iPhone中的视觉设计
将高级工具和操作“藏起来”
iPhone GUI
iPhone中的视觉设计
人类工程学问题：要考虑你应用的手感 要将主要操作放置在拇指的“点击热区中” 44 是个神奇的数字。确保点击区域至少有 44像素大小 大胆使用空白。不要让你的设计显得拥挤不堪
主要内容在上，操作在下
iPhone GUI
iPhone中的视觉设计
44 像素 44 像素 44 像素
神奇数字 44
44 像素
iPhone GUI
iPhone中的视觉设计
44 像素
44 像素
iPhone GUI
iPhone中的视觉设计
44 像素
44 像素
iPhone GUI
iPhone中的视觉设计
将重要的信息放在顶部，将重要的操作放在底部
iPhone GUI
iPhone中的视觉设计
触动人心的设计会让应用魅力十足。在开始设计前，为你的应用选好个性方向 在标准控件上使用自定义颜色或图形，能让控件焕然一新。 奢华的材质能增加你应用的感知价值，逼真的界面元素让用户有点击的欲望 图标重在意义清晰而不是个性。图标干净的轮廓胜过浮华的细节 从真实世界借鉴界面隐喻，但是要确保借鉴的应用能适合于手机
背景
Signup
注册
Social Media
社交功能
Compose
文本框
Loading
载入
Pagination
分页导航
Icons
图标
Empty data
空数据集
Button
按钮
Image
图片
Thumbnail
缩略图
Login
登录
Modal
弹窗
Tabs
标签栏
Comments
评论
Lists
列表
Navigation
导航
Notice
提示框
“Web Module”
网页模块
404 Pages
出错页面
404 Pages
出错页面
404 Pages
出错页面
404 Pages
出错页面
Footers
页脚
Footers
页脚
Popovers
浮窗
Popovers
浮窗
Popovers
浮窗
Forms
表格
Forms
表格
Form
表格
Action sheet
操作集
Action sheet
操作集
Friends
好友列表
Friends
好友列表
Search
搜索
Search
搜索
Setting
设置
Setting
设置
Share
分享
Share
分享
Signup
注册
Signup
注册
Button
按钮
Button