體驗(yàn)經(jīng)濟(jì)的時(shí)代已經(jīng)到來，無論是實(shí)體產(chǎn)業(yè)或是虛擬產(chǎn)業(yè)越發(fā)依賴于服務(wù)和體驗(yàn)帶來的經(jīng)濟(jì)效益，作為互聯(lián)網(wǎng)從業(yè)者，深刻認(rèn)識(shí)到體驗(yàn)的重量，從尊重用戶體驗(yàn)到掌握體驗(yàn)思維，于大多數(shù)角色而言都是一門必修課。

“附近的火鍋店味都差不多，不過A家服務(wù)員態(tài)度好好，而且還有好多免費(fèi)小吃，吃完還能做美甲，吃它！

“下班一起去新開那家咖啡館打卡不？朋友圈看到裝修好有格調(diào)，甜點(diǎn)看起來也超精致，特別適合拍照呢！

“周末那家密室劇情挺一般的，不過場(chǎng)景氛圍還不錯(cuò)，挺刺激的，關(guān)鍵是npc好帥，小姐姐也好美，還想去！

“師傅，麻煩稍微快點(diǎn)我趕時(shí)間估計(jì)要遲到了，“小伙子放心，坐穩(wěn)了”，8分鐘后，遲到前5分鐘，打卡成功。
——僅以此條向重慶全體出租車師傅致敬」

...

很熟悉吧？還有數(shù)不清類似的場(chǎng)景充斥在我們的身邊，近些年來，消費(fèi)者對(duì)事物的評(píng)判標(biāo)準(zhǔn)有了翻天覆地的變化，一家餐廳對(duì)于顧客的價(jià)值，決定性因素不再是單一的菜品口味；服務(wù)員的顏值、裝修的格調(diào)、菜品是否精致、拍照好不好看、服務(wù)態(tài)度如何、有無明星打卡經(jīng)歷，甚至是吃飯免費(fèi)做美甲這樣的邊際體驗(yàn)都加入了顧客對(duì)餐廳的價(jià)值評(píng)判標(biāo)準(zhǔn)中，餐廳的效益與顧客的粘性甚至取決于這些邊際體驗(yàn)；市場(chǎng)的高強(qiáng)度供給和國民經(jīng)濟(jì)效益的提升，為消費(fèi)者帶來了更大的選擇空間，解決剛需不再是人們的唯一追求，“品質(zhì)“一詞開始走進(jìn)大眾群體的生活，相比果腹而言，服務(wù)與體驗(yàn)這類精神消費(fèi)需求成為了新世代消費(fèi)者所追逐的對(duì)象，同時(shí)也成為了評(píng)判事物價(jià)值的新機(jī)制。

當(dāng)下市場(chǎng)，商家、消費(fèi)者與互聯(lián)網(wǎng)平臺(tái)形成新的內(nèi)容產(chǎn)業(yè)鏈，消費(fèi)者通過平臺(tái)及商家不斷收獲各類峰值體驗(yàn)，更有甚者還能以此獲利，而商家和平臺(tái)則收獲流量和經(jīng)濟(jì)效益，在人貨場(chǎng)的概念中形成生態(tài)閉環(huán)，可謂互相成就。而如何滿足顧客的精神消費(fèi)需求以及怎樣制造更多更好的邊際體驗(yàn)，成為企業(yè)的“新基建“，其帶來的效應(yīng)讓人著迷，在資本逐利的市場(chǎng)中，不乏企圖通過這樣的手段筑起高樓的群體。

“在當(dāng)下這個(gè)時(shí)代，消費(fèi)趨勢(shì)從購買東西轉(zhuǎn)向了購買體驗(yàn)。生產(chǎn)自動(dòng)化導(dǎo)致東西越來越不值錢，買回家還占地方。很多高級(jí)消費(fèi)在于購買體驗(yàn)，比如旅游、參加音樂會(huì)，到現(xiàn)場(chǎng)觀看重大比賽。對(duì)于商家來說，用戶體驗(yàn)就是商機(jī)，其帶來的最直接的好處就是提升黏性，產(chǎn)生利潤?！?《行為設(shè)計(jì)學(xué)》節(jié)選)

從剛需到服務(wù)，消費(fèi)趨勢(shì)如此，用人趨勢(shì)也如此；在內(nèi)卷對(duì)互聯(lián)網(wǎng)行業(yè)深度滲透的環(huán)境下，設(shè)計(jì)師理應(yīng)保有危機(jī)意識(shí)，單向的剛需能力不再滿足于企業(yè)對(duì)設(shè)計(jì)師的價(jià)值認(rèn)可，如何打造自身對(duì)企業(yè)的“體驗(yàn)”和“價(jià)值”成為大部分人的課題；我個(gè)人向來不主張?jiān)O(shè)計(jì)師朝著所謂的“高復(fù)合性、UXD、全棧“等風(fēng)尖能力看齊（高階人才請(qǐng)掠過），窄而精，精而深，深而廣，這樣的“以單向能力為主的樹形擴(kuò)張則更適用于大多數(shù)站在塔尖下的設(shè)計(jì)師（個(gè)人認(rèn)為），以UI\UX設(shè)計(jì)師為例，如何以單向核心能力拓展分支技能呢？本文將以我的實(shí)際工作案例進(jìn)行深度剖析，圍繞體驗(yàn)思維和行為設(shè)計(jì)等分支技能如何在設(shè)計(jì)中實(shí)踐應(yīng)用，并以此構(gòu)建更具廣度和深度的設(shè)計(jì)解題能力。

(一) 被設(shè)計(jì)的體驗(yàn)

案例：內(nèi)容電商產(chǎn)品，商品詳情頁迭代

方法：結(jié)合線下購書場(chǎng)景體驗(yàn)，預(yù)測(cè)用戶行為，設(shè)計(jì)用戶行為動(dòng)線。

路徑：尋找癥結(jié)>場(chǎng)景預(yù)測(cè)>產(chǎn)出>復(fù)盤

第一步，理解購買流程

工欲善其事，必先利其器。第一件事，站在用戶視角和平臺(tái)視角分別對(duì)購買流程進(jìn)行拆分對(duì)比，以此加深各個(gè)環(huán)節(jié)所對(duì)應(yīng)業(yè)務(wù)場(chǎng)景的理解認(rèn)知。

用戶視角購買流程：種草->品類決策->商品決策->購后交流；此流程會(huì)隨不同的用戶類型進(jìn)行變化，例如帶有意向商品進(jìn)入APP的用戶則省去種草、品類決策兩個(gè)環(huán)節(jié)；

平臺(tái)視角購買流程：售前->售中->售后3個(gè)階段，售前對(duì)應(yīng)種草，售中聚焦商品決策。

第二步，場(chǎng)景的本質(zhì)

商品詳情頁是用戶發(fā)起購買行為的重要途徑，其本質(zhì)是售中環(huán)節(jié)的商品決策工具，是通過人工干預(yù)的手段，提高商品與消費(fèi)者的連接與匹配效率，從而為產(chǎn)品獲得更高的收益；在滿足用戶基礎(chǔ)產(chǎn)品體驗(yàn)的同時(shí)，也承載著平臺(tái)流量分發(fā)后的關(guān)鍵轉(zhuǎn)化任務(wù)。

廣義上的消費(fèi)決策場(chǎng)景，大多聚焦在售中環(huán)節(jié)的商品決策，場(chǎng)景為用戶通過外部場(chǎng)景進(jìn)入到商品詳情頁，判斷一個(gè)意向商品是否值得購買，決策的結(jié)果是收藏、加購或立即購買，當(dāng)然也可能直接離開；由此得出，商詳場(chǎng)景的核心體驗(yàn)是通過有效的信息陳列，幫助用戶了解商品與價(jià)值判斷后積極的進(jìn)行購買決策，而同時(shí)也是連接用戶與作者以及其他關(guān)聯(lián)商品的流量橋梁。 在理解場(chǎng)景的本質(zhì)后目標(biāo)變得清晰起來，為用戶設(shè)計(jì)一個(gè)好用的決策工具，為平臺(tái)設(shè)計(jì)一個(gè)有用的信息容器。

為用戶造工具，第一件事是剖析用戶：通過線上平臺(tái)購買商品，用戶的消費(fèi)決策過程是怎樣的？(常規(guī)）

結(jié)論：用戶通過對(duì)商品的認(rèn)知了解、價(jià)值判斷建立相關(guān)的購買意愿后進(jìn)行購買決策。

售中環(huán)節(jié)的信息構(gòu)建是用戶了解商品與自身匹配率并建立購買意愿的核心途徑，場(chǎng)景所具備的信息傳達(dá)能力對(duì)用戶的最終決策起到?jīng)Q定性作用；為給用戶帶來更好的購物體驗(yàn)，我通過還原線下購物場(chǎng)景獲取靈感，構(gòu)建線上購書的行為模型，從而對(duì)商詳進(jìn)行優(yōu)化，力求帶給用戶一個(gè)符合習(xí)慣認(rèn)知的、高效、有效的決策工具，同時(shí)思考為用戶帶來體驗(yàn)效益的情景下，提前洞察可能出現(xiàn)的問題以及對(duì)業(yè)務(wù)場(chǎng)景進(jìn)一步支撐的同時(shí)能否主動(dòng)推進(jìn)業(yè)務(wù)的發(fā)展。

第三步，設(shè)計(jì)行為模型

分析消費(fèi)者線下購書行為，通常為逛書店-拿起書-翻開書-查和問-做決定等五個(gè)階段。

分析消費(fèi)者在線下的購物行為，結(jié)合業(yè)務(wù)場(chǎng)景構(gòu)建具有可行性的行為模型，通過行為模型教育用戶進(jìn)入商詳場(chǎng)景后基于動(dòng)線進(jìn)行瀏覽，將信息獲取效率最大化，并以此提高商品與用戶的匹配效率。

第四步，行為模型塑造購物體驗(yàn)

現(xiàn)狀評(píng)估：基于行為模型，從信息關(guān)注度、信息傳達(dá)能力兩方面對(duì)框架結(jié)構(gòu)進(jìn)行體驗(yàn)測(cè)評(píng)。

首屏是用戶對(duì)場(chǎng)景建立認(rèn)知的核心方式，當(dāng)前商詳?shù)谝黄脸尸F(xiàn)的信息維度較多且落點(diǎn)分散，用戶的注意力被大量分散，無法引導(dǎo)其完成對(duì)商品和場(chǎng)景的快速認(rèn)知。

歸納前文有效信息，分別站在視覺與交互的視角對(duì)存在的問題進(jìn)行歸類并提出對(duì)應(yīng)策略：

1.產(chǎn)品吸引力（氛圍、質(zhì)感、信息傳達(dá)能力

2.優(yōu)化信息結(jié)構(gòu)（信息關(guān)注度、信息深度）：教育用戶行為，降低用戶消費(fèi)決策中的行為阻力，提高商品與用戶的匹配效率

3.設(shè)計(jì)最小可行性方案，將實(shí)施資源最小化，在業(yè)務(wù)規(guī)則的限制下得出最優(yōu)解。

第五步，方案演示

結(jié)論：在新的場(chǎng)景中，基于行為模型對(duì)框架的優(yōu)化，信息結(jié)構(gòu)變得清晰，高效的信息傳達(dá)能力讓用戶在最短時(shí)間內(nèi)完成與商品的匹配決斷，縮短了用戶購買決策的體驗(yàn)路徑；同時(shí)頁面的視覺質(zhì)感得以提升，用戶在決策過程中的愉悅度也得以相對(duì)提升，提高了產(chǎn)品吸引力。

詳解——信息關(guān)注度、傳達(dá)能力：通過調(diào)整首屏信息陳列的親密度主動(dòng)對(duì)用戶注意力進(jìn)行分配，清晰的信息結(jié)構(gòu)會(huì)引導(dǎo)用戶的視線按照行為模型獲取信息，當(dāng)用戶進(jìn)入商詳場(chǎng)景后，會(huì)快速聚焦到頭部信息對(duì)商品進(jìn)行基礎(chǔ)了解，并完成第一階段的決策(購買意愿)；

詳解——信息深度、行為阻力、降噪：將詳情信息字段雙行展示調(diào)整為7行極限展示，減少了首屏信息維度的數(shù)量，以此降低用戶首次進(jìn)入場(chǎng)景后接觸到的信息噪音，同時(shí)降低了展開收起功能的操作頻率，滿足了部分用戶的閱讀需求，為決策中期可能產(chǎn)生的行為阻力做了減法。

詳解——產(chǎn)品吸引力：新增彩色背景提高了整體氛圍感，加上信息親密度的調(diào)整，界面整體視覺質(zhì)感的友好度和精致度都有不錯(cuò)的呈現(xiàn)，同時(shí)決策按鈕的配色調(diào)整也企圖在調(diào)動(dòng)用戶積極心理的能力上得到提升。

展示——設(shè)計(jì)結(jié)果（僅對(duì)首屏作展示）：

衡量指標(biāo)，設(shè)計(jì)自證

結(jié)合數(shù)據(jù)表現(xiàn)與體驗(yàn)評(píng)估，整體體驗(yàn)諸如商品認(rèn)知能力、匹配效率等得以提升，但關(guān)鍵轉(zhuǎn)化仍然不理想：

· 信息關(guān)注度：對(duì)用戶完成商品基礎(chǔ)了解建立購買意愿后的瀏覽動(dòng)機(jī)存疑，決策中期的信息構(gòu)建仍有調(diào)整空間
· 信息的質(zhì)量：現(xiàn)有內(nèi)容策略缺乏說服力，無法滿足用戶對(duì)商品價(jià)值的深度評(píng)估，促進(jìn)用戶決策的能力顯得不足
· 心智模型：表現(xiàn)力上，新版商詳帶給用戶的心智模型呈現(xiàn)為“類閱讀產(chǎn)品”，缺少有關(guān)交易屬性的信息，且信任力不足，導(dǎo)致了商品的不確定性。

從數(shù)據(jù)看：1-12s內(nèi)無法對(duì)首屏信息進(jìn)行有效瀏覽吸收，表現(xiàn)出用戶對(duì)此處信息關(guān)注度較低，第二階段的詳細(xì)信息處字段冗長，滿足部分用戶閱讀需求的同時(shí)也引起了其他用戶的閱讀負(fù)擔(dān)，在一定程度上挑戰(zhàn)了用戶耐心，信息露出需要平衡。

基于行為模型設(shè)計(jì)的導(dǎo)航策略過于線性、理想化，在用戶實(shí)際進(jìn)行購買決策時(shí)心理路徑存在線性和非線性兩種群體，所關(guān)注的信息也不盡相同。

(二) 消費(fèi)決策，心理探尋

方法：通過ELM（詳盡可能性模型）探索用戶的消費(fèi)決策心理路徑，以此對(duì)方案進(jìn)行調(diào)整優(yōu)化。

ELM模型認(rèn)為，人類被說服的模型有兩種，即中央路徑和邊緣路徑：

在中央路徑下：當(dāng)個(gè)人的動(dòng)機(jī)和能力比較強(qiáng)的時(shí)候，人們會(huì)理性思考、仔細(xì)評(píng)估之后做出決策，知識(shí)水平較高或有相對(duì)性需求時(shí)往往傾向于理性的選擇；

在邊緣路徑下：當(dāng)個(gè)人的動(dòng)機(jī)和能力比較弱的時(shí)候，人們滿足于當(dāng)下的認(rèn)知，通常不愿耗費(fèi)精力對(duì)信息加以分析，且對(duì)信息內(nèi)容的真實(shí)性無法判斷，只能通過一些信息的外圍因素來決定該信息的可信度，從而涵蓋了感情因素，更容易被表面因素說服；

舉個(gè)例子：小明和小黃逛街時(shí)看到一家環(huán)境老舊卻不便宜的冷飲店，本應(yīng)嗤之以鼻的小明看到門口排起的長龍和精美的飲品包裝設(shè)計(jì)，讓他放下顧慮立即拉著小黃參與排隊(duì)購買飲品，他相信，大家都在買的就是好的；而排隊(duì)過程中，小黃則仔細(xì)觀察店內(nèi)環(huán)境衛(wèi)生以及店員的操作手法，同時(shí)上網(wǎng)查詢?cè)摾滹嫷甑馁Y料和口碑，經(jīng)過對(duì)收集到的信息和眼前所看到的場(chǎng)景進(jìn)行評(píng)估后，小黃覺得這個(gè)飲品不衛(wèi)生，決定放棄購買。在這個(gè)例子中，本應(yīng)嗤之以鼻的小明受到外在因素（生意好排長龍、他人行為、包裝好看）影響，做出了不理智的決策，是典型的快思維（邊緣決策路徑）。而小黃經(jīng)過親身觀察和上網(wǎng)查閱的手段對(duì)飲品衛(wèi)生做出的決策，也就是前文提到的慢思維（中央路徑）

兩條路徑處理的信息不同，在中央路徑處理的都是與信息質(zhì)量相關(guān)的線索，而在邊緣路徑中，處理的則是一些表象信息內(nèi)容。

結(jié)合場(chǎng)景梳理用戶決策的思考過程中的關(guān)注點(diǎn)：

依據(jù)結(jié)論，需完善同時(shí)滿足兩種決策模式下用戶所需的信息：

主要體現(xiàn)在信息質(zhì)量與表象信息兩個(gè)維度，并且在界面的信息傳達(dá)中突出商品屬性，增加商品感。

內(nèi)容共建，決策參考：當(dāng)用戶產(chǎn)生購買行為時(shí)，首先是需要被說服的，無論是被他人說服，被廣告說服，還是被自己說服。討論區(qū)的建設(shè)，在交易場(chǎng)景連接了內(nèi)容側(cè)的業(yè)務(wù)，同時(shí)推動(dòng)產(chǎn)品內(nèi)容質(zhì)與量的發(fā)展，并試圖通過言論促成“用戶說服用戶”的決策模式，同時(shí)滿足了中央路徑、邊緣路徑兩種用戶的信息供給。

強(qiáng)調(diào)心智，情緒體驗(yàn)：將原本處于第二屏的交易信息前置，矯正整體用戶對(duì)界面認(rèn)知的心智模型，同時(shí)讓用戶了解商品信息后第一時(shí)間感知到購買權(quán)益及相關(guān)配送體驗(yàn)，完善首屏的信任力、保障確定性，讓用戶具備“放心買”的心理；界面視覺的質(zhì)感優(yōu)化仍然以提高用戶愉悅度為主，企圖在決策過程中帶給用戶更好的邊際體驗(yàn)，讓用戶在表象層面提升對(duì)產(chǎn)品的好感度，以信任力\好感度\平臺(tái)和用戶的內(nèi)容共建等方式在人因決策之外發(fā)揮促進(jìn)購買決策的最大因果。

結(jié)語

以上案例部分內(nèi)容以倒推形式進(jìn)行復(fù)盤，是脫離數(shù)據(jù)之外的解題思考方式；希望我的文章能夠?yàn)楦信d趣的同學(xué)帶來新的思考，也期望體驗(yàn)思維與行為設(shè)計(jì)能夠被更多設(shè)計(jì)師所熟知應(yīng)用。

設(shè)計(jì)源于生活，無論是購物、玩游戲或事社交，打破線上線下的場(chǎng)景壁壘進(jìn)行觀察、思考，解題方式不乏在你身邊的生活場(chǎng)景中，人的行為始終具有參考價(jià)值。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷  作者：秋思野

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

本篇文章橫向調(diào)研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企業(yè)級(jí)產(chǎn)品設(shè)計(jì)體系的響應(yīng)式設(shè)計(jì)部分，從設(shè)計(jì)策略、設(shè)計(jì)模式、實(shí)施模式、設(shè)計(jì)方案四個(gè)層面大致歸納了一些信息，旨在對(duì)響應(yīng)式設(shè)計(jì)有一個(gè)籠統(tǒng)的了解。

關(guān)于 Adaptive Design 與 Responsive Design先厘清兩個(gè)概念，關(guān)于響應(yīng)式設(shè)計(jì)通常會(huì)有兩個(gè)普遍認(rèn)識(shí)，即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 與 Responsive Web Design (RWD) 概念，它們的核心區(qū)別在于 AWD 針對(duì)不同的設(shè)備或屏幕尺寸定制化設(shè)計(jì)多個(gè)固定布局的尺寸，而 RWD 是同一套代碼做彈性的適應(yīng)，本質(zhì)上它們都在解決產(chǎn)品設(shè)計(jì)如何適應(yīng)于不同設(shè)備以及不同屏幕規(guī)格的問題，本篇所指的「響應(yīng)式設(shè)計(jì)」 概念包含了兩者，不做明顯區(qū)分，關(guān)于 Adaptive 與 Responsive 設(shè)計(jì)怎么界定以及具體的規(guī)則本篇也不進(jìn)行展開。

移動(dòng)優(yōu)先設(shè)計(jì)策略

提響應(yīng)式設(shè)計(jì)不得不提「移動(dòng)優(yōu)先」設(shè)計(jì)策略，移動(dòng)優(yōu)先的概念最早是 Google 在 2010 年世界移動(dòng)大會(huì)上提出來的一種產(chǎn)品策略，基于 Google 對(duì)未來趨勢(shì)中移動(dòng)設(shè)備將會(huì)逐漸擁有核心地位的判斷。后來「移動(dòng)優(yōu)先」更多被提及是作為一種在響應(yīng)式設(shè)計(jì)中應(yīng)用的設(shè)計(jì)策略，它認(rèn)為在響應(yīng)式設(shè)計(jì)中優(yōu)先為屏幕限制更大的移動(dòng)設(shè)備設(shè)計(jì)，再擴(kuò)展到大屏幕的 PC 端是一種更有效的設(shè)計(jì)方法。

例如 Alta、Lightning、Fiori 均在設(shè)計(jì)體系中明確采用「移動(dòng)優(yōu)先」的設(shè)計(jì)方法，F(xiàn)iori 尤其指出「移動(dòng)優(yōu)先」專注核心功能，專注增強(qiáng)而非降級(jí)，提前考慮移動(dòng)端更多的獨(dú)特特性以及異常情況，能提供更好的體驗(yàn)。Material Design 可能算是移動(dòng)優(yōu)先的最佳實(shí)踐，它本身就誕生于 Android 平臺(tái)，而后再通過大量響應(yīng)式規(guī)則擴(kuò)展到桌面及 Web 端，使得 Material 在多端都擁有一致貫穿的良好體驗(yàn)。

「移動(dòng)優(yōu)先」本質(zhì)上是基于一種「增強(qiáng)」的設(shè)計(jì)思想，一個(gè)產(chǎn)品如果要同時(shí)適應(yīng)于不同的設(shè)備，一直以來有兩種策略：優(yōu)雅降級(jí) vs. 漸進(jìn)增強(qiáng)，后者認(rèn)為先從最小和最受限制的低級(jí)設(shè)備（移動(dòng)設(shè)備）入手，再為更高級(jí)的設(shè)備（桌面設(shè)備）增強(qiáng)信息和交互，這意味著在更多限制下，迫使設(shè)計(jì)考慮如何減少、匯總，分組信息，有利于聚焦核心信息以及為更多限制考慮。

然而移動(dòng)設(shè)備已不再是「低級(jí)設(shè)備」，F(xiàn)iori 盡管強(qiáng)調(diào)「專注增強(qiáng)而非降級(jí)」，但它同時(shí)提出的「提前考慮移動(dòng)端更多的獨(dú)特特性」卻與漸進(jìn)增強(qiáng)的設(shè)計(jì)思想相悖，讓「移動(dòng)優(yōu)先」淪為了某種形式化的概念而難以執(zhí)行。

例如下面這個(gè)報(bào)告界面的場(chǎng)景里，移動(dòng)端僅展示匯總的報(bào)告圖表信息，但匯總圖表并沒有「擴(kuò)展」到 Tablet 里而是用明細(xì)數(shù)據(jù)替換圖表，而在桌面端同時(shí)包含了明細(xì)數(shù)據(jù)與圖表兩部分信息，這看上去并不像是一個(gè)「增強(qiáng)」的設(shè)計(jì)思路，更像是在全量需求下基于設(shè)備限制所采用的「降級(jí)」策略。

因此「移動(dòng)優(yōu)先」并不一定是形式上優(yōu)先設(shè)計(jì)移動(dòng)端，它被廣泛接受和應(yīng)用的是背后的漸進(jìn)增強(qiáng)的核心思想。我認(rèn)為在移動(dòng)設(shè)備高度發(fā)展的當(dāng)下，「移動(dòng)優(yōu)先」不再適合作為單獨(dú)概念提出來，而漸進(jìn)增強(qiáng)的設(shè)計(jì)思想應(yīng)該體現(xiàn)在更細(xì)分的場(chǎng)景中，例如在布局、信息排版以及交互反饋中，我們應(yīng)該優(yōu)先考慮限制更大的移動(dòng)端；在一些交互方式上，優(yōu)先考慮限制更大的鼠標(biāo)操作。甚至在復(fù)雜業(yè)務(wù)場(chǎng)景里，優(yōu)先滿足核心業(yè)務(wù)流程順暢也屬于漸進(jìn)增強(qiáng)的策略范疇。

設(shè)計(jì)模式

這里講的設(shè)計(jì)模式是指設(shè)計(jì)師在具體業(yè)務(wù)中針對(duì)不同的情況可以采用的通用性設(shè)計(jì)方案，這些設(shè)計(jì)模式除了單獨(dú)應(yīng)用外，有時(shí)候也可以多種模式結(jié)合應(yīng)用。Fluent 歸納了 6 種對(duì)應(yīng)不同情況的響應(yīng)式設(shè)計(jì)模式，非常全面地涵蓋了其它設(shè)計(jì)體系中的絕大部分方案，分別是：調(diào)整大小、重新定位、重新排列、顯示/隱藏、替換、重新構(gòu)建。

Resize – 調(diào)整大小

調(diào)整大小是最基礎(chǔ)的設(shè)計(jì)模式，是一個(gè)容器默認(rèn)的響應(yīng)式模式，通常有等比縮放、固定高度、或是在不同尺寸下按不同比例規(guī)格縮放三種形式，即便在無響應(yīng)式設(shè)計(jì)的體系里，容器跟隨屏幕尺寸而變化也是一個(gè)常見的應(yīng)用方式。

Reposition – 重新定位

改變 UI 元素的相對(duì)位置，以充分利用不同尺寸的空間。重新定位在響應(yīng)式應(yīng)用里多見在框架上，或是在組件里對(duì)一些特定元素的處理，例如 Material 的全局浮動(dòng)按鈕與浮動(dòng)的下拉菜單以 Reposition 的形式分別在桌面端與移動(dòng)端處于不同的位置。

Reflow – 重新排列

改變 UI 元素的排列方式，這在內(nèi)容彈性布局里較常見，通常是基于某種排列規(guī)則自動(dòng)向下折行，并結(jié)合調(diào)整大小與柵格系統(tǒng)應(yīng)用在響應(yīng)式布局方面，例如 Carbon 的 Fluid Grid。

（Reflow）

Show / Hide – 顯示 / 隱藏

基于屏幕空間、設(shè)備不同特性、特定情況等顯示或隱藏 UI 元素，例如大多數(shù)設(shè)計(jì)體系的框架設(shè)計(jì)應(yīng)用在小屏幕上會(huì)隱藏側(cè)邊菜單。Material 在組件響應(yīng)式行為里提到的 Expand 也屬于 Show / Hide 的延伸。

（Show / Hide）

Replace – 替換

針對(duì)不同尺寸的屏幕采用不同形態(tài)的組件，通常應(yīng)用在對(duì)具體的組件做針對(duì)性響應(yīng)式設(shè)計(jì)中，但需要注意用戶面對(duì)變化時(shí)的認(rèn)知成本。

（Replace）

Re-architect – 重新構(gòu)建

折疊或拆分信息架構(gòu)，這種模式在 Web 端較難實(shí)現(xiàn)，通常出現(xiàn)在一些 Native App 的場(chǎng)景。

（Re-architect）

Density – 內(nèi)容密度

除了上述 6 種模式以外，我把內(nèi)容密度也歸納為一種設(shè)計(jì)模式，F(xiàn)iori、Material Design、 以及 Atlassian 都提出了內(nèi)容密度的概念。Fiori 基于移動(dòng)優(yōu)先在移動(dòng)端采用默認(rèn)密度，而針對(duì)大屏幕的 Web 端則提供緊湊密度的方案，他們認(rèn)為移動(dòng)端手指交互所需的空間要求更高；Material 則是針對(duì)很多組件都定制了 Default、Comfortable、Compact 三種密度的視覺表現(xiàn)。通過被動(dòng)響應(yīng)式或主動(dòng)控制內(nèi)容密度很好的解決了不同尺寸屏幕的信息獲取效率問題。

（Material Design 的內(nèi)容密度示例）

值得一提的是 Atlassian 通過柵格系統(tǒng)的間距來控制密度而非對(duì)內(nèi)容密度本身進(jìn)行設(shè)計(jì)，越緊湊的布局柵格間距越小，這看上去很合理，卻很容易造成內(nèi)容密度增加的同時(shí)整體信息獲取效率反而降低的問題。Material 也有關(guān)于柵格空間的定義，但在內(nèi)容密度的處理上和 Atlassian 恰恰相反，它認(rèn)為高密度內(nèi)容適用更寬松的柵格空間，相對(duì)是一個(gè)更合理的設(shè)計(jì)。在信息密度的問題上，我們的核心目的其實(shí)是提升信息效率而非單純提高視覺密度，因此解法上需要更完善的考慮。

實(shí)施模式

實(shí)施模式是指設(shè)計(jì)體系為實(shí)現(xiàn)具體設(shè)計(jì)方案而定義的一系列基礎(chǔ)規(guī)則、解決方案或技術(shù)手段，經(jīng)過整理總結(jié)為相對(duì)尺寸單位、屏幕斷點(diǎn)、彈性布局、柵格系統(tǒng) 4 個(gè)方面。

Rem – 相對(duì)尺寸單位

幾乎所有應(yīng)用于 Web 的設(shè)計(jì)體系的技術(shù)方案中都采用 rem 相對(duì)單位，Material、Fiori、Carbon 和 Lightning 均沿用了瀏覽器默認(rèn)的 root 尺寸，即 1rem = 16px，Alta 默認(rèn)采用是 14px 的規(guī)格，并允許基于不同應(yīng)用選擇 12px 或 16px 的規(guī)格，默認(rèn)情況 Alta 采用更小規(guī)格的單位會(huì)在小屏幕電腦上有更好的表現(xiàn)，這也許和他們的產(chǎn)品特性相關(guān)。

相對(duì)尺寸單位是非常具有實(shí)施價(jià)值的，它使產(chǎn)品能在保持信息節(jié)奏的情況下根據(jù)不同的情況等比例縮放內(nèi)容，這使得設(shè)計(jì)能更方便地調(diào)整內(nèi)容密度，或許還可以配合 Media Queries 解決部分跨端的尺寸適配問題，且?guī)缀鯖]有前端成本。

國內(nèi)的前端業(yè)界包括我們自己的前端同學(xué)更多將 Rem 運(yùn)用在移動(dòng)端，主要為了兩個(gè)目的：方便計(jì)算尺寸、在不同寬度的設(shè)備上等比縮放內(nèi)容，這樣的用法是出于前端工程師解決屏幕兼容性的一種技術(shù)手段，在使用上本身也存在一定爭(zhēng)議，而在響應(yīng)式設(shè)計(jì)領(lǐng)域我們還沒有發(fā)揮出 Rem 應(yīng)該發(fā)揮的作用，甚至很多設(shè)計(jì)師還并不了解相對(duì)尺寸單位的使用方法，廣泛應(yīng)用 Rem 能為我們帶來哪些實(shí)際價(jià)值是接下來需要繼續(xù)研究的。

Breakpoints – 屏幕斷點(diǎn)

屏幕斷點(diǎn)是響應(yīng)式設(shè)計(jì)的基礎(chǔ)依據(jù)，它決定了我們要適配到什么樣的設(shè)備或屏幕規(guī)格，并通過 Media Queries 這樣的技術(shù)實(shí)現(xiàn)不同 Breakpoint 條件下的不同 UI 表現(xiàn)。一般情況 Breakpoints 都是基于 Phone、Tablet、Desktop 的維度來設(shè)計(jì)的，包括考慮了移動(dòng)設(shè)備的橫評(píng)豎屏情況，關(guān)于詳細(xì)的規(guī)格設(shè)置其實(shí)并沒有太大參考價(jià)值，設(shè)計(jì)體系都是根據(jù)自身定位以及設(shè)備覆蓋的情況來制訂的，例如 Material 的斷點(diǎn)在低分辨率范圍分得非常細(xì)，是因?yàn)?Material 主要服務(wù)的 Android 平臺(tái)有著數(shù)量繁多的設(shè)備分辨率。在滿足自己需求的前提下，屏幕端點(diǎn)不需要太多，無論怎樣基于數(shù)據(jù)驅(qū)動(dòng)的屏幕斷點(diǎn)設(shè)置將會(huì)是一個(gè)更科學(xué)的方法。

（屏幕斷點(diǎn)分布） 

Fiori 的斷點(diǎn)設(shè)計(jì)比較有意思，在設(shè)計(jì)文檔中僅有基本的布局規(guī)則，沒有明確的 Breakpoints 規(guī)則，F(xiàn)iori 對(duì)于不同的組件會(huì)設(shè)計(jì)不同的 Breakpoints，例如在 Table 這個(gè)組件中定義了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的規(guī)格，而在 Form 的組件中，Breakpoints 變成了 0 < 600 < 1024 < 1440 < ∞，從這點(diǎn)上看出 Fiori 認(rèn)為不同的組件有不同的表達(dá)模式，因此應(yīng)該針對(duì)性對(duì)組件進(jìn)行優(yōu)化。

（Fiori 的 Table 組件適配情況）

Flex Layout – 彈性布局

Flex 布局是 CSS3 提供的強(qiáng)大布局能力，從更自然更具語義化的角度實(shí)現(xiàn)界面元素的自適應(yīng)。應(yīng)用于 Web 的設(shè)計(jì)體系基本上都在組件代碼里廣泛采用了 Flex 布局，Lightning 還將柵格與 Flex 布局結(jié)合定義了自己更完善的布局方法。在響應(yīng)式設(shè)計(jì)中，F(xiàn)lex 布局通常結(jié)合 Breakpoints 使用，在兩個(gè) Breakpoints 之間讓界面做更平滑的過度。除此之外其它平臺(tái)也都有類似的彈性布局能力，例如 Fluent 在 windows 采用 XAML 構(gòu)建布局系統(tǒng)。

無論是 Flex 還是最近興起的 Grid 布局都是 CSS3 的基本布局能力，響應(yīng)式設(shè)計(jì)要解決布局的問題將會(huì)深度依賴這些基礎(chǔ)技術(shù)手段，本篇不進(jìn)一步展開。

Grid System – 柵格系統(tǒng)

柵格系統(tǒng)是所有設(shè)計(jì)體系必備的，我們通常將頁面橫向分為 N 列，定義每一列的尺寸與間距，這為界面布局提供了一致性和成本便利。傳統(tǒng)的柵格系統(tǒng)在響應(yīng)式方面的應(yīng)用主要是結(jié)合 Breakpoints 與一些 Responsive Token 來實(shí)現(xiàn)的，通過給 UI 元素指定不同的柵格數(shù)來決定他們分別在不同屏幕下占多少列，同時(shí)一些設(shè)計(jì)體系還提供了可見性相關(guān)的 token，來控制界面元素在不同屏幕的顯示與隱藏。

Fluent、Fiori、Lightning、Material 以及大多數(shù)設(shè)計(jì)體系都采用了 12 柵格系統(tǒng)，因?yàn)?12 的因數(shù)夠多，能滿足足夠多的布局細(xì)分同時(shí)又不至于太復(fù)雜，Carbon 的做法更加 geek 一些，他們的「2x grid」采用了 16 柵格系統(tǒng)，布局粒度更細(xì)但放棄了 3，6 這樣的因數(shù)。 Ant Design 為了滿足復(fù)雜的業(yè)務(wù)情況，采用了 24 柵格系統(tǒng)，24 柵格提供了更高的靈活性的同時(shí)，也大大增加了復(fù)雜度，面臨柵格系統(tǒng)的響應(yīng)式設(shè)計(jì) 24 柵格是否適用還有待商榷。

另外 Material、Carbon 還明確提出了「Fluid Grid – 流體柵格」的概念，核心思想是在較小的屏幕上降低柵格數(shù)量，將多余的柵格自動(dòng)折行彈性布局。

（Carbon 的柵格定義） 

在屏幕尺寸變化時(shí)，柵格主要有兩種響應(yīng)模式：Fluid、Fixed

（Fluid）

這種將柵格系統(tǒng)與彈性布局相結(jié)合的方式基于一些簡(jiǎn)單的規(guī)則設(shè)置，在不需要特定響應(yīng)式的場(chǎng)景中不再需要指定繁瑣的 token，且能滿足大部分高頻且通用的情況，在一定程度上降低了成本。

組件應(yīng)用

除了通用的響應(yīng)式規(guī)則以外，設(shè)計(jì)體系在具體組件中的響應(yīng)式方案還有許多值得挖掘，能為我們的組件設(shè)計(jì)提供參考價(jià)值，本篇不再一一展開，僅提兩個(gè)典型的應(yīng)用情況：

框架

框架算是一個(gè)特殊的組件，在不同的設(shè)備中界面框架的適用有非常大的差異，幾乎提到響應(yīng)式的所有設(shè)計(jì)體系都給出了框架響應(yīng)式方案，例如 Alta 將界面框架分為四塊，以 Off-Canvas 和 Reposition 兩種方式在不同尺寸的屏幕中顯示或隱藏以及通過特定的方式展開或呼出。

通常情況下設(shè)計(jì)體系的框架組成按形式可以分為：

• Header – 通常情況下常駐

• Sidenav – 分為左側(cè)右側(cè)兩種情況，一般用于放置導(dǎo)航，在不同設(shè)備會(huì)有展開，收縮，隱藏三種狀態(tài)

• Content – 內(nèi)容區(qū)，通常由 Grid 控制布局

• Footer – 如有，固定在頁面底部

• Float – 浮動(dòng)框架，用于臨時(shí)狀態(tài)，通知或彈窗等

設(shè)計(jì)體系通過對(duì)框架的定義，以及控制不同部分基于什么樣的模式響應(yīng)屏幕尺寸來實(shí)施對(duì)框架的響應(yīng)式設(shè)計(jì)。

組件

Fluent 或 Material 在設(shè)計(jì)文檔中更多基于基礎(chǔ)的網(wǎng)格，布局，設(shè)計(jì)模式來闡述通用性的響應(yīng)式規(guī)則，因此他們的響應(yīng)式設(shè)計(jì)有非常好的延續(xù)性，組件的響應(yīng)式方案基本上都遵循這些規(guī)則。

而 Fiori 以及 Lightning 在通用性響應(yīng)式設(shè)計(jì)模式上的定義上沒有那么全面，他們側(cè)重于在組件層面對(duì)所有組件都考慮了針對(duì)性的 Responsive 或 Adaptive 的方案。例如 Fiori 在響應(yīng)式表格的組件里，在桌面端與移動(dòng)端分別是 table 和 list 的模式，這個(gè)方案并不是通過全局抽象規(guī)則得出來的，而是基于對(duì)組件的針對(duì)性設(shè)計(jì)，正如他們?yōu)椴煌慕M件設(shè)計(jì)了不同的 Breakpoints，這種針對(duì)性也適用于特定的 UI 解決方案。

（Fiori 針對(duì) Table 的響應(yīng)式設(shè)計(jì)） 

在一定程度上抽象規(guī)則的同時(shí)，如果我們能夠?yàn)槊恳粋€(gè)組件都考慮到不同場(chǎng)景的響應(yīng)式，當(dāng)然就會(huì)提供更精細(xì)化的體驗(yàn)。在一個(gè)完備的設(shè)計(jì)體系里，在設(shè)計(jì)每一個(gè)組件資產(chǎn)時(shí)都以漸進(jìn)增強(qiáng)的設(shè)計(jì)策略，考慮到不同的設(shè)備及屏幕適配是非常有必要的。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

本文實(shí)例講述了JS實(shí)現(xiàn)數(shù)組去重,顯示重復(fù)元素及個(gè)數(shù)的方法。分享給大家供大家參考，具體如下：

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

雙層for循環(huán)遍歷

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

轉(zhuǎn)自：站長之家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

最做了郵箱簽名的需求，想著之前做過兩次簽名也不是很難   于是開始了本次outlook簽名的超長途旅行





本次總結(jié)不到位的或者不正確的地方 還請(qǐng)大神指正





首先手?jǐn)]一個(gè)table出來 寫內(nèi)容

    1.郵件使用table+css布局



    2.郵件主要部分在body內(nèi)部，所以樣式一定要寫成內(nèi)嵌的，不能在head標(biāo)簽中寫style，也不能外聯(lián)。



    如：




    


        


            


                


                    


                        


                            

                                1
                            

                            

                                2
                            

                            

                                3
                            

                            

                                4
                            

                            

                                5
                            

                            

                                6
                            

                            

                                7
                            

                            

                                8
                            

                            

                                9
                            

                            

                                10
                            

                            

                                11
                            

                            

                                12
                            

                            

                                13
                            

                            

                                14
                            

                            

                                15
                            

                            

                                16
                            

                            

                                17
                            

                            

                                18
                            

                            

                                19
                            

                        

                        


                            


                                

                                    <table border="0" cellspacing="0" cellpadding="0" style="font-family:'微軟雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
                                

                                

                                         <tbody>
                                

                                

                                                    <tr>
                                

                                

                                                        <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
                                

                                

                                                        <table width="100%" border="0" cellpadding="5" cellspacing="0" >
                                

                                

                                                                <tbody>
                                

                                

                                                                    <tr>
                                

                                

                                                                        <td>
                                

                                

                                                                            <p style="margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br>　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的開發(fā)者：<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                

                                

                                                                            <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;"><br>　　　　　　　　　　　　　　　　　　　　　　　　　“xxx”在此次的‘網(wǎng)絡(luò)友好度測(cè)試’評(píng)級(jí)：<span style="color:#F44336;">4顆星</span>（最高5顆星）。<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                

                                

                                                                        </td>
                                

                                

                                                                    </tr>
                                

                                

                                                                </tbody>
                                

                                

                                                        </table>                                                          
                                

                                

                                                       </td>
                                

                                

                                                  </tr>
                                

                                

                                                    
                                

                                

                                       </tbody>
                                

                                

                                    </table>           
                                

                            

                        

                    

                

            

        

    




    3.不能用浮動(dòng)的方式定位。position：absolute;float:left;等都不行，float在qq郵箱客戶端中可以識(shí)別，但是在outlook中無法識(shí)別。



    4.表格的border，使用table上的border屬性，可以在qq瀏覽器中兼容，但是在outlook中打開是沒有邊框的，這種情況，我么只能給每一個(gè)td加一個(gè)border，在table中使用border-collapse:collapse;來合并重復(fù)的邊框。



    如：




    


        


            


                


                    


                        


                            

                                1
                            

                        

                        


                            


                                

                                    <table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
                                

                            

                        

                    

                

            

        

    




    這樣設(shè)置border會(huì)在outlook中顯示不出border；



    5.為了保證兼容性，需要把郵件的寬度設(shè)置為600px，最大600px；



    6.少用img，因?yàn)楹芏噜]箱客戶端默認(rèn)不顯示圖片，所以，如果需要圖片的話，一定要寫好alt和title；



    7.背景圖片，盡量用background-color使用純色背景，如果一定要用背景圖片，使用background屬性，




    


        


            


                


                    


                        


                            

                                1
                            

                        

                        


                            


                                

                                    <div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>
                                

                            

                        

                    

                

            

        

    




    8.郵件不支持javascript，flash以及一些特殊的標(biāo)簽。

因?yàn)椴荒芨?dòng) 定位 等  一些設(shè)計(jì)筆記復(fù)雜的內(nèi)容 需要橫向排列的  只能多擼幾個(gè)table了 暫時(shí)我是這樣解決的 比較麻煩



在outlook簽名中最難處理的行高，line-height屬性，outlook的這個(gè)屬性只能支持在塊上設(shè)置，比如可以給td標(biāo)簽設(shè)置line-height，但是不能給span設(shè)置line-height，否則行高設(shè)置是不起作用的。

     具體內(nèi)容可以根據(jù)實(shí)際情況改寫。修改簽名文件后，最好關(guān)閉outlook重新打開一下，要不然outlook里面會(huì)有緩存，造成顯示錯(cuò)誤。


緊接著 在圖片引用上遇到了問題
https的圖片調(diào)用 outlook竟然給屏蔽了， 需要用戶開啟權(quán)限才能顯示 非常影響用戶體驗(yàn)，

于是我就把圖片換成base64格式引用， 同樣遇到了問題， base64格式下 outlook無法使用style操控圖片尺寸，這就使圖片的寬高變成非常小，同樣清晰度也大大降低， 
而且outlook在引用base64格式圖片情況下  如果圖片過小 還會(huì)出現(xiàn)部分黑邊 十分的麻煩
目前暫時(shí)沒找他其他的方案處理，有大神幫忙指點(diǎn)下


最總邊學(xué)邊做的情況下完成了這個(gè)簽名， 雖然一路坎坷 還算比較滿意的完成了這次簽名
記錄一下 繼續(xù)學(xué)習(xí)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)