趕在春節(jié)前給2020一個(gè)交代
轉(zhuǎn)自：站酷
作者：小太陽AZ
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
題圖來自Saurageresearch
企業(yè)對(duì)客戶旅程總體的認(rèn)知與應(yīng)用比例為25%，屬于初期水平。2C類企業(yè)、大型企業(yè)、金融行業(yè)對(duì)客戶旅程的認(rèn)知和應(yīng)用水平明顯高于其他類型的企業(yè)。大多數(shù)企業(yè)在最近兩年才開始嘗試客戶旅程方法，主要由研究、設(shè)計(jì)、客服部門在主導(dǎo)客戶旅程的應(yīng)用，客戶旅程地圖的繪制頻率大部分是每年或半年繪制一次。
企業(yè)目前主要將客戶旅程應(yīng)用于客戶需求分析、產(chǎn)品和服務(wù)的設(shè)計(jì)、以及客戶旅程測(cè)量與分析等領(lǐng)域，并在提升客戶滿意度、促進(jìn)以客戶為中的企業(yè)文化，以及提升營銷和運(yùn)營的轉(zhuǎn)化率方面效果最明顯。大部分企業(yè)對(duì)認(rèn)為客戶旅程有積極的效果，極少給出負(fù)面評(píng)價(jià)?？蛻袈贸谭椒?/span>使用時(shí)間越長(zhǎng)，客戶旅程地圖繪制頻次越高的企業(yè)獲得效果越明顯，并且2B企業(yè)比2C企業(yè)獲得效果更明顯。
雖然目前由市場(chǎng)部門（包括營銷、銷售和品牌部門）主導(dǎo)的比例較少，但由市場(chǎng)部門主導(dǎo)客戶旅程應(yīng)用獲得效果明顯好于其他部門主導(dǎo)的情況，由客服部門主導(dǎo)的效果低于其他部門。這與MyCustomer在2018年在歐美的研究結(jié)論相反，這可能說明市場(chǎng)部門在客戶體驗(yàn)領(lǐng)域的主導(dǎo)權(quán)在逐步上升。
對(duì)于未來一年的使用客戶旅程的意愿，雖然各類企業(yè)對(duì)客戶旅程方法的效果表示肯定，并且明確表示不會(huì)使用的比例很少，但相當(dāng)比例的企業(yè)存在較大不確定性。存在的主要困難和挑戰(zhàn)包括專業(yè)知識(shí)、方法和技能的欠缺，以及專業(yè)工具和平臺(tái)的不足。未來客戶旅程方法要在整體應(yīng)用水平上取得突破，這些方面是需要重點(diǎn)聚焦的領(lǐng)域。
02：
不同類型的企業(yè)，在客戶旅程的認(rèn)知和應(yīng)用程度上也表現(xiàn)出較大差異：2C企業(yè)的應(yīng)用程度明顯高于2B類型的企業(yè)，總體認(rèn)知和應(yīng)用比例分別為30%和20%。大型企業(yè)也明顯高出中小型企業(yè)，分別為29%、22%和19%?？蛻袈贸淌且粋€(gè)相對(duì)比較復(fù)雜的系統(tǒng)性方法，真正的應(yīng)用需要人員、資金等各項(xiàng)資源的投入，大型企業(yè)更具備優(yōu)勢(shì)。相比而言，小型企業(yè)的在。分行業(yè)來看，認(rèn)知和應(yīng)用程度最高是銀行/金融/保險(xiǎn)行業(yè)（30%），一方面是由于這個(gè)行業(yè)的本身的客戶決策流程長(zhǎng)、金額大、風(fēng)險(xiǎn)大，另外一方面也是由于這個(gè)行業(yè)的利潤(rùn)較高，企業(yè)有相對(duì)較為充足的資源進(jìn)行投入。
由客戶研究部門和團(tuán)隊(duì)主導(dǎo)客戶旅程的繪制時(shí)目前的最常見的模式，其次是設(shè)計(jì)部門，以及客服、品質(zhì)部門主導(dǎo)。但產(chǎn)品、戰(zhàn)略、營銷、銷售部門主導(dǎo)的情況也一定的比例，這也說明目前開展客戶旅程應(yīng)用的企業(yè)，其目的存在多樣性。不同部門來主導(dǎo)，其方法和應(yīng)用上也會(huì)存在差異。
在繪制客戶旅程的過程中，目前主要用的是客戶調(diào)查數(shù)據(jù)和客戶訪談數(shù)據(jù)，這也是客戶研究團(tuán)隊(duì)最擅長(zhǎng)和最容易采集的數(shù)據(jù)。其次最常用的數(shù)據(jù)來源是客戶行為和客戶反饋/投訴數(shù)據(jù)，總體上對(duì)外部數(shù)據(jù)應(yīng)用多于內(nèi)部數(shù)據(jù)，對(duì)小數(shù)據(jù)多于大數(shù)據(jù)。
在客戶旅程地圖繪制工具方面，使用最多的是PowerPoint，處于絕對(duì)領(lǐng)先的地位；其次是常用的繪圖和設(shè)計(jì)工具，例如Visio、Photoshop、Adobe Illustrator等；專用的客戶旅程地圖繪制工作使用比例非常低，最主要的客戶旅程地圖專用繪制工具UXpressia的使用比例也只有10%，其他的則更低，使用比例只有2%-4%。主要是目前客戶旅程地圖繪制并不是一項(xiàng)常見工作，所以通用型的文編編輯和繪圖工具會(huì)是常用選擇，而目前的客戶旅程地圖繪制工具多為英文版本，國內(nèi)還沒有出現(xiàn)較好的客戶旅程地圖繪制工具，這也是客戶旅程地圖專用工具使用比例較低的重要原因。
不同情況下，客戶旅程的應(yīng)用效果也不盡相同。調(diào)查數(shù)據(jù)顯示，使用客戶旅程方法時(shí)間越長(zhǎng)，繪制客戶旅程地圖頻率越高，客戶旅程方法取得的效果越好。使用2年以上的企業(yè)和2年以下的企業(yè)表示有效的比例（包括“比較有效”和“非常有效”，下同）分別為83%和69%；每年繪制多次客戶旅程地圖的企業(yè)和多年繪制一次地圖的企業(yè)的表示有效的比例分別為81%和62%。
在將客戶旅程方法進(jìn)行具體應(yīng)用時(shí)，最常見是用于客戶需求分析、產(chǎn)品和服務(wù)設(shè)計(jì)、客戶旅程分析和測(cè)量。其次是在企業(yè)文化建設(shè)、工作管理和溝通方面的應(yīng)用。在具體操作層面，例如客戶旅程編排、營銷和互動(dòng)，目前也有一定比例的具體應(yīng)用。隨著客戶旅程方法應(yīng)用的進(jìn)一步深入，直接到操作層面的應(yīng)用將逐步提升。
客戶旅程在不同領(lǐng)域的應(yīng)用對(duì)最終的效果有明顯的影響：表示客戶旅程應(yīng)用效果一般的企業(yè)在各個(gè)具體應(yīng)用領(lǐng)域的應(yīng)用比例均低于獲得明顯效果的企業(yè)。效果一般的企業(yè)在客戶需求研究和分析、客戶旅程編排、市場(chǎng)營銷和推廣，以及品牌傳播與互動(dòng)方面的應(yīng)用差距最大（落后超過10%的比例）。從調(diào)查數(shù)據(jù)來看，雖然用于編排、營銷和品牌的總體比例不高，但確實(shí)影響最終應(yīng)用效果的顯著因素。
通過以上在不同領(lǐng)域的應(yīng)用，客戶旅程方法在各個(gè)方面的效果都有所體現(xiàn)，尤其是在提升客戶滿意度、強(qiáng)化以客戶為中心的企業(yè)文化、提升營銷和運(yùn)營的轉(zhuǎn)化率方面最為明顯，分別由59%、54%和37%的企業(yè)表示在這三個(gè)方面得到了提升。
不同類型的企業(yè)未來使用客戶旅程方法的可能性也存在明顯差異。使用客戶旅程越久、使用頻率越高，獲得的效果越好的企業(yè)，繼續(xù)使用客戶旅程方法的傾向越高。2C企業(yè)比2B企業(yè)未來更愿意使用客戶旅程，雖然2B企業(yè)獲得效果更明顯，但2B企業(yè)使用客戶旅程的難度和成本更多到，導(dǎo)致2B企業(yè)的使用意愿要明顯低于2C企業(yè)。另外，相對(duì)于中型和小型企業(yè)，大型企業(yè)的使用意愿明顯更高，表示可能會(huì)使用的比例達(dá)到了61%，明顯高出中小型企業(yè)。
對(duì)于在客戶旅程應(yīng)用過程中的挑戰(zhàn)，最大的困難不是預(yù)算不足，而是知識(shí)、方法、技能、工具和人員的欠缺和不足，尤其是專業(yè)知識(shí)和方法的掌握不夠，是最大的兩項(xiàng)困難。其次碰到的問題是企業(yè)高層，以及其他部門的支持不夠。
文章來源：UXOOLS
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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è)計(jì)師 Taras Bakusevych ，他對(duì)于產(chǎn)品和體驗(yàn)有著非常深入的理解，這篇文章深入梳理了如何制作用戶歷程圖才是合理和便捷的，是一篇相當(dāng)給力的用戶歷程圖終極設(shè)計(jì)指南：
用戶歷程圖（Journey Mapping）可能看起來是一個(gè)復(fù)雜的東西，尤其是當(dāng)你嘗試在小組討論的時(shí)候把這個(gè)東西說清楚，會(huì)發(fā)現(xiàn)相當(dāng)不容易。這篇文章將會(huì)為你闡明這一強(qiáng)大工具的使用方法，并且提供一個(gè)簡(jiǎn)單的模板，并且?guī)湍銊?chuàng)建擁有足夠洞察力的用戶歷程圖，讓你像真正專業(yè)的 UX 設(shè)計(jì)師一樣，創(chuàng)建便利、深入、有效的用戶歷程圖。
在數(shù)字產(chǎn)品當(dāng)中，用戶歷程圖可能是用來呈現(xiàn)用戶如何達(dá)成目標(biāo)的最佳、最常用的工具了。當(dāng)我們故事以可視化的方式呈現(xiàn)出來，就可以沉浸在用戶的體驗(yàn)當(dāng)中。這也是為什么說用戶歷程的價(jià)值是巨大的。
理解用戶歷程圖，會(huì)迫使我們以更加結(jié)構(gòu)化的方式來思考整個(gè)用戶體驗(yàn)，去梳理和定義事件的順序、關(guān)鍵階段以及事件之間的過渡。
同時(shí)，用戶歷程圖還能建立起用戶和設(shè)計(jì)師之間的同理心，當(dāng)你隨著用戶歷程圖推進(jìn)的時(shí)候，能夠更加深入理解用戶的痛苦和無奈，從而幫設(shè)計(jì)師理解用戶的動(dòng)機(jī)。
用戶歷程圖還能幫你真正定義痛點(diǎn)，這是至關(guān)重要的。每種產(chǎn)品都應(yīng)該在某種程度上幫助用戶，讓用戶生活更加輕松，如果你對(duì)痛點(diǎn)有所了解，自然就可以改善體驗(yàn)。
根據(jù)實(shí)際的使用場(chǎng)景，用戶歷程圖會(huì)有很多不同的呈現(xiàn)形式，里面通常會(huì)包括一些圖形化的元素將整個(gè)歷程或者流程呈現(xiàn)出來，而余下的元素則采用解釋性的文本來作為支撐。
絕大多數(shù)的模板會(huì)顯得過度裝飾，且過于復(fù)雜，在很多時(shí)候，它們會(huì)作為項(xiàng)目中的展示性成果展現(xiàn)在PPT當(dāng)中，而不是作為一種有效的工具，來幫助團(tuán)隊(duì)來洞察需求。
如果你上網(wǎng)搜索用戶歷程圖，你會(huì)發(fā)現(xiàn)一大堆各式各樣的圖，這些圖和實(shí)際的理解是脫節(jié)的。
用戶現(xiàn)狀歷程圖反映的是用戶當(dāng)前的狀態(tài)，這反映的是用戶歷程在優(yōu)化之前、當(dāng)下的狀態(tài)。而用戶未來歷程圖則反映的是用戶歷程在優(yōu)化過之后，未來理想的狀態(tài)是什么樣的。
這兩者在結(jié)構(gòu)和目標(biāo)上是不一樣的，主要差別在于用戶角色的定義上。有的時(shí)候，你的用戶確實(shí)是消費(fèi)者，而在很多情況下，用戶又不一定是消費(fèi)者，這就是差別所在。
用戶歷程圖側(cè)重于呈現(xiàn)客戶的前端體驗(yàn)，而服務(wù)藍(lán)圖則重在呈現(xiàn)后端的構(gòu)成，以及交付方式背后的業(yè)務(wù)邏輯以及同產(chǎn)品核心之間的關(guān)系。
你可以在 Megan Erin Miller 和 Erik Flowers 的這篇文章當(dāng)中找到更多的信息。
從來就不存在什么完美的用戶歷程圖，不過你可以基于某個(gè)版本的用戶歷程圖來著手。而這里準(zhǔn)備的這套模板是經(jīng)過長(zhǎng)期測(cè)試和實(shí)驗(yàn)之后總結(jié)出來的一款，它非常容易上手，復(fù)雜度也控制得恰到好處，并且它包含你所關(guān)注的絕大多數(shù)的指標(biāo)，甚至更多。下面，我將教你如何逐步完成這個(gè)用戶歷程圖。
你可以在這里下載 PDF 文檔
在研討會(huì)或者工作坊模式下，開始用戶歷程的研究和搭建，是一個(gè)不錯(cuò)的練習(xí)方式。在這種情況下，即使的團(tuán)隊(duì)有較多的人，也最好按照小組來進(jìn)行（每個(gè)小組3-5人）。根據(jù)用戶歷程的復(fù)雜度和涉及的內(nèi)容的不同，通常你應(yīng)該可以在 1.5 小時(shí)候完成整個(gè)用戶歷程圖的搭建。至于你能用到的文具，僅僅 需要多種不同顏色的便簽紙，筆和紅點(diǎn)貼紙即可。在開始之前，你需要和各個(gè)小組先聲明和解釋整個(gè)過程，并且確保所有人對(duì)于這個(gè)過程的流程、原理和方法的認(rèn)知保持一致。
在這里，我們需要定義地圖的內(nèi)容，用戶的整個(gè)行為歷程，以及他們?cè)噲D要達(dá)成的目標(biāo)，都有哪些。這很關(guān)鍵，不僅要確保所有的參與者都很清楚用戶場(chǎng)景，而且要借此構(gòu)建出對(duì)于后續(xù)設(shè)計(jì)有幫助的內(nèi)容輸出。
演員——這個(gè)歷程與誰有關(guān)？整個(gè)歷程圖應(yīng)該只和一個(gè)角色有關(guān)，也就是要經(jīng)歷整個(gè)歷程的用戶角色。
場(chǎng)景和目標(biāo)——描述參與的用戶的行動(dòng)的情況和狀態(tài)，從而增加上下文環(huán)境的清晰度。描述用戶的目標(biāo)，期望以及動(dòng)機(jī)都有什么。
當(dāng)前/未來狀態(tài)——闡明用戶歷程所在的階段。
Ps：即使此刻你要做的是某個(gè)未來的產(chǎn)品，也最好不要跳過當(dāng)前狀態(tài)，洞察當(dāng)前的用戶和產(chǎn)品狀態(tài)、痛點(diǎn)、習(xí)慣，有助于你去驗(yàn)證想法。
接下來，你需要定義整個(gè)用戶歷程的大的階段。先把各個(gè)階段定義好能夠最大程度節(jié)省你的時(shí)間和精力。最簡(jiǎn)單的方法，是先定義第一個(gè)和最后一個(gè)階段，然后再來填補(bǔ)中間的各個(gè)階段，不要?jiǎng)?chuàng)建太多的階段，而是將整個(gè)用戶歷程切分成為有意義的部分。
按照用戶操作流程，來逐個(gè)執(zhí)行梳理各個(gè)階段用戶的行為、狀態(tài)。千萬不要試圖梳理得過于詳盡和細(xì)致，盡量專注于關(guān)鍵因素，確定用戶需要哪些要素，才能推進(jìn)到下一個(gè)階段。
在這個(gè)階段，要開始描述和用戶執(zhí)行操作緊密關(guān)聯(lián)的的想法，涉及到的問題，還有感受。在很多其他的用戶歷程圖模板當(dāng)中，這個(gè)部分通常是和整個(gè)用戶歷程圖是分開的，但是實(shí)際上，只有合并到一起才是合理的。
在這個(gè)部分，我不建議將時(shí)間花費(fèi)在用戶情感曲線的繪制上，這樣做的實(shí)際目標(biāo)更多是為了更加具有視覺吸引力，并不具備實(shí)際的價(jià)值。
在這個(gè)步驟當(dāng)中，我們會(huì)高亮標(biāo)注出用戶在各個(gè)階段會(huì)接觸到的物理和數(shù)字交互點(diǎn)，以及涉及到的工具、人和服務(wù)。我相信各個(gè)階段所覆蓋的這些觸點(diǎn)，能夠幫助我們更好地梳理和構(gòu)建出整個(gè)心智模型，并且能夠幫助產(chǎn)品和服務(wù)，讓它們能夠更加切合用戶的需求，更好地集成到一起。
如果你已經(jīng)和你的團(tuán)隊(duì)創(chuàng)建了類似移情圖、價(jià)值主張畫布，那么你無需在這個(gè)事情上重新創(chuàng)建相同的內(nèi)容，因?yàn)橛脩魵v程圖和以上內(nèi)容中有大量重復(fù)的部分，你只需要遷移過來即可。隨后，你可以將進(jìn)度合并到當(dāng)前的用戶歷程圖當(dāng)中。
這個(gè)步驟，需要將各個(gè)不同階段的內(nèi)容填寫進(jìn)來。
給每個(gè)參與者一些紅點(diǎn)貼紙，方便他們?cè)谡麄€(gè)用戶歷程圖上，對(duì)他們認(rèn)為是痛點(diǎn)的部分進(jìn)行標(biāo)記并投票。痛點(diǎn)可能和情緒有關(guān)（比如害怕提供個(gè)人詳細(xì)信息），也可能與行為有關(guān)（比如手動(dòng)輸入快遞地址等）。這就是為什么最好不要為痛點(diǎn)創(chuàng)建單獨(dú)的行列，因?yàn)榭赡苌婕暗降狞c(diǎn)非常多也非常分散。如果需要對(duì)痛點(diǎn)進(jìn)行深入的描述，使用紅色便簽紙來進(jìn)行詳細(xì)闡述。
到了最后的階段。在確定痛點(diǎn)之后，我們就可以開始思考如何緩解或者消除痛點(diǎn)。通常，我們需要通過改進(jìn)整體策略，完善功能，集成服務(wù)，來解決痛點(diǎn)，當(dāng)然，更多的時(shí)候，可能還需要我們擁抱一些更加狂放的構(gòu)思，通過創(chuàng)新來搞定痛點(diǎn)。
在小而無關(guān)緊要的細(xì)節(jié)上進(jìn)行爭(zhēng)論，很容易迷失方向。我經(jīng)常會(huì)看到某些小組會(huì)停留在第一階段，陷入爭(zhēng)論，無法推進(jìn)。從來都沒有任何一個(gè)用戶歷程圖是完美的，因?yàn)橛脩艨倳?huì)有不同的習(xí)慣，并且需要產(chǎn)品設(shè)計(jì)師從不同的角度來解決問題。
因此，這需要你和你的團(tuán)隊(duì)專注于 80%最關(guān)鍵的用例，而不是在所有可能的事情上做復(fù)雜的取舍，并且踟躕不前。
文章來源：優(yōu)設(shè) 作者：Taras Bakusevych
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
鳳凰新聞 APP 在 2020 年上半年完成了 Dark Mode 適配，本文主要從規(guī)范、設(shè)計(jì)和實(shí)現(xiàn)的角度對(duì)整個(gè)項(xiàng)目的落地過程進(jìn)行復(fù)盤。
1. 背景色
iOS 平臺(tái)在深色模式下的背景色展示是動(dòng)態(tài)的，分為基礎(chǔ)、升起（例如，彈出框或半浮層）。如下圖中 iOS 系統(tǒng)的兩個(gè)界面，相同樣式的組件在基礎(chǔ)層與升起層顯示的是不同的兩組顏色。
從 iOS14 的色彩規(guī)范中可以發(fā)現(xiàn)隨著界面高度的升起，系統(tǒng)定義的三級(jí)背景色也同步進(jìn)行了一級(jí)上升。
iOS 通過這種背景色統(tǒng)一升級(jí)的處理方式來達(dá)到多任務(wù)窗口疊加的視覺隔離效果，但相對(duì)的開發(fā)成本也較高。
再來看看 Android 平臺(tái)深色模式下不同層級(jí)間背景色的顯示規(guī)律。
Android 把頁面分為從“0dp”到“24dp”的 10 個(gè)不同高度的顯示層級(jí)，通過在同一背景色上疊加不同透明度的白色來區(qū)分顯示層級(jí)。相對(duì)于 iOS 的整體背景色升級(jí)，Android 的背景色分級(jí)邏輯則更加的簡(jiǎn)單易用。
2. 文字色
iOS 的規(guī)范中定義了 4 個(gè)等級(jí)的文字色，一級(jí)文字色為黑白純色，二到四級(jí)文字色為色相偏藍(lán)的半透明色，通過降低同一顏色的不透明度數(shù)值來進(jìn)行分級(jí)。
Android 的文字色分為 3 個(gè)等級(jí)，與 iOS 的共同點(diǎn)是都用了半透明顏色，也都采用了降低不透明度的方式來進(jìn)行分級(jí)。不同點(diǎn)是 Android 文字色使用的黑色與白色，沒有添加色相。
使用帶有透明度的字色能夠避免相同字色與背景色相融的問題。以 Android 為例，三級(jí)文字色與 10 種背景色疊加后都具有較高的識(shí)別度。
iOS 則通過一套半透明字色可以適應(yīng)基礎(chǔ)與升起兩種不同背景色的使用場(chǎng)景。
3. WCAG
iOS 人機(jī)界面準(zhǔn)則和 Material design 在深色模式的建議中，都提到了文字信息需滿足 WCAG 無障礙閱讀的 AA 標(biāo)準(zhǔn)。
WCAG 全稱為 Web 內(nèi)容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性四項(xiàng)原則的相關(guān)建議，這些建議可使網(wǎng)站內(nèi)容更容易訪問。WCAG 從高到低分別是 AAA、AA、A 三個(gè)等級(jí)。其中 AA 要求文字與背景對(duì)比度不小于 4.5:1。
感興趣的朋友可以通過下面鏈接進(jìn)行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通過下面的色彩對(duì)比計(jì)算器進(jìn)行對(duì)比度檢驗(yàn)（下圖為翻譯后展示）https://www.msfw.com/Services/ContrastRatioCalculator
這里我拿 iOS 在深色模式下的主次兩級(jí)字色與基礎(chǔ)、升起背景色做了一下對(duì)比度檢驗(yàn)，得到的結(jié)果均滿足 WCAG 無障礙閱讀的 AA 標(biāo)準(zhǔn)。這里再給大家推薦一個(gè)可以同時(shí)對(duì)多個(gè)顏色進(jìn)行對(duì)比度檢驗(yàn)的網(wǎng)站 https://hexnaw.com
4. 彩色
iOS 人機(jī)界面準(zhǔn)則的彩色方案中給出了 9 種顏色。如下圖所示的深淺配色方案以 RGB 與 HSB 兩種屬性進(jìn)行對(duì)比。
https://baike.baidu.com/item/HSB
圖中左側(cè)以 RGB 屬性展示的各項(xiàng)參數(shù)差值較大，沒有明顯的規(guī)律性；右側(cè)以 HSB 屬性展示的各項(xiàng)參數(shù)差值較小，其中靛青與紫色 HS 數(shù)值相同，僅有 B 的數(shù)值有所差異，但整體來看依然沒有一個(gè)完整的規(guī)律。
相較 iOS 系統(tǒng)彩色方案的單獨(dú)訂制，Android 系統(tǒng)的配色方案則是一整套漸變梯度由“50-900”的色彩庫。
在 Android 的色彩工具中還可以自定義配色方案，在色板中選取一個(gè)主題色，對(duì)應(yīng)梯度值為 500，通過一套算法來自動(dòng)獲取其他梯度的輔助色。
為了在深色主題中提供更大的靈活性和可用性，Android 官方建議在深色主題中使用較淺的色調(diào)（200-50），而不使用默認(rèn)的主題顏色（飽和色調(diào)范圍為 900-500）。
總結(jié)來看兩大平臺(tái)在深色模式的適配上都各有所長(zhǎng)，在整體的視覺體驗(yàn)上 iOS 更加鮮亮突出，Android 則更加柔和舒適。
iOS 更加注重細(xì)節(jié)體驗(yàn)，在整體的色彩規(guī)范中的很多顏色都是單獨(dú)定義的，這也印證了 iOS 13 發(fā)布后蘋果官方向用戶所表達(dá)的“屏幕上的每個(gè)元素都經(jīng)過精心設(shè)計(jì)”這一理念。而 Android 的色彩規(guī)范中無論從背景色、文字色還是彩色都遵循著一個(gè)梯度規(guī)律。
深色模式改版設(shè)計(jì)的前期工作除了調(diào)研兩大平臺(tái)的指導(dǎo)規(guī)范外，我們還對(duì)已上線深色模式的競(jìng)品 app 進(jìn)行了調(diào)研，調(diào)研的主要目標(biāo)是背景色、文字色的色相與亮度展示效果。（以下截圖時(shí)間為 2020 年 2 月份）
騰訊新聞，主背景無色相，次級(jí)背景無色相，一級(jí)文字無色相亮度較高，次級(jí)文字無色相亮度極低。文字與背景對(duì)比度高，主要信息比較突出。
網(wǎng)易新聞，主背景色相偏藍(lán)，次級(jí)背景色相偏藍(lán)，一級(jí)文字無色相亮度較高，次級(jí)文字無色相亮度極低。文字與背景對(duì)比度高，主要信息比較突出。
鳳凰新聞，主背景無色相，次級(jí)背景無色相，一級(jí)文字無色相亮度偏低，次級(jí)文字無色相亮度極低。文字與背景對(duì)比度低，主要信息不夠突出。
以 3 個(gè) APP 首頁來對(duì)比，可以明顯的感覺到鳳凰新聞首頁的信息展示不夠突出，在日間場(chǎng)景下體驗(yàn)極差。
深色模式并不是簡(jiǎn)單的把整個(gè)界面反色了那么簡(jiǎn)單，還是要考慮到所有用戶的需求。鳳凰新聞作為資訊類 app 用戶在夜間使用的場(chǎng)景也有一定的占比。深色模式的改版不僅要在日間滿足使用需求，還要保證夜間的視覺刺激相對(duì)柔和。所以，在設(shè)計(jì)配色方案時(shí)就不能使用對(duì)比度極高的純黑色背景與純白色文字，只能在各種灰色中搭配出最優(yōu)方案。
經(jīng)過多稿背景色與文字色的搭配嘗試后，最終確定了下圖中所框選的配色方案。這個(gè)方案整體背景色與二三四級(jí)文字色在色相上略微偏藍(lán)，相較于無色相背景更具有活力，在視覺體驗(yàn)上信息層級(jí)的區(qū)分也更加明確。
在各種方案嘗試設(shè)計(jì)的過程中對(duì)顏色的色相、飽和度、亮度的選取都是隨機(jī)的，目的是在短時(shí)間內(nèi)進(jìn)行快速試錯(cuò)來確定配色方向。
本次改版的目標(biāo)中還需要重新構(gòu)建色彩規(guī)范，所以還需要對(duì)這稿配色的選用進(jìn)行細(xì)致的打磨，在色彩對(duì)應(yīng)的 HSB 參數(shù)中進(jìn)行細(xì)微的調(diào)整使整套配色方案有律可循。
最終方案在四級(jí)背景的色相與飽和度方面進(jìn)行了統(tǒng)一，對(duì)亮度的遞增梯度統(tǒng)一為 5。對(duì)比初選方案在視覺上變動(dòng)也很微弱，卻使色彩分級(jí)規(guī)律一目了然。那么依照此方式也可以對(duì)文字色與彩色也進(jìn)行了一輪打磨。
對(duì)于文字色在深色模式優(yōu)化調(diào)整的基礎(chǔ)上也對(duì)淺色模式下的文字色進(jìn)行了調(diào)整，使深淺模式下兩套字色更具有規(guī)律性。
在文字色的使用上鳳凰新聞沒有參照兩大平臺(tái)規(guī)則使用帶透明度的顏色，主要原因是從自身實(shí)際出發(fā)，考慮到端內(nèi)的文字色使用場(chǎng)景部分是用于半透明背景色上的，如果文字色與背景色均帶有透明度，疊加后的體驗(yàn)會(huì)很差。
鳳凰新聞的功能圖標(biāo)以線性為主，通常搭配文字一起使用，所以對(duì)圖標(biāo)顏色的定義與文字色是保持一致的。
在彩色的規(guī)范梳理中淺色模式下保持不變，僅對(duì)深色模式下顏色的亮度進(jìn)行了調(diào)整，使深淺色模式下顏色的亮度對(duì)比有了統(tǒng)一的規(guī)則。
當(dāng)然我們還需要對(duì)新的背景色與一二級(jí)文字色進(jìn)行檢驗(yàn)，看看是否滿足 WCAG 無障礙閱讀的 AA 標(biāo)準(zhǔn)，也就是常規(guī)尺寸文本對(duì)比度高于 4.5 : 1。
下圖就是鳳凰新聞客戶端的新版色彩規(guī)范，在規(guī)范中除了上述的主要的通用顏色外也有部分是單獨(dú)定義的顏色，這些顏色多用于獨(dú)立或特定的場(chǎng)景下。
在完成色彩規(guī)范的重構(gòu)后，重新輸出界面樣稿與舊版進(jìn)行對(duì)比。
通過設(shè)計(jì)稿對(duì)比老版夜間模式與新版深色模式，能夠直觀的感受到新版在信息瀏覽上體驗(yàn)更好。
1. 色值替換
在著手進(jìn)行色值替換時(shí)，iOS 開發(fā)小哥反饋給我鳳凰新聞全端跟色值有關(guān)的代碼有 2000+條，如下圖中是日夜間對(duì)應(yīng)的這條代碼樣式。
如此多的色值代碼多數(shù)是相同色值在不同場(chǎng)景中重復(fù)使用，但彼此卻又完全無關(guān)聯(lián)，還有很多是日積月累的舊色值未被刪除。如逐條替換費(fèi)時(shí)費(fèi)力效率極低，后期的維護(hù)也極其麻煩。
為了提高適配效率以及便于后期維護(hù)，使得之后的色值替換可以達(dá)到全局響應(yīng)的目的。由設(shè)計(jì)師與開發(fā)人員共同建立一個(gè)色值對(duì)照表。
此表中設(shè)計(jì)命名主要基于色彩規(guī)范，用于設(shè)計(jì)師團(tuán)隊(duì)間的溝通協(xié)作。工程命名由開發(fā)人員提供，主要用于設(shè)計(jì)師與開發(fā)人員的在設(shè)計(jì)走查中進(jìn)行高效的溝通協(xié)作。
以鳳凰新聞 iOS 端為例，優(yōu)化后的色值代碼庫如下圖，由原來的 2000 多條色值代碼變成了 30 多條色值代碼「宏」。
在 iOS 開發(fā)工具 Xcode 的可視化文件夾中看起來就更加直觀了。
之后的色值使用開發(fā)人員只需要調(diào)用代碼庫中相應(yīng)的「宏」即可，后續(xù)版本迭代中如有對(duì)通用色值的調(diào)整只需修改相應(yīng)的「宏」代碼即可完成全端替換。
以這種方式快速完成首輪色值替換后很多頁面的色值會(huì)出現(xiàn)錯(cuò)誤，需要 UI 設(shè)計(jì)師持續(xù)的進(jìn)行走查反饋，再由開發(fā)人員根據(jù)反饋進(jìn)行修改校正。
以 iOS 端為例在深色模式色值走查過程中設(shè)計(jì)師分批次以 PDF 格式反饋給開發(fā)人員的，開發(fā)人員在修改反饋問題的同時(shí)設(shè)計(jì)師也在進(jìn)行下一批問題的整理，這樣同步進(jìn)行的效率會(huì)更高。
2. 切圖替換
切圖替換場(chǎng)景相對(duì)比較多，同樣延用色值走查的協(xié)作方式，設(shè)計(jì)師分批修改開發(fā)同步進(jìn)行替換。開發(fā)小哥提供切圖的方式就是直接扔過來一個(gè)全端切圖包，需要設(shè)計(jì)師修改切圖顏色后以原命名重新發(fā)回去。當(dāng)打開切圖包后頓感一陣頭大，切圖總數(shù)有近千張之多。
雖然切圖很多但其中有一部分是已經(jīng)無用的老切圖，在替換的過程中也對(duì)端內(nèi)切圖重新進(jìn)行了一輪梳理，刪除了很多無用和重復(fù)的切圖，同時(shí)也對(duì)鳳凰新聞 app 的體積進(jìn)行了瘦身。
在切圖的替換過程中比較費(fèi)時(shí)的是對(duì)同一切圖存在多張的情況進(jìn)行整理，梳理出該切圖的所有使用場(chǎng)景然后反饋給開發(fā)人員進(jìn)行統(tǒng)一調(diào)用，之后如再次修改即可完成全局替換。
除 icon 外還需要對(duì)默認(rèn)圖與缺省圖進(jìn)行替換。
3. 特殊適配
鳳凰新聞客戶端需要進(jìn)行特殊適配的場(chǎng)景主要是圖集與小視頻界面，這兩個(gè)界面僅有一套色值與 icon，界面中的元素需要單獨(dú)處理，在切換深色模式后避免出現(xiàn)錯(cuò)誤。
4. 界面展示
Dark Mode 適配是一項(xiàng)費(fèi)時(shí)費(fèi)力的巨大工程，也是探索和優(yōu)化用戶體驗(yàn)的全新挑戰(zhàn)。本文主要描述了鳳凰新聞 APP 在 Dark Mode 適配中的一整套心路歷程，從規(guī)范、設(shè)計(jì)以及實(shí)現(xiàn)的角度對(duì)整個(gè)項(xiàng)目進(jìn)行復(fù)盤總結(jié)。
文章來源：優(yōu)設(shè) 作者：鳳凰網(wǎng)設(shè)計(jì)中心
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。
按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認(rèn)識(shí)這個(gè)組件，今天我把關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。
一 按鈕的作用
在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時(shí)候該用按鈕。
1）什么是按鈕
按鈕用于觸發(fā)一個(gè)及時(shí)操作。
2）有什么作用
2.1 功能操作
比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當(dāng)弱化，重點(diǎn)強(qiáng)調(diào)功能，突出主體信息。
2.2 指引用戶下一步操作
這個(gè)是最常見的使用場(chǎng)景，每個(gè)可交互頁面上都有這類按鈕的出現(xiàn)，用來指引用戶下一步該怎么做。比如：創(chuàng)建、保存...
2.3 培養(yǎng)用戶習(xí)慣
當(dāng)用戶知悉某個(gè)按鈕能指向某個(gè)操作，或者獲取某類信息后，長(zhǎng)此以往用戶就會(huì)形成使用習(xí)慣。如果某操作能夠?yàn)橛脩舫掷m(xù)帶來價(jià)值，那就可以在按鈕的位置讓它更醒目，持續(xù)培養(yǎng)用戶點(diǎn)擊習(xí)慣。
二 按鈕有哪些類型
· 主按鈕：用于主動(dòng)行動(dòng)點(diǎn)，一個(gè)操作區(qū)域內(nèi)只有且只能有一個(gè)主按鈕；
· 默認(rèn)按鈕：用戶內(nèi)有主次之分的一組行動(dòng)點(diǎn)；
· 虛線按鈕：常用于【添加】操作；
· 文本按鈕：用于次級(jí)的行動(dòng)點(diǎn)；
· 鏈接按鈕：用于作為外鏈的行動(dòng)點(diǎn)。
三 按鈕的狀態(tài)
1）交互狀態(tài)
1.1 Normal 正常狀態(tài)
此狀態(tài)為按鈕的正常顯示狀態(tài)，就是按鈕在也頁面中的常規(guī)狀態(tài)。
1.2 Hover 懸浮狀態(tài)
此狀態(tài)為按鈕的懸浮狀態(tài)，當(dāng)鼠標(biāo)滑過時(shí)候的狀態(tài)會(huì)給用戶一個(gè)交互反饋，因?yàn)樗皇且粋€(gè)視覺上的反饋并無實(shí)際作用，所以在移動(dòng)端就把此狀態(tài)去掉了。
此狀態(tài)的效果并沒有具體的規(guī)則，具體按產(chǎn)品風(fēng)格來定。這里我給一個(gè)參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.3 Click 點(diǎn)擊狀態(tài)
此狀態(tài)為按鈕的鼠標(biāo) / 手指按鈕狀態(tài)，操作完此狀態(tài)后，就會(huì)引發(fā)此按鈕的真實(shí)作用。
同時(shí)，此狀態(tài)的效果也沒有具體的規(guī)則，具體按產(chǎn)品風(fēng)格來定。這里我給一個(gè)參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.4 Disable 禁用狀態(tài)
此狀態(tài)為按鈕的不可操作狀態(tài)。
當(dāng)頁面中有未完成的任務(wù)或頁面中有錯(cuò)誤導(dǎo)致不可提交頁面時(shí)，按鈕會(huì)處于 Disable 狀態(tài)。這個(gè)狀態(tài)在產(chǎn)品中也是很常用的，而且這種情況下應(yīng)該引導(dǎo)用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個(gè)通用的展示方案。
一般方案有兩種：
· 無論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；
· Disable 狀態(tài)為 Normal 狀態(tài)的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。
2）狀態(tài)屬性
· 常規(guī)：常規(guī)樣式的按鈕，主操作按鈕；
· 危險(xiǎn)按鈕：刪除/移動(dòng)/修改權(quán)限等危險(xiǎn)操作，一般需要二次確認(rèn)；
· 幽靈按鈕：用于背景色比較復(fù)雜的地方，常用在首頁/產(chǎn)品頁等展示場(chǎng)景；
· 加載：用于異步操作等待反饋的時(shí)候，可以避免多次提交。
四 按鈕的使用方法 / 禁忌
1）一個(gè)操作區(qū)有且只有一個(gè)主按鈕
一個(gè)操作區(qū)有且只有一個(gè)主按鈕去引導(dǎo)用戶操作，如有有多個(gè)或沒有則會(huì)影響用戶的判斷。盡可能少的讓用戶去做選擇，產(chǎn)品的終極目標(biāo)應(yīng)該是“傻瓜式”產(chǎn)品，不要讓用戶有學(xué)習(xí)成本。
2）圓角值
根據(jù)產(chǎn)品風(fēng)格，三種圓角值的設(shè)定：
2.1 圓角值為 0
這種適合用在比較嚴(yán)謹(jǐn) / 企業(yè)級(jí)產(chǎn)品中，比如：阿里云；
2.2 小圓角值
這種是最常用的形式，在不失嚴(yán)謹(jǐn)?shù)耐瑫r(shí)還有一些細(xì)節(jié)，如果可以的話，盡量選這種的；
2.3 超大圓角值
這種一般需要有獨(dú)特的產(chǎn)品風(fēng)格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。
較大圓角值，此類千萬不要用，不要問，問就是太丑。
3）精簡(jiǎn)文字
按鈕里面的文字一定是精簡(jiǎn)的，不要展示過多文字，更不要折行。
4）文字與按鈕比例要適中
文字與按鈕的比例要適中，文字不要太大或太小，都會(huì)影響視覺展示。
5）彌散陰影
如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會(huì)讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級(jí)別的不要用，不然識(shí)別度會(huì)變差，并且會(huì)讓按鈕的體驗(yàn)變得很差。
6）主次操作按鈕樣式統(tǒng)一
主次操作按鈕樣式要統(tǒng)一，不要濫用樣式。
7）按鈕樣式與其他組件要有區(qū)別
實(shí)際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產(chǎn)生誤解，做一些不必要的操作和思考。
8）不同場(chǎng)景適配
現(xiàn)在暗黑模式也是常用的場(chǎng)景了，所以黑/白場(chǎng)景下都要考慮到識(shí)別度的問題。
9）主次按鈕的位置
主次按鈕左右的問題，也常常出現(xiàn)在設(shè)計(jì)討論會(huì)中，這次我直接放個(gè)結(jié)論吧，以后不要再為這件事吵架了。
在提交頁面、彈窗中，主按鈕在右；在其他常規(guī)頁面上，酌情考慮。
五 按鈕尺寸
按鈕尺寸具體用多大的，這里我總結(jié)了一個(gè)規(guī)范（僅代表個(gè)人意見）。
· 高 = 文字行高 + Xn，X=自然數(shù)，n=4
· 寬 = 文字寬度 + Xn，X=自然數(shù)，n=4
在其他地方也可以用類似的公式去做規(guī)范，比如卡片的間距，你可以設(shè)置 n 為基礎(chǔ)值，在此基礎(chǔ)上用 Xn 去選取合適的值。
注意：常用的字號(hào)為 12px、14px，盡量不要用太大的字號(hào)在按鈕上。
小結(jié)
按鈕只是眾多組件中的其中一個(gè)，也是最常用的組件之一。對(duì)于設(shè)計(jì)師來說，無論大小組件，我們都要精益求精的去思考，只有把每一個(gè)細(xì)節(jié)做好了，才能做好產(chǎn)品。日積月累的把每一個(gè)知識(shí)點(diǎn)掌握了，我們也就成長(zhǎng)了。
文章來源：優(yōu)設(shè)網(wǎng) 作者：友設(shè)青年
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
