的App類別是游戲，而健康&健身幾乎沒有進入前10。2020年雖是艱難的一年，但它提供了很多機會，可以為移動應用市場引入一種新的經濟回報和有意義的醫療解決方案，直接影響人們的健康行為、并幫助他們生活得更輕松、更愉悅。
為此，你需要一個功能強大的App，因為如果不能運行的話他就是無用的產品。但是這種強大的功能還需要通過設計來將它呈現出來。一個優秀的醫療App設計將醫藥類App最重要的細節呈現出來，并引導用戶使用，以及建議用戶接下來如何操作，最終完成必要操作。
一個App能憑借自身成為一個的客戶開發工具和公司的核心產品。對于與健康或醫學相關的產品，UI/UX設計更為重要。
呼吸監測應用程序-作者: George Frigo
在這篇對設計師和公司都有幫助的文章中，我們將探討一些醫療App設計中的最佳實踐是如何發揮作用的。
醫療類應用類型
值得注意的是，“醫療保健App”是一個多方面的概念，包含了大量與健康和醫學相關的數字產品。
這里有很多類型的醫療類App，包括：
醫療專業人員遠程病人會診的App（遠程醫療）
電子病歷App(EMR)
記錄和管理患者生命體征的App
提醒患者服藥、鍛煉等的App
醫療計算App
提供醫療信息參考的App
健身和運動類App
健康的生活方式和健康App（每日飲水量、睡眠管理等）
這似乎是一個過于寬泛的主題（例如，將卡路里計數器app與醫學教育解決方案相比較），但是也有一些通用設計經驗可以使得醫療健康類App更、讓人們有辦法得到他們想要的。
醫療應用程序作者: Victor Nikitin
如何為醫療健康打造移動應用
即使一個App不是企業的主要產品，它也有可能產生巨大的價值。例如，如果它是一個醫療辦公室的配套應用程序，它可以減輕員工的負擔，為客戶提供信息和服務。如果一個健康App是企業的主要產品，比如健身或冥想應用程序，那就比較危險了。有時候，健康App的缺陷是人們放棄使用這些App的原因。
為了避免這種情況，我們來看看醫療App設計中的一些最佳實踐技巧，以及它們如何幫助App聚焦、直觀和快速。
醫療保健: Anatoly
調研—成功的第一步
在設計原型應用程序界面之前，你需要知道誰是你的目標用戶，以及他們的地理環境、社會經濟背景和心理特征，畢竟沒有產品可以迎合每個人。用戶的興趣和能力決定了他們如何與軟件互動。所以解答以下問題將有所幫助：
誰是你的目標人群？
他們喜歡什么？
怎么樣的app他們每天都會使用？
使用目的？
通常，醫療健康軟件要么被患者使用，要么被醫生使用（如果我們將生活服務類軟件的用戶也計作患者的話）。這兩種用戶的需求在功能和UI設計上都有不同。因此，醫務人員通常需要快速獲得某些數據項：EHR/EMR（電子健康檔案/電子病歷），藥品規格標準，診斷和治療建議，參考資料等。然而患者需要的是盡可能精簡的、易于理解的信息項。因為這一群體中有相當一部分老年人或者有某種特殊障礙。
只有進行了恰當的用戶調研，得出了相應的結論，設計師才能繼續醫療健康軟件的真實有效的設計。
Chahua的健康管理軟件
細化明晰每個案例
醫學對普通人來講是復雜的學科，最好的方法反而是將醫療健康設計得相對簡單，以安撫用戶并讓他們保持專注。
“世人總將事物搞復雜，殊不知，簡單才是至理。” ——Richard Branson
想要給人留下深刻印象，將醫療UI設計得過于詳細是沒有意義的，最好的是界面和邏輯易于理解，即使軟件是專為醫務人員設計的（當然，不要居高臨下）。
醫療App/檔案和活躍度-作者: Igor savalev
設計醫療健康軟件的UI，提供有益的新用戶引導流程，使界面可直觀理解。否則，用戶會對糟糕的體驗失望，甚至等不到進入核心功能就會退出。
所有相關方，不管是醫生還是患者，都會喜歡清晰極簡的軟件，這樣，你就不需要讓用戶學習如何操作軟件，這對醫療機構來講是個解決辦法，他們已經習慣了這些事。
幫助用戶穩定發現功能，循序漸進地給予指導。以用戶引導流程開始，將app中每個動作劃分成可處理塊，一次提供一個操作說明。
使用恰當的顏色（更進一步）
利用被動輸入和自動補齊功能限制用戶必須輸入的信息的數量，調整鍵盤，動態驗證字段值。這篇文章里還有更多表單設計相關。
所有醫療信息都得由擁有一定學歷和專業知識的專家提供，否則，這些內容要么不完整，要么包含錯誤，這在醫療健康中是不容允許的。
醫務人員使用的醫療軟件-作者: yurig
功能的重要性（及特色）
醫療保健應用程序的特性和功能類型取決于它的用途和目標用戶。例如，醫療中心的應用程序需要一個賬戶，病人可以在那里查看他們的就診、推薦和預約記錄。如果沒有安全加密的視頻會議和通信功能，遠程醫療應用程序就毫無用處。
與其他一般APP不一樣的地方，“首頁”是醫療類的app的主要功能的位置。先來回答一個問題: 為什么有人使用您的應用程序(或類似的醫療類App) ，如果一個人訪問一個應用程序來記錄或接收一些信息，聯系醫生，檢查他們的進展等，這個功能都放在“首頁”上？
呼應前面的觀點，就是避免過多功能同時出現時的混亂。不可否認，這種情況在傳統的醫療類App中更為常見，這些應用程序有時候會分散注意力，不斷添加新的和新的功能，直到只有資深的用戶才能理解并熟練使用。
根據二八定律的法則告訴過你，80%的用戶傾向于使用不超過20%的功能。區分優先次序，決定哪些功能對用戶最重要。
醫藥應用App作者: Manoj Dalvadi
導航的研究和鑒賞
清晰的導航結構是醫療應用程序用戶界面設計的骨干必需組件。沒有它，這個App將會不再受歡迎。導航代表和易用，因此從用戶的角度來看是有價值的。一個醫療專業人士需要一個能輔助工具，因為他們已經有太多的時間花在處理EHR（電子健康記錄）上了，【類似國內的病歷本】。
經斯坦福醫學院進行的調查發現，醫生花在每個病人身上的時間中，有62%的時間花在EHR（電子健康記錄）上。如果設計的導航不夠，那么這個App就沒有任何使用價值。就算病人目前在使用導航的頻率很低，但他們也不會樂意看到混亂的導航而放棄二次使用的機會。
重要的導航信息應放在屏幕上顯眼的地方，并根據要求提供詳細信息。有一個“三次點擊規則”說系統的設計應該使任何信息都可以在三次轉換中使用。如果用戶在三次點擊之后找不到他們想要的東西，他們可能會感到沮喪，放棄他們原本要做的任務。
目前采用標準的應用程序導航有：
-漢堡菜單
-標簽欄
-導航抽屜
醫療應用-作者: Alex Samofalov
色彩的運用方法
一般來說，應用程序的顏色選擇取決于目標用戶和應用程序的主題來決定。
醫療保健應用程序的設計通常是在中性色調與流行的冷色調的藍色和綠色，白色為背景。在大多數情況下，設計師這樣做是為了達到某些效果: 利用舒緩柔和的顏色與醫療保健行業的共同聯系，緩解焦慮，增加可信度。所以你很少能看到明亮的紅色或黃色在醫療類App的界面。
藍色為主的醫療類App，作者Adam Sokoowski
然而，考慮到醫療軟件的通用性，在顏色的選擇方面沒有特別的限制。要考慮到的是，應用程序的整體外觀應該創造一個積極的印象，而不是引起擔憂，恐懼，或其他不良情緒的感覺。
例如，下面這個健身應用程序的深色調的設計看起來很漂亮，也不過時：
深色為主的醫療類App
健康與鍛煉應用程序-作者: Saepul Rohman
或者用明亮的顏色來增加一些活力：
移動健身應用-作者: Michal Parulski
追求個性
移動App的個性化設計是近年來最顯著的設計趨勢之一。某些功能需要適應特定的用戶模式。
這樣設計的目標是幫助用戶更地利用App解決他們的問題。這個系統提示了一個人接下來要指示的操作，否則這些可能會被忽略。要做到這一點，必須識別和分析用戶特征，并通過數據跟蹤用戶的行為變化。就像每個人都有自己不同的身體狀態一樣，他們也希望自己使用的App能根據他們的身體狀態提供相應的差異化體驗。即使不是醫療保健行業，也有33% 的客戶會因為個性化不足而放棄某款產品。
在醫療App設計中，個性化定制選項有很多: 顏色主題、通知、交互元素、使用 AI 創建個性化推薦等等。
最大化可訪問性設計
易訪問性設計對于每個App設計都很重要，特別是醫療App。
醫療App的用戶通常有不同程度的視力和聽力，年齡，身體和心理障礙。醫療App的功能設計需要讓不同的用戶在使用過程中都有比較好的用戶體驗。考慮不同用戶的局限性，并幫助他們努力克服局限性帶來的負面影響非常重要。例如，暈動病患者不太喜歡過多動效。
這并不意味著在醫療App設計中只能有兩種顏色，所有的字號都必須非常大，但這確實意味對于醫療App，設計師會面臨更多挑戰。不過這是一個額外鍛煉機會，而不是負擔。從WC3的網頁內容無障礙指南開始，使用像這樣的色盲模擬器。
App無障礙設計的例子: 把主要元素放在拇指區，不要忘記選擇改變視圖為水平模式，字號需要更大，等等。
色盲模擬器-作者: keithar
積極態度的力量
醫學不僅復雜，而且通常讓人望而生畏。比較聰明的設計手法是讓你的應用看起來和醫學毫無關系。這樣可以消除人們對醫學壓力的刻板印象，讓用戶體驗更加愉悅。
比如在用戶使用的不同階段運用積極的文案、有趣的圖片、舒緩的顏色或其他元素。醫療App界面設計中的圖片和圖標需要能夠用戶調動積極、愉快的情緒，營造一種無痛感和安全感。
冠狀病毒APP-作者: Mahdieh Khalili
不要將App設計成網頁
在有醫療網站的情況下設計醫療App，老板甚至是設計師可能會將網頁頁面復制到App當中，這樣通常會導致用戶放棄使用App。
移動端和網頁端的交互存在一定的差異性。手機的物理尺寸比電腦屏幕小。在手機上，我們的任何交互都是通過手指來完成，所以不愿意輸入冗長的文案，同時期望產品運行得更快。
在大多數情況下，人們使用網站獲取信息，使用App完成工作。此外，App集成了手機的功能，比如加速器和攝像頭，使App的設計不同于網頁。
健康醫療應用-作者: Grace Saraswati
適得其反
保持吸引力與功能平衡都很重要。醫療保健應用程序必須不能分散用戶對其內容的注意力。仔細看看上面的要點，注意好分寸就行。
圖形元素、包括動效，應該始終履行他們的使命，即數據輸入，并說明微交互的用戶與系統，而不是僅僅只為了使一個應用程序看起來很炫酷。
不要過度使用漸變和陰影，只將用戶的注意力集中在主要文字信息上。只使用一種字體，你可以通過改變字體的大小和其他特征來改變它，比如斜體、粗體。
多使用簡單的配色可以獲得更清晰的品牌信息和導航。
健康與活動跟蹤互動-作者: Dibbendo Pranto
抄還是不抄？
你可能會在某個時候想，如果覺得抄這個方案有用的話？是不是應該拿一些成功的競爭對手的應用程序復制一份。
其實，照抄其他產品是不明智的行為，因為他們的設計可能很容易就不夠好。你最終可能正好抄了競爭對手的錯誤方案，從而阻礙未來應用程序市場運作。
另一方面，你肯定應該對其他應用程序進行分析，進行競爭對手的研究。一個應用程序應該與用戶以前使用其他應用程序的經驗相關。如果事實并非如此，而且你添加了太多的原創性，那么使用這個應用程序的用戶就會覺得很麻煩，用戶也不會容忍“一切都錯了”的設計。蘋果和谷歌都有人機界面指南和材質設計。
用戶把大部分時間花在其他事情上 ——Jacob’s Law
有必要根據你的品牌、服務和產品的具體情況進行設計。好比如一個健身APP與一醫療APP，兩者使用方向有很大的差異。所以說必須完全符合目標受眾的要求、細節，以及應用程序的主題情況進行針對性設計。
藥物提醒程序-作者: Martyna Zielińska
實用性測試
最后，要記住最重要的一點，每個設計師都可以認為這個決定是否合理。他們可能會對應用程序的架構和導航的一致性，深思熟慮的設計，以及最重要的實用價值深信不疑，以至于完全忘記了通過實踐進行測試，設計師可以提高他們的同理心水平，更好地感受客戶的需求。但事實上，這種陷阱會給應用程序帶來很多負面影響。
只有在分析了與用戶與應用程序界面交互相關的數據之后，才能得出結論。多進行一些測試將有助于及時地獲得反饋，解決應用程序中的所有可出現陷阱一樣的場景。
積極的用戶參與是成功的關鍵。在年齡、職業、地理位置、性別、文化和宗教背景等方面，選擇盡可能接近目標受眾的相關測試對象。越接近越好。讓他們執行你的應用程序的主要功能并收集反饋。
病歷本App應用-作者: Alex Samofalov
最后
設計不單單是討論顏色搭配和字體的運用，而是能夠帶來價值和解決業務問題。健康和醫療類App是一個敏感而富有挑戰性的課題，需要特別關注。設計師們一直在努力平衡醫療應用程序極高的安全性和可用性要求與其界面的美學性，經過深思熟慮體驗和用戶界面設計成就一個很好的醫療類工具，讓用戶在一個簡單和直觀的界面的幫助下參與使用。
文章來源：花火圓桌（ID：huahuoyuanzhuo） 作者：Kate Shokurova
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
vue中關于插槽的文檔說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發者容易產生“算了吧，回頭再學，反正已經可以寫基礎組件了”，于是就關閉了vue說明文檔。
實際上，插槽的概念很簡單，下面通過分三部分來講。這個部分也是按照vue說明文檔的順序來寫的。
進入三部分之前，先讓還沒接觸過插槽的同學對什么是插槽有一個簡單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上，一個slot最核心的兩個問題這里就點出來了，是顯示不顯示和怎樣顯示。
由于插槽是一塊模板，所以，對于任何一個組件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板，指的是‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot，它是一個空殼子，因為它顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的哪塊，父組件傳過來的模板將來就顯示在哪塊。
首先是單個插槽，單個插槽是vue的官方叫法，但是其實也可以叫它默認插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設置name屬性。
單個插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個組件中只能有一個該類插槽。相對應的，具名插槽就可以有很多個，只要名字（name屬性）不同就可以了。
下面通過一個例子來展示。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<child>
-
<div class="tmpl">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
<h3>這里是子組件</h3>
-
<slot></slot>
-
</div>
-
</template>
在這個例子里，因為父組件在<child></child>里面寫了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。
-
<div class="tmpl">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
最終的渲染結果如圖所示：
-
-
注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍色填充。
匿名插槽沒有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個組件中出現N次。出現在不同的位置。下面的例子，就是一個有兩個具名插槽和單個插槽的組件，這三個插槽被父組件用同一套css樣式顯示了出來，不同的是內容上略有區別。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<child>
-
<div class="tmpl" slot="up">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
-
<div class="tmpl" slot="down">
-
<span>菜單-1</span>
-
<span>菜單-2</span>
-
<span>菜單-3</span>
-
<span>菜單-4</span>
-
<span>菜單-5</span>
-
<span>菜單-6</span>
-
</div>
-
<div class="tmpl">
-
<span>菜單->1</span>
-
<span>菜單->2</span>
-
<span>菜單->3</span>
-
<span>菜單->4</span>
-
<span>菜單->5</span>
-
<span>菜單->6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
// 具名插槽
-
<slot name="up"></slot>
-
<h3>這里是子組件</h3>
-
// 具名插槽
-
<slot name="down"></slot>
-
// 匿名插槽
-
<slot></slot>
-
</div>
-
</template>
顯示結果如圖：
可以看到，父組件通過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板默認關聯匿名插槽。
最后，就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶數據的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫
-
匿名插槽
-
<slot></slot>
-
具名插槽
-
<slot name="up"></slot>
但是作用域插槽要求，在slot上面綁定數據。也就是你得寫成大概下面這個樣子。
-
<slot name="up" :data="data"></slot>
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
},
-
}
我們前面說了，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板，像下面那樣。
-
<child>
-
html模板
-
</child>
寫了，插槽就總得在瀏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。
OK，我們說有html模板的情況，就是父組件會往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內容呢？
正因為作用域插槽綁定了一套數據，父組件可以拿來用。于是，情況就變成了這樣：樣式父組件說了算，但內容可以顯示子組件插槽綁定的。
我們再來對比，作用域插槽和單個插槽和具名插槽的區別，因為單個插槽和具名插槽不綁定數據，所以父組件是提供的模板要既包括樣式由包括內容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內容；而作用域插槽，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數據的前提下）。
下面的例子，你就能看到，父組件提供了三種樣式(分別是flex、ul、直接顯示)，都沒有提供數據，數據使用的都是子組件插槽自己綁定的那個人名數組。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<!--第一次使用：用flex展示數據-->
-
<child>
-
<template slot-scope="user">
-
<div class="tmpl">
-
<span v-for="item in user.data">{{item}}</span>
-
</div>
-
</template>
-
-
</child>
-
-
<!--第二次使用：用列表展示數據-->
-
<child>
-
<template slot-scope="user">
-
<ul>
-
<li v-for="item in user.data">{{item}}</li>
-
</ul>
-
</template>
-
-
</child>
-
-
<!--第三次使用：直接顯示數據-->
-
<child>
-
<template slot-scope="user">
-
{{user.data}}
-
</template>
-
-
</child>
-
-
<!--第四次使用：不使用其提供的數據, 作用域插槽退變成匿名插槽-->
-
<child>
-
我就是模板
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
-
<h3>這里是子組件</h3>
-
// 作用域插槽
-
<slot :data="data"></slot>
-
</div>
-
</template>
-
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
}
-
}
結果如圖所示：
轉載地址：https://segmentfault.com/a/1190000012996217
轉載作者/云荒杯傾
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。
APP UI設計一直在變化，就像網頁設計一樣，不停的創作新鮮、友好的產品，設計師要跟上這個趨勢，最好的方式就是多看優秀案例，下面大家一起來看看今天的精選，建議訪問官網查看更詳細的展示哦！
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了12款優秀并富有創意的交互作品，為你的產品設計注入靈感。
精美的天氣app賞析
--手機appUI設計--
--精美的天氣app設計--
（以上圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
每年的雙11在設計師們的眼里，都不僅僅是購物狂歡節還是一場視覺盛宴。這不，今年的雙11重頭戲來了。
天貓聯合各品牌發布了超級符合“貓頭海報”，一共55家下面讓我們一次看個夠。
1. 泡泡瑪特，很有意思的創意
2. The North Face場景感十足
3. 好奇很溫馨的設計
4. 外星人，一直都想買的電腦
5. VANS，我喜歡他家的黑格子鞋
6. Levi’s，我服了
7. 麥當勞，煙霧的創意很契合產品
8. 惠氏鉑臻3，一團線織出來的創意
9. 拉面說，來碗面
10. 宜家家居，仔細看，是購物袋
11. 巴黎歐萊雅，萬能的C4D
12. 朗仕，細節很多
13. 華為，冷暖對比很有沖擊力
14. 樂高，積木的海洋
15. Marshall，燥起來
16. Jordan，喬丹
17. 肯德基，WOW好吃！
18. 林氏木業，俯視的構圖角度，空間感很強
19. 元氣森林，故事性很強
20. 強生，滿是愛
21. fresh，高端的護膚品牌
22. 萬代，為“酷”而生
23. 始祖鳥，化石來了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起沖浪
26. 施華洛世奇，每個女孩都值得擁有
27. PINKO，亂的有創意
28. MINI，我有個進MINI車友群的夢
29. 孩之寶變形金剛，汽車人變形
30. Onisuka Tiger，日本的運動產品品牌
31. 優衣庫，線下實體店的貨架創意
32. 三頓半
33. OLAY
34. Dyson，很親切的表達方式
35. 迪士尼商店，可愛、好玩
36. NIKE
37. 法國嬌蘭，看起來很貴氣
38. 榮耀
39. LINE FRIENDS
40. M.A.C
41. 紅星美凱龍，空間感很強
42. NET-A-PORTER，泡泡龍的感覺
43. 稀奇，太喜感了
44. 百威，喲喲切克鬧
45. 芭比
46. 李子柒，依然還是熟悉的味道
47. 愛他美3，陽光帥氣
48. 花西子，雕刻工藝品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，傳統國風的感覺
52. Moleskine
53. 大疆，很喜歡無人機，有一起拼單的嗎？
54. 繪兒樂，這個創意現實中我玩過
55. 樂事，好吃
每個品牌對于貓頭的創意表達都不一樣，很多都是生活中隨處能見到的，但在設計師的眼中，就是創意靈感來源。
下面還有視頻版，大家一起看看：
以下視頻來源于
看完今年的貓頭海報，讓我更加期待接下來各品牌雙11活動的玩法和創意。接下來讓我拭目以待吧。
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了12款優秀并富有創意的交互作品，為你的產品設計注入靈感。
還有精美的天氣app賞析
--手機appUI設計--
--精美的天氣app設計--
（以上圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
編輯導語：移動互聯網，是PC互聯網發展的必然產物，將移動通信和互聯網二者結合起來，成為一體。目前，移動互聯網正逐漸滲透到人們生活、工作的各個領域，微信、支付寶、位置服務等豐富多彩的移動互聯網應用迅猛發展，正在深刻改變信息時代的社會生活。我們總能聽到、看到移動互聯網這個詞，但是你知道其發展歷程嗎？
2007年1月9日，第一代iPhone誕生：3.5英寸全觸控屏幕、金屬機身以及iPhone OS推開了智能手機時代的大門。
iPhone的發布給了雷軍極大的震撼，他買了很多iPhone，到處送人。
同時，遠在珠海的黃章也注意到了這款與眾不同的手機。此時魅族MP3風頭正盛，取得了巨大的成功，但黃章卻選擇放棄了MP3的業務，將精力資源轉向了智能手機的研發。
創立于2007年的Twitter，可以讓用戶更新不超過140個字內容，在美國一炮而紅，同時也讓中國創業者看到了機會。王興與穆榮均（現任美團聯合創始人、美團大學校長）在華清嘉園的一棟民居里，創建了類似Twitter的網站，取名叫“飯否”。
2009年，飯否用戶已經增至100萬，包括微信之父張小龍也在飯否上匿名發表了2359條日記，讓大家看到了他的另一面。后來飯否被關，核心團隊卻沒有散，他們繼續做了美團網。
當時只走了兩個人，其中一位就是張一鳴，也是王興福建龍巖老鄉，這個年輕人后來創建了今日頭條。
2010年11月，飯否再次上線，但大勢已去，飯否項目就此終止。2008年7月份，我國網民數量達2.53億，首次大幅超過美國。但互聯網普及率只有19.1%，畢竟有電腦的人還是少數。
接下來的移動互聯網的到來，讓每個人隨時隨地上網成為可能，一個新時代開始了。
同年9月，谷歌正式發布了Android 1.0系統，這是Android系統最早的版本；同年10月份，世界上第一款使用Android操作系統的手機HTC G1誕生，可支持觸屏操作，并內置了310萬像素攝像頭，同時支持3G網絡。
除手機之外，Android系統逐漸擴展到平板電腦、電視、手表等其他設備。
同樣在這一年，還在上海交大讀研究生的張旭豪與同學一起創建“餓了么”，早期的餓了么采用的是原始電話接單形式，用戶打來電話，他們去跟餐館下單，然后取餐送到用戶手里并收錢，賺取中間的差價，這個模式贏得了許多大學生用戶的認可。
2009年1月7日，中國移動、中國電信和中國聯通獲得3G牌照，標志著中國進入3G時代。相比2G，3G技術可以處理圖像、音樂、視頻等多種媒體形式，移動上網逐漸成為可能。
同樣在2009年，程一笑還是人人網的 iPhone 客戶端的開發，兩年后他離職創業做了一款工具產品-GIF快手，這也是快手的前身，是一款用來制作、分享GIF圖片的手機應用，當時在微博逐漸流行開來。
2009年7月，新浪管理層決定要做微博這個產品，由時任桌面產品事業部主管彭少彬帶隊，團隊每天幾乎都是干到凌晨才回家。
2個月后，新浪推出“新浪微博”內測版，成為門戶網站中第一家提供微博服務門戶網站，之后又添加了添加了@ 、私信、評論、轉發功能。
2010年，騰訊、網易、搜狐都推出了自己的微博產品，微博大戰打響，新浪微博結合自己媒體資源優勢，通過邀請明星和名人入駐策略，最終戰勝了其他產品，后來新浪微博成功去掉了前綴變為“微博”，成為“微博”賽道的唯一玩家。
2010年4月6日，在中關村保福寺橋銀谷大廈，小米正式宣告成立，黎萬強的父親一大早起來熬了一鍋小米粥，每人喝了一碗小米粥便開始工作了。
2010年9月22日中秋節，周鴻祎邀請了李開復以及創新工廠的幾位骨干在懷柔農家院吃飯，突然接到了報告：騰訊將“QQ醫生”升級為了“QQ電腦管家”，并且具備云查殺木馬、漏洞修補、安全防護、系統維護和軟件管理等功能，涵蓋了360安全衛士的主流功能。
而且QQ醫生通過后臺靜默安裝的方式，神不知鬼不覺的進入用戶電腦，直接威脅360在安全領域的地位。周鴻祎當即給馬化騰打了一個電話，希望能停止強制安裝，但是最終溝通無效。
隨后，在中秋節結束后的一周，360發布了迎戰QQ進攻的武器-360隱私保護器幫助用戶監控電腦中軟件在后臺的所有行為。
針對360隱私保護器曝光QQ偷窺用戶隱私事件，騰訊正式宣布起訴360不正當競爭，要求360公開道歉賠償，停止侵權行為。
之后針對騰訊刊登《反對360不正當競爭及加強行業自律的聯合聲明》，在2010年10月29日，360推出了“扣扣保鏢”，可以過濾廣告、清理垃圾、提升QQ的運行速度、防止QQ盜號、同時不顯示IP保護用戶隱私。
發布72小時內，裝機量就突破了1000萬，馬化騰在這一天也度過了他難忘的40歲生日。終于，矛盾全面爆發，騰訊通過彈窗發布了“艱難的決定”-在裝有360軟件的電腦上停止運行QQ軟件，給上億用戶出了一道選擇題。
后來政府部門介入之后，QQ和360恢復兼容，并對外做了道歉說明，一場生死大戰正式結束。
通過3Q大戰，讓360一戰成名，而騰訊也開始反思過去的商業模式，變得更加開放，不是每個產品都親自去做，而是通過投資、并購等形式搭建自己的產業生態圈，走上了一個新的高度。
2010年10月，一款名為kik的APP流行起來，可以直接跟通訊錄的人免費聊天，當然前提是另一個人也安裝了kik，上線15天便斬獲了100萬用戶。而這款新產品的出現，也吸引了雷軍跟張小龍的注意。
一個月后米聊誕生了，雷軍也曾想到到騰訊會介入，在米聊發布之后，他曾經對內部員工說：
“如果騰訊介入這個領域，那米聊成功的可能性就會被大大降低，介入得越早，我們成功的難度越大。據內部消息，騰訊給了我們3個月的時間”。
但是，騰訊沒有留給雷軍3個月的時間。
張小龍看到kik這款產品之后，立即給馬化騰寫郵件，建議由他的廣州團隊做一個類似kik的產品，馬化騰當即回復同意。
當時騰訊內部有三個團隊同時在做，都叫微信，誰跑贏了就上誰的。最終張小龍帶領的Email團隊勝出，僅僅比米聊晚了一個月。
2010年，來自香港的郭秉鑫團隊，針對開車不方便接電話場景和盲人開發了全球第一款語音IM應用Talkbox。
2011年1月份上線，僅3天就在App Store下載達100萬，掀起了語音聊天的浪潮。前段時間熱播的互聯網創業題材劇《創業時代》正是取材于此。
緊接著米聊、微信都迅速加入了語音對講功能，用戶量猛增。隨著大公司的入場，Talkbox的“活路”被斷了，用戶量從四五百萬跌落到僅有100萬，最后退出大陸，轉向海外市場。
360公司在2011年也推出了一款IM產品-“口信”，可以基于手機通訊錄的熟人免費發短信、照片，也允許用戶發語音消息，主打穩定跟安全，最終也不了了之。
得益于騰訊QQ巨大的流量導入以及背后的關系鏈、自身的社交基因以及綜合技術能力，微信迅速成長。在米聊還在糾結做熟人社區還是陌生人交友時，微信通過附近的人、搖一搖、漂流瓶等一系列交友功能，獲得了大量用戶。
2011年底，微信用戶已超過5000萬，2012年3月，微信用戶數突破1億大關。米聊漸漸淡出了人們的視野，雷軍也將主要精力放到智能手機的研發上，并于2011年8月16日，正式發布小米手機。
同樣在2010年，來自美國的團購網站Groupon大火，成立僅7個月便實現了盈利，并且融資了1.4億美金，谷歌向也Groupon發出收購邀約，報價一路路上漲至60億美元。
Groupon的火爆也讓國內創業者看到了機會，一時間各類公司紛紛涌進團購領域。
第三次創業的王興創辦了美團網、人人公司旗下團購網站“糯米網“宣布上線、淘寶也推出了聚劃算、拉手、24券、團寶網、滿座網、窩窩團等紛紛上線。
截止到2011年5月，國內的團購網站達5000多家，“千團大戰”正式打響。
這一年3月，與唐巖私交甚好的方三文從網易離職創辦了雪球。一年后，時任網易總編輯的唐巖也宣布離職，創立陌陌科技，他們想做一個基于地理位置的社交工具。
團隊最開始有三個人，除了唐巖，還有一個產品經理與一個技術人員，后來又通過QQ群里貼小廣告招來一位開發工程師。
2012年大年初七，時任九九房CEO的張一鳴跟投資人見面，他想在九九房之外再做點別的有意思的事情：能根據個人的興趣，推薦符合口味的內容。
之后張一鳴辭去了CEO的職務，開始了自己的第五次創業，成立了字節跳動公司（bytedance），除了今日頭條之外，還推出了“內涵段子”、“內涵漫畫”等產品。
2012年6月，在阿里巴巴任職八年、時任支付寶B2C事業部副總經理的程維離職，創立小桔科技，他們做的產品叫滴滴打車，9月9日，滴滴打車在北京上線。
而早在一個月前，位于杭州的一家公司也上線了一款智能打車應用-快的打車。
之后兩家公司在智能出行領域開啟了補貼大戰，滴滴背靠騰訊，快的背靠阿里，馬化騰曾在一次會上表示最多的時候一天投入4000萬元，但大家都不敢收手，否則就前功盡棄了。
2015年02月14日，情人節，在各方力量的博弈下，快的打車與滴滴打車聯合發布聲明，宣布兩家實現戰略合并。
2013年12月4日工信部正式向三大運營商發布4G牌照，中國移動、中國電信和中國聯通均獲得TD-LTE牌照，標志了中國移動互聯網正式邁入4G高速時代。
2014年1月26日，來源于線下發紅包的靈感，微信推出了推出了“新年紅包”，一經推出就在各大微信群中傳播。
據騰訊發布的數據顯示，從除夕開始，截至大年初一下午4點，參與搶微信紅包的用戶超過500萬，總計搶紅包7500萬次以上，領取到的紅包總計超過2000萬個，平均每分鐘領取的紅包達到9412個。
因為紅包最終提現需要綁定銀行卡，微信綁卡的數量呈指數級增長，微信紅包一夜之間打進了支付寶后院，也奠定了微信支付的江湖地位。
2014年11月，15歲考上中科大，28歲擔任聯想中國區最年輕的事業部總經理的徐正，與曾斌在創立每日優鮮，為用戶提供自營生鮮電商服務，推出之后發展迅速，領跑行業。
同樣在該月，易車創始人李斌與劉強東、李想、騰訊、高瓴資本、順為資本等聯合發起創立蔚來汽車。一年后，李想卸任汽車之家總裁，創辦了車合家，并在2018年推出了理想ONE智能電動車。
2015年7月的一個晚上，王思聰與黃立成第一次見面，并決定投資一款名叫17的手機直播產品。
在接下來的幾個月里17相繼在臺灣、香港、新加坡、美國等蘋果App Store排行榜登上榜首，并在2015年9月沖到中國免費榜第一。同時王思聰在微博上發布了一條帶有17 ID界面的微博，雖然后來17因為涉黃被下架，但這并不能阻擋17的知名度迅速在國內傳播開來。
市場的火爆，智能手機性能與網絡速度提升，也讓國內創業者嗅到了商機，不管是大公司還是小的創業團隊紛紛擠入到直播當中來，妄圖在中間分一杯羹。
一時間市面上的直播產品多達百款，映客、花椒、NOW直播、虎牙、斗魚、熊貓等等，直播行業頓時硝煙四起。
而直播戰場最后活下來的卻寥寥無幾，映客成功實現上市、花椒與六間房合并、熊貓直播在2019年倒閉，斗魚與虎牙也在2020年宣布合并。
2016年4月22日，胡瑋煒創立摩拜單車，易車公司董事長，蔚來汽車創始人李斌是她的天使投資人。
用戶只需在APP上實名注冊，并繳納299元保障金，即可租用。而在一年前，戴威與4名合伙人在北大投放了2000輛單車，他們做的也是共享單車平臺，名字叫ofo，主要面向校園市場。
共享單車的出現也吸引了大批資本涌入，一時間各種五顏六色的單車出現在城市的街頭：小藍單車、優拜單車、小鳴單車、悟空單車、町町單車等等，讓人應接不暇。
在共享經濟的帶動下，創投界也掀起了一股共享風，一時間共享充電寶、共享雨傘、共享籃球也都紛紛獲得融資。
然而混戰過后，最終幸存的寥寥無幾：
2016年5月，Musical.ly開啟了新一輪的融資，計劃融資金額約為1億美元。
Musical.ly可以讓用戶將自己的視頻配上自己喜歡的音樂，通過對口型以及肢體語言來制作15秒的MV，這款由中國團隊開發的產品，在歐美青少年之間迅速流行開來。
同年7月，登上了蘋果應用商店美國地區的榜首。
2015年6月，已經轉型為短視頻社區的快手用戶數破1億，而在3個月之后，抖音才開始入場，很快成為今日頭條的戰略級產品，逐漸縮小與快手之間的差距，之后今日頭條又推出了西瓜視頻、火山小視頻等產品，滿足不同人群觀看需要。
抖音快手等產品的出現，也讓個體有了更多表達自己的方式，自媒體不再是專業人士的專屬，許多人將自己普通的日常生活拍成短視頻，也收獲了大量粉絲。
2017年11月10日，今日頭條宣布10億美元收購Musical.ly，并與抖音合并。
一年后，Musical.ly 全面整合至 TikTok（抖音海外版），Musical.ly現有用戶更新應用后，會自動升級至新TikTok，這也宣告Musical.ly的品牌使命正式終結。
2018年7月26日，社交電商平臺拼多多，正式登陸納斯達克，股票代碼“PDD”，市值一度超過京東、百度。
在國內電商基本被淘寶、京東兩大巨頭壟斷情況下，拼多多瞄準下沉市場，依托社交拼團的形式，迅速占領市場，從2015年4月上線到上市僅僅用了3年時間。
拼多多上市也讓創始人黃崢身價大漲，憑借776億元財富躋身于2018年中國福布斯排行榜第12位，僅次于丁磊跟雷軍。
畢業于浙江大學的黃崢，2004年獲得美國威斯康星大學麥迪遜分校計算機碩士學位，在段永平（現任步步高集團董事長）的建議下，選擇了加入谷歌做碼農、產品經理，并且拿到了原始股，隨著谷歌的上市，黃崢也賺到了人生中的第一桶金。
之后黃崢與李開復一起，回到中國參與并創建了谷歌中國，在谷歌呆了3年，黃崢就加入了創業隊伍中，先后創辦手機電商、電商代運營和游戲公司，最后孵化出了拼多多。
兩個月后，另外一家公司也正式掛牌納斯達克交易所，它就是趣頭條。
趣頭條重點面向三線及以下城市，基于金幣體系，通過看資訊賺金幣、邀請好友得獎勵等一系列形式，收獲了大量下沉市場的用戶，從成立到上市，僅僅用了兩年多的時間。
移動互聯網時代，一個個移動應用如雨后春筍般出現，開始了用戶時長爭奪戰，音頻社交、社區團購、社交電商、視頻娛樂等領域誕生了一大批優秀的應用。
隨著網民數量增速放緩，人口紅利優勢逐漸消失，獲客成本也水漲船高，企業除了提升精細化運營能力之外，也都在尋找新的增長點。
有的公司趕上了新一波的浪潮，尋找到了新的增長點，煥發新的生機與活力，有的公司則錯失了移動互聯網時代，仍舊靠著之前的業務維持運轉，有的公司則經營不善，黯然離場。
公司與公司之間也紛紛開始了收購與整合：
2019年6月6日，工信部向中國電信、中國移動、中國聯通、中國廣電發放了5G商用牌照。5G的誕生將加速物聯網、車聯網、AR/VR、智慧城市、智慧醫療、工業4.0等領域發展。
科技不斷發展，時代不斷進步，我們國家也提出了“新基建”的發展理念，重點發展5G基站建設、大數據中心、人工智能、工業互聯網、特高壓、城際高速鐵路和城市軌道交通、新能源汽車充電樁、七大領域。
而且隨著人工智能技術的發展，21世紀將進入智能時代。
對于我們個人來講，我們能做的就是順勢而為，找好自己的方向，做好自己的選擇，在新一波浪潮來臨之時，能抓住屬于自己的機遇，實現你人生的迭代升級。
文章來源：人人都是產品經理 作者：HQ
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每天，世界上有40億人在城市中穿行，這個不斷增長變化的群體占據了世界人口的一半還多。了解人們如何出行以及出行的演變對于改善我們的城市、環境和數十億人的生活至關重要。我們創建了 Uber Movement，來幫助大家增進理解。
視頻地址：https://youtu.be/bszvEIMVsIc （需翻墻）
目前，Uber已在全球700多個城市提供服務，所有出行數據不僅能幫助我們提高服務質量，也有可能幫助到城市規劃師，以及那些渴望提高城市建設水平的人。Uber Movement允許用戶以多種方式查看數據：用戶可以查看某個日期某次出行的平均耗時，也可以查看某個區域不同日期范圍內的平均耗時，或者可以對比同一個區域不同的兩個行程的耗時。
圖1：從華盛頓市中心出發到各地所需的出行時長
圖1中的截圖展現了從華盛頓市中心到達城市其他區域的平均耗時（在2016年3月16日鐵路運輸因維修而暫停服務）。截圖a中顯示了晚高峰的耗時情況，截圖b顯示了兩周前鐵路運輸未中止的耗時情況，截圖c則比對了兩個時段下的數據，指示出鐵路服務暫停對路面交通帶來的嚴重影響。如圖示，在上述情況下，晚高峰時段從1400 K St NE區到1500 Kearny St NE區的平均出行時間增加了67.8％。
對于需考慮在哪里新增公交線路的公共交通機構，以及那些判別什么時候主干道需要進行道路養護的城市機構，都能夠通過這些數據了解到什么時候減少車道會對交通的影響最小，應向駕駛者提供哪些替代路線。
為了讓這些數據有價值，必須讓它們有使用價值。這就需要數據可視化的加持了。作為負責 Uber Movement 的產品設計師，我需要確保我們分享的數據是盡可能清晰易懂的。
我們遇到了一個有趣的問題：如何展示兩個不同卻又有關聯的可視化元素?！笗r長熱力圖」展現了在一個特定的日期（例如，2016年1月11日星期一下午）下，從任一起始點到某個位置的耗時（以分鐘為單位）；也可以是一個跨度長達幾個月（例如，2016年3月至5月的工作日早晨）的平均耗時。這個熱力圖使用了相鄰色，基于相同的顏色來調整色調由亮至暗（如下圖1所示，淺藍色至深藍色）。
「比對熱力圖」能夠讓用戶對比相同路線不同時段下的平均耗時。這里需要凸顯信息的對比度，哪一個時段下的耗時更少，少多少？對于該熱力圖，我們使用了對比色（如圖2）來表現數據由0至兩極（快與慢）。如果差值為零，則表示兩種情況下的耗時相同。我們企圖通過兩個對比的顏色盡可能的凸顯差異。
我們的用戶會在這兩種熱力圖中連續反復切換，所以我們需要將這兩種模式從視覺上明確區分出來。
圖2：早期設計的5階色（左側單位為絕對耗時，右側單位為相對耗時比）
在早期的設計中（如圖2），5階相鄰色（由淡綠色至藍色）被用來表現路程的絕對耗時，而5階對比色（由綠至淡黃再到紅色）則用來表現兩種條件的對比。
初期嘗試使用五個顏色梯度，但在可用性測試中發現地圖的色彩辨識度低（見下圖3）。主要有以下幾個問題：
顯而易見，可用性測試的參與者難以從地圖判斷出耗時，特別是當地圖縮放聚焦在市中心時，也難以區分兩種模式（耗時熱力圖/對比熱力圖），見圖3。
圖3：西雅圖的出現時長
圖3，以早期的設計效果（5階相鄰色）查看從西雅圖市中心至其他區域的平均耗時，截圖a 展現了西雅圖所有區域的耗費時長，顏色讓區塊看起來“糊在一塊兒”。截圖b則展現了縮放聚焦至市中心區域時的效果，難以區分不同區域。
通過多步的探索實驗，我將這個復雜的設計難題拆解為幾個不同的小挑戰，并驗證不同的方案，最終獲得一個色彩系統達到易讀性最理想的熱圖效果。
1.通過相鄰色和對比色兩個樣本有效區分耗時熱力圖和對比熱力圖
由于同時應用相鄰色與對比色，所用的配色就必須是“四色系”配色方案以明確區分。（譯注：tetradic color 的翻譯可能不合適，根據定義，其為一種大膽的配色方案，四種顏色對立均等地分布在色輪的四個方向上。）我使用了 Uber Movement 的品牌色（#2473BD）作為相鄰色的基準色，然后使用 Paletton.com 列舉了幾組“四色系”配色方案，將四種顏色分配為兩對互補組合。
圖4：為實驗準備的色階方案
2.根據時長間隔等比或是梯度增加色組的色彩階層數
早期設計從5階色彩范圍開始（如圖2、3），兩種模式的熱圖都產生了一種“糊在一塊兒”的漸變效果。我們希望這個系統可以滿足不同體量的城市，從市中心到外圍區域的平均耗時跨度從30分鐘到1.5小時不等。僅使用5種顏色來表現0至1.5小時，顯然不足以讓用戶有效辯識地圖上的時間跨度。
我實驗性地將色彩范圍的階層從5增加到9，11，13。時間間隔分別以等比增加與梯度增加羅列（梯度增加以30分鐘為總時長）。
表1：5、9、11、13色階方案（左側為等距增加，右側為非等距增加）
之所以選擇了梯度增加，是因為根據我們與城市規劃者的溝通，了解到他們是基于「交通分析區（TAZ）」這種交通規劃模型來進行分析的，它將每個區域以人口密度劃分。城市區域的人口密度相比郊區會高很多。基于市區人口密度高，在市區對交通狀況進行定義時，以每5分鐘為間隔相比在郊區更有效。
顏色組通過 Chroma.js顏色助手計算生成。通過單顏色的變體給予一種連續性（見圖5）。圖中左側（方案1）使用了單色系，右側（方案2）則通過不同色調的顏色組合增加色組內的對比度。
圖5：用于實驗的2個色階（左側為淡色系，右側為多色系）
3.嘗試通過提升對比度去除掉區間的漸變效果
我將不同的顏色方案放到測試環境中去看看實際效果。為了去除漸變效果，在不受時間值和透明度影響的情況下，使用了彩色比例尺上的離散色值（見圖6右側的效果）。這樣處在相同色彩尺度區間的區域看起來合并了，能夠很好地辨別出區域之間耗時的異同。
圖6：采用離散色值消除漸變色。（從左側變為右側）
早期的配色方案是基于「耗時」調整的色值，并且使用了20%的透明度，由此顯示出一種「漸變效果」，導致鄰近區域過于相近，用戶難以根據顏色判斷數值差異。新的配色方案則取消了以上兩點，這使得相同時間的區域合并，清晰的色帶使其更易讀。
我還開發了個程序用來計算鄰近色組的對比度（見下方表2），方案2配色中的9階色彩范圍表現出最佳的平均對比度，其次是11階?？紤]到平均路程耗費時長在不同城市會有較大的差異，方案2中的11階色彩能提供最好的擴展性與可讀性。與早期方案相比，新方案的對比度提高了30%。
從上面的圖表可以看到，方案2配色有更高的對比度。其中，顏色階次越少，對比度也越高。
4.在測試環境中對比顏色方案
基于以上的結果，我將方案1（單色系）排除了。我們將方案2放到測試環境中查看了兩種間隔取色策略的效果。（譯注：這里的兩種策略指的是上面圖表1呈現的兩種取色方案。一種是例如每10分鐘遞進一個色階，等分；另一種則是會變化，例如前30分鐘每5分鐘遞進一個色階，超過30分鐘則每10分鐘遞進一個色階。）
表2：鄰近色組的對比度計算
下圖7展示了波士頓城整體區域的熱圖效果，讓我們再看看聚焦到市中心的效果如何。
圖7：波士頓城整體區域的熱圖效果
圖8更進一步地確認了「變化時間間隔取色」提供了更高的對比度。
圖8：「變化時間間隔取色」后的效果
5.對配色色階進行微調
在這一系列的實驗之后，才明確了這個方案（方案2中的11階色彩）屬最佳效果。能夠很好地滿足視圖中大跨度時間差的呈現。不論是城市的整體縱覽或是聚焦在市中心區域，都能提供最佳的對比度。
我們的內部團隊對實驗進行了評審和測試，并最終敲定了色彩范圍（見圖表1），結果將在近期發布。
隨著越來越多的用戶在 Uber Movement 中探索他們的城市，我們也在不斷的學習與迭代，讓數據更有效地為大家所用。
數據可視化的最終目的還是信息溝通。當我們試圖清晰地傳達事實時，創作物的美學不是附屬品，而是一種內在價值。美感不只是粉飾。當數據可視化被合理地創造時，它因效用而美。
我們以一種微小的方式，通過不斷試錯與探索，試圖讓人們以一種全新的視角看看這個世界。它是有效的，也即是美的。
文章來源：UXRen 作者：Dawei Huang
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在9月底雙十一臨近的關口上，淘寶上線了 9.13 新版本，對首頁做出了巨大的改版，堪稱這 5 年來力度最大的改版幅度。
我們先來簡單看看新版本有哪些重要的改進：
如果只是通過視覺角度上來看，新改版必然是比過去的老版本 “清爽” 得多，畢竟精簡掉了大量的內容。尤其是兩個分頁器組件，除了占空間外，實在找不出什么要去點擊的必要。
輪播圖從頂部撤離和瓷片區進行合并，是一個比較有趣的設定，不僅廣告圖的面積減少，而且營銷推薦位全部集中到一起，使得模塊的劃分更集中。
現在的首頁從上到下的結構即：
如此化繁為簡的改造發生在淘寶APP身上，就像看一出浪子回頭的感人戲碼…
但不要這么容易被結構上的改造欺騙，改版后的淘寶降低了模塊的數量，但只是把減少的元素在其它地方呈現。即這次改版的重點——推薦瀑布流。
細心的同學應該都發現了，瀑布流卡片已經出現在了第一屏的底部，即使不用上滾也可以看見卡片的頭部了。
并且瓷片區也采用了瀑布流式的雙列布局，通過瓷片區白色背景的襯托，這半截露出的圖片反而顯得越發顯眼，越能吸引我們控制不住自己去上滾一下康康推薦了什么東西。
當我們開始瀏覽瀑布流的推薦內容以后，淘寶夾帶的大量私貨就進來了，我們來統計下總共有哪些類型：
實際的卡片類型，可能還不止我羅列出來的這些。這個本來是用來推薦商品的列表，已經演化成一個聚合了算法推薦內容的 “巴別塔”。
而其中最重要的商品卡片，甚至也不能直接點擊就跳轉到商品詳情頁中，而是添加了一個中轉頁面，進一步根據算法推薦相關商品，能直接跳轉進詳情頁的少數商品卡片，應該是有做廣告投放的定向導流。
這樣改版后的目的，不難分析出目的是為了進一步增加用戶 “逛淘寶” 的幾率和時間，讓本來打開應用就搜索—購買—關閉一條龍的用戶，也會不自覺陷入信息流的海洋中去。
可能很多人會覺得，難道不應該讓流程更短，購買步驟更容易，才符合優秀交互設計的定義嘛？
下面我們就做一些具體的分析吧！
對于一個商業應用來講，交互不是為了無條件迎合用戶的，雖然無論是 UX 還是 UED 的概念里，都愛強調用戶至上論，體驗為王之類的。但是…
1. 商業訴求 > 用戶體驗
只有在用戶量高速擴張，商業目標是需要用戶獲得良好體驗、口碑的情況下，用戶體驗的重要性才和大家在童話里了解的一致。更多的時候，是產品想喂用戶吃金坷垃時，我們要想辦法讓用戶心甘情愿的吃下去并快速成癮。
淘寶通過不同的方式獲取了大量用戶的數據，資料、喜好、購物傾向等等，在龐大的商品數支撐下，可以通過算法給你推薦無窮無盡的商品，總有你會感興趣的部分。
只要增加了信息流的曝光次數，不要讓用戶那么快完事，過早的陷入剁手的悔恨，抽起事后煙……
那么他們就會被這種簡單的產品形式俘獲，做多巴胺的奴隸。抖音是這樣的、微博是這樣的、知乎也是這樣的。為什么一個購物應用不想著最快的方式促成交易，而是讓用戶在里面繞圈子，原因也只能有一個 —— 流量。
大家都知道雙十一將近，各家電商平臺作妖時間又到了。但這兩年的電商行業已經發生了巨大的改變，那就是直播、短視頻帶貨形式帶來的變局。
這兩年，以抖音、快手為代表，興起的短視頻、直播帶貨風潮，已經成社會的熱門話題，薇婭沒事就在綜藝里和愛豆們一起帶貨，李佳琦身體有恙上微博熱搜，羅永浩靠帶貨上演 “真還傳”……
本來，購物方式的多元化，對于大型平臺來講是非常有幫助的。無論是十幾年前就開始出現的社會化電商平臺、返利網、或值得買，都可以促進電商行業的繁榮，促進平臺和整個產業鏈的發展。
但是，直播、短視頻的興起和過去的這些行業全部不一樣，它們本身并不依附于電商平臺，但卻擁有海量的流量和用戶基數。而當這樣的流量引擎在變現問題聚焦在電商時，直播和短視頻頭部平臺就有了和電商平臺們叫板的資格。
2. 直播電商規模，不算短視頻
主流的數據預測報告中，20年的直播電商規模都會達到萬億級別，直播電商的高速發展是沒法阻擋的大趨勢，它的發展會搶奪存量用戶的注意力，有大量的用戶購物逛商品，不在淘寶APP內，而是通過其它平臺轉化，再進來下單，或干脆在外部下單，這是絕對不能被容忍的。
所以淘寶不僅要緊跟趨勢，也要對抗外部的競爭，在今年加大對短視頻、直播的投入，也就順理成章。根據淘寶研究院的數據，過去三年直播帶貨的規模增長在 150% 以上，是全球增長最快的電商模式。
同時，雙十一的直播觀看用戶 18 年為 1793 萬人次，19 年為 4133 萬人次，同比增長 131%，對比 618 數據，毫無疑問今年肯定也會保持的增長。
并且前幾年淘寶雙十一喜歡玩的病毒式推廣活動成效已經越來越差，再讓用戶去集福，首頁上增加一大堆煙花繚亂的游戲和活動，已經不能再幫助雙十一獲得快速的增長了。
所以今年，淘寶在國慶前，上架了首頁新版本的設計，在應用形態上押寶信息流的算法推薦機制。不僅要開始改變用戶使用淘寶的習慣，也在為后續的雙十一做預熱，相信屆時會有大量的直播內容露出和短視頻推薦。
至于還有什么新花樣或殺手锏還沒秀出來，我們就拭目以待吧……
文章來源：優設 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
蘋果在2019年6月發布的iOS13中增加了“黑暗模式”，用戶打開“黑暗模式”后，應用界面將會變為深色，隨后Google Android 10的發布同樣搭載“黑暗模式”。為了適配系統，不少APP紛紛推出了深色模式。
使用OLED屏幕的設備，在純黑色下可以有效降低耗能，進一步延長續航時間。除此之外，深色模式還可以有效解決OLED屏燒屏、費眼的問題。小摹對幾款常用APP的深色模式進行了體驗，并為大家分享我的體驗感受。從這些案例中，或許我們可以找到深色模式流行的原因。
微 信
深色模式是一種可以降低視覺疲勞且有助于用戶專注的全新外觀。與傳統夜間模式最大的區別是，深色模式不僅保證了弱光環境下的體驗，在強光下仍具有可讀性。
雖然深色模式也被叫做暗黑模式，但并不代表要將底色變為純黑。如果使用100%的純黑底色，長時間閱讀時，反而會造成眼睛疲勞。微信的深色模式里，聊天背景及主頁面底色采用的就不是純黑，而是深灰色。
此外，純黑和純白的高對比度也會造成視覺疲勞，因此微信的深色模式中，使用了淺灰色作為字體顏色，既能保持清晰顯示，又降低了對比度，減輕了用戶的閱讀負擔。如果設置了聊天背景，聊天背景圖片也會自動調暗，便于閱讀。
雖然整體色彩加深，但微信在設計時仍保持著清晰的層次。比如置頂聊天窗口的灰色會比其他窗口稍淺，聊天消息的標題和摘要也采用了明度不同的淺灰色來區分層級。除此之外，微信的彩色線型圖標在黑色背景上也變得更具科技感，顏值提升了不少。
微信的深色模式除了可以幫助用戶緩解夜間視力疲勞外，在白天使用也幾乎沒有障礙，總體來說，體驗感覺較好。
Q Q
如果說微信的深色模式更加注重顏值，那么騰訊旗下的另一款社交工具QQ則更加注重用戶的深夜閱讀體驗。
首先，微信在切換深色模式時，需要重啟軟件后才能生效。QQ在切換夜間模式時，則采用了一個平滑的漸變過渡，讓用戶可以快速適應場景切換。其次，為了減少夜間光線對人眼的刺激，QQ降低了信息與背景的對比度，對用戶頭像等圖片增加了遮罩，使其在弱光環境中看起來更加柔和。
當用戶開啟夜間模式時，還會有一個設計彩蛋：部分圖標會根據模式切換而改變。如消息圖標會從笑臉切換為休息的狀態，這種具有趣味性的設計，也會拉近用戶與產品之間的距離。
豆 瓣
普通模式下的豆瓣APP背景色為純白色，白天看偶爾都覺得有些刺眼，更不用說睡前必刷豆瓣的用戶有多煎熬。在被用戶罵了一輪又一輪之后，豆瓣APP終于也推出了夜間模式。
豆瓣的夜間模式和微信一樣，同樣保留了五顏六色的圖標。同時，豆瓣在設計時始終保證內容有良好的對比度和清晰的視覺層級，保證了信息結構的準確傳達。
在配色方面，為了避免“死黑”讓整個界面太過死板，豆瓣在黑色中還混入了藍紫色，讓背景色看上去更加通透。底部導航等主要按鈕則使用了豆瓣的主色調綠色，在夜間模式下既能清晰展示，又不會顯得過于刺眼，同時也保證了在強光模式下可以正常瀏覽。
知 乎
另一款社區APP知乎和豆瓣存在同樣的問題。知乎在設計夜間模式時，知乎采用了主色調藍色+深灰色的搭配，深藍和灰色作為背景，展示出的效果既有強烈的對比，又擺脫了深色的壓抑感。
與豆瓣不同，知乎的文本顏色選擇了對比度更低的灰色，通過字重進行區分。雖然這樣會讓整體頁面看起來比較和諧，但內容變得不夠突出，無法在最短時間看清標題，對于一個以內容為主的社區來說，無疑會給用戶帶來不太好的體驗。
知乎在設計夜間模式時目標應該很明確，即只考慮用戶在夜間的使用，因此整體色調都很暗，在強光環境下無法正常瀏覽。
bilibili動畫
B站剛推出深色模式時收到了許多批評，字體和背景色對比不強，視頻封面仿佛蒙了一層霧，一刀切的暗化處理，導致用戶瀏覽體驗極差。
在最近一次更新中，B站終于對深色模式進行了優化，適度提亮了視頻封面和圖標的亮度，將多彩型圖標調整為了單線型圖標，既統一了畫面風格，又提升了界面閱讀體驗。
設計深色模式時，必須注意各頁面的配色及對比度都要盡可能地統一。在深色模式下點開B站創作中心或推薦服務中的版塊時，加載畫面仍然是白色，突然出現的強光無疑會對眼睛造成刺激，對于用戶來說體驗感也極差。
百度網盤
高飽和度的色彩會在深色背景上產生炫光的視覺效果，引發視覺疲勞。百度網盤的深色模式下，背景接近全黑，圖標卻沒有太大的調整，給用戶帶來的閱讀體驗并不好。
同樣，由于背景顏色太深，導致百度網盤的文本和背景對比度太大，也存在難以閱讀的情況，對于誦讀困難癥患者來說，在閱讀時會感覺文字在旋轉、模糊。
在設計深色模式時，除了背景顏色盡量使用深灰色以外，還需要確保絕大部分區域保持深色，盡可能使用數量有限的色彩。把握好對比度和飽和度，才能設計出舒適的深色模式。
綜上所述，合理使用深色模式，可以降低屏幕亮度，不僅可以減少耗電量，還能減小對自己或他人眼睛的刺激。除此之外，深色模式對背景色、文字以及系統圖標的顏色都進行了優化處理，可以提升閱讀舒適度。對于喜歡深色或黑色系的朋友來說，深色模式更是一種不同于普通模式的全新體驗。
除了APP，不少生產力工具也都采用了深色界面，比如PS、摹客等。以摹客為例，用戶在進行設計時，深色界面不僅僅能降低眼睛疲勞度，還能突出你的設計內容，打造沉浸式的設計體驗。
隨著蘋果“黑色模式”的推出，深色模式逐漸成為APP設計的流行趨勢。作為設計師，也一定要掌握APP深色模式的設計技巧。從上述APP設計案例中，我為大家總結了以下幾點建議以作參考：
1.避免使用純黑色；
2.避免使用高飽和度的顏色；
3.文本顏色選用高亮色，但不宜使用純白；
4.做好情感化設計；
5.注意結構和層次感；
6.允許用戶自由切換深色模式和普通模式。
文章來源：UI中國 作者：摹客產品協作設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
摘要：本文原標題為《用戶體驗中的稀缺性：心理偏見成為常態》，文章對當前設計稀缺性的情況進行了簡要分析，并給出了一些需要牢記的小貼士，閱讀預計需要7分鐘。
你知道稀缺性是咋回事嗎？
我隨意觀看了Unbox Therapy對這個杯子的某個測評視頻，很顯然這個杯子是不會倒的。我一直在笑，但在視頻的最后，我也很好奇人們對杯子的需求是什么。
在亞馬遜上，它以14.99 美元的價格限時出售，原價為24.99美元。不銹鋼版本僅剩下3個庫存。我喜歡不銹鋼的杯子，而且這是一個減價品，而且它很快就會售空。如果不買，我就要用之前會倒的杯子喝咖啡了。錯過它的話太可惜了。
是的，多數時候這個杯子不會倒
稀缺性是一種心理偏見，它讓我們覺得稀缺的東西比富足的東西擁有更高的價值。一般來說，我們更偏愛那些更難得到的東西。
和大多數現象一樣，稀缺性從線下興起。昂貴的餐廳用大盤子裝小份食物，以突出食材的稀缺性；名牌大學限制招生名額，以保持排他性。
這看起來很貴
但隨著科技企業變得更加成熟，數字產品變得更加精細，稀缺性很快走向了線上，現在稀缺性已成為增加吸引力最流行的方法之一。
目前人們已經習慣了在線上瀏覽時看到并期待某種形式的稀缺性，運用稀缺性已經不再具有競爭優勢，而是為滿足用戶需求而做的最基本的起點。
稀缺性變得流行起來，因為它非常有效并相對容易實現。而它如此富有成效的原因在于它結合了多種偏見：
如果我們不去購買某個稀缺性產品，這基本上意味著短期內我們將失去這個產品本身，而從長期來看，我們也將失去可以選擇它的自由。加倍的損失=加倍的痛苦。
通常，當一款產品需求變高時，這款產品會變得稀缺。一旦出現這種情況，就意味著有其他人在過去購買了這款產品，所以它一定是有價值的，我們也該抓住這個機會。
當面臨一個決定時，我們不僅會預期會發生的事件，還會預期我們可能會經歷的與之相關的后悔。決定現在就采取行動是我們試圖消除這種可能性的努力。
盡管稀缺性可以被應用于品質、體驗等不可量化的特征，但當評估對象是可量化的物品、地點等時，稀缺性的應用效果會更加出色。這就是像亞馬遜和Booking.com這樣的公司接受它并廣泛使用它的原因。
基于這些可量化的對象，稀缺性有三種主要的形式：
當對時間進行限制時，就會產生一個截止時間，讓人們在截止時間之前采取行動。當看到截止時間時，人們不確定之后是否還能獲得這個產品，除非他們現在就采取行動，但這樣就增加了壓力，從用戶體驗的角度來看，反而缺乏了同理心。
舉例如下：
有限或稀少的產品供給會讓人們覺得這威脅到了他們選擇的自由，進而激發他們做出反應，來對抗這種威脅并維持他們對資源的獲得權。
限量稀缺被認為比限時稀缺更有效，因為供給的結束是不可預測的，完全取決于需求而不是時間。
舉例：
它指的是限制對信息、群組或空間等功能的訪問。研究表明，潛意識中的抑制力會讓人們更重視那些受限制的功能，而不是那些不受限制的功能，因為排他性讓他們覺得自己很特別。
舉例：
如果稀缺性適合我們所設計的產品，那它可以優化用戶流量并對業務目標產生影響。稀缺性還會重構信息，并在有緊急需求時提醒用戶。
有些人可能會說，這迫使用戶做出了決定，但只要數字是真實的，還有什么其他的選擇嗎? 我們如果沒有及時告知用戶產品稀缺的情況，難道就不會造成他們對遺憾或挫敗感嗎？這樣我們難道不是正在創造糟糕的用戶體驗嗎？只要我們向人們展示的是事實，催促人們做決定看起來反而是公平的。
話雖如此，我同意一些企業會不道德地通過虛假庫存和會員資格來利用稀缺性，但是他們同樣也可以通過任何其他方式來達到其可疑的目的，而且從長期來看，這樣做總是會導致信譽喪失。
為避免爭議，下面是一些可以最大化利用稀缺性并真正提升用戶體驗的建議。
可以做的事情：
不可以做的事情：
稀缺性會讓我們對稀缺的東西賦予更高的價值，隨著時間的推移，這已經成為增加吸引力的必由之路。稀缺性的方法很有效，因為它結合了多種偏見(損失厭惡、社會認同和預期后悔)，并擁有不同的形式(時間、數量和訪問受限)。
稀缺性是有爭議，但這些爭議本不應該出現，因為我們并不能對用戶隱藏信息。如果你遵循一些簡單的規則，稀缺性可以幫你提高用戶體驗。
文章來源：UXRen 作者：David Teodorescu
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn