地圖作為記錄地形傳遞路線信息的載體，在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術的發展而變化，從石板、動物皮革，到絲綢、紙張。當互聯網走進千家萬戶，地圖也步入電子化時代。
相較于紙質地圖，電子地圖優勢顯著：更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖（后文簡稱地圖）的出現也影響著人們的出行方式，尤其當智能手機普及，我們可以隨時查詢地點、發起導航，再也不需要提前記下高速出口和轉向路口了。
滴滴擁有網約車、代駕、騎行、公交、自駕導航等眾多業務，是一站式出行平臺。而地圖作為承載出行服務的重要載體，橫向支撐著各業務線的發展。以網約車業務為例，調研結果顯示絕大部分乘客都會關注并使用地圖。
隨著各業務線對體驗的要求不斷提升，單一的地圖模式已經不能滿足業務訴求及用戶需求，需要進一步細分場景、精細刻畫地圖樣式，于是地圖的設計也變得愈發重要。
地圖承載的信息種類復雜、數量巨大，初期可能會找不到設計切入點。我們可以先了解下它的定義和實現方式，或許就能從中找到答案。
定義：地圖是依據一定的數學法則，采用地圖語言，經過制圖綜合來表示地球表面的圖形。
實現流程：
結合“從雛形到完整地圖”這一步流程的實現方式，進而可將地圖拆分為基礎層、策略層和感官層。幫助各職能角色找到對應切入點。
解構地圖后，我們不難看出，感官層是設計側需要關注的重點層級。
面對如此復雜的地圖信息，為了梳理出清晰的思路，我們會對地圖元素進行分類：根據數據的類別和呈現狀態，可拆分為點、線、面三類元素。
名詞解釋：POI, Point of Information的縮寫，即“信息點”。一個POI可以是一棟房子、一個商鋪。
名詞解釋：AOI, Area of Interest的縮寫，即“信息面”。指的是區域狀的地理實體，如醫院、小區等。
從定義可以看出，地圖是一種特殊的圖形語言，是以上所有元素的集合體。相比我們所了解的UI設計、運營設計，地圖有屬于自己的設計原則。以下為大家總結了一些核心的原則：
符合制圖學和公眾認知
地圖發展到現在已經成為了一門學科，我們會發現即使語言不通，拿到一張地圖時也能看懂，這是因為有制圖學和公眾認知在規范著地圖設計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學和公眾認知，大大降低了用戶的學習成本和記憶負擔，使地圖可以作為一種世界通用語言流通起來。
保證識別度
地圖屬于信息類工具，其上出現的元素均需清晰可識別，保證可讀性是最基本的設計原則。所以在設計時會限制顏色對比度、最小字號等，而具體規則會根據場景確定。
清晰有層次
地圖的層次清晰包含了兩個方面：信息主次清晰，視覺具有整體性。
信息主次清晰，地圖信息龐雜，沒有主次關系會影響用戶的讀圖效率。在設計時需要考慮元素本身的特點、重要性，可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關聯性，不同元素有差異性。同時，信息主次也會根據比例尺的變化有所調整。
視覺具有整體性，在滴滴的業務場景中，地圖通常作為最底層組件出現，上層還會有很多業務組件。因此在設計時需克制用色，既要保證地圖中各元素之間的區隔度，又要保證地圖整體與其他業務組件拉開視覺層級。這樣才能更好的突出當前業務模塊的重點，提升整體的使用效率和體驗。
細分地圖模式
地圖在各業務模塊中應用廣泛，用戶需求也不盡相同，設計時需要根據使用場景區分不同模式。以網約車場景為例，業務信息始終處于上層，地圖用來幫助用戶定位、快速發單。因此，網約車場景的地圖整體性強、色調偏冷、視覺層級后退，能更好的搭配網約車模塊的整體設計，保證用戶的操作效率。
具有品牌特性
品牌調性一直是滴滴設計層面非常關注的原則，品牌基因貫穿了所有產品，始終具有獨特的視覺風格。遵循品牌的視覺語言，使地圖可以更好的融合到產品中，保證了設計的統一性。
文章來源：優設 作者：CDX創意設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
組件說明：
實現 Result 結果頁。
效果展示：
實現的功能：
<template> <div> <el-result :item="item" @on-cancel="cancel" @on-submit="submit" /> </div> </template> <script> export default { name: "Result", data(){ return{ item: { title: '提交成功', submitText:"繼續填寫", cancelText:"退出應用", status:"success" }, } }, created(){ let item = this.$route && this.$route.query; if(item.status==='fail'){ this.item = { title: '提交失敗，請聯系開發人員', submitText:"重新填寫", cancelText:"退出應用", status:"fail" } } }, methods:{ cancel(){ dd.biz.navigation.close({ onSuccess : function(result) { /*result結構
{}
*/ }, onFail : function(err) {} }) }, submit(){ this.$router.go(-1) } } } </script>
| 屬性 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| item | 頁面展示的靜態內容集合 | Array | [] |
| title | 描述標題 | String | – |
| submitText | 提交按鈕文本 | String | – |
| cancelText | 取消按鈕文本 | String | – |
| status | 輸入值字段 | String | – |
| on-cancel | 取消按鈕事件 | Function | – |
| on-submit | 提交按鈕事件 | Function | – |
Result.vue
文件路徑：share/result/Result.vue
<template> <div class="cm-tx-c cm-mt-08 cm-p-02"> <el-image :src="item.status==='success'?successBg:failBg" style="width: 250px" > <div slot="placeholder" class="image-slot"> 圖片加載中<span class="dot">...</span> </div> </el-image> <div :class="item.status==='success'?'success-title':'fail-title'">{{item.title}}</div> <div>{{item.describe}}</div> <div class="cm-flex cm-jc-sa"> <div @click="cancel()" class="cm-btn-cancel">{{item.cancelText}}</div> <div @click="submit()" class="cm-btn-submit">{{item.submitText}}</div> </div> </div> </template> <script> import successBg from '../images/result-success.png'; import failBg from '../images/result-fail.png'; export default { name: "ElResult", data(){ return{ successBg, failBg } }, props:{ item:{ type:Object, default:{} } }, created(){ }, methods:{ cancel(){ this.$emit('on-cancel',''); }, submit(){ this.$emit('on-submit',''); } } } </script> <style scoped> .success-title{ padding: 0.4rem; font-size: 0.35rem; color:#15bc83; } .fail-title{ padding: 0.4rem; font-size: 0.35rem; color:#f25643; } </style> 6轉載 作者：杏子_1024 2020-10-19 09:24:19 分類專欄： # Vue通用組件封裝
扁平化網頁設計的表現大多體現在配色、字體以及布局排版方面，這三樣結合得當都能制作出漂亮的網站。在國內很多企業網站的布局架構幾乎是一樣的，最多就是LOGO和一點顏色變化，看不出什么特色和創新。
作為設計師，應該多花點心思在創新上，比如網頁上的布局，其實它是可以變化多樣的，正如今天為大家分享yi xie布局排版好看的網頁設計作品，大家可以參考這些布局的設計，從中獲得一些靈感。
附加精美流程圖設計與賞析。
（以上圖片均來源于網絡）
（精美流程圖設計）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
ui界面設計之網站設計案例欣賞(一)
-設計過程中，共情（同理心）的一些觀點和心得，希望能夠讓更多設計師對這些軟能力有更好的提升和應用，歡迎前來交流探討
————
在體驗設計的過程中，如果不能對設計對象有更深入的了解，設計思維就無法開始。而用戶對產品持有的觀念、態度甚至意見并不一定會表現的很明顯，這需要設計者更加主動的與用戶進行互動去構建共情。這可以使得你能夠更加了解他們的需求、想法、情緒和動機。好消息是，你能掌握多種方法來與用戶構建共情去獲取更多信息。并且當你有足夠的“正念”和經驗時，你也能成為共情他人的專家。
“正念”：有目的的、有意識的，關注、覺察當下的一切，而對當下的一切又都不作任何判斷、任何分析、任何反應，只是單純地覺察它、注意它。
共情(Empathy)，也稱為神入、同理心，共情又譯作同感、同理心、投情等。 由人本主義創始人羅杰斯所闡述的概念，卻越來越出現在現代精神分析學者的著作中。不管是人性觀還是心理失調的理論及治療方法似乎都極為對立的兩個理論流派，卻在對共情的理解和應用上，逐步趨于一致。共情似乎為現代精神分析與人本主義的融合搭起了一所橋梁。
我們常說的感同身受、換位思考、同情心、設身處地、將心比心這都是共情的一種描述。Empathy一詞源于德語“Einfühlung”，意為讓人們跟藝術品融為一體，比喻走進一件藝術品的奇妙體驗，因此國外常常會看見“站進別人鞋子里去”的共情比喻——（Stepping into their shoes as the saying goes, in order to gain a deeper understanding of their situations.）意為正如俗話所說，站在他們的立場上，以便更深入地了解他們的處境。
對于“共情”我更多的理解成是兩個或多個載體之間的一種共識一種情緒共鳴，然后再到行為跟思維上的影響。但實際上發生完全的共情是不可能的，有時連我們自己也會做一些無法理解的迷惑行為，并且客體是多樣化的，可以是跨物種的，跨維度的。而我們要做的就是在工作中定義共情的有效范圍，盡可能的與目標用戶產生共情以了解更多信息或需求，然后去定義和構思新的需求與設計。共情很重要，但它不是設計工作中的全部，有效而不要過度的使用也很重要。
共情載體的多樣化可以是你通過一幅畫感受到了作者的情緒表達
十字路口聽見火車的鳴笛聲，從而感知到危險的信號
當你傍晚處在城市生僻的角落，打開地圖軟件，亮起了回家的導航
我們身邊的共情無處不在，正是這些共情使得人與人之間的情感更豐富，當然也是因為人類有強大的表達能力。通常當客體情緒在表達出來的情況下，主體是可以更容易得到共情的。所有當主體更專注的去感受客體的情緒表達時，能夠使達到共情變得更迅速。
常的的共情場景；
身處于電影院，看到某一段感人的情節，很多人開始淚盈眼眶。
朋友講述著自己的不幸，你聽完后的同情與表示理解他。
看著熟睡的嬰兒，人們自覺的保持了安靜的氛圍。
準備上樓，當眼看電梯門就要關上時，里面的人幫忙打開了電梯門。
正在寫報告時，突然的停電讓你措手不及，也讓你的同事措手不及。
與伙伴開黑游戲，共同取得勝利那一刻。
.....
以上都是一些生活中常有的共情場景。通常當我們與其他客體得到共情時，往往我們能夠更清楚客體傳遞的信息是什么、需求是什么，這完全可以應用到我們的設計場景中幫助我們獲取更多的有效信息。
————
如果你想要更了解你的產品用戶，從而讓你的產品更好的服務用戶得到更好的體驗口碑，那么體驗設計師如果對目標用戶沒有更深入的了解，那么產品設計中的各種設想都是沒辦法決策的，甚至都難以測試和驗證，這對產品研發一定是一個危險信號。而共情則能幫助我們洞察用戶需求和定義問題，所以共情在體驗設計中顯得基本且至關重要。
產品原型與交互界面時常是有所出入的，其原因在于前者更關注產品本身框架與盈利點，而后者更注重整體的用戶體驗的細節。共情用戶需求，以及思考商業盈利與用戶體驗之間平衡的點似乎是無法脫離共情應用的。這便是共情應用的一種體現，也是共情價值與設計賦能的體現。
一直以來在產品營銷廣告中，始終存在一些流氓的交互方式讓用戶苦惱。往往更加注重和尊重用戶感受可以更好的提升用戶的好感與使用體驗，這便能夠使產品與用戶之間的感情升溫贏得口碑。
在構建產品業務框架時，大多可能會出現以公司服務資源為中心的構建方式，但同時這種由內而外開發方式會為產品帶來更多的弊端（往往產品投入使用后，會出現超出預期的問題）。嘗試去站進用戶的鞋子里去，或者找來目標用戶甚至是相關的專家來做咨詢，減少研發迭代的彎路。
用戶畫像是體驗設計中常見的一種設計工具，它能夠幫助產品定義目標用戶，能夠有效用于產品設計決策或者洞察用戶需求等。一個好的用戶畫像是基于真實用戶的，它不是胡編亂造的。畫像在于形成多組可供參考的角色材料，這有利于跨團隊跨層級之間快速實現共情，達到業務目標的統一性。因此一組目標用戶畫像能否幫助團隊快速實現共情是一個重要的衡量標準，而不僅是一組人口調查數據。
故事的元素通常會更豐富更有趣味，用故事敘事更能提升用戶的興趣和關注，這能便于構建共情。因此當你發布測試任務或者撰寫研究報告時，都可以加入背景故事或用故事敘事，便于對象更容易理解和共情，你甚至可以用筆繪制故事版，像四格漫畫一般，因為用圖傳達概念或信息更容易讓人記住或回想起來，并且當你用這些方法時，自身也能加強理解。共情不是單向傳遞的，不要高估對方的理解能力，讓你的信息更簡單明了的傳遞也是重要的共情應用！
在與目標用戶進行互動的時候，通常會借助電子設備幫助記錄這個過程，目的是為了更仔細的觀察和聆聽，并注意到被忽略的信息。就像一種正念，我們會帶有目的性的觀察目標活動，并且不會進行干涉，同時不對當下發生的一切提前作出任何結論、分析或判斷，直至這個過程有了一個里程或結果，我們再將收集到的各種信息放在一起去思考。傾聽和觀察是人與人之間互動的根本方式，相對仔細完整的傾聽與觀察可以獲取到更加有效的共情，而片面的則可能產生共情偏差。
共情在體驗設計的應用中很廣泛也很重要，甚至還延展了許多幫助共情的工具，這些都是為了讓設計者能夠更好的了解市場、發掘用戶需求、甚至找到新的產品機會，最終幫助企業解決產品實際問題。有時在共情工作中，我們就像一個老中醫一般，對患者望聞問切。 一旦有了問題，就應該及時使用適當的方式去共情目標對象，定位問題所在，并制定解決方案。
————
為了尋求更加有價值的目標用戶進行共情研究，我們會對共情的目標進行范圍篩選，可以是根據某些用戶習慣、常使用的產品服務、某個場景、也可以是社會群體(例如學生、司機)、甚至可以是動植物(例如寵物類產品)。所以第一步你要根據需求去制定共情目標的篩選條件，然后一點點縮小和鎖定有效的目標群體，再開始招募、溝通或是進行其他下一步工作。我們沒辦法跟所有目標用戶構建共情也沒有必要這樣做。通常五個左右的用戶就能夠反映出大多數問題，并出現重疊的反饋。
伴隨產品的發展過程用戶也在時時發生微妙的變化，在跨度大的迭代中，嘗試與產品潛在用戶或極端用戶進行共情研究也是很有價值的。潛在用戶的需求通常存在著更多的不確定，這也意味有發現新機會的可能。而極端用戶通常會有一些更刻薄的需求，這些需求可能不是主流，但也有主流發展的潛力，不過至少這些改進會為極端用戶帶來驚喜。這就像是在公交車站下安裝一臺自動售賣機，不是大多數人的需求，也不是當前的主流趨勢，但卻能夠為部分乘客帶來方便或驚喜，我們不能忽略這些少數。
在體驗設計的過程中，我們需要與目標對象構建共情時，一定是有目的有意圖的。以使用性測試為例，往往我們都會設定一些產品測試任務和目標給用戶，再進行觀察和共情。這也將允許我們能夠在同一個或相似的場景事件中發生共情，這樣才能夠獲取到更真實有效的共情。以一個吸塵器產品為例，如果對方是在地毯上測試的，而你是在木質地板的環境下去共情的，那么共情結果肯定是有所出入的。所以構建一個共情目的甚至是環境是有效共情的一個重點之一。
構建共情會受情緒影響，在共情前有必要去除負面情緒影響，不要為共情構建帶來更多的阻力，另外則是仔細的傾聽和理解。這就好比我們要專注學習，除了認知聽講，腦子里一旦充斥著其他負面情緒或思維影響，就很難完成專注學習的目的。同理，在用戶幫助我們測試產品或訪談時，我們也要首先做好彼此的心理建設，去除主要的負面情緒甚至去除不利的環境影響因素，例如緩解用戶緊張不安的情緒，找一個素一點且安靜的測試房間等。
圖表、筆記、錄制設備是幫助我們共情的最好工具，在不同的場景下，這些工具能夠幫助我們更好的收集信息，并且便于我們思考和共情。我們在短時間能記住的信息是有限的，這也是為什么我們會用到7±2這種定律去控制信息量的原因。以用戶體驗地圖為例，在記載用戶體驗產品的過程中，便是一種很好的共情輔助工具，它能夠按照使用步驟或階段記載用戶使用情況和情緒變化等反饋。
在我的理解中，共情由四個主要的因素影響來構成。
一、尊重：受到不同的環境跟經歷影響，要去準確理解一個人是很困難的，哪怕是多年的夫妻也是如此。所有首先要做到尊重，消除任何偏見，不要帶有批判或評價的心理。然而做到足夠的尊重也并不容易。
二、觀察：觀察是獲取客體傳遞信息的主要途徑，不能掌握足夠的信息是無法做到共情的，片面的或者假設的信息都將影響到正確的共情。
三、思考：對客體的信息與觀念進行思考，嘗試理解客體的各種行為根因以達成一致的認知。
四、融入：將自己感受到的情緒與認知代入到共情對象的行徑中，去仔細揣摩，以洞察用戶的行為、感受、需求、思維方式以及與產品之間的關聯，就像靈魂附體一般，以達到更深入的共情來定義問題。
最后便是共情結果如何應用到設計之中，將共情結果賦能到產品設計也是共情工作的價值所在。通常這套流程是共情->定義->構思->原型->測試，在這個整個過程中隨時是可以返回到前面其他階段中反復打磨的，而共情作為一個起點也揭示了其重要性。我們一切的共情工作皆為了能夠優化和解決產品的問題，使得產品體驗能夠更好，這是我們在體驗設計中不斷去共情的初衷。
————
以移動端的產品來講，現在好的共情設計真是百花齊放，這正是創新技術與共情設計發展的好趨勢，也是敢于創新探索的好機遇。這里我們放三種典型的欣賞案例說一下；
一、智能便捷型：給用戶提供更加智能便捷的服務功能，使得用戶能夠獲得更輕松流暢的服務體驗；
二、人性化類型：通過大數據與技術手段，為用戶提供更加人性化的服務方案，提升用戶好感度、依賴性，加強產品口碑與體驗；
三、情感關注型：有一些屬于情感關注類型的共情設計，通過獲取用戶的場景信息或其他數據共情用戶情緒，并給予用戶合適的關愛、幫助、引導。為用戶帶來軟件有情感，品牌有溫度的體驗；
在體驗設計中，情感化設計一定會是一個值得深入方向，我們應該關注到不同場景下用戶會產生的情緒變化，為用戶提供更加走心的服務體驗，為產品收獲更多口碑。當然，在產品完善的這個漫長過程中，我們也要隨時甄別我們所做的事情是否對用戶和企業有更高的價值。在研發資源有限的情況下，劃分這些設計點的權重，合理分配研發資源。
————
能夠對共情構建產生影響的認知偏差挺多的，這些認知上的偏差會影響到共情的正確性，不僅是構建共情的主體還是客體都會有影響。國外產品設計師Abhishek Umrao在UX MAGAZINE（https://uxmag.com/articles/6-ways-psychology-affects-your-design-work）上整理了六個關于影響UX體驗設計的認知偏差可以了解一下。這里圍繞構建共情補充了一些相關認知偏差，希望能夠在構建共情的工作中再少一些坑；
共情偏差是指由于經驗、預期和態度存在差異，我們很難準確地去體會他人的感受。這一點就是前文提到的我們無法做到完全共情，我們對共情的概念要有一定認知。
建議：通過技巧去彌補，減少認知偏差。多一些耐心的聆聽，減少偏見和執念，嘗試思考如果是TA該怎么辦？
情緒會對我們的認識和行為產生影響，而負面情緒產生的影響則是最大的，這會對我們的共情判斷產生偏差，所以前文我們會提到消除情緒噪點的概念。
建議：盡可能的維持中立或積極的情緒狀態會更有助于共情工作，但至少是消除負面的情緒影響。
觀察者常常會不自覺地扭曲影響因素或數據，以得到預期結果。這就好比在用戶進行產品測試的期間，向你咨詢了意見，而你很有可能不自覺的給出你的期望或者一些暗示，這會對目標產生可暗示性偏差(Suggestibility)，使得目標想到的內容往往會被扭曲。
建議：1. 對面向用戶的測試材料進行自查糾正，盡可能處于中間立場，不要干擾測試結果。2. 在主持訪談或用戶測試現場時，對于用戶的主動咨詢或交談中不要解釋過多，讓用戶理解其定義跟概念即可，說的越多越是容易出現觀察者預期效應。
基于自身的認知或經歷，有時做出判斷會過度依賴個人直覺，而不去收集更多有益于做出準確判斷的證據。這一現象常常表現為產品或項目經理的一拍腦袋的決定，但是往往因為過度依賴直覺而忽略了實際的場景差異等。
建議：對于不能直接給出有效證據的決策，要敢于質疑而去追究其正確性。當使用參考信息時要思考兩者之間的差異性?？傊灰獞{借事件的相識性而忽略差異性，最終憑直覺決策。
人們會過度倚重某些權威的意見，而忽視事情發生的實際背景。以品牌的影響力為例，兩種不同的任務實施程序，通常人們會認為大品牌的方案更好更值得信賴，而忽略了一些體驗細節。
建議：對于相比較的軟件測試任務，我們有時會弱化甚至隱匿品牌信息。其目的便是在比較時減少這些權威偏見，不論是正面的還是負面的，這些都會影響用戶判斷，所以在特殊的場景研究下，請注意這一影響是否干擾結果。
人們會過度依賴先前的經驗，把一些極端事件看作正常的，認為事情很快會過去。以用戶測試為例，當6個人都正常完成了測試任務，僅有一人出現出現問題時，這是一個概念問題，我們不能忽視這僅有的一個用戶，更不能安慰自己這只是一個特例。
建議：上文有提到嘗試與極端用戶進行交流，其實道理類似，問題純在即合理，我們有必要注重和研究這些極少數，它們極有可能帶來新的機會點。
人們高估自己的個人心理狀態被他人知曉的程度的一種傾向，時常表現為你以為別人都明白了你的意思，實際上別人明白的還遠遠不夠。與“知識的詛咒”這一偏差的差別在于，前者是我以為對方明白了實際對方還有諸多不解，而知識的詛咒是你無法給對方進行可理解的解釋，有著文化背景或認知的障礙，實際上這兩者偏差概念都會影響到共情工作。實際辦公中透明度錯覺時常體現在需求表達、文檔解釋、跨部門溝通中，往往你以為你說的已經很清楚了，但在實際研發中卻會體現出諸多差異。
建議：適當的了解其他部門的專業文化，便于更好的解釋給對方。組織好信息框架，簡單易懂的信息框架易于對方理解，例如書本的目錄大綱、信息的分類等。跨團隊或部門的PRD（產品需求文檔）盡可能的減少專業術語的應用或者進行注釋，文檔的目的不在于體現多專業而是更加易懂的傳達信息。
————
研究用戶從觀察自己開始。每個時代的人都會有不一樣的特質或者某些現狀，在這個大環境下，你會發現與同齡人之間有很多相似點，那么加強對自己的行為理解，是不是就等同研究了這些同齡用戶的共有特征？這些特性是否會對你的產品使用有關聯？帶著這些特性去體驗你的產品時，是否會發現新的機會點？
參考文獻：https://uxren.cn/?p=68537#影響UX設計的6個心理偏差
參考文獻：https://uxren.cn/?p=68382#如何構建同理心
文章來源：站酷 作者：泡泡bing
到底什么是共情
百科
通俗含義
身邊的共情
共情對體驗設計的作用
以交互設計為例
- 電商的界面設計：
- 移動端常見廣告推廣界面：
- 組織產品功能架構時：
用戶研究中的共情應用
- 用戶畫像：
- 用故事去描述：
- 仔細傾聽和觀察：
小結：
如何在體驗設計中構建共情
制定共情的范圍
- 在不同研發階段嘗試與特殊的用戶共情
帶有目標的進行
情緒降噪與傾聽
合理的工具輔助
構建共情的要素
共情為設計賦能
好的共情設計欣賞
小結：
共情構建中的認知偏差
1. Empathy gap（共情偏差）
2. Negativity bias（負面情緒偏差）
3. Observer-expectancy effect（觀察者預期效應）
4. Automation bias（直覺偏誤）
5. Authority bias（權威偏見）
6. Normalcy bias（正常化偏誤）
7. Illusion of transparency（透明度錯覺）
趣味思考
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
的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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn