根據互聯網消費調研中心，了解到戴森的消費者大致有三個特征：高品質消費、重視生活之美、新生活開啟者。重視生活之美的消費者更注重設計美觀、獨特、有辨識度的產品。
戴森品牌定位：高端、黑科技、高顏值。
下面我們通過案例去了解戴森是如何通過設計滿足品牌方和消費人群的。
戴森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 」首頁的標簽欄中，把賣閑置這個按鈕做了顏色和形狀的特殊處理，讓它成為底部欄中最與眾不同的一個，吸引用戶觸發點擊。美團優選“新人禮包”彈窗用鮮明的高飽和度紅黃配色，讓用戶滿眼都是“它”
今天來改一個海報分享頁的設計，這是最初的設計：
修改后：
我們分成兩大塊說說本次改稿思路：
1. 海報設計
2. 海報分享頁的整體設計
第一部分 海報的設計
現在海報上的內容排版看著挺隨便的，沒有啥設計感。
海報上要放的內容不多：用戶頭像、名稱、日期、文字、品牌信息（logo）
一開始我也沒有太多的修改靈感，但是在看了許多參考圖后，發現幾個共通點，這幾點完全能夠運用在類似的設計上，讓海報更有設計感。
第一點：數字/日期的特殊處理
特征總結下來就是這三點：
1.對某個數字單獨用不同的字體
2.數字用更大的字號
3.與其他文字結合而出的特殊排版
用以上的思路，改一下我們的稿子：
這樣是不是好一點？
第二點：海報采用實景的照片，那文字最好用白色
觀察類似的參考，幾乎99.99%的實景圖上的文字都是采用白色。
不排除有的分享卡片用的淺色圖、黑色字。
觀察得知：
淺圖黑色字，重在強調文字內容，對比更強烈,而深圖淺色字，文字更融入畫面，更溫和一些.
這里我們更想采用淺色的文字：不用那么強調文字，重在讓畫面更和諧。
第二部分 海報分享頁面的設計
第一點：遮罩用什么方式？
除了海報本身之外，整個分享頁面也是要設計。
大多以背景圖疊一層毛玻璃遮罩，看起來更有質感。
這種設計相比于純黑色透明度的遮罩方式要更有層次感，不至于那么平，也讓頁面更聚焦在海報本身。
第二點：分享彈窗的幾種形式
a. 將分享方式一屏全擺出來
適用于用戶可分享的方式 不是那么多的情況，否則會占據畫面太多高度。
b. 側滑
用戶可分享的方式很多的話，可以采用側滑。缺點是需要用戶滑動才能看到后面的功能。
在這里我們只有五個分享平臺，用不著再側滑，直接都擺出來就行。
第三點：取消按鈕的形式
a. 底部按鈕：更容易操作關閉
b. 海報上部的“陰暗角落”：更不容易點擊，相較也不那么容易被發現。
究其原因可能是，產品想讓用戶去分享，不想讓用戶很快就離開這個頁面。
取消按鈕也用不著那么強調，修改后：
c. 分享彈窗的右上角：不如a更易點擊，但比b好點
最后一點：除非是分享長圖，否則海報最好一屏就展示完。
這也是我之前忽略了的一點，導致做出來的海報展示不全。
總結
很多的 APP 都有海報分享功能，這次看了許許多多的類似設計，并且把通用的點，總結分享給大家，我總結的這些，希望能對你有幫助！～
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：花菜 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
今天來分享幾個設計案例，主要聊聊以下四個話題：
· 信息處理
· 裝飾元素的擺放
· 長頁面設計 模塊間要有差異
· 空間利用率
首先看這個彈窗需求，產品經理給我們提供的原型圖是這樣的：
先不要急著開始畫，理解需求是最重要的一步。
這個彈窗最想要傳達給用戶什么信息？
「小窩準備完成，寵物到家了」顯然是最重要的信息。排的時候就要使勁凸顯。
在經過一些嘗試后，我們挑選出了以下兩版：
對于這個彈窗，版本 2 的層級會更舒服。
于是對版本 2 進一步優化。
1. 同樣的字號下，英文看著會比中文小。這上面用英文的「TA」不如直接寫中文，看著也會更加整齊：
2. 字體也是有性格的，它能夠影響頁面的風格。所以將字體換成圓體，讓頁面更活潑可愛。
3. 盡量使上下兩段文字長短不一，看著會更有節奏感。
4. 標點符號的細節很重要：有的字體標點符號與文字看著不在一條線上，記得一定要對齊！
5. 標題有點單調，我們再增加設計樣式，讓頁面更精致！
這樣就完成了，但是還是差了點什么：
是整個頁面太安靜了，少了一些熱鬧慶祝的氛圍，那就加一些彩帶裝飾吧。
在添加時，需注意大小對比、前后層次、造型差異化，才能加的自然好看。
1. 大小對比，有的彩帶大些長些，有些則小點短點。
2. 前后層次，有的在卡片前面，有的在卡片后方。
3. 造型差異化，除了彩帶再來點其他元素。
在一個長長長頁面里，相同的排版會沒有新鮮感，容易產生視覺疲勞。
我們可以通過兩種方式，讓設計模塊有差異。
1.排版不一
2.視覺不一
比如這個例子，同樣都是聽音樂，但是會用不同的排版穿插展示。
就算是同樣的排版，我們也可以在其中用不同的視覺。
比如以下這個案例：一開始它從頭到尾都是運用的一種視覺，排版也十分相似，頁面整體結構也沒有主次。
在我們對不同模塊的卡片處理后，就好很多。
頁面的空間可以站在三維的角度去看，分為 x 軸、y軸、z 軸。
頁面的空間是十分寶貴的，當頁面承載的內容越來越多，我們不能只在 y 軸（高度）上一直增加頁面的高度。學會利用 x 軸（寬度）和 z 軸（深度）的空間能有效減短 y 軸（高度）。
4.1 利用 x 軸的空間
我們來看下面這個例子，他一開始采用的豎排方式：
如果我們將它改成橫排、滑動查看后，頁面就能夠展示更多的內容，就越可能捕捉到用戶想看的信息。
這就是減少了 y 軸的空間，利用了 x 軸的空間。
4.2 利用 z 軸空間
z 軸空間就是利用深度、前后的空間，就像我們經常看到的「頁面二樓」，下拉頁面后，在頁面的后面出現一些內容：
這個 banner 的滑動也是利用了 z 軸空間：
以上就是我在空間利用率上面的收獲，大家心里留個印象，說不定之后就能解決一些相關的問題～
不知道今天分享的大家get到了嗎？總結一下～
1.信息處理：明確信息的層級關系，有助于信息處理。
2.裝飾元素：有大有小、有前有后、造型不同，會讓裝飾元素更自然
3.長頁面設計：模塊與模塊間要排版或視覺不一
4.空間利用率：把頁面當成三維空間，除了 y 軸，也要考慮到 x 軸和 z 軸的空間利用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：花菜 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這些天遇到了些問題，在進行視覺設計的時候，老是覺得自己設計上差點意思，總覺的哪里不太滿意。
也不是不好看，就是覺得還能夠設計得更加深入些，不管是從板式、字體、圖形、顏色等方面。
為了找到解決的辦法，我不斷的去欣賞別人的作品，從站酷到behance，從behance到各類獲獎作品。
嗯...為什么別人能夠有這么新穎的設計想法？我總結來幾點大家。
這是世界三大平面設計之一岡特·蘭堡的作品。
這是不是會給你一些靈感？我第一眼感覺這有點熟悉，似乎在別人的作品中運用過這種版式、元素。
在這版設計中，與岡特·蘭堡的作品相似之處就有：黃底黑字的橫條和藍色調的背景，再結合一些設計圖形，就能產生出一種新穎的設計風格。
就是在大師的視覺中提取元素靈感進行轉化，運用在我們的設計中會有不一樣的視覺體驗。
我們接著看他的其他作品。
這張作品就能給我很不錯的靈感，把想要突出的地方用強烈的對比手法進行設計?；蛘邔⑾胍怀龅脑剡M行特殊化處理。
類似于這樣的作品。
當靈感有限的時候，我們就可以靜下心來分析一下其他大師的作品，認真觀察大師的作品，有哪些地方是可以提取靈感出來。
再結合自己的設計讓其提高升華，讓自己的作品耳目一新，使作品獲得新生。
保持這種發掘思維去分析作品，久而久之你就會有源源不斷的靈感浮現腦海里。
你走你的陽關道，我過我的獨木橋，反其道而行，雖然在國內市場不太友好，但是嘗試一下走獨木橋的感覺，是否會帶給你不一樣的反饋。
特立獨行的視覺，做出差異化會給人們一種新穎的視覺觀感，就會吸引用戶，就比如喬布斯手下的蘋果產品，打破了當時對電子產品的認知，且對細節的把控極致到位。
人們其實都有視覺疲勞，長時間的保持這種風格，難免會讓人覺得平庸，突然出現的新穎視覺或想法，就能夠打破這種局面。
好比這個官網，首頁第一屏在我們印象中就是一個banner，在我們做網站的時候就認為第一屏就是應該放個banner在那里！
我們就好像思維固化了，第一屏就非得是個banner嗎？我們可以根據企業的屬性進行判斷，我們是否還有更優的方案，盡可能的賦予設計靈魂。
類似于這樣的首頁是否就是反其道而行呢？與同行就拉開差別了呢？自己品牌更加深入人心呢？
比如一個正常的首頁，在開始設計時，最頂部的是導航欄，導航欄中最左邊是一個logo，其次在右邊是產品介紹等等...
我們有沒有想過為什么會這么布局？我們可以反問自己：這種布局是最合適的嗎？最好看的嗎？還有沒有更加合適的方式？
這種方式把logo放中間突出品牌就挺不錯的。還有一些把導航欄折疊起來的。
剛開始我們是這樣布局的，這就很普通沒有做出差異化。
我們是不是可以把文案進行精細處理，提取重要的詞句，把他們放大，要有視覺沖擊力，重要的元素再次放大！
這樣布局方式就新穎很多，突出了主要文案，加強了視覺沖擊，又加深了品牌印象。
沒有新穎的想法往往是自己的思路、思維還沒有打開，開始進行視覺設計的時候：選擇這類行業自己認為還不錯的視覺方向，開始進行視覺輸出。
那就錯了，假如開始設計APP，只找一些APP的視覺稿那肯定是不夠的，風格就比較單一，你的視覺參考都不夠豐富，怎么能夠做出讓人眼前一亮的風格！
我們不妨跳出圈子出來觀察！
可以去看別人品牌設計的、數字藝術設計的、圖形設計的、包裝設計的、服裝設計的甚至產品設計的都可以。有可能是某一個小地方讓你有所啟發。
大量的看，覺得很好的視覺就思考：我們的視覺是這樣的會不會更好！
就比如這張視覺稿，色彩很艷麗，顏色跨度很大，有黑色的粗線，如果把這風格運用在APP視覺上會是怎樣的效果？
看到一張足夠吸引你的視覺稿，就想想如何轉化到工作中去，那可能就會有不一樣的視覺風格。
所以在設定風格時，
不局限于同行。
不局限于風格。
打開搜索范圍，讓頭腦風暴更猛一些。
做設計不是完成任務，所思考的是多方面的，好的設計是得花很多心思的；得保持冷靜，讓自己放松，著急或者有壓力的心境下你的思緒是亂的，根本就做不了設計。
所以有時候做設計得臉皮厚一些。
再者平時的審美積累是非常重要的，這個就相當于你的底子，有底子往上爬的速度也會快一些。
做到這些你就離大師不遠了！
最后，設計是永無止境的探索！加油共勉。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：橙汁 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我們在設定界面風格的時候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會導致非常的刺眼，比如像瑞文同學的這個顏色設定：
就是過于明亮了，其實當我們的顏色過于明亮時，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標的做法一樣，減少亮部顏色，直接增加黑色：
這樣就不會那么刺眼了，當我們明白了底層原理之后，再去優化配色，我們看前后的變化：
這樣就會比之前舒服很多，當然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續加大，但不管哪一種，都會比之前全是亮色要好很多！
小A同學是一個非常有潛力的同學，但是最開始交上來的吉祥物作業，也不是很理想，效果如下：
話不多說，我們就改動一個點，五官緊湊，看看前后效果對比：
可愛的程度完全不在一個檔次，我們再看看小A同學后面的延展效果：
比之前強了很多很多倍，就是因為一個五官緊湊。
我們在做練習的時候，很重要的一個鍛煉點就是視覺敏銳度，能夠敏銳的發現哪里不舒服，這個真的很重要。
而視覺敏銳度里面就有一個維度是顏色，比如我們在看下面一兜糖同學做的質感圖標作業：
我們應該快速的看出，第一個圖標顏色不是很和諧，沒有后面兩個那么舒服，主要是那個藍色有點臟，我們看優化后的三個圖標：
就比之前要統一舒服很多。
當我們的練習達到一定量時，敏銳度自然就會提高很多，所以一定要多去練習，把敏銳度這一塊提高上來。
這是潘子同學的疑惑點：
他感覺綠色好難啊，第一次交上來的作業如下：
先不說造型問題，就光說顏色，就有點單薄，也有點太亮了，還有就是顏色比較正。
其實我們在配綠色的時候，只要把綠色加一點藍色，或者加一點黃色就會讓顏色好看很多。
后來潘子同學把顏色進行了優化：
這樣就比之前還要多了。
還有包括檸檬同學用的綠色:
也是比較好看的。
這回再用綠色的時候，大家清楚怎么好看了吧！
大家平時多的界面應該都是常規類型的居多，應該很少會接觸到游戲類型的界面設計吧？哈哈。今天就給大家分享一個游戲類型的排行榜界面，看看是怎么做。和咱平時的又有什么不同呢？
先來看看效果：
確實和普通頁面還是有很大差異的哈，可以發現所有的模塊更風格化，也蘊含了光影細節在里面。
這樣一張界面細節很多，我們今天主要講講1、2、3名的頭像框怎么做出等級差異。
首先我們就要先明確游戲風格的界面和普通界面有什么不同，特點有哪些，造型、光影、質感等等。
明確了才能動手去執行。
大家平時應該也會遇到很多排行類的需求，需要做出等級感。那是如果如何表現等級差異的呢？我主要是從以下三個點去推進，分享給大家：
2.1顏色
·主色：
首先就是三個等級的顏色差異
比如第一名最尊貴，我們就可以選用和背景色對比最強烈的金色去表現。
金色本身也帶有尊貴感。
第二名和第三名的顏色就可以選用背景的類似色或者同類色比如紫色和藍色，讓它們在視覺上天然的弱化下去一個等級。
·微漸變：
采用微漸變的形式，讓顏色更豐富，不會顯得很平，同時靠顏色的變化也能表現出輕微的質感。
2.2復雜度
第二點就是復雜度了。
這個很好理解，就是越重要的，在造型上就會有越多的細節和層次。第一名層次細節非常豐富，第三名就簡簡單單的，從造型上表現出等級差異感。
2.3大小
比較常規的一個方法就是大小差異了，第一名最大，二三名一樣大就可以了。
明白了原理，怎么把細節做到位也是很重要的，我們拿第一名框的造型舉例，說說是怎么做出復雜度這么高的造型的。
3.1 重復
先有一個基礎圓，然后我們重復幾個。這一步很簡單，很多同學都會做。但也有很多同學到這就做不下去了。重點要學會后面怎么做。
3.2 圓的對比
全是相同的圓就會顯得很重復，沒有細節。我們可以調整圓線段的不同粗細、形式去增加細節。
把他們組合到一起看看。
有點那味了，有些同學做到這一步就不知道該怎么繼續了，可能會繼續加圓，這肯定是不行的。
3.3 豐富基礎形
如果我們繼續加圓圈可能又會變得重復了，這是因為我們的基礎形單一，所以我們要加入別的基礎性在畫面里去。
為了方便理解，我們加入一個比較直觀的形狀正方形看看：
正方形組合又組成很多三角形，造型一下就豐富了很多！所以基礎形狀的多樣性是我們豐富造型很重要的一個點哦。
本案例就加入了其它相對更復雜一些的基礎形，效果會更細膩一些，但道理是相同的。
4. 加入點綴和光影
因為是游戲風格的，加上一點外發光更有感覺，再加上一些星星點綴，可以進一步提升豐富度。
看下頁面效果：
等級差異明顯，造型精致，整體還是比較滿意的。
藍藍設計的小編 http://www.syprn.cn
