top of page
标志.png

项目介绍

Lifebonder 是一家新兴初创公司,总部位于哥本哈根,致力于开发一款社交媒体应用程序,以加强现实世界中的人际关系,扭转孤立的趋势。该项目历时三个月,大部分任务是通过 Adobe XD、Zeplin 和 Jira 执行的。

我的角色: 作为 UI/图形设计师,我与用户体验研究人员和开发人员密切合作。我的职责包括功能确定、线框创建以及 Web 应用程序的交互式原型的开发。

PNG-图像-PNG-Apple-mac-Macbook-pro-Ma

背景

当今时代,大量的社交媒体平台建立了超越地理界限和时间限制的广泛网络,使人们能够在全球范围内进行联系。尽管存在这种联系,但研究表明,长时间使用社交媒体往往与用户孤独感的增加有关。矛盾的是,这些为连接而设计的平台可能会无意中造成一种孤立感。

针对这一现象,我们团队致力于创建一个具有鲜明针对性的社交平台。我们的目标是在现实生活中培养个人之间更有意义和更深刻的社会联系,抵消过度使用传统社交媒体可能带来的意外孤立。

设计过程

线框图

考虑到用户对基于意图和详细资料的自动匹配、展示相关社交活动以及促进好友管理和群组创建的需求,我认识到笔记本电脑上使用的 Web 应用程序带来的独特挑战,其中滑动等交互操作不太实用。固定位置和更大的屏幕。

 

为了解决这个问题,我将 Web 应用程序重新定义为一个双重用途的平台,既充当内容显示中心又充当管理工具。我与用户体验研究人员合作,更详细地阐明了用户操作流程和 Web 应用程序的复杂性。这涉及概述站点地图以可视化结构、屏幕、每个页面上的必要元素以及它们之间的过渡,以确保无缝且直观的用户体验。

站点地图-web.jpg

UI及视觉设计

随后,我深入研究了应用程序的整体美感,在设计过程中采用了模块化方法。从入门模块开始,我参考了站点地图来布局每个页面,确保包含必要的元素。为了保持网络和移动应用程序之间的一致性,我与移动应用程序设计师密切合作,为应用程序建立了统一的色调。接下来,我定义了版式并精心设计了每个 UI 元素,包括图标、间距和字体,最终改进了交互。

 

在整个过程中,我在每个阶段创建了多个模型,以促进有效的沟通。这种方法使产品经理和开发人员更容易可视化每个设计的影响,促进清晰的讨论并根据有价值的反馈进行快速迭代。

颜色与字体

基本元素.png

登陆页面

我战略性地将公司徽标中的圆圈作为主要视觉元素,利用它们来象征个人及其社交互动。这些圆圈经过深思熟虑地相互关联,直观地传达了用户之间的相互联系,并强调了平台内人际关系的重要性。这种设计选择不仅与公司的品牌相符,而且强化了促进有意义的社会活动和关系的核心理念。

网络 1920 – 11.png

主页

启动后,引入了三个主要功能,允许用户探索每个模块中的内容。与不会立即呈现的新朋友和活动不同,用户可以查看匹配的朋友、标记或参加活动以及管理群组。主页的设计旨在保持清晰和整洁,三张相关图片作为每个模块的视觉提示。导航按钮进一步增强了用户直观性,确保主要内容区域的呈现井井有条且用户友好。

网络 1920 – 2.png

通知

在此页面上,用户可以阅读和管理他们的通知。该界面提供了查看和删除通知的选项,为用户提供了一种简化且有效的方式来了解他们在平台内的交互和活动。

收件箱通知.png

聊天窗口

配色方案与移动应用程序保持一致,为用户带来无缝的视觉体验。此外,用户可以利用搜索功能有效地定位特定消息或朋友,从而增强消息传递功能的可访问性和可用性。

收件箱消息聊天.png

©陈怡然
2024年

bottom of page