要想設計一個成功的產品，首先需要了解清楚客戶的需求。產品設計之前，通過正確地詢問客戶一些問題可以更順利地完成設計，避免不必要的返工。更容易獲得客戶對設計成果的肯定。時刻記住：盡早建立融洽的關系，以及給于對方尊重對于合作至關重要。 以下是設計產品之前需要咨詢客戶的20個基本問題。這些問題不僅可以讓客戶覺得自己參與了設計過程，還可以幫助你快速清理項目背景，并按照正確的方向進行設計。 一、建立共識首先要讓客戶知道你非常在意他們這個設計項目。站在他們的角度，理解他們尋求設計解決方案的原因，并建立共識。詢問以下這些問題將幫助你了解他們所面臨的問題，并通過這些信息思考如何提供出最好的設計解決方案。
1. “這個產品背后的靈感是什么?” 從這個問題的回復中，你可以了解到客戶想做的是復制品還是與眾不同的新產品。探尋客戶項目背后的靈感可以讓你清晰地認識到客戶想和你合作的原因，以及你應該如何開始設計這個項目。 2. “你想要實現什么效果?” 根據客戶需要實現的效果設定分段目標，這樣可以幫助你跟蹤項目進度，自查設計是否符合效果。同時，當你清楚不同時間段設計應該完成到什么程度時，你就能合理安排時間來完善設計效果了。 3. “你的項目期望是什么?” 通過詢問這個問題，不僅會讓客戶覺得你是一位專業設計師；同時，也可以幫你杜絕一些不必要的麻煩。如果你了解“范圍蔓延”這個現象，那么你就知道在設計前關注這個問題是多么重要。 （“范圍蔓延”指項目范圍沒有很好的控制,項目工作范圍超出了項目立項時的范圍。） 二、了解客戶品牌了解客戶的業務和品牌可以幫助你清楚他們的想法。當你開始設計時，他們的一些想法和情感正是你在設計中需要參考的。因此，以下這些問題也是非常重要的。
4. “你們的立場是什么?” 這個問題可以幫助你了解驅動客戶業務的核心價值觀。清楚客戶的立場有助于尊重他們的信仰，避免不必要的錯誤。一些設計項目也可能包含文化或政治角度，這些價值觀可能需要成為設計的一個明確部分。 5. “貴公司的優勢是什么?” 通過了解客戶的優勢，有利于突出客戶獨特的賣點。你還可以通過這些信息來激發總體的設計思想。 6. “你的主要競爭對手是誰?” 了解客戶的主要競爭對手，可以幫助你了解客戶所在的行業。你會發現一些行業反復出現的元素和策略可能對你的設計項目有效，并有機會使其脫穎而出。 7. “你是否喜歡你們之前的品牌?” 請客戶提供之前的行銷材料，確保你的設計與他們現有的行銷材料相一致。如果客戶有過去的設計樣本，你可以從中提取有效內容用于設計，尤其是當接到重塑品牌的設計項目時。 三、定義受眾設計前一定要了解客戶的受眾群體，從人口統計學(年齡、性別、民族等)和心理統計學(個性)兩方面了解受眾特征。
8. “你的目標受眾是誰?” 從心理統計學開始分析，請客戶準確地描述他們的理想受眾，包括他們會做什么，他們怎么做，他們喜歡什么等等。當你設計的時候，可以根據目標受眾的特征使用一些元素來引起他們的思維共鳴。 9. “受眾是女性、男性還是中性?” 某些品牌可能會利用傳統的性別期望來吸引特定的受眾，你需要了解客戶目標受眾的性別。如果客戶告訴你，他們受眾在性別上涉及比較廣泛；那么你可以在設計中加入更多的中性元素。 10. “產品針對的是哪個年齡段?” 在設計中你應該知道，不同的年齡段對不同的事物有不同的期待和反應。根據受眾的年齡段，你需要考慮如使用顏色、形狀、排版和風格才能更符合他們的胃口。以及應用這些元素是會產生共鳴還是會失敗? 11. “你的受眾在文化上有什么顧慮嗎?” 某些設計元素在其他文化中可能是不合適的或不被認可的。通過提出這個問題可以避免踩雷，幫助你確保設計中的元素能被受眾群體所接受。 四、設定預期有些客戶傾向于關注他們的需求，而忘記了產品的細節。如果你聽客戶說過類似這樣的話，“我想要一個獨特的、吸引用戶的設計，來展示我的產品有多酷，這樣我就可以增加銷量了?！蹦憔湍芡耆靼孜疫@句話的意思。
因此，設計之前需要通過問客戶一些問題來設定他們的期望。你可以贊揚或“認可”客戶的想法，也可以委婉地告訴他們這個計劃行不通。(例如“抱歉，我認為我們不能把所有200名客人的名字都放在你們的請柬設計上?！? 12. “你想要什么樣的風格?” 通過假設客戶可能是設計專家來確定他們在設計美學方面的品味。但你不能這樣去問他們，“你想要包括等距插圖或一些不對稱的布局嗎?” 過于專業和生硬的問題可能讓人費解。 你可以問得通俗一點，“你想要一個穩重、干凈的產品外觀，還是更具挑戰性和動態性的產品外觀?” 這個問題將幫助你盡快確認產品風格。 13. “你的設計需要哪些必備元素?” 確認你的客戶是否有怪癖或獨特的要求。詢問這個問題可以確保不會忽略任何對設計至關重要的文本、圖像或主題。(PS：我之前有一個在時尚界工作的客戶，他就希望在設計中看到一些閃閃發光的東西。) 五、了解更多細節通常情況下，客戶會將你的設計以印刷或數字影像的形式用于營銷活動、在線廣告、博客、出版等。因此，了解更多關于最終產品的細節信息，可以幫助指導你的設計。
14. “你會在哪里使用這個設計?” 請客戶告訴你成品的規格、位置和尺寸；并咨詢客戶將在哪里使用這個設計。了解這些信息后，對于打印或數字化，手持或大比例尺寸應用應該如何設計，你將會有不同的設計考慮因素。 15. “你將如何分配或使用產品?” 對于印刷設計，通過咨詢印刷規范來幫助你設計。根據生產技術，你可能需要限制你的顏色，或者也有可能需要在設計中添加更多的圖層。如果是數字化設計，你將需要準備另外一種設計標準。 六、確認合作模式為了合作的順利進行，一般需要先跟客戶溝通，了解他們希望如何合作。你也有機會表達你能為客戶做什么，不能做什么。最后，根據雙方的意見，設置合作模式。
16. “你更喜歡怎樣溝通?” 有些客戶更喜歡不斷地收到更新信息，而有些客戶則會給你時間“做自己的事”。“了解你們客戶喜歡的工作交流方式，將有助于你更專注于你的工作或預見干擾。通過這種方式，你可以安排設計任務并準備更新信息提供給客戶。 17. “你愿意在這個項目上花多少錢?” 咨詢客戶的預算，同時也讓客戶清楚你的基本收費是多少。如果每一次修訂都需要另外收費，無論是按小時計算還是按修訂輪次收費，請給出收費標準。這樣可以避免最后結算時，產生不避免的糾紛。 18. “你想如何進行設計反饋?” 根據這個問題來確定你更新設計版本和向客戶反饋的頻率。有些客戶喜歡和設計師來來回回地交流，也有些客戶喜歡采取不干涉的方式。咨詢并考慮好反饋方式，可以幫助你避免浪費時間和精力。 19. “你需要什么文件和格式?” 這個問題讓客戶清楚地知道他們可以接收和處理的文件。再者，這也有助于你預測可以使用什么類型的設計資源（如字體和圖像）。 20.“這個設計需要什么時間交付?” 這個問題有助于確定你是否有足夠的時間來完成設計和其他任務。記得給自己預留一些修改的時間，因為設計中可能會遇到一些突發情況。 偉大的設計始于小小的問題請記住，客戶需要的不只是有吸引力的設計。他們還希望有專業的建議、耐心和理解，外加一點關心和認可。通過咨詢客戶正確的問題，建立共同點，了解他們的需求，你就可以更好地做出令客戶滿意的設計，提供對方一個愉快的合作體驗，并可能在未來獲得再次合作的機會。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
|
ui設計是一個高薪且行業前景非常好的工作，所以很多人都想要從事ui設計行業，但是其實大家對于ui設計的工作并不了解，下面我們跟隨小編一起來了解一下ui設計流程的相關資料吧。
ui設計流程
一、確認目標用戶
在UI設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。不同類型的目標用戶有不同的交互習慣。這種習慣的交互方式往往來源于其原有的針對現實的交互流程、已有軟件工具的交互流程。當然還要在此基礎上通過調研分析找到用戶希望達到的交互效果，并且以流程確認下來。
二、需求對接
確定需求之后，產品經理會做具體的說明，讓交互、UI、開發、測試明確產品需求，明確項目的具體細節。這個階段里面是最關鍵的，涉及到需求與產品的對接。PRD文檔和線框原型圖一般情況都是在這個環節內明確的。這里面需要注意的是：PRD文檔，線框原型圖出來了之后，設計師才開工，不然也是反復修改。
（圖片來自網絡）
三、提設計組內部會議、界面風格確定
這個時候需要確定一個設計負責人。設計負責人會給同事做具體的工作安排，線框圖標、版式設計等都有具體的分配。后面就開始出稿，稿子出了之后，需要確定哪個UI設計風格的效果更好。
判定結果的標準還是客戶的需求。重要的事情說三遍：需求、需求、需求!
四、一致性原則
分工已經明確，進行具體設計工作，進行UI設計的過程中要達到以下幾個一致性原則：設計目標一致、元素外觀一致、交互行為一致。
（圖片來自網絡）
五、可用性原則
接下來就是標注圖、效果圖、切圖的制作，這個步驟，產品經理會進行把關。
可理解：軟件要為用戶使用，用戶必須可以理解軟件各元素對應的功能。
可達到：用戶是交互的中心，交互元素對應用戶需要的功能。因此交互元素必須可以被用戶控制。
可控制：軟件的交互流程，用戶可以控制。功能的執行流程，用戶可以控制。
六、開發完成，進行最后的測試
測試工程師會對開發出來的產品進行測試，看看有沒有疏漏，有沒有錯誤，當測試和調試完成，上線，就完成了整個開發的流程。
以上就是小編為你整理的ui設計流程的相關資料，相信一定可以幫助你在做UI設計的時候更合理的分配時間，讓你更高效的完成工作哦!
文章來源：FACEUI
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
UI設計中怎么做用戶需求分析？這個問題，我們可以這樣理解，在做產品時其實跟談戀愛很像，你要有一個準確的定位這是產品設計的方向，也是需求文檔和設計產出的判斷標準。
此外，產品定位也使團隊成員形成統一的目標和對產品的認識，提高團隊的凝聚力和工作效率，可以這么說，產品定位是需求中的需求。用戶的需求：一定要對用戶和他的需求了如指掌，才可以做出他們喜歡的產品。
1. 用戶目標
這里有一些我們要試著回答的問題.這些問題幫助我們理清自己的思路，根據這個思路我們會得到一些答案，這些答案會讓我們知道有什么需要填補的知識空白？這些都會指導設計過程中每一個細節
2. 我們的設想
我們自己或者我們的團隊首先會有一個自己的目標與事先這一目標的設想，這些是我們相信我們已經知道的。我們團隊的設想是什么？我們是怎么理解我們的用戶的？包括他們的行為和對他們需求的潛在解決方案。
3. 具體方法
這些方法告訴我們怎樣去填補知識空白?；谟邢迺r間和有限的用戶，我們該選擇什么方法？
一旦你回答了上面的問題，整理一份單頁研究計劃給你的領導，你可以從選擇的調研方法中開始收集你需要的知識：
4. 開始動手
通過我們已選擇的方法收集數據。
5. 綜合起來
解決我們用研的問題，證實或推翻我們的假設。解釋我們收集到的數據來發現存在哪些設計可以努力的機會和深藏的點
UI設計中怎么做用戶需求分析？遵循5W1H原則，5個“W”（WHAT、WHEN等等）和1個“H”（HOW）開頭的結構的問句，類似于一個記者寫一篇新聞報道時需要回答的一些問題：
誰？（WHO）
誰是你的目標用戶，他們的喜好是什么，年齡層次，職業，文化教育水平
什么？（WHAT）
你用戶會做什么，在你的網站、應用和產品里他們用來完成什么養的任務，他們的用戶目標是什么？。
何時？（WHEN）
用戶可能使用特定產品或技術的時間點，以及一些需要探索的日常規律和行為習慣。
哪里？（WHERE）
用戶的使用場景——用戶執行特定任務或者使用關鍵技術的實際地點——分三類，1：常用場景，2極端場景 3：潛在場景
為什么（WHY）
問題幫助你理解用戶的所作所為的潛在的情感和理智驅動因素，以及這么做的根本原因。
如何？（HOW）
問題幫助你了解用戶執行任務或達到目標所采取的一些措施的細節點。
當你有一系列好的設定問題后，你可以優先考慮和集中最重要的問題，把他們轉換為調研目標。注意！調研目標并不是問句。相反，它們是一些簡單的陳述句。有2點需要注意下不要超越你的目標，一定做好記錄。
1：實景觀察法
你花時間到用戶生活和工作的地方去，能幫助你建立一個關于他們居住環境和潛在未滿足需求的基本理解。
2：紙質原型
這個領域的方法包括日常研究，卡片分類，紙面原型和其他一些參與式的設計活動。一旦我很好的理解了我的用戶的專業知識和信仰，我就可以開始深層次探究迎合他們需求的內容，功能和產品。這些可以在與研究參與者密切合作中產生潛在設計解決方法時完成，當然也可以在設計設想初期接受他們的真實反饋。
開始動手
當調查結果跟你原來的設想有差異時，不要試圖改變用戶想法，而是站在中立態度上試著詢問原因，了解這是否是用戶的真實想法。
針對調研的問題，進行解決方案設計（此時你最初的設想會大面積瓦解）
需求來源可以大致已經搜集完了，其中產品數據、用研是從產品側提出，更有老大（老板）敏銳的眼光則是“人為”思考的結果。
通過不同渠道收集到一堆需求之后，不可能全部都能做，需要按照一定規則和流程，篩選出來最有價值的需求，將有限的投入產出最大化。
UI設計中怎么做用戶需求分析？這里有個方法就是“關鍵詞檢索”，無論是功能方面的，用戶屬性方面，場景方面，找出簡短的詞或者語句表現出來，能想到的全部寫在便簽條上不要限制自己的思維，貼在黑板上，之后對便簽條上的內容進行分類整合，然后篩選出大家公認最應該留下的。
除了后來的用研資料，你一開始的設想如果同隊對用戶的反饋后大致吻合也寫到上面，不吻合的就果斷推翻掉，一定要了解用戶最真實的需求，了解用戶目標，了解用戶的使用場景，了解用戶的使用習慣，這些資料就為我們要設計的產品定位提供了一半的依據。
今天給大家簡單的介紹了UI設計中怎么做用戶需求分析的內容，和一些比較實用的用戶需求分析方法，了解工作項目中了解用戶的需求是非常重要的。只有了解他們內心的真實想法才能讓你的事情做的更漂亮，得到認可。
文章來源：知乎
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一般調用axios接口都是這樣的格式。
this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ username: 'qwerqw', password: '123456' })).then(res => { ... ... }).catch(error => { ... ... })
這樣的格式要想獲取到返回值的話，就要將代碼都寫在then中，閱讀代碼的時候不是很清晰。于是網上各種搜，最后覺得這種方法能解決我的強迫癥。
login: async function() { // result的值就是res.data let result = await new Promise((resolve,reject) => { this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ username: 'qwerqw', password: '123456' })).then(res => { resolve(res.data) }).catch(error => { console.log(error) }) }) ... ... }
按照這種方式去獲取到后端的返回值，就可以將剩下的邏輯放在axios請求外面了。
我的理解是，axios是一種異步請求方法，需要用await關鍵詞修飾，等到獲取到返回值后再執行后面的代碼。在使用await時，需要再function前添加async關鍵詞。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn 作者：灰羊駝
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
**
**
setTimeout只在指定時間后執行一次，代碼如下：
<script>
//定時器 異步運行
function hello(){
alert("hello");
}
//使用方法名字執行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法
window.clearTimeout(t1);//去掉定時器
</script>
setInterval以指定時間為周期循環執行，代碼如下：
//實時刷新時間單位為毫秒
setInterval('refreshQuery()',8000);
/* 刷新查詢 */
function refreshQuery(){
$("#mainTable").datagrid('reload',null);
}
一般情況下setTimeout用于延遲執行某方法或功能，
setInterval則一般用于刷新表單，對于一些表單的實時指定時間刷新同步
**
**
HTML代碼
<div class="father">
<ul>
<li>{{one}}<span>:</span></li>
<li>{{two}}<span>:</span></li>
<li>{{three}}</li>
</ul>
<el-button type="primary" @click="startHandler">開始</el-button>
<el-button type="primary" @click="endHandler">暫停</el-button>
</div>
JAVASCRIPT代碼
<script>
export default {
name: 'HelloWorld',
data(){
return {
flag: null,
one : '00', // 時
two : '00', // 分
three : '00', // 秒
abc : 0, // 秒的計數
cde : 0, // 分的計數
efg : 0, // 時的計數
}
},
props: {
msg: String
},
mounted() {
},
methods:{
// 開始計時
startHandler(){
this.flag = setInterval(()=>{
if(this.three === 60 || this.three === '60'){
this.three = '00';
this.abc = 0;
if(this.two === 60 || this.two === '60'){
this.two = '00';
this.cde = 0;
if(this.efg+1 <= 9){
this.efg++;
this.one = '0' + this.efg;
}else{
this.efg++;
this.one = this.efg;
}
}else{
if(this.cde+1 <= 9){
this.cde++;
this.two = '0' + this.cde;
}else{
this.cde++;
this.two = this.cde;
}
}
}else{
if(this.abc+1 <= 9){
this.abc++;
this.three = '0' + this.abc;
}else{
this.abc++;
this.three=this.abc;
}
}
},100)
},
// 暫停計時
endHandler(){
this.flag = clearInterval(this.flag)
}
}
}
</script>
效果如下：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn 作者：rock_23
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
前我們介紹的用于vue用于數據簽名的操作，《【干貨】Vue TypeScript根據類生成簽名字符串》，其目的就是用于生成這個再轉MD5加密的模式進行校驗，原來我們在C#和Android里面已經實現這些方式，因為前端準備用Vue來做，所以加密這塊少不了也需要實現的。
安裝Crypto
Crypto里面可以把md5和3des都一起做了，所以我們直接安裝這個比較方便
找到我們的程序目錄，按住Shift加鼠標右鍵，選擇在此處打開Powershell窗口
然后在cmd窗口里面輸入npm install crypto-js -save-dev
安裝完成后可以看到紅框下面標注著成功了。
代碼演示
MD5加密
我們還是用上次簽名的那個項目里面，首先要先引用Crypto-js
getmd5，我們再寫一個GetMd5的方法，傳入的字符串直接生成MD5的字符返回，
接下來再定義一個雙向綁定的字符串，在點擊簽名的時候同時生成md5的字符串顯示的頁面上
運行后的效果
3DES加密、解密
核心代碼
加密
Encrypt3Des(str: string, aStrKey: string, ivstr: string): string {
const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
const encrypted = CryptoJS.TripleDES.encrypt(str,
KeyHex,
{
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
iv: CryptoJS.enc.Utf8.parse(ivstr)
});
let hexstr = encrypted.ciphertext.toString().toUpperCase();
console.log(hexstr);
return hexstr;
}
一般網上的加解密最后紅框這里我們直接是輸出 return encrypted.tostring()，但是因為我們自己的C#和Android的3Des的加解密都是最后輸出的16進制的字符串，所以我們改為紅框這里輸出的樣式。
解密
Decrypt3Des(str: string, aStrKey: string, ivstr: string): string {
const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
//因為我們加密的時候用到的16進制字符串，需要進行轉換
//第一步把16進制字符串轉為WordArray格式
const WordArray = CryptoJS.enc.Hex.parse(str);
//第二步把WordArray再轉為base64的字符串
const base64str = CryptoJS.enc.Base64.stringify(WordArray);
//第三步再進行解密
const decrypted = CryptoJS.TripleDES.decrypt(base64str,
KeyHex,
{
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
iv: CryptoJS.enc.Utf8.parse(ivstr)
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
這里比較重要就是紅框里面，因為我們的加密最后輸出的是16進制的字符串，所以我們解密的時候首先要把16進制字符串轉為WordArray格式，再轉換為BASE64的字符串，最后再進行解密。因為我也是個前端小白，就是這個問題我也是研究了一下午才搞明白。
最后下面的黃框要注意輸出的字符要轉為Utf8。
其余設置
我們在test.ts里面定義了兩個字符串，一個des3encryptstr的加密后的字符串，一個des3decryptstr是解密后的字符串，然后又加上了兩個方法，一個是加密的方法btnencrypt，一個是解密的方法btndecrypt，分別調用的就是我們剛才寫的兩段核心代碼。
然后在test.vue.html里面加上雙向綁定顯示以及一個加密按鈕和一個解密按鈕。
頁面效果
未加密的效果
點擊加密后的效果
點擊解密后的效果
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：https://my.oschina.net/u/4582134/blog/4582375
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天分享一篇在medium很火的文章《UI交互動效設計標準與規范探索》這篇文字將系統性的給你介紹UI交互動畫該如何深入研究，希望對您有用！
現如今，優秀的界面動畫很能讓人產生深刻印象，甚至是帶來驚喜。它一方面表達了界面之間的交互過程，解釋說明如何使用應用，另一方面也能正確引導用戶的注意力。在瀏覽關于動效的文章時，我發現幾乎所有的文章都只描述了特定的案例或者關于動畫的一般事實，但是我還沒有遇到過任何一篇文章能夠清晰的描述所有關于界面動畫的使用規范。在這篇文章中我不會寫任何新的知識，我只是想把所有的主要原則和規范做一個收集歸納，這樣就能便于其他設計師進行快速決策了。
當界面元素改變他們的狀態和位置時，動畫的持續時間應該以用戶能注意到又不用等待為標準。
合適的動畫時長，既不要太快也不至于慢到讓用戶打哈欠。
大量的研究發現在界面中最優的時間是200-500ms。這個數字是根據人類大腦的認知水平得出來的。任何小于100ms的動畫是人類很難感知到的，而其他大于1秒的動畫又會讓用戶覺得有些延遲，不夠流暢。
動畫的持續時間是使得界面流暢的關鍵
在手機上，谷歌設計規范同樣建議動畫的持續時間在200-300ms為宜。在平板電腦上，這個時間會稍微長30%，大約在400-450ms。原因很簡單，在更大的屏幕上，元素變化的位置路徑會更長?；诖?，在可穿戴設備中，持續時間又要縮短30%了，大約在150-200ms，因為小屏幕上元素變化的位置路徑會更短。
設備的大小會影響動畫的持續時間
在網頁上又會是另外一種方式。由于我們習慣于在瀏覽器中快速打開網頁，所以我們也希望在不同的狀態之間能夠快速切換。所以，在網頁上的動畫應該要比在手機上持續時間少2倍多，在150-200ms之間。一旦超過這個時間區間，用戶就會覺得網頁是不流暢的，或者覺得是不是網絡有了問題。
但是，如果你是在頁面中創建一些裝飾性的動畫或者目的是為了吸引用戶的注意力，此時就應該拋棄這些規范，時間你可以做的更長一些。
大界面中的動畫就一定是慢的嗎？并不一定。
還需要記住的一點就是，無論在什么平臺，動畫的持續時間不僅跟它的移動距離有關，還跟它本身的大小有關系。小的元素或者變化不大的動畫應該要移動的更快，而大的元素或者復雜的元素持續時間稍長一些看起來會更好。
在大小相同的對象中，移動距離最短的物體應該最先停止。小的對象與大的對象相比較，小對象移動速度顯得更慢，因為會產生更大的偏移量。
動畫的持續時間取決于物體的大小和移動的距離
當對象發生碰撞時，根據物理原則，碰撞的能量必須在碰撞對象之間平均分布。而如果在界面中只能看到碰撞體的一部分回彈，往往會顯得不夠自然。因此，最好避免回彈效果，只在一些特殊情況下才用到它。
避免使用彈跳效果，因為它會分散注意力。
物體的運動軌跡應該是清晰銳利的，所以盡量不要使用動態模糊（在AE中做動畫效果除外）。即使是在現在最新的設備上也很難重現這些效果，不能把這種動態模糊的動畫效果應用到界面中。
動畫中盡量不要使用動態模糊
列表項的出現應該只允許有一個短暫的延遲。每一個新列表項的出現間隔應該在20-25ms之間。元素出現太慢的話，會讓用戶感到很不爽。
列表項出現的動畫應該在20-25ms之間。
緩動可以讓物體運動的更加自然。這是動畫的基本原理之一，在?Ollie Johnston 和 Frank Thomas所寫的《 The Illusion of Life: Disney Animation》書中有詳細的解釋。
為了讓動畫看起來不會覺得太過機械，物體的運動應該會同時伴有一些加速度，就像現實世界中的運動一樣，不會有絕對勻速的運動形式。
緩動的物體會比較線性運動的物體看起來更加自然
不受任何物理因素影響的運動叫做勻速運動，這種動畫在用戶眼中看來是非常的機械和不真實的。
所有的APP動畫都會用到動畫曲線。我將試著去解釋如何閱讀它們并說明它們的含義。下面的例子中，運動就是勻速的，可以看到對象在相同的時間間隔中移動了相同的位置。
線性運動
線性動畫在什么時候會用到？舉個例子，對象僅改變它的顏色和透明度的時候會用到。一般來說，當一個對象不改變它的位置而只是改變狀態時，可以嘗試用線性動畫來改變狀態。
我們可以在曲線上看到，在相同時間內，位置的變化會越來越大。這就說明一個物體是在進行加速運動。
加速運動曲線
這種曲線一般應用在對象移出界面時，這些可能是系統通知，也可能只是界面中的卡片設計。但是記住，這種動畫曲線只是會用在物體移出界面時，而反過來就不適用了。
加速曲線應用在物體移出界面時
動畫曲線有助于表達正確的情緒。在下面的例子中，物體動畫的持續時間和位移大小都是相同的，但你會發現即使是曲線上一些微小的變化也會讓你看動畫的感受不同。
當然，通過改變曲線，可以讓物體的運動顯得更加真實自然。
相同的持續時間和相同的位移變化，但是會有不同的感受
與緩入恰恰相反，物體的運動在開始時位移變化很大，但是后面會越來越小直到最后完全停止。
減速曲線
這種類型的運動曲線通常是用在物體進入界面中時——快速進入屏幕然后再慢慢停下來，在不同卡片或對象從屏幕外進入界面時可以應用上。
減速曲線在此時會讓動畫顯得更加自然
這種曲線使物體有加速和減速的過程。這種類型的動畫在界面中是最常用的，當你還在遲疑該用怎樣的動畫曲線時，選擇標準曲線準沒錯。
標準曲線
根據谷歌規范，建議最好是用一些非對稱曲線來使得物體運動的更加自然真實。動畫的結尾會比動畫的開頭更加需要去強調，這樣的結果是加速時間要小于減速時間。在這個情況下，動畫能夠引導用戶更加關注元素的結束部分，以至于關注到其新的狀態。
注意觀察對稱與非對稱曲線的區別
緩入緩出動畫常被用在界面中對象從一個位置移動到另一個位置時。在這種情況下，動畫的目的是為了不讓人有過多不必要的關注。
卡片的非對稱曲線運動
同樣的情況還適用于，元素在界面中消失后用戶還能隨時顯示，抽屜導航就是這樣的例子。
抽屜導航的收起過程就是應用到了標準曲線
從很多例子中可以看出許多初學者都忽略了一個基本的規則——開始動畫不等同于結束動畫，應該分別去設置，比如在抽屜導航動效中——打開是一個減速動畫但關閉時卻是一個標準曲線動畫。另外，根據谷歌設計規范，物體出現的動畫持續時間應該略長，以吸引用戶更多的注意力。
側邊欄的動畫是配合減速曲線和標準曲線一起來實現的
有一個立方貝塞爾函數常用來描述這種速度曲線。之所以叫立方是因為它是基于2個點來的。第一個點在坐標軸中是（0，0）（左下），最后一個點是（1，1）(右上)。
基于此，我們只需要描述圖上的兩個點，這是由貝塞爾函數的四個參數給出的:前兩個是第一個點的坐標x和y，后兩個是第二個點的坐標x和y。
為了便于實際工作，我建議使用2個工具網站來操作
https://easings.net/zh-cn
http://cubic-bezier.com
第一個包含一些最常使用的曲線列表，可以直接將其復制到原型工具中去。第二個是可以給你自己自定義動畫的曲線，并能實時查看效果。
不同類型的動畫曲線以及他們不同的參數
就像芭蕾舞編排一樣，主要思想是從一個狀態到另一個狀態的過渡引導用戶注意力方向。
一般會有2種編排形式——同級動畫和從屬動畫。
同級動畫意味著所有對象的外觀都服從一個特定的規則。
在這種情況下，所有卡片都按一個相同的流程出現，引導用戶注意力在一個方向上，即從上到下。如果我們不按照這個順序，用戶的注意力就會分散，如果所有元素同時出現也會很糟糕。
用戶的注意力應被引導在一個方向上
至于表格視圖，就會略微有些復雜。這種情況下，用戶往往是以對角線為焦點去看界面的，所以逐個出現的形式也比較糟糕。另外，逐個出現的動畫在時間上也會過長，而且把用戶的注意力引導成鋸齒狀，這是很不友好的。
按對角線出現的表格視圖動畫
從屬動畫是指有一個核心運動的元素，它吸引用戶所有的注意力，其他元素也都跟隨它的運動。這種類型的動畫會顯得更有秩序感，讓用戶更多的去關注到內容本身。
而在其他情況下，用戶是很難知道他到底要去看哪個元素，注意力很容易被分散。如果要設置多個動畫元素，一定要清楚的知道他的動畫順序，并盡可能的將其他動畫元素弱化。
只賦予一個中心對象生命是值得的，而所有其他的對象都服從于它。否則，用戶就不知道到底應該注意哪個元素。
根據谷歌規范，當運動物體的大小不成比例地改變時，它們應該沿著弧線而不是直線運動。這有助于使動畫更自然。所謂“不成比例”，是指物體的高度和寬度的增加/減少是不對稱地進行的，即以不同的速度變化(例如，一個正方形變成一個矩形)。
物體的運動如果不成比例，那應該按弧線變化。
當對象按比例改變其大小時，則此時直線運動的形式會更好。由于這種運動形式做起來容易得多，弧線軌跡運動的規律就往往被忽視。在現在很多應用中，我們都能找到這種例子。
等比的物體運動軌跡應該使用直線
曲線軌跡運動也會有兩種實現方式:第一種是開始水平移動，然后以垂直運動結束;第二種是開始垂直移動，然后以水平運動結束。
物體沿曲線移動的路徑必須與滾動界面的方向重合。例如，在下面的例子中，我們可以上下滾動界面，相應地，卡片以垂直的方式展開更合適——先向右，然后向下。
展開/折疊卡片的方向應與界面的軸線重合
如果物體的運動路徑彼此相交，它們就應該不能穿過對方。物體應該通過減慢或加速自身的速度為另一個物體的運動留下足夠的空間。另一種方式——只是推開其他物體。為什么要這么做？因為我們假設界面中的所有對象都位于一個平面上。（譯者注：對于這一點我不是很認同，為了更加真實么？）
在運動過程中，物體不應該互相穿透，而是為另一個物體的運動留下空間。
在另一種情況下，移動的物體可以通過抬高于其他物體，而不會以溶解或通過其他物體的形式來移動。為什么?因為我們相信界面上元素的行為應該要符合物理定律，在現實世界中沒有任何實體能夠做到直接穿透對方。
物體可以被抬高于其他元素之上來移動
如果我們總結上述所有的規律和原則，可以得出界面動畫應該要反映物質世界的運動,例如我們都知道的，摩擦，加速等等。模仿現實世界的行為我們可以創建一個優秀的動畫，滿足用戶的心理預期。
一個優秀的動畫，應該是不會那么刻意，也不會分散用戶對目標的注意力。如果是的話，就需要優化它，或者干脆把動畫去掉。核心標準是動畫不應該降低用戶執行任務的效率。
但是不要忘記，用戶對動畫的好壞感受，是感性大于理性的。所以，最好是把做出來的動畫給用戶進行評鑒，然后再不斷優化它。
文章來源：云端網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這篇文章是一篇很實用的文章，與 格式塔心理學有異曲同工之處，而這篇文章是基于當前流行的手機UI體驗去寫的，對于移動互聯網這個時代來說更接地氣，更實用，希望對您有用，enjoy！
隨著技術和用戶界面的變化，對視覺設計設計技能的需求不斷增長。通過每年出現的典型用戶界面的新例子，我們對視覺層次，感知和構圖的基本理解有所改變嗎？
視覺感知的現代概念不僅植根于科學，也植根于心理學。因此，無論用戶界面如何不斷變化，我們看到和感知視覺信息的方式都將保持不變?？紤]到這一點，當代交互設計是否有可能改進圖形組合和視覺層次結構的基礎？
視覺感知的基本規則對于任何視覺設計都是至關重要的，因為它們指示如何盡可能快地傳達具有嵌入意義的信息。然而，由于視覺設計是圖形設計的近親，因此這些標準是針對印刷媒體而建立的，并且尚未被重新定義為數字化。
像“數字包豪斯學?！边@樣可能建立新設計原則的東西尚未形成。當人們以與印刷完全不同的方式體驗 UI 時，視覺層次和組合的規則不僅僅是過時的，而且會在用戶界面中崩潰。
在大多數情況下，設計師仍然傾向于將屏幕視為靜態的二維對象，而交互設計師面臨的挑戰是創新，而不僅僅是將打印格式應用于他們的數字媒體項目。但在新設計發展之前，需要重新審視對視覺層次，感知和構圖的基本理解。
什么是視覺層次結構，為什么它很重要？視覺層次結構是在組合中布置內容，以便有效地傳達信息和傳達意義?？梢晫哟谓Y構首先將查看者引導至最重要的信息，然后引導至次要內容。
通過適當使用大小，顏色，形狀，距離，比例和方向來建立，通過創造性地使用決定視覺層次的圖形元素來傳達構圖的含義，概念和情緒。
設計師如何使用尺寸，顏色，形狀和方向來傳達設計中的意義和情緒？
視覺層次結構對于每種類型的視覺設計都至關重要，無論是需要引導訪問者眼睛的登陸頁面還是移動UI的導航。用戶對每個元素的理解基于組合中的其他元素及其上下文。相應地處理組成元素以形成視覺關系，從而在整個設計中建立視覺層次。
視覺層次結構的許多規則可能看起來非常簡單甚至是平庸的，但它們是良好視覺設計的重要基礎。例如，顏色是視覺設計中最具影響力的創意元素。
考慮紅十字與單色交叉的直接含義。幾乎普遍，紅十字標志著中立和保護。這樣就可以與顏色的使用立即進行溝通。顏色也常用于識別群體，因為當三個單色群體中的一個紅色交叉以某種方式突出顯示為更重要時。
明亮，豐富的色彩比柔和的色彩更突出，因此具有更大的視覺沖擊力。在界面中，顏色可用于呈現結構感并指向可用的交互。單色界面中的單色可以區分選擇，甚至可以建議用戶懸停在按鈕之外的內容。
單色設計元素中的顏色或缺乏顏色可用于概述UI元素并在潛意識層面吸引用戶。
顏色也被賦予了意義和情感，可以將明確的信息傳遞給觀眾的潛意識。在品牌推廣方面，對色彩進行了大量的心理學研究，因為它在消費者與品牌進行任何有意義的互動之前就會產生內心的反應。例如，藍色通常被認為是可靠的，安全的和平靜的，而紅色是刺激性的，并且已知會增加人們的心率。然而，取決于培養，顏色可能具有不同的重要性。
在網頁設計中有意義的，The Names for Change 網站是結構化的顏色，運用的一個很好的案例。該網站通過使用顏色立即傳達其結構; 組織默認是分散的，但可以按主題和/或顏色重新排列。
然而，所選擇的音調有助于克服該站點意義的潛在困難之一。為襪子或衛生棉條等日常用品籌款并不足以讓自己出售，因此該網站的激進圖形基調提高了日常用品的感知價值，同時建立了必要的基礎組織結構。
讓我們想象一下坐在三個小鳥旁邊的一只大鳥的插圖。沒有任何進一步的信息，這個簡單的圖形立即傳達其元素之間的關系：父母和孩子，它們共同傳達一個家庭。
在傳統的圖形設計中，典型的策略是使最重要的元素成為最大的元素，然后逐步縮小元素的尺寸。大小建立視覺層次結構，因為最大的元素首先引起注意，因此看起來是最重要的。
在文本主體中也經常使用不同的字體大小來指示顯著的差異，例如標題，部分和引號。次要內容（例如圖像標題）通常較小，以便不與文本主體競爭。
考慮一些最廣泛使用的可視界面，例如Instagram。屏幕上沒有任何內容與圖像和視頻競爭 – 它們占據了大多數屏幕的60％以上。 UI的目的是明確的。
在網頁設計中顛覆視覺層次結構的典型結構的一個例子是藝術/設計工作室Ro / Lu的投資組合網站。他們個性的網站可能不是最直觀的，但它挑戰了典型的在線創意組合的視覺安排。由于各種項目的有意隨機化，每次訪問者訪問該網站時，會有不同的項目在視覺中心展示，這使得每次訪問都會有驚喜。
在大多數創意設計工作室的作品集中，作品沒有按層次組織，因為每個項目都是獨特的，并且被認為同樣重要Ro / Lu網站的設計創造了一個動態的構圖，每次訪問都有不同程度的驚喜，并鼓勵觀眾調查工作室的廣泛組合。因此，設計工作室的折衷，跨學科性質由內容的隨機顯示。
視覺層次中的對齊通過在空間上連接元素來傳達秩序感。與非線性小說中的章節一樣，想象一個在圖形構圖中脫穎而出的正方形。當單個元素破壞已建立的結構時，它從組合物中脫穎而出，從而獲得相對于其余元素的含義。
除非元件從視覺網格突出，即從有序感中突出，否則剛性構圖可能看起來是停滯的并且在視覺上不感興趣。不對齊或“打破網格”是一種給予圖形元素更多視覺權重的機會。這個概念是設計中視覺層次結構的基礎。
根據傳統視覺設計中的原理，放置在框架中心的元件看起來更重要。例如，主要內容或界面元素可以放在中心，而導航，菜單和其他次要內容通常保持在側面。
但開創性的設計師喜歡挑戰現狀。當交互式設計應用基本的視覺層次原則，然后將界限推向創新的視覺組合時，就會產生有趣的新體驗。通過使用不同的對齊，在元素之間建立新的關聯和含義。
例如，DNA項目是一個使用一系列脫節層次結構來傳達音樂家專輯創意結構的網站。該網站的結構很復雜，專輯的結構也是如此。
談到形狀時，讓我們考慮一下簡單的心形如何在大多數社交網絡UI中傳達其對“喜歡”的潛在用途。要確定重要性或群體，請考慮四個圈子中的一個心臟。幾何形狀就像顏色一樣，形狀帶有某些內涵，賦予元素個性或意義。
在交互式設計中，幾何形狀對于有效溝通至關重要，因為它們比文本更快速，更普遍地傳達意義。代替文本，圖標（符號）（通常是簡單的幾何形狀）已成為大多數導航系統和UI的模擬。
“喜歡”圖像，下載文件，撥打電話或查看消息背后的目標簡單直接地用圖標（幾何形狀）傳達。在全球市場中，這種有效的視覺通信形式變得越來越重要，其中數字產品通常為具有多種語言的廣大國際受眾提供服務
報紙必須迅速調整他們的設計以適應新技術。其他內容產業也紛紛效仿。
要突出傳統印刷和數字媒體之間不同的互動模式，請考慮在藝術部分搜索實際報紙和在大多數應用中使用搜索圖標之間的區別。直到最近，大多數報紙網站都將它們的頁面布局與打印時相同，并且篩選內容的體驗是笨拙和迷失方向。
Signes du Quotidien網站打破傳統的網頁布局，以微妙的方式使用基本的方形和圓形，呈現獨特的視覺層次結構，引導訪問者瀏覽內容。菜單位于頁面的中心，當訪問者點擊它時，會出現代表網站四個部分的四個彩色圓點。訪客然后將其中一個點拖入正方形以轉到該部分。
移動元素將在一組停滯元素中承載更大的視覺重量，并且視覺層次中的運動是不可能在打印中使用的原則，但是肯定可以包括在視覺設計器的工具箱中。
除了自身的字面翻譯之外，運動能夠進行什么交流？通常在UI中使用Motion作為元素可以與之交互的線索。是否可以進一步推動運動的使用，并將其作為一種獨特的交流方式？如果視覺層次不僅僅是關于溝通的效率，還關乎嵌入的意義，那么運動如何被用作必要的視覺交流工具？
對于I Remember網站，主界面（動畫）立即引人注目，因為它邀請互動。雖然動作和界面是功能性導航工具，但視覺設計師利用這些元素的潛在損失作為傳達網站潛在使命的方式：阿爾茨海默病。就像組織為其籌集資金的患者的褪色記憶一樣，如果沒有積極的互動，網站就會慢慢消失。
聲音是另一種不可能在印刷媒體中使用的工具，但尚未在等級原則中發展。由于聲音完全是非視覺的，因此沒有規則可供參考。但聲音也可以是一種有效傳達內容，情感或意義的設計工具。攜帶某些聲音的設計元素可以相對于彼此進行分組，而最大膽的那些可能看起來是最重要的或者可能表示與該組的分離。
附加到元素的聲音質量應該能夠快速識別，表征或幫助構建內容。與其相關視覺元素形成對比的聲音如何傳達新的含義？
聲音本身可能非常復雜，以至于在感知到任何視覺之前，它們會建立整個情緒或設計信息。就像彩色背景建立一種情緒一樣，聲音可以放在背景中，或者在UI中提供反饋，例如響應移動設備上的按鈕。該技術的原理是基本的，但它可以采用的創造力是魔法可以發生的地方。
由于其在集體的創造性工作中的重要性，為古根海姆德國藝術家組織ZERO展覽創建的網站使用聲音作為大氣背景，并且作為導航網站時的反饋形式。大膽的鈴聲建立代表主題開頭的部分，而第三級項目則在后臺點擊。
視覺層次結構是一個簡單的概念，理解理論實際上比設計者執行結構良好的組合的實際能力更容易。然而，在保持良好設計的同時在新介質中具有創造性是具有挑戰性的。
新媒體一直出現，挑戰性的情況不會減弱 – 恰恰相反。如今，有超過200種不同的屏幕尺寸在使用中。那只是二維的。首先，它是互聯網，桌面瀏覽器，然后是移動設備和平板電腦，現在我們正在通過互動電視，物聯網，可穿戴設備，虛擬和增強現實等技術進入新的領域。
真正推動數字媒體界限的設計仍處于起步階段。希望視覺層次和良好設計的原則能夠跟上技術的快速發展，使我們的數字媒體體驗仍然充滿意義和樂趣。
原文：Toplal
翻譯：云端設計
文章來源：云端網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
HTML5 標簽用于繪制圖像（通過腳本，通常是 JavaScript）
不過， 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務
getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性
本手冊提供完整的 getContext(“2d”) 對象屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等
標記和 SVG 以及 VML 之間的差異：
標記和 SVG 以及 VML 之間的一個重要的不同是， 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個 標記中移除元素，往往需要擦掉繪圖重新繪制它。
let img = new Image() //可以給圖片一個鏈接 img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg' //或者本地已有圖片的路徑 //img.src = './download.jpg' //添加到HTML中 document.body.appendChild(img)
語法：
參數 contextID 指定了您想要在畫布上繪制的類型。當前唯一的合法值是 “2d”，它指定了二維繪圖，并且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API
let ctx = Canvas.getContext(contextID)
JavaScript 語法 1：
在畫布上定位圖像：
context.drawImage(img,x,y);
JavaScript 語法 2：
在畫布上定位圖像，并規定圖像的寬度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 語法 3：
剪切圖像，并在畫布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
JavaScript 語法
getImageData() 方法返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素數據。
對于 ImageData 對象中的每個像素，都存在著四方面的信息，即 RGBA 值：
R - 紅色 (0-255)
G - 綠色 (0-255)
B - 藍色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)
color/alpha 以數組形式存在，并存儲于 ImageData 對象的 data 屬性中
var imgData=context.getImageData(x,y,width,height);
putImageData() 方法將圖像數據（從指定的 ImageData 對象）放回畫布上。
接下來跟著我一步一步做完這個小功能叭~
準備好我們的圖片，并添加上我們的方法
<body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成圖片</button> </body>
接下來寫addCanvas方法
function addCanvas() { let bt = document.querySelector('button') let img = new Image(); //1.準備賦值復制一份圖片 img.src = './download.jpg'; img.onload = function() { //2.待圖片加載完成 let width = this.width let height = this.height let canvas = document.createElement('canvas') //3.創建畫布 let ctx = canvas.getContext("2d"); //4.獲得該畫布的內容 canvas.setAttribute('width', width) //5.為了統一，設置畫布的寬高為圖片的寬高 canvas.setAttribute('height', height) ctx.drawImage(this, 0, 0, width, height); //5.在畫布上繪制該圖片 document.body.insertBefore(canvas, bt) //5.把canvas插入到按鈕前面 } }
成功在畫布上得到圖片：
嗯，我們已經成功走出了成功的一小步，接下來是干什么呢？…嗯，我們需要利用原生的onmouseup和onmousedown事件，代表我們按下鼠標這個過程，那么這兩個事件添加到哪呢？
沒錯，既然我們要在canvas上進行馬賽克操作，那我們必然要給canvas元素添加這兩個事件
考慮到我們創建canvas的過程復雜了一點，我們做一個模塊封裝吧！
function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //這里放自己的圖片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) //對象解構接收canvas和ctx ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') //修補鼠標不在canvas上離開的補丁 canvas.setAttribute('onmousedown', 'start()') //添加鼠標按下 canvas.setAttribute('onmouseup', 'end()') //添加鼠標彈起 let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let canvas = document.querySelector('canvas') canvas.onmousemove = () => { console.log('你按下了并移動了鼠標') } } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null }
測試一下我們的start()和end()是否生效了
嗯，目前來看，我們的代碼依然如我們所愿的正常工作
接下來的挑戰更加嚴峻，我們需要去獲取像素和處理像素，讓我們再重寫start()函數
function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.獲取圖片寬高 let h = imgData.height; //馬賽克的程度，數字越大越模糊 let num = 10; //獲取鼠標當前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //設置imgData上坐標為(e.offsetX + l, e.offsetY + k)的的顏色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas數據 ctx.putImageData(imgData, 0, 0); } } //這里為你提供了setXY和getXY兩個函數，如果你有興趣，可以去研究獲取的原理 function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; }
嗯，我們離成功不遠拉，最后一步就是生成圖片
好在canavs給我們提供了直接的方法，可以直接將畫布導出為Base64編碼的圖片：
function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) }
最終效果：
是不是無比輕松呢~，來看看你手寫的代碼是否和下面一樣叭：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成圖片</button> </body> <script> function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //這里放自己的圖片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') canvas.setAttribute('onmousedown', 'start()') canvas.setAttribute('onmouseup', 'end()') let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.獲取圖片寬高 let h = imgData.height; //馬賽克的程度，數字越大越模糊 let num = 10; //獲取鼠標當前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //設置imgData上坐標為(e.offsetX + l, e.offsetY + k)的的顏色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas數據 ctx.putImageData(imgData, 0, 0); } } function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) } function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null } </script> </body> </html>
當然，你可以做更多創作，比如上面打的馬賽克是正方形的，你可以利用你的數學知識讓其變為圓形，以圓心為鼠標中心擴散
你也可以選擇完善一些過程，例如馬賽克位置打錯了，可以選擇將畫布清空然后重新開始~
或者做一些善后處理，導出圖片后隱藏canvas畫布
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn 作者： VGtime
分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn