如果說去年到今年科技領域的概念，元宇宙一定是最亮眼的那一個。 然而我們看到市場上的產品，扎克伯格奇丑無比的元宇宙自拍；包括大家都知道XR好像和元宇宙有些關系，但是XR本身好像也煙消云散了 那么元宇宙是否也是一個資本炒作的噱頭呢？它和AR究竟發展到什么地步了？設計師能做什么？
本文分為以下3個部分進行講解：
和當時的“VR元年一樣”（當時VR比其他R更火），在去年“元宇宙元年”被提出之后的今天，同樣浮現了許多諸如：“啊，這不就是AR嘛，果然是資本炒作的噱頭”之類的聲音，那我們首先結合以上片宇宙的概念來看看他們為什么這么說。
以上文字來源于百度百科的解釋，這里面有兩個重要的關鍵詞：虛擬現實世界和數字化身。這兩個詞可以說就是元宇宙的命脈。
誒，但是這兩個事物新鮮嗎？它們像什么？
我們的游戲玩家發言了：這不就是MMO RPG嘛。
對，這就是為什么騰訊網易都在積極部署自己的元宇宙，騰訊的QQ元宇宙，網易的瑤臺。它們擁有行業上的先發優勢，比如游戲引擎、比如三維能力。可以說，在內容這一塊，游戲行業的一只腳其實早就踏入元宇宙，你在玩原神的時候，世界不是虛擬的嗎？你的人物不是代表你嗎，除了虛擬人部分還是寫好的程序，AI智能程度不高，和metaverse也沒什么區別。這時候我們得出結論：害，元宇宙就是rpg游戲嘛，果然是個噱頭。
是這樣嗎？ 是，但是不全是。
我們來看兩個元年，去年2021年被稱為元宇宙元年，而在這之前的2015年被稱為XR元年。
那一年我上大一，我就是從那一年入的XR的坑?？粗佁焐w地的VR的新聞，還在學交互的我琢磨著，woc，這玩意兒就是未來。2015年，
hololens和htc vive的推出，標志著VR和AR技術不再只停留在實驗室，他們可以開始商業化探索了。實際上VR的誕生比之前說的雪崩更早，他在上個世紀60年代就被發明出來，被稱為“達摩克利斯之劍”，這在很多VR科普的文章中都被講解到了，感興趣的朋友們可以去查一下VR的發展史。
而2021年，nft作為具有唯一性特點的可信數字權益憑證紅極一時，緊接著web3作為去中心化的新型網絡模式，虛擬人作為元宇宙中的人物形象，跟隨元宇宙一起被大家所知曉。
這些本來在小眾技術圈的研究其實都在“元宇宙”概念之前默默發展了，但由于元宇宙被資本市場挖掘。這時候有許多人發現，元宇宙好像真的可以開始做了。
我們再來看一下兩根曲線，他們分別是是2018和2022年，由世界著名咨詢和趨勢預測機構gartner發布的曲線，看過這個我們就知道為什么XR似乎消身匿跡了。每一項技術的誕生基本都逃不過資本對概念的炒作，這是他們第一次讓實驗室外的人知曉。但隨后都會進入一段漫長的產業深耕期。不明真相的圍觀群眾看到的是又一個噱頭隕落了，但是這些被資本堆積起來的無數企業卻在默默地開始他們的長征。比如在AR頭顯領域，他們中大多數會像影創、NORTH一樣陷入困境，但也有少部分探索到可行的商業模式得以生存。有很多技術都在質疑聲中慢慢走向成熟。
以另外一個今年很火的概念虛擬人為例，在虛擬人中有一項非常重要的技術：讓虛擬人開口說話的“語音-口型”技術，它的實現路徑中，許多技術都在近年來快速發展，比如GAN（生成式對抗網絡）、動作捕捉、包括基礎的建模、TTS（文字轉語音）等。
然后我們再來看XR，首先用一句話講明白各種R的定義：下面的這張圖是許多XR論文中都會引用的“虛擬-現實連續體”，其實我們熟知的VR（虛擬現實，virtual reality）、AR（增強現實，augmented reality）、MR（混合現實，mixed reality）都是其中的一種程度，越靠近軸的右側，越接近真實世界。而XR則是他們的總稱（擴展顯示，expended reality），我今天主要想分享和元宇宙最相關的AR。
雖然很多產品廣告都是以實物為準，但是基本上下面視頻里的畫面都是真實的。這里的hololens是世界上集成度最高的AR設備，然而他很貴、很重還有各種技術上的限制。下方的是今年U設計周國內頂尖AR頭顯廠商Rokid介紹的和釘釘合作的辦公視頻，這張圖中我注意到的重點是那根連接HMD（頭戴式顯示器，頭顯）的線。沒錯，他們把頭顯連接到手機，用手機的計算可以大大的減少整個AR-HMD的重量，而重量之前一直是一個老大難問題。事實上，近年來有許多AR-HMD都采用了這種連接手機的方式。又或者專注于某一垂直領域，比如只做工業生產中的識別掃描等等，這些都可以極大的提高設備的性能，減少設備重量，優化用戶體驗。
比如今年新發布的這兩款AR-HMD，oppo通過做減法，讓眼鏡只保留基礎的增強顯示信息的功能；nreal通過連手機讓眼鏡外形到達了不再像hololens那樣中二的程度（雖然在功能上nreal似乎和VR沒什么區別，缺少和現實世界的交互）。此外，他們各自也有光學上的創新與專利。
因此，我們可以發現，XR其實并沒有銷聲匿跡，他們一直在不斷的迭代自己的產品。到現在這種和普通眼鏡無異的產品形態，已經和剛出來時又了很大的進步。
說完了XR的發展后，接下來說說，現在XR還需要解決的問題。下方是XR當前遇到的一些難題和困境。
首先是價格問題，現在的AR一體機價格依然非常的貴，只能作為一款企業級的產品賣給B端，軍方。比如hololens與美國軍方簽訂了4.8億美元的訂單；羅克韋爾自動化通過AR提高了員工的培訓效率。
FOV（field of view），視場角。作為HMD（head mounted display）的一項重要評價指標，在增強現實的HMD中受到極大的限制，我們可以看到右上方的這幅圖顯示的是代表目前AR頭顯的最高水平的微軟hololens和magic leap。其中hololens2的FOV是最大的，有43*29。但是人的正常視野范圍大約有水平210*豎直150.這就會導致下圖的這種情況——用戶因為FOV問題錯過視野外的虛擬信息。在下圖中用戶通過AR識別展板，看到展板上的虛擬按鈕，點擊后左右兩側都出現了虛擬信息，然而由于FOV問題，用戶實際上看不到兩側的額外信息，導致用戶體驗不佳。
而為了解決這個問題，現有的研究提出了各種方法，如下圖中的作者Marquardt等人連續5年發表相關論文，通過在AR頭顯上安裝震動器、耳機等外設，利用觸覺和聽覺暗示用戶虛擬目標的方位。
而在軟件交互層面，有許多研究致力于使用雷達、小地圖、3d箭頭等和游戲中相似的方式，幫助用戶找到空間中的虛擬目標。
暈動癥也是一個老生常談的問題，但是這一癥狀在AR中并不明顯，這可能是因為使用AR時用戶可以看到現實世界。而對于AR來說，設備重量和電池續航問題更為嚴重，Hololens2的持續使用時間實測僅為4小時左右，并且當事業中的場景或虛擬物體較為復雜時，還會導致主機很燙，佩戴體驗不佳。
最后想和大家來探討一些作為設計師，這些先進技術要到來時，我們可以做哪些準備。
很顯然，XR帶來的空間界面將突破傳統用戶界面的方式，打破屏幕，將信息融入現實世界，增強用戶獲得信息的途徑，增加信息的維度。這一顛覆性的顯示技術變化，勢必會帶來交互設計上的變革。再對空間界面進行設計時，勢必會帶來許多2D時代未曾考慮過的問題，比如信息與自身的空間相對位置，多模態的信息提示，用戶負荷，人體工學等等。因此趕在技術成熟之前，預想出一套全新的交互設計規律，可以為技術的爆炸性突破做好準備 —— 一旦技術普及，相關應用立刻投入生產占領市場。以下為一些個人對AR設計的扯淡。
首先從交互形式上來說，XR的理想狀態應該是可以支持多模態的交互形式，包括視覺的注視眨眼、聽覺的空間音效、頭部的追蹤跟隨、手勢的識別、身體運動時的空間識別等等。甚至也有研究通過電極模仿味覺、香氛模仿嗅覺，達到五感沉浸的效果。
請注意，這里的每一個通道的設計都需要被考量。舉些例子：比如在進行聽覺交互時，需要考慮到提供空間音效的HRTF技術可能存在前后混淆的問題，玩過吃雞（或其他FPS游戲）的玩家可能會發現，有時候無法分辨敵人來自正前方還是正后方。而對于頭部旋轉、身體運動，需要了解，人的脖子、軀干擁有最大扭轉角度，如果用戶在坐著的使用場景中，則需要考慮虛擬信息最多能被放置在多少大的范圍內。對于手勢交互，應盡量避免一些手勢沖突，因為現在的手勢識別技術在有些時候不那么精準。這在我們的平面交互中也會遇到，比如一些熱區、滑動和點擊問題。
在進行視覺引導時還會存在各種物理、生理甚至心理上的交互規則，比如之前提到的小地圖和箭頭，它們分別屬于外中心和內中心的視點引導方法——小地圖是以空間中的其他物體為參考對象，比方杯子在桌子上；而箭頭是以自己為參考對象，比如杯子在我前面。研究表明內中心的參考方式在視覺搜索時間和任務符合方面都優于外中心。
視覺交互中，需要結合設備大小和人的中心視野范圍，考慮將層級重要的信息置于視野中心。因為人的視野大小本身也是有極限的，下方的圖從小到達依次為：hololens的橫向FOV，人的雙目中央視野（可以容易的觀察到立體信息），人的總體視野，以及轉動頭部時能看到的最大視野。此外，請盡量將信息布置在人體周圍的球形界面中，以保證用戶在旋轉視角時，界面、字體的尺度大小保持一致性。
和2D界面一樣，在空間中也有信息層級，除了常規的平面信息層級之外，空間界面中還有“深度”概念。
關于色彩，在AR頭顯中目前存在一些極限值，比如明度和不透明度低于一定值時人就很難分辨了，這是因為ARHMD的鏡片本身也存在一定的透明度。我們可以采用一些卡片式（或者在AR中應該稱為模塊化？）設計，在信息底部疊加對比強烈的底色，保證信息的可讀性。
然后是模型設計，右側為前段時間扎爾伯格的離譜自拍，奇丑無比的外形被人噴的體無完膚，并且META中的小人都是沒有腳的，這加強了吃瓜群眾認為元宇宙就是噱頭的心理。除去meta可能把黑紅作為營銷策略的想法之外，有可能是出于性能和技術的考慮。
首先出于性能，前文說過復雜的場景可能會導致場景卡頓，因此可能這張照片只是內部測試時為了高效而選擇了Low poly(低面)風格的模型。其次在技術方面，由于VR眼鏡目前大多都是坐著玩的，攝像頭沒有辦法識別到用戶的腳。并且用戶的頭部有頭盔，手上有手柄，因此可以大致模擬出上半身的大致姿態，而腳的可穿戴設備似乎還比較匱乏。另外也有官方說法是，在原宇宙顯示下體可能會導致一些“倫理”問題，emmm。
但其實從識別技術來說，微軟在16年就可以實現全身的遠程對話了。
說了這么多，可能大家會覺得AR好像是開發的事兒，設計師能做的事目前還不多。但事實上，要想實現一個AR的demo并沒有這么困難，運用現在已有的軟硬件能力，我們已經可以快速的開發出一些AR原型。這些工作有點類似游戲行業中的技術美術（TA），AR的普及需要更多的殺手級應用，這其中也一定需要各位設計師朋友的支持。學習一下unity、unreal引擎，包括Nvidia的ominiverse都在幫助設計師更好的創作內容。
再來看些老生常談的AR應用場景。
第一張圖是今年的ucan中使用的AR會場，可以在上面看到不同嘉賓的信息，還可以和他們互動、點贊。不過他的信息是360度呈現的，考慮到會場大伙都是坐著的，而且轉頭拿手機對著別人的臉是不是也不太禮貌，是不是設計上還能再優化一下呢=v=。
除了會展，AR還非常適合一些需要高成本制作的場景。比如房屋裝修、汽車銷售、珠寶定制等，他們的試錯成本都很高，如果在下單前就能看到最后的效果，可以為商家節約很多成本。
最后我想說，其實元宇宙的各個產業鏈上，相關技術都在快速發展。我們可以說現階段的元宇宙和XR是噱頭，是概念的堆積。但是只到此為止一笑了之可能草率了一點，很多技術都會爆發式的進入成熟期，為了空間交互可能的到來，至少我自己還得做很多的準備。
關注趨勢本質上就是關注未來可能存在的形態。很多營銷需求和優秀設計趨勢是相互關聯的，兩者之間的關聯更像是一種動態的同步。
很多時候趨勢并不一定是全新的東西，它們往往是服務于當下和未來的需求，有很多趨勢存在了一些年頭，它們在現在發揮著作用，但是在未來可能會發揮更大的效用。所以，當我們在查看這些設計趨勢的時候，需要注意，它們必須是服務于用戶，服務于品牌和企業。
更多設計趨勢：
的確，極簡主義一直在某種程度上流行，但是 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%的情況下都使用這種原則。
使用這個原則，在購物網站上強調了標語和產品，轉化效果非常好
統一是指設計元素如何很好地結合在一起，形成“視覺凝聚力”。它指的是設計中的連貫性，讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系，以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理，質量也更高。
運用統一的配色，重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感，也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個完美的整體。
一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網站上創造了一種統一的感覺。
格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠，元素就顯得越不相關，它們之間的關系就會減弱。一般來說，人們會認為遠離的元素是不相關的。
不應該讓用戶在設計中分辨哪些元素是相互關聯的，正如美國郵政服務的例子所顯示的那樣，缺乏對鄰近性的關注會導致直接的認知緊張，損害用戶體驗。
接近原則沒做好的案例。由于字段標簽離它們下面的字段更近，人們可能會搞混
下面是一個鄰近性原則做的好的案例，我們可以看到相關元素是如何通過鄰近性關聯起來的(分組的元素用紫色表示)。
一個把接近原則用好的網頁設計案例
一致性原則使數字產品的使用更加可預測，符合用戶的期望。設計中的一致性可以培養熟悉度，它可以提高用戶體驗、可用性和用戶使用效率。另一方面，不一致的設計將產生更多的認知負荷/腦力勞動，并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強“審美凝聚力”。“我們都知道，當我們使用應用時，應用的導航位置如果經常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產品設計中也發揮著重要作用。如果沒有一致的元素呈現，如排版、配色和圖案，高質量的品牌體驗將無法傳遞。
在用戶體驗方面，一致性意味著在設計中使用相似的 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咨詢、用戶體驗公司、軟件界面設計公司
有些人可能會說，我要是這么排版，客戶肯定不會覺得太簡約了、重做，我只能說有這個可能，畢竟每個人的喜好和具體的需求是不一樣的，所以，你要用在合適的產品和客戶上，不要千篇一律;其次也不能直接照搬日本設計的排版，比如大量的豎排在中文設計里不合適，還是要以橫排為主；另外，很多時候客戶不是不喜歡簡約一點，而是不喜歡你做的簡約，如果你把客戶的需求都表達出來了，還簡約好看，客戶沒理由不喜歡。
作者：蔥爺
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
案例 1 使用“多多買菜”加購一款蔬菜，平臺會自動為你提供更多規格做選擇。比如你將 500 克的西紅柿加入購物車，平臺會告訴你可以買“兩盒裝“，價格更優惠：
案例 2 脈脈上，如果對于自己所在的公司的內容進行評價，系統會直接采用隨機命名的方式，給你起一個有趣的新名字，起到了保護你隱私的作用，讓你放心大膽地講實話：
案例 3 bilibili 上的很多主播會給觀眾做與內容相關聯的進度條，你可以很清楚的看到視頻每一段的具體內容和播放進度，跳播更方便：
案例 4 用搜狗輸入法輸入“今天天氣”的這幾個字時，會自動推薦當天的天氣情況。你可以提醒你在乎的人注意天氣變化：
案例 5 產品也可以阻止你做壞事。Adobe Photoshop 軟件中內置了一個鈔票防偽系統，用來防止你利用其制圖功能非法制作假鈔：
案例 1 高德地圖會給用戶很多條可選路線，對于每條路線都會給出詳細建議，比如：擁堵少、紅綠燈少，還會給出明顯提示：“窄路多，需要小心駕駛” 或者 “路上有一個新增電子眼” —— 它知道很多你不知道或記不住的內容：
案例 2 在百度瀏覽器上查找不同單位之間的換算時，百度會呈現出與你搜索的內容相關的所有單位名稱，便于你進一步做查找和換算：
案例 3 夸克 App 上搜索熱點話題，會出現與事件相關“大事項”，以時間倒序的方式還原事件始末，為群眾們吃瓜提供了便利。下圖是我在 2021 年 12 月 20 日那天搜索王力宏事件時看到的信息內容：
案例 4 在微信中搜索文章時，如果有虛假謠言類的文章，微信不會讓文章不可見，而是會鄭重其事地做官方辟謠，幫助你矯正觀念，粉碎謠言：
案例 1 在新的網絡環境中使用蘋果設備連接 Wi-Fi，具備同樣 Apple ID 的設備可以進行 Wi-Fi 的密碼共享，不需要你再重新輸入密碼：
案例 2 釘釘和阿里的出差系統打通，當你提交了出差申請，到了出差的那一天，釘釘上狀態會自動切換成 「??出差中」，方便其他同事了解你的工作狀態：
案例 3 如果你晚上臨睡前將蘋果手機連上充電器充電，iOS 手機系統的「計劃充電」功能會根據你的使用習慣，在電量達到 80% 時就會停止充電。然后在你第二天早上使用前再繼續充電直到充滿，以此延長電池的使用壽命。這意味著 iOS 系統要準確判斷出你每天開始使用手機的時間。你也不用因為擔心整夜充電對電池有損害而選擇不在晚上充電或是半夜爬起拔掉電源：
案例 4 在屏幕很暗的情況下，打開微信或支付寶的支付二維碼，屏幕會瞬間亮起，便于商家掃碼付款，不需要你手動調亮屏幕，掃碼后又會回到之前的屏幕亮度：
案例 1 用飛豬 App 查找酒店時，可以在地圖上用手指畫圈，不需要輸入街道名稱就可以滿足你自定義范圍來找酒店的需求：
案例 2 微信的圖片搜索的功能，可以通過圖片里的文字和內容來檢索圖片，比如你只需要輸入“食物” 二字，就可以看到與食物相關的所有圖片。你再也不需要在一堆圖片中找到眼花了：
案例 3 NN/g 網站移動端的支付流程中，“銀行卡可用時間”的輸入框使用了特定的格式輸入效果，你不需要糾結輸入內容的格式問題，可以很輕松地完成填寫：
案例 4 蘋果的 Airdrop 箭頭是一種方向性的指示，將你的 iPhone 對準對方的 iPhone，就能很快速地在周邊一群設備中找到對方。同時 Airdrop 自己也有記憶，你經常發送的用戶和綁有你自己 ID 的設備，都會靠前顯示：
作者：元堯
轉載請注明：學UI網》案例錦囊｜有哪些小交互讓你瞬間覺得產品很「智能」？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
奇數法則意思是說，在設計作品中奇數元素比偶數元素更有趣。偶數元素在圖像中產生了對稱，這可能會顯得過于正式和不自然。比如，在一行中排列三個或五個卡片會比2個或4個效果更好，作品會更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數原則做的網頁設計
三分法構圖（也被稱之為黃金網格規則），在畫面中以水平和豎直方向分成3×3的網格和4個交叉點。這個規則能很好的協助設計師將最重要的元素放在網格的交叉點上，這樣可以很容易的設計出滿意的構圖。
為什么會這樣？因為三分法構圖創造了類似斐波那契數列(黃金比例)那種不對稱的美，產生了更有吸引力的構圖。
你希望用戶關注哪些地方？高級設計師非常擅長引導用戶的視覺焦點，這種引導可以通過可見和不可見的引導線來完成。這些線條在構圖中也可以打造一種動感，也能為畫面增添視覺沖擊力。
達到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導線來實現。利用透視、顏色、對比度和正負空間同樣可以幫助達到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導到頁面文字上
大小（scale）是設計中一個元素與另一個元素的相對大小。元素通過大小不同創建視覺層次，其中最大的元素首先會吸引用戶的注意力，因此看起來是最重要的。常規的設計策略就是將最重要的元素做成最大的，然后逐級遞減。
比例(Proportion)不同于大小，類似但有區別。比例原則是指一個整體設計中各部分的尺寸關系。設計中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實現設計統一的關鍵。當一些元素的大小過大或過小，或者比例失調時，設計組合就會失去統一性。這種錯誤可能發生在排版和其他元素上。例如，標題與子標題和正文相比顯得過大。當設計元素失衡時，設計就會“感覺不平衡”。
大小和比例都沒做好時(左圖)，看起來處理的比較細致了，但依然沒有做到很好，在大小上正文和標題分不清(右圖)。
強調原則用于使設計的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強調(例如在頁面底部有一個幾乎看不見的“小字”)。強調是層級之母，因為沒有強調就沒有層級。
與其他一些設計原則一樣，“強調”是用來引導人們關注設計，并強調需要重點關注的第一、第二和第三點。首頁面和電商轉化頁面在99%的情況下都使用這種原則。
使用這個原則，在購物網站上強調了標語和產品，轉化效果非常好
統一是指設計元素如何很好地結合在一起，形成“視覺凝聚力”。它指的是設計中的連貫性，讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系，以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理，質量也更高。
運用統一的配色，重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感，也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個完美的整體。
一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網站上創造了一種統一的感覺。
格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠，元素就顯得越不相關，它們之間的關系就會減弱。一般來說，人們會認為遠離的元素是不相關的。
不應該讓用戶在設計中分辨哪些元素是相互關聯的，正如美國郵政服務的例子所顯示的那樣，缺乏對鄰近性的關注會導致直接的認知緊張，損害用戶體驗。
接近原則沒做好的案例。由于字段標簽離它們下面的字段更近，人們可能會搞混
下面是一個鄰近性原則做的好的案例，我們可以看到相關元素是如何通過鄰近性關聯起來的(分組的元素用紫色表示)。
一個把接近原則用好的網頁設計案例
一致性原則使數字產品的使用更加可預測，符合用戶的期望。設計中的一致性可以培養熟悉度，它可以提高用戶體驗、可用性和用戶使用效率。另一方面，不一致的設計將產生更多的認知負荷/腦力勞動，并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強“審美凝聚力”?！拔覀兌贾?，當我們使用應用時，應用的導航位置如果經常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產品設計中也發揮著重要作用。如果沒有一致的元素呈現，如排版、配色和圖案，高質量的品牌體驗將無法傳遞。
在用戶體驗方面，一致性意味著在設計中使用相似的UI元素來完成相似的任務，即在整個產品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質量屬性，所以一致性對用戶體驗的可用性有很大的貢獻。
一致性是通過使用相同的配色、排版、間距、模式和交互來實現的。
顏色在設計中是非常重要，幾乎是設計中最具影響力的創意元素。一個深思熟慮的配色可以讓一個設計從普通到驚艷，而一個平庸的配色會降低用戶的體驗，甚至阻礙他們使用產品的能力。
明亮、豐富的顏色比柔和的顏色更引人注目，因此有更大的視覺沖擊。柔和的顏色可以提供一個令人愉快的，微妙的配色方案，但適當的對比必須要有，特別是文字，必須保證可讀性。
顏色甚至可以用于呈現UI中的結構感并指向可用的交互，但為設計制作一個配色方案并不是一項簡單的任務。除了品牌化，還必須非常小心地創造顏色的和諧和耐用性，使得它能在各個場景下都能正常使用。
色彩心理學也不容忽視。色彩承載著意義和情感，可以向人的潛意識傳遞信息。在品牌方面，人們對顏色做了大量的心理學研究，因為在人們與品牌進行任何互動之前，顏色會讓他們產生一種本能的反應。例如，藍色通常被認為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認為是增加人們的心率，想想飲料包裝。
一個極簡主義的暗色主題設計傳達了一個特定的品牌氣質，并使用了少量的顏色。
排版在設計中扮演著非常重要的角色，它的重要性再怎么強調都不為過。在構圖中，字體樣式對人們感知設計的影響比任何其他元素都大，可能除了顏色。
因為我們的大腦以閃電般的速度運轉，一個字體會對一個設計產生影響，以至于它可能在不到一眨眼的時間內改變用戶的印象。與顏色一樣，字體甚至會影響我們的情緒，資深設計師可以通過字體傳達情緒和風格。通過選擇合適的字體，我們可以傳達出穩定、優雅、舒適、可靠、有力等信息。
排版層次結構可以快速建立視覺層次結構，并且通常在其中扮演重要角色。因此，在設計中經常使用不同的字體和字體大小來表示層次結構，例如標題、副標題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達重要內容，并表達你的品牌。” ——蘋果的人機界面指南
蘭博基尼的網站巧妙地使用了排版風格和比例來賦予其設計力量。
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點也適用于設計，元素之間的負空間給予設計強調、平衡和統一。
元素周圍適當的負空間將焦點集中在元素本身。它強調了內容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點，更容易感到困惑。
蘋果官網提供了一個利用負空間創造強烈焦點的杰出例子。
人們已經開始期待所有平臺和設備上的優化、無阻礙的用戶體驗。理解設計原則及其交互方式對所有設計師來說都是至關重要的。使用專業技能設計它們是創造具有視覺吸引力的功能性設計的關鍵。我們不要忘記，美學的完整性會嚴重影響用戶體驗。
基于原則的設計是設計師在感覺有點迷失或用盡創意時可以依賴的黃金標準方法。在沒有理解和實現設計原則的情況下，也可能實現可接受的設計。然而，這可能需要大量的嘗試和錯誤才能創造出看起來不錯的內容，并創造出最佳的用戶體驗。
產品的美學質量與它的實用性密不可分，因為我們每天使用的產品影響著我們和我們的幸福?！钡挥芯闹谱鞯奈锲凡艜利??！?Dieter Rams(迪特爾·拉姆斯)
當我們不關注由設計原則驅動的設計質量時，我們可能會忽視品牌質量及其所代表的一切。當某些東西設計不好時，品牌就會受到傷害，產品也會受到影響。這就是為什么偉大的設計師在他們的工作中極其嚴謹， 他們知道“你永遠不會有第二次機會給人留下良好的第一印象?！?/strong>
設計的細節成就了設計本身?！?查爾斯 伊姆斯（Charles Eames）
原文：https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d
作者：Miklos Philip
譯者：彩云Sky
本文翻譯已獲得作者的正式授權（授權截圖如下）
轉載請注明：學UI網》超全面的設計底層理論，優秀設計背后離不開這些（下）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
TIPS：
· 全文共計2643字，閱讀需5分鐘左右
· 文章源自于日常設計工作的沉淀與總結，不排除個人觀點的局限性
1、人格特征下的設計原則指引
完成人格畫像是塑造生命感的第一步，更重要的是如何將這樣的人格特質系統性的體現在IP形象中，為此我們有必要將人格中的核心特質轉譯為設計語言，定義IP在場景、情緒、行為、語言4個方面的設計指引原則。下文我們繼續以“犀寶”在工作臺的設計應用為例，基于人格特質歸納設計原則。
1.1 “犀寶”的核心人格特質
1.2 場景原則
經過多輪線上線下調研，我們對客服崗位建立了基于職業特征的用戶畫像：高強度、高疲勞、高負壓。面對即時溝通、多會員切換、服務考核等壓力，客服往往需要一個高效、專注的工作環境。因此基于人格特質的場景原則首先要保證“不打擾”，除功能性需要，應避免在客服服務過程中過度設計。結合“犀寶”利他主義、強共情等的人格特征，更適合應用在非上班狀態的場景中，如：引導教學、頁面加載、為空狀態、結果反饋等。
1.3 情緒原則
經過對IP形象在工作臺中的典型應用案例的編碼梳理，我們基于情緒二維模型對“犀寶”的情緒進行了管理統計。情緒象限中所定義的觸發條件即為應用原則，高頻出現的情緒即為典型情緒。
我們將“犀寶”的典型情緒統計如下：
高興、冷靜、興奮、放松、慌張、欣喜、疑惑
將“犀寶”的情緒原則進行如下歸納：
① 面對客服或客服的正向行為，建議使用帶有正向情感反饋的情緒（如高興、欣喜、興奮等）；
② 面對客服的負向行為，避免使用帶有負向情感反饋的情緒（如緊張、慌張、沮喪、尷尬、疑惑等）；
③ 處于工作狀態時，建議使用中性的情緒（如冷靜、嚴肅）；
④ 面對工作臺/系統的狀態，不受常態的正負向情緒拘束；
⑤ 任何狀態下，避免使用帶有攻擊性的情緒（如憤怒、厭惡、鄙夷、怨恨等）。
1.4 行為原則
行為原則是在IP人格特質與典型場景的基礎上，對IP行為特點的建議與約束。按照以上思路，我們對“犀寶”的行為原則歸納如下：
① 建議使用具有引導/指向性的動作（如舉手引導）；
② 建議使用具有社交禮儀的動作（如揮手問候/告別、雙手呈遞）；
③ 建議使用呈現工作狀態的動作（如佩戴耳機坐在電腦前）；
④ 建議使用操作智能設備的動作（如操作虛擬現實工作臺、使用可穿戴設備等）；
⑤ 建議使用帶有正向情感反饋的動作（如擁抱、點贊、鼓掌、加油等）；
⑥ 避免使用帶有劇烈運動的動作；（如奔跑、跳躍、健身等）
⑦ 避免使用帶有情感攻擊性的動作（如指責、揮拳等）。
1.5 語言原則
語言原則是在IP人格特質的基礎上，對IP聲音、話術等特點的建議與約束。按照以上思路，我們對“犀寶”的語言原則歸納如下：
2、擬人化的形態設計
在明晰人格特質和設計應用原則后，我們可以進一步思考IP形象在產品中的擬人化表現。在這里，簡要的分享一下思路方向。
上文提到，擬人化是把物擬作人，使其具有人的形態、情緒、行為、語言等特征，轉譯為設計語言即為IP形象的形態結構、面部表情、體態動作、聲音文案幾個部分。其中IP形象的結構決定了表情和動作的可塑性、豐富性。從上文JOY的形象設計案例中不難看出，人體化結構是IP形象設計的主流手段之一。
對于擬人化的表現個人建議優先從結構人體化著手，結構滿足后，具有人格特質的擬人化表現自然水到渠成。在這里，我們可以將結構人體化的方式總結為：
2.1 模仿人類的五官結構
使IP形象具有眉、眼、鼻、嘴、耳的基本結構關系，幫助IP進行生動、豐富的情緒表現。
2.2 模仿人類的形體結構
使IP形象具有頭、手（手指）、軀、腳的基本結構關系，幫助IP進行生動、豐富的動作體態表現。
3、仿真化的動態設計
在完成人格化、擬人化的設計思考后，相當于為IP繪制了一幅角色設定草圖。接下來我們可以結合品牌/產品氣質，豐富感官表現，精細化的同時進一步有增強其生命感知。在這里，簡要的分享一下思路方向。
上文提到，仿真化是對形象進行物理及生物特點的感官還原，表現在造型、空間、色彩、質感、動態、聲音等多方面。然而，不同類型的品牌、產品、應用場景，對仿真化的程度需求有所區別，如：主機/電腦游戲類產品，娛樂屬性更強，為了追求沉浸式的感官體驗，在各方面的仿真表現都相對較高；品牌/產品宣發場景，展示性更強，仿真表現的權重也相對較高；在APP/網頁界面中，更注重功能體驗和產研效率，風格以扁平為主，因此對于仿真表現的訴求也相對較低，在這種情況下，對比造型、空間、色彩、質感等元素，IP形象的動態表現最能直觀的表現生命感。
那么，如何通過動態表現增強產品IP形象的生命感？
3.1 模仿真實的生物規律
① 呼吸感：
呼吸是生物的生物學功能，有節奏的呼吸起伏是生命體的直觀體現；
② 眨眼：
眨眼動作屬于生物體基本的生理反射，間隔性的眨眼動作可以增加形象的生命感知；
③ 模仿生物習性：
以“犀寶”為例，犀牛生活在蚊蟲多發的非洲，靈活直立的大耳朵不僅可以洞察環境，還可以幫助他們軀干蚊蟲，抖動耳朵是一個非常具有生物習性的行為反射。在呼吸、眨眼的基礎動態上增加間隔性的抖耳，可以讓整體形象更加真實生動。
3.2 模仿真實的動態規律
現實世界中存在著許多物理運動規律，如運動慣性、速度曲線、落地緩沖等等，想要表現出IP形象真實生動的動態特征，需要了解并掌握其中的動態規律。從動畫的視角來看，迪士尼黃金12定律具有很好的專業參考性，相對全面的總結了20世紀30年代以來迪士尼動畫的制作方式，是動畫專業必修的知識點。
小結：如何基于IP人格特質進行設計應用？我們的方式是結合產品特點、IP人格特質擬定設計原則；通過擬人化的結構增強IP形象在動作表情方面的可塑性；最后通過合理的仿真化手段完成設計應用。以下是“犀寶”在產品應用中的部分設計案例。
案例一：培訓機器人對客服模擬練習的狀態反饋
案例二：客服工作臺啟動頁加載插圖
案例三：客服應用頁面加載插圖
案例四：瀏覽器升級提示
案例五：靜態插圖合集
結合設計和心理學理念來看，具有生命感的IP形象能夠帶來更有力的功能及情感價值。通過對IP生命感的分析，我們認為IP形象的生命感由表及里表現出“仿真化、擬人化、人格化”三個層次。其中人格是決定IP形象如何表現的核心，因此對于形象的設定邏輯建議由里至表的進行思考統籌。從設計力度上看，對于各層次的程度把控與配合，建議根據產品屬性、傳播媒介、表現形式、技術條件、預期效果、預算成本等具體情況進行評估。
引用及參考文獻：
[1] 魯道夫.阿恩海姆. 視覺思維. 四川人民出版社. 2001(3)
[2] 姚浩然.人格化加劇形態設計研究[D].南京：南京林業大學木材科學與技術,2012：12.
[3] 吳龍華.個性心理結構問題的研究[J].人力資源管理,2012(12)
作者：AlibabaDesign
轉載請注明：學UI網》靈魂注入指南-打造富有生命感的產品IP（下）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
經過前期的調研和分析，以及結合相關的業務訴求，確定了我們的項目目標，那就是要做出一款為新房營銷賦能的設計工具，同時也總結出好的電子沙盤要同時具有這四個方面的特性：
1、效果真實自然
電子沙盤要傳達的是真實的地形地貌等信息，使用戶在觀看時要有身臨其境之感，因此在最終效果上要力求最真實自然的視覺體驗，為用戶呈現最好的效果。
2、覆蓋類型廣泛
在模型的品類方面力求多樣化，這樣整個場景才會更接近真實的效果，在項目中我們使用模塊化的方式，創建了項目資源庫，達到了建筑、植被、健身器材、公共設施等全品類覆蓋、共產出植物模型17種，建筑模型36種，器材設施類模型22種、UE4引擎材質260多種，為最終效果的實現起到了決定性的作用。
3、模型細節精細
除了周邊環境要真實自然，小區內每棟樓的建筑細節也非常的豐富，以真實的建筑結構信息來進行模型制作，用戶在使用時能夠查看到樓盤內每一棟建筑的外觀和結構細節。
4、生成策略豐富
區別于傳統的手動建模方式，我們在實施階段采用了模塊化資源+智能化生成的方式，首先在數據層級對整個項目區域根據功能進行劃分，針對每一類區塊都進行了相應的生成策略的設計。共產出擺放規則36種，精細到每一處細節都有相應的生成規則。
接下來的部分我們就選取幾種比較典型的區域擺放規則看一下。
根據當前項目特點，在具體實施階段我們采用了數據輸入和智能化生成的整體策略。
1、本案小區樓棟：
樓棟的建模使用了模塊化的方式，使用預制的窗戶，外墻等模型部件按照規則將不同的組合部件結合在一起生成整體的樓棟。
2、小區入口：
入口處大門的生成，首先需要在初始數據中輸入入口的信息，然后根據設計規則使用模型庫中預制的模塊生成入口大門。
3、道路生成：
根據道路結構進行數據的分層拆分，然后再將各部分模型組合起來形成道路，這樣就方便了后期添加沿路的樹木，以及根據車道信息添加車輛等等。
4、配電房，設備用房：
小區內的配電房，設備房等首先劃定區域數據，然后選擇合適尺寸的模型進行擺放，最后做頂點拉伸處理。
5、底商商鋪：
底商的生成與設備房等類似，但是也有一些區別，由于每個樓盤的底商區域尺度不同，所以要對模型進行相應的拉伸去適應相應的區域大小，底商部分我們采用了整體拉伸的方式，這樣不會破壞模型上的一些結構細節。
6、小區廣場：
小區廣場的效果相對來說比較豐富，模型種類比較多，不適合使用拉伸的方式去生成，這部分采用了對不同功能的設備進行分塊的方式，比如兒童游樂設施，成人健身器材等，通過不同的組合可以生成多種方案。
7、地形生成：
地形的創建要依據真實的地理信息數據來制作，以保證電子沙盤真實的參考性，這部分我們使用了當下比較先進的智能化解決方案，根據數據將地面，道路，水系，植被，建筑等分層創建，最終在虛幻引擎中進行整合渲染。
這部分看下電子沙盤現階段的最終效果：（點擊圖片前往原文觀看視頻）
經過大家的努力，最終我們的電子沙盤獲得了各方的認可，在制作過程中也收獲了不少寶貴的經驗，總結如下：
重視排期和做好階段性任務的拆分：由于項目周期比較長，所以整個項目必須有統一的階段性規劃和排期，按照統籌好的計劃來一步一步實現目標。
項目參與人員之間的溝通很重要：每個成員之間對于進度和過程中遇到的問題必須及時同步和提出，尤其對于跨部門合作的項目來說，這一點尤為重要。
項目的完成離不開大家的共同努力，在此對所有人表示感謝。
作者：環鐵藝術家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn