激情五月天婷婷,亚洲愉拍一区二区三区,日韩视频一区,a√天堂中文官网8

<ul id="buwfs"><strike id="buwfs"><strong id="buwfs"></strong></strike></ul>
    <output id="buwfs"></output>
  • <dfn id="buwfs"><source id="buwfs"></source></dfn>
      <dfn id="buwfs"><td id="buwfs"></td></dfn>
      <div id="buwfs"><small id="buwfs"></small></div>
      <dfn id="buwfs"><source id="buwfs"></source></dfn>
      1. <dfn id="buwfs"><td id="buwfs"></td></dfn>
        始創(chuàng)于2000年 股票代碼:831685
        咨詢熱線:0371-60135900 注冊(cè)有禮 登錄
        • 掛牌上市企業(yè)
        • 60秒人工響應(yīng)
        • 99.99%連通率
        • 7*24h人工
        • 故障100倍補(bǔ)償
        全部產(chǎn)品
        您的位置: 網(wǎng)站首頁(yè) > 幫助中心>文章內(nèi)容

        網(wǎng)站設(shè)計(jì):十個(gè)簡(jiǎn)單好用的設(shè)計(jì)技巧

        發(fā)布時(shí)間:  2012/9/13 14:49:46
         文中強(qiáng)調(diào)復(fù)雜的高級(jí)效果能為設(shè)計(jì)增色不少,但如果用得不對(duì),只會(huì)影響用戶對(duì)重點(diǎn)內(nèi)容的關(guān)注。高級(jí)效果可能正好是一項(xiàng)好的設(shè)計(jì)的沖擊力所在,但即便如此,也還是需要一些更簡(jiǎn)單的效果與其配合。

          簡(jiǎn)單的效果和技巧是建造當(dāng)今設(shè)計(jì)的基石。比方說(shuō),如果你都不知道如何正確選擇顏色和文字效果,燦爛的 星光效果又能有什么用?

          本著“少就是多”的理念,通過(guò)十個(gè)簡(jiǎn)單好用的設(shè)計(jì)技巧 ,就足以大大提升你設(shè)計(jì)的專業(yè)性和感染力;A(chǔ)先行。 學(xué)會(huì)走之前要先學(xué)會(huì)爬,讓我們從最基礎(chǔ)的簡(jiǎn)單有效設(shè)計(jì)的概念開(kāi)始。

          1. 增加對(duì)比

          很可惜,添加額外的對(duì)比是最被忽視和棄用的技巧之一。

          

         

          Joost de Valk 采用了細(xì)的高對(duì)比度邊線,讓訪客能更容易區(qū)分頁(yè)面的不同區(qū)域。在上圖中放大了的部分,你可以看到,大多數(shù)時(shí)候這種對(duì)比只是一條1像素的高亮線挨著1像素的暗線。

          話說(shuō)回來(lái),這個(gè)頁(yè)面上的“More”和“Go”按鈕與周?chē)膶?duì)比度太小,即使你刻意在找也很容易被忽略掉。

          

         

          WordPress 為頁(yè)面中最受歡迎的鏈接 “Download(下載)” 使用了對(duì)比色。 這種紅色在冷灰色調(diào)的頁(yè)面中自己跳了出來(lái)。但這紅色在明度方面有所收斂,避免了影響頁(yè)面整體效果。

          如果你對(duì)于該不該使用對(duì)比猶豫不決,就把這一決定過(guò)程當(dāng)做是化妝。你要做的不是讓人們大吼“看吶,對(duì)比色!”,你需要的是自然而然的吸引他們注意頁(yè)面中重要的內(nèi)容,高亮出已經(jīng)存在的重點(diǎn)。

          2. 漸變

          技術(shù)的發(fā)展為所有想使用漸變的人提供了各種創(chuàng)造漸變的工具。但漸變真的很好么?

          

         

          Media Temple 網(wǎng)站的每一個(gè)頁(yè)面都使用了漸變,不過(guò)其漸變使用的節(jié)制和精妙才是設(shè)計(jì)成功的關(guān)鍵。logo,大標(biāo)題,按鈕和背景都有細(xì)微的或者鏡像的漸變,以強(qiáng)調(diào)內(nèi)容。最復(fù)雜的漸變用在了那些簡(jiǎn)單的120像素寬的按鈕(子頁(yè)面中的“ACTIVATE”和“LEARN MORE”)上,因?yàn)樗鼈兪切枰L客注意的重點(diǎn)。

          

         

          Commission Junction的漸變運(yùn)用遠(yuǎn)沒(méi)有Media Temple的細(xì)致,而且采用了過(guò)于豐富的漸變類(lèi)型:

          從黑色到灰色的水平線性漸變,位于頁(yè)面頂部

          頁(yè)眉處的綠色徑向漸變

          登陸框背景的“CJ” 標(biāo)志上方模糊的斜向漸變

          輸入框背景中淡淡的垂直線性漸變

          導(dǎo)航條背景的垂直漸變

          Webinar廣告中明亮的線性漸變

          另一個(gè)垂直線性減弱,用在了大標(biāo)題處

          這種設(shè)計(jì)有點(diǎn)冒險(xiǎn),大部分漸變式有用的,但還是存在一些問(wèn)題。最突出的一點(diǎn)是,設(shè)計(jì)喪失了一致性。同選擇可辨性強(qiáng)的色彩組合一樣的道理,設(shè)計(jì)師也需要為每個(gè)項(xiàng)目選擇合適的漸變組合。

          例如,大的水平漸變(1)引導(dǎo)眼睛橫向注視頁(yè)面。這本沒(méi)有什么問(wèn)題,但就在此漸變的正下方又出現(xiàn)了把視線吸引到中心的徑向漸變(2)和把視線引導(dǎo)到右下角的斜向漸變(3)。這會(huì)給訪客造成困擾,起伏變化的視覺(jué)流(visual flow)也削弱了可讀性。

          使用漸變時(shí),保證好的視覺(jué)流很重要:請(qǐng)保守而精致地使用漸變。最重要的一點(diǎn),僅當(dāng)對(duì)整體設(shè)計(jì)有幫助時(shí)才使用漸變。

          3. 色彩

          合理使用顏色很有挑戰(zhàn)性。在挑選完美的色彩組合和為各種色調(diào)找到合適位置的過(guò)程中,時(shí)間嘩啦啦地就流走了。

          

         

          Realmac Software 大膽地在404頁(yè)面采用了全色系漸變。這樣做有以下原因:首先,Realmac已經(jīng)將頁(yè)面背景設(shè)成了中性灰色,更重要的是,頁(yè)面其余部分沒(méi)有明顯的色彩的,除了藍(lán)色的文字鏈接和一些零星的毫無(wú)沖擊力的色彩。

          全譜色彩漸變完美地吸引了人們的注意。它保持了簡(jiǎn)單性,有著灰色的配合,也不會(huì)讓眼睛感到不適。但在一項(xiàng)設(shè)計(jì)中采用四種或五種以上的顏色通常都顯得太過(guò)了。除非你非常確信你的設(shè)計(jì)需要那么多顏色,還是采用簡(jiǎn)單的四色組合比較好。

          

         

          當(dāng)你在設(shè)計(jì)中克制而明智地使用色彩時(shí),吸引訪客對(duì)重要項(xiàng)目的注意力就變得相當(dāng)容易。在Interspire的 “About Us(關(guān)于我們)” 頁(yè)面中,訪客的注意力被迅速吸引到頁(yè)面頂部LOGO那紅色的一點(diǎn)上,然后是標(biāo)題,然后是頁(yè)面右邊的LOGO照片。

          在字體上花點(diǎn)功夫。字體的藝術(shù)博大精深,遠(yuǎn)遠(yuǎn)超出我們大部分人的想象。字體中超出x高度部分(ascenders )和邊位(side bearings)處的創(chuàng)作空間巨大,你可以在此處添加一些有趣的細(xì)節(jié)。不過(guò)還是運(yùn)用接下來(lái)的一些技巧更重要。

          4. 字符間距

          字符間距,或者稱為字距調(diào)整 (kerning),能對(duì)標(biāo)題、段落、logo等文字相關(guān)內(nèi)容造成巨大影響。其遠(yuǎn)不止每個(gè)字符之間的距離那么簡(jiǎn)單。

          

         

          Krop’s 的新作品集創(chuàng)建器,在處理文字的時(shí)候,十分吝嗇空間。該網(wǎng)站上大部分基于文字的圖片中的字符間距都很小,使敘述內(nèi)容顯得更為簡(jiǎn)潔有力。

          

         

          上圖表現(xiàn)了字符間距對(duì)你的設(shè)計(jì)可能產(chǎn)生的負(fù)面影響。小而無(wú)抗鋸齒的字體如果沒(méi)有適當(dāng)?shù)淖址g距,將更加難以閱讀。

          如果你以前沒(méi)有在意,試試現(xiàn)在對(duì)你設(shè)計(jì)中的字符間距做一些調(diào)整,你會(huì)為調(diào)整后帶來(lái)的不同而震驚。推薦圖片中使用“Myriad Pro” 字體,HTML文字中使用“Trebuchet MS”字體進(jìn)行嘗試。

          5. 大小寫(xiě)

          改變字母大小寫(xiě)不過(guò)是按一下Shift或者Caps Lock鍵的功夫,但很少有設(shè)計(jì)師好好利用了這一技巧的潛能。

          

         

          MSNBC’s 對(duì)大小寫(xiě)的使用很值得參考。logo是全小寫(xiě)的,頁(yè)面其他部分的字體大小寫(xiě)更有著微妙的變化。頁(yè)面上方的大橫幅通告,一般用大寫(xiě)字母寫(xiě)著“WATCH LIVE(觀看直播)”或者 “BREAKING NEWS(最新消息)” 。這些通告都是非常重要的內(nèi)容,這種方式很好地吸引了訪客的注意。

          另外,采用純大寫(xiě)的按鈕,讓他們的小按鈕足夠清楚易讀。 在這種5像素高的應(yīng)用里,小寫(xiě)字母,如a,m, x,可能只有2到3像素高,非常難以辨認(rèn)。

          

         

          繼續(xù)關(guān)注新聞?wù)军c(diǎn), CNN 在字體大小寫(xiě)上缺少變化來(lái)平衡頁(yè)面。導(dǎo)航條是全部大寫(xiě)的,但頁(yè)面中的其余部分則很傳統(tǒng)地幾乎全部采用了首字母大寫(xiě)。

          6. 消鋸齒

          雖然技術(shù)上比較復(fù)雜,消鋸齒仍可以歸納為“使邊緣平滑”,在各種設(shè)計(jì)中都有運(yùn)用到。在Web設(shè)計(jì)的世界里,是否消鋸齒部分決定于文字是要出現(xiàn)在圖片還是HTML文字中。另有一個(gè)讓事情變得復(fù)雜的情況,部分瀏覽器或操作系統(tǒng)會(huì)自動(dòng)在一定程度上消鋸齒,但總的來(lái)說(shuō),HTML文字是不具有抗鋸齒功能的。

          

         

          Stockxpert 非常聰明地在廣告頁(yè)面中部分使用消鋸齒,而部分文字不消鋸齒。大部分文字都有平滑邊緣,但頁(yè)面頂部和底部的小字則保留了鋸齒。同上面說(shuō)的MSNBC按鈕一個(gè)道理,5像素高的文字需要有盡量銳利的邊緣來(lái)保持可讀性。這種情況中的模糊或平滑邊緣會(huì)讓眼睛很累,最終放棄閱讀。

          混搭是王道! 完美的東西一般都顯得很假或者乏味。樹(shù)木的枝葉并不完全對(duì)稱;任何形式的照明都不會(huì)產(chǎn)生平衡的影子;照相機(jī)鏡頭有時(shí)會(huì)讓部分景物模糊,以及產(chǎn)生鏡頭光暈…… 有些設(shè)計(jì)需要干凈的人造風(fēng)格,另一些則需要混搭一點(diǎn)~

          7. 制造瑕疵

          任何人都能在使用一臺(tái)電腦十分鐘后告訴你它并不完美。但在設(shè)計(jì)過(guò)程中,電腦可以為你創(chuàng)造完美的結(jié)果。在你最喜歡的設(shè)計(jì)工具中使用直線工具時(shí),只需要采用默認(rèn)設(shè)置,你就能畫(huà)出特定兩點(diǎn)間的完美直線。

          

         

          這個(gè)懷舊Ace牌的教程提供了很多步驟來(lái)讓這張牌看起來(lái)不完美。不得不說(shuō),這一過(guò)程并不簡(jiǎn)單。不過(guò)其中的概念十分簡(jiǎn)單——讓事物顯得老舊,創(chuàng)造不完美,給你的作品以獨(dú)特的肌理。

          

         

          這張蝴蝶照片看起來(lái)就像是20世紀(jì)中期拍攝的,另一個(gè)不完美的例子。其實(shí)它是用數(shù)碼相機(jī)拍攝的,使用了一些濾鏡和顏色調(diào)整,賦予其懷舊效果。

          為設(shè)計(jì)創(chuàng)造藝術(shù)風(fēng)格化的瑕疵比你想象中要容易。你只需要將素材變成灰色或褐色,再添加一點(diǎn)細(xì)節(jié)……

          8. 模糊

          如果你還在為如何讓內(nèi)容突出、消隱而一籌莫展,請(qǐng)?jiān)囋嚫鞣N不同的模糊方式。通過(guò)模糊前景、模糊背景,甚至整個(gè)設(shè)計(jì),你可以動(dòng)態(tài)地增加你的項(xiàng)目的沖擊力。模糊的焦點(diǎn),需要至少部分地相關(guān)聯(lián)。通過(guò)模糊一個(gè)元素,焦點(diǎn)被帶向另一內(nèi)容。

          

         

          Ios V2 壁紙使用簡(jiǎn)單的模糊創(chuàng)造平靜的、生機(jī)勃勃的感官。一些明銳的線條用來(lái)形成圖像的焦點(diǎn),而模糊的背景對(duì)于壁紙的整體效果至關(guān)重要。

          

         

          模糊亦可形成深度和層次覆蓋的感覺(jué)。 Windows Vista的Aero效果將窗口后面的內(nèi)容模糊掉,形成很酷的漫反射玻璃效果。使用高斯模糊 即可創(chuàng)造類(lèi)似效果。

          9. 對(duì)齊

          即使我們強(qiáng)調(diào)保證整潔和直線,你仍然有需要為你的設(shè)計(jì)添加一些額外趣味。

          

         

          這個(gè)示例標(biāo)志中的“logo”幾個(gè)字母被提到了右上角。更改設(shè)計(jì)元素的對(duì)齊方式可以讓它們更容易被記住,更容易被人們討論起,結(jié)果是讓整個(gè)設(shè)計(jì)更高效。

          這一技巧并不只是用于文字。部分設(shè)計(jì)師在思考一項(xiàng)設(shè)計(jì)概念時(shí)會(huì)利用模板化內(nèi)容或者個(gè)人工作習(xí)慣。這可以加快給客戶回應(yīng)的速度,但也經(jīng)常會(huì)限制了創(chuàng)意——尤其是在內(nèi)容對(duì)齊方面。

          

         

          Icon Designer通過(guò)旋轉(zhuǎn)某些元素讓自己與眾不同。這一頁(yè)面很容易成為稀松平常的無(wú)聊之作,但簡(jiǎn)單的幾個(gè)旋轉(zhuǎn)讓它趣味十足。

          現(xiàn)在的網(wǎng)頁(yè)大部分是700到900像素寬,一般在瀏覽器中居中,并且是方盒子式的構(gòu)造。大部分案例中,這樣做使內(nèi)容安排有序,但也有一些站點(diǎn),需要設(shè)計(jì)師考慮跳出盒子,創(chuàng)造特色。

          接下來(lái),最重要的是…

          10. 消除累贅

          這可能是最重要也最被忽視的設(shè)計(jì)技巧了。去掉不必要的部分,也是最難做的部分之一。

          

         

          通過(guò)去掉所有不必要的部分, CSS Remix只留下了必要部分,可以同時(shí)展示7個(gè)大廣告 (128 * 96 像素),,53個(gè)favico廣告 (16 *16 像素) ,以及一大群網(wǎng)站(56個(gè))——全部在頁(yè)面上方1000像素內(nèi)!甚至網(wǎng)站的logo都被削減到了53乘 7 像素。

          生活中也是如此,好事做得太好就不是一件好事了。上面的logo太小以至于難以辨認(rèn),特色站點(diǎn)也難以同彼此區(qū)分開(kāi)來(lái)。奇怪的是,頁(yè)面頂部的Twitter feed,相對(duì)于站點(diǎn)logo和導(dǎo)航來(lái),又過(guò)分突出。


        本文出自:億恩科技【mszdt.com】

        服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)!虛擬主機(jī)域名注冊(cè)頂級(jí)提供商!15年品質(zhì)保障!--億恩科技[ENKJ.COM]

      2. 您可能在找
      3. 億恩北京公司:
      4. 經(jīng)營(yíng)性ICP/ISP證:京B2-20150015
      5. 億恩鄭州公司:
      6. 經(jīng)營(yíng)性ICP/ISP/IDC證:豫B1.B2-20060070
      7. 億恩南昌公司:
      8. 經(jīng)營(yíng)性ICP/ISP證:贛B2-20080012
      9. 服務(wù)器/云主機(jī) 24小時(shí)售后服務(wù)電話:0371-60135900
      10. 虛擬主機(jī)/智能建站 24小時(shí)售后服務(wù)電話:0371-60135900
      11. 專注服務(wù)器托管17年
        掃掃關(guān)注-微信公眾號(hào)
        0371-60135900
        Copyright© 1999-2019 ENKJ All Rights Reserved 億恩科技 版權(quán)所有  地址:鄭州市高新區(qū)翠竹街1號(hào)總部企業(yè)基地億恩大廈  法律顧問(wèn):河南亞太人律師事務(wù)所郝建鋒、杜慧月律師   京公網(wǎng)安備41019702002023號(hào)
          0
         
         
         
         

        0371-60135900
        7*24小時(shí)客服服務(wù)熱線