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

          首頁

          霧里看花?這些是你能用上的產品思維

          前端達人

          你也許會困惑,明明絞盡腦汁想出方案但為什么總是不被認可,為什么每當自己來講述設計方案時總是無從談起。在走出新手村之后,你是否也會思考,這一切背后是否有什么規律可循。今天咱們略微換一個視角,盤一盤這背后的細節。
          ——
           
          我們作為設計師這個角色,對于設計思維并不陌生。而在實際的工作中只根據設計者常有的思維顯然是不太夠的,將視角聚焦在更上游,你是否在心里追問為什么會有這個需求呢?為什么要做這一改動呢?
          霧里看花?這些是你能用上的產品思維
           
           
          在實際的工作場景中,設計思維和產品是為是相輔相成的。多方位的思考可以更好的理解需求把控設計方向,幫助你更好的發揮自己的作用,設計出更符合用戶需求和商業目標的優秀產品。
          霧里看花?這些是你能用上的產品思維
           
           
          1.1 產品思維是什么
          產品的目的是為用戶解決問題滿足用戶的需求。而產品經理需要權衡用戶場景和業務三者,發現問題分析問題解決問題,從而實現產品不斷的迭代和優化。產品思維則是解決問題的思維方式。這里我根據之前的工作經驗,我挑關鍵來總結了一下。
           
          用戶導向
          理解產品的核心用戶群體,這其中包含了解他們的需求偏好和行為習慣。為用戶提供好用方便的功能,提升用戶的產品滿意度。
          數據驅動
          利用產品數據分析方法和工具,分析用戶的實際實用情況,從中找到產品優化的機會點,迭代產品方案。
          市場分析
          了解產品處在的市場競爭環境和行業發展趨勢,通過競品的特點和優勢從而發現產品的差異化和創新點,獲得更好的市場競爭力。
          用戶增長
          面對存量市場,掌握用戶的增長的方法策略,通過產品設計和優化實現用戶和業務的增長。
          產品策略
           
          了解產品策略的定制和執行過程,包括但不限于產品定位,目標設置,功能規劃。制定產品的發展策略,對東產品的發展和優化。
           
          產品思維并不是照本宣科的工具,而是解決問題的切入點。不同的產品經理對產品思維也有著不同的理解。如今高度競爭的環境下,只有為用戶創造獨特的價值才能在市場中脫穎而出。這也變相的提高了設計師的要求,能否快速準確的把握需求方向產出有效的設計方案顯得尤為重要。
           
          1.2 產品思維可以幫助設計師做什么
          更全面的思考問題
          很多時候受限于視角,設計師往往會執著于界面的視覺表現。耗費更多的精力試圖吸引更多的用戶注意力。而掌握一定的產品思維可以幫助設計師在設計環節更好的思考和參與。設計出更符合用戶和業務預期的界面,發現用戶真實的痛點從而有針對性的優化設計方案。
          舉個例子:設計師通過對復雜流程的簡化,視覺降噪等方案,聚焦核心功能,改善用戶的交互體驗和視覺感受。
          優化產品設計
          通過對數據的研究,深入分析用戶行為和市場環境,發現產品的改進方向。通過數據分析和競品分析等手段,發現用戶需求與市場趨勢,為產品的功能設計和界面優化提供有力的支持。
          舉個例子:設計師根據用戶反饋的結果調整頁面的布局,優化產品的交互設計,提高產品的易用性和吸引力。
          提升團隊協作效率
          具備產品思維,可以讓設計師和產品經理無阻力溝通,通過與團隊的有效溝通和協作,共同推動產品的開發和優化,提升團隊的協作效率和產品的質量,達到事半功倍的效果。
          舉個例子:和產品共同研討產品需求文檔,和開發團隊討論實現方案。確保項目的快速推進。
          提升職業競爭力
           
          具備產品思維的設計師在職場更具有競爭力,可以在不同的工作場景中承擔更多的責任和挑戰,為團隊帶來更大的價值。擁有較好的產品思維可以幫助設計師保持對行業趨勢和技術發展的敏感性,在職場競爭中也更具優勢。
           
          霧里看花?這些是你能用上的產品思維
           
           
          現在讓我們立即切換到工作視角,怎樣在原有的工作流程中應用好產品思維尤為關鍵。我們作為設計者,了解產品思維是為了更好的發散思考和推敲設計方案。授人以魚不如授人以漁,面對不同領域不同項目的紛繁需求,不妨多問幾個問題,在不斷的提問中找到答案。
          2.1 明確設計目標
          設計師需要明確項目背景推導出正確的設計目標。這要求設計師時刻需要將項目的目標和成果放在首位,之后的設計決策和行動都需要和這些目標保持一致。另外注重跨團隊協作,合理分類時間和設計資源,將會讓你更加游刃有余。切忌鉆牛角尖的閉門造車,務必確保項目按時交付。
           
          自問自答:
           
          •  
            項目組都有誰,自己負責的哪些板塊,我的目的是什么?
          •  
            項目進展到了哪里,什么時候需要交付,什么時候需要上線?
          •  
            設計方案確定提交后怎樣快速和開發團隊對接實現落地,期間是否有什么問題?
           
          2.2用戶研究
          設計師進行用戶研究是為了更好的了解用戶的需求和行為,確保產品能夠滿足用戶的真實需求。用戶研究的方式很多,設計師可以根據團隊需要和項目時間排期進行合理的安排。
           
          成功的用戶研究可以幫助設計師驗證設計假設的有效性,降低產品的開發風險,減少不必要的時間和成本損耗。
          霧里看花?這些是你能用上的產品思維
           
           
          自問自答:
           
          •  
            你的用戶是誰,使用場景是什么,需要為他們解決什么問題?
          •  
            你的用戶是如何使用這些功能的,這期間是否還有優化的空間?
           
          2.3 競品分析
          競品分析是一種通過研究和對比競爭對手的產品和服務細節,從中發現優勢和劣勢,進而指導自身產品設計和優化的方法。對于設計師來說,可以幫助我們更快的了解市場和行業的整體情況,為產品的設計提供給更多的參考依據,另一方面可以快速發現自身產品的問題 找到優化的方向。
           
          需要注意的是,競品分析需要帶著目的進行,切勿走馬觀花泛泛而談。
          自問自答
           
          •  
            競品分析的主題是什么,目標是解決當下的什么問題?
          •  
            你的競品是誰,他是怎么做的,反饋怎樣?
          •  
            我們可以借鑒什么,改善什么?
           
          2.4埋點與數據回收
          雖然設計師并不會直接參與埋點的設計,但為了更好的捕捉用戶的行為數據,在設計中可以根據情況和優先級將埋點納入設計考慮。
           
          設計師和數據分析的溝通可以避免后期添加埋點時,出現和設計的不匹配的尷尬狀況。數據是驗證設計合理性的重要指標,很多時候設計師需要一個具體的成果反饋來復盤和指導之后的設計工作,多多留意最終呈現頁面效果和用戶反饋,并不是完成上線就可以將這些拋擲腦后了。
          霧里看花?這些是你能用上的產品思維
           
           
          終極問題:
           
          •  
            如何證明這是個改版方案是合理的
           
          霧里看花?這些是你能用上的產品思維
           
           
          3.1設計師的痛點
          在實際的工作中,往往會由于不同的產品特點和團隊的配置,設計師不得不身兼多職面對更為復雜的情況。在開發流程中設計師始終處在“夾縫之中”的位置,而站在公司的視角設計師這一環節既不能直接產生收益也不能為整體降低成本。在進入職業生涯不久我開始思考為什么設計師處在這樣一個被動的處境呢,跑遍了前端后端數據和產品小組,“厚著臉皮”旁聽了各種冗雜的會議,以及多少次和前輩的交流中,我才慢慢發現了背后的“難言之隱”
           
          •  
            依賴需求方案
          設計師通常是根據產品需求方案確定以后再參與工作的,設計師的工作很大程度上取決于產品需求的制定,因此單從設計視角來看有一定的滯后性。設計師接到產品需求后沒有辦法理解背后需要解決的核心問題,也很少思考和判斷需求的合理性,很容易和產品的最初想法產生偏差。
          •  
            反饋的延遲
          設計師的工作成果也需要后期數據回收和復盤,而在實際的工作中,往往是一個需求結束后就需要急匆匆的應對下一個需求。如果不去留意,很多時候作為設計師并不清楚最終交給開發的設計稿到底取得了什么樣的數據表現,到底哪一個方案才能更好的實現目標。這也使得設計師很難進行經驗總結。
          •  
            有限的時間和資源成本
          當前市場競爭相對激烈,各方產品都需要在有限的時間中盡可能的搶占市場,而設計師需要在較短的時間中給出合理的設計方案,同時和產品以及開發團隊不斷進行細節的調整,這也使得設計師面對的壓力和挑戰更大。
           
           
          較低的話語權、只多不少的需求使得本就焦慮內卷的設計師處境更加雪上加霜。但是反過來想想,既然改變不了外在的環境,是否有辦法可以讓設計師們由內而外的主動爭取些什么呢,我能想到的答案既是化被動為主動,盡可能的參與項目的推進,同時和上下游保持溝通,從而提升設計師在團隊中的存在感和參與感。而產品思維,是一塊剛剛好的墊腳石。
           
          2.2產品思維的訓練
          講到如何提升產品思維,我總會想起一位前輩曾經說過一切技巧惟手熟爾。你也許會說每天都在一成不變的做著公司的內容實在提不起興趣,不過沒有關系。產品思維的提升并不需要過多一板一眼的訓練。就像你走入繁華地段的商場,明明入駐著大差不差的品牌為什么客流量卻有著明顯的不同?是清晰明了的導視路牌?是更為合理的動線規劃?是明亮舒適的燈光統一的裝置風格?用戶體驗是多元的,因此很多時候善于發現身邊各種各樣的體驗細節,便可以擁有較好的產品感知。關于具體的方法,我有兩個方向可供大家參考。
           
          •  
            保持好奇心
          打開手機想想看哪些應用是高頻使用的,同樣的音樂類應用你更習慣用哪個呢,在聯想一下身邊的朋友同事在聽音樂這件事情上更喜歡哪個應用呢。橫向對比一下便可發現,雖然是同類型的產品但在體驗細節上其實有很多門道可以考究?;蛘吣闶欠窳粢膺^最新出現的產品和剛剛更新的功能?為什么要有這樣那樣的改版?用戶的反饋是怎樣的?
          刨根問底多問一步為什么,而不是將自己禁錮在工作范圍中的一畝三分地,在不經意之間,其實你已經邁出了第一步。
          •  
            知識整理與沉淀
          如果你還有多余一些的精力,不妨進行更深入的學習。不過好消息是,你想要學習的很多技術都可以在網絡上輕松找到。定期翻看設計平臺分享,相關短視頻頻道,公眾號文章,可以讓你探索更深入更廣闊的知識。不過先別急著開始,走馬觀花的閱讀往往并不會留下什么印記,試著整理這些碎片知識并總結收獲和心得。不要急于閱讀量收藏量而是爭取收獲更多自己的理解才尤為關鍵。
           
          PS:關于這部分我之后也會有更多內容的分享,多多關注嘍,謝謝各位啦。
           
          3.3 啰啰嗦嗦寫在最后
          在工作的第二年,我開始感到枯燥和厭煩。很多次面對頻繁緊急加塞的產品需求和一頭霧水的業務指標,我時常情緒激動的和當時的組長抱怨吐苦水,但由于人員緊張,并沒有什么實質的改變。后來的一段日子我試著躲避,覺得做好分內的任務就得了,每天出幾版方案到時候由著他們定奪吧。就這樣又過了一段時間,從前得枯燥和厭煩變本加厲,而我好像游離在各個環節之中,漸漸我的狀態變得很差,每天的工作毫無成就感可言,我開始認真的思考,究竟為什么會這樣。
          事情的轉機出現在不久之后組里來了新的伙伴,一方面分擔了很多任務壓力,另一方面由于是剛剛畢業的職場新人,很多工作細節都需要幫他快速上手。也在這期間我發現了自己的浮躁和心急,我試著系統的總結過往的經驗和思考,在這個過程中我開始和產品以及前端的伙伴更多的交流和請教。在找不到思路的時候試著切換到其他視角看待問題,去刨根問底無數個為什么,竟發現不知不覺中一切似乎都往積極的方向改變了。
          或許我的想法與你也會有所偏頗,不過沒有關系,每當觀點不一致的時候也意味著我又發現了一個新的視角。不同的鏈接使得我們不斷的發現和探索,正如那句話說沒有人是一座孤島。
          在這里我非常期待與更多的優秀前輩交流,也很十分榮幸為后輩提供一些思路和幫助。
           
           


          作者:Weiweiwei_Alita
          鏈接:https://www.zcool.com.cn/article/ZMTYxOTYwMA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          B端數據可視化設計經驗分享第四彈:圖表設計

          前端達人

          歡迎小伙伴們收看《B端數據可視化設計經驗分享第四彈:圖表設計》,本節內容將帶領小伙伴們從零開始認識圖表,了解圖表在數據可視化中的作用,圖表的構成,不同圖形可以可視化哪些類型的數據等等。希望大家看完后能對圖表有個相對完整的認知,在以后的工作中可以得心應手。
          一、什么是圖表?
          大家對圖表一定不陌生,圖表(chart)就是一種通過圖形化的方式呈現和分析數據的工具,就是
          將表格中的數據進行二次加工,將復雜的業務數據轉化為更加直觀的、有趨勢性、有時間線、空間性的圖形數據
          ,協助用戶根據數據變動而變更相關決策,最終以實現降本提效的目的。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          不同部門或者角色在公司中會需要各種類型的數據信息,以支持其業務運營和領導層決策需求。這些數據信息的準確性和及時性對于公司的發展和競爭優勢至關重要。
          產品部門關注的主要是用戶行為數據、收入數據、用戶量數據;運營部門關注用戶活躍度數據、營銷效果數據和用戶反饋數據;技術部門關注系統運行數據、技術指標數據;用戶增長部門關注用戶生命周期數據等。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          二、一個優秀圖表設計的標準是什么?
          要看一個圖表是否優秀,主要看它是否符合GLAD原則。GLAD原則是一個在數據可視化設計中常用來確保圖表質量和有效性的方法論,它主要包括以下四個要素:
          GLAD原則
          GLAD原則
           
           
          G原則:優質數據和洞察
          G原則是指Good Data and Insight。G原則在探索性數據分析過程中著重提升圖表的商業價值,G原則的關鍵是“有價值的商業信息”,這一點就要求在準備數據的時候,應該剔除那些商業分析價值不大的部分,而主要留下的是有高價值密度的信息。除了要求有高價值的信息之外,還需要有比較好的Insight,也就是能洞察數據中的高價值信息,并以較為通俗易懂的形式在圖表中表達出來。
          優化前
          優化前
           
          例圖點評:雖然圖表本身看上去好像并沒什么問題,圖形選擇的也對、顏色搭配也得體,讀者也能理解圖本身要表達的意思。但是,
          沒有商業價值,即我能看出茅臺拿鐵賣的最好,然后呢?這是哪個階段的數據?不知道。有沒有持續的表現數據?也不知道。
          優化后
          優化后
           
          例圖點評:修改后,從數據中提煉出更有價值的商業數據,在時間維度和空間維度都有體現,簡潔明了的同時,也具有商業參考價值。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          L原則:更少的視覺噪音
          L原則是指Less Noise。簡單說就是視覺降噪。
          B端產品是高度商業化的產品,有用有效遠大于好看,
          這要求B端設計師對藝術的追求要適可而止,商業數據分析不是追求藝術造詣,不是做一張海報去吸引人的眼球,而是提供商業價值并能快速讓人理解。過于酷炫、花哨、浮夸的修飾并不會給圖表帶來任何附加值,反而會增加讀者的閱讀負擔。
          例圖1
          例圖1
           
          例圖點評:修改前,有些國家由于人口稀少,導致相關數據也非常小,難以在圖表中展示,造成整個圖表花里胡哨且復雜。修改后,把過小數據的選項折疊為“其他”,默認顯示主要幾個較大國家的數據,當點擊“其他”圖例的時候,再顯示詳細的數據信息,使數據展示更具有側重點。
          例圖2
          例圖2
           
          例圖點評:圖例2是dribbble上的圖表作品,左側是K線圖,右側是柱狀圖,它們的問題在于花里胡哨,卻缺少必要的刻度,形式大于內容,過于追求好看的反面案例。
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          A原則:準確的表達
          A原則是指Accurate Expression。通俗講,就是要根據不同的數據類型和不同的商業目的,采用正確的、適合的圖表類型,如表現占比就要用餅圖、百分比柱形圖,表現趨勢就要用折線圖、面積圖等,且要保證圖例的清晰性、刻度的準確性,避免模棱兩可的圖例和不準確的刻度。
          錯誤例圖
          錯誤例圖
           
          正確例圖
          正確例圖
           
          例圖點評:圖例的本意是對比2023和2024年不同品牌手機的銷售額占比,是基于時間維度的對比圖,但錯誤圖例卻用了兩個餅圖,無法直觀的表現特定品牌在不同年度的銷售額占比的對比情況。正確的圖例則直接用了柱狀對比圖,一目了然。
           
          D原則:明確的標記
          D原則是指Dinstinct Mark。D原則的作用是幫助讀者加快理解信息的速度,它強調
          突出重點
          ,需要把通過數據比較得到的差異部分、體現洞察信息的內容利用明顯不同的顏色、形狀、文字標注等手段進行區別,讓讀者的視線聚焦到那里去。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          三、圖表的構成要素
          圖表是由:標題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素(如水位線、網格線、刻度值、提示信息等)構成,每一個元素都有它存在的意義。不過在實際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內容即可。
          圖表的構成
          圖表的構成
           
           
          3.1標題
          標題即圖表的名字,是圖表必不可少的元素。標題要求簡短明確通俗易懂,視覺上通常需要字體加粗。標題下面也可以跟一行副標題,用作對標題的補充說明。
          •  
            信息類標題:提供理解數據所需的所有信息,回答「何事」、「何地」、「何時」這三個問題
          •  
            描述類標題:突出圖表中顯示的主要數據模式或趨勢,描繪出圖表所要講述的故事
          標題常用的位置有3種,左上、頂居中、底居中。
          標題常用位置
          標題常用位置
           
           
          3.2圖例
          3.2.1圖例的作用:
          •  
            區分不同類別數據的標志
          •  
            開啟/隱藏類別顯示
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          如果圖表中只有一個數據系列,則可以不用顯示圖例。
          常見圖例展現形式
          常見圖例展現形式
           
          3.2.2圖例的位置
          圖例的位置并沒有嚴格限制與要求,常見位置是上、下、右。
          圖例的位置
          圖例的位置
           
          3.2.3圖例的顏色
          在選擇圖例顏色時,不要用色相過于接近的顏色,否則會容易看混或看錯。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          要規范圖例顏色使用,一般分為兩種情況:
          •  
            常用的圖例顏色(顏色本身代表著行業中的某種含義),此類顏色需要是固定色值,無論哪個 chart 中,都是這個顏色;
          •  
            無特殊含義的圖例,可以規范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色,圖例整齊劃一。
          值得一提的是,為了照顧色弱、色盲群體,有些產品會增加無障礙花紋來進行輔助識別,提高辨識度。這種設計很有溫度,畢竟設計以人為本。
          Echarts的無障礙花紋樣式
          Echarts的無障礙花紋樣式
           
           
          3.2.4圖例的數量
          一般來說圖例不要過多,基本要遵循米勒定律,即7±2法則。
          米勒定律
          米勒定律
           
          所以,5個以內是最佳圖例數量。如果遇到比較復雜的圖表,則可以進行嘗試進行圖例合并,如上面講GLAD原則的時候的L原則案例,除了多個圖表可以共用一組圖例(前提是圖例代表的意思一致),還可以把過于零碎的比重要的數據圖例合并為一個“其他”。
          如果圖表中只有一個圖例的話,則可以不顯示。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          3.2.5圖例名稱的長度
          根據不同使用場景,為了更好的展示效果,要給圖例名稱設置一個最大值,超過最大值后省略展示,鼠標hover時再顯示完整名稱。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          3.3坐標軸
          3.3.1什么是坐標軸
          坐標軸是定義域軸(叫什么)和值域軸(有多少)的統稱。由于可視化圖表繪制的數據大部分都有一定的現實意義,因此我們可以根據坐標軸對應的變量是連續數據還是離散數據,將坐標軸分成連續軸、時間軸、分類軸三大類。軸的類型不同在設計處理上也有差異。
          坐標軸分類
          坐標軸分類
           
           
          3.3.2常見坐標軸組合方式
          常見二維圖表坐標軸分為X軸(橫軸)和Y軸(縱軸),多用于表示趨勢、排名、比較的數據結構。常見搭配是1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。
          軸的常見組合方式
          軸的常見組合方式
           
          在三維圖表里,會多一個Z軸。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          3.3.3坐標軸容易被忽略的設計細節
          •  
            軸線一般只考慮是否顯示,例如柱狀圖、折線圖等,在有背景網格線的情況下,會隱藏 y 軸線,條形圖則是隱藏 x 軸線,以達到信息降噪,突出視覺重點的目的。
           
          •  
            軸刻度通常不顯示,只有在肉眼無法定位到某個標簽對應的數據點時,會顯示刻度線,輔助用戶定位,比如折線圖,或抽樣顯示的柱狀圖。
           
          •  
            網格線用于定位數據點的值域范圍,跟隨值域軸的位置單向顯示,柱狀圖采用水平網格,條形圖采用垂直網格。樣式為虛實線的最多,斑馬線由于感知過強,一般不用。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          •  
            軸標題/單位主要用于說明定義域軸、值域軸的數據含義。當可視化圖表標題、圖例、軸標簽已經能充分表達數據含義,無需單獨顯示標題/單位,「如無必要,勿增實體」。
          沒有必要就不要多此一舉
          沒有必要就不要多此一舉
           
           
          •  
            連續軸/時間軸進行適當抽樣。連續軸/時間軸,是由一組前后包含同等差值的等差數列組成,缺少幾個數值也能明顯看出中間的對應關系。當多個標簽在容器內全顯示發生重疊,我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣:當多個標簽在 x 軸無法完全顯示,優先保留首尾標簽,其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數是合數,能被 1 和其本身以外的數整除。如果間隔數為質數,就需要「-1」轉成合數。
             舉個例子:9個標簽,間隔數是 8,能被 2 或4整除,即分成 2 等分和4等分。8個標簽,間隔數是        7,無法等分,需要在間隔數基礎上再「-1」,轉成合數 6 后再等分,此時最后一個標簽顯示在倒      數第二個數據點上。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          •  
            分類軸是由幾組離散數據組成,獨立存在無緊密邏輯關聯。若采用抽樣規則,隱藏一些標簽,用戶對圖表認知就會有困難,違背了數據可視化清晰、有效的設計原則。分類軸最佳處理方式是標簽旋轉 45 度,若 45 度仍顯示不下,繼續旋轉 90 度。如果 90 度還是放不下就要考慮結合圖表交互或反轉圖表。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          •  
            分類軸標簽字段有長有短,長文本標簽直接旋轉不僅影響美觀,而且也不利于用戶閱讀。如果數據量比較少只有 2~4 個,長文本標簽更適合水平展示,顯示不下省略即可;如果數據量比較多,就限定字符數后旋轉。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          3.4圖形數據
          圖形數據是圖表中最為明顯的地方,即圖表的核心元素,如折線圖中的折線,柱狀圖中的柱,餅狀圖中的圓。
          圖形數據的使用規則:
          •  
            邊界要清晰,不可虛化;
          •  
            多個數據同時顯示的時候,要保證每個數據都能清晰的看到,可以采用透明度來保證所有數據的顯示。
          關于圖形的選擇,第四章會著重介紹。
           
          3.5提示信息
          提示信息用來標識出圖表中重要點的數據信息,相當于一個popover浮窗,鼠標指針在圖形中hover的地方通常就是該點的數據信息。需要注意的是:重要信息盡量簡化,只需要展示重要字段。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          3.6水位線
          根據不同產品的使用場景,有的時候會用到閾值,當達到某個閾值后,就會觸發某種聯動效果。這個時候就需要有個水位線了,它起到警示的作用。
          水位線的表現形式有兩種,實線和虛線,顏色的選取則取決于產品的警告級別。
          水位線可以是一個,也可以是多個,視情況而定。
           
          3.7圖表范圍
          圖表范圍就是時間宏變量,用來切換數據的時間區間,如今天、本周(最近7天)、本月(最近30天)、本年等。
           
          四、常見圖形分類及使用場景
          圖形種類多種多樣,個個身懷絕技,而設計師則是作為挑選者。想要做好圖表設計,就需要對不同圖形有較為深入的了解,并對數據進行正確理解后,與之匹配正確的圖形,用可視化的方式將數據表現出來。
          大多數人可能熟悉折線圖、餅狀圖、柱狀圖,但是對其他的圖形可能就不太了解了。本章節將帶大家了解更多的圖形和對應的特性,以便更好的運用和設計。
          常見的圖形可以分為七大類:
          趨勢類、比較類、排名類、占比類、流程類、分布類、關系類。
           
          4.1趨勢類圖形
          趨勢類圖形指的是對一段時間內數據的展示,如單個或多個分類數據之間的趨勢變化和比較。常見的趨勢圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。
          4.1.1折線圖
          折線圖(Line Chart)常用于顯示數據在連續時間上的趨勢變化。通過折線連接各數據點,突出數據的上升或下降趨勢,適合用于時間序列數據的展示。
          折線圖構成
          折線圖構成
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.1.2柱狀圖
          柱狀圖(Basic Column Chart)用于展示多個分類的數據變化和同類別各變量之間的比較。
          柱狀圖構成
          柱狀圖構成
           
          如例圖,既能展示店鋪每天銷售額所對應的數據,也能反映出每天份銷售額的對比情況,并能通過圖形能夠快速了解銷售額最多和最少的日期。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          柱狀圖還有個進階用法,就是折柱混合圖。顧名思義,就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數據進行對比的情景下,如商場物品銷售數據增長或減少,商品價格走勢比較等,它可以非常直觀的展示數據與數據的比擬,這樣就能一眼查看到不同時間段的數據值,通過折線和柱狀的形式展現出來。
          如例圖,通過柱狀圖能看出每個月的銷售數據,而折線圖能體現出利潤率。當鼠標移入對應位置就可以看到詳細數據。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          4.1.3堆積柱狀圖
          堆積柱狀圖(Stacked Bar Chart)是柱狀圖的變種,可以展示兩個或多個數據的變化,以及數據之間的綜合比較情況。
          堆積柱狀圖構成
          堆積柱狀圖構成
           
          如例圖所示,兩個店鋪每月總銷售額用堆積圖展示,在坐標軸上的每個品類都有兩個數據,可以直觀的展示每個品類的數據總量。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.1.4面積圖
          面積圖(Area Chart)是折線圖的變種。與折線圖不同的是,其變量數據和坐標軸之間有顏色田中,這樣可以更加突出數據的變化趨勢,更加直觀的體現量的變化。
          面積圖構成
          面積圖構成
           
          需要注意的是,填充的顏色要有30%左右的透明度,這樣在展示多組數據的時候不會互相遮蓋彼此信息。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.1.5蠟燭圖
          蠟燭圖也叫K線圖(K Chart),常用于股市或期貨市場(近期炒股的同學可能看到K線圖心里會一咯噔)。K線是圍繞開盤價、最高價、最低價、收盤價等反映市場趨勢和價格信息的。
          蠟燭圖構成
          蠟燭圖構成
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.1.6瀑布圖
          瀑布圖也叫階梯圖,顧名思義,瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現隨時間變化的數據,但不同于堆積柱狀圖的是,瀑布圖能夠重點突出數據變化的結果,以強調多個特定數據之間的變化關系。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          4.2比較類圖形
          比較類圖形主要用于兩個或兩個以上的類別數據進行比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。
          4.2.1柱狀圖
          這里的柱狀圖與前面講的柱狀圖的區別在于X軸是表現類別的,前面例圖的X軸是表現時間的。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.2.2分組柱狀圖
          分組柱狀圖(Grouped Bar Chart)是柱狀圖的延伸,它可以在同一數軸上展示各個分類下不同分組的數據情況。如例圖為三家企業在產研部、設計部、商務部的人數對比情況,由此可以清晰的看出企業丙設計部人數最少,商務部人數最多的結論。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.2.3氣泡圖
          氣泡圖(Bubble Chart)是是散點圖的變體,由卡迪爾坐標系(直角坐標系)和大小不一的圓組成,通常每一個氣泡都代表著一組三個維度的數據。其中兩個決定了氣泡在笛卡爾坐標系中的位置(即x,y軸上的值),另外一個則通過氣泡的大小來表示。
          氣泡圖構成
          氣泡圖構成
           
          如例圖,x軸表示季度,y軸表示銷售額,氣泡大小代表產品所占全年銷售額百分比。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.2.4多條折線圖
          多條折線圖除了可以表示數據隨時間的變化趨勢,還可以展示多組數據的對比情況。如例圖所示,圖為某app經營情況的分析,在時間維度上對比下載量、注冊量、成交量三組數據及變化趨勢。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.2.5子彈圖
          子彈圖(Bullet Graph)顧名思義,就是像子彈發射軌道的圖表。它的數據展示類似儀表盤,優勢在于可以表達豐富的數據信息,且占用的空間相對較小。子彈圖的數據值是需要提前設計好的。
          子彈圖構成
          子彈圖構成
           
          如例圖所示,差、良、優和目標值、實際值都是作為動態數據呈現的。相較于餅圖,子彈圖可以更高效的傳遞信息。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          4.3排名類圖形
          排名圖形可以為分類數據進行排排坐,它可以直觀的展示最大值和最小值。它的特點是“有序”,數值往往是從高到底依次排列,類似榜單。
          4.3.1有序條形圖
          有序條形圖主要用于展示各個分類的數據排名,它是最常用的排名圖形,因為是線性結構,對于微小數據間的對比會有很好的易讀性。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.3.2有序柱狀圖
          有序柱狀圖和有序條形圖一樣,都可以表現數據的排名情況。區別在于一個是橫向對比圖,一個是縱向對比圖。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.4占比類圖形
          占比圖形是大家最常見的圖形了,主要用于表現分類數據占整體的
          百分比情況
          。常見的圖形有餅圖、環形圖、堆積面積圖、矩形樹圖、旭日圖等。
          4.4.1餅圖
          餅圖(Pie Chart)是展示占比數據最最直觀的圖形了,它是通過餅塊的大小來直觀的表示分類的占比。但是餅圖也有一定局限性,即當占比數值比較接近或者占比分類比較多時,在視覺上就不太容易分辨各個類別的占比情況。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.4.2環形圖
          環形圖(Donut Chart)的作用和餅圖一樣,但是環形圖的特點是中間區域是空的,所以視覺表現上比餅圖要弱一些,中間空心區域還可以用來放標題、圖標、數據等。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.4.3堆積面積圖
          堆積面積圖(Stacked Area Chart)就是疊加數據,不同顏色之間的數據并沒有疊加關系,它的整體色塊面積是數據總量,不同的分類數據可展示不同的占比情況。如例圖,不僅可以展示全球能源消耗總量,切換百分比模式還能展示不同國家消耗能源的占比情況。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.4.4矩形樹圖
          矩形樹圖(Treemap)由馬里蘭大學教授Ben Shneiderman于上個世紀90年代提出,起初是為了找到一種有效了解磁盤空間使用情況的方法。 矩形樹圖適合展現具有層級關系的數據,能夠直觀體現同級之間的比較。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          矩形樹圖的好處在于,相比起傳統的樹形結構圖,矩形樹圖能更有效得利用空間,并且擁有展示占比的功能。矩形樹圖的缺點在于,當分類占比太小的時候文本會變得很難排布。相比起分叉樹圖,矩形樹圖的樹形數據結構表達的不夠直觀、明確。
          4.4.5旭日圖
          旭日圖(Sunburst Chart)是一種現代餅圖,它超越傳統的餅圖和環圖,能表達清晰的層級和歸屬關系,以父子層次結構來顯示數據構成情況。旭日圖中,離遠點越近表示級別越高,相鄰兩層中,是內層包含外層的關系。
          如例圖,對醫院進行看病、掛號、取藥的流程,用旭日圖呈現。比如取藥是等號、排隊、拿藥的父級,其中等號占取藥的比重最大。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.5流程類圖形
          流程類圖形用來顯示流程流轉和流程流量。一般流程都會呈現出多個環節,每個環節之間會有相應的流量關系,這類圖形可以很好的表示這些關系。常見的流程類圖形有漏斗圖和桑基圖。
          4.5.1漏斗圖
          漏斗圖(Funnel Chart)適用于業務流程
          比較規范
          、
          周期長
          、
          環節多
          流程單向分析,通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節,進而做出決策。漏斗圖用梯形面積表示某個環節業務量與上一個環節之間的差異。漏斗圖
          從上到下
          ,有邏輯上的順序關系,表現了隨著業務流程的推進業務目標完成的情況。
          漏斗圖總是開始于一個100%的數量,結束于一個較小的數量。在開始和結束之間由N個流程環節組成。每個環節用一個梯形來表示,梯形的上底寬度表示當前環節的輸入情況,梯形的下底寬度表示當前環節的輸出情況,上底與下底之間的差值形象的表現了在當前環節業務量的減小量,當前梯形邊的斜率表現了當前環節的減小率。 通過給不同的環節標以不同的顏色,可以幫助用戶更好的區分各個環節之間的差異。漏斗圖的所有環節的流量都應該使用同一個度量。
          漏斗圖構成
          漏斗圖構成
           
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.5.2?;鶊D
          桑基圖 (Sankey Diagram),是一種特定類型的流圖,用于描述一組值到另一組值的流向。因為首次使用它的人是一名叫Sankey的愛爾蘭土木工程師,所以就叫?;鶊D。
          ?;鶊D通常應用于能源、材料成分、金融等數據的可視化分析。
          ?;鶊D的構成
          ?;鶊D的構成
           
          如例圖所示,可以清晰的看到,從搜索框直接搜索進入酒店詳情頁的流量是最大的。充分說明了搜索是剛需。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
           
          4.6分布類圖形
          分布圖形主要用于展示每個數值在數據集中出現的頻次和數量,常見類型有散點圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等
          4.6.1散點圖
          散點圖Scatter Chart,也叫 X-Y 圖,它將所有的數據以點的形式展現在笛卡爾坐標系上,以顯示變量之間的相互影響程度,點的位置由變量的數值決定。
          例圖展示的是AB兩國男性的身高和體重數據,通過散點圖中的數據點分布情況可看出,B國男性的身高遠大于A國。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          4.6.2氣泡圖
          前面4.2.3里講過單維度數據的氣泡圖,這里是多維度的氣泡圖案例。如例圖所示,圖中展示了5個維度的數據,氣泡的代表地區類別,氣泡的大小代表人口總數,氣泡顏色代表國家類別,X軸代表人均國內生產總值,Y軸代表人均壽命。
          B端數據可視化設計經驗分享第四彈:圖表設計
           
           
          需要注意的是,氣泡圖的數據大小容量有限,氣泡太多會使圖表難以閱讀。但是可以通過增加一些交互行為彌補:隱藏一些信息,當鼠標點擊或者懸浮時顯示,或者添加一個選項用于重組或者過濾分組類別。另外,氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因為如果是基于半徑或者直徑的話,圓的大小不僅會呈指數級變化,而且還會導致視覺誤差。
           
          4.6.3熱力圖
          熱力圖就是使用冷色到暖色的不同顏色表示數據從大到小的權重,或用同色系顏色的深淺來表示數據的多少。熱力圖可以在坐標軸上呈現數據的大小分布,也可以在地圖或圖片上使用。
           
           
           


          作者:MoeDesigner
          鏈接:https://www.zcool.com.cn/article/ZMTYxOTU3Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          這些包裝技巧,簡單又出效果,不看一會就刪了!

          前端達人

          最近ui課學員開始做結課作業,在給大家批作業的時候,發現很多同學對于包裝審美還是差一些,課上給大家實操了很多案例,今天給大家分享幾個,比如一組的這塊需求分析,包裝的就不太行:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          有點太隨意了,包括文字的排版,還有標題前面的兩個圓圈:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          如果我來包裝的話,一定要加點修飾,不能只是文字,比如加點圖標或者加點卡片,我可以先把卡片加上,這樣會更加有聚焦的感覺:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          這時候我們可以想辦法加點顏色區分,比如用產品的主色:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          然后可以再給圓圈里面加點圖標,或者修飾元素,因為一組同學已經有了一些質感圖標的繪制,直接加上就可以了:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          然后再加上標題:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          我們來對比下第一版和優化后的效果:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          這里面其實差的僅僅只是一點點包裝審美和用心的態度,技法層面沒什么門檻,只有兩個質感圖標,還都是一組同學自己畫的!
          再舉一個1組同學的例子,他們在展示圖表的時候,效果是這樣的:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          如果面試官用手機看你的作品,能看清楚啥呀,所以如果你覺得自己的作品做的還不錯,一定要學會放大展示局部,比如我們這樣優化一下:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          是不是比剛才更加簡潔大氣?
          所以大家一定要記住,有優秀的東西,一定要拿出來放大展示,我們看看3組同學的展示方式,就優秀很多:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          再看5組的一個案例,這張圖:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          啥問題?是不是太空了,主次也不清晰,左上角的logo快比頁面還重了,所以我們一定要先解決畫面主次的問題,先把界面變大變飽滿:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          這時候可以再優化一下左側文案的排版,稍微有點空曠:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          如果覺得層次還是不夠,可以把底色融入一個黑圈:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          這樣的話,把上面黑色的圖標頁,銜接在一起,就會好很多了:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          這是不是比最開始那頁的包裝強太多了:
          這些包裝技巧,簡單又出效果,不看一會就刪了!
           
           
          所以大家在作品包裝展示的時候,一定要注意這些細節,而且是非常細致的細節,有時候真的就是差一點點,感覺就不一樣了!
          希望今天分享的這幾個包裝小案例,大家可以有所啟發,后面我會經常改ui課同學的作業,尤其是這種細節上的改動,讓大家更好的做出精致作品!
          加油,兄弟們!
           

          藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計APP界面設計、圖標定制用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

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

          銀行金融軟件UI界面設計、能源及監控軟件UI界面設計氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計航天軍工軟件UI界面設計、醫療行業軟件UI界面設計教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發



          作者:菜心輕量文
          鏈接:https://www.zcool.com.cn/article/ZMTYyMDA3Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          B端設計九大精髓

          前端達人

          五一期間,我閱讀了一本設計界的寶典——《B端產品設計精髓》,它系統地向我展示了B端產品設計的世界,我被其豐富的內容和深入淺出的講解深深吸引,每一個章節都像是一扇窗,讓我窺見了B端設計的精彩和復雜,現在我迫不及待地想要把這份感想、收獲以及啟發分享給大家;我相信這些寶貴的知識能夠幫助每一位對B端產品設計感興趣的朋友,就像它幫助了我一樣。
          B端設計九大精髓
           
           
           
           
          分享目錄
          一、B端產品的定義
          二、B端產品出現的背景
          三、B端產品設計的目標
          四、B端產品面對不同場景時的兩個注意事項
          五、設計一個優秀B端產品的四大要素
          六、B端產品中的六個一致性設計規范
          七、B端表單設計的兩個原則及12個思考點
          八、常見的五個B端類型產品
          九、B端產品中的四個幫助系統
           
           
           
          一、B端產品的定義
           
          B端產品本質上就是營造、設計一個高效的、安全的、便捷的“用戶使用過程”,幫助用戶完成在特定場景下的一系列任務目標。它解決了信息如何在系統內、系統間,以及人與系統間,進行有效、高效的生產、組織、呈現和流動的問題。
           
          B端產品,它不只是冰冷的軟件或系統,而是一把開啟高效、安全、便捷體驗的鑰匙。它精心設計了每一個用戶旅程,確保在各種特定場景下,用戶都能輕松地達成他們的目標,仿佛有一個無形的助手在默默支持。 在這個信息如海的時代,B端產品更是扮演著指揮官的角色,它智慧地組織和管理信息,確保數據在系統內部、不同系統之間,以及人與系統之間的流動,既高效又有序,極大地提升了我們的工作效率和決策質量。
           
           
           
          二、B端產品出現的背景
           
          B端設計九大精髓
           
           
           
           
          1、企業電算化
           
          想象一下,在古老的賬房里,算盤的聲音此起彼伏。但隨著1946年電子計算機的誕生,這一切都被改寫。這臺由美國軍方定制的‘電子數字積分計算機’,不僅計算著復雜的彈道,更預示著一個新時代的到來——電子計算機時代。 中國雖然起步較晚,但在20世紀80年代,我們開始擁抱這一變革,并在90年代迅速普及。這不僅僅是技術的飛躍,更是企業管理方式的一次革命。
           
          會計電算化,就是將繁瑣的手工記賬工作交給了聰明的計算機。它不僅提高了會計工作的準確性和效率,還讓會計人員能夠從數字的海洋中解放出來,專注于更有價值的財務分析和決策。這是一次從手工到智能的巨大跨越,也是我們邁向現代化管理的重要一步。
           
           
          2、企業信息化
           
          企業信息化,就像是為企業的運營裝上了智能的大腦和靈活的神經。它拆除了企業內部信息孤島的無形墻,建立起一個暢通無阻的信息高速公路,讓數據在各個部門、組織、業務之間自由流動。 這種無縫的信息對接,讓企業各部門的協作更加緊密,就像樂隊中的樂器,雖然各自獨立,卻能合奏出和諧的樂章。企業信息化的最終目標,就是通過優化資源配置、提升業務管理、實現數據的互聯互通,來提高企業的整體合作效率,讓企業在激烈的市場競爭中,能夠更加靈活、高效地應對各種挑戰。
           
          比方說我們日常的的OA辦公系統,一個出差報銷的申請正常都會有五六個流程,每個流程都對應一個負責人,如果要是內部沒有這種OA的辦公系統,申請人要挨個挨個去找相關的人簽字審批,會占用大量的上班時間,也給員工帶來了很多的不方便,有了OA系統,申請人只需要把相關的資料一次性提交到系統,然后等待相關的審批通過即可。
           
           
          3、企業數字化
           
          在移動互聯網、大數據等新興技術的推動下,企業正站在數字化轉型的風口浪尖。這不僅是一次技術的升級,更是一場深刻的管理革命。面對技術的浪潮,企業沒有選擇,只能乘風破浪,進行數字化轉型。 
           
          未來的企業將分為兩種:一種是從出生就帶有數字化基因的數字原生企業,它們在水中自由穿梭;另一種是通過數字化轉型重生的企業,它們浴火重生,煥發出新的活力。 而現代的B端產品,不僅要服務于產品的直接用戶,還要像一位社交能手,連接更廣泛的社會網絡,滿足外部用戶和非使用者的信息傳輸需求,打破信息孤島,實現信息的自由流通。這不僅是B端產品的挑戰,更是它們在數字化時代中的重要使命。
           
           
           
          三、B端產品設計的目標
           
          在B端產品設計的世界里,追求的是簡潔而不簡單。產品應該像一位貼心的助手,用清晰的任務目標和直觀的界面設計,引導用戶一步步完成工作。它簡化了操作流程,讓工作變得像流水一樣自然順暢。面對復雜任務,它又能提供清晰的指引,確保用戶在每一個關鍵步驟都能得到及時的反饋。
           
          我們知道,在企業中,有這樣一群員工,他們充滿探索精神,渴望解決更深層次的問題。對于這些奮斗者,產品設計不僅要滿足他們的需求,還要激發他們的潛能,讓他們在產品中找到成長和創新的空間。
           
          此外,現代的B端產品不再是孤立的島嶼,而是相互連接的大陸。功能之間的關聯性,信息的穿透力,讓產品成為了促進企業內部協作和信息共享的橋梁。這樣的設計,不僅能夠滿足奮斗者的需求,還能夠提高整個組織的運作效率,讓企業在激烈的市場競爭中保持領先。
           
           
           
          四、B端產品面對不同場景時的兩個注意事項
           
          1、面對專業性高的職業,產品需要嚴格符合職業習慣
           
          例如,我參與設計過的一個項目“能調平臺”,它的目標是打造一個專業人士的得力助手,追求的是為專業人士提供一個他們能夠立即識別和使用的工具。這些工具可能對外行人來說像天書一樣難以理解,但對于專業人士而言,它們就是清晰明了的指令,能夠迅速指導他們完成任務。
           
          B端設計九大精髓
           
           
           
           
          2、對專業性不高的職業,產品需要給予更多的關懷,產品需要淺顯易懂,不那么“專業”反倒更加重要
           
          例如,我們電腦里面自帶的畫圖軟件,它就非常的平易近人,每一個功能模塊的擺放,每一個圖標的設計是任何小白都能理解的方式,降低了普通用戶學習的成本,加速了用戶快速上手使用的時間。
           
          B端設計九大精髓
           
           
           
           
          五、設計一個優秀B端產品的四個要素 
           
          設計一個產品,本質上是設計用戶在一些特定場景、特定目標下的使用過程,是設計一系列分散的或者聚合的服務;用戶不是為了“用產品”而用產品,更不是為了漫無目的的消磨時間,而是通過產品來獲得必要的服務,高效的解決和處理其在業務上、管理上、商業上的問題,幫助他們降低成本,增加效益,最終幫助他們獲得商業上的成功。因此想要做好這個服務,我們需要具備以下幾個優秀的品質。
           
          1、敬畏用戶,理解用戶
          用戶永遠是最好的老師,任何一個產品設計師都應該努力抓住各種接近真實用戶的機會,真正理解用戶,挖掘和分析業務場景。
           
           
          1.1、了解用戶工作內容
          了解用戶平時工作的內容、機制、處理方式、完成方式、評估方式以及相關崗位。評估方式尤為重要,因為在某些方面用戶對產品體驗可能有特殊的要求。
           
          1.2、了解用戶工作場景
          了解用戶何時工作、在哪里工作以及怎么工作;尤其要搞清楚用戶怎么工作,并且要了解用戶工作的困難、壓力、強度、周期等重要指標。例如,收銀員大部分是收銀工作,每隔一段時間,就處于高壓、高強度的工作狀態。
           
          “一個場景=若干人物角色+若干用戶情境+用戶體驗地圖+……”,把可能出現的角色與情境進行搭配,形成若干個“真實”場景的組合,是設計之旅的開始;理解需求和對接設計不再只考慮功能點,更多的面向用戶而非面向系統進行設計,從一個個場景出發,思考和完善產品的設計,使這些場景對應的需求得到滿足。
           
          2.積極溝通
          在工作中多多溝通,把產品經理當成自己最好的伙伴,優秀的B端產品經理往往都是一個領域或者行業的專家,有著很深的業務背景和大量的實踐經驗,對相應業務的發展有著很深刻的理解和洞察,對產品的客戶、用戶都有著很深入的了解,是B端產品設計師最好的老師。
           
          3、具備同理心
          描述一個場景,本質上是以某種代入感的形式,使應用場景的人產生強烈的參與感,從而理解真實用戶使用產品完成一個任務目標的真實感覺,產生相應的同理心,這是產品設計中設計師較高境界的追求,是一種深層次的用戶研究方法,也是實現卓越用戶體驗的關鍵。
           
          4、積極進行競品分析
          在創新的道路上,盲目沖刺可能會讓我們迷失方向,甚至跌入陷阱。因此,盡早開展競品分析,就像是在出發前仔細研究地圖,它能夠幫助我們規避風險,找到通往成功的捷徑。通過深入了解競爭對手的產品,我們不僅能夠學習他們的長處,還能夠洞察他們的短板,從而為我們的產品定位和設計提供寶貴的參考。 正如古語所說:“知己知彼,百戰不殆”。在激烈的市場競爭中,只有深入了解自己和對手,才能在每一次對決中占據優勢。競品分析,就是我們在這場沒有硝煙的戰爭中的偵察兵,它能夠幫助我們洞察市場動態,把握用戶需求,從而制定出更加精準有效的產品策略。
           
           
          六、B端產品中的六個一致性規范
          一個好的設計規范有助于提高產品的一致性、減少錯誤出現的可能性、提高開發和實施效率、減少用戶學習成本、方便后期追溯檢驗等。同時,也能統一向用戶、客戶傳遞一致的印象,形成一定的品牌價值。
           
          1、一致性的價值
          一致性有很多眾所周知的好處,如降低認知成本、減少用戶學習時間、提高工作效率、提升研發效率等。
           
          2、產品一致性應該包含以下幾點:
           
          (1) 
          布局一致性:
          保持某一種類似的結構,因為新的結構變化會讓用戶思考,而排列規則的順序能減輕用戶思考與記憶的負擔。
          (2) 
          色彩一致性:
          產品所使用的主要色調應該是統一的,用來傳遞一致的品牌印象和風格,而功能性色彩也能形成固定的規則,方便記憶與識別。
          (3)
           操作一致性:
          降低用戶的學習成本,提高開發效率 。
          (4) 
          反饋一致性:
          系統對同一種功能和同類信息傳遞的呈現方式一致,使得用戶與系統的溝通更加順暢。
          (5)
           文字一致性:
          產品中呈現的文字大小、顏色、布局、語言風格等都應該是一致的。
          (6) 
          聲音一致性:
          產品中各種操作過程的聲音,正向的如確定等提示聲,負向的如警告等提示聲。
           
          聯想電腦管家在優化加速、垃圾清理、安全中心、硬件驅動四個模塊中都保持了相同的畫風,布局、文字和反饋方式也都一樣,很好的體現了產品的一致性。
           
          B端設計九大精髓
           
           
           
           
          七、B端表單設計的兩個原則及12個思考點
           
          B端業務以場景的多樣性和復雜性著稱,但也是有規律可循的,經過長時間的實戰,我發現大量的業務都是以“表單+流程”的方式進行處理的。這些表單和流程的設計都有著極強的公共屬性,這些公共屬性進行梳理之后,可以形成一些公共的設計模塊,不僅節約了設計和開發的成本,還讓系統在操作、布局等上的一致性大大的增強,便于用戶理解和操作,當然,隨著智能化程度的提升,這些經典的設計模式也在不斷的發生著變化,甚至可能消失。
           
          1、表單設計的原則
           
          1.1 表單信息力求簡約
          表單不能設計的過于繁復,要本著以用戶實際工作為中心的原則,妥善分組、分區,經過分組、分區后的功能信息會使操作變得更有邏輯性,并根據角色、權限、狀態以及使用場景來決定具體的顯示方式,默認將不重要的信息隱藏起來,盡量給用戶展示一個簡單清晰的信息結構。
           
          搜狗輸入法在輸入法顯示器的文字旁邊有個問號的小圖標,鼠標觸碰到這個圖標就可以看到對輸入法顯示器一個完整的解釋,看完之后這段注釋語又隱藏了起來,讓界面看起來更加的簡潔。
           
          B端設計九大精髓
           
           
           
          1.2 要兼顧多角色多場景
          在企業日常生活中,幾乎每個員工都會跟表單打交道,為了給不同目的的用戶在查看和處理表單時有更好的體驗,我們需要使用“場景驅動的設計”方法,根據不同角色、不同場景,設計不同的方案。
           
          例如,我日常工作中遇到的一個項目,它在同一個頁面需要對IP、端口、地址映射進行顆粒非常精準的搜索以及新增的需求,基于這樣的需求,我對每個功能點都做了分門別類的設計搜索及新增功能,這樣就圓滿的滿足了業務的需求;在B端的表格設計中,它更多的是要滿足多場景多角色下的功能需求,而不是為了視覺的彰顯,在這個模塊的設計,功能的實現、頁面信息的清晰是第一位的。
           
          B端設計九大精髓
           
           
           
           
          2、表單設計的12個思考點 
           
          B端設計九大精髓
           
           
           
          (1) 需要展示的字段還可以更少嗎?界面可以更簡單嗎?
          (2) 用戶光靠自己,是否能順利填寫單據?
          (3) 怎樣才能讓用戶填寫更少的信息?
          (4) 是否能幫助用戶避免大量機械化的錄入?
          (5) 當無法避免大量錄入時,怎樣幫用戶提高錄入效率?
          (6) 用戶是否頻繁在多種錄入方式間切換?
          (7) 怎樣幫助用戶盡量少犯錯,并在出錯的時候盡快糾正錯誤?
          (8) 哪些角色在使用同一張表單?
          (9) 在什么場景下使用表單?
          (10) 他們主要完成哪些任務?
          (11) 他們關心哪些信息?使用哪些功能?
          (12) 他們在使用中有哪些特殊需求?
           
           
           
          八、常見的五個B端類型產品
           
          1、ERP系統
           
          1.1 ERP系統的定義和功能
          ERP是英文Enterprise ResourcePlanning的縮寫,即企業資源計劃。在當今復雜多變的商業環境中,企業需要一個能夠全面掌控資源的智能系統,它就是ERP系統。它不僅涵蓋了財務管理、供應鏈管理、銷售與市場、客戶服務等核心功能,還包括了制造管理、庫存管理、人力資源等關鍵領域,為企業打造了一個無縫整合的管理平臺。
           
          ERP系統的應用范圍廣泛,它不僅服務于生產制造業,也廣泛應用于金融投資、質量管理、運輸管理、項目管理等領域。它通過整合企業的所有資源,幫助企業在各個環節實現優化管理,提升運營效率,降低成本,增強企業的市場競爭力。
           
          ERP系統,就像是企業的指揮官,它用智慧和策略,協調著企業的每一個部門,確保企業的資源得到最有效的利用。在ERP系統的輔助下,企業能夠更加靈活地應對市場變化,把握每一個商機,實現持續的發展和創新。
           
          這是我體驗過的一個項目管理的系統平臺,在這里面可以清晰的看到一個項目的搭建到完工的整個流程以及它的進展,對于管理者來說,這是一個很好的項目管控平臺。
           
          B端設計九大精髓
           
           
           
           
          2、CRM系統
           
          2.1 CRM系統的定義和功能 
           
          CRM是英文Customer RelationshipManaqement的簡寫,即客戶關系管理,通過滿足客戶個性化的需要、提高客戶忠誠度,實現縮短銷售周期降低銷售成本、增加收入、拓展市場全面提升企業贏利能力和競爭能力為目的。
           
          客戶,是企業最寶貴的資產。而CRM系統,就是企業守護和增值這份資產的智能管家。它通過細致入微的客戶關系管理,幫助企業傾聽客戶的聲音,記住客戶的喜好,從而建立起穩固而長久的客戶關系。
           
          CRM系統的功能強大而全面,它不僅能夠維護老客戶,尋找新客戶,避免客戶資源的流失,還能提高客戶的忠誠度和滿意度,降低營銷成本,提高銷售效率。它幫助企業管理客戶的每一個細節,從企業信息到聯系方式,從網站互動到每一次服務的反饋,都記錄得清清楚楚,為企業提供了一個全面、精準的客戶視圖。
           
          在這個競爭激烈的市場中,CRM系統是企業贏得客戶、保持競爭力的利器。它讓企業的服務更加貼心,讓客戶的微笑更加燦爛,幫助企業在商海中乘風破浪,勇往直前。
           
          下面就是曾經自己設計過的一個客戶關系的B端后端界面,這個是給海外客戶設計的,它很好解決了公司對客戶信息模糊不清的痛點,通過這個產品,可以把用戶的信息可視化,并且還能很好的觀察用戶的使用訴求以及使用頻率,給公司理解用戶分析用戶提供了很好數據支撐。
           
          B端設計九大精髓
           
           
           
           
          3、OA系統
           
          3.1 OA系統的定義和功能
           
          OA是Office Automation的縮寫,即辦公自動化,是將現代化辦公和計算機網絡功能結合起來的一種新型的辦公方式。
           
          在快節奏的商業世界中,OA系統如同一位高效的辦公室管家,用現代化的信息技術將日常辦公管理化繁為簡。它不僅管理著工作流程、發文審批,還負責傳遞公司新聞、公告,同時確保日程安排得井井有條,讓團隊溝通變得即時而順暢。
           
          OA系統的功能遠不止于此,它還涵蓋了人員考勤、知識管理、企業論壇等多元化模塊,為企業提供了一個全面、一體化的辦公平臺。隨著企業對協同工作和信息共享的需求日益增長,OA系統已經成為企業管理升級的重要推手,尤其是對于大型企業而言,它更是確保組織內部高效協同、信息流通的核心系統。
           
          這個是我給某科技廳設計的一個OA系統界面,現在政府也越來越追求辦公的自動化,通過設計可視化的平臺希望給需要申請相關科技服務的人才以便捷。
           
          B端設計九大精髓
           
           
           
           
          4、 HR系統
           
          4.1 HR系統的定義和功能
           
          HR是Human Resource的英文縮寫即人力資源。HR系統是為企業持續地提升人力資源管理水平和能力而出現的信息化支撐平臺。
           
          在這個競爭激烈的商業時代,人才是企業最寶貴的資產。而HR系統,就是企業守護和增值這份資產的得力助手。它集成了從組織管理到人事信息,從招聘選拔到培訓發展,從考勤監督到績效評估,再到福利薪酬等一系列功能模塊,為企業提供了一個全面、高效的人力資源管理平臺。
           
          通過HR系統,人事管理專員可以輕松維護員工資料、部門架構和人員分組,及時更新員工異動信息,從而幫助企業降低人力成本,提高工作效率。這不僅僅是一個系統,更是一個企業人力資源管理的強大引擎,幫助企業在人才競爭中占據優勢,推動企業持續成長和發展。
           
          這是我體驗過的一個HR系統界面,他把日常的考勤、離職流程、內部調動、培訓申請等流程辦理都集合在了這里,大大提高了企業的效率,也大大方便了員工流程的申請,不需要一個流程自己親自跑很多趟。
           
          B端設計九大精髓
           
           
           
           
          5、BI系統
          5.1 BI系統的定義和功能
           
          Bl是英文BusinessIntelligence縮寫,Bl就是商業智能系統,將企業數據轉化為有用的信息,輔助業務經營決策。
           
          BI系統就像是企業的智慧大腦,它能夠將海量的企業數據轉化為清晰的信息,幫助企業洞察業務的每一個角落。無論是讀取數據、深入分析,還是將結果以直觀的方式展示出來,BI系統都能輕松應對,讓決策者能夠基于事實,做出更加精準的業務決策
           
          云電腦運維服務系統是我設計過的一個后臺系統,專門用來記錄云電腦專家的一個運營情況,能時刻獲取每個地市云電腦的一個安裝量、用戶數量等信息。
           
          B端設計九大精髓
           
           
           
           
          九、B端產品中的四個幫助系統
           
          1、提示(tips) 
          TIPS一般指帶有說明文字的“氣泡”,通常出現在需要被解釋說明的字段、列表的表頭文字、按鈕等位置。TIPS中的文字說明不宜過長。為了不影響用戶操作,TIPS一般在鼠標懸停到相關區域后顯示,鼠標移開即消失。
           
          阿里云盤在打印功能頁面對需要做出解釋的按鈕和圖標旁邊,有設計鼠標懸停功能,當鼠標觸碰到對應的功能點時,頁面會彈出對應的文字解釋和說明,并且文字沒有太長,當鼠標離開,文字又會消失,很好的幫助了用戶理解頁面的信息。
           
          B端設計九大精髓
           
           
           
          2、操作指引 
          操作指引是指在特定場景下,系統對用戶接下來的操作進行的指引。常見的有:新手指引、新上線功能指引、對某功能點的操作引導等。
           
          EV錄屏對于新手用戶,他提前設置了操作指引模塊,幫助新手用戶快速上手,解決了很多朋友不知道如何錄制聲音、如何在線直播、如何錄制視頻、如何上傳視頻等痛點。
           
          B端設計九大精髓
           
           
           
          3、客服
          早期的B端產品,客服是獲取客源的一個渠道,很少提供在線客服;AI技術的出現,AI客服也萌生了,它將用戶常見的問題一一進行回答,大大減少了人工客服的成本。
           
          飛書的客服就是機器人,一個問題過去基本是秒回,及時響應了客戶,省去了高昂的人工成本,快速的響應也提升了用戶體驗。
           
          B端設計九大精髓
           
           
           
           
          4、幫助中心
          幫助中心主要面向兩類用戶角色和場景:一是使用產品的用戶,在遇到某特定業務問題時,可以通過幫助文檔提供的內容自行解決;二是需要全面理解產品的用戶(比如售前人員或培訓人員),為他們提供一個可以全面學習產品的渠道。
           
          百度網盤在產品的右上角有個幫助入口,它提供了一個很全面的幫助文檔,讓對百度網盤陌生的用戶通過閱讀此文檔就能對產品有一個很好的認知。
           
          B端設計九大精髓
           
           
           
           
          總結:
          在設計的廣闊天地里,每一次閱讀都像是點亮了一盞明燈,照亮了我前行的道路。它不僅讓我對設計的原理有了更深刻的理解,還激發了我對那些細微之處的好奇心。正如一位經驗豐富的廚師會通過嘗試不同的食譜和親自烹飪來磨練技藝,設計師也需要將閱讀和實戰經驗相結合,以此來深化自己的設計內功。通過廣泛閱讀,我學會了從不同的角度審視問題,對設計中的每一個小細節都有了更加多維和全面的認識。這樣的過程,就像是在顯微鏡下觀察世界,讓我發現了那些常被忽視的角落里隱藏的寶藏。
           
          本文觀點都為個人理解和總結,不足之處也歡迎大家留言區多多點評指正,大家共同進步!
           
           
           
           
           


          作者:姝斐suphie
          鏈接:https://www.zcool.com.cn/article/ZMTYxOTUzMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          B端基礎 | 52000余字總結 B 端基礎設計知識

          前端達人

          緣起
          最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設計文章的初衷。
           
          慢慢發現其實分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對設計的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
           
          上面扯多了。我們開始今天的內容。今天內容分三部分、第一部分內容總結是對我寫的這個系列文章每一篇文章內容和核心的小總結。第二部分這個系列的文章頁算是告一段落了、下一階段我會做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
           
          1、
          內容總結
          因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結一下讓你盡量一次看完。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          1.1、登陸頁面
           
          最近就在做我們系統的登陸頁面優化?;仡^我會寫一個項目總結給你們看。這里介紹一下B端登陸頁面該怎么去做。其實還挺簡單了。因為現在主流的布局就那幾個。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          登陸頁面:布局分為三種;居左、居右、居中
          頁面元素:導航、登錄框、背景(裝飾元素)、互聯網信息。
          導航
          高度:68px或48px、文字大?。?4(大部分)16(也可以)
          登錄框
          大小:大小尺寸不統一、沒有固定的尺寸??梢愿鶕约汉皖I導的喜好決定。對還有要承載的內容多少。
          登錄方式:掃碼、手機號、賬號、第三方
          標題切換字號:我喜歡用26px(也要其他的16、/18、/20)
          輸入框高度:48px
          按鈕文字和高度:16px、和輸入框高度一直就行。
          背景
          可以是配的插畫(這種最簡單)、一般都是科技風
          底部
          要不就是單純的互聯網信息。要不就是快捷入口、聯系方式什么。這個就不多說了正常排版就行。
           
          1.2、篩選
           
          篩選相對是很簡單的部分把、因為你直接用規范里的組件。雖然不會很優秀、但是剛重要的是不會出什么錯誤。主要是就大廠規范能夠快速的幫你解決問題。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          篩選的意義:定位數據、縮短查詢路徑、數據內容分類
           
          篩選類型:基礎篩選組件(就是我們常見的頁面頂部的篩選)、高級篩選(就是那些需要你定義想一想的篩選部分)
           
          篩選布局:頂部和左側
           
          篩選樣式:平鋪;折疊;Tab篩選;單側選擇;表頭;綜合
           
          1.3、柵格
           
          這里其實還簡單的、首先你要明白柵格在我們的設計里面很重要。你不用當然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          怎么用:直接看ant design、TDesign、阿科desing的規范就行、寫的很清楚。
           
          注意點:不要硬套、我們要根據自己的系統去自己定制。比如我們系統、用的是ant design的框架、但是我們的網格系統是自己定制的。因而我們的邊距不是24px、我們是20px
           
          1.4、顏色
           
          這部分相對來說是我自己的弱項、在寫當時的文章的時候也是收獲頗多的。明白了大廠規范是怎么確定自己色彩設計規范的。也清楚了自己應該怎么去規定自己的設計規范。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業色
           
          配色確定:我一般是找競品、或者優秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數的。
           
          大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定??梢匀タ纯?。我在自己的工作中色彩的應用就參考了ant Design的色彩應用方式定制的。
           
          1.5、字體
           
          字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發展歷史和由來。還有就是如何去設計一款自己的字體。還有后臺字體規范的制定
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          中國文字:這里中國文字的發展歷史、所有字體的產生都是有自己發展的歷史原因的。很有意思。建議你看看、可以當做你喝酒吹水的談資。
           
          字體規范:我們大部分的字體會采用黑體、可讀性強、親和、現代、清晰。
           
          字號:最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數增長規律
           
          行高:通過邏輯得到這樣一個公式:「 行高 = 字號 + n 」,8 作為變量正好同時滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致,總體文字間隙穩定呼吸,行高空間較一致得出計算公式:「line-height = font size+8」
           
          字重(就是字粗):建議使用兩種常規和加粗(在前端里一般就是400和500)
           
          顏色:我是主張帶有色彩傾向的顏色應用的。根據字體樣式的設計原則,制定了簡易好記的透明度數值區間并且將該字色與界面系統的色彩系統結合,文字顯示色彩對比滿足至少1:4.5( AA級別)。且驗證了其中的實用性,共分為亮暗兩種模式,4 個色階。
           
          1.6、ICON(圖標)
           
          你要統一風格成套的去找參考和應用。在我們的系統里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發直接引用。這個是自己累點、但是可以保障實現效果。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          設計原則:準確、簡單、節奏、愉悅。
           
          設計實戰:采用柵格
          我是用的阿里巴巴矢量圖庫的設計規范、因為我要傳到這個平臺應用
           
          ICON分類:交互性圖標、裝飾性圖標、說明性圖標
           
          1.7、按鈕
           
          按鈕我覺得這部分是相對簡單的、也是要做到風格的統一。直接用大廠組件然后根據自己平臺的風格、不如圓角的大小其他的倒是沒什么了。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          常規按鈕:次要按鈕、主要按鈕、文字按鈕、圖標按鈕
           
          按鈕狀態:可用、禁用、加載、懸浮
           
          尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認為尺寸「中」。
           
          樣式:各個規范對按鈕形狀的規范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
           
           
          布局:這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們為什么這么排版。對產品和甲方很有用、哈哈、這是我的秘訣。
           
          1.8、彈窗
           
          后臺彈窗是一個很復雜的內容、但是也是一個相對很好處理的部分。只要你做好規范這部分、簡直就是一點開胃小菜。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          彈窗是一個我頭痛的問題因為不太好規范。但是我還是把這個彈窗系統、在我們的體系中形成了一個小的規范。感謝領導、感謝前段端的龍哥。
           
          我們把前段粗略的分為400px、600、800、1000、最大、廣告。業務里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統一的尺寸。
           
          1.9、表單
           
          什么是表單:我理解表單就是系統為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產品中對我們數據做的增、刪、改、查、驗都可以通過表單完成。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          我們在后臺系統中、大部分的場景都會使用上表單。信息采集呀、編輯數據呀等。在表單設計時要遵循的原則、簡潔明了、清晰高效、適應業務、即時反饋。
           
          表單的構成結構、基本都是由、標簽、域、提示、操作按鈕這四個部分構成的。
           
          表單布局在表單中我們采用多種布局方式。信息分組、內容列表、標簽頁、分步驟。
           
          1.10、表格
           
          B端設計中,對數據瀏覽、操作、過濾、展示是最高效的。這你就不用質疑了。因為結構簡單、精準高效、數據形式豐富。
           
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          表格是用來收集、整理、組織、分析數據的二維矩陣。它由內、外兩部分組成。其中,內部包含表頭、表體、底欄等。外部包含標題、篩選區、操作按鈕區等。
           
          表格的類型:基礎表格、樹形、子表格、交叉表格、圖表表格、卡片表格
           
          表格的樣式:網格型、水平線型、斑馬紋、自由形式
           
          進階的一些知識就是表格數據的優化和表格的交互知識了。想了解去看更詳細的我的文章11表格設計和12表格優化項目實戰。
           
          1.11、大廠規范
           
          如果你是一個小廠B端設計師、剛好沒有自己平臺的設計規范。那就去直接用的場的設計規范。去用沒問題的。大廠那么多的牛逼設計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          在使用大廠的設計規范時然后慢慢的積累自己平臺的設計規范。逐漸的你就會形成一個屬于你們自己平臺業務的高質量設計規范了。
           
          2、計劃
           
          這個基礎系列的文章就這樣寫結束掉吧、希望可以對你的B端設計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設計。
           
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          第一個系列是B端基礎設計的加強版、B端高手。B端高手是會寫我的實戰里是怎么去做的。其實就是我的設計項目復盤。
           
          第二個系列就隨便的去分享一些設計知識。比如哪些什么什么原理呀、什么什么法則呀、在設計里的應用。而且會提出和討論一些設計問題。
           
          3、寫在最后
           
          分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會再次相見。我是KING(國王)
           
          B端基礎 | 52000余字總結 B 端基礎設計知識
           
           
          新的開始見.......
           
          注解:標題的40000余字也好、50000字也好都是說的我這個系列總計的字數、因為想讓你們看到。
           
           
           
           


          作者:彪形大漢pro
          鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          設計原則之一致性

          前端達人

          一、什么是一致性呢?
          二、  為什么一致性很重要呢?
          三、  生活中一致性的案例
          四、  UI設計一致性的體現
          五、  交互設計一致性的體現
          六、  總結
          設計原則之一致性
           
           
          一、什么是一致性呢?
          一致性的字面意思和使用的場景不同代表的含義也會有區別,這里主要使用在UI/UX設計中。
          UI/UX設計中一致性是指在整個應用程序或網站中使用相同的設計元素和模式。它涉及在所有頁面和屏幕上使用相同的視覺語言、布局和交互,以創造一致且直觀的用戶體驗。一致性有助于用戶了解如何瀏覽應用程序或網站,消除困惑和沮喪,并使他們更容易學習和記住如何使用產品。
          設計并非孤立的實踐。它與其他領域交織在一起,其中之一就是心理學。在設計中發揮根本作用的心理學原理是重復定律。
          這一定律的起源可以追溯到 20 世紀早期,當時德國心理學家赫爾曼·艾賓浩斯進行了開創性的研究。他的工作對理解人類記憶具有革命性意義。艾賓浩斯最著名的貢獻是“遺忘曲線”,它表明如果不嘗試保留信息,信息會隨著時間的推移而丟失。然而,他還發現,反復接觸信息會極大地影響我們記憶信息的能力。從本質上講,重復可以強化回憶。
           
          設計原則之一致性
           
           
          艾賓浩斯的重復實驗主要關注學習和記憶的過程,但其影響遠不止于此。這讓人們認識到,重復的元素更容易被記住,從而引導觀眾的注意力和焦點。很明顯,重復可以用來引導行為和理解。
          通過重復顏色、形狀和圖案等特定元素,設計師可以創造一種統一感和節奏感。這種重復還使設計師能夠強調基本元素或信息。
          重復不僅僅是一種設計原則,更是生活的一個基本方面。在自然界中,重復以各種方式體現,從雪花的對稱性到海浪拍打海岸的韻律圖案,從貝殼的螺旋到一年四季的循環。這種自然的重復帶來了節奏、結構和可預測性,創造了一種舒適和熟悉的感覺。
          人類是自然的一部分,天生就能夠識別和響應這些模式。我們的大腦是出色的模式識別機器,我們傾向于認為重復的模式令人感到舒適和熟悉。這種認知特征解釋了為什么設計中的重復模式(無論是在數字界面、實體產品、建筑還是營銷中)會引起我們的共鳴。
          設計原則之一致性
           
           
          二、  為什么一致性很重要?
          在 iOS 的設計指南中,一致性被視為讓設計融入 iOS 生態的關鍵,它幫助用戶在不同應用間建立起一種熟悉感。遵循規范的一致性可以「help your design feel at home in iOS」,保持一致性是為用戶帶來產品愉悅感的重要方式。
          在經典交互設計原則中,「一致性」一直是重要的設計準則。在幾乎可以稱為「設計師必讀」的雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四,原則建議設計者在界面和交互上遵循既定的規則,無論是在應用內部還是跨平臺之間。
          在具體的執行中,內部一致性通常指應用內應當使用統一的視覺風格和交互語言,相同的功能和操作應該在體驗上保持一致。而外部一致性則更強調用戶應該遵循平臺和系統的設計規范,保持用戶在同一平臺不同應用間體驗的相似性。
          一致性在UI/UX(用戶界面/用戶體驗)中非常重要,因為它對于提供良好的用戶體驗和用戶界面的可用性至關重要。下面詳細說明一致性的幾個重要原因:
           
          設計原則之一致性
           
           
          1、  用戶學習曲線:
          一致的UI/UX設計可以降低用戶的學習曲線。當用戶在應用程序或網站中遇到一致的元素、布局和交互方式時,他們可以快速理解并準確預測如何與界面進行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
          2、  提升可用性:
          一致性使用戶界面更加易于使用。當用戶在不同的頁面或功能之間找到相似的設計元素和交互模式時,他們可以輕松地將已有的知識和經驗應用于新的情境中。這種一致性幫助用戶快速完成任務,減少錯誤和迷失,提供更好的導航和流暢的體驗。
          3、  品牌認可度:
          一致的UI/UX設計有助于樹立品牌形象和增強品牌認可度。通過在不同的渠道和平臺上保持一致的設計元素、標識和視覺風格,品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性,從而增加品牌的信任和忠誠度。
          4、  用戶滿意度:
          一致性直接影響用戶的滿意度。當用戶在使用應用程序或網站時感受到一致的設計和交互方式時,他們會感到更加舒適和自信。一致性傳遞了專業和質量的信號,讓用戶感到被關注和重視。這種積極的用戶體驗有助于提升用戶滿意度,并促使他們持續使用和推薦你的產品或服務。
           
          三、  生活中一致性的案例
          設計原則之一致性
           
           
          生活中的案例保持一致性的有很多,
          a、例如紅綠燈,在學習駕照或老師教學時會統一講解紅燈停,綠燈行。
          b、向左向右箭頭符號的使用,在日常生活中都會保持一致。
          c、我們乘坐地鐵時,地鐵的線路圖也會保持一致性,每個站的點大小,文字,到站和未到站以及行駛過的站點都有清晰統一的設計和交互操作。
           
          四、  UI設計一致性的體現
           
          設計原則之一致性
           
           
          1、  顏色
          顏色是一種物理現象和感官體驗,是光波在人眼視網膜上的反射或吸收所形成的視覺效果。
          設計中的顏色選擇代表了一個項目的品牌,例如常見的餓了么藍,美團的黃,京東的紅等等,顏色的一致性有助于營造良好的視覺體驗,強化品牌形象,提升可用性和無障礙性,最終改善用戶的整體交互感受。這對于產品的成功至關重要。在設計時顏色(品牌色)會延續到按鈕,圖標,字體、標簽,背景,banner等模塊使用。
          設計原則之一致性
           
           
          2、  字體
          字體是一種特定的文字樣式,它描述了文字的形狀、大小、粗細、間距等視覺特征。
          字體是設計中非常重要的元素之一,不同類型的字體,字體的粗細,有襯線字體和有襯線字體,字體的字重等,這些不一致會造成頁面混亂,字體的選擇和使用會對用戶的視覺體驗、信息感知、品牌聯系和情感體驗產生重要影響。
          開發實現上如果字體使用較多,會影響加載速度,沒有統一的字體制定規則后期更新迭代也會比較繁瑣,造成資源浪費。
           
          設計原則之一致性
           
           
          3、  圖標
          圖標是一種簡化的、具有視覺表現力的符號圖形,在用戶界面設計、信息傳達等領域廣泛應用。
          在眾多APP中,常使用APP的你肯定可以感受到,圖標除了準確的表達某個含義,還需要在設計時保持一致性,圖標的大小,設計的風格例如線型圖標、填充圖標、簡約圖標、立體圖標、卡通圖標等,如果這些圖標風格進行混合使用就會造成混亂,影響用戶體驗,看起來很不專業也會影響用戶使用時對于安全性的擔憂。
          設計原則之一致性
           
           
          4、  按鈕樣式
          按鈕是一種常見的交互界面元素,用于觸發某種操作或功能。
          設計中的按鈕有很多樣式,因為項目類型的不同按鈕樣式也不同,按鈕的樣式有圓形按鈕,矩形按鈕,圓角矩形按鈕,菱形按鈕等,同一個項目中建議使用統一的按鈕樣式,除了可以體現專業性,還可以讓用戶增加信任度,按鈕樣式使用很多,用戶除了使用體驗不友好,還會覺得是不是跳出了這個產品去到了另一個地方。
           
          設計原則之一致性
           
           
          5、  排版
          排版是指在印刷或數字媒體中,對文本、圖像等內容進行有規則的布局和格式化的過程。
          設計中排版的一致性,使用戶能夠快速適應和理解界面的結構,降低學習成本,用戶對于熟悉的排版模式產生更強烈的歸屬感和安全感,使內容更易讀,用戶可以依照熟悉的視覺動線快速找到所需信息,提高信息獲取效率。
          五、  交互設計一致性的體現
           
          設計原則之一致性
           
           
          1、  操作一致
          根據文字意思就是用戶才操作時候的流程保持一致,操作保持一致,例如大家常見的下單購買商品流程,
          用戶在購買商品時:點擊商品——商品詳情——付款購買,其他商品也應該是這樣流程,
          如果每個商品流程不同就會很亂,例如:
          點擊A商品————商品詳情——付款購買;
          點擊B商品——付款購買——查看商品詳情;
          點擊C商品——同類商品列表——商品詳情——付款購買,
          這樣就會很亂,用戶不知道點擊下一個商品會是什么樣子。
          例如:
          設計原則之一致性
           
           
          1、APP中的視頻瀏覽是上下滑動,進入新的模塊后視頻瀏覽變成了左右滑動。
          2、需要確認某些操作時,確認按鈕一會在右側,一會確認又在左側。
          用戶在操作時會除了體驗很亂,也很難培養用戶習慣。
          設計原則之一致性
           
           
          2、  文案符號一致
          文案和標點符號的一致比較好理解,例如常見的輸入框,“請您輸入帳號”,“請輸入你的密碼”,同一頁面場景下文案和稱呼不統一,會造成用戶操作遲疑,是不是這個不重要才用了“你”,重要的才用“您”,為了避免用戶進行不必要的思考文案保持一致,符號亦是如此。
          設計原則之一致性
           
           
          3、  反饋一致
          當我們看到下一步按鈕時,有些地方交互是進入了新的頁面,有的是分步式使用。建議使用一種保持統一,避免用戶產生誤導。
          操作反饋后的彈窗,相同功能反饋的彈窗樣式不一致:一會是圖文彈窗,一會純文字提示,用戶也會很亂,包括交互時出現的樣式也需要保持一致,劇中或從下向上彈出。
          六、  總結
          一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的用戶體驗。通過保持設計元素、布局和交互方式的一致性,可以降低用戶的認知負荷,提高用戶的學習效率,增強品牌形象,提升用戶滿意度,并最終實現更好的業務成果,詳細分為以下七點:
          設計原則之一致性
           


          作者:CANAAN8
          鏈接:https://www.zcool.com.cn/article/ZMTYyMDQ3Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          常見的B端彈窗樣式設計總結

          前端達人

          B 端產品的業務場景通常比 C 端更為復雜,因此在進行產品設計時對信息的處理方式也需要根據不同的業務場景進行設計。今天主要聊一下 B 端產品設計中彈窗設計。
          常見的B端彈窗樣式設計總結
           
           
          彈窗的定義
          彈窗是展現在用戶操作界面之上的容器,在 X 軸和 Y 軸的平行空間之上擴展了頁面的高度。是系統與用戶之間建立聯系非常重要的組成部分。它通常在用戶進行特定操作或訪問特定頁面功能時彈出,目的是向用戶展示某些信息、提供選擇或執行某些操作。
           
          彈窗使用場景
          1.  
            需要呈現的內容篇幅相對較少。
          2.  
            常用于針對某些內容進行補充說明、需要用戶處理關鍵信息、重要的警告提示等。
          3.  
            通常是由系統觸發(用戶被動接受)。
          4.  
            彈窗整體高度和寬度不做絕對的標準或規定,可以根據內容篇幅的多少和視覺的平衡度來確定,整體規范保持一致即可。
           
          總體概括為簡單和復雜兩個場景。
           
          一、場景簡單
          場景簡單包括:全局提示、氣泡確認框、警告提示、通知提醒框,通常是操作確認和系統內部自動觸發性提示時使用。
           
          1. 全局提示
          以 toast 提示居多,通常在頁面中間偏上的位置。
          常見的B端彈窗樣式設計總結
           
           
           
          2. 氣泡提示
          用于解釋難理解的功能名詞或者由于版面限制文字展示不完,利用氣泡來展示。
          常見的B端彈窗樣式設計總結
           
           
           
          3. 警告提示
          用于重點內容的警告提醒,降低用戶犯錯概率,提升用戶的使用體驗。
          常見的B端彈窗樣式設計總結
           
           
           
          4. 提示性通知彈窗:
          位置相對固定,通常出現在需要介紹說明的功能旁邊或者居頁面中間展示。
          例如,當系統發生重要更新維護或者重點功能引導時,可以顯示一個提示性通知彈窗,告知用戶當前狀態。
          類型主要包括以下三種:
          常見的B端彈窗樣式設計總結
           
           
          常見的B端彈窗樣式設計總結
           
           
          常見的B端彈窗樣式設計總結
           
           
           
          舉例:
          有贊后臺頁面
          有贊后臺頁面
           
           
           
          二、場景復雜
          1. 場景復雜|全屏彈窗
          常見的B端彈窗樣式設計總結
           
           
           


          作者:西城門設計
          鏈接:https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          比GIF更好用的Lottie動畫是什么?

          前端達人

             不知道大家有沒有這樣的困擾,每次制作GIF圖的時候,難免會出現邊緣鋸齒,就算加上白邊之后,在夜晚模式的時候鋸齒就更明顯了。除此之外,GIF圖對于漸變填充的呈現也很糟糕,會出現漸變斷層的情況,看起來很不自然。
          最讓人難以接受的情況是:
                  稍微把動畫做流暢一些,GIF的文件大小就變得巨大無比。
                  在2017年的時候,一款比GIF動畫更好用的動畫圖片格式誕生了?。?!
                  那就是我們今天將要介紹的Lottie動畫。
               
                  什么是Lottie動畫?
                 Lottie動畫是一種基于 JSON 的動畫文件格式,允許在任何平臺上發送動畫,就像發送圖片一樣輕松。Lottie是可在任何設備上運行的小文件,并且可以放大或縮小而不會出現鋸齒的一種動畫格式。
          比GIF更好用的Lottie動畫是什么?
           
           
           
          相較于其他動圖格式,Lottie有哪些優點?
          比GIF更好用的Lottie動畫是什么?
           
           
          ①文件大小
          和GIF、Apng 或 MP4 等其他格式相比,Lottie 動畫要小得多,同時保持相同的動畫表現,甚至更流暢。
          比GIF更好用的Lottie動畫是什么?
           
           
          ②無線擴展
          Lottie動畫是基于矢量設計制作的,這意味著可以隨意放大或縮小它們,而不必擔心分辨率的大小導致的鋸齒問題。放大無數倍也是清晰如初。
          比GIF更好用的Lottie動畫是什么?
           
           
          ③支持多平臺
          對于所有開發人員來說,Lottie動畫的交接非常簡單?,F在我們可以在 iOS、Android、Web 和 React Native 上使用 Lottie 動畫,也不需要修改。使用和調用都非常方便。
          比GIF更好用的Lottie動畫是什么?
           
           
          ④可交互
          在 Lottie 動畫中,動畫元素可以設計為可交互組件,用戶可以操縱它們進行交互,實現滾動、單擊和懸停等交互效果。這是GIF、Apng和MP4等動畫文件都沒辦法做到的。
          比GIF更好用的Lottie動畫是什么?
           
           
            怎么設計制作Lottie動畫呢?
                 目前,Lottie官網提供了很多動效設計軟件的插件供大家使用和下載。目前下面這些設計軟件可以在官網下載到Lottie動畫的導出插件。
          比GIF更好用的Lottie動畫是什么?
           
           
          其中,Lottie Creator是Lottie官方的網頁版動畫制作工具,登錄官網就可以使用。
          Lottie官網地址 
           https://lottiefiles.com
          比GIF更好用的Lottie動畫是什么?
           
           
                 說了這么多Lottie的優點,其實Lottie也是有短板的。比如說,AE里面的fx效果,Lottie就全部不支持,另外復合路徑動畫等等動效效果也不支持。
                 為了方便大家快速上手Lottie動畫,作者把Lottie支持的效果整理歸類成了幾張圖片,方便大家制作的時候快速查閱。
           
          比GIF更好用的Lottie動畫是什么?
           
           
          比GIF更好用的Lottie動畫是什么?
           
           
          比GIF更好用的Lottie動畫是什么?
           
           
          比GIF更好用的Lottie動畫是什么?
           
           
          比GIF更好用的Lottie動畫是什么?
           
           
          比GIF更好用的Lottie動畫是什么?
           
           
          比GIF更好用的Lottie動畫是什么?
           
           
          比GIF更好用的Lottie動畫是什么?
           
           


          作者:江浩大叔工作室
          鏈接:https://www.zcool.com.cn/article/ZMTYxODY4MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          B端后臺管理界面設計欣賞

          前端達人

          在現代企業中,B端后臺管理界面設計是提升工作效率和用戶體驗的關鍵因素。本文將通過UI設計公司提供的優秀案例,探討如何優化后臺管理界面的設計,提升用戶的使用體驗。

           

          1. 界面簡潔,功能齊全

          一個優秀的B端后臺管理界面,首先應具備簡潔明了的設計風格。UI設計公司在設計過程中,通常會通過簡潔的布局和清晰的導航,幫助用戶快速找到所需功能。例如,藍藍設計公司就采用了極簡設計原則,在保持美觀的同時,確保用戶能夠高效操作。

           

          2. 交互設計人性化

          人性化的交互設計是提升用戶體驗的關鍵。UI設計公司會根據用戶的使用習慣和需求,設計直觀的操作流程和反饋機制。例如,通過在重要操作后提供即時反饋,減少用戶操作的疑惑和錯誤。

           

          3. 數據可視化

          對于后臺管理界面來說,數據可視化是不可或缺的一部分。通過圖表、儀表盤等可視化工具,用戶可以直觀地了解業務數據,從而做出更好的決策。UI設計公司通常會使用最新的數據可視化技術,幫助用戶快速理解復雜的數據。

           

          4. 響應式設計

          隨著移動設備的普及,響應式設計變得尤為重要。優秀的B端后臺管理界面應能夠在不同設備和屏幕尺寸下保持良好的使用體驗。UI設計公司會在設計時考慮多種終端的兼容性,確保界面在手機、平板和電腦上都能流暢運行。

           

          5. 安全性與穩定性

          后臺管理界面涉及大量敏感數據,安全性和穩定性是設計過程中不可忽視的因素。UI設計公司在設計時會采用多層次的安全措施,保障數據的安全,同時通過優化代碼和服務器配置,確保系統的穩定性和高效性。

          通過以上幾個方面的優化,UI設計公司能夠打造出高效、美觀、易用的B端后臺管理界面,助力企業提升管理水平和工作效率。希望這些優秀案例能為你的設計工作提供一些啟發和參考。

           

          藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

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

          銀行金融軟件UI界面設計能源及監控軟件UI界面設計、氣象行業UI界面設計軌道交通界面設計、地理信息系統GIS UI界面設計航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

          PC端的頁面設計,如何優雅呈現在移動端

          前端達人

          電商boss系統采購訂單頁面在移動端呈現,我做了哪些思考?
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          在B端UI/UX設計領域,我們常常會遇到類似的需求:隨著業務的發展,需要將復雜系統中的核心功能摘出來,并在小程序或移動應用上呈現,以便客戶能夠便捷地使用和操作,從而提升工作效率。然而,實際操作中我們會發現,盡管對這些功能很熟悉,但是落地過程中卻會遇到一系列問題。
           
          本文中,將分享我在將復雜電商BOSS系統的訂單頁面呈現在移動端的設計過程,希望對大家有所幫助。通過本文,您將了解到以下內容:
          1、如何在設計過程中充分考慮電腦端和移動端用戶的需求和使用習慣;
          2、如何將復雜的訂單頁面優化為簡潔、易用的移動端界面;
          3、針對移動端的限制和挑戰,如何進行設計決策和權衡;
          4、使用哪些有效的UX技巧來提升用戶體驗和工作效率。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
           
          一、深入分析業務背景和使用場景
          1、業務背景關系梳理
          選款的零售商客戶通過衫海精選款下單后,訂單信息和訂單狀態會傳到BOSS后臺,相關負責人可隨時查看并處理。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          2、為什么需要在移動端呈現?
          為了確保平臺高效履約,需要市場部同事隨時掌握訂單狀態,特別是
          發貨即將超時、攬收即將超時、發貨已超時和攬收已超時
          的訂單,以便及時通知上下游。但是由于工作性質,他們無法隨時坐在電腦面前,所以需要在小程序上呈現訂單信息,可以讓市場部同事隨時查看并處理訂單,避免出現訂單超時,客戶投訴的情況。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
           
          二、功能拆解
          1、將電腦端訂單內容拆分重組,信息歸類
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
           
          2、訂單功能拆分后,主要分為以下四個部分
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          1)訂單狀態
          訂單狀態包括:全部、待付款、備貨中、待收貨、已完成、已關閉。全部狀態下
          新訂單、售后中、發貨即將超時、攬收即將超時、發貨已超時、攬收已超時
          的訂單類型需要重點露出,方便快速查詢。
          •  
            設計差異:
          1、訂單狀態:電腦端大屏橫向可以全部平鋪展示;移動端則是橫向滑動。
          2、售后中、發貨即將超時、攬收即將超時、發貨已超時、攬收已超時的訂單快捷入口,電腦端大屏可以全部平鋪展示;移動端則需要換行,這里不做橫向滑動是因為會影響用戶的操作效率
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          2)訂單查詢條件
          訂單查詢條件包括:訂單編號、時間排序、商品名稱、供應商名稱、下單時間、訂單狀態、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉等等。
          •  
            設計思考:
          分析用戶日常的使用習慣,對高頻操作的篩選項進行提煉在移動端展示,提升使用效率。低頻操作則不在移動端展示。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          經過與業務方溝通,訂單編號、時間排序、商品名稱、供應商名稱、下單時間、訂單狀態、履約方的使用頻次相對較多,
          訂單編號、時間排序
          使用頻次最高。
           
          a、訂單編號/排序時間
          •  
            設計差異:
          1、訂單編號查詢:電腦端和移動端都是直接輸入,但是電腦端支持批量查詢,單次查詢內容會更多。
          2、下單時間排序:電腦端采用input框的樣式,下拉篩選;移動端是通過點擊切換排序方式,操作會更便捷。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
           
          b、商品/供應商查詢
          •  
            設計思考:
          1、商品查詢:電腦端、移動端都是直接輸入;
          2、供應商查詢:電腦端采用input框的樣式,下拉篩選;移動端則是進入新的頁面進行選擇;兩者都支持關鍵字搜索;
          移動端不直接展開的原因是:供應商數量多,在當前頁面展示篇幅較長,還涉及到分頁,會影響用戶的操作體驗。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
           
          c、時間查詢
          •  
            設計差異:
          電腦端點擊出現時間選擇器,支持快捷查詢;移動端點擊選擇跳轉到新頁面,時間全部鋪開展示;兩者都支持滑動鼠標(手指)連續選擇時間段。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          d、訂單狀態查詢
          •  
            設計差異:
          電腦端采用input框,下拉選中;移動端則是全部展示出來,采用勾選的方式進行選擇。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          3)批量操作
          小程序不做批量操作功能。
           
          4)訂單內容
          訂單內容包括訂單編號、下單時間、零售商、商品信息、數量、發貨方式、買家信息、訂單狀態、實收款、訂單詳情、查看物流。這些內容可以歸納為3類:
          a、訂單信息 b、商品信息 c、操作。
           
          a、訂單信息
          訂單信息包括:訂單編號、下單時間、零售商、、發貨方式、買家信息、訂單狀態、實收款
          •  
            設計差異:
          電腦端面積大,內容需要散開排列;移動端面積小,內容需要集中排列。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          b、商品信息
          商品信息包括:商品名稱、圖片、價格、貨號、規格、SKU編碼、供應商、下單數量、拿貨數量、倉內現貨、缺貨原因
          •  
            設計差異:
          同樣的內容,移動端更加聚焦,但是商品數量展示也偏少。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
          c、操作
          操作包括:訂單詳情、查看物流
          •  
            設計差異:
          交互方式相同,都是跳轉到新頁面。
          PC端的頁面設計,如何優雅呈現在移動端?
           
           
           
          三、總結
          由于屏幕大小和分辨率的不同,電腦端和移動端頁面在功能的布局和信息展示上也會有所不同。
          電腦端使用鼠標操作,包含滑動、左擊、右擊、雙擊等,相對來說單一,交互效果較少。而對于手機端來說,由于屏幕大小的限制,操作方式需要更加的豐富,通過這些豐富的操作來實現頁面和功能之間的交互。所以電腦端和移動端相同功能的操作方式也會不同,組件也有所差異。在做設計時,盡量使用成熟的組件,給用戶良好的使用體驗。
          遇到復雜的設計需求,不要慌張,
          核心都是看透事物的本質,拆解為基礎的組件,再從根本上解決問題。
          謝謝!
           


          作者:西城門設計
          鏈接:https://www.zcool.com.cn/article/ZMTYxOTQxMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          日歷

          鏈接

          個人資料

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

          存檔

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