超带感网页设计专题课件.ppt

页面高度问题 页面高度不好把控， 但也是有规律可循的! 首屏设计 状态栏:32px-40px 导航区域:110px-160pxbanner:400-450px 子栏目 流式布局：一屏高度580px-710px; 网格布局：高度没有太多要求！ 认识高度 页面宽度可就最大分辨率； 高度要考虑最小分辨率； 一屏高度 最小：580px 最大：710px 一屏高度： 580px-710之间 #1066A4 1.标准色 全屏布局 3.布局规范 #1066A4 #F3F3F3 #333333 字体颜色 #3688ff 2.字体规范 字号大小： 强调 ：16px 一般展示： 12px 14px 内容：根据设计需求 字体： 微软雅黑 3 这样做！也许你能快速上路！ 快速融入项目的能力，也特别重要 2 设计≠美工！ 系统、科学的学习设计 4 Just Do It 百闻不如一练 1 项目基本流程与相关技术 网站制作并不难！ * * * 设计不是P图，设计是发现需求！ * * 开始讨论用户体验流程，在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论，而且主要讨论的是流程和主要功能，因此手画故事版最快最方便并易于修改的。 * * 前面我们分析了结构、视觉、网页组成部分 * * 超带感网站设计 2 设计≠美工！ 系统、科学的学习设计 3 这样做！也许你能快速上路！ 快速融入项目的能力，也特别重要 4 Just Do It 百闻不如一练 1 项目基本流程与相关技术 网站制作并不难！ 项目的基本流程 全面了解项目流程，才能减少与客户与团队沟通成本，快速达成目标。 项目需求 “抽象”的项目目标 需求分析 需求文档 技术文档 UI设计 视觉设计 交互设计 用户体验 前端开发 后台开发 JAVA、C#、PHP等 网站上线 购买域名 ICP备案 服务器部署 域名解析 上传服务器 UI 3 这样做！也许你能快速上路！ 快速融入项目的能力，也特别重要 4 Just Do It 百闻不如一练 2 设计≠美工！ 系统、科学的学习设计 1 项目的基本流程与相关技术 网站上线并不难 * * 以功能为主 以展示为主 网站提供数据 用户接受内容 展示型网站特征 用户提供数据 网站提供平台 功能型网站特征 其实，无明显界限 平铺直叙型 故事叙事型 急功近利型 自上而下提供内容， 平铺直叙板式规整 较正式、严谨 适用于： 企业官网 新闻类 政府类 论坛 扁平布局 简洁大气 创意性较强 适用于范围，例如： 科技、旅游、婚恋、亲子、教育等 类似于电商设计的一类展示型网站。以营销产品、企业广告为主，有一定的功能性。例如：用户留言、客户订单等功能 适用于： 营销型企业等 * 只有了解完整的设计流程，才算是真正的UI设计！ 独立、聪明、漂亮有梦想的90后女孩。一年半前本科毕业，怀揣着梦想来到上海打拼，工作努力，深得同事、领导赏识。闲暇时间最大的爱好就是一切跟“美”相关的活动：逛街、旅游、淘宝、美甲…….，可是，美了自己，苦了钱包。 人物基本描述 用户原型(Persona) 用户原型：是指针对网站目标群体真实特征的勾勒，是真实用户的综合原型。 刘依依 本科 22岁 19岁 文员 无 6W 无 恋爱未婚 单身 上海 安徽 李昊 大专 人物基本描述 内向、有想法、宅男。大专即将毕业，对未来憧憬。但现实和梦想之间距离还是很遥远的。本专业对口工作不好找，薪资待遇也不高。 此环节敲定userflow，用户流程及其中的关键步骤， 每一步骤都是一个主要界面！ 文字故事板 图片故事板 故事板 元旦三天假，男友提议去周边城市来个短暂旅游！依依欣然同意，打开APP，设定路线、买好车票、订好酒店….. 元旦一大早，和男友早早来到车站，开始三天两夜短途游。四小时后，顺利到达旅游景点。也已到了午饭点，依依找到一景区美食街，开始边美食边美景的旅游………. 旅游回沪，依依突然觉得本月经济吃紧了，离发工资还有12天，每个月工资都刚刚够用，在上海这个城市，这个工资水平也只能够自己日常开销。 依依想改变点什么，于是想趁年轻学一 门能高薪、稳定工作的技能…….. 故事板 (Storyboard) 主要负责人：产品经理或交互设计师 主要工具：白板、纸、笔 故事版 (Storyboard)  通过关键步骤描述，可以确定网站需要展示关键内容的先后级别、权重。 网站关键步骤描述