92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

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、需求挖掘與反饋收集

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

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

圖片

圖8 體系化整理體驗問題

二、職業能力

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

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

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

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

圖片

圖9 需求排期機制

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

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

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

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

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

 

總結

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

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

 

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

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

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

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

 

參考書籍

《在騰訊產品法》

參考文章

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

《Design System》相關文章

《Pin Design》年刊文章

作者:瑤一


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

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


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

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

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



B端列表頁設計總結

鶴鶴

列表頁腦圖



左側導航欄

全局導航

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



更多精彩文章:



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

博博

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

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

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

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

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


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


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

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

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

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

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

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


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


設計方法:功能高效聚合

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

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

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

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

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

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


最后


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

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

作者:自轉一周的鹿

轉載請注明:優設網

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

魏華的微信.png

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

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

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



更多精彩文章:



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

博博

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

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

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

我總結了以下 3 個原則:

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


匹配用戶心智模型


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

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

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

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

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

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

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

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


信息的層次性


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

信息層級包括 2 個方面:

1. 系統空間分層

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

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

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

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

2. 頁面信息結構

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

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

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

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

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

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

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

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

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

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

3. 頁面元素設計

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

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


信息的可理解性


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

1. 幫助信息

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

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

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

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

2. 可視化設計

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

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

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


寫在最后


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

作者:子牧先生

轉載請注明:優設網

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

魏華的微信.png

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

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

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



更多精彩文章:





Bs界面設計之六:想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

博博

有了解和學習 B 端的同學必然都聽說過 SAAS 這個詞,這在 B 端行業是個非常重要的產品形式和分支。

雖然它重要,但新手對這東西的理解充滿了讓人遺憾的扭曲。比如常見的誤解式提問,Saas 應該怎么設計?適用哪些設計風格?

所以我從最底層的技術層面,來解析 SAAS 到底是什么,在未來你再也不用擔心對這個詞匯一知半解,無法正常參與業務討論了。


想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

在 9 層塔中,SaaS 是完全制作好軟件讓用戶直接上手使用的軟件,而 PaaS 和 IaaS 就不一樣。

1. PaaS

PaaS 全文 Platform as a Service,是平臺即服務的簡稱。這屬于完全技術化的服務,是非程序員的一般用戶難以參與到的業務類型了。即服務商提供了基礎的 7 層服務,只要用戶購買了這些使用權,那么就可以直接在這個基礎上編寫或安裝運行的程序進行使用了。

比如全球最大的開源 CMS 博客程序 WordPress,是由 PHP+MySQL 編寫的,如果要創建這樣的網站,就可以直接購買符合程序對應環境的服務器,再進行安裝部署即可。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

2. IaaS

IaaS 全文 Infrastructure as a Service,就是用戶只購買一個完全空白的虛擬主機,類似你購買了一臺硬盤格式化后完全空白的虛擬電腦。用戶可以自己選擇安裝什么樣的系統,編寫什么樣的中間件,最后再搭建自己的框架。這適合定自定義要求更高的用戶,完全根據自己的需要 DIY 項目的服務器功能。

3. Hosting

Hosting 則是比 IaaS 更進一步的服務,從原本的虛擬服務器升級到了完整的服務器。也就是說,在一些特定業務環境下(比如特殊的數據安全要求),用戶需要購買完整的服務器硬件使用權,從原本的合租換成整租。

所以,Hosting 就是服務器托管的意思,用戶向一些服務商購買了完整的服務器硬件使用權和聯網功能,然后遠程進行控制和使用。而商家負責硬件層面運維,防止服務器斷電、斷網、損壞、過熱、故障等一系列硬件問題。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

4. Co-location

九層塔中,我們其實還省略了一個更底層的環節 —— 數據中心。

數據中心是一個物理名詞,在今天指的是大規模的服務器數據設備安置和運行的空間。比如蘋果的云上貴州,就是典型的數據中心。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

Co-location 的服務也叫場地出租,就是數據中心的商家,把數據中心的物理空間使用權租用給用戶,用戶自己購買服務器或商家的(不是臨時租用)放進去,再借助數據中心的網絡和其它基礎服務實現服務器的正常運轉。

這個概念大家簡單理解就可以,我就不多做介紹了。所以,九層塔中包攬了不同層級數量的技術,就可以形成不同的服務,每一級服務有各自的優缺點,是由項目的實際情況決定的。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

相信看完前面的介紹大家已經知道,SaaS 等服務是建立在聯網的基礎之上的,也就是說,除了可以獨立運行在你客戶端里的本地軟件,還包含更多需要聯網的軟件,或者干脆運行在遠程服務器主機上的軟件。

這是一個發展的過程……

最早的軟件安裝是我們到軟件店里購買軟盤、光盤,回到家里的電腦安裝,這些軟件往往只在本地運行,是不需要聯網的孤島。隨著互聯網行業的發展,孤島漸漸被消除,聯網上傳和獲取數據越來越普及,甚至,軟件都不需要再下載和安裝,直接用瀏覽器就可以訪問使用。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

這種模式,就催生了軟件的開發維護與服務器、網絡的硬件運行進行了分工,一般的產品開發團隊專注在軟件應用層面的開發工作,而把網絡、遠程服務交給其它商家,并付費購買。這樣不僅帶來更高的效率,而且降低了各自的成本,實現了多方的共贏。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

所以,我們再來理解云服務這個詞就很容易了,云就是網絡,云服務就是基于聯網實現的各種軟硬件服務的總和。除了遠程的虛擬機、中間件、數據庫外,還有遠程計算、渲染、CND 加速、直播分流等等。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

這也是為什么云服務會成為互聯網發展的基礎,因為它實在太重要了,幾乎所有互聯網公司都無法脫離云服務帶來的支持。這也是為什么各個大廠紛紛投入云服務的賽道中,因為這是互聯網的基建和命脈之一,擁有非常廣闊的前景與市場。而在馬太效應強者越強的現實環境下,頭部的廠商擁有更好的機群、技術、人員,可以大幅度降低運作成本,提供更優質但價格更低廉的服務。

雖然云服務在今天不可或缺,價格也越來越有優勢。但是,并不是所有企業都一定要選擇購買外部的云服務,這就是我們要理解的另一個課題 —— 私有化部署。云服務再怎么便捷,也有一個缺陷,那就是數據是存儲在別的商家、企業的服務器中,有一定的數據安全隱患。雖然數據安全是云服務的最基本保障,但很多對數據隱私、安全極度重視的企業,是不愿意承擔任何外部風險的。所以他們就會通過自建本地服務器(私有云)的方式,實現從網絡、硬件到軟件全局私有化的部署。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

也就是說,服務器機房是自己公司的,網絡是自己遷進機房的,服務器自己買的,環境、虛擬化、數據庫自己搭建的,后端程序也是自己寫的,最后電腦手機上運行的客戶端,是連接這些服務器的。

哦對了,當然這些硬件日常的維護也要由自己公司的運維負責……

這樣的成本高嘛?非常高。但類似國企、銀行、證券、國防、政府機關等機構,對數據的安全性是異乎尋常的執著的,他們是有足夠的動力劃出預算來確保數據的私密與安全,用來運行自己內部的 B 端系統。這也是為什么這些機構從一開始就拒絕使用 Figma 這種公有云端軟件,尤其是服務器在國外的。

再問下一個問題,私有化部署,就意味著這個環節中所有步驟全是自己搞定嘛?當然不可能,因為應用這個層面,有時候不是想開發就開發得出來,或者成本實在超出了預算。因為私有化的主要目標是數據安全,但不是應用的工具一定得個性化定制。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

比如在即時設計官網的價格頁面,就可以看到 “私有部署” 這個選項。它的實際作用,就是允許客戶在自己的服務器上安裝它,讓內部的員工使用設計軟件時是同步到公司指定的服務器而不是官方的公共服務器中,滿足客戶的數據隱私需求。

注:這例子大家討論最多適合理解,非恰飯

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(下)

所以,了解完上面的概念,你也就大概能明白什么是云服務,什么是私有化。如果需要在工作中碰到更細節的名詞還是概念,可以再進一步做理解。


結尾


關于 SaaS、PaaS、IaaS、云服務、私有化部署的掃盲,就先解釋到這里。希望大家看完以后對 B 端行業一些最基本的產品概念能有一定的認識。

作者:酸梅干超人

轉載請注明:優設網

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

魏華的微信.png

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

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

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



更多精彩文章:



Bs界面設計之五:想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

博博

有了解和學習 B 端的同學必然都聽說過 SAAS 這個詞,這在 B 端行業是個非常重要的產品形式和分支。

雖然它重要,但新手對這東西的理解充滿了讓人遺憾的扭曲。比如常見的誤解式提問,Saas 應該怎么設計?適用哪些設計風格?

……

所以我從最底層的技術層面,來解析 SAAS 到底是什么,在未來你再也不用擔心對這個詞匯一知半解,無法正常參與業務討論了。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

講解什么是 Saas,或者剛剛圖例出現的 Paas、laas 是什么,首先要認識一個問題,一個需要聯網的軟件,是如何落地的,需要哪些前提條件。

通常,我們可以把一個普通的聯網產品要正式上線并使用,需要滿足 9 個層級的條件,我們簡稱 “9 層塔”,分別是:

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

下面,我們根據每個大層級來解釋一下,它們分別都是什么。

1. 基礎設施層

基礎設施層是一切網絡服務的根基,由現實世界的硬件組成,是所有技術、代碼、數據的運行基礎。

層 1:網絡(Networking)

即基礎的互聯網電信寬帶服務,通過電信運營商在各地搭建聯網用的設備,并使用線纜相互連接,滿足數據的物理傳輸可能。

比如你想要在家上網沖浪(非移動上網),最基礎的條件是就是購買和開通寬帶服務,通過接入光纖的形式,實現從家中連接到互聯網世界的可能。

層 2:服務器(Serves)

服務器,本質上也是一臺電腦。有了聯網的條件,我們就要把網絡接入到這臺 “電腦” 上,讓它來完成各種數據的處理和存儲。

但不管它能做什么,要做什么,首先你得先有這臺設備,不然后續的工作都無從談起,所以服務器指的就是用來完成后續工作的電腦設備。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

層 3:存儲(Storage)

存儲就是硬盤,你想要運行的任何程序、代碼,還是想要收集的數據,都需要容納的地方,那就是硬盤空間。存儲就是關聯到服務器的硬盤,是數據存儲的物理環境。

之所以硬盤被獨立出出來,而沒有把 CPU 內存這些拿出來,是因為數據的存儲和安全(物理上)是網絡服務的重中之重。CPU、內存、電源壞了,替換就可以,硬盤損壞導致數據的丟失是無論如何不可能接受的。

所以,工程師們開發了非常多特殊的技術來保障存儲的穩定和安全。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

2. 技術應用層

技術應用層,就是具備了網絡、服務器、硬盤以后,讓這些基礎設施充分發揮作用和能效的相關技術。

層 4:虛擬化(Virtualization)

虛擬化是個比較抽象的概念,它是一種資源利用的技術,讓服務器最大化的利用和分配自己的資源。

比如一臺服務器,有 8 核心、8G 內存、8G 存儲,如果賣個一個客戶運行一個程序,那么很可能這個這個程序日常只使用一個核心的算力,1GB 內存,1G 不到的存儲,剩下的算力資源不就浪費了嘛?

于是,虛擬技術就可以把這臺服務器切割成 8 臺 “虛擬機” 賣給 8 個這樣的客戶。讓他們在這臺設備上運行 8 個不同的程序,并根據它們各自使用的消耗靈活分配 CPU 和內存資源。

所以,今天如果你想要搭建一個網站,云服務商出售的 “虛擬主機”,就是在實體服務器主機上切割出來的一部分。這樣客戶省錢了,商家利潤率也更高了!

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

層 5:操作系統(OS)

每臺電腦都有自己的操作系統,我們熟知的 Windows、Mac OS 等等。如果硬件沒有搭載操作系統,那它們就只是一堆工藝精密的廢鐵。

對于服務器來說也是,任何服務器想要正常運行,都必須搭載相關的服務器操作系統,有了基本的系統,我們才能創建程序,讓服務器去運行我們想要的功能。

前面提到的虛擬機,就允許同一臺服務器通過虛擬技術運行多個系統。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

層 6:中間件

中間件也是個比較復雜的技術概念,它是個獨立系統軟件服務程序,是軟件的直接面向對象(而不是服務器),是一種支撐軟件。

舉個不太嚴謹的例子,我們常規的邏輯是一個程序對應一臺服務器(或虛擬機),但真實情況往往是一個程序會關聯好幾個服務器和不同的系統,來完成不同的網絡服務。正常情況下,你需要對每個服務器和系統進行適配。

而中間件的作用就是幫助你省掉這個麻煩的步驟,讓你只需要對接唯一的翻譯和話事人,他會幫你向不同的任務對象傳達你的要求。

層 7:程序環境(Runtime)

程序環境,就是編譯代碼用的環境。我們常聽說的 C 語言、C++、PHP、Java、.Net 等編程語言,都需要安裝一個對應的運行環境。

許多熱衷電腦游戲的同學一定很熟悉游戲第一次啟動觸發的 Java 安裝界面,那就證明這個游戲中運用到了 Java 的代碼,如果你沒有 Java 的運行環境,那么它們就無法生效。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

3. 產品表現層

層 8:應用(Application)

在這個系統下,應用程序指的不是你在自己電腦手機上安裝的程序。而是安裝在服務器上運行的程序,不管是后端程序還是前端程序。

它們需要使用某些特定的程序語言來編寫,并運行在上面所說的對應環境中。我們所說的后端開發,通常就是開發服務器所運行的程序的程序員。

層 9:數據(Data)

這個詞放在這里可能有比較大的歧義,數據實際上就是使用這個程序所產生出來的數據,而不是單指數據庫(數據庫也是環境的一部分)。

比如你打開一個網站注冊了賬號,上傳了頭像,那么這些信息就是使用程序所額外產生的數據,它是項目正常運作的必然產品。

4. SaaS 到底是什么

理解上面的 9 個層級的內容是什么,我們就可以看下面這張圖表了。

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

SaaS 全程 Software-as-a-Service,翻譯叫 “軟件即服務”,講人話就是 “賣聯網軟件” 的。

前面提的 9 個層級,除了最后一層數據是我們普通人可以負責的,其它每個層級都需要對應的開發和工程師來負責對吧,那么我們普通人還是企業就不能使用網絡軟件服務了嘛?

這肯定是不符合事物發展規律的。

SaaS 的存在,就是讓用戶不用管什么服務器、代碼、中間件這些有的沒的高深玩意,直接讓你在瀏覽器或本地客戶端上直接使用這款聯網軟件,并創建對應的數據信息。

換句話講,只要這個軟件是聯網的,且軟件本身的功能就是服務的核心(劃重點:社區電商類軟件的服務顯然不是軟件功能本身),它就是 SaaS。SaaS 既可以免費,也可以是通過批量出售軟件功能的使用權來賺取收益。

免費情景:

微軟:如果你使用了基于 Web 的電子郵件服務(例如 Outlook、Hotmail 或 Yahoo!Mail),那么你已經使用一種形式的 SaaS。

https://azure.microsoft.com/zh-cn/overview/what-is-saas/

付費情景:

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

想做B端還不懂什么是SAAS?一篇最專業的掃盲科普(上)

在 B 端的語境下,SaaS 通常就是指制作一個面向商業用戶的聯網軟件,然后批量出售這個軟件的使用權。它并沒有特指這個軟件必須是 CRM、ERP、HRM 還是商用 HMI……

所以明白了嘛,SaaS 只是一個商業形式或技術形式的統稱,它根本沒有具體的設計規范或者學習方法,完全根據業務的實際需求和場景決定。

最后,再問你們一個問題,你們現在負責的項目是 SaaS 嘛?


結尾


這一篇我們完成對 SaaS 的基本介紹,下一篇,我會在這基礎進一步展開,講解 PaaS、laaS 和云服務的相關概念。

希望大家不要再在這種基礎概念中犯迷糊了……

我們下篇再賤~

作者:酸梅干超人

轉載請注明:優設網

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

魏華的微信.png

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

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

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



更多精彩文章:












日歷

鏈接

個人資料

藍藍設計的小編 http://www.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
精品视频在线导航| 亚洲高清福利视频| 欧美另类99xxxxx| 欧美激情在线视频二区| 欧美一区二区三区四区在线| 国产亚洲在线播放| 国产精品99久久久久久www| 国a精品视频大全| 久久久天堂国产精品女人| 亚洲欧美一区二区精品久久久| 国产91精品青草社区| 91免费看片在线| 中文字幕亚洲国产| 国产精品视频26uuu| 欧美性极品xxxx做受| 国产精品成人一区二区| 国产成人久久久精品一区| 国产精品成熟老女人| 亚洲香蕉伊综合在人在线视看| 亚洲国产精品yw在线观看| 91久久久在线| 成人xxxxx| 日韩av网址在线观看| 亚洲国产精品一区二区三区| 中文字幕日韩欧美在线视频| 国产精品69av| 久久久久久久久久久91| 日韩精品久久久久久久玫瑰园| 91精品国产自产在线老师啪| 国产精品久久久久久久久久久久| 午夜精品一区二区三区在线视频| 欧美国产亚洲视频| 欧美午夜精品伦理| 国产精品久久久久久av下载红粉| 91精品国产亚洲| 亚洲欧美成人一区二区在线电影| 久久精品免费电影| 欧美激情奇米色| 久久伊人免费视频| 国产精品一区二区三区毛片淫片| 色视频www在线播放国产成人| 日韩电影在线观看永久视频免费网站| 国产91网红主播在线观看| 日韩亚洲成人av在线| 国产色婷婷国产综合在线理论片a| 亚洲欧洲中文天堂| 久久久久久亚洲精品中文字幕| 久久久久成人网| 日韩人体视频一二区| 日韩精品极品在线观看播放免费视频| 成人疯狂猛交xxx| 欧美精品激情视频| 久久久www成人免费精品张筱雨| 国产免费亚洲高清| 一区二区三区久久精品| 欧美日韩国产一区在线| 欧美另类极品videosbestfree| 欧美日韩精品中文字幕| 久久久免费观看| 色先锋资源久久综合5566| 欧美亚洲成人xxx| 久久99国产精品自在自在app| 久久精品国产亚洲| 68精品国产免费久久久久久婷婷| 国产精品美女午夜av| 国产精品91免费在线| 福利二区91精品bt7086| 狠狠干狠狠久久| 欧美精品激情视频| 精品久久久久久中文字幕| 美日韩在线视频| 日韩精品在线观看视频| 欧美日韩第一页| 色综合天天狠天天透天天伊人| 久久久国产视频| 日本电影亚洲天堂| 亚洲国产精品福利| 亚洲第一网站男人都懂| 国产成人精品免高潮费视频| 在线观看91久久久久久| 欧美性猛交xxxx乱大交| 俺去亚洲欧洲欧美日韩| 在线观看成人黄色| 国产在线观看一区二区三区| 欧美高清视频在线| 国产精品久久999| 欧美精品videofree1080p| 亚洲性夜色噜噜噜7777| 国产成人aa精品一区在线播放| 久久久久国产精品免费| 久久伊人精品一区二区三区| 97视频免费在线观看| 亚洲va码欧洲m码| 久久久免费观看| 亚洲成人免费在线视频| 国产精品扒开腿做爽爽爽视频| 97色在线视频观看| 国产日韩精品综合网站| 欧美日韩免费网站| www.亚洲成人| 日韩少妇与小伙激情| 久久久亚洲成人| 国产一区二区三区在线观看视频| 中文字幕在线看视频国产欧美| 国产999在线观看| 亚洲精品91美女久久久久久久| 国产一区二区三区在线| 日韩精品电影网| 久久精品一本久久99精品| 国产欧美最新羞羞视频在线观看| 久久不射热爱视频精品| 欧美成人午夜影院| 亚洲女人初尝黑人巨大| 久久久久99精品久久久久| 中文字幕亚洲一区二区三区五十路| 久久综合久中文字幕青草| 国产精品扒开腿做爽爽爽男男| 97在线免费观看视频| 欧美日韩福利在线观看| 欧洲s码亚洲m码精品一区| 乱亲女秽乱长久久久| 亚洲综合在线做性| 成人妇女淫片aaaa视频| 国产精自产拍久久久久久蜜| 国产精品99蜜臀久久不卡二区| 欧美日本高清一区| 欧美有码在线视频| 97**国产露脸精品国产| 日韩av网站在线| 在线精品高清中文字幕| 久久久久久午夜| 欧美激情videoshd| 国产一区二区激情| 国产成人精品久久亚洲高清不卡| 欧美与黑人午夜性猛交久久久| 国产精品久久久久久久app| 成人免费网视频| 国产精品久久久久久久7电影| 国产一区二区三区欧美| 97精品免费视频| 91九色国产社区在线观看| 久久福利网址导航| 97精品国产97久久久久久春色| 日韩电影免费观看在线观看| 欧美激情高清视频| 精品一区二区三区电影| 亚洲欧美日韩国产精品| 国产精品视频一区二区三区四| 国产精品18久久久久久首页狼| 欧美成人手机在线| 日韩网站在线观看| 久久久久久久久国产| 欧美电影在线观看高清| 亚洲成人黄色在线| 粗暴蹂躏中文一区二区三区| 97在线日本国产| 亚洲精品午夜精品| 久久视频在线免费观看| 98精品国产高清在线xxxx天堂| 国产精品一区二区三区毛片淫片| 欧美极品欧美精品欧美视频| 久久国产一区二区三区| 久久夜色精品国产亚洲aⅴ| 亚洲国产又黄又爽女人高潮的|