首页

表格设计(上篇):18种样式,与你分享

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

最近在做一款工具类软件,主要涉及表格的设计,边工作边整理了一些表格的设计样式和原型图,拿出来与需要的人分享。欢迎与我交流,有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类,第一类表格中通常以一行为组,操作均是以组为单位进行。此类表格优点是简单直观,操作感强,可提前设定好计算公式;缺点是对于某一数据的批量操作较为复杂,不方便自定义复杂计算。

常用于信息展示,无需复杂计算的网页和C端界面中。

表格样式一:缝隙

第一类表格以行为一组,表头通常固定在最上端不参与滑动,现代设计为了美观通常也没有单元格的线框,设计时为了更直观的体现一条数据,可以在每条数据之间留一个缝隙。

表格样式一:斑马线

或者用斑马线形式更直观的展示数据,避免用户可能看串行的对不齐数据的情况。

表格样式一:按钮

为了页面的简洁可以将上端按钮尽可能减少,整个表格上端原则上保留批量操作功能按钮,对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一:拖拽

因为单行是一个模块,当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一:分页1

当内容较多需要除了无限滚动外,还可以选用分页的方式,目前较为常见的可以选择如下方式。

表格样式一:分页2

若不需要突出页码,主要查看都在第一页上时可以考虑将放在角落里,到达首页和到达尾页根据产品需求决定是否使用。

表格样式一:搜索

搜索功能考虑到用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。通常上端搜索栏不被限定搜索范围,可以全部搜索。

表格样式一:分项搜索

对比必要的分项搜索功能可以对应到各个列中,同时输入时可以给出联想结果,仍然应该设计为模糊搜索。

表格样式一:筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能,可为用户提供可勾选的筛选信息。

表格样式一:高级筛选

对于部分列有筛选需求的情况,可以设计弹框输入筛选条件,也可以在此设计复杂筛选条件,筛选规则在上端展示,可以更直观的看到已筛选项。

表格样式一:可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时,为了界面的一致性和美观性,可以考虑鼠标悬浮时给出可编辑单元格的编辑框,区分两种不同单元格样式。

表格样式一:信息预览(浮窗)

对于汇总表中如有预览详情的需要,同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一:信息预览(弹窗+蒙板)

对于详细有部分属性修改需求,对于细节没有修改需求的,可以考虑在一侧弹出弹框进行展示和修改属性。(如报价单表格信息,报价单审核状态的可以在此修改,详细信息仍在明细表中修改)

表格样式一:信息预览(折叠)

折叠模式的使用环境基本等同于弹出模式,可根据设计风格进行选择。

表格样式一:信息预览(弹窗)

单独弹出窗口在需要有多项数据进行对比查看时可以选用,弹出窗体操作通常只考虑状态改变,不建议其他数据在此更改。

表格样式一:信息预览(变导航)

此种展示方式,对于需要查看和修改较多数据的需求可以选中,汇总表将收为类似于导航栏的模式,数据可以精简只展示关键数据,弹窗可设计复杂操作,可以包含明细的修改等功能。

表格样式一:信息预览(变窗体结构)

通过减少列表高度流出信息展示空间,建议两部分在一屏内展示可分别滑动或翻页,汇总表信息完整,弹出窗体也可进行复杂操作设计。

表格样式一:信息预览(自定义表头)

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯,除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流,如有需要原型的小伙伴可以在下方留言,我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

表格设计(上篇):18种样式,与你分享

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

最近在做一款工具类软件,主要涉及表格的设计,边工作边整理了一些表格的设计样式和原型图,拿出来与需要的人分享。欢迎与我交流,有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类,第一类表格中通常以一行为组,操作均是以组为单位进行。此类表格优点是简单直观,操作感强,可提前设定好计算公式;缺点是对于某一数据的批量操作较为复杂,不方便自定义复杂计算。

常用于信息展示,无需复杂计算的网页和C端界面中。

表格样式一:缝隙

第一类表格以行为一组,表头通常固定在最上端不参与滑动,现代设计为了美观通常也没有单元格的线框,设计时为了更直观的体现一条数据,可以在每条数据之间留一个缝隙。

表格样式一:斑马线

或者用斑马线形式更直观的展示数据,避免用户可能看串行的对不齐数据的情况。

表格样式一:按钮

为了页面的简洁可以将上端按钮尽可能减少,整个表格上端原则上保留批量操作功能按钮,对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一:拖拽

因为单行是一个模块,当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一:分页1

当内容较多需要除了无限滚动外,还可以选用分页的方式,目前较为常见的可以选择如下方式。

表格样式一:分页2

若不需要突出页码,主要查看都在第一页上时可以考虑将放在角落里,到达首页和到达尾页根据产品需求决定是否使用。

表格样式一:搜索

搜索功能考虑到用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。通常上端搜索栏不被限定搜索范围,可以全部搜索。

表格样式一:分项搜索

对比必要的分项搜索功能可以对应到各个列中,同时输入时可以给出联想结果,仍然应该设计为模糊搜索。

表格样式一:筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能,可为用户提供可勾选的筛选信息。

表格样式一:高级筛选

对于部分列有筛选需求的情况,可以设计弹框输入筛选条件,也可以在此设计复杂筛选条件,筛选规则在上端展示,可以更直观的看到已筛选项。

表格样式一:可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时,为了界面的一致性和美观性,可以考虑鼠标悬浮时给出可编辑单元格的编辑框,区分两种不同单元格样式。

表格样式一:信息预览(浮窗)

对于汇总表中如有预览详情的需要,同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一:信息预览(弹窗+蒙板)

对于详细有部分属性修改需求,对于细节没有修改需求的,可以考虑在一侧弹出弹框进行展示和修改属性。(如报价单表格信息,报价单审核状态的可以在此修改,详细信息仍在明细表中修改)

表格样式一:信息预览(折叠)

折叠模式的使用环境基本等同于弹出模式,可根据设计风格进行选择。

表格样式一:信息预览(弹窗)

单独弹出窗口在需要有多项数据进行对比查看时可以选用,弹出窗体操作通常只考虑状态改变,不建议其他数据在此更改。

表格样式一:信息预览(变导航)

此种展示方式,对于需要查看和修改较多数据的需求可以选中,汇总表将收为类似于导航栏的模式,数据可以精简只展示关键数据,弹窗可设计复杂操作,可以包含明细的修改等功能。

表格样式一:信息预览(变窗体结构)

通过减少列表高度流出信息展示空间,建议两部分在一屏内展示可分别滑动或翻页,汇总表信息完整,弹出窗体也可进行复杂操作设计。

表格样式一:信息预览(自定义表头)

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯,除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流,如有需要原型的小伙伴可以在下方留言,我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

设计大师眼中的设计

蓝蓝设计的小编

为了创作出独特的东西,你的所有大脑神经必须集中在微小的细节上。

遮罩层上滚动,使下方的列表随之滚动

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

效果

这里写图片描述

遮罩层为一张边框样式图(如下图):

这里写图片描述

边框样式遮罩层显示在最上方,然后是中间的列表,最下层是一个透明黑色遮罩层,滚动鼠标滚轮,能控制列表滚动

实现原理

注册最上面遮罩层的滚动事件,拿到滚动滚动方向,然后控制列表滚动的方向和距离

上代码

注册事件 /**
 * 增加滚轮滚动事件(暂时只实现了chrome的滚动效果)
 * @param modalDomId 遮罩层domId
 * @param domId 需要滚动下层列表domId
 */ addMousewheelListener(modalDomId:string,domId:string){ //添加页面监听 let modalAwardPanel = document.getElementById(modalDomId);
  modalAwardPanel.addEventListener('mousewheel',function(e){
    let scrollContentDom = document.getElementById(domId); //向上滚 if (e.wheelDelta > 0){ if (scrollContentDom.scrollTop -20 >= 0){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop - 20;
      } else{
        scrollContentDom.scrollTop = 0 ;
      }
    } //向下滚 else{ if(scrollContentDom.scrollTop + scrollContentDom.clientHeight < scrollContentDom.scrollHeight){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop + 20;
      }
    }
  });
}

组件调用: this.addMousewheelListener("你的最上方遮罩层id","你想要滚动的列表id");
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

连BAT设计师都在用的视觉动线技巧

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

作为设计师,我们需要很好的控制用户在使用产品过程中,他们浏览的路径,需要了解我们的眼睛是如何处理信息,本周我会结合我之前学习的一些知识和大家分享下视觉动线这个概念,以及如何在设计中进行运用!学习过程红大家任何不明白地方,欢迎加我微信交流:uiskyss

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

作为PM,你居然不知道Axure这10种非交互功能?

蓝蓝设计的小编

提到Axure,这可是绝大多数PM童鞋靠着吃饭的家伙事儿。Axure被很多人定义为一个以交互见长的原型设计工具。很多初入坑甚至入坑甚久的PM为画出炫酷的原型挖空了心思。我想这对Axure的初衷一定是有误解。

前端算法之弹幕设计

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大家都说前端写页面较多,几乎用不到算法。本文愿从弹幕设计这个场景来描述算法在前端中的应用,我们先来看下实现效果:

图1.1 弹幕效果

 

开场之前我们先来描述弹幕开发的难度,再集中精力描述算法设计的思路。

* 如何保证不同字号的弹幕不碰撞
* 弹幕的位置计算
* 弹幕的速度控制及动画实现
* 弹幕与视频的同步

***如何保证不同字号的弹幕不碰撞***

如果弹幕采用相同的字号,碰撞的问题处理起来比较简单,只要考虑相邻弹幕的播放速度和偏移的位置就可以计算出来。然而使用不同字号的弹幕处理起来就麻烦了许多,弹幕的起始位置不可以线性的增加,比如第一行放了字幕,接下来的字幕可以按顺序从上至下依次放置即可。

***弹幕的位置计算***

只有设计好弹幕的初始位置,才可以动态、的管理不同字号弹幕的碰撞问题。打个比方,我们通过接口获取了2秒之内的弹幕数据1000条,每个字幕的长度、速度、字号都不同,怎么管理这些弹幕,示意图如下:

图2.1 弹幕管理示意图

 

这是第一种情况,按照从上到啊的顺序依次摆放以后会有几个问题:
1. 弹幕五、六、七该怎么计算位置,按top值循环取模+累加吗?
2. 当弹幕一或者弹幕三足够长的时候,如何准时的跳过当前位置计算?
3. 当前屏幕的弹幕播放结束,如何再计算的时候利用空出来的位置
4. 空出的位置是否满足当前弹幕的高度
5. ……

一系列问题就不统统列举出来了,基于这个背景我们结合数学建模的思维方式,找到了弹幕场景相似度非常高的机场运营。我们可以把弹幕当做飞机,每个时间段播放多少弹幕和机场每个时间段放飞多少飞机一个道理。

首都国际机场一共有3条跑道,两条4E级跑道、一条4F级跑道,2016年的吞吐量为9000万人次。它的运行机制就是所有飞机通过搭台有顺序的共用3条跑道来完成运输任务的。

同理,我们也设计了几个个角色:一个是轨道(跑道)、一个是调度(塔台)、一个是弹幕(飞机),我们为每个角色设计一个类分为为Track、Main、Bullet。

* 轨道
            
       轨道这个角色很重要,它可以解决弹幕位置计算、速度控制、碰撞检测问题。
       首先,我们要来初始化轨道。通俗的说我们要修建几个跑道呢,我们不是实物,可以动态调整轨道的                        数量,计算的原则:
        轨道数量 = 播放器有效高度 / 设备基准字号
    * 播放器有效高度:播放器的实际高度减去控制条的高度,因为弹幕不可以遮挡控制条。
    * 设备基准字号:移动端是10px,pc端是12px;
        为啥计算公式是这样的?因为我们要支持不同字号的弹幕。试想不同的字号对物理空间的占用是不同的,然而如果要求轨道的尺寸是动态的,那就带来很复杂的计算。本文提出“虚拟轨道”的概念,在交通管制中最常见的就是道路合并或者改向。我们也是采用将相邻的物理轨道临时合并为一条轨道。这样就可以轻松的解决不同字号的轨道占用问题。原理图如下:
        

图2.2 轨道计算示意图

其次我们来回忆下机场的工作流程:
1. 机长呼叫塔台,CZ6132请求起飞
    * 目前跑道均被占用,请等待
        * N时刻后再次执行步骤1
    * 目前跑道 A1 空闲,准许进入
        * 执行步骤3
2. 塔台查看跑道使用情况
3. 进入跑道,起飞完成
4. 机长通知塔台,本次起飞完成,释放跑道的占用
5. 其他飞机同样执行上述步骤

按照这个思路,我们的弹幕工作流程:
    
1. 弹幕进入播放器
2. 轨道根据弹幕的播放速度、尺寸计算是否有合适的轨道提供
    * 没有
        * 通知弹幕尚无合适轨道提供,请等待;同时,弹幕队列中的其他弹幕依次执行步骤1
    * 有
        * 执行步骤3
3. 播放器加载弹幕DOM,开始播放,待播放完成
4. 播放完成通知轨道更新轨道占用情况
5. 其他弹幕同样执行上述步骤

图2.3 轨道可用性计算示意图

 

关于轨道的基本原理我们整理清楚了,当然还有不少细节比如如何和调度通信、如何和弹幕通信以及虚拟轨道检测算法等。有兴趣的同学可以参考代码吧。https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js

* 弹幕
       弹幕基本是实现“飞机”的角色,我们要求它具有自身的属性和方法。比如调度中心通过id能拿到它所有的基本信息,轨道控制也可以通过弹幕进行检查和更新。当然弹幕也必须具备状态自动更新、移动、播放结束通知、自动销毁等功能。
* 调度
        调度就是搭台的化身,承接着轨道、弹幕的控制,也保持着与播放器的步调一致。它的职责如下:
    1. 播放器交互控制
    2. 弹幕队列控制
    3. 自身状态更新
    4. 数据格式转换
    5. 动画执行
        还是直接用流程图来描述更直接些:
        
       

图2.4 弹幕运行机制流程图

在弹幕启动之后,首先要检查本地是否已有缓存数据,没有的话直接请求数据并缓存,然后执行数据读取,首次过滤数据进入弹幕队列,同时启动定时器。弹幕队列的数据会定期请求轨道,检测队列里的弹幕是否可以进入,一旦确认后轨道做好登记,弹幕就可以进入播放器开启动画播放了。定时器每隔2秒就会再次更新数据进入到弹幕队列(这块不同的业务可以定制不同的规则)。弹幕播放结束后会通知调度和轨道,调度会在弹幕队列中移除该弹幕实例,轨道也会移除该弹幕实例的轨道占用。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


8个步骤帮你掌握从用户出发的创意脑暴法

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

头脑风暴是创意点子常用的方法,那么从用户出发的脑暴有什么不同?从过去几年用研发现向产品方案转化的脑暴案例中,总结成功与失败经验,提炼出目前最优的流程与执行技巧,一起来提高创意点子产生的成功率吧!

关于新产品创新的成功率,有这样一组数据:3000个原始想法,能变成300个成熟想法,300个成熟想法能产生125个项目,其中大概有9个能进入早期开发,4个能大力开发,最后成功的只有1.7个。(来自彭肯恩博士的研究)

大多数点子的失败,可能的原因有很多,比如疏于对趋势的关注和研究、缺乏理论的突破、缺乏执行力、难以逃脱组织思维惯性等等(来自创新管理课程),其中还有一个常常提到的原因:离用户太远。在最初想点子的时候,由于不知道用户需求、脑补用户需求、片面地针对用户表面部分需求却忽视深层需求来规划,就会导致产品或功能开发完成以后,不知道目标用户、目标场景,也不知道对用户的价值,最终产品也会因用户不去使用,而导致创新失败。

作为用户研究者,洞察和分析用户真实需求是我们的本职和专长,但如何把这些用户研究的发现以更有效的方式转化为「靠谱」的好点子,则需要与团队里各个角色一起不断的努力。从14年起,我们在一次次从用研发现到产品点子的头脑风暴实践中,不断优化流程、评估效果,形成了现在的「从用户出发的创意脑暴」流程,在这里分享给大家。

传统的头脑风暴法(brainstorming)相信大家都熟悉,就是一组人围在一起,随意的将脑中与主题有关的见解提出来,再将大家的见解分类整理。但在实际执行的过程中,头脑风暴的现场却常常交错着讨论、脑补、推理、玩笑等等,然后时间很快过去,却没有产出「靠谱」的点子。从用户出发的创意脑暴,是以典型用户故事为线索,轻松、的产出点子的头脑风暴过程:一方面,线索契合用户真实完整的需求场景,点子变得更容易想也更符合用户需求;另一方面,通过流程上的细节设计,可以更的激发点子产生。

整个过程分为8步。虽然常常的情况是一个人想不出方案,就马上拉人一起脑暴发散,但其实脑暴前的素材和流程准备,以及达成共识对脑暴的最终效果起到了至关重要的作用。

第一步:确定一个不远不近的脑暴主题

产生好点子的前提是问对问题,问对问题需要跳出眼前的思维限制,但又不要太天马行空。要做到这点并不容易,这要求脑暴的组织者在一开始就想清楚团队真正要解决的问题是什么,而不仅仅「产品的某个功能眼下要怎么做」这种具体问题(这样的问题听起来就让人疲惫)。举个例子,当眼前的业务问题是想出一些装扮功能,如果把脑暴的主题定为「装扮还可以做哪些新功能」,思路就会陷入现有的装扮流程里,这时点子的方向已经被具象和限制,有时甚至是无解的;如果定为「如何帮助用户通过装扮来表达自己」(前提是用户真的用装扮在满足这一需求)就会更合适一些,这样就可以去想如何通过装扮表达自己的心情、兴趣、状态、、所属群体身份等等,思路打开的同时又与业务结合;而如果仅仅是「用户如何表达自己」,想出的点子,就会太泛,脱离业务。

第二步:有选择的邀请团队成员

首先,有选择的邀请乐于分享、乐于沟通、思维活跃的人,他们会自然而然的产生想法,互相交流,否则每个人盯着自己的点子说着自己的故事就会丧失一组人在一起的意义;其次,在邀请成员时,不建议只有自己组的组员(虽然这样比较方便),因为参与角色的多样性一方面可以相互激发创意,同时也让点子在收敛阶段能得到更多元的评价(比如工程师对点子可行性的评估就有其专业的判断)。在人数上,虽然6-8人是脑暴的建议人数,但因为我们的脑暴流程会让点子批量产生,人数的增加会直接导致后续点子收敛时效率的降低,所以目前来看建议6人为佳。

第三步:准备简洁又有代表性的用户故事

用户故事的准备是脑暴的一个关键,吸引着我们不断的去改进和探寻。过去,我们也有过一些不太理想的尝试:让参与者分享自己的故事(如毕业生如何找房),这时很容易就根据主观和片面的需求想点子;给出一些用户需求的词让大家联想(如不孤单),这时参与者对着普通又太正确的词已经想过很多遍,很难进入状态;给出一系列相关故事(如多个类似的故事)帮参与者发想,这时呈现的信息对参与者来说已经过于复杂,传达的效率很低;给出的每个故事都带有用户痛点(如粉丝给明星发消息得不到回应),这时参与者往往会依照故事中的情节去推理,绞尽脑汁非常辛苦,却忽略了没有痛点的地方藏着用户的真实需求(如粉丝默默的把想对明星说的话记录在手机备忘里)。

所以,目前的做法是:

  • 对调研中收集到的大量用户原始故事进行分析;
  • 根据分析点之间的相互关系,按照一定的维度把分析点组织起来,比如组织成几类典型的用户画像、使用产品的几类动机、几个场景、几步行为流程等等,组织维度符合 MECE( Mutually Exclusive Collectively Exhaustive,相互独立、完全穷尽)原则即可;
  • 按照组织后的结构(如画像/动机/场景/流程等),把同一个类别下多个反映分析点的真实故事组合改编成一个典型故事。

举例来看,研究粉丝的过程中,我们发现有的粉丝会组团给偶像投票打榜并感叹「团结就是力量」、有的粉丝会在活动现场和他人一起大声应援并觉得暖心、有的粉丝在 QQ群和其他粉丝一起讨论相互诉说并且感觉很棒。这些故事都反映出粉丝对于「群体」、「团结」的诉求,将这几个不同人的真实故事综合起来,就形成了一个特别在意「团结形象」的典型粉丝故事。这个「团结」的典型故事和「秩序」、「强大」等等典型故事一起反映了粉丝「群体形象」方面的诉求。

通过这样的方式得到的典型故事不仅有真实故事的细节,而且严谨地反映用户需求,信息量大,结构完整。脑暴参与者面对这些故事,就很容易理解,并联想出更多符合用户真实需求的点子。整个过程说起来简单,但在实际执行时却考验着研究人员的大局观、逻辑能力、洞察力、组织能力等等,整个研究过程有时可能会需要1-2个月。

第四步:设置严谨又轻松的流程

在脑暴流程上的设置上,主要的尝试点在个人想点子和大家交流点子的方式和顺序安排。如果大家同时一边想一边交流,会出现没空思考或有人不认真想的情况;如果大家先写再轮流说,会出现思考时独立思考,交流时只关心自己的说法而忽视交流发散的情况。所以在尝试了默写式头脑风暴(后文会详细介绍)后,我们就沿用了这个鼓励思考交流、弱化发言的脑暴方式。

另外要注意的一个点是,不用在流程上对想点子的思路有过多的限制,比如告诉参与者「你可以先想什么再想什么」或「你想出的点子不能太抽象或太具体」,这种「急功近利」的做法会让参与者困惑和紧张。相反的,应该要做的是让他们放松,比如放一些音乐、摆一些零食等等,这样更容易产生想法。

第五步:在正式脑暴前,达成共识

在脑暴前,向参与者说明本次脑暴的目的、主题、流程和规则,能够帮助大家统一目标,提率。

头脑风暴的四个基本规则在脑暴过程中要落到实处:

  • 追求数量(可设置一个小荣誉激励大家想点子);
  • 禁止批评(包括负面的表情或语气词都不能有);
  • 提倡独特的想法(可以异想天开、天马行空);
  • 综合并改善设想(可以在别人的基础上写新的点子)。

组织者也可以给出一些用户研究的发现,帮助大家建立概念、了解用户。

第六步:默写式头脑风暴

默写式头脑风暴是在奥斯本头脑风暴的基础上改造而成的一种书面脑暴方法(具体操作方式如下图)。从用户出发的创意脑暴在此基础上,增加了用户的典型故事作为线索。在开始前,每个参与者会拿到3张用户典型故事卡;在第一个5分钟,每人针对3个故事各写至少1个点子,贴在故事卡上,然后传给右邻;第二个5分钟,每人从传来的故事卡和前人的点子上得到启发,再各写至少1个点子,传给右邻;这样直到故事传完,就能得到至少6 x 3 x 6=108个点子。这也是为什么前面提到要控制参与者人数的原因,因为每增加1人,就会多一轮脑暴的时间,点子的数量会相应增加,在下一步分类交流时的工作量和时间也会直接增加。

第七步:点子现场收敛

在已经有了一百多个点子的情况下,现场投票可以快速把「好点子」筛出来。但由于在写点子的时候,把想法准确的表达在一张便签纸上并不是一件容易的事,所以在投票前,还是会有一个简单的交流,让大家了解彼此的点子,同时合并类似的点子。

投票分为感性轮和理性轮:感性轮是让人眼前一亮的点子,每人3票;理性轮是可行或能有效提升业绩的点子,也是每人3票。这样两个维度交叉出来就能得到既让人眼前一亮,又具有可行性的点子。参与者多样的背景也让点子的评估更加全面。

第八步:点子的后续跟进

脑暴结束并不是点子的结束。最初的点子只是一句话或一个示意图,从点子走向方案,还需要不断地打磨交互、视觉、文案、逻辑、场景等等方面的细节;从方案到投入开发乃至上线,则需要综合考虑优先级、人力、技术等更多方面的问题;在上线后,点子的可用性以及对业务的效果,也需要提前规划和进一步验证。

总的来说,从用户出发的创意脑暴,在线索和流程设计上做出了一些尝试,让产生的想法更加符合用户真实需求,以此来提高创新点子的成功率。但创新毕竟不是一件容易的事,在未来,我们也会不断地尝试和打磨这个流程,思考更好的方式,让创新有迹可循。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档