首页 [汇编]APP-UI规范

[汇编]APP-UI规范

[汇编]APP-UI规范[汇编]APP-UI规范 APP-UI设计规范 ——0.1版本 1.设计尺寸及像素作图的时候尽量用形状工具画矢量图，方便后期图片尺寸的变更及切图。现在主流尺寸如下: Android 480×800、720×1280、1080×1920„„ IOS iPhone:320×480、640×960、640×1136、750×1334、1080 ×1920 iPad:1024×768、2048×1536 像素:72 像素/英寸尺寸:第一版效果图建议使用尺寸750×1334，能适用大部分尺寸，并且...

[汇编]APP-UI规范 APP-UI 设计规范 ——0.1版本 1.设计尺寸及像素作图的时候尽量用形状工具画矢量图，方便后期图片尺寸的变更及切图。现在主流尺寸如下: Android 480×800、720×1280、1080×1920„„ IOS iPhone:320×480、640×960、640×1136、750×1334、1080 ×1920 iPad:1024×768、2048×1536 像素:72 像素/英寸尺寸:第一版效果图建议使用尺寸750×1334，能适用大部分尺寸，并且在iPhone6 Plus中显示也较为清晰，切图后文件大小也适中，应用的内存消耗也不会过高。后期再配合程序员根据不同尺寸切相应版本的图片。 2.设计要素 a.布局 Android开发中最麻烦的问题之一就是屏幕适配的问题，硬件厂商太多，屏幕尺寸太多。一个好的应用应该尽可能多的适配更多的屏幕。UI设计过程中就应该考虑到屏幕变宽、变高、变窄、变短的过程中UI应该如何适配。 b.界面风格:首先无论什么风格，一定要统一，不能一会扁平化，一会拟物。颜色:配色一定要协调，内容与背景色的对比度一定要适度，设计一定要考虑到使用环境，如在阳光下。如果对比度不够的话那么在强光的环境下就不好用了，背景和内容就融为一体了，很难分辨。 c.按钮图片点击尺寸不要太小，至少要大于一个手指的宽度，提高点击命中率，否则会有“点击不灵敏”的感觉，当然并不是真正的不灵敏，而是没有点中操作的区域。(用户可不管这些理由，多为用户考虑哦)。对于RadioButton、CheckBox至少应该出2个状态的图:正常、选中。最好3个图:正常、点击、选中。如果没有点击的过程，会造成“响应迟钝”的感觉，因为毕竟在点击状态没有换图。 d.动画使用动画进行界面的过度让人感觉更柔和、亲近。有时一些简单的动画会给你的应用增色不少。 e.对话框尤其是网页中都会有很多的对话框，久而久之人们对对话框也就产生了反感(至少我是这么认为的)，能以更好的方式做提示的情况下就尽量避免用对话框，非用不可的情况下那么建议一个界面不超过两处。老是弹对话框的应用，最终弹走的是用户。 3.切图 1、和客户端的技术沟通好，用不同的框架来实现的时候，图会有不一样的切法。例如Tabbar是连背景一起切还是单独把icon做成背景透明的，文字是放在图里还是后面加字。 2、有一些小的icon式按钮，不能只切到icon边缘，而是要考虑到最终实现的时候，是把这个图片做成按钮，和用户交互。所以必须要多留一些透明的边，让能点击的图片在88×88以上，这样用户才保证比较好点到。 3、如果可以用PNG24就不用PNG32，如果可以用PNG8就不用PNG32。 4、对于不改变可见图形而又需要加大点击区域的图。那么切图的时候建议在可见图形的四周都加上1像素的透明，这是为了放大拉伸而不产生可见区域的图像失真。 5、切图的高度。 6、切图的宽度。 7、9.png:是安卓开发里面的一种特殊的图片，这种格式的图片通过ADT自带的编辑工具生成，使用九宫格切分的方法，使图片支持在android 环境下的自适应展示。 4.命名基本上 App 的切图可分为下面几大类: 背景、按钮、图示、图片、照片、TabBar icon 等。为了让切图便於管理,通常会依图片性质命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、pic_xxx.png、tab_xxx.png。当图档要做给 Retina 萤幕使用时,只要在副档名前加上「@2x」就可以了。如bg_xxx@2x.png、btn_xxx@2x.png 、icon_xxx@2x.png。按钮命名: 1，一般，normal，:btn_xxx_n.png,最基本的按钮外观。 2，点击，highlight，:btn_xxx_h.png,使用者触摸萤幕碰到按钮,为了告知使用者有点击到而出现的回应提示。 3，不能点击(disabled):btn_xxx_d.png,代表 App有这功能但使用者无法使用。例如如安装在iPod上的App有播打电话功能时。既然不能被点击干脆直接隐藏的作法也是有的。要直接将按钮隐藏或是以不能被点击的状态呈现需规情况决定。 4，选中(selected):btn_xxx_s.png,选中出现在有复数选项时,但通常不会把按钮拿去做复数选项控件,这种按钮状态出现的机会不高。图示:icon_xxx.png。图片:pic_xxx.png 或是 img_xxx.png。照片:pho_xxx.png。

                    本文档为【[汇编]APP-UI规范】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

[汇编]APP-UI规范

你可能还喜欢