什么是瓷片區
由運營板塊拼接而成，視覺上像一塊塊瓷片，靈活性高。適用于各種運營模式，具有較高的轉化率
卡片布局
瓷片的外容器排版
單行
優點：節省屏效，日常營銷為重點業務留白
缺點：坑位有限，三個以上時營銷氛圍設計受限
左右排列
優點：主次層級清晰，適合作為功能入口
缺點：坑位越多，越影響營銷氛圍；推行者需具備與各業務溝通的能力，協調入口之間的平衡
上下排列
優點：個數不受限，易塑造氛圍感
缺點：高信噪比
圖文排版
瓷片區的常見排版通常用：滿版型、上下分割型、左右分割型、中軸型、傾斜型
滿版型
以圖片為吸引點，充斥整個瓷片區，文本內容居左排版為主，常見旅游、電競、資訊類
上下分割型
版面分為上下兩部分，分別配置文字或圖片，常見上文下多圖的形式，符合常規的閱讀順序，該場景下圖片更易引起用戶興趣，常見電商類
左右分割型
版面分割成左右兩部分，分別配置文字或圖片，常見左文右圖的形式，該場景下，文本偏理性，具有直觀的表述能力；圖片偏感性，輔助文本信息點綴模塊。常見資訊類、產品入口等
中軸型
常見垂直排列，信息更集中有活力
傾斜型
版面主體傾斜排列，常見對角線式形式。能承載更多的信息內容，頁面層級也更活躍
配圖風格
常見類型有兩種：實物與插畫
實物類
優點：識別性高、更直觀、可復用、設計效率高，個性化推薦更精準
缺點：對圖片素材要求較高，個性化服務需要開發資源
插畫類
優點：創意性強、可塑性強、具有趣味性、易形成品牌調性
缺點：抽象圖形不直觀，復用性低，繪制耗時，不易做個性化
Tips：設計師要牢記，設計時思考延展性和平臺風格如何為業務（運營、產品、技術）賦能，但長期影響CTR（點擊率）一定是由業務內容決定，避免背鍋。
文章來源：UI中國 作者：七月七咸
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前段時間在年終總結會上，產品經理向設計團隊提出了一個問題：怎么證明你的設計是有價值的？如何衡量驗證Ui、UX的設計效果？
很多人都認為，公司的業績取決于產品和運營，和設計師關系不大，甚至有些公司想取消年終績效。那么，改如何判斷設計結果是否好壞，設計產生的影響又該怎樣被量化？
我相信回復肯定是：可以通過數據來找到答案。
但又會有新的問題出現：需要哪些數據可以驗證設計效果？又該怎樣通過數據來判斷設計的效果究竟是好是壞？
滿意度
簡單來說是用來衡量用戶對產品服務和體驗的整體滿意程度。我們都知道，要提高滿意度，要滿足很多個條件，比如產品功能、運行速度等。這里我們分兩個維度，用戶體驗質量和產品目標。
1）用戶體驗質量
用戶體驗指標可以從凈推薦值（NPS）來衡量，凈推薦值意為用戶是否愿意將產品推薦給身邊人的指標。凈推薦值是有一個公式：NPS值=推薦者所占比例-批評者比例。
9-10分（推薦者）：活躍度很高的用戶
7-8分（被動者）：對產品滿意但忠誠度不高的用戶
0-6分（批評者）：對產品不滿意的用戶
還可以通過反饋，來收集功能或界面的問題反饋比例，更直觀的評估用戶操作過程中的感受反饋，來進一步優化迭代。
降低用戶的學習成本也能提高體驗質量，通俗的講，就是用戶對產品接受度和使用成本的高低，更偏向于產品和交互層面。
2）產品目標
簡單來說，就是希望產品上線以后，會達到什么樣的結果。
例如一個列表篩選功能，其核心目標是為了讓用戶在多維度混合排列里找到自己想要的目標群。
當用戶篩選后，找到了想要的信息且進入了目標頁面，說明指標已成功；反之沒找到想要的結果，中斷了操作流程，說明任務失敗。以此為依據，通過是否完成的維度來進行衡量，確定篩選按鈕到任務界面的UV轉化率。
結合上面的用戶體驗質量，來驗證設計需要注意哪些方面，關注哪些數據來達到目的。
活躍用戶數
通常觀察日活（DAU）和月活（MAU）就可以。活躍用戶數用于衡量產品的用戶粘性，便于了解產品一段時間的用戶情況，了解產品的用戶變化趨勢。
日活（DAU）：一個用戶一天通過相同的渠道多次訪問產品，DAU仍只算一個；
月活（MAU）：在一月內多次訪問產品，MAU仍只算一個。
日活越高，說明有剛需的忠實用戶越多。月活越高，說明新增的用戶越多，但未必是忠實用戶。當然，活躍度的高低也需要根據用戶的停留時長有一定的聯系。如果只是打開產品而并沒有使用，其實這個數據的意義并不是很大。
用戶留存率
一般是衡量產品或功能的新用戶增長程度，對產品或功能的新用戶占比。這對于新產品或新功能特別有用。
提取數據的一般周期為1日、7日或者30日。日留存率通常用來衡量產品粘性；周留存率通常用于判斷產生的忠實用戶數；月留存率通常用于衡量版本迭代的效果。
如果產品做了更新迭代，并且提升了月留存率，而其他變量沒有變化時，說明此次迭代很成功。所以通過留存率可以很直觀的判斷產品的用戶粘性是上升還是下降。同時老用戶的留存率也需要關注，好的更新迭代不僅可以留住新用戶，還可以喚醒“沉睡用戶”。
完成率
衡量流程設計的合理性，通常用于產品中主要任務流程的內容，這里單指設計中操作流程的順暢度。
完成率是產品設計中重要的指標之一，完成率越高，產品的操作體驗就越好。
最后
數據只是有效驗證的方法之一，并不是萬能的。就如調查問卷一樣，都會有一定的局限性和不確定性，數據能明確看到結果，但不能說明具體原因，只能作為支撐來驗證設計師的想法或決定，但無法代替設計直覺、用戶研究和設計可用性。
文章來源：站酷 作者：UX設計幫
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當看到一個產品的視覺效果時，我們通常能很快地判斷出它是吸引人的還是哪兒有點不對勁。但是，很少有人能接著說出來為什么這樣設計的原因。
本文定義了影響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來測試字體的可讀性?；旧?，x-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，即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循，并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前，總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為，如刪除某些東西。讓用戶知道將要發生什么，并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。
隨著體驗設計的持續發展，行業內各領域的體驗設計質量都有了很大的提升，并且各個競品之間的差距越來越小。而更高的界面細節設計質量不僅是各個大廠產品體驗設計的追求，也是我們拉開競品差距的關鍵一環。我們平時可能閱讀了很多理論知識文章，但往往在實際工作中卻較少運用。學習掌握理論基礎知識固然是很重要的，但在設計執行時掌握設計技巧也更能提升工作的效率和質量。那么在設計執行層遇到問題有沒有一些立竿見影的解決方案呢？本篇文章分別從視覺、內容和交互三個角度總結了十個界面細節設計點，希望可以幫助你遇到問題時另辟蹊徑，延伸更好的設計思路。
在封面和背景圖設計的場景中，我們為了讓封面上的信息能夠更容易看清，通常會在文字下添加一層黑色半透明或者漸變蒙層，但你有想過這個蒙層可以不止是黑色的嗎？
在設計社區話題詳情頂部背景圖時，我們采用封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。當用純黑色作為蒙層時淺色背景可能會顯得很臟，這時可以改用深灰色讓背景看起來不會太臟，加入深灰色可以減弱部分背景的黑色讓背景圖看起來更加柔和。下圖左邊是用黑色#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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
于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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
原文地址：站酷
作者：孔雅軒LineVision
轉載請注明：學UI網》你的設計有依據嗎？詳解用戶體驗設計中的規律與邏輯
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
每個產品都有核心的用戶體驗，這基本上是它存在的原因。它解決了人們所面臨的問題，而且為他們提供有意義的價值。關鍵內容和功能的組合代表了核心的用戶體驗。要查找你的產品核心用戶體驗，就要問自己一個問題：“客戶需要完成哪些最常見和最重要的任務？”在你用于產品的每個渠道上支持這些核心任務的本質至關重要。例如，Uber的核心用戶體驗是任何時間隨叫隨到。無論屏幕尺寸如何，此功能都能在每個設備上正常工作實現這一目的。
預約出租車是Uber用戶最重要的任務。用戶可以使用Apple Watch完成此任務。圖片來源： Techcrunch
盡管存在大量不同屏幕尺寸的設備，但絕對不能定位各個設備，可以根據用戶可能關注的任務定義產品的設備組。最常見的設備組是：
移動手機
平板電腦
臺式電腦
智能電視
智能手表
不同的設備組在不同的上下文中提供不同的服務：用戶根據他們正在查看的屏幕的類型參與不同的交互模式。例如，手機主要用于微任務，并且具有較短的用戶會話。平板電腦主要用于內容消費，目前不被視為大多數人的工作工具。在了解各種設備類型的基本上下文的假設對于構建一個好的用戶體驗是至關重要。
確定產品的核心用戶體驗后，選擇一組你希望支持的設備組，你需要調整每個組的體驗（對于每個上下文的使用）。上下文的設計在不同設備組設計時尤為重要。
第一，并非所有功能都在所有設備上都有意義。你需要確定你的產品在多個設備組中使用的不同場景，并設計適合每個場景的體驗。例如，通常移動用戶比電腦用戶想要的不同于產品。以 Evernote為例，可以在多臺設備上使用流行的筆記本產品。其電腦版本針對內容消費進行了優化：
用于電腦版本的Evernote應用程序被優化用于閱讀文本和查看媒體。
而移動版本是針對拍攝筆記、照片和捕獲音頻進行了優化的：
Evernote了解移動環境：它利用設備功能，并提供快速保存想法的方式（添加文本筆記，捕獲照片或設置提醒）。
第二，不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設計具有觸摸輸入（移動手機和智能手機）的設備時，設計師會犯的幾個常見錯誤包括：
小的點擊目標。點擊目標（如CTA按鈕）必須具有足夠大的尺寸。通常至少7毫米是足夠的，但最好使用10mm觸摸目標尺寸。
圖片來源：UXMag
將項目過于緊密地放在一起。你應該考慮點擊目標的大小以及它們之間的間距，因為間距有助于分離控件，并給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯誤。
按鈕之間的間距
使用懸停狀態。但在觸摸屏上，沒有“懸?！薄?
歷史上，設計師一直從事大屏幕到小屏幕的設計工作，這意味著第一個也是主要設計是為了完整的電腦桌面視圖（它具有最多的功能）。只有電腦桌面設計完成后才移植到移動設備和其他設備組。但當設計電腦桌面時，我們通常面臨“廚房水槽”問題：許多功能被添加到產品中，特別是當涉及多個利益相關者時。這并不奇怪，，當你有很多不動產時，添加功能是比較容易。實踐經驗清楚地表明，最好使用移動方法進行設計，并通過與用戶相關的最小屏幕創建應用程序。
當你首先設計相關屏幕的最小尺寸時，它會強制你決定最重要的。一段時間后，你將采用同樣的方法仔細選擇產品的其他版本，無論是電腦桌面設備，平板電腦還是電視。
在大多數情況下，手機將是相關屏幕的最小尺寸。如果可穿戴設備對你很重要，那么你將需要考慮具有更小分辨率的微型屏幕。
想想大屏幕以及小屏幕，給大屏幕和小屏幕提供同樣的注意力：
不只是縮小設計，使其適合那些大屏幕。充分利用你可以使用的額外空間。
圖片來源：Wikipedia
確保圖像不會因為屏幕尺寸的放大而失去質量。
左：低質量圖像。右：正確的分辨率。
考慮大屏幕細節。每個設備組都有自己的不同。例如，電視屏幕的設計被稱為“設計10英尺體驗”，因為從沙發的距離來看，與電腦桌面屏幕相比，屏幕上元素的明顯尺寸明顯更小。
電視的用戶界面元素應大于電腦桌面。圖片來源：Samsung
一致的體驗意味著應用程序及其在所有屏幕尺寸上的體驗都是相似的。無論設備如何，一致的用戶體驗是成功的全通道用戶體驗的關鍵組成部分之一：
對未來與產品的交互設定期望，并建立用戶信心。
一致的體驗使得你的產品在其他設備上與用戶的交互更容易。
你可以將它們視為相同體驗的方面，而不是將設計定制到越來越多的屏幕和設備中。例如，Google搜索應用在所有設備上提供相同的搜索體驗。
當設計和功能一致時，用戶可以在他們選擇的設備上更快更有效地完成任務。
跨不同設備組創建無縫體驗對你的用戶非常重要。人們可以自由地在設備之間來回移動，完成任務，或當他們從設備轉移到另一設備時，他們期望他們的產品和服務與他們一起轉移。這意味著用戶不必考慮他們正在使用的設備，環境的變化或上下文的變化，并且可以依賴于設備良好的功能性和獨立于設備的易用性。
大多數人如何走過他們的一天，他們訪問的主要屏幕。圖片來源：Intercom
根據使用情況，你可能希望確保每個設備上的內容消耗量同步。以Apple Music為例：你可以在Mac上設置播放列表，并在iPhone上即時播放，也可以開始聽iPhone上的歌曲，當你轉到電腦桌面時，你將被拍攝回到你在iPhone上。
Apple Music可以很好地處理多個設備的同步。
在測試環境中有效的并不總是在現實世界中。在實際設備上為實際用戶運行可用性測試，你可以在發布之前發現用戶體驗的問題并解決它。
在設計多個屏幕和設備時，最好的策略是保持最終的用戶體驗。作為用戶體驗設計師，你必須評估產品的使用時間，位置和方式，以評估用戶的最佳體驗。無論你的內容是什么尺寸的屏幕，用戶都希望在各種設備之間獲得流暢的體驗。
原文地址：ADOBE BLOG
譯文地址：UI中國
作者：Nick Babich
譯者：SKYUI
轉載請注明：學UI網》在不同屏幕和設備上創建用戶體驗設計的8個步驟
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
傳統動畫注重理論基礎以及扎扎實實的基本功，并且是藝術學院必修課，宮崎駿的早期的動畫就是傳統的手繪動畫。每一張都是純手繪的作品，所以我們看到宮崎駿的動畫會有完全不同于純工業的動畫的感覺。
這里我們只針對我們互聯網產品設計講一下交互動效的應用場景，我總結了以下七大應用場景，分別是圖標動畫、界面交互、插畫動效、HUD大屏、汽車系統、項目包裝、品牌宣傳等等。
優秀的動效可以幫我們解決產品設計中的很多問題，可以從用戶體驗的五大要素來進行價值的拆解：
戰略層本質上來說大部分設計師其實是接觸不到的，當然接觸不到戰略并不能代表我們不需要了解，作為設計師我們必須了解公司對產品的戰略定位以及期望，也必須要了解用戶的目標和心理預期。戰略層是整個產品的核心也是底層，所以單純來講，動畫在這一層面上可以發揮的余地是是不多的，因為更多的這一層更加關注意識形態的戰略思考。
范圍層是通過戰略思考來思考明確產品的大概功能和內容，有很多產品的功能復雜，交互繁重，內容很多，在這種情況下動效就派上了用場，我們可以嘗試通過動效來解決內容過載，優化交互模塊，擴展產品內容功能范圍。
這一層主要確定產品的功能結構以及層級，主要設計用戶如何快速，準確的觸達某個界面完成某個任務，要考慮用戶體驗地圖，用戶整個的任務路徑，簡單來說就是用戶要做什么事情，如何做，做完之后應該干什么，如果能對動效巧妙的運用，就可以做到引導用戶，練習上下流程的作用，降低用戶理解成本，提搞產品的操作效率，提高產品的可用性和易用性。
從這一層開始，UI設計師接觸的內容逐漸多了起來，大家也會更加熟悉工作的內容以及范圍，這一層主要體現在優化頁面布局，確定元素擺放位置，涉及到具體的信息、界面、導航設計等等。通過利用格式塔，柵格，設計語言等方法確定產品功能具體頁面內容布局，我們可以通過動效來進行輔助設計，例如強化元素的位置、顏色、大小，優化頁面的切換、跳轉的流暢度以及自然度等等。
表現層具體涉及到視覺、聽覺、觸覺的體驗設計，也是做為視覺設計師、UI設計師發揮最多的一層，在表現層動效的展現形式會多種多樣，這里不展開講解，大家應該都明白。在表現層加入適當的動畫能夠提升產品趣味性，加強用戶與產品的情感鏈接，增加用戶對產品的友好度。
5G時代已經到來，5G的普世將會為科技發展帶來更多的可能性，眾所周知5G的速度是4G的百倍，那么意味著我們的設計的動畫會加載的更快，動畫文件的大小限制將會被打破，另外也可以在某些領域的產品內設計更復雜更酷炫的動畫。
它是研究、開發用于模擬、延伸和擴展人的智能的理論、方法、技術及應用系統的一門新的技術科學。該領域的研究包括機器人、語言識別、圖像識別、自然語言處理和專家系統等。在我們日常生活中運用的包括不限于人機對弈、模式識別、自動工程、知識工程等等。所以未來在這些領域內，我們能參與到的動畫設計必然會更多樣，形式也會更豐富，挑戰也會更大。可能會不斷有新的動畫形式以及設計方法被創造出來，讓我們拭目以待。
是20世紀發展起來的一項全新的實用技術。虛擬現實技術囊括計算機、電子信息、仿真技術于一體，其基本實現方式是計算機模擬虛擬環境從而給人以環境沉浸感。隨著社會生產力和科學技術的不斷發展，各行各業對VR技術的需求日益旺盛，VR技術也取得了巨大進步，并逐步成為一個新的科學技術領域。相信在未來的工作中必然會慢慢的接觸到VR界面設計以及動畫設計，并且我相信未來會逐漸的變成主流。
參考資料
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
俗話說，“有樣學樣（Monkey see, monkey do）”，包括人類在內的靈長類動物都擅長模仿。這個詞表示無意識鏡像或模仿我們周邊人行為的狀態。根據我們在產品方面的經驗，我們進行的互動具有親密性和即時性。
你有沒有試過聽了朋友說的話之后又說給對方聽？這是變色龍效應的完美例子。
指由于之前受某一刺激的影響而使得之后對同一刺激的知覺和加工變得容易的心理現象。我們半夜三更看了電視的恐怖電影之后，跟看喜劇相比，屋子里面聽到的任何吱吱聲或者噪音更有可能讓你毛骨悚然、心驚肉跳。
啟動效應會塑造我們對環境的行為和反應，而且往往是有效的捷徑，讓我們可以迅速做出決定。這也是一種有效的說服工具，已經廣泛應用到產業的營銷和廣告領域。
德國精神病學家和兒科醫生海德維希·馮·雷斯托夫（Hedwig von Restorff）在1933年提出的理論。馮·雷斯托夫有一次實驗，涉及到讓受試者觀看一系列相似的物品。結果他發現，如果其中某個很特別的話，那么相比其他物品，受試者就更容易回憶起這件物品。
馮·雷斯托夫效應又叫做隔離效應（isolation effect），或者新奇效應（novelty effect），其預測是當存在多個相似的對象時，跟其他有所不同的那個最有可能被記住。
該理論由赫爾曼·艾賓浩斯（Herman Ebbinghaus，著名的艾賓浩斯遺忘曲線也是他的發現）提出。它描述了序列中項目的位置是如何影響回憶的準確性的。
這種效應是指記憶材料在系列位置中所處的位置對記憶效果發生的影響，包括首因效應和近因效應。系列開頭的材料比系列中間的材料記得好叫首因效應或者首位效應；系列末尾的材料比系列中間的材料記得好叫近因效應或新近效應。
用戶往往最容易記住系列中的第一項和最后一項。
把最重要的信息放到開始和結尾。把最不重要的信息放在中間，這是吸引用戶注意力的高效方法。
在格式塔原理之下，派生出了很多的其他原理。我們會在下面進行簡要討論：
在設計周圍留白，從而創造出一塊大于其各個部分之和的區域。用最簡單的措辭來說，格式塔理論是基于這樣一種思想，即人腦會下意識地把各個部分組織成一個系統，從而創造出一個整體而不是一系列的離散元素，通過這樣來簡化和組織包含有很多元素的復雜圖像或者設計。我們的大腦天生就是為了看清結構和模式，從而更好的理解我們生活的環境而構造出來的。
在格式塔里面，相似的元素不管彼此是否靠近也會在視覺上進行分組。分組可以按顏色、形狀或大小進行。相似性可用來將可能彼此不相鄰的東西聯系在一起。
不管實際畫出來的線條如何，人眼在觀看線條的時候都會按照最平滑的路徑想象。當目標是引導訪客的眼睛朝特定方向看時，這種連續性會是很有價值的工具。
這條原理反映的是人會把設計或圖像缺失的部分自行腦補，創建出一個整體來。或者說得簡單點，在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到復雜的形狀。
這條原理是指元素之間的距離如何。在UX設計當中，運用相鄰性是為了讓用戶將某些事物組合到一起。通過把它們放在一起，用戶就會感覺它們是相關的。
跟閉合原理類似，這條也利用了負空間。我們的大腦會區分出圖像前景的對象。設計師如果想要突出某個焦點時，用這條這真的很方便。
這條原理是指，沿同一個方向移動的元素本身會被視為一組。如果我們看到一群鳥朝特定的方向飛行，我們就會把它們組合在一起，并將它們看作是單個刺激物。
指在一個人的工作記憶使用的腦力綜合。是指你為了完成任務需要消耗的腦力。
認知負荷是表示處理具體任務時加在學習者認知系統上的負荷的多維結構。
以英國心理學家威廉·埃德蒙·?？耍╓illiam Edmund Hick）命名，其理論指出當選項增加時，下決定的時間也增加。一個人做出決定所需的時間取決于他或她可以選擇的選項數。因此，如果選擇的數量增加，則做出決定的時間將對數增加。
決策所需的時間隨著選項的數量和復雜性增加而增加。
這條定律規定，任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。
獲得目標所需的時間取決于到目標的距離以及目標的大小。
可以利用這條定律來影響互動按鈕的轉化率，尤其是用手指操作的移動設備上的設計，可以把希望互動的按鈕設計得更大一點，把不希望用戶點擊的按鈕設計得小一點，更難點中一點。用戶任務/注意區域與任務相關的按鈕之間的距離應盡可能的短。
這條指的是用戶往往會認為有吸引力的產品更實用。大家往往會相信看起來更好的東西用起來也會更好——就算實際上效率和效能并沒有提高。
用戶往往會把美觀的設計看作是更實用的設計。
對視覺設計的積極情緒反應會讓他們對可用性方面的小問題更加寬容。
這一理論是由心理學家佩維奧（Paivio）提出來的，他強調在信息的貯存、加工與提取中，語言與非語言的信息加工過程是同樣重要的。佩維奧（1986）指出：“人的認知是獨特的，它專用于同時對語言與非語言的事物和事件的處理。”利用雙重編碼系統可以讓用戶更容易記住我們網站上的重要內容。
我們會根據你對現實世界的體驗和感知為腦中想到的文字建立視覺形象。一想到“體育”，我們的大腦就會自動想到球的形象，運動員的形象。通過將文字跟圖像配對，可以更容易記住東西。
我們一般不會用價值數千美元的眼動追蹤軟件或者腦電圖來判斷設計是不是有效。但是5秒測試是個強大工具，用它就可以確定你的設計是不是一看就明白。
所謂5秒測試，就是讓受試者觀看網站或應用5秒鐘，然后回答有關主題和設計的問題。如果用戶的答案或者留下的印象跟你的設想不一樣，那就說明設計沒有達到原先的目的，需要繼續改進。
這條原理來自羅伯特·西奧迪尼（Robert Cialdini）的著名著作《影響力：說服心理學》（Influence: The Psychology of Persuasion），里面列舉了類似互惠、一致性、社會認同，權威以及稀缺性等原理。
這些原理往往決定了我們在社會當中的行為方式，我們可以用它們來識別人類行為。
互惠：這條原理是說人都不喜歡虧欠別人。如果別人給了他們什么東西的話，他們應該會覺得有責任給予一定程度的回報。提供免費的電子書，博客文章，播客或其他免費內容，然后換取用戶提供的電子郵件地址，這就是現實生活當中互惠的好例子。
權威：權威這條原理說的是我們大多數人都意識到自己沒辦法在每一件事情上都是專家。我們最好的選擇是依靠專家的證詞。所以，我們允許專家和任何特定議題的“權威”人士影響我們。大家往往會對高水平的專家和權威人物的話言聽計從，因為覺得他們值得信賴。如果跟成功公司能扯上關系的話就會經常被提及，好建立一定程度的尊重和可信性。
一致性：這條原理說的是大家一般都希望自己行為跟自己的決策過程保持一致。西奧迪尼曾經進行過一項研究，他讓兩組志愿者挨家挨戶去詢問房主愿不愿意在自家前面的草坪上立一塊寫著“小心駕駛”的大廣告牌。
第一組的做法就是簡單粗暴直接上門問。而第二組是先做一個初訪，請求房主在他們前面的草坪放一塊很小的標志牌，“做一位安全的駕駛員?！?
結果第二組的成功率高出450％。這就是（承諾與）一致的一個例子，因為房主會覺得自己有義務在這種情況下保持一致性。
社會認同：大家未必總能知道自己為什么會這么做。大家是不是都在跳舞？如果是的話會有更多的人跟著跳。大家是不是都在看那個視頻嗎？是的話會更多人會點擊它。是不是每個人都在買你的產品嗎？是的話，你想攔都攔不住。在電子商務的實踐當中，我們使用的網站會社會認同（比方說點評、評論和推薦）來吸引其他用戶，并引導他們做出購買決定。亞馬遜有“購買這個的客戶也購買了那個”的提示，希望強化你跟商品的關聯性，讓用戶認為“如果別人需要它的話，那我也需要它”。
稀缺性：在塑造行為的原理方面，這是我的最愛之一。稀缺性原理是說，如果東西有限的話，大家就會更想得到它。能得到的人越少，吸引的人就越多。
為什么有的商店會推出限量版服裝？這就是原因，這樣可以吸引更多的顧客。
變化盲視（Change Blindness）：指觀察者不能探測物體或情景所發生變化的現象。
記憶未必永遠可靠。我們對信息的存儲方式會被我們的想法、感知信念以及周圍環境所重構。
我們的工作記憶能力大概就只有10到15秒，一次只能記住3到4個東西。
研究表明，大家往往會制造出錯誤的記憶，要么會記住了沒有發生過的事情，要么就是記得的東西跟實際不一樣。由于記憶具有提示性和可塑性，所以根據大腦的習慣或心智模式來進行設計就非常重要，因為這樣會更容易記住。
盡可能為用戶提供幫助和反饋，并提供撤銷選項，以減少用戶犯錯時的沮喪情緒。讓體驗個性化，好迎合我們用戶的喜好。
單純呈現效應是指圖片、符號、數字、聲音等外部刺激信息只要經常暴露在人面前，就能增加人們對其喜歡程度的現象。這種社會心理會發生在我們所有人身上，我們在不連續的時間段內見到某人的次數越多，我們覺得這個人討人喜歡或迷人的可能性就越高。這種效應有時候又被叫做熟悉定律。
了解單純呈現效應及其機制，會讓你在轉化率優化的工作中具備重大優勢。更多的呈現會帶來熟悉感，進而帶來舒適感，從而讓轉化率優化整體上得到顯著改進。
色彩也是影響人的選擇和行為的主要因素之一。我們經常會發現兒童玩具顏色鮮艷，女孩玩具往往是粉紅色的。這方面研究的主要思想是色彩對用戶的感知有很大的影響。
所以，作為設計師我們應選擇能夠傳遞含義與正確信息的色彩。
紅色。跟熱情、強烈或攻擊性的感覺關聯。同時是好和不好的感受，比如愛、自信、熱情、憤怒等的象征。
橙色。充滿活力的暖色，給人以興奮的感覺。
黃色。幸福的色彩。象征著陽光、喜悅和溫暖。
綠色。大自然的色彩。給人以來平靜和新生的感覺。另外，也可能用來表示經驗不足。
藍色。一般用來表示企業形象。往往表現出冷靜的感覺，但是作為一種冷色，也跟距離與悲傷有關。
紫色。由于很多國王都穿紫色的衣服，所以長期以來就與皇室和財富聯系在一起。紫色也是代表神秘與魔力的顏色。
黑色。這種顏色有很多含義。往往跟悲劇和死亡相關聯?？梢源碇唇庵i?？梢允莻鹘y的，也可以是現代的。一切都取決于怎么用，以及跟哪些顏色一起用。
白色。意味著純潔和純真，以及完整性和清晰度。
我們一般是從大腦負責本能的部分得到這種反應，本能反應的速度比我們的意識要快得多。本能反應會導致我們用了一下產品后就愛上了它。這些反應植根于我們的DNA之中，所以很容易預測。
作為設計師我們就是要通過設計制造出視覺上極其出色的美感印象。為什么一個東西在用戶眼里好看，以及為什么他們是我們的目標受眾，他們的需求是什么，這些都不難猜測。
用戶體驗設計的概念根植于認知和行為心理學，那是人類與機器交互的藍圖。當然，本文仍還沒有涵蓋到所有的設計心理學原理。但是，作為設計師，我們還需要觀察和理解最終用戶，并且加深對用戶的理解與共鳴。在產品開發過程中，了解用戶的互動、行為和情感可以增加更多的價值。
原文地址：追波范兒（公眾號）
作者：terechen
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn