[front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities

front end 2021-04-07 21:39:32
end live broadcast user experience


This 4 month , Taoxi technology is doing things ~2021 year , Taobao pays more attention to user experience , And set up a user experience group , Guide each team to optimize the experience .

4 month 13 solstice 4 month 21 Japan ,「 Taoxi front end team 」 Will revolve around 「 User experience 」 stay B Held in Beijing 5 It's a live broadcast of technology , Help experience optimization from the perspective of technology .

First line technology bull , Summary of the 100 million level traffic project , Scan the QR code below to sign up !

image.png

image.png

Thinking and implementation of cross end experience measurement

The first screen rendering time is one of the important indicators of the front-end user's somatosensory , There are few ways to collect the first screen time , Depending on the kernel can't be cross end , Depending on the business burying point, we can't monitor the whole first screen content .

Although the browser provides in performance monitoring api Can get fp,fcp, lcp etc. , But there is no complete completion time for the first screen rendering .

image.png

This sharing will introduce how to get the completion time of the first screen rendering in line with the user's body feeling , And how to achieve cross end unified first screen rendering time calculation and some derived directions in a pure front-end way .

AB Experimental technology helps upgrade the user experience

Why? AB Experiments can be used to improve the user experience ? An experiment is like a pipe , Realize our communication with users . At Taobao , Every iteration needs to be verified by experiments ,

Experiments have gradually changed our way of thinking , Let our product operation technology students , Really think from the perspective of users , Search for answers , And finally let the user's preferences drive the front end UI The direction of iteration .

but AB It's not easy to achieve , front end AB What is the design of the experimental architecture ?AB How to make the experiment scientific ? In the hand , How to use AB Experiments improve the user experience ? And whether the algorithm will eventually replace it AB experiment ?

image.png

This sharing , I will introduce to you AB The complete technical principle of the experiment , Let us understand the scientific nature of the experiment , And what's the difference between it and algorithms . Of course, we will also have a wealth of experimental cases to share , Let's see how our business students can upgrade the experience of different taonei products through experiments .

Real machine technology realizes automatic page adaptation

The user growth scenario involves following many APP Put the page in , The user will be drained to the hand through the call end , Make more APP、 Adaptation testing of multiple devices becomes extremely complex , Even some scenarios can't be completed just by manual testing .

image.png

How to complete the page adaptation test at low cost and continuously guarantee the stability of online pages has become a new kind of technical problem .

In this sharing , I'll have a brief talk with you , How do we put “ Real machine operation technology ” as well as “ Computer vision technology ” Bind together , Form a real machine monitoring platform , Instead of manual to complete the automatic page adaptation and online inspection tasks .

Virtual portrait rendering technology in Taobao life

“CyberSpace” The concept is early 1980 The age has appeared in human culture , However, for a long time, it has been confined to novels, movies, games and other art fields . But over the years , With “ Virtual idol ” The concept of success in breaking the circle , We believe that there will be great potential and value in the e-commerce industry , such as “ Virtual anchor with goods ”、“ Multiplayer video conferencing ” Such as the scene .

You may be curious CyberSpace I have a ghost relationship with e-commerce ? How to make a face change ? How do virtual characters make the same expression as real people ? And how it's different from playing games ? And it feels like Web It's worse ……

This time share , I will introduce some rendering techniques about virtual characters , And how to use AR The ability to interact with users in real situations and other topics . In addition, we will also stand in the perspective of front-end developers in native What are the similarities and differences in the development of the side .

image.png

The way to upgrade the structure of gold coin

Gold coin has the widest user coverage in the hand panning business 、 Interactive game products with the most complex user characteristics , It's how to effectively tap the value of gold coins , Better enhance user stickiness 、 Both active and innovative play an important role . In recent years, gold coin home business has developed rapidly , The original play is single , Users are tired , In business, we need more interesting game design to attract and stimulate users , Technically, we also need a more flexible architecture to meet the fast update iteration of the business .

image.png

This time share , I will share with you the process of architecture upgrade from the following aspects : • The background of architecture upgrade • Introduction to the technical solution of architecture upgrade , Build capabilities around interaction 、EVA Game ability 、 Barrier free 、 Performance optimization, etc • The business value of architecture upgrade , Around the value of gold coins 、 User stickiness, etc • Thinking about the future of the business

image.png

Front end team of consumer platform

Taoxi front end team , The largest front-end team in the eastern hemisphere , Undertake the vast majority of Taobao business . last year , In order to cooperate with the business development of Taoxi , For consumer business and industry business , Set up a front-end team of consumer platform , By the user growth team 、 Interactive teams 、 The basic link team consists of .

From the ads you see on other platforms, call the end to open hand Amoy , To all kinds of interactive games that you can play in hand ( Double eleven main interaction 、 Gold coins 、 Taobao life and so on ), To your shop 、 Look at the product details , Place an order , There are also some technology platforms to escort this process , The whole process is all about this team , From this, we can imagine the heavy responsibility of this technical team .

版权声明
本文为[front end]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/04/20210407213622895c.html

  1. Behind the miracle of the sixth championship is the football with AI blessing in the Bundesliga
  2. An easy to use Visual Studio code extension - live server, suitable for front-end gadget development
  3. 用 Python 抓取公号文章保存成 HTML
  4. User login of front end spa project based on Vue and Quasar (2)
  5. Summary of common selectors in CSS
  6. Using Python to grab articles with public number and save them as HTML
  7. To "restless" you
  8. 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
  9. 【微信小程序】引入阿里巴巴图标库iconfont
  10. layui表格点击排序按钮后,表格绑定事件失效解决方法
  11. Unity解析和显示/播放GIF图片,支持http url,支持本地file://,支持暂停、继续播放
  12. 【vue】 export、export default、import的用法和区别
  13. [free and open source] crudapi front end spa project based on Vue and Quasar
  14. [wechat applet] introduces Alibaba icon library iconfont
  15. Layui table click Sort button, table binding event failure solution
  16. Element树形控件Tree踩坑:修改current-node-key无效
  17. Unity parses and displays / plays GIF images, supports HTTP URL, supports local file: / /, supports pause and resume playback
  18. Element树形控件Tree踩坑:修改current-node-key无效
  19. The usage and difference of export, export default and import
  20. Element tree control: invalid to modify current node key
  21. Element tree control: invalid to modify current node key
  22. linux下安装apache(httpd-2.4.3版本)各种坑
  23. How to install Apache (httpd-2.4.3) under Linux
  24. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  25. Nacos serialize for class [com.alibaba.nacos.common.http.HttpRestResult] failed.
  26. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  27. Nacos serialize for class [ com.alibaba.nacos . common.http.HttpRestResult ] failed.
  28. Seamless management of API documents using eolink and gitlab
  29. vue 的基础应用(上)
  30. 28岁开始零基础学前端,这些血的教训你一定要避免
  31. Basic application of Vue
  32. Starting at the age of 28, you must avoid these bloody lessons
  33. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  34. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  35. 利用Vue实现一个简单的购物车功能
  36. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  37. Using Vue to realize a simple shopping cart function
  38. 【css】伪类和伪类元素的区别
  39. 【css效果】实现简单的下拉菜单
  40. 【vue】父子组件传值
  41. The difference between pseudo class and pseudo class elements
  42. [CSS effect] simple drop-down menu
  43. [Vue] value transfer by parent-child component
  44. 【css】设置table表格边框样式
  45. 【css】修改input,textarea中的placeholder样式
  46. vue-router的两种模式(hash和history)及区别
  47. CSS3的滤镜filter属性
  48. [CSS] set table border style
  49. [CSS] modify the placeholder style in input and textarea
  50. Two modes of Vue router (hash and History) and their differences
  51. Filter property of CSS3
  52. 全局安装gulp 报错问题解决
  53. Solution of error report in global installation of gulp
  54. 18个好用的自定义react hook
  55. 你应该知道的常用服务器HTTP状态码?
  56. 18 user defined react hooks
  57. What HTTP status codes should you know about common servers?
  58. 手把手教你打造属于自己团队的前端小报系统
  59. Hand in hand to teach you to build your own front-end tabloid system
  60. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?