Lyft是一款主要集中在大城市的拼车应用;他们的许多司机是移民或移民的孩子。
莱夫特意识到,他们应该有一个独特的
界面设计为围绕移民和美国生活方式的对话添加新的声音。
当我们说“美国是一个想法,而不是一个地理位置”时,其背后的含义是美国不能被固定在一个单一的地点或城市。
没有人能独享美国人的定义。
艺术方向
探索了许多不同的界面设计方向,然后才获得最新的美国外观。
美国人以大胆著称。他们毫不掩饰自己的身份,并自豪地向世界展示这一点。
设计通过使用经典的美国色彩和大胆的字体,搭配简洁的美学和将视觉效果结合在一起的小星星细节,将大胆带入生活。
带有最少动画的简单故事
界面设计确保用户能够轻松阅读故事,并让有影响力的故事通过。
通过摄影的精心布置,帮助角色活灵活现,通过剧本类型,赋予他们个性。
体验介绍
通过偶/奇创作美丽的故事和视频,知道在发现Lyft司机社区的精彩故事之前,需要吸引用户的注意力。
通过多次迭代,我们设计了我们的标志概念。
它开始于一个黑暗和情绪化的宇宙中的一些肖像。
当用户滚动时,肖像缩小并分解成一面美国国旗。
这个想法是为了迅速展示,是生活在美国的人构成了美国的结构。
导航
虽然网站允许用户以多种方式探索,但最简单的导航方式是从头到尾。
创建了从一个故事的结尾到下一个故事的开始的无缝过渡,允许用户点击或滚动到下一个故事。
但是,如果用户想从一个故事跳到另一个故事,他们可以通过简单的菜单或者登陆页面上的旋转木马体验来实现。
然而,由于视频是如此情感化的片段,并且是体验中不可或缺的一部分,确保用户无论从哪里导航,都能获得这些视频的预览。
它给了网站深度和维度,同时作为用户预览下一步的功能元素。
技术
该站点是用轻量级的普通ES6 Javascript构建的webpack建筑配置。
这是一个纯客户端应用程序,不涉及服务器端语言。
构建了一个内部命令行工具,使用Chrome Headless来预渲染网站,以便更好地优化搜索引擎。
该
网站设计的3D标志部分是用OGL建造的,是最小的WebGL使创建3D环境变得简单且开销很小的框架。
在处理介绍效果的标志图块时,将尽可能多的工作卸载到GPU以获得最佳性能。
使用了用自定义顶点着色器制作动画的实例化缓冲区几何体。
瓷砖上使用的照片都被打包成一个单一的纹理图谱——这意味着可以节省带宽并进一步提高介绍动画的性能。
它还有一个额外的效果,那就是容易更新照片。