日韩高清卡1卡2卡3麻豆无卡,18禁超污无遮挡无码网址极速,一级成人欧美一区在线观看,中文字幕日本在线免费,国产在线视频欧美亚综合

首頁

182025-3

當客戶說'不夠高級'時，我用這兩招讓設計秒變奢侈品視覺

杰睿

今天我們視覺課上有同學的作業畫了一個唱片機，有很多的問題，我們來看一下。

修改前：

修改后：

給家分享一下修改的心得和注意事項。

1.結構比列

我們先從結構比例上來觀察，唱片的大小不合適，超出了唱片機的范圍。唱片也沒有厚度，顯得很單薄。最后是唱片機的高度很低，這樣導致了最后的整體效果有些扁扁的，不夠飽滿的和立體：

所以我們需要把這些比列問題先調整出來。收回唱片的范圍、增加唱片的厚度、增加唱片機的高度：

通過結構比列的調整，整體可以看到明顯地變得更穩定和飽滿了。

2.結構組合

原來的作業里，在唱片機側面增加了旋鈕來作為裝飾：

但是這樣加有幾個問題。

第一個是，左右兩邊都是旋鈕，這樣在視覺上會很重復。

第二是，占比都很小，整體看起來就會很小氣，不飽滿。

看下我們修改后的：

左邊的一排旋鈕，我們減少成了一個大旋鈕和一個顯示屏：

而右邊呢，我們可以直接不加東西，如果一定要加也盡量區別于左邊。比如可以加一個播放狀態：

這樣是不是就更豐富飽滿了呢。

所以我們在這些周圍加結構裝飾的時候呢，一定要注意飽滿度，然后是盡量用不同的類型去修飾，減少重復性。

3.顏色調整

還有一個比較大的問題，那就是顏色了，原來的顏色整體都有些悶悶的，不夠高級，左邊旋鈕的顏色也比較跳脫：

再分析一下他的顏色選擇：

可以看到基本是同一個顏色單純變化了明度和飽和度。

那我們修改后的顏色呢:

可以看到有明顯的色相變化，但是飽和度和明度基一直在中間最頂部，沒有做變化。這樣才能讓我們的的顏色始終保持干凈通透。

原本比較跳脫的按鈕顏色也改成了和身體一致的顏色，這樣就不會顯得跳脫了：

4.細節表現

原來的作業，唱片基本就是黑色，沒有光感：

這種比較中心的元素不應該平平無奇，而是要想辦法增加更多的細節，這樣才能好看，才能吸睛！

矩形工具拉一個藍色塊：

用透視工具拉變形成兩個倒三角：

剪貼蒙版到唱片上，然后調整羽化值20左右，就得到了貼合唱片的光感：

用同樣的方法，多做幾條光：

新建圖層填充一個中性灰，然后使用濾鏡-雜色-添加雜色功能做出這個素材：

使用疊加模式，透明度45%把這個素材疊加在唱片上以增加顆粒感：

接下來，我們還要加強光感對比:

在箭頭位置都加入了更亮的顏色去提亮，讓整體的光感更通透和明亮，就不會像原來這樣整體悶悶的了：

最后我們再來看一下完成后的效果：

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

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

評論(0) 瀏覽(292)

172025-3

彈框關閉的七種交互方式

杰睿

前言：日常設計工作中，我們設計師可能會面臨以下設計問題：

移動端彈框什么時候需要關閉按鈕？什么時候不需要關閉按鈕？
界面中間的確認取消警示彈框，是否需要在右上角添加“關閉”icon按鈕？
手勢關閉彈框需要注意什么？
iOS和安卓兩端關閉彈框有什么區別？
點擊彈框中的任務按鈕，彈框是關閉還是不收起？

統一使用圖標按鈕，以icon“x”的形式，顯示在底部彈框的右上角，用戶通過點擊“關閉icon”圖標按鈕來關閉彈框。

使用場景

當彈框中包含內容和功能操作時，應提供一個關閉icon“x”的圖標按鈕，以讓用戶能夠主動關閉彈框并進行相應的操作。

何時不需要關閉按鈕icon“x”？

1.操作型彈框，需要用戶確認或選擇操作項，不需要顯示關閉按鈕，需統一使用文字主按鈕，以文本“取消”的按鈕形式，顯示在彈框面板底部，用戶通過點擊“取消”按鈕來關閉彈框。例如當用戶進行刪除或提交操作時，彈出的確認框通常只需要“確定”和“取消”按鈕，而不需要顯示關閉按鈕。

2.全局提示toast（自動關閉）。

3.功能入口類型彈框，為了保持界面簡潔，不需要“關閉icon”，如智能文檔編輯模式的底部懸浮工具欄。

4.警示或通知類型的彈框，不要關閉icon。

關閉按鈕位置

關閉按鈕需統一顯示在彈框右上角。遵循iOS和Android系統規范、用戶使用習慣、閱讀習慣「Z字型」、避免誤操作「關閉之前需要先確認信息和操作項」。

關閉按鈕icon“x”何時需要展示在左上角？

頁面級：當頁面層級超過3級時，為了便于用戶能快速回到一級頁面，無需原路返回，可以將關閉按鈕“x” 置于左上角，位于「返回」按鈕右側。

多語言和國際化用戶習慣：特定語言和文化習慣，從右向左閱讀順序，遵循用戶閱讀習慣。例如臺灣、日本等。

用戶點擊彈框外部區域，即遮罩層，可關閉彈框。

遮罩層不可點擊場景

1、模態彈框，即“阻斷式”，必須要用戶確認彈框內操作。例如刪除等需要用戶確認的警示彈框。

2、彈框的內容區域，包含表單輸入框等需要用戶提交數據，為了防止誤操作導致用戶輸入的數據丟失，遮罩層不可點擊。

3、有前置限制條件，需要用戶完成特定操作或滿足特定條件才可關閉彈框。例如用戶隱私協議場景，必須要用戶主動勾選同意協議選項。

遮罩層展示邏輯

1、非模態彈框，不加遮罩層；模態彈框，加遮罩層；

2、遮罩層統一使用半透明黑色蒙層，色值和不透明度的數值由UI定義；

3、遮罩層可視高度，遵循移動端最小點擊區域48dp*48dp高度的交互熱區，保證用戶可點擊

遮罩層的覆蓋范圍

遮罩層需覆蓋標題欄，需遵循iOS、Android、微信小程序平臺規范。其中微信小程序端，遮罩層覆蓋標題欄，但不可覆蓋標題欄右側膠囊按鈕。
若是內嵌H5頁面，因客觀條件限制，則彈框之下的遮罩層無需覆蓋標題欄。
以上提到模態彈框和非模態彈框兩種彈框模式，要想更清晰理解兩種模式彈框的關閉交互方式，需要理解兩者之間的交互區別。‍‍

模態彈框和非模態彈框的交互區別

模態彈框‍‍‍‍‍‍‍‍‍‍‍‍：

用戶只能操作彈框內的交互元素，彈框外部區域不可操作，需要加半透明遮罩層。例如底部操作型彈框。

非模態彈框‍‍‍‍‍‍‍‍‍‍‍

用戶可以并行操作彈框內和彈框外部區域的交互元素，不要加半透明遮罩層。例如蘋果地圖App。

用戶在底部彈框區域向下滑動手指，彈框會隨之向下移動，當到達當前彈框高度的1/2位置后，會觸發關閉交互，用戶繼續向下滑動松手則關閉彈框。

交互邏輯

1、支持下拉關閉的彈框，頭部區域需統一展示水平條icon，樣式由UI定義

2、交互熱區：底部彈框全部區域

3、手勢方向：手指只能向下移動

4、下拉觸發關閉彈框閾值：當前底部彈框高度的1/2位置

使用場景

長內容類型彈框，需使用下拉關閉交互手勢，關閉彈框

不可用下拉手勢關閉彈框的場景

1、模態彈框，即“阻斷式”，必須要用戶確認彈框內操作。例如刪除等需要用戶確認的警示彈框。

2、彈框的內容區域，包含表單輸入框等需要用戶提交數據，為了防止誤操作導致用戶輸入的數據丟失，不可下拉關閉彈框。

3、有前置限制條件，需要用戶完成特定操作或滿足特定條件才可關閉彈框。例如用戶隱私協議場景，必須要用戶主動勾選同意協議選項。

用戶在屏幕上向下滑動（包括左下或右下滑動方向）至任意位置后松手釋放，可關閉彈框；當用戶手指下滑未松手，繼續向上滑動到任意位置后松手釋放，則可取消關閉彈框。

使用場景

僅圖片大圖模式場景使用。用戶向下滑動屏幕，圖片隨之向下移動，松手后觸發關閉圖片查看器，關閉圖片彈框

例如：手機相冊

用戶從彈框區域左邊緣向右輕掃，即快速向右滑動后松手，則觸發關閉彈框操作，關閉彈框。

不可從界面左邊緣向右輕掃場景

1、模態彈框，即“阻斷式”，必須要用戶確認彈框內操作。例如刪除等需要用戶確認的警示彈框

2、彈框的內容區域，包含表單輸入框等需要用戶提交數據，為了防止誤操作導致用戶輸入的數據丟失，不支持向右輕掃關閉彈框。

3、有前置限制條件，需要用戶完成特定操作或滿足特定條件才可關閉彈框。例如用戶隱私協議場景，必須要用戶主動勾選同意協議選項。

除以上場景外，均需要支持彈框左邊緣向右輕掃手勢關閉彈框，包括Android、iOS、小程序。

特殊場景

1、當同時存在頁面向右滑和彈框向右輕掃手勢時，在彈框區域向右輕掃，先關閉彈框，再次沿著屏幕左邊緣向右滑動，則返回上級頁面。

2、鍵盤展開場景，iOS端不支持左邊緣向右輕掃收起鍵盤，遵循iOS平臺規范。

對于安卓設備，用戶可以使用設備上的物理返回按鈕來關閉彈框。當用戶按下返回按鈕時，可關閉彈框。

交互用法

1、點擊物理按鍵，需原路逐級返回，不允許跳級返回

2、模態彈框，遮罩層覆蓋物理返回按鍵，不支持左邊緣向右輕掃關閉彈框

3、安卓手機將系統導航方式切換到全面屏手勢，則不存在物理返回按鍵

點擊彈框中的功能按鈕，通常需要立即執行并關閉彈框。一定是先執行再關閉彈框，而不是先關閉彈框再執行。用戶執行某功能按鈕后，遵循即時響應原則，系統必須要反饋用戶在執行用戶操作。
為什么點擊執行功能按鈕需要關閉彈框？因為彈框是否關閉，和用戶目標有關。用戶主動觸發某操作喚起彈框，首先是有用戶目標的，其次，用戶通過點擊彈框內某功能按鈕，執行任務來實現用戶目標。
此外，也存在點擊執行功能按鈕立即執行不關閉彈框的場景，比如開關選擇器，但本質還是圍繞當前用戶目標來進行決策是否關閉彈框。

結語：任何設計都有它遵循的規律

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

評論(0) 瀏覽(384)

172025-3

畫圖標，我是認真的

杰睿

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

1. 切勿過度素材化

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

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

2. 刻意練習強化

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

3. 擺脫素材才能規范化

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

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

4. 質感的層層強化

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

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

5. 延展界面場景

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

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

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

7. 延續風格補全設計

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

8. 統一性還是差異化

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

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

你喜歡哪一版？

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

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

評論(0) 瀏覽(283)

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) 瀏覽(306)

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) 瀏覽(281)

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) 瀏覽(300)

162025-3

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

鶴鶴

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

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

感謝

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

評論(0) 瀏覽(335)

162025-3

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

鶴鶴

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

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

評論(0) 瀏覽(341)

162025-3

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

鶴鶴

這兩年生成式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) 瀏覽(315)

162025-3

產品設計如何利用心理學

鶴鶴

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