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

首頁

作品就要不斷打磨,這些細節點都要注意了!

天宇 平面設計

今天來優化一張作品

今天我們來看一下學員作品并且優化一下!

 

在優化之前,你們能不能看出作品還存在什么問題呢?

 

 

是不是感覺已經是一張完成度很高的作品了,那它能不能更好呢?

 

當然可以!我們來看看如何優化。

 

 

 

第一步 優化構圖

 

原圖的構圖雖然感覺挺有意思,但是并沒有做到位,對于新手來說,這種構圖也是相對比較難的,前期我建議大家可以選擇一些相對不易出錯的構圖方式,比如元素圍繞主體,營造畫面沖擊力的居中構圖。

 

 

1.可以把元素聚集到中心周圍,讓畫面緊湊,飽滿,做出向外沖出的效果。

 

 

 

 

 

2.可以添加兩根前后貫穿空間的光帶,增強沖擊力,讓構圖更有張力!

 

 

這樣的構圖簡單并且容易出效果!

 

 

 

第二步 色彩調整

 

1.飽和度:

原版畫面中這一層次看起來是不是特別重,導致畫面的節奏一下有點亂掉了。而且整體飽和度相對比較高,有點油膩!

 

 

我們要適當降低畫面中部分層次的飽和度,這樣才會使整體更加高級,可以看下優化之后的效果:

 

 

是不是舒服多了。

 

 

 

2.統一色調:

我們做圖的時候主體和環境要有一些呼應,這個飛碟飛碟正面有點太綠了,缺少一些呼應環境的顏色,這樣就會感覺和畫面有些割裂感,可以增加一些環境色,使其統一呼應到一起。

 

 

我們看下前后優化的對比效果:

 

 

這樣就和諧多了!

 

 

 

第三步 優化空間

 

首先我們來看原圖,是不是會覺得畫面中心有一點空,元素都在外部,導致整體不夠飽滿:

 

 

所以我們在優化的時候,把元素平均的分布在畫面的每一個地方,使空間看起來更加的均衡:

 

 

現在元素雖然均衡了,但是并沒有產生前后關系,所以我們讓后面的元素更弱一些,分幾個層次。

如下圖:

 

 

當我們把這樣的元素層次放在畫面里之后,看起來就會更加的精致飽滿,空間感十足:

 

 

 

 

 

第四步 增加畫面趣味性

 

其實增加趣味性的方法有很多,比如我們在這個畫面融入了很多表情,可以讓畫面更加生動。

 

除了這樣的方法,其實一些小小的改動有時候也可以讓畫面變得更加趣味一些。

 

比如:

原版的飛碟太正了,顯得呆呆的,這個時候我們可以把主體歪一下,一下子它就活潑了。

 

 

 

再比如:

有時候元素直接漏出來顯得比較生硬,如果我們利用一層一層的波紋,藏住元素,或許也可以巧妙地增加畫面趣味性:

 

 

 

效果還不錯吧!

 

最后我們加上文字,看看整體優化前后的效果!這是不是要比之前的穩很多呢:

 

 

 

 

 

總結

 

最后,我們再來總結一些知識點吧:

 

1.構圖:構圖的時候就要要注意整體的飽滿度,畫面穩定,元素分得太分散就會不聚焦了。

 

2.顏色的飽和度:主體>元素>背景。

 

3.空間:畫面不能太空,要有節奏的把畫面每一個角落都照顧到,其次我們要在視覺上有前有后,增強縱向空間上的層次感。

 

4.趣味性:增加畫面趣味性除了利用表情以外,還可以用一些微小的變化去實現,比如歪著的可能比正的活潑一點,再比如元素的穿插互動也可以讓畫面增趣不少,大家可以多多嘗試!

 

以上就是今天和大家分享的內容,希望對大家有所幫助!



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

這幾個知識點終于解決了我配色的一大難題!

天宇 平面設計

 

1.亮色與重色的比例

 

我們在設定界面風格的時候,少不了顏色的配比,但顏色一定是講究平衡的,其中一個最重要的平衡就是明暗的平衡,如果你的界面全屏都是很亮的顏色,那就會導致非常的刺眼,比如像瑞文同學的這個顏色設定:

 

 

就是過于明亮了,其實當我們的顏色過于明亮時,最常用的一種方式就是,直接用黑色去壓住亮色,像下面這組圖標的做法一樣,減少亮部顏色,直接增加黑色:

 

 

這樣就不會那么刺眼了,當我們明白了底層原理之后,再去優化配色,我們看前后的變化:

 

 

這樣就會比之前舒服很多,當然,也可以試試頭圖變成黑色,按鈕變成綠色,把重色面積繼續加大,但不管哪一種,都會比之前全是亮色要好很多!

 

 

 

2.這個改動可愛了太多

 

小A同學是一個非常有潛力的同學,但是最開始交上來的吉祥物作業,也不是很理想,效果如下:

 

 

話不多說,我們就改動一個點,五官緊湊,看看前后效果對比:

 

 

可愛的程度完全不在一個檔次,我們再看看小A同學后面的延展效果:

 

 

比之前強了很多很多倍,就是因為一個五官緊湊。

 

 

 

3.對顏色的敏銳度

 

我們在做練習的時候,很重要的一個鍛煉點就是視覺敏銳度,能夠敏銳的發現哪里不舒服,這個真的很重要。

 

而視覺敏銳度里面就有一個維度是顏色,比如我們在看下面一兜糖同學做的質感圖標作業:

 

 

我們應該快速的看出,第一個圖標顏色不是很和諧,沒有后面兩個那么舒服,主要是那個藍色有點臟,我們看優化后的三個圖標:

 

 

就比之前要統一舒服很多。

 

當我們的練習達到一定量時,敏銳度自然就會提高很多,所以一定要多去練習,把敏銳度這一塊提高上來。

 

 

 

4.綠色好難配啊!

 

這是潘子同學的疑惑點:

 

 

他感覺綠色好難啊,第一次交上來的作業如下:

 

 

先不說造型問題,就光說顏色,就有點單薄,也有點太亮了,還有就是顏色比較正。

 

其實我們在配綠色的時候,只要把綠色加一點藍色,或者加一點黃色就會讓顏色好看很多。

 

 

后來潘子同學把顏色進行了優化:

 

 

這樣就比之前還要多了。

 

還有包括檸檬同學用的綠色:

 

 

也是比較好看的。

 

這回再用綠色的時候,大家清楚怎么好看了吧!

 

 

 

總結

 

以上就是今天和大家分享的一些知識點啦,大部分是關于顏色的,顏色敏銳度、綠色怎么配,明暗的對比等等,顏色是一個非常重要的視覺維度,希望大家都能重視,并且多多練習。提高自己的色感!

 


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

B端產品中常用的三種面板

天宇 B端ui設計文章及欣賞

我們需要了解一下設計模式,例如它是什么、什么時候用、怎么使用,可以讓我們在沒有參考的情況下,也能設計出合理、好用的界面。

 

折疊面板

 

它是什么

把不同的內容模塊,放到一組順序排列的面板中,這些面板每一個都可以折疊、可以展開,互不干擾。

 

什么時候使用

你需要在頁面上顯示大量各種各樣的內容,可能包括文本、列表、按鈕、表單控件等,而你又沒法把它們都顯示在頁面上。

 

 

 

 

這些內容通過分組,形成了不同的模塊,以下是這些模塊的特點:

1、用戶可能一次只需要查看一個模塊的內容。有些模塊比別的模塊更長或更短,不過它們的寬度一樣。

2、這些模塊組成了一個工具箱,或者兩級菜單,或者包括一些交互式元素的某種結構,這些模塊的內容要么彼此相關,要么彼此類似。

 

 

 

 

3、要注意的是,當一個大模塊打開或者打開了很多個模塊的時候,模塊底部的標簽可能會滾動到屏幕或窗口的外面。如果這一點對用戶來說有問題,那就要考慮一下其他的解決方案。

 

 

 

 

如何使用

豎向排列這些模塊,并使用對于用戶來說有意義的排列順序。

例如:QUICK BI 右側折疊面板,順序是從大到小,從外到內。

 

 

 

 

為每個模塊選擇一個簡短而富描述性的標題,并把這個標題放到一個橫條上,讓用戶可以單擊它來打開或關閉這個模塊。

也可以用一個可以變換方向的三角形圖標來提示打開/關閉的操作:關閉的時候向右或向下,打開的時候向上。

 

 

 

 

一次允許打開多個模塊。

人們在這個問題上有一些不同的看法,有的人喜歡一次只能打開一個模塊。不過根據經驗,特別是在各種應用里,一次允許打開多個模塊更合適。這樣可以避免一個之前打開的模塊突然消失,這樣會讓用戶覺得很粗魯,也很意外:“喂, 那個菜單哪里去了?之前就在這里的!

 

 

 

 

 

當用戶在登錄狀態時,折疊面板應該在多個操作期間,保持它們各自模塊的打開和關閉狀態,這點很重要。

 

 

 

 

 

 

如果模塊內容需要進一步拆分,折疊面板還可以級聯使用,不過這樣看起來會有點混亂。 因此只用一個一級折疊面板模塊更合適,如果有必要可以采用其他結構代替,比如tab頁。

 

 

 

 

 

可移動面板

 

它是什么

把頁面上的內容組合到幾個不同的區塊里,每一個都可以獨立打開或關閉。可以隨意在界面上放置這些區塊,用戶還可以移動它們,形成自己定義的布局。

 

 

 

 

什么時候使用

你正在設計一個桌面應用(例如:釘釘、飛書)或者一個網頁應用(例如:紛享銷客、ONES),應用中會涉及看板、工作臺、儀表盤、數據分析等頁面,你希望用戶對這些頁面有一定的控制權。 這些頁面應該是應用中的主頁面、是用戶會經常查看的頁面。

 

在這個頁面上,需要顯示大量各種各樣的內容,可能包括文本、列表、按鈕、表單控件、圖表等,而你又沒法把它們都顯示在一個模塊上。

 

 

這個頁面上的功能具有以下特點:

1、用戶想同時查看好幾個模塊。

2、不同的模塊對每個用戶來說,有著不一樣的價值。例如,有些人想看到A、B、C這三個模塊,而另外一些人可能想看到的是D、E、F。 3、在空間大小方面,各個模塊差異可能比較大。例如,用戶希望把信息少的模塊縮小。

 

 

 

 

4、模塊在界面上的位置對用戶來說很重要。例如,重要的內容用戶希望放在前面。

 

 

 

5、有時候模塊數量比較多,用戶不希望全部展示出來。例如:用戶匯報工作時不需要這個模塊,可以把它先移除,匯報完后,再添加回來。

 

 

 

 

6、控制這些模塊的功能可能是一個工具條,或其他交互式結構的組成部分。

 

 

 

 

為什么使用

因為不同的用戶關注點也不同,他們希望能自己選擇想看的內容。 可以把需要的內容放到顯眼的位置,把不需要的東西隱藏起來。同時,他們還可以利用“空間記憶”來記住不同的內容在什么位置。

 

空間記憶:當人們需要使用某個東西時,經常是通過回憶它們的位置來尋找它們,而不是它們的名字。 例如:你因為有事外出,需要同事打開你的電腦幫你發一份文件,通常你也說一句文件好像再桌面的右邊,這也是利用了空間記憶幫助快速尋找。很多軟件把對話框的按鈕(確定、取消)放在右下方,有一部分原因也是考慮到用戶的空間記憶依賴性。

總結:使用可移動的面板可以讓用戶的工作效率更高,工作更舒服。

 

如何使用

為每個模塊提供名稱、標題欄和默認尺寸,并為它們提供合理的默認設置。 讓用戶按自己的喜好在頁面上移動這些模塊,如果可能的話,可以提供拖曳功能。

 

 

 

 

讓每個模塊可以通過簡單的操作進行編輯和隱藏,也可以考慮讓用戶可以徹底移走這些模塊,在標題欄上放一個關閉按鈕就可以。

 

 

 

 

可移動面板要清晰的體現編輯與預覽狀態,如果用戶誤操作打亂模塊順序,需要提供一個“恢復默認設置”的按鈕。

 

 

可收起面板

 

它是什么

把次要內容和可選內容放到用戶能自己打開、收起的面板里。

 

什么時候使用

你需要在頁面上顯示大量各種各樣的內容,可能包括文本、列表、按鈕、表單控件等,而你又沒法把它們都顯示在頁面上。 同時,還可能有一些適用中央舞臺模式的內容需要在視覺上優先處理,需要把面板收起。

 

 

 

 

這些內容自然組成了分組或不同的模塊,這些模塊有著以下一些特點:

1、這些模塊為界面上的主要內容提供注釋、修改、說明或支持。(例如:WPS右邊的快捷鍵、樣式、幫助、資源)

 

 

 

 

2、這些模塊可能不是很重要,不需要默認展開。

3、對不同的用戶來說,它們的價值并不一樣。(例如:圖中新手入門指導,老用戶可能并不需要)

 

 

 

 

4、甚至對同一個用戶來說,這些模塊可能有時候非常有用,換個時間就不一定了。當 它們收起的時候,這些空間最好留給界面上的主要內容。

5、這些模塊之間可能彼此沒有多大關系。當用到Tab和折疊面板時,這兩個模式會把各個模塊組合到一起,表示它們之間有一些關聯,而可收起面板不會對內容進行分組。

 

為什么使用

把無關緊要的內容隱藏起來可以讓界面變得簡潔。

當用戶選擇隱藏某個模塊時,只要簡單地收起這個模塊就可以了。 它所占用的空間也會還給主要內容。

這也是漸進式展開原則的一個例子—只在用戶需要的時候,需要的地方立即顯示那些隱藏的內容。

總的來說,想讓界面保持整潔,通過對內容進行分組和隱藏是非常有效方式。而可收起面板、Tab、折疊面板、可移動面板,這4種模式正是有效方式的工具。 如何使用

 

 

如何使用

把內容放到一個單獨的面板里,讓用戶可以用一次單擊來打開或關閉這些面板。 可以利用引導性的文字來表示這里可以展開(例如:更多),也可以利用三角形的圖標來表示這里可以展開。

 

 

 

 

 

當用戶關閉這個面板時,把它所占用的空間收起來,用來顯示主要內容。

也可以在打開和關閉這些面板的時候加上動畫效果,這樣會讓打開和關閉時的過渡更加平滑。

如果有多個模塊要用這種方式來隱藏,可以把這些模塊放在一起,或者用Tab、折疊面板來組織,還可以把它們分開放在主界面上。

如果發現大部分用戶都打開了一個默認為關閉狀態的可收起面板,那么應該讓它默認打開。

 

 

謝謝大家觀看!



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

Tab Bar 動態設計提示

天宇 交互設計及用戶體驗

前排提示:本文多Gif需耐心加載,且需要有一定Ae基礎才能便于理解內容。

 

 

 

 



 

 

01 前言

你有沒有注意過,App底部的圖標是如何變成選中的?大多數產品是將靜態圖標替換(硬切過渡),來完成狀態切換。

 

 

 


當我看完上百個動態后,找到了更有趣的方式...



02 App底部導航構成

通常由圖標、文字/點線裝飾、和底板卡片組成,(當然也有些產品只使用圖標或文字),但設計師在進行動態設計時則是針對這3部分。

 

 

 

 



03 Tab Bar動態類型

  • 圖標動態
  • 裝飾元素動態
  • 底板卡片動態

動態效果由弱到強,視覺層級由低到高依次排序:圖標動態 — 裝飾元素動態 — 底板卡片動態。(根據本文案例效果來排序,但效果不同會有所差異)

 

 

圖標動態?
我們知道圖標風格可以簡單的分為:線性、面性還有線面。在這基礎上通過修改顏色或造型,又能延展出更多風格。

 

 

 

 

  • 在底部導航中,假如圖標選中前后都是線性風格

最常用的是添加修剪路徑(Ae的一種路徑效果),你可以把它理解成托尼老師,可以通過調整百分百參數來控制線條生長。

 

 


但只是單色修剪,看起來很單調。我們可以在這個動畫基礎上再多復制幾層,并分別加入品牌色,這樣可以讓視覺看起來更豐富。

 

 

 

 

也可以換一種方式,只調整不同顏色圖標的位置屬性,便能得到故障效果。

 

 


如果你覺得這些太浮夸,那么單個圖標添加修剪路徑,再配合位移、旋轉等基礎屬性則是更好的選擇。

 

 

 

 

  • 假如選中圖標是面型風格

通用的方法是調整不透明度,相比于硬切更柔和,且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產品來說,可能會顯得有些普通。

 

 

 


我們可以考慮使用遮罩來制作動態,首先在圖標周圍繪制幾個圓,再將圖標外輪廓,作為圓的遮罩,來控制其顯示范圍,最后調整圓的縮放即可。

 

 


在一些特殊的時間,設計師們可能會技癢,而將圖標繪制的更加豐富,來營造氛圍。

 

 

 

對于這類圖標,只需要參考它們的物理狀態[下方解釋],再遵循從下往上,從中心往四周擴張的原則來調整基礎屬性,便能制作出細節豐富的出場動畫。

 

 

 

(物理狀態:該物體在現實場景下的狀態,上圖獎杯真實世界狀態通常是放置地面,所以出場方向是從下到上。但假如你的圖標是錦旗,那么物理狀態應該是掛在墻上,所有出場方向是從上到下)


當然如果去掉高光和投影,在制作一些動態時會更方便。
例如:復制一顆星,將其初始位置設定為一個獎杯的距離,并記錄關鍵幀,然后整體再移動一個獎杯距離。耳朵則調整路徑來完成移動和變形,這樣便能營造出3d旋轉的錯覺。

 

 

 

 

  • 假如選中圖標是線面風格

對于結構復雜的圖標,可以提前分層。其中線條依舊可以使用修剪路徑(在Tab bar中,不同圖標修剪路徑的起始點方向通常相同,以便保持一致性),而填充只需要調整元素縮放,并借助蒙版限制其顯示范圍就行。

 

 



裝飾元素動態?
如果你覺得前面這些方案不夠新穎,那我們可以對裝飾元素下手。(當然這類方案很少見,原因在于商業價值不足,實現成本高,所以這里也只是提供一些創意練習思路)
在一些年輕化產品中,如果圖標含義很容易理解,那么設計師可能會用線或點來替代文字,讓整體更簡潔。
國外設計師Tubik,通過讓點元素在移動時呈現心電圖樣式,讓人眼前一亮。

 

 

 


通過動態效果,甚至能體現出產品行業屬性。

 

 

  • 基于這種思路,我們同樣讓裝飾元素放在下方

嘗試修改軌跡樣式,然后為元素不透明度和位置添加動畫,你能猜出這是什么類型的產品嗎?

 

 


又或者再夸張些,將軌跡設計成電路圖。其中線條添加修剪路徑,再借助Ae路徑跟蹤方法,使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍,這個方案看起來適合科技或游戲類產品。

 

 

 

 

  • 裝飾元素還可以放在上方

通過調整元素路徑來改變其造型,模擬液體滴落,再通過蒙版縮放,讓選中狀態下的圖標出現。

 

 

 

 

  • 裝飾元素還可以放在中間

假如你的圖標設計的足夠巧妙,我們可以提前繪制好關鍵筆畫的運動軌跡,便能通過修剪這條軌跡來完成筆畫的移動。

 

 




底板卡片動態?
這類動態少見的原因在于其動態效果面積大,視覺層級高,容易過度吸引用戶注意力。目前也只是在個別產品中看過卡片凸起效果。

 

  • 當選中圖標時,讓卡片凸起

在Ae中要制造這樣的效果,最先想到的可能是調整卡片路徑,但這樣的方式在制作彈性時非常麻煩。

 

 

 


我們有更簡單的方法,先多畫出一個圓,然后與卡片路徑合并。
為了讓邊緣圓滑,整體添加高斯模糊簡單阻塞,分別加大參數,便能讓邊緣圓滑。(這種方式有個缺點:會收縮原有卡片寬高。所以添加效果后,需要借助參考線再次調整卡片大小)

 

 

 

 

完成圓滑處理后,修改其他元素的基礎屬性即可。

 

 

目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾,其弱化了彈性次數。

 

 

  • 除了凸起,還可以凹陷

這個效果靈感來源于Dribbble設計師(EuroART93),我們只需要將凸起案例中,圓與底板卡片的布爾運算模式改為相減就行,其他元素同樣調整基礎屬性。

 

 

此方案目前還沒有在其他產品中看過,究其原因還是效果太過搶眼。

 

 

看了這么多,其實不難發現。同一個圖標,只需要改變不同屬性或元素的運動方式,便能帶來不一樣的感受。

 

 

 

 

或許創意的產生,并不是腦袋突然迸發出全新的東西。而是許多我們熟知的舊有內容組合了起來。
正是它們之間這種奇妙的融合,給我們帶來了新鮮感,或許這就是我們要的創意。

 

 

 



最后再說兩句:

每個產品都有自己的調性和目標用戶,動態效果也有強有弱。好的動態應該是能與其進行匹配,而不是根據某個產品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態,并不代表只能這樣用。動態效果類型遠遠不止這些,而以上只是最常見的動態屬性組合方式,所以請不要局限你的想法。

 



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

圖片海報不會做?6種方法提高形式感!

天宇 平面設計

在任何時候,海報的圖片處理都是設計師不可避免的一個步驟,運用對色調的處理,構圖的改變,甚至于風格化處理來調整圖片,使之能夠更加的適合版面,我們今天分享的就是通過對圖片的處理來塑造不同風格海報的設計。

 

01-

酸性液體金屬效果處理

酸性風格它的體現形式通常是鐳射紋理,金屬玻璃材質,3D物體材質等,其中很多人都好奇金屬玻璃材質的做法,也就是如何將普通的圖片轉換成酸性圖片,接下來我們將講解酸性圖片效果的處理方法,二話不說,先上效果圖:


步驟一/step 01

導入已經摳好的素材,快捷鍵ctrl+shift+u作去色處理

 

 

步驟二/step 02

ctrl+j復制一層,ctrl+i反向一下,并設置模式為【差值】,ctrl+e合并這兩個圖層,這一步驟要重復2-3次左右,會形成這樣的效果,做好后的效果有點丑,但是沒關系,我們接著往下做。

 

 

步驟三/step 03

將圖形轉化為智能對象,執行命令:濾鏡-模糊-表面迷糊(數值自定,具體數值可以自行修改,主要將黑白部分過度更加柔和一些)

 

 

步驟四/step 04

執行命令:濾鏡-風格化-油畫(數值自定,這一步驟可以將黑白之間的過渡更加柔和,形成液體金屬的最終效果)

 

 

步驟五/step 05

執行命令:濾鏡-濾鏡庫-塑料包裝(數值自定,這一步驟還是處理黑白之間的過渡,使之更加柔和),最后可以調整一下亮度和對比度,使之與金屬更加相似。

 

 

步驟六/step 06

最后排版上文字,海報就完成啦。

 

 

 

 

 

02-

復古潮流風藝術海報

半調網屏模式作為印刷中的重要方法,有著其特殊的處理藝術效果。在ps中,通過色彩模式可以將圖片的效果處理成半調網屏的像素狀效果。它有著復古潮流的藝術效果,下面我將講解如何在ps中給圖片添加半調網屏藝術效果,同上,先上效果圖:


步驟一/step 01

在PS中導入圖片,在這種潮流海報中,我們追求特殊風格海報設計,可以在摳圖時故意粗糙的摳圖出來,并執行命令:圖像-調整-黑白

 

 

步驟二/step 02

執行命令:圖像-模式-灰度,再次執行命令:圖像-模式-位圖,調整參數像素設為300,方法使用半調網屏,點擊確定;

 

 

步驟三/step 03

在上一步點擊確定后出現以下界面,頻率越小,效果越強烈,越大效果越輕,角度設置像素格的旋轉角度,形狀可以自行嘗試選擇,我這里選擇的是菱形;

 

 

步驟四/step 04

我們需要把位圖模式轉換成RGB,需要執行兩次命令,第一次執行:圖像-模式-灰度,第二次執行:圖像-模式-RGB

接著是將弄好的圖片去掉白色底背景,在通道面板,按住ctrl鍵,鼠標左鍵點擊其中一個通道,得到白色選區,快捷鍵:ctrl+shife+i反選選區,快捷鍵:ctrl+j復制圖層,隱藏下面的圖層,得到了一個半調網屏的圖片。

 

 

步驟五/step 05

最后排版上文字,就可以得到一張復古潮流藝術風海報。

 

 

 

 

03-

炸裂風格圖片處理

接下來休息下,我們來做一個非常簡單,但又非常好看且具有形式感的圖片處理方法,炸裂風格圖片海報,調整比較細的方塊可以有刺繡效果,非常具有視覺沖擊力,同時也能使版面產生非常強烈的層次感與形式感。先看最終效果:


步驟一/step 01

只需將圖片導入PS,執行濾鏡-風格化-凸出,這里可以自行調整參數

 

 

 

步驟二/step 02

在版面上排版圖片和文案,這樣一張炸裂風格的海報就做好了。

 

 

 

 

 

04-

長虹玻璃風格海報

長虹玻璃效果顧名思義,就是像玻璃樣式的效果,他能給人一種朦朧的美感,與“模糊”有點類似,它比較適合潮流時尚的一些產品海報設計時使用,尤其在電商海報中特別常見,接下來我們來詳細講解這種效果的做法吧,先上效果圖:


步驟一/step 01

在ps中新建一個畫布,填充一個50%的中性灰,用矩形工具繪制一個細長的矩形,填充顏色為黑白的線形漸變;

 

 

步驟二/step 02

復制漸變的矩形框,填滿整個畫布,全選復制出來的矩形框,郵件轉換為智能對象,快捷鍵ctrl+shift+s存儲為psd文件,注這是后期用來置換的文件

 

 

步驟三/step 03

在畫布中倒入我們準備好的圖片文件,復制一層,執行命令:濾鏡-模糊-高斯模糊;

 

 

步驟四/step 04

執行命令:濾鏡-扭曲-置換,在跳出的頁面設置水平和s垂直比例都為50,置換圖:拼貼,未定義區域:折回,點擊確定后選擇剛存儲的用來置換的文件;

 

 

步驟五/step 05

將剛才線形漸變的矩形置于最上層,混合模式改為柔光,并且調節下透明度,這樣長虹玻璃效果就完成啦。

 

 

步驟六/step 06

選取工具選擇需要的部分執行蒙版,就可以得到一半有玻璃,一半沒有玻璃的效果,然后排版上文字,海報完成!

 

 

 

 

05-

3D炫彩海報

3d炫彩海報適用于科技,創意等風格呈現時使用,它的本質是將一張圖進行一種3d化處理,制作起來也是相當的簡單,且特別能提升版面的形式感與立體感,制作非常簡單,我們一起來做下唄,老規矩,先上圖:


步驟一/step 01

 

首先我們需要找一張顏色特別豐富的圖片,最好是像這種發光的海報,執行命令:濾鏡-扭曲-旋轉扭曲,設置相應的數值

 

 

步驟二/step 02

執行命令:3d-從圖層新建網格-深度映射到-平面,把3d面板里面的預設改為【未照亮的紋理】

 

 

步驟三/step 03

在3d里面調整合適的角度后,在圖層面板選擇圖層,點擊鼠標右鍵-柵格化3d,快捷鍵ctrl+t將圖層調整適合大小;

 

 

步驟四/step 04

最后排版上文字,海報就完成啦!

 

 

 

 

06-

塑料薄膜風格海報

最后一種是塑料薄膜風格海報,這種效果相對來說比較復雜,所以放在最后一個說,雖然不涉及圖片處理,但是對于海報設計來說可以說是錦上添花的一種存在,他能讓海報具有一種光澤的質感,使其更顯層次感和形式感,這種海報在店招海報或者產品海報中比較實用,廢話不多說,來一起來做下吧,還是老規矩,上效果圖


步驟一/step 01

我們需要新建一個空白圖層,填充黑色,執行命令:濾鏡-渲染-云彩

 

 

步驟二/step 02

執行命令:濾鏡-液化,這里你可以隨意一點畫,這是將塑料膜的紋路畫出來,這是我畫的樣子;

 

 

步驟三/step 03

執行命令:濾鏡-濾鏡庫-藝術效果-繪畫涂抹,畫筆類型選擇火花,這一步是將黑白顏色區分開來;

 

 

步驟四/step 04

再次執行命令:濾鏡-濾鏡庫-素描-鉻黃漸變,這一步同樣是為了是將黑白顏色區分開來,只不過這次的效果更加明顯;

 

 

步驟五/step 05

點開通道面板,按住ctrl鍵,隨意單機一個通道,得到選取,回到圖層面板,快捷鍵ctrl+j復制一層,圖層模式改為濾色,調整適合的透明度,最后在下面加上圖片,排版上文字,海報就完成啦!

 

 



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

留白設計和UI設計準則

資深UI設計者 設計管理與成長

敘述留白設計準則以及UI設計的排版準則

這排版確實專業,這次不獻丑了!

天宇 平面設計

今天來繼續聊聊慢熱視覺課里的排版部分,分享一些小干貨給大家:
 
 
 
1.主體和畫面對比:
這排版確實專業,這次不獻丑了!
 
 
 
同學排版做的不錯,但是主體和背景的對比不足,導致怎么畫面有些悶悶的。 所以我們可以提亮背景,加強背景和麥克風的對比這樣畫面就不會那么悶了。
 
 
像下面這些都是畫面對比不足導致畫面悶悶的或者層次拉不開的問題畫面:
 
這排版確實專業,這次不獻丑了!
 
 
 
 
我們可以在中間加一層亮色隔開,也可以增強畫面的對比:
 
 
這排版確實專業,這次不獻丑了!
 
 
 
 
 
 
2,整體畫面的結構比列:
 
比如下面的這張畫面,整體可以分ABC三個部分。
這排版確實專業,這次不獻丑了!
 
 
 
 
 
問題就在于A/C的體量太一致了,覺得整個畫面很臃腫。怎么調整呢?其實我們可以適當調整占比,拉開A/C的差距,比如縮小C的占比,這樣整個畫面就更有主次了:
 
 
 
這排版確實專業,這次不獻丑了!
 
 
 
 
實際效果,頂部的標題和底部的信息拉開了主次,整個畫面才有了更好的節奏感:
 
 
這排版確實專業,這次不獻丑了!
 
 
 
 
 
 
3.排版的延續性
 
看看下面的兩個案列:
這排版確實專業,這次不獻丑了!
 
 
 
左邊的排版感覺,就是排版和主體元素有很強的分割感,右邊的排版就比較連貫。
 
 
 
 
要去除這種感覺,我們需要像右邊這種,在中間區域增加一些和排版同色系的圖形或者文字來起到延續的作用,這樣整個畫面才能連貫起來,不會有分割感。
 
 
 
 
4.局部排版的比例節奏
 
拿下面這個排版舉例:
這排版確實專業,這次不獻丑了!
 
 
 
 
他的文字和英文太相近了,看起來就像三根柱子,毫無變化:
 
 
這排版確實專業,這次不獻丑了!
 
 
調整的有主次變化,我們可以縮小其中一根,再加一些錯位:
這排版確實專業,這次不獻丑了!
 
 
 
表現到字體排版上就是:
 
這排版確實專業,這次不獻丑了!
 
 
節奏感是不是就好多了呢?
 
 
 
 
5.排版的疏密節奏
我們來看下這一份作業:
這排版確實專業,這次不獻丑了!
 
 
整個畫面非常密集,特別是背景排版全是各種小字密密麻麻布滿的整個畫面,就導致了整個畫面非常密集。
 
 
其實這里我們需要整體畫面你的節奏感,一般來說我們背景的密集程度要和主體有所聯系,一般來說我們主體是我們畫面中最復雜的部分,其余部分如點綴元素、背景等的復雜度都要弱與主體,這樣才能很好的突出主體。
 
 
 
我們可以用一些大塊面的字體去大面積概括畫面,不要用很小很碎的字體去堆疊:
這排版確實專業,這次不獻丑了!
 
 
氣質是不是一下就上來了呢?
 


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

教你一文讀懂圖標設計

天宇 移動端UI設計文章及欣賞

引言
在數字化時代,用戶界面(UI)設計成為了連接用戶與產品的重要橋梁。圖標作為UI設計中不可或缺的元素,不僅承載著信息傳遞和導航的功能,還直接影響著用戶的視覺體驗和情感反應。一個優秀的圖標設計能夠瞬間吸引用戶的注意力,傳達出應用的核心功能,甚至成為品牌識別的一部分。本文將深入探討
圖標設計的基礎、步驟與技巧,并通過實際案例分析
,為設計師們提供一套完整的圖標設計指南。
(如果文中存在任何不準確或遺漏之處,我也非常期待各位專家的指正和建議)
本文目錄
本文目錄
 
「大廠設計師」教你一文讀懂圖標設計
 
 
 
一、圖標設計的基礎
1. 定義與功能
圖標是一種圖形符號,用于代表應用程序、功能或操作。在UI設計中,圖標可以快速傳達信息,提高用戶的理解和操作效率。
(1).定義
圖標設計是UI設計中的重要環節,通過創造
具有高度概括性和象征性的圖形符號
來代表各種物體、動作和概念。這些符號簡潔明了,能夠讓用戶快速識別,并在軟件界面、網站和移動應用等多領域廣泛應用。例如,常見的“保存”圖標是一個軟盤形象,用戶一看即知這是保存文件的功能。這種直觀性是圖標設計的核心價值所在。
(2).功能:
圖標設計的主要功能包括
提升視覺美感、增強用戶交互體驗、節省空間以及提供上下文信息
。例如,在手機桌面上,微信圖標用兩個對話氣泡簡單圖案代表了這個軟件;在界面導航和工具欄中,圖標可以快速引導用戶執行特定操作,例如,“搜索”圖標通常是一個放大鏡的形象,用戶看到這個圖標就知道可以進行搜索操作。這種通用的圖標設計使得用戶無需額外的學習成本就能快速上手。
具有代表性的圖標
具有代表性的圖標
 
2. 圖標的分類
圖標類型可以從多個角度進行分類,以下是根據風格、功能和交互方式等不同維度的分類介紹
(1).按風格分類
  •  
    線性圖標:
線性圖標主要為
單色線性或增加品牌色點綴
,使用輕量的線條勾勒,整體感受趨向于精致、細致,具有銳度感,不同的線條表現會帶來不同的視覺感受。
兩種具有代表性的線性圖標
兩種具有代表性的線性圖標
 
  •  
    面性圖標:
面性圖標包括
單色填充、多色疊加、微漸變
等不同形式,主要通過填充顏色來表達圖形,能夠更好地傳達出圖標的力量感和重量感,依賴于外輪廓的清晰度來提高識別度。
三種具有代表性的面性圖標
三種具有代表性的面性圖標
 
  •  
    輕質感圖標:
輕質感圖標包括
磨砂玻璃、輕寫實、晶白風
等,相較扁平圖標而言,更突出圖標的細節刻畫和真實的質感,增加了一些輕微的陰影或質感,以增加層次感。
三種具有代表性的輕質感圖標
三種具有代表性的輕質感圖標
 
  •  
    擬物化圖標:
擬物化圖標包括
2.5D、偽3D、3D建模
圖標等,盡量將現實世界中的形狀、紋理、光影融入到設計中,以模擬真實物體的外觀。
三種具有代表性的擬物化圖標
三種具有代表性的擬物化圖標
 
  •  
    字符圖標:
字符圖標使用
簡化和通用的圖形
,如字母、數字和簡單的圖形符號,具有較高的識別度和靈活的適用場景。
兩種具有代表性的字符圖標
兩種具有代表性的字符圖標
 
(2).按功能分類
  •  
    應用圖標:
應用圖標是各種應用程序的識別標志,通常在應用商店里下載的一些應用程序的標志
  •  
    頂部導航欄圖標:
常見有搜索、收藏、消息通知、掃一掃、每日簽到等
  •  
    底部導航欄圖標:
根據軟件的功能模塊進行分類,常見有主頁、我的等一些主要的模塊
  •  
    金剛區圖標:
是整個UI界面中的核心功能區域,承載頁面的主要功能和重要信息
  •  
    表單內圖標:
常見于”我的“界面中,根據產品類型不同而有差異
  •  
    通用圖標:
常見有箭頭、睜眼、閉眼、返回、收藏等
按照功能劃分的六種圖標
按照功能劃分的六種圖標
 
(3).按交互方式分類
  •  
    靜態圖標:
靜態圖標不會隨著用戶的操作或界面的變化而改變狀態
  •  
    動態圖標:
動態圖標會根據用戶的交互或界面的其他變化而改變狀態,如Bilibili的三連圖標動效
Bilibili的三連圖標動效
Bilibili的三連圖標動效
 
3. 設計原則
學習了圖標的基本分類之后,設計師們在設計圖標的過程中需要注意
易識別性、統一性、簡潔性
等基本的設計原則。我再給大家分享幾個icon設計的最佳原則幫助大家再UI設計中設計出完美的圖標。
(1).圖標設計的尺寸
最小的圖標大小通常為12×12px
。根據行業標準,在以此為基礎產生的大小值中,大部分的數值都是通過將先前的數字加倍而創建的。通常我們可以看到小、中、大這三個尺寸的圖標大小。值得我們注意的是,在我們創建ICON時,應該以100%的比例設計,這樣才會使得圖標像素看起來比較完美。同時通過進一步放大也可以確保準確性。
  •  
    iOS平臺規范:
iOS界面的網格系統
基于4pt的倍數
。蘋果官方建議最小可點擊區域為44pt,以確保用戶在操作時的準確性和舒適度。因此,設計IOS圖標時應以此為參考,確保交互元素的可點擊性。
  •  
    Android平臺規范:
Android界面
使用8dp的倍數
作為網格基礎,最小操作熱區要求為48dp。因此,通常建議采用48px作為常規圖標的設計尺寸,以便在不同設備和分辨率下都能保持良好的觸控體驗。
iOS系統中美團app的圖標尺寸
iOS系統中美團app的圖標尺寸
 
(2).完美像素
具有完美像素的圖標會呈現出
清晰明快的線條和形狀
。如今,高分辨率顯示器和Retina顯示器越來越流行,因此在不久的將來可能會減少對像素完美圖標的要求。但就目前而言,我們所設計的圖標也應該是可擴展、響應迅速并能適用于許多設備的。我們在創建具有完美像素的圖標時,可以參考以下三種建議:
  •  
    對齊像素網格:
這種設計方法可以使直線變得非常清晰,并增加曲線和拐角的清晰度
  •  
    使圖標保持完美角度:
有角度的線條更有模糊感。在創建圖標時,完美的角度是45°
  •  
    邊緣:
邊緣的4個像素最暗,因此最少需要保留4個像素的留白,這樣線條邊緣看起來才會更清晰
達成完美像素的三個要求
達成完美像素的三個要求
 
(3). 一致性原則
圖標的一致性,就是一組圖標放置在一起,
圖標要看起來差不多
,不能忽大忽小,我們前文提到過幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,在設計過程中除了可以利用柵格系統保證圖標大小統一之外,還需要注意以下幾個方面要保證統一:
  •  
    線寬與間隙:
為了使圖標看起來整潔一致,非常重要的一點就是要記住線寬和間隙的大小。這是一條我們必須遵循的規則,即:
所有線條的寬度相同
  •  
    方/圓角一致性:
包括圖標在內的對象圓角半徑會定義項目的外觀和感覺。當我們對一組中的多個對象進行闡述時,就需要遵循這一簡單的規則,即:
在方角和圓角之間選擇其一
,并對整組圖標應用相同的屬性。
線條與間隙、方圓角保持一致性
線條與間隙、方圓角保持一致性
 
  •  
    視覺大小:
當我們把一個大小相等的正方形和一個圓形放在一起時,就會產生一種奇怪的感覺:圓形似乎比正方形小。為了
使我們的形狀在視覺上看上去大小相同
,我們就應該把圓圈變大,或減小正方形的大小。
  •  
    視覺平衡:
我們經常在設計程序中使用中心對齊。雖然這種方法并沒有錯,但在細節方面,比如圖標設計中,我們就需要相信自己的眼睛,
打破數學規律,以增強元素的平衡
。以播放按鈕為例,它的形狀越不對稱,需要改進的地方就會越明顯。
視覺大小、平衡的一致性
視覺大小、平衡的一致性
 
(4).KISS原則
即Keep Simple & Starightforward,這個原則背后的想法是,如果大多數
系統保持簡單操作
,那么它們就會運作得很好。用戶也就會越容易理解并與之交互,而它就越有可能被放到項目設計中。那么,KISS原則是如何運用于圖標設計的呢?
  •  
    不使用文本:
文字和圖標的結合會減少圖標的使用方式。此外,小尺寸的文本具有不可讀性。如果我們仍然需要將文本作為支持元素,就需要使用ICON旁邊的提示工具和標簽。
  •  
    不要過度設計:
不必要的復雜性會妨礙設計目的。重復的設計也會嚴重影響用戶體驗
  •  
    盡可能避免不必要的元素:
但我們不能忘記確保每個圖標在整體上下文中都是可以理解且清晰的
KISS原則的三項要求
KISS原則的三項要求
 
「大廠設計師」教你一文讀懂圖標設計
 
 
二、圖標設計步驟與技巧
 1. 研究與分析
在圖標設計的第一步研究與分析中,需要
對品牌和目標受眾、競爭環境以及設計元素
進行深入的分析。下面詳細介紹圖標設計步驟與技巧第一步研究與分析:
(1).業務需求和用戶需求
了解業務的需求背景是至關重要的。這有助于設計師
理解產品的個性和定位
,確保圖標設計能夠準確傳達品牌信息。同時,
明確品牌的目標受眾
,了解他們的需求和偏好,可以幫助設計師更好地滿足用戶期待,提高圖標的吸引力和有效性。
用戶需求、業務需求與設計需求
用戶需求、業務需求與設計需求
 
目標受眾不同
,他們對圖形的期望也會不一樣,比方說設計兒童產品界面和B端產品界面時,所用的顏色和形狀都是有考究的。例如,兒童產品:叫叫閱讀的圖標設計形狀會比較圓潤,色彩頁比較豐富;而B端產品:騰訊會議的圖標設計用色就會很克制,形狀也不會過于圓潤。
不同目標用戶對圖標設計風格的影響
不同目標用戶對圖標設計風格的影響
 
(2).競品分析
分析競爭對手的圖標設計,
找出差異化的設計方向
,這對于創建獨特的圖標至關重要。通過觀察競爭對手的設計,設計師可以避免重復,并找到創新的切入點。下面以國內最大的兩家電商購物平臺拼多多和淘寶為例,詳細說明其不同的圖標設計風格時是怎樣體現出不同的品牌理念和市場定位的。在UI界面設計的競品分析中,拼多多與淘寶作為電商行業的兩大巨頭,其界面設計各具特色,體現了不同的品牌理念和市場定位。以下是對兩家公司界面設計的詳細競品分析:
i.設計風格:
  •  
    拼多多:
拼多多的界面設計簡潔明快,以紅色為主色調,
象征著活力、熱情和實惠
。首頁主打拼團購物模式,整體風格更加年輕化、社交化,符合其社交電商的定位。
  •  
    淘寶:
淘寶的界面設計則更加穩重且富有現代感,以橙色為主色調,
寓意著財富和繁榮
。首頁布局合理,分類清晰,用戶可以一目了然地找到自己需要的商品。搜索框設計簡潔明了,配合推薦搜索詞,使用戶快速定位到目標商品。
ii.色彩搭配:
  •  
    拼多多:
拼多多主打的紅色調顯得活潑可愛,符合年輕用戶的審美,整體色彩搭配
簡潔明快
  •  
    淘寶:
淘寶
色彩豐富
,但頁面整體顯得稍顯雜亂,缺乏統一的色彩風格。
iii.功能設計:
  •  
    拼多多:
拼多多
注重用戶體驗
,拼團、秒殺等活動設計獨特,社交元素豐富,用戶參與感強。同時,拼多多的搜索框和推薦算法也更加個性化,根據用戶的偏好推薦相應的商品。
  •  
    淘寶:
淘寶
功能豐富多樣
,商品種類繁多,搜索推薦系統較為智能,但頁面加載速度較慢。此外,淘寶還擁有豐富的社交功能,用戶可以通過買家秀、評價等功能進行社交互動。
iv.用戶體驗:
  •  
    拼多多:
拼多多通過社交分享和拼團互動,增加了用戶粘性,
用戶參與感強烈
。同時,拼多多的價格戰略也體現在界面設計上,頁面上經常出現“xx人正在拼團”的提示,吸引用戶參與拼團活動。
  •  
    淘寶:
淘寶作為老牌電商平臺,
用戶體驗相對成熟
,但個性化推薦仍需提升。淘寶的購物流程相對傳統,但廣告較多,頁面略顯復雜。
拼多多、淘寶的界面圖標設計對比
拼多多、淘寶的界面圖標設計對比
 
(3).設計元素
選擇能夠代表品牌核心價值的圖形元素
,如圖標、符號或抽象圖形。這些元素應當簡潔明了,易于識別,同時具有獨特性,能夠在眾多圖標中脫穎而出。字體的選擇應與品牌風格相符,確保字體的可讀性和美觀性。顏色的搭配也非常重要,需要選擇能夠傳達品牌情感和個性的顏色,并確保顏色的搭配和諧。例如,閑魚App的UI設計通過獨特的設計元素,成功體現了品牌風格。以下是對閑魚App圖標設計的詳細分析:
i.顏色:
閑魚App采用了醒目且統一的配色方案,
以黃色為主色調
。黃色作為主色調,
給人一種溫和和舒適的感覺
,同時用于強調重要的功能按鈕或提示信息,使用戶能夠迅速識別出需要操作的按鈕。針對年輕用戶的喜好著重設計,采用了淡黃、淡藍等更為年輕化的色彩,這種配色方案不僅提高了界面的辨識度,還增加了用戶使用的舒適度。
ii.圖標設計:
閑魚App的圖標設計非常簡潔明了,
采用了扁平化+輕質感的風格,簡化了復雜性
,方便用戶快速識別功能。特定的圖標如“待售”、“交易中”、“已售”等,幫助用戶快速識別自己商品的狀態。同時,幾乎每個重要界面上都有閑魚的IP形象小黃魚,頻繁強調品牌形象
閑魚獨特的圖標設計體現出獨特的品牌設計元素
閑魚獨特的圖標設計體現出獨特的品牌設計元素
 
 2. 構思與草圖
圖標設計的構思與草圖階段是整個設計過程中至關重要的環節,它不僅決定了圖標的最終形態,還影響著用戶體驗和品牌傳達。
(1).構思
完成研究與分析后,我們要收集關于
“詞語—圖形”之間能轉化的元素
,用生活中的物或其他視覺對象來代替所要表達的功能信息或操作提示。例如設計圖標“發現”,我們會想到放大鏡、指南針、眼睛、飛機、星球等,可以都畫出來進行選擇,這一階段也稱為頭腦風暴階段。但最終我們設計師選擇什么來表達呢?這個時候我們不僅需要從普通角度進行思考,也要通過
分析行業角度
、以及
產品自身角度
進行思維發散。
通過三個不同角度,完成詞語到圖形的轉化構思
通過三個不同角度,完成詞語到圖形的轉化構思
 
(2).草圖
草圖是設計師
將想法轉化為可視化圖形
的第一步。在紙上快速繪制草圖,可以幫助設計師迅速探索多種構思,并在數字化之前收集靈感 。在繪制草圖時,設計師應注重
簡潔性和可識別性
,避免過于復雜的細節 。同時,草圖還應具有一定的抽象性和概括性,以便在后續的設計中進行靈活調整 。
繪制抽象與概括的草圖
繪制抽象與概括的草圖
 
3. 細節處理
圖標設計的細節處理是確保圖標既美觀又實用的關鍵。以下是一些關于圖標設計細節處理的建議:
(1). 風格選擇
把 icon 的外形確定下來后,就可以開始細化圖標風格了,如果不知道該采用什么風格,不如先看看自家app的風格或設計語言是什么,可以
根據app風格細化圖標風格
。比如站酷的app的頁面風格是扁平、漸變、線條,那么icon就可以按照扁平、帶線條的方向設計。
站酷app的頁面風格與圖標
站酷app的頁面風格與圖標
 
(2).圖標的柵格系統
柵格系統即(Keyline)就是
把圓、正方向、三角形、長方形(縱向和橫向)合并到一起的參考物
,方便我們在設計不同圖標時進行參照對比。正確的使用刪格會
讓設計更加標準和統一
。網格以24*24為基準,可成倍放大或縮小。它是我們設計的“容器”。框架可以幫助我們通過選擇畫布的一個區域來創建設計。大家在創建設計時經常會將ICON放置在框架中,這么做的原因在于以下幾點:
柵格系統及其正確用法
柵格系統及其正確用法
 
  •  
    大小:
由于圖標的幾何形狀,它們都具有不同的高度和寬度。為了在設計中正確使用ICON,我們就應該將它們放置在大小始終相同的框架之中。
  •  
    導出:
框架內的圖標需要與視覺中心對齊,這對于導出帶有框架的圖標至關重要。
  •  
    組件:
如果我們使用Figma,那就需要通過創建組件來節省時間。大家可以使用“實例功能”來快速替換圖標。
使用柵格系統保證圖標大小一致、視覺平衡,同時也能方便建立組件庫
使用柵格系統保證圖標大小一致、視覺平衡,同時也能方便建立組件庫
 
(3).圖標的一致性
我們前文提到過幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,在設計過程中除了可以利用柵格系統保證圖標大小統一之外,還需要注意以下幾個方面要保證統一:
i.圓角統一:
圓角統一,就是
圖標之間有相同造型
,然后又都有圓角的,那么他們就要
保持相同的圓角曲度
,比方說下面這組圖標,圖標的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規范和專業。
ii.風格統一:
界面中同樣功能的圖標,
樣式和風格需要保持一致
,比方說這組圖標樣式,風格就保持著高度的一致,都是用的玻璃質感的磨砂材質。
iii.角度統一:
這組扁平化圖標,在右邊
相似的角度
都疊加了一個小色塊,增加了圖標的層次感,相同的角度也增加了圖標的一致性和系列感。
iv.線條粗細統一:
圖標的粗細要統一
,這樣圖標就會看起來比較精致,比方說下面的這組圖標,圖標外框線都是用的3px,圖標里面的線都是用的2px,圖標的粗細都保持一樣的粗細規律,這樣的圖標看著也是同樣的美觀和一致。
v.疏密統一:
下面是一組類似于插畫風格的圖標,圖標的風格是布線比較密集飽滿,
保證布線的疏密統一
,而三個圖標都遵循了這樣的原則,看起來出奇的統一,所以它們看起來像是一組成套圖標。
vi.透視統一:
當設計的圖標是立體時,要
注意它們的透視要統一
,就像下面的這組2.5D圖標,它們的設計透視就保持著高度的一致。
通過六組圖標學習如何保證圖標一致性
通過六組圖標學習如何保證圖標一致性
 
 4. 命名與輸出
圖標設計不僅需要美觀、實用,還需要
符合一定的規范和標準
。以下是關于圖標設計的命名與輸出的詳細指南:
(1).圖標設計的命名規范
i.命名原則:
命名應盡量簡潔明了,
避免使用冗長或復雜的名稱
。且所有命名只能為
小寫英文字母
,不要使用中文或首字母大寫的形式。遵循統一的命名規則,確保團隊成員之間的協作效率。
ii.命名結構:
  •  
    通用切圖命名:
組件_類別_功能_狀態@2x.png(例如:tabbar_icon_home_default@2x.png)。
  •  
    模塊特有切圖命名:
模塊_類別_功能_狀態@2x.png(例如:bill_icon_search_pressed@2x.png)。
iii.命名結構:
  •  
    控件/組件:
指獨立的可操作界面元素,如狀態欄、搜索欄等。
  •  
    模塊:
通常指頁面中的部分區塊,如背景、按鈕等。
  •  
    功能:
指頁面或模塊中需要操作或點擊的點。
  •  
    狀態:
表示當前切圖的狀態,如默認狀態、點擊時狀態等。
ps:圖標的命名一般用英文或者拼音,如果初學者對于英文命名不好理解,那么推薦下面這個網站,它將常用圖標命名匯總非常方便。
圖標命名表與命名網站推薦
圖標命名表與命名網站推薦
 
(2).圖標設計的輸出規范
i.輸出尺寸:
根據不同平臺和設備的需求,圖標可能需要不同的尺寸
。例如,iOS和Android平臺對圖標的尺寸要求有所不同。常用的網格繪制尺寸包括:16、24、36、48、64、128、512、1024等。對于啟動圖標,iOS和Android通常使用1024×1024像素的尺寸。
ii.輸出格式:
位圖格式:
PNG、JPG
等,適用于大多數應用場景。矢量格式:
SVG
,適用于需要無損縮放的場景。
GIF
格式:適用于動態圖標。
iii.輸出注意事項:
確保圖標在不同尺寸下的顯示效果清晰銳利,避免出現半個像素等情況。對于需要透明背景的圖標,確保導出時保留透明度信息。在導出過程中,
注意保持圖標的視覺一致性和平衡感
「大廠設計師」教你一文讀懂圖標設計
 
 
三、應用案例分析
 1. Apple的iOS 18系統圖標
隨著iOS 18系統的發布,蘋果公司再次對系統圖標進行了更新和優化,旨在提升用戶體驗和視覺美感。iOS 18不僅延續了蘋果一貫的簡潔、直觀的設計風格,還
引入了更多現代化的設計元素
,特別是在深色模式下的表現尤為突出。此次圖標設計的更新,反映了蘋果對于細節的關注和對用戶需求的深刻理解。
(1).iOS 系統圖標設計的演變歷史
  •  
    iOS 1-3 擬物設計的巔峰:
   在2007年,初代iPhone問世,iOS(當時稱為iPhone OS)的圖標設計以
擬物風格
為主。蘋果通過逼真的紋理和立體感讓圖標看起來栩栩如生。
  •  
    iOS 4-6 細節打磨:
   隨著iOS的逐漸成熟,蘋果在iOS 4到iOS 6之間繼續使用擬物設計,但
在細節上進行了更精細的打磨
。這一時期的圖標在光影效果和材質感上有了更高的表現。
iOS 1-6的圖標設計
iOS 1-6的圖標設計
 
  •  
    iOS 7-9 扁平化設計的到來:
2013年,iOS 7帶來了劃時代的
扁平化設計
。蘋果放棄了擬物化風格,轉而采用更簡潔、更現代的圖標設計。通過去除多余的陰影和高光,圖標變得更加輕盈。簡約的設計語言讓整個系統顯得煥然一新。這一轉變不僅僅是設計風格的變化,更標志著蘋果設計哲學的更新。
  •  
    iOS 10-12 細節優化與動態效果:
iOS 10到iOS 12在扁平化的基礎上,
加入了更多的動態效果與視覺層次
。圖標的顏色更加鮮艷,層次感更強。例如,信息圖標變得更圓潤,而音樂圖標的顏色更加活潑。蘋果開始在圖標中融入更多的交互動畫,讓用戶體驗更加生動。
iOS 7-12的圖標設計
iOS 7-12的圖標設計
 
  •  
    iOS 13-15 簡約與多樣性的結合:
在iOS 13到iOS 15之間,蘋果繼續優化圖標設計,
加入了深色模式
支持,允許用戶根據環境光線自動調整顯示效果。
  •  
    iOS 16-18 多彩的個性化時代:
進入iOS 16,蘋果推出了
自定義鎖屏和小組件
功能,
圖標也開始支持更多的自定義選項。
用戶可以通過Focus模式設置個性化的圖標風格,從而更好地表達自己的個性。iOS 17更是將這種個性化設計推向了新高度,用戶不僅可以定制App圖標的形狀和顏色,還可以通過Widget讓桌面顯示更多動態信息。
iOS 13-18的圖標設計
iOS 13-18的圖標設計
 
(2).iOS 18系統圖標具體案例分析
i.主屏幕的改動
  •  
    布局:
iOS 18 將會允許用戶將主屏幕上的
圖標放置在任何位置
,而不需要強制依次排列擺放
用戶可以在主屏幕的任意空白位置擺放 app 和小組件,可以把它們放在程序塢上方,以便快捷使用,也可以讓它們圍繞墻紙主體排布。
  •  
    允許用戶自定義圖標顏色:
蘋果將允許用戶定制應用程序圖標, 可以
讓用戶更改應用程序圖標的顏色
。App 圖標和小組件可通過深色或色彩效果變換外觀,用戶還可將它們的尺寸調大,創建最適合自己的體驗。比如說可以將社交軟件圖標設置為藍色、購物軟件圖標設置為橙色、銀行金融類的圖標設置為綠色等等,這樣我們可以更加直觀的對應用進行分類以及查找。
用戶可自由調節布局以及圖標的顏色
用戶可自由調節布局以及圖標的顏色
 
ii.Siri應用圖標
  •  
    歷史演變:
最初的Siri圖標簡單而又獨特。黑色背景上,「i」字母上方的綠色圖形像一個
對話氣泡
,簡潔明了地表達了Siri作為語音助手的功能。蘋果正式收購Siri并將其集成到iOS系統之后。圖標采用了一個
麥克風
的形象,背景則是金屬質感非常強烈的圓圈,中央的麥克風帶有漸變的紫色。這一設計與當時的iOS擬物化設計風格完全一致。第三和第四版圖標繼續沿用麥克風形象,但設計變得更加簡潔,更符合開始流行起來的
扁平化
設計趨勢。從2016年開始,Siri圖標的麥克風移除并被
彩色的音頻波
取代,進一步強調Siri的聲音識別和處理能力。2017年之后,Siri圖標開始以
球體形狀
呈現,內部是多層漸變色組成的動態光芒,給人一種未來感和科技感。
  •  
    iOS 18的更新:
如果你有注意到市面上五花八門的AI產品,你會發現,這些 AI 產品的品牌標志設計也遵循了這一目標,大多數都具有相同的特征:
不構成威脅、抽象、簡單和非擬人化
。從這一「創新」改變來看,重新設計的Siri標志更加符合這一個性化要求。
Siri的歷史演變、新版Siri圖標、Siri其他AI產品的圖標對比
Siri的歷史演變、新版Siri圖標、Siri其他AI產品的圖標對比
 
iii.實時生成表情符號
Genmoji是蘋果公司在iOS 18系統中引入的一項全新功能,它利用
生成式AI技術
讓用戶通過簡單的文本描述就能自動生成獨特的表情符號
。比如在發送短信的時候,可以根據當時聊天的情形實時創建新的表情符號。這些表情符號不僅能夠反映你的心情和個性,還能適應不同的對話和場合。
如何使用Genmoji
如何使用Genmoji
 
(3).iOS 18系統圖標設計未來展望
隨著技術的不斷進步和用戶需求的變化,iOS系統的圖標設計也將不斷創新和發展。未來可能會有更多
個性化和動態化
的圖標設計出現以滿足不同用戶的需求和偏好。同時隨著人工智能和機器學習技術的發展圖標設計可能會
更加智能化和自動化
從而提高設計效率和質量。無論如何變化iOS圖標設計都將繼續秉持簡潔、一致、高辨識度和視覺吸引力的原則為用戶提供更好的使用體驗。
 2.優秀圖標網站推薦
通過前面的文章學習,相信大家已經對圖標設計了如指掌了,那么作為一名合格的設計師,我們如何利用好的設計資源進行提效呢?以下是一些優秀的圖標設計網站推薦:
(1).IconFinder
  •  
    特點:
擁有龐大的圖標庫,包含超過89萬個圖標和17936個圖標集。支持多種格式下載,包括PNG、SVG、CSH等。部分圖標收費,但免費圖標數量也相當可觀。
(2).IconPark
  •  
    特點:
字節跳動旗下的一款圖標下載網站,相比Iconfont,圖標種類不算太多,但圖標的規范非常統一,也可在右側的操作欄更改圖標屬性,另外還有免費的插畫庫可供使用。
(3).Iconfont
  •  
    特點:
iconfont是阿里巴巴的圖標庫,應該也是受眾最多的一個圖標下載網站,給我們平時工作提效不少,造福了不少的設計師。
(4).IKonate
  •  
    特點:
Ikonate是一款可以在線編輯的圖標網站,涵蓋了常用的一些圖標,可以調節線條的粗細和大小,導出的格式是SVG。
(5).Iconduck
  •  
    特點:
Iconduck的優點是有273,858個免費的圖標庫和插畫庫供大家選擇,儲備夠豐富。
(6).Icon8
  •  
    特點:
Icon8是一個專注于提供高質量圖標和設計資源的平臺。這里的圖標涵蓋了扁平化、線條、顏色等多種風格,都是由專業設計師和插畫師手繪制作,確保了其獨特性和高品質。除了豐富的圖標資源,Icon8還提供了字體、照片、音效、視頻、插圖等多元設計資源,滿足各種項目的需求。
推薦的六個圖標網站
推薦的六個圖標網站
 
此外,在選擇這些圖標設計網站時,還需要注意以下幾點:
  •  
    版權問題:
   確保所選網站的圖標資源符合您的使用需求,特別是商業用途時要注意版權限制。
  •  
    格式兼容性:
   根據項目需求選擇合適的圖標格式,如PNG、SVG等。
  •  
    更新頻率:
   選擇那些定期更新圖標資源的網站,以獲取最新的設計趨勢和素材。
總結與展望
圖標設計是UI設計中不可或缺的一部分,它要求設計師具備良好的審美觀、對用戶的深刻理解以及不斷的創新能力。通過遵循設計原則、掌握設計技巧、應對挑戰并關注未來趨勢,設計師可以創造出既直觀又吸引人的圖標,為用戶提供更優質的體驗。在未來,UI設計將繼續發揮其重要作用,成為連接用戶與數字世界的橋梁。設計師們需要注意以下三個未來圖標設計的發展方向:
  •  
    技術影響:
隨著AR/VR等新技術的應用,未來的圖標設計可能會變得更加互動和個性化。新技術的應用將為圖標設計帶來更多的可能性和挑戰。
  •  
    用戶需求變化:
未來的圖標設計可能會更加注重個性化和互動性。未來的設計師需要更多地考慮到用戶的個性化需求和使用場景。
  •  
    人工智能:
   AI輔助設計工具可以幫助設計師更快地生成和優化圖標方案。人工智能的發展將為設計師提供更多的工具和支持,幫助他們更高效地完成工作。
設計師們只有不斷學習和進步,才能在激烈的競爭中保持領先。持續學習不僅是個人成長的需要,也是行業發展的需求。
「大廠設計師」教你一文讀懂圖標設計
 
 
 


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

解鎖B端按鈕設計10大密碼

天宇 B端ui設計文章及欣賞

 
無法想象沒有按鈕的頁面是什么滋味,那定會像沒有方向盤的汽車,讓人不知所措吧?也無法想象按鈕設計不恰當,會給用戶帶來怎樣的困擾?
 
面對十萬火急的任務需求,
如果需要調動全部理性腦,深呼吸三秒,
才能找到想要執行操作的按鈕入口,我想這樣的產品設計是失敗的,是會被用戶所唾棄的。
 
本文將詳細剖析按鈕的神秘面紗,了解它、研究它,讓按鈕設計成為產品的得力助手,為我們的產品賦能,為我們的工作提效,下面就讓我們開啟這場神秘之旅吧!
 
解鎖B端按鈕設計10大密碼
 
 
 
 
目錄
一、按鈕的定義
二、按鈕設計的種類
三、按鈕設計的尺寸
四、按鈕的構成
五、按鈕設計的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設計原則
九、按鈕設計的注意事項
十、按鈕弱化設計的六種方式
 
 
解鎖B端按鈕設計10大密碼
 
 
按鈕在我們生活中起著很大的作用,它就像我們的小助手一樣,幫我們一鍵開啟想要的任務,凡事都能一鍵觸達。
 
解鎖B端按鈕設計10大密碼
 
 
 
按鈕在UI界面中,是一種界面交互控件,通常以矩形、圓形或其他幾何形狀呈現,具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發特定的功能或操作,如提交表單、執行命令、導航頁面、切換狀態等。
 
按鈕一般包含文字標簽、圖標或兩者的組合,以清晰傳達其功能。
同時,按鈕在不同狀態下會呈現出不同的視覺效果,如默認狀態、按下狀態、懸浮狀態、禁用狀態等,為用戶提供操作反饋和引導。
 
 
解鎖B端按鈕設計10大密碼
 
 
1、Antdesign對按鈕的種類劃分:
 
?
 次按鈕
常規按鈕,用于非主要動作。如果不確定選擇哪種按鈕,次按鈕永遠是最安全的選擇。
解鎖B端按鈕設計10大密碼
 
 
 
主按鈕
突出“完成”、“推薦”類操作;一個按鈕區最多使用一個主按鈕。
解鎖B端按鈕設計10大密碼
 
 
 
文字按鈕
弱化的按鈕,采用更輕量的按鈕樣式,可用于需大面積展示按鈕場景,例如下面的站酷活動頁就用了很多的文字按鈕,只有當按鈕被選中時,按鈕才會高亮選中。
解鎖B端按鈕設計10大密碼
 
 
 
圖標按鈕
圖標提供視覺線索,避免逐字閱讀按鈕文案,更高效地使用界面,讓頁面看起來更加的簡潔。
解鎖B端按鈕設計10大密碼
 
 
解鎖B端按鈕設計10大密碼
 
 
 
 
在按鈕中添加圖標
用于對按鈕含義補充解釋,提高按鈕識別效率。
解鎖B端按鈕設計10大密碼
 
 
 
2、按鈕的樣式種類
按鈕的樣式可以從多個方面進行分類和設計,以下是一些常見的樣式分類:
 
按顏色劃分:
單色按鈕
按鈕背景為單一顏色,如藍色、綠色、紅色等,常用于強調按鈕的主要功能或操作。
 
漸變色按鈕
按鈕背景為漸變色,可以是線性漸變或徑向漸變,通常用于增加視覺吸引力和現代感。
 
透明按鈕
按鈕背景透明或半透明,通常用于與背景融合或突出按鈕上的文本和圖標。
 
彩色邊框按鈕
按鈕背景透明或淺色,但有彩色邊框,常用于需要突出按鈕邊界的場景。
解鎖B端按鈕設計10大密碼
 
 
 
 
按形狀分
矩形按鈕
這種是最常見的按鈕形狀,適用于大多數界面設計。
 
圓形按鈕
按鈕形狀為圓形,通常用于表示播放、暫停等操作,或用于具有特定功能的圖標按鈕。
 
圓角按鈕
按鈕形狀通常為圓角矩形,常用于需要柔和視覺效果的場景。
 
自定義形狀按鈕
根據設計需求,按鈕可以是任意自定義形狀,如星形、心形等,常用于創意設計或特定主題的界面。
解鎖B端按鈕設計10大密碼
 
 
 
按邊框分
無邊框按鈕
按鈕沒有邊框,背景和文本直接顯示,常用于簡潔的界面設計。
 
細邊框按鈕
按鈕有細邊框,常用于區分按鈕與周圍元素,同時保持界面的簡潔性。
 
粗邊框按鈕
按鈕有粗邊框,常用于強調按鈕或與背景形成強烈對比。
 
虛線邊框按鈕
按鈕邊框為虛線,常用于表示輔助操作或非主要功能。
解鎖B端按鈕設計10大密碼
 
 
 
按圖標分
圖標按鈕
按鈕上只有圖標,沒有文本,常用于表示通用操作或節省空間的場景。
 
圖標+文本按鈕
按鈕上既有圖標又有文本,圖標通常位于文本左側或上方,常用于清晰表達按鈕功能的場景。
解鎖B端按鈕設計10大密碼
 
 
 
按陰影樣式分
無陰影按鈕
按鈕沒有陰影,常用于簡潔或平面風格的界面設計。
 
輕微陰影按鈕
按鈕有輕微的陰影效果,常用于增加按鈕的立體感和層次感。
 
明顯陰影按鈕
按鈕有明顯的陰影效果,常用于突出按鈕或與背景形成強烈對比。
 
動態陰影按鈕
按鈕的陰影效果會隨著鼠標懸停或點擊等交互動作而變化,常用于增加交互體驗的趣味性。
解鎖B端按鈕設計10大密碼
 
 
 
按動畫種類分
無動畫按鈕
按鈕沒有動畫效果,常用于簡潔或傳統的界面設計。
 
懸停動畫按鈕
當鼠標懸停在按鈕上時,按鈕會有動畫效果,如顏色漸變、邊框變化、圖標旋轉等,常用于增加交互體驗的趣味性和吸引力。
 
點擊動畫按鈕
當點擊按鈕時,按鈕會有動畫效果,如縮放、震動、波紋等,常用于增加交互體驗的反饋感。
馬蜂窩的功能主按鈕,在點擊的時候都會產生動畫,交互感十足。
解鎖B端按鈕設計10大密碼
 
 
 
加載動畫按鈕
當按鈕處于加載狀態時,按鈕會有加載動畫效果,如旋轉圖標、進度條等,常用于告知用戶操作正在進行中。
 
 
 
3、按鈕的幾種狀態
解鎖B端按鈕設計10大密碼
 
 
 
3.1 默認按鈕
按鈕的初始狀態,通常具有正常的顏色、形狀和文字顯示,等待用戶操作。
 
3.2 待激活狀態按鈕:
待激活狀態按鈕通常用于指示某個功能或服務尚未激活或啟用,用戶需要執行某些操作來激活它。這種按鈕的設計和實現需要清晰地傳達當前的狀態,并引導用戶進行下一步操作。
 
3.3 點擊狀態按鈕:
當用戶點擊按鈕時,按鈕會呈現按下的狀態,通常通過改變顏色、形狀或添加陰影等方式來表示。
 
3.4 禁用按鈕:
在某些情況下,按鈕會處于禁用狀態,無法進行操作,通常會以灰色或半透明的方式顯示,提示用戶當前操作不可用。
 
3.5加載狀態按鈕:
加載狀態按鈕通常用于指示某個過程正在進行中,例如數據加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理,而不是卡住或出現錯誤。
 
3.6危險提示狀態按鈕:
危險提示狀態按鈕通常用于提醒用戶即將執行的操作可能帶來風險或不可逆的結果,例如刪除重要文件、注銷賬戶等。這種按鈕的設計和實現需要讓用戶明確意識到操作的危險性,以避免誤操作。
 
下邊這兩組彈框就是運用了危險按鈕,來提示客戶未來即將面臨的風險,警示作用非常的明顯。
解鎖B端按鈕設計10大密碼
 
 
 
 
解鎖B端按鈕設計10大密碼
 
 
1、 Web端的按鈕尺寸建議
在Web端,按鈕尺寸沒有固定標準。不過,一般來講,按鈕的高度常在32px-48px之間,寬度可根據內容靈活設置,但最好不要小于48px,這樣方便用戶用手指(觸屏設備)或鼠標點擊。像一個簡單的“提交”按鈕,寬度可能是80px左右,高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適,易于交互。
 
 
2、 麻省理工觸摸實驗對按鈕尺寸的指導
麻省理工觸摸實驗室通過對人類指尖的研究,得出了關于界面按鈕大小設計的一些重要參考數據。
 
解鎖B端按鈕設計10大密碼
 
 
 
對于食指,平均寬度在16至20毫米,指腹觸摸區域尺寸為10至14毫米,指尖觸摸區域尺寸為8至10毫米;對于拇指,平均寬度為25毫米,指腹觸摸區域尺寸為12至16毫米,指尖觸摸區域尺寸為10至12毫米。由此建議,食指觸摸的按鈕應保證在8毫米×8毫米以上,且控件間距應保證至少在1毫米以上;拇指觸摸的按鈕應保證在10毫米×10毫米以上,且控件間距應保證至少在2毫米以上。
 
該研究還指出,大多數用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。
 
 
3、 iOS對按鈕尺寸大小的規范
解鎖B端按鈕設計10大密碼
 
 
 
從按鈕圖標尺寸來看,根據蘋果官方設計指南,iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt,用于小型按鈕,如導航;標準圖標為32×32pt,用于普通按鈕,適合次要操作按鈕;大圖標是 40×40pt,用于寬大按鈕;特大圖標則為48×48pt,用于特大按鈕。不同設備屏幕尺寸也有對應的建議圖標尺寸,如iPhoneSE建議24pt,iPhone14及iPhone14Pro建議32pt,iPad 建議40pt 。
 
在最小觸摸區域方面,iOS規定最小觸碰區域為44×44pt,這種尺寸一般適合主要操作按鈕。
 
 
解鎖B端按鈕設計10大密碼
 
 
UI按鈕的組成主要包括以下幾個關鍵元素:
 
1、圓角
圓角的大小決定了按鈕的氣質和視覺感受。小圓角常用于常規按鈕,如4px圓角;圓角越大,越有親和力,人眼往往不喜歡非常鋒利的物體,所以通常不建議使用0圓角的按鈕樣式,根據我大量的體驗,我發現市面上確實也是帶圓角的按鈕居多些。
解鎖B端按鈕設計10大密碼
 
 
 
2、圖標
圖標用于直觀表達按鈕的功能或狀態,如加載中、編輯等。圖標的設計應與整體頁面風格一致,并確保其含義明確易懂。
 
 
3、內間距
內邊距能夠擴大按鈕的可點擊范圍,幫助用戶更容易點擊按鈕。一個好的設計間距是把按鈕的水平內邊距設計成垂直內邊距的2倍。當然,你也可以根據你設計的實際情況做適當調整,規矩不是死的。
解鎖B端按鈕設計10大密碼
 
 
 
 
4、容器
容器是包含所有視覺和交互元素的框架,包括顏色、紋理、文案和圖標等。容器的設計應支持按鈕的功能和美觀。
 
 
5、邊框
邊框定義了按鈕的邊界,常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。
 
 
6、文案
文案是按鈕上的文字描述,用于表達按鈕的含義和功能。文案應簡潔明了,易于理解,同時具有一定的吸引力。
 
 
7、背景
背景用于表達按鈕的狀態和品牌氣質。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
解鎖B端按鈕設計10大密碼
 
 
 
 
8、投影
投影用于凸顯層級關系,幫助用戶更好地區分不同的按鈕。投影通常與紋理、漸變色結合使用,以打造更好的視覺體驗。
 
佐糖首頁為了促進轉化,特意將“開通會員”的按鈕用投影凸顯處理,帶投影的按鈕明顯有向前走的感覺,比沒有投影的按鈕看起來更加顯眼,小小投影在頁面中不僅起到增加空間感的作用,還起到了業務強調的作用,已經不僅僅是樣式的一個承載了。
解鎖B端按鈕設計10大密碼
 
 
 
這些元素共同作用,不僅提升了按鈕的功能性,還增強了其美觀性和用戶體驗。在設計UI按鈕時,應綜合考慮這些因素,以確保按鈕既美觀又實用。
 
 
解鎖B端按鈕設計10大密碼
 
 
Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動,并幫助用戶防錯。
解鎖B端按鈕設計10大密碼
 
 
 
1、觸發操作
1.1提交與確認:
在表單填寫場景中,如用戶注冊、登錄、信息提交等,按鈕用于觸發提交或確認操作,將用戶輸入的信息發送給系統進行處理。
 
1.2執行功能:
在各類軟件中,按鈕是執行具體功能的主要方式,如在圖像編輯軟件中,“裁剪”“旋轉”“調整顏色”等按鈕,可讓用戶快速實現相應功能。
 
 
2、導航跳轉
2.1頁面切換:
在多頁面的應用或網站中,按鈕可實現頁面之間的切換,如網站的首頁、產品頁、關于我們頁等,通過點擊按鈕,用戶能方便地瀏覽不同頁面內容。
 
2.2菜單展開與收起:
用于控制導航菜單的展開與收起,節省頁面空間,提高界面的整潔度和易用性。
 
 
3、狀態控制
3.1顯示與隱藏:
可用于控制某些元素的顯示與隱藏,如在電商網站中,點擊“查看更多商品詳情”按鈕,可展開隱藏的詳細商品信息。
 
飛書中的這個小小按鈕,它承載著隱藏折疊的功能,讓頁面看起來更加的簡潔有序。
 
解鎖B端按鈕設計10大密碼
 
 
 
 
3.2啟用與禁用:
在某些功能需要滿足一定條件才能使用時,按鈕可用于表示該功能的啟用或禁用狀態,如在未填寫完必填項時,“提交”按鈕處于禁用狀態,無法點擊。
 
中國移動云盤的登錄頁就是這么設計的,當前面信息沒有填完,后面的登錄按鈕始終是禁用的狀態,只有當信息填完,且填寫正確,按鈕才會亮起。
解鎖B端按鈕設計10大密碼
 
 
 
4、提供反饋
4.1 操作反饋:
當用戶點擊按鈕后,按鈕會通過顏色、形狀、動畫等方式的改變,向用戶提供操作反饋,告知用戶系統已接收到操作指令。
 
4.2 引導提示:
在一些復雜操作或新功能引導時,按鈕可作為引導提示的一部分,告知用戶下一步操作,如在新手引導流程中,突出顯示“下一步”按鈕。
 
心島日志的新手指引中就是這樣設計的,按鈕在其中起了很重要的指引作用。
解鎖B端按鈕設計10大密碼
 
 
 
5、數據交互
5.1 數據篩選:
在數據展示界面,如表格、列表等,按鈕可用于對數據進行篩選,方便用戶快速找到所需信息。
釘釘打卡這個界面中,多虧有了日、周、月的篩選按鈕,才讓數據篩選變得如此便捷。
解鎖B端按鈕設計10大密碼
 
 
 
5.2 數據排序:
通過點擊“按時間排序”“按銷量排序”等按鈕,用戶可對數據進行重新排序,以滿足不同的查看需求。
 
 
6、品牌傳達
很多產品的按鈕顏色都是與它的品牌色高度一致的,它既是按鈕,又是品牌色的傳遞大使。
 
網易云音樂的按鈕色用的網易紅,釘釘打卡的按鈕用的騰訊藍,都是在傳遞自己的品牌色,同時也是在進行指令的傳達。
解鎖B端按鈕設計10大密碼
 
 
 
 
解鎖B端按鈕設計10大密碼
 
 
在日常設計中,頁面無疑少不了按鈕位置的擺放,那么按鈕放置在什么樣的位置合適,這也是一個值得深思的問題,也許我們已經司空見慣了按鈕的位置擺放,但是我們知道它為什么要放這里或者那里嗎?下面我們來看下這幾種設計模型,讓它告訴我們,為什么,在特定場景下,按鈕位置要這么放?
 
 
1、設計依據 – Z型視覺模型
1.1 原理含義
Z型視覺模型是一種描述用戶在瀏覽網頁或界面時視覺軌跡的理論模型。
它的布局遵循字母Z的形狀,指用戶的瀏覽路線——從左到右,從上到下的的視覺運動軌跡。
 
首先,人們從左上角到右上角進行掃描,形成一條水平線;第二步,向頁面的左下側,創建一條對角線;最后,再次向右轉,形成第二條水平線,當觀眾的視角以這種模式移動時,它形成一個虛構的“Z”字形。
解鎖B端按鈕設計10大密碼
 
 
 
1.2 視覺區域
區域1:位于頁面左上角,是用戶視線最先關注的區域,通常放置最重要的信息,如網站標志、導航欄等,能第一時間吸引用戶的注意力并讓用戶對頁面內容有初步的整體認知。
 
區域2:在區域1的右側,用戶的視線在水平移動時會經過該區域,可放置一些與區域1相關的輔助信息或次要的導航元素等。
 
區域3:位于頁面中部偏左,當用戶視線繼續向下移動時會關注到該區域,通常用來展示頁面的核心內容,如產品介紹、文章主體等。
 
區域4:在頁面的右下角,是用戶視線的終點區域之一,可放置一些重要的操作按鈕或補充信息等,以吸引用戶在瀏覽完主要內容后進行進一步的操作或獲取更多信息。
解鎖B端按鈕設計10大密碼
 
 
 
1.3 應用案例
在電商網站中,商家會把熱門推薦或主打產品放在區域1和區域3,以吸引用戶的注意力。在產品詳情頁面,將“加入購物車”“立即購買”等按鈕放在區域4,方便用戶在瀏覽完產品信息后進行購買操作。
 
天貓商城就是這樣做的,把網站的LOGO圖放置在左上角(區域1),把產品圖放置在左下角(區域3),最后在用戶瀏覽了全部頁面之后,在右下角(區域4)放置購買按鈕,引導用戶下單。
 
在這個帶有銷售場景的頁面設計中,
購買按鈕放置在右下角符合用戶瀏覽習慣,也符合Z型視覺模型。
解鎖B端按鈕設計10大密碼
 
 
 
在B端應用軟件中,可能運用的功能比較多,按鈕也比較多,通過大量分析和觀察發現,它們
大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
 
騰訊云是這樣處理的,中國移動網盤是這么處理的,看似巧合,其實也有它合情合理的一面,因為每一個動作的開始和結束都會更加的引人注意。
 
這就跟人們每次入職一個新公司一樣,剛進去時會特別賣力、小心,后面時間長了,也就形成免疫,習慣了,但是當最后要離開這家公司的時候,最后心情又會特別復雜,回想起自己在這里成長的歲月,就會心生很多的感慨,也會特別的記憶深刻。
 
也許這也是為啥很多頁面設計,喜歡
把重要的按鈕放置在每次視覺運動線的起點或者終點吧!
 
解鎖B端按鈕設計10大密碼
 
 
 
 
解鎖B端按鈕設計10大密碼
 
 
按鈕的顏色在界面中不僅起到視覺點綴的作用,同時也是按鈕狀態的一種呈現和反饋。
 
按鈕顏色不是千篇一律的品牌色,它也經常需要根據業務場景的不同,更換顏色,比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕,不同的按鈕在顏色設計上都會有所區別。
解鎖B端按鈕設計10大密碼
 
 
 
此外,在設計按鈕顏色時,有一些基本規范。
首先,從功能角度看,
主要按鈕通常會使用比較突出的顏色,
像鮮艷的藍色(如#007BFF),這是因為藍色醒目又不會過于刺眼,能引導用戶去點擊。次要按鈕(如取消、返回)的顏色會稍淡一些,比如淺灰色(#ccc),讓用戶知道這是相對次要的操作。
 
從顏色搭配來說,按鈕顏色要和背景色有足夠的對比度,方便用戶識別。比如背景是白色,深色按鈕就會很清晰;如果背景顏色較深,那按鈕可以用淺色或者高亮度顏色。
 
另外,顏色的選擇也要考慮產品的風格和使用場景。例如,在一個游戲軟件里可能會使用更活潑的色彩,像紅色、橙色;而在辦公軟件里,通常會采用比較沉穩的色調,如藍色、黑色。
解鎖B端按鈕設計10大密碼
 
 
 
 
解鎖B端按鈕設計10大密碼
 
 
1、可識別性
1.1 視覺清晰:
按鈕應采用用戶熟悉的設計樣式,如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
 
1.2 文字明確:
按鈕上的標簽應準確、簡明直接地介紹其功能,避免使用過于通用或模糊的表述,讓用戶清楚點擊后會發生什么。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
2、易操作性
2.1位置合理:
將按鈕放在用戶期望看到的地方,如遵循F型或古騰堡原則,在頁面的視覺焦點區域放置重要按鈕。
解鎖B端按鈕設計10大密碼
 
 
 
2.2尺寸適宜:
按鈕大小應反映其在屏幕上的優先級,更大的按鈕用于更重要的操作,同時要適配用戶的手指,避免誤觸。
 
 
 
3、一致性
3.1 順序得當、邏輯一致:
按鈕的順序應反映用戶與界面之間交互的邏輯,如“上一步”按鈕通常在左邊,“下一步”按鈕在右邊。
 
3.2 狀態樣式一致:
按鈕應具有一致的狀態樣式,如默認、按下、聚焦、禁用等,一個產品中,這些狀態樣式要高度的一致,不能在這個頁面按鈕樣式是這樣的,跑到另一個頁面,樣式又發生了改變。
 
著名的格式塔心理學也是這么認為的,它強調人對事物的理解是基于整體的、有組織結構的,如果按鈕設計做到一致性,對提高產品的整體性是有非常大的改進的。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
4、簡潔性
4.1 避免過多
避免在一個界面中使用過多的按鈕,以免讓用戶感到無所適從,應優先考慮最重要的操作。
 
4.2 功能單一
每個按鈕應盡量只執行一個主要功能,避免一個按鈕承載過多復雜的操作,降低用戶的認知成本。
 
希克定律指出,人的決策時間會隨著選擇的增加而增加。在按鈕設計中,
簡潔的設計能減少用戶的選擇和認知負擔
,使用戶能更快地做出決策并執行操作。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
5、美觀性
5.1 風格統一
按鈕的設計風格應與整個UI界面的風格保持一致,包括顏色、形狀、字體等方面,形成統一的視覺體系。
 
5.2 對比協調
在保持整體協調的基礎上,通過對比突出重要按鈕,如使用高對比度的顏色、較大的尺寸等,吸引用戶的注意力。
情感化設計理論強調設計應該注重用戶的情感體驗。美觀的按鈕設計能夠傳遞積極的情感信息,增強用戶和產品的情感連接。
解鎖B端按鈕設計10大密碼
 
 
 
 
6、要符合習慣
奧斯卡·王爾德說過:“習慣一旦養成,便很難改變。” 
所以我們在設計按鈕的時候,一定要符合人性的習慣,而不是試圖改變人們的習慣。
 
 
 
解鎖B端按鈕設計10大密碼
 
 
1、按鈕設計要有分組意識
帶有分組的按鈕擺放,讓人看起來總是更加的有序,也更利于用戶進行操作,面對同類型的功能操作點無需跳躍著去尋找,能很快在相似功能操作區域找到。
 
360的分組意識很強烈,三個不同區域的圖標按鈕樣式都做了明顯的區分,讓界面看起來更加有序,操作起來也更加的便捷。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
2、按鈕排列視覺上要有主次
切不可一行按鈕中出現多個高強調的按鈕,Antdesign對這個也做了詮釋,會對用戶的行為進行錯誤的引導,也不利于聚焦。
 
通義這個頁面雖然有多個選中的按鈕,但是沒有全部用高強調的按鈕,只有強推薦的操作“開始錄音”才用了強按鈕,其它通過相對淺的顏色做了弱按鈕選中處理,視覺上主次分明,信息主次表達上也清晰可見。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
3、不要在按鈕中放置兩個圖標
當一個按鈕同時兼顧兩個交互動作的時候,一定要區分設計,不能赤裸裸的展示在一個按鈕中,而不做任何區分。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
4、返回按鈕宜放置在左邊
具有返回意義的按鈕,應該放在左側,暗示其方向是回到之前,例如上一步。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
5、按鈕文字不宜太長
簡短的文字更易被用戶閱讀和記住,在一個按鈕上最多不超過5個文字,重要的按鈕一般
使用2~4個字。
解鎖B端按鈕設計10大密碼
 
 
 
 
 
解鎖B端按鈕設計10大密碼
 
 
? 用純灰色文字的弱化按鈕
 
? 用灰色邊框+灰色文字的弱化按鈕
 
? 用顏色邊框+顏色文字的弱化按鈕
 
? 用灰底+灰色文字的弱化按鈕
 
? 用淺色底+顏色文字的弱化按鈕
 
? 用純顏色的弱化按鈕
 
解鎖B端按鈕設計10大密碼
 
 
 
 
解鎖B端按鈕設計10大密碼
 
 
通過本篇文章的探討,我們深入了解了B端按鈕設計的九大核心要素。從按鈕的基本定義到Antdesign的分類,再到尺寸、構成、作用、位置和顏色等細節,每一部分都是提升用戶體驗的關鍵。
 
按鈕設計不僅關乎美觀,更影響著用戶的操作效率和滿意度。
在UI界面中,遵循設計原則和注意事項,確保按鈕既實用又具有吸引力,是每位設計師的職責。
 
希望本文能為設計師們提供有價值的參考,激發更多創新靈感,共同推動B端產品的交互設計向更高水平發展。
 
 
解鎖B端按鈕設計10大密碼


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

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 久久精品亚洲国产AV涩情 | 国产精品亚洲污污网站入口 | 国产无遮挡色视频免费观看性色 | 国产强奷糟蹋漂亮邻居在线观看 | 欧美一区二区VA毛片视频 | 国产在线中文字幕 | 日韩精品一区二区亚洲AV观看 | 三级全黄的视频在线观看 | 国产乱码精品一区二区三区四川 | 亚洲高清无在码在线电影 | 精品国产精品人妻久久无码五月天 | 人妻久久久精品99系列AV | 污污又黄又爽免费的网站 | 米奇影视999 | 伊人久久丁香色婷婷啪啪 | 久久re视频精品538在线 | 在线精品国精品国产不卡 | 日韩精品久久日日躁夜夜躁影视 | 99精品观看 | 99精品视频免费在线观看 | 区产品乱码芒果精品P站在线 | 日本xxxx裸体xxxx | 99九九免费热在线精品 | 香蕉久久一区二区三区啪啪 | 国产乱人精品视频AV麻豆 | 亚洲无码小格式 | 一天不停的插BB十几次 | 久久人妻少妇嫩草AV無碼 | 在线观看a视频 | 国产成人高清精品免费5388密 | 99热热在线精品久久 | 亚洲精品天堂在线观看 | 色婷婷五月综合久久中文字幕 | 久久久无码精品一区二区三区 | 国产在线观看免费观看不卡 | 久久视热频国产这里只有精品23 | 精品亚洲一区二区三区在线播放 | 国产一区二区三区内射高清 | 大桥未久与黑人中出视频 | 亚洲第一综合天堂另类专 | 国产亚洲日韩在线播放不卡 |