根據(jù)互聯(lián)網(wǎng)消費(fèi)調(diào)研中心，了解到戴森的消費(fèi)者大致有三個(gè)特征：高品質(zhì)消費(fèi)、重視生活之美、新生活開(kāi)啟者。重視生活之美的消費(fèi)者更注重設(shè)計(jì)美觀、獨(dú)特、有辨識(shí)度的產(chǎn)品。
戴森品牌定位：高端、黑科技、高顏值。
下面我們通過(guò)案例去了解戴森是如何通過(guò)設(shè)計(jì)滿足品牌方和消費(fèi)人群的。
戴森APP 1.0首頁(yè)通過(guò)模擬房屋、顏色變化來(lái)向用戶直觀展示屋外、屋內(nèi)的空氣狀態(tài)；整體來(lái)看擬物化可以很直觀的向用戶展示信息，房屋的造型給用戶一種溫馨家的生活之美，更有辨識(shí)度。
屋外主要有天氣、AQI（空氣質(zhì)量）、溫度、濕度、PM2.5、紫外線等信息；
屋內(nèi)主要有Wifi強(qiáng)度、房間名稱、屋內(nèi)空氣質(zhì)量、溫度、濕度其它信息、設(shè)備圖片；
頁(yè)面左下角為設(shè)備控制入口、右下角為時(shí)間設(shè)置；底部可以通過(guò)左右滑動(dòng)切換設(shè)備類型。
繁多的信息雖然給用戶專業(yè)的感覺(jué)，但無(wú)形之中削弱了信息的層級(jí)，并且有的圖標(biāo)使用不準(zhǔn)確，用戶不知道是什么。頁(yè)面中使用產(chǎn)品圖可以強(qiáng)化自身產(chǎn)品品牌，增強(qiáng)產(chǎn)品辨識(shí)度。
戴森APP 2.0首頁(yè)相比1.0，區(qū)分了信息層級(jí)，增強(qiáng)了操控體驗(yàn)。
根據(jù)用戶使用習(xí)慣，屋外只保留了空氣質(zhì)量等級(jí)、溫度、濕度這些常用的信息；
擴(kuò)大了房間區(qū)域，為信息提供更多展示空間，降低視覺(jué)干擾。屋內(nèi)保留Wifi強(qiáng)度、房間名稱、屋內(nèi)空氣質(zhì)量、溫度濕度，將設(shè)備核心功能入口外顯，用戶可以更便捷去操控設(shè)備，提升了易用性。
使用局部放大的產(chǎn)品，用圓形襯底，并且還可以體現(xiàn)設(shè)備開(kāi)關(guān)狀態(tài)，這樣做可以統(tǒng)一不同產(chǎn)品下的畫(huà)面，增強(qiáng)了用戶對(duì)于產(chǎn)品狀態(tài)的感知，從而強(qiáng)化了產(chǎn)品品牌。
首頁(yè)通過(guò)上滑、下拉等手勢(shì)可以查看關(guān)于空氣質(zhì)量的更多詳細(xì)信息，將主次信息分級(jí)，既能凸顯首頁(yè)主要信息，還不影響用戶快速查看詳情的效率。
相比戴森，Smartmi P1在灰底上只保留空氣質(zhì)量、Pm2.5、產(chǎn)品圖，大留白，從而凸顯的是簡(jiǎn)潔的科技感。
功能上也做了整合，簡(jiǎn)化了操控細(xì)節(jié)，為用戶提供了自動(dòng)、睡眠、中速、自定義等快捷選擇。
兩個(gè)品牌對(duì)比來(lái)看，戴森體現(xiàn)了家的溫情，Smartmi P1則體現(xiàn)了簡(jiǎn)約的科技。
在家電市場(chǎng)中，廠家都希望消費(fèi)者提高購(gòu)買(mǎi)頻次，界面底部濾芯的剩余使用時(shí)長(zhǎng)，可以起到提示用戶及時(shí)更換濾芯的作用，從而提高購(gòu)買(mǎi)頻次。這一點(diǎn)還是值得借鑒的。
通過(guò)查看戴森店鋪裝修風(fēng)格、流程界面縮略圖，發(fā)現(xiàn)戴森將它的品牌色——黑色、紫色貫穿至每一個(gè)需要引起用戶注意的元素上，視覺(jué)感受上更有一種“黑”科技的感覺(jué)，強(qiáng)化了品牌感知。
對(duì)于空氣質(zhì)量等級(jí)顏色的選擇，戴森與空氣質(zhì)量指數(shù)（AQI）等級(jí)顏色保持一致性。
室內(nèi)室外顏色均可根據(jù)空氣質(zhì)量等級(jí)顯示不同效果，可以給用戶提供更加直觀的感受。
Smartmi P1 則是通過(guò)文字和部分顏色來(lái)體現(xiàn)空氣質(zhì)量等級(jí)，用戶感知弱。
空氣質(zhì)量詳情頁(yè)，戴森和SmartP1均使用色塊體現(xiàn)等級(jí)，戴森使用的面積更大，更加明顯，P1則一貫延續(xù)留白的簡(jiǎn)潔科技感。兩者都有數(shù)據(jù)分析功能，戴森通過(guò)刻度、細(xì)線條、更加規(guī)整的布局，看上去更具專業(yè)性，品質(zhì)感。
戴森和Smart P1都有各個(gè)空氣污染物等級(jí)的說(shuō)明，用戶可以了解當(dāng)前空氣質(zhì)量情況及顯示規(guī)則。
Smart P1 可以讓用戶設(shè)置哪些空氣污染物顯示，空氣污染物等級(jí)說(shuō)明在一頁(yè)顯示，用戶需要上下滑動(dòng)來(lái)查找相關(guān)污染物。
戴森將污染物類型做成導(dǎo)航形式，用戶可以快速選擇要看的類型；
范圍區(qū)間和對(duì)應(yīng)的顏色放一起，強(qiáng)調(diào)了他們之間的關(guān)聯(lián)性，并且可以承載更多的說(shuō)明信息。
對(duì)于硬件廠商，在設(shè)計(jì)界面時(shí)，其中一個(gè)重要的需求就是“在界面中體現(xiàn)產(chǎn)品”，從而增強(qiáng)產(chǎn)品的獨(dú)特性、辨識(shí)度。那么如何做才能恰到好處的向用戶展示產(chǎn)品信息呢？來(lái)看看戴森怎么做的，具體主要有兩方面：
1、App中產(chǎn)品出現(xiàn)的節(jié)點(diǎn)；2、以什么形式展示產(chǎn)品。
最順其自然的就是在設(shè)備控制界面放置對(duì)應(yīng)的產(chǎn)品，其次就是在引導(dǎo)頁(yè)中體現(xiàn)，可以很直觀的告知用戶如何操作及產(chǎn)品當(dāng)前的狀態(tài)反饋。
最后還可以在登錄頁(yè)、空狀態(tài)頁(yè)作為裝飾元素出現(xiàn)。
產(chǎn)品展現(xiàn)形式在控制界面及引導(dǎo)頁(yè)面要盡可能展示產(chǎn)品當(dāng)前場(chǎng)景下的樣子。
例如：在調(diào)節(jié)角度界面，用俯視圖可以更加直觀體現(xiàn)旋轉(zhuǎn)角度的狀態(tài)。
在房屋界面，由于只需要體現(xiàn)設(shè)備狀態(tài)，所以用45度視角盡可能體現(xiàn)產(chǎn)品獨(dú)特的造型細(xì)節(jié)。
在登錄頁(yè)使用產(chǎn)品線框圖作為裝飾元素，減少對(duì)文本內(nèi)容的干擾。
首頁(yè)上空氣凈化器選取常用的功能作為快速入口，并且使用圓、圓角矩形作為按鍵外框，我們看它的實(shí)體遙控器、產(chǎn)品造型，就知道為什么要用這2種形態(tài)了，這樣可以延續(xù)戴森的產(chǎn)品特征，使得整體品牌更具辨識(shí)度，達(dá)到強(qiáng)化品牌滲透的目的。
右下角為設(shè)備控制詳情入口，通過(guò)使用不透明白底與快捷功能鍵作出區(qū)分，還能保持整體性，品質(zhì)感。
控制詳情頁(yè)放置產(chǎn)品實(shí)物圖，可以直觀展示產(chǎn)品狀態(tài)，功能圖標(biāo)前期做了區(qū)分歸類，保證每一行的圖標(biāo)尺寸一致的同時(shí)確保它們之間的相關(guān)性。角度設(shè)置界面，產(chǎn)品使用俯視圖，可以直觀展示角度信息。
對(duì)于用戶常用的操作使用滑動(dòng)手勢(shì)，例如：風(fēng)量，長(zhǎng)按上下滑動(dòng)可以很方便設(shè)置等級(jí)，松手返回確認(rèn)，風(fēng)量按鈕可以顯示風(fēng)量等級(jí)條，用戶不僅可以通過(guò)數(shù)字了解風(fēng)量等級(jí)，還可以通過(guò)進(jìn)度條更直觀感知風(fēng)量大小。
從畫(huà)面中可以看出，同樣的風(fēng)向設(shè)置按鈕，在首頁(yè)，點(diǎn)擊后只能進(jìn)行開(kāi)啟、關(guān)閉風(fēng)向；進(jìn)入控制詳情頁(yè)，則可以設(shè)置具體的角度值；保證在不同場(chǎng)景下即可以快速便捷控制設(shè)備，也可以精確控制設(shè)備。
最左邊的控制界面是最早的版本，只有啟動(dòng)或停止機(jī)器的功能，使用帶角度的視角來(lái)展示機(jī)器與場(chǎng)景，并且機(jī)器是可以進(jìn)行移動(dòng)擦除動(dòng)畫(huà)，體現(xiàn)運(yùn)行中的狀態(tài)，這種方式比較耗費(fèi)開(kāi)發(fā)時(shí)間。
中間的界面是過(guò)渡版本，較上一個(gè)版本做了優(yōu)化，采用正視圖，并且增加了運(yùn)行強(qiáng)度、運(yùn)行區(qū)域、定時(shí)功能，底部的地板元素漸變處理減少了畫(huà)面對(duì)功能入口的干擾，既能體現(xiàn)場(chǎng)景，還更加易用。
最右邊界面為最新版本，放大了產(chǎn)品，減少了不必要的視覺(jué)元素，弱化了地板背景；充電圖標(biāo)和設(shè)備狀態(tài)放置頂部，與功能區(qū)做區(qū)分；運(yùn)行強(qiáng)度選項(xiàng)由展開(kāi)變成收起，估計(jì)這個(gè)功能使用頻率較低；運(yùn)行區(qū)域、定時(shí)功能的圖標(biāo)做了優(yōu)化，更加貼切。視覺(jué)和功能得到了完美的平衡。
燈光控制界面，主畫(huà)面是燈頂部實(shí)物圖，值得一提的是，點(diǎn)擊圖片上的開(kāi)關(guān)按鈕就可以實(shí)現(xiàn)燈的開(kāi)啟關(guān)閉，很直接；點(diǎn)擊開(kāi)關(guān)上部的區(qū)域，會(huì)彈出色溫、亮度調(diào)節(jié)界面。功能區(qū)域和實(shí)物結(jié)合的形式值得我們學(xué)習(xí)。
右下角為場(chǎng)景選擇，可以選擇系統(tǒng)自帶的燈光使用場(chǎng)景，例如：讀書(shū)模式、休閑模式，也可以自定義，可以方便快速設(shè)定光線。
通過(guò)對(duì)戴森App的分析，我們了解到了可以通過(guò)擬物或者將功能控制區(qū)與實(shí)物結(jié)合的方式，提升用戶操控體驗(yàn)及產(chǎn)品品牌辨識(shí)度；對(duì)于硬件產(chǎn)品App，要盡可能保持與實(shí)物的一致性，突出產(chǎn)品特征，包括按鈕形狀、色彩；還有就是可以學(xué)習(xí)到戴森為了平衡用戶與品牌方的需求，在視覺(jué)層面、交互層面的細(xì)微改動(dòng)下的思考方式。
Apple One里面有6款不同類型的應(yīng)用捆綁在一起，頁(yè)面開(kāi)篇這6款應(yīng)用圖標(biāo)橫向平鋪，隨后依次翻轉(zhuǎn)，接著Apple One也翻轉(zhuǎn)出來(lái)，向用戶強(qiáng)調(diào)它們被包含在該產(chǎn)品里。
品牌圖標(biāo)演化出多種圓形內(nèi)容，內(nèi)容還會(huì)不斷變化切換，最后又融合成品牌圖標(biāo)，簡(jiǎn)單明了直觀告訴用戶這個(gè)功能可以解決用戶哪些問(wèn)題。
開(kāi)篇在淺黃色背景上告訴用戶智能家居應(yīng)用被重新設(shè)計(jì)，隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來(lái)組成了Home app的圖標(biāo)，引出介紹內(nèi)容；通過(guò)放大品牌情感溫度從而向用戶傳達(dá)品牌理念。
為了讓更多的人使用Apple Pay，蘋(píng)果向用戶展示了真實(shí)的使用過(guò)程，降低認(rèn)知成本，讓用戶更容易接受并使用。
用全屏視頻內(nèi)容刺激用戶感官，然后內(nèi)容逐漸縮放到電視內(nèi)，一開(kāi)始就把試聽(tīng)體驗(yàn)注入到了用戶腦海中。
背景顏色及內(nèi)容伴隨電視中的視頻一同切換，讓用戶明確感知產(chǎn)品能做哪些內(nèi)容。
特寫(xiě)展示遙控器，隨著遙控器角度變化，內(nèi)容也跟著變化，就像有位銷(xiāo)售拿著產(chǎn)品在你面前，詳細(xì)為你講解每一個(gè)按鍵的功能。
蘋(píng)果錢(qián)包圖標(biāo)及文字逐漸放大向下移動(dòng)，并將文字頂出屏幕以外；整體接著放大，錢(qián)包底子繼續(xù)下移消失，只留下錢(qián)包內(nèi)的彩色卡片，說(shuō)明文字上升出現(xiàn)。
隨著頁(yè)面往下，藍(lán)色卡片向上移動(dòng)，卡片內(nèi)文字漸顯，頁(yè)面整體變成藍(lán)色，蘋(píng)果巧妙的將圖標(biāo)元素與賣(mài)點(diǎn)內(nèi)容結(jié)合，并通過(guò)不同顏色來(lái)區(qū)分不同內(nèi)容。
滑到頁(yè)面最底部，四張彩色卡片又逐漸插到錢(qián)包里，最后再?gòu)?qiáng)調(diào)用戶去使用。
賣(mài)點(diǎn)先后出現(xiàn)，層層遞進(jìn)，隨后產(chǎn)品被新功能及核心特點(diǎn)彈開(kāi)， 將產(chǎn)品大、有多大、續(xù)航強(qiáng)以及新功能先后映射到了消費(fèi)者腦海里。
產(chǎn)品用廣角的視角依次出現(xiàn)，一方面展示產(chǎn)品顏色規(guī)格、另一方面暗示產(chǎn)品屏幕大。
Plus和電池一同進(jìn)行充電動(dòng)畫(huà)，僅僅一個(gè)關(guān)鍵詞和一個(gè)圖標(biāo)，就形象的描述了電池容量大的事實(shí)，緊接著更加具體的參數(shù)逐一顯示，強(qiáng)化究竟有多大。
產(chǎn)品旋轉(zhuǎn)運(yùn)動(dòng)最后合并成一個(gè)由大變小，最后出現(xiàn)價(jià)格，強(qiáng)調(diào)改產(chǎn)品很實(shí)惠。
手機(jī)旋轉(zhuǎn)放大，原來(lái)的桌面壁紙變成了產(chǎn)品賣(mài)點(diǎn)的背景，將產(chǎn)品和賣(mài)點(diǎn)順滑的聯(lián)系在一起。
電池圖標(biāo)與賣(mài)點(diǎn)一起進(jìn)行充電動(dòng)畫(huà)，將賣(mài)點(diǎn)順其自然的表達(dá)出來(lái)。
讓每一句文案絲滑的連接出現(xiàn)，讓用戶能夠感知出產(chǎn)品低延遲的優(yōu)點(diǎn)，接著產(chǎn)品側(cè)影出現(xiàn)將之前內(nèi)容擦除，引出處理器的強(qiáng)大。
就如賣(mài)點(diǎn)所說(shuō)，產(chǎn)品很貼心的前后為你旋轉(zhuǎn)展示它的面板，讓用戶看的真真切切。
水花下落被手機(jī)彈開(kāi)，直觀的告訴用戶它是防水的。
漆黑的背景寫(xiě)著14Pro的標(biāo)題，隨后標(biāo)題消失，同時(shí)產(chǎn)品從無(wú)限大縮小，看完這個(gè)動(dòng)畫(huà)才發(fā)現(xiàn)，原來(lái)之前漆黑背景是新款產(chǎn)品的靈動(dòng)島，隨后靈動(dòng)島展示了在不同場(chǎng)景下的狀態(tài)，吸引了用戶注意。
產(chǎn)品說(shuō)明內(nèi)容使用新款手機(jī)墻紙進(jìn)行漸變顯示，加強(qiáng)了用戶對(duì)新款產(chǎn)品的感知。
運(yùn)用視差，營(yíng)造空間感，手機(jī)和里面的內(nèi)容先是很大，并且展示第一段說(shuō)明內(nèi)容；隨著鼠標(biāo)往下滑，手機(jī)縮小屏幕內(nèi)容變化，營(yíng)造了一個(gè)真實(shí)的場(chǎng)景畫(huà)面，來(lái)強(qiáng)化新功能的賣(mài)點(diǎn)。
標(biāo)題不斷放大，文字中間的圓逐漸演變成一個(gè)圓角矩形，隨后帶出靈動(dòng)島功能動(dòng)畫(huà)，用戶從頭到尾都沉浸在蘋(píng)果編排的情節(jié)中，用戶喜歡了解新功能也就順理成章了。
內(nèi)容往下看，箭頭按鈕從左向右滑動(dòng)，顯示查看詳細(xì)內(nèi)容的入口，引導(dǎo)用戶點(diǎn)擊查看，這樣做沒(méi)有哪位用戶會(huì)拒絕自己的好奇心點(diǎn)進(jìn)去看看。
最開(kāi)始只有大標(biāo)題和一個(gè)科技感的芯片，隨著頁(yè)面下滑，詳細(xì)內(nèi)容顯現(xiàn)，芯片伴隨著分層鏡頭元素逐漸組裝起來(lái)，展現(xiàn)出了產(chǎn)品的科技與精密。
手機(jī)背部攝像頭用特寫(xiě)鏡頭伴隨機(jī)身從平視到俯視的角度變化，將用戶視線引到攝像頭上，隨后顯示說(shuō)明文案強(qiáng)化產(chǎn)品宣傳。
開(kāi)篇全屏出現(xiàn)一朵具有科技感的3d花朵收攏綻放的視頻，隨后鏡頭后推，2臺(tái)產(chǎn)品旋轉(zhuǎn)展開(kāi)，呈現(xiàn)出一個(gè)展翅翱翔的造型，傳達(dá)出產(chǎn)品性能強(qiáng)勁展翅高飛的勢(shì)能。
處于合起的筆記本漸漸被打開(kāi)，里面播放著三維動(dòng)畫(huà)界面，暗示用戶它正在處理三維任務(wù)，隨后旋轉(zhuǎn)出2臺(tái)電腦，關(guān)于電腦的核心參數(shù)被顯示出來(lái)，告訴用戶具體哪些性能有了提升。
電腦屏幕做爆炸圖動(dòng)畫(huà)處理，形象展示內(nèi)部結(jié)構(gòu)，吸引用戶關(guān)注產(chǎn)品特點(diǎn)內(nèi)容。
多臺(tái)不同顏色的電腦旋轉(zhuǎn)排列，鏡頭不斷變換角度，最后依次排在一起用側(cè)視圖來(lái)喚出標(biāo)題，在營(yíng)造出歡快的氛圍的同時(shí)，還體現(xiàn)出產(chǎn)品多彩的特點(diǎn)。
顏色文案內(nèi)容不斷切換，電腦變換不同組合方式輪番切換展示，接著營(yíng)造歡快氛圍。
體現(xiàn)電腦薄的文案放大顯示，隨著頁(yè)面往下，文字縮小，逐漸被電腦側(cè)邊遮住，用動(dòng)態(tài)對(duì)比的方式讓用戶感受到電腦的厚度很薄，再往下，屏幕微抬，搭配關(guān)于屏幕旋轉(zhuǎn)角度的賣(mài)點(diǎn)。
電腦切換顏色體現(xiàn)內(nèi)容發(fā)生變化，旋轉(zhuǎn)角度可以全方位看清新版插口的位置以及體現(xiàn)更方便的使用。
支持多方應(yīng)用的文案在應(yīng)用圖標(biāo)的包圍中下落，下落的過(guò)程中同步顯示的應(yīng)用可以體現(xiàn)支持的應(yīng)用多，最后和詳細(xì)介紹文案碰撞，可以很好的銜接用戶的閱讀視線。
產(chǎn)品逐漸被放大，鏡頭進(jìn)入內(nèi)部，里面迸發(fā)碰撞的液體體現(xiàn)產(chǎn)品內(nèi)部有著強(qiáng)勁動(dòng)力。
承接上一個(gè)內(nèi)容，體現(xiàn)剛才那么強(qiáng)大的動(dòng)力的源泉就在你眼前，去選一個(gè)吧，伴隨著芯片的光影運(yùn)動(dòng)，讓你覺(jué)得這是一個(gè)具有魔法般的嶄新器物。
深入產(chǎn)品內(nèi)部，不同顏色的光束旋轉(zhuǎn)流動(dòng)，用具象的形式體現(xiàn)產(chǎn)品在散熱方面的工作原理以及性能是多么強(qiáng)。
產(chǎn)品快速運(yùn)動(dòng)對(duì)文字造成拖尾效果，體現(xiàn)產(chǎn)品的輕，以及速度快。
文案內(nèi)容居于2臺(tái)電腦狹小縫隙之間，有一種壓迫感，體現(xiàn)出新產(chǎn)品的實(shí)力很強(qiáng)大，緊接著M2芯片由大變小出現(xiàn)，交代出產(chǎn)品之所以強(qiáng)大得益于芯片。
屏幕里的應(yīng)用在不停的變換，體現(xiàn)電腦在進(jìn)行不同的應(yīng)用操作，隨后文字出現(xiàn)，強(qiáng)調(diào)續(xù)航能力很高。
2臺(tái)電腦屏幕旋轉(zhuǎn)變化，對(duì)比出2者間攝像頭位置做了更新。
產(chǎn)品旋轉(zhuǎn)，展現(xiàn)輕薄側(cè)面，搭配攜帶更少，攜帶更多的文案，讓消費(fèi)者更加肯定它的輕薄。
看了蘋(píng)果公司網(wǎng)站中的動(dòng)畫(huà)，不難看出，動(dòng)畫(huà)的核心功能就是用關(guān)聯(lián)的方式強(qiáng)調(diào)、強(qiáng)化賣(mài)點(diǎn)
具體方法如下：
1、產(chǎn)品如果有多種顏色，那就盡量在畫(huà)面中一起體現(xiàn)
2、讓產(chǎn)品自己說(shuō)話，善于利用產(chǎn)品的不同角度、運(yùn)動(dòng)方式強(qiáng)化產(chǎn)品功能特征
3、不做無(wú)用動(dòng)畫(huà)，讓每一個(gè)動(dòng)畫(huà)表達(dá)明確的意圖，不要讓用戶覺(jué)得它只是在動(dòng)
4、把控文案展現(xiàn)在用戶眼前的先后順序，用故事把它們串聯(lián)在一起，從而掌控用戶閱讀節(jié)奏
最后我們?cè)囅胍幌拢绻W(wǎng)站中的動(dòng)畫(huà)內(nèi)容全部變成靜態(tài)，那會(huì)帶來(lái)什么樣的后果
1、內(nèi)容會(huì)變得枯燥，賣(mài)點(diǎn)得不到強(qiáng)化，用戶購(gòu)買(mǎi)欲下降
2、靜態(tài)內(nèi)容很難描述一些抽象的功能，例如：如何體現(xiàn)產(chǎn)品散熱很好，音質(zhì)怎么個(gè)好法
3、內(nèi)容太多占空，原本一個(gè)動(dòng)畫(huà)就能說(shuō)明的內(nèi)容，非要寫(xiě)大篇文字
行為設(shè)計(jì)就是通過(guò)一些方法來(lái)引導(dǎo)行為，博取用戶的注意力和時(shí)間。用戶每次使用產(chǎn)品都是一次和產(chǎn)品交流的旅程，在這個(gè)旅程中，我們可以通過(guò)一些方法來(lái)影響用戶的決策，引導(dǎo)用戶的行為，從而達(dá)到產(chǎn)品目的。
斯坦福大學(xué)的B.J.福格總結(jié)了行為模型：
從這個(gè)模型中可以看出，福格教授把行為歸結(jié)為3個(gè)影響因素：動(dòng)機(jī)、能力和提示
這三個(gè)因素又是以什么樣的具體方法對(duì)我們的行為進(jìn)行影響的呢？有以下幾個(gè)方面：
動(dòng)機(jī)是做出行為的欲望，是人行為的動(dòng)力源泉，動(dòng)機(jī)也是最難提高的。
人是群居動(dòng)物，有強(qiáng)烈的社會(huì)屬性，在判斷什么是正確的時(shí)候，人們通常會(huì)根據(jù)其他人的意見(jiàn)行事。而且通常我們對(duì)社會(huì)認(rèn)同的反應(yīng)方式是無(wú)意識(shí)的，特別是在自己內(nèi)心有不確定性時(shí)，最有可能認(rèn)為大多數(shù)人的選擇是正確的。
在產(chǎn)品設(shè)計(jì)中，“多數(shù)人的選擇” 常常會(huì)作為一個(gè)重要的信息展現(xiàn)給用戶。比如寸土寸金的淘寶首頁(yè)推薦卡片里會(huì)把XX人付款作為露出信息。網(wǎng)易云音樂(lè)會(huì)把播放量當(dāng)做歌單的必要信息之一。都是告訴用戶，看，許多人都購(gòu)買(mǎi)了這件商品；看，好多人都選擇聽(tīng)這首歌，如果你也這么選應(yīng)該不會(huì)錯(cuò)。
在 「Airbnb」 的詳情頁(yè)，有XX條評(píng)價(jià)，XX人推薦，都是在告訴用戶，這是一間靠譜的，讓人放心的好民宿，是眾多人的選擇，你可以放心的按下“預(yù)訂”按鈕。
「 權(quán)利服從研究試驗(yàn) 」
1961年，耶魯大學(xué)心理學(xué)教授斯坦利·米爾格拉姆做了“權(quán)力服從研究”實(shí)驗(yàn)，證明了絕大多數(shù)人對(duì)權(quán)威有服從性和信任感。 實(shí)驗(yàn)中有一個(gè)學(xué)生單獨(dú)在一個(gè)房間里，負(fù)責(zé)實(shí)驗(yàn)的科學(xué)家向他進(jìn)行提問(wèn)，如果回答錯(cuò)誤，科學(xué)家就會(huì)要求接受實(shí)驗(yàn)者通過(guò)控制臺(tái)對(duì)學(xué)生進(jìn)行電擊，電壓從15V到用紅字標(biāo)注著危險(xiǎn)的450V。盡管電壓上升，學(xué)生尖叫時(shí)，大多數(shù)接受實(shí)驗(yàn)者都會(huì)有所猶豫或抗議，但還是有65%的參加者服從了科學(xué)家的指令。這些參加者涵蓋了20-50歲，各種教育背景的人。這個(gè)實(shí)驗(yàn)證明了大多數(shù)人都會(huì)對(duì)權(quán)威信服，甚至去虐待一個(gè)陌生人。
人對(duì)權(quán)威有天然的服從性。在產(chǎn)品應(yīng)用上，我們可以通過(guò)放權(quán)威性的信息，獲得用戶信任感，從而促進(jìn)行為的發(fā)生。比如五常大米會(huì)把自己的官方認(rèn)證碼放在上面，告訴用戶自己是官方五常大米；被李佳琦這種意見(jiàn)領(lǐng)袖推薦過(guò)的商品會(huì)寫(xiě)明自己是李佳琦推薦；
「 得物 」則提供第三方平臺(tái)檢驗(yàn)真?zhèn)魏笤侔l(fā)貨，讓用戶買(mǎi)的放心。而大眾點(diǎn)評(píng)則開(kāi)創(chuàng)了黑珍珠甄選，作為優(yōu)秀餐廳的官方認(rèn)證背書(shū)。都是用“權(quán)威”觸發(fā)用戶的順從心里，獲得用戶的信任感。
人們普遍相信“物以稀為貴”，對(duì)某樣?xùn)|西失去的恐懼，會(huì)比獲得這樣?xùn)|西的渴望，更能激發(fā)人們的行動(dòng)力?？释麚碛幸患娙藸?zhēng)搶的東西，幾乎是一種本能。限量版的球鞋，限量版的手辦都讓人狂熱，仿佛沾上“限量”兩個(gè)字，它的價(jià)值就可以翻上幾翻。
淘寶的收藏，京東的“即將售罄”等都告訴你有限的貨物已經(jīng)是低庫(kù)存狀態(tài)，已經(jīng)快要賣(mài)完了，你若再不快點(diǎn)購(gòu)買(mǎi)就很有可能會(huì)失去擁有它的機(jī)會(huì)，來(lái)增加緊迫感。
而商家經(jīng)常推出的限時(shí)優(yōu)惠、限時(shí)秒殺功能，則是用營(yíng)造時(shí)間的稀缺感，告訴用戶時(shí)間有限，再不買(mǎi)便會(huì)錯(cuò)過(guò)這難得一見(jiàn)的低廉價(jià)格，促使用戶馬上行動(dòng)。
「 舒茲多巴胺試驗(yàn)」
劍橋大學(xué)神經(jīng)科學(xué)教授沃夫藍(lán).舒茲（Wolfram Schultz）做了一個(gè)實(shí)驗(yàn)，研究腦內(nèi)獎(jiǎng)賞系統(tǒng)。這個(gè)實(shí)驗(yàn)也很有趣，它不僅可以作為預(yù)熱行為的論證實(shí)驗(yàn)，還可以作為行為設(shè)計(jì)另一個(gè)重要模型峰終效應(yīng)的論證實(shí)驗(yàn)多巴胺是大腦中傳遞興奮、開(kāi)心的物質(zhì)?？梢砸鸺?dòng)感、迫切感或渴望感。猴子每次在得到香蕉之前都會(huì)先點(diǎn)亮一盞燈，而后才會(huì)得到香蕉，幾次過(guò)后，研究人員發(fā)現(xiàn)，每次燈亮?xí)r猴子分泌的多巴胺越來(lái)越多，而在得到香蕉時(shí)分泌的多巴胺越來(lái)越少。多巴胺分泌峰值是在亮燈時(shí)。這種期待的快感比實(shí)際吃到的快感更強(qiáng)烈。
「 淘寶試妝 」 用AR技術(shù)讓我提前體會(huì)到的“擁有這只口紅”的快樂(lè)。在貝殼用AR看老破小的時(shí)候，因?yàn)榉块g破舊雜亂給房子的感官大大減分，但經(jīng)過(guò)一鍵AR裝修后，仿佛看到了我擁有這套房子改造之后的樣子，怎能不心動(dòng)。
「 海淘的APP考拉 」 在讓我續(xù)費(fèi)會(huì)員時(shí)，會(huì)告訴我之前購(gòu)買(mǎi)的會(huì)員卡為我省了一筆大錢(qián)，用300多元卡費(fèi)省下1989元是多么明智之舉。所以，“放心續(xù)費(fèi)，這波不虧”。同時(shí)買(mǎi)會(huì)員卡還可以領(lǐng)其它家會(huì)員，續(xù)費(fèi)還可以用紅包低價(jià)購(gòu)買(mǎi)我常買(mǎi)的東西，統(tǒng)統(tǒng)都是在告訴我續(xù)費(fèi)會(huì)員卡的價(jià)值。
「 拼多多的月卡 」讓我印象深刻，在讓我開(kāi)月卡的詳情頁(yè)，會(huì)直接把紅包列出來(lái)：給4張5元的無(wú)門(mén)檻券，還有價(jià)值174的別的券。這些明明白白的優(yōu)惠只需要7.8元就可以擁有三個(gè)月，簡(jiǎn)直不要太劃算。
“宜家效應(yīng)”是由美國(guó)行為經(jīng)濟(jì)學(xué)家Dan Ariely提出。源自有很多人熱衷于購(gòu)買(mǎi)宜家的半成品家具，付出勞動(dòng)自己進(jìn)行組裝，并為此感到成就感。 當(dāng)人們對(duì)某件事物的投入越高，對(duì)它的感情就會(huì)越深，就越會(huì)認(rèn)為它有更高的價(jià)值。宜家效應(yīng)是一種認(rèn)知偏差，也是一種內(nèi)在動(dòng)力。
在產(chǎn)品設(shè)計(jì)中任務(wù)系統(tǒng)勛章設(shè)計(jì)正是用了這個(gè)原理 ，
比如QQ的能量值，需要通過(guò)互動(dòng)、購(gòu)買(mǎi)等行為獲得的，這圖標(biāo)本身的意義是不大的，但它卻是在qq中行為活動(dòng)的象征，炫耀的資本；
想要獲得運(yùn)動(dòng)軟件KEEP中的勛章，就要付出體力：進(jìn)行。這些勛章不僅僅只是一個(gè)標(biāo)識(shí)，因?yàn)槲业母冻觯屗鼈兠恳粋€(gè)都很有意義。
好奇心也是人的一種內(nèi)在動(dòng)力。 激發(fā)好奇心，喚醒用戶興趣，促使用戶進(jìn)行下一步行動(dòng)。
尤瓦爾·赫拉利的著作人類簡(jiǎn)史中里面有個(gè)觀點(diǎn)：
人類發(fā)展成尼安德特人之后有一部分發(fā)展成智人，另一部分沒(méi)有。是什么讓尼安德特人發(fā)展成智人呢？是好奇——強(qiáng)烈的窺探欲和交流欲，讓尼安德特人慢慢發(fā)明了語(yǔ)言，最后成為智人。好奇心，是人類本能。
比如「 知乎 」，首頁(yè)信息流都是用問(wèn)問(wèn)題的方式勾起用戶對(duì)不同內(nèi)容的好奇心，是點(diǎn)進(jìn)去查看的動(dòng)力。社交軟件Soul則通過(guò)好奇心驅(qū)使用戶進(jìn)行多維度的靈魂測(cè)試，看看自己是個(gè)什么樣的靈魂以及需要什么樣的契合。
淘寶的收藏，京東的“即將售罄”等都告訴你有限的貨物已經(jīng)是低庫(kù)存狀態(tài)，已經(jīng)快要賣(mài)完了，你若再不快點(diǎn)購(gòu)買(mǎi)就很有可能會(huì)失去擁有它的機(jī)會(huì)，來(lái)增加緊迫感
從福格行為設(shè)計(jì)模型里面可以看出，用戶對(duì)做一件事情的能力越強(qiáng)，干擾和糾結(jié)越少，能力門(mén)檻越低，這個(gè)行為就越容易觸發(fā)成功。
比如很多軟件在截圖之后會(huì)直接彈出分享或下載選項(xiàng)，讓我在當(dāng)前頁(yè)面便可以進(jìn)行操作。 在登錄注冊(cè)時(shí)很多軟件可以直接記錄手機(jī)號(hào)，讓用戶可以不用輸入信息一鍵登錄，減少操作步驟，促進(jìn)登陸行為的發(fā)生。
有研究證明一個(gè)成年人的閱讀速度大約是每個(gè)字250毫秒，多行的文字會(huì)給人造成壓力，專業(yè)性文字會(huì)讓人覺(jué)得難以理解。
一個(gè)小程序中的一個(gè)刪除確認(rèn)彈窗，之前的有個(gè)版本放了大段文字想要解釋如何把刪除的任務(wù)從回收站復(fù)原，在做調(diào)研時(shí)發(fā)現(xiàn)到這個(gè)流程時(shí)用戶就會(huì)卡住，閱讀這長(zhǎng)段的文字，雙眉緊簇，不知如何是好。
美國(guó)認(rèn)知心理學(xué)先驅(qū)，G.A.米勒 做了一系列的實(shí)驗(yàn)，得到了得出了人類工作記憶的上限徘徊在7+-2項(xiàng)。稱為“米勒定律”。后來(lái)的科學(xué)家們重新評(píng)估回憶結(jié)果并修正實(shí)驗(yàn)方法后，目前的數(shù)據(jù)表明，真實(shí)的工作記憶是4到5項(xiàng)。
在「貝殼APP」中，對(duì)用戶提問(wèn)不能接受最老的房子，給出的選項(xiàng)并未對(duì)時(shí)間做過(guò)多的細(xì)分，可以讓用戶用最快的速度分辨信息做出選擇，不耽誤繼續(xù)瀏覽信息流。在租房提示面板中看房時(shí)間和入住時(shí)間也只給出4個(gè)選項(xiàng)，讓用戶快速閱讀快速選擇。
同樣是做用戶反饋，「 餓了么 」使用了簡(jiǎn)潔的文案和2個(gè)選項(xiàng)，「 美團(tuán)買(mǎi)菜 」擇用了兩行文案和一個(gè)很多選擇的選項(xiàng)，相比之下，美團(tuán)買(mǎi)菜的用戶調(diào)研讓我太有壓力了
有時(shí)會(huì)因?yàn)槟承┰虿坏貌唤o用戶提供多種選擇，過(guò)多選擇帶來(lái)的內(nèi)心糾結(jié)和思來(lái)想去往往只會(huì)拖延行動(dòng)，甚至還會(huì)讓行動(dòng)不了了之。因此
「 貝殼APP 」會(huì)幫助用戶做房源對(duì)比，在價(jià)格，戶型，面積，朝向，裝修等等方面進(jìn)行對(duì)比，幫助用戶進(jìn)行更好的決策。「 喜馬拉雅 」會(huì)在我聽(tīng)完一個(gè)節(jié)目后根據(jù)我近期所聽(tīng)內(nèi)容推薦我可能喜歡的內(nèi)容，而不用用戶再去費(fèi)心費(fèi)勁的搜索。
對(duì)于用戶想做，但能力又不足的事情，降低門(mén)檻可以有效的促進(jìn)用戶行為的發(fā)生。
比如「 微信讀書(shū) 」的無(wú)限卡兌換門(mén)檻很低，讀1分鐘，讀1小時(shí)，讀3小時(shí)就都可以兌換，除此之外還有很多很多的常駐活動(dòng)都能兌換無(wú)限卡，降低讀書(shū)行為的門(mén)檻，讓沒(méi)卡這件事，盡量不要成為讀書(shū)的阻力。
「 京東支付 」會(huì)有京東白條的選項(xiàng)，可以分期付款，降低消費(fèi)能力的門(mén)檻，促進(jìn)購(gòu)買(mǎi)行為的發(fā)生。
提示是提醒行動(dòng)的信號(hào)，仿佛在對(duì)你說(shuō)“現(xiàn)在就行動(dòng)”，它必須是個(gè)明顯的存在。大多數(shù)人都無(wú)法抗拒的想要點(diǎn)APP上的紅色數(shù)字標(biāo)簽，它們就是被刻意設(shè)計(jì)出來(lái)吸引注意力，促使我們行動(dòng)的。
比如「 閑魚(yú)APP 」首頁(yè)的標(biāo)簽欄中，把賣(mài)閑置這個(gè)按鈕做了顏色和形狀的特殊處理，讓它成為底部欄中最與眾不同的一個(gè)，吸引用戶觸發(fā)點(diǎn)擊。美團(tuán)優(yōu)選“新人禮包”彈窗用鮮明的高飽和度紅黃配色，讓用戶滿眼都是“它”
今天來(lái)改一個(gè)海報(bào)分享頁(yè)的設(shè)計(jì)，這是最初的設(shè)計(jì)：
修改后：
我們分成兩大塊說(shuō)說(shuō)本次改稿思路：
1. 海報(bào)設(shè)計(jì)
2. 海報(bào)分享頁(yè)的整體設(shè)計(jì)
第一部分 海報(bào)的設(shè)計(jì)
現(xiàn)在海報(bào)上的內(nèi)容排版看著挺隨便的，沒(méi)有啥設(shè)計(jì)感。
海報(bào)上要放的內(nèi)容不多：用戶頭像、名稱、日期、文字、品牌信息（logo）
一開(kāi)始我也沒(méi)有太多的修改靈感，但是在看了許多參考圖后，發(fā)現(xiàn)幾個(gè)共通點(diǎn)，這幾點(diǎn)完全能夠運(yùn)用在類似的設(shè)計(jì)上，讓海報(bào)更有設(shè)計(jì)感。
第一點(diǎn)：數(shù)字/日期的特殊處理
特征總結(jié)下來(lái)就是這三點(diǎn)：
1.對(duì)某個(gè)數(shù)字單獨(dú)用不同的字體
2.數(shù)字用更大的字號(hào)
3.與其他文字結(jié)合而出的特殊排版
用以上的思路，改一下我們的稿子：
這樣是不是好一點(diǎn)？
第二點(diǎn)：海報(bào)采用實(shí)景的照片，那文字最好用白色
觀察類似的參考，幾乎99.99%的實(shí)景圖上的文字都是采用白色。
不排除有的分享卡片用的淺色圖、黑色字。
觀察得知：
淺圖黑色字，重在強(qiáng)調(diào)文字內(nèi)容，對(duì)比更強(qiáng)烈,而深圖淺色字，文字更融入畫(huà)面，更溫和一些.
這里我們更想采用淺色的文字：不用那么強(qiáng)調(diào)文字，重在讓畫(huà)面更和諧。
第二部分 海報(bào)分享頁(yè)面的設(shè)計(jì)
第一點(diǎn)：遮罩用什么方式？
除了海報(bào)本身之外，整個(gè)分享頁(yè)面也是要設(shè)計(jì)。
大多以背景圖疊一層毛玻璃遮罩，看起來(lái)更有質(zhì)感。
這種設(shè)計(jì)相比于純黑色透明度的遮罩方式要更有層次感，不至于那么平，也讓頁(yè)面更聚焦在海報(bào)本身。
第二點(diǎn)：分享彈窗的幾種形式
a. 將分享方式一屏全擺出來(lái)
適用于用戶可分享的方式 不是那么多的情況，否則會(huì)占據(jù)畫(huà)面太多高度。
b. 側(cè)滑
用戶可分享的方式很多的話，可以采用側(cè)滑。缺點(diǎn)是需要用戶滑動(dòng)才能看到后面的功能。
在這里我們只有五個(gè)分享平臺(tái)，用不著再側(cè)滑，直接都擺出來(lái)就行。
第三點(diǎn)：取消按鈕的形式
a. 底部按鈕：更容易操作關(guān)閉
b. 海報(bào)上部的“陰暗角落”：更不容易點(diǎn)擊，相較也不那么容易被發(fā)現(xiàn)。
究其原因可能是，產(chǎn)品想讓用戶去分享，不想讓用戶很快就離開(kāi)這個(gè)頁(yè)面。
取消按鈕也用不著那么強(qiáng)調(diào)，修改后：
c. 分享彈窗的右上角：不如a更易點(diǎn)擊，但比b好點(diǎn)
最后一點(diǎn)：除非是分享長(zhǎng)圖，否則海報(bào)最好一屏就展示完。
這也是我之前忽略了的一點(diǎn)，導(dǎo)致做出來(lái)的海報(bào)展示不全。
總結(jié)
很多的 APP 都有海報(bào)分享功能，這次看了許許多多的類似設(shè)計(jì)，并且把通用的點(diǎn)，總結(jié)分享給大家，我總結(jié)的這些，希望能對(duì)你有幫助！～
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：花菜 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
今天來(lái)分享幾個(gè)設(shè)計(jì)案例，主要聊聊以下四個(gè)話題：
· 信息處理
· 裝飾元素的擺放
· 長(zhǎng)頁(yè)面設(shè)計(jì) 模塊間要有差異
· 空間利用率
首先看這個(gè)彈窗需求，產(chǎn)品經(jīng)理給我們提供的原型圖是這樣的：
先不要急著開(kāi)始畫(huà)，理解需求是最重要的一步。
這個(gè)彈窗最想要傳達(dá)給用戶什么信息？
「小窩準(zhǔn)備完成，寵物到家了」顯然是最重要的信息。排的時(shí)候就要使勁凸顯。
在經(jīng)過(guò)一些嘗試后，我們挑選出了以下兩版：
對(duì)于這個(gè)彈窗，版本 2 的層級(jí)會(huì)更舒服。
于是對(duì)版本 2 進(jìn)一步優(yōu)化。
1. 同樣的字號(hào)下，英文看著會(huì)比中文小。這上面用英文的「TA」不如直接寫(xiě)中文，看著也會(huì)更加整齊：
2. 字體也是有性格的，它能夠影響頁(yè)面的風(fēng)格。所以將字體換成圓體，讓頁(yè)面更活潑可愛(ài)。
3. 盡量使上下兩段文字長(zhǎng)短不一，看著會(huì)更有節(jié)奏感。
4. 標(biāo)點(diǎn)符號(hào)的細(xì)節(jié)很重要：有的字體標(biāo)點(diǎn)符號(hào)與文字看著不在一條線上，記得一定要對(duì)齊！
5. 標(biāo)題有點(diǎn)單調(diào)，我們?cè)僭黾釉O(shè)計(jì)樣式，讓頁(yè)面更精致！
這樣就完成了，但是還是差了點(diǎn)什么：
是整個(gè)頁(yè)面太安靜了，少了一些熱鬧慶祝的氛圍，那就加一些彩帶裝飾吧。
在添加時(shí)，需注意大小對(duì)比、前后層次、造型差異化，才能加的自然好看。
1. 大小對(duì)比，有的彩帶大些長(zhǎng)些，有些則小點(diǎn)短點(diǎn)。
2. 前后層次，有的在卡片前面，有的在卡片后方。
3. 造型差異化，除了彩帶再來(lái)點(diǎn)其他元素。
在一個(gè)長(zhǎng)長(zhǎng)長(zhǎng)頁(yè)面里，相同的排版會(huì)沒(méi)有新鮮感，容易產(chǎn)生視覺(jué)疲勞。
我們可以通過(guò)兩種方式，讓設(shè)計(jì)模塊有差異。
1.排版不一
2.視覺(jué)不一
比如這個(gè)例子，同樣都是聽(tīng)音樂(lè)，但是會(huì)用不同的排版穿插展示。
就算是同樣的排版，我們也可以在其中用不同的視覺(jué)。
比如以下這個(gè)案例：一開(kāi)始它從頭到尾都是運(yùn)用的一種視覺(jué)，排版也十分相似，頁(yè)面整體結(jié)構(gòu)也沒(méi)有主次。
在我們對(duì)不同模塊的卡片處理后，就好很多。
頁(yè)面的空間可以站在三維的角度去看，分為 x 軸、y軸、z 軸。
頁(yè)面的空間是十分寶貴的，當(dāng)頁(yè)面承載的內(nèi)容越來(lái)越多，我們不能只在 y 軸（高度）上一直增加頁(yè)面的高度。學(xué)會(huì)利用 x 軸（寬度）和 z 軸（深度）的空間能有效減短 y 軸（高度）。
4.1 利用 x 軸的空間
我們來(lái)看下面這個(gè)例子，他一開(kāi)始采用的豎排方式：
如果我們將它改成橫排、滑動(dòng)查看后，頁(yè)面就能夠展示更多的內(nèi)容，就越可能捕捉到用戶想看的信息。
這就是減少了 y 軸的空間，利用了 x 軸的空間。
4.2 利用 z 軸空間
z 軸空間就是利用深度、前后的空間，就像我們經(jīng)?？吹降摹疙?yè)面二樓」，下拉頁(yè)面后，在頁(yè)面的后面出現(xiàn)一些內(nèi)容：
這個(gè) banner 的滑動(dòng)也是利用了 z 軸空間：
以上就是我在空間利用率上面的收獲，大家心里留個(gè)印象，說(shuō)不定之后就能解決一些相關(guān)的問(wèn)題～
不知道今天分享的大家get到了嗎？總結(jié)一下～
1.信息處理：明確信息的層級(jí)關(guān)系，有助于信息處理。
2.裝飾元素：有大有小、有前有后、造型不同，會(huì)讓裝飾元素更自然
3.長(zhǎng)頁(yè)面設(shè)計(jì)：模塊與模塊間要排版或視覺(jué)不一
4.空間利用率：把頁(yè)面當(dāng)成三維空間，除了 y 軸，也要考慮到 x 軸和 z 軸的空間利用。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：花菜 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
這些天遇到了些問(wèn)題，在進(jìn)行視覺(jué)設(shè)計(jì)的時(shí)候，老是覺(jué)得自己設(shè)計(jì)上差點(diǎn)意思，總覺(jué)的哪里不太滿意。
也不是不好看，就是覺(jué)得還能夠設(shè)計(jì)得更加深入些，不管是從板式、字體、圖形、顏色等方面。
為了找到解決的辦法，我不斷的去欣賞別人的作品，從站酷到behance，從behance到各類獲獎(jiǎng)作品。
嗯...為什么別人能夠有這么新穎的設(shè)計(jì)想法？我總結(jié)來(lái)幾點(diǎn)大家。
這是世界三大平面設(shè)計(jì)之一岡特·蘭堡的作品。
這是不是會(huì)給你一些靈感？我第一眼感覺(jué)這有點(diǎn)熟悉，似乎在別人的作品中運(yùn)用過(guò)這種版式、元素。
在這版設(shè)計(jì)中，與岡特·蘭堡的作品相似之處就有：黃底黑字的橫條和藍(lán)色調(diào)的背景，再結(jié)合一些設(shè)計(jì)圖形，就能產(chǎn)生出一種新穎的設(shè)計(jì)風(fēng)格。
就是在大師的視覺(jué)中提取元素靈感進(jìn)行轉(zhuǎn)化，運(yùn)用在我們的設(shè)計(jì)中會(huì)有不一樣的視覺(jué)體驗(yàn)。
我們接著看他的其他作品。
這張作品就能給我很不錯(cuò)的靈感，把想要突出的地方用強(qiáng)烈的對(duì)比手法進(jìn)行設(shè)計(jì)?；蛘邔⑾胍怀龅脑剡M(jìn)行特殊化處理。
類似于這樣的作品。
當(dāng)靈感有限的時(shí)候，我們就可以靜下心來(lái)分析一下其他大師的作品，認(rèn)真觀察大師的作品，有哪些地方是可以提取靈感出來(lái)。
再結(jié)合自己的設(shè)計(jì)讓其提高升華，讓自己的作品耳目一新，使作品獲得新生。
保持這種發(fā)掘思維去分析作品，久而久之你就會(huì)有源源不斷的靈感浮現(xiàn)腦海里。
你走你的陽(yáng)關(guān)道，我過(guò)我的獨(dú)木橋，反其道而行，雖然在國(guó)內(nèi)市場(chǎng)不太友好，但是嘗試一下走獨(dú)木橋的感覺(jué)，是否會(huì)帶給你不一樣的反饋。
特立獨(dú)行的視覺(jué)，做出差異化會(huì)給人們一種新穎的視覺(jué)觀感，就會(huì)吸引用戶，就比如喬布斯手下的蘋(píng)果產(chǎn)品，打破了當(dāng)時(shí)對(duì)電子產(chǎn)品的認(rèn)知，且對(duì)細(xì)節(jié)的把控極致到位。
人們其實(shí)都有視覺(jué)疲勞，長(zhǎng)時(shí)間的保持這種風(fēng)格，難免會(huì)讓人覺(jué)得平庸，突然出現(xiàn)的新穎視覺(jué)或想法，就能夠打破這種局面。
好比這個(gè)官網(wǎng)，首頁(yè)第一屏在我們印象中就是一個(gè)banner，在我們做網(wǎng)站的時(shí)候就認(rèn)為第一屏就是應(yīng)該放個(gè)banner在那里！
我們就好像思維固化了，第一屏就非得是個(gè)banner嗎？我們可以根據(jù)企業(yè)的屬性進(jìn)行判斷，我們是否還有更優(yōu)的方案，盡可能的賦予設(shè)計(jì)靈魂。
類似于這樣的首頁(yè)是否就是反其道而行呢？與同行就拉開(kāi)差別了呢？自己品牌更加深入人心呢？
比如一個(gè)正常的首頁(yè)，在開(kāi)始設(shè)計(jì)時(shí)，最頂部的是導(dǎo)航欄，導(dǎo)航欄中最左邊是一個(gè)logo，其次在右邊是產(chǎn)品介紹等等...
我們有沒(méi)有想過(guò)為什么會(huì)這么布局？我們可以反問(wèn)自己：這種布局是最合適的嗎？最好看的嗎？還有沒(méi)有更加合適的方式？
這種方式把logo放中間突出品牌就挺不錯(cuò)的。還有一些把導(dǎo)航欄折疊起來(lái)的。
剛開(kāi)始我們是這樣布局的，這就很普通沒(méi)有做出差異化。
我們是不是可以把文案進(jìn)行精細(xì)處理，提取重要的詞句，把他們放大，要有視覺(jué)沖擊力，重要的元素再次放大！
這樣布局方式就新穎很多，突出了主要文案，加強(qiáng)了視覺(jué)沖擊，又加深了品牌印象。
沒(méi)有新穎的想法往往是自己的思路、思維還沒(méi)有打開(kāi)，開(kāi)始進(jìn)行視覺(jué)設(shè)計(jì)的時(shí)候：選擇這類行業(yè)自己認(rèn)為還不錯(cuò)的視覺(jué)方向，開(kāi)始進(jìn)行視覺(jué)輸出。
那就錯(cuò)了，假如開(kāi)始設(shè)計(jì)APP，只找一些APP的視覺(jué)稿那肯定是不夠的，風(fēng)格就比較單一，你的視覺(jué)參考都不夠豐富，怎么能夠做出讓人眼前一亮的風(fēng)格！
我們不妨跳出圈子出來(lái)觀察！
可以去看別人品牌設(shè)計(jì)的、數(shù)字藝術(shù)設(shè)計(jì)的、圖形設(shè)計(jì)的、包裝設(shè)計(jì)的、服裝設(shè)計(jì)的甚至產(chǎn)品設(shè)計(jì)的都可以。有可能是某一個(gè)小地方讓你有所啟發(fā)。
大量的看，覺(jué)得很好的視覺(jué)就思考：我們的視覺(jué)是這樣的會(huì)不會(huì)更好！
就比如這張視覺(jué)稿，色彩很艷麗，顏色跨度很大，有黑色的粗線，如果把這風(fēng)格運(yùn)用在APP視覺(jué)上會(huì)是怎樣的效果？
看到一張足夠吸引你的視覺(jué)稿，就想想如何轉(zhuǎn)化到工作中去，那可能就會(huì)有不一樣的視覺(jué)風(fēng)格。
所以在設(shè)定風(fēng)格時(shí)，
不局限于同行。
不局限于風(fēng)格。
打開(kāi)搜索范圍，讓頭腦風(fēng)暴更猛一些。
做設(shè)計(jì)不是完成任務(wù)，所思考的是多方面的，好的設(shè)計(jì)是得花很多心思的；得保持冷靜，讓自己放松，著急或者有壓力的心境下你的思緒是亂的，根本就做不了設(shè)計(jì)。
所以有時(shí)候做設(shè)計(jì)得臉皮厚一些。
再者平時(shí)的審美積累是非常重要的，這個(gè)就相當(dāng)于你的底子，有底子往上爬的速度也會(huì)快一些。
做到這些你就離大師不遠(yuǎn)了！
最后，設(shè)計(jì)是永無(wú)止境的探索！加油共勉。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：橙汁 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
我們?cè)谠O(shè)定界面風(fēng)格的時(shí)候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個(gè)最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會(huì)導(dǎo)致非常的刺眼，比如像瑞文同學(xué)的這個(gè)顏色設(shè)定：
就是過(guò)于明亮了，其實(shí)當(dāng)我們的顏色過(guò)于明亮?xí)r，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標(biāo)的做法一樣，減少亮部顏色，直接增加黑色：
這樣就不會(huì)那么刺眼了，當(dāng)我們明白了底層原理之后，再去優(yōu)化配色，我們看前后的變化：
這樣就會(huì)比之前舒服很多，當(dāng)然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續(xù)加大，但不管哪一種，都會(huì)比之前全是亮色要好很多！
小A同學(xué)是一個(gè)非常有潛力的同學(xué)，但是最開(kāi)始交上來(lái)的吉祥物作業(yè)，也不是很理想，效果如下：
話不多說(shuō)，我們就改動(dòng)一個(gè)點(diǎn)，五官緊湊，看看前后效果對(duì)比：
可愛(ài)的程度完全不在一個(gè)檔次，我們?cè)倏纯葱同學(xué)后面的延展效果：
比之前強(qiáng)了很多很多倍，就是因?yàn)橐粋€(gè)五官緊湊。
我們?cè)谧鼍毩?xí)的時(shí)候，很重要的一個(gè)鍛煉點(diǎn)就是視覺(jué)敏銳度，能夠敏銳的發(fā)現(xiàn)哪里不舒服，這個(gè)真的很重要。
而視覺(jué)敏銳度里面就有一個(gè)維度是顏色，比如我們?cè)诳聪旅嬉欢堤峭瑢W(xué)做的質(zhì)感圖標(biāo)作業(yè)：
我們應(yīng)該快速的看出，第一個(gè)圖標(biāo)顏色不是很和諧，沒(méi)有后面兩個(gè)那么舒服，主要是那個(gè)藍(lán)色有點(diǎn)臟，我們看優(yōu)化后的三個(gè)圖標(biāo)：
就比之前要統(tǒng)一舒服很多。
當(dāng)我們的練習(xí)達(dá)到一定量時(shí)，敏銳度自然就會(huì)提高很多，所以一定要多去練習(xí)，把敏銳度這一塊提高上來(lái)。
這是潘子同學(xué)的疑惑點(diǎn)：
他感覺(jué)綠色好難啊，第一次交上來(lái)的作業(yè)如下：
先不說(shuō)造型問(wèn)題，就光說(shuō)顏色，就有點(diǎn)單薄，也有點(diǎn)太亮了，還有就是顏色比較正。
其實(shí)我們?cè)谂渚G色的時(shí)候，只要把綠色加一點(diǎn)藍(lán)色，或者加一點(diǎn)黃色就會(huì)讓顏色好看很多。
后來(lái)潘子同學(xué)把顏色進(jìn)行了優(yōu)化：
這樣就比之前還要多了。
還有包括檸檬同學(xué)用的綠色:
也是比較好看的。
這回再用綠色的時(shí)候，大家清楚怎么好看了吧！
大家平時(shí)多的界面應(yīng)該都是常規(guī)類型的居多，應(yīng)該很少會(huì)接觸到游戲類型的界面設(shè)計(jì)吧？哈哈。今天就給大家分享一個(gè)游戲類型的排行榜界面，看看是怎么做。和咱平時(shí)的又有什么不同呢？
先來(lái)看看效果：
確實(shí)和普通頁(yè)面還是有很大差異的哈，可以發(fā)現(xiàn)所有的模塊更風(fēng)格化，也蘊(yùn)含了光影細(xì)節(jié)在里面。
這樣一張界面細(xì)節(jié)很多，我們今天主要講講1、2、3名的頭像框怎么做出等級(jí)差異。
首先我們就要先明確游戲風(fēng)格的界面和普通界面有什么不同，特點(diǎn)有哪些，造型、光影、質(zhì)感等等。
明確了才能動(dòng)手去執(zhí)行。
大家平時(shí)應(yīng)該也會(huì)遇到很多排行類的需求，需要做出等級(jí)感。那是如果如何表現(xiàn)等級(jí)差異的呢？我主要是從以下三個(gè)點(diǎn)去推進(jìn)，分享給大家：
2.1顏色
·主色：
首先就是三個(gè)等級(jí)的顏色差異
比如第一名最尊貴，我們就可以選用和背景色對(duì)比最強(qiáng)烈的金色去表現(xiàn)。
金色本身也帶有尊貴感。
第二名和第三名的顏色就可以選用背景的類似色或者同類色比如紫色和藍(lán)色，讓它們?cè)谝曈X(jué)上天然的弱化下去一個(gè)等級(jí)。
·微漸變：
采用微漸變的形式，讓顏色更豐富，不會(huì)顯得很平，同時(shí)靠顏色的變化也能表現(xiàn)出輕微的質(zhì)感。
2.2復(fù)雜度
第二點(diǎn)就是復(fù)雜度了。
這個(gè)很好理解，就是越重要的，在造型上就會(huì)有越多的細(xì)節(jié)和層次。第一名層次細(xì)節(jié)非常豐富，第三名就簡(jiǎn)簡(jiǎn)單單的，從造型上表現(xiàn)出等級(jí)差異感。
2.3大小
比較常規(guī)的一個(gè)方法就是大小差異了，第一名最大，二三名一樣大就可以了。
明白了原理，怎么把細(xì)節(jié)做到位也是很重要的，我們拿第一名框的造型舉例，說(shuō)說(shuō)是怎么做出復(fù)雜度這么高的造型的。
3.1 重復(fù)
先有一個(gè)基礎(chǔ)圓，然后我們重復(fù)幾個(gè)。這一步很簡(jiǎn)單，很多同學(xué)都會(huì)做。但也有很多同學(xué)到這就做不下去了。重點(diǎn)要學(xué)會(huì)后面怎么做。
3.2 圓的對(duì)比
全是相同的圓就會(huì)顯得很重復(fù)，沒(méi)有細(xì)節(jié)。我們可以調(diào)整圓線段的不同粗細(xì)、形式去增加細(xì)節(jié)。
把他們組合到一起看看。
有點(diǎn)那味了，有些同學(xué)做到這一步就不知道該怎么繼續(xù)了，可能會(huì)繼續(xù)加圓，這肯定是不行的。
3.3 豐富基礎(chǔ)形
如果我們繼續(xù)加圓圈可能又會(huì)變得重復(fù)了，這是因?yàn)槲覀兊幕A(chǔ)形單一，所以我們要加入別的基礎(chǔ)性在畫(huà)面里去。
為了方便理解，我們加入一個(gè)比較直觀的形狀正方形看看：
正方形組合又組成很多三角形，造型一下就豐富了很多！所以基礎(chǔ)形狀的多樣性是我們豐富造型很重要的一個(gè)點(diǎn)哦。
本案例就加入了其它相對(duì)更復(fù)雜一些的基礎(chǔ)形，效果會(huì)更細(xì)膩一些，但道理是相同的。
4. 加入點(diǎn)綴和光影
因?yàn)槭怯螒蝻L(fēng)格的，加上一點(diǎn)外發(fā)光更有感覺(jué)，再加上一些星星點(diǎn)綴，可以進(jìn)一步提升豐富度。
看下頁(yè)面效果：
等級(jí)差異明顯，造型精致，整體還是比較滿意的。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
