成都
新都
廣告咨詢：13518216051 18982086780
前一(yi)段時間在企業管理界流行一句格(ge)言叫”細節決定成败”。企業(ye)管理当(dang)然不是我們这里要討论的主題，但是，把这句(ju)話放在網頁設計(ji)当中的確是颠扑不破的真理。我們的眼(yan)睛和感覺(jue)总是非常敏銳的，即使(shi)是完全不了解網頁設計技術的人也能够从一堆拙劣的設計作(zuo)品当中挑選出那一個優秀的設計作品。
虽然他說不出來為什麼这(zhe)件东西比(bi)那些都好，但是直覺會告訴他他自(zi)己喜欢哪一個。如果別人向我們問起為什麼这件作品(pin)要(yao)優於其它呢？我們的回答是”很(hen)大一部分原因是因為優秀的設計作品总是充满了豐富的細節(jie)。”在这篇文章里(li)，我們就从技術的角度出发，以PremiumPixels上的(de)Redux WordPress主題設計作品為(wei)例，來总結一下在網頁設計中到底是哪些細節(jie)讓優秀的作品脱颖(ying)而出。
一、1像素的衬線
在頁面的顶端，你能(neng)看到一(yi)条1個像素比背(bei)景顏色略浅的水平線將純色的背(bei)景和带有材質的背景分隔開，如下圖：
而如果(guo)没有这条衬線會(hui)是怎樣的一個效果，我們也來看(kan)看。
實际上(shang)，網頁設計中，使用(yong)到衬線的例子非常普遍。例(li)如下面的这個例子中(zhong)，你會在(zai)包围着(zhe)”The Dorchester Hotel”文(wen)字的黑色边框的顶部向下1個像(xiang)素发現一条灰色的衬線。
在这個精心設計的交互按钮中，綠色(se)和黄色边框顶(ding)部向下1個(ge)像素的位(wei)置可以清晰看到一条色調更浅的線条。这条衬(chen)線的製作工藝相当精細(xi)，設計(ji)師通過應用蒙(meng)版技術實現了渐進式的視覺效果，使得(de)从顶部向下觀察時，该衬線會逐渐隐(yin)去，形成立(li)體感十足的視覺(jue)層次。此外，在"Add To Cart"和"$9.99"兩(liang)個元素之間的分隔線設計(ji)采用了雙線結構，左侧(ce)線条顏色相(xiang)對深沉，右侧線条則顯得较為浅(qian)淡。
之所(suo)以要在設計中使用衬線，是(shi)為了在二維平面上體現物體的立體感與空間(jian)深度，而这種立體感的真實表現必须依靠阴影和高光(guang)兩個關键要素的配(pei)合。在實际的設(she)計工(gong)作流程中，阴影效果通常通過圖層樣式功能來(lai)快速實現，而高光效果的(de)呈現，最為常用的技(ji)巧之(zhi)一就是合理運用衬線了。觀察上面提供的三個具體例(li)子可以看出，这些衬線都(dou)被放置在物體(ti)的顶部位置，这(zhe)種布局方式直(zhi)觀地說明了光線方向是从上向下照射的，相應的高光也就自然出現在物體(ti)的顶部區域。反(fan)之，假設光源(yuan)來自下方向上照射的情(qing)况，那麼高光就應该随之出現在物體的(de)底部(bu)，此時我(wo)們就必须把衬線調(diao)整並放置於物體的下方區域，使光影關系保持逻輯(ji)上的(de)一致性。
二、細微的材質
Redux主題(ti)在視覺呈(cheng)現層面展現了材質運用的典範意義。该設計方案在整個頁(ye)面縱向布局中，分(fen)阶段應用了(le)三種差异化的背景材質來構建視覺層次。上方的深(shen)藍色區域采(cai)用了具有凹凸起伏特征的纹理材質，这種粗糙感(gan)能够增強視覺的沉浸度；中間(jian)的黑色部分則融合了紡織布料的(de)細密纹理，柔和的(de)布纹質感為頁(ye)面带來温度感；而底部(bu)則融入了雜色混合(he)材質，三個層級通過遞進式的材質變化形成完整的視覺语言體系。值(zhi)得注意的是，这三種(zhong)材質(zhi)虽然都屬於精細化處理的程度，但叠(die)加后的視覺效果卻能够有效支(zhi)撐整體設計表達。
三、柔和的渐變
在您眼(yan)前(qian)的圖片中，那些文字框是否呈(cheng)現出了一種飽满的立體感，仿佛要从屏幕中凸起來？这正是(shi)渐變效果所带來(lai)的視覺魔力。試想一(yi)下，如果文字框仅仅采(cai)用單調的白色平(ping)面呈現，整個頁面(mian)的視覺層次就會顯得平淡无趣(qu)。
另(ling)外，在頁面的左右边缘部分也(ye)應用了从純色背景到材質背景的渐變效果(guo)，这樣會讓深藍色凹凸不平(ping)的背(bei)景材質出現得更加自然，形成視覺上的(de)過渡層(ceng)次。在實(shi)际的渐變設計應用中需要(yao)注意的是，除某些(xie)特殊情况外，不要使用過於強烈的渐(jian)變(bian)處理，无(wu)论是在色相變(bian)化上、亮度變化上還是飽和度變化上都(dou)不可設置跨度過大。因為这樣強烈(lie)的過渡(du)效果根本无法呈現真實的視覺感受，反而會給用戶(hu)带來一種不舒適的觀感體驗，破(po)坏整體的設計(ji)和諧度。
四、微妙的阴影
在觀察Redux这類現代Web應用界面時，注意(yi)暗色背景上(shang)的浅色文字設計，你會发現它們普遍被添加(jia)上了投影效果(guo)，这是提升文字(zi)可讀性和視覺層次的常见手法(fa)。現(xian)在我們可以使用CSS3中(zhong)的text-shadow屬性來完成文字的投影設(she)計，这種(zhong)方式代替了傳統在Photoshop中逐一(yi)完成此項工(gong)作的流程，大幅(fu)提升了設計和開发的效率(lv)。使(shi)用CSS3來給文字添加阴(yin)影具有更(geng)高的自由度，在現代浏覽器支(zhi)持的情况下(xia)，開发者可以給(gei)任意文字添加想要的阴影效果(guo)，甚至支持多層投影的(de)复雜設(she)計，為(wei)界面細節優化提供了灵活的手段。不過值得注意(yi)的(de)是，IE8以下版本的浏(liu)覽器是不支持此項屬性的(de)，这是我們在跨浏覽器兼容性(xing)設計(ji)中需要重點關注的地方。
