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聊天界面设计规范的应用。

【原创声明】凡注明“来源:优草派”的文章,系本站原创,任何单位或个人未经本站书面授权不得转载、链接、转贴或以其他方式复制发表。否则,本站将依法追究其法律责任。
TOP 10
  • 周排行
  • 月排行