三星上一版本界面標題選用細體字，頭部區域留白，卡片功能區域小，背景選用寫實簡約照片，體現文藝感。
圓形的場景卡片與矩形的設備卡片形成對比，場景卡片與文字上下排列，更加凸顯場景圖片，但文字存在多行、單行顯示，這種表現方式會顯得凌亂。
設備卡片從上到下依次為圖標、設備名、狀態。
新版本標題選用粗體字，標題區域更加緊湊，功能區域展示空間變大，背景使用抽線雙色漸變，更現代時尚。
功能卡片為統一圓角矩形，場景卡片圖文左右排布，底部白色卡片區域可以很好兼容多行、單行文字的情況。
設備卡片從上到下依次為圖標、房間名、設備名、狀態。
底部新增Tab區域，細分為收藏、設備、生活、自動化、菜單5個模塊。
風格布局總結：新版本屏幕利用率更高，粗體字和抽象背景使得內容更凸顯，底部的Tab提供了更多模塊入口，功能分類更合理。
舊版本只有一個首頁，功能都在此被分發，并且功能較為單一。
新版本增加收藏、設備、生活、自動、更多模塊，對用戶使用場景做了細分。
界面頂部的房屋設置、添加、編輯為全局設計，不過在每個模塊中添加的內容不同。
收藏作為用戶每次進入App的第一屏，說明是用戶常用的重要功能，在收藏模塊中，可以添加的內容最多，用戶在此頁面可以完成大多數常用操作。
設備模塊是全屋設備的合集，自動模塊是場景、自動化的合集。
生活模塊主要提供家庭安全監控信息，還可接入其他服務，例如：智能家電監控、智能烹飪服務。
新版本設備卡片主要由設備圖標、房間名、設備名、狀態、控制區構成；房間名域為預留區，保證在不同頁面下的統一性。
設備在離線狀態下，右上角會顯示離線圖標，代替控制按鈕。
只有我們提前羅列出更多的頁面顯示情況，整合并預留可變區域，才能使頁面更統一。
收藏模塊分為3大區域，區域1為狀態通知區；區域2為收藏的場景區；區域3為收藏的服務或設備。這3個區域展示順序是固定的，可以選擇是否展示，無法改變展示順序。
因為每個區域的卡片尺寸是不一樣的，區域固定的好處是，可以保證顯示的統一性。否則大小卡片穿插顯示，還可能會空缺幾個，很影響美觀。并且操控邏輯也是固定的，用戶更容易理解。
點擊收藏模塊右上角添加，可批量選擇內容快速添加收藏。
在非收藏頁，長按卡片，可單獨添加收藏內容。
在設備、場景等新建或編輯界面，可以選擇添加至收藏的選項。省去了后續的單獨添加動作。
在收藏頁，長按卡片，可以進行單獨移除操作。
在收藏編輯頁面，可以批量快速移除移除。滿足了不同的用戶需求。
首次進入，展示的是某個房間內的設備，通過左右滑動進行切換房間，三星可能想為用戶提供模糊操作來提升效率，在房間少的情況下，這種方式比較好。當房間多了，用戶會滑動多次才能到目標房間；當然三星給出了針對精確選擇的方式，點擊左上角的房間入口，可以選擇、編輯房間。
房間多的情況下這2種方式都不是很好的解決方案。
這里要注意的是，三星把“沒有房間”也放進房間列表，供用戶選擇?，F實中，有好多設備是不屬于任何房間或者用戶暫時不想放到某個房間，增加無房間選擇可以更靈活的滿足實際使用場景。
在房屋編輯頁面，可以添加房間，在這里三星已經為用戶預設了很多房間類型選項，用戶只需要做選擇，很方便，即使沒有要的，還可以在列表底部選擇自定義。
在設備頁面，只能添加設備、燈光組、監控組。
用戶可以通過關鍵詞搜索、掃碼、設備類型篩選、品牌篩選進行設備添加。
很全，幾乎涵蓋了所有的添加方式。
在添加頁面，第一步要先填寫組的名稱、選擇所在房間，第二步選擇要合并的燈，添加完成跳轉至設備組詳情，方便立即調控。
設備控制頁面采用了模塊化的設計方式，控制區域均為列表形式，不同的設備只需要替換圖標和文字及對應的操控列表，降低新設備重新創作新界面的設計成本。
長按設備卡片，選擇目標房間，可完成單個設備轉移。
選擇設備頁面右上角的移動方式，可以批量進行設備的轉移。
自動模塊包含場景、自動化、第三方設備，它們不具備房間屬性；
點擊右上角的箭頭可以展開或收起對應列表，方便查找內容。
第一步，先填寫場景名稱、選擇圖標、是否要添加到收藏；
第二步，選擇執行的設備，可以根據設備名稱、房間名稱進行快速定位，并且可以批量選擇設備；
第三步，設備添加成功后，根據需要，單獨對設備執行狀態設置。
新建場景的邏輯是：先批量選擇要執行的設備，再單獨設置執行內容。
這種方式的好處是，不易打斷用戶的設置思路，還可以減少操作步長。
新建自動化界面分為觸發條件、執行內容兩大塊；
初始狀態會為用戶提供使用描述，便于用戶操作。
可以通過時間的變化、設備狀態變化、位置變化、天氣變化、安防變化來觸發執行命令。
將設備狀態變化作為觸發條件時，設置邏輯是，完成一個設備的設置才能設置下一個，不能批量選擇。為什么和新建場景的流程不一樣？可能是因為在設置執行條件時，用戶心智里認為設備和狀態聯系更緊一些，并且條件種類不會太多。
當添加了一個以上的設備作為觸發條件時，界面會顯示“同時滿足或滿足任何一個”的選項。
執行內容可以是控制設備、通知給用戶、運行場景、改變安防模式。
可以批量選擇設備，并且可以設置執行延遲時間、自動復位，滿足用戶不同需求。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：土木君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
根據互聯網消費調研中心，了解到戴森的消費者大致有三個特征：高品質消費、重視生活之美、新生活開啟者。重視生活之美的消費者更注重設計美觀、獨特、有辨識度的產品。
戴森品牌定位：高端、黑科技、高顏值。
下面我們通過案例去了解戴森是如何通過設計滿足品牌方和消費人群的。
戴森APP 1.0首頁通過模擬房屋、顏色變化來向用戶直觀展示屋外、屋內的空氣狀態；整體來看擬物化可以很直觀的向用戶展示信息，房屋的造型給用戶一種溫馨家的生活之美，更有辨識度。
屋外主要有天氣、AQI（空氣質量）、溫度、濕度、PM2.5、紫外線等信息；
屋內主要有Wifi強度、房間名稱、屋內空氣質量、溫度、濕度其它信息、設備圖片；
頁面左下角為設備控制入口、右下角為時間設置；底部可以通過左右滑動切換設備類型。
繁多的信息雖然給用戶專業的感覺，但無形之中削弱了信息的層級，并且有的圖標使用不準確，用戶不知道是什么。頁面中使用產品圖可以強化自身產品品牌，增強產品辨識度。
戴森APP 2.0首頁相比1.0，區分了信息層級，增強了操控體驗。
根據用戶使用習慣，屋外只保留了空氣質量等級、溫度、濕度這些常用的信息；
擴大了房間區域，為信息提供更多展示空間，降低視覺干擾。屋內保留Wifi強度、房間名稱、屋內空氣質量、溫度濕度，將設備核心功能入口外顯，用戶可以更便捷去操控設備，提升了易用性。
使用局部放大的產品，用圓形襯底，并且還可以體現設備開關狀態，這樣做可以統一不同產品下的畫面，增強了用戶對于產品狀態的感知，從而強化了產品品牌。
首頁通過上滑、下拉等手勢可以查看關于空氣質量的更多詳細信息，將主次信息分級，既能凸顯首頁主要信息，還不影響用戶快速查看詳情的效率。
相比戴森，Smartmi P1在灰底上只保留空氣質量、Pm2.5、產品圖，大留白，從而凸顯的是簡潔的科技感。
功能上也做了整合，簡化了操控細節，為用戶提供了自動、睡眠、中速、自定義等快捷選擇。
兩個品牌對比來看，戴森體現了家的溫情，Smartmi P1則體現了簡約的科技。
在家電市場中，廠家都希望消費者提高購買頻次，界面底部濾芯的剩余使用時長，可以起到提示用戶及時更換濾芯的作用，從而提高購買頻次。這一點還是值得借鑒的。
通過查看戴森店鋪裝修風格、流程界面縮略圖，發現戴森將它的品牌色——黑色、紫色貫穿至每一個需要引起用戶注意的元素上，視覺感受上更有一種“黑”科技的感覺，強化了品牌感知。
對于空氣質量等級顏色的選擇，戴森與空氣質量指數（AQI）等級顏色保持一致性。
室內室外顏色均可根據空氣質量等級顯示不同效果，可以給用戶提供更加直觀的感受。
Smartmi P1 則是通過文字和部分顏色來體現空氣質量等級，用戶感知弱。
空氣質量詳情頁，戴森和SmartP1均使用色塊體現等級，戴森使用的面積更大，更加明顯，P1則一貫延續留白的簡潔科技感。兩者都有數據分析功能，戴森通過刻度、細線條、更加規整的布局，看上去更具專業性，品質感。
戴森和Smart P1都有各個空氣污染物等級的說明，用戶可以了解當前空氣質量情況及顯示規則。
Smart P1 可以讓用戶設置哪些空氣污染物顯示，空氣污染物等級說明在一頁顯示，用戶需要上下滑動來查找相關污染物。
戴森將污染物類型做成導航形式，用戶可以快速選擇要看的類型；
范圍區間和對應的顏色放一起，強調了他們之間的關聯性，并且可以承載更多的說明信息。
對于硬件廠商，在設計界面時，其中一個重要的需求就是“在界面中體現產品”，從而增強產品的獨特性、辨識度。那么如何做才能恰到好處的向用戶展示產品信息呢？來看看戴森怎么做的，具體主要有兩方面：
1、App中產品出現的節點；2、以什么形式展示產品。
最順其自然的就是在設備控制界面放置對應的產品，其次就是在引導頁中體現，可以很直觀的告知用戶如何操作及產品當前的狀態反饋。
最后還可以在登錄頁、空狀態頁作為裝飾元素出現。
產品展現形式在控制界面及引導頁面要盡可能展示產品當前場景下的樣子。
例如：在調節角度界面，用俯視圖可以更加直觀體現旋轉角度的狀態。
在房屋界面，由于只需要體現設備狀態，所以用45度視角盡可能體現產品獨特的造型細節。
在登錄頁使用產品線框圖作為裝飾元素，減少對文本內容的干擾。
首頁上空氣凈化器選取常用的功能作為快速入口，并且使用圓、圓角矩形作為按鍵外框，我們看它的實體遙控器、產品造型，就知道為什么要用這2種形態了，這樣可以延續戴森的產品特征，使得整體品牌更具辨識度，達到強化品牌滲透的目的。
右下角為設備控制詳情入口，通過使用不透明白底與快捷功能鍵作出區分，還能保持整體性，品質感。
控制詳情頁放置產品實物圖，可以直觀展示產品狀態，功能圖標前期做了區分歸類，保證每一行的圖標尺寸一致的同時確保它們之間的相關性。角度設置界面，產品使用俯視圖，可以直觀展示角度信息。
對于用戶常用的操作使用滑動手勢，例如：風量，長按上下滑動可以很方便設置等級，松手返回確認，風量按鈕可以顯示風量等級條，用戶不僅可以通過數字了解風量等級，還可以通過進度條更直觀感知風量大小。
從畫面中可以看出，同樣的風向設置按鈕，在首頁，點擊后只能進行開啟、關閉風向；進入控制詳情頁，則可以設置具體的角度值；保證在不同場景下即可以快速便捷控制設備，也可以精確控制設備。
最左邊的控制界面是最早的版本，只有啟動或停止機器的功能，使用帶角度的視角來展示機器與場景，并且機器是可以進行移動擦除動畫，體現運行中的狀態，這種方式比較耗費開發時間。
中間的界面是過渡版本，較上一個版本做了優化，采用正視圖，并且增加了運行強度、運行區域、定時功能，底部的地板元素漸變處理減少了畫面對功能入口的干擾，既能體現場景，還更加易用。
最右邊界面為最新版本，放大了產品，減少了不必要的視覺元素，弱化了地板背景；充電圖標和設備狀態放置頂部，與功能區做區分；運行強度選項由展開變成收起，估計這個功能使用頻率較低；運行區域、定時功能的圖標做了優化，更加貼切。視覺和功能得到了完美的平衡。
燈光控制界面，主畫面是燈頂部實物圖，值得一提的是，點擊圖片上的開關按鈕就可以實現燈的開啟關閉，很直接；點擊開關上部的區域，會彈出色溫、亮度調節界面。功能區域和實物結合的形式值得我們學習。
右下角為場景選擇，可以選擇系統自帶的燈光使用場景，例如：讀書模式、休閑模式，也可以自定義，可以方便快速設定光線。
通過對戴森App的分析，我們了解到了可以通過擬物或者將功能控制區與實物結合的方式，提升用戶操控體驗及產品品牌辨識度；對于硬件產品App，要盡可能保持與實物的一致性，突出產品特征，包括按鈕形狀、色彩；還有就是可以學習到戴森為了平衡用戶與品牌方的需求，在視覺層面、交互層面的細微改動下的思考方式。
Apple One里面有6款不同類型的應用捆綁在一起，頁面開篇這6款應用圖標橫向平鋪，隨后依次翻轉，接著Apple One也翻轉出來，向用戶強調它們被包含在該產品里。
品牌圖標演化出多種圓形內容，內容還會不斷變化切換，最后又融合成品牌圖標，簡單明了直觀告訴用戶這個功能可以解決用戶哪些問題。
開篇在淺黃色背景上告訴用戶智能家居應用被重新設計，隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來組成了Home app的圖標，引出介紹內容；通過放大品牌情感溫度從而向用戶傳達品牌理念。
為了讓更多的人使用Apple Pay，蘋果向用戶展示了真實的使用過程，降低認知成本，讓用戶更容易接受并使用。
用全屏視頻內容刺激用戶感官，然后內容逐漸縮放到電視內，一開始就把試聽體驗注入到了用戶腦海中。
背景顏色及內容伴隨電視中的視頻一同切換，讓用戶明確感知產品能做哪些內容。
特寫展示遙控器，隨著遙控器角度變化，內容也跟著變化，就像有位銷售拿著產品在你面前，詳細為你講解每一個按鍵的功能。
蘋果錢包圖標及文字逐漸放大向下移動，并將文字頂出屏幕以外；整體接著放大，錢包底子繼續下移消失，只留下錢包內的彩色卡片，說明文字上升出現。
隨著頁面往下，藍色卡片向上移動，卡片內文字漸顯，頁面整體變成藍色，蘋果巧妙的將圖標元素與賣點內容結合，并通過不同顏色來區分不同內容。
滑到頁面最底部，四張彩色卡片又逐漸插到錢包里，最后再強調用戶去使用。
賣點先后出現，層層遞進，隨后產品被新功能及核心特點彈開， 將產品大、有多大、續航強以及新功能先后映射到了消費者腦海里。
產品用廣角的視角依次出現，一方面展示產品顏色規格、另一方面暗示產品屏幕大。
Plus和電池一同進行充電動畫，僅僅一個關鍵詞和一個圖標，就形象的描述了電池容量大的事實，緊接著更加具體的參數逐一顯示，強化究竟有多大。
產品旋轉運動最后合并成一個由大變小，最后出現價格，強調改產品很實惠。
手機旋轉放大，原來的桌面壁紙變成了產品賣點的背景，將產品和賣點順滑的聯系在一起。
電池圖標與賣點一起進行充電動畫，將賣點順其自然的表達出來。
讓每一句文案絲滑的連接出現，讓用戶能夠感知出產品低延遲的優點，接著產品側影出現將之前內容擦除，引出處理器的強大。
就如賣點所說，產品很貼心的前后為你旋轉展示它的面板，讓用戶看的真真切切。
水花下落被手機彈開，直觀的告訴用戶它是防水的。
漆黑的背景寫著14Pro的標題，隨后標題消失，同時產品從無限大縮小，看完這個動畫才發現，原來之前漆黑背景是新款產品的靈動島，隨后靈動島展示了在不同場景下的狀態，吸引了用戶注意。
產品說明內容使用新款手機墻紙進行漸變顯示，加強了用戶對新款產品的感知。
運用視差，營造空間感，手機和里面的內容先是很大，并且展示第一段說明內容；隨著鼠標往下滑，手機縮小屏幕內容變化，營造了一個真實的場景畫面，來強化新功能的賣點。
標題不斷放大，文字中間的圓逐漸演變成一個圓角矩形，隨后帶出靈動島功能動畫，用戶從頭到尾都沉浸在蘋果編排的情節中，用戶喜歡了解新功能也就順理成章了。
內容往下看，箭頭按鈕從左向右滑動，顯示查看詳細內容的入口，引導用戶點擊查看，這樣做沒有哪位用戶會拒絕自己的好奇心點進去看看。
最開始只有大標題和一個科技感的芯片，隨著頁面下滑，詳細內容顯現，芯片伴隨著分層鏡頭元素逐漸組裝起來，展現出了產品的科技與精密。
手機背部攝像頭用特寫鏡頭伴隨機身從平視到俯視的角度變化，將用戶視線引到攝像頭上，隨后顯示說明文案強化產品宣傳。
開篇全屏出現一朵具有科技感的3d花朵收攏綻放的視頻，隨后鏡頭后推，2臺產品旋轉展開，呈現出一個展翅翱翔的造型，傳達出產品性能強勁展翅高飛的勢能。
處于合起的筆記本漸漸被打開，里面播放著三維動畫界面，暗示用戶它正在處理三維任務，隨后旋轉出2臺電腦，關于電腦的核心參數被顯示出來，告訴用戶具體哪些性能有了提升。
電腦屏幕做爆炸圖動畫處理，形象展示內部結構，吸引用戶關注產品特點內容。
多臺不同顏色的電腦旋轉排列，鏡頭不斷變換角度，最后依次排在一起用側視圖來喚出標題，在營造出歡快的氛圍的同時，還體現出產品多彩的特點。
顏色文案內容不斷切換，電腦變換不同組合方式輪番切換展示，接著營造歡快氛圍。
體現電腦薄的文案放大顯示，隨著頁面往下，文字縮小，逐漸被電腦側邊遮住，用動態對比的方式讓用戶感受到電腦的厚度很薄，再往下，屏幕微抬，搭配關于屏幕旋轉角度的賣點。
電腦切換顏色體現內容發生變化，旋轉角度可以全方位看清新版插口的位置以及體現更方便的使用。
支持多方應用的文案在應用圖標的包圍中下落，下落的過程中同步顯示的應用可以體現支持的應用多，最后和詳細介紹文案碰撞，可以很好的銜接用戶的閱讀視線。
產品逐漸被放大，鏡頭進入內部，里面迸發碰撞的液體體現產品內部有著強勁動力。
承接上一個內容，體現剛才那么強大的動力的源泉就在你眼前，去選一個吧，伴隨著芯片的光影運動，讓你覺得這是一個具有魔法般的嶄新器物。
深入產品內部，不同顏色的光束旋轉流動，用具象的形式體現產品在散熱方面的工作原理以及性能是多么強。
產品快速運動對文字造成拖尾效果，體現產品的輕，以及速度快。
文案內容居于2臺電腦狹小縫隙之間，有一種壓迫感，體現出新產品的實力很強大，緊接著M2芯片由大變小出現，交代出產品之所以強大得益于芯片。
屏幕里的應用在不停的變換，體現電腦在進行不同的應用操作，隨后文字出現，強調續航能力很高。
2臺電腦屏幕旋轉變化，對比出2者間攝像頭位置做了更新。
產品旋轉，展現輕薄側面，搭配攜帶更少，攜帶更多的文案，讓消費者更加肯定它的輕薄。
看了蘋果公司網站中的動畫，不難看出，動畫的核心功能就是用關聯的方式強調、強化賣點
具體方法如下：
1、產品如果有多種顏色，那就盡量在畫面中一起體現
2、讓產品自己說話，善于利用產品的不同角度、運動方式強化產品功能特征
3、不做無用動畫，讓每一個動畫表達明確的意圖，不要讓用戶覺得它只是在動
4、把控文案展現在用戶眼前的先后順序，用故事把它們串聯在一起，從而掌控用戶閱讀節奏
最后我們試想一下，如果網站中的動畫內容全部變成靜態，那會帶來什么樣的后果
1、內容會變得枯燥，賣點得不到強化，用戶購買欲下降
2、靜態內容很難描述一些抽象的功能，例如：如何體現產品散熱很好，音質怎么個好法
3、內容太多占空，原本一個動畫就能說明的內容，非要寫大篇文字
行為設計就是通過一些方法來引導行為，博取用戶的注意力和時間。用戶每次使用產品都是一次和產品交流的旅程，在這個旅程中，我們可以通過一些方法來影響用戶的決策，引導用戶的行為，從而達到產品目的。
斯坦福大學的B.J.福格總結了行為模型：
從這個模型中可以看出，福格教授把行為歸結為3個影響因素：動機、能力和提示
這三個因素又是以什么樣的具體方法對我們的行為進行影響的呢？有以下幾個方面：
動機是做出行為的欲望，是人行為的動力源泉，動機也是最難提高的。
人是群居動物，有強烈的社會屬性，在判斷什么是正確的時候，人們通常會根據其他人的意見行事。而且通常我們對社會認同的反應方式是無意識的，特別是在自己內心有不確定性時，最有可能認為大多數人的選擇是正確的。
在產品設計中，“多數人的選擇” 常常會作為一個重要的信息展現給用戶。比如寸土寸金的淘寶首頁推薦卡片里會把XX人付款作為露出信息。網易云音樂會把播放量當做歌單的必要信息之一。都是告訴用戶，看，許多人都購買了這件商品；看，好多人都選擇聽這首歌，如果你也這么選應該不會錯。
在 「Airbnb」 的詳情頁，有XX條評價，XX人推薦，都是在告訴用戶，這是一間靠譜的，讓人放心的好民宿，是眾多人的選擇，你可以放心的按下“預訂”按鈕。
「 權利服從研究試驗 」
1961年，耶魯大學心理學教授斯坦利·米爾格拉姆做了“權力服從研究”實驗，證明了絕大多數人對權威有服從性和信任感。 實驗中有一個學生單獨在一個房間里，負責實驗的科學家向他進行提問，如果回答錯誤，科學家就會要求接受實驗者通過控制臺對學生進行電擊，電壓從15V到用紅字標注著危險的450V。盡管電壓上升，學生尖叫時，大多數接受實驗者都會有所猶豫或抗議，但還是有65%的參加者服從了科學家的指令。這些參加者涵蓋了20-50歲，各種教育背景的人。這個實驗證明了大多數人都會對權威信服，甚至去虐待一個陌生人。
人對權威有天然的服從性。在產品應用上，我們可以通過放權威性的信息，獲得用戶信任感，從而促進行為的發生。比如五常大米會把自己的官方認證碼放在上面，告訴用戶自己是官方五常大米；被李佳琦這種意見領袖推薦過的商品會寫明自己是李佳琦推薦；
「 得物 」則提供第三方平臺檢驗真偽后再發貨，讓用戶買的放心。而大眾點評則開創了黑珍珠甄選，作為優秀餐廳的官方認證背書。都是用“權威”觸發用戶的順從心里，獲得用戶的信任感。
人們普遍相信“物以稀為貴”，對某樣東西失去的恐懼，會比獲得這樣東西的渴望，更能激發人們的行動力?？释麚碛幸患娙藸帗尩臇|西，幾乎是一種本能。限量版的球鞋，限量版的手辦都讓人狂熱，仿佛沾上“限量”兩個字，它的價值就可以翻上幾翻。
淘寶的收藏，京東的“即將售罄”等都告訴你有限的貨物已經是低庫存狀態，已經快要賣完了，你若再不快點購買就很有可能會失去擁有它的機會，來增加緊迫感。
而商家經常推出的限時優惠、限時秒殺功能，則是用營造時間的稀缺感，告訴用戶時間有限，再不買便會錯過這難得一見的低廉價格，促使用戶馬上行動。
「 舒茲多巴胺試驗」
劍橋大學神經科學教授沃夫藍.舒茲（Wolfram Schultz）做了一個實驗，研究腦內獎賞系統。這個實驗也很有趣，它不僅可以作為預熱行為的論證實驗，還可以作為行為設計另一個重要模型峰終效應的論證實驗多巴胺是大腦中傳遞興奮、開心的物質?？梢砸鸺痈小⑵惹懈谢蚩释?。猴子每次在得到香蕉之前都會先點亮一盞燈，而后才會得到香蕉，幾次過后，研究人員發現，每次燈亮時猴子分泌的多巴胺越來越多，而在得到香蕉時分泌的多巴胺越來越少。多巴胺分泌峰值是在亮燈時。這種期待的快感比實際吃到的快感更強烈。
「 淘寶試妝 」 用AR技術讓我提前體會到的“擁有這只口紅”的快樂。在貝殼用AR看老破小的時候，因為房間破舊雜亂給房子的感官大大減分，但經過一鍵AR裝修后，仿佛看到了我擁有這套房子改造之后的樣子，怎能不心動。
「 海淘的APP考拉 」 在讓我續費會員時，會告訴我之前購買的會員卡為我省了一筆大錢，用300多元卡費省下1989元是多么明智之舉。所以，“放心續費，這波不虧”。同時買會員卡還可以領其它家會員，續費還可以用紅包低價購買我常買的東西，統統都是在告訴我續費會員卡的價值。
「 拼多多的月卡 」讓我印象深刻，在讓我開月卡的詳情頁，會直接把紅包列出來：給4張5元的無門檻券，還有價值174的別的券。這些明明白白的優惠只需要7.8元就可以擁有三個月，簡直不要太劃算。
“宜家效應”是由美國行為經濟學家Dan Ariely提出。源自有很多人熱衷于購買宜家的半成品家具，付出勞動自己進行組裝，并為此感到成就感。 當人們對某件事物的投入越高，對它的感情就會越深，就越會認為它有更高的價值。宜家效應是一種認知偏差，也是一種內在動力。
在產品設計中任務系統勛章設計正是用了這個原理 ，
比如QQ的能量值，需要通過互動、購買等行為獲得的，這圖標本身的意義是不大的，但它卻是在qq中行為活動的象征，炫耀的資本；
想要獲得運動軟件KEEP中的勛章，就要付出體力：進行。這些勛章不僅僅只是一個標識，因為我的付出，讓它們每一個都很有意義。
好奇心也是人的一種內在動力。 激發好奇心，喚醒用戶興趣，促使用戶進行下一步行動。
尤瓦爾·赫拉利的著作人類簡史中里面有個觀點：
人類發展成尼安德特人之后有一部分發展成智人，另一部分沒有。是什么讓尼安德特人發展成智人呢？是好奇——強烈的窺探欲和交流欲，讓尼安德特人慢慢發明了語言，最后成為智人。好奇心，是人類本能。
比如「 知乎 」，首頁信息流都是用問問題的方式勾起用戶對不同內容的好奇心，是點進去查看的動力。社交軟件Soul則通過好奇心驅使用戶進行多維度的靈魂測試，看看自己是個什么樣的靈魂以及需要什么樣的契合。
淘寶的收藏，京東的“即將售罄”等都告訴你有限的貨物已經是低庫存狀態，已經快要賣完了，你若再不快點購買就很有可能會失去擁有它的機會，來增加緊迫感
從福格行為設計模型里面可以看出，用戶對做一件事情的能力越強，干擾和糾結越少，能力門檻越低，這個行為就越容易觸發成功。
比如很多軟件在截圖之后會直接彈出分享或下載選項，讓我在當前頁面便可以進行操作。 在登錄注冊時很多軟件可以直接記錄手機號，讓用戶可以不用輸入信息一鍵登錄，減少操作步驟，促進登陸行為的發生。
有研究證明一個成年人的閱讀速度大約是每個字250毫秒，多行的文字會給人造成壓力，專業性文字會讓人覺得難以理解。
一個小程序中的一個刪除確認彈窗，之前的有個版本放了大段文字想要解釋如何把刪除的任務從回收站復原，在做調研時發現到這個流程時用戶就會卡住，閱讀這長段的文字，雙眉緊簇，不知如何是好。
美國認知心理學先驅，G.A.米勒 做了一系列的實驗，得到了得出了人類工作記憶的上限徘徊在7+-2項。稱為“米勒定律”。后來的科學家們重新評估回憶結果并修正實驗方法后，目前的數據表明，真實的工作記憶是4到5項。
在「貝殼APP」中，對用戶提問不能接受最老的房子，給出的選項并未對時間做過多的細分，可以讓用戶用最快的速度分辨信息做出選擇，不耽誤繼續瀏覽信息流。在租房提示面板中看房時間和入住時間也只給出4個選項，讓用戶快速閱讀快速選擇。
同樣是做用戶反饋，「 餓了么 」使用了簡潔的文案和2個選項，「 美團買菜 」擇用了兩行文案和一個很多選擇的選項，相比之下，美團買菜的用戶調研讓我太有壓力了
有時會因為某些原因不得不給用戶提供多種選擇，過多選擇帶來的內心糾結和思來想去往往只會拖延行動，甚至還會讓行動不了了之。因此
「 貝殼APP 」會幫助用戶做房源對比，在價格，戶型，面積，朝向，裝修等等方面進行對比，幫助用戶進行更好的決策。「 喜馬拉雅 」會在我聽完一個節目后根據我近期所聽內容推薦我可能喜歡的內容，而不用用戶再去費心費勁的搜索。
對于用戶想做，但能力又不足的事情，降低門檻可以有效的促進用戶行為的發生。
比如「 微信讀書 」的無限卡兌換門檻很低，讀1分鐘，讀1小時，讀3小時就都可以兌換，除此之外還有很多很多的常駐活動都能兌換無限卡，降低讀書行為的門檻，讓沒卡這件事，盡量不要成為讀書的阻力。
「 京東支付 」會有京東白條的選項，可以分期付款，降低消費能力的門檻，促進購買行為的發生。
提示是提醒行動的信號，仿佛在對你說“現在就行動”，它必須是個明顯的存在。大多數人都無法抗拒的想要點APP上的紅色數字標簽，它們就是被刻意設計出來吸引注意力，促使我們行動的。
比如「 閑魚APP 」首頁的標簽欄中，把賣閑置這個按鈕做了顏色和形狀的特殊處理，讓它成為底部欄中最與眾不同的一個，吸引用戶觸發點擊。美團優選“新人禮包”彈窗用鮮明的高飽和度紅黃配色，讓用戶滿眼都是“它”
編寫程序是為了讓我們更高效的處理問題，但在生活中我們常常遇到一些重復性的動作，也就是當我們希望一遍又一遍的執行多次代碼，但是每一次執行代碼的值有不同的時候我們就可以使用循環語句來解決問題。
JavaScript支持不同類型的循環:
循環：具備的四個條件
do...while語句可以在某個條件表達式為真的前提下，循環執行指定的一段代碼，直到那個表達式不為真時結束循環。
語法:
while(條件){
需要執行的代碼
}
比如:
//打印0~3
let n = 0;
while (n < 3) {
n++;
}
do...while語句創建一個執行指定語句的循環，直到condition值為 false。在執行statement 后檢測condition，所以指定的statement至少執行一次，理論上,所有的while循環都可以使用doWhile
語法:
//初始化條件
var index = 0;
do{
//遞歸條件
index++;
//循環體;
}while(條件);//同樣的這個條件是一個Boolean
比如:
//列出1~10之間的所有奇數
var index = 0;
do{
index++;
if(index % 2 == 1){
console.log(index);
}
}while(index<10);
比如:
var a = 10;
//while循環
while(a<4){
console.log("執行while循環");
}
//dowhile循環
do{
console.log("這是doWhile循環");
}while(a<4)
for 語句用于創建一個循環，它包含了三個可選的表達式，這三個表達式被包圍在圓括號之中，使用分號分隔，后跟一個用于在循環中執行的語句（通常是一個塊語句）。
語法:
for(初始條件;循環條件;迭代條件){
//循環體
}
比如:
for(var i = 0 ; i < 10 ; i++){
console.log("輸出第"+i+"次循環");
}
上面的執行順序如下：
for...in語句以任意順序迭代一個對象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。
語法:
var 對象名 = {}
for(屬性名 in 對象名){
//循環體
}
比如:
var info={name:"xiaoming",sex:"man",age:18};
for (x in info){
txt=txt + person[x];
}
for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments對象等等）上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句
語法:
for (屬性名 of 對象名) {
//statements
}
比如:
var arr = ['nick','freddy','mike','james'];
for(var item of arr){
console.log(item);
}
拓展
- 拓展1 數組的長度 數組的名字.length
- 拓展2 數組的元素當中 可以是不同的數據類型
來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言：
本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOW
http://t.csdn.cn/oHEOW
代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。
綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list組件收到了傳來的用戶數據',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
-
前言：
本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOW
代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。
綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list組件收到了傳來的用戶數據',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
來源：csdn 藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
1、基本介紹
? 概述
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫。
我們之前也學習過后端的框架 `Mybatis` ，`Mybatis` 是用來簡化 `jdbc` 代碼編寫的；而 `VUE` 是前端的框架，是用來簡化 `JavaScript` 代碼編寫的。前面的綜合性案例，里面進行了大量的DOM操作，如下
使用 `VUE` 后，這部分代碼我們就不需要再寫了。那么 `VUE` 是如何簡化 DOM 書寫呢？基于MVVM(Model-View-ViewModel)思想，實現數據的雙向綁定，將編程的關注點放在數據上。之前我們是將關注點放在了 DOM 操作上；而要了解 `MVVM` 思想，必須先了解 `MVC` 思想，如下圖就是 `MVC` 思想圖解
其中的C 就是咱們 js 代碼，M 就是數據，而 V 是頁面上展示的內容，如下圖：
`MVC` 思想是沒法進行雙向綁定的。雙向綁定是指當數據模型數據發生變化時，頁面展示的會隨之發生變化，而如果表單數據發生變化，綁定的模型數據也隨之發生變化。接下來了解`MVVM` 思想，如下圖是三個組件圖解：
圖中的 `Model` 就是我們的數據，`View` 是視圖，也就是頁面標簽，用戶可以通過瀏覽器看到的內容；`Model` 和 `View` 是通過 `ViewModel` 對象進行雙向綁定的，而 `ViewModel` 對象是 `Vue` 提供的。雙向綁定的效果：下圖是提前準備的代碼寫出來的，輸入框綁定了 `username` 模型數據，而在頁面上也使用 `{{}}` 綁定了 `username` 模型數據
通過瀏覽器打開該頁面可以看到如下頁面
當我們在輸入框中輸入內容，而輸入框后面隨之實時的展示我們輸入的內容，這就是雙向綁定的效果。
? 快速入門
Vue 使用起來是比較簡單的，總共分為如下三步：
1. 新建 HTML 頁面，引入 Vue.js文件
<script src="js/vue.js"></scrip>2. 在JS代碼區域，創建Vue核心對象，進行數據綁定
創建 Vue 對象時，需要傳遞一個 js 對象，而該對象中需要如下屬性：
● `el` ： 用來指定哪個地方的標簽受 Vue 管理。 該屬性取值 `#app` 中的 `app` 需要是受管理的標簽的id屬性值
● `data` ：用來定義數據模型
● `methods` ：用來定義函數。這個我們在后面就會用到3. 編寫視圖
`{{}}` 是 Vue 中定義的 `插值表達式` ，在里面寫數據模型，到時候會將該模型的數據值展示在這個位置。
? 整體代碼如下：
2、Vue 指令
指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同含義。例如：v-if，v-for…
? v-bind & v-model 指令
? v-bind
該指令可以給標簽原有屬性綁定模型數據。這樣模型數據發生變化，標簽屬性值也隨之發生變化，例如：
<a v-bind:href="url">百度一下</a>上面的 `v-bind:"` 可以簡化寫成 `:` ，如下：
? v-model
該指令可以給表單項標簽綁定模型數據。這樣就能實現雙向綁定效果。例如：
<input name="username" v-model="username">? 代碼演示：
通過瀏覽器打開上面頁面，并且使用檢查查看超鏈接的路徑，該路徑會根據輸入框輸入的路徑變化而變化，這是因為超鏈接和輸入框綁定的是同一個模型數據
? v-on 指令
我們在頁面定義一個按鈕，并給該按鈕使用 `v-on` 指令綁定單擊事件，html代碼如下：
<input type="button" value="一個按鈕" v-on:click="show()">而使用 `v-on` 時還可以使用簡化的寫法，將 `v-on:` 替換成 `@`，html代碼如下
<input type="button" value="一個按鈕" @click="show()">上面代碼綁定的 `show()` 需要在 Vue 對象中的 `methods` 屬性中定義出來
注意：`v-on:` 后面的事件名稱是之前原生事件屬性名去掉on。
例如：
● 單擊事件 ： 事件屬性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦點事件：事件屬性名是 onblur，而在vue中使用時 `v-on:blur`? 整體頁面代碼如下：
? 條件判斷指令
接下來通過代碼演示一下。在 Vue中定義一個 `count` 的數據模型，如下
現在要實現，當 `count` 模型的數據是3時，在頁面上展示 `div1` 內容；當 `count` 模型的數據是4時，在頁面上展示 `div2` 內容；`count` 模型數據是其他值時，在頁面上展示 `div3`。這里為了動態改變模型數據 `count` 的值，再定義一個輸入框綁定 `count` 模型數據。html 代碼如下：
? 整體頁面代碼如下：
通過瀏覽器打開頁面并在輸入框輸入不同的值，效果如下
然后我們在看看 `v-show` 指令的效果，如果模型數據 `count ` 的值是3時，展示 `div v-show` 內容，否則不展示，html頁面代碼如下
瀏覽器打開效果如下：
通過上面的演示，發現 `v-show` 和 `v-if` 效果一樣，那它們到底有什么區別呢？我們根據瀏覽器的檢查功能查看源代碼：
通過上圖可以看出 `v-show` 不展示的原理是給對應的標簽添加 `display` css屬性，并將該屬性值設置為 `none` ，這樣就達到了隱藏的效果。而 `v-if` 指令是條件不滿足時根本就不會渲染。
? v-for 指令
這個指令看到名字就知道是用來遍歷的，該指令使用的格式如下：
注意：需要循環那個標簽，`v-for` 指令就寫在那個標簽上。
如果在頁面需要使用到集合模型數據的索引，就需要使用如下格式：
? 代碼演示：
通過瀏覽器打開效果如下
3、生命周期
生命周期的八個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法，這些生命周期方法也被稱為鉤子方法。
下圖是 Vue 官網提供的從創建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數
看到上面的圖，大家無需過多的關注這張圖。這些鉤子方法我們只關注 `mounted` 就行了。
`mounted`：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以后我們會在該方法中發送異步請求，加載數據。
1、基本介紹
? 概述
Element：是餓了么公司前端開發團隊提供的一套基于 Vue 的網站組件庫，用于快速構建網頁。
Element 提供了很多組件（組成網頁的部件）供我們使用。例如 超鏈接、按鈕、圖片、表格等等~
如下圖左邊的是我們編寫頁面看到的按鈕，上圖右邊的是 Element 提供的頁面效果，效果一目了然。
我們學習 Element 其實就是學習怎么從官網拷貝組件到我們自己的頁面并進行修改，官網網址是：元素 - 全球最受歡迎的 Vue UI 框架 (eleme.cn)
進入官網能看到如下頁面
接下來直接點擊 `組件` ，頁面如下
2、Element 布局
Element 提供了兩種布局方式，分別是：
● Layout 布局
● Container 布局容器? Layout 局部
通過基礎的 24 分欄，迅速簡便地創建布局。也就是默認將一行分為 24 欄，根據頁面要求給每一列設置所占的欄數。
在左菜單欄找到 `Layout 布局` ，然后找到自己喜歡的按鈕樣式，點擊 `顯示代碼` ，在下面就會展示出對應的代碼，顯示出的代碼中有樣式，有html標簽。將樣式拷貝我們自己頁面的 `head` 標簽內，將html標簽拷貝到 `<div id="app"></div>` 標簽內。
? 整體頁面代碼如下：
現在需要添加一行，要求該行顯示8個格子，通過計算每個格子占 3 欄，具體的html 代碼如下
? Container 布局容器
用于布局的容器組件，方便快速搭建頁面的基本結構。如下圖就是布局容器效果。
如下圖是官網提供的 Container 布局容器實例：
該效果代碼中包含了樣式、頁面標簽、模型數據。將里面的樣式 `<style>` 拷貝到我們自己頁面的 `head` 標簽中；將html標簽拷貝到 `<div id="app"></div>` 標簽中，再將數據模型拷貝到 `vue` 對象的 `data()` 中。
? 整體頁面代碼如下：
? 完成分頁條展示
在 Element 官網找到 `Pagination 分頁` ，在頁面主體部分找到我們需要的效果，如下
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家好，我是清風。今天給大家分享一個項目中遇到問題解決問題的案例，編程其實就是一個思考的過程，缺少思考就沒有靈魂，遇到問題先靜下心去思考，想到方法后再去實踐。我們要學會靈活變通去解決問題，掌握方法，這樣才能舉一反三，臨危不亂，遇到所有問題都能很好地去解決。
事情是這樣的，做的一個答題小程序，要求在后臺編輯題目，編輯題目是用的textarea文本域，即輸入的是文本內容，配置之后小程序里查詢顯示后臺配置的題目列表。
當然在測試時后臺去配置文本內容，小程序顯示是沒有問題的。因為配置的題目是純文本，小程序里也是直接在text里顯示的，沒有問題。
后臺配置題目
小程序顯示題目
問題往往只有在用的時候才會發現，用戶或管理員的各種操作才能顯現出各種問題?，F在小程序里已經不能正常顯示了，有些顯示的是html格式富文本格式，有些不顯示。顯然和需求大相徑庭，已經出現問題了。
如上圖，在用的時候因為是從word文檔里直接復制過去的題目（事先在word里整理好了題目，由于各部門工作對接，先是在word文檔進行審核），直接復制會把富文本內容也攜帶過去，攜帶過去的當然也有style樣式，小程序里不顯示的原因是富文本的字體顏色是黑色字體，和小程序面背景都是黑色，導致看不到文字。打開控制臺調試，問題確實是這么出現的。
word文檔編輯的題目會出現不同的富文本的樣式格式，這都會導致小程序的不正常顯示。
富文本的文字顏色是黑色，這導致的小程序頁里題目的不顯示。
既然后臺有可能出現富文本，我們直接把小程序題目的渲染方式換成富文本渲染，這樣就算是純文本也可以顯示的。而第二個問題，由于小程序頁面背景顏色是黑色，所以題目的字體顏色不能是黑色，我們做一個查找替換，把style樣式里的字體樣式替換掉就可以了。
樣式可能是各種各樣的，通過查找style樣式里的字體樣式考慮的匹配太多了，比如說color屬性值可以是rgb形式，也可是rgba形式，也可能是#號顏色值形式，還有可能是英文形式顏色，所以不可取。我們換一種思路，直接把style屬性替換掉，即查找到style，換成一個無效的屬性名。案例中我們替換成了c，c是一個無效的屬性，不會觸發節點的查找和計算。
replace函數
我們用到replace函數，replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
參數
請注意，regexp/substr 是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp對象，返回值是一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
that.setData({
_list: res.data
})
let data = that.data._list
data.forEach((element, index) => {
var stemContent = '_list[' + index + '].stemContent'
that.setData({
[stemContent]: element.stemContent.replace(/style/g, 'c')
})
element.choiceTopicVos.forEach((item, i) => {
var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
that.setData({
[listCheck]: item.optionDes.replace(/style/g, 'c')
})
})
})
用到的replace函數，進行了字符串的查找替換，查找到style屬性，把它替換到了無效的屬性c，沒有了樣式屬性，從而達到了去除內聯樣式的效果，經過調試，完美解決問題。
這是一個小問題，我為什么要拿出來說呢？拋去開發的測試流程不說，我認為它能引發一些思考。寫代碼的過程必須是一個思考的過程，怎么樣更好地去實現效果，怎么樣更簡單有效地解決問題，怎么樣優化，要去考慮一個大的方面。善于發現問題，解決問題，并不是說用了什么高級語言就鄙棄了思考，機器語言是相通的，開發中各種各樣地應用才是魅力所在。編程是一門是藝術，最重要的是你怎樣去巧妙地運用，就像解一道數學題，精絕巧妙的解法會讓人眼前一亮，增色太多。同樣都做出來了，但是你做的就顯得十分優雅！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn