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页。
商品列表数据共有10页，当前显示的是第2页的内容，左右两边4个箭头对应的功能是跳到第一页、跳到上一页、跳到下一页和跳到最后一页。在编辑框中输入5，然后单击按钮，则会直接跳到第5页。1.在使用APP的时候，常遇到在某个界面显示的内容比较多，一屏显示不下，不下，而在屏幕底部的控件又需要一直显示，此时就需要考虑悬浮设计，就是在滑动当前界面显示的内容时，始终显示底部的控件，相当于底部控件悬浮在内容的上方。
如图2-5所示的是电商APP里必有的购物车界面，购物车里的商品可能一屏显示不下，需要用户滑动商品列表显示更多商品内容，但在界面底部的商品总价和按钮需要一直显示，方便用户随时进入结算界面下单，这就需要使用悬浮设计。
如图2-5所示的是电商APP里必有的购物车界面，购物车里的商品可能一屏显示不下，需要用户滑动商品列表显示更多商品内容，但在界面底部的商品总价和按钮需要一直显示，方便用户随时进入结算界面下单，这就需要使用悬浮设计。2.在电商APP的购物车、结算页面和订单页面，通常页面顶部需要显示商品商品优惠政策或客户联系方式等信息，中间显示商品列表，底部是功能按钮区域。如果商品数量比较多，就需要上拉显示更多的商品，为了扩大商品列表的显示区域，有以下两种方案。如顶部区域显示的信息不需用户编辑，则可以设计上拉时顶部区域随着商品列表一起向上滑动。如顶部区域信息也需用户编辑，则可以设计顶部区域在商品列表向上滑动时隐藏起来，此区域也用于显示商品列表；商品列表停止滑动时，则显示顶部区域，方便用户随时编辑顶部信息。
如图2-6所示的订单详情界面，上部区域显示收件人的联系方式和收件地址，底部显示按钮，只有中间区域用于显示商品列表。当用户向上滑动手指，则显示更多的商品，此时用户并不关注收件人的联系方式和收件地址信息，就可让这部分区域随着商品列表一起向上滑动，或者把收件人联系方式和收件地址信息隐藏起来，将此区域用于显示商品列表数据；当商品列表停止滑动时，可再显示收件人的联系方式和收件地址信息。
如图2-6所示的订单详情界面，上部区域显示收件人的联系方式和收件地址，底部显示按钮，只有中间区域用于显示商品列表。当用户向上滑动手指，则显示更多的商品，此时用户并不关注收件人的联系方式和收件地址信息，就可让这部分区域随着商品列表一起向上滑动，或者把收件人联系方式和收件地址信息隐藏起来，将此区域用于显示商品列表数据；当商品列表停止滑动时，可再显示收件人的联系方式和收件地址信息。3.由于手机屏幕空间有限，像标题栏这样的区域在有些界面中就不必显示
显示了，从而更有效地利用空间。如商品详情界面，这样可以扩大图片展示区域。
如图2-7所示的商品详情界面，将标题栏区域去掉，整个上部区域都用于显示商品图片，中间用于显示商品规格等数据，底部用于显示功能按钮。
如图2-7所示的商品详情界面，将标题栏区域去掉，整个上部区域都用于显示商品图片，中间用于显示商品规格等数据，底部用于显示功能按钮。4.文本输入区域最好能设计在屏幕的上半部分，这样不容易被输入法的
键盘遮住，对应的功能按钮最好紧贴在输入区域的下方，许多APP的登录、注册和修改密码界面就是这样设计的。
如图2-8所示，文本输入框和按钮都在屏幕的上半部分，以避免输入法键盘被遮住。
如图2-8所示，文本输入框和按钮都在屏幕的上半部分，以避免输入法键盘被遮住。 如果文本输入区域只能设计在屏幕的下半部分，那么在用户点击文本输入区域
区域时，设计弹出一个新的界面，或是在弹出输入法键盘时将当前界面整体往上移动，这样文本输入区域也不容易被输入法键盘遮住。如果不能把界面整体往上移动，可以适当缩小文本输入区域上方的内容所占的空间。如把文本输入区域上方的图片显示区域缩小，这样此区域下方的内容就自动向上移动了，也就是部分上移。
如图2-9所示为没有显示输入法键盘时的界面。
图2-10所示为显示输入法键盘时的界面。好了，APP开发公司本文关于“不同APP开发应用前端界面设计方法详解”知识就分享到这里，谢谢关注，博纳网络编辑整理。
如图2-9所示为没有显示输入法键盘时的界面。图2-10所示为显示输入法键盘时的界面。好了，APP开发公司本文关于“不同APP开发应用前端界面设计方法详解”知识就分享到这里，谢谢关注，博纳网络编辑整理。当前文章链接：/construction/appkaifa/2160.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
