Day 3 - 原型 (2) : 主页元件

设置

先在Figma中建立2个页面(Page), 名字分别为Blog跟Components(元件)。

Blog页面主要是放置Blog的各个页面, 例如:主页、Blog贴子页。而Components则是放置Blog的各个元件, 例如: 头像、Blog的贴子。

主布局 (main layout)

Blog的主要布局为2栏布局(2 columns layout)。左边的是Navigation bar, 用来放置头像跟贴子的分类; 右边则是Main content, 用来放置主要内容。

在Main content中, 我还设置了12栏的布局, 用来方便对准之後放在Main content的元件。

Navigation bar的元件

1. 头像 (Avatar)

显示个人头像跟名字。

2. 贴子的封存 (Blog's post archive)

显示每个月blog贴子的数量。使用者也可以按各个月份的按钮, 去筛选所显示的贴子。按右上角的箭头可以把元件隐藏。

Main content的元件

主页

1. 搜索栏

按已储存贴子的标题和内容, 来进行搜索。

2. 贴子

显示贴子的标题、发布日子、内容。按右下的READ MORE按钮, 可以进入贴子页。

3. 分页按钮

考虑到未来贴子的数量会很多, 我们也要加分页, 不然, 一次过显示大量的贴子会影响效能跟流畅度。要查看页面用了多少内存, 可以看看这篇。

至於功能上, 我提供了按上、下一页, 跟显示目前的页数。

元件类别

为日後更容易找到各元件, 我在每个元件名字之前加上了类别。元件命名的格式为

{元件类别} / {元件名字}

有听过吗? There are only two hard things in Computer Science: cache invalidation and naming things. Phil Karlton

结语

今天也建立了不少元件呢, 明天就把建立了的元件组合成为prototype的主页吧。