關于按鈕的一些知識和我的一些觀點分享給大家。
按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認識這個組件，今天我把關于按鈕的一些知識和我的一些觀點分享給大家。
一 按鈕的作用
在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時候該用按鈕。
1）什么是按鈕
按鈕用于觸發一個及時操作。
2）有什么作用
2.1 功能操作
比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當弱化，重點強調功能，突出主體信息。
2.2 指引用戶下一步操作
這個是最常見的使用場景，每個可交互頁面上都有這類按鈕的出現，用來指引用戶下一步該怎么做。比如：創建、保存...
2.3 培養用戶習慣
當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長此以往用戶就會形成使用習慣。如果某操作能夠為用戶持續帶來價值，那就可以在按鈕的位置讓它更醒目，持續培養用戶點擊習慣。
二 按鈕有哪些類型
· 主按鈕：用于主動行動點，一個操作區域內只有且只能有一個主按鈕；
· 默認按鈕：用戶內有主次之分的一組行動點；
· 虛線按鈕：常用于【添加】操作；
· 文本按鈕：用于次級的行動點；
· 鏈接按鈕：用于作為外鏈的行動點。
三 按鈕的狀態
1）交互狀態
1.1 Normal 正常狀態
此狀態為按鈕的正常顯示狀態，就是按鈕在也頁面中的常規狀態。
1.2 Hover 懸浮狀態
此狀態為按鈕的懸浮狀態，當鼠標滑過時候的狀態會給用戶一個交互反饋，因為它只是一個視覺上的反饋并無實際作用，所以在移動端就把此狀態去掉了。
此狀態的效果并沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.3 Click 點擊狀態
此狀態為按鈕的鼠標 / 手指按鈕狀態，操作完此狀態后，就會引發此按鈕的真實作用。
同時，此狀態的效果也沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.4 Disable 禁用狀態
此狀態為按鈕的不可操作狀態。
當頁面中有未完成的任務或頁面中有錯誤導致不可提交頁面時，按鈕會處于 Disable 狀態。這個狀態在產品中也是很常用的，而且這種情況下應該引導用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個通用的展示方案。
一般方案有兩種：
· 無論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；
· Disable 狀態為 Normal 狀態的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。
2）狀態屬性
· 常規：常規樣式的按鈕，主操作按鈕；
· 危險按鈕：刪除/移動/修改權限等危險操作，一般需要二次確認；
· 幽靈按鈕：用于背景色比較復雜的地方，常用在首頁/產品頁等展示場景；
· 加載：用于異步操作等待反饋的時候，可以避免多次提交。
四 按鈕的使用方法 / 禁忌
1）一個操作區有且只有一個主按鈕
一個操作區有且只有一個主按鈕去引導用戶操作，如有有多個或沒有則會影響用戶的判斷。盡可能少的讓用戶去做選擇，產品的終極目標應該是“傻瓜式”產品，不要讓用戶有學習成本。
2）圓角值
根據產品風格，三種圓角值的設定：
2.1 圓角值為 0
這種適合用在比較嚴謹 / 企業級產品中，比如：阿里云；
2.2 小圓角值
這種是最常用的形式，在不失嚴謹的同時還有一些細節，如果可以的話，盡量選這種的；
2.3 超大圓角值
這種一般需要有獨特的產品風格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。
較大圓角值，此類千萬不要用，不要問，問就是太丑。
3）精簡文字
按鈕里面的文字一定是精簡的，不要展示過多文字，更不要折行。
4）文字與按鈕比例要適中
文字與按鈕的比例要適中，文字不要太大或太小，都會影響視覺展示。
5）彌散陰影
如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級別的不要用，不然識別度會變差，并且會讓按鈕的體驗變得很差。
6）主次操作按鈕樣式統一
主次操作按鈕樣式要統一，不要濫用樣式。
7）按鈕樣式與其他組件要有區別
實際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產生誤解，做一些不必要的操作和思考。
8）不同場景適配
現在暗黑模式也是常用的場景了，所以黑/白場景下都要考慮到識別度的問題。
9）主次按鈕的位置
主次按鈕左右的問題，也常常出現在設計討論會中，這次我直接放個結論吧，以后不要再為這件事吵架了。
在提交頁面、彈窗中，主按鈕在右；在其他常規頁面上，酌情考慮。
五 按鈕尺寸
按鈕尺寸具體用多大的，這里我總結了一個規范（僅代表個人意見）。
· 高 = 文字行高 + Xn，X=自然數，n=4
· 寬 = 文字寬度 + Xn，X=自然數，n=4
在其他地方也可以用類似的公式去做規范，比如卡片的間距，你可以設置 n 為基礎值，在此基礎上用 Xn 去選取合適的值。
注意：常用的字號為 12px、14px，盡量不要用太大的字號在按鈕上。
小結
按鈕只是眾多組件中的其中一個，也是最常用的組件之一。對于設計師來說，無論大小組件，我們都要精益求精的去思考，只有把每一個細節做好了，才能做好產品。日積月累的把每一個知識點掌握了，我們也就成長了。
文章來源：優設網 作者：友設青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互設計之父的阿蘭·庫珀，最為人熟知的就是這句話：“除非有更好的選擇，否則就遵從標準”。
a. 費茨定律，它是在1954 年 ，由保羅.菲茨心理學家 Paul Fitts 首先提出，當時用來預測從任意一點到目標中心位置所需時間的數學模型，在人機交互和設計領域的影響力最為廣泛和深遠。
b. 定義：從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小
（上圖中的 D與W），用數學公式表達為時間 T = a + b log2(D/W+1)。
c. 費茨定律，在產品設計中的價值是提高產品的可用性和易用性。例如：界面設計中，按鈕等可點擊對象要合理的設置大小尺寸才能容易操作，所以在移動應用中，圖標按鈕會增加點擊熱區范圍，以便用戶輕松點擊按鈕，做到
產品設計上的可用性和易用性。
費茨定律的思考分析，如下圖所示 。
1. 可點擊對象的設計，需要設計合理的大小和尺寸。功能設計的越大，用戶越容易點擊操作，交互效率越好。
2. 界面設計的屏幕邊緣或角，適合放置像菜單欄或按鈕這樣的設計元素，如果邊角是目標，它們可無限高或無限寬，更容易觸達到操作目標。不管你移動了多遠，點擊操作最終都會停在屏幕的邊緣，并定位在按鈕的上面。
3. 界面設計中，出現在用戶正在操作的對象旁邊的刪除列表（右滑刪除）比下方彈出選擇對象容易操作，右滑刪除交互可以被用戶打開得更快，更有效率，因為不需要移動到屏幕的其他位置，就可以刪除多余的列表。
4. Apple的iOS人機交互設計指南中指出，按鈕的點擊熱區大于44x44pt，這樣操作按鈕才會讓用戶覺得容易使用。
5. 費茨定律案例：用戶在使用產品時，比較重要的操作，我們會放在移動端應用的屏幕邊緣處，方便我們的
用戶點擊操作產品的功能圖標。如下圖所示。
2. Hick’s Law / 席克定律（?？朔▌t）
我們看一下，席克定律的數學公式表達是 : RT= a+blog2 ( n )。RT 表示反應時間，a 表示跟做決定無關的總時間，b 表示根據對選項認知的處理時間實證衍生出的常數，n 表示同樣可能的選項數。
在人機交互的界面設計中，選項越多，意味著用戶做出決定的時間就越長。
分布操作，專注當前行為，就可以節約用戶作出決定的時間。如下圖所示。
其他符合席克定律的案例，如下圖所示：
a. 對于用戶，低頻率功能或不太重要的功能，可以收納起來。比如：個人中心的設置功能模塊。如下圖所示：
b. 分布操作，專注于當前的行為設計，如下圖所示：
c. 在人機交互設計中，我們對核心功能選項做好設計上的歸類，可以提升用戶做選擇的效率。
比如：我們幫助用戶選擇 5 種核心的功能需求，它首先劃分了旅游場景下的功能分類，讓用戶對分類進行選擇。
然后進入選擇機票入口，這樣我們極大的化解了用戶面對很多旅游功能選項的難度和糾結，節約了用戶做決定的
時間。
d. 做好分類選擇，可以提高交互體驗設計的效率，選擇你想要的商品并購買。如下圖所示。
3. 神奇數字 7 ± 2 法則
1. 因為美國認知心理學 George A Miller 的研究，人們短時記憶廣度大約為7個單位（字母、數字、中文等），也就是說每次只能處理 5 到 9 件事情。
2. 人的大腦認知信息的能力有限，所以我們通過把信息分組和模塊分類，以此來認識和思考一些復雜性的問題。
3. 神奇數字 7 ± 2 法則，應用范圍很廣。例如我們記憶的電話號碼，可以分成三組數字：159 5555 6666 ，
這樣分組記憶起來就會容易很多。
4. UI 界面的導航設計，為了給用戶提供明確的設計向導，兩種導航（底部導航欄和頂部導航欄）的欄目設計通常都控制在 5 個之內，欄目功能過多用戶不容易記憶，5 個之內的導航設計方便用戶記憶和快速操作。
5. 移動應用的交互設計規律。神奇數字 7 加減 2 法則同樣適用，螞蟻金服的品類區的核心功能模塊的設計，懸浮卡片上只顯示 8 個 功能圖標，如下圖所示。
6. 同一類功能和同一層級的元素出現時，數目一般控制在 5-9 個，如下圖所示。
7. 如果超過 5 個，可以右滑選擇你想要的產品功能，如下邊的右圖所示。
8. 神奇數字 7±2 法則，運營廣告圖設計要抓住重點去設計，更好的引導用戶去瀏覽內容和產品的交互體驗。
如下圖所示，數字符號標注-突出重點，主圖、主題、操作按鈕、主色氛圍等，我們會作出優秀的運營設計。
根據格式塔的心理學思考 ：當對象離得太近的時候，人的意識會認為界面元素之間是相關的。
在交互設計中，界面設計中的接近原則是對相似信息及功能類別進行內容分組和布局設計的優化設計。
接近法則在界面設計中的作用，能夠直接影響到用戶與產品界面之間的視覺互動，來引導用戶的瀏覽及點擊交互行為。因此，相似的內容和功能模塊應該彼此靠近，而關聯性較弱的內容應該保持大一點的間距。
接近法則運用的目的：在視覺上通過組與組的區分，來劃分功能模塊之間的關聯性，讓界面變得更加清晰，同時幫助用戶在瀏覽頁面時，能夠清楚的看到到各個內容模塊之間的關聯性，就是視覺信息的劃分和分組展示。
如下圖所示。同一類的功能可分為一組，組內使用淺灰色的分割線來表達。而關聯性弱的功能模塊，組內的可以用淺灰色的分割面表達，拉開組與組之間的距離，做好視覺信息的劃分效果。
a. “復制粘貼之父” Larry Tesler (1945-2020) 說過，“任何事物都具有其固有的復雜性，無法簡化”。
引入第三方登錄，減少注冊賬號的復雜步驟，節約用戶登錄或注冊這一流程上所耗費的步驟和時間。
復雜性守恒定律，認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。
b. 以用戶為中心的產品設計，交互設計應盡量簡化用戶層面上的交互設計的過程。比如：頂部導航欄的更多圖標，就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中。如下圖所示。
a. 防錯原則，認為大部分的意外都是由產品設計上的疏忽，而不是人為的操作疏忽。所以我們可以通過改變產品
體驗設計把過失率降到。
我們在設計過程中，要從用戶維度出發，做設計前思考用戶的使用場景，預測到他們有可能發生的誤操作狀態，
做到操作前給用戶的溫馨提示、操作中的實時告知、操作后給用戶的及時反饋。
b. 防錯原則是著名的品質管理專家新鄉重夫提出來的。原則最初是用于工業管理，在交互設計中也可以使用。
比如圖 1，今日幸運星主題，分享給好友幫忙砍價。在沒有滿足條件時，通過彈窗來提示用戶去邀請好友，以此
來完成產品設計的任務。
比如圖 2，請輸入驗證碼的彈窗，驗證碼錯誤，您還可以重復 3 次，只有信息都輸入正確時，用戶才能完成的這個界面任務，如下圖所示。
簡單有效原理，被稱為“如無必要，勿增實體”（Entities should not be multiplied unnecessarily），即如有兩個
功能相等的設計，那么選擇最簡單的、視覺干擾比較少的設計。在其他條件相同的情況下，要求得越少的那個就
越好，越有價值。
a. 合并多余流程，點擊極速支付，支付成功彈窗提示。
b. 高頻率使用的產品界面，保持清爽的設計感。
c. 優先展示核心功能，減少點擊次數。如下圖所示。
圖 1，界面中清晰的品牌色的底部操作按鈕，可以明確的引導用戶去選擇優質的理財產品。
圖 2 ，摩拜單車首頁，用戶最關注的功能是掃碼開鎖的核心功能，方便用戶直接操作，提高交互效率。
d. 蘋果官方網站的簡約設計做的很棒。蘋果公司用一種很和品質感的設計提供了足夠多的內容，網站的文案，交互和圖片都比較集中展示，網頁設計沒有放一些使用戶分心的廣告和不重要的內容。如下圖所示。
總結：
1. 在產品設計領域，有很多經過時間檢驗過的定律，可以作為產品設計的指導原理。作為交互設計之父的
阿蘭·庫珀，他最為人熟知的就是這句話 ：“ 除非有更好的選擇，否則就遵從標準 ”。
2. 交互設計的定律，能夠幫助產品設計師對界面上的各種視覺元素進行合理思考，從而發現一些用戶使用場景中的可用性問題。從產品設計的維度思考看，我們來改善產品設計的操作效率和用戶的滿意度。設計服務于產品、設計服務于商業。
a. 什么是用戶體驗地圖 ？
定義：用戶體驗地圖，是一種梳理產品體驗問題的設計工具。展示的就是用戶在使用一款產品和設計服務的過程中，每一個階段的體驗、用戶對產品直觀的心理感受。將用戶的所做、所思都展現出來，便于團隊設計師全面思考產品帶給用戶的體驗，挖掘設計的優化點。例如，你去三亞去度假旅游，用戶體驗地圖就是用圖形的形式，可視化的表達，將你在三亞的一天活動情況記錄下來，其中包含你這段時間去過的旅游景點，以及在每個旅游景點的用戶
體驗感受。
思考用戶體驗地圖，適合在產品設計的那幾個階段繪制？
1. 原型制作前，設計師從直觀感覺的角度看，我們要了解自己的產品為用戶提供了什么功能、交互體驗，同時協助我們的產品設計團隊，做好產品功能的體驗設計。
2. 產品上線時，我們可以結合用戶調研、可用性測試等方法論。以此獲取用戶的美好體驗和真實的心理感受，來幫助我們公司的產品設計發現問題，以此作為產品設計的迭代優化的方向或者尋找新的創意設計機會點來解決問題。
a. 我們做好用戶體驗地圖的兩個優點：
1. 產品設計的體驗目標是讓用戶用起來，感覺到產品具有可用性、好用性、易用性，那么產品設計也應該從用戶
視角出發，用戶從產品那個觸點點擊進來，怎樣點擊交互下一步，怎樣保持對產品的活躍度，如何傳播分享；定位用戶使用產品過程中的體驗痛點。
2. 真正思考用戶需要什么功能，讓更多用戶參與進來，換位思考我們產品帶給用戶具體什么感受，全局性的思維去思考產品的體驗，與團隊成員、產品交互設計、開發部門和項目負責人等達成一致性的共識、有效溝通和協作，一起制作出解決方案。
b. 思考用戶體驗地圖的價值點
1. 基于用戶使用場景的設計是基于用戶達到某個體驗設計目標的一系列場景的分析與產品思考，理解用戶在每一個使用場景下的痛點及需求分析，同時結合用戶的上一場景，思考用戶下一步的體驗目標，我們可以通過做好體驗設計，來引起用戶情感上的共鳴。
2. 使用用戶體驗地圖，團隊成員可以從用戶的痛點出發，讓產品設計師、團隊成員全面的思考產品體驗，從用戶
體驗地圖中來挖掘產品設計的機會點。
以途牛用戶體驗地圖為例，如下圖所示。
我們運用用戶體驗地圖時，作為設計師或參與者需要切換成用戶視角、第一次使用者的角度去思考，去發現產品體驗上的問題，同時解決產品體驗中遇到的問題，提升用戶體驗的滿意度。
制作用戶體驗地圖時，四個關鍵點的思考：
1. 明確我們的核心用戶人群等; 2. 研究用戶的使用場景。3. 做好用戶的訪談和調研。4. 制作好用戶體驗地圖。
制作用戶體驗地圖的具體步驟如下：
1. 前期準備工作：
我們可以先做用戶的深度訪談、用戶對產品反饋、產品設計的走查和交互的走查、產品的數據分析、同行業的競品分析、訪談用戶等方法，獲取大量真實可靠的資料。
我們就會認識到：思考用戶在使用產品設計的過程中產生的行為數據、用戶體驗和用戶內心的真實感受。我們也可以思考產品的設計思路、產品的核心用戶人群等，以此作為我們制作用戶體驗地圖過程中的重要參考和依據，知道用戶到底需要什么功能和流程，來幫助用戶解決問題。
2. 用戶調研的方法如下：
我們可以先采訪用戶或者做好調研和記錄，將我們的采訪或調研記錄的內容做好整理歸檔，團隊成員一起來拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實的想法。
3. 我們要梳理好關鍵產品設計任務的流程，就是用戶在使用產品功能的過程中，會面臨很多不同的場景或復雜的設計流程和體驗設計的目標。然后我們再撰寫用戶完成每個關鍵任務的時間：比如，對于我們日常所見的查找功能而言，用戶希望更快的查找到自己想要的產品功能和體驗目標。
我們再寫出關鍵產品任務的用戶操作產品時的行為：
指的是用戶當下在做什么，通常是用 “我+動詞” 來表示，例如：我購買基金產品。
4. 我們再確定好關鍵節點，寫出用戶調研過程中的痛點思考、用戶的滿意度思考，放在對應的行為點的下方。
我們思考和分析用戶的痛點、用戶滿意度的調查，判斷用戶的情緒變化。分析結束后，需要將以上三類信息都寫下來，方便后續整理分組。把行為按照達成用戶目標的邏輯順序整理出來，并做好歸類。例如：美團 App 的例子中分為 4 個階段，如下圖所示。
5. 我們來判斷：用戶在每個階段，體驗產品設計任務中所產生的情緒高低的不同值，并把它們連成一條線，這樣就形成用戶的情緒曲線。
6. 也就是說，制作用戶體驗地圖過程中，我們要思考用戶每個行為背后的痛點和產品設計上的機會點。
最后，制作好一張實用性很強的用戶體驗地圖，以此來挖掘用戶的痛點問題，我們可以更好的去挖掘產品體驗設計中的設計機會點，如下圖所示。
網上的案例欣賞，出境購物的用戶體驗地圖，如下圖所示。
總結：
1. 我們制作用戶體驗地圖，注重的是團隊成員的洞察分析能力和對產品的思考能力，我們要用心思考產品設計中的核心用戶的痛點和產品設計中的機會點，我們要輸出一套符合用戶價值、商業價值和和產品功能價值的體驗設計方案，以此解決用戶的體驗問題，把產品做的更好，讓用戶使用產品過程中，產生愉悅感。
2. 制作用戶體驗地圖的價值是，不僅能使我們以“用戶視角”的維度去思考，引導團隊和設計師去思考問題并做好
產品的體驗設計。同時我們也可運用“全局性的設計思維” 去思考產品體驗設計，去發現產品問題并解決產品設計中遇到的體驗問題，讓我們產品帶給用戶的是：產品設計的可用性、好用性和易用性的價值。
文章來源：tob.design 作者：峻溪POINTV
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年的第一篇萬字長文，文章主題是一次偶然的反思中總結出的設計師思維進階的過程，詳細講述了我在兩年間從一名應屆非科班設計師成長為一名高級體驗設計師的思維進階過程。與一篇UI教程、一篇交互分析的文章不同，這篇文章希望能夠從底層的思維層面幫助你明確自己的狀態，并提供一個快速進階的思路，所謂授人以魚不如授人與魚正是這個道理。
一：前言：靈感與反思
靈感始末
最初，在一個偶然的機會讀到一本規范相關的書籍，然后我開始反思自己是否有積累成系統的設計規范、設計技能樹，為了驗證這一點，我便以設計一個彈窗為例子開始模擬演繹，演繹完畢后進一步思考，我是如何積累這些方法論或思維模型的？正因此發現了我作為非科班設計師，從最初開始自學設計到如今晉升到高級體驗設計師的思考方式的轉變。進一步從現象中探究原因，于是輸出了本文。
如何設計一個彈窗？
在做任何需求的時候，甚至是一個極小的需求，你有沒有持續思考過？有沒有進一步思考過？又有沒有刻意、主動完善設計思路，積累思考模型？如果沒有，你可以從接下來這個思考案例中反思一些東西。
設計彈窗時，我畫的第一個元素——彈窗的矩形背景時，是如何思考的，考慮了哪些元素。進一步設計我還要考慮哪些因素？下面是我的瞬時思考能整理的有效信息。
方法1：根據彈窗內容進行界定（根據內容極限情況，及你的設計系統定義的間距來控制整個彈窗的尺寸）
方法2：根據固定比例，主要適用于移動端，例如3比4的矩形比例較美觀，計算彈窗面積與屏幕整體面積的比例、計算留白與彈窗的比例、參考黃金比例Golden Ratio、白銀比例Silver Ratio等。
方法3：根據你的系統定義的柵格進行界定，如小彈窗使用1/4,1/3,1/2，大彈窗使用1/2,2/3,3/4柵格。
方法4：柵格+比例，方法3界定寬度，方法2界定高度 。
設計延展性：考慮彈窗內的內容發生變化時的自適應情況，內容過多的極限情況/內容過少的極限情況。 自適應的規則，彈窗窗口尺寸的延展方式（橫向拓展/縱向拓展）
交互：彈窗又叫模態視圖，其通過遮罩突出彈窗視區，在蒙層遮罩上方的最高層，根據通用規則，大部分情況我們不應當在彈窗上再次疊加界面層。若彈窗場景下有新的縱深層，如下一級操作或內容界面，此時如何處理？
如下方，PC端google drive，就在結構上使用類平級跳躍的形式來“借面板”解決新的操作需求。
而再下方的IOS使用的bottom sheet則采用了完全不同的解決方案，表面上似乎是違背了彈窗模態上重復疊加的規則，但在移動端一屏僅僅解決一個問題、完成一個任務的語境下，反而更加合理。（而這些成熟的模式、范式，或者說設計單元，正是在主動思考和被動思考階段設計師需要積累的設計經驗，它們將作為設計師知識庫中的組成部分，指導設計并進一步提效和促使設計合規）
常規易用性：如退出機制——關閉的解決方案，通過關閉按鈕退出，那關閉按鈕尺寸在當前彈窗尺寸下定義為多少合適，視覺尺寸與hover實際可點擊尺寸分別是多少？PC端是否只能使用關閉按鈕退出？點擊空白區域退出是否更，如下方的dribble，點擊上方黑色空白區域即可退出，而無相關經驗的用戶也可以在右上角看到關閉icon的暗示線索。
場景與業務背景：詳細了解當前需求的業務背景與場景，進一步概覽整體業務背景，即兼顧其他可能性的業務場景。如我設計的B端系統包括辦公室類工作場景，同時也包括站立、遠距離觀看屏幕的工作場景，這將涉及到信息能否直觀清晰的被傳達、獲取。當前需求的業務是主流場景？可向上向下兼顧大部分同系統的其他業務場景？還是無法兼顧而需要同時列出更多場景來制定通用規則？以我所設計的B端系統為例，較高頻的出現在彈窗下存在下一級操作或展示頁面的場景，因此我考慮在工作空閑時輸出一份彈窗場景下有縱深的下一級信息或操作的解決方案，并將其作為產品相同場景的應用解決方案。
視覺合規性：保證主要信息的對比度，清晰度，保證所有信息傳遞和展示時的節奏和梯度優先級。從字號到字重再到段落行高間距等，從彈窗中ICON的樣式選擇，到Icon語義清晰度等。
...
如果進一步思考，其實可以思考more and more。你會發現，從基礎的結構涉及的柵格，到基礎的視覺合規性涉及到的字體設計、icon設計。再到交互涉及到的典型設計單元，通用交互模型范式等，在設計一項內容前，我們有很多的思考空間，或者稱之為思考機會點更為合適。將充足的思考納入設計過程后，初期設計時間線被拉長，但長遠來看避免了思慮不足引發的風險與反復更改的成本，合理的設計預測與分析則向上向下兼容未來場景，提高設計輸出物的通用性與成效，即所謂的磨刀不誤砍柴工。
那么這樣成熟（我自己其實是偽成熟，還不夠完善和系統）的思考過程，分析過程是如何學習或者說培養的？
二：設計思考的三個階段
這其實是我接下來要講的正題，我將設計中的思考分為三個階段，無思考——主動思考——被動思考，這是一個初期線性發展，后期循環迭代的過程。其實我定義這一套思考階段的分級是在短暫的靈感爆發后立即輸出的，來源于我對自己2年間從一個非科班新手到如今高級體驗設計師思考邏輯的發展變化的回顧。我發現其確實有跡可循，在地鐵上很興奮很興奮的頭腦沸騰過程中快速記錄下大綱，到了工位立即記錄并輸出。
無思考階段
大意為，新手設計師，或沒有刻意練習、思考、總結的習慣的設計師，最初由于沒有通用的設計經驗、沒有相關成熟設計模型或組件與設計單元的使用和設計經驗，因此設計一個新內容實際為從0開始，此時設計師可能會單憑直覺 隨意設計，例如設計彈窗就隨便畫一個矩形，然后隨機調整?；蛘呤褂贸墒斓慕M件系統，直接套用，純粹執行。這就是處于 0思考階段，憑直覺設計（注意和直覺性設計區分開，直覺性設計是從用戶的維度定義的，即用戶可以單憑直覺理解設計，這也是我們常說的可供性"affordance"原理）
主動思考階段
而主動思考階段的起點是，隨著設計師接觸的工作范圍、工作內容、合作對象的擴大或增加，及接觸同類工種（其他設計師、設計leader）的輸出思考過程、輸出物、行為模式、思維模型等等設計價值觀與執行模式等信息后。
前者會使新手設計師（或沒有有意識的反思、總結沉淀的初中級設計師，或剛剛轉換行業的各等級設計師）逐漸暴露并意識到自己的問題，大概率可能涉及到輸出物質量、規范性、平臺或行業壁壘造成的經驗缺失等。
后者則是一個對比與發現的過程，即接觸到更優質的輸出物，更合規的輸出過程，更的設計流程、協作流程等等?？赡苁潜粍咏邮艿?，如leader或同事的分享，及日常工作中為提高團隊整體效率而被灌輸的新的工作方法和進入新公司要強制適應的新的工作流，也可能是主動接受，如發現同事設計到輸出的質量和效率等遠優于自身而自發去了解，學習。
因此，在主動思考階段，會有一個從發現問題到解決問題的過程，是不是和設計本身的職能很像，而在這個過程中，設計師自身就是被設計的對象，即如何解決自己身上存在的問題？如何使自己變得更完善更優秀？
你可以回顧下，在你初入行業時，最熱情的接納各種信息、知識、經驗的階段，你當時的狀態是什么樣的？概括來講就是遇到感興趣的內容-發現自己在此間的不足-了解學習并掌握。從基礎的某個視覺效果的實現方式，到某個設計方法論、某個解決典型問題的交互設計等。
主動思考階段與興趣（對某個領域的衷情）、個人行為習慣（自學習慣，求知與自發研究的習慣）、周邊環境等因素有關。因此核心是與本人、其他個人（同事，設計圈關系人）、團隊相關。某些人天生對未知事物、信息及技能有濃厚的興趣，所以會自發的廣泛接收各種新的信息，并在這個過程中養成思考總結的習慣（比如在下），同理，個人在大學期間，甚至成長過程中有養成良好的自學習慣，有訂立目標并逐步實現的習慣，他們會長期甚至一直處于主動思考階段。另一種情況則是周邊環境，社交關系人對你所產生的主動及被動的影響，如leader布置課題及學習計劃，同事，好友，行業人員的協作共創活動，分享會等。
所以，主動思考階段應該是優秀設計師需要長期自發維持的一個設計狀態，持續的發現身邊的問題，發現自身的不足，發現新內容新趨勢新動態。并在發現新的內容并與自身能力模型對比的過程中，發現不足并持續思考和輸入信息，反思，輸入，鞏固，沉淀。是一個升級打怪的過程更是一個知識資本的原始積累階段，與無思考階段相比，由于它是一個主動，刻意學習的過程，因此積累知識的效率要遠遠高于懵懂狀態的初級設計師。（這應該也能解釋為什么一些沒有進入主動思考階段的設計師，工作四五年卻被一些一兩年的新人設計師趕超）。
從新人設計師“無思考”階段到主動思考階段關系到一個設計師能否完成初級到中級的進階。主要差別則是輸出物的不確定性（初級）與輸出質量趨于穩定并持續迭代提升（中級）。
這個思考階段線性過程的第一個門檻，雖然是初中級設計師面臨的門檻，卻是能持續影響設計師整個設計生涯的關鍵轉型點，奇異點。就像先賺它一個億中所謂的一個億啟動資金?？邕^這個門檻，設計師會迎來第一個爆發期，中級設計師我的理解是下限清晰，上限無窮。即在主動思考階段，設計師可以將個人設計能力，從技巧到方法推動到一個較高上限的地步，概括定義———擁有在從事行業領域內輸出高質量設計方案的能力。
如何跨過新手期，從無思考到主動思考？
刻意練習與學習
最優解是從興趣到發現，即培養興趣，調動興趣去開展某個內容或者技能的研究學習，并逐步掌握為自身技能樹的一部分。次解則是從目標到強制規劃自我再到研究學習和逐步掌握。以興趣為老師是最易收獲的方法，但確定目標并刻意學習才是大多數人要走的路。完美解則是興趣驅動同時嚴格規劃。在我作為非科班設計師開始自學到工作的早期，每天固定不變的是大量瀏覽作品，大量閱讀文章，大量練習技巧，后面逐漸選擇性瀏覽，選擇性閱讀，選擇性練習。這期間發生了什么？是綜合當前工作場景和設計趨勢等各方條件后的縝密思考所做的決策，也就是一個反思的過程，從發散到收束，以提高在當前工作場景下的個人能力，集中精力在核心能力的提升上。
也是這種能力使我快速B端轉型C端，使我在上手新軟件Figma后由一個新手使用者快速蛻變為講師、分享輸出者?？桃饩毩暫蛯W習的能力與傾向，應當在主動思考階段養成為習慣。
What——How——Why
從淺層思考到深層思考，最簡單的就是所謂的黃金圈法則。What僅僅讓你了解到所見是什么,能提高你的審美，積累設計相關的表層信息。而當你思考How時，你將掌握如何實現該效果的能力。再進一步，當你開始思考Why時，你終于探尋到設計的本質，該設計是在遇到了一個什么設計課題、問題的基礎上提出的，解決了什么問題，如何解決的，有沒有更優解？目前的解法能否納入自己的知識庫？
T型構建能力模型
T型中縱深為你所對應的領域、行業、業務強關聯的能力。 以UIUX為例，其中又以基礎UI界面輸出能力為例。
視覺：布局結構、柵格、字體、配色、間距、ICON及插畫繪制、對應平臺尺寸規范...
交互：信息架構、業務梳理、導航設計、流程設計、原型設計、交互演繹
業務：當前從事行業、細分領域、細分到業務的理解程度，細分需求的業務背景的理解程度
橫向為拓展能力，通用能力如經常講的共情能力，溝通能力，協作能力，邏輯思維能力，復盤輸出能力等等。除此之外還有特殊能力，比如UI UX以插畫 ，3D作為特殊能力項。
關注環境
在最初定義主動思考階段時，我就講過個人覺醒主動思考的過程中，他人和環境的影響因素十分關鍵，因為這是一個發現不足然后去解決問題的過程。整體環境如整個大的設計團隊，及細分的每個設計組，從小環境到大環境都有相當多的團隊沉淀和個人沉淀可以供你吸收成長。如我們設計團隊定期舉辦的月度會議包含超高質量的分享，公共Drive保存有設計團隊成立來的所有設計輸出積淀。再如你的設計小組的定期分享，以及你身邊擁有個人特長能力的同事們，關注優秀的內容，優秀的解決問題的思路，身邊就是老師，萬物都是書。例如我從C端轉型B端后，在一兩個月內快速融入團隊，期間從不同的同事身上學到了時間管理（正經的）、項目管理、規范體系的制定等特長能力，而我給團隊成員的反饋是智能組件系統的制定方法同時搭建了一套常用智能組件，大大提升了復用界面的設計效率，至少百分五十以上。沒有對應的環境和社會關系人，靠自己悶頭苦學很難有這樣的效果 。
善用工具
這里專指記錄，輸出類工具，例如印象筆記。從舊的設計過程中獲得收獲與經驗的核心在于復盤。忌諱對所知和所得模棱兩可，因此需要在記錄，總結的復盤過程中真正鞏固從設計思考和實踐中獲得的反饋，并進一步加深為自身的持續性積淀。沒有復盤過的設計師可能不會意識到，你的每一個需求設計經過一次復盤后都有可能發現新的問題，思慮不足的點或者仍然未解決的痛點等，當然也很可能發現能持續復用的思路、設計模塊等優質資源。
除了筆記類工具，公開分享甚至私人交流都可以作為復盤工具，在這個過程中你會回顧自己的設計流程和思考過程，并在言辭交鋒間發掘新的機會點。因此當你完成一次自我感覺良好的需求設計乃至小的版本迭代后，嘗試著與身邊的工具人同事溝通，嘗試在設計小組內分享，在籌備分享與交流思路時，對于該需求的設計思路便躍然而紙上了。
被動思考階段
被動思考階段有兩個核心特征，這里的被動不是指傾向性，而是指無意識且自動處理信息的狀態。可以理解為游戲中的被動技能。
第一個特征，即達到在主動思考的基礎上，持續積累和迭代知識庫的信息，然后將設計規范，典型范式，通用經驗思考模型等內化后的階段。
何謂內化，抓起超燙的茶杯會自動放開手，反應速度不會超過零點幾秒，這就是人自我保護機制的內化，即整個過程已經不需要刻意去思考和醞釀，而是在無意識的過程中自發的做出反應，完成系統的思考并形成一個規范的方案建議。
與主動思考階段相比，主要差別在于對已有能力的使用熟練度，調用效率，及思考的全局性。
說的通俗些，遇到一個設計問題時，處于主動思考階段的設計師會在遇到設計問題后，從過往經驗，相似解決問題的思路中篩選，尋找一個合適的解，這些解是零散的，且需要設計師主動去回憶甚至瀏覽歷史文件來搜集。而對于被動思考階段的設計師來講，若是面對一個較為熟悉的設計問題，如一個彈窗設計，此時該設計的解答方案會自然而然的出現在腦海，并且存在多個方案進行對比，并且每個方案都完整全面，從業務的考量到體驗的權衡，再到業務與體驗的相互平衡。方案如何推進，按照經驗會遇到哪些阻力，需要說服哪些利益相關者，案例如何演示，有否有設計還原類風險？如何解決等等。
因此，處于被動思考階段的設計師能夠自然并的調用個人積累的成體系的技能和經驗以及執行和推進設計的流程，從輸出設計到推動方案落地一氣呵成，宛若天成。在沒有一定思考和實踐經驗積累的情況下，主動思考階段的設計師則可能需要花費成倍的時間在方案探索輸出再到落地的過程上，期間遇到的典型性問題則會一點點被消化并推動設計師向被動型晉升。
第二個特征則是視野與維度，視野也就是常掛在我們口中的全鏈路視野，維度則指的是看待問題或方案的更高維度。這一特征使用實際案例來說明或許更易于理解，
案例1微信紅包早期推廣的案例
微信紅包作為微信的一個核心功能，初期花費大量成本推廣并成為一個現象級“產品”，作為產品設計師，底層的視覺設計師與交互設計師在產品視覺交互邏輯等方面投入較大精力，他們只需要將自己負責的需求完成，輸出達標的基礎方案，可能會聚焦于如何設計紅包樣式更易于理解，如何設計紅包樣式能賦予其可供性，幫助用戶快速理解產品與現實中的紅包的映射關系，在進一步可能要考慮不同年齡階層對紅包樣式的接受度，而交互設計師可能要考慮如何縮短用戶路徑，使紅包開啟的愉悅感能夠最的被用戶觸達。
而此時產品負責人是如何考慮該紅包功能設計的？答案是通過微信病毒式傳播，的綁定銀行卡，為微信支付業務鋪路。綁卡才是當時該產品設計的核心。這就是維度的差異，同一個產品，不同的崗位不同的身份，不同階段的設計師看到的會是不同的維度視角，更高的維度往往意味著更長遠的考慮，意味著碾壓式的決策?！盀橹Ц稑I務奠基”與“糾結紅包是否要帶花紋”相比，維度視野的差距，高下立判。
案例2與設計團隊負責人評審 Logo方案
上圖是該提案的部分PPT，在一次品牌LOGO提案的評審過程中，我花費較多的精力去宣講Logo的品牌理念和故事，分析圖形的演化過程，同時輸出多個方案用于對比。設計負責人一針見血的指出幾個核心問題。
第一點，在設計過程中不要過早的給圖形設計融入顏色，顏色是第二層信息會干擾設計過程，當然也會干擾需求方的理解過程。一次只闡述一件事情，設計圖形，講解圖形就使用灰度模式。
第二點，給群體及普通需求方宣講可以使用較多包裝或附上比較詳細的設計思路，而需要給企業級Boss過稿時則切記簡化一切過程，開門見山，直接鋪陳LOGO圖形，對不同利益相關者采用不同的策略。
第三點，該品牌LOGO的單獨設計輸出物看起來不錯，但需要置于我們跨國的多個產品品牌構成的總的品牌體系中，判斷其品牌一致性等問題，一致的產品品牌效果不僅能闡釋品牌歸屬，同時也能很大程度上降低推廣成本。作為設計師，既要細化到每一像素，又要高屋建瓴從全局層面考慮問題。
當你收到的反饋或建議都是你從來沒有考慮到的問題和想法時，這有可能就是維度的差異。
資源3：周陟 《設計師如何解決全過程問題》
周陟分享的《設計師如何解決全過程問題》是一個全局性與高緯度思考的典型案例。該分享詳細的闡述了設計師如何從產品的底層框架，結合業務的思考，市場趨勢、歷史數據對比分析，定義核心設計問題并探索設計方案的過程。
其中即有低維度的設計師底層能力方面的闡述，如從產品用戶體驗五個層面的設計思考（戰略層、范圍層、結構層、框架層、視覺層）到具體的可讀性、視覺舒適度等具體的設計問題。更有高緯度的市場銷售趨勢、不同手機廠商間的用戶流失流轉情況、市占率、信任度等業務層思考。從上帝視角，全覽產品各個階段的場景及問題，并在對比分析中聚焦核心問題，探索方案去持續解決。
我們可以用一個超級樸實的方式來闡述主動思考階段和被動思考階段的差異。當一個設計師處于主動思考階段，你可以把他置于他所熟悉的設計領域，他將會輸出高質量的設計物，能夠較好的解決當前遇到的設計問題，體驗問題。
而一個被動思考階段的設計師，你可以把他置于有一定相關性的各個設計領域（比如互聯網方向的設計不能被置于廣告方向），他會在較短的時間內理解不同領域的特征和需求，并輸出高質量的解決方案，且能夠兼顧各個利益相關者，主動推動產品實現進度，并提前規避各類問題。這其中的差別在于，是否有自己沉淀的一套解決問題的方法和過程，是否將通用設計經驗系統化，是否有足夠廣闊的視野及更高的維度。這也映射了你是一名所謂的UI設計師，還是一名高級體驗設計師，前者限制在一個領域內，后者已然破圈。
如何從主動思考階段跨越到被動思考階段
在體驗設計的領域，主動思考階段的設計師與被動思考階段的設計師，在單純的設計能力上，其實沒有太大的差距，即輸出物本身沒有太大差距。都能夠快速輸出達標的設計方案，解決大部分體驗類問題。那么關鍵差距提現在哪里？
其一是從設計到落地的總的效率。主動思考階段的設計師在整個設計過程中需要頻繁的遇到問題，并陷入陷阱，然后持續的糾正方案，一步步推進，踩著荊棘摸到最終方案所在的那塊石頭。而被動思考階段的設計師只需要在知識庫中的成熟方案中選擇一條更加應景的路，多個方案已經擺在那里，而設計師只需要去考慮低維到高維的一系列影響因素，從基礎體驗，用戶習慣，再到業務和戰略上的布局，最終選擇全局視野下最正確的方案。
第二點差距在于可能性，被動思考階段的設計師有精力和能力去思考如何把方案做到超標準，超出需求本身的要求，超出利益相關者的期待（如需求方和開發人員）。我們經常會講行業標準這個詞，作為一個設計方案的基礎判斷標準，但行業標準永遠不是上限。微信的撤回功能，從僅撤回到撤回后可編輯就是一次體驗上的超標方案。
第三點則是打通上下游的能力，即涉及到上游的需求理解與轉化，詳細的設計項目還會涉及到用研類信息的接受與轉化，下游則涉及到開發還原的質量與效率問題。在有意識的關注設計全流程和生命周期的情況下，被動思考階段的設計師可以更輕松的管理設計并反饋到整個項目的開發周期上。
想要從主動思考階段跨越到被動思考階段，我總結以下三個建議。
從輸入到梳理
首先是核心的底層設計能力方面，表面上是基礎能力與通用能力的的刻意學習鍛煉，而關鍵在于對知識體系的梳理。在我們初入職場逐漸積累設計經驗的過程中，一些典型的設計過程，流程，針對某個領域甚至模塊的典型解決方案，將其拆解匯總然后梳理分類，不論使用印象筆記等筆記產品，還是思維導圖等腦圖類產品，都能夠幫你實現這個目的。
忍受立即獲得解決方案的誘惑
其次，在真正開始做項目時，主動思考，刻意將個人知識庫梳理的信息與項目需求進行對照，主動回憶和驗證積累的方案，盡可能多的羅列場景，羅列可能性，不要被第一時間想到的方案所誘惑而止于此。設計師在遇到一個設計問題后，會第一時間想到的方案往往是最普通，未經思考的初步方案，但往往該方案可以一定程度上解決當前的問題。此時設計師需要強制自己從最簡單的方案中脫離，進一步思考，并大量的舉例、演繹，探索更多機會點，調動腦海中更多可能性的方案。每當想要就此停下時，反問自己，我能否做的更好，是否有更好的方案可以解決這個問題。
視野和維度來源于廣泛閱讀、案例、及復盤
被動思考階段的設計師橫跨了高級體驗設計師到設計專家這個范圍。抵達這個階段的設計師視野將拓展至整個企業機構，而不局限于設計團隊的個人的視野。除了強大的解決設計問題的能力，相較于普通設計師，他們往往有更高的思考維度，全局性的設計視野，此類中后設計生命周期中的經驗往往需要通過閱讀、項目實踐等多個方面持續輸入，然后復盤并沉淀為自己的經驗。
因此這要求設計師廣泛的閱讀各類設計項目總結，參考實際案例，并在真實的項目中持續計劃、嘗試、驗證，然后復盤。需要脫離設計師基礎能力層面的視野，更多的關注解決問題的思路與流程，最終掌握的設計思路或能力可以稱之為通用性設計解決能力。
當然，上面所講的都是我從個人思考方式的轉變中總結出來的經驗，其目的是分享設計師應該如何思考？不同階段應該聚焦于哪些問題領域才能最大化提升思考方式的進階速度等問題，而不是在講設計師如何從初級進階到高級，進階到體驗專家（非設計師位階的進階）。因為不同企業對不同位階、不同專供方向的設計師有不同的具體要求，比如設計leader可能更傾向于業務的理解與把控度，設計推進，研發流程中不同團隊成員間的溝通合作等能力 。
如果有關于此的疑問，我只能以我的理解解答，不論是什么位置的設計師，判斷其位置層次的標準必然是由上層的企業來制定的，而企業制定規則的出發點源于利益本身，換言之，你能獲得的位置和你能夠為團隊和企業貢獻的利益正相關，所以我們很容易理解，設計師的職業后期或者用于解決超級復雜的設計問題， 以對應的價值映襯其收入，偏具體設計能力層面，或者用于承擔全局性企業需求，如帶領設計團隊支撐某個業務線，偏業務理解和統籌方面。
從線性流程到循環往復的迭代過程
我們回顧一個努力的設計打工仔的職業生涯，首先，一個新手設計師從純粹執行的無思考階段，進階到主動思考階段，當他的基礎設計能力不斷進階后，開始拓展視野，思考業務，并在大量的項目鍛煉中形成自己的一套成熟的設計方法論，從設計思考流程到具體的設計流程，從而進階到被動思考階段。但這是一個理想化的描述，真實情況是，設計師會在這三個階段中循環往復，而甚至有些設計師可能會在前兩個階段循環往復。
人都有惰性，你我都如此。在主動設計思考階段，因為一次小長假，因為種種原因，我們可能會退步回無思考的階段。持續性學習是一件 令人興奮的事，也是一件需要莫大毅力的事情。技巧經驗會隨著時間消磨，這是設計師需要警惕的問題，因為這個行業就是如此，我們只能變化，只能持續不斷的學習。
而當將經驗與成體系的思考范式內化后，設計師會養成核心的通用設計解決問題的能力。此時，設計師期去接觸一個新的領域，不再需要從0開始，而是可以使用自己積累的通用設計能力，來指導和規范化新的設計領域的需求，并快速融入該領域。而新的領域的經驗與視野會被納入你的整體設計理解中。
從主動思考，到經驗內化，不斷脫離舒適區，納入新的設計領域、新的視野維度，在這個過程中使個人的通用設計能力螺旋進步。
最佳啟動：消滅設計的不確定性
我知道，我的讀者中有很大一批人都處于設計能力良莠不齊，沒有系統的設計思路與設計流程，介于初中級設計師之間的狀態。而當今國內的設計領域也是如此，初中級別的設計師完全飽和，而企業對高級體驗設計師又求而不得，這種人才斷層既有培訓爆火下的積弊，也和設計門檻與崗位收益相關，大環境無法改變，能改變的只有自身。
在這里，我總結一個更簡單的設計思路，只要你按照該方法去執行和反思，應該會有很大的收獲。即從今天開始，對你所接到的每個設計需求都提出唯一一個標準——消滅不確定性?，F在停下來詢問自己，你接到的每個需求，對于你輸出的設計結果，你認為其最終效果是確定的嗎？換言之，你認為你的設計真的解決了該需求的問題了嗎？
你只需要把你個需求設計的思考分為設計前和設計后。
設計前請思考，我如何設計這個需求能確定以及肯定的解決這個問題，沒思考清楚前不要動手設計，想到第一個方案后也不要動手設計，繼續思考，延遲設計決策。
如果你乍一想到的方案自己都認為模棱兩可，那不要執行設計。此時發揮主觀能動性去思考，我如何能夠獲得相關信息，來輔助我做出這個設計決策，我需要去參考一些競品？我需要列出目前存在的疑問點，或者我無法解決的問題點去詢問設計專家設計leader？或者我把場景，整體的體驗流、用戶操作流都列出來，然后繼續埋頭探索方案？
千萬千萬不要在方案還沒想清楚前就開始設計，這將輸出無意義的方案，且浪費大量時間，千萬千萬不要在想到第一個方案后立即開始設計，這將不會給你帶來任何進步，以后遇到相同場景你也僅有一個可選方案，千萬千萬不要忽略競品忽略他人閉門造車。
千萬千萬試著思考盡可能多的方案，乃至輸出多個方案（僅指體驗設計類，而不是視覺設計）。作為體驗設計師，必須鍛煉的技能是方案演繹能力，在腦海中演繹可能的方案，如果有精力則可以借助工具甚至把演繹過程記錄輸出。 如下方我進行的一個需求的方案演繹與思考。
設計前保證方案確定性，第一關要能夠經受自己的邏輯考驗，當你探索多個方案后最終確定了一個符合業務場景，同時體驗良好的方案，作為設計師自己給該方案打上一個“確定”的標簽，此時再去執行并輸出，而這過程中的思路，從糾結到決策都是最終設計輸出的關鍵證明，既能提高設計說服力，又能鍛煉個人能力，而這正是初級設計師容易忽略的部分。
設計后的確定性則是指，產品還原與產品驗證方面。產品還原度是設計稿的視覺確定性，確保開發還原的線上效果與設計一致，這不僅僅要靠開發的努力，更要有設計師的具體標注說明的輔助。驗證則是產品上線后的必要環節，不論是預先根據業務指標設定埋點，還是設計師通過各種途徑獲得用戶反饋，最終都要保證你所設計的產品體驗的確定性是達標的，確定解決了需求提到的問題，確定能滿足用戶需求。若沒有，則重復這個過程，重新思考然后設計。
作為設計師，應該理解自己也能作為設計對象。在我看來，設計師就是遇到一個問題解決一個問題，遇到兩個解決兩個，直到面前再也沒有問題。所以當不清楚自己該如何設計，下一步該如何做時？你只需要思考，把解決當前的迷惑作為一個需求，去思考，深入思考，列出所有可能性，不管是百度還是詢問同事查閱資料，總歸在思考后，你會有所收獲。
結語
最后，我們一直在思考，在定義，到底什么是設計？
我自己一直遵循的理念是——設計解決問題，形式追隨功能。
而有人說設計是做選擇（決策），有人說設計是永遠做正確的事情。
事實上這些說法都有其正確性，也都有各自的評價標準，因為場景，趨勢，市場各種因素都在發展變化， 設計最終要兼顧場景兼顧各種利益相關者，在正確的時間做正確的選擇并最終做到正確的事情。
解決問題有多個方案 ，設計師需要在其中做出抉擇，選擇最佳方案，最佳方案如何判斷的？對當下場景，對主流用戶，對更多利益相關者來講是更正確的選擇。那它就是最終方案。
當設計被置于真實的環境，真實的市場下 實際上其傾向性和評價標準一直在發展變化從最初重視覺到重體驗再到重商業。設計傾向性一直在變就像設計潮流，唯一不變的是設計師面對復雜的場景和問題時一如既往的優雅的解決問題的思路，并幫助設計師讓世界變的更美好。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計的最終目標都是驅動業務增長，商業價值轉化。那用戶體驗地圖是如何賦能的？
在日常的工作中，或多或少都聽過用戶體驗地圖。在一些大公司，這部分通常是由用研部門來負責，對于一些配置有限的公司而言，則是由產品、UI設計（全鏈路設計）等職位來擔任的，一些UI/UE設計也會參與制作過程中。你對它的理解有多深？在工作中，有使用過它嗎？
有些人會覺得畫圖就行了，搞那么多干什么，又不是我的事。刨根問底的想想，設計到底是為什么服務？你做圖的意義是什么？商業？藝術？最終目標都是驅動業務增長，商業價值轉化。設計在組織架構里面本質是以用戶為中心、幫業務去解決問題，而解決問題能力來源于對用戶同理心洞察、對業務目標的理解。而說到用戶體驗地圖則對于0-1階段的產品的可靠度是很低的，因為沒有數據的支撐，一切都是虛擬的。對于1—∞階段的產品，可以更好的幫我們找到用戶的痛點、爽點，觸發創意和發掘新的需求。也就是通過我們的專業知識、見解和洞察搞清楚用戶在使用產品這段旅途中坑在哪里、怎么填才能讓用戶走的更順。幫助用戶更容易獲取產品價值，幫助項目組獲得成功。
用戶體驗地圖是用視覺化的方式表示用戶（第一人稱視角）的圖，以敘述故事的方式來描述用戶與產品、服務、系統交互時的體驗和關系，以此來幫助理解用戶需求和尋找用戶痛點。
可以先看一張圖了解一下用戶體驗地圖
簡單點說用戶體驗地圖在互聯網產品設計中的主要應用是記錄用戶從使用產品到離開產品的全部過程中的情緒體驗，從中洞察到機會點，幫助設計建立更好的用戶體驗。
用戶體驗地圖包含兩種強大的工具—講故事（敘述事情）+可視化
這兩大方法是用戶體驗地圖必不可少的方面。以令人記憶深刻、簡潔明了的方式傳達信息。創建一個完整的體驗視圖，將不同的數據點聚集在一起并可視化，促進相關參與人的協作、對話和挖掘新觀等。
第一個觀點：故事比數據更重要。重要的不是零散的收集數據，拿數據證明自己的對錯，而是建立一個有代表性的故事。例如，兩個人相親，最簡單的收集收據的方式就是問：“你多大了？有房有車嗎？多少存款？”而詢問的數據只能代表這個人，你能根據這個數據做決策嗎？他背后的故事是什么？他經歷了什么才會變成現在這樣？直接拿數據說事是很難有說服力的，每個人對于數據的解讀都是不一樣的，更多的是要關注其背后的故事。
第二個觀點：所以一個好產品，是從一個好故事開始。
用戶體驗地圖全局可以幫助大家理解用戶，理解用戶了解產品，使用產品的整個路徑和感受，從而幫助產品決策和設計決策。
看了上圖，那體驗地圖的價值就顯而易見了：
在一眼地圖中可以選擇和定位用戶的體驗點，觸發更多的創意點和挖掘更多的新觀點。
例子—公司研發一個高級的木質掛衣鉤，用戶視角就是買回來—裝上去——直接使用。繼續挖掘其中的點，目前的掛衣鉤需要打孔才能裝，這里就衍生出兩條線：第一種方案賣已經打好孔的木質掛衣鉤，可以直接安裝，操作起來方便；第二種方案把安裝工具和木質掛衣鉤一起賣，用戶安裝成本會比較大。
在體驗地圖中，需要多人參與，能夠讓所有的人都梳理一遍流程，促進跨部門協作、溝通與思考。能把所有的人都拉到同一頻道。
設計師在進入一家新公司后，應趕緊熟悉公司業務，在后期的討論，與產品是同頻的，這樣參與感會增加很多，也會顯得更專業。
用戶體驗地圖能幫助團隊在梳理的過程中找到重新設計與改進的節點，照顧到用戶在其中的情感需求，精準鎖定產品引發強烈情緒反應的時刻，也就是“尖叫”時刻。
回到上面的例子，如果你賣的掛衣鉤已經打好孔，直接安裝就可，不用費過多精力，那就是用戶尖叫的時刻，驚喜的時刻，如果使用了另一個方案，就會考慮到這個東西買的人會不會用安裝工具，會不會浪費過多精力，以至于該掛衣鉤有可能被拉入黑名單。
用戶體驗地圖，可以讓產品在需求探索的過程中，能夠更全面、更全局的去定位問題、看待問題，并且從中找出潛在的機會點，可以促進讓用戶在使用產品時，爽點更爽，解決痛點問題。
那整體總結下來就是：
記錄 將模糊的需求拆解為各要素，文字+圖形表達出來；
評估 當前產品和服務的狀態以及預測未來可能出現的情況；
發現 體驗過程中的痛點，尋找創新機會；
提煉 幫助團隊更好的交流和討論、作出更好的決策和設計方案；
注：為了清晰的介紹，這里會yy一個電影票的App。
常見的調研方式：用戶訪談、查看用戶投訴記錄、詢問客服、查看用戶在社交媒體上的評價、調研相關競品，定性定量調研
· 舉例說明
比如app store上用戶的投訴評價，可以針對性進行收集與分析，理性分析，了解用戶心聲，在評論區有時能找到產品的最痛點。
比如上面【用戶2】和【用戶3】提出的評價—這兩類總結就屬于一類問題：關于用戶定位準確性的問題。
用戶訪談中可以面對面、也可以電話溝通，這樣盡可能獲得最直接、最準確的資料。
根據產品的主要目標進行用戶分類，為每個用戶創建用戶模型（需求、期望、痛點），每個角色將對應不同的用戶體驗地圖。
羅列出用戶在體驗產品過程中的關鍵節點以及對應的用戶感受。同時通過頭腦風暴，挖掘新的關鍵節點。在每個階段有各個用戶目標，以yy的電影票為例， 主要分為四個階段【線上—購票前，線下—觀影前，觀影中，觀影后】在這四個大的階段里面 有細分一些節點，你怎么去具體操作，選擇app——找電影票——購票——選座——取票、檢票——觀影——觀影后的動作。
根據每個節點就可以知道用戶在各個階段下的目標。
這個短時間內挖掘更多新的關鍵節點，同時使關鍵節點種類更加豐富
已經列出了關鍵節點，那用戶在整個節點中的一連串行為，是不是斷層的？是不是可閉環的？在整個過程中，又可以挖掘新的優化點，讓APP更充盈、更豐富。
整個用戶行為：從一開始的選擇該APP，對比各APP之間的差異，到app內具體怎么買自己想看的電影票，再到線下取票、檢票、觀影，再到觀影結束后，寫影評。
對關鍵節點進行分類，對關鍵節點進行篩選，移除掉重復、沒有價值的內容。例如在整個購票過程中，購票支付就是一個關鍵性動作。
對于之前總結歸納的關鍵節點的行為，使用場景有哪些？用戶產生的“觸點”的環境有哪些？（例如網站、手機客戶端）
用以描述用戶在整個體驗過程中的情感變化。在各個節點下，用戶的想法是什么，他的情緒曲線是怎么變化的。量化描述各個階段里用戶的體驗值。把【問題】和【驚喜點】放到對應的每個行為節點上。并區分顏色。
比如在買票的過程中，邀約朋友一起去觀影，把選中電影的鏈接分享給朋友，打開鏈接，竟然跳轉不了APP，情緒是非常糟糕。
分析全部過程后，總結痛點，并從中找到機會點。
繪制完成≠項目結束，報告產出后，要積極與項目參與者同步，對調研問題快速腦暴出解決方案。
對于一次性產出較多的問題點，劃分優先級，并按計劃分布落地。
良性用戶故事地圖像一個捕魚的過程，可以發現新的場景和機會點，可以幫助我們站在全流程的角度，挖掘使用場景下更多的體驗優化點。體驗地圖可以使部門或小組在需要解決的過程中具有不同階段或關鍵接觸點的對齊方式更加清晰。
體驗地圖不是必須的，但是做好一個好產品必要的步驟。它的一切都與用戶有關，在每個階段都可以參與進來。它可以讓我們以用戶的角度來審視體驗過程、可以讓大家都參與進來，促進跨部門跨角色無邊界思考合作，可以協助團隊鎖定“尖叫“時刻，可以更好全局的去定位痛點、解決痛點、找到機會點。
文章來源：站酷 作者：瑪麗的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
降本增效一直是為B端賦能的首要宗旨，那么我們該如何從設設層面為用戶提高表單錄入的效率呢？
什么是表單頁
表單都是界面中最 常見、最 重要 的組件之一，屬于 數據錄入 板塊。
表單是2B產品“管理”的第一步。軟件/系統/平臺本身是沒有信息的，像是一個空的架子，表單是用戶向系統輸入信息的一種非常重要的手段，只有用戶向系統添加了豐富的信息，系統才能實現其價值。
表單是信息添加、錄入的通用形式；主要作用是負責數據采集，是最常用的信息錄入工具，隨著互聯網興起，特別是最近幾年B端的興起，表單的重要性顯得越來越突出。
表單的設計原則
- 充分考慮用戶填寫表單的目的，區分必填項和非必填項，刪減不必要的表單信息（例如：填寫了身份證就無需再填寫出生日期，因身份證信息內包含出生日期，系統自動識別即可），確定完表單內容。必要的時候對信息分組，表單項并非從上到下無序羅列，而是根據表單內容，按照一定的邏輯或者用戶熟悉的模式順序，對表單項進行排序和分組，才能讓用戶瀏覽和填寫流暢且。
準確- 信息表達要準確無誤，避免歧義，提示說明要合適，不要給正確的廢話，例如：填寫備注的提示用“請輸入備注”沒有意義，換成“不超過100字”更有助用戶對表單的理解。
一致- 組件的規范和操作的規范同樣重要。同一套系統同一個組件使用一個樣式即可，這樣才能保證頁面的視覺統一。同一個功能按鈕，在A頁面點擊給的彈窗，在B頁面也同樣要為彈窗。
易懂- 給予高質量的信息提示及反饋，如果需要輸入某種特殊格式，請給出具體要求（例如：密碼長度8-20位)；錯誤提示的時候要給用戶錯誤的具體內容（例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號格式錯誤，還是密碼長度錯誤）。
我們先看看表單主構成，表單主要由這5部分構成：
分組標題：表單項較多的情況下建議分組，分組標題有引導用戶完成表單填寫的作用。
表單標簽：也就是填寫或操作內容的標題。標簽規范的方式時標題后帶冒號，還是不帶冒號呢？這個其實都可以，沒有硬性的標準，自定義一個規范去執行就可以了。
表單域：表單是用來數據采集的容器，也可以視為一個對象。包含了文本框、多行文本框、密碼框、隱藏域、復選框、單選框、下拉選擇框和文件上傳等，用于采集用戶的輸入或選擇的數據。
提示信息：分為說明性提示信息和操作反饋提示。提示信息可以放在表單域里邊（例如：備注的提示“不超過100字”），也可以在表單域或后邊，還可以收進“問號icon”里，鼠標hover后給氣泡提示展示信息即可。
操作按鈕：操作按鈕為頁面的全局操作，為滿足用戶隨時對表單進行操作的需求，操作按鈕會懸浮在頁面底部。一般情況按鈕最多只有一個主按鈕，可以有多個次按鈕。
(1) 分類
左標簽：優勢-節約縱向空間，信息表達明確，多用于web端；劣勢-橫向空間利用率不高，不適用移動端等狹窄空間。
頂標簽：優勢-視覺舒適，節約橫向空間；劣勢-縱向空間利用率不高。
行內標簽：優勢-最節省空間，多用于注冊登錄等字段少的表單；劣勢-輸入時和輸入后標簽消失，令用戶迷茫（可優化為浮動標簽，在光標鍵入時，標簽展示輸入框上），字段多的表單不建議使用行內標簽及浮動標簽。
(2) 對齊方式
左對齊：從左至右的閱讀順序，符合人們的閱讀習慣，一般用于詳情的陳列。
右對齊：也被稱為“冒號對齊”，右對齊使得標簽和輸入之間的距離固定，有明確的視覺關聯，操作效率高，非常適合表單錄入。
表單域大致分為以下5個大類：輸入、內容選擇、日期時間選擇、數值范圍和上傳。
選擇適合的控件，不光能在視覺上做到統一規范，還能提高用戶操作效率。
(1) 輸入
文本框：選擇適合的大小，它的大小應該向用戶暗示所需輸入內容的長度，以此減輕判斷負擔（注意：文章類超長文本不適用于長文本輸入框，建議使用富文本編輯器）。
特定前/后綴：涉及到金額輸入時，當用戶輸入的金額超過千時，出現千分位最數據進行分組，方便用戶快速識別金額。
帶icon或按鈕：“日期選擇”和“時間選擇”一般都附帶icon，便于用戶快速識別。帶按鈕的表單項在“密碼輸入”用的最多，可做隱藏密碼和顯示密碼的切換用，因為盲輸及可能會出錯。
(2) 選擇
內容選擇：含單選、多選、選擇器（常用的有下拉單選/多選）、級聯選擇（多層級聯動選擇）、樹選擇、穿梭框、開關。
1、單選框、復選框：一般用于選項不多且相對固定的情況，選項控制在6個以內為宜，用戶可以一眼看到所有內容。單選框只能是其中一個選項，多選框則可以選擇其中一個或多個選項。
2、開關：使用開關控件的條件是選項的性質互斥（例如：是和否、打開和關閉、開啟和禁用等）；
3、選擇器：當選擇項超6個，就需要考慮用到選擇器了。下拉列表是網頁中一種最省頁面空間的選擇方式，單擊下拉按鈕后能看到最多展示的8個選項，少于8個則顯示實際個數自適應，多余8個則出現滾動條。下拉選擇器根據屏幕位置決定向下展示或者向上展示。
選擇器適用廣泛，同類選項（例如：選擇客戶、商品名稱、貨物編號等）、增量選項（例如：年份選擇）。
4、級聯選擇、樹選擇：二者都屬層級選擇，區別在于級聯選好選項后框內顯示的是含層級的內容選項，且只能選擇需最子集選項（例如：江蘇省/蘇州市/工業園區，不能選擇江蘇省，因為前面的選項只為導航至最子集），而樹選擇框內展示的是單個選項的內容，不展示層級，但可以選擇任何層級（例如下圖：浙江省）
日期及時間選擇：分為日期選擇、時間選擇、日期時間選擇，可以是單個時間，也可以是時間區間；他們很特殊，只為日期和時間選項而生。
1、日期、時間選擇：當用戶需要一個時間/日期，可以點擊標準輸入框，彈出選擇面板進行選擇，或者輸入時間后自動定位到該選項，無需手動選擇。
2、日期時間選擇：相當于將日期和時間這兩個選擇項集為一身，在同一個選擇器里選擇（年月日時分秒）；下例相當于兩個下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”，則切換為步驟2的時間選擇框。
數值范圍：
1、滑動輸入器：滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區間內進行選擇。
2、步進器：也稱為計數器，僅允許輸入自定義范圍內標準的數字值，當自定義標準數字值為整數時，輸入小數點后回車，帶小數點的數字只保留整數呈現。上下按鈕也不是每點擊一次數值±1，可以設置跳每點擊一次±N，N可以為任何數字，也可以為小數。
(3) 上傳
文件、圖片上傳：第一種情況是上傳圖片和文件合在一個上傳控件里；第二種情況是區分了圖片上傳和除了圖片之外的其他文件的上傳，這種情況下的圖片成功上傳后是有縮略圖的；根據需求選擇其中一種即可。要注意的是上傳有四種狀態：上傳前、上傳中、上傳后的成功狀態、上傳后的失敗狀態，UI都需要設計出來，一個都不能少。
(1) 占位符
占位符就是先占據一個固定的位置，等著用戶往里面添加內容的符號或文字。在鍵入信息前，出現在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正確的廢話”，因為給不到用戶任何提示幫助，如果表單項沒有制定規則，可用表單項編輯方式占位“請輸入”/“請選擇”，以新增商品為案例：
(2) 幫助信息
幫助信息和占位符類似，也是在輸入編輯前給用戶的提示信息。和占位符不同點在于“幫助信息”不占據輸入編輯的位置，不會因為鍵入信息后消失，屬于表單中的常駐信息。三種方式可以同時運用在一套系統內，視當前表單情況選定。
(3) 校驗信息
校驗信息是在輸入后或者提交后，系統對編輯的信息進行的校驗，分為前端校驗和后端校驗兩種。
前端校驗：一般校驗顯示錯誤和格式錯誤：必填項、（郵箱、電話號、地址）格式、密碼強度等?？焖俜答仯苯犹嵝延脩翦e誤內容，讓用戶及時知曉并更改。
后端校驗：唯一性驗證、驗證碼、敏感詞等，觸發校驗請求后系統會去數據庫查詢校驗信息，再給予用戶相應的反饋。
(1) 分布的位置
表單頂部、表單底部：用于放置全局按鈕，兩個位置的功能按鈕是一樣的，只是出現的條件不同。默認顯示表單頂部按鈕，當頂部按鈕因為頁面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。目的在于用戶無需上下滑動到固定位置才能對表單進行操作，省時增效。
跟隨表單項：這種情況很少用到，一般是需要校驗的情況下使用，或者可手動增減的表單項。
分組底部：一般是對于這個分組進行的操作按鈕。
溫馨提示：當操作按鈕超三個時，可以將相對低頻的操作按鈕折疊收起，點擊或鼠標hover“更多操作”時下拉展開顯示所有按鈕。
(2) 閱讀順序、按鈕層級、對齊方式
其實這三者的規則都是一樣的，當按鈕右對齊頁面的時候，閱讀順序自然是從右向左，而按鈕層級也是從右向左遞減，比如頂部的提交、保存、取消三個按鈕；商品列表的“添加商品”和“刪除全部商品”，左對齊頁面，閱讀順序和層級自然也是從左至右。
表單頁面主要的交互方式有四種：原位編輯、氣泡卡片、彈窗/抽屜、頁面跳轉。表單頁面在交互方式的選擇取決于表單容量及表單親密度。
原位編輯是輕量型信息采集表單，適用于表單編輯項較少（盡量低于5個編輯項），且屬于主功能分支的場景。其優點在于操作便捷，隨時啟用與退出，能夠保證用戶對主要功能的操作流暢度。其存在的意義在于完善或者增強主功能的操作，而不是打斷。
使用場景：常用于列表及卡片，詳情內也可以使用原位編輯（例如：詳情內只有A和B可以編輯，且需分別編輯，此時建議用原位編輯進行操作），需要注意的是，盡量不要用在長文本編輯。
激活方式：信息展示區域通過雙擊、單擊、hover或點擊“編輯”按鈕即變為激活編輯狀態。最常見的比如：微信/企業微信修改群名就是單擊激活，列表、表格的點擊“編輯”激活，相比之下hover去激活相對用的少。
與頁面的親密度：親密度高，編輯內容即為展示內容，當編輯內容不止表格內展示的字段數量，且存在聯動關系時，需慎重（例如：“部門”和“班次”屬于上下級聯動關系，列表內只顯示“部門”，而“班次”在詳情頁面顯示，則不適用原位編輯）。
使用場景：常用于條件篩選的設置，點擊或hover后顯示氣泡卡片內容（建議不超過5個設置項）。觸發生效機制可以是設置項點擊即生效，也可以多個設置項選擇后，觸發操作按鈕生效（操作按鈕建議不超過2個），觸發機制可以根據項目實際需求而定。
與頁面的親密度：親密度高，所見即所得，編輯前/后都不遮擋列表，用戶剛剛操做了什么，即在當前展示操作后的結果，讓用戶感受到一切都在掌握之中，不會出現斷裂感，交互很友好；
(1) 彈窗
雖說設計上對彈窗的使用都是持謹慎態度的，但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶更聚焦，且不用離開當前頁面就能更快速更容易完成任務。
其實該使用彈窗的時候也是要用的，特別是在B端，如果彈窗能解決的問題，不建議頻繁的跳頁面去操作。如下例：下單錄入涉及添加產品，而產品信息字段又很多，不是一個模糊搜索就能解決的，此時建議使用彈窗而不是跳頁面去操作。來回跳頁面頻繁刷新，不如用彈窗選擇操作更為簡單，在當前頁的彈窗選擇產品，再將產品信息帶入當前錄入頁面，此流程更符合用戶操作時的心理預期。
使用場景：所有頁面均可，3個以上的錄入項即可使用彈窗；需要注意保持交互一致性（例如：在列表“新增會員”點擊觸發是彈窗，在其他頁面也同樣要是彈窗）；當然也有特殊情況，例如：快捷新增時只需錄入一個名稱，可以先使用快捷操作添加極少的信息，后續在編輯頁面進行補充；
與頁面的親密度：可以有強關聯，也可以沒有關聯。有強關聯指的是，比如說：點擊“新增會員”按鈕彈出來的此彈窗，在其他也要用這個“新增會員”名稱，避免用戶迷茫（當然了，很多新增和編輯其實用的同一個彈窗，這個特殊情況除外）。沒有關聯是指，可以在列表頁面使用“新增會員”彈窗，也可以在工作臺或者其他有需求的頁面去使用“新增會員”彈窗。
(2) 抽屜
抽屜彈窗也被稱為側彈窗，彈窗抽屜和彈窗很類似，使用場景和親密度都是一樣的。相比彈窗，抽屜的側邊彈出的交互方式，其操作成本和用戶使用心理負擔會小很多。
注意事項：如果系統大部分用的彈窗，就優先選用彈窗，如果表單內增加了更多字段，可以換成抽屜彈窗；
使用場景：超出了彈窗/抽屜的承載量，就要用到頁面跳轉了，一般一級模塊的設置項也會用到頁面跳轉，因為會牽一發動全身。還有初始化入駐也需要跳轉頁面進行操作，不光因為需要提交大量信息，還因為各種認證審核需要一項一項進行，此時用抽屜和彈窗承載內容顯然不合適，因為彈窗和抽屜，代表著快速完成。
與頁面的親密度：跳轉了頁面，不管是新開頁面還是刷新原頁面，與原頁面的關聯性已經沒那么強了，只能說他們屬于同一條路徑下不同頁面。
根據內容的多少及親密程度來決定，我們設計時應選用哪種交互方式，或者可以直接根據內容承載量做判斷也是可以的，從少到多依次此為：氣泡卡片-原位編輯-彈窗-抽屜-頁面跳轉。
排版布局的方式有四種：平鋪、分組、標簽頁、分步驟。根據內容項的多少及實際需求相應合理的布局。
輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據表單輸入內容的相關性、內容的所屬類別，可以將同類型的數據統一輸入，減少用戶輸入信息的跨度，提高輸入效率。
使用場景：平鋪顧名思義就是指表單項不做分組，全部平鋪展開，很多注冊和登錄都是這種布局。適用于表單項少，或者多但表單項之間親密性很強，就無需額外分組，直接將表單項平鋪開展示，簡單明了。
對于內容過多的表單輸入頁面，分組、分模塊的排版方式讓用戶感覺更友好，不是密密麻麻一大片，讓人喘不過氣來，而是有條理的布局，張弛有度，疏密有致。用戶可以在填寫好一段內容后進行心理上停頓休息，減少視覺疲勞和心理壓力。
(1) 標題分組
使用場景：超過了7個設置項，且較為復雜的表單，標題分組之間的關聯性較弱，就可以去分類歸納表單信息，位的是降低用戶的認知負擔，提高用戶體驗。注意：分組內組內設置項要有強關聯性，否則不能歸為一組，不能因為字段多，為了分組去分組。
(2) 卡片分組
使用場景：7-15個設置項，用標題分組不足以給信息做層級區分，為了讓用戶在操作時更聚焦，也需要給用戶更明確的操作引導，即可使用卡片分組。
卡片分組之間關聯性更弱，分類更明確，多個設置項，多個分類。需要注意，一個表單項不要分過多的卡片分組，不能每兩項做一個分組，這反而會造成用戶視覺壓力和操作負擔。
使用場景：當標題分組和卡片分組都不足以對表單進行分組時，就可以考慮用tab切換了。每個設置都包含多個錄入，且使用了標簽。
注意事項：tab標簽的填寫沒有先后順序的規則，標簽頁彼此之間沒有特定的關聯性，可獨立去設置。也就是說先填寫tab1還是先填寫tab2，對表單的其他tab項沒有任何影響，不存在聯動關系。
標簽頁對應的詳情展示：一項一項上下鋪出來，但如果表單詳情信息過長，可以考慮將錨點定位，點擊錨點定位的標題即可自動定位到該區域，方便用戶快速定位瀏覽位置。
使用場景：對輸入表單進行分步驟的處理，可以降低用戶的操作頻率，給與用戶一定的休息空間，用戶會有階段性的成就感，同時分步驟的輸入還有利于減少信息的錯誤率。如果輸入表單的內容較多，同時輸入內容有邏輯上的先后順序，此時可以考慮將輸入表單進行分步驟處理。
利用步驟條，將大型、復雜任務拆解為多個部分，并按照相關性分組，可以提高用戶處理的專注度，降低頁面的復雜性，減輕用戶操作負擔，降低用戶出錯率，提高用戶體驗。
根據內容關聯性的強弱程度來決定，我們設計時應選用哪種布局方式，或者可以直接根據復雜程度做選擇也是可以的，從弱到強依次此為：平鋪-標題分組-卡片分組-標簽頁/分步驟轉。
提高易用性的方式有以下四種分別為：視覺清晰、信息降噪、智能、準確易懂，每個表單，每個頁面都要應用這四項準則，不光是在表單頁面，所有頁面都適用。
布局方式-單列布局：常見的表單布局為單列信息展示布局，比如：蘋果、飛書、釘釘、有贊、微盟等首選使用單列布局進行頁面排版。設計中盡量采用單列布局，是為保證用戶的視覺動線流暢，不容易遺漏信息；
在輸入項較多時，每次填寫完一項都要鼠標選中下一個輸入框，很容易讓用戶失去耐心，而單列布局恰好能解決這個問題并提高用戶體驗，輸入完一項按enter鍵可快速切換至下一項，提高用戶操作效率。
當然了按Tab鍵也是一樣的效果，只是，一般情況下，大眾都更習慣也更熟悉回車鍵的位置，需要注意的是，長文本輸入框的屬性里回車鍵是文本換行的意思，需要區別設置兩者的操作機制。
布局方式-橫向布局：橫向布局也是單列布局，是它的發散版本。如果出于業務方復雜需求的考慮，必須在橫向增加內容，那增加的表單項一定要和前表單項有關聯，才可作為分組橫向排列，還需注意不能出現Y軸平行豎向分組（如下圖），避免用戶迷茫或遺漏信。
(1) 合理設置必填項
正常情況下，我們標示“*”標就是為了提示用戶此項必須要填寫方能提交單據。
但當一個編輯頁面的必填項非常多時，就可以無需標注必填，只標明哪些是非必填項就行。
當編輯頁全部都是必填項時，可在大標題處用標示必填即可。
(2) 折疊不重要非必填信息
在能完整獲取需要信息的前提下，輸入項越少越好，當表單頁很長，且有些信息非必填，或者說填寫后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起，點擊“展示更多”下拉展開全部表單項，讓用戶可以選擇性錄入不重要的信息。
(1) 智能填寫
根據上下文信息可自動獲取的，無需用戶再次填寫。如下例：通過客戶名稱數據庫可自動匹配客戶手機號，或者通過手機號匹配客戶名稱。填寫郵寄信息的時候，只需選擇省市區，郵政編碼便自動填充，減少了用戶查找郵政編碼的繁瑣（甚至可以提議“郵政編碼”字段直接去掉）。而生日和性別都可以在身份證號內提取。
(2) 智能排序
默認高頻：當選擇器內容超過5個選則項時，可以對內容選項進行一定排序規則（首字母排序、數字排序或設置默認高頻選項等），方面用戶提前預知選項的大致位置，檢索找到相應的選項。
(3) 智能聯想
智能聯想是給予用戶鍵入字段的聯想功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
自動搜索：當下拉選項超過16個時，建議加入輸入選擇功能，用戶可使用下拉選擇，也可以輸入關鍵字后智能匹配顯示對應的選項?；蛘呖梢栽偌由闲畔⑴判颍鶕c擊頻次進行排序，高頻選項前置。
后綴聯想：一般用于郵箱信息的錄入，當輸入內容后，自動將默認高頻的郵箱后綴作為補充數據填充在后方，減少用戶的輸入。
操作直觀：去除冗余且無用的部件：切換“開關”操作后會立即生效展示結果，無需與操作按鈕搭配使用，避免造成用戶的誤解，導致體驗不友好。
準確的錯誤提示：反饋提示是頁面系統對用戶的輸入的內容進行的校驗，并對校驗結果予以展示的提示形式?？煞譃榍岸诵ｒ灪秃蠖诵ｒ瀮煞N。
錯誤提示的時候要給用戶錯誤的具體內容，而非簡單粗暴的錯誤提示。例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號信息錯誤，還是密碼校驗錯誤。
前端校驗：也被稱為“即時校驗”，一般是校驗顯現的數據內容，比如字符長度、格式（是否包含非法字符）、是否為空等。該方式的校驗條件多在本地，無需實時向服務器發命令而得到反饋。
后端校驗：包含“局部校驗”和“全局校驗”，局部校驗：在注冊賬號時，輸入完整用戶名以后，提示用戶名是否可用，則為局部校驗反饋。全局校驗反饋：多指在輸入完成提交或者階段性完成（分步驟跳轉下一步）時，系統給出的校驗反饋。在用戶操作反饋動作按鈕后，界面在相應位置（一般為單個輸入框的下方或右側）一次性給出對應的錯誤提示。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為產品設計者，經常遇到一個備受靈魂拷問的問題：怎么衡量我們設計的產品，用戶體驗是過關的？
今年，我們在內部中后臺產品進行嘗試，發現「易用度」可以作為合適的度量指標，并成功推廣到 35 個產品，幫助PD、設計師、工程師等產品設計者去衡量產品體驗現狀，發現改進機會點。實踐證明，易用度，相比滿意度、尖叫度、NPS，更適合技術類產品的體驗度量。結合用戶行為數據，可以為用戶畫像、改進方向、運營策略提供更準確的決策依據。
在掌握了這些信息之后，我們在內部的技術類產品上，進行了一輪新的探索。經過半年時間的試點，結合業界的解決方案、內部產品的業務特性，我們最終選擇主觀衡量法，并使用「易用度」這個衡量指標。
為什么易用度相比其他指標更適合技術類產品呢？主要有 3 個原因：
結合行為數據，易用度可以進行描述、分類。使用現狀描述找出低分人群的高頻問題，使用對比差異找到多角色的不同訴求，分析影響關系找到影響易用度的主要因素，結合用戶行為數據進行聚類找到典型人群。
文章來源：站酷 作者：Ant_Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
伴隨技術的發展與人們需求層次的變化，新趨勢年年都有，有的新趨勢由于用的人多了，使設計作品逐漸飽和，慢慢失去了新意，有的趨勢則會為企業不斷地帶來靈感，產生更多的“化學”反應。
今天，TCC 情報局從這篇國外大神的趨勢里總結了 8 條影響 2021 年的用戶體驗設計趨勢，以及可能面臨的挑戰。只有充分利用這些趨勢來創造視覺表現力強且具有可用性的產品，我們設計的產品才可能被更多用戶接受并喜愛。
2020 年無疑對全世界來說都是面臨挑戰的一年，新冠疫情的爆發使大多數人都體驗了一把在家辦公的 “樂趣”（作為一名大學在職教師，我也終于實現了多年以來睜眼就能上班的愿望）。騰訊會議、騰訊課堂、釘釘幾乎成了每一位 “網紅”，不對，是教師電腦里的必備軟件。對于打工人來說，能夠在家與同事進行線上協同辦公，也成為了剛需。像 Teambition 這樣能夠實現多人協同辦公的工作學習套件，使人們不但做到工作進度的實時同步，還做到了在家也能 996（淚目）。
△ 基于虛擬現實 VR 和增強現實 AR 的會議軟件 Spatial
類似的辦公協作工具，在國外也廣受歡迎，Zoom 的股價在一年內上漲了 600%，Google 也加快更新了 Workspace 辦公效率套件?？梢娺@些產品在未來將會取得進一步發展，創造出更為成熟的虛擬辦公生態系統。
△ 遠程協作已經成為工作中的一部分
△ Divan Raj 設計的遠程會議應用
△ Dmitriy Kharaberyush 對遠程會議系統 Zoom 進行了 Redesign
在設計領域，設計工具的協同性也是設計師們比較關注的話題，Sketch 的使用痛點便是協作的問題，尤其對于后疫情時代來說，人們意識到了在線協同辦公的重要性后，Figma 便以它驚艷的協同能力成功出圈，備受青睞，也成為了 Facebook 設計師們的御用工具。
△ 適合 macOS Big Sur 系統的全新 Sketch
增強現實（AR）和虛擬現實（VR）技術早已悄悄進入我們的日常生活，AR 上妝、VR 看房不再新鮮。2020 年，由于新冠疫情的影響，虛擬現實重新進入大眾視野，成為人們關注的重點。
△ 將 AR 技術融入線下實體書店
Facebook 對 VR 和 AR 也越來越重視，公司旗下也會推出 VR 旅行、三維藝術品創作、AR 室內設計和博物館等應用程序，還有用于教育的 VR 游戲等。
△ 博物館指南程序結合 AR 技術
尤其對于教育領域來說，虛擬現實技術所具備的仿真性、開放性和安全性的特點，不僅可以使學生在學習過程中身臨其境，還能打破時空限制進行集中教學，同時能模擬各種情景，不必擔心有安全隱患。
△ 直播課程 Unacademy Plus 提出應用 AR 技術的概念版
過去，人們一直認為虛擬現實僅是一項娛樂技術，比如手游 “陰陽師” 的 AR 召喚，使無數人想起當非酋的日子；大多數人首次接觸 VR 技術，也是在商場里偶然嘗試了類似 VR 大擺錘這樣的游戲，然后被嚇得連連尖叫（不是我）。如今，這項技術在各個領域的廣泛應用才是我們要討論的話題，其在醫療、教育和藝術領域實現的跨越式發展，成為必然趨勢。
△ 陰陽師 AR 召喚陣圖
相信在未來，將 AR 和 VR 技術融入更多的數字產品和服務，也會給設計師們的創作帶來無限可能。
在現代工具和技術的幫助下，設計師的工作流程得到了大大的簡化，智能化與生成式設計也成為一大趨勢。各大軟件開發公司也爭相推出了一系列智能化工具組，以幫助打工人們更快速的完成工作任務（也有可能是在跟打工人們搶飯碗）。這些智能化工具組可以分析大量現有數據，找出其特性，然后根據所提供的數據生產新的特性。這些工具可以幫助我們：自動生成多種布局，選擇視覺風格，生成演示模型、優化設計細節。
△ 設計團隊關注效率，使用組件化的協作方式
Sketch 中添加了顏色變量和組件視圖的新功能，使保持顏色一致性和使用組件變得更加容易。
值得思考的是，在技術越來越成熟和智能的現代社會，如何平衡所謂人工和智能呢？生成式設計不僅僅在幫助我們更的工作，另一方面，在未來也可能奪走本屬于我們的工作，畢竟 “鹿班” 的出現一度使 “美工們” 陷入恐慌。但是作為未來的設計師，我們必須相信，機器可以通過數據來相互學習，但它們還遠遠不能獨立思考，不能在美學、情感化等問題上與人類競爭，人類所需處理的問題，遠比機器要復雜。
△ 鹿班智能設計平臺
疫情期間，為了避免用手觸碰電梯按鍵，我們看到很多電梯都放置了紙巾、牙簽等物品，哪怕如今國內病毒有所控制，我們也已經習慣用鑰匙來戳一戳電梯按鍵。此后，語音聲控電梯在武漢防疫戰線調試運行。
眾所周知，科幻超英電影中，總會為我們展現未來世界的面貌，語音交互技術在此類電影中早已不是什么先進技術。早在 2014 年《超凡蜘蛛俠 2》上映之時，電影中就有個值得注意的小細節，女主角格溫（私心：超英系列最愛女主）所在的科技公司奧斯本總部的電梯，就可以通過語音交互來說出自己要去的樓層，同時還可以和漂亮的人工智能小姐姐對話。
△ 電影《超凡蜘蛛俠 2》奧斯本科技公司總部電梯內場景
△ AI 驅動的智能語音助手
除了語音交互，你們的身邊可能早早的就出現過體感交互的例子。例如微軟為 X-box 360 推出的外設周邊 Kinect，就采用了體感交互技術，操作者可以通過自己的肢體去控制系統，實現與游戲的互動。你只需站在大屏幕前，揮動手臂，即可完成一系列翻閱、確認等操作，回想一下，你有沒有在商場里見過對著屏幕過瘋狂切水果的熊孩子，體感交互技術正在慢慢跟上他們靈活的速度（年輕人不講武德）。去年 8 月，蘋果獲得了一項專利，該專利顯示或許有一天我們可以通過空中手勢來控制 AirPods Pro。
△ X-box 360 推出的外設周邊 Kinect
△ 體感交互助力 Apple watch，未來可能在表帶中也植入肌電傳感器
△ 硬件設備結合應用程序進行運動數據記錄
綜上，其實無論是語音交互還是體感交互，都不是新興的科技了，畢竟我們和 Siri 的罵戰都持續了好多年。但是相信到了 2021 年，伴隨便捷、安全、無接觸等后疫情時代的需求，無接觸式交互會得到更多廣泛的應用。
隨著 C4D 的大熱，3D 設計近幾年一直活躍在大眾視野中，目前大多應用在營銷活動、數據可視化、游戲等需要表達空間感和氛圍感的項目里，還沒有大規模的應用在日常的線上產品中。
△ 使用 3D 風格設計的游戲網站
△ Slava Kornilov 設計的車載導航系統
當 2020 年蘋果全球開發者大會發布了 macOS Big Sur 系統后，趨勢又產生了新的改變，Big Sur 中應用了大量新擬態風格的 3D 效果圖標。這一波操作必然是引起了大量爭議，期間涌現出一批對這套圖標進行優化的作品，擬物的熱潮就這么被重新點燃，3D 技巧細膩而自然的表現方式必然會引起大量設計師的關注。
△ 3D 風格的蘋果系統圖標
△ Flu AR Fluent 儀表盤
△ 3D 空間展示數據
伴隨著 VR 和 AR 技術的發展，2021 年 3D 風格會更加流行，無論是從操作性，還是視覺效果的角度，3D 風格都可以產生極大的突破。得物 APP 等線上商城紛紛開通了 AR 虛擬試鞋的功能，幫助用戶在足不出戶的情況下體驗 “真實上腳” 的效果。
△ AR 試鞋的功能已經普及
△ 基于 AR 導航的線上商店
精彩的動畫故事會吸引所有年齡段的用戶，畢竟誰都年輕過，都喜歡充滿奇幻元素和大膽想象的畫面。在界面設計中加入動畫元素，使簡約的界面和有趣的動畫相結合，不僅能吸引用戶，還能增添互動時的新奇感。
△ 加載動畫可以充分發揮創意
奇特好玩的界面動效和微交互已經不算 2021 年的新趨勢了，但趣味動畫的其他應用方式仍值得我們探討。畢竟任何動態演示都能比靜態圖像或純文本更能清晰有效的傳達你的品牌故事，并讓人輕松的看進去（尤其你可能是個“閱讀障礙患者”）。
微軟的設計團隊常常用動畫技術制作宣傳片來展示公司的新產品，2020 年較為火爆的是關于 Fluent Design 的系列動畫，下面這條經典作品傳達了如何將 Fluent Design 引入到 Office 移動端軟件中，且共享相同設計元素。動畫演示巧妙的展現了新圖標元素的構成，輕快的配樂配合圖標們可愛的變形，可以單片循環一整天。
△ 將 Fluent Design 應用于移動端的動畫宣傳片
△ Fluent Design 宣傳片的劇照，采用 3D 動畫的元素
設計中的動畫應該是有目的和有意義的，不僅要賞心悅目，也要能夠解決問題或傳達概念。動畫最重要的目的是解釋、簡化和加速交互過程，讓用戶不經意間嘴角上揚。
2021 年，趣味的動畫不僅僅是一種純粹的裝飾和娛樂，其在設計中的廣泛應用將持續成為設計師們熱議的話題，好玩的動畫就在那里，看你怎么用了。
有一種工程量很大的設計趨勢，其頁面布局和交互操作都特別復雜，使用復雜的動畫、渲染、插畫，用創新的交互吸引用戶進行互動，鼓勵用戶不斷進行探索。這種風格常常被用在技術型或創意型產品的網站上，可以表現出科技感和獨特感，體現出公司或團隊的能力。
△ Nathan Riley 設計的概念網站未來反思
△ Berezhnoy Eugene 設計的數據星球
△ Senko Holographic 設計的網站首頁，鼠標移動可與頁面進行交互
采用這種趨勢設計的網站并沒有統一的風格，而是各有各的特色，每一個的交互形式都極其創新，因為制作成本較高，通常是針對品牌定制化，下面將推薦幾個優質的網站，小伙伴們可以自己去試一試。
△ 設計師 Louis Ansa 個人作品網站
△ 3D 風格的蘋果系統圖標
△ Flu AR Fluent 儀表盤
△ 3D 空間展示數據
伴隨著 VR 和 AR 技術的發展，2021 年 3D 風格會更加流行，無論是從操作性，還是視覺效果的角度，3D 風格都可以產生極大的突破。得物 APP 等線上商城紛紛開通了 AR 虛擬試鞋的功能，幫助用戶在足不出戶的情況下體驗 “真實上腳” 的效果。
△ AR 試鞋的功能已經普及
△ 基于 AR 導航的線上商店
精彩的動畫故事會吸引所有年齡段的用戶，畢竟誰都年輕過，都喜歡充滿奇幻元素和大膽想象的畫面。在界面設計中加入動畫元素，使簡約的界面和有趣的動畫相結合，不僅能吸引用戶，還能增添互動時的新奇感。
△ 加載動畫可以充分發揮創意
奇特好玩的界面動效和微交互已經不算 2021 年的新趨勢了，但趣味動畫的其他應用方式仍值得我們探討。畢竟任何動態演示都能比靜態圖像或純文本更能清晰有效的傳達你的品牌故事，并讓人輕松的看進去（尤其你可能是個“閱讀障礙患者”）。
微軟的設計團隊常常用動畫技術制作宣傳片來展示公司的新產品，2020 年較為火爆的是關于 Fluent Design 的系列動畫，下面這條經典作品傳達了如何將 Fluent Design 引入到 Office 移動端軟件中，且共享相同設計元素。動畫演示巧妙的展現了新圖標元素的構成，輕快的配樂配合圖標們可愛的變形，可以單片循環一整天。
△ 將 Fluent Design 應用于移動端的動畫宣傳片
△ Fluent Design 宣傳片的劇照，采用 3D 動畫的元素
設計中的動畫應該是有目的和有意義的，不僅要賞心悅目，也要能夠解決問題或傳達概念。動畫最重要的目的是解釋、簡化和加速交互過程，讓用戶不經意間嘴角上揚。
2021 年，趣味的動畫不僅僅是一種純粹的裝飾和娛樂，其在設計中的廣泛應用將持續成為設計師們熱議的話題，好玩的動畫就在那里，看你怎么用了。
有一種工程量很大的設計趨勢，其頁面布局和交互操作都特別復雜，使用復雜的動畫、渲染、插畫，用創新的交互吸引用戶進行互動，鼓勵用戶不斷進行探索。這種風格常常被用在技術型或創意型產品的網站上，可以表現出科技感和獨特感，體現出公司或團隊的能力。
△ Nathan Riley 設計的概念網站未來反思
△ Berezhnoy Eugene 設計的數據星球
△ Senko Holographic 設計的網站首頁，鼠標移動可與頁面進行交互
采用這種趨勢設計的網站并沒有統一的風格，而是各有各的特色，每一個的交互形式都極其創新，因為制作成本較高，通常是針對品牌定制化，下面將推薦幾個優質的網站，小伙伴們可以自己去試一試。
△ 設計師 Louis Ansa 個人作品網站
△ 注重設計與科技結合的團隊 Letters
△ 科技公司官網 Farm
體驗后你會發現這類網站的視覺效果大多很驚人，交互方式充滿想象力。為了實現效果，團隊會產出高質量高標準的設計、投入大量的研發成本。當然，成也蕭何，敗也蕭何，特別的交互使頁面邏輯與我們常用的網站大相徑庭，吸引眼球的視覺使頁面繁瑣花哨，會導致信息難以順利傳遞至用戶。這違背了可用性原則和無障礙設計理念，如果想要使用這樣的方式設計產品，一定要在創新和可用性中找到平衡點。
在這個新時代，社會發展十分迅速，整體節奏都很快，互聯網產品的操作效率需要隨之加快，用戶體驗的每一步流程都要仔細斟酌，是否還能再精簡一些、再快捷一些，我們的目的是幫助用戶更的完成目標，因此輕量化體驗必然是永恒的課題。最明顯的例子就是登陸功能的簡化，從早期的賬號密碼，到后來的驗證碼登陸、第三方賬號登陸、人臉識別登陸，用戶已經不需要記住密碼，也不需要一步一步的輸入信息，一切都變得更加快速、更注重實用性。試想會不會有一天，人們一出生就得到一個永久賬號呢。
△ Surja Sen Das Raj 設計的極簡風 APP
不光是交互操作，界面的視覺風格也正朝著輕量化設計的方向前進，如果你一直在留意 Dribbble 熱門作品，會發現大部分都具備簡潔清爽的特點。極簡的配色和核心功能的突出，可以幫助用戶聚焦于重點信息；同時，我們可以結合信息層級的整合來降低用戶的外在認知負荷，進一步減少用戶的學習成本，使用戶更容易集中注意力；不僅如此，我們還可以適當為核心元素添加一些微動效，使界面更具有溫度感的傳遞操作反饋。
△ Akshay Devazya 設計的求職 APP，注重頁面 Z 軸的空間感
△ Dmitriy Kazarov 設計的極簡風官網
△ Choirul Syafril 設計的云存儲后臺界面
△ 可愛的微動效交互
隨著科技的飛速發展，輕量化可能是未來各個行業產品設計的趨勢。以游戲行業為例，從早期風靡的單機游戲到現在隨時可以面對面開黑的手游，主流玩家漸漸將自己的游戲陣地轉移到手機上，無論是畫面精致度還是游戲流暢感，手游都可以提供優質的體驗，今年火遍全球的游戲英雄聯盟也發布了手游版本。還有一個輕量化的案例，就是我們的小程序，微信、支付寶、百度紛紛發布了自家的小程序，我們已經可以在一個 APP 里使用多家公司的產品功能了。
設計趨勢是循環的。用戶體驗設計的新趨勢每年都會推陳出新，但也有很多趨勢，幾年后又會卷土重來，這也是為什么復古總會成為一種潮流。設計是手段，不是目的。 比起緊隨潮流，更重要的是理解趨勢背后的價值和意義， 創造有價值的設計作品，趨勢就會成為你的那陣東風。
文章來源：優設網 作者：TCC設計情報局
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
完美，不是因為沒有什么可以增加，而是沒有什么可以減少。
創建美觀、可用和的 UI 界面需要花費時間進行設計細節的打磨，本文從視覺和情感化設計兩個方面來說說如何提升 UI 設計的高級感。
在互聯網產品日趨成熟的今天，你會發現所有的 App 越來越像，似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重，使得設計不精致，產品沒有氣質和品牌感。一個 App 設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的 UI 設計。本節總結了 12 個簡單直觀的提升設計感的小細節，一起來學習。
在對 UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。
每種顏色都有一個視覺權重，這有助于在內容中建立層次結構。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在 UI 設計的時候，通常兩種不同的字重足以營造出優秀的層次感：
大多數的文本采用正常的字重（400 到 500，具體取決于字體）
對于需要強調的文字采用較重的字重（600 到 700，具體取決于字體）
△ 主標題字重為600，其他標綠點的文字字重都為400
應當盡量不要讓正文部分字重低于 400，因為這一部分字體本身尺寸已經較小，低于 400 會使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。
灰色文字在無彩/彩色背景下要分開處理
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
△ 左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相的顏色
其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。
選擇一種基礎色，再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。
陰影是 UI 設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。
這種輕柔的陰影呈現出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。
陰影不一定是黑色的，還有一種擴散陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。在 UI 設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。
合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。
標簽欄作為一個 App 的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。通常，大多數 App 都是使用 iOS 規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了。要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。
3D 立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。
Tab 是 App 設計中最常見的控件之一，它源自 Material Design 的設計規范?，F在很多 iOS 產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于 iOS 規范當中的分段選擇器變得不那么常見了。
在視覺表現形式上，Tab 和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。例如蝦米音樂的 Tab 選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的 Tab 就被創造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為 Tab 選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到 Tab 的設計上，既讓界面視覺，又進一步強化了用戶對品牌形象的認知。
在 UI 設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
使用陰影
陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內容更聚焦。
使用不同的背景色來區分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。
增加額外的留白
創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是 UI 設計中的常用手法。
在 App 中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀。這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。
選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數 App 的設計需求。但會出現一個問題就是，系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運動類 App 中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。
大多數 App 都支持三方登陸，他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計。一個設計精致的 App 不應漏過任何的細節，我們可以以自家 App 的圖標風格為依據，對第三方圖標進行優化設計。
App 中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經?？吹轿淖织B加在圖片背景上的設計樣式，為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。
圖片的質量影響著整個 App 的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想。而低品質的圖片會瞬間拉低 App 的質感。在 App 設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。
現在的 UI 界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率。同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。
心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時，使他產生情感的變化，那么產品便不再冷冰冰，他透過眼前的東西，看到的是設計師為了他的使用體驗，對每一個魔鬼細節的用心琢磨，人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面，這些簡單而美好的設計細節充滿了積極情緒，它是滿足產品的功能性和易用性之后，追求更高層次的目標。
1. 提示性文字
語言是情感化設計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用戶的好感，賦予產品的新的生命力。例如 App 那些 push 推送通知，因為用戶每天收到的 PUSH 實在是太多了，早已心如止水！這個時候，你就需要一條成本低、效率高的 PUSH 文案，去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣，讓人看到會心一笑。
2. 下拉刷新
下拉刷新是用戶在 App 使用中經常進行的操作，常見的下拉刷新設計是圖標加文字的形式，這種設計簡單、直觀，但毫無設計感，不能引發用戶任何的情緒。
下拉刷新是一種臨時狀態，豐富它的設計細節不會造成與產品界面的格格不入，相反，一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如 uc 頭條在下拉刷新時會蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內容，小鹿形象延續了品牌 logo。作為資訊類產品，內容更新速度至關重要，奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感，瞬間就讓下拉刷新變得生動有趣。
3. 頭像設計
個人中心頁與用戶信息密切相關，用戶的虛擬形象在這里得以展現，常見的設計是一個用戶頭像加登陸文字的形式，這種默認的頭像設計無法得到用戶的認同感。
現在很多的產品已經放棄了死板的默認頭像，給用戶更多的選擇。賦予產品一些人格魅力，可以讓產品富有生命力，消除人機界面的冰冷交互，幫助用戶和產品建立友好的聯系。例如美團外賣和躺平，它們各自的身份都代表了產品的氣質和用戶的屬性，讓用戶產生一種身份的認同感。
4. 缺省頁化解負面情緒
通常狀態是，當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式，這種簡陋的設計會給用戶心理造成很大的落差，陷入負面情緒中。情感化設計在此時就可發揮巨大的作用，它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大，根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景，讓用戶會心一笑，使產品充滿了趣味性。
5. 標簽欄微動效
情感化設計變得越來越豐富，圖標設計上升至可以展示動畫效果。通過動效的使用，標簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調。精心設計的動態效果，能夠緩解用戶等待時焦躁的心情，從心理上縮短用戶等待時長，讓品牌更加深入人心。
6. 模擬用戶行為
如果一個產品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化，播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。
情感化設計可以拉近用戶與產品之間的距離，在更深的層面體現出對人性的關懷，為人們帶去情感上的愉悅和感動。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產生了。例如當你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預知了你發截圖的需求。
再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時，你會發現影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。
7. 有趣的細節設計
俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發交流進而讓人們產生積極的情緒。 在 UI 設計中，有些有趣的設計是隱形的，需要用戶自己去發現，當用戶找到這顆彩蛋時，就會獲得一份喜悅和樂趣，增強用戶對產品的探知欲。例如在電腦端打開 B 站的鬼畜區長按這個返回圖標 10 秒左右，你會打開鬼畜區的新世界(⊙o⊙)（友情提示：記得戴上耳機或調小音量）其實長按「返回頂部」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母，發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕！
有些有趣的設計又是顯性的，目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的 ID 在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕，讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性，一方面也豐富了彈幕區的多樣化，可謂一舉兩得了。
總的來說：UI 設計的“高級感”意味著在視覺層面要從細微之處著手，創造出精致富有設計感的畫面；另一方面要從情感化設計出發，使用戶與產品產生情感上的共鳴，獲得更高層次的使用體驗。
好的學習方式就是把日常積累的知識點匯總并講出來才能真正為自己所有，新的一年愿每位設計師都能繼續保持對設計&生活的激情和熱愛。希望這篇文章對你有所幫助。
文章來源：優設網 作者：印跡
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
引人注目的UX設計背后的心理學
每天，您都會在線訪問多個網站。他們中的一些給人留下了積極的印象，而另一些則使您在數毫秒內按下了后退按鈕。您最終從一個網站購買了產品，而不是從競爭對手那里獲得了產品。是什么引導這種行為？您為什么對某些網站感到滿意卻卻避開其他網站？
這樣做的主要理由之一是在用戶體驗設計中實施心理學。您喜歡的網站聘用的UX專家知道如何在與網站交互的每個階段觸發心理反應。在線心理學的使用是成功的，因為我們在人類生存的幾個世紀中獲得的某些進化特征在我們每天與世界各地的互動中仍然發揮著重要作用。
本文介紹了一些常見的UX元素以及它們背后的心理思維。
有關服務或產品的建議
例如，當您在機票預訂網站上時，會在預訂完成之前或之后獲得有關酒店，餐廳或旅游選項的建議。在許多情況下，如果價格足夠誘人，人們就會繼續預訂酒店或在餐廳預訂。當您搜索抵押貸款時，同樣適用，并且您還會獲得有關債務管理或退休計劃的建議。
圖片：Skyscanner
這是一種稱為“預期設計”的UX創意。目的是根據您在網站上查看的內容來建議您最可能需要的其他內容。這個設計思想是基于當我們在互動中感到被理解時更快樂的心理原理。這在所有領先的電子商務門戶網站上也可以看到。
圖片：Flipkart
這種UX設計的一種變體是在許多網站上延遲顯示彈出框以進行加價銷售或潛在客戶。這也是可以預見的，因為它基于這樣一個事實，即許多用戶直到從站點上花費的時間中獲得了一定的滿意，才會對彈出框的內容不感興趣。
顯著性原則是另一個鼓勵用戶體驗設計決定的心理原則。它說人們將注意力集中在當時與他們最相關的事物上。因此，正在尋找飛往夏威夷的廉價航班的度假者將很高興看到提供經濟實惠的住宿，甚至為他們的旅行提供融資選擇。僅登陸頁面以讀取癥狀的用戶將僅關注頁面的內容，而不關注訂閱彈出窗口。
限制用戶選項
您選擇的網站比強迫您跳過五個菜單來查找相同內容的網站更容易找到。這是因為我們發現很難做出決定時，有太多的選擇。這是基于?？硕傻男睦碓恚哼x擇的負擔。
圖片：Apple
最好的UX設計人員了解這一點，并確保用戶可以找到所需的信息，產品或服務而不會感到不知所措。
搶眼設計
圖片：例如葡萄酒
如果網站或應用程序的設計精美（根據用戶的描述），則立即導致對品牌的有利傾向。這是一種心理原理，稱為審美可用性效應。如果您的網站漂亮，那么普通用戶就會相信它比同一個利基網站的其他功能更實用，更值得信賴。關于吸引力的這種偏見也可以在離線狀態下看到，因為研究表明，更具吸引力的人被認為比其他人更有能力和更友好。
此外，引人注目的設計可能使人們忽略網站或應用程序上的其他缺點。頂尖的UX設計人員花費必要的時間來獲得任何項目的最佳美學效果也就不足為奇了。
醒目的顏色口音
圖片：Paypal
諸如Trustly，PayPal，FreshBooks之類的品牌，以及您日常遇到的許多其他品牌都使用顏色強調點，以使您的眼睛指向CTA按鈕，注冊表格等。網站上的主要顏色為藍色時，它們使用綠色，紅色或黃色來表示突出這些區域，它會起作用！這些網站的任何訪問者都可能會錯過頁面上的其他內容，但會看到這些部分以獨特的口音仔細突出顯示。
這是基于赫德維格·馮·雷斯托夫（Hedwig von Restorff）的心理對比原理，即人類更容易記住那些與其周圍環境脫穎而出的東西。有趣的是，沒有顏色被認為是最有影響力的。UX設計人員只需確定主導的顏色主題，并使用不會混入背景的另一種顏色作為重點選擇。
產品差異化價格計劃
這也稱為“金發姑娘”定價技術。企業使用這種技術來銷售“中檔”產品。當您四處尋找虛擬主機計劃時，您可能會看到更多。提供商通常列出三到五個訂閱計劃，并將中間計劃突出顯示為“受歡迎”或“熱門”。
圖片：Acowebs
許多人立即分析出最昂貴的計劃和最便宜的計劃，最終選擇了所謂的中端計劃。這是因為他們將其視為最高價值計劃和入門級計劃之間的完美中間地帶。有趣的是，這些中端計劃的價格沒有像其他任何人一樣受到嚴格審查，這使得它們成為提供這些品牌的品牌中最賺錢的。
這種定價技術之所以有效，是因為它基于取景的心理原理，該原理強調了人們在做出購買等決策時如何避免極端情況。它還顯示了選擇的呈現方式如何影響決策過程。
其他領域的更多用戶體驗設計師正在采用這一原理?，F在，各種電子商務商店都提供多層定價結構或提供價格不同的相似產品。大型科技品牌也不例外。他們可能是這一原則的最大受益者之一。因此，下一次您發現自己忽略了中端選項規格，規格稍高但仍低于最貴機型的三星Galaxy設備時，您就知道了！
這是另一個例子。
圖片：SEObirth
限時優惠
電子商務網站已經完善了使用限時報價創造產品需求的技巧。一些品牌會聲明要約/產品“僅在接下來的X天內可用”，而其他品牌如亞馬遜將顯示詳細信息，例如“僅剩5個庫存”。無論哪種樣式，兩種策略都旨在引起您的相同反應：緊迫感，因為該產品很快將不再可用。
圖片：亞馬遜
這是基于稀缺性的心理學原理，該原理指出，與到處都有的物品相比，我們傾向于更加重視稀缺或不可用的物品。一個1975年的研究證實了這一原則。研究人員將相同類型的曲奇放在兩個罐子中，但是第一個罐子有10個曲奇，而第二個罐子只有兩個曲奇。研究參與者對第二個罐子的評價高于第一個罐子。
研究還發現，人們對以前豐富但現在稀缺的產品的評價要比總是稀缺的產品更有價值。經濟學專業的學生不會對此感到驚訝，因為可用性的下降總是會觸發需求的增長。
除電子商務網站外，其他具有在線形象的品牌也采用稀缺性原則。出售在線課程的企業家強調諸如“僅適用于前10名學生”，“一周內結束”之類的術語。其他人則為采取特定行動的人們提供獨家利益，例如提交電子郵件地址，支付服務費用等。 。
當品牌試圖銷售“限量版”產品時，該原則也可以在離線營銷中看到。
UX設計師之所以采用這種技術，是因為他們知道，即使產品或服務沒有迫切需求，人們在產品或服務稀缺的情況下也會注意。
推薦書的戰略定位
圖片：ElegantReports
有沒有想過為什么許多產品或服務網站的主頁上都有推薦？為什么在做出購買決定之前總是要尋找推薦？這是因為社會證明的心理學原理。
當我們對任何事情都持懷疑態度時，我們會尋求同行的指導。這就是為什么您會發現人們在選擇公司之前先在社交媒體上要求評論特定品牌的原因。在1969年社會科學實驗強調了這一先天行為。研究表明，如果已經有足夠的人參與，人們至少可以說服人們注意某些事情。
除了推薦之外，UX設計師還通過炫耀可信賴的從屬關系（例如SEO專家從事的業務或以作家為特色的博客）來結合社會證明原則，訂戶數量，帖子中的股份數量以及產品的等級或服務，甚至獲得的獎勵數量。
圖片：Acodez
電子商務商店通過顯示名為“客戶也已購買的商品”的部分來使它更進一步，以突出顯示可能會使用戶感興趣的流行產品。
突出贈品
圖片：皮特和佩德羅
如果您免費提供某些商品，在線用戶現在或將來更有可能從您的品牌購買商品。這是基于互惠的心理原理。這就是為什么許多UX設計師強調任何交易的原因。
如果您要購買新鞋，則更有可能選擇在其網站上提供“免費送貨”的品牌。同樣，您也可以在提供免費指南或免費咨詢的登錄頁面上提交聯系方式。
UX設計師結合對比和互惠的心理原理來創建高度轉換的頁面。
結論
達到既定目標的引人注目的UX設計并非偶然。最好的設計師知道，在線成功的關鍵是要吸引一般用戶群的基本本質，他們會運用心理原理來實現這一目標。人類的在線行為是可以預測的。結合心理學和用戶體驗設計，您的品牌可以產生更好的結果。
文章來源：UI中國 作者：Shawn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在互聯網公司中，運營Banner往往是由不同的運營團隊去完成，甚至在一些跨國企業，運營Banner是由不同國家的運營團隊完成的。那么如何保證大家輸出的運營Banner在保證視覺沖擊力的同時，還能輸出以及體現統一的設計語言呢？甚至不用設計師也能輕松替換Banner組件？想要解決這種難題的最好方法就是設計Banner組件庫，Banner組件庫的四大優點能夠完美解決以上的問題。
根據設計師個人及每個公司業務的不同需求，我一共把Banner組件庫分為兩大類別：
1. 設計師及設計團隊操作的Banner組件庫：
這類組件庫面向的操作人群是設計師，僅有設計師才對其有操作權限：
案例部分效果演示：
2. 非設計師操作的Banner組件庫：
這類組件庫面向的操作人群是非設計師人員（運營、銷售、子公司員工等），是設計師根據運營的需求特制的Banner組件庫。
我當時制作這個組件庫的原由是因為母、子公司經常都會有相同的模板化設計界面替換，而每次替換都需要花費設計師很多零碎的時間，所以我們干脆就直接設定好Banner組件庫，讓運營人員自行替換，我們先教會母公司的主運營操作流程，主運營再去負責子公司的操作流程培訓，這樣一套下來省去了運營人員與設計師的溝通及修改過程，運營人員可直接輸出成品，從而提升了整個團隊的生產力，也讓設計師專注于設計上的創意與用戶體驗。
案例部分效果演示：
不管是建立哪一類別的Banner組件庫，想要設計好它，那么首先就要清楚的了解Banner中的基本構成以及設計原則，從底層邏輯出發去構建Banner組件庫，我構建Banner組件庫的思路主要依據以下四大知識點：
Banner層級拆分的主要目的是為了組件的設定，我們通過層級拆分可以有規律的把每一個層級都設置為可替換選項，在Banner組件庫中可分為5個層級：
案例：
在組件化的Banner設定中，我們可以用點、線、面來劃分畫面的整體層面，我們要羅列出哪些層級是用點來表達，哪些層級是用線或面來表達，這樣不僅有利于組件庫的快速建立，也有利于Banner整體畫面的視覺表達。
點、線、面是相對存在的，點可能在畫面中成為線、面，線也可能在畫面中成為點、面。
“點”越大就可能會變成“面”，“點”發生規律性變化也可能成為“線”。
當“線”在畫面上顯得短小時，可以把它看成“點”，當把“線”加粗一定程度，那么我們就會把它看成“面”。
當“面”成為未封閉狀態時就會成為“線”，當“面”在畫面中的比例縮小時我們可以把它看成“點”。
我們在組件Banner時要事先把層級的點線面歸納好，這樣才不會在我們設計相同元素時出現雜亂的現象，層級與點線面的常規關系圖如下（這樣的常規組合關系有利于建立組件庫）：
需要注意的是在Banner組件庫中點綴層與標簽層并非一定要存在于Banner中。
Banner的版式復雜多樣，而我們的組件庫想要達到輕量化，所以更適用于下面三種常規的版式，如下：
組件庫的建立必須遵循Banner設計五大原則：對齊、統一、對比、留白、結構平衡。
對齊
Banner的內容都要有一個對齊的準則，特別是文案層面，每個元素都有自己應該處于的位置，要有秩序化，才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊，建議一個板式只使用其中一種對齊方式。一個小小的Banner版面，如果使用了多種對齊方式，實際上在用戶看來這些信息都是零散的，增加了認知成本。
統一
字體以及字體顏色最好不超過兩種，內容元素設計風格也必須一致，太多容易導致內容雜亂，干擾過強。
對比
了解各項信息的權重大小，重要的信息要加強顯示，次要信息可以弱化。
留白
要為Banner留出一定空間，讓Banner多一些呼吸感，這樣也更容易聚焦重要信息。
降噪原則
在Banner設計中不要使用過多的字體、顏色或者過于復雜的圖形，這種不斷做“乘法”的行為，實際上是在增加用戶認知的“噪音”。
字體使用規范
在字體的使用中，我們要確定字體類型以及字體的大小。
顏色使用規范
為了保證Banner擁有較強的適應性，我們可以不規定精準顏色，用顏色明度的使用區間來代替。(顏色規范僅限于主色調，并不包含特殊用色：如標簽、點綴元素)
版式說明
制定版式的整體尺寸、元素間距、排版、字數限制。
設計師應用的Banner組件庫可以用Sketch制作，也可以用Figma制作。
如果是用于外包設計或公司設計師僅有一人，那么建議用Sketch制作；如果設計團隊人數較多，那么建議用Figma，我這里就用SKetch給大家講解一下制作流程。
第一步：根據層級與點線面設計Banner中的元素
第二步：把每一層級的元素組件化
在Sketch中只用選擇想要組件的圖層（或組），點擊按鈕即可立即生成組件，如下圖：
在組件層級時我們需要注意從哪里開始，到哪里結束。例如我做的這個寵物Banner案例，第一層是Banner樣式切換，接著才是樣式里面的層級切換，并不是把內部所有層級都組件完后就結束了，可能層級中還存在更多的小組件切換，比如在樣式2中我沒有把點綴層合成一個組件切換，而是分為三個組件切換，甚至在三個切換里你還可以設置它們的顏色切換，全部設置完后這樣才算真正的組件結束，下面是我組件的層級圖：
第三步：設計可替換組件
在完成元素組件化后，我們就可以在組件庫里添加更多可替換組件的樣式，添加方式如下圖：
當把可替換的組件全部設計完后就可以使用了，如果發現內容不夠用還可以往內部再次添加，下面是Banner樣式1的切換效果展示：
Banner樣式2的效果展示：
注意要點：
運營人員應用的Banner組件庫的建立需要用到的軟件是PS與Excel。
在設計這類組件庫時我們一定要多從操作人員的角度出發去設計，最簡單化，下面案例來自于之前在老東家做的PS組件。
第一步：根據層級與點線面設計Banner中的元素
第二步：設計可替換元素組件
在設定前我們需要了解以下幾點知識：
通過以上4點可以得知我們需要設計的元素僅僅只有背景圖片，而其他元素可以通過變量來達到效果，下面是設計的4張不同顏色的背景替換圖：
第三步：定義變量元素
只是給需要變量的元素打標簽，具體該如何變量在第四步
定量步驟：選擇想要定量的圖層-圖像-變量-定義
注：PS會自動識別定量元素，如果是組，那么只有可見性選項（可見性選項的意思就是可顯示可隱藏）；如果是圖片，則會多出像素替換（替換圖片）；如果是文字則會有文字替換（替換文字）
在定義時為了避免操作錯誤，定義名稱就為圖層名稱，定義完成一個就按“下一個”按鈕，直到全部定義完成再按“確認”按鈕，案例中的Banner一共定義了6個元素，分別為商品圖（像素替換）、商品名（文字替換）、原價（文字替換）、優惠價（文字替換）、特價標（可見性）背景圖（像素替換）
第四步：制作Excel表格
我們所有的數據修改都是在Excel里面進行的，Excel表格制作非常簡單，第一排為定義的名稱，我們只需把剛才定義好的6個名稱輸入到表格的第一排。
如上圖，建議大家多加入一個編號定義，在PS里把編號定義的圖層隱藏就行了，目的是為了選取數據組時更直觀，操作如下：
除了第一排，下面的排列都是輸入性定義，如果要改變商品名的文字，就可以在下方輸入修改的文字；
如果要替換圖片，就要輸入替換圖片的名字及后綴，僅支持png與jpg格式的圖片，并且圖片必須與源文件在一個文件夾內。
如果要顯示或隱藏某個元素，那么就可以輸入大寫的“TRUE”或“FALSE”。
當把表格信息都填完后，最后一步就是把表格存為.csv格式。（注：.csv文件必須與PS源文件、圖片文件存在于同一文件夾內）
第五步：導入操作
當全部設定完后，我們就可以在PS內導入切換不同的數據應用。
操作路徑：圖像-變量-數據組-導入數據組-選擇數據-應用-確定
這五步下來我們的Banner組件庫就順利完成了！
特別提醒：避免運營人員操作失誤，建議把PS內部的所有圖層鎖定。
第六步：培訓運營人員
通過上面的組件建立，運營人員只需添加Excel文件的子列表，并在PS選中導出即可完成操作，可以讓運營人員把PS看成圖片導出工具，可以非常輕松的完成。（機械化流程）
因為考慮到運營人員可能無法理解設計邏輯，所以很可能會出現操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導運營人員操作。
下面是員工PDF操作步驟圖示：
Sketch組件庫源文件：
PS、Excel組件庫源文件：
下載鏈接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼：e3li
文章來源：優設網 作者：黑獅力
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn