142025-4

自適應設計在內(nèi)容上的應用探索

編輯導語：自適應設計指能使界面自適應顯示在不同大小終端設備上的設計方式及技術。而內(nèi)容自適應則需要對用戶行為進行預判進而改變設計內(nèi)容，本文作者將對自適應設計在內(nèi)容上的應用進行分享，值得閱讀學習。

我們一般說的自適應設計，多半指的是界面自適應，即為不同的終端設計不同的界面布局與操作流程。而內(nèi)容自適應，是一種根據(jù)用戶標簽與操作行為預判用戶目標所需頁面內(nèi)容的方式，他的優(yōu)點是既能預測交互意圖，實現(xiàn)信息量的智能輸出，同時也能滿足不同交互需求，改變界面樣式，達到降低人機交互負荷的目的。

以下，是道樂UED團隊基于查閱的資料以及行業(yè)的積累，帶來的一篇關于內(nèi)容自適應的分享。

目錄：

內(nèi)容自適應的界定
適用場景及案例分析
利弊分析
內(nèi)容自適應設計在金融產(chǎn)品上的應用思考

一、內(nèi)容自適應的界定

目前自適應界面在內(nèi)容上的呈現(xiàn)大致包括兩種類型：

1. 實時自適應

顧名思義，就是根據(jù)用戶當下的操作，實時判斷用戶所需，從而調(diào)整不同的信息展示與布局，他的優(yōu)勢在于能盡量減少頁面上與用戶目標不相關信息的展示，從而提升用戶操作的效率與準確度

2. 歷史自適應

通過用戶標簽與過往數(shù)據(jù)的分析，調(diào)整頁面內(nèi)容的展示數(shù)量與優(yōu)先級，僅展示用戶感興趣或可能感興趣的內(nèi)容，從而提高用戶在使用產(chǎn)品中的轉(zhuǎn)化率。

總的來說，內(nèi)容自適應更趨向于對用戶行為軌跡的縱向思考，將“用戶尋找信息”的被動服務模式轉(zhuǎn)化為“信息尋找用戶”主動服務模式。滿足差異化的用戶需求，提升企業(yè)系統(tǒng)的用戶體驗和人性化服務水平。

二、適用場景及案例分析

1. 實時自適應

（1）搜索

① Google搜索

自適應設計在搜索上的應用意味著針對每個用戶的每一次搜索，都會產(chǎn)生一個定制的界面，該界面將自身塑造成所顯示的信息。請看以下示例：如何根據(jù)不同的用例更改搜索結(jié)果頁面。

最近，Google搜索的設計重點是在用戶點擊搜索結(jié)果之前傳遞信息。為此，Google采用了一種稱為自適應設計的方法。

Google搜索適應用戶需求的第一種方法是重新安排導航以適應結(jié)果。

在“lizzo”的例子中，搜索框下面的導航是：（按順序依次為）圖片、視頻、新聞、購物、更多；
在“tel aviv”的例子中，導航是：新聞、圖片、地圖、視頻、更多；
搜索“aapl”（蘋果公司的股票代碼），導航顯示：金融、新聞、書籍、購物、更多；

Google有362,880種獨特的方式來排列導航，以適應搜索查詢。然而，自適應設計的最大例子是搜索結(jié)果本身的布局。結(jié)果頁面是完全模塊化的：根據(jù)搜索結(jié)果，不同的元素出現(xiàn)在不同的配置中。

例如，音樂家Lizzo的搜索結(jié)果集中在媒體上：一組模塊以本機格式顯示視頻，圖片和歌曲。還顯示最近的新聞，推文和即將舉行的活動，以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的個人資料鏈接。直到頁面底部，我們才能看到看起來像傳統(tǒng)搜索結(jié)果的元素。

另一方面，以色列特拉維夫市的搜索結(jié)果為旅行者提供優(yōu)先信息。圖片、地圖、當?shù)靥鞖庖约芭c旅行有關的問題（“特拉維夫?qū)τ慰桶踩珕幔?rdquo;、“特拉維夫以什么聞名？”）優(yōu)先于傳統(tǒng)搜索結(jié)果。模塊促進了特拉維夫的活動以及對附近其他城市的推薦。搜索結(jié)果頁上可能會出現(xiàn)數(shù)千個不同的模塊，從簡單的布局驅(qū)動模塊到完全獨立的應用程序。

例如，“aapl”的搜索結(jié)果頁上，股票代碼模塊顯示了當前價格和交互式歷史價格圖。

通過自適應設計，所有有關內(nèi)容、格式和順序的決策都是由算法決定的。設計人員的作用不再是創(chuàng)建明確的外部布局。

如今，尖端產(chǎn)品的設計者，以及未來日常產(chǎn)品的設計者，正在就生成這些布局的規(guī)則做出決策。

② 淘寶搜索

淘寶搜索結(jié)果頁，當用戶往下滑動查看更多時，系統(tǒng)判斷你根據(jù)當前搜索頁沒有找到想要的內(nèi)容，則根據(jù)不同物品展示物品的更細分的篩選，如啤酒會c展示“德國進口啤、國產(chǎn)精釀、比利時精釀”，方便用戶找到目標物品。

③ OTA平臺PC端（去哪兒、攜程等）

攜程/去哪兒pc端中，Tab前置條件是國內(nèi)/國際，在選擇國內(nèi)機票時，默認單程。在選擇“國際/港澳臺機票”時，則默認機票往返。

這樣的功能設置是基于對用戶需求的深入研究得出的，主要有以下幾個原因：

最優(yōu)方案不同：國內(nèi)單程往返的最優(yōu)方案多半有可能不是一個航空公司，要一個一個查詢，（盡管同一航空公司往返有1+1小于2的規(guī)則），會對客人更有利，因為經(jīng)常會出現(xiàn)1+0.5=1.5的情況。國際票往返的最優(yōu)方案通常還是一家航空公司的便宜，這個基本上是定律，所以這個默認設定是培養(yǎng)消費習慣之舉。
使用場景不同：國際機票的使用場景下，大都有明確時間區(qū)間，簽證限制了用戶在國外停留的時間。用戶不得不提前計劃。且回程可選擇交通工具有限。相對而言，國內(nèi)機票場景較自由，提前計劃必要性相對較弱。
觀測數(shù)據(jù)證明：根據(jù)同程的國際機票訂購數(shù)據(jù)顯示，70%以上的用戶選擇了往返。

基于以上充分的原因，這個自適應功能設計就得以開發(fā)并成功提高用戶的使用效率。

（2）根據(jù)用戶靜態(tài)標簽優(yōu)化結(jié)果

靜態(tài)標簽：用戶主動提供的數(shù)據(jù), 指用戶不變的基礎信息，多為用戶固定數(shù)據(jù)，如姓名、性別、年齡、身高、體重、職業(yè)、地區(qū)、設備信息、來源渠道等。

定位地區(qū)：大眾點評——切換城市

大眾點評的這個功能經(jīng)常被拿出來說，當你到另一個城市，通過獲取定位申請，判斷你是來這座城市旅游的場景，從而頁面展示中入口就改成了跟旅游相關，這其實也有點內(nèi)容自適應的意思，通過用戶不同的操作展示不同的內(nèi)容。

2. 歷史自適應

歷史自適應主要集中在特定領域的個性化界面定制和推薦等方面。針對不同用戶呈現(xiàn)不同界面，根據(jù)用戶的類型、任務特點、喜好等提供不同的界面樣式。

（1）根據(jù)用戶動態(tài)/預測標簽算法推薦定制內(nèi)容

預測標簽：平臺介入的數(shù)據(jù)，指根據(jù)用戶在平臺內(nèi)的行為數(shù)據(jù)對用戶未來行為或喜好進行預測；是設計千人千面和運營策略的關鍵；比如某電商平臺，根據(jù)用戶A“月均消費5單，且有數(shù)額過萬的運動商品”的購物數(shù)據(jù)，平臺會給用戶A打“高頻、品質(zhì)敏感性、運動”的標簽，后期會更多推薦高品質(zhì)運動商品及相關運動品牌活動的精準推送。

用戶標簽是構(gòu)成用戶畫像的核心因素，是將用戶在平臺內(nèi)所產(chǎn)生的行為數(shù)據(jù)，分析提煉后生成具有差異性特征的形容詞。即用戶通過平臺，在什么時間什么場景下做了什么行為，平臺將用戶所有行為數(shù)據(jù)提煉出來形成支撐業(yè)務實現(xiàn)的可視化信息。

① 用戶生產(chǎn)內(nèi)容（UGC）

互聯(lián)網(wǎng)上的許多站點開始廣泛使用用戶生成內(nèi)容的方式提供服務，許多圖片、視頻、博客、播客、論壇、評論、社交、Wiki、問答、新聞、研究類的網(wǎng)站都使用了這種方式。

② 電商平臺

這種平臺一般會隨著用戶的使用，網(wǎng)站會積累及不斷修正及展示最貼近用戶喜好的產(chǎn)品，從而進行推薦。功能上適應了用戶的喜好，會大大增加用戶的粘性。

③ APP Store 應用頁面大變動：不同用戶可看到不同功能與內(nèi)容

自定義產(chǎn)品頁功能讓開發(fā)者可以面向不同用戶展示 App 的不同功能，產(chǎn)品頁優(yōu)化功能則讓開發(fā)者們能夠測試不同的截屏、預覽視頻，甚至 App 圖標。

蘋果指出，得益于 App Store Connect 詳實且注重隱私的分析，開發(fā)者可以了解自己用戶的偏好，從而決定產(chǎn)品頁的展示內(nèi)容。

④ SoulAPP創(chuàng)始人：Sou了APP功能符合不同場景的用戶需求

SoulAPP多種匹配機制,功能符合不同場景的客戶需求。Soul利用AI大數(shù)據(jù)，依照性格、興趣等因素,劃分用戶。通過這種精準的方式分類用戶,以便用戶之間能夠更高效地建立連接。第一次注冊SoulAPP，用戶需要通過系統(tǒng)的一些答題測試,以便于生成符合自己的性格報告。接著就是通過上述數(shù)據(jù)采集，劃分專屬圈子，這里就是大家經(jīng)常說的“星球“，這些都是基于SoulAPP的AI功能。

三、利弊分析

1. 優(yōu)點

增強用戶體驗：自適應界面不能讓用戶控制自適應過程。對用戶動機準確的判斷和對應的自適應設計能有效簡短交互路徑，優(yōu)化用戶的交互體驗。
增強用戶粘性：基于精準人群的需求分析和功能設計，更容易得到用戶認可，更容易打造產(chǎn)品亮點，提供精準個性化的服務，比如對于社區(qū)產(chǎn)品，內(nèi)容個性化推薦將有效提升社區(qū)粘度。
利于公司可持續(xù)發(fā)展：一方面使公司更具競爭壁壘，及時洞察市場風向，預測產(chǎn)品所占市場規(guī)模及前景發(fā)展，及時優(yōu)化公司戰(zhàn)略，避免過早陷入發(fā)展瓶頸；另一方面沉淀大批用戶數(shù)據(jù)，既利于孵化創(chuàng)新產(chǎn)品，也豐富盈利模式（比如與第三方合作）。
提升產(chǎn)品設計價值：基于精準人群的需求分析和功能設計，更容易得到用戶認可，更容易打造產(chǎn)品亮點，提供精準個性化的服務，比如對于社區(qū)產(chǎn)品，內(nèi)容個性化推薦將有效提升社區(qū)粘度。
提高運營效率：如今的新用戶獲客成本居高不下的情況下，利用現(xiàn)有用戶畫像，做好存量用戶的維護，通過精準營銷策略，提升存量用戶的留存與活躍。

2. 缺點

自適應界面同樣有一些“小缺點”，違背了一些眾所周知的可用性原則：

缺乏控制：自適應界面不能讓用戶控制自適應過程。
不可預測性：由于用戶不能直接控制界面，用戶不能預測界面接下來的某些行為。
透明度：通常，用戶不能理解在界面中，自適應是如何起作用的。在設計自適應界面時的其中一個問題就是讓用戶可以見到多少自適應比例。
私密性：用戶必須接受基于用戶模型的一種系統(tǒng)，將會一直維持與系統(tǒng)交互的狀態(tài)，持續(xù)收集用戶使用行為。
信任度：用戶在系統(tǒng)中的信任是容易改變的，如果自適應系統(tǒng)給予了錯誤的指令。
開發(fā)成本：提供內(nèi)容的自適應度，通常意味著著更多的開發(fā)成本。要把控好自適應性設計的度，而非一味地增加開發(fā)量。

四、內(nèi)容自適應設計在金融產(chǎn)品上的應用思考

1. 基礎設計原則思考

內(nèi)容自適應的核心在于，基于用戶過往的操作以及行為路徑的分析，提前預判用戶下一步需要的內(nèi)容，從而讓用戶能更便捷的使用產(chǎn)品。但是在金融產(chǎn)品的設計中比較特殊，往往用戶在使用產(chǎn)品的一個核心需求是安全感，產(chǎn)品安全、資產(chǎn)安全、操作安全等都是用戶著重關注的點，所以如果一味的進行內(nèi)容自適應設計，會讓用戶產(chǎn)生“信息泄露”的擔憂，從而失去對該產(chǎn)品的信任。

基于以上內(nèi)容自適應的分析以及金融產(chǎn)品設計的特殊性，我們來看看有哪些可以運用到金融產(chǎn)品的設計中來。

2. 金融產(chǎn)品設計思考

（1）金融應用的[截圖]功能

截圖功能可以根據(jù)用戶場景與用戶目標兩個維度進行分析。截圖操作的發(fā)生幾乎會發(fā)生在用戶使用金融應用的各個場景，比如瀏覽金融產(chǎn)品、查看產(chǎn)品詳情、查看持倉資產(chǎn)、收益等等，而不同的場景用戶的目標也有所不同，我們可以根據(jù)用戶不同的操作目標，為用戶提供自適應的內(nèi)容來方便用戶的操作。

截圖常見的用戶目標大致分為兩類：報錯與分享。我們可以為這兩個用戶目標做一些內(nèi)容上設計。

報錯一般會關聯(lián)產(chǎn)品的在線客服功能，那么我們在用戶截圖操作發(fā)生后，提供在線客服的入口，同時分析報錯自身的用戶行為，如可能是針對頁面的哪個點或者哪個區(qū)域報錯，那我們可以針對這一點再提供編輯截圖的功能等等。

如此根據(jù)用戶目標拆解用戶行為，設計對應的功能來滿足用戶操作，從而減少用戶的操作路徑。

分享可根據(jù)用戶場景設計不同的內(nèi)容，如：

當截圖發(fā)生在產(chǎn)品詳情頁，那此時截圖的分享意圖可能是分享此只產(chǎn)品給好友，我們可以為此設計一個關于產(chǎn)品信息的分享頁來便于用戶分享；
當截圖發(fā)生在資產(chǎn)頁，此時的截圖的分享意圖可能是炫耀自己的收益，那我們可以生成收益海報等內(nèi)容給用戶，從而滿足用戶的心理預期。

（2）金融應用的[內(nèi)容管理]功能

買衣服的時候，絕大多數(shù)人在意的是是否合身，對于數(shù)字產(chǎn)品，同樣是如此。在一個金融應用的內(nèi)容管理功能當中，會推送大量的內(nèi)容給用戶，絕大多數(shù)的用戶幾乎沒有時間來掌控所有的信息，導致部分對用戶有用的信息被忽略，這樣意味著內(nèi)容的可定制化是極其重要的。

內(nèi)容的可定制化體現(xiàn)在不同用戶的分層上，基于分層，我們可以為相同類型用戶推送內(nèi)容。如持有私募基金的用戶，我們可能會更多為其推送關于此類產(chǎn)品的信息以及高端用戶的優(yōu)惠、活動、資產(chǎn)報告等信息。

（3）金融應用的[搜索]功能

金融產(chǎn)品的搜索，除了具備一般應用該有的內(nèi)容，如最近搜索、熱門搜索、搜索排行榜等，也需要基于產(chǎn)品特性來思考還有哪些可以展示的內(nèi)容。

根據(jù)用戶行為與數(shù)據(jù)分析，一般搜索的關鍵詞為基金名稱或者基金代碼，而搜索的目的是查看該產(chǎn)品的信息以及收益情況，那么基于此類目的，我們可以當用戶輸入基金名稱后，展示該基金最近的凈值走勢等內(nèi)容，這樣用戶就可以提前了解部分基金信息，可以提前做一個判斷，需不需要進入搜索結(jié)果頁進一步的了解。

除了提前展示該基金部分產(chǎn)品信息以外，我們也可以展示相類似基金，防止用戶因提前獲知產(chǎn)品部分信息而帶來的流失率，當用戶不滿意該只基金的近期表現(xiàn)，我們可以為其提供表現(xiàn)良好的基金供其選擇，從而提高產(chǎn)品的轉(zhuǎn)化率。

五、結(jié)語

通過對自適應設計在內(nèi)容上的應用探究，我們對內(nèi)容自適應的設計手法及應用場景有了初步的理解，也會繼續(xù)的探究并運用到實際的工作中來，希望這些思考能為大家?guī)硪恍椭?/p>

作者：道樂UED全體成員

原文鏈接：https://www.ui.cn/detail/610302.html

本文由 @道樂科技設計中心授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。

蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

評論(0) 瀏覽(395)

102025-4

帕累托原則 | 設計師需要知道的設計原則！

杰睿

前人留下的一些設計原則能夠幫助我們更好地進行頁面以及產(chǎn)品的設計，讓用戶有更好的體驗。本文對帕累托法則進行了介紹，希望能幫助大家在以后的設計中更好的理解與運用。

威廉·斯特倫克（William Strunk）說過：“優(yōu)秀的設計師有時會無視設計法則，但當他們這樣做的時候，通常會有一些補償性的措施，除非你確定你能做得那么好，否則最好還是遵守這些法則”，所以設計師需要對一些通用性的法則有所理解，做好相應的知識儲備，以便在需要時從中找尋相通的規(guī)律和事務的本源。

設計常常是以一種美觀且富有規(guī)律的形態(tài)出現(xiàn)，不論大家是何種姿態(tài)、什么樣的知識背景，一旦踏入設計領域之后就會忍不住的去尋求設計法則，探索期背后的設計規(guī)律，因此經(jīng)過長期沉淀，一些大佬和前輩們留下了大量的通用設計法則。

今天，筆者就說說帕累托法則，希望能幫助大家在以后的設計中更好的理解與運用。

一、認識帕累托法則

1. 帕累托法則的背景

19世紀末，意大利經(jīng)濟學家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發(fā)現(xiàn)，自家花園中80%的豌豆產(chǎn)自于20%的豌豆莢，在隨后研究土地所有權(quán)和財富不平等的問題中，再次發(fā)現(xiàn)意大利 80%的土地屬于 20%的人。

20世紀初，由管理學家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結(jié)果是20%的原因造成的，并且號召關注「重要的少數(shù)」而不是在「瑣碎的多數(shù)」當中投注精力。后續(xù)在經(jīng)濟學中得出結(jié)論（80%的財富掌握在20%的人手里）更加證實了帕累托法則的觀點。

2. 正確理解80與20

帕累托法則有很多不同的叫法，如帕列托法則、關鍵少數(shù)法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續(xù)筆者將其稱為「80/20法則」。

其實，80/20法則是一個較為抽象的概念，可以理解為：大部分的效果由少數(shù)幾項關鍵的因素來決定。在實際的場景中，“大部分”不是精確的80%，“幾項關鍵因素”也不是固定的20%，數(shù)據(jù)會有所浮動，可能是70%+30%或者90%+10%，但不管這些數(shù)字如何波動，其背后蘊含的規(guī)律（集中的投入將產(chǎn)出大于預期的結(jié)果）是不變的，并且生活中存在的許多不平衡現(xiàn)象，都與這個規(guī)律相當接近。

3. 可適用范圍

80/20法則并不受人為直接控職，更多時后是自然而然的形成，其適用領域非常廣泛。早期大多數(shù)用于社會、經(jīng)濟、管理以及工程等領域，而在80年代末就已經(jīng)有設計師將其設計領域，在各行各業(yè)中，已經(jīng)有大量的案例證明了 80/20原則：

人類80%的科學發(fā)明，來自于20%的人口
社會上20%的人占有80%的財富
城市80%的交通，集中在20%的道路上
20%的客戶為公司貢獻了80%的收入
公司80%的收益來源于20%的產(chǎn)品
20%的網(wǎng)站獲取了 80%的網(wǎng)絡流量
20%的常見軟件錯誤導致了80%的系統(tǒng)崩潰
……

4. 設計領域中的運用

70年代中期出現(xiàn)圖形化界面，而到80年代末，80/20法則就已經(jīng)被設計師引用在設計規(guī)范當中，后續(xù)經(jīng)過不斷的發(fā)展及優(yōu)化，現(xiàn)已深入設計中的方方面面，PM用來處理KPI、UX用來劃分權(quán)重、UI用來決策版面布局等。

界面設計中該如何應用80/20法則，這就需要設計師時刻注意如何讓用戶更快找到目標、如何更順暢的完成任務以及如何擁有更愉悅的心理感受。例如80%的用戶只會用到20%的功能，那么設計師就應該將80%的時間、精力集中在這20%的功能上，不斷迎合用戶需求以及使用體驗。

二、產(chǎn)品如何應對80與20

1. 關鍵性的20%

80/20法則能夠幫助我們提供決策思路、梳理設計方向，通過前面的了解，我們應該清楚了產(chǎn)品80%的用戶只會用到20%的功能，而80%的收益也恰恰來自于20%的付費用戶，甚至低于20%。

雖然一直呼吁盡量滿足所有用戶，但產(chǎn)品團隊的重心始終要圍繞著20%來進行，從產(chǎn)品到設計、再到開發(fā)測試，都能以此為方向制定問題的解決方案。

2. 非關鍵性的80%

任何一款產(chǎn)品都不能忽略主次，每隔一段時間就要重新評估功能價值，以備后續(xù)的更新迭代，針對非關鍵性的80%切勿耗費過多的精力，以免喧賓奪主，不僅得到不好的反饋、還會帶來不必要的損失，吃力不討好。

對于已經(jīng)過期的核心（曾經(jīng)20%）功能，需要及時降低權(quán)重以及精力的消耗，不然即便是掌聲一片、也可能無法變現(xiàn)。

3. 僅關注 20%有風險

用20%的部分創(chuàng)造80%的價值，并不意味著只關注20%的關鍵性指標、其它的就可以被忽略，這樣做表面上看是挺誘人，但會讓其他很多指標停滯，呈現(xiàn)出產(chǎn)品過度優(yōu)化的情況，造成短時間內(nèi)隱藏的負面影響。

團隊應該要有眾覽全局的眼光，考慮到各指標間的相互影響，可視情況而定將時間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關鍵性指標上即可。

三、在UI設計中的運用

在UI設計中，我們會將主要精力花費在20%的頁面設計上，例如APP底部標簽欄的幾大主頁或其它重要的一/二級頁面，會花費更多的心思去構(gòu)思不一樣的布局、表現(xiàn)手法，將設計功底凸顯出來。而剩下80%的頁面就相對機械化，會使用一些常規(guī)樣式以及復用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。

同一個頁面的設計方式也是如此，設計師將大量心思放在首屏及位置靠上的功能上，待超過一屏后下滑時，設計也會逐漸輕量、組件化，這有助于節(jié)省產(chǎn)品、設計、開發(fā)更多的時間。

1. 排版布局（F型）

用戶瀏覽屏幕時，眼球移動的順序通常都是從左到右、從上到下（基于網(wǎng)頁瀏覽眼動測試），這種移動軌跡很像字母「F」，這也讓F型布局成為網(wǎng)頁設計中效率最高的方式之一，所以設計師通常會將重要的信息放在左上角或左側(cè)，不重要的信息放在右側(cè)。

如下面這張眼動測試圖，F(xiàn)型布局也正好詮釋了80/20法則合理性與可行性，在頁面中20%的關鍵區(qū)域，吸引了用戶80%的注意力。

2. 功能入口設計

很多產(chǎn)品因為業(yè)務功能的龐大，一股腦的將信息全部展示出來，看起來十分臃腫，用戶不能快速找到自己想要的信內(nèi)容，就會失去信心。

優(yōu)酷APP首頁將熱門頻道和點擊頻率較高的頻道顯示在頂部導航中，如精選、電視劇、電影、最新院線等，而其他更多的分類則隱藏在頻道選項卡中，將少量（≈20%）重要的內(nèi)容放在明顯的位置，目的就是為了讓大部分用戶更快觸達，提高了產(chǎn)品的易用性。

3. 選項列表設計

在一些選項列表中，由于選項數(shù)量的龐大，會給用戶增加使用難度。

例如，使用美團購買火車票在選擇地址時，面對超長的地址列表，逐個查看或通過字母篩選，都要花費一定的時間和操作成本，即便可以通過碼字搜索來完成，但因為自行輸入有很多的不可控性，能讓用戶選擇的就不要讓其輸入。

對于地址列表，除開自動定位和搜索歷史，運用80/20法則就能很好的解決這一問題，系統(tǒng)將約20%高頻選擇的熱門城市作為單獨的模塊放在全部列表之前，提高了大部分用戶的搜索效率。

4. 極簡風格設計

極簡風格的界面設計跟80/20法則在精神上保持著高度的一致，剔除多余、無用的元素，而保留的每一個元素都是有目的、有針對性的，也是絕對必要的存在。在極簡主義設計中，視覺上簡單干凈，大部分都是通過通過留白來襯托關鍵性元素的存在，讓用戶更加聚焦于主要功能/信息。

四、與其他法則的糾葛

1. 與奧卡姆剃刀的結(jié)合

奧卡姆剃刀指出「如無必要，勿增實體」，需知頁面中每多一個元素都會增加視覺“噪聲”，意味著用戶需要花費額外的時間和理解成本，對用戶體驗的影響是很大的。那么問題來了，當產(chǎn)品需要增加一項需求量小但確實存在的功能，該怎么處理？

這時我們可以將奧卡姆剃刀原則作為最終的評判標準，是否需要增加上述所說的功能，就要看看能否很好的控制團隊開發(fā)成本和用戶體驗成本。

其實在80/20法則中，很多小眾但確實存在的功能需求基本很難抵消所造成的用戶體驗損失，所以即便實現(xiàn)了這個需求，也很難分配出20%的精力去維護與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個視覺“噪聲”一直存在，如果事先能分析出這種結(jié)果，這個需求根本不需要增加。

2. 與長尾模型的對抗

在2004年長尾模型才被提出來的時候，很多人認為這是在顛覆80/20法則，它們的曲線長得很像，但結(jié)論完全相反，那條長長的“尾巴”（非關鍵的80%）所占據(jù)的長度幾乎與頭部的（關鍵的20%）高度相當，這說明收益雖低，但這么多數(shù)量的累積，依然值得重點關注。

所以有很多企業(yè)在采集差異化戰(zhàn)略時運用了長尾理論，例如小米搭建的全品類商城用的是長尾理論。

乍一聽好像很有道理，難道80/20法則被推翻了嗎？事實并非如此，長尾理論的成立必須要滿足兩個條件，第一是尾巴真的足夠長（小眾需求確實非常多），第二長尾巴能被用戶發(fā)現(xiàn)（龐大的用戶量），這兩個條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規(guī)模、且海量的用戶資源之上，不管多么隱蔽、多小的動能，總能擁有一些不錯的曝光度，所以才能發(fā)揮長尾模型的作用。

說道這里，大家應該就明白了，那些中小型的產(chǎn)品對長尾模型大多是望塵莫及，所以在你的產(chǎn)品規(guī)模、用戶量沒有達到一定的級別之前，就不要妄捧長尾模型，用好80/20法則就好。

五、結(jié)語

80/20法則在實際工作中是一個相對普遍的定律，它能讓我們靈活思考設計問題，更好的為用戶服務，雖然80/20法則也存在一定的爭議，但還是適用于覺絕大多數(shù)的場景，在關鍵時候使用，能幫助我們準確的找到問題點，在有限的時間和精力下快速作出優(yōu)化決策并、關注核心功能，最終達成目標。

專欄作家

大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

評論(0) 瀏覽(481)

062024-3

B端設計——組件庫—數(shù)據(jù)錄入&反饋&導航

前端達人

B端設計的文章和資料參考，缺少系統(tǒng)性的說明，這是我總結(jié)第五篇。本文主要闡述——數(shù)據(jù)錄入&反饋&導航

本文為B端設計組件庫的第五篇、也是組件庫系列的最后一篇，下一篇將更新B端設計中常見的問題合集來結(jié)束本系列。

一、引言

隨著企業(yè)對于數(shù)字化轉(zhuǎn)型的需求日益強烈，B端產(chǎn)品的發(fā)展也在加速。而B端組件庫，作為產(chǎn)品設計與開發(fā)的基礎構(gòu)建模塊，其重要性不言而喻。在眾多的組件中，“數(shù)據(jù)錄入”、“反饋”和“導航”是三個關鍵的組成部分，它們在很大程度上決定了產(chǎn)品的用戶體驗和工作效率。本文將對這三個組件進行深入的研究，探索其最佳的設計與實施策略。

二、B端組件庫中的數(shù)據(jù)錄入類組件應該如何搭建？如何進行多樣化設計？

2.1“數(shù)據(jù)錄入”類組件搭建過程

2.1.1搭建步驟：

需求分析：首先明確數(shù)據(jù)錄入的需求，包括需要錄入的數(shù)據(jù)類型、數(shù)據(jù)量、頻率等。

設計表單：根據(jù)需求設計合適的表單，包括輸入項的類型（文本、數(shù)字、日期等）、布局、標簽等。

添加驗證：為了確保數(shù)據(jù)的準確性，需要為表單添加合適的驗證規(guī)則，如必填項、格式驗證等。

考慮用戶體驗：為了提高數(shù)據(jù)錄入的效率，可以考慮添加一些方便用戶的功能，如自動填充、批量導入等。

測試與迭代：完成設計后，進行用戶測試，根據(jù)反饋進行必要的調(diào)整和優(yōu)化。

2.1.2注意事項：

明確性：確保每個輸入項的目的和要求都是清晰的，避免用戶產(chǎn)生困惑或誤解。

友好性：盡量簡化錄入流程，減少不必要的步驟和輸入。提供友好的提示信息和反饋，幫助用戶順利完成錄入。

響應速度：數(shù)據(jù)錄入過程中，系統(tǒng)的響應速度也是一個重要的考慮因素。確保系統(tǒng)在處理大量數(shù)據(jù)或復雜操作時仍能保持流暢。

安全性：對于敏感數(shù)據(jù)的錄入，需要確保系統(tǒng)的安全性，如使用加密技術、防止SQL注入等。

2.1.3常用場景：

用戶注冊：在注冊新用戶時，需要收集用戶的基本信息，如姓名、郵箱、密碼等。

商品管理：在電商或庫存管理系統(tǒng)中，添加或編輯商品信息時需要進行數(shù)據(jù)錄入。

訂單處理：處理訂單時，需要錄入訂單的相關信息，如客戶信息、商品信息、支付方式等。

數(shù)據(jù)導入：對于一些已經(jīng)存在的數(shù)據(jù)，提供批量導入的功能可以大大提高數(shù)據(jù)錄入的效率。

報表生成：生成報表時，用戶可能需要輸入一些參數(shù)或篩選條件，這也涉及到數(shù)據(jù)錄入的操作。

2.3如何進行多樣化設計？

進一步提升B端組件庫中“數(shù)據(jù)錄入”類組件的設計和擴展能力：

1. 增強交互與動效設計使用明顯的交互動效，如微動畫、過渡效果等，提升用戶輸入時的體驗。設計清晰的輸入狀態(tài)，如聚焦、失焦、有效、無效等，使用戶明確知道當前輸入的狀態(tài)。

2. 提供多種輸入格式和單位支持允許用戶選擇不同的輸入格式，如日期可以選擇“年-月-日”或“月/日/年”等格式。對于數(shù)字輸入，提供多種單位支持，如百分比、貨幣、科學計數(shù)等。

3. 設計可擴展的驗證規(guī)則系統(tǒng) 提供內(nèi)置的常見驗證規(guī)則，如必填、長度限制、正則匹配等。允許用戶自定義驗證規(guī)則，以滿足特定的業(yè)務需求。

4. 支持復雜數(shù)據(jù)結(jié)構(gòu)輸入設計支持數(shù)組、對象等復雜數(shù)據(jù)結(jié)構(gòu)的輸入組件。提供可視化編輯工具，方便用戶直接編輯復雜數(shù)據(jù)結(jié)構(gòu)。

5. 優(yōu)化鍵盤導航和快捷鍵支持允許用戶使用鍵盤快速導航和輸入數(shù)據(jù)，如使用Tab鍵在字段間切換。提供常用的快捷鍵支持，如Ctrl+C/V進行復制粘貼。

6. 設計可配置的界面和布局提供多種預設的界面風格和布局選項。允許用戶自定義界面元素和布局，以滿足不同的視覺需求。

7. 集成智能提示和自動補全功能使用機器學習算法為用戶提供輸入建議，減少輸入錯誤。對于重復輸入的數(shù)據(jù)，提供自動補全功能，提高輸入效率。

8. 支持多語言和本地化設置為不同語言和文化背景的用戶提供本地化支持。允許用戶自定義顯示的語言和格式設置。

9. 建立組件使用分析和反饋系統(tǒng) 收集并分析用戶使用數(shù)據(jù)錄入組件的數(shù)據(jù)，了解用戶的真實需求和習慣。建立用戶反饋系統(tǒng)，及時收集和處理用戶對組件的意見和建議。

三、B端組件庫中的反饋類組件應該如何搭建？有哪些注意事項？常用的場景有哪些？

在B端組件庫中，反饋類組件是非常重要的一部分，它們用于在必要時向用戶反饋操作結(jié)果，做到合理有效的信息傳達。

3.1搭建反饋類組件

確定反饋類型：根據(jù)需要，確定要使用的反饋類型，如提示、警告、錯誤、成功等。

設計反饋樣式：針對不同類型的反饋，設計相應的視覺樣式，如顏色、圖標、動畫等。

編寫組件代碼：根據(jù)設計好的樣式，編寫反饋類組件的代碼，包括HTML結(jié)構(gòu)、CSS樣式和JavaScript交互邏輯。

測試與優(yōu)化：對編寫好的組件進行測試，確保其在不同瀏覽器和設備上都能正常工作，并根據(jù)測試結(jié)果進行優(yōu)化。

3.2注意事項

反饋一致性：對于同一類型的消息反饋，使用同一類型的組件，以確保用戶在不同場景下獲得一致的體驗。

符合場景：不同的場景使用不同的反饋組件，例如系統(tǒng)主動推送消息類型的使用通知提醒框。

描述精確：合理而精確的消息提示文案描述，可以幫助用戶高效理解。

可關閉性：對于一些非關鍵性的反饋，提供用戶手動關閉的選項，避免打擾用戶。

適應性：確保反饋類組件在不同屏幕尺寸和分辨率下都能正常顯示和工作。

3.3常用場景

告警提示：當某個頁面需要向用戶提供告警信息時，使用告警提示。通常告警提示在頁面上不會自己消失，用戶可以手動關閉。

全局提示：在當前頁面以輕量級提示方式告知用戶操作的結(jié)果，使用全局提示。通常提示框在頁面頂部居中顯示并且會自動消失，不打斷用戶的其他操作行為。

通知提醒框：一般在系統(tǒng)主動推動通知的情況下使用，如服務到期、服務告警等。

加載提示：常用于數(shù)據(jù)加載中提示、操作中提示，Loading的文案可按照具體場景定義。

對話框：常用于比較強的二次確認彈框提示、或者展示一段比較長的消息。

四、B端組件庫中的導航類組件應該如何搭建？有哪些注意事項？常用的場景有哪些？

在B端組件庫中，導航類組件的設計和實現(xiàn)對于用戶體驗和系統(tǒng)效率至關重要。

4.1搭建導航類組件

確定導航結(jié)構(gòu)：根據(jù)系統(tǒng)的信息架構(gòu)和用戶需求，確定導航的結(jié)構(gòu)，如全局導航、局部導航、面包屑導航等。

設計導航樣式：針對不同類型的導航，設計相應的視覺樣式，如顏色、字體、圖標等。

編寫組件代碼：根據(jù)設計好的樣式和結(jié)構(gòu)，編寫導航類組件的代碼，包括HTML結(jié)構(gòu)、CSS樣式和JavaScript交互邏輯。

測試與優(yōu)化：對編寫好的組件進行測試，確保其在不同瀏覽器和設備上都能正常工作，并根據(jù)測試結(jié)果進行優(yōu)化。

4.2注意事項

清晰的信息架構(gòu)：確保導航的結(jié)構(gòu)能夠清晰地反映系統(tǒng)的信息架構(gòu)，使用戶能夠快速找到所需的信息。

易于理解：導航的標簽和名稱應使用用戶熟悉的術語，避免使用過于專業(yè)的術語或縮寫。

可擴展性：考慮到系統(tǒng)未來的發(fā)展，導航結(jié)構(gòu)應具備一定的可擴展性，以便添加新的功能或模塊。

響應式設計：確保導航在不同屏幕尺寸和分辨率下都能正常顯示和工作，提供良好的用戶體驗。

遵循設計規(guī)范：參考行業(yè)通用的設計規(guī)范和最佳實踐，確保導航的設計符合用戶的期望和習慣。

4.3常用場景

全局導航：適用于整個系統(tǒng)的主導航，通常位于頁面的頂部或側(cè)邊，提供對主要功能和模塊的快速訪問。

局部導航：適用于特定頁面或功能的子導航，幫助用戶在該頁面或功能內(nèi)快速找到所需的信息。

面包屑導航：顯示用戶當前所在的位置，以及從首頁到當前頁面的路徑，方便用戶了解自己的位置和返回上一級頁面。

下拉菜單：當導航項較多時，可以使用下拉菜單進行收納，節(jié)省頁面空間并提高用戶體驗。

標簽頁導航：適用于需要同時展示多個內(nèi)容或功能的場景，用戶可以在不同的標簽頁之間切換以查看或操作不同的內(nèi)容。

舉例說明：公司內(nèi)部不同系統(tǒng)，可采用的不同種類菜單導航，均可以設計先行。后續(xù)使用可進行調(diào)整

五、如何對“數(shù)據(jù)錄入”、“反饋”、“導航”進行C化設計？

對于數(shù)據(jù)錄入，關鍵在于簡化用戶的輸入過程，同時提供清晰直觀的界面。

例如，可以通過減少不必要的表單字段來簡化錄入流程，使用智能填充來加速輸入過程，并通過即時驗證和友好的錯誤提示來減少用戶的輸入錯誤。此外，考慮到移動設備用戶的增長，優(yōu)化表單的移動端設計，確保在小屏幕上也能輕松輸入，是至關重要的。這可能意味著增加觸摸友好的元素，如更大的點擊區(qū)域和適應屏幕大小的布局。

在反饋方面，提供即時、直觀且情感化的反饋對于增強用戶體驗至關重要。這包括在用戶完成任務或遇到錯誤時提供明確的視覺和文字提示。

例如，操作成功時可以顯示綠色的勾號圖標和正面的消息，而錯誤則可以用紅色的嘆號和說明性的錯誤消息來提示。增加動態(tài)反饋，如加載動畫，也可以提高用戶體驗，減少等待時的焦慮感。此外，提供易于訪問的幫助和支持選項，例如在線聊天或用戶論壇，可以幫助用戶在遇到問題時快速找到解決方案。

對于導航，設計的重點是確保用戶能夠直觀地理解如何在應用或網(wǎng)站中移動。

這涉及到創(chuàng)建清晰、一致的導航結(jié)構(gòu)，突出顯示主要功能，并使用易于理解的圖標和標簽。在移動設備上，這可能意味著采用漢堡菜單或底部導航條來節(jié)省空間。同時，考慮到個性化的重要性，可以提供自定義選項，讓用戶根據(jù)自己的偏好調(diào)整導航界面。綜上所述，C化設計強調(diào)的是提高易用性和用戶體驗，使得B端產(chǎn)品在保持專業(yè)性和功能性的同時，更貼近最終消費者的使用習慣。

六、結(jié)束

后續(xù)還有一篇“問題匯總”，之后會整理一些最近兩年的B端項目發(fā)布，感謝大家支持！！

其余篇章，可點擊主頁觀看！！

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

作者：張陽光Designer
鏈接：https://www.zcool.com.cn/article/ZMTU5OTM4OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(1727)

112024-1

探索家居之美：巧妙裝修設計點亮生活空間

前端達人

在現(xiàn)代生活中，家不僅是我們居住的地方，更是承載夢想、情感和溫馨的港灣。精心的裝修設計不僅可以為家增色添彩，更能為居住者創(chuàng)造出宜人舒適的生活環(huán)境。本文將探討一些巧妙的裝修設計理念，點亮居家生活空間。

1. 創(chuàng)意空間布局

裝修設計的第一步是合理規(guī)劃空間布局。通過巧妙的布局，可以最大限度地利用空間，使得家居更加通風明亮。采用開放式設計或者巧妙的隔斷，打破傳統(tǒng)的界限，使得家居更具動感和靈活性。

2. 色彩搭配的魅力

色彩是裝修設計中的靈魂。巧妙的色彩搭配能夠為家注入活力和個性。根據(jù)不同房間的功能和居住者的喜好，選擇合適的色調(diào)，營造出溫馨、舒適或者活潑的氛圍。同時，考慮光線的影響，讓色彩更加生動。

3. 自然元素的融入

自然元素是現(xiàn)代裝修設計中備受推崇的要素之一。通過引入植物、木材等自然元素，可以為家?guī)砬逍碌目諝夂蛯庫o的氛圍。綠色植物不僅美化環(huán)境，還有助于調(diào)節(jié)室內(nèi)空氣質(zhì)量，使居住更加健康。

4. 定制化家具的個性

定制化家具是打造獨特家居的重要途徑。根據(jù)家居空間的尺寸和個人需求，選擇定制家具，既可以充分利用空間，又能體現(xiàn)個性。獨特設計的家具不僅美觀實用，更是家的象征。

5. 光影設計的藝術

光影設計是裝修中的一門藝術。巧妙的燈光設計能夠調(diào)整空間氛圍，營造出溫馨、浪漫或者專注的氛圍。選擇合適的照明設備，根據(jù)房間的功能和布局，設計出有層次感的光影效果。

6. 智能家居的未來

隨著科技的不斷發(fā)展，智能家居已經(jīng)成為現(xiàn)代家居設計的新趨勢。智能化的家居設備可以為生活帶來更多便利，通過智能家居系統(tǒng)，可以實現(xiàn)家居的智能化控制，提升居住的舒適度和便捷性。

結(jié)語：設計家，添彩生活

家，是一個溫馨的港灣，也是生活的舞臺。通過巧妙的裝修設計，我們可以在家中創(chuàng)造出一個令人陶醉的生活空間。創(chuàng)意的布局、色彩的搭配、自然元素的融入，都是點亮家居的法寶。在設計的過程中，發(fā)揮想象力，打破傳統(tǒng)，定制個性化的家具，讓每一個空間都成為藝術的延伸。通過裝修設計，我們可以感受到家的溫暖，生活也因此變得更加豐富多彩。

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計

軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1366)

112024-1

探索UI設計的奇妙世界：創(chuàng)新、美感與用戶體驗

前端達人

在數(shù)字化的時代，用戶界面（UI）設計已經(jīng)超越了簡單的美觀外觀，它成為了數(shù)字產(chǎn)品成功的關鍵因素之一。一個令人愉悅、易用的UI設計不僅吸引用戶，更能夠幫助品牌在競爭激烈的市場中脫穎而出。在本文中，我們將深入探討UI設計的奇妙世界，探討創(chuàng)新、美感與用戶體驗的重要性。

1. 創(chuàng)新引領潮流

UI設計的核心是創(chuàng)新。通過引入獨特的設計元素、交互方式和動效，設計師們能夠打破傳統(tǒng)界限，創(chuàng)造出令人驚艷的用戶體驗。在設計過程中，考慮用戶的需求和行為，將創(chuàng)新融入產(chǎn)品，使用戶感受到與眾不同的數(shù)字世界。

2. 美感與品牌形象

美感是UI設計的靈魂。吸引用戶的第一眼往往決定了他們是否愿意留下并繼續(xù)使用產(chǎn)品。精心設計的顏色搭配、字體選擇以及圖形元素，不僅構(gòu)建了令人難以忘懷的用戶界面，也能夠加強品牌形象。一致的設計語言和品牌標識，將品牌的價值傳遞給用戶。

3. 用戶體驗的黃金法則

用戶體驗（UX）是UI設計的至高追求。一個優(yōu)秀的UI設計應當始終以用戶為中心，關注用戶需求、習慣和心理。簡潔而直觀的界面、合理的信息架構(gòu)以及高效的操作流程，都是提高用戶體驗的關鍵因素。通過不斷優(yōu)化用戶的互動過程，提升用戶的滿意度和忠誠度。

4. 響應式設計的未來趨勢

隨著移動設備的普及，響應式設計成為了不可忽視的趨勢。UI設計師需要考慮不同設備上的顯示效果，確保用戶在不同屏幕尺寸上都能獲得一致而流暢的體驗。這不僅提高了用戶滿意度，也有助于網(wǎng)站在搜索引擎中的排名。

5. 數(shù)據(jù)驅(qū)動的優(yōu)化

UI設計不僅僅是一門藝術，更是一門科學。通過使用數(shù)據(jù)分析工具，設計師可以深入了解用戶行為、流量和互動。這些數(shù)據(jù)可以為設計優(yōu)化提供有力的依據(jù)，幫助設計師更好地了解用戶需求，不斷改進和優(yōu)化界面。

結(jié)語：設計的魔力

UI設計是數(shù)字產(chǎn)品成功的關鍵之一。在競爭激烈的市場中，一個創(chuàng)新、美觀且用戶體驗出色的UI設計能夠讓產(chǎn)品脫穎而出。通過將創(chuàng)新、美感和用戶體驗融入設計的每個層面，設計師們可以引領品牌進入數(shù)字化的未來，為用戶創(chuàng)造出令人愉悅的、難以忘懷的數(shù)字體驗。在這個數(shù)字化的奇妙世界里，UI設計是連接品牌和用戶的橋梁，也是探索數(shù)字創(chuàng)新的引導者。

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計

軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1289)

052024-1

ui表單驗證問題

前端達人

首先展示正確的格式(以驗證是否為空為例):

html代碼塊:

<el-form :model="nodeName(數(shù)組名)" ref="nodeName(數(shù)組名)">
<el-form-item prop="name(數(shù)組內(nèi)的屬性)" label="內(nèi)容:" :rules="[{ required: true, message: '不能為空'}]">
<el-input type="name(數(shù)組內(nèi)的屬性)" v-model="nodeName.name(數(shù)組內(nèi)的屬性)"></el-input>
</el-form-item>
</el-form>

js代碼塊:

data(){
return{
// 表單
nodeName:{
name:''
}
}
},

前端展示(輸入內(nèi)容后顯示為空消失):

下面開始總結(jié)常見的問題以及功能失效的原因.

1. input左側(cè)出現(xiàn)星號,內(nèi)容為空卻不提醒

原因:已經(jīng)寫好了驗證功能,但是沒有綁定到input框 .

解決方法:是<el-form-item>標簽加入prop="數(shù)組內(nèi)要驗證的屬性"或者<el-input>標簽中加入type="數(shù)組內(nèi)要驗證的屬性".

2.input框里已經(jīng)有內(nèi)容,但還是顯示不能為空

(一)原因:input有數(shù)據(jù),但是表單沒有驗證到.

解決方法:給<el-form>綁定整個數(shù)組.v-model="newName".

(二)原因:表單驗證綁定的不是數(shù)組,只是一個單純的ojbect或者number或者char類型

如此種情況,無論輸入什么都會提示為空.

解決方法:將綁定驗證內(nèi)容變成數(shù)組【也可以把表單驗證寫在data里面】

[表單驗證只能綁定數(shù)組,如果單純綁定一個數(shù)值,會出現(xiàn)驗證不到的現(xiàn)象發(fā)生]!!!!!!!!!

3.提交表單按鈕無法驗證以及符合驗證的表單內(nèi)容,也就是提交失敗.

此情況一般報錯為兩個:

Element-ui官方樣式表單提交函數(shù)功能是這樣展示的:

newNameBtn(newName) {
this.$refs[newName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},

我們可以看到方法是this.$refs[數(shù)組名].validate(() =>{})或者this.$refs.數(shù)組名.validate(() =>{})這樣一個函數(shù).

如果你用的html5或者是其他不顯示參數(shù)的集成工具,代碼是這樣的:

并不知道這個this.$refs有沒有真正的請求到,如果你用的顯示參數(shù)的集成工具(如phpstorm),如果你的代碼正確,會這樣顯示:

我們看到會多顯示一個callback,這就說明this.$refs生效了.

所以不管你使用說明軟件寫的代碼,如果出現(xiàn)表單驗證提交錯誤.也就是現(xiàn)實開頭那兩個錯誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數(shù)組]

看看輸出是一個對象還是undefine.顯示這個對象說明this.$refs.newName請求成功.

如果顯示undefine,可以這樣改正:

(一)你的代碼格式書寫錯誤,請比照上文有紅箭頭的圖正確案例改正格式.

(二)你的<el-form>未綁定ref,請給<el-form>標簽綁定ref="newName"[此處的newName是你自己綁定的數(shù)組]

出現(xiàn)表單驗證錯誤先比對案例 ,然后再按照自己的具體代碼綁定自己的數(shù)據(jù).

[注:Element-ui的表單驗證一定是綁定的數(shù)組類型]

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

免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1514)

052024-1

js判斷屏幕分辨率的代碼

前端達人

一般我們可以通過下面的代碼判斷分辨率

復制代碼代碼如下:
<script language="JavaScript">

</script>

js判斷瀏覽器分辨率

復制代碼代碼如下:
<script>
function ScreenWidth(){
if (screen.width == 1440){
alert("1440*900");
}else if (screen.width == 800){
alert("800*600");
}else if (screen.width == 1152){
alert("1152*864");
}else {
alert("do not know!");
}
}
</script>
<input type="button" name="" value="fenbianli " οnclick=" ScreenWidth()"/>
內(nèi)容來自17jquery

說明：這段js代碼可改造一下，改為screen.width>=1024 screen.width=800兩種情況

所以我選擇使用下面的代碼：

復制代碼代碼如下:
if(screen.width>=1440){
alert('寬屏幕可以加載廣告了');
//一些廣告代碼
}

用JS判斷不同分辨率調(diào)用不同的CSS樣式文件

最近看一個網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，今天寫了一個例子研究一下，
復制代碼代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.οnlοad=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //獲取屏幕的的寬度
{
sc.setAttribute("href","css/c2.css"); //設置css引入樣式表的路徑
d.innerHTML = "你的電腦屏幕寬度大于1024，我的寬度是 1200px, 背景色現(xiàn)在是紅色。";
}
else{

sc.setAttribute("href","css/c1.css"); 17jquery.com
d.innerHTML = "你的電腦屏幕寬度小于或是等于1024，我的寬度是 960px, 背景色現(xiàn)在是藍色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>

c1.css里面的內(nèi)容

復制代碼代碼如下:
*{ margin:0; padding:0;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}

c2.css里面的內(nèi)容

*{ margin:0; padding:0;}

div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}

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

免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1309)

042024-1

Vue新建項目+git托管+初始配置+項目打包優(yōu)化

前端達人

1、已全局安裝vue-cli和nodejs（第一次需要）

2、利用Vue-cli創(chuàng)建項目

打開項目所在文件夾
vue create ‘項目名’
選擇手動配置

babel：js編輯器
typeScript：超集js【需要指定數(shù)據(jù)類型】
PWA：離線可用
Linter/Formatter：約束代碼規(guī)范，配合eslint
unit/e2e testing：測試
在這里插入圖片描述

3、git遠程倉庫初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項目托管

新建倉庫，給倉庫命名即可，無任何勾選
第二次新建倉庫，不需要再git全局設置
已經(jīng)創(chuàng)建了項目，進入vscode終端（管理員）（or cmd進入項目路徑）
git init
執(zhí)行橙色代碼（第一句表示遠程倉庫地址，第二句表示首次推送主分支到云端倉庫，origin為云倉庫別名）

在這里插入圖片描述

5、項目文件夾

node_modules:放置項目依賴的地方
public:一般放置一些共用的靜態(tài)資源，包括頁簽圖標、index.html，打包上線的時候，public文件夾里面資源原封不動打包到dist文件夾里面；<%= BASE_URL %>是public所在路徑，使用絕對路徑

腳手架目錄public和assets區(qū)別：參考鏈接
在這里插入圖片描述

src：程序員源代碼文件夾

assets文件夾：經(jīng)常放置一些靜態(tài)資源（圖片），assets文件夾里面資源webpack會進行打包為一個模塊（js文件夾里面）
components文件夾:一般放置非路由組件（或者項目共用的組件）
App.vue 唯一的根組件
main.js 入口文件【程序最先執(zhí)行的文件】
babel.config.js:babel配置文件【翻譯官：如ES6翻譯成ES5，兼容好】
package.json：應用包配置文件；看到項目描述、項目依賴、項目運行指令【項目信息記錄：‘項目身份證’】
package-lock.json: 包版本控制文件
.gitignore: git版本管制忽略的配置
README.md:項目說明文件

補充：通過 vue.config.js 可以修改 webpack 的默認配置
在這里插入圖片描述

6、初始配置

a. 瀏覽器自動打開html，vue-cli-service serve --open

在package.json文件中
        "scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

1
2
3
4
5
6

b.關閉eslint校驗工具

創(chuàng)建vue.config.js文件：需要對外暴露
module.exports = {
   lintOnSave:false,
}

1
2
3
4

c. src文件夾的別名的設置【@表示src文件夾，@在"node_modules","dist"不能用】

創(chuàng)建jsconfig.json文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7、后臺項目的環(huán)境安裝配置；參考黑馬項目

MySQL數(shù)據(jù)庫；
Node.js環(huán)境【因為后臺接口依賴Node.js】 Nodejs安裝及環(huán)境配置鏈接
安裝API依賴包；
postman測試后臺項目接口：【安裝與使用見連接】
https://blog.csdn.net/m0_61843874/article/details/123324727
https://www.bilibili.com/video/BV1hP4y177gS/?spm_id_from=333.337.search-card.all.click&vd_source=c4d71976fd97f04545873bc4552dfb71
選擇好請求方式；輸入URL；body——x-www-form-urlencoded（普通形式輸入請求參數(shù)）

8、清除初始靜態(tài)樣式，梳理app.vue根組件

9、清除初始路由配置；清除初始的路由組件和非路由組件

新建routes.js放路由規(guī)則在這里插入圖片描述

10、生成項目報告

npm run build  -- --report

1

11、項目優(yōu)化

Vue項目在執(zhí)行build命令期間中移除所有console.log 鏈接
通過 vue.config.js 可以修改 webpack 的默認配置
為開發(fā)模式與發(fā)布模式指定不同的打包入口

3.1 打包入口的修改，可以通過 configureWebpack和 chainWebpack節(jié)點來實現(xiàn)：

3.2 通過 chainWebpack 自定義打包入口
新建./src/main-prod.js和./src/main-dev.js文件；在vue.config.js進行如下配置

chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }

1
2
3
4
5
6
7
8

通過externals 加載外部 CDN 資源，對于externals中的第三方依賴包，在用到依賴包的時候，會找window全局對象上查找并直接使用現(xiàn)成的對象，能夠讓打包的項目體積更小；只有production模式才有必要配置externals節(jié)點

第一步：vue.config.js——>配置externals節(jié)點
在這里插入圖片描述

//配置后的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  // 通過 chainWebpack 為開發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vpe</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">nprogress</span><span class="token operator">:</span><span class="token string">'NProgress'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

} })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

第二步：導入的樣式表也會被導入到輸出文件中，導致體積大；臨時注釋掉main.prod.js中的import的VueQuillEditor樣式表；進行如下配置；【注意版本號】
在這里插入圖片描述
進一步添加js文件的CDN引用：

<!-- 富文本編輯器樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css"/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

1
2
3
4
5
6
7
8
9
10
11
12
13

.通過 CDN 優(yōu)化 ElementUl 的打包

第一步：在這里插入圖片描述

<!-- element-ui的樣表文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />
    <!-- element-ui的 js 又件-->
    <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

1
2
3
4

第二步：臨時注釋掉
// 引入自定義插件（封裝element按需引入模塊）
// import element from ‘./plugins/element’

首頁內(nèi)容定制（根據(jù)production模式和development模式定制）
不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同，我們可以通過插件的方式進行定制；
isProd的值為True表示production模式，為FALSE表示development模式；

第一步：對vue.config.js中chainWebpack的屬性進行調(diào)整：

// 通過 chainWebpack 為開發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 1、發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vue</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同</span>
  <span class="token comment">// 我們可以通過插件的方式進行定制，根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)，發(fā)布模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">true</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 2、開發(fā)模式</span>
config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同</span>
  <span class="token comment">// 我們可以通過插件的方式進行定制，根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)，開發(fā)模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

第二步：在public/index.html首頁中，可以根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)

<title><%=htmlWebpackPlugin.options.isProd?'':'dev-' %>電商后臺管理系統(tǒng)</title>

<% if(htmlWebpackPlugin.options.isProd){ %>
前面CDN引入的依賴資源（富文本編輯器+elemen-ui）
<% } %>

前面CDN引入的依賴資源（富文本編輯器+elemen-ui），代碼如下：

<link rel="stylesheet" href="/>
<link rel="stylesheet" href=" />
<link rel="stylesheet" href="/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> 

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的樣表文件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的 js 又件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/index.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

第三步：由于對首頁內(nèi)容根據(jù)production模式和development模式進行了定制，需要將前面注釋掉的富文本編輯器樣式，以及element-ui樣式引入取消注釋，最終項目會根據(jù)不同模式展示首頁

7. 路由懶加載
當打包構(gòu)建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后**[當路由被訪問的時候才加載對應組件**]，這樣就會更加高效。

簡化：
不需要在route.js文件 import UserDetails from ‘./views/UserDetails.vue’；直接路由懶加載
{
name:‘search’, //商品搜索
path:‘/search’,
component:()=>import(‘@/pages/Search’), [路由被訪問才加載組件]

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

免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1680)

272023-12

【Git】取消上一次commit或push

(轉(zhuǎn)自csdn)

一、取消上一次commit

如果你需要取消上一次的 Git 提交，有幾個不同的方法可以實現(xiàn)。其中包括撤消提交、提交到新的分支、使用 Git 回滾等等。

下面介紹三種方法：

方法1：使用 Git reset

使用 Git reset 命令來取消上一次提交：

git reset HEAD~1

這會把 HEAD 指針移回上一個提交（HEAD~1），并清除最后一次提交的內(nèi)容。

或

git reset HEAD^

撤回兩次或者n次

git reset HEAD~2

方法2：使用 Git revert

使用 Git revert 命令來撤消上一次提交并創(chuàng)建一個新的提交來撤消原來的提交：

git revert HEAD

這會創(chuàng)建一個新的提交來撤消提交之前的更改。在命令行中輸入該命令后，你需要編輯撤消的提交信息，以便 Git 創(chuàng)建一個新的提交。

方法3：使用 Git checkout

還可以使用 Git checkout 命令來將工作樹恢復到上一次提交的狀態(tài)。這將清除所有未提交的更改，所以請確保你有一個備份：

git checkout HEAD~1

這會將工作樹恢復到上一次提交的狀態(tài)，也就是你上一次提交之前的狀態(tài)。請注意，這里的修改都將被丟棄。

無論你使用的是哪種方法，請確保在撤消提交之前首先備份你的工作。這可以幫助你避免在操作過程中意外刪除無法恢復的內(nèi)容。

二、取消上一次push

如果你已經(jīng)push了代碼，并且想要撤回這個commit，可以通過以下步驟實現(xiàn)：

git push --force

首先，在使用git push命令時，需要加上--force參數(shù)，強制覆蓋遠程倉庫上已經(jīng)存在的commit。命令如下：

git push --force origin <branch_name>

其中，<branch_name>表示你要撤銷的分支名稱。

git reflog

如果在本地倉庫沒有回到該commit的上一個狀態(tài)，需要使用git reflog命令找到該commit的SHA-1值。命令如下：

git reflog

該命令會列出整個Git倉庫的提交歷史記錄，包括HEAD指針所指向的提交和已經(jīng)被廢棄的提交。

git reset

找到要回到的某個commit的SHA-1值，然后使用如下命令回到該commit的狀態(tài)：

git reset --hard <commit_SHA-1>

其中，<commit_SHA-1>表示要回到的commit的SHA-1值。

git push --force

然后使用之前的推送命令進行推送，添加--force參數(shù)，覆蓋遠程倉庫的歷史提交記錄。命令如下：

git push --force origin <branch_name>

提醒：使用git push --force命令可能會導致遠程倉庫、其他成員的倉庫和歷史版本產(chǎn)生不可逆的影響，因此操作時需要謹慎。一般情況下，在工作流中使用git revert命令回滾某個commit，以保證版本控制的完整性和可維護性。

三、擴展

git log 查看提交日志

commit參數(shù)

--mixed

不刪除工作空間改動代碼，撤銷 commit，并撤銷 git add . 操作

git reset --mixed HEAD^ 效果等同 git reset HEAD^

--soft

不刪除工作空間改動代碼，撤銷commit，不撤銷git add .

--hard

刪除工作空間改動代碼，撤銷commit，撤銷git add .

--amend

修改注釋, 進入vim編輯器, 改完:wq即可

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(2179)

272023-12

國內(nèi) Linux 集群服務器網(wǎng)絡差無法 Git Clone 大項目的解決辦法

前端達人

GitHub 是一個軟件源代碼托管服務平臺，Linux 上使用的大部分工具都可以在上面獲得。

但是由于 GitHub 的服務器在國外，國內(nèi)訪問經(jīng)常出現(xiàn)網(wǎng)絡問題導致訪問失敗，尤其是使用 git clone 對 repo 進行克隆的時候，會經(jīng)常出現(xiàn)因網(wǎng)絡問題而克隆失敗。

Linux 集群服務器的用戶，在比較難實現(xiàn)科學上網(wǎng)的前提下，對大型 repo 克隆的任務顯得尤為困難，而且想使用 gradle build 的話，git clone 似乎是唯一選擇。

既然 git clone 一兩次不成功，那我就想辦法讓他 clone 到成功為止，于是我就寫了一個循環(huán)腳本，將它投遞到計算節(jié)點上 24h 運行，直到它克隆成功才結(jié)束任務。

以克隆 GATK （repo 大小約 300mb）為例，腳本如下：

#!/bin/bash
#SBATCH --job-name=GitClone        #任務名稱
#SBATCH --nodelist=litchi-0-1    #計算節(jié)點名稱
#SBATCH --partition=WHEEL        #使用 WHEEL 用戶組
#SBATCH --nodes=1                #使用計算節(jié)點數(shù)量
#SBATCH --ntasks=1                #使用 1 個線程
#SBATCH --mail-type=end            #任務結(jié)束時發(fā)送郵件
#SBATCH --mail-user=***@qq.com  #郵箱地址
#SBATCH --output=/home/$USER/Slurm_JobLogs/JobLog_%j_%x.log        #標準輸出保存路徑
#SBATCH --error=/home/$USER/Slurm_JobLogs/JobLog_%j_%x.err        #標準錯誤保存路徑
#------------------------------------------------------------
# PRINT JOB'S INFORMATION
  source /home/$USER/.bashrc
  threads=$SLURM_NTASKS
  echo "## Job:[$SLURM_JOB_NAME]"
  echo "## Node:[$SLURM_NODELIST]"
  echo "## CPUs:[$SLURM_NTASKS]"
  echo "## Mem:[$SLURM_MEM_PER_NODE]"
  echo `date`
  echo -e $(printf -- "-%.0s" {1..100})"\n" #cut-off-line
#------------------------------------------------------------
# PATH
  repo_url="https://github.com/broadinstitute/gatk.git"
  repo_name="gatk"
#------------------------------------------------------------
# SHELL
  cd /home/$USER/Accessories/Softwares
  while true; do                #循環(huán)執(zhí)行任務
    git clone $repo_url            #執(zhí)行 git clone
    if [ $? -eq 0 ]; then        #如果以上命令的退出碼等于 0 (任務成功)
      echo "Git clone successful!"
      break                        #則退出循環(huán)
    else                        #如果命令的退出碼不等于 0 (任務失敗)
      echo "Git clone failed:( Retrying..."
      rm -rf ./${repo_name}        #則刪除這個repo
      sleep 1                    #睡眠 1 秒緩沖一下繼續(xù)循環(huán)
    fi
  done
#------------------------------------------------------------
# JOB ENDS
  echo -e $(printf -- "-%.0s" {1..100}) #cut-off-line
  echo "## Runtime:[`sacct -j $SLURM_JOB_ID --format=Elapsed --noheader | awk '{print $1}' | sed -n '2p'`]"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

這個腳本的路徑為 ~/Scripts/GitClone_GATK.sh

將任務投遞到計算節(jié)點運行：

sbatch ~/Scripts/GitClone_GATK.sh

1

最終，這個任務運行了 40 次，歷時 13h，終于是克隆成功了！

藍藍設計(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件 UI界面設計、能源及監(jiān)控軟件 UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件 UI界面設計、醫(yī)療行業(yè)軟件 UI界面設計、教育行業(yè)軟件 UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(2011)