網(wǎng)頁(yè)制作設計初步:一致性,色彩,圖形圖標

 

文字本身是一種視覺(jué)語(yǔ)言，它把現實(shí)世界的所有事物，都以字的形式來(lái)進(jìn)行了表現。曾經(jīng)讀過(guò)一篇文章，說(shuō)在傳統的版式設計中，設計師們更喜歡做英文的排版，因 為從視覺(jué)上來(lái)看，英文很容易形成線(xiàn)和面的關(guān)系，且字母有節奏感，比如aby這三個(gè)字母放一起有高矮區別；而中文相對來(lái)說(shuō)，單調、孤立、不流暢。

1、一致性
設計在同一產(chǎn)品（甚至同類(lèi)產(chǎn)品）中應保持一致性，這樣可以大大降低用戶(hù)的理解成本，使用戶(hù)快速上手，增加用戶(hù)的使用率。這個(gè)一致性包括內容、顏色、形狀、 操作方式等，比如在不同的頁(yè)面使用同樣的翻頁(yè)等，既可以降低成本，又能幫助用戶(hù)形成良好的習慣，到一定的程度，甚至會(huì )提升一個(gè)品牌的認知。
--采用統一樣式、大小的button（顏色、文字的內邊距等）；
--文字采用統一的字體、字號、粗細等（根據不同的內容等級來(lái)決定）；
--鏈接不同狀態(tài)文字的顏色統一（link\visited\hover\active）；
--采用統一的標點(diǎn)、間距、邊距、行高等。

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

2、色彩
用戶(hù)看到一個(gè)網(wǎng)站，首先沖擊他眼球的就是界面整體的色彩，然后才是其中的內容、文字等。就好像聽(tīng)一首歌，首先你肯定是被這首歌的旋律所吸引，然后才想要去 聽(tīng)清楚它的歌詞，進(jìn)而引起共鳴。營(yíng)銷(xiāo)學(xué)中著(zhù)名的“7秒定律”就有說(shuō)到：消費者會(huì )在7秒內決定其購買(mǎi)意愿，而在這短短7秒內色彩占67%的決定因素。所以用 戶(hù)對頁(yè)面中色彩的關(guān)注度是非常高的，有效的運用色彩來(lái)區分信息的級別、分類(lèi)等，有助于幫助用戶(hù)對信息和操作產(chǎn)生關(guān)聯(lián)，減少用戶(hù)的記憶負擔。
--同一頁(yè)面中一般采用1種主色調，1-2種輔助色，再加1種小面積的點(diǎn)睛色，即同時(shí)出現的顏色一般不超過(guò)4種；
--主色調的選擇由產(chǎn)品性格決定。色彩也是有性格和情緒的，因此會(huì )吸引不同性格的人，理解不同的情緒。在設計頁(yè)面之前，經(jīng)常聽(tīng)到有PD說(shuō)我希望這個(gè)頁(yè)面的風(fēng)格是大氣、時(shí)尚、活潑的……

我想設計師一聽(tīng)到這些詞應該馬上就會(huì )在腦海里蹦出幾個(gè)跟這些關(guān)鍵字匹配的色彩。已經(jīng)有許多的視覺(jué)設計前輩，根據長(cháng)期的經(jīng)驗和用戶(hù)調研總結出了類(lèi)似下圖的表 格，根據這些人們已認知的色彩情感，會(huì )更容易引起用戶(hù)的共鳴和信賴(lài)感。因此，設計師在考慮色彩時(shí)一定要依附于產(chǎn)品，并注意對用戶(hù)心理和文化的影響。比如口 碑目前的主色調采用橙色，所代表的就是熱情、活躍和熱烈的感覺(jué)；

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

3、圖形圖標
我一直認為好的圖形表達是優(yōu)于文字的，有時(shí)候大段的文字解釋不僅不能給用戶(hù)帶來(lái)幫助，還容易影響頁(yè)面的美觀(guān)；相對于單純的文字，圖形以及符號化的圖標更符 合用戶(hù)的認知習慣。要表達一種信息，往往一張圖片或一個(gè)標識更能讓不同用戶(hù)理解與接受。適當的使用圖形與符號化的圖標，會(huì )讓用戶(hù)很自然的建立起認知習慣。
但是圖形如果沒(méi)有把內容表示清楚，則會(huì )適得其反，給用戶(hù)造成理解上的困擾。很多情況下，我們好像都很喜歡做一些很炫的icon來(lái)表達某些內容，這些的確會(huì ) 起到一定的吸引性，但是最重要的一點(diǎn)是：不讓用戶(hù)思考，要夠直觀(guān)，夠明了，不對用戶(hù)理解內容產(chǎn)生干擾，如果做不到，那還不如不要。所以：
--圖形圖標表意要清晰、明確，要有高度的概括性與指向性，讓用戶(hù)能夠快速聯(lián)想到對應的功能和操作；
--同類(lèi)信息的圖形圖標，在形式和風(fēng)格上應盡量保持一致；
--圖形圖標的使用要注意場(chǎng)合，避免濫用，僅在需要突出重要信息，用戶(hù)可能產(chǎn)生理解偏差的情況下使用；
--圖形圖標要盡量與文本結合使用。
視覺(jué)是文案隱形的幕后推手、是文案的媒婆，2者有機的結合才能講述給會(huì )員一個(gè)完整的故事。前面是我理解的文案在視覺(jué)中的規范，而這些則是我理解的文案與視覺(jué)更深層次的關(guān)系。

大連仟億科技、大連網(wǎng)站建設、大連網(wǎng)站制作、大連網(wǎng)頁(yè)制作、大連網(wǎng)頁(yè)設計、大連網(wǎng)站設計、大連網(wǎng)站推廣、大連軟件開(kāi)發(fā)、大連網(wǎng)絡(luò )公司

---