当前位置:妙知谷 >

游戏数码 >电脑 >

如何根据规范设计一个列表页面

如何根据规范设计一个列表页面

不知道你有没有注意过,在使用APP的时候,个人中心界面都是十分简单的,一般都是一些选项跳转页面,这种我们称之为列表页面,下面来学习如何设计一个规范的列表页面。

列表页面设计

(01)我们以sketch软件来进行设计,打开软件创建一张画布,尺寸为375*667。

如何根据规范设计一个列表页面

(02)对于导航栏和状态栏来说,系统是有规范的,导航栏高度为44px,字体为18px,在软件中找个预设的来添加就行了。

如何根据规范设计一个列表页面 第2张

(03)一般列表页面都是有一个返回的,我们可以利用“矩形”工具来绘制一个,你也可以在网上找png格式的透明图标直接使用。

如何根据规范设计一个列表页面 第3张

(04)接着我们给页面添加一个底色,选择矩形工具创建375*667的矩形,置于最底层,然后在右侧填充中调整下颜色。

如何根据规范设计一个列表页面 第4张

(05)接着用矩形工具绘制白色的形状,当做内容区域,它与导航栏的距离为16px。

如何根据规范设计一个列表页面 第5张

(06)接着我们输入最租车的文字信息,字号为14px,上下间距和左侧间距都是16px,这样能保证视觉上的统一。

如何根据规范设计一个列表页面 第6张

(07)在右侧我们一般都是有一个跳转符号和文字平行,符号的高度为14Px,你可以直接用返回图标来使用,使用旋转方向。

如何根据规范设计一个列表页面 第7张

(08)选择“直线”来添加一个添加,这样我们就制作完成了一条信息,是不是很熟悉。

如何根据规范设计一个列表页面 第8张

(09)利用这个方法来绘制完成所有列表选项,Ctrl+d能够快速复制

如何根据规范设计一个列表页面 第9张

(10)最后提醒大家一点,在设计的时候,你可以将不同类别的选项用白块来分开,这样对于用户的体验更换,两个白块之间的距离也是16px哦。

如何根据规范设计一个列表页面 第10张
标签: 页面 列表 规范
  • 文章版权属于文章作者所有,转载请注明 https://miaozhigu.com/zh-sg/sm/diannao/2o15g.html