數據在服務主張（service propositions）中發揮著越來越重要的作用。這就引出了一個問題：服務設計師如何以實際的方式為此類命題的數據策略做出貢獻？本文翻譯來自飛利浦的三位設計師寫的一篇有關于數據定義框架的文章，在飛利浦，他們使用數據定義框架將數據與設計思維整合，以啟用和衡量服務體驗。
數據和人工智能 (AI) 正在推動服務設計的新范式，其中服務體驗變得更加智能、無處不在和高度個性化。數據構成了支持此類新興服務主張的支柱，并在持續衡量其影響方面發揮著核心作用。鑒于數據發揮的重要作用，許多科技公司目前正在制定廣泛的數據戰略（Data strategies）。這些數據策略提供了詳細的路線圖，可推動服務的技術發展，并與業務目標緊密結合。
然而，這些數據策略通常是技術上的努力，側重于平臺之間的數據訪問、數據流或數據存儲等方面。他們往往缺乏以人為本的視角，因為他們很少關注數據收集的體驗、數據如何反映現實世界的體驗，或者人們在日常工作中如何與數據和人工智能進行交互。
服務設計師通常只是間接參與這些數據策略的制定。雖然服務藍圖可能有助于推動數據戰略發展的業務路線圖，但我們看到，當服務設計視角更加結構化時，它們的質量會顯著提高。
服務設計是數據戰略的一個關鍵方面，因為它提供了更加人性化、集成化和整體化的體驗視角。它的優勢在于允許理解復雜的關系以及多個細節如何影響整體體驗。例如，它可以幫助確定在何處以及如何收集數據以獲得最高質量的結果，或者它可以為其他復雜的技術問題確定簡單的流程變通方法。
由于這種附加價值，精通數據的服務設計師可以在構建以現實世界工作流程和體驗為基礎的以人為本的數據策略方面發揮關鍵作用。因此，數據策略應該是學科之間的協作努力，以確?？梢詮牟煌慕嵌葯z查和設計整體挑戰。
盡管服務設計提供了價值，但我們看到服務設計人員本身通常缺少在這種數據戰略協作中取得成功的工具和方法。雖然我們在為生產或開發團隊創建特定要求方面有著悠久的歷史，但在數據策略方面，我們通常不會就數據要求或需求以相同級別的粒度和特異性進行溝通。
這部分是因為我們必須進一步發展我們的數據能力，但也因為沒有多少實用的框架可以讓設計師對數據策略做出有意義和實際的貢獻。如果沒有正確的工具來指導我們的探索并與我們的技術同事進行交流，為數據策略做出貢獻可能會讓人不知所措。
我們的數據定義框架首次嘗試為服務設計人員提供正確的工具，使他們能夠積極參與數據戰略活動。
我們的數據定義框架挑戰（服務）設計人員考慮他們明確的數據需求，促進對這些需求的探索，并在將圍繞數據的思想構建成具體的數據需求方面發揮著重要作用。我們沒有引入完全獨立的附加流程，而是將我們的數據定義框架整合到現有的工作方式中，并旨在讓那些對數據世界經驗有限的人們能夠了解到它。
具體流程是：
在我們嘗試構建自己的數據定義的前幾次，我們非常掙扎。從頭開始時，想出有意義的數據點似乎不是隨機的，這是一項挑戰。我們探索了如何從角色、場景或架構圖開始，但這些方法給出的結果要么過于膚淺，要么過于技術化。
隨著時間的推移，我們了解到（體驗）地圖為搭建和構思數據定義提供了寶貴的基礎。我們在這里使用體驗地圖作為容器術語，因為這些地圖可以是服務藍圖、工作流程圖、用戶旅程甚至是 UI 流。
基本上，任何類型的地圖都可以概述用戶如何通過一組具體的操作來經歷體驗。地圖的顆粒度將表明數據定義的性質。例如，如果它是一個 UI 流，數據定義將更多地關注微交互或應用程序功能的體驗含義。相比之下，如果選擇的地圖是一個高級工作流，那么數據定義將更多的是關于跨接觸點、整體的假設數據。
為了舉例說明，我們使用下圖所示的圖解（簡化）體驗圖，該圖顯示了醫療機構中的患者如何通過冠狀動脈支架置入術：
與上面提到的其他類型一樣，此地圖有助于在適當的上下文中可視化數據，以及與之相關的體驗。該地圖側重于用戶操作和事件，因此是開始以人為中心的數據探索的良好基礎。
下一個合乎邏輯的步驟似乎是用數據點注釋地圖。但是，這些數據點的范圍可以從更高級別的指標（例如患者報告的結果）到較低級別的數據指標（例如護士在患者監視器上單擊后退按鈕的頻率）。這里的問題是有幾乎無限數量的選項可供探索。
為了指導數據定義過程，我們引入了“意圖（intents）”。您可以將這些意圖視為您希望通過數據實現的目標。我們總是使用兩種截然不同的意圖，它們直接反映了使用數據的不同方式：
然后可以將數據點連接到這些意圖，以明確這些數據點所扮演的角色。這會產生一個定義明確的關系模型，有助于以后制定戰略和確定優先級。定義意圖和相關數據點總是有點反復練習，其中新意圖觸發新數據點需求，新數據點激發新意圖。
（1）識別“衡量”意圖
智能產品、服務和解決方案不是一成不變的；它們可以遠程配置、更新，并且可以自行學習以適應和發展。為了推動這個過程，我們需要創建反饋循環。“衡量”意圖在定義學習目標方面發揮著關鍵作用。
它們可以包含更多以結果為導向的、評估性的目標，或者更具探索性、以洞察力為導向的目標。例如，評估性“衡量”意圖可以是在引入新的患者摘要視圖后評估吞吐量時間的變化。一個更具探索性的“衡量”意圖可能是深入了解患者如何體驗入院咨詢的不同部分，以發現新的改進機會。
這些意圖也可以是細化的或整體的。它們可以與體驗圖中的特定接觸點相關聯，例如，如果新的患者儀表板可以幫助護士更快地了解患者的病史。但它們也可以跨越該體驗地圖的多個階段，捕捉患者如何體驗整個過程。
將屬性分配給“衡量”意圖，就像上面提到的那樣，有助于引導設計師思考正確的方面。我們在確定屬性時可能會問的問題可能是：“需要多少數據？”、“持續多長時間？”、“意圖是否與更高級別的體驗驅動因素相關聯？”和“評估目標的目標是什么？”
盡管其中一些屬性也可能與您的用例相關，但我們鼓勵您探索哪些屬性在您的域中有意義，并在您的定義中始終如一地使用它們。然后可以使用這些“衡量”意圖指導進一步的數據定義。設計師可以考慮他們需要哪些數據來回答這個問題，而不是擁有無限的選擇。
（2）識別“啟用”意圖
智能產品、服務和解決方案需要數據來了解它們所處的環境以及人們在它們周圍的行為方式，以便有意義地適應不同的情況。為了明確我們想要啟用哪些體驗，并定義提供這些體驗所需的數據，我們引入了“啟用”意圖。
“啟用”意圖是對啟用某種體驗的功能或特性的描述。重要的是定義實現這些體驗所需的數據，以便制定長期的數據戰略。
“啟用”意圖中描述的功能可以根據其抽象級別而有所不同。在更詳細的接觸點級別，“啟用”意圖可以指特定的應用程序功能。圖像中的自適應 UI 功能就是一個很好的例子。在更高的體驗旅程級別，“啟用”意圖可能更多地涉及服務解決方案（它將來自接觸點集合的數據匯集在一起）。
與“衡量”意圖一樣，“啟用”意圖可以具有不同的屬性，有助于進一步定義它們。對于給定的“啟用”意圖，我們經?；卮鹬T如“它已經可用還是計劃用于未來？”、“它集成在哪個接觸點？”、“它針對哪些參與者？”等問題，以及“它的預期影響是什么？”
“衡量”和“啟用”意圖通常是相關的，因為先驗往往旨在了解后者的影響。因此，這些意圖也經常共享相同的數據。
（3）識別數據點
這兩種意圖都為數據定義了明確的目的。我們已經簡要介紹了它如何在定義具體數據點方面發揮指導作用。數據點是對正在收集的數據的簡單描述。這些數據點始終連接到地圖中的特定部分，在這些部分可以獲取這些數據，或者將其反饋入其中。這些連接可以是我們或其他人擁有的接觸點，也明確需要第三方加入一起整合。
數據點也有自己的屬性來指導討論。為了提倡對這些數據的經驗觀點，不僅要定義收集的數據，而且要關注收集數據的方式和地點的經驗。其他屬性可以是是否自動收集數據，例如醫療程序的持續時間；或者是否手動收集，例如在手術后問卷中記錄的患者報告的結果。其他屬性可以包括數據是客觀的還是主觀的；是連續收集還是定期收集；以及是否始終需要或僅在某些條件下需要。
在反復定義“啟用”和“測量”意圖以及與之相關的數據點之后，我們最終得到了一個如下圖所示的關系模型。
該模型中的意圖和數據點可能比可以輕松解決的要多。因此，數據定義框架有助于確定未來路線圖的優先級，這一點很重要。緊密關聯的關系模型有助于從整體上看待這一挑戰。
我們現在可以評估這些數據點所產生的影響，而不是只關注實施數據點所需的復雜性或工作量。雖然在整個旅程中跟蹤患者體驗可能很困難，但這樣做可能是理解這兩種類型的許多意圖的關鍵因素。在這種情況下，將他們的收集優先于其他多個更易于實施的數據點的收集可能是值得的。
確定哪些數據點在路線圖的哪個階段獲得優先級對于制定成功的數據策略至關重要，因為它直接關系到何時可以實現哪些“啟用”和“衡量”意圖。
我們創建了數據定義框架，使服務設計人員能夠開始為他們設計的服務的數據策略做出務實、有意義的貢獻。這是我們將“數據思維”與服務設計相結合的第一步。
在飛利浦內部，我們已經將數據定義框架應用于各種服務設計挑戰。我們與具有不同數據素養的利益相關者一起使用它，并從各種體驗地圖開始。它主要被認為是探索數據機會的工具，也是圍繞數據構建思想的一種方式。盡管該框架是在醫療保健領域開發的，但我們相信它在其他領域具有潛力。我們已經看到它被應用于更通用的客戶體驗、專業培訓服務和日常消費者服務，而不會面臨重大挑戰。
我們覺得這個框架現在對（服務）設計師來說特別及時，因為數據開始在我們設計的所有體驗中發揮更突出的作用。作為設計師，我們的創造力和想法不應受到現有數據的限制。相反，我們應該在定義數據策略方面發揮積極作用，使我們能夠隨著時間的推移編排有意義的、個性化的體驗。
來源：人人都是產品經理 作者：陳昱志Yeutz
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從事互聯網醫療行業的年頭也不短了，做過慢病的健康管理產品，負責過互聯網醫院整條產品線的建設，也參與過AI健康檢測硬件產品的設計。
行業中互聯網醫療行業中一些公司在對外的宣傳中也衍生出了數字醫療、數智醫療等新名詞，無論是服務于醫生、還是醫院或者是藥企或者是保險，最終落地或者說繞不開的都是C端患者。那么，如今市面上互聯網醫療C端產品的組成成分都有哪些呢？
在談互聯網醫療C端產品的組成前，我們先用一小段介紹下人體有哪些重要組成部分：
“臟”是指實心有機構的臟器，“腑”是指空心的容器。
人體五臟包含：心臟、肝臟、脾臟、肺臟、腎臟。
人體六腑包含：小腸、膽囊、胃、大腸、膀胱等分別和五個臟相對應的五個腑，另外人體的胸腔和腹腔分為上焦、中焦、下焦，統稱為三焦，是第六個腑。
五臟和六腑的關系：臟與腑是表里互相配合的，一臟配一腑，臟屬陰為里，腑屬陽為表。臟腑的表里是由經絡來聯系，即臟的經脈絡于腑，腑的經脈絡于臟，彼此經氣相通，互相作用，因此臟與腑在病變上能夠互相影響，互相傳變。
人體各個器官按照一定的順序排列在一起，完成一項或多項生理活動的結構叫系統。
人體的八大系統：消化系統、呼吸系統、循環系統、泌尿系統、運動系統、生殖系統、內分泌系統和神經系統。
八大系統在神經和內分泌系統調節下，互相聯系、互相制約，共同完成整個人體的全部生命活動，以保證人體生存和種族綿延。
看到這也許大家會納悶，文章標題是“互聯網醫療C端產品的組成和優勢的建立”，PM大白怎么在開篇講起人體的五臟六腑和八大系統呢，因為PM大白認為產品同樣也是一個生命體，產品的0-1即是產品的出生、產品的迭代即是產品的成長、產品的矩陣即是種族的綿延，那么產品作為一個生命體，并且是互聯網醫療產品，那么她同樣存在著類似五臟六腑八大系統的組織，只是組織的名稱不一樣，大家不這樣稱呼而已。
不多說了，下文進入正題，看看互聯網醫療C端產品的組成成分有哪些：
上文中提到了人體的五臟六腑：“臟”是指實心有機構的臟器，屬陰；“腑”是指空心的容器，屬陽。
那互聯網醫療C端產品中（下文中簡稱為“產品”）的五臟六腑PM大白如何定義呢？
上文中選擇互聯網醫療C端產品中的幾個重要模塊定義為其“五臟六腑”，那互聯網醫院C端產品中將這“五臟六腑”串聯起來的八大系統又有哪些呢？其實本質是各個維度中的供需關系的維護。
上文我們介紹了互聯網醫療產品的核心組成模塊，但是好像現在互聯網醫療行業并沒有迎來爆發期或者說沒有得到大范圍的應用和產生價值，那又是為何呢？
之前我在生物實驗室工作，那個時候社會上就說生物行業是朝陽產業，未來可期；后來我轉行到了互聯網醫療行業，身邊的朋友又說，互聯網醫療可是互聯網垂直行業中的朝陽行業，可是互聯網醫療這個朝陽一直在海平面附近起起落落，一直沒有升起來，更不用說什么日到中天的趨勢，反而是不溫不火。
更有甚者，同行們開始懷疑互聯網醫療的價值到底在何處，難道互聯網醫療就是賣藥賣保險賣醫療周邊延伸服務的工具嗎？個人沒有懷疑過互聯網醫療價值，至少從沒有懷疑過這個行業的未來價值的，只是限于當前的用戶就醫習慣、政策法規、相關技術以及醫療體系，醫療是一個嚴肅的產業，必須循序漸進與互聯網、AI等新技術結合，這才是負責任的醫療行業從業者該有的態度，因為醫療健康事關生死。
如何在現在的這個行業處境下默默地建立起自己的優勢才是正道，那么互聯網醫療產品的優勢在何處建立呢？其實有兩個方向：資源和技術（也許對從事互聯網醫療行業的大家來說，這就是大白話）。
資源型優勢：通過不斷地積累醫療業務相關的核心資源建立優勢。
1）數據優勢
定義：這里提到的“數據”僅指患者在所有醫療、健康活動中產生的用于組成患者健康檔案的數據。
來源：線下醫院（核心）、線上問診、用藥記錄、醫保數據、健康險數據、移動設備檢測數據……
政策：近期國家相關部門出臺了《“十四五”全民健康信息化規劃》正是一個信號，出于患者個人醫療健康數據的重要性、復雜性、安全性、隱私性，也只有國家力量才有這種能力去實現；以下是從《“十四五”全民健康信息化規劃》摘錄的部分信息 ：
堅持統籌集約，共建共享。堅持統籌布局，深化共建共用，增強全民健康信息化發展的系統性、整體性和協調性，以構建大平臺、大系統、大目錄為導向，加大信息化建設統籌力度，加強信息化基礎設施集約化建設，鞏固政務信息系統整合成果，進一步破除數據共享壁壘，暢通數據共享通道，推進數據全生命周期管理。
到2025年，初步建設形成統一權威、互聯互通的全民健康信息平臺支撐保障體系，基本實現公立醫療衛生機構與全民健康信息平臺聯通全覆蓋。
數字健康服務成為醫療衛生服務體系的重要組成部分，每個居民擁有一份動態管理的電子健康檔案和一個功能完備的電子健康碼，推動每個家庭實現家庭醫生簽約服務，建成若干區域健康醫療大數據中心與“互聯網+醫療健康”示范省，基本形成衛生健康行業機構數字化、資源網絡化、服務智能化、監管一體化的全民健康信息服務體系。
目的：打通各個醫療數據孤島，構建患者全生命周期的健康檔案、屬于整個現代醫療體系的底層基礎建設，服務于上層所有與醫療相關的應用服務，對線上互聯網醫療尤為重要；
最終在健康數據這塊的發展趨勢，應該是國家完成居民全生命周期的健康檔案的統籌和建設，制定授權標準，然后通過授權的方式提供給具備相關資質的互聯網醫療企業在其產品中進行調用。
我們選取了騰訊醫療官網以及騰訊醫療面向C端用戶的一款產品：騰訊健康（小程序），看看對方在數據建設方面的的產品。
①騰訊官網
產品服務對象劃分為了兩類：醫療機構與患者、區域醫療。
面向不同的服務對象，騰訊提供了不同的解決方案；面向醫療機構與患者，解決方案有：
前兩種方案的實現必然需要與醫保系統和醫院his系統的對接，則涉及醫保數據和his數據的互通；后兩種方案則涉及到疾病和藥品數據知識庫的建設。面向區域醫療，解決方案是：微信電子健康卡開放平臺、全名健康信息平臺、區域智慧醫療平臺、區域大數據云，這類方案完全符合了《“十四五”全民健康信息化規劃》的目標。
②騰訊健康小程序
進入首頁是不是發現與其他互聯網醫療APP呈現的內容有所不同呢，騰訊健康既沒有直接呈現大量的醫生和科室，也沒有直接呈現各種醫療服務包，金剛區顯示的是“醫保電子憑證”和“防疫健康碼”，首頁還還在功能區顯示了“我的醫?！比肟?，以及在服務推薦區1號位顯示“本地醫保碼”領取和查看入口。
2）知識優勢
定義：這里提到的知識主要指與健康管理，疾病治療相關的醫學知識。
來源：醫生、醫院、協會、醫學百科以及權威醫學書籍。
形式：直播、短視頻、音頻、圖文。
目的：培養患者的健康習慣、提供患者自我健康管理的科學方法、提高患者對疾病各方面的認知以及自我治療和線下就醫的各種渠道和流程信息，對產品來講是前期的流量入口。
我們選取百度健康官網和騰訊醫典APP，看看同行在醫療健康知識這方面的重視程度和所做的努力：
我們可以看到百度健康的PC端官網沒有一個醫生，沒有任何線上問診等其他醫療服務入口，展示的是不同形式的疾病知識，其中包含短視頻、直播、圖文等形式，其實百度健康是用它的“醫典”模塊作為的PC端官網，如果不是百度健康搞錯了，那就足以看出百度健康認為健康知識這塊的重要程度；還有就是騰訊很早就做出了一款定位醫學科普知識的產品——騰訊醫典。
3）服務優勢
定義：這里提到的服務主要指線上的問診、開藥、健康管理、掛號、等需要醫生或其他專業醫療健康從業者或醫療機構參與的業務。
來源：醫療機構、專家、醫生、藥師、健康管理師、營養師等。
目的：醫療健康服務是最直觀的能讓患者感受到當前產品所具備醫療健康價值的模塊，也是能幫助患者解決實際需求的重要模塊，對定位于互聯網醫療的產品長期發展來講，醫療健康服務必定是后期的主要盈利入口，互聯網醫療也必然會像現在的線下醫療體系改革一樣擺脫以藥養醫的依賴。在所有的互聯網醫療產品中，好大夫便是聚焦服務和堅持線上醫療服務為主要方向的一款產品。
4）商品優勢
定義：這里提到的商品主要指藥品、健康險、保健品等與醫療健康相關，由醫療服務延伸出的需要付費交易的實物產品。
來源：藥企、健康險公司、移動健康設備等。
目的：在患者對線上醫療健康服務付費接受度還沒有那么高時，采取的一種盈利生存手段；如果一家互聯網醫療公司是靠藥品、保險或其他非服務產品維持發展和成長的話，醫療服務型產品只是為這些盈利手段服務的話，也許會是一個成功的生意，但是個人寧愿將這類公司直接稱之為醫藥電商公司、醫療設備提供商，而不是今天全篇講的互聯網醫療公司（或產品）；目前在京東健康上的藥品收入與醫療服務收入占比接近7:1。
技術型優勢：通過發明或優化新的技術讓線上的互聯網醫療服務流程發生革命性的變化，并且獲得醫生、患者以及醫療權威機構或政府相關單位的認可。
1）檢測技術
大家去線下就醫見到醫生后的第一件事是做什么？是各種抽血化驗等檢查，檢查前的醫生問診只是為了縮小檢查范圍。
我們必須接受的一個現實就是：如今沒有設備檢查，沒有具體定量的檢查指標，醫生可能都不會下診斷，這也不能怪醫院或醫生，西醫就是這個流程：檢查-診斷-給藥或手術，而這個流程中哪些是可以在線上真正解決的呢？我想應該只有“給藥”了，這也是目前大多數互聯網醫療公司以藥品為突破口的原因之一。
說到第一步：檢查，互聯網醫療是無法在線上做到醫院要求的各種指標檢查的，所以最終線上問診，醫生給出的結果多是“可能”、“建議線下就診”等結論，同時也是現在線下問診開藥不支持首診的原因，因為在沒有線下確診的情況下開具處方藥是有很大風險的。
SO如果患者不用去醫院就能完成醫院要求的部分疾病確診的核心指標的檢測，理想情況下那是不是互聯網醫療就可以實現部分疾病的檢查-診斷-給藥的流程了，特別是常見的慢性病或者季節性疾病。
這就依賴于便攜式家庭健康檢測技術和設備的發展了，例如：血管納米機器人，全體24小時記錄生物體的各種生理指標。
2）溝通技術
患者另一個不愿意接受線下問診治療，或不相信在不去醫院的情況下，就可以給出一個滿意的健康問題的解決方案的原因是——信任的力量。
因為千百年來患者就醫都是與醫生面對面接觸進行檢查診斷，線上的方式中，也許目前的視頻溝通比起之前的文字或者語音的方式更進了一步，但是不光是醫生無法確認是否完整地了解到了相關的病情信息，就是患者自己也會擔心自己是否把病情完整陳述給了對面的醫生，醫生是否有認真在給自己看病。
因為每個患者的語音表達力都不同，很有可能患者對癥狀的描述并不是真實的疾病表現；更何況線下就醫，患者都有可能去多家醫院咨詢問診。
這種線上的溝通方式與面對面的溝通相比，以及加上患者早已習慣的線下就診方式，新的溝通問診形式讓患者對另外一頭醫生的信任感大打折扣。
文字溝通到語音再到視頻，問診溝通方式在不斷進步，但還不夠，與線下相比越真實越好，越趨于線下面對面的體驗越能增強患者的安全感和信任感，也許目前比較火的虛擬現實、元宇宙在溝通方式上的應用在一定程度上改變這種狀態。
以上提到的案例基本并不會在單一維度努力去沉淀自己的產品優勢，而多會綜合去發展，但是需要根據自身的優勢和能力范去選擇建立優勢的方向。
例如做醫藥電商的建東健康，也在大力發展醫療服務，家庭醫生方面的產品；專注做醫生問診服務的好大夫也有在向藥店、醫院合作方面發展；上文還未提到的平安健康更是在醫療服務、醫藥、健康險等方面同時發力（目前平安健康財報顯示其在醫療服務和醫藥上的營收占比已接近1:1）。
其實上文提到的這些維度大致可以分為：基礎能力建設層（數據+技術）、知識引流層、醫療服務層、醫療商品層。
醫療醫藥醫保醫健康，診前診中診后整閉環；線上線下，院內院外，醫院醫生醫護醫全家；上有政策，下找對策，To G To B To C To all in；深挖坑，廣積糧，醫路漫漫修遠兮！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
1.區別：vuex存儲在內存，localstorage（本地存儲）則以文件的方式存儲在本地,永久保存（不主動刪除，則一直存在）；sessionstorage( 會話存儲 ) ,臨時保存。localStorage和sessionStorage只能存儲字符串類型，對于復雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
2.應用場景：vuex用于組件之間的傳值，localstorage，sessionstorage則主要用于不同頁面之間的傳值。
3.永久性：當刷新頁面（這里的刷新頁面指的是 --> F5刷新,屬于清除內存了）時vuex存儲的值會丟失，sessionstorage頁面關閉后就清除掉了，localstorage不會。
注：大家可能覺得用localstorage可以代替vuex, 對于不變的數據確實可以，但是當兩個組件共用一個數據源（對象或數組）時，如果其中一個組件改變了該數據源，希望另一個組件響應該變化時，localstorage，sessionstorage無法做到，原因就是區別1。
vuex是存儲在頁面上的變量，說到底還是個Object，刷新頁面就清空了。而storage是存儲在瀏覽器的，和頁面就無關了，刷新頁面也不會清空
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我們經常會將Word轉換成PDF，下面給大家介紹一種很不錯的Word轉PDF格式的方式。
打開瀏覽器搜索speedpdf找到并打開在線轉換工具首頁，選擇主頁上的Word轉PDF進入轉換（也可以點擊上方所有工具字樣，選擇Word轉PDF進入）。
將需要轉換的Word文檔添加上傳后，點擊進度條后面的轉換按鈕，就可以開始轉換了，等待轉換完成后點擊下載箭頭即可。
如果轉換前有登錄賬戶，還可以通過點擊登錄頭像處，選擇賬戶，在轉換記錄中查看轉換狀態和下載轉換后的文檔。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
確保我們在vue中實現頁面跳轉到我們所想的頁面
可以看到當我們點擊不同的組件的時候我們實現了路由的功能：在vue中實現頁面的跳轉
注意看，當我點擊的時候上面地址欄中加載了不同的網頁。下面我們來學習下路由的寫法
路由書寫寫法：
在index.js中的router對象中書寫
-
const router = new VueRouter({
-
mode: 'history',//默認是hash模式
-
})
hash模式：
history模式：
兩種模式的區別：
起步 | Vue RouterVue Router3官網介紹： 起步 | Vue Router
- 下載與導入vue-router
- 導入組件
- 創建routes路由規則（路徑和頁面一一對應）
- 創建路由對象
- 把路由對象掛載到App.vue
- 在頁面寫路由導航router-link （生成a標簽）
- 在頁面寫路由出口router-view (生成占位盒子，用于顯示頁面內容)
下面開始我們相關文件的創建
1.創建我們的腳手架(此時沒有選擇Router)：
2.準備我們的App.vue文件：
-
<template>
-
<div>
-
<!-- 頂部導航欄 -->
-
<div class="footer_wrap">
-
<a href="#/find">發現音樂</a>
-
<a href="#/my">我的音樂</a>
-
<a href="#/friend">朋友</a>
-
</div>
-
<!-- 下面內容 -->
-
<div class="top"></div>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
methods: {}
-
}
-
</script>
-
-
<style scoped>
-
body,
-
html {
-
margin: 0;
-
padding: 0;
-
}
-
.footer_wrap {
-
position: fixed;
-
left: 0;
-
top: 0;
-
display: flex;
-
width: 100%;
-
text-align: center;
-
background-color: #333;
-
color: #ccc;
-
}
-
.footer_wrap a,
-
span {
-
cursor: pointer;
-
flex: 1;
-
text-decoration: none;
-
padding: 20px 0;
-
line-height: 20px;
-
background-color: #333;
-
color: #ccc;
-
border: 1px solid black;
-
}
-
.footer_wrap a:hover,
-
span:hover {
-
background-color: #555;
-
}
-
-
.top {
-
padding-top: 62px;
-
}
-
-
.footer_wrap .router-link-active {
-
background-color: #000;
-
}
-
</style>
3.在src下面新建views文件夾并創建我們需要的.vue文件
3.1 find.vue
-
<template>
-
<div>
-
<div class="nav_main">
-
<router-link to="/Ranking">排行</router-link>
-
<router-link to="/Recommend">推薦</router-link>
-
<router-link to="/SongList">歌單</router-link>
-
</div>
-
-
<div style="1px solid red;">
-
<router-view></router-view>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'find',
-
}
-
</script>
-
-
<style scoped>
-
.nav_main {
-
background-color: red;
-
color: white;
-
padding: 10px 0;
-
}
-
.nav_main a {
-
text-align: center;
-
text-decoration: none;
-
color: white;
-
font-size: 12px;
-
margin: 7px 17px 0;
-
padding: 0px 15px 2px 15px;
-
height: 20px;
-
display: inline-block;
-
line-height: 20px;
-
border-radius: 20px;
-
}
-
.nav_main a:hover {
-
background-color: brown;
-
}
-
.nav_main .router-link-active{
-
background-color: brown;
-
}
-
</style>
3.2 my.vue
-
<template>
-
<div>
-
<img src="../assets/my.png" alt="" width="100%">
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'my',
-
};
-
</script>
-
-
<style scoped>
-
-
</style>
3.3 friend.vue
-
<template>
-
<div>
-
<ul>
-
<li>這是當前頁面 query 接收到的參數:
-
<span>姓名：{{ $route.query.name }}</span> --
-
<span>年齡：{{$route.query.age}}</span>
-
</li>
-
<li>這是當前頁面 params 接收到的參數:
-
<!-- <span>姓名：{{ $route.params.name }}</span> --
-
<span>年齡：{{ $route.params.age }}</span> -->
-
</li>
-
</ul>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'friend',
-
};
-
</script>
-
-
<style scoped>
-
-
</style>
3.4 notfound.vue
-
<template>
-
<div class="box">
-
<h1>這是一個 404 頁面</h1>
-
<img src="../assets/404.png" alt="">
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'notfound',
-
data() {
-
return {
-
-
};
-
},
-
-
};
-
</script>
-
-
<style scoped>
-
.box {
-
display: flex;
-
flex-direction: column;
-
justify-content: center;
-
align-items: center;
-
}
-
</style>
4.準備圖片素材（所有素材可私信博主獲取）
5.所有準備工作做完現在開始我們的文件配置
1.下載與導入vue-router
npm i vue-router@3.6.5
導入vue-router (在main.js中)
-
//main.js中導入
-
// 0.導入路由
-
import VueRouter from 'vue-router'
-
// 使用vue的插件，都需要調用Vue.use()
-
Vue.use(VueRouter)
2.導入組件
@符號代表 /src 文件夾的絕對路徑，在腳手架中文件比較多的時候，使用這個@符號會更加的方便
在main.js中導入
-
// 導入組件
-
import find from '@/views/find.vue'
-
import friend from '@/views/friend.vue'
-
import my from '@/views/my.vue'
-
import notfound from '@/views/notfound.vue'
3.創建路由規則
路由規則作用： 設置 url 和 組件 對應的規則
在main.js中寫入
-
// 路由規則
-
const routes = [
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound },
-
]
4.創建路由對象
路由對象： 幫你管理這些路由規則
在main.js中寫入
-
// 創建路由對象
-
const router = new VueRouter({
-
routes// (縮寫) 相當于 routes: routes
-
})
5.掛載路由到根組件
掛載到根組件作用：讓你的整個應用都有路由功能
在main.js中寫入
-
// 掛載路由到根組件
-
new Vue({
-
router,
-
render: h => h(App)
-
}).$mount('#app')
6.在頁面寫路由導航router-link
作用與a標簽一樣實現跳轉，好處：當點擊鏈接的時候自帶一個專屬類名
在App.vue中我們將傳統的a標簽進行替換：
替換a標簽原因：便于我們做專屬效果
我們選中點擊的超鏈接做觸發效果：
7在頁面寫路由出口router-view
占位盒子，用于渲染路由匹配到的組件
（<router-view> : 是vue內置的一個組件,會自動替換成路由匹配的組件 ）
好了一個最最最基本的路由就被我們制作完成啦！下面我們來看看效果：
上述的操作有些許麻煩，下面我們來使用我們開發中常用的自動配置方法
創建腳手架方式與手動配置類似，唯一不同是此處必須選擇Router
對比手動模式：
此刻：腳手架已經幫我們創建好了Router路由不需要我們下載與導入vue-router了
只需要寫：
- 導入組件
- 配置路由規則
- 路由導航
- 路由出口
并且為了進一步的封裝我們的配置信息，我們的配置代碼將寫在router/index.js下，不再是全部寫在main.js下。
1.導入組件（index.js中）
-
import find from '@/views/find.vue'
-
import friend from '@/views/friend.vue'
-
import my from '@/views/my.vue'
-
import notfound from '@/views/notfound.vue'
2.配置路由規則（index.js中）
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound }
3.路由導航（直接cv我們之前的App.vue文件）
-
<router-link to="/find">發現音樂</router-link>
-
<router-link to="/my">我的音樂</router-link>
-
<router-link to="/friend">朋友</router-link>
4.路由出口（App.vue中）
-
<div class="top">
-
<router-view></router-view>
-
</div>
效果查看：
自動配置省去了一些固定不變的操作，我們不需要寫繁瑣且固定的代碼，只需要寫不同的代碼。且代碼書寫的位置都給我們設置好了，我們直接遵守該規范書寫代碼即可
路由重定向官方文檔：重定向和別名 | Vue Router
重定向應用場景： 頁面輸入根路徑/ , 自動跳轉到首頁
注意點: 重定向只是修改路徑， 還需要單獨去設置路由匹配規則
重定向命令：
-
{
-
path: '/',
-
/*
-
(1)重定向只是修改頁面路徑。 輸入 / 會重定向到 /路徑
-
(2)只有component才會讓vue去尋找路由匹配頁面。所以設置了重定向，還需要單獨設置匹配規則
-
*/
-
redirect: "路徑"
-
},
1. 就拿我們剛才創建的舉例：
實現效果：當我在瀏覽器中打開的時候我沒有輸入任何路徑，vue自動幫我們跳轉到了 my.vue這個頁面組件
2.也可以利用重定向來設置當我們路徑錯誤提示404頁面：
實現效果：當我任意輸入沒有匹配的路徑，自動幫我們跳轉到了notfound.vue這個組件
實現頁面中存在第二級的跳轉
寫法(拿我們上述的案例實操，需要素材可私信博主喔)：
①在index.js中引入
-
// 導入二級路由
-
import Ranking from '@/views/second/Ranking.vue'
-
import Recommend from '@/views/second/Recommend.vue'
-
import SongList from '@/views/second/SongList.vue'
②在需要引用的組件中使用：
-
//格式：
-
{
-
path: '路徑', component: 組件名, children: [
-
//此處填寫二級路由的路徑信息
-
]
-
}
-
{
-
path: '/find', component: find, children: [
-
{path:'/',redirect:'/SongList'},
-
{ path: '/Ranking', component: Ranking },
-
{ path: '/Recommend', component: Recommend },
-
{ path: '/SongList', component: SongList }
-
]
-
}
③寫路由導航與出口
查看效果：
可以看到：當我們點擊一級路由之后，我們還可以點擊二級路由到我們的專屬頁面中
有兩種跳轉傳參方式：
- 聲明式導航
- 編程式導航
①query寫法：
在路徑中加參數信息即可
<router-link to="/路徑?參數名=參數值&參數名=參數值</router-link>
接收信息：
在觸發的組件中書寫{{ $route.query.屬性名}}接收
舉個例子：
②params寫法：
在index.jsx文件中寫：參數名。在需要傳遞的路由路徑中寫參數值
接收信息：
在觸發的組件中書寫{{ $route.params.屬性名}}接收
實現效果：
①query寫法:
結構：
-
this.$router.push({
-
path: '/路徑',
-
query: { 屬性名: '屬性值'}
-
})
接收信息：
在觸發的組件中書寫{{ $route.query.屬性名}}接收
舉個例子：
②params寫法
結構:
-
this.$router.push({
-
name: '我們注冊路徑的組件名',//寫path獲取不到值?。?！
-
query: { 屬性名: '屬性值'}
-
})
注意點:寫path獲取不到值，需要用name
接收信息：
在觸發的組件中書寫{{ $route.params.屬性名}}接收
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家有沒有遇到這樣的問題，當你面對非常復雜的信息時，在進行信息整理設計時，往往會陷入比較糾結的場面，不知道怎么把這一堆信息進行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續閱讀。
本篇文章會提供一種解決排列問題的簡單底層邏輯，我們可以圍繞這個邏輯去排布我們的頁面，從而讓整體排版變得更加清晰合理。
信息層級存在于我們目前看到的每一個畫面。它本質上是信息組織的一種方式，通過信息的放大縮小和對應的位置，能夠將復雜的信息分為不同的模塊呈現在我們的視野中。
大家先簡單看一下圖中兩個畫面，你就能夠直觀感受到信息層級對于用戶認知的作用。
不好的信息層級就像左圖一樣會讓畫面比較雜亂，難以進行視覺上的識別。而優秀的信息層級就像右圖一樣能夠讓我們快速且準確的識別出畫面想要傳遞的信息。
因此信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景，我們不僅需要考慮清晰傳遞業務價值，合理的信息層級劃分也是提高產品體驗的重要部分，好的信息層級則意味著更好的使用體驗。
既然信息層級對于使用體驗比較關鍵，那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網上的資料也是參差不齊，我也曾為此類問題查閱了大量資料，想要找到一個簡單高效的答案。
但目前查閱到的資料幾乎都在講排列的四個基本原則：對比、對齊、親密、重復。不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛，讓人很難在實際中更有效地利用。
即使我對排版四個原則非常熟悉，在面對復雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進行了進一步的探索：
經過線上頁面與概念的整體研究發現，他們在遵循排版原則的基礎上，本質上都存在一個簡單的邏輯：那些優秀的頁面設計都把主內容的層級控制在了三層左右，如下圖所示。
因為三層左右的層級是最容易被用戶感知，且視覺上不易混亂。超過三層后隨著層級越多復雜性會相對增加。
比如我們看下面這兩個例子，左邊層級因為特別復雜，造成用戶獲取信息效率變低，而通過層級的轉換，我們可以將其變得更簡單且易讀。
再舉一個例子，我們在大部分場景見到的純文字排版基本都離不開以下幾種形式：
因此，我們需要在排版時需要首先思考一個邏輯：那就是盡量將我們的內容層級控制在三層左右。且這三層內有比較明顯的對比關系。
有同學看到這肯定要問了，這個道理我也懂啊，可是在實際業務中大部分時間拿到的信息太多，根本做不到保持在三層以內。別急，這篇文章的重點當然不是告訴你這么簡單的道理，而是在面對復雜層級的時候，我們應該怎樣去控制它的層級表現，從而讓它在最終呈現上保持在三層左右，讓用戶獲取信息的效率更高。
其實我們在實際中的大部分優秀頁面，在本身的信息層級上可能都非常復雜，但我們可以通過一系列的方法，去減輕這種多層級的影響，從而讓我們的頁面即使承載了很多復雜的信息，也能變得更加簡單清晰。那我們接下來就闡述一下對復雜層級的處理方案。
這可能是被很多人忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難，但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進行第一層的判斷。
源頭降低的本質就是判斷我們當前所要呈現的信息是不是必要的。其實這也是在目前工作中遇到的場景，比如某些時候產品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設計的一致性。
1. 當前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響。
比如當你在進行打車的時候，當你輸入目的地之前，一切其他的信息都無需呈現。當你輸入目的地后，車輛的相關信息和價格才會進行呈現，當你打車后，司機的相關信息才會進行呈現。這些都是按照用戶的使用場景來進行對應的呈現。
2.當前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現。
當你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當你瀏覽新聞的時候，標題永遠是最關注的，而評論，作者，簡介等都是可以忽略的信息。
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產品或者業務溝通，弄清楚該信息呈現的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
信息排布的本質是通過我們對信息進行排列上的調整，來將多余的層級融入到三層以內。從而讓我們整體的頁面顯得更加簡潔。
通過目前的實踐總結，我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。
信息分組是大家在設計時都能夠想到的形式，分組能夠將復雜的信息打散，從而降低頁面整體的復雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。
那么這三種方式有沒有區分呢，VIVO設計團隊曾經就這個問題展開過用戶調研，但結果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現信息時的整體視覺觀感，因此我們可以根據當前信息的復雜度作出以下規則：
通過這三種場景的區別，我們可以根據信息復雜度更好地選擇分割方式，讓界面的表達清晰明確。
組件其實是目前大部分設計師在進行信息排布時必備的部分，因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結構、表格結構、步驟條、選項卡。
▍樹形結構
對于有關聯性的多層級非常適合，可以將復雜的層級結構進行收攏，從而能夠顯著降低信息的復雜度。
▍表格結構
對于信息多且關聯性不大的復雜信息，可以聚合到表格來進行呈現，但表格的呈現方式不宜濫用，需要根據我們場景來進行選擇。
▍步驟條
步驟條則對場景要求非常明確，我們可以將多個場景通過分布的形式進行呈現，從而減少當前頁面的復雜度。
▍選項卡
選項卡更適合與同級的數據，對于同類型的結構可以更好地將頁面進行拆分，從而讓當前頁面更簡潔。
由于組件這一塊大家的認知已經比較全了，在這里就不進行更深入的講解了。如果有需要的同學可以通過瀏覽各大廠的組件文檔去進行更細致的查閱。
通過改變布局的方式，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。這句話什么意思呢，舉個簡單的例子：
從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結構變為左右結構，達到從視覺上簡化層級的作用：
當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以考慮通過改變結構來減少其復雜度，比如上述的兩欄結構，甚至三欄結構，從而讓整體變得更加簡潔。
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，Coding產品設計中將標題與tab利用分割排列在一起，從而變為同一層級，這個時候就不會出現四層的復雜結構，頁面還是保持三層結構，通過這種方式有效降低了頁面的復雜度。
信息融入這個方法，當我們在進行B端布局時，用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間，還能夠降低信息層級的復雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。
信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜，我們再看一個例子：
可以看到TAPD將「另存為視圖功能」與「缺陷統計」進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復雜度：
因此我們需要學會對信息分級，不重要的信息就進行弱化，這樣整體的表述上會好很多。
通過上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復雜信息簡化在三層以內，從而讓我們最終的頁面呈現不會太過復雜，更容易被用戶理解。但不可否認仍會有更復雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
在研究的過程中，也總結了目前在進行信息層級排布過程中比較糾結的一些細節點，也分享給大家。希望對遇到相同問題的同學一些幫助。
大家對「對齊」并不陌生，它存在于我們的每個頁面。但在對齊的過程中，我們可能會忽視一個小細節點，那就是沿著字的軸線對齊。比如下圖兩個例子：
在看見左圖時，總覺得哪里會有點奇怪，但又不知如何表述。而右圖看著就會相對更舒服。經過對比過后明顯發現右邊的圖整體相比于左側會更整齊，而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組。
而左側因為標題字和底部字沒有形成對齊，因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現中顯得更整齊。
這是我平時在做設計呈現時也會糾結的一個問題。當你想用卡片來呈現視覺時，你有沒有糾結過到底是用線框卡片還是背景色填充呢。
我就曾陷入這種糾結，但在去搜索查閱時，發現目前其實關于這塊相關的資料，因此在大部分情況下都是由設計師自行決定的。但經過線上產品的調研發現，這塊內容其實也包含著一定的規則：
1.取決于卡片的數量
對于卡片少的其實可以用色塊來呈現，對于卡片多的可以考慮用線框來進行。這其實主要是從一個視覺的維度來進行呈現，舉個簡單的例子：
通過coding和飛書的卡片對比，你會發現卡片過多時線性設計會讓頁面顯得更整潔和清新，色塊設計就會讓頁面顯得更厚重。右側整體的呈現行會顯得更好一些。
2.取決于頁面的視覺重心
這里頁面視覺重心的含義是當你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調，可以看到下圖的例子，右側的頁面會相對更穩重一點。
在進行色塊時，時常會糾結用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區分呢，我們應該何時使用這兩種色彩呢。
我們先看一下案例：
可以看出目前這兩種顏色的運用更多的是功能上的區分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導或者營銷性質的頁面。從表現性質上來講更重。
2.而灰色背景更適用于「利用灰色背景來區分層級關系」或者一些微弱提示的信息。從表現形式上來講更輕。
所以我們可以根據當前的信息場景來選擇合適的色彩，后面再面對時就可以不用那么糾結。
本期的內容到這里就結束了。關于這期的信息層級內容，真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優秀頁面并不是因為它本身就簡單，而是通過我們合理的信息層級控制，讓最終呈現上顯得不復雜，這其實也是我們在實際工作中需要注意的很重要的一個點。
本文重點內容再回顧，當我們遇見復雜的信息層級時，需要分三步：
1.明確當前所有信息的必要性和重要分級，需要從源頭去深入了解；
2.運用五個方法可以有效減低信息層級：信息分組、組件拆分、更改布局、信息融入、信息弱化
3.同時在運用過程中需要注意影響層級的小細節
以上是本文關于信息層級的另一種角度的描繪，雖然沒有提及四大基本原則，但在實際運用中也是很重要的。最后，雖然進行了很多資料查詢，但在在闡述過程中不可避免會有闡述不到位的地方，歡迎進行反饋。
原文地址：站酷
作者：蒙東東
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
上部分為標題、中間為表單、底部為確定按鈕
底部背景、標題文本、右上角關閉按鈕
祝福語文本、紅包數量文本、紅包總金額、當前余額文本顯示、以及前往充值按鈕
左邊為需支付金額顯示，右邊為取消和確定按鈕
圖片寬度380px像素，高度56px像素
2）背景圖片自動填充
布局一個div，寬度為400px像素，高度為56px像素，然后再設置背景圖片樣式，由于圖片本身寬度小于div寬度，div會多出20px像素，圖片會自動填充，默認效果如下
-
<div style="width:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;">
-
-
</div>
3）圖片百分比顯示
再給div設置背景百分比縮放顯示，效果如下
background-size: 100%;
4）文本
布局一個span標簽，顯示"添加紅包"文本，白色黑體，18號字體，加粗，左對齊，且左邊距20px像素。并設置div標簽56px像素垂直居中樣式，效果如下
5）關閉按鈕
在右上角添加一個關閉按鈕，一般可以設置一個svg標簽圖標，設置高28px，寬36px
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC設置相對定位position樣式，位于右上角。它所在的父級就要設置絕對定位relative。這樣關閉按鈕圖標就會以它所在的父級定位，否則可能會布局錯位，比如下面錯位效果
-
<style type="text/css">
-
.title { width: 400px; height: 56px; background: url(/1674461966454.jpg); background-size: 100%; line-height: 56px;position:relative; }
-
.title-text { font-size: 18px; font-weight: bold; color: #fff; font-family: 黑體; margin-left: 20px; }
-
.close { position: absolute; top: 0px; right: 0px; width: 36px; height: 28px; }
-
</style>
-
-
<div class="title">
-
<span class="title-text">添加紅包</span>
-
<img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC" alt="">
-
</div>
1）組成元素
紅色星號、文本、輸入文本框、刷新文本按鈕
2）calc函數
它屬于css3的功能，calc() 函數用于動態計算長度值。對于布局非常有作用。
需要特別注意，函數內的參數值前后都需要保留一個空格，例如：width: calc(100% - 40px)；
3）刷新小圖標
樣式設置16x16高寬度
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=4）文本框默認高亮
input輸入文本框默認點擊選中會有一個高亮的效果，可以設置樣式去掉
outline:none;5）隨機文本
設置隨機祝福語文本值，可設置js全局數組參數變量保存。
并且給右邊的刷新按鈕綁定點擊事件，然后在事件內使用隨機函數進行隨機顯示
-
<script type="text/javascript">
-
$(function () {
-
-
// 祝福語
-
var labelText = ['成就一億技術人!', '節日快樂', 'Hello World', '新春大吉!', '大吉大利', 'Bug Free'];
-
$('.cl-input img').click(function () {
-
// Math.random() - 隨機函數會產生0~1之間的值
-
var index = parseInt(Math.random() * labelText.length);
-
var text = labelText[index];
-
$('.cl-input input').val(text);
-
});
-
});
-
</script>
-
<div class="content-label">
-
<div class="cl-text">
-
<span style="color:#f00;">*</span>
-
<span>祝福語</span>
-
</div>
-
<div class="cl-input">
-
<input placeholder="請填寫紅包祝福語或標題" value="成就一億技術人!" />
-
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=" alt="">
-
</div>
-
</div>
布局和祝福語一樣，刷新按鈕換成了單位文本。
這里文本框有個離開焦點事件，如果判斷沒有輸入值，那么提示”請輸入數量"，并且紅包數量只能是正整數，文本框也變為紅色邊框，默認則為藍色邊框
-
<div class="content-label">
-
<div class="cl-text">
-
<span style="color:#f00;">*</span>
-
<span>紅包數量</span>
-
</div>
-
<div class="cl-input">
-
<input placeholder="請填寫紅包數量" value="" />
-
<span>個</span>
-
</div>
-
</div>
-
$("#txtCount").blur(function () {
-
txtCount = $(this).val();
-
if (txtCount == undefined || txtCount == null || txtCount == '' || txtCount.trim() == '') {
-
$("i", $(this).parent()).show().html('請輸入數字！');
-
$(this).parent().addClass('red-border');
-
}
-
else {
-
if (txtCount <= 0) {
-
$("i", $(this).parent()).show().html('請輸入有效數字格式！');
-
$(this).parent().addClass('red-border');
-
}
-
else if (!isNaN(txtCount)) {
-
$("i", $(this).parent()).hide();
-
$(this).parent().removeClass('red-border');
-
}
-
else {
-
-
}
-
}
-
});
布局和前面一樣，這就是前端布局的魅力，有很多可以重用的東西
-
<div class="content-label">
-
<div class="cl-text">
-
<span style="color:#f00;">*</span>
-
<span>紅包總金額</span>
-
</div>
-
<div class="cl-input">
-
<input placeholder="請填寫紅包總金額" value="" />
-
<span>元</span>
-
</div>
-
</div>
這里的布局和前面稍微多點東西，布局差不多。
這里只做讀取展示用，也可以用input輸入文本框，設置默認只讀即可
-
<div class="content-label">
-
<div class="cl-text">
-
<span style="color:#f00;">*</span>
-
<span>余額支付</span>
-
</div>
-
<div class="cl-input">
-
<label>當前余額：<b>51.25</b> 元</label>
-
<span class="span">前往充值 > </span>
-
</div>
-
</div>
當點擊文本框時，先判斷是否已經提示無效信息，也就是已經有紅色邊框，有則不顯示藍色邊框，沒有則顯示藍色邊框。當離開文本框焦點，那么則移除藍色邊框
-
// 文本框點擊事件
-
$('.cl-input input').click(function () {
-
var className = $(this).parent().attr('class');
-
if (className.indexOf('red-border') < 0) {
-
$(this).parent().addClass('blue-border');
-
}
-
}).blur(function () {
-
$(this).parent().removeClass('blue-border');
-
});
1）支付額文本
這里布局左定位，金額數字加紅色字體
2）取消和確認按鈕
取消按鈕鼠標移動上去邊框變深，直接使用css的hover屬性即可完成。
確認按鈕的效果使用同樣的方式
3）布局效果
4）布局代碼
-
<!--按鈕-->
-
<div class="button">
-
<div class="price">
-
<span>需支付：</span>
-
<span id="priceSpan" style="font-size:20px;color:#f00;">0.00</span>
-
<span>元</span>
-
</div>
-
<div class="btn">
-
<div class="btnCancel">
-
<span>取消</span>
-
</div>
-
<div class="btnOk not-allowed">
-
<span>確定</span>
-
</div>
-
</div>
-
</div>
5）交互代碼
-
// 紅包個數
-
var txtCount = 0;
-
var txtPrice = 0;
-
$("#txtCount").keyup(function () {
-
txtCount = $(this).val();
-
$("#priceSpan").html(txtCount * txtPrice);
-
});
-
-
// 紅包總金額
-
$("#txtPrice").keyup(function () {
-
txtPrice = $(this).val();
-
$("#priceSpan").html(txtPrice);
-
});
紅包數量和紅包金額那里還有幾個交互和邏輯判斷，有興趣的小伙伴可以自己實現下，有疑問的可咨詢了解
完整代碼可以查看gitCode：小5聊 / Csdn Red Bag Html · GitCode
| calc()函數 | 可用于高寬度精準布局，更加合理布局 |
| position和relative | 相對和絕對定位，同樣有助于合理定位和布局 |
| Math.random() | 隨機函數，隨機產生0~1的值 |
| keyup() | 鍵盤彈上事件 |
| click() | 元素點擊事件 |
| blur() | 離開焦點事件 |
總結：前端布局，要玩出花樣和效果，還是需要點藝術天賦?？傊?，挺有趣的，剛入門可能會覺得比較難，當你熟練之后，還是挺有趣的！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
通知是許多產品中不可或缺的一部分，它用于傳遞產品的一些新的信息狀態，幫助用戶能夠及時收到信息。
本文將討論五種類型的 UI 通知，以及何時以及如何使用它們的基本規則。
通知是產品能夠與用戶及時同步信息變化，及時發送重要通知，例如產品更新、信息提醒、互動提醒、新消息通知等。
消息通知是為產品賦能，為用戶提供幫助，便于快速獲取對應的通知信息，例如產品更新、信息提醒、互動提醒、新消息通知等，在 App 和網頁應用中最常見的信息交換方式則是消息通知。
消息作為一種信息交換方式，抽象其過程，即為“在達到某一觸發條件下，由發送方發送消息給到接收方，接收方可針對此條消息提供反饋”。
基礎的通知模塊通常有標題、內容、入口、徽標、識別圖標五個元素構成
標題區域：用戶傳遞消息的核心區域，整個通知的信息都是圍繞標題進行，一般標題以簡短精煉為主，讓用戶在最短時間了解到關鍵信息。
內容區域：主要描述更加詳細的通知內容，當然這里的內容也不建議超過2行，并且不要重復標題中內容
操作區域：通知分為可點擊類和不可點擊類，當通知模塊需要用戶點擊時，視覺上應該更加具象，如按鈕、箭頭，不要讓用戶產生思考。
圖標圖片：有意義的圖像可以強化通知的內容，例如，如果你將收到的消息通知用戶，你可以包含發件人的頭像。
通知的模式根據不同的場景也會有不同類型，接下來將一一講解這5種通知類型，以及使用場景。
徽標是一個小的填充橢圓形，可以出現在應用程序圖標上并指示未看到的更新?；諛丝梢杂幸粋€數字，用于通知用戶未讀通知的數量。用戶檢查更新后，徽章會從應用程序圖標中消失，并在新通知到達時再次出現。
感知：它可以對用戶產生積極的影響，在某些情況下，用戶可以將徽章視為有價值的獎勵，例如，徽章會通知用戶他們在社交網絡上收到新的點贊、評論，Nir Eyal曾在他的書“Hooked”中描述了這種心理效應。
視覺：紅色作為警惕色，用戶看到后會更具有點擊欲望，相對產品的一些數據指標會有對應的提升
需要用戶采取額外的行動，徽章本身不是通知，這是通知的警報，它只是說明了用戶有新更新的事實，用戶必須單擊或點擊帶有徽章的圖標才能看到實際消息，紅色為強干擾元素，對一些具有強迫癥的用戶很不友好，在體驗上會有一定的影響
一般用戶消息的通知，例如系統通知、社交中的點贊、評論、回復等內容
推送通知是出現在移動設備的鎖屏上并引起很多關注的通知。
很難讓用戶忽略該推送通知，如果用戶不進行處理，會長時間浮動在手機上
由于系統上app很多，會導致用戶對該類的通知處于麻木狀態，推送通知的效果不是很強
如果過度使用，頻繁的推送通知，即使它們很有價值，也可能會惹惱用戶
推送通知適用于重要且時間敏感的更新（即用戶設置的日歷提醒或警報、航班延誤或已交付訂單的更新），在您發送推送通知之前，您需要確保您將與用戶共享的信息是有價值的和時效性的，否則，最好使用其他類型的通知。
a、不要使用推送通知來提示用戶對應用進行評分
b、不建議將推送通知用于促銷或廣告
c、不要使用推送通知來鼓勵用戶返回應用，例如“好久沒見到你了，是否想念了呢”通知不會為用戶提供太多價值，需要向用戶明確說明他們應該返回應用程序的目的
d、允許用戶更改通知行為
用戶會收到一封電子郵件，其中包含有關更新的詳細信息，不過這類通知目前在國外的一些網站使用頻率比較高，根據習慣來講，國外更多的還是習慣用郵件的方式作為重要信息的交流方式，相比之下國內使用郵件來傳遞信息的頻率略低
給用戶更多的控制權，由用戶決定是否要訂閱電子郵件，如果電子郵件標題足夠好，用戶可能無需閱讀電子郵件就可以理解上下文。
周期長，國內用戶可能幾個月甚至1年都看不了一次郵件，此外，電子郵件可能會在用戶收件箱中丟失（即轉到垃圾郵件文件夾）
它需要切換上下文，當應用程序發送需要用戶操作的電子郵件通知時，用戶必須切換到電子郵件應用程序才能完成操作，這可能不是很方便，尤其是當您與移動設備上的應用程序交互時。
需要安全性時，想要使用電子郵件通知有兩個原因，首先，出于安全目的，你可能希望將電子郵件用作單獨的通道（即，當用戶嘗試登錄服務時，應用程序會發送一封電子郵件，其中包含有關新登錄嘗試的通知）。4.Toast通知
Toast 屬于一種及時性通知，當用戶進行操作時，及時給出反饋，通常在移動端顯示在界面的上、中、下三個位置，而web端通常顯示在頂部區域，toast持續一定時間后會自動消失，對用戶的打擾較小
Toast 是與當前頁面的內容強關聯，用戶無需離開當前頁面就能看到反饋消息
不會中斷用戶操作，出現時間短，對操作上無影響
丟失信息的風險，用戶注意力不集中時，會出現漏掉關鍵性信息的情況
Toast 是一種操作狀態，例如，消息發送時可以在消息發送成功時顯示toast“發送成功”
不要使用 toast 來提示與當前用戶操作無關的信息
不要將 toast 用于錯誤消息，由于 toast 會在短時間內消失，因此某些用戶可能無法閱讀錯誤消息
全屏覆蓋/模態窗口是出現在應用內容頂部并要求用戶做出決定的對話框窗口，這種類型的通知會在所有應用功能出現時禁用它們并保留在屏幕上，直到用戶完成所需的操作。
用戶在訪問應用程序時將 100% 看到通知，無法避免此通知。
它會阻礙用戶當前的操作，迫使用戶操作通知相關的內容
全屏覆蓋/模式窗口應僅用于需要用戶操作的最關鍵的系統更新，例如，它可能是阻止應用程序正常運行的錯誤或需要特定用戶決策的關鍵信息。
詢問用戶是否想接收特定類型的信息，當用戶明確選擇接收某些類型的通知時，說明他們的意愿更強，比產品強制傳輸消息效果較好
一些流氓軟件會發送一些系統通知，用戶無反饋后，還是會重復發送，特別是一些短信push，建議用戶沒有回復時，也不要發送后續通知，大部分人的本性是不愿意被脅迫做一些事。
不要在通知中包含敏感信息，例如一些文化特殊性、地域的特殊性等，防止出現觸及別人痛處的一些文字語言
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
雙鉆模型是設計師在創作過程中可以循環復用的系統，他不僅可以在我們設計界面時運用到，在一些數據提升優化等方面同樣適用，雙鉆模型可以使設計更加理性，它能夠在我們做項目時思維更加具有邏輯性，我們設計過程中更多的方法還是遇到問題，直接輸出解決方案，而該模型可以讓我們的思考過程更加具象化、合理化，他與常規的思考方式不同，該模型更加注重問題的本質，全流程圍繞問題去解決問題，并且在大的項目上能夠提升團隊效率，與其他模型不同，該模型的適用場景更加廣泛。
雙鉆模型是由2005年英國設計委員會正式公布并進行驗證，但是在之前BDC就提到過雙鉆模型，而我們現在看到的模型是通過改良后進行使用的，不過這不重要，我們只需要了解它的用處價值以及如何使用就行了。
我們看下圖中，雙鉆模型主要為4個大階段，發現期、定義期、發展期、交付期。左邊的鉆石我們可以理解為發散思維階段，我們為一個沒有目標的項目去腦爆出想法或者問題，其次選擇出正確的方向，右邊的鉆石我們可以理解為從正確的方向中抽取正確的事情，最后把正確的事情完成。
發現期我們理解為是探索期，該階段主要是發散思維和收集資料，研究問題的本質，把我們能想到與該問題具有關聯性的信息全部列出來。
質疑：對一切信息的質疑，簡單理解就是我們需要多問自己為什么，需求的合理性、用戶流程是否合理、為誰而做、會在什么場景使用、會遇到什么問題等等，把所有能想到的不合理事情列舉出來，這個小階段我們可以理解為是探索和發掘問題。
研究：針對問題去做對應的調研，如不知道用戶使用場景，我們通過用戶調研可以得到結果，需要做什么研究調研可以根據需求遇到的具體問題去使用不同的研究方法，例如一些訪談、競品分析、數據分析等等。
該階段主要是把發現期的問題收攏聚焦，即基于發現期的調研分析、問題洞察形成結論，尋找可以突破的機會點，例如我們在發現期發現的問題是用戶的目標是什么，影響用戶目標的點可能有哪些，那么在定義階段就需要針對我們提出的這些假想進行聚焦，用戶是怎么完成目標，通過什么場景完成目標等等，篩選問題時一定要綜合評估，尋找可行性。
該階段是已經開始要開始進行落地了，第一第二階段是找到正確方向，而現在則是用正確的方法去做正確的事情，我們要把聚焦的問題具象化，構思我們能夠想到的方案，比如設計前期探索定義的是年輕、輕盈，在該階段我們就需要根據關鍵詞去考慮如何進行設計，這個階段是一個不斷生產和推翻的流程，一直重復，直到找到能夠落地的方案。
這個階段就顧名思義比較簡單了，根據發展期確定的方案，最后進行實際的落地，并且是可實施、可執行的，通過團隊項目流程推動上線，最終展現給用戶。
以上便是雙鉆模型的定義，先舉個通俗的例子大家理解下模型，例如節假日我們想去旅游，a）我們去什么地方？參觀古都？自駕游？游樂園？這個就是發現期，我們把想去的想玩的全部列出來，b）經過篩選我們絕定去游樂園，這個就是大的方向，c）我們要去哪個游樂園？歡樂谷？方特大世界？這個階段就是發展期，我們要找到能去的地方，d）最后，怎么去？開車？跟團？玩多久？等等，這個就是交付期，可落地的。
當然這個案例是結合生活方便大家理解，在實際項目中它的用處不止如此。
網上也有很多雙鉆模型的案例，但大多都是偏向理論，并且案例也跟設計無關聯，我從設計角度單刀直入的引入雙鉆模型，很簡單，很粗暴～～
例如我們要做一個唱歌產品的改版，站在設計師的角度我們需要去定義他的基本風格和基本色彩規范等等，但是總不能上來就去做設計吧，我們要知道我們產品的群體是誰？具體的用戶屬性是什么樣的？有什么樣特征呢？等等。這個階段就是“雙鉆模型”的第一個階段，發現期。
發現期就是要發散思維，比如我們”唱歌“產品的用戶群體是年輕群體，用戶特征是18-25歲的在校大學生，用戶使用場景大多是宿舍、教室等校園環境，我們就需要去根據這些信息去進行設計思維發散，例如什么的風格符合這類群體，先把關鍵詞舉例出來，如年輕、活力、青春、潮流、二次元...，依據這些關鍵詞做一些飛機稿，不斷進行探索。
當然不止這一個思路，我們也可以通過競品分析的方法去擴展思路，如比較潮流的RAPAPP、二次元較重的B站，在比如現在的劇本殺相關的app等等，分析他們的設計風格和表現方式，嘗試融合出飛機稿。
小結：第一步的核心就是發散思維，把要做的產品背景信息全部羅列出來，通過橫向縱向的方式去散發關鍵詞，最后做出對不同風格的設計，進行探索。
像前面說的，該階段就是把發現期散發的想法往回收一收，畢竟那么多想法哪一個才是我們需要的，我們需要在這個階段去篩選出來。
我們按照年輕、二次元、潮流、國潮這些關鍵詞出了一些飛機稿，我們需要去收攏起來看看那些可以與產品特性和用戶屬性真正具有關聯性，假設用戶群體雖然是18-25歲的學生，但是我們通過訪談和其他調研方式發現這類群體中喜歡二次元歌曲的群體偏少，而潮流、國潮等關鍵詞更符合這類群體定位，并且也能夠跟產品的主打方向匹配上，那么就可以剔除二次元相關的飛機稿了。
該階段最好能收縮到同一個維度2-3個方案便于我們去進行驗證，假設我們通過后續調研發現，國潮與潮酷用戶群體喜好占比差不多，但是潮酷是產品未來的方向，我們就可以嘗試剔除國潮，但在潮酷這個范圍內可能還會存在多種飛機稿，這是我們就需要進一步篩選，比如通過延展性，宣傳性，用戶認知度以及用戶的審美特性等等多維度去篩選，最終保持少量的方案。
到了這個階段我們應該比較熟悉了，嘗試把上述的方案繼續收攏聚焦，提取出一個可行性方案展開后續的設計，具體怎么篩選，同樣可以繼續使用橫向和縱向維度進行對比，如潮酷風格方案還剩下2個，我們就可以通過用戶調研、競品分析去嘗試衡量優劣勢。
交付期其實就是我們設計側工作全部完成了，流程已經進入到了開發，我們把完整的設計稿、切圖等素材交付開發，同時還需要橫向輸出設計規范供團隊后續使用。
雙鉆模型用途非常廣泛，如數據方面、產品方面、設計方面甚至管理方面都可以使用到，在不同的領域使用的方法都類似，區別就是使用的深入如何，像本篇以純設計維度出發去使用雙鉆模型，使用的方式偏向單維度。
若以提升數據或優化用戶體驗為目標使用雙鉆模型，那么每一個階段的思維散發會變得更加廣泛，每條結果交叉的情況也非常多。
再次提醒，本篇只以設計維度出發教大家使用雙鉆模型
該模型是講述用戶使用產品的感受，它包含五個維度：有效（Effective）、效率（Efficient）、吸引（Engaging）、容錯（Error tolerant）、易學（Easy to learn），我們看每個維度的英文解釋，會發現首字母都是E開頭，所以被稱為5E體驗設計模型。
5E 模型在整個體驗設計流程中可用性非常強，它可以幫助我們的團隊更具有創造力和理性的分布式領導模型，它可以讓復雜的設計簡單化，可以幫助產品構建一個具有標準性的體驗框架，我們無論做簡單還是復雜的設計時都可以依據這5個維度進行體驗評估。
不知道大家有沒有發現，我們經常講的產品可用性或者易用性，其實跟5E模型很像，5E模型的五個維度其實就是產品可用性的基礎，當一個產品不滿足其中一條的時候，那這個產品就不存在所謂的可用性，接下來我們對這五個維度進行解析。
顧名思義，有效指的就是產品功能的有效性，產品是否能夠為用戶帶來價值，是否能夠幫助用戶完成目標，如果不能幫助用戶完成目標，那么就不存在產品有效性，就像我們買筷子是為了吃飯、買開瓶器是為開蓋、買車是為了代步.....如果筷子只給我們一只，開瓶器無法開啟瓶蓋，車子沒有輪子跑不起來，那這個產品就是殘缺的最基礎的可用性都未達到。
字面意思指我們在保證精準度的前提下保證完成事項的效率，準確度越高速度越慢，這個的衡量通常指產品與競品相比同一個任務流程效率的高低，以及出錯的頻率，假如我們刷抖音刷10個視頻需要1分鐘，而影響時間的因素是單個視頻的內容是否足夠吸引，亦或者網速是否夠快。
這個就比較好理解，就是界面是否能夠吸引用戶，能夠讓用戶愉快的使用我們的頁面，當然不止視覺上的，人的感知包括視覺、嗅覺、觸覺、味覺，一個優秀的界面是不僅僅只有視覺，它還可以通過視覺的感知引起用戶的遐想，例如一個美食的產品，我們把首頁做的更加紅火、火爆可能就會引起用戶遐想起辣、熱等感知。
容錯我們可以理解為是一個防錯機制，或者說是容錯率，當用戶在操作某一個功能時，容易發生錯誤，我們就需要讓產品幫助用戶及時更正錯誤，例如自動修復，在比如打王者榮耀時我們選擇陣容都會經常說容錯率，這里就是指5個英雄，2個打團時可能優勢不是那么大，但是另外3個的容錯率非常高能把劣勢補救回來，而產品的容錯就相當于這3個英雄，負責把用戶可能出現的錯誤操作給補救回來。
易學和產品如何支持初次使用和更深度的學習相關。一個產品可以使用一次，或一會兒，或一天。它可以完成一個容易的或復雜的任務，用戶可能是一個專家或新手。但每一次使用，界面必須能夠記憶或重新學習，而且使用一段時間后能夠發掘更多的功能，通常產品的易學性體現在用戶的操作效率。
有效性就像他定義的那樣，存在即合理，存在差異的是準確性，基本每個產品都必須具備有效性，例如地圖軟件，我要做公交車，能夠通過該功能查看離我最近的一輛公交還有多久到，這個功能的存在就是為了便于我們乘坐公交，防止無效等待，而差異上就是公交到站的時間可能因為某種原因不夠準確，這個就是有效上的差異因素。
如何讓用戶體驗更好，效率是其中任何重要的一個點，部分的產品的存在就是為了“讓人變懶”，例如外賣、打車、購物等等，以聊天為例1v1聊天時消息能否及時的傳輸，群聊時同時加載n條消息，而我們能夠第一時間看到信息，在新聞資訊的軟件中，怎么保證用戶閱讀的效率，同樣的產品怎么排版才能夠符合用戶閱讀習慣，提高效率，大多行業的產品想要做到好的體驗，效率是不可缺失的。
一個產品通過不同的視覺表現或者音樂效果能夠加強用戶在感知層的認知，不同的群體，不同的階段，所展示的風格不同，像下圖中的金融產品，使用紅色為主色傳遞的感覺是積極向上的感知，因為在國內股票和基金里紅色代表漲，在看閱讀產品和教育產品，都根據產品特性和用戶群體來設定風格，試想一下，一個閱讀的軟件做成卡通風格，那會不會嚴重影響閱讀呢。
上面所說，容錯更像自動修復或者幫助用戶解決錯誤操作問題，在系統上我們可能會經?？吹?，例如電腦崩潰時像MAC系統會詢問是否重啟，而Windows崩潰時會直接藍屏幫用戶自動重啟。
在產品中也會有相關的功能，例如聊天頁面中，我們因為網絡因素發送失敗會進行紅點提示，包括一些內容加載失敗會提示重新加載等等。
易學應用場景非常之多，我們在做產品時大多都是優先考慮用戶使用是否有阻礙，這個概念還是比較成熟的，當然產品功能有些時候也避免不了復雜化，這時我們可以用新手引導進行解決，但是還是需要提醒大家，在設計頁面的時候一定一定要優先遵循識別性和認知性，其次再去考慮創意，例如一個分享圖標，把它設計的不像一個分享，設計感是有了，但是可用性無了。
為什么分享這兩個模型呢，這兩個我理解是體驗設計的基礎，雙鉆模型讓我們從0-1一步一步解決問題，而5E模型是在我們解決問題的過程中時刻提醒我們不要偏移基礎的體驗，就像開車一樣，雙鉆模型就像是一個地圖的起點與終點，5E模型就像在行駛這段過程中的超速提醒、危險駕駛提醒等。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節，比如卡片的排版、文字的排版、各種狀態的反饋等等，特別是剛入行的設計師在做頁面時往往是直接拿到競品的頁面搬運到自己產品上，這種做法理論上不會讓自己的頁面出錯，但是很多人往往忽略了一點，就是別人這么設計的目標是什么，是否會匹配自己的設計目標，如果不了解這些貿然的去搬運設計，那么時間久了會養成一個不好的習慣，需要設計師去進行設計時可能就會遇到很多難點，作為初級設計師或者剛入行的設計師，前期可以去進行搬運設計，但是一定要了解別人為什么這么做。
接下來將分享12個設計上的小技巧，大部分在日常設計中都會遇到，了解到這些設計細節，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。
一、快捷交互
二、提升交互路徑
三、問題前置
四、提升可讀性
五、點擊引導
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級
九、圖標保持一致
十、利用對比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟
左側為什么錯？？
左圖中針對單條消息的操作匯聚到了icon內，對于用戶理解成本比較高，當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統的更新，用戶的操作習慣已經被各大產品培養的非常成熟，并不用擔心用戶無法操作的情況，增加手勢有弊端也有優勢，右圖中手勢增加了用戶首次使用的學習成本，但是降低了高頻功能的操作成本，這個理論上是可以接
受的。
實際產品中的運用
利用拇指定律把關鍵的操作入口元素等，放置右側提升用戶操作效率。
左側為什么錯？？
左圖中把按鈕放置了模塊左下側，這樣是不利于用戶進行操作，當然如果整個模塊的熱區都是同一個，這樣并沒有什么問題，用戶點擊卡片區域任何位置都能夠完成下一步操作，如果出現一個模塊內存在多個熱區入口，而用戶想要到達目標必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。
建議正確做法～～
當一個頁面內出現多個相同模塊或者一個模塊出現多個熱區入口時，按鈕點擊區域有限，我們設計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側可以便于用戶在右手操作時快速到達目標，因為國內使用右手的人數遠遠大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。
相關定律：費茲定律、拇指定律
實際產品中的運用
對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。
左側為什么錯？？
左圖中理論上并不是錯，我們經常設計表單時都會用的提示話術，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產品時的體驗。
建議正確做法～～
如右圖中，我們設計時可以更改提示的話術，幫助用戶把問題前置，當用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數拆分，讓用戶更好的記憶數字，這樣無論對產品還是用戶都沒有任何損失，反而能降低錯誤頻率。
實際產品中的運用
無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進行瀏覽，我們需要保證頁面的文字元素具備一定的規律，以此來提升閱讀效率。
左側為什么錯？？
左圖中可以看到，文字與輸入框放在同一列進行展示，這樣一方面不利于后續的文字擴展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規律和擁擠，降低了篩選效率，當然如果是模塊區域很小的情況下，可以適當的進行使用。
建議正確做法～～
右圖中我們把文字與輸入區域上下排布，雖然文字長短不一，但依據對齊原則在豎列情況看是具備對齊規律的，有效的提升信息篩選效率。
實際產品中的運用
我們在做系統功能模塊時需要注意添加功能點擊引導，用戶對此類消息模塊認知上會默認不可點擊，因此需要我們加以引導。
左側為什么錯？？
我們常見的消息模塊內容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統消息即產品推送的內容，前者基于用戶習慣而言用戶已經沒有使用成本默認是可以進行點擊交互，后者因為部分產品會把系統消息作為展示的形式給用戶，但是有些產品的系統消息卻是可以點擊交互，這就導致了用戶認知上出現了混亂，左圖中像系統通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。
建議正確做法～～
當我們在設計時需要注意，若消息列表中存在系統類消息并且可以進行交互，在設計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數據指標，這種方式也同樣能賦能產品指標。
實際產品中的案例
目前市場上產品幾乎都有深色版本，我們在設計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關系，因此我們在做黑色版本時需要注意是否調整飽和度。
左側為什么錯？？
在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。
建議正確做法～～
我們在設計深色版本時可以根據產品主色降低飽和度，包括圖標等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規范。
實際產品中的案例
在設計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導致視覺不統一，以及開發成本增加。
左側為什么錯？？
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發中會導致開發成本增加，我們產品一般使用的是系統字體，若使用特殊字體需要讓開發同學添加對應字體包，這樣會導致我們的產品包的內存過大，除非產品中默認一直使用該特殊字體，這樣才有使用的價值。
建議正確做法～～
一般系統字體就能夠滿足我們的設計需求，在UI設計中我們可以通過不同的字體粗細來調整文字層級，這樣能夠保證視覺更加統一，減少產品包大小。
實際產品中的案例
在設計時需要注意多個入口在同一位置時，需要把它們進行層級劃分，避免影響用戶決策
左側為什么錯？？
圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當用戶在瀏覽頁面中很容易出現困惑，到底需要點擊哪個才能購買預定，因為兩個都是面性無法快速進行定位入口，這樣不僅影響用戶決策效率，還會影響產品點擊率。
建議正確做法～～
建議設計類似模塊中時，無論是pc還是移動端都需要對入口進行結構劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。
實際產品中的案例
在UI設計中使用圖標時，要保持一致性，確保他們共有相同的視覺風格，相同的重量，填充和描邊。不要混搭。
左側為什么錯？？
可以看到左圖中的圖標并不統一，線性里面摻雜著面性點綴，這在UI設計中嚴重違背了一致性的原則，會導致我們的頁面不夠嚴謹專業。
建議正確做法～～
在設計圖標時，首先要保證圖標風格一致，其次在這個基礎上保證圖標的描邊粗細、視覺占比重量、顏色等，不要出現混搭風格。
實際產品中的案例
在設計頁面模塊時，可以多利對比度的方式來體現設計的表現力，鮮明直接的色值能夠直接表達事物的性質以及特點，通過對比，也能夠更加清晰的強調設計中的重點，這樣給用戶的印象會更深刻，同樣會給產品帶來一定的趣味性。
左側為什么錯？？
左圖中單看視覺也沒問題，只是在表現上圖標與背景融入到一塊了，導致視覺表現力較差，在設計中如果符合產品風格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。
建議正確做法～～
設計到類似的模塊時我們可以利用對比的關系，以此突出視覺元素，通過顏色焦點引導用戶關注，強化用戶印象同時還能增加頁面的視覺表現力和氛圍感。
實際產品中的案例
在設計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。
左側為什么錯？？
左圖中在深色圖片下字體的可讀性是沒有問題的，但當出現文字底部區域的圖片相對復雜時便會影響識別，第二種情況當圖片明度過高時文字同樣無法識別，試想一下，一張白色調性的圖片上放文字，那基本無法看清，嚴重影響閱讀體驗。
建議正確做法～～
在界面設計時如果遇到類似的卡片，建議在文字區域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進行處理，這樣可以兼容不同環境的圖片與文字的重疊，保證基本的閱讀體驗。
實際產品中的案例
UI設計中經常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進行專注操作，不同的遮罩透明度所帶來的專注度也不同。
左側為什么錯？？
左圖中我們看到，遮罩的透明度過低，我案例設置的是17%，此時彈窗內容與頁面內容結構上區分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內容，從而瀏覽彈窗內容，轉變用戶目標，當彈窗無法聚焦時便很難達到目標，并且視覺上層級更加混亂。
建議正確做法～～
右圖中案例我把透明度調整到了37%，我們此時再看彈窗很容易就忽略頁面內容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內容，同時視覺結構上也區分很明顯。
實際產品中的案例
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn