當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

設(shè)計知識,怎么讓簡潔的界面也有細節(jié)?(2)

來源:zhihu 作者:-eno-one- 學(xué)習(xí):5840人次

是一個沒有任何設(shè)計裝飾的按鈕,這個按鈕以最直白的漢字為表現(xiàn)形式。

而接下來,大家看到的圖六,是增加了起伏、投影、亞克力質(zhì)感等多種裝飾性手法的按鈕。

大家可以自己感受一下,哪一個會讓我們感覺更有細節(jié)。

圖六:

設(shè)計知識,怎么讓簡潔的界面也有細節(jié)?

還是讓我們結(jié)合之前所說的,視覺停留時間的問題。

第一個按鈕,我們看到之后,大腦會立刻做出反應(yīng),這是兩個漢字而已,接下來,我們會開始主動尋找第二個視覺停留點。這時候,我們會注意到灰色的底色,再接下來,我們有可能會注意到深灰色的文字。但是,當(dāng)我們把這一切全部都觀察結(jié)束后,當(dāng)我們無法再從畫面中找到可供觀看的點時,我們便會轉(zhuǎn)移視線。

而第二個擬物設(shè)計的按鈕。我們第一眼會看到文字,接下來看到的是灰色底色,再接下來看到的是凸起的按鈕,倒角弧邊,模仿亞克力質(zhì)感的光影關(guān)系,文字下方的疊加投影等等。由于有更多的裝飾性元素,所以,我們的視線會比第一張圖停留時間更長,我們也會認為第二張圖更有細節(jié)。 以上,是產(chǎn)生細節(jié)感的第一個原因。

我們視覺的停留時間,決定了我們是否會認為畫面更具有細節(jié)。而增加畫面的裝飾元素,是增強細節(jié)的一個手段之一。

接下來,開始分析我們在前面看到的第二組對比圖。

設(shè)計知識,怎么讓簡潔的界面也有細節(jié)?
設(shè)計知識,怎么讓簡潔的界面也有細節(jié)?

這兩組對比圖,都是畫面復(fù)雜且雜亂的。結(jié)合我們上面所說,畫面里的內(nèi)容都是豐富的。這些豐富的內(nèi)容,不管是不是來自于人為的設(shè)計,都可以使得我們的視覺在畫面中停留很長時間。

但是,我相信會有很多人會認為第二副更細節(jié)感。

而第二張圖的細節(jié)感,來自于畫面的構(gòu)圖(中軸線式)。

這樣的構(gòu)圖方式使得本來色彩與物件雜亂的畫面,增添了一點規(guī)則感。而我們所認為的細節(jié),其實就來自于規(guī)則感。

第一張圖,雖然畫面中有很多內(nèi)容可供觀看,但是,這些內(nèi)容,無論是擺放的位置,還是色調(diào),都是雜亂的。所以,即便有很多內(nèi)容可供觀看,雜亂的布局會影響觀看者的情緒,使得觀看者不愿多看下去了。 而第二張圖。雖也是雜亂的色彩與物件,但是,由于有了中軸線式的對稱構(gòu)圖?梢匀藶榈,使得觀看者的視覺疲勞降低。先看整體,再看左邊,接著再看右邊。人的視覺活動被構(gòu)圖形式引導(dǎo)。所以,細節(jié)感便來自于此。

以上,是兩個基礎(chǔ)的測試環(huán)節(jié)。其實,我已經(jīng)把產(chǎn)生「細節(jié)」的兩大要素告訴各位了。

畫面中的裝飾元素進行規(guī)則規(guī)律的出現(xiàn)(擺放),是使得觀看者產(chǎn)生細節(jié)感的另一個原因。

回到本題。

簡潔的界面怎么樣讓用戶覺得很有細節(jié)?

在前面,我提到過,裝飾性元素會讓畫面有細節(jié)感。但是,這些裝飾元素的堆砌,與簡潔其實并不沖突。

我們還是來看圖例。

圖七:

設(shè)計知識,怎么讓簡潔的界面也有細節(jié)?

圖八:

設(shè)計知識,怎么讓簡潔的界面也有細節(jié)?

上面兩組對比。如果僅僅從所謂的「簡潔」的角度出發(fā)來看,明顯是第一張圖更加簡潔。但是,我們不會認為第一張圖比第二張圖更有細節(jié)。

所以說,裝飾設(shè)計的細節(jié),與簡潔之間是沒有關(guān)系的。

有些設(shè)計,之所以給人感覺既簡潔,也有細節(jié)。是因為設(shè)計元素在畫面中高度統(tǒng)一和諧。

由于問的是界面設(shè)計,所以,后面的列子,我就以界面設(shè)計來做舉例。

上個月,我很想找一款用來寫日記的APP。找了很久很久,也看到不少用戶推薦的應(yīng)用?墒窍螺d完,打開后,我就不想再開第二次。

因為界面設(shè)計的太粗糙。我感覺將我的心情用那樣的界面應(yīng)用記錄下來,是對自己情緒的不負責(zé)任。

圖九:

設(shè)計知識,怎么讓簡潔的界面也有細節(jié)?

我需要的APP其實很簡單,簡潔,易用,可以多平臺同步。能夠插入圖片與音頻視頻。

可是,下載后的一些應(yīng)用。

圖十:

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!