App界面设计

虽然用过很多好的App,但是自己写的实在很丑,所以收集一些认为好的界面设计,以作参考

PS:

1.下面说的向上向下都是指的手指操作的方向,向上指手指向上滑动

列表

1.顺丰快递

行为分析:

1.当点击‘投诉建议‘旁边的按钮的时候,会有一个旋转的动画,同时操作条从下弹出,但是并没有将下面的Item的内容向下挤,而是直接覆盖了;此外,操作条下面有阴影,但是上面没有,然后此时点击这个界面的响应都是隐藏操作条

1)说明并不是改变Item的样式,而是直接在整个界面上面加上了一层View,上部分是完全透明,下部分是有阴影的

2.点击列表Item除了‘投诉建议‘和按钮外,都是进入到详情界面,另外,如果是可以评价的数据,中间的圆圈显示‘点击评价‘,并且也会点击会跳转到评价界面

2.智行火车票

            

行为分析:

1)当向下滑动的时候,只要滑动了,两个操作条就会动画往屏幕内侧滑动来显示

2)当向上滑动的时候,只有当滑动速度大于某值的时候,会动画隐藏掉两个操作条,如果以很慢的速度滑动,是没有隐藏动作的

3)当快速的上下滑动得到时候,两个操作条始终以正常的速度动画显示和隐藏,当手指停止后,当前的那个动画结束也就全部结束了

--------------------------------------

PS:携程同这个一样的效果,但是2)中,没有根据速度来判断,而是只要滑动了,就隐藏

3.去哪儿

                                       

行为分析:

1)向上滑动的时候,‘条件类型栏‘会动画隐藏(很慢无效),根据滑动速度来判定的

2)向下滑动的时候,‘条件类型栏‘会动画显示(很慢无效),根据滑动速度来判定的

3)当大概滑动到列表1/3处(不确定是否按照比例来还是距离,大致应该是根据顶部项的索引来的),过了那个点,‘看过按钮‘会向上动画,显示‘顶部按钮‘(显示/隐藏,即使滑动过程中,手指未离开屏幕,只要到了那个点,还是会触发)

---看过 这种操作,只适合于时效性不强的数据

PS:淘宝对操作3),只要是向上滑动,就里面显示‘顶部‘按钮

时间: 2024-11-03 21:48:34

App界面设计的相关文章

26款能够吸引用户的 iPhone App 界面设计

在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文章 创意设计:折叠效果在移动App中的应用 45套新鲜出炉的精美 PSD 网页设计素材 分享15套免费的扁平化界面设计素材下载 设计前沿:30款超级精美的iOS图标欣赏 40款 iPhone 和 iPad 应用程序图标设计 设计来源 设计来源 设计来源 设计来源 设计来源 设计来源 设计来源 设计来

20款优秀的国外 Mobile App 界面设计案例

在下面给大家分享的移动应用程序界面设计作品中,你可以看到不同创意类型的视觉效果.如果你想获得灵感,那很有必要看看下面20个优秀用户体验的移动应用 UI 设计.想要获取更多的灵感,可以访问移动开发分类,里面有很多移动应用程序的 UI 设计,让你惊叹. 您可能感兴趣的相关文章 创意设计:折叠效果在移动App中的应用 45套新鲜出炉的精美 PSD 网页设计素材 分享15套免费的扁平化界面设计素材下载 设计前沿:30款超级精美的iOS图标欣赏 40款 iPhone 和 iPad 应用程序图标设计 Nap

[UI] APP界面设计流程

此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.

app界面设计字体规范

通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android:英文字体:Roboto,中文字体:Noto 二.案例分析 1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短,标题栏按钮名)为20px,头像名为28px.字体大小代表的层级关系一目了然. 2.正文部分,导航栏标题文字为36px,内容标题为

APP界面设计就该那么美妙!

如今手机屏幕的尺寸越来越放大化,但却始终很有限,因此,在APP的界面设计中,精简是一贯的准则.这里所说的精简并不是内容上尽可能的少量,而是要注重重点的表达.在视觉上也要遵循用户的视觉逻辑,用户看着顺眼了,才会真正的喜欢. 以下是AnyForWeb为大家精心挑选的APP界面设计,供大家欣赏评论. 1.第一个案例在背景上完全没有任何的修饰成分,在色彩上也只是比较传统的使用方法,它的特别之处就在于字体的变化上.如果想把一个APP做的尽量简洁化,大多数设计师会选择借助于简单的颜色或清晰的布局,很少设计师

app界面设计流程

完整的流程,分层次设计,自下而上去完成 1.策略层,定义产品使命.价值.目标人群 2.愿景/功能层:定义核心场景.功能列表 3.结构层:做流程图.信息架构,确定主导航.主菜单 4.框架层:梳理每一个主界面的内容.布局 5.表现层:视觉设计,涉及图标.配色.切图. 产品经理主要关注1~2,在去找设计师之前,请先问自己以下几个问题,以保证需求明确: 产品给用户带来的价值是什么? 竞品有什么?我们做这个有什么优势? 为什么样的用户而做? 用户会在什么样的场景下使用这个产品? 要完成这个产品,最大的瓶颈

APP界面设计之尺寸介绍

1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只要宽度不变都好说.至于像素问题,网页和移动的UI用72px就可以了,不必纠结. 2.界面基本组成元素 iPhone的APP界面一般由状态栏.导航栏.主菜单栏和中间的内容区域组成.因为宽度是固定的,所以设计开发起来很方便.下面我们说说这些“栏”的尺寸吧: 状态栏:显示运营商.信号和电量的区域,高度 4

Android/IOS APP界面设计之尺寸规范

1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只要宽度不变都好说.至于像素问题,网页和移动的UI用72px就可以了,不必纠结. 2.界面基本组成元素 iPhone的APP界面一般由状态栏.导航栏.主菜单栏和中间的内容区域组成.因为宽度是固定的,所以设计开发起来很方便.下面我们说说这些“栏”的尺寸吧: 状态栏:显示运营商.信号和电量的区域,高度 4

《Photoshop智能手机APP界面设计》学习笔记-转

第一章 APP用户界面基础 1.1 手机UI设计相关基本概念 1.1.1 什么是UI设计 UI(User's Interface)即用户界面,它不仅仅是美化界面,还需要研究用户,让界面变得更友好.简洁.舒适.易用.用户界面无处不在.它可以是登录界面,也可以是软件界面,手机.PC上都有: 1.1.2 手机UI与平面UI的不同 手机UI将范围基本锁定在手机的APP/客户端上.平面UI范围则非常广泛,包括了绝大部分的UI领域. 1.1.3 什么是APP/客户端 APP(application)指的是应