APP开发实战143-设计效果图时的注意事项

设计效果图时的注意事项

(1)设计师在设计效果图的时候，最好按APP适配的最小尺寸设计布局，且在文字显示区域放的字符个数就是实际要显示的最大字符个数，这样很容易发现控件显示区域不足的问题。
如在电商APP中，最长的商品名称可能有20个字符，在效果图上就要放20个字符。
 
(2)各种元素区域的尺寸要符合Apple和Google的设计规范要求，尤其是最小点击区域如果太小，会导致用户无法正常点击操作。

对于iOS APP，就是在iPhone3手机上，也就是@1x分辨率下，最小点击区域不能小于44x44px；对于Android APP，就是在屏幕像素密度为MDPI时，最小点击区域不能小于44x44px。

在@2x分辨率和像素密度为XHDPI时，最小点击区域不能小于的逻辑像素为：88x88px。

 
(3)在用户第一次使用应用时，许多界面没有数据显示，内容为空；如用户第一次使用电商APP时，购物车和订单界面内容为空，就需要设计这些界面内容为空时的效果图。

 

(4)除了正常显示数据的界面外，还需设计从服务器或本地获取数据时的提示界面和无法正常获取数据时的界面。

 
(5)iPhone手机基本都使用系统自带的输入法，在用户点击搜索区域，弹出输入法软键盘时，软键盘上会显示搜索按钮；Android手机上使用的输入法各式各样，输入法软键盘上不一定会有搜索按钮。

在设计搜索界面时，iOS APP的右上角通常不需要有搜索按钮，但AndroidAPP的右上角最好要设计有搜索按钮。同时要设计搜索不到数据时的界面。

 

(6)在设计搜索界面时，需要设计有搜索历史和无搜索历史的两种界面，同时明确显示搜索历史的个数。

 

(7)如果在一块区域中，只有一个元素需要用户点击，那可适当扩大这个元素的长度和高度，或设计整个区域都响应用户点击，以方便用户操作，如下图所示：

上图所示的界面，主要是让用户点击右边的箭头图标，就可以把箭头图标设计的大点，或把这一整行区域都设计成响应用户点击，方便用户操作。
 

(8)在许多APP，尤其是电商APP中，会在购物车、订单或消息图标的右上角设计一个数字角标，显示购物车中的商品数量、订单个数或消息个数。

通常会把角标区域设计成圆形，如果数量不到100时，可以正常显示，超过100，变成3位或4位数时，往往就显示不下了。解决方案：

A数字超过100时，显示99+。

B 改变角标区域的形状。

如下图所示：

  
左边的图中，购物车里只有10个商品；中间图片的购物车里的商品个数超过了100，就用99+表示；右边图片的购物车里的商品个数超过了100，达到了1000，把圆形角标改成了椭圆形角标，以便完整显示1000这个数字。
 

(9)在设计图片显示区域的时候，不同页面的图片显示区域的长宽比最好一致，如电商APP在商品列表和商品详情中都需要显示图片，商品详情中的图片显示区域设计为300x300，商品列表中的区域可设计为100x100；这样在服务器端可以只放一张300x300的图片，在APP端的商品列表页面显示图片时，服务器端可把300x300图片的宽度和高度直接都除以3，再发给APP，而不用担心在商品列表页面图片会变形。

 

(10)按最新的Google文档要求，Android APP中各控件的尺寸数值及控件间的间距数值，最好是8的倍数。

 
(11)用户使用APP使用的最多操作是点击操作，如果设计使用滑动操作，如在消息列表中，通过滑动删除某条消息，最好给用户某种提示，可以使用滑动操作，否则用户通常不会使用滑动操作。