APP开发实战2-APP产品和设计人员的工作

产品经理通常需要提供产品原型、流程图和说明文档给开发人员。

设计师需要提供效果图和图片资源给开发人员。

2.1在设计原型和效果图时的注意事项

(1)手机屏幕的宽度有限,水平方向尽量少放置内容;而用户已经普遍知道通过向上滑动手指,可以在屏幕的垂直方向翻页显示更多内容,所以可以在垂直方向多放置内容,可以理解为显示区域的高度没有限制。

(2)如果当前显示的内容超过了一屏,而用户通过向上滑动手指翻页到了第N页(N>1),此时通常在屏幕的右下角要显示一个图标,用户点击此图标,应用直接显示第1页内容。

如果页数比较多,需要设计用户可以选择查看其中任一页的内容,如提供页码列表或让用户手动输入想查看的页码数字。

(3)遇到字符串长度超过显示区域的情况,通常有以下处理方式:

A 换行显示

B 在显示区域内的最后一个字符显示为省略号…

C 向左滑动当前页面,显示超出显示区域的字符串

在设计原型和效果图时,需要明确采用哪种处理方式。

(4)设计师在设计效果图的时候,最好按APP适配的最小尺寸设计,在文字显示区域显示的字符串就是最大字符个数。

如在电商APP中,最长的商品名称可能有20个字符,在效果图上就要放20个字符,这样就比较容易发现水平方向布局的问题。

(5)文本输入区域最好能设计屏幕的上半部分,这样不会被输入法的软键盘遮住,如大多数APP的登录或注册界面就是这样设计的。

如果文本输入区域只能设计在屏幕的下半部分,最好设计用户在点击文本输入区域时,弹出一个新的界面,这样文本输入区域也不会被输入法的软键盘遮住。

还有一种方案是,在弹出输入法的软键盘时,当前页面整体往上移动,这样文本输入区域也不会被遮住。

(6)在设计文本输入区域时,应设计显示提示信息:用户输入怎样的字符和字符个数;输入区域的最右边要设计有删除输入文字的图标,用户点击即可删除输入区域中的所有文字。

(7)密码输入框的右边应设计有切换明文密文显示的图标。

(8)手机号码设计按3-4-4格式显示。

(9)需要明确哪些页面支持用户手动更新当前页面数据,哪些页面不支持;如要支持,需要明确采用哪种方式:

A 用户下拉操作更新数据

B 用户点击刷新按钮更新数据

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

(11)许多APP在首页的底部有个TAB栏,上有几个按钮,点击这几个按钮显示的界面属于一级界面,左上角是不需要有返回图标或按钮的。除了一级界面外,在每个页面都应该明确从当前界面可以返回到哪个界面。

时间: 2024-12-19 01:00:16

APP开发实战2-APP产品和设计人员的工作的相关文章

APP开发实战5-APP产品和设计人员的工作

(34)在许多APP,尤其是电商APP中,会在购物车.订单或消息图标的右上角设计一个数字角标,显示购物车中的商品数量.订单个数或消息个数. 通常会把角标区域设计成圆形,如果数量不到100时,可以正常显示,超过100,变成3位或4位数时,往往就显示不下了.解决方案: A数字超过100时,显示99+. B 改变角标区域的形状. (35)大多数APP中的许多功能需要在登录状态才能正常使用,目前许多APP都把注销登录的按钮设计在比较深的界面,以让用户一直保持登录状态.如果用户很容易看见注销按钮,那退出登

APP开发实战3-APP产品和设计人员的工作

(12)在登录和注册界面,建议设计用户需要手动输入验证码,这样可以防止恶意攻击. (13)iPhone手机基本都使用系统自带的输入法,在用户点击搜索区域,弹出输入法软键盘时,软键盘上会显示搜索按钮:Android手机上使用的输入法各式各样,输入法软键盘上不一定会有搜索按钮. 在设计搜索界面时,iOS APP的右上角通常不需要有搜索按钮,但Android APP的右上角最好要设计有搜索按钮.同时要设计搜索不到数据时的界面. (14)原型应该完整体现各种操作流程,尤其是在出错的状况下的各种处理流程.

APP开发实战4-APP产品和设计人员的工作

(23)需要明确哪些界面用网页实现,哪些用Native代码实现:通常内容多变的界面,或者需要可以被链接索引传播的文字内容,等可以用嵌入网页的形式实现. (24)如果在一块区域中,只有一个元素需要用户点击,那可适当扩大这个元素的长度和高度,或设计整个区域都响应用户点击,以方便用户操作. (25)明确是否支持长登录,如果支持长登录时间维持多久. (26)是否支持一个账号在多个设备上同时登录,如果支持各设备之间的数据怎么同步:在某个设备上修改密码后,服务器端应自动注销其余设备上的登录状态. (27)在

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

入门移动端混合开发 实战京东 APP

第1章 课程介绍本章主要是向你介绍什么是混合开发,以及目前混合开发中的几种方案. 第2章 Hybrid 技术原理本章主要讲解 hybrid 技术原理与核心本质,让你对混合开发有更清楚的认识. 第3章 开发前的准备本章主要讲解核心代码开发前的准备知识,比如 Flex 布局.webpack 和 @vue/cli 的基础知识.scss 的基本应用和项目的初始化内容. 第4章 京东商城首页(上)本章主要使用 vue 开发商城首页,包括组件化思想.动态组件和异步组件的应用.axios的使用.swiper

最佳App开发模式–在App创业之路上助你一臂之力

最佳App开发模式–在App创业之路上助你一臂之力 活动概况 时间:2015年03月07日14:00-17:30 地点:车库咖啡(北京市海淀西大街48号鑫鼎宾馆二层) 主办:APICloud.美洽 网址:www.apicloud.com 费用:免费 活动背景 现在是一个全民创业的时代.很多创业者都选择了App创业这个渠道,将自己的idea付诸实践.对于资源有限的创业者来说,如何避开App开发道路上的那些坑,选择最佳的解决方案,快速.高效地开发App并占领市场? App推出以后,与用户维持良好的关

APP开发实战8-API接口设计

3.1接口设计 (1)需要确定APP和服务器间用什么格式传输数据,常用的有两种:XML和Json.XML文件中存在大量的描述信息,会大大增加网络传输数据:同样的内容,用Json格式,传输的数据比较少,首选Json格式. 还有一种Protocol Buffers 格式,以二进制的方式传输存储数据,网络传输数据量比Json还少,但要使用proto文件作为格式验证,各语言需要整一堆pb runtime以及对应的代码生成,增加复杂度较高,目前使用的不多. (2)需要设计Json数据的具体格式: 发送请求

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

Native App开发 与Web App开发(原生与web开发优缺点)

Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素.数据内容.逻辑框架均安装在手机终端上. Web App开发 Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份