<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>

          首頁

          關于B端導航的選擇

          ui設計分享達人

          對B端產品架構而言,一個合理的導航設計對能夠解決,對團隊內部:堆砌功能開發混亂;對外部用戶:找不到功能的問題,所以本篇主要總結一下如何正確選取合適的導航。


          從產品結構明確導航分類
          B端后臺的導航大類從產品架構層面來講可以分為:全局導航(頂部、側邊、混合)、局部導航(菜單欄、面包屑、選項卡、步驟條、文字鏈接)、輔助導航、內嵌導航、友好導航和遠程導航。


          全局導航
          表現為產品的一級導航,需要具有良好的穩定性和拓展性。
          提示:清晰穩定的路徑比起少點擊一次更重要!





          局部導航
          局部導航包括:菜單欄、面包屑、選項卡、步驟條、文字鏈接。
          特點:1、在同一個架構中,可以到這個節點的上下一級的通路;
          2、有嚴格的父子級關系,局部導航與全局導航有層級關系,局部導航幫助用戶進入更 加特定的頁面。
          通俗而言局部導航依附于全局導航,常作為二級導航出現。




          輔助導航
          提供用戶在全局/局部導航不可到達的相關內容的快捷途徑。






          內嵌導航
          也叫上下文導航,常用做對頁面中的操作項進行解釋;常見的有幫助引導鏈接等






          友好導航
          為用戶提供便利的前進途徑,常見于新手引導和幫助助手的場景,在不需要時可進行隱藏。





          遠程導航
          指并不包含在產品結構中的功能入口;常見于網站地圖、OA產品的工作臺等。






          如何進行合適的導航選擇

          1. 保證產品結構的穩定性

          B端產品通常情況下都是復雜的,對用戶來說具備一定的使用門檻和學習成本。所以導航首先要保證產品架構的穩定性,同時也要保證交互操作路徑符合用戶操作習慣。
          重點:不可為了追求少一次點擊而隨便進行更改!





          2. 便于后續擴展

          在進行導航選擇時需要考慮到后續產品的發展情況,在保證產品結構穩定性的前提下,為后續的功能擴展打好基礎。






          3. 操作清晰、易懂

          在多層級的導航中要保證每一層級導航的視覺反饋清晰、明確。




          4. 靈活適應

          導航的功能選項可以根據使用場景需求來進行靈活添加,可以為了提升效率,在不同的導航選項下出現相同的功能入口。





          5. 保持一致的交互規范

          相同類型的導航控件,交互樣式要保持一致;例如:飛書在面包屑的文字交互樣式和文字鏈接的交互樣式就做出了明顯的區分。





          6. 可不遵循層級關系

          根據導航的定義而言,導航就是對信息進行分類,引導用戶完成操作。
          我們可以根據用戶反饋和數據埋點可以將常用的操作功能進行前置,打破層級約束,實現對用戶的操作提效。




          根據場景,靈活使用導航


          1. 頂部導航

          頂部導航常用于官網類結構相對簡單的產品
          優點:節省空間、視覺干擾小,有沉浸式使用體驗;
          缺點:結構簡單,拓展性低。





          2. 側邊導航

          側邊導航常用于操作比較復雜,專注操作的后臺類產品;例如:SaaS產品等
          優點:操作效率高、拓展性強、更容易進行功能收納;





          3. 混合導航

          混合導航常用于操作很復雜,一級二級功能條目多的后臺產品;例如:云產品(二級導航功能超多)
          優點:比較綜合





          總結:


          1. 一級導航需要具備足夠的穩定性和拓展性

          ①、清晰、穩定的路徑比少點擊一次更重要
          ②、導航的排序盡量不要改變用戶的操作習慣


          2. 二、三級導航進行合理的分組收納

          利用分組控制導航的顆粒度。在二級導航只有一個時,無需設計分組


          3. 判斷功能是否應該作為全局導航

          ①、選擇相對高頻的分類,作為全局導航
          ②、低頻的分類,作為局部導航

          作者:戴戴戴戴戴虎全

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

          工作經驗|使用組件做B端產品,設計師的工作價值還有哪些?

          seo達人


          一、組件的核心功能是什么

          我們先來看看組件的核心功能是什么。組件的作用有很多,其中有兩點最為突出:

           

          1、降本提效

          組件的初衷不是為了替代設計師。組件的本質是一種降本提效的工具。在工作內容上,可以將不必要的、重復性勞動的時間節省出來;在工作流程上,便于設計師與開發做交接和協作,減少溝通成本。

           

          2、質量保障

          不論是設計還是開發,使用組件后都可以在一定程度上保證工作質量。組件規范了前端和設計師的工作方法,建立了底層的合作機制,設定了設計和開發的質量底線?;诮M件完成的產品通常具備:

          • 一致性:相對一致的表現樣式,設計風格和交互體驗上都可保持統一;
          • 可用性:對于用戶來說具備最基本可操作性和可識別性;
          • 標準化:符合基本審美標準,雖不會很亮眼,但也不會很難看。

           

          但對于一款好產品來說,僅達到基礎合格線是遠遠不夠的。組件能替代的僅僅是大部分重復性的頁面。面對變化多樣的業務需求,設計師還是需要做很多非基礎性、非重復性的設計工作。

          我們也要建立起一個重要的認知,那就是:

          做組件不是設計目標,

          而是一種為業務賦能的手段和方法。

          能夠為業務帶來正向影響、助力業務發展的組件才是有效的。

           

          二、設計師的工作重心有哪些

          設計工作很注重專業與實踐相結合,大多數情況下,能為業務賦能的設計行為,才能體現設計價值。在此過程中設計師的工作內容和重心可以分為以下幾點(每一點我們也都在之前的文章中有過詳細介紹,推薦你閱讀完本文再做查看):

           

          1、深挖業務訴求,優化體驗

          一款好的產品,質量不會僅停留在合格線。設計師可以把更多的時間和精力放到更有價值的工作上去,關注業務目標和用戶需求,對業務邏輯做深度理解和剖析。不僅僅是在界面細節的表現手法上下功夫,還要用系統性思維為整個產品做全方位的體驗優化。

          * 我們曾在  完成設計需求的三個層次! 一文中為大家介紹過承接產品需求的幾種方式,讀完本文之后歡迎繼續閱讀。

           

          2、提升組件專業性,賦能業務

          很多業務領域有其獨特性,比如金融類組件和政務類的產品頁面列表內容就有很大區別。這就使得單一的組件在應用的過程中可以被再次組合、拼裝和沉淀。

          針對不同的業務領域,將高頻使用的組件結合業務特性,進行更為專業的沉淀也很重要。這類組件使用起來也會更加得心應手、加倍提效。

          * 我們曾在  基礎組件與高級組件的區別  一文中,為大家介紹過兩者的定義和使用場景,在公眾號后臺回復 “列表”  ,也可以看到更加完整的內容分享,讀完本文之后歡迎繼續閱讀。

           

          3、提升組件易用性,規范使用

          組件并不是一勞永逸的設計工具,它需要緊跟業務的步伐迭代更新。只有當組件的質量達標,具備了一定的穩定性和易用性,才能被設計師和開發高效、高質地使用,更好地支持業務需求。

          因此,除了建立組件的設計規范,組件如何被更新、怎樣被同步給相關方、怎樣才能被正確地使用,也是影響產品最終質量的關鍵因素。

          * 我們曾在  組件的規范怎樣才能更好用? 一文中為大家介紹過一些提升組件易用性的經驗,讀完本文之后歡迎繼續閱讀。

           

          4、優化檢驗流程,排查問題

          這里所說的「檢驗」包括兩方面工作內容:

          一是對于研發質量的檢驗;

          二是對于產品體驗的監測。

           

          先來看看對于研發質量的檢驗,我們可以分為兩部分內容:

          1)設計還原度走查:即對于開發完成設計稿后的質量檢查;

          2)組件應用質量走查:即排查組件的使用問題,判斷設計和開發的使用方式是否正確。

          對于這兩類走查,發現問題時不僅要及時糾正,還要思考問題產生的原因,從根本上解決和杜絕類似問題。

          * 我們曾在  開發的設計還原度低該怎么辦? 一文中為大家介紹過一些提升設計走查效率的經驗,讀完本文之后歡迎繼續閱讀。

           

          再來看看對于產品體驗的監測。其實很多大廠都提出過關于檢測產品體驗和設計質量的方法及模型,我們熟知的有 Google 的 HEART 模型和 GSM 模型、螞蟻集團的 PTECH 模型和「兩章一分」模型等等。

          因為產品的評估方式本就是多維度的,不同的產品又有不同的評價標準,所以大家各自沉淀、百花齊放。不過參考和使用這些方法的原則只有一條:適合自己需求的工具,才是好用的。

          * 在公眾號后臺回復 “體驗”  ,可以看到更加完整、多維度的產品質量和用戶體驗檢測內容。

           

          設計自身的價值是全鏈路的、端到端的、內循環的。設計師不光用手,更應該用心和腦去思考和解決問題??梢哉f,組件就是幫助設計師解放雙手的不二法門

          設計師的思維和方法不一定會決定產品的生死,但足以幫助產品實現質量和體驗的升級。也正因如此,產品才能在市場競爭中走得更為長遠。

           


          作者:元堯

          轉載請注明:學UI網》工作經驗|使用組件做B端產品,設計師的工作價值還有哪些?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          B端設計經驗總結-幫助新人快速上手

          seo達人


          本篇文章總結了交互新人在初工作過程中可能面臨的疑惑與問題,并結合自身經歷總結了相關設計經驗,希望能夠幫助新人設計師快速上手B端設計,游刃有余的應對工作中面臨的各種機遇與挑戰。首先,作為一名新人,在剛入職做設計時可能遇到哪些問題呢?看看以下問題,或許你會感覺很熟悉:
          • 需求文檔不規范怎么辦?
          • 承擔了很多與產品相關的工作,是好還是不好?
          • 需求量大,如何推動需求排期合理化?
          • 經常插入或變更需求怎么辦?
          • 如何更有效的解決問題?
          • 需求是否有價值?
          • 如何做好體驗優化?
          • 怎樣做好設計,并提升設計的說服力?
          • 應該具備怎么樣的知識才能更好的應對日常需求?
          • 我應該掌握哪些專業知識與能力?

          上述問題看起來比較雜亂,但是通過一定的分類整理,可以概括為兩個方面,即:「專業能力」與「職業能力」。

          圖片

          圖1 專業能力與職業能力

          專業能力:

          與設計直接相關的能力,是完成設計工作不可或缺的組成部分,比如 需求挖掘、需求分析、方案設計、用戶研究等內容。

          職業能力:

          崗位要求需具備的一些能力,可以幫助設計師更好地處理工作過程中遇到的問題,比如溝通能力、規劃能力、驅動能力、執行能力等,可概括為“發現問題-解決問題”的效率與能力。

          隨著設計師項目經驗和工作經驗的增加,其所具備的專業能力和職業能力也會不同程度的成長與提升。下面會首先對新人設計師所應具備的專業能力進行總結和說明;其次對與職業能力常見的問題進行一定的解答與建議,希望能夠幫助到各位設計師同學。

           

          一、專業能力

          設計師首先要明確設計工作的主要內容,從需求分析、用戶分析到將抽象的需求轉化為具象的設計方案輸出,再到跟進設計方案上線;通過定性定量的方式跟進用戶反饋,持續推動用戶體驗優化及挖掘更多用戶場景和訴求均是設計師日常工作過程中的核心工作內容,接下來我們初步分析:

          圖片

          圖2 設計師主要工作內容

           

          1、需求分析與用戶分析

          當設計師拿到需求后,切記要多去追問為什么。因為產品經理給到設計師的需求更多情況下是具體的功能,而對于為什么要做該功能是需要設計師去深入洞察和挖掘的。此階段,設計師要明確「業務目標」「業務指標」「設計目標」和「設計指標」的概念,參照下圖所示。

          圖片

          圖3 需求分析與用戶分析

          以“某客服平臺改版”的需求為例進行簡略介紹,其業務目標是:解決客服人員工作過程中遇到的痛點,提升客服使用體驗,同時期望縮減客服人力成本投入,并明確具體的業務指標。設計側接手項目后,通過 用戶觀察、用戶訪談等用戶研究手段,了解平臺痛點,并從「業務層面」和「設計層面」總結歸納。

          圖片

          圖4 客服系統分析

          對于業務層面的突出問題,通過與產品多次溝通形成相應的產品策略,并落實到具體方案中。而對于設計層面的問題,為了更系統準確的了解客服人員的痛點,設計側又進行了二次調研。首先整理訪談提綱對客服人員進行訪談;其次整理了問卷提綱,通過發放問卷進一步驗證調研結論的準確性,并全面收集客服人員的建議。并且沉淀各角色人員的用戶畫像,了解各角色人員的主要工作事項、關注點及痛點。調研發現,客服人員的主要工作內容聚焦在以下事項,并且客服人員對系統的整體滿意度較低。

          圖片

          圖5 用戶分析-客服主要工作內容

          結合業務目標及對業務和用戶的分析,設計側將“提升用戶核心工作流程的工作效率及平臺整體的用戶滿意度”作為設計目標。由此設計的重點也放在核心操作路徑優化和整體體驗提升上面。通過對調研結果進行系統梳理,整理出高優先級優化內容,并推動埋點功能上線。最終,設計側拿到核心操作路徑優化前后的數據對比,達成設計目標。

          建議各位設計師拿到需求后不要急于產出設計方案,多去進行需求分析與用戶分析,它可以幫助設計師更深入的理解業務,挖掘業務本身的問題,了解用戶的使用場景、關注點、痛點、期望與建議,為后續開展方案設計提供設計依據。在設計評審時呈現自己的思考與分析內容,也會大大提升設計方案的說服力。

           

          2、需求轉化為設計

          關于設計目標的重要性在上述部分已有講解,因此本部分重點講解「設計系統」與「設計原則」。在日常工作中,除了上述提到的平臺改版等較為復雜的需求,絕大部分情況是產品經理梳理清楚具體的需求或功能點,經需求評審后將其給到設計師,由設計師在敏捷迭代有限的時間內快速產出最優的設計方案。而對設計系統的充分了解和應用是B端設計過程中不可缺少且非常重要的一部分。

          設計系統的構成

          《Design System》一書中對設計系統的構成進行了詳細的解讀,筆者將其中與工作關聯性最強的部分進行了整理,并且結合工作經驗簡要談談自己的理解。

          圖片

          圖6 設計系統的構成

          • 設計原則:

          設計過程中需要遵循的指導原則與依據,有利于保障系統的易用性,提升用戶滿意度。由于設計原則的重要性,筆者會在下文中進行詳細描述。

          • 設計組件:

          通常包含基礎組件、復雜組件和業務組件。基礎組件即原子組件,例如按鈕、輸入框、下拉框等,可用于構成復雜組件或業務組件。復雜組件通常由基礎的原子組件構成,但仍然在多條業務中具有通用性,例如 表單。業務組件通常用在特定業務場景下使用,具備復用性的同時可保證設計統一性。由于各公司通常具備成熟的組件庫或使用ant design和iview組件。因此設計師在業務支撐過程中更多是從業務組件入手,本著“標準、統一、復用”的理念,沉淀豐富的業務組件以提升設計統一性、以及設計與開發效率。

          • 設計模式:

          同類場景下用戶行為的統一模式,從而避免多種設計問題出現,有利于形成統一的用戶心智,符合系統設計的一致性原則,例如上傳、搜索、批量操作等。需要通過詳細的設計規范,對模式的使用場景、解決的問題、遵循的原則以及模式具體如何應用進行詳盡細致的說明。某些設計模式可以沉淀為組件來達成模式的統一應用,而對于不方便沉淀為組件的模式,需要整理詳細的規范文檔,方便設計師查閱與使用。

          • 控件庫:

          將設計資產(組件、模式、圖標、插圖等)整理為symbol控件,在axure、sketch等設計軟件中可快速使用控件搭建頁面,提升設計效率。

          • 視覺樣式:

          通常包含顏色、布局、字體、圖標、動效、插圖等,是保持全局樣式視覺統一性的重要基礎。

          • 設計規范:

          對視覺樣式、組件、模式等如何應用進行詳細的設計說明,包含設計原則、使用場景、使用流程與反饋等,產出通常為設計規范文檔,對于新人設計師,一定要熟記、掌握和學會如何應用。

          設計原則

          關于B端設計原則,設計師對“高效、清晰、可視化”等原則一定不會感到陌生,但是筆者一直在想設計原則的得來是否能夠更加有依據。由此上網看了很多文章,也結合自己支持的業務去思考,基于個人經驗將設計原則總結概括為三個部分:「設計指導原則」「事實性原則」「可用性原則」。 

          圖片

          圖7 設計原則

          設計指導原則:

          B端設計原則的頂層指導原則,是整個平臺設計的全局性原則,通常由 業務定位、行業屬性、客戶標準、用戶特征等因素綜合得出。

          比如公司內部的客服系統和面向房地產行業的設計管理系統,客服系統從業務定位出發是希望客服人員工作更加高效,而客服人員從自身動機出發也期望更加高效的完成目標,以取得不錯的績效。一般在設計時,設計師考慮到信息密度的問題,會將部分信息折疊收起,但是對于客服人員來說,他們更希望將全部信息鋪開展示,通過瀑布流的形式他們可以快速檢索信息,提升工作效率。而對于房產的設計管理系統,業務定位是提供全鏈路的解決方案,讓客戶滿意是非常重要的業務目標。

          由此,滿足客戶的標準和使用人員的訴求對于系統設計來說非常重要??蛻魰谛袠I屬性的特點提出要求,比如更加注重科技感,用戶希望頁面更直觀,信息密度小等,設計師要綜合多種考慮去制定全局的設計指導原則。

          • 事實性原則:

          基于業界的定律去設計,為最優設計方案提供更多依據。比如??硕伞⒎拼亩傻取3酥猓O計師更要懂心理學,了解用戶在觀察、閱讀、記憶等方面的影響因素,并且將其應用在方案設計中。如此,設計方案便有理有據,經得起推敲。

          • 可用性原則:

          比如尼爾森十大可用性原則和設計界其他的一些可用性原則,設計師相對來說都比較熟悉,需要結合業務特征進行靈活的運用。

          基于設計目標、設計系統、設計原則進行具體的方案設計,會幫助設計師從“完成方案”到“完成最優方案”進階,同時也有利于:保障設計統一性,提升設計與開發效率;形成統一的用戶心智模型,提升用戶體驗;平衡設計與技術,降低技術開發成本,保障功能按時上線。

           

          3、需求挖掘與反饋收集

          通??墒褂枚ㄐ浴⒍康挠脩粞芯渴侄稳ネ诰蛴脩粼V求以及收集用戶反饋。定性調研通常包含:用戶觀察、用戶訪談、焦點小組、啟發式評估、可用性測試等。定量調研通常包含:問卷調研、數據埋點、后端數據拉取、AB測試等,新人設計師可以選擇適合當前業務發展階段的調研方法。與用戶研究相關的資料較多,大家可以自行搜索學習,此處不再贅述。

          這里筆者強調一點,即使用“體系化的設計思維”去整理用戶反饋的體驗問題。通常來說,調研后收集到的用戶反饋是相對零散的,即便按功能模塊分類整理,并且對優化帶來的價值進行描述,業務人員也很難理解優化某一個體驗問題帶來的價值,從而導致設計師在推動體驗優化需求排期時遇到阻力,且由于roi的投入產出比低體驗優化被無限延后。此時設計師需要進行體系化的梳理,重點在核心工作人員的核心工作路徑優化,預估優化后帶來的數據價值,以此去PK其他需求證明體驗優化帶來的價值。在上線后也需要及時跟進真實的使用數據,拿到量化的數據結果及時同步相關人員。

          圖片

          圖8 體系化整理體驗問題

          二、職業能力

          新人設計師需要逐步培養自己“發現問題和推動問題解決”的能力,多交流,多思考,多總結。這里有幾個小建議給到大家:

          • 建立規范意識,通過標準化規范化的流程解決問題

          在產品的敏捷迭代過程中,產品—設計—研發—測試等各環節必須保持規范化的運行節奏,一旦某環節出現異常,則會影響敏捷迭代的整個流程。比如需求變更的問題,可以在敏捷迭代復盤會上提出,并且跟大家一起分析背后的原因,找到行之有效的解決方案。若是因為客戶提出臨時加需求,可以考慮需求置換,但是如果是產品經理個人的原因,說明需求優先級排序出現問題,可能需要建立一套標準的優先級評估規范來避免或減少此類問題。

          再舉個例子,關于“需求量大,如何推動需求排期合理化的問題”??梢韵热ナ崂懋斍按嬖诘膯栴},以及帶來的影響,同時提出解決方案,跟業務人員一起探索,達成一致后運行解決機制就能解決該問題。

          圖片

          圖9 需求排期機制

          • 找準設計邊界,學會衡量利弊

          作為設計新人,一定要學會明辨職責范圍內的事項,找準設計邊界。比如產品經理離職了,在短時間內設計師承擔了部分產品經理的職責,統籌需求收集,給出設計方案,把控敏捷流程,保證產品迭代正常進行,且符合設計師職業和專業能力范圍內時,設計師是可以承接的。但同時我們需要不斷跟進業務招聘新人,讓專業的人來做專業的事情,避免將個人精力全部花費在與產品相關的事項上面。

          日常工作中設計師一定要學會明確邊界,切忌將工作重點轉移到非設計相關的事項而偏離了設計本身,可以多用系統性的思維去思考和分析利弊,相信此時設計師就會有自己的答案。

          • 學會借力,必要時學會依靠團隊

          設計師,尤其是新人設計師,在工作中遇到的問題很可能是憑一己之力無法解決的。這時候可以考慮借力,向領導借力,向團隊借力,可以說出自己的想法,尋求大家的建議。不僅可以收獲到經驗,還可以提高解決問題的效率。舉個例子,筆者剛剛畢業入職后,要去整理所負責的移動端產品的體驗優化,采取了“群策群力”的方式,邀請團隊的設計師一起進行體驗走查,在2個小時的會議時間完成了整個產品的走查,并且收集到非常多的有效建議,依靠團隊的力量達到事半功倍的效果。

           

          總結

          作為一名“過來人”,回想起自己還是設計新人的時候遇到的問題,踩過的坑…內心很感慨。因此,一直都想寫一篇文章,將自己的經驗和心得總結下來,希望本篇文章能夠幫助設計師少走彎路,快速成長。

          最后,借用在《騰訊產品法》一書中看到的一段話送給大家,我想設計也大抵如此。

           

          階段一:以片面、固化的眼光看問題,只看到零散的表象和靜止的格局。解決方案呈點狀隨機分布。

          階段二:以宏觀、系統的眼光看問題,能看到產品與產業、產品與其他產品的關系和位置。解決方案開始具有系統性特征。

          階段三:以動態、演進的眼光看問題;能看到時間長河中問題變化的趨勢。解決方案能夠助推產品順勢成長。

          設計者修煉產品設計能力的過程本質上就是一個思考力進階的過程。

           

          參考書籍

          《在騰訊產品法》

          參考文章

          尼爾森的十大可用性原則與場景案例

          《Design System》相關文章

          《Pin Design》年刊文章

          作者:瑤一


          轉載請注明:學UI網》B端設計經驗總結-幫助新人快速上手

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          在UI布局排版中,讓界面快速出彩的7個技巧

          seo達人

          一、優先考慮重要內容

          圖片

          優先考慮重要的內容,在頁面中保持重要的信息占比更大、更明顯。

          為了讓用戶能夠快速看到關鍵信息,可以通過滾動的交互方式和指導性的按鈕設計,幫助用戶找到他們想要的信息。

          圖片

          ?▲ 例如《紐約客》網站的布局設計,在中間位置優先展示最重要的資訊,突出重點,網站兩側的資訊展示相對弱化。

           

          二、保持合理的視覺層級

          圖片

          頁面中清晰的層級結構對用戶來說也很重要。通過打造明確的視覺層級結構,頁面內容的主次關系會更清晰和合理,方便用戶更容易理解頁面信息。

           

          圖片

          ▲ 在Netflix影片詳情頁的布局中,保持了清晰的視覺層級關系。跳到詳情頁后,我們首先會看到頁面頂部的預告片和大尺寸的白色高亮播放按鈕,然后是關于影片的介紹和其他功能。

           

          三、使用非對稱布局

          圖片

          對稱布局和非對稱布局在日常設計中都很常用。對稱的布局能夠讓頁面看起來更加統一、整潔,但也導致頁面效果缺少對比,效果單調。

          非對稱的布局剛好可以彌補這個缺點,在保證排版整齊的基礎上增加頁面的對比關系,讓頁面看起來更有吸引力。

          ▲ 例如在這個網站首頁中,左圖右文的非對稱布局設計讓整個頁面看起來更有對比性和沖擊力,快速吸引用戶的注意力。

           

          四、使用間距

          圖片

          通過間距,能夠將頁面中不同的版面和內容劃分出來,讓頁面的布局更豐富。

          同時,通過調整間距的大小能有效區分內容間的關聯程度。例如,同一組信息采用間距小的布局方式,讓內容的關聯更緊密。

          圖片

          ▲ 在Instacart頁面中,上下有兩種不同的布局方式,通過增加間距,讓頁面看起來更清晰。

           

          五、打破統一的布局

          圖片

          過于統一的布局方式會讓頁面看起來很單調,無法突出重點。

          如果想讓頁面中的某個內容吸引用戶的注意力,可以嘗試在打破一致的布局情況下,讓頁面看起來更有節奏。

          圖片

          ▲ 在Airbnb網站中,圖1、2和5采用了相同的尺寸,圖3和4打破了統一的布局,讓頁面看起來更有動態感。

           

          六、使用網格

          圖片

          網格系統是使用網格作為輔助,進行頁面設計的方式。通過使用網格系統,可以更準確地定義頁面的布局。

          圖片

          當然,網格不僅能用在頁面布局設計中,在其他類型的設計(海報、畫冊等)中也常用到,是非常值得設計師學習的系統。

           

          七、保持對比

          圖片

          在設計頁面的布局關系時,要盡可能做到圖文搭配,保證既要有文字、按鈕等元素,也要有一定量的圖片,讓頁面保持對比性。

          圖片

          ▲ 例如這個網站首頁中,左右兩部分采用了一致的布局方式,以圖片作為背景,文字和按鈕等元素與背景產生對比,提高頁面的沖擊力。

           

          最后

          通過這些實用的布局技巧,希望能夠幫助你設計構建出更好的界面布局~ 對界面中內容的劃分和信息的掌控帶來進一步的提升。

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》在UI布局排版中,讓界面快速出彩的7個技巧

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          B端列表頁設計總結

          ui設計分享達人

          列表頁腦圖



          左側導航欄

          全局導航

          1、導航欄可折疊收起菜單。

          2、收起時,鼠標懸浮在圖標上同時右側彈出菜單欄,然后觸發菜單文字。



          頂部導航欄

          • Tab擺放位置(什么時候在上,什么時候在下?)

          1、根據tab的層級來確定位置,最高層級在上,不同流程層級在下。

          Tab在上:用戶明確自己想要查找的目標在哪個tab并且需要一眼看到所有概況(想要查找數據時,直接到對應的tab下查找)。

          Tab在下:需要看到查詢的結果在各tab下的分布情況。



          篩選/搜索區

          1、篩選區包括搜索項、查詢、清除查詢;如果搜索項超過一行時,需要「展開、收起」按鈕。

          2、折疊展開設計:默認顯示一行將使用頻率高、覆蓋面廣的1-3個顯示出來其他的隱藏。(用戶頻繁使用的篩選條件能一眼找到)。

          3、按鈕固定在最右側不變,搜索項可進行自適應。

          4、篩選條件:

          • 交叉篩選:選擇篩選條件后,需點擊「查詢」按鈕才能觸發篩選條件。
          • 實時篩選:篩選條件不存在交叉,可以實時篩選。像“流程狀態”此類固定選項類,要不要提供“勾選即執行搜索”功能?用戶可能還需要綜合其他搜索條件一起查詢,如果執行搜索可能會打斷用戶剛才的輸入。
          • 時間篩選:根據真實場景來提供快捷選項,比如:昨天、最近7天、最近30天...



          全局操作

          1、功能性按鈕和批量操作(比如新增、導入、導出...)

          2、根據使用頻率進行排列新增>導入>導出;使用頻率高的操作采用高亮顯示。

          3、如果按鈕太多可進行操作項分類。



          表格欄

          表頭

          1、在能夠概括的情況下,盡量簡練、準確,一般可根據上下文關系進行簡化,以達到節省表格頭部空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數據本身。

          2、對于比較復雜的表頭,可以跟一個釋義標識,鼠標懸停時出現該字段的詳細解釋。

          3、表頭篩選、排序功能

          • 表頭字段太多怎么辦?

          提供表頭篩選功能,依據用戶關注度最高的字段進行排列。

          • 哪些字段需要排序功能?

          需結合業務場景具體分析,一般來說,編號、時間、價格字段,提供正序、倒序功能。

          • 默認排序

          考慮用戶第一次進入列表頁的初始化狀態,保證用戶進入頁面時大概率能直接看到自己想要的東西。

          表體

          包含多選列、數據列、操作列

          • 哪些字段可以前置?

          特殊處理操作的按鈕、字段優先級、狀態可以前置,方便一目了然。

          • 表格字段太長該如何處理?

          1、全部展示(缺點:利用滾軸滑動次數太多用戶視覺容易疲憊)。

          2、較長字段用“…”展示,防止字段重復,對重要字段進行快速區分、對比(優點:每行可顯示較多的信息 缺點:想要看全信息,只能鼠標移入字段出現氣泡顯示完整信息)。

          3、換行,保持行高不變,改變文字距單元格的上下間距,最好不要超過3行,多余字段用”…”顯示(優點:盡可能顯示全部內容 缺點:同2)。

          4、字段優先級分類,做折疊展開設計(篩選信息層級較高的字段放在表格欄,次要信息放入二級表格)。

          5、數據庫中沒有該字段,用“-”,數量用“0”后邊有小數點、后位數保持上下單位一致。

          • 表格設計如何降噪

          1、讓用戶將注意力放在數據信息上,而不是表格底色、邊框

          2、不使用斑馬線設計、分割線樣式輕盈、去掉不必要的裝飾和顏色

          • 單行操作項位置如何處理?

          基于業務、基于場景

          比如用戶以處理訂單為主,操作項建議放在第一列,方便用戶操作。

          如果用戶以查看信息為主,操作項一般放在最后一列。

          • 如何處理由于用戶權限不同或者狀態不同這兩種原因,使得每行的數據擁有不同的操作項?

          可以采用下拉框設計

          • 行高



          1、行高=文字行高+上下間距

          2、文字行高可以設定為字號的1.2~1.8倍,上下間距可以設定為字號的1~1.5倍;行高影響每行信息的易讀性。

          3、一般行高為32-56px












          • 列間距、列數、對齊方式

          1、采用8px網格作為基礎單位,來定義各組件和模塊間距,因為目前主流桌面設備屏幕分辨率在垂直和水平方向基本都可以被8整除,使用8px比較普適。






          2、最好列數在7±2

          3、對齊方式:文本采用左對齊,金額及跟金額相關的百分比、操作項采用右對齊

          • 分頁器
          • 一頁展示多少條合適?

          一頁最好能在一屏展示,避免用戶來回上下滾動,比如固定為展示10條。

          用戶特殊使用需求,不適用以上規則,一頁可能展示10條/20條,都可以。





















          視覺稿







          作者:YOgire  來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          博博

          B 端產品主要是 Web 端產品,空間大、操作多,內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系,從設計角度降低用戶的學習成本。而用戶有固定的認知規律。格式塔原理揭示了人類視覺的認知是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。

          格式塔主要包括 7 個基本原則:

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          今天我們就來總結下,格式塔原理在 B 端產品中是如何應用的?

          接近性原則


          我們先看 2 張截圖,分別是不同分辨率下的界面效果。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          可以明顯的感覺到高分辨率下,菜單列間距離較大,菜單的歸屬關系很清晰。而低分辨率下,菜單間的距離變小,特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則,距離近的關聯親密,距離遠的就各自獨立分組。

          當我們想要傳達給用戶層級關系時,就需要善于利用接近性原則。例如表格上方的功能按鈕,通常我們將高頻、核心操作放置在左側,低頻、輔助功能放置在右側。通過增大元素間的距離,達到功能分區的目的。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          相似性原則


          相似性原則是通過顏色、尺寸、圖形等方面的共同屬性,實現信息的分組或者高可讀性。

          例如在可視化圖表中,不同范圍值的指標采用不同的背景色。通過背景色的差異,將同一范圍內的數據形成視覺關聯,提高用戶對信息的識別效率。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          通過圖形尺寸的相似性也可以構建內容分區。例如阿里云、騰訊云控制臺的首頁,都采用了雙列設計,左側主要以高頻的業務功能信息為主,右側是輔助運營信息。兩列尺寸寬度有明顯差異,用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異,并有效地突出業務信息。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          閉合性原則


          IBM、蘋果的 Logo 設計,無論是“用刀砍過”,還是被“偷咬了一口”,用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現方式。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          在 UI 設計中,則會通過對齊方式,形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色,內容區借助標題、卡片對齊形成視覺閉合空間,最終將頁面劃分為左側導航菜單和內容區兩個空間。視覺表現上更輕量化。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          另外閉合性是需要元素之間相互輔助的,單獨的元素無法構建出閉合空間。以下圖為例,雖然四個小的卡片做了間距分割,但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          連續性原則


          用戶更習慣于從左到右的橫掃閱讀,因此連續性主要體現在橫向空間中。

          下圖中,雖然左側的標簽文字與右側的內容信息有較為明顯的間距,高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體,而是理解為兩組信息。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          在某些場景中,如果信息平均分布,不會產生連續性的視覺感知。

          例如下圖指標監控中,指標都是采用小卡片,間距、尺寸較為統一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點,沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時,需要逐個檢索,花費的成本更高。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          簡單對稱原則


          通過上述很多圖片,我們可以看出頁面元素基本都是橫平豎直,中規中矩的元素和分割方式?;蛟S有些單調乏味,但是勝在簡單,不會帶來額外的視覺噪點。

          特別是 B 端產品,基本看不到異形的存在,甚至全圓角矩形都很少見到。即使有異形,也只是作為視覺表現元素存在于內容中,而不會作為空間的劃分邊界。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          主體與背景原則


          主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性,凸顯彈窗信息。

          當我們需要著重表現內容時,同樣適用于主體與背景原則。例如登錄界面的設計,會通過差異化的背景、陰影等方式,帶給用戶清晰的視覺層級,適當凸顯輸入框的主體地位。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          而 B 端內容區是核心空間,基本都是采用純白背景,與頁面背景形成對比,從而占據信息的主體地位。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          共同命運原則


          共同命運原則聽起來有點玄學,指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少,我沒有找到合適的案例解釋這個原理。

          在移動端產品中有些應用案例。比如 iOS 系統中,桌面布局編輯態下抖動的圖標,可以與靜態不可編輯的內容形成隔離效果,視覺引導性更強。同樣今日頭條頻道編輯時,也采用了抖動效果。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          總結


          雖然 B 端產品沒有 C 端色彩豐富,表現力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的,要求和諧、有序、層次分明,輔助傳達內在的業務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。

          格式塔原理不僅限于視覺表現,產品經理或交互設計師在原型設計時,也要重視格式塔原理,輔助設計方案表達,提高團隊間的協作效率。

          今天的分享就到這里了。如果有更好的案例,歡迎評論區留言分享給大家~


          作者:子牧先生

          轉載請注明:優設網

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          Bs界面設計之十:B端設計基礎指南:網格系統

          博博


          網格的歷史


          說到網格的應用,我們可以追溯到很遠。古埃及人在他們的雕刻和繪畫中描繪的人物遵循了一個規則,將比例標準定為人的拳頭,一個站立的人物從地面到頭頂測量為 18 個拳頭。

          B端設計基礎指南:網格系統

          公元 1040 年,首次在中國出現活字印刷,主要采用的是泥活字。在西方,金屬活字印刷術在 1450 年左右出現,而古騰堡圣經在 1455 年左右的發行將是出版界的第一個重大里程碑。金屬類型的文字更加充分利用了網格。

          B端設計基礎指南:網格系統

          到了 1917 年,網格在荷蘭風格派運動中最為明顯,由藝術家 Theo van Doesburg 和 Piet Mondrian 領導。他們將畫布限制在相交的垂直和水平線條和原色上。

          B端設計基礎指南:網格系統

          1919 年,德國的包豪斯學校成立,他們主張的簡潔實用的設計理念同樣用到了網格的概念。像著名的包豪斯國際象棋,它的棋子都是正方形和長方形等簡單的幾何形體,可以緊密地組合在一起,以便緊湊地存放。

          B端設計基礎指南:網格系統

          1950 年代,一種嶄新的平面設計風格終于在瑞士形成。這種風格的設計,力圖通過簡單的網絡結構和近乎標準化的排版方式,達到設計上的統一性。這種風格一直到現在影響了很多網頁和平面設計師。

          B端設計基礎指南:網格系統

          隨著第二次世界大戰的結束,一種新的消費主義出現了。經濟快速發展,廣告業的繁榮逐漸興起。保羅·蘭德作為美國第一個應用瑞士平面設計風格商業藝術家,他以企業品牌標志設計及商業廣告設計而聞名,網格在這種新的廣告形式中發揮了重要作用。

          今天我們要聊的是關于網頁設計網格系統。說起來很簡單,但其實里面包含了很多復雜的概念。網頁設計的第一步就是如何進行布局。標題、導航、按鈕放在哪?每個元素之間的間距是多少?這些都離不開頁面布局。作為網頁設計的基礎,頁面布局可以極大地影響用戶閱讀的流暢度和直觀度。在聊頁面布局前,我們需要先普及一些概念。

          B端設計基礎指南:網格系統


          頁面布局


          頁面布局是網頁上所有視覺元素的排列。通過頁面元素的有序排列,可以建立元素間的關系,從而更好地引導用戶體驗。作為網頁設計的關鍵組成部分,布局決定了頁面哪些元素最受關注,以及頁面的視覺整體平衡??傊?,一個好的頁面布局可以將用戶的注意力引向正確的方向。先將他們吸引到最重要的元素上,然后按照重要性順序閱讀余下部分。


          網格的作用及概念


          要實現良好的頁面布局,最好的辦法就是應用網格系統。網格是設計的骨架,可以幫助我們對齊,有序組織頁面內容。通過正確使用網格,我們不會隨意地把元素放到頁面里,而是明確地知道將這些元素放到哪些合理的位置上,有助于提高設計效率和設計質量。無論是 PC 端還是移動端設計,通過網格都將對我們做出有指導性的設計決策并為用戶創造更好的體驗。

          網格由幾個部分組成,分別是 Column (列)、Gutter (槽)和 Margin (邊距)。它們在一起構成了屏幕的水平寬度。

          接下來通過幾個圖例來詳細解釋下。

          B端設計基礎指南:網格系統

          列(Column)是跨越內容區域的垂直部分。在網頁設計中列越多,網格就越靈活。列的寬度由設計師自己來決定,傳統做法是在 PC 端網頁上使用 12 個,Pad 端使用 8 個,移動端使用 4 個。列寬一般定義為 60~80px。列寬是影響實際內容寬度的關鍵因素。

          B端設計基礎指南:網格系統

          槽(Gutter)是列與列之間的間隙。槽的作用是將每個模塊的內容進行縱向分割。較寬的槽更適合較大的屏幕設備,可以通過更寬的槽去拉開頁面的間距,使頁面信息展示的更加舒展。

          B端設計基礎指南:網格系統

          邊距(Margin)是內容與屏幕左右邊緣之間的空間。更寬的邊距更適合更大的屏幕,因為它們會在內容的周邊創建更多的空白。

          B端設計基礎指南:網格系統

          介紹了以上 3 個概念,我們可以利用 8pt 網格系統來對頁面進行分割。8pt 網格系統,使用 8 的增量來調整頁面元素的大小和間距。也就是說,頁面中的高度或寬度、邊距或填充都是 8 的倍數。


          8pt 網格介紹


          有沒有想過我們在做移動端界面設計的時候為什么選用特別小的畫板,但我們的顯示設備卻非常大?

          比如,我們用 375×812 的尺寸來進行設計 iphone X,但其實 iphone X 的實際尺寸是 1125×2436,是我們設計尺寸的 3 倍。

          B端設計基礎指南:網格系統

          B端設計基礎指南:網格系統

          因為設計尺寸會以 2 倍或 3 倍的像素進行渲染,比如 iphoneX 就是以 3 倍尺寸進行渲染,iphone8 或 iphoneXR 會以兩倍尺寸進行渲染。所以我們在進行設計的時候可以采用 1 倍最小尺寸進行設計,以適配到不同設備的不同尺寸。因此,1pt 可以分別轉換為 @1x(1 倍尺寸)、@2x(2 倍)和 @3x(3 倍)大小的 1px、4px 或 9px。

          B端設計基礎指南:網格系統

          所以我們設計一個 16pt 的圖標,導出@2x 或者@3x 的尺寸應該是 32px、48px


          為什么一定要用 8pt?


          使用偶數來調整元素大小或元素間的間距可以很好的適配到各種尺寸的屏幕。比如在@1.5x 尺寸下,如果用奇數來定義元素尺寸或間距,就很容易出現半個像素的情況。5px 在 1 倍尺寸中導出為 1.5 倍尺寸就容易出現半格像素的情況。之所以選擇 8,也是因為大部分的屏幕尺寸是可以被 8 整除的,這樣就很容易適配。此外在 PC 端沒有使用 2 或 4,是因為其顆粒度太小,不便于設計師進行操作;用 8 的倍數來設計還有一個好處就是避免我們在設計中過于糾結。

          B端設計基礎指南:網格系統


          文本如何設置?


          基于 8pt 網格的排版系統。字體的大小可以設計成不同的尺寸,但它們的行高要盡量是 8 的倍數。

          B端設計基礎指南:網格系統

          B端設計基礎指南:網格系統

          在網頁端設計時,很少會遇到幾倍尺寸的輸出,所以通常情況下都以像素為單位,這樣的話就是 8px 的倍增。我們就可以把間距或者元素定義成以 8 的倍增不同尺寸。

          例如:

          small = 8px
          medium = 16px
          large = 24px
          x-large = 32px
          ……


          頁面布局類型


          普及了上述概念后,我們一起進一步了解下頁面的布局,頁面布局大體分為幾類:固定布局、流動布局、自適應布局、響應式布局。

          固定布局,顧名思義就是頁面的整體寬度是固定的,不會隨著瀏覽器的拉伸變化而變化。這種頁面相對死板單一,但對于設計師來講相對容易設計,也易于開發。

          B端設計基礎指南:網格系統

          流動布局,它會隨著瀏覽器窗口的大小而變化,但是它變化的邏輯是以模塊的百分比來定義的。無論瀏覽器的寬度是多少,流動布局都會填滿頁面的寬度。其次流動布局不需要像響應式布局那么多樣性的變化。它在極大或極小的頁面寬度上會存在一些缺點。比如頁面很寬,內容可能會被拉伸得太長,單個文字段落可能會在單行上貫穿頁面。相反,小屏幕上的多列布局也可能對內容來說過于擁擠。

          B端設計基礎指南:網格系統

          自適應布局可以理解為是固定布局的一個升級版,舉個例子,當頁面內容為 960px,此時頁面無論再往多寬拉伸,頁面內容始終顯示 960 寬度。如果縮小寬度到一個臨界值時,比如 960px 以內,頁面就會縮小到它的第二個寬度,假設是 640,以此類推。這個臨界值我們稱之為斷點。

          B端設計基礎指南:網格系統

          響應式布局結合了流動布局和自適應布局。隨著瀏覽器寬度的增加或減少,響應式布局將像流動布局一樣進行變化。同時,如果瀏覽器寬度超出了某個臨界點,也就是斷點,那么頁面布局也會發生改變。通常,響應式布局是為了能夠兼容網頁端、平板端和移動端等不同設備進行設計的,這樣會給用戶帶來更好的瀏覽體驗。

          B端設計基礎指南:網格系統

          最后用圖例展示下如何利用網格系統在網頁設計上進行頁面布局。

          B端設計基礎指南:網格系統

          在 figma 上的設置如圖:

          B端設計基礎指南:網格系統

          我們可以設置好列數,定義好列寬和槽寬來決定頁面的實際寬度。

          在網頁設計上使用網格系統淺層價值是為了讓頁面布局有章可循,使頁面看起來更加統一,深層價值其實是為了做自適應布局,讓頁面在不同寬度下適配到不同的設備上。

          這里我也創建了 4 種不同尺寸的網頁端網格系統,供大家參考,大家也可以根據自己的實際情況去建立自己的網格。

          B端設計基礎指南:網格系統

          https://www.figma.com/community/file/1076073453929437640/8pt-web-grid

          最后推薦一款 sketch 智能布局網格的插件,喜歡的同學附件進行下載。

          B端設計基礎指南:網格系統

          切記,在實際項目中,盡可能靈活的使用網格,不必拘泥于 8pt 的單位,但盡量保持在偶數范圍。

          參考文獻:

          Bs界面設計之九:從6個層面,幫新手快速入門B端設計系統

          博博


          什么是設計系統?


          從6個層面,幫新手快速入門B端設計系統

          配圖取自文章《以B端產品為例,幫你深入淺出掌握「設計系統」》

          設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包

          設計系統是在設計價值觀和原則、設計標準指導下的各種共享的設計模式和組件資產,是將產品設計團隊聯合在一起共同打造的一套質量和效率上都有所保障的可行性解決方案,能夠解決產品視覺、交互體驗一致性的問題、幫助傳達統一的品牌認知。幫助團隊快速完成產品迭代和功能開發!


          為什么要構建設計系統?


          從6個層面,幫新手快速入門B端設計系統

          問題 1:

          隨著業務的拓展,產品和項目數量不斷增加,發展中期設計和交互上不一致性的問題浮出水面,需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗,以滿足用戶預期并向其傳達統一的品牌認知。

          問題 2:

          無統一的設計規范和交互原則,沒有統一的 UI 組件庫和代碼庫,各團隊設計和前端需花費大量資源陷入低質量溝通協作和重復造輪子,拖慢產品和項目設計和開發節奏。

          問題 3:

          產品項目數量 vs 產品設計師,人員配比嚴重不足的情況下,團隊的設計師們無法從雜/亂/急的日常需求中剝離出來,影響構建產品壁壘的質量和速度。


          設計系統的價值


          產品側:

          保證可復用模塊的交互體驗的一致性。如同一個產品類型不同分支多個團隊完成的時候,可以保證產品團隊使用同一份設計規范快速完成產品原型設計。

          設計側:

          把設計師逐漸從不必要、重復性勞動中解放出來,節約出來的時間和精力放到更多有價值的工作上去。更多去關注對用戶需求和業務邏輯的深入挖掘,如果每個設計師都具備產品用研、交互、組件化等一條龍能力,才能體現 tob 產品設計師的價值,才不會被別人稱作是拖拽組件的“工具人”。

          開發側:

          形成開發資產,可以提升研發效率,降低維護成本。開發工程師無需再重復開發同一個組件,只需要去組件庫里調用即可,配合業務邏輯,高效完成界面開發。做到開箱即用。

          測試側:

          標準化的設計規范,是測試人員最喜歡看到的。1 是 1,2 是 2 的設計準則,提升了測試效率。例如,設計規范規定彈窗 footer 區按鈕組居右,那么測試人員只要測到不居右,就可以給產品提優化建議了。

          主流設計系統-他山之石可以攻玉!

          無需猶豫,直接基于現有的優秀的開源設計系統。

          設計系統的打造不必從 0-1 構建, 例如:Ant Design 業界優秀的開源設計系統,我們完全可以站在前人的肩膀,最終生產出符合達觀品牌、業務特性的設計系統。

          1. 阿里 Ant design:https://ant.design/docs/spec/introduce-cn
          2. 阿里的 teambition: https://design.teambition.com/
          3. 華為 devui: https://devui.design/design-cn/design-value
          4. 餓了么 elemnt: https://element.eleme.io/#/zh-CN
          5. 有贊: https://design.youzan.com/index.html
          6. 字節跳動 Semi Design: https://semi.design/zh-CN/
          7. 字節跳動 Arco Design: https://arco.design/
          8. Material Design:https://material.io/
          9. Lightning Design System: https://www.lightningdesignsystem.com/
          10. Microsoft fluent: https://www.microsoft.com/design/fluent/#/
          11. eva.design: https://eva.design/
          12. Atlassian design: https://atlassian.design/


          以原子理論構建設計系統


          1. 原子理論設計介紹

          首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost 提出的,他從化學元素周期表中得到啟發,發現在化學世界中,所有的物體都是由原子構成,原子組合構成分子,分子組合構成有機物,最終形成了宇宙萬物。根據他的理論,設計體系主要包含 5 個層面:原子、分子、組織、模板、頁面。

          原子理論設計不是一個線性的過程, 它更像是一個心理模型,來幫助我們把用戶界面看作是一個連貫的整體,同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面,讓我們更深入的了解每一個概念哦~

          2. 原子層(Atoms):

          原子是物質的基礎組成部分,是構成設計系統的最基礎元素。

          在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。

          從6個層面,幫新手快速入門B端設計系統

          簡單概述下來就五個字:色、形、質、構、質;

          從6個層面,幫新手快速入門B端設計系統

          3. 分子(Molecules)層

          在界面中,分子就像是一個由 UI 元素組成的相對簡單的組織。如:按鈕、彈窗、搜索框等。

          以按鈕為例,它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關聯組合成一個分子,圖標和文字互相配合傳達意義,顏色定義了按鈕的特性,間距為按鈕定義了一個尺寸和規范。

          從6個層面,幫新手快速入門B端設計系統

          4. 組織(Organisms)層

          分子+原子組合成更復雜和可擴展性的模塊,這個稱之為組織(區塊組件),如:列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。

          以表單為例,一個表單我們可以通過數量的組合,以及間距的調整,元素的增減,在界面中表達不同的場景和含義。

          從6個層面,幫新手快速入門B端設計系統

          5. 模板(Templates)層

          由原子+分子+組織構成的更復雜更具拓展性的模塊,如:分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。

          本質就是線框圖,模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構,頁面中的信息是占位作用,而不是頁面的最終內容。

          從6個層面,幫新手快速入門B端設計系統

          6. 頁面(Pages)層

          帶業務邏輯的場景案例如:標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板;

          頁面是模板的具體實例,填充了真實的內容(圖片、文字等)后形成頁面,也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖,將占位符替換為有代表性的真實內容,使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的設計方案。

          從6個層面,幫新手快速入門B端設計系統


          關于設計系統的常見認知誤區


          誤區 1:設計體系就是設計規范或者組件庫嗎?

          許多人認為設計系統就是單個代碼庫、組件庫、設計規范,但實際上他們不是一個層次的東西,準確來說設計體系包含設計規范,組件庫也是建立在設計體系內的,組件庫是記錄和共享設計模式的工具,就是設計體系工具化和表現層的部分;

          誤區 2:設計體系的存在扼制了組織內創造力,會替代掉設計師?

          拋出這個問題,是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點,我個人是很難認同這個的,對 design system 的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合,需要調動整個團隊的想象力和創造力,最終達到一個統一共識才有可能被實施和執行;

          好的設計系統可以通過流程和機制促進創造力的,而且好的設計資產可以幫助大家從不必要的、重復的勞動時間內節省出來,當然也不能過度依賴過往的沉淀資產,把自己定位為設計系統的創造者,而不是使用的工具人,不斷的創造和貢獻好的解決方案被整個組織采用,就不必再擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。不會替代掉設計師,反而是一個企業內部尊重設計師價值的開始!是企業對設計文化的認可!

          誤區 3:設計系統是一勞永逸的嗎?

          設計體系是動態的,永遠是隨著組織需求和用戶需求而變化的,一切說自己已經完成了設計體系的建設的人都是錯誤的,都是將靜態的設計規范曲解成了設計體系。

          誤區 4:設計系統由少數人員生產,我們負責用就行了?

          正確管理機制:少數人負責管理,多數人參與貢獻;避免你做、我用模式,這種生產消費模式非常內卷;避免如:我一個設計師為啥要用你的規范;這規范做的太垃圾用處不大,我才不用,用你做的規范;我苦逼做業務,你晉升拿結果的負面心態;

          設計系統也不是簡單的靠少數的人 1-2 個月用愛發電就能完成的,設計系統是一群人,對一種做設計文化的認可,每個與之相關的人都應該是設計體系的貢獻者與布道者!


          需要克服的潛在難題


          當然設計體系也容易出現一些缺點,這些問題需要設計體系的構建者們去摸索去克服;

          1. 產品業務復雜性提升,提升建設難度
          2. 難以控制創造與控制間的平衡
          3. 復用與定制間的平衡,刻意追求復用率而容易丟失整體觀,為特定業務目標服務時不如靈活集中化式方法等
          4. 資源問題,容易被當成是輔助項目而缺乏預算等資源….
          5. 缺乏良性有效的組件庫更新迭代機制,虎頭蛇尾….
          6. 收益短期不明顯,搭建體系的長期收益難以被組織短期內察覺;

          盡管有一系列潛在的問題,但總的來說設計體系帶來的收益是大于這些投入的,總的來說方向是沒錯的,下一個關鍵問題是:我們如何去建立一個更優秀的設計體系。

          今天就跟大家分享到這了,一點拙見,設計系統的話題這個我們分三期跟大家進行交流,如有興趣,鐵子們可以加個關注

          作者:IM UED

          轉載請注明:優設網

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          更多精彩文章:



          Bs界面設計之八:用2個案例,幫你學會B端關鍵信息的密度提升設計

          博博

          在決策類產品中,用戶的行為路徑一般從信息分析場景到信息決策場景。系統關鍵信息密度的高低是影響用戶決策速率的重要因子。因此我們建議從「信息拆分與重組」、「功能高效聚合」兩個層級出發,以提升關鍵信息在頁面模塊中的的密度。

          B 端有效信息密度提升設計框架的顆粒度由粗到細可總結為三個層級,分別為基礎層、功能層與信息層。首先是基礎層,B 端產品多場業務景、多用戶角色、多任務流程的關鍵性差異決定了業務側信息是一切設計的出發點;再者,需依據業務場景定義、角色定義與任務流排布的相關內容鏈接與聚合產品功能;最后,基于以上信息,使用交互與視覺相結合的設計方法,降低用戶與系統的交互成本,引導用戶聚焦產品核心能力,提升關鍵信息在頁面中的密度與觸達效率。

          用2個案例,幫你學會B端關鍵信息的密度提升設計

          「信息拆分重組」:在 B 端系統中,信息拆分與重組是依據業務與產品內容對信息進行重新組合,以求達到低跳轉、高密度、有效觸達的設計目標。

          「功能高效聚合」:在 B 端系統中,功能高效聚合是依據業務場景與業務邏輯對產品功能進行重新整合,旨在單位時間、單位面積內的帶來更多商業效益/效率提升。


          案例一:入庫計劃-銷售計劃確認產品


          設計方法:信息層拆分與重組。

          項目背景:基于對計劃方式的調研及整理,結合業務側對于銷售計劃確認模塊提供參考信息過少、瀏覽體驗較差等問題,對明細表格及其他部分進行整體體驗升級。

          用戶痛點:銷售計劃確認明細表格的瀏覽與分析效率低下,導致線上計劃確認難。

          設計目標:依據業務邏輯對表格信息進行拆分與重組,減少并優化用戶眼動軌跡,提升信息展示密度。

          用2個案例,幫你學會B端關鍵信息的密度提升設計

          用2個案例,幫你學會B端關鍵信息的密度提升設計


          案例二:全流程數據概況產品


          設計方法:功能高效聚合

          項目背景:對全流程進行數據可視化,分環節數據監控,同時展示時效等更多維度數據,便于業務快速定位異常并跟進處理。

          用戶痛點:用戶在產品方案中無法快速獲取到履約率相關數據,在一定程度上影響數據分析與決策的效率。

          設計目標:依據業務邏輯排布瀏覽分析全流程數據任務的起點、過程與終點,縮短優化用戶眼動軌跡,提升信息觸達時效。

          用2個案例,幫你學會B端關鍵信息的密度提升設計

          用2個案例,幫你學會B端關鍵信息的密度提升設計

          用2個案例,幫你學會B端關鍵信息的密度提升設計


          最后


          以上就是「關鍵信息密度提升設計」的全部內容啦~

          錄入流程設計、任務中斷回溯設計已經發布,感興趣的小伙伴記得閱讀收藏哦~后續會為大家帶來「場景化設計」等 B 端的設計方法,希望能給正在從事或準備入局 B 端的的小伙伴帶來啟發,也希望跟大家一起探討更多的 B 端設計方法。

          作者:自轉一周的鹿

          轉載請注明:優設網

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          更多精彩文章:



          Bs界面設計之七:如何做好B端產品的信息設計?我總結了3個原則!

          博博

          最近在 12306 網站購票時,彈窗中展示了大段的文字信息,我只是匆匆掃了兩眼就果斷關閉了,實在沒有耐心逐字讀完。特別是節日搶票的場景,用戶更不會有心情去看這些提示信息。

          如何做好B端產品的信息設計?我總結了3個原則!

          所以在做產品設計時,需要注重信息的傳遞效率。B 端產品通常用在 PC 端,屏幕顯示區域大,在做設計時會不自覺的添加較多的信息,反而影響了用戶的使用體驗。今天我們就來討論下如何做好信息傳遞?

          我總結了以下 3 個原則:

          如何做好B端產品的信息設計?我總結了3個原則!


          匹配用戶心智模型


          心智模型指的是人們心中根深蒂固存在的,影響人們認識世界、解釋世界、面對世界以及如何采取行動的許多假設、陳見和印象。是一個決定用戶信息獲取行為的內在的、可預測的認知模型。簡單來講就是人類基于經驗的總結,去認知世界。

          《About Face4:交互設計精髓》中提出了 3 種模型,實現模型、表現模型、用戶的心智模型。好的產品的設計要盡可能匹配用戶的心智模型,越符合用戶心智模型的設計,產品越容易理解。

          如何做好B端產品的信息設計?我總結了3個原則!

          B 端產品頁面內容變化較少,更強調一致性。主要由表格、表單、按鈕等各種信息元素構成。在長期的使用過程中,用戶對某些信息元素已經形成了特定的心智模型。例如用戶看到輸入框,就知道需要填寫內容;看到步驟條引導,就知道多步操作;看到 Radio Button,就知道是單選。

          因此方案設計時,設計師的一個重要目標就是讓表現模型盡可能的匹配用戶心理模型,避免因為組件使用不當,造成用戶產生錯誤認知。

          例如考慮到用戶的視覺動線,“新建”主要、高頻按鈕通常放在左上角,方便用戶瀏覽和操作,而輔助功能按鈕會放置在右側,用戶也逐漸形成了這樣的心智模型。

          如果主操作按鈕放置在右上角則違背了用戶的心智模型,用戶使用產品時,需要建立新的心智模型,改變已有的行為習慣。并且這種設計并不能帶來其他層面的體驗提升,個人認為有些得不償失。

          如何做好B端產品的信息設計?我總結了3個原則!


          信息的層次性


          B 端產品業務比較復雜,頁面內容也會較多,信息的有效組織尤其重要。信息設計不是簡單的內容堆砌,需要根據用戶場景和需求做出優化處理,構建有效的信息的層級幫助用戶去理解業務內容。

          信息層級包括 2 個方面:

          1. 系統空間分層

          在一個系統中存在著空間分層,當頁面較為復雜時,需要通過合理的內容分層,有序的展現內在邏輯關系。

          B 端核心交互就是“增、刪、改、查”,其中“查”就是信息的檢索和瀏覽。所以頁面主要是由搜索條件和表格構成的。而“增、改”等操作行為主要是在臨時的系統空間中完成,例如彈窗、側邊浮窗、跳轉頁面等形式。

          不同的信息在不同系統層級中相對獨立的展示出來,保證了信息的層次感和秩序性。

          如何做好B端產品的信息設計?我總結了3個原則!

          2. 頁面信息結構

          復雜業務場景下,單個頁面會承載大量的信息內容,需要通過合理有序地呈現給用戶。主要有 2 種方式進行信息拆解。

          如何做好B端產品的信息設計?我總結了3個原則!

          1)高效組織——卡片化設計

          在 B 端產品中,為了保證功能的完整性,必須要一個頁面中展示給用戶。逐條平鋪,散點式的信息展示會造成信息密度過高,缺少層次性。而卡片方式可以很好的聚類相似信息,分割差異化信息,有助于降低信息的復雜性,幫助用戶快速定位信息、瀏覽內容。

          如何做好B端產品的信息設計?我總結了3個原則!

          2)化整為零——步驟化設計

          面對復雜的信息內容,用戶容易產生畏難情緒。將復雜內容分步拆解,把用戶的關注點從頁面內容轉移到步驟進度上,可以減少用戶的心理壓力。另外節點信息頁也可以幫助用戶更好的理解業務流程。

          如何做好B端產品的信息設計?我總結了3個原則!

          另外步驟化設計還可以將散點內容歸集到一個任務流程中,引導用戶快速完成工作任務。例如 Win11 系統安裝后的設置引導,可以方便用戶快速完成系統基本配置,避免用戶操作的行為成本。

          如何做好B端產品的信息設計?我總結了3個原則!

          3. 頁面元素設計

          不同于 C 端產品,B 端產品更強調效率。正如奧卡姆剃刀原則所說“如無必要,勿增實體”。頁面內容需要以簡潔為主,避免無關要素形成信息干擾。而設計師更加感性,擔心設計過于平淡,會在界面中添加各種視覺元素,反而會增加用戶的認知成本。

          如何做好B端產品的信息設計?我總結了3個原則!


          信息的可理解性


          B 端產品通常業務具有一定的專業性,用戶門檻較高。在復雜業務場景下,必須讓用戶能夠較為清晰的理解產品及功能,才能保證信息的傳達效率。

          1. 幫助信息

          B 端產品需要盡可能地降低用戶學習成本,但是本身業務層面的難度是無法避免的。因此需要為用戶提供及時有效的幫助信息。

          在阿里云、騰訊云界面中包含了大量的解釋說明、Tips 等信息,解決用戶在使用過程中的疑問,幫助用戶更好的理解業務內容,減少用戶的記憶量。

          同時幫助信息還需要具有拓展性,當提示信息無法完全解決用戶疑問時,還需要能夠引導用戶,查看完整的幫助文檔,減少用戶翻查資料的成本。

          如何做好B端產品的信息設計?我總結了3個原則!

          2. 可視化設計

          數據可視化設計在 B 端產品中應用較多,例如概覽頁面,通過圖形化的方式將數據的內在關系更直觀的表達出來。

          在某些特定的場景下,內容頁面也可以通過可視化展示幫助用戶理解信息,例如常見的身份證圖片上傳等,很多用戶無法分清楚正面反面,借助圖片可視化提示,便于用戶更好的理解信息。

          如何做好B端產品的信息設計?我總結了3個原則!


          寫在最后


          體驗設計行業需要創新,但是 B 端產品設計需要更加謹慎。尊重用戶的習慣,完整表達業務邏輯性、保證內容的可理解性,是設計師必須去關注的。

          作者:子牧先生

          轉載請注明:優設網

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          更多精彩文章:





          日歷

          鏈接

          個人資料

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

          存檔

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