當你為你的項目創建有效的，可訪問的，漂亮的ui時，只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標題給一個更好的光學范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標題……我要說“是”!
你的標題很可能會比他們的標題更大，更重。相比于正文，字母之間的間距有時會出現視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。
留白是UI設計朋友。大膽的使用。適度的留白，即使是少量的白色物質，但要使用得當。能讓你的設計透氣，而且看起來更光亮。
創建長篇內容？給20 pt試試。對于長形式的內容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當然，這取決于所選擇的字體，但大多數流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許，簡單地使用一個有限的調色板選擇一個基地顏色，然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。
改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設計看起來更拋光且統一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當你想要提高你的字體組合技巧的時候，當面對1000個字體選擇，只是去尋找對應的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復雜的內容和圖片。
太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容，保持文本左對齊。你的用戶會感謝你的你。
當選擇一個多用途的文字，盡量找一個大量權重。你搜索的字體有很多選擇嗎？重量、風格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當然也有例外，某些項目會要求“只有一種風格”
更精致的字體，但對于絕大多數項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格，希望你在設計過程的后期需要更多的空間。
想要創造更容易理解的界面，對吧？把你的文字調暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當涉及到長形式的內容時，某些常規的粗細字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內容。你認為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區分，尺寸和標簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標。如果可以使用文本標簽，那就使用它們，讓用戶更好地理解。
當你的字體變小時，請增加行高，以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性。基本上，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數字1。
當設計一個在應用程序內部使用的菜單時，確保提供最多經常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色，然后應用各種色調。你選擇的顏色陰影到你的背景，文字，圖標或更多，可以添加。你的設計具有豐富的視覺趣味和個性。
基于字體的x坐標，設置您的線高度。不同x高的字體需要不同的行高測量，實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現。
突出最重要的元素。通過使用字體大小，權重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創建慷慨的熱區。當為移動設備設計時，嘗試創建足夠大的可點擊區域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰性的，盡可能使用帶有標簽的圖標。
以下是iOS和Android的最小推薦點擊區域：
44 x 44pt用于iOS
48x48dp用于Android
在短標題上盡量使用全大寫。如果你想在標題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標題非常好的。發現他們真的很適合標題，設計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標題和正文。當你想實現一個好的垂直節奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設計。我見過許多設計，最常見的是在文章列表中，它們已經被應用標題的上下空白相等，這樣就失去了這種聯系在它下面有正文。在這種情況下，我總是會給我的標題更多的頂部邊距，而在底部，標題和下面的內容之間的連接是更強，有良好的垂直節奏，視覺層次保留在所有的文章之間。
對于下載指標，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點，用百分數來顯示當前進度，一個簡單的圖標，讓他們可以在任何地方取消下載時間。
如果你能保持標題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標題簡短，時髦，切中要點。而不是“這是你的風格，你的方式”，簡單地使用像這樣的“你的風格。你的方式。”人們會瀏覽，保持這些標題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標受眾來決定方法是合適的，相對于更標準的格式。
正確的設計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時，這似乎是一項艱巨的任務，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區分開來，輕松掃描您的網站或應用程序。按鈕，在大多數情況下，將優先，所以確保他們是最突出的。項目在屏幕上，并很容易區分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設計中使用要適度。現實世界中的陰影，在大多數情況下幾乎是不可察覺的，而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經常用于內容豐富的網站，通過最小的調整，你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒，但是當過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應該是最優先的。
在ui中使用已建立的圖標，為了避免給用戶造成混淆。在你的設計中添加圖標時，試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑，成為用戶的認知障礙。不要在這些圖標上過于叛逆。
在眾多經過嘗試和測試的設計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程，表明彼此之間的關系，這有助于加快用戶的認知。
4pt基線網格+ 8pt網格=單一網格。當使用類型時，8點網格旁邊使用4點基線
可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4，使用的行高值為4的倍數（16、20、24、28等）
為什么4？我發現在過去使用特定的文本大小時，按8的倍數縮放是不太合適。
減少標題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進行類比論。類似的顏色，也被稱為相鄰或相鄰的色調，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的，顏色方案快速。當你需要快速將顏色調和到混合中時，可以使用類似的方法。
在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲，從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效，不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。
當使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產生任何混淆。
養肥了，字體大小為最佳易讀性。當設置暗色文字與淺色背景，選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標，避免讓用戶的眼睛疲勞。
試著為你要呈現的內容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當內容與他們交談當它不是。正確的字體選擇是至關重要的，使您的內容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救?？偸亲層脩袅私馇闆r，即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循，并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前，總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為，如刪除某些東西。讓用戶知道將要發生什么，并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。
Duoton icon
漸變色已經流行了段時間,雙色漸變設計依然持續是一個大趨勢，因為單一的色調無法滿足產品所需，雙色調圖標的特點就是色彩對比鮮明，青春活力，這種相比單色調圖標，更適合應用于一些主流偏年輕化產品，因此設計師還可以通過設計色彩打動用戶，提升產品競爭力，工具化產品也可以使用這樣有層次的圖標，不過使用時，需要對色彩進行克制使用。因此，如果您希望自己的設計界面脫穎而出，可以去大膽的使用雙色調色彩。
1. 雙色調多層質感(彌散漸變，直投影，混合模式)
2. 雙色調混合模式疊加
Alpha icon 圖標風格最大特點就是單色帶透明漸變，通過弱透明度來制造視覺層次，如果是純白色，就會顯得圖標平庸了一些，這種圖標運用范圍可以是界面中空場景或者一些關鍵模塊的主功能圖標。
如下圖左側大卡片上面圖標應用思路。
層疊式圖標，相比于純白色線條圖標，它帶來一種更舒適的質感，其設計方法是通過穿插層疊的手法，將日常我們所見到的單一的線條圖標，變得更具有視覺層次感，當然這種圖標使用場景一般會是在功能說明性頁面，功能介紹等。
品牌植入一直是非常大趨勢，包括今年我們所看到兩大廠的品牌更新IBM和UBER等，都是將品牌核心符號植入設計中，我想這樣的思路在2020年將持續會是一個重要表達產品氣質和記憶點手法打造思路之一，因為用戶已經很熟悉目前圖標模式，如何能創新區別其他產品，那么融入品牌將是一個不錯的選擇~品牌的融入技巧有高低之分，需要設計師去巧妙設計
同樣多鄰國在前段時間更新品牌，并將其LOGO特征符號植入字體中。
同樣多鄰國在前段時間更新品牌，并將其特征元素植入字體中
動態圖標是一個能提升產品體驗的方法之一，也是微交互中的一種，它可以增加產品趣味性，Facebook在評論入口的表情動畫就運用了動態圖標， 包括蘋果Apple Pay支付成功圖標動畫，Google Assistant智能助手，Messenger中的打招呼動畫等等我們可以逐漸發現動態圖標比靜態圖標的表達性更強，更受到青睞，隨著硬件升級，這種動態圖標運用逐漸在越來越多場景可見到。
備注（因為視頻比較麻煩，因此省略了）
文章來源：優波設計 作者：設計TNT
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著體驗設計的持續發展，行業內各領域的體驗設計質量都有了很大的提升，并且各個競品之間的差距越來越小。而更高的界面細節設計質量不僅是各個大廠產品體驗設計的追求，也是我們拉開競品差距的關鍵一環。我們平時可能閱讀了很多理論知識文章，但往往在實際工作中卻較少運用。學習掌握理論基礎知識固然是很重要的，但在設計執行時掌握設計技巧也更能提升工作的效率和質量。那么在設計執行層遇到問題有沒有一些立竿見影的解決方案呢？本篇文章分別從視覺、內容和交互三個角度總結了十個界面細節設計點，希望可以幫助你遇到問題時另辟蹊徑，延伸更好的設計思路。
在封面和背景圖設計的場景中，我們為了讓封面上的信息能夠更容易看清，通常會在文字下添加一層黑色半透明或者漸變蒙層，但你有想過這個蒙層可以不止是黑色的嗎？
在設計社區話題詳情頂部背景圖時，我們采用封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。當用純黑色作為蒙層時淺色背景可能會顯得很臟，這時可以改用深灰色讓背景看起來不會太臟，加入深灰色可以減弱部分背景的黑色讓背景圖看起來更加柔和。下圖左邊是用黑色#000000、30%不透明度，右邊是深灰#333333、30%不透明度。可以看出右邊方案的效果明顯更清爽一些。當然更好的方案是通過客戶端拾取背景圖顏色后生成對應色相的深色蒙層，但這個方案設計相對比較復雜。需要制定一系列拾色和生成對應色值的規范，并且開發成本偏高。有條件的話也可以考慮應用。
界面中使用圓角設計更能讓用戶感到親和力和舒適感，所以運用場景也非常廣泛。除了比較常見的封面、卡片、按鈕等等圓角的使用場景，在一些細節的處理運用圓角也能提升設計品質。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運用常規的切割邊角就比較尖銳，會略顯生硬。
而添加了圓角處理后視覺上會更加柔和更協調，對比一下前后的方案不難發現圓角的效果更勝一籌。不要看只是一點很小的細節，其實也體現了設計師對細節的細心追求，用戶看了也會體會到設計師的用心。
另外再介紹一下我個人在sketch中快速繪制這類圓角銜接的方法。以下圖為例，首先頭像的圓形描邊需要單獨畫一個白色的圓形圖層，而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設為聯集，再將圖層路徑合并。然后在兩個銜接處的兩邊各添加一個錨點，注意兩個錨點和銜接點的距離一定要相等，這個距離決定了圓角的大小，可以根據需要來調整。之后把銜接點的錨點類型改為“筆直”，再給這個錨點添加圓角半徑。這樣銜接點的圓角繪制就完成啦。另外運用布爾運算來畫出圓角也是可以的，具體方法可以根據個人習慣來選擇。
我們在頁面取色時經常會給背景色和陰影等結合場景帶有一些顏色傾向，以達到更舒適的視覺效果，其實這個方法也適用于文字。為了提升效率，我們習慣了在選擇字色時使用一套設計規范里的顏色，比如#333333、#999999等等。但是個別的特殊模塊我們是可以根據實際情況調整以獲得更好的視覺效果的。比如下面這個案例是一個熱帖榜單的入口模塊，為了提高信息層級讓頁面更有活力，這里選擇用淺黃色作為背景。如果使用規范的字色與背景的結合會相對不太協調，這里選擇字色時就可以讓文字顏色和背景顏色帶有相同的色相，選用高飽和度低明度的顏色，并且次級信息同時可以帶一點不透明度。讓整個模塊視覺更統一，信息與背景更融合。
類似這樣的場景其實還有很多，有時我們也不必拘泥于設計規范中，適當的根據模塊定制化一些細節可以達到更好的視覺效果。
我們經常會遇到一個頁面中有多個同級圖標排列的情況，不管是用宮格排列或是列表排列都需要每個圖標整齊有序、尺寸統一。但實際情況下不可能每個圖標尺寸都完全統一。一般這種情況我們可以給每個圖標統一添加一個相同尺寸的矩形圖層作為背景板，將背景板隱藏后再整體編組，這樣一來就能保證每個圖標所在的組都是相同的尺寸就能統一對齊了。
然鵝，我們有時會遇到一些不規則形狀圖標，尺寸是奇數甚至是帶小數的。這種情況圖標如果要在背景板上完全居中，我們可以打開首選項中的圖層項，關閉契合像素功能，然后可以拖動圖標或者用對齊功能讓圖標與背景板對齊。不要忽略這一兩個像素的差別，這些微小的細節往往決定了界面設計的嚴謹和精致程度。
另外，我們可以根據情況靈活調整圖標在背景板中的位置，例如左右箭頭圖標為了與頁面其他內容邊距對齊，可以將圖標貼合背景板左右兩邊。這樣就能減少后期開發還原調整的工作量，提高工作效率。
標題信息在界面設計中使用頻率非常高，而在設計過程中我們可能會忽略極限字數的情況，導致開發還原時實際效果不理想。下面以一個案例來分享一下標題極限值的處理方法。
在騰訊動漫社區改版中設計話題詳情頁的標題時，產品規劃標題的字數為12個字符，在右邊有看漫畫按鈕的情況下是顯示不完全的。這個情況就要考慮設計極限值的顯示方案。常規的方案有：1、顯示不完全時后面顯示“...”；2、換行顯示。考慮到詳情頁需要將標題完全展示，所以方案一不可行。而方案二在單行和雙行兩種情況下視覺效果不好統一。最終經過思考決定使用方案三：標題顯示不全時左右滾動展示，可以在保證視覺統一同時顯示完整的標題。
同樣的，在很多情況下我們由于空間受限無法展示完整信息時，這個方案也不失為一個很好的選擇。
在頁面設計工作中我們有時會遇到信息容器邊界固定，而容器內信息可以滑動的情況。例如下圖中頂部導航和音樂播放的歌詞頁面，這種場景下一般容器邊界不會做明顯的界限，如果內容在邊界處是直接被裁切的話體驗的感受就會比較割裂。我們可以嘗試更好的解決方案，在容器邊界增加漸變過渡，這樣信息在邊緣的過渡就變得柔和，頁面整體更協調。
這種漸變的過渡的應用場景還有很多，比如瀏覽簡介或者文章時，需要隱藏部分內容并提供展開閱讀全文的操作。利用漸變過渡也能隱喻還有未完全展示的內容，降低用戶的理解成本并且也能夠讓用戶有心理預期。
另外在sketch上呈現這種漸變過渡也很方便，如果背景是純色的話可以在邊界處添加一個與背景色相同顏色的色塊，然后給色塊添加添加不透明度從0～100的漸變，這個方法比較簡單。如果遇到背景復雜的情況，也可以繪制一個和容器相同大小的矩形，在矩形邊緣添加不透明度從0～100的漸變，然后建立蒙版把信息剪切到矩形中。
至于開發實現的方案還是要和開發哥哥具體溝通，確保用最便捷的方案還原出最好的效果。
動態流是我們非常常見的樣式，是分發用戶生產內容的主要載體之一。主要包含了用戶信息、文字、圖片和視頻等內容。一般情況支持九張圖片或一個視頻，在有多張圖片時，可以如下圖做成宮格的樣式適配，每張圖片截取中間的正方形部分。
而只有一張圖片或者視頻時，為了保證圖片和視頻的預覽效果，通常會做大尺寸的預覽圖，而圖片的寬高尺寸并不固定，所以只截取中間方形的方案并不能滿足要求，我們要根據這個情況做單獨的適配方案。首先我們要設定一個裁切的比例，比如我們取豎圖最小裁剪寬高比為2:3，橫圖最大裁剪寬高比為3:2（這里的寬高比并不是固定的，可以根據實際需要自己定義比例，采用4:3、16:9等比例都是可以的）。這樣當圖片寬高比小于2:3時，我們可以把圖片中間區域按寬高2:3裁剪出來；圖片寬高大于2:3并且小于3:2時可以按原圖比例預覽；而圖片寬高大于3:2時，把圖片中間區域按寬高3:2裁剪出來。另外要注意要給圖片設置最大高度，否則圖片高度太高會減少頁面信息承載量，降低閱讀效率，相應的也要限制最大寬度，否則會使圖片規則不統一，從而頁面適配效果不協調。
同樣的，這個規則也適用于視頻，由于全面屏手機占比越來越高，這些手機拍攝的視頻大多是19:9、20:9的寬高比例，相比視頻常用的16:9的比例更加細長，所以橫屏視頻可以統一裁剪為16:9比例，而豎屏視頻可以裁剪為9:16比例。
動態流圖片適配的核心是制定一個適配的規范來保證閱讀的舒適度和效率。而這個規范并不是恒定的，可以根據自身平臺需要來制定，以上僅作為一個示例供參考哦。
隨著沉浸式設計的趨勢，很多頁面會采用無標題欄的設計。例如下圖的個人中心頁面，頂部利用背景圖來渲染品牌氛圍。但是這類無標題欄頁面的上滑交互普遍有個缺陷，就是如果未經處理上滑后內容會與頂部電池條者是置頂的按鈕位置重疊。這種類似“穿幫”的情況給用戶的體驗就是設計處理不夠嚴謹。然而這種交互細節也是可以優化改善的。
優化的原理也很簡單，就是在上滑過程中添加一個標題欄來分割頁面內容，從而讓內容和頂部元素不重疊。標題欄可以隨上滑高度改變不透明度，以達到柔和的過渡從而實現絲滑的交互體驗。
類似的處理方案在各大平臺也有較為廣泛的應用。
在用戶體驗發展的趨勢中，無論是交互的反饋或者是圖片、信息等都趨于由靜態向動態發展。常規的靜態圖片承載的信息相對有限，所以在有限的載體內讓內容動起來展示更大的信息量不失為一個很好的選擇。
在舊版本的iOS12系統中有一個視圖選擇的功能，用戶在這個頁面可以選擇標準視圖和放大視圖，并且有三張圖可以滑動展示不同場景下兩個選項的差異，但是這個方案需要來回切換標簽和滑動圖片來對比差異，效率很低。而在之后改版的iOS13系統中，這三張靜態圖被替換成了兩張動圖，輪流切換三個場景的頁面，用戶不需要再滑動圖片就能更加直觀的對比兩個選項的差異。這個小改動不僅可以讓圖片展示更多的信息，還能減少用戶的操作成本提升操作上的體驗，讓閱讀效率更高。
類似的延展應用場景也有很多，例如新功能引導動畫、動態banner等等。其實原理都是一樣的，在常規靜態圖的基礎上優化為動態圖，不僅能增加信息的承載量，提高閱讀效率，也能讓頁面更有活力。
為了滿足運營的需要，我們有時會在多同級個圖標或者按鈕中突出其中的一個。例如下圖的分享彈窗，想要在多個分享途徑中突出微信的圖標，但同時又要保證圖標風格的一致性，這時就可以利用微動效來達到強調的效果。
而微動效的落地形勢也有很多種，下面拋磚引玉介紹幾種簡單高效的方案。
可以看到添加了微動效后不僅可以達到強調某一個對象的目的，同時也能保證每個圖標風格的統一，微動效也讓頁面更活潑有靈性，不失為一舉多得的方案。
微動效的形勢當然不局限于上面幾種，大家也可以發散思維，創造更多有創意的方案。
文章來源：站酷 作者：騰訊動漫TCD
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn