EXCEL 导入的交互设计

在商业系统中,数据导入是非常常见的操作,常用的方法是提供一个 EXCEL 或 CSV 格式的模板,模板中限定了表头,用户在本地通过 EXCEL 编辑后上传文件进行数据的导入。

由于用户填入的数据可能千奇百怪,系统必须对关键数据进行格式的校验,常常存在部分数据合法、部分数据不合法的情况,但上传文件只有一步,无法做到对数据校验的实时反馈,于是就只能在其他环节来避免用户的出错,这里有几个例子供参考。
Google Analytics 的上传文件
Google Analytics 中上传数据后系统会进行离线处理,反馈并不是实时的,待系统处理完成后会提示成功或失败,如果失败,可以查看详细错误。[……]

继续阅读

5种主流的移动端广告类型

移动端屏幕空间寸土寸金,即便如此,也无法阻止广告的扩张,移动端广告主要有以下几种:
1. Banner 广告
移动端的 Banner 广告是对 web Banner 广告的直接复制,直接嵌入在屏幕的顶部或底部,下图是空气质量指数这个 APP 的 Banner 广告:

mobile_ad_type_2
2. 开屏广告
开屏广告出现在应用启动时,一般会全屏展现 3~5秒,广告内容无法点击跳转,主要适用于品牌广告。

mobile_ad_type_1
3. 积分墙
“积分墙”是在一个应用内展示各种积分任务(下载安装推荐的优质应用、注册、填表等),以供用户完成任务获得积分的页面。用户在嵌入积分墙的应用内完成任务,获得应用内积分或者游戏金币,该[……]

继续阅读

技术选型时要考虑招聘成本

最近团队一直处于严重缺前端工程师的状态,而且迟迟招不到人,从我的角度分析了一下原因,主要和前端技术选型有关: Chaplin 框架。

Chaplin 是基于 Backbone 的一个前端框架,Backbone 又依赖 Jquery 和 Underscore,上手比较困难,熟练应用需要时间磨练,团队甚至不是直接使用 Chaplin,而是用 js 的方言 Coffee Script,又加大了门槛。

Chaplin、Coffee Script 在国内比较小众,要招聘能够熟练运用的人很难,需要工程师入职后再学习,看学习能力要工程师从开始到熟练运用又需要几周甚至几个月的时间,又导致了开发的低[……]

继续阅读

产品工具箱:GIF 屏幕录制工具

产品经理、交互设计师在写文档或展示新设计的交互时,除了原型,还有一种更直观的方式,那就是直接放 gif 动画,gif 图片可以放在网页里、word、ppt 中,自动播放,简单直观。这里介绍一款可以直接录屏为 gif 格式的工具:LICEcap

licecap

LICEcap 的主界面是个透明的窗口,相当于摄像头的取景器,底部设置好帧数,大小,点击 Recored, 选择保存路径后开始录制,点击 Stop 结束录制。目前发现的一点不足就是 MAC 下不支持快捷键停止,需要鼠标移动至 stop 按钮处点击。下图是上一篇文章录制的交互示意图,这里作为 demo 展示:

LICEcap 支[……]

继续阅读

向列表添加元素的三种交互方式

向已有的列表添加元素,是一个常见的操作,比如博客后台中需要向文章列表中添加一篇新文章,管理后台需要添加一位新用户等,比较常见的有以下三种交互:
跳转到新页面
在博客的文章列表页,通常在页面顶部都会有一个 “写文章” 的按钮,点击后页面会跳转到添加文章页,点击发布后展示该篇文章发布后的状态。比如 wordpress 的后台是这样:

add-article

需要输入的信息较多的时候,跳转到新页面的方式比较合适,新的页面有足够大的空间进行编辑,缺点就是因为这是一个新页面,加深了页面层级,需要添加对应的菜单让用户返回列表页。
弹出浮窗添加
点击添加按钮后页面弹出浮窗,信息在这个浮窗中填写,添加完成后列表[……]

继续阅读

产品经理应该熟悉 Bootstrap 每个控件

Bootstrap 简介
Bootstrap 是非常流行的前端框架,使用它可以快速构建出简洁大方的界面,同时能够适配 PC、平板和手机,前端工程师可以节省出很多写样式的时间。前端框架的核心在于已经把 web 上常见的控件预先定义好样式,使用的时候直接引用即可。
常见的 Bootstrap 控件
列举几个 web 网站最常见的控件:导航、tab 标签、翻页、按钮、表单,它们在 Bootstrap 里是这样子的:

导航↓

Bootstrap 导航

tab 标签↓

翻页↓

按钮↓

当然还有其他很多标准化的控件,丰富程度几乎囊括了你能想象到的交互。这样在设计产[……]

继续阅读

产品观察第二期:在创新中探索的社交软件们

因为微信、QQ 的极端强大,加上用户转移成本过高等原因,国内很少再有公司去做即时通信软件,即便是依靠巨头的来往和易信,做了这么久依旧落寞,对于缺少资源的创业者来说机会就更为渺茫了。陌陌基于 LBS 陌生人交友获得了不少用户,到现在的时机很难再复制陌陌的成功,要想做社交类软件并且做好,必须得有自己的特色,下面就给大家介绍几款非常有特色的社交类 APP :

socail_app

请吃饭的逻辑非常简单,主要就是两件事:发起饭局或参与别人的饭局,可以基于地理位置筛选,可以聊天和评论。这类 APP 一般都是僧多粥少,在 APP 中男约女的饭局鲜有人问津,女约男的饭局报名者蜂拥,当然这也要看长相,头像甜美的女性发[……]

继续阅读

产品观察第一期:如何在微信上发布文章

作为 PM,必须始终保持对各种新产品的猎奇心:各种创业公司、新鲜网站、APP 等应在第一时间体验,吸收它们的优秀之处,才能应用在自己的产品里,所以计划每周写一篇介绍各种新产品的文章,同时分享在微信朋友圈中,让朋友们都能看到。

但是如何在朋友圈中发长文呢?这是我遇到的第一个问题。朋友圈只能发图文消息,长按相机图标可以发送简短的文字,却无法发布长文,但是我们又经常会在朋友圈中看到各种转发的文章,这些文章来自微信公众号或第三方网页,也就意味着,如果我想发布一篇文章到朋友圈,需要先用电脑把文章写下来发布成一个网页,然后通过微信把这个链接地址发给自己(或者通过二维码),打开这个链接后再分享到朋友圈[……]

继续阅读

使用 Google Analytics 统计来自微信的访问

越来越多的公司开始重视微信营销,通过微信公众号、朋友圈、微信群等方式扩大影响力,那么如何衡量在微信中的营销效果呢?如果使用的是微信自有的文章发布平台,在公众平台的管理后台是可以直接看到统计数据,如果是通过 API 接入的方式发布一个链接或者直接发在群里的链接就没办法通过微信后台统计它们究竟带来了多少流量,但是我发现了一个巧妙的方法,结合使用 Google Analytics 来轻松辨别来自微信的流量。
原理:识别微信的链接参数
如果你给好友发送了一个普通的网址,比如 http://ratwu.com,对方在打开链接的时候网址就变成了:
http://ratwu.com/?from=mes[……]

继续阅读

产品新人如何提高产品设计能力

近几年产品经理这个职位大热,尤其受应届毕业生欢迎,大概是因为它不限专业、title 中有“经理”二字,听起来就非常高大上,而且现在的大学生大量时间泡在网上,提到用户体验、产品设计基本都能大谈特谈,稍微用心点的同学读读几本入门书籍,自学一下 Axure,就觉得满足产品经理的职位要求了。

当然以上几点还远远不够,对于产品新人来讲,要提高产品设计能力最重要的的两点一是博闻强识,二是善于思考。
博闻强识
博闻强识是说,要做产品经理,首先要对互联网产品见的多,知道的多。

会上网的人都知道微博、QQ,360、百度,那么你是否用过、尝鲜过一些出色但又小众的网站或 APP?提到社交网络,最常想[……]

继续阅读