APP开发设计效果图时的注意事项,深圳APP开发公司结合多年的设计开发经验,根据目前的设计趋势归纳整理出如下十一个我们在设计时需要注意的事项,以供参考。
(1)设计师在设计效果图的时候,最好按APP适配的最小尺寸设计布局,且在文字显示区域放的字符个数就是实际要显示的最大字符个数,这样很容易发现控件显示区域不足的问题。如在电商APP中,最长的商品名称可能有20个字符,那么在效果图上就要放20个字符。
(2)各种元素区域的尺寸要符合Apple和Google的设计规范要求。如果最小点击区域太小,会导致用户无法正常操作。对于iOSAPP,就是在iPhone3手机上,也就是@1x分辨率下,最小点击区域不能小于44px×44px;对于AndroidAPP,就是在屏幕像素密度为MDPI时,最小点击区域不能小于44px×44px。在@2x分辨率和像素密度为XHDPI时,最小点击区域不能小于的逻辑像素为88px×88px。
(3)在用户第一次使用APP时,许多界面没有数据显示,其内容为空。如用户第一次使用电商APP时,购物车和订单界面内容为空,就需要设计这些界面内容为空时的效果图。
(4)除了正常显示数据的界面外,还需设计从服务器或本地获取数据时的提示界面和无法正常获取数据时的界面。
(5)iPhone手机基本都使用系统自带的输入法,在用户点击搜索区域,弹出输入法软键盘时,软键盘上会显示“搜索”按钮;Android手机上使用的输入法各式各样,输入法软键盘上不一定会有“搜索”按钮。在设计搜索界面时,iOSAPP的右上角通常不需要有“搜索”按钮,但Android APP的右上角最好要设计有“搜索”按钮。同时要设计搜索不到数据时的界面。
(6)在设计搜索界面时,需要设计有搜索历史和无搜索历史的两种界面,同时明确显示搜索历史的个数。
(7)如果在一块区域中,只有一个元素需要用户点击,那可适当放大这个元素的长度和高度,或设计整个区域都响应用户点击,以方便用户操作。如图2-20所示的界面,主要是让用户点击右边的箭头图标,可以把箭头图标设计得大点,或把这一整行区域都设计能够响应用户点击,方便用户操作。图2-20
(8)在许多APP,尤其是电商APP中,会在购物车、订单或消息图标的右上角设计一个数字角标,显示购物车中的商品数量、订单个数或消息个数。通常会把角标区域设计成圆形,如果数量不到100时,可以正常显示;超过99,变成3位或4位数时,往往就显示不下了,此时有以下两种解决方案。数字超过99时,显示99+。改变角标区域的形状。如图2-21所示,左边的购物车里只有10个商品;中间购物车里的商品个数超过了99,就用99+表示;右边购物车里的商品个数超过了100,达到了1000,把圆形角标改成了椭圆形角标,以便完整显示1000这个数字。图2-21
(9)在设计图片显示区域的时候,不同界面图片显示区域的长宽比最好一致。如电商APP在商品列表和商品详情界面都需要显示图片,商品详情界面的图片显示区域设计为300px×300px,商品列表中的图片显示区域可设计为100px×100px,这样在服务器端可以只放一张300px×300px的图片,在APP端的商品列表界面显示图片时,服务器端可把300px×300px图片的宽度和高度直接都除以3,再发给APP,而不用担心在商品列表界面图片会变形。
(10)按最新的Google文档要求,AndroidAPP中各控件的尺寸数值及控件间的间距数值最好是8的倍数。
(11)用户使用APP的时候使用得最多的操作是点击操作,要想设计使用滑动操作,如在消息列表中通过滑动删除某条消息,最好给用户某种提示,否则用户通常不会使用滑动操作。好了,APP开发公司前端设计师本文关于“APP开发效果图设计时注意的十一个注意事项”的经验分享就到这里,谢谢关注,博纳网络编辑整理。