iFamily APP UI设计规范

《iFamily APP UI设计规范》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、iFamilyAPPUI设计规范目录1.文档介绍1.1目的14.交互反馈4.1点击效果161.2范围14.2可触范围162.用户体验设计原则2.1清晰25.切图命名规范5.1切图命名规范172.2一致性26.运营图片规范6.1选图调性192.3反馈26.2图片尺寸213.用户界面设计规范3.1设计尺寸及屏幕支持33.2颜色使用43.3字体规范53.4图标73.5界面元素间距93.6细节模块3.6.1导航栏103.6.2溢出菜单113.6.3菜单栏123.6.4弹框133.6.5按钮143.6.6选项卡151.文档介绍2.

2、用户体验设计原则1.1目的2.1清晰对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规任何尺寸的文字都清晰易读，图标精确易懂，恰当的修饰且不易被察觉，范和使用原则，并对交互状态进行说明，解决对设计需求进行存档，便于聚焦于功能，一切设计由功能而驱动。留白、颜色、字体、图形以及其它后续人员改版时有所依据，确保整站的交互体验以及视觉呈现的一致性。界面元素能够巧妙地突出重点内容并且表达可交互性。1.2范围2.2一致性此文档包含界面设计，交互设计两个部分一款内部一致的应用能够贯彻相同的标准和规范：使用系统提供的界面

3、元素、风格统一（众所周知）的图标、标准的字体样式和一致的措辞。应用所包含的特征和交互行为是符合用户心理预期的。2.3反馈反馈认证交互行为，呈现结果，并通知用户。应用对每一个用户行为都需要提供了明确的反馈，包括正反馈和负反馈。可交互的元素被点击时会被临时变暗，动效加强了对行为结果的提示。123.用户界面设计规范3.2颜色使用3.1设计尺寸及屏幕支持标准色RGB:#f54040以Android主流分辨率720*1280（xhdpi）为基础进行设计，适配hdpi（480*800）、xhdpi（720*1280）、xxhdpi（

4、1280*1920）三种屏幕。辅助色1RGB:#f8b62c辅助色2RGB:#64ce37正文及内容RGB:#333333次要文字RGB:#666666提示文字RGB:#aaaaaa辅助灰1RGB:#cccccc辅助灰2RGB:#f2f2f2343.3字体规范采用Android原生英文字体“Robot”。文字使用不小于12sp，正文内容控制在16sp，确保用户拥有最舒适的阅读体验。确保关键的文本信息具有足够的对比度，通过颜色、大小的对比让用户能够清晰的获取信息。563.4图标icon主要采用线性风格，部分运用到块状图标。

5、为保证整套UI的统一性，处于同一位置的icon大小要保持一致（视觉上一致），切图尺寸必须一致。一般情况下切图尺寸定为24*24sp，16*16sp，根据实际需求应用不同大小，特殊情况可使用特殊尺寸。783.5界面元素间距3.6细节模块APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间3.6.1导航栏距设计。遵循Android布局的栅格系统，文字行间距等以4dp为基准，组件间以8dp为标准，便于适配Android各种不同屏幕分辨率。9103.6.2溢出菜单3.6.3菜单栏11123.6.4弹框3.6.5按钮

6、13143.6.6选项卡4.交互反馈4.1点击效果可点击的区域点击时都要有反馈，例如点击按钮时，按钮颜色会改变，上面描述按钮控件时已提到；可点击的图标点击时伴随水波纹效果；点击列表时背景块颜色变为#eeeeee4.2可触范围确保可触摸的元素起码需要有48*48的像素大小。48×48dp是推荐的屏幕上可触摸元素的最小单位。同时需注意屏幕上两个元素之间的间距，控制在16dp或更多。15165.切图命名规范5.1切图命名规范命名首字符不允许数字/大写，特殊字符只能有“_”，不能加空格命名规则：位置_模块_功能_描述举例：hom

7、e_nav_search_defaut点九举例：home_nav_search_defaut.917186.运营图片规范6.1选图调性iFamily社区沿袭iteal的品牌调性，以热烈具有温度感的红色为品牌色，体现简单实用，化繁为简的，可信赖的品牌理念，社区传递着一种亲和、家庭的感觉。运营选图上倾向于选择具有品牌记忆色，或者体现亲和温暖感的图片。画面尽量简洁，突出主题，减少文字的排版。19206.1图片尺寸1.首页banner：1080*600px（360*200dp)2.活动banner：1080*390px（360*

8、130dp)3.活动列表图：1080*390px（360*130dp)4.摄影馆banner：1080*390px（360*130dp)2122