01
什么是靈動(dòng)島（Dynamic island）
2022蘋果秋季新品發(fā)布會(huì)，備受關(guān)注的新一代iPhone如期而至，此次發(fā)布會(huì)最大的亮點(diǎn)是iPhone 14 Pro系列一改之前「劉海」設(shè)計(jì)，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實(shí)時(shí)變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創(chuàng)新稱之為靈動(dòng)島（Dynamic island）。
02
靈動(dòng)島能做什么 / 不能做什么
靈動(dòng)島其實(shí)可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。
來電
當(dāng)有來電時(shí)，靈動(dòng)島會(huì)發(fā)生變化，并在后臺(tái)打電話時(shí)顯示通話時(shí)間和聲音波紋。
音樂
有點(diǎn)類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進(jìn)、后退等功能。
Airpods
連接AirPods后，AirPods的型號(hào)外觀和當(dāng)前電量會(huì)一起顯示。
導(dǎo)航
顯示導(dǎo)航方向和距離，并且能夠在適當(dāng)?shù)臅r(shí)候放大顯示更多導(dǎo)航信息。
Face ID
以前Face ID認(rèn)證會(huì)顯示在屏幕中間，現(xiàn)在集成于靈動(dòng)島的擴(kuò)展功能之中。
充電
當(dāng)充電時(shí)，會(huì)顯示充電的狀態(tài)以及當(dāng)前電量百分比。
當(dāng)然，目前除了官方展示的這些功能以外，還會(huì)有更多的應(yīng)用方式，在此不一一列舉。但靈動(dòng)島也并不是萬能的，例如會(huì)存在以下的局限性：
重度使用場景
從官方給出的樣例來看，靈動(dòng)島更多的是承擔(dān)了消息通知和提醒的作用，并不適用于重度使用和復(fù)雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。
過于復(fù)雜的圖形
受限于前置物理攝像頭，靈動(dòng)島這個(gè)區(qū)域并不能顯示過于復(fù)雜的圖形，并需要避開攝像頭區(qū)域，因?yàn)樵搮^(qū)域是不能顯示任何圖像的。
軟硬件的邊界
靈動(dòng)島的實(shí)際效果并不會(huì)像宣傳圖中那樣好，特別是在反光強(qiáng)烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發(fā)光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區(qū)分。
03
對于靈動(dòng)島的各方反應(yīng)
新事物的出現(xiàn)，總會(huì)伴隨著支持和反對兩種聲音，此次靈動(dòng)島的創(chuàng)新交互，自然也是褒貶不一，還需要經(jīng)受時(shí)間的考驗(yàn)，因?yàn)榧词故翘O果這樣的公司也難免會(huì)犯錯(cuò)，比如3D Touch、MacBook上的Touch bar等。
支持方認(rèn)為「靈動(dòng)島是繼劉海屏之后的又一個(gè)成功設(shè)計(jì)，甚至?xí)絼⒑Ｆ?，更受歡迎」。
「靈動(dòng)島的設(shè)計(jì)非常討巧，同時(shí)也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分，首先是羅永浩第一時(shí)間發(fā)表了自己的觀點(diǎn)，表面上是硬贊這個(gè)創(chuàng)新，但實(shí)則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調(diào)整得跟粉底差不多」
很多的輿論認(rèn)為，靈動(dòng)島的創(chuàng)新是蘋果的一種無奈和妥協(xié)，因?yàn)樽詮牡谝淮鷌Phone革新性的使用觸摸屏之后，十多年以來手機(jī)在工業(yè)設(shè)計(jì)方面并沒有太多的創(chuàng)新，大部分廠家是在屏幕分辨率，后蓋材質(zhì)，攝像頭像素上面做文章，而蘋果作為一個(gè)工業(yè)設(shè)計(jì)創(chuàng)新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動(dòng)島的創(chuàng)新，被認(rèn)為是工業(yè)設(shè)計(jì)乏力之后推動(dòng)交互設(shè)計(jì)創(chuàng)新的無奈之舉。
但無論支持還是反對，前置攝像頭挖孔屏終究是一個(gè)過渡性的方案，最終會(huì)被全面屏所替代，而在這個(gè)過渡時(shí)期，很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。
04
為什么國產(chǎn)手機(jī)不做靈動(dòng)島
國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉?！挂酝?，單攝像頭「圓孔」和雙攝像頭「藥丸」設(shè)計(jì)都已經(jīng)非常成熟，但是為什么經(jīng)過這么多年的迭代，依然沒有創(chuàng)新呢？
思維方式的差異
國產(chǎn)手機(jī)廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎(chǔ)，把這個(gè)區(qū)域運(yùn)用到極致。
缺少創(chuàng)新和引領(lǐng)者
似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強(qiáng)不強(qiáng)大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內(nèi)卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關(guān)注從0到1，因?yàn)檫@樣做的性價(jià)比的確不高。
市場的接受和認(rèn)可程度
當(dāng)劉海屏第一次出現(xiàn)的時(shí)候，很多用戶都在吐槽，其中也包括很多蘋果的忠實(shí)用戶，寧愿買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)欄的其它信息融為一體。
榮耀的通話時(shí)間膠囊和自拍膠囊，都以前置攝像頭為基礎(chǔ)做延展，可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗(yàn)。
雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展，但從效果和想法來看，也與靈動(dòng)島的概念比較類似。
HTC曾經(jīng)出過一款HTC U Ultra，當(dāng)然那時(shí)候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外，幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。
05
對設(shè)計(jì)師的影響
靈動(dòng)島的出現(xiàn)，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做，就好比「劉海屏」首次出現(xiàn)的時(shí)候，需要設(shè)計(jì)師對全新交互邏輯、卡片行為、動(dòng)畫等重新適配。那么對于「靈動(dòng)島」我想需要考慮的是這幾個(gè)方面。
新的交互方式
之所以叫靈動(dòng)島，就是因?yàn)樗恰胳`動(dòng)」的，擁有不同的狀態(tài)變化，以適應(yīng)各種功能提示和操作。設(shè)計(jì)師在使用這個(gè)功能的時(shí)候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態(tài)的容器可以裝載不同的內(nèi)容，相比于以往常規(guī)的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時(shí)候，留給設(shè)計(jì)師更多的想象空間。
新的表達(dá)方式
靈動(dòng)島相當(dāng)于一個(gè)永遠(yuǎn)在桌面上的島嶼，比任何App的優(yōu)先級(jí)都要高，所以會(huì)成為各個(gè)應(yīng)用的必爭之地，使用一種好的表達(dá)方式，必然能夠達(dá)到事半功倍的效果，因此也是考驗(yàn)設(shè)計(jì)師在寸土寸金的區(qū)域中，通過視覺化手段表達(dá)的能力。
最后，我想蘋果的初衷是為了更好的用戶體驗(yàn)，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會(huì)得到用戶的喜愛和市場的認(rèn)可。
我認(rèn)為靈動(dòng)島既是一種創(chuàng)新也是一種妥協(xié)，對于工業(yè)設(shè)計(jì)硬件創(chuàng)新乏力的妥協(xié)，更是對技術(shù)發(fā)展的妥協(xié)。我也相信，真正的全面屏?xí)r代終究會(huì)到來，期待那個(gè)時(shí)候蘋果再一次給我們帶來真正意義上的，里程碑式的，創(chuàng)新！
電影《再次出發(fā)之紐約遇見你》中有一個(gè)浪漫的場景，男主和女主通過一根耳機(jī)分線器一起聽著音樂，一起感受著當(dāng)下同一段旋律。通過這根分線器，他們分享著自己的歌單，分享著當(dāng)下的情緒，隔絕外界的紛擾，游蕩在大街小巷。
這種聽歌方式我也很喜歡，同樣的歌曲讓人產(chǎn)生了不一樣的感受。我想，可能是陪伴和共鳴賦予了這首歌新的生命力吧!
如今，無需分線器，網(wǎng)易云音樂一起聽可以讓你和那個(gè)TA隨時(shí)一起欣賞音樂、分享心情。前年7月份上線的這個(gè)功能獲得了用戶的一致好評(píng)，之后的數(shù)據(jù)表現(xiàn)也是遠(yuǎn)超預(yù)期。但是，在眾多的用戶反饋中，最多的一個(gè)痛點(diǎn)是：身邊沒有人陪我一起聽，能不能做個(gè)匹配功能，找陌生人一起聽？
站在業(yè)務(wù)的層面考慮，一起聽作為一個(gè)熟人聽歌的功能，在戀人和親密好友之間普及度非常高，但同時(shí)也要考慮當(dāng)這部分用戶數(shù)據(jù)增長到達(dá)瓶頸后，一起聽如何拓展新的用戶群。陌生人一起聽是一個(gè)很好的方向，能夠突破熟人社交的限制，擁抱更多社交關(guān)系拓展的可能性。
為了滿足這一部分用戶的需求，陌生人一起聽的項(xiàng)目在決策層的支持下進(jìn)入了探索階段。這一階段主要想要知道什么樣的產(chǎn)品形態(tài)適合陌生人一起聽，是在原有的熟人一起聽的框架內(nèi)進(jìn)行拓展，還是大膽顛覆更加讓人眼前一亮呢？每位小伙伴都描述著自己的構(gòu)想，朝著不同方向探索。經(jīng)過一輪輪的方案討論，最終我們選擇了“星球”作為框架，來承載陌生人一起聽的設(shè)計(jì)。大概的構(gòu)想是這樣的：當(dāng)我在聽一首歌，感覺孤單并希望有人陪伴時(shí)?？梢酝ㄟ^一個(gè)入口進(jìn)入到一個(gè)由光點(diǎn)組成的星球，每個(gè)光點(diǎn)代表一個(gè)當(dāng)前也在聽這首歌曲的用戶。我可以展示自己的狀態(tài)，和其他的用戶進(jìn)行互動(dòng)。當(dāng)我對一個(gè)用戶感興趣時(shí)，可以選擇“跟隨”TA，每當(dāng)TA去往另一個(gè)星球（也就是聽其他的歌時(shí)），我也會(huì)自動(dòng)移動(dòng)到那個(gè)星球，跟隨著TA一起聽。
根據(jù)上述設(shè)想，設(shè)計(jì)團(tuán)隊(duì)還產(chǎn)出了一些方案來還原大家心中的“星球”，下面是早期一個(gè)方案的動(dòng)態(tài)演示，黑膠上的封面變化為一個(gè)同色系的星球，每個(gè)光點(diǎn)代表一個(gè)正在聽這首歌的陌生人。
我們將這個(gè)大概構(gòu)想告知開發(fā)同學(xué)后，得知需要的人力和時(shí)間成本遠(yuǎn)超我們預(yù)期。由于決策層希望能夠在一起聽的熱度未退時(shí)盡快上線陌生人版，我們不得不把這個(gè)星球版的方案暫時(shí)擱置，重新構(gòu)想在原有框架內(nèi)的設(shè)計(jì)方案。
決定在原有框架內(nèi)進(jìn)行設(shè)計(jì)后，我們就需要收攏之前發(fā)散的想法。針對主要需求進(jìn)行設(shè)計(jì)，把有限的資源用到刀刃上。最終確定的產(chǎn)品形態(tài)似乎很簡單直接，點(diǎn)一下按鈕，匹配一個(gè)愿意和我一起聽歌的人，但是到了視覺設(shè)計(jì)階段，就需要考慮更多的問題。
從關(guān)系的角度講。熟人之間比較親密，陌生人之間要保持一定距離，慢慢了解對方。與熟人一起聽有著穩(wěn)定的預(yù)期，但是陌生人帶來的是不穩(wěn)定，這種不穩(wěn)定可能是緣分和驚喜，也可能是騷擾和驚嚇?？紤]到這種不同，做陌生人一起聽的功能就不能夠完全套用熟人的設(shè)計(jì)，而是要針對性地進(jìn)行重新思考。
首先，功能的入口能夠給用戶第一印象，我們用了一個(gè)動(dòng)畫表達(dá)兩個(gè)陌生人沉浸在音樂中的含義，兩個(gè)匿名小人安靜地呆在一起，音符環(huán)繞著它們運(yùn)動(dòng)，暗示他們正在一起聽歌。通過這種表達(dá)幫助用戶快速了解功能，同時(shí)渲染氛圍，吸引用戶使用。
在熟人一起聽歌過程中，為了表達(dá)親密，表現(xiàn)形式上采用了耳機(jī)共享，頭像疊放的表現(xiàn)形式。但在陌生人之間，為了避免過于親密，就去掉了耳機(jī)線。為了控制社交距離，頭像不再疊著放了。陌生人的頭像也模糊處理來保持神秘感。
為了保證沒有社交意愿的用戶不被打擾，同時(shí)為了避免社交過程過于快餐化，陌生人一起聽采用了一方申請，另一方同意才可以公開身份的規(guī)則。為了配合這個(gè)規(guī)則，我們設(shè)計(jì)了陌生人揭面機(jī)制來引導(dǎo)用戶和傳達(dá)信息。匹配成功后，雙方會(huì)先隱藏身份聽歌。以此來鼓勵(lì)用戶盡量關(guān)注音樂本身，而不是純粹為了交友而進(jìn)行一起聽。當(dāng)一起聽了5分鐘后，對方的面具會(huì)小幅度上下移動(dòng)，暗示用戶可以點(diǎn)擊。點(diǎn)擊對方的面具后會(huì)發(fā)出公開身份的申請，對方同意后才可以揭開面具。后續(xù)聽歌過程中，雙方就在身份公開的情況下一起聽歌。如果相處愉快，可以去對方主頁了解更多信息，甚至互關(guān)成為好友，下一次以熟人的身份邀請一起聽。
“于千萬人之中，遇見你所遇見的人”，這是我們想在匹配的過程中體現(xiàn)的緣分感。受限于開發(fā)成本，匹配動(dòng)畫只能在一個(gè)小小的圓形容器里去設(shè)計(jì)。下面四個(gè)方案是前期的探索稿，主要是把人抽象成一個(gè)個(gè)點(diǎn)，點(diǎn)可能代表一種顏色、一顆星星、一個(gè)光點(diǎn)，點(diǎn)的運(yùn)動(dòng)表達(dá)尋找的過程。
最后選用了第四個(gè)，進(jìn)行最終優(yōu)化后的呈現(xiàn)如下。通過雷達(dá)的轉(zhuǎn)動(dòng)表達(dá)尋找，浮動(dòng)的光點(diǎn)代表一個(gè)個(gè)陌生人，最終受到召喚的那個(gè)TA飛入雷達(dá)范圍，發(fā)出代表回應(yīng)的音波后，變大形成一個(gè)蒙面的頭像。（由于時(shí)間關(guān)系，此動(dòng)畫后半段僅在安卓端實(shí)現(xiàn)）
如果你仔細(xì)地用過一起聽，可能會(huì)發(fā)現(xiàn)雙紅心彩蛋，這份驚喜感也是我們希望讓雙方感受到的。當(dāng)你喜歡了一首對方也喜歡的歌曲，都會(huì)出現(xiàn)一個(gè)兩個(gè)愛心碰撞出音符的動(dòng)畫，在驚喜的同時(shí)也會(huì)體驗(yàn)到來自陌生人的認(rèn)同感。
至此，在這一版的一起聽中，我們希望用戶能夠獲得的感受是：“兩個(gè)陌生人雖然素不相識(shí)，不方便通過言語交流，但是彼此分享同一首歌曲，互相陪伴，產(chǎn)生共鳴，溫暖而美妙?！闭绻鲁堑脑姟堕T前》里的那句：“草在結(jié)它的種子，風(fēng)在搖它的葉子。我們站著，不說話，就十分美好”。
陌生人一起聽上線后一個(gè)月左右，我們和用研團(tuán)隊(duì)一起在杭州的幾個(gè)大學(xué)周邊進(jìn)行了用戶訪談，包括面訪和攔訪，在一線傾聽用戶的聲音。主要調(diào)研使用過一起聽用戶的使用情況、未使用過一起聽用戶對于一起聽的認(rèn)知情況，總結(jié)問題后為一起聽后續(xù)的功能迭代和運(yùn)營策略提供參考和建議。
根據(jù)調(diào)研結(jié)論，我們按照用戶使用一起聽前中后的順序?qū)栴}進(jìn)行排列，分析用戶的問題和痛點(diǎn)，確定了之后的優(yōu)化方向。
我們結(jié)合數(shù)據(jù)表現(xiàn)和用戶調(diào)研，計(jì)劃在接下來的迭代中實(shí)現(xiàn)更多有趣的玩兒法。首先亟待解決的是用戶聊天的需求。在熟人一起聽中，用戶一般使用微信作為聊天工具，一般不會(huì)考慮在云音樂里進(jìn)行聊天。當(dāng)陌生人一起聽上線后，能夠即時(shí)地與陌生人聊天就是一個(gè)最剛需的社交需求了。雖然云音樂已經(jīng)有私信功能可以供我們進(jìn)行復(fù)用，但是我們希望能夠?qū)⒁黄鹇爼r(shí)的聊天做得足夠輕量且能夠隨時(shí)觸達(dá)，以此來提高聊天功能的使用率。
設(shè)計(jì)過程中我們結(jié)合場景進(jìn)行思考和創(chuàng)新，經(jīng)過幾輪方案的篩選，最后大家對于一個(gè)問題產(chǎn)生爭論：是進(jìn)入聊天模式才可以收發(fā)消息呢？還是直接在播放頁展示消息，隨時(shí)聊天呢？
下圖中，方案1能夠減輕打擾，但是無法在播放頁第一時(shí)間看到對方發(fā)的消息。
方案2有一定的打擾，但是能夠第一時(shí)間看到消息，讓聽歌場景和聊天場景無縫銜接。
為了減少用戶的操作步驟，把功能做得輕量化，最終選擇了更加直接的方案2，同時(shí)為了避免打擾，每一方的消息氣泡的展示數(shù)量設(shè)置上限為2條，超過2條就會(huì)收起到記錄中。
下面的視頻是聊天的簡單演示，可以發(fā)現(xiàn)氣泡通過背景模糊來區(qū)分前后內(nèi)容，氣泡的出現(xiàn)和消失不改變黑膠頁的原有結(jié)構(gòu)。
很多人用社恐來自嘲，表達(dá)自己想與人社交，但是又存在邁出第一步的障礙。陌生人一起聽是一個(gè)匿名功能，很適合希望輕度社交的用戶。在匿名的基礎(chǔ)上，我們希望在聽歌過程中，能夠?yàn)橛脩魩砀噍p量的、無壓力的社交方式，幫助希望社交的用戶逐漸熟悉彼此，找到志同道合的朋友。
個(gè)人信息逐步展示就是基于上述的需求誕生的創(chuàng)新功能。隨著匿名一起聽的進(jìn)程，用戶可以逐步解鎖對方的信息，一部分是雙方的共同信息用以產(chǎn)生共鳴，另一部分是對方的特色信息用以展示自身特點(diǎn)。在聽歌的過程中逐漸了解對方，最后決定是否揭面進(jìn)行更深度的交流。
首先，在共同信息的提示方式的設(shè)計(jì)上，我們并沒有簡單地用一個(gè)紅點(diǎn)去提醒用戶。而是用頭像的發(fā)光來表示共鳴的含義，頭像四周飄散的粒子來隱喻共同信息。讓每一處的設(shè)計(jì)都能貼合一起聽的風(fēng)格。
共同信息在一個(gè)浮層上展示，我們把當(dāng)前展示的信息控制為一個(gè)，通過上下滑動(dòng)來切換。除了共同信息，用戶可以直觀地設(shè)置自己的狀態(tài)，讓自己更加像一個(gè)活生生的人。
當(dāng)完成一起聽后，會(huì)有一個(gè)結(jié)果頁來記錄聽歌過程中產(chǎn)生的各種數(shù)據(jù)。舊版的結(jié)果頁用戶反饋信息不夠豐富，分享欲望不強(qiáng)。
新的結(jié)果頁增加了雙方的相似度、聊天條數(shù)這些數(shù)據(jù)，并且根據(jù)這些數(shù)據(jù)不同，會(huì)生成一個(gè)表達(dá)關(guān)系的成語，顏色有對應(yīng)的變化。比如我們相似度很高，并且互發(fā)了很多條聊天消息的話，就會(huì)得到一拍即合的成語和紅色的結(jié)果頁。
與陌生人度過一段聽歌之旅很容易讓人產(chǎn)生分享欲，在社交媒體搜索一起聽可以發(fā)現(xiàn)很多用戶都用結(jié)果頁配圖發(fā)帖，并訴說自己與陌生人之間的互動(dòng)故事。
一起聽經(jīng)過這兩次比較大的更新后，獲得一些不錯(cuò)的成績。截止至2021年12月，周末的平均DAU數(shù)據(jù)從130W提升到了200萬，增量的70W中有大約30%來自于陌生人一起聽。在2021年3月的云音樂整體滿意度監(jiān)測中，22%的用戶表示自己經(jīng)常使用一起聽，滿意度得分4.66（滿分5分），在云音樂所有主要功能中居首位。
未來，我們會(huì)繼續(xù)一起聽的創(chuàng)新腳步，還有更多的可能性等待我們探索。希望未來能夠?yàn)橛脩魩砀嘣囊黄鹇狊w驗(yàn)。最后，我想用下面的這張圖來結(jié)尾，它是同樣主打與陌生人社交和陪伴的游戲《光遇》的一張美宣圖，是我最近無意間在它的官網(wǎng)發(fā)現(xiàn)的。當(dāng)時(shí)看到這張圖后突然發(fā)現(xiàn)它和陌生人一起聽的入口介紹圖表達(dá)方式竟然這么接近。在這個(gè)溫馨的畫面里，代表“光”的白鳥圍繞著你和我正如音樂環(huán)繞著你和我，彼此陪伴、傳遞溫暖、分享喜悅~
在產(chǎn)品設(shè)計(jì)中，當(dāng)有新上線的功能或隱藏功能時(shí)，我們通常會(huì)給予用戶提示。常見的有小紅點(diǎn)、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。
而人類是視覺生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動(dòng)態(tài)內(nèi)容吸引。
今天來聊一下頁面中常見的動(dòng)態(tài)引導(dǎo)。
當(dāng)你看到這個(gè)頁面時(shí)
我想你會(huì)先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）
而當(dāng)頁面元素都賦予細(xì)節(jié)時(shí)
假如我想讓你關(guān)注到其中某個(gè)較小元素
其實(shí)只需要為它添加動(dòng)態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計(jì)中的動(dòng)態(tài)引導(dǎo)。
▍新功能提示 ?
當(dāng)產(chǎn)品上線新功能時(shí)，設(shè)計(jì)師們都會(huì)根據(jù)功能重要程度，來決定使用什么形式讓入口元素和其他元素區(qū)分開來。常見的有小紅點(diǎn)、標(biāo)簽、氣泡這類靜態(tài)點(diǎn)綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點(diǎn)擊后就會(huì)消失）。當(dāng)然，也有將上述點(diǎn)綴元素動(dòng)態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動(dòng)畫，這在很多電商產(chǎn)品的品類區(qū)經(jīng)?？梢钥吹?。
動(dòng)態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對元素的注意力（與動(dòng)態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動(dòng)畫，因此可以持續(xù)吸引用戶注意力。
ps：據(jù)說，每當(dāng)頁面多出一個(gè)會(huì)動(dòng)的元素，后臺(tái)就會(huì)多出這樣一些留言，捅了開發(fā)窩了[Doge]。
▍誘導(dǎo)用戶操作 ?
動(dòng)態(tài)引導(dǎo)還常常被設(shè)計(jì)師用來強(qiáng)調(diào)重要內(nèi)容（有可能被產(chǎn)品、運(yùn)營拿刀架脖子），來達(dá)成某些數(shù)據(jù)指標(biāo)，通過利用動(dòng)態(tài)誘導(dǎo)用戶操作。
例如：在會(huì)員卡片中添加光效、在廣告中讓按鈕進(jìn)行縮放、為簽到入口圖標(biāo)設(shè)置動(dòng)畫。
這些都能充分引起用戶注意，甚至提升功能點(diǎn)擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動(dòng)端，受屏幕大小限制，設(shè)計(jì)師通常會(huì)折疊或隱藏不常用的功能，來保持頁面簡潔。
對于這些不可見的功能，在初次使用時(shí)需要進(jìn)行引導(dǎo)，才能被用戶感知與使用。
▍操作教學(xué)指引 ?
講到引導(dǎo)，還必須要提的是手勢引導(dǎo)，通過動(dòng)態(tài)直觀展示不同手勢的作用，提示用戶如何與產(chǎn)品進(jìn)行交互。
這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當(dāng)你第一打開視頻時(shí)， App 會(huì)提醒你雙擊屏幕可以點(diǎn)贊，上下滑動(dòng)可以切換視頻。
在產(chǎn)品交互設(shè)計(jì)中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動(dòng)態(tài)敘述的直觀性，使得我們可以減少對復(fù)雜信息進(jìn)行大量文字描述。通過動(dòng)態(tài)設(shè)計(jì)，我們可以創(chuàng)建視覺故事，這有助于將復(fù)雜信息以更簡單、清晰的方式進(jìn)行傳遞，從而幫助用戶快速完成任務(wù)。
也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開始應(yīng)用。
但是需要注意的是，上述這些大多都只在第一次使用時(shí)才會(huì)觸發(fā)。
當(dāng)然有特例，例如：
在 App Store 每次下載應(yīng)用進(jìn)行驗(yàn)證時(shí)（面容解鎖的情況下），系統(tǒng)會(huì)通過動(dòng)態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進(jìn)行人臉識(shí)別。
在掃碼時(shí)，弱光場景下出現(xiàn)的手電筒，通過動(dòng)態(tài)引起用戶注意，指引用戶使用。
以及作為動(dòng)態(tài)演示，幫助用戶理解如何使用手掌滑動(dòng)截屏
如何進(jìn)行NFC感應(yīng)等等..
動(dòng)態(tài)引導(dǎo)像是設(shè)計(jì)師用來控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗(yàn)，有的人用它提升商業(yè)轉(zhuǎn)化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
作者：幺零三
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在網(wǎng)絡(luò)購物發(fā)達(dá)的互聯(lián)網(wǎng)時(shí)代，大部分年輕人（包括小?。┰谫徺I商品前都會(huì)在各種平臺(tái)上找測評(píng)貼，其中小紅書就是代表平臺(tái)之一。
小紅書入駐了許多博主，從明星到素人，他們經(jīng)常發(fā)布筆記幫大家種草或者拔草，UGC+電商的模式也實(shí)現(xiàn)了完美的購物流程閉環(huán)，使得小紅書擁有了一大批忠誠用戶（小紅薯）。那么為了讓用戶買買買，小紅書都做對了哪些事情呢？
本篇文章將從小紅書App的界面設(shè)計(jì)和交互設(shè)計(jì)進(jìn)行分析。
一、小紅書至簡的界面設(shè)計(jì)
『色調(diào)』
小紅書色調(diào)以紅色為主，與其名稱呼應(yīng)，同時(shí)紅色受到年輕女性歡迎，與用戶的產(chǎn)品形象相吻合。
該設(shè)計(jì)還采用了女性喜愛的可愛清新風(fēng)格。
小紅書為其垂直官方帳號(hào)（穿搭薯、娛樂薯、校園薯等）也設(shè)計(jì)了可愛的卡通人物形象，為用戶打造了小紅薯表情包。
『界面』
小紅書與其它同類的競品風(fēng)格不太類似，其界面給人簡潔而又清晰的印象。這種簡潔和清晰源自對于功能設(shè)置上的克制。在Feed流上，為用戶提供最佳的信息閱讀體驗(yàn)。
『Icon』
小紅書在一些內(nèi)容豐富的頁面，icon一般為線性，降低視覺感；面性的icon則會(huì)出現(xiàn)在比較醒目的地方，提醒用戶點(diǎn)擊；擬物風(fēng)格的icon一般為禮物圖標(biāo)等。
二、交互設(shè)計(jì)，如何做到簡單？
小紅書的整體界面比較簡潔，使用起來很簡單。首頁只有三大功能模塊，用戶操作路徑清晰。底部導(dǎo)航條之間分類明確，互不干擾，常用功能都能很快找到，不常用功能放在側(cè)邊欄中，節(jié)省了頁面空間。
小紅書的3種內(nèi)容方式
圖文：圖文筆記的瀏覽界面就是圖片與文字分開的形式，圖片左右滑動(dòng)瀏覽，一般用戶會(huì)增加標(biāo)簽輔助說明。文字也只能利用圖形來增加可看性。此外在文章內(nèi)還可以增加商品鏈接，直接引導(dǎo)轉(zhuǎn)化。
視頻：短視頻的瀏覽界面與抖音非常類似了，文字說明的內(nèi)容超過一定字?jǐn)?shù)會(huì)折疊。當(dāng)然也有一些短視頻沒有的功能彈幕。右上角有分享功能，點(diǎn)贊、收藏和評(píng)論則在左下角。
直播：小紅書直播內(nèi)容主要是以互動(dòng)為主，不同于其他的直播模式，而是以主播分享體驗(yàn)向用戶推薦商品，這樣的方式更能提高用戶對商品質(zhì)量的信任程度。直播過程中用戶可以右滑進(jìn)入簡潔模式，這樣直播的彈幕以及禮物點(diǎn)贊特效則會(huì)隱藏。
三、小紅書的購物方式
小紅書電商體量沒有淘寶大，商城首頁很干凈使各個(gè)活動(dòng)入口更加清晰，使用卡片的布局形式展示，可以有效的與輪播廣告相區(qū)分。小紅書在商品界面設(shè)計(jì)上更加清新、層次分明，讓用戶能明確操作流程。
購物模塊與筆記社區(qū)有著非常巧妙的聯(lián)系，在添加筆記時(shí)，小紅書也鼓勵(lì)用戶關(guān)聯(lián)商品訂單，如果關(guān)聯(lián)，商品購買鏈接就會(huì)顯示在筆記中，不僅縮短了用戶查找時(shí)間，也直接進(jìn)行了流量引導(dǎo)轉(zhuǎn)化。
作者：jongde 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
作者：菜菜不甜 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
本文主要從業(yè)務(wù)分析、交互體驗(yàn)和設(shè)計(jì)規(guī)范三個(gè)層面進(jìn)行總結(jié)。
與C端不同，B端產(chǎn)品主要圍繞業(yè)務(wù)為核心展開，面向?qū)I(yè)的人員，有固定的業(yè)務(wù)屬性，我們只有將業(yè)務(wù)理解透徹，熟悉業(yè)務(wù)的運(yùn)作流程，才能在B端設(shè)計(jì)過程中，輸出良好清晰的設(shè)計(jì)架構(gòu)，更好的解決業(yè)務(wù)問題。因此，設(shè)計(jì)師的業(yè)務(wù)分析能力在B端設(shè)計(jì)中至關(guān)重要。進(jìn)行業(yè)務(wù)分析可以從以下幾點(diǎn)著手：
我們可以從多方面收集業(yè)務(wù)相關(guān)的信息，包括梳理需求文檔，與業(yè)務(wù)人員溝通等，來了解行業(yè)背景、業(yè)務(wù)目標(biāo)、組織架構(gòu)，理清一些專業(yè)名詞等。業(yè)務(wù)場景理解的越深入透徹，我們才能建立起一個(gè)系統(tǒng)性的邏輯思維，對我們接下來的設(shè)計(jì)脈絡(luò)的梳理以及整體設(shè)計(jì)的把控是越有利的。
我們可以通過繪制業(yè)務(wù)流程圖，將零散的業(yè)務(wù)信息通過具象的流程圖清晰地呈現(xiàn)出來，有助于我們宏觀系統(tǒng)的了解整個(gè)功能流程，同時(shí)也能夠確保業(yè)務(wù)的標(biāo)準(zhǔn)流程都能夠走通，不會(huì)出現(xiàn)邏輯問題及功能場景的缺失。
B端用戶因其崗位角色的不同，使其具有清晰的角色權(quán)限。比如普通成員、管理員、超級(jí)管理員，分別對應(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è)計(jì)的核心目標(biāo)為降本增效，在交互體驗(yàn)層面可以理解為降低認(rèn)知成本，提高使用效率。而B端設(shè)計(jì)的一個(gè)顯著特點(diǎn)就是功能、場景復(fù)雜，要達(dá)到降本增效，需要我們在交互體驗(yàn)層面上注意以下幾點(diǎn)：
B端注重對頁面的高效操作，因此在設(shè)計(jì)的過程中要保持簡潔克制，排除過多的干擾元素，聚焦主要功能，弱化或隱藏非必要功能，保證頁面信息呈現(xiàn)輕量化，降低用戶認(rèn)知負(fù)荷。
同時(shí)，通過視覺設(shè)計(jì)，比如顏色、字號(hào)、字重、合理排版等，使頁面信息呈現(xiàn)有層次、有重點(diǎn)，能夠合理有效的進(jìn)行優(yōu)先級(jí)的引導(dǎo)，頁面信息呈現(xiàn)更加清晰有序，降低頁面的復(fù)雜性。
設(shè)計(jì)過程中，遵守設(shè)計(jì)規(guī)范，在視覺與交互上保持一致性至關(guān)重要。
一方面保持視覺上的一致性，包括字體、顏色、間距、結(jié)構(gòu)等，能夠使頁面信息呈現(xiàn)嚴(yán)謹(jǐn)有序，保證易讀性；另一方面，保持整個(gè)系統(tǒng)交互操作的一致性，則可以大大降低用戶的學(xué)習(xí)成本，同時(shí)還能夠提升開發(fā)效率。
B端功能交互邏輯復(fù)雜，在設(shè)計(jì)過程中，盡量保持已成標(biāo)準(zhǔn)的用戶操作習(xí)慣，尊重用戶已有的認(rèn)知，保證內(nèi)容的可理解性，可以增加用戶的熟悉度，降低學(xué)習(xí)成本。
B端的信息結(jié)構(gòu)復(fù)雜，如果將信息完全平鋪呈現(xiàn)，不僅占用頁面空間，還會(huì)大大加重用戶的認(rèn)知負(fù)擔(dān)。這就需要我們站在用戶的角度，基于用戶的行為路徑，進(jìn)行信息層級(jí)的劃分。
第一，對頁面信息進(jìn)行梳理，明確主要信息和次要信息，必要信息和非必要信息，將次要信息和非必要信息進(jìn)行隱藏、收起、刪除等，可以有效聚焦核心內(nèi)容，避免分散用戶注意力；
第二，對需要展示的主要、必要信息進(jìn)行分類歸納、信息分組，通過合理的頁面排版布局，使信息結(jié)構(gòu)清晰有序的呈現(xiàn)；
第三，注意層級(jí)步驟的拆分，讓用戶逐級(jí)獲得信息，路徑清晰，避免過多信息雜亂無序的呈現(xiàn)，增加用戶認(rèn)知負(fù)荷。
首先，我們通過預(yù)測用戶行為，在關(guān)鍵交互節(jié)點(diǎn)增加功能曝光，給予用戶操作建議和提示，可以幫助用戶高效流暢的完成任務(wù)目標(biāo)；其次，對用戶行為進(jìn)行預(yù)測，主動(dòng)幫助用戶完成一部分操作，比如信息默認(rèn)值填充等，可以提升用戶體驗(yàn)，減輕用戶的操作負(fù)擔(dān)。
B端產(chǎn)品結(jié)構(gòu)功能復(fù)雜，有使用學(xué)習(xí)的過程，如果對B端產(chǎn)品進(jìn)行大的改版升級(jí)，會(huì)讓已經(jīng)熟悉舊版本且已經(jīng)產(chǎn)生使用習(xí)慣的用戶產(chǎn)生一些不適應(yīng)感。保留舊版本返回入口，讓用戶慢慢習(xí)慣過渡到新版本，可以減小用戶學(xué)習(xí)的壓力，避免因習(xí)慣問題影響產(chǎn)品的正常使用，無論是對用戶的接受度還是對我們改版的順利落地都是一種不錯(cuò)的方式。
B端系統(tǒng)龐大且復(fù)雜，建立起統(tǒng)一的設(shè)計(jì)組件和設(shè)計(jì)規(guī)范至關(guān)重要。
組件規(guī)范的建立：
第一，能夠保證交互及視覺設(shè)計(jì)的一致性，提升設(shè)計(jì)效率和降低用戶學(xué)習(xí)成本；
第二，能夠提升團(tuán)隊(duì)的協(xié)作效率，提高設(shè)計(jì)還原度，降低對接成本；
第三，組件化設(shè)計(jì)，可復(fù)用性強(qiáng)，能夠提升開發(fā)效率，在后期的迭代開發(fā)中，也可以進(jìn)行統(tǒng)一的更新和應(yīng)用，能夠減少開發(fā)工作量，便于維護(hù)。
設(shè)計(jì)規(guī)范比較具體，且不同的項(xiàng)目在規(guī)范細(xì)節(jié)方面也會(huì)有所不同，下面主要整理了一些比較常涉及且可以通用的規(guī)范和組件。
B端系統(tǒng)用戶的主流分辨率為1920、1440和1366，我們在選擇分辨率時(shí)，首先確定目標(biāo)用戶使用場景是否對分辨率有特殊要求，如果沒有特殊的場景分辨率要求，基于上下好適配性，通常會(huì)選擇1440的尺寸進(jìn)行設(shè)計(jì)。
由于B端業(yè)務(wù)場景復(fù)雜，信息量比較大，通常選用24柵格系統(tǒng)。
考慮結(jié)構(gòu)布局，根據(jù)不同的結(jié)構(gòu)布局，給出動(dòng)態(tài)縮放適配方案。常用的布局為：左右布局和上下布局。
左右布局：通常是將左邊的導(dǎo)航欄固定，對右邊的工作區(qū)域進(jìn)行動(dòng)態(tài)縮放。
上下布局：通常是對兩邊留白區(qū)域進(jìn)行最小值的定義，當(dāng)留白區(qū)域到達(dá)限定值之后再對中間的主內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放。
B端用色講究簡潔克制，使用戶能夠高效聚焦功能內(nèi)容，Ant Design上面對色彩應(yīng)用的描述為“色彩在使用時(shí)更多的是基于信息傳遞、操作引導(dǎo)和交互反饋等目的。在不破壞操作效率，影響信息的清晰傳達(dá)的這些原則之上，理性的選擇顏色是關(guān)鍵。”基于色彩使用的目的，B端用色主要分為主色、功能色和中性色。
主色：通常是品牌色，或者根據(jù)用戶群體、產(chǎn)品定位以及使用場景來定義，主要用在主要按鈕、選中狀態(tài)、高亮信息、空狀態(tài)等。
功能色：代表了明確的信息以及狀態(tài)，如成功、錯(cuò)誤、提醒、鏈接等。功能色的使用需要遵守用戶對色彩的基本認(rèn)知。
中性色：主要用于文字、分割線、邊框、背景等。
字體：中文常用字有：Ping Fang SC、微軟雅黑、思源黑體；英文常用字體有：San Francisco UI（SF字體）、Helvetica Neue、Arial。
字號(hào)：最小字號(hào)不小于12px，常規(guī)字號(hào)大小一般為14px。輔助文字12px，正文（常規(guī)）14px，小標(biāo)題16px，標(biāo)題18px、主標(biāo)題20px，字號(hào)的選擇可根據(jù)具體情況進(jìn)行定義。
字重：字重通常選用regular、medium、semibold，分別對應(yīng)代碼中的400、500、600。
行高：行高設(shè)置一般為字號(hào)的1.5倍左右，我們也可以采用，字號(hào)+8px做行高。
(1)按照基礎(chǔ)樣式分為：主按鈕、次按鈕、虛線按鈕、文本按鈕、鏈接按鈕
(2)定義按鈕的交互狀態(tài)：Normal（默認(rèn)狀態(tài)）、Disable（禁用狀態(tài)）、Hover（懸停狀態(tài)）、Press（點(diǎn)擊狀態(tài)）、Loading（加載狀態(tài)）
(3)對按鈕進(jìn)行規(guī)范的制定：包括尺寸、圓角、文字、顏色、背景等
表單通常由輸入框、選擇器、單選框、多選框等組成，具有收集、校驗(yàn)、提交數(shù)據(jù)的功能。
(1)表單的狀態(tài)：設(shè)計(jì)時(shí)，要明確規(guī)范表單的三種狀態(tài)
默認(rèn)狀態(tài)：即用戶輸入信息之前的狀態(tài)；
焦點(diǎn)狀態(tài)：即用戶正在輸入信息時(shí)的狀態(tài)；
反饋狀態(tài)：即用戶填寫信息后的校驗(yàn)狀態(tài)。
(2)輸入順序：表單設(shè)計(jì)時(shí)，信息的輸入順序按照先易后難，先必填后選填，先公開信息后隱私信息進(jìn)行，可以減輕用戶填寫表單的心理壓力。
(3)對齊方式：對齊方式分為三種：頂部對齊、右對齊和左對齊。
對齊方式的選擇，需要根據(jù)瀏覽效率、屏幕空間以及標(biāo)簽長度來實(shí)際判斷，做出選擇。
首先，需要明確，瀏覽效率上，頂對齊＞右對齊＞左對齊。
然后結(jié)合屏幕空間和標(biāo)簽長度做判斷：
頂對齊：效率最高，標(biāo)簽長度可以更靈活一些，但垂直空間占用多；
右對齊：效率次之，文本字?jǐn)?shù)不可控但又不是很多時(shí)可使用右對齊；
左對齊：瀏覽時(shí)間最長，效率最慢，標(biāo)簽字?jǐn)?shù)可控或者需要用戶謹(jǐn)慎確認(rèn)信息時(shí)，可使用左對齊。
需要注意的一點(diǎn)是，頂對齊的標(biāo)簽布局之間要有合適的垂直間距，才能瀏覽舒適，效率更高，通常使用輸入框 50%至 75%的高度作為相鄰輸入框的垂直間距。
(4)校驗(yàn)反饋：校驗(yàn)反饋要具有準(zhǔn)確性和及時(shí)性。
準(zhǔn)確性：主要體現(xiàn)在，要給予用戶準(zhǔn)確清晰的錯(cuò)誤原因和解決方案，以及準(zhǔn)確的錯(cuò)誤位置。
及時(shí)性：表單填寫時(shí)，出現(xiàn)錯(cuò)誤是難免的，為了避免用戶盲目填寫信息或者出現(xiàn)大面積報(bào)錯(cuò)，可以進(jìn)行實(shí)時(shí)的校驗(yàn)反饋，比如用戶輸入完成鼠標(biāo)失焦后進(jìn)行信息校驗(yàn)，但反饋的前提條件是不打擾到用戶。
需要注意的一點(diǎn)是，成功或者錯(cuò)誤等的反饋，不能僅用顏色來區(qū)分，需要加入明確的圖標(biāo)和文字來提示，以達(dá)到視覺無障礙設(shè)計(jì)。
(5)標(biāo)簽與占位符：標(biāo)簽和占位符都要盡量簡潔，避免文字過多，給用戶造成視覺負(fù)擔(dān)，信息描述應(yīng)該準(zhǔn)確、直觀且完整。
(6)表單分步：當(dāng)表單內(nèi)容多而復(fù)雜時(shí)，會(huì)讓用戶感到煩躁和不知所措，表單分步不僅有利于減輕用戶的填寫負(fù)擔(dān)，緩解焦慮情緒，還能夠明確了解表單填寫的步驟流程。
(7)數(shù)據(jù)與默認(rèn)值填充：在用戶進(jìn)行信息錄入時(shí)，可以通過后臺(tái)數(shù)據(jù)庫進(jìn)行匹配，自動(dòng)填寫已知信息，也可以設(shè)置合理的默認(rèn)值，滿足多數(shù)人需要的默認(rèn)選擇，幫助用戶節(jié)省時(shí)間，快速完成表單填寫。
(8)輸入框?qū)挾扰c高度設(shè)定：輸入框的大小通常對用戶輸入信息的多少有著暗示作用，輸入框尺寸越大，用戶會(huì)認(rèn)為是可以輸入很多字的。因此，并不是所有輸入框?qū)挾纫恢?，就是好的設(shè)計(jì)，需要根據(jù)實(shí)際情況，設(shè)定輸入框?qū)挾龋且膊荒茉O(shè)定太多寬度，寬度太多會(huì)使表單視覺效果凌亂，寬度設(shè)定要合理適當(dāng)。
輸入框的寬度是固定的，但是高度可以根據(jù)內(nèi)容進(jìn)行自適應(yīng)調(diào)整，來保證信息的顯示完整性，給用戶以良好的體驗(yàn)。
(9)選項(xiàng)便捷性：表單填寫要始終遵循能不填寫就不填寫，能選擇就不要輸入的原則。當(dāng)選項(xiàng)多于5個(gè)時(shí)，適合使用下拉框的形式進(jìn)行展示。當(dāng)選項(xiàng)內(nèi)容過多，超過下拉框的高度，用戶篩選比較困難時(shí)，可以考慮是否輸入更快，采用輸入的方式。
B端表格的設(shè)計(jì)本著清晰易讀的原則進(jìn)行，設(shè)計(jì)上需要我們注意以下四點(diǎn)：
(1)表格寬度：表格寬度的處理需要考慮自適應(yīng)問題，主要有三種方式：
a.設(shè)定表格的最小寬度，最大寬度不做限制，可以無限延伸，當(dāng)表格達(dá)到最小寬度時(shí)，做極限處理；
b.根據(jù)需要設(shè)定多個(gè)等級(jí)的最小單元格寬度，當(dāng)單元格達(dá)到最小寬度時(shí)，做極限處理；
c.也可以按照表格寬度的百分比，設(shè)置單元格寬度，或者固定部分無放大需求的單元格寬度，對剩余單元格按照百分比進(jìn)行縮放；
(2)極限處理：極限處理主要針對最小寬度，當(dāng)表格達(dá)到最小寬度時(shí)，信息展示不全的情況下，常見的處理方式有：文本信息縮略顯示、文本信息換行顯示、橫向滾動(dòng)顯示。
(3)單元格高度：單元格的高度直接影響表格的高度，信息呈現(xiàn)量，以及閱讀體驗(yàn)。單元格高度一般在38px~58px之間，高度太大或者太小都不利于閱讀，個(gè)人實(shí)踐建議高度為字體行高的2.5倍。
(4)對齊方式：為了提升瀏覽效率和數(shù)據(jù)的對比效率，通常采用文字左對齊，長數(shù)字右對齊的方式，空數(shù)據(jù)使用“-”填充。
總之，做好B端產(chǎn)品的設(shè)計(jì)，需要我們多思考、多總結(jié)，規(guī)范與標(biāo)準(zhǔn)不是一成不變的，設(shè)計(jì)過程中要與業(yè)務(wù)、產(chǎn)品、前端多溝通，才能夠做出體驗(yàn)更好的產(chǎn)品。
作者：陳小花兒 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
01
什么是靈動(dòng)島（Dynamic island）
2022蘋果秋季新品發(fā)布會(huì)，備受關(guān)注的新一代iPhone如期而至，此次發(fā)布會(huì)最大的亮點(diǎn)是iPhone 14 Pro系列一改之前「劉?！乖O(shè)計(jì)，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實(shí)時(shí)變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創(chuàng)新稱之為靈動(dòng)島（Dynamic island）。
02
靈動(dòng)島能做什么 / 不能做什么
靈動(dòng)島其實(shí)可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。
來電
當(dāng)有來電時(shí)，靈動(dòng)島會(huì)發(fā)生變化，并在后臺(tái)打電話時(shí)顯示通話時(shí)間和聲音波紋。
音樂
有點(diǎn)類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進(jìn)、后退等功能。
Airpods
連接AirPods后，AirPods的型號(hào)外觀和當(dāng)前電量會(huì)一起顯示。
導(dǎo)航
顯示導(dǎo)航方向和距離，并且能夠在適當(dāng)?shù)臅r(shí)候放大顯示更多導(dǎo)航信息。
Face ID
以前Face ID認(rèn)證會(huì)顯示在屏幕中間，現(xiàn)在集成于靈動(dòng)島的擴(kuò)展功能之中。
充電
當(dāng)充電時(shí)，會(huì)顯示充電的狀態(tài)以及當(dāng)前電量百分比。
當(dāng)然，目前除了官方展示的這些功能以外，還會(huì)有更多的應(yīng)用方式，在此不一一列舉。但靈動(dòng)島也并不是萬能的，例如會(huì)存在以下的局限性：
重度使用場景
從官方給出的樣例來看，靈動(dòng)島更多的是承擔(dān)了消息通知和提醒的作用，并不適用于重度使用和復(fù)雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。
過于復(fù)雜的圖形
受限于前置物理攝像頭，靈動(dòng)島這個(gè)區(qū)域并不能顯示過于復(fù)雜的圖形，并需要避開攝像頭區(qū)域，因?yàn)樵搮^(qū)域是不能顯示任何圖像的。
軟硬件的邊界
靈動(dòng)島的實(shí)際效果并不會(huì)像宣傳圖中那樣好，特別是在反光強(qiáng)烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發(fā)光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區(qū)分。
03
對于靈動(dòng)島的各方反應(yīng)
新事物的出現(xiàn)，總會(huì)伴隨著支持和反對兩種聲音，此次靈動(dòng)島的創(chuàng)新交互，自然也是褒貶不一，還需要經(jīng)受時(shí)間的考驗(yàn)，因?yàn)榧词故翘O果這樣的公司也難免會(huì)犯錯(cuò)，比如3D Touch、MacBook上的Touch bar等。
支持方認(rèn)為「靈動(dòng)島是繼劉海屏之后的又一個(gè)成功設(shè)計(jì)，甚至?xí)絼⒑Ｆ粒軞g迎」。
「靈動(dòng)島的設(shè)計(jì)非常討巧，同時(shí)也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分，首先是羅永浩第一時(shí)間發(fā)表了自己的觀點(diǎn)，表面上是硬贊這個(gè)創(chuàng)新，但實(shí)則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調(diào)整得跟粉底差不多」
很多的輿論認(rèn)為，靈動(dòng)島的創(chuàng)新是蘋果的一種無奈和妥協(xié)，因?yàn)樽詮牡谝淮鷌Phone革新性的使用觸摸屏之后，十多年以來手機(jī)在工業(yè)設(shè)計(jì)方面并沒有太多的創(chuàng)新，大部分廠家是在屏幕分辨率，后蓋材質(zhì)，攝像頭像素上面做文章，而蘋果作為一個(gè)工業(yè)設(shè)計(jì)創(chuàng)新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動(dòng)島的創(chuàng)新，被認(rèn)為是工業(yè)設(shè)計(jì)乏力之后推動(dòng)交互設(shè)計(jì)創(chuàng)新的無奈之舉。
但無論支持還是反對，前置攝像頭挖孔屏終究是一個(gè)過渡性的方案，最終會(huì)被全面屏所替代，而在這個(gè)過渡時(shí)期，很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。
04
為什么國產(chǎn)手機(jī)不做靈動(dòng)島
國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉?！挂酝?，單攝像頭「圓孔」和雙攝像頭「藥丸」設(shè)計(jì)都已經(jīng)非常成熟，但是為什么經(jīng)過這么多年的迭代，依然沒有創(chuàng)新呢？
思維方式的差異
國產(chǎn)手機(jī)廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎(chǔ)，把這個(gè)區(qū)域運(yùn)用到極致。
缺少創(chuàng)新和引領(lǐng)者
似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強(qiáng)不強(qiáng)大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內(nèi)卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關(guān)注從0到1，因?yàn)檫@樣做的性價(jià)比的確不高。
市場的接受和認(rèn)可程度
當(dāng)劉海屏第一次出現(xiàn)的時(shí)候，很多用戶都在吐槽，其中也包括很多蘋果的忠實(shí)用戶，寧愿買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)欄的其它信息融為一體。
榮耀的通話時(shí)間膠囊和自拍膠囊，都以前置攝像頭為基礎(chǔ)做延展，可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗(yàn)。
雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展，但從效果和想法來看，也與靈動(dòng)島的概念比較類似。
HTC曾經(jīng)出過一款HTC U Ultra，當(dāng)然那時(shí)候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外，幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。
05
對設(shè)計(jì)師的影響
靈動(dòng)島的出現(xiàn)，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做，就好比「劉海屏」首次出現(xiàn)的時(shí)候，需要設(shè)計(jì)師對全新交互邏輯、卡片行為、動(dòng)畫等重新適配。那么對于「靈動(dòng)島」我想需要考慮的是這幾個(gè)方面。
新的交互方式
之所以叫靈動(dòng)島，就是因?yàn)樗恰胳`動(dòng)」的，擁有不同的狀態(tài)變化，以適應(yīng)各種功能提示和操作。設(shè)計(jì)師在使用這個(gè)功能的時(shí)候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態(tài)的容器可以裝載不同的內(nèi)容，相比于以往常規(guī)的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時(shí)候，留給設(shè)計(jì)師更多的想象空間。
新的表達(dá)方式
靈動(dòng)島相當(dāng)于一個(gè)永遠(yuǎn)在桌面上的島嶼，比任何App的優(yōu)先級(jí)都要高，所以會(huì)成為各個(gè)應(yīng)用的必爭之地，使用一種好的表達(dá)方式，必然能夠達(dá)到事半功倍的效果，因此也是考驗(yàn)設(shè)計(jì)師在寸土寸金的區(qū)域中，通過視覺化手段表達(dá)的能力。
最后，我想蘋果的初衷是為了更好的用戶體驗(yàn)，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會(huì)得到用戶的喜愛和市場的認(rèn)可。
我認(rèn)為靈動(dòng)島既是一種創(chuàng)新也是一種妥協(xié)，對于工業(yè)設(shè)計(jì)硬件創(chuàng)新乏力的妥協(xié)，更是對技術(shù)發(fā)展的妥協(xié)。我也相信，真正的全面屏?xí)r代終究會(huì)到來，期待那個(gè)時(shí)候蘋果再一次給我們帶來真正意義上的，里程碑式的，創(chuàng)新！
作者：撿蘑菇的人
轉(zhuǎn)載請注明：站酷
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
作為產(chǎn)品設(shè)計(jì)師，無論在什么公司什么崗位，都免不了與研發(fā)團(tuán)隊(duì)進(jìn)行溝通，如果不進(jìn)行溝通就無法交付我們的設(shè)計(jì)稿，即便很成熟的團(tuán)隊(duì)也會(huì)出現(xiàn)在溝通上的問題，在產(chǎn)品研發(fā)的過程中溝通是必要的流程，為了創(chuàng)造一致的用戶體驗(yàn)，設(shè)計(jì)師需要與開發(fā)人員在視覺上、交互上達(dá)到一致的想法，但是講起來簡單，說起來難，在整個(gè)過程設(shè)計(jì)師和開發(fā)都是站在不同的角度去看待問題的，我們思考的如何達(dá)到美觀的界面、流暢的交互等問題，而開發(fā)關(guān)心的是做這件事我需要花費(fèi)多長時(shí)間，實(shí)現(xiàn)難度如何等等，首先目標(biāo)就不在同一個(gè)維度，那么必然會(huì)造成我們在對接的時(shí)候出現(xiàn)掰扯的問題，最后耽誤的都是雙方的時(shí)間，更嚴(yán)重點(diǎn)頁面最后的體驗(yàn)也沒有達(dá)到一致。
任何團(tuán)隊(duì)都會(huì)出現(xiàn)設(shè)計(jì)師與開發(fā)脫節(jié)的問題很常見，遇見什么問題解決什么問題，畢竟人與人的性格、溝通方式等都是不同的。
我們只需要在不同的流程里去做不同的事情就可以避免這些問題了，對于任何設(shè)計(jì)師基本都會(huì)適用，往下看～
1. 產(chǎn)品信息文檔確認(rèn)
在接到一個(gè)需求的時(shí)候產(chǎn)品經(jīng)理會(huì)通知上下游進(jìn)行需求的評(píng)審，這時(shí)候一般會(huì)是產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)三個(gè)組進(jìn)行需求的評(píng)估，具體的需求評(píng)審在本章就不細(xì)講，我們此次主要講設(shè)計(jì)師與開發(fā)相關(guān)的信息同步。
在評(píng)審過程中產(chǎn)品經(jīng)理會(huì)把需求背景、需求目標(biāo)等相關(guān)信息同步給相關(guān)的人員，作為設(shè)計(jì)師這時(shí)候就要關(guān)注需求目標(biāo)，這個(gè)目標(biāo)不僅是產(chǎn)品經(jīng)理的目標(biāo)，也是整個(gè)項(xiàng)目的目標(biāo)，所以與每個(gè)人都相關(guān)，需求目標(biāo)清晰后期推動(dòng)開發(fā)的時(shí)候才會(huì)有依據(jù)。
評(píng)審會(huì)議結(jié)束后，產(chǎn)品經(jīng)理會(huì)同步期望上線時(shí)間，如果是常規(guī)需求，會(huì)當(dāng)時(shí)就評(píng)估出設(shè)計(jì)時(shí)間、開發(fā)時(shí)時(shí)間，我們設(shè)計(jì)師這時(shí)候就要關(guān)注這些時(shí)間，因?yàn)槲覀兺ㄟ^上線時(shí)間就可以估算開發(fā)節(jié)奏，給我們后期的修改以及臨時(shí)添加的一些動(dòng)效制作時(shí)間會(huì)留出充裕的時(shí)間。
設(shè)計(jì)評(píng)審流程細(xì)節(jié)本章不進(jìn)行細(xì)節(jié)講解，本章重點(diǎn)講與開發(fā)對接。
近期我在公司做了一個(gè)商業(yè)化的直播項(xiàng)目需求，由于產(chǎn)品方?jīng)]有過多的產(chǎn)研經(jīng)驗(yàn)（后面才知道），在項(xiàng)目前期雖然進(jìn)行了評(píng)審，但是評(píng)審的參與人員沒有拉上我，等到需求給到我的時(shí)候，我順便問了一下才知道已經(jīng)評(píng)審?fù)炅?，這對于我來講是沒辦法進(jìn)行設(shè)計(jì)輸出的。
第一我不知道評(píng)審過程中開發(fā)的排期時(shí)間，以及測試時(shí)間，如果研發(fā)開始開發(fā)的時(shí)間與設(shè)計(jì)稿交付時(shí)間有沖突那么就是影響上線節(jié)奏。
第二涉及的交互操作產(chǎn)品經(jīng)理是不清楚的，有沒有哪些地方需要加復(fù)雜的交互產(chǎn)品也是同樣不清楚，那么開發(fā)就會(huì)默認(rèn)這是常規(guī)的交互，如果過程中添加那將會(huì)影響開發(fā)進(jìn)度。
第三流程上不符合要求，期間如果有關(guān)鍵性信息沒有達(dá)到共識(shí)，那將會(huì)釀成很嚴(yán)重的后果。
面對這種已經(jīng)發(fā)生的事情，如果重新拉個(gè)會(huì)評(píng)審一次會(huì)耽誤大家的時(shí)間，很多人是不愿意的，但是呢我也不能單聽產(chǎn)品一方面的溝通，因?yàn)楹芏嗉?xì)節(jié)他是不清楚的（產(chǎn)品經(jīng)驗(yàn)較少），所以當(dāng)時(shí)我的處理方法呢是我先通過產(chǎn)品給出的上線時(shí)間，然后與前端同學(xué)單獨(dú)確認(rèn)一下，這樣至少保證上線時(shí)間是同步的，至于其他的細(xì)節(jié)我當(dāng)時(shí)是利用設(shè)計(jì)評(píng)審的方式同步給開發(fā)交互邏輯、動(dòng)效方式等。
此次這個(gè)需求呢本身不大是在舊版的基礎(chǔ)上優(yōu)化功能，理論上不需要走設(shè)計(jì)評(píng)審流程，但是因?yàn)楫?dāng)時(shí)沒有通知參加評(píng)審導(dǎo)致很多信息不同步，而我需要傳達(dá)給開發(fā)的東西也不能在后期在告訴他們，所以我利用設(shè)計(jì)評(píng)審流程把一些交互信息同步給開發(fā)。
2. 設(shè)計(jì)圖準(zhǔn)備
在設(shè)計(jì)稿完成后，如果是小需求一般是直接交付給研發(fā)，如果是大需求一般會(huì)進(jìn)行設(shè)計(jì)評(píng)審，主要評(píng)審維度是設(shè)計(jì)稿是否與產(chǎn)品文檔同步，設(shè)計(jì)目標(biāo)是否符合產(chǎn)品目標(biāo)等等，其次如果有復(fù)雜交互效果、設(shè)計(jì)細(xì)節(jié)、組件復(fù)用情況也需要與研發(fā)對齊。
若是直接交付研發(fā)，我們需要提前把設(shè)計(jì)稿內(nèi)涉及的切圖、圖層間距、動(dòng)效使用區(qū)域等關(guān)鍵信息提前準(zhǔn)備好，避免在開發(fā)過程中臨時(shí)進(jìn)行補(bǔ)充，影響開發(fā)節(jié)奏。
在設(shè)計(jì)稿內(nèi)的切圖，我們要提前與研發(fā)溝通，切圖的范圍和形式，最后把設(shè)計(jì)稿傳入公司統(tǒng)一使用的協(xié)作網(wǎng)站，如藍(lán)湖、即時(shí)設(shè)計(jì)等平臺(tái)，大公司會(huì)有自己的協(xié)作平臺(tái)。
3. 確定設(shè)計(jì)規(guī)范組件
講個(gè)自己的踩坑案例，還是商業(yè)化的那個(gè)需求，由于為了商業(yè)化賦能，產(chǎn)品的需求文檔并沒有按照規(guī)范組件進(jìn)行設(shè)計(jì)，但是由于產(chǎn)品文檔標(biāo)注的不清楚，在設(shè)計(jì)過程中不斷與產(chǎn)品進(jìn)行溝通，最后結(jié)果當(dāng)然也是無法復(fù)用組件，當(dāng)時(shí)我就把組件規(guī)范修改了，重點(diǎn)是研發(fā)不知道，我當(dāng)時(shí)想的是研發(fā)通過產(chǎn)品文檔應(yīng)該會(huì)了解到，事實(shí)確實(shí)我大意了，后面就導(dǎo)致組件方面我與研發(fā)進(jìn)行了相愛相殺，通過自己的以身作則我勸大家不要忽略任何一個(gè)細(xì)節(jié)！
設(shè)計(jì)規(guī)范組件在設(shè)計(jì)前就需要進(jìn)行確認(rèn)，項(xiàng)目是否有存留的規(guī)范組件，如果有，需要在設(shè)計(jì)前以及設(shè)計(jì)中去確認(rèn)哪些模塊是否可以調(diào)用，開發(fā)是否已經(jīng)將組件寫入代碼中，如果不了解這些情況貿(mào)然的設(shè)計(jì)，那在對接過程中會(huì)出現(xiàn)修改設(shè)計(jì)稿的風(fēng)險(xiǎn)。
如果是創(chuàng)新項(xiàng)目并且沒有相關(guān)的設(shè)計(jì)規(guī)范和組件，我們則需要在設(shè)計(jì)前就把規(guī)范組件的時(shí)間給算到需求內(nèi)，一個(gè)產(chǎn)品的規(guī)范組件，決定著后續(xù)產(chǎn)品是否嚴(yán)謹(jǐn)、項(xiàng)目研發(fā)效率等等，因?yàn)橐?guī)范組件不止是設(shè)計(jì)師的事情，還是團(tuán)隊(duì)研發(fā)比較關(guān)注的事情，研發(fā)們在代碼里同樣需要進(jìn)行規(guī)范的組件復(fù)用。
4. 輸出設(shè)計(jì)文檔
當(dāng)在做一些在舊版的產(chǎn)品頁面上優(yōu)化的需求時(shí)，還需要輸出對應(yīng)設(shè)計(jì)文檔，給前端和測試看，設(shè)計(jì)文檔需要寫清楚設(shè)計(jì)稿優(yōu)化的點(diǎn)，例如圖標(biāo)的細(xì)節(jié)優(yōu)化、文字的字號(hào)優(yōu)化、色彩優(yōu)化、界面交互等等細(xì)節(jié)。
如果涉及到一些頁面的交互，我們在提供設(shè)計(jì)稿的同時(shí)需要把具象的交互文件單獨(dú)交給開發(fā)，不要奢望前端大佬們能腦補(bǔ)出頁面之間的交互，我們不及時(shí)提供的話，后期修改研發(fā)可能會(huì)直接拒絕，并且口吐芬芳～（最簡單的找到競品頁面演示給研發(fā)看）。
我的方法
前端在看我們設(shè)計(jì)稿時(shí)如果不是結(jié)構(gòu)上的修改，他們不會(huì)去關(guān)注這些細(xì)節(jié)的點(diǎn)，而給測試看的目的是，有些公司測試會(huì)幫我們進(jìn)行走查，如果不出設(shè)計(jì)文檔測試沒辦法進(jìn)行對比（測試提 bug 比設(shè)計(jì)師提 bug 更具有一些權(quán)威性）。
這里看一下我工作中輸出的設(shè)計(jì)文檔，我會(huì)把需求的背景、目標(biāo)在設(shè)計(jì)文檔上強(qiáng)調(diào)一下，再添加上設(shè)計(jì)目標(biāo)，設(shè)計(jì)目標(biāo)為了需求目標(biāo)去賦能，這樣在文檔開始就與研發(fā)達(dá)成共識(shí)，讓研發(fā)是帶著共同完成目標(biāo)的態(tài)度去看設(shè)計(jì)文檔，便于我們后續(xù)推動(dòng)，其次放上頁面之間的說明。
5. 交付開發(fā)
最后總結(jié)一下，我們要交付給開發(fā)什么東西，首先是基本的設(shè)計(jì)稿，包括切圖、間距、動(dòng)效文件，其次是設(shè)計(jì)文檔，包括需求背景、需求目標(biāo)、設(shè)計(jì)目標(biāo)、設(shè)計(jì)修改點(diǎn)說明。
1. 不要頻繁修改
在交付設(shè)計(jì)稿后（基本設(shè)計(jì)圖、設(shè)計(jì)文檔），我們就要避免頻繁修改，頻繁的修改會(huì)導(dǎo)致設(shè)計(jì)稿來回更新，對開發(fā)造成一種困惑，最后在測試的時(shí)候，開發(fā)同學(xué)容易寫亂，另一方面工作過的設(shè)計(jì)師都應(yīng)該經(jīng)歷過，我們在開發(fā)的過程中修改設(shè)計(jì)稿，大部分的開發(fā)都會(huì)帶點(diǎn)情緒，甚至不給我們改，這其實(shí)是因?yàn)榇蠖嚅_發(fā)的代碼寫的是比較規(guī)范統(tǒng)一的，如果中途進(jìn)行修改可能會(huì)影響開發(fā)同學(xué)的代碼規(guī)范，就像我們在完成一個(gè)設(shè)計(jì)稿的時(shí)候，產(chǎn)品經(jīng)理突然改變需求，我們也是擔(dān)心做好的設(shè)計(jì)稿因?yàn)樾薷亩淮騺y。
如果實(shí)在需要修改，一定要說明原因，而不是突然一個(gè)想法覺得這里設(shè)計(jì)不合適就進(jìn)行修改（產(chǎn)品需求修改除外），我們要換位思考，具有同理心去工作，并且讓開發(fā)同學(xué)感受到我們是在幫助他們減少工作量，這樣在后續(xù)的一些需求中，我們的對接會(huì)很順暢。
2. 重要信息及時(shí)通知
上面說的是站在設(shè)計(jì)師的角度去修改，還有一種情況是研發(fā)在開發(fā)過程中，作為設(shè)計(jì)師的我們突然收到產(chǎn)品經(jīng)理的修改建議，這時(shí)候我們需要及時(shí)的同步給開發(fā)，或者給開發(fā)同事達(dá)成共識(shí)信息，因?yàn)楹芏鄷r(shí)候，產(chǎn)品經(jīng)理讓我們修改的時(shí)候往往不會(huì)通知開發(fā)，因?yàn)閷τ诋a(chǎn)品經(jīng)理而言就是一個(gè)小的修改，例如改個(gè)位置、改個(gè)顏色等等，但不管是對我們還是對于開發(fā)其實(shí)都是比較重要的，不及時(shí)同步就會(huì)出現(xiàn)不好的結(jié)果，如果在測試階段沒有發(fā)現(xiàn)問題，上線后就會(huì)造成設(shè)計(jì)師背鍋的情況。
我曾經(jīng)在做一個(gè)頁面改版的時(shí)候，就遇到類似的問題，當(dāng)時(shí)產(chǎn)品找到我說改一個(gè)地方的交互，并且我也覺得那個(gè)交互方式應(yīng)該改，當(dāng)時(shí)的我以為產(chǎn)品經(jīng)理會(huì)同時(shí)告訴開發(fā)修改的地方，但是直到項(xiàng)目上線后開發(fā)都沒修改那個(gè)地方的交互，本來這個(gè)修改點(diǎn)是個(gè)小事情，誰知?jiǎng)偤媚且粋€(gè)版本被用戶吐槽那個(gè)頁面的交互，結(jié)果可想而知領(lǐng)導(dǎo)拉個(gè)會(huì)議開始復(fù)盤，為什么沒有改，索性大家沒有互相甩鍋的情況，產(chǎn)品經(jīng)理說沒有同步到開發(fā)，而我也是幫產(chǎn)品兜了一下說更新設(shè)計(jì)稿沒有告訴開發(fā)，這個(gè)事情原本是個(gè)很小的事情，只需要我順口同步給開發(fā)，就能夠避免的，就因?yàn)槲覜]有及時(shí)同步，造成用戶的反饋，影響了產(chǎn)品的體驗(yàn)。
所以各位設(shè)計(jì)師工作中如果遇到類似的事情一定要及時(shí)同步！
3. 統(tǒng)一需求目標(biāo)
開始講到過，在需求評(píng)審的時(shí)候要與開發(fā)對齊目標(biāo)，為什么需要對齊目標(biāo)，因?yàn)橐粋€(gè)項(xiàng)目如果目標(biāo)不對齊，那么每個(gè)人都會(huì)站在自己的角度去做這個(gè)需求，設(shè)計(jì)師思考的是通過設(shè)計(jì)的手段，去幫助產(chǎn)品完成目標(biāo)，如果設(shè)計(jì)稿上的復(fù)雜效果較多的時(shí)候，開發(fā)則會(huì)考慮你為什么這么做，這么做開發(fā)成本非常高等等，這也是說為什么我們開始就講要輸出設(shè)計(jì)文檔，如果這一切都不存在的話就會(huì)導(dǎo)致開發(fā)是帶著疑問寫我們的頁面，如果過程中在修改需求什么的，那我們跟開發(fā)又要相愛相殺了。
我的設(shè)計(jì)方式是通常是在產(chǎn)品評(píng)審階段就與開發(fā)明確講清楚，我大概要做什么樣的效果，什么的交互形式，預(yù)計(jì)什么時(shí)候會(huì)交初步方案，中途也可能會(huì)有修改的點(diǎn)等等，提前讓開發(fā)有個(gè)心理預(yù)期，避免在開發(fā)過程中產(chǎn)生抵抗情緒。
我的經(jīng)驗(yàn)
4. 輸出交互動(dòng)畫
如果在前期沒有時(shí)間進(jìn)行動(dòng)效設(shè)計(jì)并沒有關(guān)系，研發(fā)在開發(fā)過程中可以在把動(dòng)效方面給空出來后續(xù)寫，這里講的交互動(dòng)畫分為兩種，一種是展示的動(dòng)畫，一種是 ui 中的動(dòng)效。
展示動(dòng)畫
目的是為了告知開發(fā)頁面運(yùn)動(dòng)的軌跡，在 1-4 中講到我個(gè)人用的方法，大家如果是剛對接研發(fā)的話，建議還是輸出完整的交互動(dòng)畫，這里推薦一些工具 AE、Principle、Pixso、Figma 等。
AE：大家就比較熟悉了，經(jīng)典的動(dòng)效繪制軟件，什么樣的效果都能實(shí)現(xiàn)，但是使用成本比較高（不建議）
Principle：國外的一款交互軟件，制作頁面交互很方面，可以直接導(dǎo)入 figma 和 sketch，由于是國外軟件需要使用英文界面，但是國內(nèi)也有漢化版。
Pixso：國產(chǎn)最新的設(shè)計(jì)軟件與 figma 類似，做交互的方式是使用多個(gè)頁面添加熱區(qū)進(jìn)行使用，具體體驗(yàn)如何還不清楚（可以用用）
Figma：設(shè)計(jì)軟件目前的天花板，流暢的體驗(yàn)，支持頁面動(dòng)畫設(shè)計(jì)，但是需要安裝插件才可以（建議使用）
動(dòng)效文件
這個(gè)比較重要！我們一定要與研發(fā)同事溝通好，產(chǎn)品內(nèi)使用什么樣格式的動(dòng)效文件，統(tǒng)一后能提升后續(xù)的開發(fā)效率，動(dòng)效格式使用亂套的話，后續(xù)我們做更新迭代時(shí)做替換會(huì)很麻煩，開發(fā)也同樣如此，這里推薦幾種動(dòng)效格式文件，分別是 GIF、json、pag、svga 這 4 種。
GIF：傳統(tǒng)的動(dòng)效文件格式，優(yōu)點(diǎn)是學(xué)習(xí)成本低，第一個(gè)缺點(diǎn)是內(nèi)存大，圖片容易失真模糊，他的原理就是把每一幀的圖片融合在一起，最后形成動(dòng)畫，圖片越多，內(nèi)存越大，第二個(gè)缺點(diǎn)是占用產(chǎn)品資源，當(dāng)內(nèi)存過高時(shí)，在加載時(shí)會(huì)出現(xiàn)卡頓。
Json：該文件格式是通過 Lottie 實(shí)現(xiàn)的，是 Airbnb 開發(fā)的一款能夠?yàn)樵鷳?yīng)用添加動(dòng)畫效果的開源工具，它的優(yōu)點(diǎn)就是內(nèi)存小、無需加載、動(dòng)畫不會(huì)失真，缺點(diǎn)呢就是支持得動(dòng)畫方式?jīng)]有 gif 那么全面，以及使用成本也比較高。
具體使用步驟是需要我們裝 ae 插件 bodymovin，通過插件導(dǎo)出 json，常遇見的問題就是在導(dǎo)出漸變動(dòng)畫時(shí)，漸變效果會(huì)消失，這是因?yàn)槲覀?ae 安裝得都是中文版，而該插件更多的適配是英文版，不過沒關(guān)系這里可以把漸變效果的名字改為 gradient fill1 就可以了，如果多個(gè)漸變的話我們更改后面序列號(hào)就可以，比如 gradient fill1、gradient fill2、gradient fill3…，這里把漢化插件鏈接也給大家找到了。
網(wǎng)站鏈接：https://zdo.fun/?p=557
我的經(jīng)驗(yàn)
Pag：pag 是騰訊研發(fā)的一種技術(shù)文件，最初主要用于游戲動(dòng)畫和直播動(dòng)畫，用來解決復(fù)雜的動(dòng)畫效果，目前在 ui 頁面中運(yùn)用也比較多，優(yōu)點(diǎn)是占比內(nèi)存比 json 文件更小，支持的動(dòng)畫方式也更豐富，運(yùn)行時(shí)可編輯，缺點(diǎn)是適配原生有些問題，壓縮位圖時(shí)會(huì)出現(xiàn)不顯示，這個(gè)軟件目前還在完善階段，我曾經(jīng)也使用過，后來因?yàn)檫m配問題就放棄了，感興趣的大家可以通過下面鏈接下載。
網(wǎng)站鏈接：https://pag.io/docs/install.html
svga：該文件格式的強(qiáng)大之處在于可以完整的將位圖轉(zhuǎn)換成二進(jìn)制代碼，并且內(nèi)存占比較于 json 更小，播放資源占用更低，并且技術(shù)上相對穩(wěn)定（建議使用）
網(wǎng)站鏈接：https://svga.io/designer.html
我們看下 svg 實(shí)現(xiàn)的效果
最后，我們一定要統(tǒng)一產(chǎn)品內(nèi)使用的動(dòng)效文件格式，這樣既方便我們，也方便開發(fā)，讓開發(fā)看到我們設(shè)計(jì)師的嚴(yán)謹(jǐn)性，便于后續(xù)合作。
1. 跟進(jìn)開發(fā)進(jìn)度
作為設(shè)計(jì)師，我們需要實(shí)時(shí)了解開發(fā)的進(jìn)度，這樣能夠保證我們在過程中掌握自己的設(shè)計(jì)節(jié)奏，什么時(shí)間交給開發(fā)動(dòng)效文件，如果進(jìn)行修改也可以不影響上線時(shí)間（當(dāng)然不建議這樣做），那么具體需要怎么跟進(jìn)呢，大概分為以下幾個(gè)維度。
時(shí)間進(jìn)度跟進(jìn)：
設(shè)計(jì)師可以時(shí)不時(shí)的問一嘴，是否能按照正常的計(jì)劃時(shí)間節(jié)點(diǎn)提測（正常需求提交后，開發(fā)會(huì)給出開發(fā)排期，盡量按照時(shí)間排期走，否則項(xiàng)目進(jìn)度會(huì)變得很不可控）。
如果開發(fā)反饋時(shí)間會(huì)有延期風(fēng)險(xiǎn)，那設(shè)計(jì)師第一時(shí)間就要了解原因，以及預(yù)計(jì)延期多久，然后自身評(píng)估以下對設(shè)計(jì)上是否有影響。
需求變更跟進(jìn)：
一般開發(fā)過程中，或多或少都會(huì)出現(xiàn)一些需求調(diào)整/變更的點(diǎn)，那么其中就會(huì)涉及設(shè)計(jì)上的改動(dòng)，改動(dòng)小的話產(chǎn)品經(jīng)理有時(shí)候會(huì)直接告訴我們，并不會(huì)告訴開發(fā)，這時(shí)候如果身為設(shè)計(jì)師的我們要及時(shí)通知開發(fā)，并說明原因（避免爭論）。
并且，需求變更后，需要和開發(fā)評(píng)估新的項(xiàng)目上線時(shí)間點(diǎn)，站在我們或者產(chǎn)品角度理解有時(shí)候我們認(rèn)為的修改，對于開發(fā)來講是耗費(fèi)時(shí)間較長的，需要我們注意是否會(huì)影響上線時(shí)間。
交互動(dòng)效實(shí)現(xiàn)跟進(jìn)：
在 2-4 中講到我們要輸出交互動(dòng)畫，雖然我們輸出的動(dòng)畫很直觀，以及動(dòng)效文件也完整，但是避免不了認(rèn)知上的偏差，有時(shí)候開發(fā)會(huì)按照技術(shù)難度以及自身理解去完整交互效果，我們中途要隨時(shí)跟進(jìn)了解，避免開發(fā)在錯(cuò)誤的路上越走越遠(yuǎn)。
測試跟進(jìn)：
及時(shí)了解該需求是否已經(jīng)提測、哪些還未提測，若到了提測時(shí)間的功能未進(jìn)入測試，可以詢問產(chǎn)品或開發(fā)什么原因，這樣對項(xiàng)目或設(shè)計(jì)師都是負(fù)責(zé)的。
另外一點(diǎn)是我們設(shè)計(jì)師需要在提測階段介入 UI 走查，因?yàn)楦鱾€(gè)公司或者項(xiàng)目測試時(shí)間有長有短，所以我們要及時(shí)把 UI 走查工作介入進(jìn)去，給開發(fā)預(yù)留出修改時(shí)間，有的小公司不重視 UI 走查流程，這里我們就可以自驅(qū)進(jìn)行走查，主動(dòng)找測試同學(xué)了解提測時(shí)間，及時(shí)走查，保證頁面還原度。
2. 設(shè)計(jì)走查
走查是 UI 工作中最為重要的工作，它決定著產(chǎn)品上線后能否完美的展現(xiàn)給用戶，下面我大致把走查的流程以及范圍給大家梳理下。
創(chuàng)建走查文檔
在 UI 走查階段，我們首先需要建立走查文檔便于開發(fā)瀏覽解決，走查文檔主要包含日期、版本、項(xiàng)目名稱、模塊、端口、問題描述、修改狀態(tài)、圖片標(biāo)注，這樣一方面能夠讓問題更加詳細(xì)，體現(xiàn)設(shè)計(jì)師的專業(yè)度，一般我是使用在線表格去建立走查文檔，當(dāng)然這個(gè)看每個(gè)公司所使用的協(xié)作平臺(tái)。
開通手機(jī)權(quán)限
一般在走查移動(dòng)端產(chǎn)品時(shí)，安裝測試包需要開通賬號(hào)權(quán)限，這里可以找公司的開發(fā)或者測試同事給開通，避免影響走查效率。
走查范圍
分為基礎(chǔ)走查、細(xì)節(jié)走查、適配走查
基礎(chǔ)走查包含字體、顏色、圖標(biāo)、間距、對齊方式等具體可根據(jù)產(chǎn)品形態(tài)進(jìn)行延伸，其中間距走查比較費(fèi)時(shí)間，需要我們通過測試機(jī)截圖后，按照倍數(shù)縮放到源文件內(nèi)進(jìn)行測量，測試機(jī)分辨率需要保證與設(shè)計(jì)稿一致，否則測量不準(zhǔn)確，例如設(shè)計(jì)圖是 375*812，以 ios 為例測試機(jī)則需要使用與 375*812 分辨率相同的尺寸測試。
細(xì)節(jié)走查包含字體截字、按壓狀態(tài)、組件內(nèi)容、交互狀態(tài)
適配走查包含關(guān)鍵信息是否超出屏幕、是否出現(xiàn)擠壓、是否出現(xiàn)重疊、識(shí)別度是否清晰
3. 避免添加復(fù)雜交互
在走查階段如果我們發(fā)現(xiàn)部分的交互效果不太理想，并未達(dá)到預(yù)期，我們可以與開發(fā)進(jìn)行溝通是否可以修改，或者添加新的交互效果，因?yàn)樵谶@個(gè)階段我們重新設(shè)計(jì)或者定義一個(gè)新的交互動(dòng)效的話，會(huì)增加非常大的開發(fā)工作量，可能也會(huì)與開發(fā)產(chǎn)生爭吵，我們在這個(gè)時(shí)期盡量避免這個(gè)問題，如果實(shí)在沒有解決辦法的時(shí)候再去添加新的交互。
我在工作中，如果遇到這種事情，會(huì)分兩點(diǎn)考慮這個(gè)事情。
第一評(píng)估下當(dāng)下這個(gè)交互效果是否會(huì)影響用戶體驗(yàn)，如果影響用戶體驗(yàn)我會(huì)要求開發(fā)必須 100%還原，當(dāng)然我會(huì)講述清楚為什么改，避免讓開發(fā)產(chǎn)生情緒抵抗。
第二是如果不影響用戶體驗(yàn)，但是還原度沒有達(dá)到預(yù)期，我同樣會(huì)先找開發(fā)進(jìn)行溝通，例如按照交互稿還原會(huì)有什么困難，是時(shí)間上的困難還是技術(shù)上的困難，時(shí)間上如果困難我會(huì)溝通好下一期必須還原到位，技術(shù)上困難我一般會(huì)修改交互形式，盡量保證上線后給用戶展現(xiàn)的是完美的狀態(tài)。
4. 數(shù)據(jù)追蹤
作為設(shè)計(jì)師在需求上線后并不代表需求就結(jié)束了，我們還需要追蹤數(shù)據(jù)情況是好是壞，為什么我們設(shè)計(jì)師要去追蹤這個(gè)數(shù)據(jù)呢，追蹤數(shù)據(jù)是為了讓我們在工作中提升自己的設(shè)計(jì)價(jià)值，隨著現(xiàn)在互聯(lián)網(wǎng)發(fā)展逐漸飽和，那么企業(yè)對于各個(gè)崗位的要求也跟互聯(lián)網(wǎng)初期不一樣，以前我們只需要畫畫圖交付就可以了，但是現(xiàn)在的企業(yè)更看重的是綜合能力，說簡單點(diǎn)就是做 UI 的人很多，優(yōu)秀的 UI 一樣很多，那么我們就得被迫提升核心競爭力否則就是被淘汰。
而追蹤數(shù)據(jù)其實(shí)就是增加我們得核心競爭力，同時(shí)也是能夠體現(xiàn)自己設(shè)計(jì)能力的一項(xiàng)內(nèi)容，設(shè)計(jì)最終是為商業(yè)而服務(wù)的，但我們不能嘴上說說，而是要拿出實(shí)際的行動(dòng)，這個(gè)行動(dòng)就是數(shù)據(jù)，我們的設(shè)計(jì)如何為數(shù)據(jù)賦能的，如何幫業(yè)務(wù)達(dá)到目標(biāo)等等，數(shù)據(jù)如何分析是個(gè)很龐大的體系這里只講下我們身為設(shè)計(jì)師為什么需要追蹤數(shù)據(jù)。
簡單講下工作中數(shù)據(jù)解析的案例。
下面是我做的一個(gè)直播商業(yè)化改版需求，改版背景呢是直播業(yè)務(wù)由原先的為 c 端用戶賦能改為，為 b 端企業(yè)賦能，通過與企業(yè)合作而產(chǎn)生價(jià)值，那么基于這個(gè)直播形態(tài)肯定是需要變化的，需求目標(biāo)由原先的「用戶收益」改為「企業(yè)收益」，新的目標(biāo)具體為提升企業(yè)品牌曝光點(diǎn)擊、互動(dòng)、預(yù)約人數(shù)、提升直播在企業(yè)客戶測的感知收益。
案例
基于這個(gè)目標(biāo)，其實(shí)不難發(fā)現(xiàn)，目標(biāo)已經(jīng)從用戶側(cè)改為大客戶，更多的是為企業(yè)去賦能，頁面的結(jié)構(gòu)肯定需要進(jìn)行變化的，左邊的圖呢是改版之前的，右邊的是改版之后的，那么我當(dāng)時(shí)的思路呢其實(shí)就是基于數(shù)據(jù)方面去進(jìn)行優(yōu)化。
整體：產(chǎn)品策略添加了二級(jí)浮窗用來承載更多內(nèi)容。
直播介紹：首先舊版策略是直播介紹對于用戶而言并不重要，用戶只需要通過看到直播標(biāo)題就能夠了解大致直播內(nèi)容，更多是以引導(dǎo)形式存在，所以信息外漏較少，而新的策略是講企業(yè)介紹默認(rèn)展示在二級(jí)浮窗內(nèi)，用戶可選擇關(guān)閉，提升企業(yè)感知。
投遞簡歷：舊版策略是需要側(cè)重用戶投遞率，因此在預(yù)約界面就展示入口，而新的策略是需要給企業(yè)強(qiáng)化觀看人數(shù)、預(yù)約人數(shù)從而提升客戶價(jià)值，基于這一點(diǎn)，我當(dāng)時(shí)是通過數(shù)據(jù)后臺(tái)看了下預(yù)約頁面的點(diǎn)擊數(shù)據(jù)，發(fā)現(xiàn)點(diǎn)擊率最最高的是「投遞簡歷」入口，而「預(yù)約直播」入口點(diǎn)擊率相對較低，因此把投遞簡歷入口調(diào)賬到浮窗 tab 區(qū)域，降低層級(jí)，讓預(yù)約直播成為視覺焦點(diǎn)，而上線后數(shù)據(jù)也是符合預(yù)期。
企業(yè)關(guān)注：將企業(yè)名稱與關(guān)注結(jié)合并且放大，提升關(guān)注量，強(qiáng)化企業(yè)品牌感知和數(shù)據(jù)感知，關(guān)注與預(yù)約直播兩者無論數(shù)據(jù)高低，都是符合企業(yè)目標(biāo)，從而便于業(yè)務(wù)人員與企業(yè)進(jìn)行合作溝通。
從我這個(gè)案例中我們能清楚看到，基本上任何需求都是可以通過數(shù)據(jù)的維度，進(jìn)行優(yōu)化，并且通過量化指標(biāo)提升設(shè)計(jì)價(jià)值，無論對公司還是個(gè)人都有很大收益，并且我們追蹤數(shù)據(jù)也便于后續(xù)我們與開發(fā)對接時(shí)，可以通過數(shù)據(jù)維度去促進(jìn)我們設(shè)計(jì)上的修改、完善等工作，這也是為什么說我們需要對每個(gè)需求都要進(jìn)行數(shù)據(jù)追蹤。
無論是對接前、對接中、對接后，在哪個(gè)階段都需要我們認(rèn)真對待，熟知這些細(xì)節(jié)后，才能更好的與開發(fā)合作，進(jìn)行項(xiàng)目推進(jìn)，優(yōu)秀的設(shè)計(jì)師不僅是專業(yè)和技術(shù)上的成熟，還需要有協(xié)作上下游的能力，在很多團(tuán)隊(duì)中設(shè)計(jì)師跟開發(fā)都會(huì)面臨不一樣的挑戰(zhàn)最終可能會(huì)因?yàn)槟承﹩栴}發(fā)生沖突，我們需要減少這樣的沖突。
作者：愛吃貓的魚
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
奇數(shù)法則意思是說，在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對稱，這可能會(huì)顯得過于正式和不自然。比如，在一行中排列三個(gè)或五個(gè)卡片會(huì)比 2 個(gè)或 4 個(gè)效果更好，作品會(huì)更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設(shè)計(jì)
三分法構(gòu)圖（也被稱之為黃金網(wǎng)格規(guī)則），在畫面中以水平和豎直方向分成 3×3 的網(wǎng)格和 4 個(gè)交叉點(diǎn)。這個(gè)規(guī)則能很好的協(xié)助設(shè)計(jì)師將最重要的元素放在網(wǎng)格的交叉點(diǎn)上，這樣可以很容易的設(shè)計(jì)出滿意的構(gòu)圖。
為什么會(huì)這樣？因?yàn)槿址?gòu)圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對稱的美，產(chǎn)生了更有吸引力的構(gòu)圖。
你希望用戶關(guān)注哪些地方？高級(jí)設(shè)計(jì)師非常擅長引導(dǎo)用戶的視覺焦點(diǎn)，這種引導(dǎo)可以通過可見和不可見的引導(dǎo)線來完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感，也能為畫面增添視覺沖擊力。
達(dá)到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導(dǎo)線來實(shí)現(xiàn)。利用透視、顏色、對比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導(dǎo)到頁面文字上
大?。╯cale）是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對大小。元素通過大小不同創(chuàng)建視覺層次，其中最大的元素首先會(huì)吸引用戶的注意力，因此看起來是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的，然后逐級(jí)遞減。
比例(Proportion)不同于大小，類似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過大或過小，或者比例失調(diào)時(shí)，設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如，標(biāo)題與子標(biāo)題和正文相比顯得過大。當(dāng)設(shè)計(jì)元素失衡時(shí)，設(shè)計(jì)就會(huì)“感覺不平衡”。
大小和比例都沒做好時(shí)(左圖)，看起來處理的比較細(xì)致了，但依然沒有做到很好，在大小上正文和標(biāo)題分不清(右圖)。
強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強(qiáng)調(diào)(例如在頁面底部有一個(gè)幾乎看不見的“小字”)。強(qiáng)調(diào)是層級(jí)之母，因?yàn)闆]有強(qiáng)調(diào)就沒有層級(jí)。
與其他一些設(shè)計(jì)原則一樣，“強(qiáng)調(diào)”是用來引導(dǎo)人們關(guān)注設(shè)計(jì)，并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁面和電商轉(zhuǎn)化頁面在 99%的情況下都使用這種原則。
使用這個(gè)原則，在購物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語和產(chǎn)品，轉(zhuǎn)化效果非常好
統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起，形成“視覺凝聚力”。它指的是設(shè)計(jì)中的連貫性，讓人們覺得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺關(guān)系，以幫助傳達(dá)清晰、簡潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理，質(zhì)量也更高。
運(yùn)用統(tǒng)一的配色，重復(fù)、平衡和對稱之類的原則將有助于在設(shè)計(jì)中形成一種和諧感，也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個(gè)完美的整體。
一致的顏色、重復(fù)的圖案、平衡和對稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。
格式塔的接近原則讓設(shè)計(jì)師將同類型的相關(guān)元素進(jìn)行分組。把它們分開得更遠(yuǎn)，元素就顯得越不相關(guān)，它們之間的關(guān)系就會(huì)減弱。一般來說，人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。
不應(yīng)該讓用戶在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的，正如美國郵政服務(wù)的例子所顯示的那樣，缺乏對鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張，損害用戶體驗(yàn)。
接近原則沒做好的案例。由于字段標(biāo)簽離它們下面的字段更近，人們可能會(huì)搞混
下面是一個(gè)鄰近性原則做的好的案例，我們可以看到相關(guān)元素是如何通過鄰近性關(guān)聯(lián)起來的(分組的元素用紫色表示)。
一個(gè)把接近原則用好的網(wǎng)頁設(shè)計(jì)案例
一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測，符合用戶的期望。設(shè)計(jì)中的一致性可以培養(yǎng)熟悉度，它可以提高用戶體驗(yàn)、可用性和用戶使用效率。另一方面，不一致的設(shè)計(jì)將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動(dòng)，并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶的路徑上設(shè)置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強(qiáng)“審美凝聚力”。“我們都知道，當(dāng)我們使用應(yīng)用時(shí)，應(yīng)用的導(dǎo)航位置如果經(jīng)常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn)，如排版、配色和圖案，高質(zhì)量的品牌體驗(yàn)將無法傳遞。
在用戶體驗(yàn)方面，一致性意味著在設(shè)計(jì)中使用相似的 UI 元素來完成相似的任務(wù)，即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評(píng)估用戶界面易用性的質(zhì)量屬性，所以一致性對用戶體驗(yàn)的可用性有很大的貢獻(xiàn)。
一致性是通過使用相同的配色、排版、間距、模式和交互來實(shí)現(xiàn)的。
顏色在設(shè)計(jì)中是非常重要，幾乎是設(shè)計(jì)中最具影響力的創(chuàng)意元素。一個(gè)深思熟慮的配色可以讓一個(gè)設(shè)計(jì)從普通到驚艷，而一個(gè)平庸的配色會(huì)降低用戶的體驗(yàn)，甚至阻礙他們使用產(chǎn)品的能力。
明亮、豐富的顏色比柔和的顏色更引人注目，因此有更大的視覺沖擊。柔和的顏色可以提供一個(gè)令人愉快的，微妙的配色方案，但適當(dāng)?shù)膶Ρ缺仨氁校貏e是文字，必須保證可讀性。
顏色甚至可以用于呈現(xiàn) UI 中的結(jié)構(gòu)感并指向可用的交互，但為設(shè)計(jì)制作一個(gè)配色方案并不是一項(xiàng)簡單的任務(wù)。除了品牌化，還必須非常小心地創(chuàng)造顏色的和諧和耐用性，使得它能在各個(gè)場景下都能正常使用。
色彩心理學(xué)也不容忽視。色彩承載著意義和情感，可以向人的潛意識(shí)傳遞信息。在品牌方面，人們對顏色做了大量的心理學(xué)研究，因?yàn)樵谌藗兣c品牌進(jìn)行任何互動(dòng)之前，顏色會(huì)讓他們產(chǎn)生一種本能的反應(yīng)。例如，藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認(rèn)為是增加人們的心率，想想飲料包裝。
一個(gè)極簡主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì)，并使用了少量的顏色。
排版在設(shè)計(jì)中扮演著非常重要的角色，它的重要性再怎么強(qiáng)調(diào)都不為過。在構(gòu)圖中，字體樣式對人們感知設(shè)計(jì)的影響比任何其他元素都大，可能除了顏色。
因?yàn)槲覀兊拇竽X以閃電般的速度運(yùn)轉(zhuǎn)，一個(gè)字體會(huì)對一個(gè)設(shè)計(jì)產(chǎn)生影響，以至于它可能在不到一眨眼的時(shí)間內(nèi)改變用戶的印象。與顏色一樣，字體甚至?xí)绊懳覀兊那榫w，資深設(shè)計(jì)師可以通過字體傳達(dá)情緒和風(fēng)格。通過選擇合適的字體，我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。
排版層次結(jié)構(gòu)可以快速建立視覺層次結(jié)構(gòu)，并且通常在其中扮演重要角色。因此，在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來表示層次結(jié)構(gòu)，例如標(biāo)題、副標(biāo)題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達(dá)重要內(nèi)容，并表達(dá)你的品牌?！?——蘋果的人機(jī)界面指南
蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來賦予其設(shè)計(jì)力量。
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點(diǎn)也適用于設(shè)計(jì)，元素之間的負(fù)空間給予設(shè)計(jì)強(qiáng)調(diào)、平衡和統(tǒng)一。
元素周圍適當(dāng)?shù)呢?fù)空間將焦點(diǎn)集中在元素本身。它強(qiáng)調(diào)了內(nèi)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點(diǎn)，更容易感到困惑。
蘋果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。
人們已經(jīng)開始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無阻礙的用戶體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對所有設(shè)計(jì)師來說都是至關(guān)重要的。使用專業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記，美學(xué)的完整性會(huì)嚴(yán)重影響用戶體驗(yàn)。
基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴的黃金標(biāo)準(zhǔn)方法。在沒有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下，也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而，這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來不錯(cuò)的內(nèi)容，并創(chuàng)造出最佳的用戶體驗(yàn)。
產(chǎn)品的美學(xué)質(zhì)量與它的實(shí)用性密不可分，因?yàn)槲覀兠刻焓褂玫漠a(chǎn)品影響著我們和我們的幸福。但只有精心制作的物品才會(huì)美麗?！?Dieter Rams(迪特爾·拉姆斯)
當(dāng)我們不關(guān)注由設(shè)計(jì)原則驅(qū)動(dòng)的設(shè)計(jì)質(zhì)量時(shí)，我們可能會(huì)忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計(jì)不好時(shí)，品牌就會(huì)受到傷害，產(chǎn)品也會(huì)受到影響。這就是為什么偉大的設(shè)計(jì)師在他們的工作中極其嚴(yán)謹(jǐn)， 他們知道“你永遠(yuǎn)不會(huì)有第二次機(jī)會(huì)給人留下良好的第一印象?！?
設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身。—— 查爾斯 伊姆斯（Charles Eames）
作者：彩云Sky
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
懸浮小窗是什么？
先看張圖，對懸浮小窗有一個(gè)大致的概念，下圖是花椒直播 APP 中的直播懸浮小窗。（為方便書寫，下文將懸浮小窗簡稱為小窗）
本文的懸浮小窗指的是視覺空間上的層級(jí)概念。
用戶的感知是：
為什么這種感知能應(yīng)用到互聯(lián)網(wǎng)產(chǎn)品中？
原因就在于這符合尼爾森可用性原則中的系統(tǒng)與用戶現(xiàn)實(shí)匹配原則。
即：設(shè)計(jì)應(yīng)與用戶現(xiàn)實(shí)生活中對相關(guān)產(chǎn)品的認(rèn)知、經(jīng)驗(yàn)、習(xí)慣等相符，以用戶期望的方式表現(xiàn)出來，使用戶可以利用已有的知識(shí)經(jīng)驗(yàn)來執(zhí)行操作任務(wù)。
翻譯成人話就是讓用戶在使用我們的產(chǎn)品時(shí)能夠和現(xiàn)實(shí)生活中的習(xí)慣對應(yīng)起來。
舉個(gè)例子：
電商軟件中“購物車”為什么使用購物車這一形象和名稱？
其實(shí)就是和現(xiàn)實(shí)生活對應(yīng)起來的，生活中逛超市的時(shí)候會(huì)把要買的東西加入購物車一起結(jié)算。所以“購物車”這個(gè)概念遷移到互聯(lián)網(wǎng)后用戶的理解成本就非常低。
懸浮小窗也是一樣的道理，小窗模擬了生活中的空間轉(zhuǎn)移，在用戶的心智層，界面與界面之間的跳轉(zhuǎn)就類似于從一個(gè)房間到達(dá)另一個(gè)房間。
即使某些時(shí)候多個(gè)界面在技術(shù)的角度其實(shí)就是一個(gè)頁面，但是站在用戶的角度看不到這些底層邏輯，最直觀的就是一個(gè)個(gè)房間之間的切換。
（其實(shí)這里還涉及到另一個(gè)概念，把簡單留給用戶，把復(fù)雜留給程序。不管邏輯多復(fù)雜，對用戶來說，就是兩個(gè)空間的跳轉(zhuǎn)。）
懸浮小窗有三個(gè)特點(diǎn)：可切換界面、Z 軸最高、可拖拽（一般情況）。
① 可切換界面
如上一節(jié)所說，懸浮小窗就像是房間的切換，所以感官上懸浮小窗就是切換界面的作用。
② Z 軸最高
二維界面如何存在 Z 軸的概念？
大家在使用 APP 過程中一定遇到過彈窗和浮層的情況，如下圖，可以看到圖中 APP 的彈窗在感知上是覆蓋在內(nèi)容層上的。
而右邊的截圖中的浮層是浮在正文內(nèi)容上的，這就是 Z 軸，在互聯(lián)網(wǎng)應(yīng)用中這是比較抽象的空間維度。但是卻是用戶可以明確感知到的，而感知的最直接方式就是覆蓋或者懸浮，感覺到 A 元素是覆蓋在 B 元素之上，或者 A 元素懸浮在 B 元素之上。
而懸浮小窗所謂 Z 軸最高則是因?yàn)閼腋⌒〈霸?Z 軸的維度一般位于 APP 界面所有元素之上。
③ 可拖拽
可拖拽很好理解，即用戶可以通過拖拽移動(dòng)懸浮小窗的位置，不過一般非直播音頻類產(chǎn)品會(huì)喜歡固定在界面的某個(gè)地方。比如得到 APP 在聽書時(shí)退出聽書頁面會(huì)在底部固定一個(gè)播放條。
技術(shù)維度把懸浮小窗分為兩種：系統(tǒng)自帶和自行開發(fā)。
內(nèi)容維度上把懸浮小窗分為三種：視頻小窗、音頻小窗、文檔小窗（含白板）
由于系統(tǒng)自帶畫中畫功能自定義程度不高，無參考意義，下文主要從自行開發(fā)的懸浮小窗入手，從視頻小窗、音頻小窗和文檔小窗（含白板）三種分類來進(jìn)行分析。
此部分內(nèi)容是對第三部分的總結(jié)提煉，相關(guān)產(chǎn)品詳細(xì)分析、截圖以及錄屏細(xì)節(jié)請查看第三部分。
① 視頻小窗
GIF 演示（左滑屏幕邊緣開啟小窗）
GIF 演示（拖拽小窗超出屏幕邊緣后關(guān)閉）
視頻小窗 UI 集合
② 音頻小窗總結(jié)
音頻小窗 UI 集合
③ 文檔小窗
文檔小窗 UI 集合
本次調(diào)研 APP 覆蓋直播、音樂、社交、教育、會(huì)議、資訊四個(gè)方向，包括斗魚、虎牙、花椒直播、企鵝直播、CC 直播、阿里巴巴、淘寶、酷狗直播、陌陌、微信、陌陌、百度知道、邁聆會(huì)議、金山會(huì)議、網(wǎng)易會(huì)議、共計(jì) 15 款 APP。
視頻小窗將從功能和 UI 兩個(gè)大的維度進(jìn)行分析，細(xì)分維度如下表格。
斗魚
APP 簡介：以游戲直播為主的互動(dòng)式直播平臺(tái)
亮點(diǎn)
a 導(dǎo)航欄免遮擋，小窗拖拽移動(dòng)過程中不會(huì)覆蓋一級(jí)導(dǎo)航和一級(jí)頁面的底部 tab 欄，可避免將主要導(dǎo)航遮擋住
b「關(guān)閉」按鈕視覺強(qiáng)度較弱的同時(shí)能夠看清 icon
槽點(diǎn)
放大縮小不流暢，有卡頓的感覺
虎牙直播
APP 簡介：包含游戲、娛樂的互動(dòng)式直播平臺(tái)
亮點(diǎn)
a 滑動(dòng)小窗到屏幕關(guān)閉小窗：除了點(diǎn)擊關(guān)閉按鈕，還可以左滑小窗到左右屏幕邊緣，超出屏幕 2/3 時(shí)關(guān)閉小窗
b 同斗魚，導(dǎo)航欄免遮擋，小窗拖拽移動(dòng)過程中不會(huì)覆蓋一級(jí)導(dǎo)航和一級(jí)頁面的底部 tab 欄，可避免將主要導(dǎo)航遮擋住
槽點(diǎn)
自動(dòng)打開聲音：在小窗上將聲音關(guān)閉后，點(diǎn)擊小窗上的放大按鈕進(jìn)入全屏模式，此時(shí)聲音會(huì)自動(dòng)打開。聲音的開關(guān)應(yīng)該由用戶自行選擇而非幫用戶做選擇，萬一用戶所處場合不適合開聲音，突然開啟的聲音豈不是很尷尬。
花椒直播
APP 簡介：包含游戲、娛樂的互動(dòng)式直播平臺(tái)
槽點(diǎn)
a 同虎牙，關(guān)閉聲音的情況下打開直播間會(huì)自動(dòng)打開聲音
小窗會(huì)移動(dòng)時(shí)可以擋住頂部一級(jí)導(dǎo)航欄
得到
APP 簡介：知識(shí)服務(wù) APP，提供電子書、課程等服務(wù)。視頻以點(diǎn)播為主。
亮點(diǎn)
向下滑動(dòng)視頻觸發(fā)小窗的方式交互非常友好且順手
頁面切換到有『發(fā)布』懸浮按鈕時(shí)，懸浮按鈕位置位于小窗之上，避免遮擋發(fā)布按鈕
作者：土撥鼠
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn