亚洲综合国产精品无码AⅤ,精品国产午夜肉伦伦影院 ,国产亚洲情侣一区二区无码av

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

B端產品如何進行頁面設計？

聿來體驗筆記

2023-02-08

0 評論 10006 瀏覽 86 收藏

34 分鐘

在日常工作中的設計工作中，常常拿到產品的原型圖不知道如何下手，業務與流程都基本沒問題，真正到了頁面設計時就會卡住。那么，B端產品如何進行頁面設計？作者總結了一些思路，希望對你有所啟發。

前言

在日常的設計工作中，拿到產品給的原型或者需求清單，分析完用戶和任務流程后不知道該如何下手，或者不知道如何系統地開展設計工作，再或者不知道如何做出符合用戶和業務目標的設計方案。

有的時候流程和業務都不在話下，但是到了具體的頁面設計就會捉襟見肘。如何引導用戶在頁面中迅速的完成任務流程，我們看一下是不是有套路可走。

在一二線城市，相信很多人都去過宜家，有媒體統計過：宜家的迷宮式動線設計創造了60%的沖動購物。宜家的動線設計將用戶與各類商品區進行了有效的串聯，在刻意設計的路線上，商家填滿了各類家用商品，用戶在從入口到出口的路上，使高沖動購物率成為了可能。從動線展示圖中我們可以看到，一條“清晰明了”的曲線引導用戶前進，同時還會提供一些捷徑供用戶穿梭，這像極了頁面中的友好鏈接，幫助快速抵達目的地。

在整個宜家商場的設計中我們可以看到，這條清晰明了但實際不存在的線帶給了商家巨大的收益，這個設計表達中，離不開實際存在的懸掛路標、小地圖、地面標識、醒目的商品名稱、價簽和特意設計的商品堆積，當然還有一些消費者手冊等。

這與我們的頁面設計有著異曲同工之妙，將商場的商品陳設和頁面中的信息組織放在一起我們可以發現，都在向消費者或用戶傳遞一種建議和方向。所以，在頁面設計我更愿意稱之為頁面框架或者頁面信息設計，就是將該頁面的內容信息通過一定的框架組織起來，然后呈現出來，實際上就是在與用戶溝通交流，使得頁面易學易用。

有一個成語是“明修棧道，暗渡陳倉”，而我們要做的是“暗修棧道，明渡陳倉”，所謂的棧道就是設計師所搭建的頁面框架。經過設計師的合理分析和設計，使用看不見的設計手段和看得見的表現方式，給予用戶明確的“提示”，幫助用戶迅速的完成任務。

一、如何做進行頁面框架設計

前面對頁面框架設計有了一定的了解，那么怎樣才能設計出好的頁面，應該運用什么方法，采用什么流程。

在《信息架構-超越Web設計》一書中，作者將“如何做”闡述為：設計相應的信息顆粒度和組合方式，為用戶創造他們所熟悉的環境。根據日常的工作經歷，將“如何做”這個過程分成了以下四個步驟。

1. 了解業務

在著手進行整體頁面設計之前，必要的設計工作就是進行切實的業務分析，了解我們要做什么，為了什么做。

在辛向陽的交互設計五要素中強調了，交互設計的對象是行為，他們之間的聯系可以概括為：用戶在某個場景下通過某種媒介產生行為，最后達成了他的目標。

那么如何讓用戶產生更有利于目標實現的行為，在設計之前先了解一下這些業務要素。

1.1 用戶

簡單來說就是使用我們平臺的人。在一些B端產品中用戶會分很多的角色，比如管理角色和普通角色，每個角色的訴求也是不一樣的。

管理者：我希望能夠看到團隊中所有人的工作進度。

普通員工：我希望能快速的完成自己的任務。

這兩種角色的訴求都是用戶需求，分析階段需要做好用戶分層，在后面的目標拆解中就可以獲得更明確的方向。

1.2 場景

對于用戶提出的反饋或者意見，要切實考慮應用場景，辨別用戶提供的是需求還是方案。

比如上個月用戶提到一個需求，希望在某某頁面中，復制粘貼就可以上傳圖片，某某平臺就是這么做的。接到這個反饋，我的第一反應就是你在“教我做設計？”（開玩笑??），首先他的這個方案我們目前是不具備的，然后這個設計確實很方便，但是目前團隊沒有時間做這個。找到特定的用戶聊過之后，他表示當前只能點擊或者拖拽上傳，截圖的文件需要本地保存后才能上傳，很不方便。我向她提供了我們目前平臺要實施的方案：

可以直接在描述的富文本中編輯保存；
可以在下個迭代將要實現的備注中直接粘貼上傳附件。聽了我的解釋后，他表示這兩個方案都可以，不需要頁面的隨意上傳了。所以在真實的項目中，要找到真實的需求場景，而不是被用戶牽著鼻子走。

具體如何去了解我們的用戶場景，除了業務或者產品經理的闡述和解釋，另外我們在前期進行競品分析的時候也是不錯的時機，因為在相似業務場景中，不同平臺之間的表現方式不會出現太大差異，相當于設計思考前置，由方案倒推了需求。不過還是建議以具體業務具體分析為主，畢竟每個公司的工作方式是不同的。

1.3 目標

對于設計師而言，目標就是這次設計的目的是什么、解決什么問題、創造什么價值，利用某些設計策略手段，對未來一段時間內所要達成的預期結果。設計的目標是要依附于業務，忠實于用戶。一個平臺的每次升級側重點不一樣，但是業務和體驗是要同時考慮到的。

業務提出了今年我們要在去年的基礎上，提升用戶滿意度15%

那么設計就應該去分析低滿意度背后的原因是什么，用戶為什么打了低分，這可能會涉及到任務流程、頁面布局、組件使用等問題。

當我們確定好影響滿意度的因素之后，可以對其中一個因素提出設計目標：縮短用戶完成某個任務的時間20%，以此來聚焦用戶操作流程的低效問題。

設計目標是在了解業務和用戶之后所得到的一個共贏產物，也是將抽象的業務信息轉化為具體的設計要素的過程。

1.4 媒介

用戶產生交互行為的最大媒介就是我們的頁面，細化一下顆粒度，就會落到我們每一個頁面組件上面。而組件并非是簡單的平鋪，而是要做的設計目標的指導下，選擇合適的組件和表現方式，使用戶看到頁面時，快速的產生恰當的行為。

1.5 行為

在界面中中用戶主要的操作動作無外乎：點擊、懸浮、滑動、拖拽，應考慮怎樣的觸發形式能使用戶最低成本、最順暢地完成行為。當然行為并不是孤立存在的，它需要多個動作和媒介，以及視覺行動等共同構成。而如何讓用戶產生恰當的行為，需要功能信息顯性化的設計。

2. 組織信息

組織信息是頁面設計的重要組成部分，我們看到的頁面信息都是整齊的，每個整齊的背后又暗含了特殊的組織關系。對于業務分析或者需求文檔所得到的業務信息需要設計師進行下一步的精加工，首先要了解當前所處頁面的主要功能是什么，其次是明確功能信息并進行相應的分析，獲得可以搬運羅列的功能塊。

《佐藤可士和的超整理術》對信息組織的策略有著非常專業的建議，作者從中提煉出以下處理方式。

2.1 明確信息

通過業務了解，明確當前頁面將要進行哪些操作或者應該具備哪些功能點。

以上圖所展示的簡單需求為例。從當前頁面中我們可以看到，這是一個任務管理的模塊頁面。在任務管理中，要支持用戶創建三類任務，創建結束后還要支持信息的瀏覽、查找和編輯。而這些信息的來源就是上面我們分析的業務場景，這只是經過整理之后的。

2.2 羅列信息

明確了業務信息之后，相對應的我們要將我們頁面布局所需要的核心元素剝離出來，比如創建數據，就可以剝離成一個創建按鈕。

對于剛才的信息我們可以簡單的羅列如下：

創建A、創建B、創建C、修改、刪除、標題、篩選狀態、關鍵詞篩選、數據列表

2.3 導入觀點，確定關系

確定信息元素之間的關系是為了在頁面中更好的劃分和取用，方便在后面頁面布局中給相關信息找到恰當的位置。

以剛才的需求為例，在羅列的過程中大概也能找到信息之間的關系?？梢苑譃槿悾翰僮鳌⒑Y選和數據展示。

如果我們對個別的信息再進行賦予觀點，還能出現新的關系。如果從業務使用頻率進行觀點導入，那么任務A、B、C的使用頻率依次降低，最后可以確定的優先級關系就是創建A>B>C。在任務頁面中，創建類的操作優先級要明顯高于編輯類，所以“創建”>“編輯”。操作和篩選作為數據產生和查找的工具，需要放在更顯眼的位置以更容易被發現。

以上是對展示頁面的簡單信息進行的處理，對于一些表單頁面我們也可以采用相應的策略。通過信息的屬性維度可以大體分類，如果信息量很大，那么信息的層級關系就會展現出來，方便頁面布局中采取相對應的設計方式。針對信息的關系，我們可以確定信息的先后順序、頁面位置以及顏色等樣式的使用。

當然組織信息的最后產物還是虛擬的，我們輸出的信息關系無外乎，比如信息組、信息架構、優先級等。組織信息是繼了解業務之后的信息處理和清洗的步驟，也是業務場景以及設計目標的應用，可以為后面頁面布局提供更有針對性的建議。

另外，我們還可以了解一些常規的信息組織方式。

2.4 常見的組織方式

常見的組織方式可以分為精確分類和模糊分類。

精確分類將信息分成定義明確和互斥的區域，采取的是客觀態度。如果用戶通過已知的明確信息，可以迅速的找到相應的位置，并且這種分類方式好維護。字母順序、時間順序、地理位置等都屬于精確分類。

比如App中的城市選擇，就是采取的字母分類，用戶可以根據目標城市的首字母，迅速定位到相應的位置。

模糊分類將信息分成不精確定義的種類，采取的是主觀態度。受困于人的主觀性和分類標準的模糊性，因此很難設計和維護。但是在一些場景中，模糊分類卻更重要和有用。主題、任務、受眾、隱喻導向等屬于模糊分類。上面操作按鈕的分類就是采用了任務導向，將按鈕分成了創建和編輯兩個部分。

京東商城的左側商品分類采用的就是模糊分類。

混合方案是在B端產品中常見的方式，能靈活的處理頁面信息，應對不同用戶和信息的場景差異。在Ant design的典型頁面中，左側菜單采用了模糊分類（主題），而表格信息采用的是精準分類（時間倒序）。

3. 組件選擇

組件的選擇是信息可視化的第一步，是為信息尋找相應容器載體的過程。

3.1 導航

導航存在的作用是任何告知用戶他在哪里，他能去什么地方以及如何到達那里的方式。常見的導航可分為：

全局導航：屬于常駐導航，基本平臺的每個頁面會存在，常見的組件形式有側邊、頂部、彈出式、下拉等。

頁內導航：根據當前業務場景所配置的導航，常見的組件有頁頭、Tree 樹型控件、錨點、回到頂部、走馬燈等。

返回導航：常見的組件有面包屑、返回按鈕等。

友好導航：不在該模塊的信息架構規范內，用戶可以通過點擊跳到其他頁面查看，比如操作日志中的超鏈接。

其他導航：常見的有步驟條、分頁器等。

3.2 標簽

標簽通常是向用戶顯示組織系統和導航系統最明顯的方式，例如全站導航系統相匹配的文字標簽：主頁、搜索等。

標簽分文字標簽和圖形標簽：

文字標簽涉及到頁面中所有功能的文案命名，例如標題、導航、按鈕、鏈接、索引詞、提示等，這是用戶理解信息最直接的方式，所以文字標簽的選擇要常見并且易于理解，選擇行業中的通用用法。比如在協同工具的領域，一些最主要業務單元的命名，無外乎項目、需求、任務、缺陷、迭代等，即使是新出現的平臺，也會默認去遵循這個行業命名。因為在業務的發展過程中，這些標簽已經成為了協同領域中相互共識的點，如果為了強差異化，反而會增加用戶教育的成本，降低平臺的使用效率。

圖形標簽在頁面設計中，作為文字標簽的補充，會更形象的傳達信息。主要應用的地方的是圖標。圖形的使用也是要易于理解，不要讓形式凌駕于功能之上，不能給用戶帶來思考成本。在Iconfont上搜索“返回”，檢索的結果都是相似的箭頭，即使有設計師會做一些樣式調整，但是都離不開箭頭這個符號，因為這已經形成了深刻的用戶心智。

還有圖文類的軟件，我們可以看到他們上面展示的文字和標簽都是相似的，大家都在做一些微調，但是都在遵循最初Office給用戶形成的符號認知。所以針對新的平臺產品，除了調研用戶對標簽的使用習慣之外，還可以參考競品的使用現狀，這屬于行業的隱形共享資源。

3.3 搜索

搜索系統是用戶快速尋找信息的工具，搜索系統的使用要根據頁面信息的內容量和場景要求進行配置選擇。

常見的組件可以分為：

輸入類篩選：輸入類篩選需要用戶輸入一定的文本關鍵詞，篩選出對應的數據；
選擇類篩選：選擇器類篩選可以是單選或者多選，用戶點擊選擇待選項即可；
平鋪類篩選：平鋪類篩選是將所有的待選項鋪出來，方便用戶直觀選擇；
分頁篩選：分頁Tabs類似于平鋪類篩選，都是將待選項平鋪出來；
高級篩選：高級篩選的判斷關系較多，一般會包括篩選條件、篩選關系（且、或）、篩選類型（包含、不包含、等于、不等于等）、篩選值和添加。

以上是闡述了對頁面結構設計影響較大的三類組件，像按鈕、選擇器等顆粒度的組件，可以到大廠的設計網站查看詳細的使用說明，這里不再描述。

4. 頁面布局

頁面布局是頁面設計的最后一步，是功能信息布局的關鍵，是為用戶搭建易于發現的流程節點。

4.1 選載體

首先根據當前的業務的場景特點，先選擇信息的承載方式。

目前有三種方式：頁面、對話框、抽屜。

頁面：信息承載量最大，適合信息瀏覽、數量級較大的創建和展示；
對話框：信息承載量小于頁面，流程中斷性較強，適合輕量級的信息創建、處理和展示；
抽屜：信息承載量大于對話框，小于頁面，流程中斷性較弱。

在具體的使用過程中：

如果信息量較大，有組合方式比較復雜的信息創建和展示，考慮使用頁面；
如果信息與觸發頁面有較強的關聯性，考慮使用抽屜；
如果信息與觸發頁面有較弱的關聯性，需要聚焦當前任務，考慮使用對話框或頁面。

4.2 分區域

在確定好使用的承載方式之后，要對基本的大塊信息區域進行劃分。

首頁要確定的是導航的位置，導航代表了用戶當前所處的位置和能去的位置。因此要放在非常顯眼且穩定的地方。

以一開始展示的需求頁面為例，根據F型視覺動線理論頂部和左側用戶關注點較多和穩定性較強的地方。在大廠的典型頁面中我們也可以看到相應的實踐。頂部和左側相比，擴展性較弱，為方便后面業務擴展，將導航區域選在了左側。

其次是操作、篩選和數據展示區，根據前面組織信息的結論，操作和篩選要放在比數據展示更容易發現的固定位置，根據F模型，放在信息展示區的頂部。這樣基本的頁面區域就劃分好了：導航區、操作篩選區、數據展示區。

按照本文的闡述，選載體和分區域略顯啰嗦，在實際的工作中，往往導航等框架組件的選擇與分區域同時進行，所以，我們一般可以從以下方面迅速開始：

如果是老平臺，只是做部分功能擴展，需要按照原來的頁面框架設計進行新的功能設計，保持界面的一致性。
如果是新的頁面，可以參考競品的頁面，因為他們的處理方式已經經過市場和用戶的檢驗，具有一定的可靠性。
參考各大廠規范的典型頁面，這些頁面是他們內部設計師經過多次討論才上線對外，應用場景上具有一定的廣泛性和通用性，并且用戶對這類頁面可能會更熟悉。

4.3 調布局

在劃分好區域之后，需要對頁面中的組件布局進行調整。比如前面的我們所確定的按鈕關系，在頁面中，為創建類和編輯類的按鈕分別選擇了填充和線框按鈕，當前按鈕數量太多，頁面空間受限，可以對按鈕進行組織收起，根據使用頻率高低進行相應的排序。同時篩選和操作是兩類信息且優先級有差異，可以區分更明顯一些，同時頁面中的右側有視覺空白，可以將篩選類組件右對齊。

在B端產品中常見的表單頁面中，根據Ant design的復雜度模型，從頁面信息的復雜度和關聯性維度上，對相應的組合容器進行劃分，方便設計師準確匹配，快速呈現出用戶更容易理解和查找的內容模塊布局。其中步驟分組一般用在創建頁面，Tab分組一般用在展示頁面。

在具體的組件布局中，還需要考慮組件的對齊方式、尺寸、位置等，這些都需要根據當前的業務特點、頁面空間大小、瀏覽效率等進行實際判斷決策。如果說頁面空間有限，但是業務字段又非常多，在很多的后臺軟件中，我們會發現做左對齊的方式比較常見，因為在一屏內它的信息承載量是最大的，屏效比最高。

4.4 建議

4.4.1 設計理論的應用

設計理論和原則是前人在實踐的基礎上總結出來的規律和方法，雖然設計趨勢會發生變化，但是信息的傳遞原理短期內是相對穩定的。通過理論的應用，引導用戶關注頁面架構的焦點，就可以達到信息傳遞的目的。

a、視覺動線理論

F型視覺動線模型是尼爾森于2006年提出的，模型中指出，用戶常用習慣方式是：掃描。在信息瀏覽過程中，遵循最省力的路徑來瀏覽內容，直至找到想要的信息，因此前幾行左側內容看得多，而右側內容和頁面靠后部分便看得少，通常情況下便形成大體的F型。

Z型視覺動線模型也是尼爾森對用戶的瀏覽習慣進行研究后得出的結論，一般會用在門戶類、文字類網站，Z布局應用很簡單，將重要的信息元素放到Z形上面，用戶掃描過程中會沿著這條路徑獲取信息。但是Z形也有弱點，用戶很容易會受其他顯眼的元素吸引，所以在布局的時候，要控制好這些元素。

b、交互設計四策略

刪除：

將產品中可有可無或者沒有使用頻率的功能刪除，使用戶能聚焦在核心流程上，減少信息干擾和產品維護成本。在具體的設計中，還包括不必要的裝飾元素，比如分割，空間分割和線分割保留一種方式即可，疊加使用反而耗費產品的簡潔感，給用戶增加視覺負擔。

分類：

面對種類和數量眾多的功能，為了能讓用戶更迅速的定位到目的位置，可以將信息分類組織，使頁面更清晰。剛才上面的操作關系就是分類的一種，面對一一擺開的按鈕，用戶難免會有選擇延遲，快速定位后可以有效加快選擇。還有產品中的一些狀態、標簽、顏色等，合理的分類組織，設定邊界，再次復用可保持產品的一致性。

隱藏：

將高頻的功能和信息適時適地的展示，其他的則進行合理隱藏，也是為了頁面聚焦，減少視覺負擔，保持頁面簡潔。像表格中的操作按鈕，一般情況下都會將用戶將會使用的兩個高頻按鈕放在外面，其他的放在更多中；另外，按鈕的使用還有一定的引導性，比如從平臺角度講，希望用戶的數據越來越多，所以不是很希望用戶刪除或注銷，所以這類按鈕都會放在架構設計的末端。

轉移：

一般情況下是將復雜進行轉移，將用戶的重復或復雜操作，交給后臺處理，增加任務處理效率。

c、格式塔心理學

格式塔心理學源于視知覺，通過對視覺元素形式、圖形的研究，幫助人們產生某種視覺傾向，從而快速的辨別。

在這里主要說一下這四個原則：

接近性原則：在人們的視覺感受中，會習慣于將彼此接近的元素看成一個整體。元素之間的距離越小，說明彼此的關系越近，當然，這個原則也是反過來用，如果想讓人感受到兩個元素不是一個整體或類別，那么把他們的距離拉大即可。

購物APP的卡片瀏覽模式，圖片下的標簽與圖片的距離差異，可以讓人輕易的區分出，圖片和標簽的整體關系。我們在劃分區域的時候，一般內容區中導航區、數據展示和操作可以通過距離來劃分，使頁面歸類感更強，提高信息獲取效率。