小说排行榜完结版,玄幻小说完本,古风君子以泽

好的網(wǎng)站設(shè)計(jì)需要視覺(jué)和文字的和諧

2011-08-09 15:08:21

原來(lái)把題目定為“視覺(jué)與文字”，但是又覺(jué)得這題目似乎有點(diǎn)過(guò)大，怕用了專業(yè)的標(biāo)題卻寫出非專業(yè)的文章。而我無(wú)意暫時(shí)也沒(méi)有能力去對(duì)視覺(jué)一些細(xì)節(jié)做極為專業(yè)的考究，只希望通過(guò)自己一些學(xué)習(xí)和了解來(lái)加深自己對(duì)美的判斷吧。其實(shí)文字本身就是一種視覺(jué)語(yǔ)言，它把現(xiàn)實(shí)世界的所有事物，都以字的形式來(lái)進(jìn)行了表現(xiàn)。曾經(jīng)讀過(guò)一篇文章，說(shuō)在傳統(tǒng)的版式設(shè)計(jì)中，設(shè)計(jì)師們更喜歡做英文的排版，因?yàn)閺囊曈X(jué)上來(lái)看，英文很容易形成線和面的關(guān)系，且字母有節(jié)奏感，比如aby這三個(gè)字母放一起有高矮區(qū)別；而中文相對(duì)來(lái)說(shuō)，單調(diào)、孤立、不流暢。特別有道理，但在此之前，我在看到一個(gè)頁(yè)面只會(huì)說(shuō)好不好看、怪不怪，從來(lái)沒(méi)有想到過(guò)這些原因。好的網(wǎng)站設(shè)計(jì)需要視覺(jué)和文字的和諧，下面就是我的一些理解，當(dāng)然其中也有向設(shè)計(jì)師討教后的結(jié)論，若有不對(duì)，也是學(xué)習(xí)過(guò)程中的不可避免的吧：）

1、一致性

設(shè)計(jì)在同一產(chǎn)品（甚至同類產(chǎn)品）中應(yīng)保持一致性，這樣可以大大降低用戶的理解成本，使用戶快速上手，增加用戶的使用率。這個(gè)一致性包括內(nèi)容、顏色、形狀、操作方式等，比如在不同的頁(yè)面使用同樣的翻頁(yè)等，既可以降低成本，又能幫助用戶形成良好的習(xí)慣，到一定的程度，甚至?xí)嵘粋€(gè)品牌的認(rèn)知。

•采用統(tǒng)一樣式、大小的button（顏色、文字的內(nèi)邊距等）；
•文字采用統(tǒng)一的字體、字號(hào)、粗細(xì)等（根據(jù)不同的內(nèi)容等級(jí)來(lái)決定）；
•鏈接不同狀態(tài)文字的顏色統(tǒng)一（link\visited\hover\active）；
•采用統(tǒng)一的標(biāo)點(diǎn)、間距、邊距、行高等。
（具體可見(jiàn)視覺(jué)規(guī)范)

但，文字的位置要符合會(huì)員的整體閱讀習(xí)慣和整體視覺(jué)效果，不一定是固定放在某個(gè)位置的。如下圖，同樣是“更多”，前者由于排行有3大類，一行已經(jīng)占滿，所以放在模塊的右下角；而后者是順著會(huì)員的思路，在右上角給出提示。

2、色彩

用戶看到一個(gè)網(wǎng)站，首先沖擊他眼球的就是界面整體的色彩，然后才是其中的內(nèi)容、文字等。就好像聽一首歌，首先你肯定是被這首歌的旋律所吸引，然后才想要去聽清楚它的歌詞，進(jìn)而引起共鳴。營(yíng)銷學(xué)中著名的“7秒定律”就有說(shuō)到：消費(fèi)者會(huì)在7秒內(nèi)決定其購(gòu)買意愿，而在這短短7秒內(nèi)色彩占67%的決定因素。所以用戶對(duì)頁(yè)面中色彩的關(guān)注度是非常高的，有效的運(yùn)用色彩來(lái)區(qū)分信息的級(jí)別、分類等，有助于幫助用戶對(duì)信息和操作產(chǎn)生關(guān)聯(lián)，減少用戶的記憶負(fù)擔(dān)。

•同一頁(yè)面中一般采用1種主色調(diào)，1-2種輔助色，再加1種小面積的點(diǎn)睛色，即同時(shí)出現(xiàn)的顏色一般不超過(guò)4種；
•主色調(diào)的選擇由產(chǎn)品性格決定。色彩也是有性格和情緒的，因此會(huì)吸引不同性格的人，理解不同的情緒。在設(shè)計(jì)頁(yè)面之前，經(jīng)常聽到有PD說(shuō)我希望這個(gè)頁(yè)面的風(fēng)格是大氣、時(shí)尚、活潑的……我想設(shè)計(jì)師一聽到這些詞應(yīng)該馬上就會(huì)在腦海里蹦出幾個(gè)跟這些關(guān)鍵字匹配的色彩。已經(jīng)有許多的視覺(jué)設(shè)計(jì)前輩，根據(jù)長(zhǎng)期的經(jīng)驗(yàn)和用戶調(diào)研總結(jié)出了類似下圖的表格，根據(jù)這些人們已認(rèn)知的色彩情感，會(huì)更容易引起用戶的共鳴和信賴感。因此，設(shè)計(jì)師在考慮色彩時(shí)一定要依附于產(chǎn)品，并注意對(duì)用戶心理和文化的影響。比如口碑目前的主色調(diào)采用橙色，所代表的就是熱情、活躍和熱烈的感覺(jué)；

•合理搭配顏色，使用對(duì)比度明顯的顏色，指導(dǎo)用戶看到最重要的信息，如在深色的背景中使用淺色的文字；
•根據(jù)不同的產(chǎn)品使用場(chǎng)景，選擇合適的顏色，如管理頁(yè)面經(jīng)常使用藍(lán)色。

3、圖形圖標(biāo)

我一直認(rèn)為好的圖形表達(dá)是優(yōu)于文字的，有時(shí)候大段的文字解釋不僅不能給用戶帶來(lái)幫助，還容易影響頁(yè)面的美觀；相對(duì)于單純的文字，圖形以及符號(hào)化的圖標(biāo)更符合用戶的認(rèn)知習(xí)慣。要表達(dá)一種信息，往往一張圖片或一個(gè)標(biāo)識(shí)更能讓不同用戶理解與接受。適當(dāng)?shù)氖褂脠D形與符號(hào)化的圖標(biāo)，會(huì)讓用戶很自然的建立起認(rèn)知習(xí)慣。

但是圖形如果沒(méi)有把內(nèi)容表示清楚，則會(huì)適得其反，給用戶造成理解上的困擾。很多情況下，我們好像都很喜歡做一些很炫的icon來(lái)表達(dá)某些內(nèi)容，這些的確會(huì)起到一定的吸引性，但是最重要的一點(diǎn)是：不讓用戶思考，要夠直觀，夠明了，不對(duì)用戶理解內(nèi)容產(chǎn)生干擾，如果做不到，那還不如不要。所以：

•圖形圖標(biāo)表意要清晰、明確，要有高度的概括性與指向性，讓用戶能夠快速聯(lián)想到對(duì)應(yīng)的功能和操作；
•同類信息的圖形圖標(biāo)，在形式和風(fēng)格上應(yīng)盡量保持一致；
•圖形圖標(biāo)的使用要注意場(chǎng)合，避免濫用，僅在需要突出重要信息，用戶可能產(chǎn)生理解偏差的情況下使用；
•圖形圖標(biāo)要盡量與文本結(jié)合使用。

視覺(jué)是文案隱形的幕后推手、是文案的媒婆，2者有機(jī)的結(jié)合才能講述給會(huì)員一個(gè)完整的故事。前面是我理解的文案在視覺(jué)中的規(guī)范，而這些則是我理解的文案與視覺(jué)更深層次的關(guān)系。他們不是簡(jiǎn)單的相互解釋，而是用各自的語(yǔ)言來(lái)創(chuàng)造想象的空間，用清晰、有創(chuàng)意的文案和設(shè)計(jì)來(lái)引導(dǎo)會(huì)員的點(diǎn)擊，教會(huì)他們?cè)诰W(wǎng)站的習(xí)慣。