移动设计分享 About Mobile Design
44
description
一些关于移动设计必须要知道的数据, Some data you must know in mobile design field.
Transcript of 移动设计分享 About Mobile Design
场景
移动设计（应用）是一种针对各种手持设备进
行的设计，那么这些手持设备经常处在什么样
的场景中？
人们会在千奇百怪的环境中使用我们的产品，我们的产品在和周围环境争夺用户的注意力，凭借
一个3.5~5寸的屏幕与车水马龙、人声鼎沸的大千世界作斗争！也就是说，人们只有一只手操作你的
产品，只有一部分注意力在你精雕细琢的界面上。他们看到的和设计所看到的截然不同！
一只手、一只眼睛，一直在抖?
1 of 10
手势的合理运用一方面需给予真实物理世界认知的移动，另一方面在于符合input-control-output（标准用户？）的
手势操作的用户习惯培养.
手势一只手还是两只手？哪个更简单?
图片：LIU CHENHUAN
3 of 10
多点触控提供更自然的操作
是更便捷的方便操作的快捷
操作隐形化为手势，减轻屏幕视觉负担
通过定义或组合不同手势出发行为
减少误操作or承载更多操作
不建议 在非概念性项目中使用基础手势（组合）之外的“创新”手势，未建立统一规范的情况下，使用混乱会导致用户困惑，学习成本稿，增加记忆负担，难以引导用户培养使用习惯，技术上
的限制可能会使“创新”变成不便。
4 of 10
手势的合理运用一方面需给予真实物理世界认知的移动，另一方面在于符合input-control-output（标准用户？）的
手势操作的用户习惯培养.
操作拇指范围、操作热区、视觉焦点、左撇子怎么办?
模仿物理设备的界面能让用户感觉
直观、熟悉且容易使用。如图“电话”
应用抄袭了电话键盘
模仿真实物理设备
5 of 10
虽然拇指能够划到整个屏幕，但拇指在所及范围和灵活性上是
有限的，只有三分之一的屏幕是真正容易触及的——也就是拇指
正对的区域。为了获得舒适的人机体验，应将主要点击目标放
置在方便拇指点击的热区内，
拇指的规律拇指啊、伟大的拇指，但它不是无所不能的！
这就是为什么工具栏和标签栏一般都放置在屏幕的底边，而在
传统的界面上，这些放置是不常见的。这个与PC端截然不同的
给了我们提示，该如何组织好点击目标的视觉层次。常用的按
钮还有导航标签应该放在屏幕底部的左边，不常用的按钮还有
会改变数据的点击目标可以很安全的塞到右上方。这样可以减
少误触的发生。
6 of 10
以苹果为例，iphone的工具栏（见
左图）还有标签栏（见右图）节
本都是放在屏幕的最下边，同时
也是拇指容易点击的范围，待办
事宜“things”（左图）把“编辑”按钮
放在右上角以防不小心点到。右
图应用中左边的缩略图都在右手
操作用户容易点击的热区中。
7 of 10
我们的眼睛天生的扫面页面的顺
序天生就是从左向右，和我们书
写的顺序一样，所以至少对习惯
于右手的人来说，操作和视觉习
惯保持了一致。
8 of 10
对于左撇子的照顾目前并不是大多数产品都有的，那么当我们遇到这种需求是，如何去照顾左撇子们和那些一边书写一
边使用手机的货们呢？
“twitterrific”为左撇子们提供了一个左手手势控制，它会把正常的按钮布局（下左1）左右镜像（下左2）
在标准空间及部分应用中，采用了将按钮宽度加长铺满屏幕宽度的做法，增加的可操作正好照顾到了左手使用的需求。
所有人中有85%~90%的使用右手，剩下的都是左撇子
9 of 10
在PC端的通常情况下，我们会有视觉焦点 即为操作热区的惯性
思维。但是移动端的情况却并非如此，受屏幕的限制以及便于
手指操作的刚性需求，移动产品在设计时，当视觉尺寸达不到
操作便捷要求时，实际操作区域应大于我们看到的视觉尺寸
（左上图，path的button高度仅为30PX,但实际操作热区达到50PX）
视觉焦点 操作热区在操作时让那些隐形的尺寸现身！
在操作密集区域，应注意规避因扩大某一操作热区而影响其他
热区，这样反而增加误操作。若两热区相邻，大小悬殊的情况
下，可适当扩大较小热区的范围。尽量避免完全一致且紧密相
连的热区，如设计中遇到此类问题，可在设计上增加间距，以
分割操作热区，减少误触的机率（典型应用：科学型计算器）。
图片：LIU CHENHUAN
10 of 10
飞镖的原理告诉我们，越小的目标越难以选中！所以在移动设计中，触控目标一定要大，这样才能减少误触
边缘手持设备的操作边缘是个什么概念、该怎么办？
IOS的消息中心，status bar区域非常狭窄，但是
我们在拖动展示的时候，却少有误操作切操作舒
适。
IOS消息中心没有icon或者选择提示，我们却能快
速的学会并形成用户习惯且高频率操作。
图片：LIU CHENHUAN
11 of 10
事实上，当我们操作的时候，手指有大本的接触范围在界面边缘之外，屏幕边缘有一个安全范围。触碰界面外的硬
件设备位置，不会有误操作，其次手指虽然在界面外，但是只要落点碰到操作热区，用户行为依旧成立。由于热区
与设备的关系，用户可为了避开屏幕内的操作热点。定义为Drag的手势操作区别于大部分Tap操作也是重要原因。
相比于其他功能位置，边缘位置简单明了，学习成本与记忆成本都较低。
边缘位置的用户记忆成本更低
边缘UI的实际操作范围更大
图片：LIU CHENHUAN
12 of 10
Steven Paul Jobs Andy Rubin William Henry Gates
4 of 10
fruit go
px
and
Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy textever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book:
Simply dummy text of the printingand typesetting industry. When anunknown printer took a galley of typeand scrambled it to make a typespecimen book.It has survived notonly five centuries, but also the leapinto electronic typesetting.
2 of 10
FASHION
BEAUTY
CONCEPTS
PRODUCT
MEN
HEADSHOTS
FINE ART
NATURE
MACRO
ADVERTISING
PORTRAIT
Simply dummy text of the printingand typesetting industry. When anunknown printer took a galley of typeand scrambled it to make a typespecimen book.It has survived notonly five centuries, but also the leapinto electronic typesetting.
Simply dummy text of the printingand typesetting industry. When anunknown printer took a galley of typeand scrambled it to make a typespecimen book.It has survived notonly five centuries, but also the leapinto electronic typesetting.
Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy textever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book:
3 of 10
FASHION
BEAUTY
CONCEPTS
PRODUCT
HEADSHOTS
FINE ART
NATURE
MACRO
ADVERTISING
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum
There are many variations of passages of Lorem Ipsum available
There are many variations of passages
There are many variations of passages of Lorem
There are many variations of passages of Lorem Ipsum
There are many variations of passages
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
$125
$256
$125
$256
$125
$256
$125
$256
$125
Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standarddummy text ever since the 1500s, when an unknown printer took
5 of 10
robot go
6 of 10
Dp与PX：
density一般为3个常用固定值240/160/120
分别对应WVGA/HVGA/QVGA
在320x480分辨率，像素密度为160,1dp=1px
在480x800分辨率，像素密度为240,1dp=1.5px
推荐的有效可触摸UI元素标准
约等于 最小间距 约合
九宫格
【普通拉伸和点九拉伸效果对比】
【点九图的制作】
【点九图的制作】
Android的首页和浏览
Android的列表模式
5 of 10
window
6 of 10
推荐的最小尺寸
（ ）
理想尺寸
（ ）
8 of 10
Project Name
is simply dummy text of the printing andtypesetting Lorem Ipsum has been theindustry's standard dummy text ever sincethe 1500s
Project Name
is simply dummy text of the printing andtypesetting Lorem Ipsum has been theindustry's standard dummy text ever sincethe 1500s
Project Name
is simply dummy text of the printing andtypesetting Lorem Ipsum has been theindustry's standard dummy text ever sincethe 1500s
9 of 10
Project Name
is simply dummy text of the printing and typesetting Lorem Ipsum has been theindustry's standard dummy text ever since the 1500s, is simply dummy text of theprinting and typesetting Lorem Ipsum has been the industry's standard dummy textever since the 1500s
Category
is simply dummy text.
Camera/Equipment
is simply dummy text.
Location
is simply dummy text.
Materials
is simply dummy text.
Viewport 的设置
4 of 10
<meta name="viewport" content="width=device-width, initial-
scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-
scalable=no" />
width=device-width: 页面显示宽度等于设备分辨率宽度
initial-scale=1.0: 像素点对点1:1对齐
minimum-scale=1.0： 最小缩放1倍 就是不能缩小
user-scalable=no : 禁止用户缩放
maximum-scale=1.0: 最大放大1倍，就是不能放大
参考资料
10 of 10
TapworthyDesigning Great iPhone App s
By: Josh Clark
LIVE DEEPLY!we’re extremely fortunate not to know precisely the kind of world we live in.
By: LIU CHENHUAN
var RWD = responsive web design
By: Benny Chia
