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