返回
唐山今典室内设计培训
置顶
招生热线:400-800-2181

学校地址:唐山市路北区新华一号写字楼5号大堂5层501室

app设计规范

478 2022-05-16 09:18:10

学习笔记

  app是我们现在每天都会使用到的,但是在app设计的时候是有一些设计规范的,app设计规范是需要遵循人机交互、操作逻辑、界面美观的整体设计要求的, 界面设计一般有状态栏、标签栏、主显示区、导航栏,设计的时候要遵循空间设计规范,比如分辨率的要求、状态栏高度的要求、导航栏高度的要求等等,下面让我们来详细的了解一下关于app设计规范的知识介绍吧!

  


  APP聊天界面设计规范

  1.本课主要内容如图示。


  2.聊天界面的信息内容如图示。


  3.【打开】Sketch软件,【选择】合适的屏幕画布。具体效果如图示。


  4.【重命名】组件,单击【文件】-【从模板新建界面】,【选择】合适的组件对象,拖入画布,排列至合适的位置,调整尺寸。具体效果如图示。


  5.使用【矩形工具】绘制矩形,【关闭】描边,放至画面合适的位置。具体效果如图示。


  6.【修改】矩形颜色,使用【矩形工具】绘制矩形,调整大小,排列至合适的位置。具体效果如图示。


  7.使用【文字工具】,选择合适的字体,输入文字,调整大小,移动至合适的位置。具体效果如图示。


  8.【选择】关联图层,按【Ctrl+G】编组,【重命名】头部。使用相同的方法绘制底部形状对象,调整尺寸排列至合适的位置。【选择】关联图层,按【Ctrl+G】编组,【重命名】底部,【锁定】图组。具体效果如图示。


  9.根据聊天界面的内容信息,使用【圆角矩形工具】绘制合适大小的圆角矩形,【填充】合适的颜色,排列至画面合适的位置。具体效果如图示。


  10.使用【椭圆工具】和【矩形工具】绘制搜索图形,调整大小和颜色,排列至圆角矩形上方合适的位置,使用【文字工具】,选择合适的字体,输入文字,调整大小,排列至合适的位置,【选择】关联图层,按【Ctrl+G】编组。具体效果如图示。


  11.使用相同的方法根据界面内容,使用【形状工具】和【文字工具】绘制消息组件,【选择】关联图层,右击【创建组件】,【重命名】消息。具体效果如图示。


  12.按【Ctrl+C】复制组件,移动至合适的位置。【修改】组件信息,单击【面板属性】-【从组件中剥离】,调整细节。具体效果如图示。


  13.使用相同的方法【复制】多个组件,排列至画面合适的位置,【修改】内容。具体效果如图示。


  14.【打开】图片素材文档,【选择】合适的图片,按【Ctrl+C】复制,按【Ctrl+V】粘贴至画板,调整图层顺序,排列至椭圆上方,【选择】两个对象,右击-【蒙版】,调整图片大小,放置合适的位置。具体效果如图示


  15.使用相同的方法给其他的位置添加合适的图片素材,调整大小,排列至合适的位置,根据聊天界面信息,修改内容。具体效果如图示。


  16.【选择】关联图层,按【Ctrl+G】编组,【重命名】内容,右击【锁定图层】。【解锁】底部图组,使用相同的方法,根据聊天界面信息,绘制底部信息图标和文字,【填充】合适的颜色,调整大小,排列至对应的位置。具体效果如图示。


  17.本课内容小结如图示。

  


  展开全部Android APP界面设计规范

  1.APP UI设计是软件的人机交互、操作逻辑、界面美观的整体设计。

  


  2.界面包含有【状态栏】、【标签栏】、【主显示区】、【导航栏】。

  


  3.【控件设计规范】如下图所示。

  


  4.【界面设计规范】如下图所示。

  


  5.安卓常用中文字体为【思源黑体】,英文字体为【Roboto】。

  


  6.安卓系统与苹果系统使用的设计稿尺寸不同,如下图所示。

  


  7.【首页】的主要作用是要在短的时间内让用户对内容产生兴趣。

  


  8.打开【PS】,新建【1080*1920】的画布,并划分出【状态栏】、【标签栏】、【导航栏】,如图所示。

  


  9.给【状态栏】和【标签栏】填充颜色,并绘制【状态栏】和【标签栏】的内容,如图所示。

  


  10.将广告图片和功能图标【复制】到Banner区域,如图所示。

  


  11.添加【主显示区】的其它元素,如图所示。

  


  12.绘制【导航栏】按钮和图标,如图所示。


文中图片素材来源网络,如有侵权请联系删除
来源:唐山今典室内设计培训培训中心

免费提供问答解答,帮您轻松解决难题

热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请
刷新
图形验证
关闭
>>
拖动左边滑块完成上方拼图