第二章 APP常用元素制作
2.1 图形制作
2.1.1 圆形、椭圆 page 134
2.1.2 正方形、长方形 page 137
2.1.3 圆角 page 140
2.1.4 Squircle(正文形与圆形相结合的图形) page 142
2.1.5 组合图形 page 145
2.1.6 虚线 page 148
2.1.7 其他形状 page 150
2.2 常见控件的制作 page 155
常见的控件可以通过下载现成的PSD控件模板直接使用。
2.2.1 按钮 page 156
2.2.2 单选框 page 160
2.2.3 下拉选择框 page 170
2.2.4 选择项 page 174
2.2.5 滑动条 page 183
2.2.6 TAB切换 page 191
2.2.7 输入框 page 201
2.3 启动图标的制作
2.3.1 Android启动图标 page 210
2.3.2 iOS启动图标 page 218
2.4 图片效果处理
2.4.1 色彩调节 page 235
对找到的图片换颜色
2.4.2 镜面效果 page 241
让图片呈现出镜面一般的效果
2.4.3 倒影效果 page 247
让物体如倒影在水中，呈现更具体的空间感
2.4.4 画中画效果 page 254
2.4.5 移轴模糊 page 259
2.4.6 折角效果 page 264
折角效果在图标、自定义对话框、照片折角中常用到。
2.4.7 外边框 page 278
给图片添加像相框一样的外边框
2.4.8 APP背景图片合成 page 281
使用前面的各种图片效果处理，将各种控件放在背景图片上。
2.5 小技巧
2.5.1 PSD妙用 page 299
将一个PSD的图层样式重复使用到新的PSD中。
2.5.2 特殊效果的应用 page 300
图层样式的复制，
而且可以脱离PSD来应用这种效果：即将PSD中的样式单独保存再应用。
第3章 APP界面设计实战
一般来说，手机UI设计需要在设计后交出APP图标和所有页面。
根据一些资深产品经理的建议，
UI设计者可以下载大量的系统默认组件PSD文件备用，
初期设计时直接使用PSD中的组件，
等初稿完成，有剩余时间的前提下，再进行创新。
页面按不同系统布局分解，有些部分是可以通用的，不用再重新制作。
强大的UI设计师，除了拼灵感外，最重要的拼资源，
资源指的就是素材、样式和字体等。
快速和有质量是对APP UI的基本要求。
当你的资源、灵感和作品成果都积累到一定量的时候，
才能说明你已经真正熟悉掌握了这门技术。
APP UI页面设计步骤:
1. 分解页面: 将所有要在APP中使用到的页面罗列出来。
2. 根据页面尺寸规格，划分各区域大小位置，并固定成可用PSD模板。
3. 根据草图或功能描述还原页面，在PSD模板中补充组件元素。
4. 切图生成PNG可用图片包，并生成整体效果图。
3.1 Android实例 page 312
根据Axure线框图分解出要做的页面后，就要确定布局大小了。
Android布局规格要求如下:
以标准800px X 480px 的大小为例，
状态栏的高度为38px, 标签栏高为98px， 导航栏内的图标为48px X 48px。
但是，随着设计的屏幕密度不同，设计的尺寸也不一样，
而状态栏及其他部分的大小分布肯定也是随之相应变化的。
于是状态栏所占的尺寸比例也就无法用一个固定的值来规范。
如果在设计时，所做的页面大小尺寸与我们所列出的尺寸要求不符合时，
且没有人告知具体的规格时，又该如何设计呢？
根据经验，有两个方法可以推荐。
1. 下载同尺寸的PSD模板，在原有模块的基础上，去掉状态栏以外的元素，
保留大体布局框架。这样就可以在余下的白色区域内进行组件的分配和设计了。
2. 使用91助手或豌豆荚的截图功能对页面进行100%截图，
用Photoshop打开图片，按Ctrl+R调出标尺，按Ctrl+H调出参考线，
将状态栏或其他布局部分分割开。
使用方法是，直接在标尺上单击，然后往图上中拖，
水蓝色的参考线就会出现，这个时候再用框选工具选出特定区域进行删除或保留就可以了。
这些方法不仅适用于状态栏，也可以延伸到如标题栏和菜单栏中。
同理，iOS也适用这套方法。
3.2 iOS实例 page 337
页面分解；
iPhone的页面布局:
以标准的480px X 320px的页面大小为例，
状态栏的高度为20pts, 导航栏高为44pts, 导航栏内的图标为20x20pts,
标签内图标大小30x30pts。
最后还原。切图生成PNG可用图片包和JPEG效果图。
阅读(1729) | 评论(0) | 转发(0) |
