分享火爆Dribbble和Ins的設計趨勢
相信最近很多小伙伴在逛Dribbble時候，發現最近流行一波新的設計風格，和以往不同的是，這次趨勢又回到之前擬物化了，但它與純擬物化還是有區別的，現在它有一個流行詞語叫“新擬態”，今天就和大家分享下國外一位設計師對這個趨勢的看法！
雖然UI以各種擬態化的形式存在（例如，您的桌面OS垃圾桶），現在這種風格的趨勢更加明顯。正如卡米爾·法拉納（Kamil Falana）指出的那樣，從無生命的“表達”到現實主義的過渡開始出現。
不久前，我們還觀察到，這種變化開始在我們身邊發生，蘋果（IOS13系統）就是一個很好的例子。向最小化設計和輕擬物化發展，最終帶來了無紋理3d視覺感官。受到了大家的喜歡，來看一張高清圖。
如下圖設計風格，在dribbble上獲得認可度比較高！
Dribbble用戶alexplyuto的作品獲得了四千多次贊，并帶動了這一趨勢。
備注：可看出目前扁平化設計過于雷同，用戶審美疲勞。偶爾出現新設計趨勢風格，反而更個給各位設計師們帶來新鮮感！
新風格的特征點
-
由于按鈕的視覺表現看著變化不大（因為小了一些，不直觀），因此我們將重點放在實際的卡片概念上，以使這種視覺表現更能直觀感受出來
-
這種風格的主要好處是“新鮮”（至少持續很長時間）。它為界面帶來了“新感覺”，并使其脫穎而出。它也可以與其他樣式混合使用，這樣就避免很呆板整個畫面變成這種柔軟凸起的效果。
到目前為止，有一些問題需要解決。我們發現了兩個主要問題：
1. 可見性
2. 易用性
- 可見性
圖形與背景對比度的主要問題是，當它們都是相同的顏色時，就沒有可測量的對比度；客觀上存在陰影，因此我們可以近似并嘗試測量其外部的第一個像素。在上面的示例中，我們得出了這些對比度值。
而且由于幾乎沒有人會嘗試使用如此強烈的陰影，這意味著其余UI元素必須可訪問。這種假設得出的結論是，如果我們通過版式，相近度和與重要元素的對比來進行正確的層次劃分，那么這些卡片/凸起的塑料卡片并不那么重要。
尚未對此進行測試（我將嘗試找到時間做這件事），但現在我們假設下面元素的兩個“版本”均為“確定”。即使有些人看不到陰影，也有足夠的對比度讓他們看到圖標并“使用它”。
- 易用性
僅僅是卡片嗎？
但是，如果我們決定將組件用作按鈕而不是卡片，則會出現可訪問性的主要問題。
我們可以像下面的示例一樣輕松創建帶有內部陰影的按下狀態。
對比度測試
此按下狀態的對比度太小，不足以表示差異。是否可以通過改變的其余部分來表達按鈕的狀態，這里有一些想法，例如使用輪廓和填充圖標，下劃線或甚至用顏色填充按下狀態。
開發實現其實它比我們認為的在CSS中實現“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin，但我認為這不應該成為問題。
https://neumorphism.io/#55b9f3（實現新擬態效果CSS代碼）
您可以輕松地將可開發的設計與這些卡片形狀組合在一起（新擬態卡片），從而獲得很好的效果。
-
盡管這一新趨勢影響了許多設計師，但對比以前使用的卡片組件可訪問性問題相比，它的問題并不那么嚴重。
所以去瘋狂的順應這一趨勢，并對其進行調整以使其成為您的趨勢。UI設計師的工作就是需要不斷來回挑戰自我，探索潮流，以符合產品審美。如果沒有這種不斷的探索的精神，所有產品將再次看起來相同，同質化嚴重。
-
本篇文章，作者通過對新擬態設計趨勢分析，在文中提及“新擬態”和以前材料卡片的區別，同時證實了新擬態風格優勢！但也存在一定的弊端！如何去權衡與設計的把控，需要設計師們多去研究探索！
如今新擬態才初出茅廬，還未被廣泛使用，需要有先驅者引領。畢竟國內的環境大家都不敢冒險去嘗試運用到線上！
css 偽類是用于向某些選擇器添加特殊的效果，是動態的，指當前元素所處的狀態或者特性。只有一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。
這篇文章在一定程度上鼓勵你在構建UI時使用更簡單的CSS和更少的 JS。熟悉 CSS 所提供的一切是實現這一目標的一種方法，另一種方法是實現最佳實踐并盡可能多地重用代碼。
接下介紹一些大家可能還不熟悉的一些偽類及其用例，希望對大家日后有所幫助。
::first-line | 選擇文本的第一行
::first-line 偽元素在某塊級元素的第一行應用樣式。第一行的長度取決于很多因素，包括元素寬度，文檔寬度和文本的文字大小。
::first-line 偽元素只能在塊容器中,所以,::first-line偽元素只能在一個display值為block, inline-block, table-cell 或者 table-caption中有用。在其他的類型中，::first-line 是不起作用的。
用法如下：
p:first-line {
color: lightcoral;
}
::first-letter | 選擇這一行的第一字
CSS 偽元素 ::first-letter會選中某塊級元素第一行的第一個字母。用法如下：
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不斷努，終身學習者！</p>
clipboard.png
::selection| 被用戶高亮的部分
::selection 偽元素應用于文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。
div::selection {
color: #409EFF;
}
clipboard.png
:root | 根元素
:root 偽類匹配文檔樹的根元素。對于 HTML 來說，:root 表示 <html> 元素，除了優先級更高之外，與 html 選擇器相同。
在聲明全局 CSS 變量時 :root 會很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:empty | 僅當子項為空時才有作用
:empty 偽類代表沒有子元素的元素。子元素只可以是元素節點或文本（包括空格）,注釋或處理指令都不會產生影響。
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>
clipboard.png
只有第一個和第二個div有作用，因為它們確實是空的，第三個 div 沒有作用，因為它有一個換行。
:only-child | 只有一個子元素才有作用
:only-child 匹配沒有任何兄弟元素的元素.等效的選擇器還可以寫成 :first-child:last-child或者:nth-child(1):nth-last-child(1),當然,前者的權重會低一點。
p:only-child{
background: #409EFF;
}
<div>
<p>第一個沒有任何兄弟元素的元素</p>
</div>
<div>
<p>第二個</p>
<p>第二個</p>
</div>
clipboard.png
:first-of-type | 選擇指定類型的第一個子元素
:first-of-type表示一組兄弟元素中其類型的第一個元素。
.innerDiv p:first-of-type {
color: orangered;
}
上面表示將 .innerDiv 內的第一個元素為 p 的顏色設置為橘色。
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:last-of-type | 選擇指定類型的最后一個子元素
:last-of-type CSS 偽類 表示了在（它父元素的）子元素列表中，最后一個給定類型的元素。當代碼類似Parent tagName:last-of-type的作用區域包含父元素的所有子元素中的最后一個選定元素，也包括子元素的最后一個子元素并以此類推。
.innerDiv p:last-of-type {
color: orangered;
}
上面表示將 .innerDiv 內的的最后一個元素為 p 的顏色設置為橘色。
clipboard.png
nth-of-type() | 選擇指定類型的子元素
:nth-of-type() 這個 CSS 偽類是針對具有一組兄弟節點的標簽, 用 n 來篩選出在一組兄弟節點的位置。
.innerDiv p:nth-of-type(1) {
color: orangered;
}
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:nth-last-of-type() | 在列表末尾選擇類型的子元素
:nth-last-of-type(an+b) 這個 CSS 偽類 匹配那些在它之后有 an+b-1 個相同類型兄弟節點的元素，其中 n 為正值或零值。它基本上和 :nth-of-type 一樣，只是它從結尾處反序計數，而不是從開頭處。
.innerDiv p:nth-last-of-type(1) {
color: orangered;
}
這會選擇innerDiv元素中包含的類型為p元素的列表中的最后一個子元素。
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
clipboard.png
:link | 選擇一個未訪問的超鏈接
:link偽類選擇器是用來選中元素當中的鏈接。它將會選中所有尚未訪問的鏈接，包括那些已經給定了其他偽類選擇器的鏈接（例如:hover選擇器，:active選擇器，:visited選擇器）。
為了可以正確地渲染鏈接元素的樣式，:link偽類選擇器應當放在其他偽類選擇器的前面，并且遵循LVHA的先后順序，即：:link — :visited — :hover — :active。:focus偽類選擇器常伴隨在:hover偽類選擇器左右，需要根據你想要實現的效果確定它們的順序。
a:link {
color: orangered;
}
<a href="/login">Login<a>
clipboard.png
:checked | 選擇一個選中的復選框
:checked CSS 偽類選擇器表示任何處于選中狀態的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。
input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />
clipboard.png
大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。
:valid | 選擇一個有效的元素
:valid CSS 偽類表示內容驗證正確的<input> 或其他 <form> 元素。這能簡單地將校驗字段展示為一種能讓用戶辨別出其輸入數據的正確性的樣式。
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
clipboard.png
:invalid | 選擇一個無效的元素
:invalid CSS 偽類 表示任意內容未通過驗證的 <input> 或其他 <form> 元素。
input[type="text"]:invalid {
border-color: red;
}
:lang() | 通過指定的lang值選擇一個元素
:lang() CSS 偽類基于元素語言來匹配頁面元素。
/* 選取任意的英文（en)段落 */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
}
:not() | 用來匹配不符合一組選擇器的元素
CSS 偽類 :not() 用來匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中，它也被稱為反選偽類（negation pseudo-class）。
來看一個例子：
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>
clipboard.png
Div 1 和 Div 2會被選中，p 不會被選 中。
原文：https://blog.bitsrc.io/css-ps...
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
今年已經是 2020 了，各位作為時代的弄潮兒，上網沖浪是生活中的不可或缺，豐富的沖浪生活中必不可少的當然是買買買，面對琳瑯滿目的商品圖與文案，用戶怎樣才能快速抓到重點？或者說，怎么樣才能讓信息出現在合適的位置？
首先我們要了解瀏覽信息這個動作的本質和特征，瀏覽的本質就是大腦通過眼睛去提取信息，是一個傳達→解碼的過程，在這個過程中又存在一些特性，我們可以利用這些特性去進行一些更的信息傳達。
受閱讀習慣影響，人們閱讀的起始端都是在左側，結合依據尼爾森等老前輩發布的眼球軌跡研究報告可知，視覺瀏覽習慣呈「F」型且是不受控的潛意識習慣；同時可以延伸出例如「E」、「Z」等瀏覽模型，我們可以根據這些視覺模型的特性，結合產品的戰略層目標，將信息放置在合適的位置，已達到信息傳達率的最大化。
了解了基本的視覺瀏覽模型，那我們的地基就已經搭建好了，接下來我們來看看地基搞定之后的結構要怎么去布局。
首先我們需要清晰產品的屬性，電商平臺的本質是物品的交易，因為線上的特殊性，產品中圖片與文案對于平臺的 GMV 就存在最直接的關系。這個時候，單元布局的輪廓就出來了，就是「商品圖+關鍵詞文案」。
同時，不同平臺戰略方向、發展階段、團隊規模等因素的不同，所針對的用戶群體、消費階層、心智、審美等各個因素都會大不相同，有時候甚至在同一平臺中針對不同的活動、不同的品類進行細致的場景劃分，產生不同的單元結構以滿足商業目的上的需要。
720° 全方位了解平臺的屬性特征后，我們就可以開始利用這么信息來搭建基本的單元結構了。
例如平臺主攻下沉市場，用戶群體多為三四線，這個時候用戶吸引點在于商品的價格與賣點關鍵詞，這時候我們就可以拉大關鍵詞文案的占比，縮小圖片的占比，讓他們關注的內容盡可能多的進入他們的眼睛，吸引購買意向模糊的用戶點擊，增加購買意向明確的用戶匹配商品的速度，已達到 GMV 的提升。
簡單來說，過程中需要考慮到平臺因素所產出的圖片尺寸/比例/精致度/是否統一等，與文案搭配所呈現的是否適用當前消費場景及用戶心智，是否可以提升用戶的轉化率，是否可以提升平臺的下單率。
單元的架構是多樣且復雜的，就像一塊七巧板。重點就在于對于產品屬性和用戶行為、場景、心理等特征的分析，需要權衡各個關鍵點的重要性，把用戶需要看到的信息、我們想讓用戶看到的信息、用戶希望看到的信息以合適的結構狀態呈現給他。
我們將大體架構搭建好之后，剩下的就是要把細節元素給點亮，讓他們起到一個點睛的效果。
細分一下，其中涉及到的細節元素大致為活動標簽、折扣標簽、跳轉按鈕等常規的分子部件，在結構中，圖片、商品名稱、價格是用戶關注的重點，其他的部件則起到輔助刺激的作用。圖片和商品名稱的大體結構我們在上一步已搭建了，剩下來我們看看這些小部件該如何合理歸置。
先從標簽說起。整體框架出來了，用戶所需要了解的商品信息就已經基本呈現了，這個時候用戶心智上更多的主觀意向，尋找合適的商品，而標簽的出現，更像是一劑興奮劑，強烈告訴用戶：「這個品熱度第一！」、「這個品是款！」等我們刺激用戶的聲音，增強用戶查看的欲望。
這個時候疑問來了，那放哪里合適呢？
活動標簽，多為顯示該商品的熱度、促銷主題、排名等一些大的狀態性的信息，為的是在用戶心理層面給這個商品帶來更多的好感度，放置的位置可以結合具體場景去分析，可以考慮與商品圖進行結合放置。
遵循由上而下滑動的交互原理，我們可知在每個單元的頂部會是滑動瀏覽時第一被眼睛識別的信息，而且可以利用這個心理去給還沒看到具體商品的用戶進行一個心理鋪墊，比如商品的品質、權威性等，先入為主的進行心理建設，再結合視覺瀏覽模型，合適的位置就出來了。
次要信息比如倒計時、商品折扣、商品特點等輔助信息，結合布局場景考慮，有的可與圖片一起放置增強品質感，有的可與文案一起放置增加決策信息，有的可與價格一起放置，刺激用戶進行決策，是很有靈性的一個點睛之筆。
最后是按鈕，在這里的按鈕可以理解為瀏覽過程的一個閉環節點，也是一個操作的終結點，是最后的臨門一腳。位置當然是在右側最為合適，降低操作難度，同時也是整個單元的一個視覺終結點，瀏覽完流程之后決定是否點擊跳轉。當然，你可以利用你的方式去引導或刺激用戶點擊，你可以的。
文章來源：優設 作者：阿類雜碎面
為什么大爺大媽們總對排隊情有獨鐘，為什么平常不想要的東西一打折就買一堆……震驚！原來套路你的竟然都是自己的大腦！
如今想要成為一名合格的用戶體驗設計師，首要就是對目標用戶的理解和把控。而為了實現這一目標，掌握一些心理學知識就顯得尤為重要。當我們能在設計中合理利用心理學的時候，就離創造出讓用戶感慨「深得朕心」的體驗不遠了。
這次要介紹的是設計心理學中與我們日常生活密切相關的認知偏差 (Cognitive bias) ，了解它的基本定義之后再結合相關案例探討如何在設計中利用認知偏差來創造更好的用戶體驗。
網絡上的定義是這樣的：人們在知覺自身、他人或外部環境時，常因自身或情境的原因使得知覺結果出現失真的現象。
簡單來說，就是大腦創造了一些快捷方式，在處理信息時自然地去調用這些快捷方式，只是這種操作在快速的同時，也會對我們的決策過程產生危害，比如我們會選擇性忽略一些信息，或是自發地對信息進行腦補。這樣的認知模式導致我們產生了非理性的偏差。
△ 圖：大腦的操作
認知偏差種類豐富，已經被提出的就有幾百種，有很多尚未被完全驗證。下圖總結了現有的認知偏差，它們大概可以分為四類：信息過載，信息的意義不明確，大腦來不及認真作出反應以及大腦存不下所有的記憶。通過這張圖，我們可以更清晰地了解不同認知偏差背后的成因。
△ 圖：認知偏差寶典
那我們該怎么在設計中利用認知偏差呢？我根據日常工作中經常接觸的消費場景和學習場景總結了以下幾個方面：
△ 圖：章節概覽，也叫懶人速讀版
作為體驗設計師，我們需要為用戶的決策創造合適的環境，來引導其按照我們設計的方向去達成他們的目標。
錨定效應
錨定效應（Anchoring）是比較常見的一個被利用在消費場景中的認知偏差。它指的是人在做決定的時候，會在很大程度上依賴于其接觸到的信息。
比如商場里原價 2000 現價 500 的商品，原價的存在會讓人覺得這件商品的價值就是 2000，現在 500 簡直是撿了大便宜。
在體驗設計中可以借鑒這種做法，通過前后對比放大來優惠感知，進而促進用戶做出有利于我們的決策。
△ 圖：利用錨定效應推薦會員套餐，對比差價確實誘人
從眾效應
從眾效應（Bandwagon Effect）是另外一個常見的用于消費場景的認知偏差，指的是人們做決定時通常會和他人保持一致。
下圖是售前頁一般的設計技巧，通過展示購買人數和滾動播放購買信息來體現出該商品的熱門，讓正在猶豫的用戶「隨大流」下單購買。
基于此，我們在設計中可以營造出一種群體選擇的效果來吸引更多的用戶。
△ 圖：這么多人選擇，跟隨大家不會錯，買它
內群體偏差
前面提到的認知偏差之外，內群體偏差 (ingroup bias) 也一般被用來引導用戶決策，它是指人們會在認知上傾向于自己所屬的群體。
比如 Booking 在查看評論的區域加入了篩選評論語言這一按鈕，雖然設計的本意可能是為了方便用戶更好地理解評論內容，但是在真實的使用過程中可以發現，用戶更加信任自己所選標簽內的評論內容，因為同語言往往意味著來自相同的國家或者相近的文化背景，用戶通過這種方式找到一個小群體，然后被影響進而做出與群體內人們更為相似的決策。
△ 圖：同胞的評價更可靠
因此在體驗設計中利用內群體偏差的關鍵點在于打造群體歸屬感，借由小群體的力量影響用戶的決策。
引導用戶做出于我們有利的決策之外，同樣，我們可以利用認知偏差提高用戶粘性，增強用戶和產品之間的聯系，使他們對產品「愛不釋手」。
宜家效應
宜家效應 (The Ikea Effect) 是指消費者對于自己投入勞動、情感而創造的物品的價值產生高估的價值判斷偏差的現象，消費者對于一個物品付出的勞動（情感）越多，就越容易高估該物品的價值。利用宜家效應提高用戶粘性的核心是創造低投入、高回報、高貢獻價值的任務，保證用戶能夠完成任務的基礎上貢獻自己的價值。
在學習場景中我們可以利用宜家效應提高用戶粘性，將用戶留下來堅持學習。
首先需要保證用戶能夠完成任務。懂你英語 ®A? 產品中，我們會在用戶設置目標時描述該目標的表現，用戶以此選擇自己的目標。這種方式下的用戶對于任務結果的預見性提高，能清楚的知道如果完成任務會達到什么效果，更能被促使順利地完成任務。
△ 圖：目標展示與貢獻積累
其次，用戶對產品粘性增強需要能夠感知到自己所做出的投入，學習場景下這種投入感知更多體現在知識的累積上。在懂你英語 ®A? 課程中，我們將用戶與目標之間的距離設計為學習路徑，用戶每完成一個階段的學習便會在路徑上明顯前進，日積月累下來用戶能看到自己前進的印記，清晰感知到自身知識的累積，也就因此對產品有更高的價值感受。
負向偏見
由于學習的「反人性」，學習場景下的用戶在體驗流程中產生消極情緒的概率要大于其余場景，比如學習效果不好，難以堅持等。此類消極情緒對于學習產品影響很大，是因為負向偏見 (negativity bias) 的存在，人們對不好的事情的記憶比快樂的記憶更加清晰，更經?；貞洝?
因此在學習場景下我們需要給用戶更多的正面積極的反饋來抵消掉負面體驗的影響。在懂你英語 ®A? 課程設計中，我們在學習結果頁根據用戶不同的學習表現給出不同的反饋，即使是偏低的成績，也依然會給出一個較為積極的反饋，以期鼓勵用戶堅持學習。
△ 圖：做得不好也不要灰心
除了簡單抵消掉用戶的負面偏見，我們甚至可以通過設計去完全扭轉局面，變困境為有趣的體驗。最經典例子便是谷歌斷網時的小恐龍游戲，不知道有多少人會故意關掉網絡來玩這個游戲。
△ 圖：谷歌的斷網小恐龍
作為設計師我們可以通過了解和利用認知偏差來創造既讓用戶滿意又平衡商業的雙贏體驗。但由于設計師本身也是人類，與用戶擁有同樣的思考機制，因此在日常的調研分析和設計的過程中也要警惕認知偏差的影響，不斷深入了解用戶以及使用科學的測試方法來完善自己的設計，持續迭代反思，不因為某個方案自己傾注了很多心血，就覺得它是最好的。用戶可能并不買賬呢。
最近設計項目中涉及到「瓷片區」，于是和一些設計伙伴請教了解了一下，在此記錄總結一下，也希望可以對大家有些小小的幫助。
聽說：美團內部將首頁的運營廣告位模塊稱為瓷片位，其可以根據需求變動靈活調整，就像瓷片一樣靈活適用，顧名思義，瓷片區也就被叫開來了。
根據下圖我們可以了解到，瓷片區在產品中的應用。
瓷片區作為與 Banner、金剛區并行的三大運營板塊，都負責著導流的功能。瓷片區較兩者更便于在頁面中進行布局，可以靈活復用。
在電商產品中，導流指的是通過某種形式，增加對商品/功能的曝光，使自己的用戶群去購買或了解感興趣的商品/功能。導流簡化流程：導流入口 → 落地頁 → 轉化率，設計師需要通過在這個流程中收集的數據，進行復盤反思優化設計。
瓷片區屬于運營區，在頁面中通常位于用戶容易點擊的區域。通常為圖文混排，常見的類型有：實物類、插畫類。
1. 實物類
應用場景：需要對商品/服務有高曝光度的產品類型，如外賣、電商、旅游類等，通過對自有商品/服務的直觀展示，達到吸引用戶的目的。
優點：識別度高、適配千人千面、元素更換靈活；
缺點：圖片質量要求較高；
2. 插畫類
應用場景：常見于金融類、虛擬類產品。
優點：高度概括主題的圖形，通過插畫增加產品的調性和趣味性；
缺點：針對性比較強，難復用，花費時間；
1. 排版
瓷片區常見排版方式：左右排版、上下排版和對角線排版。設計師可以將三種排版方式組合設計，使頁面更具有節奏感；
2. 圖片
對于電商或商城類產品來說，配圖的好壞是影響用戶點擊率最直觀的元素；設計瓷片區時需要考慮全局配圖和局部配圖的情況：
3. 文字
4. 背景
瓷片區背景常見類型：白色/淺色背景、漸變色背景；設計師根據產品調性及業務需求對背景進行靈活使用，但要遵守以下原則：
文中從四點對瓷片區進行了一個概括性的了解總結，設計要點的話在排版設計中都是需要注意的基礎知識所以未多加贅述，以此為自己在項目中遇到的知識點做一次沉淀。
文章來源：優設 作者：木子的小千世界
一轉眼，夏天就來了，設計中需要清新又抓人眼球的圖片，老板又要求使用各年齡段都喜歡的插畫風格，應用場景要廣，但是預算又沒有那么多，該怎么辦呢？這也不是熬夜就能熬出來的，不要煩惱，下面這個網站立馬解決你上面所有需求的同時，還能幫助提升你的工作效率，延緩你禿頭的時間。
這個創造性超強的插畫制作網站就是 BLUSH ，你可以根據自己的想法進行元素的替換，也可以直接使用 8 位網站合作設計師的現有作品，超清新的顏色和多樣的搭配空間，絕對會讓你十分滿意的，無論是做 Banner、海報還是用作文章中的插圖都十分合適。最重要的是，可以免費商用！接下來就跟著我一起，走進這個網站吧。
網站內擁有 12 大種類的插畫圖庫，包含人物、城市風景、植物、甜點、涂鴉等等。選擇你喜歡或者需要的一類，就可以開始你的創作。操作類似于換裝游戲，在各個你需要改變的地方更換你喜歡的元素就可以。如果你要摸清整個網站可以產生多少種搭配的話，可能需要花上你不止一天的時間哦。
從上圖可以看出，單在人物上，網站就提供了不同的風格，有像兒童形象的「Friendly ones」，也有極簡線條的「Big Shoes」，還有夸張超炫的「Power Moves」等等。接下來，為了更好的理解網站提供的服務和操作的方式，我選取實用多變的「Croods」來演示。
首先在欄目左側選擇「Croods」，就會看到下面這樣的界面。最上面是設計師的作品，下面則是可以由你自由創造作品的入口，造型可以選擇站著或者坐著，場景可以選擇談話、聚會、公園等等，整體的背景也有五大類供你選擇。
這里我選擇點擊「Peaceful Place」。網站出現的作品很符合現在多數人在家辦公的狀態，如果你不想自己動手，那直接選擇這張圖片或者點擊「Randomiza」再隨機生成一張圖片，自己滿意之后，點擊「Download」便可以獲取 PNG 格式的圖片，不過，高品質 PNG 和 SVG 格式則需要付費。
當然，你也可以通過改變圖片上的各個元素，生成你所需要的場景插畫。例如想要一個盤著腿坐在沙發上發消息，和朋友聊天聊的很開心的一個形象，就可以通過下方給予的元素進行個性化定制，把表情改成開心，電腦換成手機，右上方替換成聊天框，最后導出為下圖的樣子。如果想要多人的場景，在上一步選擇多人的場景進入就可以了。
同時，網站也支持下載插件，方便眾位設計師在 Figma 中更好的運用。在首頁點擊右上角的「Get Plugin」進入頁面，注冊賬號就可以順利安裝插件。大家可以根據自己的需要選擇下載插件或者直接在網站上在線制作。
最后，不得不提的一點是，網站圖庫在兼顧多樣性和平等性上做了很大的努力，人物的膚色可以隨你改變，殘疾人也有一席之地，可以選擇為人物匹配輪椅，或者給人物戴上假肢，涵蓋盡可能多的人物情況和場景。相信這樣的網站一定能滿足你豐富的設計需求，快去使用吧！
文字來源：優設 作者：山楂
在教程開始之前，我先說一下今天的教程我們會講哪些部分。首先我們會分析兒童風格的特點、然后在這些特點之上給大家演示繪制一些插畫小元素。
我們先來看一下這些海報里，是不是很容易就能分辨出，哪一個是關于兒童主題的畫面？
可能剛剛的會比較明顯，那這組是不是也同樣可以分辨出哪一個兒童感比較強的畫面？兒童感它既然能夠在這些風格里凸顯，它一定有一些特點。那么接下來我會通過幾個方面去分析這些特點。
我們要選用一些符合兒童風格的元素。植物是兒童畫里出現最常用的元素，動物作為自然界的一份子，當然也非常適合。一些兒童屬性的物品。比如書本、棒棒糖等。還有天空的云朵、房子這些兒童畫畫的時候經常出現的元素，都非常適合兒童畫面。
但是一些明顯不屬于兒童用品的元素就不合適了。比如說口紅，口紅不會讓人聯想到兒童，更多是成年女性。骷髏頭這種恐怖的物體也不能出現。
那我問一下，眼鏡適合嗎？如果是這種尖銳的眼鏡的話可能不太適合。
但是一旦它的外形變得圓潤可愛，就很合適。很多物品也像眼鏡一樣，只要把外形改變得更符合兒童的氣質，就不會顯得突兀。
假如某一些物體兒童化特征不明顯，而又想讓它有兒童感，那應該怎么做呢？加入表情，表情簡單可愛，就能表現兒童感的情緒。
每個物體加上表情就會變得可愛。但也正因為這些表情加在了本身沒有表情的物體上，所以風格里有一種搞怪感。
我把隨機下載的兒童海報拼接在一起，整體分析它們的特點。
兒童插畫的海報元素使用的色相比較多，這里隨機抽取的海報里，畫面都是使用了比較多的顏色，紅、黃、藍、綠基本都用上了。
在飽和度上都偏高，一般保持在 70% 以上。
明度方面，把畫面模糊再變黑白，我們可以看到整體畫面給我們的感覺是比較亮的，就連中間用了大色塊的海報的明度也在 50% 以上。而存在的一些深色也是作為畫面的點綴。
那么總結起來，一般是色相選取的顏色比較多、飽和度比較高、明度比較高。我們以這張圖為例。
當它的顏色種類變少的時候，畫面的活潑程度就會降低。
而飽和度變低后，不僅活潑度降低，這種顏色的風格會趨向于成人化。
畫面的顏色變深之后，畫面就沒有透氣感。有一個很合適的成語形容，叫「老氣橫秋」。就是缺乏朝氣的感覺。
那么兒童插畫的形體有什么特點？總結起來有兩個特點，簡單和隨意。首先兒童對世界的理解還不夠深，能力也不足，往往畫岀來的東西都是以概括的形式。
比如兒童畫一顆真實的樹的時候，去掉很多細節，把一個物體比較有特征的外形表現出來。比如兒童畫一顆樹可能是這樣畫的。
其次兒童的能力和經驗不夠，畫畫的時候邊緣都是比較不平滑的，看起來比較隨意。
而且就算本來在他眼中是對稱的物體，因為手繪的感覺而看起來歪歪扭扭。
當一個物體簡單成平滑的幾何形的時候，它是偏向于設計感和現代感的。當它越來越接近于隨意感覺的時候，它的兒童特征會更強，同時更親切。
就像這些作品，雖然是插畫師畫的，但是卻有很強的兒童感，就是這種簡單和隨意再加上插畫師的審美形成的畫面。
要注意的是簡單和隨意的把握，太過隨意，商業化的價值就不高了。
兒童海報里的插畫雖然每個元素比較簡單隨意，但是要保持畫面比較完整，是需要很多元素的拼湊的。
就像這個幼兒園品牌的元素都特別隨意，但是最后呈現的效果卻也不錯，除了在延伸上花了很多心思之外，還因為它的元素比較多，看起來不至于太單薄。
而這些元素的擺放可以不遵循嚴格的透視和邏輯，這種方式體現了兒童繪畫和成年人嚴格的繪畫原理的不同。
能滿足上面的特點的兒童風格有很多，在這里我打算用一種比較簡單的繪制風格，來進行操作的演示。
首先我們畫一顆簡單的樹，來看一下這個風格。外形不會追求非常的對稱。
就連樹干我也是用「畫筆工具」和鼠標畫的。營造一種隨意感。
在這里調整一下最后整體的外形后，我們會發現它的邊緣和線條都太順了。沒有手繪的自然感。
所以我們要用到「變形工具」，對邊緣進行推拉，這樣它的邊緣就不會特別光滑了。
最后調整一下尖銳的錨點，樹就這么簡單地完成了。
大家可能會覺得這個風格過于簡單了，我用畫動物，去講解一下其中的細節。首先還是用「鋼筆工具」，把形體輪廓和主要部位畫出來。 大家是不是覺得畫到這里就完成了？其實這個風格比較簡單，如果沒有一些裝飾感的細節的話就會顯得太過隨意了。所以在這只鳥里，要去想怎么添加一些細節。
首先可以加個腮紅。腮紅的顏色不一定是紅的。像鳥的身體色塊面積太大了，需要有裝飾，所以畫幾條羽毛。羽毛的形狀太過規矩了，還是需要轉曲用「變形工具」調整。
還有尾巴的部分也是需要用線的形式讓整體更有細節感。最后都是要用「變形工具」讓它的線條有種隨意感。
最后的細節在嘴巴上添加，直接畫一條直線。其實添加細節就是不要出現一整大塊的純色色塊。
對于物體的簡化不用太過于死板，比如我們現在看到的這個植物，它可以直接簡化成圓形和密集的點的組合。
一開始我是直接用「剪切蒙板」的，但是這樣邊緣過于光滑了，而且里面的點也被框住，不夠美觀。于是就把點的分布超出圓形一點。這樣看起來就比較有細節了。
而我們通過改變形體，就可以演變出很多種不一樣的形態。比如這個物體，我在做的時候想能不能把中間的圓縮小一點 。黑色的點占比再大一點。這樣就產生了另外一種植物。
甚至還可以直接去掉中間的圓，把點再放大作為主體。原本的點放大會變得太過隨意。所以只能通過畫圓形和「變形工具」調整。
這樣又可以得到不一樣的一顆植物了。這樣的演變可以根據畫面的需求選取不一樣的植物。
所以在這里我已經畫好一套常用元素的素材了。以植物動物為主，基本能滿足日常設計中的需求了。這套素材會分享給大家，在我們的訂閱號后臺回復「兒童節素材」就可以下載。這套素材是允許大家商用的。有了素材后，怎么用呢，接下來我將用這套素材演示它能怎么使用。
這些素材可以在畫面作為點綴營造氣氛。
直接使用這些素材，堆疊成完整的畫面。
也可以和圖片中的人物或者產品做穿插。
接下來用一個案例演示一下，我是怎么用素材的。這個是學而思的手機端海報的文案，主要有標題部分、課程內容、和二維碼等。
首先建立一個手機端尺寸。設置好版心的大小。在這里我做的是下方卡片式的結構。（白色色塊部分是海報）
可以先把文案編排進來。首先安排好大的元素，二維碼和活動價格。主講老師和上課時間的小標題，字號大小要保持一致。卡片里的信息就編排完了。
標題是畫面最大的字號放在上方，副標題和補充信息和大標題居中。接下來就是要在畫面中添加我們的素材了。那么怎么選擇呢？首先要定好你要選擇的元素范圍，不要同時出現太多種類的元素。以植物為主、再加上幾個元素點綴是一般不會出錯的選擇。
首先添加的是面積比較大、塊面化比較明顯的元素。這里就加了三棵簡單的樹。
接下來就是添加一些更有裝飾感的花花草草。
在添加元素的時候也要注意畫面點、線、面的結合。就比如現在我們添加的元素主要是以面和點為主。
雖然樹的樹干也有線，但是輪廓的線條太「順」了。
所以要添加「線」的特征更明顯一點的元素。
在畫面的上方加上適合存在畫面上方的元素、比如長頸鹿因為本身比較高，所以沒問題。把標題移到適合的位置，加蒲公英作為點綴。最后只剩下中間的部分怎么做出和主題相關聯的畫面了。
我們還有一個信息可以放在人物的手上。最后一個元素就從海報的主題出發。既然是學習的內容，可以畫一本書，放在背影上。元素的拼湊完成了，最后就是細節的添加。
現在畫面下方的信息不夠突出，是因為卡片和背景都是白色的，所以下方加上一個深色的色塊，讓信息更顯眼。
突出的信息可以變顏色。
背景變成黃白色，最后加上 logo?，F在畫面好像完成了，但是我最后還發現了一個問題，畫面上的顏色飽和度都很高，各種顏色之間碰撞，看起來有點透不過氣的感覺。
是因為畫面缺少淺色。所以我選了兩個花把它變成白色。
現在這個素材使用的案例就完成了。
最后要說明，這一套素材它只是一種風格，我們教程前面有說到的任何一個因素的改變都可以演變成無數的風格。
比如它的顏色搭配也可以變，變成一種更亮眼的顏色?；蛘哒f它變得更隨意，有筆觸的自然感。甚至還可以是畫畫技法風格變化。也可以為每一個元素都加上眼睛，一種搞怪感就出現了。所以是有無限的可能性的，最重要的是要學以致用。
做好畫面還不夠，我們畫面選擇的字體也是很重要的，那么我覺得這幾款字體做得都不錯。
文章來源：優設 作者：研習設
什么是圖片懶加載
當我們向下滾動的時候圖片資源才被請求到，這也就是我們本次要實現的效果，進入頁面的時候，只請求可視區域的圖片資源這也就是懶加載。
比如我們加載一個頁面，這個頁面很長很長，長到我們的瀏覽器可視區域裝不下，那么懶加載就是優先加載可視區域的內容，其他部分等進入了可視區域在加載。
這個功能非常常見，你打開淘寶的首頁，向下滾動，就會看到會有圖片不斷的加載；你在百度中搜索圖片，結果肯定成千上萬條，不可能所有的都一下子加載出來的，很重要的原因就是會有性能問題。你可以在Network中查看，在頁面滾動的時候，會看到圖片一張張加載出來。
lazyLoad
為什么要做圖片懶加載
懶加載是一種網頁性能優化的方式，它能極大的提升用戶體驗。就比如說圖片，圖片一直是影響網頁性能的主要元兇，現在一張圖片超過幾兆已經是很經常的事了。如果每次進入頁面就請求所有的圖片資源，那么可能等圖片加載出來用戶也早就走了。所以，我們需要懶加載，進入頁面的時候，只請求可視區域的圖片資源。
總結出來就兩個點：
1.全部加載的話會影響用戶體驗
2.浪費用戶的流量，有些用戶并不像全部看完，全部加載會耗費大量流量。
懶加載原理
圖片的標簽是 img標簽，圖片的來源主要是 src屬性，瀏覽器是否發起加載圖片的請求是根據是否有src屬性決定的。
所以可以從 img標簽的 src屬性入手，在沒進到可視區域的時候，就先不給 img 標簽的 src屬性賦值。
懶加載實現
實現效果圖：
imgLazyLoad
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
flex-direction: column;
}
img {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div>
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657907683.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657913523.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657925550.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657930289.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657934750.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657918315.jpeg">
</div>
</body>
</html>
監聽 scroll 事件判斷元素是否進入視口
const imgs = [...document.getElementsByTagName('img')];
let n = 0;
lazyload();
function throttle(fn, wait) {
let timer = null;
return function(...args) {
if(!timer) {
timer = setTimeout(() => {
timer = null;
fn.apply(this, args)
}, wait)
}
}
}
function lazyload() {
var innerHeight = window.innerHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(let i = n; i < imgs.length; i++) {
if(imgs[i].offsetTop < innerHeight + scrollTop) {
imgs[i].src = imgs[i].getAttribute("data-src");
n = i + 1;
}
}
}
window.addEventListener('scroll', throttle(lazyload, 200));
可能會存在下面幾個問題：
每次滑動都要執行一次循環，如果有1000多個圖片，性能會很差
每次讀取 scrollTop 都會引起回流
scrollTop跟DOM的嵌套關系有關，應該根據getboundingclientrect獲取
滑到最后的時候刷新，會看到所有的圖片都加載了
IntersectionObserver
Intersection Observer API提供了一種異步觀察目標元素與祖先元素或文檔viewport的交集中的變化的方法。
創建一個 IntersectionObserver對象，并傳入相應參數和回調用函數，該回調函數將會在目標(target)元素和根(root)元素的交集大小超過閾值(threshold)規定的大小時候被執行。
var observer = new IntersectionObserver(callback, options);
IntersectionObserver是瀏覽器原生提供的構造函數，接受兩個參數：callback是可見性變化時的回調函數（即目標元素出現在root選項指定的元素中可見時，回調函數將會被執行），option是配置對象（該參數可選）。
返回的 observer是一個觀察器實例。實例的 observe 方法可以指定觀察哪個DOM節點。
具體的用法可以 查看 MDN文檔
const imgs = [...document.getElementsByTagName('img')];
// 當監聽的元素進入可視范圍內的會觸發回調
if(IntersectionObserver) {
// 創建一個 intersection observer
let lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry, index) => {
let lazyImage = entry.target;
// 相交率，默認是相對于瀏覽器視窗
if(entry.intersectionRatio > 0) {
lazyImage.src = lazyImage.getAttribute('data-src');
// 當前圖片加載完之后需要去掉監聽
lazyImageObserver.unobserve(lazyImage);
}
})
})
for(let i = 0; i < imgs.length; i++) {
lazyImageObserver.observe(imgs[i]);
}
}
源碼地址-codePen點擊預覽
vue自定義指令-懶加載
Vue自定義指令
下面的api來自官網自定義指令：
鉤子函數
bind: 只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted: 被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
update: 所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新
componentUpdated: 指令所在組件的 VNode 及其子 VNode 全部更新后調用。
unbind: 只調用一次，指令與元素解綁時調用。
鉤子函數參數
指令鉤子函數會被傳入以下參數：
el：指令所綁定的元素，可以用來直接操作 DOM。
binding：一個對象，包含以下 property：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
實現 v-lazyload 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<p v-for="item in imgs" :key="item">
<img v-lazyload="item">
</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.directive("lazyload", {
// 指令的定義
bind: function(el, binding) {
可視化是利用計算機圖形學和圖像處理技術，將數據轉換成圖形或圖像在屏幕上顯示出來，再進行交互處理的理論、方法和技術。面對醫療行業，如何將行業數據，轉化為視覺可視化中的點線面，是在這個項目中需要思考的問題。
本文將帶來設計師在醫療院感可視化項目中的設計過程及思考，講述如何在業務場景下對數據進行抽取表達。通過可視化打破傳統院感系統的表單呈現，使院感場景具備互動性、觀賞性，滿足不同角色的使用需求。同時院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析，從而控制院感發生和預防。
本項目以浙江省建德市第一人民醫院為案例，地理數據以建德醫院坐標為準。
項目背景
院感是什么？院感為醫院感染，入院48小時內都有可能感染到院感細菌。在醫院里有專門的院感醫生職位，對醫院感染進行有效的預防與控制。而傳統院感管理的工作流：醫護人員及院感醫生 > 院感系統分析疑似病例 > 得出結論預防或治療。這種偏人工的方式數據獲取方式，無法更的獲取院感發生的原因、定位、以及未來的院感預測。
P1 因此我們通過對醫院數據的整理，抽離出影響院感的數據，將院感發生、發展、管控、治療、預測全流程進行整合。
P2 通過醫院>樓層>人員三個層面，空間和時間兩個維度對院感展示。打破傳統院感系統的表單呈現，使院感場景具備互動性、觀賞性，滿足不同角色的使用需求：如院長的展示性需求。院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析，從而控制院感發生和預防。
P3 同時在這樣的設計場景下，可以覆蓋的醫療業務場景和數據單位也會更多元，具有一定的商業化價值。
P4 設計流程
整個項目的設計流程可以分為4個階段：信息收集、可視化、線上搭建、效果調試。在此項目實踐中，重點投入在前三大部分。
P5 Part1信息收集
我們基于項目背景，梳理要展現的數據指標，對整體業務場景進行故事腳本的規劃（即如何展現前期的數據收集，并把其串聯在整體業務場景中），設定動作攝像機語言，同時也需要了解最終呈現的硬件設備與使用環境。
P6 Part2可視化
1.交互信息框架
首先梳理院感的信息框架和交互方式。
整個大屏分為院樓層，呈現整體院感數據的統計；樓層屏，作為重點病區的監測預測；個人屏，分析病例回溯病程，從而預測院感。三屏之間相互跳轉， 交互演示方式從醫院的外部跳轉內部結構、再到患者的個人維度，三屏都分別展示相關的數據指標。
P7 2.視覺風格
在大屏視效風格探索上，期初的目標是希望可以打造不一樣行業視覺語言，所以選擇不同于以往的設計大屏風格，選擇白色的風格，符合大家對醫護行業的認知。但到中期發現，在硬件設備上展示發是過曝的。因此對設計風格進行調整改為X光片的風格，色系上偏冷綠的感覺。這是在這個項目中的試錯經驗之一。
P8 3.建模設計
在可視化部分中遇到的難點：建筑模型的高還原。下圖為建德第一人民醫院實拍圖。在大屏項目中，必須真實還原地理位置。而在此醫院沒有清晰的CAD圖紙提供的；在Google的衛星地圖下也沒有的建筑結構的，所以我在建模的過程中，是踩了坑的，先盲畫了一版，但是精細度不夠，過于粗糙。
P9 因此我反復看得到的資料，通過在確定地理氛圍內，去豐富場景。這樣的好處是使業務場景更加豐富，包括擴展到院外的車流數據，為業務場景提供更多可能性 當然后期也搖到了建筑內部的消防圖，根據消防圖繪制內部結構。
P10 4.數據面板
對可視化組件的組件進行設計：時間篩選、數據統計、占比關系、趨勢分析。設計之前也參考了很多概念版的可視化設計，希望在院感屏上可以呈現一種科技概念的感覺。
P11 Part3線上搭建
1.獲取地理數據
這部分是非常耗時的，datav是數據驅動的可視化產品，在搭建部分，是全程依靠datav平臺的。
首先需要明確地理數據，通過高德數據通過點線成面，可以作為場景定位，也就是物理模型的經緯度數據 后面還原數據效果，造虛擬數據，是非常依賴于這個坐標數據的。
119.291724 , 29.472365
這是建德醫院的坐標，醫院在地圖上的數據是很簡化的，顆粒度很大，具體位置無法顯示。
P12 因此我們需要建立與地理數據綁定的建模，先對位置。
P13 在這個過程中我發現，如果最開始沒有對準位置，也不用緊張，可以在DATAV平臺增加hook數據過濾器，解決地理數據與世界坐標無法對齊的問題。
2.線上場景還原
根據對確定過位置模型進行烘焙還原。這個過程中遇到了一些不知名的原因烘焙失敗，原因可能是命名有中文/位置數據錯誤/模型塊面復雜等，遇到這樣的問題就需要重新從頭檢查烘焙流程每一步。
P14 3.數據維度展示還原
這一步我們需要把前期做好的數據可視化效果，還原到線上模型中。在這一步我遇到的問題是因建德醫院內部具體結構的缺失，使一些可視化效果無法精準匹配到模型上。所以設計過程中只能依賴于在對的地理位置上豐富的場景內造數據，這個過程是比較吃力的。
P15 這個問題的解決辦法是通過開發工具和導出的結構俯視圖，對位置，然后轉化出LEGO的數據
P16 在數據效果還原的過程中，也發現我在前期設計的數據效果，不能全部實現，有些是依賴于開發的 。這時可以通過其他組件效果代替嘗試，比如熱力的效果用粒子放大，通過參數調節得到熱力 再比如局部房間的掃管，通過設計部分多次烘焙模型，不斷疊加掃光層，得到房間監測的效果
P17 設計小結
綜合以上的經驗，院感可視化從設計到落地，整體結構應該是這樣從物理基礎坐標的獲取、到場景搭建、再到數據展示的過程。在這個過程中會用到DATAV、C4D、數據庫、簡單的代碼等技術來實現。
P18 這個項目雖然這只是醫療行業中一個小的業務場景，但我們的業務數據提取及可視化設計思路，他不僅限于醫療行業，同時也可以成為場館類大屏解決方案的一部分，是具有一定商業化價值的。同時在這過程中沉淀下來的人體結構模型，和一些設計經驗，是可以復用到對應行業解決方案中，達到提效。
轉自：
火車車次
/^[GCDZTSPKXLY1-9]\d{1,4}$/
手機機身碼(IMEI)
/^\d{15,17}$/
必須帶端口號的網址(或ip)
/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/
網址(url,支持端口和"?+參數"和"#+參數)
/^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?$/
統一社會信用代碼
/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/
迅雷鏈接
/^thunderx?:\/\/[a-zA-Z\d]+=$/
ed2k鏈接(寬松匹配)
/^ed2k:\/\/\|file\|.+\|\/$/
磁力鏈接(寬松匹配)
/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/
子網掩碼
/^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/
linux"隱藏文件"路徑
/^\/(?:[^\/]+\/)*\.[^\/]*/
linux文件夾路徑
/^\/(?:[^\/]+\/)*$/
linux文件路徑
/^\/(?:[^\/]+\/)*[^\/]+$/
window"文件夾"路徑
/^[a-zA-Z]:\\(?:\w+\\?)*$/
window下"文件"路徑
/^[a-zA-Z]:\\(?:\w+\\)*\w+\.\w+$/
股票代碼(A股)
/^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/
大于等于0, 小于等于150, 支持小數位出現5, 如145.5, 用于判斷考卷分數
/^150$|^(?:\d|[1-9]\d|1[0-4]\d)(?:.5)?$/
html注釋
/^<!--[\s\S]*?-->$/
md5格式(32位)
/^([a-f\d]{32}|[A-F\d]{32})$/
版本號(version)格式必須為X.Y.Z
/^\d+(?:\.\d+){2}$/
視頻(video)鏈接地址（視頻格式可按需增刪）
/^https?:\/\/(.+\/)+.+(\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/i
圖片(image)鏈接地址（圖片格式可按需增刪）
/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
24小時制時間（HH:mm:ss）
/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
12小時制時間（hh:mm:ss）
/^(?:1[0-2]|0?[1-9]):[0-5]\d:[0-5]\d$/
base64格式
/^\s*data:(?:[a-z]+\/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i
數字/貨幣金額（支持負數、千分位分隔符）
/^-?\d+(,\d{3})*(\.\d{1,2})?$/
數字/貨幣金額 (只支持正數、不支持校驗千分位分隔符)
/(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0){1}$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/
銀行卡號（10到30位, 覆蓋對公/私賬戶, 參考微信支付）
/^[1-9]\d{9,29}$/
中文姓名
/^(?:[\u4e00-\u9fa5·]{2,16})$/
英文姓名
/(^[a-zA-Z]{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/
車牌號(新能源)
/[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/
車牌號(非新能源)
/^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/
車牌號(新能源+非新能源)
/^(?:[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領 A-Z]{1}[A-HJ-NP-Z]{1}(?:(?:[0-9]{5}[DF])|(?:[DF](?:[A-HJ-NP-Z0-9])[0-9]{4})))|(?:[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 掛學警港澳]{1})$/
手機號(mobile phone)中國(嚴謹), 根據工信部2019年公布的手機號段
/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/
手機號(mobile phone)中國(寬松), 只要是13,14,15,16,17,18,19開頭即可
/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
手機號(mobile phone)中國(最寬松), 只要是1開頭即可, 如果你的手機號是用來接收短信, 優先建議選擇這一條
/^(?:(?:\+|00)86)?1\d{10}$/
date(日期)
/^\d{4}(-)(1[0-2]|0?\d)\1([0-2]\d|\d|30|31)$/
email(郵箱)
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
座機(tel phone)電話(國內),如: 0341-86091234
/^\d{3}-\d{8}$|^\d{4}-\d{7}$/
身份證號(1代,15位數字)
/^[1-9]\d{7}(?:0\d|10|11|12)(?:0[1-9]|[1-2][\d]|30|31)\d{3}$/
身份證號(2代,18位數字),最后一位是校驗位,可能為數字或字符X
/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0\d|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
身份證號, 支持1/2代(15位/18位數字)
/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
護照（包含香港、澳門）
/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/
帳號是否合法(字母開頭，允許5-16字節，允許字母數字下劃線組合
/^[a-zA-Z]\w{4,15}$/
中文/漢字
/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/
小數
/^\d+\.\d+$/
數字
/^\d{1,}$/
html標簽(寬松匹配)
/<(\w+)[^>]*>(.*?<\/\1>)?/
qq號格式正確
/^[1-9][0-9]{4,10}$/
數字和字母組成
/^[A-Za-z0-9]+$/
英文字母
/^[a-zA-Z]+$/
小寫英文字母組成
/^[a-z]+$/
大寫英文字母
/^[A-Z]+$/
密碼強度校驗，最少6位，包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符
/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
用戶名校驗，4到16位（字母，數字，下劃線，減號）
/^[a-zA-Z0-9_-]{4,16}$/
ip-v4
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
ip-v6
/^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i
16進制顏色
/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
微信號(wx)，6至20位，以字母開頭，字母，數字，減號，下劃線
/^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/
郵政編碼(中國)
/^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/
中文和數字
/^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/
不能包含字母
/^[^A-Za-z]*$/
java包名
/^([a-zA-Z_][a-zA-Z0-9_]*)+([.][a-zA-Z_][a-zA-Z0-9_]*)+$/
mac地址
/^((([a-f0-9]{2}:){5})|(([a-f0-9]{2}-){5}))[a-f0-9]{2}$/i
藍藍設計的小編 http://www.syprn.cn