今天帶來的是《交互設(shè)計沉思錄》第一部分的第二章「管理復(fù)雜性」。
主要講述的是交互設(shè)計師是如何理解&組織所獲取到的數(shù)字、文字?jǐn)?shù)據(jù)。
通過這些步驟&方法能夠幫助交互設(shè)計師更加清楚信息間的關(guān)系，建立很強的心智圖景。
其間也穿插了很多職能相關(guān)部分的對比，如「交互設(shè)計師與信息架構(gòu)師」「交互設(shè)計師與界面設(shè)計師」「交互設(shè)計師與電子工程師」。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
注：閱讀此文章大約需要30分鐘
先給大家看兩個案例：大家都很熟悉的，自動感應(yīng)測溫，不需要人為操控
第二個案例則是nest智能恒溫器，比起傳統(tǒng)的需要人為的去手動觸發(fā)調(diào)節(jié)溫度，他能夠?qū)崟r感知家里的溫度，基于不同的場景與客戶習(xí)慣去調(diào)節(jié)溫度，比起傳統(tǒng)模式便捷了不少
那么從這兩個案例中，大家可以發(fā)現(xiàn)，傳統(tǒng)人機交互與下一代人機交互是有著本質(zhì)區(qū)別的，傳統(tǒng)人機交互一直以來都是輸入輸出的被動交互邏輯，什么是被動交互呢，就是必須有用戶向機器發(fā)送指令，機器接收指令，執(zhí)行后將結(jié)果反饋給用戶。而新的交互模式，則是用戶不需要做任何指令輸入，機器自動感知當(dāng)前的場景，來理解你的意圖是什么，來去主動幫你完成任務(wù)。那么這是如何實現(xiàn)的呢，主要是依靠傳感器，算法等實現(xiàn)的。這也說明了我們的生活開始下一代人機交互的新時代。
這也就是今天的主題，那么今天，我會詳細講解，把這個課題講透。包括什么是智能感知交互，他的底層框架模型是怎樣的，以及結(jié)合案例是講解他是如何落地使用的，
回顧整個人機交互的發(fā)展史，經(jīng)過了不同的階段，從命令行界面，也就是通過手柄，遙控等進行交互，再然后是圖形用戶界面，也就是觸摸屏等交互，再到語音交互，圖像識別等等
人們對于人機交互也從依賴于人去手動觸發(fā)，再到趨于自然和本能，隨著技術(shù)的發(fā)展，我們也迎來的技能感知交互的新時代
在這里也對智能感知交互做了初步定義：是以人為中心，基于傳感器、大數(shù)據(jù)及AI技術(shù)，自動感知用戶情景，理解用戶意圖，主動響應(yīng)用戶需求，真正提升人機交互效率
那么智能感知交互也有幾個特征，更加的趨于自然，輸入輸出方式更加無感知，智能
接下來是最核心的重點，智能感知交互的框架是怎么樣的，他的底層邏輯是怎樣運行的，這也是整套理論知識的基石和核心。
智能感知交互模型主要分為三層：
那么以剛開頭的無接觸測溫門為例，在感知層主要通過紅外傳感器去感知人的體溫，在決策層則是當(dāng)遇到發(fā)燒的顧客則需要進行干預(yù)，在表達層，則會通過音效、光效做出主動的預(yù)警的設(shè)計表達。
那么我們接下來詳細的看下整個框架模型，那么，感知層又細分為三大模塊：
第一塊為【用戶感知】，第二塊為【場景感知】，第三塊為【行為感知】。 那我這里給他串聯(lián)起來，簡單來說就是感知用戶是誰，在什么楊的場景下，做了什么樣的行為。那么決策層則細分為兩大塊，也就是無感知之后怎么做決策，理解用戶的意圖是什么，。那么第二則是做出決策后怎么去做設(shè)計表達和輸出呢，受到那些變量因素的影響，這是由設(shè)計表達影響因子模型決定的。那么最后一層則是正式做出設(shè)計表達，目前表達的介質(zhì)主要有界面、聲音、光效、觸覺、動作等。那么這張圖是一個大框架，接下來我會詳細的剖析每一層
先講第一層，感知層，就是感知技術(shù)，這里在進一步細分為三個板塊，用戶感知，場景感知，行為感知，用戶感知為，用戶性別、地域、年齡等等特征，場景感知則是什么時間、什么地點，當(dāng)前環(huán)境、溫度等等，行為感知則是去感知，你用了什么工具，對什么對象，做了什么操作行為等等。針對不同的業(yè)務(wù)會有不同的針對感知，例如開頭案例中的體溫測量，他對溫度這一屬性重點感知。大家這里也能想到，世間萬物都可感知，為了方便后續(xù)的統(tǒng)計和分析，需要進行加工處理，需要將當(dāng)前的感知線上化和數(shù)據(jù)化，同時會將這些數(shù)據(jù)進行標(biāo)簽化的處理，那么如何去處理這些數(shù)據(jù)呢，這里主要分成三類：
簡單來說就是從傳感器或者線上平臺等渠道直接獲取的數(shù)據(jù)。舉個例子，比如說登錄網(wǎng)站，那么我們可以獲取用戶ID，從溫度傳感器，我們可以直接獲得溫度。這些都是統(tǒng)計類數(shù)據(jù)
簡單來說就是基于一定的規(guī)則產(chǎn)生，舉個例子，比如我們規(guī)定用戶與設(shè)備之間的距離為0~40cm為近距離，，工人每小時生產(chǎn)產(chǎn)品80件定義為熟練工，這些都定義為規(guī)則類數(shù)據(jù)
他是通過機器學(xué)習(xí)挖掘產(chǎn)生，根據(jù)相關(guān)屬性進行預(yù)測和判斷。比如淘寶上對男女的劃分，他通過你買的商品去判斷你是男生還是女生，你的興趣愛好是什么
那么接下來我們講決策層,那么剛剛我也介紹了整個框架模型，決策層主要有兩部分，現(xiàn)在講述第一部分，也就是整體框架中紅色圈住部分，針對【意圖識別決策模型】進行剖析。簡單來說就是我感知之后去理解用戶的訴求是什么，這里也抽象為四大類決策方向:行為干預(yù)、推送建議、意圖預(yù)判、自動決策
簡單來說就是我感知到當(dāng)前的行為是異常、錯誤的，會做出主動預(yù)警進行干預(yù)。舉個例子，比如圖中的場景，通過攝像頭的圖像識別檢測到工人的操作不規(guī)范，會通過光效和音效的預(yù)警來進行行為干預(yù)
是基于你的愛好去推送不同的內(nèi)容
感知之后去預(yù)判，你接下來會做什么。比如上圖，當(dāng)系統(tǒng)之前感知到用戶粘貼了地址和電話信息，那么系統(tǒng)就預(yù)判你是不是要寄快遞
比如陀螺儀識別用戶將設(shè)備傾斜了多少度，將屏幕做自動關(guān)屏
那么前面講述的是決策層的第一大板塊，那么現(xiàn)在講第二板塊，也就是設(shè)計表達影響因子模型。簡單來說，就是我已經(jīng)決策完成，那么我怎么去做決策和輸出，受那些變量因子影響呢
那么這里也抽象為三大類變量因子，用戶感官因子，環(huán)境因子，設(shè)備因子。
比如在【用戶感官因子】上，會去分析，用戶當(dāng)前的認知負荷是什么樣的，如果當(dāng)前是在黑暗的情況下，用戶的視覺負荷比較大的話，那么設(shè)計表達是不是就應(yīng)該以聽覺和觸覺為主。同時我們還會去分析用戶是運動狀態(tài)還是靜止?fàn)顟B(tài)，如果是運動狀態(tài)那么在設(shè)計的時候是不是需要考慮，字體是不是需要更大，方便用戶獲取信息等等案例。
【環(huán)境因子】就是環(huán)境光線的強弱，噪聲的大小等等，比如設(shè)計的時候，是在室外，光線比較強的環(huán)境，那么設(shè)計的界面對比度是不是就得更強。
【設(shè)備因子】就是傳統(tǒng)設(shè)計當(dāng)中，他的輸入通道是物理按鍵，還是觸屏，還是語音，手勢這些，以及輸出通道，有沒有喇叭，指示燈等等。這些都會影響我們采用怎樣的方式去進行設(shè)計表達。
那么第三層就是我們最熟悉的表達層，也就是具體的交互執(zhí)行。常用的表達方式主要有界面，音效，光效，觸覺，動作這幾類，這些大家都很熟悉，這里就不做詳細的講解。
那智能感知交互依賴的技術(shù)和條件也是比較多的，所以他是分企業(yè)分階段發(fā)展的。那么這里主要分為5個等級。從無智能到完全智能，那么目前呢主要處在中間C2這個條件智能的階段中。簡單來說就是機器自動感知部分情景，再加上人的輔助輸入，讓系統(tǒng)完成任務(wù)。
那么前面說這些都是偏理論偏框架類的，那么下面我會結(jié)合案例具體講解智能感知交互是怎樣去落地使用的
那么當(dāng)有了模型框架后怎樣應(yīng)用呢，首先，離不開設(shè)計流程，和傳統(tǒng)設(shè)計流程類似，智能感知交互的設(shè)計流程也為：【發(fā)現(xiàn)一個機會點，制定對應(yīng)的設(shè)計策略，然后定義具體的設(shè)計表達，持續(xù)監(jiān)測進行迭代和優(yōu)化?！窟@樣構(gòu)成，那么大家就會想了，那我們的不同之處在哪呢？這其實離不開設(shè)計對于技術(shù)的洞察力，我們設(shè)計對于技術(shù)的了解和應(yīng)用其實貫穿在全流程中。
比如說，在我們在做UED設(shè)計中，發(fā)現(xiàn)痛點時，我們可以通過問卷調(diào)研，訪談?wù){(diào)研獲得用戶的主觀數(shù)據(jù)，也可以通過埋點檢測獲得用戶的行為數(shù)據(jù)，而我們在優(yōu)化的時候，除了從設(shè)計側(cè)出發(fā)的體驗優(yōu)化，那是不是可以不給自己設(shè)立邊界，比如從技術(shù)出發(fā)，讓算法自身不斷學(xué)習(xí)，讓準(zhǔn)確率有所提升。帶著這樣的不同，我來舉一個案例。
這塊沙琪瑪出生在一個非常傳統(tǒng)的食品供應(yīng)鏈公司，她從出生出來到被運送到客戶手中，會經(jīng)過4個空間，12個節(jié)點。而在這層層的校驗中，當(dāng)我們想知道沙琪瑪?shù)馁|(zhì)量，生產(chǎn)日期，和他的位置，需要的是員工的手動介入和對于條形碼的掃描，
但我想更精細化的知道沙琪瑪具體的信息來進行更好的數(shù)字化管理，那就變得非常困難。所以我們在想，怎么可以讓對沙琪瑪?shù)墓芾?，變得更聰明一些呢，那改變這傳統(tǒng)模式的機會，就來自于識別技術(shù)的發(fā)展。
那么現(xiàn)在已經(jīng)運用起來這樣的技術(shù)了，一些商場的衣服和商品上都會有RFID標(biāo)簽，比如優(yōu)衣庫，在進行結(jié)賬時只要將多件商品投送到結(jié)賬框中，就可以一次性識別多個商品完成結(jié)賬，這就是RFID的優(yōu)勢，他可以完成一對多的批量識別，并且具有更大的識別范圍，識別過程中不需要設(shè)備和條碼直接對視。
那我們就要想了，如果每個沙琪瑪都有一個RFID碼，那我們是不是就可以批量無感知的識別他們了呢。帶著這樣的技術(shù)優(yōu)勢，我們來回顧整個操作流程，我們發(fā)現(xiàn)，在圍繞沙琪瑪?shù)囊粚右粚有ｒ炛?，已我剛剛提到的【行為干預(yù)、意圖預(yù)測、自動決策和推送建議】四個角度來找到更智能的優(yōu)化點，比如說，當(dāng)沙琪瑪從車間生產(chǎn)出來，即將被打包的時候，我們?nèi)绻l(fā)現(xiàn)了一個異常，可以怎么處理呢，大家覺得~~~~我們是不是可以進行一個行為干預(yù)，來將這個異常及時的告知給用戶，又或者，我們可以進行一個自動決策 ，我們通過自動化設(shè)備，來吧出現(xiàn)異常的商品進行自動剔除。
那由于整個鏈路太長，所以我現(xiàn)在呢，以沙琪瑪離開倉庫的最后一個校驗環(huán)節(jié)為例，來做展開
這個時候，用戶拖著托盤，來到月臺，準(zhǔn)備將沙琪瑪裝上卡車，這個時候，如果沙琪瑪上錯了車，那我們就非常難以將他追溯回來了。所以這個時候，用戶的意圖是非常清晰的，那就是及時的阻止這個異常的商品流出倉庫。但我們知道了，那下一步呢，就是讓機器也知道這一個意圖，其實在這個場景下非常簡單，無非是，某人在某場景下做出了某個行為，而這個場景下我們可以通過員工的賬號ID來獲取的員工的身份，
我們也可以通過設(shè)備上在運行的秘鑰來獲得當(dāng)前的實操場景是什么，
還能通過RFID的天線，他所識別到的信號逐漸增強，來發(fā)現(xiàn)，啊確實有一個用戶，在拖著商品逐漸靠近，那以上這三個條件，就可以觸發(fā)我們對于托盤上的貨物的識別來判斷，他上的車是不是對的呢，數(shù)量是不是準(zhǔn)確呢，一旦發(fā)現(xiàn)異常，我們就需要將信號及時的傳給用戶
那下面問題就來了，我們該怎么表現(xiàn)這個異常，剛才也提到，我們設(shè)計的表達是多種多樣的，有界面內(nèi)的，界面外的，環(huán)境空間的。而用戶接收的渠道卻非常的單一，無非是，視覺、聽覺、觸覺、甚至以后可能會有嗅覺。
所以我們在定義一個合適的表達方案的時候，就需要考慮到當(dāng)下用戶、環(huán)境、設(shè)備的影響因素，那在我們的場景中，我們應(yīng)該怎樣選擇一個合適的感官通道來傳遞這個異常信號呢
這就需要我們清晰的了解，在這個場景下，每一個感官通道被占用的情況，這樣我們才能選擇其中占據(jù)優(yōu)勢的那些來做出我們的設(shè)計表達
為此，我們總結(jié)過往一些學(xué)術(shù)研究，來將用戶、環(huán)境、設(shè)備他具體的影響程度進行數(shù)值化。比如對于用戶的限制，我們采用VACP的工作負荷模型來量化用戶的各個通道上認知資源被占用的程度。而對于用戶自身的能力限制，我們通過劍橋大學(xué)提出的一個無障礙公式，來計算用戶自身能力限制的程度，同樣，我們綜合國內(nèi)一些常見的標(biāo)準(zhǔn)，來將環(huán)境因素，例如，亮度、噪聲、和設(shè)備自身的表達能力進行等級的劃分。那大家就要好奇了，那要數(shù)值化，那數(shù)值化靠譜嗎，我們怎么做這個數(shù)值化呢？
那我以VACP工作負荷模型來做一個簡單的展開，他起源與1984年，對于飛行員在駕駛飛機的一個觀察和研究。研究者將他劃分為視覺、聽覺、認知、運動四個維度。同時呢，對于不同難度系數(shù)的任務(wù)，劃分了不同對資源程度占用不同的等級，這樣，我們就可以像查閱字典一樣，來根據(jù)我們需要的任務(wù)表現(xiàn)，找到這個通道上對應(yīng)具體的占用程度
回到我們剛才的場景，當(dāng)用戶拖著托盤靠近的時候，他需要時刻注意眼前的道路，避免和其他物品碰撞，這個時候，視覺上他對物體的追蹤和跟隨，這個時候呢，在視覺上通道上他會有77%的占用情況
而聽覺上，雖然他不需要聲音來辨別道路，但在這個過程中，有可能有小組長會叫他說，唉，你過來以下，那這樣我們就需要做一個聲音的辨認，那在聽覺通道上，可能會有14%的占用程度
而在月臺上，時刻會有運輸與發(fā)動機的聲音，這個大約在70分貝的噪聲，會給用戶在聽覺上有個二級的干擾作用
綜合來看，首先，我們對用戶在觸覺上的反饋通道就被阻斷了，因為設(shè)備端離用戶實在太遠了，無法進行一個觸覺上的反饋，
而剩下的視覺通道已經(jīng)被高度占用了，他的有效性是較為有限的。而在聽覺上，雖然他的占用程度沒這么高，但他收到了環(huán)境噪聲的二級干擾，所以我們單一的通過視覺或者聽覺都不足以達到一個有效的反饋作用。
好在現(xiàn)在用戶的認知還是比較充沛的，所以呢，我們可以通過視覺、聽覺、認知三個通道上的整合，來做一個比較有效的反饋。
也就是，當(dāng)用戶靠近時，首先，她會在聽覺上聽到蜂鳴器的報警，
然后呢，他的注意力就被抓到了燈光的閃爍模式上。，他從他的記憶中記得的燈光的三種閃爍模式上，辨識到了這個閃爍意味著說：這個閃爍，標(biāo)識著我現(xiàn)在拉得沙琪瑪品類有問題，那我要好好的檢查一下。那我們的反饋呢，就成功的達成了
那除了剛剛提到的，多感官的反饋，我們在對于界面的設(shè)計上，也考慮到了多因素的影響
那第一個就是大家相當(dāng)熟悉的視覺距離，在我們的生活場景中，，有手持設(shè)備的近視距，也有推動設(shè)備的中視距，還有推動大型設(shè)備上走向通道門的，遠達130厘米的遠視距
那面對這樣不同的視覺距離，和用戶靜態(tài)或者動態(tài)的移動狀態(tài)，我們推導(dǎo)了計算文字高度和文字字號的公式，
然后計算這樣的視覺距離和運動速度的不同，來對關(guān)鍵信息做突出化的展示，保證用戶在看到關(guān)鍵信息時他的清晰度。那大家可以想想，除了視覺的距離以外，還有什么因素會影響到視覺的表達呢，
那就是環(huán)境的亮度。在我們的場景內(nèi)，盡管有部分都是在室內(nèi)發(fā)生，但也有部分是在室外發(fā)生，就比如我們舉的沙琪瑪?shù)睦?，他是在月臺發(fā)生的場景，那這個時候，就需要我們在色彩的設(shè)計上，去考慮到環(huán)境亮度的影響，
我們基于 W3C,對于色彩對比度的分析，然后定義了我們的配色方案，在對于室外的環(huán)境，我們會采用色彩對比度較高的配色方案，而到了室內(nèi)呢，我們會動態(tài)的將色彩對比度降低，避免用戶長時間注視對比度高的界面，造成視覺疲勞
那既然有設(shè)計方案，那自然就有效果評估，
我們將智能感知設(shè)計的評估，分為主觀和客觀兩個部分，主觀就是大家比較熟悉的，比如我們感知的這個情景是否準(zhǔn)確，能不能夠幫助用戶提高效率呢，整個感受是不是愉悅的，是不是有效的，那么這一塊我們是通過李克特5點量表問卷，和SAM問卷來進行度量，另外一部分則是客觀部分，這一部分我們通過對于算法模型的評估指標(biāo)來進行度量，比如他的準(zhǔn)確率，召回率，精準(zhǔn)率來評估他的算法是否可以不斷學(xué)習(xí)和進步。
那智能感知交互的分享就到這里，這里我衍生一下，從剛才的案例中，主要都是實操類的，那么我們是不是可以做個衍生，將智能感知設(shè)計的思路方法也延用到產(chǎn)品設(shè)計中呢，比如現(xiàn)在的抖音，頭條，他們?nèi)シ治鑫覀兊南埠?，主動的替我們進行篩選，于是在使用產(chǎn)品的時候，我們可以說是被動的看內(nèi)容，被動的看到商品被吸引然后下單。那么B端產(chǎn)品也可以以此類推，傳統(tǒng)模式下，是人登錄后臺，主動去找任務(wù)，那么在這里，我們是否可以換個思路，任務(wù)主動來找人，通過感知到用戶的身份，我們來主動檢測，他所關(guān)注的任務(wù)的進度，并且在這個任務(wù)落后的時候，主動發(fā)出預(yù)警和提示，真正的提升用戶的管理效率。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
數(shù)據(jù)在服務(wù)主張（service propositions）中發(fā)揮著越來越重要的作用。這就引出了一個問題：服務(wù)設(shè)計師如何以實際的方式為此類命題的數(shù)據(jù)策略做出貢獻？本文翻譯來自飛利浦的三位設(shè)計師寫的一篇有關(guān)于數(shù)據(jù)定義框架的文章，在飛利浦，他們使用數(shù)據(jù)定義框架將數(shù)據(jù)與設(shè)計思維整合，以啟用和衡量服務(wù)體驗。
數(shù)據(jù)和人工智能 (AI) 正在推動服務(wù)設(shè)計的新范式，其中服務(wù)體驗變得更加智能、無處不在和高度個性化。數(shù)據(jù)構(gòu)成了支持此類新興服務(wù)主張的支柱，并在持續(xù)衡量其影響方面發(fā)揮著核心作用。鑒于數(shù)據(jù)發(fā)揮的重要作用，許多科技公司目前正在制定廣泛的數(shù)據(jù)戰(zhàn)略（Data strategies）。這些數(shù)據(jù)策略提供了詳細的路線圖，可推動服務(wù)的技術(shù)發(fā)展，并與業(yè)務(wù)目標(biāo)緊密結(jié)合。
然而，這些數(shù)據(jù)策略通常是技術(shù)上的努力，側(cè)重于平臺之間的數(shù)據(jù)訪問、數(shù)據(jù)流或數(shù)據(jù)存儲等方面。他們往往缺乏以人為本的視角，因為他們很少關(guān)注數(shù)據(jù)收集的體驗、數(shù)據(jù)如何反映現(xiàn)實世界的體驗，或者人們在日常工作中如何與數(shù)據(jù)和人工智能進行交互。
服務(wù)設(shè)計師通常只是間接參與這些數(shù)據(jù)策略的制定。雖然服務(wù)藍圖可能有助于推動數(shù)據(jù)戰(zhàn)略發(fā)展的業(yè)務(wù)路線圖，但我們看到，當(dāng)服務(wù)設(shè)計視角更加結(jié)構(gòu)化時，它們的質(zhì)量會顯著提高。
服務(wù)設(shè)計是數(shù)據(jù)戰(zhàn)略的一個關(guān)鍵方面，因為它提供了更加人性化、集成化和整體化的體驗視角。它的優(yōu)勢在于允許理解復(fù)雜的關(guān)系以及多個細節(jié)如何影響整體體驗。例如，它可以幫助確定在何處以及如何收集數(shù)據(jù)以獲得最高質(zhì)量的結(jié)果，或者它可以為其他復(fù)雜的技術(shù)問題確定簡單的流程變通方法。
由于這種附加價值，精通數(shù)據(jù)的服務(wù)設(shè)計師可以在構(gòu)建以現(xiàn)實世界工作流程和體驗為基礎(chǔ)的以人為本的數(shù)據(jù)策略方面發(fā)揮關(guān)鍵作用。因此，數(shù)據(jù)策略應(yīng)該是學(xué)科之間的協(xié)作努力，以確?？梢詮牟煌慕嵌葯z查和設(shè)計整體挑戰(zhàn)。
盡管服務(wù)設(shè)計提供了價值，但我們看到服務(wù)設(shè)計人員本身通常缺少在這種數(shù)據(jù)戰(zhàn)略協(xié)作中取得成功的工具和方法。雖然我們在為生產(chǎn)或開發(fā)團隊創(chuàng)建特定要求方面有著悠久的歷史，但在數(shù)據(jù)策略方面，我們通常不會就數(shù)據(jù)要求或需求以相同級別的粒度和特異性進行溝通。
這部分是因為我們必須進一步發(fā)展我們的數(shù)據(jù)能力，但也因為沒有多少實用的框架可以讓設(shè)計師對數(shù)據(jù)策略做出有意義和實際的貢獻。如果沒有正確的工具來指導(dǎo)我們的探索并與我們的技術(shù)同事進行交流，為數(shù)據(jù)策略做出貢獻可能會讓人不知所措。
我們的數(shù)據(jù)定義框架首次嘗試為服務(wù)設(shè)計人員提供正確的工具，使他們能夠積極參與數(shù)據(jù)戰(zhàn)略活動。
我們的數(shù)據(jù)定義框架挑戰(zhàn)（服務(wù)）設(shè)計人員考慮他們明確的數(shù)據(jù)需求，促進對這些需求的探索，并在將圍繞數(shù)據(jù)的思想構(gòu)建成具體的數(shù)據(jù)需求方面發(fā)揮著重要作用。我們沒有引入完全獨立的附加流程，而是將我們的數(shù)據(jù)定義框架整合到現(xiàn)有的工作方式中，并旨在讓那些對數(shù)據(jù)世界經(jīng)驗有限的人們能夠了解到它。
具體流程是：
在我們嘗試構(gòu)建自己的數(shù)據(jù)定義的前幾次，我們非常掙扎。從頭開始時，想出有意義的數(shù)據(jù)點似乎不是隨機的，這是一項挑戰(zhàn)。我們探索了如何從角色、場景或架構(gòu)圖開始，但這些方法給出的結(jié)果要么過于膚淺，要么過于技術(shù)化。
隨著時間的推移，我們了解到（體驗）地圖為搭建和構(gòu)思數(shù)據(jù)定義提供了寶貴的基礎(chǔ)。我們在這里使用體驗地圖作為容器術(shù)語，因為這些地圖可以是服務(wù)藍圖、工作流程圖、用戶旅程甚至是 UI 流。
基本上，任何類型的地圖都可以概述用戶如何通過一組具體的操作來經(jīng)歷體驗。地圖的顆粒度將表明數(shù)據(jù)定義的性質(zhì)。例如，如果它是一個 UI 流，數(shù)據(jù)定義將更多地關(guān)注微交互或應(yīng)用程序功能的體驗含義。相比之下，如果選擇的地圖是一個高級工作流，那么數(shù)據(jù)定義將更多的是關(guān)于跨接觸點、整體的假設(shè)數(shù)據(jù)。
為了舉例說明，我們使用下圖所示的圖解（簡化）體驗圖，該圖顯示了醫(yī)療機構(gòu)中的患者如何通過冠狀動脈支架置入術(shù)：
與上面提到的其他類型一樣，此地圖有助于在適當(dāng)?shù)纳舷挛闹锌梢暬瘮?shù)據(jù)，以及與之相關(guān)的體驗。該地圖側(cè)重于用戶操作和事件，因此是開始以人為中心的數(shù)據(jù)探索的良好基礎(chǔ)。
下一個合乎邏輯的步驟似乎是用數(shù)據(jù)點注釋地圖。但是，這些數(shù)據(jù)點的范圍可以從更高級別的指標(biāo)（例如患者報告的結(jié)果）到較低級別的數(shù)據(jù)指標(biāo)（例如護士在患者監(jiān)視器上單擊后退按鈕的頻率）。這里的問題是有幾乎無限數(shù)量的選項可供探索。
為了指導(dǎo)數(shù)據(jù)定義過程，我們引入了“意圖（intents）”。您可以將這些意圖視為您希望通過數(shù)據(jù)實現(xiàn)的目標(biāo)。我們總是使用兩種截然不同的意圖，它們直接反映了使用數(shù)據(jù)的不同方式：
然后可以將數(shù)據(jù)點連接到這些意圖，以明確這些數(shù)據(jù)點所扮演的角色。這會產(chǎn)生一個定義明確的關(guān)系模型，有助于以后制定戰(zhàn)略和確定優(yōu)先級。定義意圖和相關(guān)數(shù)據(jù)點總是有點反復(fù)練習(xí)，其中新意圖觸發(fā)新數(shù)據(jù)點需求，新數(shù)據(jù)點激發(fā)新意圖。
（1）識別“衡量”意圖
智能產(chǎn)品、服務(wù)和解決方案不是一成不變的；它們可以遠程配置、更新，并且可以自行學(xué)習(xí)以適應(yīng)和發(fā)展。為了推動這個過程，我們需要創(chuàng)建反饋循環(huán)?！昂饬俊币鈭D在定義學(xué)習(xí)目標(biāo)方面發(fā)揮著關(guān)鍵作用。
它們可以包含更多以結(jié)果為導(dǎo)向的、評估性的目標(biāo)，或者更具探索性、以洞察力為導(dǎo)向的目標(biāo)。例如，評估性“衡量”意圖可以是在引入新的患者摘要視圖后評估吞吐量時間的變化。一個更具探索性的“衡量”意圖可能是深入了解患者如何體驗入院咨詢的不同部分，以發(fā)現(xiàn)新的改進機會。
這些意圖也可以是細化的或整體的。它們可以與體驗圖中的特定接觸點相關(guān)聯(lián)，例如，如果新的患者儀表板可以幫助護士更快地了解患者的病史。但它們也可以跨越該體驗地圖的多個階段，捕捉患者如何體驗整個過程。
將屬性分配給“衡量”意圖，就像上面提到的那樣，有助于引導(dǎo)設(shè)計師思考正確的方面。我們在確定屬性時可能會問的問題可能是：“需要多少數(shù)據(jù)？”、“持續(xù)多長時間？”、“意圖是否與更高級別的體驗驅(qū)動因素相關(guān)聯(lián)？”和“評估目標(biāo)的目標(biāo)是什么？”
盡管其中一些屬性也可能與您的用例相關(guān)，但我們鼓勵您探索哪些屬性在您的域中有意義，并在您的定義中始終如一地使用它們。然后可以使用這些“衡量”意圖指導(dǎo)進一步的數(shù)據(jù)定義。設(shè)計師可以考慮他們需要哪些數(shù)據(jù)來回答這個問題，而不是擁有無限的選擇。
（2）識別“啟用”意圖
智能產(chǎn)品、服務(wù)和解決方案需要數(shù)據(jù)來了解它們所處的環(huán)境以及人們在它們周圍的行為方式，以便有意義地適應(yīng)不同的情況。為了明確我們想要啟用哪些體驗，并定義提供這些體驗所需的數(shù)據(jù)，我們引入了“啟用”意圖。
“啟用”意圖是對啟用某種體驗的功能或特性的描述。重要的是定義實現(xiàn)這些體驗所需的數(shù)據(jù)，以便制定長期的數(shù)據(jù)戰(zhàn)略。
“啟用”意圖中描述的功能可以根據(jù)其抽象級別而有所不同。在更詳細的接觸點級別，“啟用”意圖可以指特定的應(yīng)用程序功能。圖像中的自適應(yīng) UI 功能就是一個很好的例子。在更高的體驗旅程級別，“啟用”意圖可能更多地涉及服務(wù)解決方案（它將來自接觸點集合的數(shù)據(jù)匯集在一起）。
與“衡量”意圖一樣，“啟用”意圖可以具有不同的屬性，有助于進一步定義它們。對于給定的“啟用”意圖，我們經(jīng)?；卮鹬T如“它已經(jīng)可用還是計劃用于未來？”、“它集成在哪個接觸點？”、“它針對哪些參與者？”等問題，以及“它的預(yù)期影響是什么？”
“衡量”和“啟用”意圖通常是相關(guān)的，因為先驗往往旨在了解后者的影響。因此，這些意圖也經(jīng)常共享相同的數(shù)據(jù)。
（3）識別數(shù)據(jù)點
這兩種意圖都為數(shù)據(jù)定義了明確的目的。我們已經(jīng)簡要介紹了它如何在定義具體數(shù)據(jù)點方面發(fā)揮指導(dǎo)作用。數(shù)據(jù)點是對正在收集的數(shù)據(jù)的簡單描述。這些數(shù)據(jù)點始終連接到地圖中的特定部分，在這些部分可以獲取這些數(shù)據(jù)，或者將其反饋入其中。這些連接可以是我們或其他人擁有的接觸點，也明確需要第三方加入一起整合。
數(shù)據(jù)點也有自己的屬性來指導(dǎo)討論。為了提倡對這些數(shù)據(jù)的經(jīng)驗觀點，不僅要定義收集的數(shù)據(jù)，而且要關(guān)注收集數(shù)據(jù)的方式和地點的經(jīng)驗。其他屬性可以是是否自動收集數(shù)據(jù)，例如醫(yī)療程序的持續(xù)時間；或者是否手動收集，例如在手術(shù)后問卷中記錄的患者報告的結(jié)果。其他屬性可以包括數(shù)據(jù)是客觀的還是主觀的；是連續(xù)收集還是定期收集；以及是否始終需要或僅在某些條件下需要。
在反復(fù)定義“啟用”和“測量”意圖以及與之相關(guān)的數(shù)據(jù)點之后，我們最終得到了一個如下圖所示的關(guān)系模型。
該模型中的意圖和數(shù)據(jù)點可能比可以輕松解決的要多。因此，數(shù)據(jù)定義框架有助于確定未來路線圖的優(yōu)先級，這一點很重要。緊密關(guān)聯(lián)的關(guān)系模型有助于從整體上看待這一挑戰(zhàn)。
我們現(xiàn)在可以評估這些數(shù)據(jù)點所產(chǎn)生的影響，而不是只關(guān)注實施數(shù)據(jù)點所需的復(fù)雜性或工作量。雖然在整個旅程中跟蹤患者體驗可能很困難，但這樣做可能是理解這兩種類型的許多意圖的關(guān)鍵因素。在這種情況下，將他們的收集優(yōu)先于其他多個更易于實施的數(shù)據(jù)點的收集可能是值得的。
確定哪些數(shù)據(jù)點在路線圖的哪個階段獲得優(yōu)先級對于制定成功的數(shù)據(jù)策略至關(guān)重要，因為它直接關(guān)系到何時可以實現(xiàn)哪些“啟用”和“衡量”意圖。
我們創(chuàng)建了數(shù)據(jù)定義框架，使服務(wù)設(shè)計人員能夠開始為他們設(shè)計的服務(wù)的數(shù)據(jù)策略做出務(wù)實、有意義的貢獻。這是我們將“數(shù)據(jù)思維”與服務(wù)設(shè)計相結(jié)合的第一步。
在飛利浦內(nèi)部，我們已經(jīng)將數(shù)據(jù)定義框架應(yīng)用于各種服務(wù)設(shè)計挑戰(zhàn)。我們與具有不同數(shù)據(jù)素養(yǎng)的利益相關(guān)者一起使用它，并從各種體驗地圖開始。它主要被認為是探索數(shù)據(jù)機會的工具，也是圍繞數(shù)據(jù)構(gòu)建思想的一種方式。盡管該框架是在醫(yī)療保健領(lǐng)域開發(fā)的，但我們相信它在其他領(lǐng)域具有潛力。我們已經(jīng)看到它被應(yīng)用于更通用的客戶體驗、專業(yè)培訓(xùn)服務(wù)和日常消費者服務(wù)，而不會面臨重大挑戰(zhàn)。
我們覺得這個框架現(xiàn)在對（服務(wù)）設(shè)計師來說特別及時，因為數(shù)據(jù)開始在我們設(shè)計的所有體驗中發(fā)揮更突出的作用。作為設(shè)計師，我們的創(chuàng)造力和想法不應(yīng)受到現(xiàn)有數(shù)據(jù)的限制。相反，我們應(yīng)該在定義數(shù)據(jù)策略方面發(fā)揮積極作用，使我們能夠隨著時間的推移編排有意義的、個性化的體驗。
來源：人人都是產(chǎn)品經(jīng)理 作者：陳昱志Yeutz
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
從事互聯(lián)網(wǎng)醫(yī)療行業(yè)的年頭也不短了，做過慢病的健康管理產(chǎn)品，負責(zé)過互聯(lián)網(wǎng)醫(yī)院整條產(chǎn)品線的建設(shè)，也參與過AI健康檢測硬件產(chǎn)品的設(shè)計。
行業(yè)中互聯(lián)網(wǎng)醫(yī)療行業(yè)中一些公司在對外的宣傳中也衍生出了數(shù)字醫(yī)療、數(shù)智醫(yī)療等新名詞，無論是服務(wù)于醫(yī)生、還是醫(yī)院或者是藥企或者是保險，最終落地或者說繞不開的都是C端患者。那么，如今市面上互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成成分都有哪些呢？
在談互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成前，我們先用一小段介紹下人體有哪些重要組成部分：
“臟”是指實心有機構(gòu)的臟器，“腑”是指空心的容器。
人體五臟包含：心臟、肝臟、脾臟、肺臟、腎臟。
人體六腑包含：小腸、膽囊、胃、大腸、膀胱等分別和五個臟相對應(yīng)的五個腑，另外人體的胸腔和腹腔分為上焦、中焦、下焦，統(tǒng)稱為三焦，是第六個腑。
五臟和六腑的關(guān)系：臟與腑是表里互相配合的，一臟配一腑，臟屬陰為里，腑屬陽為表。臟腑的表里是由經(jīng)絡(luò)來聯(lián)系，即臟的經(jīng)脈絡(luò)于腑，腑的經(jīng)脈絡(luò)于臟，彼此經(jīng)氣相通，互相作用，因此臟與腑在病變上能夠互相影響，互相傳變。
人體各個器官按照一定的順序排列在一起，完成一項或多項生理活動的結(jié)構(gòu)叫系統(tǒng)。
人體的八大系統(tǒng)：消化系統(tǒng)、呼吸系統(tǒng)、循環(huán)系統(tǒng)、泌尿系統(tǒng)、運動系統(tǒng)、生殖系統(tǒng)、內(nèi)分泌系統(tǒng)和神經(jīng)系統(tǒng)。
八大系統(tǒng)在神經(jīng)和內(nèi)分泌系統(tǒng)調(diào)節(jié)下，互相聯(lián)系、互相制約，共同完成整個人體的全部生命活動，以保證人體生存和種族綿延。
看到這也許大家會納悶，文章標(biāo)題是“互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成和優(yōu)勢的建立”，PM大白怎么在開篇講起人體的五臟六腑和八大系統(tǒng)呢，因為PM大白認為產(chǎn)品同樣也是一個生命體，產(chǎn)品的0-1即是產(chǎn)品的出生、產(chǎn)品的迭代即是產(chǎn)品的成長、產(chǎn)品的矩陣即是種族的綿延，那么產(chǎn)品作為一個生命體，并且是互聯(lián)網(wǎng)醫(yī)療產(chǎn)品，那么她同樣存在著類似五臟六腑八大系統(tǒng)的組織，只是組織的名稱不一樣，大家不這樣稱呼而已。
不多說了，下文進入正題，看看互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成成分有哪些：
上文中提到了人體的五臟六腑：“臟”是指實心有機構(gòu)的臟器，屬陰；“腑”是指空心的容器，屬陽。
那互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品中（下文中簡稱為“產(chǎn)品”）的五臟六腑PM大白如何定義呢？
上文中選擇互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品中的幾個重要模塊定義為其“五臟六腑”，那互聯(lián)網(wǎng)醫(yī)院C端產(chǎn)品中將這“五臟六腑”串聯(lián)起來的八大系統(tǒng)又有哪些呢？其實本質(zhì)是各個維度中的供需關(guān)系的維護。
上文我們介紹了互聯(lián)網(wǎng)醫(yī)療產(chǎn)品的核心組成模塊，但是好像現(xiàn)在互聯(lián)網(wǎng)醫(yī)療行業(yè)并沒有迎來爆發(fā)期或者說沒有得到大范圍的應(yīng)用和產(chǎn)生價值，那又是為何呢？
之前我在生物實驗室工作，那個時候社會上就說生物行業(yè)是朝陽產(chǎn)業(yè)，未來可期；后來我轉(zhuǎn)行到了互聯(lián)網(wǎng)醫(yī)療行業(yè)，身邊的朋友又說，互聯(lián)網(wǎng)醫(yī)療可是互聯(lián)網(wǎng)垂直行業(yè)中的朝陽行業(yè)，可是互聯(lián)網(wǎng)醫(yī)療這個朝陽一直在海平面附近起起落落，一直沒有升起來，更不用說什么日到中天的趨勢，反而是不溫不火。
更有甚者，同行們開始懷疑互聯(lián)網(wǎng)醫(yī)療的價值到底在何處，難道互聯(lián)網(wǎng)醫(yī)療就是賣藥賣保險賣醫(yī)療周邊延伸服務(wù)的工具嗎？個人沒有懷疑過互聯(lián)網(wǎng)醫(yī)療價值，至少從沒有懷疑過這個行業(yè)的未來價值的，只是限于當(dāng)前的用戶就醫(yī)習(xí)慣、政策法規(guī)、相關(guān)技術(shù)以及醫(yī)療體系，醫(yī)療是一個嚴(yán)肅的產(chǎn)業(yè)，必須循序漸進與互聯(lián)網(wǎng)、AI等新技術(shù)結(jié)合，這才是負責(zé)任的醫(yī)療行業(yè)從業(yè)者該有的態(tài)度，因為醫(yī)療健康事關(guān)生死。
如何在現(xiàn)在的這個行業(yè)處境下默默地建立起自己的優(yōu)勢才是正道，那么互聯(lián)網(wǎng)醫(yī)療產(chǎn)品的優(yōu)勢在何處建立呢？其實有兩個方向：資源和技術(shù)（也許對從事互聯(lián)網(wǎng)醫(yī)療行業(yè)的大家來說，這就是大白話）。
資源型優(yōu)勢：通過不斷地積累醫(yī)療業(yè)務(wù)相關(guān)的核心資源建立優(yōu)勢。
1）數(shù)據(jù)優(yōu)勢
定義：這里提到的“數(shù)據(jù)”僅指患者在所有醫(yī)療、健康活動中產(chǎn)生的用于組成患者健康檔案的數(shù)據(jù)。
來源：線下醫(yī)院（核心）、線上問診、用藥記錄、醫(yī)保數(shù)據(jù)、健康險數(shù)據(jù)、移動設(shè)備檢測數(shù)據(jù)……
政策：近期國家相關(guān)部門出臺了《“十四五”全民健康信息化規(guī)劃》正是一個信號，出于患者個人醫(yī)療健康數(shù)據(jù)的重要性、復(fù)雜性、安全性、隱私性，也只有國家力量才有這種能力去實現(xiàn)；以下是從《“十四五”全民健康信息化規(guī)劃》摘錄的部分信息 ：
堅持統(tǒng)籌集約，共建共享。堅持統(tǒng)籌布局，深化共建共用，增強全民健康信息化發(fā)展的系統(tǒng)性、整體性和協(xié)調(diào)性，以構(gòu)建大平臺、大系統(tǒng)、大目錄為導(dǎo)向，加大信息化建設(shè)統(tǒng)籌力度，加強信息化基礎(chǔ)設(shè)施集約化建設(shè)，鞏固政務(wù)信息系統(tǒng)整合成果，進一步破除數(shù)據(jù)共享壁壘，暢通數(shù)據(jù)共享通道，推進數(shù)據(jù)全生命周期管理。
到2025年，初步建設(shè)形成統(tǒng)一權(quán)威、互聯(lián)互通的全民健康信息平臺支撐保障體系，基本實現(xiàn)公立醫(yī)療衛(wèi)生機構(gòu)與全民健康信息平臺聯(lián)通全覆蓋。
數(shù)字健康服務(wù)成為醫(yī)療衛(wèi)生服務(wù)體系的重要組成部分，每個居民擁有一份動態(tài)管理的電子健康檔案和一個功能完備的電子健康碼，推動每個家庭實現(xiàn)家庭醫(yī)生簽約服務(wù)，建成若干區(qū)域健康醫(yī)療大數(shù)據(jù)中心與“互聯(lián)網(wǎng)+醫(yī)療健康”示范省，基本形成衛(wèi)生健康行業(yè)機構(gòu)數(shù)字化、資源網(wǎng)絡(luò)化、服務(wù)智能化、監(jiān)管一體化的全民健康信息服務(wù)體系。
目的：打通各個醫(yī)療數(shù)據(jù)孤島，構(gòu)建患者全生命周期的健康檔案、屬于整個現(xiàn)代醫(yī)療體系的底層基礎(chǔ)建設(shè)，服務(wù)于上層所有與醫(yī)療相關(guān)的應(yīng)用服務(wù)，對線上互聯(lián)網(wǎng)醫(yī)療尤為重要；
最終在健康數(shù)據(jù)這塊的發(fā)展趨勢，應(yīng)該是國家完成居民全生命周期的健康檔案的統(tǒng)籌和建設(shè)，制定授權(quán)標(biāo)準(zhǔn)，然后通過授權(quán)的方式提供給具備相關(guān)資質(zhì)的互聯(lián)網(wǎng)醫(yī)療企業(yè)在其產(chǎn)品中進行調(diào)用。
我們選取了騰訊醫(yī)療官網(wǎng)以及騰訊醫(yī)療面向C端用戶的一款產(chǎn)品：騰訊健康（小程序），看看對方在數(shù)據(jù)建設(shè)方面的的產(chǎn)品。
①騰訊官網(wǎng)
產(chǎn)品服務(wù)對象劃分為了兩類：醫(yī)療機構(gòu)與患者、區(qū)域醫(yī)療。
面向不同的服務(wù)對象，騰訊提供了不同的解決方案；面向醫(yī)療機構(gòu)與患者，解決方案有：
前兩種方案的實現(xiàn)必然需要與醫(yī)保系統(tǒng)和醫(yī)院his系統(tǒng)的對接，則涉及醫(yī)保數(shù)據(jù)和his數(shù)據(jù)的互通；后兩種方案則涉及到疾病和藥品數(shù)據(jù)知識庫的建設(shè)。面向區(qū)域醫(yī)療，解決方案是：微信電子健康卡開放平臺、全名健康信息平臺、區(qū)域智慧醫(yī)療平臺、區(qū)域大數(shù)據(jù)云，這類方案完全符合了《“十四五”全民健康信息化規(guī)劃》的目標(biāo)。
②騰訊健康小程序
進入首頁是不是發(fā)現(xiàn)與其他互聯(lián)網(wǎng)醫(yī)療APP呈現(xiàn)的內(nèi)容有所不同呢，騰訊健康既沒有直接呈現(xiàn)大量的醫(yī)生和科室，也沒有直接呈現(xiàn)各種醫(yī)療服務(wù)包，金剛區(qū)顯示的是“醫(yī)保電子憑證”和“防疫健康碼”，首頁還還在功能區(qū)顯示了“我的醫(yī)?！比肟冢约霸诜?wù)推薦區(qū)1號位顯示“本地醫(yī)保碼”領(lǐng)取和查看入口。
2）知識優(yōu)勢
定義：這里提到的知識主要指與健康管理，疾病治療相關(guān)的醫(yī)學(xué)知識。
來源：醫(yī)生、醫(yī)院、協(xié)會、醫(yī)學(xué)百科以及權(quán)威醫(yī)學(xué)書籍。
形式：直播、短視頻、音頻、圖文。
目的：培養(yǎng)患者的健康習(xí)慣、提供患者自我健康管理的科學(xué)方法、提高患者對疾病各方面的認知以及自我治療和線下就醫(yī)的各種渠道和流程信息，對產(chǎn)品來講是前期的流量入口。
我們選取百度健康官網(wǎng)和騰訊醫(yī)典APP，看看同行在醫(yī)療健康知識這方面的重視程度和所做的努力：
我們可以看到百度健康的PC端官網(wǎng)沒有一個醫(yī)生，沒有任何線上問診等其他醫(yī)療服務(wù)入口，展示的是不同形式的疾病知識，其中包含短視頻、直播、圖文等形式，其實百度健康是用它的“醫(yī)典”模塊作為的PC端官網(wǎng)，如果不是百度健康搞錯了，那就足以看出百度健康認為健康知識這塊的重要程度；還有就是騰訊很早就做出了一款定位醫(yī)學(xué)科普知識的產(chǎn)品——騰訊醫(yī)典。
3）服務(wù)優(yōu)勢
定義：這里提到的服務(wù)主要指線上的問診、開藥、健康管理、掛號、等需要醫(yī)生或其他專業(yè)醫(yī)療健康從業(yè)者或醫(yī)療機構(gòu)參與的業(yè)務(wù)。
來源：醫(yī)療機構(gòu)、專家、醫(yī)生、藥師、健康管理師、營養(yǎng)師等。
目的：醫(yī)療健康服務(wù)是最直觀的能讓患者感受到當(dāng)前產(chǎn)品所具備醫(yī)療健康價值的模塊，也是能幫助患者解決實際需求的重要模塊，對定位于互聯(lián)網(wǎng)醫(yī)療的產(chǎn)品長期發(fā)展來講，醫(yī)療健康服務(wù)必定是后期的主要盈利入口，互聯(lián)網(wǎng)醫(yī)療也必然會像現(xiàn)在的線下醫(yī)療體系改革一樣擺脫以藥養(yǎng)醫(yī)的依賴。在所有的互聯(lián)網(wǎng)醫(yī)療產(chǎn)品中，好大夫便是聚焦服務(wù)和堅持線上醫(yī)療服務(wù)為主要方向的一款產(chǎn)品。
4）商品優(yōu)勢
定義：這里提到的商品主要指藥品、健康險、保健品等與醫(yī)療健康相關(guān)，由醫(yī)療服務(wù)延伸出的需要付費交易的實物產(chǎn)品。
來源：藥企、健康險公司、移動健康設(shè)備等。
目的：在患者對線上醫(yī)療健康服務(wù)付費接受度還沒有那么高時，采取的一種盈利生存手段；如果一家互聯(lián)網(wǎng)醫(yī)療公司是靠藥品、保險或其他非服務(wù)產(chǎn)品維持發(fā)展和成長的話，醫(yī)療服務(wù)型產(chǎn)品只是為這些盈利手段服務(wù)的話，也許會是一個成功的生意，但是個人寧愿將這類公司直接稱之為醫(yī)藥電商公司、醫(yī)療設(shè)備提供商，而不是今天全篇講的互聯(lián)網(wǎng)醫(yī)療公司（或產(chǎn)品）；目前在京東健康上的藥品收入與醫(yī)療服務(wù)收入占比接近7:1。
技術(shù)型優(yōu)勢：通過發(fā)明或優(yōu)化新的技術(shù)讓線上的互聯(lián)網(wǎng)醫(yī)療服務(wù)流程發(fā)生革命性的變化，并且獲得醫(yī)生、患者以及醫(yī)療權(quán)威機構(gòu)或政府相關(guān)單位的認可。
1）檢測技術(shù)
大家去線下就醫(yī)見到醫(yī)生后的第一件事是做什么？是各種抽血化驗等檢查，檢查前的醫(yī)生問診只是為了縮小檢查范圍。
我們必須接受的一個現(xiàn)實就是：如今沒有設(shè)備檢查，沒有具體定量的檢查指標(biāo)，醫(yī)生可能都不會下診斷，這也不能怪醫(yī)院或醫(yī)生，西醫(yī)就是這個流程：檢查-診斷-給藥或手術(shù)，而這個流程中哪些是可以在線上真正解決的呢？我想應(yīng)該只有“給藥”了，這也是目前大多數(shù)互聯(lián)網(wǎng)醫(yī)療公司以藥品為突破口的原因之一。
說到第一步：檢查，互聯(lián)網(wǎng)醫(yī)療是無法在線上做到醫(yī)院要求的各種指標(biāo)檢查的，所以最終線上問診，醫(yī)生給出的結(jié)果多是“可能”、“建議線下就診”等結(jié)論，同時也是現(xiàn)在線下問診開藥不支持首診的原因，因為在沒有線下確診的情況下開具處方藥是有很大風(fēng)險的。
SO如果患者不用去醫(yī)院就能完成醫(yī)院要求的部分疾病確診的核心指標(biāo)的檢測，理想情況下那是不是互聯(lián)網(wǎng)醫(yī)療就可以實現(xiàn)部分疾病的檢查-診斷-給藥的流程了，特別是常見的慢性病或者季節(jié)性疾病。
這就依賴于便攜式家庭健康檢測技術(shù)和設(shè)備的發(fā)展了，例如：血管納米機器人，全體24小時記錄生物體的各種生理指標(biāo)。
2）溝通技術(shù)
患者另一個不愿意接受線下問診治療，或不相信在不去醫(yī)院的情況下，就可以給出一個滿意的健康問題的解決方案的原因是——信任的力量。
因為千百年來患者就醫(yī)都是與醫(yī)生面對面接觸進行檢查診斷，線上的方式中，也許目前的視頻溝通比起之前的文字或者語音的方式更進了一步，但是不光是醫(yī)生無法確認是否完整地了解到了相關(guān)的病情信息，就是患者自己也會擔(dān)心自己是否把病情完整陳述給了對面的醫(yī)生，醫(yī)生是否有認真在給自己看病。
因為每個患者的語音表達力都不同，很有可能患者對癥狀的描述并不是真實的疾病表現(xiàn)；更何況線下就醫(yī)，患者都有可能去多家醫(yī)院咨詢問診。
這種線上的溝通方式與面對面的溝通相比，以及加上患者早已習(xí)慣的線下就診方式，新的溝通問診形式讓患者對另外一頭醫(yī)生的信任感大打折扣。
文字溝通到語音再到視頻，問診溝通方式在不斷進步，但還不夠，與線下相比越真實越好，越趨于線下面對面的體驗越能增強患者的安全感和信任感，也許目前比較火的虛擬現(xiàn)實、元宇宙在溝通方式上的應(yīng)用在一定程度上改變這種狀態(tài)。
以上提到的案例基本并不會在單一維度努力去沉淀自己的產(chǎn)品優(yōu)勢，而多會綜合去發(fā)展，但是需要根據(jù)自身的優(yōu)勢和能力范去選擇建立優(yōu)勢的方向。
例如做醫(yī)藥電商的建東健康，也在大力發(fā)展醫(yī)療服務(wù)，家庭醫(yī)生方面的產(chǎn)品；專注做醫(yī)生問診服務(wù)的好大夫也有在向藥店、醫(yī)院合作方面發(fā)展；上文還未提到的平安健康更是在醫(yī)療服務(wù)、醫(yī)藥、健康險等方面同時發(fā)力（目前平安健康財報顯示其在醫(yī)療服務(wù)和醫(yī)藥上的營收占比已接近1:1）。
其實上文提到的這些維度大致可以分為：基礎(chǔ)能力建設(shè)層（數(shù)據(jù)+技術(shù)）、知識引流層、醫(yī)療服務(wù)層、醫(yī)療商品層。
醫(yī)療醫(yī)藥醫(yī)保醫(yī)健康，診前診中診后整閉環(huán)；線上線下，院內(nèi)院外，醫(yī)院醫(yī)生醫(yī)護醫(yī)全家；上有政策，下找對策，To G To B To C To all in；深挖坑，廣積糧，醫(yī)路漫漫修遠兮！
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
1.區(qū)別：vuex存儲在內(nèi)存，localstorage（本地存儲）則以文件的方式存儲在本地,永久保存（不主動刪除，則一直存在）；sessionstorage( 會話存儲 ) ,臨時保存。localStorage和sessionStorage只能存儲字符串類型，對于復(fù)雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
2.應(yīng)用場景：vuex用于組件之間的傳值，localstorage，sessionstorage則主要用于不同頁面之間的傳值。
3.永久性：當(dāng)刷新頁面（這里的刷新頁面指的是 --> F5刷新,屬于清除內(nèi)存了）時vuex存儲的值會丟失，sessionstorage頁面關(guān)閉后就清除掉了，localstorage不會。
注：大家可能覺得用localstorage可以代替vuex, 對于不變的數(shù)據(jù)確實可以，但是當(dāng)兩個組件共用一個數(shù)據(jù)源（對象或數(shù)組）時，如果其中一個組件改變了該數(shù)據(jù)源，希望另一個組件響應(yīng)該變化時，localstorage，sessionstorage無法做到，原因就是區(qū)別1。
vuex是存儲在頁面上的變量，說到底還是個Object，刷新頁面就清空了。而storage是存儲在瀏覽器的，和頁面就無關(guān)了，刷新頁面也不會清空
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
我們經(jīng)常會將Word轉(zhuǎn)換成PDF，下面給大家介紹一種很不錯的Word轉(zhuǎn)PDF格式的方式。
打開瀏覽器搜索speedpdf找到并打開在線轉(zhuǎn)換工具首頁，選擇主頁上的Word轉(zhuǎn)PDF進入轉(zhuǎn)換（也可以點擊上方所有工具字樣，選擇Word轉(zhuǎn)PDF進入）。
將需要轉(zhuǎn)換的Word文檔添加上傳后，點擊進度條后面的轉(zhuǎn)換按鈕，就可以開始轉(zhuǎn)換了，等待轉(zhuǎn)換完成后點擊下載箭頭即可。
如果轉(zhuǎn)換前有登錄賬戶，還可以通過點擊登錄頭像處，選擇賬戶，在轉(zhuǎn)換記錄中查看轉(zhuǎn)換狀態(tài)和下載轉(zhuǎn)換后的文檔。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
目錄
確保我們在vue中實現(xiàn)頁面跳轉(zhuǎn)到我們所想的頁面
可以看到當(dāng)我們點擊不同的組件的時候我們實現(xiàn)了路由的功能：在vue中實現(xiàn)頁面的跳轉(zhuǎn)
注意看，當(dāng)我點擊的時候上面地址欄中加載了不同的網(wǎng)頁。下面我們來學(xué)習(xí)下路由的寫法
路由書寫寫法：
在index.js中的router對象中書寫
-
const router = new VueRouter({
-
mode: 'history',//默認是hash模式
-
})
hash模式：
history模式：
兩種模式的區(qū)別：
起步 | Vue RouterVue Router3官網(wǎng)介紹： 起步 | Vue Router
- 下載與導(dǎo)入vue-router
- 導(dǎo)入組件
- 創(chuàng)建routes路由規(guī)則（路徑和頁面一一對應(yīng)）
- 創(chuàng)建路由對象
- 把路由對象掛載到App.vue
- 在頁面寫路由導(dǎo)航router-link （生成a標(biāo)簽）
- 在頁面寫路由出口router-view (生成占位盒子，用于顯示頁面內(nèi)容)
下面開始我們相關(guān)文件的創(chuàng)建
1.創(chuàng)建我們的腳手架(此時沒有選擇Router)：
2.準(zhǔn)備我們的App.vue文件：
-
<template>
-
<div>
-
<!-- 頂部導(dǎo)航欄 -->
-
<div class="footer_wrap">
-
<a href="#/find">發(fā)現(xiàn)音樂</a>
-
<a href="#/my">我的音樂</a>
-
<a href="#/friend">朋友</a>
-
</div>
-
<!-- 下面內(nèi)容 -->
-
<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文件夾并創(chuàng)建我們需要的.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>這是當(dāng)前頁面 query 接收到的參數(shù):
-
<span>姓名：{{ $route.query.name }}</span> --
-
<span>年齡：{{$route.query.age}}</span>
-
</li>
-
<li>這是當(dāng)前頁面 params 接收到的參數(shù):
-
<!-- <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.準(zhǔn)備圖片素材（所有素材可私信博主獲?。?
5.所有準(zhǔn)備工作做完現(xiàn)在開始我們的文件配置
1.下載與導(dǎo)入vue-router
npm i vue-router@3.6.5
導(dǎo)入vue-router (在main.js中)
-
//main.js中導(dǎo)入
-
// 0.導(dǎo)入路由
-
import VueRouter from 'vue-router'
-
// 使用vue的插件，都需要調(diào)用Vue.use()
-
Vue.use(VueRouter)
2.導(dǎo)入組件
@符號代表 /src 文件夾的絕對路徑，在腳手架中文件比較多的時候，使用這個@符號會更加的方便
在main.js中導(dǎo)入
-
// 導(dǎo)入組件
-
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.創(chuàng)建路由規(guī)則
路由規(guī)則作用： 設(shè)置 url 和 組件 對應(yīng)的規(guī)則
在main.js中寫入
-
// 路由規(guī)則
-
const routes = [
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound },
-
]
4.創(chuàng)建路由對象
路由對象： 幫你管理這些路由規(guī)則
在main.js中寫入
-
// 創(chuàng)建路由對象
-
const router = new VueRouter({
-
routes// (縮寫) 相當(dāng)于 routes: routes
-
})
5.掛載路由到根組件
掛載到根組件作用：讓你的整個應(yīng)用都有路由功能
在main.js中寫入
-
// 掛載路由到根組件
-
new Vue({
-
router,
-
render: h => h(App)
-
}).$mount('#app')
6.在頁面寫路由導(dǎo)航router-link
作用與a標(biāo)簽一樣實現(xiàn)跳轉(zhuǎn)，好處：當(dāng)點擊鏈接的時候自帶一個專屬類名
在App.vue中我們將傳統(tǒng)的a標(biāo)簽進行替換：
替換a標(biāo)簽原因：便于我們做專屬效果
我們選中點擊的超鏈接做觸發(fā)效果：
7在頁面寫路由出口router-view
占位盒子，用于渲染路由匹配到的組件
（<router-view> : 是vue內(nèi)置的一個組件,會自動替換成路由匹配的組件 ）
好了一個最最最基本的路由就被我們制作完成啦！下面我們來看看效果：
上述的操作有些許麻煩，下面我們來使用我們開發(fā)中常用的自動配置方法
創(chuàng)建腳手架方式與手動配置類似，唯一不同是此處必須選擇Router
對比手動模式：
此刻：腳手架已經(jīng)幫我們創(chuàng)建好了Router路由不需要我們下載與導(dǎo)入vue-router了
只需要寫：
- 導(dǎo)入組件
- 配置路由規(guī)則
- 路由導(dǎo)航
- 路由出口
并且為了進一步的封裝我們的配置信息，我們的配置代碼將寫在router/index.js下，不再是全部寫在main.js下。
1.導(dǎo)入組件（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.配置路由規(guī)則（index.js中）
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound }
3.路由導(dǎo)航（直接cv我們之前的App.vue文件）
-
<router-link to="/find">發(fā)現(xiàn)音樂</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>
效果查看：
自動配置省去了一些固定不變的操作，我們不需要寫繁瑣且固定的代碼，只需要寫不同的代碼。且代碼書寫的位置都給我們設(shè)置好了，我們直接遵守該規(guī)范書寫代碼即可
路由重定向官方文檔：重定向和別名 | Vue Router
重定向應(yīng)用場景： 頁面輸入根路徑/ , 自動跳轉(zhuǎn)到首頁
注意點: 重定向只是修改路徑， 還需要單獨去設(shè)置路由匹配規(guī)則
重定向命令：
-
{
-
path: '/',
-
/*
-
(1)重定向只是修改頁面路徑。 輸入 / 會重定向到 /路徑
-
(2)只有component才會讓vue去尋找路由匹配頁面。所以設(shè)置了重定向，還需要單獨設(shè)置匹配規(guī)則
-
*/
-
redirect: "路徑"
-
},
1. 就拿我們剛才創(chuàng)建的舉例：
實現(xiàn)效果：當(dāng)我在瀏覽器中打開的時候我沒有輸入任何路徑，vue自動幫我們跳轉(zhuǎn)到了 my.vue這個頁面組件
2.也可以利用重定向來設(shè)置當(dāng)我們路徑錯誤提示404頁面：
實現(xiàn)效果：當(dāng)我任意輸入沒有匹配的路徑，自動幫我們跳轉(zhuǎn)到了notfound.vue這個組件
實現(xiàn)頁面中存在第二級的跳轉(zhuǎn)
寫法(拿我們上述的案例實操，需要素材可私信博主喔)：
①在index.js中引入
-
// 導(dǎo)入二級路由
-
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 }
-
]
-
}
③寫路由導(dǎo)航與出口
查看效果：
可以看到：當(dāng)我們點擊一級路由之后，我們還可以點擊二級路由到我們的專屬頁面中
有兩種跳轉(zhuǎn)傳參方式：
- 聲明式導(dǎo)航
- 編程式導(dǎo)航
①query寫法：
在路徑中加參數(shù)信息即可
<router-link to="/路徑?參數(shù)名=參數(shù)值&參數(shù)名=參數(shù)值</router-link>
接收信息：
在觸發(fā)的組件中書寫{{ $route.query.屬性名}}接收
舉個例子：
②params寫法：
在index.jsx文件中寫：參數(shù)名。在需要傳遞的路由路徑中寫參數(shù)值
接收信息：
在觸發(fā)的組件中書寫{{ $route.params.屬性名}}接收
實現(xiàn)效果：
①query寫法:
結(jié)構(gòu)：
-
this.$router.push({
-
path: '/路徑',
-
query: { 屬性名: '屬性值'}
-
})
接收信息：
在觸發(fā)的組件中書寫{{ $route.query.屬性名}}接收
舉個例子：
②params寫法
結(jié)構(gòu):
-
this.$router.push({
-
name: '我們注冊路徑的組件名',//寫path獲取不到值?。。?/span>
-
query: { 屬性名: '屬性值'}
-
})
注意點:寫path獲取不到值，需要用name
接收信息：
在觸發(fā)的組件中書寫{{ $route.params.屬性名}}接收
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
大家有沒有遇到這樣的問題，當(dāng)你面對非常復(fù)雜的信息時，在進行信息整理設(shè)計時，往往會陷入比較糾結(jié)的場面，不知道怎么把這一堆信息進行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續(xù)閱讀。
本篇文章會提供一種解決排列問題的簡單底層邏輯，我們可以圍繞這個邏輯去排布我們的頁面，從而讓整體排版變得更加清晰合理。
信息層級存在于我們目前看到的每一個畫面。它本質(zhì)上是信息組織的一種方式，通過信息的放大縮小和對應(yīng)的位置，能夠?qū)?fù)雜的信息分為不同的模塊呈現(xiàn)在我們的視野中。
大家先簡單看一下圖中兩個畫面，你就能夠直觀感受到信息層級對于用戶認知的作用。
不好的信息層級就像左圖一樣會讓畫面比較雜亂，難以進行視覺上的識別。而優(yōu)秀的信息層級就像右圖一樣能夠讓我們快速且準(zhǔn)確的識別出畫面想要傳遞的信息。
因此信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復(fù)雜場景，我們不僅需要考慮清晰傳遞業(yè)務(wù)價值，合理的信息層級劃分也是提高產(chǎn)品體驗的重要部分，好的信息層級則意味著更好的使用體驗。
既然信息層級對于使用體驗比較關(guān)鍵，那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網(wǎng)上的資料也是參差不齊，我也曾為此類問題查閱了大量資料，想要找到一個簡單高效的答案。
但目前查閱到的資料幾乎都在講排列的四個基本原則：對比、對齊、親密、重復(fù)。不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛，讓人很難在實際中更有效地利用。
即使我對排版四個原則非常熟悉，在面對復(fù)雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進行了進一步的探索：
經(jīng)過線上頁面與概念的整體研究發(fā)現(xiàn)，他們在遵循排版原則的基礎(chǔ)上，本質(zhì)上都存在一個簡單的邏輯：那些優(yōu)秀的頁面設(shè)計都把主內(nèi)容的層級控制在了三層左右，如下圖所示。
因為三層左右的層級是最容易被用戶感知，且視覺上不易混亂。超過三層后隨著層級越多復(fù)雜性會相對增加。
比如我們看下面這兩個例子，左邊層級因為特別復(fù)雜，造成用戶獲取信息效率變低，而通過層級的轉(zhuǎn)換，我們可以將其變得更簡單且易讀。
再舉一個例子，我們在大部分場景見到的純文字排版基本都離不開以下幾種形式：
因此，我們需要在排版時需要首先思考一個邏輯：那就是盡量將我們的內(nèi)容層級控制在三層左右。且這三層內(nèi)有比較明顯的對比關(guān)系。
有同學(xué)看到這肯定要問了，這個道理我也懂啊，可是在實際業(yè)務(wù)中大部分時間拿到的信息太多，根本做不到保持在三層以內(nèi)。別急，這篇文章的重點當(dāng)然不是告訴你這么簡單的道理，而是在面對復(fù)雜層級的時候，我們應(yīng)該怎樣去控制它的層級表現(xiàn)，從而讓它在最終呈現(xiàn)上保持在三層左右，讓用戶獲取信息的效率更高。
其實我們在實際中的大部分優(yōu)秀頁面，在本身的信息層級上可能都非常復(fù)雜，但我們可以通過一系列的方法，去減輕這種多層級的影響，從而讓我們的頁面即使承載了很多復(fù)雜的信息，也能變得更加簡單清晰。那我們接下來就闡述一下對復(fù)雜層級的處理方案。
這可能是被很多人忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復(fù)雜導(dǎo)致排版很困難，但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進行第一層的判斷。
源頭降低的本質(zhì)就是判斷我們當(dāng)前所要呈現(xiàn)的信息是不是必要的。其實這也是在目前工作中遇到的場景，比如某些時候產(chǎn)品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當(dāng)前頁面的業(yè)務(wù)場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設(shè)計的一致性。
1. 當(dāng)前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響。
比如當(dāng)你在進行打車的時候，當(dāng)你輸入目的地之前，一切其他的信息都無需呈現(xiàn)。當(dāng)你輸入目的地后，車輛的相關(guān)信息和價格才會進行呈現(xiàn)，當(dāng)你打車后，司機的相關(guān)信息才會進行呈現(xiàn)。這些都是按照用戶的使用場景來進行對應(yīng)的呈現(xiàn)。
2.當(dāng)前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現(xiàn)。
當(dāng)你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當(dāng)你瀏覽新聞的時候，標(biāo)題永遠是最關(guān)注的，而評論，作者，簡介等都是可以忽略的信息。
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務(wù)溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
信息排布的本質(zhì)是通過我們對信息進行排列上的調(diào)整，來將多余的層級融入到三層以內(nèi)。從而讓我們整體的頁面顯得更加簡潔。
通過目前的實踐總結(jié)，我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。
信息分組是大家在設(shè)計時都能夠想到的形式，分組能夠?qū)?fù)雜的信息打散，從而降低頁面整體的復(fù)雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。
那么這三種方式有沒有區(qū)分呢，VIVO設(shè)計團隊曾經(jīng)就這個問題展開過用戶調(diào)研，但結(jié)果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現(xiàn)信息時的整體視覺觀感，因此我們可以根據(jù)當(dāng)前信息的復(fù)雜度作出以下規(guī)則：
通過這三種場景的區(qū)別，我們可以根據(jù)信息復(fù)雜度更好地選擇分割方式，讓界面的表達清晰明確。
組件其實是目前大部分設(shè)計師在進行信息排布時必備的部分，因此對于這部分設(shè)計師的熟練度也是最高的。而本篇想要強調(diào)的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結(jié)構(gòu)、表格結(jié)構(gòu)、步驟條、選項卡。
▍樹形結(jié)構(gòu)
對于有關(guān)聯(lián)性的多層級非常適合，可以將復(fù)雜的層級結(jié)構(gòu)進行收攏，從而能夠顯著降低信息的復(fù)雜度。
▍表格結(jié)構(gòu)
對于信息多且關(guān)聯(lián)性不大的復(fù)雜信息，可以聚合到表格來進行呈現(xiàn)，但表格的呈現(xiàn)方式不宜濫用，需要根據(jù)我們場景來進行選擇。
▍步驟條
步驟條則對場景要求非常明確，我們可以將多個場景通過分布的形式進行呈現(xiàn)，從而減少當(dāng)前頁面的復(fù)雜度。
▍選項卡
選項卡更適合與同級的數(shù)據(jù)，對于同類型的結(jié)構(gòu)可以更好地將頁面進行拆分，從而讓當(dāng)前頁面更簡潔。
由于組件這一塊大家的認知已經(jīng)比較全了，在這里就不進行更深入的講解了。如果有需要的同學(xué)可以通過瀏覽各大廠的組件文檔去進行更細致的查閱。
通過改變布局的方式，我們可以將多層結(jié)構(gòu)的樣式通過拆分布局來將其控制在三層內(nèi)。這句話什么意思呢，舉個簡單的例子：
從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結(jié)構(gòu)變?yōu)樽笥医Y(jié)構(gòu)，達到從視覺上簡化層級的作用：
當(dāng)然以上只是舉了一個簡單的例子。這里底層邏輯就是當(dāng)遇到相對比較復(fù)雜邏輯時，我們可以考慮通過改變結(jié)構(gòu)來減少其復(fù)雜度，比如上述的兩欄結(jié)構(gòu)，甚至三欄結(jié)構(gòu)，從而讓整體變得更加簡潔。
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質(zhì)上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，Coding產(chǎn)品設(shè)計中將標(biāo)題與tab利用分割排列在一起，從而變?yōu)橥粚蛹墸@個時候就不會出現(xiàn)四層的復(fù)雜結(jié)構(gòu)，頁面還是保持三層結(jié)構(gòu)，通過這種方式有效降低了頁面的復(fù)雜度。
信息融入這個方法，當(dāng)我們在進行B端布局時，用得比較多。比如我們最常見的標(biāo)題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間，還能夠降低信息層級的復(fù)雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應(yīng)的搜索范圍。
信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中，使得即使超過3層我們也不會覺得其特別復(fù)雜，我們再看一個例子：
可以看到TAPD將「另存為視圖功能」與「缺陷統(tǒng)計」進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復(fù)雜度：
因此我們需要學(xué)會對信息分級，不重要的信息就進行弱化，這樣整體的表述上會好很多。
通過上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復(fù)雜信息簡化在三層以內(nèi)，從而讓我們最終的頁面呈現(xiàn)不會太過復(fù)雜，更容易被用戶理解。但不可否認仍會有更復(fù)雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
在研究的過程中，也總結(jié)了目前在進行信息層級排布過程中比較糾結(jié)的一些細節(jié)點，也分享給大家。希望對遇到相同問題的同學(xué)一些幫助。
大家對「對齊」并不陌生，它存在于我們的每個頁面。但在對齊的過程中，我們可能會忽視一個小細節(jié)點，那就是沿著字的軸線對齊。比如下圖兩個例子：
在看見左圖時，總覺得哪里會有點奇怪，但又不知如何表述。而右圖看著就會相對更舒服。經(jīng)過對比過后明顯發(fā)現(xiàn)右邊的圖整體相比于左側(cè)會更整齊，而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組。
而左側(cè)因為標(biāo)題字和底部字沒有形成對齊，因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現(xiàn)中顯得更整齊。
這是我平時在做設(shè)計呈現(xiàn)時也會糾結(jié)的一個問題。當(dāng)你想用卡片來呈現(xiàn)視覺時，你有沒有糾結(jié)過到底是用線框卡片還是背景色填充呢。
我就曾陷入這種糾結(jié)，但在去搜索查閱時，發(fā)現(xiàn)目前其實關(guān)于這塊相關(guān)的資料，因此在大部分情況下都是由設(shè)計師自行決定的。但經(jīng)過線上產(chǎn)品的調(diào)研發(fā)現(xiàn)，這塊內(nèi)容其實也包含著一定的規(guī)則：
1.取決于卡片的數(shù)量
對于卡片少的其實可以用色塊來呈現(xiàn)，對于卡片多的可以考慮用線框來進行。這其實主要是從一個視覺的維度來進行呈現(xiàn)，舉個簡單的例子：
通過coding和飛書的卡片對比，你會發(fā)現(xiàn)卡片過多時線性設(shè)計會讓頁面顯得更整潔和清新，色塊設(shè)計就會讓頁面顯得更厚重。右側(cè)整體的呈現(xiàn)行會顯得更好一些。
2.取決于頁面的視覺重心
這里頁面視覺重心的含義是當(dāng)你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調(diào)，可以看到下圖的例子，右側(cè)的頁面會相對更穩(wěn)重一點。
在進行色塊時，時常會糾結(jié)用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區(qū)分呢，我們應(yīng)該何時使用這兩種色彩呢。
我們先看一下案例：
可以看出目前這兩種顏色的運用更多的是功能上的區(qū)分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導(dǎo)或者營銷性質(zhì)的頁面。從表現(xiàn)性質(zhì)上來講更重。
2.而灰色背景更適用于「利用灰色背景來區(qū)分層級關(guān)系」或者一些微弱提示的信息。從表現(xiàn)形式上來講更輕。
所以我們可以根據(jù)當(dāng)前的信息場景來選擇合適的色彩，后面再面對時就可以不用那么糾結(jié)。
本期的內(nèi)容到這里就結(jié)束了。關(guān)于這期的信息層級內(nèi)容，真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優(yōu)秀頁面并不是因為它本身就簡單，而是通過我們合理的信息層級控制，讓最終呈現(xiàn)上顯得不復(fù)雜，這其實也是我們在實際工作中需要注意的很重要的一個點。
本文重點內(nèi)容再回顧，當(dāng)我們遇見復(fù)雜的信息層級時，需要分三步：
1.明確當(dāng)前所有信息的必要性和重要分級，需要從源頭去深入了解；
2.運用五個方法可以有效減低信息層級：信息分組、組件拆分、更改布局、信息融入、信息弱化
3.同時在運用過程中需要注意影響層級的小細節(jié)
以上是本文關(guān)于信息層級的另一種角度的描繪，雖然沒有提及四大基本原則，但在實際運用中也是很重要的。最后，雖然進行了很多資料查詢，但在在闡述過程中不可避免會有闡述不到位的地方，歡迎進行反饋。
原文地址：站酷
作者：蒙東東
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》科幻機甲風(fēng)格海報怎么做？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
目錄
上部分為標(biāo)題、中間為表單、底部為確定按鈕
底部背景、標(biāo)題文本、右上角關(guān)閉按鈕
祝福語文本、紅包數(shù)量文本、紅包總金額、當(dāng)前余額文本顯示、以及前往充值按鈕
左邊為需支付金額顯示，右邊為取消和確定按鈕
圖片寬度380px像素，高度56px像素
2）背景圖片自動填充
布局一個div，寬度為400px像素，高度為56px像素，然后再設(shè)置背景圖片樣式，由于圖片本身寬度小于div寬度，div會多出20px像素，圖片會自動填充，默認效果如下
-
<div style="width:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;">
-
-
</div>
3）圖片百分比顯示
再給div設(shè)置背景百分比縮放顯示，效果如下
background-size: 100%;
4）文本
布局一個span標(biāo)簽，顯示"添加紅包"文本，白色黑體，18號字體，加粗，左對齊，且左邊距20px像素。并設(shè)置div標(biāo)簽56px像素垂直居中樣式，效果如下
5）關(guān)閉按鈕
在右上角添加一個關(guān)閉按鈕，一般可以設(shè)置一個svg標(biāo)簽圖標(biāo)，設(shè)置高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設(shè)置相對定位position樣式，位于右上角。它所在的父級就要設(shè)置絕對定位relative。這樣關(guān)閉按鈕圖標(biāo)就會以它所在的父級定位，否則可能會布局錯位，比如下面錯位效果
-
<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函數(shù)
它屬于css3的功能，calc() 函數(shù)用于動態(tài)計算長度值。對于布局非常有作用。
需要特別注意，函數(shù)內(nèi)的參數(shù)值前后都需要保留一個空格，例如：width: calc(100% - 40px)；
3）刷新小圖標(biāo)
樣式設(shè)置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輸入文本框默認點擊選中會有一個高亮的效果，可以設(shè)置樣式去掉
outline:none;5）隨機文本
設(shè)置隨機祝福語文本值，可設(shè)置js全局?jǐn)?shù)組參數(shù)變量保存。
并且給右邊的刷新按鈕綁定點擊事件，然后在事件內(nèi)使用隨機函數(shù)進行隨機顯示
-
<script type="text/javascript">
-
$(function () {
-
-
// 祝福語
-
var labelText = ['成就一億技術(shù)人!', '節(jié)日快樂', 'Hello World', '新春大吉!', '大吉大利', 'Bug Free'];
-
$('.cl-input img').click(function () {
-
// Math.random() - 隨機函數(shù)會產(chǎn)生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="請?zhí)顚懠t包祝福語或標(biāo)題" value="成就一億技術(shù)人!" />
-
<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>
布局和祝福語一樣，刷新按鈕換成了單位文本。
這里文本框有個離開焦點事件，如果判斷沒有輸入值，那么提示”請輸入數(shù)量"，并且紅包數(shù)量只能是正整數(shù)，文本框也變?yōu)榧t色邊框，默認則為藍色邊框
-
<div class="content-label">
-
<div class="cl-text">
-
<span style="color:#f00;">*</span>
-
<span>紅包數(shù)量</span>
-
</div>
-
<div class="cl-input">
-
<input placeholder="請?zhí)顚懠t包數(shù)量" value="" />
-
<span>個</span>
-
</div>
-
</div>
-
$("#txtCount").blur(function () {
-
txtCount = $(this).val();
-
if (txtCount == undefined || txtCount == null || txtCount == '' || txtCount.trim() == '') {
-
$("i", $(this).parent()).show().html('請輸入數(shù)字！');
-
$(this).parent().addClass('red-border');
-
}
-
else {
-
if (txtCount <= 0) {
-
$("i", $(this).parent()).show().html('請輸入有效數(shù)字格式！');
-
$(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="請?zhí)顚懠t包總金額" value="" />
-
<span>元</span>
-
</div>
-
</div>
這里的布局和前面稍微多點東西，布局差不多。
這里只做讀取展示用，也可以用input輸入文本框，設(shè)置默認只讀即可
-
<div class="content-label">
-
<div class="cl-text">
-
<span style="color:#f00;">*</span>
-
<span>余額支付</span>
-
</div>
-
<div class="cl-input">
-
<label>當(dāng)前余額：<b>51.25</b> 元</label>
-
<span class="span">前往充值 > </span>
-
</div>
-
</div>
當(dāng)點擊文本框時，先判斷是否已經(jīng)提示無效信息，也就是已經(jīng)有紅色邊框，有則不顯示藍色邊框，沒有則顯示藍色邊框。當(dāng)離開文本框焦點，那么則移除藍色邊框
-
// 文本框點擊事件
-
$('.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）支付額文本
這里布局左定位，金額數(shù)字加紅色字體
2）取消和確認按鈕
取消按鈕鼠標(biāo)移動上去邊框變深，直接使用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）交互代碼
-
// 紅包個數(shù)
-
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);
-
});
紅包數(shù)量和紅包金額那里還有幾個交互和邏輯判斷，有興趣的小伙伴可以自己實現(xiàn)下，有疑問的可咨詢了解
完整代碼可以查看gitCode：小5聊 / Csdn Red Bag Html · GitCode
| calc()函數(shù) | 可用于高寬度精準(zhǔn)布局，更加合理布局 |
| position和relative | 相對和絕對定位，同樣有助于合理定位和布局 |
| Math.random() | 隨機函數(shù)，隨機產(chǎn)生0~1的值 |
| keyup() | 鍵盤彈上事件 |
| click() | 元素點擊事件 |
| blur() | 離開焦點事件 |
總結(jié)：前端布局，要玩出花樣和效果，還是需要點藝術(shù)天賦?？傊?，挺有趣的，剛?cè)腴T可能會覺得比較難，當(dāng)你熟練之后，還是挺有趣的！
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
通知是許多產(chǎn)品中不可或缺的一部分，它用于傳遞產(chǎn)品的一些新的信息狀態(tài)，幫助用戶能夠及時收到信息。
本文將討論五種類型的 UI 通知，以及何時以及如何使用它們的基本規(guī)則。
通知是產(chǎn)品能夠與用戶及時同步信息變化，及時發(fā)送重要通知，例如產(chǎn)品更新、信息提醒、互動提醒、新消息通知等。
消息通知是為產(chǎn)品賦能，為用戶提供幫助，便于快速獲取對應(yīng)的通知信息，例如產(chǎn)品更新、信息提醒、互動提醒、新消息通知等，在 App 和網(wǎng)頁應(yīng)用中最常見的信息交換方式則是消息通知。
消息作為一種信息交換方式，抽象其過程，即為“在達到某一觸發(fā)條件下，由發(fā)送方發(fā)送消息給到接收方，接收方可針對此條消息提供反饋”。
基礎(chǔ)的通知模塊通常有標(biāo)題、內(nèi)容、入口、徽標(biāo)、識別圖標(biāo)五個元素構(gòu)成
標(biāo)題區(qū)域：用戶傳遞消息的核心區(qū)域，整個通知的信息都是圍繞標(biāo)題進行，一般標(biāo)題以簡短精煉為主，讓用戶在最短時間了解到關(guān)鍵信息。
內(nèi)容區(qū)域：主要描述更加詳細的通知內(nèi)容，當(dāng)然這里的內(nèi)容也不建議超過2行，并且不要重復(fù)標(biāo)題中內(nèi)容
操作區(qū)域：通知分為可點擊類和不可點擊類，當(dāng)通知模塊需要用戶點擊時，視覺上應(yīng)該更加具象，如按鈕、箭頭，不要讓用戶產(chǎn)生思考。
圖標(biāo)圖片：有意義的圖像可以強化通知的內(nèi)容，例如，如果你將收到的消息通知用戶，你可以包含發(fā)件人的頭像。
通知的模式根據(jù)不同的場景也會有不同類型，接下來將一一講解這5種通知類型，以及使用場景。
徽標(biāo)是一個小的填充橢圓形，可以出現(xiàn)在應(yīng)用程序圖標(biāo)上并指示未看到的更新。徽標(biāo)可以有一個數(shù)字，用于通知用戶未讀通知的數(shù)量。用戶檢查更新后，徽章會從應(yīng)用程序圖標(biāo)中消失，并在新通知到達時再次出現(xiàn)。
感知：它可以對用戶產(chǎn)生積極的影響，在某些情況下，用戶可以將徽章視為有價值的獎勵，例如，徽章會通知用戶他們在社交網(wǎng)絡(luò)上收到新的點贊、評論，Nir Eyal曾在他的書“Hooked”中描述了這種心理效應(yīng)。
視覺：紅色作為警惕色，用戶看到后會更具有點擊欲望，相對產(chǎn)品的一些數(shù)據(jù)指標(biāo)會有對應(yīng)的提升
需要用戶采取額外的行動，徽章本身不是通知，這是通知的警報，它只是說明了用戶有新更新的事實，用戶必須單擊或點擊帶有徽章的圖標(biāo)才能看到實際消息，紅色為強干擾元素，對一些具有強迫癥的用戶很不友好，在體驗上會有一定的影響
一般用戶消息的通知，例如系統(tǒng)通知、社交中的點贊、評論、回復(fù)等內(nèi)容
推送通知是出現(xiàn)在移動設(shè)備的鎖屏上并引起很多關(guān)注的通知。
很難讓用戶忽略該推送通知，如果用戶不進行處理，會長時間浮動在手機上
由于系統(tǒng)上app很多，會導(dǎo)致用戶對該類的通知處于麻木狀態(tài)，推送通知的效果不是很強
如果過度使用，頻繁的推送通知，即使它們很有價值，也可能會惹惱用戶
推送通知適用于重要且時間敏感的更新（即用戶設(shè)置的日歷提醒或警報、航班延誤或已交付訂單的更新），在您發(fā)送推送通知之前，您需要確保您將與用戶共享的信息是有價值的和時效性的，否則，最好使用其他類型的通知。
a、不要使用推送通知來提示用戶對應(yīng)用進行評分
b、不建議將推送通知用于促銷或廣告
c、不要使用推送通知來鼓勵用戶返回應(yīng)用，例如“好久沒見到你了，是否想念了呢”通知不會為用戶提供太多價值，需要向用戶明確說明他們應(yīng)該返回應(yīng)用程序的目的
d、允許用戶更改通知行為
用戶會收到一封電子郵件，其中包含有關(guān)更新的詳細信息，不過這類通知目前在國外的一些網(wǎng)站使用頻率比較高，根據(jù)習(xí)慣來講，國外更多的還是習(xí)慣用郵件的方式作為重要信息的交流方式，相比之下國內(nèi)使用郵件來傳遞信息的頻率略低
給用戶更多的控制權(quán)，由用戶決定是否要訂閱電子郵件，如果電子郵件標(biāo)題足夠好，用戶可能無需閱讀電子郵件就可以理解上下文。
周期長，國內(nèi)用戶可能幾個月甚至1年都看不了一次郵件，此外，電子郵件可能會在用戶收件箱中丟失（即轉(zhuǎn)到垃圾郵件文件夾）
它需要切換上下文，當(dāng)應(yīng)用程序發(fā)送需要用戶操作的電子郵件通知時，用戶必須切換到電子郵件應(yīng)用程序才能完成操作，這可能不是很方便，尤其是當(dāng)您與移動設(shè)備上的應(yīng)用程序交互時。
需要安全性時，想要使用電子郵件通知有兩個原因，首先，出于安全目的，你可能希望將電子郵件用作單獨的通道（即，當(dāng)用戶嘗試登錄服務(wù)時，應(yīng)用程序會發(fā)送一封電子郵件，其中包含有關(guān)新登錄嘗試的通知）。4.Toast通知
Toast 屬于一種及時性通知，當(dāng)用戶進行操作時，及時給出反饋，通常在移動端顯示在界面的上、中、下三個位置，而web端通常顯示在頂部區(qū)域，toast持續(xù)一定時間后會自動消失，對用戶的打擾較小
Toast 是與當(dāng)前頁面的內(nèi)容強關(guān)聯(lián)，用戶無需離開當(dāng)前頁面就能看到反饋消息
不會中斷用戶操作，出現(xiàn)時間短，對操作上無影響
丟失信息的風(fēng)險，用戶注意力不集中時，會出現(xiàn)漏掉關(guān)鍵性信息的情況
Toast 是一種操作狀態(tài)，例如，消息發(fā)送時可以在消息發(fā)送成功時顯示toast“發(fā)送成功”
不要使用 toast 來提示與當(dāng)前用戶操作無關(guān)的信息
不要將 toast 用于錯誤消息，由于 toast 會在短時間內(nèi)消失，因此某些用戶可能無法閱讀錯誤消息
全屏覆蓋/模態(tài)窗口是出現(xiàn)在應(yīng)用內(nèi)容頂部并要求用戶做出決定的對話框窗口，這種類型的通知會在所有應(yīng)用功能出現(xiàn)時禁用它們并保留在屏幕上，直到用戶完成所需的操作。
用戶在訪問應(yīng)用程序時將 100% 看到通知，無法避免此通知。
它會阻礙用戶當(dāng)前的操作，迫使用戶操作通知相關(guān)的內(nèi)容
全屏覆蓋/模式窗口應(yīng)僅用于需要用戶操作的最關(guān)鍵的系統(tǒng)更新，例如，它可能是阻止應(yīng)用程序正常運行的錯誤或需要特定用戶決策的關(guān)鍵信息。
詢問用戶是否想接收特定類型的信息，當(dāng)用戶明確選擇接收某些類型的通知時，說明他們的意愿更強，比產(chǎn)品強制傳輸消息效果較好
一些流氓軟件會發(fā)送一些系統(tǒng)通知，用戶無反饋后，還是會重復(fù)發(fā)送，特別是一些短信push，建議用戶沒有回復(fù)時，也不要發(fā)送后續(xù)通知，大部分人的本性是不愿意被脅迫做一些事。
不要在通知中包含敏感信息，例如一些文化特殊性、地域的特殊性等，防止出現(xiàn)觸及別人痛處的一些文字語言
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://sillybuy.com