视觉设计
• 主界面
风格定位（扁平化、拟物化、场景式、卡通型等）
• 规范定制（便于沿用）
字体、颜色、控件、间距、图标等
• 典型界面（运用标准）
列表界面、详情界面（查看界面&编辑界面）、提示弹窗等
• 特殊界面
闪屏界面、登录界面、注册界面
• 细节整合（黑白线）
切图
• 目的
方便程序的开发和实现
• 切图工具
关于互联网产品设计
目录
• • • • • • • 设计总体思想或概念模型（方案PPT） 产品/竞品分析 交互设计（低保真Demo） 视觉设计（高保真Demo） 前端实现/切图制作（html、css、切片） 技术实现（程序代码） 测试
竞品分析
• • • • • 确定分析目标 选择竞品（3—5个） 确定分析维度 对比分析 生成报告
用户坐标&需求坐标
用户卡片
功能架构图
流程图
草图
Mockup画
线框图
FW画
视觉设计稿1
拟物化
扁平化
视觉设计稿2
场景式
卡通型
Iphone尺寸规范
• 分辨率
Iphone4：640*960px Iphone5：640*1136px
• 字体
默认字体：华文细黑 常用字体：华文细黑、微软雅黑 字号：40px、34px、24px (最小20px)
• 产品特色功能
（为什么选择你） • 功能层级清晰度 • 内容的主次分明
• 视觉风格
• 颜色搭配 • 图标 • 规范性 • 控件统一 • 字体 • 间距
• 推广
• 运营 • 战略层面 • 营销方式
• 命名的合理性
• 交互动态效果
竞品分析>对比分析
竞品分析>生成报告
交互设计（Interaction Design）
竞品分析>竞品分析的维度
功能与内容
• 产品基础功能
视觉与品牌
• Logo运用合理
交互与操作
• 用户有自由控制权 • 布局一致性原则 • 跳转方式一致性 • 明确的错误提示信息 • 合理的帮助与说明 • 交互细节 • 操作前、中、后提示 • 成功提示 • 错误提示 • 文案表达
市场与价格
• 产品市场价值
• 分辨率 • 字体
Ipad尺寸规范
Ipad 1/2/mini：1024*768px Ipad 3/4：2048*1536px 默认字体：华文细黑 常用字体：华文细黑、微软雅黑 字号：40px、34px、24px (最小24px)
• 控件
状态栏：40px 标题栏：88px 标签栏：98px 左侧分栏：120——600px 导航栏按钮：58px 键盘高度：432px
FW、PS中的切片工具（图片格式的选择）
• 9.png
Android开发中的一种特殊图片格式，具有自适应调节大小的能力
生成文档清单
• • • • • • • • • 概念模型 用户卡片 用户目标分析报告（Word或PPT） 竞品/产品分析报告（Word或PPT） 功能架构图（Mindmanager） 流程图（visio） 线框图（Mockup或Fireworks ） 演示产品（Axure） 视觉设计稿（Fireworks、Photoshop）
4 ：6 ：9
• 分辨率
网页尺寸规范
主流最小：1024*768px（有效区域：1000*600px）
• 字体
常用字体：华文细黑、微软雅黑、宋体（不消除锯齿） 字号：18px、14px、12px 行距：140%——160%
• 颜色
默认颜色：#333333 （深灰色）ห้องสมุดไป่ตู้#666666（浅灰色） 超链接颜色：#3B639F (蓝色) 强调颜色：#FF7FOO (橙色)
• 对齐
默认：文字左对齐 按钮、标签：居中对齐 文字标签：右对齐
• 留白
边界留白：10——18px
Thanks!
• 交互设计目标
以用户为中心，提高产品的易用性及用户满意度
• 交互设计原则
交互设计>交互设计流程
• 用户分析（细化人群、挖掘问题）
用户坐标、需求坐标 用户建模卡片（用户故事） 用户目标分析（分清主次）
• • • • •
目标操作流程分析（根据任务来设计流程） 功能点梳理（根据任务配功能） 交互与布局设计（线框图或草图） 视效设计（简单视觉设计） 动态演示（生成原型）
• 控件
状态栏：40px 标题栏：88px 标签栏：98px 列表：>=88px 导航栏按钮：58px 键盘高度：432px
• 图标
桌面图标：114*114px 标签栏图标：<=60px 导航条图标：40*40px APPstore:1024*1024px 图标圆角弧度：36%
• 留白
边界留白：10——18px 图标界面留白：34px
• 图标
桌面图标：114*114px 标签栏图标：<=60px 导航条图标：40*40px APPstore:1024*1024px 图标圆角弧度：36%
• 留白
边界留白：10——18px
• 分辨率
480*800px
Android 4.0尺寸规范
• 字体
默认字体：微软雅黑 常用字体：华文细黑、微软雅黑 字号：26px、24/22px、18px
• 控件
状态栏：36px 顶部操作栏：64px 标签栏：64px 列表：>=64px 底部导航栏：64px
• 图标
启动图标：512*512px、48*48px 状态栏图标：16*16px 导航条图标：32*32px
• 留白
边界留白：10——18px
Android 分辨率
• 分辨率
Mdpi:320*480px Hdpi:480*800px 480*854px 540*960px Xhdpi:720*1280px Xxhdpi:1080*1920px (MX3:1080*1800px)