恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
用正确姿势解析加载分类和加载机制
0.0°
2017-03-22 原创文章 经验/观点 举报 1577 1 6 1

用正确姿势解析加载分类和加载机制


闲来无事,手边正好有这几款手机,就大致的看了下几款手机的浏览器。发现很多可以和大家分享的点。就以oppo代表大部分的安卓手机,大致对比华为和iphone的浏览器。


接下来我将从闪屏 加载机制  首页布局 页面操作手势四个方面阐述这几款手机浏览器的不同之处,还有些不成熟的观点,望各位同仁及时指正。


有很多人对这几个概念其实并不是很清晰哈,其实它们有很多自己的特点及优缺点,下面从实际的例子来感受下这几个名词解释的概念


闪屏

闪屏第一要做的就是展现自己的Logo,如果界面好看,一眼就能留住用户,同时也给用户之间创造情感连接;第二,也是闪屏最重要的作用,就是利用闪屏的时间来做很多数据加载操作,这个也不难想到,如果直接进入数据比较多的主页时,那加载主页的承载负量就特别大。Image title


华为:直接进入界面,无闪屏

此操作做法建立在手机引擎及软件等后台加载快速的前提下。大家经常翻墙的人肯定知道,国外的许多软件是没有闪屏界面的,为什么呢?人家后台硬啊,根本就不需要闪屏界面!


华为自从使用了自己研发的麒麟处理器,手机速度流畅了许多,进入浏览器基本1秒左右就进入主界面,这速度值得给一个大写的赞。


oppo:闪屏等待加载
oppo加载速度挺快,3秒左右进入主界面。当前界面没有做任何本地缓存的时候,则采用闪屏图片屏加载机制。所有加载获取数据的时候界面一直显示闪屏图,一旦出现异常情况,会根据需要展示对应的缺省界面,比如网络异常,获取失败等等,不会一直在做闪屏加载。这种图片形式的加载,不仅会给产品带来一种特别的气质,更加深了印象,带来了好感。


iPhone:空白页面加载

一些安卓手机的系统浏览器都是直接白屏加载的,人iphone好歹还有个状态栏,有时候点进浏览器搜索个东西,直接全白屏了好久,还以为是手机卡顿了,然后退出去,再重新进去。偶尔碰上一次加载快的,就觉得,嗯原来是手机卡住了呀


ios的浏览器用国外网络那是很快就进去了,来了中国以后吧,有些水土不服。加载时间稍微长了点,不过也是三秒钟就进去的。iphone相比一些安卓浏览器,进入界面较快,但是也不利于与用户的情感化交流。

加载机制


Image title


华为 oppo: H5加载机制

现在很多的加载都采取这样嵌套的方式。一部分采取本地加载,另一部分则需要流量即时加载。
H5缓存机制的三个优势:
离线浏览 用户可在应用离线时使用它们
速度 已缓存资源加载得更快
减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。


iPhone: 进度条加载
多见于浏览器,包括PC端和移动端的浏览器。一些App页面会用H5的形式去做,这种页面多数也都会采用进度条的样式来显示loading过程;进度条先慢后快的加载使得用户感觉浏览器更流畅,同时减弱用户的焦躁,增强用户的期待值。(这句是将某位同仁的观点直接搬过来的,~_~)


页面布局


这个讲得就比较宽泛简单了,我就简单罗列一下,这几款的上中下布局功能


Image title


顶部

华为 oppo:顶部搜索,且可进行扫描

华为的图标整体大气一些,而oppo顶部有个底部banner,将顶部搜索撑到了单手手指更容易够到的区域,页面也显得更加丰富。


页面中部

华为 oppo:两者的布局相似,也是现在大部分网站采用的布局。上三行为5x3的热门网站推荐,下面则是今日热门新闻,新闻的布局也类似,上面是文字标题,下面附几张图。华为不同的是首条新闻显示置顶新闻,采取左图右文字的布局。


新闻的布局一般为两种形式,一个是左图右文字,二是右图左文字。

经过调查,其实第二种显示方法更符合人们的视觉流。Z字型的视觉流更符合我们的阅读习惯,也因为是新闻类的素材,快速浏览,选择自己感兴趣的文章阅读才是大多数人的做法,所以右图左文字,更适合人们快速阅读,顺势扫一眼图片,去帮助人们更快的选择自己更感兴趣的话题。在此不做过多赘述,有更专业的文章 调查大家可以自己去翻阅。


底部功能

华为 oppo:前进 返回 更多 页面总览 返回首页

iphone:前进 返回 更多 阅读列表 页面总览


此处基本没什么要说明的,感兴趣的可以去自己研究下  设计师为什么将这些功能用这些顺序摆放? 或者放这些功能的原因又是什么?是因为用户的使用频率吗?等等。


页面操作手势


这个就不附图说明了,大家使用的时候可以顺带体验下,华为和oppo浏览时切换页面可以直接左滑右滑切换,iphone则只能点击底部的前进 返回。


对于现在的用户来说,相对于n年前,大家还是很受用点击的,当滑动开始出现的时候,设计师和用户体验师就在思考:到底什么操作可以直接滑动操作呢?什么滑动操作更符合用户的物理操作习惯呢?所以在现在的app设计时,我们会将操作体验及功能一定会放在首位去考虑。


以上就是我这次要说的,更多的是我们自己拿着产品去思考,怎么才能使用户感觉更流畅?什么样的操作体验才是最好的。这些都是我们每一次设计之前需要思考的问题。Image title




更新:2017-03-22

收藏

1人已收藏

复古的歇歇

设计爱好者

  • 9

    作品

  • 11

    粉丝

  • 69

    关注

  • ios11 small GUI sketch文件分享
  • 侧抽屉遭嫌弃,如何设计优秀的导航栏?
  • 几十个国外优秀的手机登陆页面和注册页面(下)
  • 你不知道的IOS10.2

    猜你喜欢

      2017-03-22 原创文章 经验/观点 举报 1577 1 6 1

      用正确姿势解析加载分类和加载机制

      0.0°

      你确定要举报用正确姿势解析加载分类和加载机制

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      1
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录