中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

如何有效地搭建B端產品？在搭建設計策略時，也許你可以將產品看作一個“房子”，并從房屋打造的視角，來理解產品的整體設計思路。本篇文章里，作者用相對具象化的方式，講述了他對B端產品設計的思考，一起來看看吧。

前言

前面幾篇文章主要講了關于產品知識的部分，從這篇開始就是回顧B端設計本身的設計知識。

如果說一個B端產品相當于是一個房子，每個1級頁面相當于一個小的房間。那接下來我就以產品具象化為房子進行講解，方便讀者理解。

一、設計圖紙——如何學習設計規范

1. 作用

設計規范常見的作用主要體現在3個部分。

1）保證設計的一致性

主要是從2個角度進行拆解。

1. 對內角度：多設計師合作，依然能保證設計風格的統一。
2. 對用戶：提高用戶體驗，加深對產品的記憶，提升操作效率。

2）提升開發效率

對于前端同學溝通的有效的工具，能夠提高設計的還原度，降低對接的成本。在開發側可以建立公共組件庫，可以有效地提高開發效率。在開發完成4分之3的時候，走查小組進行還原度測試的時候，能減少問題的發生。

3）方便產品迭代

隨著產品在不同的階段和業務的變化，能夠發現一些問題，或者優化用戶體驗的時候，可以一鍵修改，十分便捷與高效。

建立之后，設計規范的協作流程：先判斷是否需要進行設計？需要的話組件搭建頁面，新增組件交給開發，最后是有頁面開發。不需要的話可以直接進行到開發的流程，設計師不用參與。

這樣的話就會帶來一個問題：這樣的設計師會不會沒有存在感？

在組件庫完善的團隊里確實是會出現這種情況，這就是我前面為什么優先寫的是關于產品的知識、以及用戶調研之類的知識，要知道我們服務的是誰，來保證設計師的競爭力，這個才是成為體驗設計師的的根本。

筆者認為設計師比到最后一定不是設計，而是對于用戶和業務的理解深度。

2. 原則

常見的4個設計原則是：清晰，高效，友好，可控。

1）清晰：親密，對比，對齊，重復。

2）高效：通常會有的特征是一致性，便捷性。高效性要求B端設計盡可能的較少跳轉（原位>展開>氣泡展示>抽屜>新建）。

3）友好：友好原則涉及到了操作的前中后。

• 操作前：給到適時的幫助與引導，減輕用戶迷茫（例子：新手幫助、探照燈、幫助中心）。
• 操作中：通過界面樣式和交互動效讓用戶可以清晰地感知到自己的操作（例子：拖拽特效）。
• 操作后：通過頁面元素的清晰變化，展現當前流轉狀態（例子：跳轉詳情頁，輕提示）。

4）可控：就是在時間和空間可以隨時進行控制。

• 時間上就是自由——用戶可以進行操作，包括：撤銷，回退和終止當前合作等等。
• 空間上說的是導航——讓用戶時刻了解到自己當前的位置并，可以通過導航輕松回到上一級，下一級。

3. 學習方法

學習方法有很多種，我就分享下我自己的學習方法：小到大，搭建順序與使用場景分類。

• 小到大（原子理論）：原子，分子，組件，模塊，頁面。
• 搭建順序與使用場景：基礎元件，展示組件，錄入組建，反饋組建，反饋組建，頁面模式庫。

好了現在設計圖紙出來了，要進行施工了。那我們要完成通用組件（磚和水泥）以及布局柵格導航（房梁和柱子）的搭建了。

二、房梁與柱子——布局與柵格

1. 布局分層

我們將整體布局分為4層：

1. 背景層：最底部的背景，通常指的是背景層。
2. 全局控制層：導航，也是就是能夠支撐整個產品的柱子。
3. 內容層：承載內容的部分，柵格欄主要是用于這一層。
4. 臨時層：彈窗，氣泡，文字提示輕提示等等。

有的后臺內容少，還采用版心布局方式。這個時候應該怎么處理？

在設計上，分為最小的頁邊距和自適應邊距，當屏幕開始縮小的時候，自適應頁面邊距的最小值。臨界值達到斷點之后，內容區發生變化，間距保持一致，水槽不變。另外說一點，設計師可以靈活定義式柵格范圍。

2. 房梁——柵格組成

柵格的組成：頁邊距，水槽，欄。

• 頁面距：左右2邊的邊距表示出內容區的范圍與其他（比如：擦邊導航欄），方便內容進行填充。
• 水槽：欄之間間距，主要是用于模塊之間進行劃分。
• 欄：由水槽進行分割，基本數量=水槽數量+1。在進行高保真還原的場景，是按照相關的比例進行分割。

計算的欄的寬度：若頁面距取20，水槽取16.那每一欄的寬度=「內容區寬度-23*16-2*20」

柵格欄的好處：

柵格欄可以避免設計師憑著自己的感覺進行設計，設計團隊中多位設計師能夠做得更加的整齊規劃。

3. 柱子——導航組件

廣義定義/狹義定義：只要能夠跳轉的都是導航（例如：link）——狹義和廣義分類。

這里我們使用的是廣義分類：全局導航，局部導航。主要是以控制范圍的大小來進行判斷。

1）全局導航

① 頂部導航

常見的使用場景是：導航數量比較少，內容比較簡單，可以追求沉浸式的閱讀體驗。

優點：

• 占用屏幕空間小，為內容留出更多的更大的空間；
• 對視覺的干擾小，符合上到下的閱讀習慣。

缺點也很明顯：

• 隨著業務的發展，拓展性變差；
• 二三級點擊后隱藏，不方便用戶記憶。

② 側邊導航

常見的使用場景是：更加適用于更專注功能和快速操作的系統，大多數用于復雜的系統。

優點：

• 拓展性比較強；
• 層級清晰，1級2級3級導航可以按照流程展示；
• 操作效率高，用戶在操作和瀏覽中可以快速的進行定位，和切換當前的定位。

缺點也很明顯：

• 視覺分隔較為明顯，內容區沉浸感不是很強；
• 視覺動線左右來回移動，比頂部導航還要疲憊；
• 內容區的排版空間更小，需要考慮適配的問題。

③ 混合導航

常見的使用場景是：適用于功能架構特別復雜的，結構復雜的產品。

優點：

拓展性比較強。

缺點也很明顯：

• 操作難度上升，操作動線更加的復雜；
• 內容區的展現收到了更大的影響。

④ 總結

從頂部導航欄到混合導航欄之間的設計，發生了3個變化：

1. 復雜度變高；
2. 沉浸式體驗逐件變差；
3. 內容區的適配性逐件變差。

2）局部導航

① 面包屑導航

常見的使用場景是：2級以上的層級，最好不要超過5級。

常見的位置：

• 導航；
• 內容；
• 背景。

面包屑導航注意點：

• 面包屑導航優先級高于標簽欄導航；
• 面包屑導航的中的每一次點擊都必須有相應的頁面承載；
• 面包屑導航層級過于復雜時候，中間層級顯示可以用“……”呈現。

② 標簽

標簽頁可以幫助用戶在同一個頁面快速地切換不同的類型內容，提高單個頁面的拓展性。一般和時間狀態扭轉相關。

常見的樣式：

• 基礎樣式；
• 卡片樣式；
• 膠囊樣式。

③ 分頁

分頁器常用的場景是為了避免表格數據加載壓力以及減少用戶等待加載的焦慮，從而將表格按照每一頁固定地進行展示，當用戶查看下一頁或者是選擇特定的頁數時選擇的交互方式。

• 優點：可以降低系統的數據加載壓力，可以讓用戶等待的時間減少。
• 缺點：用戶無法一眼看到全部信息，需要翻頁操作，而且在需要定向選擇操作時，也是比較復雜的。

④ 步驟條

主要場景是用于復雜并存在先后關系，將其拆分為一系列的步驟，從而減輕用戶側的操作負擔。通常用于新增商品以及修改密碼等場景。

三、磚頭與水泥——通用組件

在B端常見的“磚頭水泥”包含色彩，字體，字號，行高，間距，圓角，分割線以及按鈕。

1. 色彩

常規分類是：主色板，功能色板，中性色板。主色使用場景：選中態，可點擊，可交互，logo變化，可視化，情感插畫等場景。

主色板的使用主要是兩點：

盡量不要選擇紅色：一方面避免錯誤，與警告色沖突，會產生歧義。同時冷色系包含了理性、商務、科技等語義。更符合B端產品的調性。

如果實在是紅色主色改不動，那么在按鈕的處理上可以用灰色進行處理。

避免高亮色：高亮和熒光色，用戶長時間使用容易產生視覺疲勞。灰調對的顏色容易顯臟，視覺品質感差。作為按鈕的字，辨識度會降低。即使是作為文字鏈接也會不清晰。

1）功能色板

• 成功色：常規是綠色，因為綠色在人們的印象是——生命清新，暢通安全。
• 警告色：常規是橙色，因為橙色在人們的印象中是——危險，警告，焦慮，不安全。
• 錯誤色：常規是紅色，因為紅色在人們的印象中的是——錯誤，暴力，停止，失敗。

2）中性色板

常用與文字、背景分割線等顏色。常規分類N1-N9：

• N1：標題文字，1級正文文字
• N2：二級正文文字
• N3：輔助，說明文字
• N4：disable，提示文字等
• N6：輸入線，按鈕線框
• N7：分組邊框，分割線
• N8：背景色（內容色塊）
• N9：背景色（底層背景，輸入框灰色背景）

如何保證文字的可讀性？

推薦一個查看顏色對比的網址：https://color.review/

2. 字體

1）常見的字體

• IOS：中文——pingfang，英文——san franciso
• WIN：中文——microsoft，英文——arial
• 數字：din（商業需要購買正本）

2）常見字重：如何與前端溝通

• 蘋果：regular mesium semibold
• win：400 500 600

3. 字號

在B端和C端不一樣，在用字上面要講究極度的克制，盡可能的“顏色>字重>字號”。正文字體為14號字，整體的閱讀效率最佳。

在日常的辦公場景，人眼測距得到的結果是人眼距離是50cm，14號字閱讀效果最佳。

4. 行高

行高主要是用于計算多行文字高度時候使用，常規的計算是字號的1.5倍的偶數（例如：14號字的推薦行高是22）。

5. 間距

我是SaaS出身，我們常適配的是1440。有的自研CRM的話有的配的是1024，針對OA辦公人群的話1920能夠更適合于辦公人群。

間距最好選擇8的倍數，常見的補充數值：4，12。

6. 圓角

1）分場景

• 按鈕/輸入框推薦值：2px
• 用于卡片推薦值：4px

2）思考：為什么不用圓角？

• 不利于下拉場景；
• 與輸入框風格格格不入；
• 連續排列里面的一致性。

6. 按鈕

常見的分類方式：

• 大?。和ǔ７譃榇蟆糜陧撁鎯?，中——用于彈唱，小——用于小氣泡；
• 長度：大于最小寬度設置padding值；
• 狀態：主按鈕，文字按鈕，功能按鈕。

按鈕怎么放呢？

一般的：分為右上角，左右相隨，上下相隨，右下角。

閱讀順序：根據位置不同講述順序不同。

• 右上角、右下角：右往左；
• 左下角：左往右；
• 跟隨：左往右；
• 居中：右往左（右手操作習慣）.

什么是好的規范——約束且規則。

四、總結

B端產品設計一般是比較枯燥的，如果是以具象化的思路理解整個產品的設計思路會比較輕松，理解成本也會比較低。

上面講了房梁，柱子和水泥樁頭，之后會將里面的箱子衣柜逐步拆解開來，方便給大家去理解。