一 : AngulaJS路由 ui-router 传参实例
在这里分享我做的一个使用ui-router 传参的小demo
1.首先第一步设置入口文件index.html，注意加载的顺序，先加载包，再加载自己写的控制器。
<!doctype html> <html lang="en" ng-app="routerApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>测试</title> <!--lib是angular包的文件夹--> <script src="lib/jquery/jquery-1.11.3.min.js"></script> <script src="lib/angular/angular.js"></script> <script src="lib/angular-ui/angular-ui-router.js"></script> <!--js控制器的文件夹--> <script src="js/app.js"></script> <script src="js/indexCtrl.js"></script> <script src="js/resultCtrl.js"></script> </head> <body> <div ui-view> </div> </body> </html>
2.app.js文件，依赖注入，设置路由，此处的路由是使用ui-router路由，这里简单的演示了两个模板之间的传参，传递参数的模板test.html和接收参数的模板result.html
var routerApp = angular.module('routerApp', ['ui.router']); routerApp.run(function($rootScope, $state, $stateParams) { $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; }); routerApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/index'); $stateProvider .state('index', {//模板的参数 url: '/index',//url的参数 templateUrl: 'templates/test.html',//模板的位置 controller: 'MyController' }) .state('result', { url: '/result/:id/:number',//需要传的参数的键名 templateUrl: 'templates/result.html', controller: 'resultCtrl' }); }); 3.第一个主页面的模板test.html,并且设置点击事件toResult()
<meta charset="UTF-8"> <div>hello world</div> <input type="button" ng-click="toResult()" value="toResult">
4.test.html的控制器indexCtrl.js，设置需要传递的参数$scope.abc和$scope.toResult，点击事件toResult()里面其实就是一个$state.go('模板的参数',{app.js里面需要传的参数的键名:需要传的参数值})的方法
routerApp.controller('MyController', function($scope, $state) { $scope.abc = "nice";//需要传的参数值 $scope.def = 10;//需要传的参数值 $scope.toResult = function(){ $state.go('result',{id: $scope.abc,number: $scope.def}); } }); 5.接收参数的模板result.html
<meta charset="UTF-8"> <div>hello world2</div>
6.result.html的控制器resultCtrl.js，这里使用$stateParams的方法去接收上一个页面传递过来的参数
routerApp.controller('resultCtrl', function($scope, $state, $stateParams) { var id = $stateParams.id; var number = $stateParams.number; console.log(id); console.log(number); }); 项目目录
jsapp.js、indexCtrl.js、resultCtrl.js
lib
jqueryjquery-1.11.3.min.js
angularangular.js
angular-uiangular-ui-router.js
templatestest.html、result.html
index.html
其实整个过程并不难，只是穿插在模板和控制器之间，容易让人摸不着头脑，只要分清楚具体的参数是对应哪一个，很容易理解。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持61阅读。
二 : 用一个实战案例 帮你学会用数据验证产品设计
很多设计师和产品经理都会遇到这些情况：
1. 我要做某个设计改进，上线后真的会“改进”吗?
2. 我有方案A和方案B，到底该选哪个好?还是说两个都不如旧版?
其实产品设计就是一场科学实验，是可以通过数据来验证的。以下我就结合实际经验，总结下互联网金融公司如何用数据验证产品设计。
欢迎关注点融设计中心DDC微信公众号：「微信ID：DR_DDC」
Step 1. 明确设计目的
如果你都不知道为啥要做这个设计，那么还是省省吧。对于互金平台来说，做产品设计改进时常见的目的大致有以下几类：
1. 提高转化率
所谓的转化率，用人话来讲就是指进行到第一步的用户有多少顺利进入了第二步。提高转化率，最终也是为了业务增长。常见转化率有：
注册转化率——下载APP的新用户在一段时间内完成注册的比例;
首投转化率——新注册用户在一段时间内首次投资的比例;
复投率——用户在一段时间内二次投资的比例。
我们常常会听到什么7日注册转化啊、渠道转化率啊之类的指标，其实都是以上几大类衍生出来的。这几大指标连起来就像一个大漏斗，提高其中一个指标的转化，都有助于增加大漏斗最后筛出来的业务量。我们常常做的简化流程设计，其实最终也是为了提升转化率。
2. 提高ARPU值
所谓ARPU值，就是Average Revenue Per User的简称，用人话来讲就是每个用户贡献的价值。在互联网金融领域，Lender 端的ARPU可以理解为每个用户在某平台的投资金额。
举个提高ARPU值的设计案例：很多互金平台都有新手理财项目，基本都是收益率比较高、投资周期比较短的平台补贴收益型产品，而且属于one-off chance，不能反复投。这些产品用于吸引新用户做出首投，尝试下流程。but 就是有很多新手不会投满额度，比如额度是5000，他们可能只投1000，甚至1块钱，试试而已。为了提高用户投资额，很多平台会特意注明只有1次机会，甚至当用户输入金额较低时会弹出弹框再次提示用户，不要浪费这1次机会。这种设计就是为了提高ARPU值而做的。
3. 提高活跃度
互金平台虽然不是社交产品，但也需要提高用户活跃度，因为可以增加用户粘性。投资理财毕竟不是高频活动，很多人都是等有闲钱了再去投资，平时会看下收益情况，其他时候都不会想着打开APP/登录网站。如此用户跟平台的互动就少了，等理财产品到期了有可能选择退出转到其他平台。也许你会说：提高活跃度不是应该由运营做活动嘛?是，但不全是。比如点融网APP首页右上角有个签到button，就是为了方便用户登录后快速签到赚取点融币而设计的。而根据之后的数据来看，这个button点击率明显高于其他button。
Step 2. 拆分指标
这一步，一般需要用研或者产品经理制定，当然如果你是个对数据敏感的设计师那就棒呆了。
拆分指标就是把第一步的目的拆分成具体可量化的指标，常常可以用多个指标来衡量一个目的。比如首投转化率，可以看1日转化、3日转化、1周转化、1月转化。这个要Case by Case去分析，没有一个统一模板。但是有几点需要注意：
1. 一定要对产品流程熟悉，不然定的指标可能会出现漏case 的情况(这一点交互设计师应该深有同感，需要考虑周全)。举个栗子：如果监测的是投资流程各页面和关键button转化情况，初始页面(第一步)可能会有好几个，比如从产品列表进入投资流程，也可以从首页明星产品推荐进入投资流程，也可能从持有产品列表进入投资流程(复投)，甚至有可能是用户转发分享某产品给朋友，朋友从分享链接进入投资流程。如果你想当然地只考虑了产品列表和首页推荐这两个入口，最终出来的结果就是转化率会偏高。
2. 拆分指标时最好写一写该指标计算公式，以及人群、时间周期定义。切忌出现模棱两可的定义，这样在后期拉取数据时将很难执行，或者执行出错。一个典型的栗子就是“投资人次”和“投资人数”的定义，哪些指标要用“投资人次”，哪些指标要用“投资人数”，必须想清楚，不然最终结果会相差很大，失去可比性。
3. 定好指标后应当确认一下，指标中需要的数据是否可获取。实际中，受到产品本身的限制，或者公司数据系统的限制，或者BI时间资源的限制，有些数据是很难获取的。
Step 3. 制定方案并实施
这一步，可能还需要开发和BI参与进来。把越多人拉进来玩，越要考虑周全，不然你让一群人围着你耍猴啊?
如果这个设计改版影响面很小，可以直接上线看数据了。如果用户量很大，几小时的数据量已足够验证，实现快速反馈。有些公司自己开发了相关的数据系统，如果不是自己开发，有一些第三方数据平台也能够快速看到数据情况。但是他们没给我广告费，所以我不说名字了(市井脸$_$)。如果你问我，那种从0到1的产品，用户量几千，首页每日浏览量几百，二级页面每日浏览量是个位数，咋办?嗯，不好办!
如果这个设计改版影响面比较大，可能会影响到业务，可以谨慎点，做A/B TEST(或者灰度发布)。这种情况相对事儿多点，要和开发协商好如何划分A、B用户群、比例如何，要定义好测试期。网上搜一搜能找到关于A/B TEST的文章，我就不赘述了。
如果你难以判断这个设计的影响面……问你mentor或者supervisor去。
实战案例
举一个之前做过的微信支付的栗子。当时公司的APP内考虑接入微信支付作为一种第三方充值渠道，但是不清楚上线后利弊如何。
Step 1. 明确目的
可能存在的利：微信支付能增强新用户对投资平台的信任，同时提高便利性(不需要先绑卡再充值)，因此可能会提高充值转化率和投资额。
可能存在的弊：微信支付的手续费率比较贵，如果很多用户都转而使用微信支付充值，平台将承担更多的交易成本。
于是，需要做一场A/B Test(灰度发布)，看看实际上到底利弊如何。
Step 2. 拆分指标
测试目标总体分为3类：转化率、投资额、成本。
转化率：细化成注册后1日内/3日内/7日内/30日内首次充值转化率
投资额：细化成人均首充金额
成本：细化成新用户首次充值用微信的金额占比、老用户充值用微信的金额占比，将两个比例进行对比
Step 3. 制定方案并实施
具体实施过程在此不赘述。最后发现，微信支付能明显提高首充转化率，同时老用户使用微信支付充值的比例非常低，带来的成本增量较小。因此，微信支付功能还是全面上线了。
三 : 运营设计常用“套路”拾趣（附实战案例）
阳春白日风花香，又是一年芳菲至，在这最美的时节，各种运营活动又开启了，就此从视觉角度结合实战案例的小心得，对运营设计的“套路”浅谈一二。
一个出色的专题首先会引人注目，其次是会给用户留下深刻印象。如AirPods banner设计风格简洁、巧妙突出产品特性，吸引用户去了解产品详情。
AirPods banner
只一眼，便心动。形象大师曾说过“7秒钟就决定了第一印象”，在这么短的时间里吸睛是留住用户的关键。运营设计师要让专题独具吸引力并且能够高效执行，可以参考以下经验：
一、根据需求特点的快速立意,明确设计方向，吸引目标用户
活动运营专题
1. 活动运营
（1）目标
迅速导量、拉新、促进转化率、提高用户活跃度
（2）特点
即时性、短期、氛围感强，常见于电商活动专题页，节日大促、用户福利、特定优惠等
2. 品牌运营
（1）目标
信息传播、专属、展示、功能介绍、扩大品牌影响力
（2）特点
定向宣传，多做文化展示，常见于产品宣传、品牌展示、功能引导页、常规节日闪屏页面等
品牌引导页
二、视觉直观感受向用户“秒”传信息
1. 色彩划分
（1）活动专题常用：暖色系、对比色系
营销主导型专题需要短期带量提高转化率，通常选择鲜亮活跃的暖色或互补色，使人心情愉悦，能调动情绪使人记忆深刻，搭配对比色冲击力更强。
（2）品牌专题常用：冷色系、相似色系
传播主导型专题承载品牌传播、功能介绍等特点，通常采用柔和的冷色、邻近色，呈现出沉静内敛、富有诗意，配色在3种内或用品牌色，强化用户对品牌的认知。
色环
实战案例：
58品牌升级H5专题
58品牌升级H5专题
以宣传58新logo扩大品牌影响力为目标
品牌色是对58新logo色彩体系的诠释，加深用户对品牌的认同感和信任感
2. 视觉风格
活动专题表现手法夸张、配图元素繁杂，线条自由，画面延展性强。
58运营活动
品牌专题通常会做减法，遵循少则多，多则惑的法则，设计元素较沉稳严谨。
3. 信息排版
活动专题主题突出、构图大胆，排版夸张，按钮醒目。
品牌专题文字精炼，弱化按钮，信息明晰有节奏感、排版更规范。
实战案例：
58App 7.0引导页
58App 7.0引导页
宣传58新logo以及版本升级为目标：插画呈现58app与用户息息相关的生活场景，将用户带入熟悉的场景中感知产品
冷色系加品牌色形成弱互补色，给人冷静理性的感受，结合新logo辅助图形构图更聚焦
设计元素简洁、文字排版规范：图文结合既有情感互动又有客观分析，将用户的认同感和情感渴望激发出来。
三、从细节打动用户，更贴近生活，增强用户认同感
罗伯特.庞德说过：“这是一个两分钟的世界，你只有一分钟展示给人们，另一分钟让他们喜欢你。”
用户有需要才会用产品，要展现出用户的利益诉求和情感需求。
吸睛之外的情感互动是非常重要的，有故事的产品才具有生命力，更能打动人心。
融入流行元素、利用用户关注的实时热点、争议性话题抓眼球拉近距离，更人性化。
情感化与实时热点案例
实战案例：
58房产春运开屏
58房产春运开屏
（1）安心租住
运用当下热播剧三生三世的设计元素，拉近与用户距离，温馨的居家场景增强对产品的认同
（2）免费开房
情人节开屏图形简洁却让人心领神会，制造话题巧妙与房产联系在一起。
四、增加游戏特点，提高趣味性
添加音效、动效、时间节点造势，引爆高峰
有情怀并关注用户群体及产品特点
高密度运营位宣传，牵动用户内心利益点
游戏类专题要新颖操作简单，添加音乐或动效营造氛围，制定开奖节点，刺激用户接力转发。
58房产盖世英雄盖楼赢现金
实战案例：
2016年春运项目之《大闹天宫大圣捉妖》
春运时间紧迫为节省开发成本复用刮刮卡形式，我们通过以下步骤突破传统刮卡形式：
第一步：脑暴确定主题
脑暴得出：猴年采用故事题材，例如蟠桃园刮桃子、大闹天宫或是打妖怪，最终虚拟出小妖大闹天宫，用户帮助大圣来捉妖的故事情节，更新颖、亲民、有趣味；
第二步：确定色彩及风格
生动的描线手绘风格和传统元素以及春节红烘托出活动氛围，让整个画面与其他活动风格差异化；
第三步：丰富故事内容及细节
用户刮出不同卡片，以此种形式帮大圣捉妖，攒小妖就如同签到，奖品中心走势图一目了然，调动用户积极性；
第四步：文案及配图增加了游戏趣味性
20多个形象让专题更具趣味性，配合幽默文案和运营位宣传刺激用户参与，达到了很好的效果。
五、专题产品化，提升用户关注度和粘性
将运营专题产品化、品牌化，重复会强化记忆，让用户累积认知，例如电商造节“双11”、“双12”、“618”等，将运营活动产品化，设计也在年复一年的规范化，形成固有的特色。
六、新颖形式吸引，流行趋势
如今很多设计形式涌现，也达到了吸睛和高参与度的目的，如支付宝集福、QQ天降红包等，都是对AR增强现实的应用。
技术上混合现实、动感插画、立体效果、视差滚动、视频背景等增强冲击力
风格上渐变色、叠加色等处理手法、波普、构成元素制造空间感等
视觉表现更有张力、叙事更丰富，视觉互动、微交互等吸引用户融入
实战案例：
2017房产春运房租一减没
设计流程：
明确目标：以让利优惠等方式直击用户内心，游戏易操作更具传播性
延用传统元素及红色营造春节氛围，小鸡形象生动
确定展现信息优先级，主标题醒目突出
结合目标用户需求，推出品牌公寓及租房用户优惠券，头图突出奖品提高用户的关注度和活跃度。
结语
以上拙见纯属一家之言，仅供参考。设计经验能让我们更透彻地明确思路，构思成熟后再设计，或许会事半功倍。套路并不是规范准则，只是高效完成工作的基础。经典之作往往是在方法论基础上打破传统、大胆创新，更多的惊艳等待设计师去开拓。
本文标题：稳健参数实验设计案例-AngulaJS路由 ui-router 传参实例61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1