关于设计系统概念化的产品
2023 年 10 月 23 日

关于设计系统概念化的产品

为了决定应用程序视觉效果的语调和氛围,我不得不从一个概念应用程序开始。我选择了一个我自己经历过的问题陈述,这样我就不必花费太多时间探索问题空间,而是更加专注于我想通过这个项目建立的技能,即视觉设计。

在做了一些自由设计工作之后,我意识到我的大部分客户都来自于我的共同朋友,我需要花费很长时间才能走出我的圈子,获得超出我的人脉范围的客户并扩大我的网络。与朋友和家人的协商变得更加困难。

将设计师/插画师自由职业者与客户联系起来,将设计工作求职者与招聘者联系起来。

我面临的另一个问题是没有一个单一的平台可以将我的社交媒体链接(behance、medium等)都集中在一处。使用我的个人资料作为作品集,而不是需要单独建立一个网站。 2. 屏幕的架构和线框图

主屏幕:职业机会,设计师发布他们的想法并与其他设计师互动

个人资料屏幕:用户可以在不同平台上添加他们的作品,以及他们开放的角色和项目类型等。

搜索屏幕:搜索机会、职位空缺、自由职业和设计师们。

聊天屏幕:与网络、客户和其他行业设计师进行聊天。

免责声明: 我的涂鸦可能有些难以理解 💔

请注意,在这个项目中,我努力限制自己,更加注重学习如何有效地使用Figma,相对较少关注我的问题解决能力。因此,对我来说,继续进行一个非常重要的屏幕是有意义的 - 个人资料屏幕,它将充当设计师/用户的作品集。

  1. Figma的文件结构

3.1 开始 开始使用应用程序的视觉效果,关键是选择与产品的目标用户群相匹配的周到的色彩和字体。

用户群主要包括设计师和创意领域的人。品牌个性需要树立现代和动态的调调。产品的配色方案选择反映了这一点。

主要颜色将用于界面表面,而辅助颜色将作为强调色。

在Figma上组织颜色样式-文件夹和层次结构。

由于平台最终是专业人士互相联系和寻求机会的空间,品牌必须反映出一丝专业主义。为产品选择的字体家族也是为了反映这一点。

完整的字体比例尺被分为两个桶:标题和正文,每个桶中又有四个进一步的级别,以传达清晰的视觉层次。

在Figma上组织文本样式-文件夹和层次结构。

3.2 基于构建组件 组件库的一瞥 #

组件库被精心构建。对于这个项目来说,最基本的组件是按钮、图标和输入框。下一级的组件,例如导航栏等,是使用上述细粒度组件以及文本等辅助元素构建的。

在Figma上组织文本样式-文件夹和层次结构

3.3 使用组件创建屏幕。 #

创建组件后的下一步是优化线框图并使用组件将其转换为高保真度的屏幕。以下是使用组件设计的一些示例屏幕。