<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端設計愁?掌握這三步,XYZ軸為你解憂

          ui設計分享達人

          寫在最前

          B端界面的元素眾多,視窗范圍大,布局設計多種多樣,為了簡化布局思維,我們通常給界面添加三個方向上的軸-X、Y、Z。X軸指水平方向上的軸線,Y軸指豎直方向上的軸線,以及Z軸指在三維空間中垂直于視窗平面的軸線。當設計B端界面時,讓元素沿著這三個軸進行布局,既能理清我們的設計思路,頁面的元素也能展示得更有邏輯。

          本文圍繞這三個軸,來看看在B端界面的三維空間里,都有哪些設計規律。



          一、X軸的布局與適應

          B端界面在PC視窗下展示,范圍更大,如常見的分辨率尺寸有1280x1024、1440x900、1920x1080等,且瀏覽器還支持動態拖拽改變視窗寬度。所以B端界面在X軸上應該更注重內容的延展和適配,合理利用橫向增長的空間。根據這一特點,在這一部分中,我們分業務場景來探討都有哪些典型布局,并針對每一種布局給出合適的適配方式。

          B端典型的業務場景,可大致分為表格、圖表、表單、卡片、文字詳情五大類頁面。這幾類界面在X軸上排列的方式為單欄型、雙欄型、多欄型。如果有側導航,則在頁面最左側增加側導航即可,內容區的布局不受影響。

          1.單欄型

          表格、圖表,這類需要較大展示空間的場景,一般一個頁面只有一欄,不再在橫向空間進行切割。當視窗橫向拉伸時,也為了預覽更多的內容,表格和圖表進行橫向拉伸,保持撐滿視窗的狀態。






          2.雙欄型

          表單、文字詳情類的頁面,采用雙欄結構的概率較大。因為表單頁除了表單本身的內容外,往往還有右側的輔助說明面板,或者是預覽面板。文字詳情頁的右側也經常出現其它閱讀內容的推薦列表。當這兩類頁面視窗在橫向拉伸時,適應的方式通常有兩種。

          1)主模塊寬度拉伸,始終撐滿視窗,副模塊寬度固定。如果主模塊每行內容都比較多,推薦使用這種方式,能更大化地瀏覽主模塊的內容,減少不必要的換行。但缺點是,由于內容本身如表單項、詳情文字等在X軸上占用的空間不多,他們所在的模塊橫向拉伸后,會出現很多留白。



          2)各模塊保持寬度固定并居中展示,不跟隨視窗伸縮而變化。如果主模塊每行內容不多,又需要頻繁的左右對照,推薦使用這種方式。





          3.多欄型

          多欄型頁面一般用于數據看板、媒體卡片(視頻/圖片)的展示。因為這類業務場景,卡片數量多,無法簡單地將頁面進行區塊的分割,所以以卡片為單元來填充頁面。當視窗橫向拉伸時,這里也會出現2種適應的方式。

          1)數據看板類頁面,每個卡片等比拉伸(也可僅橫向拉伸),列數不增加,讓圖表能展示地更清晰。



          2)媒體卡類頁面,卡片需要設定一個最佳展示的寬度如w,當視窗拉寬時,卡片等比放大。當頁面拉寬到能增加一列寬度為w的卡片時,所有卡片寬度都恢復到w,增加一列。



          上述說了這么多適配的規則,當然我們也可以給視窗設定一個統一的適配上限,避免當視窗非常寬時,頁面的元素過于左右分離,反而不方便瀏覽。比如我們可以設置當視窗寬度>1920px后,頁面元素就不再跟隨撐滿,達到內容區寬度上限值,居中展示在界面中。



          二、Y軸的空間利用

          B端界面,面對復雜的信息,我們往往會面對兩類問題,如何承載大量的信息,如何區分強弱主次。這就涉及到頁面Y軸的空間利用了。這里我們提供4個小辦法來解決上面的問題。當出現大量信息時,應該注重Y軸空間的擴展,合理搭配翻頁、加載等邏輯。當希望對頁面元素區分強弱時,可以搭配滾動吸頂、局部折疊等交互,有序展示更多信息。

          1.如何承載大量信息

          1)替換型對于表格類頁面,為了方便快速查找所需信息,采用分頁器的方式展示更多的數據內容,即把當前頁內容做替換。即頁面Y軸的高度是固定的,僅做內容的變更。



          2)向下延展型

          對于瀑布流類頁面,由于數據量大,且沒有快速定位的訴求,使用無限加載的方式,向下加載更多的數據,這種類型的頁面Y軸可無限延展。



          2.如何區分強弱主次

          1)強-滾動吸頂當頁面滾動到某個位置,需要去強調一些導航性質的內容時,我們可以使用滾動吸頂的交互,即當把這個元素(如標題)滾動至當前視窗的頂部時,發生吸頂事件,始終停留在頁面中,該元素所引領的模塊在其下方滾動瀏覽。當把這個模塊滾動完,吸頂交互失效。這樣即能臨時性地強調某些內容,還不會影響其它模塊在Y軸上的展示。



          2)弱-局部展開對于表單類頁面,若在某個選項下還存在二級內容,則在初始展示時,優先突出主選項本身,當選中后再展開二級內容。這樣即能節省首屏空間,也能順應使用者的學習、使用心智,在合適的時機展示細節內容。



          三、Z軸的疊加順序

          說完X軸、Y軸的布局設計,我們最后來看看Z軸。這里,我們需要把視角從二維平面轉為三維空間,比如吸頂的導航,菜單浮層,模態彈窗這些都屬于出現在Z軸上的元素,他們之間可以進行層層疊加和嵌套,于是會出現疊加沖突的場景,導致發生錯誤的遮擋現象。所以Z軸設計的關鍵點在于不同元素的疊加排序設計。那么怎樣才能有一個貫穿全局的合理排序,讓元素們能乖乖排在自己的隊列中呢?此處,我們將頁面的所有可能出現的元素按照Z軸的特點歸類到三大區間里。每個區間內給出相應元素的排序順序指導,并配合動態計算的邏輯,Z軸上的元素就能整齊地疊加起來啦。

          1.基礎區間

          a.展示類-頁面中默認就存在的、不會對其它元素造成遮擋的元素(表單、表格、文字、按鈕、圖表、圖片等)。

          b.固定類-固定在頁面某處的元素,滑動頁面時會對a的元素產生遮擋(如吸頂導航、固定表頭/列、錨點、返回頂部按鈕等)。

          c.浮層類-由a中的元素觸發出的、指向該元素的臨時浮層元素。會對a以及固定元素產生遮擋。臨時浮層之間的z軸層級遵守觸發的時間先后順序,若臨時浮層可以同時存在在界面中,則后觸發的層級更高(下拉浮層、氣泡)。



          2.模態區間

          d.模態層-由基礎區間的元素觸發的,覆蓋整個視窗的模態元素,當該元素出現后,至于基礎區間所有元素層級之上,基礎區間的所有功能無法交互(抽屜、對話框和全屏預覽等).

          e.臨時浮層-在模態元素上出現的臨時浮層,計算高度時,可把d層想象成基礎區間的c層(下拉浮層、氣泡等).

          f.第二層模態層-在d出現之后出現的覆蓋整個視窗的模態元素。不特指第二層,也可以是第三、或更多。

          模態區間內,多個模態層可進行疊加(即上文的f),疊加時一樣需要遵守觸發時間的先后順序,后觸發的層級更高出現在更上層。但是我們也應注意,模態層不能疊加太多,會導致當前頁面覆蓋過多內容,一般最多用到兩層模態層就能滿足大部分場景了。



          3.頂層區間

          g.全局層-全局的、不被模態元素遮擋的元素??梢猿qv在頁面中,也可臨時出現。

          h.臨時層-由g觸發出的臨時浮層

          max.最高層-始終動態高于當前頁面所有層的元素(比較典型的是Toast組件)。



          四、寫在最后

          到這里,我們就淺談完關于B端界面的X、Y、Z軸上的設計特點了,雖然是一些高度抽象的內容,真正按照業務需求執行設計的時候,遇到的界面一定比我們這里談論的更復雜,但是只要我們清楚底層的空間布局、適應方式、擴展手段和疊加邏輯,再復雜的界面無非就是規則的嵌套,希望這篇文章能帶給大家一些小小的啟發。

          作者:百度MEUX
          轉載請注明:站酷

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


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


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

          經驗分享丨B端設計師價值體現那些事!

          ui設計分享達人

          提到B端設計你是否經常聽到這樣的聲音:

          • B端不需要怎么設計,直接對著低保真出圖就可以了;
          • 不要花時間在這些細枝末節上,參照Ant Design上的規范,在我的需求文檔的基礎上快速出圖;
          • 不知道怎么跟需求團隊溝通,感覺他們的設計思維太Low,聊不到一起;
          • 產品的圖片設計好看才是設計師的價值,功能體驗這些與設計師無關;
          • ……

          剛轉B端那段時間,我相信每一個設計師都曾有過這樣的困惑。

          設計師在實際工作的時候經常會遇到自己的設計方案與業務需求高度融合,由于B端的行業屬性,缺乏完善的數據驗證,常常到了最后也區分不了設計師真正的能力體現在何處,這就導致團隊成員對設計師的價值認識不夠全面。

          那么我們B端設計的價值又該如何體現?今天本文將從4個方面進行闡述,一起來看一下吧~

          01 設計價值是什么

          B端設計師追求工作中如何體現價值的時候,我們得先明白B端的設計價值是什么。

          那么何為B端的設計價值呢?

          百度百科中設計價值的含義是:把一種計劃、規劃、設想通過視覺的形式傳達出來的活動過程。今天本文中的B端設計價值分為視覺設計、交互體驗以及業務流程優化,通過信息傳達的改變,幫助客戶降本增效的方式獲取收益。

          如果將B端整個生命流程進行剖析,我們會更好的理解其設計價值。

          1.1 視覺設計吸引客戶

          B端產品與C端產品不同,它需要市場銷售人員利用自身的能力以及資源向目標企業進行銷售或者在一些大型展會上對外演示,據有關資料表明人所感知的信息的80%的信息來自視覺,這就需要對產品的功能進行視覺化展示。

          因為競爭激烈,經常需要在眾多競爭者中進行廝殺。在技術水平趨同的情況下,視覺起到了非常大的作用。特別是在展會期間,假如兩家公司技術水平相當,演示的視覺完全碾壓對手,讓客戶有著良好的品牌印象,這將產生快速的口碑影響,而這些將影響用戶的最終決定。

          1.2 交互體驗留住客戶

          這一步需要我們理念進行升華,將視覺視角切換至體驗視角。

          企業是我們B端設計的重要客戶,它是一個具有不同成員角色的群體組織。該組織為了工作管理的效率,會有不同的權限體系。權限的不同關注的信息也有所不同,這需要我們在設計中依據權限,考慮不同信息呈現優先級。

          功能繁瑣是很多同學對B端的第一印象。因其有著不同角色的參與,每個角色因為崗位職責的不同,所參與公司的業務流程存在差異,這意味著需要將不同的功能在遵循產品體驗一致性的基礎上匯聚在一起。

          1.3 業務價值賦能客戶

          業務價值對于B端設計特別重要,這是企業決定購買B端產品的出發點。我們在說業務設計的時候,需圍繞企業“降本增效”理念,讓用戶覺得有用,完成企業的管理需求。

          舉個例子,比如我們做了一款報銷系統產品,幫助用戶解決財務報銷過程復雜、冗長的問題。通過前期參與用戶調研,洞察業務,挖掘需求的突破點,找到當前背景下最優的業務流程解決方案。企業員工使用我們的產品后少填寫信息,更快速的拿到了報銷費用,平均比傳統流程節省了20分鐘。假設企業員工平均時薪60元,那么這個100人的企業每周可以節省1.6萬的人力支出,而一年可以節省76.8萬左右的支出。

          02 如何體現設計價值

          在了解了設計價值的體現后,我們知道B端設計的落腳點在業務價值的賦能上。當我們實實在在的解決了業務問題,而不是產品外層視覺與交互的表層需求,才能讓我們的設計價值最大化,讓設計得到團隊其他成員的認可。接下來結合工作經驗闡述下設計師可以賦能業務的點。

          2.1 主動養成系統思維

          很多B端設計師都是被動的接到產品經理的低保真,然后根據低保真的需求直接輸出設計稿,妥妥的淪為一個畫圖的美工,這會使得自己在團隊內部被定義為一個工具人。

          那我們的發力點該是什么?借用Jesse James Garrett的理論用戶體驗五要素這個專業名稱(表現層、框架層、結構層、范圍層、戰略層)。單純的視覺設計雖然容易感知,但它卻屬于五要素的最頂層,價值有限,無法準確傳達最底層戰略層的含義,我們需要往下突破才能凸顯我們的價值。

          當我們在收到需求的時候,需要具備系統化思維,從底層戰略開始,首先了解業務需求背后的價值,同產品經理對其業務目標后,幫助他梳理業務需求,結合用戶目標以及當前的技術能力等多方因素系統性思考最優的設計解決方案。

          只有發揮了我們的主觀能動性,改變單點視角,具備系統化思考的能力,才能更好出結果,體現我們的價值。

          2.2 更專業的組件規范

          功能復雜繁瑣的B端為了最大化的保證設計的一致性、提升開發的效率以及方便產品的迭代優化,組件規范是我們產品必不可少的工具。

          那目前市面上的組件規范這么完善,對于我們設計師而言自身的價值是否無法體現了呢?其實它存在2個問題:

          1、業務屬性不符。雖然市面上存在眾多的第三方組件,但由于設計的出發點不同(公司不同影響的業務屬性不同),導致市面上的組件不一定與自家產品屬性貼合,需要我們結合產品愿景以及業務規劃進行重新設計;

          2、業務特性不貼合。我們見到的很多組件只能歸于基礎組件,可以保證基礎的設計一致性,但由于業務領域的獨特性,在一些專業的場景中有著強烈的業務屬性,需要我們對一些基礎組件進行組合,進行更專業的沉淀,這樣在實際使用的時候會更加高效。例如高級篩選、不同的場景彈框等。

          2.3 賦能業務提升價值

          不管B端還是C端的設計目的都是為了解決業務問題(業務目標的達成也是KPI考核的重要目標),我們始終要以業務目標作為我們的關鍵目標。

          我們設計師需要參與整個行業生態的搭建,做到體驗結構展示清晰,核心信息簡潔明了,降低用戶的操作門檻,通過提高體驗效率(縮減時間成本),節省企業的人力成本。

          對業務需求的賦能其實就是要求我們進行需求的挖掘,發現更多的業務增長點,提供當前背景下最優的解決方案。需要例如我們可以主動的進行XX調研活動,給出XX解決方案,最后給公司帶來了XX業務價值。

          2.4 復盤沉淀經驗

          項目復盤對于我們設計師的能力成長的作用是巨大的。它之所是最快的學習方式,因為它在是實踐中的反饋,這種直觀的經驗沉淀最終會融入自己解決問題的知識體系架構,而這將進一步反輔自己的職業成長。

          復盤可以讓我們站在第三方角度,重新對項目流程進行全面的回顧與總結。結合不同的反饋,客觀的了解當前設計在整個業務目標中的價值,這是對我們設計量化最佳途徑。不單單對于個人,團隊內部的其他成員也可以通過復盤加深對設計信任感的建立,他們可以看到我們的設計思路,更深層次的了解我們的設計價值。

          03 寫在最后

          設計價值的體現建立在一朝一夕的積累上,如果想在B端設計中體現價值,一定要透過現象看本質,站在業務的角度,尋找真正的發力點,讓自己參與業務賦能的同時共同成長。

          作者:江鳥的設計生活

          轉載請注明:站酷

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


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


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

          關于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、質量保障

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

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

           

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

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

          做組件不是設計目標,

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

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

           

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

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

           

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

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

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

           

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

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

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

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

           

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

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

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

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

           

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

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

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

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

           

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

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

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

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

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

           

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

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

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

           

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

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

           


          作者:元堯

          轉載請注明:學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 設計系統的構成

          • 設計原則:

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

          • 設計組件:

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

          • 設計模式:

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

          • 控件庫:

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

          • 視覺樣式:

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

          • 設計規范:

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

          設計原則

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

          圖片

          圖7 設計原則

          設計指導原則:

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

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

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

          • 事實性原則:

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

          • 可用性原則:

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

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

           

          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咨詢、用戶體驗公司、軟件界面設計公司



          更多精彩文章:



          日歷

          鏈接

          個人資料

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

          存檔

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