10個(gè)精致的企業(yè)網(wǎng)站設(shè)計(jì)模板賞析(2)
二、傳統(tǒng)頁面式居中布局
1、和前一個(gè)設(shè)計(jì)類似,這個(gè)設(shè)計(jì)中的色彩思路是,整個(gè)設(shè)計(jì)灰度偏暗并且各層次之間反差較小,營造一種平靜的基調(diào),用亮度和飽和度較高的色彩跳出,打破整體灰色的沉悶,也讓使用了色彩的信息文字更為醒目。
2、主視覺部分幻燈片的樣式,包括當(dāng)前圖片狀態(tài)(左下角小圓圈)、幻燈切換按鈕(左右箭頭)以及文案的表現(xiàn)方式可以作為一種設(shè)計(jì)方式參考。
3、行為請(qǐng)求按鈕區(qū)域(Buy Now)功能上的重要性在視覺設(shè)計(jì)上也得到了突出,區(qū)別于其他區(qū)域,這部分的背景添加了斜紋的材質(zhì),色彩上也更深一些。其他區(qū)域,例如下面的Portfolio和Our Service信息區(qū)域部分用1像素的線隔開,既體現(xiàn)出隸屬于不同的區(qū)域,又不割裂個(gè)區(qū)域之間的關(guān)系。
4、深色背景下的圖片邊框設(shè)計(jì)方式很簡單,加一個(gè)亮度稍高一點(diǎn)的色彩就可以了。
5、信息關(guān)系差別較大的區(qū)域,例如底部的最新評(píng)論、最新小工具、關(guān)于我們以及聯(lián)系表單部分用不同灰度的背景色彩區(qū)分開,并且在邊緣用較寬的線條分割和過度。此處的圖片邊框使用了較背景更深的顏色,但添加了1像素亮度高于背景的外邊框。從整體上看,此區(qū)域的重要性較低,所以你可以觀察到聯(lián)系表單的文字框并沒有添加內(nèi)陰影,提交按鈕沒有應(yīng)用任何圖層樣式,這就是功能性在視覺設(shè)計(jì)上的表現(xiàn)。
6、白色的設(shè)計(jì)方案比深灰色的設(shè)計(jì)看上去更干凈清爽,導(dǎo)航和行為請(qǐng)求部分用亮度較高的灰色區(qū)別,同樣和背景顏色差別不大,讓頁面看上去更為清爽干凈。
本文地址:http://www.likemindfilms.com/tutorial/de1140.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏