首页 > 学院 > 软件教程 > 正文

sketch设计列表页面的示例教程

2020-03-08 03:05:31
字体:
来源:转载
供稿:网友

  相信很多人都有注意到,我们在使用软件的时候,它的个人中心界面一般都有一些跳转页面选项,我们称它为列表页面。那么如何根据规范设计一个列表页面呢?在工作中列表页面是需要我们自己制作出来的,方法很简单,只需要在sketch软件中新建一张画布,然后进行一系列的设计。下面的教程中有对设计列表页面详细的操作方法,朋友们可以学习一下怎么设计列表页面哦,具体请看下文:

sketch设计列表页面的示例教程

方法步骤

  1、首先我们用sketch软件进行设计,进入页面之后新建一张画布,可以看到中间就有了一张新的画布,然后将大小下面的尺寸设置为为375*667,如下图所示;

sketch设计列表页面的示例教程

  2、然后在软件中找个预设的添加导航栏高度是44px,字体是18px即可;

sketch设计列表页面的示例教程

  3、一般列表页面都是有一个返回的,我们可以用上方的【矩形】工具来绘制一个列表页面返回的标志,如下图所示;

sketch设计列表页面的示例教程

  4、然后我们在上方的【矩形】工具中创建375*667的矩形,放在最底层,然后在右边填充下调整颜色即可;

sketch设计列表页面的示例教程

  5、接下来我们利用【矩形】工具绘制白色的形状作为内容区域,与导航栏的距离为16px,如下图所示;

sketch设计列表页面的示例教程

  6、然后我们输入文字信息,字号设置为14px,在文字信息的上边和下边的间距和左边间距各自16px,如下图所示;

sketch设计列表页面的示例教程

  7、一般在右边都有一个跳转符号和文字平行,高度设置为14Px,如下图所示;

sketch设计列表页面的示例教程

  8、接下来我们点击上方的【直线】去添加一个添加,就可以看到图片上面的文字信息;

sketch设计列表页面的示例教程

  9、接下来用这个方法去绘制完成所有列表选项,只需要复制粘贴即可;

sketch设计列表页面的示例教程

  10、我们在设计时可以将不同类别的选项用白块区分开,如下图所示。

sketch设计列表页面的示例教程

  好了,根据规范设计一个列表页面的详细操作方法小编就介绍到这里了,希望大家能够喜欢小编的文章!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表