欧美另类z0zxx免费观看_午夜爱爱毛片xxxx视频免费看_午夜 ,制服丝袜人妻专区_99热在线精品免费全部_国产欧色美视频综合二区_人妻少妇精品视频专区v

首頁

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

濤濤

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

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

表格樣式一

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

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

表格樣式一:縫隙

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

表格樣式一:斑馬線

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

表格樣式一:按鈕

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

表格樣式一:拖拽

因為單行是一個模塊,當(dāng)有需要調(diào)整順序時可以支持整行的拖拽操作。

表格樣式一:分頁1

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

表格樣式一:分頁2

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

表格樣式一:搜索

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

表格樣式一:分項搜索

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

表格樣式一:篩選

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

表格樣式一:高級篩選

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

后續(xù)

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

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

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

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

濤濤

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

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

表格樣式一

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

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

表格樣式一:縫隙

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

表格樣式一:斑馬線

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

表格樣式一:按鈕

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

表格樣式一:拖拽

因為單行是一個模塊,當(dāng)有需要調(diào)整順序時可以支持整行的拖拽操作。

表格樣式一:分頁1

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

表格樣式一:分頁2

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

表格樣式一:搜索

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

表格樣式一:分項搜索

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

表格樣式一:篩選

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

表格樣式一:高級篩選

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

后續(xù)

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

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

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

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

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

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

遮罩層上滾動,使下方的列表隨之滾動

seo達(dá)人

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

效果

這里寫圖片描述

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

這里寫圖片描述

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

實現(xiàn)原理

注冊最上面遮罩層的滾動事件,拿到滾動滾動方向,然后控制列表滾動的方向和距離

上代碼

注冊事件 /**
 * 增加滾輪滾動事件(暫時只實現(xiàn)了chrome的滾動效果)
 * @param modalDomId 遮罩層domId
 * @param domId 需要滾動下層列表domId
 */ addMousewheelListener(modalDomId:string,domId:string){ //添加頁面監(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","你想要滾動的列表id");
藍(lán)藍(lán)設(shè)計www.kadanni.com.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

連BAT設(shè)計師都在用的視覺動線技巧

濤濤

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

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

請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖

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

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

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

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

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

seo達(dá)人

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

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

圖1.1 彈幕效果

 

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

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

***如何保證不同字號的彈幕不碰撞***

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

***彈幕的位置計算***

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

圖2.1 彈幕管理示意圖

 

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

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

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

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

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

圖2.2 軌道計算示意圖

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

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

圖2.3 軌道可用性計算示意圖

 

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

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

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

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

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


非科班設(shè)計教主陳幼堅的故事—香港設(shè)計史(下集)

鶴鶴

陳幼堅不是學(xué)設(shè)計的,你相信嗎?

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

濤濤

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

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

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

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

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

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

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

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

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

第二步:有選擇的邀請團(tuán)隊成員

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

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

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

所以,目前的做法是:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.kadanni.com.cn

存檔