云应用开发指南

《云应用开发指南》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、云应用设计指南@阿里云《云应用设计指南》目录前言第一部分：云应用设计思路和原则1.什么是云应用？2.基本交互原则第二部分：云应用设计中的常见错误第三部分：云应用界面设计1.云应用用户界面介绍1.1分辨率与屏幕尺寸1.2云应用自定义添加至桌面1.3云应用首页界面结构介绍2.云应用交互操作要点2.1操作点击区域2.2操作手势介绍3.云应用界面设计要点3.1指示条快捷图标与云应用图标3.2云应用缩略图3.3云应用字体说明3.4云应用界面结构及组成元素1云应用设计指南@阿里云4.云应用界面控件4.1活动指示器4.2

2、日期时间选择器4.3下拉菜单控件4.4Radio与Checkbox4.5输入框4.6搜索栏4.7分段控件4.8提示框4.9数字提示符4.10默认图标与按钮2云应用设计指南@阿里云前言云应用设计指南建立的目的1.开放给广大的开发者，能够利用设计指南快速、方便的开发云应用，降低开发工程师和设计师的门槛，让开发设计云应用变得更容易。2.对于缺乏设计资源的开发者或开发团队，本指南能够提供交互与视觉设计标准和控件。3.通过阅读设计指南并理解设计中的要求，能使云应用开发者设计出用户体验较好的云应用。云应用设计指南组成部

3、分云应用设计指南分为二部分：第一部分为云应用设计思路和原则；第二部分为云应用界面设计（包含交互与视觉设计）；3云应用设计指南@阿里云第一部分：云应用设计思路和原则1.什么是云应用？什么是云应用？简单来概括一句话就是“手机上的增强版网页应用”。基于阿里云-云智能操作系统的云应用结合了网页应用和原生应用（ios原生应用、android原生应用），具有如下特点：@基于HTML/CSS/Javascript技术方式开发，门槛低。@可以跨平台访问。@用户访问的永远是最新版本。@可以利用云计算服务弥补手机运算能力的不足

4、，也可以利用云端的各种资源。@可以转换成原生应用。@可以通过API接口直接访问硬件资源（如摄像头、通讯录等）。@持久缓存，可以离线访问。2.基本交互原则@考虑大手指的触摸设计，避免错误点击，要求界面元素少而直观。@手机体验：多“点”两下大于多“找”两下。@操作易用性原则为：当前“界面内交互控件”易用于“tab”、易用于“界面内其他选择控件(切换)”、易用于“菜单”、易用于菜单内“更多选顷”。@界面内所有的点击按钮、控件必须有反馈或高亮状态。4云应用设计指南@阿里云@尽量避免用户输入，而采用点击、选择的方式。

5、@保持与云OS一致的交互行为、动作@反馈：点击操作控件必须要有相应的点击反馈；加载数据、等待时的界面反馈；提供必要的错误信息反馈不引导页面。5云应用设计指南@阿里云第二部分：云应用设计中的常见错误以下各种常见的UI方面的错误，如有违反，则应用会被退回修改。1.应用界面中的“返回”按钮设计在界面的非左上角位置。见设计指南中第三部分，第3节的3.3.4导航栏。2.“返回“按钮样式与iOS过于相似。见设计指南中第三部分，第3节的3.3.4导航栏。3.文字字号过小。4.界面元素有锯齿。5.交互控件与界面背景混淆，区

6、分不明显。6.交互操作控件点击区域须遵照设计指南中第三部分，第2节的2.1条操作点击区域。7.Icon_tiny图标颜色不正确。见设计指南中第三部分，第3节的3.1指示条快捷图标与云应用图标。8.Icon_tiny.png、icon.png、thumb.png三个文件有任意一个缺失。9.每个应用必须设计背景图片戒底色，以免用户界面不用户桌面壁纸混淆。10.select控件避免使用html默认样式，因为在手机中会有变形。需要自行编写代码实现样式。6云应用设计指南@阿里云第三部分：云应用界面设计1.云应用用户界

7、面介绍1.1分辨率与屏幕尺寸云ＯＳ目前支持天语Ｗ700，分辨率为w480px*h800px，屏幕尺寸为3.8寸。设计指南以下内容涉及到像素数值和文字数值均是在w480px*h800px分辨率下给出的建议数值。1.2云应用自定义添加至桌面云OS首页由七屏界面组成,这七屏界面之间通过横向滑动来切换，且除了中间的一屏(左起第四屏)为固定本地应用界面外，其余界面均可以由用户来自定义，添加不同的云应用到自己需要的位置。7云应用设计指南@阿里云1.3云应用首页界面结构介绍云应用首页界面包括：手机状态栏、刷新按钮、搜索框

8、、推荐位、云应用区域五个部分。（1）手机状态栏告诉用户有关设备的重要信息，包括手机信号强度、当前网络连接和电池电量。（2）刷新按钮，用于刷新当前页面。（3）搜索框可以搜索所有的云应用。（4）推荐位用于推荐优秀的云应用或一些运营活动。（5）云应用区域是所有云应用的入口，可以向下滑动查看更多的云应用。8云应用设计指南@阿里云云应用@首界面2.云应用交互操作要点2.1操作点击区域A.云手机最小点击区域(1)ICON元素