《移动web实现指南》（三）——移动化导航

一、表

1. 尺寸：握在手里的大小刚刚好
2. 比例：怀表的表盘以及上面的信息是根据各种各样的因素来决定比例的
3. 设计：便于在移动中使用，表盘要有一眼就能识别的数字和指针

 

二、汽车界面

 

1. 尺寸：按钮的尺寸适合我们手指的大小
2. 位置：与驾驶者之间的距离、与其他操控装置的接近度，以及各种各样的操控器是如何分组的
3. 数量和复杂性：操控器越少用起来越复杂；相反，从视觉角度去思考时，就需要考虑更多的选择项了

 

三、IOS应用程序界面

1）计算器

只要有可能，我们就应该让移动界面上的按钮或是任何可以点击的区域最少也要有44px的高和宽（在320*480的屏幕中）

 

2）电话界面

拨号界面上的小尺寸按钮就宽66px，而那些更大的按钮宽104px。将能用的空间很好的利用起来，把按钮做的更大。

 

3）iPod

使用表格视图进行导航来罗列专辑中歌曲的好例子。每一行都是一个按钮，行高是42px。

 

四、移动化导航设计

 

1）HTML

 

2）CSS

水平排列改成垂直排列

修改每行的大小和位置，让他们扩大而且容易点击，从汽车操作界面中学到的

调整排版方式，改造的像瑞士手表那样易读

最后的效果将会和iPod中的应用程序一样的效果

 

PDF书籍下载：

http://download.csdn.net/detail/loneleaf1/8446769