設(shè)計(jì)知識(shí),怎么讓簡(jiǎn)潔的界面也有細(xì)節(jié)?
正好,前段時(shí)間公司的內(nèi)部培訓(xùn)就講到這方面。我將內(nèi)容整理一下。
之所以決定將這個(gè)問題作為公司內(nèi)訓(xùn)的原因,因?yàn)榘l(fā)現(xiàn)一些同事們的設(shè)計(jì)粗糙,缺乏細(xì)節(jié)。而所謂設(shè)計(jì)的細(xì)節(jié),又是一種很難用理性文字來表述清楚的東西。所以,我花了好幾天時(shí)間去觀察同事們做的東西,總結(jié)其中常犯的通病。本篇內(nèi)容,我會(huì)盡量用最易懂的大白話來回答。外行人也能看得明白,就是我的目的。所以,希望下面的內(nèi)容對(duì)你有幫助。
聲明:
1. 粗略回答此題,此答案目的在于授予漁之技,而非展示魚之貌,因此請(qǐng)閱讀重點(diǎn)。所以,也請(qǐng)各路語言潔癖咬文嚼字美學(xué)鑒賞黨慎入;
2. 本答案僅就一般規(guī)律進(jìn)行總結(jié),旨在傳授個(gè)人經(jīng)驗(yàn)于行業(yè)新人。如果你自認(rèn)是行業(yè)老鳥或高手,請(qǐng)慎入。另外,請(qǐng)不要拿個(gè)例來進(jìn)行反駁推翻。
讓我們先來定義一下,在設(shè)計(jì)中,普通觀看者,會(huì)把什么當(dāng)作為細(xì)節(jié)。
圖一:
圖二:
在看完以上對(duì)比后,我先來問幾個(gè)問題。
第一個(gè)問題:
各位可以根據(jù)自己對(duì)于「細(xì)節(jié)」二字的理解,從以上兩張圖中,選擇出你認(rèn)為更有「細(xì)節(jié)」的一圖。
第二個(gè)問題:
不管你選擇的是哪一個(gè),請(qǐng)你說出你認(rèn)為該圖有「細(xì)節(jié)」的緣由。 先不急著給「細(xì)節(jié)」二字下結(jié)論,讓我們?cè)賮砜纯戳硪唤M對(duì)比。而這次的對(duì)比,會(huì)復(fù)雜一些。
圖三:
圖四:
還是和之前一樣。請(qǐng)大家來回答我?guī)讉(gè)問題。
第一個(gè)問題:
各位依然根據(jù)自己對(duì)于「細(xì)節(jié)」二字的理解,來選擇出你們認(rèn)為更有細(xì)節(jié)的是哪張圖?
第二個(gè)問題:
請(qǐng)把你在前圖中,總結(jié)出的對(duì)于「細(xì)節(jié)」的原因,套用到現(xiàn)在這兩張圖中來,看看你所定義的產(chǎn)生「細(xì)節(jié)」的原因,是否依然存在?
現(xiàn)在,我就來將大家看到前面幾張圖時(shí)的心理活動(dòng)進(jìn)行一個(gè)還原。
在這樣兩張對(duì)比中,大多數(shù)人會(huì)認(rèn)為第二個(gè)「我」字更有細(xì)節(jié)。這里的細(xì)節(jié)感來自于畫面中的裝飾性元素(投影)。
一張圖,我們的視覺能夠在上面停留的點(diǎn)或者時(shí)間,相對(duì)來說越多越久,我們的心理感受便會(huì)認(rèn)為這張圖越有細(xì)節(jié)。
就拿上面兩張圖來說,第一張圖,我們?cè)诳催^之后,大約僅零點(diǎn)一秒不到的時(shí)間,就可以反應(yīng)出,圖中只有一個(gè)漢字而已。而這時(shí)候,我們的視覺與大腦會(huì)立刻做出后面兩種反應(yīng)中的一個(gè)。
第一種反應(yīng),我們會(huì)立刻在畫面中去尋找可以供我們觀看的第二個(gè)元素。如果找不到,那么我們就會(huì)立刻將注意力從畫面上轉(zhuǎn)移。
而第二種反應(yīng),是我們會(huì)立刻從畫面上轉(zhuǎn)移注意力,不再觀看了,因?yàn)闆]有可以看的內(nèi)容。
接下來,我還是通過圖例的方式,來讓大家感受一下裝飾性元素對(duì)于細(xì)節(jié)感的影響。
圖五:
上圖,是一個(gè)按鈕。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- Photoshop初級(jí)教程-命令的技巧
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論