上一章 苹果音乐主页的设计

资料库页面的设计

UX百科编辑部2023-12-18 发布
839人在学·0条笔记
收藏

基本框架搭建

这里的第一步依旧是先搭建基本的框架,而如果前面做过的页面和当前的相似,就可以复制前一个画布出来并删除不相关的组件,这样可以提升效率,不用重复造轮子。

将顶部标题栏的标题改为“资料库”,并下移给卡片留出位置;在顶部添加一个编辑按钮,下方绘制一个矩形卡片。

然后,再在官方组件库中找到列表组件,并复制到画布中,将高度修改为48,在标题前添加一个图标。这需要注意的是,iOS 的官方列表样式中,分割线不是整屏连通的,而是在左侧会留出缺口,在有图标的情况下,分割线会规避图标的部分,向右进行缩进。完成一个列表修改之后,重复复制出8个完成纵向列表。

完成视觉设计

首先完成顶部组件的设计,卡片设计的方法是通过对内容的设计来确定外部的尺寸,包含上下两个区域,确定好后,再以12的内间距完成卡片高度的修改。

然后就是完成下方的列表设计,iOS的官方列表样式中,分割线不是整屏连同的,而是在左侧会留出缺口,裁切掉图标的部分。

同时,添加图标要从同一套素材中添加,确保列表上下的图标风格一致。

最后,切换底部导航的选中状态即可。

课后作业

了解了官方列表模式的应用,就可以通过下方新歌精选页面的临摹做进一步的巩固。

839人在学·0条笔记
收藏
已学会
35人已学会
下一篇专辑页面的设计
基本框架搭建 复制一个「现在就听」页面出来,然后删除不相关的组件内容。 然后从官方组建库中复制一个基础的顶部标题栏,删除不相关的元素。 继续添加封面图和下方的专辑信息文字。 接着绘制中间的两个按钮,虽然官方有提供按钮控件,但这么基础的元素,是没必要从官方复制出来的,直接手动完成即可。 按钮主要根据高...
本章笔记
仅看自己
logo