當看到一個產品的視覺效果時，我們通常能很快地判斷出它是吸引人的還是哪兒有點不對勁。但是，很少有人能接著說出來為什么這樣設計的原因。
本文定義了影響UX的5條實用法則：
1. 比例
2. 視覺層級
3. 平衡
4. 對比
5.格式塔原則
遵循以下5條設計法則可以創造出全面周到的視覺效果，推動用戶的參與度并提高可用性。
01 比例
定義：比例原則是指在布局中使用相對大小來展示設計元素的重要性和層級的優先關系。
正確使用此原理最簡單的方式是，最重要的設計元素的尺寸要比不重要的元素大。原因很簡單，大的事物更能引起用戶的注意。在停車場中，當前所在停車區域往往會突出顯示，這樣做的目的是加深用戶的記憶，方便回來取車。
良好的視覺設計通常使用不超過三種不同的尺寸。擁有一系列大小不同的設計元素，不僅能在排版上創造出多樣性，而且還能在頁面上建立視覺層級結構。
確保最大程度地強調設計中最重要的部分，幫助用戶理解如何使用它。例如在Medium中，熱門文章在視覺上比其他文章更大。
02 視覺層級
定義：視覺層級的原理是指在布局中，按照元素的重要性排序來引導用戶的注意力。
視覺層級可以通過比例，顏色，間距，位置和其他各種信號的變化來實現。同時它也控制用戶最終的體驗。如果很難確定頁面布局的具體位置，則很可能是其布局缺少清晰的視覺層級。
要創建清晰的視覺層級結構，請使用2–3種字體大小來向用戶展示頁面最重要的信息?；蛘邔χ匾膬热菔褂妹髁恋念伾珮俗?，對次要內容使用柔和的顏色。在Medium中，標題、副標題、正文具有清晰的視覺層級，文章每部分的字體大小都和其重要性相對應。
比例的大小也可以幫助定義視覺層級，因此可以針對不同設計元素進行各種比例的組合，一般的設計經驗是包含大、中、小三種設計組件。Uber中的視覺層級結構就很清晰。地圖和輸入框對半分開，輸入框上的灰色的背景引導用戶進行下一步操作。
03 平衡
定義：平衡原則是指對設計元素進行滿意的排列和比例設置。當屏幕兩側存在分布相同（不一定對稱）的視覺元素時，就會達到平衡。在設計時元素所占的面積在創建平衡時也很重要，而不僅僅是元素的數量。
平衡的布局可以是：
對稱：元素相對于中心線對稱分布
不對稱：元素相對于中心線不對稱分布
徑向：元素從中心的公共點放射分布
在設計中使用什么樣的布局取決于想要傳達的內容。對稱的布局安靜而穩定，例如The Hub Style Exploration的界面展現了穩定的對稱布局。
不對稱的布局是動態的并且引人入勝，創造了一種活力和動感。Nike的設計布局，顯示出與品牌相稱的具有運動感的不對稱的布局。
而徑向的布局始終將用戶的注意力引向視覺中心，Brathwait手表在徑向上保持平衡，所以注意力立即被吸引到表盤的中心。
04 對比
定義：對比原理別。是指將視覺上不同的元素并列排布，以傳達這些元素不同的功能類別。換句話說，對比為用戶提供了不同對象在大小或顏色上的明顯差異。
對比原則通常利用顏色來進行分辨。例如，在UI設計中紅色通常代表刪除，而綠色代表同意或繼續。換句話說，對比為用戶提供了不同對象在大小或顏色上的明顯差異。
通常在UX中說起對比度，我們會想到文字與其背景之間的對比。有時設計人員會故意降低文字的對比度，用來表示不太重要的內容。
但是在降低文字對比度的同時文字的可讀性也會降低，這會導致用戶無法看清文字內容。在Greenhouse Juice的包裝上，瓶身上文字的可讀性取決于果汁的顏色。在深色果汁瓶身上文字對比強，可讀性比較好，但是淺色果汁瓶身上的文字幾乎無法識別。
05 格式塔原理
定義：格式塔原理解釋了人類如何簡化和組織由許多元素組成的復雜圖像，通過下意識的將各個部分安排到一個有組織的系統中，而不是將它們解釋為一系列不同的元素。
格式塔原理指出了我們傾向于感知整體而不是個體元素。在NBC徽標中，中間空白處并沒有孔雀，但我們的大腦卻能自動填補空缺的部分，感覺到孔雀的存在。
在Uber的注冊頁面中，字段標簽靠近其相應的文本框，這樣能輕松理解需要在哪些文本框中輸入信息。
總結
除了使某些東西看起來“漂亮”之外，理解和利用這些法則還有助于：
1. 增加可用性。遵循這些視覺設計原則能夠設計出易于使用的頁面布局。
2. 激發積極情感。美好的事物會引發積極的情緒。美學-可用性效應表明，當人們發現外觀上具有吸引力的設計時，可能會對設計的可用性更寬容。
3. 增強品牌認知度。強大的視覺系統可以幫助建立用戶對產品的信任和興趣。
文章來源：站酷 作者：Clippp
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當你為你的項目創建有效的，可訪問的，漂亮的ui時，只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標題給一個更好的光學范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標題……我要說“是”!
你的標題很可能會比他們的標題更大，更重。相比于正文，字母之間的間距有時會出現視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。
留白是UI設計朋友。大膽的使用。適度的留白，即使是少量的白色物質，但要使用得當。能讓你的設計透氣，而且看起來更光亮。
創建長篇內容？給20 pt試試。對于長形式的內容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當然，這取決于所選擇的字體，但大多數流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許，簡單地使用一個有限的調色板選擇一個基地顏色，然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。
改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設計看起來更拋光且統一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當你想要提高你的字體組合技巧的時候，當面對1000個字體選擇，只是去尋找對應的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復雜的內容和圖片。
太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容，保持文本左對齊。你的用戶會感謝你的你。
當選擇一個多用途的文字，盡量找一個大量權重。你搜索的字體有很多選擇嗎？重量、風格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當然也有例外，某些項目會要求“只有一種風格”
更精致的字體，但對于絕大多數項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格，希望你在設計過程的后期需要更多的空間。
想要創造更容易理解的界面，對吧？把你的文字調暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當涉及到長形式的內容時，某些常規的粗細字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內容。你認為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區分，尺寸和標簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標。如果可以使用文本標簽，那就使用它們，讓用戶更好地理解。
當你的字體變小時，請增加行高，以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性?；旧希瑇-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數字1。
當設計一個在應用程序內部使用的菜單時，確保提供最多經常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色，然后應用各種色調。你選擇的顏色陰影到你的背景，文字，圖標或更多，可以添加。你的設計具有豐富的視覺趣味和個性。
基于字體的x坐標，設置您的線高度。不同x高的字體需要不同的行高測量，實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現。
突出最重要的元素。通過使用字體大小，權重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創建慷慨的熱區。當為移動設備設計時，嘗試創建足夠大的可點擊區域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰性的，盡可能使用帶有標簽的圖標。
以下是iOS和Android的最小推薦點擊區域：
44 x 44pt用于iOS
48x48dp用于Android
在短標題上盡量使用全大寫。如果你想在標題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標題非常好的。發現他們真的很適合標題，設計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標題和正文。當你想實現一個好的垂直節奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設計。我見過許多設計，最常見的是在文章列表中，它們已經被應用標題的上下空白相等，這樣就失去了這種聯系在它下面有正文。在這種情況下，我總是會給我的標題更多的頂部邊距，而在底部，標題和下面的內容之間的連接是更強，有良好的垂直節奏，視覺層次保留在所有的文章之間。
對于下載指標，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點，用百分數來顯示當前進度，一個簡單的圖標，讓他們可以在任何地方取消下載時間。
如果你能保持標題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標題簡短，時髦，切中要點。而不是“這是你的風格，你的方式”，簡單地使用像這樣的“你的風格。你的方式?！比藗儠g覽，保持這些標題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標受眾來決定方法是合適的，相對于更標準的格式。
正確的設計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時，這似乎是一項艱巨的任務，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區分開來，輕松掃描您的網站或應用程序。按鈕，在大多數情況下，將優先，所以確保他們是最突出的。項目在屏幕上，并很容易區分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設計中使用要適度?，F實世界中的陰影，在大多數情況下幾乎是不可察覺的，而且所以你應該在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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果需要設計一個輪播，我們應該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗更好？如何避免輪播常見的問題。
提到輪播首先可能想到的是廣告，我們經常在移動端首頁或網站首頁會看到各式各樣的輪播banner，不管在移動端還是網頁上通常點擊數據都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設計一個輪播，我們應該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗更好？如何避免輪播常見的問題。
本篇文章通過以下幾點探索輪播的特性，預計閱讀20分鐘
目錄
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進度展示
4、輪播定位
5、輪播的切換
6、對輪播進行分類
7、使用縮略圖進行預知
8、輪播異形化
9、輪播時間
10、總結
一、用戶真的使用輪播嗎
用戶是否對輪播有感知，這個則需要根據不同的場景進行判斷，包括每個產品中的每個輪播對用戶用戶的定位也不相同，常見的應用場景品牌曝光、活動營銷、產品展示，每個場景下相關的數據也不相同。
促銷輪播banner
品牌推廣輪播banner
產品介紹輪播banner
同時還有個關鍵因素，輪播的占比，這里以pc端為例若是產品是以品牌效應吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內容為主的產品，輪播通常以16:9、7:4的常規比例進行展示。
輪播的頁數
用戶在使用產品時會默認忽略輪播區域，一般輪播都會有自動輪換機制，一定時間后自動輪放下一張banner，那么每當頁面上進行輪播時便會吸引用戶進行關注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。
如果banner是作為內容傳播希望用戶通過banner了解內容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。
國外一家公司在針對輪播中進行了相關的研究測試，隨著頁數的增加用戶的點擊逐步下降。
那么如果想讓產品中的輪播更具有效果，則需要根據不同的場景設定策略達到目的。
二、輪播的輪換形式
不管在移動端還是手機端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點擊切換兩種。
如下圖某藝術網站，它則是通過鼠標滾輪進行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產品宣傳等相關的網站以此來突出產品的亮點，同時也符合用戶目標。
在看下面這個醫美網站它的切換方式則是通過鼠標點擊進行切換，并且占比也是鋪滿首屏，在醫美領域用戶更關注美感，而輪播形態也是符合用戶的心理預期更加沉浸美觀。
而在移動端輪播的形式就比較統一，大多都是自動播放+手指滑動進行切換。
三、輪播的進度展示
在網頁中輪播都會有當前的定位點，許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標，不用一張一張切換，但是在有些產品中會忽略這一點，設計中會做的非常小導致用戶在點擊上可用性不太友好，如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。
如以下網站去除進度定位的方式，通過縮略圖預覽來告知用戶下一個banner的內容，空白區域也可以添加縮略圖引導介紹等關鍵信息，幫助用戶提前預知在體驗上相對較好。
以下國外某網站在進度定位的設計上采用了標簽文案方式進行設計，能夠幫助用戶更加全局的了解banner內容
四、輪播的定位
定位主要是用來指示當前輪播的進度，像上圖中講的便于用戶更加全局的觀看banner的張數和當前進度。
以下網站的設計中則把定位與進度相結合，進度條展示該banner預計多久會切換下一張，對于自動切換的產品輪播這個更直觀的進度展示體驗上相對較好。
以下是某個國外網站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當前位置
隨著市場上產品同質化嚴重，產品的競爭力也更依賴體驗，在下圖中的數據可視化的網站上，在進度條上就利用了產品的特性以餅狀圖的形式進行展示。
五、輪播的切換
在剛才上面舉的例子中很多優秀的網站在設計上都很有創新性，但是需要注意一個點，在輪播中不只有自動播放，還需要考慮用戶手動切換，因為在實際用戶瀏覽中可能會對產品的播放時間達不到預期，此時則會使用手動切換，除去可點擊的進度點，還需要上一張和下一張的入口切換。
在此基礎上需要注意，在處于最后一張banner時，下一張切換還能不能點擊，第一張時上一張切換還能不能切換，這個取決于產品特性和輪播張數，如果輪播張數過小的話則需要進行循環播放，如果過多的頁數則第一步和最后一步不可點擊。
切換的距離和位置
上一張和下一張的距離遠近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因為小區域banner用戶能夠更加全局的觀看，在使用上不會猶豫。
反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕，移動端更加依賴手勢交互。
六、對輪播進行分類
當輪播banner過多時利用標簽進行分類，用戶通過點擊標簽進行查看相關的輪播組合。
此方式更適合一些電商平臺、新聞網站這種內容過多的產品
如下圖國外社交媒體網站則使用了標簽進行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。
七、使用縮略圖進行預知
在banner首屏中，顯示的內容越多，越能激發用戶進行點擊，像上面講過的農業產品網站就使用下一張預覽圖的形式進行展示，當然不僅局限于這種形式，如下圖中的餐飲網站把所有的輪播banner展示給用戶觀看。
相對于縮放圖，圖標展示效果上也較好，空間占用更少，使用這種方式需要謹慎，對圖標的識別性要求較高，我印象中能夠使用的這種方法的網站是蘋果官網，讓產品抽象化展示。
在移動端也存在這種設計手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。
八、輪播個性化
輪播最大的缺陷則是像剛開始講的用戶會默認為廣告，對此可以使用個性化設計突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數碼科技網站，利用產品與背景的結合營造出一種功能性的展示。
再例如下圖中蘋果官網入口，結合百度的定制化功能在大搜中進行個性化處理，把常規的banner輪播以功能卡片形式進行展示，同時卡片承載產品動畫引導用戶進行點擊。
蘋果官網進入后隨意點擊產品介紹頁后會發現，蘋果把輪播結合鼠標滾輪營造沉浸式觀看，每個屏效內都展示產品一個功能特點，打破傳統banner的展現形式。
九、自動輪播時間
自動播放的輪播會根據用戶的耐心和用戶的訴求進行調整優先級，如我們平常使用產品時會忽略banner廣告，我們會更加關注移動中的東西，特別是在移動端上通常是banner進行輪播時才會關注。
谷歌設計團隊曾對banner輪播的時間進行測試，測試結果得出5s-7s的輪播時間最佳，在這個時間內用戶有足夠的時間對輪播banner上的產品內容進行了解。
如下圖谷歌商店的輪播時間設定在6s。
同時還需要注意，在自動播放的過程中如果用戶鼠標hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內容。
十、總結
本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹，在實際產品中輪播有很多可用性上的問題存在，我們在設計中則需要根據自己產品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。
文章來源：UI中國 作者：愛吃貓的魚____
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一、什么是交互設計？
先來看一下百度百科的定義
交互設計（英文Interaction Design, 縮寫IXD)，是定義、設計人造系統的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系，以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析，關注以人為本的用戶需求。簡而言之，交互設計是解決特定場景下的人群如何高效使用機器或軟件的目標行為。
為什么要做交互設計
在使用網站，軟件，消費產品或各種服務的時候（實際上是在同它們交互），使用過程中的感覺就是一種交互體驗。隨著網絡和新技術的發展，各種新產品和交互方式越來越多，人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候，可能為當初的使用者本身就是該行業的專家，沒有人去關注使用者的感覺；相反，一切都圍繞機器的需要來組織，程序員通過打孔卡片來輸入機器語言，輸出結果也是機器語言，那個時候同計算機交互的重心是機器本身。當計算機系統的用戶越來越由普通大眾組成的時候，對交互體驗的關注也越來越迫切了。因此交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產生了。
從用戶角度來說，交互設計是一種如何讓產品易用，有效而讓人愉悅的技術，它致力于了解目標用戶和他們的期望，了解用戶在同產品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。
通過對產品的界面和行為進行交互設計，讓產品和它的使用者之間建立一種有機關系，從而可以有效達到使用者的目標，這就是交互設計的目的。
二、交互設計常用原則和定律有哪些？
尼爾森十大可用性原則
1、狀態可見原則
系統應該讓用戶時刻清楚當前發生了什么事情，也就是快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。
即在用戶操作界面功能時給予實時反饋，例如：頁面加載狀態提示、按鈕點擊后的狀態變化、進度條提示等。
2、環境貼切原則
設計的一切表現和表述，盡可能貼近用戶所在的環境，將現實環境的操作功能巧妙的轉化為線上功能，使其貼近用戶。使用用戶能聽懂的專業術語，涉及到專業化語言時要轉化成用戶熟悉的語言。
即模擬真實的事物，使用戶更容易理解。例如：天氣應用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品，降低理解成本。
3、操作可控原則
對于用戶的誤操作，提供二次確認或者撤銷的功能，這樣可提高用戶的操作可控性。
例如：刪除聯系人二次確認提示、消息可撤回操作。
4、一致性原則
遵循統一的產品設計規范／邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。
一致性包含視覺交互、文案描述、組建樣式等，例如：微信小程序設計規范。
5、防錯原則
設置防錯的機制，減少用戶犯錯。在用戶選擇動作發生之前，就要防止用戶容易混淆或者錯誤的選擇。
例如：用戶名稱校驗提示、手機號碼位數限制等。
6、易取原則
減少用戶記憶負荷，在適合的時機給用戶需要獲取的信息。
例如：驗證碼讀取、找人轉賬提示等。
7、靈活高效原則
提供靈活的操作和高效的獲取信息能力。
例如：手機號碼一鍵登錄、消息關鍵字識別等。
8、優美簡約原則
保留產品最主要的信息，如果不是優先級最高，要盡一切可能避免去影響產品的簡潔和美觀。
9、容錯原則
用戶在使用產品過程中出現了問題，及時準確的告知用戶出現問題的原因。
例如：信息輸入提示、搜索無結果等。
10、提供人性化幫助
在用戶需要的時候提供必要的幫助說明。
例如：新功能引導、解釋說明文案等。
七個交互設計定律
1、菲茲定律
點擊一個目標的時間同以下兩個因素有關：
（1）設備當前位置和目標位置的距離（D）。距離越長，所用時間越長；
（2）目標的大?。⊿）。目標越大，所用時間越短。
該定律經常運用于鼠標從點A到點B的運動。
例如常用按鈕的尺寸設計等。
2、?？硕?
一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。
交互設計中要合理設置選項，以免用戶使用中決策時間過長，降低使用效率。
3、米勒7±2定律
喬治米勒對短時記憶能力進行了定量研究，他發現人類頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。
例如：手機號碼的分位顯示、應用中標簽欄數量等
4、鄰近性法則
人們通常將距離近的事物劃分為一組。
界面設計中可以用對象間的相對距離來區分信息層級。
5、復雜性守恒定律
每個應用程序都具有其內在的、無法簡化的復雜度。無論在產品開發環節還是在用戶與產品的交互環節，這一固有的復雜度都無法依照我們的意愿去除，只能設法調整、平衡。
例如：在智能手機出現之前，手機上的操作按鈕都是實體按鈕。在智能手機出現手，手機被整個屏幕占據后，所有的操作都集合在了手機系統之中，等于把物理操作轉移到了系統操作中，其本身的功能復雜程度并沒有發生改變，只是轉移了而已。
6、防錯原則
大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。
例如：登錄時用戶名校驗，手機號碼位數限制等。
7、奧卡姆剃刀原則
“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情。
”這個原理稱為“如無必要，勿增實體”，即“簡單有效原理”。
在設計中可以使用戶關注最主要的信息而非其它無關緊要的事物，從而提升使用效率。
三、交互設計如何開展工作
首先在交互設計師拿到需求后不要急著打開軟件開始繪制線框圖，而是要先分析需求，了解產品的戰略層和范圍層的業務目標。把握產品設計大方向，只有方向對了后面的工作才是有價值的。
把握了產品方向，下面就該進行需求的分析，
首先針對需求考慮5個問題：
1、為什么要做這個功能？（業務需求）
2、產品期望得到怎樣的成果？（業務目標）
3、誰來使用？（目標用戶）
4、他們要怎樣使用？（用戶需求）
5、如何讓他們都來使用？（將業務目標轉化為用戶行為）
清楚這5個問題后，再根據交互設計流程進行一步一步的進行
這實際上就是對需求的戰略層分析。
我們進一步分析業務需求（業務目的、業務目標）和用戶需求（目標用戶、用戶體驗目標），把握關鍵因素（用戶的動機、擔憂和影響目標達成的障礙）。
歸納這些需求，明確設計策略。
將“業務目標”轉化為“用戶行為”，通過引導用戶的使用來幫助產品實現目標。
從設計“用戶行為”到設計“用戶界面”，用戶行為決定了用戶界面，用戶界面也導致了用戶會出現什么樣的行為。
設計需求分析方法就是要幫助用戶創造動機、排除擔憂、解決障礙。
四、如何進行用戶研究，方法有哪些
評估的形式及方法
常見的評估形式分為三類：
1、評估主體：根據評估的主體不同來進行區分，即誰來做評估。
按照評估主體來區分主要有兩個主體：用戶和專家
用戶評估主要靠收集用戶使用數據，也就是用戶測試，它的數據相對客觀，但時間和費用較多，評估范圍較窄。
專家評估是讓工程師及設計師等專家基于自身的專業知識和經驗進行評估的一種方式。專家評估相對主觀，但費時少、費用少、評估范圍窄。
兩種評估方法可以相互補充，并結合使用。
2、評估性質：例如定性評估、定量評估或著其它方式。
按照評估的性質來區分可以分為定量評估和定性評估。
定量評估是指對可以計量的部分進行評價，如點擊量、使用率等，可以用數據來說明。
定性評估是指對非計量性的部分進行評價，如流暢度、舒適性、創造性等進行評價。它只能表示一個度，無法準確用數據來說明問題。
3、評估過程：按照評估的過程來進行區分。
從評估的過程來區分可以分為理性評估和感性評估。
理性評估相對客觀，從客觀的角度出發判斷客觀事物。
感性評估更為主觀，評估結果并沒有客觀規律。
在實際應用中也需要將理性評估和感性評估結合使用，才能完整的完成我們的任務，達到我們的目標。
常見的評估方法有四種：
1、原型評估方法：在產品研發過程中，對于界面設計以及程序的測試來獲得用戶的反饋是至關重要的。以用戶為中心和交互式設計的重要因素之一就是原型方法，原型方法的目的是將界面設計與用戶的需求進行匹配。
一般來說原型評估方法分為三大類型：
（1）快速原型：原型迅速成型并分配實施，在原型實驗收集的信息基礎上，系統從草案中得以完善。
（2）增量原型：應用與大型系統，從系統的基本骨架開始，需要階段性的安裝，及系統的本質特征是在初次安裝完成后允許階段性測試，以減少遺漏的重要特征。
（3）演化原型：對前期的設計原型不斷進行補充和優化，直到成為最后的系統。
2、簡易測試評估方法
在條件不允許的情況下，可以采取簡易的方法來對用戶體驗進行評價。步驟是：
（1）實驗室環境準備：準備好測試用的電腦或其他媒介。兩個房間，房間1用來對被測試者進行測試，房間2用于設計師和工程師的觀察。
（2）被試選擇：分為用戶組和專家組。
（3）進行測試：房間1中被試者根據自己的選擇進行操作和測試，同時說出自己的內心想法，觀察員在調查表上記錄被試者的每一次的操作情況，包括出錯情況和被試者的口語描述，當被試者在測試過程中遇到困難或操作無法進行時，觀察員要給予一定的客觀提示。房間2中通過相關設備將房間1的情況傳輸到房間2，設計師和工程師實時觀察和記錄被試者的情況，以便今后對產品做進一步的修改和完善。
（4）結果分析：通過多次測試后，將測試結果匯總，提取出交互設計中存在的問題，以及對交互設計有益的建議形成測試報告。
3、眼動評估方法
眼動追蹤可以用來評價對產品（包括硬件產品和軟件產品）設計的感性意象，評測產品設計特征。眼動評估的主要指標有注視熱點圖、搜索過程測量指標、興趣區域即用戶視覺注意的焦點區?？梢越Y合口語分析法了解用戶的所想 和所做。
4、腦電評估方法
通過對腦電信號的分析，研究者可以探索大腦的認知加工過程和受試者的心理狀況。近年來腦電評估方法在人機交互心理學等領域應用廣泛，被用來評估交互設計、人機界面、產品設計等方面的內容。但是腦電評估也有一定的缺陷，例如空間分辨率上的局限性，因而對某些認知過程和腦區的定位并不是很準確。第二，在許多相似的實驗研究中，由于研究者采用了不同的實驗材料和方法等，實驗結果也存在差異性。第三 ，由于采集記錄時間的滯后性，腦電所記錄的并不一定是當下被試者所想到的內容。
采取哪種方法來開展用戶測試和評估，要根據不同的任務結合不同的環境來開展，比如：時間、成本、資源等。
啟發式評估法
是專家評估法的一種，也被稱為經驗性評估，最初由Nielsen博士提出。簡單來說，啟發式評估是一種簡易的可用性評估方法，使用一套相對簡單、通用、有啟發性的可用性原則，讓幾個評審根據專業知識和經驗來進行評估，發現產品潛在的可用性問題。
啟發式評估的兩大要素：評估者和評估參照的原則。
對評估者的要求主要有四個方面：
（1）人數：推薦3-5人，有時會更少
（2）知識：最好同時具有可用性知識及設計知識
（3）身份：最好是非設計者本人，否者不具有客觀性
（4）崗位：設計師或用戶研究員
評估參照的原則有：尼爾森十大可用性原則、八項黃金法則、首頁可用性指南、ios設計指南、拓展原則、HHS網頁設計與可用性指南等。具體需要根據實際項目來選擇，常用的是尼爾森十大交互原則。
什么時候適合使用啟發式評估法？
交互設計和UI設計階段、測試優化和產品發布后的階段。
啟發式評估的優缺點有哪些？
優點：成本低、效率高、發現大多數可用性問題，甚至是用戶測試時不會出現的問題。
缺點：不能代表真實用戶，相對主觀、有時候發現問題過多、對評估人員知識背景要求較高。
什么時候適用？
（1）適合時間、資源有限的情況下快速發現可用性問題，降低風險及成本。
（2）版本變動不大的情況下，小成本檢驗。
（3）作為可用性測試的之前準備。
啟發式評估流程是什么？
（1）準備階段：確定范圍、背景調查、參考評估原則、評委邀約、材料準備
（2）執行階段：任務走查、整體走查、結果記錄
（3）分析階段：匯總討論、報告總結、優化方案
可用性測試
先來看一下我們在平時工作中常常會聽到這樣的問題
產品經理：我們的用戶覺得產品好不好用？使用過程中會不會遇到問題？他們是否滿意？
設計師：設計的過程有一些糾結的地方，不知道實際用戶是怎么理解和操作的怎么辦？
產品開發后：想在大推前檢驗一下產品是否靠譜，適不適合大推？
當我們遇到這樣的一些問題時，如何找到方法快速得到答案呢？
那就是接下來要介紹的可用性測試方法。
可用性測試是一種常用的、高效的方法。
它的定義是：通過觀察具有代表性的用戶，完成產品的典型任務，從而找出產品可用性問題并解決，目的是為了改善產品，讓產品更容易使用。
什么時候適合做可用性測試呢？
一般是在：交互設計或UI設計、測試優化、正式發布三個階段來做。當然是越早做越好，可以盡早發現問題并及時調整。
類型分為兩種：形成式和總結式
形成式特點：小樣本、發現問題為主、不能做定量對比。
總結式特點：大樣本（30人以上）、定量的評估、可以做對比評估
可用性測試可以解決什么樣的問題？
1、發現問題，產品在體驗上是否存在問題
2、檢驗實現，期望的設計目的有沒有達成，是否滿足了用戶的期望
3、產品評估，用戶是否會滿意
4、理解用戶，了解用戶行為習慣，了解用戶認知，找到某些問題的原因
測試流程是什么？
整體上分為4個階段：1、準備 2、測試 3、分析 4、優化
1、準備階段要做的有哪些？
確定目標：確定測試目標決定了后面測試過程要怎樣去設計
常見的測試目標有：
·對整個產品做可用性評估
·對新增的功能模塊進行評估
·提前觀察新方案對新老用戶有怎樣的影響
·提前檢測改版是否達到預計目標
·設計時存在爭議，如何選擇解決方案
·某個環節流失率較高，檢測是否為設計原因導致
·需要拓展某一類特殊用戶，測試針對這類用戶在設計上是否需要作出調整
準備測試方案
方案中應當包含以下內容：
·測試目的：明確測試的目的及范圍，測試目的決定了測試方案
·測試關注點：與負責的設計師一起梳理測試中要關注的問題
·用戶招募：招募要求，樣本配比，招募渠道
·經費預算：獎勵的形式和額度
·時間計劃：用于把控時間計劃
撰寫測試腳本：設計測試任務，通過用戶行為去觀察提問來獲得我們想要的內容
基本的流程有：
·暖場：3min，簡單聊天，消除用戶的緊張情緒
·測試說明：2min，對測試內容規則做說明
·測試前訪談：10min，了解用戶基本信息
·簡單試用：3min，讓用戶熟悉產品
·測試執行：30-45min，提示任務并觀察
·事后訪談：15min，針對疑點問點追問，填寫評價表
·道別：5min，支付禮金，送用戶離開
招募用戶
招募什么樣的用戶呢？
·根據測試目的來定，找出與測試目標有關的篩選緯度
·特別考慮用戶使用行為相關的特征，例如競品使用經驗，使用產品的目的，用戶的活躍度等
·挑選最核心的緯度，轉化成用戶招募的條件，并盡量客觀化，具體化，可衡量
·避免設置交叉條件過多，導致樣本代表性降低
·學會辨別真假的用戶信息
招募多少用戶合適？
·以發現問題為目的快速可用性測試，6-8名即可
·考慮產品的復雜性，覆蓋人群差異性，適當做調整，拓展到10-15名
招募渠道有哪些？
·公司內部
·現有產品用戶庫
·公司其他產品用戶庫
·熟人，朋友等
·推廣渠道：官微、公眾號、門戶網等
·社區，論壇，qq群等
·第三方調研公司
準備測試素材：低保真或高保真原型，或線上已經可以使用的產品，也可以準備一些量表工具來輔助測試。在測試
過程中需要用到的電腦或手機設備，攝像頭，紙，筆，桌椅等。
測試場地選擇：
·專業可用性測試實驗室：一般對測試質量要求較高，旁聽人數較多且需要采集豐富的數據的時候采用此方法。實驗室有兩個房間，一個測試間，一個觀察間，中間有單向玻璃分隔。測試間中有多角度的攝像頭，用來記錄測試過程，觀察間可以同步看到測試間里的情況，
·普通測試環境：在觀察人數較少（小于3人），條件有限時使用。
預測試階段：正式測試前進行預測試，保證測試流程通暢
·走查：記錄可能出現的問題
·預測試：找人先測試一下
·調整：調整測試流程
正式測試階段
測試參與人員有
·主持人：引導整個測試流程
·記錄員：記錄操作行為，訪談內容，發現問題等
·產品團隊：參與旁聽，觀察，結束后交流
·用戶：完成測試及訪談任務
測試過程中需要觀察的要點：
·用戶是否獨立完成了任務
·是否存在無效操作或不知所措的情況
·用戶是否滿意
結果分析
邊測試邊總結，越及時越好
·測試完一個用戶，做一次小結
·測試結束當天寫小結，與設計師當場討論
·重要問題反饋后再總結分析報告
·邊測邊改，邊改邊測
結果分析4個步驟：1、對發現分類 2、整理不確定項 3、評定優先級 4、結果記錄
撰寫報告
從4個方面來寫：
·總體如何
·有哪些問題
·嚴重程度如何
·建議是什么
·除此之外，還可以圍繞關注的問題，未滿足需求補充分析
優化跟蹤
在測試之后需要出優化的方案，測試優化的過程是循環的。
測試之后如果還有其他問題沒有得到解決，可以結合其他的一些測試方法來得到。
問卷調研
問卷調查法是以書面提出問題的方式搜集數據的一種研究方法，研究者將所要研究的問題編制成問題表格，讓受訪對象以郵寄、當面作答、在線作答或追蹤訪問的方式填寫，從而了解被試者對某一現象或問題的看法和意見。問卷調研可以用于需求挖掘階段，也可以用于產品上線后的評估階段。
如果是想了解用戶對產品上線后的滿意度，可以使用問卷調研的方法。它比較適合去了解用戶的認知態度，也可以附帶了解用戶的行為習慣，
問卷調研的優缺點
優點：統一性、靈活性、量化性、匿名性
缺點：（1）只能獲得書面的信息，而不能了解到生動、具體的情況。（2）缺乏彈性，很難做深入的定性調研。（3）調查者難以了解被調查者是否認真作答，是不是自己填寫的。（4）填寫問卷比較容易，有些別調查者會隨意選擇，或者按照社會主流觀點選擇，這樣會使調查失去真實性。（5）回復效率低，對無回答者的研究比較困難。
問卷調查的使用場景
適用于：（1）需要進行定量分析的調研。（2）需要匿名進行調研的問題。（3）對已有假設進行檢驗。（4）尋找問題隱藏的關聯。（5）對產品設計用戶認知及態度的評估。
不適用于：（1）發現和描述具體問題。（2）探索受訪對象的模糊態度。（3）獲取創新想法。（4）獲取精確的行為數據。
問卷調研流程
1、確定目標：確定調研目的、對象、分析目的和應用對象。
2、調研方案：通過訪談、經驗、理論等，確定調研框架，題目選項，分析思路，投放渠道，相本配比等。
3、問卷設計：問卷設計，問題美化，投放渠道。
4、問卷測試：多人測試，確保問卷的可讀性，邏輯通暢
5、問卷投放：按照計劃好的投放渠道進行投放，回收數據，數據清洗
6、問卷分析及填寫報告：分析及報告填寫，調研結果落地
數據分析
概述：通過在網站或應用中進行數據埋點，獲取用戶對產品的使用和行為數據，并進行基于產品體驗優化的數據進行分析。
數據分析可以做什么？
1、可以做到用戶從哪里來，來了多少
2、獲取用戶屬性，用戶地域，用戶設備
3、訪問了哪些頁面，使用了哪些功能，消費了多少錢，消耗了多少時間
4、哪些流量可能存在問題，忠誠度如何，活躍度如何，有沒有達到目標，和行業相比如何
5、流失情況如何，離開之后是否還回來
可以作為產品的眼鏡和大腦，提供客觀衡量的依據，可以持續優化改進。
數據獲取方式的對比
日志文件：優勢，完整的服務端請求記錄。
缺點，日志的獲取和清洗有過濾成本，許多頁面操作無法記錄。
JS頁面標記：優勢，數據獲取可控、靈活，可以對頁面操作記錄進行記錄，獲取數據比較完整豐富。
缺點，需要在頁面植入JS標記代碼，某些情況下無法獲取，如當用戶禁用JS功能時。
常用的數據監控平臺
1、第三方監控平臺：如Google Analytics、百度統計、騰訊云分析等
2、自研平臺
數據分析流程
1、監控 2、定義 3、埋點 4、測量 5、分析 6、優化
Web分析常用的指標
PV：是指頁面瀏覽量，網頁瀏覽數實施評價網站流量最常用的指標之一，用戶每一次訪問網站中的頁面均被記錄，對統一頁面多次訪問，訪問量累計
UV：是指獨立訪客，是通過互聯網訪問、瀏覽這個頁面的自然人
UPV：是指唯一身份綜合瀏覽量
訪問：是指在一定時間范圍內，網站所有訪問者對網站發起訪問的總次數，從訪客來到網站到最終關閉網站所有頁面，記為一次訪問
識別用戶的方式：IP、IP+User Agent、cookie、User ID、設備ID、其他
復合指標
跳出率：指用戶來到網站，只瀏覽了一個頁面就離開的訪問次數，占全部訪問次數的百分比，簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質量，高跳出率表示訪問者對著陸頁面不感興趣，沒有繼續訪問更深入的頁面。也可能頁面設計存在問題，也可能是導入的用戶不匹配。跳出率可以通過調整廣告渠道，優化頁面內容來降低。
退出率：訪問者離開網站一次被記錄為一次退出，某一范圍內退出的數量/該范圍的綜合訪問量就是退出率。如果關鍵流程中的某一頁面退出率高，代表某一頁面可能出現了問題。
訪問時長：網站停留時長，頁面停留時長，應用使用時長。訪問量是訪問質量的一個衡量指標，較長的訪問時間說明用戶與產品進行了較多的互動。
訪問深度：可以理解為單個用戶平均訪問的頁面數，是PV/UV的比值。訪問深度也是訪問質量的一個衡量指標，可以考察用戶是否和網站進行了較多互動。這個比值越大，代表網站的粘性越高。
轉化率：指在一個統計周期內，完成轉化目標行為的次數占總訪問次數的比率。根據設置不同目的進行計算，例如注冊轉化率、付款轉化率等，是一個重要的分析指標。
移動端基礎指標
移動端的基礎指標監測與web端略有不同，但分析思路大致相同。指標分為：新增設備、累計設備、啟動次數、單詞使用時長。
常見分析內容
流量分析（哪里來？）、用戶分析（什么樣的用戶？）、行為分析（如何使用的？）、路徑轉化（表現如何？）、流失分析（粘性如何？）
A/B test
A/B測試是一種幫助網頁優化實驗的方法。A/B測試的目的在于通過科學的實驗設計和采集數據的方式，來獲得具有代表性的實驗結論，從而尋找到更好的產品策略。
簡單來說，就是為同一目標制定兩個方案，讓一部分用戶使用A方案，另一部分使用B方案，記錄用戶的使用情況，對比兩個方案的結果，選擇更符合的方案。
A/B test一般會在產品改版正式上線之前使用，來驗證新的設計是否可以提高產品的表現。
A/B test可以測試的元素有：標題、圖片、顏色、社交元素、段落文本、按鈕、導航、任務流程、頁面布局、價格、視頻等。可一次只改變一個元素或一次改變多個元素的方式來測試，這就是兩個測試類型單變量測試和多變量測試。
A/B test工具
Google Website Optimizer：搜索巨頭提供的免費A/B test工具，一個很好的入門級工具，但是沒有一些先進的功能。
Visual Website Optimizer：一個易于使用的A/Btest測試工具，包含功能有所見即所得的編輯器，單機地圖，訪問者分割和標簽等。
Unbounce and Performable：集成著陸設計的A/B測試工具。
Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企業級測試工具
App Adhoc Optimizer：國內A/B Test工具，同時支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB測試服務的專業Saas平臺
Optimizely：是網上現有的最專業的AB測試工具之一，它的價格要比其他的工具高很多（也可以免費使用一個月），它提供了一些非常好的功能。
Unbounce：對于登錄頁面的測試來講非常不錯，而且它不僅僅是個測試工具，還可以在無需自己編寫任何代碼的情況下來創建登錄頁面。
如何做A/Btest
1、確定目標，例如提高網站的付費轉化率，降低跳出率等
2、測試方案，建立假設：購買按鈕的顏色會影響點擊率？縮短流程可以提高復費率？改變導航可以降低跳出率等？
3、創建相比較的兩個版本，改變其中的變量
4、發布測試，將部分流量導向B方案，但不一定是5：5
5、數據分析，收集數據，對比AB版本的轉化率、跳出率、留存率等
感謝閱讀！
文章來源：站酷 作者：_微光
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
于B端，我想剛開始很多同學就直接拿Ant Design套套界面，因為公司要求并不高，隨后字節Arco Design也推出了對應的模版和規范，能讓我們快速作出一個不出錯的方案。
但是隨著公司對B端越來越重視，這些模版顯然就太爛大街了。公司、市場的要求顯然不止于此，我們的設計追求也不止于此。
那么我們如何才能擺脫套模版，提高界面的精致度，提升界面的交互體驗呢？
其實很簡單，王陽明先生告訴我們知行合一，知是行之始行是知之成。我們如何才能提升B端界面端精致度？
第一，需要知道什么是好的設計；
第二，需要不斷的去實踐去練習，缺一不可。
本文先和大家談談知的層面，提高我們的眼界，下面就和大家分享一些不錯的B端產品，大家有時間可以去慢慢體驗。
PS：作為B端設計師，一定要去多拆解競品，多研究好的產品，別面試的時候，面試官問你研究的B端產品是什么，你只知道阿里云、騰訊云、百度云哦！
1、Hubspot
做B端的同學，尤其是做CRM的同學應該都知道Salesforce，他是全球最大的 CRM（客戶關系管理） 工具公司。
Hubspot同樣是提供客戶管理相關的應用，雖然成立相對Salesforce晚，但是在市場上也占有一席之地。
從設計的角度來看，他的界面風格更加簡潔舒適，從體驗上來看和國內的CRM系統完全不同，其體驗更加自然和舒適。
這種風格大家看了有沒有覺得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是發現風格有一點類似，大家可以對比國內產品去拆解下他們的交互細節有什么不同，完成同樣的任務他們采用的方案有何不同，相信你會有很多的收獲。
國外的界面看著總讓人覺得很舒適，僅僅是因為克制的設計、中性灰使用得好嗎？當然不是，是因為英文本身就是圖形化的文字。
如果翻譯成中文，你會發現好像不是特別理想。
這個樣子拿給領導過稿，怕是分分鐘被拍死，因此我們還是需要多看看國內優秀的產品。
2、神策
神策的設計，我想B端的朋友不陌生吧，國內產品中他的設計一直是我們的參考對象。
不同于其他產品，他的體驗門檻比較低，注冊后就可以去體驗他的demo，也沒有試用期限，參考對象從可視化報表，到界面交互均能找到參考。
不過當你參考一次后發現，做出來的界面怎么還是少了一些靈魂，雖然界面風格上了一個臺階，但為什么用戶還是覺得產品難用。
3、項目管理類
這里不得不和大家推薦項目管理類產品了，這類產品是專門給互聯網公司的開發團隊使用，他們都是專業用戶，同時這些都是提高他們工作效率的工具，因此這些產品投入的成本更高，優化得更好，拆解他們的產品，就是直接觀看高手的成長之路。
Jira
Jira是Atlassian公司出品的一款事務管理軟件，JIRA的界面效果交互都非常不錯。大型互聯網公司如LinkedIn、Facebook、eBay等內部都在使用Jira。
同時他也是國內項目管理類產品的學習研究對象，因此大家可以通過文章、B站、界面截圖，自己申請體驗等方式全面的進行體驗。
同時也可借助群的力量，調研下有使用Jira的小伙伴，看看他們在使用中有什么問題，下面是我收集Jira網頁版和本地配置版的問題截圖，這些都來自不同角色的真實體驗，會更有分析的價值。（這部分截圖涉及到公司的數據，同時數量多不太方便打碼，就不分享給大家了。）
當然國內的項目管理類產品也得去看，我們要對比哪里做得好，哪里還需要改進。國內的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，這些產品不管從視覺還是體驗都非常不錯，大家一定要去體驗。
5、文檔管理類產品
通過不斷對競品進行拆解，你已經不是當初那個小白了，你的行業認知，方案設計能力應該趕超了一大波人。
成長的同時，又發現你設計的界面，不太精致，少了些溫度，這時候推薦你看文檔管理類產品。
WPS
第一個和大家推薦的是WPS，界面簡潔，配色舒適。 
飛書
在管理類的軟件中，不得不提飛書的管理界面，從設計到使用體驗，他給我的感覺終于不是那么千遍一律，用組件庫搭建起來的感覺。
他開始有了溫度，開始注重品牌感的打造，用戶的引導，符合品牌調性的插畫。
對一些體驗的細節進行優化，比如傳統的編輯都是放在頁面頂部，它采用了離光標更近的位置。 
根據菲茲定律，光標當前的位置和目標位置的距離D越短，所用的時間越短，具體好不好用，歡迎大家在評論區留言哦。
6、概念稿
到這時候如果你覺得線上的產品太禁錮思維，那么推薦你看看dribbble、behance，搜索data、web、dashboard等關鍵詞，去看看有沒有新的靈感。
我的花瓣收集了一部分，如果不嫌棄，可以去看看，順藤摸瓜應該可以找到很多不錯的設計。
圖片標題
7、畫重點
如何提升B端界面的精致度？
第一，要知道什么是好的設計，多拆解國內外優化的B端產品。
第二，多在工作中時間，有時間多做ABC方案，鍛煉自己的方案設計能力，多踩一些坑，時刻保持學習能力，慢慢就成長了。
文章來源：UI中國 作者：風箏KK
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
從挑選出的828件作品中，排名前十的作品中9件為B端設計，另一件作品也是B端產品C端化的產物。其中：
B端界面設計占比476/828，57.4%；
C端界面設計占比180/828，21.7%；
視頻動效作品占比223/828，26.9%；
能看出其中的比重關系，B端設計再次大火，為什么是再次？因為B端設計之前火過，只不過沒有趕上一個好的時代，在C端設計風光的十年里而忽略了其存在。隨著C端市場飽和與數字化的浪潮下，實體經濟、To B 、To G的產業再次迎來了它的曙光。視頻動效的作品占比也已超過C端界面設計，相信今年視頻動效作品占比還會再次提升。
追波年度最佳作品
追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標題文字中脫穎而出，這種使用線條突出重要信息的設計也是今年追波設計流行趨勢之一。
MetroUI是Windows8的界面設計語言，在2010年至2013年間曾經風靡一時，那也是移動互聯網的發展元年，現在國家推行實體經濟、數字化帶動To B 、To G 的發展元年，通過幾何色塊（MetroUI）實現B端產品與C端設計風格的傳承與銜接，你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風，毛玻璃的多彩高斯模糊漸變風，年度作品當之無愧。
最后來看下按鈕的設計，正常的按鈕要么文字加色塊，要么左圖標加右文字，它設計成左文本加右圖標，更加注重信息的可讀性和易讀性，也體現B端設計重功能和交互體驗，視覺點到為止的設計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
易讀性（停頓感）
字體三原則：可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章，肯定設計文章的內容可讀性更好。易識性是用在字體設計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每位設計師都息息相關，因為我們都需要編排文本。當我們小時候寫作文時，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容，豐富文本內涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我Love你”、“我ai你”、哪個更加會有情感共鳴呢？不言而喻，相信你心中已經有答案了。
曲線
在標題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一，第一個設計目的就是突顯文字，其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。
多彩高斯漸變風
多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的，多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新，給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上，為了更好的傳達信息需要去設計與內容相匹配的視覺風格。
B端界面設計
側邊欄Sidebar
B端設計的火爆帶動了B端相關模塊設計，更多的人也愿意嘗試B端相關模塊設計，側邊欄作為產品架構中重要的導航系統，好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。追波的B端產品設計已經不再是假大空概念設計，而是一套實用美觀可落地的設計。
儀表盤設計
儀表盤設計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態，大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據，團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同，自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態，需要分層級系統性去思考和設計。
流程設計
復雜的事情簡單化，簡單的事情標準化，標準的事情流程化，流程的事情自動化。流程設計是每一個企業核心功能和業務，可自定義的管理流程系統搭建也是B端產品設計的難點，需要對業務高度抽象，讓每一個業務人員可自定義的流程才是好的流程設計。
B端C化
B端C化是B端產品設計的視覺表現力慢慢往C端產品設計的視覺靠齊，國內B端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業務的發展，B端產品也開始移動化、智能化，國內主流還是通過小程序、H5來實現B端產品C端化。
輕代碼化
輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統，輕松實現多元業務場景的數字化管理。
輕代碼化將功能進行打包，升級成全局可以用的配置，技術人員配置好后，業務人員在應用編輯時直接選擇使用模版，綁定對應的變量即可使用。
界面設計技巧
人文氣息
為什么人加色塊的組合方式能流行起來？還是B端行業流行帶動的。B端講的更多的是企業對企業。企業對企業除了講行業解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經就不言而喻了。
當然企業也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風格更適合大公司，國內的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現科技與人文的結合，而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。
毛玻璃效果
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應當下UI扁平化的設計趨勢。蘋果Mac OS Big Sur系統的圖標、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術-C4D創建彩色玻璃的4個技法”，完全能滿足UI設計師。當然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權，具體安裝購買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物
輕擬物這幾年一直流行，在UI設計中趨于穩定的位置。從寫實到扁平再到輕擬物，其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環境光）五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中，扁平等設計更適用于復雜一點的界面中，比如B端產品界面中的功能圖標。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。
簡潔設計
簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則，在B端產品界面中更加需要簡潔設計，我們最熟悉的Sketch軟件界面已經是相當的簡潔了?；氐浆F實當需求功能不斷增加，產品界面的編排如何取舍，如何保證界面的簡潔是設計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數據說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
幾何圖形
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產品界面和宣傳內容的抽象，產品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B端產品視覺設計C端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產品的視覺設計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名UI設計師一定會經歷從圖標到幾何圖形到品牌設計的過程，品牌設計的技巧基本還是以幾何圖形為主，至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。
暗黑設計
暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design給出了暗黑主題的設計準則，即正文和背景之間的對比度應至少為15.8:1。按照此標準設計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測試界面的對比度。
模塊化（組件化）
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面，但在B端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產品組件的經歷是設計師一生中最寶貴的經驗之一，它能提高設計師的系統化思維、邏輯思維和抽象思維能力。
產品模塊化設計就是將產品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產品族中可以重用和互換，相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置，就可以創建不同需求的產品，滿足客戶的定制需求 。
插畫
插畫作為設計的一大品類，不同的插畫師都有自己擅長的風格，本質是都有自己的個性，但是在產品設計中更多是需要共情、共性來講故事，表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合，插畫不會過時，而是需要結合當下和產品找到最匹配的設計風格。
幾何插畫
幾何插畫算是插畫簡化的一種表現形式，人和物的形態不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現，傳達出簡潔、科技的現代感。難點還是在人物形態的表現上，平時多練習練習速寫還是很有必要的。
線面插畫
線面插畫最近一兩年非常流行，準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現人物形態時某些結構會表現不出來，這時候用線條簡單勾勒后，結構就會清晰明了。其次當線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
動效
微交互
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒，取悅用戶。C端產品微交互和動效已經很成熟了，一部分功勞來自iOS系統原生自帶的效果。B端產品的微交互和動效更多還是在學習海外產品，還需要給前端工程師灌輸微交互和動效的設計價值，共同打造產品體驗細節。
Mg動畫
Mg動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環會讓人更加印象深刻。
三維
三維圖標
MacOS Big Sur系統圖標的更新帶動了三維圖標的流行，三維圖標的應用場景還是需要有較大留白空間的界面，因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上？設計師應該保持開放多元的視角。設計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設計價值。
輕三維
為什么輕三維在界面設計中占有一席之位？一個是設計師不斷追求差異化的產物。另一個是更好的表現內容，并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素，比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等，這些都是用戶日常使用系統軟件常見的元素，通過簡單的幾何形體建模—打燈光—加材質—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加，特別是當下流行的毛玻璃效果，玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環境光更加出彩。
P4D（PS+C4D）
P4D是PS加C4D的設計表現技法，也是視覺設計的最后一個環節，通過PS對C4D的渲染圖片進行調色，利用PS的調色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強大的合成功能，將渲染圖片與圖片素材進行合成，來表現畫面的視覺度，當然三維軟件比較難實現的水、粒子、煙花等效果，也可以通過PS的后期合成來實現，這也是P4D的強大之處。
卡通IP
卡通IP設計最近三四年技術的迭代已經慢慢的走上成熟，卡通IP也從傳統的純PS手繪技法，轉到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態）/AE（動態）調色。
卡通IP火的本質更適合做營銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業大熱，受互聯網大廠影響下，卡通IP已經是互聯網B輪以上公司的標配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維IP可以選擇外包完成。
對于UI設計師來說學習是有成本的，暫時并不是必備技能，如果喜歡完全可以學習，從設計差異化的角度來看三維視覺確實有一定的競爭力。
三維動畫
C4D三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感，未來在AR/VR領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學還是有一定的優勢。
文章來源：UI中國 作者：RaDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在終端APP中，動畫非常常見，它可以輔助視覺制造焦點，同時也可以讓用戶交互更加順滑，但動畫的實現卻是設計師和研發群體的一個痛點。如何輔助設計師設計高性能炫酷的動畫、如何將設計師設計的動畫準確無誤的還原到終端APP上是業界不斷探索和解決的問題。
圖1 傳統動畫實現流程圖
當前最好的動畫設計軟件是Adobe After Effects（簡稱AE），從AE動畫制作到終端APP呈現，傳統的實現方式如圖1所示，有三大痛點：實現成本高、溝通成本高和性能難以保證。
近幾年，業界誕生了像Lottie、SVGA這樣的動畫工作流解決方案，雖然在一定程度上提升了生產效率，但存在AE支持能力有限、動畫性能難以保證、配套工具支持有限的問題。
PAG（Portable Animated Graphics）是騰訊PCG發布器中臺自主研發的一套完整的動畫工作流解決方案，助力于將AE動畫方便快捷的應用于各平臺終端。PAG的流程圖如圖2所示，設計師在AE上設計出動畫后，可以通過導出插件導出pag文件，同時PAG提供了桌面端預覽工具，支持實時預覽效果，在確認效果后，通過運行配置上線，各平臺終端可以通過PAG SDK加載渲染pag動畫。
圖2 PAG動畫工作流流程圖
與Lottie、SVGA相比，PAG增加支持了服務端。除此之外，如圖3所示，PAG動畫方案在導出動畫文件大小、AE特性支持和可編輯性方面具有較大的優勢。
圖3 PAG和Lottie對比圖
和Lottie、SVGA實現不同的是，PAG不依賴平臺端渲染接口，可以實現各平臺的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設計師的創造力。針對這個問題，PAG新增了BMP預合成的導出方式，支持導出所有AE特性，適用于不可編輯的場景。其原理如圖4所示，在合成的層面將渲染結果截取成圖片，然后進行視頻編碼。
圖 4 BMP預合成原理圖
針對視頻不支持透明通道而動畫需要包含透明通道的問題，在編碼的層面擴展了透明通道的支持，如圖5所示。
圖6 PAG矢量和BMP預合成混合導出
針對導出動畫和AE設計動畫存在偏差的問題，PAG導出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。
圖7 PAG導出面板
在預覽界面，同樣有不支持特性的提示，如圖8所示。
圖8 PAG導出面板預覽窗口
在使用AE設計動畫的過程中，設計師可以方便快捷的提前查看使用了那些不支持直接導出的AE特性，換種實現方式或者導出成BMP預合成，有效的解決了設計動畫和導出動畫存在偏差的問題。
在AE動畫設計的過程中，PAG導出面板提供了一鍵設置BMP預合成的方法，如下圖9所示。需要提示的是，一旦設置了BMP預合成，該合成中的文本和圖片將不能再被用戶編輯。
圖9 BMP 預合成設置
由于BMP預合成可能會影響到可替換圖片的數量，PAG同時會實時更新可替換圖片的數量給設計以提示。
在用pag設置的素材中，經常會遇到用戶填充的圖片與默認占位圖尺寸不一致的情況，在導出面板中PAG增加圖片填充的四個規則，如圖10所示：
圖10 可替換圖片填充設置
其中：
不縮放：畫面不縮放，從左上角位置開始裁剪
黑邊：在保持高寬比的情況下縮放到設備的可用屏幕大小，圖像不發生變形，如果圖片尺寸和填充區域比例不一致，會出現黑邊，為默認填充模式
拉伸：不保持寬高比填充，會發生失變形
裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小
具體效果如圖11所示。
圖11 圖片填充效果圖
PAGViewer支持桌面端預覽PAG文件動畫效果，如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片，且支持設計師本地填充素材，實時預覽填充效果，無需等待上線后才能確認真實效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內置了音頻文件，支持播放音頻效果。具體效果如圖12所示。
圖12 PAG效果預覽
在pag動畫實際使用的過程中，PAG經常遇到的問題是設計師辛辛苦苦設計的動畫在終端上性能表現不佳，需要進行返工優化，同樣的問題在使用Lottie方案時候也會存在。
除了效果預覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動畫的基本信息，如時長、幀率、尺寸、bmp預合成的數量，圖層總數等，還有量化的性能指標，定量的評估pag文件的性能，如圖13所示，方便設計師進行針對性的優化，而不需要等到上線前才會暴露性能問題。具體效果如圖13所示。
圖13 PAG性能展示面板
目前PAG方案已經廣泛應用于騰訊公司內外幾十款產品中，涵蓋了眾多的國民級應用。
總結下來，PAG目前主要使用在以下幾大場景：
圖15 UI動畫場景
設計師設計出動畫文件后，研發只需要替換預設的文本內容即可，并且文件體積非常小。
圖16 貼紙動畫場景
圖17 照片/視頻模板場景
PAG支持將內置的圖片作為占位圖替換，并保留所有動畫效果。因此可以將整個PAG動畫設計成一個模板，把預設的占位圖替換成用戶選取的照片，自動套用效果生成視頻。全程可以讓設計師自由批量生產模板，無需研發介入。
仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實現視頻模板功能。
圖18 智能剪輯場景
智能剪輯是圍繞用戶上傳的視頻內容，生成定制化的模板，模板本身是不固定的，可以從多個PAG文件組合而成，類似活字印刷。設計師可以利用這個特性，構建自己的特效組件庫，然后對接AI的識別能力，根據一定規則組合得到無限數量的模板效果，可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰報功能，隨機生成游戲高光時刻視頻。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文從What和How兩個部分闡述如何輸出清晰有效的設計方案，為大家建立系統的設計思路提供幫助。
很多初入職場的設計師在審美和平面圖形基礎上都比較扎實，對軟件的操作也出神入化，單個方案的界面視覺表現完成度和細致度也沒有太大問題。但卻往往在實際輸出項目方案的時候碰到瓶頸，方案反復地修改還不盡人意，設計能力無法得到質的提升，晉升的腳步也從而停滯。
本文從What/How兩個部分循序漸進地闡述如何輸出清晰有效的設計方案，希望給大家一些建立系統性設計思路的啟發，幫助大家更好地輸出設計方案，為決策設計方案提供更有力的參考。
WHAT: 什么是清晰有效的設計方案
首先我們需要對清晰有效有一個整體的認知。所謂清晰，從字面上理解是指看得很清楚、明朗，設計層面來說就是方案能做到方向明確，方案明了。而有效字面上指的是有效果，有效力，從設計層面來說就是輸出的方案可以解決存在的問題，能達到設定的目標以及可以切實落地。
清晰和有效的考量維度是不一樣的：清晰更多是針對設計這一環節，在于不同方向/方案的差異度和側重點；而有效則更多需要聯合設計上下游（用戶/產品/開發）。對于優秀的設計方案來說兩者相輔相成，缺一不可。
接下來我們來詳細拆解什么是清晰和有效。
1.清晰 - 方向明確，方案明了
——————————
很多設計師對方案輸出的數量有個認知誤區，認為設計方案越多越好，可以給老板、合作方更多選擇，往往不假思索地用大量的時間輸出所有可能的方案，并拿出來讓別人評審，認為把所有的可能性列出來就不會錯，這正是對方案清晰性缺乏認知的表現。
在設計最初期，不要著急動手輸出界面，先結合目標（近期目標和遠期目標）綜合考量，系統性地思考有哪些途徑達到目標，確保所有實現手段的方式都有考慮到，并且可以整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸，才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。前期規劃思考的深度決定了方案的廣度，只有清晰的思考方案才會創造無限的可能。
用案例來讓大家對清晰這個定義有更具象的認知：
相冊小程序Logo這個需求的目標是需要突出相冊元素，并強化品牌識別度。
這是設計師輸出的Logo提案初稿，雖然輸出了28個方案之多，但沒有設計思路的規劃，想到哪就畫到哪，很多方案是重復的，還有一些方案在設計初期就應該Pass，設計的整個細致度也不夠充分。
于是設計師對設計方向重新進行規劃整合，按照輸出形式重新規劃了分類。
按照分類篩選出四個可以繼續優化的方案。并且拿著四個不同方向的方案去匯報。最終確定D方案。
我們重新回顧一下這個需求，28個方案 VS 4個方案，設計師需要的不是盡可能輸出多方案的能力，方案越多可能表示你在錯誤的道路上越走越遠，需要的是通過前期系統的思考能一次把方案做對的能力。
2. 有效 - 解決存在的問題、能達到設定的目標、可以落地的方案
——————————
很多設計師拿到產品需求會立即動手，認為滿足了產品這個角色提的需求便是好的設計輸出，或者把方案出的天花亂墜，當產品或者其他角色提出不同意見就會覺得他們不懂什么是好的設計。這些現象大多是因為設計師在項目前期沒有正確思考和評估這個需求本身需要解決什么問題、方案能否達到團隊共同設定的目標，以及方案是否能平穩落地這三個維度。
解決存在的問題—從問題出發
我們在實際輸出方案的時候，不能從產品經理的需求文檔開始，而是要把考量維度更前置，從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋，內部團隊的聲音，但需要注意的是用戶的反饋不一定是真正的問題，需要做到篩選和甄別。比如新發布一個版本可能會碰到的一個情況是很多用戶打一星反饋說界面太難看太丑，這種屬于用戶感受，我們可以再深挖一下用戶覺得丑的原因，是不是改變了太多用戶習慣，但又沒有給用戶真的帶來更好的體驗和更多的收益。
能達到設定的目標—從目標啟動
問題還需要結合目標一起考慮，解決問題的思路并不完全等同于目標，目標是大家一起制定的未來產品的發展方向。比如我們新發布的版本里面新加了一個Tab改變了用戶習慣，大批用戶投訴，但如果這個新Tab是符合我們目標的，我們不能為了短期解決用戶投訴把這個Tab下掉，應該繼續觀察用戶在這個使用過程中碰到了什么問題，解決實際操作中碰到的問題。
用案例來讓大家對問題和目標有更具象的認知：
我們需要優化QQ空間的為空界面，首先我們梳理下現網存在的問題，風格整體比較老舊，很多圖形表意不明確，新出模塊就會有新風格，所以存在很多不統一的地方，空間整個業務有一百多個為空界面，導致開發也不清楚到底應該怎么用，用什么，所以很長一段時間是處于亂用的狀態。
接著我們梳理了這次優化的目標：
1 界面統一，用戶能對表意感知明確（解決現網問題）
2 強化QQ的品牌
3 做成基礎組件，保證復用性
4 低成本開發
確定了優化目標以后我們沒有馬上急于嘗試風格，而是先遍歷了所有為空異常頁，整合了所有場景最后梳理出八種情況，這八種情況可以覆蓋所有的為空場景，梳理整合場景是目標1、3、4能實現的前提。
然后我們基于這八個場景來輸出設計風格，要低成本開發，所以這里沒有考慮加動畫，用企鵝剪影結合具體的場景來表意，不僅強化了品牌，也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規范，Push給對接的開發同學方便調用。
在輸出方案過程中，始終都要緊緊貼合問題和目標，避免無效設計。
能落地的方案—技術可以實現
在輸出設計方案的時候，設計師需要考慮到開發成本是什么，需要消耗多少資源去實現這個需求，最低成本達到目標的路徑是什么。如果有些方案開發成本很大卻收益價值卻很小，我們就需要斟酌它是否仍有執行的必要。避免一味的追求設計效果不去對齊成本、人力，最后也只會是設計的自嗨。
用案例來讓大家對清晰這個定義有更具象的認知：
產品提了好友生日推送禮物的需求，目標是想用生日這一比較溫情的場景去設計專門的祝福頁，用來提升寫操作和大盤活躍。我們需要設計送給用戶的禮物卡片，從實現手段的難易規劃了三個方向：
A 手勢交互但開發難度大: 3D手勢交互動畫
B 趣味動圖且開發成本適中：局部小動畫
C 靜態但開發成本低：全靜態視覺，復用已有開發流程
最后團隊對齊了人力成本，決定采用方案C，把設計精力放在本身卡片的表現上。
HOW: 如何輸出清晰有效的設計方案
那如何才能輸出清晰有效的設計方案呢？設計方案歸根結底是思維方式的具體體現，輸出清晰有效的設計方案最核心的點在于體系化的思考方式，我總結了一下幾點：
1 拓寬邊界
——————————
拓寬邊界需要設計師站在更高的視角和有更廣的視野，把設計從表現和執行抽離往前后延展，在整個設計過程中往前去挖掘需求和規劃產品結構，往后做到把控和沉淀，能站在上下游各維度去Review整個項目，只有站在更全局的視角審視，才能跳出片面設計的維度。
2 轉換視角
——————————
從不同的視角看待問題，學會拆解問題和解決問題，從產品/開發不同的角度來全盤看整個產品，分析這個需求的投入產出比是不是足夠，是不是能達到目標（包括設計目標和產品目標）。設計、產品、開發從來都不是對立的，都是不同角色為了整個產品發力。
舉個例子，產品同學覺得輸出的方案不好看，是在用感性表達，我們可以嘗試繼續拆解不好看背后的原因，比如是不是核心內容不夠突出、擔心按鈕轉化率等，一開始就抱著產品不懂設計這種想法是沒有辦法解決問題的。
還有一個就是用戶同理心，很多時候我們不能只站在設計師和產品的角度看待用戶反饋的問題，比如新功能內部團隊覺得很厲害，但實際門檻太高，用戶根本不知道怎么操作，而我們長期體驗這個產品反而忽略了產品的易用性。
3 結構思維
——————————
我們在啟動項目的時候，不要單點去看要在某個頁面要做什么改動，而是從問題入手，和產品同學對齊好目標，結合設計理念，最后找到發力點在哪里，循序漸進，這樣很大程度上能避免項目的反復，對設計流程的準確把控也是輸出優秀設計方案的基礎。
舉一個日常生活的例子幫助大家理解，比如我的問題是長得丑，我的目標是要變得更年輕漂亮，我的理念就是改善體型和優化五官，最后找到具體的發力點比如晚上不吃晚飯，去美容院打美容針、學會怎么化妝等。
4 認知創新
——————————
有些新設計師對設計創新的認知還停留在是去做一些創造世界、改變世界的事情，認為創新就是把原項目進行翻天覆地的改變，初入職場會覺得負責的業務和項目都很小，沒有什么意思，其實創新的維度有很多，包括設計工作流程的優化、還有從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細節給用戶創造驚喜。擺正心態才能做對事做好事。
5 及時復盤
——————————
完成項目以后需要不斷的總結方法，遇到的問題，除了技法層面的提升，更重要的還包括思考層面的提升。學會去總結之前踩過的坑，避免重復性的問題，比如你的輸出一直存在層級不清晰的問題，那么你需要關注后續輸出的界面里大模塊之間以及元素之間的層次是否還存在這個問題?？梢苑稿e誤，但是盡量避免總是犯同樣的錯誤，這樣才能加速成長的腳步。
寫在最后
進入互聯網公司工作之前，我們對設計的理解更多停留在表現層面，所以對好設計的判斷標準更多是好不好看、喜不喜歡。當進入互聯網公司后，隨著工作經驗的積累，我們會發現設計不只是狹義地使用軟件繪制圖形，背后需要很強的邏輯和系統思考的能力、結構化的思維、溝通能力等，需要我們不斷的學習補齊自己的短板，及時轉換職場心態。
文章來源：站酷 作者：騰訊ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn