19楼二级楼设计指南.pptVIP

4、设计执行 赢在设计 4、设计执行（赢在设计） 网页模块设计法： 背景、导航、区块、栏头、轮播、文字、图片位、按钮、…… 第一屏设计应包含以上元素 4、设计执行（赢在设计） 圆角 4、设计执行（赢在设计） 兼容性设计： ?border-radius:?5px 5px 5px 5px; 阴影 4、设计执行（赢在设计） 兼容性设计： box-shadow:?0 0 4px rgba(0, 0, 0, 0.2); 旋转 4、设计执行（赢在设计） 兼容性设计： -moz-transform:?rotate(-5deg); 渐变 4、设计执行（赢在设计） 兼容性设计： background:?-moz-linear-gradient(center top , #ABBF42, #8EA423) repeat scroll 0 0 transparent; 兼容性设计： 字体 4、设计执行（赢在设计） body { font-size: 12px; font-family: Microsoft Yahei, 微软雅黑, Tahoma, Arial, Helvetica, STHeiti; _font-family: Tahoma,Arial,Helvetica,STHeiti; cursor: default;} 效果图输出技巧： 1、真实数据模拟 2、交互效果模拟（gif、flash、html） 4、设计执行（赢在设计） /p/html 七巧板概念版 完了吗？ 4、设计执行（赢在设计） 工程图输出技巧： 1、调色板标注 2、尺寸标注 3、交互相关标注 4、兼容性设计标注 4、设计执行（赢在设计） 完了吗？ 4、设计执行（赢在设计） 第一次引导设计： 1、学习性引导：新产品和特别复杂操作 2、推荐性引导：改版后新功能推广 4、设计执行（赢在设计） QA 谢谢! 栅格—2、分屏布局 在1024x768屏幕分辨率下，IE6的可视范围高度约600px左右。 分屏可以作为最小屏幕范围的同时，也可以作为最佳阅读区块。 3、设计组成（正确的做事） http://www.moko.cc 栅格—3、最小热区 12px 3、设计组成（正确的做事） 44px 空间-透视 3、设计组成（正确的做事） 空间-光影 3、设计组成（正确的做事） 颜色： 九宫格配色法 3、设计组成（正确的做事） 主色 辅色 第三色 使用对象 强色 [上层] #33333 #999999 #0657b2 文字、链接 主色 [中层] #7f9c14 #a8b748 #fcc833 主窗口、栏头 弱色 [底层] #e0ecc0 #dfdcb3 #ffffff 背景、底纹 这个该用什么样的颜色? 是什么颜色就是什么颜色… 颜色管理不仅可以对产品进行区分， 更有利于用户形成成隐性依赖。 元素：选择技巧 1、非抽象图形，能被瞬间联想。 2、具备生命力，亲切兼互动感。 3、与模块溶合，光影层次感强。 4、能记忆传播，富有创意想法。 3、设计组成（正确的做事） 二级楼设计 许 亮(加菲老猫) 2012/4 1、用户定位（做给谁看？） 2、设计理念（做正确的事） 3、设计组成（正确的做事） 4、设计执行（赢在设计） 1、用户定位 做给谁看？ 访客属性 浏览器 综合分析 用户主流还是以20-40岁的女性“白骨精”用户为主。 使用上网设备大部分为5年以上的办公电脑，系统陈旧，无法升级。 综合分析 运行着流氓软件，运行速度缓慢。 综合分析 随着移动终端的普及，使用上网本和 手机访问的数量增长速度将明显高于电脑端。 综合分析 上网本和平板电脑 会成为接下来浏览PC版网页的主要方式。 综合分析 2、设计理念 做正确的事 2、设计理念（做正确的事） 行业归类 准确归入一般性行业分类 人群定位 细分人群及特征 2、设计理念（做正确的事） 价值主张 找到核心优势打动用户 2、设计理念（做正确的事） 竞争力分析 相同性-用户都在看什么？ 差异性-别人没想到的？ 2、设计理念（做正确的事） 策略 当别人走在你前面的时候， 跟在后面找机会超（抄）越。 当别人都在抄你的时候， 另辟蹊径保持领先。 2、设计理念（做正确的事） 行业归类 准确归入一般性行业分类 人群定位 细分人群及特征 价值主张 找到核心优势打动用户 竞争力分析 相同性-用户都在看什么？ 差异性-别人没想到的？ 策略 设计理念思维模型 3、设计组成 正确的做事 3、设计组成（正确的做事） 栅格 分列布局 分屏布局 最小热区 栅格-基础 980px 3、设计组成（正确的做事） 栅格—1、分列布局 3:4:2 3、设计组成（正确的做事） 栅格—1、分列布