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

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

來源:zhihu 作者:-eno-one- 學習:5840人次

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

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

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

圖六:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

回到本題。

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

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

我們還是來看圖例。

圖七:

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

圖八:

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

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

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

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

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

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

因為界面設計的太粗糙。我感覺將我的心情用那樣的界面應用記錄下來,是對自己情緒的不負責任。

圖九:

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

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

可是,下載后的一些應用。

圖十:

學習 · 提示

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

關注大神微博加入>>

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