David是一個來自美國的華僑，哥大畢業(yè)后就來到了亞洲，現(xiàn)在定居北京！David是一個爸爸，也是一個創(chuàng)業(yè)者，在過去7年里都在科技教育領(lǐng)域創(chuàng)業(yè)。David相信，英語啟蒙能在家就能做好，于是推出線上英語啟蒙的小程序。

方案一：駕駛艙風(fēng)格 采用駕駛艙形式，以生產(chǎn)為主的業(yè)務(wù)，使用戶可以更直觀，更全面地了解企業(yè)中所有指標的具體情況，以便快速做出決策。整體顯示更為重要的實時數(shù)據(jù)，監(jiān)控掌握大局觀，及時對有問題的數(shù)據(jù)進行及時處理，板塊區(qū)分明顯，更方便找到相關(guān)數(shù)據(jù)。
方案二：平臺主頁風(fēng)格  在初步調(diào)研產(chǎn)品框架的基礎(chǔ)上，系統(tǒng)首頁重構(gòu)信息組織架構(gòu)，豐富信息和數(shù)據(jù)，根據(jù)不同權(quán)限可調(diào)整頁面信息增加辦公效率。設(shè)計風(fēng)格采用簡約的設(shè)計語言，模塊化布局，方圓并構(gòu)的設(shè)計模式，界面強調(diào)可復(fù)用性和通用性，配色采用品牌色，品牌融合度高。

產(chǎn)品思維是設(shè)計師在設(shè)計產(chǎn)品時所需具備的關(guān)鍵能力之一。擁有強大的產(chǎn)品思維能力可以幫助設(shè)計師更好地理解客戶需求，使設(shè)計效果更加符合市場需求，從而實現(xiàn)商業(yè)成功。那么如何判斷一位設(shè)計師是否具有產(chǎn)品思維能力呢？

大數(shù)據(jù)可視化界面設(shè)計是將海量數(shù)據(jù)以圖形化的方式呈現(xiàn)，以幫助用戶更好地理解和分析數(shù)據(jù)。在這個領(lǐng)域，設(shè)計師需要充分考慮數(shù)據(jù)的特點和用戶的需求，以創(chuàng)造出易于理解和操作的界面。本文將介紹大數(shù)據(jù)可視化界面設(shè)計的7個關(guān)鍵知識點，并提供相關(guān)的技巧和實踐建議。

一、用戶心智模型是什么

先問你一個問題。

拼多多、淘寶、京東這三家購物平臺，你認為它們的區(qū)別是什么？

或者換個方式問你。

買電器你去哪個平臺？買衣服你去哪個平臺？ 買垃圾袋你去哪個平臺？

是不是有了答案了？

沒猜錯的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。

你看，這就是一個購物心智模型，你的心里對這三家平臺已經(jīng)產(chǎn)生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？沒錯，這就是心智模型。

百度百科對心智模型的定義是：

“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識的局限?！?

關(guān)鍵詞是：故事、習(xí)慣、局限。

淘寶一開始就我們講了一個故事，一個萬能的集市，我們習(xí)慣在上面買衣服，但是也產(chǎn)生了局限性，那就是，當(dāng)我們想買大額電器的時候，還是會選擇京東。

我個人對心智模型的理解是：

我們內(nèi)心深處對一個事物的看法。

空口聊天多沒意思，下面舉個例子。

這是一尊陶俑，第一眼你覺得她像什么？

是不是覺得像米老鼠？

為什么？

因為陶俑的頭上的發(fā)髻和米老鼠標志性的耳朵很像。

如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？

一定不會。

這就是心智模型，你對頭頂?shù)拇髨A形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現(xiàn)出來，這個發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。

對心智模型有沒有一點印象了？下面我們接著聊。

二、心智模型的3運用

我不想用具體的界面來聊，那樣的話太散，我認為要想理解一個概念，最好還是從“面”的角度來說，所以下面我會舉一些商業(yè)上的案例來輔助理解。

心智模型有哪三種運用方式？

第一種：創(chuàng)建新的心智模型

第二種：改變舊的心智模型

第三種：匹配現(xiàn)有的心智模型

可以理解成一件事情的新生、改變和延續(xù)。

下面咱們一個個來。

第一種：創(chuàng)建新的心智模型

難度指數(shù)：難啊。

記得《盜夢空間》里最難的是什么嗎？

最難的不是盜夢，而是植入一個想法。

創(chuàng)建新的心智模型有異曲同工之妙，都是讓別人內(nèi)心接收一個事物，需要刻意培養(yǎng)。

舉幾個例子。

當(dāng)年外賣剛開始的時候，家家搞補貼，很多時候幾乎不花錢就可以點外賣，后來這些福利沒有了，為啥？

因為點外賣的心智已經(jīng)培養(yǎng)好了，你離不開它了，所以平臺可以“不慣著你了”。

還有唯品會的正品低價、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。

為什么要費勁植入一個新的想法？

因為一旦植入了，就很難改變。

現(xiàn)在我身邊的很多朋友想買一些低價的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習(xí)慣養(yǎng)成就很難改變，意味著什么？

意味著留存和轉(zhuǎn)化的成本更低了。

第二種：改變舊的心智模型

難度指數(shù)：也難。

《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現(xiàn)實世界里”，當(dāng)他和他妻子回到現(xiàn)實世界后，他妻子仍舊認為自己不在現(xiàn)實世界里，這個被植入的想法已經(jīng)根深蒂固，很難改變。

所以改變舊的心智也不簡單。

例如小米最初主打極致性價比，后來想往高端路線走，很難，大家心里已經(jīng)認準了小米就是“性價比之王”，也就是你的產(chǎn)品不僅要好還要便宜。

這就導(dǎo)致小米一漲價，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比，小米往高端發(fā)展，但是仍舊很難。

拼多多的百億補貼也是一樣的道理，一開始的砍一刀深入人心，大家對拼多多的心智已經(jīng)成型：便宜，質(zhì)量一般。拼多多想改變這個心智，推出百億補貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。

第三種：匹配現(xiàn)有的心智模型

難度指數(shù)：相對簡單。

其實匹配現(xiàn)有的心智模型，是相對最簡單的方法，市場已經(jīng)幫你把用戶習(xí)慣培養(yǎng)好了，你直接使用，那肯定事半功倍，省時省力啊。

舉個例子，大家最近有關(guān)注小米的 13 Ultra 嗎？

小米和徠卡聯(lián)合研發(fā)的，主打徠卡調(diào)色的相機。

我有一個同事就直接把手里的微單換成了 13 Ultra，因為拍照足夠好看而且便攜。

這里不是要推銷手機啊，是想讓你們了解 13 Ultra 是個什么東西。

然后給大家看看它的手柄（一個配角，可以拆卸）。

是不是有些熟悉？和相機像不像？

這個手柄就是沿用了相機的心智模式。

小結(jié)一下：

心智模型有 3 種用法：

1. 新建：創(chuàng)建新的心智模型
2. 改變：改變舊的心智模型
3. 延續(xù)：匹配現(xiàn)有的心智模型

下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？

同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個頁面的設(shè)計。

三、心智模型的3匹配

要想匹配用戶的心智模型其實就三步：

了解業(yè)務(wù)、了解用戶、競品調(diào)研。

或者可以這么說， 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上，還要了解行業(yè)內(nèi)的通用做法。

1. 了解業(yè)務(wù)

一定要了解業(yè)務(wù)，為什么？

因為好的設(shè)計方案千千萬，但是匹配你的業(yè)務(wù)的方案才是好方案，如果不了解業(yè)務(wù)，可能設(shè)計出來的方案就是自嗨，例如網(wǎng)上很多的 dribble 風(fēng)設(shè)計。

又比如說手機瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。

為什么？

因為夸克想推翻傳統(tǒng)的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求，現(xiàn)在手機屏幕越來越大，搜索框放在下面手指操作更加方便。

所以，一定要先去了解業(yè)務(wù)。

拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因為最后方案設(shè)計是服務(wù)于最初的業(yè)務(wù)目標的，業(yè)務(wù)不同，呈現(xiàn)的方案也不一樣，最后讓用戶形成的心智也不同。

2. 了解用戶

為啥？給老人和小孩設(shè)計的界面能一樣嗎？

就拿顏色和文字來說。

小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場景下都能看得清楚信息的顏色。

小孩喜歡圓潤的卡通字體，而老人需要識別度更高的字體，更大的字號。

不同的用戶，采用的設(shè)計一定是不同的，只有了解了他們的喜好和痛點，才能做出符合他們心智模型的設(shè)計。

3. 競品調(diào)研

為啥要競品調(diào)研呢？

因為競品和我們的產(chǎn)品類似，那么意味著用戶大概率重合度也高，甚至業(yè)務(wù)上都有一定相似度，那么意味著，競品的方案，大概率是經(jīng)過市場驗證的符合用戶心智模型的方案。

你看，既然競品已經(jīng)給咱們打了個樣，為何還要自己悶頭造輪子呢？

咱們目的是解決問題，又不是為了證明自己很厲害。

但是，不要誤解，我不是說照著競品抄，而是取長補短，所以不僅要調(diào)研，還要分析，分析就是把競品的優(yōu)劣勢找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個雷嘛。

好了，小結(jié)一下，要想匹配用戶的心智模型，一定要了解業(yè)務(wù)、了解用戶，還要做競品調(diào)研了解市場的通識性做法。

以上。

文章來源：優(yōu)設(shè)網(wǎng)    作者：餿面包

一、競品調(diào)研的結(jié)構(gòu)

首先說明，競品調(diào)研的方法有很多，本文只提供一種方法供參考，建議大家活學(xué)活用。建議從下面 4 個方面入手：

1. 調(diào)研背景

主要說一些為什么要調(diào)研，希望通過調(diào)研答達到什么樣的目的？是視覺升級、體驗升級還是為了提升轉(zhuǎn)化率？只有了解為什么做調(diào)研這件事情，才能知道從哪幾個維度調(diào)研。

2. 調(diào)研樣本

建議選幾個直接競品，再選幾個優(yōu)秀的次要競品也是可以的，可以幫助補齊盲點。

3. 調(diào)研維度

調(diào)研維度要根據(jù)調(diào)研目的來確定，例如如果是為了視覺升級，那么調(diào)研維度主要就集中在視覺效果上，如果是體驗升級，那么調(diào)研維度主要集中在交互體驗層面。所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的，不過，倒也不是說如果是視覺升級就只調(diào)研視覺方面的內(nèi)容，而是咱們要有一個主要的調(diào)研方向，啥都想要，最后啥都做不好。

4. 結(jié)論

結(jié)論是最重要的，畢竟，做這次的調(diào)研不就是為了這份結(jié)論嗎？所以最后一定要有結(jié)論，也就是咱們通過調(diào)研得到了什么結(jié)論。

二、實例拆解

1. 調(diào)研背景

我公司這個項目是做一個官網(wǎng)的改版，官網(wǎng)主要就改版主要目標有兩個：

第一個目標是視覺體驗升級，拆解下來就是界面更好看，內(nèi)容更好找。

第二個目標是提升用戶轉(zhuǎn)化率，更細致的拆解一下就是讓更多的用戶點擊「咨詢」按鈕。

可以得到關(guān)鍵詞：界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。

好，咱們繼續(xù)，下一步是找樣本。

2. 調(diào)研樣本

前面提到過，樣本最好是直接競品+間接競品（主要是一線大廠競品）。所以這次調(diào)研我選擇了幾個直接競品的官網(wǎng)，以及華為、飛書等這樣的做的比較優(yōu)秀的產(chǎn)品進行輔助分析。

3. 選取調(diào)研維度

調(diào)研維度又可以分為兩大部分：整體結(jié)構(gòu)、內(nèi)容拆解。

了解整體架構(gòu)是每個競品調(diào)研都離不開的步驟，可以幫助我們快速了解行業(yè)內(nèi)的通識性做法，畢竟站在巨人的肩膀上才能看得更遠嘛。

①整體架構(gòu)

我當(dāng)時的做法是把主要競品的官網(wǎng)都截圖下來，然后一個模塊一個模塊的去分析，其實看下來你會發(fā)現(xiàn)，大家的做法都是有跡可循的。

看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會發(fā)現(xiàn)，哦，原來，這就是行業(yè)內(nèi)的通識性做法。

然后我把這種通識性做法歸納總結(jié)出來，發(fā)現(xiàn)，其實官網(wǎng)首頁可以劃分為四大板塊：

1. 常規(guī)內(nèi)容：head、foot
2. 建立認知：banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢
3. 增加信任：客戶評價、客戶案例、新聞資訊、行業(yè)認可
4. 轉(zhuǎn)化：免費試用、在線咨詢、電話咨詢

你看，看似有很多復(fù)雜內(nèi)容的官網(wǎng)， 其實也就這幾個模塊，這樣看是不是就清晰多了。

既然咱們通過架構(gòu)梳理來了官網(wǎng)的內(nèi)容，下一步就進行內(nèi)容的拆解了，拆解什么內(nèi)容？就是拆解上面總結(jié)出來的規(guī)律呀。

②內(nèi)容拆解

為啥要拆解內(nèi)容呢？因為咱們競品分析的目的不就是要做到“人有我優(yōu)”嘛，咱們競品分析是為了青出于藍而勝于藍呀，所以咱們不能直接抄人家的內(nèi)容，這是無效設(shè)計，咱們要做的是分析他們的優(yōu)點，然后借鑒，然后超越。

進行內(nèi)容拆解的時候，建議先定幾個拆解維度，不然會沒有方向，這里我分了三個維度來進行拆解：

1. 用戶訴求：用戶的需求、疑問或者想達到的目標
2. 業(yè)務(wù)策略：針對用戶訴求，網(wǎng)站做出的一系列解決方案
3. 表達形式：完成業(yè)務(wù)策略的交互/視覺展現(xiàn)方式

我就拿「建立認知」板塊來舉例。

官網(wǎng)首頁的建立認知是什么？

是讓進來的用戶對整個網(wǎng)站有一個基礎(chǔ)的認知，顧客來了，對店鋪總要有一個第一印象吧。

通過前面的架構(gòu)拆解我們發(fā)現(xiàn)，首頁一般使用 4 種方法來對用戶建立認知，哪四種？banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢

一個用戶看了 banner，瀏覽了產(chǎn)品介紹和解決方案，看了產(chǎn)品優(yōu)勢，是不是對咱們的產(chǎn)品有了一個認知了，這就是建立認知的過程。

那么咱們?nèi)绾稳シ治瞿兀?

我的做法是一個個板塊分析，有些麻煩啊，但是相信我，值得。

下面我就拿建立認知里面的“產(chǎn)品介紹”來舉例子，看看如何去分析產(chǎn)品介紹這個板塊。

使用 3 個維度來分析：

維度 1：用戶訴求（用戶進來之后的訴求）

產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能？是否滿足我的需求？

維度 2：業(yè)務(wù)策略（針對用戶訴求，業(yè)務(wù)是怎么解決的）

講清楚三個問題，即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢“

維度 3：常用表達形式（用什么樣的表達方式來實現(xiàn)策略）

分點描述：減少大段落文字，分點描述，增強閱讀性，降低理解成本

提煉賣點：將核心功能提煉出來，吸引用戶注意力，精準打擊，結(jié)合圖標提升可讀性

試用入口：視覺上強化按鈕，引導(dǎo)轉(zhuǎn)化

圖文結(jié)合：圖＞文，可視化表達降低理解成本，增強臨場感

拆解下來，是不是對產(chǎn)品介紹板塊很了解了，產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰，咱們的優(yōu)勢啊。王婆賣瓜，瓜雖好，但是咱們得讓來的人知道咱們的瓜好呀，所以表達方式也是至關(guān)重要的，用什么形式去表達這個板塊呢？其實競品已經(jīng)有了很好的解決方案，那就是上面描述的。

你看，這樣一通分析，其實你的方案就自然而出來了，你知道往哪個方向去使勁了，而不是看別人有啥咱們就做啥。

文章來源：優(yōu)設(shè)網(wǎng)    作者：餿面包

如果想知道某個網(wǎng)站配色方式，除了打開開發(fā)人員工具或是檢視源碼，也有第三方服務(wù)可以使用，即使無法完整復(fù)制別人的配色，也能快速得知網(wǎng)站使用的顏色代碼或配色模式，取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢？若你有類似的需求，接下來要介紹的服務(wù)或許可以滿足，這項服務(wù)會提取特定網(wǎng)頁使用的顏色，讓顏色相關(guān)信息更一目了然。

本文要介紹的「Alwane」是一個網(wǎng)頁色彩提取工具，可以在使用者輸入特定的網(wǎng)址后取得該網(wǎng)站使用的顏色代碼或描述，產(chǎn)生為調(diào)色盤鏈接，重新分類、編排各種顏色，最簡單的使用方式是輸入網(wǎng)站網(wǎng)址就能提取，也能顯示其他相關(guān)色彩，如果想分析、保存某個網(wǎng)站或品牌使用的顏色，Alwane 是個非常方便而且好用的工具。

除了將提取的顏色代碼以可視化方式呈現(xiàn)，還能夠以調(diào)色盤或是程序代碼方式呈現(xiàn)，包括 CSS 和 SASS 兩種顯示程序代碼，對于要取得特定的網(wǎng)站顏色來說很有用，若有類似需求的話不妨打開 Alwane 網(wǎng)站試試看。

Alwane

網(wǎng)站鏈接：https://alwane.io/

使用教學(xué)

開啟 Alwane 網(wǎng)站后直接在左上角「Extract CSS Colors」輸入要提取顏色的網(wǎng)址，預(yù)設(shè)情況下會從 HTML 和 CSS 樣式表單取得顏色，如果某些情境下需要從 JavaScript 獲取顏色可在「Advanced」設(shè)定選項找到。

從提取后的色彩結(jié)果可以看到各種顏色分布，包括顏色的預(yù)覽、變量名稱和色碼（hex code），從左側(cè)可選擇為顏色重新分組、排序或是切換 CSS、SASS 色碼。

從上方選項切換調(diào)色盤或程序代碼模式，也能快速將所有 CSS 代碼復(fù)制到剪貼簿。

如果想要保存或分享網(wǎng)站的配色、調(diào)色盤、CSS 等信息，點選右上角「Generate」就能產(chǎn)生鏈接咯！

值得一試的三個理由：

1. Alwane 網(wǎng)頁色彩分析工具，輸入網(wǎng)址就能提取網(wǎng)頁出現(xiàn)的顏色
2. 從 HTML、CSS 和 JavaScript 獲取色彩信息
3. 查詢結(jié)果會有顏色預(yù)覽、變量名稱和色碼，也能切換為程序代碼模式

柵格一直都是很多同學(xué)非常疑惑的地方，無論是柵格的日常使用，又或者是柵格在整個產(chǎn)品當(dāng)中的作用，一直以來都有非常多的疑惑，今天就來聊聊柵格在實際工作如何使用，以及產(chǎn)品之間究竟有何區(qū)別。

上期回顧：

其實在說柵格的使用，我們就在討論網(wǎng)頁當(dāng)中的布局方式，以及他們之間的不同點。

網(wǎng)頁的布局方式：

布局方式，本質(zhì)上就是去處理窗口寬度與網(wǎng)頁內(nèi)容的關(guān)系

用戶會使用瀏覽器打開不同尺寸的窗口寬度，而網(wǎng)頁內(nèi)容究竟應(yīng)該如何去適應(yīng)這些窗口尺寸？

通常會分為：固定布局、流式布局、自適應(yīng)布局、響應(yīng)式布局

1. 固定布局（Static Layout）

固定布局是一種最為簡單的方式，它的設(shè)計邏輯是將頁面當(dāng)中的內(nèi)容 “寫死固定” 在屏幕上，內(nèi)容不會隨著本身窗口寬度進行改變，所有元素都使用 px 作為基礎(chǔ)單位

當(dāng)然在固定布局當(dāng)中，窗口大小與頁面內(nèi)容會存在兩種基本關(guān)系：窗口過大則將頁面元素進行居中，窗口過小則展示橫向滾動條

固定布局的好處是這種方式相對簡單，只需將頁面設(shè)計好即可，不會存在太多兼容性的問題（因為也壓根沒有考慮兼容性的相關(guān)問題）

固定布局通常出現(xiàn)在 老舊的政府項目、網(wǎng)頁的登錄注冊中

2. 流式布局（Liquid Layout）

流式布局是最基礎(chǔ)的變化布局，它的設(shè)計邏輯是將頁面當(dāng)中的元素設(shè)計成可以流動的 “水” ，通過在頁面，設(shè)計不同的“杯子”容器來裝下頁面內(nèi)容

這里的“水”一般指的是 文字、圖標、以及一些頁面重復(fù)出現(xiàn)的元素。而杯子通常是我們設(shè)計的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度 等等...

因為“杯子”的限制，也就導(dǎo)致水會根據(jù)杯子的寬度進行延展流動，進而形成流式布局

使用流式布局可以通過較低的開發(fā)成本，來實現(xiàn)一個頁面當(dāng)中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會比較困難

而流式布局最常使用的方式就是通過柵格系統(tǒng)，來確定整個“杯子”的寬度，進而讓“水”能夠在頁面當(dāng)中實時滾動展示

這里有兩個需要注意的點：

在研發(fā)層面，杯子的大小是需要進行限制的，通常會去設(shè)定它的最大值與最小值，當(dāng)它超過最大值則居中對齊，當(dāng)他

在流式布局當(dāng)中，窗口超過其最大值則固定左側(cè)，右側(cè)空白補充；窗口小于其最小值則展示橫向滾動條

比如與上方同樣的案例，將頁面當(dāng)中內(nèi)容的文字實現(xiàn)成流式布局，并且將其流體布局的寬度限制為 200px - 120px，這時則會形成頁面的寬度變化，會導(dǎo)致內(nèi)容發(fā)生直接的變化

流動的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個寬度無法裝下如此多“水”的情況，通常我們可以使用 “...” 進行標注。這個思路后續(xù)在響應(yīng)式布局當(dāng)中也會體現(xiàn)

3. 自適應(yīng)布局（Adaptive Layout）

自適應(yīng)布局是將差別較大的屏幕尺寸，去創(chuàng)建多個不同的設(shè)計稿，每一個設(shè)計稿去對應(yīng) 一個用戶實際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設(shè)計方案

通俗一點來說，自適應(yīng)就是去單獨設(shè)計桌面端、平板端、移動端的頁面，并且將它們?nèi)哌M行獨立，而系統(tǒng)通過不同尺寸間的 屏幕斷點/瀏覽器 UA 等...（實際前端判斷遠比這個更加復(fù)雜，但是為了方便理解可以暫且這么認為），進而適應(yīng)出不同的設(shè)計頁面

而通俗一點來說，自適應(yīng)是使用多套代碼去對應(yīng)多個頁面，并且都是在業(yè)務(wù)非常復(fù)雜的情況下進行使用，在國內(nèi)當(dāng)中最常使用便是 桌面端與移動端 的產(chǎn)品

比如 語雀 當(dāng)中的 桌面端與移動端就是一個典型案例，他通過判斷用戶的使用設(shè)備，將頁面拆分為了，桌面端、移動設(shè)備端、小程序（單獨設(shè)計適配的）。因此只需要將每種設(shè)備的設(shè)計思路分析清楚即可

自適應(yīng)布局與柵格

自適應(yīng)主要是表達多個設(shè)備尺寸下進行切換的 布局方式，在不同的設(shè)備之間，也是需要去使用流式布局以及其他布局方式

而不同的設(shè)備之間，屏幕分辨率的差異就會涉及到一個關(guān)鍵點，屏幕斷點

屏幕斷點

屏幕斷點，又叫媒體查詢 @media，因為在整個設(shè)計當(dāng)中，屏幕尺寸是極其復(fù)雜的，除了我們常見的尺寸：1920、1080、1440、1366

用戶還可以通過調(diào)整窗口的大小，進而改變網(wǎng)頁尺寸。而屏幕斷點，最主要是判斷屏幕的寬度，來確定目前的尺寸究竟應(yīng)該采取什么設(shè)計方案

比如在設(shè)計一款成熟的 B 端產(chǎn)品時，因為商業(yè)的緣故我們作為各大平臺（釘釘、企微、飛書）的 ISV（合作上架），產(chǎn)品上架到不同平臺時，需要對不同平臺尺寸進行調(diào)整，比如釘釘為 1024px、企微為 980px、飛書為 1280px，這時為了滿足用戶的實際場景，會將這幾類特殊的尺寸作為屏幕斷點進行對應(yīng)的布局設(shè)計，以滿足不同產(chǎn)品當(dāng)中的最佳實踐

關(guān)于屏幕斷點的媒體查詢，是在前端 CSS3 代碼當(dāng)中，提供給用戶校驗整個屏幕的寬度，比如在下圖前端代碼當(dāng)中，則代表在屏幕尺寸小于 480px 時，使用 字體大小為 16px

而確定斷點才是這其核心，這里給大家提供兩個思路，實際設(shè)計當(dāng)中還會更為復(fù)雜：

物理斷點：也就是屏幕當(dāng)中，已經(jīng)劃分好的斷點方式，比如顯示器的全寬大小、不同設(shè)備之間的屏幕分辨率差異

設(shè)計斷點：在設(shè)計過程當(dāng)中，一些必要的屏幕尺寸。比如上方講到不同平臺的設(shè)計問題

其實屏幕斷點不是最終目的，最終還是想通過屏幕斷點，將頁面當(dāng)中不同的不同元素的處理方式實現(xiàn)在設(shè)計稿中，如果不需要，完全可以不考慮增加屏幕斷點。

4. 響應(yīng)式布局（Responsive Layout）

這里先多聊一句，其實響應(yīng)式的大規(guī)模普及，是源自 2015 年 Google 的倡導(dǎo)（可以看到 Google 旗下的很多產(chǎn)品都采取的響應(yīng)式布局，例如 YouTube），它最初的目的非常簡單，就是為了提高響應(yīng)式在移動終端上的運行效率。因為在 2015 年時，安卓 生態(tài)下的屏幕尺寸多到可怕，以至于需要有一套解決辦法來讓用戶運行并使用。

響應(yīng)式布局是確保一個頁面當(dāng)中所有的設(shè)備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進行產(chǎn)生的一種技術(shù)方案。它更像是 流式布局與自適應(yīng)布局 的結(jié)合，它能夠通過對屏幕尺寸的快速響應(yīng)，進而對頁面的內(nèi)容進行更為細致的變化。

通俗一點來說就是通過一套代碼去實現(xiàn)多個頁面，并且將多個頁面的內(nèi)容進行細化，進而能夠快速適配多個設(shè)備。

對于多個設(shè)備，最主要是調(diào)整頁面柵格數(shù)量、水槽寬度、頁面距進行適應(yīng)，比如在 YouTube 當(dāng)中，就是通過響應(yīng)式布局，讓頁面實時響應(yīng)進行處理。

響應(yīng)式布局與柵格

比如以 Ant Design Pro 的頁面進行拆解，你會發(fā)現(xiàn)它在 575、767、991 的尺寸中，頁面布局發(fā)生變化，然后根據(jù)屏幕斷點之間的頁面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點可以劃分為 320、576、768、992、1200，響應(yīng)策略如下圖：

布局與柵格的關(guān)系

你會發(fā)現(xiàn)布局其實是依賴于柵格，而柵格的使用，正是由于不同的布局所導(dǎo)致。只有通過柵格，才能夠確定流式布局的比例、響應(yīng)式布局的變化方式，但是在 B 端產(chǎn)品當(dāng)中，并不是所有頁面都需要使用柵格，經(jīng)?？吹揭恍┳髌芳鋵嵤菫榱藮鸥穸鴸鸥?

在 B 端產(chǎn)品當(dāng)中在，真正使用柵格的地方更多是工作臺、官網(wǎng)，而其他相對復(fù)雜的頁面是沒辦法使用柵格，而對我們每一個產(chǎn)品而言，可以優(yōu)化的點就是在屏幕尺寸較小的情況下，默認讓整個產(chǎn)品導(dǎo)航菜單收起，以提供給用戶更多展示內(nèi)容。

文章來源：優(yōu)設(shè)網(wǎng)    作者：CE青年

什么是柵格？我這里就不做說明了。很多優(yōu)設(shè)的文章都寫的很清晰了。這篇文章僅從我最開始接觸柵格所遇到的困惑和部分設(shè)計師始終糾結(jié)的點來和大家一起討論討論。

B 端到底用什么尺寸進行設(shè)計？

確定布局

要弄清楚用什么尺寸設(shè)計，首先要確定布局。我們常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。上下布局一般是固定頂部，有點類似于 PC 網(wǎng)頁設(shè)計，實際上也差不多?，F(xiàn)在的B端設(shè)計中很多都會搭配著這種布局用，比如幫助中心、消息通知，客戶入網(wǎng)申請等（這些我都遇見并做過）。左右布局和“T”字布局，一般固定左側(cè)，右側(cè)區(qū)域做自適應(yīng)。

根據(jù)布局確定明確設(shè)計尺寸范圍

我們看一下百度統(tǒng)計最新出來的當(dāng)前計算機分辨率數(shù)據(jù)，從統(tǒng)計的數(shù)據(jù)中可以看出，小尺寸的屏幕是越來越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進行設(shè)計了？

顯然不是按照這個維度來確定尺寸的。對網(wǎng)頁設(shè)計來說，設(shè)計師差不多都知道有一個 1200 有效內(nèi)容區(qū)域的說法。如果沒有特殊要求，上下布局也是遵循這個原則的。設(shè)計師中絕大部分，包括我很多同事平時基本上用的 1920 和 1440 兩種尺寸來進行設(shè)計。對于 B 端來說，不管你采用 1920 或者 1440，在做上下布局頁面定寬設(shè)計的時候，遵循 1200 有效內(nèi)容區(qū)域這個原則就是沒有問題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結(jié)，沒有特殊要求，這些都沒啥問題。

上下布局在 B 端設(shè)計中是一個補充，有的可能有，有的可能沒有，所以用 1920 還是 1440 最好還是根據(jù)左右布局來，保持統(tǒng)一。兩年前我看過一篇大廠寫的布局的文章，用的是 1280 的尺寸，記得是說因為考慮縮小瀏覽器會發(fā)生遮擋或者擠壓（別問我為啥還記得，因為當(dāng)時對于尺寸糾結(jié)的太厲害，至今難以忘懷），現(xiàn)在因為技術(shù)等方面的發(fā)展，個人認為再用 1280 的做已經(jīng)不合適了。1440 的尺寸目前做中后臺是比較通用的，大家也可以參考看一下螞蟻 Ant Design。至于 1920 的用來設(shè)計 B 端行不行呢？我認為也是可以的，我就用過，也沒用戶反饋說顯示有問題，我就當(dāng)他沒問題了。不過我還是建議大家在做 B端設(shè)計的時候用 1440 的來做，特別是用戶群很復(fù)雜的情況下，方便低分辨率的電腦查看。當(dāng)然如果我們給某一企業(yè)做定制服務(wù)，那就沒尺寸的問題了，照著客戶電腦尺寸來就行了。

如何來進行柵格布局？

現(xiàn)在有很多插件可以進行布局，軟件一般也有自帶布局功能。這里不做陳述：

這里介紹我常用的 sketch 布局。

這里我也創(chuàng)建了一個 1440 的網(wǎng)格系統(tǒng)，供大家參考，大家也可以根據(jù)自己的實際情況去建立自己的網(wǎng)格。

頂部高度沒有特殊要求建議不要超過 100px，我一般就是 60-80px 內(nèi)設(shè)定的；左側(cè)可以根據(jù)目錄內(nèi)容自己設(shè)定一下，一般 200 多就差不多了。邊距我一般設(shè)定 20px、24px。這樣再對剩下的距離做柵格就行了，列寬保持偶數(shù)即可。

有時候做柵格的時候會遇到一部分列寬是 42px，一部分列寬是 43px，這種設(shè)定也是可以的，回歸到柵格系統(tǒng)的意義，柵格本質(zhì)上不是為了保證像素級精確，而是為了保證瀏覽視覺級別的秩序、協(xié)調(diào)與統(tǒng)一，所以大家沒有必要糾結(jié)。

“沒有絕對正確的柵格設(shè)計，只有最適合的柵格設(shè)計”，希望這篇文章可以幫助對柵格有疑惑的設(shè)計師們，同時也期待大家留言，大家一起學(xué)習(xí)探討。

文章來源：優(yōu)設(shè)網(wǎng)    作者：神經(jīng)蛙

前言

表單是我們生活中常見的信息添加、錄入的方式之一，如何進行表單的設(shè)計也是 B 端設(shè)計師的必修課。身邊別的部門的同事常常會說：表單不就是幾個輸入框，幾個組件組成的東西么，挺簡單的，有什么好設(shè)計的。但通常情況下，越是簡單的東西，要思考的點卻越多，想要把一個表單做好也是一件不容易的事情。

生活中，大多數(shù)人都不喜歡表單，比如前段時間有一些許久沒有聯(lián)系過的朋友讓我?guī)兔μ顚懸幌抡{(diào)查問卷，作為一個熱心市民的我，自然是選擇點開鏈接幫忙填寫；一鼓作氣填了一段時間后，看著剩下的問題，我不耐煩的放棄了填寫這個調(diào)查問卷。所以作為設(shè)計師，我們應(yīng)該“由內(nèi)而外”而不是“由外而內(nèi)”的去設(shè)計表單，如何讓表單變得更容易讓人接受也是設(shè)計師應(yīng)該考慮的問題。

更多兆日UCD的干貨：

一、什么是表單

表單是一種用于信息添加、錄入的頁面類型。是連接用戶與數(shù)據(jù)庫的橋梁，通過引導(dǎo)用戶進行信息的填寫，從而提交數(shù)據(jù)給后臺。在用戶填寫提交時，還需要對用戶輸入內(nèi)容進行校驗與反饋，保證用戶信息填寫的完整度。

填寫表單是一件麻煩事，當(dāng)我們想做的是投票、網(wǎng)上購物或者添加好友之前，總是會有表單防礙著我們。正因為多數(shù)人不喜歡填寫表單，所以在做表單設(shè)計時，我們的首要目標是讓人們迅速輕松的完成填寫，同時獲得系統(tǒng)和用戶想要的東西。

二、如何進行表單設(shè)計

1. 表單拆分

基礎(chǔ)表單中會有以下六個元素：

1. 標簽：標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。

2. 占位提示：直接展示在輸入項中，采用弱提示文本對所需信息描述，當(dāng)用戶輸入信息時即消失。

3. 校驗：對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內(nèi)容錯誤等

4. 基礎(chǔ)組件：可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時間選擇器、開關(guān)……

5. 提示：描述該輸入項需要的輸入類型，如：上傳的文件類型

6. 按鈕：用戶完成輸入后，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，建議將按鈕懸浮固定在底部。

當(dāng)我們開始制作某一表單的時候，我們需要強迫自己思考一下每個元素的 UI 問題：

1. 這個元素是什么類型的？
2. 如何處理其他這類東西？
3. 元素之間有什么關(guān)系？
4. 通過合并相同類別元素或者擴展該元素和其他元素之間的關(guān)系，能否簡化設(shè)計？

2. 表單錄入模式

表單根據(jù)錄入模式可以分為：單步表單、分步表單和高級表單

① 單步表單：

單步錄入指的是在一個頁面即可完成內(nèi)容輸入。使用于內(nèi)容較少，結(jié)構(gòu)簡單的場景，我們常見的登錄頁就是典型的單步表單。

② 分步表單：

內(nèi)容較多、錄入內(nèi)容的方式差異較大的情況且業(yè)務(wù)本身具有流程化特性，一般通過添加分步導(dǎo)航展示內(nèi)容。常見的例如銀行轉(zhuǎn)賬，修改密碼等等。

③ 高級表單（分組表單）：

高級表單（分組表單）：主要用于需要一次性錄入大批量數(shù)據(jù)的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內(nèi)容進行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋。

3. 表單的頁面框架

表單的頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側(cè)邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。

整頁式（新頁面）：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。

彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。

側(cè)邊欄式：與彈窗式相似，通過小面積的側(cè)邊欄進行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動條。

我們在選擇頁面框架時通常需要綜合以下三個因素去考慮：

1. 內(nèi)容數(shù)量 ：內(nèi)容如果較多不適合使用彈窗式
2. 與原頁面關(guān)聯(lián)程度 ：需與原頁面關(guān)聯(lián)強建議使用彈窗式、側(cè)邊欄式
3. 表單的復(fù)雜程度： 一般高級表單、分組表單、分步驟表單、有表格聚合的表單、聯(lián)動表單等都建議采用整頁式的框架來展現(xiàn)。

4. 表單的排列方式

① 布局方式

在制作表單的時候分成兩種排列方式：單列布局和多列布局。我們可以通過以下幾個因素去考慮使用什么布局：

1. 在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上至下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。

2. 多列布局的表單會導(dǎo)致用戶的視覺路徑變長，用戶需以 “Z” 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。

但是有時部分業(yè)務(wù)訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。

單列布局

優(yōu)勢：視覺路徑清晰，填寫效率高，體驗好；

劣勢：垂直空間占用率高。

建議使用場景：表單內(nèi)容較少的情況下使用單列布局

多列布局

優(yōu)勢：省空間，能夠放置更多的控件；

劣勢：視覺路徑模糊，填寫成本高，填寫易出錯。

建議使用場景：關(guān)聯(lián)性強的填寫項橫向排放，且將該列中最重要填寫項的放于最左側(cè)。

② 標簽對齊方式

標簽的對齊方式有：左對齊、右對齊和頂對齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標簽的對齊方式。

馬泰奧·彭佐在 2006 年 7 月對表單的每種對齊方式做過眼動測試研究，根據(jù)研究結(jié)論做出以下分析：

頂對齊標簽：

研究中，從標簽移動到輸入框只需 50 毫秒。比左對齊標簽快了 10 倍，后者需要 500 毫秒；比右對齊標簽方式快 2 倍，后者高達 240 秒。能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行上下單向運動。

優(yōu)勢：眼動測試中移動速度最快，最有利于提高用戶填寫表單的效率。標簽字數(shù)相比于左右對齊標簽可容納更多字數(shù)。

劣勢：縱向空間占用率高，對于小屏用戶不太友好（設(shè)計前需要考慮用戶使用場景以及使用設(shè)備）

建議使用場景：希望用戶快速完成表單；對標簽的擴展性高，有國際化需求（中文轉(zhuǎn)英文，英文會比較長）；更適用于彈窗式、側(cè)邊欄式布局。

右對齊標簽：

如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。研究中，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在 170 毫秒和 240 毫秒，而填寫完成時間比左對齊快 2 倍。

優(yōu)勢：標簽和輸入框位置緊密，更方便填寫

劣勢：右對齊的布局會造成標簽的左側(cè)不齊，影響快速閱讀表單的效率問題；如果增加填寫項標題字數(shù)過多，整體的表單頁都需要修改，右對齊靈活性低。
建議使用場景：適用于需要填寫效率但受到屏幕垂直面積限制的頁面。更適用于整頁式布局。

左對齊標簽：

在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯(lián)系起來，只是花費時間較長。在研究中，典型掃視時間為 500 毫秒，很長說明用戶經(jīng)歷了沉重的認知壓力。

優(yōu)勢：易瀏覽標簽；占用縱向空間較少

劣勢：標簽和輸入框距離較大，表單填寫效率低

建議使用場景：需要讓用戶認真思考后填寫的頁面；更適用于整頁式布局

輸入字段上方的粗體標簽

在頂對齊的情況下，設(shè)計師可能會想：如果我們將標簽進行加重，這增加了它們的視覺重量，并將它們帶到了布局的最前面，這樣說是不是可以讓用戶更好的去完成表單的填寫呢？但事實卻和設(shè)想相反：粗體標簽反而增加了用戶填寫的負擔(dān)。

粗體標簽導(dǎo)致從標簽移動到輸入字段的掃視時間增加了近 60% ，從沒有粗體標簽的 50 毫秒到有粗體標簽的 80 毫秒，更突出的標簽沒有明顯優(yōu)勢。粗體標簽更難讓用戶閱讀和感知——可能是因為粗體文本和輸入字段的相鄰粗邊框之間存在更多的視覺混淆。

小結(jié)

標簽位置：單從效率角度看，頂對齊>右對齊>左對齊，但是根據(jù)應(yīng)用場景，效率快并不是我們選擇標簽對齊方式的唯一的指標。在大多數(shù)情況下，將標簽放在輸入字段上方效果更好，頂對齊的情況下標簽的擴展性更高，且用戶不會被迫分開查看標簽和輸入字段。需要注意在視覺上將下一個輸入字段的標簽與前一個輸入字段分開。

粗體標簽：閱讀粗體標簽對用戶來說有點困難，因此最好使用純文本標簽。但是，當(dāng)使用粗體標簽時，可能希望將輸入字段設(shè)置為沒有粗邊框。

三、表單校驗形式

1. 什么是表單的校驗

為了讓用戶準確的填寫表單，在用戶填寫表單中/填寫表單后，常常會增加我們常說的“反饋提示“，針對反饋信息的準確性，我們會采用兩種校驗形式：前端校驗和后端校驗。

① 前端校驗：

主要負責(zé)校驗輸入的內(nèi)容格式是否正確；例如常見的手機號格式是否正確、密碼格式是否符合要求。

② 后端校驗：

與數(shù)據(jù)庫相關(guān)，主要負責(zé)校驗輸入內(nèi)容是否正確；例如常見的手機號是否存在，密碼是否正確。

③ 校驗觸發(fā)條件：

1. 用戶輸入時進行校驗（例如：注冊輸入密碼時，實時顯示密碼強度）
2. 用戶輸入完成失去焦點時進行校驗（例如：注冊重復(fù)輸入密碼時，密碼與前一次輸入的是否一致）
3. 用戶輸入完成點擊操作按鈕時進行校驗（例如：注冊點擊提交時進行校驗，手機號已被注冊所以未通過注冊）

④ 報錯方式：

1. 即時報錯
2. 輸入完成后點擊 提交/下一步/保存 等操作后報錯

2. 校驗形式

根據(jù)不同的校驗觸發(fā)條件和報錯方式，我們可以組合成以下幾種校驗形式：

① 輸入時即時驗證，即時報錯

用戶在輸入的過程中進行實時驗證，輸入框處于聚焦時開始提示，隨著輸入的過程，符合要求后已與用戶通過驗證的反饋。例如在注冊阿里云賬號時，設(shè)置密碼需要滿足三個條件，這里采取了即時驗證。

優(yōu)點：可以實時告知用戶表單的填寫時候符合規(guī)范

缺點：實時驗證會使用戶分散注意力，也有可能會引起用戶的反感

使用場景：注冊時需要設(shè)置密碼，通過密碼不同的組成，時判斷密碼的強度，比如純數(shù)字密碼符合最低安全要求密碼，但增加大些字母和小寫字母后就形成了更安全的密碼

② 失去焦點后即時報錯

用戶在輸入完成后進行驗證，輸入框失去聚焦后（即用戶點擊輸入框以外的位置后）與用戶進行反饋。例如在注冊網(wǎng)易郵箱時，填寫完畢后即時報錯。

優(yōu)點：為用戶修改錯誤節(jié)省時間、避免出現(xiàn)很多錯誤需要改正的情況。

缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改。

使用場景：注冊用戶名時，取消聚焦后會反饋用戶名是否可用，不可用的情況下是被注冊還是格式有問題。

③ 操作后（保存/提交/下一步）后全部報錯

用戶完成表單填寫后，點擊操作按鈕（保存/提交/下一步），系統(tǒng)將表單統(tǒng)一上傳到后端數(shù)據(jù)庫中進行對比后集中與用戶進行反饋。

優(yōu)點：減少對用戶的打擾，減少后端服務(wù)器壓力，提高效率

缺點：用戶只能點擊按鈕后才可以得到反饋，不能及時修改；若表單過長，用戶返回修改的路徑也將增加。

使用場景：登錄賬號是判斷密碼是否正確