先問你一個問題。
拼多多、淘寶、京東這三家購物平臺，你認為它們的區別是什么？
或者換個方式問你。
買電器你去哪個平臺？買衣服你去哪個平臺？ 買垃圾袋你去哪個平臺？
是不是有了答案了？
沒猜錯的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個購物心智模型，你的心里對這三家平臺已經產生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？沒錯，這就是心智模型。
百度百科對心智模型的定義是：
“深植我們心中關于我們自己、別人、組織及周圍世界每個層面的假設、形象和故事。并深受習慣思維、定勢思維、已有知識的局限?！?
關鍵詞是：故事、習慣、局限。
淘寶一開始就我們講了一個故事，一個萬能的集市，我們習慣在上面買衣服，但是也產生了局限性，那就是，當我們想買大額電器的時候，還是會選擇京東。
我個人對心智模型的理解是：
我們內心深處對一個事物的看法。
空口聊天多沒意思，下面舉個例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因為陶俑的頭上的發髻和米老鼠標志性的耳朵很像。
如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？
一定不會。
這就是心智模型，你對頭頂的大圓形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現出來，這個發髻的形狀和你心里對米老鼠的形象產生了匹配。
對心智模型有沒有一點印象了？下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認為要想理解一個概念，最好還是從“面”的角度來說，所以下面我會舉一些商業上的案例來輔助理解。
心智模型有哪三種運用方式？
第一種：創建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現有的心智模型
可以理解成一件事情的新生、改變和延續。
下面咱們一個個來。
第一種：創建新的心智模型
難度指數：難啊。
記得《盜夢空間》里最難的是什么嗎？
最難的不是盜夢，而是植入一個想法。
創建新的心智模型有異曲同工之妙，都是讓別人內心接收一個事物，需要刻意培養。
舉幾個例子。
當年外賣剛開始的時候，家家搞補貼，很多時候幾乎不花錢就可以點外賣，后來這些福利沒有了，為啥？
因為點外賣的心智已經培養好了，你離不開它了，所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費勁植入一個新的想法？
因為一旦植入了，就很難改變。
現在我身邊的很多朋友想買一些低價的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習慣養成就很難改變，意味著什么？
意味著留存和轉化的成本更低了。
第二種：改變舊的心智模型
難度指數：也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現實世界里”，當他和他妻子回到現實世界后，他妻子仍舊認為自己不在現實世界里，這個被植入的想法已經根深蒂固，很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比，后來想往高端路線走，很難，大家心里已經認準了小米就是“性價比之王”，也就是你的產品不僅要好還要便宜。
這就導致小米一漲價，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比，小米往高端發展，但是仍舊很難。
拼多多的百億補貼也是一樣的道理，一開始的砍一刀深入人心，大家對拼多多的心智已經成型：便宜，質量一般。拼多多想改變這個心智，推出百億補貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。
第三種：匹配現有的心智模型
難度指數：相對簡單。
其實匹配現有的心智模型，是相對最簡單的方法，市場已經幫你把用戶習慣培養好了，你直接使用，那肯定事半功倍，省時省力啊。
舉個例子，大家最近有關注小米的 13 Ultra 嗎？
小米和徠卡聯合研發的，主打徠卡調色的相機。
我有一個同事就直接把手里的微單換成了 13 Ultra，因為拍照足夠好看而且便攜。
這里不是要推銷手機啊，是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄（一個配角，可以拆卸）。
是不是有些熟悉？和相機像不像？
這個手柄就是沿用了相機的心智模式。
小結一下：
心智模型有 3 種用法：
下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？
同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個頁面的設計。
要想匹配用戶的心智模型其實就三步：
了解業務、了解用戶、競品調研。
或者可以這么說， 在懂業務、懂用戶的基礎上，還要了解行業內的通用做法。
1. 了解業務
一定要了解業務，為什么？
因為好的設計方案千千萬，但是匹配你的業務的方案才是好方案，如果不了解業務，可能設計出來的方案就是自嗨，例如網上很多的 dribble 風設計。
又比如說手機瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因為夸克想推翻傳統的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業務訴求，現在手機屏幕越來越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業務。
拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因為最后方案設計是服務于最初的業務目標的，業務不同，呈現的方案也不一樣，最后讓用戶形成的心智也不同。
2. 了解用戶
為啥？給老人和小孩設計的界面能一樣嗎？
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體，而老人需要識別度更高的字體，更大的字號。
不同的用戶，采用的設計一定是不同的，只有了解了他們的喜好和痛點，才能做出符合他們心智模型的設計。
3. 競品調研
為啥要競品調研呢？
因為競品和我們的產品類似，那么意味著用戶大概率重合度也高，甚至業務上都有一定相似度，那么意味著，競品的方案，大概率是經過市場驗證的符合用戶心智模型的方案。
你看，既然競品已經給咱們打了個樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說照著競品抄，而是取長補短，所以不僅要調研，還要分析，分析就是把競品的優劣勢找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個雷嘛。
好了，小結一下，要想匹配用戶的心智模型，一定要了解業務、了解用戶，還要做競品調研了解市場的通識性做法。
以上。
文章來源：優設網 作者：餿面包
首先說明，競品調研的方法有很多，本文只提供一種方法供參考，建議大家活學活用。建議從下面 4 個方面入手：
1. 調研背景
主要說一些為什么要調研，希望通過調研答達到什么樣的目的？是視覺升級、體驗升級還是為了提升轉化率？只有了解為什么做調研這件事情，才能知道從哪幾個維度調研。
2. 調研樣本
建議選幾個直接競品，再選幾個優秀的次要競品也是可以的，可以幫助補齊盲點。
3. 調研維度
調研維度要根據調研目的來確定，例如如果是為了視覺升級，那么調研維度主要就集中在視覺效果上，如果是體驗升級，那么調研維度主要集中在交互體驗層面。所以維度的選擇一定是和此次調研的目的緊密相關的，不過，倒也不是說如果是視覺升級就只調研視覺方面的內容，而是咱們要有一個主要的調研方向，啥都想要，最后啥都做不好。
4. 結論
結論是最重要的，畢竟，做這次的調研不就是為了這份結論嗎？所以最后一定要有結論，也就是咱們通過調研得到了什么結論。
1. 調研背景
我公司這個項目是做一個官網的改版，官網主要就改版主要目標有兩個：
第一個目標是視覺體驗升級，拆解下來就是界面更好看，內容更好找。
第二個目標是提升用戶轉化率，更細致的拆解一下就是讓更多的用戶點擊「咨詢」按鈕。
可以得到關鍵詞：界面更好看、內容更好找、咨詢客服的人數更多。
好，咱們繼續，下一步是找樣本。
2. 調研樣本
前面提到過，樣本最好是直接競品+間接競品（主要是一線大廠競品）。所以這次調研我選擇了幾個直接競品的官網，以及華為、飛書等這樣的做的比較優秀的產品進行輔助分析。
3. 選取調研維度
調研維度又可以分為兩大部分：整體結構、內容拆解。
了解整體架構是每個競品調研都離不開的步驟，可以幫助我們快速了解行業內的通識性做法，畢竟站在巨人的肩膀上才能看得更遠嘛。
①整體架構
我當時的做法是把主要競品的官網都截圖下來，然后一個模塊一個模塊的去分析，其實看下來你會發現，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會發現，哦，原來，這就是行業內的通識性做法。
然后我把這種通識性做法歸納總結出來，發現，其實官網首頁可以劃分為四大板塊：
你看，看似有很多復雜內容的官網， 其實也就這幾個模塊，這樣看是不是就清晰多了。
既然咱們通過架構梳理來了官網的內容，下一步就進行內容的拆解了，拆解什么內容？就是拆解上面總結出來的規律呀。
②內容拆解
為啥要拆解內容呢？因為咱們競品分析的目的不就是要做到“人有我優”嘛，咱們競品分析是為了青出于藍而勝于藍呀，所以咱們不能直接抄人家的內容，這是無效設計，咱們要做的是分析他們的優點，然后借鑒，然后超越。
進行內容拆解的時候，建議先定幾個拆解維度，不然會沒有方向，這里我分了三個維度來進行拆解：
我就拿「建立認知」板塊來舉例。
官網首頁的建立認知是什么？
是讓進來的用戶對整個網站有一個基礎的認知，顧客來了，對店鋪總要有一個第一印象吧。
通過前面的架構拆解我們發現，首頁一般使用 4 種方法來對用戶建立認知，哪四種？banner、產品介紹、解決方案、產品優勢
一個用戶看了 banner，瀏覽了產品介紹和解決方案，看了產品優勢，是不是對咱們的產品有了一個認知了，這就是建立認知的過程。
那么咱們如何去分析呢？
我的做法是一個個板塊分析，有些麻煩啊，但是相信我，值得。
下面我就拿建立認知里面的“產品介紹”來舉例子，看看如何去分析產品介紹這個板塊。
使用 3 個維度來分析：
維度 1：用戶訴求（用戶進來之后的訴求）
產品介紹內容是否有我需要的產品和功能？是否滿足我的需求？
維度 2：業務策略（針對用戶訴求，業務是怎么解決的）
講清楚三個問題，即“我們的產品是什么”、“我們能做什么”、“我們有什么優勢“
維度 3：常用表達形式（用什么樣的表達方式來實現策略）
分點描述：減少大段落文字，分點描述，增強閱讀性，降低理解成本
提煉賣點：將核心功能提煉出來，吸引用戶注意力，精準打擊，結合圖標提升可讀性
試用入口：視覺上強化按鈕，引導轉化
圖文結合：圖＞文，可視化表達降低理解成本，增強臨場感
拆解下來，是不是對產品介紹板塊很了解了，產品介紹板塊主要的目的就是為了講清楚咱們是誰，咱們的優勢啊。王婆賣瓜，瓜雖好，但是咱們得讓來的人知道咱們的瓜好呀，所以表達方式也是至關重要的，用什么形式去表達這個板塊呢？其實競品已經有了很好的解決方案，那就是上面描述的。
你看，這樣一通分析，其實你的方案就自然而出來了，你知道往哪個方向去使勁了，而不是看別人有啥咱們就做啥。
文章來源：優設網 作者：餿面包
如果想知道某個網站配色方式，除了打開開發人員工具或是檢視源碼，也有第三方服務可以使用，即使無法完整復制別人的配色，也能快速得知網站使用的顏色代碼或配色模式，取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢？若你有類似的需求，接下來要介紹的服務或許可以滿足，這項服務會提取特定網頁使用的顏色，讓顏色相關信息更一目了然。
本文要介紹的「Alwane」是一個網頁色彩提取工具，可以在使用者輸入特定的網址后取得該網站使用的顏色代碼或描述，產生為調色盤鏈接，重新分類、編排各種顏色，最簡單的使用方式是輸入網站網址就能提取，也能顯示其他相關色彩，如果想分析、保存某個網站或品牌使用的顏色，Alwane 是個非常方便而且好用的工具。
除了將提取的顏色代碼以可視化方式呈現，還能夠以調色盤或是程序代碼方式呈現，包括 CSS 和 SASS 兩種顯示程序代碼，對于要取得特定的網站顏色來說很有用，若有類似需求的話不妨打開 Alwane 網站試試看。
網站鏈接：https://alwane.io/
使用教學
開啟 Alwane 網站后直接在左上角「Extract CSS Colors」輸入要提取顏色的網址，預設情況下會從 HTML 和 CSS 樣式表單取得顏色，如果某些情境下需要從 JavaScript 獲取顏色可在「Advanced」設定選項找到。
從提取后的色彩結果可以看到各種顏色分布，包括顏色的預覽、變量名稱和色碼（hex code），從左側可選擇為顏色重新分組、排序或是切換 CSS、SASS 色碼。
從上方選項切換調色盤或程序代碼模式，也能快速將所有 CSS 代碼復制到剪貼簿。
如果想要保存或分享網站的配色、調色盤、CSS 等信息，點選右上角「Generate」就能產生鏈接咯！
值得一試的三個理由：
柵格一直都是很多同學非常疑惑的地方，無論是柵格的日常使用，又或者是柵格在整個產品當中的作用，一直以來都有非常多的疑惑，今天就來聊聊柵格在實際工作如何使用，以及產品之間究竟有何區別。
上期回顧：
其實在說柵格的使用，我們就在討論網頁當中的布局方式，以及他們之間的不同點。
布局方式，本質上就是去處理窗口寬度與網頁內容的關系
用戶會使用瀏覽器打開不同尺寸的窗口寬度，而網頁內容究竟應該如何去適應這些窗口尺寸？
通常會分為：固定布局、流式布局、自適應布局、響應式布局
固定布局是一種最為簡單的方式，它的設計邏輯是將頁面當中的內容 “寫死固定” 在屏幕上，內容不會隨著本身窗口寬度進行改變，所有元素都使用 px 作為基礎單位
當然在固定布局當中，窗口大小與頁面內容會存在兩種基本關系：窗口過大則將頁面元素進行居中，窗口過小則展示橫向滾動條
固定布局的好處是這種方式相對簡單，只需將頁面設計好即可，不會存在太多兼容性的問題（因為也壓根沒有考慮兼容性的相關問題）
固定布局通常出現在 老舊的政府項目、網頁的登錄注冊中
流式布局是最基礎的變化布局，它的設計邏輯是將頁面當中的元素設計成可以流動的 “水” ，通過在頁面，設計不同的“杯子”容器來裝下頁面內容
這里的“水”一般指的是 文字、圖標、以及一些頁面重復出現的元素。而杯子通常是我們設計的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度 等等...
因為“杯子”的限制，也就導致水會根據杯子的寬度進行延展流動，進而形成流式布局
使用流式布局可以通過較低的開發成本，來實現一個頁面當中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會比較困難
而流式布局最常使用的方式就是通過柵格系統，來確定整個“杯子”的寬度，進而讓“水”能夠在頁面當中實時滾動展示
這里有兩個需要注意的點：
在研發層面，杯子的大小是需要進行限制的，通常會去設定它的最大值與最小值，當它超過最大值則居中對齊，當他
在流式布局當中，窗口超過其最大值則固定左側，右側空白補充；窗口小于其最小值則展示橫向滾動條
比如與上方同樣的案例，將頁面當中內容的文字實現成流式布局，并且將其流體布局的寬度限制為 200px - 120px，這時則會形成頁面的寬度變化，會導致內容發生直接的變化
流動的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個寬度無法裝下如此多“水”的情況，通常我們可以使用 “...” 進行標注。這個思路后續在響應式布局當中也會體現
自適應布局是將差別較大的屏幕尺寸，去創建多個不同的設計稿，每一個設計稿去對應 一個用戶實際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設計方案
通俗一點來說，自適應就是去單獨設計桌面端、平板端、移動端的頁面，并且將它們三者進行獨立，而系統通過不同尺寸間的 屏幕斷點/瀏覽器 UA 等...（實際前端判斷遠比這個更加復雜，但是為了方便理解可以暫且這么認為），進而適應出不同的設計頁面
而通俗一點來說，自適應是使用多套代碼去對應多個頁面，并且都是在業務非常復雜的情況下進行使用，在國內當中最常使用便是 桌面端與移動端 的產品
比如 語雀 當中的 桌面端與移動端就是一個典型案例，他通過判斷用戶的使用設備，將頁面拆分為了，桌面端、移動設備端、小程序（單獨設計適配的）。因此只需要將每種設備的設計思路分析清楚即可
自適應布局與柵格
自適應主要是表達多個設備尺寸下進行切換的 布局方式，在不同的設備之間，也是需要去使用流式布局以及其他布局方式
而不同的設備之間，屏幕分辨率的差異就會涉及到一個關鍵點，屏幕斷點
屏幕斷點
屏幕斷點，又叫媒體查詢 @media，因為在整個設計當中，屏幕尺寸是極其復雜的，除了我們常見的尺寸：1920、1080、1440、1366
用戶還可以通過調整窗口的大小，進而改變網頁尺寸。而屏幕斷點，最主要是判斷屏幕的寬度，來確定目前的尺寸究竟應該采取什么設計方案
比如在設計一款成熟的 B 端產品時，因為商業的緣故我們作為各大平臺（釘釘、企微、飛書）的 ISV（合作上架），產品上架到不同平臺時，需要對不同平臺尺寸進行調整，比如釘釘為 1024px、企微為 980px、飛書為 1280px，這時為了滿足用戶的實際場景，會將這幾類特殊的尺寸作為屏幕斷點進行對應的布局設計，以滿足不同產品當中的最佳實踐
關于屏幕斷點的媒體查詢，是在前端 CSS3 代碼當中，提供給用戶校驗整個屏幕的寬度，比如在下圖前端代碼當中，則代表在屏幕尺寸小于 480px 時，使用 字體大小為 16px
而確定斷點才是這其核心，這里給大家提供兩個思路，實際設計當中還會更為復雜：
物理斷點：也就是屏幕當中，已經劃分好的斷點方式，比如顯示器的全寬大小、不同設備之間的屏幕分辨率差異
設計斷點：在設計過程當中，一些必要的屏幕尺寸。比如上方講到不同平臺的設計問題
其實屏幕斷點不是最終目的，最終還是想通過屏幕斷點，將頁面當中不同的不同元素的處理方式實現在設計稿中，如果不需要，完全可以不考慮增加屏幕斷點。
這里先多聊一句，其實響應式的大規模普及，是源自 2015 年 Google 的倡導（可以看到 Google 旗下的很多產品都采取的響應式布局，例如 YouTube），它最初的目的非常簡單，就是為了提高響應式在移動終端上的運行效率。因為在 2015 年時，安卓 生態下的屏幕尺寸多到可怕，以至于需要有一套解決辦法來讓用戶運行并使用。
響應式布局是確保一個頁面當中所有的設備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進行產生的一種技術方案。它更像是 流式布局與自適應布局 的結合，它能夠通過對屏幕尺寸的快速響應，進而對頁面的內容進行更為細致的變化。
通俗一點來說就是通過一套代碼去實現多個頁面，并且將多個頁面的內容進行細化，進而能夠快速適配多個設備。
對于多個設備，最主要是調整頁面柵格數量、水槽寬度、頁面距進行適應，比如在 YouTube 當中，就是通過響應式布局，讓頁面實時響應進行處理。
響應式布局與柵格
比如以 Ant Design Pro 的頁面進行拆解，你會發現它在 575、767、991 的尺寸中，頁面布局發生變化，然后根據屏幕斷點之間的頁面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點可以劃分為 320、576、768、992、1200，響應策略如下圖：
你會發現布局其實是依賴于柵格，而柵格的使用，正是由于不同的布局所導致。只有通過柵格，才能夠確定流式布局的比例、響應式布局的變化方式，但是在 B 端產品當中，并不是所有頁面都需要使用柵格，經常看到一些作品集其實是為了柵格而柵格
在 B 端產品當中在，真正使用柵格的地方更多是工作臺、官網，而其他相對復雜的頁面是沒辦法使用柵格，而對我們每一個產品而言，可以優化的點就是在屏幕尺寸較小的情況下，默認讓整個產品導航菜單收起，以提供給用戶更多展示內容。
文章來源：優設網 作者：CE青年
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
什么是柵格？我這里就不做說明了。很多優設的文章都寫的很清晰了。這篇文章僅從我最開始接觸柵格所遇到的困惑和部分設計師始終糾結的點來和大家一起討論討論。
B 端到底用什么尺寸進行設計？
要弄清楚用什么尺寸設計，首先要確定布局。我們常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。上下布局一般是固定頂部，有點類似于 PC 網頁設計，實際上也差不多。現在的B端設計中很多都會搭配著這種布局用，比如幫助中心、消息通知，客戶入網申請等（這些我都遇見并做過）。左右布局和“T”字布局，一般固定左側，右側區域做自適應。
我們看一下百度統計最新出來的當前計算機分辨率數據，從統計的數據中可以看出，小尺寸的屏幕是越來越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進行設計了？
顯然不是按照這個維度來確定尺寸的。對網頁設計來說，設計師差不多都知道有一個 1200 有效內容區域的說法。如果沒有特殊要求，上下布局也是遵循這個原則的。設計師中絕大部分，包括我很多同事平時基本上用的 1920 和 1440 兩種尺寸來進行設計。對于 B 端來說，不管你采用 1920 或者 1440，在做上下布局頁面定寬設計的時候，遵循 1200 有效內容區域這個原則就是沒有問題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結，沒有特殊要求，這些都沒啥問題。
上下布局在 B 端設計中是一個補充，有的可能有，有的可能沒有，所以用 1920 還是 1440 最好還是根據左右布局來，保持統一。兩年前我看過一篇大廠寫的布局的文章，用的是 1280 的尺寸，記得是說因為考慮縮小瀏覽器會發生遮擋或者擠壓（別問我為啥還記得，因為當時對于尺寸糾結的太厲害，至今難以忘懷），現在因為技術等方面的發展，個人認為再用 1280 的做已經不合適了。1440 的尺寸目前做中后臺是比較通用的，大家也可以參考看一下螞蟻 Ant Design。至于 1920 的用來設計 B 端行不行呢？我認為也是可以的，我就用過，也沒用戶反饋說顯示有問題，我就當他沒問題了。不過我還是建議大家在做 B端設計的時候用 1440 的來做，特別是用戶群很復雜的情況下，方便低分辨率的電腦查看。當然如果我們給某一企業做定制服務，那就沒尺寸的問題了，照著客戶電腦尺寸來就行了。
現在有很多插件可以進行布局，軟件一般也有自帶布局功能。這里不做陳述：
這里介紹我常用的 sketch 布局。
這里我也創建了一個 1440 的網格系統，供大家參考，大家也可以根據自己的實際情況去建立自己的網格。
頂部高度沒有特殊要求建議不要超過 100px，我一般就是 60-80px 內設定的；左側可以根據目錄內容自己設定一下，一般 200 多就差不多了。邊距我一般設定 20px、24px。這樣再對剩下的距離做柵格就行了，列寬保持偶數即可。
有時候做柵格的時候會遇到一部分列寬是 42px，一部分列寬是 43px，這種設定也是可以的，回歸到柵格系統的意義，柵格本質上不是為了保證像素級精確，而是為了保證瀏覽視覺級別的秩序、協調與統一，所以大家沒有必要糾結。
“沒有絕對正確的柵格設計，只有最適合的柵格設計”，希望這篇文章可以幫助對柵格有疑惑的設計師們，同時也期待大家留言，大家一起學習探討。
文章來源：優設網 作者：神經蛙
前言
表單是我們生活中常見的信息添加、錄入的方式之一，如何進行表單的設計也是 B 端設計師的必修課。身邊別的部門的同事常常會說：表單不就是幾個輸入框，幾個組件組成的東西么，挺簡單的，有什么好設計的。但通常情況下，越是簡單的東西，要思考的點卻越多，想要把一個表單做好也是一件不容易的事情。
生活中，大多數人都不喜歡表單，比如前段時間有一些許久沒有聯系過的朋友讓我幫忙填寫一下調查問卷，作為一個熱心市民的我，自然是選擇點開鏈接幫忙填寫；一鼓作氣填了一段時間后，看著剩下的問題，我不耐煩的放棄了填寫這個調查問卷。所以作為設計師，我們應該“由內而外”而不是“由外而內”的去設計表單，如何讓表單變得更容易讓人接受也是設計師應該考慮的問題。
更多兆日UCD的干貨：
表單是一種用于信息添加、錄入的頁面類型。是連接用戶與數據庫的橋梁，通過引導用戶進行信息的填寫，從而提交數據給后臺。在用戶填寫提交時，還需要對用戶輸入內容進行校驗與反饋，保證用戶信息填寫的完整度。
填寫表單是一件麻煩事，當我們想做的是投票、網上購物或者添加好友之前，總是會有表單防礙著我們。正因為多數人不喜歡填寫表單，所以在做表單設計時，我們的首要目標是讓人們迅速輕松的完成填寫，同時獲得系統和用戶想要的東西。
1. 表單拆分
基礎表單中會有以下六個元素：
1. 標簽：標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。
2. 占位提示：直接展示在輸入項中，采用弱提示文本對所需信息描述，當用戶輸入信息時即消失。
3. 校驗：對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內容錯誤等
4. 基礎組件：可交互輸入的區域，是構成表單的核心內容，主要有：輸入框、單（復）選框、上傳、時間選擇器、開關……
5. 提示：描述該輸入項需要的輸入類型，如：上傳的文件類型
6. 按鈕：用戶完成輸入后，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，建議將按鈕懸浮固定在底部。
當我們開始制作某一表單的時候，我們需要強迫自己思考一下每個元素的 UI 問題：
2. 表單錄入模式
表單根據錄入模式可以分為：單步表單、分步表單和高級表單
① 單步表單：
單步錄入指的是在一個頁面即可完成內容輸入。使用于內容較少，結構簡單的場景，我們常見的登錄頁就是典型的單步表單。
② 分步表單：
內容較多、錄入內容的方式差異較大的情況且業務本身具有流程化特性，一般通過添加分步導航展示內容。常見的例如銀行轉賬，修改密碼等等。
③ 高級表單（分組表單）：
高級表單（分組表單）：主要用于需要一次性錄入大批量數據的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內容進行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內容都是基于前一步來填寫、是前一步反饋。
3. 表單的頁面框架
表單的頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。
整頁式（新頁面）：最常用方式，適用于絕大部分的表單，可以支持構建復雜的表單。
彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。
側邊欄式：與彈窗式相似，通過小面積的側邊欄進行編輯；可承載比彈窗更復雜一些的表單內容，可以有滾動條。
我們在選擇頁面框架時通常需要綜合以下三個因素去考慮：
4. 表單的排列方式
① 布局方式
在制作表單的時候分成兩種排列方式：單列布局和多列布局。我們可以通過以下幾個因素去考慮使用什么布局：
1. 在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上至下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。
2. 多列布局的表單會導致用戶的視覺路徑變長，用戶需以 “Z” 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。
但是有時部分業務訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。
單列布局
優勢：視覺路徑清晰，填寫效率高，體驗好；
劣勢：垂直空間占用率高。
建議使用場景：表單內容較少的情況下使用單列布局
多列布局
優勢：省空間，能夠放置更多的控件；
劣勢：視覺路徑模糊，填寫成本高，填寫易出錯。
建議使用場景：關聯性強的填寫項橫向排放，且將該列中最重要填寫項的放于最左側。
② 標簽對齊方式
標簽的對齊方式有：左對齊、右對齊和頂對齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標簽的對齊方式。
馬泰奧·彭佐在 2006 年 7 月對表單的每種對齊方式做過眼動測試研究，根據研究結論做出以下分析：
頂對齊標簽：
研究中，從標簽移動到輸入框只需 50 毫秒。比左對齊標簽快了 10 倍，后者需要 500 毫秒；比右對齊標簽方式快 2 倍，后者高達 240 秒。能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行上下單向運動。
優勢：眼動測試中移動速度最快，最有利于提高用戶填寫表單的效率。標簽字數相比于左右對齊標簽可容納更多字數。
劣勢：縱向空間占用率高，對于小屏用戶不太友好（設計前需要考慮用戶使用場景以及使用設備）
建議使用場景：希望用戶快速完成表單；對標簽的擴展性高，有國際化需求（中文轉英文，英文會比較長）；更適用于彈窗式、側邊欄式布局。
右對齊標簽：
如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。研究中，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在 170 毫秒和 240 毫秒，而填寫完成時間比左對齊快 2 倍。
優勢：標簽和輸入框位置緊密，更方便填寫
劣勢：右對齊的布局會造成標簽的左側不齊，影響快速閱讀表單的效率問題；如果增加填寫項標題字數過多，整體的表單頁都需要修改，右對齊靈活性低。
建議使用場景：適用于需要填寫效率但受到屏幕垂直面積限制的頁面。更適用于整頁式布局。
左對齊標簽：
在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯系起來，只是花費時間較長。在研究中，典型掃視時間為 500 毫秒，很長說明用戶經歷了沉重的認知壓力。
優勢：易瀏覽標簽；占用縱向空間較少
劣勢：標簽和輸入框距離較大，表單填寫效率低
建議使用場景：需要讓用戶認真思考后填寫的頁面；更適用于整頁式布局
輸入字段上方的粗體標簽
在頂對齊的情況下，設計師可能會想：如果我們將標簽進行加重，這增加了它們的視覺重量，并將它們帶到了布局的最前面，這樣說是不是可以讓用戶更好的去完成表單的填寫呢？但事實卻和設想相反：粗體標簽反而增加了用戶填寫的負擔。
粗體標簽導致從標簽移動到輸入字段的掃視時間增加了近 60% ，從沒有粗體標簽的 50 毫秒到有粗體標簽的 80 毫秒，更突出的標簽沒有明顯優勢。粗體標簽更難讓用戶閱讀和感知——可能是因為粗體文本和輸入字段的相鄰粗邊框之間存在更多的視覺混淆。
小結
標簽位置：單從效率角度看，頂對齊>右對齊>左對齊，但是根據應用場景，效率快并不是我們選擇標簽對齊方式的唯一的指標。在大多數情況下，將標簽放在輸入字段上方效果更好，頂對齊的情況下標簽的擴展性更高，且用戶不會被迫分開查看標簽和輸入字段。需要注意在視覺上將下一個輸入字段的標簽與前一個輸入字段分開。
粗體標簽：閱讀粗體標簽對用戶來說有點困難，因此最好使用純文本標簽。但是，當使用粗體標簽時，可能希望將輸入字段設置為沒有粗邊框。
1. 什么是表單的校驗
為了讓用戶準確的填寫表單，在用戶填寫表單中/填寫表單后，常常會增加我們常說的“反饋提示“，針對反饋信息的準確性，我們會采用兩種校驗形式：前端校驗和后端校驗。
① 前端校驗：
主要負責校驗輸入的內容格式是否正確；例如常見的手機號格式是否正確、密碼格式是否符合要求。
② 后端校驗：
與數據庫相關，主要負責校驗輸入內容是否正確；例如常見的手機號是否存在，密碼是否正確。
③ 校驗觸發條件：
④ 報錯方式：
2. 校驗形式
根據不同的校驗觸發條件和報錯方式，我們可以組合成以下幾種校驗形式：
① 輸入時即時驗證，即時報錯
用戶在輸入的過程中進行實時驗證，輸入框處于聚焦時開始提示，隨著輸入的過程，符合要求后已與用戶通過驗證的反饋。例如在注冊阿里云賬號時，設置密碼需要滿足三個條件，這里采取了即時驗證。
優點：可以實時告知用戶表單的填寫時候符合規范
缺點：實時驗證會使用戶分散注意力，也有可能會引起用戶的反感
使用場景：注冊時需要設置密碼，通過密碼不同的組成，時判斷密碼的強度，比如純數字密碼符合最低安全要求密碼，但增加大些字母和小寫字母后就形成了更安全的密碼
② 失去焦點后即時報錯
用戶在輸入完成后進行驗證，輸入框失去聚焦后（即用戶點擊輸入框以外的位置后）與用戶進行反饋。例如在注冊網易郵箱時，填寫完畢后即時報錯。
優點：為用戶修改錯誤節省時間、避免出現很多錯誤需要改正的情況。
缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改。
使用場景：注冊用戶名時，取消聚焦后會反饋用戶名是否可用，不可用的情況下是被注冊還是格式有問題。
③ 操作后（保存/提交/下一步）后全部報錯
用戶完成表單填寫后，點擊操作按鈕（保存/提交/下一步），系統將表單統一上傳到后端數據庫中進行對比后集中與用戶進行反饋。
優點：減少對用戶的打擾，減少后端服務器壓力，提高效率
缺點：用戶只能點擊按鈕后才可以得到反饋，不能及時修改；若表單過長，用戶返回修改的路徑也將增加。
使用場景：登錄賬號是判斷密碼是否正確
在大數據盛行的今天，人們不僅僅講究以事實說話，更愿意以數據講話。數據作為結果的直接衡量指標，更真實、也更具有說服力，那如何直觀的展示數據，幫助決策者做出正確決策或行動，發揮數據最大的價值？可視化數據大屏應運而生，讓我們一起來談談吧
說到數據大屏的時候，我們要先了解一下數據可視化，那什么叫做數據可視化呢？比較專業的解釋是利用計算機圖形學和圖像處理技術，將數據轉換成圖形或圖像在屏幕上顯示出來，并進行交互處理的一種理論、方法和技術，它為我們研究、處理、分析數據提供了理論依據。
我們人的大腦處理視覺信息的速度比文字快幾萬倍，將抽象的數據轉化成圖表、圖形能更快速幫助我們更快理解數據中的含義，趨勢以及相關性。
簡單來說，可視化數據大屏，將我們難以理解的抽象的數據概念以圖形化的形式展現，方便我們快速理解這些數據的含義，也方便這些重要的信息在最短的時間內傳給最重要的人。
數據大屏可分為信息展示類、數據分析類、監控預警類，多展示酷炫的效果，數據之間有層次區分，好的數據大屏是布局、色彩、圖表、動效的綜合運用。
數據可視化，讓很多員工從繁瑣復雜的數據工作中解脫過來，那它到底有什么優點呢？
近幾年來，國家的相關法律政策相繼出臺，大數據企業的技術研發水平不斷提高，促使大數據行業市場規模從 2014 年的 212.5 億元增長至 2020 年的 548.5 億元，數據可視化對于公司發現解鎖數據潛在價值意義重大。
有研究表明，人類可以用比處理文字快60000倍的速度來處理圖像，可視化能直觀呈現大量數據，以前企業員工檢測到數據進行匯總分析需要數小時，可視化通過特定的格式來呈現大量數據幾乎不費時間。
視覺形式的數據更易理解，數據可視化能快速顯示操作、運營與結果之間的關系。企業管理不是憑空作決定，正確的方式應該是，依據所獲得的數據信息來做輔助分析，數據可視化內容能讓管理人員和決策者清楚看清數據趨勢，快速制定及消化關鍵指標。
比如當上圖科學決策平臺的網絡總數特別時多，決策者可以快速調取相關數據找出異常原因 —— 是上次活動運營推廣到位，故增加了很多用戶？也就是決策者可以通過異常數據快速鉆取數據，用來解釋正在發揮作用的運營條件或決策與所遇到的指標之間的關系。
根據Aberdeen報告收集的信息，利用數據可視化的組織能夠及時訪問信息的可能性比其他組織高28％。數據可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對企業內容運作了解甚少的人。
比如上方的區域經濟地圖，通過地圖與定位街道區域內容、顏色結合的展示樣式，很容易看出各街道產值、稅收等，也更有場景感；居民可支配收入版塊，通過顏色區分、大小圓形、時間線來直觀展示居民收入變化內容，形象且清晰。
制作數據可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會，操作簡單，但它的缺點也很明顯，沒什么特色，靜態數據展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優點是碼數據速度快，自動獲取，看起來很高端，但缺點也很明顯，如：學習成本高、學習比較困難、很難比較熟練的掌握等。
第三類就是SAAS類可視化工具，這類工具容易上手，操作簡單、動態數據自動獲取、動態效果無敵炫酷，不需要下載安裝，缺點就是部分渲染組件比較耗費電腦配置。那我們今天就來推薦幾款常用的SAAS工具。
網易有數大數據是一個企業級的大屏大數據可視化展示系統平臺，具有深度的交互式數據探索。它有豐富的使用場景，支持數據接入、數據導入處理、數據分析生成報告等，用戶無需編程，簡單拖拽即可生成可視化圖表。缺點是數據探索性分析能力有限。
網易有數可視化實戰案例——業務安全大屏。通過大屏進行業務安全監控，清晰的展示各業務分布要點的數據情況，頂部實時更新各重要區域數據情況，銷量對比、售后情況，產品產比，以及用戶分布也有清晰的直觀展示。
FineBI作為一款商業智能（BI）軟件，擁有豐富的報表編輯和數據分析功能，同時它也支持可視化大屏的編輯。決策報表采用了畫布式操作界面，通過拖拉拽可以想成一個強大的、全面的可視化大屏，能實現在一個頁面整合不同的數據，完美的展示各類業務指標，實現數據多維度分析。缺點是大屏組件不夠豐富，開發拓展性不強，不支持云端托管等。
帆軟可視化實戰案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數據，業務辦理詳情等，圖表形式展示內部管理、外部管理情況，分行放貸統計情況等，便于數據管理查看及決策制定參考。
Data V是阿里云內部的可視化大屏開發平臺，同時面向開發者和零基礎用戶，支持大屏圖形化編輯和在線編程開發，可幫助非專業的工程師通過圖形化的界面搭建專業水準的可視化應用。
它有海量行業模板，DataV數據可視化設計團隊會定期從大量真實項目中尋找優質場景，制作為模板，涵蓋媒體、零售、工業、電商、金融、防疫、氣象等多個行業，為用戶提供會議展覽、業務監控、風險預警、地理信息分析等各種設計參考。
產品功能方面，它有豐富的可視化編輯工具，提供多種業務模塊級的非圖表組件，只要通過拖拉拽便可創造出專業的可視化應用，另外豐富的組件庫與模板庫包含多種場景模板，簡單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應用時遇到的整體樣式配置困難。專業的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時數據驅動三維世界生成，低代碼交互配置將復雜邏輯可視化呈現，整體效果更炫酷。它還有靈活開放的部署方式，支持多種發布方式，如：鏈接分享、二維碼發布；支持自定義組件接入；支持云上部署，也支持線上開發。
DataV數據可視化實戰案例——智慧工廠生產控制大屏，綜合呈現了每個生產階段的生產狀態參數，將整個車間的情況匯總到一個調度控制中心，方便管理人員了解各階段的工作情況。
袋鼠云數據可視化EAsyV，擁有業內領先的數據可視化大屏故事策劃、視覺設計、前端和數據開發技術實力，尤其擅長3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數據導入，還有動態面板和交互功能，讓大屏看起來更靈動。
EasyV數據可視化實戰案例——寧波圖書館可視化平臺。大屏包含人流分析監測、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時把握場館運營效果，為其提供館內建設與活動運營的監控分析服務。
深色的大屏設計能讓其數據顯示更明顯，也方便營造科技感，另外大屏設計圖表文字的顏色要統一，避免出挑的內容分散用戶注意力，使用圖片或者是動態的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質呢？
首先是策劃有故事。從客戶的真實需求去梳理數據可視化內部的視覺傳達，確保內容傳達克制有條理，有重點、有故事。盡可能讓用戶花費更少的時間獲取更多信息，完成數據空間到圖形空間的映射，讓數據的價值被看見。
如上方的品牌銷售數據大屏，銷售額與門店數，數據明顯，與銷售額相關內容有季度線上線下銷售額，會員數、款式數量、爆款排行等，故這塊內容排在左側。右側就是區域訂單、毛利統計。中間放用戶關心的地圖區域分布、爆款分析等內容。
其次是可視化要有效率。通過工具軟件，數據可視化變得更簡單高效，變得靈活易實現，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠程控制，能有效率的實現海量數據實時同步，實現高效率、高質量大屏交付。
最后是大屏要有數據價值。數據可視化最重要的還是要落實到數據上，脫離數據談美觀是不切實際的空想，數據可視化就是要充分利用并方大數據的價值，保證數據實時、全域、精準、讓數據講話。
設計可視化數據大屏時我們設計師要抓住問題的重點，即這樣設計出來的內容能不能真的讓數據產生價值，能否經得起業務部門推敲？是否為企業經營提供了幫助？思考完這些再去做的大屏更有價值，大屏做的酷炫是其次，能夠讓人一目了然的看見關鍵信息，聯想到業務實際，才是我們設計師最需要關注的方向。
文章來源：站酷 作者：知果日記YRrui
費茨定律(Fitts'sLw)是一個描述人類運行學的經驗公式，用于計算人們移動手指或鼠標等設備到某個目標的時間，以考慮目標大小和距離為主。
費茨定律的公式是T=a+blog2(D/S+1)，其中T是時間，a和b是實驗測得的常數，D是目標的距離，S是目標的大小。說明了在給定目標情況下，目標距離越遠，需要的時間越長；在給定距離的情況下，目標越小，需要的時間越長。
費茨定律廣泛地用于人機交互界面設計中，例如在B端常用的設計按鈕上，可根據該定律來選擇適當的目標大小和間距，以使用戶更好地達到業務目標。
比如在B端產品彈窗界面設計中，確定和取消按鈕都會放在右下角，使得用戶更容易點擊。確定按鈕更高頻故放在最右邊，視覺表現更明顯，使其更容易一眼點擊。此外，兩個按鈕之間的距離也很重要，因為它會影響到用戶的點擊時間，為了讓用戶更容易進行選擇，按 鈕間保持12px距離，避免用戶誤觸。
1956年美國心理學家喬治·米勒對短時記憶能力進行了定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，記憶信息超過了該范圍就容易出錯。因此心理學家把這個神奇的記憶容量規律稱為“7±2法則”。 在人機交互設計界面中，如果要引入新的元素或操作，應該盡可能地減少其數量和復雜性，以便用戶更容易理解和記憶。
比如在B端卡片設計中的操作按鈕一般會控制在7-2法則即5個操作按鈕，若有其它操作會隱藏在更多按鈕里面，把頻次較高的按鈕放在一級展示中，頻次較少的按鈕放在二級浮窗展示中。通過分解復雜的任務和信息，減少冗余內容使得用戶更容易理解且更快完成業務過程。
格式塔原理是心理學的一個概念，也廣泛應用于設計領域中。該原理認為人類大腦在處理感知信息時，會自動將信息組織成具有整體性、完整性和結構性的形態，即所謂的“格式塔”。
在設計中，格式塔原理有幾個常見應用：
1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設計師可以使用相似的顏色、形狀、大小等元素來將相關的信息組織在一起，提高信息的可讀性和易用性。
2.接近性原則：接近的事物更容易被視為一組，與遠離的事物分離。因此，設計師可以使用空間布局來將相關的信息組織在一起，提高信息的可讀性和易用性。
3.對稱性原則：人類大腦喜歡對稱和平衡的形態。因此，設計師可以使用對稱的布局來吸引用戶的注意力，提高視覺吸引力和美感。
4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設計師可以使用封閉的形狀來強調信息，使用戶更容易理解和記憶。
相似性原則的應用比如在B端的卡片設計中，所有的卡片樣式相似在人腦理解中默認會視為相同的一組數據。
接近性原則比如在B端的表單設計中，常常會將一組數據通過接近性原則組織在一起，提高信息易讀性。
對稱性原則常用在大屏與報表設計中，通過對稱性布局提高視覺美感，吸引用戶注意力。
閉合性原則常用于連續性表格或圖形等設計中，通過不連續性來讓用戶大腦形成封閉路徑強調后續可讀信息。
比如在下面的表格中通過形狀的不連續性反而讓用戶大腦更快感知到還有信息可以滾動查看。
雅各布定律(Jacob'sLaw)是一條常被引用的交互設計法則，它由美國心理學家Donald Norman提出。該定律指出，人們在使用任何新系統時，都會將他們以前所經驗過的類似系統的知識應用于新系統。
雅各布定律的核心思想是，在設計新系統時，應該考慮到用戶的現有經驗和期望，并盡量避免創造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統，并減少學習成本。
比如在B端設計中常用到的圖表編輯快鍵可以延用用戶在其他系統常用到的快捷鍵，如win或mac系統都常用到的快捷指令可復用到B端產品的快捷操作中。
防錯原則(Principle of Fail--Safe or Fault-Tolerance)是一種設計思想，其目的是減少或避免因錯誤或故障而導致的不良后果。它通常被用于設計高度可靠的系統或設備，以確保在錯誤事故發生時，系統或設備仍然能夠繼續正常運行，或者能夠平穩地停止運行，以避免進一步的損害或危險。
在界面設計中如設計可撤銷操作，通過系統中允許用戶執行可撤銷操作，以避免因誤操作而導致的不良后果。
或在界面設計中常用到的反饋和提醒彈窗等操作，以幫助用戶及時發現錯誤或故障，并采取適當的措施。
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復雜性質量守恒」。
該基本定律覺得：該定律認為每一個過程都有其固定的復雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
可以通過簡約至上的隱藏、轉移、刪除等原則進行用戶體驗的提升。
早在14世紀，哲學家、圣方濟各會修士奧卡姆的威廉提出來了奧卡姆剃刀原理，這個原理說的是“切勿浪費較多東西去做較少的東西同樣可以做好的事情”，后來以一種更為廣泛的形式被人們知曉“如無必要，勿增實體”。
奧卡姆剃刀常用于兩種假說的取舍上：如果對于同一現象有兩種不同的假說，我們應該采取比較簡單的那一種。對于幾個功能相同的設計，在設計都可用的情況下，則選擇視覺干擾較少的設計。
在設計上則能夠指導我們對產品做減法，去減少不必要的元素，在進行設計的時候，先分析用戶的的主流程是什么，流程內的引導盡量弱化，沒有必要則不增加。
比如在B端產品設計中的登錄頁面以登錄流程為核心，不需要增加其它沒必要的流程。
除了以上七大定律外，也有尼爾森的10大設計原則，與以上定律基本一致?？偠灾换ピO計規律的宗旨都是幫助設計師創造易用、高效、愉悅的用戶體驗。在B端產品設計中，將交互定律貫穿于產品設計中可以提升產品易用性，降低學習成本，使產品更規范，對企業用戶的工作效率與商業價值都有積極的影響
文章來源：優設網 作者：麗創輕文
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
六、B端C化未來的設計方向
文章來源：優設網 作者：酷家樂UED
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
產品設計者和開發者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。
「Live Activities設計規范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。
原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點：
1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。
2. 內容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態頻繁更新的內容？
2. 為什么要強調用戶關心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。
進度/狀態頻繁更新的內容，說明每個狀態存在的時間短，如果被覆蓋/忽略，同一狀態就不再復現，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
信息內容和量是官網一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態是什么。
分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網給出許多，在此將其分類梳理如下，為避免大家不好查找官網/譯文對應出處，在句未已標注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態下的Live Activity。（源自：實際操作）
4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）
10. 限制不同設備的展示尺寸。（源自：規范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區域，且展示區域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。
通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統一，這里的顏色不支持開發設置，使用的是系統默認色值。
3. 最小化在存在多個活動的時候展現，左側和原深感攝像頭粘連，右側獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區域，進入APP內頁，或者長按喚出擴展型。
1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
4. 根據一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
對于如何呈現這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態，還有深色&淺色模式下的，以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
2. 一般來說，擴展型和鎖屏狀態下的信息間標準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規則。
1內容和Live Activity邊緣之間的邊距需要保持一致，，發現以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一，才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規范如下。
動態島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側為寬度，右側為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
藍藍設計的小編 http://www.syprn.cn