<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          遇到復雜表單,用這3個核心方法提高用戶體驗

          資深UI設計者

          業務場景拓展,字段增加又增加,原本眉清目秀的表單變得面目全非。

          想要將這些復雜信息、組件組裝成用戶易填的表單,常常會讓設計師陷入無限的糾結。本文章聊聊用戶體驗視角設計表單的思路,希望對大家有幫助,歡迎一起討論交流。

          結構如下:

          • 表單是什么
          • 表單的內容
          • 設計思路
          • 設計技巧

          表單是什么

          表單是數據錄入、數據展示的重要工具。

          生活中隨處可見,比如面試要填表單、辦銀行卡要填表單、入庫要填表單…

          互聯網產品設計中也離不開表單,如注冊、登錄、商品錄入、功能設置…

          表單的內容

          表單主要由這四類元素組成:標簽、輸入域、操作按鈕、提示信息。

           

          1. 標簽

          uisdc-fj-20210317-1.jpg

           

          標簽文本主要是解釋輸入項的含義,一般不宜太長,需要簡潔明了,快速讓用戶理解。

          標簽對齊方式有左對齊、右對齊、頂對齊、內對齊,都有各自優缺點,不同場景酌情使用。

           uisdc-fj-20210317-2.jpg

          2. 輸入域

          輸入域是表單的核心,是錄入信息的核心交互部分,為了不同信息更易錄入會采用不同交互組件。比如:單行文本框、多行文本框、單選框、多選框、數字輸入框、金額輸入框、日期、日期區間、人員選擇、部門選擇、圖片、文件等,具體組件可以去查看 Ant design、ElementUI 官網。

            遇到復雜表單,用這3個核心方法提高用戶體驗

          3. 操作按鈕

          操作按鈕是表單信息錄入完成后,繼續或取消任務的觸發器。

          為了讓用戶視覺聚焦和更快完成任務,操作按鈕分為主次按鈕,通常主任務操作為主要按鈕,次任務操作為次要按鈕,并且一個場景中通常只有一個主按鈕。比如,提交和取消,保存和取消等。

            遇到復雜表單,用這3個核心方法提高用戶體驗

          4. 提示信息

          錄入提示:幫助用戶更具象的理解錄什么怎么錄。

          幫助提示:表單中如果標簽信息無法讓用戶理解,可以提供幫助信息讓用戶更準確的理解,通常在標簽的前/后有一個幫助按鈕,點擊/鼠標懸浮按鈕出現有幫助信息的彈窗。其他還有頁面幫助信息,新手引導幫助信息等。

          錯誤提示:幫助用戶理解哪里錯了和怎么做正確。

            遇到復雜表單,用這3個核心方法提高用戶體驗

          設計思路

          表單設計目標:讓用戶更輕松獲取表單信息,更容易懂,更快速完成表單信息錄入任務,如果還能讓用戶過程很愉悅就更妙了。(用戶體驗視角)

          設計方法:通過降低用戶行為負荷,提高表單設計的用戶體驗。

          行為發生的常規路徑:通過視覺輸入信息到大腦 (視覺)— 大腦消化信息(認知) — 采取動作(動作)。

           遇到復雜表單,用這3個核心方法提高用戶體驗 

          視覺負荷:用戶在屏幕上識別和尋找信息,都屬于視覺負荷,信息獲取越輕松視覺負荷越低。

          認知負荷:大腦處理信息時理解、思考、記憶都屬于認知負荷,復雜陌生信息的認知負荷需要消耗大量腦力;所以減少認知負荷的核心是減少用戶思考,甚至是不要讓用戶思考,成為大腦潛意識認知的決策。

          動作負荷:用戶在使用產品時如果操作太繁瑣步驟太多,有可能會中途放棄,這就是動作負荷帶來的影響。所以在不大量增加視覺負荷和認知負荷的前提下,減少交互步驟可以降低動作負荷。

          通過降低視覺、認知、動作負荷的“三招”,提升行為產生節點間轉化率,讓任務行為發生更容易。

          誤區:有些人陷入了設計極端,認為操作越少交互設計就越好,實際上用戶能更好閱讀并理解比少一步簡單操作更重要。

          補充:心理負荷在特定場景也是影響用戶行為發生的重要因素,如隱私、健康、安全、財物等。

          設計技巧

          1. 降低視覺、認知負荷

          表單的信息是視覺負荷和認知負荷的源頭,所以如何設計信息易讀易理解就尤為重要。

          灰機的方法就是先盤信息,再梳理(該拆的拆,該合的合,該減的減),然后有節奏編排信息。

          就像搬家后收拾房間,有一大堆東西需要整理,我們通常會先盤下有哪些東西,然后就是該丟的丟,該放在一起的放一起,最后分門別類放在房間的合適位置。

          拿到表單信息后不著急動手,先了解此表單背后的業務場景,理解每一條信息字段背后的業務價值。這是有說服力設計的核心支撐。

          通過拆、合、減的方法,歸類組合信息。字段信息非必要就減掉,相關性高的信息放一起,梳理的目的是讓信息歸類更符合用戶認知,讓信息更易被用戶理解。

           遇到復雜表單,用這3個核心方法提高用戶體驗

          技巧點:

          • 文案盡量簡潔并貼合用戶認知,垂直業務的文案最好是業務語境的表述。
          • 按業務場景合并包裝信息,比如把復雜表單字段包裝成A、B、C三個選項供用戶選擇,用戶更容易理解和易用。

          有節奏展示

          信息有節奏展示有利于用戶更高效獲取、理解信息。畢竟如果信息像機關槍子彈一樣連續涌入大腦,誰都沒耐心看,并且大腦消化也跟不上。

          技巧點:

          • 信息錄入先簡單后復雜,先熟悉后陌生
          • 先放必填基礎信息,后放選填自定義信息
          • 有前后邏輯關系視情況分步展示
          • 信息能單列展示就不用多列(從上至下或從左往右,按一個規律的視覺流信息獲取更輕松)

          2. 降低動作負荷

          通過減少用戶行為成本,達到降低動作負荷的目的。畢竟錄入信息方式越容易,就更容易完成表單錄入。

          技巧點:

          • 能給默認值就不讓用戶選
          • 能讓用戶選就不讓用戶輸
          • 平鋪單選優于下拉單選(有限選項時)
          • 輸入時能智能聯想就聯想
          • 能即時校驗的早校驗糾錯

          文章來源:優設   作者:灰機

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          B端Dashboard設計指南系列

          資深UI設計者

          Dashboard的含義

          前言

          Dashboard在B端設計的工作中是一個繞不開的話題,在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。


          什么是Dashboard?

          Dashboard的中文直譯是儀表盤,最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序,用作稱為“widget”的小型應用程序之運行基礎。



          B端常見Dashboard

          2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達,對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是:為用戶提供全局概覽,讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據,功能和控件。



          Dashboard設計案例

          以下是Dashboard常見4點設計不是很好的案例,現在帶大家一個個看下怎么才是更為合理。


          案例一:右邊Dashboard上的信息做了層級的區分,相對左邊更加直觀。


          案例二:左邊Dashboard顏色偏熒光色,色彩語言相對右邊不適合長期工作使用。


          案例三:設計方案時沒有采用格柵格化解決適配對不齊等等問題


          案例四:dashboard模塊之間間距沒有呼吸感。



          B端Dashboard的功能分類

          設計師需要了解的功能分類

          B端設計中,設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出:“業務整體狀況如何?有哪些關鍵指標?各指標的運行情況分別如何?哪些指標出現異常?需要用戶做些什么?”。由此可知,B端Dashboard產品中大多數都以看為主,輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時,可以用戰略概覽場景提供快速入口。



          1.監控操作:

          使用戶可以一目了然地檢查其狀態,提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。


          2.分析處理:

          通過數據圖表,配合控件進行不同維度的數據分析。以數據為中心,并顯示盡可能多的相關數據視圖。


          數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度,更好分析決策。


          綜合性Dashboard,既有提供數據全局概覽可視化,同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求


          3.戰略概覽:

          在復雜的業務中,可以呈現業務分散的重點信息,用戶可以通過提供入口快速跳轉至相關模塊。



          設計前分析

          了解Dashboard的用戶

          B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后,我們再來了解下用戶場景。例如:用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能:充值。并且需要給到相應充值數據概覽:賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮,可以做到幫助設計師更清晰設計dashboard布局以及設計自查。

          因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。



          信息處理

          當弄清楚需要呈現信息內容后,需要進一步對信息做處理。從用戶的角度,舉個例子在FMS財務系統記賬中,財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求,準確且高效。具體可以從以下四個維度來做進一步處理:覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個,確定核心指標的聯系及優先級。

          合理的信息結構能夠幫助用戶高效閱讀,理解內容。如何將信息碎片有邏輯地組合在一起,合理呈現和布局,選擇使用什么結構視內容而定。


          舉個例子:

          對于管理者的角色來說使用Dashboard的訴求是:及時把控業務情況

          信息處理內容:

          1.掌握重要業務數據:經營數據,訂單數據,客戶數據;

          2.了解員工工作進度;

          3.處理急需解決的工作任務。

          對于執行者的角色來說使用Dashboard的訴求是:高效完成工作任務

          信息處理內容:

          1.急需解決的工作任務:待發貨訂單,待退款,待跟進客戶

          2.了解自己的工作進度

          3.經常使用的功能:發布商品,添加客戶,開單

          4.查看重要通知公告:公司發布的公告


          了解Dashboard的表現設計類型

          Dashboard表現結構常見兩種類型:卡片型、流程型。


          卡片型

          最常見就是卡片型。即將有相關聯的內容進行分組呈現,讓Dashboard內容歸類而不雜亂無章。


          流程型

          內容相互之間具有一定的邏輯關系,如地理位置關系、數字包含關系、對象父子關系等,這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。



          Dashboard的設計

          Dashboard的表現構成

          國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。


          1.全局導航

          在B端Dashboard中,全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。


          1.1平臺LOGO

          一般這里都會放LOGO,對于一些壁壘標準化B端服務,這里通常是給好標準規則,后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務,那么就可以直接定制設計。


          1.2功能入口導航

          就是菜單導航,在B端Dashboard一般都是在側邊。建議最多不要超過9個,遵循7±2原則。盡量將同類型歸類,好好利用下二級分類。另外入口不要太深,用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。


          在國內B端產品中,最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統

          優點:

          拓展性,一級導航的數目可以展示更多;

          層級清晰,一二三級導航都可以流暢展示;

          操作效率高,用戶在操作和瀏覽中可以快速定位和切換當前位置。

          缺點:

          視覺動線左右折回,比頂部導航更易疲勞,

          內容區的排版空間更小,需要考慮適配問題。


          在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式?;旌夏J骄褪菍⒐δ苋肟诜譃轫敳颗c側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。

          優點:

          層級拓展性強,可達四、五級導航。

          缺點:

          操作難度上升、視覺動線更復雜。



          還有一種模式:頂部模式,這種模式在國外產品中較多,在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式,在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航:saleforces、hubspot、zoho。

          優點:

          沉浸感比側邊以及混合都要強,幾乎不會對于用戶的閱讀行為有干擾,因為Web也有頂部瀏覽器菜單。

          缺點:

          一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式



          1.3快捷功能導航

          一般包含:消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角







          2.數據概覽

          在B端Dashboard中,數據概覽通常都是選取最關注的數據指標來展示,而不是全部數據;選取最關注的時間段,而非全部時間段。

          構成:數據名稱+數字

          這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點,甚至可以采用特殊的數字字體,例如DIN系列,來加強對比。



          3.待辦事項

          待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間,避免遺漏任務。

          構成:待辦事項名稱+數字+可點擊跳轉的鏈接

          待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點,數據必須是要能夠點擊的,因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來,平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下,可以采用tap切換的樣式全部展示出來。



          4.常用功能

          用戶高頻操作快捷入口,點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣,需要仔細反復斟酌是否是用戶需要的高頻功能。



          5.任務進展

          用戶當前最關心的任務,常用進度條或者時間軸的形式表示。



          6.平臺推送

          平臺用來觸達企業的信息,一般有產品更新動態,學習培訓,客服,廣告推送,活動消息(這個一般比較常出現在平臺類的b端產品中)



          7.卡片式數據圖表

          卡片式數據圖表可以拆分成圖表+輔助兩種組成部分


          7.1圖表

          B端設計師需要準確通過圖表來表達出用戶需要的維度信息。

          7.1.1折線圖

          隨時間(連續內容)而變化的連續數據,適合表現趨勢。Y 軸刻度值選擇要合理,以數據波動要最大化的顯示


          7.1.2面積圖

          面積圖和折線圖比較類似,針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個,有2個數據類型時,注意調整面積區域的透明度以及色系保持統一



          7.1.3柱狀圖

          通常用來統計累積疊加數據,數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值,單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素,不夠嚴謹,太活潑。最多使用兩種顏色,一種默認,一種hover或tap,保持界面統一性



          7.1.4扇形圖

          有共同的上一級層級作為統計總合,數據之間平級且有占比。數據必須是正整數,至少兩個以上數據,且用不同顏色表示




          7.1.5環形圖

          與扇形圖很相似,但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗,控制好留白呼吸感




          以上是常用的圖形圖表,絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習

          EChart:

          https://echarts.apache.org/examples/zh/index.html

          AntV:

          https://antv.gitee.io/zh](https://antv.gitee.io/zh




          7.2輔助元素

          卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成:標題、軸、提示信息、標簽、氣泡信息、功能(篩選、導出、保存)。當然在實際設計中,會根據場景去修飾刪減一些元素,以此來減少冗余信息,幫助用戶快速達成目標,在最少的時間內獲取更多的信息。



          7.2.1標題

          標題是區分卡片信息,迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復,簡潔概括。



          7.2.2軸

          軸上最重要的內容就是單位,將每個數據在同一軸上都是維持同種基準。便于進行數據測量。



          7.2.2.1軸的細節

          現在知道了軸由哪幾部分構成,那么接著了解細節



          軸線

          軸線細節一般只考慮是否顯示,在有網格線的情況下,可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏,突出視覺重點,減少不必要的線條。


          軸刻度

          軸刻度是軸線上的間距不宜過密,確保信息可讀性以及呼吸感,根據 7±2 法則,在可見的卡片內盡量保持這個規則,可以利用抽樣顯示的手段來優化軸標簽重疊的問題,這種一般是在連續性內容上可以使用。若軸上單位信息確實過多,雖然是連續性內容例如展示30天單位,由于本身卡片信息不是過于最重要層級,設計在相對狹小空間尺寸中,那么建議考慮在軸線上安排滾動條,并將重看單位放置前位。設計特別注意點,將滾動條設計作為輔助元素不宜搶視覺。


          網格線

          網格線是用來輔助圖表數據直觀對比的,增加數據更快速的閱讀性。舉個例子:數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。




          7.2.3提示信息

          以對照的方式來理解可視化對象的項目歸類信息,總結圖形形狀和文本組成內容。



          7.2.4標簽

          在圖表中,標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。



          7.2.5氣泡信息

          當標簽默認不顯示,氣泡信息一般是鼠標tap或者hover時,顯示該位置的數據。在簡潔的頁面中,也能讓用戶直觀看到信息對應數據結果



          7.2.6功能

          這個模塊涉及的內容偏多,在表單頁面更常出現,以后有機會可以單獨說。一般常用功能如篩選、導出、保存??梢宰層脩艨刂坪陀押玫捏w驗



          確定B端產品的設計風格

          首先tob的產品dashboard說到底還是給使用用戶所使用,也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息,還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感,而是突出一種安全,高效,具有客戶親和力的商業產品特性。那么關鍵詞:服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。



          色彩

          常說色彩是一種情緒版,在Dashboard設計中,色彩也是映射關鍵詞的非常重要一個環節



          字體

          B端產品一般都是以數據為主要信息源,針對一些關鍵信息指標時,可以采用特殊的數字字體。由于本身數字字體包內存不大,所以也方便調用。例如DIN系列等等



          設計稿尺寸

          本篇內容都是針對pc端內容,具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計,但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同,C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶,哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。



          設計原則

          上面的內容更多是闡述每個部分的內容,實際工作中設計Dashboard時不一定按照那個順序進行,因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景,確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后,再開始考慮Dashboard設計執行。


          同時在設計執行上也要特別注意幾個點:

          1.突出核心指標(7個左右)

          2.信息層級區分

          3.減少用戶選擇,盡可能默認給到用戶需要的數據維度

          4.界面簡潔嚴謹

          5.避免過多顏色與不統一

          6.數據維度正確圖表選擇



          設計的注意事項以及建議

          1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建,以便與研發團隊一起為業務助力。更好更快的發展。

          2.在tob的dashboard設計中,設計師要特別注意數據表現的落地效果

          3.當dashboard只在設計層面改版,并且改版內容過大時,推薦保留舊版入口,提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計,以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章:《B端必看的引導設計(一)》

          4.允許用戶定制和共享dashboard,雖然不適用于所有的B端產品,如果類似于團隊協作中多種角色共用一套的dashboard平臺,可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求,并且能夠增加dashboard的使用率

          5.dashboard關鍵信息數據盡量設計在一屏以內,作為數據可視化,內容快速瀏覽獲知全局,并且完成任務是比較重要的。

          6. 突出統計數據的變化并對異常情況作出反應

          7.數字設置不一定要設置為右對齊,但是單位是金額,那么要將金額設置為右對齊,為了使用用戶識別方便,快速比較。

          8.設計完Dashboard一定要自查一遍,是否真的符合工作人員的使用場景。有沒有理解不準確的地方。



          最后

          為什么b端設計師要懂得Dashboard,在很多b端業務場景中,有個特點,設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知,就有很大的可能性會造成信息雜亂,并且在Dashboard的界面中充斥著一些無關緊要的指標,這就是失去了Dashboard存在的意義。另一方面在b端產品中,Dashboard往往是以首頁的形式出現的,是非常重要的。


          文章來源:站酷   作者:一九互七

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          B端設計規范如何落地?

          資深UI設計者

          “B端設計規范怎么落實下去是困擾很多設計師的一個問題,我總結一套從制作到落地的全部流程“。

          在B端設計中,設計規范怎么建立才能落實下去之前一直困擾著包括我在內的廣大設計師老鐵們。設計師期望參與產品的每一個角色(產品,設計,前端開發,測試)都能遵循設計規范,結合設計規范內的內容,保證前端開發頁面的還原度。因此從目標來說,其實設計師小伙伴與研發小伙伴的目標是一致的,但是實現起來其實并沒有想象中的簡單。在業務初始階段對業務不熟悉,盲目就著手建立規范其實并不是一個明智的選擇,很多B端的萌新小朋友會在業務尚未明確情況下就從第一個版本就開始制定設計規范,這會蘊含巨大的風險在里面,也不易推動落地。在初期有限的研發資源里只有了解了業務的實際場景,針對場景進行深度思考與分析,與規范涉及人員進行深度溝通統籌各方面資源,才能最后形成一套可以落地執行滿足設計標準和業務需求的設計規范。


          目錄


          01.B端設計為什么要制定設計規范?

          02.什么階段適合建立設計規范?

          03.推動規范需要像需求一樣去迭代!

          04.B端的設計規范需要整理那些東西

          05.搭建組件庫你需要知道的幾件事!

          06.如何輸出規范?

          07.整理設計規范對個人的影響!






          對產品來說

          搭建原型可直接調用組件庫,能搭建出高保真的原型。與設計師溝通更加順暢,小的修改可以直接和開發溝通不需要通過設計師出圖,極大增加了前期的節奏。



          對設計師來說

          當同一個項目由多個設計師共同協作時,由于設計理解不一致等各種原因都會出現設計控件使用混亂等問題,此時為了保證設計各方面統一性需要一份設計規范做引導。



          對開發來說

          按照設計規范建立好公共組件庫,開發效率提升有了明顯的提升,可復用的東西確定了下來不會頻繁改動,設計走查的問題也會逐漸減少。



          對測試來說

          模凌兩可的交互可以有地方看交互樣式了,不需要再詢問設計師。有更多的時間專注于測試功能上的問題了。






          過往,設計師一般默認在啟動一個項目的初始階段進行設計規范的制作,具體時間點跟著版本節奏走。在1.0版本之前就著手規范的制作,其實這是很欠缺考慮的做法,其中蘊含著極多的風險因素在里面。此處分享個人工作中兩個比較建議的規范建立時間點供大家參考。


          2.1 業務處于探索期

          在初始版本開發并未制定相應的業務組件。規范主要涉及到色彩,字體,間距,布局,柵格等通用設計原則以及常用業務組件的定制。此階段搭建的規范具備高效性以及靈活性的特點,由于尚未搭建特殊的業務組件(當領導想要突然調轉方向也不會很慌,改動較小就可以完成整體的規范轉向)此時搭建規范組件庫需要考慮到預留后續更改的空間。 


          優點:靈活,滿足業務隨時更換的需求

          缺點:體量小,僅能支持初步業務場景



          2.2業務處于成長期

          當業務已經迭代幾個版本后,整個團隊對業務的理解都不可同日而語。產品也正到了較為穩定的版本,此時若提出搭建組件庫可以結合業務設計出符業務場景的樣式,每個符合當前業務的組件邏輯和樣式都不是初始階段憑空想象出來的,當產品有一定的發展,有足夠的業務邏輯,積累足夠的業務場景,才能設計出有著自身業務的完善組件庫。


          優點:可以依據反饋沉淀組件庫,發展到一定階段整體變數不會太大

          缺點:0-1階段需要設計師對整體業務設計有比較足的把控力



          我們公司在2020年初開啟的項目,目前已經過了探索階段處于向成長階段過度,當時正值疫情高發整個項目都由我個人負責。現階段整個公司在今年第四季度把系統性的產品和服務競爭優勢提上了日程,畢竟沒有設計規范對整個業務底層設計架構進行指引是很難做好產品差異化和規范化。也是趁此機會,設計可以針對性對現有的業務組件庫以及規范進行一次全面的復盤,迭代出一個新的版本,在團隊內推動落地以便更好適應產品的發展。




          3.1做好產品定位

          在B端的項目評審時,設計師就需要做好B端的用戶畫像,弄明白產品的目標用戶以及使用用戶的區別,他們通常并非同一類人。除了目標用戶的差異外,不同用戶的使用場景也是不一樣的。只用弄清楚了各個角色的關系以及功能設計的邏輯,具體用戶年齡,解決什么問題,才可以產出符合用戶需求的設計。


          3.2整理規范的內容和分類

          在制定規范前,需要明確產品中主要有哪幾種分類,將最基礎的分類定義好方便后續針對分類內容進行整理。B端產品與C端產品既有共同性也有著很大的差異化,可以借鑒但是切忌生搬硬套C端的設計規范。




          3.3排優先級嵌入版本迭代內

          一套完整的規范蘊含內容是非常豐富的,將程序小哥的頭發全部薅完也難以在1個版本迭代里面改完的。因此我們需要將自己作為設計規范這個項目的產品經理,針對現有的需求進行拆分,并排出優先級分版本迭代進產品里面,我們可以依據從大到小的原則進行優先級排序。對產品設計風格影響大的先排,影響小的后排。那么針對我們業務優先級排序是:設計準則>框架布局>組件>控件>場景。當然設計規范的制定不單單局限于設計團隊內部,在嵌入版本里面時可與產品和開發多溝通,以便達到更好的落地效果。



          上面的場景是否很熟悉,開發小哥每天都得忙很多的事情,如果不用線上文檔進行同步的話,他們可能轉頭就會忘記哦~





          4.1 頁面布局


          統一設計尺寸

          據統計,目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 來設計的話是一個比較合適的尺寸,向上適配或者向下適配誤差會比較小。



          頁面框架

          主流頁面框架主要分為左右欄布局和上下欄布局。


          左右布局:頂部菜單欄、左側菜單欄為固定結構,右側主體內容根據分辨率進行動態縮放。

          上下布局:頂部菜單欄為固定結構,主體內容進行動態縮放,需定義兩邊空白區域寬度



          柵格布局

          柵格系統的使用是為了解決自適應和響應式問題,從而更好地進行產品設計和產品開發。響應式柵格常采用 12和24 列柵格系統實現,以滿足 2,3,4,5,6 分比布局等多種情況。固定寬度 Column,將間隔 Gutter 進行動態縮放。

          • 網格(Grid)

          • 柵格總寬度(Container)

          • 列和槽(Column&Gutter)

          • 邊距(Margin)

          • 區塊(Col-n)



          我們的產品是在1440px的框架下進行設計的,采用左右布局的形式,將左側菜單欄(100px)以及間距(24px)減去以后,就是自適應的內容區域(1292px)



          4.2顏色/字體


          顏色

          主色的選擇,需要依據使用人群,目標用戶,使用場景,產品屬性等因素綜合進行考慮,在顏色使用上B端與C端的目的并不相同,C端顏色使用更大膽自由一些,以抓人眼球為主。而B端端使用則是以輔助產品功能為主,需要遵循對比原則,提升產品易讀性。

          小例子:以我們產品舉例,在定義主色之前我向產品要來了關于用戶人群的調研報告以輔助我去推測目標人群以及使用場景,并通過相關平臺(七麥網)(艾瑞網)去找到競品的行業報告。這些資料不僅可以幫你定義產品使用的顏色,還可以輔助你進行風格的定義,將這些報告放入評審的會議里面可以極大增強設計說服力和專業性。



          通過鯨準與艾瑞網等數據相關網站可以輕松獲取行業內的一些基本數據,這些數據足以讓我們進行用戶畫像的初步建立了。



          在規范好顏色以后,需要與前端進行同步,將顏色賦予單獨的編號,方便雙方就顏色上達成統一。如下圖所示,一個編號對應一個RGB色值。



          字體

          B端頁面可讀性很大程度是由排版所決定端,而在排版中文字更是重點中的重點。


          字體選擇

          在參考相關線上的成熟產品后,發現字體的渲染是一個很復雜的過程,首先我們需要知道在Web世界中存在著五大字體家族,江湖人稱font-family:serif、sans-serif、monospace、cursive和fantasy。

          font-family規定元素的字體系列,可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體,則會嘗試下一個。



          在實際使用場景中,用戶的電腦一般是PC和Mac,但是這兩個平臺的屏幕材質、渲染方式都不一樣,所以使用的默認字體也是不一樣的。PC默認使用微軟雅黑,而Mac默認使用蘋方。

          當我們打開一個網站,瀏覽器會讀取font-family中的字體名稱,并去檢索用戶電腦系統中的字體,如果有的話就顯示,沒有的話檢索下一個。



          字號與字重

          字號的選擇有多種方式進行參考,比如等差遞增和等比遞增的方式。我們自身在字體選擇上選擇由4為基數進行等差遞增方式,在定義字號大小時默認采用偶數。



          字重的功能是為了在文本種突出重點強調內容,在文本中常采用3種規格的自重(regular,Medium,Smlbold)

          設定標題一律采用Medium

          正文一律采用Regular,強調內容采用顏色區分大于字重去區分。

          在使用字體時,我們需要判斷其與背景色的對比度是否符合WCAG2.0的最低標準,即3:1,此處我們可以在創建文字樣式時將標準標注進去。當我們使用文字樣式的時候就可以隨時提醒我們不要濫用。


          4.3分隔與間距

          在日常工作中,會常常出現多個小伙伴協同工作時采用的間距不一致的情況。雖然之前有進行口頭上的統一(采用8px為基數)進行設計,但是還是會出現同一情況間距不一致的問題。在參照現有的成熟系統以后,依據親密性原則與格式塔原理整理出符合現有業務的間距規范。




          我會將間距分為豎向間距與橫向間距。為了方便管理與溝通我會將他們進行尺寸上的區分(XS、S、M、L、XL)。


          豎向間距:常用于模塊與模塊之間,一般采用24px,32px,48px

          橫向間距:日常設計中使用頻率最高的間距,一般出現在組件與組件之間




          4.4 圖標規范

          B端設計和C端設計里的圖標無論是從功能,應用場景,圖標的狀態等方面都有非常大的差異,如果按照C端的方法去繪制B端的圖標那簡直是費力不討好。在之前做C端的圖標時常常需要考慮精致感與氛圍營造,而B端圖標功能則是降低用戶認知為優先。為了方便圖標端管理我將圖標分為兩大類型,分別為基礎圖標和業務拓展圖標。且圖標規定在3種尺寸分別為:XS=12px / S=16px / M=20px / L=24px以方便業務隨時調用,且遵循偶數原則。


          基礎圖標 :常規圖標,復用性高且出現地方多

          業務拓展圖標:依據不同業務場景進行定制化的圖標,常常跟著業務走


          圖標尺寸規范

          與間距類似,將圖標同等進行劃分等級。12號字體搭配外框為12px 圖標;14號字體請搭配 16px 的圖標;16號以上的字體搭配 20px 圖標,以達到更好的視覺效果:



          keyline

          通過keyline我們可以保證繪制不同形狀的圖標的一致性,在keyline的基礎上畫圖標時基線可以給予我們一定的參考避免圖標的比例失衡。可以說keyline是圖標的柵格也不為過。



          業務圖標制作規范

          除了常規基礎圖標外,針對業務場景制作的定制化圖標如果不加以限制就會顯得五花八門非常雜亂。當圖標數量增加到一定程度時就會出現同一表意圖標有不同的樣式結果。因此有必要在保持圖標美觀易讀的前提下對業務圖標進行規整。




          圖標命名規范

          隨著業務增多,團隊內之前的隨意命名的習慣也開始凸顯出弊端。在圖標規范中,業務圖標需要將每個業務區分開,每個業務都有著單獨的后綴,這樣可以讓公用圖標與業務圖標更方便的溯源。



          圖標的圖層整理

          著業務線拉長,涉及的團隊人員也越來越多。簡潔整齊的圖層不但能提升團隊效率還可以讓會影響接手工作小伙伴的心態。所以圖層整理還是得納入規范內的,此處不進行具體規范僅做提醒和警示作用。



          圖標交付/iconfont

          在與前端開發溝通達成共識,圖標制作完成確認后,將圖標上傳到阿里巴巴圖標庫中,更方便前端調用圖標大小和調整顏色。如果開發需要自己去找到相關圖標,也可以給予權限讓開發從藍湖上傳圖標(前提是得整理好圖標到藍湖上)





          5.1組件庫到底是什么?

          組件庫常可以類比于常玩的樂高玩具,每個組件都是積木,而產品相當于我們拼好的模型。我們可以根據業務需求,以“搭積木”的方式,讓“模型”快速拼起來。但是并不是說我們可以隨心所欲搭建積木,至少需要看一看“說明書”,而這“說明書”就是設計規范。產品、組件和規范差不多就是這樣的關系。


          5.2搭建組件庫前需要知道的小知識


          原子設計/拆分

          在業務已經發展到一定體量情況下,需要將項目中具備服用行以及拓展性的模塊進行拆解,對于B端產品來說篩選的時候會依據之前迭代的版本內容,把頁面一一羅列出來,將可替換與相似的模塊提取,并利用思維導圖的方式統一歸納,并做成可以被替換的組件。組件的替換建議合成一個大的排期進行替換,避免了線上組件不一致導致體驗問題。

          以我們產品為例:

          依據產品類型將組件拆分為:基礎組件 、業務組件、數據可視化組件、常用模塊。




          原子設計

          將產品拆分后,此時得到很多可復用組件。我們再依據原子設計理論針對性進行拆解直至拆分出5個層面

          • 原子(元素、要素)

          • 分子(組件)

          • 組織(模塊)

          • 模板(原型)

          • 頁面(填充內容)

          從原子開始重新依據定好的視覺規范進行更改,再由原子組成新的分子。



          盒子box

          在與開發小哥溝通設計規范制定的過程中,常提到他們寫CSS樣式的時候是采用盒子(box)去寫的。通過一個個盒子填充來將我們的組件元素放入其中,最終形成前端展示的頁面。


          走查時使用瀏覽器我們也可以看到開發寫的盒子,了解盒子也可以方便我們走查時知道問題在哪。



          5.2按鈕

          按鈕設定有五種類型:主按鈕、次按鈕、虛線按鈕、文本按鈕和鏈接按鈕。主按鈕在同一個操作區域最多出現一次。設計師可以依據自身業務屬性,針對性修改按鈕的圓角大小與描邊,圓角曲率越大越柔越小越硬朗。除了按鈕狀態,在制定規范時還需要考慮到按鈕的其他情況。比如按鈕在放大使用時圓角曲率的變化。



          按鈕的尺寸規定

          常用的按高度可設定為:24px、32px、40px、48px,超出48px的按鈕都屬于特殊按鈕,需要進行單獨設置的,寬度隨著內容區域自適應。常規的按鈕可分為:主要按鈕(Primary Button ), 次要按鈕(Secondary Button),虛框按鈕(Dashed Button),失效按鈕(Disable Button ),危險按鈕(Danger Button),文字按鈕(Text Button)等,對照著不同使用場景靈活運用即可。



          按鈕的自適應

          按鈕與按鈕間的間距隨著網頁尺寸變化而變化,常設定幾種斷點規格進行選擇。



          5.3表單

          表單承載著采集數據信息的功能,是用戶在數據輸入的核心模塊之一。表單基礎單位是由標簽,輸入框,填寫提示,操作按鈕構成。一行行列表單位組成表單界面。


          常見的組合樣式

          據統計,表單內常見的組件樣式有:文本框,文本域,選擇器,開關,checkbox,radio,步驟條,上傳/下載,標簽頁等。組件類別繁多,在選用組件時需要考慮其排布形式,在多列表情況下會著重描述這一點。


          單列表單與多列表單如何選擇?

          在web頁面內,在左側導航條較小情況下會導致右側輸入區域空間較大,縱向空間不足的情況。若此時業務需求輸入內容較多且難以采取分模塊,分步驟交互時,采用雙列或多列表單的形式提高空間利用率也是可以接受的。(ps:可以參照菲茲定律,采用多列的形式需要著重考慮文本框內容長度以及表單間間距的合理性)下面以自身業務為例子,列舉在工作中多列表單出現的一些狀態。




          多列表單極端情況

          采用多列表單后,隨著復雜程度提升會出現各種各樣的情況,此時設計師還需考慮到極端情況下表單顯示問題。如標簽過長規則(標簽最好在最初階段進行限制),帶按鈕如何進行換行,屏幕分辨率改變如何進行處理等。建議由設計師制定規則時與前端小哥進行深入溝通,以保證最終的落地效果。



          讓表單具有節奏感

          之前我在表單寬度沒有進行有意識的規范,導致整個表單呈現一種無序狀態,通過有意識控制表單的寬度可以使我們對整體頁面有著更好對把控,整體對品質感得到提升。可以對現有業務的表單進行梳理,整理出適合自身業務的表單長度單位。此處推薦閱讀Ant_Design《整齊劃一?不如錯落有致》相信你會有更深的理解。



          5.4 表格

          表格,常用語展示數據,用戶既可以在表格里面獲取信息,也可以在表格內進行數據輸入。相對于表單,表格可以進行多維度的數據整理與分析。其難點在于表格的組件交互聯動多,以及數據展示的形式多。表格的信息密度很高是我們在B端頁面設計中涉及最多的一個組件。


          表格的構成

          為了方便記憶,個人將表格分解為2大區域分別是:操作區域以及信息展示區域

          操作區域:標題,工具欄,操作單元格

          信息展示區域:表頭,信息展示單元格,分頁控件



          表頭與單元格

          表頭:表頭分為帶選框與不帶選框/帶icon與不帶icon,需要注意的是表頭上文字表意要清晰,簡潔的表頭能讓用戶更快明白此列的內容。此時需要與業務方溝通限制字數,若字數過長無法刪減,則可以考慮使用tooltips。



          單元格:在與開發溝通后發現,開發在寫表格時并不與我們設計師的邏輯相仿,設計師在設計表格時是依據行與列的思維進行表格的設計,而前端則是通過許多的</tr>標簽與</td>標簽進行堆砌而成。因此在設計時將單元格規范好,前端將更容易還原好表格。



          表格在頁面中的樣式規范

          一般來說,表格內組件功能復雜,為了提升整體表格統一性與設計效率,我整理了業務上幾乎所有的表格樣式。整理需求后發現幾乎所有的表格蘊含序列號與復選操作,故整理了一套通用表格規范以供小伙伴們參考。常規頁面通過柵格,由列的數量決定列寬,與現在的主流框架組件一致;特殊頁面可以與前端溝通后,在設計稿里面標注某單元格進行固定寬度,其他百分比縮放進行處理。



          業務中表格的常見問題

          此處僅提出幾個個人業務中常見情況,更多的表格問題解決方案推薦查看CE青年《B端設計指南06 - 表格(下) 》。


          有些特殊字段采取左對齊不美觀該怎么規范對齊方式?

          常規文本字段:可點擊的字段、普通文本類、數字字母等,此類長短參差不齊的,建議采用左對齊的方式

          特殊字段:日期、時間、字符數一致且比較短可控的,建議與表頭居中對齊

          業務字段:金額、狀態標簽、類型標識等業務性較強的,可根據相關特性與閱讀習慣確定對齊方式


          文本內容過長怎么解決?

          當表格列數過多或者橫向數據過長時,難免出現單個單元格內數據展示不下的問題,此時常采取換行的方式處理。(ps換行處理后的結果需要與后端溝通好,避免出現換行不分字段的情況)



          單元格內操作項數量不一致時,該怎么處理?

          此處建議采用平鋪式進行處理,此方式適用方式比較廣,穩定性較高(親測)

          將所有操作按照一定的預設排列順序進行平鋪,這種方式能夠適應B端的大多數場景,將操作都簡單平鋪出來雖然看上去簡單粗暴,但是在實際工作中,也是一種不錯的處理方式



          每一頁表單展示多少行合適?

          如果你經常與開發打交道你就會發現,開發對表格信息的處理邏輯是通過逐行從上到下進行渲染處理的。如果不對行數進行特定的規范,那么開發可能會采取漸進式加載(用戶通過滾輪下滑的方式滾動到末尾再進行下一批量的數據加載)來解決表格內容過多的問題,這就會導致體驗上的不統一。可以梳理當前業務,遵循盡量不讓用戶過多滑動為原則定制每頁的行數。


          5.5彈窗

          B端業務中使用的彈窗主要分為模態彈窗和非模態彈窗,其最大區別在于對師傅會打斷用戶的操作流程,模態彈窗會要求用戶必須給予操作。而非模態彈窗不會打斷用戶當前操作流程,僅僅起提醒用戶的作用,非模態彈窗常常過一段時間會自動消失。



          常見的模態彈窗有:對話彈窗,表單彈窗分,分步彈窗等

          常見非模態彈窗有:通知,全局提示,警告提示,氣泡提示,文字提示等




          彈窗依據柵格自適應

          為了方便規范系統內等彈窗位置和大小,將彈窗作為一個單獨模塊進行處理是一個不錯的選擇,業務中彈窗的性質一般都是橫向居中展示。將彈窗納入柵格體系中。前端小哥可以讓彈窗的寬度隨著列寬的大小變化而變化。



          5.6組件庫如何進行迭代

          當我們把第一個版本組件庫搭建完成后,對于它當更新和迭代需要依據業務當發展不斷去維護。建議設計團隊內有規劃有目地去維護組件庫當多樣性,以保證組件庫能隨著業務的發展一起成長起來。因篇幅原因,此處遍不細講此部分內容,如果大家感興趣后期可以再單開一篇講講組件庫的迭代流程,此處附上有贊的組件庫迭代流程供大家參考。



          小總結:組件庫需要保持簡潔和清晰,不能為了做組件而做組件。最好的狀態是適合業務當前需求的狀態,組件在于精細而不在于數量。臃腫對組件庫不但不能提升整體團隊效率,反而會拖垮整個工作的節奏。





          搭建設計規范和我們日常處理工作需求類似,并非輸出一份文檔就結束了。我們還需要將做好的設計規范推廣給包括設計小伙伴,PM和開發小伙伴的團隊內外,并且需要得到團隊內的一致認可才算是初步完成。


          如何推廣給PM

          利益點:提升協作效率,減少工作成本


          在啟動設計規范的整理之前,內部宣講讓PM對于設計規范的搭建已經有了一個基礎的概念。否則也不會分配資源給予時間去搭建整體的設計規范。可以通過提升PM與設計的效率和降低原型搭建成本去切入,通過組件庫以及通用模版的搭建PM只需要極低的成本學習一下組件庫怎么使用(我們的PM是使用sketch搭建原型)即可搭建高保真的原型界面。甚至完善好組件庫后直接不需要設計的參與,開發通過原型組件庫搭建頁面。



          設計團隊內部如何推廣

          利益點:提升設計效率,減少人力損耗

          設計規范一般由團隊內小伙伴共同制定,基本上已經對規范的優勢達成共識。因此主要講講如何更好在團隊內部使用規范。


          Library共享+更新日志

          通過Sketch Library 共享組件庫,并建立更新日志規范項目流程提升效率。



          研發團隊內容如何推廣

          利益點:封裝組件,更少的更改,縮短研發流程


          需要研發團隊認可設計規范,前期前端的參與是必不可少的。在制作規范時設計師了解了前端開發的一些簡單原理,前端開發也能及時了解設計師的想法,大家不再是各司其職而是串聯起來共同協作,當規范確認下來前端就不會頻繁改動組件,而且在有限的項目時間中。設計規范的統一極大縮短了設計和前端開發所需的時間,為后面的項目爭取了空間。



          小總結:本人時常聽到一些小伙伴的反饋在公司內部設計師的話語權不夠,公司不太重視設計。其實總結下來就是專業性得不到團隊內的認可。設計師在工作中如何體現自己的優勢是通過一次次的需求業務來體現的,許多小伙伴在做業務時既沒有前期調研,也沒有進行資料收集僅僅只是悶頭開始動手做,往往結果不會太好。在處理需求時團隊內部的同事也是可利用的資源之一,多與他們協作獲取業務相關的信息,不僅能幫你站在全局的角度去思考這個業務,而且能讓團隊內部成員具有參與感,輸出的結果當然更容易讓他人認可。





          收集信息能力

          通過整理規范,需要收集目標用戶,使用場景以及前期調研等眾多資料,此時我們需要去發現信息以及整理信息。這一點在日常工作中也常常被使用到,日常中我們在做需要時也需要不斷去挖掘相關對信息才能從容解決問題。


          歸納總結能力

          將收集好的信息進行分類整理,這要求需要一定對邏輯性。在設計基礎框架時合理對分類可以協助我們處理好每個控件對層級,這項能力無論實在工作還是日常中都有著巨大對好處,可以幫助我們從一堆繁雜的事物中“提綱挈領”,換言之就是“化整為零”,做減法,提取出最關鍵對因素。


          全面復盤能力

          將信息歸納整理好后,需要對全局進行思考,全局的交互都需要考慮到位,比如什么情況下適合跳轉頁面,什么情況下適合給與用戶彈窗。大體符合什么交互原則。除了對大體交互需要考慮到位,細節上也不可以忽視,比如異常情況,極端情況該如何去處理,組件之間該怎么去配合等。在日常工作中我們也可以逐漸有意識去培養此類技能,對項目全局思考的越多,那么對整體項目對把控能力也就越強,與他人合作也會越顯得專業。


          表達能力

          在整理設計規范時,難免會遇到模凌兩可舉棋不定的時候。此時可以尋求向上或者向下的資源尋求幫助,具備良好的表達能力能迅速幫助我們將問題闡述清楚,我認為表達能力是設計師需要具備的重要技能之一。每次在求助它人或向他人匯報,都需要在全面復盤問題過后做到心里有數,將問題自己復述一次是否有漏洞或者沒考慮清楚的地方。長此以往你表達的事情會更清晰,別人也更容易聽懂你說的事情快速理解內在邏輯,那么說服別人推動工作的難度也會越小。


          溝通能力

          在多次與他人溝通,個人認為是對我本人幫助最大的能力了。我總結了幾個和上下游溝通的小技巧希望能幫助到小伙伴們,在開始與他人溝通之前我們需要搞清楚我們溝通的原因與對象。


          原因里面包含:

          包含為什么要進行溝通?(推進項目還是告知)

          想要達到什么結果?(自己能做多少妥協,底線在哪)

          預判對方對這件事持什么態度?(支持/反對/無所謂)

          希望對方做?自己的目的是啥?(求助還是說服)


          對象里面包含:

          和誰溝通?(上游還是下游)

          他們對這件事了解多少?(比我多還是比我要少,需不需要簡單講解一些)

          當然在溝通時還需要考慮方式和語氣,這些都需要好后斟酌。也遇到過情緒不太好的開發小哥,這個時候反倒我們更不能將情緒激化,一般這些情緒化對態度過一會都會消散,可以采取冷處理等情緒過后換一種方式溝通看看。

          文章來源:站酷   作者:Weiyehe 

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          網站界面賞析,簡潔,清新--藍藍設計

          前端達人


          網頁中超過95%以上的信息都是通過文字的形式呈現。 然而,頁面文字并非毫無章法的隨意呈現。事實上,更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計,更能吸引用戶,提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。






          網站界面是基于瀏覽器的界面,隨著人們對于用戶體驗要求的不斷提高,BS界面的設計要求也越來越高,




          接下來為大家分享一下我收集到的案例:

          jhk-1612914009798.pngjhk-1615445795533.jpgjhk-1615445805715.jpgjhk-1615445810968.jpgjhk-1615445871742.pngjhk-1615445943142.pngjhk-1615445959669.png


          --網站界面UI設計--

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服



          中國風網站界面設計賞析

          前端達人

                 數字信息時代,互聯網和智能手機快速發展,促使界面設計成為熱門行業。中國傳統文化博大精深,蘊含多種多樣的中國元素。本文立足中國傳統文化和界面設計,從視覺和交互角度著手進行分析,通過論證中國元素在界面設計中的優秀表現,探討如何使中國界面設計走在時代的前沿。

          下面給大家分享一些“國潮”界面

          WechatIMG1473.jpegWechatIMG1474.jpegWechatIMG1475.jpegWechatIMG1476.jpegWechatIMG1477.jpegWechatIMG1478.jpeg


          --bs界面UI設計--

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服



          電商后臺系統設計(二):訂單管理

          資深UI設計者

          電商后臺產品,涉及眾多模塊,而以商品、訂單、庫存,為核心模塊,模塊之間存在大量交互。訂單較為重要,它記錄了所有的交易數據

          對電商公司來講,最核心最難做的有三部分:商品、訂單、庫存。商品與店鋪、營銷、評價等相關;訂單與會員、營銷、支付、庫存、物流等相關;庫存與訂單、采購、WMS(倉儲管理系統)、營銷等相關。在這里我將結合自己在電商后臺產品設計中遇到的一些問題與解決方案總結出來,僅供參考~


          一.訂單流程

          訂單流程是指C端用戶的操作與后臺發生交互的運轉流程(含正向流程和逆向流程),如下圖:

          undefined當然,在實際業務中,訂單流程遠沒這么簡單。比如在用戶結算付款/取消訂單/退款/退貨流程中,可能還會涉及到滿減、優惠券、積分抵扣等情況。又或者說用戶下單后,電商平臺與WMS的數據交互,都是整個訂單流程中很關鍵的節點。


          二.訂單狀態

          從訂單流程圖可知,正向流程可分為待付款、待發貨、待發貨和已收貨/已完成/交易成功、四個階段,再加上交易關閉(逆向流程產生)。下訂單流程涉及到的模塊主要有支付和庫存,對于用戶端來講訂單在各個階段所涉及到的主要操作如下圖,分為商品行與訂單行的操作(是因為訂單的逆向流程中申請退款等售后操作是商品維度的操作)對于商家后臺來講,訂單各個階段端主要操作有發貨、審核、退款、修改地址等(可參考:三.訂單列表)。

          這里特別說明一下交易成功,是指在收貨后N天后,此時除去售后問題外,渠道側會涉及到平臺和支付渠道結算的問題,貨款需要從支付渠道流入平臺賬戶;商戶側會涉及到平臺需要生成待結算清單問題,明細該筆訂單商戶結算款是多少。


          三.訂單列表

          訂單列表頁由搜索區、列表區和操作區組成。

          1.搜索區域主要包括:訂單編號、訂單狀態、下單時間、買家姓名、支付渠道、訂單等,為了提高工作效率,需要將常用的重要的條件作為篩選項,同時將可以收起次要篩選項,以便于快速查找,一屏展示更多訂單。

          2.訂單列表區的信息來源與訂單詳情,信息種類以及要素較多(可參考:四.訂單詳情信息價格圖)所以后臺列表中不可能直接顯示訂單相關的所有字段,需商家更關注使用頻率更高的字段比如訂單編號、訂單狀態、退款狀態等信息。而剩余的其他信息,可以通過下級訂單詳情頁面展示。


          undefined

          四.訂單詳情

          訂單詳情的信息包括商品信息、訂單信息、用戶信息、支付信息、物流信息等,如下圖所示:

          1.用戶信息包括用戶賬號、用戶身份等級(普通會員/VIP)、用戶的收貨地址、收貨人、收貨人電話等組成。用戶身份等級信息可以用來和促銷系統進行匹配,獲取商品折扣。

          2.訂單信息這里要補充一個概念-拆單。拆單有兩次,一次是訂單層面的拆單-在用戶提交訂單之后、支付之前拆單,這個拆單主要是因為多商品合并支付時,各個商品屬于不同商家,此時訂單需要使用父子訂單進行區分。父訂單是記錄一次下單和合并支付的依據,子訂單是買家和商家跟蹤物流,售后、結算的依據(對于合并支付的訂單,京東是拆為兩個不同的訂單編號,淘寶也是按照店鋪拆為兩個訂單,但是訂單編號相同);二次是商品層面的拆單-在用戶下單之后,商家發貨之前,去拆分發貨單(SKU層面),這個拆單由于商品分屬不同的倉庫/商品品類需要單獨打包發物流。

          3.物流信息分兩種業務場景來講。一,平臺自營商品通過WMS系統完成訂單出庫的是可以自動完成包裹物流信息的回傳;二,第三方店鋪通過自己的倉庫打單發貨的情況,是需要商家在后臺系統手動上傳包裹物流信息。補充一點:現在絕大多數物流公司都開放了物流接口,可以根據物流接口獲取物流狀態信息。當用戶收到貨后,可以根據物流公司反饋的簽收結果,設置提醒用戶確認收貨。


          五.逆向訂單

          1.修改訂單,此操作發生在預下單過程中,用戶沒有提交訂單,可以對訂單一些信息進行修改,比如配送信息,優惠信息,及其他一些訂單可修改范圍的內容,此時只需對數據進行變更即可。值得一提的是,在預下單也就是確認訂單時,是不支持用戶修改選購商品的規格和數量的。這是為啥呢?










          2.取消訂單,此操作用戶主動取消訂單和用戶超時未支付,兩種情況下訂單都會取消訂單,而超時情況是系統自動關閉訂單,所以在訂單支付的響應機制上面要做支付的限時處理,尤其是在前面說的下單減庫存的情形下面,可以保證快速的釋放庫存。

          3.退款,待發貨訂單狀態下取消訂單時,分為商戶退款(庫存不足或者其他原因)和用戶申請退款。其中用戶退款分三種場景:商家還未發貨,系統應該支持用戶申請退款(無需審批);若商品還未出庫,則需要推送至WMS從而在倉庫內進行攔截,攔截成功則暫定出庫,釋放庫存,同步訂單系統同意取消訂單,同時進入退款流程;若商品已出庫,系統不支持退款申請,雙方達成一致后,由賣家點同意退款系統更新退款狀態,對訂單進行退款操作,金額原路返回用戶的賬戶,同時關閉原訂單數據。

          4.退貨退款,需要與商戶進行協商,如果協商過程存在爭議平臺客服介入進行協調。如無爭議,商戶審核通過后告知用戶退貨流程及退回的收件信息,進入退貨流程后,商家收到用戶退貨商品后,庫存系統進行補回,退貨入庫,訂單系統確認后進行退款,同時關閉訂單。


          六.總結

          以上是訂單管理層面的一個整體總結和說明,在完整的電商架構中其實還有調度中心(串聯WMS系統與訂單管理中心)后面爭取在梳理庫存的時候一起分析總結一下這個模塊。


          文章來源:優設 作者:依拳超人

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          電商后臺系統設計(一):商品管理

          資深UI設計者

          電商后臺產品,涉及眾多模塊,而以商品、訂單、庫存,為核心模塊,模塊之間存在大量交互。本文將總結最基礎、最核心的商品管理。

          對電商公司來講,最核心最難做的有三部分:商品、訂單、庫存。商品與店鋪、營銷、評價等相關;訂單與會員、營銷、支付、庫存、物流等相關;庫存與訂單、采購、WMS(倉儲管理系統)、營銷等相關。在這里我將結合自己在電商后臺產品設計中遇到的一些問題與解決方案總結出來,僅供參考~


          1.商品的基本概述

          根據商品的公共數據庫,主要包含品牌庫、屬性庫、通用規格庫、稅率庫、生產信息庫(產地)等信息,先定義出SKU(庫存量單位,例如:大頭筆+黑色,能夠確定一個SKU),然后加上商品描述和規格價格,就成了商品。


          2.商品發布/新增

          維護完商品基礎屬性、特有屬性、銷售屬性并且保存之后,需要維護“商品詳情”(一般通過文本編輯器來實現)即可發布為一個待上架(銷售)的商品。

          其中有幾個屬性需要說明一下:

          3.商品上下架

          商品管理中的商品分為在售商品(上架中的商品)和待售商品(下架中的商品),發布商品時也可以設置自動下架或者定時上架規則。

          將商品分為在售商品和代售商品兩個模塊,只要便于平臺運營人員或者商家管理商品。在日上運營過程中,商品下架的原因有很多,對應的處理方式也不同,例如系統自動下架、商家自主下架等。


          4.商品編輯

          商品編輯是對已經發布的商品的信息進行修改,通常不允許編輯上架中的商品以防止銷售屬性被篡改從而影響之前生成的SKU數據。


          5.商品刪除

          商品刪除是對不在進行銷售的商品刪除,上架狀態的商品不可刪除。


          6.運費模版

          在商品管理模塊中有設置運費的入口,直接進入到物流系統設置運費模板,設置好運費模板之后,在發布(新增)商品時直接使用。


          7.總結

          在電商平臺上的個體商戶,由于自家SKU數量比較少,從錄入商品參數到商品拍照、上架一個人基本都能解決。

          但是對于自營平臺過萬的SKU,這樣的方式顯然是不行的。需要不同部門/人員來負責:比如采購部會負責商品基礎屬性的批量導入錄入,運營部門負責維護商品主圖、商品輪播圖、商品詳情圖以及各種價格等工作的維護。商品管理是電商平臺的基礎數據,打好基礎,方能建好高樓。

          文章來源:優設 作者:依拳超人

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          電商后臺系統設計(三):庫存

          資深UI設計者

          電商后臺產品,涉及眾多模塊,而以商品、訂單、庫存為核心模塊,模塊間存在大量交互。庫存決定商品是否可售賣,下單是否能成功。

                電商中的庫存管理是為了保證前臺商品的正常售賣,庫存的管理和倉庫密不可分,而倉庫又和銷售、采購相關,以下是簡單的示意庫存變動的影響因素。

          A. 銷售訂單-減庫存;B. 銷售訂單-鎖庫存;C.售后退貨-補庫存;D. 倉庫調撥-增加/扣減庫存;E.預售-鎖庫存 ;G. 采購-增加庫存;H.盤盈盤虧(盤庫存對賬,增加/扣減庫存)。這里說一下盤盈盤虧,盤點主要是用于管理倉庫實際值與系統值的差異的。理論上來說,若商品的各個環節數據都準確的話,實際值與系統值應該是一致的。但實際中可能會有一些系統檢測不到的因素影響了真實的庫存,這就需要倉庫進行周期性的盤點了。盤點之后,若實際值與系統值不一致,就需要把系統值修改正確,這時,可以通過人工或者自動生成出入庫單的形式去修改系統值,而且修改的這部分數據是需要做出標記的,以便于財務之后的對賬。(當然,實際設計中如何處理這部分差異,還要看業務性質和需求)

               根據庫存不同應用階段,將庫存管理體系分層為銷售層、調度層、倉庫層,主要是各層的職能不同,驅動庫存發生變化的依據也不一樣。

          銷售層
                銷售層的庫存決定是否可售賣,下單是否能成功。在秒殺時,活動庫存決定了是否可以秒殺成功;預售時,預售庫存決定是否可下定金預定。

             ??可銷售庫存:網站前臺顯示的庫存,可以對外售賣的庫存。當“可銷售庫存>0”時,前臺網站則會顯示商品可銷售;而“可銷售庫存=0”時,前臺網站則會顯示商品缺貨。

             ??鎖定庫存:用戶下單鎖定庫存,支付后扣減庫存。鎖定庫存指的下單時占用庫存,保證客戶下單后支付的訂單都是有貨可發,而不會相互沖突。

             ??已銷售庫存:統計商品已售數量。當支付成功,商品就算作已銷售庫存。如果取消訂單或售后就需要走相應的庫存變動流程變動。

             ??活動庫存:主要是做促銷活動(例如秒殺)時,分配固定數量的商品給相應的活動,這時候就需要從可銷售庫存中占用相應數量給活動庫存。這部分庫存也是走相應的鎖定、扣減邏輯。

             ??預售庫存:這部分是虛擬庫存,主要是拉動式需求,例如B端訂貨、雙十一定金預售等。預售同樣走相應的鎖定、扣減邏輯。不同的是,預售的訂單需要備貨之后,再推送至調度層。

                其中,可銷售庫存在商品維護界面僅有一個對庫存數維護的地方,也就是實際可售庫存。對于大平臺的入駐商戶來說,通常采用手動錄入方式(有開發能力的可以做系統對接),讓商戶自己維護SKU的銷售數量。具體填寫多少由商戶自己決定,這個填寫的數字就是實際可售庫存。而對于平臺自營來說,公司通常都有自己的倉儲系統,每個SKU都有明確的存儲記錄,并且部分SKU參與內部任務(如調撥、拍照、戰略儲存等)使得當前時間不可售。因此實際的SKU庫存可能并不等于全部可售,具體實際可售庫存需要通過倉儲系統經過統計同步到商戶模塊中,而不是由買手自己手動維護。

          調度層
                調度層相當于訂單的分配中心,將訂單轉化為發貨單,按照調度規則決定哪些sku由哪個倉庫發貨。
          調度層的庫存分為單倉、區域、總庫存三個維度,區域庫存指的是這些倉庫只發某一區域的,例如京東華中地區的倉庫配送華中地區,北京就無法從華中地區的倉庫發貨。總庫存即所有倉庫的sku庫存總計。

             ??賬面庫存:倉庫中的實物庫存,只要是未出庫的都算在賬面庫存中。

             ??可用庫存:倉庫中可供發貨的庫存。這部分庫存是可供調度的庫存。

             ??在途庫存:下了采購單但是尚未入庫的庫存,在途庫存理論上部分是可供銷售的,例如T+1的在途庫存,就是1日之后就可以入庫的sku。

             ??已用庫存:在調度層已分配的庫存。

                調度層在某些方面上和前端庫存有些重疊,前端庫存也會分區域和總庫存,但是不同的是,調度層對應的是實物,不會存在虛擬庫存,流到調度層的訂單經由調度后推動至倉庫發貨。


          倉庫層(WMS庫存)

                倉庫層的庫存對應的是實物庫存,出庫入庫盤點都會引起倉庫庫存的變動。倉庫層在整個庫存管理體系中尤為復雜,倉庫內的出庫流程可參考上圖-庫存關系流轉關系圖。(其中波次揀貨是指將幾個訂單合并揀貨,可以提高揀貨效率。)

             ??可用庫存:發貨單推至倉庫后,倉庫可以用于發貨的庫存,不包括鎖定的庫存。

             ??鎖定庫存:發貨單推送至倉庫后鎖定庫存,鎖定時同時去鎖定庫位庫存。

             ??已出庫庫存:已經確認出庫的實物庫存。

             ??不可用庫存:盤點時發現的不良品,需要報損,從可用庫存轉化為不可用庫存。

          文章來源:優設 作者:依拳超人

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          三八女神節首頁

          前端達人


          轉自:站酷

          作者:柯大仙


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          眼鏡類官方網站

          前端達人



          轉自:站酷

          作者:動之以情丶


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合