一次會議的演示文稿，通常是一個 .pptx 格式的文檔，而日常來往的郵件附件里的文檔則多是 .docx 和 .pdf 格式的文檔。當然，設計師更熟悉的可能是在 Adobe Photoshop 中可以打開的 .psd 格式的源文件。
我們熟悉了這種各司其職的格式體系。
而網絡正在改變這種格式體系。各種服務和功能大都「在線化」，大家都熟悉在線看視頻，已經不會去分它是 .mp4 還是 .flv，在線音樂是 .mp3 還是 .flac 已經無人在意。而更為重要的文檔和效率類的服務也是如此，且不說微軟的 Office 365 和相對更加輕量的 Google Doc，國內的 騰訊文檔和石墨文檔等在線文檔工具，讓我們越來越少地接觸帶有.docx 后綴的本地文檔。當然，這并不是意味著本地文檔就此消亡，但是這種去本地化的趨勢非常明顯。
如果文件的格式已經不再清晰可見了，那么概念的界限自然也會逐漸淡化。一個記錄文本的文檔和記錄表單的文檔為什么不干脆融合到一起，并且適應用來展示的需求？當然可以。
今年年中在 Microsoft Build 大會上微軟展示的 Fluid Framework 就做的更加徹底。
無論是源自 Word 里面的富文本還是 Excel 當中的表格，它們甚至不用以單一完整的文件而存在，它們在網絡上傳遞的時候，將會是一段簡短的鏈接。但是在 Fluid Framework 的支持之下，呈現出來的，則是一段可交互的、具備編輯功能的、帶有內容的模塊。
說起來，并不難理解。在有 Fluid Framework 支持之下，任何網絡環境都會是一個簡單純凈的畫布，一個可以承載不同類型文檔和功能的空間。整個 Office 龐雜功能體系，你都可以按需取用，提取出來拉到 Fluid Framework 中使用。
「我們確實需要在關鍵領域，針對核心技術進行創新，」 Microsoft 365 負責人Jared Spataro在接受The Verge采訪時說道：「 Fluid Framework 是我們既是協作創新的新方式，也是未來承載各色內容的文檔的新載體?！惯@種新的文檔框架讓用戶能夠拆解不同類型的內容，并在不同的應用場景和不同文檔中輕松地取用。
Spataro 還說道：「Fluid Framework 沿用了一部分以往文檔的概念，但是將這些格式和文件徹底拆碎、打散，然后用云端的網址鏈接將它們逐一代替代。不同的鏈接承載放置不同的內容和組件，因此從文字到表格，再到圖形化的可視化內容，所有這些都可以隨意地整合，輕松集結在一個地方。然后，Fluid Framework 讓你實時訪問所有這些內容，因此它是動態的，可交互的，是完全可協作的，并且可以便捷共享的」。
作為一個尚且處于早期階段的服務，目前Fluid Framework 還只是打通了 Office 自家的文檔體系。但是即便如此，這意味著你可以將任何一個文檔當中帶有相應功能的內容，無縫地與人在 諸如筆記工具 OneNote 隨時隨地嵌入 Excel 的模塊和豐富的表單、即時通訊工具 Teams 中加入演示文稿，并且和同事一起修改其中的樣式，替換圖片，增刪動畫而無需離開，你甚至可以直接在你網頁的 Outlook 郵箱里面，直接編輯當月網站數據所生成的表單和相應的柱狀圖。
當然，這還不止。人工智能功能的加入，讓 Fluid Framework 可以做到更多事情，比如發布會現場所演示的，實時發布信息，然后 AI 協助將信息實時翻譯成不同的語言，分發給不同國家的同事。
這種全新的功能，讓內容協作中間大量復雜的概念和環節都被移除了，這種程度的變化是驚人的，它意味著交互的模式，從最底層的概念到呈現的方式，都發生了改變，而這種改變還會隨著產品迭代和時間推移，而進化得更加智能、無縫、微妙。
Spataro 總結道：「不同格式的文檔，一直是人們思考如何制作內容的思維框架。但是 Fluid 往后退了一步，重新審視了一下這個既有的體系，然后展現了一個新的可能：我們不再需要這些主導一切的文檔格式和不同類型的文件。我們不用在處理表格的時候就必須聯想到 Excel，寫文本的時候也不必去限定工具必須為 Word，而可視化內容的展示也不再拘泥于 PowerPoint，你可以在任何地方用任何類型的內容，我要說的是，我們不再有文檔了，我們擁有一個無所不能的畫布?！?
而這個全新的東西，最近剛剛開始對外開放了申請入口：
Fluid Framework Developer Preview
當然，如今看起來頗為具有想象力的 Fluid Framework ，它的核心思路其實并不是什么新鮮東西。
在線協作的概念由來已久，《連線》雜志前主編凱文凱利在他1994年出版的《失控》當中早已提及相關的概念和想法，但是在如今實際上要打通新的領域，納入一個新的格式，加入一個新的功能，都需要足夠的基礎才行。
Google Wave 是這個領域的先行者。在一個畫布之下，進行多格式、多樣式、多人在線協作，幾乎完全無界的在線協作模式是令人炫目也讓人無所適從的，這一產品最終失敗了，但是它在技術和架構上的遺產足以反哺出 Google Doc、Google Drive 這種級別的產品。
Google Wave 的想法在當時確實略有一點天馬行空，實際應用場景和需求并沒有跟上，對于網絡帶寬的要求在當時也相當苛刻。而如今上線的 Fluid Framework ，應該也是從這些失敗的前輩身上汲取了不少經驗。
立足于微軟最扎實的 Office 365 這一云端服務來進行鋪設和測試功能，在服務群體上，則選擇了需求更加清晰具體的企業用戶（尤其是協作服務），來作為初始的切入點。這樣的限制，足以說明微軟的審慎和重視，他們甚至準備好了以年為單位來進行迭代。
微軟對 Fluid Framework 充滿了期待，他們相信這個東西能夠重塑行業，甚至重塑網絡本身，也許到明年5月的開發者大會上，能夠看到一個截然不同的 Fluid Framework。
競品分析是UX設計師的標準工具之一， 且用戶體驗設計師的主要交付品之一就是競品分析報告。在設計一個新的方案之前，我們往往會查看其他類似的產品，了解其他人做的相關工作，希望從中找到任何弱點或者優點，并期望在此基礎上進行改進，這將利于你的設計。事實上，競品分析已經不再局限于一種工具方法，更是一種思維模式，如何對比分析，如何批判性的進行比較以及從差異中獲取價值。
UX設計項目會遇到哪些類型的競爭對手？
這個問題可以理解為，我們要分析哪些競爭對手？一般來講，所有UX項目都面臨兩種競爭，一種是直接競爭對手，即業務有直接沖突，涉及到具體的利益沖突，商業沖突。例如滴滴和uber，淘寶和京東。另一種則是“間接競爭對手”，往往針對某些相似的產品模塊，這里的競爭并沒有準確的定義，只是為了比較而給與的一個名稱。 例如你在進行自家產品登錄注冊模塊的設計，此時你不僅僅可以研究一些直接競品，也可以研究其他擁有此功能模塊的產品。而該產品與你的產品并沒有構成競爭的關系，只是提供了一個參考方向。
為什么要進行比較？
關于這個問題有兩個答案，首先，調研競品發掘哪些功能或服務是他們不能做或者沒有實現的，這就是我們的產品可以利用的機會點，以提供新穎的或者說更強大的功能，從而提高產品競爭力。例如順豐快遞首先開創了機器填寫快遞信息的功能，從而大大提高用戶填寫訂單的效率、準確度和滿意度，進一步提高品牌競爭力和服務水平。
其次，檢查其他設計師對相同需求的解決方案必然會對你有所啟發，有利于你從中獲取靈感來優化自家產品。例如信息架構的優化、或者簡單地操作流程的優化。參考競品意味著你可以不斷從中學習，把競品的每個模塊、步驟拆解開來，分析其背后的設計原因及它們如何發揮作用，這將有利于你的產品設計。
參考競品首先意味著你能夠達到和競品同一水平的用戶體驗，因為有了參照標準相當于指路明燈，競品的優秀體驗也會督促你不斷優化自己的產品。但競品雖然為你創造了一個標準，同時也會限制你的思路和想法，使你可能錯過一些更優秀的解決方案，參考競品能讓你追趕別人，但無法讓你完全超越他人。因此僅僅復制是不夠的，必須融入自己的見解且時刻保持創新意識。
對直接競爭對手進行分析
通常，競品分析發生在項目的早期，你或許會尋找市面上是否會有競爭對手，然后嘗試著從競品中尋找優點和弱點，以推動自己的產品。如果沒有競爭對手時，往往可以從目標用戶入手，因為用戶實際上擁有自己的解決方案或者說策略，例如在滴滴流行起來之前，對應的用戶群往往使用出租車來代替出行方式。目標用戶在這之前是如何解決他們的需求的？你應該可以獲得一些間接可比的方案，收集用戶的相關想法有利于推動你的產品設計。
在產品上線后的運行階段，仍然需要做競品分析，此時或許存在一些新興的的競品，雖然是后來者，但往往會在交互、體驗或者運營策略等方面碰撞出一些新的創意。根據競品的功能策略，你需要進行一定的調整，不斷對產品迭代優化。除此之外，產品有時需要做一些追隨趨勢的更新，例如視覺風格、新的交互設計語言等。
如何從間接競爭對手那里獲得靈感
間接競爭對手也會給你一定的啟發，作為一個用戶體驗各種產品時，留心那些優秀的設計，可能是視覺方面也可能是交互方面，總之這些優雅的設計將會成為你的靈感之源。然而所有的設計都有其適用場景及背后的設計原理支撐，在海外設計經驗中一再強調的 context（上下文）就是這個意思。
優秀的設計都是最適合自己的產品和策略的設計，而不是最美觀或最的。因為設計不僅僅包涵體驗更是要兼顧業務。同一個設計在一個地方發揮作用并不意味著移植到其他地方仍然有效。
例如一個簡單的登錄模塊的設計，按照常規經驗，以目前微信的受眾數量做參考，可以無腦選擇微信快捷登錄，這無疑是最便捷的方案，但為什么很多產品仍然采用手機登錄？因為一個注冊的手機號碼能為公司的未來帶來極大的增值，每個號碼背后都是一個用戶，且通過手機號可以對這個用戶進行持續的推廣營銷，如拼多多的短信推廣，移動聯通的電話推廣。
所以，一切的設計都應以設計背景，業務訴求為基本原則來進行，盲目的追尋極限的視覺和效率，盲目的信奉設計潮流趨勢都是不可取的。好的設計和時尚的設計不同，好的設計有持久的價值，是美學和體驗的結合，并以基于心理學社會學的用戶研究為后盾。這樣的設計符合用戶的需求同時能為企業帶來收益。而時尚的設計則會隨著時間流逝而銷聲匿跡。
一味追尋潮流的應用程序設計，公然違背基本的可用性慣例，違背交互設計的基本原理，很有可能在市場中失敗?！狿rototyper.io UX首席負責人Miklos Philips
競品分析時謹記五個原則
為了保證你所進行的競品分析的有效性，需要謹記以下五個原則。
1.理解背后的需求
分析任何設計之前都需要理解設計背后的核心需求，這并不是簡單的查看表面內容，除了交互體驗上的思考，更要深入產品本身，去更多的理解業務層商業策略等方面的內因。每個設計都有對應的場景、上下文甚至各種限制條件。只有理解這些你才清楚這個設計是否適合你的產品，或者是否有一定的參考意義。
比如觀察淘寶的搜索功能你會發現首頁的搜索和店鋪的搜索有很大差異，即首頁的搜索比重要遠遠大于店鋪的搜索。店鋪中的搜索按鈕僅僅展示一個雙指面積的btn，而首頁則是展示一個接近通欄的搜索條。那么分析下來，店鋪的搜索btn小巧精致，簡易美觀是否應該借鑒，答案是看情況。淘寶首頁入口提供的是一級搜索，涵蓋了淘寶百億級別的商品，因此搜索功能的優先級極高。而店鋪商品有限，用戶瀏覽商品往往按照分類，很少使用搜索功能，這種情況下搜索的優先級很低。
因此，理解設計背后的理念，解決的問題、如此設計的原因才是競品分析重點關注的方向。切記浮于表面。
2.確定真正的競爭者
認清自己的競爭者，他們往往并不僅僅是表面的直接對手。事實上應用程序只是一種幫助用戶達成目標的技術手段從用戶角度，有很多可選方向，而你的產品想要獲得成功，你就要做那個體驗最好，滿意度最高的選項?；叵胍幌?，便利貼的功能應用程序是否能實現？答案是肯定的，但現在為止并沒有任何應用程序能夠撼動便利貼的霸主地位。因此，滴滴的競品真的只是其他網約車公司嗎，事實上滴滴最大的競品是出租車。通常，你最強大的對手并一定不是和你一樣的科技產品。
3.通過標準來判斷，而不是個人臆測
每次進行比較都意味著根據某個標準來進行判斷，如何決定兩者的功能孰優孰劣，最好的方法是引入標準或者用數據說話。例如競品某個模塊轉化率高，那必然有其內因。另外，我們可以根據業界的標準來評判產品的可用性體驗，如尼爾森的啟發式評估原則（后面會詳細講到）。
4.盲目模仿是導致失敗的罪魁禍首
在特定環境中行之有效的方法在另一環境中可能根本行不通。每個設計解決方案不僅是針對眼前的問題，而且還針對目標受眾。請記住，良好的設計是仔細的分析研究產生的，需要付出大量的努力來與用理解用戶，定義問題，并 根據上下文構思，最終產出最終設計和評估解決方案。
你可能會說，別人已經驗證了的功能，我們沒必要花費時間去重復測試，但他人的功能是針對特定的場景特定的業務目標，或許并不適用你的產品。所以，在模仿之前，請仔細考慮您的問題與原始設計師的方案匹配程度。
5.用戶測試無可替代
在競品研究中我們需要時刻保持懷疑的態度，在將競品的設計應用于自己的產品之前，需要評估設計背后的需求、場景，以判斷會否適合自家產品。這個過程可以沒有用戶參與，例如選擇專家進行的可用性評估。但最終，在你決定將設計投入自己的產品時，你需要意識到只有真實場景下的用戶測試，才能判斷該設計是否成功。
無處不在的“漢堡菜單”按鈕。最初是Facebook率先取得成功的設計，現在有大量證據表明該設計帶來了很大的可用性問題。通過將圖標與其他導航方式（例如ios的菜單導航）進行比較的A / B測試，發現了這些問題。
時刻留意競爭對手的產品設計有利于你不斷更新和迭代，從而保持競爭優勢，但你必須知道，研究競品只能讓你和它處于一個水平，他不會教給你如何開辟新的想法，如何解決未解決的問題。并且能從競品分析中收獲的有效信息完全取決于你的個人能力和經驗。因此保持質疑，持續思考，以創新意識探索更可能是UX設計師長遠的目標。
NNG的十項UI界面啟發評估的原則
前面提到我們應該通過標準來衡量產品的設計，而不是個人的主觀臆測。尼爾森的啟發式評估原則就是這樣一套可實踐的評估標準，共有十項，主要涉及到用戶體驗、可用性的評估。使用這是個標準能夠評估出大部分的可用性問題。
1系統狀態的可見性
任何情況下都應該顯示易于理解的界面信息和系統狀態，以保證用戶正確執行操作。
這其中其實不僅僅要求“可見”，也要求“隱藏”。因為系統界面的展示目的是使用戶易于理解其中的信息，因此要清晰展示有效信息，同時隱藏無效信息和干擾項。概括來說這一項原則的關鍵在于視覺傳達的效率，如CTA按鈕高亮來聚焦注意力，文字鏈按鈕添加下劃線或箭頭來傳達可點擊的狀態等。
2.系統與用戶習慣的匹配
設計師應根據目標用戶的經驗習慣進行界面設計，如使用符合用戶認知的語言、概念、預測用戶的常規行為方式如單手操作，減輕認知負擔，并使系統更易于使用。
在電腦屏幕右鍵彈出的菜單窗口恰好在鼠標附近，因為用戶當時視覺聚焦于此。移動端閱讀類產品的目錄按鈕總在右下角，因為大部分人使用右手單手操作，而在IPAD端的閱讀產品，目錄置于左下角，因為用戶一般需要雙手持設備，此時左手點擊目錄更符合用戶習慣。
當然，不僅僅要考慮用戶操作習慣，更要考慮用戶的心理預期。這就要用到隱喻，例如按鈕按下后模擬出下沉的視覺效果，再如最早的閱讀類產品模擬真實書架，還原用戶習慣的書架瀏覽查找書籍然后閱讀的體驗。
3.用戶控制和自由
產品應該允許用戶自由控制自己的操作行為，例如可以撤銷重做，或在不同內容間自由跳轉。
4.一致性
界面設計人員應確保在相似的平臺之間維護圖形元素和術語的統一。例如，代表一個類別或概念的圖標在不同的設備上使用時不應代表不同的概念。垃圾桶應當代表刪除、回收等操作，而不是其他的語義。
5.防錯
提前預測可能發生的錯誤，嘗試盡量避免它們，將潛在的錯誤保持在水平。用戶不樂意處理錯誤同時不擅長處理錯誤，為了減少用戶遇到錯誤的，試著消除問題部分。例如驗證碼部分只允許填寫數字，且自動喚起數字鍵盤無法切換字母鍵盤，這樣就防止用戶輸入錯誤信息格式的可能。
6.降低用戶認知負荷
人類注意力是有限的，不要嘗試一次行給用戶灌輸過多信息，試著一次只展示一個核心功能或內容，每個步驟只用來做一件主要的事情。目前主流的注冊流程都遵循這個原則，一次只進行一個步驟，輸入手機號、發送驗證碼、填寫驗證碼、登錄成功。
7.靈活性和效率
使用更少的交互，讓用戶更便捷的完成目標，例如使用縮寫、語音輸入、自動填充等技巧。目前有些產品通過自動填充手機號碼來提高登錄注冊效率，或自動填充短信驗證碼來提高驗證效率，這就是一種優化交互來提高產品使用效率的方式。（但這種方式對權限要求較高）
8.美學原則與極簡設計
減少混亂和多余的元素，不要爭奪用戶注意力，提供清晰可見的導航。根據海外的調研，有三到四成用戶離開一個網站的原因是導航混亂不易理解。
9.幫助用戶識別、診斷錯誤并恢復
采用通俗的語言解釋錯誤的情況并提供解決方案或說明情況。
10.幫助文檔
我們期望不需要說明文檔（類似說明書）也能讓用戶正常使用和產品和解決遇到的問題。但我們仍然需要一定的說明文檔，來解釋特殊情況或常見問題，以保證用戶在需要時能輕易找到解決方案。
文章來源：UI中國
彈窗其實是一個很泛的概念，幾乎所有在頁面中有彈出的行為的操作都能稱之為彈窗，其實是有點混亂，本文旨在梳理它們之間的關系
1，從程序上看，遞歸表現為自己調用自己，遞推則沒有這樣的形式。
2，遞歸是從問題的最終目標出發，逐漸將復雜問題化為簡單問題，最終求得問題
是逆向的。遞推是從簡單問題出發，一步步的向前發展，最終求得問題。是正向的。
3，遞歸中，問題的n要求是計算之前就知道的，而遞推可以在計算中確定，不要求計算前就知道n。
4，一般來說，遞推的效率高于遞歸（當然是遞推可以計算的情況下）
最容易理解就是結合一個經典的例子：斐波那契數列
遞歸求解
int fib(n){
return n < 2 ? 1 : fib(n-1)+f(n-2);
}
遞推求解
int fib(int n){
int fn = 1;
int fn_1 = 0;
for(int i=0; i<n; i++) {
int t = fn
fn = fn + fn_1;
fn_1 = t;
}
return fn;
}
遞推 Inductive 是從1 往 n推(未知)
遞歸Recursive是從n(未知)往1推, 再層層返回
HTML基本概況
HTML文檔基本格式
樣式如下：
注意：文章以下出現的“《》”書名號僅代表大于號“>”和小于號“<”。
主要包括：<!DOCTYPE>文檔類型聲明、《html》根標記、《head》頭部標記、《bady》主題標記。
1.<!DOCTYPE>標記
標記位于文檔的最前面，用于向瀏覽器說明 當前文檔使用哪種 HTML 或 XHTML 標準規范。
2.《html》標記
《html》標記位于<!DOCTYPE>標記之后，也稱根標記。用于告知瀏覽器其本身是一個HTML文檔?！秇tml》標記標志著HTML文檔的開始，《/html》標記標志著HTML文檔的結束，在他們之間的是文檔的頭部和主體內容。
3.《head》標記
《head》標記用于定義HTML文檔的頭部信息，也稱頭部信息。緊跟在《html》標記之后，主要用來封存其他位于文檔頭部的標記，一個HTML文檔只能有一對《head》標記。
4.《body》標記
《body》標記用于定義HTML文檔所要顯示的內容，也稱主體標記。瀏覽器中所要顯示的所有文本、圖像、音頻、和視頻等信息都必須位于《body》標記內。一個HTML文檔只能有一對《body》標記。
HTML標記
所謂標記就是放在”<>"標記中表示 某個功能的編碼命令，也稱為HTML標簽或HTML元素。
1.單標記和雙標記
雙標記：也稱體標記，是指由開始和結束兩個標記符組成的標記?；菊Z法格式如下：
<標記名>內容</標記名>
單標記：也稱空標記，是指用一個標記符號即可完整的描述某個功能的標記?；菊Z法格式如下：
<標記名/>
2.注釋標記
注意：注釋標記中不能嵌套注釋標記
標記屬性
《h1 align = center》標題文本《h1》其中align為屬性名，center位屬性值，表示“標題文本”居中對齊，對于標題標記還可以設置文本左對齊、右對齊，對應的屬性值是left和right。
在鑲嵌結構中，HTML 元素總是遵循“就近原則”。
HTML文檔頭部相關標記
1.設置頁面標題標記
《title》標記用于定義HTML頁面的標題，必須位于《head》標記之內。一個HTML文檔只能有一對《title》《/title》標記，《title》《/title》之間的內容將顯示在瀏覽器窗口的標題欄中，基本語法格式如下：
《title》網頁標題名稱《/title》
2.定義頁面元信息標記《meta/》
《meta/》標記用于定義頁面的元信息，可重復在《head》頭部標記中，在HTML中是一個單標記。
基本語法格式：
1.1《meta name=“名稱” content="值“/》
(1)設置網頁關鍵字
《meta name=“keywords” content="…"》
content屬性的值用于定義關鍵字的具體內容，多個關鍵字內容之間可以用“，”分隔。
（2）設置網頁描述
《meta name=“description” content=“…"》
content屬性的值是用于定義描述的具體內容。需要注意的是網頁描述的文字不必過多。
（3）設置網頁作者
《meta name=“auther” content=“…”》
content屬性的值是用于定義具體的作者信息。
2.1《meta http-equiv=“名稱“ content=”值“
（1）設置字符集
《meta http-equiv=“Content-Type” content=“text/html；charset=utf-8“/》
（2）設置頁面自動刷新與跳轉
《meta http-equiv=“refresh” content=“10；url=http；//www.itcast.cn“/》
HTML文本控制標記
1.標題和段落標記
（1）標題標記
HTML提供了6個等級的標題，即《h1》《h2》《h3》《h4》《h5》《h6》.基本語法格式如下：
《hn align=“對齊方式“》標題文本《/hn》
（2）段落標記
段落的標記就是《/p》基本語法格式如下：
《p align=“對齊方式”》段落文本《/p》
（3）水平線標記《hr/》
含義 屬性值
屬性名：align，設置水平線的對齊方式 可選擇left、right、center三種值，默認為center，居中對齊
屬性名：size，設置水平線的粗細 以像素為單位，默認為2像素
屬性名：color，設置水平線的顏色 可用顏色名稱、十六進制#RGB、right（r,g,b）
屬性名：width，設置水平線的寬度 可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認為100%
（4）換行標記《br/》
使用Enter鍵換行的段落在瀏覽器中實際上并沒有換行，只是多出來了一個字符的空格，而使用換行標記的段落卻實現了強制換行的效果。
2.文本樣式標記
文本樣式標記《font》，用來控制網頁中的字體、字號和顏色?；菊Z法格式如下：
《font 屬性=“屬性值”》文本內容《/font》
屬性名 含義
face 設置文字的字體，例如微軟雅黑、黑體、宋體等
size 設置文字的大小，可以取1~7之間的整數值
color 設置文字的顏色
注意：XHTML中不贊同使用《font》標記，可使用CSS樣式代替《font》來定義文本的字體、大小和顏色。
3.文本格式化標記
標記 顯示效果
《i》《/b》 字體以粗體方式顯示
《i》《/i》 字體以斜體方式顯示
《s》《/s》 字體以加刪除線方式顯示
《u》《/u》 字體以加下劃線方式顯示
4.特殊字符標記
XSS攻擊是什么
簡介
攻擊原理
例子
防御方法
簡介
XSS(Cross Site Scripting, 跨站腳本攻擊)又稱是 CSS, 在 Web攻擊中比較常見的方式, 通過此攻擊可以控制用戶終端做一系列的惡意操作, 如 可以盜取, 篡改, 添加用戶的數據或誘導到釣魚網站等
攻擊原理
比較常見的方式是利用未做好過濾的參數傳入一些腳本語言代碼塊通常是 JavaScript, PHP, Java, ASP, Flash, ActiveX等等, 直接傳入到頁面或直接存入數據庫通過用戶瀏覽器閱讀此數據時可以修改當前頁面的一些信息或竊取會話和 Cookie等, 這樣完成一次 XSS攻擊
例子
http://example.com/list?memo=<script>alert(“Javascript代碼塊”)</script>
http://example.com/list?memo=<strong οnclick=‘alert(“驚喜不斷”)’>誘惑點擊語句</strong>
http://example.com/list?memo=<img src=’./logo.jpg’ οnclick=‘location.href=“https://blog.csdn.net/qcl108”;’/>
以上例子只是大概描述了方式, 在實際攻擊時代碼不會如此簡單
防御方法
防止 XSS安全漏洞主要依靠程序員較高的編程能力和安全意識
去掉任何對遠程內容的引用 如 樣式或 JavaScript等
Cookie內不要存重要信息為了避免 Cookie被盜, 最好 Cookie設置 HttpOnly屬性防止 JavaScript腳本讀取 Cookie信息
不要信任用戶的輸入, 必須對每一個參數值做好過濾或轉譯: (& 轉譯后 &), (< 轉譯后 <), (> 轉譯后 >), (" 轉譯后 "), (\ 轉譯后 '), (/ 轉譯后 /), (;)等
寫在前面
過去幾年中，我們的積極反應促使我們繼續探索和分析主要設計領域的新趨勢。盡管大多數趨勢都是去年發生的變化，但到2020年，我們仍有一些新趨勢值得追求。最重要的趨勢是與技術有關的趨勢，以及它們的發展趨勢，以及它們如何影響設計領域。
總體趨勢
2020年的主要趨勢動作設計與動畫， 對于2020年，我們認為運動設計是主要趨勢，因為我們在所有設計領域都遇到動畫，從小的交互到徽標和UI，一切都在變化。動畫內容正在進入現代世界，在現代世界中，書面內容沒有以前那么吸引人。 動作設計正確實施后，可使廣告系列的信息更快，更正確地傳達給受眾。
01. theQoos品牌插圖由 閔慶 02 軍團賽季 3由 尼克Scarcella 03. 溶劑-使大麻銀行公開賽由 BluBlu工作室 04 云服務（動畫圖標）由 亞歷山大Baleev 05. 病毒性肝炎由 昂布爾集體 ， 蒂博ZELLER ， 喬納森Plesel 06 。 UXC_Design2020_Project研究通過 Donerzozo
目錄
1. UI / UX
2.插圖
3.動態圖形
4.平面設計
5.基于技術的趨勢
6.包裝
7.版式
8.趨勢工具
1. UI / UX
1.1暗模式（Android Q和iOS 13）
暗模式是2020年的新趨勢，Android引入了兩種類型的暗模式，分別稱為“強制暗模式”和“系統暗模式”。微軟通過在其電子郵件應用程序中展示其暗模式擊敗了谷歌，但谷歌迅速推出了自己的針對Android 10的Gmail應用程序的暗版本模式。
有了介紹此更新的大公司，許多設計師將選擇在他們的應用程序或站點中使用暗模式，因此希望在來年看到越來越多的暗模式。
1.2粗體顏色
在過去的兩年（到2020年）中，強烈的色彩已成為重要的趨勢。大膽的色彩豐富，明亮，甚至極富活力。它們可以是主要或次要顏色。
01. EMART UX / UI可再生的通過 加X， 李寶藍 ， Sabum卞 ， 熙榮， 尤金全度妍 ， ? ? ?， Bongho彩 02 NSH通過 索菲婭費多托娃 03. 埃爾多拉多賭場-移動Web UI，應用程序ü用 的Loredana PAPP-Dinea ， Mihai Baldean ， Milo主題 04. mmcité+網站由 工作室9 茲林，帕維爾Valek 05. 自動哈克系列＃21-25由 安德烈福 06. Flipd應用程序通過 ESTUDIO PUM
1.3 UI中的插圖
多年來，插圖一直是設計中最強勁的趨勢之一。插圖是對概念的直觀解釋，可以使用戶更好地理解產品背后的思想。除了一些精美的插圖使這一概念獨具匠心外，它們還可以更快地傳達信息。
01. 海妖重新設計，以 西爾Theyssens ， 安東尼科拉德 02 浮雕-醫療項目由 馬丁Pankiewicz 葛爾若， 米沃什Po?arkowski 03. abuk：圖書封面設計有聲書商店到 謝爾蓋Valiukh， Tubik工作室 04.我llustration系統GOL到 ESTUDIO PUM 05 。 智能家居的應用程序- IOS到 瑪麗亞Osadcha 06.斯基林貿易（skilling.com） - Loredana酒店PAPP-Dinea ， 米哈伊Baldean
1.4講故事
設計中的講故事是關于幫助用戶在平臺上的旅程，從而使他的體驗盡可能輕松和流暢（在UX設計中）。一個好的故事可以幫助用戶更輕松地了解產品。為了講述一個故事，我們可以使用一個特別創建的角色，將這個角色賦予他個性，我們創建一個故事和一個沖突，最終由我們的產品（UI設計）解決。這是產品設計中講故事的基礎。講故事在UI和UX中都使用，并且基于相同的原理，但實現方式有所不同。
01. 余吳-旅行計劃應用由 朱莉張庭 02. UX / UI | 食品外賣應用由 康斯坦丁Seredkin 03. COOC通過 cuneyt仙
1.5動畫圖形和微交互
正如我們所說，動態圖形是今年的趨勢，它在UI設計中也有很強的表現，它為插圖增添了力量，使創意更易于吸收并保留在用戶的記憶中。
微交互在2018年成為第一流，但這一趨勢值得在2020年關注。它們是UI設計中極其重要的趨勢，這使基本應用程序/網站與非凡的應用程序/網站有所不同。微交互在使用戶了解系統的工作原理并引導其獲得更好的體驗方面起著至關重要的作用。
如果您是UI設計師，但尚未在工作中使用微交互，建議您這樣做，因為到2020年，沒有UI的任何UI設計都將是非?；镜摹?nbsp;
01. UI / UX | 智能藥房應用的 阿納斯塔西婭中號， 謝爾蓋Nikonenko UX 02. 氣候與動物：滅絕危機網站UI / UX 由 丹尼爾·譚， 達芙妮龍 03 飛素食者由 帕特里夏賴納斯 04. UKRPOSHTA。烏克蘭國家郵政局的移動應用程序，伊洛娜·金（ Ilona Kim） 05 . Tagir Tikeev 的聾人報警應用程序
1.6用戶界面中的視頻
到2020年，信息必須非常快地到達用戶手中，最好通過視頻內容來完成。您選擇通過動畫或經典電影來解釋產品，視頻內容對于任何網站或應用程序都是必不可少的。
1.7功能
UI設計中的一個重要部分是功能，即，根據其目的和功能選擇每個元素。許多人認為您必須在設計和功能之間進行選擇，但是在新技術的幫助下，這兩種技術可以很好地融合在一起并相互補充。設計負責引起對站點或應用程序的注意，其功能使體驗變得更輕松。它使用戶可以更快地找到信息。
01.斯基林貿易（skilling.com） - Loredana酒店帕普用餐 ， 邁克爾Baldean
1.8注意細節
在UI設計中，對細節的更多關注非常重要。從按鈕，圖標，加載到導航到細微的細節，都可以打造出非凡的設計。隨著新技術的出現，我們在UI中必須注意的細節始終在變化。
在明年，我們將看到越來越少的按鈕，以及更多基于手勢的導航。例如，后退按鈕（Android的導航常用）在Android 10中正式消失。
01. FLYR的視覺形象和營銷網站的 Ramotion
02. 鬧鐘應用聾人通過 Tagir Tikeev
1.8漸變
幾年來，我們一直在談論設計中的漸變，這種趨勢在2020年將繼續保持強勁，因此值得一提。新鮮的色彩是成功漸變的完美選擇。它們可以用于按鈕，圖標，插圖，甚至用于排版。
01. Wavecut - IOS應用程序通過 Eleken局 02. 抗憂郁癥的應用程序-產品設計（UX / UI）由 安娜Arutiunian
03. 保羅回腸-電影音樂作曲家，制作人，DJ，Perfomer 通過 的Loredana PAPP-Dinea ， 米哈伊Baldean ， 米洛主題 04. ITEXIA通過 下一頁局 ， 亞歷克斯海鷗 ， Jegor Walowski
2.插圖
2.1角色設計
角色設計包括定義一個支持整個概念的角色。最重要的是，通過繪圖，設計師向角色灌輸了強烈的個性。您在應用程序或網站中遇到的虛擬助手是角色設計的一個很好的例子。
01. 新微小的事情?兒童圖畫書由 Vuon插圖 ， 榮阮 ， 榮范 02 的Adobe X Createfulness由 邁特弗蘭基， 馬蒂厄Tarwane 03。 3D人物V2由 安東尼奧·佩蒂特Cwirko 04. Malayali由 丹尼·何塞
2.2紋理
插圖和紋理很好地結合在一起，可以創造出令人難忘的構圖。從粒狀紋理到預制的筆觸，您可以找到許多想法來為插圖添加紋理，也可以手動創建它們。瀏覽網絡時，您可以找到許多可以在插圖中使用的紋理，預制筆刷和工具。
01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 飯 太稀
2.3平面插圖
在過去的幾年中，我們到處都可以看到平面插圖。它們仍然處于趨勢中，但現在有了一個新的組成部分：對每個元素應用細線。大多數藝術家都選擇使用細的黑色筆觸，但也可以將其上色，使其陰影比所涉及的對象暗。
01. BILLY KENNY -剛剛為音樂通過 桑戈BANG 02 Babelia - Lecturas對維拉諾由 米格爾·安赫爾Camprubí 03. 拳擊貓-第一滴血由 Felms 04. COUSCOUS STUDIO | 解釋器VIDEO 由 哈立德abdelazi ?
2.4等軸測圖
是的，等軸測圖仍然在這里。它們主要可以在UI設計中找到。隨著人們對加密貨幣的興趣不斷增加，這種趨勢似乎已經生效，但是在2019年它已經發展了，現在我們在其他業務領域中發現了這一趨勢。
01. 龐克市由 溫祚_ 02 FastCompany -等距號由 阿圖爾Tenczynski 03和05. 抗體亞型由 馬里奧·德?梅耶爾 04. 松弛插圖由 京張
2.5 3D
隨著效率越來越高的軟件和工具的出現，3d渲染已逐漸發生變化。3D插圖非常受歡迎，因為與2D插圖不同，它提供了更逼真的圖像。
01. 游戲巴伊亞之家由 Miagui 02 天平 由 卡韋薩Patata工作室 03. 城堡毀滅者由 穆罕默德Chahin 04. Eyoo家庭3D插圖由 Baianat 05. 個人插圖第1卷由 巴勃羅·馬林 06. 一個人旅行通過 亂伊萊恩
2.6超大膽的色彩
大膽的顏色非常適合插圖。它們營造出歡樂的氛圍，使角色脫穎而出，并在圖像背后展現故事。
01. 瑪莎·希肖娃（Masha Shishova）攝于莫斯科的 STRTFD咖啡壁畫 02. 作家- 利奧·夏目（ Leo Natsume）的移動互聯網思想 03. 可口可樂圓罐插圖由塔尼亞·雅庫諾娃（ Tania Yakunova）
3.動態圖形
3.1 3D視頻
在2020年，無法想象沒有3D設計的運動。設計的這個分支打開了一個世界的大門，在這個世界中，只有想象力是極限。我們可以在廣告，電影，游戲，廣告活動等中找到3d。
01. 龐克市由 溫祚_ ， 視覺設計藝術的影響
3.2視頻+動畫插圖（混合媒體）
拍攝的視頻，動畫插圖以及有時是靜止的照片的結合可以產生非凡的效果。2d或3d插圖可創建令人難忘的視頻，從幾行運動到3D真實人物甚至是現實生活中不存在的復雜視覺效果。
01. Coppel /回到學校通過 大量工作室 02 PWR 由安娜·霍查， Edvina元
3.3 2D動畫-說明性視頻
2D動畫專注于創建故事和角色，并在創作過程中使用矢量。當您想要廣告系列或產品的說明性視頻時，2D可能是理想的選擇。在一個總是忙碌而又沒有時間閱讀的世界中，說明性視頻對于任何網站都是必不可少的。
01. Freelive 由 工作室Infografika ， 謝爾蓋·薩多斯基 ， 阿納斯塔西婭Alterka ， Arsentiy Lesnik賓館 ， 尤里·阿姆斯特朗 ， 阿林好， 喬治VALD ，馬克西姆Tleubaev
3.4動畫徽標
您已經了解到動畫是2020年的“必備”，為了保持競爭力，我們還必須將它們集成到徽標設計中。許多公司已開始對其徽標進行動畫處理，以引起人們的注意。這也是徽標設計的主要趨勢。
01. 杯茶由 維多利亞伍 02 - 07. 運動野獸?Logomachine。動畫標志的 運動設計學院， 維克托Villamarin的， 波格丹·杜米特留， Logomachine .NET ， 亞歷山大·庫茲涅佐夫， 扎克李， 丹尼斯Siurin ， 斯坦尼斯拉夫·馬爾琴科， 莉扎薇塔Tsareva ， Supremus Levenus ， 安東·福明， 埃米爾Khafizov ， 膽堿哈達
3.5混合動畫2D和3D集成
這一趨勢不是一個新趨勢，但絕對值得一提。混合動畫就是使用為此創建的特定軟件將2D與3D結合在一起。
4.平面設計
4.1平面設計中的3D
盡管2d壟斷了設計的這一分支，但3d可以為最終概念添加額外的內容。3d渲染可以采用插圖，動畫或字體的形式。
01. 畫像由 費爾南多·多明格斯Cózar 02. NASA | 太空時代的 工作室-JQΔ 03. 美國宇航局X BBC | 不自然世界的 工作室，JQΔ
4.2雙色
精益求精的概念可以完美描述這一趨勢，設計師在其中創造出大膽的元素，并帶有優雅的手感和強烈的對比。這種趨勢是創建更易于訪問的打印的理想選擇，因為某些打印技術如果顏色更多，則價格會更高。
01. 冬季公開賽'18由 Kinoto Studio， Romina Rios， Luc Geoffroy 02 Synticate©由 斯捷潘索洛德科夫 03. TIGER在博物館由 de_form工作室， 諾拉demeczky ， 的Eniko DERI 04. 刻字系列IX由 拉斐爾·塞拉
4.3光學感知藝術
歐普藝術作品是抽象的，有許多知名的黑白作品。通常，它們給觀看者留下動感，隱藏的圖像，閃爍和振動的圖案或腫脹或翹曲的印象。（來源：wikipedia.org）。
這種趨勢給人以動靜的印象，但是以一種靜態的方式。如果要實現在印刷海報中移動圖形的想法，這是最合適的方法。
01 02 東京電影節共混物由 梅賽德斯巴桑 ， 的Adobe住 03. 海報-第一卷由 Xtian米勒
4.4平面設計中的插圖
插圖在設計的所有領域都非常重要，因此我們在圖形設計中也可以找到它們。2D插圖在現在已經非常流行了幾年，并且即使在2020年，也將繼續成為設計師的最愛。
01. GOOSE赫爾-海報由 Ewelina鵝 02 CAT酒吧和舞廳/ 2019至 kissmiklos， Eszter薩拉
4.5動畫海報
動畫無處不在，我們在設計的各個領域都可以找到它們，當然它們也存在于數字海報中。動畫可以將2D與3D混合在一起，效果令人著迷。
01 節地鐵地鐵由 Bzoing， 維吉尼貝達德 02. 失敗的Windows由 皮埃爾Kleinhouse， 轄Zivony
4.6復古合成波
復古合成波是一種在80年代出現的趨勢，但一旦好萊塢開始發行該十年的電影后便開始重新出現。隨著《陌生人事物》系列的成功，這一潮流再次開始流行。
01. 雞尾酒和夢想通過 Gjorgji Despodov 02. CINEMAX由 杰森巴爾巴 03.奇怪的事情（Netflix.com）
4.7瑞士設計，達達主義，包豪斯
20世紀最重要的圖形設計運動始終是最好的設計師的靈感來源。這些樣式值得一提，因為它們始終是的，遵循它們所施加的規則幾乎不可能在設計中犯錯誤?？偟膩碚f，這些運動強調版式，無襯線字體（Helvetica于1957年在包豪斯舞臺上創建），幾何形狀，簡單的線條，體積和顏色。
01. 瑞士海報01（版式方面）由 Mehman Mammedov 02. 黃視VOL.3通過 維奧萊納齊名
4.8大的不間斷彩色空間
大型，不間斷的色彩空間將在明年成為非常流行的趨勢。它們與大膽的字體搭配使用，可以在圖形設計，產品設計以及ui中找到。
01. Synticate©由 斯捷潘索洛德科夫 02 Havaianas人字品牌內容由 約翰Vernizzi 03. Kekkil?-BVB的 Kurppa Hosk
4.9超極簡主義
極簡主義的設計僅使用必需品，非常有限的調色板和簡單的形狀來打造令人難忘的身份。放棄多余的元素，使所有設計項目都有目的。要創建超極簡主義的設計，您需要使用盡可能多的白色/負空間，簡單的配色方案和一些基本的幾何形狀。
01. Heim雜志，第3頁， Sasha Yaguza撰寫 02. Andrei Gheorghe- DADA-通過 moodley品牌標識發布
5.基于技術的趨勢
技術通過智能設備和嶄新的理念正在徹底改變我們的生活。這些新技術使設計師已經開發出進入當前趨勢的新功能。人工智能，機器學習，虛擬現實和增強現實正在影響設計師的思維方式和創作方式。
5.1增強現實的移動應用
隨著蘋果和谷歌推出自己的AR開發平臺ARKit和ARCore，很明顯，整個世界將面向增強現實技術。
許多大品牌已經在其應用程序中采用了這項技術，而那些尚未采用這種技術的公司必須認真考慮如何使用戶在這種新現實中與之交互。
有一些AR交互可用于創建直觀的應用程序。第一個是將應用程序固定在手機屏幕上時。另一個是AR UI與用戶周圍的環境相關聯時。最常用的互動方式之一
是當UI與對象相關并通過掃描特定項目觸發時。該動作將數字動畫連接到特殊的“標記”。
有關更具體的AI規則，請閱讀Apple指南，以提供“將真實的虛擬對象與現實世界無縫融合的沉浸式，引人入勝的體驗”。
5.2 AI，ML，聊天機器人和虛擬助手
聊天機器人是一種 通過聽覺或文本方法 進行 對話的 軟件。[1] 此類程序通常旨在令人信服地模擬人類作為對話伴侶的行為，盡管截至2019年，它們仍遠遠不能通過 圖靈測試。[2] 資料來源：維基百科
人們還不習慣與AI對話，因此設計師（和開發人員）的工作很大一部分是使流程簡單并建立信任。他們需要幫助人們了解系統可以做什么以及如何使用它。
使用AIML（人工智能標記語言）設計和編寫腳本聊天機器人，是出色的UX設計人員的魔力可以發揮作用的地方。
大多數使用聊天機器人的公司都選擇說明助手來為AI做鬼臉。以下是一些在其UI設計中使用聊天機器人的品牌：Spotify，星巴克，萬事達卡，絲芙蘭，Lyft，必勝客。
5.3 VR
大多數人將VR與游戲行業聯系在一起是有充分理由的，但是隨著所有大型科技公司開發VR套件和應用程序，我們可以肯定地說，我們將發現使用和享受這項技術的新方法。VR已經用于教育，醫療保健，旅游，房地產或建筑。
5.4語音用戶界面（VUI）
語音用戶界面（VUI）使用語音識別 來理解語音命令和問題，通常是文本到語音以播放答復，從而 使語音與計算機的人機交互成為可能 。語音命令設備（VCD）是受語音用戶界面控制的設備。資料來源：維基百科
去年，使用互聯網連接的設備的人中有40％每月至少使用一次語音助手，與去年相比，這一數字增加了10％。
6.產品設計
6.1包裝中的圖案
在過飽和的包裝市場中，很難創造出可以脫穎而出的新產品，因此設計師要回到根源并創造出使產品在擁擠的零售貨架上脫穎而出的樣式。幾何，花卉，浪漫或單色圖案是任何產品包裝的大膽選擇。
01. 飛行山羊咖啡由 妮可LaFave 02. VITA SPA皮膚 由 DWYW 03. 巧克力包裝設計由 算術 04. 100手繪無縫的圖案和形狀 的 Arseny Samolevsky
6.2包裝插圖
插圖一直是包裝設計中的重要元素。通過他們，我們可以講述一個故事，使目標受眾可以更好地理解該概念背后的歷史。平面插圖已經存在了數十年，并且很可能會一直處于流行趨勢。
01. 布里格斯原件由 熙宰金 02 天鵝絨咖啡杯 由 安東Malishev， 呵呵卡羅拉 03. 廢物不包括廚房-品牌打造的 嘗試和真正的DESIG ň04 家，甜蜜的壽司兒童 通過 精明的機構， 馬里亞納星火 05. Cerveza塔Maleante通過 Antonay
6.3留白
極簡主義是設計的基本原則，而今天它又是新事物。它放棄了設計中不需要的所有內容，并用負空間代替了它。這種趨勢將功能帶到了最前沿，并專注于簡潔的設計，使版式脫穎而出。
01. 香味精油 由Y u型簡林， 黃惡嗯-祥 ， 智泰蓮 02. 重塑品牌理念，為BodriPincészet由 克里斯托夫Gáthi
6.4單色和兩種顏色
首先，在調色板中僅使用1或2個色調似乎有些限制，但它們可以創建非常強烈的視覺識別感。僅使用一種或兩種顏色，就可以保持簡約的外觀，放棄所有多余的東西。結果是精美，高雅的產品令人賞心悅目。
01. Zerbet冰糕由 才林賈爾斯 02. 貝利啤酒 由 埃德大廳 悉尼， 葉卡捷琳娜Leontyeva ， 波阿斯孫
6.5大膽的顏色
大膽的顏色和漸變仍然是非常強烈的趨勢，這種趨勢將在2020年持續。使用這些顏色，您可以創建令人難忘的產品。
01. 極簡主義和享樂主義：Fabula Branding 重新設計了 千年品牌
02 紋身商城 通過 Openmint工作室， 葉卡捷琳娜Teterkino ， 煙， 葉戈爾Kumachov
03. Organic by Larissa Kendrik 和 加布里埃爾· 沙茨曼
04. VIZOU -老花眼鏡 的 工作室開頭語， 阿克塞爾杜馬克
05. 包裝的調味開心果由 米拉Katagarova
6.6注意細節（受新藝術風格啟發）
注重細節的包裝比以往任何時候都更受歡迎。設計師選擇這種趨勢是因為它賦予了產品真實性。這種趨勢使我們以現代方式思考經典。
01. HYWILDE由 查德·邁克爾·工作室 02 AMSTEL KARGO IPA通過 卡帕羅設計船員
03. 大島咖啡烘焙-咖啡咬傷的 農場設計
6.7包裝中的講故事
到2020年，品牌將不得不重新考慮其產品和包裝。品牌必須講述一個故事，以幫助客戶體驗產品的本質。這可以通過為包裝創建視覺和敘述身份來實現。
01. 喙接通過 骨干品牌推廣 02. Colorea用t 骨干品牌
7.版式
7.1粗體印刷
粗體印刷術是設計中的重要趨勢，它取代了圖像作為主要元素。勇敢的排版可以在網頁設計和圖形設計中發揮作用。
01. 埃里克·林格（Eirik Lyng），作者： 埃里克· 赫斯特雷（ErikHerrstr?m）； 02. 包豪斯（Bauhaus_100）（x3），作者： BunkerType（JesúsMorentin）
03. UCCA當代藝術中心北京由 布魯斯·莫設計（BMD） ，耶勒馬雷夏爾
7.2小寫
越來越多的應用程序使用完全小寫的文本，非常易于閱讀，并且完美地融入了簡約和現代的設計中。在明年，我們絕對必須關注這一趨勢。
01. Autea品牌和網頁設計由 米哈爾Markiewicz 02 山大食品公司 CI由 臣藤田/ tegusu公司 03. Aquality品牌的 哈坎Fidan的
7.3自定義字體
盡管自定義字體沒有什么新意，但我們將看到這種趨勢越來越多地出現在設計中，尤其是在徽標和海報中。這種做法在大品牌中更常見，因為生產專用字體可能會非常昂貴，但是設計人員可以對現有字體進行少量調整，結果可能會非常獨特。
01. Think8全球研究院通過 勃洛克設計 02 ZINEZ?//設計周期由 芭芭拉·卡托納 ， 媒體與設計系埃格爾 03. 式設計'19通過 TRüF創意 04. Cako字體由 維奧萊納齊名
7.4動力學排版
就像我們說的那樣，動畫在設計中無處不在，因此在排版中也很常見。動態字體使用小的和簡單的交互作用來移動和移動屏幕上的字體。這種簡單的技術可以處理文本并創建最終產品，該產品保留在查看器的內存中。
01和02. Grafika ， Gimmick Studio設計 。03＆04. 增強現實與動作排版，作者： Alex Slobzheninov
7.5堆疊字體
堆疊文本可能是一種現代化的解決方案，可以吸引您注意基本信息。我們可以在網頁設計，應用程序設計和圖形設計中看到這種趨勢。
01. L'嗡通過 Atipus巴塞羅那 02 期刊由 杰瑪馬奧尼 03. 海報收藏| VOL.8由 羅馬發表 04. SMLXL由 梅麗莎Baillache， 墊新郎， 杰森·利特爾
8.趨勢工具
8.1 Adobe Spark
Adobe Spark是Adobe Systems 開發的 用于移動和Web的媒體創建應用程序的集成套件 。[1] 它包含三個獨立的設計應用程序： Spark Page， Spark Post和 Spark Video。（來源：WIkipedia）
他的免費Adobe Spark Web應用程序可與Spark Page，Spark Post和Spark Video iOS移動應用程序同步 ，從而使用戶可以從任何設備創建，編輯和共享其視覺故事。
[3] 這三個設計應用程序允許用戶創建和設計可用于企業，教育，社交媒體營銷人員等的視覺內容。[4] Spark Gallery突出顯示了使用該應用程序的人們所做的不同項目。使用這三個應用程序時，用戶可以導入圖片或搜索圖片。
8.2繁殖
Procreate是 由Savage Interactive針對iOS開發和發布的 用于 數字繪畫的 光柵圖形編輯器 應用程序。針對iPad的藝術可能性而設計 ，并且適合從初學者到專業人士的藝術家。
它提供130多種逼真的畫筆，多層， 混合模式， 蒙版， 過程視頻的4K分辨率導出 ， 自動保存以及許多其他經典和原始的 數字藝術 工具。除光柵圖形外，該軟件的編輯和渲染文本和矢量圖形能力有限 。（來源：Wikipedia）Procreate是2018年App Store上最暢銷的應用程序。
8.3 Adobe XD
Adobe XD是 由Adobe Inc開發和發布的 用于 Web應用程序 和 移動應用程序的基于矢量的 用戶體驗設計工具。它適用于 macOS 和 Windows，盡管有適用于iOS 和 Android的版本 可幫助直接在移動設備上預覽工作結果。XD支持 網站線框圖，并創建簡單的交互式點擊型原型。（來源：維基百科）
作者授權
總結
每一年每一個時間段都會有新的趨勢，學會的辯證的眼光去看待便是最大的智慧。世界一直都在變，趨勢也是。保持學習和探索的心不變就是對自己熱愛的事情最好的回應，念念不忘，必有回響。共勉！
轉自：站酷-木七木七
Chartistic是一款通過交互快速編輯數據可視化圖表的app。本文通過對“Chartistic”app進行產品體驗與分析后產出的PRD文檔。該文檔由幾個板塊組成：全局說明、產品說明、頁面詳細功能說明等。
一、文檔綜述
1.1文檔輸出環境
1.2產品簡介
1.3產品總結
二、全局說明
2.1鍵盤說明
2.2按鈕說明
2.3默認設置
2.4限制設定
2.5頁面交互
三、產品說明
3.1產品操作流程
3.2產品功能導圖
3.3頁面流程
四、頁面詳細功能說明
4.1歡迎頁
4.2首頁
4.3圖表編輯頁
4.3.1柱狀圖/折線圖/面積圖/餅圖圖表編輯頁
4.3.2智能剪貼畫編輯頁
4.4X軸Y軸編輯頁（柱狀圖/折線圖/面積圖/餅圖）
4.5設置編輯頁
4.5.1柱狀圖/折線圖/面積圖設置編輯頁
4.5.2餅圖設置編輯頁
4.5.3智能剪貼畫設置編輯頁
4.6圖表完成頁
五、總結
Chartistic，一款備受好評的小眾數據可視化app。
在這個到處都充斥著數據，以數據為導向的年代，日常辦公中隨時隨地都有可能需要對或多或少的數據進行可視化處理來幫助分析與演示。
雖然有很多的功能強大的工具可以創建圖表，但是卻沒有多少工具可以使創建更簡單、更具有交互性。
Chartistic無需登錄，打開即用，在移動端以交互的方式編輯數據，一分鐘內創建漂亮的柱狀圖、折線圖、區域圖和餅狀圖。將圖表以圖像的形式導出，并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!
交互便捷，操作簡單的它已在43個國家/地區投入使用。在新加坡、泰國、菲律賓和越南，名列App Store的年度十佳應用榜單。上線起至今共入選 App Store 精品推薦 9 次，下載量累計24萬次 。
目標用戶：需要對少量數據迅速進行可視化處理的辦公人群
產品定義：快速、簡單的移動端數據可視化工具應用，導出圖表作為PPT等演示工具的補充。
產品特征：
在不同頁面需要輸入編輯時，對應的彈出鍵盤的類型，數字鍵盤只能輸入正數
圖表編輯頁面：
X軸Y軸編輯頁面：
設置編輯頁面：
新建圖表時
圖一
圖二
圖三
圖四
頁面名稱：首頁
入口：歡迎頁后自動跳入
頁面說明：
序號1：點擊出現其他鏈接彈層，首頁頁面置于底部并虛化（如圖三）
序號2：點擊出現新建圖表類型彈層，首頁頁面置于底部并虛化（如圖二）
序號3：
序號4，5：點擊關閉彈屏，首頁頁面置于頂部并解除虛化
序號6：點擊快捷處理按鈕消失，回到首頁，在首頁圖表列表第一個位置添加復制的圖表
序號7：點擊彈屏關閉，快捷按鈕消失，回到首頁，該圖表刪除，列表中該圖表后面的圖表前移填充空缺位置
4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁
圖5
圖6
圖7
圖8
圖9
頁面名稱：柱狀圖/折線圖/面積圖/餅圖圖表編輯頁
入口：
頁面說明：
主頁面：左滑展開展開設置編輯頁面，下滑展開X軸Y軸編輯頁面
序號1：點擊返回首頁
序號2：點擊進入圖表完成頁面
序號3：點擊圖表類型切換為折線圖，數值背景等設置不變，折線顏色為柱狀圖同一風格的單個顏色（如圖6）
序號4：點擊圖表類型切換為面積圖，數值背景等設置不變，折線與面積顏色為柱狀圖同一風格的單個顏色，折線的顏色比面積顏色深一個色號（如圖7）
序號5：點擊圖表類型切換為餅圖，數值背景等設置不變，配色也不變（如圖8）
序號6：單擊–切換圖表顏色風格
序號7，17，18：按住上滑/下滑–修改圓點高度，上方或者下方的對應數值一起修改，左側提示目前高度對應的數值，修改值在設定的Y軸最大值與最小值之間
序號8，9，10，12：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊展開X軸Y軸編輯頁面
序號11：
序號13：點擊后小圈即序號7變成刪除符號如圖9，單擊刪除符號刪除該組數據，當刪除至只剩一組數據時刪除符號變回小圈，不可再刪除
序號14：點擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設置按鈕，隱藏后圖表變為左向，單擊后以上按鈕出現
序號15：點擊展開設置編輯頁面
序號16：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊輸入標題
序號19：點擊餅圖需要修改占比的目標扇形后出現兩個半圓形按鈕，按住按鈕滑動分隔線調整目標扇形角度，按鈕相鄰一邊的扇形同時被增大/減小角度，餅圖中間提示目前目標扇形角度對應的占比
4.3.2 智能剪貼畫編輯頁
頁面名稱：智能剪貼畫編輯頁
入口：
頁面說明：
主頁面：左滑展開展開設置編輯頁面
序號1：按住上下滑動更改有色部分的高度，左側占比數值一起更改，更改范圍為0%-100%
頁面名稱：X軸Y軸編輯頁面
入口：
頁面說明：
餅圖沒有編輯X軸名稱按鈕與編輯Y軸名稱按鈕
序號1：點擊保留編輯結果，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號2：點擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號3：
序號4：
序號5：點擊編輯文本框與數值框之間出現小刪除按鈕即序號4，點擊刪除對應的該組數據
異常提示：
頁面名稱：設置編輯頁面
入口：
4.5.1 柱狀圖/折線圖/面積圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
值設置功能
頁面說明：
序號2：最大值最高可設置為10000，最大值設置的值需要大于最小值，僅可編輯為整數
序號3：最小值最小可設置為0，最小值設置的值需要小于最大值，僅可編輯為整數
異常提示：
網格設置功能
頁面說明：
序號4：可見性為關閉狀態時，行數與每一間隔的值無法選擇與編輯
序號5：初始默認值為10，可編輯范圍為【0~15】，僅可編輯為整數
序號6：對齊條開啟狀態見圖，在圖表編輯頁面滑動所編輯的數據對應到Y軸上的數值（圖中的0、100、200、300等數值）時停頓一下，左側提示所對應的數值；滑動編輯的數值（如323、546等）不在Y軸上時，不顯示左側的數值提示
序號7：簡單圖表僅保留圖表主體形狀，如上圖
序號8：初始默認值為100，僅可編輯為整數，每一間隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】這個范圍內，考慮到（最大值-最小值）/輸入的間隔值 得到的行數有可能不是整數的問題，實際顯示的行數為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數
異常提示：
邊框設置功能
圖例設置功能
背景設置功能
頁面說明：
序號10：主題文字注釋
序號11：四種主題單選，設計出圖標作為按鈕外觀，下方會出現對應文字注釋，所選擇的背景按鈕外層加一圈黑色示意
圖表樣式設置功能
頁面說明：
序號9：柱狀圖/折線圖/面積圖樣式說明如圖
4.5.2 餅圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
表格設置功能
頁面說明：
豎向表僅可選擇左對齊或者右對齊，橫向表可選擇左對齊/右對齊/居中。
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
餅圖樣式說明如圖
4.5.3 智能剪貼畫設置編輯頁
圖像搜索功能
頁面說明：
序號1：僅可輸入英文名稱搜索，無編輯內容時文本框內容為Search，字體淺灰色，輸入內容后字體變為黑色
異常提示：
當移動端無網絡時，搜索框下方“在線搜索圖像”更改為“連接中斷”，搜索框點擊無反應
標題設置功能
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
智能剪貼畫樣式說明如圖
頁面名稱：圖表完成頁
入口：
頁面說明：
序號1：點擊返回首頁
序號2：點擊進入圖表編輯頁面
序號3：點擊導出保存到本地或者分享
以上便是我本次倒推撰寫的Chartistic的產品需求文檔，格式參考倒推“潮汐”APP的產品需求文檔。
這款App是一款很實用的手機應用，交互很有特色，因為過于追求操作的簡便，導致功能局限比較大，對于App的未來優化方向，筆者認為可以在以下幾個方向嘗試：
這是本人第一次撰寫的產品需求文檔，一定有諸多不足，希望各位前輩不吝賜教，感激不盡！希望可以成為一名產品經理，創造出對用戶有價值的產品，不求做改變世界的產品，只求改變自己，改變眼前。
文章來源：人人都是產品經理
大部分交互設計師接到需求后，就開始分析下競品、然后結合自己產品和自己的想法，就著手交互原型制作了，在這樣一個設計流程中，交互設計師很難有體系化的思考。
有沒有一套體系化的設計思路，讓交互設計師做出的方案又專業、又全面、又經得起挑戰和用戶檢驗的設計方案呢？
本文是我梳理的一套體系化設計流程與思路，希望可以幫到大家。體系化設計思路大綱如下：
作為一個交互設計師。在我們接到需求之后，首先需要弄清楚的是產生需求的業務背景是什么。其次是基于業務背景了解產品的目標是什么。最后弄清楚產品的用戶人群有哪些，用戶目標是哪些。
交互設計師通過從產品經理或者其他需求發起方那里了解需求生產的業務背景，了解為什么要做這個需求。在了解清楚之后，追溯需求最原始本質。
在我們實際工作的大部分情況下，大部分產品經理不會在需求文檔中將業務背景寫清晰，這時候我們交互設計師就可以將業務背景在交互文檔中輸出，并清晰的展示出來。
1. 業務背景是什么？
業務背景通常是我們為什么要做這個功能。通過做這個功能，對業務有什么幫助。通過業務背景，我們可以推演出業務訴求，并得到對應的產品目標。
2. 產品目標是什么？
產品目標是產品能得到什么樣的結果，對產品來說可以獲得什么樣的好處。所以在交互文檔的設計中要重點體現出產品目標。通過明確產品目標，可以清晰的指導我們做交互方案。
3. 用戶人群是哪些？
用戶人群主要是通過我們對現有產品的用戶畫像得到，并推算出使用這個需求的用戶人群是哪一類人，通過明確的用戶人群，這樣我們在做設計過程中，可以很清晰知道這個需求為誰而做。
4. 用戶目標是什么？
用戶希望通過使用這個功能達到什么樣的好處或目的。
5. 設計目標是什么？
通過業務背景、用戶人群、用戶目標和產品目標拆解出對應的設計目標。
以登錄注冊為例。業務背景是目前產品的登錄和注冊的效果不理想。對應的用戶人群分為兩類，分別為新用戶的注冊流程和老用戶的登錄流程。用戶目標是方便快速的完成登錄注冊流程，越簡單越快越好。產品目標是提升登錄注冊的完成率。
設計目標是拆解，如何能提高登錄注冊的完成率。那么設計師可以拿到登錄注冊的完成流程，看看登錄注冊過程中，哪些步驟轉化率低，那么對轉化率低的地方進行設計優化。
目標拆解就是對頁面進行數據提升具體優化方案，例如文案問題、視覺布局問題、交互路徑問題等。
對于設計師來說設計方法有很多種。例如常見的有：目標導向、數據分析、用戶調研、設計走查、場景化設計、用戶體驗地圖、競品分析等。
在做設計方案過程中，一般不會將上述的方法全部用到，更多的是使用其中的一種或者幾種混合使用。
根據具體的需求選擇適合的方法。例如在做登錄注冊這個優化流程方案過程中，可以通過數據分析找到轉化率低和設計走查思考如何提升數據，就可以完成設計目標。
1. 不同場景梳理
我們需要以場景的思維做場景分析，通過場景分析就可以清晰地描述這些場景，從而確定用戶的需求，并在這基礎上用交互方案滿足需求。
舉個栗子，產品提出一個需求：應用添加「商品列表按照價格從低到高排序」的功能，這還是老思維，是在「定義我們的應用」；
而如果從場景的角度來思考，用戶搜索某種商品，在列表頁會列出一長串商品，而用戶此時只想快速找到符合他的要求的那一個；而有些用戶在挑選的時候，會需要買價格便宜的，此時排序功能就是用戶的需求。
這樣從場景來理解，會更清楚地理解需求發生的環境，便于做出好設計。
比如，順著排序的場景，可以進一步想：有這樣需求的用戶在我們的應用里多嗎？如果多，那么意味著用戶經常需要進行排序的操作，所以在設計的時候，可以把排序的入口放的明顯一點，好操作一點，方便用戶輕松地進行排序。
對于使用滴滴快車的用戶，整個流程包含三個階段，分別為上車前，坐車中和下車后。每個階段都存在多種用戶使用場景。
2. 不同角色用戶
有時候需要考慮不同角色的用戶，例如后臺系統，需要同時考慮普通用戶、管理員角色和超級管理員。
三個不同角色的使用權限也是完全不同的。權限：普通用戶 < 管理員角色 <超級管理員。三種角色的主操作流程也是不一樣的，在設計過程中需要差異化設計。
3. 設計不同流程
明確設計目標、設計方法確定、弄清楚不同場景。接下來就是設計不同的流程。
一般先設計功能入口流程，接下來就是主流程和支線流程。最后才設計異常流程。
4. 方案細化和走查
在涉及到異常場景，且可以全局性復用的情況，則只需要全局性組件說明即可，不用每個流程都展示其異常場景組件或者頁面。
全局組件指的是整個產品通用的組件，例如全局斷網，操作成功、操作失敗、加載、空數據界面，404 等
全局斷網：一般是在首頁使用 tips 提示。用戶在其他界面點擊操作時，也會出現 toast 反饋提示用戶。也有一些 app 在用戶進入后出現對話框提示用戶網絡異常。相對于對話框，使用 tips 對用戶的干擾度更小。
操作成功：一般操作成功都是根據具體的使用場景出現對應的提示。
操作失敗：異常情況導致操作失敗，這時需要統一的提示，通常使用 toast，也有一些使用對話框強提示用戶。
加載：涉及到全局加載和局部加載，全局加載在設計中要統一說明，例如上一個界面點擊進入下一個界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區域加載等。
空數據類型一共有三類：
通過核心指標判斷設計方案是否符合預期，以此驗證設計方案是否成功，并為后續產品的迭代優化做依據。
1. 關注設計的核心指標
設計過程中，要關注設計的核心指標，針對于核心指標，進行針對性的設計。
如果改版的最重要（核心）的指標是任務流程完成率，先查看用戶操作流失率，然后分析找出流失原因，給出對應的優化方案。等到優化方案的產品版本上線后，對比完成率數據變化。
如果改版的最重要（核心）指標是人均觀看次數，則要思考可通過哪些設計策略可提升產品的人均播放次數。
舉個例子，新浪微博，以前版本用戶看完視頻后，視頻會有重播按鈕和推薦視頻，用戶只有進行下一步點擊才能播放下一個視頻。
改版后看完視頻會自動切換到下一個視頻。這樣的設計策略雖然綁架了用戶的行為，用戶從一個主動接收者，變成了一個被動接收者，但是這種策略能有效的提升人均播放次數。
2. 核心指標帶來的價值/收益
當驗證了核心指標往好的方向發展，這時候，就需要總結核心指標帶來的價值和收益，這樣的話設計價值才可以直接被量化。
舉個例子：一個 banner 的點擊率達到 3% 的時候，每天 GMV 約 200 萬，當重新設計了這個 banner，同時其他條件保持不變，點擊率提升到了 6%，這時候通過數據查看每天的 GMV 是多少，如果達到了 400 萬，那么這增加的 200 萬的 GMV 則是通過設計優化所帶來的。
設計師在交付稿件后，容易松懈，以為項目告一段落，就疏于后續的跟進工作。其實后續的跟進也很重要。產品測試版上線后，交互設計師應該跟進后續的走查和設計問題的反饋。
通過數據分析，確定上線的方案有哪些問題需要優化，建立需求池方便后續跟進優化，不斷完善產品設計。
文章來源：優設
網頁設計基礎之HTML（一）
1.Web的基本概念
web（World Wide Web）即全球廣域網，也稱為萬維網，它是一種基于超文本和HTTP的、全球性的、動態交互的、跨平臺的分布式圖形信息系統。是建立在Internet上的一種網絡服務，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。
主要包含結構，表現和行三個方面
2.HTML簡介
<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落
<標記名>內容</標記名> 雙標記，也稱標記體
<標記名/> 單標記，也稱空標記
<!--注釋內容--> 注釋標記
<標記名 屬性1="屬性值1" 屬性2="屬性值2">內容<//標記名>
<title>網頁標題名</title> 設置頁面標題標記
<meta/> 定義頁面原信息
<link> 引用外部文件標記
1
2
3
4
5
6
7
8
9
10
11
12
13
14
注意元素的就近原則
補充：link的屬性 請參考此網址
3.HTML入門
①HTML的概念：HTML 是用來描述網頁的一種語言。
②HTML的文本控制標記
1.標題標記：
標題（Heading）是通過<h1> - <h6>標簽進行定義的。
對齊方式：
left：設置標題文字左對齊
center：設置標題文字居中
ringt: 設置標題文字右對齊
使用方法 <h2 align="left">二級標題 左對齊</h2>
2.段落標記
段落是通過 <p>標簽定義的；其他同標題標記一致。
3.水平線標記<hr/>
相關屬性
使用方法<hr color="red" align="left" size="5" width"600"/>
4.換行標記<br/>
1.1文本樣式標記
font的屬性
1.2文本格式化標記
詳情請點我
1.3特殊字符標記
詳情請點我，并查看HTML字符實體部分
4.附上本節課的腦圖
注：本文參考自菜鳥教程
藍藍設計的小編 http://www.syprn.cn
