移动端小屏幕UI设计的感悟

大数据时代，到处都是信息的载体 - 屏幕。设计师们将信息整合后，通过视觉语言适配各种大小的移动端屏幕，让信息准确的传达给用户。

为了让用户能在不同的场景中合理的使用，设计师就需要针对不同场景用户会使用到的不同尺寸屏幕进行不同设计。设计方向包括功能、交互、已经视觉展现，从而让产品能够更友好的被用户使用。

屏幕的大小不同，所能承载的信息数量自然也不同。为了保持不同分辨屏幕下，设计风格的一致。设计师可以通过合理合并功能按钮、十字交互、增加可关闭容器、规整排列等等视觉语言进行信息传达。

合理合并功能按钮

设计来源于生活，移动端的设计灵感也可以从生活中领悟。

来回想下身边小家电，因为体积的限制，小家电的操作按钮少而精，通常将很多按钮合并。

比如，时间控制器、温度控制器、流量控制器等等，他们的共同点就是，合理的把相同功能按钮合并为一个，以节省空间。

同样的设计方式，我们也可以用于设计中。

如图，相同位置，不同状态的按钮，让按钮在不增加占位面积的前提下，增加了页面承载内容，满足了更多的功能需求。

十字交互

这样的交互方式虽然能够帮助我们更好的利用“屏幕外”的空间，但却存在误操作的可能。所以，运用时一定要注意功能使用的区域间隔和可操作空间。

可关闭、隐藏内容

想一想各大Web站与Wap站的菜单区别，Wap站用一个“汉堡Icon”将多个跳转链接隐藏收起，大大减少了界面占位的同时，保留了原有的菜单内容。

除此之外，可关闭提示气泡、新手引导、下拉菜单、上浮菜单、选择器等，都是常见的可关闭、隐藏内容的容器。

规整排列

大家有没有遇到过，随着产品功能的不断增加，或是需要将大屏设备功能，整合到小屏界面上时可涉及区域太小的问题呢？

移动设备设计中，九宫格、删格、区域划分等，就可以解决空间不够的问题，并增加可操作内容排列的灵活性和可变性（一般会通过icon+文字的方式进行呈现）。

现，很多应用都将此排列方式与可编辑功能相结合，制造为可自定义界面，大大增加了用户体验度。

总结

以上只是数据整合展现方式中的一小部分，但无论是那种整合方式都离不开数据筛选汇总，也就是前期的准备工作。

我们在使用视觉语言完成移动端屏幕信息传达的同时，也要注意不要脱离了用户需求的本质，这也是我们将信息进行可视化处理的基础。

原创： Quines·QQQ

公众号： 海盐社