• <small id="63y1u"><samp id="63y1u"></samp></small>

      1. Telephone
        15063366547
        QQ
        286601999

        濟(jì)南網(wǎng)站建設(shè):網(wǎng)頁設(shè)計(jì)中的幾大定律

        發(fā)表時(shí)間:2015-09-03 13:25?? 作者:銳尚?? 瀏覽:
        不論畫冊(cè)設(shè)計(jì)、海報(bào)、品牌設(shè)計(jì),所有設(shè)計(jì)都是有規(guī)律可循的。然而,在網(wǎng)頁設(shè)計(jì)這邊,很多本應(yīng)該有的規(guī)則都被搞亂了,就只是跟著感覺走。這并不是說設(shè)計(jì)師在規(guī)則方面有松懈,而是大多數(shù)網(wǎng)絡(luò)工作者都不知道要遵守這些規(guī)則——就算他們知道,也不知道怎么去用。
         
        結(jié)合網(wǎng)頁講,就是以下幾條:
         
        平 衡
         
        平衡感挺難拿捏的。網(wǎng)頁上呈現(xiàn)出的平衡有兩種——對(duì)稱和不對(duì)稱。我們都很習(xí)慣了看對(duì)稱的圖片,就像我們小時(shí)候剪紙花,都會(huì)兩邊一起剪,這樣打開就是對(duì)稱化的。這種對(duì)稱的平衡很好識(shí)別(反正都鏡面反射一下),而在不對(duì)稱構(gòu)圖里面做到平衡才難。
         
        舉兩個(gè)例子:

        不對(duì)稱平衡
         
        如圖在多處位置展示了不對(duì)稱平衡里面的一些重要原則。你看,作為主Banner的那只狗的照片——狗身上的黑色全壓在畫面左側(cè)了,這時(shí)候畫面右側(cè)出現(xiàn)了一個(gè)X,這看似隨意的灰色X,可是平衡畫面的關(guān)鍵因素!這樣一來,你的視線就會(huì)被牽扯到畫面中間。除了在Banner圖里面,在網(wǎng)頁的頁頭中也出現(xiàn)了這樣的設(shè)計(jì)——菜單欄的大小和顏色都相對(duì)重。那么在Subtraction的logo這條,就對(duì)應(yīng)用了黑字白底,再在上面加上黑線,這樣上下會(huì)相對(duì)平衡一些。

        對(duì)稱平衡
         
        蘋果是現(xiàn)代網(wǎng)頁中實(shí)現(xiàn)對(duì)稱平衡的典范。如圖,每個(gè)元素都是在中軸線兩側(cè)排布,創(chuàng)造出了一個(gè)視覺上的和諧情景。
         
        比 例
         
        對(duì)于網(wǎng)頁元素來說,并不是看得清楚就好,或者文本多長(zhǎng)就弄多大,它的排布跟網(wǎng)頁的平衡視覺上強(qiáng)調(diào)誰有很大關(guān)系。

        而到底如何去權(quán)衡這些元素的大小,跟每個(gè)元素本身的性質(zhì)有很大關(guān)系,舉個(gè)例子:你在瀏覽兩欄式的網(wǎng)頁的時(shí)候,一般會(huì)發(fā)現(xiàn)右邊的框要比左邊的框大,也放了一些關(guān)鍵的信息在里面。這是由人的視覺習(xí)慣決定——哪怕是文本框放在左側(cè),目錄這些元數(shù)據(jù)放在右側(cè),也會(huì)不自覺的看向右邊。所以說,元數(shù)據(jù)在右邊占地方是不太科學(xué)的。有些人喜歡每欄一樣寬度的柵格布局,就像圖一那樣;另外的人可能喜歡黃金分割率,也就是右邊的框是左邊框的1.62倍。
         
        有些網(wǎng)頁的設(shè)計(jì)也僅僅看重要程度來排比例的:

        在這個(gè)頁面上,各元素的比例控制得很好。不僅是視覺上的層次很好,意義上的層次也很好。從產(chǎn)品的logo開始(1),然后引導(dǎo)用戶的行為(2),再到文字比較密集的相關(guān)介紹(3),排布都很合理。圖文混排的區(qū)域,標(biāo)題的權(quán)重和正文隔開,還有和左側(cè)icon的關(guān)系都很注意。瀏覽這個(gè)頁面的時(shí)候也會(huì)覺得整體非常協(xié)調(diào)。
         
        不過以上這個(gè)例子有點(diǎn)老,網(wǎng)頁展現(xiàn)很平面。
         
        現(xiàn)在的網(wǎng)頁可通過交互設(shè)計(jì)來強(qiáng)化網(wǎng)頁上展現(xiàn)的比例。


        比如這個(gè)國際廣告獎(jiǎng)D&AD的網(wǎng)站,在滑動(dòng)內(nèi)頁時(shí)候,菜單欄占頁面的比例會(huì)相對(duì)縮小,這樣人的注意力會(huì)更集中于中間部分,更注意閱讀內(nèi)容。

        節(jié)奏
         
        網(wǎng)頁上的節(jié)奏感非常重要,甚至比數(shù)據(jù)更重要。尤其那些數(shù)據(jù)量大,頁面長(zhǎng)的網(wǎng)頁。比如這個(gè)叫Digg的網(wǎng)站,頁面上出現(xiàn)了雙目錄,但也是遵循了節(jié)奏感方面的一些原則。


        強(qiáng)調(diào)
         
        在設(shè)計(jì)中,再?zèng)]有比圓形更有魅力的圖案了,尤其是在充斥著四邊形的網(wǎng)頁設(shè)計(jì)領(lǐng)域。一個(gè)圓圈并不需要借助亮眼的顏色或留白,僅僅靠它的形狀特點(diǎn)就能輕松引起用戶的注意。這就是為什么你的眼睛總能被那些最近流行的標(biāo)志所吸引,不過“圓形”最大的魅力其實(shí)還是發(fā)揮在Logo上。

        正如你在圖中所見,A List Apart用了不止一個(gè),而是多組“圓形”來突顯出其Logo。你不僅能通過其旁邊那個(gè)有著發(fā)行編碼的標(biāo)志(1)注意到它,也能通過右手邊幾個(gè)更小的標(biāo)志注意到T恤促銷的信息。
         
        你還可以通過使用”留白“或”顏色“來起到強(qiáng)調(diào)的作用。它們可配合”圖形“使用,但通常情況下你不必用全,一兩個(gè)即可。三個(gè)元素的同時(shí)使用會(huì)造成一種過于夸張的吸引力,讓用戶很難再去注意頁面其他的部分,尤其是主要內(nèi)容。

        整體感
         
        整體感是一個(gè)見仁見智的概念,一種“合而為一”的感受。沒有什么元素是實(shí)在無法符合設(shè)計(jì)氛圍和感覺的。


        關(guān)于整體感有個(gè)重要的例子——Dave Werner的portfolio作品集。其每一頁都有網(wǎng)站手稿、圖釘和其他一些雜七雜八的玩意兒,他把這些元素結(jié)合在一起并且打造出了整體感。既沒有一樣元素顯得過于突兀,也沒有出現(xiàn)迥異的整體風(fēng)格。

        相關(guān)文章/Related

      2. 濟(jì)南建網(wǎng)站并不是越便宜

        企業(yè)建設(shè)營銷型企業(yè)網(wǎng)站,其目的在于銷售產(chǎn)品或者提供服務(wù),如果你沒有一個(gè)...

      3. 國外服裝行業(yè)網(wǎng)站建設(shè)案

        國外的設(shè)計(jì)一直引領(lǐng)世界的潮流,遠(yuǎn)遠(yuǎn)甩中國大陸幾十條街,下面 濟(jì)南網(wǎng)站建...

      4. 淺談濟(jì)南網(wǎng)站建設(shè)響應(yīng)式

        大陸最先出現(xiàn)響應(yīng)式布局 網(wǎng)站建設(shè) 這個(gè)概念還是在2013年左右,當(dāng)時(shí)大陸做這種...

      5. 通過三個(gè)要素檢測(cè)你網(wǎng)站

        今天重點(diǎn)說說用戶體驗(yàn)設(shè)計(jì)中最關(guān)鍵的三個(gè)要素:別讓我等!別讓我想!別讓我...

      6. 企業(yè)網(wǎng)絡(luò)宣傳不能單單靠

        隨著互聯(lián)網(wǎng)+病毒一樣的流傳開來,中小型企業(yè)越來越開始重視網(wǎng)絡(luò)宣傳。一些...

      7. 濟(jì)南網(wǎng)站建設(shè)去這幾個(gè)國

        一個(gè)好的網(wǎng)站不是靠設(shè)計(jì)師憑空就能想想出來的,網(wǎng)頁設(shè)計(jì)和其他平面設(shè)計(jì)一樣...

      8. 營銷型網(wǎng)站建設(shè)才能讓你

        很多人以為建網(wǎng)站很簡(jiǎn)單,花幾百元錢甚至一兩千元錢就能建個(gè)網(wǎng)站。晨曉網(wǎng)認(rèn)...

      9. 97久久人妻一区二区中文无码,亚洲中文字幕久久精品91,东京热久久综合伊人av,国国产一级黄色免费电影
      10. <small id="63y1u"><samp id="63y1u"></samp></small>