亚洲精品视频在线观看视频,蜜芽TV影院在线视频,欧美另类极品videosbest

252018-7

如何創建人物插圖——2018年世界杯版

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

五步創作2018世界杯超級球星插畫

2018年世界杯賽正在如火如荼地進行，為了以示慶祝，我們挑選了來自多個國家的25位超級明星，給他們創作人物插圖，送給廣大球迷們。在創作過程中，Leo Natsume＆Daniel Nyari給了我們很多靈感，非常感謝！

為了準確地畫出每個球星的面部結構特征，一開始收集材料的時候就要收集的全一些。我們要從照片中提取每位球星的準確特征，這樣最后做出來的插畫才能“形神兼備”，才能非常生動。

讓我們一起來看看設計思考的過程吧。

第一步

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

第二步

接下來，我們要根據剛剛從不同角度做的人物分析總結一般面部結構和特征。我們以梅西為例，他留著經典的復古發型、大耳朵、小而有神的眼睛。當然，為了保持插圖最終的統一性，所有人物的視線水平需要保持一致，并且應該根據人臉的長度和寬度以及發型進行調整。

第三步

通過前兩個步驟之后，現在我們已經有了人物的主要圖像了。現在，可以開始考慮人物的種族，膚色，發型和制服的顏色了，這樣有助于做出原汁原味的人物視覺。同時，我們必須調整整體色調來調節亮度和飽和度的差異。

第四步

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

第五步

這是最后一步，我們將做細節的調整，包括人物的整體圖像結構、顏色對比度、面部元素之間的比例等。然后再添加其他內容，如條紋、耐克/阿迪達斯徽標和其他此類細節。最后，將設計草稿縮小200％，以確定某些地方的設計是否足夠亮。

經過上述五個步驟之后，我們的球星插畫就出爐啦。我們一共設計了25位球星插畫，挑選部分比較好的展示一下。And,祝大家看世界杯愉快！

作者：Queble

翻譯：熊小熊

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

藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3363)

252018-7

表格設計（上篇）：18種樣式，與你分享

濤濤

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

表格樣式一

表格樣式主要分為兩大類，第一類表格中通常以一行為組，操作均是以組為單位進行。此類表格優點是簡單直觀，操作感強，可提前設定好計算公式；缺點是對于某一數據的批量操作較為復雜，不方便自定義復雜計算。

常用于信息展示，無需復雜計算的網頁和C端界面中。

表格樣式一：縫隙

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

表格樣式一：斑馬線

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

表格樣式一：按鈕

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

表格樣式一：拖拽

因為單行是一個模塊，當有需要調整順序時可以支持整行的拖拽操作。

表格樣式一：分頁1

當內容較多需要除了無限滾動外，還可以選用分頁的方式，目前較為常見的可以選擇如下方式。

表格樣式一：分頁2

若不需要突出頁碼，主要查看都在第一頁上時可以考慮將放在角落里，到達首頁和到達尾頁根據產品需求決定是否使用。

表格樣式一：搜索

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

表格樣式一：分項搜索

對比必要的分項搜索功能可以對應到各個列中，同時輸入時可以給出聯想結果，仍然應該設計為模糊搜索。

表格樣式一：篩選

對于各個列中必須精準搜索的數據可以設計為篩選功能，可為用戶提供可勾選的篩選信息。

表格樣式一：高級篩選

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

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

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

表格樣式一：信息預覽（浮窗）

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

表格樣式一：信息預覽（彈窗+蒙板）

對于詳細有部分屬性修改需求，對于細節沒有修改需求的，可以考慮在一側彈出彈框進行展示和修改屬性。（如報價單表格信息，報價單審核狀態的可以在此修改，詳細信息仍在明細表中修改）

表格樣式一：信息預覽（折疊）

折疊模式的使用環境基本等同于彈出模式，可根據設計風格進行選擇。

表格樣式一：信息預覽（彈窗）

單獨彈出窗口在需要有多項數據進行對比查看時可以選用，彈出窗體操作通常只考慮狀態改變，不建議其他數據在此更改。

表格樣式一：信息預覽（變導航）

此種展示方式，對于需要查看和修改較多數據的需求可以選中，匯總表將收為類似于導航欄的模式，數據可以精簡只展示關鍵數據，彈窗可設計復雜操作，可以包含明細的修改等功能。

表格樣式一：信息預覽（變窗體結構）

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

表格樣式一：信息預覽（自定義表頭）

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

后續

上篇中主要展示了一些表格樣式一的一些操作習慣，除此之外還會在很多專業工具的設計中用到另一種展現形式類似于EXCEL表格。

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

藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(9334)

252018-7

表格設計（上篇）：18種樣式，與你分享

濤濤

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

表格樣式一

表格樣式主要分為兩大類，第一類表格中通常以一行為組，操作均是以組為單位進行。此類表格優點是簡單直觀，操作感強，可提前設定好計算公式；缺點是對于某一數據的批量操作較為復雜，不方便自定義復雜計算。

常用于信息展示，無需復雜計算的網頁和C端界面中。

表格樣式一：縫隙

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

表格樣式一：斑馬線

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

表格樣式一：按鈕

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

表格樣式一：拖拽

因為單行是一個模塊，當有需要調整順序時可以支持整行的拖拽操作。

表格樣式一：分頁1

當內容較多需要除了無限滾動外，還可以選用分頁的方式，目前較為常見的可以選擇如下方式。

表格樣式一：分頁2

若不需要突出頁碼，主要查看都在第一頁上時可以考慮將放在角落里，到達首頁和到達尾頁根據產品需求決定是否使用。

表格樣式一：搜索

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

表格樣式一：分項搜索

對比必要的分項搜索功能可以對應到各個列中，同時輸入時可以給出聯想結果，仍然應該設計為模糊搜索。

表格樣式一：篩選

對于各個列中必須精準搜索的數據可以設計為篩選功能，可為用戶提供可勾選的篩選信息。

表格樣式一：高級篩選

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

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

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

表格樣式一：信息預覽（浮窗）

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

表格樣式一：信息預覽（彈窗+蒙板）

對于詳細有部分屬性修改需求，對于細節沒有修改需求的，可以考慮在一側彈出彈框進行展示和修改屬性。（如報價單表格信息，報價單審核狀態的可以在此修改，詳細信息仍在明細表中修改）

表格樣式一：信息預覽（折疊）

折疊模式的使用環境基本等同于彈出模式，可根據設計風格進行選擇。

表格樣式一：信息預覽（彈窗）

單獨彈出窗口在需要有多項數據進行對比查看時可以選用，彈出窗體操作通常只考慮狀態改變，不建議其他數據在此更改。

表格樣式一：信息預覽（變導航）

此種展示方式，對于需要查看和修改較多數據的需求可以選中，匯總表將收為類似于導航欄的模式，數據可以精簡只展示關鍵數據，彈窗可設計復雜操作，可以包含明細的修改等功能。

表格樣式一：信息預覽（變窗體結構）

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

表格樣式一：信息預覽（自定義表頭）

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

后續

上篇中主要展示了一些表格樣式一的一些操作習慣，除此之外還會在很多專業工具的設計中用到另一種展現形式類似于EXCEL表格。

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

藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(3897)

252018-7

設計大師眼中的設計

藍藍設計的小編

為了創作出獨特的東西，你的所有大腦神經必須集中在微小的細節上。

評論(0) 瀏覽(4147)

242018-7

效果

遮罩層為一張邊框樣式圖（如下圖）：

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

實現原理

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

上代碼

注冊事件 /** * 增加滾輪滾動事件（暫時只實現了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.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3673)

242018-7

連BAT設計師都在用的視覺動線技巧

濤濤

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作為設計師，我們需要很好的控制用戶在使用產品過程中，他們瀏覽的路徑，需要了解我們的眼睛是如何處理信息，本周我會結合我之前學習的一些知識和大家分享下視覺動線這個概念，以及如何在設計中進行運用！學習過程紅大家任何不明白地方，歡迎加我微信交流:uiskyss

藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(3489)

242018-7

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

藍藍設計的小編

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

評論(0) 瀏覽(4603)

232018-7

前端算法之彈幕設計

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.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3344)

232018-7

非科班設計教主陳幼堅的故事—香港設計史（下集）

鶴鶴

陳幼堅不是學設計的，你相信嗎？

評論(0) 瀏覽(6634)

232018-7

教父靳埭強的故事——香港設計史（中集）

鶴鶴

時代孕育的一代宗師！

評論(0) 瀏覽(5407)

首頁

如何創建人物插圖——2018年世界杯版

表格樣式一

表格樣式一：縫隙

表格樣式一：斑馬線

表格樣式一：按鈕

表格樣式一：拖拽

表格樣式一：分頁1

表格樣式一：分頁2

表格樣式一：搜索

表格樣式一：分項搜索

表格樣式一：篩選

表格樣式一：高級篩選

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

表格樣式一：信息預覽（浮窗）

表格樣式一：信息預覽（彈窗+蒙板）

表格樣式一：信息預覽（折疊）

表格樣式一：信息預覽（彈窗）

表格樣式一：信息預覽（變導航）

表格樣式一：信息預覽（變窗體結構）

表格樣式一：信息預覽（自定義表頭）

后續

表格樣式一

表格樣式一：縫隙

表格樣式一：斑馬線

表格樣式一：按鈕

表格樣式一：拖拽

表格樣式一：分頁1

表格樣式一：分頁2

表格樣式一：搜索

表格樣式一：分項搜索

表格樣式一：篩選

表格樣式一：高級篩選

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

表格樣式一：信息預覽（浮窗）

表格樣式一：信息預覽（彈窗+蒙板）

表格樣式一：信息預覽（折疊）

表格樣式一：信息預覽（彈窗）

表格樣式一：信息預覽（變導航）

表格樣式一：信息預覽（變窗體結構）

表格樣式一：信息預覽（自定義表頭）

后續

效果

實現原理

上代碼

分類

日歷

鏈接

個人資料

存檔