用户中心页设计全解析,15 分钟教程一次搞定!

发布时间:2023-01-10 20:51:30

用户中心页,也被称为个人中心页,一般位于应用程序中“我的”页面,只要有有用户体系的产品,都应该具备用户中心页这样的页面。个人中心页的样式和布局可能因产品的类型而异,设计师在设计时可能会纠结于选择什么样的样式和布局更适合这个产品。其实,即使看起来结构简单的个人中心页也有一定的设计规律,这些页面也包含了许多容易被忽视的设计细节。在本期用户中心页设计教程中,我们将一起设计 5 类常见的用户中心页。

用户中心页设计

1、背景

创建画板 375*812 的画板,填充 D9E833 。

2、全局操作区

绘制 24*24 的图标作为全局性操作区功能图标。

3、个人信息区

标题「MiSans、Regular、字号 16、填充 212121 」。

金额「MiSans、Bold、字号 28、填充 212121 」。

4、资产

标题「MiSans、Regular、字号 16、填充 212121 」。

金额「MiSans、Bold、字号 28、填充 212121 」。

5、功能区

绘制 48*48 的画板,调整画板成圆形,填充 141414 。

绘制 24*24 的 icon,填充白色,不透明度为 90% ,放置于画板内。

文本「MiSans、Medium、字号 16」。

6、账单列表

绘制 40*40 的画板,填充 F6F6F6,作为条目图标位置。绘制 20*20 的icon

,填充 212121,放置于画板内。·条目文本「MiSans、Medium、字号 14」。

时间「MiSans、Medium、字号 10、填充 ABABAB」。

金额「MiSans、Semibold、字号 16、填充 1B1B21」。

7、底部导航栏

绘制 375*52 的画板,填充白色。

绘制四个icon,作为导航图标,调整颜色和间距。

以上就是用户中心页设计教程的全部内容,进入即时设计,UI 设计、原型设计、标注开发一步到位,免费注册即时设计,即用“在线版Sketch”!