界面设计规范技术分析.docx

IOS界面设计规范 对于普遍的屏幕密度标准版本尺寸(像素表示) 分类 低密度屏幕(ldpi) 中密度屏幕(mdpi) 高密度屏幕(hdpi) 启动器 36 x 36 px 48 x 48 px 72 x 72 px 菜单 36 x 36 px 48 x 48 px 72 x 72 px 状态栏 24 x 24 px 32 x 32 px 48 x 48 px 标签 24 x 24 px 32 x 32 px 48 x 48 px 对话 24 x 24 px 32 x 32 px 48 x 48 px 列表视图 24 x 24 px 32 x 32 px 48 x 48 px 一.字体颜色和字号： 每个界面的字体颜色和字号不得超出3种（字体颜色可根据底色适配）　 1.导航：字号40（20） 2.一级标题：字号32（16）　　　　（黑#464646） 3.二级标题和内容：字号28（14）　（深灰#a7a7a7） 二.图标：（样式和大小统一：分为两种） 1.导航栏\工具栏和标签栏 2.界面中间部分的一些图标  三.按钮形状和高度 1.按钮分两种：椭圆（半径70）、圆角（半径10）， 2.按钮高度设为90或70（一般在登录或主界面的按钮要比内页的按钮要高） 四.列表、线条 1.列表高度分两种：一种是只显示一排文字，一种是显示两排文字的 2.线条颜色分为两种：列表分隔线：深　　文字分隔线：浅  IOS界面细节调整 首先定一个主色调出来。。。 一、 登录 分为3个部分： Logo、中间登录文字内容、背景图 1.检查logo是否变形 2.底部灰色背景图颜色调浅往下移一点 3.中间内容稍微排得紧凑一点（现有点散乱）整体下移点，登录按钮的文字小了 二、 首页 1.首页选中状态改样式 如图： 2.首页下方工具栏为渐变效果，统一扁平效果 3.图标底色与字体颜色应不一致 三、 界面三部分 1.导航栏高度应按照标准高度 2.导航栏背景图片要提亮 3.导航栏、工具栏：文字、图标大小等统一一个大小，样式统一 4.内容栏：统一一个大小，样式统一（首页中图标为线条样式 空间中图标为普通样式） 四、 列表 1. 列表高度：一排的高度要统一，两排的高度应统一 如：两排高度的有消息、通讯录、群聊、同事圈、签名等高度应统一 五、 分割线 1. 分割线应一样的高度与一样的颜色，需统一 如：首页、空间、设置、个人信息、消息设置、通讯录、同事圈中分割线高度样式统一 六、 线条样式 1. 线条有列表的和文字，颜色应区分开，文字线条浅，列表线条深 2.线条从图标后的文字开始，拉到结尾，如下图样式 如：首页、设置、空间 七、 字体字号 1. 每个界面应按照导航、一级、二级标题区分，字体颜色根据色调配颜色 如：消息、通讯录、公众号、消息设置、功能介绍、个人信息 八、 按钮 1. 根据主色调统一按钮颜色：登录、退出登录、进入公众号、删除并退出群、申请加群等 2. 按钮统一文字大小样式 九、 背景颜色 1.详情、问题反馈等界面背景为灰色，消息背景为白色。白色不好，应统一为很浅很浅的灰。（问题反馈界面中的灰较深） 十、 消息 1. 修改线条颜色 2. 修改导航栏、一二级标题字体 十一、 聊天 1.聊天下方菜单不应该渐变，可扁平加边 2.聊天内容背景浅灰，下面菜单应比内容深 3.聊天对话框改样式，淡蓝或淡绿，或者加边框不要有阴影 十二、 二维码 1.二维码较大，线条粗 2.可按照微信摆放：上方个人头像，中间二维码，下方加我，丰富界面 十三、 问题反馈 1.输入框应按照IOS的样式，上下线条到尾，没有左右边框 十四、 功能介绍 1. 导航栏与一二级标题字体，文字太小，按照字体标准统一 2. 框太明显较粗 十五、 设置密码 1.下面设置密码字体不好，多余 2.底图改淡 十六、 关于 1.图变形 十七、 搜索框 1.公众号搜索框靠上 2.统一扁平效果 3.公众号搜索、通讯录搜索、搜索好友样式不一致，统一字体及样式