2020-04

27

深圳网站设计公司分享 拼车应用界面设计
  • 类型:专业观点
  • 编辑:JOY
  • 来源:深圳网站设计公司
  • Lyft是一款主要集中在大城市的拼车应用;他们的许多司机是移民或移民的孩子。
    莱夫特意识到,他们应该有一个独特的界面设计为围绕移民和美国生活方式的对话添加新的声音。
    当我们说“美国是一个想法,而不是一个地理位置”时,其背后的含义是美国不能被固定在一个单一的地点或城市。
    没有人能独享美国人的定义。


    拼车应用界面设计


    艺术方向
    探索了许多不同的界面设计方向,然后才获得最新的美国外观。
    美国人以大胆著称。他们毫不掩饰自己的身份,并自豪地向世界展示这一点。
    设计通过使用经典的美国色彩和大胆的字体,搭配简洁的美学和将视觉效果结合在一起的小星星细节,将大胆带入生活。
    带有最少动画的简单故事界面设计确保用户能够轻松阅读故事,并让有影响力的故事通过。
    通过摄影的精心布置,帮助角色活灵活现,通过剧本类型,赋予他们个性。

    体验介绍
    通过偶/奇创作美丽的故事和视频,知道在发现Lyft司机社区的精彩故事之前,需要吸引用户的注意力。
    通过多次迭代,我们设计了我们的标志概念。
    它开始于一个黑暗和情绪化的宇宙中的一些肖像。
    当用户滚动时,肖像缩小并分解成一面美国国旗。
    这个想法是为了迅速展示,是生活在美国的人构成了美国的结构。

    导航
    虽然网站允许用户以多种方式探索,但最简单的导航方式是从头到尾。
    创建了从一个故事的结尾到下一个故事的开始的无缝过渡,允许用户点击或滚动到下一个故事。
    但是,如果用户想从一个故事跳到另一个故事,他们可以通过简单的菜单或者登陆页面上的旋转木马体验来实现。
    然而,由于视频是如此情感化的片段,并且是体验中不可或缺的一部分,确保用户无论从哪里导航,都能获得这些视频的预览。
    它给了网站深度和维度,同时作为用户预览下一步的功能元素。

    技术
    该站点是用轻量级的普通ES6 Javascript构建的webpack建筑配置。
    这是一个纯客户端应用程序,不涉及服务器端语言。
    构建了一个内部命令行工具,使用Chrome Headless来预渲染网站,以便更好地优化搜索引擎。


    拼车界面设计


    网站设计的3D标志部分是用OGL建造的,是最小的WebGL使创建3D环境变得简单且开销很小的框架。
    在处理介绍效果的标志图块时,将尽可能多的工作卸载到GPU以获得最佳性能。
    使用了用自定义顶点着色器制作动画的实例化缓冲区几何体。
    瓷砖上使用的照片都被打包成一个单一的纹理图谱——这意味着可以节省带宽并进一步提高介绍动画的性能。
    它还有一个额外的效果,那就是容易更新照片。