UI小册子 (1)

1、 UI小册子 IOS规范图标大小：APP Store图标:1024x1024px ,字号： 最大字体40号， 较普通应用34号， 最小字体20号， 正文字体不能小于24号，Tab栏字体：20号，22号，24号，字体:苹果黑体，华文细黑，微软雅黑，Helvetica状态栏字体大小20-24，页边距14-20，导航栏图标大小44-60px，导航栏字体大小34-38，图标:圆角弧度FW48% PS28px，内容字：24 ，内容区图标大小：44x44，标签栏字大小：20-24,输入框高度：60 px -88 pxiphone尺寸对比项目 机型Iphone5/SIphone6Iphone plus尺寸4

2、4.75.5In css pixels（像素）375375414安卓设备同分辨率参考360360400像素比223（近似值）渲染像素640*1136750*13341242*2208物理像素（手机显示像素）640*1136750*13341080*1920图片资源后缀名2x2x3x状态栏高（px）404060导航条高/标题栏8888132底栏高/标签栏9898146底栏/标签栏控件高<=60<=60<=60底栏/标签栏控件中图标40 px-44 px40 px-44 px40 px-44 px桌面icon（px）120120180列表高度>=88>=88>=

3、88Ipad规范屏幕大小：Ipad1、2、3、4代、Air：9.7英寸、Mimi Ipad：7.9英寸 分辨率：Ipad1/2/3/Mini：1024x768,Ipad4/Air、Ipadmini(retina)：2048x1536， 字体（华文细黑、微软雅黑）字号：40px大字体、34px中等字体、24px小字体、字体不能小于24px、控件：状态栏高度：40px，标题栏高度88px, 标签高度98px，导航栏按钮：58高度，列表高度88px， 两列左侧分栏宽度：120660px， 图标：在ipad2048pxX1536px分辨率中、桌面图标大小：152pxX152px、图标的圆角弧度：36%

4、,标签栏图标：60 导航栏图标40x40 ,Appstore1024x1024网页规范网页宽度1258,正文宽度980，有背景图案的1440 正文980，颜色 256WEB ps选RGB 字体字号 正文：宋体12号，或12+14，黑体用作标题，英文9 页面布局：版块排版在视觉上要符合纵向分割，横向模块间距统一，网页栅格980 栏目间距10 ， 产品栅格：宽度160 间距40（用于二级类目）或30（三级），边框默认颜色：#A0A0A0 ,留白间距10，阴影色值#000000，边框默认值：#cccccc 描边1， Banner：设计原则：真实性 主题明确 形式美 ，制作要求：实物商品抠图，色彩必须

5、与页面协调，字体不超过三种，能快速识别.网页DEMO设计注意点1.不要把Axure当时视觉设计工具（原型以灰色为主，纯色作为点缀）2.AXURE不是草稿工具（适当加入黑白剪影是图标，一个像素都不能差）3.界面的友好（图片不要用带x的控件，少使用用带X的控件）4.不要把注意力集中在动作脚本（动作脚本适当运用）5.适应的运用标注信息（尽可能将状态标注在同一界面）6.批量修改（部件样式的修改及模板的运用）7.掌握AXUREAndroid规范>屏幕大小四种屏幕大小：小、正常、大、超大四种不同的密度:低（120dpi）、中（160dpi）、高（240dpi）、和超高（320dpi）对应的dp到px

6、的系数分别为0.75、1、1.5、和2.Android规范>文字字体：微软雅黑、Roboto、字体大小：26px大字体24、22px中字体、18px小字体,字体不能小于18pxAndroid规范>控件状态栏：36px、顶部操作栏：64px、图标：48x48px文字标签栏：64px、底部工具栏：64px、底部导航栏：64px、标签栏：74px 图标：42x42px图标：小图标：16x16px、工具图标：48x48px启动图标72x72px、应用市场上启动图标：512x512px作品包装方法瀑布流产品概念：Banner图片+产品图标 ， 概念想法描述， 产品基础介绍：用户类型 用户目标

7、 竞品分析， 交互与布局：架构图 页面流程图（原型）， 视觉设计： 风格介绍 界面展示 图标展示 结尾 签名+联系方式UI设计的作用：美观易懂 操作简单且有引导更能 ，在产品的使用过程中令用户感觉越快，增强兴趣拉近用户和机器之间的距离手机界面设计的三大原则：界面操作效率要高，记忆负担要清，保持界面的一致性设计师可以做的事情：包含领域：只能手表 手机 移动设备 车载系统 手持游戏机 MPSMP5 GPS 客户终端， 设计的内容：图形用户界面 窗口 图标 菜单 控件状态栏：颜色为透明或是白色 导航栏：导航栏用于在层级结构的信息中导航，显示当前界面的标题，避免用于过多的控件填满导航栏，自定义导航栏的

8、颜色和透明度，避免使用类似于面包屑的导航栏工具栏：要保持44x44， 放当前情境下用户最常用的功能，避免使用有边框和无边框的控件，TAB：Tab栏用于切换子任务，视图和模式工具类APP视觉效果设计的分类：视觉分类：质感风格：（常见表现手法：木头 金属 皮革 布纹 渐变 微质感）（优缺点：细腻 繁琐）（适合类型：工具类APP 小型APP）， 扁平风格：（表现手法：线条 纯色填充 留白）（优缺点：简约 只管 需提炼 难度大）（适合类型：所有类APP）， 写实风格（表现手法：3D 真实场景 更细腻的材质）（优缺点：写实 识别度高 繁琐 耗时），（适合类型：小型APP）， 卡通风格（表现手法：手绘）（

9、优缺点：活泼 平易近人 不够庄重）（适合类型;游戏 儿童 教育 小型APP） 工具类APP的设计要求：功能：简单 输入要求低 主次分明 ，交互：简单易操作 层级较浅 能够快速找到重要内容 ，布局：不规则式布局 突出功能 视觉：较强吸引力创意性强 颜色与相关产品定位符合Iphone界面的构成：任务栏 状态栏，标题栏 导航栏，内容区域，底部导航 工具栏手机UI设计的软件：Fireworks photoshop IIIustrator MindManager Visio Axure Balsamiq Mockups MarkMan dreamweaver竞品分析四个维度：功能与内容 视觉与品牌 交互

10、与操作 市场需求移植iphone应用流程：1.列出网站所有功能 ：web端的产品的核心功能，附加功能分析2.移动端用户目标：确认手机版的典型功能， 3.相关操作流程：根据用户目标完成相关流程， 4.功能点分析：功能点梳理，考虑在iphone上的信息架构模型 5.交互与布局设计：主体布局设计 6.视觉设计：风格设计，规范设计APP设计流程需求分析、竞品分析、功能设计、交互设计、视觉设计导航及布局展现方式标签栏、舵式、侧滑式、宫格式、列表式、手风琴式、组合式、电商分类：企业对企业Business-to-Busines-B2B、企业对消费者Business-to-Consumer-B2C（天猫、京东

11、、1号店、国美在线）、个人对消费者Consumer -to-Consumer-C2C（淘宝）、企业对政府Business-to-Government-B2G、线上对线下Online To Offline-O2O、企业对客户Online to Configuration -O2C（线上订制）垂直电商优势：客户群定位准确、商品集中度高、服务专业性更强交互设计三要素：目标、任务、行为导航设计类型：平铺导航、标签页导航、树形导航（列表、宫格）什么是响应式web设计响应式web设计的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸、屏幕定向等）进行相映的相应和调整。优势：1开发、

12、维护、运营成本优势 2兼容性优势3操作灵活、响应式页面的设计流程：1确定需要兼容的设备类型、屏幕尺寸2制作线框原型3测试线框原型4视觉设计5前端实现字体规范：12号（最小文本）、14-16号（导航）、18号（标题）、颜色：色不过三、默认颜色为：#333深灰色、超链接颜色：#3b639f蓝色、强调颜色为：#ff7f00橙色 行距：140%-160%Banner高度：90px、200-300px、400px设计师需要具备的能力：1阅读文档2真正理解客户的想法3竞品分析4原形设计+demo制作5效果图设计能力6说服能力7情商任务和设计推进流程:1客户需求2进入谈判3出方案4开始合作，团队了解整个项目

13、5设计总体思想初稿6用户研究+交互设计，生成低保证原形7视觉设计，生成高保真原形8前端实现/切图制作9技术实现+生成产品用户体验设计原则：1、3次点击：找到与处理任务，均要在3次点击内完成。2持续雾干扰反馈：实时无干扰、不中断操作告知用户状态和进度。3、一致性：操作一致，风格品牌一致。4：容错：对可能引起的错误预知，对已引起的错误的操作提供回复返回。5用户控制：给用户建议，不限制用户，让用户决定。6减少记忆：用系统帮助用户记忆，用户进行选择。7用户语言：使用用户能理解的语言，而不是专业词汇。8兼容使用：浏览器兼容、屏幕大小兼容、分辨率兼容整体布局：对称型、西欧型、L型、文章型、frame型、灵

14、活型、左右型 项目经理对项目的控制（总体设计）：1项目具体需求：核实工作量2产品技术环境3产品人员时间限制4需要遵循的规则和标准有哪些5产品的方案实施设计及安排产品工作量统计项目工作明细：1首页风格规划设计1套2登陆界面设计1个3子界面详细设计、桌面大图标设计40个4界面接口文件1套5维护1套团队的构成与工作的职位：产品经理/项目经理，UE设计师，交互设计师，UI设计师，技术工程师（前端工程师/后台开发），测试工程师交互设计的团队配合：前期准备：了解项目背景，针对人群及特征，竞品分析，分析需求及文档，提出自己想法与产品经理达到目标一致，用户建模，用户目标分析。中期设计：交互设计师流程图，低保真

15、原型、高保真原型，低保真demo,交互设计说明。后期跟进：描述产品背景，人群，商业目标。描述交互细节。跟进视觉稿。跟工程师详述交互原型结构，逻辑和细节。跟进开发和遗漏问题。和测试工程师一起测试。上线后跟进用户反馈。敏捷项目的快速实施前期白板沟通统一意识，快速迭代，AXURE演示操作。看什么书：产品与市场，策划和心理学结网启示录浪潮之巅产品经理的境界：情怀，管理，技术Swot分析 :优势stength劣势weakness机会oppourtunity威胁threats访问者分析：直接输入网址访问的用户；其他网站的推介流;搜索引擎付费流量（sem流量）搜索引擎自然流量（seo流量）是否是新访客百度旗

16、下：PPS 去哪 91助手 糯米阿里旗下：uc浏览器 微博 陌陌 虾米 海尔腾讯旗下：Fab 大众点评用户体验总结：网站访问速度;网站设计美观性；网站易用性是否高；购买流程是否便捷；产品分类展示合理；站内导航搜索功能完善；下单拿到产品时间满意设计师类型：创意；逻辑；管理；策划；创业数据分析-目标完成率切图：按照一定的设计和编程规律，将一张完整的视觉效果图拆分为一系列一定格式的切片，以便于精准地进行程序开发和实现。适配策略：文字流式、控件弹性、图片等比缩放用markman标注：高度，宽度，边距，色值，字号，字体颜色，透明度安卓手机分辨率：hdpi(3个):540*960(4.34.5寸) xhd

17、pi: 720*1080（4.5寸上下） xxhdpi: 1920*1080（4.75寸）.9.png 安卓开发中一种特殊的图片格式，自适应调节大小，可将图片横向、纵向同时拉伸不失真。原理： 九宫格，4角，4边，中间区域，4角不做拉伸（保持圆角），两条水平边和垂直边分别水平和垂直拉伸（只有中间指定区域做拉伸）。如果用ps 1.改变画布，四周各增加1px透明区域。2.铅笔工具，画拉伸区域，纯黑色（#000000）。3.存为web格式，PNG24，后缀名手动输为.9.PNG 微信张小龙开发。还做过foxmail平面构成三要素点线面网站体验要素; 战略层：交互双方的所得 范围层：网站各种特性、功能最

18、合适的组合方式 结构层：类别出现在哪 框架层：区域位置布局表现层：组成网页的图片和文字 还包含两个额外因素：内容与技术。所以用户体验的思想在于：在开发产品的每一个步骤中，都要把用户列入考虑范围，只有创建吸引人的、高效的用户体验的方法才能被称之为以用户为中心的设计。响应式设计的特点响应式Web设计是一种技术，可以使网站适应于任何设备。优点：1).对用户友好 响应式设计可以向用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕。2).移动频段(Mobile Segment) 在响应式网站的帮助下，你可以获得网站流量的全景图。3).积累分享 响应式Web设计可以让你(作为网站的拥有者)通过单一

19、的URL地址收集所有的社交分享链接。4).最佳化搜索引擎 搜索引擎也在变得越来越聪明，它们足够智能可以完成移动网站和桌面网站的连接。5).无重定向 响应式Web设计最大的优点之一是，你不必在乎任何重定向，它包含无用户代理定向。6).更少维护 开发一个独立的移动网站，会增加你的工作负担。缺点：1).加载需要一定的时间2).优化搜索引擎 对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。3).Google排名 如果响应式网站仅基于移动内容，它可能会影响到网站的Google排名。4).时间花费 开发响应式网站是一项耗时的工作。5).布局 响应式Web设计的布局主要是液态的，这也正是设计者对

20、设计样式不好控制的原因。网站经常用到的功能模块产品新闻列表订购支付内容管理会员招聘下载ps输出png是24png-8约等于GifGIF跟png的区别一个是有损一个无损glf有损压缩不支持半透明png无损压缩支持半透明面包屑指引你当前页面位置。给用户给予返回的途径。 关于敏捷：瀑布式开发流程、敏捷开发流程 1、光影透视关系2、FW是哪里出的：adobe3、fw快捷键4、软件的全拼：Fireworks  photoshop Illustrator MindManager Visio Axure BalsamiqMockups  MarkMan  dreamweaver5、ps和fw兼容性：路径不兼容、图层不兼容。Fw不能直接在ps里打开，需另存为psd格式6、小工具的特点：简单 输入要求低 主次分明 ，交互：简单易操作 层级较浅 能够快速找到重要内容 ，布局：不规则式布局