不同APP开发应用前端界面设计方法详解_博纳网络深圳网站建设公司

当前位置：

发布时间：2019-01-22

文章编辑：网站建设文章来源：APP开发浏览量：次

APP开发前端设计，无论APP的界面显示模式是竖屏还是横屏，其对应的屏幕宽度都有限，水平方向尽量少放置内容；深圳APP开发公司提醒大多数用户已经知晓通过向上滑动手指，在屏幕的垂直方向可以翻页显示更多内容，所以可在垂直方向多放置内容，即屏幕的高度方向对显示的内容没有限制。当然也有特例的情况，如在竖屏模式下，当前界面有多个TAB页面，通常会支持左右滑动，以显示不同TAB页面的内容；或有多张图片需要显示的时候，也支持左右滑动，以显示不同图片的内容。此时最好在界面显示提示信息，提示用户左右滑动显示更多内容，如图2-1所示。

在图2-1所示的界面中显示了3种商品，如果种类超过3个，在用户第一次看到看到这个界面的时候，在此界面上方可再显示一个界面，提示用户“用手指左右滑动页面，显示更多内容”。用户点击屏幕，则提示界面消失。如图2-2所示

，如果显示的图片不只一张，在用户第一次看到这个界面的时候，在此界面上方可再显示一个界面，提示用户“用手指左右滑动页面，显示更多图片”，用户点击屏幕，提示界面消失。

（6）如果当前显示的内容超过了一屏，用户通过向上滑动手指，翻到了第N页（N>1），此时在屏幕的右下角要显示一个图标，用户点击此图标直接显示第1页内容，如图2-3所示。

如果页数比较多，需要设计用户可以选择查看其中任一页内容的图标，如提供页码列表或让用户手动输入想查看的页码数字。如图2-4所示，

商品列表数据共有10页，当前显示的是第2页的内容，左右两边4个箭头对应的功能是跳到第一页、跳到上一页、跳到下一页和跳到最后一页。在编辑框中输入5，然后单击按钮，则会直接跳到第5页。

1.在使用APP的时候，常遇到在某个界面显示的内容比较多，一屏显示不下，不下，而在屏幕底部的控件又需要一直显示，此时就需要考虑悬浮设计，就是在滑动当前界面显示的内容时，始终显示底部的控件，相当于底部控件悬浮在内容的上方。

如图2-5所示的是电商APP里必有的购物车界面，购物车里的商品可能一屏显示不下，需要用户滑动商品列表显示更多商品内容，但在界面底部的商品总价和按钮需要一直显示，方便用户随时进入结算界面下单，这就需要使用悬浮设计。

2.在电商APP的购物车、结算页面和订单页面，通常页面顶部需要显示商品商品优惠政策或客户联系方式等信息，中间显示商品列表，底部是功能按钮区域。如果商品数量比较多，就需要上拉显示更多的商品，为了扩大商品列表的显示区域，有以下两种方案。如顶部区域显示的信息不需用户编辑，则可以设计上拉时顶部区域随着商品列表一起向上滑动。如顶部区域信息也需用户编辑，则可以设计顶部区域在商品列表向上滑动时隐藏起来，此区域也用于显示商品列表；商品列表停止滑动时，则显示顶部区域，方便用户随时编辑顶部信息。

如图2-6所示的订单详情界面，上部区域显示收件人的联系方式和收件地址，底部显示按钮，只有中间区域用于显示商品列表。当用户向上滑动手指，则显示更多的商品，此时用户并不关注收件人的联系方式和收件地址信息，就可让这部分区域随着商品列表一起向上滑动，或者把收件人联系方式和收件地址信息隐藏起来，将此区域用于显示商品列表数据；当商品列表停止滑动时，可再显示收件人的联系方式和收件地址信息。

3.由于手机屏幕空间有限，像标题栏这样的区域在有些界面中就不必显示

显示了，从而更有效地利用空间。如商品详情界面，这样可以扩大图片展示区域。