<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設計分享達人

          樹形選擇

          關于樹形選擇,我們必須先知道它的基礎概念,“樹” 究竟是什么?我們先來看看樹狀結構的定義


          樹狀結構:

          樹狀結構其實是作為一種層次結構化的表達方式,它能夠將樹的抽象出來表達完整的構造關系,為什么叫做樹,是因為它更像是一個上下顛倒的樹,根部在最頂端,枝葉反而變為下方。

          同樣在對樹狀結構的整體命名上,也遵循了與之類似的表達方式:



          節點(Node):是樹狀結構當中的基本單位,使用節點可以表示 不同數據間的 組成關系(從屬關系與并列關系)通常節點會分為幾類特殊情況。


          1.根節點:整個樹狀結構的開端被稱為根節點。一個樹狀結構一定只有一個根,在思維導圖中,根節點就代表著它的開端,用于延展出更多的樹狀結構。不過在目前的樹形選擇當中,因為對易用性的要求,通常會隱藏根節點,只展示子節點。而根節點隱藏在 標題、選項文本 當中。


          2.子節點:根節點之外的節點被稱為子節點。一個樹狀結構子節點數量是沒有具體限制,在樹形選擇當中是直接展示出來的部分。


          3.葉節點:沒有連接到其他子節點的節點。葉節點屬于一類特殊的子節點,它是整個樹狀結構的最末端節點,在樹形選擇當中是一個重要的概念,下面會展開來講。

          分支(Branch):節點之間的鏈接,在我們樹形選擇當中,分支的線條可以選擇顯隱。其搭配的使用方式也有所不同


          同時我們還會用到節點的幾個基礎的概念:

          節點層級:指當前節點所在的層級,比如根節點為第一層級,根的子節點為第二層級,以此類推;

          節點高度:對于某一節點的高度,便是該節點下所有葉節點從上到下的個數;

          節點深度:指該節點到根節點的唯一路徑長度,深度與層級較為類似。


          樹狀結構究竟出現在生活中的什么地方呢?樹狀結構對于我們又有什么用呢?大家可能理解上會覺得很枯燥,我給大家舉一個例子:


          回憶一下我們小學使用字典時的場景,首先我們是先通過聲母,去確定這個漢字的大概的頁數范圍,然后通過韻母去確定這個漢字的詳細位置,最后通過音調找到想要尋找的漢字:


          其實字典的設計,便是一個典型的樹形結構。而在 B端系統中我們常見的公司組織架構、省 市 縣 地址選擇、在線教育的班級結構 等等,這些都是使用了完整的樹形結構。


          采用樹形可以快速進行結構化的表達,其目的是為了用戶能夠快速地增刪改查,想要更多了解結構化表達的同學推薦大家看一本書《金字塔原理》,里面講了非常多的邏輯化思維、表達的方法與內容,內容比較多,而這種思維其實在我們工作生活中都能夠用到。



          樹狀結構組成:

          1.層級縮進

          為了將樹的整個結構完整的表達出來,會使用層級縮進的方式進行區分,通常會使用 8px 對下一級節點進行縮進,這樣能夠表達更為完整的層級關系。

          這里要注意,如果想要更為強調樹形選擇的層級關系或者樹形內容本身就比較多的情況下,可以見解 Coding 編輯器的思路,即:將縮進內容使用“分支線”進行表達,更明確清晰。 這里使用層級線后,折疊圖標也會有所不同,下面有明確解釋。


          2.折疊圖標(節點按鈕)

          主要是將節點下的所有樹葉與子節點進行展示,在整個樹的結構中,折疊圖標一般分為兩種:三角折疊、方形折疊

          三角折疊:為頁面層級較少時使用。因為在較少的層級下,用戶不用特意去思考當前節點所在層級究竟在哪。

          方形折疊: 更多與頁面層級線進行配合使用,通過層級縮進,將頁面層級線標識清楚,能夠更好的在多層級情況下進行合理區分。


          3.選擇控件

          整個樹形結構依舊是在選擇錄入框架下,分為單選和多選。因此需要對其類型有所展示,特別是在多選的場景下,一定要標明它的類型,方便用戶進行理解使用。

          通常這個控件可以在單選的時候進行隱藏,這里先按下不表,我在樹形選擇的類型當中深入給同學們進行分析理解。


          4.選項文本

          注意字數限制、超出后如何處理即可,我就不做過多介紹。



          樹形選擇的類型:

          在講樹形選擇之前,我先為大家講解關于與其相關的同類型產品,為了方便大家的記憶,我選擇出了兩類不同的組件進行對比,感興趣的同學可以關注“CE青年” 后臺回復樹形對比進行查看。我通過視頻的形式為大家進行了講解,相信大家在看完之后一定會有所收獲。

          1.單選樹

          單選樹只能選擇葉節點,也就是需要將每個樹展開過后才能進行選擇。

          它是一個較為傳統的選擇方式,因為它的選擇熱區較小并且理解成本較高,因此這種方式不太滿足現如今對于B端產品效率提升方面的要求,并且要求十分特殊,因此使用較少,現多以單選節點樹為主。

          2.單選節點樹

          單選節點樹與單選樹最大的區別在于其能夠選擇子節點,這樣可快速選擇該子節點以及其各種葉節點。

          同時傳統的單選節點樹中是采取單選按鈕的方式,隨著對B端要求的不斷提高,并且在樹的功能越發的復雜過后,幾乎取消了 單選按鈕 的形式,取而代之的是將整個 文本標簽 作為選擇的熱區,用戶點擊過后即可進行選擇。

          因此在樹形選擇當中,逐漸將單選節點樹演變成由兩部分熱區所組成的一個控件:



          在左側,主要以樹類型的展開折疊操作,熱區通常就是圖標折疊圖標這一部分;

          在右側,以選擇該選項、節點的操作為主,熱區范圍以整個選項文本作為基礎,進行延展即可。

          這里還是提示以下新讀者,這類選擇一定要進行 Hover 狀態處理,不然用戶無法根據光標的變化判斷是否可點擊,當然老讀者跳過就行~

          3.多選節點樹

          大家在對比單選與多選時會發現,為什么不會存在多選樹?不存在只選擇選項的多選呢?

          思考時間又到了,別忘下劃,自己先想想呢~

          雖然在理論上會存在多選樹的情況,但是它存在的價值比較詭異。首先在樹的節點當中,我選擇一個子節點就是選擇該節點下的所有。因此可以說是選擇了一個節點;或者說它選擇了該節點下的多個選項,因此在實際情況中這類場景過于的少,更多會用多選節點樹進行代替。


          當然,多選節點樹與單選節點樹在結構上是十分接近的,就是將復選框展示出來,方便大家進行選擇。考慮到大家經驗不足,建議這里復選框放在折疊圖標前側,原因有二:


          • 在樹形選擇后續的拓展當中,經常會遇到選擇增加一些操作功能,比如 新增、刪除、復制、粘貼、拖動排序。我看很多設計師最開始因為種種原因將選擇組件部分放在后側,導致之后的操作無法進行更多的拓展,隨之崩潰,對樹形選擇又是一頓亂造~

          • 現有的基礎架構基本都是沿用了這類設計,可減少前端同學的工作量,同時也減少他 BUG 的產生。


          多選節點樹的使用場景非常多,我舉一個大家在樹形選擇中都會犯的例子,希望大家能夠多理解其中存在的特殊邏輯:


          比如在一個大型上市公司當中,我作為老板會去設定整個“設計部”的權限,并且想要得到的效果是之后有任何新員工都是使用這個權限。如果作為一個新人設計師,很容易就會使用多選節點樹,將整個組織架構進行選擇,但是這樣的選擇與用戶實際想要的內容是存在較大差異的。


          在產品設計中,對于上訴的“設計部”這個概念其實是一個動態數據,即在之后新增到“設計部”的所有員工,我不必再去權限管理中重新配置。我們遇到動態數據的情況時,首先不建議大家采取樹形選擇,因為首先對于這個概念的理解成本很高,無法通過樹形選擇這樣的方式讓用戶理解;同時系統對于這類動態數據的情況都建議特殊處理,至于怎么處理,大家可以在評論區討論,我也會在后續文章當中為大家進行講解。


          樹形選擇的優點

          易理解:

          因為樹狀結構本身就已經存在很久,早在 DOS 計算機時代就有它的影子,經過長期累月的發展,用戶在理解上也會相對更加容易


          快瀏覽:

          在數據量特別大的時候,能夠根據子節點優先找到自己想要的葉節點,從而提升選擇效率,與《選擇錄入02》當中講到的 Tab選擇十分類似,沒看過的同學建議先去看看。


          看結構:

          結構,能夠輔助人們進行快速記憶,從而對整體框架有著更深了解。而樹形選擇正是有了這種結構能夠更為方便的讓更多人熟知,從而更快了解業務。


          樹形選擇常見誤區:

          數據量

          首先對于樹形選擇本身的控件形式,你就需要去分析其能承載的內容數據量。應該是在什么范圍內較為合適。

          當數據量過大時一定會出現異步加載、數據分頁等諸多情況,因此在設計中,需對這類情況進行設計。

          全選功能

          全選功能本身較為簡答,無外乎就是一個復選框的事情,但是在上面提到的數據量過大 + 全選的存在,會有些問題還需要大家進行留意。

          鍵盤映射

          在樹形選擇當中,都可以采取鍵盤操作從而提高效率。基本規則是:

          ↑鍵:向上切換同級節點;從第一子節點,順序返回父節點;

          ↓鍵:向下切換同級節點;順序進入已展開的第一子節點;

          ←鍵:關閉當前級別節點;返回上一級父節點;

          →鍵:展開子節點列表;順序進入已經展開的第一子節點;

          回車鍵:提交當前 foucs 的節點選項;

          樹形選擇是較為常見的一類方式,但由于大家對 基本的樹形結構 認識不足,導致對其設計會有許多誤區。

          關于樹形選擇大家還有什么疑惑,可以在評論區咱們一起討論~

          任何一個新穎的設計浪潮,都會影響設計師的設計表達。我們能做的就是感受浪潮、尋找源頭、思考走向,隨時精準有力的擁抱變化。


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

          文章來源:站酷 作者:CE青年
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端列表組件交互研究

          ui設計分享達人

          1 列表

          客服系統常規使用的列表由頂部操作欄、表頭、表體、底部操作欄構成。表格是為可讀性而生,所以表格的易讀、易對比、易操作才是表格設計的首要目標。

          1.1應用場景

          (1)展示大量結構化的數據。

          (2)需要對數據進行排列、搜索、分頁、操作等復雜行為。

          1.2設計原則

          (1)易讀性

          1)表頭。保證表頭字段名稱精簡易懂,既能節省列表空間,又能減輕視覺壓力。表頭的固定功能也能夠很好體現系統界面的友好性,尤其當表頭字段過多,數據類型不好識別的情況,固定表頭能夠大大提升用戶的數據瀏覽效率。

          2)行高。較小的行高可以承載更多的信息,但會降低視覺掃描效果,適宜的行高更利于閱讀。目前客服系統常用規格為36px行高,但有些數據量大空間小的專區,需要展示盡可能多的數據時,會考慮會采用24px或30px等小行高,需要基于場景的需求進行選擇。

          3)行排序??筛鶕侄我约傲斜韮热莸谋匾耘鋫渑判颉⒑Y選、搜索等功能,方便用戶快速篩選信息或進行信息對比查看。

          4)斑馬線。斑馬線能夠增強用戶視覺的橫向引導,尤其閱讀較寬表格且數量還多的列表,可以避免表格內容過多時,出現錯行的現象。

          5)分割線。橫向分割線能夠減輕列表豎直方向的視覺重量,只要采用合適的對齊方式,縱向分割線的作用就可有可無。當表頭字段內容少,且易于區分時,可以考慮取掉單元格的縱向分割線,弱化表格形式,便于橫向信息閱讀、信息獲取和信息間對比的同時,又能夠簡化頁面。當數據量太多或單元表格較寬時,保留縱向分割線幫助提升瀏覽速度。

          6)列寬。盡量減少展示的列的數量,關注用戶需要的必要信息,當表頭字段過多時采用橫向滾動條的形式,保證列與列之間足夠的呼吸感。

          7)自定義列。不同用戶信息側重可能會有所不同,可通過自定義列的下拉面板對列表內容自定義展示。

          8)列對齊。標題和內容一般采用左對齊,更符合用戶的閱讀順序。金額數值排列采用右對齊,既方便用戶讀取數據,又方便進行縱向數據對比。

          9)空白格。對于無數據項用-占位,不留白。

          10)分頁??头到y列表數據龐大,通常采用分頁來緩解加載壓力,相對用戶而言,通常滾屏會比分頁更便利,所以,若無展示數據量要求且一屏能展示完時,會盡量避免使用分頁。

          當使用分頁時,考慮到用戶的操作習慣,可讓用戶自定義每頁展示數量。

          11)特殊標識。對于用戶關注的數據狀態變化,可以采用一些符號標識,便于用戶快速定位信息的同時,也能更加直觀的呈現數據變化。如下圖,通過不同顏色和方向的箭頭來反映數據變化。

          undefined

          12)全屏。全屏展示能夠避免和表格無關內容的干擾,提供沉浸式閱讀體驗,可根據場景需要配置全屏閱讀功能。

          13)操作項。對于用戶需要進行業務辦理或高頻點擊的操作欄可以固定在列表的兩側,更方便用戶對數據進行操作。當操作項太多或操作項不常用時,可通過收起較低頻操作項,來節省頁面空間,保證用戶閱讀高效性。

          undefined

          (2)易搜索

          1)條件查詢。一般位于表單查詢頁面上方查詢條件模塊,當查詢區域內容過多時,可展示第一行的篩選項,其余收起。

          undefined

          2)表頭篩選。在表頭單元格右側增加篩選圖標,點擊后出現篩選覆蓋層,根據不同篩選類別,配置相對應的表單組件,可快速查找數據。

          3)標簽篩選。將用戶常用篩選條件或關注目標設置為默認選項,如時間、狀態、范圍,一般位于頂部操作欄或表頭區域。

          (3)易操作

          1)單條操作。單條數據操作一般固定在列表左側或右側。

          2)批量操作。當對批量數據進行相同操作時,沿著用戶的操作路徑,建議將此類操作按鈕放至底部操作欄。

          undefined

          3)全局操作。當進行一些“導入、新增、導出、其他頁面跳轉入口”等列表的全局操作,或進行模糊搜索、條件篩選等操作時,建議將操作按鈕放至頂部操作欄。

          undefined

          4)詳情。可在操作里加“詳情”按鈕,也可將名稱項做成可點擊樣式,跳轉詳情。

          5)樹形結構展示。無須用戶進行頁面跳轉,展開父級節點即可查看子級列表內容,一般控制在三層以內。

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

          文章來源:站酷 作者:史晴sunny
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端產品設計思路&高頻設計要點筆記

          ui設計分享達人

          B端全稱是Business即商家(泛指企業)的產品,通常是企業或商家,為工作或商業目的而使用的系統型軟件、工具或平臺。相對于C端產品,B端產品對業務邏輯和產品邏輯要求會更高。


          本篇筆記將羅列B端設計過程中的核心設計思維和高頻設計要點,結尾附上大廠設計規范鏈接。供大家下載查閱。



          ★目標導向·B端產品的商業目標


          設計開始要了解設計的目標,用戶的行為都是有「目標動機」的,B端產品的業務目標往往都是為了為企業或個人為了解決某一項工作上的問題。
          當設計過程以「目標」為出發點,可以增強設計判斷力,輸出更有效設計解決方案。


          B端產品的設計原則:提高使用者的工作效率,同時降低業務鏈路的操作及學習成本。

          當你有了目標以后你的設計就可以圍繞這個目標展開:



          ★設計價值·B端的設計價值體系搭建


          對于B端的產品而言,用戶最關心它能為實際的工作帶來哪些便利,而并非這個界面做的多么的好看,以及用戶體驗多么棒。所以B端產品設計價值優先級往往是  功能性>表現力



          B端產品設計需要站在整個業務線全局角度去把控各個設計點,不再是「用戶體驗」至上,為實現「任務目標」,「犧牲」一部分「用戶體驗」是必要的,這個時候視覺和一些體驗就不那么重要了。通過調研業務去了解各個角色職能的工作流程、相關痛點,讓產品能用,好用。



          要點1·了解項目的業務流程


          理想的B端設計需要了解業務目標以及業務鏈路中每一個環節的過程。將業務邏輯理解透徹再考慮應該如何進行設計實現。

          這樣做的原因當你站在使用者的角度進行同理心設計可以更好的幫助用戶完成他要完成的工作,從而提高效率。產品原型一般基于「功能」本身,而設計師從用戶實際場景規劃用戶的任務流,可以優化產品邏輯,補全缺失場景,通過了解業務流程也能給予創造性解決方案




          要點2·用戶調研與場景化設計思維


          B端產品往往是是服務于企業用戶,用戶畫像需要專注于用戶特征中的「群體職業身份」這類人無論性別、年齡、地區有何差異,他們都是一類角色,我們的產品要提供給這類角色使用,而不是某個人使用。



          由于B端設計師不是產品的用戶,無法沉浸在與用戶相同的真實場景中,建立共情。所以設計師最好親自感受一下業務流程,獲得一手的用戶洞察,


          獲取B端用戶反饋的方式

          「通過業務人員交流」業務人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫像。
          「實地走訪」:觀察在自然狀態下用戶如何完成工作任務,并提問題:「你怎么做?」或者「為什么這么做?」
          「建立種子用戶群」:聚集活躍的種子用戶群,收集意見和建議,并在群里驗證設計想法。
          「親身體驗」:成為真正的客服小二,接聽客戶電話,記錄自己在工作臺場景下的真實體驗和感受。

          獲取用戶畫像后了解該群體背后工作感受,行為習慣,以及任務類型。




          要點3·情感化設計心理


          安全感和信任感建立:人們越來越關注隱私和信息安全。如果你要求必須填寫敏感信息,請確保使用字段下方的注釋文本解釋為什么需要這些信息。


          實際工作中我們曾經自動獲取過用戶之前表單中填寫的的支付類賬戶信息,在收集的用戶反饋中,用戶會感覺到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗會更好,但是考慮到信任感,敏感類信息請不要自動獲取。


          讓用戶感受到你正在幫助他操作:Jakob Nielsen于1994年提出的十大可用性原則中,其最后一條原則Help and documentation(幫助性指導原則)是搭建B端用戶幫助體系的核心準則,在理想情況下,沒有幫助文檔就可以使用系統是最好的,但在某些情況下(尤其是B端系統),提供一些引導性的幫助其實是必要的。


          B端系統中可以嘗試搭建用戶幫助系統:




          要點1·降低學習成本


          對B端產品來講,設計師在設計的時候是不需要耗費太多的思考的,只是去按照交互設計師的規劃堆砌圖表和列表。但是對于使用者來講,其中縱橫交錯的商業邏輯和業務邏輯卻是給用戶搭建了一個十分高的門檻。



          要點2·保持高效


          例如修改資料的時候,使用彈窗、浮層等等交互操作會減少頁面跳轉的頻率。

          但是與此同時,減少頁面跳轉并不代表真正的高效,例如瑞幸的供應商系統,供應商所產生的訂單需要按照指定的流程一步步進行操作確保不會出現問題這樣雖然頁面的跳轉增加,但是可以避免操作出錯給用戶帶來更大的困擾。



          要點3·整理信息/引導視覺


          設計要根據用戶的瀏覽習慣和視覺動線。要嘗試引導用戶的視覺,舉個例子,如何引導:




          設計側核心要點


          B 端產品是以業務為核心,是需要用戶長時間操作并完成工作任務的,對于操作和展示內容無關的元素,越少越好。視覺為功能讓步,追求簡潔、清晰、克制、理性的視覺風格。設計語言盡量做到不干擾不打擾。



          要點1·表單設計


          輸入順序:先易后難;先必填后選填;先公開信息后隱私信息;有關聯性的合成一組,特殊問題后置,用戶輸入時、不會覺得突兀、門檻太高 。

          自動對焦(PC端)進行表單頁面,自動對焦第一個輸入字段可以引導用戶開始進行輸入。

          標題:標題是對下文最短最精的概括。用戶一般都會跳過表單內容,而且幾乎都不會仔細閱讀那種特別詳細的描述。所以用最少的文字說清楚一個表單的目的尤其重要。
          用戶應該可以看一眼標題就知道他們應該怎么做,而不是非得把剩下的全部看完,
          (附:這部分感興趣的同學可以搜索“微文案設計”)

          在表單編寫方面,或者說各種寫作中,刪減詞語都要比添加詞語更加有益。 在仔細檢查不必要的詞語后,文章會更篤實,更連貫,更吸引人。



          這個鏈接有什么用?關閉是點擊右上角的按鈕嗎?如果并沒有增效,那就是減效。每一個字,每一張圖片,都不是100% 必需的,這些都會降低你表單的轉換率。

          刪除一個字段,表單提交率就可以提高 26%。(本篇筆記原本有12000余字,為了避免浪費大家時間,我僅保留4000余字的高頻要點內容)


          PC端產品提示文字盡量不要放在框內

          提示文字存在于框內常用在移動端,它的空間占比很小,對移動端的小屏來說,是非常友好的,但如果在交互上處理不好,會有很大的缺陷。

          內部標簽結構,只有提示性文字,用作提示用戶應該輸入什么內容,但用戶在輸入的時候,內部的標簽/提示性文字就會消失,這時候,用戶會失去它是否輸入準確的唯一判別標準。


          減少打字需求

          字段輸入通過部分人工智能自動將操作步驟可以變得簡潔高效 ,也包括諸如一些、自動定位、圖片識別、自動獲取,第三方導入等方式來使用戶的效率得以提升的功能。
          打字是在線表單中最耗時、最密集的部分,而且經常會導致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能,將減少工作量并提高轉化率。



          使用文本塊

          文本塊會更容易讓用戶記住內容:例如銀行賬戶、電話號碼等等。它指的是將信息排列成「塊」的過程,使內容更容易保留、處理和回憶。一份研究聲稱數字 3 是幫助人們吸收和回憶信息的神奇數字。


          表單的提示文字和定義格式要求

          如果一個字段需要特定的格式輸入,請告訴用戶。例如密碼要求、語法規則、編號間距等等。



          用輸入框長度提示

          可以用輸入框長度提示用戶輸入的內容是否正確。
          德萊厄斯研究所的可用性研究發現,如果一個字段太長或太短,用戶開始懷疑他們是否正確理解了標簽。


          在用戶輸入的時候,右下角告訴用戶已經輸入了多少字,如果超過 80 字后會變紅色,用來警示用戶,并且此時的表單域也無法輸入新的內容。


          如果用戶填寫錯誤,向用戶顯示錯誤發生的位置,并說明原因。


          單選框

          如果你的表單里的選項少于5個可以列出所有選項供用戶快速選擇,當大于5個時候可以嘗試用下拉框解決。
          將第一個選項作為用戶最有可能的默認選項,且是最安全的選項,提前預判用戶的操作提升選擇效率。排列方式推薦數直排列,豎直排列相對于水平排列容易讀取和定位,提高用戶的瀏覽順序。



          解釋隱私消息

          當前需要用戶填寫相對隱私的信息時,請給予解釋這么做的原因及目的。


          收集設計反饋

          完成表單的設計后可以給業務用戶進行簡單的測試,并記錄他們填寫的時間收集反饋,以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設計。

          最后在情感化設計系統里記得感謝用戶填寫或者反饋問題,因為用戶是花時間的。所以請表示感謝。


          要點2·表格設計

          表格的設計圍繞著「可讀性」和「易操作」兩個設計原則。設計易讀,易掃視,易比較,易操作的表格結構是表格設計的首要目標。


          列寬有三種常見處理方式:

          1.  根據內容的極限長度給出足夠的固定寬度;
          2. 可以固定部分列的寬,其余列按百分比處理;
          3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態,內容為空狀態顯示方案;
          4.需要設置列之間的最小寬度,表格響應式布局情況下最小不小于此寬度。

          M-Densign規范中對齊方式會遵循如下規則:
          表格的排序,應從用戶目的出發,遵循用戶查看數據的習慣,尊重數據之間的關聯性,設計用戶查看、操作數據的路徑,而非隨機排列(這部分可以在業務側調研時驗證,提高用戶體驗和閱讀效率)。


          1. 文本信息/混合型文本左對齊,符合從左到右的閱讀習慣;

          2. 數字信息右對齊,方便數字之間的直觀對比;



          要點3·按鈕設計

          設計規范需要定義按鈕的四種狀態:正常狀態(Normal)、懸停狀態(Hover)、激活狀態(Active)、加載狀態(Loading)、禁用狀態(Disabled)



          B端產品的開發一般涉及多個開發團隊協作,例如瑞幸的后臺修改按鈕顏色,都可能牽動10+工程師的協同。

          所以B端產品在進行設計改版以及設計側調整時候要思考調整對于業務側是否有直接幫助,在設計和規范建立之前,切勿頻繁改動。


          除了完全獨立設計開發的項目以外,還有大量的 B 端項目是采用第三方框架開發而成的,如 Ant、Element 等等。這是因為這些第三方程序可以幫助團隊節省大量的開發時間和精力。


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

          文章來源:站酷 作者:Cesare_玄漓
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端設計指南 - 審批

          ui設計分享達人

          業務究竟是什么?


          很多時候既讓初入B端行業的設計師感到一絲絲迷茫,因為不同的B端系統也就意味著,它的業務一定就會有所不同。比如CRM系統當中的客戶生命周期管理,OA的辦公自動化,特定的行業往往都會蘊含著不同的業務類型


          而作為設計師,如果只了解設計模式、設計組件,不去分析設計最后的業務訴求,其實是沒有任何意義。因此想要通過B端設計指南,和大家一起聊聊B端業務,以及背后所牽涉的具體邏輯。今天就簡單聊聊最為常見的 審批


          開始之前,還得再多說兩句,因為一個系統當中,業務本身就不是獨立存在的。因此在去講述審批的過程,一定會涉及到 流程、權限、表單配置 等一些基礎內容,建議可以先做初步了解,再結合文章進行閱讀



          審批的起源

          雖然在說起源,其實我更想給大家講清楚 審批在B端系統 當中的重要性

          審批字面意思是審查并加以批示,通常指對 下級呈報上級的公文進行審查批示,報請上級審批

          現如今,任何事情一定都會有分工協作,而使用審批的好處是可以

          • 規范員工行為

          • 提高企業運轉效率

          • 系統存檔便于溯源

          • 保護環境(畢竟減少了紙張浪費)

          當然在不同的階段的公司,對于審批的訴求是不太一樣

          小公司:因為審批的決策路徑短、流程上都非常簡單,但因此就會缺乏規范保障。比如在外出辦公時,看似只需要與老板當面進行口頭上的溝通即可,但是在外出出現意外時,由于缺乏外出辦公的相關證據,員工的權益則很難得到保障

          大公司:因為審批的決策路徑長,流程上都極其復雜,因此會在多人協作下完成整個流程審批。比如想要申請購買辦公用品時,會由 行政、Leader、財務 層層審批,從提交審批到最終落實可能需要十天半個月,但是這樣的流程,能夠確保企業在清查財務狀況時,更加有理有據

          審批的演變,就是從最開始的規章制度而來。比如在早期去政務機構辦理各種業務時,會讓你去填寫各種紙質表單。在審核過程中,則需要有各個機關的蓋章及批準,而這種形式正是政府對于普通市民的自上而下的管理方式


          審批其實是整個B端系統的靈魂,因為在B端系統當中,企業想要使用系統的一大痛點便是 核心的管控 

          因此你會發現,只要一個獨立的系統,一定會存在獨立的審批模塊。因為B端管理系統當中企業的最終目的,是管理手中的人,而審批便是最為常見的一種手段

          審批在如今的B端系統當中,可以理解為它是一組消息,在這一組消息當中會有:“具體的文本、對應的附件、以及照片視頻”這些內容都是輔佐 申請人 去講訴你需要申請的內容

          比如我們在申請病假時,往往需要出示 三甲醫院所開設的證明,對于這個證明,如何在表單當中出現,你會發現最為常見的便是拍攝證明圖片,然后上傳到表單當中(這個與字段屬性緊密相連,我就不做不過介紹)


          審批的這組消息還會有些特殊,因為它非常重要,你可以理解為它是一則“加急消息”會提醒審批人快速的進行處理,同時會告知相關的參與人(處理人、抄送人)審批的進度、并且無論成功與否,都會在系統當中留下 足跡,因此它起到了 “追蹤、通知、留存” 三個非常重要的作用,我們首先對于審批進行一個基礎的拆解

          審批的拆解

          如果把審批單獨拿出來,你會發現審批會牽涉到 發起人、處理人、抄送人

          發起人:

          審批的發起人,也是整個審批流程的歸屬人,他最關心整個審批進展

          因為在發起人的角度,創建完審批事項后,可能還需要進入審批頁面,完善 后續附加信息、及時了解審批狀態、催促審批人的審核、處理駁回意見 等等,因此站在發起人的角度,審批需要盡可能詳細的展示 當前審批的狀態、完整的審批流程、駁回信息的快速操作、成功信息的必要通知

          處理人

          審批的處理人主要在審批過程做出決策,因此他更在乎的是審批申請內容的信息。比如 審批的信息內容、直接的審批操作、多條審批的管理

          當然,在一些大型的集團企業當中,會將審批分為審批「直接處理人」「間接處理人」(后文以 直處人、間處人 簡稱)

          「直處人」作為審批的第一處理人,也就意味著他的意見至關重要,如果「直處人」通過過后,相對而言整條審批的通過幾率會大大增加。通?!钢碧幦恕故亲鳛樯暾埲说闹毕殿I導居多,因此多數情況下可以理解為直屬領導進行 “把關”

          「間處人」作為審批的后續處理人,同樣在流程當中也十分重要。但在有些情況下,比如一些偏平化管理的企業,「間處人」更多像是“權利”的象征,因為權利已經下放給「直處人」,而「間處人」起到知曉審批以及企業的規章制度要求

          抄送人

          審批抄送人主要起到通知對應角色的作用,因為一條審批的出現,會造成諸多影響,假設今天你需要申請事假,如何通知同部門的其他成員呢?

          發送即時消息,顯得過于簡單;每個打電話,又有些麻煩;發送企業郵件,又怕他們沒有看到

          這時候抄送人會顯得尤為關鍵

          通常抄送會有企業流程上管理員配置的固定抄送人,以及發起人選擇的自行抄送人 兩種類型

          固定抄送人 角色通常與管理員配置整個流程有關,他是角色當中 管理員 所配置的重要通知人,比如今天你的請假信息,肯定會告知行政,像這類默認的通知流程,則可以將其設為固定抄送人

          自行選擇抄送人 則是提供給發起人自行選擇,該條審批可能會影響到的相關人群。比如就是發送給同事,讓他們知曉今天你不在崗位上,因此自行選擇可以增加審批抄送的靈活性

          這里肯定會有很多讀者會問,我選擇抄送人與我發消息給同事,有什么區別么?

          看似完全相同,實則有明確的區分

          通過消息,將審批內容傳達,本質上是你自行將內容發送給對方,對方會對于你這個消息的真實性會產生疑問?你是否通知了

          而選擇抄送,更為權威,更能體現你這條消息的真實性,并且整個流程都已經由領導進行批準,因此不會存在太大問題

          其實審批的本質就是一組消息,而這一組消息當中,申請人 通過 表單配置 去獲取需要補充的消息內容,而流程會根據企業所配置的流程方式將這一組消息進行合并轉發給對應人,而審批人則需要對這一組消息進行回復“通過、駁回” 來讓整個流程繼續延續

          審批流程

          審批當中,最主要的便是流程。因為你可以通過查看流程圖,去了解整個企業的組織架構、規章制度、員工管理方式

          1.串行審批/依次審批

          串行審批主要是指當一個審核節點通過后,才能進入下一個審核節點。如果節點駁回,則可以根據業務實際需要,配置駁回的返回路徑,會有:撥回到發起人、駁回到上一個節點、或駁回之前任意一個節點 重新審批


          2.并行審批

          并行審批是指一個審批節點存在多個角色同時審批,這里會存在兩種情況

          1. 任何一個人審批通過,則可以進入下個節點,這也就是系統當中常說的 「或簽」

          2. 所有審批人員通過,才能進入下個節點,這也是系統當中常說的 「會簽」


          3. 條件審批

          條件審批就是將企業當中的規章制度映射到實際的項目當中,通常就是某個審批內容會根據 金額多少、實際數量 等 進而選擇哪個角色進行審批

          比如銷售人員在申請一個合同審批時,會根據合同金額的不同,審批人也會有所差異

          • 當金額小于8000時,合同直接由財務專員進行審批,進而讓流程進行快速審批

          • 當金額大于8000時,合同會由銷售主管進行審批,讓銷售主管能夠掌握企業的重要合同


          4.自主審批

          通過發起人選定一個審批事項后,將自主選擇后續的審批內容,進而實現審批的后續選擇。這是一種較為靈活的審批流程,當企業尚未形成標準化流程時,自主的核心就是當發起人發起一個審批,提交時需要自行選擇下一個環節的審批人。而下一個環節的審批人審批通過后,可以選擇繼續流轉到再下一個人去審批,或者結束這個流程

          審批頁面梳理

          審批的背后,它映射的其實是企業的一條條管理制度,而它的設計一定是要滿足企業的實際需求。因為你負責的產品不是為某一家企業提供的服務(定制化產品),并且企業管理制度的變動其實是家常便飯,你需要去考慮一個通用的解決方案,這個解決方案拆解下來會分為三個內容,分別是:申請表單、流程配置、更多配置 進行講解

          1.審批表單

          審批表單是最為一個“簡單”的用戶可配置化表單,因為現如今大多數B端產品都是以 SaaS 作為基礎(如果是定制化產品 它的審批內容、流程也不會是固定不變的)也就意味著審批表單需要為企業提供“DIY”的方式,通過表單提供不同的字段類型,去構建審批的實際要求


          比如在一個選擇請假時,年假、事假、病假、婚假 等的要求都會有所不同

          如何知道他們的差別,其實可以根據《勞動法》的相關規定 以及 各個其實的實際公司制度,進行個性化的處理

          在申請婚假時,需要上傳你的結婚證,以證明其真實性;在病假時,需要有3甲醫院的病情證明;在年假時,則需要有你的剩余年假天數。而這些特殊訴求,其實都需要在表單當中進行各種定制化表單

          當然這只是極為常見的 請假 場景,而在實際業務當中的復雜場景(更多需要將 審批與其他系統關聯)一個簡單的表單是沒有辦法進行滿足

          這也是很多企業會發現,無論是飛書、釘釘、企業微信,都沒有辦法滿足其實際流程需求。又沒有辦法改變自身流程,只能夠自研、定制化 產品,這也是為什么即便各行各業都有了初具規模的 SaaS 產品,但是還是會有很多企業愿意自行研發軟件


          2.流程配置

          企業可以根據自身的系統流程,在流程配置當中去定制特定的流程。在這個頁面的設計上,需要注意不同參與人的狀態,以及復雜流程時如何才能夠進行清晰的閱讀,因此增加了 顏色區分(發起人、審批人、抄送人)+ 視圖縮放 功能

          顏色自然不必多說,整個系統需要統一,因此不能夠只考慮在管理后臺的顏色,是一定要在詳情頁當中也能過保證顏色的一致。這樣才能夠滿足實際業務所需

          視圖縮放只是小小提一下,常見的視圖縮放會放在左側,至于為什么,自己稍稍揣摩揣摩

          由于流程配置的屬性頁面會涉及很多表單的復雜邏輯,這個只能夠留在我的 訓練營的課程 當中進行拆解,這里就不過多贅述


          3.更多配置

          更多配置項則是審批在實際情況下的特殊處理,比如:申請人修改審批的具體時間、能夠將審批轉發給其他人、出現多次相同的審批人是否去重 等等...  其實就是將審批的設計方案進行“賦能”,去滿足更多企業在實際場景當中的需求,感興趣的同學可以去 釘釘、飛書 了解詳情


          結語

          審批,核心還是提高企業運轉效率,如果在審批之間,還需要不同角色私下反復溝通,本質上就失去了審批的意義。而審批本身,就是一個典型的B端產品 從場景到需求,進而研發功能,最后又回歸場景,你設計的好與壞,落地到真實的場景當中,試試便知

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

          文章來源:站酷 作者:CE青年
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端體驗設計-與復雜共處

          ui設計分享達人

          “復雜是世界的一部分,但它不應該令人困惑,好的設計幫我們馴服復雜,不是讓事物變簡單(如果復雜是符合需求的),而是去管理復雜”--唐納德·A·諾曼



          與復雜共處,這是一個有趣的話題。在這個奉行“少即是多”的時代,設計師對于復雜噤若寒蟬,認為優秀的設計應該簡潔明了,若無必要,勿增實體,而復雜則常備被視作失敗設計的標簽。設計師為了保持設計上的簡約挖空心思,甚至試圖通過削弱功能的方式來降低產品的復雜度,得到自己想象中的完美設計。然而一味追求“簡單”的設計真的符合用戶的實際需求嗎?從心理學的角度來看,復雜的事物往往功能強大,而功能強大意味著更好的服務與更高的價值,用戶也更愿意為之付費。當我們購買商品時,我們會仔細斟酌,拿著產品的功能列表反復比對,這個時候我們忘記了產品復雜與否,更多考慮的是功能是否滿足自身需求。


          對于大部分B端產品而言,復雜或許難以避免,復雜是出于實實在在的業務的需要,而非某位設計師的錯誤喜好。B端產品之所以給人感覺會相對復雜,是因為產品需要完成復雜的工作任務,界面內承載的信息內容較多,在視覺上會帶給用戶壓力,直觀感受上覺得產品很復雜。但是這些信息又都是必需的,如果缺少這些必要的信息,會對用戶理解和使用產品造成阻礙。就如同飛機的駕駛艙,密密麻麻的按鈕如此復雜,但是每一個按鈕都有著相應的功能,不可或缺。既然復雜難以避免,那么作為設計師我們不應該被動接受或盲目拒絕復雜,我們應該學會如何與復雜共處,去嘗試馴服復雜、管理復雜。


          理性看待復雜


          相信很多設計師和我一樣,經歷過現代主義浪潮的洗禮,對于簡約的設計有著或多或少的偏好。因為這種偏好,在自己進行設計時也希望能夠選用這種風格,在設計時刻意的去追求界面簡約,卻忽略了界面上的簡約不等同于產品易于理解和使用。從心理學的角度上看,復雜的事物更容易理解,簡單的事物反倒令人困惑,一味的追求簡單反而會讓事物變得復雜。


          B端產品的目標是降本提效,追求簡約的設計思想在B端產品的設計中并沒有那么適用,為了提升用戶的操作效率,我們需要將一些能夠幫助用戶理解的信息與常用的操作直觀的展示給用戶。這會在一定程度上增加界面的復雜度,但是相較于產品視覺界面會因此變得復雜,產品的易用性和操作效率對于B端產品而言會更為重要。


          與復雜共處的前提是能夠理性地看待復雜,復雜本身的含義即非褒義也非貶義。復雜描述的是事物的狀態,它在詞典上的解釋是擁有很多即錯綜復雜又相互關聯的組成部分的事物。產品復雜與否是由產品本身所從事的業務和需要完成的任務來決定,就像我們不能要求一個做機械結構設計的工程軟件做得像一個圖畫板一樣簡單,因為兩者的功能需求不是一個層面的,所以我們也不能單純的將產品簡潔還復雜作為評判一款產品優秀與否的標準。


          分清復雜與困惑


          我們之所以對復雜懷有畏懼,其實更多的是畏懼令人困惑的復雜,復雜與困惑有著本質的區別,理解他們之間的區別很有必要,復雜描述的是事物的狀態,而困惑表述的是用戶使用產品時的心理。復雜的背后可以擁有規則與邏輯,理解這些規則和邏輯,能夠幫助我們理解和使用產品。而令人困惑的產品往往缺少這樣的內在規則與邏輯,用戶難以理解產品的運轉機制,需要花費很大力氣才能完成有效操作,容易讓用戶產生挫敗感。產品可以是復雜的,但是不應該讓用戶困惑。


          在很多復雜的傳統線下業務數字化轉型的過程中,為了讓產品易于使用,設計師需要深入到一線,去了解真實用戶在線下業務場景中是如何處理日常任務的,在流程線上化過程中也需要遵循這樣的業務流程,這樣能夠讓用戶更快上手,而如果我們在設計過程中不去參考用戶在線下的操作場景,按照自己的想法去意測用戶的行為,這樣設計出的產品背離了用戶的心理模型,缺乏內在邏輯,會讓用戶感到混亂困惑,陷入深深的麻煩。


          基于產品本身功能需要,我們可能無法很主觀的去降低產品的復雜度,這就需要我們在進行產品設計時花費更多的心思,通過對業務流程、頁面布局、信息呈現上的調整與設計讓產品變得清晰,不讓用戶陷入困惑。如下圖的關于表單編輯器的A\B兩種設計,用戶在編輯器內完成一系列針對表單的編輯、配置操作,然后發布表單。方案A中將這些表單編輯配置項通過tab進行排列,這種方式結構簡單,但是擴展性較差,過多的欄目也容易讓用戶陷入困惑,不清楚需要完成哪些配置項才能進行發布。方案B中采用了步驟導航加側欄導航的雙層導航結構,在步驟導航上給出完成表單編輯配置的主要步驟,在大的步驟下用側欄導航承載小的編輯項,結構清晰,且能夠對用戶編輯表單提供一定的幫助指引。雖然兩種方案信息內容上都一致,視覺觀感上甚至方案B更為復雜,但是方案B在這里可能是更合適的方案,因為方案B在配置流程的指引上更為清晰,也更貼近用戶心理模型,即使沒有使用過在線表單的用戶也能理解產品流程,因而用戶能夠更容易的完成表單配置并發布表單。



          功能決定產品的復雜程度


          我們在使用產品時,都會有一個大概的心理預期,會認為某一類型的產品會較為復雜,某一類型的產品會相對簡單。為什么我們會有這樣的認知呢?是因為我們知道這些產品大概有哪些功能,而這些功能就決定了產品的復雜層度。產品的復雜程度由產品的業務與功能決定,而不是依照設計師的自我喜好,像如淘寶、京東這類的購物網站、擁有著很多的欄目,所以淘寶、京東的界面相對來說較為復雜;而像百度這樣的搜索引擎功能相對來說比較簡單,所以界面設計相對簡單干凈。


          我們可以容許一個功能強大的產品設計得相對復雜,但是一個功能簡單的產品設計得復雜難用就是一個災難。作為設計師我們需要根據產品的實際需要來進行設計,即不過度設計,也不執著于追求簡約,而是基于需求恰到好處的進行設計。


          復雜產品也能有好的體驗


          復雜的產品會有好的用戶體驗嗎?答案是肯定的,用戶體驗的好壞與產品是復雜還是簡單并沒有直接的關系,很多時候復雜的產品也能帶給我們良好的用戶體驗,在互聯網產品中,我們可以看到很多復雜的產品,這些復雜的軟件產品,一點點的改變著我們的生活與工作方式,讓我們生活與工作變得便捷與高效。


          首先可以看看我們的國民級電商應用淘寶,乍看淘寶的界面,可能會覺得十分復雜,甚至會給人一種眼花繚亂的感覺,但是包括我在內的許多人仍然十分喜歡逛淘寶。淘寶內除了有本身的淘寶、天貓店鋪外還有專做海淘的天貓國際,做社區團購的淘鮮達,專做拍賣的阿里拍賣等數十個板塊,業務繁多,功能復雜,但這幾乎很難改變,因為之所以做這些業務和功能背后都有著商業上的考量。從交互設計的角度看,雖然淘寶的業務和功能繁多,卻有著清晰的布局、信息對齊、內容組織,產品盡管復雜,但并不令人感到費解和困惑。購物流程也與用戶在線下購物流程相仿,貼近用戶的心理模型,用戶容易了解產品功能、容易與之交互,整體上有著良好的用戶體驗。



          又如我一直在使用的一款筆記軟件Notion,Notion相對于印象筆記、有道云筆記而言更為復雜,需要花費一定的時間成本學習才能夠從容上手使用,但是這并不妨礙Notion被眾多使用者所追捧。Notion的很多功能在使用之前,甚至都不會想到會出現在一款筆記產品里面,如甘特圖,多維表格等,這類功能一般出現在項目管理類軟件中。而Notion塊結構的布局模式,讓筆記能夠自由拖拽,擁有了極強的自由度,用戶可以很自由的用各種各樣的形式來記筆記,要是你肯再花一些心思,你甚至可以在Notion內搭建一個個人專屬網站來記錄的學習知識,打造個人專屬知識庫。將我們習以為常的線性筆記思維,轉變成縱向思維,甚至是網格狀思維。Notion無疑是復雜的,但是這樣做是為了給用戶提供的強大功能和極高的自由度,這些功能恰恰也切合了用戶的需求,創造了一種全新的筆記體驗,帶給用戶愉悅的使用感受。



          過度簡化的潛在風險


          簡單是產品追求的最終形態嗎?其實未必,很多時候產品設計的過度簡單反而會給用戶帶來麻煩。為了追求簡單的設計,不可避免的就需要隱藏一些信息或者拉長操作路徑,這是一個權衡的過程,我們在做設計時也會經常面臨這樣的抉擇,是追求視覺上的簡約美觀還是信息傳達準確性與操作上的效率。給用戶一個簡約美觀的視覺感受無疑很重要,人們對于美的事物往往更有耐心,也更愿意去探索。但是對于一款針對B端用戶的效率軟件、辦公應用而言,準確的傳達信息,幫助用戶進行判斷,頻繁使用的功能設計得更高效便捷,這些點能帶給用戶更實際價值,也是我們在設計產品時應該優先考慮的點。



          特別是在一些專業性的軟件中,如果我們為了追求簡約而弱化或者省略掉一些關鍵信息,還有可能會導致用戶錯誤操作的出現,造成嚴重的后果。試想一下當你在使用軟件編寫一個計算字段時,軟件提供給你了計算公式卻沒有就近給你提供計算公式的解釋和用法示例,導致你因為書寫上的不規范使得計算結果頻繁出錯。這時你可能會滿懷憤怒的抱怨為什么產品會如此難用,為什么不能配置過程中給到更多的反饋與幫助信息來減少配置錯誤的發生。


          如何與復雜共處


          前面我們了解了關于復雜的定義,認識了復雜與困惑之間的區別,也明確了在B端產品中復雜或許難以避免,復雜是出于實實在在的業務的需要而非某位設計師的錯誤喜好,既然復雜無法避免,我們就應該學會與復雜共處,管理與馴服復雜。那么如何與復雜共處呢,有一些策略或許可以給予我們一些思路。


          1.為產品注入規則


          復雜與困惑的本質區別在于復雜的背后隱藏著規則與邏輯,而困惑缺少這樣的規則與邏輯,讓人無法預測與揣摩,對應到軟件產品的設計,一款成功的優秀的軟件產品,應該是易學易用、能夠滿足用戶預期,用戶能夠直觀的理解產品的流程與主要功能,并通過產品實現自己的目標。那么具體到軟件的設計上我們應該怎樣做呢?


          這里可以看看我們團隊正在使用的研發管理工具TAPD,TAPD是一款敏捷研發協作工具,凝聚了騰訊研發方法及敏捷實踐精髓,其中敏捷開發的方法就是TAPD的內在規則與邏輯,有過敏捷開發經驗,理解敏捷開發流程的的開發人員能夠快速的上手使用TAPD,對于不了解敏捷開發的開發人員也可以通過產品幫助中心學習敏捷開發思想,進而理解產品的功能與流程,因此雖然TAPD功能與頁面結構相對復雜,但是基于對敏捷開發的認識用戶還是能從產品復雜的功能界面中摸索出一條操作路徑,實現自己的目標。這就是產品擁有內核思想以后能夠帶來的直觀好處,將原本零散的功能點通過特定邏輯鏈接成操作流程,幫助用戶更好地理解與使用產品。



          相同的在我們公司自己的一個項目中我們也運用了同樣的方法,在我們公司之前研發的一款crm產品中,為了給用戶提供最佳的銷售實踐,幫助用戶更快上手使用我們的產品,我們在設計產品時尋找了硅谷藍圖團隊做了顧問咨詢,并依照硅谷藍圖的銷售轉化路徑來構建我們的產品體系,確定產品功能,梳理產品中的業務流程。并希望在以后為客戶做實施的過程中能夠將硅谷藍圖的銷售方法一起帶給用戶,讓用戶能夠更好地使用我們的產品,實現產品的最高價值,為中小企業銷售團隊賦能。


          通過前面兩個案例其實我們可以感受到,當一款復雜的產品有了內在的規則與邏輯以后,用戶理解和使用我們的產品會變得更順暢,用戶不會迷失在茫茫的功能之中,通過理解規則與邏輯,用戶能夠對自己操作結果有一個大概的預期,而不是處于困惑狀態,作為設計師的我們也可以將這種規則邏輯作為我們設計的引導,讓我們的設計更為系統和有條理,讓產品不再是一堆功能的堆疊,各自為戰。


          2. 貼近用戶心理模型設計



          復雜是用戶的一種心理感受,用戶覺得產品復雜除了產品本身結構信息復雜之外,也是因為產品在設計上沒有貼合用戶的心理預期,用戶很難理解產品的流程與交互,所以貼近用戶心理進行設計就顯得尤為重要。這里我們需要先了解三個概念,實現模型、表現模型和心理模型,三個概念的釋義如下:

          實現模型:產品是怎樣工作的
          心里模型:用戶認為產品是怎樣工作的
          表現模型:通過設計來讓用戶認為產品是怎樣工作的


          表現模型越接近心理模型,用戶就越容易了解產品功能、容易與之交互。表現模型越接近實現模型,用戶越難理解產品,產品就越難使用。復雜產品在用戶體驗過程中的痛點在于用戶需要花費時間學習或培訓之后才能了解產品的運轉機制,很多B端產品在設計時更多的偏向于實現模型,用戶在使用產品的過程中會發現很多地方的交互和自己心理預期并不一致,使用過程中會遇到很多的阻礙,影響整體的使用體驗。對于一款復雜的產品而言,我們需要讓我們產品的表現模型更接近于用戶的心理模型,這樣用戶能夠更容易了解產品的功能,并與之交互。


          大家使用電腦時有沒有遇到過類似下圖這樣的電腦報錯信息,里面是一堆的專業名詞,看得人一頭霧水。這時候我們能做的只有默默的打開百度,去了解彈窗里面講的內容究竟是什么,了解后才明白原來這樣,然后按照百度上操作步驟一通操作,僥幸解決了問題。但是當下次我們遇到相同問題時,可能還是不知道如何解決,無可避免還是需要求助百度。這個就是表現模型貼近與實現模型會帶給用戶的困擾,用戶不是專業的開發者,他們不了解也不需要了解產品背后的實現邏輯,這對用戶而言是沒有價值的,給予用戶這些信息不能對用戶起到預想的幫助作用。貼近實現模型進行設計會讓用戶與產品交互變得困難,變相的是在人為的增加產品的復雜度,與復雜共處,我們需要學會貼近用戶心理進行設計。



          3.統一交互模式


          復雜的產品往往功能、頁面繁多,如果頁面內的視覺元素以及交互各自為戰,那么放大到整個產品就是一個災難,不僅是產品給用戶感官上不統一、整體性差,過多的交互模式也會增加用戶的學習與記憶成本,用戶在這些相視功能但是不同的視覺與交互的模塊之間容易陷入困惑,對用戶使用產品造成困擾。針對這個問題,現在越來越多的公司開始通過搭建組件庫的方式來規范自家產品內的視覺與交互,一個規范完整的組件庫的確能夠在很大程度上解決產品在視覺與交互上的一致性問題,通過模塊化解決方案,也能降低冗余的生產成本,實現產品快速開發。因此很多人也認為搭建好組件庫就能一次性的解決產品體驗一致性問題,但實際上就算一個產品有了一個自己的組件庫,依舊還會遇到體驗上統一性問題,這是為什么呢?


          在原子化設計理論中,粒子是構成頁面的最小顆粒,粒子構成簡單組件,簡單組件到復雜組件,再到區塊、頁面。雖然用組件能去構建頁面,但是還會遇到頁面結構、交互不一致的問題,設計師各自使用組件去搭建并不能提升我們的效率和解決設計一致性的問題,在末端設計并沒有做到約束。因此我們在構建好組件以后還需要繼續抽取出了頁面級的組裝結構和交互模式。



          這里我們拿B端產品中常見的列表頁來舉例,縱觀所有后臺列表頁面,抽取后無非就分為這么幾個區域。不同的業務可以通過基礎組件和樣式定義符合自己業務線的子模塊。比如列表頁中的篩選區,在不同的業務場景下,對篩選器的需求也各不相同,簡單的可能只需要使用標簽選擇就能夠完成篩選,復雜的可能添加很多的篩選項甚至選項之間還有且或關系,我們需要根據實際的業務場景設計適合的篩選器,但是需要注意的是一個產品中用到的篩選器形式不應太多,我們需要抽取歸納出三四種篩選器形式去覆蓋我們產品內所有的篩選場景。來保證產品內不會出現各種相識卻有各不相同的篩選器。



          B端后臺產品中比較常見的還有表單,我們可以歸納出產品內可能會使用到的表單類型,然后定義出具體的框架結構與交互,在具體的設計過程中在根據實際情況選用不同的表單區塊。


          1.分組表單

          一種常見的信息錄入以及信息展示表單,這種形式是我們最長用。



          2.分步表單

          分布表單適用于信息錄入項以及信息展示項過多,在一個頁面內已經不能合理清晰的組織傳遞信息,或者表單內容的錄入方式或者展示方式存在較大差異,不適宜在一個頁面內進行展示時。按照布局的不同也可分為橫向步驟和縱向步驟兩種。



          3.組合表單

          組合表單因其結構能夠承載更多的信息,每一個欄目都可以承載一個獨立的表單頁,有效的管理信息。


          4.彈窗表單

          很多時候我們也會用彈窗來承載表單,好處是交互銜接流暢,不用跳頁。



          將產品中類似的區塊做成最佳的交互模式范例,能夠最大的程度的規范我們產品中的交互,這樣才能真正的實現產品體驗上的統一,化繁為簡,讓復雜的產品也能夠調理清晰,上手簡單容易。在面對復雜的系統級軟件時,在統一組件樣式的基礎上還應該統一產品內的交互模式。



          信息歸納突出重心


          復雜的產品頁面內信息往往都特別繁多,如果不做好信息歸納,用戶將很難把握住重點內容,信息獲取效率低下,十分影響用戶的使用體驗,所以信息的強弱的整理十分重要,那么什么樣的信息是對用戶而言重要的信息呢?


          信息設計大師愛德華·塔夫特認為優秀的視覺設計應該是“將清晰的思考視覺化”,他還認為只有充分理解觀看者的“認知任務”及一些設計原則才能設計出優秀的產品。


          如何找到對用戶真正重要的信息需要借助到產品設計中一個十分重要的工具--用戶模型,通過調研的來得用戶模型是對于我們產品客戶的抽象歸納,通過用戶模型我們可以確定哪些功能對于用戶而言是高價值的重要內容該重點突出,哪些內容相對不是那么重要可以弱化處理,通過對于頁面內容強弱的劃分,用戶能夠更快的獲取到對自己有用的內容,盡管頁面仍舊復雜,但是信息劃分合理、層級清晰、表意明確的頁面人就能夠帶給用戶良好的用戶體驗,幫助用戶高效的處理任務。


          說在最后


          復雜是產品的本來特性,本身不含褒貶,但是如果復雜不加以控制,讓其發展為困惑與混亂,這對于一款產品而言絕對不是一件好事情,這樣即使產品功能上很優秀,用戶也無法長期忍受,一旦市場上出現替代產品,那么忍受已久的用戶也將拋棄產品轉向體驗更好的新產品。


          曾經我也是一個極簡主義的追捧者,但是經歷過越來越多的設計項目,我開始發現某些產品復雜性是必需的,將產品做得簡單并不是其核心訴求。真正需要處理的問題也不是復雜,而是混淆的狀態和由此產生的無條理性。解決的方法不是簡單的去除幾個界面元素,讓其在視覺界面上變得簡潔干凈,而是要讓產品擁有內在規則、一致且能夠被理解。

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

          文章來源:站酷 作者:Yone楊
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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





          B端產品界面高屏效初探

          ui設計分享達人

          背景

          在 B 端設計領域中,不管是內部用戶、產品、設計師、開發,還是外部產品、設計師等,總能聽到關于界面「屏效」方面的訴求或吐槽。


          undefined


          「屏效」狹義理解是「界面過度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數)。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。


          為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感,于是我們展開了「屏效」專題的設計探索與實踐?!钙列А箤n}探索主要以「探索」與「實踐」相結合的方式展開,將實踐過程中反復驗證有效的設計策略沉淀成設計手冊,同步將部分功能進行工程化,確保可以開箱即用。


          undefined


          探索階段-為誰在何時何地設計

          用戶聲音|不同的故事相似的訴求

          面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%;認為提升屏效對體驗有提升的終端用戶占 50.6%。


          undefined


          外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里,其中就有 2 點提到關鍵字「效率」。


          undefined


          通過了解不同用戶和產品類型發現,不同的用戶在工作場景的產品使用中有著相似的特征:


          undefined



          案例收集|發現問題,大膽假設

          縱觀 B 端產品界面,發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例,為了逐步突破問題,選擇以數據產品中覆蓋率極高的表格為設計切入點,通過線上跨產品多端地毯式的體驗走查,發現表格三個層次的問題:


          undefined


          視覺、交互層在無需理解業務場景和用戶目標的情況下,都較容易發現,屬基礎問題,但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

          綜上我們提出假設:為提高屏效,可從視覺、交互、信息三個層次解決

          視覺層為提高信息查閱速度,可以通過提高信息密度;交互層為提高操作速度,可以縮短當前手勢到目標之間的距離;信息層為提高信息被理解的速度,可以通過重組織等方式。

          基于假設,我們進行了進一步的桌面研究,查閱論文等書籍,尋找設計理論的驗證和指導。


          競品分析|尋找實踐證據,謹慎驗證

          我們知道視覺上界面留白過多(過疏會增加滾屏成本,過密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號、字高和行高的關系,因為不同字體的同字號實際像素高度會有差異,因此選擇的是字高(即文字垂直高度的視覺大小)而非字號或字行高,決定留白的兩個重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關系,探究在視覺層怎樣的留白率能保證甚至提升屏效。


          undefined


          以數據產品中的表格為例,通過直接和間接競對的方式,分別從數據的查閱(視覺)、分析(交互)維度進行功能點和設計細節上的比對,來看看優秀產品是如何解決屏效問題。

          直接競對:內部用戶口碑較好的產品 A、B外界競對:同領域的 Tableau、網易有數、金山、微軟表格;間接競對:谷歌郵箱、AntD 等的緊湊主題的常規列表(一維表格)


          undefined


          通過競品分析可以發現,數據分析領域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類面向數據用戶的 Tableau、網易有數,而谷歌郵箱等工作臺常用的常規列表緊湊版本中,留白率和數據領域的電子表格不相上下。


          緊湊版的使用場景也常常是面對數據量巨大的信息呈現,通過切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大,而在實際案例實踐中,也已經將表格行高優化至 30px,克制的使用留白。


          除此外,競品其他層次的設計也做了比對,總結來看整體設計做法:高密度、少屏數、少留白等。


          文字陷阱:中英文字高不等于字號


          舉個容易犯錯的競品參考是,谷歌在緊湊版主題下字號 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠,缺乏呼吸感。


          undefined


          原因在于谷歌的 12px 是英文字體,實際字高只有 10px,而 AntD Table 的語境是中文字偏多,實際字高有 12px,所以留白的差異在于一個是 18px(28-10),一個是 16px(28-12),這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高,而非「字號」和表格行高,進一步推演,決定界面留白的是「元素視覺高度」和「元素間距」。


          論文查閱|尋找理論證據,謹慎驗證

          研究表明,低密度認知負荷低,但高密度任務完成率高,用戶更喜好

          參考資料:論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

          對于信息,用戶需要需要閱讀(視覺),思考和理解(認知),需要點擊按鈕、操作鼠標和打字(行動),在人機工程學中,統稱為負荷。即認知(記憶)負荷、視覺負荷、動作負荷,即分別對應用戶體驗設計的三個層級,信息/視覺/交互。而負荷所花費資源從多到少依次為:認知 > 視覺 > 行動。


          認知負荷,舉個例子,看了但不一定懂了。你是否有這么一種體驗——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門 C4D 教學視頻,即使就短短十來分鐘(信息密度大,輸出效率高),但是卻要看上半天。因為刷短視頻時,你的輸入效率遠高于作者的輸出效率,而看一門 C4D 教學視頻時,你的輸入效率遠低于作者的輸出效率??墒牵敵鲂适强陀^的,輸入效率是主觀的。如果輸出效率很高,你可以通過提高自己的輸入效率(比如讓自己成為 C4D 專家)來跟上作者,從而變強;否則輸出效率很低(信息質量低),你的輸入效率很高(很專業),信息于你而言都是無效的。


          假設負荷總量不變的情況下,那么以上三類場景界面需要對用戶負擔分配大致如下,官網品宣類需要低認知成本,低視覺負擔,視覺要求高,用戶才會被吸引過來閱讀,甚至酷炫的交互更能增加互動體驗而帶來的趣味感,比如蘋果官網,信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息,而 B 端應用因為是專業使用,首先認知方面隨著員工的專業度提高而降低,因此可以通過提高視覺負擔,來降低行動負擔,進而減少操作用時,當然最佳情況是三個維度能整體降低負擔,讓總負擔降低,就需要更多設計巧思了。


          undefined


          面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中,設計師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。


          undefined



          實踐階段-如何設計

          通過以上的探索,我們可以確定的是,B 端產品面向專業人員的工作界面設計中,提高屏效可從視覺、交互、信息三個層次進行,視覺層-高密度,即提高屏幕信息密度;交互層-低跳轉,通過減少頁面跳轉、手勢與常用操作的距離等;信息層-有效性,通過重組織或輔助信息幫助用戶理解,甚至提供幫助手冊等以提高用戶專業能力。


          undefined


          基于以上的總結,對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,尋找運營機會點。


          如下表格經過高屏效策略優化前后對比圖,優化前相同維度下不同人群數量的對比需要視線來回跳動比對,而優化后的表格內容,更符合用戶看差異場景下分析目的數據查閱,視線鎖定相同維度,即可快速比對數值大小。


          undefined


          下面以視覺、交互、信息三個層次解剖設計過程背后的思考。


          視覺層|高密度-克制的留白

          眼動理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動舒適轉動區 30度,垂直最大眼動舒適轉動區 55度??傻贸鋈搜圩钚∽R別范圍 12px,水平視野舒適眼動寬 1200px,垂直視野舒適眼動高 2200px。參考資料:論文《基于眼動交互的用戶界面設計與研究》


          undefined


          如圖,縮小表格行高的同時,目標信息之間的眼動距離隨之縮短,在眼動舒適區內看到更多信息,便于信息的高效獲取。


          undefined



          交互層|低跳轉-高頻信息前置

          理論基礎:菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型,它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為:T=a+blog2(D/W+1),W為其中目標的大??;D為到目標的距離;T為移動到目標所用最短時間。參考資料:菲茲定律


          undefined


          表格單元格借助交互狀態,增加懸浮出現的信息組件,前置顯示目標單元格明細信息,同時通過交互出現的指示器輔助行列信息的獲取,高頻操作考慮手勢位置放置,縮短與操作目標的距離,以提高整體操作效率。


          undefined



          信息層|有效性-信息重組織

          理論基礎:交互設計四大策略「組織、刪除、隱藏、轉移」參考資料:《簡約至上》


          undefined


          用戶為了對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看,根據用戶目標,將關聯性大的數據放置相鄰列(即將要對比的人群放置列頭),即可快速查閱,減少眼跳距離。


          undefined


          結語

          設計趨勢中常見的大字體大留白界面,但在 B 端場景中,面對緊張的工作節奏,時間和注意力變得尤為可貴,相對而言,基于復雜度守恒定律, B 端信息量大且高頻訪問的產品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉」詮釋的即是「空間換時間」,少一次點擊,少一次跳轉,少一份等待,就多一份時間和效率。

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

          文章來源:站酷 作者:Ant_Design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          B端設計|數據展示控件應用

          ui設計分享達人

          將數據查詢的條件、邏輯、方式,整理清楚后,那么下一步的內容就是如何將查詢后的數據更好的展示給使用者看。到這一步設計師或是產品應該思考的是如何將眾多分散的信息,有序的、直觀的展示出來,并且輔助使用者解決問題,為產品提效。 

          數據展示主要以表格為主,由業務需要對表格進行擴展,結合其他組件使用;其次是列表,列表與卡片樣式結合的較多。 

          設計原則
          依然要牢記的一些設計原則,即:簡潔清晰、靈活高效 
          簡潔清晰:剔除不必要的裝飾元素,避免過度; 
          靈活高效:在現有的規范指導下,根據不同業務的不同需求,快速組合多種樣式的表格,提升設計效率,也要兼顧減少開發代碼冗余; 

          一、表格 

          基礎表格包括幾點基本要素:表名、列名、數據、翻頁,這些構成了表格的主體框架,而在真實場景里使用的表格都是升級版本,補充了更多功能作為輔助,比如排序、篩選、操作、導入導出...... 

          數據篩選:不同于查詢模塊的篩選方式,直接在表頭標簽操作,一般會以“倒三角形”圖標展示,通常應用在這一條數據處在哪種狀態,例如:進行中、未開始、已完成、已取消、審核中; 


          排序:現在比較少的應用,因為排序大多是對時間上的排序,而一般一個新的數據也是按照時間倒序展示,在第一行展示; 

          操作:對某一條數據的操作,或查看或編輯或刪除; 

          導入導出:對超過一定量的數據,會進行導入數據,導出數據,當然會有遵循一定的規則,才能和線上表格數據類型一一對應上; 

          實際工作中,我們都是根據產品需求和業務需要對表格進行補充輔助功能的,在設計表格的時候,總結下來通常會遇到下列幾類問題: 


          • 有層級關系的數據該怎么展示?

          • 一條數據有父子關系,該如何展示?

          • 一條數據類型太多,表格容不下怎么展示?

          • 一些數據其中的一類型字段較長,其他類型字段段,甚至只有幾個字,該怎么展示?

          • 一組數據,數據不全,類型不全,部分數據是共同的主體,該怎么展示?




          除此之外還有樹表結合的、表格套娃 

          對于這些常見的問題,在設計時會充分考慮這一領域的專業操作者,特別是從事醫療行業的專業人士,嚴謹的數據要求會比較高。 

          1、數據的層級關系 

          在相關醫療數據的管理系統里,因為醫療數據的復雜和嚴謹性,常見的表格展示不能滿足層級關系的表達,所以在視覺呈現上增加結構化層級關系。 

          2、數據本身的父子集關系 
          另外就是同屬一條數據之下,還會進行細分多個子數據,并對應的歸類列項; 

          3、并不好看的數據 
          上邊兩種說的是工作里典型數據結構的層級關系,并且數據容量相對美觀,不多不少。而實際的數據沒有那么美好,數據長短是參差不齊的,所以在考慮上述兩個設計原則的基礎上還需滿足,可閱讀和最大化兼容; 

          在一組數據中,單條數據中某一個類型的字段很長,管理系統里表格的容量是有限的,所以在可行性的前提下,對這部分數據縮短,可以按照需要但不重要的要求,隱藏部分,將主要信息顯示出來,并給予查看全部信息的入口。 

          4、殘缺不齊的數據 
          上述的說的數據還是比較好看的,而真實數據是殘缺不全的,甚至部分數據是“丟失”的,而且列項類型很多,表格橫向寬度是不夠的。 
          那么此時通過兩種方式優化這塊內容:一種是固定左右邊際列項,中部滑動;另一個種將空數據的列項隱藏,并給予條件選擇,按需展示數據的哪些列項; 
          當然在患者端也會有患者頭像,那么在管理系統里的患者表格相對應的頭像,另外也存在患者上傳的文件(圖片),也會以縮略圖的形式展示在表格中。一般會將所有涉及到的圖片(頭像、文件)規范統一的大小尺寸。 

          二、列表

          另一個常用的列表了,常和表格組合使用的,另外在某一條數據詳情里也比較常見。在視覺表現上與表格并無多大的差異,較明顯的就是列表沒有列名名稱,實質上的區別是在前端編寫代碼上的區別。(希望這個圖能幫到在座的各位設計師朋友們,和前端叫法意見不同時,可以了解下,畢竟你在看視覺時,他/她在想用什么代碼寫出來) 
          列表一般幾個場景下會出現: 
          會根據數據“長”的怎么樣,然后采用不同的形式去展示數據,讓它“好看”些,且更容易被閱讀和理解。 

          查詢篩選類 

          1、也會遇到查詢條件較多的,那么以多組列表形式出現,兩組或是三組。多重的查詢條件,就不敘述場景了,查詢是最基本的常用方式。 

          2、遇到多組篩選條件,考慮電商網頁版的篩選和布局方式,因為它主要是表達對數據的篩選不同類型的多組聯合后,能夠符合產品需求預期的結果。 

          段落數據類 

          1、卡片列表,針對的是單條結果信息內容較多,一條信息占據一行,把重點區別于其他信息展示給管理者查看,便于識別?;拘畔ⅰF病史,省去二次點擊詳情查看操作。 
          除了上述所說的段落形式的內容,也有內容是分點和分類型的展示,主要是滿足直觀可見,提升效率為主。 

          2、九宮格列表,同樣,對于上述的分點類型的卡片列表,在數據容量的允許下,可以采用視覺上的九空格,將一級重要信息突出,作為識別來源,二級信息附著。為什么這么做呢,因為信息更突出吶~ 

          詳情類 
          對于詳情內容,即一條數據的完整展示,如無必要,別起新頁,痛苦操作給大家的忠告~~~可用模態彈窗,將信息展示出來,條理清晰,又明朗是不是 
          三、總結
          還是以一貫的方式來呈現視覺,需求先行、數據先行,再考慮后邊的視覺展示,理解了業務需求,才能讓視覺表現能夠更好的符合需求,并且兼顧對后期的數據變化考慮可擴展的空間。 

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

          文章來源:站酷 作者:啊嗚計
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          B端產品設計分析方法總結

          ui設計分享達人

          做一個完整B端系統項目前,從交互設計的七大定律,B端產品業務調研,用戶訪談研究方法,精準推導B端用戶畫像,到B端產品主風格的設計定調,深度理解B端主流組件庫的視覺規范,進而為B端產品設計做充分的準備工作,以下內容較多,大家可以根據上述目錄來進行選擇性閱讀。

          1.1 B端組件庫的概念及作用


          概念:組件庫的底層邏輯就是原子理論,類似于我們在拼樂高積木的時候,根據說明書一個模塊一個模塊來拼湊,先找零件,再拼成部件,然后是成品,這個過程和UI中的組件化是一模一樣的,組件化就是原子理論集中得表現,原子(圖標、按鈕、字體樣式等)——分子(標簽欄、導航欄、搜索框等)——有機體(圖文列表、內容卡片、布局模塊、瀑布流圖等)——模板(原子、分子組合排列組成了模板,也就是原型圖)——界面(最后根據原型圖形成視覺設計稿)


          作用:一致性:比如在不同得界面中,如果用樣的按鈕,他的按鈕的展現形式,要保持一致性。

          高效性:比如所有的按鈕不用單獨去設計了,從組件庫里調用就可以,這樣對于設計師來說就是高效的。對用戶來說,也會讓用戶的使用效率提升,比如當用戶看到藍色的按鈕就是可以提交的按鈕,看到白色得按鈕就是次要得按鈕,看到不帶邊框的按鈕就是一個危險按鈕等等。

          組合性:通過調用不同的組件來進行組合可以形成不同的頁面。


          1.2 如何正確使用組件庫


          1.2.1 組件庫的使用前提

          一些主流的組件庫,比如AntDesign、Element Design、ZanDesign組件庫等,這些框架機構本質都差不太多, 但他們有自己的特點,具體用哪個組件庫,通常由公司的架構師來進行架構選型,比如VUE(Element Design)和REACT(Ant Design),這是兩種不同的技術選型,(VUE和REACT是一種前端框架的技術架構版本,可幫助前端工程師快速進行開發的前端框架)。從技術角度講,大部分公司會首選AntDesign(React),因為有很多案例提供,VUE和有贊也可以但用的少。從設計角度,Ant Design得設計組件形式案例很完善。Element Design做起來視覺單一得樣式白白得感覺,沒有設計層次化,Ant Design更好看一點。所以先選擇底層的前端框架,再根據這個選擇前端的機構布局。

          1.2.2 組件庫的使用過程

          設計師和前端最終目標是一樣的,都是快完成保證設計質量的,原生組件不能達到要求的時候,設計師可以根據原生組件庫修改樣式來表達到自己的想法。但對前端來說最好什么都別改,就用原生組件庫前端工程師直接復制就行,這也是因為我們設計師的要求和前端的要求是不一樣的。但修改后樣式的組件,底層邏輯還是原來的組件。從Antdesign等組件庫里復制出來,經過figma里的各種功能操作后,比如分離組件、改變組件得形狀、替換內容等,但這個組件仍然是Antdesign里的組件,組件是否改變取決于,這個圖形,這個組件是不是已經代碼化,我們設計師設計的組件,只是樣式,需要經過前端來形成代碼,只有代碼化的組件,才是組件,如果沒有代碼化,那只是一個樣式而已。所以,我們用Antdesign里是已經實現代碼化了得組件,組件庫里有的組件前端一定是可以代碼實現的。


          1.3 如何設計組件庫


          1.3.1 每個項目都會分這四個周期


          項目初期:在一個B端項目得初期,大家都會有疑問,B端組件庫應該什么時候開始建立?是不是先建組件庫再開始設計?答案是,如果不是從0開始的項目,組件庫在設計之初就應該建立起來,如果項目是從0開始,由于沒有業務的案例,組件庫組件庫也無法建立,但可以建立一些最小元素:原子。比如字體(應該用什么樣的字體,在正標題,副標題,大標題,正常情況下應該怎么樣使用字體的得明度)、色彩(色彩規范是什么,比如醫療行業,航空行業,交通行業應該用什么色彩,決定主色不是好不好看,而是由企業來決定得,首先了解企業的VI色,通過結合VI色和產品分析出的用戶畫像特征,來確定主色,輔主色,確定主色后,相應的背景色、深色背景、淺色背景、灰度背景、卡片背景等,也就都可以做出來了)、按鈕(通常狀態,點擊狀態,當前焦點狀態,不可點狀態)、基本控件、布局柵格、圖表(圖標icon、文本標簽、按鈕、圖表)、圖標;通過建立原子組件,完成一些基本典型的頁面設計。

          項目中期:繼續完善基本組件庫,應用案例的完善,迭代組件庫、樣例庫、最佳實踐案例。然后再次迭代進入基本組件庫。


          項目后期:形成最終組件庫與設計系統的規范建立,根據項目不一樣詳細程度也可以不一樣。


          延展期:為項目2.0升級準備根據使用反饋、迭代之前得組件庫與規范,預計未來版本中出現的典型案例,并針對性的設計應用組件。通常很少有公司進行到這一步。


          1.3.2 組件庫的開發流程


          1.3.3 B端組件庫存在的價值


          B端組件庫的存在是不是意味著不需要設計師了?其實并不是,組件庫可以幫助設計師增進設計效率和溝通效率,和前端溝通告知按照對應的選型組件庫規范使用就可以了,同時組件庫得一致性、準確性、協同性它的質量有保證。但設計師做完組件庫后,繼續需要關注的點是:

          01、根據業務場景來優化設計組件庫:因為組件庫是一定會去更新的,如有必要再去更新,那一定會是很復雜得業務場景下去做更新的,這個業務場景是程序員或者以前的組件不能實現的,需要很強的設計技能去做迭代,所以需要設計師繼續去做一些結合業務場景的組件來放到組件庫里。

          02、需要設計師把更多時間精力投入更多設計體驗中,而非搬磚:組件庫的建立同時解放了設計師的精力,設計師可以把時間投入到設計體驗中去,而不是做一些搬磚得工作,比如按鈕怎么畫,用圓角還是用什么顏色,這些沒有技術含量的工作,這樣一來,可以投入更多時間來賦能業務更好體驗設計工作。


          1.3.4 B端主流組件庫有哪些

          2.1 B端產品的設計過程


          2.1.1 用戶體驗五要素


          戰略層(屬于產品愿景,滿足用戶的需求,產品的愿景和目標


          由于用戶有不同的需求進而產生了不同的產品,戰略層決定了用戶用干什么樣的產品,比如,用戶需有很多銷售客戶的線索需要進行管理,用戶需要管理客戶,那就做一個CRM系統。比如,用戶想寫日報,想要一個打卡的OA系統,那么產品目標就是要做一個OA系統。比如,電商里面很多商品,牽扯到很多進銷存,那就做一個ERP系統。這部分跟設計師相關度沒有那么高。


          范圍層(指功能規劃,功能的規格、包括內容的需求)

          功能規劃:比如要做一個OA系統,其中就包含了打卡、日報、項目管理、報銷、人事流轉等等都是跟辦公相關聯的,需要把規格和功能畫出來,畫成簡單的表格并且將它們分類,這里所有的功能都不是詳細的,就是簡單的分類,將功能簡單描述一下,同時做一個簡單的用戶畫像。這部分設計師只需要閱讀產品經理給到得PRD需求文檔即可,整體看還是偏愿景,沒有形成具體的產出。比如OA系統中就總結出重點做一個審批得功能,并不知道什么樣的界面,只知道一個大概的范圍。


          結構層(指原型設計)

          這部分,設計師通常就需要參與進來,如果設計師只按產品給的設計好的原型來設計,就顯得很被動,這樣只能叫做視覺美化,被稱之為美工,設計師應該從沒有形成原型的時候,可能只是一個簡單的PRD需求文檔或者草圖,設計師就應該參與進去。


          設計師對原型進行優化設計,優化的不是業務,因為很多業務內容肯定沒有產品經理了解得深刻入,這時,設計師需要優化的其實是它的交互邏輯、交互內容,一旦原型里里產生點擊,一旦產生多種狀態,那就要去了解它,每種狀態產生不一樣的界面結果,其實對標的就是設計師設計的界面將產生什么樣的變化,換句話說,如果有界面的變化,內容得變化,設計師就需要參與到其中。目前來看,很少公司有專門的交互設計師,要么這部分工作由UI設計師來完成,要么由產品經理來完成,很多企業已經把設計進行前置化,由UI設計師來完成交互的工作。


          其中交互設計+信息架構設計是設計原型圖的關鍵,這兩個是密不可分的,如何制作原型圖,如何在原型圖里設置一些交互事件,給大家推薦《信息架構設計》這本書里有專門講到。再了解原型設計之前,不得不提到一個通用知識點,交互設計的七大定律。(后文有介紹)


          框架層(指界面設計、組件設計)

          框架層這部分有一些爭議,有的設計師認為就直接做界面設計了,其實框架層還不能把它理解成是界面設計,它僅僅是做了一些業務的模塊兒的框架而已,更多的其實是將它組件化: 將原型組件化、模塊兒化,類似我們直接從Antdesign組件庫復制來內容簡單改改之類得操作,完成的是組件和界面的設計,這些界面并不是最終完整的交付樣式。


          表現層(可視化呈現,UI視覺呈現)

          這部分和設計師關聯度最大的一部分,就是界面中的配色、配色、圖標、樣式、結構、布局、排版等設計,但是我們設計師需要從范圍層了解業務熟悉最初PRD產品需求文檔去一點點做起,其中設計師在戰略層參與度可能只有2%左右,范圍層參與度5%左右,從結構層開始逐步往上參與度越來越高,至少結構層,框架層和表現層的參與度是很深得。



          2.1.2 B端產品的設計過程是什么

          所以,通過梳理用戶體驗五要素,不難看出B端UI設計師的工作流程就是,01. 接到項目后,設計師主要閱讀產品經理給到的PRD需求文檔,同時去參與原型設計,根據最初版PRD輸出一份低保真原型圖,和其他部門進行初次評審;02. 經過初次評審討論過后,完善后的功能和頁面文案,產品經理補全和輸出完善后的產品PRD需求文檔,由設計師根據完善后得PRD需求文檔經過規范設計輸出高保真原型圖 ,與其他部門帶著初次評審討論后的問題,進行二次評審。03. 最終再由設計師經過組件化形成視覺圖。04. 同時設計師提供切圖,與前端緊密溝通,上線前制作設計走查表,進行設計走查。05、最后上線后根據數據、用戶反饋等提出交互和視覺可優化得方案建議,進行版本迭代。


          2.2 交互設計七大定律


          01. 菲茨定律:當設計師需要讓用戶重點去看到頁面中某一個突出點,點擊到一個區域時,設計師就需要做到適合的大小,適合的區域,適合的位置,適合的形狀,適合的顏色。也就是你想讓用戶點擊的時候就突出重點想顯示的,不想讓用戶點擊退出的,就把它設計的的足夠小。比如按鈕得退出和付款,實心付款按鈕為主要按鈕,虛線置灰退出按鈕為次要按鈕,比如常說的海報中字要大,logo要大,這些都屬于菲茨定律。


          02. 席克定律:用戶面對的刺激(或選擇)越多,他們做出決定的時間就越長,由于用戶的時間很寶貴 ,用戶沒有義務花更多留在我們的網站上,所以我們需要有選擇的地方對選擇進行分類。


          03. 7土2法則(米勒定律):比如圓周率3.1415926,一般都能記住,而如果再往后加幾個數字,大家往往很難記住,原因就是經過大量測試,人腦容易記憶7位數字前后得數字,比如設計銀行輸入密碼的時候就用到了7土2 法則,設置密碼過多人腦不易記憶。


          04. 接近法則:格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。


          05. 防錯原則:當用戶在使用產品中,預判用戶本身或產品一定會出錯時候,可以告訴用戶怎么可以不犯錯,或者將風險降低。比如電腦的關閉電源鍵,就允許電腦司機時允許系統犯錯,讓用戶使用關閉電腦電源鍵進行重啟。比如銀行取出錢后,銀行卡有忘拔現象,銀行完全可以做到像光大銀行那樣去再取錢流程中改成先拔卡再出鈔得交互流程,就可以避免忘記拔卡,但其他銀行都沒有這么改進,仍然是先出鈔后拔卡得原因是允許用戶犯錯。


          06. 奧卡姆剃刀原理:化繁為簡,如無必要,勿增實體。比如小米電視遙控器的設計,由原來傳統的很多遙控器按鍵只優化成了保留上下左右為數不多的幾個重要按鍵,原來的遙控器數字按鈕如果真正要輸入數字的時候通過功能性,調出數字來,這樣在遙控器得設計中基本只保留20%主要功能按鍵。這就是交互上的優化。比如在UI界面中,也會用到這個問題,簡化文字,把文字用圖標替換,還有各種流程得優化等等。


          07. 雅克布定律:以用戶習慣的使用模式去設計產品,降低用戶學習成本,遵從用戶使用習慣。 利用現有的思維模型,用戶習慣,我們可以創建出色的用戶體驗,使用戶可以專注于自己的任務而不是學習新的模型習慣。



          2.3 B端產品用戶畫像


          2.3.1用戶畫像概念

          用戶畫像又稱用戶角色,作為一種勾畫目標用戶、聯系用戶訴求與設計方向的有效工具,用戶畫像在各領域得到了廣泛應用。用戶畫像分為兩種,不論C端和B端都會做這樣的用戶畫像。總共可分為兩部分,基本信息數據和行為數據。


          基本信息數據:當我們去了解用戶的基本信息的一些數據時,職業,收入,年齡等等,這些和功能有很多的關聯度,比如唯品會用戶畫像關鍵詞是:女性、折扣、白領 ,唯品會產品定位聚焦女性,這些基礎信息數據,就能給產品帶來很好的結果,當我們要做一個女性的購物平臺的時候,可以先把男性用戶拋除掉去考慮設計方向,再比如收入就知道了,大概產品面向的收入群體將是什么收入群體的人,那么我賣貨的價格區間、包括設計的風格就是一個什么樣群體的設計風格。那些賣奢侈品的不是黑色就是灰色,要不就是棕色,但未必是適合唯品會產品的風格,需要找出這些基本信息去和產品進行關聯度,把基本信息放到設計結果中去考慮。


          行為數據:指用戶的愛好,這部分群體有哪些愛好,是喜歡購物,還是喜歡運動,他/她的消費情況是什么,喜歡旅游還是美食,他/她經常用哪些APP,他常用的設備,是蘋果手機呢還是安卓,小米還是華為,等等得到這些數據,也能得到一些用戶喜歡什么樣的競品,這些數據就能側面的在我們的產品中得到反饋,得到功能和設計上的指導和其他產品的區別。這些行為數據,不管我們做C端還是B端,都要獲取到,但C端和B端獲取到這些行為數據的結論是不一樣的。因為C端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個人,給他帶來的很多屬性,這些等等都會成為他的用戶畫像。

          進而找到這個人,將他的社會屬性,從抽象的角度慢慢變得具象,C端是他/她的社會屬性,把他做成一個普通的人,這個人有他的社會屬性,有他的社會價值,有他的社會行為。比如一個女性,一定喜歡美食,一定會買化妝品。


          2.3.2 B端用戶畫像本質

          比如做一個和電影相關的管理系統,電影行業包括很多人員管理,設備管理等,這里不能把用戶畫像抽象成一個男性或者女性了,而應該把它抽象成一個職業,比如抽象成一個導演,導演需要去管理什么東西,它需要哪些資源去整合。導演就又叫做行業屬性坐標。B端不以社會屬性去做用戶畫像,一定以行業坐標去做用戶畫像,我們在整理作品集的時候需注意不要與C端畫像整理混淆。


          我們要做一個行業可以不用管他/她是誰,也可以不用管他/她有什么樣的社會屬性,比如做CRM最重要的在里面起到作用的是,客戶關系管理和銷售等; 比如做OA系統,就是一般的員工,等級,職能等等,可以看出行業屬性(職業屬性)決定了他的用戶畫像的精準度,一定把這個人拉到行業里去研究,研究社會屬性沒有價值。這是C端和B端做用戶研究最大的區別。


          2.4 B端產品用戶調研


          2.4.1用戶調研的作用/目的/重要性


          01. 了解產品業務需求定位:可以幫助了解目標用戶的信息,從用戶的角度:未來使用你產品的用戶,他理不理解你的產品想要表達什么,你的產品講了哪些功能。因為很多好的產品我們打開它第一眼就知道要干什么,是給我們做什么的。同時站在設計者的角度:怎么可以把這個產品設計清楚,比如做一個CRM客戶關系管理系統,具體管理什么我們是不清晰的,想要清晰就需要通過用戶調研這個過程給它展開。


          02.解決功能信息架構問題:可以幫助設計師更明確需求功能得合理性和優先級,比如頁面標題的使用、標題的層級、需要在信息層級清晰得情況下體現出來,而明確信息層級同樣需要通過用戶研究體現出來。


          03.讓可用性測試更加準確:可以幫助鎖定合適的測試用戶,來測試我們的產品使用程度,使用體驗是不是好,這時需要要找目標用戶去測試,比如小米有品針對群體是米粉,唯品會針對的群體是職場女性,而不像C端找所有的人去測試。


          04.解決團隊協作溝通問題:確定用研目標可以有理有據的把設計目標和產品經理的意見達成共識,因為未來一定會多次和產品進行PK,像諸如設計師組件化沒用好這些理由也不會是pk點,確定用研護鏢可以更好的深度去理解原型圖,可以把團隊協作溝通的問題解決好。


          2.4.2 用戶調研的方法


          01. 確定研究對象:首先拿到一個產品,拿到一個需求的時候,這個需求通常很模糊,比如只告訴做一款CRM客戶關系管理系統,但汽車行業,服裝電商行業,保險行業,銀行金融等等,都有CRM客戶管理系統,不同行業的CRM肯定是不一樣的,這時候,比如要做金融的CRM,那研究方向就已經確定了,金融CRM就可以確定去研究金融行業的業務鏈,業務流程,具體找哪些用戶群體,可以根據以往的驚經驗和產品的目標去確認。


          02. 找研究方法 : 研究方法分主動和被動,我們通常用的方法是被動方法,比如自我報告法:當這個產品產生了一些數據,我們從后臺可以拉取這些數據的時候,通過這些數據去分析,這是被動的方法,這個被動的方法所有項目都可以用。而主動的方法,就是觀察和采訪,主動去找用戶去找關聯度。


          03. 獲取到數據 : B端和C端區別之一是提高效率,它要產生的結果只有一個結果,就是減少成本,任何B端的系統都是為了實現這個目標,提高效率和減少成本。所以獲取數據,研究數據的方向不能偏離搞錯,用戶研究的方向不要搞錯。比如我們以用戶為中心來設計,就會認為用戶的操作體驗感是第一位的,其實不對,放在第一位去考慮的應該是以系統的最優化,提升效率為第一位,而用戶也可以為這件事情做一些改變而找到平衡點,數據導向得提高效率,減少成本有時會大于用戶的操作體驗。


          04. 用研行為: 剛才前面提到的這些注意事項,到底應該找什么方法去得到這些數據呢?第一我們可以通過后臺數據比如通過百度統計等系統來獲得;第二通過問卷法發出一些問卷,用戶可能散落在全國不同位置;第三可以通過用戶定性訪談來獲得;第四可以通過用戶旅程圖來決定用研行為。


          05. 分析調研結果: 研究結果不是為了放到我們的B端作品集里的,而研究結果一定是為了去定性、定量、讓數據回歸到產品功能本身。同時經常問自己這些問題,去根據研究結果和問題進行匹配思考,比如研究了那么多,用到了用戶畫像得出的結論了么,用到了哪里?在項目中能舉個例子嗎?采用什么樣的視覺去實現了用戶體驗要素?


          2.4.3 B端用戶訪談模板


          2.4.3.1 用戶訪談概念:


          01.確定訪談目標:了解目標用戶群體,通過訪談信息來進一步構建所需要的用戶畫像,從而確定設計方案與功能優先級。02. 定性/定量訪談目標:將這些目標定量、定性,選擇不同的訪問對象,構建不同的角色畫像。比如問銷售的用戶畫像,要找不同的訪問對象,銷售總監,普通實習生等等,三到四個角色,樣本越多,用戶畫像越準確。03. 訪談過程:提前把問題寫出來,拿著問題去聊,用錄音設備,記錄表格,一個提問,一個記錄,分開后記錄比較準確。04.訪談結束:要做信息匯總,要做分析建模。分析建模就是將信息最終變得有意義。


          B端用戶訪談模板有30個問題,這30個問題決定了我們的用戶畫像的精準度和產品的用戶畫像的價值。用戶訪談會問些什么問題呢?當我們調研的時候把問題寫出來的時候,就已經解決了一半的問題了。


          2.4.3.2 B端用戶訪談30問


          01、基礎特征


          崗位:你是從事什么崗位的?是總監還是普通職員?目的是為了知道不同的權限的使用者,進而就可以在系統中設置這些權限。

          職責:需要獲取到用戶不同的需求,因為每一個崗位有不同的職責,他們的需求點也是不一樣的。根據這些不同的需求,我們在界面中得動態儀表盤部分,就可以根據不同職責來顯示不同的內容。

          姓名:可以讓訪談記錄得到更加真實的體現,目的是可以獲得產品的一些真實的基礎字段。

          年齡:是用戶認知和經驗度的體現,用戶的年齡可以代表他們對行業的認知,和整個企業流程的認知程度,一般性理解,用戶的年齡越大,那么他的經驗越豐富。

          教育:指用戶是什么學歷,目的是為了了解用戶的經歷與熟練程度,通常認為,用戶的教育越高的人,他們往往使用軟件操作的熟練度會越好。

          位置:指用戶在什么地方來使用,目的是知道了場景與優先級,用戶是在寫字樓里還是精英場所來使用我們的產品。因此得出基礎特征是要得出這些結論,得出這些結論進而反饋到產品中去。


          02、行為接觸點


          使用頻次:不同的崗位用戶使用功能的優先級是不一樣的,用戶使用頻次越高的功能,這個功能的優先級就越高。了解之后,那在下次迭代的時候就需要把重要級別的功能放在易操作的區域去體現。比如這個重要功能就是一個icon,那么把它放一個快捷入口。

          使用時長:也能代表功能的優先級,用戶使用時間最長的功能,代表可這個功能優先級很高。

          時間段:用戶在什么時間段使用的是最多的,我們就知道了這個功能的活躍度,這個數據指標,主要和技術有關,我們可以從后臺數據去獲得。

          使用設備:用戶使用設備兼容的優先級,平時用戶用什么設備,再訪談過程中,需要問具體使用電腦的分辨率,屏幕的尺寸,屏幕的比例,都可以去實際的調研一下。在我們做B端界面選擇屏幕尺寸的時候,可以采用結合實際情況用戶使用的屏幕分辨率尺寸來設計界面。

          相關軟件:用戶平時的操作習慣和流程是什么,還會使用其他軟件嗎?比如他們還用什么其他的競品,可以繼續問用戶其他的競品哪里比較好,哪里是亮點,那最終得到的目標就是用戶的操作習慣和流程,這些也可都可以反饋在我們產品中。


          03. 使用環境


          碎片化時間:主要解決用戶場景的問題,比如汽車4S店銷售,當你去買車時,銷售人員會問,你會買什么樣的車,會記錄你的年齡,用車習慣,用車時間,姓名,預算,都會記錄,銷售通常會用一些碎片化的時間去記錄。此時就可以得出兩個結論:1.我們在設計的時候是否可以考慮讓銷售充分利用碎片化來進行這些信息的錄入,而且方便他的錄入,比如他本來只有電腦端,電腦端是一個完整版的功能,我們能不能給他設計出一個移動端來,讓銷售不用回到電腦屏幕中就可以去記錄這些內容。2. 記錄時也有兩種記錄方式,是客戶講話的時候銷售去記錄還是這些事情做完之后銷售再去記錄。通過這樣的行為會得到這樣不同的設計結果,比如有人問你們公司為什么要做B端的移動端設計?以上就可以有理有據去解決銷售的場景問題。


          用戶的操作環境是什么:主要解決視覺體驗問題,用戶是白天操作還是晚上操作,是在強光環境操作還是弱光環境操作。這些都應該是考的點。比如B端使用的ATM機,應該設計成白色還是深色模式,我們知道一般都是深色模式,是因為通常是室內,它和光線有關系,如果是室外的取款機,四周又沒有遮擋,如果還設計成深色,肯定是看不清楚的。比如HMI車載系統,白天模式開了深色,一定會看不清楚。所以要提前判斷使用深色模式還是淺色模式,也需要考慮在設計的時候使用什么樣的色彩和色調,在室外使用還是室內使用,如果對色彩不怎么挑,那也可以使用VI色,這樣一來視覺的保障色就確定了。還可以確定在使用周期時間,要多長時間完成一個操作,應該使用什么樣的方法可以盡快完成一個操作。通過用戶的操作環境可以得到以上信息。


          是否有平行事件:用戶在做這件事情的同時,他是不是需要做其他的事情,要得出至少兩種平行事件,得到的結論是,我們的界面是不是需要把某些功能整合在一起,因為用戶經常是需要同時做這兩種事情,同時去打開這兩個功能,通過這樣的反饋可以把同時使用的這兩個功能結合到一起,通過訪談可以得到這樣的依據,來進行功能的整合。


          04. 主動詢問用戶觀點


          用戶的驅動力: 去了解激勵因素,就知道了什么功能應該做完善,什么功能并沒有那么重要。比如汽車銷售為什么要錄入信息,因為可以增加汽車的銷量,錄入越準確的用戶信息,他的銷售量越高。也就是用戶做這件事情,他的原因是什么。


          用戶遇到最難事件: 在工作中或者用戶使用過程中遇見了什么樣難的事情,這件難的事情,就是產品的痛點,就明白了當前產品迫切需要什么樣的功能去幫我們設計師來解決當前產品痛點的問題。


          用戶遇到最颯事件:他在使用過程中最滿意的是什么事情,就是爽點是什么事情,那些產品中解決了用戶很好的問題的部分,去把產品更好的放大,讓用戶繼續使用。也就是通過訪談我們知道了產品的爽點是什么。


          用戶擔心事件:在他們使用過程中擔心的是什么,我們也要要了解這些隱藏的問題.


          用戶期望事件: 用戶希望得到什么樣的改善,最終的目標是想解決什么樣的問題,到這一步其實所有問題目前都沒有答案,我們可以繼續訪問,先做記錄,不做最終的答案.


          問用戶目前狀態: 我們可以了解待解決的問題,通過產品想解決什么問題,進行收集需求;用戶對于產品升級有什么小期待,進行收集需求;通過用戶的反饋目前產品的哪些問題,收集到目前反饋的問題;以往問題是否有效解決;進行收集反饋。覺得不錯的同類型產品有哪些,通過了解競品情報,我們可以競量多問一些 覺得不錯的競品有哪些;目前產品有哪些地方很好,很好的地方要保持,有的產品升級后,以前特別好的功能突然消失了,改了沒必要,好的功能保持就可以;前產品有哪些地方不好,我們去優化不好的地方;以往問題是否有效解決,當有問題需要解決的時候,用戶的問題是否是通暢的。通過看用戶如何反饋,我們可以了解功能傾向,了解整個流程是否通暢


          05. 聊生活

          發覺人性閃光點,提升產品差異競爭力,1、問目前的生活狀態,婚姻狀態,有沒有孩子,接送孩子的時間,平時有什么愛好?什么愛好不錯?發覺人人性的閃光點,好的不好的產品都有共性,B端產品中視覺的傾向是什么?比如有插畫,溫馨的語言提示,通過什么樣的情感設計可以照顧到每個人的生活。


          2.4.4 B端用戶訪談得出結論


          如何判斷功能在用戶那里好還是不好?前面所有的都只是在記錄,現在才是在做判斷,判斷的第一件事,是做定量的整理,所有的問題都收集到了,也記錄到了,至少需要有兩個樣本,去做定量整理。

          2.4.4.1定量整理:行為


          第一步是行為的總結,量級的總結,把記錄的問題點、功能點和關鍵詞放到表格里面,經常出現,迫切需要解決的是什么問題,較少的問題是什么,偶爾的行為問題是什么,因此偶爾的優先級就不高了,主要關注經常遇到的問題點、功能點和關鍵詞。


          2.4.4.2 定量整理:特征


          把每個角色按照以下表格里的的特征進行定量的描述,這時候仍然不能找出它的共性點,但已經把用戶的特征進行分類整理了,定量之后再去定性。


          2.4.4.3 定量整理:特征/角色/流程


          這個角色名稱是一個具體的名字,比如王某某。以下這張表:可以看到在我們的系統中有哪些的權限,有哪些的角色,他們的需求是怎么樣的,這是一個完整的用戶畫像。用戶畫像是一個結果,是通過用戶訪談的形式完成了用戶畫像,并不是被動的接受數據信息得出的,所以通過用戶訪談的形式進行定量定性分析得到的結果是最準確的。


          3.1 建立情緒版


          3.1.1 情緒版的概念及作用

          本質是將情緒視覺化,情緒版并不是玄學的東西,它確實可以通過圖片找到對應的圖形元素,因為圖形(照片)是可以表達情緒的,比如看到一張照片會感受什么什么情緒:熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關的關鍵詞。


          情緒版是一個特別快速能和產品,我們的團隊包括設計團隊進行溝通的一種方式,比如要設計一個界面,需要幾天才能設計出來,但我想提前知道一下未來界面設計成什么樣子,那就先做一個情緒版,讓大家知道,找的方向是什么,這樣適合與大家及時的溝通,大家也會明白產品將會做成什么樣子,達成產品的最終設計定調。


          3.1.2 怎么建立情緒版


          01. 提煉關鍵詞:獲取本次產品設計中所要實現的產品3-5個必要的關鍵字詞組,其中包括交互或視覺目標,通常由一些比較抽象的形容詞組成。比如:在做的產品是醫療行業,那么醫療相關關鍵字詞組是:生命/健康/安全等。


          02.關鍵詞發散:通過獲取到的關鍵詞的基礎上,發散出來一些新的詞語,這種發散詞匯,不是簡單頭腦風暴產生的,而是要有目的性的進行提取,要更加的具體。比如剛才舉例醫療行業,生命可以繼續發散出血液、器官等衍生關鍵詞。


          03. 搜索圖形: 對之前總結出的幾個關鍵詞在圖庫中進行查找,也可以在直接在behance里找別人收藏好的情緒版圖片直接用,效率可能更高一點。


          04. 制作情緒版: 搜索大量圖片后,挑出我們需要的進行整理,采用一種拼貼方式進行設計排版,拼貼出來需要得到需要得到的色彩,構圖,質感和字體。


          05. 得出結論: 在圖形、色彩、字體、質感、構圖,以上五點,得到合適的設計方案,快速與團隊進行溝通,直觀表達產品清徐,達成產品的設計定調。產品調性(企業調性)其實就是用企業的方式把故事講述出來,是一種通過情緒版方法來講故事的方式。


          3.2 品牌三元法


          3.2.1 品牌三元法為什么逐漸替代情緒版


          品牌三元法是通過品牌三板斧模型得出的一個確定設計主風格的一種新得方法,品牌三板斧模型可以總概為用戶調研關鍵的三個維度,一目標用戶是誰?二產品服務是什么?三對于目標用戶來說,你的產品服務有什么核心價值。當在回答完這三個問題以后,我們其實就已經清楚我們的品牌定位是什么了,因為它的核心優勢是比較明顯的,這樣我們就知道我們將來會面對什么樣的人群,去怎樣去宣傳它的賣點,同時做出產品的差異化。


          通過這幾年得工作案例設計實踐,在確定設計主風格時,情緒版方法逐漸有被品牌三元法替代得趨勢,因為情緒版這種把抽象的詞不太好表現的詞,翻譯成圖片的方式,比如剛才提到醫療行業的關鍵詞是生命,健康,安全的,設計師找到很多這種相關的圖片,挑出來后從這些圖片里面找到一個共同的規律,最后去設計。這里面就有兩個問題,一個原因是關鍵詞非常的平,生面,安全,健康,很難更準確的表達衍生關鍵詞。另外一個問題是它非常局限設計師的創意,因為它是從一些現有的圖片里面然后去挑,所以很多設計師就反饋現有的方法不是很好用,比如當我們想到安全這個詞,可能所有人想到都是特別綠的感覺,或者干凈這個詞,就會統一聯想到白色這個畫面,大家從一開始想法就差不多,所以它很難體現出創意。所以由于情緒版嚴重限制了自己的想象力,沒辦法把產品核心的氣質表現出來,雖然情緒版正確但是是一個平庸的結果,大家沒辦法記住的結果。


          3.2.2 如何應用品牌三元法


          01. 理性層面(業務層面),傳遞產品理念:獲取本次產品設計中體現業務層面,可以傳達產品理念得5-10個關鍵詞,對應的放在左邊。


          02. 感性層面(人文層面),營造產品氛圍:主要體現這個產品給用戶帶來什么好處,宣傳的角度是什么。獲取本次產品設計中體現人文層面,可以傳達產品氛圍的5-10個關鍵詞,對應的放在右邊。


          03. 個性層面(氣質靈魂),創造獨特風格:結合理性的業務層面和感性的人文層面,來創作出什么樣的畫面,和獨特風格的感覺。同樣總結出5個左右的關鍵詞,放在下邊。


          04. 結合以上三個維度,提煉主視覺畫面:當出現這三部分詞的時候,經過思考或者大家一起頭腦風暴,可能一開始想到的比較淺,但最終一定能想到一個最終關鍵詞或者特別符合我們這個產品氣質的畫面,因為以上三部分得出關鍵詞也都是經過品牌三板斧模型推演出有關聯的關鍵詞,想到一個符合產品氣質的畫面并不難,再得出這個主視覺畫面后,這就是最終產品調性的主視覺,既符合產品定位,又具有獨特的差異性。


          05. 傳達產品,用視覺語言講故事:接下來,當這個主題、主視覺確定了以后,在看怎么樣用具體的視覺設計技能,去傳達我們的產品,也就是用視覺語言來講故事,具體注意三個方面,一是表像,元素要符合這個視覺主題,二是關聯,元素之間要具有關聯。三是隱喻,用視覺的手段含蓄的表達產品的一些特性。比如云計算的一些產品,做得比較復雜每一個圖標上都有一些曲線切割的畫面,這樣做的原因其實不是為了炫技,它是為了表達云計算彈性可擴展的特性,好比拍電影,中國人講究隱晦。


          4.1 色彩規范


          4.1.1 選色

          在系統色彩中,以Antdedign為例,系統色彩里包含了很多不同的色調,但不可能用到這么多顏色,這時要應用選擇幾個顏色,選幾個我們應用的顏色。第一步要做的就是選色,選出應用色彩,這個應用色彩也就是我們建立得視覺規范中的基礎色板,在選色時候需注意,要有有明確的心理預期,比如醫療行業中常用藍色和綠色,就是符合預期的顏色。在基礎色板里選擇調色,應選擇兩個相同級別的藍色和綠色;基礎色板里選不同顏色時不要超過三個級別的跳躍;當選擇一個確定的顏色時,可以選擇草綠或者青綠色來作為輔助色;在基礎色板里,最頂部的顏色最適合做背景色,中間的顏色適合做按鈕色,底部的顏色適合做狀態色,或者小面積文字的填充色,其余就是搭配過度的作用。再比如零售、比如金融行業的產品,會選擇不同的顏色,那這些顏色代表了什么,是不是會和企業的VI色是有相符之處,這些都是我們去要考慮的。


          4.1.2 注意色彩的兩個特性


          01. 注意品牌性:體現特性和傳播理念、價值觀:比如宜家,我們立刻會想到的是黃色和藍色。比如京東,我們會想到紅色。如果是餓了么,我們會想到藍色。這些都是標識性的色彩,體現和傳遞的就是品牌理念和價值觀。這些顏色一定不是隨便選的,比如,宜家的黃色和藍色,其實是瑞典的國旗的顏色,代表著宜家的來源地來源于瑞典,因為瑞典是一個很強調簡約設計的國家,貫穿始終是在強調它的的價值觀。一些關鍵行動點:比如選中的狀態,按鈕的顏色,在很重要的地方用主色表達,這就是在體現B端的產品的色彩價值觀和企業價值觀的地方


          02. 注意色彩的功能性:色彩需要體現功能有明確的信息以及狀態含義,色彩代表它獨特的含義,比如成功色,通常會選擇綠色,再系統色板里,青綠草綠都可以選。比如出錯/刪除/失敗用紅色,表示警告警示。比如鏈接要用藍色。


          4.2 圖標規范

          畫圖標要注意圖標的識別性、統一性和獨特性。圖標首先要一眼看出來表達的含義,其次是圖標設計圖標的大小,線寬粗細,圓角大小,圖標風格等這些都需要統一,最后最好可以體現出圖標的獨特性,獨特性就是差異化,這也是品牌三遠法得核心,塑造產品的差異化,具體分析方法也可應用在圖表設計當中,比如根據品牌基因進行延展,也可根據主風格主視覺設計定調,設計出獨特風格且符合產品定位得圖標應用在產品當中。


          4.3 文字規范


          4.3.1 字體家族

          在B端頁面中字體的顯示順序,有固定的一套代碼模式,可以理解為,比如有的用戶電腦沒有平方字體,所以會顯示出冬青黑體,來替代平方字體的設計稿,如果沒有冬青黑體,就用微軟雅黑替代顯示,字體家族中,從左到右代表了字體顯示的有限順序,平方、冬青黑體、微軟雅黑、黑體、宋體,中英文都是。


          4.3.2 主字體

          在系統中有中文常用PingFangSC、微軟雅黑、思源黑體;英文常用San FranciscoUI(SF字體)、Helvetica Neue、Arial


          4.3.3 大小與行高


          方法一:在Antdesign中規定的,比如字體大小是14px,行高就是22px。規范里最小字體是14px,但可能有注釋字體,字號最小是12px。表格里的內容是按照表格里的行高來約定的,與字體行高無關,這個前提是,不在表格里內。當沒有出現文本字體,表格里的字體的時候就需要去設置字體的行高,Figma里默認行高是140%,比如14px字體,行高就設置成22。這是Antdesign里的規范,但不是唯一的規范。需要注意的是,如果使用一個標準就全部使用一個標準,這個需要把選中文字段落進行調整行高。


          方法二:是當按倍率去算的行高規范,方法步驟是先調整好行高,去改變字體大小,比如無行高時,1/100%/1倍行高,注意加上%號;緊湊行高,1.3行高/130%;常規行高1.5行高/150%;寬松行高,1.7行高/170%。


          4.3.4 文字的層級關系

          輔助文字12px、正文(?。?3px、正文(常規)14px、小標題(16px,小標題是相對于14號字出現的)、標題18px、主標題20px


          4.3.5 字重

          比如常用的蘋方有6個字重,但在平時的設計中根本用不上。中文環境6個字重在實際顯示并沒那么好,常用兩個字體,萍方常規體400(常規),蘋方中黑體500(粗體)。而英文可以用粗體600。


          4.3.6 字體顏色

          在深色背景下、和淺色背景下不同內容的色彩透明度不同,具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下,字體應該使用白色還是黑色,應該按著規范嚴格使用,難點在顏色相近的時候選擇白色還是黑色,也需按照規范執行。


          4.3.7 文字對齊關系


          文案類對齊:頁面的字段、段落較短標題、需正文左對齊


          表單類對齊:保證整齊適合閱讀,冒號對齊法找到中間的冒號,(左右對齊),如果全部使用左對齊或者右對齊會更亂。左邊一般最長字段六個字。前提是中文環境,不是國際化。冒號左右要留多少像素:8px的倍數相關值,4(窄點)、8(正常)、12、16(寬一點)都可以。


          數字類對齊:日期,居中對齊;年齡,居中對齊/左對齊;非固定的數字:價格,采用右對齊,因為右對齊很容易看到價格的多少,哪個超出的更多,就越貴的,更容易區分數字的多少。


          4.4 層級規范


          層級規范得核心是對信息的間隔和區分,信息的區分間隔要用偶數8的倍數。具體可分為同層級的區分,用色塊(比如氣泡)、邊框(欄目之間抖索狂等)、線段來進行區分。錯層區分,用彈窗(背景變暗)、邊框陰影(陰影的出現是擬物化的出現,當物體離它的光源越近,比如高度越高,它的陰影就越大越寬。離它的底部越近,陰影就越小,比如下拉框、搜索框、日歷控件、彈出窗口來區分)。


          這里需注意,關于投影,再前端角度考慮盡量不要用太多的特效濾鏡來設計,因為在B端網頁中,瀏覽器的兼容性不好,比如用ie瀏覽器就根本看不到這樣的效果,如果用谷歌瀏覽器能看到,用safri瀏覽器能看到,但在火狐下等又會看不到,想要都看到就需要兼容很多代碼,需要前端加很多代碼實現兼容性的效果,很增加前端的工作量,所以在B端很少用非標準型的濾鏡代碼使用,雖然可以實現,但一般不太用,一般就是變灰、變深、變透明度最簡單的方法實現。不同于移動端,因為IOS用的是原生的開發,所以不存在這個問題。


          從接觸B端設計兩年以來,第一次詳細梳理B端設計的系統知識點,從B端產品設計的工作流程,到B端設計前的準備工作,交互設計的七大定律,B端產品業務調研,用戶訪談研究方法,精準推導B端用戶畫像,到B端產品主風格的設計定調,進而深度理解B端主流組件庫的視覺規范,為B端產品設計做出了充分的指導作用,對比我之前零散的知識記憶,這次B端設計前的準備工作梳理,也更加深刻的由點及面的形成了系統的框架,也重新認識了B端產品的分析方法,區別于之前一直從事的C端設計工作,也真正對B端和C端在設計思維上有了本質的區分,同時也鍛煉了我的歸納能力和演繹思維和系統思維能力,期間參考資料有《B端設計研修》、《用戶體驗要素》、《信息架構設計》,謝謝閱讀,希望對大家也有幫助~thanks


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

          文章來源:站酷 作者:moring_c
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端設計|模態、非模態框

          ui設計分享達人

          最近在整理系統的組件規范,收集各個場景下的組件應用,在搜集應用控件時,彈窗的套用、混用、亂用情況挺多的。

          主要是模態框和非模態框的使用。


          模態框:一般會有一層黑色透明的蒙板,它打斷用戶所屬的主流程,不能進行下去,只能到完成模態框的操作,才能返回到主流程中去,這個操作很明確,不會被誤解;


          非模態框:一般沒有那一層蒙板,不會影響所屬的主流程,也不用擔心原有進度會停止,仍然可以持續操作。即打開非模態也能看見底層的主流程。


          概述

          模態or 非模態,統稱為彈窗。樣式上可以理解為類似卡片,能夠幫助用戶快速定位獲取關鍵信息和進行操作,它的內容是靈活的,一般情況下包含文字、圖標、按鈕。彈窗的設計是給用戶傳遞與當前場景需要的操作相關的內容。

          場景使用 
          會根據業務的需要、場景要求,衍生出其他類多種形態。大多情況下先對彈窗分類,再對應到場景中使用。而實際上產品設計會從實際業務出發,從使用方式考慮,倒推來使用什么樣的彈窗符合要求。 

          基本設計原則
          層次要分明,突出重點 
          遵循基本的界面設計原則,在多種場景下通過信息分層、字體的粗細、大小等方式展現出明顯的視覺層次,結合業務場景需要再按照閱讀順序慣例來布局,標題使用對象的名字。目的是幫助用戶聚焦每一個關鍵信息上。 


          悄無聲息的,你在不在乎它,它都會出現的 

          全局提示:一般由系統主動發起,不是用戶請求的,大體分為進度提醒、通知提醒、公告提醒 

          進度提醒

          這個是由系統發起的,表明用戶當前所在的操作的進程中的位置,抑或是卡在進度未操作,無響應狀態,通知用戶。 
          位置:1·在頁面的頂部浮層顯示一塊區域,2·統一放置消息分類里 


          通知提醒
          來自系統一些重要的信息推送給用戶,或者是來自其他用戶的提示信息,抑或是操作反饋。 
          位置:將其放在右上側,并自動關閉。 


          公告提醒 
          依然是由系統發起,提醒用戶需要關注的信息,一般包含系統迭代、系統錯誤、審核通過or不通過、系統維護提醒等以及其他活動信息。 
          位置:與進度提醒同一位置,一般情況下并會在3S自動消失。 
          強制打斷用戶當前流程的 

          部分功能需要用戶打斷去確認操作或是可能會造成比較危險的,不常用的,那么就需要改變用戶操作焦點,將用戶的注意力從原來流程中拎出來,那么這個時候需要一個方式隔離原有流程和需要當前操作的內容,模態框就是比較適用的。 

          疊加在系統窗口的彈出式窗口,彈框以對話的方式讓用戶參與進來,以對話的方式與用戶產生交互操作。 

          操作反饋提示類

          1·成功和失敗 

          對于某個模塊的層級過深的功能操作反饋,需要在提交之后的結果反饋中提供輔助導航返回到初始功能頁面。 


          2·確認型彈窗 

          在簡單的業務場景中,只需要用戶進行確認的“確認”或“取消”等案例。一般情況下應用在對內容的提交、修改,在內容詳情頁里的刪除操作,表格的批量刪除等 
          樣式:標題(以所屬對象作為標題)+文案(對對象的解釋說明)+操作按鈕。 


          3·操作型彈窗 

          在復雜的業務場景中,需要用戶進行數據輸入一系列操作。一般會有新建內容(新建內容很多的就需要用新頁面,彈窗有限空間滿足不了大容量的數據輸入)、查看詳情(內容多需要新頁面展示)、詳情編輯。 
          有部分場景下,新建內容和編輯內容是重合的。 
          一般樣式:標題+數據輸入組件+操作按鈕 

          復雜樣式:標題+數據輸入和數據展示組合控件+操作按鈕 


          4·組合型彈窗(堆疊彈窗) 

          特殊復雜業務中,單層模態框不能滿足實際業務的需要,考慮彈窗的容量大小以及主次用戶類別使用的情況下,會使用堆疊彈窗,在有限的條件下,能做的就是盡量將彈窗分層次。 


          彈窗出現不打斷用戶原有流程的 

          在實際操作的過程中,常見的錯誤提示、部分晦澀難懂或專業的術語、對功能組件的描述解釋、小模塊里的操作反饋、全文本展示,只會在用戶不明白用途的情況下,告知用戶,但不能妨礙用戶閱讀或是操作。 

          氣泡提示(解釋說明的)

          起輔助說明的,輔助用戶決策。 
          樣式:深色背景+文字描述;一般由鼠標滑入目標區域,展現氣泡提示框,鼠標滑出即消失。 


          氣泡對話框 

          一般簡單場景中,對單條信息或者模塊內的某一個內容執行操作確認。 
          樣式:背景+(+圖標)文案描述+操作按鈕;一般鼠標點擊,顯示氣泡,點擊其他區域即消失。 


          復雜的場景中,氣泡框也承載需要用戶去執行數據輸入的操作,將氣泡內的執行后的結果與原流程同步數據展示結果。 

          除此之外,氣泡框承載的內容和模態框操作類型有重合部分,不同的是,氣泡框的數據與主流程的數據需要有對應關系。 

          堆疊氣泡框

          特殊場景需要,單層氣泡框不能滿足需求,內容需要比較嚴謹的父子級關系,且并不是常用的,在考慮對后續的衍生,也會將不常用的功能隱藏,需要時再點擊彈出。 
          方法類似于堆疊模態框 

          特殊場景下
          在某些復雜業務的場景下,需要模態框和非模態框搭配組合使用,特別是操作彈窗和氣泡框之間。 
          一般情況下,是操作彈窗—>氣泡框,(氣泡框—>操作彈窗這個類型不常有,主要是不符合用戶的使用習慣) 


          總結 

          對于彈窗的使用,應用到各個類型的用戶場景下選擇合適恰當的方式去滿足需求,也許不盡人意,但也是在進步。不僅僅需要了解彈窗的類型,更需要了解業務場景,實際應用過程中需要兩者相互碰撞,打破、重組,尋找到合適的方式。 

          思考延伸

          上邊有說到堆疊模態框,在實際應用中,層級多達三層彈窗,使用的時候,重復點擊好幾次按鈕才能關閉彈窗,使用起來甚是麻煩,有沒有可以優化的方法呢?


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

          文章來源:站酷。 作者: 啊嗚
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          B端表格設計的基本交互形式

          ui設計分享達人


          藍藍推薦:這是一篇很實用的表格基本交互形式文章!
          譯文:
          如果沒有將數據可視化和具備編輯數據的功能,數據就毫無用處。未來行業的成功依賴于將數據收集與更好的用戶體驗結合起來,而數據表格的設計體驗則非常重要。

          固定表頭

          -

          固定表頭讓用戶隨時都知道自己所在列的名稱。


          水平滾動

          -
          當展示大型數據列表時,水平滾動是不可避免的??梢?nbsp;將具有標識性信息的數據展示在第一列中,并固定第一列方便用戶對其他數據進行對比。


          調整每一列的寬度

          -

          調整列寬可以讓用戶看到所有的內容。


          設計表格樣式

          -

          表格的樣式有:白色和其他顏色相間的斑馬線設計,單純用線分割,自由形式等。

          正確的設計行樣式可以幫助用戶瀏覽表格數據,對只包含少量數據的表格來說,減少視覺干擾非常重要,這時候就可以采用去掉分割線、斑馬行的自由展示模式。但對于有大量數據的表格來說,自由模式容易讓用戶迷失,這時候用線分割,讓用戶能區分開每一行就顯得尤為重要。而斑馬線的設計樣式適合包含多列數據的表格,需要水平移動的大量數據表格。 


          表格密度展示

          -

          為列表設計不同的密度,用戶可以根據需要自行切換,比較緊密的行距讓用戶無需滾動就可以瀏覽更多的數據。



          數據可視化

          -

          讓數據可視化,提供表格內容的概括性預覽,讓用戶無需細讀每一條數據就能得到想要的信息。



          分頁展示

          -

          分頁設計方便用戶跳轉到相應頁面,但是也常常被無限滾動加載的方式取代,無限滾動加載指的是隨著鼠標不停地往下滾動,頁面內容也會隨之加載,這種方式適用于發現類的網站,但是對于考慮優先級的產品來說就不太合適了。


          懸停展示

          -

          當用戶懸停時顯示更多功能可以減少視覺混亂。需要注意的是,它可能會導致可發現性問題,因為用戶需要與表交互才能看到更多的功能。


          直接編輯

          -

          直接編輯可以讓用戶在當前表格內修改數據和內容,而不用額外再跳轉其他頁面進行操作。


          可擴展功能

          -

          可以擴展的表格設計允許用戶在不丟失上下文的情況下瀏覽更多詳細信息。


          快速視圖

          -

          與可擴展功能非常相似,快速視圖使用戶能夠在保持上下文的同時查看附加信息。


          彈窗

          -

          彈窗設計同樣可以讓用戶停留在表格視圖中,讓用戶更專注在附加信息和操作上。


          多層彈窗

          -

          多層彈窗功能對于活躍用戶來說非常強大,可以同時完成多種操作,或用來比較不同項目的詳細信息。


          點擊詳情展示

          -

          單擊鏈接會將表格轉換為左側為列表項和右側為其他詳細信息的視圖。它使用戶能夠解析大型數據,以及查看單獨的項目詳情而不會丟失它們的位置。


          可排序的列

          -

          排序允許用戶按照字母順序或數字順序對列進行重新排列。


          基本篩選

          -

          提供基本的篩選功能來搜索表格里的相關數據。


          列篩選

          -

          這種設計模式允許用戶將過濾參數分配給特定的列。


          可搜索的列

          -

          這種設計模式允許用戶在每列中搜索特定值。


          添加列

          -

          這種設計模式允許用戶根據需求在數據表格中添加列。


          可編輯的列

          -

          可自定義的列功能使用戶能夠選擇他們想要查看的列并進行相應的排序。 這個功能還包括保存預設后再修改的能力。


          ...


          為什么表格設計很重要

          數據正在成為全球經濟的原材料。對數據的追求推動了行業的重塑。能源、媒體、制造、物流、醫療保健、零售、金融,甚至政府都在經歷數字化轉型。


          然而,如果沒有可視化數據并對其采取行動的能力,數據就毫無意義。未來十年幸存下來的公司不僅將擁有卓越的數據;他們也將擁有卓越的用戶體驗。


          良好的用戶界面設計基于用戶的目標和行為。用戶界面反過來也會影響行為,從而推動進一步的設計決策。用戶體驗以微妙和無意識的方式改變了人類的決策方式。所看到的、呈現的位置以及交互的方式,都會影響行動。重要的是我們要做出能夠帶來更美好世界的設計決策,一個符合這個時代的數據表格設計。


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

          文章來源:國外  彩虹BOOK翻譯
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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





          日歷

          鏈接

          個人資料

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

          存檔

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