我们已经草拟了两个主页的效果图。虽然对大屏幕中的展示效果已经胸有成竹,但我们还应该从小屏幕设备开始,强迫自己聚焦在关键的要素上面。

这个作品展示站点应该具有下列功能:

  • 带Logo的可折叠的响应式导航条;

  • 重点展示4张作品的图片传送带;

  • 单栏布局中包含三块内容,每块内容中都包含标题、短段落和吸引人点击阅读的大按钮;

  • 页脚包含社交媒体链接。

下面的屏幕截图展示了设计方案:

总的来看,这将是对我们工作成果的一个完美的展示。图片传送带比较高,可以充分展示我们作品的图片。当然,导航到底下的内容也不难,用户可以先了解每一项的大致情况,然后决定深入阅读哪块内容。通过把重要的链接做成大按钮,从视觉上突出了重要的操作,可以起到吸引用户点击的作用,而且就算是手指粗大的用户都可以轻易点触。

为了便于维护,我们决定只考虑两个主要的断点。在小于768px的小屏幕中使用单栏布局,否则就切换到一个三栏布局:

在这个针对大屏幕的设计效果图中,可以发现下列功能:

  • 位于顶部的导航条,而且各导航项都附带图标;

  • 宽屏版的图片传送带,其中的图片拉伸至与浏览器窗口同宽;

  • 三栏布局分别容纳三块文本内容;

  • 页脚在布局中水平居中。

这个设计的配色很简单,只有灰阶和用于链接和突出显示的金绿色。

明确了设计目标,接下来就可以布置内容了。

30:00