APP聊天界面设计规范 应用步骤有哪些?

新手小伙伴们在进行app界面设计之前,需要了解学习设计规范和设计细节 。本文小编来为大家分享一下APP聊天界面设计规范的一些知识 。

【APP聊天界面设计规范 应用步骤有哪些?】

APP聊天界面设计规范 应用步骤有哪些?

文章插图
1、首先我们需要从电脑中打开Sketch软件,根据界面需要选择合适的屏幕画布 。
2、接着我们需要重命名组件,依次点击【文件】-【从模板新建界面】选项,选中合适的组件对象,拖入画布,排列至合适的位置,调整尺寸 。
3、在画布中合适的位置,使用工具栏中的【矩形工具】绘制矩形,关闭描边 。
4、下一步修改矩形颜色,调整大小,排列至合适的位置 。
5、使用【文字工具】,在画布中合适的位置输入文字,选择需要的字体,调整大小样式 。
6、依次点击关联图层,按住【Ctrl+G】键进行编组,重命名头部 。
7、使用相同的方法绘制底部形状对象,调整尺寸排列至合适的位置 。选择关联图层,按【Ctrl+G】编组,重命名底部,【锁定】图组 。
8、使用工具栏中的【圆角矩形工具】,绘制圆角矩形,根据界面风格填充颜色,排列至画面合适的位置 。
9、使用工具栏中的【椭圆工具】和【矩形工具】绘制搜索图标,调整样式,排列至圆角矩形上方合适的位置 。
10、再次使用【文字工具】,输入文字,调整样式和大小 。选择关联图层,按【Ctrl+G】编组 。
11、接着根据界面需要,使用【形状工具】和【文字工具】绘制消息组件,选择关联图层,右击【创建组件】,【重命名】消息 。
12、按【Ctrl+C】复制组件,移动至合适的位置 。然后修改组件信息,依次点击【面板属性】-【从组件中剥离】选项 。
13、使用相同的方法【复制】多个组件,依次排列至画面合适的位置,【修改】内容 。
14、接着打开图片素材文件,选择图片进行复制,粘贴至画板,排列至椭圆上方 。同时选择两个对象,右击【蒙版】,调整图片大小,放置合适的位置 。
15、使用相同的方法给其他需要的位置添加图片素材,调整大小 。
16、选择关联图层,按【Ctrl+G】编组,重命名内容,鼠标右击【锁定图层】 。
17、最后解锁底部图组,绘制底部信息图标和文字,【填充】颜色,调整大小,排列至对应的位置 。
以上就是APP聊天界面设计规范中的一部分 。新手小伙伴们先学习练习这部分的设计规范,熟练掌握之后再学习下一部分的设计规范,以熟练记忆掌握APP聊天界面设计规范的应用 。

    推荐阅读