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咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
關注趨勢本質上就是關注未來可能存在的形態。很多營銷需求和優秀設計趨勢是相互關聯的，兩者之間的關聯更像是一種動態的同步。
很多時候趨勢并不一定是全新的東西，它們往往是服務于當下和未來的需求，有很多趨勢存在了一些年頭，它們在現在發揮著作用，但是在未來可能會發揮更大的效用。所以，當我們在查看這些設計趨勢的時候，需要注意，它們必須是服務于用戶，服務于品牌和企業。
更多設計趨勢：
的確，極簡主義一直在某種程度上流行，但是 2022 年出現的新極簡主義的浪潮，比起傳統的極簡主義設計更加在意用戶注意力的吸引。這種新極簡主義的設計會采用更加大膽、 生動、明亮的色彩來填補留白，這種設計使得設計保持簡約的同時，更加富有調性，在簡約的框架下制造一種別樣的華麗，營造令人亢奮的氛圍。
干凈清晰、生動的新極簡主義風格在品牌推廣的過程中也更加受歡迎，大量的留白和跳脫的視覺焦點讓整個視覺更加抓人眼球，也使得品牌給人的感知更加新鮮獨特。
新極簡主義風格，對比度在深色主題下得到了進一步的提升。
這種設計并不意味著傳統的極簡主義已經被用戶拋棄，很多企業依然會青睞更加傳統的單色極簡主義設計，不過其中多少會增加一些明亮的色彩作為點綴。
從 1950 年開始，粗野主義就是年輕化、反叛、反主流、標新立異的設計風格。在過去的幾十年當中，這種設計風格一直隨著時代的發展而自我迭代，新粗野主義更加強調創造力、 大膽前衛的新奇元素，而這也正好符合很多品牌對于新奇性的追求，它可以瞬間抓住用戶的注意力。不過，這種風格的使用需要控制好程度，否則很容易失控。
粗野主義經久不衰的秘訣是什么？是未經打磨、粗糲而原始的素材，它讓觀看者忍不住想要改進它，這種未完成的原始感會在情感上吸引觀眾，這在營銷上是無價的優勢。
粗野主義在設計上并非看起來那么粗糙，相反它更加需要高度的專業性來控制它粗野的程度。設計師需要敏銳地感知到觀看者改進地欲望，讓設計粗野而不低級，原始而不拙劣。
新粗野主義柔糅合了極簡主義和大膽地排版，它依賴看似粗野地視覺沖擊：高對比度、粗糲地陰影，撞色、 簡約的背景、不對稱的布局、 未經修飾的照片，新粗野主義偏好基礎款的加粗字體，跟注重可讀性而不是舒適所制造的視覺吸引力。
這個網站就是一個典型的例子：
這一趨勢在絕大多數的趨勢排行榜當中，都占據首位。隨著技術的進步，用戶和數字媒體之間的交互正在增加，引人入勝的交互已經不僅僅停留在響應式設計當中，如今它已經開始關注心理和生理的邏輯，開始全方位地調動視覺、聽覺、 嗅覺、觸覺、味覺乃至于運動體感。
這種趨勢旨在幫助用戶體驗真實地感覺，在完成交互地基礎上，觸發用戶地情緒反應和生理反應，熱氣騰騰地餡餅視頻讓人垂涎，游戲中虛擬地對手讓人腎上腺素激增。
交互所制造地參與感，在某種程度上是實際地物理產品地替代物，用戶可以從不同角度來縮放查看產品，了解細節，選擇尺寸，挑選顏色。
交互過程中，手指和屏幕之間地觸摸交互開始變得豐富，開始變得有意味，它成為了用戶和虛擬世界之間溝通地橋梁，開始有游戲地樂趣，有更具設計感地交互環節。用戶也可以根據自己地喜好，對界面進行更多樣的個性化處理。
具有參與感的交互是我們的未來。
2022 年是疫情開始后的第三年，隔離使得人們對于照片所呈現出的故事和情感，有著更為強烈的情緒反應。在極簡主義設計當中，富有表現力的人物照片是最為流行的元素之一，這類照片搭配上簡短的文字，簡練的口號，一些帶有宏大敘事特質的文字引用，時常能夠更好地營造出故事感。
不用擔心主屏頁面太長沒人看，只要隨著用戶滾動，故事會隨之逐步展開，用戶可以在照片、 標題、視頻、動畫和文本地指引下，看到整個故事有步驟地呈現。
在這當中，富有表現力的人物照片是吸引用戶注意力的關鍵要素。
另外就是頁面的 Banner 的部分，強調主題和內容的標題文本，是用戶從屏幕上獲取的重要信息之一。
如今的用戶越來越偏好在詳細閱讀內容之前，快速瀏覽一下全局的做法，這也使得 Scrollytelling（滾動敘事：通過滾動觸發音頻、視頻、 動畫效果的一種技術）這種漸進式敘事方式，可以像電影一樣將故事呈現在用戶眼前。
Scrollytelling 適合大量的內容呈現，比如對于公司和產品的描述，對于數據呈現或者認知要求較高的內容，它適合學習和記憶性內容的呈現。
3D 圖形設計正在越來越流行，因為它確實是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異，它本身都會被認為是有真實感的，明確的體積，精致的建模，所有的一切都令人著迷。很多時候，用戶停留在有3D元素的頁面上，是為了更細致的欣賞。
3D 圖形設計的趨勢從來都沒有減退，它正在進入更多的領域，甚至進入了品牌推廣的領域。3D 動畫圖標比過去更能吸引用戶的注意力。
我們通常說的抽象插畫，指的是帶有明確幾何特征的插畫，它們被廣泛地應用于網站和 APP，在社交媒體和包裝設計中也越來越多的存在。
抽象插畫之所以會如此成功，是因為它們大多有著吸引人的生動色彩和良好對比度，視覺上的美感和極簡主義的風格特質，它們成為視覺的焦點，為整個設計提升視覺。
抽象插畫在品牌營銷場景下的應用也很多，它們在這個時候是貼合品牌推廣的訴求的：通過色彩和形式來吸引用戶來關注品牌的形象和名稱。
這種趨勢的特別之處是其中的文本字體元素是完全獨立的。這些文本不僅僅是用來傳遞信息的，它們還充當著拉升頁面視覺效果的重要作用，它們結合動畫和交互，成為頁面中醒目的亮點。
超大字體的優點在于，它和很多設計風格是相得益彰的，加粗的大字體在極簡主義風格的頁面上不會顯得突兀，在元素豐富的頁面上，同樣可以起到優秀的點綴作用。這些文本內容可以和纖細和小尺寸的元素協同，而后者則襯托出它本身的醒目。
超大文本字體的另一個好處是有效地減少網頁上的圖像的使用，縮短加載時間，提升移動端的可用性。
這種設計元素最重要的，是選擇易讀且符合品牌調性的字體。
這么多年來，我們看到來這么多的趨勢，很多趨勢是一以貫之持續出現，有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級，并且持續存在，但是最重要的，始終是那些選擇合理的方案，并且堅持改進設計，讓趨勢服務于終端的產品和用戶的設計師。
讓趨勢服務于你，不要盲目地追趨勢！
作者：陳子木
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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咨詢、用戶體驗公司、軟件界面設計公司
① 導航的起源與本質
導航，英文是 Navigation，是 Navigate 的名詞形式，源于 1530 年代，由詞根 Navis 船+agere 駕駛組合而成。指的是借助某些科學儀器，找到從一個島嶼到另一個島嶼的路徑。
圖1 導航的起源
誕生于中世紀大航海的導航，從誕生之初就跟起點、目標和路徑密切相關。隨著導航的發展，導航領域從海洋擴展到陸地，航空、太空，以及互聯網。
圖2 導航領域的類型
今天我們重點要聊的就是移動互聯網產品的導航設計，雖然脫離了物理空間，但導航的本質始終是不變的。
圖3 導航的本質
導航本質：告訴用戶“我”在哪里（起點）？“我”能去到哪里（目標）？“我”該怎么去（路徑）？
基于此，導航設計一定要能清晰的體現用戶當前所在的位置（一般用選中態表示），并通過其他未選中的導航，來告知用戶可以去的目標，再通過最簡單的點擊或滑動等操作讓用戶去往目的地。
圖4 互聯網產品導航示意
我歸納了移動端常見的 10 種導航形式，大家可以根據其優缺點和適用場景按需選用。
圖5 移動端常見的10種導航形式
① 底 Tab 導航
底 Tab 導航在 iOS 中叫標簽導航，在 Android 中稱之為底部導航，我將其稱為底 Tab 導航，它是 iOS 中最倡導和常見的導航形式。（現在也全面征服了 Android 系統）
圖6 底Tab導航
優點：清晰直觀的展示了產品的核心功能，點擊切換方便快捷。
缺點：只能容納 3-5 個，數量有限。
使用場景：產品包含 3~5 個需要高頻切換使用的非同類型模塊時可用。
② 舵式導航
舵式導航可以看做是底 Tab 導航的一個變異，區別就在于把中間的導航像船舵一樣凸顯，以此來強調中間的導航功能（一般用于承載發布類功能）。
圖7 舵式導航
優點：舵式導航特殊的造型和顏色可以很好的吸引用戶注意力，促進功能轉化。
缺點：為了讓舵居中，導航個數只能為 3 個或 5 個，數量有限制。聚合多個發布類功能時，需要二次選擇，操作不夠便捷。
使用場景：對于強調 UGC 類的產品或者特別高頻的操作可以使用。
③ 頂 Tab 導航
頂 Tab 導航最開始是 Android 推出用以抗衡 iOS 底 Tab 導航的，結果大家已經有感知了（抗衡徹底失?。５?Tab 導航并沒有因此而消失，而是重新找到了自己作為次級導航的生態位。
圖8 頂Tab導航
優點：可以承載 2~N 個導航，可拓展性強，手勢切換比較便捷。
缺點：手勢切換有學習成本，頂部點擊不方便，看不見的導航內容不容易被發現和使用。
使用場景：作為主導航幾乎已被底 Tab 取代，作為次級導航非常常見，特別是有多個并列層級的內容需要展示時。
④ 抽屜導航
如果產品只有一類核心展示的內容，可以使用抽屜導航而不用底 Tab 導航，以最大限度的利用屏幕空間。
圖9 抽屜導航
優點：可拓展性強，可以收納多個不常用的功能，釋放屏幕展示空間。
缺點：被隱藏的功能不容易被發現和使用。
使用場景：某些核心功能比較單一的產品，或者跟底 Tab 導航組合使用，收納不常用的功能。
⑤ 菜單式導航
跟抽屜式導航類似，把一組操作收納到一個地方，用戶可以點擊快速選擇。
圖10 菜單式導航
優點：可拓展性強，可以收納多個功能，釋放屏幕展示空間。
缺點：被隱藏的功能不容易被發現和使用。
使用場景：當頁面功能較多，無法全部直接展示時，可以使用下拉菜單統一收納。
⑥ 宮格式導航
早期比較流行的主導航，現在是比較常用的局部導航。
圖11 宮格式導航
優點：信息層級扁平，個數較少時，核心功能一目了然，用戶選擇成本低。
缺點：個數較多時視覺認知成本、查找成本都很高，進入功能后切換成本也高。
使用場景：平臺類產品的核心功能展示，或者普通產品的重要功能/運營入口。
⑦ 列表式導航
對于主要以文本為載體的產品，采用列表式導航非常常見，比如短信、郵件、記事本、設置等。
圖12 列表式導航
優點：有足夠的文本/圖標顯示空間，可以顯示標題和輔助文字，傳遞的信息內容相對豐富、直觀，而且可以顯示多條內容。
缺點：整體頁面信息會比較密集，頁面布局相對呆板，條目多時查找會比較困難。
使用場景：適用于展示多條以文本為主體的內容。
⑧ 瀑布流導航
對于主要以圖片/視頻為載體的產品，采用瀑布流導航的非常常見，比如花瓣、點評、淘寶、bilibili 等。
圖13 瀑布流導航
優點：能夠凸顯圖片的吸引力，讓用戶聚焦在圖片上，促進內容的轉化。同時可以承載無限多的內容，自動加載不翻頁，增強用戶瀏覽的沉浸感和效率。
缺點：屏幕空間占用較大，依賴于信息推薦的精準度。
使用場景：適用于展示多條以圖片為主體的內容。
⑨ 輪播式導航
當產品/模塊提供的信息足夠簡單扁平，一屏即可顯示全部核心信息時，可以采用整屏輪播或區域輪播的導航形式。
圖14 輪播式導航
優點：操作簡單，信息呈現直觀。
缺點：未輪播的信息曝光率和轉化率都比較低。
使用場景：簡單的小工具類產品可以整屏顯示核心信息。運營廣告位可以區域輪播展示。
⑩ 沉浸式導航
在活動類、游戲類產品中，常常采用沉浸式導航，增強用戶沉浸感。
圖15 沉浸式導航
優點：導航與頁面融為一體，視覺感受沉浸，頁面更有吸引力。
缺點：用戶可能注意不到某些是內容的元素，導致該元素的轉化率較低。
適用場景：活動類、游戲類的產品中。
① 確認信息結構
導航設計是以信息結構為基礎的，所以在進行導航設計之前，我們需要將范圍層提供的所有信息進行分析，刪減、分類、整理形成特定的信息結構。
圖16 從信息到信息結構
以微信的部分信息為例，我們將信息進行分類、整理、命名形成了上述的組織系統，讓信息與信息之間的邏輯關系一目了然。
這里大家可以參考行業競品的信息架構，結合自己對業務關系的理解，輔助以卡片分類的方式，整理出最適合的信息結構。
PS：為了提升導航的易用性，建議的導航廣度最好不超過 5，深度不超過 3。這樣符合米勒定律，用戶的選擇壓力較小，也不容易迷失在較深的路徑中。（當然這只是一個建議，優先要保證的還是信息結構的合理性，不能為了滿足上述建議而破壞信息之間本身的邏輯關系，時刻牢記認知成本＞操作成本，不能為了減少操作成本而增加認知成本）
② 選擇導航形式
根據信息結構中主導航功能的個數，以及主導航功能之間的優先級關系，再結合各導航的適用場景、個數限制、內容豐富度、功能可見性、操作便捷性等，匹配合適的主導航、次級導航和局部導航形式。
圖17 導航總結
從現況來看，多數產品都愿意采用底 Tab 的主導航形式，因為可以曝光多個功能，用戶點擊操作方便，學習成本低，利于其他功能的轉化，后續拓展也比較方便（可以配合抽屜式導航、頂 Tab 導航，菜單式導航和局部導航混合使用）
③ 優化導航路徑
信息結構梳理了信息節點之間的邏輯關系，但用戶在真正使用產品時，有些子節點的功能/信息，其優先級和頻率反而更高，為了讓用戶能夠方便快捷的使用這些子功能，還需要結合用戶的使用場景，在合適的場景下添加一些節點和路徑，以提升用戶操作的流暢性和效率。
圖18 組織系統和導航系統的關系
還是以微信的導航設計為例，因為添加好友，掃一掃、收付款功能重要性和使用頻率，微信特地在首頁增加了一個菜單導航，方便用戶能更快捷的觸達這些功能。
所以導航設計，不僅要正確的反映信息之間的結構關系，選擇合適的導航形式，更重要的是根據用戶的目標、認知和習慣來組織導航節點，讓用戶可以很直觀的理解“我”在哪，“我”可以去哪？并通過最便捷的操作到達目的地。
作者：悅姐聊設計
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在選擇網頁設計尺寸時，我們并非只讓產品在部分設備上對訪問者保持可訪問性以及吸引力，而是希望他們無論使用什么設備都可以更好的進行體驗瀏覽。
在早期的設計中我們可能需要針對不同的分辨率輸出不一樣的設計稿，但現在大部分網站平臺都是響應式，這意味著我們只需要做一個在不同設備上都兼容良好的設計即可。
因此我們可以得出B端Web設計中采用主流的最大寬度并非最佳選擇，而是要基于不同設備上的尺寸選擇最具合適的那個。
由于Web端分辨率太分散，我們只考慮占比最大的前幾個，根據百度流量學院里面有關PC端分辨率的占比，排名前三的是1920×1080、1440×900、1366×768。
這三個主流的尺寸在市場中總計占比70.38%，意味著這幾個分辨率的市場占有率體量巨大。它的背后說明了16:9的分辨率已經逐漸的形成一定的規模和使用習慣，我們只需要按照當下主流的分辨率進行針對性的設計即可。
設計稿可在1920、1440以及1366這三個尺寸中進行選擇。
為了更好的在不同的尺寸中都保持體驗的一致性，兼容性原則作為我們選擇最主要的設計標準。
更直白點就是設計尺寸在放大或者縮小的情況下都可以減少因為分辨率帶來的差異性。因此以1440作為基礎的設計尺寸的話，向上或向下適配誤差會較小。
那么假設我們用1366的尺寸做設計稿適配到1920的界面上，界面看上去肯定會特別松散。反之，如果我們用1920的尺寸適配到1366上，界面又會顯得擁擠，甚至可能會出現錯位，這個時候，就只剩下1440的尺寸最適合做設計稿。
設計分辨率的建立要優先考慮目標用戶主要使用的設備，以真實的用戶的應用設備作為基準。這個基準以外的分辨率都是可以進行次要考慮。
由于B端的業務屬性，它需要滿足更細分、特定的商業目標受眾，我們對其進行定制化需求設計。
通過前期調研，發現該集團所有的操作電腦都是由企業統一派發的24寸、分辨率為1920×1080顯示器。那么我們在設計中只需要選擇該分尺寸即可，不需要考慮上下兼容的事。
同理，假如我們的目標用戶都使用1366寬的商務筆記本，那么我們的設計尺寸則可以改為1366×768。
當我們確定好設計尺寸是1440×900后，最好不要直接使用900作為基礎的設計高度，那么高度該如何定義呢。
這里我們不得不提首屏的概念，它指的是不滾動web網頁屏幕的情況下就能被用戶看到的畫面。
根據尼爾森的可用性研究報告，首屏的關注度在80.3%，首屏以下的關注度僅有19.7%，這兩個數據足以表明每一個需要轉化率的網站首屏的重要性，因此我們需要掌握頁面高度，盡可能的把頁面中重要信息在首屏展示。
B端web界面的展示依托于瀏覽器，而瀏覽器除了主窗口顯示的頁面外，還包含了瀏覽器高度（頁簽欄、地址欄、書簽欄）、底部狀態欄。因此我們真實的設計高度=電腦分辨率-瀏覽器高度（130px左右）-底部狀態欄（30px左右），因此可以得出首屏高度≤740為安全區，我們在這個區域內設計的話基本可以保證首屏的內容的展示效率最高。
作者：江鳥的設計生活
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側的安全距離（如網頁的寬度為1920px，內容區為1400px，那么安全距離為兩側各260px）等。
作為UI設計師，在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調整間距，利用各間距之間的規律來組織界面內容，確保信息的節奏性，給用戶輕松、預約的瀏覽體驗。
間距可以讓界面信息更有節奏，提升內容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關系，以吸引用戶的注意力，所以在控制界面間距時，一定要有“較真”的心態，任何一次的改動與調整都要先考慮清楚為什么，能給產品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進行多方面思考。
設計師層面：規范的定義間距，不必每個元素都去考慮間距的大小，有效減少決策和思考時間，提升效率。
開發層面：開發可以按照基礎間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數。例如基礎間距以8px增量，在使用8px、16px、24px、32px、48px...等，開發直接使用基礎間距x1、x2、x3...，以此類推，在開發眼中，肉眼定然看不出1px的差別，但卻能區分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設計效果。
用戶層面：有節奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗能得到很大程度的提升。
設計規范的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統一。同理，間距也是設計規范中非常重要的一環，它作為規范中的最小單元，如果沒有遵循統一，將會直接影響界面整體的版式和布局，信息的疏密程度嚴重影響用戶的瀏覽。不僅是設計師，開發每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規律可循。
統一的間距能讓界面的視覺效果更有節奏，設計師在設計某些相似的模塊時可直接復用組件，即便是多人共同完成同個項目或更換成員，也不會因間距不統一的問題造成整個APP的風格混亂。
對開發來說，如果清楚間距的使用規律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24...按倍數規律以此類推，若出現9的間距，開發會更正為8、15則會更正為16，自行多退少補，雖然設計師需要細心、盡量不出現這種小的出入，但任何事情都沒法做到絕對，統一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通，能進一步提高開發效率。
▲ 從上圖可以看出，間距不規范、信息就像一鍋粥，而規范的使用間距就能將信息自動分組。
文字是UI設計中非常重要的信息元素，雖然大多數設計師對文字的屬性比較了解，但在真實設計中總會因其他信息的干擾不能合理運用，與上線后的視覺效果預期相差甚大。文字的各種間距處理看似簡單，但實際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。
字符間距一般都是設計工具的默認數值，無需調整。當碰到多行文字需要避開頭尾的標點符號時，使用工具中的避頭尾功能即可自動調整字間距，如無此功能，則需手動調整，這里并沒有所謂的技巧與方法，頭尾避開標點符號即可。
另外，在設計卡片、瓷片區的標題時，有時需要通過調整字符間距來提升界面的舒適度，間距數值自行定義，但相同層級的內容標題字間距一定要保持一致。
行高是指上邊框+下邊框+字號的高度之和，這里主要針對多行文本。在平面設計中，行高沒有一定的標準，如無特別需要，使用系統默認的行高即可。
在UI設計中，文字會有5～6個不同的等級，為便于用戶閱讀，一般會設定行高標準，尤其是新聞資訊類型的應用本身就以文字內容為主，不同的行高對文字的易讀性會產生較大的影響。
文字行高一般會設定為字號的1.2～1.5倍，具體值跟字號有很大關系，文字越小，行高就越大。例如，我們可以設定字號32px為中間值（非絕對），小于或等于32的字體、行高為字號的1.5倍，大于32的為1.2倍。另外，也可以直接將所有行高固定在字號的1.5倍，不難發現，字體越大其折行的概率就越低，試想一下，如果將48px的文字折成幾行，界面還能剩下多少空間？
文本段落間距的重要性在移動UI界面中并不明顯，更多體現在網頁設計中。需要著重糾正一點的是，部分設計師在設置段間距時習慣性的多敲一次回車鍵，這種方式并不可取，會造成間距過大、內容脫節。
如有需要，一定要手動設置段間距，這里沒有固定的數值和規律，視覺舒適即可。筆者習慣將段間距設定為字號的0.5倍，例如字號為30、段間距為15，字號為40、段間距為20，僅供參考。
定義間距其實并沒有一個絕對的標準，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個數值還得根據產品自身定位及內容組織形式，前提是所有間距都要遵循最小單位并基于倍數形成規律。
在設計界面時，需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關系，這就是為什么當我們打開新聞資訊、電商類應用會發現信息非常緊湊，而打開工具、社交類應用時感覺信息比較寬松。間距的基數越小、頁面就越細碎；基數越大、頁面的留白就越多，使用不同的基數，呈現出來的視覺效果也形態各異。
筆者在工作中通常以8px作為基數，以此衍生出8、16、24、32、48、64這6個間距數值，完全能夠滿足絕大多數的使用場景。當然，針對信息較少的頁面也會使用到120、160、200...其他間距數值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數定義間距數值時，沒有40、56這兩個數值，難道他們不是8的倍數嗎？我們以8和16做對比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點，設計師在定義間距時，需要遵循倍數規則，但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規則，當間距數值越大時，根據基數所跳躍的倍數就越大，其實設定字號也是相同的邏輯（后期詳解）。
從信息層級角度來看，等級權重越高、間距就越大，在現實世界中也是如此，一個物體周圍的空間越大，就越容易吸引人們的注意力。
模塊間距分為塊內間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個頁面中不同模塊的之間的距離），為了更好的區分信息層級，塊外間距一定會大于塊內間距，也能保持塊內信息的親密性。
如下圖所示，將裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊，每個模塊內元素的間距都會比各模塊之間的間距小很多。
需要通過各元素的間距來體現出信息的關聯性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認為比相互距離較遠的物體更有關聯性，因此，相關聯的元素之間靠的越近，用戶越能感知到信息的關聯，同時更能了解整個界面中各模塊信息的邏輯關系。
很多時候，想讓一個元素變的突出，可以用加大字號、修改色值或后加粗等方式進行強調，但這并不是突出信息的唯一方式，當所有元素都變的突出，那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出，留白也是一種強調信息的方式，它能引導用戶將注意力集中在特定的內容上。
善用柵格系統（上述有詳細說明），通過最小間距值進行遞增，讓整個界面看起來更協調。柵格系統可以讓設計師在元素的親疏關系上更快作出決策，后續不管是迭代還是更換設計成員，都能保持統計的間距規范。
這個問題在很多團隊中都是硬傷，甚至在設計驗收時還被直接忽略。在主流UI設計工具中，添加文本元素時，都會有默認行高，在前面的內容中有講過多行文本的行高為字號的1.2~1.5倍，那么單行文字的行高到底是需要手動設置還是遵循默認，筆者認為都是可以的，但一定要與開發保持一致。
行高決定著文字邊緣與定界框的間距，而開發只能看到定界框與其他元素的間距。
1）默認行高
默認行高值會隨著字號的變化基于一定的倍數自動增減，需要將此規律或倍數告知開發，開發將此規則植入代碼方能最大化還原設計效果。另外在設計界面時，尤其是多組文字元素的上下間距，需要通過計算（文字邊緣到定界框的間距+文字元素間距=實際間距）或手動測量才能達到精準狀態，下圖為例：
2）手動設置行高
手動設置即字號是多少、就將行高設置為多少，確保文字邊緣緊貼定界框，在設計過程中調整間距時，無需計算，根據設計工具的智能提示調整即可。
在同一APP應用中，根據最小基數定義的間隔值數量不易過多，一般在6個左右就能滿足絕大多數的設計場景。例如以8px的基數為8、16、24、32、48、64等，以5px的基數為5、10、15、25、40、60等。數量過多會導致界面不同元素、模塊的間距差異化不夠明顯，數量太少無法滿足多元素、模塊使用場景，也會導致間距跨度較大。
設定間距值需遵循一個原則“數值越大、遞增的倍數就越大”。當相鄰間距值的差異化較小時，用戶很難感知到界面中信息之間的邏輯關系，我們需要根據柵格系統中間距值的增大、設置更大的區間值，讓相鄰間距值之間的視覺差異更加明顯。
當界面中的信息較為密集、間距不足以滿足信息的突出程度時，需跳出純粹的間距規范束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調整元素大小等，需知「此消彼長」的道理。
如果在處理界面信息層級時，改來改去還是覺得很亂，不防從間距角度出發，或許會有不一樣的收獲。雖然在剛開始的時候，規范間距帶來的效果甚微，但隨著團隊規模不斷擴大、界面數量越來越多、內容越來越復雜時就會發現，所有內容統一間距規范，不管是構建一致性界面視覺效果、還是對開發和設計師來說，既能提升用戶體驗、還能提高團隊的工作效率。
間距是否規范使用，決定著界面是否規整、信息傳達是否清晰，即便如此，間距也只是解決信息層級方式的其中之一，切不可讓其限制設計師的發揮和思考空間。制定設計規范有助于項目的高效運轉，間距也好、色彩也罷，設計師依然需要從實際用戶場景出發，通過不斷的思考和經驗總結，打磨出更合理、更符合項目需求的設計規范。
作者：大漠飛鷹CYSJ
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在設計一個產品的時候，我們要透過現象看本質。
我們是為誰？解決什么問題？分析的結果將直接影響到方案的好壞。 這里推薦大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一種思考方法，也可以說是一種場景創造分析法。
5W1H分析法包含如下幾個方面：
Why：為什么要做，是原因。
What：做什么、做成什么，是目標。
Where：在哪兒做，是地點。
When：什么時候做，是時間。
Who：誰來做，是執行對象。
How：怎么做，是方法。
通過上述分析我們可以（假設）知道：我們的用戶是技術人員、基層管理人員；做這個頁面的目的是為了讓用戶隨時掌握各項工作的進展情況，快速進入需要處理的工作事項。 根據結論可以得出工作臺是一個導航頁面或者綜合管理頁面，它是用戶感知產品價值的重要“門面”，使用者有一定的經驗，屬于高級用戶。從設計角度來看，首頁工作臺是整個系統規范與視覺風格的核心場景。
主要是技術人員、基層管理人員
P0:各類數據指標的匯總、我的動態
p1:總量趨勢、數據排名、操作匯總
p2:分發匯總、待辦事項
重點突出、簡潔、清晰
下面這張圖是產品給的原型，也是B端面試題中經常會遇到的題目。如果你打算就按照產品給的原型直接做美化，那估計很難被選中。
做需求分析的目的之一就是為了做信息處理，這里要提到一個詞叫“屏效”。B端產品我們都知道，目的是“降本增效”，在合理的信息布局下盡量利用交互等手段讓頁面縮短。
比如：上面原型中有兩個top10排名，如果一行展示會比較擁擠，也體現不了top10排名?？紤]“易讀性”我們會放兩行，但這樣又占據了屏幕空間，在與產品溝通后我們把它整合到一起，利用按鈕組切換進行查看。同時排名也是業務人員需要關注的，所以我們把它們往上放。
頂部個人信息內容比較少，也沒必要占一整行，我們把它移到右邊；各類指標因前3個是不能點擊的，為了和后面可點擊按鈕做區分，我們整合到一個卡片上；待辦事項與產品溝通后說不太重要，移動到了最下面，操作匯總模塊往上移；
到這里模塊之間的信息優先級基本處理完成，下面就要對單個模塊進行拆解處理。
首先我們要觀察哪個是：重要信息、次要信息、輔助信息，上面我們提到了“效率”，把重要信息突出顯示，就是為了讓用戶一眼就能看清，不需要去尋找或被次要信息干擾。
最后一個模塊原型上只有一個標題，這真是驗證了一句話：“巧婦難為無米之炊”，所以又去找產品溝通，為什么單個模型可以點擊查看更多？用戶在這個地方想要獲取什么樣的數據？
經過一番溝通，拿到了一些“米”，巧婦終于可以干活了。為了體現“易發現性”，我們在后面這個模塊上加了一個詳情按鈕。
其實上面的圖是我處理過的，產品的原型可不長這個樣子，模塊大小、間距都是隨便給的。你如果也按照產品給的原型模塊大小做，估計研發會“罵娘”，因為這樣沒法按照比例進行換算，也就沒法做自適應。
這一步主要就是做柵格化處理，我們需要定義每個模塊的占比與間距。B端產品通常選用24柵格布局，也就是24欄+23水槽+2頁邊距。
我遇到的工作臺頁面有兩種，一種是帶左側樹，一種是不帶，這兩種對應的柵格化數值不太一樣。 按照目前常用的尺寸1440*900來計算：不帶左側樹我采用的是1440=2*20+43*24+16*23。
如果大家做的是帶左側樹，可以參考下圖數據
重點來了，我個人覺得這一節才是工作臺、數據分析頁面的核心，但很多人都忽略了，覺得不就是幾個圖表，唰唰唰一下就搞定了......
上面我們提到過B端測試題給的都是原始數據（表格），需要設計師自己根據數據找合適的可視化圖形進行展示。
如果你對可視化圖表不熟悉，不知道什么時候該用柱圖、折線圖、餅圖；不知道隨時間變化該用什么圖形；不知道體現排名的數據該用什么圖形。那你很難輸出一份有理有據的作品。
因圖表類型太多，詳細的留到后面文章討論，這次只對原型中使用的到圖表進行分析：
柱狀圖是常用的數據可視化圖形之一，可用于隨時間變化而產生變量的數據統計，也可用于數據類別的對比、排名。
如圖，柱狀圖能展示知乎文章觀看者地域分布，也能反應出不同時間段的情況，并通過圖形能夠快速了解 分布最多和最少的省份。
優點：
人眼對長短（高度）比較敏感，可以直觀體現數據差異性。
缺陷：
分類過多時數據的展示效果會降低。
能把圖形視覺與體驗都兼顧好，才能體現設計師的價值。 設計師的能力不僅體現在技法上，更多的是體現在思考能力上。圖形擴展性設計和創新性設計都需要設計師做縝密的思考，只有這樣才會有出彩的設計結果。
信息層級：
視覺展示：
2個人站在一起我們除了對比高度、顏值，還有會對比胖廋。那么，柱狀體的粗細和間距如何定義呢？ 在圖中，中間柱狀圖的柱子間距過于疏散沒有規律；右邊圖中的柱子間距又過小，視覺上顯得擁擠，并且當分類過多時，過小的間距會導致柱狀體之間沒有獨立性，不易閱讀。
定義柱狀體的間距可以用5分原則設計法，即柱子之間的間距為N，左右兩邊與柱子之間的距離就是2/N。 如圖所示。這也是很多界面設計中常用的技法，其原理就是接近黃金比例，視覺上較為舒適。同時，在保證界面元素整體協調性的情況下，盡可能把柱子的寬度設計成N，這樣視覺上最為協調。
另外，在設計圖形前，設計師最好能了解到真實數據，這樣才能結合真實的數據來設計圖形，盡可能還原落地后的樣子。在圖中，圖形的設計和落地后的樣子存在較大的差異。問題就出在設計前設計師沒有了解數據的真實情況，前端工程師按照設計圖把X軸的數值固定了。
相似圖表：
堆積柱狀圖：堆積柱狀圖可以展示兩個或多個數據的變化，以及數據之間的綜合比較情況。
分組柱狀圖：分組柱狀圖可以在同一數軸上展示各個分類下的不同分組數據。
有序柱狀圖：與有序條形圖一樣，有序柱狀圖也能呈現數據的排名情況。
折線圖常用于表示一個連續時間段內數據的變化趨勢，主要功能是能夠清晰地反映出數據隨時間變化的趨勢。
如圖，折線圖不僅能展示不同月份的價格趨勢，還能清晰呈現數據的峰值和低谷。折線圖也可以是多條線，用來分析多組數據隨時間變化的趨勢及數據間的趨勢比較。
優點：
直觀反映數據變化趨勢
缺陷：
無序的類別無法展示數據特點。
折線圖可以用于展示數據的趨勢變化，通過折線的起伏波動可以幫助人們探究數據背后的邏輯。但如果折線圖的設計不夠合理，在視覺上會讓人產生錯誤的認知。在圖中，有的折線圖的刻度值設置不合理，如中間折線圖的刻度值未從0開始，導致折線的呈現夸大；右邊折線圖的刻度值過高，趨勢變化呈現過于平緩，這些都是在不客觀地表達數據。正確的方式應該是刻度值從0開始，隨著數據的增減，刻度值也做相應的變化。
視覺展示：
在折線圖設計中，還需要注意折線的粗細要適中。在圖中，其中一條折線過細，這會降低數據可視化的表現；另一條過粗，就會損失折線中的數據波動細節。在產品的圖形設計中，一般網格線和起始線都是1像素，折線一般用2像素，這樣的粗細會有較好的視覺表現。
相似圖表：
階梯線圖：線在數據點之間形成一系列步驟。
面積圖：與折線圖唯一不同的是，其自變量數據和坐標軸之間有顏色填充，這樣能更加突出數據的趨勢變化。
提到數據的占比，相信你第一個就會想到餅圖，主要用來展示數據分布情況。 餅圖是展示占比數據最直觀的圖形，通過弧度大小來表示分類的占比多少。但餅圖有一定的局限性，當占比數值接近或占比分類過多時，在視覺上就不容易辨別各個類別占比的大小。在數據可視化產品中，因為餅圖是大面積的色塊，視覺上會非常突顯，很容易搶走重要數據的風頭，所以使用時要酌情考慮。
優點：
直觀顯示各項占總體的占比，分布情況，強調整體與個體間的比較。
缺陷：
分類過多，則扇形越小，無法展現圖表。
每個圖形都有自己的設計規范，如當餅圖分類過多時，一般不把文字放在圖形元素上，因為一旦出現幾個相對較小的占比數據，字就很容易溢出，不容易辨別指向的分類，如圖中的右圖所示。好的解決方案就是，在圖形的外圍用引線指出分類數據，或者加示例圖展示。
視覺展示：
另外，餅圖的分類最好從12點鐘的位置開始，這樣較為符合人的閱讀習慣，即從上到下、從左到右，如圖中。如果餅圖隨意從不同位置開始展示，就會缺少規范，這樣當多個餅圖同時展示時容易出現混亂。
同時，在餅圖的分類中如果沒帶排序，如1月、2月……，那么占比最好能夠從大到小依次排列，這樣還能直觀地呈現出分類的排名情況。任何時候，如果有“其他”這項分類，無論其占比多少都要放在最后，因為其數據通常是最不被關注的數據。
相似圖表：
嵌套圈餅圖：用于一個指標在不同維度的占比。
跑道圖：看到占比的同時，可以直觀看到指標在當前維度下的排名情況。
表格看起來簡單，但想設計好也不是一件容易事。通常我們見到的（產品中）表格都屬于比較簡單的表格。
在BI系統中有一些復雜的表報，如果直接用組件信息會很難閱讀。我們需要對表格的視覺進行調整，讓信息獲取更高效，這就需要一些設計技巧和原則。
而圖中（上圖）的項目名稱長短不一，居中對齊在視覺上會使切入點呈現“Z”字形，影響閱讀效率。左對齊可以使線性結構在視覺上不跳躍，閱讀流暢且更具美感。表格中的數字需要右對齊，因為當我們在面對一個長數字時，一般會從右往左讀。比如數字￥368,568,023.00，我們一般是從個位到最后的千萬位順序識別數字體量，有的人可以通過千分符迅速判斷數字的體量，但其實也是從右到左的瀏覽順序，因此數字右對齊最符合人的閱讀方式。
在圖中（下圖），讓我們感受一下數字左對齊、居中對齊、右對齊的閱讀效率，以及對各個數據體量的對比感知。
文字左對齊和數字右對齊，針對的是長短不一的名稱和大體量的數字，而對于文字數量一樣、體量較小的數字也可以嘗試用居中對齊的方式，對稱的元素本身就具有美感。如圖所示，通過對表格中的文字和數字的重新排版，相信在閱讀效率上會有較大的提高。雖然提高了閱讀效率，但這相比優秀的表格設計還差得很遠，其中最明顯的是表格的邊框在視覺上過于突出，接下來我們繼續調整。
如圖（下圖）所示，通過弱化邊框在視覺上能夠突出表格的內容。表格邊框可以讓信息的呈現更有條理，能夠提高易讀性，但在視覺層級上不能高于內容信息。
將表格的邊框與分割線去掉，用留白分隔內容，無框勝有框，增大留白可以使表格更有空間感。這樣的設計需要注意的是，元素的間隔不能太小，不然會顯得擁擠。由于去掉邊框后有些問題會被放大，比如標題與內容沒有對比，因此需要增強對比，在整體上要有層次。
圖中的表格加強了標題，這樣看起來更有層次。強調標題的方法有很多種，不一定只是加粗字體或加大字號，還可以給標題欄添加背景，以形成對比。
如果在一組數據中有重要數據和次要數據之分，那么就需要在對重要數據的設計上著重突出，表格的設計同樣如此。圖中所示就是把重要的數據信息通過增加背景色與其他元素形成較為突出的對比，這種設計是一種為用戶做選擇的設計方法，容易讓用戶的視覺停留在他本想重點關注的地方。
由于人們常常會對熟悉的事物產生審美疲勞，因此設計中有創新才容易給人眼前一亮的感覺。
下圖在背景上面給了一根橫線，來凸顯這一列的數據，這樣除了可以加強信息傳達也可以打破常規的表格樣式（這里只是提供一種思路）。
表格數字最容易出問題的是數字字體的運用，因為很多數字字體不是等距設計，比如數字“1”所占的字間距面積要小于“8”的。如果遇到一組大量級的數字，就有可能會誤導觀者。
如下圖所示，本來32,118,116,00大于28,558,363,00，但由于不同數字所占寬度不一樣，這樣的設計在視覺上容易誤導用戶。因此，表格中的數字要使用表格字體，因為表格字體每個數字所占面積一致，這樣就不會出現案例中的問題了。
其實很多表格里面的數字字體都存在類似問題。下圖是修改數字字體后的設計，這樣就能客觀地呈現數據了。
表格中常用的字體有Roboto、DIN、微軟雅黑、思源黑體、宋體、蘋方字體等。
四、視覺設計
參考631配色法
對有含義的顏色要謹慎使用，例如：紅、黃、綠
常用的圖標分為兩類：
工具圖標：包含一定產品功能隱喻的簡化抽象圖形，代替文字節省界面空間，方便用戶理解，常用于b端產品里面。
如圖，里面來自不同產品的圖標，雖然表現形式不太一樣，風格不太一樣，但都是為了體現圖標后面文字的意思。
裝飾圖標：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于產品宣傳、活動等頁面。 如圖，云計算、大數據相關的產品，語義都比較復雜，很難通過圖標去表達，既然看不懂，就抽象點。
在 B 端產品中，應用最廣泛的還是工具圖標。 可能有人覺得工具類圖標太簡單了，它是看起來簡單，想做好一點都不容易。
首先要保證“一致性”， 粗細一致、圓角一致、透視一致、大小一致，同時還要把語義用圖形表達出來。
一般采用8的倍數：8、16、24、32、40、48、...
12px、14px、16px、20px、24px，可采用“回退機制”
作者：夜鶯YEAH
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
根據公司結構和職能角色的需求不同，用研中部分是行為觀察，部分是商業戰略，部分是心理學，部分是數據分析，部分是設計，部分是團隊促進。用研可以有不同的風格，因此可以在行業范圍內四處移換位置。根據公司規模和類型的不同，我見過很多用研團隊變成設計部門的一部分，有些則變成營銷部門的一部分，還有一些則在產品管理部門——最終在哪都根據公司的規模和類型來決定。在我任職期間的某個時候，我自己的團隊已經集結到了之前提到的各個部門。
所以...有沒有一個部門可以更加適合配備用研部門，讓用研更加成功且具有影響力呢? 這是我想找到的答案。
...
用研部門應該存在于...
...在設計團隊？
攝影：Harpal Singh 于 Unsplash
優勢：
研究與設計交織在一起：用研已經成為許多用戶體驗設計師工作職位描述中的一部分，而用研的核心就是指導設計。研究結果可以指導交互行為，并且它從一開始就已經嵌入了設計過程里。如果一個設計團隊有專門設立研究部門，會讓這個團隊變成一個強大的聯盟。讓更大的設計團隊統一研究整體用戶策略，會讓之后的調研和設計過程更加整體和完善。同樣，設計師也有想改善用戶體驗的眾多想法，并且通常很高興能看到用戶和他們的想法進行交流。這直接與這些創造用戶體驗改善的設計師們，促成了一個強有力的文化測試、迭代、再測試的過程。由于設計與用研的過程是結合在一起的，因此可以立刻將這些用戶洞察應用到設計中去。
類似的工作流程：用研的工作流程與傳統的設計流程十分相似。設計領導者可以無縫地理解研究的各個階段：復查現有的數據，引導生產性研究，匯編各種信息從而尋找新的模式，創建一份報告，陳述研究結果，在上線后測試等等。同時，從設計概念開始，征求意見、進行測試比較設計方案的好壞、迭代設計、產出最終的版本、呈現并且在上線之后進行迭代。設計和用研通常希望攜手合作，共同努力改善數字化體驗。
劣勢：
設計≠用研：不是所有的設計師都會進行研究，要么是因為他們沒有時間，要么是因為他們沒有接受過理解研究方法的訓練。（相反，也不是所有的研究人員都是設計師）通常，公司會安排設計師同時做研究員的工作，反之亦然。這對最終實現的產品來說可能是災難性的。尤其是在較小的公司中，設計師需要扮演很多職能。這意味著他們“有時候“有時間能親自調研。不幸的是，在設計和用研沒有明確定義的前提下，這意味著雇傭部門和領導團隊認為這兩者是可以互換的 (注意: 這并不意味著某些設計師沒有資格，只是“視覺設計師 / 平面設計師”、“UI設計師”和“UX設計師”的技能組合是有區別的，但我不會在這里討論這些!)
用戶需求可能會被遺忘: 有時候，一個設計規劃圖會被過分熱烈的創造性驅動從而創建，而不是來自于數據或研究。很多時候，創意人員會對他們喜歡的新想法產生依戀，即使它并非源于用戶需要的東西(有時候我們都會為此感到內疚)。不幸的是，這意味著研究可能是事后的想法，更經常地被作為驗證工具而使用，而不是在產品生命周期中預先定義需求。這對于用研來說可能成為難以克服的一個障礙，特別是如果設計概念與利益攸關方或決策者領導人一起審查，他們喜歡并認為這是一個“ 可以去做的設計”。這意味著研究的機會很有可能喪失。
...在市場運營團隊？
攝影：Carlos Muza 于 Unsplash
優勢：
相似的技能組合:市場研究和 UX / 產品的研究在他們特定的核心研究中，共享相似的過程和研究方法。在社會心理學、市場營銷學、人類學、人的因素、運作和設計等許多領域進行 “人的研究” 所使用的工具包非常相似：定量方法，如大樣本調查和分析；定性方法，如面對面的觀察，焦點小組，適度的訪談，日記研究以及其他。每個領域的方法都需要研究設計、用戶招募和研究分析。對于市場團隊來說，這是一個非常熟悉的世界，作為 用研 流動到這個部門意味著領導者可能會對你的角色需求有一個徹底的了解。
共同的目標是了解用戶: 市場團隊也將是你的擁護者。無論如何，源自于產品和設計的用戶研究的洞察力，為市場部門關注的許多舉措增添了直接價值。透過略微不同的角度來看，市場營銷和用戶體驗有著相似的目標(理解客戶) 。盡管如此，當團隊協作并共享信息，在以業務或用戶為中心的舉措之間建立平衡時，用研結果還是能夠幫助我們進行決策。
劣勢：
商業需求可能與用戶需求相反:如果組成“聚焦點”的事物變化太大，那么這個”聚焦點“既可以將市場營銷與用戶體驗結合起來，也可以將它們分開。當業務需求與用戶需求相矛盾時，可能會產生摩擦。如果市場部門的領導層將眼前的業務優先級置于用戶研究之上，那么獲取工具和客戶的途徑就可能受到限制。在一天結束的時候，市場團隊關注創收，即使這對用戶來說不是最好的體驗(比如在某個地方放置廣告，可能會干擾網頁，以確保用戶看到它) ; 而用研團隊關注什么是對用戶體驗最好的(比如在頁面上放置一個廣告，使其不會干擾用戶的任務，冒著用戶看不到并參與其中的風險)。
用研 ≠ 市場研究: 有時候，流動到市場部門意味著其他人將 用研視作為市場研究的延伸。由于這一點，一些項目有可能被認為應該由市場專家處理，而不是用戶體驗專家。例如，營銷活動的目標可能是“我們如何讓用戶使用這次促銷活動” ？另一方面，用研 可能會強調用戶的需求，比如“用戶希望如何獲得有關促銷活動的通知” ？這種情況（關注點的轉移）并不可能經常出現在市場部的議程表上。
...在產品管理團隊？
攝影：Marvin Meyer 于 Unsplash
優勢：
為產品使用路徑圖研究分配時間:通過將 用研 嵌入到產品管理團隊中，研究有機會通過在產品路徑圖中劃出其應有的空間和時間來充分發揮其潛力。通過讓 用研 和產品經理向同一個領導層匯報，這意味著目標和優先級可以被共享，并且在同一時間被一起審查。這可能是一個有效的工作方式，特別是當你與產品經理一起工作的項目，他們知道如何使他們的產品更直觀地呈現給用戶。用研的產品管理為定義實際產品需求創建了一種更加無縫的方法。這意味著路線規劃圖中留出了時間，在積壓成定局之前走出去，獲得用戶見解。這告知了大家需要開發的功能的優先級，并在完成設計之前，就形成產品了本身的特性。當 用研 與產品經理的目標緊密相連時，每個注入了用戶見解的產品階段都變得更加容易(因為它應該是在一個理想的世界中!)
更容易地與決策者進行知識交換:將產品經理的內部結構與 用研 的內部結構相結合，也意味著他們可以獲得更多用戶關于他們的體驗的言論，從而形成定期更新，并且可以更容易地進入用戶途徑。用研經常關注復查定性趨勢的反饋(比如 Qualtrics 或者 Medallia 系統)（在線調查或客戶體驗管理系統），這意味著產品經理聽到這些趨勢的機會變得更加頻繁。產品經理一般來說應該對他們的用戶群有深刻的理解，但是他們通常很難在傾聽用戶的基礎上來保持沖刺、業務分析、 KPI 和產品路線圖規劃。因為團隊會議中現在有一個指定的用戶代言人一直在場，這就是為什么與 用研 如此緊密地聯系在一起對產品經理來說是有益的。參加這些會議使得 用研 有機會直接與那些最需要了解用戶需求的人進行自發的對話。加入同一個團隊可以使這些溝通渠道更加開放，并且可以更加頻繁地了解用戶對產品經理的需求。
劣勢：
研究的優先級可能會降低:不幸的是，轉到產品管理團隊意味著有時研究的優先級會降低。當利益相關者對產品交付施加壓力時，這通常意味著產品需要盡快推出。然之后，產品經理必須專注于發布他們產品路線圖規劃上的項目，并在時間表和開發周期內實現業務目標。為了滿足這些時間要求，盡快交付某些東西成為更緊迫的目標，而不是交付一個經過研究和磨練的產品(這需要更多的時間)。
更多的評估而不是生產性研究: 把用研流動這個部門可能意味著這項研究變得更加可評估(或者驗證、可用性和迭代測試) ，而不是生產性(或者理解需求、價值和概念發現或開發的測試) ，就像在設計團隊下可以做的那樣。這不是一件壞事，而只是需要牢記在心，以便作為一個用戶倡導者，用研 的工作可以更直言不諱地說，需要留出時間來做更深入、生產性的工作，從長遠來看而不是短期內為產品提供信息。提前了解這個可能的障礙意味著用研可以更好地裝備自己的 ROI（投資回報率）影響，以便為更深入的研究騰出時間。
...在自己獨立的部門？
攝影：José Alejandro Cuffia 于 Unsplash
注意: 我還沒有在一個獨立的，指定的 UX 研究部門作為一個 UX 研究員的工作經驗。我只能推測將一個獨立的 用研 團隊集合起來會是什么樣子，或者當 用研 成為一個大型組織中自己的分支時，領導力的優缺點是什么。
優勢（推測）：
擁有自己帶領的用研部門，可以為更深入地研究需求提供機會。它將有能力根據合作伙伴的規劃路線圖從而制定自己的規劃路線圖。它可以讓部門領導層能夠深入地支持研究人員的需求，因為需求經常遇到障礙（如招聘、用戶日程安排、預算、批準、 ResearchOps（ Research Operation service 研究運營管理） 的行政工作等)。能夠擁有一個研究路線規劃圖，并為發現和生成性研究騰出時間，從長遠來看，可能會大大有助于產品和客戶體驗的信息共享。擁有一個獨立的團隊可以使這些研究成為奢侈品。當一個領導者致力于使研究成功，這意味著他們希望研究可以帶來更多戰略上的影響。
正如我之前提到的，一些被稱為 “ ResearchOps（研究運營管理）” 或者研究操作的東西，是一個趨勢短語，類似于 “ designnops①” 或者 “ DevOps②” 等等。拋開時髦不說，設立一個獨立的部門和領導層可能意味著在決策層有一個更大的席位，這反過來又意味著在使體驗研究產生影響方面有更多的投資。當投入更多資金進行研究時，業務側就有機會進行戰略思考并得到支持。一個獨立的 用研 部門反過來將能夠雇傭人來支持行政管理，為研究人員能夠專注于他們眼前的工作和分析而負責。在小型組織中，甚至在大型組織中的小型 用研 團隊中(比如我的團隊) ，研究人員往往負責所有的職能，這也是可以的！但是，如果有一個專門關注于這些研究人員需求的部門，并擴大他們工作的影響(不管團隊規模有多大) ，我相信將有更大的機會去收集更好、更深入的見解，研究過程也能充分發揮其影響力和潛力。
①Design Systems Ops 是設計團隊的一部分，他需要足夠了解設計，并且要了解他們試圖概念化什么。同時，Design Systems Ops 需要理解工程師的需求和定義方法，這將有助于設計系統的裝運和規?；Ｔ谀承┏潭壬?，一個 Design Systems Ops 是兩個世界的翻譯。
② DevOps（ Development和Operations的組合詞）是一組過程、方法與系統的統稱，用于促進開發（應用程序/軟件工程）、技術運營和質量保障（QA）部門之間的溝通、協作與整合。它是一種重視“軟件開發人員（Dev）”和“IT運維技術人員（Ops）”之間溝通合作的文化、運動或慣例。透過自動化“軟件交付”和“架構變更”的流程，來使得構建、測試、發布軟件能夠更加地快捷、頻繁和可靠。
劣勢（推測）：
相反，單獨作為一個獨立的 用研 部門，也可能使得決策層難以接受。如果不流入一個直接產生收入影響的部門內（至少在短期內，比如在銷售或營銷方面) ，那么 用研 的工作就很難得到認可。利益相關者之間的伙伴關系和一致性，對于用研人員能夠成功地完成他們的工作來說至關重要。如果沒有它，如果 用研 的需求被認為不是直接以產品為中心，同樣的職位可以幫助 用研， 也可能會阻礙他們。開展生產性研究的時間可能被視為“有風險” ，而且當團隊的領導層與其他更為成熟的角色(即風險較低的角色)分離時，可能很難獲得合作伙伴和利益相關者的支持。
同樣，投資一個獨立的用研團隊總的來說可能是有風險的?？赡芎茈y預測到有形的ROI（投資回報率）預測，以便業務合作伙伴能夠理解，并在第一時間投入資金。這意味著，決策者們可能認為給用研分配預算或增加人數是有風險的，其他研究需求也是如此。一般來說，R&D（產品研發）在組織中是一個棘手的領域，而 用研 肯定會在這個預算范圍內。盡管有證據表明，對研發的投資有能力改變企業經營的底線，并且可以通過創新保持企業價值，所以相對于獨立的用研部門，緊迫的商業需求可能話語權更大。
...
作者：三分設
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn