国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁(yè)

畫(huà)圖標(biāo),我是認(rèn)真的

天宇 圖標(biāo)設(shè)計(jì)文章及欣賞

對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō),圖標(biāo)設(shè)計(jì)的能力至關(guān)重要,也是提升感官體驗(yàn)的重要方向。對(duì)于一些初入行業(yè)的設(shè)計(jì)師,習(xí)慣下載圖標(biāo)素材應(yīng)付項(xiàng)目需求,失去了動(dòng)手能力培養(yǎng)的機(jī)會(huì)。甚至一些多年工作經(jīng)驗(yàn)的老司機(jī),依然還擺脫不了使用素材的習(xí)慣,稍微復(fù)雜一點(diǎn)的技法就會(huì)難以駕馭。

 

1. 切勿過(guò)度素材化

 

對(duì)于初入職場(chǎng)的設(shè)計(jì)師來(lái)說(shuō),偶爾運(yùn)用素材可以理解,但是一定要學(xué)會(huì)拆解和分析,掌握還原設(shè)計(jì)的技巧和能力。

 

 

過(guò)度依賴素材容易導(dǎo)致思維固化,不愿意去創(chuàng)造,失去創(chuàng)新設(shè)計(jì)的能力;也容易導(dǎo)致眼高手低,有想法卻實(shí)現(xiàn)不出來(lái),極容易萌生放棄的念頭;素材拼貼形式完成的設(shè)計(jì),在規(guī)范性和細(xì)節(jié)性上面也是大打折扣的,導(dǎo)致設(shè)計(jì)作品不夠精細(xì)化和規(guī)范性。

 

 

 

 

 

2. 刻意練習(xí)強(qiáng)化

 

我們需要通過(guò)刻意練習(xí)來(lái)提升圖標(biāo)設(shè)計(jì)的能力,根據(jù)一萬(wàn)小時(shí)定律,技法層面的提升都是通過(guò)反復(fù)磨練達(dá)到的。

 

 

 

 

 

 

3. 擺脫素材才能規(guī)范化

 

圖標(biāo)設(shè)計(jì)從素材習(xí)慣過(guò)度到設(shè)計(jì)動(dòng)手其實(shí)很容易,但是從會(huì)畫(huà)到畫(huà)好之間看似簡(jiǎn)單卻很難掌握。擺脫素材是圖標(biāo)設(shè)計(jì)規(guī)范化的關(guān)鍵,然后再統(tǒng)一風(fēng)格和細(xì)節(jié)規(guī)范,掌握數(shù)字化關(guān)系也是需要我們反復(fù)研究的課題。

 

 

 

 

比如以這個(gè)天氣圖標(biāo)來(lái)舉例,相信很多同學(xué)都能畫(huà)出來(lái),但是有沒(méi)有把控里面的數(shù)字關(guān)系就難說(shuō)了。通過(guò)以下示意圖我們可以看出來(lái),大圓和小圓之間的比例關(guān)系是 4:3,而間距的關(guān)系也與圓形的大小有著數(shù)字關(guān)系。這些數(shù)字關(guān)系可以使得圖標(biāo)設(shè)計(jì)更加精細(xì)化,也能引導(dǎo)我們?nèi)ヌ剿髟O(shè)計(jì)背后量化的標(biāo)準(zhǔn)和關(guān)系。

 

 

 

 

 

 

4. 質(zhì)感的層層強(qiáng)化

 

當(dāng)我們繪制完圖標(biāo)的造型之后,運(yùn)用合適的風(fēng)格進(jìn)行質(zhì)感強(qiáng)化也是尤為重要的。這里我先運(yùn)用其中的一個(gè)風(fēng)格來(lái)完成,選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級(jí)關(guān)系更加明顯,這里單獨(dú)對(duì)局部進(jìn)行了光影強(qiáng)化和邊界處理,看看以下步驟拆解圖感受一下。

 

 

 

 

備注:運(yùn)用的軟件功能是背景模糊,Sketch 或者 Figma 等軟件皆可實(shí)現(xiàn)。

 

 

 

5. 延展界面場(chǎng)景

 

為了進(jìn)一步強(qiáng)化圖標(biāo)練習(xí),延展了一個(gè)簡(jiǎn)單的界面場(chǎng)景,一個(gè)由宮格布局組合成的界面設(shè)計(jì)。為了填充所需的內(nèi)容,先把之前的一些圖標(biāo)作品放進(jìn)去占個(gè)位置。雖然都是質(zhì)感一類的圖標(biāo),但是由于透視、配色、風(fēng)格和細(xì)節(jié)規(guī)范等不一致,整體還是存在一定的排斥感。

 

 

 

 

 

 

6. 根據(jù)界面環(huán)境重新調(diào)整

 

由于界面設(shè)計(jì)屬于深色主題,之前練習(xí)的天氣圖標(biāo)放入場(chǎng)景中顯得過(guò)于突出,而且玻璃質(zhì)感的通透性沒(méi)有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對(duì)天氣圖標(biāo)進(jìn)行了重新調(diào)整,以深色關(guān)系調(diào)整了云朵部分,針對(duì)太陽(yáng)的配色和尺寸比例也進(jìn)行了調(diào)整,如以下效果圖。

 

 

 

 

 

 

7. 延續(xù)風(fēng)格補(bǔ)全設(shè)計(jì)

 

以調(diào)整后的天氣圖標(biāo)作為風(fēng)格規(guī)范,延續(xù)了其它業(yè)務(wù)場(chǎng)景的圖標(biāo)設(shè)計(jì),在透視關(guān)系、細(xì)節(jié)規(guī)范、配色比例和光影效果等方面進(jìn)行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分,左邊三個(gè)選擇左上角打光,右邊三個(gè)選擇右上角打光。(當(dāng)然也可以統(tǒng)一一個(gè)方向設(shè)置光影)

 

 

 

 

 

 

8. 統(tǒng)一性還是差異化

 

完成的整體設(shè)計(jì)視覺(jué)風(fēng)格雖然比較統(tǒng)一,但是也有一些問(wèn)題存在。圖標(biāo)之間缺少差異化,過(guò)度統(tǒng)一容易視覺(jué)疲勞,于是在統(tǒng)一性和差異化上面開(kāi)始糾結(jié)了。

 

 

 

 

為了既保障圖標(biāo)設(shè)計(jì)表達(dá)的統(tǒng)一性,又能形成視覺(jué)感的差異化,做出了調(diào)整配色關(guān)系的決定。根據(jù)天氣圖標(biāo)的配色關(guān)系延續(xù)出了其它色系,看看最終的效果如何。

 

 

 

 

 

 

你喜歡哪一版?

 

關(guān)于統(tǒng)一性和差異化因人而異,在朋友圈征集意見(jiàn)也是各有差異,那么你會(huì)喜歡哪一版呢?歡迎留言區(qū)一起互動(dòng)交流。

 

 

 

 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTQyOTA5Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
一、介紹
1.1 發(fā)展歷程
響應(yīng)式布局起源于20世紀(jì)的建筑設(shè)計(jì)領(lǐng)域,最初用于描述建筑物根據(jù)環(huán)境變化自動(dòng)調(diào)整的能力。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展,這一概念被引入到網(wǎng)頁(yè)設(shè)計(jì)中,以解決傳統(tǒng)固定布局在多樣化設(shè)備上的局限性。自2010年以來(lái),隨著智能手機(jī)和平板電腦的普及,響應(yīng)式布局逐漸成為網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)實(shí)踐。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
  •  
    固定布局:內(nèi)容在不同屏幕上的尺寸和布局保持不變。這種設(shè)計(jì)適用于桌面電腦,但在移動(dòng)設(shè)備上顯示效果不佳
  •  
    流式布局:將元素的寬度設(shè)置為百分比而不是固定像素值。這樣可以使網(wǎng)頁(yè)內(nèi)容在不同屏幕尺寸下自動(dòng)調(diào)整大小,但仍存在布局失控和內(nèi)容擠壓的問(wèn)題。
  •  
    媒體查詢:CSS3引入了媒體查詢功能,允許開(kāi)發(fā)人員根據(jù)設(shè)備的特性(如屏幕寬度、分辨率等)應(yīng)用不同的CSS樣式。這種技術(shù)使得網(wǎng)頁(yè)可以根據(jù)設(shè)備的不同特性應(yīng)用不同的布局和樣式,為響應(yīng)式設(shè)計(jì)奠定了基礎(chǔ)
  •  
    響應(yīng)式設(shè)計(jì):綜合利用了流式布局和媒體查詢技術(shù),使網(wǎng)頁(yè)能夠根據(jù)設(shè)備的尺寸和特性動(dòng)態(tài)調(diào)整布局和樣式,以適應(yīng)各種屏幕大小和設(shè)備類型。這種方法提供了更一致、更靈活的用戶體驗(yàn),成為現(xiàn)代Web設(shè)計(jì)的主流趨勢(shì)
  •  
    移動(dòng)優(yōu)先設(shè)計(jì):隨著移動(dòng)設(shè)備用戶數(shù)量的增加,設(shè)計(jì)師開(kāi)始采用移動(dòng)優(yōu)先的設(shè)計(jì)理念,即首先為移動(dòng)設(shè)備設(shè)計(jì)網(wǎng)頁(yè)布局和樣式,然后再逐步增強(qiáng)適應(yīng)桌面設(shè)備。這種方法有助于確保網(wǎng)頁(yè)在小屏幕上的可用性和性能
1.2 基本概念
1.2.1 基于網(wǎng)格布局
響應(yīng)式 UI 基于網(wǎng)格布局。該網(wǎng)格可以確保不同布局之間的視覺(jué)一致性,同時(shí)可以靈活的適配多種寬度的設(shè)計(jì)。網(wǎng)格列的數(shù)量取決于斷點(diǎn)系統(tǒng)。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
1.2.2 斷點(diǎn)(根據(jù)寬度切換布局方式)
斷點(diǎn)是響應(yīng)式設(shè)計(jì)中的關(guān)鍵概念,它指的是屏幕寬度達(dá)到某個(gè)預(yù)設(shè)值時(shí),布局會(huì)發(fā)生明顯變化的點(diǎn)。通過(guò)設(shè)置斷點(diǎn),設(shè)計(jì)師可以為不同的屏幕尺寸定制不同的布局方案。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
1.2.3 主要應(yīng)用于橫向空間,同時(shí)適配PC + 平板 + 手機(jī)
傳統(tǒng)頁(yè)面布局策略通常遵循這樣一種原則:即內(nèi)容的多少?zèng)Q定了頁(yè)面的滾動(dòng)長(zhǎng)度。而頁(yè)面的水平寬度則往往被設(shè)定為一個(gè)固定值,以確保在不同設(shè)備和瀏覽器上展示時(shí)的一致性和穩(wěn)定性。然而,隨著移動(dòng)設(shè)備的多樣化和用戶瀏覽習(xí)慣的變化,固定的頁(yè)面寬度已無(wú)法滿足所有場(chǎng)景的需求。在這種情況下,響應(yīng)式布局應(yīng)運(yùn)而生,其核心思想是使頁(yè)面的寬度能夠根據(jù)不同設(shè)備的屏幕尺寸動(dòng)態(tài)調(diào)整。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
二、實(shí)現(xiàn)方式
2.1 媒體查詢
媒體查詢是CSS3的一個(gè)特性,允許根據(jù)不同的設(shè)備特性(如屏幕寬度、分辨率等)應(yīng)用不同的樣式規(guī)則。通過(guò)媒體查詢,設(shè)計(jì)師可以為不同的設(shè)備和視口尺寸定制不同的布局和樣式。
優(yōu)點(diǎn)
  •  
    靈活性高,可以針對(duì)不同的設(shè)備特性(如屏幕寬度、分辨率、設(shè)備方向等)應(yīng)用不同的樣式規(guī)則
  •  
    允許創(chuàng)建復(fù)雜的響應(yīng)式邏輯,如在橫屏模式下調(diào)整布局或針對(duì)特定設(shè)備優(yōu)化樣式
缺點(diǎn)
  •  
    可能導(dǎo)致CSS代碼變得復(fù)雜和難以維護(hù),特別是當(dāng)有大量不同的設(shè)備和條件需要處理時(shí)
  •  
    需要對(duì)各種設(shè)備和屏幕尺寸有深入的了解,以確保兼容性和一致性
使用場(chǎng)景
  •  
    當(dāng)需要為不同的設(shè)備或視口條件定制不同的布局和樣式時(shí)
  •  
    當(dāng)設(shè)計(jì)需要考慮多種設(shè)備特性,如屏幕方向變化或高分辨率顯示時(shí)
 
2.2 百分比
百分比寬度可以使元素的尺寸相對(duì)于其父容器進(jìn)行縮放,從而實(shí)現(xiàn)響應(yīng)式布局。百分比布局讓元素能夠根據(jù)父容器的大小變化而自動(dòng)調(diào)整寬度,保持布局的靈活性。
優(yōu)點(diǎn)
  •  
    使得元素的大小能夠相對(duì)于其父容器進(jìn)行縮放,從而實(shí)現(xiàn)響應(yīng)式效果
  •  
    簡(jiǎn)單易用,對(duì)于基礎(chǔ)的響應(yīng)式布局非常有效
缺點(diǎn)
  •  
    百分比布局可能在某些情況下不夠精確,特別是在需要固定元素位置或大小時(shí)
  •  
    可能需要結(jié)合其他技術(shù)(如視口單位)來(lái)實(shí)現(xiàn)更精細(xì)的控制
  •  
    每個(gè)屬性都使用百分比,會(huì)造成布局的復(fù)雜度較高
使用場(chǎng)景
  •  
    當(dāng)需要元素大小根據(jù)父容器的大小變化而變化時(shí),如流體網(wǎng)格布局
  •  
    對(duì)于簡(jiǎn)單的響應(yīng)式調(diào)整,如改變?nèi)萜鞯奶畛浠蜻吘?/div>
 
2.3 視口單位(vw/vh 和 vmin/vmax)
vw(視窗寬度單位)和vh(視窗高度單位)是基于視口大小的相對(duì)單位。使用這些單位,元素的尺寸可以與用戶的視口大小同步變化,實(shí)現(xiàn)真正的響應(yīng)式設(shè)計(jì)。
優(yōu)點(diǎn)
  •  
    基于視口的單位提供了一種與設(shè)備視口大小直接相關(guān)的方法來(lái)設(shè)置元素的尺寸
  •  
    可以創(chuàng)建與視口大小成比例的布局,確保在不同設(shè)備上的視覺(jué)一致性
缺點(diǎn)
  •  
    對(duì)于需要非常精確控制元素尺寸的情況,視口單位可能不夠靈活
  •  
    在某些復(fù)雜的布局中,過(guò)度依賴視口單位可能導(dǎo)致計(jì)算復(fù)雜和難以調(diào)試
使用場(chǎng)景
  •  
    當(dāng)設(shè)計(jì)需要元素大小與視口大小成比例時(shí),如全屏背景圖像或響應(yīng)式圖片
  •  
    在需要考慮不同屏幕尺寸和分辨率的布局設(shè)計(jì)中
 
2.4 rem
rem(root em)單位是基于根元素(html元素)的字體大小的相對(duì)單位。通過(guò)設(shè)置根元素的字體大小,可以統(tǒng)一控制頁(yè)面上所有使用rem單位的元素的尺寸,實(shí)現(xiàn)更好的響應(yīng)性和可維護(hù)性。
優(yōu)點(diǎn)
  •  
    rem單位基于根元素的字體大小,提供了一種一致性更強(qiáng)的方法來(lái)縮放元素
  •  
    有助于保持設(shè)計(jì)的一致性和可訪問(wèn)性,因?yàn)樗谐叽缍寂c根字體大小相關(guān)聯(lián)
缺點(diǎn)
  •  
    對(duì)于沒(méi)有深入了解CSS的設(shè)計(jì)師或開(kāi)發(fā)者來(lái)說(shuō),rem的計(jì)算可能有些復(fù)雜
  •  
    在某些情況下,rem可能導(dǎo)致布局的縮放不如預(yù)期,特別是在與百分比或其他單位混合使用時(shí)
使用場(chǎng)景
  •  
    當(dāng)需要整個(gè)頁(yè)面的尺寸和布局與根字體大小保持一致時(shí)
  •  
    在創(chuàng)建可伸縮的排版和需要保持一致性的設(shè)計(jì)中
 
三、布局的幾種類型
3.1 基礎(chǔ)布局
3.1.1 固定
對(duì)于固定寬度的元素,確保它們?cè)谒性O(shè)備上都保持一致的尺寸,適用于那些不需要隨屏幕尺寸變化的元素
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
3.1.2 流式
流式寬度的元素可以根據(jù)父容器的尺寸變化而動(dòng)態(tài)調(diào)整寬度,適用于需要隨屏幕尺寸變化的元素。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
3.1.3 吸附(adhesion)
元素寬度是固定的,直到受到其他元素或斷點(diǎn)的影響。參考產(chǎn)品:花瓣發(fā)現(xiàn)頁(yè)
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
3.1.4 擠壓
元素的寬度隨著面板的出現(xiàn)而收縮
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
3.1.5 推出
推出寬度的元素在特定條件下會(huì)擴(kuò)展到父容器之外,以顯示額外的內(nèi)容或功能。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
3.1.6 遮蓋
遮蓋寬度的元素會(huì)根據(jù)內(nèi)容的需要?jiǎng)討B(tài)調(diào)整寬度,如果內(nèi)容超出父容器,將會(huì)遮蓋相鄰元素
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
3.2 混合布局
3.2.1 固定+流式
這種布局方式結(jié)合了占滿和固定兩種布局方式的特點(diǎn)。元素的寬度可以動(dòng)態(tài)調(diào)整以占滿屏幕空間,而高度則保持固定不變。這種布局方式適用于那些需要充分利用屏幕寬度,但高度固定不變的場(chǎng)景。參考產(chǎn)品:UI中國(guó)、知乎等
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
3.2.2 流式+吸附(典型的響應(yīng)式布局)
等比+斷點(diǎn)布局是指在不同屏幕尺寸下,元素的寬度和高度按照等比縮放,但在某些特定的屏幕尺寸下會(huì)觸發(fā)斷點(diǎn),使得元素的布局方式發(fā)生改變。這種布局方式可以在不同屏幕尺寸下實(shí)現(xiàn)更加靈活和適應(yīng)性更強(qiáng)的布局。參考產(chǎn)品:站酷首頁(yè)。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
四、設(shè)計(jì)流程
4.1 確定常見(jiàn)的屏幕尺寸范圍
通過(guò)對(duì)目標(biāo)用戶群體的設(shè)備使用情況進(jìn)行研究,確定常見(jiàn)的屏幕尺寸范圍,如小屏幕手機(jī)、中等屏幕平板和大屏幕桌面顯示器。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.2 確定適配規(guī)則
4.2.1 間距寬度不變,縮放內(nèi)容區(qū)域
為每個(gè)布局區(qū)間制定具體的布局策略,包括元素的排列方式、大小和位置。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.2.2 內(nèi)容區(qū)域?qū)挾炔蛔儯s放兩側(cè)留白區(qū)域
為每個(gè)布局區(qū)間制定具體的布局策略,包括元素的排列方式、大小和位置。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.2.3 混合縮放,內(nèi)容區(qū)域與兩側(cè)留白區(qū)域同時(shí)變化
為每個(gè)布局區(qū)間制定具體的布局策略,包括元素的排列方式、大小和位置。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.3 分解固定元素
4.3.1 區(qū)分固定元素與變化元素
確定頁(yè)面中的哪些元素應(yīng)該在不同屏幕尺寸下保持不變,哪些元素應(yīng)該隨屏幕尺寸變化而變化。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.3.2 確定頁(yè)面中固定元素的尺寸
對(duì)于頁(yè)面中的固定元素,如Logo、導(dǎo)航欄等,為這些元素設(shè)定在不同屏幕尺寸下的尺寸和位置,確保其在任何設(shè)備上都具有良好的可見(jiàn)性和功能性。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.4 確定卡片(模塊)的布局變化規(guī)則
4.4.1 卡片位置變化
根據(jù)屏幕尺寸的變化,調(diào)整卡片的位置,使其在不同屏幕上都能合理布局。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.4.2 卡片布局變化
改變卡片的排列方式,如從水平排列變?yōu)榇怪迸帕校赃m應(yīng)不同屏幕尺寸的布局需求。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.4.3 卡片數(shù)量變化
根據(jù)屏幕尺寸調(diào)整卡片的數(shù)量,例如在較小屏幕上減少卡片數(shù)量以簡(jiǎn)化內(nèi)容,提高用戶體驗(yàn)。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.5  文本拉伸規(guī)則
4.5.1 溢出省略
對(duì)于過(guò)長(zhǎng)的文本內(nèi)容,采用溢出省略的方式顯示部分內(nèi)容,并用省略號(hào)表示剩余內(nèi)容,確保頁(yè)面布局不被破壞。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.5.2 文本換行
根據(jù)屏幕尺寸調(diào)整文本的換行規(guī)則,使文本在不同屏幕尺寸下都能合理顯示,避免布局被破壞。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.6 圖片拉伸規(guī)則
4.6.1 居中裁剪
在保持圖片比例的同時(shí),對(duì)圖片進(jìn)行裁剪以適應(yīng)不同屏幕尺寸,確保圖片內(nèi)容的重點(diǎn)區(qū)域始終可見(jiàn)。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
4.6.2 等比縮放
根據(jù)屏幕尺寸調(diào)整圖片的大小,確保圖片在不同屏幕尺寸下都能保持原始比例,避免變形或失真。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
五、可見(jiàn)性適配行為
5.1 固定的
對(duì)于固定可見(jiàn)的元素,確保它們?cè)谒性O(shè)備上都保持可見(jiàn),以提供穩(wěn)定的用戶體驗(yàn)。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
5.2 可切換的
對(duì)于可切換的元素,根據(jù)屏幕尺寸和用戶需求在顯示和隱藏之間進(jìn)行切換,以優(yōu)化空間利用和用戶體驗(yàn)。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
5.3 臨時(shí)的
臨時(shí)可見(jiàn)的元素在特定條件下才會(huì)顯示,如當(dāng)用戶與頁(yè)面交互時(shí),可以臨時(shí)顯示額外的信息或操作選項(xiàng)。
響應(yīng)式布局|打造跨平臺(tái)無(wú)縫體驗(yàn)的設(shè)計(jì)利器
 
 
收藏
六、響應(yīng)式模式
6.1 出現(xiàn)
出現(xiàn)模式指的是元素在用戶滾動(dòng)或觸發(fā)某些動(dòng)作時(shí)動(dòng)態(tài)進(jìn)入或退出視圖的過(guò)程。
6.2 變形
變形模式描述元素如何根據(jù)用戶交互或屏幕尺寸變化而改變形狀、大小或布局。
6.3 分割
分割模式涉及將內(nèi)容分割成多個(gè)部分,以適應(yīng)不同的屏幕尺寸和布局需求。
6.4 重排
重排模式指的是元素在不同屏幕尺寸下重新排列,以優(yōu)化空間利用和用戶體驗(yàn)。
6.5 擴(kuò)展
指的是元素或組件能夠根據(jù)內(nèi)容的多少或者用戶的交互動(dòng)作而增加額外的空間或者附加信息。這種模式常見(jiàn)于折疊面板、下拉菜單、模態(tài)窗口等交互元素。擴(kuò)展模式的關(guān)鍵在于它提供了一種優(yōu)雅的方式來(lái)處理額外的內(nèi)容,而不是在所有時(shí)間里都將其展示出來(lái),這樣可以保持界面的整潔和減少不必要的干擾。
6.6 位移
涉及到元素在頁(yè)面上的位置變化,以響應(yīng)用戶的交互或其他條件。這通常是為了重新組織頁(yè)面布局,以便為新的內(nèi)容騰出空間或者將用戶的注意力引向特定的區(qū)域。位移可以是平滑的動(dòng)畫(huà)效果,也可以是簡(jiǎn)單的位置變動(dòng)。需要謹(jǐn)慎使用,以確保用戶不會(huì)被突然的布局變化所困擾。
 
七、結(jié)語(yǔ)
在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí),我們經(jīng)常會(huì)碰到包含多種元素的復(fù)雜設(shè)計(jì)單元,比如圖文結(jié)合的布局,或者是更加多元的卡片、文本和圖像的組合。面對(duì)這種復(fù)雜性,首要任務(wù)是將這些單元分解,審視并理解每個(gè)單獨(dú)元素的適配需求。然后,我們需要綜合考慮這些元素在尺寸、形態(tài)、數(shù)量以及排列上的變化,融合這些變化來(lái)制定一套綜合的適配計(jì)劃。這樣的過(guò)程旨在保證不論是在何種設(shè)備或屏幕尺寸上,這些設(shè)計(jì)單元都能維持其原有的功能和視覺(jué)效果,進(jìn)而為用戶提供優(yōu)質(zhì)的體驗(yàn)。
雖然開(kāi)發(fā)團(tuán)隊(duì)可能依賴于他們的經(jīng)驗(yàn)或遵循既定的設(shè)計(jì)標(biāo)準(zhǔn)來(lái)執(zhí)行適配任務(wù),并不總是需要設(shè)計(jì)師提供詳盡的適配指導(dǎo),但設(shè)計(jì)師對(duì)適配原則的理解和掌握對(duì)于打造適用于所有用戶設(shè)備的連貫體驗(yàn)至關(guān)重要。這種專業(yè)知識(shí)不僅能夠提高設(shè)計(jì)工作的效率和產(chǎn)出的質(zhì)量,還能促進(jìn)與開(kāi)發(fā)團(tuán)隊(duì)的有效合作,共同推動(dòng)產(chǎn)品的成功開(kāi)發(fā)。


作者:姚_Yale
鏈接:https://www.zcool.com.cn/work/ZNjgzNDY5MTY=.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

鼠標(biāo)指針的秘密:提升PC端交互的小技巧

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

一、鼠標(biāo)指針概述
1.1 鼠標(biāo)指針的起源
鼠標(biāo)指針最早出現(xiàn)在20世紀(jì)60年代的早期圖形用戶界面系統(tǒng)中,如Douglas Engelbart在斯坦福研究所開(kāi)發(fā)的oN-Line系統(tǒng)。隨著操作系統(tǒng)的發(fā)展,鼠標(biāo)指針的樣式也變得更加多樣化,以適應(yīng)不同的操作和反饋需求。
 
1.2 鼠標(biāo)指針的定義
光標(biāo)是一種視覺(jué)提示,它不僅向用戶顯示鼠標(biāo)的位置,還向用戶顯示如何與特定元素進(jìn)行交互,包括選擇文本、單擊、拖動(dòng)或滾動(dòng)等。了解哪些光標(biāo)指示哪些類型的交互并適當(dāng)?shù)厥褂盟鼈儯梢允菇缑鎸?duì)用戶更直觀。
 
1.3 在用戶體驗(yàn)中的作用
光標(biāo)作為用戶與計(jì)算機(jī)系統(tǒng)之間交互的主要視覺(jué)工具。在用戶體驗(yàn)中起到一些關(guān)鍵作用,例如:直觀的控制、視覺(jué)焦點(diǎn)、操作反饋、精確選擇、交互提示、增強(qiáng)可訪問(wèn)性、減少錯(cuò)誤等。
 
二、鼠標(biāo)指針的基本功能
2.1 指向與選擇
  •  
    鼠標(biāo)指針最基本的功能之一是指向。用戶可以通過(guò)移動(dòng)鼠標(biāo)來(lái)控制指針在屏幕上的位置,指向不同的界面元素,如按鈕、鏈接、文本或圖像。
  •  
    選擇功能通常與指向結(jié)合使用。當(dāng)用戶將指針?lè)旁谀硞€(gè)元素上并按下鼠標(biāo)按鈕時(shí),就可以選擇該元素。例如,在文本編輯器中,用戶可以通過(guò)指向并點(diǎn)擊來(lái)選擇文本;
  •  
    在網(wǎng)頁(yè)上,指向并點(diǎn)擊鏈接可以打開(kāi)新的頁(yè)面。
 
2.2 點(diǎn)擊與激活
  •  
    點(diǎn)擊是用戶與界面元素交互的常見(jiàn)動(dòng)作。用戶將鼠標(biāo)指針移動(dòng)到按鈕或其他可激活的元素上,然后按下并釋放鼠標(biāo)按鈕來(lái)執(zhí)行點(diǎn)擊操作。
  •  
    激活功能指的是通過(guò)點(diǎn)擊來(lái)觸發(fā)元素的事件或動(dòng)作。例如,點(diǎn)擊一個(gè)按鈕可能會(huì)提交一個(gè)表單,點(diǎn)擊一個(gè)菜單項(xiàng)可能會(huì)打開(kāi)一個(gè)新窗口或執(zhí)行特定的命令。
 
2.3 拖動(dòng)與移動(dòng)
  •  
    拖動(dòng)功能允許用戶通過(guò)按住鼠標(biāo)按鈕并移動(dòng)鼠標(biāo)來(lái)拖拽界面元素,如窗口、圖標(biāo)或選定的文本。
  •  
    移動(dòng)功能是指通過(guò)拖動(dòng)操作來(lái)重新定位元素。用戶可以在桌面上移動(dòng)窗口到不同的位置,或在文檔中拖動(dòng)文本或圖像來(lái)改變它們的位置。
  •  
    拖放操作是拖動(dòng)的擴(kuò)展,用戶可以將一個(gè)元素拖到另一個(gè)元素或區(qū)域來(lái)執(zhí)行特定的功能,如將文件拖到文件夾圖標(biāo)中進(jìn)行移動(dòng)或復(fù)制。
 
三:鼠標(biāo)指針的多樣性
3.1 箭頭光標(biāo)
介紹:箭頭光標(biāo)通常表現(xiàn)為一個(gè)箭頭形狀,指向屏幕的某個(gè)方向(通常是右上方),它允許用戶通過(guò)鼠標(biāo)或觸摸板與屏幕上的元素進(jìn)行交互。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    選擇:
    箭頭光標(biāo)允許用戶點(diǎn)擊按鈕、選擇菜單項(xiàng)或激活鏈接。
  •  
    指向:
    它提供了指向屏幕上特定元素的功能,幫助用戶直觀地識(shí)別可交互區(qū)域。
  •  
    導(dǎo)航:
    在瀏覽網(wǎng)頁(yè)或應(yīng)用程序時(shí),箭頭光標(biāo)幫助用戶在界面中導(dǎo)航。
交互行為
  •  
    懸停:
    將箭頭光標(biāo)懸停在某個(gè)元素上可能會(huì)顯示額外的信息,如工具提示或菜單;也可能會(huì)觸發(fā)視覺(jué)變化,如顏色或大小改變
  •  
    點(diǎn)擊:
    用戶可以通過(guò)將箭頭光標(biāo)定位到目標(biāo)上并點(diǎn)擊鼠標(biāo)左鍵來(lái)執(zhí)行點(diǎn)擊操作。
 
3.2 指針光標(biāo)
介紹:指針光標(biāo)是屏幕上的一個(gè)可見(jiàn)符號(hào),通常隨鼠標(biāo)移動(dòng)而變化位置,允許用戶與計(jì)算機(jī)進(jìn)行交互。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    選擇:
    通過(guò)點(diǎn)擊操作選擇界面元素。
  •  
    指向:
    指示屏幕上的特定位置。
  •  
    激活:
    點(diǎn)擊按鈕或鏈接以觸發(fā)事件。
  •  
    拖動(dòng):
    拖動(dòng)窗口或?qū)ο蟮叫挛恢谩?/div>
交互行為
  •  
    懸停:
    將光標(biāo)停留在某個(gè)元素上以查看狀態(tài)變化或提示信息。
  •  
    點(diǎn)擊:
    按下并釋放鼠標(biāo)按鈕以選擇或激活元素。
  •  
    雙擊:
    快速連續(xù)點(diǎn)擊兩次以執(zhí)行默認(rèn)命令,如打開(kāi)文件或文件夾。
 
3.3 文本光標(biāo)
介紹:文本光標(biāo)是一個(gè)通常出現(xiàn)在文本字段中的垂直線條或豎條,指示用戶可以在此位置插入文本。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    文本輸入:
    允許用戶在文本字段中輸入字符。
  •  
    文本編輯:
    用戶可以通過(guò)點(diǎn)擊文本光標(biāo)來(lái)定位文本中的特定位置,進(jìn)行編輯或修改。
交互行為
  •  
    點(diǎn)擊:
    用戶可以將鼠標(biāo)指針移動(dòng)到文本光標(biāo)上并點(diǎn)擊,以在該位置插入或編輯文本。
  •  
    拖動(dòng):
    用戶可以拖動(dòng)文本光標(biāo)來(lái)選擇文本。
 
3.4 十字光標(biāo)
介紹:十字光標(biāo)通常表現(xiàn)為一個(gè)十字形或“+”形的指針,它允許用戶進(jìn)行非常精確的定位和選擇。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精確定位:
    十字光標(biāo)幫助用戶在屏幕上進(jìn)行精確的點(diǎn)擊或選擇。
  •  
    細(xì)節(jié)操作:
    在需要處理圖像、圖表或其他細(xì)節(jié)元素時(shí),十字光標(biāo)提供了更好的控制。
交互行為
  •  
    點(diǎn)擊:
    用戶可以使用十字光標(biāo)進(jìn)行精確點(diǎn)擊。
  •  
    拖動(dòng):
    在需要選擇特定區(qū)域或繪制圖形時(shí),用戶可以拖動(dòng)十字光標(biāo)。
 
3.5 不允許的光標(biāo)
介紹:不允許/禁止光標(biāo)通過(guò)特定的視覺(jué)樣式(如帶斜線的圓圈或箭頭)來(lái)表示某個(gè)操作在當(dāng)前上下文中是不被允許或禁止的。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    禁用指示:
    指示用戶界面中的某些元素或操作目前不可用或被鎖定。
  •  
    防止誤操作:
    通過(guò)視覺(jué)提示防止用戶嘗試執(zhí)行不可用的操作,從而避免可能的誤操作或錯(cuò)誤。
交互行為
  •  
    視覺(jué)反饋:
    當(dāng)用戶將鼠標(biāo)移動(dòng)到禁止操作的區(qū)域時(shí),光標(biāo)變化提供即時(shí)的視覺(jué)反饋。
  •  
    操作阻止:
    系統(tǒng)阻止用戶執(zhí)行任何無(wú)效的操作。
 
3.6 屏幕快照選擇區(qū)域
介紹:屏幕快照選擇區(qū)域光標(biāo)允許用戶通過(guò)拖動(dòng)來(lái)定義一個(gè)區(qū)域,這個(gè)區(qū)域?qū)⒈徊蹲讲⒈4鏋閳D像文件。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精確定位:
    十字光標(biāo)幫助用戶在屏幕上進(jìn)行精確的點(diǎn)擊或選擇。
  •  
    細(xì)節(jié)操作:
    在需要處理圖像、圖表或其他細(xì)節(jié)元素時(shí),十字光標(biāo)提供了更好的控制。
交互行為
  •  
    點(diǎn)擊:
    用戶可以使用十字光標(biāo)進(jìn)行精確點(diǎn)擊。
  •  
    拖動(dòng):
    在需要選擇特定區(qū)域或繪制圖形時(shí),用戶可以拖動(dòng)十字光標(biāo)。
 
3.7 消失光標(biāo)
介紹:指示在松開(kāi)按鈕時(shí),所拖移的項(xiàng)目將消失。如果項(xiàng)目是
替身
,則不會(huì)刪除其原件。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
 
3.8 拷貝光標(biāo)
介紹:拷貝光標(biāo)通常表現(xiàn)為一個(gè)箭頭旁邊帶有“+”號(hào)或其他表示復(fù)制的符號(hào),明確告訴用戶當(dāng)前操作將復(fù)制選中的項(xiàng)目。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    復(fù)制操作:
    允許用戶通過(guò)拖動(dòng)來(lái)復(fù)制文件、文件夾或其他界面元素。
  •  
    數(shù)據(jù)傳輸:
    在不同應(yīng)用程序或同一應(yīng)用程序的不同部分之間傳輸數(shù)據(jù)。
交互行為
  •  
    拖動(dòng)復(fù)制:
    用戶將鼠標(biāo)指針?lè)旁诳蓮?fù)制的元素上,按下鼠標(biāo)按鈕并拖動(dòng)以復(fù)制該項(xiàng)目。
  •  
    釋放完成:
    用戶在目標(biāo)位置釋放鼠標(biāo)按鈕,完成復(fù)制操作。
 
3.9 替身光標(biāo)
介紹:替身光標(biāo)表明用戶可以通過(guò)拖動(dòng)操作創(chuàng)建原文件或文件夾的快捷方式,而不是移動(dòng)原始項(xiàng)目。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    創(chuàng)建快捷方式:
    允許用戶在不改變?cè)嘉募蛭募A位置的情況下,創(chuàng)建一個(gè)指向原始位置的鏈接。
  •  
    節(jié)省空間:
    替身不占用額外的空間,因?yàn)樗皇且粋€(gè)指向原始文件的引用。
交互行為
  •  
    拖動(dòng):
    用戶將鼠標(biāo)指針?lè)旁谖募蛭募A上,按下并拖動(dòng)。
  •  
    創(chuàng)建替身:
    在拖動(dòng)過(guò)程中不松開(kāi)鼠標(biāo)按鈕,同時(shí)按下Option鍵(或根據(jù)系統(tǒng)提示的其他修飾鍵),光標(biāo)將變?yōu)樘嫔砉鈽?biāo)。
  •  
    放置:
    用戶將文件或文件夾拖到所需位置并釋放鼠標(biāo)按鈕,完成替身的創(chuàng)建。
 
3.10 幫助指針
介紹:幫助指針通常表現(xiàn)為一個(gè)問(wèn)號(hào)(?)或帶有問(wèn)號(hào)的圖標(biāo),表示用戶將鼠標(biāo)懸停在某個(gè)元素上時(shí)可以獲取幫助或說(shuō)明。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    提供信息:
    幫助指針可以向用戶顯示額外的說(shuō)明或信息。
  •  
    輔助理解:
    幫助用戶理解界面元素的功能或操作方式。
交互行為
  •  
    懸停顯示:
    當(dāng)用戶的鼠標(biāo)指針懸停在具有幫助功能的界面元素上時(shí),光標(biāo)樣式可能會(huì)變化,同時(shí)顯示幫助信息。
  •  
    點(diǎn)擊獲取:
    在某些情況下,用戶可能需要點(diǎn)擊帶有幫助指針的元素以打開(kāi)幫助文檔或獲取更多信息。
 
3.11 鉛筆光標(biāo)
介紹:鉛筆光標(biāo)是一種視覺(jué)提示,通常表現(xiàn)為一個(gè)鉛筆形狀的圖標(biāo),用來(lái)告訴用戶他們當(dāng)前處于可以繪制或編輯文本的狀態(tài)。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    文本輸入:
    鉛筆光標(biāo)用于指示用戶可以在文本字段中輸入文字。
  •  
    文本編輯:
    在已有文本上移動(dòng)鉛筆光標(biāo),可以進(jìn)行文字的選擇、編輯或修改。
交互行為
  •  
    點(diǎn)擊定位:
    用戶可以在文本中的任何位置點(diǎn)擊鉛筆光標(biāo),以定位文本插入點(diǎn)。
  •  
    拖動(dòng)選擇:
    用戶可以拖動(dòng)鉛筆光標(biāo)來(lái)選擇文本。
 
3.12 精密指針
介紹:精密指針是一種特殊的光標(biāo)樣式,它為用戶提供了更精細(xì)的控制能力,特別是在需要精確定位或選擇的應(yīng)用程序中。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精確定位:
    允許用戶在需要高精度的界面元素上進(jìn)行操作,如圖形設(shè)計(jì)、圖像編輯或表格數(shù)據(jù)輸入。
  •  
    細(xì)致選擇:
    在文本編輯或代碼編輯中,精密指針可以幫助用戶更準(zhǔn)確地選擇文本或代碼段。
交互行為
  •  
    點(diǎn)擊:
    用戶可以使用精密指針進(jìn)行精確點(diǎn)擊。
  •  
    選擇:
    用戶可以輕松地選擇小尺寸的界面元素或在緊密排列的元素之間進(jìn)行選擇。
 
3.13 單元格指針
介紹:?jiǎn)卧裰羔樖且环N特殊類型的光標(biāo),它在電子表格應(yīng)用程序(如Microsoft Excel、Google Sheets等)中用于指示當(dāng)前選中的單元格或用戶可以輸入數(shù)據(jù)的位置。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    單元格選擇:
    允許用戶通過(guò)點(diǎn)擊來(lái)選擇單個(gè)或多個(gè)單元格。
  •  
    內(nèi)容編輯:
    指示用戶可以在單元格中輸入或編輯數(shù)據(jù)。
交互行為
  •  
    點(diǎn)擊選擇:
    用戶可以通過(guò)點(diǎn)擊來(lái)選擇單元格,單元格指針隨之移動(dòng)到該單元格。
  •  
    拖動(dòng)選擇:
    用戶可以拖動(dòng)單元格指針來(lái)選擇一個(gè)區(qū)域的單元格。
  •  
    輸入編輯:
    用戶可以在單元格指針?biāo)诘奈恢幂斎牖蚓庉嬑谋尽?/div>
 
3.14 放大/縮小指針
介紹:放大/縮小指針通常表現(xiàn)為一個(gè)帶有加號(hào)(+)或減號(hào)(-)的放大鏡圖標(biāo),用來(lái)指示用戶當(dāng)前正在進(jìn)行放大或縮小的操作。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    放大內(nèi)容:
    允許用戶放大查看細(xì)節(jié),例如地圖、圖片或文本。
  •  
    縮小內(nèi)容:
    允許用戶縮小以獲得更廣闊的視野。
交互行為
  •  
    點(diǎn)擊放大/縮小:
    用戶可以通過(guò)點(diǎn)擊帶有“+”或“-”符號(hào)的放大/縮小按鈕來(lái)進(jìn)行操作。
  •  
    拖動(dòng)縮放:
    在一些應(yīng)用中,用戶可以通過(guò)拖動(dòng)一個(gè)滑塊或在觸摸屏幕上用兩個(gè)手指進(jìn)行捏合操作來(lái)放大或縮小。
  •  
    滾輪縮放:
    使用鼠標(biāo)滾輪或觸控板的多點(diǎn)觸控手勢(shì)也可以實(shí)現(xiàn)放大或縮小。
 
3.15 移動(dòng)&拖拽光標(biāo)
介紹:移動(dòng)光標(biāo)是一種鼠標(biāo)指針樣式,通常表現(xiàn)為一個(gè)帶有箭頭的矩形或邊框,表示用戶可以通過(guò)拖動(dòng)來(lái)移動(dòng)某個(gè)元素或?qū)ο蟆?/div>
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    元素移動(dòng):
    允許用戶通過(guò)拖動(dòng)操作來(lái)改變?cè)卦诮缑嫔系奈恢谩?/div>
  •  
    布局調(diào)整:
    用戶可以通過(guò)移動(dòng)光標(biāo)來(lái)調(diào)整界面元素的布局。
交互行為
  •  
    點(diǎn)擊并拖動(dòng):
    用戶可以通過(guò)點(diǎn)擊并拖動(dòng)移動(dòng)光標(biāo)來(lái)移動(dòng)元素。
  •  
    釋放完成移動(dòng):
    用戶釋放鼠標(biāo)按鈕后,元素將停留在新位置。
 
3.16 抓取指針
介紹:抓取指針是一種鼠標(biāo)指針樣式,通常表現(xiàn)為一個(gè)張開(kāi)的手或帶有抓取圖標(biāo)的指針,表示用戶可以通過(guò)拖動(dòng)來(lái)抓取和移動(dòng)元素。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    抓取元素:
    允許用戶通過(guò)拖動(dòng)操作來(lái)抓取界面上的元素。
  •  
    移動(dòng)元素:
    在抓取元素后,用戶可以將其移動(dòng)到新的位置。
交互行為
  •  
    點(diǎn)擊并拖動(dòng):
    用戶可以通過(guò)點(diǎn)擊并拖動(dòng)抓取指針來(lái)抓取元素。
  •  
    釋放完成移動(dòng):
    用戶釋放鼠標(biāo)按鈕后,元素將被放置在新位置。
 
3.17 載入光標(biāo)
介紹:等待光標(biāo)是一種特殊的光標(biāo)樣式,通常以一個(gè)旋轉(zhuǎn)的圖標(biāo)、沙漏或進(jìn)度條的形式出現(xiàn),用來(lái)指示應(yīng)用程序當(dāng)前正在忙碌,正在等待某個(gè)操作完成或數(shù)據(jù)加載。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    指示忙碌狀態(tài):
    向用戶明確表示應(yīng)用程序正在忙碌,正在處理數(shù)據(jù)或執(zhí)行任務(wù)。
  •  
    提供反饋:
    為用戶提供即時(shí)的視覺(jué)反饋,告知他們操作正在進(jìn)行中。
交互行為
  •  
    顯示載入光標(biāo):
    當(dāng)應(yīng)用程序開(kāi)始處理任務(wù)時(shí),指針變?yōu)檩d入光標(biāo)。
  •  
    隱藏載入光標(biāo):
    任務(wù)完成后,載入光標(biāo)消失,恢復(fù)為正常指針樣式。
 
3.18 滾動(dòng)光標(biāo)
介紹:滾動(dòng)光標(biāo)是一種用戶界面元素,用來(lái)指示用戶可以滾動(dòng)查看的內(nèi)容區(qū)域。它可以是滾動(dòng)條上的滑塊,也可以是鼠標(biāo)滾輪或觸控板的滾動(dòng)手勢(shì)。
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    內(nèi)容瀏覽:
    允許用戶瀏覽超出當(dāng)前視圖范圍的內(nèi)容。
  •  
    滾動(dòng)內(nèi)容:
    允許用戶滾動(dòng)查看內(nèi)容,如網(wǎng)頁(yè)、文檔或圖像。
交互行為
  •  
    拖動(dòng)滾動(dòng):
    用戶可以點(diǎn)擊并拖動(dòng)滾動(dòng)條上的滑塊來(lái)上下或左右滾動(dòng)內(nèi)容。
  •  
    滾輪滾動(dòng):
    使用鼠標(biāo)滾輪或觸控板的滾動(dòng)手勢(shì)可以快速滾動(dòng)頁(yè)面。
  •  
    自動(dòng)滾動(dòng):
    在某些應(yīng)用程序中,內(nèi)容可以自動(dòng)滾動(dòng),如在演示或某些游戲場(chǎng)景中。
 
四、鼠標(biāo)指針的交互設(shè)計(jì)原則
4.1 一致性(Consistency)
  •  
    定義:一致性原則要求在整個(gè)應(yīng)用程序或網(wǎng)站中,鼠標(biāo)指針的行為和樣式保持統(tǒng)一。這意味著相同的操作應(yīng)產(chǎn)生相同的視覺(jué)反饋,相同的指針樣式應(yīng)表示相同的功能。
  •  
    應(yīng)用:例如,如果標(biāo)準(zhǔn)箭頭指針用于所有選擇操作,那么用戶就會(huì)學(xué)會(huì)預(yù)期這種指針樣式,并知道何時(shí)可以進(jìn)行選擇。
 
4.2 反饋(Feedback)
  •  
    定義:反饋原則指的是系統(tǒng)應(yīng)提供即時(shí)的視覺(jué)或聽(tīng)覺(jué)信號(hào),以響應(yīng)用戶的操作。這有助于用戶理解他們的操作是否成功,以及系統(tǒng)的狀態(tài)。
  •  
    應(yīng)用:例如,當(dāng)用戶將鼠標(biāo)指針移動(dòng)到按鈕上時(shí),按鈕可能會(huì)改變顏色或顯示陰影,以表明它是可點(diǎn)擊的。
 
4.3 可見(jiàn)性(Visibility)
  •  
    定義:可見(jiàn)性原則確保鼠標(biāo)指針在所有情況下都是可見(jiàn)的,以便用戶始終知道他們當(dāng)前的位置和可以進(jìn)行的操作。
  •  
    應(yīng)用:例如,當(dāng)指針移動(dòng)到特定元素上時(shí),元素可能會(huì)高亮顯示,或者指針可能會(huì)改變形狀或大小,以提高其可見(jiàn)性。
 
4.4 適應(yīng)性(Adaptability)
  •  
    定義:適應(yīng)性原則指的是鼠標(biāo)指針應(yīng)能夠適應(yīng)不同的用戶需求和上下文環(huán)境。這包括對(duì)不同屏幕尺寸、分辨率和用戶偏好的適應(yīng)。
  •  
    應(yīng)用:例如,提供可調(diào)整的指針大小選項(xiàng),以便視力不佳的用戶可以更清楚地看到指針。或者在不同的操作系統(tǒng)或設(shè)備上使用適當(dāng)?shù)闹羔槝邮健?/div>
 
五、鼠標(biāo)指針對(duì)用戶體驗(yàn)影響
5.1 提升效率與準(zhǔn)確性
  •  
    鼠標(biāo)指針提供了一種直觀的方式來(lái)快速導(dǎo)航和選擇界面元素。通過(guò)精確的指向和點(diǎn)擊,用戶能夠高效地完成任務(wù),減少尋找和選擇目標(biāo)所需的時(shí)間。
  •  
    鼠標(biāo)指針的變化可以即時(shí)反映用戶的操作,如當(dāng)用戶將指針移動(dòng)到鏈接上時(shí),指針變成手形,這是一種即時(shí)的視覺(jué)反饋,告訴用戶這是一個(gè)可點(diǎn)擊的鏈接。
  •  
    清晰的指針狀態(tài)變化可以減少用戶在操作過(guò)程中的不確定性,幫助他們更好地理解界面的當(dāng)前狀態(tài)和預(yù)期行為,從而降低操作錯(cuò)誤。
 
5.2 增強(qiáng)可訪問(wèn)性
  •  
    鼠標(biāo)指針的設(shè)計(jì)考慮到了不同能力的用戶。例如,可調(diào)整的指針大小和顏色對(duì)比度可以幫助視力不佳的用戶更容易地看到和跟蹤光標(biāo)。
  •  
    輔助功能,如指針粘滯鍵或慢速指針移動(dòng),可以幫助運(yùn)動(dòng)障礙用戶更準(zhǔn)確地控制指針,確保所有用戶都能有效地與界面交互。
 
5.3 個(gè)性化與品牌識(shí)別
  •  
    通過(guò)自定義鼠標(biāo)指針的樣式和動(dòng)畫(huà),應(yīng)用程序和網(wǎng)站可以增強(qiáng)其品牌識(shí)別度。獨(dú)特的指針設(shè)計(jì)可以幫助用戶在視覺(jué)上與品牌建立聯(lián)系。
  •  
    個(gè)性化的指針樣式可以提供更豐富的用戶體驗(yàn),讓用戶感覺(jué)界面更加貼心和專屬。
 
六、技術(shù)實(shí)現(xiàn)與自定義
6.1 操作系統(tǒng)的鼠標(biāo)指針設(shè)置
以mac系統(tǒng)為例:系統(tǒng)偏好設(shè)置 -> 輔助功能 -> 指針控制
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
  •  
    操作系統(tǒng)通常提供了一套預(yù)定義的鼠標(biāo)指針?lè)桨福ú煌闹羔樞螤詈痛笮。赃m應(yīng)各種操作和視覺(jué)需求。
  •  
    用戶可以通過(guò)控制面板或系統(tǒng)設(shè)置訪問(wèn)鼠標(biāo)指針的配置選項(xiàng)。例如,在Windows中,用戶可以打開(kāi)“鼠標(biāo)屬性”對(duì)話框來(lái)更改指針?biāo)俣取⒄{(diào)整指針可見(jiàn)性(如指針大小和顏色),以及選擇不同的指針?lè)桨浮?/div>
  •  
    一些操作系統(tǒng)還提供了輔助功能,如指針的軌跡顯示,幫助用戶更清晰地追蹤鼠標(biāo)移動(dòng)。
 
6.2 自定義指針樣式與動(dòng)畫(huà)
  •  
    需要下載第三方應(yīng)用程序完成自定義,例如:Steer Mouse;xGestures;Smooth Scroll;Catch Mouse等
  •  
    用戶和設(shè)計(jì)師可以通過(guò)創(chuàng)建自定義指針樣式來(lái)個(gè)性化他們的計(jì)算機(jī)或應(yīng)用程序。這通常涉及選擇或設(shè)計(jì)新的指針圖像,并將其應(yīng)用為鼠標(biāo)指針。
  •  
    自定義指針樣式可以包括獨(dú)特的圖形設(shè)計(jì)、顏色和主題,以匹配應(yīng)用程序的品牌或用戶的個(gè)性。
  •  
    動(dòng)畫(huà)指針可以提供更豐富的視覺(jué)反饋,例如,一個(gè)等待動(dòng)畫(huà)可以顯示旋轉(zhuǎn)的圖標(biāo),以表明應(yīng)用程序正在處理用戶的操作。
 
6.3 編程控制指針行為
  •  
    開(kāi)發(fā)者可以通過(guò)編程方式控制鼠標(biāo)指針的行為,以增強(qiáng)應(yīng)用程序的交互性。這包括改變指針的形狀、位置、可見(jiàn)性,甚至創(chuàng)建自定義的指針效果。
  •  
    在Web開(kāi)發(fā)中,CSS和JavaScript可以用于更改指針樣式和行為。例如,cursor屬性可以改變HTML元素上的指針圖標(biāo),而JavaScript可以用于監(jiān)聽(tīng)鼠標(biāo)事件并動(dòng)態(tài)更改指針樣式。
  •  
    在桌面應(yīng)用程序開(kāi)發(fā)中,開(kāi)發(fā)者可以使用相應(yīng)的API來(lái)控制指針。例如,Windows API允許開(kāi)發(fā)者設(shè)置自定義光標(biāo),而macOS的AppKit框架提供了設(shè)置光標(biāo)的接口。
  •  
    編程還可以實(shí)現(xiàn)更高級(jí)的交互,如捕捉鼠標(biāo)位置、響應(yīng)鼠標(biāo)事件,以及在特定條件下更改指針行為。
 
七、案例研究
7.1 成功的鼠標(biāo)指針設(shè)計(jì)案例
 
Current Time 0:00
/
Duration Time 0:52
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
 
 
7.2 鼠標(biāo)指針設(shè)計(jì)中的常見(jiàn)問(wèn)題
  •  
    不一致的指針樣式:使用多種不同的指針樣式可能會(huì)導(dǎo)致用戶混淆,特別是如果指針變化與功能不匹配時(shí)。
  •  
    不明顯的可交互元素:當(dāng)指針移動(dòng)到可交互元素上時(shí),如果沒(méi)有清晰的視覺(jué)反饋,用戶可能不知道可以進(jìn)行操作。
  •  
    指針尺寸不適當(dāng):指針太小或太大都可能影響用戶體驗(yàn),特別是在不同分辨率的屏幕上。
  •  
    缺乏視覺(jué)反饋:鼠標(biāo)指針在懸停、點(diǎn)擊或拖動(dòng)時(shí),如果沒(méi)有適當(dāng)?shù)膭?dòng)畫(huà)或變化,可能會(huì)讓用戶感到困惑。
  •  
    指針與界面元素間距不當(dāng):當(dāng)用戶點(diǎn)擊按鈕或其他元素時(shí),如果指針位置與實(shí)際觸發(fā)區(qū)域不一致,可能會(huì)導(dǎo)致誤操作。
  •  
    指針樣式與品牌形象不符:如果自定義指針樣式與品牌的視覺(jué)形象不協(xié)調(diào),可能會(huì)削弱品牌識(shí)別度。
  •  
    在不同操作系統(tǒng)或設(shè)備上的兼容性問(wèn)題:設(shè)計(jì)的指針樣式需要在不同的操作系統(tǒng)和設(shè)備上進(jìn)行測(cè)試,以確保一致性和功能性。
  •  
    動(dòng)畫(huà)過(guò)度或不足:指針動(dòng)畫(huà)可能會(huì)吸引用戶的注意力,但過(guò)度的動(dòng)畫(huà)可能會(huì)分散用戶對(duì)主要內(nèi)容的關(guān)注;不足的動(dòng)畫(huà)則可能無(wú)法提供足夠的交互提示。
  •  
    指針行為與用戶期望不符:用戶對(duì)指針行為有一定的預(yù)期,如果指針的實(shí)際行為與這些預(yù)期不符,可能會(huì)導(dǎo)致用戶感到困惑。
 
結(jié)語(yǔ)
鼠標(biāo)指針的設(shè)計(jì)需要綜合考慮功能性、美觀性和用戶體驗(yàn)。一個(gè)設(shè)計(jì)良好的鼠標(biāo)指針不僅能夠提升用戶界面的整體質(zhì)量和效率,還能夠增強(qiáng)用戶對(duì)產(chǎn)品或服務(wù)的滿意度和忠誠(chéng)度。希望通過(guò)本篇文章大家可以合理的利用各種鼠標(biāo)指針類型。
 
附件文件如下:可根據(jù)需要自行下載。(用于在設(shè)計(jì)稿上標(biāo)注,或與開(kāi)發(fā)溝通)
鼠標(biāo)指針的秘密:提升PC端交互的小技巧
 
 
 

作者:姚_Yale
鏈接:https://www.zcool.com.cn/article/ZMTYyNjY1Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

以用戶為中心的交互設(shè)計(jì)思維

ui設(shè)計(jì)分享達(dá)人 用戶研究

聊聊關(guān)于設(shè)計(jì)思維的內(nèi)容,會(huì)從產(chǎn)品設(shè)計(jì)、體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)三個(gè)方面入手。
目前是第三篇,關(guān)于交互設(shè)計(jì)思維的內(nèi)容。到這里設(shè)計(jì)思維的內(nèi)容全部結(jié)束了。
感謝
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
 


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈

ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)管理與成長(zhǎng)

這兩年生成式ai爆發(fā)性增長(zhǎng)并且重塑數(shù)字創(chuàng)作的工具生態(tài)。從文本生成、圖像視頻生成以及模型訓(xùn)練,可以說(shuō)無(wú)法離開(kāi)ai,ai的介入讓創(chuàng)意生產(chǎn)變得前所未有的高效簡(jiǎn)單,但同時(shí)也帶來(lái)了體驗(yàn)上的困境,例如我們?cè)谑褂米詣?dòng)化生成便利的同時(shí),還能保持對(duì)創(chuàng)作過(guò)程的深層控制?比如在進(jìn)行文生圖或者線稿轉(zhuǎn)3D的流程中,我們?nèi)绻刂颇硞€(gè)部分的設(shè)計(jì)表現(xiàn),需要利用多個(gè)方法才能完成,僅僅通過(guò)提示詞的修改并無(wú)法完成,這個(gè)矛盾在之前的SD等開(kāi)源模型中非常明顯;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
 
算法模型的開(kāi)放讓設(shè)計(jì)達(dá)到了無(wú)限的可能,但更多設(shè)計(jì)師卻被迫在控制權(quán)和易用性之間做出了妥協(xié),當(dāng)重復(fù)一個(gè)流程無(wú)法生成滿意的圖象時(shí),大多情況都是基于一個(gè)“不滿意”的圖像進(jìn)行優(yōu)化,我把這個(gè)理解為用戶心理上的妥協(xié);
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
以節(jié)點(diǎn)式工作流工具ComfyUI為例,其通過(guò)可視化編程賦予用戶對(duì)Stable Diffusion生成流程的精細(xì)控制權(quán),允許自由組合模型、調(diào)節(jié)參數(shù)、插入預(yù)處理模塊,成為專業(yè)創(chuàng)作者的首選工具。然而,這種高度自由的設(shè)計(jì)也帶來(lái)了顯著的認(rèn)知負(fù)擔(dān):錯(cuò)綜復(fù)雜的節(jié)點(diǎn)連線、晦澀的參數(shù)術(shù)語(yǔ)、缺乏引導(dǎo)的開(kāi)放式畫(huà)布,讓0基礎(chǔ)設(shè)計(jì)望而止步;數(shù)據(jù)顯示,超過(guò)67%的新用戶在首次使用ComfyUI時(shí)因“界面混亂”而放棄進(jìn)一步探索(來(lái)源:ComfyUI社區(qū)調(diào)研)。這一現(xiàn)象揭示了生成式AI工具設(shè)計(jì)的核心矛盾——系統(tǒng)的靈活性與用戶的心智模型之間如何實(shí)現(xiàn)平衡?
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
一、核心問(wèn)題與矛盾
1、設(shè)計(jì)師對(duì)“控制權(quán)”的需求本質(zhì)
安全感需求:
用戶希望理解生成過(guò)程(分布控制、seed數(shù)值、CFG),避免黑箱帶來(lái)的不可預(yù)測(cè)性;
注:大多數(shù)AI工具(如Midjourney)像一臺(tái)自動(dòng)售貨機(jī)——輸入提示詞,隨機(jī)吐出一張圖片。用戶無(wú)法知曉AI為何生成一只三頭六臂的貓,只能反復(fù)“抽卡”直到滿意。
 
創(chuàng)造性需求:
通過(guò)精細(xì)化的控制實(shí)現(xiàn)獨(dú)特的風(fēng)格,例如分布提示,基于大模型訓(xùn)練出來(lái)的lora,不同lora模型融合后的混合模型,這些需要付出很大的學(xué)習(xí)成本和時(shí)間才能滿足,我個(gè)人理解ai給設(shè)計(jì)師通往目標(biāo)的過(guò)程中搭建了不同的道路,但設(shè)計(jì)師如果在沒(méi)有導(dǎo)航的情況下要達(dá)到這個(gè)目標(biāo),中間可能會(huì)輾轉(zhuǎn)反側(cè),也可能一條道路就能到達(dá)目的地;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
效率需求:
自動(dòng)化設(shè)計(jì)(如MJ和國(guó)內(nèi)其他一鍵生圖的ai產(chǎn)品)可以降低設(shè)計(jì)的操作成本,但同時(shí)犧牲了可控性;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
2、comfyUI的設(shè)計(jì)矛盾
過(guò)度控制悖論:
ComfyUI試圖打破黑箱,將AI拆解成可調(diào)節(jié)的“齒輪組”(如調(diào)節(jié)“采樣器”改變畫(huà)質(zhì)、用“ControlNet”控制構(gòu)圖)。但當(dāng)用戶面對(duì)50多個(gè)參數(shù)和上百種節(jié)點(diǎn)時(shí),反而因信息過(guò)載陷入“該調(diào)哪個(gè)參數(shù)?連錯(cuò)節(jié)點(diǎn)會(huì)爆炸嗎?”的決策癱瘓。
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
過(guò)高的配置要求:
comfyUI解決了MJ帶來(lái)的黑箱效應(yīng),但同時(shí)也帶來(lái)了物質(zhì)上的門(mén)檻,設(shè)計(jì)師需要配備更高的配置或者使用第三方租用云電腦等才能運(yùn)行,否則前者就會(huì)造成漫長(zhǎng)的等待,后者則需要花費(fèi)大量的財(cái)力,對(duì)于設(shè)計(jì)師而言反而是造成了時(shí)間上的負(fù)荷;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
功能維度:
節(jié)點(diǎn)系統(tǒng)支持無(wú)限組合,但缺乏對(duì)用戶意圖的主動(dòng)理解,如自動(dòng)推薦節(jié)點(diǎn);
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
認(rèn)知維度:
參數(shù)暴露(如CFG Scale、Sampler)提供控制感,但引發(fā)“選擇過(guò)載”實(shí)際使用過(guò)程中,如果是普通玩家,無(wú)法短時(shí)間內(nèi)通過(guò)這些參數(shù)來(lái)控制結(jié)果,核心還是在于認(rèn)知門(mén)檻過(guò)高;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
交互維度:
自由連接節(jié)點(diǎn)導(dǎo)致邏輯混亂(如錯(cuò)誤連線無(wú)及時(shí)提示),增加調(diào)試成本。
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
我把ControlNet的“負(fù)面條件”打亂連接到“正面clip文本框”上,而采樣器的“負(fù)面條件”直接連接到“負(fù)面clip文本框”內(nèi),整個(gè)過(guò)程是不會(huì)出現(xiàn)任何報(bào)錯(cuò)提示,但是當(dāng)運(yùn)行調(diào)試的時(shí)候就會(huì)運(yùn)行失敗,提示ControlNet缺少負(fù)面條件,ControlNet(應(yīng)用)缺少負(fù)面條件輸出等問(wèn)題,眾所周知對(duì)于一些低配玩家,運(yùn)行一次需要等很久,等到最后發(fā)現(xiàn)生產(chǎn)出來(lái)一個(gè)“報(bào)錯(cuò)”!!!
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
二、對(duì)比分析:comfyUI和midjourney
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
當(dāng)設(shè)計(jì)師想生成“一只穿宇航服的柴犬”,Midjourney可能輸出卡通風(fēng)格或超現(xiàn)實(shí)照片,設(shè)計(jì)師只能通過(guò)追加提示詞(如“3D、黏土”)逼近目標(biāo),不停的抽卡;
(實(shí)在不想用mj了,下面的圖本地跑的,大概的意思一樣就是不停的抽卡抽卡)
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
在ComfyUI中,設(shè)計(jì)師可以強(qiáng)制指定:用FLUX模型生成基礎(chǔ)圖像,然后加載相關(guān)LoRA模型,在添加個(gè)視覺(jué)風(fēng)格遷移的模型,添加宇航服,在添加個(gè)視覺(jué)風(fēng)格模型,連接OpenPose節(jié)點(diǎn)調(diào)整柴犬姿勢(shì),最后用放大模型,放大畫(huà)質(zhì);但我就想說(shuō):我只是想畫(huà)只貓,為什么要弄這么復(fù)雜。。。
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
關(guān)鍵結(jié)論:
ComfyUI的“高可控性”吸引專家設(shè)計(jì)師,但普通設(shè)計(jì)師或者0基礎(chǔ)設(shè)計(jì)師因認(rèn)知負(fù)荷大多放棄使用。Midjourney通過(guò)“限制控制權(quán)”降低門(mén)檻,但設(shè)計(jì)師可能因無(wú)法干預(yù)細(xì)節(jié)感到焦慮。
三、comfyui沖突點(diǎn)和機(jī)會(huì)點(diǎn)
為什么說(shuō)這個(gè)呢,因?yàn)閏omfyui目前是趨勢(shì)ai,核心的生成邏輯包括實(shí)際應(yīng)用都已經(jīng)大于mj了,所以接下來(lái)的內(nèi)容也是圍繞comfyui拆解的;
1、參數(shù)暴露vs認(rèn)知負(fù)荷
問(wèn)題:
ComfyUI將所有參數(shù)(如LoRA權(quán)重、VAE選擇、采樣器、各種模型加載器)暴露給用戶,導(dǎo)致界面信息過(guò)載。
例如:
設(shè)計(jì)師需要同時(shí)調(diào)整“提示詞權(quán)重”“采樣器類型”“ControlNet強(qiáng)度”時(shí),易混淆參數(shù)優(yōu)先級(jí),對(duì)于這個(gè)結(jié)果的影響,是采樣器類型問(wèn)題呢還是ControlNet的數(shù)值不對(duì)呢,最后我猜大多人過(guò)程都是一個(gè)個(gè)試一遍,最后哪個(gè)效果好用哪個(gè);
思考點(diǎn):
動(dòng)態(tài)參數(shù)分組,根據(jù)生成的目標(biāo)隱藏?zé)o關(guān)的參數(shù),比如當(dāng)輸入完成“提示詞”后,可以識(shí)別出輸入的提示詞類型,生成一個(gè)3d風(fēng)格海報(bào),那么基于這個(gè)提示詞,就可以提前預(yù)判出跟3d風(fēng)格海報(bào)相關(guān)的參數(shù)都可以隱藏;參數(shù)依賴的可視化,通過(guò)邏輯線的方式標(biāo)記他們之間的關(guān)系,例如CFG與采樣步數(shù),通常來(lái)講CFG數(shù)值越高生成的圖越接近提示詞,但是圖像質(zhì)量會(huì)下降,采樣步數(shù)越高生成的圖質(zhì)量就越高,那么問(wèn)題來(lái)了,當(dāng)設(shè)計(jì)師調(diào)整CFG數(shù)值時(shí),是不是可以標(biāo)記或者提示設(shè)計(jì)師采樣步數(shù)的變化,以此來(lái)達(dá)到最優(yōu)解;
下方示例
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
2、自由連接vs邏輯錯(cuò)誤
問(wèn)題:
節(jié)點(diǎn)可任意連接,但缺乏邏輯校驗(yàn)?zāi)壳癱omfyUI中只是告訴設(shè)計(jì)師如果兩個(gè)節(jié)點(diǎn)本身沒(méi)有前后關(guān)系的情況下不可以連接(沒(méi)有節(jié)點(diǎn)對(duì)應(yīng)的收入口)另一種情況是兩個(gè)節(jié)點(diǎn)在一個(gè)工作流中都能起到作用,但是節(jié)點(diǎn)是多功能化的,連線的時(shí)候可以正常連接,最后運(yùn)行的時(shí)候就會(huì)出現(xiàn)某某節(jié)點(diǎn)不匹配。
例如:
設(shè)計(jì)師錯(cuò)誤連接ControlNet預(yù)處理器與VAE節(jié)點(diǎn),導(dǎo)致生成失敗且無(wú)報(bào)錯(cuò)提示。
思考點(diǎn):
實(shí)時(shí)邏輯校驗(yàn),在設(shè)計(jì)師連線時(shí)提示沖突(如“該節(jié)點(diǎn)僅接受潛空間輸入”)。
工作流自檢模式,一鍵檢測(cè)缺失節(jié)點(diǎn)(如缺少“提示詞編碼器”時(shí)提醒用戶)。
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
四、設(shè)計(jì)師心理與工具的“錯(cuò)位戰(zhàn)爭(zhēng)”
生成式AI工具的設(shè)計(jì)矛盾,本質(zhì)上是人類認(rèn)知模式與技術(shù)邏輯的沖突。以ComfyUI為例,其設(shè)計(jì)暴露了以下深層問(wèn)題:
1、“技術(shù)透明化”的認(rèn)知陷阱
ComfyUI將AI生成過(guò)程拆解為節(jié)點(diǎn),試圖通過(guò)“透明化”提升用戶信任,但普通人并不需要(也無(wú)法理解)技術(shù)細(xì)節(jié);不知道你們有沒(méi)有,當(dāng)我第一次看到“VAE解碼器”“潛在空間降噪”等節(jié)點(diǎn)時(shí),大腦會(huì)觸發(fā)“意義建構(gòu)焦慮”——“這些詞和我想要的圖片有什么關(guān)系?”
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
2、控制權(quán)的“虛假承諾”
ComfyUI看似賦予用戶完全控制權(quán),但多數(shù)參數(shù)的實(shí)際影響難以預(yù)測(cè)(如CFG值從7到8可能導(dǎo)致畫(huà)風(fēng)突變)這類似于讓設(shè)計(jì)師駕駛一輛方向盤(pán)與輪胎無(wú)機(jī)械連接的汽車,轉(zhuǎn)動(dòng)方向盤(pán)時(shí),輪胎可能隨機(jī)偏轉(zhuǎn)。設(shè)計(jì)師誤以為“控制節(jié)點(diǎn)=控制結(jié)果”,實(shí)則是“在黑暗中調(diào)整未知旋鈕”;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
3. 技術(shù)極客與大眾的“認(rèn)知斷層”
開(kāi)源社區(qū)的理想:“人人可 Hack”的民主化工具;現(xiàn)實(shí)問(wèn)題是開(kāi)發(fā)者設(shè)計(jì)節(jié)點(diǎn)時(shí)默認(rèn)用戶理解SD原理(如Latent Space、擴(kuò)散模型、euler_ancestralcai、dpmpp_2m),但普通用戶只關(guān)心“如何讓圖片更逼真”;這種斷層導(dǎo)致ComfyUI的文檔充滿技術(shù)術(shù)語(yǔ),而非用戶目標(biāo)導(dǎo)向的指南(如“修復(fù)模糊人臉”對(duì)應(yīng)哪些節(jié)點(diǎn)組合),這也是技術(shù)工具與用戶體驗(yàn)的博弈;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
五、對(duì)于comfyUI的暢想
1、適配不同能力的設(shè)計(jì)師
專家模式:保留完整的節(jié)點(diǎn)和參數(shù),讓這類設(shè)計(jì)師自由編輯;
精簡(jiǎn)模式:隱藏底層參數(shù),僅僅提供目標(biāo)導(dǎo)向的選項(xiàng);
自動(dòng)化操作:根據(jù)提示詞推薦采樣器、cfg數(shù)值等組合,例如提示詞是自然語(yǔ)言,那就匹配關(guān)于flux模型的專屬采樣器;
AI創(chuàng)作工具的「可控性」與「用戶體驗(yàn)」博弈
 
 
2、智能節(jié)點(diǎn)推薦引擎
目標(biāo)推薦:輸入“生成賽博朋克城市”后,自動(dòng)推薦“SDXL模型+ControlNet邊緣檢測(cè)+色調(diào)調(diào)整節(jié)點(diǎn)”;行為預(yù)測(cè):分析歷史工作流,推薦高頻使用的節(jié)點(diǎn)組合(如“LoRA模型+分層提示詞”);
3、可解釋性反饋面板
參數(shù)與結(jié)果的實(shí)時(shí)性:實(shí)時(shí)顯示調(diào)整CFG值對(duì)圖像細(xì)節(jié)、對(duì)比度的量化影響。節(jié)點(diǎn)的貢獻(xiàn)度分析:生成后標(biāo)記關(guān)鍵節(jié)點(diǎn)(如“ControlNet貢獻(xiàn)度72%”),幫助用戶理解流程。
六、總結(jié):控制的幻覺(jué)與設(shè)計(jì)的謙卑
ComfyUI揭示了生成式AI時(shí)代的核心矛盾——技術(shù)的能力越強(qiáng)大,人類越需要承認(rèn)自身認(rèn)知的局限性。工具設(shè)計(jì)不應(yīng)追求“上帝模式”,而需尋找“剛剛好的控制權(quán)”給用戶“扳手”而非“零件庫(kù)”:提供高層級(jí)調(diào)節(jié)維度(如“畫(huà)面精細(xì)度”“風(fēng)格偏離度”),隱藏底層技術(shù)參數(shù),并不是每個(gè)設(shè)計(jì)師都是工程師的角色;大多設(shè)計(jì)師的角色只是維修工;擁抱“不完美的人性”:允許用戶保留“我不知道為什么要調(diào)這個(gè),但調(diào)了就有用”的玄學(xué)操作,而非強(qiáng)迫所有人成為AI工程師。重新定義“控制”:從“絕對(duì)掌控流程”轉(zhuǎn)向“有效影響結(jié)果”,讓AI的不可預(yù)測(cè)性成為創(chuàng)意催化劑而非焦慮來(lái)源。


作者:愛(ài)吃貓的魚(yú)___
鏈接:https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

產(chǎn)品設(shè)計(jì)如何利用心理學(xué)

ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)思維

產(chǎn)品設(shè)計(jì)的成功除了依賴設(shè)計(jì)方案和技術(shù)實(shí)現(xiàn),還與用戶的心理密切相關(guān)。用戶心里決定了我們用怎樣的設(shè)計(jì)策略解決問(wèn)題。我們常認(rèn)為人們做決策時(shí)是理性的,但其實(shí)用戶行為經(jīng)常是非理性,會(huì)受到情緒、習(xí)慣和社交環(huán)境的影響。了解這些心理學(xué)規(guī)律能幫助我們更好地的預(yù)測(cè)和引導(dǎo)用戶行為,優(yōu)化產(chǎn)品體驗(yàn),提高用戶的粘性、留存率和轉(zhuǎn)化率,從而產(chǎn)品商業(yè)價(jià)值最大化。
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

關(guān)于設(shè)計(jì)組件庫(kù),一些新思考

ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)管理與成長(zhǎng)

關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
從網(wǎng)上搜索設(shè)計(jì)組件,我們能找到各種對(duì)外公開(kāi)的設(shè)計(jì)組件庫(kù),同樣還有不少或概括或詳細(xì)的文章,手把手教你“如何搭建一個(gè)好的設(shè)計(jì)組件庫(kù)”,但這些方法論很少探討面對(duì)C端組件頻繁增改、設(shè)計(jì)規(guī)范動(dòng)態(tài)調(diào)整,如何高效賦能業(yè)務(wù)設(shè)計(jì)交付的相關(guān)內(nèi)容,但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問(wèn)題。
 
搜索是一個(gè)“牽一發(fā)而動(dòng)全身”的業(yè)務(wù),每一個(gè)微小的設(shè)計(jì)細(xì)節(jié)都有可能影響各個(gè)業(yè)務(wù)的數(shù)據(jù)指標(biāo),一個(gè)“好的設(shè)計(jì)組件庫(kù)”需要以一種潛移默化的方式讓設(shè)計(jì)師掌握設(shè)計(jì)規(guī)范,完成合規(guī)的設(shè)計(jì),從這個(gè)角度而言它應(yīng)該比較
「好懂」
 
而作為服務(wù)于整個(gè)設(shè)計(jì)團(tuán)隊(duì)的公用設(shè)計(jì)組件庫(kù),面對(duì)每月數(shù)以萬(wàn)計(jì)的調(diào)用次數(shù),它必須保障最基本的易用性,應(yīng)該非常
「好用」
 
同時(shí),面對(duì)頻繁迭代,“好的設(shè)計(jì)組件”還需要保持最快的更新速度,為各個(gè)橫向團(tuán)隊(duì)提供正確的樣式,從這個(gè)角度來(lái)說(shuō)它還要
「好維護(hù)」
 
因此,
「好懂、好用、好維護(hù)」
是搜索設(shè)計(jì)語(yǔ)境下,對(duì)一個(gè)“好的設(shè)計(jì)組件”的定義。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
接下來(lái),我們將從這三個(gè)「好」入手,分享搜索設(shè)計(jì)組件庫(kù)在升級(jí)過(guò)程中的一些思考,希望能和大家共同探討。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
“萬(wàn)丈高樓平地起”,我們先來(lái)說(shuō)說(shuō)如何從零開(kāi)始構(gòu)建一個(gè)既符合設(shè)計(jì)規(guī)范又易于理解的設(shè)計(jì)組件。
 
首先,在搭建組件時(shí),我們可以考慮采用
多層嵌套
的方式,即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過(guò)程中的重復(fù)操作,甚至還能在解綁組件時(shí),通過(guò)選中內(nèi)部的子組件圖層進(jìn)行解綁,大大簡(jiǎn)化了搭建和使用雙方的操作流程。
 
在多層嵌套的思路下,我們可以進(jìn)一步用
“底層靈活、上層收斂”
來(lái)指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣,能夠支持大部分的狀態(tài)切換,而在上層組件搭建的過(guò)程中顯性地加強(qiáng)規(guī)范的指引(如規(guī)范中不允許使用的樣式不對(duì)外展示),以降低超出規(guī)范設(shè)計(jì)的可能。
 
具體的搭建流程可以大致分為三步:
場(chǎng)景收集和分析、搭建基本變體組、拓展高階變體組
 
我們將通過(guò)視頻組件搭建的生動(dòng)案例,具體介紹如何依據(jù)“底層靈活、上層收斂”原則來(lái)搭建組件庫(kù),使得組件本身既足夠靈活,又能起到足夠的約束作用。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
在著手搭建某類組件時(shí),我們首先通過(guò)規(guī)范確認(rèn)和場(chǎng)景遍歷,廣泛收集各類變體。隨后,從我們能想到的所有維度出發(fā),對(duì)這些變體進(jìn)行細(xì)致定義。這樣,我們就能得到一張?jiān)敱M描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等,而第一行則羅列出各種維度,如寬度、比例等。通過(guò)這種方法,我們可以將原本零散、雜亂的組件變體描述,系統(tǒng)地歸納整理成一張清晰明了的表格。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
表格通過(guò)不同維度來(lái)唯一確定一個(gè)變體,這些維度可大致分為兩個(gè)特性和一個(gè)共性。共性指的是所有變體在這一維度上均保持一致,常見(jiàn)特性則涵蓋了最常見(jiàn)的分類性質(zhì),如寬度、高度、數(shù)量和優(yōu)先級(jí)等,而業(yè)務(wù)特性則與具體業(yè)務(wù)緊密相關(guān)。
 
在搭建組件時(shí),我們可以遵循
「共性-常見(jiàn)特性-業(yè)務(wù)特性」
順序,這樣的順序有助于降低理解成本,因?yàn)樽罘闲闹堑姆诸惐恢糜谕鈱樱瑫r(shí)底層的組件又保持了足夠的靈活性,便于切換各種變量。對(duì)于業(yè)務(wù)特性,我們可以根據(jù)實(shí)際情況靈活處理,既可以將其作為基本組件的延展,也可以不將其納入組件范疇。
 
以視頻組件為例,我們從表格中獲取的信息如下:
 
  •  
    視頻尺寸及其組合是最符合用戶心智的變體選擇;
  •  
    播放狀態(tài)是所有變體的共有性質(zhì);
  •  
    自動(dòng)播放情況與業(yè)務(wù)相關(guān),但不一定需要在組件庫(kù)中呈現(xiàn);
  •  
    高階組件僅涉及少部分尺寸的組件,應(yīng)在完成基本組件搭建后再進(jìn)行。
 
據(jù)此,我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級(jí):
 
  1.  
    播放狀態(tài)作為共性,應(yīng)首先搭建;
  2.  
    基本組件尺寸和組合是最符合用戶心智的變體選擇,應(yīng)緊隨其后;
  3.  
    高階組件在完成基本組件搭建后再進(jìn)行。
 
值得注意的是,“封面槽位”是“播放狀態(tài)”中的一個(gè)圖層。根據(jù)“底層靈活、上層收斂”的原則,我們將其插入到搭建播放狀態(tài)之前。因此,視頻組件的最終搭建流程為:
 
  1.  
    封面槽位;
  2.  
    播放狀態(tài);
  3.  
    基本組件尺寸和組合;
  4.  
    高階組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
完成對(duì)視頻組件搭建的分析,我們就可以有條不紊地開(kāi)始搭建組件了。先搭建基本組件視頻組件,再用基本組件搭建高階組件。這一步驟雖然為大家所熟知,但仍需格外注意,如配置項(xiàng)的設(shè)置要力求合理,也可以融入設(shè)計(jì)規(guī)范和使用規(guī)范,同時(shí)還應(yīng)將一些搭建過(guò)程中的零散組件集中收納避免被調(diào)用。關(guān)于這些具體的注意事項(xiàng),我們將在后續(xù)部分進(jìn)行詳細(xì)闡述。
 
至此我們完成了組件搭建的基本流程,一個(gè)達(dá)到及格線的視頻組件就誕生了。據(jù)統(tǒng)計(jì),優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點(diǎn)擊操作!
 
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
完成了一個(gè)基本組件的搭建后,我們可以轉(zhuǎn)換視角,從使用的角度來(lái)審視并檢查這個(gè)組件。
 
我們期望,從插入組件變體、切換組件配置,再到最后的解綁組件,整個(gè)流程都能縱享絲滑且穩(wěn)定可靠,確保業(yè)務(wù)設(shè)計(jì)師在使用過(guò)程中獲得最佳體驗(yàn)。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
我們可以一步步來(lái)審視組件的使用過(guò)程。首先是插入組件,據(jù)觀察,通常有三種方式,①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對(duì)應(yīng)組件并插入;②通過(guò)查閱設(shè)計(jì)規(guī)范,鎖定所需的變體后復(fù)制粘貼;③選中一個(gè)不需要的組件,通過(guò)右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。很明顯,在這個(gè)過(guò)程中依賴的是組件的精準(zhǔn)搜索和快速定位。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
為了提升搜索精度,我們可以從組件命名入手,采用中、英、數(shù)字結(jié)合的方式,實(shí)現(xiàn)模糊匹配;也可以在發(fā)布時(shí)隱藏不希望被調(diào)用的組件,以減少無(wú)用的搜索結(jié)果。如果組件是采用前文提到的“多層嵌套”方式搭建的,我們可以添加“Preferred”子組件,這樣在切換時(shí)會(huì)優(yōu)先展示這些子組件,這個(gè)功能在切換圖標(biāo)時(shí)尤為實(shí)用。
 
對(duì)于習(xí)慣邊查閱設(shè)計(jì)規(guī)范邊使用組件的設(shè)計(jì)師,我們?cè)黾恿烁鄬?shí)際使用的正誤案例,這些案例直觀展示了組件變體的正確選擇和使用方式,進(jìn)一步降低了規(guī)范的理解成本,有效輔助設(shè)計(jì)決策。同時(shí),我們專門(mén)維護(hù)了一個(gè)固定區(qū)域,用于平鋪展示所有組件變體。為了確保能夠輕松點(diǎn)選,我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計(jì)師一目了然地看到所有變體,從而快速選擇所需的組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
在組件配置階段,有三項(xiàng)注意點(diǎn)能讓組件更加易用,即“重視組件的可視化效果、設(shè)置高效易用的配置項(xiàng)、貼心地保存修改”。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
考慮到C端組件的多樣性和用戶的使用習(xí)慣,我們應(yīng)避免使用過(guò)于復(fù)雜的分組方式。相反,應(yīng)更注重組件的樣式展示,并盡量簡(jiǎn)化組件的層級(jí)結(jié)構(gòu)。這樣,設(shè)計(jì)師在使用時(shí)能夠更直觀地看到組件的外觀,而無(wú)需深入復(fù)雜的層級(jí)去查找。
 
另外值得注意的是,F(xiàn)igma會(huì)默認(rèn)用組件集合中最左上角的組件生成預(yù)覽樣式,因此應(yīng)當(dāng)把視覺(jué)上最有代表性的變體放在左上角,這個(gè)效果在切換變體(Swap instance)時(shí)很重要,因?yàn)槟壳霸谠撁姘逯袥](méi)法查看組件細(xì)節(jié),只能靠縮略圖和名稱來(lái)推測(cè)是哪個(gè)組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
其次對(duì)于配置項(xiàng)的設(shè)置也大有講究,業(yè)界有組件庫(kù)為了實(shí)現(xiàn)C2D2C,從源頭上將設(shè)計(jì)組件和前端組件的配置項(xiàng)打平,這是不錯(cuò)的思路,但有可能會(huì)提升設(shè)計(jì)側(cè)的理解成本。針對(duì)搜索業(yè)務(wù)的特殊語(yǔ)境,我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項(xiàng),將所有允許自定義的配置盡可能外露,并清晰地說(shuō)明修改限制,如字?jǐn)?shù)限定、選項(xiàng)個(gè)數(shù)等,這樣能夠在使用的過(guò)程中強(qiáng)化業(yè)務(wù)設(shè)計(jì)師對(duì)規(guī)范的掌握。
 
另一個(gè)常常被忽視的關(guān)鍵點(diǎn)是選項(xiàng)和配置的排序問(wèn)題。為了提高瀏覽和選擇的效率,建議對(duì)選項(xiàng)和選項(xiàng)之間,以及外層的不同配置項(xiàng),都按照一定的邏輯順序進(jìn)行排序。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
最后一點(diǎn),我們稱之為
“貼心地保存修改”
機(jī)制,這個(gè)針對(duì)的是文字修改的場(chǎng)景。
 
在實(shí)際操作中,使用一個(gè)組件可能需要對(duì)多個(gè)配置項(xiàng)進(jìn)行修改。有時(shí)在修改完文字內(nèi)容后再去調(diào)整其他配置時(shí),已修改的文字會(huì)被重置。這時(shí)文本屬性(text property)的設(shè)置就顯得尤為重要,它能夠記憶并保存修改過(guò)的文字內(nèi)容,從而免于重復(fù)輸入。
 
還有一些情況是,某個(gè)組件變體實(shí)際上并沒(méi)有與某個(gè)值相對(duì)應(yīng)的組件(盡管Figma機(jī)制允許選擇該值),用戶切換后就會(huì)發(fā)現(xiàn)組件完全變了,只能撤回。為了避免這類情況,建議使用另外的標(biāo)記來(lái)表明組件某個(gè)設(shè)置項(xiàng)是不可切換的。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
完成了組件的搭建和檢查,接下來(lái)讓我們聚焦于組件的日常維護(hù)。
 
這一環(huán)節(jié)可以從兩個(gè)維度展開(kāi),一是依托中臺(tái)的日常數(shù)據(jù)監(jiān)控進(jìn)行維護(hù),二是通過(guò)團(tuán)隊(duì)內(nèi)部的緊密協(xié)同機(jī)制來(lái)保障。后者更多側(cè)重協(xié)作流程和機(jī)制上的建設(shè),在本文中我們不做更多展開(kāi),重點(diǎn)討論前者。
 
數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑:View libraries-Analytics),看板中展示了各個(gè)組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù),這些數(shù)據(jù)不直接反映組件的優(yōu)劣,但如果我們觀測(cè)到某個(gè)組件解綁率偏高,我們會(huì)考慮直接把它
作為模板
而不是創(chuàng)建成組件。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 
總結(jié)
 
以上是百度搜索設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)組件庫(kù)升級(jí)過(guò)程中的心得分享,包括搜索業(yè)務(wù)對(duì)于“好的設(shè)計(jì)組件”的訴求,以及一些搭建和優(yōu)化組件的實(shí)用思路,核心是探討如何從組件庫(kù)建設(shè)的角度入手,成功助力團(tuán)隊(duì)提升設(shè)計(jì)資產(chǎn)消費(fèi)效率。
 
關(guān)于設(shè)計(jì)組件庫(kù),我們有一些新思考
 
 
 
 


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

Banner布局在用戶界面中的設(shè)計(jì)樣式研究

ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)思維

前言
    Banner,這一設(shè)計(jì)元素對(duì)于我們?cè)O(shè)計(jì)師而言早已經(jīng)是司空見(jiàn)慣,其核心往往聚焦于視覺(jué)表現(xiàn)的層面,也是成為UI設(shè)計(jì)師重要能力play中的一環(huán)。今天要寫(xiě)的,并非Banner在視覺(jué)藝術(shù)上的探索,而是其在UI場(chǎng)景中布局樣式的深度剖析。
    Banner圖作為產(chǎn)品中的一項(xiàng)基礎(chǔ)功能,其存在已是常態(tài)。在視覺(jué)創(chuàng)意的追求之外,UI層面的樣式布局也在不斷尋求突破與創(chuàng)新。
 
目錄
一、Banner 視覺(jué)層表現(xiàn)
二、Banner 布局樣式
三、總結(jié)
 
一、Banner視覺(jué)層表現(xiàn)
    作為界面視覺(jué)焦點(diǎn),Banner通常以可交互的輪播組件形式呈現(xiàn),這種動(dòng)態(tài)展示方式已成為現(xiàn)在產(chǎn)品的重要導(dǎo)航模式之一。它不僅是信息傳遞的載體,也是平臺(tái)與用戶對(duì)話的窗口,承載著活動(dòng)推廣、品牌宣發(fā)等核心內(nèi)容的展示使命。 在提升用戶注意力的設(shè)計(jì)探索中,Banner的視覺(jué)表現(xiàn)手法持續(xù)演進(jìn)。從設(shè)計(jì)維度來(lái)看,我們不僅要在創(chuàng)意構(gòu)思、版式布局、色彩搭配等基礎(chǔ)層面下功夫,更需在表現(xiàn)形式上尋求突破。
    基于動(dòng)態(tài)復(fù)雜度,我將Banner的表現(xiàn)形式歸納為四個(gè)層級(jí):從基礎(chǔ)的靜態(tài)圖像,到輕量級(jí)的GIF動(dòng)畫(huà),再到沉浸式的視頻背景,直至最具空間感的分層效果,每種形式都對(duì)應(yīng)著不同的設(shè)計(jì)目標(biāo)和用戶體驗(yàn)。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.1靜態(tài)
    在眾多Banner表現(xiàn)形式中,靜態(tài)輪播圖因其高效的設(shè)計(jì)實(shí)現(xiàn)和便捷的技術(shù)支持而成為多數(shù)產(chǎn)品最普遍的選擇。
    這類Banner采用靜態(tài)圖片作為視覺(jué)載體,根據(jù)產(chǎn)品需求可分為兩種基礎(chǔ)模式:?jiǎn)我划?huà)面呈現(xiàn)的簡(jiǎn)約風(fēng)格,以及多畫(huà)面輪播的交互形式。其中,多圖輪播既支持自動(dòng)播放的時(shí)間軸切換,也允許用戶通過(guò)手勢(shì)滑動(dòng)進(jìn)行自主瀏覽,在保持視覺(jué)簡(jiǎn)潔性的同時(shí)增加了交互維度。這種設(shè)計(jì)平衡了視覺(jué)效果與功能實(shí)用性,所以會(huì)成為多數(shù)產(chǎn)品的首選方案。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.2動(dòng)態(tài)
    動(dòng)態(tài)Banner以生動(dòng)的表現(xiàn)力,在吸引用戶注意力方面展現(xiàn)出顯著優(yōu)勢(shì)。通過(guò)關(guān)鍵元素的微妙動(dòng)畫(huà)和CTA按鈕的交互反饋,能夠有效引導(dǎo)用戶視線,強(qiáng)化信息層級(jí)。
  在動(dòng)態(tài)Banner的應(yīng)用中,單圖形式往往更受青睞。雖然動(dòng)態(tài)效果能提升視覺(jué)吸引力,但過(guò)度使用可能導(dǎo)致"視覺(jué)噪音",反而分散用戶注意力,降低核心信息的傳達(dá)效率。
    面對(duì)信息過(guò)載的數(shù)字環(huán)境。微交互動(dòng)畫(huà)作為一種優(yōu)雅的解決方案,在功能引導(dǎo)和視覺(jué)敘事兩個(gè)維度都發(fā)揮著重要作用,也已經(jīng)成為界面設(shè)計(jì)中不可或缺的設(shè)計(jì)語(yǔ)言。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.3視頻
    視頻廣告作為一種成熟的營(yíng)銷媒介,在短視頻文化盛行的當(dāng)下,已逐步融入Banner輪播體系。這類視頻Banner通常占據(jù)首屏黃金位置,配合明確的倒計(jì)時(shí)提示和便捷的關(guān)閉選項(xiàng),為用戶提供可控的觀看體驗(yàn)。為減少對(duì)用戶的干擾,視頻默認(rèn)采用靜音播放模式,這種貼心的設(shè)計(jì)選擇體現(xiàn)了以用戶為中心的設(shè)計(jì)理念。
    在特定垂直領(lǐng)域,如影視類平臺(tái),我們也能觀察到多視頻輪播的創(chuàng)新應(yīng)用。這種相對(duì)小眾的呈現(xiàn)方式,往往與平臺(tái)的內(nèi)容屬性高度契合,為特定用戶群體提供沉浸式的瀏覽體驗(yàn)。這種差異化的設(shè)計(jì)策略,展現(xiàn)了產(chǎn)品設(shè)計(jì)中對(duì)場(chǎng)景化需求的深入思考。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.4分層
    在追求差異化體驗(yàn)的設(shè)計(jì)浪潮中,輪播廣告正在突破傳統(tǒng)平面展示的局限。分層視覺(jué)設(shè)計(jì)以其獨(dú)特的空間感和動(dòng)態(tài)層次,為Banner設(shè)計(jì)注入了新的活力。這種創(chuàng)新表現(xiàn)形式包含多層次的視覺(jué)構(gòu)建:從基礎(chǔ)的內(nèi)容層疊加視覺(jué),到更具空間感的3D翻轉(zhuǎn)效果,再到前景與背景的智能分離運(yùn)動(dòng),每種方式都在重新定義用戶與廣告內(nèi)容的交互方式。
    基于視覺(jué)層次的運(yùn)動(dòng)差異,設(shè)計(jì)出引人入勝的視覺(jué)敘事,能夠有效的提升用戶參與度以及更具沉浸感和記憶點(diǎn)廣告體驗(yàn)。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
小結(jié)
    Banner的視覺(jué)創(chuàng)新是提升內(nèi)容吸引力的關(guān)鍵驅(qū)動(dòng)力。
    每一種新的視覺(jué)語(yǔ)言都是我們與用戶對(duì)話的新方式,是提升信息傳達(dá)效率的重要途徑。在競(jìng)爭(zhēng)激烈的市場(chǎng)環(huán)境中,差異化的表現(xiàn)形式往往能成為抓住用戶注意力的制勝法寶,這也是為什么我們要不斷突破常規(guī),尋求更具感染力的視覺(jué)解決方案。
 
二、Banner布局樣式
    在確定Banner的視覺(jué)表現(xiàn)手法后,就得深入研究其在界面布局中的空間關(guān)系。布局樣式的多樣性源于多個(gè)設(shè)計(jì)維度的考量:從Banner的寬高比例、尺寸規(guī)格,到其與頁(yè)面結(jié)構(gòu)的整合方式(通欄或分欄),再到其與周圍元素的視覺(jué)關(guān)系(獨(dú)立呈現(xiàn)或背景融合)等。
    就通欄與分欄布局而言,這種結(jié)構(gòu)性選擇直接影響B(tài)anner的視覺(jué)占比。雖然直覺(jué)告訴我們更大的Banner更具吸引力,但優(yōu)秀的設(shè)計(jì)需要平衡信息層級(jí)與視覺(jué)舒適度。Banner的布局不應(yīng)是孤立的決策,而應(yīng)該與整體界面風(fēng)格和諧統(tǒng)一,既要突出又要融入,在視覺(jué)沖擊力和界面協(xié)調(diào)性之間找到最佳平衡點(diǎn)。這種全局性的設(shè)計(jì)思維,正是打造優(yōu)質(zhì)用戶體驗(yàn)的關(guān)鍵點(diǎn)所在。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
    在處理深色系頭部界面時(shí),我們常采用Banner與背景層疊的設(shè)計(jì)策略。這種手法通過(guò)建立視覺(jué)深度,創(chuàng)造出富有層次的空間感。背景色的處理有兩種方式:一是采用固定色值保持統(tǒng)一性,二是根據(jù)輪播圖主色調(diào)動(dòng)態(tài)調(diào)整,后者能實(shí)現(xiàn)更自然的視覺(jué)過(guò)渡,提升整體設(shè)計(jì)的融合度與空間縱深感。
    在Banner比例方面,選擇直接影響高度控制,需要根據(jù)界面內(nèi)容密度靈活調(diào)整。除了基于內(nèi)容需求的自定義方案,許多人會(huì)采用數(shù)學(xué)比例系統(tǒng)進(jìn)行規(guī)范化設(shè)計(jì)。其中,基于斐波那契數(shù)列推導(dǎo)出的8:5、8:3等比例關(guān)系,因其視覺(jué)舒適度而被廣泛采用。在實(shí)際應(yīng)用中,我更傾向于選擇能被4整除的數(shù)值,既符合開(kāi)發(fā)規(guī)范,又能確保在不同設(shè)備上的適配性。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
以經(jīng)驗(yàn)作為基石,而不是限制,特殊情況特殊對(duì)待,就像配合前端工程師調(diào)整設(shè)計(jì)圖樣式一樣,靈活運(yùn)用。
 
三、總結(jié)
    Banner作為頁(yè)面中的常見(jiàn)元素,與其說(shuō)是對(duì)布局樣式的探索,不如說(shuō)是對(duì)用戶體驗(yàn)的深度挖掘。每一次布局創(chuàng)新都是對(duì)用戶與頁(yè)面互動(dòng)方式的重新思考。
    一個(gè)恰到好處的留白、一次精準(zhǔn)的視覺(jué)引導(dǎo)、一個(gè)流暢的交互過(guò)渡,這些細(xì)微之處都可能成為提升產(chǎn)品體驗(yàn)的關(guān)鍵。 當(dāng)我們能夠系統(tǒng)性地把控每個(gè)設(shè)計(jì)細(xì)節(jié),將用戶需求轉(zhuǎn)化為優(yōu)雅的解決方案時(shí),就能做出真正打動(dòng)人心的頁(yè)面設(shè)計(jì)。


作者:Syic
鏈接:https://www.zcool.com.cn/article/ZMTY1MTk1Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 久久精品国产999久久久 | 一本色道久久综合亚洲精品加 | 亚洲欧美综合网站 | 欧美亚洲中日韩中文字幕在线 | 国产自精品在线 | 91香蕉视频免费 | 婷婷六月丁香色婷婷网 | 国产永久在线 | 国产欧美日韩精品a在线观看 | 特黄十八岁大片 | 麻豆网址在线观看 | 国产一级高清免费观看 | 黄色短视频免费 | 日韩中文字幕精品免费一区 | 黄欧美| 亚洲激情视频图片 | 青青草国产成人久久91网 | 91久久国产露脸精品 | 大片免费观看入口 | 亚洲日韩精品欧美一区二区 | 亚洲欧美日韩一区高清中文字幕 | 国产精品久久国产精品99 | 成人午夜免费观看 | 在线日韩视频 | 韩国免费高清一级毛片性色 | 国产成人小视频在线观看 | 国产高清国内精品福利99久久 | 黄色二级视频 | 亚洲精品xxxxx | 亚洲国产精品一区二区久久 | 麻豆视传媒短视频网站链接 | 4438成人成人高清视频 | 日韩毛片在线视频 | 欧美一级色 | 中文字幕一区视频 | 欧美高清一级 | 欧美成人xxxxxxxx在线 | 国产专区自拍 | 又大又爽又湿又紧a视频 | 日韩欧美第一区二区三区 | 一级v片|