【UI】App界面设计

实验目的:

1. 掌握APP界面设计的规范及一般制作技巧;
2. 掌握移动设备中的常用尺寸;
3. 掌握APP的界面构成。

实验内容及基本要求:

1. 综合使用cdr、ps等软件制作APP界面，效果如下图所示。要求布局合理、配色恰当。

1. 保存psd源文件，导出png格式图片。

实验过程及实验步骤:

1 首页

1.1 创建图层

使用Ctrl+N新建图层，创建大小合适的图层

1.2 背景

复制图片到新图层，按住alt键创建剪贴蒙版，并填充黑色背景添加效果

 

 

1.3 文字

创建矩形选区并输入文字，创建参考线，调整文字位置

 

 

 

1.4 图标

利用形状工具制作图标

 

 

1.5 效果图

2 商品展示

2.1创建图层

使用Ctrl+N新建图层，创建大小合适的图层，并制作参考线

  

 

  

2.2 商品展示

创建白色选区，复制图片到新图层，按住alt键创建剪贴蒙版，并添加效果

 

 

2.3 商品文字

创建文字并创建参考线，调整文字位置

2.4 商品图标

利用形状工具制作图标

 

   

2.5 商品

利用同样的方法制作其他商品展示

  

 

2.6 导航栏

创建矩形并添加文字制作导航栏

         

     

2.7 底部

利用形状工具绘制底部图形，并添加黑色选区背景，制作底部

  

   

2.8 效果图

3 详情页

3.1 创建图层

使用Ctrl+N新建图层，创建大小合适的图层

   

3.2 背景

复制图片到新图层，按住alt键创建剪贴蒙版，并填充黑色背景，设置填充度

  

3.3 详情栏

创建白色选区背景，并绘制线

 

创建文字并创建参考线，调整文字位置

复制图标，并移动到合适位置

 

3.4 效果图

4 详情页（2）

4.1 创建图层

使用Ctrl+N新建图层，创建大小合适的图层

 

4.2 header

制作矩形选区，并填充黑色，复制图片到新图层，按住alt键创建剪贴蒙版，设置混合选项

  

4.3 navbar/titlebar

利用直线工具绘制箭头

4.4 status bar

制作图标，添加文字，来制作status bar

4.5 tabs

创建白色矩形，制作图标并添加效果

   

      

4.6 content

创建文字并创建参考线，调整文字位置

创建蓝色矩形，制作图标并添加效果

创建圆形，复制多个移动调整位置，修改颜色，制作color

创建矩形，制作图标，输入文字制作buy now

4.7 tab bar (navigation) (4 items)

制作图标，并移动到合适位置，绘制底部

 

4.8 效果图

实验总结：

1. 掌握了APP界面设计的规范及一般制作技巧；
2. 掌握了移动设备中的常用尺寸；
3. 掌握了APP的界面构成。