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

          首頁

          使用react 開發一個左側三級菜單

          前端達人

          以下是一個使用React開發的左側三級菜單的基本示例:


          import React, { useState } from 'react';
          
          const Menu = () => {
            const [menuItems, setMenuItems] = useState([
              {
                id: 1,
                name: 'Menu Item 1',
                subMenuItems: [
                  { id: 1, name: 'Sub-menu Item 1' },
                  { id: 2, name: 'Sub-menu Item 2' }
                ]
              },
              {
                id: 2,
                name: 'Menu Item 2',
                subMenuItems: [
                  { id: 3, name: 'Sub-menu Item 3' },
                  { id: 4, name: 'Sub-menu Item 4' }
                ]
              }
            ]);
          
            const [selectedMenuItem, setSelectedMenuItem] = useState(null);
            const [selectedSubMenu, setSelectedSubMenu] = useState(null);
          
            const handleMenuItemClick = (menuItem) => {
              setSelectedMenuItem(menuItem.id);
              setSelectedSubMenu(null);
            };
          
            const handleSubMenuClick = (subMenuItem) => {
              setSelectedSubMenu(subMenuItem.id);
            };
          
            return (
              <div className="menu">
                {menuItems.map((menuItem) => (
                  <div key={menuItem.id}>
                    <button onClick={() => handleMenuItemClick(menuItem)}>
                      {menuItem.name}
                    </button>
                    {selectedMenuItem === menuItem.id && (
                      <ul>
                        {menuItem.subMenuItems.map((subMenuItem) => (
                          <li key={subMenuItem.id}>
                            <button onClick={() => handleSubMenuClick(subMenuItem)}>
                              {subMenuItem.name}
                            </button>
                            {selectedSubMenu === subMenuItem.id && (
                              <ul>
                                <li>Sub-menu item details</li>
                              </ul>
                            )}
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                ))}
              </div>
            );
          };
          
          export default Menu;
          







          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          使用layui 寫一個左側導航菜單 至三級目錄

          前端達人

          HTML代碼:

          <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
              <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                  <a href="javascript:;">菜單1</a>
                  <dl class="layui-nav-child">
                    <dd><a href="javascript:;">子菜單1-1</a></dd>
                    <dd><a href="javascript:;">子菜單1-2</a></dd>
                    <dd><a href="javascript:;">子菜單1-3</a></dd>
                  </dl>
                </li>
                <li class="layui-nav-item">
                  <a href="javascript:;">菜單2</a>
                  <dl class="layui-nav-child">
                    <dd><a href="javascript:;">子菜單2-1</a></dd>
                    <dd><a href="javascript:;">子菜單2-2</a></dd>
                    <dd>
                      <a href="javascript:;">子菜單2-3</a>
                      <dl class="layui-nav-child">
                        <dd><a href="javascript:;">子菜單2-3-1</a></dd>
                        <dd><a href="javascript:;">子菜單2-3-2</a></dd>
                        <dd><a href="javascript:;">子菜單2-3-3</a></dd>
                      </dl>
                    </dd>
                  </dl>
                </li>
              </ul>
            </div>
          </div>
          

          JavaScript代碼:


          //JavaScript代碼需要引入layui.js文件
          layui.use('element', function(){
            var element = layui.element;
          });
          
          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作,也請與我們聯系01063334945。  分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。  藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。 
          
          

          淺講一下 Label Studio

          前端達人

          Label Studio是一種基于Web的開源注釋工具,旨在幫助數據科學家和機器學習工程師更輕松地創建高質量的標簽數據集。它支持多種類型的注釋任務,如文本分類、實體識別、圖像分類等,并且可以集成到現有的機器學習流程中。Label Studio還具有可擴展性和靈活性,可以適應不同的數據類型和注釋需求。


          Label Studio的使用一般分為三個階段:部署、標注和導出數據。

          1. 部署:可以通過下載源代碼進行本地安裝,也可以使用Docker容器快速部署。此外,Label Studio還提供了在云端使用的選項,如Amazon Web Services(AWS)和Google Cloud Platform(GCP)。

          2. 標注:通過創建項目、上傳數據、定義任務類型和注釋模式等步驟,可以開始進行標注。Label Studio支持多種注釋任務,如文本分類、實體識別、圖像分類等。標注人員可以在網頁上直接進行標注,也可以使用API或CLI工具進行標注。

          3. 導出數據:標注完成后,可以將標注結果導出為不同格式的數據集,如JSON、CSV、TSV、YAML等,以供機器學習算法使用。

          對于開發者而言,可以通過自定義插件和擴展來定制化和豐富Label Studio的功能。Label Studio提供了完備的文檔和API參考,使得開發者可以更加便捷地進行開發和調試工作。





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          使用 react 寫一個基礎表單頁面

          前端達人

          import React, { useState } from 'react';
          
          function BasicForm() {
            const [formData, setFormData] = useState({
              name: '',
              email: '',
              message: ''
            });
          
            const handleChange = (event) => {
              const { name, value } = event.target;
              setFormData({ ...formData, [name]: value });
            };
          
            const handleSubmit = (event) => {
              event.preventDefault();
              console.log(formData);
            };
          
            return (
              <form onSubmit={handleSubmit}>
                <label>
                  Name:
                  <input type="text" name="name" value={formData.name} onChange={handleChange} />
                </label>
                <label>
                  Email:
                  <input type="email" name="email" value={formData.email} onChange={handleChange} />
                </label>
                <label>
                  Message:
                  <textarea name="message" value={formData.message} onChange={handleChange} />
                </label>
                <button type="submit">Submit</button>
              </form>
            );
          }
          
          export default BasicForm;
          





          此表單組件具有三個輸入字段:名稱、電子郵件和消息。useState Hook 用于存儲表單數據,并且 handleChange 函數處理輸入字段值的更改。handleSubmit 函數在提交表單時被調用并打印出表單數據至控制臺。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          簡單講一下React

          前端達人

          React 是由 Facebook 開發的一個用于構建用戶界面的 JavaScript 庫。以下是 React 快速入門的步驟:

          1. 安裝 React:可以通過命令行工具使用 npm 或者 yarn 安裝 React。

          2. 創建 React 應用程序:可以使用腳手架工具(如 create-react-app)快速創建基本的 React 應用程序。

          3. 編寫組件:React 的核心是組件,您需要編寫組件來構建應用程序。組件是一個可重復使用的代碼塊,它包含了 HTML 和 JavaScript 代碼。

          4. 渲染組件:使用 ReactDOM.render() 方法將組件渲染到頁面上。

          5. 處理事件:React 使用類似 HTML 的語法來處理事件。在組件中定義事件處理程序,例如 onClick 或者 onSubmit,并將其綁定到相應的元素上。

          6. 狀態管理:React 允許您使用狀態來管理數據。您可以使用 setState() 方法更新組件的狀態,并在組件中讀取狀態以顯示不同的內容。

          7. 生命周期:React 組件有生命周期方法,這些方法允許您在組件生命周期內執行操作。例如,componentDidMount() 方法在組件被掛載后執行一次,用于初始化數據。

          這些是 React 快速入門的基本步驟。要深入了解 React,請查閱相關文檔和教程。




          React 生命周期指的是React組件在掛載(mounting)、更新(updating)和卸載(unmounting)等不同階段所經歷的生命周期方法,包括:

          1. 掛載階段:constructor、static getDerivedStateFromProps、render、componentDidMount。
          2. 更新階段:static getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate。
          3. 卸載階段:componentWillUnmount。

          其中,constructor()是組件實例化時第一個被調用的方法;static getDerivedStateFromProps()將props映射為state的方法;render()渲染組件的虛擬DOM;componentDidMount()在組件掛載后執行;shouldComponentUpdate()控制組件是否需要重新渲染;getSnapshotBeforeUpdate()捕獲更新前的DOM狀態;componentDidUpdate()在組件更新后執行;componentWillUnmount()在組件卸載前執行清理操作。





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          簡單講一下vue生命周期 與

          前端達人

          Vue組件實例在創建、更新和銷毀過程中,會依次觸發一些鉤子函數,這些鉤子函數稱為Vue生命周期函數。Vue的生命周期分為四個階段:創建階段、掛載階段、更新階段和銷毀階段。

          1. 創建階段:

          在創建階段,Vue實例正在被創建,這個階段中包含了實例化、數據觀測、事件/鉤子初始化等過程。具體包括以下鉤子函數:

          • beforeCreate: 在實例剛被創建之后,數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
          • created: 實例已經完成數據觀測 (data observer),屬性和方法的運算,watch/event 事件回調,但還沒有開始 DOM 操作。可以訪問到computed等屬性。
          1. 掛載階段:

          在這個階段,Vue實例將模板渲染成真實的DOM并進行掛載到頁面上。具體包括以下鉤子函數:

          • beforeMount: 在模板編譯/掛載之前被調用。
          • mounted: el被新創建的 vm.$el 替換,并掛載到實例上去之后調用該鉤子函數,此時組件已經出現在頁面中。
          1. 更新階段:

          在這個階段,當Vue實例的數據變化時,它會重新渲染虛擬DOM并更新到頁面上。具體包括以下鉤子函數:

          • beforeUpdate: 數據更新時調用,發生在虛擬DOM重新





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          簡單實用layui 實現前端換膚功能

          前端達人

          使用layui實現前端換膚功能可以通過以下幾個步驟完成:

          1. 安裝layui:我們需要從官方網站下載安裝layui。你可以在https://www.layui.com/下載最新版本。

          2. 引入樣式文件:在HTML頁面中引入需要的樣式文件。我們可以使用layuicss提供的樣式表來實現各種外觀效果。如果您需要自定義樣式,請創建自己的CSS文件,并在HTML中引入。

          3. 創建主題顏色列表:我們需要創建一個包含所有可用主題顏色的列表。您可以使用數組或JSON對象來創建此列表。例如:

          javascript復制代碼
          var themeColors = [ {name: '默認', color: '#009688'}, {name: '橙色', color: '#FFB800'}, {name: '墨綠', color: '#393D49'}, {name: '紫色', color: '#800080'}, {name: '深藍', color: '#285FD3'} ];
          1. 配置皮膚切換組件:在JavaScript代碼中配置皮膚切換組件。您可以使用layui提供的switch組件或其它插件。例如:
          javascript復制代碼
          layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; // 初始化顏色選擇器 colorpicker.render({ elem: '#theme-color-picker', colors





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          vue 簡介與使用

          前端達人

          Vue.js是一款非常流行的JavaScript框架,用于構建單頁Web應用程序(SPA)。它的設計目標是簡單、靈活和易于使用。Vue.js提供了許多有用的功能,可以幫助開發人員更輕松地構建響應式、動態的用戶界面。在本文中,我們將介紹Vue.js的基礎知識,以及如何使用Vue.js來創建一個簡單的Web應用程序。

          首先,讓我們來看一下Vue.js的核心思想。Vue.js采用了MVVM(Model-View-ViewModel)的架構模式。這種模式將應用程序分為三個部分:模型(Model)、視圖(View)和視圖模型(ViewModel)。模型表示應用程序的數據,視圖表示UI,而視圖模型則是將兩者鏈接起來的橋梁。Vue.js的核心就是它的響應式系統。當模型的狀態發生改變時,視圖會自動更新,反之亦然。這使得開發人員可以更加專注于業務邏輯的實現,而不需要手動處理DOM操作。

          接下來,讓我們看一下Vue.js的基礎語法。Vue.js通過指令(Directive)來擴展HTML。指令以v-開頭,并且在表達式中使用。例如,v-bind指令用于將一個屬性綁定到表達式上,v-model指令用于雙向綁定表單元素和應用程序狀態之間的數據。Vue.js還提供了許多其他指令,


          一、核心概念

          1. 模板語法:Vue.js使用了一種類似于HTML的模板語法來聲明渲染和組合DOM元素。模板語法被稱為Vue指令,可以通過{{ }}和v-前綴在模板中使用。其中{{ }}用于文本插值,而v-則用于Vue.js提供的各種指令。

          2. 數據綁定:Vue.js的核心是響應式數據綁定系統,它能夠自動跟蹤并響應數據對象和視圖之間的變化。當數據發生變化時,Vue會立即更新視圖以反映這些變化。

          3. 組件化:Vue.js允許我們將UI分解為可重用和獨立的組件。每個組件都有自己的狀態和行為,并且可以與其他組件組合使用。這種組件化方法使得代碼更容易維護、測試和復用。

          4. 生命周期鉤子函數:Vue.js提供了一組生命周期鉤子函數,在不同階段執行自定義邏輯。這些鉤子函數包



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          關于layui的簡介與使用

          前端達人

          layui是一款基于jQuery的前端UI框架,它的設計理念是“零門檻”,使得開發者可以快速地構建出美觀、易用的界面。下面將從以下幾個方面介紹layui框架的使用。

          1. 安裝和引入

          你可以從layui官網下載最新版本的layui壓縮包,也可以使用npm進行安裝。在HTML文件中,只需要引入layui.js和layui.css兩個文件即可開始使用:

              
          html復制代碼
          <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Webpage</title> <link rel="stylesheet" href="path/to/layui/css/layui.css"> </head> <body> <script src="path/to/layui/layui.js"></script> </body> </html>

          2. 常用組件

          layui提供了許多常用的UI組件,例如按鈕、表單、彈窗、選項卡等。這些組件可以通過簡單的html標簽和屬性來創建。例如,如果您想要創建一個按鈕,只需要使用以下代碼:

              
          html復制代碼
          <button class="layui-btn">按鈕</button>

          同時,layui還提供了一些特殊類型的按鈕,如次要按鈕、禁用按鈕、圓角按鈕等。

          3. 自定義樣式

          layui提供了一套默認的主題風格,但是如果您想要自定義樣式,layui同樣提供了很好的支持。您可以通過修改layui.css文件或者使用自定義CSS覆蓋默認樣式,來實現您想要的效果。



          layui 是一款基于 jQuery 的前端 UI 框架,它具有簡潔、易用和高效的特點,非常適合快速開發響應式界面。下面是使用 layui 框架的示例。

          首先,需要在 HTML 文件中引入 layui 的樣式文件和腳本文件:

              
          復制代碼
          <!-- 引入樣式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <!-- 引入腳本文件 --> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script>

          接著,在 HTML 文件中編寫相應的結構和內容,并使用 layui 提供的組件進行布局和樣式設置。例如,可以使用 layui 的表格組件來展示數據:

              
          復制代碼
          <table class="layui-table"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>20</td> <td></td> </tr> <tr> <td>李四</td> <td>22</td> <td></td> </tr> <tr> <td>王五</td> <td>21</td> <td></td> </tr> </tbody> </table>

          除了表格組件,layui 還提供了很多其他的組件,如按鈕、輸入等...


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

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

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

          工作多年才發現,原來頭像這么小的設計細節,也有這么多知識點

          博博

          原來頭像這么小的設計細節,也有這么多知識點

          Hi,我是彩云。用戶頭像是我們在做UI時經常會用到的設計元素,但想要設計好它也是有很多需要注意的細節知識的,今天這篇文章將深入到頭像設計的方方面面,不同的事件、狀態、操作、配色等等一系列UI設計的最佳實踐。這篇文章準備了很多實例,或許可以給你一些啟發。 

          undefined

          近年來,我幾乎每天都在瀏覽數以萬計的UI組件、界面、不同的網站和app,研究它們的結構、布局和配色方式。我的目標是創建一個全面的UI指南,設計應用及其組件、模板等。


          今天這部分講的就是關于用戶頭像的UI組件探索。用戶頭像是一個組件元素,用戶通過它來標識自己。


          用戶頭像有哪些類型?

          基本上有以下三種類型可以用來代表用戶頭像

          • 空狀態

          • 名字的首字母

          • 用戶照片或者圖片


          undefined


          顏色和尺寸

          根據具體使用場景的不同,你可以使用多樣化的顏色和尺寸:

          • 1)為了更好的識別,不同用戶配色可以多樣化一些

          • 2)頁眉、導航欄中一般用24-40dp寬度為主

          • 3)40-48dp的頭像大小通常用在內容塊或列表中

          • 4)如果你想在更大的頁面中使用頭像,比如個人中心、設置中心等時,推薦使用56+dp


          undefined


          事件和通知

          當我們想通過用戶頭像通知某事或演示某種操作時,可以使用額外的UI元素;

          • 1)指示燈標識用戶是在線還是不在線

          • 2)通過帶有編號的標簽通知提供信息

          • 3)可以在用戶頭像上增加額外的圖標提供用戶行為操作


          undefined


          用戶的不同狀態

          顯示用戶狀態的最常見做法是在頭像的右下角放置一個多色控件

          • 1)綠色的代表在線,灰色代表不在線

          • 2)填充圖形代表用戶在線狀態,而空心形態用戶不在線的狀態(并且是可以操作的)


          undefined


          通知標簽

          根據不同優先級以及為了吸引用戶的注意力,可以修改頭像的標簽樣式

          • 1)對于高優先級的提示,可以使用高亮的底色+反白的文字

          • 2)對于其他情況,使用淺色背景,形式上做一些弱化


          undefined


          操作按鈕

          當頭像帶有操作功能時,通常使用圓形按鈕或嵌套圖標等組件來顯示即將進行的操作。

          • 1)將圖標更改為符合用戶期望的結果

          • 2)顏色的使用要合理,需要強調事件或動作的含義


          undefined


          包含文字的頭像

          單邊文本

          當需要添加額外信息時,次要標題可以和頭像一起使用。此功能在應用欄、列表、表格中非常常用。

          • 1)較大的標題用于表示用戶的名稱

          • 2)額外信息的文字是可選的(例如:狀態、職業、上次訪問、關注者數量等)


          undefined


          底部文本

          對于整頁,可以使用更大的頭像,并將文本放在底部。這是應用內的常見模式,例如社交、個人資料、設置等。 


          undefined


          頭像的用戶體驗模式

          事件

          為了進一步表明新用戶的事件,可以在頭像周圍添加一個描邊。還可以添加一個帶有標記的計數器,這也將具有更強的設計提醒作用。 


          undefined


          進度

          使用一個描邊線作為用戶成就的進度,仍然非常流行和方便。 


          undefined


          選擇

          對于所選狀態,用戶最可靠的確認方法之一是確認圖標和描邊的組合。 


          undefined


          以下是所選狀態的典型變體的外觀:


          undefined


          用戶頭像群組

          帶一個按鈕

          當頭像被分組時,額外的行動按鈕可以是一個可靠的選擇,讓用戶從那里知道某個操作。例如,“加號”按鈕將我們帶到一系列交互相關的選項(添加、編輯、排序等),這些選項可以對分組的頭像執行。 


          undefined


          標記

          數字標記是展示隊列中剩余用戶數量的一個很好的解決方案。 


          undefined


          帶有懸浮狀態的標記

          一個標記最常見的模式之一,當它被懸停時可以顯示用戶的附加信息,作為信息交互的擴展。 


          undefined


          具有懸停狀態的頭像

          當堆疊組中的頭像懸停時,顯示用戶全名的最佳方式是使用懸停組件。 


          undefined


          頁面模板

          在應用或網站中使用頭像的最流行的方式是在頭部嵌入一個小的用戶圖片,或者在配置文件/設置部分嵌入較大的頭像。此時,用戶可以對圖片進行編輯操作。 


          undefined

          undefined


          以上就是我所整理的關于頭像知識的所有內容,希望看完這篇文章你可以更加全面的設計更好的頭像。 


          作者:彩云Sky   來源:站酷



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          日歷

          鏈接

          個人資料

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

          存檔

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