可以看的黄页的网站,狠狠色丁香久久婷婷综合

首頁

172025-3

畫圖標，我是認真的

對于 UI 設計師來說，圖標設計的能力至關重要，也是提升感官體驗的重要方向。對于一些初入行業的設計師，習慣下載圖標素材應付項目需求，失去了動手能力培養的機會。甚至一些多年工作經驗的老司機，依然還擺脫不了使用素材的習慣，稍微復雜一點的技法就會難以駕馭。

1. 切勿過度素材化

對于初入職場的設計師來說，偶爾運用素材可以理解，但是一定要學會拆解和分析，掌握還原設計的技巧和能力。

過度依賴素材容易導致思維固化，不愿意去創造，失去創新設計的能力；也容易導致眼高手低，有想法卻實現不出來，極容易萌生放棄的念頭；素材拼貼形式完成的設計，在規范性和細節性上面也是大打折扣的，導致設計作品不夠精細化和規范性。

2. 刻意練習強化

我們需要通過刻意練習來提升圖標設計的能力，根據一萬小時定律，技法層面的提升都是通過反復磨練達到的。

3. 擺脫素材才能規范化

圖標設計從素材習慣過度到設計動手其實很容易，但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規范化的關鍵，然后再統一風格和細節規范，掌握數字化關系也是需要我們反復研究的課題。

比如以這個天氣圖標來舉例，相信很多同學都能畫出來，但是有沒有把控里面的數字關系就難說了。通過以下示意圖我們可以看出來，大圓和小圓之間的比例關系是 4:3，而間距的關系也與圓形的大小有著數字關系。這些數字關系可以使得圖標設計更加精細化，也能引導我們去探索設計背后量化的標準和關系。

4. 質感的層層強化

當我們繪制完圖標的造型之后，運用合適的風格進行質感強化也是尤為重要的。這里我先運用其中的一個風格來完成，選擇了磨砂玻璃質感的效果。為了質感和層級關系更加明顯，這里單獨對局部進行了光影強化和邊界處理，看看以下步驟拆解圖感受一下。

備注：運用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實現。

5. 延展界面場景

為了進一步強化圖標練習，延展了一個簡單的界面場景，一個由宮格布局組合成的界面設計。為了填充所需的內容，先把之前的一些圖標作品放進去占個位置。雖然都是質感一類的圖標，但是由于透視、配色、風格和細節規范等不一致，整體還是存在一定的排斥感。

6. 根據界面環境重新調整

由于界面設計屬于深色主題，之前練習的天氣圖標放入場景中顯得過于突出，而且玻璃質感的通透性沒有得到很好的發揮。于是根據界面環境對天氣圖標進行了重新調整，以深色關系調整了云朵部分，針對太陽的配色和尺寸比例也進行了調整，如以下效果圖。

7. 延續風格補全設計

以調整后的天氣圖標作為風格規范，延續了其它業務場景的圖標設計，在透視關系、細節規范、配色比例和光影效果等方面進行了直接延續。在光影方向上面選擇了縱向區分，左邊三個選擇左上角打光，右邊三個選擇右上角打光。（當然也可以統一一個方向設置光影）

8. 統一性還是差異化

完成的整體設計視覺風格雖然比較統一，但是也有一些問題存在。圖標之間缺少差異化，過度統一容易視覺疲勞，于是在統一性和差異化上面開始糾結了。

為了既保障圖標設計表達的統一性，又能形成視覺感的差異化，做出了調整配色關系的決定。根據天氣圖標的配色關系延續出了其它色系，看看最終的效果如何。

你喜歡哪一版？

關于統一性和差異化因人而異，在朋友圈征集意見也是各有差異，那么你會喜歡哪一版呢？歡迎留言區一起互動交流。

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

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

評論(0) 瀏覽(31)

172025-3

響應式布局-創造無縫的跨平臺用戶體驗

天宇交互設計及用戶體驗

Current Time 0:00

Duration Time 0:07

Loaded: 0%

Progress: 0.00%

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

評論(0) 瀏覽(38)

172025-3

響應式布局｜打造跨平臺無縫體驗的設計利器

天宇交互設計及用戶體驗

一、介紹

1.1 發展歷程

響應式布局起源于20世紀的建筑設計領域，最初用于描述建筑物根據環境變化自動調整的能力。隨著互聯網技術的發展，這一概念被引入到網頁設計中，以解決傳統固定布局在多樣化設備上的局限性。自2010年以來，隨著智能手機和平板電腦的普及，響應式布局逐漸成為網頁設計的標準實踐。

固定布局：內容在不同屏幕上的尺寸和布局保持不變。這種設計適用于桌面電腦，但在移動設備上顯示效果不佳
流式布局：將元素的寬度設置為百分比而不是固定像素值。這樣可以使網頁內容在不同屏幕尺寸下自動調整大小，但仍存在布局失控和內容擠壓的問題。
媒體查詢：CSS3引入了媒體查詢功能，允許開發人員根據設備的特性（如屏幕寬度、分辨率等）應用不同的CSS樣式。這種技術使得網頁可以根據設備的不同特性應用不同的布局和樣式，為響應式設計奠定了基礎
響應式設計：綜合利用了流式布局和媒體查詢技術，使網頁能夠根據設備的尺寸和特性動態調整布局和樣式，以適應各種屏幕大小和設備類型。這種方法提供了更一致、更靈活的用戶體驗，成為現代Web設計的主流趨勢
移動優先設計：隨著移動設備用戶數量的增加，設計師開始采用移動優先的設計理念，即首先為移動設備設計網頁布局和樣式，然后再逐步增強適應桌面設備。這種方法有助于確保網頁在小屏幕上的可用性和性能

1.2 基本概念

1.2.1 基于網格布局

響應式 UI 基于網格布局。該網格可以確保不同布局之間的視覺一致性，同時可以靈活的適配多種寬度的設計。網格列的數量取決于斷點系統。

1.2.2 斷點（根據寬度切換布局方式）

斷點是響應式設計中的關鍵概念，它指的是屏幕寬度達到某個預設值時，布局會發生明顯變化的點。通過設置斷點，設計師可以為不同的屏幕尺寸定制不同的布局方案。

1.2.3 主要應用于橫向空間，同時適配PC + 平板 + 手機

傳統頁面布局策略通常遵循這樣一種原則：即內容的多少決定了頁面的滾動長度。而頁面的水平寬度則往往被設定為一個固定值，以確保在不同設備和瀏覽器上展示時的一致性和穩定性。然而，隨著移動設備的多樣化和用戶瀏覽習慣的變化，固定的頁面寬度已無法滿足所有場景的需求。在這種情況下，響應式布局應運而生，其核心思想是使頁面的寬度能夠根據不同設備的屏幕尺寸動態調整。

二、實現方式

2.1 媒體查詢

媒體查詢是CSS3的一個特性，允許根據不同的設備特性（如屏幕寬度、分辨率等）應用不同的樣式規則。通過媒體查詢，設計師可以為不同的設備和視口尺寸定制不同的布局和樣式。

優點

靈活性高，可以針對不同的設備特性（如屏幕寬度、分辨率、設備方向等）應用不同的樣式規則

允許創建復雜的響應式邏輯，如在橫屏模式下調整布局或針對特定設備優化樣式

缺點

可能導致CSS代碼變得復雜和難以維護，特別是當有大量不同的設備和條件需要處理時
需要對各種設備和屏幕尺寸有深入的了解，以確保兼容性和一致性

使用場景

當需要為不同的設備或視口條件定制不同的布局和樣式時
當設計需要考慮多種設備特性，如屏幕方向變化或高分辨率顯示時

2.2 百分比

百分比寬度可以使元素的尺寸相對于其父容器進行縮放，從而實現響應式布局。百分比布局讓元素能夠根據父容器的大小變化而自動調整寬度，保持布局的靈活性。

優點

使得元素的大小能夠相對于其父容器進行縮放，從而實現響應式效果
簡單易用，對于基礎的響應式布局非常有效

缺點

百分比布局可能在某些情況下不夠精確，特別是在需要固定元素位置或大小時
可能需要結合其他技術（如視口單位）來實現更精細的控制
每個屬性都使用百分比，會造成布局的復雜度較高

使用場景

當需要元素大小根據父容器的大小變化而變化時，如流體網格布局
對于簡單的響應式調整，如改變容器的填充或邊距

2.3 視口單位（vw/vh 和 vmin/vmax）

vw（視窗寬度單位）和vh（視窗高度單位）是基于視口大小的相對單位。使用這些單位，元素的尺寸可以與用戶的視口大小同步變化，實現真正的響應式設計。

優點

基于視口的單位提供了一種與設備視口大小直接相關的方法來設置元素的尺寸
可以創建與視口大小成比例的布局，確保在不同設備上的視覺一致性

缺點

對于需要非常精確控制元素尺寸的情況，視口單位可能不夠靈活
在某些復雜的布局中，過度依賴視口單位可能導致計算復雜和難以調試

使用場景

當設計需要元素大小與視口大小成比例時，如全屏背景圖像或響應式圖片
在需要考慮不同屏幕尺寸和分辨率的布局設計中

2.4 rem

rem（root em）單位是基于根元素（html元素）的字體大小的相對單位。通過設置根元素的字體大小，可以統一控制頁面上所有使用rem單位的元素的尺寸，實現更好的響應性和可維護性。

優點

rem單位基于根元素的字體大小，提供了一種一致性更強的方法來縮放元素
有助于保持設計的一致性和可訪問性，因為所有尺寸都與根字體大小相關聯

缺點

對于沒有深入了解CSS的設計師或開發者來說，rem的計算可能有些復雜
在某些情況下，rem可能導致布局的縮放不如預期，特別是在與百分比或其他單位混合使用時

使用場景

當需要整個頁面的尺寸和布局與根字體大小保持一致時

在創建可伸縮的排版和需要保持一致性的設計中

三、布局的幾種類型

3.1 基礎布局

3.1.1 固定

對于固定寬度的元素，確保它們在所有設備上都保持一致的尺寸，適用于那些不需要隨屏幕尺寸變化的元素

3.1.2 流式

流式寬度的元素可以根據父容器的尺寸變化而動態調整寬度，適用于需要隨屏幕尺寸變化的元素。

3.1.3 吸附（adhesion）

元素寬度是固定的，直到受到其他元素或斷點的影響。參考產品：花瓣發現頁

3.1.4 擠壓

元素的寬度隨著面板的出現而收縮

3.1.5 推出

推出寬度的元素在特定條件下會擴展到父容器之外，以顯示額外的內容或功能。

3.1.6 遮蓋

遮蓋寬度的元素會根據內容的需要動態調整寬度，如果內容超出父容器，將會遮蓋相鄰元素

3.2 混合布局

3.2.1 固定+流式

這種布局方式結合了占滿和固定兩種布局方式的特點。元素的寬度可以動態調整以占滿屏幕空間，而高度則保持固定不變。這種布局方式適用于那些需要充分利用屏幕寬度，但高度固定不變的場景。參考產品：UI中國、知乎等

3.2.2 流式+吸附（典型的響應式布局）

等比+斷點布局是指在不同屏幕尺寸下，元素的寬度和高度按照等比縮放，但在某些特定的屏幕尺寸下會觸發斷點，使得元素的布局方式發生改變。這種布局方式可以在不同屏幕尺寸下實現更加靈活和適應性更強的布局。參考產品：站酷首頁。

四、設計流程

4.1 確定常見的屏幕尺寸范圍

通過對目標用戶群體的設備使用情況進行研究，確定常見的屏幕尺寸范圍，如小屏幕手機、中等屏幕平板和大屏幕桌面顯示器。

4.2 確定適配規則

4.2.1 間距寬度不變，縮放內容區域

為每個布局區間制定具體的布局策略，包括元素的排列方式、大小和位置。

4.2.2 內容區域寬度不變，縮放兩側留白區域

為每個布局區間制定具體的布局策略，包括元素的排列方式、大小和位置。

4.2.3 混合縮放，內容區域與兩側留白區域同時變化

為每個布局區間制定具體的布局策略，包括元素的排列方式、大小和位置。

4.3 分解固定元素

4.3.1 區分固定元素與變化元素

確定頁面中的哪些元素應該在不同屏幕尺寸下保持不變，哪些元素應該隨屏幕尺寸變化而變化。

4.3.2 確定頁面中固定元素的尺寸

對于頁面中的固定元素，如Logo、導航欄等，為這些元素設定在不同屏幕尺寸下的尺寸和位置，確保其在任何設備上都具有良好的可見性和功能性。

4.4 確定卡片（模塊）的布局變化規則

4.4.1 卡片位置變化

根據屏幕尺寸的變化，調整卡片的位置，使其在不同屏幕上都能合理布局。

4.4.2 卡片布局變化

改變卡片的排列方式，如從水平排列變為垂直排列，以適應不同屏幕尺寸的布局需求。

4.4.3 卡片數量變化

根據屏幕尺寸調整卡片的數量，例如在較小屏幕上減少卡片數量以簡化內容，提高用戶體驗。

4.5 文本拉伸規則

4.5.1 溢出省略

對于過長的文本內容，采用溢出省略的方式顯示部分內容，并用省略號表示剩余內容，確保頁面布局不被破壞。

4.5.2 文本換行

根據屏幕尺寸調整文本的換行規則，使文本在不同屏幕尺寸下都能合理顯示，避免布局被破壞。

4.6 圖片拉伸規則

4.6.1 居中裁剪

在保持圖片比例的同時，對圖片進行裁剪以適應不同屏幕尺寸，確保圖片內容的重點區域始終可見。

4.6.2 等比縮放

根據屏幕尺寸調整圖片的大小，確保圖片在不同屏幕尺寸下都能保持原始比例，避免變形或失真。

五、可見性適配行為

5.1 固定的

對于固定可見的元素，確保它們在所有設備上都保持可見，以提供穩定的用戶體驗。

5.2 可切換的

對于可切換的元素，根據屏幕尺寸和用戶需求在顯示和隱藏之間進行切換，以優化空間利用和用戶體驗。

5.3 臨時的

臨時可見的元素在特定條件下才會顯示，如當用戶與頁面交互時，可以臨時顯示額外的信息或操作選項。

六、響應式模式

6.1 出現

出現模式指的是元素在用戶滾動或觸發某些動作時動態進入或退出視圖的過程。

6.2 變形

變形模式描述元素如何根據用戶交互或屏幕尺寸變化而改變形狀、大小或布局。

6.3 分割

分割模式涉及將內容分割成多個部分，以適應不同的屏幕尺寸和布局需求。

6.4 重排

重排模式指的是元素在不同屏幕尺寸下重新排列，以優化空間利用和用戶體驗。

6.5 擴展

指的是元素或組件能夠根據內容的多少或者用戶的交互動作而增加額外的空間或者附加信息。這種模式常見于折疊面板、下拉菜單、模態窗口等交互元素。擴展模式的關鍵在于它提供了一種優雅的方式來處理額外的內容，而不是在所有時間里都將其展示出來，這樣可以保持界面的整潔和減少不必要的干擾。

6.6 位移

涉及到元素在頁面上的位置變化，以響應用戶的交互或其他條件。這通常是為了重新組織頁面布局，以便為新的內容騰出空間或者將用戶的注意力引向特定的區域。位移可以是平滑的動畫效果，也可以是簡單的位置變動。需要謹慎使用，以確保用戶不會被突然的布局變化所困擾。

七、結語

在進行產品設計時，我們經常會碰到包含多種元素的復雜設計單元，比如圖文結合的布局，或者是更加多元的卡片、文本和圖像的組合。面對這種復雜性，首要任務是將這些單元分解，審視并理解每個單獨元素的適配需求。然后，我們需要綜合考慮這些元素在尺寸、形態、數量以及排列上的變化，融合這些變化來制定一套綜合的適配計劃。這樣的過程旨在保證不論是在何種設備或屏幕尺寸上，這些設計單元都能維持其原有的功能和視覺效果，進而為用戶提供優質的體驗。

雖然開發團隊可能依賴于他們的經驗或遵循既定的設計標準來執行適配任務，并不總是需要設計師提供詳盡的適配指導，但設計師對適配原則的理解和掌握對于打造適用于所有用戶設備的連貫體驗至關重要。這種專業知識不僅能夠提高設計工作的效率和產出的質量，還能促進與開發團隊的有效合作，共同推動產品的成功開發。

作者：姚_Yale
鏈接：https://www.zcool.com.cn/work/ZNjgzNDY5MTY=.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(38)

172025-3

鼠標指針的秘密：提升PC端交互的小技巧

天宇交互設計及用戶體驗

一、鼠標指針概述

1.1 鼠標指針的起源

鼠標指針最早出現在20世紀60年代的早期圖形用戶界面系統中，如Douglas Engelbart在斯坦福研究所開發的oN-Line系統。隨著操作系統的發展，鼠標指針的樣式也變得更加多樣化，以適應不同的操作和反饋需求。

1.2 鼠標指針的定義

光標是一種視覺提示，它不僅向用戶顯示鼠標的位置，還向用戶顯示如何與特定元素進行交互，包括選擇文本、單擊、拖動或滾動等。了解哪些光標指示哪些類型的交互并適當地使用它們，可以使界面對用戶更直觀。

1.3 在用戶體驗中的作用

光標作為用戶與計算機系統之間交互的主要視覺工具。在用戶體驗中起到一些關鍵作用，例如：直觀的控制、視覺焦點、操作反饋、精確選擇、交互提示、增強可訪問性、減少錯誤等。

二、鼠標指針的基本功能

2.1 指向與選擇

鼠標指針最基本的功能之一是指向。用戶可以通過移動鼠標來控制指針在屏幕上的位置，指向不同的界面元素，如按鈕、鏈接、文本或圖像。
選擇功能通常與指向結合使用。當用戶將指針放在某個元素上并按下鼠標按鈕時，就可以選擇該元素。例如，在文本編輯器中，用戶可以通過指向并點擊來選擇文本；
在網頁上，指向并點擊鏈接可以打開新的頁面。

2.2 點擊與激活

點擊是用戶與界面元素交互的常見動作。用戶將鼠標指針移動到按鈕或其他可激活的元素上，然后按下并釋放鼠標按鈕來執行點擊操作。
激活功能指的是通過點擊來觸發元素的事件或動作。例如，點擊一個按鈕可能會提交一個表單，點擊一個菜單項可能會打開一個新窗口或執行特定的命令。

2.3 拖動與移動

拖動功能允許用戶通過按住鼠標按鈕并移動鼠標來拖拽界面元素，如窗口、圖標或選定的文本。
移動功能是指通過拖動操作來重新定位元素。用戶可以在桌面上移動窗口到不同的位置，或在文檔中拖動文本或圖像來改變它們的位置。
拖放操作是拖動的擴展，用戶可以將一個元素拖到另一個元素或區域來執行特定的功能，如將文件拖到文件夾圖標中進行移動或復制。

三：鼠標指針的多樣性

3.1 箭頭光標

介紹：箭頭光標通常表現為一個箭頭形狀，指向屏幕的某個方向（通常是右上方），它允許用戶通過鼠標或觸摸板與屏幕上的元素進行交互。

功能

選擇：

箭頭光標允許用戶點擊按鈕、選擇菜單項或激活鏈接。
指向：

它提供了指向屏幕上特定元素的功能，幫助用戶直觀地識別可交互區域。
導航：

在瀏覽網頁或應用程序時，箭頭光標幫助用戶在界面中導航。

交互行為

懸停：

將箭頭光標懸停在某個元素上可能會顯示額外的信息，如工具提示或菜單；也可能會觸發視覺變化，如顏色或大小改變
點擊：

用戶可以通過將箭頭光標定位到目標上并點擊鼠標左鍵來執行點擊操作。

3.2 指針光標

介紹：指針光標是屏幕上的一個可見符號，通常隨鼠標移動而變化位置，允許用戶與計算機進行交互。

功能

選擇：

通過點擊操作選擇界面元素。
指向：

指示屏幕上的特定位置。
激活：

點擊按鈕或鏈接以觸發事件。
拖動：

拖動窗口或對象到新位置。

交互行為

懸停：

將光標停留在某個元素上以查看狀態變化或提示信息。
點擊：

按下并釋放鼠標按鈕以選擇或激活元素。
雙擊：

快速連續點擊兩次以執行默認命令，如打開文件或文件夾。

3.3 文本光標

介紹：文本光標是一個通常出現在文本字段中的垂直線條或豎條，指示用戶可以在此位置插入文本。

功能

文本輸入：

允許用戶在文本字段中輸入字符。
文本編輯：

用戶可以通過點擊文本光標來定位文本中的特定位置，進行編輯或修改。

交互行為

點擊：

用戶可以將鼠標指針移動到文本光標上并點擊，以在該位置插入或編輯文本。
拖動：

用戶可以拖動文本光標來選擇文本。

3.4 十字光標

介紹：十字光標通常表現為一個十字形或“+”形的指針，它允許用戶進行非常精確的定位和選擇。

功能

精確定位：

十字光標幫助用戶在屏幕上進行精確的點擊或選擇。
細節操作：

在需要處理圖像、圖表或其他細節元素時，十字光標提供了更好的控制。

交互行為

點擊：

用戶可以使用十字光標進行精確點擊。
拖動：

在需要選擇特定區域或繪制圖形時，用戶可以拖動十字光標。

3.5 不允許的光標

介紹：不允許/禁止光標通過特定的視覺樣式（如帶斜線的圓圈或箭頭）來表示某個操作在當前上下文中是不被允許或禁止的。

功能

禁用指示：

指示用戶界面中的某些元素或操作目前不可用或被鎖定。
防止誤操作：

通過視覺提示防止用戶嘗試執行不可用的操作，從而避免可能的誤操作或錯誤。

交互行為

視覺反饋：

當用戶將鼠標移動到禁止操作的區域時，光標變化提供即時的視覺反饋。
操作阻止：

系統阻止用戶執行任何無效的操作。

3.6 屏幕快照選擇區域

介紹：屏幕快照選擇區域光標允許用戶通過拖動來定義一個區域，這個區域將被捕捉并保存為圖像文件。

功能

精確定位：

十字光標幫助用戶在屏幕上進行精確的點擊或選擇。
細節操作：

在需要處理圖像、圖表或其他細節元素時，十字光標提供了更好的控制。

交互行為

點擊：

用戶可以使用十字光標進行精確點擊。
拖動：

在需要選擇特定區域或繪制圖形時，用戶可以拖動十字光標。

3.7 消失光標

介紹：指示在松開按鈕時，所拖移的項目將消失。如果項目是

替身

，則不會刪除其原件。

3.8 拷貝光標

介紹：拷貝光標通常表現為一個箭頭旁邊帶有“+”號或其他表示復制的符號，明確告訴用戶當前操作將復制選中的項目。

功能

復制操作：

允許用戶通過拖動來復制文件、文件夾或其他界面元素。
數據傳輸：

在不同應用程序或同一應用程序的不同部分之間傳輸數據。

交互行為

拖動復制：

用戶將鼠標指針放在可復制的元素上，按下鼠標按鈕并拖動以復制該項目。
釋放完成：

用戶在目標位置釋放鼠標按鈕，完成復制操作。

3.9 替身光標

介紹：替身光標表明用戶可以通過拖動操作創建原文件或文件夾的快捷方式，而不是移動原始項目。

功能

創建快捷方式：

允許用戶在不改變原始文件或文件夾位置的情況下，創建一個指向原始位置的鏈接。
節省空間：

替身不占用額外的空間，因為它只是一個指向原始文件的引用。

交互行為

拖動：

用戶將鼠標指針放在文件或文件夾上，按下并拖動。
創建替身：

在拖動過程中不松開鼠標按鈕，同時按下Option鍵（或根據系統提示的其他修飾鍵），光標將變為替身光標。
放置：

用戶將文件或文件夾拖到所需位置并釋放鼠標按鈕，完成替身的創建。

3.10 幫助指針

介紹：幫助指針通常表現為一個問號（?）或帶有問號的圖標，表示用戶將鼠標懸停在某個元素上時可以獲取幫助或說明。

功能

提供信息：

幫助指針可以向用戶顯示額外的說明或信息。
輔助理解：

幫助用戶理解界面元素的功能或操作方式。

交互行為

懸停顯示：

當用戶的鼠標指針懸停在具有幫助功能的界面元素上時，光標樣式可能會變化，同時顯示幫助信息。
點擊獲取：

在某些情況下，用戶可能需要點擊帶有幫助指針的元素以打開幫助文檔或獲取更多信息。

3.11 鉛筆光標

介紹：鉛筆光標是一種視覺提示，通常表現為一個鉛筆形狀的圖標，用來告訴用戶他們當前處于可以繪制或編輯文本的狀態。

功能

文本輸入：

鉛筆光標用于指示用戶可以在文本字段中輸入文字。
文本編輯：

在已有文本上移動鉛筆光標，可以進行文字的選擇、編輯或修改。

交互行為

點擊定位：

用戶可以在文本中的任何位置點擊鉛筆光標，以定位文本插入點。
拖動選擇：

用戶可以拖動鉛筆光標來選擇文本。

3.12 精密指針

介紹：精密指針是一種特殊的光標樣式，它為用戶提供了更精細的控制能力，特別是在需要精確定位或選擇的應用程序中。

功能

精確定位：

允許用戶在需要高精度的界面元素上進行操作，如圖形設計、圖像編輯或表格數據輸入。
細致選擇：

在文本編輯或代碼編輯中，精密指針可以幫助用戶更準確地選擇文本或代碼段。

交互行為

點擊：

用戶可以使用精密指針進行精確點擊。
選擇：

用戶可以輕松地選擇小尺寸的界面元素或在緊密排列的元素之間進行選擇。

3.13 單元格指針

介紹：單元格指針是一種特殊類型的光標，它在電子表格應用程序（如Microsoft Excel、Google Sheets等）中用于指示當前選中的單元格或用戶可以輸入數據的位置。

功能

單元格選擇：

允許用戶通過點擊來選擇單個或多個單元格。
內容編輯：

指示用戶可以在單元格中輸入或編輯數據。

交互行為

點擊選擇：

用戶可以通過點擊來選擇單元格，單元格指針隨之移動到該單元格。
拖動選擇：

用戶可以拖動單元格指針來選擇一個區域的單元格。
輸入編輯：

用戶可以在單元格指針所在的位置輸入或編輯文本。

3.14 放大/縮小指針

介紹：放大/縮小指針通常表現為一個帶有加號(+)或減號(-)的放大鏡圖標，用來指示用戶當前正在進行放大或縮小的操作。

功能

放大內容：

允許用戶放大查看細節，例如地圖、圖片或文本。
縮小內容：

允許用戶縮小以獲得更廣闊的視野。

交互行為

點擊放大/縮小：

用戶可以通過點擊帶有“+”或“-”符號的放大/縮小按鈕來進行操作。
拖動縮放：

在一些應用中，用戶可以通過拖動一個滑塊或在觸摸屏幕上用兩個手指進行捏合操作來放大或縮小。
滾輪縮放：

使用鼠標滾輪或觸控板的多點觸控手勢也可以實現放大或縮小。

3.15 移動&拖拽光標

介紹：移動光標是一種鼠標指針樣式，通常表現為一個帶有箭頭的矩形或邊框，表示用戶可以通過拖動來移動某個元素或對象。

功能

元素移動：

允許用戶通過拖動操作來改變元素在界面上的位置。
布局調整：

用戶可以通過移動光標來調整界面元素的布局。

交互行為

點擊并拖動：

用戶可以通過點擊并拖動移動光標來移動元素。
釋放完成移動：

用戶釋放鼠標按鈕后，元素將停留在新位置。

3.16 抓取指針

介紹：抓取指針是一種鼠標指針樣式，通常表現為一個張開的手或帶有抓取圖標的指針，表示用戶可以通過拖動來抓取和移動元素。

功能

抓取元素：

允許用戶通過拖動操作來抓取界面上的元素。
移動元素：

在抓取元素后，用戶可以將其移動到新的位置。

交互行為

點擊并拖動：

用戶可以通過點擊并拖動抓取指針來抓取元素。
釋放完成移動：

用戶釋放鼠標按鈕后，元素將被放置在新位置。

3.17 載入光標

介紹：等待光標是一種特殊的光標樣式，通常以一個旋轉的圖標、沙漏或進度條的形式出現，用來指示應用程序當前正在忙碌，正在等待某個操作完成或數據加載。

功能

指示忙碌狀態：

向用戶明確表示應用程序正在忙碌，正在處理數據或執行任務。
提供反饋：

為用戶提供即時的視覺反饋，告知他們操作正在進行中。

交互行為

顯示載入光標：

當應用程序開始處理任務時，指針變為載入光標。
隱藏載入光標：

任務完成后，載入光標消失，恢復為正常指針樣式。

3.18 滾動光標

介紹：滾動光標是一種用戶界面元素，用來指示用戶可以滾動查看的內容區域。它可以是滾動條上的滑塊，也可以是鼠標滾輪或觸控板的滾動手勢。

功能

內容瀏覽：

允許用戶瀏覽超出當前視圖范圍的內容。
滾動內容：

允許用戶滾動查看內容，如網頁、文檔或圖像。

交互行為

拖動滾動：

用戶可以點擊并拖動滾動條上的滑塊來上下或左右滾動內容。
滾輪滾動：

使用鼠標滾輪或觸控板的滾動手勢可以快速滾動頁面。
自動滾動：

在某些應用程序中，內容可以自動滾動，如在演示或某些游戲場景中。

四、鼠標指針的交互設計原則

4.1 一致性（Consistency）

定義：一致性原則要求在整個應用程序或網站中，鼠標指針的行為和樣式保持統一。這意味著相同的操作應產生相同的視覺反饋，相同的指針樣式應表示相同的功能。
應用：例如，如果標準箭頭指針用于所有選擇操作，那么用戶就會學會預期這種指針樣式，并知道何時可以進行選擇。

4.2 反饋（Feedback）

定義：反饋原則指的是系統應提供即時的視覺或聽覺信號，以響應用戶的操作。這有助于用戶理解他們的操作是否成功，以及系統的狀態。
應用：例如，當用戶將鼠標指針移動到按鈕上時，按鈕可能會改變顏色或顯示陰影，以表明它是可點擊的。

4.3 可見性（Visibility）

定義：可見性原則確保鼠標指針在所有情況下都是可見的，以便用戶始終知道他們當前的位置和可以進行的操作。
應用：例如，當指針移動到特定元素上時，元素可能會高亮顯示，或者指針可能會改變形狀或大小，以提高其可見性。

4.4 適應性（Adaptability）

定義：適應性原則指的是鼠標指針應能夠適應不同的用戶需求和上下文環境。這包括對不同屏幕尺寸、分辨率和用戶偏好的適應。
應用：例如，提供可調整的指針大小選項，以便視力不佳的用戶可以更清楚地看到指針。或者在不同的操作系統或設備上使用適當的指針樣式。

五、鼠標指針對用戶體驗影響

5.1 提升效率與準確性

鼠標指針提供了一種直觀的方式來快速導航和選擇界面元素。通過精確的指向和點擊，用戶能夠高效地完成任務，減少尋找和選擇目標所需的時間。
鼠標指針的變化可以即時反映用戶的操作，如當用戶將指針移動到鏈接上時，指針變成手形，這是一種即時的視覺反饋，告訴用戶這是一個可點擊的鏈接。
清晰的指針狀態變化可以減少用戶在操作過程中的不確定性，幫助他們更好地理解界面的當前狀態和預期行為，從而降低操作錯誤。

5.2 增強可訪問性

鼠標指針的設計考慮到了不同能力的用戶。例如，可調整的指針大小和顏色對比度可以幫助視力不佳的用戶更容易地看到和跟蹤光標。
輔助功能，如指針粘滯鍵或慢速指針移動，可以幫助運動障礙用戶更準確地控制指針，確保所有用戶都能有效地與界面交互。

5.3 個性化與品牌識別

通過自定義鼠標指針的樣式和動畫，應用程序和網站可以增強其品牌識別度。獨特的指針設計可以幫助用戶在視覺上與品牌建立聯系。
個性化的指針樣式可以提供更豐富的用戶體驗，讓用戶感覺界面更加貼心和專屬。

六、技術實現與自定義

6.1 操作系統的鼠標指針設置

以mac系統為例：系統偏好設置 -> 輔助功能 -> 指針控制

操作系統通常提供了一套預定義的鼠標指針方案，包括不同的指針形狀和大小，以適應各種操作和視覺需求。

用戶可以通過控制面板或系統設置訪問鼠標指針的配置選項。例如，在Windows中，用戶可以打開“鼠標屬性”對話框來更改指針速度、調整指針可見性（如指針大小和顏色），以及選擇不同的指針方案。
一些操作系統還提供了輔助功能，如指針的軌跡顯示，幫助用戶更清晰地追蹤鼠標移動。

6.2 自定義指針樣式與動畫

需要下載第三方應用程序完成自定義，例如：Steer Mouse；xGestures；Smooth Scroll；Catch Mouse等
用戶和設計師可以通過創建自定義指針樣式來個性化他們的計算機或應用程序。這通常涉及選擇或設計新的指針圖像，并將其應用為鼠標指針。
自定義指針樣式可以包括獨特的圖形設計、顏色和主題，以匹配應用程序的品牌或用戶的個性。
動畫指針可以提供更豐富的視覺反饋，例如，一個等待動畫可以顯示旋轉的圖標，以表明應用程序正在處理用戶的操作。

6.3 編程控制指針行為

開發者可以通過編程方式控制鼠標指針的行為，以增強應用程序的交互性。這包括改變指針的形狀、位置、可見性，甚至創建自定義的指針效果。
在Web開發中，CSS和JavaScript可以用于更改指針樣式和行為。例如，cursor屬性可以改變HTML元素上的指針圖標，而JavaScript可以用于監聽鼠標事件并動態更改指針樣式。
在桌面應用程序開發中，開發者可以使用相應的API來控制指針。例如，Windows API允許開發者設置自定義光標，而macOS的AppKit框架提供了設置光標的接口。
編程還可以實現更高級的交互，如捕捉鼠標位置、響應鼠標事件，以及在特定條件下更改指針行為。

七、案例研究

7.1 成功的鼠標指針設計案例

Current Time 0:00

Duration Time 0:52

Loaded: 0%

Progress: 0.00%

7.2 鼠標指針設計中的常見問題

不一致的指針樣式：使用多種不同的指針樣式可能會導致用戶混淆，特別是如果指針變化與功能不匹配時。
不明顯的可交互元素：當指針移動到可交互元素上時，如果沒有清晰的視覺反饋，用戶可能不知道可以進行操作。
指針尺寸不適當：指針太小或太大都可能影響用戶體驗，特別是在不同分辨率的屏幕上。
缺乏視覺反饋：鼠標指針在懸停、點擊或拖動時，如果沒有適當的動畫或變化，可能會讓用戶感到困惑。
指針與界面元素間距不當：當用戶點擊按鈕或其他元素時，如果指針位置與實際觸發區域不一致，可能會導致誤操作。
指針樣式與品牌形象不符：如果自定義指針樣式與品牌的視覺形象不協調，可能會削弱品牌識別度。
在不同操作系統或設備上的兼容性問題：設計的指針樣式需要在不同的操作系統和設備上進行測試，以確保一致性和功能性。
動畫過度或不足：指針動畫可能會吸引用戶的注意力，但過度的動畫可能會分散用戶對主要內容的關注；不足的動畫則可能無法提供足夠的交互提示。
指針行為與用戶期望不符：用戶對指針行為有一定的預期，如果指針的實際行為與這些預期不符，可能會導致用戶感到困惑。

結語

鼠標指針的設計需要綜合考慮功能性、美觀性和用戶體驗。一個設計良好的鼠標指針不僅能夠提升用戶界面的整體質量和效率，還能夠增強用戶對產品或服務的滿意度和忠誠度。希望通過本篇文章大家可以合理的利用各種鼠標指針類型。

附件文件如下：可根據需要自行下載。（用于在設計稿上標注，或與開發溝通）

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

評論(0) 瀏覽(33)

162025-3

以用戶為中心的交互設計思維

ui設計分享達人用戶研究

聊聊關于設計思維的內容，會從產品設計、體驗設計、交互設計三個方面入手。

目前是第三篇，關于交互設計思維的內容。到這里設計思維的內容全部結束了。

感謝

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

評論(0) 瀏覽(44)

162025-3

AI重塑互聯網，賦予技術溫度與關懷

ui設計分享達人設計管理與成長

關于AI出現對互聯網革命的一些思考。

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

評論(0) 瀏覽(46)

162025-3

AI創作工具的「可控性」與「用戶體驗」博弈

ui設計分享達人設計管理與成長

這兩年生成式ai爆發性增長并且重塑數字創作的工具生態。從文本生成、圖像視頻生成以及模型訓練，可以說無法離開ai，ai的介入讓創意生產變得前所未有的高效簡單，但同時也帶來了體驗上的困境，例如我們在使用自動化生成便利的同時，還能保持對創作過程的深層控制？比如在進行文生圖或者線稿轉3D的流程中，我們如果要控制某個部分的設計表現，需要利用多個方法才能完成，僅僅通過提示詞的修改并無法完成，這個矛盾在之前的SD等開源模型中非常明顯；

算法模型的開放讓設計達到了無限的可能，但更多設計師卻被迫在控制權和易用性之間做出了妥協，當重復一個流程無法生成滿意的圖象時，大多情況都是基于一個“不滿意”的圖像進行優化，我把這個理解為用戶心理上的妥協；

以節點式工作流工具ComfyUI為例，其通過可視化編程賦予用戶對Stable Diffusion生成流程的精細控制權，允許自由組合模型、調節參數、插入預處理模塊，成為專業創作者的首選工具。然而，這種高度自由的設計也帶來了顯著的認知負擔：錯綜復雜的節點連線、晦澀的參數術語、缺乏引導的開放式畫布，讓0基礎設計望而止步；數據顯示，超過67%的新用戶在首次使用ComfyUI時因“界面混亂”而放棄進一步探索（來源：ComfyUI社區調研）。這一現象揭示了生成式AI工具設計的核心矛盾——系統的靈活性與用戶的心智模型之間如何實現平衡？

一、核心問題與矛盾

1、設計師對“控制權”的需求本質

安全感需求：

用戶希望理解生成過程（分布控制、seed數值、CFG），避免黑箱帶來的不可預測性；

注：大多數AI工具（如Midjourney）像一臺自動售貨機——輸入提示詞，隨機吐出一張圖片。用戶無法知曉AI為何生成一只三頭六臂的貓，只能反復“抽卡”直到滿意。

創造性需求：

通過精細化的控制實現獨特的風格，例如分布提示，基于大模型訓練出來的lora，不同lora模型融合后的混合模型，這些需要付出很大的學習成本和時間才能滿足，我個人理解ai給設計師通往目標的過程中搭建了不同的道路，但設計師如果在沒有導航的情況下要達到這個目標，中間可能會輾轉反側，也可能一條道路就能到達目的地；

效率需求：

自動化設計（如MJ和國內其他一鍵生圖的ai產品）可以降低設計的操作成本，但同時犧牲了可控性；

2、comfyUI的設計矛盾

過度控制悖論：

ComfyUI試圖打破黑箱，將AI拆解成可調節的“齒輪組”（如調節“采樣器”改變畫質、用“ControlNet”控制構圖）。但當用戶面對50多個參數和上百種節點時，反而因信息過載陷入“該調哪個參數？連錯節點會爆炸嗎？”的決策癱瘓。

過高的配置要求：

comfyUI解決了MJ帶來的黑箱效應，但同時也帶來了物質上的門檻，設計師需要配備更高的配置或者使用第三方租用云電腦等才能運行，否則前者就會造成漫長的等待，后者則需要花費大量的財力，對于設計師而言反而是造成了時間上的負荷；

功能維度：

節點系統支持無限組合，但缺乏對用戶意圖的主動理解，如自動推薦節點；

認知維度：

參數暴露（如CFG Scale、Sampler）提供控制感，但引發“選擇過載”實際使用過程中，如果是普通玩家，無法短時間內通過這些參數來控制結果，核心還是在于認知門檻過高；

交互維度：

自由連接節點導致邏輯混亂（如錯誤連線無及時提示），增加調試成本。

我把ControlNet的“負面條件”打亂連接到“正面clip文本框”上，而采樣器的“負面條件”直接連接到“負面clip文本框”內，整個過程是不會出現任何報錯提示，但是當運行調試的時候就會運行失敗，提示ControlNet缺少負面條件，ControlNet（應用）缺少負面條件輸出等問題，眾所周知對于一些低配玩家，運行一次需要等很久，等到最后發現生產出來一個“報錯”！！！

二、對比分析：comfyUI和midjourney

當設計師想生成“一只穿宇航服的柴犬”，Midjourney可能輸出卡通風格或超現實照片，設計師只能通過追加提示詞（如“3D、黏土”）逼近目標，不停的抽卡；

（實在不想用mj了，下面的圖本地跑的，大概的意思一樣就是不停的抽卡抽卡）

，

在ComfyUI中，設計師可以強制指定：用FLUX模型生成基礎圖像，然后加載相關LoRA模型，在添加個視覺風格遷移的模型，添加宇航服，在添加個視覺風格模型，連接OpenPose節點調整柴犬姿勢，最后用放大模型，放大畫質；但我就想說：我只是想畫只貓，為什么要弄這么復雜。。。

關鍵結論：

ComfyUI的“高可控性”吸引專家設計師，但普通設計師或者0基礎設計師因認知負荷大多放棄使用。Midjourney通過“限制控制權”降低門檻，但設計師可能因無法干預細節感到焦慮。

三、comfyui沖突點和機會點

為什么說這個呢，因為comfyui目前是趨勢ai，核心的生成邏輯包括實際應用都已經大于mj了，所以接下來的內容也是圍繞comfyui拆解的；

1、參數暴露vs認知負荷

問題：

ComfyUI將所有參數（如LoRA權重、VAE選擇、采樣器、各種模型加載器）暴露給用戶，導致界面信息過載。

例如：

設計師需要同時調整“提示詞權重”“采樣器類型”“ControlNet強度”時，易混淆參數優先級，對于這個結果的影響，是采樣器類型問題呢還是ControlNet的數值不對呢，最后我猜大多人過程都是一個個試一遍，最后哪個效果好用哪個；

思考點：

動態參數分組，根據生成的目標隱藏無關的參數，比如當輸入完成“提示詞”后，可以識別出輸入的提示詞類型，生成一個3d風格海報，那么基于這個提示詞，就可以提前預判出跟3d風格海報相關的參數都可以隱藏；參數依賴的可視化，通過邏輯線的方式標記他們之間的關系，例如CFG與采樣步數，通常來講CFG數值越高生成的圖越接近提示詞，但是圖像質量會下降，采樣步數越高生成的圖質量就越高，那么問題來了，當設計師調整CFG數值時，是不是可以標記或者提示設計師采樣步數的變化，以此來達到最優解；

下方示例

2、自由連接vs邏輯錯誤

問題：

節點可任意連接，但缺乏邏輯校驗目前comfyUI中只是告訴設計師如果兩個節點本身沒有前后關系的情況下不可以連接（沒有節點對應的收入口）另一種情況是兩個節點在一個工作流中都能起到作用，但是節點是多功能化的，連線的時候可以正常連接，最后運行的時候就會出現某某節點不匹配。

例如：

設計師錯誤連接ControlNet預處理器與VAE節點，導致生成失敗且無報錯提示。

思考點：

實時邏輯校驗，在設計師連線時提示沖突（如“該節點僅接受潛空間輸入”）。

工作流自檢模式，一鍵檢測缺失節點（如缺少“提示詞編碼器”時提醒用戶）。

四、設計師心理與工具的“錯位戰爭”

生成式AI工具的設計矛盾，本質上是人類認知模式與技術邏輯的沖突。以ComfyUI為例，其設計暴露了以下深層問題：

1、“技術透明化”的認知陷阱

ComfyUI將AI生成過程拆解為節點，試圖通過“透明化”提升用戶信任，但普通人并不需要（也無法理解）技術細節；不知道你們有沒有，當我第一次看到“VAE解碼器”“潛在空間降噪”等節點時，大腦會觸發“意義建構焦慮”——“這些詞和我想要的圖片有什么關系？”

2、控制權的“虛假承諾”

ComfyUI看似賦予用戶完全控制權，但多數參數的實際影響難以預測（如CFG值從7到8可能導致畫風突變）這類似于讓設計師駕駛一輛方向盤與輪胎無機械連接的汽車，轉動方向盤時，輪胎可能隨機偏轉。設計師誤以為“控制節點=控制結果”，實則是“在黑暗中調整未知旋鈕”；

3. 技術極客與大眾的“認知斷層”

開源社區的理想：“人人可 Hack”的民主化工具；現實問題是開發者設計節點時默認用戶理解SD原理（如Latent Space、擴散模型、euler_ancestralcai、dpmpp_2m），但普通用戶只關心“如何讓圖片更逼真”；這種斷層導致ComfyUI的文檔充滿技術術語，而非用戶目標導向的指南（如“修復模糊人臉”對應哪些節點組合），這也是技術工具與用戶體驗的博弈；

五、對于comfyUI的暢想

1、適配不同能力的設計師

專家模式：保留完整的節點和參數，讓這類設計師自由編輯；

精簡模式：隱藏底層參數，僅僅提供目標導向的選項；

自動化操作：根據提示詞推薦采樣器、cfg數值等組合，例如提示詞是自然語言，那就匹配關于flux模型的專屬采樣器；

2、智能節點推薦引擎

目標推薦：輸入“生成賽博朋克城市”后，自動推薦“SDXL模型+ControlNet邊緣檢測+色調調整節點”；行為預測：分析歷史工作流，推薦高頻使用的節點組合（如“LoRA模型+分層提示詞”）；

3、可解釋性反饋面板

參數與結果的實時性：實時顯示調整CFG值對圖像細節、對比度的量化影響。節點的貢獻度分析：生成后標記關鍵節點（如“ControlNet貢獻度72%”），幫助用戶理解流程。

六、總結：控制的幻覺與設計的謙卑

ComfyUI揭示了生成式AI時代的核心矛盾——技術的能力越強大，人類越需要承認自身認知的局限性。工具設計不應追求“上帝模式”，而需尋找“剛剛好的控制權”給用戶“扳手”而非“零件庫”：提供高層級調節維度（如“畫面精細度”“風格偏離度”），隱藏底層技術參數，并不是每個設計師都是工程師的角色；大多設計師的角色只是維修工；擁抱“不完美的人性”：允許用戶保留“我不知道為什么要調這個，但調了就有用”的玄學操作，而非強迫所有人成為AI工程師。重新定義“控制”：從“絕對掌控流程”轉向“有效影響結果”，讓AI的不可預測性成為創意催化劑而非焦慮來源。

作者：愛吃貓的魚___
鏈接：https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(40)

162025-3

產品設計如何利用心理學

ui設計分享達人設計思維

產品設計的成功除了依賴設計方案和技術實現，還與用戶的心理密切相關。用戶心里決定了我們用怎樣的設計策略解決問題。我們常認為人們做決策時是理性的，但其實用戶行為經常是非理性，會受到情緒、習慣和社交環境的影響。了解這些心理學規律能幫助我們更好地的預測和引導用戶行為，優化產品體驗，提高用戶的粘性、留存率和轉化率，從而產品商業價值最大化。

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

評論(0) 瀏覽(46)

162025-3

關于設計組件庫，一些新思考

ui設計分享達人設計管理與成長

從網上搜索設計組件，我們能找到各種對外公開的設計組件庫，同樣還有不少或概括或詳細的文章，手把手教你“如何搭建一個好的設計組件庫”，但這些方法論很少探討面對C端組件頻繁增改、設計規范動態調整，如何高效賦能業務設計交付的相關內容，但這恰恰是搜索業務面臨的關鍵問題。

搜索是一個“牽一發而動全身”的業務，每一個微小的設計細節都有可能影響各個業務的數據指標，一個“好的設計組件庫”需要以一種潛移默化的方式讓設計師掌握設計規范，完成合規的設計，從這個角度而言它應該比較

「好懂」

。

而作為服務于整個設計團隊的公用設計組件庫，面對每月數以萬計的調用次數，它必須保障最基本的易用性，應該非常

「好用」

。

同時，面對頻繁迭代，“好的設計組件”還需要保持最快的更新速度，為各個橫向團隊提供正確的樣式，從這個角度來說它還要

「好維護」

。

因此，

「好懂、好用、好維護」

是搜索設計語境下，對一個“好的設計組件”的定義。

接下來，我們將從這三個「好」入手，分享搜索設計組件庫在升級過程中的一些思考，希望能和大家共同探討。

“萬丈高樓平地起”，我們先來說說如何從零開始構建一個既符合設計規范又易于理解的設計組件。

首先，在搭建組件時，我們可以考慮采用

多層嵌套

的方式，即組件(Component)內部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復操作，甚至還能在解綁組件時，通過選中內部的子組件圖層進行解綁，大大簡化了搭建和使用雙方的操作流程。

在多層嵌套的思路下，我們可以進一步用

“底層靈活、上層收斂”

來指導組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態切換，而在上層組件搭建的過程中顯性地加強規范的指引(如規范中不允許使用的樣式不對外展示)，以降低超出規范設計的可能。

具體的搭建流程可以大致分為三步：

場景收集和分析、搭建基本變體組、拓展高階變體組

。

我們將通過視頻組件搭建的生動案例，具體介紹如何依據“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。

在著手搭建某類組件時，我們首先通過規范確認和場景遍歷，廣泛收集各類變體。隨后，從我們能想到的所有維度出發，對這些變體進行細致定義。這樣，我們就能得到一張詳盡描述組件變體性質的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統地歸納整理成一張清晰明了的表格。

表格通過不同維度來唯一確定一個變體，這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質，如寬度、高度、數量和優先級等，而業務特性則與具體業務緊密相關。

在搭建組件時，我們可以遵循

「共性-常見特性-業務特性」

順序，這樣的順序有助于降低理解成本，因為最符合心智的分類被置于外層，同時底層的組件又保持了足夠的靈活性，便于切換各種變量。對于業務特性，我們可以根據實際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。

以視頻組件為例，我們從表格中獲取的信息如下：

視頻尺寸及其組合是最符合用戶心智的變體選擇；
播放狀態是所有變體的共有性質；
自動播放情況與業務相關，但不一定需要在組件庫中呈現；
高階組件僅涉及少部分尺寸的組件，應在完成基本組件搭建后再進行。

據此，我們可以輕松梳理出視頻組件搭建流程的優先級：

播放狀態作為共性，應首先搭建；
基本組件尺寸和組合是最符合用戶心智的變體選擇，應緊隨其后；
高階組件在完成基本組件搭建后再進行。

值得注意的是，“封面槽位”是“播放狀態”中的一個圖層。根據“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態之前。因此，視頻組件的最終搭建流程為：

封面槽位；
播放狀態；
基本組件尺寸和組合；
高階組件。

完成對視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。先搭建基本組件視頻組件，再用基本組件搭建高階組件。這一步驟雖然為大家所熟知，但仍需格外注意，如配置項的設置要力求合理，也可以融入設計規范和使用規范，同時還應將一些搭建過程中的零散組件集中收納避免被調用。關于這些具體的注意事項，我們將在后續部分進行詳細闡述。

至此我們完成了組件搭建的基本流程，一個達到及格線的視頻組件就誕生了。據統計，優化后每次調用視頻組件將節省至少10步的點擊操作！

完成了一個基本組件的搭建后，我們可以轉換視角，從使用的角度來審視并檢查這個組件。

我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個流程都能縱享絲滑且穩定可靠，確保業務設計師在使用過程中獲得最佳體驗。

我們可以一步步來審視組件的使用過程。首先是插入組件，據觀察，通常有三種方式，①在左側的資產面板(Assets)中直接找到對應組件并插入；②通過查閱設計規范，鎖定所需的變體后復制粘貼；③選中一個不需要的組件，通過右側的“切換變體”面板(Swap instance)切換成所需的變體。很明顯，在這個過程中依賴的是組件的精準搜索和快速定位。

為了提升搜索精度，我們可以從組件命名入手，采用中、英、數字結合的方式，實現模糊匹配；也可以在發布時隱藏不希望被調用的組件，以減少無用的搜索結果。如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時會優先展示這些子組件，這個功能在切換圖標時尤為實用。

對于習慣邊查閱設計規范邊使用組件的設計師，我們增加了更多實際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進一步降低了規范的理解成本，有效輔助設計決策。同時，我們專門維護了一個固定區域，用于平鋪展示所有組件變體。為了確保能夠輕松點選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設計師一目了然地看到所有變體，從而快速選擇所需的組件。

在組件配置階段，有三項注意點能讓組件更加易用，即“重視組件的可視化效果、設置高效易用的配置項、貼心地保存修改”。

考慮到C端組件的多樣性和用戶的使用習慣，我們應避免使用過于復雜的分組方式。相反，應更注重組件的樣式展示，并盡量簡化組件的層級結構。這樣，設計師在使用時能夠更直觀地看到組件的外觀，而無需深入復雜的層級去查找。

另外值得注意的是，Figma會默認用組件集合中最左上角的組件生成預覽樣式，因此應當把視覺上最有代表性的變體放在左上角，這個效果在切換變體(Swap instance)時很重要，因為目前在該面板中沒法查看組件細節，只能靠縮略圖和名稱來推測是哪個組件。

其次對于配置項的設置也大有講究，業界有組件庫為了實現C2D2C，從源頭上將設計組件和前端組件的配置項打平，這是不錯的思路，但有可能會提升設計側的理解成本。針對搜索業務的特殊語境，我們還是選擇了從「規范理解」角度去設置組件的配置項，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字數限定、選項個數等，這樣能夠在使用的過程中強化業務設計師對規范的掌握。

另一個常常被忽視的關鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率，建議對選項和選項之間，以及外層的不同配置項，都按照一定的邏輯順序進行排序。

最后一點，我們稱之為

“貼心地保存修改”

機制，這個針對的是文字修改的場景。

在實際操作中，使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內容后再去調整其他配置時，已修改的文字會被重置。這時文本屬性(text property)的設置就顯得尤為重要，它能夠記憶并保存修改過的文字內容，從而免于重復輸入。

還有一些情況是，某個組件變體實際上并沒有與某個值相對應的組件(盡管Figma機制允許選擇該值)，用戶切換后就會發現組件完全變了，只能撤回。為了避免這類情況，建議使用另外的標記來表明組件某個設置項是不可切換的。

完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護。

這一環節可以從兩個維度展開，一是依托中臺的日常數據監控進行維護，二是通過團隊內部的緊密協同機制來保障。后者更多側重協作流程和機制上的建設，在本文中我們不做更多展開，重點討論前者。

數據監控的方式主要依托Figma中的組件數據看板(查看路徑：View libraries-Analytics)，看板中展示了各個組件的調用數和解綁數數據，這些數據不直接反映組件的優劣，但如果我們觀測到某個組件解綁率偏高，我們會考慮直接把它

作為模板

而不是創建成組件。

總結

以上是百度搜索設計團隊在設計組件庫升級過程中的心得分享，包括搜索業務對于“好的設計組件”的訴求，以及一些搭建和優化組件的實用思路，核心是探討如何從組件庫建設的角度入手，成功助力團隊提升設計資產消費效率。

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

評論(0) 瀏覽(38)

162025-3

Banner布局在用戶界面中的設計樣式研究

ui設計分享達人設計思維

前言

Banner，這一設計元素對于我們設計師而言早已經是司空見慣，其核心往往聚焦于視覺表現的層面，也是成為UI設計師重要能力play中的一環。今天要寫的，并非Banner在視覺藝術上的探索，而是其在UI場景中布局樣式的深度剖析。

Banner圖作為產品中的一項基礎功能，其存在已是常態。在視覺創意的追求之外，UI層面的樣式布局也在不斷尋求突破與創新。

一、Banner 視覺層表現

二、Banner 布局樣式

三、總結

一、Banner視覺層表現

作為界面視覺焦點，Banner通常以可交互的輪播組件形式呈現，這種動態展示方式已成為現在產品的重要導航模式之一。它不僅是信息傳遞的載體，也是平臺與用戶對話的窗口，承載著活動推廣、品牌宣發等核心內容的展示使命。在提升用戶注意力的設計探索中，Banner的視覺表現手法持續演進。從設計維度來看，我們不僅要在創意構思、版式布局、色彩搭配等基礎層面下功夫，更需在表現形式上尋求突破。

基于動態復雜度，我將Banner的表現形式歸納為四個層級：從基礎的靜態圖像，到輕量級的GIF動畫，再到沉浸式的視頻背景，直至最具空間感的分層效果，每種形式都對應著不同的設計目標和用戶體驗。

1.1靜態

在眾多Banner表現形式中，靜態輪播圖因其高效的設計實現和便捷的技術支持而成為多數產品最普遍的選擇。

這類Banner采用靜態圖片作為視覺載體，根據產品需求可分為兩種基礎模式：單一畫面呈現的簡約風格，以及多畫面輪播的交互形式。其中，多圖輪播既支持自動播放的時間軸切換，也允許用戶通過手勢滑動進行自主瀏覽，在保持視覺簡潔性的同時增加了交互維度。這種設計平衡了視覺效果與功能實用性，所以會成為多數產品的首選方案。

1.2動態

動態Banner以生動的表現力，在吸引用戶注意力方面展現出顯著優勢。通過關鍵元素的微妙動畫和CTA按鈕的交互反饋，能夠有效引導用戶視線，強化信息層級。

在動態Banner的應用中，單圖形式往往更受青睞。雖然動態效果能提升視覺吸引力，但過度使用可能導致"視覺噪音"，反而分散用戶注意力，降低核心信息的傳達效率。

面對信息過載的數字環境。微交互動畫作為一種優雅的解決方案，在功能引導和視覺敘事兩個維度都發揮著重要作用，也已經成為界面設計中不可或缺的設計語言。

1.3視頻

視頻廣告作為一種成熟的營銷媒介，在短視頻文化盛行的當下，已逐步融入Banner輪播體系。這類視頻Banner通常占據首屏黃金位置，配合明確的倒計時提示和便捷的關閉選項，為用戶提供可控的觀看體驗。為減少對用戶的干擾，視頻默認采用靜音播放模式，這種貼心的設計選擇體現了以用戶為中心的設計理念。

在特定垂直領域，如影視類平臺，我們也能觀察到多視頻輪播的創新應用。這種相對小眾的呈現方式，往往與平臺的內容屬性高度契合，為特定用戶群體提供沉浸式的瀏覽體驗。這種差異化的設計策略，展現了產品設計中對場景化需求的深入思考。

1.4分層

在追求差異化體驗的設計浪潮中，輪播廣告正在突破傳統平面展示的局限。分層視覺設計以其獨特的空間感和動態層次，為Banner設計注入了新的活力。這種創新表現形式包含多層次的視覺構建：從基礎的內容層疊加視覺，到更具空間感的3D翻轉效果，再到前景與背景的智能分離運動，每種方式都在重新定義用戶與廣告內容的交互方式。

基于視覺層次的運動差異，設計出引人入勝的視覺敘事，能夠有效的提升用戶參與度以及更具沉浸感和記憶點廣告體驗。

小結

Banner的視覺創新是提升內容吸引力的關鍵驅動力。

每一種新的視覺語言都是我們與用戶對話的新方式，是提升信息傳達效率的重要途徑。在競爭激烈的市場環境中，差異化的表現形式往往能成為抓住用戶注意力的制勝法寶，這也是為什么我們要不斷突破常規，尋求更具感染力的視覺解決方案。

二、Banner布局樣式

在確定Banner的視覺表現手法后，就得深入研究其在界面布局中的空間關系。布局樣式的多樣性源于多個設計維度的考量：從Banner的寬高比例、尺寸規格，到其與頁面結構的整合方式（通欄或分欄），再到其與周圍元素的視覺關系（獨立呈現或背景融合）等。

就通欄與分欄布局而言，這種結構性選擇直接影響Banner的視覺占比。雖然直覺告訴我們更大的Banner更具吸引力，但優秀的設計需要平衡信息層級與視覺舒適度。Banner的布局不應是孤立的決策，而應該與整體界面風格和諧統一，既要突出又要融入，在視覺沖擊力和界面協調性之間找到最佳平衡點。這種全局性的設計思維，正是打造優質用戶體驗的關鍵點所在。

在處理深色系頭部界面時，我們常采用Banner與背景層疊的設計策略。這種手法通過建立視覺深度，創造出富有層次的空間感。背景色的處理有兩種方式：一是采用固定色值保持統一性，二是根據輪播圖主色調動態調整，后者能實現更自然的視覺過渡，提升整體設計的融合度與空間縱深感。

在Banner比例方面，選擇直接影響高度控制，需要根據界面內容密度靈活調整。除了基于內容需求的自定義方案，許多人會采用數學比例系統進行規范化設計。其中，基于斐波那契數列推導出的8:5、8:3等比例關系，因其視覺舒適度而被廣泛采用。在實際應用中，我更傾向于選擇能被4整除的數值，既符合開發規范，又能確保在不同設備上的適配性。

以經驗作為基石，而不是限制，特殊情況特殊對待，就像配合前端工程師調整設計圖樣式一樣，靈活運用。

三、總結

Banner作為頁面中的常見元素，與其說是對布局樣式的探索，不如說是對用戶體驗的深度挖掘。每一次布局創新都是對用戶與頁面互動方式的重新思考。

一個恰到好處的留白、一次精準的視覺引導、一個流暢的交互過渡，這些細微之處都可能成為提升產品體驗的關鍵。當我們能夠系統性地把控每個設計細節，將用戶需求轉化為優雅的解決方案時，就能做出真正打動人心的頁面設計。

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

評論(0) 瀏覽(30)

« 1 2 3 4 ... 8 »

日歷

鏈接

個人資料

藍藍設計的小編 http://m.gerard.com.cn

午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

首頁

畫圖標，我是認真的

響應式布局-創造無縫的跨平臺用戶體驗

響應式布局｜打造跨平臺無縫體驗的設計利器

鼠標指針的秘密：提升PC端交互的小技巧

以用戶為中心的交互設計思維

AI重塑互聯網，賦予技術溫度與關懷

AI創作工具的「可控性」與「用戶體驗」博弈

產品設計如何利用心理學

關于設計組件庫，一些新思考

Banner布局在用戶界面中的設計樣式研究

分類

日歷

鏈接

個人資料

存檔