中文av日韩专区,国产高清免费在线播放,少妇无码精油按摩专区,久久无码视频库-h国产在线观看,欧美一区二区三区久久精品茉莉花,国产三级大片,国

首頁(yè)

表格設(shè)計(jì)(上篇):18種樣式,與你分享

濤濤

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

最近在做一款工具類軟件,主要涉及表格的設(shè)計(jì),邊工作邊整理了一些表格的設(shè)計(jì)樣式和原型圖,拿出來(lái)與需要的人分享。歡迎與我交流,有需要原型的小伙伴也歡迎在下方留言。

表格樣式一

表格樣式主要分為兩大類,第一類表格中通常以一行為組,操作均是以組為單位進(jìn)行。此類表格優(yōu)點(diǎn)是簡(jiǎn)單直觀,操作感強(qiáng),可提前設(shè)定好計(jì)算公式;缺點(diǎn)是對(duì)于某一數(shù)據(jù)的批量操作較為復(fù)雜,不方便自定義復(fù)雜計(jì)算。

常用于信息展示,無(wú)需復(fù)雜計(jì)算的網(wǎng)頁(yè)和C端界面中。

表格樣式一:縫隙

第一類表格以行為一組,表頭通常固定在最上端不參與滑動(dòng),現(xiàn)代設(shè)計(jì)為了美觀通常也沒(méi)有單元格的線框,設(shè)計(jì)時(shí)為了更直觀的體現(xiàn)一條數(shù)據(jù),可以在每條數(shù)據(jù)之間留一個(gè)縫隙。

表格樣式一:斑馬線

或者用斑馬線形式更直觀的展示數(shù)據(jù),避免用戶可能看串行的對(duì)不齊數(shù)據(jù)的情況。

表格樣式一:按鈕

為了頁(yè)面的簡(jiǎn)潔可以將上端按鈕盡可能減少,整個(gè)表格上端原則上保留批量操作功能按鈕,對(duì)于單行的操作按鈕可以放置在單行中懸浮展示。

表格樣式一:拖拽

因?yàn)閱涡惺且粋€(gè)模塊,當(dāng)有需要調(diào)整順序時(shí)可以支持整行的拖拽操作。

表格樣式一:分頁(yè)1

當(dāng)內(nèi)容較多需要除了無(wú)限滾動(dòng)外,還可以選用分頁(yè)的方式,目前較為常見的可以選擇如下方式。

表格樣式一:分頁(yè)2

若不需要突出頁(yè)碼,主要查看都在第一頁(yè)上時(shí)可以考慮將放在角落里,到達(dá)首頁(yè)和到達(dá)尾頁(yè)根據(jù)產(chǎn)品需求決定是否使用。

表格樣式一:搜索

搜索功能考慮到用戶需要手動(dòng)輸入,很難保證精準(zhǔn)搜索,原則上所有搜索均為模糊搜索,必要精準(zhǔn)搜索的地方使用篩選功能,給用戶提供篩選選項(xiàng)。通常上端搜索欄不被限定搜索范圍,可以全部搜索。

表格樣式一:分項(xiàng)搜索

對(duì)比必要的分項(xiàng)搜索功能可以對(duì)應(yīng)到各個(gè)列中,同時(shí)輸入時(shí)可以給出聯(lián)想結(jié)果,仍然應(yīng)該設(shè)計(jì)為模糊搜索。

表格樣式一:篩選

對(duì)于各個(gè)列中必須精準(zhǔn)搜索的數(shù)據(jù)可以設(shè)計(jì)為篩選功能,可為用戶提供可勾選的篩選信息。

表格樣式一:高級(jí)篩選

對(duì)于部分列有篩選需求的情況,可以設(shè)計(jì)彈框輸入篩選條件,也可以在此設(shè)計(jì)復(fù)雜篩選條件,篩選規(guī)則在上端展示,可以更直觀的看到已篩選項(xiàng)。

表格樣式一:可編輯單元格提示

表格中存在可編輯單元格和不可編輯單元格時(shí),為了界面的一致性和美觀性,可以考慮鼠標(biāo)懸浮時(shí)給出可編輯單元格的編輯框,區(qū)分兩種不同單元格樣式。

表格樣式一:信息預(yù)覽(浮窗)

對(duì)于匯總表中如有預(yù)覽詳情的需要,同時(shí)對(duì)于數(shù)據(jù)僅為查看沒(méi)有修改需要的時(shí)候可以考慮懸浮提示將主要數(shù)據(jù)進(jìn)行展示。

表格樣式一:信息預(yù)覽(彈窗+蒙板)

對(duì)于詳細(xì)有部分屬性修改需求,對(duì)于細(xì)節(jié)沒(méi)有修改需求的,可以考慮在一側(cè)彈出彈框進(jìn)行展示和修改屬性。(如報(bào)價(jià)單表格信息,報(bào)價(jià)單審核狀態(tài)的可以在此修改,詳細(xì)信息仍在明細(xì)表中修改)

表格樣式一:信息預(yù)覽(折疊)

折疊模式的使用環(huán)境基本等同于彈出模式,可根據(jù)設(shè)計(jì)風(fēng)格進(jìn)行選擇。

表格樣式一:信息預(yù)覽(彈窗)

單獨(dú)彈出窗口在需要有多項(xiàng)數(shù)據(jù)進(jìn)行對(duì)比查看時(shí)可以選用,彈出窗體操作通常只考慮狀態(tài)改變,不建議其他數(shù)據(jù)在此更改。

表格樣式一:信息預(yù)覽(變導(dǎo)航)

此種展示方式,對(duì)于需要查看和修改較多數(shù)據(jù)的需求可以選中,匯總表將收為類似于導(dǎo)航欄的模式,數(shù)據(jù)可以精簡(jiǎn)只展示關(guān)鍵數(shù)據(jù),彈窗可設(shè)計(jì)復(fù)雜操作,可以包含明細(xì)的修改等功能。

表格樣式一:信息預(yù)覽(變窗體結(jié)構(gòu))

通過(guò)減少列表高度流出信息展示空間,建議兩部分在一屏內(nèi)展示可分別滑動(dòng)或翻頁(yè),匯總表信息完整,彈出窗體也可進(jìn)行復(fù)雜操作設(shè)計(jì)。

表格樣式一:信息預(yù)覽(自定義表頭)

自定義表頭設(shè)計(jì)可以將此操作藏在較明顯的位置同時(shí)可以保證界面的簡(jiǎn)潔。

后續(xù)

上篇中主要展示了一些表格樣式一的一些操作習(xí)慣,除此之外還會(huì)在很多專業(yè)工具的設(shè)計(jì)中用到另一種展現(xiàn)形式類似于EXCEL表格。

歡迎各位做過(guò)類似項(xiàng)目的產(chǎn)品經(jīng)理與我多多交流,如有需要原型的小伙伴可以在下方留言,我再將下載地址放出。如果大家喜歡這篇文章我會(huì)繼續(xù)完成下篇的內(nèi)容。

藍(lán)藍(lán)設(shè)計(jì)www.sanmachine.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

設(shè)計(jì)大師眼中的設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

為了創(chuàng)作出獨(dú)特的東西,你的所有大腦神經(jīng)必須集中在微小的細(xì)節(jié)上。

遮罩層上滾動(dòng),使下方的列表隨之滾動(dòng)

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

效果

這里寫圖片描述

遮罩層為一張邊框樣式圖(如下圖):

這里寫圖片描述

邊框樣式遮罩層顯示在最上方,然后是中間的列表,最下層是一個(gè)透明黑色遮罩層,滾動(dòng)鼠標(biāo)滾輪,能控制列表滾動(dòng)

實(shí)現(xiàn)原理

注冊(cè)最上面遮罩層的滾動(dòng)事件,拿到滾動(dòng)滾動(dòng)方向,然后控制列表滾動(dòng)的方向和距離

上代碼

注冊(cè)事件 /**
 * 增加滾輪滾動(dòng)事件(暫時(shí)只實(shí)現(xiàn)了chrome的滾動(dòng)效果)
 * @param modalDomId 遮罩層domId
 * @param domId 需要滾動(dòng)下層列表domId
 */ addMousewheelListener(modalDomId:string,domId:string){ //添加頁(yè)面監(jiān)聽 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;
      }
    }
  });
}

組件調(diào)用: this.addMousewheelListener("你的最上方遮罩層id","你想要滾動(dòng)的列表id");
藍(lán)藍(lán)設(shè)計(jì)www.sanmachine.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

連BAT設(shè)計(jì)師都在用的視覺動(dòng)線技巧

濤濤

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

作為設(shè)計(jì)師,我們需要很好的控制用戶在使用產(chǎn)品過(guò)程中,他們?yōu)g覽的路徑,需要了解我們的眼睛是如何處理信息,本周我會(huì)結(jié)合我之前學(xué)習(xí)的一些知識(shí)和大家分享下視覺動(dòng)線這個(gè)概念,以及如何在設(shè)計(jì)中進(jìn)行運(yùn)用!學(xué)習(xí)過(guò)程紅大家任何不明白地方,歡迎加我微信交流:uiskyss

請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖

藍(lán)藍(lán)設(shè)計(jì)www.sanmachine.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

作為PM,你居然不知道Axure這10種非交互功能?

藍(lán)藍(lán)設(shè)計(jì)的小編

提到Axure,這可是絕大多數(shù)PM童鞋靠著吃飯的家伙事兒。Axure被很多人定義為一個(gè)以交互見長(zhǎng)的原型設(shè)計(jì)工具。很多初入坑甚至入坑甚久的PM為畫出炫酷的原型挖空了心思。我想這對(duì)Axure的初衷一定是有誤解。

前端算法之彈幕設(shè)計(jì)

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

大家都說(shuō)前端寫頁(yè)面較多,幾乎用不到算法。本文愿從彈幕設(shè)計(jì)這個(gè)場(chǎng)景來(lái)描述算法在前端中的應(yīng)用,我們先來(lái)看下實(shí)現(xiàn)效果:

圖1.1 彈幕效果

 

開場(chǎng)之前我們先來(lái)描述彈幕開發(fā)的難度,再集中精力描述算法設(shè)計(jì)的思路。

* 如何保證不同字號(hào)的彈幕不碰撞
* 彈幕的位置計(jì)算
* 彈幕的速度控制及動(dòng)畫實(shí)現(xiàn)
* 彈幕與視頻的同步

***如何保證不同字號(hào)的彈幕不碰撞***

如果彈幕采用相同的字號(hào),碰撞的問(wèn)題處理起來(lái)比較簡(jiǎn)單,只要考慮相鄰彈幕的播放速度和偏移的位置就可以計(jì)算出來(lái)。然而使用不同字號(hào)的彈幕處理起來(lái)就麻煩了許多,彈幕的起始位置不可以線性的增加,比如第一行放了字幕,接下來(lái)的字幕可以按順序從上至下依次放置即可。

***彈幕的位置計(jì)算***

只有設(shè)計(jì)好彈幕的初始位置,才可以動(dòng)態(tài)、的管理不同字號(hào)彈幕的碰撞問(wèn)題。打個(gè)比方,我們通過(guò)接口獲取了2秒之內(nèi)的彈幕數(shù)據(jù)1000條,每個(gè)字幕的長(zhǎng)度、速度、字號(hào)都不同,怎么管理這些彈幕,示意圖如下:

圖2.1 彈幕管理示意圖

 

這是第一種情況,按照從上到啊的順序依次擺放以后會(huì)有幾個(gè)問(wèn)題:
1. 彈幕五、六、七該怎么計(jì)算位置,按top值循環(huán)取模+累加嗎?
2. 當(dāng)彈幕一或者彈幕三足夠長(zhǎng)的時(shí)候,如何準(zhǔn)時(shí)的跳過(guò)當(dāng)前位置計(jì)算?
3. 當(dāng)前屏幕的彈幕播放結(jié)束,如何再計(jì)算的時(shí)候利用空出來(lái)的位置
4. 空出的位置是否滿足當(dāng)前彈幕的高度
5. ……

一系列問(wèn)題就不統(tǒng)統(tǒng)列舉出來(lái)了,基于這個(gè)背景我們結(jié)合數(shù)學(xué)建模的思維方式,找到了彈幕場(chǎng)景相似度非常高的機(jī)場(chǎng)運(yùn)營(yíng)。我們可以把彈幕當(dāng)做飛機(jī),每個(gè)時(shí)間段播放多少?gòu)椖缓蜋C(jī)場(chǎng)每個(gè)時(shí)間段放飛多少飛機(jī)一個(gè)道理。

首都國(guó)際機(jī)場(chǎng)一共有3條跑道,兩條4E級(jí)跑道、一條4F級(jí)跑道,2016年的吞吐量為9000萬(wàn)人次。它的運(yùn)行機(jī)制就是所有飛機(jī)通過(guò)搭臺(tái)有順序的共用3條跑道來(lái)完成運(yùn)輸任務(wù)的。

同理,我們也設(shè)計(jì)了幾個(gè)個(gè)角色:一個(gè)是軌道(跑道)、一個(gè)是調(diào)度(塔臺(tái))、一個(gè)是彈幕(飛機(jī)),我們?yōu)槊總€(gè)角色設(shè)計(jì)一個(gè)類分為為Track、Main、Bullet。

* 軌道
            
       軌道這個(gè)角色很重要,它可以解決彈幕位置計(jì)算、速度控制、碰撞檢測(cè)問(wèn)題。
       首先,我們要來(lái)初始化軌道。通俗的說(shuō)我們要修建幾個(gè)跑道呢,我們不是實(shí)物,可以動(dòng)態(tài)調(diào)整軌道的                        數(shù)量,計(jì)算的原則:
        軌道數(shù)量 = 播放器有效高度 / 設(shè)備基準(zhǔn)字號(hào)
    * 播放器有效高度:播放器的實(shí)際高度減去控制條的高度,因?yàn)閺椖徊豢梢哉趽蹩刂茥l。
    * 設(shè)備基準(zhǔn)字號(hào):移動(dòng)端是10px,pc端是12px;
        為啥計(jì)算公式是這樣的?因?yàn)槲覀円С植煌痔?hào)的彈幕。試想不同的字號(hào)對(duì)物理空間的占用是不同的,然而如果要求軌道的尺寸是動(dòng)態(tài)的,那就帶來(lái)很復(fù)雜的計(jì)算。本文提出“虛擬軌道”的概念,在交通管制中最常見的就是道路合并或者改向。我們也是采用將相鄰的物理軌道臨時(shí)合并為一條軌道。這樣就可以輕松的解決不同字號(hào)的軌道占用問(wèn)題。原理圖如下:
        

圖2.2 軌道計(jì)算示意圖

其次我們來(lái)回憶下機(jī)場(chǎng)的工作流程:
1. 機(jī)長(zhǎng)呼叫塔臺(tái),CZ6132請(qǐng)求起飛
    * 目前跑道均被占用,請(qǐng)等待
        * N時(shí)刻后再次執(zhí)行步驟1
    * 目前跑道 A1 空閑,準(zhǔn)許進(jìn)入
        * 執(zhí)行步驟3
2. 塔臺(tái)查看跑道使用情況
3. 進(jìn)入跑道,起飛完成
4. 機(jī)長(zhǎng)通知塔臺(tái),本次起飛完成,釋放跑道的占用
5. 其他飛機(jī)同樣執(zhí)行上述步驟

按照這個(gè)思路,我們的彈幕工作流程:
    
1. 彈幕進(jìn)入播放器
2. 軌道根據(jù)彈幕的播放速度、尺寸計(jì)算是否有合適的軌道提供
    * 沒(méi)有
        * 通知彈幕尚無(wú)合適軌道提供,請(qǐng)等待;同時(shí),彈幕隊(duì)列中的其他彈幕依次執(zhí)行步驟1
    * 有
        * 執(zhí)行步驟3
3. 播放器加載彈幕DOM,開始播放,待播放完成
4. 播放完成通知軌道更新軌道占用情況
5. 其他彈幕同樣執(zhí)行上述步驟

圖2.3 軌道可用性計(jì)算示意圖

 

關(guān)于軌道的基本原理我們整理清楚了,當(dāng)然還有不少細(xì)節(jié)比如如何和調(diào)度通信、如何和彈幕通信以及虛擬軌道檢測(cè)算法等。有興趣的同學(xué)可以參考代碼吧。https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js

* 彈幕
       彈幕基本是實(shí)現(xiàn)“飛機(jī)”的角色,我們要求它具有自身的屬性和方法。比如調(diào)度中心通過(guò)id能拿到它所有的基本信息,軌道控制也可以通過(guò)彈幕進(jìn)行檢查和更新。當(dāng)然彈幕也必須具備狀態(tài)自動(dòng)更新、移動(dòng)、播放結(jié)束通知、自動(dòng)銷毀等功能。
* 調(diào)度
        調(diào)度就是搭臺(tái)的化身,承接著軌道、彈幕的控制,也保持著與播放器的步調(diào)一致。它的職責(zé)如下:
    1. 播放器交互控制
    2. 彈幕隊(duì)列控制
    3. 自身狀態(tài)更新
    4. 數(shù)據(jù)格式轉(zhuǎn)換
    5. 動(dòng)畫執(zhí)行
        還是直接用流程圖來(lái)描述更直接些:
        
       

圖2.4 彈幕運(yùn)行機(jī)制流程圖

在彈幕啟動(dòng)之后,首先要檢查本地是否已有緩存數(shù)據(jù),沒(méi)有的話直接請(qǐng)求數(shù)據(jù)并緩存,然后執(zhí)行數(shù)據(jù)讀取,首次過(guò)濾數(shù)據(jù)進(jìn)入彈幕隊(duì)列,同時(shí)啟動(dòng)定時(shí)器。彈幕隊(duì)列的數(shù)據(jù)會(huì)定期請(qǐng)求軌道,檢測(cè)隊(duì)列里的彈幕是否可以進(jìn)入,一旦確認(rèn)后軌道做好登記,彈幕就可以進(jìn)入播放器開啟動(dòng)畫播放了。定時(shí)器每隔2秒就會(huì)再次更新數(shù)據(jù)進(jìn)入到彈幕隊(duì)列(這塊不同的業(yè)務(wù)可以定制不同的規(guī)則)。彈幕播放結(jié)束后會(huì)通知調(diào)度和軌道,調(diào)度會(huì)在彈幕隊(duì)列中移除該彈幕實(shí)例,軌道也會(huì)移除該彈幕實(shí)例的軌道占用。

藍(lán)藍(lán)設(shè)計(jì)www.sanmachine.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


8個(gè)步驟幫你掌握從用戶出發(fā)的創(chuàng)意腦暴法

濤濤

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

頭腦風(fēng)暴是創(chuàng)意點(diǎn)子常用的方法,那么從用戶出發(fā)的腦暴有什么不同?從過(guò)去幾年用研發(fā)現(xiàn)向產(chǎn)品方案轉(zhuǎn)化的腦暴案例中,總結(jié)成功與失敗經(jīng)驗(yàn),提煉出目前最優(yōu)的流程與執(zhí)行技巧,一起來(lái)提高創(chuàng)意點(diǎn)子產(chǎn)生的成功率吧!

關(guān)于新產(chǎn)品創(chuàng)新的成功率,有這樣一組數(shù)據(jù):3000個(gè)原始想法,能變成300個(gè)成熟想法,300個(gè)成熟想法能產(chǎn)生125個(gè)項(xiàng)目,其中大概有9個(gè)能進(jìn)入早期開發(fā),4個(gè)能大力開發(fā),最后成功的只有1.7個(gè)。(來(lái)自彭肯恩博士的研究)

大多數(shù)點(diǎn)子的失敗,可能的原因有很多,比如疏于對(duì)趨勢(shì)的關(guān)注和研究、缺乏理論的突破、缺乏執(zhí)行力、難以逃脫組織思維慣性等等(來(lái)自創(chuàng)新管理課程),其中還有一個(gè)常常提到的原因:離用戶太遠(yuǎn)。在最初想點(diǎn)子的時(shí)候,由于不知道用戶需求、腦補(bǔ)用戶需求、片面地針對(duì)用戶表面部分需求卻忽視深層需求來(lái)規(guī)劃,就會(huì)導(dǎo)致產(chǎn)品或功能開發(fā)完成以后,不知道目標(biāo)用戶、目標(biāo)場(chǎng)景,也不知道對(duì)用戶的價(jià)值,最終產(chǎn)品也會(huì)因用戶不去使用,而導(dǎo)致創(chuàng)新失敗。

作為用戶研究者,洞察和分析用戶真實(shí)需求是我們的本職和專長(zhǎng),但如何把這些用戶研究的發(fā)現(xiàn)以更有效的方式轉(zhuǎn)化為「靠譜」的好點(diǎn)子,則需要與團(tuán)隊(duì)里各個(gè)角色一起不斷的努力。從14年起,我們?cè)谝淮未螐挠醚邪l(fā)現(xiàn)到產(chǎn)品點(diǎn)子的頭腦風(fēng)暴實(shí)踐中,不斷優(yōu)化流程、評(píng)估效果,形成了現(xiàn)在的「從用戶出發(fā)的創(chuàng)意腦暴」流程,在這里分享給大家。

傳統(tǒng)的頭腦風(fēng)暴法(brainstorming)相信大家都熟悉,就是一組人圍在一起,隨意的將腦中與主題有關(guān)的見解提出來(lái),再將大家的見解分類整理。但在實(shí)際執(zhí)行的過(guò)程中,頭腦風(fēng)暴的現(xiàn)場(chǎng)卻常常交錯(cuò)著討論、腦補(bǔ)、推理、玩笑等等,然后時(shí)間很快過(guò)去,卻沒(méi)有產(chǎn)出「靠譜」的點(diǎn)子。從用戶出發(fā)的創(chuàng)意腦暴,是以典型用戶故事為線索,輕松、的產(chǎn)出點(diǎn)子的頭腦風(fēng)暴過(guò)程:一方面,線索契合用戶真實(shí)完整的需求場(chǎng)景,點(diǎn)子變得更容易想也更符合用戶需求;另一方面,通過(guò)流程上的細(xì)節(jié)設(shè)計(jì),可以更的激發(fā)點(diǎn)子產(chǎn)生。

整個(gè)過(guò)程分為8步。雖然常常的情況是一個(gè)人想不出方案,就馬上拉人一起腦暴發(fā)散,但其實(shí)腦暴前的素材和流程準(zhǔn)備,以及達(dá)成共識(shí)對(duì)腦暴的最終效果起到了至關(guān)重要的作用。

第一步:確定一個(gè)不遠(yuǎn)不近的腦暴主題

產(chǎn)生好點(diǎn)子的前提是問(wèn)對(duì)問(wèn)題,問(wèn)對(duì)問(wèn)題需要跳出眼前的思維限制,但又不要太天馬行空。要做到這點(diǎn)并不容易,這要求腦暴的組織者在一開始就想清楚團(tuán)隊(duì)真正要解決的問(wèn)題是什么,而不僅僅「產(chǎn)品的某個(gè)功能眼下要怎么做」這種具體問(wèn)題(這樣的問(wèn)題聽起來(lái)就讓人疲憊)。舉個(gè)例子,當(dāng)眼前的業(yè)務(wù)問(wèn)題是想出一些裝扮功能,如果把腦暴的主題定為「裝扮還可以做哪些新功能」,思路就會(huì)陷入現(xiàn)有的裝扮流程里,這時(shí)點(diǎn)子的方向已經(jīng)被具象和限制,有時(shí)甚至是無(wú)解的;如果定為「如何幫助用戶通過(guò)裝扮來(lái)表達(dá)自己」(前提是用戶真的用裝扮在滿足這一需求)就會(huì)更合適一些,這樣就可以去想如何通過(guò)裝扮表達(dá)自己的心情、興趣、狀態(tài)、、所屬群體身份等等,思路打開的同時(shí)又與業(yè)務(wù)結(jié)合;而如果僅僅是「用戶如何表達(dá)自己」,想出的點(diǎn)子,就會(huì)太泛,脫離業(yè)務(wù)。

第二步:有選擇的邀請(qǐng)團(tuán)隊(duì)成員

首先,有選擇的邀請(qǐng)樂(lè)于分享、樂(lè)于溝通、思維活躍的人,他們會(huì)自然而然的產(chǎn)生想法,互相交流,否則每個(gè)人盯著自己的點(diǎn)子說(shuō)著自己的故事就會(huì)喪失一組人在一起的意義;其次,在邀請(qǐng)成員時(shí),不建議只有自己組的組員(雖然這樣比較方便),因?yàn)閰⑴c角色的多樣性一方面可以相互激發(fā)創(chuàng)意,同時(shí)也讓點(diǎn)子在收斂階段能得到更多元的評(píng)價(jià)(比如工程師對(duì)點(diǎn)子可行性的評(píng)估就有其專業(yè)的判斷)。在人數(shù)上,雖然6-8人是腦暴的建議人數(shù),但因?yàn)槲覀兊哪X暴流程會(huì)讓點(diǎn)子批量產(chǎn)生,人數(shù)的增加會(huì)直接導(dǎo)致后續(xù)點(diǎn)子收斂時(shí)效率的降低,所以目前來(lái)看建議6人為佳。

第三步:準(zhǔn)備簡(jiǎn)潔又有代表性的用戶故事

用戶故事的準(zhǔn)備是腦暴的一個(gè)關(guān)鍵,吸引著我們不斷的去改進(jìn)和探尋。過(guò)去,我們也有過(guò)一些不太理想的嘗試:讓參與者分享自己的故事(如畢業(yè)生如何找房),這時(shí)很容易就根據(jù)主觀和片面的需求想點(diǎn)子;給出一些用戶需求的詞讓大家聯(lián)想(如不孤單),這時(shí)參與者對(duì)著普通又太正確的詞已經(jīng)想過(guò)很多遍,很難進(jìn)入狀態(tài);給出一系列相關(guān)故事(如多個(gè)類似的故事)幫參與者發(fā)想,這時(shí)呈現(xiàn)的信息對(duì)參與者來(lái)說(shuō)已經(jīng)過(guò)于復(fù)雜,傳達(dá)的效率很低;給出的每個(gè)故事都帶有用戶痛點(diǎn)(如粉絲給明星發(fā)消息得不到回應(yīng)),這時(shí)參與者往往會(huì)依照故事中的情節(jié)去推理,絞盡腦汁非常辛苦,卻忽略了沒(méi)有痛點(diǎn)的地方藏著用戶的真實(shí)需求(如粉絲默默的把想對(duì)明星說(shuō)的話記錄在手機(jī)備忘里)。

所以,目前的做法是:

  • 對(duì)調(diào)研中收集到的大量用戶原始故事進(jìn)行分析;
  • 根據(jù)分析點(diǎn)之間的相互關(guān)系,按照一定的維度把分析點(diǎn)組織起來(lái),比如組織成幾類典型的用戶畫像、使用產(chǎn)品的幾類動(dòng)機(jī)、幾個(gè)場(chǎng)景、幾步行為流程等等,組織維度符合 MECE( Mutually Exclusive Collectively Exhaustive,相互獨(dú)立、完全窮盡)原則即可;
  • 按照組織后的結(jié)構(gòu)(如畫像/動(dòng)機(jī)/場(chǎng)景/流程等),把同一個(gè)類別下多個(gè)反映分析點(diǎn)的真實(shí)故事組合改編成一個(gè)典型故事。

舉例來(lái)看,研究粉絲的過(guò)程中,我們發(fā)現(xiàn)有的粉絲會(huì)組團(tuán)給偶像投票打榜并感嘆「團(tuán)結(jié)就是力量」、有的粉絲會(huì)在活動(dòng)現(xiàn)場(chǎng)和他人一起大聲應(yīng)援并覺得暖心、有的粉絲在 QQ群和其他粉絲一起討論相互訴說(shuō)并且感覺很棒。這些故事都反映出粉絲對(duì)于「群體」、「團(tuán)結(jié)」的訴求,將這幾個(gè)不同人的真實(shí)故事綜合起來(lái),就形成了一個(gè)特別在意「團(tuán)結(jié)形象」的典型粉絲故事。這個(gè)「團(tuán)結(jié)」的典型故事和「秩序」、「強(qiáng)大」等等典型故事一起反映了粉絲「群體形象」方面的訴求。

通過(guò)這樣的方式得到的典型故事不僅有真實(shí)故事的細(xì)節(jié),而且嚴(yán)謹(jǐn)?shù)胤从秤脩粜枨?,信息量大,結(jié)構(gòu)完整。腦暴參與者面對(duì)這些故事,就很容易理解,并聯(lián)想出更多符合用戶真實(shí)需求的點(diǎn)子。整個(gè)過(guò)程說(shuō)起來(lái)簡(jiǎn)單,但在實(shí)際執(zhí)行時(shí)卻考驗(yàn)著研究人員的大局觀、邏輯能力、洞察力、組織能力等等,整個(gè)研究過(guò)程有時(shí)可能會(huì)需要1-2個(gè)月。

第四步:設(shè)置嚴(yán)謹(jǐn)又輕松的流程

在腦暴流程上的設(shè)置上,主要的嘗試點(diǎn)在個(gè)人想點(diǎn)子和大家交流點(diǎn)子的方式和順序安排。如果大家同時(shí)一邊想一邊交流,會(huì)出現(xiàn)沒(méi)空思考或有人不認(rèn)真想的情況;如果大家先寫再輪流說(shuō),會(huì)出現(xiàn)思考時(shí)獨(dú)立思考,交流時(shí)只關(guān)心自己的說(shuō)法而忽視交流發(fā)散的情況。所以在嘗試了默寫式頭腦風(fēng)暴(后文會(huì)詳細(xì)介紹)后,我們就沿用了這個(gè)鼓勵(lì)思考交流、弱化發(fā)言的腦暴方式。

另外要注意的一個(gè)點(diǎn)是,不用在流程上對(duì)想點(diǎn)子的思路有過(guò)多的限制,比如告訴參與者「你可以先想什么再想什么」或「你想出的點(diǎn)子不能太抽象或太具體」,這種「急功近利」的做法會(huì)讓參與者困惑和緊張。相反的,應(yīng)該要做的是讓他們放松,比如放一些音樂(lè)、擺一些零食等等,這樣更容易產(chǎn)生想法。

第五步:在正式腦暴前,達(dá)成共識(shí)

在腦暴前,向參與者說(shuō)明本次腦暴的目的、主題、流程和規(guī)則,能夠幫助大家統(tǒng)一目標(biāo),提率。

頭腦風(fēng)暴的四個(gè)基本規(guī)則在腦暴過(guò)程中要落到實(shí)處:

  • 追求數(shù)量(可設(shè)置一個(gè)小榮譽(yù)激勵(lì)大家想點(diǎn)子);
  • 禁止批評(píng)(包括負(fù)面的表情或語(yǔ)氣詞都不能有);
  • 提倡獨(dú)特的想法(可以異想天開、天馬行空);
  • 綜合并改善設(shè)想(可以在別人的基礎(chǔ)上寫新的點(diǎn)子)。

組織者也可以給出一些用戶研究的發(fā)現(xiàn),幫助大家建立概念、了解用戶。

第六步:默寫式頭腦風(fēng)暴

默寫式頭腦風(fēng)暴是在奧斯本頭腦風(fēng)暴的基礎(chǔ)上改造而成的一種書面腦暴方法(具體操作方式如下圖)。從用戶出發(fā)的創(chuàng)意腦暴在此基礎(chǔ)上,增加了用戶的典型故事作為線索。在開始前,每個(gè)參與者會(huì)拿到3張用戶典型故事卡;在第一個(gè)5分鐘,每人針對(duì)3個(gè)故事各寫至少1個(gè)點(diǎn)子,貼在故事卡上,然后傳給右鄰;第二個(gè)5分鐘,每人從傳來(lái)的故事卡和前人的點(diǎn)子上得到啟發(fā),再各寫至少1個(gè)點(diǎn)子,傳給右鄰;這樣直到故事傳完,就能得到至少6 x 3 x 6=108個(gè)點(diǎn)子。這也是為什么前面提到要控制參與者人數(shù)的原因,因?yàn)槊吭黾?人,就會(huì)多一輪腦暴的時(shí)間,點(diǎn)子的數(shù)量會(huì)相應(yīng)增加,在下一步分類交流時(shí)的工作量和時(shí)間也會(huì)直接增加。

第七步:點(diǎn)子現(xiàn)場(chǎng)收斂

在已經(jīng)有了一百多個(gè)點(diǎn)子的情況下,現(xiàn)場(chǎng)投票可以快速把「好點(diǎn)子」篩出來(lái)。但由于在寫點(diǎn)子的時(shí)候,把想法準(zhǔn)確的表達(dá)在一張便簽紙上并不是一件容易的事,所以在投票前,還是會(huì)有一個(gè)簡(jiǎn)單的交流,讓大家了解彼此的點(diǎn)子,同時(shí)合并類似的點(diǎn)子。

投票分為感性輪和理性輪:感性輪是讓人眼前一亮的點(diǎn)子,每人3票;理性輪是可行或能有效提升業(yè)績(jī)的點(diǎn)子,也是每人3票。這樣兩個(gè)維度交叉出來(lái)就能得到既讓人眼前一亮,又具有可行性的點(diǎn)子。參與者多樣的背景也讓點(diǎn)子的評(píng)估更加全面。

第八步:點(diǎn)子的后續(xù)跟進(jìn)

腦暴結(jié)束并不是點(diǎn)子的結(jié)束。最初的點(diǎn)子只是一句話或一個(gè)示意圖,從點(diǎn)子走向方案,還需要不斷地打磨交互、視覺、文案、邏輯、場(chǎng)景等等方面的細(xì)節(jié);從方案到投入開發(fā)乃至上線,則需要綜合考慮優(yōu)先級(jí)、人力、技術(shù)等更多方面的問(wèn)題;在上線后,點(diǎn)子的可用性以及對(duì)業(yè)務(wù)的效果,也需要提前規(guī)劃和進(jìn)一步驗(yàn)證。

總的來(lái)說(shuō),從用戶出發(fā)的創(chuàng)意腦暴,在線索和流程設(shè)計(jì)上做出了一些嘗試,讓產(chǎn)生的想法更加符合用戶真實(shí)需求,以此來(lái)提高創(chuàng)新點(diǎn)子的成功率。但創(chuàng)新畢竟不是一件容易的事,在未來(lái),我們也會(huì)不斷地嘗試和打磨這個(gè)流程,思考更好的方式,讓創(chuàng)新有跡可循。

藍(lán)藍(lán)設(shè)計(jì)www.sanmachine.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

日歷

鏈接

個(gè)人資料

存檔