同理心是在某種情況下理解他人感受或想法的能力。
同理心有時會與同情相混淆，但這兩個詞并不是同一個意思。同理心是指理解別人的感受或想法，通常是通過自己感受這些情緒。同情是一種表現(xiàn)出關(guān)心或同情而不去感受情緒本身的體驗。
通過有效地與用戶感同身受，盡最大努力了解他們的需求，你為產(chǎn)品體驗奠定了良好的基礎(chǔ)，這將有助于解決他們獨特的問題。
帶著同理心進(jìn)行設(shè)計將提升你所創(chuàng)造的產(chǎn)品。通過與用戶建立更深層次的聯(lián)系，您將更好地理解他們的觀點和痛點。盡早找到這種聯(lián)系可以引導(dǎo)你走上正確的設(shè)計道路，并避免在設(shè)計過程的后期階段大量修改產(chǎn)品。
作為一個用戶體驗設(shè)計師，與用戶共情可以幫助我們創(chuàng)造體驗更好的產(chǎn)品，因為我們在設(shè)計過程中會站在用戶的角度去體驗產(chǎn)品。我們越是善于預(yù)測用戶的欲望和需求，用戶對我們的設(shè)計就越滿意，用戶才越有可能長期地使用我們設(shè)計的產(chǎn)品。
設(shè)計師要避免自我假設(shè)很多需求，我們要通過問很多的問題來了解用戶的直接需求和想法（跟我們需要設(shè)計的產(chǎn)品相關(guān)的問題）?？梢允褂檬鞘裁?、為什么、怎么樣等問題來深入了解用戶。
需要注意整個用戶，而不僅僅是他們的語言。詳細(xì)研究用戶與產(chǎn)品互動的過程，用視頻、錄音、筆記等方式詳細(xì)記錄。
全神貫注地傾聽，理解并記住與你互動的用戶所說的話，避免分心。在用戶體驗設(shè)計中，練習(xí)積極傾聽可以幫助你直接從用戶那里得到公正的反饋，你可以應(yīng)用它來改進(jìn)你的設(shè)計。
收到的反饋是客觀和公正的，這點很重要。朋友或同事通常會提供偏頗的、大多是正面的反饋，因為他們想支持你或取悅你。因此，不同的來源和不同的用戶組的反饋很重要。在尋求反饋時，可以多使用開放式的問題。
我們都有偏見。記住，偏見是基于有限的信息而對某事或某人有偏見。作為用戶體驗設(shè)計師，我們必須把這些偏見放在一邊，以便更好地與他人產(chǎn)生共鳴。你的目標(biāo)是理解用戶，而不是用你自己的觀點和情緒復(fù)雜化他們的反饋。
關(guān)注研究人員，加入在線社區(qū)，了解影響用戶體驗設(shè)計師和用戶的最新研究。隨著我們對人類心理學(xué)的了解越來越多，研究也在不斷變化和發(fā)展。緊跟潮流會讓你在理解聽眾和與聽眾互動方面更有優(yōu)勢。
為了確保訪談中能夠充分利用時間，不談一些偏離的話題，需要先制定訪談目標(biāo)。
下面是一些關(guān)于與用戶共情的常見研究目標(biāo):
我想了解人們在使用我設(shè)計的產(chǎn)品解決問題時所經(jīng)歷的過程和產(chǎn)生的情緒是怎么樣的
我想確定目前人們對此問題是如何解決的？其常見的用戶行為和體驗如何？
我想了解用戶的需求和不滿
時刻記住訪談目標(biāo)，提前寫下你的訪談問題，訪談問題越符合你的目標(biāo)，你得到的數(shù)據(jù)就越有用。
多問開放式的問題，訪談?wù)呖梢愿杂傻胤窒硭麄冋鎸嵉南敕?nbsp;
保持問題簡短明了，訪談?wù)卟湃菀桌斫饽愕膯栴}
追問問題，在訪談?wù)呋卮鹜暌粋€問題后，試著多問他們“為什么?”或者用“多告訴我一點”來獲取更深層的信息
選擇研究對象需要基于研究目標(biāo)和所設(shè)計產(chǎn)品的目標(biāo)用戶?？梢园l(fā)送一份篩選調(diào)查問卷來確定潛在參與者是否符合研究要求，收集的數(shù)據(jù)例如：年齡、地理位置、職業(yè)或行業(yè)、性別等。
一旦你確定了研究目標(biāo)和書面采訪問題(在如何確定你的研究目標(biāo)和問題)，并創(chuàng)建篩選調(diào)查，以找到研究參與者的代表性樣本，你就可以開始招募參與者了!
如何以及在哪里找到研究參與者取決于你工作的公司、你設(shè)計的產(chǎn)品類型、研究的時間限制、項目預(yù)算和目標(biāo)用戶的可訪問性。基于這些項目細(xì)節(jié)，您可以選擇從各種各樣的方式來尋找研究參與者。
個人社交圈?？紤]一下符合你的目標(biāo)用戶的家庭、朋友或同事。
現(xiàn)有用戶。如果你的產(chǎn)品已經(jīng)有一些用戶基礎(chǔ)，你可以從現(xiàn)有用戶中招募參與者。
互聯(lián)網(wǎng)招募。如果是為新成立的企業(yè)設(shè)計產(chǎn)品，最簡單的招募參與者的方法是網(wǎng)上招募。你可以使用社交媒體來尋找研究參與者，或者使用專門招募用戶的網(wǎng)站，如用戶測試和用戶訪談。你也可以找一些符合你目標(biāo)用戶群體的聊天群去招募用戶。
走廊測試。去最可能遇到產(chǎn)品目標(biāo)受眾的地方，比如狗公園或咖啡店，現(xiàn)場拉一些路過的人進(jìn)行測試。如果你招募的參與者不多，時間有限，或者你想免費進(jìn)行研究，那么走廊測試是比較好的選擇。然而，以這種方式尋找參與者是有風(fēng)險的，因為他們可能不是你的潛在用戶。
第三方機(jī)構(gòu)。有預(yù)算的企業(yè)可以雇傭第三方研究機(jī)構(gòu)，他們可以節(jié)省你的時間，而且更加專業(yè)。
將你要問用戶的所有問題列下來，在實踐中已經(jīng)證實保持訪談?wù)邌栴}的一致性很重要。當(dāng)然，訪談腳本只是一個指南，當(dāng)有必要的時候我們可以偏離準(zhǔn)備的問題以了解用戶更多的痛點。
制作一份訪談所需物品的清單，比如一臺電腦、一份打印出來的問題清單，或者紙和鉛筆。如果你在訪談中需要使用新的設(shè)備或技術(shù)，一定要提前了解清楚怎么使用。
盡可能提前了解你要訪談的人。如果你準(zhǔn)備訪談的用戶在訪談前提供了他們的個人信息，要注意確認(rèn)他們的個人信息是否符合真實情況，避免訪談一個競爭對手的臥底。
在正式訪談之前練習(xí)一下你要問的問題，跟同事或朋友模擬地進(jìn)行一次訪談。
感謝用戶的到來。在面試開始前，感謝用戶花時間與你見面并分享他們的觀點。感謝用戶是建立良好關(guān)系的一部分，可以幫助他們覺得自己的意見是有價值的。
收集基本的細(xì)節(jié)。當(dāng)你與用戶見面時，記得詢問與訪談?wù)呦嚓P(guān)的基本信息，如他們的姓名或人口統(tǒng)計信息。11
遵守訪談禮儀
提問時，說話要清晰簡潔，無論用戶如何回答問題，都要保持專業(yè)。當(dāng)用戶分享他們的觀點時，表現(xiàn)出你在積極地傾聽，比如點頭、進(jìn)行適當(dāng)?shù)难凵窠涣骰蜃龉P記。
問開放式的問題
避免問那些會導(dǎo)致簡單回答“是”或“不是”的問題，最好多問一些以“為什么”開頭的問題。如果參與者確實提供了一個簡短的“是”或“不是”的回答，你應(yīng)該追問一些問題，讓他們分享更多信息。
及時記筆記
如果不做筆記，準(zhǔn)確復(fù)述參與者所表達(dá)的幾乎是不可能的!當(dāng)你在面試中觀察和傾聽參與者的談話時，盡可能多地寫下你能捕捉到的內(nèi)容。當(dāng)你想出解決用戶痛點的想法時，一份完整的筆記和觀察清單將會很有幫助。這里有一些最好的做法，可以幫助你在面試中做筆記:
突出引人注目的報價
面試中最明顯的部分就是記錄面試者所說的話。有趣的引用是用戶真實想法和感受的有力指示器。在你的同理心地圖中包含引用是一種很好的方式，以真實用戶的第一手視角為特色，這可以在你開始設(shè)計時提供有價值的見解。
記錄對參與者的觀察
不僅要記錄用戶所說的話，還要記錄他們的情緒、表情、肢體語言和行為。要特別注意外界因素，比如噪音或干擾，這些可能會影響面試結(jié)果。在創(chuàng)建同理心地圖時，所有這些觀察結(jié)果都是重要的考慮因素。
語音/視頻記錄訪談
詢問參與者是否允許你錄入訪談。如果他們同意的話，錄下來的訪談在之后會很有幫助，可以幫助你回顧訪談中你可能不記得的部分，或者在訪談結(jié)束后整理額外的筆記。
在你問完所有的訪談問題后，給用戶一個機(jī)會分享他們對面試中討論的任何項目的最終想法。一些參與者可能會公開他們的觀點，并透露他們之前沒有分享的見解。
另外，記得再次感謝參與者。你要讓用戶在訪談結(jié)束時對你及未來的產(chǎn)品和你可能代表的公司有一個不錯的感覺。
幫助設(shè)計師以圖表的形式梳理每次訪談的信息，以明確用戶需求
你的公司正在開發(fā)一個新的應(yīng)用程序來幫助人們安排遛狗的時間。該應(yīng)用程序的目的是將合格的遛狗者與需要幫助照顧他們的狗的客戶匹配起來，類似于拼車或家庭共享應(yīng)用程序。你是用戶體驗團(tuán)隊的一員，你的團(tuán)隊處于設(shè)計應(yīng)用程序的早期階段，并正在了解用戶的痛點。一位同事已經(jīng)采訪了經(jīng)常使用該應(yīng)用程序的狗主人和專業(yè)遛狗者?，F(xiàn)在你有責(zé)任用同理心地圖總結(jié)每次采訪。
名稱:Makayla斯科特
情境:Makayla是一名45歲的女教師，住在德克薩斯州休斯頓。她有兩條狗。作為一名四年級老師，Makayla日常的工作比較多。放學(xué)后，她還自愿擔(dān)任排球教練。Makayla的伴侶是一名全職兒科外科醫(yī)生，經(jīng)常在當(dāng)?shù)蒯t(yī)院的夜班和白班之間輪流工作。
UXR：
你能描述一下你目前的工作情況以及是如何照顧你的狗的嗎?
Makayla：
我是一名教師，放學(xué)后我要教排球，所以我的狗Reggie和Snowball在很長一段時間內(nèi)要被單獨留在家里。我的伴侶在一家醫(yī)院工作，需要隨叫隨到，還通常有12個小時的白班或夜班。當(dāng)我們都很忙的時候，我們需要有人遛Reggie和Snowball。
UXR：
你在照顧你的狗狗時面臨什么挑戰(zhàn)?這讓你有什么感覺?
Makayla：
我愛我的狗!他們是那么的可愛。如果問他們要出去玩多少次，他們肯定會說一天想要遛五次!但是，按照我們的日常工作情況，很難經(jīng)常帶他們出去。我每天早上第一件事就是把它們放出來玩一會兒，然后晚上也會把它們放出來玩一會兒。有時候，我會付錢給隔壁鄰居17歲的兒子讓他幫我遛狗。但是，我們?nèi)ヂ糜蔚臅r候就會有很大的困擾。我和我的伴侶喜歡去旅行，我們不能總是帶著我們的寵物。如果我們能預(yù)定一個遛狗的人，那我們就能安心地出去玩了。
我們鄰居的兒子今年就要畢業(yè)了，他的日程安排越來越不穩(wěn)定。我不能在一直依賴他，我擔(dān)心他沒有專業(yè)的照顧狗狗的經(jīng)驗。當(dāng)然，一個17歲的孩子只是每天帶狗散散步是沒問題，但如果他周末帶狗出去玩，Snowball生病了怎么辦?他怎么知道該做什么，或者該不該給我打電話?這確實讓我很擔(dān)心，但我又不想把狗狗拿去寵物店寄養(yǎng)。
還有很多地方我不能帶Reggie去，他比Snowball大得多。他不像Snowball那樣容易過敏。因為它太大了，帶它去公路旅行都很困難。我們?nèi)ツ陝偘岬叫菟诡D，可以求助的人不多。我考慮過在網(wǎng)上發(fā)布廣告，但我不確定把誰留在家里會比較安全，誰可以和狗很好地相處。
UXR：
你覺得有什么方法可以解決這些挑戰(zhàn)嗎?
Makayla：
我想找一個遛狗的人，我希望我可以了解更新他們的信息并且提前篩選。我希望能有一種固定預(yù)約的方式。比如這個人可以每個周末來，然后在我白天工作的時候也可以約一些特定的時間。理想情況下，我可以提前幾天安排遛狗。我只需要一個固定的遛狗者，希望可以通過篩選，確保他們是安全可靠的，與寵物可以友好相處的!我愿意多花一點錢來得到這樣的服務(wù)，而不用老是向我的鄰居求助。
把被采訪人的名字寫進(jìn)你的同理心地圖
逐字引用訪談中的內(nèi)容。準(zhǔn)確地寫下這個人說了什么而不要用你自己的話來總結(jié)。如果總結(jié)了訪談?wù)叩脑挘赡軙e誤地解釋用戶的意思。在訪談中要時刻關(guān)注用戶的狀態(tài)，并記錄他們的痛點。例如，如果用戶在訪談中多次重申相同的問題，那么這可能是一個主要的痛點。
在這里，你可以總結(jié)一下用戶表達(dá)的想法。添加用戶通過肢體語言、語氣或其他明顯的指示來傳達(dá)的感受，即使他們沒有口頭上向你表達(dá)。你可以對這些感覺做出推斷，但你必須注意不要對用戶做出假設(shè)。例如，Makayla對鄰居十幾歲的兒子表示擔(dān)憂，并提到了他的年齡和資格。一個假設(shè)是，Makayla想要一個成年遛狗者。一個推論是，她想要一個有汽車和駕照的遛狗人，可以帶狗去急診獸醫(yī)。如果你發(fā)現(xiàn)任何矛盾，你可以讓你的用戶解釋他們的肢體語言。
Makayla向我們詳細(xì)說明了她為克服遛狗面臨的挑戰(zhàn)而采取的行動步驟。
在訪談中，注意用戶的憤怒、沮喪、興奮等情緒，列在這個模塊。它可能與你在“所想”中列出的一些內(nèi)容重疊，沒有關(guān)系，就重疊地列出來。如果用戶在訪談中沒有明確提到任何感受，你可以通過追問“這讓你有什么感受?”來探究用戶感受。
這張同理心地圖分解了你的團(tuán)隊在決定你的應(yīng)用如何滿足Makayla需求時需要考慮的所有要點。真正的挑戰(zhàn)來自于你要從所有用戶訪談中得出的聚合共情地圖，并找出每個潛在用戶需求的重疊。
重要的是要理解有兩種類型的共情地圖:單用戶共情地圖和聚合共情地圖(也稱為“多用戶共情地圖”)。
單用戶共情地圖是通過從一個用戶的訪談中獲取數(shù)據(jù)并將其轉(zhuǎn)化為共情地圖來創(chuàng)建的，就像本文前面的例子一樣。這種方法可以幫助設(shè)計師將單個用戶的想法、感受和特征提煉成一種更容易收集數(shù)據(jù)的格式。
聚合共情地圖，代表了一組擁有相似想法、觀點或品質(zhì)的用戶。聚合共情地圖是通過創(chuàng)建多個單用戶共情地圖來創(chuàng)建的，然后將用戶表達(dá)類似內(nèi)容的地圖組合成一個新的共情地圖。這有助于設(shè)計師確定有相似傾向的人群，他們將會使用產(chǎn)品。聚合共情地圖的洞察力允許設(shè)計師確定主題，這有助于他們更好地與他們正在設(shè)計的群體共情。
要了解更多不同類型的共情圖，請查看尼爾森·諾曼集團(tuán)關(guān)于共情圖的這篇文章。
https://www.nngroup.com/articles/empathy-mapping/
角色是虛構(gòu)的用戶，多個用戶匯聚成一類角色，他們的目標(biāo)和特征代表了更大的用戶群體的需求。您創(chuàng)建的每個角色都將代表一組具有您通過研究了解到的類似特征的用戶。角色是設(shè)計過程的關(guān)鍵，因為它們反映了用戶的生活方式，并給你的團(tuán)隊提供了如何滿足用戶需求或挑戰(zhàn)的思路。
在用戶體驗設(shè)計的世界里，用戶永遠(yuǎn)是第一位的。我們要了解用戶需求，必須知道我們的用戶是誰。
角色是通過進(jìn)行用戶研究、確定痛點來創(chuàng)建的，痛點是指用戶體驗方面的痛點，它們會挫敗和阻礙用戶從產(chǎn)品中獲得他們需要的東西。
在創(chuàng)建人物角色時，要在數(shù)據(jù)中查找最常見的標(biāo)簽，并將這些標(biāo)簽擬人化的用戶分組在一起。例如，想象一下，從遛狗應(yīng)用程序的用戶訪談中收集的數(shù)據(jù)顯示，許多年齡在45歲到60歲之間的潛在用戶都擔(dān)心遛狗者能夠進(jìn)入他們的家。這肯定是你想要在代表特定年齡段用戶的角色中包含的痛點。
一般來說，創(chuàng)建3到8個角色就足以代表產(chǎn)品的大部分用戶。把人物角色看作是你所有研究和采訪的總覽。雖然人物角色準(zhǔn)確地代表用戶很重要，但不可能滿足他們的每一個特定需求。角色也是特定于環(huán)境的，這意味著他們應(yīng)該專注于用戶與產(chǎn)品有效互動的行為和目標(biāo)。
以下是Daniela的用戶畫像：
專業(yè)提示:
在構(gòu)建用戶角色之前，先征求團(tuán)隊對產(chǎn)品用戶的意見。在你構(gòu)建了角色之后，審查來自你的團(tuán)隊的建議，并將它們與你創(chuàng)建的角色進(jìn)行比較。指出數(shù)據(jù)是如何驗證或反駁他們的建議的。團(tuán)隊中的每個人都需要理解角色，這樣才能與用戶真正地建立聯(lián)系。
“作為一名為團(tuán)隊收集咖啡訂單的市場實習(xí)生，我想提前提交和監(jiān)控團(tuán)隊訂單，以便更好地管理訂單準(zhǔn)確性和計劃取貨時間?！?/strong>
安妮卡是一家中型廣告公司的市場實習(xí)生。每周兩次，在晨會之前，他們會從附近的咖啡店為團(tuán)隊收集6-12杯咖啡。但有時他們會發(fā)現(xiàn)自己點的菜不完整，或者因為等了太久才來取菜而涼了。他們需要一種方法來提前下單，跟蹤訂單狀態(tài)，并更好地計劃他們的到貨時間。
“作為一名每天花3-4小時學(xué)習(xí)和購買產(chǎn)品的遠(yuǎn)程學(xué)生，我希望能夠在不起床的情況下點餐，這樣我就可以享受CoffeeHouse的產(chǎn)品，并繼續(xù)工作。”
阿離是一名廚師，住在一個小城市，大部分時間在晚上工作。白天，阿離會參加3-4小時的在線編程訓(xùn)練營，學(xué)習(xí)一項新的就業(yè)技能。他們通常在當(dāng)?shù)氐目Х鹊赀M(jìn)行新兵訓(xùn)練營，但有時會因為座位有限而感到沮喪。他們還擔(dān)心，如果他們站起來點新的咖啡或食物，會失去他們的桌子。阿離可以使用CoffeeShop應(yīng)用程序預(yù)訂店內(nèi)工作區(qū)，并在顧客到達(dá)后通過該應(yīng)用程序下單。
無障礙設(shè)計是為殘疾人設(shè)計產(chǎn)品、設(shè)備、服務(wù)或環(huán)境。無障礙設(shè)計是考慮所有用戶的旅程，牢記他們的永久性、臨時性或情境性殘疾。通過研究殘疾人如何與你的產(chǎn)品互動，你可以更好地理解如何為他們設(shè)計。我們不可能準(zhǔn)確猜測用戶體驗產(chǎn)品的所有方式，這也是為什么在你的研究中包含殘疾人是如此重要的原因之一。
當(dāng)你在設(shè)計過程的共情階段進(jìn)行研究時，需要考慮以下幾點。
你會如何為那些只使用一只手的用戶設(shè)計，無論是永久的、暫時的還是情境的?
你將如何為那些視力有限的用戶設(shè)計，無論是永久的、暫時的還是情境的?
使用更大的字體來設(shè)計更適合讀者的應(yīng)用程序。
確保應(yīng)用程序和圖像有可被屏幕閱讀器讀取的替代文本。
檢測用戶是否在駕駛機(jī)動車。
使用高對比度的顏色設(shè)計應(yīng)用程序。
不要依賴文本顏色來解釋導(dǎo)航或下一步操作。例如，不要單獨使用紅色文本作為警告的指示。相反，你的設(shè)計應(yīng)該包含明確的說明。
可定制的文本
還有一些額外的網(wǎng)頁輔助工具，有閱讀障礙或其他視覺處理障礙的人可以從中受益。其中一種方法是自定義文本，該特性允許用戶更改文本的顯示方式，以便更容易地閱讀文本。文本定制包括更改從顏色或字體到文本大小甚至間距的所有內(nèi)容。例如，有些字體可能更便于用戶閱讀，因此定制字體可能會有很大幫助。因此，可定制文本提供了比簡單地放大或放大文本更多的選項，使內(nèi)容更具適應(yīng)性，同時保持功能。
你會如何為那些永久性、暫時性或情境性聽力受限的用戶進(jìn)行設(shè)計?
不要僅僅依靠聲音來提供應(yīng)用更新，比如新消息通知。相反，應(yīng)該啟用觸覺技術(shù)，即吸引用戶觸覺的振動和通知燈。
對所有視頻應(yīng)用封閉字幕。
在應(yīng)用程序中提供一個文本消息系統(tǒng)，允許用戶通過書寫進(jìn)行交流。
你會如何為那些永遠(yuǎn)、暫時或情境性不能說話的用戶設(shè)計?
在為殘疾用戶設(shè)計時，這個列表只是需要考慮的一小部分。了解如何改進(jìn)你的設(shè)計的最好方法是進(jìn)行研究并直接從殘疾人那里獲得反饋。
創(chuàng)造一個考慮到每個能力范圍的產(chǎn)品設(shè)計是非常困難的。值得慶幸的是，有一些服務(wù)和應(yīng)用程序旨在幫助彌合這一差距。例如，手機(jī)供應(yīng)商最近新增的一項服務(wù)是“實時短信”(Real-Time text)，用戶可以在打電話時發(fā)短信，以改善溝通。
另一個幫助殘疾人的功能是替代文本。視力低下或失明的人通常依賴屏幕閱讀器大聲朗讀屏幕上的內(nèi)容。但是，如果信息圖標(biāo)沒有標(biāo)簽或替代文本，屏幕閱讀器就無法向用戶描述該按鈕的功能。不是每個圖像或圖標(biāo)都是信息，所以只在必要的時候添加描述。
研究和學(xué)習(xí)輔助技術(shù)將幫助您更好地理解這些技術(shù)的影響。這里有一些鏈接可以幫助你開始:
討論殘疾技術(shù)的價值:YouTube上TEDx演講中的殘疾技術(shù)
https://www.youtube.com/watch?v=eFkhFxJZvho
科技的可達(dá)性如何改變生活:盲人如何利用科技從YouTube上的TEDx演講中看到世界
https://www.youtube.com/watch?v=0EQOZRIA-nA
智能手機(jī)可訪問性:來自Uswitch的全面指南
https://www.uswitch.com/mobiles/guides/smartphone-accessibility/
谷歌無障礙信息中心主頁
https://www.google.com/accessibility/
為了將包容性設(shè)計付諸實踐，重要的是讓自己沉浸在殘疾人可能使用的輔助技術(shù)中，并與他們討論他們的經(jīng)歷。為你周圍的世界進(jìn)行同理心設(shè)計的最好方法是與你的用戶互動，并詢問他們你的設(shè)計可以幫助他們成功的方法。
要了解更多關(guān)于包容性設(shè)計的知識，這里有一些額外的資源可以幫助你入門:
描述方法設(shè)計產(chǎn)品包容性:包容性設(shè)計:12種方法為每個人設(shè)計從Shopify
https://www.shopify.com/partners/blog/inclusive-design
谷歌的包容性設(shè)計的無障礙方法:從谷歌I/O的包容性設(shè)計的無障礙過程
https://www.youtube.com/watch?v=TAzkrXTGEOM&feature=emb_title
分解重要的包容性設(shè)計原則:來自UX Planet的6條包容性設(shè)計原則
https://uxplanet.org/6-principles-for-inclusive-design-3e9867f7f63e
坡道與相鄰街道形成坡道的人行道的斜面
人行道斜坡效應(yīng) Curb-cut effect
路沿切割通常在十字路口發(fā)現(xiàn)。多虧了路緣切割，坐輪椅、腿支架或拐杖的人可以更自由地在他們的社區(qū)里穿行。但是，有趣的是:削減路沿的好處延伸到每個人，從推嬰兒車的人到騎自行車的人，搬家的人，和老年人。很有可能，路邊停車對你也有幫助。路緣切割已經(jīng)成為無障礙設(shè)計的一個非常流行的例子，現(xiàn)在有一個完整的概念以它命名。
“人行道斜坡效應(yīng)”是一種現(xiàn)象，描述的是為殘疾人設(shè)計的產(chǎn)品和政策如何最終幫助到所有人。
識別用戶面臨的問題是用戶體驗設(shè)計中最重要的部分之一。在這篇閱讀中，你將學(xué)習(xí)如何定義用戶未說出口的痛點，并利用它們形成強有力的問題陳述。
痛點：任何讓用戶受挫并阻礙他們獲得所需內(nèi)容的用戶體驗問題。
想想遛狗應(yīng)用和我們的一個用戶角色，Arnold。Arnold快50歲了，他的孩子們鼓勵他升級到智能手機(jī)。Arnold是公司的領(lǐng)導(dǎo)者，他不習(xí)慣承認(rèn)自己對技術(shù)不適應(yīng)。妻子去世后，Arnold成了家里動物的主要照料者。但是，他每周工作60多個小時，無法每天兩次帶著他的三條狗散步。Arnold向遛狗軟件求助。
痛點可以分為四類:
財務(wù)：與金錢相關(guān)的痛點。
產(chǎn)品：與質(zhì)量問題相關(guān)的痛點。
過程：與用戶旅程相關(guān)的痛點。
支持：與從客戶服務(wù)獲得幫助有關(guān)的痛點。
Arnold的痛點屬于過程范疇。他最大的挑戰(zhàn)是他不懂技術(shù)，所以他很難理解如何使用這款應(yīng)用。 要構(gòu)建問題陳述，您可以利用5w1h框架。
用于創(chuàng)建問題陳述的最常用框架是5w1h框架。在定義了用戶的痛點之后，您可以回答誰、什么、何時、何地、為什么以及如何解決用戶的問題。
誰正在經(jīng)歷這個問題?
了解用戶及其背景能為用戶設(shè)計更好的解決方案。
你想要解決的痛點是什么?
盡早確定用戶的痛點可以讓您回答剩下的這些問題，并闡明痛點的上下文。
當(dāng)用戶使用產(chǎn)品時，他們在哪里?
用戶的物理環(huán)境對您的設(shè)計很重要。
什么時候出現(xiàn)問題?
也許是漫長而乏味的過程剛剛結(jié)束，也可能是每天都在發(fā)生的事情。知道問題何時發(fā)生可以幫助您更好地理解用戶的感受。
為什么這個問題很重要?
了解這個問題如何影響用戶的體驗和生活將有助于明確潛在的后果。
用戶如何使用產(chǎn)品以達(dá)到他們的目標(biāo)?
了解用戶如何達(dá)到他們的目標(biāo)可以讓你繪制用戶通過你的產(chǎn)品的旅程。
以Arnold舉例：
誰:一個忙碌的主管 。
事情:Arnold想為他的三只狗雇一個每日遛狗的人。
地點:Arnold很可能在工作中，在路上使用這款應(yīng)用。
何時:當(dāng)Arnold打開應(yīng)用程序時，他會感到沮喪。
原因:Arnold在手機(jī)應(yīng)用或類似技術(shù)方面沒有太多經(jīng)驗。
如何操作:Arnold希望從應(yīng)用程序的主屏幕輕松切換到遛狗者列表，再到確認(rèn)屏幕。
那么，如何創(chuàng)建問題陳述呢?首先定義用戶是誰，他們的需求和動機(jī)是什么。
【用戶名】是一個【用戶特征】ta需要【用戶需求】因為【洞察】
現(xiàn)在把這個公式應(yīng)用到Arnold身上。Arnold是一個忙碌的專業(yè)人士，他需要一個遛狗人。但它的洞察力是什么?他的電話!他的孩子們給了他一部閃亮的新智能手機(jī)。Arnold分享說，他經(jīng)常與技術(shù)作斗爭，在應(yīng)用程序?qū)Ш缴嫌袉栴}。
該問題以人為中心，專注于特定角色的需求；
該問題有發(fā)散的空間；
該問題可以用實用的設(shè)計方案來解決；
有兩種常用的方式可以用來陳述解決方案：
如果.....那么....（關(guān)注用戶需求）
如果Arnold下載了遛狗應(yīng)用程序，那么他們就可以利用“簡化”模式設(shè)置只查看應(yīng)用程序的基本功能。
如果Arnold斯注冊了遛狗軟件，那么他們就可以快速輕松地選擇適合自己時間表的遛狗者。
我們相信，....將...（從團(tuán)隊的角度描述并保持對用戶需求的同理心）
我們相信，Arnold的遛狗應(yīng)用程序的簡化模式將允許他們高效地雇用遛狗者。
我們相信，Arnold可以方便地找到遛狗的人，這將增加他們?yōu)閷櫸镞x擇的散步次數(shù)。
該方案說明了一個具體的操作，并能夠說明解決方案應(yīng)該讓用戶做什么；
該方案成功滿足用戶需求的期望結(jié)果；
我們?nèi)绾问褂玫侥壳盀橹箻?gòu)建的所有內(nèi)容（共情地圖、人物角色、用戶故事、問題陳述和假設(shè)陳述）讓用戶認(rèn)為，“我必須擁有這個!” 。答案是：從定義產(chǎn)品的價值主張開始。
價值主張總結(jié)了消費者為什么應(yīng)該使用一種產(chǎn)品或服務(wù)。
價值主張的例子：
看看一個你可能認(rèn)識的產(chǎn)品——Gmail——然后問問你自己，你是否能認(rèn)出它的一些價值主張。當(dāng)谷歌在2004年推出Gmail時，他們進(jìn)入了一個已經(jīng)非常擁擠的免費電子郵件服務(wù)市場。Gmail提供:
免費收發(fā)電子郵件
電子郵件分類、歸檔和星星功能
垃圾郵件過濾
電子郵件對話視圖
1g的云存儲
清單上的兩項是當(dāng)時其他電子郵件服務(wù)無法提供的獨特服務(wù):電子郵件對話視圖，它將單個電子郵件放在更大的線程上下文中;還有整整1gb的存儲空間，這是競爭對手提供的存儲空間的1000倍。這些都是Gmail獨特的價值主張。
你的產(chǎn)品所提供的一切對你來說可能是顯而易見的，但你必須把自己放在用戶的心里。用戶還不知道你的產(chǎn)品，也不了解它的價值。這就是價值主張的用武之地。
首先，你需要做一些調(diào)查，以回答以下兩個問題:
一旦你回答了這些問題，你就可以遵循一系列的步驟來專注于你的產(chǎn)品獨特的價值主張。讓我們以遛狗應(yīng)用程序為例來探索這是如何工作的。
列出你的產(chǎn)品的所有偉大的功能和好處，無論大小。列出所有想到的東西，然后再縮小范圍。
任何你確定為價值主張的東西都需要對你的用戶有益。在本例中，對于遛狗應(yīng)用程序，在用戶訪談中確定了四類產(chǎn)品價值:可訪問性、遛狗者的專業(yè)體驗、成本和可靠性。第一步的功能和好處被分成了這四個類別。
最初的列表中有一些功能和好處不屬于這四個類別，并沒有為用戶增加真正的“價值”:
每月為您的寵物提供有機(jī)食品和新產(chǎn)品資訊
專門供遛狗使用(不含其他寵物)
遛狗者分級系統(tǒng)
培訓(xùn)技巧
這些特性和好處沒有被分類到這四類，而是被放在了一邊。
我們的目標(biāo)是確定對用戶真正有價值的東西，而不僅僅是用戶沒有要求的酷功能。為了確定價值，將你所開發(fā)的人物角色與滿足其最大痛點的價值主張配對。
通過將它們與實際用戶需求相匹配，您已經(jīng)縮小了大量好處和功能的范圍?，F(xiàn)在是時候回顧你的產(chǎn)品提供的價值主張清單了。對于遛狗應(yīng)用程序，以下是與早期開發(fā)的人物角色相匹配的價值主張:
這就是你的價值主張清單!然而，您的競爭對手也提供了其中的一些功能和好處。那么，你如何知道是什么讓你的產(chǎn)品在競爭中脫穎而出呢?確定應(yīng)用的獨特價值定位。這意味著要重新審視與你的人物角色相匹配的價值主張列表，并刪除競爭對手也提供的價值主張。
了解你的產(chǎn)品的競爭對手的方法之一是閱讀評論。將評論從低到高進(jìn)行排序，仔細(xì)檢查評論者對你的競爭對手分享了什么。以下是一款競品遛狗應(yīng)用的一些評論:
你能在這個例子中找出最大的痛點嗎?在一些評論中，一個共同的主題是需要對遛狗者進(jìn)行徹底的、面對面的培訓(xùn)，以確保遛狗者知道如何做好他們的工作。一些評論還呼吁遛狗者需要可靠。沒有其他遛狗應(yīng)用程序可以滿足這種需求，所以這是我們的應(yīng)用程序可以提供的獨特價值主張!
關(guān)于價值主張最重要的一點是，它們必須簡短、清晰、切中要點。用戶希望能夠很容易地準(zhǔn)確地確定您的產(chǎn)品將如何滿足他們的獨特需求，以及是什么使您的產(chǎn)品在市場上與眾不同。有時候用戶不知道他們需要什么，除非你向他們解釋。這才是產(chǎn)品設(shè)計創(chuàng)新的真正核心。
設(shè)計師需要了解我們是為誰解決問題，他們的需求是什么。我們可以通過用創(chuàng)建共情圖、角色模型、用戶故事和用戶旅程圖
首先我們需要定義好所面臨的問題，這樣團(tuán)隊中的所有成員才能為了解決同一個問題而集中發(fā)力。明確我們所面臨的問題也可以幫助我們始終將用戶需求放在第一位。
我們需要一個舒適的空間，讓團(tuán)隊中的每個人都可以聚在一起表達(dá)各自的想法。如果是線下會議，建議選擇一個不同于平常工作環(huán)境的創(chuàng)意空間。如果是遠(yuǎn)程會議，可以在家里找一個容易集中精力的地方。
日常的設(shè)計工作是無窮無盡的，我們需要給自己充分的時間去創(chuàng)意想法。然而，你不能一直頭腦風(fēng)暴，所以需要設(shè)置頭腦風(fēng)暴的限定時間并且開始更深刻地思考你想出來的創(chuàng)意點。
一個由不同種族、性別、能力和背景的成員組成的包容性的團(tuán)隊，將幫助你想出各種各樣的解決方案。
不要把自己局限于傳統(tǒng)的想法和解決方案，我們需要天馬行空的創(chuàng)意。如果你有一個看起來與眾不同的很酷的想法，把它寫下來!
擴(kuò)展閱讀
https://careerfoundry.com/en/blog/ux-design/what-is-ideation-in-design-thinking/
https://designthinking.ideo.com/
競品分析是對競爭對手優(yōu)勢劣勢的分析，可以從中獲取產(chǎn)品的基本市場情況，也可以幫助我們設(shè)計出對用戶更有幫助和更獨特的產(chǎn)品。競品可以分為兩種：直接和間接。直接競品與你的產(chǎn)品功能相近、用戶群體相同。間接競品與你的產(chǎn)品功能相近但用戶群體不同，或用戶群體相似但功能不同。
案例項目背景：假設(shè)你正在為你的新客戶花園漢堡進(jìn)行關(guān)于快餐漢堡餐廳的競品研究?；▓@漢堡認(rèn)為他們目前的網(wǎng)站缺少吸引力，獲客少，他們想讓你幫助公司重新設(shè)計他們的網(wǎng)站。
目標(biāo)：比較競品網(wǎng)站的用戶體驗
使用一致的維度來梳理競品信息可以幫助我們更加直觀地對競品評級。
推薦評級標(biāo)準(zhǔn)：
需改進(jìn)：無法滿足用戶需求
良好：有缺陷，但可以滿足用戶需求
優(yōu)秀：較好地滿足用戶需求，但易用性有待提升
卓越：符合或超出用戶預(yù)期，并且體驗一致
可以詢問客戶來了解他們的直接或間接對手有哪些。比如花園漢堡認(rèn)為漢堡來了是他們的直接競爭對手，而你根據(jù)自己的研究發(fā)現(xiàn)約翰漢堡和小高牛肉漢堡是與花園漢堡在同一區(qū)域的漢堡餐廳，因此他們是兩個更直接的競品。同時，你還發(fā)現(xiàn)有個叫素食漢堡的間接競品，他們網(wǎng)站上的圖片非常吸引人。通過以上信息，我們可以構(gòu)建競品分析圖表的框架如下：
舉例：
第一印象：網(wǎng)絡(luò)是否有延遲？跨設(shè)備的適配怎么樣？你覺得這個網(wǎng)站怎么樣？
交互：有哪些功能？是不是所有用戶都可以訪問網(wǎng)站？對不使用英語的用戶包容性如何？在使用過程中是否會感到困惑？導(dǎo)航是否清晰？
視覺設(shè)計：視覺是否一致？品牌是否與目標(biāo)用戶匹配？頁面設(shè)計是否讓人難忘？
文案內(nèi)容：文案內(nèi)容是否符合公司品牌？用戶可以找到他們感興趣的細(xì)節(jié)嗎？
可以將列舉出來的維度放在競品分析表的第一行，然后我們需要填寫每一個競品的這些信息。
目標(biāo)群體
調(diào)研發(fā)現(xiàn)，千禧一代及其家庭是競爭對手們的主要目標(biāo)群體，其次是z世代的大學(xué)生。這與花園漢堡的目標(biāo)群體非常相似。只有素食漢堡的目標(biāo)群體不同，因此它被列入間接競品中。
第一印象
第一印象最好的是小高牛肉漢堡和素食漢堡。兩者的圖片都很清晰且吸引人，網(wǎng)站的響應(yīng)速度很快。漢堡來了和約翰漢堡的網(wǎng)站不太容易記住，它們的導(dǎo)航很清晰，但是布局需要改進(jìn)一下。 就手機(jī)網(wǎng)站體驗來說，只有漢堡來了沒有做好適配，手機(jī)端的間距不對，導(dǎo)致一些信息看不到。 評分較低的網(wǎng)站最大的問題是菜單，有時菜單無法訪問或展示的形式難以閱讀。這絕對是你重新設(shè)計漢堡花園網(wǎng)站時要注意的事情!
交互
小高牛肉漢堡的網(wǎng)站有加載動畫，約翰漢堡的網(wǎng)站首頁有很多不必要的內(nèi)容使得人們很難找到他們想要的重要信息。另外，清晰的導(dǎo)航（明確哪些元素可點擊，哪些不可點擊）在網(wǎng)站設(shè)計中非常重要，素食漢堡在這方面做的很好，具有定位商店等功能和全面的可訪問性，包含多種語言選項并且兼容多種瀏覽器。
視覺設(shè)計
網(wǎng)站清晰和一致的視覺設(shè)計可以吸引用戶去了解產(chǎn)品和公司?；▓@漢堡目前的網(wǎng)頁設(shè)計非常扎實，但是存在一些優(yōu)化點可以更好地反應(yīng)他們的品牌調(diào)性。
小高牛肉漢堡和素食漢堡通過獨特的顏色、字體和圖片傳達(dá)他們的品牌。約翰漢堡和漢堡來了缺少一致的網(wǎng)站風(fēng)格設(shè)計，約翰漢堡并沒有很好地傳達(dá)自身品牌
文案內(nèi)容
文案的描述也是傳達(dá)公司品牌和吸引用戶的另一個好辦法。大多數(shù)花園漢堡的競品都使用吸引注意和有趣的語言來迎合他們的客戶?；▓@漢堡的語言基調(diào)有一些不一致，并且沒有它的競品那樣感覺讓人放松。
總的來說，競品的內(nèi)容簡短且易于理解。漢堡花園目前的網(wǎng)站描述顯得有些枯燥和冗長。
在進(jìn)行研究、收集數(shù)據(jù)和分析洞察之后需要進(jìn)行總結(jié)。需要根據(jù)競品分析目標(biāo)來梳理報告中的內(nèi)容以及呈現(xiàn)洞察。
例如，如果競品分析目標(biāo)是對了比較競爭對手的目標(biāo)群體，我們可以使用一些信息圖形來呈現(xiàn)數(shù)據(jù)?；蛘?，目標(biāo)重點是視覺設(shè)計，我們可以截取競品的圖片并突出顯示重點區(qū)域。
可以使用ppt或書面文檔的形式來展現(xiàn)競品分析報告，ppt會更有視覺沖擊力表現(xiàn)形式更豐富，但需要花費更多的時間。書面文檔寫起來很方便，如果你的報告對象比較少，建議使用書面文檔。
概述研究問題、研究方法以及與競品相比較的一些產(chǎn)品特征，這部分內(nèi)容可以讓團(tuán)隊對競品分析的目標(biāo)有一個清晰的認(rèn)知。
為了更好地向聽眾傳達(dá)信息結(jié)構(gòu)，在每個部分開始前需要有一個標(biāo)題頁，就像下圖所示：
下一步，總結(jié)你從競品身上學(xué)到的以及跟自身產(chǎn)品的對比。一定要指出本產(chǎn)品的優(yōu)勢和可以改進(jìn)的機(jī)會點。
在你組織信息呈現(xiàn)的時候，要注意思考如何最有效地展現(xiàn)你的洞察點。保持整體設(shè)計簡單和干凈，避免雜亂，讓聽眾能聚焦在重要信息。
最后，總結(jié)關(guān)鍵點。競品最多可以比較10家公司，這里面的信息量非常大，總結(jié)概括最重要的信息來幫助聽眾記憶。
有效地展示數(shù)據(jù)
展示數(shù)據(jù)的方式會影響聽眾的解讀，不同類型的數(shù)據(jù)需要用到不同的展現(xiàn)形式。例如，你的報告有很多數(shù)字或量化數(shù)據(jù)，一個圖表或圖表可以幫助聽眾比較數(shù)據(jù)。為了演示競品的特定功能或問題，可以在演示中加入錄屏視頻。
最后，可以加入你在競品分析中使用到的評分標(biāo)準(zhǔn)的說明。例如，我們在示例中將評級分為“需改進(jìn)”到“卓越”，對應(yīng)每間餐廳在每個類別中以1到4的等級，從而形成最終的評級。
其他小提示
《福布斯》的這篇文章將幫助你緩解演講時的緊張感，聽聽來自專家的關(guān)于與聽眾溝通的建議：
https://www.forbes.com/sites/markfidelman/2014/08/15/20-world-class-presentation-experts-share-their-top-tips/?sh=2920b075c40d
“我們?nèi)绾文軌?How might we (HMW)”是一種將問題轉(zhuǎn)化為設(shè)計機(jī)會的設(shè)計思維活動。HMW可以激發(fā)設(shè)計師的創(chuàng)造力，并引導(dǎo)設(shè)計師從不同的角度思考問題，從而想出各種各樣的解決方案。要想創(chuàng)建好的HMW問題，我們需要一個好的問題陳述來定義問題。
假設(shè)用戶Darren面臨一個問題:Darren是一個音樂會觀眾，他需要一直拿著音樂會門票，因為他們在通過安檢時需要門票。
放大好處（如何利用問題中的積極因素來解決問題）
我們怎樣才能使記錄門票成為朋友間的一種有趣的競爭呢?
探索相反的方向（將如何解決你所列出的問題的反面）
我們怎樣才能發(fā)明一種不用拿著票的方法呢?
改變現(xiàn)狀（想想完全改變這個過程的方法）
我們?nèi)绾沃谱鞣羌堎|(zhì)的音樂會門票?
將POV分解為碎片（這對于長時間、復(fù)雜的問題尤其有幫助）
我們怎樣才能使顧客的票不丟失呢?我們怎樣才能讓安全團(tuán)隊更容易處理丟失的機(jī)票呢?
消除壞處（想想如何完全消除問題中消極的部分）
我們怎樣才能讓音樂會觀眾不需要門票就能進(jìn)入場館呢?
改變現(xiàn)狀（把消極的形容詞試著變成積極的）
我們怎樣才能使門票持有者在進(jìn)入音樂會場地時不那么緊張呢?
質(zhì)疑假設(shè)（刪除或更改任何有質(zhì)疑的流程）
我們?nèi)绾卧谝魳窌腥∠踩珯z查程序?
根據(jù)需要或上下文創(chuàng)建一個類比（考慮將這個用戶體驗與另一個用戶體驗進(jìn)行比較的方法）
我們怎樣才能讓通過安檢像玩電子游戲一樣?
識別意外資源（考慮一下如何通過問題陳述中沒有提到的資源來解決問題）
如何使用面部識別軟件幫助管理音樂會入場?
開放的
一個好的HMW模型應(yīng)該允許多個解決方案。例如“我們?nèi)绾问垢欓T票變得有趣和有競爭力？”可以用無數(shù)種方式來回答。
不要太寬泛
HMW是全面的，但要足夠聚焦，才能關(guān)注到解決方案的重點。一個過于寬泛的HMW問題的例子：“我們?nèi)绾尾拍苁蛊眲?wù)更好?”這個HMW沒有為提出解決方案的想法提供足夠明確的指導(dǎo)。
進(jìn)行多次修改
在寫完HMW問題后，可以修改它們。如果你發(fā)現(xiàn)你的HMW不能幫助你想出任何有用的解決方案，那就改變它!
創(chuàng)造性的
HMW意味著富有想象力，甚至是有趣的。你可以使用上面斯坦福大學(xué)列出的建議，想出新的、有創(chuàng)意的方法來組織你的問題。
寫盡可能多的HMW
你擁有的HMW越多，你就能想出更多的解決方案。如果你能從所學(xué)的一個框架中提出不止一個問題，那就大膽寫下所有！
將一張紙對折3次，得到8個用劃痕劃分的模塊，分別記錄下8個設(shè)計創(chuàng)意點。相比于電腦，紙更加快速方便，只需要八分鐘，你就可以獲得八個解決方案并且非常方便團(tuán)隊交流。注意要控制創(chuàng)意時間，大概1分鐘畫1個方案草圖。每個人選擇兩三個自己認(rèn)為優(yōu)秀的方案和團(tuán)隊成員共享交流，選出最好的方案，然后繼續(xù)細(xì)化。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊 來源：伊糖巷陌
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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è)計公司
01
什么是靈動島（Dynamic island）
2022蘋果秋季新品發(fā)布會，備受關(guān)注的新一代iPhone如期而至，此次發(fā)布會最大的亮點是iPhone 14 Pro系列一改之前「劉?！乖O(shè)計，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實時變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創(chuàng)新稱之為靈動島（Dynamic island）。
02
靈動島能做什么 / 不能做什么
靈動島其實可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。
來電
當(dāng)有來電時，靈動島會發(fā)生變化，并在后臺打電話時顯示通話時間和聲音波紋。
音樂
有點類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進(jìn)、后退等功能。
Airpods
連接AirPods后，AirPods的型號外觀和當(dāng)前電量會一起顯示。
導(dǎo)航
顯示導(dǎo)航方向和距離，并且能夠在適當(dāng)?shù)臅r候放大顯示更多導(dǎo)航信息。
Face ID
以前Face ID認(rèn)證會顯示在屏幕中間，現(xiàn)在集成于靈動島的擴(kuò)展功能之中。
充電
當(dāng)充電時，會顯示充電的狀態(tài)以及當(dāng)前電量百分比。
當(dāng)然，目前除了官方展示的這些功能以外，還會有更多的應(yīng)用方式，在此不一一列舉。但靈動島也并不是萬能的，例如會存在以下的局限性：
重度使用場景
從官方給出的樣例來看，靈動島更多的是承擔(dān)了消息通知和提醒的作用，并不適用于重度使用和復(fù)雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。
過于復(fù)雜的圖形
受限于前置物理攝像頭，靈動島這個區(qū)域并不能顯示過于復(fù)雜的圖形，并需要避開攝像頭區(qū)域，因為該區(qū)域是不能顯示任何圖像的。
軟硬件的邊界
靈動島的實際效果并不會像宣傳圖中那樣好，特別是在反光強烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發(fā)光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區(qū)分。
03
對于靈動島的各方反應(yīng)
新事物的出現(xiàn)，總會伴隨著支持和反對兩種聲音，此次靈動島的創(chuàng)新交互，自然也是褒貶不一，還需要經(jīng)受時間的考驗，因為即使是蘋果這樣的公司也難免會犯錯，比如3D Touch、MacBook上的Touch bar等。
支持方認(rèn)為「靈動島是繼劉海屏之后的又一個成功設(shè)計，甚至?xí)絼⒑Ｆ?，更受歡迎」。
「靈動島的設(shè)計非常討巧，同時也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分，首先是羅永浩第一時間發(fā)表了自己的觀點，表面上是硬贊這個創(chuàng)新，但實則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調(diào)整得跟粉底差不多」
很多的輿論認(rèn)為，靈動島的創(chuàng)新是蘋果的一種無奈和妥協(xié)，因為自從第一代iPhone革新性的使用觸摸屏之后，十多年以來手機(jī)在工業(yè)設(shè)計方面并沒有太多的創(chuàng)新，大部分廠家是在屏幕分辨率，后蓋材質(zhì)，攝像頭像素上面做文章，而蘋果作為一個工業(yè)設(shè)計創(chuàng)新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動島的創(chuàng)新，被認(rèn)為是工業(yè)設(shè)計乏力之后推動交互設(shè)計創(chuàng)新的無奈之舉。
但無論支持還是反對，前置攝像頭挖孔屏終究是一個過渡性的方案，最終會被全面屏所替代，而在這個過渡時期，很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。
04
為什么國產(chǎn)手機(jī)不做靈動島
國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉海」以外，單攝像頭「圓孔」和雙攝像頭「藥丸」設(shè)計都已經(jīng)非常成熟，但是為什么經(jīng)過這么多年的迭代，依然沒有創(chuàng)新呢？
思維方式的差異
國產(chǎn)手機(jī)廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎(chǔ)，把這個區(qū)域運用到極致。
缺少創(chuàng)新和引領(lǐng)者
似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強不強大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內(nèi)卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關(guān)注從0到1，因為這樣做的性價比的確不高。
市場的接受和認(rèn)可程度
當(dāng)劉海屏第一次出現(xiàn)的時候，很多用戶都在吐槽，其中也包括很多蘋果的忠實用戶，寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經(jīng)過一兩年的審美教育以及國產(chǎn)手機(jī)的跟風(fēng)之后，才慢慢的被更多用戶所接受。因此國內(nèi)的廠商很難有信心通過一己之力去改變用戶習(xí)慣，并贏得市場的認(rèn)可。我相信，蘋果發(fā)布以后，各大廠商已經(jīng)在積極的學(xué)習(xí)和模仿，新的一輪內(nèi)卷即將拉開帷幕。
即便如此，國產(chǎn)廠商也并不是完全沒有在前置攝像頭的區(qū)域努力嘗試過。例如魅族曾經(jīng)在前置攝像頭上顯示當(dāng)前電量，稱之為「環(huán)形電量」，并盡可能的使其與狀態(tài)欄的其它信息融為一體。
榮耀的通話時間膠囊和自拍膠囊，都以前置攝像頭為基礎(chǔ)做延展，可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗。
雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展，但從效果和想法來看，也與靈動島的概念比較類似。
HTC曾經(jīng)出過一款HTC U Ultra，當(dāng)然那時候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外，幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。
05
對設(shè)計師的影響
靈動島的出現(xiàn)，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做，就好比「劉海屏」首次出現(xiàn)的時候，需要設(shè)計師對全新交互邏輯、卡片行為、動畫等重新適配。那么對于「靈動島」我想需要考慮的是這幾個方面。
新的交互方式
之所以叫靈動島，就是因為它是「靈動」的，擁有不同的狀態(tài)變化，以適應(yīng)各種功能提示和操作。設(shè)計師在使用這個功能的時候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態(tài)的容器可以裝載不同的內(nèi)容，相比于以往常規(guī)的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時候，留給設(shè)計師更多的想象空間。
新的表達(dá)方式
靈動島相當(dāng)于一個永遠(yuǎn)在桌面上的島嶼，比任何App的優(yōu)先級都要高，所以會成為各個應(yīng)用的必爭之地，使用一種好的表達(dá)方式，必然能夠達(dá)到事半功倍的效果，因此也是考驗設(shè)計師在寸土寸金的區(qū)域中，通過視覺化手段表達(dá)的能力。
最后，我想蘋果的初衷是為了更好的用戶體驗，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會得到用戶的喜愛和市場的認(rèn)可。
我認(rèn)為靈動島既是一種創(chuàng)新也是一種妥協(xié)，對于工業(yè)設(shè)計硬件創(chuàng)新乏力的妥協(xié)，更是對技術(shù)發(fā)展的妥協(xié)。我也相信，真正的全面屏?xí)r代終究會到來，期待那個時候蘋果再一次給我們帶來真正意義上的，里程碑式的，創(chuàng)新！
電影《再次出發(fā)之紐約遇見你》中有一個浪漫的場景，男主和女主通過一根耳機(jī)分線器一起聽著音樂，一起感受著當(dāng)下同一段旋律。通過這根分線器，他們分享著自己的歌單，分享著當(dāng)下的情緒，隔絕外界的紛擾，游蕩在大街小巷。
這種聽歌方式我也很喜歡，同樣的歌曲讓人產(chǎn)生了不一樣的感受。我想，可能是陪伴和共鳴賦予了這首歌新的生命力吧!
如今，無需分線器，網(wǎng)易云音樂一起聽可以讓你和那個TA隨時一起欣賞音樂、分享心情。前年7月份上線的這個功能獲得了用戶的一致好評，之后的數(shù)據(jù)表現(xiàn)也是遠(yuǎn)超預(yù)期。但是，在眾多的用戶反饋中，最多的一個痛點是：身邊沒有人陪我一起聽，能不能做個匹配功能，找陌生人一起聽？
站在業(yè)務(wù)的層面考慮，一起聽作為一個熟人聽歌的功能，在戀人和親密好友之間普及度非常高，但同時也要考慮當(dāng)這部分用戶數(shù)據(jù)增長到達(dá)瓶頸后，一起聽如何拓展新的用戶群。陌生人一起聽是一個很好的方向，能夠突破熟人社交的限制，擁抱更多社交關(guān)系拓展的可能性。
為了滿足這一部分用戶的需求，陌生人一起聽的項目在決策層的支持下進(jìn)入了探索階段。這一階段主要想要知道什么樣的產(chǎn)品形態(tài)適合陌生人一起聽，是在原有的熟人一起聽的框架內(nèi)進(jìn)行拓展，還是大膽顛覆更加讓人眼前一亮呢？每位小伙伴都描述著自己的構(gòu)想，朝著不同方向探索。經(jīng)過一輪輪的方案討論，最終我們選擇了“星球”作為框架，來承載陌生人一起聽的設(shè)計。大概的構(gòu)想是這樣的：當(dāng)我在聽一首歌，感覺孤單并希望有人陪伴時?？梢酝ㄟ^一個入口進(jìn)入到一個由光點組成的星球，每個光點代表一個當(dāng)前也在聽這首歌曲的用戶。我可以展示自己的狀態(tài)，和其他的用戶進(jìn)行互動。當(dāng)我對一個用戶感興趣時，可以選擇“跟隨”TA，每當(dāng)TA去往另一個星球（也就是聽其他的歌時），我也會自動移動到那個星球，跟隨著TA一起聽。
根據(jù)上述設(shè)想，設(shè)計團(tuán)隊還產(chǎn)出了一些方案來還原大家心中的“星球”，下面是早期一個方案的動態(tài)演示，黑膠上的封面變化為一個同色系的星球，每個光點代表一個正在聽這首歌的陌生人。
我們將這個大概構(gòu)想告知開發(fā)同學(xué)后，得知需要的人力和時間成本遠(yuǎn)超我們預(yù)期。由于決策層希望能夠在一起聽的熱度未退時盡快上線陌生人版，我們不得不把這個星球版的方案暫時擱置，重新構(gòu)想在原有框架內(nèi)的設(shè)計方案。
決定在原有框架內(nèi)進(jìn)行設(shè)計后，我們就需要收攏之前發(fā)散的想法。針對主要需求進(jìn)行設(shè)計，把有限的資源用到刀刃上。最終確定的產(chǎn)品形態(tài)似乎很簡單直接，點一下按鈕，匹配一個愿意和我一起聽歌的人，但是到了視覺設(shè)計階段，就需要考慮更多的問題。
從關(guān)系的角度講。熟人之間比較親密，陌生人之間要保持一定距離，慢慢了解對方。與熟人一起聽有著穩(wěn)定的預(yù)期，但是陌生人帶來的是不穩(wěn)定，這種不穩(wěn)定可能是緣分和驚喜，也可能是騷擾和驚嚇。考慮到這種不同，做陌生人一起聽的功能就不能夠完全套用熟人的設(shè)計，而是要針對性地進(jìn)行重新思考。
首先，功能的入口能夠給用戶第一印象，我們用了一個動畫表達(dá)兩個陌生人沉浸在音樂中的含義，兩個匿名小人安靜地呆在一起，音符環(huán)繞著它們運動，暗示他們正在一起聽歌。通過這種表達(dá)幫助用戶快速了解功能，同時渲染氛圍，吸引用戶使用。
在熟人一起聽歌過程中，為了表達(dá)親密，表現(xiàn)形式上采用了耳機(jī)共享，頭像疊放的表現(xiàn)形式。但在陌生人之間，為了避免過于親密，就去掉了耳機(jī)線。為了控制社交距離，頭像不再疊著放了。陌生人的頭像也模糊處理來保持神秘感。
為了保證沒有社交意愿的用戶不被打擾，同時為了避免社交過程過于快餐化，陌生人一起聽采用了一方申請，另一方同意才可以公開身份的規(guī)則。為了配合這個規(guī)則，我們設(shè)計了陌生人揭面機(jī)制來引導(dǎo)用戶和傳達(dá)信息。匹配成功后，雙方會先隱藏身份聽歌。以此來鼓勵用戶盡量關(guān)注音樂本身，而不是純粹為了交友而進(jìn)行一起聽。當(dāng)一起聽了5分鐘后，對方的面具會小幅度上下移動，暗示用戶可以點擊。點擊對方的面具后會發(fā)出公開身份的申請，對方同意后才可以揭開面具。后續(xù)聽歌過程中，雙方就在身份公開的情況下一起聽歌。如果相處愉快，可以去對方主頁了解更多信息，甚至互關(guān)成為好友，下一次以熟人的身份邀請一起聽。
“于千萬人之中，遇見你所遇見的人”，這是我們想在匹配的過程中體現(xiàn)的緣分感。受限于開發(fā)成本，匹配動畫只能在一個小小的圓形容器里去設(shè)計。下面四個方案是前期的探索稿，主要是把人抽象成一個個點，點可能代表一種顏色、一顆星星、一個光點，點的運動表達(dá)尋找的過程。
最后選用了第四個，進(jìn)行最終優(yōu)化后的呈現(xiàn)如下。通過雷達(dá)的轉(zhuǎn)動表達(dá)尋找，浮動的光點代表一個個陌生人，最終受到召喚的那個TA飛入雷達(dá)范圍，發(fā)出代表回應(yīng)的音波后，變大形成一個蒙面的頭像。（由于時間關(guān)系，此動畫后半段僅在安卓端實現(xiàn)）
如果你仔細(xì)地用過一起聽，可能會發(fā)現(xiàn)雙紅心彩蛋，這份驚喜感也是我們希望讓雙方感受到的。當(dāng)你喜歡了一首對方也喜歡的歌曲，都會出現(xiàn)一個兩個愛心碰撞出音符的動畫，在驚喜的同時也會體驗到來自陌生人的認(rèn)同感。
至此，在這一版的一起聽中，我們希望用戶能夠獲得的感受是：“兩個陌生人雖然素不相識，不方便通過言語交流，但是彼此分享同一首歌曲，互相陪伴，產(chǎn)生共鳴，溫暖而美妙?！闭绻鲁堑脑姟堕T前》里的那句：“草在結(jié)它的種子，風(fēng)在搖它的葉子。我們站著，不說話，就十分美好”。
陌生人一起聽上線后一個月左右，我們和用研團(tuán)隊一起在杭州的幾個大學(xué)周邊進(jìn)行了用戶訪談，包括面訪和攔訪，在一線傾聽用戶的聲音。主要調(diào)研使用過一起聽用戶的使用情況、未使用過一起聽用戶對于一起聽的認(rèn)知情況，總結(jié)問題后為一起聽后續(xù)的功能迭代和運營策略提供參考和建議。
根據(jù)調(diào)研結(jié)論，我們按照用戶使用一起聽前中后的順序?qū)栴}進(jìn)行排列，分析用戶的問題和痛點，確定了之后的優(yōu)化方向。
我們結(jié)合數(shù)據(jù)表現(xiàn)和用戶調(diào)研，計劃在接下來的迭代中實現(xiàn)更多有趣的玩兒法。首先亟待解決的是用戶聊天的需求。在熟人一起聽中，用戶一般使用微信作為聊天工具，一般不會考慮在云音樂里進(jìn)行聊天。當(dāng)陌生人一起聽上線后，能夠即時地與陌生人聊天就是一個最剛需的社交需求了。雖然云音樂已經(jīng)有私信功能可以供我們進(jìn)行復(fù)用，但是我們希望能夠?qū)⒁黄鹇爼r的聊天做得足夠輕量且能夠隨時觸達(dá)，以此來提高聊天功能的使用率。
設(shè)計過程中我們結(jié)合場景進(jìn)行思考和創(chuàng)新，經(jīng)過幾輪方案的篩選，最后大家對于一個問題產(chǎn)生爭論：是進(jìn)入聊天模式才可以收發(fā)消息呢？還是直接在播放頁展示消息，隨時聊天呢？
下圖中，方案1能夠減輕打擾，但是無法在播放頁第一時間看到對方發(fā)的消息。
方案2有一定的打擾，但是能夠第一時間看到消息，讓聽歌場景和聊天場景無縫銜接。
為了減少用戶的操作步驟，把功能做得輕量化，最終選擇了更加直接的方案2，同時為了避免打擾，每一方的消息氣泡的展示數(shù)量設(shè)置上限為2條，超過2條就會收起到記錄中。
下面的視頻是聊天的簡單演示，可以發(fā)現(xiàn)氣泡通過背景模糊來區(qū)分前后內(nèi)容，氣泡的出現(xiàn)和消失不改變黑膠頁的原有結(jié)構(gòu)。
很多人用社恐來自嘲，表達(dá)自己想與人社交，但是又存在邁出第一步的障礙。陌生人一起聽是一個匿名功能，很適合希望輕度社交的用戶。在匿名的基礎(chǔ)上，我們希望在聽歌過程中，能夠為用戶帶來更多輕量的、無壓力的社交方式，幫助希望社交的用戶逐漸熟悉彼此，找到志同道合的朋友。
個人信息逐步展示就是基于上述的需求誕生的創(chuàng)新功能。隨著匿名一起聽的進(jìn)程，用戶可以逐步解鎖對方的信息，一部分是雙方的共同信息用以產(chǎn)生共鳴，另一部分是對方的特色信息用以展示自身特點。在聽歌的過程中逐漸了解對方，最后決定是否揭面進(jìn)行更深度的交流。
首先，在共同信息的提示方式的設(shè)計上，我們并沒有簡單地用一個紅點去提醒用戶。而是用頭像的發(fā)光來表示共鳴的含義，頭像四周飄散的粒子來隱喻共同信息。讓每一處的設(shè)計都能貼合一起聽的風(fēng)格。
共同信息在一個浮層上展示，我們把當(dāng)前展示的信息控制為一個，通過上下滑動來切換。除了共同信息，用戶可以直觀地設(shè)置自己的狀態(tài)，讓自己更加像一個活生生的人。
當(dāng)完成一起聽后，會有一個結(jié)果頁來記錄聽歌過程中產(chǎn)生的各種數(shù)據(jù)。舊版的結(jié)果頁用戶反饋信息不夠豐富，分享欲望不強。
新的結(jié)果頁增加了雙方的相似度、聊天條數(shù)這些數(shù)據(jù)，并且根據(jù)這些數(shù)據(jù)不同，會生成一個表達(dá)關(guān)系的成語，顏色有對應(yīng)的變化。比如我們相似度很高，并且互發(fā)了很多條聊天消息的話，就會得到一拍即合的成語和紅色的結(jié)果頁。
與陌生人度過一段聽歌之旅很容易讓人產(chǎn)生分享欲，在社交媒體搜索一起聽可以發(fā)現(xiàn)很多用戶都用結(jié)果頁配圖發(fā)帖，并訴說自己與陌生人之間的互動故事。
一起聽經(jīng)過這兩次比較大的更新后，獲得一些不錯的成績。截止至2021年12月，周末的平均DAU數(shù)據(jù)從130W提升到了200萬，增量的70W中有大約30%來自于陌生人一起聽。在2021年3月的云音樂整體滿意度監(jiān)測中，22%的用戶表示自己經(jīng)常使用一起聽，滿意度得分4.66（滿分5分），在云音樂所有主要功能中居首位。
未來，我們會繼續(xù)一起聽的創(chuàng)新腳步，還有更多的可能性等待我們探索。希望未來能夠為用戶帶來更多元的一起聽體驗。最后，我想用下面的這張圖來結(jié)尾，它是同樣主打與陌生人社交和陪伴的游戲《光遇》的一張美宣圖，是我最近無意間在它的官網(wǎng)發(fā)現(xiàn)的。當(dāng)時看到這張圖后突然發(fā)現(xiàn)它和陌生人一起聽的入口介紹圖表達(dá)方式竟然這么接近。在這個溫馨的畫面里，代表“光”的白鳥圍繞著你和我正如音樂環(huán)繞著你和我，彼此陪伴、傳遞溫暖、分享喜悅~
在產(chǎn)品設(shè)計中，當(dāng)有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。
而人類是視覺生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動態(tài)內(nèi)容吸引。
今天來聊一下頁面中常見的動態(tài)引導(dǎo)。
當(dāng)你看到這個頁面時
我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）
而當(dāng)頁面元素都賦予細(xì)節(jié)時
假如我想讓你關(guān)注到其中某個較小元素
其實只需要為它添加動態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計中的動態(tài)引導(dǎo)。
▍新功能提示 ?
當(dāng)產(chǎn)品上線新功能時，設(shè)計師們都會根據(jù)功能重要程度，來決定使用什么形式讓入口元素和其他元素區(qū)分開來。常見的有小紅點、標(biāo)簽、氣泡這類靜態(tài)點綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點擊后就會消失）。當(dāng)然，也有將上述點綴元素動態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動畫，這在很多電商產(chǎn)品的品類區(qū)經(jīng)?？梢钥吹?。
動態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對元素的注意力（與動態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動畫，因此可以持續(xù)吸引用戶注意力。
ps：據(jù)說，每當(dāng)頁面多出一個會動的元素，后臺就會多出這樣一些留言，捅了開發(fā)窩了[Doge]。
▍誘導(dǎo)用戶操作 ?
動態(tài)引導(dǎo)還常常被設(shè)計師用來強調(diào)重要內(nèi)容（有可能被產(chǎn)品、運營拿刀架脖子），來達(dá)成某些數(shù)據(jù)指標(biāo)，通過利用動態(tài)誘導(dǎo)用戶操作。
例如：在會員卡片中添加光效、在廣告中讓按鈕進(jìn)行縮放、為簽到入口圖標(biāo)設(shè)置動畫。
這些都能充分引起用戶注意，甚至提升功能點擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設(shè)計師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。
對于這些不可見的功能，在初次使用時需要進(jìn)行引導(dǎo)，才能被用戶感知與使用。
▍操作教學(xué)指引 ?
講到引導(dǎo)，還必須要提的是手勢引導(dǎo)，通過動態(tài)直觀展示不同手勢的作用，提示用戶如何與產(chǎn)品進(jìn)行交互。
這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當(dāng)你第一打開視頻時， App 會提醒你雙擊屏幕可以點贊，上下滑動可以切換視頻。
在產(chǎn)品交互設(shè)計中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動態(tài)敘述的直觀性，使得我們可以減少對復(fù)雜信息進(jìn)行大量文字描述。通過動態(tài)設(shè)計，我們可以創(chuàng)建視覺故事，這有助于將復(fù)雜信息以更簡單、清晰的方式進(jìn)行傳遞，從而幫助用戶快速完成任務(wù)。
也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開始應(yīng)用。
但是需要注意的是，上述這些大多都只在第一次使用時才會觸發(fā)。
當(dāng)然有特例，例如：
在 App Store 每次下載應(yīng)用進(jìn)行驗證時（面容解鎖的情況下），系統(tǒng)會通過動態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進(jìn)行人臉識別。
在掃碼時，弱光場景下出現(xiàn)的手電筒，通過動態(tài)引起用戶注意，指引用戶使用。
以及作為動態(tài)演示，幫助用戶理解如何使用手掌滑動截屏
如何進(jìn)行NFC感應(yīng)等等..
動態(tài)引導(dǎo)像是設(shè)計師用來控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗，有的人用它提升商業(yè)轉(zhuǎn)化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
作者：幺零三
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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è)計公司
在網(wǎng)絡(luò)購物發(fā)達(dá)的互聯(lián)網(wǎng)時代，大部分年輕人（包括小?。┰谫徺I商品前都會在各種平臺上找測評貼，其中小紅書就是代表平臺之一。
小紅書入駐了許多博主，從明星到素人，他們經(jīng)常發(fā)布筆記幫大家種草或者拔草，UGC+電商的模式也實現(xiàn)了完美的購物流程閉環(huán)，使得小紅書擁有了一大批忠誠用戶（小紅薯）。那么為了讓用戶買買買，小紅書都做對了哪些事情呢？
本篇文章將從小紅書App的界面設(shè)計和交互設(shè)計進(jìn)行分析。
一、小紅書至簡的界面設(shè)計
『色調(diào)』
小紅書色調(diào)以紅色為主，與其名稱呼應(yīng)，同時紅色受到年輕女性歡迎，與用戶的產(chǎn)品形象相吻合。
該設(shè)計還采用了女性喜愛的可愛清新風(fēng)格。
小紅書為其垂直官方帳號（穿搭薯、娛樂薯、校園薯等）也設(shè)計了可愛的卡通人物形象，為用戶打造了小紅薯表情包。
『界面』
小紅書與其它同類的競品風(fēng)格不太類似，其界面給人簡潔而又清晰的印象。這種簡潔和清晰源自對于功能設(shè)置上的克制。在Feed流上，為用戶提供最佳的信息閱讀體驗。
『Icon』
小紅書在一些內(nèi)容豐富的頁面，icon一般為線性，降低視覺感；面性的icon則會出現(xiàn)在比較醒目的地方，提醒用戶點擊；擬物風(fēng)格的icon一般為禮物圖標(biāo)等。
二、交互設(shè)計，如何做到簡單？
小紅書的整體界面比較簡潔，使用起來很簡單。首頁只有三大功能模塊，用戶操作路徑清晰。底部導(dǎo)航條之間分類明確，互不干擾，常用功能都能很快找到，不常用功能放在側(cè)邊欄中，節(jié)省了頁面空間。
小紅書的3種內(nèi)容方式
圖文：圖文筆記的瀏覽界面就是圖片與文字分開的形式，圖片左右滑動瀏覽，一般用戶會增加標(biāo)簽輔助說明。文字也只能利用圖形來增加可看性。此外在文章內(nèi)還可以增加商品鏈接，直接引導(dǎo)轉(zhuǎn)化。
視頻：短視頻的瀏覽界面與抖音非常類似了，文字說明的內(nèi)容超過一定字?jǐn)?shù)會折疊。當(dāng)然也有一些短視頻沒有的功能彈幕。右上角有分享功能，點贊、收藏和評論則在左下角。
直播：小紅書直播內(nèi)容主要是以互動為主，不同于其他的直播模式，而是以主播分享體驗向用戶推薦商品，這樣的方式更能提高用戶對商品質(zhì)量的信任程度。直播過程中用戶可以右滑進(jìn)入簡潔模式，這樣直播的彈幕以及禮物點贊特效則會隱藏。
三、小紅書的購物方式
小紅書電商體量沒有淘寶大，商城首頁很干凈使各個活動入口更加清晰，使用卡片的布局形式展示，可以有效的與輪播廣告相區(qū)分。小紅書在商品界面設(shè)計上更加清新、層次分明，讓用戶能明確操作流程。
購物模塊與筆記社區(qū)有著非常巧妙的聯(lián)系，在添加筆記時，小紅書也鼓勵用戶關(guān)聯(lián)商品訂單，如果關(guān)聯(lián)，商品購買鏈接就會顯示在筆記中，不僅縮短了用戶查找時間，也直接進(jìn)行了流量引導(dǎo)轉(zhuǎn)化。
作者：jongde 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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è)計公司
作者：菜菜不甜 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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è)計公司
本文主要從業(yè)務(wù)分析、交互體驗和設(shè)計規(guī)范三個層面進(jìn)行總結(jié)。
與C端不同，B端產(chǎn)品主要圍繞業(yè)務(wù)為核心展開，面向?qū)I(yè)的人員，有固定的業(yè)務(wù)屬性，我們只有將業(yè)務(wù)理解透徹，熟悉業(yè)務(wù)的運作流程，才能在B端設(shè)計過程中，輸出良好清晰的設(shè)計架構(gòu)，更好的解決業(yè)務(wù)問題。因此，設(shè)計師的業(yè)務(wù)分析能力在B端設(shè)計中至關(guān)重要。進(jìn)行業(yè)務(wù)分析可以從以下幾點著手：
我們可以從多方面收集業(yè)務(wù)相關(guān)的信息，包括梳理需求文檔，與業(yè)務(wù)人員溝通等，來了解行業(yè)背景、業(yè)務(wù)目標(biāo)、組織架構(gòu)，理清一些專業(yè)名詞等。業(yè)務(wù)場景理解的越深入透徹，我們才能建立起一個系統(tǒng)性的邏輯思維，對我們接下來的設(shè)計脈絡(luò)的梳理以及整體設(shè)計的把控是越有利的。
我們可以通過繪制業(yè)務(wù)流程圖，將零散的業(yè)務(wù)信息通過具象的流程圖清晰地呈現(xiàn)出來，有助于我們宏觀系統(tǒng)的了解整個功能流程，同時也能夠確保業(yè)務(wù)的標(biāo)準(zhǔn)流程都能夠走通，不會出現(xiàn)邏輯問題及功能場景的缺失。
B端用戶因其崗位角色的不同，使其具有清晰的角色權(quán)限。比如普通成員、管理員、超級管理員，分別對應(yīng)不同的權(quán)限，不同的權(quán)限背景下，其功能和業(yè)務(wù)路徑也是不同的。理清角色權(quán)限，聚焦當(dāng)前角色本身的任務(wù)流程，避免被無關(guān)的信息干擾，可以使我們的業(yè)務(wù)功能更加清晰，避免冗雜無用功能在不同角色間的穿插，有助于分解信息結(jié)構(gòu)呈現(xiàn)的復(fù)雜性。
我們知道，B端設(shè)計的核心目標(biāo)為降本增效，在交互體驗層面可以理解為降低認(rèn)知成本，提高使用效率。而B端設(shè)計的一個顯著特點就是功能、場景復(fù)雜，要達(dá)到降本增效，需要我們在交互體驗層面上注意以下幾點：
B端注重對頁面的高效操作，因此在設(shè)計的過程中要保持簡潔克制，排除過多的干擾元素，聚焦主要功能，弱化或隱藏非必要功能，保證頁面信息呈現(xiàn)輕量化，降低用戶認(rèn)知負(fù)荷。
同時，通過視覺設(shè)計，比如顏色、字號、字重、合理排版等，使頁面信息呈現(xiàn)有層次、有重點，能夠合理有效的進(jìn)行優(yōu)先級的引導(dǎo)，頁面信息呈現(xiàn)更加清晰有序，降低頁面的復(fù)雜性。
設(shè)計過程中，遵守設(shè)計規(guī)范，在視覺與交互上保持一致性至關(guān)重要。
一方面保持視覺上的一致性，包括字體、顏色、間距、結(jié)構(gòu)等，能夠使頁面信息呈現(xiàn)嚴(yán)謹(jǐn)有序，保證易讀性；另一方面，保持整個系統(tǒng)交互操作的一致性，則可以大大降低用戶的學(xué)習(xí)成本，同時還能夠提升開發(fā)效率。
B端功能交互邏輯復(fù)雜，在設(shè)計過程中，盡量保持已成標(biāo)準(zhǔn)的用戶操作習(xí)慣，尊重用戶已有的認(rèn)知，保證內(nèi)容的可理解性，可以增加用戶的熟悉度，降低學(xué)習(xí)成本。
B端的信息結(jié)構(gòu)復(fù)雜，如果將信息完全平鋪呈現(xiàn)，不僅占用頁面空間，還會大大加重用戶的認(rèn)知負(fù)擔(dān)。這就需要我們站在用戶的角度，基于用戶的行為路徑，進(jìn)行信息層級的劃分。
第一，對頁面信息進(jìn)行梳理，明確主要信息和次要信息，必要信息和非必要信息，將次要信息和非必要信息進(jìn)行隱藏、收起、刪除等，可以有效聚焦核心內(nèi)容，避免分散用戶注意力；
第二，對需要展示的主要、必要信息進(jìn)行分類歸納、信息分組，通過合理的頁面排版布局，使信息結(jié)構(gòu)清晰有序的呈現(xiàn)；
第三，注意層級步驟的拆分，讓用戶逐級獲得信息，路徑清晰，避免過多信息雜亂無序的呈現(xiàn)，增加用戶認(rèn)知負(fù)荷。
首先，我們通過預(yù)測用戶行為，在關(guān)鍵交互節(jié)點增加功能曝光，給予用戶操作建議和提示，可以幫助用戶高效流暢的完成任務(wù)目標(biāo)；其次，對用戶行為進(jìn)行預(yù)測，主動幫助用戶完成一部分操作，比如信息默認(rèn)值填充等，可以提升用戶體驗，減輕用戶的操作負(fù)擔(dān)。
B端產(chǎn)品結(jié)構(gòu)功能復(fù)雜，有使用學(xué)習(xí)的過程，如果對B端產(chǎn)品進(jìn)行大的改版升級，會讓已經(jīng)熟悉舊版本且已經(jīng)產(chǎn)生使用習(xí)慣的用戶產(chǎn)生一些不適應(yīng)感。保留舊版本返回入口，讓用戶慢慢習(xí)慣過渡到新版本，可以減小用戶學(xué)習(xí)的壓力，避免因習(xí)慣問題影響產(chǎn)品的正常使用，無論是對用戶的接受度還是對我們改版的順利落地都是一種不錯的方式。
B端系統(tǒng)龐大且復(fù)雜，建立起統(tǒng)一的設(shè)計組件和設(shè)計規(guī)范至關(guān)重要。
組件規(guī)范的建立：
第一，能夠保證交互及視覺設(shè)計的一致性，提升設(shè)計效率和降低用戶學(xué)習(xí)成本；
第二，能夠提升團(tuán)隊的協(xié)作效率，提高設(shè)計還原度，降低對接成本；
第三，組件化設(shè)計，可復(fù)用性強，能夠提升開發(fā)效率，在后期的迭代開發(fā)中，也可以進(jìn)行統(tǒng)一的更新和應(yīng)用，能夠減少開發(fā)工作量，便于維護(hù)。
設(shè)計規(guī)范比較具體，且不同的項目在規(guī)范細(xì)節(jié)方面也會有所不同，下面主要整理了一些比較常涉及且可以通用的規(guī)范和組件。
B端系統(tǒng)用戶的主流分辨率為1920、1440和1366，我們在選擇分辨率時，首先確定目標(biāo)用戶使用場景是否對分辨率有特殊要求，如果沒有特殊的場景分辨率要求，基于上下好適配性，通常會選擇1440的尺寸進(jìn)行設(shè)計。
由于B端業(yè)務(wù)場景復(fù)雜，信息量比較大，通常選用24柵格系統(tǒng)。
考慮結(jié)構(gòu)布局，根據(jù)不同的結(jié)構(gòu)布局，給出動態(tài)縮放適配方案。常用的布局為：左右布局和上下布局。
左右布局：通常是將左邊的導(dǎo)航欄固定，對右邊的工作區(qū)域進(jìn)行動態(tài)縮放。
上下布局：通常是對兩邊留白區(qū)域進(jìn)行最小值的定義，當(dāng)留白區(qū)域到達(dá)限定值之后再對中間的主內(nèi)容區(qū)域進(jìn)行動態(tài)縮放。
B端用色講究簡潔克制，使用戶能夠高效聚焦功能內(nèi)容，Ant Design上面對色彩應(yīng)用的描述為“色彩在使用時更多的是基于信息傳遞、操作引導(dǎo)和交互反饋等目的。在不破壞操作效率，影響信息的清晰傳達(dá)的這些原則之上，理性的選擇顏色是關(guān)鍵?！被谏适褂玫哪康模珺端用色主要分為主色、功能色和中性色。
主色：通常是品牌色，或者根據(jù)用戶群體、產(chǎn)品定位以及使用場景來定義，主要用在主要按鈕、選中狀態(tài)、高亮信息、空狀態(tài)等。
功能色：代表了明確的信息以及狀態(tài)，如成功、錯誤、提醒、鏈接等。功能色的使用需要遵守用戶對色彩的基本認(rèn)知。
中性色：主要用于文字、分割線、邊框、背景等。
字體：中文常用字有：Ping Fang SC、微軟雅黑、思源黑體；英文常用字體有：San Francisco UI（SF字體）、Helvetica Neue、Arial。
字號：最小字號不小于12px，常規(guī)字號大小一般為14px。輔助文字12px，正文（常規(guī)）14px，小標(biāo)題16px，標(biāo)題18px、主標(biāo)題20px，字號的選擇可根據(jù)具體情況進(jìn)行定義。
字重：字重通常選用regular、medium、semibold，分別對應(yīng)代碼中的400、500、600。
行高：行高設(shè)置一般為字號的1.5倍左右，我們也可以采用，字號+8px做行高。
(1)按照基礎(chǔ)樣式分為：主按鈕、次按鈕、虛線按鈕、文本按鈕、鏈接按鈕
(2)定義按鈕的交互狀態(tài)：Normal（默認(rèn)狀態(tài)）、Disable（禁用狀態(tài)）、Hover（懸停狀態(tài)）、Press（點擊狀態(tài)）、Loading（加載狀態(tài)）
(3)對按鈕進(jìn)行規(guī)范的制定：包括尺寸、圓角、文字、顏色、背景等
表單通常由輸入框、選擇器、單選框、多選框等組成，具有收集、校驗、提交數(shù)據(jù)的功能。
(1)表單的狀態(tài)：設(shè)計時，要明確規(guī)范表單的三種狀態(tài)
默認(rèn)狀態(tài)：即用戶輸入信息之前的狀態(tài)；
焦點狀態(tài)：即用戶正在輸入信息時的狀態(tài)；
反饋狀態(tài)：即用戶填寫信息后的校驗狀態(tài)。
(2)輸入順序：表單設(shè)計時，信息的輸入順序按照先易后難，先必填后選填，先公開信息后隱私信息進(jìn)行，可以減輕用戶填寫表單的心理壓力。
(3)對齊方式：對齊方式分為三種：頂部對齊、右對齊和左對齊。
對齊方式的選擇，需要根據(jù)瀏覽效率、屏幕空間以及標(biāo)簽長度來實際判斷，做出選擇。
首先，需要明確，瀏覽效率上，頂對齊＞右對齊＞左對齊。
然后結(jié)合屏幕空間和標(biāo)簽長度做判斷：
頂對齊：效率最高，標(biāo)簽長度可以更靈活一些，但垂直空間占用多；
右對齊：效率次之，文本字?jǐn)?shù)不可控但又不是很多時可使用右對齊；
左對齊：瀏覽時間最長，效率最慢，標(biāo)簽字?jǐn)?shù)可控或者需要用戶謹(jǐn)慎確認(rèn)信息時，可使用左對齊。
需要注意的一點是，頂對齊的標(biāo)簽布局之間要有合適的垂直間距，才能瀏覽舒適，效率更高，通常使用輸入框 50%至 75%的高度作為相鄰輸入框的垂直間距。
(4)校驗反饋：校驗反饋要具有準(zhǔn)確性和及時性。
準(zhǔn)確性：主要體現(xiàn)在，要給予用戶準(zhǔn)確清晰的錯誤原因和解決方案，以及準(zhǔn)確的錯誤位置。
及時性：表單填寫時，出現(xiàn)錯誤是難免的，為了避免用戶盲目填寫信息或者出現(xiàn)大面積報錯，可以進(jìn)行實時的校驗反饋，比如用戶輸入完成鼠標(biāo)失焦后進(jìn)行信息校驗，但反饋的前提條件是不打擾到用戶。
需要注意的一點是，成功或者錯誤等的反饋，不能僅用顏色來區(qū)分，需要加入明確的圖標(biāo)和文字來提示，以達(dá)到視覺無障礙設(shè)計。
(5)標(biāo)簽與占位符：標(biāo)簽和占位符都要盡量簡潔，避免文字過多，給用戶造成視覺負(fù)擔(dān)，信息描述應(yīng)該準(zhǔn)確、直觀且完整。
(6)表單分步：當(dāng)表單內(nèi)容多而復(fù)雜時，會讓用戶感到煩躁和不知所措，表單分步不僅有利于減輕用戶的填寫負(fù)擔(dān)，緩解焦慮情緒，還能夠明確了解表單填寫的步驟流程。
(7)數(shù)據(jù)與默認(rèn)值填充：在用戶進(jìn)行信息錄入時，可以通過后臺數(shù)據(jù)庫進(jìn)行匹配，自動填寫已知信息，也可以設(shè)置合理的默認(rèn)值，滿足多數(shù)人需要的默認(rèn)選擇，幫助用戶節(jié)省時間，快速完成表單填寫。
(8)輸入框?qū)挾扰c高度設(shè)定：輸入框的大小通常對用戶輸入信息的多少有著暗示作用，輸入框尺寸越大，用戶會認(rèn)為是可以輸入很多字的。因此，并不是所有輸入框?qū)挾纫恢?，就是好的設(shè)計，需要根據(jù)實際情況，設(shè)定輸入框?qū)挾?，但是也不能設(shè)定太多寬度，寬度太多會使表單視覺效果凌亂，寬度設(shè)定要合理適當(dāng)。
輸入框的寬度是固定的，但是高度可以根據(jù)內(nèi)容進(jìn)行自適應(yīng)調(diào)整，來保證信息的顯示完整性，給用戶以良好的體驗。
(9)選項便捷性：表單填寫要始終遵循能不填寫就不填寫，能選擇就不要輸入的原則。當(dāng)選項多于5個時，適合使用下拉框的形式進(jìn)行展示。當(dāng)選項內(nèi)容過多，超過下拉框的高度，用戶篩選比較困難時，可以考慮是否輸入更快，采用輸入的方式。
B端表格的設(shè)計本著清晰易讀的原則進(jìn)行，設(shè)計上需要我們注意以下四點：
(1)表格寬度：表格寬度的處理需要考慮自適應(yīng)問題，主要有三種方式：
a.設(shè)定表格的最小寬度，最大寬度不做限制，可以無限延伸，當(dāng)表格達(dá)到最小寬度時，做極限處理；
b.根據(jù)需要設(shè)定多個等級的最小單元格寬度，當(dāng)單元格達(dá)到最小寬度時，做極限處理；
c.也可以按照表格寬度的百分比，設(shè)置單元格寬度，或者固定部分無放大需求的單元格寬度，對剩余單元格按照百分比進(jìn)行縮放；
(2)極限處理：極限處理主要針對最小寬度，當(dāng)表格達(dá)到最小寬度時，信息展示不全的情況下，常見的處理方式有：文本信息縮略顯示、文本信息換行顯示、橫向滾動顯示。
(3)單元格高度：單元格的高度直接影響表格的高度，信息呈現(xiàn)量，以及閱讀體驗。單元格高度一般在38px~58px之間，高度太大或者太小都不利于閱讀，個人實踐建議高度為字體行高的2.5倍。
(4)對齊方式：為了提升瀏覽效率和數(shù)據(jù)的對比效率，通常采用文字左對齊，長數(shù)字右對齊的方式，空數(shù)據(jù)使用“-”填充。
總之，做好B端產(chǎn)品的設(shè)計，需要我們多思考、多總結(jié)，規(guī)范與標(biāo)準(zhǔn)不是一成不變的，設(shè)計過程中要與業(yè)務(wù)、產(chǎn)品、前端多溝通，才能夠做出體驗更好的產(chǎn)品。
作者：陳小花兒 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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è)計公司
01
什么是靈動島（Dynamic island）
2022蘋果秋季新品發(fā)布會，備受關(guān)注的新一代iPhone如期而至，此次發(fā)布會最大的亮點是iPhone 14 Pro系列一改之前「劉?！乖O(shè)計，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實時變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創(chuàng)新稱之為靈動島（Dynamic island）。
02
靈動島能做什么 / 不能做什么
靈動島其實可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。
來電
當(dāng)有來電時，靈動島會發(fā)生變化，并在后臺打電話時顯示通話時間和聲音波紋。
音樂
有點類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進(jìn)、后退等功能。
Airpods
連接AirPods后，AirPods的型號外觀和當(dāng)前電量會一起顯示。
導(dǎo)航
顯示導(dǎo)航方向和距離，并且能夠在適當(dāng)?shù)臅r候放大顯示更多導(dǎo)航信息。
Face ID
以前Face ID認(rèn)證會顯示在屏幕中間，現(xiàn)在集成于靈動島的擴(kuò)展功能之中。
充電
當(dāng)充電時，會顯示充電的狀態(tài)以及當(dāng)前電量百分比。
當(dāng)然，目前除了官方展示的這些功能以外，還會有更多的應(yīng)用方式，在此不一一列舉。但靈動島也并不是萬能的，例如會存在以下的局限性：
重度使用場景
從官方給出的樣例來看，靈動島更多的是承擔(dān)了消息通知和提醒的作用，并不適用于重度使用和復(fù)雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。
過于復(fù)雜的圖形
受限于前置物理攝像頭，靈動島這個區(qū)域并不能顯示過于復(fù)雜的圖形，并需要避開攝像頭區(qū)域，因為該區(qū)域是不能顯示任何圖像的。
軟硬件的邊界
靈動島的實際效果并不會像宣傳圖中那樣好，特別是在反光強烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發(fā)光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區(qū)分。
03
對于靈動島的各方反應(yīng)
新事物的出現(xiàn)，總會伴隨著支持和反對兩種聲音，此次靈動島的創(chuàng)新交互，自然也是褒貶不一，還需要經(jīng)受時間的考驗，因為即使是蘋果這樣的公司也難免會犯錯，比如3D Touch、MacBook上的Touch bar等。
支持方認(rèn)為「靈動島是繼劉海屏之后的又一個成功設(shè)計，甚至?xí)絼⒑Ｆ?，更受歡迎」。
「靈動島的設(shè)計非常討巧，同時也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分，首先是羅永浩第一時間發(fā)表了自己的觀點，表面上是硬贊這個創(chuàng)新，但實則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調(diào)整得跟粉底差不多」
很多的輿論認(rèn)為，靈動島的創(chuàng)新是蘋果的一種無奈和妥協(xié)，因為自從第一代iPhone革新性的使用觸摸屏之后，十多年以來手機(jī)在工業(yè)設(shè)計方面并沒有太多的創(chuàng)新，大部分廠家是在屏幕分辨率，后蓋材質(zhì)，攝像頭像素上面做文章，而蘋果作為一個工業(yè)設(shè)計創(chuàng)新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動島的創(chuàng)新，被認(rèn)為是工業(yè)設(shè)計乏力之后推動交互設(shè)計創(chuàng)新的無奈之舉。
但無論支持還是反對，前置攝像頭挖孔屏終究是一個過渡性的方案，最終會被全面屏所替代，而在這個過渡時期，很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。
04
為什么國產(chǎn)手機(jī)不做靈動島
國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉?！挂酝猓瑔螖z像頭「圓孔」和雙攝像頭「藥丸」設(shè)計都已經(jīng)非常成熟，但是為什么經(jīng)過這么多年的迭代，依然沒有創(chuàng)新呢？
思維方式的差異
國產(chǎn)手機(jī)廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎(chǔ)，把這個區(qū)域運用到極致。
缺少創(chuàng)新和引領(lǐng)者
似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強不強大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內(nèi)卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關(guān)注從0到1，因為這樣做的性價比的確不高。
市場的接受和認(rèn)可程度
當(dāng)劉海屏第一次出現(xiàn)的時候，很多用戶都在吐槽，其中也包括很多蘋果的忠實用戶，寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經(jīng)過一兩年的審美教育以及國產(chǎn)手機(jī)的跟風(fēng)之后，才慢慢的被更多用戶所接受。因此國內(nèi)的廠商很難有信心通過一己之力去改變用戶習(xí)慣，并贏得市場的認(rèn)可。我相信，蘋果發(fā)布以后，各大廠商已經(jīng)在積極的學(xué)習(xí)和模仿，新的一輪內(nèi)卷即將拉開帷幕。
即便如此，國產(chǎn)廠商也并不是完全沒有在前置攝像頭的區(qū)域努力嘗試過。例如魅族曾經(jīng)在前置攝像頭上顯示當(dāng)前電量，稱之為「環(huán)形電量」，并盡可能的使其與狀態(tài)欄的其它信息融為一體。
榮耀的通話時間膠囊和自拍膠囊，都以前置攝像頭為基礎(chǔ)做延展，可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗。
雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展，但從效果和想法來看，也與靈動島的概念比較類似。
HTC曾經(jīng)出過一款HTC U Ultra，當(dāng)然那時候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外，幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。
05
對設(shè)計師的影響
靈動島的出現(xiàn)，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做，就好比「劉海屏」首次出現(xiàn)的時候，需要設(shè)計師對全新交互邏輯、卡片行為、動畫等重新適配。那么對于「靈動島」我想需要考慮的是這幾個方面。
新的交互方式
之所以叫靈動島，就是因為它是「靈動」的，擁有不同的狀態(tài)變化，以適應(yīng)各種功能提示和操作。設(shè)計師在使用這個功能的時候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態(tài)的容器可以裝載不同的內(nèi)容，相比于以往常規(guī)的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時候，留給設(shè)計師更多的想象空間。
新的表達(dá)方式
靈動島相當(dāng)于一個永遠(yuǎn)在桌面上的島嶼，比任何App的優(yōu)先級都要高，所以會成為各個應(yīng)用的必爭之地，使用一種好的表達(dá)方式，必然能夠達(dá)到事半功倍的效果，因此也是考驗設(shè)計師在寸土寸金的區(qū)域中，通過視覺化手段表達(dá)的能力。
最后，我想蘋果的初衷是為了更好的用戶體驗，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會得到用戶的喜愛和市場的認(rèn)可。
我認(rèn)為靈動島既是一種創(chuàng)新也是一種妥協(xié)，對于工業(yè)設(shè)計硬件創(chuàng)新乏力的妥協(xié)，更是對技術(shù)發(fā)展的妥協(xié)。我也相信，真正的全面屏?xí)r代終究會到來，期待那個時候蘋果再一次給我們帶來真正意義上的，里程碑式的，創(chuàng)新！
作者：撿蘑菇的人
轉(zhuǎn)載請注明：站酷
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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è)計公司
關(guān)注趨勢本質(zhì)上就是關(guān)注未來可能存在的形態(tài)。很多營銷需求和優(yōu)秀設(shè)計趨勢是相互關(guān)聯(lián)的，兩者之間的關(guān)聯(lián)更像是一種動態(tài)的同步。
很多時候趨勢并不一定是全新的東西，它們往往是服務(wù)于當(dāng)下和未來的需求，有很多趨勢存在了一些年頭，它們在現(xiàn)在發(fā)揮著作用，但是在未來可能會發(fā)揮更大的效用。所以，當(dāng)我們在查看這些設(shè)計趨勢的時候，需要注意，它們必須是服務(wù)于用戶，服務(wù)于品牌和企業(yè)。
更多設(shè)計趨勢：
的確，極簡主義一直在某種程度上流行，但是 2022 年出現(xiàn)的新極簡主義的浪潮，比起傳統(tǒng)的極簡主義設(shè)計更加在意用戶注意力的吸引。這種新極簡主義的設(shè)計會采用更加大膽、 生動、明亮的色彩來填補留白，這種設(shè)計使得設(shè)計保持簡約的同時，更加富有調(diào)性，在簡約的框架下制造一種別樣的華麗，營造令人亢奮的氛圍。
干凈清晰、生動的新極簡主義風(fēng)格在品牌推廣的過程中也更加受歡迎，大量的留白和跳脫的視覺焦點讓整個視覺更加抓人眼球，也使得品牌給人的感知更加新鮮獨特。
新極簡主義風(fēng)格，對比度在深色主題下得到了進(jìn)一步的提升。
這種設(shè)計并不意味著傳統(tǒng)的極簡主義已經(jīng)被用戶拋棄，很多企業(yè)依然會青睞更加傳統(tǒng)的單色極簡主義設(shè)計，不過其中多少會增加一些明亮的色彩作為點綴。
從 1950 年開始，粗野主義就是年輕化、反叛、反主流、標(biāo)新立異的設(shè)計風(fēng)格。在過去的幾十年當(dāng)中，這種設(shè)計風(fēng)格一直隨著時代的發(fā)展而自我迭代，新粗野主義更加強調(diào)創(chuàng)造力、 大膽前衛(wèi)的新奇元素，而這也正好符合很多品牌對于新奇性的追求，它可以瞬間抓住用戶的注意力。不過，這種風(fēng)格的使用需要控制好程度，否則很容易失控。
粗野主義經(jīng)久不衰的秘訣是什么？是未經(jīng)打磨、粗糲而原始的素材，它讓觀看者忍不住想要改進(jìn)它，這種未完成的原始感會在情感上吸引觀眾，這在營銷上是無價的優(yōu)勢。
粗野主義在設(shè)計上并非看起來那么粗糙，相反它更加需要高度的專業(yè)性來控制它粗野的程度。設(shè)計師需要敏銳地感知到觀看者改進(jìn)地欲望，讓設(shè)計粗野而不低級，原始而不拙劣。
新粗野主義柔糅合了極簡主義和大膽地排版，它依賴看似粗野地視覺沖擊：高對比度、粗糲地陰影，撞色、 簡約的背景、不對稱的布局、 未經(jīng)修飾的照片，新粗野主義偏好基礎(chǔ)款的加粗字體，跟注重可讀性而不是舒適所制造的視覺吸引力。
這個網(wǎng)站就是一個典型的例子：
這一趨勢在絕大多數(shù)的趨勢排行榜當(dāng)中，都占據(jù)首位。隨著技術(shù)的進(jìn)步，用戶和數(shù)字媒體之間的交互正在增加，引人入勝的交互已經(jīng)不僅僅停留在響應(yīng)式設(shè)計當(dāng)中，如今它已經(jīng)開始關(guān)注心理和生理的邏輯，開始全方位地調(diào)動視覺、聽覺、 嗅覺、觸覺、味覺乃至于運動體感。
這種趨勢旨在幫助用戶體驗真實地感覺，在完成交互地基礎(chǔ)上，觸發(fā)用戶地情緒反應(yīng)和生理反應(yīng)，熱氣騰騰地餡餅視頻讓人垂涎，游戲中虛擬地對手讓人腎上腺素激增。
交互所制造地參與感，在某種程度上是實際地物理產(chǎn)品地替代物，用戶可以從不同角度來縮放查看產(chǎn)品，了解細(xì)節(jié)，選擇尺寸，挑選顏色。
交互過程中，手指和屏幕之間地觸摸交互開始變得豐富，開始變得有意味，它成為了用戶和虛擬世界之間溝通地橋梁，開始有游戲地樂趣，有更具設(shè)計感地交互環(huán)節(jié)。用戶也可以根據(jù)自己地喜好，對界面進(jìn)行更多樣的個性化處理。
具有參與感的交互是我們的未來。
2022 年是疫情開始后的第三年，隔離使得人們對于照片所呈現(xiàn)出的故事和情感，有著更為強烈的情緒反應(yīng)。在極簡主義設(shè)計當(dāng)中，富有表現(xiàn)力的人物照片是最為流行的元素之一，這類照片搭配上簡短的文字，簡練的口號，一些帶有宏大敘事特質(zhì)的文字引用，時常能夠更好地營造出故事感。
不用擔(dān)心主屏頁面太長沒人看，只要隨著用戶滾動，故事會隨之逐步展開，用戶可以在照片、 標(biāo)題、視頻、動畫和文本地指引下，看到整個故事有步驟地呈現(xiàn)。
在這當(dāng)中，富有表現(xiàn)力的人物照片是吸引用戶注意力的關(guān)鍵要素。
另外就是頁面的 Banner 的部分，強調(diào)主題和內(nèi)容的標(biāo)題文本，是用戶從屏幕上獲取的重要信息之一。
如今的用戶越來越偏好在詳細(xì)閱讀內(nèi)容之前，快速瀏覽一下全局的做法，這也使得 Scrollytelling（滾動敘事：通過滾動觸發(fā)音頻、視頻、 動畫效果的一種技術(shù)）這種漸進(jìn)式敘事方式，可以像電影一樣將故事呈現(xiàn)在用戶眼前。
Scrollytelling 適合大量的內(nèi)容呈現(xiàn)，比如對于公司和產(chǎn)品的描述，對于數(shù)據(jù)呈現(xiàn)或者認(rèn)知要求較高的內(nèi)容，它適合學(xué)習(xí)和記憶性內(nèi)容的呈現(xiàn)。
3D 圖形設(shè)計正在越來越流行，因為它確實是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異，它本身都會被認(rèn)為是有真實感的，明確的體積，精致的建模，所有的一切都令人著迷。很多時候，用戶停留在有3D元素的頁面上，是為了更細(xì)致的欣賞。
3D 圖形設(shè)計的趨勢從來都沒有減退，它正在進(jìn)入更多的領(lǐng)域，甚至進(jìn)入了品牌推廣的領(lǐng)域。3D 動畫圖標(biāo)比過去更能吸引用戶的注意力。
我們通常說的抽象插畫，指的是帶有明確幾何特征的插畫，它們被廣泛地應(yīng)用于網(wǎng)站和 APP，在社交媒體和包裝設(shè)計中也越來越多的存在。
抽象插畫之所以會如此成功，是因為它們大多有著吸引人的生動色彩和良好對比度，視覺上的美感和極簡主義的風(fēng)格特質(zhì)，它們成為視覺的焦點，為整個設(shè)計提升視覺。
抽象插畫在品牌營銷場景下的應(yīng)用也很多，它們在這個時候是貼合品牌推廣的訴求的：通過色彩和形式來吸引用戶來關(guān)注品牌的形象和名稱。
這種趨勢的特別之處是其中的文本字體元素是完全獨立的。這些文本不僅僅是用來傳遞信息的，它們還充當(dāng)著拉升頁面視覺效果的重要作用，它們結(jié)合動畫和交互，成為頁面中醒目的亮點。
超大字體的優(yōu)點在于，它和很多設(shè)計風(fēng)格是相得益彰的，加粗的大字體在極簡主義風(fēng)格的頁面上不會顯得突兀，在元素豐富的頁面上，同樣可以起到優(yōu)秀的點綴作用。這些文本內(nèi)容可以和纖細(xì)和小尺寸的元素協(xié)同，而后者則襯托出它本身的醒目。
超大文本字體的另一個好處是有效地減少網(wǎng)頁上的圖像的使用，縮短加載時間，提升移動端的可用性。
這種設(shè)計元素最重要的，是選擇易讀且符合品牌調(diào)性的字體。
這么多年來，我們看到來這么多的趨勢，很多趨勢是一以貫之持續(xù)出現(xiàn)，有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級，并且持續(xù)存在，但是最重要的，始終是那些選擇合理的方案，并且堅持改進(jìn)設(shè)計，讓趨勢服務(wù)于終端的產(chǎn)品和用戶的設(shè)計師。
讓趨勢服務(wù)于你，不要盲目地追趨勢！
作者：陳子木
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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)品設(shè)計師，無論在什么公司什么崗位，都免不了與研發(fā)團(tuán)隊進(jìn)行溝通，如果不進(jìn)行溝通就無法交付我們的設(shè)計稿，即便很成熟的團(tuán)隊也會出現(xiàn)在溝通上的問題，在產(chǎn)品研發(fā)的過程中溝通是必要的流程，為了創(chuàng)造一致的用戶體驗，設(shè)計師需要與開發(fā)人員在視覺上、交互上達(dá)到一致的想法，但是講起來簡單，說起來難，在整個過程設(shè)計師和開發(fā)都是站在不同的角度去看待問題的，我們思考的如何達(dá)到美觀的界面、流暢的交互等問題，而開發(fā)關(guān)心的是做這件事我需要花費多長時間，實現(xiàn)難度如何等等，首先目標(biāo)就不在同一個維度，那么必然會造成我們在對接的時候出現(xiàn)掰扯的問題，最后耽誤的都是雙方的時間，更嚴(yán)重點頁面最后的體驗也沒有達(dá)到一致。
任何團(tuán)隊都會出現(xiàn)設(shè)計師與開發(fā)脫節(jié)的問題很常見，遇見什么問題解決什么問題，畢竟人與人的性格、溝通方式等都是不同的。
我們只需要在不同的流程里去做不同的事情就可以避免這些問題了，對于任何設(shè)計師基本都會適用，往下看～
1. 產(chǎn)品信息文檔確認(rèn)
在接到一個需求的時候產(chǎn)品經(jīng)理會通知上下游進(jìn)行需求的評審，這時候一般會是產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)三個組進(jìn)行需求的評估，具體的需求評審在本章就不細(xì)講，我們此次主要講設(shè)計師與開發(fā)相關(guān)的信息同步。
在評審過程中產(chǎn)品經(jīng)理會把需求背景、需求目標(biāo)等相關(guān)信息同步給相關(guān)的人員，作為設(shè)計師這時候就要關(guān)注需求目標(biāo)，這個目標(biāo)不僅是產(chǎn)品經(jīng)理的目標(biāo)，也是整個項目的目標(biāo)，所以與每個人都相關(guān)，需求目標(biāo)清晰后期推動開發(fā)的時候才會有依據(jù)。
評審會議結(jié)束后，產(chǎn)品經(jīng)理會同步期望上線時間，如果是常規(guī)需求，會當(dāng)時就評估出設(shè)計時間、開發(fā)時時間，我們設(shè)計師這時候就要關(guān)注這些時間，因為我們通過上線時間就可以估算開發(fā)節(jié)奏，給我們后期的修改以及臨時添加的一些動效制作時間會留出充裕的時間。
設(shè)計評審流程細(xì)節(jié)本章不進(jìn)行細(xì)節(jié)講解，本章重點講與開發(fā)對接。
近期我在公司做了一個商業(yè)化的直播項目需求，由于產(chǎn)品方?jīng)]有過多的產(chǎn)研經(jīng)驗（后面才知道），在項目前期雖然進(jìn)行了評審，但是評審的參與人員沒有拉上我，等到需求給到我的時候，我順便問了一下才知道已經(jīng)評審?fù)炅耍@對于我來講是沒辦法進(jìn)行設(shè)計輸出的。
第一我不知道評審過程中開發(fā)的排期時間，以及測試時間，如果研發(fā)開始開發(fā)的時間與設(shè)計稿交付時間有沖突那么就是影響上線節(jié)奏。
第二涉及的交互操作產(chǎn)品經(jīng)理是不清楚的，有沒有哪些地方需要加復(fù)雜的交互產(chǎn)品也是同樣不清楚，那么開發(fā)就會默認(rèn)這是常規(guī)的交互，如果過程中添加那將會影響開發(fā)進(jìn)度。
第三流程上不符合要求，期間如果有關(guān)鍵性信息沒有達(dá)到共識，那將會釀成很嚴(yán)重的后果。
面對這種已經(jīng)發(fā)生的事情，如果重新拉個會評審一次會耽誤大家的時間，很多人是不愿意的，但是呢我也不能單聽產(chǎn)品一方面的溝通，因為很多細(xì)節(jié)他是不清楚的（產(chǎn)品經(jīng)驗較少），所以當(dāng)時我的處理方法呢是我先通過產(chǎn)品給出的上線時間，然后與前端同學(xué)單獨確認(rèn)一下，這樣至少保證上線時間是同步的，至于其他的細(xì)節(jié)我當(dāng)時是利用設(shè)計評審的方式同步給開發(fā)交互邏輯、動效方式等。
此次這個需求呢本身不大是在舊版的基礎(chǔ)上優(yōu)化功能，理論上不需要走設(shè)計評審流程，但是因為當(dāng)時沒有通知參加評審導(dǎo)致很多信息不同步，而我需要傳達(dá)給開發(fā)的東西也不能在后期在告訴他們，所以我利用設(shè)計評審流程把一些交互信息同步給開發(fā)。
2. 設(shè)計圖準(zhǔn)備
在設(shè)計稿完成后，如果是小需求一般是直接交付給研發(fā)，如果是大需求一般會進(jìn)行設(shè)計評審，主要評審維度是設(shè)計稿是否與產(chǎn)品文檔同步，設(shè)計目標(biāo)是否符合產(chǎn)品目標(biāo)等等，其次如果有復(fù)雜交互效果、設(shè)計細(xì)節(jié)、組件復(fù)用情況也需要與研發(fā)對齊。
若是直接交付研發(fā)，我們需要提前把設(shè)計稿內(nèi)涉及的切圖、圖層間距、動效使用區(qū)域等關(guān)鍵信息提前準(zhǔn)備好，避免在開發(fā)過程中臨時進(jìn)行補充，影響開發(fā)節(jié)奏。
在設(shè)計稿內(nèi)的切圖，我們要提前與研發(fā)溝通，切圖的范圍和形式，最后把設(shè)計稿傳入公司統(tǒng)一使用的協(xié)作網(wǎng)站，如藍(lán)湖、即時設(shè)計等平臺，大公司會有自己的協(xié)作平臺。
3. 確定設(shè)計規(guī)范組件
講個自己的踩坑案例，還是商業(yè)化的那個需求，由于為了商業(yè)化賦能，產(chǎn)品的需求文檔并沒有按照規(guī)范組件進(jìn)行設(shè)計，但是由于產(chǎn)品文檔標(biāo)注的不清楚，在設(shè)計過程中不斷與產(chǎn)品進(jìn)行溝通，最后結(jié)果當(dāng)然也是無法復(fù)用組件，當(dāng)時我就把組件規(guī)范修改了，重點是研發(fā)不知道，我當(dāng)時想的是研發(fā)通過產(chǎn)品文檔應(yīng)該會了解到，事實確實我大意了，后面就導(dǎo)致組件方面我與研發(fā)進(jìn)行了相愛相殺，通過自己的以身作則我勸大家不要忽略任何一個細(xì)節(jié)！
設(shè)計規(guī)范組件在設(shè)計前就需要進(jìn)行確認(rèn)，項目是否有存留的規(guī)范組件，如果有，需要在設(shè)計前以及設(shè)計中去確認(rèn)哪些模塊是否可以調(diào)用，開發(fā)是否已經(jīng)將組件寫入代碼中，如果不了解這些情況貿(mào)然的設(shè)計，那在對接過程中會出現(xiàn)修改設(shè)計稿的風(fēng)險。
如果是創(chuàng)新項目并且沒有相關(guān)的設(shè)計規(guī)范和組件，我們則需要在設(shè)計前就把規(guī)范組件的時間給算到需求內(nèi)，一個產(chǎn)品的規(guī)范組件，決定著后續(xù)產(chǎn)品是否嚴(yán)謹(jǐn)、項目研發(fā)效率等等，因為規(guī)范組件不止是設(shè)計師的事情，還是團(tuán)隊研發(fā)比較關(guān)注的事情，研發(fā)們在代碼里同樣需要進(jìn)行規(guī)范的組件復(fù)用。
4. 輸出設(shè)計文檔
當(dāng)在做一些在舊版的產(chǎn)品頁面上優(yōu)化的需求時，還需要輸出對應(yīng)設(shè)計文檔，給前端和測試看，設(shè)計文檔需要寫清楚設(shè)計稿優(yōu)化的點，例如圖標(biāo)的細(xì)節(jié)優(yōu)化、文字的字號優(yōu)化、色彩優(yōu)化、界面交互等等細(xì)節(jié)。
如果涉及到一些頁面的交互，我們在提供設(shè)計稿的同時需要把具象的交互文件單獨交給開發(fā)，不要奢望前端大佬們能腦補出頁面之間的交互，我們不及時提供的話，后期修改研發(fā)可能會直接拒絕，并且口吐芬芳～（最簡單的找到競品頁面演示給研發(fā)看）。
我的方法
前端在看我們設(shè)計稿時如果不是結(jié)構(gòu)上的修改，他們不會去關(guān)注這些細(xì)節(jié)的點，而給測試看的目的是，有些公司測試會幫我們進(jìn)行走查，如果不出設(shè)計文檔測試沒辦法進(jìn)行對比（測試提 bug 比設(shè)計師提 bug 更具有一些權(quán)威性）。
這里看一下我工作中輸出的設(shè)計文檔，我會把需求的背景、目標(biāo)在設(shè)計文檔上強調(diào)一下，再添加上設(shè)計目標(biāo)，設(shè)計目標(biāo)為了需求目標(biāo)去賦能，這樣在文檔開始就與研發(fā)達(dá)成共識，讓研發(fā)是帶著共同完成目標(biāo)的態(tài)度去看設(shè)計文檔，便于我們后續(xù)推動，其次放上頁面之間的說明。
5. 交付開發(fā)
最后總結(jié)一下，我們要交付給開發(fā)什么東西，首先是基本的設(shè)計稿，包括切圖、間距、動效文件，其次是設(shè)計文檔，包括需求背景、需求目標(biāo)、設(shè)計目標(biāo)、設(shè)計修改點說明。
1. 不要頻繁修改
在交付設(shè)計稿后（基本設(shè)計圖、設(shè)計文檔），我們就要避免頻繁修改，頻繁的修改會導(dǎo)致設(shè)計稿來回更新，對開發(fā)造成一種困惑，最后在測試的時候，開發(fā)同學(xué)容易寫亂，另一方面工作過的設(shè)計師都應(yīng)該經(jīng)歷過，我們在開發(fā)的過程中修改設(shè)計稿，大部分的開發(fā)都會帶點情緒，甚至不給我們改，這其實是因為大多開發(fā)的代碼寫的是比較規(guī)范統(tǒng)一的，如果中途進(jìn)行修改可能會影響開發(fā)同學(xué)的代碼規(guī)范，就像我們在完成一個設(shè)計稿的時候，產(chǎn)品經(jīng)理突然改變需求，我們也是擔(dān)心做好的設(shè)計稿因為修改而被打亂。
如果實在需要修改，一定要說明原因，而不是突然一個想法覺得這里設(shè)計不合適就進(jìn)行修改（產(chǎn)品需求修改除外），我們要換位思考，具有同理心去工作，并且讓開發(fā)同學(xué)感受到我們是在幫助他們減少工作量，這樣在后續(xù)的一些需求中，我們的對接會很順暢。
2. 重要信息及時通知
上面說的是站在設(shè)計師的角度去修改，還有一種情況是研發(fā)在開發(fā)過程中，作為設(shè)計師的我們突然收到產(chǎn)品經(jīng)理的修改建議，這時候我們需要及時的同步給開發(fā)，或者給開發(fā)同事達(dá)成共識信息，因為很多時候，產(chǎn)品經(jīng)理讓我們修改的時候往往不會通知開發(fā)，因為對于產(chǎn)品經(jīng)理而言就是一個小的修改，例如改個位置、改個顏色等等，但不管是對我們還是對于開發(fā)其實都是比較重要的，不及時同步就會出現(xiàn)不好的結(jié)果，如果在測試階段沒有發(fā)現(xiàn)問題，上線后就會造成設(shè)計師背鍋的情況。
我曾經(jīng)在做一個頁面改版的時候，就遇到類似的問題，當(dāng)時產(chǎn)品找到我說改一個地方的交互，并且我也覺得那個交互方式應(yīng)該改，當(dāng)時的我以為產(chǎn)品經(jīng)理會同時告訴開發(fā)修改的地方，但是直到項目上線后開發(fā)都沒修改那個地方的交互，本來這個修改點是個小事情，誰知剛好那一個版本被用戶吐槽那個頁面的交互，結(jié)果可想而知領(lǐng)導(dǎo)拉個會議開始復(fù)盤，為什么沒有改，索性大家沒有互相甩鍋的情況，產(chǎn)品經(jīng)理說沒有同步到開發(fā)，而我也是幫產(chǎn)品兜了一下說更新設(shè)計稿沒有告訴開發(fā)，這個事情原本是個很小的事情，只需要我順口同步給開發(fā)，就能夠避免的，就因為我沒有及時同步，造成用戶的反饋，影響了產(chǎn)品的體驗。
所以各位設(shè)計師工作中如果遇到類似的事情一定要及時同步！
3. 統(tǒng)一需求目標(biāo)
開始講到過，在需求評審的時候要與開發(fā)對齊目標(biāo)，為什么需要對齊目標(biāo)，因為一個項目如果目標(biāo)不對齊，那么每個人都會站在自己的角度去做這個需求，設(shè)計師思考的是通過設(shè)計的手段，去幫助產(chǎn)品完成目標(biāo)，如果設(shè)計稿上的復(fù)雜效果較多的時候，開發(fā)則會考慮你為什么這么做，這么做開發(fā)成本非常高等等，這也是說為什么我們開始就講要輸出設(shè)計文檔，如果這一切都不存在的話就會導(dǎo)致開發(fā)是帶著疑問寫我們的頁面，如果過程中在修改需求什么的，那我們跟開發(fā)又要相愛相殺了。
我的設(shè)計方式是通常是在產(chǎn)品評審階段就與開發(fā)明確講清楚，我大概要做什么樣的效果，什么的交互形式，預(yù)計什么時候會交初步方案，中途也可能會有修改的點等等，提前讓開發(fā)有個心理預(yù)期，避免在開發(fā)過程中產(chǎn)生抵抗情緒。
我的經(jīng)驗
4. 輸出交互動畫
如果在前期沒有時間進(jìn)行動效設(shè)計并沒有關(guān)系，研發(fā)在開發(fā)過程中可以在把動效方面給空出來后續(xù)寫，這里講的交互動畫分為兩種，一種是展示的動畫，一種是 ui 中的動效。
展示動畫
目的是為了告知開發(fā)頁面運動的軌跡，在 1-4 中講到我個人用的方法，大家如果是剛對接研發(fā)的話，建議還是輸出完整的交互動畫，這里推薦一些工具 AE、Principle、Pixso、Figma 等。
AE：大家就比較熟悉了，經(jīng)典的動效繪制軟件，什么樣的效果都能實現(xiàn)，但是使用成本比較高（不建議）
Principle：國外的一款交互軟件，制作頁面交互很方面，可以直接導(dǎo)入 figma 和 sketch，由于是國外軟件需要使用英文界面，但是國內(nèi)也有漢化版。
Pixso：國產(chǎn)最新的設(shè)計軟件與 figma 類似，做交互的方式是使用多個頁面添加熱區(qū)進(jìn)行使用，具體體驗如何還不清楚（可以用用）
Figma：設(shè)計軟件目前的天花板，流暢的體驗，支持頁面動畫設(shè)計，但是需要安裝插件才可以（建議使用）
動效文件
這個比較重要！我們一定要與研發(fā)同事溝通好，產(chǎn)品內(nèi)使用什么樣格式的動效文件，統(tǒng)一后能提升后續(xù)的開發(fā)效率，動效格式使用亂套的話，后續(xù)我們做更新迭代時做替換會很麻煩，開發(fā)也同樣如此，這里推薦幾種動效格式文件，分別是 GIF、json、pag、svga 這 4 種。
GIF：傳統(tǒng)的動效文件格式，優(yōu)點是學(xué)習(xí)成本低，第一個缺點是內(nèi)存大，圖片容易失真模糊，他的原理就是把每一幀的圖片融合在一起，最后形成動畫，圖片越多，內(nèi)存越大，第二個缺點是占用產(chǎn)品資源，當(dāng)內(nèi)存過高時，在加載時會出現(xiàn)卡頓。
Json：該文件格式是通過 Lottie 實現(xiàn)的，是 Airbnb 開發(fā)的一款能夠為原生應(yīng)用添加動畫效果的開源工具，它的優(yōu)點就是內(nèi)存小、無需加載、動畫不會失真，缺點呢就是支持得動畫方式?jīng)]有 gif 那么全面，以及使用成本也比較高。
具體使用步驟是需要我們裝 ae 插件 bodymovin，通過插件導(dǎo)出 json，常遇見的問題就是在導(dǎo)出漸變動畫時，漸變效果會消失，這是因為我們 ae 安裝得都是中文版，而該插件更多的適配是英文版，不過沒關(guān)系這里可以把漸變效果的名字改為 gradient fill1 就可以了，如果多個漸變的話我們更改后面序列號就可以，比如 gradient fill1、gradient fill2、gradient fill3…，這里把漢化插件鏈接也給大家找到了。
網(wǎng)站鏈接：https://zdo.fun/?p=557
我的經(jīng)驗
Pag：pag 是騰訊研發(fā)的一種技術(shù)文件，最初主要用于游戲動畫和直播動畫，用來解決復(fù)雜的動畫效果，目前在 ui 頁面中運用也比較多，優(yōu)點是占比內(nèi)存比 json 文件更小，支持的動畫方式也更豐富，運行時可編輯，缺點是適配原生有些問題，壓縮位圖時會出現(xiàn)不顯示，這個軟件目前還在完善階段，我曾經(jīng)也使用過，后來因為適配問題就放棄了，感興趣的大家可以通過下面鏈接下載。
網(wǎng)站鏈接：https://pag.io/docs/install.html
svga：該文件格式的強大之處在于可以完整的將位圖轉(zhuǎn)換成二進(jìn)制代碼，并且內(nèi)存占比較于 json 更小，播放資源占用更低，并且技術(shù)上相對穩(wěn)定（建議使用）
網(wǎng)站鏈接：https://svga.io/designer.html
我們看下 svg 實現(xiàn)的效果
最后，我們一定要統(tǒng)一產(chǎn)品內(nèi)使用的動效文件格式，這樣既方便我們，也方便開發(fā)，讓開發(fā)看到我們設(shè)計師的嚴(yán)謹(jǐn)性，便于后續(xù)合作。
1. 跟進(jìn)開發(fā)進(jìn)度
作為設(shè)計師，我們需要實時了解開發(fā)的進(jìn)度，這樣能夠保證我們在過程中掌握自己的設(shè)計節(jié)奏，什么時間交給開發(fā)動效文件，如果進(jìn)行修改也可以不影響上線時間（當(dāng)然不建議這樣做），那么具體需要怎么跟進(jìn)呢，大概分為以下幾個維度。
時間進(jìn)度跟進(jìn)：
設(shè)計師可以時不時的問一嘴，是否能按照正常的計劃時間節(jié)點提測（正常需求提交后，開發(fā)會給出開發(fā)排期，盡量按照時間排期走，否則項目進(jìn)度會變得很不可控）。
如果開發(fā)反饋時間會有延期風(fēng)險，那設(shè)計師第一時間就要了解原因，以及預(yù)計延期多久，然后自身評估以下對設(shè)計上是否有影響。
需求變更跟進(jìn)：
一般開發(fā)過程中，或多或少都會出現(xiàn)一些需求調(diào)整/變更的點，那么其中就會涉及設(shè)計上的改動，改動小的話產(chǎn)品經(jīng)理有時候會直接告訴我們，并不會告訴開發(fā)，這時候如果身為設(shè)計師的我們要及時通知開發(fā)，并說明原因（避免爭論）。
并且，需求變更后，需要和開發(fā)評估新的項目上線時間點，站在我們或者產(chǎn)品角度理解有時候我們認(rèn)為的修改，對于開發(fā)來講是耗費時間較長的，需要我們注意是否會影響上線時間。
交互動效實現(xiàn)跟進(jìn)：
在 2-4 中講到我們要輸出交互動畫，雖然我們輸出的動畫很直觀，以及動效文件也完整，但是避免不了認(rèn)知上的偏差，有時候開發(fā)會按照技術(shù)難度以及自身理解去完整交互效果，我們中途要隨時跟進(jìn)了解，避免開發(fā)在錯誤的路上越走越遠(yuǎn)。
測試跟進(jìn)：
及時了解該需求是否已經(jīng)提測、哪些還未提測，若到了提測時間的功能未進(jìn)入測試，可以詢問產(chǎn)品或開發(fā)什么原因，這樣對項目或設(shè)計師都是負(fù)責(zé)的。
另外一點是我們設(shè)計師需要在提測階段介入 UI 走查，因為各個公司或者項目測試時間有長有短，所以我們要及時把 UI 走查工作介入進(jìn)去，給開發(fā)預(yù)留出修改時間，有的小公司不重視 UI 走查流程，這里我們就可以自驅(qū)進(jìn)行走查，主動找測試同學(xué)了解提測時間，及時走查，保證頁面還原度。
2. 設(shè)計走查
走查是 UI 工作中最為重要的工作，它決定著產(chǎn)品上線后能否完美的展現(xiàn)給用戶，下面我大致把走查的流程以及范圍給大家梳理下。
創(chuàng)建走查文檔
在 UI 走查階段，我們首先需要建立走查文檔便于開發(fā)瀏覽解決，走查文檔主要包含日期、版本、項目名稱、模塊、端口、問題描述、修改狀態(tài)、圖片標(biāo)注，這樣一方面能夠讓問題更加詳細(xì)，體現(xiàn)設(shè)計師的專業(yè)度，一般我是使用在線表格去建立走查文檔，當(dāng)然這個看每個公司所使用的協(xié)作平臺。
開通手機(jī)權(quán)限
一般在走查移動端產(chǎn)品時，安裝測試包需要開通賬號權(quán)限，這里可以找公司的開發(fā)或者測試同事給開通，避免影響走查效率。
走查范圍
分為基礎(chǔ)走查、細(xì)節(jié)走查、適配走查
基礎(chǔ)走查包含字體、顏色、圖標(biāo)、間距、對齊方式等具體可根據(jù)產(chǎn)品形態(tài)進(jìn)行延伸，其中間距走查比較費時間，需要我們通過測試機(jī)截圖后，按照倍數(shù)縮放到源文件內(nèi)進(jìn)行測量，測試機(jī)分辨率需要保證與設(shè)計稿一致，否則測量不準(zhǔn)確，例如設(shè)計圖是 375*812，以 ios 為例測試機(jī)則需要使用與 375*812 分辨率相同的尺寸測試。
細(xì)節(jié)走查包含字體截字、按壓狀態(tài)、組件內(nèi)容、交互狀態(tài)
適配走查包含關(guān)鍵信息是否超出屏幕、是否出現(xiàn)擠壓、是否出現(xiàn)重疊、識別度是否清晰
3. 避免添加復(fù)雜交互
在走查階段如果我們發(fā)現(xiàn)部分的交互效果不太理想，并未達(dá)到預(yù)期，我們可以與開發(fā)進(jìn)行溝通是否可以修改，或者添加新的交互效果，因為在這個階段我們重新設(shè)計或者定義一個新的交互動效的話，會增加非常大的開發(fā)工作量，可能也會與開發(fā)產(chǎn)生爭吵，我們在這個時期盡量避免這個問題，如果實在沒有解決辦法的時候再去添加新的交互。
我在工作中，如果遇到這種事情，會分兩點考慮這個事情。
第一評估下當(dāng)下這個交互效果是否會影響用戶體驗，如果影響用戶體驗我會要求開發(fā)必須 100%還原，當(dāng)然我會講述清楚為什么改，避免讓開發(fā)產(chǎn)生情緒抵抗。
第二是如果不影響用戶體驗，但是還原度沒有達(dá)到預(yù)期，我同樣會先找開發(fā)進(jìn)行溝通，例如按照交互稿還原會有什么困難，是時間上的困難還是技術(shù)上的困難，時間上如果困難我會溝通好下一期必須還原到位，技術(shù)上困難我一般會修改交互形式，盡量保證上線后給用戶展現(xiàn)的是完美的狀態(tài)。
4. 數(shù)據(jù)追蹤
作為設(shè)計師在需求上線后并不代表需求就結(jié)束了，我們還需要追蹤數(shù)據(jù)情況是好是壞，為什么我們設(shè)計師要去追蹤這個數(shù)據(jù)呢，追蹤數(shù)據(jù)是為了讓我們在工作中提升自己的設(shè)計價值，隨著現(xiàn)在互聯(lián)網(wǎng)發(fā)展逐漸飽和，那么企業(yè)對于各個崗位的要求也跟互聯(lián)網(wǎng)初期不一樣，以前我們只需要畫畫圖交付就可以了，但是現(xiàn)在的企業(yè)更看重的是綜合能力，說簡單點就是做 UI 的人很多，優(yōu)秀的 UI 一樣很多，那么我們就得被迫提升核心競爭力否則就是被淘汰。
而追蹤數(shù)據(jù)其實就是增加我們得核心競爭力，同時也是能夠體現(xiàn)自己設(shè)計能力的一項內(nèi)容，設(shè)計最終是為商業(yè)而服務(wù)的，但我們不能嘴上說說，而是要拿出實際的行動，這個行動就是數(shù)據(jù)，我們的設(shè)計如何為數(shù)據(jù)賦能的，如何幫業(yè)務(wù)達(dá)到目標(biāo)等等，數(shù)據(jù)如何分析是個很龐大的體系這里只講下我們身為設(shè)計師為什么需要追蹤數(shù)據(jù)。
簡單講下工作中數(shù)據(jù)解析的案例。
下面是我做的一個直播商業(yè)化改版需求，改版背景呢是直播業(yè)務(wù)由原先的為 c 端用戶賦能改為，為 b 端企業(yè)賦能，通過與企業(yè)合作而產(chǎn)生價值，那么基于這個直播形態(tài)肯定是需要變化的，需求目標(biāo)由原先的「用戶收益」改為「企業(yè)收益」，新的目標(biāo)具體為提升企業(yè)品牌曝光點擊、互動、預(yù)約人數(shù)、提升直播在企業(yè)客戶測的感知收益。
案例
基于這個目標(biāo)，其實不難發(fā)現(xiàn)，目標(biāo)已經(jīng)從用戶側(cè)改為大客戶，更多的是為企業(yè)去賦能，頁面的結(jié)構(gòu)肯定需要進(jìn)行變化的，左邊的圖呢是改版之前的，右邊的是改版之后的，那么我當(dāng)時的思路呢其實就是基于數(shù)據(jù)方面去進(jìn)行優(yōu)化。
整體：產(chǎn)品策略添加了二級浮窗用來承載更多內(nèi)容。
直播介紹：首先舊版策略是直播介紹對于用戶而言并不重要，用戶只需要通過看到直播標(biāo)題就能夠了解大致直播內(nèi)容，更多是以引導(dǎo)形式存在，所以信息外漏較少，而新的策略是講企業(yè)介紹默認(rèn)展示在二級浮窗內(nèi)，用戶可選擇關(guān)閉，提升企業(yè)感知。
投遞簡歷：舊版策略是需要側(cè)重用戶投遞率，因此在預(yù)約界面就展示入口，而新的策略是需要給企業(yè)強化觀看人數(shù)、預(yù)約人數(shù)從而提升客戶價值，基于這一點，我當(dāng)時是通過數(shù)據(jù)后臺看了下預(yù)約頁面的點擊數(shù)據(jù)，發(fā)現(xiàn)點擊率最最高的是「投遞簡歷」入口，而「預(yù)約直播」入口點擊率相對較低，因此把投遞簡歷入口調(diào)賬到浮窗 tab 區(qū)域，降低層級，讓預(yù)約直播成為視覺焦點，而上線后數(shù)據(jù)也是符合預(yù)期。
企業(yè)關(guān)注：將企業(yè)名稱與關(guān)注結(jié)合并且放大，提升關(guān)注量，強化企業(yè)品牌感知和數(shù)據(jù)感知，關(guān)注與預(yù)約直播兩者無論數(shù)據(jù)高低，都是符合企業(yè)目標(biāo)，從而便于業(yè)務(wù)人員與企業(yè)進(jìn)行合作溝通。
從我這個案例中我們能清楚看到，基本上任何需求都是可以通過數(shù)據(jù)的維度，進(jìn)行優(yōu)化，并且通過量化指標(biāo)提升設(shè)計價值，無論對公司還是個人都有很大收益，并且我們追蹤數(shù)據(jù)也便于后續(xù)我們與開發(fā)對接時，可以通過數(shù)據(jù)維度去促進(jìn)我們設(shè)計上的修改、完善等工作，這也是為什么說我們需要對每個需求都要進(jìn)行數(shù)據(jù)追蹤。
無論是對接前、對接中、對接后，在哪個階段都需要我們認(rèn)真對待，熟知這些細(xì)節(jié)后，才能更好的與開發(fā)合作，進(jìn)行項目推進(jìn)，優(yōu)秀的設(shè)計師不僅是專業(yè)和技術(shù)上的成熟，還需要有協(xié)作上下游的能力，在很多團(tuán)隊中設(shè)計師跟開發(fā)都會面臨不一樣的挑戰(zhàn)最終可能會因為某些問題發(fā)生沖突，我們需要減少這樣的沖突。
作者：愛吃貓的魚
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(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è)計公司
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn