超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

首頁(yè)

如何創(chuàng)建人物插圖——2018年世界杯版

博博


如何創(chuàng)建人物插圖——2018年世界杯版 

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


五步創(chuàng)作2018世界杯超級(jí)球星插畫


2018年世界杯賽正在如火如荼地進(jìn)行,為了以示慶祝,我們挑選了來(lái)自多個(gè)國(guó)家的25位超級(jí)明星,給他們創(chuàng)作人物插圖,送給廣大球迷們。在創(chuàng)作過(guò)程中,Leo Natsume&Daniel Nyari給了我們很多靈感,非常感謝!


為了準(zhǔn)確地畫出每個(gè)球星的面部結(jié)構(gòu)特征,一開(kāi)始收集材料的時(shí)候就要收集的全一些。我們要從照片中提取每位球星的準(zhǔn)確特征,這樣最后做出來(lái)的插畫才能“形神兼?zhèn)洹?,才能非常生?dòng)。

讓我們一起來(lái)看看設(shè)計(jì)思考的過(guò)程吧。



    

第一步


觀察人物要從不同角度來(lái)看——正面,45度和側(cè)面輪廓。此外,我們還需要收集不同面部表情的照片,比如沖刺的時(shí)候、休息的時(shí)候、微笑的時(shí)候等,才能更了解人物。做設(shè)計(jì),我們不僅要看到“形”,還要看到“神”,多了解人物的個(gè)性和習(xí)慣有助于我們做出更有靈魂的設(shè)計(jì)創(chuàng)意。





第二步


接下來(lái),我們要根據(jù)剛剛從不同角度做的人物分析總結(jié)一般面部結(jié)構(gòu)和特征。我們以梅西為例,他留著經(jīng)典的復(fù)古發(fā)型、大耳朵、小而有神的眼睛。當(dāng)然,為了保持插圖最終的統(tǒng)一性,所有人物的視線水平需要保持一致,并且應(yīng)該根據(jù)人臉的長(zhǎng)度和寬度以及發(fā)型進(jìn)行調(diào)整。






第三步


通過(guò)前兩個(gè)步驟之后,現(xiàn)在我們已經(jīng)有了人物的主要圖像了。現(xiàn)在,可以開(kāi)始考慮人物的種族,膚色,發(fā)型和制服的顏色了,這樣有助于做出原汁原味的人物視覺(jué)。同時(shí),我們必須調(diào)整整體色調(diào)來(lái)調(diào)節(jié)亮度和飽和度的差異。





第四步


這是最關(guān)鍵的一步。完成以上所有操作后,就可以根據(jù)前面步驟中收集的照片選擇每個(gè)球星最具特色的面部表情。例如,梅西微笑著輕輕抬起頭的樣子最吸引人,我們就選這個(gè)表情。







第五步


這是最后一步,我們將做細(xì)節(jié)的調(diào)整,包括人物的整體圖像結(jié)構(gòu)、顏色對(duì)比度、面部元素之間的比例等。然后再添加其他內(nèi)容,如條紋、耐克/阿迪達(dá)斯徽標(biāo)和其他此類細(xì)節(jié)。最后,將設(shè)計(jì)草稿縮小200%,以確定某些地方的設(shè)計(jì)是否足夠亮。





經(jīng)過(guò)上述五個(gè)步驟之后,我們的球星插畫就出爐啦。我們一共設(shè)計(jì)了25位球星插畫,挑選部分比較好的展示一下。And,祝大家看世界杯愉快!



























作者:Queble

翻譯:熊小熊

原文鏈接:https://uxplanet.org/how-to-create-character-illustrations-2018-world-cup-edition-8a709dcfd589


藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專注而深入的界面設(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ì)(上篇):18種樣式,與你分享

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(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è)的方式,目前較為常見(jiàn)的可以選擇如下方式。

表格樣式一:分頁(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.miumiuwan.com )是一家專注而深入的界面設(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ì)(上篇):18種樣式,與你分享

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(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è)的方式,目前較為常見(jiàn)的可以選擇如下方式。

表格樣式一:分頁(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.miumiuwan.com )是一家專注而深入的界面設(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)聽(tīng) 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.miumiuwan.com )是一家專注而深入的界面設(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ì)師都在用的視覺(jué)動(dòng)線技巧

資深UI設(shè)計(jì)者

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

作為設(shè)計(jì)師,我們需要很好的控制用戶在使用產(chǎn)品過(guò)程中,他們?yōu)g覽的路徑,需要了解我們的眼睛是如何處理信息,本周我會(huì)結(jié)合我之前學(xué)習(xí)的一些知識(shí)和大家分享下視覺(jué)動(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.miumiuwan.com )是一家專注而深入的界面設(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è)以交互見(jiàn)長(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 彈幕效果

 

開(kāi)場(chǎng)之前我們先來(lái)描述彈幕開(kā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ì)算。本文提出“虛擬軌道”的概念,在交通管制中最常見(jiàn)的就是道路合并或者改向。我們也是采用將相鄰的物理軌道臨時(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,開(kāi)始播放,待播放完成
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)入播放器開(kāi)啟動(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.miumiuwan.com )是一家專注而深入的界面設(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è)人資料

存檔