App导航 - 具有android或IOS的特性设计

  Android使用Linux内核是1991年开发的,Mac OS X、iOS和苹果的其他平台是基于Unix系统的,那是AT&T贝尔实验室在1969年启动的一个项目。Windows计算机则是基于Windows NT内核,其历史可追溯到1993年。

   苹果一贯的封闭和精品策略,决定了苹果仅仅是一个人在战斗,也没有向任何盟友伸出橄榄枝。完全依赖手机一年一部的发行节奏来驱动市场,通过在硬件外观上的创新来撩拨消费者的心弦,这样的封闭策略已注定了 ios 不会主导整个市场份额。

>  随着Android design体验的提升,特别是自从Android 4.0以后,已经渐渐地缩小了与ios的差距了,越来越多的android应用开始遵循android 的设计规范了(可以参考android版的微信),而且随着Android 5.0的设计进一步优化,与Google逐渐加强对Android系统的控制;这种从ios生硬照搬来的底部tab导航栏模式在android 4.0之后会不流行了。在Android的Material Design中,同样提出了悬浮icon的设计概念。
  认真的设计一个Android应用所应该有的。研究Google最新的Android设计规范。

> IOS和Android的UI元素——导航及工具栏:
 一、Android和IOS在应用内导航机制上的区别
IOS主要靠导航栏和工具栏来实现应用不同信息层级结构间的导航;而Android 2.3 和更早期的系统依赖于返回按钮去支持app 中的导航,在 android 3.0 中,向上按钮成为第二个导航机制。
 二、Android和IOS在应用操作栏/工具栏上的区别
Android操作栏包括视图控件,而IOS上视图的切换主要靠底部标签栏。
Android操作栏可使用多操作栏,采用选项卡来做视图切换时通常展示在顶部主操作栏下方,而非底部。
Android允许使用情景操作栏,而IOS是通过编辑模式来完成同样的目的。
*编辑模式和情景操作栏的区别在于:Android通过长按触发,IOS通过编辑按钮触发;Android的操作控件均在CAB显示,IOS的操作控件允许在底部单独显示;Android完成编辑后CAB自动退出,IOS完成编辑后需点击完成按钮退出编辑模式。
 三、IOS系统
导航栏:实现在应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。
导航栏主要包括:返回+标题+控件。如果你需要放置很多控件,或者不需要导航时,可使用工具栏取代导航栏;工具栏是不包括标题的。
*屏幕方向的变化将会导致导航栏/工具栏高度自动变化,确保你自定义的图标可以适应导航栏高度变小的情况(不包括iPad)
 四、Android系统
操作栏:被分为适应于大多数app的四个不同功能区域——app图标(非顶级含向左符号)、视图控件(切换视图,形式包括下拉菜单或选项卡)、操作按钮(主要操作,最多两个)、更多操作。
多操作栏:当横竖屏旋转或适应不同尺寸屏幕时,允许使用多操作栏,包括主操作栏、顶部栏、底部栏,顶部操作栏的通常放置选项卡做视图切换。
情景操作栏:是一个在操作特定子任务期间,重叠在app操作栏上的临时操作栏,通常用于涉及内容或文字选择的任务。

> 移动端导航的七种设计模式 -- http://blog.jobbole.com/94762/
  不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设计的第一步,就是决定导航的框架设计,框架确定后,才能开始逐渐丰富血肉。
  首先,我们要为组织信息分层,在这一步骤,一定要做好信息层级的扁平化,不能把所有的组织信息都铺出来,这样做只会让用户心烦意乱找不到想要的重要操作,也不能把层级做的很深,用户没有那么多耐心跟你玩躲猫猫。一定要将做核心、最稳固、最根本的功能要素放在第一层页面,其他得内容收在第二层、第三层、甚至更深。
  之后,根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难,移动端的屏幕尺寸就这么大,操作方式也无非就是点击、滑动、长按这些。因此导航模式一般也就分为以下7种(当然你可以在这七种的基础上互相组合)接下来我们可以具体分析一下这七种导航模式。 

-- 常用的导航
1.标签式导航:最常用、最不易出错,请第一时间考虑它(底部tab式导航、顶部tab式导航、底部tab的扩展导航)
  QQ、微信、淘宝、微博、美团、京东等全部都是底部tab式导航;QQ音乐和酷我音乐现在用的就是顶部Tab式导航
  腾讯新闻和网易新闻de新闻类APP;如微博和QQ空间、闲鱼
2.抽屉式导航:如果你的信息层级繁多,可以考虑将辅助类内容放在抽屉中
  随着iPhone6和iPhone6 plus的,QQ
3.列表式导航:作为辅助导航来展示二级甚至更深层级的内容,每个APP必不可少,但请注意数量与分类
  如杂志Elle
4.平铺式导航:如果你的内容是随意浏览,无需来回跳转的,可以考虑它。
  家居杂志的APP,杂志休闲随意的特质,非常适合平铺式导航,最大限度的保持了图片的完整性
5.宫格式导航:不建议在APP中作为主导航使用,如果非使用不可,请增加跳转的关联性
  IOS、android手机桌面,美图秀秀
6.悬浮式导航:更适应大屏的导航模式,不妨试一试,但注意不要让它遮挡住某些页面的操作
  通常悬浮的icon都可以在屏幕边缘自由移动,依靠悬浮层随时可以去想要去的地方;在Android的Material Design中,同样提出了悬浮icon的设计概念。

最后,根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app是一个跨平台的开发框架,可以实现一次开发,多端发布的效果。能够利用uni-app,我们可以方便地仿制今日头条新闻app。 首先,我们可以通过uni-app的页面结构和组件库来搭建类似今日头条的界面,包括顶部的导航栏、新闻列表的展示等。 然后,我们可以通过uni-app框架的网络请求功能,获取今日头条新闻的数据,并将其展示在界面上。可以利用uni-app内置的request或者axios等库来发送HTTP请求,并获取返回的新闻数据。 对于新闻列表展示,我们可以利用uni-app的列表渲染功能,将获取到的新闻数据渲染到页面上。同时,可以使用uni-app的下拉刷新组件实现新闻的实时更新。 另外,可以利用uni-app的路由功能,实现新闻详情页的跳转。当用户点击某个新闻标题时,可以将对应的新闻ID传递给详情页,并通过uni-app的路由功能进行页面的跳转。 在详情页中,可以展示新闻的详细内容,并可以提供评论、点赞等交互功能。可以利用uni-app内置的组件库,实现这些功能。 最后,针对用户的个人设置和喜好,可以通过uni-app的本地存储功能,实现收藏、关注等功能。用户可以自主选择感兴趣的栏目,并将其保存在本地,方便下次打开app时快速浏览相关内容。 总之,利用uni-app框架,我们可以轻松实现仿制今日头条新闻app的源码。通过运用uni-app的丰富功能和组件库,可以实现新闻的展示、跳转、交互等各种特性,以及个性化设置和存储功能。无论是在IOSAndroid还是其他平台上,利用uni-app都能实现一次开发,多端发布,提高开发效率,降低开发成本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值