引人注目的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設計并非偶然。最好的設計師知道，在線成功的關鍵是要吸引一般用戶群的基本本質，他們會運用心理原理來實現這一目標。人類的在線行為是可以預測的。結合心理學和用戶體驗設計，您的品牌可以產生更好的結果。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
在這艱難又魔幻的2020年的尾聲，有必要系統匯總下關于UI/UX的設計發展方向，為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時，分析特點并舉例落地實例，來幫助大家啟發創意設計工作的思考切入點。
流行趨勢跟人們所處的環境密切相關，從最初的方塊馬賽克——>追求極度寫實——>扁平風——>到現在的質感擬物，扁平設計霸屏的這幾年，設計風又向更立體、豐富、更有層次感的方向發展，所以說趨勢就是一個輪回。設計風格沒有絕對的好壞，在審美達到一定疲勞時，就會開始出現新的設計風格。每一個新風格都值得設計師去拆解、思考，本質都是為了提升更好的交互體驗。
而在進入下一個十年的過程中，我們對數字產品和體驗的依賴將日益增長，預測真正勝出的將會是3D動畫和用戶界面/用戶體驗設計的結合設計，5G技術的發展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創意、鼓舞人心的發展階段。在這里讓我們來看看未來那些不可忽視的設計趨勢吧。
（注:圖片來自網絡，均標明出處及作者，若有侵權請告知刪除）
1、3D與UI結合
隨著且易用的3d軟件工具的出現，3D 元素已經開始變得越來越受歡迎，而在這之前，UI界面一直被平面設計所主導。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動效、電商到平面視覺，在所有的設計類型中都能找到它，3D現實主義已是各個領域的大勢。
圈中也出現了很多免費或付費的3D預設元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點：
? 直觀感受；
? 立體真實；
? 形態豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實例應用：
各大廠都開始紛紛嘗試在產品中加入3D元素，將自家IP立體化，植入到各個品牌靜態頁面，加深品牌印象滲入。3D技術雖然已經出現有一段時間了，但是為了保證速度和性能表現，較少應用到產品中，隨著軟件技術的提升，立體渲染產品將開始慢慢運用到更多的界面交互、H5活動中。
▲閑魚、QQ、花椒直播的3D啟動頁
▲得物（毒）的3D空間動效
網易云音樂每年的音樂總結報告都追隨著的設計潮流，今年還可以自由選擇人物形象，增強了用戶的主觀代入感，以下是每年的設計風格變化：
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結陳詞H5
▲總結報告Banner的動效
其中IP立體化最多的當屬K12教育領域，除了制作IP周邊外，3D效果能適應豐富的運營場景，高度還原現實世界，給小朋友帶來最真實的學習互動體驗。
▲洪恩識字（3D學習場景）、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時的互動
值得一提的是今年蘋果發布的macOS Big Sur除了玻璃擬態的變化，圖標還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機交互指南中也明確指出：“圖標不僅是裝飾性的，而且在與用戶交流中起著至關重要的作用，它應該傳達應用程序的主要目的并暗示用戶體驗?！边@次扁平化和擬物化的結合，將又要引領一波設計趨勢。
2、軟漸變（Soft gradients）
過于強烈的漸變不再是趨勢，大多數設計師都開始喜歡使用非常簡單和微妙的漸變，如果產品的目標用戶人群需要輕松溫和的視覺環境，那么此風格再適合不過。
軟漸變包括背景、陰影、反光，常與線條平面圖形結合，應用于界面、網站、圖標、icon等設計中。
特點：
? 低調溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設計網站中我們已經看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創造多彩的模糊背景。它使設計看起來非?，F代、不打擾、清新而令人愉悅，其中畫面內容是主要視覺焦點。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實例應用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標設計中經常需要漸變或陰影來塑造物體，柔陰影使設計元素更豐富立體，并且它們有助于區分內容之間的層次結構。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實例應用：
▲有道數學（已下架）
▲Uki
3、玻璃擬態（Glassmorphism）
去年新擬態掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現問題，新擬態更適合用在局部的少量元素點綴，無法完整地使用在整套應用程序中。
▲Alexander Plyut
伴隨著今年蘋果發布的 MacOS Big Sur 操作系統的發布，新的擬物風格正式回歸大眾視野，整體風格應用了新擬態（Neumorphism）的設計思路，利用大量的毛玻璃質感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur的圖標也加入了 3D 質感設計，設計語言更為時尚簡潔。蘋果設計師 Alan Dye 在發布會上也提到了設計風格轉變的原因，主要是希望「降低視覺的復雜度，讓用戶能夠將注意力集中在內容上」。
而的玻璃擬態則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質感，模糊的邊界有細微的淺色邊框，整體效果就是讓元素之間有虛實結合的特殊空間。毛玻璃運用在界面中對關鍵信息起到強調作用，用戶可以看到物體間的層次關系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。
特點：
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領新擬態風格的Alexander的作品也朝著玻璃擬態變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實例運用：
▲毛玻璃視覺可追溯到2007年發售的Windows Vista，而當時的 OS X Yosemite 也大量使用了這種設計語言
▲的MacOS Big Sur操作系統
▲圖標的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時分。之前用了很長時間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經常提到的夜間模式是有區別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設計，重在降低對比度，以降低在暗光環境下屏幕對人眼的刺激。
特點：
? 突出內容
? 減輕干擾
? 沉浸體驗
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實例應用：
▲有道詞典
▲愛范兒（ifanr）
最常使用暗黑模式的車載系統：
▲小度車載
暗黑模式的靈感最早引起大家注意的應該是抖音，在這之前大部分的應用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的，在這之后也相繼出現了以黑色為主的APP設計：
▲MOO音樂(可手動切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風格，我個人就非常喜歡熒光色，現在要是談到該風格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風格已經成為清新、酷炫、數字時代的代名詞，而在2021一趨勢還將會繼續影響UI、平面、廣告、插畫等領域。
特點：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網站設計中的應用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實例應用：
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀初開始，抽象構成中的簡單幾何形狀就已經用于視覺藝術中，多用于主背景主題或色彩細節，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設計看起來既規則又有趣。
幾何圖形可以運用到UI設計中 ，將它們混合在一起以創建馬賽克的效果，形成具有品牌意向符號的記憶點。
特點：
? 規則組合
? 品牌印象
? 重復記憶
▲Johnny Nova
▲Vladimir Gruev
實例應用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風格，那就是SHINee的正規六輯合輯《‘The Story of Light’》，采用紅黃藍三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當然，幾何形狀不止用于色彩圖案細節，在UI界面布局中經常使用大塊面圖形，這種設計方法受到越來越多的關注。
7、極簡風
極簡設計的前身是2010年代中期精巧又花哨的設計，這種設計已經存在很長一段時間了，但在2020年，人們每天需要消化的信息量越來越多，所以現在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。
特點
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會涉及到無鍵趨勢，因為按鍵越少就意味著設計越簡潔，而這種簡化過的設計將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實例應用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應用到UI中
在 2020 年，信息的觸達的速度將會變得更快，而視頻是很好的載體，各個年齡段的用戶都喜歡觀看引人入勝的動畫，無論是選擇通過短視頻還是電影的方式來推廣產品，都很好地灌輸品牌理念，建立與受眾群體的關系，加強用戶忠誠信任感。
特點：
? 營造氛圍
? 類型多樣
? 品牌調性
▲Fireart Studio
▲Ehsan Rahimi
實例應用：
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術插圖從2017年開始到現在仍然很流行，幾乎適用于任何類型的設計行業，是設計領域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產品背后的故事，為了把故事講好，我們可以創造出一個品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產品問題。這是在產品設計中講好故事的基礎，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經看到了3D與插畫的結合，藝術家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細節和質感都放大到了熒幕上，在劇中還采用對比強烈的大色塊擴大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經典線條
▲Entei Ryu在3D建模使用插畫質感
▲Minh Pham ?在ui界面中的嘗試
實例應用：
騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個風格之間來回切換，給我們帶來了一個多元的音樂世界。各大視頻網站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強互動性，而3D插畫與動效的結合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。
10、更多的微交互動效
最后一點，還是要強調動效在UI中的的作用，微交互最早出現在 2018 年，讓用戶更好地理解系統如何工作，并在引導其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設計中決定了一個 App 或網站是普通還是優秀，從點擊反饋、加載等待、導航交互等等，為用戶界面設計增加了動態性，交互性和直觀性。
動效起到的作用：
? 引起人們對應該做什么或接下來將要發生的事情的關注；
? 創造流暢和視覺愉悅的過渡；
? 帶給使用者美觀的享受；
? 指導我們進行復雜的操作；
? 確認用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實例應用：
▲GoFun選擇車輛后的頁面轉場動效
結尾：
2020的趨勢在滿足用戶的美學要求上，側重內容和感情表達，還會根據不同設備載體、新的技術而變化，為用戶提供的豐富體驗。
借用Adobe設計副總裁 Jamie Myrold 的一句話：如今設計師要思考的，絕不僅僅是設計一款App、網站或設計工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設計。
設計趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術，每個設計人員都可以找到自己喜歡的方向，不管哪種趨勢，最重要的是如何學習并合理地運用到產品中，以產生最大的設計商業價值。
文章來源：UI中國 作者：_阿丹a_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
使用柵格系統很有幫助，它有助于在不同布局之間保持一致性，并加快設計決策的速度。柵格可更地控制不同屏幕尺寸之間的對齊方式及布局。本文重點介紹響應式柵格的重要知識點，以及產品設計師如何在設計工作流中調整柵格。
柵格由3個主要組件構成，包括列、槽和邊距。
列是虛構的垂直塊，用于對齊內容。我們用百分比（％）或固定值定義列寬。
柵格中的列
它是列與列之間的空間，有助于分隔內容，我們將槽的寬度定義成固定值。
柵格中的槽
邊距是內容和屏幕邊緣之間的空間。我們將邊距寬度定義為固定值，該值決定每個屏幕尺寸的最小空間。彈性邊距指的是列，槽和側邊距組成柵格后剩下的空間，它會根據不同的屏幕尺寸而變化。
柵格中的頁邊距和靈活邊距
信息內容（圖像，文本或UI元素）常常會被放置于可見和不可見的內容塊中。可見內容塊具有明顯的邊框或填充區，而不可見內容塊則不具備，多數是透明底。可見的父級內容塊包括卡片，橫幅等組件。
卡片形式的可見內容塊
不可見的內容塊包括文本或功能按鈕。
內容塊應與列的邊緣對齊，避免與槽邊緣對齊。內容塊中的信息是獨立的，不一定非要與列對齊。
內容塊的列對齊
用于構成柵格的列數稱為列結構。8、12、16和20是用于響應式布局的一些最常見的列結構，設計師可以根據設計要求選擇具體結構。
8/12/16/20列柵格結構
12列結構是最靈活的，它可以進一步分解成為4–4–4或3–3–3–3大小的內容塊。
當屏幕尺寸到達響應點，那么頁面布局也會有對應更改，以實現最佳的布局視圖。列結構，列寬，槽寬度和邊距都取決于響應點。內容塊則根據不同的響應點堆疊或縮放，以重新調整獲得最佳視圖。
柵格縮放和堆疊
如果較小的屏幕具備足夠空間來呈現，其實縮小比例就能展示完整了。如果屏幕實在是太小，就會垂直堆疊成一列。
柵格有3種呈現形式，一起來看下吧！
固定柵格有固定寬度的列以及頁面邊距，且固定的柵格具有固定的內容塊寬度，該寬度在響應點范圍內不會出現變化，并且頁面邊距會占據剩余的空間。
固定寬度柵格
流動柵格列的寬度是不定的，但槽和頁面邊距都是固定的。流體柵格具有靈活的內容塊寬度，該寬度根據屏幕大小來變化。流體柵格中，列會隨著可用空間變大或是縮小。
流動柵格
混合柵格同時具有流動寬度和固定寬度。在現代布局中，一些元素會完全脫離柵格。常見的例子比如頁眉，頁腳，或是出血的圖片內容塊。
混合柵格
如果內容塊寬度大于可用的屏幕尺寸，則固定柵格會轉變為流動柵格來適應屏幕。
不要以1440×900、1600×900或1920×1080等高分辨率進行設計。1280×800是電腦端內最小的分辨率，以1280×800設計的流動與固定寬度的布局都可以適應更大的屏幕。
固定寬度柵格設置
要設置固定寬度的柵格，我們對槽和列都應固定好數值。建議設置列寬為74px、槽寬32px以及16px的邊距。
固定寬度柵格設置
列寬74px、槽寬32px可以生成1240px的內容塊寬度（不包括兩端的16px側邊距），最大化的利用了可用屏幕尺寸。在不同的響應點，固定內容寬度大于當前屏幕尺寸時，則固定寬度柵格開始變為流動柵格。
流動柵格設置
要設置流動寬度柵格，對槽使用數值，對列使用自動計算的值（以％為單位）。
流體布局柵格設置
流動柵格利用整個屏幕尺寸作為主要內容的寬度，每側留出16px的側邊距。
在移動端使用流動柵格，槽和頁邊距的寬度推薦設置成16px。因為移動設備的屏幕分辨率較小，若再分成12個獨立的列、槽和邊距的話，設計起來也會很麻煩。
移動端的流動柵格設置
因此，我們將3列中的每列合并以創建4個粗列，從而使布局柵格既簡潔又方便，快速對齊。
平板設置柵格的方式與移動設備非常相似，推薦槽寬和邊距分別設置為32px與16px，可以在768×1024大小的畫板上為平板設計界面。
平板電腦流動柵格設置
將12列優化成6列，讓柵格清晰明了，谷歌的材質設計曾建議使用24px寬的槽與頁邊距，實際應用時，不妨都試下看哪個效果更好。
柵格布局的變化決定了主要內容的結構，針對不同的布局要求，使用不同的柵格系統，而頁面中的內容塊數量決定了頁面布局的變化。
單列布局
單列布局或全寬布局，是著陸頁和首頁的風格之一。還可以合并12列來創建一個單列內容塊，也可以將12列分配到父級內容塊中。
一級頁面常應用單列或全寬柵格布局
雙列布局
該布局有兩個內容塊。通常，其中的一個內容塊會占據比較多的區域進行信息展示。
在雙列布局中，列要么分布在9–3或8–4父級內容塊中，其中的一個組合列區域，用來創建主要內容。帶有單個邊欄的界面是兩列布局的常見呈現形式。
三列布局
三列布局具有三個內容塊，主要內容塊占據最大的展示區域，在三列布局中，列分布在3–6–3或2–8–2父級內容塊中。
固定寬度的側邊欄布局
固定寬度的邊欄布局稍有不同。邊欄寬度在一組響應點范圍內固定，剩余空間由固定寬度或流動寬度的內容塊占用。
側邊欄固定布局
在原型工具中，設計布局和編碼有很大的不同。代碼可以合并列或將其堆疊，比如合并12列以創建單個列布局，或將12列分布到一組，用來創建不同布局變化的內容塊。在原型設計工具中設計布局時，你需要確保開發人員清楚了解電腦端，移動設備和平板設備上設置的列寬、槽寬及邊距。像Bootstrap，Zurb Foundation等開發軟件，其中對柵格值的設置會有出入。
自定義柵格
設計師可以多嘗試不同的柵格值設置，以找到最適合自己的呈現形式。如果交付開發的時間非常緊急，請使用文中建議的數值，更保險也不會出錯。
文章來源：站酷 作者：UX辭典
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
亞馬遜作為一個知名的電商平臺，它的成功背后卻有一個很難讓人理解的設計邏輯：成功的設計不一定是美觀的。為什么會這么說呢？本文將從四個維度展開分析，希望對你有幫助
當你在設計表單時，是否對文本框和表單的規則有疑惑？本文的一些簡單的規則將幫助你完成設計用戶希望完成的表單。
上圖是表單的發展歷程，由石刻上的表單到紙質表單再到電腦上輸入的表單。印刷式的表單已存在多年，我們可以從其設計中學到一些技巧。
一、文本框剖析
文本框允許用戶在界面中輸入文本。它們通常顯示在表單和對話框中。文本字段組件設計應為交互提供明確的可見性，使字段在布局中好發現，填充且容易理解。
這些是基本文本字段的重要元素：
1.容器-可交互輸入文本的區域
2.輸入文本-輸入文本字段
3.標簽文本(標題)-告訴用戶給定表單字段中屬于什么信息
4.占位符文本-是所需信息的描述或示例，在用戶輸入文本后會被替換
5.幫助提示或驗證文本（可選） -提供其他上下文或驗證消息
6.頭部圖標（可選） -描述文本字段所需的輸入類型
7.尾部圖標（可選） —對輸入的文本的附加控制，例如清除，隱藏/顯示等
二、文本框類型
它們大多數基于基本文本框，為了更好地展示特定類型的信息而做的演變，例如輸入信用卡號的文本框。以下是我們創建的整個UI中最常用的輸入類型的一些示例：
為收集的數據提供正確的文本框類型，將幫助用戶以正確的格式輸入信息，并避免錯誤，從而使填寫過程盡可能簡單。
可以通過提供視覺上的變化來傳達文本框的狀態。輸入文本字段可以具有以下狀態之一：未激活，懸停，激活，禁用，校驗，報錯。大家在做表單設計時最好的做法就是遵循這些狀態的變化，不要挑戰已經形成的用戶思維模型。
通常，文本框的標題有三種常用的位置可選擇：頂部，左側對齊和右側對齊。采用哪種樣式將取決于表單的主要目標和表單的大小，組件庫以及要設計的平臺。它們各自具有一些優點和缺點。
我已經根據大型設計研究的研究結果進行了匯總，最開始的Material design指南中流行的下劃線輸入并不是最佳選擇。有趣的是，同一項研究表明，用戶更喜歡帶有圓角的輸入。
當用戶不熟悉所要填寫的內容時，這是一個不錯的選擇
優點：標題易于拓展；充分利用垂直空間
缺點：標題和相應的輸入內容之間的距離過長，而且不一致的距離會增加文本輸入的完成時間
與左對齊的標題相比，完成時間快將近兩倍
優點：文本的標題和輸入內容的位置更緊密，減少了了眼睛的運動次數，從而縮短了完成時間
缺點：難以快速掃描表單并了解所需的所有信息
這是在大多數情況下最快的時間和最全面的選擇。在移動端上效果很好，因為它們不需要很多水平空間。
優點：能夠讓用戶單一眼球移動即可了解輸入標題和輸入文本，能夠更快的完成
缺點：需要更多垂直空間
為表單中的所有文本框都使用相同的輸入長度會使它們在視覺展現上令人愉悅，但是卻很難完成填寫。
輸入信息后文本框內占位文本的消失，會對用戶的短期記憶產生壓力。沒有標題，用戶將無法在提交表單之前檢查他們提供的所有信息。如果您需要極簡的表單設計，則可以使用“Material design”浮動標題的方法。
表單內的占位符文本有時會使用戶感到困惑，最好在字段外使用提示文本。
使用自動完成功能幫助解決部分查詢功能，在用戶的輸入框中，用戶可以按Enter或“右箭頭鍵”使用它。
使用自動聯想值搜索相關的關鍵字和建議使用的內容列表。列表以下拉彈層形式顯示多個建議列表。
預填充字段并使用智能默認值。通常，您可以通過IP或地理位置輕松檢測用戶所在的國家和城市。根據最常見的方案進行分析，我們一般可以定義默認情況下應選擇的內容。
提供上下文信息。為了用戶做出正確的決定或避免錯誤，用戶在進行轉帳時將需要一些其他信息，例如帳戶余額，如果能夠從上下文中獲取這些信息，就請及時給出。
“實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查全部輸入：
驗證消息顯示在靠近輸入的區域，并一起顯示
不要太過于激進的方式提示錯誤消息，應該告訴用戶如何解決問題，而不是責怪他們
當字段在用戶完成輸入之前就被標記為無效時，請避免“提前驗證”
考慮使用“正向校驗”，可以增加一種愉悅感和成就感
它將消除視覺和認知負擔，并且看起來更簡單。
不要將全名和日期之類的文本分成多個字段
不要多次詢問相同的信息
使用標簽和提示復制以盡可能地縮短它
我們僅展示基本要點，通過逐步顯示信息的方式來幫助用戶管理信息的復雜性，在用戶需要的時候再展示出來。比如加個開關按鈕把不重要的信息隱藏。
使用條件邏輯能夠根據用戶的答案，自動顯示或隱藏某些字段，并可以在表單中t跳過頁面。這種方法不僅可以減少字段數，而且可以使填寫過程更具個性化和對話性。
簡化復雜表單的最簡單方法之一就是開始對相關字段進行分組。格式塔心理學中有多種分組原則，可以使項目感覺相關：接近度，相似度，連續性，閉合性和連通性。將數十個非結構化字段分組為幾個可管理的集合將顯著提高表單的可用性。
有時即使刪除了所有不必要的內容，某些表單也會很龐大。將大型任務分解為一系列較小的任務看起來容易得多，并促使用戶將填寫過程進行到最后。
顯示步驟條，以視覺方式傳達用戶的進度，這可以提高滿意度并激發用戶繼續填寫的動力
不要過于細化表單，太多的步驟將無濟于事，只會惹惱用戶
對關鍵信息進行匯總以減輕用戶的焦慮，最后需要進行復查
一列布局為用戶創建了一條清晰的完成路徑。使用多列表單布局的后果包括：用戶跳過他們實際要輸入數據的字段；將數據輸入到錯誤的字段中；或者只是想暫停一下而可能導致放棄。
如果表單足夠大，可以分成多個步驟，則應該為它分配一個單獨的，清晰明確的空間。顯示常規導航或任何會破壞表單填寫過程的鏈接/按鈕，只會造成混亂。我也建議不要在小型彈出窗口中使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤類型，每種類型的鍵盤都旨在促進不同類型的輸入。為了簡化數據輸入，在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型。注意鍵盤將出現的位置。為了避免不必要的頁面滾動，請將文本字段放在上方區域。
允許用戶取消隱藏密碼，而不是要求他們輸入兩次密碼，這對于生成密碼的應用程序也將更有效
始終顯示密碼要求，并顯示用戶在滿足填寫條件方面的進度。嘗試簡化對用戶的要求
使用強度計量條以鼓勵用戶創建更強的密碼
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
對于產品設計師來說，在日常工作中做的產品類型主要是兩種：一是B端項目，另一種是C端項目。近些年來，互聯網進入下半場，C端用戶增長觸及天花板，流量的紅利逐漸消退。很多企業的業務由C端轉向了B端。
隨著企業業務的轉變，作為設計師的我們，也必須跟上步伐，快速做好角色的轉換。當然，想從C端設計快速切換到B端設計，或是從B端設計快速切換到C端設計并非易事。因為C端和B端產品設計存在較大的反差。其商業屬性、產品定位、目標用戶、設計表達、業務流程等都會有很大的不同。那么今天這篇文章，我們就一起來聊聊B端和C端產品設計的差異性。
直接進入正題，本文將從目標用戶、使用場景、產品需求、產品本質及特性、產品設計思維、設計原則等幾個方面進行具體對比。
01目標用戶
C端：
C端釋義為：Consumer，意為消費者、個人用戶或終端用戶，使用的是客戶端。C端產品往往是直接對接一般消費者，直接為廣大消費者和用戶提供產品或服務。例如：微信、微博、抖音等等。
B端：
B端釋義為：Business，意為企業用戶或商業用戶。B端產品往往是為針對這類用戶開發的系統型軟件、工具或平臺。例如：CRM 系統、 ERP 系統、OA系統、SAAS等等。
02使用場景
C端：
它會存在于我們生活中的各種場景，而且自由度非常高，當然也包含工作場景，比如周末在家無聊刷刷微博了解下國際大事、晚上睡前打開蝦米聽聽歌、在工作間隙打開某團點個外賣等等，因此，C端產品的用戶大部分使用場景是碎片化的。
B端：
B端產品更多的是在企業版內部使用，更多的是為了滿足企業相關用戶在“工作場景”下完成協同工作的一些特定組織需求。
03產品需求
C端：
想很好的挖掘C端產品需求，這要求我們做更細致的用戶畫像，比如：用戶的性別、年齡、職業、文化程度、收入水平、個人喜好等都會影響到功能設計。然后通過用戶畫像、同理心等方法對用戶的行為進行詳細分析，以發掘用戶具體需求。
B端：
B端產品一般是基于現有的“業務”形態，將傳統線下工作，通過程序化、系統化、信息化轉換為線上產品，從而提升企業協同效率，降低辦公成本。需求一般來源于產品戰略定位、使用者個性需求等。
04產品本質及特性
C端：
C端產品的本質基本都是一個核心功能，例如：社交類app的核心功能就是好友快速溝通；電商類app的核心功能就是購物；視頻類app的核心功能就是看視頻。在核心功能之外的都是一些“增值功能”，比如評論，點贊，分享等。如果除去這些附加功能，雖然會影響用戶體驗，但并不會妨礙核心功能的使用。
其產品特性可簡單總結為一個詞-分享。在使用C端產品時，用戶都希望自己的“行為”能夠得到其他用戶的認可。比如：對自己分享的內容進行評論、分享、打賞等。
B端：
B端產品的本質是滿足用戶的工作需要，而公司內大部分工作，我們幾乎是無法獨立完成的。這意味著我們需要和其他同事協同去完成一個任務的閉環。因此，B端產品的業務邏輯會相對更加復雜。
B端產品的特性也非常明確——即“協同工作”。處于信息化時代的企業中，幾乎已沒有可以單獨完成而不需要協同的工作了。
05產品設計思維
C端：
在上面我們已經提到過，C端產品的本質基本都是一個核心功能。因此，在設計前期，作為設計師的我們必須對產品進行全方面的考慮。到底那一個功能是我們產品的核心?哪些功能只是錦上添花?
此外，目前市場上C端產品同質化異常嚴重。想要產品獨具一格，就必須突出特色，堅持自身的品牌亮點，才能讓用戶快速記住這個產品或者品牌。
B端：
B端產品的本質則是滿足用戶的工作需要，協同工作。對于企業來說，更多關注的是工作效率和成本。這也是B端產品最終的解決問題方向：如何提升企業的運營效率。因此，在設計過程中，我們需要不斷的去優化產品流程、調整策略等。
06設計原則
C端：
在設計過程中，除了要抓住核心功能外，還需要給產品增加趣味性和創意性。趣味性，也就是要給用戶帶來積極的正面情緒，如：能使用戶感到心情愉悅，感染人，打動人，引起用戶心靈共鳴等；創意性，也就是要做出與同類產品不一樣的東西，而這些新東西又是解決了用戶某些痛點的。當然，做這些最終的目的是為了提升流量、留存率及轉化率。
B端：
B端產品的需求往往是要解決一個企業中不同角色（普通成員，管理員、超級管理員等）之間的協助關系，在設計過程中一般需遵循如下設計原則：合理的功能與模塊劃分、嚴謹的業務流程設計、干凈簡潔的界面設計等。
在這里，筆者整理了幾個優秀的B端產品設計案例，供讀者參考。
登錄界面設計
C端：
B端：
都是登錄頁面，差別卻是如此之大。站酷面向的C端用戶，賬號登錄支持手機號、郵箱以及第三方（微信、微博、QQ）方式。對于用戶來說，選擇非常多，可以說是非常人性化，大大提升了用戶體驗。
而網易郵箱面向的B端企業客戶，賬號登錄僅支持郵箱登錄一種方式，且用戶登錄時還得首先確認自己的身份是普通用戶還是管理員。這也說明，在設計B端產品時，得充分考慮不同角色的權限問題。
導航欄設計
C端：
B端：
導航欄的設計布局有很多方式，面向C端用戶的站酷使用了頂部導航的模式，這也是最常見的主導航模式。二級導航聚合在下拉菜單里面，鼠標hover出現。這種導航方式非常直觀，訪客可以快速的定位自己感興趣的模塊，另外，可以很好的展示內容區域，對于訪客來說，非常友好。
面向B端用戶的愛客CRM系統使用的是側邊欄導航，使得導航展示更加清晰，頁面之間的切換也非常方便。這種布局方式一般用于管理后臺偏多，與B端產品業務復雜性密不可分的。
B端產品原型實例
當我們明確了具體的需求后，就可以動手制作可交互原型了，這樣可以很好表達出整體邏輯，讓客戶直觀的看到功能和效果，獲得較真實的感受，并在不斷討論的基礎上完善未來的設計思想。接下來，一起來看看我用Mockplus做的B端產品原型效果：
原型演示地址：https://run.mockplus.cn/4oEh4pCz7K9GRtlS/index.html
文末福利
最后，我為大家準備了一份小福利。
產品團隊的溝通離不開原型，今天為大家推薦的原型設計工具Mockplus，更快更簡單，5分鐘制作一個交互原型頁面。支持團隊協作和在線審閱。
點擊下方鏈接可以免費領取Mockplus的個人版15天，數量有限，先到先得。
領取地址：https://www.mockplus.cn/home/promote
小結：
雖然C端和B端產品在目標用戶、使用場景、產品需求、產品本質及特性、產品設計思維、設計原則上都有所差異，但是C端和B端產品也有很多共同點，如：都要求產品簡單實用和有效準確，都是為了更好的滿足用戶的需求，解決用戶的痛點等。如果能做好以上這些關鍵點，無論是做C端還是B端，都會是非常優秀的產品。
轉自：ui
編輯導語：你有沒有設計過結構復雜、內容繁多的表單？在設計時有沒有什么技巧可以化繁為簡、提升填寫者的體驗感呢？本文作者為我們羅列出了表單設計中可能遇到的一些問題，并且提供了解決方案，讓我們一起來學習吧。
距離上次發文已經快半年多了，實在是慚愧，好久沒有輸出內容了，看著每周增加的零星關注人數，內心更加焦灼難安。
這半年來我換了工作，也適應了新的環境，同時也在思考新的方向，估計和大多數的設計師一樣，迷茫時常伴隨著我。前段時間寫了幾周的產品體驗日記，但覺得缺乏深度就沒發上來，后續我將會繼續寫產品體驗日記，完善后分享給大家。
2020所剩無多了，我也會將積攢下的一些內容陸陸續續發上來與大家分享，感謝關注，感謝閱讀。哈哈哈哈
你平時填寫過的最復雜的表單是什么？調查問卷還是文檔信息錄入？如果一個表單字段內容巨多、結構多變、填寫耗時耗力，那你將如何設計你的表單使之體驗更佳？
面臨的問題:
不知道大家是否看過法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊；類似的文檔如果進行線上結構化，勢必要同樣要花費巨大的人力去填寫表單，完成基礎信息的錄入工作。
同時，由于錄入的時間不確定，流程不明確等問題，也制約著表單的填寫。
多個不同表單之間的互有關聯又相互區別，填寫的時候需要來回查看以確認信息，查閱和填寫相互并行，操作繁瑣。
幾乎每一個字段都有對應的關聯項，每個單選字段的不同項決定不同的內容。同時，由于字段數量，層級劃分不明確，會使填寫的人失去定位，產生迷惑。
根據業務內容分級，合理運用顏色、間距、字體大小、卡片層級等進行信息分級。
一般表單是與某項功能掛鉤的，信息會在多個入口錄入。因此在填寫長表單的時候，如果能從系統中自動獲取到數據，就可以自動為其填充，可根據業務場景，判斷是否讓其修改和更新。
一般的長表單在涉及非審批流的時候，可以讓其無限二次編輯；如果是處于審批流，則需要根據業務場景限制其編輯次數或者限定其編輯規則（草稿可編輯，一旦提交則不可編輯）。
如果一個長表單，需要多個不同的業務域的人來填寫，那么需要協同編輯，并實時顯示編輯的人員信息。
同時，為了避免信息丟失和編輯錯亂，在同一個表單下，同一時間應該限制只允許一個人進行編輯，等其提交完后，可允許其他人進行編輯。
前端實時校驗字段輸入規則，后端統一校驗信息交換規則。
比如對于數字輸入框的校驗、電話號碼的校驗、身份證號的校驗，應該在前端實時完成。
在鼠標離開焦點區域或定位到下一個字段的時候，提示其填寫有誤；這樣做的目的是減少后續修改的次數，在長表單下，統一提示其填寫錯誤會是一場災難。
在點擊保存并填寫下一步或點擊提交信息的時候，就需要跟后端交換數據，驗證錄入的信息；如果不匹配，則提示錯誤，并從上至下定位至相應的錯誤字段。
要通過多種方式，引導表單的填寫。
1）在開始填寫之前，簡要說明該表單的業務目標，大概需要花費的時間等；
2）開始填寫后，關于每個字段的特殊說明，都需要標注出來。重要的要顯示在頁面上，不重要的就收起在注釋符號中；
3）填寫的過程中，切記不要到最后才告訴用戶哪里出錯了，重要的信息一定要提示到位，否則一旦出錯，前功盡棄；
4）填寫完成后，引導其下一步的操作，或者返回至列表。
表單填寫完畢后的產出物就是詳情頁，詳情頁是需要瀏覽的。因此在設計詳情頁的時候，應該本著讓用戶瀏覽方便的原則去設計，需要注意以下幾個點：
1）結構清晰
結構清晰是指不要講內容一股腦的全堆在頁面上，要做好信息的分類；同時，注意規劃頁面的層級。
2）設置快捷導航
如果一個表單是長且復雜的，那么其對應的詳情頁也會變得復雜和冗長，因此在頁面的右側或者頂部設置合理的快捷導航是很有必要的。
快速返回頂部按鈕的使用要注意場景，如果你的頁面比較長，且沒有分組瀏覽的導航，那就需要設置快速返回頂部的按鈕。
但是在存在分組瀏覽導航和頂部懸浮標簽的情況下，不建議使用快速返回頂部的按鈕，因為在填寫表單的時候，使用快速置頂的場景比較少。
當一個模塊混雜著各種信息的時候，單純的模塊分組已經無法處理它的復雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁面的復雜度。
步驟條可以單純的作為步驟指示器使用，也可以作為一個表單完成度的提示區域。
在填寫大量字段的表單時，閱讀表單內容和填寫表單同樣耗時耗力。
如果我們將所有的提示信息隱藏在提示符中，一般情況下用戶不會去查看；但是如果去挨個查看提示信息，則會多花費一個步驟去點擊或者懸停來查看提示信息，浪費了大量的時間。
因此如果涉及到重要的提示信息，請直接展示在字段的后面，不要隱藏起來。
在后臺產品上，關于組件的規范統一，想必是人盡皆知的設計原則。
無論是各類平臺型設計組件，還是各個公司自造的設計組件，保持統一和規范對產品設計有著重要的作用，在這里不贅述組件應該怎樣規范統一。
因為無論是Ant Design還是其他設計語言，都有詳盡的關于組件的定義方法，我在這里講述一個產品設計更高層面或者更深層面的原因：
組件的規范統一并不僅僅是為了省時省力，而是為了使用戶在使用的過程中達到認知上的統一和行為上的統一，在進行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。
因此在操作相同類的流程時，用戶會有更多的掌控感，試想一下：如果你在操作人事相關的流程后，去填寫績效部分的內容時，發現一個迥異的界面或者彈窗，你肯定覺得這是不是哪里出錯了，甚至會懷疑這是否是同一個系統。
目前大多數公司的管理系統經過多次縫縫補補，內部的跳轉邏輯已經異常感人，界面風格也大放異彩，但是使用起來卻無從下手，深感迷茫。
因此大到界面樣式，小到間距大小，產品設計的規范和統一應該是最基礎又不可缺少的原則。
對付復雜的表單，你需要解決的主要問題并不是填寫方式或者頁面設計，而是信息分級和結構拆分。解決了這個問題，基本上就解決了業務問題，其余部分就跟我們常用的表單一致。
將復雜度降低并不意味著減少頁面的信息，而是通過設計師合理的信息劃分，降低視覺上的復雜度和流程上的復雜度，這樣才會達到當前場景下的“最佳解決方案”。
隨著互聯網信息化的深入發展，復雜是避免不了的。
我知道大家都推崇簡潔的設計，但那只是對視覺和樣式的定義，而非對信息的定義。
我們所處的世界是復雜的，行業更是復雜的。信息的復雜度與日俱增，想要處理復雜的信息，就需要從復雜中尋求規律，這規律與業務息息相關。
B端360行，行行深如海，小伙伴們，我們一起慢慢修煉吧~
一、導語
1. 業務復雜，功能較多
2. 流程較長，操作繁瑣
3. 字段較多，關聯項較多
二、解決方案
1. 內容分組，分步填寫
2. 實時保存，避免數據丟失，提供草稿功能，避免任務中斷
3.字段分組，示意結構，聯動項隱喻
4. 信息自動帶入，節省時間
5. 提供二次編輯功能，防止信息輸入有誤
6.提供多人協作編輯功能
7. 實時檢驗
8.做好填寫引導功能
9. 詳情頁也需要注意信息分級
三、小細節，大體驗
1. 提供快速返回頂部的按鈕
2. 提供分組模塊收起展開功能
3. 步驟提供信息填寫完成度提示
4. 重要說明性文字盡量顯示而非收起
5. 產品內組件應該規范統一
6.龐大的信息錄入，表單內部要分步填寫，外部可拆分成不同的表單分別填寫
四、結語
文章來源：人人都是產品經理 作者：米蘭小鐵匠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
看到知乎上的一個問題：如何找到一家好的高端網站設計公司？
把回答的內容也轉過來記錄一下。
首先回答：何為高端？
高端與低端是對應的，目前網站設計，中低端基本是用模板改改，相對價格低，有一些小型公司或不依靠網站運營收入的公司，“有個網站就好”，所以可以用這種低投入，內容有就行的網站建設公司，特點是馬上就能用，三五天把內容發布進去就可以。備案可能需要一定時間。
高端設計公司，一般是量身定做，為企業做網站策劃、分析，按照用戶研究、網站建站的目的來進行網站的定制欄目頁的設計。做競品分析、研究對方的優缺點，設計的色系和企業標準色、情感表達、人物場景、用戶體驗思維，越深入，思考越成熟，做的網站品質越有保障。所以需要的時間、精力、投入相對多。
因為投入相對多，所以經營業績好的企業、集團公司、營銷類大型網站來定制的比較多。
我們公司“北京藍藍設計”就是為定制的高端企業用戶、政府網站、軟件公司來服務的。我們挺喜歡要求高的客戶，這樣能體現出專業設計的水平，這也是我們和其它建站公司區別開來的地方。
我們主要是給大型軟件公司平臺、系統做UE、交互設計、視覺設計，用戶體驗優化，這個，比網站設計更難，更專業。 往往一個公司的核心產品，值得把精力金錢投入到上面，產出最大的回報。近年來，除了做軟件UI，大屏大數據可視化項目外，我們也擴展了“愿意把公司網站做成核 心產品”這樣的公司成為合作伙伴，更好的為客戶提供全方位的服務。
一旦成為我們的客戶，設計無憂。
我們一定會把該做的事做好，并提供超值服務和額外附加值的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本篇文章將分享Web端表單體驗優化等相關內容，分析設計師在設計B端類產品時如何讓用戶愉悅并的填寫表單。
表單作為基礎通用組件，也是在各個企業級中臺中出現頻率最高的元素之一。在用戶界面中表單無處不在，比如：用戶注冊登陸頁、支付頁、用戶反饋、共享信息數據錄入等不同類型的表單。當我們使用/設計表單頁面時看似是按鈕、輸入框等表單組件進行組合搭配使用，看似簡單，但是在實際業務使用中卻有著無數可推敲的細節冒出來，常常給設計師造成較多的困擾。
那么在實際工作中哪些內容會給設計造成困擾呢？舉幾個例子：在實際的業務中很多產品因為業務導向需要入海（非中國區方向），所以就存在表單標簽對齊方式問題，如果右對齊可能在中文的情況下表單標簽預設寬度正好合適，但是當用戶切換到多語言時因為語言差異會導致折行嚴重等一些列問題，相當影響體驗；設計師常常疑惑表單標簽是頂部對齊、右對齊還是左對齊，他們的差異點在哪呢？必填與非必填項以什么形式告訴用戶會更加合理呢？表單按鈕放在頁面哪個位置體驗會更佳呢？
所以我們不能忽視這些設計細節，往往一些好的設計細節提升總會給用戶帶來不一樣的用戶體驗。針對以上這些舉重若輕的問題我們一一明確、拋出并與大家一起來進行由淺至深的探討「如何提升表單體驗」。
重點概覽
一、表單分析
二、體驗與優化
三、排列與布局
四、寫在最后
表單分析
1.1 表單的重要性
在上面的前言中也提到了表單作為基礎通用組件，也是在各個企業級中臺中出現頻率最高的元素之一。并且在《Web Form Design》一書中 Luke Wroblewsk 也提到了“表單決定了最關鍵的界面中交互的成敗”，當用戶使用網站時會有一個特定目標，如果設計得好，網站將實現有效性。效率、用戶主觀滿意度以及特定用戶在特定使用環境下所達到的特定目標，也是設計師想要達成的最終目標。表單往往是目標用戶和整個產品的一所橋梁。因為，盡管人機交互的發展進步，表單仍然是用戶在網絡中進行交互的主要方式。所以表單是被認為完成目標的最終，也是最重要的階段。
我們以淘寶來舉個典型的例子，淘寶屬于國民電商平臺也是亞洲較大的網上交易平臺，提供各類優質商品。從平臺的特性來講，它以用戶下單并成交作為最終目標。其中支付表單起著一個關鍵的作用，用戶從購買到支付完成以分步形式進行，第一步填寫基本信息并提交訂單，第二步選擇商品并選擇支付貨款至第三方，第三步買方確認收貨并自動打款給商家，第四步完成訂單并評價。在填寫表單時中間沒任何阻斷，用戶能很順利的按步驟完成訂單。淘寶支付表單屬于比較典型的分步表單。
1.2 拆分表單
我們簡單提一下表單組成（網上有很多詳細的相關文章），一個完整較復雜的表單是由7個基本組成部分，表單類別、表單標簽、表單基本組件、占位提示、幫助信息、按鈕、校驗。表單可以包含以上組成部分，但不是一定都要有，比如：移動端填寫驗證碼時為了減少用戶操作，當用戶填寫完成之后直接提交表單驗證。
表單類別：第一時間告訴用戶此段落的表單大致內容，減少用戶理解并承擔著概括內容的作用；
表單組件：包含了輸入框、下拉框、日期選擇器、時間選擇器、開關、上傳等十幾種類型，是形成表單的核心內容；
表單標簽：表單標簽承擔著對輸入項或設置項的解釋作用，所以表單標簽需要合理設置，核心點是幫助用戶快速理解每一項字段的作用；
占位提示：使用通用的認知提示并且以較弱的方式呈現給用戶，用戶填完信息即消失。注意：占位提示不能替代標簽，因為消失的占位提示會拉長用戶的短期記憶，如果沒有表單標簽用戶將無法在提交表單前檢查他們填寫的所有信息。文章下面會詳細分析。
幫助信息：當表單標簽不足以對輸入項準確說明時，這時候需要使用文本提示用戶。它不僅能讓用戶提前感知輸入后的樣式，還能夠有效的告訴用戶該如何輸入以及表單提交后達到的目的。
按鈕：當用戶完成信息錄入時，按鈕能夠對表單內容進行校驗或提交。
校驗：對用戶信息錄入內容進行校驗并給出對應的錯誤提示。如：內容是否為空、類型格式是否正確、是否符合業務邏輯等等。校驗時有兩種規則，分別是使用即時校驗（失焦即校驗）和點擊提交按鈕以后的最終校驗。狀態分別為錯誤、警示、成功。
1.3 表單類型
基礎表單
較為簡單的一類表單，把所有表單字段平鋪在頁面中，字段內容較少。當用戶輸入少量信息即可完成一個簡單快速的任務。例如：此類型表單常常用在簡單的登錄注冊中。
分步表單
較為復雜的一類表單，把一個相對復雜的表單字段拆解為多個步驟進行。根據業務屬性進行步驟分組利用步驟條告訴用戶所完成的流程和進度，當用戶每次填寫都意味著一次節點完成，整個流程結束給予明確的結果反饋，并以提交成功為最終。分布表單有利于減輕用戶由于表單大而復雜的造成的填寫負擔，并且能減少用戶表單填寫出錯率。
分組表單
將一個復雜表單拆解歸類分組。分組表單與分布表單特點較為相似，都可以減輕用戶因為表單大而復雜的造成填寫的負擔，并且能減少用戶表單填寫出錯率
體驗與優化
1.1 必填項or可選項
在設計表單時大多數設計師都習慣性的使用星號表示必填字段。但那么問題來了，針對必填項和可選項用那種形式才是最科學的呢？我們簡單分析一下。
當表單中的必填信息多于非必填信息時，如果使用紅色星號表示必填項，那么大量紅色星號導致增加用戶的認知負擔，使得用戶無法快速識別哪些是必須填寫的，哪些是不必須填寫。并且使用紅色星號會帶給用戶一些恐懼感，它增加了出錯的風險并降低了表單填寫率。因此在表單設計中，當必填項多于非必填項時，隱藏紅色星號標記，通過暗提示標記可選項的形式來幫助用戶識別。
紅色星號對于不同用戶也會存在不同的認知差異。對比較有經驗的用戶可能表意較為明顯，但不代表所有用戶都能理解，比如一些非中國區用戶使用國際化產品時存在不同認知，因為每個國家本地化差異較大導致認知差異。
還有一點是表單中視覺噪聲越少可讀性越強，因此當必填項多于非必填用非必填字段提示用戶會更好。
1.2 單列布局or多列布局
多列表單字段會導致用戶視覺路徑變長，因為如果表單中有水平相鄰的字段，則用戶必須以Z樣式進行視線掃描，整體的效率和工作量都更大，使清晰的路徑變得模糊并加長用戶閱讀時間。多列表單可能會存在用戶跳過他們實際要輸入的必填字段，將數據輸入到錯誤字段中。而最終校驗信息時用戶得反復檢查錯誤項導致用戶放棄填寫。
如果表單使用單列，則完成的路徑是頁面垂直向下的一條直線，單列布局能夠給用戶呈現一條清晰的視覺路。因此，表單較為簡單時盡量避免將表單分成多列，在業務場景允許的情況盡量使用單列（部分業務訴求和一些特定場景要求，多列布局會更節省垂直空間，但是多列布局需要考慮字段之間的關聯性，這里不強求一定只能使用單列布局）。
1.3 將復雜的表單分為幾個簡單的步驟
在設計師設計表單時可能業務場景復雜、字段較多，即使設計師把很多不必要的字段都刪除也解決不了根本問題。所以，這時候設計師需要將大型任務分解為一系列較小的任務，使得表單更加的簡潔。這種方式的好處是能將步驟以視覺的方式傳達給用戶數量、名稱、說明等信息，更加提高用戶滿意度并且能激勵繼續填寫。
但是設計師需要注意的是不要太過于細化步驟以及在小型彈出窗出現過多的步驟，過多的步驟不利與用戶填寫和記憶，反而增加用戶負擔。
1.4 按鈕的位置
按鈕放在頁面左下角比較好還是放右下角比較好？這是設計師在設計表單時常常糾結的一個問題。其實在14世紀西方活字印刷術的發明人約翰·古騰堡提出一個概念古騰堡法則（Gutenberg Diagram），又稱對角線平衡法則。它指出用戶在瀏覽頁面或一些布局時，視線往往趨向于從左上角到右下角進行掃描。左上角是第一視覺落點區（主視區），而右下角是最終視覺落點區（終點區）。與之相對，右上角和左下角則是視覺盲點。用戶的視覺移動端規則是從上到下，從左到右。
所以，界面中的左上和右下是用戶視覺最為重點關注的位置。遵循古騰堡法則，設計師應該把界面的關鍵元素放在主視區，終點區可以放按鈕、強提示，盲點區可以用來放一些相對次要的內容，如輔助圖形、文字信息。
同理，表單中會出現組合按鈕，比如：取消與確認、提現與充值。根據古騰堡法則，用戶使用界面時從第一視覺落點區是主視覺區(Primary Optical Area)，最終停留在結尾的終點區(Terminal Area)。
如下圖是一個彈窗類型的表單，如果根據業務訴求確認操作重要程度強于取消操作，那么確認按鈕應該放在取消按鈕的右邊。因為確認按鈕放在右側(終點區) 用戶關注度會更強。
1.5 占位提示避免代替表單標簽
常規的占位提示作用是使用通用的認知提示并且以較弱的方式呈現給用戶，當在字段中填入內容這些提示通常會消失。
設計師常常遇到表單字段較多并且頁面空間有限的情況，為了減少橫向節省空間設計師常常的做法是將表單標簽刪除，使用占位提示文本作為信息提示。但是設計師必須有意識知道到這種方式適合使用在較為簡單的表單中，比如：表格中點擊修改名稱操作，彈出氣泡并且氣泡中只存在一個字段?；蛘呤窃谟脩舴浅Ｊ熘牡卿涀缘容^為簡單的表單填寫時使用。但是當用戶需要填寫大量字段信息時不建議使用占位提示代替表單標簽的方式。原因有兩點：1. 當用戶選中文本框填寫時，占位內容即消失，這時候用戶無法檢查并確認其所寫的內容是否符合預期。2. 當用戶看到文本框中已經回填內容了，誤認為占位提示是默認回顯內容，造成內容已經填完不需要再操作的錯覺。
針對上面問題也不是沒有解決方案，在Material Design中有提供針對上面的問題的解決方案，我們這邊暫時稱其為“浮動標簽”，默認情況下輸入框內顯示占位文本，當用戶輸入內容以后占位文本浮動到內容上方與內容左對齊。
1.6 校驗反饋及時并準確
設計師通常認為用戶在填寫表單時能夠很順利的完成表單錄入，但事實相反。在實際的使用場景中，特別是在一些業務較為復雜的表單中用戶極易發生錯誤，這時候需要需要明確的校驗信息、準確的校驗時機、輸入的限制提示。
錯誤提示校驗
錯誤校驗提示一般存在于錯誤率較高情況下出現，如：在登錄注冊時，要求用戶填寫手機號，如果用戶輸入的手機號碼不符合特定的輸入格式，那么這時候需要明確標記錯誤原因，準確的幫助用戶找到問題并解決，避免錯誤提示描述模糊不清誤導用戶。錯誤提示一般會采用“雙重視覺強調”來顯示錯誤，除了輸入框突出顯示外，同時需要在輸入框下方加入紅色指導文字。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
限制與格式提示
在表單中如果出現特定格式時務必要提前告知用戶。可以在輸入框中顯示概括回答的方式引導用戶，如：請輸入日期，eg：mm/dd/yy。這樣便于幫助用戶提前感知，減少表單填寫錯誤率。
校驗時機
為了避免用戶在提交時表單時出現大面積的報錯問題，設計師可以使用實時校驗的交互形式。如：在用戶輸入完成之后鼠標失焦后進行信息校驗，但是需要注意的是在實時校驗時避免用戶還沒有輸入完成即出現校驗誤導用戶，所以需要準確判斷鼠標是否失焦。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
1.7 字段長度與輸入預期成正比
在實際業務中，設計師常常習慣把每個表單字段都設置成相同的寬度，在視覺效果上看感覺會比較統一，但是這種做法實際上體驗欠佳。字段的寬度應該向用戶暗示所需輸入內容的長度從而減輕判斷負擔。在Ant Design 4.0 系列分享的文章《整齊劃一？不如錯落有致》中分析到錯落有致的排版表現似乎比整齊劃一的左圖更舒適，因為在視覺上我們更容易將右圖的空間和內容視為一個和諧的整體。但左圖過度的對齊導致暗示隱性的截斷，我們慣性視覺會產生表單字段右側空間缺了一大塊的錯覺。
文章總結到“表單寬度的處理方式核心旨在解決兩個問題：1. 暗示填寫內容長度；2. 表單項布局排列效果，我們通過設置合理的默認寬度尺寸和描述關系，就可以讓設計師們跳過部分繁瑣磨人的細節思考，快速搭建表單寬度合理且舒適的頁面?！?/span>如下圖所示：
排列與布局
1.1 定寬or自適應？
表單做定寬還是做自適應？哪個“更好”的這個問題時常困惱著我們。其中Button、Radio、CheckBox等本身是定寬組件還好，它根據內容自適應即可，但是當遇到Select、DataPicker、Cascader等類型時就會開始糾結這個問題。在實際的業務中不論是做理想中的定寬還是自適應，很多情況下瀏覽器窗口大小不一可能導致在一些極限情況下都會產生不盡人意的情況。腦補一下，比如：在筆記本的小屏幕下左對齊并定寬效果還不錯，但是當你把頁面呈現在較大顯示器下，這時候頁面右側又會呈現出大面積的空白。參考AntDesign提供的典型頁面以下三種樣式是都會造成不同的反面效果。
所以在實際業務場景中如果沒有明確自適應和特定自定義寬度的需求時可以通過以下幾種方式處理。
將關聯性強的字段分組
如果頁面橫向寬度足夠大時，可以將一個區域中字段較多、并具有關聯性字段進行分組，這樣不僅有利于空間布局上的利用，還可以通過字段之間關聯性暗提示幫助用戶更好理解。格式塔心理學中有多種分組原則，可以使字段之間具有相關性：接近度，相似度，連續性，閉合性和連通性。將非結構化字段分組為幾個機構化的集合提高表單的可用性。
設置字段寬度梯度
可以給字段設置幾檔寬度梯度的尺寸，我們可以站在AntDesign這個巨人的肩膀汲取一些相關經驗，其中4.0系列分享的文章中總結到其經過對十幾個業務線梳理，將組件寬度定義了5中高頻的空間尺寸，分別是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根據原理，我們可以假設原子寬度XS為100，那么通過尺寸的倍數+間距的方式來計算其他的四種尺寸（間距暫定8px情況下得到：S=208px、M=316px、L=424px、XL=532px），通過此計算方式也是用來解決視覺對齊規則，如下圖所示：
1.2 表單標簽頂部對齊or右對齊or左對齊
在設計表單時到底是左對齊、右對齊還是頂部對齊呢？這個問題也是在實際業務中設計師發問頻率較高的一個棘手問題。其實，不論是哪種方式都有相對的利弊，需要根據實際業務場景提供不同的解決方案。在Matteo Penzo《Label Placement in Forms》文章中有分享過關于表單標簽放置的研究，下圖是Matteo Penzo研究總結得到的瀏覽時間表：
表單字段頂部對齊
將表單標簽放置在其對應輸入字段的正上方，并垂直左對齊排列，用戶只需依次向下瀏覽即可看到標簽與輸入字段兩個元素。其優勢是橫向屏幕空間足夠，能夠比較友好的適配多語言適合非中國區業務表單使用。并且根據上面Matteo Penzo的時間表上看，頂部對齊的瀏覽和填寫的效率也是3種常規的對齊方式中較高的一種。不足點是會占用較多的縱向垂直屏幕空間，此外應當注意每組表單標簽和輸入字段與其他字段組的間距，以免層級區分度不夠的問題。
表單字段右對齊
將表單標簽放置在其對應的輸入字段的左邊，標簽右對齊。其優點減少了占用屏幕的高度，并且表單標簽與輸入字段關系較近，所以用戶在填寫表單時效率較高。不足點是由于表單標簽的字數不可控（特別是針對非中國區業務時，多語言切換可能會出現超長的文案，甚至出現折行的情況），可能會造成左側參差不齊的問題，導致可讀性不高用戶在查看表單時比較費勁，并且不太適合非中國區業務。
表單字段左對齊
將表單標簽放置在其對應的輸入字段的左邊，標簽左對齊。表單標簽和輸入字段距離較遠，用戶從左至右瀏覽時間變長，并且根據上面Matteo Penzo的時間表上看，左對齊的瀏覽和填寫的效率是3種常規的對齊方式中最慢的一種。但是，如果業務需要用戶對表單放慢速度并謹慎填寫（復雜表單或者表單中含有大量高級設置的陌生數據時），左對齊的方式會減少部分用戶的出錯率。但不太適合非中國區業務。
1.3 表單布局類型
常規布局（簡單）
在實際業務中當表單字段較為簡單時可使用，表單字段至上而下單列排列布局，用戶只需縱向閱讀填寫，填寫完成率較高。
多列布局（較復雜）
垂直空間有限并且表單含有較多填寫字段的復雜表單時，可將具有相關聯字段放在一個卡片區域中進行歸類，將多個字段組合在一行，形成多列排布的暗提示幫助用戶更好理解。
區域分組布局（復雜）
表單含有較多填寫字段的復雜表單，可將具有相關聯字段進行分類并以標題區分的形式進行字段分組，并且表單字段都在一個卡片區域內。
卡片分組布局（高復雜）
卡片分組布局一般用來處理高復雜類型表單。當業務中希望頁面承載眾多表單字段時，可將信息相關性弱的字段拆分為多個部分，并通過多個卡片分組承載不同類型字段，每個卡片都需有個卡片類別標題。
寫在最后
本篇文章從分析表單在產品中為何如此的重要，總結了在日常工作中設計師常常遇到的表單類型和布局，設計師可通過文章中的建議和案例進而合理的選擇并靈活應用。以及在實際的業務應用場景中設計師如何規避和注意一些設計細節進而提升表單的體驗。文章通過一些案例進行分析，希望大家能夠通過此篇文章更多的是受到啟發（而不是限制），能夠在日常工作中靈活應用并舉一反三。這里需要強調的是作為產品設計師不論是表單設計還是全局的頁面設計，都需要有理解業務本質的能力和全局的業務思考能力，不然常常會被稱之為“喂，那個畫圖的設計”。
文章來源：tob.design