中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

怎么樣讓用戶覺(jué)得簡(jiǎn)潔的界面有細(xì)節(jié)?

2016-09-05    分類(lèi): 網(wǎng)站建設(shè)

.co img{ padding:10px; background:#fdfdfd; border:1px solid #ccc;}


之所以說(shuō)這個(gè)問(wèn)題,因?yàn)橹鞍l(fā)現(xiàn)很多人設(shè)計(jì)的網(wǎng)站都是看著缺乏細(xì)節(jié)。而所謂設(shè)計(jì)的細(xì)節(jié),又是一種很難用理性文字來(lái)表述清楚的東西。所以,我花了好幾天時(shí)間去觀察同事們做的東西,總結(jié)其中常犯的通病。本篇內(nèi)容,我會(huì)盡量用最易懂的大白話來(lái)回答。外行人也能看得明白,就是我的目的。
1. 粗略回答此題,此答案目的在于授予漁之技,而非展示魚(yú)之貌,因此請(qǐng)閱讀重點(diǎn)。所以,也請(qǐng)各路語(yǔ)言潔癖咬文嚼字美學(xué)鑒賞黨慎入;

2. 本答案僅就一般規(guī)律進(jìn)行總結(jié),旨在傳授個(gè)人經(jīng)驗(yàn)于行業(yè)新人。如果你自認(rèn)是行業(yè)老鳥(niǎo)或高手,請(qǐng)慎入。另外,請(qǐng)不要拿個(gè)例來(lái)進(jìn)行反駁推翻。

讓我們先來(lái)定義一下,在設(shè)計(jì)中,普通觀看者,會(huì)把什么當(dāng)作為細(xì)節(jié)。
圖一:

圖二:

在看完以上對(duì)比后,我先來(lái)問(wèn)幾個(gè)問(wèn)題。

第一個(gè)問(wèn)題:

各位可以根據(jù)自己對(duì)于「細(xì)節(jié)」二字的理解,從以上兩張圖中,選擇出你認(rèn)為更有「細(xì)節(jié)」的一圖。

第二個(gè)問(wèn)題:

不管你選擇的是哪一個(gè),請(qǐng)你說(shuō)出你認(rèn)為該圖有「細(xì)節(jié)」的緣由。 先不急著給「細(xì)節(jié)」二字下結(jié)論,讓我們?cè)賮?lái)看看另一組對(duì)比。而這次的對(duì)比,會(huì)復(fù)雜一些。

圖三:

圖四:

還是和之前一樣。請(qǐng)大家來(lái)回答我?guī)讉€(gè)問(wèn)題。

第一個(gè)問(wèn)題:

各位依然根據(jù)自己對(duì)于「細(xì)節(jié)」二字的理解,來(lái)選擇出你們認(rèn)為更有細(xì)節(jié)的是哪張圖?

第二個(gè)問(wèn)題:

請(qǐng)把你在前圖中,總結(jié)出的對(duì)于「細(xì)節(jié)」的原因,套用到現(xiàn)在這兩張圖中來(lái),看看你所定義的產(chǎn)生「細(xì)節(jié)」的原因,是否依然存在?

現(xiàn)在,我就來(lái)將大家看到前面幾張圖時(shí)的心理活動(dòng)進(jìn)行一個(gè)還原。

在這樣兩張對(duì)比中,大多數(shù)人會(huì)認(rèn)為第二個(gè)「我」字更有細(xì)節(jié)。這里的細(xì)節(jié)感來(lái)自于畫(huà)面中的裝飾性元素(投影)。

一張圖,我們的視覺(jué)能夠在上面停留的點(diǎn)或者時(shí)間,相對(duì)來(lái)說(shuō)越多越久,我們的心理感受便會(huì)認(rèn)為這張圖越有細(xì)節(jié)。

就拿上面兩張圖來(lái)說(shuō),第一張圖,我們?cè)诳催^(guò)之后,大約僅零點(diǎn)一秒不到的時(shí)間,就可以反應(yīng)出,圖中只有一個(gè)漢字而已。而這時(shí)候,我們的視覺(jué)與大腦會(huì)立刻做出后面兩種反應(yīng)中的一個(gè)。

第一種反應(yīng),我們會(huì)立刻在畫(huà)面中去尋找可以供我們觀看的第二個(gè)元素。如果找不到,那么我們就會(huì)立刻將注意力從畫(huà)面上轉(zhuǎn)移。

而第二種反應(yīng),是我們會(huì)立刻從畫(huà)面上轉(zhuǎn)移注意力,不再觀看了,因?yàn)闆](méi)有可以看的內(nèi)容。

接下來(lái),我還是通過(guò)圖例的方式,來(lái)讓大家感受一下裝飾性元素對(duì)于細(xì)節(jié)感的影響。

圖五:

上圖,是一個(gè)按鈕。

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

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

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

圖六:

還是讓我們結(jié)合之前所說(shuō)的,視覺(jué)停留時(shí)間的問(wèn)題。

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

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

我們視覺(jué)的停留時(shí)間,決定了我們是否會(huì)認(rèn)為畫(huà)面更具有細(xì)節(jié)。而增加畫(huà)面的裝飾元素,是增強(qiáng)細(xì)節(jié)的一個(gè)手段之一。

接下來(lái),開(kāi)始分析我們?cè)谇懊婵吹降牡诙M對(duì)比圖。


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

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

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

這樣的構(gòu)圖方式使得本來(lái)色彩與物件雜亂的畫(huà)面,增添了一點(diǎn)規(guī)則感。而我們所認(rèn)為的細(xì)節(jié),其實(shí)就來(lái)自于規(guī)則感。

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

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

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

回到本題。

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


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

我們還是來(lái)看圖例。

圖七:

圖八:

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

所以說(shuō),裝飾設(shè)計(jì)的細(xì)節(jié),與簡(jiǎn)潔之間是沒(méi)有關(guān)系的。

有些設(shè)計(jì),之所以給人感覺(jué)既簡(jiǎn)潔,也有細(xì)節(jié)。是因?yàn)樵O(shè)計(jì)元素在畫(huà)面中高度統(tǒng)一和諧。

由于問(wèn)的是界面設(shè)計(jì),所以,后面的列子,我就以界面設(shè)計(jì)來(lái)做舉例。

上個(gè)月,我很想找一款用來(lái)寫(xiě)日記的APP。找了很久很久,也看到不少用戶推薦的應(yīng)用。可是下載完,打開(kāi)后,我就不想再開(kāi)第二次。

因?yàn)榻缑嬖O(shè)計(jì)的太粗糙。我感覺(jué)將我的心情用那樣的界面應(yīng)用記錄下來(lái),是對(duì)自己情緒的不負(fù)責(zé)任。

圖九:

我需要的APP其實(shí)很簡(jiǎn)單,簡(jiǎn)潔,易用,可以多平臺(tái)同步。能夠插入圖片與音頻視頻。

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

圖十:

設(shè)計(jì)粗糙。粗糙來(lái)自于哪里?來(lái)自于元素的不和諧。低幼化的字體,將整個(gè)界面的設(shè)計(jì)分拉低。

簡(jiǎn)潔,但具有細(xì)節(jié)的設(shè)計(jì)。是指所出現(xiàn)的元素和諧統(tǒng)一。

即便是裝飾性的設(shè)計(jì),也是符合整個(gè)畫(huà)面基調(diào),不會(huì)出現(xiàn)違和感的元素(色彩、字體、圖形等)。

上面的圖十,即便簡(jiǎn)潔,但是卻有一種山寨感,就是因?yàn)樵兀ㄎ淖值淖煮w)與畫(huà)面風(fēng)格不統(tǒng)一。商務(wù)感的灰色背景與虛線,卻搭配上了低幼感的字體。

如何設(shè)計(jì)出簡(jiǎn)潔,但又有細(xì)節(jié)感的界面?

第一步:學(xué)會(huì)做加法

積累屬于你自己的素材庫(kù)。

我有屬于自己的素材庫(kù),那就是我的腦子。 我平時(shí)看得很多。不同于看過(guò)就算了的過(guò)眼浮略。我每次看到覺(jué)得不錯(cuò)的設(shè)計(jì),我一定會(huì)反復(fù)的問(wèn)自己,為什么我會(huì)覺(jué)得這個(gè)設(shè)計(jì)不錯(cuò)?是配色打動(dòng)了我?字體選擇的很好?構(gòu)圖很好?模特很漂亮?總之,我會(huì)不斷的問(wèn)自己很多問(wèn)題,直到清楚究竟。然后,再將我覺(jué)得不錯(cuò)這部分記憶下來(lái)。存入我腦中的素材庫(kù)里。 時(shí)間久了,我腦子里光是標(biāo)題文字的處理形式,毫不夸張的說(shuō),起碼有成千上萬(wàn)種。再將這些設(shè)計(jì)處理方式任意進(jìn)行組合排列,我都可以演變出數(shù)百萬(wàn)種新的裝飾手法。

這一部分的心得:

在我看來(lái),買(mǎi)什么書(shū)來(lái)學(xué),并不是最重要的。

重要的是,你帶著怎么樣的眼光來(lái)看待問(wèn)題和學(xué)習(xí)。

有一天,我與一個(gè)做廣告工程的朋友在路上行走,我們同時(shí)觀察到路邊的一個(gè)車(chē)站廣告牌。他在乎的是,那個(gè)鋼結(jié)構(gòu)廣告牌的結(jié)構(gòu)原理;而我則看上了畫(huà)面中大美女的奇尺大乳!

因此,我的建議是,隨手拿起你購(gòu)買(mǎi)的報(bào)紙,帶著思考與疑問(wèn)去閱讀。

1. 當(dāng)你感覺(jué)閱讀比較順暢時(shí),你應(yīng)該思考,到底是哪些方面讓你感覺(jué)順暢?是文字的行距還是文字的間距。

2. 當(dāng)你感覺(jué)閱讀輕松時(shí),你應(yīng)該思考,到底是哪些方面讓你感覺(jué)輕松?是字號(hào)的大小剛好,還是文字顏色選擇的復(fù)合你的習(xí)慣?

3. 當(dāng)你對(duì)某則新聞內(nèi)容深信不疑時(shí),你應(yīng)該思考,到底是文章的內(nèi)容有理有據(jù),還是標(biāo)題字體的選擇讓你覺(jué)得中規(guī)中矩的認(rèn)可?

以下就不再一一列舉。只你帶著發(fā)現(xiàn)與思考的眼光去閱讀,哪怕新華字典都會(huì)是你學(xué)習(xí)版式設(shè)計(jì)的好老師。

帶著疑問(wèn)去觀察,去學(xué)習(xí),去記憶。將別人的變成自己的,在腦中,積累屬于你自己的素材庫(kù)。

第二步:學(xué)會(huì)做減法

學(xué)會(huì)發(fā)現(xiàn)問(wèn)題,避免這些問(wèn)題出現(xiàn)在自己的設(shè)計(jì)中,就是在做減法。

看得多了,腦子會(huì)亂。在學(xué)習(xí)的時(shí)候,除了知道要吸取什么,也要知道丟棄什么。

圖十一:

一個(gè)字體,圓圓潤(rùn)潤(rùn),可以用在輕快年輕化的設(shè)計(jì)上,這是我們必須知道的。 但同時(shí),我們也必須知道,它是不能用在嚴(yán)謹(jǐn)與特別正式的商務(wù)場(chǎng)合里。

圖十二:

圖十三:

知道不能怎么做,與知道要怎么做,同樣重要!

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

1. 先積累屬于你自己的素材庫(kù),這樣你可以解決缺乏細(xì)節(jié)的問(wèn)題。

2. 再通過(guò)尋找素材(裝飾設(shè)計(jì)手法)中的規(guī)律,去解決簡(jiǎn)潔的問(wèn)題。

素材(構(gòu)圖、色彩、圖形、字體等等)之間關(guān)系和諧統(tǒng)一了,設(shè)計(jì)便自然簡(jiǎn)潔了!

希望我的回答對(duì)你有幫助。


本文名稱(chēng):怎么樣讓用戶覺(jué)得簡(jiǎn)潔的界面有細(xì)節(jié)?
文章源于:http://m.rwnh.cn/news48/46148.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、網(wǎng)站收錄、App開(kāi)發(fā)、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)企業(yè)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)
山阳县| 比如县| 平江县| 哈密市| 外汇| 余庆县| 斗六市| 濮阳县| 正宁县| 高唐县| 徐汇区| 崇仁县| 瓦房店市| 洱源县| 平潭县| 阆中市| 三河市| 通州市| 陆川县| 峡江县| 隆尧县| 慈利县| 车险| 东明县| 巨鹿县| 丰原市| 凭祥市| 容城县| 南康市| 道孚县| 阜宁县| 阿合奇县| 项城市| 萝北县| 娱乐| 靖州| 剑河县| 新晃| 华蓥市| 嘉兴市| 大安市|