文章來源：快資訊 作者：曼巴怡君
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一款APP最先呈現在用戶眼前往往是從引導頁開始，在這個情況下，一個APP設計的好壞、使用否能吸引用戶可以在引導頁的設計上有第一感知。想讓APP設計更加有趣，引導頁設計需要遵循以下幾點。
②圖片信息的傳遞。AP引導頁設計的圖片信息，以全屏的人物圖片為主，在不同的圖片中，用戶對于人臉和具有動感的圖片比較容易關注，而且通過圖片可以通過對用戶視覺的刺激使其很快的產生聯想并產生行為，給予用戶很好的代入感。
色彩是讓用戶與界面生交互的關鍵性設計元素，用戶會對引導頁的界面色彩留下很久的印象，是因為色彩是視覺傳遞情感的最直觀因素，也是用戶視覺中最敏感的部分。其中“撞色”搭配就是一種極其吸引用戶眼球的色彩運用方案。
②對比色搭配的形式。對比色是人的視網膜對色彩平衡的作用，是人通過視覺感官而產生的一種基本的生理反應。對比色的搭配不同于完全對立的互補色，同時處于相對對立的區域中兩大類色彩之間的搭配。對比色搭配在24色相環上120度至180度之間的兩種顏色之間的搭配。
①規范式界面布局。規范式界面布局通常以大面積的留白為主，通過對界面的分割，讓信息元素成一種強烈的視覺聚焦，使用戶對界面產生參與感。
②自由式界面布局。自由式界面布局一般展示的內容比較多，在多個界面的APP引導頁中闡述同一個訴求，每個界面的關系通常是并列的關系，確定界面文字、圖形元素的最大值和最小值，讓視覺聚焦在一個體塊中，再從這個體塊中對信息進行排列組合，引導用戶的視覺流向。
③串聯式界面布局。串聯式界面布局要求引導頁展示的內容要簡明扼要，界面中所有的元素都要按照一定的順序有機的排列，并且頁面之間要有一定的邏輯關系。
文章來源：快資訊 作者：衍果設計
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在互聯網產品日趨成熟的今天，APP同質化越來越嚴重。
而一個設計精致APP不應漏過任何一個細節，美觀、可用和高效的界面設計都需要花費大量的時間從細節上去打磨，并從多方面鉆研并創造出打動人心的UI/UE設計。
在這里，小易為大家總結了10個簡單直觀的提升設計感的小細節，一起來看看吧~
1、文本顏色構建層次
文本單純使用字體大小對比，強調的感覺往往不夠濃烈，我們可以嘗試結合色彩來營造更好的對比效果。
通過使用顏色的深淺，為元素賦予不同的重要性，建立視覺上的層次結構。
甚至可以采用兩到三種顏色來獲得對比效果：
主要內容使用深灰色（諸如標題，但是不要用純黑）；
次要內容使用灰色（比如商品介紹）；
輔助性內容采用淺灰色（比如發布日期）
2、統一色調
設計時避免用過多的顏色，選擇一種基礎色，再調整色調和顏色深淺來增加均衡。
如果項目允許，必須使用固定的色板，那么可以通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。
3、干凈的陰影
陰影可以增加元素的深度，引起用戶的注意力，同時也能增強畫面的視覺層次感。
相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，輕柔的陰影會讓畫面更精致。
如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，從而使設計變得不精致。
4、個性的圖標設計
大多數App都是默認灰色，選中填充品牌色，這樣的設計太普通，太常見了。
要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，也會增加用戶的體驗感。
5、Tab的設計感
Tab是App設計中最常見的控件之一，它源自Material Design的設計規范。
Tab的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態。
可正因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。
例如蝦米音樂的Tab選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的Tabs就被創造出來了。
6、統一設計元素
在App中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。
通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。
7、符合產品氣質的字體
選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。
雖然默認字體可以滿足大多數App 的設計需求，但系統字體并沒有什么特色，會喪失App的品類感。
例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。
8、第三方圖標風格統一
第三方圖標也是UI設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計。
一個設計精致的App不應漏過任何的細節，我們可以以自家App的圖標風格為依據，對第三方圖標進行優化設計。
9、圖片中尋找色彩
App中優美的圖文設計非常重要，能帶給用戶極佳的視覺享受。
我們經常看到文字疊加在圖片背景上的設計樣式，為了減少圖片背景對文字的干擾，通常會疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這種設計過于俗套。
我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。
10、卡片式設計
現在的UI界面設計中，卡片式設計已經是一種非常常見的設計形式。
它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率。
文章來源：快資訊 作者：衍果設計
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
無論是設計網頁還是海報，背景圖片都是最常用、也最能體現當下設計趨勢的一種設計元素。在設計APP 的時候同樣是如此。過去的10年當中，用戶的品味發生了不小的變化，而現在，整個設計趨勢上，似乎正處在一個關鍵的轉折點上。
在我們所能觀察到的諸多設計當中，淺色的背景是當之無愧的主流。淺色背景本身就不太可能喧賓奪主，讓視覺主體更加突出。而如今，我們逐漸發現，背景還具備補充主體的功能，并且這種補充是潛移默化的。背景的功能性其實還可以強化，這種思路可以在如今的APP 界面設計當中應用，讓整體設計更加平衡。
如今的UI設計師大都明白在背景中融入元素來吸引用戶的眼球，提升產品調性，提高內容的可讀性。而這也促使圖片、插畫、色塊等元素在背景當中發揮了更大的作用。
分屏式設計并不新鮮，它是一個存在了很長時間的設計趨勢了。在桌面端的屏幕上，分屏式設計一直都很有效，寬廣的屏幕讓設計師有足夠的施展空間，但是在移動端上則是個挑戰。
在 UI 設計師們找到了解決方案，對比色是增加視覺吸引力的最佳方式。
在 Tubik Studio 的這個設計案例當中，設計師使用不均等分布的色塊來分割屏幕，同時使用白色背景區塊來承載主體內容，避免被背景色彩干擾。設計師充分利用了對比色的對抗性，以及和白色之間的對比度，功能完善，但是有趣又漂亮。
雖然在背景圖片中疊加各種圖形化的元素聽起來很奇怪，但是確實是逐漸流行起來的一種背景設計玩法。不過，這存在一種風險，就是如果疊加太多的圖形化元素，會讓整體看起來過于雜亂。盡量在豐富視覺和制造視覺污染之間找到平衡，最終的設計效果，能夠給你帶來意料之外的優質效果。
雖然手機越來越大，但是屏幕空間依然很寶貴。通過疊加一些特定的圖形元素來創造視覺深度，給用戶以空間感。
這種背景設計的另外一個好處在于，你可以讓整個UI顯得更加富有視覺吸引力。在設計的時候，需要注意的是，要保持元素之間的一致性，確保不同的元素在屏幕上呈現的時候，仍然保持協調。
使用整張圖片作為背景，一直被UI/UX領域的設計師所爭論。對，你沒看錯，這個事情一直存在爭議。有人非常喜歡使用圖片背景，有人則完全無法接受這種呈現方式。
但是撇開個人喜好，趨勢上，這種背景運用方式還是越來越流行了。在APP的UI界面中，如果你能靈活自由地使用全屏背景的化，對于接下來的設計肯定是有所助益的。
圖片所呈現的信息量當然是毋庸置疑的，更重要的是如何貼合品牌和氛圍，呈現出應有的氣場。
當然，最核心的技巧，是在于透明度的控制，和內容框的設計。為了避免信息和背景之間的對比度不足，合理的方法是使用內容框將前景的元素承載起來。而為了避免背景圖片喧賓奪主，還可以借助透明度的控制，來確保背景圖片更加平滑自然，不會影響到閱讀和使用。
漸變色在幾年前回歸之后，在設計當中的運用范圍越來越廣。漸變色不僅賦予設計更加強烈的個性，而且能夠和用戶之間產生足夠的情感共鳴。
你可以使用漸變色來營造調性，創造對比，甚至還可以借助漸變色才來作為視覺線索和引導。比如當你在背景中使用藍色的時候，可以通過深淺漸變來創造方向性，引導用戶向特定的地方瀏覽。
但是，漸變色背景流行起來最重要的原因還是它的情感共鳴的能力。許多 UI 設計師已經意識到心理因素在移動端設備中的巨大影響，能否喚醒用戶的情感是關鍵。
漸變色背景的設計玩法有很多，變化幅度的大小，方向，對比度和亮度的變化差異，都會帶來不同的影響。當然，漸變背景同樣必須遵循一個原則，那就不能喧賓奪主。在設計的時候，同樣可以借助透明度的調整，來降低它和CTA按鈕之間的對比度。
插畫師可以根據需求更加自由地繪制足以滿足不同需求的插畫，獨特，個性，定制化。不過，想要創建足以代表企業、團隊、產品或者用戶角色的插畫，并不能憑空創建，而是需要一個研究過程，通過調研和分析，才能提出需求，再做執行。它是一個機器人，還是一個更加擬真的角色？又或者使用動物擬人化的形象更合適？
許多設計師更加傾向于在APP中使用自定義插畫，因為這樣更加自由輕松地達成各種目標，從新用戶引導，到提供教程。
幾何圖形本身是非常基礎的元素，它們的含義和感覺非?；A，也具有普世性。雖然它們很簡單，但是在UI 設計中非常強大。單一的幾何形狀是簡單的，但是結合不同的效果、不同的組合，即使使用簡單的幾何形狀，也能夠發揮出多樣的變化。
當然，具體怎么運用幾何圖形，還要看你的UI界面上，有哪些東西，作為背景的幾何圖形和 UI 中的主體元素之間，空間關系要怎么控制，怎樣保持優雅簡潔，確保品牌信息的傳達。
就像 UI 界面中其他的元素一樣，背景同樣值得關注和規劃。最重要的是，你想表達什么，傳達什么樣的信息，想借助整個UI 界面來實現什么樣的功能，規劃好了才能更好地呈現內容。
背景的選取之所以會成為UI設計趨勢的關注點，很大程度是因為UI 和UX 設計的關注點開始越來也深入到設計的方方面面，大家考慮問題也需要越來越細致。
文章來源：快資訊 作者：衍果設計
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近很長時間都在做招聘管理系統的大改版，管理系統用戶角色眾多、功能邏輯復雜、使用場景多樣化，如何做到用戶體驗的突破？
在 ToB 領域，不能只關注中間的設計環節，而是需要參與到整個項目的流程中，圍繞著客戶服務的全流程，包括 理解業務-尋找機會-制定策略-設計原型-效果驗證 進行全鏈路的體驗設計觸達。
理解業務，主要是理解業務邏輯、用戶角色、使用場景；
1、業務流程圖
通過客戶現場訪談、問卷調查、用戶行為數據分析、競品分析、查閱行業報告等方式，梳理業務流程的關鍵節點，這些節點也就是我們后續設計的關鍵步驟。
2、用戶角色
梳理出業務流程之后，從業務流程中可以找到對應的用戶角色。招聘平臺的用戶角色包括招聘專員、招聘經理、部門主管、面試官、應聘者、獵頭、企業員工等，最主要的用戶角色是招聘專員。
通過角色畫像，減少我們在設計過程中的盲目設計和閉門造車，時刻以用戶的視角和感受來設計。
下圖是“招聘專員”的用戶畫像
2、場景分析/用戶故事
場景化設計的定義：根據特定時間、使用情景、及用戶的特性，進行定制化的設計，使用戶按照產品設定的路線快速完成目標盡可能的給予用戶驚喜與感動。
可以應用“體驗設計畫布”來幫助我們更好的梳理場景。
主要是從操作流程、內容反饋、信息傳達、視覺表現、情感關懷的角度來尋找交互和視覺的優化點；
「操作流程」是否高效
去除冗余：去掉哪一步驟仍能跑通流程；預判操作：下一步驟是否可預判，提前幫用戶完成；自定義操作：高頻操作是否允許用戶自定義從而減少操作步驟；
2.「內容反饋」是否合適
符合預期：每一個操作后呈現的頁面或信息內容是不是用戶想要的；
一致性：不同界面同一個操作或樣式，操作后是否呈現一致的內容？
輕量化：采用更輕量的內容呈現方式，是否依然符合場景，減輕操作成本；
3.「信息傳達」是否清晰
邊界清晰：能夠明顯區分各模塊或信息，遵循格式塔原理；
易獲取：主要模塊或信息放置在容器邊界的左上部分，因為用戶閱讀習慣從左到右、從上到下；
結構簡潔：同一層級信息數量遵循7±2原則，若超過則考慮重新整合信息結構，或是提供更高效的信息獲取方式；
4.「視覺表達」是否明確
減少認知負擔：是否有信息內容可用視覺元素代替或輔助，規避用戶閱讀文字加重認知負擔；
表意清晰：通過視覺元素能夠快速了解信息大意，而不產生歧義；
降低疲勞：界面視覺是否容易加速用戶的疲勞感；
5.「情感關懷」體現溫度
正向情感：文案是否傳達了正向情緒，避開負面情緒；
貼近日常：信息呈現貼近日常習慣，非必要不使用專業術語；
積極提供方案：當出現異常情況時，是否有解決方案替代異常提示；
1.「操作流程」優化操作路徑
2.「內容反饋」更加人性
3.「信息傳達」信息整合，清晰高效
4.「視覺表達」一致、易獲取、動線合理
5.「情感關懷」體現溫度
經過前面的理解業務、尋找機會、制定策略之后就可以進行原型設計了，考驗大家設計功底的時候到了，這里不再贅述。
1.驗證維度
2.驗證方式
我們主要通過系統功能埋點、系統NPS信息收集、客戶現場和電話回訪、內部客戶外部客戶問卷調查等方式來收集用戶反饋信息。
3.驗證結果
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信很多人在開車時都用過手機或車機上的地圖導航，而今天 Alibaba Design 想和大家分享的就是大家常用的地圖導航的換代升級版——車道級導航。
先來說說車道級導航有哪些不一樣。相比于傳統地圖，車道級地圖導航在信息精細度、定位準確性、動態信息豐富度上有大幅提升。比如，車道級導航能清晰顯示道路上的虛實標線、自己的車行駛在哪條車道上，還能在地圖上看到車身攝像頭和雷達檢測到的周圍車輛、錐桶、防撞桶等。
車道級導航在智能汽車的駕駛場景中，有兩方面的用戶價值：
目前，高德已經發布搭載了車道級導航能力的量產產品——高德第三代車載導航，已在小鵬P7車型的NGP*自動導航輔助駕駛系統中落地。
*NGP 是高級智能輔助駕駛系統，可以在全中國大部分高快速道路上進行自主并線、超車、駛入匝道等。
車道級地圖導航承載的信息與傳統地圖有明顯差異，如何將這些信息加工轉化為愉悅的駕駛體驗，就是設計師要解決的問題了。下面分享一些我們在車道級導航設計中的思考。
車道級導航應用于智能汽車的人車共駕場景，需要同時考慮用戶的駕乘體驗和車企客戶的設計定制訴求。包含三部分內容：
車道級地圖中所呈現的數據元素對比普通地圖更多更復雜，而且在不斷采集更新中，但大致能劃分為三類：動態識別元素、高精道路元素以及場景氛圍元素，如下圖所示。
我們要做的設計，就是將以上這些數據元素以三維視覺化的方式進行呈現，最終服務于駕駛場景中的駕駛者。我們總結了幾個重要的構建原則：
「 清晰的空間關系展示 」
數字地圖的優勢在于能清晰展示復雜世界的空間結構、空間關系。空間關系的清晰表達能讓駕駛者更了解當前所處道路環境，心里更有底，這對于開啟自動駕駛的車輛尤為重要。
空間關系表達的關鍵在于表現道路的上下層級和聯通關系、坡度變化，加上仿真的車輛及視角變化，實現高架穿橋而過、相機視角由遠及近的場景展示。
空間關系表達的另一重點在于道路與周圍環境的關系，比如道路與山脈，通過高精地圖可以看到遠方道路的彎曲路形，提前減速，提升山路駕駛安全性。
「 簡約元素風格提煉 」
地圖設計時整體風格選擇需要克制，既要保證地圖中各元素之間的區隔度，又要保證地圖整體與上層業務組件拉開視覺層級。這樣才能更好的突出當前需要駕駛者注意的重點元素，提升整體的信息傳達效率和體驗。
既要讓駕駛者能快速識別地圖中的元素是什么，又需要讓畫面整體有序，主次明確。所以我們使用介于寫實與抽象風格之間的簡約風格，既能寫實展示元素的關鍵特征，整體又不復雜。
對于單個元素的設計上，主要是通過元素現實中的關鍵特征提取，去掉一些不影響認知的細節，讓駕駛者一眼就能明確這個元素是什么。
「 動靜風格統一 」
靜態元素是由高精地圖生成，而運動元素則是車輛傳感器識別的車輛、交通設施等。地圖上的這些元素的仿真表達，能夠反應車周圍的實時動態環境信息，增強駕駛者對車輛感知能力的信任。
對于這些動態識別元素，我們推薦客戶在設計風格上與地圖相呼應，在保證識別性的前提下，兩者風格盡量統一，形成整體感。
下面是客戶設計團隊制作的動態元素模型：
對于行人、自行車等出現人體的元素，我們通過循環的骨骼動畫原地播放，以及傳感器確定的運動軌跡，來模擬對應的人體運動。
地圖畫面是由渲染引擎程序的攝像機拍攝出來的。攝像機的位置、俯仰角、投影中心、裁剪區域等都會影響用戶看到的畫面內容。
「 遠近兼顧的視野 」
為了讓駕駛者有全局的掌控感，車道級地圖的攝像機視野需要兼顧眼前和遠方的信息呈現。在地圖上既可以看清眼前的車道標線、周圍的車輛，又可以看到 500 米甚至一公里后的路形變化、高速出口等。
「 自動駕駛動態視角 」
我們與客戶設計團隊一起，對自動駕駛場景拆分做了多次討論，最后決定對車速和并線這兩個變量設計動態視角。
在自動駕駛場景中，攝影機與自車的距離會隨著車速大小在一定范圍內變化。當車速較慢時，拉近攝影機與自車的距離，以強化顯示自車周圍的動態信息。當車速較快時，拉遠攝影機與自車的距離，獲得更遠的視野和足夠的預判時間。
自動駕駛的關鍵場景是車輛自動并線。為了強化駕駛者對車輛并線決策的感知，在汽車進入并線等待狀態時，相機的投射中心會移動到目標車位。
「 車道級導航動態視角 」
與自動駕駛相對的是人駕駛的場景。按與下一個轉向路口的距離遠近，人在駕車導航時可抽象為 4 個階段：順行、預判、確定、動作。
不同的駕駛階段需要不同的攝像機視角，來強調最相關的信息。例如：當下一個轉彎路口在幾公里以后時，駕駛員對幾公里范圍內路況的需求要強于對前方路口位置的需求；當臨近路口時，駕駛員對前方從哪里轉彎、走哪條車道的需求又會強于對幾公里后路況的需求。
下面詳細介紹一下臨近路口時，攝像機視角的動態過渡策略：
過程 1：根據用戶位置和交通情況，提示用戶并線，此時將攝像機拉近，畫面從 2D 地圖視野平滑放大到車道級地圖視野，突出并線引導和目標車道；
過程 2：保持攝像機與自車距離不變，仰角隨著自車與路口的距離逐漸減小（即鎖定路口在屏幕上的位置）。這樣既能有清晰的路口距離感知，又能讓路口形狀逐漸清楚，規避了大仰角導致的離路口越近，路口形狀越扁平的問題。
不同的路口形狀適合不同的仰角參數。例如分叉路口用“大仰角”就能既看清路口形狀，十字路口則需要偏鳥瞰的“小仰角”才能看清路口形狀。另外，當轉彎路口之前很近的位置還有一個路口時，還需要調整相機的旋轉角度，來清晰傳達兩個路口的位置和形狀，防止駕駛員走錯。
車道級地圖與自動駕駛關聯緊急，且依賴于車輛的精準定位能力，是車輛智能化的核心功能展示，對于設計上每個車企都會考慮進行深度定制，與自身 HMI 風格統一，且功能上有與其他車企的差異化與賣點，這就需要我們考慮規模化設計中的效率問題。
規模化難點在于，與客戶產研設團隊的合作鏈路摸索和優化；車道級元素種類多、狀態多，設計產出的落地文件生成方式也不同；預覽驗證困難，導致新接觸的客戶設計師理解門檻高，缺乏對應的工具集。
「 低成本風格定制 」
第一階段，我們為客戶提供了各個設計階段需要的設計規范、源文件、教程。第二階段，客戶可以使用高德設計團隊打造的 D-Map 平臺，通過所見即所得的方式進行設計方案配置，并且能快速預覽設計效果。
「低成本增減元素」
對于車道級地圖中新增三維元素，梳理了對應的元素新增流程，規范前期建模中的模型面數、坐標、法線等，減少返工調整。
傳統導航地圖的使用對象只是人，而車道級導航地圖是人車共用的。在自動駕駛時，車道級導航地圖不僅為自主駕駛系統提供地圖和導航路徑，駕駛者與乘客也可以通過地圖更清楚地了解車輛做決策的依據，增強對于車輛的信任感；而在人駕駛時，通過車道級的精細引導，可為駕駛員帶來更舒適、更安全的導航體驗。
地圖是人類文明的坐標，隨著科技進步，地圖不斷被賦予新的內涵。對于車道級導航的設計探索才剛開始，未來，我們也會嘗試利用不斷增強的車載硬件算力，與車企一起創造次世代的車載導航體驗，為用戶提供更準確好用的高德地圖。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：AlibabaDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近期甘肅馬拉松事件給大家解讀了一個重要信息--失溫?。?/span>
一般大家都知道高燒會傷人，然而失溫出現應該如何及時救治呢？
下面藍藍設計小編為大家找來一篇文章，
希望大家可以認真學習一下，必要時刻及時保護生命~
也愿逝者的靈魂可以超度，愿人間不再有悲劇發生~~
如若涉及版權問題，請及時與小編聯系
文章來源：搜狐網 作者：超級俱樂部
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
年少時，經常聽到身邊的同事聊一些名詞概念，羨慕之余猶豫羞于提問，導致我經常會陷入其中無法自拔，痛苦不已；過了這么多年，大多數概念都隨著工作的原因慢慢被理解和消化，或逐漸消失或不再提及。但唯獨，“設計系統”這個詞陰魂不散，反反復復的出現在我的面前，特別是在面試這個場景下，幾乎每一場都會有這個詞被提到。
也源于最近做B端稍微多一些，不如今天就以toB產品為例來嘮嘮我認知下的設計系統是什么以及如何幫助設計落地執行的。
理論上來講，設計系統分為兩個大部分，一部分是指導思想，另一部分是實際產出；前者去指導后者執行，二者的關系像極了競技運動中的教練安排的“戰術”和球員場上的“執行動作”，如果用一張圖來表示，大概就是這么個事：
需要強調的是，要設計一套“設計語言”，首先需要聚焦到“語言”這個詞上，通常我們認知里的語言無非是一套溝通方式，因為我們對他習以為常，所以并沒有更進一步的了解，我試圖去查了下語言的來源，以及為什么世界上會出現這么多語言之類的問題，搜過出來的結果很多很復雜，但概括來說就是支撐一套語言的核心分為“語言特性”以及“語言構成”這兩大部分。
第一塊，詞匯：ta的作用是讓你表達出想法，就好比如果你跟我一樣English is not good的情況下，還嘚嘚瑟瑟的出國游玩，一定也經歷過用“蹦單詞+比劃”的方式去問路、點菜吧，典型的通過word的方式傳遞信息。
另一趴，語法，ta會讓你更順暢的表達出自己的想法，通過對詞匯的重組和編排，信息傳遞的有效性被大大增加，你可以通過“主動賓”來陳述觀點或表達疑問，盡可能的豐富此刻你的所思所想。就像上面的例子，按照語法規則稍微調整一下，看起來就順暢多的多了~
那么如果映射到設計上，顯而易見，組件庫對應詞匯，交互流程對應語法；所以你會發現當我們不斷迭代產品的時候，我們無非就是想把產品當做一件事情講清楚罷了。
再就是當一套組件被創造出來，ta需要遵循一定的規則形成一個完整的頁面，跟我們造句幾乎一模一樣；所以這個時候充當語法的交互流程就至關重要?，F實情況下，往往交互形態是千變萬化的，經常性的會因為業務場景的不同創造一些流程出來；但如果是基于語言的背景下，我們需要盡可能的抽練一些標準化的規則形成語法，我們稱之為“設計模式”：
我從中挑了搜索這個比較通用的模式來簡單講下；拋開組件的“點”思維，需要我們定義的是“信息交互”的“線性”流程，我試著把其中的每個環節提煉了出來，抽練了一個流程出來：
通過上圖也許你會發現“模式”注重的是流程節點的體驗感知（用戶跟產品交互的一來一往），并注重封裝成標準化方案。另外有一點，我把整個搜索的過程分為了2個個小線程——輸入行為和消費行為，這是為了以后團隊協作更好的理解這條模式的運作方式，以及之后的拓展，舉個例子：產品經理決定加一個歷史搜索（就是顯示用戶過往的搜索結果），這個時候設計師就可以把這個功能當做一個拓展包，直接扔到這個主干里來：
另外，toB CRM鼻祖salesforce在自己的設計網站上公布了他們的設計模式，給出了一些特定的場景下的解決方案，不過寫的相對更偏組件流程一些：
PS . 插個有的沒的的小話題，一個很好玩的事，如果你細心琢磨的話，也許會發現其實組件本身也是帶有一定的潛在交互，這種交互不需要你特意安插，天生就有，就好比一個按鈕擺在那，在沒有任何引導的情況下，正常人也知道點一點。所以映射到語言里，語法貌似并不是必要的（當然ta的存在是為了設計系統更完整，產品更好），比如這個爛大街的梗：
這種現象是著名的“貝葉斯理論”，利用相關信息總結出未知信息，也就是說我們的大腦是可以通過殘缺的信息來補足未知的信息的，人類的大腦真的是奇奇妙妙啊~
相比構成，特性這個就好理解多了，相當于設計原則這類的，我們需要通過一定的規則約束對語言有一個明確的指向；比如現代漢語就具備適應性、開放性兩大特征。
但不得不說，作為面試官我個人不是很喜歡作品集里描述設計原則的時候就3個詞：“簡潔”“高效”“清晰”。并不是討厭這三個詞，而是當我追問候選人為什么是這三個的時候，我得到的回復基本是Material Design（或其他大廠的設計系統）就是這么寫的亦或是其他很蒼白的回答，這無疑是暴露了對設計系統的認知殘缺，是一個非常掉分的互動過程。其實，當google、IBM、salesforce在對外宣講他們的設計原則的時候，也許就只有兩個字“清晰”，但背后或許有非常多的思考，甚至超乎你我的想象。
但...異乎尋常的是，AntDesign 的設計原則寫的很"深奧"，憑我的功力真的看不出背后的東西，也不知道如何指導設計（也許他們是在探索設計哲學吧哈哈哈哈）：
當我們對上述各方訴求梳理清楚后，首先要精準的概括和整理這些內容的權重和占比（需要注意的是，雖然允許多個原則存在，但也要有一定的側重和比例，這種做法在順暢的環節上不會有所建樹，但在多個原則沖突的情況下為了保全大局，順應占比最大的原則是相對穩妥的選擇，一定程度上可以幫助設計師規避掉不必要的糾結或撕逼的過程）；再然后基于當下的情況產出相應的原則，形成整套設計系統的王炸：
但在實際操作中，高度整合后的設計原則雖然指明了方向，但缺失了可衡量性，這就會導致“認知偏差”的情況，因為每個人對圖例中的“高效”或“靈活”理解不同，會對同一個事物有不同的理解，就跟“小馬過河”這個典故一樣，小松鼠覺著水很深，小馬卻覺著也就那樣；也正是基于此，需要設計師們在此基礎上拆分明確的細則，幫助整個團隊建立統一認知：
到這一步基本上設計系統就被定了調了，我們可以明確對一個設計進行評判和衡量，以“清晰”為例，我們有個B端產品里面有個表單填寫的頁面，需要用戶提供一些個信息，前兩天，團隊一個設計師做了個方案是把表單新開tab，但產品覺著不夠清晰，反而覺著蒙版的形式更清晰。他就很疑惑，明明信息獲得了更好的展示咋就不清晰了？
說到底，是我們在做設計定義的時候，對“清晰”的認知就是偏薄的，這個案例里面顯然第一個方案對信息的展示更加充分明了，但在這個場景下“清晰”并不僅僅指的是信息呈現，產品經理希望用戶透過浮層能確認當前處在哪一步（或哪個頁面）也同樣是一個維度；從這個case里，你會發現，定義一個原則真的不僅僅是搬運一個名詞這么簡單，所有的原則和特性必須遵循易于操作且合理，這樣才是一條合格且優秀的原則。
ps . Salesforce的Lightning設計系統是我最喜歡的design system之一，原因很多，其中很重要的一條是因為他們真的是把“美”作為一個很重要的原則：
色彩體系的定制往往是重災區，最常見的做法是把顏色用色塊的方式一字排開，一排叫做品牌色，一排叫做輔助色，還有一排是灰度：
這種定義存在很大的風險，就跟菜譜只告訴你需要哪些食材，不告訴你配比一樣，做出來的菜大概率是一塌糊涂，難以下咽。所以如果你正在建設一套團隊協作級別的設計規范，務必要把“協作”當做最重要的事，用比例的方式來告訴你的隊友他們應該怎么做：
同理，其他的模塊，比如字號，間距，圖標，我都建議盡可能的“場景化”，讓設計規范有一定的代入感，這樣會大大提高設計的效能和品質。
拋出這個問題，是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點；我個人是很難以認同這個的，對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合，需要調動整個團隊的想象力和創造力，最終達到一個統一共識才有可能被實施和執行；其次，創造力并不全是設計個btn或者彈窗，真正能展示創造力的是像樂高一樣，通過零件（組件）拼裝成各種各樣的令人嘆為觀止的創意，那才是我理解的創造力：
另外從系統性思維上講，如果在不考慮資源的情況下，我倒是挺支持每一位設計師都自己去設計一套設計系統，因為在我們平時看來，2/3年經驗的設計師和10年的設計師他們的產出物或許不會差太多，但對設計觀架構的能力千差萬別，前者依賴感覺和直覺素養做事，后者更靠縝密的邏輯和推理來做事；我更喜歡后者多一些，并不是因為他們講起自己作品的時候聽起來多么高大上，而是因為依據推理方法可以時刻保持輸出的穩定性。
我無意詆毀這兩大巨星，也無意內卷，只是想說，做事，終究不能托付給“天賦”和“靈感”，勤奮和努力在一定程度上也許可以幫你飛到更高。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：負能量補給站
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
在設計領域，相較于平淡無奇毫無重點的界面設計，其具有良好視覺層次結構的設計更受用戶青睞。在設計過程中可能會糾結于各種可能性，比如是讓文字變大還是變小，或者增加(或減少)元素周圍的留白，顏色是該深一點還是淺一點等。其實不管何種呈現方式，設計出美觀、高效和可用的UI界面需花費很長的時間，需經過反復的修改，最終才能打磨出令用戶滿意的產品，在滿足公司戰略及功能需求的情況下，其修改和優化還可以從細節上入手。
2021 | 第03篇分享目錄（031~045）
031.「支付寶」避免超額消費的花唄鬧鐘
032.「滴滴出行」關懷模式-老年人的出行福利
033.「愛奇藝」搜索分類-讓結果更精準
034.「美團」突出折扣金額-引起用戶貪便宜心理
035.「餓了么」訂單備注提示-為防疫工作貢獻一份力量
036.「快手」不打斷視頻播放的評論功能
037.「微博」行為預判-有效提高評論的完成效率
038.「淘寶」搜索結果-你試過長按商品卡片嗎？
039.「boss直聘」雙重toast彈窗-快速感知頁面類型/內容
040.「餓了么」店鋪營銷文案-看“我”就把“我”吃掉
041.「微信」你使用過圖片備注嗎？
042.「即刻」排版設置-幫你緩解視覺疲勞
043.「拼多多」通過搜索關鍵詞建立情感鏈接
044.「微信讀書」替身書架-幫你瞞天過海
045.「網易云音樂」視頻歌單-邊聽邊看更便捷
031.「支付寶」避免超額消費的花唄鬧鐘
產品體驗：
在支付寶花唄的消費鬧鐘功能里，可設置每個月的消費限額，當花唄支付使用超額后，會收到對應的消息提醒。
設計思考：
隨著互聯網的迅速發展，人們生活水平提高的同時、消費水平也越來越高。各種消費信貸產品如雨后春筍一樣冒出來?；▎h自出現后就深受人們的喜愛，首先是便捷的支付方式；其次花唄的申請門檻比較低，不論是學生，還是無業游民或其他沒有穩定收入的，只要芝麻信用分達到650分以上就能開通，在擁有額度后，就可以在支持花唄支付的平臺提前預支消費，到次月再還款，因此花唄的便利性就完全體現出來了。但總是有一部分用戶在每月出賬單需要還款時才發現，消費的額度遠遠高于自己的收入，甚至無力償還。
花唄新推出的消費鬧鐘功能，對于花錢沒節制的用戶來說，真的特別好用。在消費鬧鐘里設置提醒金額，點擊確定設置即可，當使用金額超過用戶設置的金額，將會收到提醒消息。此功能既可以減少用戶超額花費的可能性，也能有效避免用戶因無力償還賬單而給平臺帶來的經濟損失，可謂是一舉兩得。
032.「滴滴出行」關懷模式-老年人的出行福利
產品體驗：
在滴滴出行的設置中開啟關懷模式，系統會將字體放大且展示功能極簡的打車模式頁面，方便老年人使用；
設計思考：
滴滴出行主要面對的是年輕用戶群體，因涉及到支付寶、地圖等線上線下功能的結合，操作流程復雜且使用起來學習成本較高。在當前移動互聯網時代下，老年人如何能真切感受到現代智能科技所帶來的便捷、人文關懷和尊重，是如今的移動平臺所要解決的問題。
滴滴出行的關懷模式，就是專為方便老年人出行而推出的。老年用戶在APP設置中心開啟后，可快速進行一鍵下單操作流程。關懷模式支持大號字體顯示，能提前設置五個常用地址，方便在下單時進行一鍵操作，簡化了下單流程及刪減了部分頁面內容。不管是大號字體還是精簡流程，都便于視力不好的老年用戶叫車出行，不僅有效降低了在線叫車操作的復雜程度，也能緩解老年用戶在叫車過程中出現的不確定性和焦慮感，提升了出行效率。
033.「愛奇藝」搜索分類-讓結果更精準
產品體驗：
在愛奇藝使用搜索時，展開搜索框前面的類型，可選擇全網、圖搜劇和詞搜劇，以更精確的匹配搜索結果。
設計思考：
很多設計師認為搜索很簡單，設計一個搜索框加搜索圖標放在主頁頂部就搞定 了，然而并非如此，需要站在用戶的角度考慮搜索前、搜索中、搜索后各個階段的用戶體驗。搜索作為一個功能入口，除了簡單的呈現及引導方式之外，搜索結果也是也是非常重要的，用戶的搜索操作不是目的，結果的精準度及視覺傳達才是重點。大部分搜索的呈現就是提供搜索框，用戶一上場就開始碼字，然后在海量的搜索結果中去找到自己想要的內容。然而用戶并沒有什么耐心，不管是花大把的時間查找結果還是不停的更換關鍵詞重來，都有可以讓其失去耐性，轉而扭頭就走，導致平臺的用戶流失。
愛奇藝APP在搜索功能中進行了分類，比起常見的全局搜索其結果更加精準，通過全網、圖搜或詞搜類型改變搜索范圍，便于用戶在最短的時間內找到自己想要的結果。可以想象，當我們在百度查找需要的內容時，面對幾萬乃至幾十萬的結果匹配時，翻過幾頁后，要么放棄、要么換掉關鍵詞。愛奇藝的分類型搜索縮小了查找范圍，降低用戶的時間成本，還能提高對用戶的信任度，以增加其使用粘性。
034.「美團」突出折扣金額-引起用戶貪便宜心理
產品體驗：
在美團的酒店列表價格區域，除了有劃掉的原價和優惠之后的價格外，還特別突出展示了優惠的實際金額，非常顯眼，以彰顯其優惠的力度。
設計思考：
商家們都知道，定價策略是營銷中一個十分關鍵的組成部分，是影響交易成敗的關鍵因素，但也難以確定，既要考慮成本的補償，又要考慮消費者對價格的接受能力?？v然如此，當商家們把最低的價格擺在消費者面前時，才發現“理想很豐滿，現實卻骨感”，總是有那么一群人在感性的消費，即使碰到折扣后的價格依然過高，但只要優惠力度夠大，就感覺夠刺激，常規剁手。
一路走來才發現，唯有套路得人心，例如：拼多多的砍價，砍到手后低價購買，算是平臺補償的免費宣傳費；美團的高額滿減，是在提高原價數倍之后才有的折扣；線下商家撤離前的虧本清貨，可能是被選剩下的瑕疵產品......。在這些案例中，如果商家直接把折扣后的實際價格擺在那里，部分用戶根本不屑一顧。
美團的酒店列表，在價格區域除了常規的原價、現價之外，還突出展示已減金額，拋開現價不說，如果優惠的金額給力，足以引起用戶的注意。這是企業慣用的利益引誘手段，屢試不爽， 通過下單就讓利的方式來促進商品的轉化，引起用戶的貪便宜心理，只要優惠的數值夠高，就能引起用戶的注意力和消費欲望，將用戶的思維轉換至優惠力度方面，而忽略市場價格及性價比，會誤以為商家優惠的金額即自己賺到的錯覺，促使用戶下單完成轉化。
035.「餓了么」訂單備注提示-為防疫工作貢獻一份力量
產品體驗：
在餓了么確認訂單頁面，為了有效的控制疫情傳播，頂部會提示“為了減少接觸，降低風險，請修改下方備注”，進入備注頁面，輸入框的占位符和快捷輸入都優先展示避免接觸取餐的方法參考。
設計思考：
疫情爆發期間可謂是人心惶惶，經過所有人長時間的有效配合及預防，終于得到了緩解。疫情控制之后，人們對病毒的防范意識有所增加，通過自律做到盡量減少與他人的接觸，但在忙到的生活和工作下，很多情況總是不可避免，比如病毒防范意識降低而造成無意識的接觸、工作中的外賣取餐和寄收快遞，都會造成額外的接觸。
在餓了么APP上訂餐下單時，系統會給予明顯的免接觸防疫提醒，在訂單的備注中優先展示免接觸取餐方式參考，如掛門把手、放門口等，給病毒防范意識降低的用戶敲響了警鐘，提醒用戶盡量使用無接觸方式取餐，不僅能降低病毒在人與人之間的相互傳播，還為防疫工作貢獻了一份力量。
036.「快手」不打斷視頻播放的評論功能
產品體驗：
在快手觀看短視頻，打開評論，頁面從底部彈出，視頻繼續以播放狀態等比例縮小置頂，編輯評論不影響播放。
設計思考：
當我們在線上看到一件事物，有互動需求和強烈的表達需求時，此時評論功能不僅能滿足用戶需求，還能增加參與感，對增加用戶黏性大有作用。評論作為一個重要級的功能存在，在需要時會打斷用戶的當前瀏覽或操作，通過跳轉頁面或彈窗來幫助用戶解決互動需求，跟原本的頁面是一個上下級的關系。
在快手APP看短視頻，無論是編輯還是瀏覽評論都可以齊頭并進。觸發評論后，頁面從底部向上彈出，視頻的頁面占比范圍會以播放狀態等比例縮小并置頂，類似我們在看電影時的橫屏和豎屏，視頻觀看及評論兩不誤。這種交互方式在滿足用戶下一個需求時，并不中斷上一步的需求，避免原本看視頻的思路被打斷，有助于用戶跟隨視頻播放的思路即興發揮評論，這也是一個容易設計師被忽視的好功能。
037.「微博」行為預判-有效提高評論的完成效率
產品體驗：
當我們在微博列表中的某條信息處停留5秒并無任何操作時，此條微博下方會自動彈出評論框，系統通過行為預判感知用戶對該內容感興趣，引導用戶去發表自己的想法。
設計思考：
評論在很多應用中都有著舉足輕重的作用，尤其像微博這樣的大型并開放式的信息平臺，更有著弘揚先進的思想和精神，揭露和抨擊腐敗現象及不正之風，對各種不良現象形成強大的輿論壓力，實現有效的監督。即便是網絡水軍、鍵盤俠（惡意重傷除外，畢竟大部分用戶還是理性的“噴子”），當風聲一邊倒時，都會逐漸走向真理化。在我們所接觸的應用中，評論操作的方式都是通過用戶的手動觸發。
微博編輯評論除了用戶手動觸發之外，其還有一種非常人性化的系統感知觸發。當用戶在列表中的停留5秒且沒有任何操作時，系統通過行為預判感知用戶可能對這條信息感興趣，即自動彈出評論框，引導用戶操作，能增加產品跟用戶之間的交流互動。微博的行為預判是引導用戶、縮短用戶行為路徑的有效設計手段，在用戶沒有作出行動觸發的情況下進行理解用戶可能會出現的操作行為，減少冗余步驟，簡化操作流程，運用最少的路徑和行為來達成用戶目標，有效提高評論的完成效率。
038.「淘寶」搜索結果-你試過長按商品卡片嗎？
產品體驗：
在淘寶的商品搜索結果里列表，長按某個商品卡片區域，會彈出該商品多種類型的tab，有相似、同款、同品牌和同店，便于用戶更精準快速找到自己需要的商品。
設計思考：
對于有目標需求但不是特別明確的用戶來說，關鍵詞搜索無疑是最好用的一個功能，當面對海量的搜索結果，可能會眼花繚亂，找到喜歡的商品時，要么銷售量太低、要么價格過高，反正總有有那么一方面自己不滿意，不得已，只能把當前商品的精準關鍵詞經過搜索框再來一遍。
在淘寶APP就無需這么麻煩。商品的搜索結果列表有個隱藏的功能，只需長按商品卡片區域，就會彈出相似款、同款、同品牌、同店鋪的類型tab欄，方便用戶能夠快速根據自身需求篩選比價，可免去不必要的麻煩操作，節省大量時間，如果你還未使用過此隱藏的交互功能，就趕緊試一試吧。
039.「boss直聘」雙重toast彈窗-快速感知頁面類型/內容
產品體驗：
boss直聘頂部的職位tab在切換成功后，除了除了有職位更新toast提示外，屏幕中間還會通過toast彈窗提示當前頁面職位類型，并突出顯示。
設計思考：
關于toast彈窗樣式及出現的場景，猶如市場上的大白菜，所見過多的不能再多了。例如某個步驟操作成功、tab切換頁面、下拉刷新等，是一種輕量級的反饋，以小彈框的形式出現，一般出現1到2秒會自動消失，且可以出現在屏幕上中下任意位置。對于設計師來說，在頁面上增加toast的作用，就是將操作的結果直接反饋給用戶。
Boss直聘APP在tab欄成功切換頁面后，除了有清晰反饋操作結果“推薦職位已更新”之外，還在屏幕中間用另一個更加顯眼的toast彈出明確職位信息。其實用戶在切換tab欄時，此操作行為不僅僅是切換頁面，所對應的類型才是首當其沖，當明確類型無誤后才會將思維轉向內容，職位彈窗在屏幕中心提示，占據有利地形，除了讓用戶清楚當前頁面交互狀態之外，還能快速感知類型是否為自己所需。另外還有防錯作用，避免用戶操作失誤后，在自己還不清楚的情況下去瀏覽內容而浪費大量的時間。
040.「餓了么」店鋪營銷文案-看“我”就把“我”吃掉
產品體驗：
餓了么的外賣店鋪列表及推薦商品下方都有極具誘惑性的廣告文案，一句話概括味道、服務、優質推薦等。
設計思考：
今天吃什么？隨便；那吃肯德基吧？不好，太油膩了；那到底吃什么？隨便......。這應該是最標準的選擇性困難綜合癥晚期，尤其是給女朋友點外賣，你會發現原來“隨便”就是天大的謊言，表面上看似什么都可以，實則什么都不可以。
餓了么每個店鋪下方都使用了一句簡短的文案概括菜品的味道、店鋪服務或招牌推薦等，在文案中結合用戶較為關心的利益點抓住眼球，引導目標進入店鋪，從而瀏覽店鋪的內容。店鋪廣告是商家可以進行內容營銷的重要場所之一，可充分利用文案向用戶進行宣導，讓其感受到店鋪的用心之處，增強用戶體驗，優質的文案不僅能帶給用戶驚喜，還有一種神秘色彩，用戶可能會抱著試一次心理想法，從而形成轉化。
另外對于吃什么、難以選擇的用戶，平臺可以通過文案的吸引，增強用戶的占有欲望，讓其快速做出決策，避免在選擇的時候難以抉擇，即便做出決定后仍然疑慮其它的選擇是不是更好，從而導致時間的浪費，精神上的焦慮。
041.「微信」你使用過圖片備注嗎？
產品體驗：
微信好友昵稱除文字備注外，還可以使用圖片備注，保存成功后即可在設置備注頁面描述區域看到此前備注的圖片，好友信息也增加了描述入口。
設計思考：
當我們的微信好友過多或因好友隨時改變昵稱的原因，而經常找不到，我們就會隨手備注一個昵稱或標簽，以便需要時方便查找，但針對當面即時添加的好友，就算使用的昵稱備注，可依然沒有印象怎么辦？
其實微信的備注功能比我們想象的要強大，除了昵稱備注外，還可以使用圖片備注。當我們因工作接觸的人較多需要添加好友時，短時間是沒有辦法把所有好友的個人信息都記熟，這時候圖片備注就能助我們一臂之力了，另外還可以直接把客戶的名片作為圖片備注，將單個好友的信息集合，實現一功能多用。對于記性不好或短時間內添加好友較多的用戶非常實用。
042.「即刻」排版設置-幫你緩解視覺疲勞
產品體驗：
在即刻APP的排版設置里，開啟“中文標點擠壓”和“段間距”，文本內容會自動減小中文符號后面的間距，且段與段之間也會增加留白，提高視覺舒適度。
設計思考：
我們在看文章或電子書時，都有過這樣感覺，當篇幅較大時，到了一定時間，就會產生視覺疲勞或專注度減弱的情況。視覺疲勞的強弱程度，用戶除了自行調整外，平臺還能通過設計手段提升用戶體驗來緩解，常見的網絡文章會在不同位置穿插圖片來減輕用戶的視覺壓力，其電子書也會通過短篇幅的翻頁來緩解視覺疲勞。
在即刻APP的系統設置中，可通過排版設置提升瀏覽體驗。開啟中文標點擠壓，文本將自動減小中文標點符號后的空白區域，避免間隔太大造成脫節，去掉不必要的空白，還能為內容節省空間，畢竟內容才是產品最重要的部分，所以不要沒理由的去掉特地為它預留空間，“擠擠總還是有的”；其次開啟段間距，即段與段之間視覺更加明顯，第一反應就能感覺出這是兩段內容（段落的結尾如果跟上一樣最后平齊，傻傻分不清是銜接上一段還是新的一段），讓用戶瀏覽文本內容的思維更清晰且減少思考，提升節奏和視覺平衡感。
043.「拼多多」通過搜索關鍵詞建立情感鏈接
產品體驗：
在拼多多搜索“生日蛋糕”時，商品搜索結果呈現的同時，會有滿屏的蛋糕表情落下，以示祝福。
設計思考：
商品搜索框，顧名思義就是搜索商品使用，用戶需要查找某個商品時，輸入關鍵詞，系統通過后臺數據對關鍵詞進行匹配，然后按照特定是順序呈現出來，旨在滿足用戶的搜索需求而生。
拼多多搜索功能除了滿足用戶的基本需求外，還增加了一個小細節，搜索部分特定的關鍵詞，結果頁會使用趣味化的微動效。比如，在搜索“生日蛋糕”后，會有滿屏的蛋糕表情落下，給予用戶生日祝福，通過營造情感氛圍，獲得用戶的認可，跟用戶建立情感鏈接以鼓勵繼續下一步操作。同時平臺用趣味的微動效生日祝福通過情感、人性化的交互方式更受人用戶青睞，可以讓用戶感到心情愉悅，進一步增加用戶的信任度及粘性。
044.「微信讀書」替身書架-幫你瞞天過海
產品體驗：
使用微信讀書，如果自己所看的書籍不想別其他人知道，或者想假裝自己在看某個領域的書籍，可在隱私設置中開啟替身書架，既可以保護隱私，還可以滿足面子心理。
設計思考：
有人說，線上看書的效果沒有看紙質書籍的效果好，其實并非全部如此，主要因人而異，比如線上看書可以有效利用碎片化時間、不分場景等，不管是線上還是線下，都沒有明確的界定，只要能堅持就好，堅持是一件很不容易的事情，比如很多用戶喜歡把自己在看書這件事告訴所有的朋友，利用營造人設以追求自己的面子心理，通過好友的夸贊轉化為自己堅持下去的動力。
微信的替身書架就可以滿足用戶的多種需求，通過隱私可以設置一個“分身”來代替真實書架，開啟后，替身書架將代替真實書架顯示在個人資料中，除了隱藏自己真正閱讀的書籍，保護閱讀隱私，讓自己不被“視奸”外，還可以滿足用戶的面子（裝X）需求，滿足用戶想要被看到的一面，利用替身書架經營自己人設的需求，比如最近在讀的書籍類型、領域等，通過“造假”的方式滿足自己的虛榮心，來獲得他人的認同感。替身書架一定程度上可以通過裂變手段把獲取的新增用戶轉化為活躍用戶，同時滿足了用戶保護隱私和營造人設的需求，一舉兩得。
045.「網易云音樂」視頻歌單-邊聽邊看更便捷
產品體驗：
在網易云音樂聽聽歌時，如果遇到喜歡的視頻，也可以收藏到視頻歌單了，從我的-收藏和贊入口進去就能看到。
設計思考：
一直以來，歌單是網易云音樂的核心功能，網易云音樂也是唯一一個將歌單作為核心架構的音樂產品，當我們碰到一首非常喜歡曲時，可能也會鐘情于該歌曲的MV，邊看邊聽似乎能更好的融入歌曲的“靈魂”中，如果我們需要再次播放該MV，就要從這首歌曲處找到相應的入口。
網易云音樂8.0版本最新推出了視頻歌單功能，延續了用戶喜歡的“歌單”模式，根據自己喜歡的歌單主題，將MV，視頻、mlog內容聚合在一起，做出一個好聽、好看，好玩的視頻歌單，讓音樂動起來，省去了以往每次找視頻的一系列繁瑣操作，優化路徑，讓邊聽邊唱的體驗更加便捷。
結語：
設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結能力，也為日后輸出優秀的作品當鋪墊，對自己的能力提升以及未來的職業發展帶來便利。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：大漠飛鷹CYSJ
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
PM2是node進程管理工具，可以利用它來簡化很多node應用管理的繁瑣任務，如性能監控、自動重啟、負載均衡等，而且使用非常簡單。
全局安裝
npm install -g pm2
挑express應用來舉例。一般我們都是通過npm start啟動應用，其實就是調用node ./bin/www。那么，換成pm2就是
注意，這里用了–watch參數，意味著當你的express應用代碼發生變化時，pm2會幫你重啟服務(長時間監測有可能會出現問題，這時需要重啟項目)
pm2 start ./bin/www –watch
參數說明：
–watch：監聽應用目錄的變化，一旦發生變化，自動重啟。如果要精確監聽、不見聽的目錄，最好通過配置文件。
-i –instances：啟用多少個實例，可用于負載均衡。如果-i 0或者-i max，則根據當前機器核數確定實例數目。
–ignore-watch：排除監聽的目錄/文件，可以是特定的文件名，也可以是正則。比如–ignore-watch=”test node_modules “some scripts”“
-n –name：應用的名稱。查看應用信息的時候可以用到。
-o –output ：標準輸出日志文件的路徑。
-e –error ：錯誤輸出日志文件的路徑。
–interpreter ：the interpreter pm2 should use for executing app (bash, python…)。比如你用的coffee script來編寫應用。
完整命令行參數列表：地址
pm2 start app.js –watch -i 2
pm2 restart app.js
停止特定的應用?？梢韵韧ㄟ^pm2 list獲取應用的名字（–name指定的）或者進程id。
pm2 stop app_name|app_id
如果要停止所有應用，可以
pm2 stop all
pm2 stop app_name|app_id
pm2 stop all
pm2 list
pm2 start app.js –watch
*這里是監控整個項目的文件
除了可以打開日志文件查看日志外，還可以通過pm2 logs來查看實時日志。
pm2 logs
pm2 save # 記得保存進程狀態
npm install pm2 -g
pm2 update
附pm2命令：
$ npm install pm2 -g # 命令行安裝 pm2 $ pm2 start app.js -i 4 # 后臺運行pm2，啟動4個app.js # 也可以把'max' 參數傳遞給 start # 正確的進程數目依賴于Cpu的核心數目 $ pm2 start app.js --name my-api # 命名進程 $ pm2 list # 顯示所有進程狀態 $ pm2 monit # 監視所有進程 $ pm2 logs # 顯示所有進程日志 $ pm2 stop all # 停止所有進程 $ pm2 restart all # 重啟所有進程 $ pm2 reload all # 0 秒停機重載進程 (用于 NETWORKED 進程) $ pm2 stop 0 # 停止指定的進程 $ pm2 restart 0 # 重啟指定的進程 $ pm2 startup # 產生 init 腳本 保持進程活著 $ pm2 web # 運行健壯的 computer API endpoint (http://localhost:9615) $ pm2 delete 0 # 殺死指定的進程 $ pm2 delete all # 殺死全部進程
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
