B端後台產品的設計細節-設計説明指南篇

語言: CN / TW / HK

關注 ▲Clip設計夾 後台 回覆“ 進羣 加入設計成長羣

設計夾的第 111 篇文章分享 

大家好 ,這裏是設計夾 今天為大家分享的是 「B端後台設計」 B端產品往往擁有複雜的業務邏輯且頁面量級巨大, 快速迭代 也會引發頻繁的變動以及並行概率的增加,需要設計師與開發能夠快速的產出方案保證上線。

這樣的工作模式引發的 副作用 如:“體驗一致性差”、“設計效率低”、“還原度不可控”的問題也逐漸顯現,變成一個急待解決的問題。

B類產品中存在很多類似的頁面以及組件,可以通過抽象得到一些穩定且高複用性的內容,那麼是不是可以通過這種方式從現在的模式中,解綁一下呢?

 01  建立原子化組件思維

    什麼是原子化組件思維?

原子思維:原子最早是由英國化學家/物理學家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒説,提出的原子論。化學元素由不可分的微粒(原子)構成的,它在一切化學變化中是不可再分的最小單位。

原子理論同理適用於我們的設計系統中

頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業務定製組件)、頁面構成。

原子 原子是最基本和最小顆粒度的單位,無法進一步細分的UI元素,在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線等。

分子 原子排列組合構成了分子,在界面中多以「設計控件」的形式存在,形成相對簡單的UI組件的原子的集合。例如:導航欄、標籤欄、搜索框、按鈕、彈窗等。

組織: 原子、分子排列組合形成界面離散部分的相對複雜的組件,在界面中多以「基礎組件」的形式存在,例如:內容卡片、表單頁面。

模版: 原子、分子、組織按照業務需求排列組合構成了模板,在界面中也稱為「業務組件」,例如:篩選列表。

頁面: 按照一定規則後排列組合而成的滿足業務需求且包含品牌屬性的一個完整「頁面」。

    組件化的內核

設計組件不是把UI元素堆積到一個地方,然後各處集中引用這麼簡單。組件化的工作方式信奉獨立、完整、自由組合。

目標就是 儘可能把設計與開發中的元素獨立化,使它具備完整的局部功能 ,通過特定規則自由組合來構成整個產品。

獨立: 一個組件就是一個獨立的產品:在制定組件的過程中要考慮到組件應用中的各個場景,降低、拆解組件中的耦合度,同時把一個組件當作一個獨立產品來設計 考慮空狀態、極端情況、尺寸變化 儘可能靈活適應各種使用場景

完整: 一個完整組件構成包含三種屬性:

A.響應狀態-包含組件庫中原子的大小類型、分子的響應和組合方式、多狀態的交互;

B.行為狀態-組件中元素的與背景的組合方式、組件中不同組件拼合的層級關係、組件與用户行為的交互;

C .數據狀態-包含組件不同的狀態枚舉:如提交中、審核中、已結束狀態。

自由: 每個組件都是相互獨立的,組件間的組合方式靈活且多樣的。靈活多變的同時也要遵循統一的柵格尺寸與表達約束,最大程度上保證頁面呈現出一種有秩序的美。

 02  建立設計説明指南

    什麼是設計説明指南?

針對企業級產品反覆出現的設計問題,設計模式給出一般性的解決方案,實現跨應用交互一致性的有效融合。減少了不必要的認知成本,提升交互確定性和設計的效率。

考慮到需要適應各種獨特的業務場景,模式的規則具有一定的靈活性,萬變不離其宗,通過了解設計模式的構建邏輯,可以衍生出更具場景特性的解決方案。

設計模式包含以下內容:

原則: 基於價值觀衍生出的一般設計技巧,包括如何高效組織信息、幫助建立用户與界面的互動等原則性要求。

全局規則: 通過規範常見的互動行為,包括導航、數據錄入、數據展示、反饋、操作、幫助等,呈現組件元素的標準用法和彈性空間,並瞭解如何將他們組織在一起來創建良好的體驗。

構圖模版: 我們總結了表單、列表、數據可視化、詳情頁、工作台、異常、結果、編輯器幾類頁面的典型解決方案,介紹每類頁面的設計目標、設計技巧以及典型頁面內容等,幫助設計師和產品經理可以快速開始構建界面。

    服務於誰

A.設計師:交互設計時,整體流程框架或分支流程可快速複用。

B.產品經理:原型設計時,可複製並套用現有交互模式進行原型繪製,或直接引用進行開發。

C.研發人員:可作為標準交互流程的參照,統一相似流程的代碼設計方式。

    有什麼內容

前言:對這次建立設計説明指南的目的性説明;

設計概覽:描述這次調整的範圍的維度;

設計原則:基於哪些設計原則輸出設計內容;

構圖模版:頁面的構圖模版、組合控件和組合範圍;

全局規則:全局範圍出發,除了頁面構圖以外,涉及到共用組件,制定的規範;

組件:基礎控件和組織控件,甚至涉及到業務定製控件(模版)。

    設計説明指南的輸出

《GM Design》交互設計説明指南,涉及幾十個產品線的成百上千個的功能,業務體量和複雜度極大,為了讓整體SaaS產品具備簡潔高效的一致性交互體驗, 設計説明指南是設計過程中問題解決的核心方法 ,也是構建整個平台或框架所要遵循的基礎和標準。

設計模式輔助設計者將業務引向實踐,並使設計更具有一般性、簡單性、一致性及穩定性。同時,設計者也可結合不同業務情境,實現模式在一般性和特殊性的銜接並作要素與結構的調整。

最後

最後,為大家提供一份詳細的GM Design 交互設計文檔 ,裏面包含設計概覽、設計原則、構圖模版、全局規則、 組件等多類 B端後台 交互設計內容。

完整版交互設計説明文檔- 體驗鏈接: https://lanhuapp.com/url/947cJ

大家可以在公眾號後台回覆 文檔 ,獲取 訪問密碼。

慢慢來比較快,希望對你有幫助!

獲取方式:

1) 在看&轉發 讓更多 小夥伴看到這篇文章

2)公眾號後台回覆  文檔  獲取訪問密碼

添加微信, 邀你進設計成長羣 :star2:

Tips:  這裏會持續更新設計乾貨,包括但不限於交互日記、設計法則、答疑解惑、讀書筆記…感興趣的同學可以掃碼加入,一起成長! :arrow_down: :arrow_down: :arrow_down:

:fire: 文章合集

致2021:設計文章合集

致2020:設計文章合集