界面布局设计技巧

关键词：UI设计 UI培训

1. 合理利用UI空间

手机屏幕空间非常有限，每一块小小的区域都可以完成大作用，通过共享空间的利用可以完成多个界面的跳转及不同状态的切换。标签、滚动还有各种翻转切换都是通过空间共享的方式来承载不同的信息。

移动设计的挤压案例也很多。Android的Ex panda bleListView展示方式就是一种自上而下的挤压处理。

2. 注意拇指死角

触屏手机交互研究与PC交互研究存在着本质的变化。输入设备从鼠标键盘变成手指，一方面操作的精准度上受到了挑战，在密集的信息处理上，用户常常会出现许多误操作；另一方面，手指操作所特有的“死角和热区”问题也是PC界面设计中不会面临的。

实验表明，在拇指自然弯曲且处在指肚及的状态下，手持机的稳定性最佳，手指移动的灵活性也最佳。模拟这种状态下手指触及的区域，大致呈现出一个“扇形”区域（探索热区），而其他区域为“非探索热区”。

“热区探索”与“非探索热区”存在正确率上的显著差异，并且这种差异在不同刺激参数值下都成立。死角区误操作比率高，在控件布局应考虑死角问题，特别是在处理高频操作位置时。

3. 横评模式设计

由于横屏模式下纵向空间变得格外宝贵，导航栏、标签栏、键盘都需要被压扁。横屏都需要被压扁。横屏模式一定要考虑的是简单拉伸适配还是重新设计，如果应用不合适在横屏模式下使用，就屏蔽横屏，如果应用需要支持横屏模式（甚至是带侧滑键盘的横屏机器），就需要提供设计方案。

可以发现，用户在不同的使用情景、不同的应用类型下，对横屏的预期还是有所不同的。

● 游戏类

如果是横屏模式下用户的游戏体验最好，不妨在游戏启动时，就直接切换到屏幕。在强制横屏时，不需要提醒用户，只要用横向的启动画面引导，当用户看到闪屏是横向时，自然会知道要把屏幕翻转了。

●视屏类

用户在播放视屏之后，可以以一个合适的引导动画效果切换到横屏模式（如果用户已经锁定为不要旋转屏幕了，则尽量不要强制横屏）。在横屏模式下，如果是为了帮助用户关注到内容本身的应用，则可以把导航栏设置为透明的，或者让导航栏和工具栏可以自动隐藏。当然，如果用户需要时，单击一下空白处，也可以唤起操作栏。

另外，图片浏览、阅读类、工具栏等应用的横屏模式都有自身的特点和需求。总的来说，横屏模式下（特别是平板应用）应当遵循：

●要在所有方向下都能运行，尽力满足用户需求；

●考虑改变展示辅助信息和功能的方式;

●避免随意改变布局；

●如果可能的话，应该尽量避免重组信息，重排文字；

●为每一种方向提供独特的启动图片；

4.触摸设计

设计触屏手机产品时，要注意所有的可点击元素都有足够的点击区域，但是这并不是说要把所有的按钮图标链接都设计得足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。

a. 扩大操作焦点

Android 4.0规定的有效可触摸的UI元素标准48dp。一般来说，48dp转化为一个物理尺寸约为9毫米。建议的目标大小为7~10毫米，这一点与iphone一致，这是一个用户手指能准确并且舒适触摸区域。

b. 下移操作焦点

由于用户在进行各种操作时，需要确保自己准确地点击到相应的元素，所以一般情况下，右手持机的用户，落点会偏右且偏下。如果应用是操作密集型，则可以考虑调整有效点击。